Syllabus

1
Syllabus

• Week 1
• Understanding HTML
• A simple Web page
• Linking to other Web pages
• Publishing your HTML pages

2

• Week 2
• Text alignments, lists, and special characters
• Advanced text formatting and links
• Creating HTML forms
• Creating your own web page graphics

3

• Week 2
• Putting graphics on a Web page
• Custom backgrounds and colours
• Creating animated graphics
• Page design and layout

4

• Week2 3
• Graphics links and imagemaps
• Advanced layout with tables
• Using style sheets
• Embedding multimedia in Web pages

5
Week 3

• Multimedia in web pages
• Interactive pages with Applets and ActiveX
• Web page scripting for non-programmers
• Setting pages in motion with Dynamic HTML
• Multi page layout with frames

6
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 delimiters
• 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
• font24pt times roman

7
Style Classes

• To use the above class within the page you would
  use the following line of code
• lth2 classheadingsgtCity College London. lt/h2gt
• 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 ltdivgt tag
• e.g div.footnote font-size 9pt
• line-height12pt
• text-align centre

8
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 ltstylegt and lt/stylegt tags at
  the top of the HTML document between the lt/headgt
  and ltbodygt tags
• To specify a style for only a small part put the
  style attribute within the ltpgt, ltdivgt or ltspangt
  tag
• ltspangt is a dummy tag that does nothing except
  to specify a range of text to apply to any style
  attributes you define

9
Specifying inline styles

• The only difference between the ltdivgt and ltspangt
  is that ltdivgt forces a line break whereas ltspangt
  doesnt
• ltp stylecolor greengt This text is green, but
• ltspan stylecolor redgt This text is
  red.lt/spangt
• Back to green again, but lt/pgt
• ltpgt ..now the green is over, and we are back to
  the default colour for this pagelt/Pgt

10
Positioning and layers

• ltbodygt
• ltspan stylemargin-left 50px margin-top
  40pxgt
• ltimg srcpretty.gif /gt lt/spangt
• ltspan stylemargin-left 60pxgt
• This is a pretty picture lt/spangt
• 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

11
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
• ltspan stylepositionabsolute left
  50pxtop40pxgt
• ltimg srcpretty.gif /gt lt/spangt
• If you leave the position absolute measurements
  will be relative to wherever the text or image
  would normally appear on the page

12
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 standardized
• - Each new Web browser uses different HTML
  tags to include multimedia in Web pages

13
Multimedia in web pages

• The simplest way to put a multimedia on your web
  page is to use the lta hrefgt tag
• e.g lta hreftitanic.avigt Play the Titanic
  videolt/agt
• 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 downloaded

14
Embedding sound in a web page

• Using the ltembed /gt 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
  OLE-compatible helper application software
• Media players come bundled with Netscape and IE
  can handle WAV, AU, MPEG, MID, EPS, VRML media
  types
• 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
• ltembed srchello.wav /gt

15
Embedding sound in a web page

• Within the ltembedgt tag you can also include the
  width, height and align attributes
• The ltembed /gt tag also enables to set any number
  of optional parameters, which are specific to the
  plug-in or player program
• e.g ltembed srcatune.mid width1 height1
• autostarttrue looptrue hiddentrue
  /gt
• This causes the file atune.mid to play whenever
  the page is displayed

16
Embedding sound in a web page

• autostart, loop and hidden are not standard
  attributes of the ltembed /gt tag, so these will be
  passed on to the plug-in program to interpret
• If a suitable plug-in cant 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

17
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
  cant 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 language

18
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 browser
• A script in JavaScript can range from a single
  line to a full-scale 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.

19
JS

• 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

20
Java Applet

• lthtmlgtltheadgtlttitlegtOh Happy Daylt/titlegtlt/headgt
• ltbodygtltdiv align"center"gt
• ltapplet code"Bounce.class" width"500"
  height"300"gt
• No Java? How sad.
• lt/appletgt
• ltapplet code"RnbText.class" width"500"
  height"50"gt
• ltparam name"text" value"B E H A P P Y , L IK E
  M E !!!" /gt
• lt/appletgt
• lt/divgtlt/bodygtlt/htmlgt

21
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

22
Things you can do with JavaScript

• Add scrolling or changing messages to the
  browsers status line
• 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 required

23
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

24
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 applications

25
How JavaScript fits into a Web page

• To add JavaScript to a page use the ltSCRIPTgt tag
• The ltscriptgt tag tells the browser to start
  treating the text as a script, and lt/scriptgt tag
  returns to the regularly scheduled HTML
• In most cases, you cant use JavaScript
  statements except within ltscriptgt tag. The
  exception is event handlers.

26
lthtmlgt ltheadgt lttitlegtOur
Home Pagelt/titlegt lt/headgt ltbodygt
lth1gtThe American Eggplant Societylt/h1gt
ltpgtWelcome to our Web page. Unfortunately,
it's still under construction.
We last worked on it on this datelt/pgtltscript
LANGUAGE"JavaScript" type"text/javascript"
gtdocument.write(document.lastModified)lt/scriptgt
lt/bodygtlt/htmlgt
27

• 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
• LanguageJavaScript specifies the scripting
  language to the browser

28
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 ltheadgt
  tags. Scripts in the header arent executed
  immediately, they can be referred to by other
  scripts. Often used when defining functions
• Within an HTML tag. This is called an event
  handler and allows the script to work with HTML
  elements. (you dont 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
  ltscriptgt tag

29
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

30
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 gt 4.5

31

• The ltscriptgt 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

32
Alternatives to JavaScript

• VBScript
• VBScript is Microsofts 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 ltscript language
  VBScriptgt tag
• Easier to learn than JavaScript
• It is closely integrated with ActiveX,
  Microsofts standard for Web-embedded
  applications
• Disadvantage Only supported by IE. JS supported
  by IE and NN

33
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 slow!!
• It can read and write files on the server. While
  a client-side JavaScript program can read
  information from a form and manipulate it, it
  cant store the data

34
ActiveX

• 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
  again
• 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

35
ActiveX

• lthtmlgtltheadgtlttitlegtLabel Controllt/titlegtlt/headgt
• ltbodygt
• ltobject id"labelA"
• classid"clsid99B42120-6EC7-11CF-A6C7-00AA00A47D
  D2"
• type"application/x-oleobject"
• width"240" height"240" align"left"gt
• ltparam name"Angle" value"30" /gt
• ltparam name"Alignment" value"4" /gt
• ltparam name"BackStyle" value"0" /gt
• ltparam name"Caption" value"Wowza!" /gt
• ltparam name"FontName" value"Arial" /gt
• ltparam name"FontSize" value"36" /gt
• ltparam name"ForeColor" value"9900FF" /gt
• lt/objectgt
• lt/bodygtlt/htmlgt

36

• ActiveX has two main disadvantages
• 1. It isnt as easy to program as a scripting
  language to Java
• 2. ActiveX is proprietary It works only in
  IE and only under Windows platform

37
Questions ??

• Can a Web page include more than one set of
  ltscriptgt tag ?
• Yes.
• 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 users browser doesnt support
  JavaScript at all?
• You can use the HTML comments to prevent older
  browsers from displaying JavaScript code

38
Questions ??

• Why do JavaScript and Java have similar names?
• Although they are different languages,
  JavaScripts 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

39
Tools for Scripting

• For Windows computers, few recommended editors
  are
• - Homesite An excellent HTML editor that
  includes JavaScript supports
• - Microsoft FrontPage 2000- Microsofts
  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

40
A simple JavaScript

• 1 ltscript languageJavaScript1.3gt
• 2 now new Date()
• 3 y2k new Date(Jan 01 2000 000000)
• 4 seconds (now y2k)/ 1000
• 5 document.write(Seconds after the year 2000
  seconds)
• 6 lt/scriptgt
• 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 statement

41

• 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

42
Creating Output

• JavaScript displays information using the
  document.write statement
• 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

43

• lthtmlgt
• ltheadgtlttitlegt The year 2004lt/titlegtlt/headgt
• ltbodygt
• lthr /gt
• ltscript languageJavaScript1.3gt
• now new Date()
• yk new Date(Jan 01 2004 000000)
• seconds (yk now) / 1000
• document.write(seconds until the year 2004
  seconds)
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

44
Questions ??

• 1. What software do you use to create and edit
  JavaScript programs?
• 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

45

• 3. What should appear at the end of your
  JavaScript?
• A. The ltscript languagejavascriptgt tag
• B. The lt/scriptgt tag
• C. The END statement

46
Improving a Sites 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 todays fashionable browsers. It usually
  serves two purposes
• - 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
  yourself.
• Scrolling messages in the status line is one of
  the most popular uses of the JavaScript

47

• 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 pages title from the list to load a
  particular page is usually accomplished with JS

48
Pop-up Windows and Other Features

• 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
!
OK

• These can alert the user to an error, present a
  warning or disclaimer, or prompt for information

49
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 mouseovers

50

• JS can also be used to replace images in a
  sequence, creating a full-scale animation
• JS can be used to detect the users 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 plug-in

51
Complex Scripts

• ltSCRIPT LANGUAGE"JavaScript"gt
• var msg "This is an example of a scrolling
  message. Isn't it exciting?"
• var spacer "... ..."
• var pos 0
• function ScrollMessage()
• window.status msg.substring(pos, msg.length)
  spacer
• msg.substring(0, pos)
• pos
• if (pos gt msg.length) pos 0
• window.setTimeout("ScrollMessage()",200)
• ScrollMessage()
• lt/SCRIPTgt

52

• 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

53

• 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

54
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
• e.g
• function Greet()
• alert (Greetings.)
• The above function will display an alert message
  to the user
• function is a keyword. The functions name is
  Greet. Notice the parentheses after the
  functions name
• The first and the last line include braces ( and
  ). These are used to include all the statements
  in the functions

55

• 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

56
Modified Function

• ltHTMLgtltHEADgt ltTITLEgt Functionslt/TITLEgt
• ltscript languageJavaScriptgt
• function Greet (who)
• alert (greetings, who)
• lt/scriptgt
• lt/headgt
• ltbodygt
• This is the body of the page
• lt/bodygt
• lt/htmlgt

57
Calling the Function

• Making use of the function is referred to as
  calling the function
• To call a function, use the functions name as a
  statement in a script
• You need to include the parentheses and the
  values for the functions 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

58

• 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

59

• lthtmlgtltheadgtlttitlegtFunctionslt/titlegt
• ltscript LANGUAGE"JavaScript"gt
• function Greet(who)
• alert("Greetings," who)
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltpgtPrepare to be greeted twice.lt/pgt
• ltscript LANGUAGE"JavaScript"gt
• Greet("Fred")
• Greet(David")
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

60

• 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 (abcd) / 4
• return result

61

• ltSCRIPT LANGUAGEJavaScriptgt
• Function Average(a,b,c,d)
• result (a b c d) / 4
• return result
• lt/SCRIPTgt
• To use the above function in a script, use a
  variable with a function call
• e.g score Average(3,4,5,6)

62
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 information
• JS uses periods to separate object names and
  property names
• E.g for a person object called Bob, the
  properties might include Bob.address and Bob.phone

63
Methods

• Objects can also include methods
• Methods are functions that work with the objects
  data
• E.g The person object for the address book might
  include a display () method to display the
  persons information
• In Java terminology, the statement Bob.display()
  would display Bobs details

64

• JS supports three kinds of objects
• - Built-in objects These are objects built
  into the JS language
• 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 yourself

65
Web Page Scripting

• Scripting is another word for programming
• Java scripting can be used to create mouse over
  effects on web page images
• The first step in creating mouse over effects is
  to create dark and lit icons using any graphics
  packages

66
Handling Events

• In plain English event handlers are scripts that
  handle events
• In real life, an event is something that happens
  to you.
• E.g things you write on your calendar are events,
  Someones bday, GP appointment etc. You also
  encounter unscheduled events such as traffic
  tickets, or an unexpected visit from relatives
• Whether events are scheduled or unscheduled, you
  probably have normal ways of handling them. When
  Freds bday 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

67
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 ltimg srcbutton.gif onMouseOverhighlight
  ()gt

68
Interactive highlighting
69
HTML code for Mouse Over

• lta hreferica.htmgtltimg srcercadark.jpg
  width98 height214 border0 alterica /gt lt/agt
• In order to refer to this specific image at any
  spot within the web page you need to give it a
  name
• lta hreferica.htmgtltimg nameerica
  srcercadark.jpgltimg srcercadark.jpg width98
  height214 border0 alterica /gt lt/agt
• Now you can add the JavaScript
• lta hreferica.htm OnMouseOvererica.srcerc
  alite.jpg
• OnMouseOuterica.srcercadark.jpg gtltimg
  nameerica iderica srcercadark.jpg
  width98 height214 border0 alterica /gtlt/agt

70
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 JavaScript

71

• ltscript language"JavaScript"gt
• lt!--
• ercalitenew Image(98,214) ercadarknew
  Image(98,214)
• dicklitenew Image(124,214) dickdarknew
  Image(124,214)
• janlitenew Image(136,214) jandarknew
  Image(136,214)
• onalitenew Image(100,214) onadarknew
  Image(100,214)
• ercalite.src"ercalite.jpg" ercadark.src"ercad
  ark.jpg"
• dicklite.src"dicklite.jpg" dickdark.src"dickd
  ark.jpg"
• janlite.src"janlite.jpg" jandark.src"jandar
  k.jpg"
• onalite.src"onalite.jpg" onadark.src"onadar
  k.jpg"
• //?

72
Script tags

• ltscriptgt tag is used whenever some JavaScript
  doesnt go in an attribute of some other tag
• ltscriptgt tag can be placed anywhere in the ltheadgt
  or ltbodygt section of a document
• The lt! and //--gt tags are the comment tags.
  These tags will hide the script from the older
  browsers.

73

• lthtmlgtltheadgtlttitlegtPartslt/titlegt
• ltscript language"JavaScript"gt
• lt!--
• function CalculateTotals()
• fdocument.orderform
• f.total1.valueparseInt(f.qty1.value)50
• f.total2.valueparseInt(f.qty2.value)295
• f.total3.valueparseInt(f.qty3.value)395
• f.total4.valueparseInt(f.qty4.value)750
• f.grandtotal.valueparseInt(f.total1.value)
• parseInt(f.total2.value)
• parseInt(f.total3.value)
• parseInt(f.total4.value)
• //--gt
• lt/scriptgt
• lt/bodygtlt/htmlgt

74

• lt/scriptgtlt/headgt
• ltbodygt
• lth1gtParts Order Formlt/h1gt
• ltpgtIndicate how many of each part you wish to
  order in the "Qty"
• column. The total amount of your order will be
  calculated
• automatically. When you are ready to submit your
  order, click on
• the ltbgtMake Purchaselt/bgt button.lt/pgt

75

• ltform name"orderform" method"post"
  action"/htbin/generic/order.pl"gt
• lttable border"3"gtlttrgt
• ltthgtQtylt/thgtltthgtPart lt/thgtltthgtDescriptionlt/thgt
• ltthgtPricelt/thgtltthgtTotallt/thgtlt/trgt
• lttrgtlttdgt
• ltinput name"qty1" size"3" OnBlur"CalculateTotal
  s()" /gtlt/tdgt
• lttdgt25791lt/tdgtlttdgtChromated Flywheel Knoblt/tdgt
• lttd align"right"gt50lt/tdgt
• lttdgtltinput name"total1" size"7"

76

• OnFocus"document.orderform.qty2.select()
• document.orderform.qty2.focus()"
  /gtlt/tdgtlt/trgt
• lttrgtlttdgt
• ltinput name"qty2" size"3" OnBlur"CalculateTotal
  s()" /gtlt/tdgt
• lttdgt17557lt/tdgtlttdgtPerambulatory Dramographlt/tdgt
• lttd align"right"gt295lt/tdgt
• lttdgtltinput name"total2" size"7"
• OnFocus"document.orderform.qty3.select()
• document.orderform.qty3.focus()"
  /gtlt/tdgtlt/trgt
• lttrgtlttdgt

77

• ltinput name"qty3" size"3" OnBlur"CalculateTotal
  s()" /gtlt/tdgt
• lttdgt98754lt/tdgtlttdgtTriple-Extruded Colorizerlt/tdgt
• lttd align"right"gt395lt/tdgt
• lttdgtltinput name"total3" size"7"
• OnFocus"document.orderform.qty4.select()
• document.orderform.qty4.focus()"
  /gtlt/tdgtlt/trgt
• lttrgtlttdgt
• ltinput name"qty4" size"3" OnBlur"CalculateTotal
  s()" /gtlt/tdgt
• lttdgt47594lt/tdgtlttdgtRediculation Kit (Complete)lt/tdgt

78

• lttd align"right"gt750lt/tdgt
• lttdgtltinput name"total4" size"7"
• OnFocus"document.orderform.qty1.select()
• document.orderform.qty1.focus()"
  /gtlt/tdgtlt/trgt
• lttrgtlttdgtlt/tdgtlttdgtlt/tdgtlttdgtlt/tdgt
• lttd align"right"gtltbgtGRAND TOTALlt/bgtlt/tdgt
• lttdgtltinput name"grandtotal" size"7"
• OnFocus"document.orderform.qty1.select()
• document.orderform.qty1.focus()"
  /gtlt/tdgtlt/trgt
• lt/tablegt

79

• ltbr /gtltinput type"submit" value"Make Purchase"
  /gt
• lt/formgt
• ltscript language"JavaScript"gt
• lt!--
• fdocument.orderform
• f.qty1.value0 f.qty2.value0
• f.qty3.value0 f.qty4.value0
• f.total1.value0 f.total2.value0
• f.total3.value0 f.total4.value0
• f.grandtotal.value0
• //?

80
Steps in creating an order form

• Use the name attribute to name all parts of the
  page
• JavaScript uses the names of the objects for
  reference
• 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 computations
• parseInt() is used to indicate that something is
  a number whenever you want to do some
  computations

81
Scripting

• 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
• OnBlurCalculate Totals(). When the user leaves
  any operation to leave these textboxes, this
  operation is performed to calculate the current
  values

82
Learning how to fly
83
Steps to create flying layers

• Check to see if the browser can handle Dynamic
  HTML
• 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

84
Dividing a Web page into layers

• lt!-- Get the headings and body text ready to fly
  in --gt
• ltdiv id"intro" style"text-align center
  z-index 0
• position absolute left -260px top 88px
  width 260px"gt
• lth1gtThe XYZ Fileslt/h1gt
• lth2gtltigtThe Truth Isltbr /gtIn There.lt/igtlt/h2gt
• If you click on the tabs,ltbr /gtyou might find
  it.ltbr /gt
• Then again, you might not.lt/divgt
• ltdivgt - 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)

85

• lt!-- Give each file folder image its own layer
  --gt
• ltdiv id"layer1" style"position absolute
• left -250px top 10px width 300 z-index
  1"gt
• ltimg src"xfolder.gif" width"300" height"330"
  /gtlt/divgt
• ltdiv id"layer2" style"position absolute
• left -250px top 10px width 300 z-index
  2"gt
• ltimg src"yfolder.gif" width"300" height"330"
  /gtlt/divgt
• ltdiv id"layer3" style"position absolute
• left -250px top 10px width 300 z-index
  3"gt
• ltimg src"zfolder.gif" width"300" height"330"
  /gtlt/divgt

86

• ltdiv style"position absolute
• left 10px top 65px z-index 4"gt
• lta href"" OnClick"layernamemakeName('layer1')
  
• yhop0 ygoal10 xhop40 xgoal70 slide()"gt
• ltimg src"empty.gif" width "35" height"85"
  border"0" /gtlt/agt
• lt/divgt
• ltdiv style"position absolute
• left 330px top 65px z-index 5"gt
• lta href"" OnClick"layernamemakeName('layer1')
  
• yhop0 ygoal10 xhop-40 xgoal-250
  slide()"gt
• ltimg src "empty.gif" width"35" height"85"
  border"0" /gtlt/agt
• lt/divgt

87

• ltdiv style"position absolute
• left 10px top 155px z-index 6"gt
• lta href"" OnClick"layernamemakeName('layer2')
  
• yhop0 ygoal10 xhop40 xgoal70 slide()"gt
• ltimg src"empty.gif" width"35" height"85"
  border"0" /gtlt/agt
• lt/divgt
• ltdiv style"position absolute
• left 330px top 155px z-index 7"gt
• lta href"" OnClick"layernamemakeName('layer2')
  
• yhop0 ygoal10 xhop-40 xgoal-250
  slide()"gt
• ltimg src"empty.gif" width"35" height"85"
  border"0" /gtlt/agt
• lt/divgt

88
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
  ltimg /gt 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

89
Moving a layer around with JavaScript

• ltbody OnLoadif (checkDHTML())
• LayernamemakeName (intro)
• Yhop-2 ygoal20 xhop10 xgoal80 slide() gt
• JavaScript commands after OnLoad in the ltbodygt
  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

90
Slide function

• Function slide()
• If ((parseInt (layername.left) ! xgoal)
• (parsrInt (layername.top) ! ygoal))
• layername.left parseInt (layername.left)
  xhop
• Layername.top parseInt(layername.top) 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 stop
• 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

91
Frames

• 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

92
Frames
93
Frames

• 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

94
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 ltframesetgt and lt/framesetgt are used to
  define frames in HTML

95
lthtmlgtltheadgtlttitlegtThe Entropy Almanaclt/titlegtlt/he
adgt ltframeset rows"80,"gt ltframe
src"banner.htm" name"top" /gt ltframe
src"greeting.htm" name"main" /gt lt/framesetgt ltnof
ramesgt ltbodygt lth1gtThe Entropy Almanaclt/h1gt
Your browser does not support frames. Please lta
href"noframes.htm"gtclick herelt/agt for the
frameless version of this Web site.
lt/bodygt lt/noframesgt lt/htmlgt
96
Frames

• 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
• ltframeset rows80,gt
• 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

97

• 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 ltframeset cols20, 80gt
• 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 ltframe srcbanner.htm nametop idtop
  /gt

98
Linking between frames and windows

• Frames are normally identified by the id
  attribute
• e.g ltframe srcgreeting.htm idmaingt
• The above line will display greeting.htm page
  when the page loads and names the frame main
• lta hreffacts.htm targetmaingtltimg
  srcfacts.gif border0 /gtlt/agt
• When the user clicks this facts.htm link it will
  be displayed in the frame named main
• Without the targetmain attribute the facts.htm
  page would have been displayed in the current
  frame instead

99
Additional frame tags

• marginwidth Left and right margins of the frame
  (in pixels)
• marginheight Top and bottom margins of the
  frame (in pixels)
• scrolling Display scrollbar for the frame?
  (yes or no)
• frameborder Display dividers between this frame
  and adjacent frames (1 means yes, 0 means no)
• noresize dont allow this frame to be resized
  by the user