Ross Sheppard High School
Computer Programming 10
Student Learning Guide
More HTML Tags - Working with Text

1. In the previous assignment, you learned some basic HTML tags. In this assignment, you will learn how to improve the look of your home page by adding more tags. Open the web page called index.htm that you created for the previous project.
   
   
   
   
2. Do not add any tags to your Web page that are not required in this project and the ones that follow.
   
   
3. The first tag that you can use to enhance your web page is the CENTER tag. The syntax – how it is used – is shown below:
   
   
4. <CENTER>
   
   
5. and to end CENTER:
   
   
6. </CENTER>
   
   
7. Add the CENTER tag to the head section of your home page as illustrated below:
   
   
   
   
8. You can use the STRONG tag to have your text appear in bold on your web page.
   You can use the EM tag to have your text appear in emphasis, or italics on your web page.
   The syntax for these two commands is:
   
   <STRONG> and </STRONG>
   <EM> and </EM>
   
   
9. In the body of your home page, add the following line of text: This line of text is STRONG. Do not forget to use the <BR> to start a new line of text.
   
   
10. Add another line of text: This line of text is EMPHASIS. Your home page should resemble the one illustrated below:
    
    
    
    
11. View your home page using Windows Internet Explorer. It should look like the illustration below:
    
    
    
    
12. Another element that you can add, which is useful for separating sections in your home page is the Horizontal Rule. When you use the HR tag, a line is drawn across your web page. The syntax for HR is:
    
    <HR>
    
    Note there is no /HR tag.
    
    
13. You can change the width of the horizontal line by adding a size attribute to it. An example of such a tag is:
    
    <HR SIZE=1>
    
    
14. The size attribute for the horizontal line can be between 1 and 10. On your Web page,

15. Add a horizontal line for each of the widths from 1 to 10. Be sure to label the lines with a caption as shown below:
    
    
16. 
17. The FONT tag can be used to specify the attributes of the font, such as the size and the color. To specify the size of the font, use the font tag plus SIZE= plus the numbers 1 through 6, with 1 being the smallest font size. The default font size is 3, which is the size you are reading now. FONT SIZE=1 is the smallest, while FONT SIZE=6 is the largest. The syntax for the FONT tag is:
    
    <FONT SIZE=X>
    
    where X is the size from 1 through 6. FONT requires /FONT.
    
    
18. Create a FONT SIZE sample for each of the fonts sizes 1 through 6, as shown in the sample below:
    
    
    
    
19. View the results of your font sizes in Windows Internet Explorer:
    
    
    
    
20. Another useful tag is the HEADING tag. This tag is usually used in the heading section of the web page rather than in the body. The syntax for HEADING SIZE is:
    
    <HX>
    
    where X is the size of the heading from 1 through 6 with 1 being the largest and 6 the smallest. The HEADING tag requires /HX (/H6, for example) to end the size.
    
    
21. As you did for #10 above, create a sample for each heading size 1 through 6.
    
    
    
    
22. Change the heading of your page to size H1 and make the text strong.
    
    
23. Another tag that can be used to change the appearance of your text is the FONT FACE tag. The syntax for the FONT FACE tag is:
    
    <FONT FACE="name of font here">
    
    
24. To end a Font Face and return to the default Font Face, use the end FONT FACE tag:
    
    </FONT FACE>
    
    
25. If you wanted to use the font called Arial, then the tag would be:
    
    <FONT FACE="arial">
    
    
26. You need to remember that not all computers will have the same fonts as your computer, so be sure to use fonts that are common to most computers.
    
    
27. Add three lines of text, each using a different Font Face, with the text naming the Font Face as shown in the example below:
    
    <FONT FACE="arial">This Font Face is Arial</FONT FACE>
    
    
28. Depending upon the Font Faces you use, your Web page should be similar to the one shown below when you view it in the browser.
    
    
    NOTE: These Fonts are not necessarily available on your computer. Be sure to check the fonts available on your computer when choosing a Font Face.
    
    
29. You can combine FONT tags to include size, colour, or any other font attribute as shown in the example below:
    
    
    
    
30. Use three different Font Faces than you used above that make use of three different Font Colors, and three different Font Sizes. Use two other text attribute tags such as Bold or Emphasis, and one alignment tag. Show your creativity!
    
    
31. The last tag that you will learn for this project is the paragraph tag. The paragraph tag has both a beginning and an ending tag:
    
    <P>Starts a paragraph while this tag ends the paragraph.</P>
    
    
32. The purpose of the paragraph tag is to add a small amount of vertical space between paragraphs.
    
    
33. Using the paragraph tags, create two paragraphs of text consisting of about 100 words each.
    
    
34. Click here to see the marking guide for this project.
    
    
35. Make a copy of your folder and place it in your "Hand In" folder for grading.
    
    
36. One of the advantages of the Internet is being able to create links on your home page that jump to another home page somewhere on the Internet. Creating links is the topic of the next project.