 |
WEB DESIGN SKILLSModule Study Guide
|
Session 2
More HTML
On this page:
More HTML tags
Document Type
The first line of an HTML page is a DOCument TYPE line and states which of the HTML standards it claims to conform to.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is included to identify the HTML version being used - in this case XHTML1.0. The code will usually work pretty well without this line, but it's best to include it.
<strong>
The <strong> tag represents parts of the text which need
to be shown stronger than the rest. This is usually shown as bold, but can
be made to stand out in other ways by using style sheets e.g. as a different
colour.
<em>
<em> stands for 'emphasis', and is normally used to italicise
text.
(NB: <strong> and <em> have taken over
from the more traditional <b> and <i> ('bold'
and 'italics'), which you will still find in some older web pages. )
<hr />
<hr / > means 'horizontal rule', which draws a line across
the page.
<br />
<br /> indicates a 'break', which normally starts a new line without terminating
the current paragraph.
<blockquote>
The
<blockquote>tag applied to a section of text (minimum one paragraph) indents the text by a fixed amount (as in this paragraph).
Comments
A comment may be included by enclosing it between <!-- and -->.
The comment will not be shown in the browser, it is just there as a note to
someone updating the page. For example
<em>next meeting Monday 5th Oct <!-- check date --> at 4:30pm</em>
will be displayed as:
next meeting Monday 5th Oct at 4:30pm
The <font> tag
There is a tag called <font> which can be used to alter
all sorts of aspects of the text, such as colour, size and font-style (e.g.
Times New Roman). However, this tag (along with many others) is now 'deprecated',
which means that there is a (supposedly) better way to control font appearance,
and the <font> tag is not meant to be used any more.
The new way of controlling text appearance is by using style sheets, which will be covered in a later session.
Attributes
Many tags may have attributes which modify their behaviour. Attributes
are placed after the tag name but before the closing > of the
opening tag. Attributes are written as name=value,
and separated by spaces, for example in
<hr size=5 width="50%" / >
there are two attributes one named size with value 5 and
one named width with value 50%. This produces a horizontal
rule 5 pixels thick across 50% of the page width as seen here:
Some further attributes are:
align=left/right/center/justify
applies to any tag wich encloses a block of text, such as <p> and <h1-h6>.
Aligns the text as stated.
leftmargin, rightmargin, topmargin, bottommargin (="value")
applies to <body>. Sets the margin values for each side of the body of the
document. See below for how values may be specified.
bgcolor="color"
applies to <body>. Specifies the background colour of the page. No longer recommended
as style sheets have taken over this function. See below for colours.
background="URL"
applies to <body>. Sets an image as the background. Again mostly specified
by style sheets. The URL is a reference to an image file.
Values
Whenever a value is required inside a tag there are several ways to define this:
- px - pixels
- % - percentage
- em - a relative measurement equivalent to one letter 'M' in the standard text size
- in - inches
- cm - centimetres
- mm - millimetres
- pt - points (72 points = 1 inch)
- pc - picas (12 points = 1 pica)
All values should be within quotation marks (e.g. "12mm"). Scalable units (%, em) are preferred for accessibility reasons - they allow the end user to adjust the text size in their browser.
Colours
Text colour, background colour and (as we shall see later) border colour may
be specified with the color= attribute.
There are 16 reserved colour keywords which you can use:
| black | blue | aqua | lime |
| fuchsia | red | yellow | white |
| navy | teal | green | purple |
| maroon | olive | gray | silver |
But you can also specify a colour by means of its hex value, using a '#' prefix, e.g. #00CC55. The six characters here represent two for red, two for green and two for blue. You can find a selected list of these colours on several websites, such as:
- http://www.northernessentials.co.uk/library/library_resources/colorcharts/colorpicker1/
- http://www.commrich.net/colour_chart.htm
- http://www.quickonthenet.com/2004/1228/
Thus your html might contain the line <body bgcolor="aqua"> or
<body bgcolor="#00FFFF">
Exercises
Using an ordinary text editor, create a new web page of your own which includes:
- a proper document type
- several levels of headings
- text organised in paragraphs
- some strong and emphasised text
- a different colour background
- horizontal rules
- differently aligned text
Save the page and display it on a browser.
