BASIC HTML TUTORIAL

 

Lesson Six
 

Lesson Six covers:

  • Headers
  • Lists
  • Special Characters

You do not have to create a sample page for Lesson Six or Seven. I suggest you try to edit your page05.htm with what you learn in these lessons.

Section 1 - HEADER TAGS

Not to be confused with the HEAD tag, a HEADER tag creates a heading or title to a page, and subsequent subheadings. With this tag, you do not need to include "size=" just a number from 1 to 6, the higher the number, the smaller the heading.

 

This code:   <H1>This is a header</H1>

creates this...

This is a header

 

This code:   <FONT SIZE=6><B>This is just text</B></FONT></P>

creates...

This is just text

 

The difference? One line has more code.

The main reason to use the Header tag is search engines rate them higher than regular text. The tags should be used in their respective order of default size - the largest being 1 and the smallest being 6 (see below) since search engines may assume the text in them as the respective level of importance on your site. If you use header tags, try to include keywords in them as some search engines will use these tags to index your site. The tag has an automatic line break before and after it and you may use the align attributes to position it.

 

The code:
<H1>This is a size 1 header</H1>

The result:

This is a size 1 header

 

The code:
<H2 align=right>This is a size 2 header</H2>

The result:

This is a size 2 header

 

The code:
<H3 align=center>This is a size 3 header</H3>

The result:

This is a size 3 header

 

The code:
<H4>This is a size 4 header</H4>

The result:

This is a size 4 header

 

The code:
<H5>This is a size 5 header</H5>

The result:

This is a size 5 header

 

The code:
<H6>This is a size 6 header</H6>

The result:

This is a size 6 header

Section 2 - LISTS

The code on the left, creates the list shown on the right.

 

 

Numbered List

<B>This is list 1:</B>
<OL>
<LI>Item One
<LI>Item Two
<LI>Item Three
</OL>
This is list 1:
  1. Item One
  2. Item Two
  3. Item Three
 

 

Bulleted List

<B>This is list 2:</B>
<UL>
<LI>Item One
<LI>Item Two
<LI>Item Three
</UL>
This is list 2:
  • Item One
  • Item Two
  • Item Three
 

 

Descriptive List, indented

<B>This is list 3:</B>
<DL>
<DD>Item One
<DD>Item Two
<DD>Item Three
</DL>
This is list 3:
Item One
Item Two
Item Three
 

 

Descriptive List, not indented

<B>This is list 4:</B>
<DL>
<DT>Item One
<DT>Item Two
<DT>Item Three
</DL>
This is list 4:
Item One
Item Two
Item Three
 

 

Descriptive List, combination

<B>This is list 5:</B>
<DL>
<DT>First Three</DT>
<DD>Item One
<DD>Item Two
<DD>Item Three
<DT>Next Three</DT>
<DD>Item Four
<DD>Item Five
<DD>Item Six
</DL>
This is list 5:
First Three
Item One
Item Two
Item Three
Next Three
Item Four
Item Five
Item Six
 

 

Nested Lists
(numbered and bulleted used as examples)

<B>This is list 6:</B>
<OL>
<LI>Item One
<LI>Item Two
<UL>
<LI>sub item
<LI>sub item
</UL>
<LI>Item Three
</OL>
This is list 6:
  1. Item One
  2. Item Two
    • sub item
    • sub item
  3. Item Three
 

Note that when a list is nested the bullet changes.

Section 3 - SPECIAL CHARACTERS

Sometimes you will want to use certain characters which browsers may interpret as HTML code. Although you may find it unnecessary to use these codes when testing with your browser, you still should use them because you do not know what browser your web visitors may be using. These are the most common characters and what you have to type to get them to appear properly on all browsers:

To get < type &lt;

To get > type &gt;

To get & type &amp;

To get / type &frasl;

To get " (quote) type &quot;

To get © type &copy;

To get ® type &reg;

To get ° (degree sign) type &deg;

Example...

This line,

Images & text are © David K. Small ⁄ Small Expressions ®.

should be coded like this:

Images &amp; text are &copy; David K. Small &frasl;
Small Expressions &reg;.

You may also want to display characters which may be part of a foreign language. HTML supports the ISO Latin 1 character set. To see a large chart of special characters, click here.

 

 

 

 

Text, Photos, Graphics Copyright Small Expressions © All Rights Reserved.