¶ Page 1 




A Beginner's Online Course in HTML
Author: Ronald Reed
[Freeback: http://www.passco.com/email/]



This is Part 1 |  Part 2 |  Part 3  of 3 Parts




Acknowledgements

The core of this course was developed and enhanced by the Author
with the initial material presented in the following inactive Internet Site:

A Beginner's Guide to HTML
( http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.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



A "Big Thank You" for the proof reading
of this site goes to his "Big Friend", Dave Kulp


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.

This Outline in hard copy is available on an Internet Web Site.

Netscape Users
should continue.
Document Updated: Internet Explorer Users
might contact Bill Gates.

http://www.passco.com/htmlp3.html

Single Full Line Indicates Designed Page Width and Standard Font Size

Page 2

¶ Page 2  

¶ Preface   <=== Click to align to this heading.    Click § to align to TOP.
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.

 ¶ Page 2

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.

  ¶ Page 2


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 to a paragraph label, current position or a heading above.

  • Use the § character to align to the Top Page (page 1);
  • Use the Right Margin Column to align to Next Page;
  • Use the very far Left Margin Column will align to Prior Page;
  • Use the near Left Margin Column aligns the top of the Current Page.

      ¶ Page 2


  • Page 3

    ¶ Page 3  

    ¶ Table of Contents <=== Click to align to this heading.    Click § to align to TOP.
    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          ¶ Page 3

       
    2.   ¶ HTML Documents
      1.     ¶ What is an HTML Document
      2.     ¶ HTML Editors
      3.     ¶ Getting Your Files on a Server
      4.     ¶ Tags Explained
      5.     ¶ The Minimal HTML Document
      6.     ¶ A Teaching Tool          ¶ Page 3

       
    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          ¶ Page 3


    Page 4

    ¶ Page 4  

        ¶2   Part 2   Outline <== Warning == Click ¶Part 2   goes to Part 2     §

             Click the green textual phrase "Part 2 Outline" to link to that 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.   ¶Part 2   Character Formatting  
      1.    ¶Part 2   Logical Versus Physical Styles
      2.    ¶Part 2   Escape Sequences           ¶ Page 4

    2.   ¶Part 2   Linking
      1.    ¶Part 2   Relative Pathnames Versus Absolute Pathnames
      2.    ¶Part 2   URLs
      3.    ¶Part 2   Links to Specific Sections
      4.    ¶Part 2   Mailto: to Specific Address           ¶ Page 4

        ¶3   Part 3   Outline <=== Warning ===   Click ¶3 goes to Part 3         §
    1.   ¶Part 3   Inline Images  
      1.    ¶Part 3   Image Size Attributes
      2.    ¶Part 3   Aligning Images
      3.    ¶Part 3   Alternate Text for Images
      4.    ¶Part 3   Images as Hyperlinks
      5.    ¶Part 3   Background Graphics
      6.    ¶Part 3   Background Color
      7.    ¶Part 3   External Images, Sounds, and Animations           ¶ Page 4
       
    2.   ¶Part 3   Tables
      1.    ¶Part 3   Table Tags
      2.    ¶Part 3   General Table Format
      3.    ¶Part 3   Tables for Nontabular Information           ¶ Page 4
       
    3.   ¶Part 3   Fill-out Forms
       
    4.   ¶Part 3   Troubleshooting
      1.    ¶Part 3   Avoid Overlapping Tags
      2.    ¶Part 3   Embed Only Anchors and Character Tags
      3.    ¶Part 3   Do the Final Steps
      4.    ¶Part 3   Commenting Your Files           ¶ Page 4
       
    5.   ¶Part 3   For More Information
      1.    ¶Part 3   Style Guides
      2.    ¶Part 3   Other Introductory Documents
      3.    ¶Part 3   Additional Online References
      4.    ¶Part 3   Thanks           ¶ Page 4
    Page 5

    ¶ Page 5  

    1.   ¶  Getting Started        §

    2. 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/FireFox Mozilla 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.   ¶ Page 5

    3. 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.   ¶ Page 5
      Question:    Response:

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

        There is a method to determine the exact number of images in this file.   ¶ Page 5
       
      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 may be disabled due to use by spam mailers.

      The Answer is "None". All the visual images are generated via HTLM coding.


      *** If you got no response e-mail, then you entered an invalid e-mail address. ***

      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.
    Page 6

    ¶ Page 6  

    1.   ¶  Reference and Support External Web Sites       §
      ¶ NetMechanic Webmaster Tips Library

    Page 7

    ¶ Page 7  

    1.   ¶  Configuring Your Monitor and Browser       §

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

    2. 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.
            ¶ Page 7

    3. 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.
    4. 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.

    5. 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.
            ¶ Page 7

    6. 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).

    This "Ruler" Statement

    Single Full Line Indicates Designed Page Width and Standard Font Size

    Page 8

    ¶ Page 8  

    1.   ¶  Terms to Know         §
      WWW  ---  World Wide Web
      "It was 1969 and a busy year for making history: Woodstock, the Miracle Mets, men on the moon -- and something less celebrated but arguably more significant, the birth of the Internet.
      On October 29 of that year, for perhaps the first time, a message was sent over the network that would eventually become the Web. Leonard Kleinrock, a professor of computer science at the University of California-Los Angeles, connected the school's host computer to one at Stanford Research Institute, a former arm of Stanford University."
            --- http://www.cnn.com/2009/TECH/10/29/kleinrock.internet/index.html By Philip Rosenbaum, CNN October 29, 2009 1:00 p.m. EDT

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

      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.   ¶ Page 8

      ( more terms to be added )

    Page 9

    ¶ Page 9  

    1.   ¶  What Isn't Covered         §
      1. This course outline assumes that you
        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.
      3. 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..   ¶ Page 9

        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.

      4. 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.
          ¶ Page 9
      5. Have a general understanding of how the Internet works.
      6. Have a understanding of how your ISP Web server  works.
          ¶ Page 9
      7. 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.   ¶ Page 9


    2.   ¶  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.
    3.   ¶  What an HTML Author Needs to Know       §
      What does an HTML Author need to know?

      ( More to be added )




    Page 10

    ¶ Page 10  

        ¶ HTML Documents       §
    1. What is an HTML Document
    2. 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.   ¶
    1. 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.   ¶

      Fig 10a. Notepad Image (a)
     N   simple.htm - Notepad  <<   >>   X 
      Notepad Screen Image
       Currently non-functional until replaced with appropriate content.



      Fig 10b. Browser Output Image (b)   ¶
     N   A Simple HTML Example - Netscape  <<   >>   X 
       Browser Output Screen
       Currently non-functional until replaced with appropriate content.


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

      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.

      10 | | | |
    Page 10.1

    ¶ Page 10.1  

    1.   ¶ Summary and Quiz Pages       §

      The lower graphics illustrate the Summary and Quiz type pages.

        Fig 10c. Summary Page Output (c)
       N   A Simple HTML Example Summary Page - Netscape  <<   >>   X 
      
      	Summary Page
      	Currently non-functional until replaced with appropriate content.
      The summary pages are used to review the material regarding the previous section.
       
      Fig 10d. Quiz Page Output (d)
        ¶
       N   A Simple HTML Example Quiz Page - Netscape  <<   >>   X 
      
      	Quiz Page
       	Currently non-functional until replaced with appropriate content.
      The quiz pages are to contain an evaluation of the previous portion of material. The techniques used may vary dependent on material.

      10.1 | | | |
    Page 11

    ¶ Page 11  

    1.   ¶ 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.

    2.   ¶ 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.



      11 | | | |
    Page 12

    ¶ Page 12  

    1. ¶ Tags Explained        §
    2. 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.    ¶

    3. 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.    ¶

    4. 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 12. "Think of it as Blocks within Blocks within Blocks"  
      <HTML>

      <HEAD>

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

          
        </HEAD>

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

         </BODY>

         </HTML>

    5. 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.   ¶

    6. 12 | | | |
    Page 13

    ¶ Page 13  

    1. 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 13a. Here are some of the BODY block's attributes and their arguments.
      <BODY
          bgcolor="Lightblue"
          text="#000000"
          bgcolor=BLUE
          background="background.gif"
          bgproperties="fixed"
          link="Darkgreen"
          vlink=darkred
          alink=000000
          topmargin="0"
          bottommargin="0"
          leftmargin="0"
          rightmargin="0">

         </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.   ¶
    2. 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.

      Fig 13b. Usage of "reference" linkages to other points in the course (Table's Caption)
      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.



      13 | | | |
    Page 14

    ¶ Page 14  

    1. 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.   ¶

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

        </TABLE 3>
        </TABLE 2>
      <TABLE 4>
       ........
       ........
      <TABLE 5>
      <TABLE 6>
      ........


        </TABLE 4>
        </TABLE 1>
       
      Fig 14b. Carried to extremes.
      <TABLE 1>
      <TABLE 2>
      <TABLE 3>
        </TABLE 3>
        </TABLE 2>
        <TABLE 4>
          <TR 4 BGCOLOR=black >
            <TD 4>...........</TD 4>
            <TD 4>...........</TD 4>
          </TR 4>
          <TR 4> <TD 4 COLSPAN=2>
              <TABLE 5> <TR 5>
                <TD 5>
                   <TABLE 6><TR 6>
                   <TD 6>...........</TD 6>
                   </TR 6> </TABLE 6>
                </TD 5> </TR 5> </TRADE 5>
            </TD 4>
          </TR 4></TABLE 4>
         </TABLE 1>
        Border= element HTML code text not shown


    2. 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.
    3. Author's Tip:     "Links that Work, Sometimes", http://www.netmechanic.com/news/vol4/html_no18.htm
          Browser incompatibility represents a huge challenge for all webmasters.  Incompatibility issues can affect your images, JavaScript functions, style sheets, and page layout.  But you may not realize that browser compatibility problems can also affect your links.  But The Links Work - Or Do They?
          Have you ever gotten a bad link report --- and found that the link works just fine in your browser?  The problem is usually due to your choice of Web browser. 
      Some links on your site that work fine in Internet Explorer may be broken in
      `Mozilla Browsers` like `Firefox`, Netscape Navigator and other browsers.
          This is just one more way that minor errors in the way you write your HTML code
      can make a big difference in the way your Web page displays on different browsers.
          In particular, Internet Explorer often corrects invalid URLs used in your links,
      allowing them to work correctly.  `Mozilla` and all other browsers don't make these corrections, so visitors get broken links.
      14 | | | |
    Page 15

    ¶ Page 15  

    1.   ¶ 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:   ¶
        Fig 15a.   "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.   ¶
        Fig 15b.   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.)
      15 | | | |
    Page 16

    ¶ Page 16  

    1. ¶   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.

    Fig 16.   A typical Netscape Browser Menu Bar contains View choice
     N  A Beginner's Course in HTML - Part 1 - Netscape <<  >> 
     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.
    16 | | | |
    Page 17

    ¶ Page 17  

      ¶   Markup Tags - "The language of the Internet"         §
    1. HTML Block
      The HTML tag tells your browser that the file contains HTML-coded information.

      Fig 17a. 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" or ".htm"
      also indicates this an HTML document and must be used.
      The three character extensions remain due to earlier operating
      systems limitaiion of file names was 8 charaters (with no spaces),
      and file extesions was limited to three chacters.
      Fig 17a. Syntax: Two Nested BIG Block Tags (used above)

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



      17 | | | |
    Page 18

    ¶ Page 18  

    1.   HEAD Block - "This is the browser communication segment."  §

      The head element identifies the first part of your HTML-coded document that contains the title.

      Syntax: Head Block Tags

      <HEAD has no attributes >
          <TITLE has no attributes >
                     -------- This text labels the "Title Bar" ---------
              </TITLE has no attributes >
          <META name="description" comment="Introductory Course ... ">
          <META NAME="Keywords" CONTENT="PASSCo HTML course introduction ...">
          <STYLE TYPE="text/css"> <!-- A {text-decoration: none} --> </STYLE>
          </HEAD has no attributes >

          <SCRIPT LANGUAGE="JavaScript">

      Elements that are placed in the "HEAD BLOCK" are:

      1. Meta Statements - They are commands to the browser.
      2. Javascripts - Non-HTML code "processed" by optional support coding.
      3. Global and Local Javascripts
      4. Style Blocks



      18 | | | |
    Page 19

    ¶ Page 19  

    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.

      Fig 19a. 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.

      Fig 19b. 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.



    19 | | | |
    Page 20

    Page 20  

    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.

      Fig 20a. 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>

      <!-Cut & Paste ->


      20 | | | |
    Page 21

    Page 21  

    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.



    21 | | | |
    Page 22

    Page 22  

    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

      Fig 22a. 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?

      Fig 22b. 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.

    22 | | |
    Page 23

    Page 23  

    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:

      Fig 23a. Notepad Screen Image (m)
     N   simple.htm - Notepad  <<   >>   X 

        <H3>Level-one heading</H3>
        <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>
    

    <!-Cut & Paste ->

      Fig 23b. 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).


    23 | | | |


    Page 23.1

    Page 23.1  

    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.

      Fig 23c. Sample Paragraph Block (p)
     N   simple.htm - Notepad  <<   >>   X 
        <P align=CENTER>
        This is a centered paragraph.
         </P>
    

      Fig 23d. 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.
    .

    23.1 | | | |


    Page 24

    Page 24  

    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




      24 | | | |


    Page 25

    Page 25  

    1. 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.
        Fig 25a. Numbered (Ordered) List HTML Code ( t )
       N   numbered.htm - Notepad  <<   >>   X 
          <OL>
          <LI> oranges
          <LI> peaches
          <LI> grapes
          </OL>
      
        Fig 25b. 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 "numeric" by default.

        Fig 25c. 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.
      Fig 25d. Numeric Ordered Output
       N   numbered.htm - Netscape
      1. oranges
      2. peaches
      3. grapes



        Fig 25e. 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".
      Fig 25f. 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

      25 | | | |


    Page 26

    Page 26  

    1.   ¶  Definition Lists  §  
    Definition List are ONLY supported by Internet Explorer (compatiable with othe browser is not supported. Thus use of DL-DT-DD tags is not recommended.

    A definition lists (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:

      Fig 26a. 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>
    

      Fig 26b. 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.

      Fig 26c. 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:
      Fig 26d. 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.


    26 | | | |


    Page 27

    Page 27  

    1.   ¶  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.
    27 | | | |


    Page 28

    Page 28  

    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.


    28 | | | |


    Page 29

    Page 29  

    1.   ¶  Extended Quotations          §
        Fig 29a. 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>
      
        Fig 29b. 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.

      29 | | | |


    Page 29.1

    Page 29.1  

    1.   ¶  Forced Line Breaks/Postal Addresses
      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:

        Fig 29a. Notepad Template (af)
       N   simple.htm - Notepad  <<   >>   X 
          National Center for Supercomputing Applications<BR>
          605 East Springfield Avenue<BR>   Champaign, Illinois 61820-5518<BR>
      

        Fig 29b. 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.

    1.   Horizontal Rules
    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.
    29.1 | | | |


    Page 30

    Page 30  

    1.   ¶  Horzional Rules          §

      Here are some <HR> examples:
      <HR color=blue >
      displays as: (Note: default size is 2 pixels)
      <HR size="4" color=red >
      displays as: (Note: argument SHOULD be a literal string)
      <HR size=1 color=darkgreen >
      displays as: (Note: argument could be a numeric constant. Why?)
      <HR size=4 width="50%">
      displays as: (Note: default width="100%")
      <HR size=4 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
    30 | | | |


    Page 31

    Page 31  

    1.   ¶  Last Page - Part 1          §

      Correspondence and Permission Response

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

      Link to Part 2
      Link to Part 3


      31 | | | |


    Page BASE

    Page BASE  

    1.   ¶  Base Page  §

      ............. Insert ...........

      Base | | | |