Web Application Development Advice & How To
Active Server Pages Development Advice & How To

Shining Star Services LLC
 
Shining Star Services
Articles
ASP.NET
ASP.net Articles
ASP, DHTML, HTML
HTML Tutorial
Auto-select an Element from a Menu or Scrolling List & Save Keystrokes!
ASP Driven DHTML Slider Menus REVISITED One Year Later! Part II
ASP Driven DHTML Slider Menus
ASP Driven HTML Outlines
Reusing Code with ASP Include Files and Subroutines
Security
Hacker Query Check
.htr IIS Security Issue
Databases, Cookies
Functions to Open a Database Connection and Record Set
Setting Up and Using OraSession to Manage Your Oracle Database Objects
Storing Non-Durable Data for Cookie-less Sessions
Javascript
Smart Popups
Javascript: Validate Numeric Fields
Javascript Confirm Form Submission
Javascript Dynamic Text Area Counter
Javascript: Check All and Uncheck All Check Boxes
Javascript Field Validations -- Client Side Scripting
Miscellaneous
Tree Select Demo
Adobe Extension Manager
Scandisk & Defrag Pointers
Standards & Style
Setting Up Your Own ASP Development Templates
Creating a Project Template for Estimations of Time, Tasks, and Resources
To Host or Not To Host
ASP Naming Conventions
HTML Naming Conventions & Visual Interdev HTML Generation
Working with and in spite of the Visual Interdev Design Mode
Commenting Your ASP Source Code
Letters!
Reader Letters

Articles Home

Shining Star Services

  RETURN TO HTML TUTORIAL HOME

HTML Text Formatting
By Nannette Thacker - 01/30/2001

Perhaps you'd like to be different and add content to your web page? hehe

Here are the commands we will learn on this page:

<center>center</center>
<b>bold</b>
<i>italic</b>
<u>underscore</u>
<font size=3>Font Size</font>
<font color=#000000>Font Color</font>
<font color=#000000 size=2>Font Color & Size</font>
<font face="Verdana" color=#000000 size=2>
Font Face & Color & Size
</font>
Line Break<BR>
Paragraph Break<P>

Below are examples of how to use the above commands.

<U>Now</U> is the time for all good
<B>women</B> to come to the aid
of the <I>men</I>.<P>

Notice how the above source code, creates the below text:

Now is the time for all good women to come to the aid of the men.

Some things I'd like to point out:

  1. In my source code, I add line breaks to keep everything visible on the screen, so it doesn't scroll off the right side of the source page. But when it prints to the screen, those line breaks don't matter. A line break must be forced with a <P> or <BR> TAG.
  2. <U> & </U> = The <U> tag Underscores the text. I do NOT recommend using the <U> tag in HTML, because it looks too much like a hyperlink and can be confusing to the viewer.
  3. <B> & </B> = Bolds text between the two tags.
  4. <I> & </I> = Italicizes text between the two tags.
<FONT COLOR="#000080" SIZE="+2">
<B>Hello</B> Nurse!<P>
</FONT>

Creates:

Hello Nurse!

Using the FONT tag, you may add attributes to set the color and size. Even though using SIZE="+2" is a valid attribute, I prefer using one of the seven sizes, such as SIZE=1 SIZE=2 SIZE=3 through 7 -- SIZE=1 being the smallest and SIZE=7 being the largest.

(Note: SIZE=1 results in the same thing as SIZE="1" or SIZE='1'. However, if you plan to program for PALM PILOTS, avoid using the single quote marks in your form field elements.)

Play around with the above command using different sizes with different text to see how it works.

I won't even discuss the <H1> Head tags. I don't use them, nor do I recommend the ugly things. :) Of course, I program using Active Server Pages and Cascading Style Sheets, so I have a better solutions for Heads, which is beyond the scope of this page. Suffice it to say, I recommend setting the SIZE=3 or SIZE=4, putting a BOLD <B> tag around the head, and possibly changing the color, like so:

<FONT COLOR="#000080" SIZE="3">
<B>The Hot Sun</b><P>
</FONT>
The sun is hot, so very hot. I love the hot sun.<P>

Which will create this:

The Hot Sun

The sun is hot, so very hot. I love the hot sun.

Okay, so I hate hot sun. But notice the BOLD tags in the above example. One is in CAPS and the other lower case. It doesn't matter. Mix and match -- HTML is not case sensitive. There are geeks out there who will say "Blah should be capped and blah should be lower case." Who cares.

At the top of this page, I set the FONT tag to:

<font face="Verdana, Arial, Helvetica" size=2>

However, most browsers are set to default to Times Roman, size=3.

Try different FONT commands. What the above command does is this: If the user's machine has Verdana, it will use Verdana. If not, it will see if it has Arial and use Arial, if not, it will see if it has Helvetica and use Helvetica (Macintosh), and so forth.

Just type the name of the FONT that you want to use. However, don't use some weirdo font that Joe Blow user is likely to not have, or it will default to Times Roman and will mess up your beautiful layout.

(Note: HTML TABLEs also need the FONT tag to be redefined for each cell.)

Okay, let's do a full paragraph of formatting!

<font face="Verdana" size=2>
This is Verdana. Notice it is fatter than Arial.<P>
</font>
<font face="Arial" size=2>
This is Arial. Notice it is thinner than Verdana.<P>
</font>
<font face="blahblah" size=2>
This is the non-existent font, blahblah. Notice how
it defaults to my page font, Verdana.<P>
</font>
<font face="Times New Roman" size=2>
This is Times New Roman. Notice it has "serifs"
or "little feet." The above fonts are
"sans serif" -- "without little feet."
Now you've gone and learned latin with HTML!<P>
</font>

This is Verdana. Notice it is fatter than Arial.

This is Arial. Notice it is thinner than Verdana.

This is the non-existent font, blahblah. Notice how it defaults to my page font, Verdana.

This is Times New Roman. Notice it has "serifs" or "little feet." The above fonts are "sans serif" -- "without little feet." Now you've gone and learned latin with HTML!

How did I get the font in the grey examples? View the source and see! I use PRE tags and put the text in a TABLE with a grey background. Too early to learn that yet. So wait until we get to tables.

There are a few more things to do with text and formatting:

Centering & Line Breaks

<center>
This text will be centered.<P>

Line break, with no extra space following.<BR>
Line break, with no extra space following.<BR>
Line break, with no extra space following.<BR>
Line break, with no extra space following.<BR>
Paragraph break, WITH extra space following.<P>
Paragraph break, WITH extra space following.<P>
</center>

This text will be centered.

Line break, with no extra space following.
Line break, with no extra space following.
Line break, with no extra space following.
Line break, with no extra space following.
Paragraph break, WITH extra space following.

Paragraph break, WITH extra space following.

<center>
And for the finale.<P>

<font face="Arial" size=2>
This is in Arial, size 2.
I now want to change the size to size 3.
<font size=3>So I will. I want to change it back.</font>
Neat! I just closed the size=3 font tag to change it back!<P>
I'm still in the <b>Arial</b> font tag. I have not closed it.<P>
</font>

<b><font face="Times New Roman" size=4><i>
I'm going to change to Times New Roman,
size 4, bold, italic.</i></font></b>
It does not matter what order you input the tags,
as long as you exit them in the reverse order.
Of course, Internet Explorer doesn't care.
But Netscape chokes.
<P>
</center>

And for the finale.

This is in Arial, size 2. I now want to change the size to size 3. So I will. I want to change it back. Neat! I just closed the size=3 font tag to change it back!

I'm still in the Arial font tag. I have not closed it.

I'm going to change to Times New Roman, size 4, bold, italic. It does not matter what order you input the tags, as long as you exit them in the reverse order. Of course, Internet Explorer doesn't care. But Netscape chokes.

Notice this line: Reverse order to close tags.

<b><font face="Times New Roman" size=4><i> I'm going to change to Times New Roman, size 4, bold, italic.</i></font></b>



ChristianSinglesDating

ShiningStar.net | ShiningStarSingles.com | Christian911.com