Welcome

This is a basic Tutorial for HTML

Are you a budding webpage builder? Do you want your own page up on the Net?

First and foremost you must learn a little HTML which is the language of the Web. To see what it looks like click "View" on the top of your browser and then click "Source" or "Page Source". If looking at this scares you then get a Web Page Maker from Microsoft or Claris or any of the better software manufacturers. Go for a "What You See Is What You Get" (WYSIWYG) type of Page Maker. Even with one of these programs it helps to know some HTML to get the page exactly the way you want it. We use a very basic page maker called Claris Lite to save putting in all those codes by hand but still put the finishing touches on in Notepad.

When Punchy and Nana started out putting up webpages we were the first on our block to do so. What that means is we didn't have anybody to help us along with the basics.

At first we used those dorky templates that are on most of the Free Web Services. Sure, they get you a page up but they are about as interesting as a newspaper page. We wanted something that was a little more fancy. Something that immediately caught the viewers eye and held it. Something a bit more original.

We scoured the WWW for tutorials and anything else that could teach us something new. When we landed on a page that had something that we didn't understand we checked the "Source" to see how it was done. This is probably the best and easiest way to learn HTML...

If this page doesn't help you then keep searching around the Net... Sooner or later you'll find something that will sink in... We have a few links that also have Biginners HTML Tutorials... Please don't E-mail us, we're much to busy with our other sites to give any personal help... We will NOT REPLY...

Good Luck

 


 I have put the all the codes you will need to put a page up up using Geocities Advancad Editor at the bottom of this page... We picked Geocities because it seems to be about the easiest to use... So, if you're not a Geocities Member, go there now and get your web site set up...

Click Below For Free Website

http://www.geocities.com


Begin by placing the
HEAD and BODY section at

the TOP of your HTML PAGE...

 

 

<HTML><HEAD>

<TITLE>YOUR WEBSITE NAME></TITLE>

</HEAD>

<BODY TEXT="#FFFFFF" BGCOLOR="#000000" LINK="#FF0000" VLINK="#FFFFFF">

 

Replace the white text with the name of YOUR SITE... This is what appears at the TOP OF THE BROWSER... The tags within the BODY will give you WHITE TEXT ON A BLACK BACKGROUND AND RED LINKS THAT TURN WHITE AFTER THEY HAVE BEEN CLICKED...

Html uses the RGB (RED GREEN BLUE) method for posting colors... You may substitute any of the following color tags for the ones in the above BODY to customize your page to your liking...

HOWEVER!!!

The colors should not be too wild or flashy, and make sure you can see the text well against the BACKGROUND COLOR...

#FF0000 Bright Red

#FF8888 Pink

#FFFFFF White

#00FFFF Cyan

#00FF00 Green

#88FF88 Light Green

#888888 Gray

#FF00FF Magenta

#0000FF Blue

#8888FF Light Blue

#FFFF00 Yellow

#000000 Black (Which I can't show due to black background,

But you know what black looks like anyway).

Please Note: The 0's are the number ZERO and not the letter O...

 

 

 

 


 

Welcome To My Webpage

You will probably want your header to be centered and with larger text like the white text above... This is the first thing people should see when they land on your site... The smaller the number following the H the larger the text will appear... You may also want to use this feature elsewhere on your pages to start another section or bring attention to something important...

<H1 ALIGN=CENTER> Will appear like this...

<H2 ALIGN=CENTER> Will appear like this...

<H3 ALIGN=CENTER> Will appear like this...

<H4 ALIGN=CENTER> Will appear like this...

<H5 ALIGN=CENTER> Will appear like this...
<H6 ALIGN=CENTER> Will appear like this...

 

 


<P>

Use this tag for every NEW PARAGRAPH started... This is exactly the way paragraphs are presented in books and newspapers...

 

 


How To Centre Links And Pictures

Or Anything Else

 

<P ALIGN=CENTER><IMG SRC="My Picture.gif"> OR <IMG SRC="My Picture.jpg">

Use this tag to align a picture in the CENTRE of your page... Replace the white text with the file name of YOUR GRAPHIC... How you get the graphics up is explained further down this page... It could be a .gif image or .jpg image... Just make sure you have either one of these extensions following the image file name and that they match the type of file you're using as a graphic... Don't forget to place the DOT between the file name and the extension...

This will place your graphic like this...

 

 

<P ALIGN=CENTER><A HREF="http://www.anypage.com">LINK NAME</A>

Use this tag to align a link in the centre of your page... Replace the white text within the " " with the ADDRESS of the page that you want the link to point to... Replace the other white text with the NAME OF THE LINK... Just repeat the above to add more links as you need them...

It will turn out looking like this...

My Friends Home Page

My Favorite Movie Site







<P ALIGN=CENTER> <a href="mailto:my name@my server.com">E-mail Me</a>

You may want to let people send E-mail to you directly from your page... People will E-mail you for two reasons, they either like your pages or they hate them... I won't say which one we get the most of... This will centre an E-mail link on your page... Just replace the white text with YOUR E-mail Address... It should look like this...

E-mail Me







<P ALIGN=CENTER>

You can also centre text with this tag...

Just like I did here...

 

 

If you do not want an item centred then just put a <P> in front of it...

There are also tags to align to the LEFT or RIGHT

<P ALIGN=LEFT>

<P ALIGN=RIGHT>

 


To put in one of these lines in you need to put in this tag...

<HR>

You can also color these lines using the color codes above...
And you can resize them too, like the one below...


 

<HR COLOR=#FF0000" WIDTH="250">


</BODY></HTML>

Finnish off the page with these tags... This lets the browser know that this is the end of your page...

 

See complete Pre-coded HTML page further down this page...


Uplaoding Graphics To Geocities

 

 

Assemble any graphics that you want to put into your pages in a folder somewhere on your computer and name it "webgraphics"... In the Geocities File Manager, scroll down until you see Easy Upload... When you see the Browse button, click it, and find the "webgraphics" folder and single click the graphic that you want to send up... It's as easy as that...

Please remember that large graphics have a long download time and some people will not hang around if the page takes too long to download... So try to keep your graphics small and not too many per page...

 


Do's And Dont's

Do's

Do... Always make sure you put </A> in at the end of each and every link or your whole page will turn into a giant link, this closes the link for the browser...

Do... Try to keep your pages neat and tidy...

Do... Make sure your text is readable against the background...

Do... Try to keep your links up to date and delete dead ones right away...

Dont's

DON'T... Use too many text colors like I did on this page...

DON'T... Put up huge graphics, they take too long to come down... If the net is slow, most visitors will not hang around for more than a minute or two waitingfor a page to load...

DON'T... Have flashy backgrounds that are multicolored, it's too distracting and you'll probably lose your text in places...

DON'T... Put midi music in the background, there's nothing worse than listening to Internet Radio and having stupid computer music blocking out the beautiful stuff that I'm already listening to... If you must run midi in the background, then make sure you place an off button so the visitor can kill the midi...

 

 


Copy and paste tags below into "Geocities Advanced HTML Editor"... Fill in your own text, graphics, links etc. and away you go... This will give you two paragraphs, one graphic, three links and one E-mail address... The more you fool around with HTML the more you'll learn... That's how we did it... Soon you'll be using Tables and all kinds of other fancy HTML stuff...

 

 

<HTML><HEAD>

<TITLE>YOUR WEBSITE NAME></TITLE>

</HEAD>

<BODY TEXT="#FFFFFF" BGCOLOR="#000000" LINK="#FF0000" VLINK="#FFFFFF">

 

<H2 ALIGN=CENTER>Welcome To My Webpage

 

<P ALIGN=CENTER><IMG SRC="My Picture.gif">Put your graphic here

 

<P>Put your text here

 

<P>Put another paragraph here

 

<P ALIGN=CENTER><A HREF="http://www.anypage.com">LINK NAME</A> Put

<P ALIGN=CENTER><A HREF="http://www.anypage.com">LINK NAME</A> your links

<P ALIGN=CENTER><A HREF="http://www.anypage.com">LINK NAME</A> Here

 

<P ALIGN=CENTER> <a href="mailto:my name@my server.com">E-mail Me</a> Put your E-mail here

 

</BODY></HTML>



Here's A few Links That Can Help You Along

Webpage Help For Biginners To Very Advanced
HTML Goodies

Biginners Guide To Putting Together A Webpage
Webpages Made Easy

Help For Using Image Maps
Image Maps

HTML Tutorials Plus Graphics Etc.
EchoEcho