Week 1
 Understanding HTML
 A simple Web page
 Linking to other Web pages
 Publishing your HTML pages
Week 2
 Text alignments, lists, and special
 Advanced text formatting and links
 Creating HTML forms
 Creating your own web page graphics
Week 2
 Putting graphics on a Web page
 Custom backgrounds and colours
 Creating animated graphics
 Page design and layout
Week2 &3
 Graphics links and imagemaps
 Advanced layout with tables
 Using style sheets
 Embedding multimedia in Web pages
Week 3
Multimedia in web pages
Interactive pages with Applets and ActiveX
Web page scripting for non-programmers
Setting pages in motion with Dynamic
Multi page layout with frames
Style Classes
 A style class is a custom set of formatting
specifications that can be applied to any passage
of text in a Web page by first defining the tag
 The syntax is the name of the tag followed by a
set of rules enclosed in left and right curly brace
 The first part of the tag name must be an
HTML tag and the second optional part is up
to the user
e.g h2.headings
{font:24pt times roman;
Style Classes
 To use the above class within the page you would
use the following line of code
<h2 class=“headings”>City College London. </h2>
The word City College London will appear in 24-point
Times Roman to people whose browsers support
Times Roman
 You can create a style class that could be applied to any
text rather than specific headings. This can be done by
associating the style class with the <div> tag
 e.g div.footnote {font-size: 9pt;
text-align: centre;}
Specifying inline styles
 In some cases specific styles will be used only in a
particular web page.
 This can be implemented by enclosing the style
sheet between the <style> and </style> tags at the
top of the HTML document between the </head>
and <body> tags
 To specify a style for only a small part put the style
attribute within the <p>, <div> or <span> tag
 <span> is a dummy tag that does nothing except
to specify a range of text to apply to any style
attributes you define
Specifying inline styles
 The only difference between the <div> and
<span> is that <div> forces a line break whereas
<span> doesn’t
<p style=“color: green”> This text is green, but
<span style=“color: red”> This text is red.</span>
Back to green again, but … </p>
<p> the green is over, and we are back to the
default colour for this page</P>
Positioning and layers
<span style=“margin-left: 50px; margin-top: 40px”>
<img src=“pretty.gif /> </span>
<span style=“margin-left: 60px;”>
This is a pretty picture </span>
 The above code will position the first image on the page
exactly 50 pixels to the left and 40 pixels down from the
top-left corner of the browser window.
Finally it will indent the text exactly 60 pixels from the
left edge of the browser window
Positioning and layers
 The code below shows how to position an image
exactly 50 pixels to the left and 40 pixels down from
the top edge of the browser window
<span style=“position:absolute; left:
<img src=“pretty.gif” /> </span>
If you leave the position: absolute measurements
will be relative to wherever the text or image would
normally appear on the page
Multimedia in web pages
 Multimedia is a popular buzzword for sound, motion
video and interactive animation
 The issues still to be resolved are:
- There are many incompatible multimedia file formats
from which to choose, and none has yet been
- Each new Web browser uses different HTML tags to
include multimedia in Web pages
Multimedia in web pages
 The simplest way to put a multimedia on your web
page is to use the <a href> tag
e.g <a href=“titanic.avi> Play the Titanic video</a>
 Depending on the plug-in in the user computer the
application will open the titanic.avi video file
 If no appropriate software is found to download the
.avi file then the browser will offer the web link to the
appropriate site from where the software can be
Embedding sound in a web
 Using the <embed /> tag any file type can be
placed directly on any Web page
 For the media to appear on the web page the user
should have the supporting plug-in or OLEcompatible helper application software
 Media players come bundled with Netscape and IE
can handle WAV, AU, MPEG, MID, EPS, VRML media
 The following line of code will include a media file
named hello.wav and will display the playback
controls at the current position of the page
<embed src=“hello.wav “ />
Embedding sound in a web
 Within the <embed> tag you can also include the
width, height and align attributes
 The <embed /> tag also enables to set any
number of optional parameters, which are specific
to the plug-in or player program
e.g <embed src=atune.mid” width=“1” height=“1”
autostart=“true” loop=“true” hidden=“true” />
This causes the file atune.mid to play whenever the
page is displayed
Embedding sound in a web
 autostart, loop and hidden are not standard
attributes of the <embed /> tag, so these will be
passed on to the plug-in program to interpret
 If a suitable plug-in can’t be found then the
windows 98 or 2000 versions of Netscape and IE
will embed an Object-linking and embedding (OLE)compliant application to play the media file
 Therefore, the sound will play successfully in both
NN and IE
Understanding JavaScript (JS)
Web scripting languages, such as JavaScript, are
one of the easiest ways to spice up a Web page and
to interact with users in new ways
Since HTML is a simple text mark-up language, it
can’t respond to the user, make decisions, or
automate repetitive tasks
Interactive tasks like these require a more complex
language: a programming language, or a scripting
Scripts and Programs
A movie or play follows a script- a list of actions (or lines) for
the actors to perform
A Web script provides the same type of instructions for the
A script in JavaScript can range from a single line to a fullscale application
Some programming languages must be compiled, or
translated into machine code, before they can be executed
JavaScript, on the other hand, is an interpreted
language: The browser executes each line of script as it
comes to it.
There is one main advantage to interpreted languages:
Writing or changing a script is very simple
Changing a JavaScript is as easy as changing a typical HTML
document, and the change is enacted as soon as you reload
the document in the browser
Java Applet
<html><head><title>Oh Happy Day</title></head>
<body><div align="center">
<applet code="Bounce.class" width="500" height="300">
No Java? How sad.
<applet code="RnbText.class" width="500" height="50">
<param name="text" value="B E H A P P Y , L IK E M E !!!"
Introducing JavaScript
JavaScript was developed by Netscape Communications
Corporation, the makers of the popular Netscape Navigator
Web browser
JavaScript was the first Web scripting language to be
introduced, and it is by far the most popular
JavaScript was originally called LiveScript and was first
introduced in Netscape Navigator 2.0 in 1995. It was later
renamed JavaScript to indicate its relationship with Java
Things you can do with JavaScript
Add scrolling or changing messages to the browser’s status
Validate the contents of a form and make calculations (e.g
an order form can automatically display a running total as
you enter item quantities)
Display messages to the user, either as part of a Web page
or in alert boxes
Animate images or create images that change when you
move the mouse over them
Detect the browser in use and display different content for
different browsers
Detect installed plug-ins and notify the user if a plug-in is
JavaScript vs. Java
Java is a programming language developed by Sun
Microsystems that can be used to create applets, or
programs that execute within a Web page
Java is a compiled language, but the compiler produces
code for a virtual machine rather than a real computer
The VM code is then interpreted by a Web browser.
This portability of Java applets allows the same code to
execute the same way on PCs, Macintoshes, and UNIX
machines, and on different browsers- at least in theory!!
JavaScript and Java are entirely different languages
Java vs JavaScript
Java applets are compiled into class files to be used
on a Web page; JavaScript uses simple text
commands, which can be included in the HTML
document itself
Java applets are generally displayed in a box within
a Web Document; JavaScript can affect any part of
the Web document itself
While JavaScript is best suited to simple
applications and adding interactive features to Web
pages, Java can be used for incredibly complex
How JavaScript fits into a Web
To add JavaScript to a page use the <SCRIPT> tag
The <script> tag tells the browser to start treating the text
as a script, and </script> tag returns to the regularly
scheduled HTML
In most cases, you can’t use JavaScript statements except
within <script> tag. The exception is event handlers.
<title>Our Home Page</title>
<h1>The American Eggplant Society</h1>
<p>Welcome to our Web page. Unfortunately,
it's still under construction.
We last worked on it on this date:</p>
<script LANGUAGE="JavaScript"
The document.write statement sends output as part of the
Web document. In the above example it displays the
modification date and time of the document
Language=“JavaScript” specifies the scripting language to
the browser
Where to place the scripts ?
In the body of the page. In this case the output of the script
is displayed as part of the HTML document when the browser
loads the page
In the header of the page, between the <head> tags. Scripts
in the header aren’t executed immediately, they can be
referred to by other scripts. Often used when defining
Within an HTML tag. This is called an event handler and
allows the script to work with HTML elements. (you don’t
need to use the script tag)
In an entirely separate file. JavaScript files can be saved with
the .js extensions. These can be included by specifying the
file within the <script> tag
Browsers and JavaScript
Unlike HTML, the results of browser incompatibility with
JavaScript are more drastic
Rather than simply displaying your text incorrectly, the
script may not execute at all, may display an error
message, or may even crash the browser
Versions of JavaScript
JavaScript 1.0, the original version, is supported by
Netscape 2.0 and IE 3.0
JavaScript 1.1 is supported by Netscape 3.0 and
mostly supported by IE 4.0
JavaScript 1.2 is supported by Netscape 4.0, and
partially supported by IE 4.0
JavaScript 1.3 is supported by Netscape > 4.5
The <script> tag can specify a JavaScript version
One of the feature is to prevent older browsers
from accessing the script
The JavaScript language has been submitted to
the ECMA, a European standards committee
This committee has finalized the ECMA-262
specification, a standard for the language
JavaScript 1.3 follows the ECMA-262 standard
Alternatives to JavaScript
 VBScript is Microsoft’s answer to JavaScript
 VBScript syntax is loosely based on Microsoft Visual Basic, a
popular programming language for Windows machines
 To begin a VBScript, use the <script language
=“VBScript”> tag
 Easier to learn than JavaScript
 It is closely integrated with ActiveX, Microsoft’s standard for
Web-embedded applications
 Disadvantage: Only supported by IE. JS supported by IE and
Common Gateway Interface (CGI)
CGI is not a language, but a specification that allows
programs to run on Web servers
CGI programs can be written in a number of languages,
including Perl, C, and Visual Basic
CGI programs are heavily used on the Web
The main difference between CGI and JavaScript is that CGI
executes on the server, while JavaScript applications execute
on the client
The main disadvantage of CGI is that, since the data must be
sent to the Web server and back, response time may be
It can read and write files on the server. While a client-side
JavaScript program can read information from a form and
ActiveX is a specification developed by Microsoft that allows
ordinary Windows programs to run within a Web page
ActiveX programs can be written in languages such as Visual
C++ and Visual Basic, and they are compiled before they are
placed on the Web server
ActiveX applications, called controls are downloaded and
executed by the Web browser, like Java applets. Unlike Java
applets, controls can be installed permanently when they
are downloaded, eliminating the need to download them
Fortunately, ActiveX includes a signature feature that
identifies the source of the control and prevents controls
from being modified. You can specify which sources of
controls you trust
<html><head><title>Label Control</title></head>
<object id="labelA"
width="240" height="240" align="left">
<param name="Angle" value="30" />
<param name="Alignment" value="4" />
<param name="BackStyle" value="0" />
<param name="Caption" value="Wowza!" />
<param name="FontName" value="Arial" />
<param name="FontSize" value="36" />
<param name="ForeColor" value="#9900FF" />
ActiveX has two main disadvantages:
1. It isn’t as easy to program as a scripting language to
2. ActiveX is proprietary: It works only in IE and only under
Windows platform
Questions ??
Can a Web page include more than one set of <script> tag
 Can you make scripts that work on both NN and IE ?
Yes. But not always easy. JavaScript can detect the browser
and then run the code for the appropriate browser
 What happens if a user’s browser doesn’t support JavaScript
at all?
You can use the HTML comments to prevent older browsers
from displaying JavaScript code
Questions ??
Why do JavaScript and Java have similar names?
Although they are different languages, JavaScript’s syntax is
based on Java
When a user views a page containing a JavaScript program,
which machine actually executes the script ?
JavaScript programs execute on the Web browser
Which of the following languages is supported by both IE
and NN?
. VBScript
. ActiveX
. JavaScript
Tools for Scripting
For Windows computers, few recommended editors
- Homesite – An excellent HTML editor that
includes JavaScript supports
- Microsoft FrontPage 2000- Microsoft’s visual
HTML editor. The script builder components allows
you to easily create simple scripts
- NetObjects ScriptBuilder – A script-oriented
editor that simplifies the process of writing scripts
A simple JavaScript
1: <script language=“JavaScript1.3”>
2: now = new Date();
3: y2k = new Date(“Jan 01 2000 00:00:00”);
4: seconds = (now – y2k)/ 1000;
5: document.write(“Seconds after the year 2000: “ +
6: </script>
Lines 2 and 3 assigns a value ( a date) to a variable
Line 2 creates a variable called now and stores the current
date and time in it
Line 3 creates a variable called y2k and stores the first
moment of the year 2000 in it
Notice the semicolon at the end of the above statements.
These tell the browser that it has reached the end of
The Date is a built-in JavaScript object
seconds = (now – y2k)/ 1000;
The above line will give the number of milliseconds
after the year 2000
The script then converts the value to seconds and
stores it inside the third variable seconds
The parenthesis tells the computer the subtraction
happens before the division
Creating Output
JavaScript displays information using the document.write
The document.write statement displays text, a number, or
anything else you throw at it
document.write(“Seconds after the year 2000: “ + seconds);
The output will display some text followed by the contents of
the seconds variable
The ‘+’ sign tells the browser to combine the two values into
one string of text
<head><title> The year 2004</title></head>
<hr />
<script language=“JavaScript1.3”>
now = new Date();
yk = new Date(“Jan 01 2004 00:00:00”);
seconds = (yk – now) / 1000;
document.write(“seconds until the year 2004:”+ seconds);
Questions ??
1. What software do you use to create and edit JavaScript
A. A browser
B. A text editor
C. A pencil and a piece of paper
2. What are variables used for in JavaScript programs?
A. Storing numbers, dates, or other values
B. Varying randomly
C. Causing high school algebra flashbacks
3. What should appear at the end of your
A. The <script language=“javascript”> tag
B. The </script> tag
C. The END statement
Improving a Site’s User Interface
Using the Status Line
The status line is the grey strip at the bottom of the
browser window that is found in all of today’s
fashionable browsers. It usually serves two
- Displaying descriptions of menu and toolbar items
- Displaying the URL of links as the mouse pointer
moves over them
Using JS you can take control of the status line
Scrolling messages in the status line is one of the
One common example of JavaScript is to replace the URL
display in the status line with a description of the link the
mouse pointer is over
JavaScript can be used to navigate Web sites
The drop-down lists on Web pages where you can select a
page’s title from the list to load a particular page is usually
accomplished with JS
Pop-up Windows and Other
You can create pop-up alert, confirmation, or prompt
messages with JS
A simple example of an alert message is shown below
This is an alert
 These can alert the user to an error, present a warning or
disclaimer, or prompt for information
Graphics and Animation
Using JS you can create dynamic images, which allows
the designer to replace one image on a page with
another image without reloading the page
One of the most common uses of this JS feature is to
create images that change when the mouse moves
over them. This is usually used to highlight an image
used as a link as the user moves the mouse pointer
across it
Graphics that change when the mouse pointer passes
over them are variously known as rollovers or
JS can also be used to replace images in a sequence,
creating a full-scale animation
JS can be used to detect the user’s browser type and
version and either send him/her to the appropriate
customized page or use JS to customize the output
from a single page
You can use JS script to detect whether the browser
has a particular plug-in installed and modify the
HTML page appropriately. If the plug-in is not
available, your script can send the user to a different
page, or even send him to the download page for the
Complex Scripts
var msg = "This is an example of a scrolling message. Isn't it
var spacer = "...
var pos = 0;
function ScrollMessage() {
window.status = msg.substring(pos, msg.length) + spacer
+ msg.substring(0, pos);
if (pos > msg.length) pos = 0;
What are rollovers?
A. A trick performed by dogs
B. Graphics that change when the
mouse passes over them
C. A type of cream-filled pastry
What is CGI ?
A. A scripting language for Web servers
B. A specification that lets programs run
on Web servers
C. A company that makes Web servers
Using Functions
Functions are groups of JS statements that can be treated
as a single unit
In order to use a function, you must first define it
function Greet() {
alert (“Greetings.”);
The above function will display an alert message to the
function is a keyword. The functions name is Greet. Notice
the parentheses after the function’s name
The first and the last line include braces ({ and }). These
are used to include all the statements in the functions
alert (“Greetings.”);
The Greet here uses the alert built in function
This Greet function displays the same message. This avoids
a bit of typing. But not very useful
To make the function more flexible add parameters, also
known as arguments
These are variables that are received by the function each
time it is called
e.g add a parameter called who that tells the function the
name of the person to greet
Modified Function
<HTML><HEAD> <TITLE> Functions</TITLE>
<script language=“JavaScript”>
function Greet (who) {
alert (“greetings,” + who);
This is the body of the page
Calling the Function
Making use of the function is referred to as calling the
 To call a function, use the function’s name as a statement in a
 You need to include the parentheses and the values for the
function’s parameters
e.g. Greet (“Fred”);
 This tells the JS interpreter to transfer control to the first
statement in the Greet function
 It also passes the parameter “Fred” to the function. This value
will be assigned to the who variable inside the function
Note: Functions can have more than one parameter
To define a function with multiple parameters, list a variable
name for each parameter, separated by commas
To call the function, specify values for each parameter,
separated by commas
<script LANGUAGE="JavaScript">
function Greet(who) {
alert("Greetings," + who);
<p>Prepare to be greeted twice.</p>
<script LANGUAGE="JavaScript">
The two function calls to the Greet function, each has a
different name
Greet (“Fred”);
and Greet(“David”);
Functions can return a value to the script that called them.
This can be used to calculate values
E.g create a function that averages 4 numbers
function Average (a,b,c,d) {
result = (a+b+c+d) / 4;
return result;
Function Average(a,b,c,d) {
result = (a + b + c + d) / 4;
return result;
 To use the above function in a script, use a variable with a
function call
e.g score = Average(3,4,5,6);
Understanding Objects
Like variables, objects can store data – but they can store
two or more pieces of data at once
The items of data stored in an object are called the
properties of the objects
E.g. You could use objects to store information about
people, as in an address book. The properties of each
person object might include a name, an address, and other
JS uses periods to separate object names and property
E.g for a person object called Bob, the properties might
include Bob.address and
Objects can also include methods
Methods are functions that work with the object’s data
E.g The person object for the address book might include a
display () method to display the person’s information
In Java terminology, the statement Bob.display() would
display Bob’s details
JS supports three kinds of objects:
- Built-in objects: These are objects built into the JS
e.g Date, Math
- Browser objects: These are objects that represent
various components of the browser and the current
HTML document. E.g. alert() function is a method of
the window object
- Custom objects: These are objects that you create
Web Page Scripting
Scripting is another word for
Java scripting can be used to create
mouse over effects on web page
The first step in creating mouse over
effects is to create dark and lit icons
using any graphics packages
Handling Events
In plain English event handlers are scripts that handle
In real life, an event is something that happens to you.
E.g things you write on your calendar are events, Someone’s
b’day, GP appointment etc. You also encounter unscheduled
events such as traffic tickets, or an unexpected visit from
Whether events are scheduled or unscheduled, you probably
have normal ways of handling them. When Fred’s b’day
arrives send him present or when relatives visit
unexpectedly, turn out the light
Even handlers in JS are similar: they tell the browser what
to do when a certain event occurs
Event Handlers
E.g when the mouse button clicks and When this page is
finished loading
Event handlers are associated with particular browser
objects, and you specify the event handler in the tag that
defines the object
e.g <img src=“button.gif” onMouseOver=“highlight()”>
Interactive highlighting
HTML code for Mouse Over
<a href=“erica.htm”><img src=“ercadark.jpg”
width=98 height=214 border=0 alt=“erica” /> </a>
In order to refer to this specific image at any spot
within the web page you need to give it a name
<a href=“erica.htm”><img name=“erica”
src=“ercadark.jpg<img src=“ercadark.jpg” width=98
height=214 border=0 alt=“erica” /> </a>
Now you can add the JavaScript
<a href=“erica.htm”
OnMouseOver=“erica.src=‘ercalite.jpg’ ”
OnMouseOut=“erica.src=‘ercadark.jpg’ ”><img
name=“erica” id=“erica” src=“ercadark.jpg”
width=98 height=214 border=0 alt=“erica” /></a>
Preloading images for speed
There is a small delay in downloading
the lit images. These want be
downloaded until someone moves the
mouse over it.
This can be avoided by using a small
<script language="JavaScript">
ercalite=new Image(98,214); ercadark=new
dicklite=new Image(124,214); dickdark=new
janlite=new Image(136,214); jandark=new
onalite=new Image(100,214); onadark=new
Script tags
<script> tag is used whenever some
JavaScript doesn’t go in an attribute of some
other tag
<script> tag can be placed anywhere in the
<head> or <body> section of a document
The <!– and //--> tags are the comment
tags. These tags will hide the script from the
older browsers.
<script language="JavaScript">
<!-function CalculateTotals(){
<h1>Parts Order Form</h1>
<p>Indicate how many of each part you wish to order
in the "Qty"
column. The total amount of your order will be
automatically. When you are ready to submit your
order, click on
the <b>Make Purchase</b> button.</p>
<form name="orderform" method="post"
<table border="3"><tr>
<input name="qty1" size="3"
OnBlur="CalculateTotals()" /></td>
<td>25791</td><td>Chromated Flywheel
<td align="right">$50</td>
<td><input name="total1" size="7"
<input name="qty2" size="3"
OnBlur="CalculateTotals()" /></td>
<td align="right">$295</td>
<td><input name="total2" size="7"
<input name="qty3" size="3"
OnBlur="CalculateTotals()" /></td>
<td align="right">$395</td>
<td><input name="total3" size="7"
<input name="qty4" size="3"
OnBlur="CalculateTotals()" /></td>
<td>47594</td><td>Rediculation Kit
<td align="right">$750</td>
<td><input name="total4" size="7"
<td align="right"><b>GRAND
<td><input name="grandtotal" size="7"
<br /><input type="submit" value="Make
Purchase" />
<script language="JavaScript">
f.qty1.value=0; f.qty2.value=0;
f.qty3.value=0; f.qty4.value=0;
f.total1.value=0; f.total2.value=0;
f.total3.value=0; f.total4.value=0;
Steps in creating an order
Use the name attribute to name all parts of the page
JavaScript uses the names of the objects for
The HTML page is always named as “document”
Hence the form is referred as “document.orderform”
The first input item is “document.orderform.qty1”
The function named CalculateTotals() carried out the
parseInt() is used to indicate that something is a
number whenever you want to do some
The script at the bottom resets all the input
elements to 0 when the page first appears
The OnFocus happens when the user first
clicks in an input box to enter data
OnBlur commands are triggered when the
user is done entering data in a box and
moves on to the next one
OnBlur=“Calculate Totals()”. When the user
leaves any operation to leave these
textboxes, this operation is performed to
calculate the current values
Learning how to fly
Steps to create flying layers
 Check to see if the browser can handle Dynamic
 Define and name the layer containing the text;
hide it out of the sight beyond the edge of the page
 Define and name the layers that contain the file
tab images
 Animate the text layer sliding onto the page
Dividing a Web page into
<!-- Get the headings and body text ready to fly in -->
<div id="intro" style="text-align: center; z-index: 0;
position: absolute; left: -260px; top: 88px; width:
<h1>The XYZ Files</h1>
<h2><i>The Truth Is<br />In There.</i></h2>
If you click on the tabs,<br />you might find it.<br />
Then again, you might not.</div>
- <div> - This tag is used to centre a bunch of text or
graphics. This can be used to define a region of the
page (division or layer) so that something can be
performed on the whole region
Use the id attribute to give a name to each div
section (XHTML standard)
<!-- Give each file folder image its own layer -->
<div id="layer1" style="position: absolute;
left: -250px; top: 10px; width: 300; z-index: 1">
<img src="xfolder.gif" width="300" height="330" /></div>
<div id="layer2" style="position: absolute;
left: -250px; top: 10px; width: 300; z-index: 2">
<img src="yfolder.gif" width="300" height="330" /></div>
<div id="layer3" style="position: absolute;
left: -250px; top: 10px; width: 300; z-index: 3">
<img src="zfolder.gif" width="300" height="330" /></div>
<div style="position: absolute;
left: 10px; top: 65px; z-index: 4">
<a href="#" OnClick="layername=makeName('layer1');
yhop=0; ygoal=10; xhop=40; xgoal=70; slide()">
<img src="empty.gif" width= "35" height="85" border="0"
<div style="position: absolute;
left: 330px; top: 65px; z-index: 5">
<a href="#" OnClick="layername=makeName('layer1');
yhop=0; ygoal=10; xhop=-40; xgoal=-250; slide()">
<img src= "empty.gif" width="35" height="85" border="0"
<div style="position: absolute;
left: 10px; top: 155px; z-index: 6">
<a href="#" OnClick="layername=makeName('layer2');
yhop=0; ygoal=10; xhop=40; xgoal=70; slide()">
<img src="empty.gif" width="35" height="85" border="0" /></a>
<div style="position: absolute;
left: 330px; top: 155px; z-index: 7">
<a href="#" OnClick="layername=makeName('layer2');
yhop=0; ygoal=10; xhop=-40; xgoal=-250; slide()">
<img src="empty.gif" width="35" height="85" border="0" /></a>
Dividing a Web page into layers
The style attribute positions this layer 88 pixels down
from the top edge of the browser window
A negative 260 pixels from the left means you want be
able to see this layer
Width is 260 pixels and the text should be centred in
that 260 pixel wide region
Each of the last three tags contains a single <img />
tag, placing a 300X330 image. But only the rightmost
50 pixels of the image are visible
The z-index determines the layer appearance
If you give the “intro” layer a z-index of 4 or higher
then the text would appear in front of the file
Moving a layer around with
<body OnLoad=“if (checkDHTML()){
Layername=makeName (‘intro’);
Yhop=-2; ygoal=20; xhop=10; xgoal=80; slide() “}>
 JavaScript commands after OnLoad= in the <body> tag
are carried out as soon as the Web page is displayed
The JavaScript on the OnLoad attribute starts the
checkDHTML function
If it detects the DHTML browser then makeName
function is given the layer ID “intro” so that it can create
the appropriate IE or Netscape layer name. The results
will be saved as layername
The yhop, ygoal, xhop, and xgoal tells the slide function
where to move the layer and how fast to move it
Slide function
Function slide() {
If ((parseInt (layername.left) != xgoal) ||
(parsrInt ( != ygoal))
{ layername.left = parseInt (layername.left) + xhop; = parseInt( yhop;
Window.setTimeout(“slide()”, delay)} }
 First the function determines whether the layer
referred to by layername is already at the location
specified by xgoal and ygoal, which is where it is to
 If it is not there it slides the layer xhop pixels
horizontally and yhop pixels vertically
 If xhop is negative number, the layer will hop to the
left instead of to the right
A frame is a rectangular region within the browser
window that displays a Web page, alongside other
pages in other frames
Frames are like tables. They allow to arrange text
and graphics into rows and columns
Frames can be used to display an unchanged index
page whereas another frame could change based on
which links the user click
The advantage of using frames is that when
the user clicks a link on one of the frames the
content on the other frame will change
Creating a frameset document
First create the contents of each frame as an
ordinary HTML page
Use the frameset document to split the Web Page
window into multiple frames and define the contents
for each frame
The tags <frameset> and </frameset> are used to
define frames in HTML
<html><head><title>The Entropy
<frameset rows="80,*">
<frame src="banner.htm" name="top" />
<frame src="greeting.htm" name="main" />
<h1>The Entropy Almanac</h1>
Your browser does not support frames.
Please <a href="noframes.htm">click here</a> for
the frameless version of this Web site.
The row attribute within the frameset tag splits the window or
frameset vertically into a number of rows specified by a number
An asterisk (*) indicates that the frame should take up
remaining space or divide it evenly between multiple frames
<frameset rows=“80,*”>
Meaning the top frame will be exactly 80 pixels tall, and the
bottom frame will take up all the remaining space in the window
The cols attribute works similar to rows, except that the window
or frameset is split horizontally into columns
It is hard to predict the size of all the windows and
hence it is better to use the percentages rather than
exact pixel values
e.g: <frameset cols=“20%, 80%”>
This will make the left frame 20% of the width of
the browser window and the right frame will take up
the remaining 80%
Within the frameset tag you should also have the
frame tag which indicates the source HTML
document to display in each frame
e.g: <frame src=“banner.htm” name=top” id=“top” />
Linking between frames and windows
Frames are normally identified by the id attribute
e.g <frame src=“greeting.htm” id=“main”>
 The above line will display greeting.htm page when
the page loads and names the frame “main”
<a href=“facts.htm” target=“main”><img
src=“facts.gif” border=0 /></a>
 When the user clicks this facts.htm link it will be
displayed in the frame named main
 Without the target=“main” attribute the facts.htm
page would have been displayed in the current
frame instead
Additional frame tags
marginwidth – Left and right margins of the frame (in
marginheight – Top and bottom margins of the frame
(in pixels)
scrolling – Display scrollbar for the frame? (“yes” or
frameborder – Display dividers between this frame
and adjacent frames (1 means yes, 0 means no)
noresize – don’t allow this frame to be resized by the