(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:
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:
<font color="color">
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
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:
<font color="#FFFFFF">
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
Seting basic backgrounds and colors and wallpaper is simple,
<BODY BACKGROUND="background image" TEXT="text color" BGCOLOR="background color" LINK="un visited link color" VLINK="Visited link color" ALINK="Active link color">
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>
<h2>
<h3>
<h4>
<h5>
<h6>
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:
<img src="addy">
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:
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(35)? or like H2O?
WriteingSuper 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.
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
can be:
How:
Add: WIDTH= desired width in pics HEIGHT=desired height in pics.
ex
<Img Src="addy" Width=10 Height=10>
I'm sure you get the point.
<img src="image addy" alt=altranate text>
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
<img src="full image name.gif" lowsrc="fast loading image">
peice of cake, but cool efect, especly for HUGE images!!!
<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
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....
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
<hr 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:
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:
Ok, now lets say ya need to make it go ALL the way across the screen...
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:
<table Width="100%">
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%)
K, for this you go (in the table tag again)
Border="1"
or another number.
<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!
simple.
<form><INPUT TYPE="button" VALUE="what's on buton"></form>
now to make the little buton do something... you can link it (dugh) you can make it pop up a message like this:
<FORM> <INPUT TYPE="button" VALUE="buton name" onClick='alert("message")'> </FORM>
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 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
<FRAMESET COLS = "15%,85% " > <FRAME SRC="option.htm" NAME="option" RESIZE> <FRAME SRC="main.htm" NAME="main" RESIZE> </FRAMESET>
to
<FRAMESET COLS = "15%,85% " > <FRAME SRC="horse.htm" NAME="option" RESIZE> <FRAME SRC="dog.html" NAME="main" RESIZE> </FRAMESET>
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
<FRAMESET COLS = "15%,85% " >
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
<FRAMESET COLS = "15%,85% " > <FRAME SRC="name of frame" NAME="name" RESIZE> <FRAME SRC="name of frame" NAME="name" RESIZE> </FRAMESET>
(it's the same thing as above but with the names removed)
to:
<FRAMESET COLS = "100% " > <FRAMESET ROWS = "27%,73% " > <FRAME SRC="name of frame" NAME="name" RESIZE> <FRAME SRC="name of frame" NAME="name" RESIZE> </FRAMESET> </FRAMESET>
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.)
<FRAMESET COLS = "7%,93% " > <FRAMESET ROWS = "11%,89% " > <FRAME SRC="name of little frame" NAME="name" RESIZE> <FRAME SRC="name of side bar" NAME="name" RESIZE> </FRAMESET> <FRAMESET ROWS = "11%,89% " > <FRAME SRC="name of top bar" NAME="name" RESIZE> <FRAME SRC="name of big frame" NAME="name" RESIZE> </FRAMESET>
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?
<NOFRAMES> <BODY> <P> </BODY> </NOFRAMES> </HTML>
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:
<BASE target="name">
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 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 METHOD="POST" ACTION="mailto:your email address">
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 Option 1 Option 2 Option 3
drop down lists Option 1 Option 2 Option 3
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 TYPE="TEXT" NAME="Field" SIZE="25">
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 NAME="TextArea" ROWS="7" COLS="35"></TEXTAREA>
textarea... need I say more?
Name, see above
rows... rows down
cols... same as size above
Check Boxes...
<INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox">
input... said that enough
type... duh
name, name of selection
value, name of choice name
Radio Buttons...
<INPUT TYPE="RADIO" NAME="Radio" VALUE="Radio">
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
<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Submit">
<INPUT TYPE="RESET" NAME="Reset" VALUE="Reset">
get how easy it realy is?
isn't it fun
don't forget to close it with a
</form> tag!
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
OF corse this won't work here silly! we have a backround. BUT, if ya didn't you could MAKE it work, and it would work very nicely may I add! you can of corse replace the color in this thing for something elce
<INPUT TYPE="button" VALUE="button name" onClick="document.bgColor='black'">
NOTE: the last little'" are a ' and a".
Ok, I KNOW there is more stuff I should have on here... PLEASE tell me whatelce I should have. to help me make my page cooler
Get a Geocities page so ya can make your own cool web pages!
Made by Lady Camille, E-mail me
come again.