Vancouver Information Technology

HTML Workshop Index

Purpose

The purpose of this workshop is to teach you how to use Hypertext Markup Language to create a simple web page.

Objectives

To learn how to create a simple web page using Wordpad (PC) or SimpleText (MAC) and Netscape Navigator.
To learn the basic HTML tags for formatting, reference links, images and tables
To learn some basics of html editors.

Outline for VIS HTML Workshop

I. Creating HTML Documents

Creating New Documents

Using Templates
Student Disclaimer

II. Anatomical Tags

Creating a Text File
Viewing the File
Adding HTML Coding

III. Formatting Tags

Page Formatting

Paragraphs
Line breaks
Heading
Horizontal Rules
Lists

Text Formatting

Bold
Italic
Center
Font Size

IV. Reference Links

External

Internal

To Another Page in Same Directory
To Another Section on Same Page

Mail To

VIII. Tables

Simple Tables
Adding Complexity to Your Table
Adding Graphics and Links to Your Table

^top

I. Creating HTML Documents

A. Creating New Documents

One way to create Web pages is to use a text editor and a web browser such as Wordpad or SimpleText and Netscape.

To use Wordpad (PC):
1. Click on the Start button on the taskbar.
2. Go to Programs.
3. Go to Accessories.
4. Click on Wordpad.
5. Create or Open your document.
6. From File menu, go to Save As.
7. Save the file as a text only file giving it a name with the file extension .htm or .html. For example: home.htm.
  Remember to change the files of type to Text Only first, then rename your document. If you name the document then change to Text Only, you will need to go back and change the file extension from .txt to .htm.
To use SimpleText (MAC):
1. Double click the hard drive icon to open it.
2. Double click the System Folder to open it.
3. Double click the Applications folder to open it.
4. Double click the SimpleText icon.
5. Create or open your document.
6. From the File menu, go to Save As.
7. Change to the location you want to save the file in.
8. Name the file and include the .htm or .html file extension. (with SimpleText, there is no need to save as a text file.)
Open Netscape.
From File Menu, go to Open File in the Browser.
Find your file (ex: home.htm) and Open it.
As you make changes in the text file, save the file, switch to Netscape and click on the Reload button to see the changes.
Switching between Wordpad (PC) or SimpleText (MAC) and Netscape allows you to see mistakes you may have made in the coding.

B. Using Templates

To use this as a template just rename the file using the Save As option in the file menu. Name the file web.htm or an appropriate name for a template. This allows you to use the file again for other pages. All you need to do is modify the coding and text to suit your needs.

C. Student Disclaimer Information

The following information must appear on each page that students load on the WSU Vancouver Web servers. Please do not change or reword any portion of this disclaimer except for your login name as appropriate.

<P><I>This page has not been reviewed or approved by Washington State

University at Vancouver and its contents are solely the creation and

responsibility of [Your First and Last Name Goes Here]. </I></P>

<P><I>Comments and questions should be sent

to:<A HREF="mailto:[Your Userid Goes Here]@vancouver.wsu.edu">[Your

Userid Goes Here]@vancouver.wsu.edu</A></I><BR>

<SCRIPT LANGUAGE="JavaScript">var theDate = ""; theDate =

document.lastModified; document.write("Last Updated: ");

document.write(theDate); document.write(); </SCRIPT></P>

II. Anatomical Tags

A. To Create a Simple Text File

Open Wordpad (PC) or SimpleText (MAC).
Type a short paragraph, such as the following. Be sure to include all spaces and paragraphs.
My Name is Michelle. I go to classes at WSUV. I take the following classes:
Eng 355
Pols 405
Eng 301
My favorite activities are:
reading
writing
skiing
Save the file as a text file with the extension .htm or .html
a. Go to File Menu and choose Save As option.
b. Make sure the Files of Type: box says text only.
c. Name the file home.htm Be sure to include the .htm
d. Click Save button.

B. View File in Netscape

Open Netscape
In file menu go to Open File in Browser
Find the file and open it.

C. HTML Coding

Anatomical tags are necessary for "properly formatted" HTML documents.

`<html> </html>`	HTML is used to encompass your document. It will be the first and last tag on your document.
`<head> </head>`	HEAD is used to convey information about the HTML page.
`<title> </title>`	TITLE is used to identify a document and is necessary for indexing of the page.
`<body> </body>`	BODY is used to mark text as content. This will start and end at the top and bottom of the visual part of the HTML.

Example:

<html>

<head>

<title> Title of HTML goes here </title>

</head>

<body>Visual content of HTML </body>

</html>

Proper HTML Coding

It is important to correctly code an HTML document. Using proper HTML code will make editing, updating, and debugging the document much easier. This is achieved by:

a. Using all tags correctly even when you know the browser will read it.
b. Spacing in your text document for easier reading/editing.

III. Formatting Tags

A. Page Formatting

Paragraphs <P>
The paragraph mark <P> places a paragraph return and an extra space after the line.

Example:
line of text<P>
line of text<P>
line of text<P>
Line Breaks <BR>
The break mark <BR> places a line break and does not place an extra space after the line.

Example:
line of text<BR>
line of text<BR>
line of text<BR>

Heading <H#> </H#>

Please note:The smaller the header size number the larger the font displayed will be. Another important thing to remember about the header is that it will put a return at the end of the closing markup tag.

<H1></H1>	HEADER SIZE 1
<H2></H2>	HEADER SIZE 2
<H3></H3>	HEADER SIZE 3
<H4></H4>	HEADER SIZE 4
<H5></H5>	HEADER SIZE 5
<H6></H6>	HEADER SIZE 6

Horizontal Rules <HR>

Horizontal rule places a horizontal line across the page. Please note that it also places a return at the end of itself. Included are examples of the Netscape extension which can be used in combination.

Example:

<HR>

<HR NOSHADE>

<HR WIDTH=70>

<HR WIDTH=70%>

<HR DEPTH=20>

<HR WIDTH=50% ALIGN=left>

<HR WIDTH=50% ALIGN=right>
Lists
a. Unordered Lists <UL>, <LI>, </UL>.
The correct tags must be at the beginning and ending of lists.
In our Word file, let's make our first list an unordered list:
<UL>
<LI>Eng 355
<LI>Pols 405
<LI>Eng 301
</UL>

b. Ordered Lists <OL>, <LI>, </OL>
Let's make the second list an ordered list.
My favorite activities are:
<P>
<OL>
<LI>reading
<LI>writing
<LI>skiing
</OL>

c. Nested Lists
The following is how we can nest lists:
My favorite activities are:
<P>
<OL>
<LI>reading
<UL>
<LI>Science Fiction
<LI>Mystery
</UL>
<LI>writing
<LI>skiing
</OL>

d. Attributes for Lists
1. unordered lists:
  disc, square, circle
  <UL TYPE="square"> </UL>
2. ordered lists: type of numbering system and starting number:
  Arabic numbers, Capital letters, Lowercase letters, Roman numerals,
  Lowercase Roman numerals. Number value must be positive integer.
  <OL START="3" TYPE="A"> </OL>

B. Text Formatting

Bold
<b>Self explanatory</b>
Italic
<i>Self explanatory</i>
Center

<center>Self explanatory</center>
Bold, Italic, and Center

<b><i><center>Bold, Italic, and Center</center></i></b>
Font Size
Please note: the smaller the font size number the larger the font displayed will be. Another important thing to remember, is font size will not put a return at the end of the closing markup tag. You will need to do this manually.

<FONT SIZE=1></FONT>	FONT SIZE 1
<FONT SIZE=2></FONT>	FONT SIZE 2
<FONT SIZE=3></FONT>	FONT SIZE 3
<FONT SIZE=4></FONT>	FONT SIZE 4
<FONT SIZE=5></FONT>	FONT SIZE 5
<FONT SIZE=6></FONT>	FONT SIZE 6
<FONT SIZE=7></FONT>	FONT SIZE 7

IV. Reference Links

External Anchors

Make "Eng 355" in list a link to Prof. Kendrick's Syllabus.

<A HREF="http://www.vancouver.wsu.edu/fac/kendrick/355/table.html"> Eng 355 </A>

Mail To: Links

In the disclaimer section we cut and paste, complete the mailto: link.

<A HREF="mailto:eccles@vancouver.wsu.edu"> eccles@vancouver.wsu.edu</A>

Internal Anchors

Make your name in the first line a link to the bottom of the page where the disclaimer shows your name.
Name the anchor: This is the link you want to jump TO. Place the tag:

<A NAME="myname"> </A> at the beginning of the disclaimer paragraph.
Make the link: This is the link you want to jump FROM. Place the tag:

<A HREF="#myname"> Michelle </A> around your name.
Make a "Back to Top" internal link. At the top of the page by your Header title place the tag:

<A NAME="top"> </A>

At the bottom of the page by the disclaimer place the tag:

<A HREF="#top">Back to Top </A>.

V. Images

A. Image Referencing

To have an image appear in a web page, the path for the graphic file will need to be known. In most situations, the graphic file will be in the same directory as the web page referencing it.

The tag is as follows:

<IMG SRC="filename.gif">
img = image
src = source
=" " between the brackets is the path and file name of the file.

B. Images Not in the Same Directory as the Web Page:

Sometimes images are not in the same directory as the web page that references them. In that case, the reference tag needs to indicate the pathway where the image is:

The tag would be:

<IMG SRC="http://www.vancouver.wsu.edu/vis/online/html/free_images/car3.gif">
OR:
<IMG SRC="../free_images/car3.gif">

where the two dots represent the directory path where the web page is and the rest of the pathway indicates that the image is in that same directory path, but further down the structure.

C. Image Tag Attributes

Size
<IMG SRC="bookappl.gif" WIDTH=100 HEIGHT=100> This tells the web browser exactly how many pixels of space to allot for this image.
(You can get the pixel size from your image-processing software, such as Adobe Photoshop. Some browsers will also display the dimensions of an image file in the title bar if the image is viewed by itself without an enclosing HTML document using View- Document Info.)
NOTE: Some browsers use the HEIGHT and WIDTH attributes to stretch or shrink an image to fit into the allotted space when the image does not exactly match the attribute numbers. Not all browser developers think stretching/shrinking is a good idea, so don't plan on your readers having access to this feature. Check your dimensions and use the correct ones.
Alignment

<IMG SRC="bookappl.gif" ALIGN="top">

This tells the browser to align the text at the top of the picture, but also causes only the first line of text to be up there; the rest jumps to the bottom of the image which is the default.

<IMG SRC="bookappl.gif" ALIGN="center">

This tells the browser to align the text beginning at the center of the picture, but again causes the rest of the text to jump to the bottom of the image.
To display an image without any associated text (e.g., your organization's logo), make it a separate paragraph. Use the paragraph ALIGN= attribute to center the image or adjust it to the right side of the window as shown below:
<p ALIGN=CENTER>
<IMG SRC = "BarHotlist.gif">
</p>
Alternate Text for Images
Some World Wide Web browsers -- primarily the text-only browsers such as Lynx -- cannot display images. Some users turn off image loading even if their software can display images (especially if they are using a modem or have a slow connection). HTML provides a mechanism to tell readers what they are missing on your pages if they can't load images.
The ALT attribute lets you specify text to be displayed instead of an image. For example:

<IMG SRC="UpArrow.gif" ALT="Up">

where UpArrow.gif is the picture of an upward pointing arrow. With graphics-capable viewers that have image-loading turned on, you see the up arrow graphic. With a text-only browser or if image-loading is turned off, the word Up is shown in your window in place of the image.
You should try to include alternate text for each image you use in your document, which is a courtesy for your readers -- or, for users who might be visually impaired, a necessity.

VI. Colors

A. Background Colors

<BODY BGCOLOR="#FFFFFF">

The color code for the background color of your page is an attribute of the <BODY> tag. Some considerations are:

making sure your color is pleasing to the eye.
making sure the text is not lost in the background color.
deciding how many graphics versus background color.

B. Text Colors

<BODY TEXT="#000000">

The color code for text in your entire document is an attribute of the <BODY> tag also. The codes are written exactly as the background color codes.

<FONT COLOR="#FF0000">Changes this text color</FONT>

The color code for text in just specific parts of your body is an attribute of the <FONT> tag. The above tag would make the words "Changes this text color" red. This is useful for headings and special words, but should be used carefully since reference links are also in color.

C. Reference Link Colors

<BODY LINK="#00FF00" ALINK="#DB70DB" VLINK="#FF0000">

The color codes for reference links are attributes of the <BODY> tag. LINK is for unvisited reference links; ALINK is for active links; VLINK is for visited links.

In the example, an unvisited link would be blue, the active link would be purple, and the visited link would be red. This is useful when you have several links on a page. It allows the viewer to be able to see which links they have already visited and which link they are on currently. Netscape defaults are usually blue for unvisited and purple for visited, with red for the active link.

VII. Background Images

The code for a background image is as follows (fill in the name of the image as needed):

<BODY BACKGROUND="marble.JPG">

The background image code is an attribute of the <BODY> tag. Always place the image file in the same directory as the web page file for ease of use. Again, the handout last week had sites that contain several nice background images for your page and you could try out several of these.

http://www.vancouver.wsu.edu/vis/online/html/free_images/images.htm

Background images are often used when a web page designer uses a sidebar to display the contents on each page for easy navigation of the site. The same background image is used on each page and the contents that link to the various pages are set up in tables.

http://www.freeimages.com/
http://www.egraphics.com.au/

VIII. Tables

A. Simple Tables

The Table Tags

<TABLE> </TABLE>
<TR> & </TR>, <TD> & </TD>,
<TH> & </TH>
The Simple Table Set Up
This table will have three rows and three columns, no borders and no special formatting. Notice that the cells will default to the size of the largest entry for that row or column.

<TABLE>
<TR>
<TD>Lab Session</TD><TD>Concept</TD><TD>Assignment</TD>
</TR>
<TR>
<TD>Week 1</TD><TD>Introduction</TD><TD>Read Intro in Beginner's Guide</TD>
</TR>
<TR>
<TD>Week 2</TD><TD>Anatomical Tags & Formatting tags</TD><TD>Practice Tags</TD>
</TR>
</TABLE>
Adding Borders to Your Table and Its Cells.

<TABLE BORDER>

This will give your table borders. You can specify the size of the borders by adding a number value to the BORDER attribute.

<TABLE BORDER=6>

Notice that this changes the size of the border around your table, but not the border around the cells.

<TABLE BORDER=6 CELLPADDING=6 CELLSPACING=6>

Cellpadding will increase the spacing inside of the cell around the text or graphics in the cell. Cellspacing increases the size of the borders around each cell.
Sizing the Table

<TABLE BORDER=6 WIDTH=100%>

Adding the WIDTH attribute will determine the amount of space the table takes up on the screen.
Aligning the Table

<TABLE BORDER=6 ALIGN="right">

Align right is the only attribute that you need in the table tag. If you want to align the table in the center, use the <CENTER> tags at the beginning and end of the table. The Netscape default for alignment of a table is left.

B. Adding Complexity to Your Table

Formatting Inside the Table
- To make headers across the top:
  In the first table row, change each of the <TD> & </TD> tags to <TH> and </TH>.
  
  <TR>
  <TH>Lab Session</TH><TH>Concept</TH><TH>Assignment</TH>
  </TR>
- To make headers down the side:
  <TR>
  <TH>Lab Session</TH><TD>Concept</TD><TD>Assignment</TD>
  </TR>
  <TR>
  <TH>Week 1</TH><TD>Introduction</TD><TD>Read Guide</TD>
  </TR>
  
  By using the <TH> tag in the place of the first table data tags, you can make the first words in each row be a header.
  The <TH> is the Table Header tag and will automatically bold and center the text that uses that TH tag.
Using Other Formatting Tags:
You can, of course, also use any of the formatting tags (bold, italics, etc.) that you have learned on text in the table. Make a couple of your entries in bold or italic.

<TD><B>Week1</B></TD><TD><I>Introduction</I></TD><TD><FONT SIZE=6>Read Guide</FONT></TD>

Notice that since we increased the font size in the one cell the size in the row and column changed also.
Sizing Rows and Columns
1.

<TR>
<TD WIDTH=300>Week 1</TD><TD WIDTH=300>Introduction</TD><TD WIDTH=300>Read Intro in Beginner's Guide</TD>
</TR>

By specifying pixel width in each cell you can make the cell the same size. But, the cells will resize automatically to accommodate the largest entry in the cell, so true exact sizing of cells is not possible in some cases. We can, however, make the cell take up just a certain percentage of the table width.
2.

<TR>
<TD WIDTH=20%>Week 1</TD><TD WIDTH=30%>Introduction</TD><TD WIDTH=30%>Read Intro in Beginner's Guide</TD>
</TR>

Adding Specific Height:
<TABLE BORDER WIDTH=50% HEIGHT=15%>

The important thing to remember about sizing tables is that row and column size are always going to be connected to the size of the information in the cell.
Aligning Contents in Cells
- The ALIGN=left, center, or right can be used in cells or whole rows.
  
  <TR>
  <TD ALIGN=center>Week 1</TD><TD ALIGN=right>Introduction</TD><TD ALIGN=left>Read Intro in Beginner's Guide</TD>
  </TR>
- This aligns the text in each individual cell horizontally. Align can also be used in the <TR> tag to align the whole row at one time. For example:
  
  <TR ALIGN=center>
  <TD>Week 1</TD><TD>Introduction</TD><TD>Read Intro in Beginner's Guide</TD>
  </TR>
- You can also align the text vertically in either the individual cell or the whole row.
  
  <TR>
  <TD VALIGN=center>Week 1</TD><TD VALIGN=top>Introduction</TD><TD VALIGN=bottom>Read Intro in Beginner's Guide</TD>
  </TR>
- The VALIGN attribute aligns the text vertically in the cell, which becomes important when you have more in one cell than the others and want the information to line up and not move down the page.
  
  <TABLE>
  <TR>
  <TD WIDTH=20% VALIGN=top>Week 1</TD><TD VALIGN=top WIDTH= 60%>Introduction to HTML coding, the World Wide Web, and how to create pages that internet readers will be able to navigate and find useful to read. Pages can inform, teach, sell, or entertain. How will your pages affect your audience.</TD>
  </TR>
  </TABLE>
- Now, in this same two cell, single row table, remove the VALIGN attributes. What you see is that the default vertical alignment of center makes the first cell line up in the center of the second, longer cell.
Spanning Columns and Rows
- To span columns with a single header:
  <TABLE BORDER>
  <TR>
  <TD COLSPAN=2>Lab Session and Concept</TD><TD>Assignment</TD>
  </TR>
  <TR>
  <TD>Week 1</TD><TD>Introduction</TD><TD>Read Intro in Beginner's Guide</TD>
  </TR>
  <TR>
  <TD>Week 2</TD><TD>Anatomical Tags & Formatting tags</TD><TD>Practice Tags</TD>
  </TR>
  </TABLE>
- To span rows with a single cell:
  <TABLE BORDER>
  <TR>
  <TH ROWSPAN=3>Lab Session 1</TH><TH>Concept</TH><TH>Assignment</TH>
  </TR>
  <TR>
  <TD>Introduction</TD><TD>Read Intro in Beginner's Guide</TD>
  </TR>
  <TR>
  <TD>Anatomical Tags & Formatting tags</TD><TD>Practice Tags</TD>
  </TR>
  </TABLE>

C. Adding Graphics and Links in Your Table

Links and images are coded exactly the same in tables as anywhere else in your page.

<TABLE BORDER>
<TR>
<TH ROWSPAN=3><A HREF="http://www.vancouver.wsu.edu"> Lab Session1 </A></TH><TH>Concept</TH><TH>Assignment</TH>
</TR>
<TR>
<TD>Introduction</TD><TD>Read Intro in Beginner's Guide</TD>
</TR>
<TR>
<TD>Anatomical Tags & Formatting tags</TD><TD><IMG SRC="Atom1.gif"></TD>
</TR>
</TABLE>

And, of course, you can make your images clickable.

HTML Workshop Index

Purpose

Objectives

Outline for VIS HTML Workshop

I. Creating HTML Documents

A. Creating New Documents

B. Using Templates

C. Student Disclaimer Information

II. Anatomical Tags

A. To Create a Simple Text File

B. View File in Netscape

C. HTML Coding

III. Formatting Tags

A. Page Formatting

HEADER SIZE 1

HEADER SIZE 2

HEADER SIZE 3

HEADER SIZE 4

HEADER SIZE 5

HEADER SIZE 6

B. Text Formatting

IV. Reference Links

External Anchors

Mail To: Links

Internal Anchors

V. Images

A. Image Referencing

B. Images Not in the Same Directory as the Web Page:

C. Image Tag Attributes

VI. Colors

A. Background Colors

B. Text Colors

C. Reference Link Colors

VII. Background Images

VIII. Tables

A. Simple Tables

B. Adding Complexity to Your Table

C. Adding Graphics and Links in Your Table