The Basics of HTML

4. Formatting Text and Changing Body Background Color
   Lets add new tags to expand upon our skeletal structure:
<HTML>
<head>
<title>Title Bar Message</title>
</head>
<body bgcolor=" maroon ">

<H1> <font color=" white ">Welcome to My Web Page! </H1>
<H2> Here is an excerpt from the US Constitution: </H2>
<p> &quot;&nbsp;&nbsp;&nbsp;We the People of the United States.. &quot;
<div align= "center">This sentence is centered.</div>
<br> This sentence is displayed on another line.
</body>
</HTML>


What is new on this page?


The Bgcolor Attribute

The body tag looks different. We've added the bgcolor attribute to it. Bgcolor stands for background color. Notice the syntax. It is follow by an equal sign double quotes and then the name of of the color followed by close quotes. Attributes are added to tags within the bracketing < > symbols.

Colors can be called by their name or their corresponding hexidecimal value. For example to get the color maroon you can code the bgcolor attribute in two different ways:

<body bgcolor="maroon">
<body bgcolor="#800000">

Both ways are equally correct and both will yield the same result. Below is a table of common colors, or see the HTML COLOR page.

Red#FF0000
Blue#0000FF
Yellow#FFFF00
Green#008000
DarkTurquoise#00CED1
White#FFFFFF
Black#000000


Return To The Top


Using the Font Tag to Change the Color of the Text

This is a fairly straightforward procedure. Simply bracket any letters, words, or sentences with the font color tag. The color naming convention is the same as when you use the body bgcolor tag.

<font color="maroon">
<font color="#800000">

Both ways are equally correct and both will yield the same result. For a table of common colors see the above table, or see the HTML COLOR page.

Example:
     I like the color <font color="pink">PINK</font>
Produces the following:
     I like the color PINK.

Return To The Top


The Non-Breaking Space Tag

Following the paragraph tag you may have noticed the series of &nbsp; tags. These are called Non-Breaking Space tags. Yes, the do look like special characters, however the difference in the name is due to the difference in the function. Special character tags replace characters on the keyboard that HTML has reserve for its own syntax. A non-breaking space tag performs a HTML function, it allows you to indent text without inserting a line break. Each NBSP tag stands for a single space. So in the example above the series of five &nbsp; tags means indent the paragraph 5 spaces.

Return To The Top


The Powerful DIV tag

The DIV tag is a kind of catch-all tag. It allows you to assign various attributes to a large section of text. This can be very handy when you want certain sections to line up in a special way. As you become better at HTML coding you will come to understand the value of a kind of all-purpose tag that can distribute attributes.

For now, however, we will use the div tag in a relatively simple form to align blocks of text. In the above example the div tag is place around the title line at the bottom. This tells the browser to take all of the text contained within the div tags and move it to the right.

Here are the alignments available for the DIV tag:


Return To The Top


The Line Break Tag

Just as its name implies the line break tag <br> forces a line break.

Example:
Here is a block of unformatted text:

Amendment 1 Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press, or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.Amendment 2 A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.-The Bill of Rights

Let's make it more readable by using line break tags:

Amendment 1<br>
Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press, or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.<br>
<br>
Amendment 2<br>
A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.<br>
<div align="right">-The Bill of Rights</div>

Here's how it will look in the browser:

Amendment 1
Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press, or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.

Amendment 2
A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.
-The Bill of Rights
Return To The Top


Creative Commons License
This work is licensed under a Creative Commons License.

(<< Back)     [Home]     (Next >>)
Hosted by www.Geocities.ws

1