Named anchors
This presentation is the property of its rightful owner.
Sponsored Links
1 / 44

NAMEd anchors PowerPoint PPT Presentation


  • 64 Views
  • Uploaded on
  • Presentation posted in: General

NAMEd anchors. Enabling users to jump to specific points within Web documents. Cs 4320 got here on 2 nov 2004. Anchors and HREFs.

Download Presentation

NAMEd anchors

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Named anchors

NAMEd anchors

Enabling users to jump to specific points within Web documents


Cs 4320 got here on 2 nov 2004

Cs 4320 got here on 2 nov 2004


Anchors and hrefs

Anchors and HREFs

  • We have seen that, to jump from one web document to another, we specify the URL of the target document in the HREF attribute of the <A> tag which is linking to the target document

    <A HREF=“some-url”>

  • However, we can also use a NAME as the value of a HREF attribute

    <A HREF=“#some-name”>

  • This is used to jump to a point in a documnt


Named anchors

<H1> Dictionary of Computin Acronyms </H1>

<A NAME="contents"> <H2> List of Definitions </H2> </A>

<UL>

<LI> <A HREF="#defn1"> Definition of a CPU </A></LI>

<LI> <A HREF="#defn2"> Definition of RAM </A></LI>

<LI> <A HREF="#defn3"> Definition of ROM </A></LI>

</UL>

<A NAME="defn1"> <H2> CPU </H2> </A>

<P>

A CPU is a central processing unit. Blah blah blah blah blah blah

blah blah blah blah blah blah blah

blah blah blah blah blah blah blah

blah blah blah blah blah blah blah

blah blah blah blah blah blah blah

blah blah blah blah blah blah blah

</P>

<P> Go back to <A HREF=”#contents">List of Definitions</A>. </P>


Named anchors

  • We use <A> tags in two places:

    • to specify the hot-links

    • to specify the targets of the hot-links

  • An <A> tag used to specify a hot-link target uses a NAME attribute instead of a HREF

    <A NAME=“some-Name”>

    Example:

    <A NAME=“content”> List of Defns </A>

    … ….

    <A HREF=“#content”> Go to list of defns </A>


Image maps

Image maps

Another way to form hot-links


Named anchors

  • On the next slide, the IMG showing the Middle East can be used to link to other web documents


Clicking the dotted area below hot links to a docm nt on turkey

Clicking the dotted area below hot-links to a docm’nt on Turkey


Clicking the dotted area below hot links to a docm t on the med

Clicking the dotted area below hot-links to a docm’t on the Med


Clicking the dotted area below hot links to a docm nt on egypt

Clicking the dotted area below hot-links to a docm’nt on Egypt


Named anchors

<IMG SRC="MIDEAST.GIF" WIDTH=140 HEIGHT=200 USEMAP="#mymap">

….

….

….

….

<MAP NAME=mymap>

<AREA HREF="mediterranean.htm" COORDS="0,50,100,80">

<AREA HREF="egypt.htm" COORDS="0,100,75,200">

<AREA HREF="turkey.htm" COORDS="50,0,140,30">

</MAP>


Named anchors

  • To use an IMG to provide hot-links, we need two things:

    • the IMG, which must have an explicitly stated WIDTH and HEIGHT

    • a MAP of this IMG, which specifies what areas within the image are hot-links

  • The MAP must have a NAME attribute

  • The IMG must refer to the MAP which has this NAME


Named anchors

<IMG SRC="MIDEAST.GIF" WIDTH=140 HEIGHT=200 USEMAP="#mymap">

….

….

<MAP NAME=“mymap”>

….

….

….

</MAP>


Named anchors

  • The MAP is delimited by <MAP> and </MAP> tags

  • Between these tags, we must have a series of <AREA> tags

  • Each <AREA> tag must have at least two attributes

    • a COORDS attribute which the location of the hot-linked area

    • a HREF attribute which specifies the document to which the area forms a hot-link


Named anchors

<IMG SRC="MIDEAST.GIF" WIDTH=140 HEIGHT=200 USEMAP="#mymap">

….

….

….

….

<MAP NAME=mymap>

<AREA HREF="mediterranean.htm" COORDS="0,50,100,80">

<AREA HREF="egypt.htm" COORDS="0,100,75,200">

<AREA HREF="turkey.htm" COORDS="50,0,140,30">

</MAP>


Cs 4320 got here on 5 nov 2004

Cs 4320 got here on 5 nov 2004


Dynamic web pages

Dynamic Web Pages


Static web pages

Static Web Pages

  • The web pages that we have created so far do not change after they are loaded by a browser -- they are static

  • They provide only one feature that supports interactivity -- hotlinks

  • Most hotlinks impose a lot of traffic on the Internet and impose a lot of computing load on servers


Dynamic web pages1

Dynamic Web Pages

  • Static web pages are good but good is never enough in the world of Information Technology

  • As soon as static web pages were available, the desire arose for pages which were more interactive and which reduced the load on the Internet and on web servers

  • People wanted more intelligence in web pages


Adding intelligence to web pages

Adding intelligence to web pages

  • To add intelligence to any computer entity, we must write a program which implements that intelligence

  • There are two places where the programs can be executed:

    • on a server

    • on a broswer


Server side versus client side

Server-side versus Client-side

  • Choosing between server-side and client-side programming depends on several factors:

    • Privacy

      • how private do you want your program to be

      • will the program manipulate private data?

    • Loading

      • are you concerned about overloading your server

      • are you concerned about the Internet


Server side programming

Server-side programming

  • Advantages

    • Programs can be kept private: users only see the output that your program send to them

    • Data can be kept private

    • Data can be kept permanently

  • Disadvantages

    • adds to server workload

    • adds to network traffic

    • delays response to user


Client side programming

Client-side programming

  • Advantages

    • client computer does all the work

    • reduces traffic between server and client

    • enables faster response to user

  • Disadvantages

    • users can see your program

    • users can see your data

    • programs cannot really keep permanent data because users can throw them away


Types of client side programs

Types of client-side programs

  • Applets:

    • can avail of full power of general programming languages (Java is the one usually used);

    • can be compiled and, therefore, semi-private

  • Scripts

    • written in simpler languages (Javascript, VBscript) developed specifically for the task

    • interpreted not compiled


Client side programming with javascript

Client-side programming with Javascript


Don t be caught by the name

Don’t be caught by the name

  • Javascript is NOT Java

  • History of Javascript:

    • Netscape were already developing a scripting language (called LiveScript, I think) when Sun proposed Java as a platform-independent general programming language

    • there was a bit of mutual band-wagon jumping

      • some syntax blending

      • change of name from LiveScript(?) to Javascript


What can javascript programs do

What can Javascript programs do?

  • Handle browser and/or user events

  • create new browser frames and windows

  • process forms

  • process “cookies”

  • interface with applet and server-side programs

  • control multi-media objects on a web page


User event handling

User-event Handling


Types of user events

Types of user events

  • when the mouse button is clicked on an element;

  • when the mouse button is double-clicked on an element;

  • when the mouse button is pressed over an element;

  • when the mouse button is released over an element;

  • when the mouse is moved onto an element;


Types of user events contd

Types of user events (contd.)

  • when the mouse is moved while over an element;

  • when the mouse is moved away from an element;

  • when a key is pressed and released over an element;

  • when a key is pressed down over an element;

  • when a key is released over an element.


Consider following web page

Consider following web page

  • It has two paragraphs of text

  • While user moves mouse onto first paragraph, its font size will increase

  • While user moves mouse away from second paragraph, its color will change to red


How did he do that

How did he do that?

  • By associating two very short Javascript programs with each paragraph, each program with a different event:

    • First paragraph:

      • one program executes when mouse enters box

      • other program executes when mouse leaves box

    • Second paragraph:

      • one program executes when mouse enters box

      • other program executes when mouse leaves box


Associating programs with events

Associating programs with events

  • Events happen to content elements

  • So, contents elements can have attributes whose

    • names indicate the events we want to handle and

    • whose values are the Javascript programs we want to execute when these events occur


Names for events

Names for events

  • ONCLICK, when the mouse button is clicked on an element;

  • ONDBLCLICK, when the mouse button is double-clicked on an element;

  • ONMOUSEDOWN, when the mouse button is pressed over an element;

  • ONMOUSEUP, when the mouse button is released over an element;

  • ONMOUSEOVER, when the mouse is moved onto an element;

  • ONMOUSEMOVE, when the mouse is moved while over an element;

  • ONMOUSEOUT, when the mouse is moved away from an element;

  • ONKEYPRESS, when a key is pressed and released over an element;

  • ONKEYDOWN, when a key is pressed down over an element;

  • ONKEYUP, when a key is released over an element.


Extract from html specification

Extract from HTML specification

<P onMouseOver='this.style.fontSize=32'

onMouseOut='this.style.fontSize=14'>

Whenever you place your mouse over me, my Font Size will increase to help you read me.

</P>


Analysis of extract

Analysis of extract:

<P onMouseOver='this.style.fontSize=32'

onMouseOut='this.style.fontSize=14'>

  • Attributes are of form:

    someEventName=‘someJavascript’


Analysis continued

Analysis continued

onMouseOver='this.style.fontSize=32'

  • Javascript is enclosed by apostrophes

  • Case is ESSENTIAL in Javascript

  • this (note all lower-case) refers to the element to which the Javascript is attached

  • this.style refers to the STYLE for this element

  • this.style.fontSize refers to the FONT-SIZE property of the STYLE for this element


Another extract from html spec

Another extract from HTML spec

<P onMouseOver='this.style.color="red"'

onMouseOut='this.style.color="black"'>

  • this.style.color refers to the COLOR property of the STYLE for this paragraph

  • the values specificed for the color must be enclosed in quotes


Full html specification

Full HTML specification

<HTML>

<HEAD>

<TITLE> Simple Mouse Event </TITLE>

</HEAD>

<BODY>

<H1> Some Subject or Other </H1>

<P onMouseOver='this.style.fontSize=32’ onMouseOut='this.style.fontSize=14'>

Whenever you place your mouse over me, my Font Size will increase to help you read me.

</P>

<H1> Another Subject </H1>

<P onMouseOver='this.style.color="red"’ onMouseOut='this.style.color="black"'>

Whenever you place your mouse over me, my color will change to help you read me.

</P>

</BODY>

</HTML>


  • Login