HTML Exercises
HTML is written using 'tags'. Tags specify the structure, the format such as headings, paragraphs,
fonts, colour etc and any links. They are expressed as and generally require a close tag
written as , for example, Heading level one
.
Today we will learn some of the common tags. More html tags can be found in any html book
or website. (Check the e-com links on the Unit Homepage.)
Compulsory tags for a html document include:
- to declare that it is an html document
- heading part (NOT displayed). A number of tags may be included in the head section, such as .
<title> - the title is important as it is what the search engines look at when doing a search,
it appears on the top bar of a web page.
<body> - the body of the document. This section is displayed on the screen.
Structure of a simple HTML page:
<html>
<head>
<title> a relevant title
contents of the page including texts, links, inserted picture , etc
... ...
Note: You may use the comment tag ( )
to include any comments and notes about this web page. Any words writen within the comment
tag will not display on screen.
Now, we will have to do today's exercises using Notepad or Wordpad which can be found in
Windows Accessories.
Example 1
Type the following html codes/statements into Notepad/Wordpad and save them into
a TEXT ONLY file with an extension htm or html. Feel free to change the content
if you would like to write something more interesting!
First example
Heading level 1
This is my first Web page.
The paragraph tag starts a new paragraph and does not require a close tag,
although it is okay to include one.
Starts a new line but not a new paragraph.
Draws a horizontal line.
We can make a word bold or write it in italics. We can change
the colour of the print.
Note: You must save the html codes into a text only file with extension
.htm or .html.
After you have saved the file, you shall browse the html file in both Netscape or Internet Explorer (it is good to check your
work on both), ie, view the web page. To browse a html file, go to File/Open and select your file in Netscape or IE,
or find the file using Window Explore and then double click it.
You may also open the html file in Netscape Composer by first start Netscape, and then click File on the top menu
and choose Edit Page. You can modify the page and then save your change by Click File and Save As. If you have
a site allowing you to pusblish, you can publish the page there. For this unit, we don't have a site for you to publish
and you have to save your pages instead. However, you may be able to find some free web sites via our E-Com links
to publish your pages, but usually they only give you very limited space. You could also edit or create your web page
using Microsoft FrontPage. For help in using it, please visit relevant links on Week 3 web page.
Example 2.
Open a new file in Notepad and try this example. We are going to make a list, colour the background and add a link.
You can try other colours (see the colour chart on the E-Com links for other colours). Note that colours can either be
written as a name or number/code. Also, you can create an ordered (numbered) list by using
and
instead of for a list with bullets. A link to Macquarie University is included in this example. You may add
one or more other interesting links to this page.
Second example
My Home Page
Note: Save the html statements above into a file, and browse it in Netscape and Internet Explorer, respectively.
Example 3.
We will now create a table. Tables can be useful in creating web pages to separate the areas of
the page. They are also useful, as expected, in displaying data. You may try changing the colour of the border or
the background colour of the table to gain more practice.
The tag starts a table. Various attributes can be included for the table, as in the example
below. The tags and
start and end a row of the table and | start and end
a column of the table within a row.
Third example
Assignment Marks Table
| Ass1 | Ass2 | Ass3 |
| Tony | 30 | 25 | 35 |
| Mark | 20 | 45 | 45 |
| Peter | nil | 40 | 25 |
Note: Save into a file and browse/open this page in Netscape and Internet Explorer.
End