http://www.passco.com/htmlp1.html
Single Full Line Indicates Designed Page Width and Standard Font Size
Netscape Users
should continue.		 Document Updated:
 Internet Explorer Users
might contact Bill Gates.
Downloading and Browser Constraints
For those using Internet Explorer, you MUST set your FONT size to "medium" for
this course. If you don't know how, then wait until you do to take this course.

Take a moment to download this page, and it will give you it's time

A Beginner's Online Course in HTML
Author: Ronald Reed - [Freeback]

Acknowledgements

The core of this course was developed and enhanced by the Author
with the initial material presented in the following Internet Site:
A Beginner's Guide to HTML
"Created by the National Center for Supercomputing Applications (NCSA),
Copyright 1997, University of Illinois Board of Trustees." - http://www.ncsa.uiuc.edu/
Correspondence and Permission Response
The author's "Big Thank You" for the proof reading of this site goes to his "Big Friend".

Part 1 | Part 2| Part 3 of 3 Parts
Preface ñ÷õ

This course outline is designed for producing documents in HTML, the hypertext markup language used on the World Wide Web. This outline is intended to be an
introduction to using HTML and creating files for the Web.

Printablility of this material.

This outline is an HTML file. It is not a word processor file designed for printing. The course presentation is intended to be done with the use of your browser. The printing of this document is not the intent of the author, and doing so may produce unpredictable results. This reason is due to the dependency on the capability of your browsers and printers. Also, the material is always under inhancements, thus a printed versions will always be out-of-date, incomplete and in a few cases ... incorrect. Having stated this, you may still obtain a satisfactory printed output.


Links are provided to additional information. You should also check your local bookstore; there are many volumes about the Web and HTML that could be useful. Remember: you can print a copy of this outline for your personal use by using the Save as or Print feature in your browser.

Mouse-drive Textual Alignment Techniques

Note: Our presentation is coded to permit the alignment of the text by clicking on the Red Section Headings, Labels, Captions and other Wording . Clicking "Preface" and "Table of Contents" will align the text to the top of the screen. Also, the character found following or within a paragraph of text, text graphics, or examples will align the to the paragraph heading above. Use theñcharacter to align to Top of Page; the÷character to align to next heading; and theõcharacter to align to last heading.

Table of Contents ñ÷õ <------- Click Table of Contents to align to this heading.>
     
  1.   Getting Started <------- Click section number 1 to align to this section.
    Click the darkred textual phrase "Getting Started" to link to that section section.

    1. Course Pre-requisites and Quiz
    2. Configuring your monitor and browser for the Course
    3. Terms to Know
    4. What Isn't Covered
    5. HTML Version
    6. What an HTML Author Needs to Know
     
  2.   HTML Documents
    1. What an HTML Document Is
    2. HTML Editors
    3. Getting Your Files on a Server
    4. Tags Explained
    5. The Minimal HTML Document
    6. A Teaching Tool
     
  3.    Markup Tags
    1. HTML Block
    2. HEAD Block
    3. TITLE Block
    4. BODY Block
    5. Heading Block
    6. Paragraph Block
    7. Lists Block
    8. Preformatted Text Block
    9. Extended Quotations
    10. Forced Line Breaks/Postal Addresses
    11. Horizontal Rules
 II. Part 2 Outline ñ÷õ

         Click the green textual phrase "Part 2 Outline" to link to that section section in another file.

Linkage to locations external to this file.

Note: Links to files other than within this file.(Part 1) are colored in green.
These linkage result in pages that will require one the following
use of a "Back" button found on the page,
use of the "Back" available in the toolbar of your browser, or
use of the "Back" available from using the right mouse button.
to return to the "calling" page.
  1.    Character Formatting  
    1. Logical Versus Physical Styles
    2. Escape Sequences
     
  2.    Linking
    1. Relative Pathnames Versus Absolute Pathnames
    2. URLs
    3. Links to Specific Sections
    4. Mailto
 III. Part 3 Outline ñ÷õ
  1.    Inline Images  
    1. Image Size Attributes
    2. Aligning Images
    3. Alternate Text for Images
    4. Images as Hyperlinks
    5. Background Graphics
    6. Background Color
    7. External Images, Sounds, and Animations
     
  2.    Tables
    1. Table Tags
    2. General Table Format
    3. Tables for Nontabular Information
     
  3.    Fill-out Forms  
  4.    Troubleshooting
    1. Avoid Overlapping Tags
    2. Embed Only Anchors and Character Tags
    3. Do the Final Steps
    4. Commenting Your Files
     
  5.    For More Information
    1. Style Guides
    2. Other Introductory Documents
    3. Additional Online References
    4. Thanks

  1.  Getting Started ñ÷õ

    1. Course Pre-requisites

        Absolute Prerequites:
      • A proficiency in Windows 95 or later Operating system.
      • An indepth knowledge of the functionality of either the Internet Explorer or Netscape Browser.
      • A proficiency with a text editor. The course does not require knowledge of nor the use of an HTML editor.
      • The willingness to READ this material,
      • The ability to edit and create some HTML files, and
      • The ability to utilize your browser to view your files.

      Are you Ready? 
         To determine if you have the pre-requisites and knowledge of the elementary use, structure, and content of HTML files on the internet, and thus prepared for the presentation of the course we will administer a one question quiz.
         Your response will be compared with the author's expected answer. Your response will be emailed to yourself and the author (thus your valid email address is necessary). From your evaluation of your response you will have to determine if you wish to continue.

      Question:    Response:
        This is the single question. Take a moment to scroll down thought the remainder of Part 1 of this outline, counting the graphics.
        Then determine the approximate number of graphic icons in this Part 1 file alone.

        There is a method to determine the exact number of images in this file.       		 
      Your Name - First and Last (required)

      Your Email Address (required)
      Please don't waste your time and mine with an invalid e-mail address. Thanks!
      1-12 13-25 over-50 none
      Only if you provide a valid email address will you get results. Check your mail.

      This Quiz has been diabled due to use by spam mailers.
      The Answer is "None". All the images are generated via HTLM coding.

      *** IF YOU GET NO RESPONSE E-MAIL, THEN YOU ENTERED AN INVALID E-MAIL ADDRESS - TRY AGAIN ***


      How did you do on the Quiz? 
      I hope you answered with the correct answer. If you did not, I hope you understand why the answer was what it was. And, if you did not take the quiz, I presume you will quit right now.

    2. Configuring Your Monitor and Browser for this Course ñ÷õ

      The author would prefer that you set the Monitor Configuration to a resolution greater than 800x600 pixels (which is the minumum expected). This is a function of a Windows parameter setting.

      Second, the author would prefer that you adjust your browser such that links are "not underlined". If you do not know how to do either of these settings, then you might question your preparation for the skill expected for the course.

      The course material is presented with pages which have widths of 600 pixels. The material is presented in the center of the window, thus the author expects you to adjust the width of the window to that indicated by the "ruler" statement presented below this topical section and at the top of the page.

      In addition to the "ruler statement " indicating the defined width of the page, the textual statement presented utilizes a font size that the author has used in the design of the presented material. The Font Size is a facet of your browser that is "viewer defined", as are hundreds of other facets that can NOT be absolutely defined by the author.

      It should be noted that there are ONLY a very few facets of web page design that the author DOES HAVE absolute defined control over that the viewer can not alter. One is the WIDTH of the page, and its positioning of the page in the browser's window (i.e., Left, Centered, or Right justified).

"Ruler Statement"
Single Full Line Indicates Designed Page Width and Standard Font Size

    1. Terms to Know ñ÷õ
      WWW
      World Wide Web

      Web
      World Wide Web

      SGML
      Standard Generalized Markup Language--a standard for describing markup languages

      HTML  <------- Click topic to align
      HyperText Markup Language--HTML has a SGML standard.
      In practical terms, HTML is a collection of markup tags that define the various components of a World Wide Web document. HTML was invented by Tim Berners-Lee while at CERN, the European Laboratory for Particle Physics in Geneva.

    2. What Isn't Covered ñ÷õ

      This course outline assumes that you:

      1.   know how to use the Windows operating system.

      2.   know how to use a plain text editor, such as Notepad+, if you wish to prepare the exercises in the course. Do not use WORDPAD. Notepad.exe and Notepad+.exe are computer programs that emulates a typewriter, a machine no longer in use today. Wordpad.exe is a computer program the emulates a word processor. Please use Notepad+ or another simple straight text editor..

        Download The Text Editor Used In This Course
        Single Left Click
        Here to Download a Copy
        Of The "Notepad+" Text Editor
        The use of an HTML Editor is not permitted when studing this course.

      3.   know how to use the Netscape browser, Internet/MS Explorer browser or some other Web browser. Some ISPs, like AOL-Online, have a version of one the major browsers embedded in their interface with the Web.


      4.   have a general understanding of how the Internet works.


      5.   have a understanding of how your ISP Web server works.


      6.   have access to a Web server, or you want to produce HTML documents for personal use in local-viewing mode, like on your PC or on a Local Area Network (LAN).
          This means that you could develop HTML files for use off-line within the PC alone with the utilization of a browser on the PC. Of course, this means the usage of internet references would be meaningless.


    3. HTML Version ñ÷õ

      This course outline reflects the most current specification--HTML Version 4.0-- plus some additional features that have been widely and consistently implemented in browsers. Future versions and new features for HTML are under development.


    4. What an HTML Author Needs to Know ñ÷õ

      What does an HTML Author need to know?

  1.   HTML Documents ñ÷õ

    1. What an HTML Document Is

      HTML documents are plain-text files that can be created using any text editor (e.g., SimpleText on a Macintosh; Notepad on a Windows machine). You can also use word-processing software if you remember to save your document as "text only with line breaks". It is the author's very strong recommendation that, for simplicity, you should use a plain text editor.

      Course Outline Graphics:   Our presentation contains no actual graphic icons, but it does utilizes pairs of the two or a group of more than the table graphics shown below: The Notepad template will be used to present the HTML code as written in a text file. The Browser template is used to present the browser's output on the computer monitor.

        Notepad Image (a)
       N   simple.htm - Notepad  <<   >>   X  
         Notepad Screen Image
   Currently non-functional until replaced with appropriate content.
        Browser Output Image (b)
       N   A Simple HTML Example - Netscape  <<   >>   X  
         Browser Output Screen
   Currently non-functional until replaced with appropriate content.

      Note:  The above two and the lower two graphics are displayed here as developmental templates used to prepare these pages. With these and the actually functioning graphic presentations follow in the outline below, the Notepad's graphic ">>" button in its Title Bar would link to the paired browser graphic. And the Browser's graphic "<<" button will link back to the Notepad Graphic. The Browser's graphic ">>" button, if present, may lead to a "summary page", and/or even a "quiz page" which will be emailed to your own email address and that of the author. The lower graphics illustrate the Summary and Quiz type pages.
        Summary Page Output (c)
       N   A Simple HTML Example Summary Page - Netscape  <<   >>   X  
         Summary Page
   Currently non-functional until replaced with appropriate content.
        Quiz Page Output (d)
       N   A Simple HTML Example Quiz Page - Netscape  <<   >>   X  
         Quiz Page
   Currently non-functional until replaced with appropriate content.


    2. HTML Editors ñ

      Some WYSIWYG editors are also available (e.g., Claris Home Page or Adobe PageMill, both for Windows and Macintosh). You may wish to try one of them after you learn some of the basics of HTML tagging. WYSIWYG is an acronym for "what you see is what you get"; it means that you design your HTML document visually, as if you were using a word processor, instead of writing the markup tags in a plain-text file and imagining what the resulting page will look like. It is useful to know enough HTML to code a document before you determine the usefulness of a WYSIWYG editor, in case you want to add HTML features that your editor doesn't support.

      It is the author's recommendation to NEVER use an HTML editor. Especially NEVER use an HTML editor on a file generated by any HTML editor, even another version of the same HTML Editor. Also, NEVER use an HTML editor on a file generated by a plain text editor. Thus, the best rule to follow is

      "Never Use An HTML Editor"
      It is equivalent to learning a foreign language with only a dictionary.

    3. Getting Your Files on a Server ñ

      If you have access to a Web server at school or work, contact your webmaster (the individual who maintains the server) to see how you can get your files on the Web. If you do not have access to a server at work or school, check to see if your community operates a freenet; a community-based network that provides free access to the Internet. Lacking a freenet, you may need to contact a local Internet Service Provider (called an ISP ) that will post your files on a server for a fee. This is called "hosting" your site. (Check your local newspaper for advertisements or with your Chamber of Commerce for the names of companies.)

      The subject of Internet Service Providers, domains, networks, DSL and cable service are not topics covered in this course outline.

    4. Tags Explained ñ

      An element  is a fundamental component of the structure of a text document. Some examples of elements are heads, tables, paragraphs, and lists. Elements can contain plain text, other elements, or both. To denote the various elements in an HTML document, you use tags. Think of it this way: you use HTML tags to mark the elements of a file for your browser to process.

      HTML  tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>). Tags are usually paired (e.g., the start tag <H1> and the end tag </H1>) to start and end the tag instruction. The end tag looks just like the start tag except a slash (/) precedes the text within the brackets.

      HTML Tag Blocks   The majority of HTML tags are block structures. Of course, there are exceptions, and these are referred to as HTML tag statements. It must be noted that block structured means one block must/may be contained within another block. Think of it as "boxes within boxes". If there are two boxes then they may be side-by-side (serial blocks, meaning one after another), or one box may be inside the other box (nested blocks). Note that there are no other situations. (See Fig 1.)

      Fig 1. "Think of it as Blocks within Blocks within Blocks"  
      <HTML>

      <HEAD>

      <TITLE>..........................</TITLE>

          
        </HEAD>

      <BODY ..................>

         </BODY>

         </HTML>

      Either you have a series of boxes (blocks) one after another, or you have "boxes within boxes" (nested blocks). Look for this condition in the coding examples that follow.

      Start Tag Parameters.   Some block and statement tags may include none, one or more attributes, These supply additional information that may be required inside the start tag.

      Fig 2. Here are some of the BODY block's attributes and their arguments.
      <BODY bgcolor="Lightblue" text="#000000" background="background.gif"
             link="Darkgreen" vlink=darkred alink=000000>

         </BODY>

      For example, you can specify the alignment of images (top, middle, or bottom) by including the appropriate attribute with the image source HTML code. Many tags have optional attributes and will be discussed later in the outline.

      Case Sensitivity of HTML Code. HTML tags are not case sensitive.
      <title> is equivalent to <TITLE> or <TiTlE>. There are a few exceptions where the HTML code is "case sensitive". This special set of HTML characters must be typed in lowercase characters.

      Usage of "reference" linkages to other points in the course.

      Here is an example were we will permit you to advance in the outline to a section that is either in this file (Part 1) or in another file (Part 2 or Part 3 file). Because this reference maybe used at various points in the outline, there will be a "Return" button provided following the material referenced that will return you to the "calling" point in the outline. The Escape Sequence link (below) will transfer you the another section of the outline.
        Use the or found in the "called" material to return.

      The exceptions in case sensitivity tags above are noted in section       Escape Sequences below.

      HTML File Analysis Techniques.   Not all tags are supported by all World Wide Web browsers. If a browser does not support a tag, it will simply ignore it. Any text placed between a pair of unknown tags will still be displayed, however. This is also true for any unknown attributes within a tag, and the browser will simply ignore them. This fact can be used to an author's advantage in the development or analysis of HTML coding. This will be depicted in examples below.(See Fig 3.)

      Fig 3. Using invalid attributes for diagnosis.
      <TABLE 1>

      <TABLE 2>
          
      <TABLE 3>

        </TABLE 3>

        </TABLE 2>

      <TABLE 4>







        </TABLE 4>

        </TABLE 1>
      		 
      Fig 3a. Carried to extremes.
      <TABLE 1>

      <TABLE 2>
          
      <TABLE 3>

        </TABLE 3>

        </TABLE 2>

      <TABLE 4>
        <TR 4>
          <TD 4>...........</TD 4>
          <TD 4>...........</TD 4>
           </TR 4>
        <TR 4>
          <TD 4 COLSPAN=2>
            <TABLE 5><TR>
                <TD 5>...........</TD 5>
                </TR></TABLE 5>
            </TD 4>
           </TR 4>
        </TABLE 4>

         </TABLE 1>

      HTML Code Function   What does the HTML code do for us?
      The HTML code is never seen! Generally, only the textual and graphic icons are shown on the monitors. The HTML code controls how we view these materials. HTML coding controls borders around icons and tables, backgrounds, text fonts and their colors and many many other features seen on web pages.

    5. 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 the body contains the actual text that is made up of paragraphs, lists, and other elements. Browsers expect specific information because they are programmed according to HTML and SGML specifications.
      Some of the major, and expected tag elements are shown in this sample bare-bones document:

        "Simple.htm" file edited with Notepad.exe (e)
       N   simple.htm - Notepad  <<   >>   X  
          <html>
       <head>
          <TITLE>A Simple HTML Example</TITLE>
       </head>
       <body>
          <H1>HTML is Easy To Learn</H1>
          <P>Welcome to the world of HTML.
             This is the first paragraph. While short it is  
             still a paragraph!</P>
          <P>And this is the second paragraph.</P>
       </body>
    </html>
      When the above file is written, saved and presented to a browser then the following output will be presented by the browser. This statement will not appear between the text editor listing and browser output on further samples.

        Browser Output from the "Sample.htm" HTML File (f)
       N   A Simple HTML Example - Netscape  <<   >>   X 

      HTML is Easy To Learn


      Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!

      And this is the second paragraph.

      The common tags   elements are the <html>, <head>, <title>, and <body> tags (and their corresponding end tags). Because you should include these tags in each file, you might want to create a template file with them. (Some browsers will format your HTML file correctly even if these tags are not included. But some browsers won't! So make sure to include them.)

    6. A Teaching Tool ñ

      To see a copy of the file that your browser reads to generate the information in your current window, select View Source (or the equivalent) from the browser menu. (Most browsers have a "View" choice on the its Menu Bar under which this command is listed.) The file contents, with all the HTML tags, are displayed in a new window. This is always a "Read-Only" presentation of the file's HTML source.

      A typical Netscape Browser Menu Bar contains View choice
       N  A Beginner's Course in HTML - Part 1 - Netscape <<  >>  X 
       File  Edit  View  Go  Communicator  Help

       For the Netscape browser, and after the page has completely downloaded, then from the browser's Menu Bar right click "View". A dropdown box will appear. Scroll down to the "Page Source", and right click.

      The Internet Explore browser's dropdown box displays "Source".

      This is an excellent way to see how HTML is used and to learn tips and constructs. Of course, the HTML might not be technically correct. Once you become familiar with HTML and check the many online and hard-copy references on the subject, you will learn to distinguish between "good" and "bad" HTML.

      Remember that you can save a source file with the HTML codes and use it as a template for one of your Web pages or modify the format to suit your purposes.

Alignment Control Yet to be Completed Below


  1. Markup Tags ñ

    1. HTML Block

      The HTML tag tells your browser that the file contains HTML-coded information.
      Syntax: HTML Block Tags
      <HTML has no attributes>
      .
      .
      .
        </HTML has no attributes>
      Note: the italitalized textural material presented within the tags are comments
      provided by the author.

      The HyperText Markup Language (HTML) file extension .html also indicates this an HTML document and must be used.
        (If you are restricted to the DOS operating system and to 8 character filenames and 3 character extensions (e.g., LeeHome.htm, use only .htm for your extension.)

      Syntax: Two Nested BIG Block Tags (used above)

      The <BIG><BIG>H</BIG></BIG>yper .... neither tag has attributes


    1. HEAD Block

      The head element identifies the first part of your HTML-coded document that contains the title.
      Syntax: Head Block Tags
      <HEAD has no attributes>.
      .
      .
      .
        </HEAD has no attributes>

    1. TITLE Block

      The title element contains your document title and identifies its content in a global context. The title is typically displayed in the title bar at the top of the browser window, but not inside the window itself.

      Syntax: Title Block Tags
      <TITLE has no attributes>
        A Beginner's Course in HTML - Part 1
        </TITLE has no attributes>

      The above Title Block produces this Browser's Title Bar content.

      Title Bar with presence of a TITLE block in the file.
       N   A Beginner's Course in HTML - Part 1 - Netscape  <<   >>   X 


      Without the presence of a TITLE block the file's name is displayed.

      Title Bar without TITLE block present in file.
       N   no_title_block.html - Netscape  <<   >>   X 


      The title is also what is displayed on someone's hotlist or bookmark list, so choose something descriptive, unique, and relatively short. A title is also used to identify your page for search engines.
      For example, you might include a shortened title of a book along with the chapter contents: NCSA Mosaic Guide (Windows): Installation. This tells the software name, the platform, and the chapter contents, which is more useful than simply calling the document Installation. Generally you should keep your titles to 64 characters or fewer.

    1. BODY Block

      The second--and largest--part of your HTML document is the body, which contains the content of your document (displayed within the text area of your browser window). The tags explained below are used within the body of your HTML document.

      Syntax: Body Block Tags
      <BODY
      leftmargin="0" topmargin="0"
      marginheight="0" marginwidth=0
      background=" ...URL filename..." bgcolor="white"
      text=navy link="#298E9C" alink="gold" vlink=teal >
      ....
      ....
      </BODY>

    1. Heading Blocks

      HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are typically displayed in larger and/or bolder fonts than normal body text. Headings are presented with a blank line preceding and following the output. The first heading in each document need not be tagged <H1>.

      The syntax of the heading element is:
        Heading Tag HTML Block Code (g)
       N   headingtag.htm - Notepad  <<   >>   X  
      
  <H1>H1 Heading - The Biggest Font</H1>
  <H3 align=center>This H3 Heading is centered.</H3>
  <H5 align=right>This H5 Heading is right justified.</H5>
  <H6>H6 Heading - This is the smallest font.</H6>
        Heading Tag Output (h)
       N   headingtag.htm - Netscape  <<   >>   X 

      H1 Heading - The Biggest Font

      This H3 Heading is centered.

      This H5 Heading is right justified.
      H6 Heading - This is the smallest font.


      The Heading tags automatically produce a blank (break) line before and after the text within the block. Also, the text is automatically presented with the bold font attribute.

    1. Paragraph Block

      Unlike documents in most word processors, carriage returns in HTML files aren't significant. In fact, any amount of whitespace -- including spaces, linefeeds, and carriage returns -- are automatically compressed into a single space when your HTML document is displayed in a browser You don't have to worry about how long your lines of text are. Word wrapping can occur at any point in your source file without affecting how the page will be displayed.
      In the bare-bones example shown in the Minimal HTML Document section, the first paragraph is coded as

        First Paragraph HTML Code --- Visual Exercise 1 ( j )
       N   firstpara.htm - Notepad  <<   >>   X  
          This is the text before the paragraph.
    <P><B>&nbsp;&nbsp;&nbsp;Welcome to the world of HTML.


    This is the first paragraph.


    While short it is
    still a paragraph!</P>
    This sentence is not in the paragraph
    nor in a paragraph of its own. Notice that
    a blank line is generated BEFORE and AFTER
 the paragraph     termination. 
    Questions:       Is the <BOLD> font presentation 
affected by the
    termination of the paragraph?    </B><BR><BR>What


    else have you learned?
        First Paragraph Output (k)
       N   firstpara.htm Netscape  <<   >>   X 
      This is the text before the paragraph.

         Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!

      This sentence is not in the paragraph nor in a paragraph of its own. Notice that a blank line is generated BEFORE and AFTER the paragraph termination. Question: Is the bold font presentation affected by the termination of the paragraph?

      What else have you learned?

      In the source file there are a couple of line breaks (i.e., carriage control and linefeed character) between the sentences. A web browser ignores these line breaks and starts a new paragraph only when it encounters another <P> tag.

      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. (One exception is text tagged as "preformatted," which is explained below.) For example, the following would produce identical output as the first bare-bones HTML example:
        Notepad Screen Image (m)
       N   simple.htm - Notepad  <<   >>   X  
          <H1>Level-one heading</H1>
    <P>Welcome to the world of HTML. This is the  
    first paragraph. While short it is still a
    paragraph! </P> <P>And this is the second paragraph.</P>
        Browser Output Imagen)
       N   A Simple HTML Example - Netscape  <<   >>   X 

      Level-one heading

      Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!

      And this is the second paragraph.
      To preserve readability in HTML files, 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). These extra spaces will help you when you edit your files (but your browser will ignore the extra spaces because it has its own set of rules on spacing that do not depend on the spaces you put in your source file).

      NOTE: The </P> closing tag may be omitted. This is because browsers understand that when they encounter a <P> tag, it means that the previous paragraph has ended. However, since HTML now allows certain attributes to be assigned to the <P> tag, it's generally a good idea to include it.
      Using the <P> and </P> as a paragraph container means that you can center a paragraph by including the ALIGN=alignment attribute in your source file.
        Sample Paragraph Block (p)
       N   simple.htm - Notepad  <<   >>   X  
          <P align=CENTER>
    This is a centered paragraph.
     </P>
        Sample Paragraph Output (q)
       N   A Simple HTML Example - Netscape  <<   >>   X 

      This is a centered paragraph.


      It is also possible to align a paragraph to the right instead, by including the ALIGN=RIGHT attribute. ALIGN=LEFT is the default alignment; if no ALIGN attribute is included, the paragraph will be left-aligned.

Beyond this point the Outline is Under Development.

    1. Lists

      HTML supports unnumbered, numbered, and definition lists. You can nest lists too, but use this feature spareingly because too many nested items can get difficult to follow.

      Unnumbered Lists  
      To make an unnumbered, or "bullet" list,
      1. start with an opening list <UL> (for unnumbered list) tag
      2. enter the <LI> (list item) tag followed by the individual item; no closing </LI> tag is needed
      3. end the entire list with a closing list </UL> tag

      Below is a sample three-item "unnumbered" list:
        Unnumbered List HTML Coding (r)
       N   unnumbered.htm - Notepad  <<   >>   X  
        <UL>
    <LI> apples
    <LI> bananas
    <LI> grapefruit
    </UL>
        Unnumbered List Output (s)
       N   unnumbered.htm - Netscape  <<   >>   X 
      • apples
      • bananas
      • grapefruit



      Numbered (Ordered) Lists  
      A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except it uses <OL> instead of <UL>. The items are tagged using the same <LI> tag.
        Numbered (Ordered) List HTML Code ( t )
       N   numbered.htm - Notepad  <<   >>   X  
          <OL>
    <LI> oranges
    <LI> peaches
    <LI> grapes
    </OL>
        Numbered (Ordered) List Output (u)
       N   numbered.htm - Netscape  <<   >>   X 
      1. oranges
      2. peaches
      3. grapes


      Here are some additional examples of "ordered" lists. Remember ordered list are only "numberic" by default.

        Numeric Ordered List
       N   numbered.htm - Notepad 
          <OL start=12>
    <LI> oranges
    <LI> peaches
    <LI> grapes
    </OL>
      		 

      Use the START=n attribute to start the "numeric" ordered list with a number other than the default of 1.
      Numeric Ordered Output
       N   numbered.htm - Netscape
      1. oranges
      2. peaches
      3. grapes



        Alpha Ordered List
       N   alpha.htm - Notepad 
          <OL type=a start=8 >
    <LI> oranges
    <LI> peaches
    <LI> grapes
    </OL>
      		 

      Use the TYPE=a and START=n (numeric)character attribute to start the "alphabetical" ordered list. The TYPE parameters are "a, A , I, i".
      Ordered List Output
       N   alpha.htm - Netscape
      1. oranges
      2. peaches
      3. grapes


      1. oranges
      2. peaches
      3. grapes


      1. Rome
      2. Naples
      3. Florence


      1. Rome
      2. Naples
      3. Florence
      Quize


      Definition Lists  
      A definition list (coded as <DL>) usually consists of alternating a definition term (coded as <DT>) and a definition definition (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:
        Definition List HTML Code (v)
       N   defined.htm - Notepad  <<   >>   X  
           <DL>
       <DT> NCSA
         <DD> NCSA, the National Center for Supercomputing
            Applications, is located on the campus of the
            University of Illinois at Urbana-Champaign.
       <DT> Cornell Theory Center
         <DD> CTC is located on the campus of Cornell
            University in Ithaca, New York.
     </DL>
        Definition List Output (w)
       N   defned.htm - Netscape  <<   >>   X 
      NCSA
      NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign.
      Cornell Theory Center
      CTC is located on the campus of Cornell University in Ithaca, New York.

      The COMPACT attribute can be used routinely in case your definition terms are very short. If, for example, you are showing some computer options, the options may fit on the same line as the start of the definition.

        Sample for COMPACT data list (x)
       N   compact.htm - Notepad  <<   >>   X  
           <DL COMPACT>
     <DT> -i
     <DD>invokes NCSA Mosaic for Microsoft Windows
       using the initialization file defined in the path
     <DT> -k
     <DD>invokes NCSA Mosaic for Microsoft Windows in
       kiosk mode
     </DL>

      The output looks like:
        COMPACT Data List Output (y)
       N   A Simple HTML COMPACT Data List Example - Netscape  <<   >>   X 
      -i
      invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path.
      -k
      invokes NCSA Mosaic for Microsoft Windows in kiosk mode.

      Nested Lists (Illustrated with unnumbered lists) 
      Lists can be nested. You can also have a number of paragraphs, each containing a nested list, in a single list item.

        Nested List Sample (z)
       N   nested.htm - Notepad  <<   >>   X  
          <UL>
       <LI> A few New England states:
           <UL 1>       <---- Note numeric attribute
              <LI> Vermont
              <LI> New Hampshire
              <LI> Maine
           </UL 1>      <---- Note numeric attribute
       <LI> Two Midwestern states:
           <UL 2>       <---- Note numeric attribute
              <LI 2> Michigan
              <LI 2> Indiana
           </UL 2>      <---- Note numeric attribute
    </UL>
        Nested List Sample Output (aa)
       N   A Nested List HTML Example - Netscape  <<   >>   X 
      • A few New England states:
        • Vermont
        • New Hampshire
        • Maine
      • Two Midwestern states:
        • Michigan
        • Indiana

      Note that the "bullets" for each embedded un-numbered list have a difference appearance.
 
    1. Preformatted Text

      Use the<PRE> tag (which stands for "preformatted") to generate text in a fixed-width font. This tag also makes spaces, new lines, and tabs significant -- multiple spaces are displayed as multiple spaces, and lines break in the same locations as in the source HTML file. This is useful for program listings, among other things. For example, the following lines:

        Sample Preformatted Tag Coding (ab)
       N   preformatted.htm - Notepad  <<   >>   X  
      
<!---- Note blank line following this comment -->
 <PRE>
      #!/bin/csh
       cd $SCR
        cfs get mysrc.f:mycfsdir/mysrc.f  
        cfs get myinfile:mycfsdir/myinfile    
       fc -02 -o mya.out mysrc.f     
      mya.out   
       cfs save myoutfile:mycfsdir/myoutfile 
      rm * 
</PRE>
<!---- Note blank line prior to this comment -->
        Preformatted Tag Block Output (ac)
       N   preformatted.htm HTML Example - Netscape  <<   >>   X 
      <!---- Note blank line following this comment (due to PRE tag) --> 
            #!/bin/csh
       cd $SCR
        cfs get mysrc.f:mycfsdir/mysrc.f  
        cfs get myinfile:mycfsdir/myinfile    
       fc -02 -o mya.out mysrc.f     
      mya.out   
       cfs save myoutfile:mycfsdir/myoutfile 
      rm *
      <!---- Note blank line prior to this comment (due to /PRE tag) -->

      The <PRE> tag can be used with an optional WIDTH attribute that specifies the maximum number of characters for a line. WIDTH also signals your browser to choose an appropriate font and indentation for the text.
      Hyperlinks can be used within <PRE> sections. You should avoid using other HTML tags within <PRE> sections, however.
      Note that because <, >, and & have special meanings in HTML, you must use their escape sequences (&lt;, &gt;, and &amp;, respectively) to enter these characters. See the section Escape Sequences for more information.
 
    1. Extended Quotations:
        Extended Quotations (ad)
       N   simple.htm - Notepad  <<   >>   X  
          <P>Omit needless words.</P>
    <BLOCKQUOTE>
    <P>Vigorous writing is concise. A sentence should
    contain no unnecessary words, a paragraph no unnecessary
    sentences, for the same reason that a drawing should have
    no unnecessary lines and a machine no unnecessary parts.

    </P>
    <P>--William Strunk, Jr., 1918 </P>
    </BLOCKQUOTE>
        Extended Quotations Output (ae)
       N   Extended Quotations - Netscape  <<   >>   X 

      Omit needless words.

      Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

      --William Strunk, Jr., 1918
      Note the "break" of the line and blank line after the first period (due to the </P> tag). Then, the indentation due the BLOCKQUOTE tag. Also, the sequence of the < /P> and <P> tags results in a single "break" and one blank line.

    2. Forced Line Breaks/Postal Addresses

      3. The <BR> tag forces a line "break" with no extra (white) space between lines. Using <P> elements for short lines of text such as postal addresses results in unwanted additional white space. For example, with <BR> tag:
        475 Notepad Template (af)
       N   simple.htm - Notepad  <<   >>   X  
          National Center for Supercomputing Applications<BR>
    605 East Springfield Avenue<BR>   Champaign, Illinois 61820-5518<BR>
        500 Browser Output (ag)
       N   A Simple HTML Example - Netscape  <<   >>   X 
      National Center for Supercomputing Applications
      605 East Springfield Avenue
      Champaign, Illinois 61820-5518
      Note that the textual content of the source code file, that is, with more than a single <BR> tag presented on the same line produces a single line on the presentation prior or each <BR> tag.

    3. Horizontal Rules

      4. The <HR> tag produces a horizontal line the width of the browser window. A horizontal rule is useful to separate major sections of your document.
      You can vary a rule's size (thickness) and width (the percentage of the window covered by the rule). Experiment with the settings until you are satisfied with the presentation.

        Some Heading Tag Eamples (ah)
       N   Heading Examples - Netscape  <<   >>   X 
      Here are some <HR> examples: 
      <HR>
      displays as: (Note: default size is 2 pixels) 
      <HR size="4">
      displays as: (Note: argument SHOULD be a literal string) 
      <HR size=1>
      displays as: (Note: argument could be a numeric constant. Why?) 
      <HR size=4 width="50%">
      displays as: (Note: default width="100%") 
      <HR NOSHADE width="50%">
      displays as: (Note: default is not NOSHADE) 
      <HR size=15 NOSHADE width="50%">
      displays as: (Note: argument MUST be a literal. Why?) 
      <HR size=4 align=LEFT NOSHADE width="50%">
      displays as: (Note: default alignment is CENTER) 
      <HR size=4 align=RIGHT NOSHADE width="50%">
      displays as: (Note: There is no attribute SHADE)

Link to Part 2
Link to Part 3

 
Request for Permission
To: Webmaster@ncsa.unic.edu
From: Ron Reed
Subject: Seeking Permission

Dear Webmaster;

I am developing 4 to 6 sessions of 2-hour classes for a course on web page development for seniors.

Since the page below is no longer maintained, I am seeking permission to use portions of the textual material for a course outline.
http//archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html

Regards,
Ronald Reed
Instructor, Ewing Senior Center http//www.ewingsnet.com
Response
To: Ron Reed <fmt@passco.com>
From: Steven J Kleinvehn <stevek@ncsa.uiuc.edu>
Date: Wed, 15 Aug 2001 09:53:46 -0500
Subject: Re: Seeking Permission

You may copy the Beginner's Guide for your non-profit, educational use, provided you give the following credit:

"Created by the National Center for Supercomputing Applications (NCSA),
http://www.ncsa.uiuc.edu/. Copyright 1997, University of Illinois Board of Trustees."

Please also include the URL for the NCSA HTML Beginner's Guide,
http://archive.ncsa.uiuc.edu/General/Internet/WWW/index.html.
Remember, you can neither reproduce the Beginner's Guide on your server nor sell it.