Total Insanity HTML help

Well the First thing to do if you are going to make a homepage is to have the right tools . You can find many HTML makers on the web that all have their pros and cons You may wish to try different ones to find one you feel good about using CLICK HERE TO SEE A FEW

Next thing you must do is start by getting some paper and layout how you want your page to look. This will help you in keep your thoughts together. Use it as a guide you can change it on the fly, but this will get you started on a well formatted page. As the web becomes larger more and more people are putting up home pages and info onto the web, as you are laying out yours take the time to think it out. Use things you may have seen on the web but keep in mind thing that you did not like. I am sure you will Find things on my pages you do not like and things you do, but home pages can not and should not all look the same that would take away from the web. Still with me ..? Good . ok now what to do next?

Setting up to make a homepage

I like to start a new Dir. or folder just for my homepage. This way when it comes to FTPing it to my provider It’s a lot easier to deal with. Here a example: Say my access to my Address to my homepage will be http:/www.goodnet,com/~yasky
I would start a DIR. or NEW FOLDER named "yasky " . Ok got that ? Ok now inside that DIR. I would add other folders in my case it would look like this

With in my images I break it down into types as showed below

If you plan on using CGI you may wish to add them as well as showed did this so when I change my home pages I can find what I am looking for faster. It my help you as well.

Hope I have not lost you I will explain what I have in each folder
HTDOCS : Is where I keep my entire HTML doc
MUSIC : Is where I keep the .wav and .midi files the site may use
IMAGES: All .jpgs .gif and moving gifs in here
CGI-BIN : and CGI-SRC : are for the CGI Scripts or Java scripts and exe. files that they may need
**Notice Not all providers all let you run CGI and some have pools of CGI for there users to tap into. Drop an Email to your service provider and as how they are set up for CGI. It may save you from pulling out all your hair.**

Most new HTML makes you can point to your Dir. where you are storing the info.

What every HTML needs
On any HTML you will need to have all of this info your page should start out like this and we will add to it as we go along :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
</HEAD>

<BODY>

</BODY>
</HTML>

Still with me I hope!
Ok now let find out what they do one at a time starting from the top

 This is a place to add remarks to yourself or others. It will not show up when Browsers view the page, but will be seen if some looks at the source for the page (The Raw HTML text). You can put , Who made the page , When it was made, or a note to your self about the page . You can use this in other places on your page to help you keep notes to yourself about that part of the page .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> This may or may not show up on your HTML. Some of the newer HTML makers will set this so no need to sweat it Ok ..
<HTML> The true start of the HTML the <HTML> When a HTML Tag start it is listed this way showing a beginning a end it this tag will have a / ( You will see latter )

<HEAD> If you are adding scripts , Java you will need to add the needed script between the HEAD tags it will keep the info to run the scripts Most put it after the Title tag (</TITLE>)

<TITLE>Untitled</TITLE> This is where you can Set the title for the page . Remember it will list the title when a search picks it up. It best to keep it about what the page is about and short if you can . If this was my start page I might title it YaskY's Start Page (Its up to you ) Here is where you would enter the title <TITLE>Put Title in here</TITLE>

</HEAD> Here it is the "/" this ends a tag every tag has a start and a end you must use them to end your tags (If adding scripts they should be before this tag )

<BODY> Here is where all the info is going to be put all that will be seen on the page will go between the
<BODY>

</BODY>
If you are add in a colored background of you have a .jpg or gif you need to add it here as well
Let’s say you are going to add a .jpg you would need to enter a line like this <BODY BACKGROUND="Name Of.jpg" > (remember if you set you jpgs and gif into another Dir. list it in the right way if in a Dir. of /images/background/name of.jpg")
Within the <BODY you can add Sound change the color of your text and color of the links. Here is a way
<BODY BACKGROUND="Name Of.jpg" BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#00FF00" VLINK="#E2A900" ALINK="#00FF00">
Here are some colors

If you are writing HTML for the newer browsers you can use the list below for you Banner color text color or as your background color they would be used like this :
<FONT COLOR="Yellow">Your text here</FONT>

Setting sound to your HTML
If you were adding sound I would enter it next in its own line i.e.:
<BGSOUND SRC="music/Name Of.mid" LOOP=INFINITE><OBJECT> <EMBED SRC="Name Of.mid" width=2 height=0 autostart="true"> </OBJECT> This will set it for Most browsers on a loop

Lets get to work on your homepage

You now know how to set you tiled backgrounds and color links here we will deal with different things that YOU can add to <BODY> of you homepage .

HEADERS
ADDING .JPG and .GIF's
SETTING FRAMES
ADDING TEXT
ADDING FORMS FONTS
ADD EMAIL
LINKS from TEXT and .JPG GIF's

HEADERS
Headers are use to start a page and in most uses the define different topics or links within a page. Here are a few ways and sizes you can use

WELCOME

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
</HEAD>

<BODY>
<h1>WELCOME.</h1>
You can center this by adding
<CENTER> <h1>WELCOME.</h1> </CENTER>

</BODY>
</HTML>

Using graphics on your homepage sounds like it would be too hard to fig out. You may feel that why you must pay someone to do your homepage for you. Well got some news for you. IT’S not that hard!!!!!!!!!!!!!!!!!!! No I am not joking with you can do it. Well you may not be able to make your own backgrounds that take time and a lot of pounding on the desk at times. But you can get .jpg and . gif off the web, and off your browser if you know. But the biggest problem people have is the way they enter the text and location on there HTML of HTML.The rules are simple here they are:

1:) You must make sure you have the right Dir. on you edition some editors will help you set your photos and images but you must first have all the jpgs and gifs in the same Dir. as You’re home pages. I make a new folder and put everything I am using in my home page there, this also makes it easier to make sure I upload everything and do not miss one. Like the Dir. I am using for this home page would be E:\yasky, all my backgrounds and home pages Html are in that one dir.
I see people’s home pages that show their jpg are at C:\windows\whatever. Other people can not see their background in there browsers. That is because it is looking for them on C:\windows on the server. And the server Dir. is not C:\windows\whatever, here are some examples :
Say I wanted to use a images. called yasky-1.jpg it is on my hard drive at /E:/yasky/images/backgrounds/yasky-1.jpg if I put it down that way to use the jpg on my page it would look like this
<'IMG SRC="file:///e/pic/backgrounds/bedspy6.jpg" WIDTH=138 HEIGHT=138 BORDER=0>
If this is how I wrote it and then up loaded it when people came to my homepage they would not see my jpg they would see .

If I was using my Dir. as I showed above the right text would be
<'IMG SRC="/images/backgrounds/bedspy6.jpg" WIDTH=138 HEIGHT=138 BORDER=0>
Then they should see it like this

You saw the WIDTH=138 HEIGHT=138 BORDER=0 this will set the size of your jpg of gif to your page the BORDER=0 is set from 1-10 (if you want a border around the images, if not leave at 0

Pick HTML new topic

SETTING FRAMES
Frame are not that new to the web but there are still some browsers can NOT read them If you want to set a page in frames remember some may NOT be able to view it.
Things to remember about using frames. Here is a simple Frame it will give you two screens you will need to give an HTML to give info for each part of the frame. For this simple frame you will need to make 3 HTML pages The main HTML page we will main Index.HTML This will set the frames and will hold the info for the frames

Save this as index.html

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
</HEAD>

<BODY>
</HTML>
<FRAMESET COLS="100%" ROWS="50%,*">
<FRAME NAME="Frame 1" SRC="Name.HTML" SCROLLING="AUTO" MARGINHEIGHT=1 MARGINWIDTH=1>
<FRAME NAME="Frame 2" SRC="name.HTML" SCROLLING="AUTO">
</FRAMESET>

</BODY>

will look like this

Looks easy but the info here can mess up your page here is what is doing
<FRAMESET COLS="100%" ROWS="50%,*"> This has set up your frames in ROWS here I have 2 rows you can do more. The ROWS="50% Has set it to 2 equal parts if you wish you can change this to 75%,* or what ever but remember to add the ,* this will have it set what is left to fill out the page
<FRAME NAME="Frame 1" SRC="Name.HTML" SCROLLING="AUTO" MARGINHEIGHT=1 MARGINWIDTH=1>
Here you will start running into problems it you do not think it out
FRAME NAME="Frame 1" Here you can add the name of you frame Some like to keep it as FRAME 1 or 2 and so on others use names Like Main or choices and so on . This is needed if you are going to have one part of your Frame to stay the same at all times and have the other half show the info people are viewing the FRAME name is like a target. Here SRC="Name.HTML" is where you tell the frame where to get the info (what is viewed in the frame) You must give it a resource to another HTML doc. If you do not you will not get anything but a blank Frame. The SCROLLING="AUTO" will set the frame to Scroll the HTML you have told it to use. If your frame is not set on Scroll and the HTML is larger then the frame people will not be able to see the info on the page You will need to do this with each FRAME

Here are some other simple frames you may want to try

<HTML>
<HEAD>
<TITLE>Untitled</TITLE> </HEAD>
<FRAMESET COLS="100%" ROWS="80%,*">
<FRAME NAME="Frame 1" SRC="name.HTML" SCROLLING="AUTO" MARGINHEIGHT=2 MARGINWIDTH=27>
<FRAMESET COLS="50%,*">
<FRAME NAME="Frame 2" SRC="name.HTML" SCROLLING="NO" MARGINHEIGHT=3 MARGINWIDTH=3>
<FRAME NAME="Frame 3" SRC="name.HTML" SCROLLING="YES" MARGINHEIGHT=2 MARGINWIDTH=2>
</FRAMESET>
</HTML>

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>

</HEAD>

<FRAMESET ROWS="100%" COLS="50%,*">
<FRAME NAME="Frame 1" SRC="name.HTMl" SCROLLING="AUTO" MARGINHEIGHT=2 MARGINWIDTH=2>
<FRAME NAME="Frame 2" SRC="Name.HTML" SCROLLING="AUTO" MARGINHEIGHT=2 MARGINWIDTH=2>
</FRAMESET>
</HTML>

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>

</HEAD>
</FRAMESET ROWS="100%" COLS="20%,*">
</FRAMESET ROWS="50%,*">

</FRAME NAME="Frame 1" SRC="name.HTML" SCROLLING="AUTO" MARGINHEIGHT=3 MARGINWIDTH=3>
</FRAME NAME="Frame 2" SRC="name.HTML" SCROLLING="AUTO" MARGINHEIGHT=2 MARGINWIDTH=2>
<//FRAMESET>
</FRAME NAME="Frame 3" SRC="name.html" SCROLLING="AUTO"> </FRAMESET>
</HTML>

 Here is a section of text that should show up in a 
    fixed-width font (as if it were a computer listing
    or a verse of poetry): <p>

    <pre>
        HTML is easy once you understand how it works
        After all it’s not like Brain surgery.
        or is it 
    </pre>
if I did not use the <pre></pre> tags the text
would have come out like this  HTML is easy once you understand
how it works.

The <pre></pre>  will set is the same way as you type
it in the screen 

    This is a bullet list with two items: <p>

    <ul>
    <li> First item goes here.
    <li> Second item goes here.
    </ul>

An Ordered list would look like this
<OL>
	<LI>First item here
	<LI>second here
	<LI>third here
</OL>

  well end up like this so no need to add numbers this will do it
  for you

Entering your text can be done in other ways like in a simple Marquee that scrolls across the screen this is a one for MSIE browsers You put what you wish here
<MARQUEE BGCOLOR="Yellow" DIRECTION="Left" HSPACE=0 VSPACE=0 LOOP=INFINITE> You put what you wish here </MARQUEE>

Three characters out of the entire ASCII (or ISO 8859) character set are special and cannot be used "as-is" within an HTML document. These characters are left angle bracket ( < ), right angle bracket ( > ), and ampersand ( & ).

Why is this? The angle brackets are used to specify HTML tags (as shown above), while ampersand is used as the escape mechanism for these and other characters:

ADDING FORMS
Here is a form you can use on you page
HTML specification 2.0 and its predecessors.
They are created by placing input fields within paragraphs, pre formatted/literal text and lists. This gives considerable flexibility in designing of the forms. You can test and try out many different ways to do your forms but remember :
Each variable field is defined by an INPUT, TEXTAREA, or OPTION element and must have a NAME attribute to identify its value in the data returned when the form is submitted.
Form below is NOT a working form it's just here to show you how it would look the HTML text is listed below Example of use (a questionnaire form):

Sample Questionnaire

< H3> Sample Questionnaire < /H3>
<P>
< FORM METHOD="POST" ACTION="http://www.hal.com/sample >
<P> Your name: < INPUT NAME="name" size="48" >
< P> Male <INPUT NAME="gender" TYPE=RADIO VALUE="male">
< P> Female < INPUT NAME="gender" TYPE=RADIO VALUE="female">
<P> Number in family: < INPUT NAME="family" TYPE=text>
< P> Cities in which you maintain a residence:
<UL>
<LI> < INPUT NAME="city" TYPE=checkbox VALUE="">
< LI> i < INPUT NAME="city" TYPE=checkbox VALUE="" >
<LI> Other <TEXTAREA NAME="other" cols=48 rows=4 > < /textarea >
< /UL >
Nickname: < INPUT NAME="nickname" SIZE="42 "> < P> Thank you for responding to this questionnaire.
< P>< INPUT TYPE=SUBMIT> < INPUT TYPE=RESET >
< /FORM >

Bold <B>BOLD</B>
Italic <I>ITALIC </I>
Underline <U>Underline </U>
Normal sizes 1-10
Newer Sizes for HTML
Font Size +1 <Font Size =+1> Font Size +1</FONT>
Font Size +2 <Font Size =+2> Font Size +2</FONT>
Font Size +3 <Font Size =+3> Font Size +3</FONT>
Font Size +4 <Font Size =+4> Font Size +4</FONT>
Font Size +5 <Font Size =+5> Font Size +5</FONT>
Font Size +6 <Font Size =+6> Font Size +6</FONT>

Font Size -1 <Font Size =-1> Font Size -1 </FONT>
Font Size -2 <Font Size =-2> Font Size -2 </FONT>
Font Size -3 <Font Size =-3> Font Size -3 </FONT>
Font Size -4 <Font Size =-4> Font Size -4 </FONT>
Font Size -5 <Font Size =-5> Font Size -5 </FONT>
Font Size -6 <Font Size =-6> Font Size -6 </FONT>

Adding color Fonts
<FONT SIZE="?" COLOR="?">You would put the text you wish colored here</FONT>
Where the ? are you enter the size as listed above
or
The color name or Number of color you want it to be
Colors:

<FONT SIZE="?" COLOR="?" FACE="?">Enter text here</FONT> As before Where the ? are put in what Size color or style you wish to use As well as size of a font you may change the font to a new style. But the other computer viewing your page MUST have the same Font style you are showing. So play it safe and use common Fonts Like Comic Courier New Courier Switzerland ,Bold ,Italic Times New Roman I think you get what I am saying Or I hope you do. It your choice. Always remember the Homepage is Yours You must do it Your way

ADD EMAIL
Adding a Email link is a good thing to do this will let people send you mail from your page. It’s not hard to do you can use a .jpg or .gif even Text to link to you email address .
Click a Images for Email
First pick a Images you want to use a .jpg or gif I will use :

<A HREF="mailto:total_insanity@yasky.com"><IMG SRC="yasky/images/buttons/mailbar.jpg" WIDTH=75 HEIGHT=75 BORDER=0 ALT="Click here to drop me a note"></A>
Where the HTML shows
<A HREF="mailto:total_insanity@yasky.com">
Add your Email address
<A HREF="mailto:What Ever@Where Ever.com">

Now if you just want a Text link to your mail like this :
Drop us a note
HTML would read:
<A HREF="mailto:What Ever@Where Ever.com">Enter Text here</A>
You can have your email address or others listed from your page

Pick HTML new topic

Links From you homepage can be in many forms Image maps, Images (i.e. .jpg .gif). and text. The links can be made from one place on your homepage to another persons homepage. You can also Interlink your own pages if you are using more then one HTML page on your site. Also you can link within a HTML page (i.e. from the top of a page to the bottom of the page) this is good for list and mass info. Links join the internet together they can show other what you like are enjoy doing. So when making your homepage let your links help you show others about you and what you enjoy or places you think they can find info that they will need to know

WARNING
Not everyone will let you link to their site it is best to ask are read the page to see if they will let you make a link. I have found most do not mind a link. But I have found there are some that can get upset. So Play it safe

<MAP NAME="sidebar">
   <AREA COORDS="2,6,48,65" HREF="mail.htm"TARGET = "main">

   <AREA COORDS="503,8,552,65" HREF="mail.htm"TARGET = "main">

   <AREA COORDS="76,14,149,65" HREF="irc.htm"TARGET = "main">

   <AREA COORDS="161,14,233,63" HREF="homep.htm"TARGET = "main">

   <AREA COORDS="245,15,315,64" HREF="games.html"TARGET = "main">

   <AREA COORDS="329,15,399,65" HREF="down.html"TARGET = "main">

   <AREA COORDS="408,13,480,63" HREF="links.htm"TARGET = "main">

</MAP>
<IMG BORDER=0 USEMAP="#indbar" SRC="images/buttons//indexbar.jpg"> 

</MAP>
<A HREF="irc.htm" TARGET="main">IRC  and help</A>
<A HREF="homep.htm" TARGET="main">HTML making</A>
<A HREF="games.html" TARGET="main"A>Games</A>
<A HREF="down.html" TARGET="main"A>Downloads</A>
<A HREF="links.htm" TARGET="main"A>Links</A>

SETTING FRAMES part of this page each Frame has it own name This is a way to guide where the Info will be seen in your frame page . Hope this gives you a idea of Image mapping and how you can get lost fast if you do not think it out .
Pick New type of link info to read up on

SETTING A .JPG OR .GIF LINK
A lot of people like to use .jpg and .gif's to link from one place to another it adds color to your page.
Here is a Link to my other site

The Text would look like this:

<A HREF="http://www.goodnet.com/~yasky/index.htm" NAME="#irclubs homepage"><IMG SRC="images/icons/bedchat.gif" WIDTH=100 HEIGHT=100 BORDER=0 "></A>
The URL for the site you are linking to would go here <A HREF="http://www.Whatever" .The NAME="TEXT HERE"> is where you would put a short note on where the link is taking them to. The <IMG SRC="Name.gif" WIDTH=100 HEIGHT=100 BORDER=0 "> , Here is where you images will go remember to check your Dir. of your images.

Pick New type of link info to read up on

SETTING TEXT LINKS
Text used as a link to another http: can be a good idea it will cut back on the .jpgs and .gif's you need to use on your page although Pic's look great and all that they use up your bits and bites fast a lot of people only have 2-5 meg given to them from their service provider to use for a homepage. So Text links can save you on chewing it all up with .jpg and gif's. But Remember IT’S YOUR PAGE you do what you like ok . Now back to the links. Setting a text link is easy Here a text link to my other site as before but in TEXT:
To the undernets #IrClubs homepage
The HTML would look like this :

<A HREF="http://www.yasky.com/club/index.html" >To the undernets #IrClubs homepage</A>
You may use any Fonts you wish for the link as we talked about before about in ADDING TEXT
You would need to enter the URL of the page you wish to link to here <A HREF="http://www.Whatever.com" Put in text where the link is taking them to here
<A HREF="http://www.Whatever.com" >ENTER TEXT FOR LINK HERE</A>

SETTING IN SITE LINKS
If you have more then one page on your site you can link the pages together using in site links. This is a good thing to use so you can split up pages with different types of info on them say an html you have made on you that you did not put on you Index.html so you made another page with that info called me.html. Here how to link your pages to each other to make the page flow.i.e:
The HTML would look link this:

<A HREF="me.htm"> <IMG SRC="images/folder/PicName.jpg" WIDTH=70 HEIGHT=50 BORDER=0 ALT="Find out about me"> </A>
The <A HREF="name of.html"> You need to put down the name of the HTML page or HTM . Next you will need to enter the .jpg or gif you are wish to use <IMG SRC="Name of.jpg" You should use the Alt text so they can see the link may go. Use a short explanations of where the link is taking them here ALT="Text for link HERE"

Setting on site page links in TEXT

You may use any Fonts you wish for the link as we talked about before about in ADDING TEXT Here the same link as above but in text:

The HTML would look like this:

<A HREF="Name.html">Text you want to use for link</A>
You would need to enter the HTML of the page you wish to link to here
<A HREF="http://www.whatever.com/Name.html" Put in text where the link is taking them to here <A HREF="Name.html" >ENTER TEXT FOR LINK HERE</A>

In page links are good to use if your page is large like this one is. As you have been reading this page you have used the in page link to pop around to places in this page. The in page links can help you keep your page in order.
You will need to think it out a bit if you are going to use many in page links on one page as is used in this page. Ok now here we go
In page links are like list in a way if you are going to have many links in the page you may want to use the A,B,C,D, etc..etc... for one list and a a, b, c, d, etc..etc. for another or a 1, 2, 3, 4, and so on. you may use names as well once more it’s YOUR choice. ok to start you need a Target:

TEST will tell it what to look for
The HTML will look like this :
<A HREF="#test>TEST </A> The "#test" is what it is telling it to look for You can use anything you wish change the # You may wish to start with A so it would read more like this <A HREF="#A>TEST </A>
You well need a Place for it to go to that would read like this
<A NAME="test">TEST </A>
If you wanted to use A it would read NAME="A"
If you clicked on the working TEST you would have popped down a few lines to show you how it works.

TEST Scroll back up a few line to learn more

PAGE LAYOUT	BASE HTML
SETUP FOR HTML	MAKING A HOMEPAGE

HTML HELP PAGES

HEADERS ADDING .JPG and .GIF's SETTING FRAMES ADDING TEXT ADDING FORMS FONTS ADD EMAIL LINKS from TEXT and .JPG GIF's

WELCOME

WELCOME

WELCOME

WELCOME

WELCOME

WELCOME

Sample Questionnaire

HEADERS
ADDING .JPG and .GIF's
SETTING FRAMES
ADDING TEXT
ADDING FORMS FONTS
ADD EMAIL
LINKS from TEXT and .JPG GIF's