html practice

WCCS – ICT11 2009/10 Web Design – Practice HTML 5/10/2010

Mrs. Ester

1

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.

http://www.w3schools.com/html/html_colornames.asp

http://www.w3schools.com/tags/ref_colorpicker.asp

http://www.webmonkey.com/2010/02/color_charts/

Mrs. Ester

2

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.


Mrs. Ester

3

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.


Mrs. Ester

4

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.


Mrs. Ester

5

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.


Mrs. Ester

6

html practice

Education