Unit I

Web Technology
Unit -1
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
U2.#
Objective
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
U2.#
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.
U2.#
Web Browser
U2.#
Internet / Protocols / WWW
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
U2.#
How the WWW Works

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
Internet
connection
Your computer, Your web browser e.g. Firefox 6
Internet Their computer, Routers Their web server (an HTTP server) e.g. Apache
/mypage.ht ml
Text file containing an HTML web page
U2.#
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!
U2.#
Form Components and Elements

text box
First Name Address #1 Address #2 Last Name
This figure shows a form that contains various control elements commonly used in Web page forms. drop-down
list box
City
Country Item Purchased
State
Zip
Purchase Date Serial Number
group box
Used For (check one) Home Business Religious or Charitable Institution Government Educational Institution
Network Operating System (check all that apply) Netware Banyan Vines Windows IBM Lan Server PC/NFS
radio buttons
Comments?:
check boxes text area
form button
Send Registration
Cancel
U2.#
Example of a web page
9
U2.#
HTML Required Tags
<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
U2.#
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 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
<body> </body> (Required!)
U2.#
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">
U2.#
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>
U2.#
HTML - Basic Tags

More useful basic tags:
<br>
(no closing tag needed)
put a line break in the text (starts a new line)

used to identify text as a Level 1 (major) to Level 6 (minor) heading
<h1> </h1> through <h6> ... </h6>
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. --
U2.#
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>
U2.#
HTML - Basic Tags

<hr>

(no closing tag needed)

Hard/Horizontal Rule draw a horizontal line rule appearance can be changed with styles block quotation, indented a short, in-line quotation as part of running text preformatted text (e.g. computer code or output) fixed-width font (e.g. Courier fixed width)
<blockquote> </blockquote>
<q> </q>

<pre> </pre>
preserves spaces and line breaks
U2.#
HTML - Basic Tags

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)
U2.#
HTML Style Element/Attribute

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>

U2.#
HTML - Lists
Lists <ul> Unordered List and <ol> Ordered List
<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>
U2.#
HTML Unordered Lists

<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>
U2.#
HTML Identify/Group Tags

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.
21
U2.#
HTML Entities (Special Characters)

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!
22
U2.#
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
U2.#
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>
U2.#
HTML Table Code

<th> tag : Heading
<tr> <th>Eye </th> <th>Sphere</th> <th>Cyl</th> <th>Axis</th> <th>Prism</th> <th>Base</th> <th>PD</th> </tr>
<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>
<td> tag : cell Data
U2.#
The Table in Web Browser
U2.#
Tables
Basic table markup <table border="1"> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> Row 1, Cell 1 Row 1, Cell 2 </table>
Row 2, Cell 1 Row 2, Cell 2
U2.#
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">
28
U2.#
Table with Cell Padding & Cell Spacing
U2.#
Alignment
By default anything in a cell is aligned to the left and vertically centered. To specify alignment use
text-align vertical-align
<tr> <td <td <td <td <td <td <td </tr> style="border:solid style="border:solid style="border:solid style="border:solid style="border:solid style="border:solid style="border:solid 1px; 1px; 1px; 1px; 1px; 1px; 1px; text-align:left">OD</td> text-align:right">+1.25</td> text-align:right">-2.50</td> text-align:right">111</td> text-align:right">14.50</td> text-align:center">BI</td> text-align:right">28.00</td>
(horizontal alignment) (vertical alignment)
U2.#
Table with Cell Text Alignment
End of Section
U2.#
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.
U2.#
Image Code in Visual Studio
U2.#
Image Example on the Web
Bharati Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor EndVidyapeeths of Section
34
U2.#
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>
35
U2.#
Sound in HTML
U2.#
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>
U2.#
simple_link.html on Internet Explorer
U2.#
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 forms data. A method attribute specifies how the browser will return the users 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.
39
U2.#
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.
U2.#
HTML Forms
One or more input elements appear between the <form> and </form>
Text Input Radio Buttons Check Boxes Dropdown Lists Buttons Hidden Inputs
41
U2.#
Design a form
42
U2.#
Source View
<input checked="checked" type="radio" value="Unspecified" /> Unspecified<br /> name="Gender"
<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 />
43
U2.#
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 />
44
U2.#
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>
U2.#
Form Example in IE
46
U2.#
CSS: Cascading Style Sheets
U2.#
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).
U2.#
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%; }
U2.#
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>
U2.#
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>
U2.#
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; }
U2.#
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
U2.#
Type selector
A type selector is the name of HTML Tag. [index.html] <p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is a paragraph</p> [style.css] p{ color: red; font-size: 12px; }
U2.#
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; }
U2.#
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; }
U2.#
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> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> [style.css] h1, h2, h3, h4{ color: red; font-size: 12px; }
U2.#
CSS: Selector Types
P { color: black; } P, H1, H2 { color: black; } * { color: black; } P.urgent, .Error { color: black; } #Menu { color: black; } *[title], A[href][title] { color: black; } A[title="home page"] { color: black; } A[title~="foo"] { color: black; } *[lang|="en"] { color: black; } UL LI UL { color: black; } P > STRONG { color: black; } H1 + P { color: black; } A:hover { color: black; } P:first-letter { font-size: 200%; }
/* Element Selector */ /* Grouping Selector */ /* Universal Selector */ /* Class Selector */ /* ID Selector */ /* Attribute Selector */ /* Exact Attribute Selector */ /* Partial Attribute Selector */ /* Particular Attribute Selector */ /* Descendant Selector */ /* Child Selector */ /* Adjacent Sibling Selector */ /* Pseudo-Class Selector */ /* Pseudo-Element Selector */
U2.#
CSS: Common Declaration Properties
background background-repeat color float font-size height line-height list-style-type padding text-align text-transform visibility word-spacing
background-attachment border cursor font font-style left list-style-image margin position text-decoration top white-space word-wrap
background-color bottom display font-family font-weight letter-spacing list-style-position overflow right text-indent vertical-align width z-index
U2.#
Java Script
U2.#
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
U2.#
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
U2.#
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.
U2.#
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
U2.#
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.
U2.#
Ex: data Type
var x=5; var carname="Volvo";
U2.#
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
U2.#
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>
U2.#
Ex: If elseif else

<script type="text/javascript"> //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>
<script type="text/javascript"> 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>
U2.#
Ex: Switch
<script type="text/javascript"> //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>
U2.#
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.
U2.#
Ex: For loop

<html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=5;i++) { document.write("The number is " + i); document.write("<br />"); } </script> </body> </html>
U2.#
Ex: While, Do-While

<html> <body> <script type="text/javascript"> var i=0; while (i<=5) { document.write("The number is " + i); document.write("<br />"); i++; } </script> </body> </html> <html> <body> <script type="text/javascript"> var i=0; do { document.write("The number is " + i); document.write("<br />"); i++; } while (i<=5); </script> </body> </html>
U2.#
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.
U2.#
Ex: Functions
<html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!"); } </script> </head> <body> <form> <input type="button" value="Click me!" onclick="displaymessage()" /> </form> </body> </html> <html> <head> <script type="text/javascript"> function product(a,b) { return a*b; } </script> </head> <body> <script type="text/javascript"> document.write(product(4,3)); </script>
</body> </html>
U2.#
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
U2.#
Ex: Button Click

<html>
<head> <script type="text/javascript"> 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>
U2.#
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 }
U2.#
Ex: Try Catch 1

<html> <head> <script type="text/javascript"> 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>
U2.#
Ex: try catch 2

<html> <head> <script type="text/javascript"> 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>
U2.#
Ex: try catch, Throw 2

<html> <body> <script type="text/javascript"> 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>
U2.#
Client Side Technologies: DHTML
U2.#
Document Object Model (DOM)

The Document Object Model (DOM) is a crossplatform 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).
U2.#
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)
U2.#
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.
U2.#
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
U2.#
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
U2.#
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>
U2.#
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
U2.#
CSS Example
<STYLE TYPE="text/css">
BODY { background-color: #CCCCCC; }
P{ border: 1px solid black; background-color: #FFFFFF; margin-bottom: 1em; } </STYLE>

U2.#
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
U2.#
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; } } }
U2.#
Differences Between HTML and XHTML
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...
U2.#
HTML and JavaScript

<SCRIPT> tag
Delineates inline code or references external code files
<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';" >
U2.#
JavaScript
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.
U2.#
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.
U2.#
Resources: Online
W3C Website http://www.w3.org/Style/CSS/ http://www.w3.org/DOM/ http://www.w3.org/MarkUp/
(CSS) (DOM) (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
U2.#
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 ]
U2.#

Unit I

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Unit I

Hochgeladen von

Copyright:

Verfügbare Formate

Web Technology

First Web Browser

Internet / Protocols / WWW

What is the Internet?

a network of networks an inter-network, or Internet

What are Internet protocols?

What is the World Wide Web?

a set of HTML pages accessible using the HTTP protocol

How the WWW Works

Your computer, Your web browser e.g. Firefox 6

Text file containing an HTML web page

Hyper Text Markup Language - HTML

Form Components and Elements

Purchase Date Serial Number

check boxes text area

Example of a web page

HTML Required Tags

<html> </html> (Required!)

<head> </head> (Required!)

HTML Required Tags

<title> </title> (Required!)

<body> </body> (Required!)

HTML Required Tags

<p> </p> (Required!)

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

HTML Basic web page!

HTML - Basic Tags

(no closing tag needed)

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

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

HTML - Basic Tags

HTML - Basic Tags

(no closing tag needed)

preserves spaces and line breaks

HTML - Basic Tags

HTML Style Element/Attribute

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

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

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

HTML Unordered Lists

HTML Identify/Group Tags

HTML Entities (Special Characters)

Define cells inside a row

Put text or other HTML element into a cell

HTML Table Example:

Table Definition Here

HTML Table Code

<td> tag : cell Data

The Table in Web Browser

Cell Spacing & Cell Padding

Table with Cell Padding & Cell Spacing

(horizontal alignment) (vertical alignment)

Table with Cell Text Alignment

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

Image Code in Visual Studio

Image Example on the Web

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

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

simple_link.html on Internet Explorer

get vs. post

CSS: Cascading Style Sheets

CSS:-Adding Style to HTML