In the old days tables were used a lot for web page design. Today they have been replaced by div tags. Tables were slow loading while div tags helped the page load faster. We want to look at how div tags can be used in a Facebook Page.

I want you to thing of div’s as nothing more than a box, that can be manipulated. They can be sized, forced to one side of the page, their backgrounds can be colored and their contents can be formatted. We can place images or paragraphs inside of

tags.

I typical <div> tag set up will look like this:

<div></div>

Continued In Silver Level Member Section Below:

[ismember]
[private_silver]

Like all the other tags we talked about this week, the <div> tag has:

  1. A start tag <div>
  2. A closing </div> tag

Both the start tag and the closing tag wrap around the content. Here is an example of a <div> tag wrapping around an image:

<div>

<img src=”http://www.yourwebsite.ca/Images/Logos/facebook_logo_30X30.jpg” alt=”Jeff Brown – Social Media Coach Facebook Page” width=”30″ height=”30″ border=”0″ />

</div>

Notice that the image tag has information on the location of where the file is stored on a website, the “alt” tag which tells spiders what the picture is about and information on the size of the picture. The image tag tells your web browser where to find the picture to display it.

Here is an example of a <div> tag with a paragraph in it:

<div>

<p>The information or text goes in between the “p” tags</p>

</div>

In the above example, a paragraph is contained within the <div> tags.

You can also make two columns by creating two <div> containers and putting one to the left and one to the right side of the page. Putting the <div> to the left is referred to as floating the div to the left.

Here is an example of two <div> boxes floated to the left and floated to the right with widths of  250 pixels each:

<div style=”float:left; width:250px”></div>

<div style=”float:right; width:250px”></div>

The content goes between the >< arrows above. Notice that the float is created by writing in the words style= after the word div. Notice that a semi-colon “;” separates the float direction from the width.

I hope this will you understand the <div> tag a little better. If you have any questions, please ask.

[/private_silver]
[/ismember]