Chapter 8--Advanced text formatting

Learning HTML
For Kids!

The advanced
text formatting
tags are:




<blockquote>

<big>
<center>

8. Advanced text formatting

The main purpose of the Web is to communicate ideas. It’s been that way from the beginning. In the early days, content was king—meaning, people just used the Web to present thoughts or offer opinions through words. Pictures, clip art, movie clips and even sound weren’t part of the Web yet. Nowadays, the Web has a totally different look and feel.

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: ...
Bold: ...
Italic: ...
Indented text: <blockquote>...</blockquote>
Smaller type: ...
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:

…

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:

…
…
…

*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  does have it’s advantages,  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.

Selecting type styles can be tricky at times. You must always consider your end user.

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?


Selecting type styles can be tricky at times. You must always consider your end user.


Selecting type styles can be tricky at times. You must always consider your end user.


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. You should always consider your end user.

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>
This is my first web page. There's more to come.

<hr align="center" width="50%">

I am learning how to use the horizontal rule, headline, paragraph and line break tags. Writing HTML isn't as hard as it appears.


Here's a list of items I like about school: 
Science 
Reading 
But most of all--recess!

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>


</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: …
To create italicized text use: …

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:

…

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

Go to Review #2

Back to The Goodell Group