<font size="7" color="#FF0000"><b><marquee>JavaScript Failure... Reload.... "Cmd"+"R" Until you see the title in the status bar! Reload... Reload...</marquee></b></font>

To begin with you should have read the preceding pages Simple HTML Home Page Building, Web Tools Introduction and HTML Codes so you will have a basic understanding of how this all works. If you have not done so click on the one(s) you haven't read and start there. If you have completed those click on and assign the Links & Tools Page to one of your F Keys now if you don't already have it assigned to one. If you don't know how to assign a page to your F Key the instructions are on the Web Tools Introduction page.

NOTE: Anytime you work in a write area where you can edit like an email write screen, the "Sig In A Box," a web page editor or any forms textarea if you don't have your text setting on "small" you may run into problems with things not working due to "ghost spaces" that you won't be able to "see" with your text setting on "medium" or "large." This hold true for both typing and cut, copy & pasting.

This Index is placed here for a quick jump when you need to return for reference.

These are the very basic HTML codes you will need to learn to put links, images, backgrounds and sounds on your Home Pages.

All Home Page codes (commands) will basicly look like the following. They are not case sensitive and can be written in CAPS or lower case or a ComBinAtIoN of both.

URL, gif & jpg, link, link & vlink. URL means Uniform Resource Locater and is the same as the address of your house. It is the address (addy) and allows the browser to search for a specific site to go to. They begin with http:// URLs ARE case sensitive and where a capital letter is displayed it must be written as such in your address. GIF & JPG are simply two formats of images. Sometimes you may see jpg written as jpeg. Link is highlighted text or an image you can click on to take you to another location. Link within the body tag represents the color a link will be and vlink represents the color it will turn to once you have "visited" that link and returned.

NOTE: It is very important when writing and checking codes that spaces are included where needed like between IMG & SRC and A & HREF as shown in the examples below. Equally as important is the inclusion of every single " quotation mark. The omission of a single quotation mark may make your code not work and some computer browsers will not render it. Also be attentive not to put any spaces when none belong. Always check you have a lesser than and greater than sign <<> > at each end of the command.

Under no circumstances do you EVER use more than one set of HTML tags per page. (Only exceptions being inside a textarea.)

Note: It is not necessary to put all these codes on different lines with spaces between them and in fact some computers make an entire page of codes and text like one long continous sentence in one large paragraph. We put them on different lines for editing purposes so we can more easily tell where and what the codes are.

<<>HTML>
Entire contents here.
<<>/HTML>

Next comes the <<>HEAD> <<>/HEAD> tags. Nested in between the HEAD tags will be your <<>TITLE> <<>/TITLE> tags. What you type between the title tags will show up in the status bar at the bottom of your screen and also when someone saves your page to their favorites it will show up there but does not show up on the page its self. So now we have:

<<>HTML>
<<>HEAD>
<<>TITLE>My Web Page<<>/TITLE>
<<>/HEAD>
Body tags and page contents next.
<<>/HTML>

Setting the color of your background and the color of the text is controlled within the <<>body> tag. You can change the following colors to whatever suits you. Just be mindful to use colors that contrast well to make the text easly readable. Also in the body tag you will set a link and vlink color. Link is the color any Hyper (clickable) link will be before it is clicked on and the vlink (visited link) will be the color the hyper link will turn to after it has been clicked on and you return to the page so you can tell the links you have already visitied. To make a beige colored background say with black text and blue links and red vlinks the codes would now look like this:

<<>HTML>
<<>HEAD>
<<>TITLE>My Web Page<<>/TITLE>
<<>/HEAD>
<<>BODY BGCOLOR="beige" TEXT="black" LINK="blue" VLINK="red">
Entire page contents here.
<<>/BODY>
<<>/HTML>

If you want to add a body background (BG) image (gif or jpg) and it's a beige color and you want black text, you should also add the bgcolor code to be beige also in case your image doesn't load the page will default to the beige color and your black text will still show up against a beige background. In other words always set your bgcolor at or very close to the same color as your background. So now your page looks like this:

<<>HTML>
<<>HEAD>
<<>TITLE>My Web Page<<>/TITLE>
<<>/HEAD>
<<>BODY BGCOLOR="beige" BACKGROUND="URL" TEXT="black" LINK="blue" VLINK="red">
Entire page contents here.
<<>/BODY>
<<>/HTML>

Now we add a text link, image, image link and sound code. You may put the sound code anywhere within the body but if you will put it just before the <<>/body> tag it will make your page load faster by allowing all the text and images to load before it starts loading the sound.

We will introduce the Heading Tags here. These are merely like a headline of a newspaper and this can be done with heading tags and or font tags. In this example we will use the heading tags. Full information on them can be found in the HTML Table. Read the information on the heading tags and the font tags above it to decide which you want to use and return back here by hitting your "Back" key when through. To go there click here.

<<>HTML>
<<>HEAD>
<<>TITLE>My Web Page<<>/TITLE>
<<>/HEAD>
<<>BODY BGCOLOR="beige" BACKGROUND="URL-of-image" TEXT="black">
<<>H1 ALIGN="CENTER">My Awesome Page<<>/H1>
<<>H2 ALIGN="CENTER">ALL ABOUT ME<<>/H2>
Any text would start here and at the end of a paragraph goes your line break command (<<>BR>) with a paragraph (<<>P>) command below for the empty line space.<<>BR>
<<>P>
Then the next paragraph here<<>BR>
<<>P>
<<>A HREF="URL">Any text here<<>/A> (text link)<<>BR>
<<>P>
<<>IMG SRC="URL" ALIGN="CENTER"> (image)<<>BR>
<<>P>
<<>A HREF="URL"><<>IMG SRC="URL"><<>/A> (image link)<<>BR>
<<>BGSOUND SRC="URL"> (sound)<<>BR>
<<>/BODY>
<<>/HTML>

We'll build you a simple Web Page in the Editor below with:

• A background with colored text.
• A centered image.
• A clickable text link to a remote location.
• A marquee.
• A clickable image to a remote location.
• A background music sound.

I have already put the above codes you will need in the box. You can then simply click on your choice of bg, image and sound and copy the URL and delete the URL and paste the correct URL in.

NOTE: We are using the line break <<>br> and paragraph <<>p> commands we learned in the HTML Table. You can start building your page here in the Page In A Box and when you are through test it by clicking on the "Test" button and when you have it like you want it you can simply copy it (by using "Cmd"+"A" to highlight it all and "Cmd"+"C" (to copy) and paste it in your File Edit page you will create. I'll let you pick a background, image and sound and teach you how to find anything else you want to add to or change using the Links & Tools Page.

All of the bgs, images and sounds are from WebTVŠ Friends Linkable gifs and jpgs and are permissible to link to. NOTE: Don't link to anything that it does not give you permission to do so on the page, or without asking the site webmaster if it does not. On your Web Page it is best to Transload all your images and sounds to your own files rather than link to them. You may use the links provided below to practise getting your images and sound with and or you may go directly to WebTVŠ Friends Linkable gifs and jpgs for a large selection of bgs, images and sounds of your choice via a direct link provided with each group listings in an invisible table.

INSTRUCTIONS: For full details on how the editor works click on the "Info" Button on it. Credits and Kudos for people that were a help with my help site are there too.

If you're going to be going to WebTVŠ Friends to browse for images, bgs and sounds you should bookmark and or assign this page to an F Key to be able to return quickly, or access it handily from the Links & Tools Page on your F Key. All capitals in the Page In A Box must be deleted and filled in with the proper information. Everytime you add or change something make sure you hit the "Tab" key to jump the cursor out of the text area and click on "Save" before going to the next step. Remember this is just a small textarea to paste on your page for an example and all the heavy building should be done there due to the limited space here.

STEP 1 ~ Click on the bg (background) link of your choice below. Hit your "Go To" key. Click on "Show Current" that will make the URL (addy) appear in the text area. Hold down the "Cmd" (command) key and tap the "A" key and that will highlight the URL. While still holding down the "Cmd" key tap the "C" key and you will hear a little clicking noise and that means you have the URL copied. Hit your "Back" key once to pull the popup screen down and once more" to return to this page. You can click on the "Page Editor" link to quickly jump back up. Go to the "Page Editor" and in the bgcolor="DELETE" delete the caps and type in an appopiate color, in the body background="URL" tag delete URL leaving the quote marks and hold the "Cmd" key down and gently "tap" the "V" key once to "Paste" the proper URL in. In the text="DELETE" delete the word DELETE leaving the quote marks and add a color of you choice. Black will show up best in these examples but experiment with different colors if you'd like. Remember to click on "Save" everytime you make a change before going to the next step.

If you prefer just a colored bakground with no image simply delete backgroud="URL" and put the color of the background you'd like in the bgcolor="DELETE" atribute.

STEP 2 ~ Click on one of the images below and obtain the URL in the same manner described in the above examples, replacing the URL with the proper copied one. We will be using the center tags to center the images we learned in the /Basic HTML Table.

Delete the capital letters "I LIKE IKE!" and replace them with the message you would like to see scrolling across your Web Page.

STEP 4 ~ Click on one of the images we will use for a clickable e-mail image. Obtain the URL in the same manner as described in the image section above. Delete URL in the img src (image source) tag amd "Paste" it there. Next put your e-mail addy in the a href (anchor reference) tag. This will be one of the few times a URL will start with something other than http://. In this instance we will use MAILTO: followed by YOUR E-MAIL ADDRESS so make sure you delete and change ALL the capitals in the tags including your e-mail addy.

STEP 5 ~ NOTICE: Getting the URL of a sound is a little different that getting one of a page or image. Click on one of the sounds (midi) below. While it is playing and the title of it appears in the status bar at the bottom of the screen and a little audioscope is showing in the lower right hand corner of the screen hit your "Go To" key. Click on "Show Last" (not "Show Current"). Then "Cmd" + "A" then "Cmd" + "C" then hit your "Back" key to get the popup down and then go back to the Page Editor and delete URL in the bgsound src="URL" and "Paste" the addy of the song there.

STEP 6 ~ When you have your Page built in the Page In A Box click on "Save" then "Test" to see the final results. Use your "Back" key to return to this page. When you have it like you want it use "Cmd" + "A" to highlight all the text then while holding down the "Cmd" key press "C" (you will hear a little clicking noise) to "Copy it then go to your Site File Manager. In GeoCities scroll down to the cluster of options buttons below your "index.html" and make sure where the text below them says, "Choose your Editor" that is set on "Advanced Editor" then in the cluster click on "Create New HTML File." When that takes you to the "Edit Page" in the small text box agove the large textarea edit portion "name" your page you are going to paste. It MUST end in (dot) .html and can be named anything you choose using letters and numbers. It best to get in the habit of using all lower case letters such as artpage.html and if you add a second art page artpage2.html etc. Make sure you hit your "Delete" key until the cursor is in the very first space of the blank page before "Pasting." When you "Paste" the codes for your new html file hit the tab key to jump the cursor out of the textarea and click on "Save" and that will return you to your Main Files page. To see the page click on "View" to the right of it. Should your changes not show up reload the page ("Cmd"+"R") and they will.

You may use the "Test Bed" below to experiment with any codes before you add them to the "Sig In A Box." It has no "save" feature so use "Cmd" + "A" then "Cmd" + "C" (to copy) before testing your code because when you hit your "Back" key after testing the code will be gone so you can just use "Cmd" + "V" to paste it back if you wish to alter it some more.

Congratulations to those of you who have just made your first successful copy and paste to produce a Page! You are on your way to building a Home Page. Isn't this fun?

After you have played around with the Page In A Box and become familiar with it here is a link to an advanced Web Page Template. You can copy all byour codes between the body and close body tags in the Page In A Box you've made and delete the "Text and Codes go here." in the template and paste those codes int there and you are good to go for your first web page. Read instructions and info thourly. To go to it, click here.

This page hosted by Get your own Free Home Page