1. WCCS – ICT11 2009/10 Web Design – Practice HTML 5/10/2010
Mrs. Ester
Practice HTML
1. Create Your First Web Page in HTML
a. Open Notepad (All Programs Accessories Notepad).
b. Type the following text (use tab to indent!):
<html>
<head>
<title>My Home Page</title>
</head>
<body>
<!--Here is the text for display -->
----Type a welcome message here ----
</body>
</html>
c. Save as: “index.html“
in a new folder “My First Web Site” on your home drive.
d. Preview in your browser. Where do you see “My Home Page”?
2. Change the colours of your first home page.
a. Change the background colour of your page to “blue”.
b. Change the text colour of your page to #FFFF00.
If you want to use different colours find the colour names or the colour codes on
the following web pages:
http://www.w3schools.com/html/html_colornames.asp
http://www.w3schools.com/tags/ref_colorpicker.asp
http://www.webmonkey.com/2010/02/color_charts/
c. Save your work.
d. Preview in your browser.
e. Print and hand in the HTML file.
1
2. WCCS – ICT11 2009/10 Web Design – Practice HTML 5/10/2010
Mrs. Ester
3. Heading Tags
a. Create a new web page.
b. Insert all the document tags <html>, <head>, <body> and their corresponding
closing tags.
c. Add the browser title: “My Vacation page” in the head section using the <title>
tags.
d. Add the heading “My Vacation to Europe” (formatted with one of the heading
tags) to the body section.
e. Save your page as “vacation.html” in the folder “My First Web Site”.
f. Preview in your browser.
4. Paragraph Tags
a. After the title “My Vacation to Europe”, add the following text, enclosed in
paragraph tags, to the body section:
“Last summer I went to Europe for six weeks. I visited the Netherlands, Germany,
Switzerland, France and England. The most impressive about Europe for me was
the beautiful nature and all the historic buildings.”
b. Insert one line break after “England” to start a new line.
c. Save your page.
d. Preview in your browser.
5. Font and Text Formatting
a. Open “vacation.html” with Notepad.
b. Use the font face “Verdana”, size 3 for the vacation paragraph.
Include the font tag <font…> after the paragraph tag.
Where does the closing tag </font> go?
c. Try
Font size = “1”
Font size = “7”
Font size =“-1” which is one size smaller than the default size 3 and
Font size=“+1” which is one size bigger than the default size 3.
d. Change the font colour to “blue”.
e. Emphasize some keywords using
the logical text formatting tags <strong> and <em> and
the physical text formatting tags <b> and <i>.
f. Save your page.
g. Preview in your browser.
h. Print your HTML file and hand it in.
2
3. WCCS – ICT11 2009/10 Web Design – Practice HTML 5/10/2010
Mrs. Ester
6. List Formats
a. Open “vacation.html” with Notepad.
b. Add an unordered list to the vacation paragraph
Change the enumeration of the countries you visited into a bulleted list.
c. Insert a second paragraph at the end.
Here is the contents of this paragraph:
“What I liked most in Europe was:
1. the friendly people
2. Swiss chocolate
3. the nice little shops
4. the red wine in France
5. the fresh air of the Swiss alps “
Did you use an ordered list to format the last five lines?
d. Save your page.
e. Preview in your browser.
f. Print your HTML file and hand it in.
3
4. WCCS – ICT11 2009/10 Web Design – Practice HTML 5/10/2010
Mrs. Ester
Challenge:
7. Use a table to structure your layout
a. Use tables to structure the layout
for your homepage and
for your vacation page.
b. Save your page.
c. Preview in your browser.
d. Print your HTML file.
4
5. WCCS – ICT11 2009/10 Web Design – Practice HTML 5/10/2010
Mrs. Ester
8. Hyperlink to a Global Web Page
a. Open “vacation.html” with Notepad.
b. In the paragraph of the vacation page:
Change “Europe” into a global hyperlink that links to a website of Europe on the
www.
c. Save your page.
d. Preview in your browser.
e. Print your HTML file.
9. Hyperlinks to a Local Web Page and to Email
a. Open the home page “index.html” with Notepad.
b. Add a link “Europe Vacation” to your vacation page.
c. Include an email link “Mail to Webmaster” to your email address at the end of
your home page in a center aligned paragraph.
d. Save your page.
e. Preview in your browser.
f. Print your HTML file.
10. Graphics
a. Create a new folder “Images” in your folder “My First Web Site”.
From “ICT Data Files” copy
the photo “Switzerland.jpg” and
the animated GIF “email.gif” to the images folder.
b. Open “vacation.html” with Notepad.
c. Add a horizontal line.
d. Add the photo in “Images/switzerland.jgp” to your vacation page.
Set the img attribute align="top“.
e. Save your page.
f. Preview in your browser.
g. Print your HTML file.
h. Build a graphic link. How?
In your home page index.html
replace the text (not the link) “Email to Webmaster” of the email link
by the animated picture in “Images/email.gif”.
i. Save your page.
j. Preview in your browser.
k. Print your HTML file.
5
6. WCCS – ICT11 2009/10 Web Design – Practice HTML 5/10/2010
Mrs. Ester
6
