Sie sind auf Seite 1von 98

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

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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.

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

U2.#

Web Browser

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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.#

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

U2.#

Example of a web page

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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.#

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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!)

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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">

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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>
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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

<!-- comments here -->


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. --

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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.#

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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)

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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>


Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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>

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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>

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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.

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

21

U2.#

HTML Entities (Special Characters)


HTML Entities for special characters, accents, foreign starts with ampersand and ends with semicolon &nbsp; non-breaking-space acts like a letter words connected with &nbsp; will not separate across a line break; they stay together as one word e.g. Mr.&nbsp;Ian!&nbsp;D.&nbsp;Allen &lt; (less than) = < &gt; (greater than) = > &quot; (double quote) = " &apos; (apostrophe) = ' &amp; (ampersand) = & many, many others!

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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>

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

U2.#

The Table in Web Browser

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
U2.#

Table with Cell Padding & Cell Spacing

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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)

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

U2.#

Table with Cell Text Alignment

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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.
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
U2.#

Image Code in Visual Studio

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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>

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

35
U2.#

Sound in HTML

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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>

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

U2.#

simple_link.html on Internet Explorer

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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.
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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.
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

41
U2.#

Design a form

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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 />

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; First Name<br /> <br />
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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>
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
U2.#

Form Example in IE

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

46
U2.#

CSS: Cascading Style Sheets

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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).

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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%; }
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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>
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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>

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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; }
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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; }

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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; }
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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; }
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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; }
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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 */

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

U2.#

Java Script

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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.
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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.
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
U2.#

Ex: data Type

var x=5; var carname="Volvo";

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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>

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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>

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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>

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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.

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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>
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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>

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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.

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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.#

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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>
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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 }
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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>
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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>
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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>
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
U2.#

Client Side Technologies: DHTML

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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).

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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)

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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.
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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>

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

U2.#

CSS Example
<STYLE TYPE="text/css">
BODY { background-color: #CCCCCC; }

P{ border: 1px solid black; background-color: #FFFFFF; margin-bottom: 1em; } </STYLE>


Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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; } } }
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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...

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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';" >
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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.
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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.

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

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
Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor
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 ]

Bharati Vidyapeeths Institute of Computer Applications and Management, New Delhi -63, by Vaibhav Singhal, Asst. Professor

U2.#