<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>
" We the People of the United States..
"
<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
- Using the FONT tag to change the color
- The Non-Breaking Space Tag
- The DIV tag
- The Line Break Tag
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 |
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.
Following the paragraph tag you may have noticed the series of 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 tags means indent the paragraph 5 spaces.
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:
Here the Text is Centered. Here the text is justified. Here the text is justified. Here the text is justified. Here the text is aligned Left, the default alignment Here the text is aligned Right
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
| (<< Back) | [Home] | (Next >>) |