- New Page Title

Tip Sheets

Adv. Activities

More Tip Sheets

Exit

Wholesaler Tip Sheets

Advanced Activities

« Previous 1 2 2b 2c 3 4 Next »

HTML Attributes: Info for Advanced Users

Tags really begin to be useful when you start adding attributes and values to them.

Here is a list of some of the HTML Allowed tags and some common attribute-value pairs for them.

This is not a complete HTML primer but should give you some useful tips for your ABWholesaler.com web site.

Tag Name:

<Tag Attribute="Value">

Break tag

<br>

<br clear="all">
This says "I really really mean a break." It is used when you have used the attribute align="right" or align="left" on an image and there is not enough text to wrap below the image, so that the next image or text does not begin below the baseline of the image.

For example:

This image is aligned left. Now I'd like to start the next bit of content below the image.
But I can't.

Here's the same left-aligned image. This time I use <br clear="all">.
Now I can start to the left again.

Div tag

<div align="center"> Centers whatever is contained in the <div></div> tags.

Font tag

<font color="#CC0000">Looks like this.</font>
Looks like this.

<font size="5">Looks like this.</font>
Looks like this.

<font face="Times">Looks like this.</font>
Looks like this.

You can use them together in the same tag:
<font color="#CC0000" size="5" face="Times">Looks like this.</font>
Looks like this.

The pages in your web site are controlled by an external stylesheet, so your results may not be what you expect.

Generally speaking, web designers are getting away from using the <font> tag and using styles instead.

Image tag

(where ##### is your wholesaler number)

Alt
The "alt" attribute creates the text which appears in the place where the image is loading, or where the images would be when people browse with their images turned off. The devices which read web pages aloud for people with visual impairments read the "alt" attribute in the place of the image, so be sure to make them descriptive, not just "picture 01."

Height and Width
If you use the "height" and "width" attributes on your images, your page will load faster because the computer doesn't have to wait for the picture to come down before it knows how much room to leave.

Align="Left" Align="Right"
The "align" attribute with images is mainly used to influence the text around them. It's tricky, but once you understand it, you'll be able to let your text flow around your images.

DEFAULT - If you do not specify an alignment inside an image tag, all text will start at the bottom right corner of the image and then wrap underneath the image, like this:
Text starts here and continues until it reaches the end of the line and then wraps underneath the picture.

LEFT - If you set the image to align="left" then the image moves to the left, as you would expect, and the text begins at the upper right hand corner, like this:

Text starts here and continues and continues until it reaches the end of the line and then it keeps going and going and going and going and going and going right beside the picture until it runs out of space and has to wrap underneath the picture.

RIGHT - The odd one is align="right". If you set the image to align="right" then the image moves to the right as you would expect, and the text begins as far left as it can go, with the top of the text level with the top of the picture. It continues down the page until it runs out of space and begins to wrap underneath the picture. This seems reasonable, right? So what's odd about it? Well, when you look at your HTML code, you would expect the text to appear first because it starts at the upper left, whereas it's the right-aligned picture which appears first in the HTML code.

MIDDLE
Here is a somewhat odd one, where the image is set to align="middle". The text starts in the middle to the right of the picture and then wraps underneath the picture. I've never found a use for this one, unless the text was very short and didn't wrap.

By the way, align="right" and align="left" work the same way on whole tables, so you can actually wrap text around small tables, too.

Hint: If you just want to put a picture (by itself) on the right or left or in the center, use a <div></div> tag set around the picture, like this:

You can also put an alignment in a table cell, which makes everything in that cell be right or center justified, like this:

The default is align="left" so you don't have to specify it.

Link tag
(Anchor tag)

As explained on the HTML Allowed page, <a href="myfile.htm"> is the way you signify the web address of a link.

Add target="_blank" to have the page open in a separate browser window.

<a name="this"> The "name" attribute places a marker on the page so that you can jump right to it. In the link <a href="myfile.htm#this"> the browser will jump directly to the spot named "this" on the page "myfile.htm." Notice the # between the name of the file and the name of the marker.

Lists

"Unordered" List:(bulleted)
<ul>
<li></li>
<li></li>
</ul>

Type="disc" is the default type for the first level of unordered list.

<ul type="disc">
<li>One thing</li>
<li>And another</li>
</ul>

Looks like this:

One thing
And another

<ul type="circle">
<li>One thing</li>
<li>And another</li>
</ul>

Looks like this:

One thing
And another

<ul type="square">
<li>One thing</li>
<li>And another</li>
</ul>

Looks like this:

One thing
And another

"Ordered" List:
(numbered, or with letters, like outline form)
<ol>
<li></li>
<li></li>
</ol>

<ol type="a">
<li>One thing</li>
<li>And another</li>
</ol>

Looks like this:

One thing
And another

<ol type="i" start=3>
<li>One thing</li>
<li>And another</li>
</ol>

Looks like this:

One thing
And another

Possible values of the "type" attribute are A, a, I, i and 1. They will display ABC, abc, I II III, i ii iii, or 1 2 3 etc. The default is 1 2 3 etc.

Possible values of the "start" attribute are the numbers 1, 2, 3, 4, 5 etc. What you put in the "start" attribute is a number which shows which number or letter in the row to start on. For example, if you start at "5" with the type "A," the entries will be labeled E, F, G etc. The default is to start at the beginning.

<P> Tag

<p></p>

<P align="center"> Places the whole paragraph in the center, with each line centered.
<P align="left"> Left-aligns the paragraph. This is the default.
<P align="right">Right-aligns the paragraph.

Span tag

This tag is generally used with the "style" attribute, and is merely a container for the particular style.

Styles
<span style="font-family: Times;font-size: medium">Looks like this.</span>
Looks like this.

The style attribute is an "in-line" version of a stylesheet, and you can override a style sheet by including a different style inside a tag (any tag). The <span> tag is just a convenient one to use if you don't have another tag close by to use.

Styles use a slightly different syntax than HTML just to drive us crazy. Click here for a styles/HTML comparison chart.

Table tags

The width can be either a percentage or an absolute number, measured in pixels.

A border of "1" is actually two pixels.

Cellspacing is the area between cells. Here is a small table with a cellspacing of 5.

Cellpadding is the area between the edge of a cell and the text and images inside it.

Here is a table with a cellpadding of 0.

Here is text.	Here is text
Here is text.	Here is text.

Here is a table with a cellpadding of 5.

Here is text.	Here is text
Here is text.	Here is text.

Here is a table with a cellspacing and cellpadding of 5.

Here is text.	Here is text
Here is text.	Here is text.

Background Colors: If you would like to add a color to the background of your table, include the bgcolor attribute. The colors are represented by six numbers, two for red, two for green and two for blue: rrggbb.

The colors are represented by "hex numbers," which use a base 16 numbering system (Hexadecimal, or "hex.") The numbers are: 0 1 2 3 4 5 6 7 8 9 A B C D E F. "0" is the lowest value, and the darkest. If all the numbers are 0, as in 000000, you have black. If all the numbers are as high as they can go, you have FFFFFF, or white. Since the web uses light to paint with instead of pigment, mixing all the colors together makes the lightest color, white. FF0000 is bright red, 00FF00 is bright green, and 0000FF is bright blue. Bud Red is CC0000 and Bud Light Blue is 333366.

Be a bit careful when using colors in your tables. If you use a dark color for your background, change the color of the text on it to make the hightest contrast. Black lettering on a dark blue background is a tad difficult to read. Likewise, never ever ever use red text on a blue background or vice versa.The eye makes subtle adjustments to see colors of different wavelengths, and since red has the longest wavelength of the visible spectrum, and blue the shortest, the eye tends to jump back and forth, creating an annoying vibration.

It is customary to indicate the hex colors with a "#" in front of them. Some browsers won't recognize the colors unless you do. It looks like this: <table bgcolor="#FFEEEE">

This aligns all of the contents of the cells in this row at the top.

<caption valign="bottom" align="right"> puts the caption below the table, flush with the right edge of the table.

<caption valign="top" align="center"> This is the default, with the caption is centered over the top of the table.

Alignment inside table cells, both <th> and <td>:

<td align="left"> This is the default.
<td align="right">
<td align="center">
<th valign="top">
<td valign="bottom">
<td valign="middle"> This is the default.

Merged Cells:
You can merge two or more cells using "colspan" and "rowspan."

<td colspan="2">
		<td rowspan="2">
		<td rowspan="2">

« Back to Allowed HTML

On to Styles »