Lesson 3: Manipulating Texts

So, how did it go with your first HTML page last lesson? I presume it went well. Because if you don't, you can't go on, and you want to go on. So, now you know the basics about placing Tags and manipulating text in terms of bold, italic, and typewriter styles. That's good, and along with the <HR>, <BR>, and <P> commands you'll be able to play around pretty well with text placement. Now we'll talk about changing text size.

Heading Commands

Heading commands are used extensively in HTML documents to, you guessed it, create headings! How novel.

There are six (6) heading commands: <H1> through <H6>. <H1> is the largest and <H6> is the smallest. Here are their relative sizes:

<H1>This is Heading 1</H1>

<H2>This is Heading 2</H2>

<H3>This is Heading 3</H3>

<H4>This is Heading 4</H4>

<H5>This is Heading 5</H5>

<H6>This is Heading 6</H6>

Note: In later-version browsers (3.0 and above), the numbers 7 and 8 have been added, but in terms of size, there isn't a great deal of difference between them and the 6 heading.

Heading commands create nice, bold text, as shown above, and are quite easy to use. It's a simple H# and /H# command. However, they do have one annoying trait. They like to be alone.

When you use a heading command, by default, you set the text alone. It's like the heading commands carry a <P> command with them. You cannot get other text to sit right up against a heading. It's as if it wants to be, dare I say, a "Heading." Try a few for yourself.

Font Size Commands

Maybe you'd like a little more control over your text size. Well, here it is. The <FONT SIZE> commands. Heading commands are great for right at the top of the page, but these font commands are going to end up as the workhorses of your pages.

There are twelve (12) font size commands available to you:

+6 through +1 and -1 through -6.

As you've probably guessed, +6 is the largest (it's huge); -6 is the smallest (it's a little too small). Here are a few of them in action. There's no need to show all of them. You'll get the idea of their relative sizes. Follow this pattern to place one on your page.

Notice that this first command, <FONT SIZE="--"> is actually doing two things:

1. It's asking for a new font size...
2. then offering a number to denote the font size.

This is what I like to call a command inside of a command. The technical HTML term is an "attribute". When you have that, you denote the attribute with an equal sign and enclose it within quotation marks. Look above. See the equal sign and the plus or minus number in quotes? That's what I'm talking about.

Also notice that the end command for a <FONT SIZE="--"> Tag only requires </FONT>. I should tell you now that there are two other attributes you can use inside the FONT Tag: COLOR and FACE. But even if you use all three inside a FONT Tag, you still only need one </FONT>.

Remember that an attribute is inside of a Tag. When you use an end command, you are closing the Tag, not the attribute. So you only need the one end Tag, like above.

Centering Text

Since you've already done some writing you've no doubt noticed that the text that appeared in the browser window was justified to the left of the screen. That's what's known as the default. It just happens without your specifying any particular justification.

Notice that this text is centered on the page. It's done by surrounding the text you want centered with simple <CENTER> and </CENTER> commands.

Here's what it looks like:

<CENTER>
All text in here will be centered

</CENTER>

Text To The Right

Can you get text to the right? Sure. It's done by setting the text aside as a paragraph unto itself. I'm going to use the <P> command you learned in Lesson 2, but now I'm going to alter it. I'm going to add an attribute to it.

Here's the format:

<P ALIGN="right">Text in here is pushed to the right</P>

See how I added the ALIGN="right" attribute to the <P> command? Okay, but you also have to remember that if you add an attribute to a single Tag like the <P> Tag, or the <BR> Tag (yes, there are attributes for BR), then you'll need to use an end Tag. See the </P> up there?

If you're just using <P> to create a new paragraph, then it can sit all by its lonesome. But the moment you add an attribute=, you need to use the end Tag.

And Lesson 3 comes to an end. Now go and incorporate a few of these Heading, FONT SIZE, and CENTER commands into a page. To do is to learn.

Exercise 3 (Save your work in a floppy disk - to be submitted next meeting.)

Create your own personal information page as listed below. Use the tags that you have learned so far {e.g. <HTML>, <HEAD>, <BODY>, <P>, <BR>, <HR>, <CENTER>, <H#'s>, <FONT "Attributes"...>, Etc}. Save your file and name it excercise3.html (to be submitted next meeting). Next lesson you gonna modify this file to create your resume page.

MY PERSONAL PROFILE
Name: (First Middle Last)
Nick Name:
Address: (P.O.Box____, Emirates)
Contact Numbers:
   Home Phone:
   Work Phone:
   Mobile Phone:
Hometown Address:
E-mail: ([email protected])
Sex:
Date of Birth:
Place of Birth:
Civil Status:
Highest Educational Attainment:
School Attended: (Name of School)
Place of School:
Company Name:
Company Address:
Position: (Specify your position)
Organization: (Community, Religious, etc...)
Special Skills: (e.g. graphic designer, programmer, photographer, singer, writer, etc.)

Tip: Always review your file in your browser as you work (save first before you review) and make changes as you like. Practice, practice, and practice... this is the best way to learn HTML.

Back to Lessons Index

Hosted by www.Geocities.ws