PAGE ANATOMY -101

Before describing how to add META descriptive content to your page's <HEAD>, you should have a basic understanding of all the HTML tags Pagebuilder's editor automatically provides you, and also how its various input data boxes work.

All webpages are laid out more or less the same, even Pagebuilder's pages. This is the standard HTML format used:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<HTML>
<HEAD>
<META NAME="description"CONTENT=>
<TITLE>Your page's TITLE here </TITLE>
</HEAD>

<BODY BGCOLOR="#"TEXT="#"LINK="#"VLINK="#">

~ Your page's viewable content here ~

</BODY>
</HTML>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

This is the basic layout, but with Pagebuilder the
<HEAD> & <BODY> tags are automatically placed over each page and we cannot directly access them. You can, however, put the necessary descriptive META info into your <HEAD> by using the appropriate text-box.

What follows is a more detailed layout of a typical webpage constructed with Pagebuilder. The RED-FONT in the table below is the HTML coding that Pagebuilder's TEMPLATES automatically provide for you, and therefore need not be added by you when constructing your page. The darker sections in the table below explains how the META info-input sections are identified when you use Pagebuilder's various data input boxes.

<HTML>
<HEAD>
<META NAME="description"CONTENT="META info*">
Type your page's META description info*
into your "Page's Description" box
<TITLE>
Type Your Page's Title into your "Page's Title" box - but keep it short since it becomes part of your page's URL
</TITLE>
</HEAD>
<BODY>

Change your page's BODY (backgrounds & link colors) by choosing PB's built-in backgrounds

The info above can only be viewed using a validator.
*Preview & re-publish your page to
set the META info & Title into your page's head.
Below this point is where you would add your visible text
and HTML code into Pagebuilder's text-boxes:

Header-box "Add title (optional)"

[The "ADD TEXT" Box]
~ Your page's viewable content here ~

</BODY>
</HTML>

     Constructing a webpage on Pagebuilder is done by clicking a sidebar, or a button link, and gaining access to the correct data input box...after a little exploring you should be able to locate all of these various "add item" features.

     The bulk of your viewable page's data is entered by using either the "Heading" or "Text" boxes, or via the "add a link" and "list" options.

     The larger "Add-text" box (below the smaller "add title" header-box) is the one most frequently used for adding information. In my opinion, the header-box should never be used since it just adds more unnecesary template code to your page. If you want header text on your page, then in the larger text-box write it like this:

<center><H1> ~ My Title Here ~ </H1></center>

     This will give you an even larger text heading than you would get by using the header-box (which uses only <H3> tags), and it's just as easy.

ADVANCED OPTIONS:

     Since the last upgrade, our former practice of simply adding a 2nd <body> tag to Pagebuilder no longer works. Instead, to add our own backgrounds we must now cancel out Pagebuilder's template <BODY> tag using one of the variations of the AE method to deactivate PB's template <body> tag. Here's my tutorial on that process:

The AE Fix"

     A second method uses tables to add backgrounds...here's a good tute on that method:

GreenMonk's Table Tute

     We can also use javascript to give our pages custom bgcolors and/or link colors:

The Javascript Method.

     Individual link colors can also be changed using CSS:

<a href="URL" style="color:#b22222"> click </a>

The </a> closes the "font-color".

     I recommend RICHARD's Tutorial for learning more about page design and HTML...but remember, as with many tutorials, it's not geared towards Pagebuilder's template format, so ignore that portion of his tutorial which instructs you to begin your webpage with writing a <HEAD> for your page.

~ META Tag Help ~

[Back to Main Page]

~ LINKS ~

CC&P your own tools for Pagebuilder [ClickHere]

CC&P javascript for Pagebuilder [ClickHere]

RICHARD's HTML Tutorial

Also:

Annabella's HTML Help

The Professor's Table Lesson

Draac's Quick Table Lesson