Using Attributes and Values in Tags

An attribute (with or without a value) is an additional command within a tag that allows you to do more formatting with the tag. The syntax is: <tag attribute>. Note that there is a space between the tag name and the attribute. An example of an attribute with a value is: <tag attribute="value">. Again, there is a space between the tag name and the attribute, which also includes an equal sign and the value within quotation marks.

When a tag has attributes, there must also be a closing tag. The closing tag does not contain any attributes or values.
Example: <p align="center">Text to Center</p>.

Attributes to Use with the Body Tag
Use only one body tag in your page!
AttributePurpose and Syntax
backgroundOpens one large image or a small tiled image as the background:
<body background="images/graphicname.gif">
Tiled means that a small image prints across the page multiple times.
bgproperties Allows you to fix the background so your text moves but the background image does not. <body background="images/graphicname.gif" bgproperties="fixed"> Here is an example of this effect.
bgcolorSets the background color for the whole page:
<body bgcolor="green"> or <body bgcolor="#339966">
(We will learn more about hexadecimal color codes later.)
textSets the default text color for the whole page:
<body text="white"> or <body text="#ffffff">
linkSets the default text color for links:
<body link="yellow"> or <body link="#ffff33">
alinkSets the default text color for active links. An active link is a link that is in the process of being clicked.
<body alink="blue"> or <body alink="#0000ff">
vlinkSets the default text color for visited links. A visited link is a link that has been clicked previously.
<body vlink="purple"> or <body vlink="#663399">
Attributes can be combined in a tag:
<body bgcolor="green" text="white" link="yellow" alink="blue" vlink="purple">
Remember! Only one body tag on each web page!

Attributes to Use with the Font Tag
This is a deprecated tag, but we will use it while we are learning HTML.
AttributePurpose and SyntaxValues
faceSets the font for the text between font tags.
<font face="verdana,helvetica,arial">
font names separated by a comma (,)
sizeSets the size for the text between font tags.
<font size="2">
1, 2, 3, 4,
-1, -2, -3, -4
+1, +2, +3, +4
colorSets the color for the text between the font tags.
<font color="red"> or <font color="#ff0000">
16 preset colors or
216 hexadecimal codes
Attributes can be combined in a font tag:
<font face="helvetica,arial" size="2" color="red">

Attributes to Use with the Paragraph Tag, Heading Tags, etc.
AttributePurpose and SyntaxValues
alignSets the text alignment for text within the tags.
<p align="center">Text</p>
<h1 align="center">Heading</h1>
The above tags center text on a web page.
When the paragraph tag contains attributes, there must be a closing tag.
Right, left, center

Attributes to Use with the Horizontal Rule Tag
The <HR /> tag requires a closing "/" in XHTML, the latest version of HTML.
AttributePurpose and SyntaxValues
widthSets the width of the horizontal rule.
<hr width="40%" /> or <hr width="100" />
A percentage or a number representing the pixel width.
sizeSets the height of the horizontal rule.
<hr size="5" />
A number representing the height.

Attributes to Use with List Tags
AttributePurpose and Syntax
type="A"Sets an ordered list to uppercase letters
<ol type="A">
type="a"Sets an ordered list to lowercase letters
<ol type="a">
type="I"Sets an ordered list to Roman numerals
<ol type="I">
type="i"Sets an ordered list to lowercase Roman numerals
<ol type="i">
start="4"Sets an ordered list to begin at 4
<ol start="4">
type="disc"Sets an unordered list to to filled circles (bullets)
<ol type="disc">
type="square"Sets an unordered list to to filled squares
<ol type="square">
type="circle"Sets an unordered list to to open circles (bullets)
<ol type="circle">

You can use a series of attributes and values in a single tag. They do not have to be in any special order.
Just space once between each, e.g., <font color="red" size="4">.

Back to the Week 3 Schedule