<head>
</head>
<body>
</body>
</html>
You'll notice the <html> at the very top and the </html> at the
very bottom.
The </> signifies the closure of instructions to a web Browser opening
the page on the Internet...
Next is the <head> and the </head> again with opening and closing
instructions.
The head of a web page is pretty much like your head, your body 'what people
can see' gets instructions from it, but people can't see it!
Next is <body> and the </body> again with opening and closing instructions.
This is the part visitors to your site will see, i.e.. Images, text etc.
If you where to simply type in to the body area the view-able text would be
the default text that a Browser has been set up to show.
If you give instruction for the text, like font face type and Colour, they would
also be given with the opening and closing instruction /.
Example: <font face="Verdanaf" color="#FF0000">Text
given instruction to be font Veranda, Colour Red</font>
If you where to simply insert an image in to the body area the image would
sit to the left, where the text return left off.
Example: <img src="book.gif" width="124" height="167">
You might want the image to be in the middle of the page? The instructions
for this would again come with the opening and closing instruction.
<div align="center"><img src="book.gif" width="124"
height="167"></div>
OK that's about it 'The Basics'
Now here's some thing you need to learn!
The head of a page is very handy, as I explained before this area is not viewed
by the person looking at your site, they only see what's in the body!
BUT the BODY can get instructions from the HEAD. These instructions can be there
and not be used by the body until a visitor to the page clicks on some thing
or even mouses over some thing.
Example: Links! A hyperlink on a web page defaults to blue and underlines when
a visitor goes over it with their mouse, YOU can change this action by adding
a script into the HEAD of your page!
Try this, copy and past this script in to the head of your web page:
<style>
<!--
A:visited {color: #009900; text-decoration: none;}
A:link {color: #0099FF; text-decoration : none;}
A:hover {color: #ff0000; text-decoration: overline underline;}
-->
</style>
You'll notice, once viewed, your text links now react as mine do on this page. You can also change the effect of the reaction by changing the colour's or decorations.
That was a simple script. Some scripts work with the instructions in the body.
Take for instance the current date. For this you would need to insert the script
below in to the body, first select where you would like the date to show up
in your page! Copy and paste this in to that area of the body:
<script language="">
/*Current date script credit:
Website Abstraction (www.wsabstract.com)
Over 200+ free scripts here!
*/
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday",
"Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May",
"June","July","August","September","October","November","December")
document.write("<font color='#0099FF' size='1' face='Verdana, Arial,
Helvetica'><b>"+dayarray[day]+" "+montharray[month]+"
"+daym+", "+year+"</b></font>")
</script>
Some scripts not only need instructions in the HEAD and in the BODY but also
an ONLOAD instruction actually in the BODY tag it's self!
Take for instance this Background Fader:
<!-- THREE STEPS TO INSTALL BACKGROUND FADER:
<!-- STEP ONE: Copy this code into the HEAD of your HTML document -->
<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Hide from old Browser
var Color= new Array(9);
Color[1] = "ff";
Color[2] = "ee";
Color[3] = "dd";
Color[4] = "cc";
Color[5] = "bb";
Color[6] = "aa";
Color[7] = "99";
Color[8] = "88";
Color[9] = "77";
Color[10] = "66";
Color[11] = "55";
Color[12] = "44";
Color[13] = "33";
Color[14] = "22";
Color[15] = "11";
Color[16] = "00";
/* Do not display text on a fading background. Instead, let it
fade in and out once or twice, then load a new page. */
function fadeIn(where) {
if (where >= 1) {
document.bgColor="#" + Color[where] +"0000";
where -= 1;
setTimeout("fadeIn("+where+")", 15);
} else {
setTimeout('fadeOut(1)', 15);
}
}
function fadeout(where) {
if (where <=16) {
document.bgColor="#" + Color[where] +"0000";
where += 1;
setTimeout("fadeout("+where+")", 15)
} else {
setTimeout("fadeIn(16)", 15);
// window.location.href="http://www.netscape.com/";
}
}
// Unhide -->
</SCRIPT>
<!-- STEP TWO: Add the ONLOAD event handler to the BODY tag -->
<BODY onLoad="fadeIn(16)">
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<CENTER>
<SCRIPT LANGUAGE="Javascript">
<FORM>
<INPUT TYPE="button" VALUE=" BACK " onClick="history.go(-1)">
<INPUT TYPE="button" VALUE="FORWARD" onCLick="history.go(1)">
</FORM>
</SCRIPT>
</CENTER>
If only there was a site where there was loads of these levelly scripts, some
where on the net... Well you knew I was going to show you ;)
After all that's what this site is famous for, proving you with information
and loads of Links...
But being a webmaster!! you wont mind having to copy and paste the ULR in to
your browser.
Extra tip! To select all on a page use Ctrl A to copy something highlighted
use Ctrl C and to Paste something you have copied use Ctrl V.
Free Scripts Sites
http://javascript.internet.com/
http://www.jsr.communitech.net/index3.htm
http://www.scriptsearch.com/
http://www.dynamicdrive.com/new.htm
Free Clip Art Sites (Use these sites and avoid corny art!)
http://www.coolarchive.com
http://www.1clipart.com
An online colour chart to help you find the hexadecimal codes you need, easily!
http://www.html-color-codes.com/
Looking for the code in Decimal RGB Colour
http://html-color-codes.com/rgb.html/
More Web and PC help >>>
