HOW TO BUILD A PROFESSIONAL WEB SITE Rel. 1.1

LESSON 03

by Carlo Scodanibbio

Hi !
First of all, a promise is a promise: the correct Solution of Exercise 01 is here, have a look at it.

And now we can start with this Lesson.

text and fonts

According to "guru" Jacob Nielsen, today's Web Sites must be "useful" and, most of all, "usable". You may wish to read Mr Nielsen's points of view at http://www.useit.com.
"Usability" and "Usefulness" are obtained mostly through the intelligent use of Text - this will become more evident in the 3rd Module of this Course. So it is very important to know how to manipulate text and fonts.

Unless you specify otherwise, normally your Browser by "default" (font default setting) will display plain text contained within your HTML code as "Times New Roman" - Size 3 (12 points) - colour: black.
The text of this lesson, for instance, is being now displayed with the Font Times New Roman, black, size 3.
Likewise all text you have so far introduced within the BODY of your "testpage" has been rendered by your Browser as Times New Roman, black, size 3 - unless you have changed the Text Size option in your Browser.

Let me explain better. First, Sizes.
In the HTML language there are 7 sizes available for each Font, numbered 1 to 7. They look something like the following:

smallest	small	medium	extra medium	large	very large	largest !
Size 1	Size 2	Size 3	Size 4	Size 5	Size 6	Size 7

As already said, Size 3 in Browserese language corresponds (approximately) to 12 points in Word Processor language.

And now, Fonts.
There are millions of Fonts to choose from. These below are just some examples:

It is possible to change the Font Default Setting instructing a Browser to display, rather than Times New Roman - black - size 3, any other Font of another size and of another colour. But, there is a but - I will tell you about it further down.

To use a different Font, and/or a different Size, and/or a different Colour, the new TAG to be used is . The text to be rendered in a different style is positioned between the  opening Tag and the  closing Tag

The FONT Tag takes three ATTRIBUTES:
FACE to specify the Font type
SIZE to specify the Font size
COLOR to specify the Font colour (note the American spelling: COLOR, not COLOUR)

You may specify only one ATTRIBUTE in a TAG, a few, or all of them, always separated by a space. For instance, if you wish your text to be displayed in Arial, size 5 and red, you will need this code:

<BODY BGCOLOR="#FFFFFF">
A different Web Page !!! 
</BODY>

The resulting Page will look like this:

Better, don't you think so ?
A few comments:

In the BODY Tag the BGCOLOR Attribute is introduced to assure that the Page Background will be white for any Browser and any Browser version.
Note the Tags nesting: the pair of FONT Tags are "within" the pair of BODY Tags. This is nesting.
Tags, like the FONT Tag, may accept one or more Attributes. Attributes sequence makes no difference: so you might have the sequence SIZE-COLOR-FACE or the sequence FACE-SIZE-COLOR or whatever else
Not all the accepted Attributes must necessarily be inserted: for instance, if in the FONT Tag you do not insert the FACE Attribute the Browser will automatically (by default) display text in Times New Roman - and if you don't insert the COLOR Attribute, text will be black...
As usual, a Tag tells the Browser what to do (change Font style) and Attributes tell how to do it (which type, size and colour)
Note the "setting" of each Attribute: the = sign, the quotation marks, and the # sign before the colour code
Note that each Attribute and its setting must be separated with a space from the next Attribute
The TAG name should not be repeated for all the Attributes, even if Browsers tolerate it (for instance: will work just as fine) - firstly, you do extra, unnecessary work; secondly, you would not comply with the HTML Standard
TAGS and ATTRIBUTES may be written in capital letters, lower case, or combination. It is common practice (and a good rule, at least for the time being) to write TAGS and ATTRIBUTES in capital letters (so that you do not get lost in your own coding....)
Text will be displayed as it has been written, i.e. capital letters will be displayed as uppercase and lowercase as such

Another Remark.
When your HTML coding is rather long, like in this case, and/or your string of text is long, Notepad will automatically insert "horizontal scrolling bars" to allow you to see what you are writing. Like for instance:

Scrolling left and right might be a bit annoying, so there is a solution.
All you have to do is to set your Notepad for "auto-wrapping" - to get that, just go to Edit and choose Wordwrap (it must be "ticked"). When your string of text and HTML code is so long that it will hit the right wall of Notepad window, Notepad will just create a new line automatically: you will not get lost in what you are writing and I will have total peace of mind.......

And now: the BUT I was mentioning earlier.
You may choose any Font you have installed in your Computer, and your Browser will display your text in the selected font types, but remember: your visitors browsing through your pages will be able to see your fancy fonts only if they have them installed in their computers !
Alternatively, your visitor's Browser will make some quick calculations (very unpredictable) and display the Font that, to its browserese opinion, will be the closest to the one you have selected !
In conclusion, don't go crazy with fonts....... You will notice that the bulk of Web Pages text is displayed in one of the following Fonts:

Times New Roman
Arial or Helvetica (Helvetica is very similar to Arial)
Ms Sans Serif
Courier

The reason is that those Fonts are most definitely installed in practically all Computers in the world, including very old Computers having Windows 3.10 or 3.11 as Operating System.
So, the simple rule: stick to the above Fonts if you do not want to get surprises - what you need to achieve is total control over what any Browser of any version will display in any Computer !
Further down I will be more specific about the type of surprises you would otherwise get.

You may, however, use an HTML little trick to give more options to your Visitor's Browser, by setting the FACE Attribute in the FONT Tag to "more than one value", i.e. you may specify more than one Font, like in the example below:

<BODY BGCOLOR="#FFFFFF">
A different Web Page !!! 
</BODY>

TIP
If you specify multiple Fonts, test your work for ALL the Fonts you have set, one by one.
Make sure the last Font in the range is either Times New Roman, or Arial, or Helvetica, or Courier....

What will happen ? If your Visitor's Browser will find the "Impact" Font installed in the Visitor's Computer, then he will display your text in Impact style. If not, the Browser will look for the next alternative, which is "Comic". If available, your text will be displayed in Comic style. If not, etc.etc. Eventually, as last alternative, Arial will be utilised to display your text.
Please note the comma and one space between each different FACE value (between each Font style).
What is the advantage of specifying more than one FACE value ?
You have more control on what will happen in your visitor's computer. You may then design your page using the Impact Font, but you will also test it with Comic, and Verdana, and Arial, to make sure that your hard work will appear to everybody as intended to be, or, at least, it won't look too idiot.....
In conclusion, you minimise the risk that your Visitor's Browser will go for "any" Font, probably Times New Roman, uncontrolledly.

You might want to apply the FONT Tag only to part of your text, like this:

<BODY BGCOLOR="#FFFFFF">
This is a beautiful Web Page !!! 
</BODY>

which will result in this:

or like this:

<BODY BGCOLOR="#FFFFFF">
This is a beautiful Web Page !!! 
</BODY>

which will result in this:

Exciting, isn't it ?

REMARKS:
You may notice that every time there is a change in Font style I open and close the FONT Tag to take control of every change.
This is not always necessary. For instance, in the last example, I might have written my HTML code as follows, and it would have worked just fine:

<BODY BGCOLOR="#FFFFFF">
This is a beautiful Web Page !!! 
</BODY>

BUT, don't do it !!!!
The second FONT opening Tag "takes over" the Arial FACE from the first one, which normally is accepted by modern Browsers, but I cannot give you any guarantee it will work under any condition.
Moreover, the HTML closing syntax is wrong ! One  closing Tag for two  opening Tags is supported (or, better, "tolerated") by modern Browsers, but is not according to HTML standards.
Finally, such coding might not work at all inside a "Table" (Lesson on Tables coming up soon): both Netscape and Explorer might go completely berserk.....
So, always stick to the golden rule for the FONT Tag: always open it "in full" (with all necessary Attributes) and close it at each and every Font style change and you'll never go wrong !
After all it's just a matter of "copy and paste" for the FONT Code.....

Hoh, hoh, I was almost forgetting: it is Exercise Time !!!!.

EXERCISE 02

Try to make a Web Page that looks similar to this:

The solution is coming, as usual, with the next Lesson.

When I have some time, I enjoy playing with Tags and Attributes to make cute gadgets like the following:

h a s t a l a v i s t a, b a b y.....

or like this:

T E C H N I C O L O R

or like this:

r a i n b o w

Are you more impressed now ?
Test yourself, if you wish, practising on exercises like those above, then you may see the HTML codes here

Let's go ahead with this Lesson.

physical style tags

You may make your text (or part of it) BOLD.
The STARTING TAG is : 
The CLOSING TAG is : 
Whatever text is between the two Tags is rendered Bold.

For instance (I am changing Background and Font style in each of the following examples otherwise you get bored):

<BODY BGCOLOR="#FF00FF">

Some more text

</BODY>

Your Page will look something like this:

You may make text (or part of it) ITALIC.
The STARTING TAG is : 
The CLOSING TAG is : 

For instance:

<BODY BGCOLOR="#00FFFF">

Some italicised text.....

</BODY>

Your page will look something like this:

Or, you may make text (or part of it) UNDERLINED.
The STARTING TAG is : 
The CLOSING TAG is : 

For instance:

<BODY BGCOLOR="#CCCC00">

This text is underlined 

</BODY>

This is what comes out:

You may have your text rendered "~~STRIKE THROUGH~~"
Assuming you like this peculiar style (hardly found on the Web), what you need is:
<STRIKE> as Starting Tag
</STRIKE> as Closing Tag
or
<S> as Starting Tag
</S> as Closing Tag

For instance:

<BODY BGCOLOR="#00FFCC">

<S>Fancy strike through text </S>

</BODY>

This is what will be displayed:

You may CENTRE your text (or part of it) in the Browser window.
The STARTING TAG is : <CENTER>
The CLOSING TAG is : </CENTER>
Careful with the American spelling !!

For instance:

<BODY BGCOLOR="#0000CC">
<CENTER>

This is centred text

</CENTER>
</BODY>

which will result in this:

I guess you might have a question buzzing around in your mind: "...must the FONT Tag be contained within the CENTER tag, like in the example, or could it be vice-versa ?"
Well, the issue is simple, but it is too early to explain it in detail. Let me just tell you that Browsers could not care less for the way you position the two Tags, relative to one another - Browsers will still display well your content.
However, the right and correct way is to have your CENTER tag outerly and your FONT tag innerly: this will become clear in Lesson 5 and subsequent ones.
For the time being, just take it for granted..... c'est la vie !

Obviously you can use a combination of the above "Physical Style Tags" (as they are called) as you wish (but remember to position the CENTER Tag outermost and to respect the nesting rules....).

For instance:

<BODY BGCOLOR="#00CC00">
<CENTER>
A better Web Page !!! </CENTER>
</BODY>

which will be rendered like this:

Note: you can centre (or underline, make italic, etc.) a single letter, a single word, a sentence or part of it, or the whole Page.
Everything between the two CENTER Tags gets centred - any text between the pair of B Tags is rendered Bold - and so on - it's up to you to decide.....

For instance:

<BODY BGCOLOR="#00FFCC">
<CENTER>
A better Web Page !!!</CENTER>
</BODY>

will get you this:

REMARKS:
Do not forget TAG nesting, or you will totally confuse your Browser !
Example:

<TAG1><TAG2><TAG3> ............... </TAG3></TAG2></TAG1> is OK - but
<TAG1><TAG2><TAG3> ...............</TAG1></TAG2></TAG3> is not OK

A sometimes useful type of text effect is obtained through the "mono-spaced" Font, or TeleType Font (it is very similar to a Typewriter Font: each letter uses the same amount of horizontal screen space).
To obtain this Font there is a special
STARTING TAG : <TT> and
CLOSING TAG : </TT>

I will tell you at a later stage some possible uses for the TT Tag.
Now an example:

which will display like this:

Too small ? You can Insert the TT Tags within a FONT Tag using the Attribute SIZE:

<BODY BGCOLOR="#FFFF00">
<CENTER><TT> Bigger Tele Type Text </TT></CENTER>
</BODY>

And this is what the Browser displays:

Please note, once again, that the CENTER Tag may contain the TT tag, NOT vice-versa.
The FONT Tag may contain the TT Tag AND vice-versa.
This will become clear in Lesson 05.....

Well. well, well, let's make the point: now you know how to manipulate text, fonts, sizes, colours, etc. - which is quite a lot in such a short time, isn't it ?
I strongly believe time is ripe for another Exercise.

EXERCISE 03

Build a Web Page that looks like the following one (Achtung ! The sentence "Oh, Boy !!!" is NOT fully underlined, heh, heh...):

The solution is in the next Lesson.

Hard enough for you ?
Well, I told you it would have been hard, at least in the beginning.
But, don't feel depressed, now I am going to give you some good news.

Firstly, all this HTML Code writing will soon be done by a very nice "slave" on your behalf. It is a very disciplined slave "if you know how to control it". Now it is still too early to use it. I want you to do some hard work, which you will find in the end very beneficial. But in a couple of lessons I will provide you with a beautiful tool that will do the coding for you ("but not the thinking".....)
Then, cherry on the cake, just do a little experiment. Log onto the Net, go to any Web Page, and then right-click on a Body area of the Page in which there are no images (for instance you may right click on a background area, or on some text). A menu will appear. Select "View Source", like this:

Alternatively go to View and select Page Source, like this:

Guess what ?
The HTML code of that page will appear !: Explorer will present it as a Notepad text document - Netscape will present it in a Source Window, again as pure text.
What is so exciting about this ? You have the possibility of seeing the code of all Web pages published on the Net (well, almost all - some author hides the code through some JavaScripting - I cannot understand what is so secret about it....). So you can improve your HTML knowledge and abilities by watching what other good Web Designers do ! This is a very valuable flow of know-how for the Professional Web Designer: by looking at the way HTML code is used you will soon understand every secret of the Net ! I will come back to this point later. In the meantime, you may also have a look at the HTML code I am using to display this Lesson: do what I just revealed and you will soon know a lot of my little secrets.....
Obviously, a lot of the coding will look to you as pure Birzebuggikistanese language now, but it will become more and more clear with time....

Ciao, ciao, ciao, see you soon !!!

Lesson 02

shut-down this lesson !

Lesson 04

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.