Software, Systems, and Solutions

"We do not run your business. We make your business run better."

Skip Repetitive Navigational Links

HTML: Introduction

What an HTML Document Is

  • HTML documents are plain-text (also known as ASCII) files that can be created using any text editor.
  • HTML documents are often created using WYSIWYG editors (e.g., Microsoft FrontPage). 
    • However, it is often necessary to hand code HTML features that the editors don't support or support incorrectly!!!
  • HTML documents all have the .html or .htm extension (document.html).  
  • HTML document names should be a single word (no spaces) 
  • The default file on most systems is called "index.html".  This file is shown when no file is specified for a given directory.


  • Elements are the fundamental components of text documents.
    • eg. sections, tables, paragraphs, and lists.
  • To denote the various elements in an HTML document, you use tags of the form:
    • The Element tells what the tag is in a general way, and the Attribute describes the tag more specifically. 
    • Tags are usually paired (e.g., <H1> and </H1>) to start and end the tag instruction.

The Minimal HTML Document

  • Every HTML document should contain certain standard HTML tags. Each document consists of head and body text.
    • The head contains the title, and other information not actually displayed by the browser.
    • The body contains the actual text that is made up of paragraphs, lists, and other elements.
<title>This is a test html page</title>
<p>This is a test html page.</p>
<p>It has 3 paragraphs.</p>
<p>This is the last one.</p>
  • The required elements are the <html>, <head>, <title>, and <body> tags (and their corresponding end tags).

Markup Tags


  • Th <html></html> element surrounds your complete document & tells your browser that the file contains HTML-coded information. The file extension .html (or .htm) also indicates this an HTML document. 


  • The <head></head> element identifies the first part of your HTML-coded document that contains the title. The title is shown as part of your browser's window.


  • The <title></title> element contains the document title and identifies its content.
  • The title is typically displayed in the title bar at the top of the browser window, but not inside the window itself.
  • The title is what is displayed on someone's hotlist or bookmark list & is used to identify your page for search engines, so choose something descriptive, unique, and relatively short.


  • The <body></body> contains the content of your document and controls a lot of what your page will look like. Here's an example: 

<BODY BGCOLOR=yellow TEXT=black LINK=blue> 
(Some HTML Code)

  • Where, BODY is the element, and BGCOLOR, TEXT & LINK are the attributes. 
    • eg. BGCOLOR=yellow: determines the background color for the entire page. 


  • HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. 
  • The syntax of the heading element is:
    <Hy>Text of heading </Hy>
    where y is a number between 1 and 6 specifying the level of the heading.
  • The 6 headings are shown below:
<H1> Heading 1
<H2> Heading 2
<H3> Heading 3
<H4> Heading 4
<H5> Heading 5
<H6> Heading 6
  • Good Practice: Use sequential levels of headings in your document. For example, if you start with a level-one heading (<H1>), next use a level-two (<H2>) heading.


  • Unlike documents in most word processors, carriage returns in HTML files aren't significant.
    • Any amount of whitespace (spaces, linefeeds, etc.) are compressed into a single space when your HTML document is displayed in a browser.
  • For example the following 2 HTML paragraphs would all display the same way:

<P>A very short paragraph! </P>

A very short paragraph!

<P>A very
short paragraph! </P>

A very short paragraph!

  • In the source file there is a line break between the sentences. A Web browser ignores this line break and starts a new paragraph only when it encounters another <P> tag.
    • NOTE: The </P> closing tag may be omitted. However, it's generally a good idea to include it.
  • Important: You must indicate paragraphs with <P> elements. A browser ignores any indentations or blank lines in the source text. Without <P> elements, the document becomes one large paragraph. 


  • The chief power of HTML comes from its ability to link text and/or an image to another document or section of a document. 
  • HTML's link tag is <A>, which stands for anchor: 

<A HREF="Test.html">Test link</A>

  • This makes Test link a hypertext link to Test.html, which is a file in the same directory as this document. 

Relative Pathnames 

  • You can link to documents in other directories by specifying the relative path from the current document to the linked document. 
  • For example, a link to a file "junk/test2.html" located in the subdirectory "junk" would be: 

<A HREF="junk/test2.html">A junk file</A>

  • To specify a file in the parent directory you use a ".." in the pathname (../some_file.html). 
  • Good Practice:  You should design your Web site using relative path links so that no matter where you move your Web pages (e.g. from your home computer to a Web server) the links will still work!!!!!!!!!!!

 Absolute Pathnames

  • You can also use the absolute pathname (the complete URL) of the file (e.g. to link to the ASU West Main Page).

<A HREF="">
ASU West Main Page</A>

  • Only use Absolute pathnames when you are linking to a document outside you "personal" Web space.

File Links

  • Occasionally when defining a link using an HTML editor (like FrontPage) the computer will create a File link instead of an HTTP link.  A file link points to a specific location on your personal computer:

<A HREF="file:///C:/Data/myfile.html">file link</A>

  • You NEVER want to have a file link in an HTML file you put on the Web because a person browsing your Web page will not look for the file on their hard drive creating a "broken link".

Mailto Links

  • You can also use a link to send email. It uses mailto: placed before the email address:
<A HREF="">
Please emaile me!</A>

Please email me!

Links to Specific Sections

  • Named anchors (called targets or bookmarks) allow linking to a particular section in a document rather than to the top. 
  • Include the <A NAME="name"> tag at the place in your document where you want the link to jump to

<A NAME="jump"></a>Jump Here

<A HREF="#jump">Link to above text</a>

HTML: Lists

  • Lists are one way information is organized on a Web page.
  • There are 3 common types of lists used on the Web
    • Unordered Lists (Bullited Lists)
    • Ordered Lists (Numbered Lists)
    • Definition Lists

Unnumbered Lists

  • To make an unnumbered, bulleted list,
    • start with an opening list <UL> (for unnumbered list) tag.
    • enter the <LI> (list item) tag followed by the individual item; 
    • A closing </LI> tag is needed only when non bulleted text is to be inserted in the bulleted list.
    • end the entire list with a closing list </UL> tag

Below is a sample three-item list:

<LI> apples
<LI> bananas
<LI> grapefruit

The output is:

    • apples
    • bananas
    • grapefruit

<LI> items can contain multiple paragraphs. 

Numbered Lists

  • A numbered list (also called an ordered list) is identical to an unnumbered list, except it uses <OL> instead of <UL>
  • The items are tagged using the same <LI> tag.

The following HTML code:


produces this formatted output:

  1. oranges
  2. peaches
  3. grapes

Definition Lists

  • A definition list (coded as <DL>) usually consists of alternating a definition term (coded as <DT>) and a definition description (coded as <DD>). Web browsers generally format the definition on a new line and indent it.

The following is an example of a definition list:

<DD> Hypertext Mark-up Language
<DD> Hypertext Transfer Protocol

The output looks like:

Hypertext Mark-up Language
Hypertext Transfer Protocol
  • The <DT> and <DD> entries can contain multiple paragraphs, lists, or other definition information.

Nested Lists

  • Lists can be nested. You can also have a number of paragraphs, each containing a nested list, in a single list item: 
<UL><LI>Northern states:</LI>
        <LI> Vermont</LI>
        <LI> New Hampshire</LI>
        <LI> Maine</LI>
    <LI>Western states:</LI>

The nested list is displayed as:

  • Northern states:
    • Vermont
    • New Hampshire
    • Maine
  • Western states:
    • Arizona
    • Nevada

Character Formatting

  • HTML has two types of styles for individual words or sentences: logical and physical.
    • Logical styles tag text according to its meaning, 
    • Physical styles indicate the specific appearance of a section.
    • For example, the "emphasis"  tag is usually rendered in the physical style "italics", However, in this document "emphasis" is rendered in red to add emphasis.

Common Logical Styles

for emphasis. Typically displayed in italics. (Consultants cannot reset your password unless you call the help line.)
for strong emphasis. Typically displayed in bold. (NOTE: Always check your links.)

Common Physical Styles

bold text (This is bold)
italic text (This is italics)
typewriter text, e.g. fixed-width font. (This is typewriter text)

Formatting Text with <FONT>

  • The <FONT> tag allows your to set a number of text attributes:
    • COLOR, SIZE, and FACE (font type)

Red Arial 14 pt

<FONT COLOR="FF0000" SIZE="4" FACE="sans-serif">
Red Arial 14 pt

Escape Sequences (a.k.a. Character Entities)

  • The <, > and & characters are special characters in HTML,  so to have them appear in an HTML document, you must enter an escape sequence: 
the escape sequence for < 
the escape sequence for > 
the escape sequence for & 
to force an additional space to appear in the HTML document

NOTE: Unlike the rest of HTML, the escape sequences are case sensitive. You cannot, for instance, use &LT; instead of &lt;. 

Miscellaneous Formatting

Forced Line Breaks

  • The <BR> tag forces a line break with no extra (white) space between lines.
    • Using <P> for short lines of text results in unwanted additional white space.
<p>Arizona State University West<BR />
4701 W. Thunderbird Road, <BR />
Glendale, AZ 85306</p>

results in:

Arizona State University West
4701 W. Thunderbird Road,
Glendale, AZ 85306

Extended Quotations

  • Use the <BLOCKQUOTE> tag to include lengthy quotations in a separate block on the screen. 
<P>To read between the lines was easier than to follow the text.</P>
<P>--Henry James </P>

results in: 

To read between the lines was easier than to follow the text.

--Henry James

Horizontal Rules

  • The <HR> tag produces a horizontal line the width of the browser window. 
  • You can vary a rule's size (thickness) and width (the percentage of the window covered by the rule). 

<HR SIZE=4 WIDTH="50%">

displays as: 

Proper Coding

  • HTML is not case sensitive so <p> and <P> are interpreted the same way by the browser.  However it makes your code easier to read if you choose to use either all UPPERCASE tags or all lowercase tags.
  • Avoid Overlapping Tags
    • <B>This is an example of <I>overlapping</B>
      HTML tags.
    • <B>This would be a <I>better</I></B> <I>way to code it.</I>
    • Close more more recent tags before closing a tag that comes before it. 
  • Embed Only Anchors and Character Tags
    • HTML protocol allows you to embed links within other HTML tags: 
      <H1><A HREF="../links.html">Links</A></H1>
    • Do not embed HTML tags within an anchor: 
      <A HREF="../links.html"><H1>Links</H1></A>
    • Although most browsers currently handle this second example, the official HTML specifications do not support this and your file may not work with future


  • Place comments throughout your HTML File.
    • Comments have the starting and ending tags:

<!-- The comment is here  -->

  • Put headings on separate lines, 
  • Use a blank line or two where it helps identify the start of a new section, and
  • Separate paragraphs with blank lines (in addition to the <P> tags). 
  <title>This is a formatted html page</title>

<body bgcolor=yellow text=purple>
  <!-- Course Description -->
  <h1>ISM 411 - Web Authoring</h1>

  <p>This class is designed to give students 
  familiarity with current Web technologies and 
  the ability to use them!</p>

  <p>By the end of the class students should be 
  able to design complex web sites that have    
  database connectivity and use cookies.</p>

  <!-- Page Footer -->
  <p>Updated 8/26/2002 by Jane Carey</p>


Final Steps 

Validate Your Code

  • When you put a document on a Web server, be sure to check the formatting and links (including named anchors). 
    • Check from a different computer than you created the file on to catch file link errors.
  • You can run your coded files through one of several on-line HTML validation services that will tell you if your code conforms to accepted HTML. 
    • The service lets you select the level of conformance you want for your files (i.e., strict, level 2, level 3). 

Browsers Differ

  • Web browsers display HTML elements differently. Remember that not all codes used in HTML files are interpreted by all browsers. Any code a browser does not understand is usually ignored. 
  • You could spend a lot of time making your file "look perfect" using your current browser. If you check that file using another browser, it will likely display (a little or a lot) differently.