In fact, the Web has radically changed from its early years. What was once a place that strictly exchanged information is now a place to entertain, sell goods and services, share ideas and especially, learn new things. Designing an inviting page has become an important issue. Now we see tons of graphics, animations, in-the-news movie clips, 3-D computer games and much more. While content is still king, a well designed Web page is now considered equally important—perhaps even the queen.
That brings us to topic at hand: text formatting. Here is where good design begins and fortunately, HTML allows us to do quite a lot with text. There are several tags and attributes to learn, but they all help you—the designer—to create an eye-pleasing page.
In this section, we will cover the following tags and attributes:
- Font styles: <font>...</font>
- Bold: <b>...</b>
- Italic: <i>...</i>
- Indented text: <blockquote>...</blockquote>
- Smaller type: <small>...</small>
- Larger type: <large>...</large>
- Centered type: <center>...</center>
Font tag*
Not long ago, Times Roman was the only font you could use with HTML. It is still the font of choice (the default) for the leading browsers. Today, we can choose different font styles as well as several other font options by using the tag:
<font>…</font>
The font tag gives you some control over how your page will look. But unlike other tags discussed so far, the font tag does nothing without an attribute (remember an attribute describes what the tag should do).We will cover three attributes used with the font tag:
<font size= "#">…</font>
<font face= "type style name">…</font>
<font color= "hex code">…</font>
*A Note to Remember: In the new HTML (version 4.0), the font tag has been deprecated--a big word that means the tag will be dropped in favor of Cascade Style Sheets (CSS). If you would like more information on CSS, please check out the Web site: Style Master to learn more. This changeover--from the font tag to CSS--will happen sometime in the future, but right now many Web sites are still using the font tag. We are in what is called the "transitional period," meaning things are still changing.
Font Size
So far, we have learned that the only way to change the size of our text is through the headline tag. But that causes a problem. One, if you use this tag, all the text changes and secondly, you’ll have paragraph breaks before and after the text. So what can you do if you want to change the size of some text within a sentence? Simple, add the attribute size to the font tag. Here’s a coded example:
Learning HTML code <font size=5> does have it’s advantages, </font> especially considering how important the WWW has become.
The resulting line in a browser:
Learning HTML code does have its advantages, especially considering how important the WWW has become.
Notice how the type increased? You can also decrease your text. Let’s take the same sentence but use size=1.
Learning HTML code does have its advantages, especially considering how important the WWW has become.
By using the size attribute, you can change your text to whatever you like. (By the way, your browser’s default size is number 3.) Here are all seven levels as they would appear in your browser:
font size=1
font size=2
font size=3
font size=4
font size=5
font size=6
font size=7
Font Face
You can also use an attribute that will change the type style of a font. It’s call face. But a word of caution: the face attribute is system dependent. That is, it will only work if the end user has the same typeface (type style) on his or her system. If not, the browser will automatically go with the default of Times Roman. So what you see on your Netscape or Internet Explorer’s page may not be the same for each user.
So how can prevent this problem? Include more than one type face. For instance, let’s say you want the following text to appear in Arial typeface. This is how you would do it.
<font face="Arial, Helvetica">Selecting type styles can be tricky at times. You must always consider your end user.</font>
Your end result will look like this:
Selecting type styles can be tricky at times. You must always consider your end user.
If the user’s computer did not have Arial, the browser would automatically search for the next typeface mentioned, which in this case is Helvetica. If no such type styles are on the computer, then the browser will go to the default type of Times Roman.
Fortunately Windows® 95 and Macintosh® come with a variety of different typefaces:
Arial
Arial Black
Arial Narrow
Book Antiqua
Bookman Old Style
Century Gothic
Century Schoolbook
Courier New
Garamond
Times New Roman
Verdana
You can specify these typefaces, and the browser will easily find them. However, it’s best to specify more than one typeface, just in case an end user is operating Windows 3.0 or has for some reason, taken one of these typefaces off the computer system.
So how does the attribute look for other type styles?
<font face="bookman old style">
Selecting type styles can be tricky at times. You must always consider your end user.
<font face="arialblack">
Selecting type styles can be tricky at times. You must always consider your end user.
<font face="garamond">
Selecting type styles can be tricky at times. You must always consider your end user.
Font Color
In the last section, we discussed text color as an attribute in the body tag. The text color attribute only permits you to color all the type on your Web page. But what if you want to color only a word or two. Then use the attribute color within the font tag. Here’s an example.
Selecting type styles can be tricky at times. <font color="#0033ff">You should always consider your end user.</font>
This will create text that is bright blue:
Selecting type styles can be tricky at times. You should always consider your end user.
Notice two things here. First of all, the color has been specified in hex code (remember we discussed that in the last lesson). Two, since we did not specify the typeface, the type appeared as Times Roman.
Let's apply what we've learned
Step 1 Load your text editor and open the HTML document we have been working on: firstpage.html
Step 2 Here's how to add some attribute codes to your original HTML file. Enter the code listed below in red.
<html>
<head>
<title>This is my first web page.</title>
</head>
<body bgcolor="#ffff00" text="#000000">
<h1 align="center">Hello world.</h1>
<p align="right"><b>This is my first web page. There's more to come.</b>
<hr align="center" width="50%">
<p><font size="5" face="arialblack" color="#0033ff">
I am learning how to use the horizontal rule, headline, paragraph and line break tags. Writing HTML isn't as hard as it appears.</font>
</p>
<p>Here's a list of items I like about school:<br>
Science<br>
Reading<br>
But most of all--recess!<br>
<p>I can also create lists using numbers and bullets. Here is an example of a list with numbers:
<ol>
<li>My first item on the list.</li>
<li>My second item on the list.</li>
<li>My third item on the list.</li>
<li>My fourth item on the list.</li>
</ol>
</p>
</body>
</html>
Here's how it will appear in your browser.
Congratulations, you have just added a new font size, typeface and font color to your Web page!
Other text formatting tags
The other text formatting tags are fairly simple to use and understand.
Bold and Italic tags
To create bold text use: <b>…</b>
To create italicized text use: <i>…</i>
Blockquote
Sometimes you may want to indent a sentence or an entire paragraph. That’s when you’ll want to you the blockquote tag:
<blockquote>…</blockquote>
Small and big tags
To create copy that is slightly smaller than normal:
<small>…</small>
To create copy that is slightly larger than normal:
<big>…</big>
Center tag*
You learned about aligning copy with the align attribute in the last lesson. Fortunately HTML allows us to center text without using an attribute. So when you want to center your copy, it’s simple. Use the following tag:
<center>…</center>
*Please note the center tag is another one that is being replaced in HTML 4.0
Download in PDF Format HERE:
Learning HTML
Posts
No comments:
Post a Comment