HOW TO BUILD A PROFESSIONAL WEB SITE
Rel. 1.1
LESSON 02
|
by Carlo Scodanibbio
|
|
getting organised better
To carry on well and efficiently with this course, you must run simultaneously:
- Notepad, to introduce changes to your textual HTML code
- Your Browser to read this Lesson
- Another Window of your Browser to display the Page (testpage.html) that you will be modifying as you progress
To open a new Browser Window you should:
- If you use MS Internet Explorer, go to File, New, Window, like this:
- If you use Netscape Navigator, go simply to File, New Window:
A new Browser Window containing this Lesson will appear.
You might struggle a bit to open your testpage.html from the new Browser Window, but this is part of the learning you will have to do (huh, huh...).
However, since I am very generous, I will give you a few tips in this quick tutorial how to open a local file from your Browser (Enclosure 04).
In conclusion, in your Windows Desktop you should have a three-windows set-up looking something like this (if you are using MS Internet Explorer):
NB: From now on, in my examples, I will refer to MS Internet Explorer only - I will refer also to Netscape if necessary (it is not a matter of preferring the one or the other Browser, it is just a matter of rationalising this presentation without confusing you excessively....).
In order to progress with this Lesson and the following ones you should "toggle" between:
- the Browser window that is displaying the Lesson
- the Notepad window to introduce changes to your HTML textual Code
- and the other Browser window to display the changes you introduce to your testpage.html
If you know how to do it you may carry on with this Lesson.
Alternatively, please study a quick tutorial on toggling between windows and managing windows (Enclosure 05).
Now you can carry on playing with your testpage.html HTML Code in Notepad, introducing changes within the BODY Tags.
Save your work frequently - in fact you must save your HTML textual Code every time you make a change if you want to see the corresponding effects - and toggle between Notepad and the Browser window displaying testpage to see immediately your progresses and to correct errors.
When you go to the Browser's window to see the effects of your work, do not forget to "refresh" (Explorer) or "reload" (Netscape) your Browser.
The Refresh and Reload buttons look, respectively, like this:
TIP
You may also refresh or reload a Browser window by simply pressing the F5 key in your keyboard.
Sometimes this is not sufficient to refresh your Browser: the "stronger" way is to press F5 while you keep the shift key depressed.
Refreshing or Reloading will cause your Browser to re-read the testpage.html document completely, including new changes just made.
The "Refreshing action" is very often used when browsing the Net to re-load again a Page that does not seem to download fast enough, or that gets "stuck" while being downloaded, etc.
This normally happens when there is a poor (or "hiccup") Internet connection.
On with the course.
So, for instance, go to your Notepad window, and add some text in the Body of your Page:
<HTML>
<HEAD>
<TITLE>My experimental Web Page</TITLE>
</HEAD>
<BODY>This is my first Web Page !!! Huh, I am so proud of it !!!</BODY>
</HTML>
See the changes now. Activate the testpage Browser window and hit refresh. This is what you will obtain as a result:
All clear ? So practice a bit, by introducing more text within the <BODY> tags, and see the effects at every change you make.
background of an html document
White is not really the best of colours, is it ? Even worse, if you have an earlier version of Internet Explorer or Netscape Navigator, the background colour would be a dull grey.
In other words "by default" (unless you instruct it otherwise) a Browser renders the background colour of a Web Page "white" or "grey" depending on which version it is.
Let's focus on the BODY section of the HTML Document, and work only between the BODY TAGS (but obviously all other TAGS like <HTML>, <HEAD>, <TITLE>, etc. must remain there....).
<BODY>
</BODY>
Let's dress up the Body of your testpage.html. To change BODY Colour insert the ATTRIBUTE (another form of instruction) BGCOLOR in the BODY STARTING TAG, like this:
<BODY BGCOLOR="#XXXXXX">
This is my first Web Page !!!
</BODY>
The generic XXXXXX is the Colour Code - Colour Codes are explained below.
But first, some remarks:
- Note that there is always a space between a TAG and an ATTRIBUTE in the Tag
- A Tag tells the Browser what to do (for instance: "start the Body section of this Document") - an Attribute tells the Browser "how" to do it (for instance: "make this Body background colour green")
- BGCOLOR is short for BACKGROUNDCOLOR - but note the spelling, COLOR not COLOUR - HTML has been invented and perfected by Americans, not Britons....
- ATTRIBUTES normally have a "setting" and a "value" (in this case ="#XXXXXX" is the full setting and #XXXXXX is the value of the setting) - a setting is obtained always through the use of an = sign and quotation marks to contain the specified value
- Also note the # sign preceding the Colour Code (Colour Codes are explained below).
Here are some basic Colour Codes:
RED= FF0000
GREEN= 00FF00
BLUE= 0000FF
BLACK= 000000
There is also a code for WHITE, which I'll display against a black background otherwise you won't see it
WHITE= FFFFFF
How many colours can you choose from as Background Colours of your Page Body ?
In theory 16,8 million colours. But only in theory.
Let me try to explain why in simple wording:
So, every computer has a "graphic card" and a "screen".
Depending on their features and settings, the screen is able to display a certain number of colours. For instance my computer screen can operate in a few "modes" and display, depending on the settings I choose,
- 16 colours
- 256 colours
- 65536 colours
- 16,8 million colours
Normally I keep the 16,8 million colours setting.
If you want to know which settings you have in your computer, just "right click" with your mouse in any free area (not containing Folders or Files) of your desktop. A menu will appear. (Left) click on "Properties". The "Screen Properties" window will appear. Choose "Settings". Go to the "pull down" Colours menu and click on the arrow. You will see how many different colour settings you have in your computer.
If you are set at 16,8 million colours, you may then choose, as Background Colour of your Web Pages, any of the 16,8 million Colour Codes. BUT....
Think now of your visitors, those Internet Navigators that are sooner or later going to visit your Web Site. What Colour Settings do they have in their computers ? And which Colour Setting have they chosen ? In fact they might not even know they have the possibility of increasing the Colour Setting of their Computer, and they might be working at 256 colours, or even at 16.
With the net result that they might not be able to see your very patiently and carefully selected colour for your Page Background !
For instance, you might have selected a beautiful "light crayfish" pastel colour, and your Visitor's Browser will try to display the closest available colour (a Browser always tries to cope with an unforeseen situation....) - in conclusion your visitor might see a sharp, brutal Red as background colour of your Page !!
OK, OK, this was an extreme example, but always try to think in terms of what your Visitors (or "Users") will be displayed by their Browser, not in terms of what you see in your Computer ! This is a very important rule to which I will come back very often.
Another point to remember is that in many not so developed Countries people are still today using very old computers (which is all they can afford to buy..) with and black and white screens.
So, you will have to start thinking also in terms of your "target audience", or that Internet arena to which you are addressing your Web Site.
If your target market is in highly civilised and industrialised Countries, then do not even bother to consider what I just said and go for any colour you like, not only for your Backgrounds, but also for any other content of your Web Pages (Text, for instance).
Alternatively, as a golden rule, always try to stick to the famous "216 non-dithering colours" also known as the "Netscape 216 Colours", which are listed in Enclosure 06 - the 216 non-dithering colours.
As you can see there are 216 Basic Colours with their Colour Codes just beneath ready to be used to create the wanted backgrounds (and other colourful stuff).
Codes are in "Hexadecimal" notation, created with suitable combinations of the numbers 3 - 6 - 9 - 0 and the letters C and F.
Do not forget the # sign before your Colour Code !
Colour codes are not case sensitive, so #FF0000 and #ff0000 and #Ff0000 are all OK under the HTML 4.0 specifications.
If you wish to know more about the Colour theory and coding, please visit the Web Sites I recommend (you will find them listed in this Enclosure 09 - links to useful Web Sites).
Back to our course.
So if you want to add a bit of life to your page, go for instance for a green background colour:
<BODY BGCOLOR="#00FF00">
This is my first Web Page !!! Huh, I am so proud of it !!!
</BODY>
and this is the result:
Much better, isn't it ?
In conclusion, 00FF00 is computer jargon for green, like FFFFFF is computer jargon for white.
Pretty straight forward, uh !
There is something else very important.
More recent Browsers understand human language: instead of a Colour Code you may just specify its human name, like this:
<BODY BGCOLOR="fuchsia">
</BODY>
would work as fine as
<BODY BGCOLOR="#FF00FF">
</BODY>
Here are a few other colour names understood by not so old versions of several Browsers:
aqua (#00FFFF)
black (#000000)
blue (#0000FF)
fuchsia (#FF00FF)
lime (#00FF00)
red (#FF0000)
white (#FFFFFF)
yellow (#FFFF00)
but I would not go wild with them: Browser support is always a bit unpredictable.
Now try yourself to change background colour of your testpage (but do not use "black" or you will see no text at all..... - heh, heh, heh...).
the background attribute
TIP
Always remember: a plain, white background assures the best "readability" of any Web Page !!
Now I know already your next question: ...can I rather introduce a nice "textured" graphic background in my Page ?
Well, well, I know you like these fancy things, because you have seen many beautiful Pages on the Net made this way. No problem.
What you need in this case is to insert a different ATTRIBUTE in the BODY TAG, which is BACKGROUND (instead of BGCOLOR).
Then you also need a Picture to be "laid down" or "tiled" in the BODY of the Page. This Picture must be in .GIF or .JPG format.
So far I have told you nothing about Images and Graphic Files, which I will do in a future Lesson, so you will just have to believe me in what I am saying.
This picture.gif or picture.jpg file can be obtained in various ways, but must in any case be saved in the same folder as your HTML Document (in our case, in the Mywebpage folder).
The BODY TAG will look as follows:
<BODY BACKGROUND="picture.gif">
This is my first Web Page !!!
</BODY>
So, what you need is a graphic file.
I have one ready for you, that is called motiv.gif. I have made it and when displayed by the Browser looks like this:
Now, how do you put its file inside your Mywebpage Folder ?
Very easy. In fact you will be surprised by the good news I am going to give you now.
Just follow these basic steps:
Right click on the displayed Image. A pop-up menu will appear. Choose (click on) "Save Picture As...". Like this:
The usual Save As Dialog Box will appear, like this:
You may note:
- The clever Browser is already proposing the name of the file to be saved, in this case motiv
- The clever Browser is also proposing the file type, in this case .gif
So what is left to do is to find, as usual, your Mywebpage Folder in Desktop, and save the graphic file there. Voilá.
A couple of Remarks:
- Netscape users will follow a very similar procedure. The only difference is that Netscape presents a menu which contains "Save Image As...." instead of "Save Picture As..."
- I know you are very sharp, and I also know what question is turning in your mind: "....so, if I follow a similar procedure when I am surfing the Net, can I save in my computer all those beautiful images displayed there ???"
Well, the answer is YES !!!!. BUT, we have to talk about copyright implications. I will do this in a future Lesson. Heh, heh, heh....
Back to our course.
Once you have saved in your Mywebpage folder the Graphic File motiv.gif, your folder will show its icon, that might be similar to this (but might also be different - it depends on which is your default software program set to open .gif files - I will explain this issue in a future Lesson):
Now you are ready to insert a textured background in your testpage.
Your BODY Tag code should be like this:
<BODY BACKGROUND="motiv.gif">
This is my first Web Page !!! Huh, I am so proud of it !!!
</BODY>
and your Browser, after refreshing it, will display this:
Improving, isn't it ? Are you more impressed, now ??
Now let's do some considerations:
- In the BODY Tag you may use the Attribute BACKGROUND, or the ATTRIBUTE BGCOLOR, or none at all ( = getting a white or grey Background), but you cannot use both BACKGROUND and BGCOLOR at the same time, or your Browser will be totally confused
- If you use BACKGROUND as an ATTRIBUTE, it must be set at the filename of a Graphic .gif or .jpg file. As usual, you must insert the = sign and enclose the Filename within quotation marks - besides there must be a space between BODY and BACKGROUND
- The Graphic File must be saved in the same Folder in which your Page Document is saved, in this case in the Mywebpage Folder.
- What the Browser does: it creates a Page Body (BODY Tag) and then looks for a File motiv.gif (the "value" of the Setting of the BACKGROUND ATTRIBUTE) in the same Folder in which the HTML Document is. When the Browser finds this file it does a nice tile laying work, displaying the selected picture one next to each other horizontally and vertically in the background, until the Body area is full of such tiles.
Isn't it clever ?
- The physical dimensions (in pixels) of the picture selected as background image should not be too large, otherwise there will be little tiling effect or almost none at all. These issues will be more clear when we shall deal with Images in a future Lesson.
- Graphic files suitable for Backgrounds can be found (by the thousands) on the Net. At the bottom of this Lesson I am giving you addresses of Sites where you can get these files (for free, obviously).
TIP
Remember: if you start thinking of making your own "backgrounds", they must be made in such a way that the left side matches (melts with) the right side, and the top side matches the bottom side.
Alternatively, the tiling effect may be poor.....
But, just to keep you going, let me provide you with some background images to play with until you get next Lesson - I am sure you would like to do some experiments by yourself.
To grab the following backgrounds (credits, with thanks, to www.html.it) and save them in your Mywebpage folder just follow the procedure I described above.
Have fun !
Happy ? Or confused ? Do not worry, with some exercising everything will be just clear.
In fact, I think I am going to give you straight away a little exercise. OK ?
Exercise 01. Create a Web Page that looks like this:
The solution will be given with next Lesson, so you can compare your solution with my solution - this will be the general rule, from now on.
You should be able to do this Exercise in no more than 3 minutes.
Before closing this Lesson I suppose I should give you a little hint.
Since there are several exercises coming up in this course, you might want to create a special Folder to keep all of them: it might be handy so you can look at them any time you wish, as a reference.
Besides, if you decide to send me your completed Exercises by E-Mail (and you should !!!), you need to know how to attach them to an E-Mail message.
In both cases you should read this tutorial for managing exercises (Enclosure 07).
And now, another issue that I just mentioned in the previous Lesson. What happens when you close your Notepad by accident, or anyhow when you are tired of HTML work ? How do you recover your Notepad HTML code ?
If you are Windows conversant you may skip this, otherwise have a look at this other tutorial: where the heck is my HTML textual code gone? (Enclosure 08).
Finally, as promised, you will find useful Links to Web Sites that I recommend to visit in this Enclosure 09 - links to useful Web Sites.
Well, that's all also for this Lesson. Are you feeling OK ?
Then you are ready for next Lesson: fun is increasing more and more....
Bye for now !
Plan of Lessons
http://www.scodanibbio.com/webbuild
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.
Lesson 03