Outside of a dog, a book is man's best friend,
     inside of a dog it's too dark to read.


  week1 | week2 | week3 | week4 | week5 | week6 | week7 | week8 | week9 | week10 |week11 | week12

24th September 2007

Week 1 Practical

The following examples will give you an idea of what you can do using basic HTML tags

Your first piece of coursework is due at at the end of week 3 (12th October). It is a relatively simple piece of work however it will involve you using as many elements covered in the first three weeks as possible to maximise your marks.

Details of the coursework can be found on the homepage.

Essentially I would like to see four HTML pages with a clear navigation system, linked together using buttons.

The first page should include a short biography including a picture of yourself i.e. where you live (not the whole address, nothing too specific) what your hobbies are, what you would like to do in the future etc. This page should also elements such as a table, an ordered list and an unordered list, an external link and some basic heading tags,

One of the other pages should be titled COM149J1, the other 2 pages should be for your other first semester modules.

We will discuss the content of the COM149J1 page in class next week.

What is an HTML File?

HTML stands for Hyper Text Markup Language

An HTML file is a text file containing small markup tags

The markup tags tell the Web browser how to display the page

An HTML file must have an htm or html file extension, for example; filename.htm or filename.html

Try it for yourself

Open notepad. (startmenu -> assessories -> notepad)

Type in the following text:

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

Save the file as "index.html" and open in a browser.

Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "index.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\index.htm". Click OK, and the browser will display the page.

Try it Yourself - Examples

A very simple HTML document
This example is a very simple HTML document, with only a minimum of HTML tags. It demonstrates how the text inside a body element is displayed in the browser.

Simple paragraphs
This example demonstrates how the text inside paragraph elements is displayed in the browser.

More paragraphs
This example demonstrates some of the default behaviors of paragraph elements.

Line breaks
This example demonstrates the use of line breaks in an HTML document.

Poem problems
This example demonstrates some problems with HTML formatting.

Headings
This example demonstrates the tags that display headings in an HTML document.

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading.

Centre aligned heading
This example demonstrates a centre aligned heading.

Horizontal rule
This example demonstrates how to insert a horizontal rule.

Hidden comments
This example demonstrates how to insert a hidden comment in the HTML source code.

Background color
This example demonstrates adding a background-color to an HTML page.

Paragraphs
Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.

<p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.

Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.

<!-- This is a comment -->

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

Basic Notes - Useful Tips
When you write HTML text, you can never be sure how the text is displayed in another browser. Some people have large computer displays, some have small. The text will be reformatted every time the user resizes his window. Never try to format the text in your editor by adding empty lines and spaces to the text.

HTML will truncate the spaces in your text. Any number of spaces count as one. Some extra information: In HTML a new line counts as one space.

Using empty paragraphs <p> to insert blank lines is a bad habit. Use the <br> tag instead. (But don't use the <br> tag to create lists. Wait until you have learned about HTML lists.)

You might have noticed that paragraphs can be written without the closing tag </p>. Don't rely on it. The next version of HTML will not allow you to skip ANY closing tags.

HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading.