(Click for Music)

Welcome

To Beyond the Basics!

(going beyond the basics of html and into simple java script!)

Hello and welcome to Beyond the basics, here you can learn some basic and not so basic html and even a little Javascript. I made this page after finding that though a lot of pages had information on the basic html information aimed at beginers, few had information on things that arn't so basic. Infact after searching for a few weeks finding nothing beyond what I already knew, I got a little frustrated. I went out and bought one of thoes fancy html/Java editors to do all the work I should have been able to do myself if someone had been kind enough to show me how. Finaly I decided that someone should tell everyone about these things, Someone should be kind enough to go beyond the basics of html. Feel free to come back here anytime to look up how to do one thing or another, and feel free to E-mail me if you can't find what you need, I'll try to add it to the page. But keep in mind I am still learning myself. So I don't know everything, chances are I will have to come back here to check on my own codeing for cirtian things. Ok, enough with my overly long winded speech, on to the html. (I have to start basic first...)

Ok, I'm kind of asumeing everyone here knows a few simple things... you start html with '<' and end it with '>' I am figureing everyone knows how to close tags.... everyone knows what html is (he he... forgot to mention that at the begining...) and everyone knows what html is for... the same for java script... ok on to:

The Bare Bone Basics:

Font colors are one of the most basic things in html, but there are a lot more colors then you would think, most people are used to the basic yellow, orange,red, purple, blue , and green, but there are a ton of shades in between. now, the basic tag for a font color is rather simple:

where "color" is the colors name or number. now, there are two ways to make font colors, you can say the name of the color. ie:

<font color=red> red

or, a beter way to do this is to use the number. ie

<font color="#FF3300"> red

but the trick of corse with this is geting all the color numbers. Well, here's yet another thing I have found that no one seams to want to list, so here they are. the color name:

FFFFFF

000000

222222

444444

555555

777777

BBBBBB

DDDDDD

EEEEEE

440000

663300

996633

002200

003333

003399

005555

330066

660066

770000

993300

CC9900

004400

336666

0033FF

000077

660099

990066

AA0000

CC3300

FFCC00

006600

006666

0066FF

0000AA

663399

CC0099

DD0000

FF3300

FFFF00

008800

009999

0099FF

0000DD

9900CC

FF0099

FF0000

FF6600

FFFF33

00EE00

00CCCC

00CCFF

3366FF

9933FF

FF33CC

FF6666

FF6633

FFFF66

66FF66

66CCCC

66FFFF

3399FF

9966FF

FF66FF

FF9999

FF9966

FFFF99

99FF99

66FFCC

99FFFF

66CCFF

9999FF

FF99FF

FFCCCC

FFCC99

FFFFCC

CCFFCC

99FFCC

CCFFFF

99CCFF

CCCCFF

FFCCFF

(for this neet little color chart to bookmark click here)

when you write the color names you have to but a # in front of it, and "s around it. for example, lets say you want to make font the color white, (FFFFFF) you would put it like this:

got it? simple,

you CAN make colors that arn't up there... but to be honest I am just learning this myself so I am not going to list how you figure it out... here's what I do know:

there are three parts to the number... the begining, the middle and the end (duh). and each part represents the amount of a color that is in it, the first part is red, the middle is green, and the end is blue. (ya may have noticed this in the chart). The scale of a color goes from 0-F, why I have no idea... but that's how it works. Well anyway so you can of corse play with the numbers/leters example:

60502B

a nice brown...sorta... but a good example...

Seting basic backgrounds and colors and wallpaper is simple,

peice of cake.

Another thing that cirtianly falls under the "basic" part of html is font size, this is about as simple as you can get...

<font size=1> font
<font size=2> font
<font size=3> font (defalt)
<font size=4> font
<font size=5> font
<font size=6> font
<font size=7> font

There are also headings. They, unlike the font sizes go from one being the bigest, to 6 being the smallest...

<h1>

font

<h2>

font

<h3>

font

<h4>

font

<h5>

font

<h6>

font

Yet another nessary basic is the Paragraph and line break, a paragraph looks like a missing space inbetween linkes. ex.

here

to here

the codeing for this is simple:

<p>

the line break is simply a skiped line

here
to here

the codeing for this is just as simple:

<br>

Ok, alignment... centering and puting things to the left is all fairly simple,

left

center

right

Aligning left is defalt, so if you want all your text left don't worry about it, just make sure to close your tags are closed (forgoten this a few times myself.....)

to center something is easy too.

<center> easy enough.

right can be a tiny bit harder... you have to close your paragraphs... (correct me If I'm wrong please)

and you start your paragraph like this:

<P ALIGN="RIGHT"> then make sure to close the p. just use the reg </p> closer... don't worry about the </p align="right"> stuff.

you CAN use the right align thing for centering... but in my eyes it's a pain.

Linking... everyone likes linking... but one thing I can not stress enough CLOSE YOUR TAGS!!!! it is VERY anoying when you don't... (he he... I know from experiance...)

My other HP

<a href="location">link

that simple.

you can also have email addys this way, just use for the location

mailto:emailaddy@something.com

easy.

See how to make anchors later on.

Pictures... easy, yet important,

how:

You can align pictures just like text. only go Img src="addy.gif" Align="align" More on this later

The Title isn't something your likely to see, but it is very important for oh say, bookmarks. You unlike the rest of most of the tags here find this in the head, the codeing is simple, and often auto there.

<title>title</title>

simple but inportant and very easy forget (VERY easy... hehe)

YAAA... your through the basics, though I'm sure you already know most of this stuff but I had to review it. ok, now, finnaly, on to something that has a bit of stance... note I said a bit, most of this stuff with STILL be review for a lot of people... on to:

Spice up your text

Spiceing up text is important, but simple, you can make all kinds of fun things, with VERY simple codes. it makes your page look just that little bit beter. Click Here for a list of alt comands, you press alt+number on the RIGHT keypad, easy.

italics:

<i> and the closeing tag

Bold:

<b> and the closeing tag

Fixed with font:

<tt> and the closeing tag

underline

<u> and the closeing tag

~~Strike through~~

<strike> and the closeing tag

Blink

<blink> and the closeing tag

Another neat trick with font is you know when you see numbers? like powers(3⁵)? or like H₂O?

Writeing^{Super Script}

<sup> and the closeing tag

Writeing _{Sub Script}

<sub> and the closeing tag

Computer Code is shown as tt OR

<code>

This can only be shown
             when you write sevrial lines. things like          spaces, 
Show as things like spaces


here are NO line break tags in here... it auto breaks it's self.

This can be a useful trick,

<pre> and the closeing tag.

I'm sure I missed some, if you can think of any please email me.

The Minors

As I m

I'm entioned above you can align images as well as text, this wouldn't seam to be inportant, but actuly it can lead to a very neet feture called text wraping, in this way the text can flow around the image, to do this you go

<align="right or left" img src="name of image">

not going to show you an example of this because it would take too long to load an image large enough for the efect to work, but I'm sure you can picture this, this works for left and right align only

Another neet thing about Pics is you can make them as big or as small as you want, example:

can be:

How:

Add: WIDTH= desired width in pics HEIGHT=desired height in pics.

I'm sure you get the point.

Images can have altranate text for them, you can do this simply, just

Here's one I just learned! it's where you load a kind of under pic to save loading time, then the real pic loads over it! how cool can you get? here, see what I mean (it's a bad example though)

to do this ya have two images. your img src, and you lowsrc.

K, you need two images, one real simple (the basic 16 colors) and then the normal image.

then, you make a basic image thingy like this

peice of cake, but cool efect, especly for HUGE images!!!

Ancors are another trick, it lets you go to a cirtian spot on the doccument, or on another document, their are two parts. one the name, two the link, to make the name you go

<a name="#name">a word of text</a> then for the link simply for the location put the addy, and thenthe name includeing the #.

Lines, they can be a very good way to seprate diffrent parts of text clearly... lines come in all shapes and sizes... the basic line is like this:

<hr> VERY simple.

But the reason this isn't so bare bone is because there are a lot of ways to play with the basic line...

you can play with how wide a line is... the one up there is 100

75 (a common one to see centered.

and so on... anything inbetween is ok as well. to make a line a cirtian size is simple too:

<hr WIDTH="50%"> or whatever width ya want it...

you can also play with hight. I set all these lines to 25% by the way....

the sizes go from 1-10 there... I have NO idea how big you could go...

that's size 100...

how do you play with higth? like this:

<hr SIZE="3"> this comes AFTER the width...(the defalt's 2) though I don't know if that matters any...

you can also 3d shade and un-3d shade a line...

the top's shaded the botom isn't... the're size 10 to show a huge diffrance...

if you want to unshade a line simply add the word NOSHADE

OF corse you can combine this stuff... write them out in the order I said them.. width, size, then shade/noshade, simple, put a space between each one.

Tables, they can be wounders when you want to get things to be there. ok, simple table:

Caption
spot one spot two spot three

spot four spot five spot six

Caption
spot one	spot two	spot three
spot four	spot five	spot six

The Code:

<TABLE BORDER="0">
<CAPTION>Caption</CAPTION>
<TR>
<TD>spot one</TD>
<TD>spot two</TD>
<TD>spot three</TD>
</TR>
<TR>
<TD>spot four</TD>
<TD>spot five</TD>
<TD>spot six</TD>
</TR>
</TABLE>

The tables go like this, each <tr> tag is a diffrent row, each <td> is a diffrent item, you may want to make sure you make the same number of rows and coloms,I think that if you don't your table will look like this:

Caption
spot one spot two spot three

spot four spot five spot six spot seven

Caption
spot one	spot two	spot three
spot four	spot five	spot six	spot seven

Ok, now lets say ya need to make it go ALL the way across the screen...

Caption,
spot one spot two spot three

spot four spot five spot six

Caption,
spot one	spot two	spot three
spot four	spot five	spot six

the only diffrence between this one and the table above is this one has one added feture, In the first

<table>tag Width="100%" was added:

You can also make a table with Cell padding, The padding works just like lines, infact, the padding ARE lines, and thus go by the same sizeing rules (by the way the rest of these -00-tables will be 100%)

Caption
spot one spot two spot three

spot four spot five spot six

Caption
spot one	spot two	spot three
spot four	spot five	spot six

K, for this you go (in the table tag again)

Border="1"

or another number.

Have you ever gone to a page? and music starts playing? and then woundered, how'd they do that? well here's how:

<EMBED src="Music.mid" WIDTH 200 HEIGHT=55 VOLUME=100 AUTOSTART=TRUE HIDDEN=FALSE>
I don't know enough about the tags to change most of it but what I do know is this, you can make the HIDDEN part =True, and youc an't see the pic, a Major advantage also you can resize it, with the heght and width parts, and Autostart should be on true, and I don't know about looping, but I know this is a majorly good way to have a little music, (this works for .mid and .au so far from what I know, maybe it will work on more then that, but don't ask me)

You can also create a link to music midis, it will automaticly start a player if you have a good netscape, btw, this codeing works on both netscape and ie... but get netscape, it's a thousand times better!

Butons, (PLEASE, if I wack this please email me so I can fix it)

simple.

now to make the little buton do something... you can link it (dugh) you can make it pop up a message like this:

ta da... there are LOTS of buttons... you can have LOTS of fun with um... check out some fun ones at The Java Sorces button page. Java Sorce has a lot of cool Java, I hope hope hope I havn't copyed anything I shouldn;'t have, but it does say for use on web pages, there you can get a lot of java, and also you can learn from the sorce code. There are so many things to do with butons it is amazeing, so I'm not going to get into butons too far. Check out that link for some VERY cool butons.

There are loads of things that could go here.... but the Java sorce basicly has covered them... so 'fraid that I have to move on.... man this page is going to be short... ok the next two things have sections of their own, why, because they take a whole section to explain, first:

Frames

Frames need a section on their own, because let me tell ya, they arn't you avrage run of the mill simple html codeing... this page you are looking at is realy three seprate pages, each made on their own, then combined. PLEASE if anyone knows that I post something wrong tell me.... email me, whatever, cuz I am still kind of new in this feild... but hay, my page works...

Ok, let's say you want to make a frames page... with one little bar along the side... like mine, you want it resizeable... like mine... and basicly, you want it like mine... now, I will be going over how to make harder things... like four frames insted of two... but one thing at a time. Ok, start by makeing one main page. this is the page people will actuly go to when they want to see both frames at the same time... Then there's the bar along the side, and then the big page. Ok, on to the example...

let's just say you have three files...

index.htm

option.htm

main.htm

let's say that index is the main page, option is the bar page, and main is the big page... THIS is the big page, the one you are reading now.

ok, in your index page make a page like this:

<HTML>

<HEAD>
<TITLE>Page title</TITLE>
</HEAD>

<FRAMESET COLS = "15%,85% " >
<FRAME SRC="option.htm" NAME="option" RESIZE>
<FRAME SRC="main.htm" NAME="main" RESIZE>
</FRAMESET>

<NOFRAMES>
<BODY>

<P>

</BODY>

</NOFRAMES>

</HTML>

ok, then the two other pages. the unportant part of this is that the frame srcs are the names of the files you want there. ex, if the files where

cow.htm

horse.htm

dog.html

then you would change

Now the NAME thing can be whatever.... I have yet to find it's meaning but I am not about to start toying with deleating it... but I would fill in SOMETHING there... just to be safe... ok, now you note it says

well... that's because one frame takes up 15% of the screen the other takes up 85%, note that the first one listed is the first one in the frame src thing... now you can make them whatever numbers you want... but they have to (almost sure about this) add up to 100% (makes sence).

Ok, this time you want a banner going across the top...(example)

then you change the

(it's the same thing as above but with the names removed)

to:

peice of cake, again, numbers that add up to 100%, it's not that hard... ok, let's say you want a cross frame... (example, beter then the last example by far.)

so basicly you make two frame sets... then split each frameset into two... so each frame can be split twice, well, you COULD split it more, but it would be a pain.

Ok, there's the part about that one text block, but what about the other part of the basic html code?

well, if you have a browser without frames... then what you put there is what the'll see. I normaly put something like... get a beter browser...

If you have any more questions, please, don't hesitate to email me with them... I'll even set up frames pages for some people, and if you have icq, I'll send the files over to you, and you can upload them to geocities (MUCH beter then angelfire. though you CAN use angelfires advanced editor to make frames)

I had a friend point out to me that I was forgeting something! See, your comments DO matter! I forgot the Target for the pages! Targets are where the links pop up, there are two defalts, one is in the same frame, two is the frames don't "stick" my turm meaning the frames dissapear...

To fix this you can eather go through every link and set a target... I could NEVER manage it with all my links! OR you can do the BETTER method, and put in a defalt target:

notice it is NOT name.htm or name.html, this is the FRAMES NAME, Put that codeing in the head of both of your first apearing start pages... and that solves the prob!

Forms

Forms are another section that deserves their own spot, you can do A LOT with um, saddly, not much of that can be done less you have a cgi scripty thingy, the stuff I want to talk about can be done WITHOUT the script, you'll simply have the message sent to your email box, makeing it so YOU can read the messages ect, get it?

Well, first there are a few thingys you should know about, first things first... you start with a

Form... can you guess what that means?

Method, there are two methods, post and get.... don't ask me but post is what I know... the last part... mailto... just like in links... it will mail the info to ya.

k, now as you know there are a lot of parts of forms...

text boxes...

text arias...

check boxy thingys

raido buttons

listy boxy thingys

drop down lists

and that's about it...

now I am guessing everyone knows what all this stuff is... so on to how to do them...

Text boxes...

input... duh....

type... no brainer here eather fokes...

name, what you want this thingy to be called in your email

Size, the number of letters across...

simple enough?

Text Area...

textarea... need I say more?

Name, see above

rows... rows down

cols... same as size above

Check Boxes...

input... said that enough

type... duh

name, name of selection

value, name of choice name

Radio Buttons...

ya click on one... and the other one goes away... anoying aint they?

well, here the name and value become inportant

see, here's the deal... the NAME has to be the same for them to do that, value dosn't mean anything when it comes to that... get it?

List box...

<SELECT NAME="Selection" SIZE="3" MULTIPLE>
<OPTION>Option 1</OPTION>
<OPTION>Option 2</OPTION>
<OPTION>Option 3</OPTION>
</SELECT>

K, name... duh...

size is like something, havn't figured it out yet, mayhaps option number or something? and option is kinda easy to figure out...

Drag down Box...

<SELECT NAME="Selection85">
<OPTION SELECTED>Option 1</OPTION>
<OPTION>Option 2</OPTION>
<OPTION>Option 3</OPTION>
</SELECT>

K, end buttons...

simple

get how easy it realy is?

isn't it fun

don't forget to close it with a

</form> tag!

JavaScript

Ok, Now, what everyone's been waiting for-Javascript! unlike most places... they tell you what it is... they tell you about it... they give you script to copy, I want to tell you HOW to make pages!!! ya, that's right! I want to tell you how to make thoes neto efects! and WRITE them... Keep in mind I am just a beginer in this feild...

Ok, you saw the button thingys from above right? (if you missed it and just skiped to here go back)

Ok, you know how you click a buton... and it pops up a message? oh come on, you know you do...

much like:

(another Real Page Example)
<FORM><INPUT TYPE="button" VALUE="button name" onClick='alert("Message")'></FORM>

simple? ok... we know what form means...method means what it does... post or get... alll my stuff is post... enctype is how it's sent... input type is what it is... value is the name... onclick... that is what it does ON CLICK... and you can guess the rest.

Now I COULD go through and list a bunch like this... BUT, I want to teach you to write your own things... not look to me to give you everything (though I cirtianly wouldn't mind if you came back and used it as a refrance)

Now as you see in the above VERY simple example, there are basicly a bunch of little parts to that...

I don't know the REAL names of all thoes little parts, so I'll name them myself. the first part is the <form> tag, it's used for buttons, text boxes, ect, any of the stuff shown in the forms section, it may have more uses, i'll tell ya when you need to put it in, and hopeful, by the time I have stuff working, I'll know how to do this stuff myself! amazeing...

Da value is the name on the button, and now the goodstuff!

onClick='alert("message")'

k, onClick, THAT means that on your click... or when you click it... it does what it says do I need to explain the =? I hope not....

K alert means the message pops up, ya get the point. k. now, let's consintrate on that part of the message... the 'alert("message")' part... now what elce can we do with it? wana know? well, you can make a bunch of messages appear one after the other much like

FFFFFF	000000	222222	444444	555555	777777	BBBBBB	DDDDDD	EEEEEE
440000	663300	996633	002200	003333	003399	005555	330066	660066
770000	993300	CC9900	004400	336666	0033FF	000077	660099	990066
AA0000	CC3300	FFCC00	006600	006666	0066FF	0000AA	663399	CC0099
DD0000	FF3300	FFFF00	008800	009999	0099FF	0000DD	9900CC	FF0099
FF0000	FF6600	FFFF33	00EE00	00CCCC	00CCFF	3366FF	9933FF	FF33CC
FF6666	FF6633	FFFF66	66FF66	66CCCC	66FFFF	3399FF	9966FF	FF66FF
FF9999	FF9966	FFFF99	99FF99	66FFCC	99FFFF	66CCFF	9999FF	FF99FF
FFCCCC	FFCC99	FFFFCC	CCFFCC	99FFCC	CCFFFF	99CCFF	CCCCFF	FFCCFF