Page |1
HTML
Page |2
Table of Contents
Website Quality......................................................................................................................3
Notepad and Basic HTML Tags...............................................................................................4
Lists........................................................................................................................................4
Links.......................................................................................................................................4
Images....................................................................................................................................4
Characters and Formatting Text.............................................................................................4
Music and Movement..............................................................................................................4
Tables.....................................................................................................................................4
References..............................................................................................................................4
References
Page |3
Website Quality
There are millions of websites on the Internet and they vary greatly in quality. Some are useful,
some are not. Some are well designed, some are not.
There are many ways in which you can evaluate websites. The following are a few of the
qualities you should look at:
Suitability: Is the information presented in a suitable format? (Examples: Are there pages of
writing when a photo and a paragraph of text could explain. Are there pages of numbers when a
graph could be used.)
Reliability: Is the information reliable? (Examples: Does it state who the author is? Is there any
information about the author?)
Accuracy: Is the information accurate? (Example: A website has numerous spelling mistakes.)
Accessibility: Is the information easy to understand? (Example: A website that explains

Science to children uses long words and complicated language.)
Timeliness: Is the information up to date? (Example: A website about the Australian Tennis
Open is updated in December each year.)
Bias: Does the website tell both sides of the story? (Example: A website about AFL teams only
mentions Victorian teams.)
Navigation: Is it easy to find information on the website? (Example: Menus on a website use
words that have no relevance to the site.)
Look at the websites below and choose 3 to evaluate. You should use qualities mentioned
above. Explain and justify your answers. Annotate your work with screenshots (use PrtScr to
‘take a picture’ of what is on the desktop and then edit in Paint or paint.NET). Each evaluation
should be ½ to ¾ page in length.
http://zapatopi.net/afdb
http://users.hunterlink.net.au/~mbbjsj/index.htm
http://www.fulkerson.org/ancestors/buyanancestor.html
http://www.cuh2a.com/
http://www.umich.edu/~engtt516/index2.html
http://city-mankato.us/
http://www.dreamweaverstudios.com/moonbeam/moon.htm
http://www.ownyourc.com/
http://www.5safepoints.com/
http://www.havenworks.com/
Notepad and Basic HTML Tags
HTML is the language used to write web pages, it stands for HyperText Markup Language.
HTML is interpreted by your browser, e.g. Internet Explorer, Firefox, Opera, Safari.
Below are the basic HTML tags. Tags are the commands that the browser will use to interpret
how the web page should look. Tags are always surrounded by < >. <html> is an opening
tag and </html> is a closing tag.
<html> </html> tells the browser where the webpage begins and ends.
<head> </head> tells the browser where the header begins and ends.
<title> </title> tells the browser where the title begins and ends. The title is displayed
at the top of the screen
<body> </body> tells the browser where the body of the web page begins and ends. The
body is displayed in the browser window.
To create a web page you will use Notepad, a text editor, by going to:
Start  All Programs  Accessories  Notepad
Enter the following:
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Save your web page using

Save As and make sure
you change the Save as
type to All Files
Name the file basic.html
Web pages need to be

saved using lowercase
and no spaces. Instead of
a space use an _.
Open Internet Explorer

Choose: File  Open
Use Browse to navigate to
basic.html
Click OK. You should see
an empty page.
Page |5
Now let’s add something to the webpage. Give your page the title: My first Web page and add
Hello World between the body tags.
<html>
<head>
<title>My First Web page </title>
</head>
<body>
Hello World!
</body>
</html>
Use Save As and name the file page1.html
Open Internet Explorer and have a look.
This time we will make Hello World! A headline by using a heading tag. Heading tags begin at
<h1> </h1> (largest) and go through to <h6> </h6> (smallest).
We are also going to add some more text. Some of it we will make bold by using the <b>
</b> tag and we are going to see what the heading tags do to the text.
<html>
<head>
</head>
<body>
<h1>Hello World!</h1>
Welcome to my first web page. <b>This text is
bold.</b>
<h2>This is heading 2</h2>
</body>
</html>
Save your page, keep the name page1.html

Change to Internet Explorer
Click Refresh
When using HTML the text will word wrap but it will not automatically start a new line if you use
enter, you need to use a tag to do this. The break tag is a beginning and an ending tag
combined into one tag. <br />
You can also create paragraphs by using the paragraph tag. <p> </p>
Tags also have attributes, this allows us to have more control over the way things look. For
example we used the <h1> tag earlier but we can use the align attribute to tell the browser
where to put the heading. It would look like this: <h1 align=”center”>, <h1
align=”right”>, <h1 align=”left”>. You may notice that centre is spelled
incorrectly. HTML uses international spelling, which is generally American. The other important
parts are the quotation marks, these are essential.
We can also change the colour of the background by using the bgcolor 9background colour)
attribute of the <body> tag. It could look like this: <body bgcolor=”#ff0000”>.
Colours are nominated using RGB (Red, Green, Blue) values with a # at the beginning. #ff0000
is red, #00ff00 is green and #0000ff is blue. There are many variations and they can be found
at: http://www.w3schools.com/html/html_colors.asp or you can go to: pickup/webster/Year 9
Computers/html/html_colours.html
Let’s put it together
<html>
<head>
</head>
<body bgcolor=”#ff0000”>
<h1 align=”center”>Hello World!</h1>
Welcome to my first web page. <b>This text is
bold.</b><br />
I have used the line break tag to create a new
line.
<p>This is a paragraph using the p tag. </p>
<p>This is another paragraph.</p>
</body>
</html>
Your task is to create a webpage named task1.html. (Open the file named basic.html and use
Save As.)
When creating your webpage use the following tags:

<br />, <p> and 2 heading tags.
You should also use the following attributes:

<body bgcolor=” “> <h align=” “> (use the heading tag of your choice)
Page |7
Lists
There are 3 different types of lists. Ordered Lists <ol> </ol> like the one below are
numbered:
1. Horse
2. Cow
3. Pig
Open your basic.html file in Notepad and Save As lists.html, add the following:
<html>
<head>
<title>Lists</title>
</head>
<body>
The farmer had the following animals:
<ol>
<li>Horse</li>
<li>Cow</li>
<li>Pig</li>
</ol>
</body>
</html>
<li> </li> means list item. You don’t need to put in the numbers, the browser
automatically puts in numbers. You can however change the type of numbers used by adding
type <ol type=” “>
<ol type=”1”> Standard numbering 1,2,3

<ol type=”1”> Lowercase letters a,b,c
<ol type=”1”> Uppercase letters A,B,C
<ol type=”1”> Small Roman Numerals I,ii,iii
<ol type=”1”> Large Roman Numerals I,II,III
Ordered lists are useful for instructions for example, how to kick a football, or the method used
to bake a cake.
Go back to Notepad and add the following:
<html>
<head>
<title>Lists</title>
</head>
<body>
The farmer had the following animals:
<ol>
<li>Horse</li>
<li>Cow</li>
<li>Pig</li>
</ol>
<br />
Things I need to do tomorrow:
<ol type=”1”>
<li>Get out of bed</li>
<li>Have a shower</li>
<li>Eat breakfast</li>
<li>Go to work</li>
</ol>
<br />
But I also need to:
<ol type=”a”>
<li>Return DVDs</li>
<li>Walk the dog</li>
<li>Go to the supermarket</li>
</ol>
<p>That reminds me, I also have to..</p>
<ol type=”1” start=”5”>
<li>Come home from work first</li>
<li>Buy petrol</li>
</ol>
</body>
</html>
Unordered lists <ul> </ul> are a bulleted list. With an unordered list you can change the
look of the bullet by using <ul type=””>.
<ul type=”dics”> Standard bullet

<ul type=”circle”> A hollow circle
<ul type=”square”> A solid square
If you don’t specify what type you want disc is the default.
Go back to Notepad and lists.html and add the following to the bottom of your previous list:
<br />
<h2>Alltime Essendon Greats</h2>
<ul type=”square”>
<li>John Coleman</li>
<li>Bill Hutchinson</li>
<li>James Herd</li>
<li>Dick Reynolds</li>
</ul>
Page |9
The third type of list is a Definition List. This is useful if you need to give a definition of terms
use, like a glossary or it can be used to indent paragraphs. It uses the following tags:
<dl> </dl> Definition List beginning and end

<dt> </dt> Term
<dd> </dd> Definition
Go back to Notepad and lists.html and add the following:
<h2>Computer Terms</h2>
<dl>
<dt>CPU</dt>
<dd>Central Processing Unit</dd>
<dt>ROM</dt>
<dd>Read Only Memory</dd>
<dt>RAM</dt>
<dd>Random Access Memory</dd>
</dl>
Save your file, change to Windows Explorer and Refresh the page.
Your task is to create a webpage named task2.html

On this page you should use 2 different types of lists.
Links
The anchor tag <a> </a> is used to create links. There are two types of links, external and
internal. External links can be to a webpage within the website or to a web page that is part of
another website. Internal is a link on the same page. <a href=””> is used to specify the
address of the link. href stands for Hypertext Reference.
Open basic.html using Notepad and Save As, name it links.html and enter the following:
<body>
If I need any help with html tags there are several
websites I can look at:
<ol>
<li><a href=”http://www.w3schools.com/”>w3Schools</a></li>
<li><a href=”http://htmldog.com/reference/htmltags/”> HTML
Dog</a></li>
<li><a href=”http://html-tags.info /”>HTML Tags</a></li>
</ol>
</body>
Save your changes, look at your file in Internet Explorer.
The other type of link you can use is an internal link. These can be used on long pages to jump
from the top to a chosen section or to create an index. The anchor tag is used to tell the
browser where your link is but instead of a webpage address you type in href =”#name”
using the name you have given that part of the page. To name a section you again use the
anchor tag <a name=”name”> </a>, the only difference being the attribute used.
So, let’s put this into action, add the following to the file named links.html
<br />
I can also look at the following:
<a href=”#anchor”>anchor</a><br />
<a href=”#attributes”>attributes</a><br />
<a href=”#basic”>basic</a><br />
<a href=”#bold”>bold</a><br />
<a href=”#headings”>headings</a><br />
<a href=”#lines”>horizontal rule</a><br />
<a href=”#lists”>lists</a><br />
<a href=”#space”>white space</a><br />
<br />
<hr align=”center” width=”50%”>
<p><a name=”anchor”>The a tag</a> is used when creating
links. It can link to another part of the current page or
to an external page. The href attribute is used to tell the
browser where the link page is located. The name attribute
is used to tell the browser where a link is in a page.</p>
<br />
<p><a name=”attributes”>Attributes</a> are used to five the
browser more information about the tag you are using, they
can be used to align an object or to change the colour of
an object, they can also be used as with lists to specify
P a g e | 11
the type you want displayed.</p>
<br />
<p><a name=”basic”>The Basic Tags</a> are the set of tags
that are used on every web page. They are the html tags,
the head tags, the title tags and the body tags.</p>
<br />
<p><a name=”bold”>The bold tag</a> is quite simply used to
make text bold. It does not enlarge the text as the heading
tags do it just makes it bold.</p>
<br />
<p><a name=”headings”>There are</a> six heading tags and
they range in size. Your browser will automatically assign
how large and how bold the font will be depending on which
heading tag you have used.</p>
<br />
<p><a name=”lines”>You can create</a> a horizontal line on
the page by using the horizontal rule tag. It has
attributes for position, size and width. Size and width are
set using pixels or percentage.</p>
<br />
<p><a name=”lists”>There are</a> three types of lists:
Ordered Lists, Unordered Lists and Definition Lists. They
each have their own use. They also have attributes that you
can use to tell the browser what they will look like.</p>
<br />
<p><a name=”space”>HTML</a> doesn’t automatically go to a
new line when you pres Enter. You need to force it to by
using either the paragraph tag or the line break tag. In
fact you might find that you use the two tags in
combination to create the right amount of white space on a
page.</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Your task is to create a web page named task3.html

On this page you should use the two different types of links.
Images
We need some pictures. The <img /> tag is used to add pictures to a web page. It doesn’t
have a closing tag. It does have a number of attributes that we need to use. The first is <img
src=”” /> this tells the browser where to look for your image, the source of the image. The
second is <img src=”” alt=”” /> this tells your browser what text to place on the
screen when the mouse hovers over the image. It is also used by screen readers. It is short for
alternative.
Before any images are added a folder called images needs to be created to store all pictures
used on the website. The src for any image will then be “images/imagename.ext”. Images is the
folder where the image is located, imagename.ext is the name and type of image (gif, jpg, jpeg,
png etc).
When it comes to naming your images, use lowercase letters and no spaces, instead of a space
use an _.
Copy the following images to your drive and place them in your images folder: apple.jpeg,
orange.jpeg, pear.jpeg, banana.jpeg and peach.jpeg.
Create a page named images.html and add the following html code:
<body>
<p>I found these images on the Internet, so I can’t use
them on a Website without referencing. Images copied from
the Internet are bound by Copyright Laws.</p>
<br />
<h2>Fruits available for sale</h2>
<ul>
<li><img src=”images/apple.jpeg” alt=”Apple” />Apple</li>
<li><img src=”images/orange.jpeg” alt=”Orange” />
Orange</li>
<li><img src=”images/pear.jpeg” alt=”Pear” />Pear</li>
<li><img src=”images/banana.jpeg” alt=”Banana” />
Banana</li>
<li><img src=”images/peach.jpeg” alt=”Peach” />Peach</li>
</ul>
</body>
Some websites have images that take an etermity to load. A better alternative is to use
thumbnails, then if the user chooses they can look at the full size image.
Copy cat_and_computer.jpg to your images folder.

Open paint.NET or The Gimp
Open cat_and_computer.jpg
Choose image then resize from the menu
Enter either the new width or height, allow the computer to automatically adjust the image ratio
Save image as cat_and_computer_thumb.jpg
To add the thumbnail to a web page as a link for the image you would use the following:
<a href=”images/cat_and_computer.jpg”><img
src=”images/cat_and_computer_thumb.jpg” alt=”Cat and
Computer” border=”0” /></a>
P a g e | 13
Adding border=”0” to the image tag will mean you won’t see a blue border around the
image. If you like the blue border, don’t use it.
Your task is to create a webpage named task4.html

You need to either find some images or make your own images to add to your web page. You
need to use thumbnails and images.
Characters and Formatting Text
You can’t just use special characters in HTML. For example the page you created that used
internal links did not use any tags. To see why try the following:
<body>
<p>the anchor tag <a> </a> is used when you want to create
a hyperlink. I have put in 5 spaces between the last
sentence and this sentence.</p>
</body>
Save the file as characters.html

Open Internet Explorer and have a look.
You might have noticed that neither the anchor tags or the 5 spaces appeared on the screen.
We need to use the special symbols. You will find these symbols at http://www.natural-
innovations.com/wa/doc-charset.html or there is a copy in pickup/Webster/Year 9
Computers/html/special_characters_html. The symbol for < is < or < > is > or > / is
/ and a space is @nbsp; or
Now let’s try again.
<body>
<p>the anchor tag <a> <&#47a> is used when you
want to create a hyperlink.
I have put in 5 spaces between the last sentence and
this sentence.</p>
</body>
There are also other ways to change the look of the text on a webpage. You have already seen
the bold tag, there is also:
<b> </b> bold text

<big> </big> big text
<em> </em> Emphasized text
<i> </i> Italic text
<small> </small> small text
<strong> </strong> Strong text
<sup> </sup> Superscripted text
<sub> </sub> Subscripted text
<ins> </ins> Inserted text
<del> </del> Deleted text
The other way to alter the look of text is to change the colour. The best way to do this is with the
style tag. The <style> </style> tag goes after the title tag up in the head of the
document. In using the style tag you need to decide what font is going to be changed.
We are going to make all Italic text blue and all bold text red.
<html>
<head>
<title>Characters and Style</title>
<style>
i {color: #0000ff;}
P a g e | 15
b {color: #ff0000;}
</style>
</head>
<body>
<p>the anchor tag <a> <&#47a> is used when you
want to create a hyperlink.
I have put in 5 spaces between the last sentence and
this sentence.</p>
<br />
<p>You will have noticed that <b>curly brackets {
}</b> have been used between the style tags. The tag
that is being styled appears <i>before</i> the curly
brackets { } and <i>inside</i> the curly brackets
{ } is the style to be applied.</p>
</body>
</html>

You need to use some Special Characters, change the look of some of the text and also use the
style tag to change the colour of some of the text.
Music and Movement
Adding music to your web page is as easy as using the <embed> </embed> tag. If you
intend to have music on a web page it is a good idea to first create a folder named music. Save
all your music files to this folder.
<body>
<img src=”images/chad_kroeger.jpeg” alt=”Chad Kroeger –
Nickelback” /><br />
To hear a Chad Kroeger song click below.<br />
<embed src=”music/hero.mp3” autostart=”false”>
</body>
If autostart is not mentioned the music will play when the page loads. Using autostart gives
control to the user, it also means you can have a range of music to choose from.
Now lets add some movement. The <marquee> </marquee> is something that should be used
sparingly on a website.
<html>
<head>
<title>Music and Movement</title>
<style>
p {color: #ff0000;}
</style>
</head>
<body>
<img src=”images/chad_kroeger.jpeg” alt=”Chad Kroeger –
Nickelback” /><br />
To hear a Chad Kroeger song click below.<br />
<embed src=”music/hero.mp3” autostart=”false”>
<br />
<marquee width=”100%” bgcolor=”#ffffff”>
<p>Hi Chad</p>
<img src=”images/chad.jpeg” alt=”Chad” />
</marquee>
</body>
There are other attributes for the marquee tag:
behaviour – of the text (scroll, slide or alternate)

bgcolor – colour of the marquee background
direction – of the scroll or slide (left or right)
loop – how many times does it go across the screen (1,2,3 up to infinite)
scrollamount – how fast it scrolls (a number in pixels)
height – of the marquee (% of the screen)
width – of the marquee (% of the screen)

This is your chance to go crazy; you need to add sound and movement to a webpage.
P a g e | 17
Tables
Tables are useful not for displaying information but also to assist with the layout of text or a
page. The tags used in tables are:
<table> </table> beginning and end of a table

<tr> </tr> table row
<td> </td> table data (cell)
<th> </th> table header (bold text)
Let’s put it into action. Open the file named basic.html and use save as to name it tables. Html.
This table will have 2 columns and 5 rows. Add the following:
<body>
<table>
<tr><th>Fruit</th><th>Price</th></tr>
<tr><td>Apples</td><td>$2.50</td></tr>
<tr><td>Oranges</td><td>$4.00</td></tr>
<tr><td>Bananas</td><td>$3.65</td></tr>
<tr><td>Mandarines</td><td>$1.99</td></tr>
</table>
</body>
Tables also have attributes to give you more control over how it looks:
align – alignment of table on page (left, right,center)

bgcolor – background colour
border – width of border in pixels
cellspacing – space between cells (% or pixels)
cellpadding – space between text and cell wall (% or pixels)
Add a border to the table with a width of 2 pixels and put padding around the text in cells of 15
pixels:
<body>
<table border=”2” cellpadding=”15”>
<tr><th>Fruit</th><th>Price</th></tr>
<tr><td>Apples</td><td>$2.50</td></tr>
<tr><td>Oranges</td><td>$4.00</td></tr>
<tr><td>Bananas</td><td>$3.65</td></tr>
<tr><td>Mandarines</td><td>$1.99</td></tr>
</table>
</body>
Now colour the rows differently:

<body>
<table border=”2” cellpadding=”15”>
<tr bgcolor=”#ba55d3”><th>Fruit</th><th>Price</th></tr>
<tr bgcolor=”#ff0000”><td>Apples</td><td>$2.50</td></tr>
<tr bgcolor=”#ffa500”><td>Oranges</td><td>$4.00</td></tr>
<tr bgcolor=”#ffff00”><td>Bananas</td><td>$3.65</td></tr>
<tr bgcolor=”##ff6347”><td>
Mandarines</td><td>$1.99</td></tr>
</table>
</body>
The other attributes that can be used to change the look of tables are: rowspan and colspan.
They are used to merge cells.
Fruit Apples Bananas

Oranges Mandarines
Vegetables Potatoes Carrots
Peas Corn
Add this second table to tables.html
<br />
<table border=”1” cellspacing=”10”
<tr><th rowspan=”2”>Fruit</th>
<td>Apples</td><td>Bananas</td></tr>
<tr><td>oranges</td><td>Mandarines</td></tr>
<tr><th rowspan=”2”>Vegetables</th>
<td>Potatoes</td><td>Carrots</td></tr>
<tr><td>Peas</td><td>Corn</td></tr>
</table>
</body>

You need to add a table and then have different versions of the same table. Begin with a plain
table, use attributes to change the look of the table.
P a g e | 19
References
HTML
Tutorials and information on tags can be found at these sites:
http://www.w3schools.com/default.asp
http://www.lissexplains.com/index.shtml
http://www.htmldog.com/reference/htmltags/
http://www.html-tags.info/
Images:
html – http://www.onlinemarketingsydney.com.au/2007/05/how-does-the-history-of-the-internet-
affect-your-internet-marketing/
tick – http://www.thecleanfactory.com.au/epages/thecleanfactory.sf/en_AU/?
ObjectPath=/Shops/tcf/Categories/Competition
amazing html – http://blogs.zdnet.com/open-source/?p=1925
lists – http://www.quake.utah.edu/EQCENTER/LISTINGS/OTHER/yellowregion.htm
images – http://www.techtrainteam.com/services/olt/internet/webpage-4.html
characters –
http://icone.goldenweb.it/index_file/1/en/d2/sistemi_operativi/c/whistler_Xp/default.html
music – http://en.wikipedia.org/wiki/Portal:Arts
tables – http://www.tutorialized.com/tutorials/HTML/Tables/1
tasks – http://futureflight.arc.nasa.gov/design.html

Table of Contents

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Table of Contents

Hochgeladen von

Copyright:

Verfügbare Formate

Page |1

Notepad and Basic HTML Tags...............................................................................................4

Characters and Formatting Text.............................................................................................4

Music and Movement..............................................................................................................4

Accessibility: Is the information easy to understand? (Example: A website that explains

Start  All Programs  Accessories  Notepad

Enter the following:

Save your web page using

Name the file basic.html

Web pages need to be

Open Internet Explorer

Use Save As and name the file page1.html

Open Internet Explorer and have a look.

Save your page, keep the name page1.html

Let’s put it together

When creating your webpage use the following tags:

You should also use the following attributes:

<ol type=”1”> Standard numbering 1,2,3

Go back to Notepad and add the following:

<ul type=”dics”> Standard bullet

<dl> </dl> Definition List beginning and end

Go back to Notepad and lists.html and add the following:

Your task is to create a webpage named task2.html

Save your changes, look at your file in Internet Explorer.

Your task is to create a web page named task3.html

Copy cat_and_computer.jpg to your images folder.

Your task is to create a webpage named task4.html

Save the file as characters.html

Now let’s try again.

<b> </b> bold text

Your task is to create a web page named task5.html

There are other attributes for the marquee tag:

behaviour – of the text (scroll, slide or alternate)

Your task is to create a web page named task6.html

<table> </table> beginning and end of a table

align – alignment of table on page (left, right,center)

Now colour the rows differently:

Fruit Apples Bananas

Vegetables Potatoes Carrots

Add this second table to tables.html

Your task is to create a web page named task7.html

Tutorials and information on tags can be found at these sites:

Das könnte Ihnen auch gefallen