Sparks Fly
[Home] [PBS VideoDatabase] [Social Studies] [TSU] [UVA]

 

Building Your Web Page
Understanding HTML Syntax

Codes used to create HTML document--tags

Rules when using HTML tags

Always enclosed in < and > angle brackets

Can be upper or lower case--no difference

Tags that have to be turned on and off are called container tags

Tags used by themselves--empty tags

No spaces can be inserted in a tag

Parts of HTML Document

HTML documents consist of three parts

Header--includes the title of the document

Body--includes the main text of the document

Footer--includes the author and date revised

HTML Structural Tags

Certain tags must appear in every document

<HTML and </HTML> The entire document must be between these tags.

<HEAD> and </HEAD> Defines a header for the document.

<TITLE> and </TITLE> Identifies the document to the reader.

<BODY> and </BODY> All document information must be between these tags.

Exercise 1

Open Notepad from Accessories

Turn on word wrap in Notepad by selecting Edit pull-down menu, choose Word Wrap

Key in a simple document with:

title--Your Name

body--Welcome to the web page of your name

Save the file as yourname.htm

Example

<HTML>

<HEAD>

<TITLE>Educational Service Center</TITLE>

</HEAD>

<BODY>

Welcome to the Web page of the Educational Resource Center.

</BODY>

</HTML>

Saving and Viewing Web Pages

Save the document

Windows 3.1 save as .htm

Windows 95 save as .html

Viewing

Open browser

File menu choose Open File

Select the location where you saved it

Select your document and choose Open or OK

Troubleshooting

Check all the tags to make sure they are

typed correctly

are without spaces

Remember brackets and slashes must be used correctly

Resave and Reload to your browser

Using Head Tags

There are six head tags <H1>…</H1>

Level 1 is the largest to level 6 the smallest.

These tags describe what the text is not how it will be displayed--the browser decides that

Not all browsers display text in the same way

Heading make you page easy to read

Use the tags in order

Break Tag

You can insert lines in a word processor by pressing the enter key

In HTML you need to use the empty line break tag <BR>

This tag needs no ending tag code

Exercise 1 continued

Lets change the look of the web page

Delete the body and insert the following

<H1>Welcome to Your Name Web Page</H1>This page is currently under construction.

Save the document, switch to Netscape and reload

Note:  the text size has changed and is on two separate lines even though you typed one line.

Style Tags

Changing the Font Size

<FONT SIZE>

Increase or decrease font size using numbers 1 to 7 (#3 is normal text size)

smallest is 1 to largest 7

Tag does not include automatic breaks so you can change within a sentence

Paragraph Tags

<P>

Equal to pressing the enter key twice

Like the break tag it is empty and requires no ending code

This tag allows spaces between paragraphs like that in a word processor

Horizontal Rule Tag

<HR>

Draws a line between text

Divider between different topics on a page

Indent Tags

<DD>

Works like the TAB key in a word processor

<BLOCKQUOTE>

container tag that indents all lines from both sides

</BLOCKQUOTE> ending code

Creating Lists

Ordered Lists (Numbered Lists)

This command automatically numbers a list as viewed in the browser

<OL>…</OL> define where the list begins and ends

<LI> empty tag placed at the beginning of each line of the list

Creating Lists

Unordered List (Bulleted List)

This places a bullet before each item in a list

<UL>…</UL> define the beginning and end of the list

<LI> placed at the beginning of each line of the list

Creating Lists

Definition Lists (Glossary List)

This creates a definition list…word then definition

<DL>…</DL> defines the beginning and end of the list

<DT> placed at beginning of the term

<DD> placed before definition

Exercise

Add a horizontal line between you welcome message and the rest of your page.

Create a list of items to be placed on your page

Choose either bulleted or numbered

Use the paragraph tag to place three lines between the list and the final line

Create a line that blinks

Write the following: "Comments sent to"

Background Color

Change the color of your web page

<BODY BGCOLOR="RRGGBB">

Locate at the beginning of the body text

Color code represents the amount of red, green, and blue

Numbers and sometimes letters represent the colors (F--full color)

Hexadecimal format--numbering system

HEX Format for Basic Colors

Changing Text Color

Basically the same method as background

<BODY TEXT="RRGGBB">

Watch to be sure that your page is readable in the browser. Some colors are difficult to read

Visit web site to determine color values

http://www.users.interport.net/~giant/COLOR/1ColorSpecifer.html

Exercise

Change your background color to something you like

Now select a text color

Color your headline a different color from the text

Creating Links

Linking to other files (relative linking)

Tag called anchor--tells browser where to find the file

<A HREF="path/filename.html">anchor text</A>

<A HREF> Creates an anchor to a reference (a location you specify)

the </A> closes the anchor

the anchor text is what you click on to activate the hypertext link

Creating Links

Linking to other sites (absolute linking)

You need to be very specific and watch the typing--this link is to a web address

<A HREF="http://www.disney.com">Disney</A>

Remember the text Disney will be displayed, highlighted, and underlined in the browser

Creating Links

Linking to the same file

This allows the reader to jump to a place in the document without having to read the whole thing

First--must leave a bookmark or pointer in the file then create the link

Pointer tag <A NAME="xxxx">

Link tag <A HREF="#xxxx">anchor text</A>

You must include the # to tell the browser to look for the pointer and not a different file.

Creating Links

Mail to links

Way to receive messages from visitors to your web page

<A HREF="mailto:e-mail address">anchor text</A>

Link Color

Three different types of link but usually only two colors are used for types of links

Unvisited links LINK=

Visited links VLINK=

Active links--this changes so fast not usually necessary to change

Add the link color commands to the Body color tag code line

<BODY BGCOLOR="0099BB"TEXT="6600DD"LINK="00FF00"VLINK="FF0000">

Exercise

Create a link that takes you to the Walt Disney site at www.disney.com

Test it

Graphics

Copyright--be careful and be sure you check before using the graphic

Loading depends on

size of the graphic, small loads much faster

type of graphic--.gif faster load than .jpeg

Graphics

.GIF type of file used for clip art

Graphics Interchange Format

.JPEG type of file used for photos

Joint Photographic Expert Group format

<IMG SRC> Image Search--searches for the graphic and loads it into your Web page

Be sure to put graphics files in same directory as web page to make loading faster

Graphics

Downloading Graphics Files

Great search engine for web "stuff"

http://www.looksmart.com

Search for backgrounds, animations, clip art, etc.

Find file you want to download (download OR)

Position the mouse over the image and right click and hold down

Choose Save this Image As

Save As dialog box appears

Save to directory where you have web page files

Click OK (graphic is saved to your selected location)

Be sure that you credit the site from which you took the graphic!

Graphics

Alignment

Where will the image appear on your page (automatically left)

<IMG SRC="graphic filename"ALIGN=RIGHT>

You can choose Right, Left, Middle, Bottom, Texttop

Exercise

Graphics

Select a graphic that represents you to be the theme graphic for your page

Select an animated graphic to represent a e-mail concept and position it at the bottom of your page

Tables

Three tags to create tables

<TABLE>…</TABLE>

<TR>…</TR> defines a row of cells

<TD>…<TD> indicates the table data and specifies the table cell

Table Borders

BORDER=# where # is the width of the border

code is placed inside the Table tag

<TABLE BORDER=5> number between 3 & 10

Tables

Table Size

If not specified, size determined by data used

To change decide the percentage of the window’s width you want the table to occupy

50% would cover 1/2 the window

100% would cover whole window

Tables

Table Cells

Specify the data in the cell

align the data ALIGN=XXX inside <TD>

left, right or center

align vertically VALIGN=XXX inside <TD>

top, bottom or middle

Creating Frames

Frames divide a single browser window into multiple windows

Sub-windows then can view different pages

Two types of web documents

Body documents--display in a single window

Frameset documents--divided window with URLs referencing to the document the browser is to display in the windows

Creating Frames

Replace the <BODY> tag with

<FRAMESET>…</FRAMESET>

You must now include tags that indicate the number of frames to be viewed on the page

Once this is done use the

<FRAME SRC="filename"> to tell the browser what to show in the window

Creating Frames

Split the window vertically

Change the <BODY> to <FRAMESET COLS="25%,50%,25%">

On the next line indicate the files to be viewed in each frame

<FRAME SRC="filename">

<FRAME SRC="filename">

<FRAME SRC="filename">

The web page will have three vertical windows with each of the referenced files on view

Creating Frames

Splitting Horizontally

Change in the FRAME SRC command the COLS to ROWS

<FRAME SRC ROWS="25%,50%,25%">

This creates specified percentage frames for the window of any browser

Creating Frames

Elastic frames

Enlarges or gets smaller depending on how much room is left in the window

<FRAME SRC="25%,50%,*">

This creates a window of 25% one of 50% and the last whatever is left over

It is a good idea to always create one elastic window to account for different screen sizes

Web pages can be frustrating and exciting all at the same time

HTML is easy once you understand the structure

HTML editors will create your pages BUT for troubleshooting or page problems, you need to understand the code

 
This page was updated on:  04/10/02