HTML -1

What is an HTML File?

HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display the page
An HTML file must have an htm or html file extension
An HTML file can be created using a simple text editor

HTML documents are text files made up of HTML elements.

HTML elements are defined using HTML tags.

HTML Tags

HTML tags are used to mark-up HTML elements
HTML tags are surrounded by the two characters < and >
The surrounding characters are called angle brackets
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
The text between the start and end tags is the element content
HTML tags are not case sensitive, <b> means the same as <B>

Example 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<Title>Home Page for Lawrence M. Brown</Title>
</HEAD>
<BODY BGCOLOR="WHITE">
<H1 ALIGN="CENTER">Home Page for Lawrence M. Brown</H1>
<HR>
<IMG SRC="images/nswc.gif" WIDTH=300 HEIGHT=117
HSPACE=10 VSPACE=5 ALIGN="LEFT" ALT="NSWC Logo">
Senior Network Engineer<BR>
<A HREF="http://www.dt.navy.mil/">
Naval Surface Warfare Center</A><BR>
9500 MacArthur Boulevard<BR>
West Bethesda, Maryland, MD 20817-5700<BR>
<I>email:</I> <A HREF="mailto:brown@corewebprogramming.com">
brown@corewebprogramming.com</A><BR>
<I>Phone:</I> (301) 277-4648<BR CLEAR="ALL">
<P>
This is my personal home page. For more specific
programming-related resources pages, please see:

</BODY>
</HTML>

WYSIWYG Editors

· Microsoft FrontPage

· Claris Home Page

· Adobe PageMill

· Macromedia DreamWeaver

Example 2

HTML Document Template

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Title</TITLE>
</HEAD>

<BODY>
<H1>Main Heading</H1>

</BODY>
</HTML>

Example 3

HEAD section using Meta Tag

<HEAD>
<TITLE>Why You Should Buy Windows 2000</TITLE>
<BASE HREF="http://www.microsoft.com/windows2000/">
<META NAME="author" CONTENT="Bill Gates">
<META NAME="keywords"
CONTENT="Windows,Advocacy,OS,Operating Systems">
<META NAME="description"
CONTENT="A summary of the advantages of Windows 2000.">
</HEAD>

Example 4

Automatic reloading

<HEAD>
<TITLE>Why You Should Buy Windows 2000</TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="1800">
</HEAD>

Example 5

Forwarding

<HEAD>
<TITLE>Why You Should Buy Windows 2000 (New Address)</TITLE>
<META HTTP-EQUIV="Refresh"
CONTENT="5;
URL=http://www.apple.com/Buy-Win2000.html">
</HEAD>

Example 6

Heading

<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>
<H1>My First Web Page</H1>

</BODY>
</HTML>

Headings

Example 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE>Document Headings</TITLE>
</HEAD>

<BODY>
Samples of the six heading types:
<H1>Level-1 (H1)</H1>
<H2 ALIGN="CENTER">Level-2 (H2)</H2>
<H3><U>Level-3 (H3)</U></H3>
<H4 ALIGN="RIGHT">Level-4 (H4)</H4>
<H5>Level-5 (H5)</H5>
<H6>Level-6 (H6)</H6>
</BODY>

</HTML>

Legal Heading

<HTML>
<HEAD>
<TITLE>Legal Headings</TITLE>
</HEAD>

<BODY>

<H2><I>An Italic Heading</I></H2>
<H2><A NAME="Section5">Section Five</A></H2>

</BODY>
</HTML>

Illegal Heading

<HTML>
<HEAD>
<TITLE>Illegal Headings</TITLE>
</HEAD>

<BODY>

<I><H2>An Italic Heading</H2></I>

<A NAME="Section5"><H2>Section Five</H2></A>

</BODY>
</HTML>

Explicit Paragraph Tags

<HTML>

<HEAD>
<TITLE>Fully Specified Tags</TITLE>
</HEAD>

<BODY>
<P>
Paragraph 1
</P>
<P>
Paragraph 2
</P>
<P>
Paragraph 3
</P>
</BODY>

</HTML>

Implied Paragraph Tags

<HTML>
<HEAD>
<TITLE>Implied Tags</TITLE>
</HEAD>

<BODY>
Paragraph 1
<P>
Paragraph 2
<P>
Paragraph 3
</BODY>

</HTML>

Numbered, Bulleted, and Indented Lists

Simple List

<HTML>
<HEAD>
<TITLE>Numbered List</TITLE>
</HEAD>

<BODY>
<H1>Numbered List</H1>

A sample list:
<OL>
<LI>List Item One
<LI>List Item Two
<LI>List Item Three
</OL>

</BODY>
</HTML>

Nested Ordered List

<HTML>
<HEAD>
<TITLE>Nested Ordered Lists</TITLE>
</HEAD>

<BODY>
<H1>Nested Ordered Lists</H1>

<OL TYPE="I">
<LI>Headings
<LI>Basic Text Sections
<LI>Lists
      <OL TYPE="A">
        <LI>Ordered
            <OL TYPE="1">
              <LI>The OL tag
                  <OL TYPE="a">
                    <LI>TYPE
                    <LI>START
                    <LI>COMPACT
                  </OL>
              <LI>The LI tag
            </OL>
        <LI>Unordered
            <OL TYPE="1">
              <LI>The UL tag
              <LI>The LI tag
            </OL>
        <LI>Definition
            <OL TYPE="1">
              <LI>The DL tag
              <LI>The DT tag
              <LI>The DD tag
            </OL>
      </OL>
<LI>Miscellaneous
</OL>

</BODY>
</HTML>

Bulleted Lists

Simple Bullet

<HTML>
<HEAD>
<TITLE>Bulleted List</TITLE>
</HEAD>

<BODY>
<H1>Bulleted List</H1>

A sample list:
<UL>
<LI>List Item One
<LI>List Item Two
<LI>List Item Three
</UL>

</BODY>
</HTML>

Tables

Simple Table

<HTML>
<HEAD>
<TITLE>Simple Table</TITLE>
</HEAD>

<BODY>
<H1>Simple Table</H1>

<TABLE BORDER=1>
<CAPTION>Table Caption</CAPTION>
<TR><TH>Heading1</TH> <TH>Heading2</TH></TR>
<TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR>
<TR><TD>Row2 Col1 Data</TD><TD>Row2 Col2 Data</TD></TR>
<TR><TD>Row3 Col1 Data</TD><TD>Row3 Col2 Data</TD></TR>
</TABLE>

</BODY>
</HTML>

Tic-Tac-Toe

<HTML>
<HEAD>
<TITLE>2000 World Championship</TITLE>
</HEAD>

<BODY>
<H2 ALIGN="CENTER">2000 World Championship</H2>
Final result in the 2000 world tic-tac-toe championship.
Deep Green is "X", Barry Kasparov is "O".
<TABLE ALIGN="CENTER" BORDER=1 FRAME="VOID">
<TR><TH>X<TH>O<TH>X
<TR><TH>X<TH>O<TH>X
<TR><TH>O<TH>X<TH>O
</TABLE>
</BODY>

Table Background Color

<HTML>
<HEAD>
<TITLE>WWW Standards</TITLE>
</HEAD>

<BODY BGCOLOR="WHITE">
<H1 ALIGN="CENTER">WWW Standards</H1>

<TABLE BORDER=1 BGCOLOR="#EEEEEE">
<TR BGCOLOR="BLACK">
    <TH><FONT COLOR="WHITE">Standard</FONT>
    <TH><FONT COLOR="WHITE">Obsolete Version</FONT>
    <TH><FONT COLOR="WHITE">Most Widely Supported
    Version</FONT>
    <TH><FONT COLOR="WHITE">Upcoming Version</FONT>
<TR><TD>HTML
      <TD>3.2
      <TD>4.0
      <TD>XHTML
<TR><TD>HTTP
      <TD>1.0
      <TD>1.1
      <TD>1.2
</TABLE>

</BODY>
</HTML>

Table Column Spans

<HTML>
<HEAD>
<TITLE>Colspan</TITLE>
</HEAD>

<BODY>
<H1>Colspan</H1>

<TABLE BORDER=1>
<TR><TH COLSPAN=2>Col 1&2 Heading
      <TH>Col3 Heading
<TR><TD>Col1 Data
      <TD>Col2 Data
      <TD>Col3 Data
</TABLE>

</BODY>
</HTML>

Table Row Spans

<HTML>
<HEAD>
<TITLE>Rowspan</TITLE>
</HEAD>

<BODY>
<H1>Rowspan</H1>

<TABLE BORDER=1>
<TR><TH>Heading1<TH>Heading2
<TR><TD ROWSPAN=2>Data for Row 1&2, Col1
<TD>Row1 Col2 Data
<TR><TD>Row2 Col2 Data
</TABLE>

Table Groups

<HTML>
<HEAD>
<TITLE>Table Groups</TITLE>
</HEAD>

<BODY>
<H1>Table Groups</H1>

<TABLE BORDER=1 CELLPADDING=4 RULES="GROUPS">
<CAPTION>Table Groups
<THEAD>
    <TR><TH>Table Head<TH>Table Head
<TBODY>
    <TR><TD>Group 1<TD>Group 1
    <TR><TD>Group 1<TD>Group 1
<TBODY ALIGN="RIGHT">
    <TR><TD>Group 2<TD>Group 2
    <TR><TD>Group 2<TD>Group 2
<TFOOT ALIGN="CENTER">
    <TR><TD COLSPAN=2>Footer
</TABLE>

</BODY>
</HTML>

Text-Level Elements

Physical Character Styles

<HTML>
<HEAD>
<TITLE>Physical Character Styles</TITLE>
</HEAD>

<BODY BGCOLOR="WHITE">
<H1>Physical Character Styles</H1>

<B>Bold</B><BR>
<I>Italic</I><BR>
<TT>Teletype (Monospaced)</TT><BR>
<U>Underlined</U><BR>
Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>
Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR>
<SMALL>Smaller</SMALL><BR>
<BIG>Bigger</BIG><BR>
<STRIKE>Strike Through</STRIKE><BR>
<B><I>Bold Italic</I></B><BR>
<BIG><TT>Big Monospaced</TT></BIG><BR>
<SMALL><I>Small Italic</I></SMALL><BR>
<FONT COLOR="GRAY">Gray</FONT><BR>
<DEL>Delete</DEL><BR>
<INS>Insert</INS><BR>

</BODY>
</HTML>

Logical Character Styles

<HTML>
<HEAD>
<TITLE>Logical Character Styles</TITLE>
</HEAD>

<BODY BGCOLOR="WHITE">
<H1>Logical Character Styles</H1>

<EM>Emphasized</EM><BR>
<STRONG>Strongly Emphasized</STRONG><BR>
<CODE>Code</CODE><BR>
<SAMP>Sample Output</SAMP><BR>
<KBD>Keyboard Text</KBD><BR>
<DFN>Definition</DFN><BR>
<VAR>Variable</VAR><BR>
<CITE>Citation</CITE><BR>
<EM><CODE>Emphasized Code</CODE></EM><BR>
<FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR>
<ACRONYM TITLE="Java Development Kit">JDK Acronym</ACRONYM>

</BODY>
</HTML>

Specifying Hypertext Links

<HTML>
<HEAD>
<TITLE>Hypertext Links</TITLE>
</HEAD>

<BODY>
<H1>Hypertext Links</H1>

The official HTML specifications are available from
<A HREF="http://www.w3.org/MarkUp/"> the World Wide Web Consortium
(W3C)</A>, with some examples given in
<A HREF="HTML-Examples.html">my example page</A>.

The Java programming language is discussed in
<A HREF="#Section-3">Section 3</A>. For a discussion of COBOL,
see <A HREF="johndoe.html#COBOL">my husband's home page</A>.

</BODY>
</HTML>

Embedded Images

<HTML>
<HEAD>
<TITLE>Image Alignment</TITLE>
</HEAD>

<BODY>
<H1 ALIGN="CENTER">Image Alignment</H1>

<TABLE BORDER=1>
<TR><TH>Alignment
      <TH>Result
<TR><TH><CODE>LEFT</CODE>
      <TD><IMG SRC="rude-pc.gif" ALIGN="LEFT"
               ALT="Rude PC" WIDTH=54 HEIGHT=77>
          This positions the image at the left side,
          with text flowing around it on the right.
<TR><TH><CODE>RIGHT</CODE>
      <TD><IMG SRC="rude-pc.gif" ALIGN="RIGHT"
               ALT="Rude PC" WIDTH=54 HEIGHT=77>
          This positions the image at the right side,
          with text flowing around it on the left.
<TR><TH><CODE>TOP</CODE>
      <TD><IMG SRC="rude-pc.gif" ALIGN="TOP"
               ALT="Rude PC" WIDTH=54 HEIGHT=77>
          Here, the image runs into the paragraph
          and the line containing the image is
          aligned with the image top.
<TR><TH><CODE>BOTTOM</CODE>
      <TD><IMG SRC="rude-pc.gif" ALIGN="BOTTOM"
               ALT="Rude PC" WIDTH=54 HEIGHT=77>
          Here, the image runs into the paragraph
          and the line containing the image is aligned
          with the image bottom.
<TR><TH><CODE>MIDDLE</CODE>
      <TD><IMG SRC="rude-pc.gif" ALIGN="MIDDLE"
               ALT="Rude PC" WIDTH=54 HEIGHT=77>
          Here, the image runs into the paragraph
          and the line containing the image is aligned
          with the image center.
</TABLE>

</BODY>
</HTML>

Client-Side Image Maps

<HTML>
<HEAD>
<TITLE>Kansas Topography</TITLE>
</HEAD>

<BODY>
<H1 ALIGN="CENTER">Kansas Topography</H1>
Click on a region of Kansas to get information on
the terrain in that area.
<P>
<IMG SRC="kansas.gif" ALT="Kansas" WIDTH=385 HEIGHT=170
     USEMAP="#Kansas" BORDER=0>
<MAP NAME="Kansas">
<AREA HREF="nw.html"
        SHAPE="RECT"
        COORDS="0,0,192,85"
        ALT="North West">
<AREA HREF="ne.html"
        SHAPE="RECT"
        COORDS="193,0,385,85"
        ALT="North East">
<AREA HREF="sw.html"
        SHAPE="RECT"
        COORDS="0,86,192,170"
        ALT="South West">
<AREA HREF="se.html"
        SHAPE="RECT"
        COORDS="193,86,385,170"
        ALT="South East">
</MAP>
</BODY>
</HTML>