HTML Attributes
View as PDF
Introduction
Formatting of HTML documents is preferably done using the so-called Cascading Style Sheets (CSS). However, the knowledge of basic formatting attributes simplifies learning and understanding of CSS. That is why this page recalls the following basic attributes: background, bgcolor, text, align and anchor.
Customized HTML
The following code results in a simple HTML document with a green client window, yellow text and a hyperlink to a fictive location.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252"/>
<title> Chapter 1 of My Book </title>
</head>
<body bgcolor="olive" text="yellow">
<h2 align="center"><a name="chap1"> Chapter 1 </a> </h2>
<p align="center">
The story continues in
<a href="mybook.com#chap2"> Chapter 2 </a>.
</p>
</body>
</html>
The code differs from the Hello document on the previous page in several aspects. On the first line we specify a transitional, not a strict document. The body tag is followed by two attributes: bgcolor, and text. The level 2 heading tag h2 is followed by the align attribute and encloses an anchor element, which turns the heading into a target of the anchor link in the paragraph segment. The paragraph tag p is also followed by the align attribute. We rendered the text of the document too, of course, to make the situation more sensible. The attributes change the default rendering of the HTML elements by adding color, changing the position, and modifying functionality. In transitional XHTML 1.0 documents, attributes stand after the tag, must be typed in lower case and their values must be literals, which is achieved by enclosing them in parentheses. Multiple attributes are separated by spaces.
Background image
The body element, mentioned earlier, contains several important attributes: background, bgcolor, and text. The background allows us specify a background image for the document. For example, if picture.jpg is a picture saved in the same directory as the html document then
<body background="picture.jpg"> ... </body>
makes picture.jpg the background image of the document. If the picture is smaller then the viewing area of the browser, the picture will be inserted in the background repeatedly and create a wallpaper image. This can be successfully utilized to create interesting effects by means of relatively small pictures.
Background color
bgcolor, the background color, is another important body attribute. If you do not wish a picture in the background, it is still possible to use simple colors. Some of them are in the table below. The numbers after the number sign form the so-called RGB (Red Green Blue) representation of the color and it is fairly handy if the basic colors in the table are not enough.
| Black | #000000 | Silver | #C0C0C0 |
| Gray | #808080 | White | #FFFFFF |
| Maroon | #800000 | Red | #FF0000 |
| Purple | #800080 | Fuchsia | #FF00FF |
| Green | #008000 | Lime | #00FF00 |
| Olive | #808000 | Yellow | #FFFF00 |
| Navy | #000080 | Blue | #0000FF |
| Teal | #008080 | Aqua | #00FFFF |
Text color
Text, like the bgcolor attribute, can be used to change the default black color of the text. It is a good idea to set the color of the text in order to prevent the browser from accidentally using font colors of previously opened documents.
Style attribute
The color effect we get using the background and text color attributes can be achieved by means of the CSS related attribute style, the syntax of which is discussed in detail in the CSS overview.
<body style="background-color:olive;color:yellow;">
...
</body>
The heading h2 and paragraph p elements contain the align attribute, which takes values left, center, and right, respectively.
Anchor
The active link/anchor element a lets the user jump to marked locations within the current document or in a document specified by an URL (Uniform Resource locator) and therefore allows the programmer create hyperlinks in the document. It is worth mentioning that the active link turns the ordinary markup language into a hypertext document markup language, or HTML. The 'true' nature of the <a>...</a> element is determined by the attribute following the a tag. The attribute name turns the a tag element into a target, href changes it into a link. The attribute name in the line
<h2><a name="chap1"> Chapter 1 of My Book</a></h2>
makes the active link
<a href="#chap1"> ... </a>
added somewhere else in the same document jump, on click, to the Chapter 1 header. Suppose, for the moment, that Chapter 1 is contained in a document named book.html, for example, and we want refer to Chapter 1 from a document named errata.html. This can be accomplished by adding in errata.html the link:
<a href="book.html#chap1"> ... </a>
Named anchors must not contain link anchors! Should an anchor serve as both named and linked, write both attributes in one element:
<a name="chap2" href="book.html#chap1"> ... </a>
Interestingly, the href attribute of the anchor can refer also to images, audio files, send an e-mail or execute a Java Script code; see the following examples:
<a href="logo.jpg"> ... </a>
<a href="music.mid" type="audio/midi"> ... </a>
<a href="mailto:mohapl@eminf.com"> ... </a>
<a href="javascript:myfunction()"; ... </a>
Often it is desirable that the referred page opens in a new browser window. That can be achieved using the anchor's onclick attribute:
<a href="#" onclick="window.open('http:...');
return false;">...</a>
Though some of the HTML attributes discussed here, such as background, bgcolor, text, and align are depreciated, those associated with the anchor element are still in force and their reasonable knowledge is necessary for writing of a fully functional HTML document.
References
Web Design Group HTML Help and Web Authoring Reference,
Web Design Group
,
2006
Markup Validation Service,
World Wide Web Consortium
,
2006