HTML (Basic HTML Code... )
Uploaded by
VB ViswanadhamHTML (Basic HTML Code... )
Uploaded by
VB ViswanadhamHTML
BASIC ELEMENTS
Document Type <HTML></HTML> (beginning and end of file)
Title <TITLE></TITLE> (must be in header)
Header <HEAD></HEAD> (descriptive info, such as title)
Body <BODY></BODY> (bulk of the page)
STRUCTURAL DEFINITION
Heading <H?></H?> (the spec. defines 6
levels)
Align Heading <H?
ALIGN=LEFT|CENTER|RIGHT></H?>
Division <DIV></DIV>
Align Division <DIVALIGN=LEFT|RIGHT|CENTER>
</DIV>
Block Quote <BLOCKQUOTE></BLOCKQUOTE> (usually displayed
as indented)
Emphasis <EM></EM> (usually displayed
as italic)
Strong <STRONG></STRONG> (usually displayed
Emphasis as bold)
Citation <CITE></CITE> (usually italics)
Code <CODE></CODE> (for source code
listings)
Sample Output <SAMP></SAMP>
Keyboard <KBD></KBD>
Input
Variable <VAR></VAR>
Definition <DFN></DFN> (not widely
implemented)
Author's <ADDRESS></ADDRESS>
Address
Large Font <BIG></BIG>
Size
Small Font <SMALL></SMALL>
Size
PRESENTATION FORMATTING
Bold <B></B>
Italic <I></I>
N3.0b Underline <U></U> (not widely
implemented yet)
Strikeout <STRIKE></STRIKE> (not widely
implemented yet)
N3.0b Strikeout <S></S> (not widely
implemented yet)
Subscript <SUB></SUB>
Superscript <SUP></SUP>
Typewriter <TT></TT> (displays in a
monospaced font)
Preformatted <PRE></PRE> (display text spacing
as-is)
Width <PRE WIDTH=?></PRE> (in characters)
Center <CENTER></CENTER> (for both text and
images)
N1.0 Blinking <BLINK></BLINK> (the most derided tag
ever)
Font Size <FONT SIZE=?></FONT> (ranges from 1-7)
Change Font Size <FONT SIZE="+|-?"></FONT>
N1.0 Base Font Size <BASEFONT SIZE=?> (from 1-7; default is
3)
Font Color <FONT
COLOR="#$$$$$$"></FONT>
N3.0b Select Font <FONT FACE="***"></FONT>
N3.0b Multi-Column <MULTICOL
Text COLS=?></MULTICOL>
N3.0b Column Gutter <MULTICOL (default is 10 pixels)
GUTTER=?></MULTICOL>
N3.0b Column Width <MULTICOL
WIDTH=?></MULTICOL>
N3.0b Spacer <SPACER>
N3.0b Spacer Type <SPACER TYPE=horizontal|
vertical|block>
N3.0b Spacer Size <SPACER SIZE=?>
N3.0b Spacer <SPACER WIDTH=? HEIGHT=?>
Dimensions
N3.0b Spacer <SPACER
Alignment ALIGN=left|right|center>
LINKS AND GRAPHICS
Link <A HREF="URL"></A>
Something
Link to <A HREF="URL#***"></A> (if in another
Target document)
<A HREF="#***"></A> (if in current
document)
N2.0 Target <A HREF="URL" TARGET="***|
Window |_blank|_self|_parent|_top"></A>
Define <A NAME="***"></A>
Target in
Document
Relationship <A REL="***"></A> (not widely
implemented)
Reverse <A REV="***"></A> (not widely
Relationship implemented)
Display <IMG SRC="URL">
Image
Alignment <IMG SRC="URL"
ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>
N1.0 Alignment <IMG SRC="URL" ALIGN=TEXTTOP|
ABSMIDDLE|BASELINE|ABSBOTTOM>
Alternate <IMG SRC="URL" ALT="***"> (if image not
displayed)
Imagemap <IMG SRC="URL" ISMAP> (requires a
script)
Client-Side <IMG SRC="URL" USEMAP="URL">
Imagemap
Map <MAP NAME="***"></MAP>
Description
Map Sections <AREA SHAPE="RECT" COORDS=",,,"
HREF="URL"|NOHREF>
Dimensions <IMG SRC="URL" WIDTH=? HEIGHT=?> (in pixels)
Border <IMG SRC="URL" BORDER=?> (in pixels)
Runaround <IMG SRC="URL" HSPACE=? VSPACE=?> (in pixels)
Space
N1.0 Low-Res <IMG SRC="URL" LOWSRC="URL">
Proxy
N1.1 Client Pull <META HTTP-EQUIV="Refresh"
CONTENT="?; URL=URL">
N2.0 Embed <EMBED SRC="URL"> (insert object
Object into page)
N2.0 Object Size <EMBED SRC="URL" WIDTH=? HEIGHT=?>
DIVIDERS
Paragraph <P></P> (closing tag often
unnecessary)
Align Text <P
ALIGN=LEFT|CENTER|RIGHT></P>
Line Break <BR> (a single carriage
return)
Clear <BR CLEAR=LEFT|RIGHT|ALL>
Textwrap
Horizontal <HR>
Rule
Alignment <HR ALIGN=LEFT|RIGHT|CENTER>
Thickness <HR SIZE=?> (in pixels)
Width <HR WIDTH=?> (in pixels)
N1.0 Width Percent <HR WIDTH="%"> (as a percentage of
page width)
Solid Line <HR NOSHADE> (without the 3D
cutout look)
N1.0 No Break <NOBR></NOBR> (prevents line breaks)
N1.0 Word Break <WBR> (where to break a line
if needed)
LISTS
Unordered List <UL><LI></UL> (<LI> before each
list item)
Compact <UL COMPACT></UL>
Bullet Type <UL (for the whole list)
TYPE=DISC|CIRCLE|SQUARE>
<LI (this & subsequent)
TYPE=DISC|CIRCLE|SQUARE>
Ordered List <OL><LI></OL> (<LI> before each
list item)
Compact <OL COMPACT></OL>
Numbering Type <OL TYPE=A|a|I|i|1> (for the whole list)
<LI TYPE=A|a|I|i|1> (this & subsequent)
Starting Number <OL START=?> (for the whole list)
<LI VALUE=?> (this & subsequent)
Definition List <DL><DT><DD></DL> (<DT>=term,
<DD>=definition)
Compact <DL COMPACT></DL>
Menu List <MENU><LI></MENU> (<LI> before each
list item)
Compact <MENU COMPACT></MENU>
Directory List <DIR><LI></DIR> (<LI> before each
list item)
Compact <DIR COMPACT></DIR>
BACKGROUNDS AND COLORS
Tiled <BODY BACKGROUND="URL">
Bkground
Bkground <BODY BGCOLOR="#$$$$$$"> (order is red/green/blue)
Color
Text Color <BODY TEXT="#$$$$$$">
Link Color <BODY LINK="#$$$$$$">
Visited Link <BODY VLINK="#$$$$$$">
Active Link <BODY ALINK="#$$$$$$">
SPECIAL CHARACTERS (these must all be in lower case)
Special Character &#?; (where ? is the ISO 8859-1
code)
< <
> >
& &
" "
Registered TM ®
Copyright ©
Non-Breaking Space
FORMS
Define Form <FORM ACTION="URL"
METHOD=GET|POST></FORM>
N2.0 File Upload <FORM ENCTYPE="multipart/form-
data"> </FORM>
Input Field <INPUT TYPE="TEXT|PASSWORD
|CHECKBOX|RADIO|
IMAGE|HIDDEN|SUBMIT|RESET">
Field Name <INPUT NAME="***">
Field Value <INPUT VALUE="***">
Checked? <INPUT CHECKED> (checkboxes and
radio boxes)
Field Size <INPUT SIZE=?> (in characters)
Max Length <INPUT MAXLENGTH=?> (in characters)
Selection List <SELECT></SELECT>
Name of List <SELECT NAME="***"></SELECT>
# of Options <SELECT SIZE=?></SELECT>
Multiple <SELECT MULTIPLE> (can select more
Choice than one)
Option <OPTION> (items that can be
selected)
Default <OPTION SELECTED>
Option
Input Box <TEXTAREA ROWS=? COLS=?>
Size
</TEXTAREA>
Name of Box <TEXTAREA NAME="***">
</TEXTAREA>
N2.0 Wrap Text <TEXTAREA
WRAP=OFF|VIRTUAL|PHYSICAL>
</TEXTAREA>
TABLES
Define Table <TABLE></TABLE>
Table Border <TABLE BORDER=?></TABLE>
Cell Spacing <TABLE CELLSPACING=?>
Cell Padding <TABLE CELLPADDING=?>
Desired Width <TABLE WIDTH=?> (in pixels)
Width Percent <TABLE WIDTH="%"> (percentage of
page)
Table Row <TR></TR>
Alignment <TR ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM |MIDDLE>
Table Cell <TD></TD> (must appear
within table rows)
Alignment <TD ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM |MIDDLE>
No linebreaks <TD NOWRAP>
Columns to <TD COLSPAN=?>
Span
Rows to Span <TD ROWSPAN=?>
N1.1 Desired Width <TD WIDTH=?> (in pixels)
N1.1 Width Percent <TD WIDTH="%"> (percentage of
table)
N3.0b Cell Color <TD BGCOLOR="#$$$$$$">
Table Header <TH></TH> (same as data,
except bold
centered)
Alignment <TH ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM |MIDDLE>
No Linebreaks <TH NOWRAP>
Columns to <TH COLSPAN=?>
Span
Rows to Span <TH ROWSPAN=?>
N1.1 Desired Width <TH WIDTH=?> (in pixels)
N1.1 Width Percent <TH WIDTH="%"> (percentage of
table)
N3.0b Cell Color <TH BGCOLOR="#$$$$$$">
Table Caption <CAPTION></CAPTION>
Alignment <CAPTION ALIGN=TOP|BOTTOM> (above/below
table)
FRAMES
N2.0 Frame <FRAMESET></FRAMESET> (instead of <BODY>)
Document
N2.0 Row Heights <FRAMESET (pixels or %)
ROWS=,,,></FRAMESET>
N2.0 Row Heights <FRAMESET (* = relative size)
ROWS=*></FRAMESET>
N2.0 Column Widths <FRAMESET (pixels or %)
COLS=,,,></FRAMESET>
N2.0 Column Widths <FRAMESET (* = relative size)
COLS=*></FRAMESET>
N3.0b Border Width <FRAMESET BORDER=?>
N3.0b Borders <FRAMESET
FRAMEBORDER="yes|no">
N3.0b Border Color <FRAMESET
BORDERCOLOR="#$$$$$$">
N2.0 Define Frame <FRAME> (contents of an
individual frame)
N2.0 Display <FRAME SRC="URL">
Document
N2.0 Frame Name <FRAME
NAME="***"|_blank|_self|
_parent|_top>
N2.0 Margin Width <FRAME MARGINWIDTH=?> (left and right
margins)
N2.0 Margin Height <FRAME MARGINHEIGHT=?> (top and bottom
margins)
N2.0 Scrollbar? <FRAME
SCROLLING="YES|NO|AUTO">
N2.0 Not Resizable <FRAME NORESIZE>
N3.0b Borders <FRAME
FRAMEBORDER="yes|no">
N3.0b Border Color <FRAME
BORDERCOLOR="#$$$$$$">
N2.0 Unframed <NOFRAMES></NOFRAMES> (for non-frames
Content browsers)
JAVA
Applet <APPLET></APPLET>
Applet File <APPLET CODE="***">
Name
Parameters <APPLET PARAM NAME="***">
Applet Location <APPLET CODEBASE="URL">
Applet <APPLET NAME="***"> (for
Identifier references
elsewhere in
the page)
Alternative <APPLET ALT="***"> (for non-Java
Text browsers)
Alignment <APPLET ALIGN="LEFT|RIGHT|CENTER">
Size <APPLET WIDTH=? HEIGHT=?> (in pixels)
Spacing <APPLET HSPACE=? VSPACE=?> (in pixels)
MISCELLANEOUS
Comment <!-- *** --> (not displayed by the
browser)
HTML 3.2 Prologue <!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 3.2//EN">
Searchable <ISINDEX> (indicates a
searchable index)
Prompt <ISINDEX PROMPT="***"> (text to prompt input)
Send Search <A HREF="URL?***"></a> (use a real question
mark)
URL of This File <BASE HREF="URL"> (must be in header)
N2.0 Base Window <BASE TARGET="***"> (must be in header)
Name
Relationship <LINK REV="***" REL="***" (must be in header)
HREF="URL">
Meta Information <META> (must be in header)
Style Sheets <STYLE></STYLE> (not yet widely
supported)
Scripts <SCRIPT></SCRIPT> (not yet widely
supported)
iso8859-1 table
Description Code Entity
name
=============================
============ ==============
quotation mark " -->
" " --> "
ampersand & -->
& & --> &
less-than sign < -->
< < --> <
greater-than sign > -->
> > --> >
Description Char Code
Entity name
=========================== ====
============ ==============
non-breaking space   -->
-->
inverted exclamation ¡ ¡ -->
¡ ¡ --> ¡
cent sign ¢ ¢ -->
¢ ¢ --> ¢
pound sterling £ £ -->
£ £ --> £
general currency sign ¤ ¤ -->
¤ ¤ --> ¤
yen sign ¥ ¥ -->
¥ ¥ --> ¥
broken vertical bar ¦ ¦ -->
¦ ¦ --> ¦
section sign § § -->
§ § --> §
umlaut (dieresis) ¨ ¨ -->
¨ ¨ --> ¨
copyright © © -->
© © --> ©
feminine ordinal ª ª -->
ª ª --> ª
left angle quote,guillemotleft « «
--> « « --> «
not sign ¬ ¬
--> ¬ ¬ --> ¬
soft hyphen ­
--> ­ -->
registered trademark ® ®
--> ® ® --> ®
macron accent ¯ ¯
--> ¯ ¯ --> ¯
degree sign ° °
--> ° ° --> °
plus or minus ± ±
--> ± ± --> ±
superscript two ² ²
--> ² ² --> ²
superscript three ³ ³
--> ³ ³ --> ³
Javascript
This tutorial teach you how to make Magic Buttons! We've all seen those images that
change when the mouse is over them. Well, they're not very difficult at all to make.
It is observed that there are some special software tools that can help you insert
these mouseover effects and apparently some web editors are adding a button for
that too.
So, if there are "automated" tools that do this, why should I mess around with
inserting the code by hand?
Same reason you should learn to author HTML by hand... flexibility, power and
confidence. The flexibility to always be able to do what you want to do without
having to wrestle with some editor. The power to add, change and manipulate the
script in ways the helpful tool would never be able to do. And the confidence that
comes with knowing that not only can you out-manuever any editor, but if
something goes wrong, you have enough of an understanding to be able to fix the
glitch and be on your way while others are standing there holding their "editor".
This is a basic mouseover...
Clicking on it takes you to a another page. Here is the button on a page all by itself.
The idea behind the mouseover is very simple...
When the page first loads, it displays the following image:
When the cursor passes over the image, a second image gets swapped in its place:
When the cursor moves off the image, the first image is swapped back:
Let's build this example from scratch. First we'll make the target page. Copy the
following and save it as another.html.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#0000CC">
<H1 ALIGN=center>Another page!</H1>
</BODY>
</HTML>
And save this as mysample1.html.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Insert the default image...
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<IMG SRC="clickme1.gif" WIDTH="75" HEIGHT="22" BORDER="0" ALT=""
NAME="img01">
</BODY>
</HTML>
At this point in time, it's not overly important that you understand exactly what's
going on here. Just build the thing one piece at a time.
Insert <SCRIPT> tags...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
//--></SCRIPT>
</HEAD>
<BODY>
<IMG SRC="clickme1.gif"
WIDTH="75"HEIGHT="22"BORDER="0"ALT=""NAME="img01">
</BODY>
</HTML>
Insert the image preloading statements. These cause the image files to download
and get into the browser's cache so the mouseover works smoothly. This should be
done for every image you use in the effect...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
// preload images:
if (document.images) {
clickme1 = new Image(75,22); clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22); clickme2.src = "clickme2.gif";
}
//--></SCRIPT>
</HEAD>
<BODY>
<IMG SRC="clickme1.gif"WIDTH="75"HEIGHT="22"BORDER="0" ALT=""
NAME="img01">
</BODY>
</HTML>
Next add the function. This is the "engine" if you will. Tell it which image to swap
with what, and it does it.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
// preload images:
if (document.images) {
clickme1 = new Image(75,22); clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22); clickme2.src = "clickme2.gif";
}
function hiLite(imgName,imgObjName) {
if (document.images) {
document.images[imgName].src = eval(imgObjName + ".src");
}}
//--></SCRIPT>
</HEAD>
<BODY>
<IMG SRC="clickme1.gif"WIDTH="75"HEIGHT="22"BORDER="0"ALT=""
NAME="img01">
</BODY>
</HTML>
And lastly add the credit. (Optional of course)
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
// preload images:
if (document.images) {
clickme1 = new Image(75,22); clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22); clickme2.src = "clickme2.gif";
}
function hiLite(imgName,imgObjName) {
if (document.images) {
document.images[imgName].src = eval(imgObjName + ".src");
}}
//--></SCRIPT>
</HEAD>
<BODY>
<IMG SRC="clickme1.gif"WIDTH="75"HEIGHT="22"BORDER="0"ALT=""
NAME="img01">
</BODY>
</HTML>
Now add a standard link...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
/*********************************************************
// preload images:
if (document.images) {
clickme1 = new Image(75,22); clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22); clickme2.src = "clickme2.gif";
}
function hiLite(imgName,imgObjName) {
if (document.images) {
document.images[imgName].src = eval(imgObjName + ".src");
}}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="another.html">
<IMG SRC="clickme1.gif"WIDTH="75"HEIGHT="22"BORDER="0"ALT=""
NAME="img01">
</A>
</BODY>
</HTML>
Then add the javascript commands to the link...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
// preload images:
if (document.images) {
clickme1 = new Image(75,22); clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22); clickme2.src = "clickme2.gif";
}
function hiLite(imgName,imgObjName) {
if (document.images) {
document.images[imgName].src = eval(imgObjName + ".src");
}}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="another.html"
onMouseOver="hiLite('img01','clickme2')"
onMouseOut="hiLite('img01','clickme1')">
<IMG SRC="clickme1.gif"WIDTH="75"HEIGHT="22"BORDER="0"ALT=""
NAME="img01">
</A>
</BODY>
</HTML>
And that's it!
Get this working and in part 2 we'll examine a little more closely what's going on.
Part 2...
Examine the code to learn what's happening.
// preload images:
if (document.images) {
clickme1 = new Image(75,22); clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22); clickme2.src = "clickme2.gif";
}
This part pre-loads the images. The images are downloaded into the
browser's cache so they're here when the mouseover happens. The alternative would
be to have the image download during the mouseover... which would look terrible.
We want it to be instantaneous. Each of the lines above are for one image. The
easiest way to do this for now is just use the filename of the image all the way
across. The numbers are the image width & height. Note that all images used in a
particular location need to be all the same size.
Let's suppose you wanted to use two images named switch_up.gif and
switch_dn.gif, and these images were 55 pixels wide and 70 pixels tall. You would
construct the preloading statements as follows...
switch_up = new Image(55,70); switch_up.src = "switch_up.gif";
switch_dn = new Image(55,70); switch_dn.src = "switch_dn.gif";
To add images, just add statements...
switch_up = new Image(55,70); switch_up.src = "switch_up.gif";
switch_dn = new Image(55,70); switch_dn.src = "switch_dn.gif";
image1 = new Image(80,20); image1.src = "image1.gif";
image2 = new Image(80,20); image2.src = "image2.gif";
Now look at the function...
function hiLite(imgName,imgObjName) {
if (document.images) {
document.images[imgName].src = eval(imgObjName + ".src");
}}
Think of it as the batter in a ball game that swings at anything you throw at it. Throw
an apple and an orange, it swings. Throw a banana and a barbie doll, it swings.
Except our batter is a function that processes variables that we send to it.
We send those variables in the link...
<A HREF="another.html"
onMouseOver="hiLite('img01','clickme2')"
onMouseOut="hiLite('img01','clickme1')">
<IMG SRC="clickme1.gif" WIDTH="75" HEIGHT="22" BORDER="0" ALT=""
NAME="img01">
</A>
This is just a simple image link to another.html but with a couple additions.
Look at the first javascript command:
onMouseOver="hiLite('img01','clickme2')". Translated this says "On mouseover,
send the variables img01 and clickme2 to the function hiLite()"
The second javascript command is very similar -
onMouseOut="hiLite('img01','clickme1')". Translated this says "On mouseout,
send the variables img01 and clickme1 to the function hiLite()"
Note the NAME attribute in the IMG tag - NAME="img01". This puts a label on that
particular image. It distinguishes it from every other image on the page. Each image
location where you want an effect needs a different name. If you have three links -
Home, Links & Email, they must each have a different name (img01, img02, img03
or homepic, linkpic, emailpic etc)
The function hiLite() knows what to swap where depending on what variables we
send to it. In the link, when we write onMouseOver="hiLite('img01','clickme2')"
we are sending variables to the function. We are saying "On Mouseover, take img01
and clickme2 and process accordingly." When the function gets the variables, it says
"No problem" and proceeds to instantly place clickme2 in image location img01. (The
only reason it happens instantly is because we've taken the time to preload the
images.)
Also, for this simple mouseover, there's nothing we need to alter in the function. We
add images to preload, we configure the link, but we don't do anything with the
function.
Now, The best way to learn is to do. On that basis . Make a page from scratch and
insert a mouseover using these two images...
Make it so that when you click on it, you go to your homepage. (If you don't have a
homepage yet, point it to my homepage.)
Now add a second and third mouseover to the same page using these images...
After completing these excercises you can consider yourself an old hand at adding
mouseovers. Next we'll build on what we know and add a few more items to our bag
of tricks.
Now, before moving on, it is compelled to say something here.Some of you may be
simply skimming through these instructions and maybe skipping these excercises. If
your goal is to skim through so you can say that you read about how to add
mouseovers images... fine. You've accomplished your goal. If, on the other hand,
your goal is to actually learn how to do it so you can actually add mouseover effects
to an actual page, then do the excercises. Instructions make up about 10% of your
learning. Actually doing it is the other 90%... the important part. Remember, you
learn by doing.
Part 3...
After that last excercise you should have something like this...
Here is this effect on a page by itself.
What else can we do with this new found skill?
Well, we can fiddle with the variables that we send to the function to allow a
mouseover of one image to effect a change in another...
Here is this example all by itself.
And here is the code for the above effect:
<A HREF="javascript:nada()"
onMouseOver="hiLite('img04','camera_on')"
onMouseOut="hiLite('img04','camera_off')"><IMG
SRC="flash.gif" WIDTH="64" HEIGHT="16" BORDER="0" ALT="Flash"></A>
<IMG SRC="camera_off.gif"WIDTH="42"
HEIGHT="44"BORDER="0"ALT="Camera"NAME="img04">
And here are the image preloading statements:
camera_off = new Image(42,44); camera_off.src = "camera_off.gif";
camera_on = new Image(42,44); camera_on.src = "camera_on.gif";
Notice the camera image is named img04. It isn't a link and there are no
onMousever statements attached to it. In this instance it's just an ordinary image.
Now, the flash image is the one that does the controlling. Look at it closely and you'll
see that it sends variables to the function. On mouseover it sends img04 &
camera_on to the function. The function dutifully places image camera_on into
image location img04. On mouseout, two more variables are sent to the function
reverting it back. This effectively demonstrates that you can control any image on
the page from anywhere else on the page.
You'll notice the link points to a second function - nada(). This is an empty function,
it does absolutely nothing. Why is it there you ask? Because with some browsers, the
only way events such as OnMouseOver will work, is if they are in a link. If you want
something that is technically a link, yet does nothing, make the link point to a dead
function. Now we have a mouseover that works with most browsers and a link that
won't do anything if someone should happen to click on it.
This is the empty function that can go within your <SCRIPT> tags with your other
function...
function nada() {
}
What if we want something else showing up in the staus bar besides "function
nada()"? Easy, just add the following to your link...
<A HREF="javascript:nada()"
onMouseOver="hiLite('img04','camera_on');self.status='Clickity-click'; return true"
onMouseOut="hiLite('img04','camera_off');self.status=''; return true"><IMG
SRC="flash.gif" WIDTH="64" HEIGHT="16" BORDER="0" ALT="Flash"></A>
<IMG SRC="camera_off.gif" WIDTH="42"
HEIGHT="44" BORDER="0" ALT="Camera" NAME="img04">
The first line places a message in the status bar on mousever and the second line
removes it on mouseout.
You can use an ordinary text link to affect an image...
Flash
<A HREF="javascript:nada()"
onMouseOver="hiLite('img04','camera_on')"
onMouseOut="hiLite('img04','camera_off')">Flash</A>
<IMG SRC="camera_off.gif" WIDTH="42" HEIGHT="44"
BORDER="0" ALT="Camera" NAME="img04">
We could combine these effects into a pretty cool text & image menu...
Home
Links
Email
Here is this effect on a page by itself.
And here is the exact coding for that mouseover menu...
<UL>
<FONT FACE="verdana,arial,helvetica">
<IMG SRC="red_arrow_off.gif" WIDTH="12" HEIGHT="14" BORDER="0" ALT=""
NAME="img07" HSPACE=2>
<A HREF="home.html"
onMouseOver="hiLite('img07','red_arrow_on');self.status='My HomePage';
return true"
onMouseOut="hiLite('img07','red_arrow_off');self.status=''; return true">
Home</A>
<BR>
<IMG SRC="red_arrow_off.gif" WIDTH="12" HEIGHT="14" BORDER="0"
ALT="" NAME="img08"
HSPACE=2>
<A HREF="links.html"
onMouseOver="hiLite('img08','red_arrow_on');self.status='My Links Page';
return true"
onMouseOut="hiLite('img08','red_arrow_off');self.status=''; return true">
Links</A>
<BR>
<IMG SRC="red_arrow_off.gif" WIDTH="12" HEIGHT="14" BORDER="0" ALT=""
NAME="img09"
HSPACE=2>
<A HREF="mailto:me@home"
onMouseOver="hiLite('img09','red_arrow_on');self.status='Email Me';
return true"
onMouseOut="hiLite('img09','red_arrow_off');self.status=''; return true">
Email</A>
</FONT>
</UL>
And these are the preload statements...
red_arrow_off = new Image(12,14); red_arrow_off.src = "red_arrow_off.gif";
red_arrow_on = new Image(12,14); red_arrow_on.src = "red_arrow_on.gif";
Take a minute to study what's going on here. It looks complicated, but it's really not.
Here is another excercise that will help you get the ideas firmly embedded in your
mind and the skill firmly secured under your belt. Reproduce the following effect...
Canadian Goose
Cockatoo
Pigeon
Stork
Swan
Toucan
All the images you'll need are here.
This completed excercise is here.
Once again, by actually doing the excercise, you'll gain invaluable experience.
Are we done yet? Oh no. There's much more to learn and more effects to play with.
On to part 4.
Let's learn about two more events - onMouseDown and onMouseUp. These are fairly
self explanatory. Here is an example...
Here is this effect on a page by itself.
Note that onMouseDown and onMouseUp are supported by newer browsers only
(NN4+, IE4+). Older browsers will only display an effect onMouseOver. Really old
browsers, or browsers with javascript turned off won't do anything except render the
original image. For those with javascript turned off, if your HREF attribute points to a
URL, the user will go there. If it points to a javascript function, nothing will happen.
Here is the code for the above effect along with the image preloading statements and
the three images used...
<A HREF="javascript:nada()"
onMouseOver="hiLite('img01','press___up')"
onMouseOut="hiLite('img01','press_init')"
onMouseDown="hiLite('img01','press_down')"
onMouseUp="hiLite('img01','press___up')"><IMG
SRC="press_init.gif" WIDTH="56" HEIGHT="22" BORDER="0" ALT=""
NAME="img01">
</A>
The preloading statements..
press_init = new Image(56,22); press_init.src = "press_init.gif";
press___up = new Image(56,22); press___up.src = "press___up.gif";
press_down = new Image(56,22); press_down.src = "press_down.gif";
The images...
Place a url in the link (<A HREF="somewhere.html") and it will take you
somewhere...
Of course you can also integrate this into other javascript methods and functions...
The above effects on a page by themselves... effect 1 - effect 2
I'll take this time to explain another event. The onClick event. Here is an example
that executes one of the previous javascript functions...
<A HREF="javascript:sayHi()"
onMouseOver="hiLite('img05','clickme2')"
onMouseOut="hiLite('img05','clickme1')"
onClick="sayHi(); return false"><IMG
SRC="clickme1.gif" WIDTH="75" HEIGHT="22" BORDER="0" ALT=""
NAME="img05"></A>
Normally this event handler is not used in a mouseover link to a url or function. One
circumstance where it would come in handy is a web server that alters your links.
The only one that comes to mind is XOOM although there may be more. When you
click on a link in a page on XOOM and the link supposedly points to page.html,
XOOM alters that link behind the scenes to actually look for _XOOM/page.html (or
something like that). An ill-concieved mechanism such as this can find separate html
pages with no problem. BUT, when the link points to myfunction(), the browser is
tricked into looking for _XOOM/myfunction(). Since it doesn't exist, the function
doesn't execute. What's the cure? (You mean besides get your pages off of XOOM
and tell them to eat your shorts?) If you add an onClick event handler to the link,
you can sidestep this problem because most browsers will honor the instructions in
onClick() before the instructions in the HREF attribute.
Can you use an animated gif in a mouseover?
Why yes, we can...
Here is this effect on a page by itself.
But... we have do do things a teensy bit differently. We don't preload the images. As
far as why, I'll defer to a USENET post by Christopher John Robb...
"Here's the thing: animated gifs start animating when they are loaded, not when
they are shown on the screen. When you preload them, they are run once.
Without the loop, they are lying in a dormant state. You can't preload these
suckers without a loop- and even then, there's no promise that the user won't
move the mouse over or out of the link in the middle of the loop. I don't know
this for sure, but it fixed my problem when I took out the preloading."
So, this is what's going on in that last example...
<A HREF="home.html"
onMouseOver="hiLite2('img06','anihome_up.gif')"
onMouseOut="hiLite2('img06','anihome_down.gif')"><IMG
SRC="anihome_static.gif" WIDTH=60 HEIGHT=25 NAME="img06"
BORDER=0 ALT="Home"></A>
Notice in the code above we are sending to the function the image location and the
image source (as opposed to the image object name.)
Also we're using a slightly modified function for this example...
function hiLite2(imgName,imgSrc) {
if (document.images) {
document.images[imgName].src = imgSrc
}}
It's similar, yet operates slightly differently.
Can we combine mouseovers with image maps?
Yes... but.... It can get a little tricky. There are a few things we must take into
consideration...
1. We must be very precise with our map coordinates.
And because we're relying on javascript for navigation,
2. We should take into consideration those who have javascript disabled
3. We should take into consideration those browsers that can't do mouseovers.
Here is a separate page with this effect all by itself.
This effect is made up of five images...
Depending on the position of the mouse, one of the five images is displayed. The
tricky part is how to get the image to not only display the last four images, but to
revert back to the first image onMouseOut... and all without a nasty flicker.
It is important to look at the coordinates. If you look closely at the numbers, you'll
see that there is slight overlap between the areas. The coordinates are defined as
follows...
"x,y,xx,yy" translates into:
x,y
+----------------------+
| |
| |
+----------------------+
xx,yy
You'll see the yy value of one area is identical to the y value of the area below
(24&24, 38&38, 54&54). This is a one pixel "overlap" between the areas. This is
important because it prevents the image from flickering between areas.
Another thing I've done is to take into consideration surfers with their javascript
disabled. Some folks get really worried about javascript (personally I think their fears
are largely exxagerated). If you want to allow them to navigate your pages, you
have a little extra work to do.
Here is the code for the effect...
<SCRIPT LANGUAGE="javascript"><!--
document.write("<P><A HREF=\"javascript:nada()\"><IMG
SRC=\""+picture_source+"\" width=76 height=76 NAME=\"img09\" border=0
USEMAP=\"#dir1\"></A>");
//--></SCRIPT>
<NOSCRIPT>
<IMG SRC="dir_down_1.gif" WIDTH="76" HEIGHT="76" BORDER="0"
USEMAP="#dir2" ALT="Directory: Home-Mail-Links">
</NOSCRIPT>
The red portion is the part for those with javascript. It actually writes the code using
javascript so if javascript is disabled, it won't write and the </NOSCRIPT> section will
kick in. That noscript section simply displays a static expanded image that points to a
second set of map coordinates. Once again, it may sound complex, but it's really not.
It's just a few simpler things combined into one.
The last precaution we'll take is to concern ourselves with browsers that have
javascript, and have it enabled, but it's an older version of javascript and it doesn't
recognise the image object which makes it mouseover-incapable. We do this with the
following bit of code in the head tags...
if(document.images){
picture_source = "dir_up.gif"
}else{
picture_source = "dir_down_1.gif"
}
Translated this says "If the browser supports the image object, display the collapsed
image. If not, display the expanded image."
If you look at how we wrote the code to display the image...
<SCRIPT LANGUAGE="javascript"><!--
document.write("<P><A HREF=\"javascript:nada()\"><IMG
SRC=\""+picture_source+"\" width=76 height=76 NAME=\"img09\" border=0
USEMAP=\"#dir1\"></A>");
//--></SCRIPT>
<NOSCRIPT>
<IMG SRC="dir_down_1.gif" WIDTH="76" HEIGHT="76" BORDER="0"
USEMAP="#dir2" ALT="Directory: Home-Mail-Links">
</NOSCRIPT>
...you'll see the variable picture_source plugged in for this purpose.
Once again, this is a bit more than a simple mouseover and if you want to study it,
you should really look at the effect on a page all by itself.
In part five we'll do still more with the humble mouseover...
Mouseovers can be used for all sorts of things. Here is one used to update the
contents of a textarea...
Ch dd Ch Q i kB d
Cheddar Cheese Quick Bread
2 cups flour
1 1/2 tsp. baking pow der
1/2 tsp. baking soda
2 tsp dry mustard
1 cup sharp cheddar cheese,
shredded
2 eggs
1 cup buttermilk
1/2 cup oil
Combine first 6 ingredients; set aside
Beat milk, oil and eggs until w ell
blended. Add to flour mixture; mix
until moist. Pour into a w ell greased
loaf pan. Bake at 375 degrees for
about 45 minutes. Cool for 10
minutes. Invert on rack and cool.
Note that although this may look like some sort of text effect, it is not. The "text" is
really images. This effect on a page by itself.
Next is an example of what I call a "sticky button". A sticky button is a button that
acts as a switch. You click it and it "sticks" until you click it again.
This effect on a page by itself.
This is accomplished using a variable in the script that is initially set to "off". When
the effect is clicked, that variable is checked to see if it's currently on or off. If off, it
does one thing and sets the variable to on. If on, it does a different thing and sets
the variable to off.
Here is another example that is used to update frames. This is a little more complex
because it "remembers" what is pressed and what is not. Also if you press an already
depressed button, it will pop back up. Keep in mind that this is a javascript powered
navigation aid. If your visitor has his javascript turned off, or is using a non-js
capable browser, he won't get very far. Notice in the script is a <NOSCRIPT> section
that inserts plain text links for these folks. It's a little messy, but it gets the job done
effectively and efficiently.
Here is a barebones sticky button in the form of a simple switch.
This effect on a page by itself.
Here is a javascript clock that uses images changed by javascript...
This clock on a page by itself.
As you can see, there is much potential for sprucing up a page using these
mouseover effects. Javascript is a wonderful tool you can use in your pages. With it
you can control much of what is on a web page. Every new browser version supports
even more powerful Javascript.
I've been asked many times what is the best way to learn javascript. To that I
answer "The same way you learn any skill... practice." In this tutorial I've suggested
a few excercises. This is where you will do most of your learning. As I've said before,
you learn by doing. The more you do, the more proficient you become. You don't
learn a skill like you learn your ABC's. You learn a skill like you would learn karate...
through many hours of practice and successive skill levels. The more you practice,
learn and hone your skills, the "better" you get at it. It's like hiking up a very long
hill... you never really get to the top, you just move higher up the hill.
We live in a "drag & drop" and "point & click" computer age. We have been sold on
"easy", "quick" and "no effort required". While this all fine and it can certainly be
called progress, some of us pay a heavy price for this convenience. We expect
immediate gratification for our efforts. Often we expect great results from literally
only a few minutes worth of effort. This trend leaves many of us with a severe
handicap. We are not used to, and barely capable of, making a concerted effort over
a period of time to achieve moderate but consistent results. And, this is exactly what
is needed to "learn" javascript.
One of the absolute best resources to have nearby is Netscape's javascript reference.
They have an online version, and the references are also downloadable.
Netscape's JavaScript Reference
Also of great help are the numerous javascript sites scattered about the Internet. A
small listing of exceptional sites is available here. What started as a Martin Webb's
FAQ for the comp.lang.javascript newsgroup has evolved into an outstanding
collection of highly useful javascript information along with articles and FAQs on
other web authoring subjects. A definite must-visit.
About The Internet
The Internet is a global network of networks connecting millions of users worldwide
via many computer networks using a simple standard common addressing system
and communications protocol called TCP/IP (Transmission Control Protocol/Internet
Protocol). This includes federal networks, regional networks, educational and some
foreign networks. The connection between the different networks are called
"gateways". These gateways serve to transfer electronic data worldwide.
For most of its existence the Internet was primarily a research and academic
network. More recently, commercial enterprises and a vast number of consumers
have come to recognize the Internet's potential. Today people and businesses
around the world can use the Internet to retreive information, communicate and
conduct business globally, and access a vast array of services and resources on-line.
The primary use of the Internet is electronic mail (commonly called "e-mail").
Millions of people use the Internet for electronic mail capabilities. Electronic mail
however, is only a small part of what the Internet offers. There's also
• Chat groups
• The World Wide Web
• e-mail and mailing lists
• Bulletin boards and newsgroups
• Remote computer access (telnet)
• File transfer (using ftp, or file transfer protocol)
More recent developments have made possible book and magazine publishing, video
conferencing, and audio broadcasts. Amateur radio, cable television wires, spread
spectrum radio, satellite, and fibre optics have all been used to deliver Internet
services. Networked games, networked monetary transactions, and virtual museums
are among applications being developed.
Users can join any of the thousands of Internet discussion groups, search for specific
information in vast libraries, or transfer a variety of files to their computer. They can
also explore the World Wide Web the Internet's multimedia service. Over just the
last few years Internet-based resources and services have grown exponentially.
Based on current projections this rapid growth will continue into the next decade as
more businesses and consumers make the decision to move onto the Internet.
Technology
When you send a message over the Internet, it is broken into small pieces, called
packets, which travel over many different routes between your computer and the
recipient's computer.
TCP/IP
The communications protocol used to route the packets across the Internet is TCP/IP
(Transmission Control Protocol/Internet Protocol). Use of this standard protocol
enables computers using different operating systems to communicate with each
other. DOS-based PCs, PCs using the Microsoft Windows(R), Windows 95, or
Windows NT(TM) operating system, Macintosh(R) computers, and UNIX(R)-based
systems all use TCP/IP to connect to the Internet.
Client/Server
Once you connect to the Internet, you interact with other computers using a
client/server model. The resources of the Internet -- information and services -- are
provided through host computers, known as servers. The server is the computer
system that contains information such as electronic mail, database information, or
text files. As a customer, or "client," you access those resources via client programs
(applications) which use TCP/IP to deliver the information to your screen in the
appropriate format for your computer.
Browsers
A Browser is a client program (application) that is used to search through
information provided by a specific type of server. A browser helps you view and
navigate through information on the Internet. Today's most popular browsers,
including Mosaic(R), Netscape(TM) Navigator, and the Microsoft Internet Explorer
offer a graphical interface to the World Wide Web.
Organisations
The NSF continues to maintain the backbone of the network (which carries data at a
rate of 45 million bits per second), but Internet protocol development is governed by
the Internet Architecture Board (IAB), and the InterNIC (Internet Network
Information Center) administers the naming of computers and networks. The
Internet Society (ISOC) is a voluntary membership organization whose purpose is to
promote global information exchange through Internet technology. It appoints a
council of elders, which is responsible for the technical management and direction of
the Internet. The council of elders is a group of invited volunteers called the Internet
Architecture Board (IAB). The IAB meets regularly to agree upon standards,
allocation of resources, and defines the rules of how to assign addresses. The final
organization responsible for the Internet is the Internet Engineering Task Force
(IETF). The IETF is another volunteer organization responsible for the operational
and near term technical problems of the Internet.
There is no central authority or organization which collects fees for Internet use.
Instead, everyone who uses the Internet pays for their part. Most networks get
together and decide how to connect themselves and fund these interconnections. A
educational facility, government agency, or corporation pays for their connection to
some regional network which pays a national provider for its access. The process
eventually filters down to you the end user, so everyone who uses the Internet has a
hand in paying for it.
Standards
The Internet is made possible through creation, testing and implementation of
Internet Standards. These standards are developed by the Internet Engineering Task
Force. The standards are then considered by the Internet Engineering Steering
Group, with appeal to the Internet Architecture Board, and promulgated by the
Internet Society as international standards. The RFC Editor is responsible for
preparing and organizing the standards in their final form. The standards may be
found at numerous sites distributed throughout the world. See, for example, the
ds.internic.
At the applications level, the MIT World Wide Web Consortium plays the leading role
in developing and promulgating WWW standards.
TCP/IP
TCP/IP (The Transmission Control Protocol/Internet Protocol) is the protocol
suite that drives the Internet. Specifically, TCP/IP handles network communications
between network nodes (computers, or nodes, connected to the net).
The suite is actually composed of several protocols including IP which handles
the movement of data between host computers, TCP which manages the movement
of data between applications, UDP which also manages the movement of data
between applications but is less complex and reliable than TCP, and ICMP which
transmits error messages and network traffic statistics.
Internet Protocol (IP) is a connectionless protocol that gateways use to
identify networks and paths to networks and hosts. In other words, IP handles the
routing of data between networks and nodes on those networks.
You will be familiar with IP because in order to address web pages, you must
use domain names like www.Mihiramagic.com, or their numerical counterparts
called IP addresses.
NOTE: Domain names are far easier to remember
than IP addresses so we usually use domain
names instead of IP addresses and rely upon
Domain Name Servers to tie domain names to
their IP address counterparts behind the scenes.
IP addresses are unique sets of four period delimited octets that represent
individual hosts on specific networks. A TCP/IP octet is a number between 0 and
255. Thus, an IP Address might look something like : 30.85.1.26
which you might read as something like "computer named 26, on network 1, on
host 85, of network 30."
NOTE: 255 is usually a reserved number which
means broadcast to all hosts and 0 represents
"this", or the current host.
Besides defining the address scheme, IP also handles the transmission of data
from an originating computer to the computer specified by the IP address. It does
so by breaking up large, unwieldy chunks of data into easily manageable IP packets
that it can deliver across the network.
That is why we talk of IP being a connectionless protocol. In an effort to better
manage network traffic, IP specifies the protocol for breaking single messages into
a slew of portions. Each portion is responsible for finding its way across the network
based on changing traffic congestion and the IP protocol.
Each time a message arrives at an IP router, the router decides where to send
it next. There is no concept of a session with a pre selected path for all traffic.
Routers can send data along the path of least resistance regardless of local network
traffic congestion.
If one phone line on the network breaks down, for example, traffic can still
reach its destination through a roundabout path.
Transmission Control Protocol (TCP)
Whereas IP focuses on getting data across the vast network from one
computer to another, TCP assures that the data gets sucked off the network
connected computer and delivered to the receiving application and that the data is
delivered in the correct sequence. Recall that since IP chops messages up into
packets, we need to assure that the messages are assembled correctly at the other
end of transport. And if any errors occur during transport, such as message
degradation or the loss of some packets, the sender will know to resend.
TCP also tries to optimize network bandwidth by controlling the flow of
information dynamically, slowing down as network traffic becomes congested.
Frontpage
Introduction to Microsoft Frontpage
Microsoft FrontPage enables you to design, create, edit, save, and publish your own
web sites. A web site is a collection of individual pages that are linked to one
another. Each of these linked pages is known as a web page. The word Web (upper
case W) derives from the phrase World Wide Web (WWW), the "branch" of the
Internet that has become most popular. This popularity is a result of the Web's
ability to support extensive use of different media types including: drawings, photos,
animations, movies, and sounds, as well as hyperlinks. Hyperlinks are specially
highlighted text or graphics that point to information from other locations on the
Web.
Frontpage consists of three primary tools:
• FrontPage Explorer-- enables you to create, manage, and delete entire web
sites.
• FrontPage Editor-- works like a word processor, enabling you to create and
manage web pages.
• Personal Web Server-- operates behind the scenes, enabling you to create,
test, and store webs before they are published.
Microsoft recommends the following as minimum system requirements for running
FrontPage98:
• A computer with a 486 or higher processor and a 28 KBS or higher modem
• 16 MB RAM, (if running Windows 95) or 32 MB RAM (if running Windows NT)
• a minimum of 36 MB free hard disk space for a full installation
• a VGA or higher graphics card
You might also like
- Reading Comprehension Questions For IBPS PO 2025No ratings yetReading Comprehension Questions For IBPS PO 202551 pages
- TET PAPER 1 & 2 Mock Test Study MaterialNo ratings yetTET PAPER 1 & 2 Mock Test Study Material2 pages
- Azure AI & ML Specialization Guide V1.5No ratings yetAzure AI & ML Specialization Guide V1.524 pages
- HPCZ Health Practitioner Renewal On-Line Guide With CPD Component - Re-EdittedNo ratings yetHPCZ Health Practitioner Renewal On-Line Guide With CPD Component - Re-Editted8 pages
- Panasonic NV Gs6, Gs17, Gs18, Gs21, Gs25, Gs28, Gs35, Gs38100% (1)Panasonic NV Gs6, Gs17, Gs18, Gs21, Gs25, Gs28, Gs35, Gs38110 pages
- Features: TI Cortex A8 Industrial Communication Gateway With 2 X LAN and 6 X COM PortsNo ratings yetFeatures: TI Cortex A8 Industrial Communication Gateway With 2 X LAN and 6 X COM Ports1 page
