HOW TO BUILD A PROFESSIONAL WEB SITE     Rel. 1.1

LESSON 04

by Carlo Scodanibbio

I know what you are looking for !
The solutions of last Lesson's Exercises !
No problem, here they are: Exercise 02 solution is here, and Exercise 03 solution is here. Voilá !
How did you do ??

more about text - formatting text

Now just "refresh" your Browser. This is what you get:

Hoh! Hoh! What's wrong with your Browser ?
Nothing wrong. Browsers do not recognise formatting. Unless you instruct it otherwise, the Browser just displays all your text in a steadily flowing stream. The Browser won't recognise more than 1 space. The Browser does not know when you want to start a new line. Nor does it know that you want to start new paragraphs. Unless you instruct it. This might seem pretty stupid.... In fact, it's better to have it this way. It gives you total control over the document's appearance.

If you want to start a new line you have to use a LINE BREAK.
If you want to start a new paragraph you must use a PARAGRAPH TAG.
And if you want more than one empty space in a line you must use the SPACE CODE.

The "STANDALONE" (does not require a CLOSING TAG, under the HTML 4.0 Standard) TAG for a LINE BREAK is <BR>

<BR> simply instructs the Browser to start a new line.

The TAG for a PARAGRAPH is <P>
<P> instructs the Browser to start a new Paragraph (starts a new line, then skips a line).
The PARAGRAPH Tag may be used in STANDALONE mode or with a corresponding Closing Tag </P>.
Normally, to obtain "vertical spacing", only the Opening Tag <P> is used by most Web Designers, except in certain cases which I will discuss later in another lesson.

The Special SPACE CODE for one space is : &nbsp;
This is a "Special Character" (more on Special Characters below).
A Special Character always starts with the & (ampersand) sign and ends with a ; (semicolon).

So, the Special code for 8 spaces like in our example will be : &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

In conclusion the right way of writing the previous sentence is :

which will result in this:

Please note the following:

• You may use as many LINE BREAK TAGS as you wish: the first will start a new line, and each additional one will skip a line - Example: <BR><BR><BR><BR><BR> will start a new line after skipping 4 blank lines.
  
  Tags may be spaced, with no difference in the effect :

  <BR><BR> <BR>
  <BR>
  
  <BR>

• But you may use the PARAGRAPH TAG once only - adding more <P> one after the other will produce no effect.
  For instance, <P><P><P><P> will just create a new paragraph.
• The right and best way, however, of creating "vertical" space is by using the <BR> and <P> Tags in combination, like this:

  <BR><P> <BR><P>
  <BR><P>
  <BR><P>

  This will create 4 lines of vertical space between preceding and following text.
  The vertical spacing will be proportional to the FONT SIZE of the "preceding" text (if there was a FONT Tag "not closed" yet - alternatively it will correspond to the standard vertical spacing of SIZE 3, default text).

• If you use more than one SPACE CODE, they should be contiguous - if they are spaced, the effect will be different (extra spaces added - test it by yourself).

And now, how about some exercising ? I am sure you were longing for it......

Exercise 04

Not too difficult, heh, heh....
Now, let me say something about Exercises: from now on you should try to make your Exercises "similar" to those I am proposing. This means:

• With an approximately similar background colour (it may be very difficult to guess which colour I am using....)
• Same story for Font colours
• With approximately similar Fonts sizes - here again it might be difficult to guess what sizes I am using and, moreover, the Exercises Images in my Lessons are somehow smaller than what they should be, in order not to occupy too much space on the screen....

about special characters

There are five very important special characters :

So the HTML standard makes allowance for entering many different characters, including the so called ASCII characters, within your text, through special encoding of each character entity.
There are two codes allowed for special characters in the HTML language:

• The one you have just seen, starting with the & sign, followed by the special character abbreviated name, and ending with a semicolon (Named Entity).
• Or a similar sequence, comprising the & sign, the # (hash, or pound or sharp) sign, the character's position number in the ASCII Table of Characters (instead of the abbreviated name), also ending with a semicolon (Numerical Entity).
• NB: Special Characters should always be lower case.

In both the above coding methods, the & of a Special Character simply tells the Browser we are inserting a SPECIAL CHARACTER in the textual content - the semicolon means we are ending a SPECIAL CHARACTER - whatever is in between is a code that, hopefully, all Browsers will understand.
Hopefully because, in spite of all Standards, the behaviour of the various available Browsers in their various versions is not always predictable - besides, special characters may or may not be displayed depending on user's platform (computer, operating system, etc.) and user's selected font for display.

TIP
Here is another way of making multiple blank lines using the NON BREAKING SPACE Special Character:
<BR>&nbsp;<BR>
A sequence of these notations will create multiple blank lines (but do some experiments yourself).

A comprehensive List of all CHARACTER Entities is here.

other text manipulating tools - text alignment

We have already seen the Tag <CENTER> to centre text.
Now, what about aligning text to the right of the Browser Window ?
There are two ways (so far....).

The one way is to utilise the DIVISION Tag <DIV>.
This Tag is a "Container Tag", used to "contain" stuff such as Text, Images and other. Its function, besides containing something, is also to "position" it somewhere in the Browser Window through the ATTRIBUTE ALIGN that can be set at:

• LEFT (the "default") - aligns the content of the DIV Tag to the left
• CENTER - aligns the content of the DIV Tag to the centre
• RIGHT - aligns the content of the DIV Tag to the right

<BODY>
<DIV>Hello baby !!</DIV>
<BR><P>
<DIV ALIGN="left">Good morning to you</DIV>
<BR><P>
<DIV ALIGN="center"><B>What is your name ?</B></DIV>
<BR><P>
<DIV ALIGN="right"><FONT SIZE="4" COLOR="#9900CC">
How about movies tonight ?</FONT></DIV>
</BODY>

This code will be displayed like this:

REMARKS:

• If no Attribute is inserted in the DIV Tag, content (text in this case) is "by default" aligned left. The same would be if the Attribute ALIGN is inserted and set at "left".
• The function of the ALIGN="center" and ALIGN="right" settings is to accomplish what appears very intuitive: text is aligned, respectively, "centred" and "right" in the Browser Window.
• Note there is always some "padding" between text aligned right and Browser Window right edge.
• You may use many other Text Formatting tools inside a DIV Tag, like for instance the FONT, B, I, etc. Tags.

Another way of aligning text is through the use of the (already seen) Paragraph P Tag and its Attribute ALIGN.
Something I did not tell you earlier, in fact, is that the P Tag accepts several Attributes including the ALIGN one.

The syntax is identical to that of the DIV Tag so I am not going to repeat it but just give you an example:

<BODY>
<P>Hello pussy cat !
<P ALIGN="left">How is life pussy cat ?</P>
<P ALIGN="center"><I>Did you catch any mouse today ?</I></P>
<P ALIGN="right"><FONT FACE="verdana, arial" SIZE="3" COLOR="#990033">Would like some prawns for supper ?</FONT>
</BODY>

The above code will result in this:

REMARKS:

• The effect of P (with no ALIGN Attribute) and P ALIGN="left" is identical: text gets aligned to the left.
• The Tag P may or may not be closed (as already said): the effect, however, is not identical.
  You will discover soon that it is always better to close the P Tag, except when you use it for "vertical spacing".
  If you don't, you risk to "carry over" its effect (for instance an alignment effect) to subsequent text......
• Within the P Tag you may use other text formatting Tag, like FONT, B, I, etc.

other text manipulating tools - headings

There are 6 levels of Headings in the HTML Standard, and they are obtained through the use of 6 different pairs of Tags:
<H1></H1>
<H2></H2>
<H3></H3>
<H4></H4>
<H5></H5>
<H6></H6>

Text contained in a pair of Heading Tags gets displayed by Browsers in very large (H1, H2..) to very small (H5, H6) font size, without using the FONT Tag at all.
Normally, the text inside a H4 Heading gets displayed as ordinary size text (size 3).
The FACE used is normally the default FONT (Times New Roman).
The default text colour is normally black.
Some browsers display contained text in boldface.
Each version of each Browser has its own way of rendering text within Headings: the difference, however, is not excessive.

Some examples will give you a better perspective on the subject:

<BODY BGCOLOR="#FFFF99">
<H1>Welcome to Rapounzel's Web Site</H1>
Blah, blah, blah, etc. etc.
<H2>Welcome to Rapounzel's Web Site</H2>
Blah, blah, blah, etc. etc.
<H3>Welcome to Rapounzel's Web Site</H3>
Blah, blah, blah, etc. etc.
<H4>Welcome to Rapounzel's Web Site</H4>
Blah, blah, blah, etc. etc.
<H5>Welcome to Rapounzel's Web Site</H5>
Blah, blah, blah, etc. etc.
<H6>Welcome to Rapounzel's Web Site</H6>
Blah, blah, blah, etc. etc.
</BODY>

This is what the Browser displays:

Rather self-explanatory, I suppose: you may easily see the difference between ordinary (default) text and text contained within the 6 Headings.

Obviously you may beautify your Heading Text using the FONT Tag to specify a different FACE than Times New Roman and a different COLOR from black. This is shown in the example that follows.
However, I cannot guarantee that all versions of all Browsers will respect the change imposed by a FONT Tag to the H built-in style.
You can definitely use, within Headings, other style Tags such as I, U, CENTER, etc.
But there is another interesting feature associated to Heading Tags: all the 6 of them accept the Attribute ALIGN, with a syntax identical to DIV and P. Therefore you may use the H Tags also to align your text conveniently. Also this aspect is shown in the following example:

<BODY BGCOLOR="#99CC66">
<H2 ALIGN="center"> <FONT FACE="courier new, times new roman" COLOR="#660033">this is the most fascinating <BR>page on the web</FONT></H2>
<BR><P>
<H3 ALIGN="right"><B><I><U>in fact you will discover that the most incredible <BR>mysteries of the universe are fully explained in my page
<BR>keep on reading blah blah blah etc. etc.</U></I></B></H3>
</BODY>

MS Internet Explorer will display the above code as follows:

All right with Headings ?

other text manipulating tools - blockquote

What it does: it pulls margins in from both sides of the Browser window. Example:

<BODY BGCOLOR="#000000">
<CENTER><FONT FACE="Times New Roman" SIZE="4" COLOR="#FFCC00">
OUR COMPANY's MISSION </FONT></CENTER>
<BLOCKQUOTE>
<FONT FACE="Times New Roman" SIZE="4" COLOR="#FFCC00">
Our Company is strongly committed to Clients, to Employees, to the Community and to the Environment. Quality is not our target, Quality is only our tool: our target is Excellence. Blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, etc. etc.
</FONT></BLOCKQUOTE>
</BODY>

This will be rendered by the Browser as follows:

BLOCKQUOTE is a very handy Tag: remember it !
And, once again, please note how the FONT Tag has been used in the example above: within the CENTER Tag, as well as within the BLOCKQUOTE Tag.

other formatting tools : preformatting

<BODY BGCOLOR="#FFFFFF">

 x | o | x
- - - - - - -
 o | x | o
- - - - - - -
 x | o | x

would be displayed by the Browser as a continuously flowing string of text like this:

x | o | x - - - - - - - o | x | o - - - - - - - x | o | x

But with the <PRE> PREFORMAT Tag and, generally, on condition that a TT type of Font is used, it is possible to transform the Browser into a more human and friendly tool, and make it display our stuff the way we type it. For instance, this code:

would be displayed by the majority of Browsers like this:

and this code:

would be rendered like this:

REMARKS:

• You may notice that in both cases I have "forced" a monospaced font (Tag TT), but in the one case outside the PRE Tag and in the other case inside. Obviously, in both cases I have respected the nesting rule.
  Now, which fashion is the correct one ?
  According to the HTML Standard the right way is to have your PRE Tag outerly, containing the TT Tag (which is then innerly) - like in the last example.
  Browsers display well your work irrespective of the correct relative positioning of the 2 Tags.
  With most recent Browsers you don't even need to use the TT Tag at all: when you insert a PRE Tag modern Browsers will force automatically the use of a monospaced font.
• In any case, the use of the PRE Tag is a delicate issue. I do not recommend its use at all, especially if you had in mind to get rid of the classic formatting tools (BR, P and &nbsp;). DON'T DO THAT !!!!
• However its use (with some risk) is necessary in certain cases. I may mention two:
  1 - the one case is for displaying textual works of modern art (like the little face in the second example above) - in fact there are Web Sites that have become popular because they publish collections of these computerised masterpieces
  2 - the other case is to display programming language scripts, like for instance JavaScripts: being space sensitive, they must be displayed as they are typed. Doing it with formatting tags like BR and P and &nbsp; would be a pain in the neck. So the PRE Tag is just ideal.
  An example of (part of) a JavaScript is below, rendered as it should through a pair of PRE Tags.

if(!window.JSFX)
	JSFX=new Object();
if(!JSFX.Browser)
	JSFX.Browser = new Object();

JSFX.Browser.mouseX = 0;
JSFX.Browser.mouseY = 0;

if(navigator.appName.indexOf("Netscape") != -1)
{
	JSFX.Browser.captureMouseXY = function (evnt) 
	{
		JSFX.Browser.mouseX=evnt.pageX;
		JSFX.Browser.mouseY=evnt.pageY;
	}

Huh, huh, heavy stuff this.....

And this is all for the PRE Tag.

And now

other formatting tools : the horizontal rule

Example:

<BODY BGCOLOR="#CCFF00">
Blabla bla bla Blabla bla bla Blabla bla bla Blabla bla bla Blabla bla bla Blabla bla bla Blabla bla bla Blabla bla bla Blabla bla bla Blabla bla bla Blabla bla bla Blabla bla bla Blabla bla bla Blabla bla bla Blabla bla bla Blabla bla bla Blabla bla bla Blabla bla bla Blabla bla bla Blabla bla bla <HR>
Buh bu buhh bubuh buh bubuh bubuh Bubububh Buh bu buhh bubuh buh bubuh bubuh Bubububh Buh bu buhh bubuh buh bubuh bubuh Bubububh Buh bu buhh bubuh buh bubuh bubuh Bubububh etc. etc. etc.
</BODY>

The Browser will display this:

TIP
Horizontal Rules are made with pure HTML Code, which is nothing else than ASCII text, extremely low in Kb consumption.
Use Horizontal Rules instead of graphic Lines if you can: your Web Pages will download faster !

You may increase the vertical spacing between the upper and/or the lower text and the Horizontal Rule by introducing LINE BREAKS and PARAGRAPHS Tags in combination before and/or after the HR Tag. Test it by yourself.

With suitable ATTRIBUTES in the HR Tag we can control:

• The Width of the HR through the Attribute WIDTH. This Attribute can have two types of settings. You may set it either in pixels ("absolute" setting) or in % of the available Browser window width ("relative" setting). In this last case the default value is100%. This issue requires a very important clarification which I am going to give you after the first examples.
• The Alignment of the HR through the Attribute ALIGN, which can be set at LEFT or CENTRE (default) or RIGHT.
• The Thickness of the HR through the Attribute SIZE, which, by default, is 2 (pixels). Also this issue requires some clarification, which I am going to give you after the examples below.
• And we can make the HR a solid line (instead of a "shaded" line) with the Attribute NOSHADE, which stands alone and requires no setting. By default (i.e. if you do not insert the NOSHADE Attribute) a HR is "shaded".

Some examples will clarify the issue. Look at this code:

<BODY BGCOLOR="#FF00FF">
<HR WIDTH="20">
<HR WIDTH="100">
<HR WIDTH="250">
<HR WIDTH="30%">
<HR WIDTH="60%">
<HR WIDTH="100%">
</BODY>

This is what your Browser will display:

COMMENTS AND CLARIFICATIONS:

• Firstly, note the "settings" of the WIDTH Attribute, all made through the equals sign and quotation marks to enclose the value.

• Now, look at the first HR starting from the top. Its width has been set at 20 pixels. That means 20 elementary "dots" in the matrix of your screen. If you are familiar with these matters, just go ahead, otherwise it might be worthwhile for you to read this quick tutorial on "screen resolutions" and related issues (Enclosure 10).

  This 20 pixels setting is "absolute", in other words the width of this HR is "solid" - 20 pixels in width will remain 20 pixels for everybody's screen, all over the world.
  BUT, the "real" width in cm. or inches of this HR will vary depending on the "screen resolution" of your visitor. Lower screen resolutions will display this HR "wider" than higher screen resolutions. This applies to the second and third HR as well, since they are set at an "absolute" width. Their 100 and, respectively, 250 pixels will be the same number of pixels in everybody's screen, but their real width, again, will vary according to screen resolution. This is well understandable: a 14" screen working at a screen resolution of 640 x 480 contains less pixels, both horizontally and vertically, than a 14" screen working at 800 x 600 screen resolution. Therefore any "object" of a certain dimension in pixels will look bigger in the first screen than in the second one, simply because the size of a pixel in a 640 x 480 screen is "bigger" than the size of a pixel in a 800 x 600 screen of the same dimension in inches. Voilá. If you feel confused, just imagine how I feel after giving this long explanation... huh, huh.

• Now look at HR 4, 5 and 6 from the top. Their setting is "relative", which means "in percentage of the available Browser Window Width". The last Image above, displaying the 6 HR, is exactly 454 pixels wide (that's the width I decided to give it). If you take away about 6 pixels for the left Window margin and about 20 for the right one (which includes the scrolling bar), you are left with an "available Browser Window Width" of approximately 428 pixels. So the 4th HR from the top, having a width of 30% of the available Window Width, is being displayed like if it was a HR of about 128 pixels in width. In fact, you may see that its real width is slightly bigger than the width of HR number 2 (from the top) which was set at an absolute value of 100 pixels. In conclusion, "it makes sense". You can see how "clever" a Browser is, and how accurate its maths is !! But, be careful: all I am saying is true at the screen resolution I am using now, which is 800 x 600. Things might be rather different at different screen resolutions.

• Now look at the bottom HR (the 6th from the top). Its relative setting is 100% of the available Browser Window Width. It is equivalent to a HR in which the WIDTH Attribute is not used. Now you will ask: why is this HR less, in width, than the Browser Window Width ? In other words, why does it not reach both the left and right margins of the Browser Window ? Well, this is because it would not look nice at all ! So, each Browser introduces a bit of padding, both left and right, instead of squashing the poor HR against the margins. How big is this padding ? It depends on Browser model and version. For Explorer 5.5 this padding (or spacing) is about 10 pixels, but it might be slightly different in a different Browser or Version of Explorer. In conclusion, this must be taken into account if you need to design a Page very accurately: testing and checking how a Page is displayed by different Browsers/Versions would be very beneficial (as I said already). Besides, with some experience you will learn these tricks by heart, so do not feel depressed now.....

Here you can see that the first 3 HR maintain the same width because of their absolute setting, while the last 3 are becoming narrower, but still proportional to the Browser Window Width.

The phenomenon is even more evident in the above Window.

Now the Window is so narrow that it cannot contain the full "solid" HR number 3 (from the top) with absolute setting: so the poor Browser does its best to still display it, but it must insert horizontal scrolling bars (which occupy some vertical space, so that, as a consequence, also vertical scrolling bars are inserted).
Yet, the last 3 HR (those with % settings) keep resizing proportionally to the Browser Window Width.

Things are really extreme here (in fact nobody will browse the Net at such a Browser Window Width, but I just want to show you the Browser mechanism....): the second and third HR (solid) cause the presence of scrolling bars while the 3 bottom HR keep resizing according to Window Width....

Obviously there is something to learn from this little game.
If you often surf the Net, I am sure you have come across several Web Sites that are a pain in the neck. Why ? Because, even at full screen Browser Window, you need to scroll left and right to see their content (be it text or images, or whatever else). Well, those Web Sites have not been designed very professionally.
The simple golden rule is: if you love your Web Site Visitors, make sure you won't give them any trouble of this sort (horizontal scrolling bars), because it is really annoying. A visitor that has to scroll left and right to visit a Web Site will very soon become very frustrated and surf away elsewhere !

So the professional Web Designer always tries to ensure that his or her Pages display well under any circumstance (read: under the most popular screen resolutions) with any Browser.
That's why I wanted you to play with Window resizing: this is a little trick you will have to use often to test your Pages - in fact I will come back to this point several times in this course.

By the way, the majority of those "pain in the neck" Web Sites have been made - guess how ? - with those famous wizards like MS Frontpage !
I have nothing against those Wizards, but this is what they may cause. You want to know why ? Simply because they "design" HTML code according to the Designer Computer settings, but ignoring completely Visitors and their Computers... Hoh, hoh, now you should start understanding things.
In conclusion, the Professional Web Designer may use those Wizards - but he or she should also know how to correct their likely deficiencies. For this, he or she needs to know HTML !!

Back to Horizontal Rules.
From what I said above, you may easily imagine how easy it would be to make a mistake with them.
Say you are designing your Page using a screen resolution of 800 x 600. You want to subdivide two strings of text with an HR, and you insert an HR 700 pixels wide (SIZE="700"). Which will display very nicely in your Browser at full screen Window (in fact even a 750 pixels HR won't cause horizontal scrolling bars).
But now think of your visitors: there are guys out there still browsing the Net with a screen resolution of 640 x 480. What will happen to them ? Even at full screen Browser Window they will get scrolling bars, and they will hate you !!!! Besides, also people having screen resolutions of 800 x 600 sometimes do not keep their Browser Window at full screen. So they might also get scrolling bars.

You might conclude that the only good method to adopt is that of the relative setting, with % instead of pixels....
NO, I am not saying that. In fact you might find absolute settings very useful sometimes (example: if you want HR between two images one on top of the other, and you want the HR to be exactly as wide as the image !).
What I am saying loud is that you should always design keeping in mind your visitors, and not your screen: resizing your Browser Window will make you understand the consequences of your choices, and sometimes you will have no choice at all ! Still, you will design knowing exactly what will happen to your Pages in certain circumstances, and you will be very alert, like a professional Web Designer should always be.

Wow, I am really exhausted, after this long speech, and I will say no more mainly because I will grab again this subject later on in this course.

Other examples of Horizontal Rules in action.

<BODY BGCOLOR="#FFFFCC">
<HR WIDTH="150" ALIGN="LEFT">
<HR WIDTH="150" ALIGN="RIGHT">
<HR WIDTH="150" ALIGN="CENTER">
<P>
<HR WIDTH="200" SIZE="1">
<HR WIDTH="200" SIZE="3">
<HR WIDTH="200" SIZE="8">
<HR WIDTH="200" SIZE="15">
<P>
<HR WIDTH="80%" SIZE="1" NOSHADE>
<HR WIDTH="80%" SIZE="3" NOSHADE>
<HR WIDTH="80%" SIZE="8" NOSHADE>
<HR WIDTH="80%" SIZE="15" NOSHADE>
</BODY>

The above code will be displayed like this:

Rather self-explanatory, I suppose, but still let's make some comments.

• HR numbers 1, 2 and 3 (from the top) are aligned, respectively, left, right and center with the Attribute ALIGN. Note the usual padding inserted by the Browser in the ALIGN="LEFT" and the ALIGN="RIGHT" cases.
  Each HR is 2 pixels thick (the default SIZE).
• HR numbers 4, 5, 6 and 7 (from the top) have been given a SIZE.
  Note HR number 4 which has been forced to be thinner than the default 2 pixels, thus has no shade, while the others have a shaded effect (as if the screen was floodlighted from the top left corner....).
• HR numbers 8, 9, 10 and 11 have been made "solid" through the use of the "standalone" Attribute NOSHADE.
• All HR are grey in colour, but the "box" of the thick HR (n. 5, 6 and 7) has the same background colour as the Body.
• Different Browsers (and also different versions of the same Browser) may display HR slightly differently. For instance, Netscape 4.0 renders the same code slightly differently, as follows:

Are you feeling OK ?
I am sure you will feel better and better while we progress. Heh, heh...
In the meantime, I am certain you need a quick Exercise to recover from all the theory above. OK ?

Exercise 05

The solutions of this Lesson's Exercises are, as usual, in the next Lesson.

Saludos muchos !!!

Lesson 03

shut-down this lesson !

Lesson 05