It is assumed that this will be a review of basic HTML tags and attributes. If you have never been exposed to HTML, you should know that, while HTML is pretty easy to learn, you will be required to familiarize yourself with the basic principles of creating a webpage. They are, in no particular order: using Notepad, saving webpages in Notepad, opening webpages in a web browser, and interactively switching between Notepad and your web browser to view changes to your HTML.

If these items seem unfamiliar, seek additional assistance from a friend, knowledgeable instructor, an HTML book or an online HTML tutorial.

Complete: Very basically you should be able to place the following HTML in a webpage. You should be able to create and save it with Notepad, open it up in a webpage browser, change it, save it again, switch back to your browser, note the changes and repeat this process indefinitely.

If you are able to accomplish this task and save it as intro.html you should have no problem completing the next task of reviewing/learning the following HTML tags by representing them in a webpage named home.html (use breaks <br> and hairlines <hr> to divide each section):

An example of all tags <h1> through <h6> with, of course, their corresponding closing tags.

Example: <h1>This is H1</h1> Note: Use the size as your text.

All tags <font size=6 color="C0C0C0" face="arial"> through <font size=1 color="C0C0C0" face="arial"> using different colors and fonts.

Example: <font size=6 color="CC0000" face="arial">This is Font Size 6</font>

An unordered list <ul> with at least 5 items identified with the <li> tag

Example: <ul>

<li>Item 1

<li>Item 2

<li>Item 3

<li>Item 4

<li>Item 5

</ul>

An ordered list <ol> designed in the same way.

Show the instructor when you are finished.

Your finished webpage should look something like this:

This is H1

This is H2

This is H3

This is H4

This is H5
This is H6

This is font size 6

This is font size 5

This is font size 4

This is font size 3

This is font size 2

This is font size 1

  1. Wrestling
  2. Basketball
  3. Soccer
  4. Football
  5. Track

So why the heck would I want to change the size or color of my text or use bullets or numbers?

Think about the websites that you have visited, and decide why you liked or disliked the site. I'll bet that you probably appreciated the sites that were the best organized. The sites that highlighted key features or areas with colored links, bullets or numbers probably allowed you to find the resources that you were seeking. Web surfers, casual or otherwise, like to be able to go to a site, see if it has what they want, get the information or resources they're after, and move on to another. Every item that you are able to provide to enhance this process not only is appreciated but also increases you reputation with the web community. The items reviewed and/or introduced here are only a few of the tools at your disposal. You need only search the web or look below for more:

Other list options

<dt>

<dl>My stuff

<dd>A computer

<dd>Lots of time

<dd>Cool computer games

</dl>

</dt>

would produce:

My stuff
A computer
Lots of time
Cool computer games

You may also wish to create an extended list similar to the one shown below:

  1. Computer
    1. Hardware
    2. Software
  2. Internet
    1. Dialup
    2. Cable

You may accomplish this by nesting a list

<ol>

<li>Computer

<ol>

<li type=A>Hardware

<li type=A>Software

</ol>

<li>Internet

<ol>

<li type=A>Dialup

<li type=A>Cable

</ol>

</ol>

Notice that you must close each <ol> tag with </ol> after you are done with it. You may also note that I included the type=a attribute. The type= attribute is used to determine a style as set forth by The Chicago Manual of Style. Other styles include type=I for Roman numerals, type=A for uppercase, type=1 for numbers and type=a for lowercase.

You may additionally enhance your style by nesting bullets. The default is l followed by o ending with but may be modified by adding the type=circle, type=square or type=disc to the <li> tag.

Additional formatting options are available to replace <hr> and <li> using images, but that is a story for another day…