Presentational HTML
« Previous: Nesting and element types | Next: Links »
There are several attributes within html that allow you to control the appearance of your page, such as fonts, colours and layout. All of these attributes are now deprecated (meaning that their use is discouraged by the World Wide Web Consortium); it is better to use Cascading Style Sheets for presentational effects as they offer far more precise control, increase access to users with disabilities by separating content from presentation, and can be achieved with much less coding.
However, the basic EDCC assessment requires making a couple of minor presentational changes to a page. So, in order that we may complete this first assessment before starting into CSS, I grudgingly offer to you this small collection of presentational attributes:
bgcolor
This attribute, when added to the <body> tag, can be used to change the background colour of the
entire page. The value of this atttribute can be a named colour, eg red, green, brown, or a hexadecimal colour code (see below).
For example, <body bgcolor="#ff0000"> sets the page background to a brilliant red. Yikes!
text
The text attribute is also added to the <body> tag, and sets the colour of the page text. Allowed values are the same as for the bgcolor attribute. For example, <body bgcolor="#ff0000" text="#00ff00"> sets the text colour to bright green, which is positively headache-inducing over the red background. Please choose a more tasteful (and legible) colour combination.
align
align sets text alignment, and can be added to any block-level element. Allowed values are left (which is the default value), right, center (note the American spelling) and justify (all full lines will be aligned to the left and right edges of the page).
Example:
| Code | Output |
|---|---|
<p align="center">This very small paragraph is aligned to the centre.</p> |
This very small paragraph is aligned to the centre. |
<p align="right">This very small paragraph is aligned to the right.</p> |
This very small paragraph is aligned to the right. |
<p align="justify">This paragraph is just a bit larger to make sure it has enough lines to demonstrate justification; unless you have a truly huge monitor, you should see that all full lines are the same width.</p> |
This paragraph is just a bit larger to make sure it has enough lines to demonstrate justification; unless you have a truly huge monitor, you should see that all full lines are the same width. |
NB. Hexadecimal colours
A hexadecimal colour code is a six-digit code which denotes a specific colour.
Each digit can have one of the following values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. In this system, a, b, c, d, e and f stand for 10, 11, 12, 13, 14 and 15 (this allows you to count to 15 using just one digit).
All colours produced by a computer monitor are a combination of red, green and blue, and the hex code specifies the amount of each of these.
The first two digits in a hex colour stand for the amount of red. The second two digits stand for the amount of green. The last three digits stand for the amount of blue. So, pure red can be written as ff0000, pure green as 00ff00, and pure blue as 0000ff.
When specifying hex colours in html or css, the code should always be preceded by the # symbol, thus: #ff0000.
This small, six-digit code has over 16 million possible values – a greater range of colours than the human eye can distinguish!