This tag produces a horizontal line, like the one below. The tag is an empty tag, so it should be written as <hr /> (equivalent to <hr></hr>
You can specify the width of the line using the width= attribute. This is specified either as a number of pixels (<hr width="200" />) or as a percentage of the window width (<hr width="30%" />
You can specify the alignment of the line, left, right or center (note the American spelling) using the align= attribute:
<hr width="72%" align="right" />
Include images using the <img> tag. The one attribute you really can't do without is the src= attribute that specifies the file name for the image:
Other attributes you can include:
alt="Alternative text". This specifies some text that will appear for a few seconds if the mouse pointer is rolled over the image. It will also appear in place of the image if images have been disabled in the browser, and software that reads websites out loud for the visually impaired will read the alternative text also. It is considered good practice to put in alternative text for all images.
height=... width=.... Using these attributes, you can specify the height and/or width of the image, either as a number of pixels or as a percentage of the window height/width. It is a good idea to include both of these, so that the browser is in no doubt as to how to display the image. However, you should take care if resizing the image using both height= and width= not to alter the aspect ratio of the image.
| <img src="top.gif" alt="Flag on a mountain" height="43" width="44" /> | |
To learn about image file formats, see the Graphics and Images tutorial.
This tag controls the overall properties of a page, such as its background colour and the colour of links. It is only used once, just after the header tags <head> ... </head>. The corresponding ending tag, </body> appears near the end of the page, with the entire displayed contents of the page in between.
Here are the attributes you can add to the <body> tag:
bgcolor= specifies a background colour (as defined below) for the page. The entire page will appear this colour.
background= is used to specify a background image that will appear in a repeated tiled pattern behind the text and images. Follow the tag with the file name of the image (e.g. <body background="sandy.jpg" />). It is a good idea if you specify a background image to specify a background colour as well, in case a visitor's browser has images disabled when the page is loaded.
text= specifies the colour of the text (see the section on colours).
link=.... This attribute specifies the colour of the text in hyperlinks (see Chapter 5). When a link refers to a page that has already visited, it is called a "visited link". When a link has the current focus, it is called an "active link". You can specify the colour of visited links and active links by adding the attributes vlink=... and alink=... to the <body> tag.
HTML gives us the ability to include a large number of special characters by using escape sequences. These are sequences of characters that start with the ampersand character (&) and end with a semicolon (;).
An escape sequence can include a control character, which is a hash sign (#) followed by a number in the region 128 to 255. Each number gives a different special character. Here are some examples:
© |
© |
¶ |
¶ |
Ø |
Ø |
± |
± |
¥ |
¥ |
§ |
§ |
Alternatively, some special characters have names that are also defined in letters, for example:
é |
é |
& |
& |
" |
" |
< |
< |
> |
> |
|
(non-break space) |
The & sequences is useful because it allows us to include ampersands themselves in the page. The non-break space appears as a normal white space character, except that the browser will not leave it at the end of a line, i.e. it treats the non-break space as if it were a character in the middle of a word. You can also chain non-break spaces as follows in order to pad out a line with white space:
There are two ways of specifying colours in both HTML and XHTML. The first is to use one of the 216 "web-safe" colours which are defined using words, and which are guaranteed to display the same way on all browsers and on all architectures. These include the common colours, such as:
<font color="red">Red text</font> |
<font color="green">Green text</font> |
<font color="blue">Blue text</font> |
<font color="black">Black text</font> |
<font color="orange">Orange text</font> |
<font color="purple">Purple text</font> |
<font color="gold">Golden text</font> |
<font color="brown">Brown text</font> |
<font color="yellow">Yellow text</font> |
<font color="white">White text</font> |
<font color="peachpuff">Peach-coloured text</font> |
<font color="pink">Pink text</font> |
The alternative is to specify each colour as a mixture of red, green and blue colours (the three primary colours that can be added in different combinations to give every colour the eye can see). Specify each component as a two-digit hexadecimal number in upper or lower case and precede the whole thing with a hash sign (#):
where "rr" represent the two hex digits for the red component (from 00 to FF), "gg" are the green component and "bb" the blue component. The smallest value each component can be is 00 (i.e. zero), so the colour black (no red, green or blue) is:
The maximum value each component can have is 255 ("FF"), so the colour white (all red, all green, all blue) is:
You can, of course, mix the different components between these two extremes, so a red component of 130 ("82" in hex), a green component of 65 ("41") and a blue component of 206 ("CE") give this colour.
Be careful of clashing colour combinations. Different colour combinations may be more suitable than others for different cultures. Generally, lighter colours ("pastel" shades) are chosen for backgrounds, with darker, contrasting colours for text etc.
You have already met one attribute for the <font> tag, namely color="..." to change the colour of the text. There are two other attributes:
size="..." alters the size of the text. Sizes range from "1" (the smallest) to "7" the largest, with "3" being the normal size (the text you are looking at right now is size "4"). You can specify a size for the text, or a relative size (compared to the current size) of anything from size="-2" to size="+2", where size="-1" means "one size smaller than currently", size="+2" means "two sizes larger" and so on.
The last attribute is face="...", which specifies the font face. You can specify any font that is available on the destination machine, but any visitor to your site may not have the same fonts installed (in which case the text will revert to a default font). You are fairly safe with the following four:
As with other tags, you can, of course, mix and match the face="...", size="..." and color="..." attributes.
 |
 |
 |