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.

HTML Tags


  • 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:
    <ELEMENT ATTRIBUTE=value>...</ELEMENT>
    • 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.
<html>
<head>
<title>This is a test html page</title>
</head>
<body>
<p>This is a test html page.</p>
<p>It has 3 paragraphs.</p>
<p>This is the last one.</p>
</body>
</html>
  • The required elements are the <html>, <head>, <title>, and <body> tags (and their corresponding end tags).

Markup Tags


HTML

  • 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. 

HEAD


  • 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.

TITLE


  • 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.

BODY


  • 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)
</BODY> 

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

Headings


  • 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.

Paragraphs


  • 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. 

Linking


  • 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="http://www.west.asu.edu">
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="mailto:rbutler@s-cubed-llc.com">
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:

<UL>
<LI> apples
<LI> bananas
<LI> grapefruit
</UL>

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:

<OL>
    <LI>oranges</LI>
    <LI>peaches</LI>
    <LI>grapes</LI>
</OL>

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:

<DL>
<DT> HTML
<DD> Hypertext Mark-up Language
<DT> HTML
<DD> Hypertext Transfer Protocol
</DL>

The output looks like:

HTML
Hypertext Mark-up Language
HTTP
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>
      <UL>
        <LI> Vermont</LI>
        <LI> New Hampshire</LI>
        <LI> Maine</LI>
      </UL>
    <LI>Western states:</LI>
      <UL>
        <LI>Arizona</LI>
        <LI>Nevada</LI>
      </UL>
</UL>

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


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

Common Physical Styles


<B>
bold text (This is bold)
<I>
italic text (This is italics)
<TT>
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)

<FONT COLOR="red" SIZE="+1" FACE="ARIAL">
Red Arial 14 pt
</FONT>

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

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: 
&lt;
the escape sequence for < 
&gt; 
the escape sequence for > 
&amp;
the escape sequence for & 
&nbsp;
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. 
<BLOCKQUOTE>
<P>To read between the lines was easier than to follow the text.</P>
<P>--Henry James </P>
</BLOCKQUOTE>

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.
      </I>
    • <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
      browsers. 

Readability


  • 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). 
<head>
  <title>This is a formatted html page</title>
</head>

<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 -->
  <hr>
  <p>Updated 8/26/2002 by Jane Carey</p>

</body>
</html>

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.