Html Practice

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>

----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

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.

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 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 and and
 the physical text formatting tags and .
f. Save your page.
g. Preview in your browser.
h. Print your HTML file and hand it in.

2

Mrs. Ester

6. List Formats
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

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

Mrs. Ester

8. Hyperlink to a Global Web Page
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.
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

Mrs. Ester

6

Html Practice

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Html Practice

Ähnlich wie Html Practice (20)

Mehr von ritaester

Mehr von ritaester (8)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Html Practice