Free Webmaster Help Logo
Tutorials Articles Tools Images Directory Ask Newsletter
*
 

Tutorials
Cookies
ASP
Advanced HTML
Frames & Tables
.htaccess
Rounded Table Corners
Flash 5
FTP
Beginners
Javascript
PHP/MySQL
Site Promotion
Mobile Internet: WML/WAP
Server Side Includes (SSI)
HTML - The Basics
XHTML
Stylesheets
XML
PHP
*

125x125

Related Links
HTML Basics Tutorial
Sylesheets (CSS) Tutorial
More Advanced HTML Sites
*

 
Sitemap | Contact | Link To Us | Advertise
Report A Problem

Advanced HTML Tutorial
Part 2 - Lists, Headings & Base

Introduction

There are many features of HTML which, even with the greater acceptance of CSS, are still used often, and have no real replacement, in fact the header tags (explained later) are very important when using CSS.

Lists

There are many occasions when you may want to write a list in HTML. Of course, it would be easy enough to just write out the text which you want in the list and type numbers or *s in front of it, but there is a much easier, more flexible method. THe most basic type of list is a bulleted list, or an unordered list, as it is known in HTML. To create a list like:
    Things To Do:
  • Create Website
  • Upload
  • Become Millionare
you would use the following code:

<ul>Things To Do:
<li>Create Website</li>
<li>Upload</li>
<li>Become Millionare</li>
</ul>

The tag:
<ul>
tells the browser that you are starting an unordered list. It will indent the text from this point. The tags:

<li> and </li>

tell the browser where list items begin and end, so that it can place a bullet point in front of them. Notice that new lines are started automatically, without the need for <br> tags. The list is then closed using the:

</ul>

Sometimes you may want to nest your lists, to have sub-items. For example:
    Things To Do:
  • Create Website
    • Make pages
    • Check pages
  • Upload
  • Become Millionare
This would be done with the following code:

<ul>Things To Do:
<li>Create Website</li>
<ul><li>Make pages</li>
<li>Check pages</li></ul>
<li>Upload</li>
<li>Become Millionare</li>
</ul>

All you have done is simply to have placed one list inside a list item of another. The browser will cope with all the formatting of this and, as long as you remember to close your tags correctly, it will be formatted correctly.

Numbered lists are another feature of HTML. They allow you to have a list with the numbers automatically added (much like in a word processor). The structure is exactly the same as for an unordered list, except the list tag is:

<ol>

(standing for ordered list). The following example:
    Things To Do:
  1. Create Website
  2. Upload
  3. Become Millionare
would be created with the following code:

<ol>Things To Do:
<li>Create Website</li>
<li>Upload</li>
<li>Become Millionare</li>
</ol>

Again, with numbered lists you can nest them as with unordered lists, or even combine the two.

Headings

HTML formatting is mostly done using the <font> and various other tags, but what many people do not realise is that there are already some preformatted headings included. There are six of these, each one being a 'level' lower than the one above. They range from the largest <h1> to the smallest <h6>. The following are examples:

A Level 1 Heading


<h1>A Level 1 Heading</h1>

A Level 2 Heading


<h2>A Level 2 Heading</h2>

A Level 3 Heading


<h3>A Level 3 Heading</h3>

A Level 4 Heading


<h4>A Level 4 Heading</h4>

A Level 5 Heading

<h5>A Level 5 Heading</h5>

A Level 6 Heading

<h6>A Level 6 Heading</h6>

Although these headings do not look particularly nice, they do have two important uses. Firstly, being structured (as you move from 1 to 6 it signifies headings of lesser importance) intelligent software and browsers can use this to decide what is important
on the page. Also, speech browsers for the blind can also take advantage of this.

The second of the uses is more relevant, though. This is, that using CSS (Cascading Style Sheets) you can very easily change the format of the headings from 1 to 6, to be formatted exactly how you want them. This has the great benefit of allowing you to have structured headings but having them looking like they fit in with your site.

Base

The <base> tag is unknown by many people, but in certain circumstances it can be extremely useful. It has two main attributes, href and target.

The href attribute is used to tell the browser what the base URL for the page is. This can then be used to correctly interpret relative hyperlinks. For example, you may have a link pointing to:

afolder/mysite.html

If your page was located at:

http://www.mysite.com/page.html

then the URL loaded when the link was clicked would be:

http://www.mystie.com/afolder/mysite.html

You could, though set the base for the document to http://othersite.com. In this case, the link would load:

http://othersite.com/afolder/mysite.html

This also applies to images and any other relative URLs given to documents. The above <base> would be implemented using:

<base href="http://othersite.com">

and this tag would be placed in the <head> section of your HTML.

Although the usefulness of this tag may not be instantly apparent, it can be very useful if you need to put a premade page on another server, or if a page is accessed from multiple domain names. This way you do not need to update all your links, just the <base> of the document.

The target attribute is useful if you are using frames on your site. With frames, the target frame for a hyperlink is given as:

<a href="thepage.html" target="contentframe">

which would load the file thepage.html in the frame called contentframe. If you want all links to open in a particular frame, though, for example if you have a navigation bar page and you want all the links to load in the content frame, you could use the following <base> tag:

<base target="contentframe">

As with standard HTML targets, you can also use:

_blank to open in a new window
_self to open in the current frame
_parent to open in the frameset parent
_top to open in the whole browser window with no frames

Both the target and href attributes can be combined in the <base> tag.

Part 3

In part 3 I will show you how to create forms in HTML for use with server-side scripts and other uses.

© 1999 - 2001 FreeWebmasterHelp.com