<center> <font color="#FFFFFF"> <img src="FRITZ.gif" height="61" width="266" alt="The_Fritz" border=0> <br> If you can see this you have "The WebTv Fritz"! <br> The Fritz is a webtv bug that disables <br> javascripts which are used on these pages! <br> You need to reload the page to use this site! <br> Hold down "CMD" & "R" for several seconds! </font> </center>

WebPage's are Really Cool....<•(((o><·•°.ø.·º·.o.•°·.ø.·º·.o.·º·.ø.·º·.o.°•······

······•°.ø.·º·.o.•°·.ø.·º·.o.·º·.ø.·º·.o.°•· ><o)))•> I Love Building WebPages's......Oh yea!

break



break


Click Here To PLAY!


 




Welcome Future Builders!

This tutorial is for those of you who would like to build a webpage but have no idea where to start...And if you've already tackled your email signature you already know some basics. In this tutorial you will learn basic webpage building... top to bottom... and in no time at all you'll be building one of those cool looking webpages you've seen in your travels around the net.

Here you will see all the basic codes...exactly as they should appear in your edit page on your website. All you have to do is follow all the steps below and you'll be on your way to building your own website.



STEP-1
Opening DOCTYPE, HTML, HEAD & TITLE tags


The first thing you will always type in is a "Doctype" declaration which validates your page as an HTML document (there are various declarations you can use...this is just one of them) & your opening <html> HTML tag followed by your opening <head> <title> & closing </title> </head> HEAD & TITLE tags MUST be the very next thing in your edit page after your opening html tag as seen below...




STEP-2
Naming your page & Adding Javascripts


This part of the code is where you name your page by adding a page title between the opening <title> and closing </title> TITLE tags & javascript codes between the opening <head> & closing </head> HEAD tags as seen below...


Ok...the TITLE part of STEP-2 is easy enough to understand...but javascript can be tricky at times...the javascript part is what can really make your site unique and come alive... you can add random midi players... dropdowns & greetings ...to name a few...just like the jumpbox & greeting you saw when you entered this page...and generally when you find a script you want to add to your site...the site and/or person providing the script will let you know what part of the script goes where... just as I do here on my site...so don't worry...even if you know nothing about javascript you can still build a great page...



STEP-3
Adding BODY BACKGROUND, BGCOLOR, TEXT, LINK,
VLINK, ALINK, & LOGO, tags


This part of you code will determine what your BACKGROUND &/or BGCOLOR will be...the color of text(TEXT) your visitors will see...the color of your links before(LINK) and after(VLINK) someone clicks on them...as well as a logo(LOGO) someone will see if they save your page in their favorites folders...and if you press your "Info" button right now you will see what I use as a logo for all my pages...:)
And after we add the body tag attributes this is where all your webpage content will begin... such as images, pictures, buttons, text, counters, guestbooks, audioscopes, or whatever you choose to add as you learn...


TEXT
Changes the color of the text on the page. This is an overall change and can only be done once on a page.

LINK
Changes the color of the links you have on your page BEFORE a guest on your page "clicks" on them to visit.

ALINK
Changes the color of an Active Link, or how a link looks when it is being clicked.

VLINK
Changes the color of a Visited Link, or how a link looks to the guest if they have already been to that site.

Note: Make sure you don't leave the link colors unreadable on your colored background. If you are changing the background color or using a background image, make sure that your visitors can see your links and your text.


When adding an image as a BACKGROUND you should also include a BGCOLOR as well...let's say your going to use a dark background...choose a color close the color of the background itself...what this does is when your page begins to load and your using a dark background you will see dark bgcolor first as opposed to a glaring white default background color before your background & images load...



STEP-4
Adding a Website Name Image


This is where you can add an image that will tell people the name of your website or page like the one at the top of this page "WebPage101"... and we will use 2 <br><br> break tags to create a space between the top of the page and your image along with opening <center> and closing </center> CENTER tags to center the image...and the image tag called <IMG SRC...


As you can see above inside the image tag <img src="YOURWEBSITENAME.gif height="?" width="?" border=0 alt="IMAGENAME"> I have also added the HEIGHT, WIDTH, BORDER, & ALT tags. The HEIGHT & WIDTH tags are needed to help your page load faster and can also be changed to resize your image... the BORDER tag is used in all images so that when computer users view your page they don't see the border that is invisible to webtv browsers and it also makes your page look more professional...the ALT tag is used in the event all your images don't load...if that happens computer users viewing your page will see the image name instead or whatever you type in the ALT tag.



STEP-5
Positioning An Image


In this tag called IMG SRC...the image will be centered using and opening <center> and closing </center> CENTER tags...(NOTE: When adding long URL you should NOT use your return key to move to the next line...let the code your writing rap around by itself or you will create a break in the URL and your link or image will not work)...below you will see 3 image tag examples... 1 centered... 1 aligned left... & 1 aligned right... (NOTE: You can also use tables to position images on your page).




Step-6
Adding 2 Images Side By Side


To add 2 images next to each other you will use the CENTER tag and 2 IMG SRC tags as seen below...


Aligning your images this way will put them to the far left & right of your page side by side...



Step 7
Spacing 2 Images Side By Side


To add 2 images next to each other but spaced apart you will use the CENTER code...ALIGN code and 2 IMG SRC codes and a SPACER code as seen below...




Step 8
2 Images Above & Below


To have 2 images centered but one on top of the other you will use the CENTER code and a BREAK code which is simply <BR>...and the distance between the 2 images is determined by how many BREAK codes you use...




Step 9
Closing BODY & HTML


This is the last part of your code is where you close it all up...here you type in your closing </body> & </html> codes...and that's all there is to it.




Ok Webtvers...follow the steps above and you will be on your way to building your very own cool website...and what your website turns out to look like depends in your interests, content, and courage to try new things...and remember... Nothing is written in stone...as time goes by you will learn more and make changes to your site... and last but not least... JUST HAVE FUN! And if you ever get stuck on how to do anything you can always come back as well as check out all the other tutorials I've put together for you.