Most web page making tutorials are either too complex or too beginner. This one is for the beginner. It will only get you started. Many of the techinal terms are not used in this tutorial becuase they have little to no importance.
RULE #1: Dont be afraid to tinker. You cant break your computer if you mess up in HTML. So feel free to mess with it.
HTML: Hyper text markup language. The basis of web pages.
Tag: A command interprited by the computer to perform a specific action.
URL: Uniform Resource Locator
Document: The Single page that you see in your web browser
Web Site: Compilation of Web-based documents
Browser: Program/Window that allows you to view a web-based document
Hexideciaml: A 15 base numeral system where 0 is the smallest and F is the largest.
Source code: The makeup of a compiled file such as programs or web pages.
Compile: The preocess of taking the source code that the computer reads and puting it into what the user reads.
Comment: A part of the source code that is not compiled.
Syntax: The specific method and arangement that a user inputs source code.
The basics:
All HTML tags begin with < and end with >. Some tags you will have to cancel with a /. When defining something sush as background, if there is a space you much put it in double quotes. If you need to declare something within double quotes put it in single quotes. HTML is not case sensitive, but javascript is. HTML also does not care about lines. You can put everything on one line if you would like. Again, javascript does care about lines. All characters can be displayed using their ASCII code. For a complete table click here.
Colors:
Colors in HTML are defined by most browsers in hexidecimal form. #000000 is white, #FFFFFF is black. [#]Says color[FF]says red[FF]says green[FF]says blue. Click here for a HEX color wheel
<HTML> - Begins the HTML document. <HTML>USAGE:
<HEAD> - Contains the information about the document. <HEAD>
BASE - A record of the original URL of the document: this allows you to move the document to a new directory (or even a new site) and have relative URLs access the appropriate place with respect to the original URL. <BASE HREF="http://www.arzynik.com/directory/file.HTML">
LINK - Defines the relationship(s) between this document and another or others. A document can have several LINK elements. <LINK REL="stylesheet" href="style.css"> <LINK REL="next" HREF="http://www.arzynik.com/directory/file2.HTML"> <LINK REL="contents" HREF="http://www.arzynik.com/directory/index.HTML"> <LINK REL="previous" HREF="http://www.arzynik.com/directory/file0.HTML">
META - A container for document metainformation. author - The author of the page. <META NAME="author" CONTENT="Your Name">
keywords - The words that a search engine looks for in the document. <META NAME="keywords" CONTENT="HTML, document, homepage, yourname">
description - The description of the web pages that a search engine displays. <META NAME="description" CONTENT="My first web document">
editor - The program used to created the document (frontpage, notepad, etc.). <META NAME="editor" CONTENT="NOTEPAD">
HTTP-EQUIV="Refresh" - Refreshes the document for a specified number of times to a specified document. <META HTTP-EQUIV="Refresh" CONTENT="12; URL=http://www.arzynik.com/">
HTTP-EQUIV="Expires" - Tells when a document (usually one that is periodicaly updated) expires. <META HTTP-EQUIV="Expires" CONTENT="1-Jan-2020 12:00:00 GMT">
TITLE - The title of the document that apears in the top of your browser window. <TITLE>Welcome to my homepage</TITLE>
STYLE - Stylesheet instructions, written in a stylesheet language. Stylesheet instructions specify how the document should be formatted for display. Very few browser currently support stylesheets. <STYLE TYPE="text/css"> </STYLE>
SCRIPT - Script program code - for enclosing, within a document, scripting program code that should be run with - and that can interact with - the document. Example lanuages are JavaScript and VBScript. <SCRIPT language=javascript> </SCRIPT>
<HTML>
<HEAD>
<TITLE>Welcome to my homepage</TITLE>
<BASE HREF="http://www.arzynik.com/directory/file.HTML">
<LINK HREF="http://www.arzynik.com/directory/file2.HTML" REL="next">
<LINK HREF="http://www.arzynik.com/directory/index.HTML" REL="contents">
<LINK HREF="http://www.arzynik.com/directory/file0.HTML" REL="previous">
<LINK rel="stylesheet" href="style.css">
<META NAME="author" CONTENT="Your Name">
<META NAME="keywords" CONTENT="HTML, document, homepage, yourname">
<META NAME="description" CONTENT="My first web document">
<META NAME="editor" CONTENT="NOTEPAD">
<!META HTTP-EQUIV="Refresh" CONTENT="12; URL=http://www.arzynik.com/">
<META HTTP-EQUIV="Expires" CONTENT="1-Jan-2020 12:00:00 GMT">
<STYLE> </STYLE>
<SCRIPT language=javascript> </SCRIPT>
</HEAD>
TAGS: <!> - A comment. Anything that starts with a ! will be ignored and not processed. <!This is a comment>USAGE: Click here to see what this code does
<BODY> - Contains the body of the document <BODY>
bgcolor - background color <BODY bgcolor=#ffffff>
background - background image <BODY background=picture.gif>
text - color of the body's text <BODY text=#0066cc>
link - color of the body's links <BODY link=#880000>
vlink - color of the body's visited links <BODY vlink=#880088>
alink - color of the body's activive (selected) links <BODY alink=#ff0000>
onLoad - javascript command to execute upon loading of the document <BODY onLoad="doThis()">
<FONT> - Sets the display of your font <FONT> </FONT>
color - modifies the color <FONT> color=#0066cc
size - modifies the size in incriments 1-7. This can be set with a number or with a +[number]. <FONT size=4>
face - modifies the font name of the font <FONT face="times new roman">
<B> - make the following text bold <B> </B>
<I> - makes the following text italic <I> </I>
<H1> - predefined font sizes for headings. Numbers range from 1-6 with 1 being the largest. <H1> </H1>
<A> - The anchor statement makes to following text/image a link to something else. href - the lovation of the link. <A HREF=http://www.arzynik.com>Click Here<\A> <A HREF=index.html#name>Name<\A>
target - where the link will execute. You can define a name of a frame or a webpage in frames and have it execute there. Or, a more common USAGE is "target=_top" (executes in the browser window with no frames around it), "target=_blank" (opens a new browser window to view the document). <A HREF=http://www.arzynik.com TARGET=_blank>Click Here<\A>
name - defines a place in the page to link to <A NAME=name>
<CENTER> - centers anything folowing the tag <CENTER> </CENTER>
<IMG> - displays an image src - Sets the path and/or filename of the image. <IMG SRC=mypic.gif>
border - defines the border arond the image. If the image is linked then you will need to set border=0 in order to remove it. <IMG SRC=mypic.gif border=2>
<BR> - Inserts a break, or carrage return into the document. <BR>
<HR> - Inserts a hard break into the document <HR>
width - sets the width <HR WIDTH=70%>
height - sets the height <HR HEIGHT=20>
color - sets the color <HR COLOR=#FF0000>
size - sets the size <HR size=10>
<TABLE> - Creates a table <TABLE> </TABLE>
colspan - space between collumns <TABLE COLSPAN=20> </TABLE>
rowspan - space between rows <TABLE ROWSPAN=20> </TABLE>
<TR> - Begins a table row <TR> </TR>
<TD> - Begins a the table data. Both <tr> and <td> are suposto be closed with </tr> </td> but it is not necessary. <TD> </TD>
<OL> - Ordered list creates a list with numbers. <OL> </OL>
<UL> - Unordered list creates a list with a bullet. <UL> </UL>
<LI> - Begins the data of the list. Similar to <td>. <LI> </LI>
type - different bullets. type=square or type=circle are the common ones. <LI TYPE=circle> </LI>
<P> - Begins a new paragraph <P> </P>
<DL> - Definition list creates a two layered list. <DL> </DL>
<DT> - Definition term created the first layer in a definition list. <DT>
<DD> - Definition description creates a sub-comumn under a definition term. <DD>
<BODY bgcolor=#ffffff text=#0066cc link=#880000 alink=#ff0000 vlink=#880088>
<center>
<h1>This is my very first page</h1>
<br>
<font size=3 color=blue face=arial>This is where Text will appear on your page</font>
<p align=right>This is my new site <br>
and im really excited <br>
and it is just great i love HTML <br>
and css and javascript <br>
and the world</p>
</center>
<table>
<tr><td>
<ol>
<li>Good things
<ul>
<li>Food
<li>Shoes
<li>Yaks
<li>Computers
</ul>
<li>Bad things
<ul>
<li>Books
<li>Sleveless T-Shirts
<li>Cancre sores
</ul>
</ol>
<td>
<dl>
<dt>Moms family
<dd>Bjork
<dd>Matuan
<dd>Jaq
<dt>Dads family
<dd>Sock
<dd>Bob
<dd>Sally
</dl>
</table>
<table border=0 width=100% colspan=9 rowspan=9>
<tr><td><img src=picofme.jpg width=200 height=100 border=1>
<br>
Its me!
<td><table border=1 width=100%>
<th colspan=2>About me
<tr><td width=100>Name</td>
<td>Your Name</td></tr>
<tr><td>Age</td>
<td>36</td></tr>
<tr><td>Birthdate</td>
<td>January 1st 1901</td></tr>
<tr><td>Location</td>
<td>Earth</td></tr>
<tr><td>Hobbies</td>
<td>Sleeping</td></tr>
<tr><td>Quote</td>
<td>u never know when ur gonna know</td></tr>
<tr><td colspan=2>Well thats all ;-)</td></tr>
</table>
</table>
<hr width=300 color=#008888>
<center>
<a href=http://www.arzynik.com/directory/file.HTML target=_top>
<img src=mypic.gif border=1 height=100 width=100>
<br>
This is my link
</a>
</center>
<hr width=74% color=#008888>
<table border=0 bgcolor=#e6e6e6 align=center>
<tr><td><a href=page1.HTML>page1</a> |
<a href=page2.HTML>page2</a> |
<a href=http://friendsite.com/frinedspage.HTML>Friends Page</a> |
<a href=http://favsite.com/favpage.HTML>Favorite Site</a>
</table>
<!Created by Devin Smith 2002 arzynik.com>
TAGS: <PRE> - preformatet text does not aply any tags within it <PRE> </PRE>USAGE: Click here to see what this code does
<FORM> - a from that gets information from intups and sends it <FORM> </FORM>
<INPUT> - Specifies a user input to send to a form. Requires one of the folowing "TYPE"s radio - a selectable radio button <INPUT TYPE=radio>
text - a field to enter text <INPUT TYPE=text VALUE="Here is your text">
button - creates a button <INPUT TYPE=button VALUE="Press Me">
submit - submits the data in the current form <INPUT TYPE=submit>
clear - clears all data in the current form <INPUT TYPE=clear>
image - Similat to button or submit but uses an image instead of the standard button <INPUT TYPE=image SRC=buttonimage.gif>
hidden - Creates a hidden field that the user cannot see <INPUT TYPE=hidden VALUE=secret>
checkbox - Creates a checkbox for the user to check. <INPUT TYPE=checkbox>
<SELECT> - creates a dropdown menu for selectable options <SELECT name=selector size=1> <OPTION value="Another dropdown"</OPTION> <OPTION selected value="Drop down selected"</OPTION> </SELECT>
<IFRAME> - displays a document inside another document <IFRAME src=page.html width=100> </IFRAME>
<DIV> - creates a division separate from the document. <DIV> </DIV>
position - Sets the position of the division. <DIV align="center" POSITION: absolute; TOP: 336px; right: 15px"> </DIV>
<BIG> - iniates large text <BIG>
<SMALL> - iniates small text <SMALL>
<TEXTAREA> - creates an area in which text can be entered <TEXTAREA> </TEXTAREA>
cols - Specifies the number of collums. <TEXTAREA colls=150> </TEXTAREA>
rows - Specifies the number of rows. <TEXTAREA rows=100> </TEXTAREA>
<FRAMESET> - Specifies a set of frames <frameset rows="*,73" frameborder="0" border="0" framespacing="0" marginwidth="0" marginheight="0">
<FRAME> - defines a frame <frame name="top" src="page1.html" marginwidth="0" marginheight="0" frameborder="no" framespacing="0" border="0">
<NOFRAMES> - Defines a space for for browsers with no frams to view. <noframes> </noframes>
<frameset rows="*,73" frameborder="0" border="0" framespacing="0" marginwidth="0" marginheight="0"> <frame name="top" src="page1.html" marginwidth="0" marginheight="0" frameborder="no" framespacing="0" border="0"> <frame name="bottom" src="page2.html" marginwidth="0" marginheight="0" scrollbars="no" scrolling="no" framespacing="0" frameborder="yes" border="1" NORESIZE> <noframes> <body> This browser does no support frames </body> </noframes> </frameset>
<title>My Second Webpage</title> <pre> My website is great, I love to play with it, I have no life at all, I talk to the wall. Internet is the best, I love coffee, I dont like iced tea, Man I gotta pee. </pre> <CENTER> <Form action="mailto:[email protected]" method="POST"> <INPUT type=hidden name=userid value=dbzuser> <INPUT type=hidden name=webpage value=From_My_Excellent_Site> <i><B> <TABLE WIDTH=420 CELLPADDING=7> <TR><TD> <i><B> <CENTER><B><FONT COLOR=#666666><FONT face='arial' SIZE=4><i><B><Br>Please fill out the following form</FONT></FONT></B></CENTER> </TD></TR><TR><TD> <i><Font size=2 color=black> <B>Name</B> <i><B> <BR><INPUT TYPE=TEXT NAME=name SIZE=40> <BR><B>Email</B> <BR><INPUT TYPE=TEXT NAME=email SIZE=40> <i><B><i><B><Br><B>How did you get here?</B> <BR><SELECT name="here" size=1> <OPTION value="You told me about it dummy!">You told me about it dummy!</OPTION> <OPTION value="I have no clue">I have no clue</OPTION> <OPTION value="I was beamed here by aliens">I was beamed here by aliens</OPTION> <OPTION value="A search engine">A search engine</OPTION> <OPTION value="A banner add">A banner add</OPTION> <OPTION selected value="What? Where am I? Get me out of here!">What? Where am I? Get me out of here! </OPTION> </SELECT> <i><B> <P><B><Font color=black>What could be improved on this website?</B> <Font size=2 color=black> <BR><INPUT type=checkbox name="Color" value="yes">Color <BR><INPUT type=checkbox name="Arangement" value="yes">Arangement <BR><INPUT type=checkbox name="Overall context" value="yes">Overall context <BR><INPUT type=checkbox name="Other visuals" value="yes">Other visuals <BR><INPUT type=checkbox name="Nothing!" value="yes" checked>Nothing! <BR><INPUT type=checkbox name="Everything!" value="yes">Everything! <P><B><Font color=black>Text message</B> <BR><TEXTAREA WRAP=VIRTUAL NAME="comments" COLS=40 ROWS=5></TEXTAREA> </TD></TR><TR><TD ALIGN=CENTER> </A><BR><INPUT type="submit" name="submit" value="Send Email"> <INPUT type="reset" name="reset" value="Reset"></TD> </TR></TABLE></FORM></CENTER> <IFRAME SRC="example1.html" name=top WIDTH=100% HEIGHT=200 NORESIZE FRAMEBORDER="1" MARGINHEIGHT="0" MARGINWIDTH="0" scrolling=yes> </iframe> <DIV align="center" style="Z-INDEX: ;POSITION: absolute; TOP: 50px; right: 200px"> <table> <IMG SRC="http://service.bfast.com/bfast/serve?bfmid=253985&bfsiteid=38086808&bfpage=over001" BORDER="0" WIDTH="1" HEIGHT="1" NOSAVE > <FORM ACTION="http://service.bfast.com/bfast/click" > <INPUT TYPE="hidden" NAME="bfsiteid" VALUE="38086808" > <INPUT TYPE="hidden" NAME="bfpage" VALUE="over001"> <INPUT TYPE="hidden" NAME="bfmid" VALUE="253985" > <table width=154 cellpadding=0 cellspacing=0 border=0> <tr><td width=154 bgcolor=#000000><table width=100% cellpadding=0 cellspacing=2 border=0> <tr><td width=46><img src=http://www.overture.com/images-affiliates/befree/ologo.gif width=46 height=37 border=0 alt=Overture></td> <td width=108 bgcolor=#FFFFFF align=center><Font color=black face=verdana,sans-serif size=1><B>Search the Web.</b><Br><Font color=black>Type it and go!</font></td></tr> <tr><td colspan=2 bgcolor=#FFFFFF><table width=100% cellpadding=5 cellspacing=0 border=0><tr><td align=right><input type="text" size=12 name="Keywords"></td> <td><input type="submit" name="Go" value="Go"><input type="hidden" name="Promo" value="befree"></td></tr></table></td></tr> </table></td></tr></table> </FORM> </table> </DIV>
Style tags: BODY - sets atributes of the body of the document such as BACKGOUND, SCROLLBAR-BASE-COLOR, and basic text setings. A - Sets atributes for the anchor statements. HOVER is activated when you move the mouse over the link. .[anything] - Allows you to specify this class in the body section of the HTML. Defined by "<[TAG] class=[class]>"A simple example:
<style type="text/css">
FONT {FONT-FAMILY: geneva,arial,Verdana,Helvetica; FONT-SIZE: 10px}
BODY {FONT-FAMILY: geneva,arial,Verdana,Helvetica; FONT-SIZE: 10px; COLOR: #008899; BACKGROUND: WHITE; SCROLLBAR-BASE-COLOR: #008888}
A:link {BACKGROUND: none; COLOR: #f5f5f5; FONT-SIZE: 11px; FONT-FAMILY: geneva,arial,Verdana, Helvetica; TEXT-DECORATION: none}
A:active {BACKGROUND: none; COLOR: #808080; FONT-SIZE: 11px; FONT-FAMILY: geneva,arial,Verdana, Helvetica; TEXT-DECORATION: none}
A:visited {BACKGROUND: none; COLOR: #c0c0c0; FONT-SIZE: 11px; FONT-FAMILY: geneva,arial,Verdana, Helvetica; TEXT-DECORATION: none}
A:hover {BACKGROUND: none; COLOR: #b5b5b5; FONT-SIZE: 11px; FONT-FAMILY: geneva,arial,Verdana, Helvetica; TEXT-DECORATION: underline}
.title {BACKGROUND: none; COLOR: none; FONT-SIZE: 32px; FONT-WEIGHT: bold; FONT-FAMILY: 'Times New Roman'; TEXT-DECORATION: none}
</style>
<font class=title>This is the title</font>
<a href=http://www.arzynik.com>This is a link</a>
A complex example:
<style type="text/css">
/*Predifined Tags*/
FONT {FONT-FAMILY: geneva,arial,Verdana,Helvetica; FONT-SIZE: 10px}
TD {FONT-FAMILY: 'Times New Roman'; FONT-SIZE: 14px}
BODY {FONT-FAMILY: geneva,arial,Verdana,Helvetica; FONT-SIZE: 10px; COLOR: #008899; BACKGROUND: BLACK}
BODY {SCROLLBAR-FACE-COLOR: #0066cc;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #0066cc;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #e6e6e6;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
SCROLLBAR-BASE-COLOR: #ffffff}
P {FONT-FAMILY: geneva,arial,Verdana,Helvetica; FONT-SIZE: 10px}
P:First-Line {font: 10pt 'courier new'; color: '#000000'; font-weight: Bold;}
P:First-Letter {font: 10pt 'courier new'; color: '#000000'; font-weight: Bold;}
DIV {FONT-FAMILY: geneva,arial,Verdana,Helvetica; FONT-SIZE: 10px}
INPUT {FONT-FAMILY: geneva,arial,Verdana,Helvetica; FONT-SIZE: 10px}
TEXTAREA {FONT-FAMILY: geneva,arial,Verdana,Helvetica; FONT-SIZE: 10px}
FORM {FONT-FAMILY: geneva,arial,Verdana,Helvetica; FONT-SIZE: 10px}
SELECT {FONT-FAMILY: geneva,arial,Verdana,Helvetica; FONT-SIZE: 10px}
PRE {FONT-FAMILY: geneva,arial,Verdana,Helvetica; FONT-SIZE: 10px; COLOR: #FFFFFF}
BIG {font: 8pt 'arial'; color: '#ffffff'; font-weight: Bold;}
SMALL {font: 8pt 'courier new'; color: '#0066cc'; font-weight: Bold;}
DT {font: 10pt 'courier new'; color: '#ffffff'; font-weight: Bold;}
A:link {BACKGROUND: none; COLOR: #f5f5f5; FONT-SIZE: 11px; FONT-FAMILY: geneva,arial,Verdana, Helvetica; TEXT-DECORATION: none}
A:active {BACKGROUND: none; COLOR: #808080; FONT-SIZE: 11px; FONT-FAMILY: geneva,arial,Verdana, Helvetica; TEXT-DECORATION: none}
A:visited {BACKGROUND: none; COLOR: #c0c0c0; FONT-SIZE: 11px; FONT-FAMILY: geneva,arial,Verdana, Helvetica; TEXT-DECORATION: none}
A:hover {BACKGROUND: none; COLOR: #b5b5b5; FONT-SIZE: 11px; FONT-FAMILY: geneva,arial,Verdana, Helvetica; TEXT-DECORATION: underline}
h1 {font: 14pt 'comic sans ms' bold; color: red;}
h2 {color: #0066cc; font: bold 18pt 'arial';}
h3 {color: #969696; font: bold italic 12pt 'courier new';}
h4 {color: #ffffff; font: 10pt 'courier new';}
h5 {color: #0066cc; font: 9pt arial italic;}
h6 {color: white; font: bold 8pt arial;}
/*Class for text*/
.title {BACKGROUND: none; COLOR: none; FONT-SIZE: 32px; FONT-WEIGHT: bold; FONT-FAMILY: 'Times New Roman'; TEXT-DECORATION: none}
.content {BACKGROUND: none; COLOR: none; FONT-SIZE: 14px; FONT-FAMILY: 'Times New Roman'}
.storytitle {BACKGROUND: none; COLOR: #363636; FONT-SIZE: 12px; FONT-WEIGHT: geneva,arial,bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.bottom {BACKGROUND: none; COLOR: none; FONT-SIZE: 12px; FONT-WEIGHT: geneva,arial,bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
.boxtitle {BACKGROUND: none; COLOR: #363636; FONT-SIZE: 10px; FONT-WEIGHT: geneva,arial,bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
.boxcontent {BACKGROUND: none; COLOR: none; FONT-SIZE: 10px; FONT-FAMILY: geneva,arial,Verdana, Helvetica}
.option {BACKGROUND: none; COLOR: #e6e6e6; FONT-SIZE: 12px; FONT-WEIGHT: bold; FONT-FAMILY: geneva,arial,Verdana, Helvetica; TEXT-DECORATION: none}
.tiny {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 10px; FONT-WEIGHT: italic; FONT-FAMILY: geneva,arial,Verdana, Helvetica; TEXT-DECORATION: none}
/*Class for inputs*/
.greybb {BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; BACKGROUND: #e6e6e6; COLOR: #000000; spacing: 0; BORDER-RIGHT-COLOR: #000000; BORDER-TOP-COLOR: #000000; BORDER-LEFT-COLOR: #000000; BORDER-BOTTOM-COLOR: #000000;}
.whitebb {BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; BACKGROUND: #ffffff; COLOR: #000000; spacing: 0; BORDER-RIGHT-COLOR: #000000; BORDER-TOP-COLOR: #000000; BORDER-LEFT-COLOR: #000000; BORDER-BOTTOM-COLOR: #000000;}
.bluebb {BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; BACKGROUND: #0066cc; COLOR: #ffffff; spacing: 0; BORDER-RIGHT-COLOR: #000000; BORDER-TOP-COLOR: #000000; BORDER-LEFT-COLOR: #000000; BORDER-BOTTOM-COLOR: #000000;}
.greywb {BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; BACKGROUND: #e6e6e6; COLOR: #000000; spacing: 0; BORDER-RIGHT-COLOR: #ffffff; BORDER-TOP-COLOR: #ffffff; BORDER-LEFT-COLOR: #ffffff; BORDER-BOTTOM-COLOR: #ffffff;}
.whitewb {BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; BACKGROUND: #ffffff; COLOR: #000000; spacing: 0; BORDER-RIGHT-COLOR: #ffffff; BORDER-TOP-COLOR: #ffffff; BORDER-LEFT-COLOR: #ffffff; BORDER-BOTTOM-COLOR: #ffffff;}
.bluewb {BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; BACKGROUND: #0066cc; COLOR: #ffffff; spacing: 0; BORDER-RIGHT-COLOR: #ffffff; BORDER-TOP-COLOR: #ffffff; BORDER-LEFT-COLOR: #ffffff; BORDER-BOTTOM-COLOR: #ffffff;}
.greylb {BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; BACKGROUND: #e6e6e6; COLOR: #000000; spacing: 0; BORDER-RIGHT-COLOR: #0066cc; BORDER-TOP-COLOR: #0066cc; BORDER-LEFT-COLOR: #0066cc; BORDER-BOTTOM-COLOR: #0066cc;}
.whitelb {BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; BACKGROUND: #ffffff; COLOR: #000000; spacing: 0; BORDER-RIGHT-COLOR: #0066cc; BORDER-TOP-COLOR: #0066cc; BORDER-LEFT-COLOR: #0066cc; BORDER-BOTTOM-COLOR: #0066cc;}
.bluelb {BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; BACKGROUND: #0066cc; COLOR: #ffffff; spacing: 0; BORDER-RIGHT-COLOR: #0066cc; BORDER-TOP-COLOR: #0066cc; BORDER-LEFT-COLOR: #0066cc; BORDER-BOTTOM-COLOR: #0066cc;}
.greynb {BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid; BACKGROUND: #e6e6e6; COLOR: #000000; spacing: 0; BORDER-RIGHT-COLOR: #000000; BORDER-TOP-COLOR: #000000; BORDER-LEFT-COLOR: #000000; BORDER-BOTTOM-COLOR: #000000;}
</style>
<table class=option>
<tr><td>Table with class</td></tr>
<tr><td><font class=bottom>Text</font><input type=text class=greybb value="test goes in here"></td></tr>
<tr><td><input type=submit class=whitebb value=submit>
</table>
Javascript is a complex client-side web-based programing language. It is generally inserted into the HEAD of the HTML document where it is then processed.
Javascript must be started with <SCRIPT language="javascript"> and end with </SCRIPT>.
Some javascript is inserted into the body directly.
To call to a javascript function from a button
Javascript examples:
document.write - Writes the text directly into the document.
<SCRIPT language="javascript">
document.write("This is <b>Javascript</b> written text")
</SCRIPT>
history.go - changes the current page to on ein the history.
<input type=button value=Back onClick="history.go(-1)">
<input type=button value=Forward onClick="history.go(1)">
window.status - the message at the bottom of the screen, usually "Done".
<SCRIPT language="javascript">
window.status = "Hello! and welcome to my homepage!"
</SCRIPT>
alert - opens an alert dialog
<SCRIPT language="javascript">
alert("This is an alert box!")
</SCRIPT>
window.open - Opens a new window.
<SCRIPT language="javascript">
window.open("color.html","","scrollbars=no,height=400,width=400")
</SCRIPT>
document.bgcolor - changes the background color
<input type="text" size=7 name=bgcolor onBlur="document.bgColor=this.value">
document.fgcolor - changes the foreground (text) color
<input type="text" size=7 name=fgcolor onBlur="document.fgColor=this.value">
Complex examples:
Create a popup with no external document:
<script language=javascript>
function PopIt(title, heading, body)
{
var vartit = "<TITLE>"+title+"</TITLE>";
var varhead = "<FONT COLOR='008899'><B>"+heading+"</B></FONT><br><br>";
var close = "<p align=right><FORM><INPUT TYPE='BUTTON' VALUE='Close' onClick='self.close()'></p>";
popup = window.open("","","height=160,width=300,scrollbars=no");
popup.document.write(vartit+varhead+body+close);
}
</script>
<FORM>
<INPUT TYPE="button" VALUE="PopUp" onClick="PopIt('TITLE', 'HEADING', 'BODY')">
</FORM>
USAGE:
Click here to see what this code does
<title>Javascript examples</title>
<script language=javascript>
function PopIt(title, heading, body)
{
var vartit = "<TITLE>"+title+"</TITLE>";
var varhead = "<FONT COLOR='008899'><B>"+heading+"</B></FONT><br><br>";
var close = "<p align=right><FORM><INPUT TYPE='BUTTON' VALUE='Close' onClick='self.close()'></p>";
popup = window.open("","","height=160,width=300,scrollbars=no");
popup.document.write(vartit+varhead+body+close);
}
</script>
Here are some simple javascript examples<br><br><br>
<FORM>
<INPUT TYPE="button" VALUE="PopUp" onClick="PopIt('TITLE', 'HEADING', 'BODY')"><br>
<input type=button value=Alert onClick="alert('This is an alert box!')"><br>
<input type=button value=Status Bar onClick="window.status = 'Hello! and welcome to my homepage!'"><br>
<input type=button value=Back onClick="history.go(-1)"><br>
<input type=button value=Forward onClick="history.go(1)"><br>
<input type="text" size=7 name=bgcolor onBlur="document.bgColor=this.value">Background<br>
<input type="text" size=7 name=fgcolor onBlur="document.fgColor=this.value">Foreground<br>
</form>