Web Publishing Basics I

Jeff Pankin

Information Services and Technology

Page 1

Contents

Course Objectives ....................................................................................... 2

Creating a Web Page with HTML ................................................................. 3

What is Dreamweaver? ................................................................................ 3

What is HTML? ............................................................................................ 3

What are the basic elements of an HTML document? ........................................ 3

What is the basic set of code for an html document? ....................................... 4

Create a Site Definition ................................................................................ 5

Create the initial web page ........................................................................... 5

Preview the File in a Browser ........................................................................ 5

Add html tags to the web page ..................................................................... 5

Enhance the visual appearance of a page with additional html tags ................... 6

Add an image to a web page ......................................................................... 6

Practice ...................................................................................................... 7

Add a link to a page ..................................................................................... 7

Practice ...................................................................................................... 7

Formatting a Web Page using Cascading Style Sheets (CSS) ...................... 8

What is CSS and what how can it enhance my web page? ................................ 8

Basic CSS Syntax ........................................................................................ 8

Examples of Properties and Values ................................................................ 8

Practice ...................................................................................................... 9

Using Class styles to format content .............................................................. 9

Apply a Class style ...................................................................................... 9

Practice ...................................................................................................... 9

Using the Design View in Dreamweaver .................................................... 10

The Properties Panel .................................................................................. 10

Upload Your Files to the Live Web Server .................................................. 11

Create a Site Definition in Dreamweaver ...................................................... 11

Connect to your site locker, upload your files and view in your browser ........... 12

Resources ................................................................................................. 13

Copyright © 2011 by Massachusetts Institute of Technology. All Rights Reserved.

Page 2

Course Objectives

1. Create and publish a simple document on the Web.

2. Use the graphical Dreamweaver editor and HTML to create a web page.

3. Learn to code basic HTML elements including headings, paragraphs,

lists, images and links.

4. Upload files to Athena for access from web browsers.

5. Format page elements using Cascading Style Sheets.

6. Examine MIT websites to identify HTML elements.

7. Review MIT and non-MIT resources for help and further learning.

Page 3

Creating a Web Page with HTML

What is Dreamweaver?

Dreamweaver is the most popular web design, development and management tool

in use today. It allows you work in a WYSIWYG Design view or to work directly

with HTML in the Code view.

What is HTML?

HTML (HyperText Markup Language) is a language for describing web pages. HTML

documents are read and displayed (rendered) by web browsers - Firefox, Safari,

Internet Explorer, or Chrome.

What are the basic elements of an HTML document?

HTML consists of plain text and markup tags which describe how to display the

text.

1. Tags are keywords surrounded by angle brackets.

<html>

2. Tags usually come in pairs.

<title> </title>

<h1> </h1>

<p> </p>

3. Plain text content is placed between the pairs of tags.

<title> The MIT Center for Industrial Growth </title>

<h1> Welcome to the Center for Industrial Growth</h1>

<p> The Center was founded in 1953 when Professor John Pendleton… </p>

Page 4

What is the basic set of code for an html document?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>The MIT Center for Industrial Growth</title>

</head>

<body>

<h1>Welcome to the Center for Industrial Growth</h1>

<p> The Center was founded in 1953 when Professor John Pendleton… </p>

</body>

</html>

Tag Description

DOCTYPE Explains the HTML version to use.

Note the use of XHTML* – see explanation below

html Marks the beginning and end of the html document.

head An area of the document to place information which will not be

displayed but is needed by the browser.

body The area of the code to place content which is to be displayed

in the browser.

title A tag placed in the head which displays its content in the top

window bar.

*XHTML is the most current version of HTML. XHTML requires adherence to

standards but is designed to work more consistently across more platforms and

with future updates.

Page 5

Create a Site Definition

1. From the Site menu choose New Site.

2. Click on the Advanced tab.

3. Select Local Info from the Category list.

4. Type a name for your project (e.g., cig).

5. Locate the Local Root folder on your hard drive using the browse icon.

Mac: select the folder and click Choose; Windows: open folder and click

Select. Double check to be sure it’s correct and edit if necessary.

Create the initial web page

1. From the File menu choose New, Blank Page, HTML then click the Create

button.

2. Open the file source.txt .

3. Copy the entire file and paste it into the new page – in the code view below

the <body> tag.

4. Save the file as learn.html.

Preview the File in a Browser

1. From the File menu choose Preview in Browser.

2. Select Firefox or Safari.

Add html tags to the web page

Tag Description

p Marks the content as a paragraph and adds space before and

after.

h1, h2, h3, h4, h5, h6 Marks the content as a section heading. h1 is the largest and

h6 is the smallest.

ul, ol These tags create an unordered list or ordered list.

li Each list item is enclosed in a set of li tags.

Page 6

Enhance the visual appearance of a page with additional html tags

Tag Description

blockquote Indents content enclosed by a pair of blockquote tags. You

may blockquote several tags at once.

<hr /> Adds a horizontal rule (straight line) at the point where the tag

is placed. The hr tag does not require a closing tag. Note the

format for a single tag.

<br /> Creates a line break at point where the tag is placed. The break

is a single line break. The br tag does not require a closing tag.

Note the format for a single tag.

em Adds italic to the enclosed content. The em tag is recognized by

screen readers.

strong Adds bold to the enclosed content. The strong tag is recognized

by screen readers.

Add an image to a web page

Tag Description

<img /> Adds an image at the point where the tag is placed. The img tag

does not require a closing tag. Note the format for a single tag.

Images displayed on web pages are stored in separate files and

loaded when required.

src=”logo.jpg” The img tag alone does not indicate where the image file is

located. The src attribute calls the actual image file. The src

attribute sits inside the img tag.

<img src=”logo.jpg” />

alt=”mit logo” The alt attribute holds text which is read by screen readers. It is

also displayed if the image cannot be loaded. The alt attribute sits

inside the img tag.

<img src=”logo.jpg” alt=”image of mit logo” />

border=”0” The border attribute may be used to add or remove a border from

an image. The border attribute sits inside the img tag.

<img src=”logo.jpg” alt=”image of mit logo” border=”0” />

Page 7

Practice

1. Add the MIT dome image to the title.

2. Add the MIT logo image to the footer.

Add a link to a page

Tag Description

a The anchor tag used to create a link to an external web

page, another page in the current web site or a mailto

link. The anchor tag encloses the text or image the user

will click on.

<a href=”directory.html”>Click for Directory</a>

href=”http://web.mit.edu” The anchor tag alone does not indicate the destination

after the click on the link. The href attribute indicates

where the click will go. The href attribute sits inside the a

tag.

<a href=”http://web.mit.edu”>click here</a>

<a href=”directory.html”>click here</a>

href=”mailto:sjones@mit.edu” The mailto link will open the default mail program and

address a message. The mailto: includes a colon, has no

spaces and sits inside the href attribute.

<a href=”mailto:sjones@mit.edu”>click here</a>

Practice

1. Add a link from MIT in title and the MIT logo image to the MIT homepage.

2. Add a link to the words “click here” in the footer which addresses an email to

admin@cig.edu.

3. Add a link from Dr. Hardt to his bio page hardt-bio.html.

Page 8

Formatting a Web Page using Cascading Style Sheets (CSS)

What is CSS and what how can it enhance my web page?

A style is a rule describing how to format a piece of html. A collection of these

styles is called a style sheet.

A style might contain several formatting elements e.g., bold, blue, 24px. By

applying a style to content all the formatting in the style is applied at once.

When the formatting of a style is changed all content with that style gets updated

automatically.

A style definition contains three parts: a selector, a property and a value.

selector the name of a tag (tag style)

a name you create (class

style)

h1, p, body

.mit, .align-table

property the attribute you wish to change font-size, font-family, color

value what the attribute will change to 24px, “times new roman", blue

Basic CSS Syntax

The style tag including the type attribute is placed in the <head> of the

document. A single style declaration may include multiple property/value pairs

separated by a semicolon.

<style type="text/css">

selector {property: value}

selector {property: value; property: value}

</style>

Examples of Properties and Values

Property Values

color (text color) blue, #44AA77

background (background

color)

blue, #44AA77

font-family arial, “times new roman”, sans-

serif

font-size 24px, 1.5em

Page 9

Practice

1. Add the CSS style tag to the head of the web document.

2. Add style definitions for p, h1, h2, ul and li.

Using Class styles to format content

With a tag style definition, all places where the tag is used are styled according to

the definition. A style which defines h2 to blue would cause all content with the h2

tag to be blue.

Suppose a single piece of content with the h2 tag needs to be green instead of blue. You can accomplish this with a class style.

A class style is a type of style which you name, define and apply manually to a tag or individual piece of content. Class styles are defined in a similar way to tag styles.

.mit {color: maroon}

Note the selector name is not a tag but a name you choose. It begins with a

period.

Apply a Class style

Apply a class style to a tag.

<p class=”mit”>Welcome to the MIT Watercolor Club Home Page</p>

Apply a class style to content using the <span> tag.

<p>Welcome to the <span class="mit">MIT Watercolor Club</span> Home Page.</p>

We drop the period from the name of a class style when it is applied.

Practice

1. Create a class style to make the letters MIT in the title the color maroon.

Page 10

Using the Design View in Dreamweaver

Everything we have accomplished using html in the Code view we can also

accomplish through point and click in the Design view.

The Properties Panel

The Properties Panel is used for formatting. It is context sensitive based on the

cursor location. If your cursor is located in some text you will see the following

choices in the panel.

With an image selected these choices are available.

If the cursor in located in a table these are the choices.

Page 11

Upload Your Files to the Live Web Server

Create a Site Definition in Dreamweaver

1. From the Site menu choose New Site

2. Click on the Advanced tab

3. Select Local Info from the Category list

4. Type a name for your project (e.g., same name as your project folder)

5. Locate the Local Root folder on your hard drive using the browse icon. Mac

users can select the folder and then click Choose. Windows users must open

the folder and then click Select. Double check to be sure it’s correct and edit

if necessary.

6. Select Remote Info from the Category list

7. Select Access then FTP

8. Select or enter the following:

FTP Host athena.dialup.mit.edu

Host Directory examples /afs/athena.mit.edu/org/c/cig/a#

Login your Kerberos username

Password leave blank

Use Passive FTP check this option

Use Firewall uncheck this option

Use Secure FTP (SFTP) check this option

Page 12

Connect to your site locker, upload your files and view in your browser

1. Click the Expand/Collapse tool to see files on your computer and on the

server in a split screen.

2. Click on the Connect icon on the toolbar. It looks like a plug.

3. Select your files from the local folder (right column) then click the upload

button.

4. Click Yes when asked to upload dependant files.

Note: To restore the default screen arrangement click on Windows > Workspace,

and choose Default (Mac) or Designer (Windows).

For more complete details on site definition, uploading and downloading files see

the appropriate sections of the Web Maintenance Essentials course

documentation.

Page 13

Resources

1. Web Resources at MIT

http://ist.mit.edu/services/web

2. MIT Software

http://ist.mit.edu/services/software

3. TSM No-cost Backup Service

http://ist.mit.edu/services/backup/tsm

4. MIT IS&T Help Desk

http://ist.mit.edu/support Email: help-desk@mit.edu

Phone: 617-253-1101

5. IS&T Training Resources

IS&T Training Home http://ist.mit.edu/services/training IS&T Web Training: https://ist.mit.edu/services/training/webpublishing lynda.com: lynda.mit.edu

6. Athena User Accounts

http://ist.mit.edu/support/accounts Email: accounts@mit.edu

Phone: 617.253.1325

7. Publishing Services Bureau (PSB)

http://web.mit.edu/psb