HTML Basics - Lesson III
 

Hi and welcome to lesson number three of HTML Basics. I hope you have been practicing what you have learnt so far. In this lesson we shall learn about Lists and Links.

Listing Tags
Use lists to display numbered steps, bulleted items, or items and their definitions. Using HTML tags you can display items as three types of lists: 
  • Unordered
    In an unordered list each item is preceded by a bullet. You can define the type of bullet you want to use.
  • Ordered
    In an ordered list each item is preceded by either a number or a letter.
  • Definition
    In a definition list you specify a term and its definition. The term appears bold and the definition is indented.
Each type of list works the same way. You enter a tag that describes the type of list. Then you tag each list item. Finally, you end the list. You can have paragraphs within lists. Paragraphs within a list are indented, but do not have a bullet or number as list items do.

An easy to make mistake is to leave off the end list tag. This leaves the list indent turned on and the remainder of your pages appears indented.

Unordered List 
The unordered list displays items in an indented, vertical column. Each item is preceded by a bullet. An unordered list uses three tags. 
  • The list begins with the <UL> tag
  • Each item in the list is marked with the list item tag, <LI>
  • The list ends with an off unordered list tag, </UL>

Example:

There are nine planets: <BR>

<UL>

<LI> Mercury

<LI> Venus

<LI> Earth and so on.

</UL>

If you have lists within lists it will display a different type of bullet at each level. You can also specify the type of bullet you want to use by adding the type switch. 

The type switch has three variables:
  • Disc is the default, a solid circle.  <UL TYPE = DISC>
  • Circle is a hollow circle.  <UL TYPE = CIRCLE>
  • Square is a hollow box.  <UL TYPE = BOX>

Ordered List
The ordered list displays items in an indented, vertical column. Each item is preceded by a number or a letter.

An ordered list uses three tags:
  • The list begins with the <OL> tag.
  • Each item in the list is marked with the list item tag, <LI>
  • The list ends with an off ordered list tag, </OL>

Example:

There are nine planets: <BR>

<OL>

<LI> Mercury

<LI> Venus

<LI> Earth and so on.

</OL>

The ordered list has two switches:

The type switch lets you specify whether to use numbers or letters in your ordered list. The default value is Arabic numerals.
  • I i.e.: <UL TYPE = I> produces a numerical list with roman numerals.
  • A i.e.: <UL TYPE = A> produces an alphabetical list with capital letters.
  • 1 i.e.: <UL TYPE = 1> produces a numerical list with numerals. This is also the default value.
  • a i.e.: <UL TYPE = a> produces an alphabetical list with lowercase letters.
  • i i.e.: <UL TYPE = i> produces a numerical list with small roman numerals.

The start switch lets you start the ordered list at a specific number. 

For example:

<OL START = 15>                             Starts the list with the number 15:

<LI> Rose                                            15. Rose

<LI> Chrome                                       16. Chrome

<LI> Tangerine                                    17. Tangerine

Definition List 
The definition list displays items in two parts. The first is a bold definition term. The second is an indented definition description. A definition list uses four tags. 
  • The list begins with the <DL> tag.
  • Each definition term in the list is marked with the definition term tag, <DT>
  • Each indented definition in the list is marked with a definition tag, <DD>
  • The list ends with an off definition list tag, </DL>

Links
Linking together different ideas and content is the basic strength of the web. The web’s basic strength lies in its ability to provide seamless links between sets of information. The very name ‘browser’ comes from this idea. The browser lets us, from the desktop, browse through pages, files, images and data around the world all of which are linked together as part of different web sites and finally through the Internet. In this section we shall learn about creating links to other pages. It’s a set tag format like you have seen so far. Once you learn the format you can make as many links as you want to any other page you want.

Now an example: What is below would create a link to the Dishnet DSL homepage.

<A HREF="http://www.virtualcampus.8m.net">VirtualCampus</A> 

Here's What's Happening
  • A stands for Anchor. It begins the link to another page.
  • HREF stands for Hypertext REFerence. That's a nice, short way of saying to the browser, "This is where the link is going to go."
  • http://www.virtualcampus.m.net is the FULL ADDRESS of the link. Also notice that the address has an equal sign in front of it and is enclosed in quotes. Why? Because it's an attribute of the Anchor tag, a command inside of a command.
  • Where it reads "VirtualCampus" is where you write the text you want to appear on the page. What is in that space will appear on the page for the viewer to click. So, write something that denotes the link.
  • /A ends the entire link command. 

What To Write For The Link?
There are a couple different schools of thought on this. One suggests that what you write for links should be quite blatant. This includes text like "Click here for this" or "Here's a link to...". The other states that since the hypertext links will be blue (or whatever color they're set to), that the links should be just another word in the text set up as a link. 

I believe a little of both. I'm of the opinion you should be allowed to have a very easy time of it all in terms of navigating your Web pages. But it's your page and you make that decision. 

E-Mail Links From Your Page
This is what's known as a mailto: command. It follows the same coding scheme as the hypertext link above. What this format does is place blue wording on the screen that people can click to send you a piece of e-mail.

Here's the pattern:

<A HREF="mailto:virtualcampus2002@hotmail.com">Click Here To Write To Me</A>

Notice it's the same format as a link except in a link you write "mailto:" in place of the http:// and your e-mail address in place of the page address. Yes, you still need the </A> tag at the end. Please notice there is NO SPACE between the colon and the e-mail address.

Now start your text editor – Notepad – and practice. Play around with what you have learnt. Get the feel of it. And once you feel confident enough feel free to move on to the next lesson in the series. Next time we shall get into and examine the fun part of the web, images and how to manipulate them.

Click here for Part I of this series
Click here for Part II of this series
Click here for Part III of this series
Click here for Part V of this series
Click here for Part VI of this series

Back