Advanced Activities

HTML Allowed: Info for Advanced Users

Some of the text boxes allow the use of a limited set of HTML tags. While these tags will not give you complete control over the layout of your pages, you can add some nice touches to the text, and put images and links on your pages.

Unless you have experience with HTML, we recommend that you use the regular text box.

Where tags are in pairs below, be sure to use both. Only two of the tags, <img> and <br>, are standalone.

Blockquote tag

<blockquote>
</blockquote>

The <blockquote> tag indents text from both sides.

<blockquote>Fourscore and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.</blockquote>

Looks like this:

Fourscore and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.

Bold

<b></b>

<b>This text will be bold.</b>

Looks like this:
This text will be bold.

Break tag

<br>

Text with break tags<br> will display on the next line down.

Looks like this:
Text with break tags
will display on the next line down.

Div tag

<div></div>

The <div> tag is used to mark a section of the page so that an attribute can be assigned to it. Click here for a discussion of useful attributes.

<div align="center">This text will be centered.</div>

Font tag

<font></font>

This text will be <font color="#CC0000">bud red</font>.

Looks like this:
This text will be Budweiser red.

The pages in your web site are controlled by a style sheet, so your results may not be what you expect.

This is a sub-header tag. <H3>Sub-sub Header</H3>

On the ABWholesaler site, it looks like this:

Sub-sub Header

This is a sub-sub-header tag. <H2>Sub Header</H2>

On the ABWholesaler site, it looks like this:

Sub Header

Image tag

<img src="">

To refer to an image which you have uploaded into your directory, type

<img src="/images/wslr/#####/yourpicture.jpg">

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

You must upload your picture separately. The upload procedure is found under the red button marked "upload image." Click on the Browse button and select your image on your hard drive, then click on the Upload button.

Italic

<i></i>

<i>This text will be Italicized.</i>

Looks like this:
This text will be Italicized.

Link tag

<a href=""></a>

A linking tag (also known as an anchor tag) lets you link to other pages in your site, to other sites, or to images.

The "href" is the hyper reference, or the page to which you are linking. You must put in the complete web address or URL. (Universal Resource Locator - can you tell that the web was run by Unix programmers in the early days?)

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

For example:

Check out some great beer gear at <a href="http://www.budshop.com" target="_blank">Bud Shop</a>.

Looks like this:
Check out some great beer gear at Bud Shop.

Lists

"Unordered" List:
<ul>
<li></li>
<li></li>
</ul>

Here is an "Unordered" list (it has bullets):
<ul>
<li>One thing</li>
<li>And another</li>
</ul>

Looks like this:

• One thing
• And another

Here is an "Ordered" list (it has numbers):
<ol>
<li>One thing</li>
<li>And another</li>
</ol>

Looks like this:

1. One thing
2. And another

<P> Tag

<p></p>

The <p></p> tag is a container tag for the information in a single paragraph.

In the early days of web development, people often put a single <p> tag as a line break - this is NOT recommended, since there may currently or in the future be styles applied to the <p> container. If there is no closing </p> tag, the style would then be applied to everything on the page that came after the first <p> tag.

We recommend using the <p></p> tag in pairs to enclose paragraphs. The paragraphs will be separated by one line break.

If you really need that line break, and you can't put the information inside a <p></p> pair, use 2 <br><br> (break) tags instead.

Span tag

<span></span>

This tag is generally used with the "style" attribute, and is merely a container for the particular style. Click here for a discussion of styles.

<span style="font-family: Times; font-size: medium;">This text will be Times.</span>

Looks like this:
This text will be Times.

Superscript



This text will be ^{moved up}.

Looks like this:
This text will be ^{moved up}.

Table tags

Tables are very powerful, and allow you to lay out a page in columns and rows. Use these very carefully. Be sure that they are properly nested (see below), and that you close all open tags.

Table

<table></table>

Caption (optional)

<caption>
</caption>

Allows you to set a caption for your table.

<table width="80%">
<caption>Where you can go to get a Doc's Sweepstakes ticket</caption>
<tr>
<td>Murphys</td>
<td>124 South Main</td>
</tr>
</table>

Looks like this:

By default, the caption is centered over the top of the table, but you can change it with the "align" and "valign" properties.

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

Table Row

<tr><tr>

Table header
(optional)

<th></th>

Table cell
( "table data")

<td></td>

Sample Table

<table border="1">

  <tr>
    <th>Column 1
    </th>
    <th>Column 2
    </th>
  </tr>

  <tr>
    <td>Cell 1
    </td>
    <td>Cell 2
    </td>
  </tr>

</table>

All table tags come in pairs, and are nested. Like Russian dolls, where a small doll is inside the medium-sized doll and a medium doll is inside the big doll, table cell tags (<th></th> and <td></td>) are inside table row tags (<tr></tr>) and the whole thing is inside the table tag (<table></table>). See what it looks like at the left.

Here is what the table to the left looks like:

Notice that what is written "down" the page within a <tr> (table row) goes "across" the page when it is displayed. It is entirely logical, but possibly confusing at first.

To get a better feeling for what table tags do, right-click somewhere on this page where there is no image, and choose "view source." You can learn a lot from what you see.

If you do not want a border, you can leave out the border="1" attribute or change it to border="0".