Html Practice

1,682 views
1,563 views

Published on

Some practices that go with the Sldeshow "Introducing HTML"

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,682
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html Practice

  1. 1. WCCS – ICT11 2009/10 Web Design – Practice HTML 5/10/2010Mrs. EsterPractice HTML1. 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. 2. WCCS – ICT11 2009/10 Web Design – Practice HTML 5/10/2010Mrs. Ester3. 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. 3. WCCS – ICT11 2009/10 Web Design – Practice HTML 5/10/2010Mrs. Ester6. 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. 4. WCCS – ICT11 2009/10 Web Design – Practice HTML 5/10/2010Mrs. EsterChallenge: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. 5. WCCS – ICT11 2009/10 Web Design – Practice HTML 5/10/2010Mrs. Ester8. 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. 6. WCCS – ICT11 2009/10 Web Design – Practice HTML 5/10/2010Mrs. Ester 6

×