(HyperText Markup Language)

Web pages are written in a language all their own - HyperText Markup Language (HTML). You must either "speak the language" or use a computer program that translates for you. You can see the HTML source code for any Web page by pulling down the View menu along the top of the Internet Explorer (or Netscape) window and choosing Source (or Page Source).

 

HTML combines plain text with "tags" to format the text. An HTML tag consists of a left angle bracket < followed by a name of a tag and closed by a right angle bracket >. Tags are usually paired, the ending tag looks just like the beginning tag except a slash / precedes the text within the bracket. For example, a tag to start making text bold is <B>. The tag to stop making text bold is </B>. Tags are not case sensitive. Upper case and lower case letters are treated the same.

Creating and Viewing HTML Files

In this class, we will be writing HTML code in Windows Notepad. The Notepad program is accessible from the Windows Start menuProgramsAccessoriesNotepad.

Save all HTML documents in Notepad as a text document with an .html file name ending. To save as a text document:

1. Pull down the File menu and choose Save As . . .
2. Change the "Save as type:" box to read "Text Documents"
3. Type a name for the file. File names are case sensitive and cannot contain spaces or slashes. They must end in .html

1. Start Internet Explorer or Netscape
2. Pull down the File menu and choose Open (or Open Page)
3. Assuming the HTML file you want to open is on a diskette in drive A, type A:\ in the File Name box, then press OK (or Open).
4. A list of all the files on the diskette will be displayed on the screen. Single click on the file you want to open.

The HTML: The <B>dog</B> barked.
The results: The dog barked.

 

 

<H1>, <H2>, <H3>, <H4>, <H5>, <H6>

A few of the attributes you can add to the image tag include:

Align=left     (image aligns left and text wraps to right of image)
Align=right     (image aligns right and text wraps to the left of the image)
Width=xxx     (width of the image in pixels)
Height=xxx     (height of the image in pixels)
Alt="xxxxxx"     (description of image)
VSPACE=xxx     (vertical space in pixels between image and text)
HSPACE=xxx     (horizontal space in pixels between image and text)

Each attribute is separated by at least one space. The order of the attributes in not important.

 

Here is an example of an image tag using some attributes:

<IMG SRC="wolf.gif" align=right width=155 height=87 hspace=5 alt="A Timber Wolf">

NOTE: The numbers in the above example are in pixels. There are 72 pixels to the inch.

<A HREF="http://www.foxsports.com">Fox Sports</A>

The words Fox Sports will be the blue underlined-link words. The ending tag is </A>

 

When linking to a page in the same directory, you do not use http://. Simply put the name of the file in quotation marks.

        <A HREF="page2.html">The next page</A>
    The ending tag is </A>

The <HR> tag produces a 3-dimensional horizontal line across the page. To make the line extend only part way across the page, you can specify a width in percent, such as <HR WIDTH=50%>. You might want to put a <CENTER> tag before (and after) the <HR> tag if you specify a percent width. There is no ending tag.
        <CENTER><HR WIDTH=75%></CENTER>

Unordered lists are "bulleted" lists. An unordered list starts with the <UL> tag and ends with the </UL> tag. Each bulleted item begins with the <LI> tag. An unordered list puts a blank line before and after the list.

Here is the HTML:
        <UL>
        <LI>Apples
        <LI>Pears
        <LI>Bananas
        </UL>

Here is the result:

Ordered List     <OL> . . . </OL>

Ordered lists are "numbered" lists. An ordered list starts with the <OL> tag and ends with the </OL> tag. Each numbered item begins with the <LI> tag. An ordered list puts a blank line before and after the list.

Here is the HTML:
        <OL>
        <LI>Apples
        <LI>Pears
        <LI>Bananas
        </OL>

Here is the result:

A definition list consists of two parts: the term to be defined <DT>, and the definition <DD>. The definition is displayed indented under the term.

Here is the HTML:
<DL>
<DT>Hodgepodge
<DD>A thick stew of various meats and vegetables
<DD>Any jumbled mixture
<DD>Mess; medley
<DL>

Here is the result:

Hodgepodge

A thick stew of various meats and vegetables

Any jumbled mixture

Mess; medley

 

Any text between the block quote beginning and ending tags will be indented on all four sides. In other words, it will have a blank line before and after it. There will also be an indent on both the left and right sides of the text.

 

Background Color     BGCOLOR

Font     <FONT> . . . </FONT>

You can specify font size, color, and style. Font sizes go from 1 (very small) to 7 (very large). Font size 3 is average size.

Here is the HTML for font size:
<FONT SIZE=6>This will be big letters.</FONT>
Here is the result: This will be big letters.

Font colors are just like bgcolor with color names or hexadecimal values.

Here is an example of the HTML:

<FONT COLOR="red">This will be red text.</FONT>
Here is the result: This will be red text.

You can combine size and color attributes in the same Font tag.

    <FONT SIZE=4 COLOR="green"> . . . </FONT>

 

You can provide a link on your web page that will help the viewer send you an e-mail message.

Here is the HTML for an e-mail link:

    <A HREF="mailto:[email protected]">[email protected]</A>

Here is the result: [email protected]