HTML Tags Attributes Quick Guide

HTML Tags Complete Reference - Part 3

By Candice Pardue

Start this Tutorial with Part 1 Here

Examples of HTML tags and HTML attributes and how they fit into your web page HTML codes...

In this lesson, we'll take a look at some popular HTML tags and attributes you can use within the "body" tags of your web page. Tags+attributes help to define how your page will look on the Web. From the color, size and alignment of your text to how and where your images or photos will appear, there's an HTML tag or attribute for just about every design function.

Attributes for HTML Tags

First, let's learn about attributes. Attributes are the commands used to amplify, or enhance, HTML tags. They are interpreted by the Web browser (Internet Explorer, Netscape, or other) and define how an HTML tag will work. With attributes, you can define the width of your web page or your main table, or you can define what color the links will be throughout your page or what type of background your web page will have.

There are attributes for your main body HTML tags and then there are attributes that can be used with just about any HTML tag. Below is a list of generic attributes that can go almost anywhere on your web page within the "body" tags.

Generic Attributes and What They Mean

*ALIGN Attribute: Aligns text horizontally for right, left or center.

*VALIGN Attribute: Aligns text vertically for top, middle or bottom of your web page.

*BGCOLOR Attribute: Adds a background color behind an element using numeric, hexidecimal and RGB values.

*BACKGROUND Attribute: Places a background image behind an element.

*WIDTH Attribute: Uses a numeric value to specify the width of images, tables, or table cells.

*HEIGHT Attribute: Uses a numeric value to specify the height of images, tables, or table cells.

Now, let's see some of these attributes in action. Here's an example web page code to show you how these might fit into your web page's HTML code. In the yellow table below, I've highlighted all the tags and attributes in BOLD print so you can recognize them easily.

<html>
<head>
<title> Web Page Example Using Attributes </title>
</head>

<body bgcolor="white" text="blue">

<h1> Headline of your Web Page using the "Heading" Tags </h1>

The examples below show different HTML tags with attributes in use.

<p align=left>This paragraph shows how your text can be aligned at the left side of your web page using the "align" attribute.

<p align=right>Or, align your text on the right side of the page using this attribute.
<br>The "br" stands for line break.<br><br>

<table border=5 width="65%" align=center> The table tags can have attributes as well. Notice the border size of 5 and the "width" assignment of 65% for this particular table tag. Then, the table is aligned to the center of your web page.</table>

</body>
</html>

HTML Tags for Text Formatting and Colors

Just as HTML tags and attributes help to determine the layout of a web page, they also help to control what your text will look like on a web page. HTML tags define the text size, font, color of the text, and how the text is aligned on the web page. Here are some basic text HTML tags to give you an idea of how it works.

*HINT: Stick with Internet-safe colors and fonts when typing text into a web page. Not all fonts and colors are recognized by browsers or certain types of computers on the Web so your web page could look great on your computer or browser, but terrible for your viewers! If you must create a unique font or color, use a graphic image instead and place your unusual font or colored text into the image.

For a quick reference guide about HTML colors, go here:

http://www.webmastercourse.com/articles/html-color-codes-part1/

HTML Tags for Fonts, Color, and Text Size

The good news is you can specify the font, color and text size for an entire page or paragraph using this simple tag: <font face="Arial" color="#FF0000" size="+1">

And... here's this tag in action:

<p><font face="Arial" color="#FF0000" size="+1">Within this HTML tag, the font type is "Arial" and the color is "red" or #FF0000. The text size is +1. You can end a paragraph and start a new font or text look by ending the paragraph with the "</font>" ending tag..... like this....</font>

<p><font face="Arial" color="#000000" size="+2">Then, you can create a new paragraph with different font specifications if you wish. For example, this paragraph will have the font type of "Arial" and the color "black" as well as the size of "+2".</font>

You can even specify a different font color within the same paragraph by surrounding a certain word or phrase with new font tags. Here's the same paragraph as used above, but notice the font tags surrounding the phrase "new paragraph" in the red color to make it stand out on the page. See yellow table below....

<p><font face="Arial" color="#000000" size="+2">Then, you can create a <font face="Arial" color="FF0000" size="+2"> new paragraph</font> with different font specifications if you wish. For example, this paragraph will have the font type of "Arial" and the color "black" as well as the size of "+2".</font>

Now, take a look at the sample web page I created using the above HTML tags and attributes. I realize the page looks "tacky" but this is for example purposes only to illustrate how the tags work.

View Sample Page 1 Here

This concludes the HTML Tags Complete Reference Part 3. Next week, we'll take a look at more popular HTML tags and attributes and how they work.

NOTE: The good news is you don't have to know everything there is to know about HTML tags to design your website.You can actually get started with your own website by just knowing the basics! So, relax as you learn and don't worry about trying to absorb too much at once.

Continue with Part 4 Here...

Article written by Candice Pardue, editor of Web Design Weekly. Learn web design from home with simple step-by-step instructions. The Web Design Training Course for beginners will show you how.

Disclaimer: Even though we have made every effort to provide solid and accurate information with web design ideas in this HTML Tags Complete Reference, Online Success for Internet Business accepts no responsibility or does not insure or imply any degree of success in a web based business or website design career by reading the material listed on this website. Degrees of web or Internet success varies greatly dependent upon the attitudes, attributes and ambition of each individual designer. Please thoroughly check out any information you find on this site before indulging in a web design business or presenting yourself as a webmaster. And now you know a little more about basic HTML tags.

Enter your search terms Submit search form

Web

www.webmastercourse.com

All about Internet Design