Make your own free website on Tripod.com

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

 

Basic HTML

Building Your Web Page

Getting Started

HTML documents are plain-text files created using a text editor.

Word processing software can be used if the document is saved as "text only with line breaks".

Terminology

ASCII—plain text format

HTML—Hypertext Markup Language

Hyperlink—text or image within HTML linking to another document

Text editor—simple text on a Mac, Notepad on Windows

Image Map—one image with hyperlinked quadrants (sections)

Terminology

Element—fundamental component of the structure of a text document

Tags—used to denote various elements in an HTML document

URL—Uniform Resource Locator

Attribute—additional information included inside the start tag.

Minimal HTML Document

Must contain basic tags HTML

HEAD—contains the TITLE

BODY—contains the text that makes up the page

Not all browsers support all tags

Browser ignores a tag that is non-supported

HTML not case sensitive

<BODY> is same as <body> or <BoDy>

Required Elements

<html>

<head>

<title>Barebones example</title>

</head>

<body>

This appears on the page

</body>

</html>

HTML Tags

Tags consist of a left angle bracket (<) a tag name followed by a right angle bracket (>)

Usually paired to start and end tag

End tag identical to start except has slash (/) preceding the tag text

Some elements have attributes included to specify the position of the content

Basic Tags

<HTML> </HTML>

Element tells the browser that the file contains HTML coded information

File name ends with .htm or .html

<HEAD> </HEAD>

Identifies the first part of the HTML coded document

Contains the title

<TITLE> </TITLE>

Document title that identifies the content

Displays at the top of the browser window

Displays on bookmark list

MUST be short

<BODY> </BODY>

Content of the document

Displays in the window of the browser

Practice

Code a page with Your Name, address, and e-mail address on it.

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: (beginning of your web page assignment)

Title (appears on top blue line)

Body (title to appear on your page screen)

Save the file as yourname.htm

Example

<HTML>

<HEAD>

<TITLE>Sparks’ Fly</TITLE>

</HEAD>

<BODY>

Welcome to the Web page of Dr. Cynthia Sparks

</BODY>

</HTML>

Page Options

Page options included as part of the <body> tag

Background attribute allows an image to be used as background for document

Default—black text and hyperlinks in blue with gray background

Colors

BGCOLOR=background color desired

TEXT= text displayed in the browser

LINK=hyperlink color

ALINK=active link color

VLINK=visited link color

The COLOR is listed as a six digit number

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

Hexidecimal Colors

Represents the combination of Red, Green, and Blue in values from 00 to FF

000000 = black (no color)

FFFFFF = white (fully saturated color)

Specific color using the number and letter combination

http://allmediasolutions.com/color

Color Wheel for Browser Safe Colors

http://www.lynda.com/hexh.html

Background File

Place a file as the background of your page

<body background="image_file_name">

Make sure the background file is saved in the same folder as your web page

Replaces the bgcolor command

http://www.looksmart.com

Best search engine for web page elements

RULES for HTML Syntax
REMINDER!!!

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

HTML Structural Tags
REMINDER!!!

Certain tags must appear in every document

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

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

<TITLE> and </TITLE> Identifies the document to the reader (appears on blue line at top of browser)

<BODY> and </BODY> All document information must be between these tags (what appears on the screen of your monitor)

Saving and Viewing Web Pages

Save the document

Windows 3.1 save as .htm

Windows 95 save as .html (MAC also)

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

Types of Tags—Reminder!

Container tags

Action must be turned on <H1>

Action must be turned off </H1>

Empty tags

Action occurs and is not repeated

Has to be turned on but not turned off

Example—break tag <BR>

Practice

Explore and find the hexidecimal code for a color you might like for text or background

Search and find a image that you might like to use as a background

Play with the practice page we have created so far

Using Head Tags

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

The tags are used in the body of the document

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

More Tags

Forced line breaks

You can insert lines in a word processor by pressing the enter key—does not work in HTML

<P> space between lines (= double space)

<BR>line break with no extra space (goes to next line)

These tags need no ending tag code

Character Formatting Tags

FONT Style

The style of font is determined by the…

<FONT>…</FONT>

FACE= type of font such as "arial"

SIZE= in points, PT

COLOR= color of text to be displayed

<FONT COLOR="red" FACE="arial" SIZE="7PT">red arial text appears</FONT>

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/1ColorSpecifier.html

Both browsers recognize some colors (handout of Netscape recognition of colors)

Changing Font Style

To change to another font character set—can be done without other commands

Immediately after the body command

Font face command

<font face="Comic Sans MS">

This does require a close command at end of document

</font face>

Alignment--Text

Text defaults to left alignment

You can also use the center commands to change location

<center>…</center>

To align test to right or justify use paragraph align command

<P ALIGN="RIGHT">

<P ALIGN="JUSTIFY">

Changing the Font Size

<FONT SIZE>

If you do not increase by points and want the browser to do it for you

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

Horizontal Rule Tag

<HR>

Draws a line between text

Divider between different topics on a page

SIZE attribute

Thickness in pixels

WIDTH attribute

Specifies width in percent of screen width

COLOR attribute

In Internet Explorer the color of the line (does not work in Netscape)

Indent Tags

<DD>

Works like the TAB key in a word processor

Extended Quotations—long quotations in a separate block in your browser

<BLOCKQUOTE>

container tag that indents all lines from both sides

</BLOCKQUOTE> ending code

Lists—Three Types

HTML supports

Unnumbered

Numbered

Definition

Nested lists—lists with sub-lists within them (these are sometimes difficult to follow so be careful when using them)

Creating Lists--Bulleted

Unordered List (Unnumbered 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 (list item) followed by the item to be listed {does not require closing tag}

To determine shape of bullet use TYPE=CIRCLE or SQUARE. The default is solid disk shape displayed if not specified.

Creating Lists--Numbered

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--Definition

Definition Lists (Glossary List)

Displays alternating definition terms and definitions

DD and DT tags can contain multiple paragraphs

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

TIP

HTML supports multiple list formats

For more help on various kinds of lists visit

http://htmlgoodies.com

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"

Change your background color to something you like

Now select a text color

Color your headline a different color from the text

 
This page was updated on:  04/10/02