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

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

new
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

HTML Fundamentals Text Design and Layout

Guest Author - Elizabeth Connick

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.
This site needs an editor - click to learn more!

Add HTML+Fundamentals+%96+Text+Design+and+Layout to Twitter Add HTML+Fundamentals+%96+Text+Design+and+Layout to Facebook Add HTML+Fundamentals+%96+Text+Design+and+Layout to MySpace Add HTML+Fundamentals+%96+Text+Design+and+Layout to Del.icio.us Digg HTML+Fundamentals+%96+Text+Design+and+Layout Add HTML+Fundamentals+%96+Text+Design+and+Layout to Yahoo My Web Add HTML+Fundamentals+%96+Text+Design+and+Layout to Google Bookmarks Add HTML+Fundamentals+%96+Text+Design+and+Layout to Stumbleupon Add HTML+Fundamentals+%96+Text+Design+and+Layout to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


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


Content copyright © 2014 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 BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor