HOW TO BUILD A PROFESSIONAL WEB SITE Rel. 1.1

LESSON 04 - Chapter j

by Carlo Scodanibbio

home

enrol

Lessons

welcome
1 - chapter a
1 - chapter b
1 - chapter c
1 - chapter d
1 - chapter e
1 - chapter f
1 - chapter g
1 - chapter h
1 - chapter i
1 - chapter j
1 - chapter k
2 - chapter a
2 - chapter b
2 - chapter c
2 - chapter d
2 - chapter e
2 - chapter f
2 - chapter g
2 - chapter h
3 - chapter a
3 - chapter b
3 - chapter c
3 - chapter d
3 - chapter e
3 - chapter f
3 - chapter g
3 - chapter h
4 - chapter a
4 - chapter b
4 - chapter c
4 - chapter d
4 - chapter e
4 - chapter f
4 - chapter g
4 - chapter h
4 - chapter i
4 - chapter j
4 - chapter k
5 - chapter a
5 - chapter b
5 - chapter c
5 - chapter d
5 - chapter e
5 - chapter f
5 - chapter g
6 - chapter a

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.

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:

shut-down this HTML story !

http://webbuildcourse.tripod.com

full details of this Course at
http://www.scodanibbio.com/webbuild