Choose a link to get started:

ALL NEW!!!

 Scrolling Marquees

The Basics

 The Basics
Manipulating Text
Images
Backgrounds
Links

More Advanced Topics

 The <HEAD> Tag
Tables
Forms
Frames
Lists

Advanced Topics

 Image Maps
CSS - Part 1
CSS - Part 2
CSS - Part 3
CSS - Part 4

Additional Topics

 XML Tag Formatting
XHTML - Part 1
XHTML - Part 2

Manipulating Text

          Our next stop on our trip through HTML is at text. The words you see on the page are usually text. I say usually because it can be an image, but that will come later. Text is the simplest of HTML elements to create, but it has one of the most complicating lists of moderators, or tags that change it, in the entirety of the HTML world. However, most of these modifiers will not be included in this tutorial. Only what you need to know for the next few tutorials will be included in this tutorial. To insert text on a page, simply type into the NotePad program, like so :

<HTML>
<BODY>
This is text that will appear on the page
</BODY>
</HTML>

          Notice that I did not include the <HEAD> tag and its modifiers. This is because they are not necessary for a web page, however, they are recommended. The text would appear on the web page like that. However, blank space has no meaning to an HTML program. It will skip over the blank space and read a maximum of 1 space at a time and ignore the rest. Now, to modifiers of text.

           There are several things you can do to text in the world of HTML. Those which you be learning about in this tutorial are :

  1. Breaking Up Text
  2. Coloring Text
  3. Sizing Text
  4. Emboldening Text
  5. Italicizing Text
  6. Underlining Text

          First, let's talk about breaking up text. If you type text on different lines on NotePad, the browser will ignore that line break and substitute a space for the line break. The text does not wrap until it reaches the end of a page. However, there are ways to break text and make it break
on to the next line.

           Breaking up text encompasses two tags, the <BR> tag and the <P> tag. My favorite is the <BR> tag, as it is the least confusing. Let's start there. The <BR> tag institutes one BReak line onto the page. This tag has no attributes as far as I know, but I will keep you posted if anything comes up. Anyway, its use is very simple.

The text here <BR> will break onto the next line

          That would render the phrase "will break onto the next line" one line below that of "The text here" . It requires no ending tag and is therefore the most simple to use. The <P> tag, however, has some attributes and may, mind you may require an ending tag. When the <P> tag is substituted for the <BR> in the example above, it produces two break lines instead of one. Effectively, it creates a new Paragraph. The one attribute that might interest you is the ALIGN attribute. Like that of the <HR> tag, it determines where, horizontally, on the page the text will be. It can be set to either LEFT, CENTER, RIGHT. The default is left.

<P ALIGN="      ">


          From now on through the rest of my site, all separate sections on different tags will have a horizontal ruler separating it from the tutorial before and after it. This will prevent problems involving a confusion on what we are talking about when I start a new section.
          Our next topic of manipulation text is the coloring of text. This can be done using one of several methods, of which only a few will be discussed here. Our first scenario is that you want to change only a portion of the text. This is done using one of the attributes of the <FONT> tag. It uses the COLOR attribute. You can designate a color one of three ways. Only one of those ways will be discussed now, and that is by using the color name. Simply place the name of the color as the value, or text between the quotes of the attribute, of the attribute. Please remember to use the appropriate ending tag, the </FONT> tag. In order to have the tag take effect, please surround the altered text with the <FONT COLOR> tag before it, and the </FONT> after it.

<FONT COLOR="      ">, </FONT>



          Sizing text can be done using one of several ways, two of which will be discussed in this tutorial. The first is using the SIZE attribute of the <FONT> tag. The default size is 4, and the maximum size of the text is 7. Simply place either a "+#" or "-#" as the value of the SIZE attribute. Replace the # sign with any number between 1 and 3 inclusive. This prevents the text from being too big that it crowds the page, or too small that it cannot be seen. Understand??

          The other way of sizing text is by using the Header Tags. There are 6 header tags, <H1>, <H2>, and so forth until you reach <H6>. Like the <FONT> tag, the Header tags also require that they have an appropriate ending tag. <H1> is the largest and <H6> is the smallest.

<FONT SIZE="      ">, </FONT>
<H#>, </H#>


           Our next 3 topics will be shoved in the same section, as they are all small and somewhat related. They encompass 3 tags, the <B> tag, the <I> tag, and the <U> tag. The function of these tags should be pretty clear. The <B> tag makes text bold, the <I> makes text italic, and the <U> tag underlines the text. Just don't forget to use their ending tags. I know the question that is popping into your mind right now. Can these tags be used together? Well, of course the can, just as long as you end them with the appropriate ending tag in the reverse order that they were activated.

<B>, </B>
<I>, </I>
<U>, </U>



Now that you understand the basics of manipulating text, you are ready for tutorial number 3. May I first recommend that you look at the Text Property Reference Sheet to find out what other HTML tags exist to modify text. An example of the modified text is shown with each. Good Luck!!!