Lesson 3

Colors, URLs, Text and more on tags

Colors in HTML
A fair number of colors (note the American spelling) can be referred to by name, but it can be easier to refer to colors by listing the relative amounts of 'red', 'green' and 'blue' in the color.

The amount of each is given as a hexadecimal two-digit number! These are like ordinary (decimal) numbers, but with sixteen digits instead of ten. The extra digits are 'a', 'b', 'c', 'd', 'e' and 'f'. The three two-digit numbers are preceded by the hash sign '#'. To give some examples:

#000000 Black

#ffffff White

#ff0000 Red

#00ff00 Green

#0000ff Blue

#cc9999 A darkish pink

These colours also illustrate the need for a good contrast between text colours and their backgrounds.

The number of gradations in each of the three colors is 16 squared (=256), so that the total number of colors available is 256 cubed (=16777216), usually called 17 million. Some computer displays are restricted to 256 colors and so has to mix little blobs of its 256-color pallette to approximate the called-for color. One answer for early browsers was to restrict yourself to the so-called 'safe' colors. These only use six levels in each of the three colors red, green and blue. The six levels are '00', '33', '66', '99', 'cc' and 'ff', giving a total of 6 cubed (=216) colors. These should be enough for most purposes!

URLs
And now for another digression. URLs are addresses on the web and are of two kinds. The sort we use in surfing the www are called absolute. Similarly an address 'C:\website\bg.jpg' is an absolute address. The drawback to using absolute addresses is that your website on your hard drive differs from your website on the internet. The use of relative addresses gets over this problem. For files in the same folder, no folder need be mentioned. For sub-folders, give the sub-folders name using a forward slash (not a back slash!), e.g. 'img="picture_folder/imgname.jpg"'. For images in other folders use '../' to go up one level. To see how this works look at the explanation given in Page Tutor!

More on attributes
In Lesson 1 we mentioned attributes and gave their essentials, the equals sign and the quotes. now for a bit more. To change the background color of your web page background use the body attribute 'bgcolor="#......"'. To see an example (2) click here. Alternatively, it is possible to use a background image using the attribute 'background="img url"'. To see this (3) click here.

Images for web pages should be in one of two formats. 'image.gif' is usually reserved for line drawings and simple pictures while 'image.jpg' is used for photographs.

Images are added to web pages using the '<img>' tag. A lot of other information has to be included as attributes. First, what is the image and where it is. E.G. 'src="image URL"'. Next we need to give the size so that the browser can reserve space for the image. E.G. 'width="image width in pixels" height="height in pixels"'. To get the size of your image in pixels, move the cursor over the file name in my computer and a small box will appear giving the width and height. If it does not, right-click on the file name and click on 'properties' for the same information.

Finally use the 'alt' attribute. This a box with the text from the attribute when the user's cursor is moved over the picture. This is one of the few places where a capital letter is allowed in the current version of HTML (xhtml 1.1). To see this in action, click here, and 'view' the 'source'.

Did you notice that the image tag is an empty tag?

Modifying the text
The main way of modifying the text is to change the font. To do this we can use the 'font' tag. Attributes for this tag include 'face', 'color', 'size' and 'align'. The 'face' attribute selects the font that the user sees. However, the user only sees this font if it is on the user's computer. If not the font reverts to the default font. To get round this it is possible to specify more than one font and the order in which they are to be selected. In the example given below, the users browser looks for comic sans ms. If that is not on the computer, it looks for arial. Then for helvetica and finally any font from the sans serif family. The color of the type face is magenta, at size 4. NOTE that the size attribute works in the opposite way to the 'h' sizes. Size 1 is the smallest up to size 7, the largest.

E.G. 

You should not go overboard with different font faces. Other variations that crop up from time to time are 'bold' and 'italic' tags. E.G. and .

Overlapping tags
Now would be a good time to tell you that you must not overlap tags. Not never. Nohow!
<a>...</a>... and <a>.........</a> are alright.
<a>......</a>... is not!!

Previous Lesson

Next Lesson

A layered menu for Lynx users