<-- Back to HTML contents

CONTENTS

• Manipulating text with HTML
  

  The basefont tag
  The bold tag
  The italic, cite, and variable tag
  The underline tag
  The strikethrough tag
  Keyboard, preformatted, typewriter,
  

  plaintext, and sample text tags
  The font tag
  The header tag
  The blockquote tag
  The Q tag
  The blink tag
  The line break, no break, and empty line tag
  The "big" tag
  The "small" tag
  The listing tag
  The address tag
  Aligning text (p and div)
  The div tag
  The span tag
  Centering text
  "Columning" text
  The spacer tag
  The subscript tag
  The superscript tag
  The other title tag
  

Manipulating text with HTML

Text manipulation is the changing of text styles outside of the body tag. You can change the properties of any single letter or word whenever you please. In this section we will discuss the base- font, the bold tag, the italic tag, the underline tag, the base font, preformatted text and typewriter text. We will also discuss changing font color, size, and faces "on the fly", headings, empty lines and line breaks, "big" text, listing and addresses, text alignment and centering.

< b a s e f o n t >

The basefont tag commands your browser on which font specifications you want used as default throughout the document. There are three main elements to this tag. First we will specify a default color:
<basefont color="00FF33">
Now we will add the default size:
<basefont color="00FF33" size=3>
And now we will add the command for the default font face:
<basefont color="00FF33" size=3 face=helvetica>
It's all as simple as that! Now your whole page is set up with fancy colors and no more drab default browser settings.

< b >

You can make text appear bold by adding text between these two easy-to-remember opening and closing tags: <b> bold text </b>
You can also create bold text by using the strong tag:
<strong> Text in between the strong tags is bold, too </strong>

< i >

Italic text is created the exact same way as bold text, only the "b" is replaced by an "i". Look:
<i>italic text</i>
Italic text can also be created using the cite and var tags. Those tags are used to cite works of literature or mention variables. Whatever. Who cares? Here are the two tags:
<cite><var>italic text</var></cite>

< e m > and < u >

Underlined text does not work on all browsers in both tags. The em tag sometimes italicizes on Netcape and underlines on Internet Explorer, but the one tag that always underlines no matter which browser is this tag: <u>underlined text</u>

< s > amd < s t r i k e >

To make a strikethrough appear through the text on your page you insert one of two tags before and after the selected text. You can use either of these:
<s> or <strike>....</s> or </strike>

How simple is that?

< t t > and < p r e > and < k b d > and
< p l a i n t e x t > and < s a m p >

Preformatted text and typewriter text perform the same function They each set text off from the other text by a paragraph seperation and change them to a courier-like font. Here is an example:
<pre>

preformatted text

Using these four following tags does the same: <tt> or <kbd> or <plaintext> or <samp>.... </samp></plaintext></kbd></tt>

I'm not exactly sure why someone would want to do that. It's ugly. And there's more than enough tags to do the same thing. Beats me.

< f o n t >

The font tag is used to change font elements "on the fly", as opposed to changing their default settings in the body tag. This tag opens with the <font attribue=____> tag and closes with the </font> tag.
Thus all the text in between those two tags is changed to however you set it to. There are three elements, or attribues, to the font tag, and they are "size", "color", and "face". Now I will explain them:
You use size to change the size. This works in a number system that is different than the header number system. In this system the bigger the number the bigger the font size.
You use color to change the color. This will work with either hex codes or the words. Here is an example of both:
<font color="red"> and <font color="FF0000"> both mean the font will be red.
You use the face element to change the face of the font displayed. For instance, to make the font become arial you would use this code:
<font face=arial>

Tying all those elements to change the text appearance considerably requires nothing more than joining them. Here is an example of using all three elements in a tag:
<font size=4 color="red" face=arial>
Now on to the header tag...

< h # >...< / h # >

The heading tag is used to increase the size and thickness of words and put an empty line after them. This tag creates a heading:
<h#>heading</h#>

You insert a number, 1 - 6, into the spot holding the pound symbol. In heading size 1 is the largest and 6 the smallest. The text in between the opening and closing tags will be bold. Here are examples of the 6 heading sizes:

H1 is largest

H2 is the second biggest

H3 is the sorta big

H4 is almost normal.

H5 is really rather small

H6 is small

You can use the align tag with this. Look:

This is H3 to the right

That was done with this:
<h3 align="right">This is H3 to the right.</h3>
And that sums up the heading tag.

< b l o c k q u o t e >

Blockquotes are quotes that are indented on both sides, therefore "blocking" that section of text into a snug, little section of the body, seperated from the rest of the information, and therefore more visible. They have little use otherwise, except in layout. It's a good way to keep text away from the sides of the screen, where there might be something on your background you might want people to see.

Here is an example of a blockquote:

If you wanna leave, take good care. Hope you have a lot of nice things to wear. But then again a lot of nice things go bad out there. Oooh, baby, baby it's a wild world. It's hard to get by just upon a smile. Oooh, baby, baby it's a wild world, and I'll always remember you like a child girl. -Cat Stevens, Wild World

And here is the HTML for that:

<BLOCKQUOTE>If you wanna leave, take good care. Hope you have a lot of nice things to wear. But then again a lot of nice things go bad out there. Oooh, baby, baby it's a wild world. It's hard to get by just upon a smile. Oooh, baby, baby it's a wild world, and I'll always remember you like a child girl. -Cat Stevens, Wild World</BLOCKQUOTE>

Blockquotes can also be used to slightly align text off of the two sides of the browser, but I think I already said that. Oh, well. Now that I said it twice maybe it'll help twice as much.

< q >

< b l i n k >

The blink tag is the evilest command ever handed down and given to people with computers. No single HTML tag, not even the frame tag, has evoked as much fear and disgust into the hearts of innocent visitors as the blink tag has. It's a virtual tool of satan, if you ask me.
But here it is, anyway:
<blink>blink</blink>
That above HTML does this dastardly deed:
blink
Frightening, isn't it?

Check out this link, I find it funny. And look at the URL. Odd, huh? I have no idea how I happened upon this page, but it still freaks me out a bit. Click here.

< b r > and < n o b r > and < p >

Empty lines and paragraph breaks are two of the most basic elements of the text in the body of your web page. Text has to look nice in order to get visitors to bother reading what it is you have to say to them. Just like in English class, the nicer your presentation looks, the more attention it gets. Now, in order to end a line and begin a new line with no vertical space in between the two lines, you use the tag:
<br>
If you are looking to end a paragraph and start a new paragraph, allowing one line worth of vertical space in between the two paragraphs, you use the tag:
<p>
Those two tags are easy to remember because of their names:
<br> means "break". <p> means "paragraph".

Examples of both:

The cats in the cradle and the silver spoon, little boy blue, and the man in the moon, when you comin' home said "I don't
know when", but, boy, we'll have a good time then,

my boy, we'll have a good time then.

In this example, the tag for a break was used after the word "don't", and the paragraph tag was used after the word "then".
In order to keep a line of text continuing unbroken for as long as you'd like, so that the viewer must scroll to the right to read it, use this tag before and after the selected text:
<nobr>This line would contain the unbroken text</nobr>

< b i g >

The big tag is a fun tag. At least I think so. This tag with each use increases your font size by one. If you had a size 5 font, doing this:
<big><big>New size</big></big>
would turn that size 5 font into a size 7 font in between the "big" tags. How simple is that? For example, on my page 3 bigs make this: BIG!!! text. Scary.

< s m a l l >

The small tag is equally as fun as the big tag, and equally as easy. Look:
<small><small<>small><small>Really small </small></small></small></small>
That HTML makes this text:
Really small
Can you dig that?

< l i s t i n g >

The listing tag shrinks your text down to a very small font, just about the size of those very small listings at the bottom of certain very official looking pages. It's nice to use when writing a copyright line or a disclaimer. This stuff is the small print.

That example was created with this HTML:
<listing>This is a listing example</listing>

< a d d r e s s >

The address tag is very similiar to the previous tag we did, the listing tag. This tag, though, isn't used for the default size of most disclaimer lines but instead is used for the default size and style of most address lines, like this one:

That was created with this code:
<address>Robert Romano
29 Water Road
Rocky Point, NY 11778
</address>

< p a l i g n> and < d i v >

Aligning blocks of text to one side of the page or in the center requires a wider use of the "p" tag. Instead of just using that tag with only it's opening as an empty line tag, we will now use the closing tag also to block off how much text will and won't be aligned. Here is an example:

I don't mind stealing bread from the mouths of decadance, and I don't mind stealing bread when their cup's already over filled. (I think I screwed up the lines)

That was done with this HTML:
<p align="right">I don't mind stealing bread from the mouths of decadance, and I don't mind stealing bread when their cup's already over filled. (I think I screwed up the lines)</p>
You can also use the div tag to align text to a side of a page. The div tag is below:
<div>
To align text to the right, like the other example, you use the same idea as with the paragraph align tag. Here is the HTML for aligning a paragraph with the div tag:
<div="right">This is aligned to the right.</div>
And that HTML creates this:

< d i v >

The div tag is used to block off parts of the html document that are assigned certain values. This tag is used, like the p tag, in html to create a paragraph block of text with one line of white space around it. In CSS, though, this tag is widely used to differentiate which "styles" apply to which blocks of text.

< s p a n >

The span tag is used in html to seperate inline objects. An inline thingie is one that is not seperated by white space, such as the b and i tags. Span can be used in style sheets, like the div tag, to seperate elements with different attributes.

< c e n t e r >

Centering images and text on your pages will really improve the overall design and layout of the page. Not only do images often interfere with text and other page content if not "restrained" correctly, but they look boring if they're all lined up against the left edge of the browser window.
So, one solution to this heinous problem is centering. Centering can be applied to both text and images, and centering takes whatever objects the tag encloses, and centers them. Amazing. Now I'll show you some examples of centering that can be used to spruce up your page a little bit, one with text and the other with an image.

<center>This line is centered,<br> and so is this line,<br> and even this one.</center>

A house divided against itself

A house divided against itself <center>cannot stand. </center> A house divided against itself <center>cannot stand. </center> A house divided against itself <center>cannot stand. </center> A house divided against itself <center>cannot stand. </center>

<center><img src="button.gif"></center>

That Paint Shop Pro picture is centered, as is the top text example. In the second example, the one featuring part of "honest Abe's" House Divided speech, I centered part of each line, but not the other parts. As you can see now, like with headings, tags often force line breaks.

< m u l t i c o l >

Mulitple columns will not be covered on this page. Instead, click here for the tutorial. I do this because many browsers do not support columns and it will screw up this page if your browser can't handle it.

< s p a c e r >

The spacer tag is used to make white space. It's really quite easy and useful with the layout. As with columns I will not be showing it on this page because a big blob of white space would be ugly in this case. Go here.

< s u b >

The _subscript tag is used to set text lower than the rest. I'm sure I don't need to get too into explaining it since you should be able to see it right now, on the words _subscript.
This tag is simple to remember. Look:
_{Subscript Text}
That creates this:_subscript
Groovy, eh? Sure it is.

< s u p e r s c r i p t >

The ^super tag does the opposite of the subscript tag. Simple enough. The HTML for superscript is:
^{This is superscript}
And that does this:^{This is superscript!}

< t i t l e >

The "other" title tag can be used with IE4 to create an alt box when you put the mouse over a link. If you are using IE4 you might notice a "tooltip" or alt box over this link to YAHOO! Do you dig it? If you're using Netscape you don't. Bye, bye.

Continue -->

| Back to Top of Page |