More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Html Practice
Similar to Html Practice (20)
More from ritaester
Recently uploaded
Recently uploaded (20)
Html Practice
- 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