HTML Basics

Contents

What is HTML?
Basic Layout
Your first HTML document
Text formatting tags
Color and Style
Adding Images
Creating links
Tables
Forms
Lists
Special Characters
Putting your page on the Internet
HTML Links

Lists

There are three types of list formatting tags available in HTML.
  1. Unordered (or Bulleted) List
  2. Ordered (or Numbered) List
  3. Definition List
I've used Ordered List tags to create the list above. It's pretty straightforword. First use the <ol> tag to start the ordered list. Then use the <li> tag for each list item. Finally, end the ordered list with the </ol> tag. Here's the markup... 
	<ol>
	<li>Unordered (or Bulleted) List
	<li>Ordered (or Numbered) List
	<li>Definition (or Dictionary) List
	</ol>
Creating an unordered list is just as easy. Simply replace the <ol> and </ol> tags with the <ul> and </ul> tags to convert our ordered list to an unordered one.
  • Unordered (or Bulleted) List
  • Ordered (or Numbered) List
  • Definition List
You may vary the type of your ordered and unordered lists by using the type attribute. For example, to show an ordered list with capital letters use 
	<ol type=A>
  1. item 1
  2. Item 2
Other types are: a(lowercase letters), i(lower case roman numerals), and I (upper case roman numerals).

To show an unordered list with square bullets use 

	<ul type=square>
  • Item 1
  • Item 2
Other types are: disc and circle.

The Definition List markup is a little more involved but no less straigtforward. The following is a glossary of HTML list tags presented as a Definition List.

<OL>
Starts an ordered list
<UL>
Starts an unordered list
<LI>
Specifies a list item
<DL>
Starts a definition list
<DT>
Specifies term to define
<DD>
Specifies definition of term
</OL>
Ends an ordered list
</UL>
Ends an unordered list
</DL>
Ends a definition list
Note that occassionally the end tags </LI>, </DT>, and </DD> are used. However, these tags are optional.

To create a definition list, start with <dl>, then use <dt> for the term you want to define followed by <dd> for the definition. End the list with </dl>. For example... 

<dl>
<dt>HTML
<dd>Hyper-Text Markup Language
<dt>XML
<dd>EXtensible Markup Language
</dl>
Produces...
<HTML>
Hyper-Text Markup Language
<XML>
EXtensible Markup Language
Suppose you want to use an image as a bullet for your list instead of the standard bullets used in Unordered lists. Simply use a definition list with DT tags containing the image and list item. For example...
List item 1
List item 2
Here's the markup... 
<dl>
<dt><img src=bullet.gif><b>List item 1</b>
<dt><img src=bullet.gif><b>List item 2</b>
</dl>
Lists may also be nested. Just remember to observe the rules of nested tags which is, inside tags should be closed before outside tags. Consider the following...
  • New York
    1. Albany
    2. New York City
  • Florida
    • Orlando
  • Maine
Here's the markup... 

<ul> <li>New
  York
    <ol>
    <li>Albany<li>>New York City
  </ol>
<li>Florida
  <ul>
    <li>Orlando
  </ul>
<li>Maine
</ul>
Now let's proceed to special characters.

Next >>