Worksheet 1 HTML
HTML and website development
Name:...................................................................................................... Class: ......................
Task 1
1. Copy the [Link] and [Link] files to your own file area.
2. Open [Link] in a browser. To do this, double click the file you have just copied.
3. Open the same file in a text editor such as Notepad.
You will now practise changing some of the HTML in order to see changes in the
web page.
4. Change the Title text.
5. Refresh the web page in your browser by pressing F5. What happened?
6. Here are some more changes you could make. Refresh the browser window after
each one.
(a) Change the background colour (Choose a new colour code by using the
[Link]
(b) Change the font size used for text.
(c) Change the width dimension of the picture.
(d) Change the colour of the text.
(e) Change the heading and some of body text.
(f) Change the text justification to left, right or center.
(g) Change the destination of the links by pasting in a new web address.
1
Worksheet 1 HTML
HTML and website development
Task 2
Follow the instructions below in order to create a new web page using HTML
Task Instructions HTML code
Copy the files Copy the
and open [Link] file and
them in a text the [Link] files
editor and web to your own file area
browser. Open the
[Link] file in a
browser; the web page will
be blank
Open the same file in a
text editor such as
Notepad or WordPad
Add a title Write a title in between the <!DOCTYPE html>
which will <title> and </title> tags <html>
change the Save the webpage using <head>
tab or window File, Save or press Ctrl+S <title>New Zealand</title>
title. Switch to the browser and </head>
Refresh or press F5 <body>
Notice what changed </body>
</html>
Add a heading After the <body> tag write <!DOCTYPE html>
to the page. <h1></h1> <html>
In between the new <head>
Heading tags, write some <title>New Zealand</title>
text </head>
Save the html file and <body>
Refresh the browser to <h1>SEE AMAZING SCENERY</h1>
view your changes </body>
</html>
Make the Inside the <h1> tag add a <!DOCTYPE html>
heading style attribute <html>
centre aligned. Save and Refresh the <head>
browser <title>New Zealand</title>
</head>
<body>
<h1 style="text-align:center">
SEE AMAZING SCENERY
</h1>
</body>
</html>
2
Worksheet 1 HTML
HTML and website development
Add some text Add a paragraph tag <p> <!DOCTYPE html>
and an image and set the alignment to <html>
center <head>
Add the <img> tag to <title>New Zealand</title>
include an image and </head>
specify the width as a <body>
percentage of the screen <h1 style="text-
Add some text align:center">SEE AMAZING
Close the </p> tag SCENERY</h1>
Save and Refresh the <p style="text-align:center">
browser <img src="[Link]"
width="50%">
Explore the lakes, rivers and
mountains of New Zealand
</p>
</body>
</html>
Add a break tag <br> to <!DOCTYPE html>
push the text onto a new <html>
line <head>
Save and Refresh the <title>New Zealand</title>
browser </head>
Add <a></a> tags to <body>
create a link and set the <h1 style="text-
link destination to the align:center">SEE AMAZING
[Link] file SCENERY</h1>
Save and Refresh the <p style="text-align:center">
browser <img src="[Link]"
width="50%">
<br>
Explore the lakes, rivers and
mountains of New Zealand
Or <a
href="[Link]">visit
Australia</a>.
</p>
</body>
</html>
Extension activities
Update the web page adding more information, images and links.
Create a page for another country you have been to or are interested in.
Alternatively, create a new page on a topic of your choice, such as a hobby or
interest.