CONTACT US
The Official Site of New York City - link to home
NYC Government Site
Tutorial Main Additional Tags Creating Lists Creating Links Graphics Tables Web Colors
Additional Tags  


Now that you know about the basics of HTML, we will learn some additional tags and attributes that can be used to present information in better style. The following table identifies the HTML tags for enhancing layout.

Tags and Attributes: Description:
<body> . . . </body> All of the following tags can be used between <body> and </body>.
<body
    bgcolor="#FFFFFF"
    background="ripple.gif"
    text="#000066"
    link="#0000FF"
    vlink="#0000aa"
    alink="#FF9900" >
Under the W3 HTML 3.2 Specification, the body tag supports the following attributes:
  • background colors specified by the bgcolor attribute. Colors for the various attributes can be specified by using either the hexadecimal (#FF0000) or named (red) value of a color. In general it is recommended that you use hexadecimal values.
  • background images specified by the background attribute. You can use JPEG of GIF images as tiled backgrounds for you page. The syntax for adding a background image is:
    <body background="image name">
  • text colors for an entire document.
  • link colors refer to unfollowed hypertext links; default color is bright blue;
  • vlink refers to links that have been previously visited by the browser; default color is purple;
  • alink refers to an active link (when a mouse button is pressed to make a connection); the default color is red.

 

Font Styles
<b>bold</b>
bold Bold, a physical style tag, is preferable to italic for screen displays.
<strong>strong</strong>
strong Strong is the logical style tag corresponding most frequently to bold.
<i>italic</i>
italic Italic, a physical style tag, does not display well on many computer monitors, especially in smaller font sizes. It frequently runs into plain text words or characters that follow.
<em>emphasis</em>
emphasis Emphasis is the logical style tag corresponding most frequently to italic
<address>address</address>
address
Address
is a special logical style tag often recommended for taglines, the portion often found at the bottom of a page that identifies the page author/designer, date of creation and/or update, and the page address. It most frequently displays in italics, which, again, displays poorly. The end of the tag automatically inserts a line break (carriage return) at the end of the </address> tag.
<tt>typewriter</tt>
typewriter Typewriter is a physical style tag used to define monospaced typewriter (courier) font that can be used for computer addresses, e.g., http://lrs.stcloudstate.edu. Courier font or a similar monospace font is the default for most browsers; this can be changed by a user to any font available on their machine, so it may not display as desired. It is under utilized in page design.
<samp>sample</samp>
sample Sample is the logical style tag corresponding to typewriter, and is even less often used.
Latest additions to the HTML Specification.
<font size="+3">font</font>

<font size="2">font</font>

font

font

The <font> tag allows you to change the size, color, and face of a font. These following attributes can be used individually of in conjunction with each other.

Size - The different font sizes range from 1 (smallest) to 7 (largest). The default size of text is 3. Text size can be set in one of three ways:

  • You can specify a basefont size for an entire document.
    <basefont size="4">
  • You can specify a size that is relative to the default size of 3 or the size set by the basefont.
    <font size="+1"> or <font size="-2">
  • You can specify an exact number from 1-7 for the font size.
    <font size="7">
Color - Just as you can do with background and link color you can also set the font color.

Face - This allows you to specify the exact font face you wish the user to see. In order for this to work, the user must have the font loaded on their system. If the specified font is not available, the default text style will be used. In order to increase your odds of the user having a specified font available on their system, list several fonts (in order of preference) separated by commas.

<font face="Arial", "Impact", "Palatino", "Helevetica">

 

<font color=#cc3299>Violet Red</font> Violet Red
<font face="Arial, Impact, Palatino, Helevetica">Font Faces</font> Font Faces

Example

<html>
<head>
<title>This is the Title</title>
</head>
<body bgcolor="#ffff00">
<h2>This is a heading</h2>
<font size="+2" color="#FF0000">This is the first paragraph of the document.</font>
<p>
<font face="Arial", "Palatino">This is the second paragraph. Using <b>bold</b> will emphasize a word in a sentence or paragraph.</p>
<p><font size="-1">This is the third paragraph.</font> </body>
</html>


Practice

Now you can practice what you've learned.
Please type or Copy and Paste the example into the box below and click the "View HTML" button.

  

 

Back Next
© 2003 The New York City Department of Education
Privacy Policy | Disclaimer | Legal | Contact Us | Thank You
NYC Government Website    Mayor's Office | City Agencies | Services
News and Features | City Life | Contact NYC.gov