Text
Now, let's try changing your text. There are a number of ways that you can change your text. All of the variables for your text will be included in the <font> tag. This tag needs both an opening and a closing tag. So, for every <font> there will be a </font> tag. In the start tag for the <font> you will put the things that adjust the size, style and color of your text.
Font Face
Lets say that we want a different style font... Say we want Comic Sans MS for instance. In the <font> tag we will enter <font face="Comic Sans MS"> Try entering this before your text, and preview the page and see how the style changes. Don't forget the ending </font> tag.
<body>
<font face="Comic Sans MS">This is my first web page.</font>
</body>
You should see:
This is my first web page.
Text Size
Now, we will want to give your text a size value. Inside the <font> tag we will put in:
<font face="Comic Sans MS" size="+4">
Preview your page now... The font size will be very big. The bigger the number, the larger the font size. Try changing the size to -2 and then preview the page again. Experiment with a few different sizes to see how it changes.
Text Color
Next, we will change the color of your text. Let's change our text to a bright blue.
<font face="Comic Sans MS" size="+1" color="#0000FF">
Save and preview your new page, and see how the color has changed to bright blue. This is how your page should look right now.
<html>
<head>
<title>SAMPLE WEB PAGE</title>
</head>
<body bgcolor="#C0FFC0">
<font face="Comic Sans MS" size="+2" color="#0000FF">
This is my first web page.</font>
</body>
</html>
And your text should look like this if you preview it:
This is my first web page.
Your text is way off to the left. What if your would like to center it on your page? Before the <font> and after the </font> tags, we will put a new tag in our page. The <center> and </center> tags. Try this...
<center>
<font face="Comic Sans MS" size="+2" color="#0000FF">
This is my first web page.</font>
</center>
This is my first web page.
Now your text is centered on the page. Cool, huh?
Concerning Text alignment... We have just seen how you can center your text, but you can also use the <p> tag to do both a larger line break, and to align your text. You can add the atributes for alignment to the paragraph tag.
Left margin, <p align="left">
To the right would be <p align="right">
And centered would be <p align="center">
The paragraph tag also needs the closing </p> tag.
If you are going to align a large block of text, all the same way, you can use the <div> tag, the same way that you used the paragraph tag.
Left is <div align="left>
Right is <div align="right">
Center is <div align="center>
Just remember to close out the section of text with the </div> tag.
  
©2003 From the Heart Graphics and Web Design
All Rights Reserved
|