iMeil - HTML Beginners Tutorial

Share it:

LESSON 2

I will focus to the "BODY" tag to add the page contents...

<body>
</body>

Type in: "Whatever you like"

<body>
Whatever you like
</body>

Every time you add a new content, save your document and then click the "Reload" button in your browser (I assume you have your page in the additional oppened tab as suggested in the previous lesson). If your recent changes are not shown after you have clicked the Reload button... do this: hold the "Shift" key and click again the Reload button... your changes should appear now.

First things first... let's see how to change background colors.

<body bgcolor="#ffffff">
Whatever you like
</body>

* bgcolor="#ffffff" (background="white") is the code for the white color.

Instead of a solid color, you can specify an image to be used as the background.

<body background="background4.jpg">
Whatever you like
</body>

This is the background image I have used:

To see the way the image is displayed when used as background, just click on it.

Obviously, the image is rendered in a mosaic way to cover all the page. Creating a large image you can implement a similar effect like the following...

<body background="fondo.jpg">
Whatever you like
</body>

Click here to see how this background is displayed.

This is the image used as background.

(its real size is 1200x15 pixels, I cut it to 400x15 pixels to be displayed in a good way in any screen resolution.)

Lets return to our white background

<body bgcolor="#ffffff">
Whatever you like
</body>

Add something in Bold

<body bgcolor="#ffffff">
Whatever you like
</body>

What we say to the browser is: in to start a text in bold, and in to end or stop the text in bold.

The same applies for italics

<body bgcolor="#ffffff">
Whatever you like
</body>

... and also for underline

<body bgcolor="#ffffff">
Whatever you like
</body>

Lets return, again, to our white background and without any format in words...

<body bgcolor="#ffffff"> (you can use bgcolor in caps)
Whatever you like
</body>

If you want, you can use combined tags...

<body bgcolor="#ffffff">
Whatever you like
</body>

This is an example of combined tags. If you are going to use combined tags (something you will do in a short time), then you have to avoid confusing the browser. Tags must be combined not superimposed. Let me explain it with one example...

<this><that> </this></that> Superimposed tags... wrong
<this><that></that> </this> Combined tags... correct

You can change the letter size... its not difficult

First add the font tags
<body bgcolor="#ffffff">
Whatever you like
</body>

Then apply the size
<body bgcolor="#ffffff">
Whatever you like
</body>

There are 7 font sizes

1 2 3 4 5 6 7

Two important issues to consider...

A <TAG> instructs the browser to do something. An "ATTRIBUT" appears inside the <TAG> and indicates to the browser "how" to do it.
The "DEFAULT VALUE" assigned by browsers its implemented when there is no instructions or indications on how to display something. Example: the default value for a font is 3. Unless you establish a different size, it will continue to be 3.

The default value in all browsers (well... not all) is Times New Roman 12 pt (which represents the number 3 in the HTML code) with black as color. Try to assign Arial or Comic Sans to the font tag...

<body bgcolor="#ffffff">
Whatever you like
</body>

Its not recommended, however, the use of the FACE tag because this tag needs to have the specified font in your pc to display it. I mean, if you have in your pc the font "XYZ" and you implement it in your web page, you will see it without any problem, but when a visitor lands in your same page and he has not that font in his pc, then the font will be changed automatically and will be used the default font he has as default in his pc.

Using combined fonts you can fix this problem, as in I want to learn HTML.

For those who don't understand what is happening here --as was my case-- this is what is going on ===> The browser searchs for the Arial font, if the font is found then its used, if not found then the browser will search for Helvetica... if not found then will search for Lucida Sans... and if no one of these fonts are present, then the browser will use the default font value.

A tip related to syntax... you probably have noted I use lower and caps on tags. Up to this moment you can use whatever you want, no matter if it is something like , or , because the three represent the same. What you do not have to forgot is to put quotes and major than ">" and lower than "<" signs.

Personally, I suggest you to use always the tag names in a lower case. This way you will comply with W3C standars that are required to validate HTML documents.

Yuo can change the font color...

<body bgcolor="#ffffff">
Whatever you like
</body>

Or use more than one ATTRIBUT in a <TAG>...

<body bgcolor="#ffffff#>
Whatever you like
</body>

And more than one <TAG> to the same section...

<body bgcolor="#ffffff">
Whatever you like 
</body>

Remember, again, that tags have to be combined and not superimposed...

<TAG1><TAG2> <TAG3>iMeil</TAG3> </TAG2></TAG1>... correct

<TAG3><TAG1> <TAG2>iMeil</TAG2> </TAG1></TAG3>... correct

<TAG3><TAG2> <TAG1>iMeil</TAG3> </TAG1></TAG2>... wrong

Browsers display a default attribut for font color, for link, for visited link, and for active link. These default attributs are...

Text in Black
Link in Blue color
Visited Link in Purple
Active Link in Red

You can modifiy these default attributs inside the <BODY> tag...

<body bgcolor="#000000" text="#ffff00" link="#ff0000" vlink="#800000" alink="#008000">
Whatever you like
</body>

where vlink is Visited Link and alink is Active Link.

Now you know a little more about how to modify text color and presentation. Lets move to next lesson

Subscribe to Newsletter
Provide your information

Privacy Policy
Suggest to a Friend

[Lesson 1] [Lesson 2] [Lesson 3] [Lesson 4] [Lesson 5] [Lesson 6] [Comments]

Reproduction of this tutorial is not allowed, please read the following links for further information:
Term of Use / Privacy Policy