hello sailor

HTML

A quick review

So far, we have covered the following topics in HTML:

  • Creating a new HTML document
  • Putting a title in the title bar
  • Changing the colour of the page background
  • How to control the appearance of text on the page - headings, paragraph text, bold, italic, lists
  • Hyperlinks
  • Placing an image on the page
  • Using tables to control the layout of your page.

To review the material we have covered so far, let's make a HTML page from scratch. The page I want you to make should look like this.

 

Cascading Style Sheets

A style sheet contains a set of instructions about the appearance of your web page. You can include a style sheet within each HTML document, but a much more powerful way to use style sheets is to create a global style sheet for your web site and link it to each HTML document, by including the link element in the head section of the document:

<head>
<link href="stylesheetname.css" rel="stylesheet" type="text/css">
</head>

When you implement your style sheet this way, a single change you make to your style sheet will "cascade" through your whole web site, without you having to manually change the code on each HTML page.

You can use style sheets to control the positioning and layout of your HTML pages as well as the appearance of text, but we will concentrate on controlling the appearance of the text on our page.

For example, take the page you have just created for the review above. You could change the appearance of the text by creating a simple style sheet and linking it to your html page.

The style sheet will contain instructions in the following format:

p {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

ul {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

h1 {
font-family: Verdana, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #000000;

Note: All the brackets, commas and semi-colons are important, so when you are starting off, it is usually easier to copy and modify an existing style sheet than to write your own from scratch.

Just as for your HTML page, your stylesheet can be written in Word, and saved as a .css file, in Text Only format. Again, make sure that the file extension is .css (not .txt).

Then you need to add the link to the stylesheet in the head section of your HTML document.

Here is the same page as in the review exercise, but with the style sheet above applied to it

 

Further adventures in HTML, CSS and beyond

We have had a good look at the most common elements in HTML, more than enough to get you started with making your own web site. If you want to learn more about this topic, the IADT library has several books on HTML. Alternatively, you can follow an online tutorial (there are lots out there). Here are just a couple of examples:

W3Schools HTML Tutorial
Webmonkey HTML resources

Insofar as there is anything like a governing body, or authority on web development, the Worldwide Web Consortium (W3C) is it. They set standards for web implementation and provide all sorts of documentation on current standards and forthcoming developments. Their web site is fairly intensively text-based, but is an invaluable resource.