logo
g Text Version
Auto
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Society & Culture
Sports
Travel & Leisure
TV & Movies

dailyclick
Bored? Games!
Postcards
Astrology
Take a Quiz
Rate My Photo

new
Manga / Comics
Crime
Cosmetics
Knitting
Breast Cancer


dailyclick
All times in EST

Full Schedule
g
g HTML Site
Elizabeth Connick
BellaOnline's HTML Editor

g

HTML Fundamentals – Text Design and Layout

If you've read Getting Started with HTML, then you're familiar with how to build an extremely simple website in HTML. The next step in developing your site is adding a bit of decoration to your text. After all, you won't want to have every page written in the browser's default font!

We've already seen the paragraph tag <p></p>, which puts the text in between the tags into paragraph format. If you design a page with the following code in the body...

<p>This is a paragraph.</p>
<p>This is another paragraph!</p>

...the page will look something like this:

This is a paragraph.

This is another paragraph!

Incidentally, it is possible to have only the opening paragraph tag <p> in HTML and omit the closing </p> tag. However, this will not work in XHTML, which is the new standard for web design, so it's best to get into the habit of including all closing tags.

The <font> tag is the place to start with customizing your text's appearance. This tag can alter the font type (e.g. Arial, Verdana, Times New Roman, etc.), size, color, and more. As you learn more about website development you'll switch to using CSS (cascading style sheets) to format text, but it's important to understand the <font> tag since many older websites still use it. I've listed some examples of how to use the <font> tag below; I'd encourage you to use a text editing program and browser (as described in the Getting Started with HTML article) to see for yourself how they alter the text's appearance.

<p><font face="Verdana">This text is in the Verdana font.</font></p>
<p><font size="3">This text is very large.</font></p>
<p><font color="red">This text is red.</font></p>
<p><font size="+1">This text is larger than the text above it by one size.</font></p>

<p><font face="Arial" color="green" size="1">This text combines several font attributes.</font></p>

Notice how the <p> and <font> tags are nested in the above examples. If you use tags inside tags, you must close the inside tags before closing the outside ones:

<p><font>These tags are correctly nested.</font></p>
<p><font>These tags are not! Never do this!</p></font>

There are several other tags that you can use to modify text appearance. The ones you'll use most often are the bold tags <b></b> and the italic tags<i></i>. Another useful tag is the line break tag, which can be rendered as either <br> or <br />. The former variant is being phased out as web developers gradually shift to XHTML, so you're better off using the latter unless for some reason you're developing pages in strict HTML. The <br /> tag introduces a line break as follows:

<p>I'm on the first line<br />and I'm on the second!</p>

... which will be rendered in your browser as:

I'm on the first line
and I'm on the second!

Now that you know the basic text editing tags, you can use them to create nicely formatted text for your web pages.

RSS | Related Articles | Previous Features | Site Map


Content copyright © 2008 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact Elizabeth Connick for details.

Digg! g delicious Save to Del.icio.us

g


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor

g features
HTML Fundamentals – The Head Section

Absolute vs. Relative Links

How to Measure Your Site's Performance

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Driving Amount
Much more
Slightly more
Slightly less
Much less

g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2008 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor