HOW TO BUILD A PROFESSIONAL WEB SITE Rel. 1.1

LESSON 05

by Carlo Scodanibbio

First things first!
Last Lesson's Exercises solutions !
Here they are: Exercise 04 solution is here, and Exercise 05 solution is here. Voilà !
One comment with regard to Exercise 04: please note the use of the sequence     instead of a paragraph P to create vertical spacing between lines of text. This is because the FONT Tag should not contain any P Tag.
And, with regard to Exercise 05, please note I have "forced" a FONT Tag inside the PRE Tag - this was done to give a bit of colour to the Exercise, BUT it is not 100% correct. I shall discuss it a bit below.

Did you do OK ?? I am sure. And now,

lists

Browsers are capable of creating Lists of items automatically, thus giving a neat aspect to your text.
Browsers can construct UNORDERED LISTS and ORDERED LISTS.

Let's start with an

unordered ("bulleted") list

This is something similar to what you prepare (if you are more organised than my wife) before going to a supermarket for your shopping, and would look like this:

I must buy:
- Bread
- Butter
- Lettuce
- Meat
- Toothpaste

The necessary HTML TAGS that will construct that are:
<UL> STARTING TAG
</UL> CLOSING TAG

Those are container Tags - they obtain no effect by themselves, they need other Tags nested inside.
The 2 UL TAGS must be placed just before, respectively, and just after the items to be listed.

Besides, there must be a STANDALONE TAG <LI> before each item in the list.
Example:

<BODY BGCOLOR="#FFFFFF">
I must buy:
<UL>
<LI>Bread
<LI>Butter
<LI>Lettuce
<LI>Meat
<LI>Toothpaste
</UL>
</BODY>

The Browser will display the List like this:

Cute, isn't it ?

If you like to mess up your life you may apply other TAGS to beautify your Lists. For instance, you can make your List BOLD, on a green Body Background:

<BODY BGCOLOR="#00FF00">
I must buy:
<UL>
<LI>Bread
<LI>Butter
<LI>Lettuce
<LI>Meat
<LI>Toothpaste
</UL>
</BODY>

which will be displayed like this:

BUT: the HTML Code above is not correct - see below ! (first incorrect example)

In a wild spree of pure masochism you may even decide to change Font style for every item in the List, preparing, for instance, an HTML document like this:

which will be displayed by your Browser like this:

BUT: once again the HTML Code above is not correct !!!! - see below - (second incorrect example).

Now look at the black dot that the Browser inserts before each item in the List: black is not really nice, is it ?
No problem, you can match the dot colour with the List item colour, just by moving your  Opening Tags before each corresponding <LI> Tag, and everything will square up nicely (apparently).
This is the code (once again, not correct - see below - third incorrect example):

and this is the colourful result:

Voilá !
Netscape 4.0 will do something even nicer: it will create larger bullets, of a diameter proportional to the FONT SIZE chosen, like this:

BUT NOT Netscape 6.0: dots will be black and standard size.

Which leads to this very important rule: an HTML document may be displayed very differently by different Browsers and even by different versions of the same Browser.

You may easily imagine the consequences: the Professional Web Designer should always test all important and critical parts of an HTML document with different Browsers and their different versions. This may require having more than one Computer (it is not easy to have several versions of the same Browser installed in the same Computer - unless you create partitions in the Hard Disk, which is not a joke...).

Which leads to another practical rule: do not throw away old computers ! If you wish to become a good Web Designer, you will need them for years to come, with their older Browsers installed, with their older graphic cards and screens, and so on. This will allow you to test your Web Pages under many different operating conditions, and will bring you a wealthy experience in future....

Now, there is a big BUT: in the last few examples there are incorrect HTML Codes. This is because I have not respected (on purpose) a very important HTML rule.
In fact it's time I tell you about

inline elements and block elements

As I have mentioned above, I have on purpose gone for some incorrect HTML Code. My non valid Code is honoured by Browsers, usually very tolerant and "forgiving".
But the HTML Standard is very specific on the very important point of Inline Elements and Block Elements and their use.

First of all, what is an Element ?
In HTML, we call Element a Tag and its content. So, for instance, the HEAD of a Document is an Element, like its BODY is an Element, like the following

hello

is an Element - an Element consists of a pair of Tags (Opening Tag and matching Closing Tag) and whatever is in between.

Now, there are two main types of Elements:

Block Elements are those that generate a new Line in the Browser display flow when they are inserted in a Page - for instance, <H1></H1> <DIV></DIV> <BLOCKQUOTE></BLOCKQUOTE> <CENTER></CENTER> <HR> <PRE></PRE>

In fact, you may have noticed that their use in a Page cause Browsers to create a new Line: like to say that you cannot have 2 Headings in the same horizontal Line, nor 2 Paragraphs, nor 2 Divisions, etc.
So, these are called Block Elements. Also Unordered and Ordered Lists are Block Elements.

Inline Elements are those that can be contained in a Browser's line, for instance  <TT></TT>, etc.

You may have several Elements of this type in the same horizontal Line - none of them will cause the Browser to create new Lines. For instance, in the same (Browser's) Line, you may have this Code:

hello my friend

and those 3 Elements are displayed by Browsers in the same horizontal Line.

It's easy to understand the first, HTML simple rule:

Inline Elements may generally contain other Inline Elements (provided the Nesting rule is respected).

BUT, there is another extremely important HTML Rule that states:

Inline Elements cannot contain Block Elements - whereas Block Elements may generally contain Inline Elements (with some exceptions).

This is the rule that, on purpose, I did not respect in the Examples above: a  Element (Inline Element) cannot contain a <UL></UL> Element, like a  Element cannot contain it !!

As I said, Browsers are very forgiving, and ignore HTML rules (or, better, tolerate incorrect HTML Code - manipulate it to make it sort-of-correct - and still display it as you more-less expect....).
Now, if you wish, you may go along with a few hundred billions of incorrect Pages.... or you may wish to adhere to the HTML specifications and prepare for the future, more severe Web....

In which case the correct Code for the first "incorrect Example" would have to be like this:

<BODY BGCOLOR="#00FF00">
I must buy:
<UL>
<LI>Bread
<LI>Butter
<LI>Lettuce
<LI>Meat
<LI>Toothpaste
</UL>
</BODY>

which would still display like this:

Grab the idea ?

Likewise, for the second incorrect example, the B Tag should have been applied to each individual item in the List, inside each LI Tag, and not outside the UL Tag......

Finally, in the third incorrect example, I have forced the Browser to colorise the bullets, by using the FONT Tag outside each LI Tag - this is incorrect, because also the LI Element is a Block Element.
In this case, there is no HTML trick (that I know of) that will colorise those bullets and still comply with the Standard - the only solution is offered by Cascading Style Sheets (Lessons 21 - 24).

Now you will also understand why a FONT Tag should not contain a Paragraph P or positioned outside a CENTER Tag - and you will also understand why TT goes inside the PRE Tag and not outside...
You may also imagine why it is better to close Paragraphs P all the times (to prevent creating a sequence of incorrect coding.....).
With a bit of experience everything will look just simple and clear.

In conclusion, be extremely careful with Lists (and other Block Elements in general) and Inline Tags like those above, especially the FONT Tag. If you just aim at getting colourful effects, you can do without the HTML Standard rules. But if you are serious about creating Pages that validate against the Standard, then remember this very important point. More on this subject in the forthcoming Lessons and also in Lesson 29.

Before I shut down this story, let me also mention to you that some Block Elements may not contain other Block Elements. For instance a Paragraph P should not contain a Division DIV, whereas a Division DIV may contain a Paragraph P.
And obviously, the Block Element UL may only contain Block Elements LI....
And finally, the PRE Tag should not contain a FONT Tag, even if the former is a Block Element and the latter an Inline one....

If you run into this kind of syntax mistakes, Browsers display your content without any problem, but an HTML Validator (Lesson 29) would not forgive incorrectnesses of this nature.
If you are serious about understanding in full these issues, you should download the HTML 4.01 Recommendations from the W3C Web Site... tough stuff, however, let me warn you.

Obviously. while we go along with this course, I will give you the most important tips and guidelines you should know about. OKKKKKK ??

Hopefully I did not depress you too much - take it with philosophy, "c'est la vie" !

Back to our lists. Now let me cheer you up a bit. Look at those dots before each item of an Unordered List.
Do you like them ? Would you like to change them into something different ?
No problem. HTML has many powerful resources.

how to improve unordered lists

You may change the "default" solid dot (called "disc") into a "circle" or a "square" by using the Attribute TYPE in the <UL> Opening Tag.

This Attribute has three available "Settings":
TYPE="disc" (default)
TYPE="circle"
TYPE="square"

So, the original Unordered List that we built may become:

<BODY BGCOLOR="#FFFFFF">
I must buy:
<UL TYPE="circle">
<LI>Bread
<LI>Butter
<LI>Lettuce
<LI>Meat
<LI>Toothpaste
</UL>
</BODY>

and the items in the List will be "bulleted" with circles like this:

whereas, with a "square" setting, you will obtain this:

Well, that's all for Unordered Lists, at least for the time being.

Guess what ? I suddenly remembered it is Exercise Time !!!!! - so, try to fiddle around with

Exercise 06

and construct a Web Page similar to the following one:

Solution in the next Lesson.
As you can see, while we progress I try to make you practice with other past topics and concepts, so that you won't lose touch, heh, heh, heh...

Now let's look at

ordered lists

An ORDERED LIST (List of items with "Priorities" attached) looks as follows:

Things to do today:

Go to work
Attend meeting with Boss
Train new employee
Go to Site
Go to Supplier X
Go to pub, relax and forget this blooming day

The necessary TAGS are:
<OL> as a STARTING TAG
</OL> as a CLOSING TAG

and the usual <LI> Tag before each list item.
The function of the <LI> Tag is different for Ordered and Unordered Lists: for Unordered Lists it "bullets" the List Items - for Ordered Lists it "numbers" the List Items.
Example:

<BODY BGCOLOR="#FFFFFF">
Things to do today:
<OL>
<LI> Go to work
<LI> Attend meeting with Boss
<LI> Train new employee
<LI> Go to Site
<LI> Go to Supplier X
<LI> Go to Pub, relax and forget this blooming day
</OL>
</BODY>

This will be displayed by your Browser like this:

As you can see, item numbering is done automatically by your Browser.
Obviously, if you are very depressed, you can increase the level of your frustration by inserting different Font styles and physical style Tags also in your Ordered Lists - just remember what I said above about Block Elements and Inline Elements......

how to improve ordered lists

By intervening on the counting style of the Ordered List.

In the <OL> Opening Tag use the Attributes TYPE and, if necessary, START. Let's see TYPE:

TYPE="1" is the default setting, which will render default numbers (1, 2, 3, etc.)
TYPE="A" will render the list with capital letters (A, B, C, etc.)
TYPE="a" will render the list with lower case letters (a, b, c, etc.)
TYPE="I" will render the list with Large Roman Numerals (I, II, III, etc.)
TYPE="i" will render the list with small roman numerals (i, ii, iii, etc.)

As far as the Attribute START is concerned
START="3" will make your ordered list count starting with 3 (C,c,III,iii) instead of 1 (A,a,I,i)

If you are a fanatic of these techniques, or, perhaps, you need them for your professional Web Pages, see these examples of ordered lists, and then their HTML codes.

Wow, are you happy ?
I realise that "forcing" a FONT Tag outside LI items obtains better results than what you have seen - you may do so, and Browsers will give you a lot of satisfaction, but an HTML Validator will tap you on your fingers - the choice is yours.....

I had so much fun making all these gadgets that I think I am going to feed you some more little tricks.

nested lists

Both Ordered and Unordered Lists can be "nested", like to say you can have a List inside another List (inside another List, and so on....).
Is this very important ? Not so important, but one day you may need this stuff, so let me tell you about it - if you think you will never need such a beauty, just skip this subject and we shall be friends again.

How do you nest Lists ? Simply by placing a new List in the desired spot of the "container" List.

Example:

will get you this:

How are you feeling ?

In conclusion, Unordered Lists can be used for Hotlists, to display Menus, to organise and highlight points of a presentation, etc.

Ordered Lists can be used to organise Tables of Content, Indices, and sequential sections of text.

Finally,

definition lists

Browsers can organise nicely another type of List called Definition List.
Definition Lists can be used, for instance, for Glossaries and to organise and format text in a rational way.

A Definition List is contained between the two Tags <DL> </DL>. They are the container of the Definition List.
What is needed within is a number of Definition List Term Standalone Tags <DT>, each followed by another Standalone Tag <DD> (Definition List Data).

An example will clarify everything. This code:

<BODY>
<H3 ALIGN="center"> USEFUL INTERNET DEFINITIONS </H3>
<DL>
<DT> Cyberspace 
<DD> The cyberspace is very big, very dark and very far. It is populated by a lot of cyber robots crawling around in the black space. Cyberspace is very frightening..... 
<DT> Bandwidth 
<DD> Is the width of the band when all musicians are aligned in a row across the street and play their instruments while walking. Sometimes the road is rather narrow and musicians must lay themselves out in two or more rows...
</DL></BODY>

will be displayed by the Browser like this:

REMARKS:

The <DL> serves the only purpose of containing <DT> and <DD> pairs of Tags, in any number you wish.
Text following the <DT> Tag is simply aligned left.
Text following the <DD> Tag is indented. Indentation depends on Browser type and version.
The <DT> Tag may not be present. There will still be an indentation effect on text following <DD> Tags.
The length of text following a <DT> Tag should be limited to just a few short words. The Browser allocates a certain horizontal space to that text. If that space is exceeded text might wrap and create a new line. That's why Definition Lists are mainly used for Glossaries.
Within <DT> and <DD> Tags you may use most formatting Tags like , , ,  , etc. It is up to you to mess your life up as much as you want.
Don't forget that the three Definition List Tags (DL - DT - DD) are Block Elements - be careful how you associate Inline Tags with them.......

Now I am exhausted. That's all for Lists.

You may notice how generous I can be: in this Lesson I have given you only 1 Exercise !
This is because I am confident you will be doing your own experimenting on the topics we have been discussing so far.

See you soon, Salutations !!!

Lesson 04

shut-down this lesson !

Lesson 06

Plan of Lessons

welcome	Module 1 - Lesson:	01	02	03	04	05	06	07	08	09	10
	Module 2 - Lesson:	11	12	13	14	15	16	17	18	19	20
	Module 3 - Lesson:	21	22	23	24	25	26	27	28	29	30

http://www.scodanibbio.com/webbuild

go to the top of this page

A simple Copyright statement:
You are granted a nontransferable, personal license to use this Course on one computer station.
You do not become the owner of the Course nor do you have the right to copy (electronically or by any other means), transfer to third parties, or alter any part, code or content of this Course.