Web Developer Class: Creating a Call Out Box For Your Web Page

Here’s an easy and simple way to create a Call Out box for your content pages. Let’s say you have a content site and for some of the articles you want the readers to pay special attention to a certain piece of information. For example, for my personal site, I started a new series of articles called Editors’ Picks. For each Editors’ Pick, I like to list a rating and value for a particular item. I could simply write that information into the article itself, but I want that information to stand out so that readers can quickly see it.

Sometimes, if a reader sees that an item has a high rating and a low value, they will be more likely to read the full article. By having information like this stand out on the page, the readers benefit by seeing the important information right away.
After you have written the article and know what content you want in the call out box, it’s time to create the table, for example:

<table align=”right” width=”350″>
<tr>
<td>
<div id=”border”>
<p>
Content for the call out box
</div>
</td>
</tr>
</table>

Let’s break this down line by line. First, is the table tag. Within the <table> tag you can set the alignment and the width of the table itself. Tables in HTML do not have to take up the entire width of the page and they do not have be left justified or centered. You have full control on where the table appears on the page and how wide you want it to be. In addition, by having the table aligned, the text wraps around the table. This creates a very professional presentation.

For a call out, I find it best to place the table on the page within the first or second paragraph, and to have it on the right side of the page. That way, as the visitor reads the page from left to right, they will see the title, maybe the first line of the article, and then the specially formatted table should catch the reader’s eye. I also feel that the table should be wide enough to accommodate the text so that the content does not appear squished. It should also not be so wide that it is more than half the width of the article itself. Try to create a call out box that’s less than half the width of the article. You can always experiment with the width to determine what works best for your page.

Next, as with any table, you have to create a table row <tr> and table data <td>. The <tr> tag represents the entire row of the table while the <td> tag represents one cell of the row. You can have has many cells in each row as you like.

As I stated previously, your call out box should be specially formatted with at least a border. A border helps catch the reader’s eye. I like to use CSS and <div> tags, but you can also define the border within the <table> tag as so:

<table border=10>

If you want to define your border through CSS and a

<

div

>

tag, here

’

s some sample code to help you with that:

#frontpage {
  background-color: #FFFFFF;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border: 5px solid #CCCC99;
  padding: 5px;
}

This particular code creates a rounded-corners effect for most web browsers except for the current version of Internet Explorer. IE users will simply see square corners.

Next, I like to add a

tag to format the text, which I also have defined in my CSS, for example:

P {text-align:left; margin:.5em 0 .5em 0; color:black; font: normal 10pt “Verdana”}

Finally, you are ready to place the content that appears in the call out box. After that, close everything up with your closing tags.

Using this technique, you can create a subtle, yet eye-catching means to call out specific content to your readers. They will appreciate your efforts! For an example to see this in an action, you can visit the Editors’ Pick page on Goozernation.com.