Beginner's Circle:Page2

To create a webpage, go to your Webtv main page. Go to the pull down menu located on the lower left hand corner of the page. Then, choose, "Page Builder". If you have not created a Pagebuilder webpage, yet, you'll need to read and sign Webtv's terms of service agreement.

Next. click on the "create" link on the left sidebar menu. Choose the page style that you like. Be sure that the alignment shown matches your taste, too.

Now, to add html code, choose "add an item" and then "text" or "heading". Remember, if you choose "heading", then your text will be in bold print unless you add some font tag coding, which we'll discuss a little bit later You can place your html codes in the big text or heading box, along with your regular text. Press done. If you wish to publish your page, press the publish link on the left sidebar link. This will enable other people to view your page.

We use html to add images, sound, backgrounds and wordprocessing features to our webpages. A normal webpage layout with the html codes would look like this:

In Pagebuilder, you cannot use the body tag to change the webpage background, text color and link colors, because the body codes are already put into the page by the Pagebuilder program without a little extra coding. See the sections below on using javascript or the advanced editor method to customize your Pagebuilder backgrounds and other page wide alterations

See how each tag opens and closes like We don't usually need to or should add opening and closing html tags in Pagebuilder, but this is just an example.

It is very important that the html tags close in reverse order that they are opened.

All our codes in Pagebuilder will be placed within the opening and closing of the hidden body tags by the Pagebuilder program.

I'd like to start out with discussing how to make paragraphs, indents and line breaks.

For one line break, you'd this code No closing tag is needed for

To make a double spaced line to indicate a new paragraph, you can use to start a paragraph and at the end of the paragraph. I find that the code doesn't always work, so I try to use which are actually two line breaks.

Now, to make an indent space at the beginning of a paragraph, you can use &_nbsp&_nbsp. I altered this code to be able to show it to you. To get the correct code, delete the underline between the & and the nbsp. That will indent your line two characters across. If your want more indents, you can add more &_nbsp (minus the underline) codes.

You can change your text color by choosing "add an item" and then choosing "text" or "heading". Then, put this in the large box:

Press done. You must do this for every text or heading box that you put the codes in. You can use any color you wish for AnyColor like blue, green, red etc.

You can also use a hexidecimal color code to represent colors like this:

Here is Owens4 Color Chart with color names and hexidecimal color codes.

You can also change your text size The sizes are from 1 to 7, 7 being the largest font and we use the size attribute to do that. To change the font size merely put in:

or you can add the font size code with your color code inside one font tag like this:

If you want a special kind of text style, you can go to Flaming Text to get a special style for your text like a title or logo.

To change back to your main font simply use a closing font tag

Here are a few simple codes to change the look of the text to bold, italic and typing text style, respectively.

You can use these three tags in your email, too.

If you want to make horizontal lines between sections on your page, it's easy to do. Just use this code and a shaded line will be created to separate sections of your webpage. If you want the line to be filled in, you can use

You may wish to add a link to your webpage. There are several ways to do this. The easiest way is to choose "add an item" and then "links". Now, you can either type in the webpage link or choose from your favorites to add to your webpage.

You can change the link colors from your Pagebuilder links section, too. Select "add an item". Select "links". You will see the place for descriptions on the left side and the place to put the URL's on the right side like this:

(Description)___________(URL)http://_________ On the left side, put something like:

You could also change the font size by adding the size attribute like this:

I like the "add from favorites method", so let's try that. Press the "add from favorites" button. Now, you'll see all the favorites that you've saved to your favorites folder. Check the boxes of the favorites that you want to add as a link to your webpage. You can add up to 25 links per links list section. Then, scroll down to the bottom and press done.

You can also manually put in your links by choosing "add an item" and then "text" or "heading". Now, put this code into your text or heading box:

You can even change link colors by adding font tags inside the opening and closing link tags like this:

And, our link would look like this:

Webpage Title

Notice, how my closing tags are in reverse order of my opening tags.

To add your email link to your webpage, you can use this code:

To add a newsgroup link, go to the newsgroup that you'd like to add to your webpage. Now, click on any post. Press respond. Then, put your cursor in the "group" line. Put your cursor in front of the newsgroup name. They will probably begin with alt.discuss, if you're looking at the MSN TV newsgroups. Now type in news: right in front of the newsgroup name to change it to the newsgroup address.

Now, you're ready to copy and paste the newsgroup address. So, press cmd and A, then press cmd and C. Go to where you want to put the newsgrroup link and press cmd and V to paste the newsgroup URL. Put that newsgroup address in with this code:

An example of a newsgroup link would look like this
Curly Roe's Webv Help Newsgroup

Alignment of Text and Images

I prefer to use the heading box for alignment of text, images and tables. The reason being that the heading box has a default center alignment. The center tags will work in the heading box and tables align much more easier, here.

One thing about using the heading box for alignment is that you will not usually see the new alignment in edit, but you will in preview and if you go directly to your republished webpage. You may need to press cmd and R to see the new change on your published webpage, if you have just editted it.

You can center your text by putting it in a heading box and by using this code:

You can also set the text to the right or the left using the paragraph tag like this:

It would look like this.

Your text here

Your text will be in bold text, though, using this code in the heading box. We can undo the default center alignment in the heading box by using table codes like this: You can easily align your text to the left using this code like this: See this example:
This will align your text to the left of the page. If you want your text to be right align aligned, just replace the "left" with "right" in the code above.

We can use tables in the heading box to set margins like this:

Since the table is less than 100%, I had to add center tags. I don't know why that is, exactly.

You may also want to change the alignment of your images on your webpage. You will need to know your scrapbook URL to realign an image. For help with finding your scrapbook URL, go to Finding Your Scrapbook URL. Remember that your image code is going to be Then, you can center images by using the center tags in the heading box like this: Your images won't appear centered in edit, but they will in preview. You can also align your images to the right or to the left in the heading box by using this code for aligning the image to the right:
To align your image to the left, just replace align="right" to align="left" in the code above.

Using Your Own Backgrounds, Text Color And Link Colors Using Javascript

We can use javascript to add our own solid color backgrounds plus our own text color, link and vlink colors. You will need to choose a solid color page style like the grey one.

Now, let's discuss adding our own solid color background to Pagebuilder. Go to your Pagebuilder webpage. Choose "add an item" and then "heading". Put this code in a heading box all by itself.

I also included a javascript warning, since proper view requires that the javascript is enabled. Be sure to keep the opening and closing html tags with the rest of the code.

There are other javascript codes to add your own text color, link color and vlink color. We can combine those codes along with the background color code to have this:

Fill in your color values for bgColor or background color, fgColor or text color, link color and vlink color. You can use a hexidecimal code like #000000 for black or a color name like orange.

You will need to put these codes on every page that you want to customize.

Changing Backgrounds, Text Color And Link Colors Using The Advanced Editor

Here are the steps to install your basic editor using the noscript tag method.
What we're doing is using the noscript tags to deactivate the Pagebuilder template codes.

This method will deactivate the preset body tag with it's settings for webpage background color or image, text color, link and vlink colors. This will allow you to put in your own webpage settings for those items.

1. Create your webpage

2. Choose the page style that most suits your alignment needs, if you wish to use more than one heading or text box on your page. Otherwise, it doesn't matter.

3. Put in your title for your page.
Choose not to show it on the page. Press publish. This will create an URL without the AE coding. Go back to your edit section.
4. Choose "add an item" and "heading".
5. Put this code in your heading box:

Fill in the background color, text color, link and vlink colors as you see fit.

Your new text and color settings won't show up in edit, but will in preview and on the page.

6. If you want an image background, simply add background="URL" to the body tag like this:.
<body background="URL">
The entire code to place in your heading box, along with the background would look something like this:

You don't need to have the bgcolor code, if you're using an image background but it's useful for those browsers that can't see images or have thier image viewer turned off.

You'll need to find your scrapbook URL to add your own image background.. Here's my tutorial on How To Find Your Scrapbook URL.
7. This next step is very important. Do not forget to do this. Press the "change title" link to add the beginning part of your advanced editor code. Put this code in with your title like this:

Press done. And, then republish to activate the advanced editor codes.

8. If you want to have multiple pages created by page breaks, in order to continue with the advanced editor method on the next page, you will need to put </noscript> after each pagebreak followed by the body tag code that you were using. So, you should choose "add an item" and "heading" and put in your closing noscript code and body code, so it looks something like this:

Much thanks goes to JaxRed, who discovered the noscript advanced editor method and generously shared it with others. Here are his two main tutorials on the subject.

JaxRed's Noscript Method Advanced Editor Tutorial

JaxRed's Multipage Advanced Editor Tutorial

Of course, H17 or Uncle Hughy discovered the original advanced editor that first allowed us to use more customized coding with Pagebuilder! Much thanks, Uncle Hughy!

I hope you enjoyed your stay at the Beginner's Circle. See, the resource links on the next page! Comments or suggestions for this website?Email Me

To Home

To The Top

To Page 3