This column follows on from the two previous basic HTML tutorials, in which we created a basic web page, and added images and links.
In this column we'll turn our attention to adding some colour and style to the page, and explore basic layout methods.
I'll touch on the way of the past, which has been to achieve these using <font> and <table> tags respectively, but focus on current and future practice, which favours Cascading Style Sheets, or CSS, to do both.
As a starting point, here's code for the page we finished up with at the end of the last column - you'll need to create or copy an image and change the <img> tag accordingly;
<html>
<head>
<title>Mount Manaia, Whangarei Heads</title>
</head>
<body>
<h1>Mount Manaia, Whangarei Heads</h1>
<p><a href="http://www.newcreation.co.nz/Harbour%20Photos/Mt.-Manaia.jpg"
target="newone"><img src="Manaia.jpg" width="335" height="219" border="0"
alt="an altered photograph of Mt Manaia" hspace="5" align="left"></a>Mount
Manaia is the most striking feature of the view presented when visitors
to the Whangarei district reach the top of the Brynderwyn hills travelling
North.</p>
<p>It sits on the Eastern side of the entrance to <a
href="http://www.whangareinz.org.nz/">Whangarei</a> harbour, by road
between the small settlements of McLeods Bay and Taurikura. </p>
</body>
</html>Colour and typeface information can be added using the <font> tag, which has the attributes face ( typeface, a list of preferences ), color ( 16 keywords ), and size ( numbers 1 to 7).
Here are two examples of how you can spruce up last column's basic page;
<h1><font face="helvetica,verdana,arial"
color="purple" size="6">Mount Manaia, Whangarei Heads</font></h1>
<p><font face="verdana,arial,sans-serif"
color="#333333" size="2">It sits on. </font></p>The traditional way of laying out a page has been to create a grid using the <table> tag , along with its children <tr>, for table row, and <td> for table cell, or data. The table contains table rows ( <tr> ), and they in turn contain table cells ( <td> ).
Here's an example of a very simple two-column page layout using tables, with text and images in the left cell, and links in the right cell.
<html>
<head>
<title>Mount Manaia, Whangarei Heads</title>
</head>
<body>
<h1 align="center">Mount Manaia, Whangarei Heads</h1>
<table cellpadding="5" cellspacing="0" border="0" width="100%">
<tr>
<td width="80%"><p><img src="Manaia.jpg" width="335"
height="219" border="0" alt="an altered photograph of Mt Manaia"
hspace="5" align="left">Mount Manaia is the most striking feature
of the view presented when visitors to the Whangarei district reach
the top of the Brynderwyn hills travelling North.</p>
<p>It sits on the Eastern side of the entrance to <a
href="http://www.whangareinz.org.nz/">Whangarei</a> harbour,
by road .</p></td>
<td width="20%" valign="top" bgcolor="#99ffff">
<a href="home.html">home</a><br>
<a href="mailto:webservices@easi.net.nz">email</a><br>
<a href="#">more links</a>
</td>
</tr>
</table>
</body>
</html>A better and more modern approach, replacing <font>s and usually <table>s. is to style and lay out web page using the CSS.
Style is often added to a page using the <style> tag. It is important that this goes in the head of the document, before the closing <head> tag, like so;
<html>
<head>
<title>Mount Manaia, Whangarei Heads</title>
<style type="text/css">
h1 {
color:purple;
font-family:Georgia,Heveltica,arial,sans-serif;
font-size:2em;
}
</style>
</head>Note that a colon separates the property ( for example, color ) from the value ( for example, purple ), and that each statement finishes with a semi-colon.
This will render all <h1> tags ( top-level headings ) in purple, in the Helvetica typeface if it's available, and at twice the browser's default size.
Here's an example of styling paragraphs ( <p>);
p {
font-family:verdana,arial,sans-serif;
font-size:0.9em;
}Using style sheets can be difficult at first, but once you have the basics down and explored styling other elements, page layout can be done with style sheets. This method has the advantages of making page layout simpler, and using less code.
A web page can be divided into sections using the <div> tag. Those sections can then be laid out, or positioned, by giving each <div> a unique id, which must begin with a letter. Below is an example. The key to the layout is in the #content and #links rules.
<html>
<head>
<title>Mount Manaia, Whangarei Heads</title>
<style type="text/css">
body { margin:0;padding:0;
}
#header { margin:0;
}
#content { position:absolute;
left:150px;
}
#links { width:120px;
padding-left:20px;
}
h1 {
background:#33CCFF;color:#000033;
font-family:Georgia,helvetica,arial,sans-serif;
font-size:2em;
text-align:center;
border-bottom:2px solid #000033;
}
p {
font-family:verdana,arial,sans-serif;
font-size:0.8em;
}
#links a {
display:block;
font-family:arial,sans-serif;
font-weight:bold;
font-size:0.7em;
}
</style>
</head>
<body>
<div id="header">
<h1>Mount Manaia, Whangarei Heads</h1></div>
<div id="content">
<p><img src="Manaia.jpg" width="335" height="219"
border="0" alt="an altered photograph of Mt Manaia" hspace="5"
align="left">Mount Manaia is the most striking feature of the
view presented when visitors to the Whangarei district reach
the top of the Brynderwyn hills travelling North.</p>
<p>It sits on the Eastern side of the entrance to <a
href="http://www.whangareinz.org.nz/">Whangarei</a>
harbour, by road ... </p>
</div>
<div id="links">
<a href="home.html">home</a>
<a href="mailto:webservices@easi.net.nz">email</a>
<a href="#">more links</a></div>
</body>
</html>Here's hoping these columns have managed to teach some basics of HTML and CSS. To explore further, visit and W3C Scgools' HTML tutorial, and W3C Schools' CSS tutorial.
site by Urban Legend Designs