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
Jokes & Riddles
Astronomy
Philosophy
Public Health
Canadian Culture


dailyclick
All times in EST

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

g

The HTML Format Tags - Nested and Horizontal Rule Tags
Guest Author - Diane Cipollo

There are several HTML tags that control the look and format of your webpage. One example is the bold tag that you read about in an earlier article. Remember that you used the bold <b> tag to make text appear boldface or dark? But maybe you need even more control over the format of your webpages. That’s what we will talk about in this tutorial. As with all HTML tags, in the format tags the element name of each tag is surrounded by angle brackets.

Nested and Horizontal Rule Tags

<i><b>Nested Tags</b></i>

You might be wondering if you can use more than one formatting tag on the same section of text. Yes, this is called nesting. To nest two tags together, you will place the opening and closing tags of the second tag inside the opening and closing tags of the first tag. For example, you might want to use both the italic <i> and bold <b> tags together. To do this, you will place the opening bold tag in front of the section of text and the closing bold tag after the section of text. Then you will go back and place the opening italic tag in front of the opening bold tag and the closing italic tag after the closing bold tag.
Correct
<i><b>section of text</b></i>

Incorrect
<i><b>section of text</i></b>



<hr>The Horizontal Rule Tag

The horizontal rule tag will create a horizontal line across the entire width of the webpage. Notice that there is no closing tag. The default style of the line will differ depending on which browser your visitor is using. In newer browsers, those supporting Cascading Style Sheets, you have a lot of control over how the line appears on the screen. But when using only HTML, you can control five attributes; noshade, color, size. width and align.

  1. <hr>
    This will result in a line across the entire width of the page and in the default slightly 3D style. If the <hr> tag is placed inside a <table> cell, as it is in this article, the line will go across the entire width of the table cell.


  2. <hr noshade>
    This will result in a line across the entire width of the page without the 3D style.


  3. <hr width="50">
    Result is a line that is 50 pixels in lenght. The width attribute can be set in pixels or percent.


  4. <hr width="50%">
    This will result in a line that is 50 percent of the width of the page.


  5. <hr width="50" align="center">
    This will result in a line that is 50 pixels and centered on the page. You can also set the align attribute to right and left.


  6. <hr width="50%" size="20">
    The size attribute controls the height of the line in pixels.


  7. <hr color="#c00000">
    The color attribute controls the color of the line. You can use color words such as yellow or red. You can also use the hexidecimal color code. This does not work in all web browsers. In that case, your reader will see the default gray 3D line.


← Back





RSS | Previous Features | Site Map


Content copyright © 2008 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. 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
How To Set Up a Mailto Link

Using CSS to Set a Background Image

Choosing the Right Font, Part Two

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