TU STUDIES
Using Computers
Web Site Design Module
Task 6
Fun With Fonts
So far all of the changes we have made to colours have affected the entire web page by changing the BODY tag. It is possible to change the font face, size and colour of any part of the text individually in much the same way as we have done using the Bold and Italic tags. This is done using the <font> tag.
<font> on its own does nothing, it needs to be padded out with attributes to tell it what you want to change in a similar way that we have added border or width= to a <table> tag.
Examples
This table shows various font tags in the left hand column with an example of what that does to the text in the right hand column. Don't forget to close the tag with a </font> after the text you want to change.
| <font color="green"> |
I can change fonts! |
| <font color="#FF369A"> |
I can change fonts! |
| <font size=2> |
I can change fonts! |
| <font size=4> |
I can change fonts! |
<font face="times new roman"> |
I can change fonts! |
<font face="ariel"> |
I can change fonts! |
<font face="verdana" size=4> |
I can change fonts! |
Headings
Another way to make certain parts of a document stand out it to use heading tags. These are very simple tags in the form <H1> ... </H1>. Heading tags take up default values where H1 is the biggest and H6 the smallest. The headings on this web page do not use the default values, they are controlled by a page called a Cascading Style Sheet, we will look at these later.
Heading H1
Heading H2
Heading H3
Heading H4
Heading H5
Heading H6
Try adding font and heading statements in to your web pages.
Click here for the next worksheet