unit-i (1)

© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Vaibhav Singhal, Asst. Professor U2.‹#›

Web Technology

Unit -1


• Overview of Internet and web

• HTML Tags, Forms & Frames

• Introduction to Java Script and

• Cascading Style Sheets

• DHTML

• Using various Web Design Tools like Dream

Weaver

Objective


First Web Browser

Mosaic was developed at the National Center for

Supercomputing Applications (NCSA)at the

University of Illinois Urbana-Champaign beginning

in late 1992.

Mosaic was the web browser which led to the Internet

boom of the 1990s.


Web Browser


5

What is the Internet?

a network of networks – an inter-network, or Internet

What are Internet protocols?

the rules for transferring information between programs

HTTP - hypertext transfer protocol

FTP - file transfer protocol

SMTP – simple mail transfer protocol

What is the World Wide Web?

a set of HTML pages accessible using the HTTP protocol

Internet / Protocols / WWW


6

How does a Web Browser (Firefox) fit in this picture?

- your browser connects, using the HTTP protocol, to a web server

- the web server fetches an HTML web page and sends the HTML to your browser

- your browser turns the HTML page into a nice-looking page on your screen

•How the WWW Works

Your computer,

Your web browser

e.g. Firefox

Internet connection

Internet

Routers

Text file containing

an HTML web page

Their computer,

Their web server

(an HTTP server)

e.g. Apache

/mypage.ht

ml


Hyper Text Markup Language - HTML

• Hyper Text Markup Language (HTML) Basics

HTML is a “mark-up language”

You add the mark-up tags to your text document

HTML is a language of mark-up “tags” in angle brackets: <>

each tag has a name and may have one or more quoted

attributes

eg. <p class=”thesis” style=”color: red”>

Tags usually come in pairs (with some exceptions)

<html>...</html>, <body>...</body>, <p>...</p>, <hr>, <br>

Web pages are free-form input; line breaks can be used

most anywhere and don't affect the appearance of the

document

Yes, your entire page could be a single line of text!


Form Components and Elements

This figure shows a form that contains various control elements commonly used in Web page forms.

First Name

Address #1

Address #2

City

Last Name

Country

State Zip

Item Purchased Purchase Date

Home

Business

Government

Educational Institution

Netware

Banyan Vines

Windows

IBM Lan Server

Comments?:

Send Registration Cancel

Serial Number

Used For (check one) Network Operating System (check all that apply)

Religious or Charitable Institution

PC/NFS

text box

drop-down

list box

radio

buttons check

boxes

text

area

form

button

group

box


9

Example of a web page


<html> … </html> (Required!)

Basic tag to identify portion of file that contains HTML

<html> is an opening tag

</html> is a closing tag (note the direction of the slash!)

text between the opening and closing tag is called the

“element”

<head> … </head> (Required!)

placed at the top of document immediately after the <html>

tag

tags information about the document, e.g. author, style, etc.

contains the required document <title>...</title> tag

•HTML – Required Tags


HTML – Required Tags <title> … </title> (Required!)

included as an element inside the <head>…</head> section

element of this tag is the title displayed in title bar of the

browser

may also be used as title of page when page is bookmarked

should be meaningful and uniquely identify the page

<body> … </body> (Required!)

included as the second element inside the <html>…</html>

tags.

follows the <head>…</head> portion of the document

contains the information to be displayed in the browser

window

any attributes set on this tag will apply to the entire page


HTML – Required Tags

<p> … </p> (Required!)

included as an element inside the <body>…</body> section

Surrounds a paragraph of text

DOCTYPE (Required!)

Must be the very first line of your file, before <html>

NOT an HTML tag; it is an instruction to your web browser

Tells the browser what version of HTML to expect

In this course we use only the “strict” HTML version 4.01

type:

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">


HTML – Basic web page!

That's all you need for a basic web page!

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>My Title</title>

</head>

<body>

<p>This is my first web page.</p>

</body>

</html>

HTML - Basic Tags • More useful basic tags:

<br> (no closing tag needed)

put a line break in the text (starts a new line)

<h1> … </h1> through <h6> ... </h6>

used to identify text as a Level 1 (major) to Level 6 (minor) heading

Comment Tag



notice that the comment is typed as an attribute inside the tag

comments may be one or multiple lines long (HTML is free-form)

text within this tag will not be displayed or processed by your browser

comments do not nest! No comments inside comments!

The comment may not contain two (or more) adjacent dashes, e.g. --


HTML - Basic Tags • The Anchor Tag – Hyper Linking - making the web

a web

<a> … </a>

one major attribute – the location of the hyperlink:

href=”string”

element is clickable/selectable as a document hyperlink

browser attempts to load the page specified by the href=

attribute

the href= string can be a relative URL on the same server:

without the leading http://host/ it is in the same directory

structure:

e.g. <a href=“page2.html”>Click here to continue</a>

e.g. <a href=”images/box.jpg”>See the box here.</a>

e.g. <a href=“../another_dir/page3.html”>Click here</a>


HTML - Basic Tags • <hr> (no closing tag needed)

– Hard/Horizontal Rule – draw a horizontal line

– rule appearance can be changed with styles

• <blockquote> … </blockquote>

– block quotation, indented

• <q> … </q>

– a short, in-line “quotation as part of running text”

• <pre> … </pre>

– preformatted text (e.g. computer code or output)

– fixed-width font (e.g. Courier fixed width)

– preserves spaces and line breaks


• Font-style tags – for more control, use CSS instead

• <b> … </b> and <i> … </i>

– bold and italic text (in-line)

• <tt> … </tt>

– Teletype Text: fixed-width font (e.g. Courier)

• <big> … </big> and <small> … </small>

– bigger and smaller text (in-line)

HTML - Basic Tags


The <style> element and the style= attribute

• The style= attribute can be used on most tags

– defines features for a single HTML element, e.g.

<p style=”text-align: center”>Center me.</p>

• The <style> element: <style type=”text/css”> ... </style>

– <style> tag always goes in the <head> section

– defines style information for the whole HTML page

– requires the type=”text/css” attribute

– more details to come in the description of CSS

– to link to a separate CSS style sheet, use instead:

<link rel=”stylesheet” type=”text/css” href=”string”>

HTML – Style Element/Attribute


<ul>

<li>Apple</li>

<li>Pear</li>

<li>Kiwi</li>

<li><ul>

<li>Big</li>

<li>Small</li>

</ul></li>

</ul>

<ol>

<li>Apple</li>

<li>Pear</li>

<li>Kiwi</li>

<li><ul>

<li>Big</li>

<li>Small</li>

</ul></li>

</ol>

HTML - Lists

Lists – <ul> Unordered List and <ol> Ordered List


• <li>…</li>

– List Item: surrounds each list item inside a list

– used inside both <ul> and <ol> list types

• <ul>…</ul>

– surrounds an unordered list – no numbering

– <li>...</li> items each indented and bulleted

– use styles (style= attribute) to change type of bullet:

– CSS style: list-style-type: string

• string can be: circle, disc, square

• e.g. <ul style=”list-style-type: square”> ... </ul>

HTML – Unordered Lists


21

Identifying and Grouping elements (e.g. for CSS)

• <div>...</div>

– division or section

– groups and identifies one or more block-elements

– usually causes a line break before and after

• <span>...</span>

– groups and identifies in-line elements (e.g. words)

– no visual change by itself (no line break)

– used to apply styles to parts of a text line, e.g.

This <span style=”color: red”>red</span> apple.

HTML – Identify/Group Tags


22

HTML Entities – for special characters, accents, foreign

– starts with ampersand and ends with semicolon

non-breaking-space – acts like a letter

– words connected with will not separate across a

line break; they stay together as one word

– e.g. Mr. Ian! D. Allen

< (less than) = < > (greater than) = >

" (double quote) = " ' (apostrophe) = '

& (ampersand) = &

– many, many others!

HTML – Entities (Special Characters)


Tables

• Tables permit you to have some control over

layout while leaving some decisions to the

browser.

• <table> ... </table>

• Define rows inside a table

<tr> ... </tr> defines a row

• Define cells inside a row

<th> ... </th> defines a “table heading” cell

<td> ... </td> defines a cell within a row

• Put text or other HTML element into a cell Including another table


HTML Table Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Eyeglass Prescription</title>

</head>

<body>

<table style="font-family: Arial, Sans-Serif; border:solid 1px">

Table Definition Here

</table>

</body>

</html>


HTML Table Code

<tr>

<td>OD</td>

<td>+1.25</td>

<td>-2.50</td>

<td>111</td>

<td>14.50</td>

<td>BI</td>

<td>28.00</td>

</tr>

<tr>

<th>Eye </th>

<th>Sphere</th>

<th>Cyl</th>

<th>Axis</th>

<th>Prism</th>

<th>Base</th>

<th>PD</th>

</tr>

<th> tag : Heading <td> tag : cell Data


The Table in Web Browser

http://www.cse.usf.edu/~turnerr/Web_Application_Design/Downloads/Rx.html


Tables

• Basic table markup

<table border="1">

<tr>

<td>Row 1, Cell 1</td>


</tr>

<tr>



</tr>

</table> Row 1, Cell 1 Row 1, Cell 2

Row 2, Cell 1 Row 2, Cell 2


28

Cell Spacing & Cell Padding

Cell Spacing:

• “cellspacing” controls space between cells.

Set it to 0 to eliminate space between cells.

Cell Padding:

• To provide some margin inside each cell use the

cellpadding attribute

<table style="font-family: Arial, Sans-Serif;

border:solid 1px"

cellspacing="0" cellpadding="5">


Table with Cell Padding & Cell Spacing


Alignment

• By default anything in a cell is aligned to the left

and vertically centered.

• To specify alignment use

text-align (horizontal alignment)

vertical-align (vertical alignment)

<tr>

<td style="border:solid 1px; text-align:left">OD</td>

<td style="border:solid 1px; text-align:right">+1.25</td>

<td style="border:solid 1px; text-align:right">-2.50</td>

<td style="border:solid 1px; text-align:right">111</td>

<td style="border:solid 1px; text-align:right">14.50</td>

<td style="border:solid 1px; text-align:center">BI</td>

<td style="border:solid 1px; text-align:right">28.00</td>

</tr>


Table with Cell Text Alignment

End of Section


Images in HTML

• Use the <img> tag to display an image in an

HTML page.

.gif, .jpg, .png

<img src="filename" alt="text" />

• filename is path to image file

Normally a relative address

e.g. "images/xxx.jpg“

• alt is text to be displayed if the image file cannot be

found or cannot be displayed.


Image Code in Visual Studio


34

Image Example on the Web

End of Section


35

Sound in HTML

We can add sound to an HTML page very much

like we add images.

(Not necessarily a good thing to do!)

Add to image_example.html:

<embed src="hello.wav" autostart="true" loop="false">

</embed>


Sound in HTML


Creating Links

• Links allow a user to jump to other places by simply

clicking on them.

This is the hyper in hypertext!

• A link can go to another point in the same document or to

a completely different page

Anywhere in the Internet.

<a href="http://www.csee.usf.edu">Back to CSE

Home Page</a>


simple_link.html on Internet Explorer


39

HTML Forms

• An HTML form is define by <form> </form> tag pair.

• An action attribute on the <form> tag gives the URL of the

application that is to receive and process the form’s data.

• A method attribute specifies how the browser will return the

user’s inputs to the server.

• Example: <form method="get" action="http://www.widgets.com/cgi-bin/update">

...

</form>

• method=GET says to append the user inputs to the URL

• action says where to send the inputs.


get vs. post

• method="get"

Appends name/value pairs for inputs to the URL.

Visible to the user.

Normally used for small amounts of data.

• method="post"

Embeds name/value pairs for inputs in the HTTP

Request message.

Not visible to the user.

OK for larger amounts of data.

• Either method is OK for the web app on the server.


41

HTML Forms

• One or more input elements appear between

the <form> and </form>

Text Input

Radio Buttons

Check Boxes

Dropdown Lists

Buttons

Hidden Inputs


42

Design a form


43

Source View

<input checked="checked" type="radio" name="Gender"

value="Unspecified" />

Unspecified<br />

<input type="radio" name="Gender" value="Male" />

Male<br />

<input type="radio" name="Gender" value="Female" />

Female<br />

<br />

<input type="checkbox" name="CSE_Major" value="" />

CSE Dept. Major<br />

<br />


44

Source View

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>A Form Example</title>

</head>

<body>

<form method="get"

action="http://www.csee.usf.edu/~turnerr/form_demo.aspx">

Please Register<br />

<br />

<input name="LastName" type="text" />

<input name="FirstName" type="text" />

<br />

Last Name

First Name<br />

<br />


Source View Classification<br />

<select name="Classification" >

<option >Freshman</option>

<option >Sophomore</option>

<option >Junior</option>

<option >Senior</option>

<option >Graduate</option>

<option selected="selected">Unclassified</option>

</select>

<br />

<br />

<input type="submit" name="Submit_Button" value="submit" />

<br />

<br />

<input type="hidden" name="Hidden" value="This is a hidden

input"/>

</form>


46

Form Example in IE


CSS: Cascading Style Sheets


CSS:-Adding Style to HTML

There are three ways of providing styling information for the

Web browsers.

1. Linking style sheet

2. Internal style sheet

3. Inline style sheet

Benefits:

• Authors and Web site managers may share style sheets across a

number of documents (and sites).

• Authors may change the style sheet without requiring

modifications to the document.

• User agents may load style sheets selectively (based on media

descriptions).


Linking style sheet

• You can separate style sheets from HTML documents.

Style sheet files are imported to HTML documents by

<link>.

[example.html]

<head>

<link rel="stylesheet" type="text/css"

href="example.css">

</head>

[example.css]

p{ color: red; foto-size: 120%; }


Internal style sheet

• You can put style sheet rules in the head of the

document by <style>.

[example.html]

<head>

<style>

p { color: red; font-size:120%; }

</style>

</head>

<body>

<p>This is a paragraph</p>

</body>


Inline style sheet

• The start tags can contain style sheet rules directly

in HTML documents by the style attribute.

[example.html]

<p style="color: red; font-size:120%; ">

This is a paragraph</p>


CSS Syntax

Point of the syntax

• This syntax has two parts, the selector and the

declaration.

Selector: Specifies the target of styling.

Declaration: Specifies the property and value.

• Declaration is contained between {" ... "}.

• Declaration end with a semicolon.

p{ color: red; }


Selectors

Selectors are specify the target of styling. Selectors

may range from simple element names to rich

contextual representations.

Kind of selector

• Type selector

• Class selector

• ID selector

• Grouping


Type selector

A type selector is the name of HTML Tag.

[index.html]

• <p>This is a paragraph</p>



[style.css]

• p{ color: red; font-size: 12px; }


Class selector

Class selector is used for one or more elements. It is

described the value of class attribute of HTML document

with ".(period)".

[index.html]

<p class="red">This is a paragraph</p>

<p class="blue">This is a paragraph</p>

<p class="red">This is a paragraph</p>

<p class="blue">This is a paragraph</p>

[style.css]

p{ font-size: 12px; }

.red{ color: red; }

.blue{ color: blue; }


ID selector

• ID selector is used for unique element. It is described the

value of ID attribute of HTML document with "#".

[index.html]

• <p class="red">This is a paragraph</p>

• <p class="blue">This is a paragraph</p>

• <p class="red" id="small">This is a paragraph</p>

[style.css]

• p{ font-size: 12px; }

• .red{ color: red; }

• .blue{ color: blue; }

• #small{ font-size: 9px; }


Grouping

• A comma-separated list of selectors represents the

union of all elements selected by each of the

individual selectors in the list.

[index.html]

<h1>This is a heading</h1>




[style.css]

h1, h2, h3, h4{ color: red; font-size: 12px; }


CSS: Selector Types

P { color: black; } /* Element Selector */

P, H1, H2 { color: black; } /* Grouping Selector */

* { color: black; } /* Universal Selector */

P.urgent, .Error { color: black; } /* Class Selector */

#Menu { color: black; } /* ID Selector */

*[title], A[href][title] { color: black; } /* Attribute Selector */

A[title="home page"] { color: black; } /* Exact Attribute Selector */

A[title~="foo"] { color: black; } /* Partial Attribute Selector */

*[lang|="en"] { color: black; } /* Particular Attribute Selector */

UL LI UL { color: black; } /* Descendant Selector */

P > STRONG { color: black; } /* Child Selector */

H1 + P { color: black; } /* Adjacent Sibling Selector */

A:hover { color: black; } /* Pseudo-Class Selector */

P:first-letter { font-size: 200%; } /* Pseudo-Element Selector */


CSS: Common Declaration Properties

background background-attachment background-color

background-repeat border bottom

color cursor display

float font font-family

font-size font-style font-weight

height left letter-spacing

line-height list-style-image list-style-position

list-style-type margin overflow

padding position right

text-align text-decoration text-indent

text-transform top vertical-align

visibility white-space width

word-spacing word-wrap z-index


Java Script


What is JavaScript?

JavaScript was designed to add interactivity to HTML

pages

JavaScript is a scripting language

A scripting language is a lightweight programming

language

JavaScript is usually embedded directly into HTML pages

JavaScript is an interpreted language (means that

scripts execute without preliminary compilation)

Everyone can u.se JavaScript without purchasing a

license


What Can JavaScript do ?

• JavaScript gives HTML designers a programming tool - HTML authors

are normally not programmers, but JavaScript is a scripting language with

a very simple syntax! Almost anyone can put small "snippets" of code into

their HTML pages

• JavaScript can react to events - A JavaScript can be set to execute when

something happens, like when a page has finished loading or when a user

clicks on an HTML element

• JavaScript can read and write HTML elements - A JavaScript can read

and change the content of an HTML element

• JavaScript can be used to validate data - A JavaScript can be used to

validate form data before it is submitted to a server. This saves the server

from extra processing

• JavaScript can be used to detect the visitor's browser - A JavaScript

can be used to detect the visitor's browser, and - depending on the browser

- load another page specifically designed for that browser

• JavaScript can be used to create cookies - A JavaScript can be used to

store and retrieve information on the visitor's computer


JavaScript = ECMAScript

• JavaScript is an implementation of the ECMAScript

language standard. ECMA-262 is the official JavaScript

standard.

• JavaScript was invented by Brendan Eich at Netscape

(with Navigator 2.0), and has appeared in all browsers

since 1996.

• The official standardization was adopted by the ECMA

organization (an industry standardization association) in

1997.

• The ECMA standard (called ECMAScript-262) was

approved as an international ISO (ISO/IEC 16262)

standard in 1998.

• The development is still in progress.


Programming Constructs

• Variables

Named elements that can change value

• Data types

Integer, floating-point, Boolean, string

• Operators

Assignment, comparison, arithmetic,

Boolean, string, special

• Control statements

Conditions, loops

• Keywords

Reserved words with special meaning


JavaScript Variables

Variables are "containers" for storing information.

JavaScript Variables

• As with algebra, JavaScript variables are used to hold

values or expressions.

• A variable can have a short name, like x, or a more

descriptive name, like carname.

Rules for JavaScript variable names:

• Variable names are case sensitive (y and Y are two different

variables)

• Variable names must begin with a letter or the underscore

character.

Note: Because JavaScript is case-sensitive, variable names

are case-sensitive.


Ex: data Type

var x=5;

var carname="Volvo";


JavaScript If...Else Statements

• You can use conditional statements in your code to do this.

In JavaScript we have the following conditional statements:

• if statement - use this statement to execute some code only

if a specified condition is true

• if...else statement - use this statement to execute some

code if the condition is true and another code if the condition

is false

• if...else if....else statement - use this statement to select

one of many blocks of code to be executed

• switch statement - use this statement to select one of

many blocks of code to be executed


Ex: if else

<script type="text/javascript">

//If the time is less than 10, you will

get a "Good morning" greeting.

//Otherwise you will get a "Good day"

greeting.

var d = new Date();

var time = d.getHours();

if (time < 10)

{ document.write("Good morning!"); }

else

{ document.write("Good day!"); }

</script>


Ex: If elseif else


var d = new Date()

var time = d.getHours()

if (time<10)

{

document.write("<b>Good morning</b>");

}

else if (time>=10 && time<16)

{

document.write("<b>Good day</b>");

}

else

{

document.write("<b>Hello World!</b>");

}

</script>


//Write a "Good morning" greeting

if

//the time is less than 10

var d=new Date();

var time=d.getHours();

if (time<10)

{

document.write("<b>Good

morning</b>");

}

</script>


Ex: Switch


//You will receive a different greeting based //on what day it is. Note that

Sunday=0, //Monday=1, Tuesday=2, etc.

var d=new Date();

var theDay=d.getDay();

switch (theDay)

{

case 5: document.write("Finally Friday"); break;

case 6: document.write("Super Saturday"); break;

case 0: document.write("Sleepy Sunday"); break;

default:

document.write("I'm looking forward to this weekend!");

}

</script>


JavaScript For Loop

In JavaScript, there are three different kind of loops:

• for - loops through a block of code a specified

number of times

• while - loops through a block of code while a

specified condition is true

• Do while:- Condition will check at the end of the

task.


Ex: For loop

<html>

<body>


var i=0;

for (i=0;i<=5;i++)

{

document.write("The number is " + i);

document.write("<br />");

}

</script>

</body>

</html>


Ex: While, Do-While

<html>

<body>


var i=0;

while (i<=5)

{

document.write("The number is "

+ i);


i++;

}

</script>

</body>

</html>

<html>

<body>


var i=0;

do

{

document.write("The number is " +

i);


i++;

}

while (i<=5);

</script>

</body>

</html>


JavaScript Functions

• A function will be executed by an event or by a call to

the function.

• To keep the browser from executing a script when the

page loads, you can put your script into a function.

• You may call a function from anywhere within a page (or

even from other pages if the function is embedded in an

external .js file).

• Functions can be defined both in the <head> and in the

<body> section of a document. However, to assure that a

function is read/loaded by the browser before it is called, it

could be wise to put functions in the <head> section.


Ex: Functions

<html>

<head>


function displaymessage()

{

alert("Hello World!");

}

</script>

</head>

<body>

<form>

<input type="button" value="Click me!"

onclick="displaymessage()" />

</form>

</body>

</html>

<html>

<head>


function product(a,b)

{

return a*b;

}

</script>

</head>

<body>


document.write(product(4,3));

</script>

</body>

</html>


JavaScript Events

• Events are actions that can be detected by javaScript.

• Every element on a web page has certain events which can

trigger a JavaScript. For example, we can use the onClick

event of a button element to indicate that a function will run

when a user clicks on the button. We define the events in the

HTML tags.

Examples of events:

• A mouse click

• A web page or an image loading

• Mouse over a hot spot on the web page

• Selecting an input field in an HTML form

• Submitting an HTML form

• A keystroke


Ex: Button Click

<html>

<head>


function displayDate()

{ document.getElementById("demo").innerHTML=Date(); }

</script>

</head>

<body>

<h1>My First Web Page</h1>

<p id="demo"></p>

<button type="button" onclick="displayDate()">Display Date</button>

</body>

</html>


JavaScript Try...Catch Statement

JavaScript - Catching Errors

• When browsing Web pages on the internet, we all have

seen a JavaScript alert box telling us there is a runtime error

and asking "Do you wish to debug?". Error message like this

may be useful for developers but not for users. When users

see errors, they often leave the Web page.

try

{

//Run some code here

}

catch(err)

{

//Handle errors here

}


Ex: Try Catch 1

<html>

<head>


var txt="";

function message()

{ try { adddlert("Welcome guest!"); }

catch(err)

{

txt="There was an error on this page.\n\n";

txt+="Error description: " + err.description + "\n\n";

txt+="Click OK to continue.\n\n";

alert(txt); } }

</script></head>

<body>

<input type="button" value="View message" onclick="message()" />

</body>

</html>


Ex: try catch 2

<html>

<head>


var txt = "";

function message() {

try { adddlert("Welcome guest!"); }

catch (err) {

txt = "There was an error on this page.\n\n";

txt += "Click OK to continue viewing this page,\n";

txt += "or Cancel to return to the home page.\n\n";

if (!confirm(txt)) {

document.location.href = "http://www.homepage.com/";

} } }

</script></head>

</html>


Ex: try catch, Throw 2

<html> <body>


var x=prompt("Enter a number between 0 and 10:","");

try { if(x>10)

{ throw "Err1"; }

else if(x<0)

{ throw "Err2"; }

else if(isNaN(x))

{ throw "Err3“; } }

catch(er)

{ if(er=="Err1“) {

alert("Error! The value is too high"); }

if(er=="Err2“) {

alert("Error! The value is too low"); }

if(er=="Err3")

{ alert("Error! The value is not a number"); } }

</script></body></html>


Client Side Technologies:

DHTML


• The Document Object Model (DOM) is a cross-

platform and language-independent convention for

representing and interacting with objects in HTML,

XHTML and XML documents.

• Aspects of the DOM (such as its "Elements") may

be addressed and manipulated within the syntax of

the programming language in use.

• The public interface of a DOM is specified in its

application programming interface (API).

Document Object Model (DOM)


DHTML

• DHTML = Dynamic HTML It allows you to build rich client interfaces and to modify

them dynamically

• There is no DHTML standard It is not a W3C, IEEE, ISO or anything else standard

• DHTML is a collection of several standards DHTML consists of HTML/XHTML, CSS, DOM and

JavaScript (or ECMAScript)


Differences between HTML and DHTML?

• HTML

1. It is referred as a static HTML and static in nature.

2.A plain page without any styles and Scripts called as

HTML.

3.HTML sites will be slow upon client-side technologies.

DHTML

1.It is referred as a dynamic HTML and dynamic in nature.

2.A page with HTML, CSS, DOM and Scripts called as

DHTML.

3.DHTML sites will be fast enough upon client-side

technologies.


DHTML In A Nutshell

• DHTML is too rich to cover in an hour The technologies are way to rich to fully cover in this

presentation. This presentation will:

1) Briefly introduce each technology with a quick example

2) Give a high-level overview of how to use each technology

3) Show some more advanced uses for the various

technologies and review how each one works

4) Provide resources for further exploration of each

technology


HTML / XHTML

• HTML = HyperText Markup Language Allows you to define and structure the contents of your

document. Latest (last?) version is 4.01.

• XHTML = XML HyperText Markup Language XML-Compliant definition of HTML. Current version is

XHTML 1.1 which added no new HTML tags to HTML 4.01

• Contents, not design HTML/XHTML was never intended to convey design


HTML / XHTML Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<HTML>

<HEAD>

<TITLE>Sample</TITLE>

</HEAD>

<BODY>

<P>This is a sample paragraph</P>

</BODY>

</HTML>


CSS

• CSS = Cascading Style Sheets Allows you to define the styles to apply to your document.

Latest version is 2.1.

• Design, not content CSS is intended to separate design from content

• Very powerful CSS is much more powerful than HTML design tags


CSS Example

<STYLE TYPE="text/css">

BODY {

background-color: #CCCCCC;

}

P {

border: 1px solid black;

background-color: #FFFFFF;

margin-bottom: 1em;

}

</STYLE>


DOM

• DOM = Document Object Model Defines a hierarchical model of the document structure

through which all document elements may be accessed

• Nodes The W3C DOM defines element of a document is a node

of a particular type

• Node Types Common types are: document node, element node, text

node, attribute node, comment node, document-type node


DHTML Example

• Style Switcher Using JavaScript, this example dynamically "applies" the

selected CSS style sheet, changing the design on the fly.

- JavaScript interacts with DOM and cookies

- Shows ability of CSS to affect design w/o changing HTML

function setActiveStyleSheet(title) {

var i, a, main;

for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {

if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {

a.disabled = true;

if(a.getAttribute("title") == title) a.disabled = false;

}

}

}


• HTML tags and attributes must be lowercase

• All attribute values must be quoted

• All elements that can contain others require end tags

• Empty elements must either have an end tag or self-close

• All attributes must be name/value pairs

• The name attribute is deprecated. Use id instead.

• Some others...

Differences Between HTML and XHTML


• <SCRIPT> tag Delineates inline code or references external code files

HTML and JavaScript

<SCRIPT TYPE="text/javascript">

// Code goes here...

</SCRIPT>

<SCRIPT TYPE="text/javascript" SRC="code.js"></SCRIPT>

• Event Attributes Defines event handlers for events of specific elements

<INPUT TYPE="Button" onClick="alert('Hi there!');" VALUE="Hi">

<IMG SRC="blue.gif"

onMouseOver="this.src='red.gif';" onMouseOut="this.src='blue.gif';" >


• Full, feature-rich language Supports all standard control mechanisms: conditionals,

loops, variables, try/catch/throw, functions, "objects"

• Very powerful Earlier versions were limited. Current version is not.

• Syntactically similar to CFScript CFScript syntax was based on JavaScript

• Access to most browser features/properties Cannot normally access local file system, etc.

JavaScript


Questions

• How a web page runs on a Client server architecture

explain?

• What are HTML Tags and write the steps of add CSS.

• What is Java Script? Why it is helpful to add JS code

in a web form.

• What is Cascading Style Sheets. Why it is used and

explain the

• What is DHTML. Explain the role of it.


Resources: Online

W3C Website

http://www.w3.org/Style/CSS/ (CSS)

http://www.w3.org/DOM/ (DOM)

http://www.w3.org/MarkUp/ (HTML/XHTML)

css-discuss listserv

http://www.css-discuss.org/

css-discuss Wiki

http://css-discuss.incutio.com/

JavaScript Message Board

http://www.aspmessageboard.com/forum/jscript.asp

XMLHttpRequest() Information

http://developer.apple.com/internet/webcontent/xmlhttpreq.html

http://www.xml.com/lpt/a/2005/02/09/xml-http-request.html


References

Books:

• Stephen Walther, “ASP.NET 4.0 ”, Pearson Education,

Second Edition, 2004.

[Stephen Walther]

• Beginning Asp.net web pages with web matrix

[Mike Brind]

• Pro ASP.Net 4 in C# 2010

[Mathew MacDonald ]

unit-i (1)

Documents