Web tech html css js

© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Dr. Shivendra Goel , Associate Professor
Web Technology
Unit -1

U1. 2
• 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
Learning Objective

U1. 3
Table of Contents
1. Introduction to HTML
How the Web Works?
What is a Web Page?
My First HTML Page
Basic Tags: Hyperlinks, Images, Formatting
Headings and Paragraphs
1. HTML in Details
3

U1. 4
Table of Contents (2)
2. HTML in Details
The <body> Section
Text Styling and Formatting Tags
Hyperlinks: <a>, Hyperlinks and Sections
Images: <img>
Lists: <ol>, <ul> and <dl>
• The <div> and <span> elements
• HTML Tables
• HTML Forms
4

U1. 5
How the Web Works?
• WWW use classical client / server architecture
HTTP is text-based request-response protocol
55
Client running aClient running a
Web BrowserWeb Browser
Server runningServer running
Web ServerWeb Server
Software (IIS,Software (IIS,
Apache, etc.)Apache, etc.)
Server responseServer response
HTTPHTTP
HTTPHTTP

U1. 6
What is a Web Page?
• Web pages are text files containing HTML
• HTML – Hyper Text Markup Language
A notation for describing
document structure (semantic markup)
formatting (presentation markup)
Looks (looked?) like:
A Microsoft Word document
• The markup tags provide information about the
page content structure
6

U1. 7
Creating HTML Pages
• An HTML file must have an .htm or .html file
extension
• HTML files can be created with text editors:
NotePad, NotePad ++.
• Or HTML editors (WYSIWYG Editors):
Microsoft FrontPage
Macromedia Dreamweaver
Netscape Composer
Microsoft Word
Visual Studio
7

U1. 8
HTML BasicsHTML Basics
Text, Images, Tables, FormsText, Images, Tables, Forms

U1. 9
HTML Structure
• HTML is comprised of “tags”
Begins with <html> and ends with </html>
• Elements (tags) are nested one inside another:
• Tags have attributes:
• HTML describes structure using two main sections:
<head> and <body>
9
<html> <head></head> <body></body> </html><html> <head></head> <body></body> </html>
<img src="logo.jpg" alt="logo" /><img src="logo.jpg" alt="logo" />

U1. 10
First HTML Page
10
<!DOCTYPE HTML><!DOCTYPE HTML>
<html><html>
<head><head>
<title>My First HTML Page</title><title>My First HTML Page</title>
</head></head>
<body><body>
<p>This is some text...</p><p>This is some text...</p>
</body></body>
</html></html>
test.htmltest.html

U1. 11
<html><html>
<head><head>
</head></head>
<body><body>
</body></body>
</html></html>
First HTML Page: Tags
11
OpeningOpening
tagtag
ClosingClosing
tagtag
An HTML element consists of an opening tag, a closing tag and the content
inside.

U1. 12
<html><html>
<head><head>
</head></head>
<body><body>
</body></body>
</html></html>
First HTML Page: Header
12
HTMLHTML
headerheader

U1. 13
<html><html>
<head><head>
</head></head>
<body><body>
</body></body>
</html></html>
First HTML Page: Body
13
HTMLHTML
bodybody

U1. 14
Some Simple Tags
• Hyperlink Tags
• Image Tags
• Text formatting tags
14
<a href=“http://www.bvicam.in”<a href=“http://www.bvicam.in”
title=“BVICAM”>Link to BVICAM Web site</a>title=“BVICAM”>Link to BVICAM Web site</a>
<img src="logo.gif" alt="logo" /><img src="logo.gif" alt="logo" />
This text is <em>emphasized.</em>This text is <em>emphasized.</em>
<br />new line<br /><br />new line<br />
This one is <strong>more emphasized.</strong>This one is <strong>more emphasized.</strong>

U1. 15
Some Simple Tags – Example
15
<html><html>
<head><head>
<title>Simple Tags Demo</title><title>Simple Tags Demo</title>
</head></head>
<body><body>
<br /><br />
<br /><br />
<strong>Bold</strong> and <em>italic</em> text.<strong>Bold</strong> and <em>italic</em> text.
</body></body>
</html></html>
some-tags.htmlsome-tags.html

U1. 16
Some Simple Tags – Example (2)
16
<html><html>
<head><head>
<title>Simple Tags Demo</title><title>Simple Tags Demo</title>
</head></head>
<body><body>
<br /><br />
<br /><br />
<strong>Bold</strong> and <em>italic</em> text.<strong>Bold</strong> and <em>italic</em> text.
</body></body>
</html></html>
some-tags.htmlsome-tags.html

U1. 17
Tags Attributes
• Tags can have attributes
Attributes specify properties and behavior
Example:
Few attributes can apply to every element:
id, style, class, title
The id is unique in the document
Content of title attribute is displayed as hint when the
element is hovered with the mouse
Some elements have obligatory attributes
17
AttributeAttribute altalt with valuewith value
""logologo""

U1. 18
Headings and Paragraphs
• Heading Tags (h1 – h6)
• Paragraph Tags
• Sections: div
18
<p>This is my first paragraph</p><p>This is my first paragraph</p>
<p>This is my second paragraph</p><p>This is my second paragraph</p>
<h1>Heading 1</h1><h1>Heading 1</h1>
<h2>Sub heading 2</h2><h2>Sub heading 2</h2>
<div style="background: skyblue;"><div style="background: skyblue;">
This is a div</div>This is a div</div>

U1. 19
Headings and Paragraphs –
Example
19
<html><html>
<head><title>Headings and paragraphs</title></head><head><title>Headings and paragraphs</title></head>
<body><body>
<div style="background:skyblue"><div style="background:skyblue">
</body></body>
</html></html>
headings.htmlheadings.html

U1. 20
<html><html>
<head><title>Headings and paragraphs</title></head><head><title>Headings and paragraphs</title></head>
<body><body>
<div style="background:skyblue"><div style="background:skyblue">
</body></body>
</html></html>
Headings and Paragraphs –
Example (2)
20
headings.htmlheadings.html

U1. 21
Introduction to HTMLIntroduction to HTML
HTML Document Structure in DepthHTML Document Structure in Depth

U1. 22
Preface
• It is important to have the correct vision and attitude
towards HTML
HTML is only about structure, not appearance
Browsers tolerate invalid HTML code and parse errors –
you should not.
22

U1. 23
The <!DOCTYPE> Declaration
• HTML documents must start with a document
type definition (DTD)
It tells web browsers what type is the served
code
Possible versions: HTML 4.01, XHTML 1.0
(Transitional or Strict), XHTML 1.1, HTML 5
• Example:
See http://w3.org/QA/2002/04/valid-dtd-list.html for
a list of possible doctypes
23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

U1. 24
HTML vs. XHTML
• XHTML is more strict than HTML
Tags and attribute names must be in lowercase
All tags must be closed (<br/>, <img/>) while HTML
allows <br> and <img> and implies missing closing tags
(<p>par1 <p>par2)
XHTML allows only one root <html> element (HTML
allows more than one)
24

U1. 25
XHTML vs. HTML (2)
• Many element attributes are deprecated in XHTML,
most are moved to CSS
• Attribute minimization is forbidden, e.g.
• Note: Web browsers load XHTML faster than HTML
and valid code faster than invalid!
25
<input type="checkbox" checked><input type="checkbox" checked>
<input type="checkbox" checked="checked" /><input type="checkbox" checked="checked" />

U1. 26
The <head> Section
• Contains information that doesn’t show directly on
the viewable page
• Starts after the <!doctype> declaration
• Begins with <head> and ends with </head>
• Contains mandatory single <title> tag
• Can contain some other tags, e.g.
<meta>
<script>
<style>
<!–- comments -->
26

U1. 27
<head> Section: <title> tag
• Title should be placed between <head> and
</head> tags
• Used to specify a title in the window title bar
• Many Search engines and people rely on titles
27
<title>Telerik Academy – Winter Season 2009/2010<title>Telerik Academy – Winter Season 2009/2010
</title></title>

U1. 28
<head> Section: <script>
• The <script> element is used to embed scripts
into an HTML document
Script are executed in the client's Web browser
Scripts can live in the <head> and in the <body> sections
• Supported client-side scripting languages:
JavaScript
VBScript
28

U1. 29
The <script> Tag – Example
29
<html><html>
<head><head>
<title>JavaScript Example</title><title>JavaScript Example</title>
<script type="text/javascript"><script type="text/javascript">
function sayHello() {function sayHello() {
document.write("<p>Hello World!</p>");document.write("<p>Hello World!</p>");
}}
</script></script>
</head></head>
<body><body>
<script type=<script type=
"text/javascript">"text/javascript">
sayHello();sayHello();
</script></script>
</body></body>
</html></html>
scripts-example.htmlscripts-example.html

U1. 30
<head> Section: <style>
• The <style> element embeds formatting
information (CSS styles) into an HTML page
30
<html><html>
<head><head>
<style type="text/css"><style type="text/css">
p { font-size: 12pt; line-height: 12pt; }p { font-size: 12pt; line-height: 12pt; }
p:first-letter { font-size: 200%; }p:first-letter { font-size: 200%; }
span { text-transform: uppercase; }span { text-transform: uppercase; }
</style></style>
</head></head>
<body><body>
<p>Styles demo.<br /><p>Styles demo.<br />
<span>Test uppercase</span>.<span>Test uppercase</span>.
</p></p>
</body></body>
</html></html>
style-example.htmlstyle-example.html

U1. 31
Comments:  Tag
• Comments can exist anywhere between the
<html></html> tags
• Comments start with 
31
<!–- Telerik Logo (a JPG file) --><!–- Telerik Logo (a JPG file) -->
<img src="logo.jpg" alt=“Telerik Logo"><img src="logo.jpg" alt=“Telerik Logo">
<!–- Hyperlink to the web site --><!–- Hyperlink to the web site -->
<a href="http://telerik.com/">Telerik</a><a href="http://telerik.com/">Telerik</a>
<!–- Show the news table --><!–- Show the news table -->
<table class="newstable"><table class="newstable">
......

U1. 32
<body> Section: Introduction
• The <body> section describes the viewable portion
of the page
• Starts after the <head> </head> section
• Begins with <body> and ends with </body>
32
<html><html>
<head><title>Test page</title></head><head><title>Test page</title></head>
<body><body>

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

U1. 33
Text FormattingText Formatting
• Text formatting tags modify the text between the
opening tag and the closing tag
Ex. <b>Hello</b> makes “Hello” bold
33

U1. 34
Text Formatting – Example
34
<html><html>
<head><head>
<title>Page Title</title><title>Page Title</title>
</head></head>
<body><body>
<h1>Notice</h1><h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p><p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:<p><pre>Next paragraph:
preformatted.</pre></p>preformatted.</pre></p>
<h2>More Info</h2><h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br /><p>Specifically, we’re using XHMTL 1.0 transitional.<br />
Next line.</p>Next line.</p>
</body></body>
</html></html>
text-formatting.htmltext-formatting.html

U1. 35
Text Formatting – Example (2)
35
<html><html>
<head><head>
<title>Page Title</title><title>Page Title</title>
</head></head>
<body><body>
<h1>Notice</h1><h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p><p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:<p><pre>Next paragraph:
preformatted.</pre></p>preformatted.</pre></p>
<h2>More Info</h2><h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br /><p>Specifically, we’re using XHMTL 1.0 transitional.<br />
Next line.</p>Next line.</p>
</body></body>
</html></html>
text-formatting.htmltext-formatting.html

U1. 36
Hyperlinks: <a> Tag
• Link to a document called form.html on the same
server in the same directory:
• Link to a document called parent.html on the
same server in the parent directory:
• Link to a document called cat.html on the same
server in the subdirectory stuff:
36
<a href="form.html">Fill Our Form</a><a href="form.html">Fill Our Form</a>
<a href="../parent.html">Parent</a><a href="../parent.html">Parent</a>
<a href="stuff/cat.html">Catalog</a><a href="stuff/cat.html">Catalog</a>

U1. 37
Hyperlinks: <a> Tag (2)
• Link to an external Web site:
Always use a full URL, including "http://", not just
"www.somesite.com"
Using the target="_blank" attribute opens the link in a
new window
37
<a href="http://www.devbg.org" target="_blank">BASD</a><a href="http://www.devbg.org" target="_blank">BASD</a>

U1. 38
Hyperlinks: <a> Tag (3)
• Link to a document called apply-now.html
On the same server, in same directory
Using an image as a link button:
38
<a href="apply-now.html"><img<a href="apply-now.html"><img
src="apply-now-button.jpg" /></a>src="apply-now-button.jpg" /></a>

U1. 39
Hyperlinks and Sections
• Link to another location in the same document:
• Link to a specific location in another document:
39
<a href="#section1">Go to Introduction</a><a href="#section1">Go to Introduction</a>
......
<h2 id="section1">Introduction</h2><h2 id="section1">Introduction</h2>
<a href="chapter3.html#section3.1.1">Go to Section<a href="chapter3.html#section3.1.1">Go to Section
3.1.1</a>3.1.1</a>
<!–- In chapter3.html --><!–- In chapter3.html -->
......
<div id="section3.1.1"><div id="section3.1.1">
<h3>3.1.1. Technical Background</h3><h3>3.1.1. Technical Background</h3>
</div></div>

U1. 40
 Inserting an image withInserting an image with <img><img> tag:tag:
 Image attributes:Image attributes:
 Example:Example:
Images:Images: <img><img> tagtag
srcsrc Location of image fileLocation of image file (relative or absolute)(relative or absolute)
altalt Substitute text for displaySubstitute text for display (e.g. in text mode)(e.g. in text mode)
heightheight Number of pixels of the heightNumber of pixels of the height
widthwidth Number of pixels of the widthNumber of pixels of the width
borderborder Size of border, 0 for no borderSize of border, 0 for no border
<img src="/img/basd-logo.png"><img src="/img/basd-logo.png">
<img src="./php.png" alt="PHP Logo" /><img src="./php.png" alt="PHP Logo" />
40

U1. 41
Miscellaneous Tags
• <hr />: Draws a horizontal rule (line):
• <center></center>: Deprecated!
• <font></font>: Deprecated!
41
<hr size="5" width="70%" /><hr size="5" width="70%" />
<center>Hello World!</center><center>Hello World!</center>
<font size="3" color="blue">Font3</font><font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font><font size="+4" color="blue">Font+4</font>

U1. 42
Miscellaneous Tags – Example
42
<html><html>
<head><head>
<title>Miscellaneous Tags Example</title><title>Miscellaneous Tags Example</title>
</head></head>
<body><body>
<hr size="5" width="70%" /><hr size="5" width="70%" />
<center>Hello World!</center><center>Hello World!</center>
<font size="3" color="blue">Font3</font><font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font><font size="+4" color="blue">Font+4</font>
</body></body>
</html></html>
misc.htmlmisc.html

U1. 43
a. Apple
b. Orange
c. Grapefruit
Ordered Lists: <ol> Tag
• Create an OOrdered LList using <ol></ol>:
• Attribute values for type are 1, A, a, I, or i
43
1. Apple
2. Orange
3. Grapefruit
A. Apple
B. Orange
C. Grapefruit
I. Apple
II. Orange
III. Grapefruit
i. Apple
ii. Orange
iii. Grapefruit
<ol type="1"><ol type="1">
<li>Apple</li><li>Apple</li>
<li>Orange</li><li>Orange</li>
<li>Grapefruit</li><li>Grapefruit</li>
</ol></ol>

U1. 44
Unordered Lists: <ul> Tag
• Create an UUnordered LList using <ul></ul>:
• Attribute values for type are:
disc, circle or square
44
• Apple
• Orange
• Pear
o Apple
o Orange
o Pear
 Apple
 Orange
 Pear
<ul type="disk"><ul type="disk">
</ul></ul>

U1. 45
Definition lists: <dl> tag
• Create definition lists using <dl>
Pairs of text and associated definition; text is in <dt> tag,
definition in <dd> tag
Renders without bullets
Definition is indented
45
<dl><dl>
<dt>HTML</dt><dt>HTML</dt>
<dd>A markup language …</dd><dd>A markup language …</dd>
<dt>CSS</dt><dt>CSS</dt>
<dd>Language used to …</dd><dd>Language used to …</dd>
</dl></dl>

U1. 46
Lists – Example
46
<ol type="1"><ol type="1">
</ol></ol>
<ul type="disc"><ul type="disc">
</ul></ul>
<dl><dl>
<dt>HTML</dt><dt>HTML</dt>
<dd>A markup lang…</dd><dd>A markup lang…</dd>
</dl></dl>
lists.htmllists.html

U1. 47
HTML Special CharactersHTML Special Characters
££££British PoundBritish Pound
€€€€EuroEuro
""""Quotation MarkQuotation Mark
¥¥¥¥Japanese YenJapanese Yen
————Em DashEm Dash
  Non-breaking SpaceNon-breaking Space
&&&&AmpersandAmpersand
>>>>Greater ThanGreater Than
<<<<Less ThanLess Than
™™™™Trademark SignTrademark Sign
®®®®Registered Trademark SignRegistered Trademark Sign
©©©©Copyright SignCopyright Sign
SymbolSymbolHTML EntityHTML EntitySymbol NameSymbol Name
47

U1. 48
Special Characters – Example
48
<p>[>>  Welcome<p>[>>  Welcome
  <<]</p>  <<]</p>
<p>►I have following cards:<p>►I have following cards:
A♣, K♦ and 9♥.</p>A♣, K♦ and 9♥.</p>
<p>►I prefer hard rock ♫<p>►I prefer hard rock ♫
music ♫</p>music ♫</p>
<p>© 2006 by Svetlin Nakov & his<p>© 2006 by Svetlin Nakov & his
team</p>team</p>
<p>Telerik Academy™</p><p>Telerik Academy™</p>
special-chars.htmlspecial-chars.html

U1. 49
Special Chars – Example (2)
49
<p>[>>  Welcome<p>[>>  Welcome
  <<]</p>  <<]</p>
<p>►I have following cards:<p>►I have following cards:
A♣, K♦ and 9♥.</p>A♣, K♦ and 9♥.</p>
<p>►I prefer hard rock ♫<p>►I prefer hard rock ♫
music ♫</p>music ♫</p>
<p>© 2006 by Svetlin Nakov & his<p>© 2006 by Svetlin Nakov & his
team</p>team</p>
<p>Telerik Academy™</p><p>Telerik Academy™</p>
special-chars.htmlspecial-chars.html

U1. 50
UsingUsing <DIV><DIV> andand <SPAN><SPAN>
Block and Inline ElementsBlock and Inline Elements

U1. 51
Block and Inline Elements
• Block elements add a line break before and after
them
<div> is a block element
Other block elements are <table>, <hr>, headings, lists,
<p> and etc.
• Inline elements don’t break the text before and after
them
<span> is an inline element
Most HTML elements are inline, e.g. <a>
51

U1. 52
The <div> Tag
• <div> creates logical divisions within a page
• Block style element
• Used with CSS
• Example:
52
<div style="font-size:24px; color:red">DIV<div style="font-size:24px; color:red">DIV
example</div>example</div>
<p>This one is <span style="color:red; font-<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>weight:bold">only a test</span>.</p>
div-and-span.htmldiv-and-span.html

U1. 53
The <span> Tag
• Inline style element
• Useful for modifying a specific portion of text
Don't create a separate area
(paragraph) in the document
• Very useful with CSS
53
<p>This one is <span style="color:red; font-<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-size:32px;<p>This one is another <span style="font-size:32px;
font-weight:bold">TEST</span>.</p>font-weight:bold">TEST</span>.</p>
span.htmlspan.html

U1. 54
HTML TablesHTML Tables

U1. 55
HTML Tables
• Tables represent tabular data
A table consists of one or several rows
Each row has one or more columns
• Tables comprised of several core tags:
<table></table>: begin / end the table
<tr></tr>: create a table row
<td></td>: create tabular data (cell)
• Tables should not be used for layout. Use CSS
floats and positioning styles instead
55

U1. 56
HTML Tables (2)
• Start and end of a table
• Start and end of a row
• Start and end of a cell in a row
56
<table> ... </table><table> ... </table>
<tr> ... </tr><tr> ... </tr>
<td> ... </td><td> ... </td>

U1. 57
Simple HTML Tables – Example
57
<table cellspacing="0" cellpadding="5"><table cellspacing="0" cellpadding="5">
<tr><tr>
<td><img src="ppt.gif"></td><td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td><td><a href="lecture1.ppt">Lecture 1</a></td>
</tr></tr>
<tr><tr>
</tr></tr>
<tr><tr>
<td><img src="zip.gif"></td><td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip"><td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>Lecture 2 - Demos</a></td>
</tr></tr>
</table></table>

U1. 58
<tr><tr>
</tr></tr>
<tr><tr>
</tr></tr>
<tr><tr>
<td><img src="zip.gif"></td><td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip"><td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>Lecture 2 - Demos</a></td>
</tr></tr>
</table></table>
Simple HTML Tables – Example (2)
58

U1. 59
Complete HTML Tables
• Table rows split into three semantic sections:
header, body and footer
<thead> denotes table header and contains <th>
elements, instead of <td> elements
<tbody> denotes collection of table rows that contain the
very data
<tfoot> denotes table footer but comes BEFORE the
<tbody> tag
<colgroup> and <col> define columns (most often used
to set column widths)
59

U1. 60
Complete HTML Table: Example
60
<table><table>
<colgroup><colgroup>
<col style="width:100px" /><col /><col style="width:100px" /><col />
</colgroup></colgroup>
<thead><thead>
<tr><th>Column 1</th><th>Column 2</th></tr><tr><th>Column 1</th><th>Column 2</th></tr>
</thead></thead>
<tfoot><tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr><tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot></tfoot>
<tbody><tbody>
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr><tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
</tbody></tbody>
</table></table>
headerheader
footerfooter
Last comes the bodyLast comes the body
(data)(data)
thth
columnscolumns

U1. 61
<table><table>
<colgroup><colgroup>
<col style="width:200px" /><col /><col style="width:200px" /><col />
</colgroup></colgroup>
<thead><thead>
<tr><th>Column 1</th><th>Column 2</th></tr><tr><th>Column 1</th><th>Column 2</th></tr>
</thead></thead>
<tfoot><tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr><tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot></tfoot>
<tbody><tbody>
</tbody></tbody>
</table></table>
Complete HTML Table:
Example (2)
61
table-full.htmltable-full.html
Although the footerAlthough the footer
is before the data inis before the data in
the code, it isthe code, it is
displayed lastdisplayed last
By default, headerBy default, header
text is bold andtext is bold and
centered.centered.

U1. 62
Nested Tables
• Table data “cells” (<td>) can contain nested
tables (tables within tables):
62
<table><table>
<tr><tr>
<td>Contact:</td><td>Contact:</td>
<td><td>
<table><table>
<tr><tr>
<td>First Name</td><td>First Name</td>
<td>Last Name</td><td>Last Name</td>
</tr></tr>
</table></table>
</td></td>
</tr></tr>
</table></table>
nested-tables.htmlnested-tables.html

U1. 63
 cellpaddingcellpadding
 Defines the emptyDefines the empty
space around thespace around the
cell contentcell content
 cellspacingcellspacing
 Defines theDefines the
empty spaceempty space
between cellsbetween cells
Cell Spacing and Padding
• Tables have two important attributes:
63
cellcell cellcell
cellcell cellcell
cellcell
cellcell
cellcell
cellcell

U1. 64
Cell Spacing and Padding –
Example
64
<html><html>
<head><title>Table Cells</title></head><head><title>Table Cells</title></head>
<body><body>
<tr><td>First</td><tr><td>First</td>
<td>Second</td></tr><td>Second</td></tr>
</table></table>
<br/><br/>
<tr><td>First</td><td>Second</td></tr><tr><td>First</td><td>Second</td></tr>
</table></table>
</body></body>
</html></html>
table-table-cellscells.html.html

U1. 65
Cell Spacing and Padding –
Example (2)
65
<html><html>
<head><title>Table Cells</title><head><title>Table Cells</title>
<style><style>
table, th, td {table, th, td {
border: 1px solid black;}</style>border: 1px solid black;}</style>
</head></head>
<body><body>
<table<table cellspacing="15" cellpadding="0"cellspacing="15" cellpadding="0">>
<tr><td>First</td><tr><td>First</td>
<td>Second</td></tr><td>Second</td></tr>
</table></table>
<br/><br/>
<tr><td>First</td><td>Second</td></tr><tr><td>First</td><td>Second</td></tr>
</table></table>
</body></body>
</html></html>
table-table-cellscells.html.html

U1. 66
 rowspanrowspan
 Defines howDefines how
many rows themany rows the
cell occupiescell occupies
 colspancolspan
 Defines howDefines how
many columnsmany columns
the cellthe cell
Column and Row Span
• Table cells have two important attributes:
66
cell[1,1cell[1,1
]]
cell[1,2]cell[1,2]
cell[2,1]cell[2,1]
colspan="colspan="
1"1"
colspan="colspan="
1"1"
colspan="colspan="
2"2"
cell[1,1]cell[1,1]
cell[1,2cell[1,2
]]
cell[2,1cell[2,1
]]
rowspan="rowspan="
2"2"
rowspan="rowspan="
1"1"
rowspan="rowspan="
1"1"

U1. 67
Column and Row Span – Example
67
<table cellspacing="0"><table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td><tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr><td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td><tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td><td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr><td>Cell[3,2]</td></tr>
</table></table>
table-colspan-rowspan.htmltable-colspan-rowspan.html

U1. 68
<table cellspacing="0"><table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td><tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr><td colspan="2">Cell[2,1]</td></tr>
<td rowspan="2">Cell[2,2]</td><td rowspan="2">Cell[2,2]</td>
</table></table>
Column and Row Span –
Example (2)
68
table-colspan-rowspan.htmltable-colspan-rowspan.html
Cell[2,3]Cell[1,3]
Cell[3,2]
Cell[2,2]
Cell[1,2]
Cell[2,1]Cell[1,1]

U1. 69
HTML FormsHTML FormsEntering User Data from a WebEntering User Data from a Web
PagePage

U1. 70
HTML Forms
• Forms are the primary method for gathering data
from site visitors
• Create a form block with
• Example:
70
<form></form><form></form>
<form name="myForm" method="post"<form name="myForm" method="post"
action="path/to/some-script.php">action="path/to/some-script.php">
......
</form></form>
The "action" attribute tellsThe "action" attribute tells
where the form data shouldwhere the form data should
be sentbe sent
The “method" attribute tellsThe “method" attribute tells
how the form data should behow the form data should be
sent – via GET or POSTsent – via GET or POST
requestrequest

U1. 71
Form Fields
• Single-line text input fields:
• Multi-line textarea fields:
• Hidden fields contain data not shown to the
user:
Often used by JavaScript code
71
<input type="text" id="FirstName" value="This<input type="text" id="FirstName" value="This
is a text field" />is a text field" />
<textarea id="Comments">This is a multi-line<textarea id="Comments">This is a multi-line
text field</textarea>text field</textarea>
<input type="hidden" id="Account" value="This<input type="hidden" id="Account" value="This
is a hidden text field" />is a hidden text field" />

U1. 72
Fieldsets
• Fieldsets are used to enclose a group of related
form fields:
• The <legend> is the fieldset's title.
72
<form method="post" action="form.aspx"><form method="post" action="form.aspx">
<fieldset><fieldset>
<legend>Client Details</legend><legend>Client Details</legend>
<input type="text" id="Name" /><input type="text" id="Name" />
<input type="text" id="Phone" /><input type="text" id="Phone" />
</fieldset></fieldset>
<fieldset><fieldset>
<legend>Order Details</legend><legend>Order Details</legend>
<input type="text" id="Quantity" /><input type="text" id="Quantity" />
<textarea cols="40" rows="10"<textarea cols="40" rows="10"
id="Remarks"></textarea>id="Remarks"></textarea>
</form></form>

U1. 73
Form Input Controls
• Checkboxes:
• Radio buttons:
• Radio buttons can be grouped, allowing only
one to be selected from a group:
73
<input type="checkbox" id="fruit" value="apple"<input type="checkbox" id="fruit" value="apple"
/>/>
<input type="radio" id="title" value="Mr." /><input type="radio" id="title" value="Mr." />
<input type="radio" id="city" value="Lom" /><input type="radio" id="city" value="Lom" />
<input type="radio" id="city" value="Ruse" /><input type="radio" id="city" value="Ruse" />

U1. 74
Other Form Controls
• Dropdown menus:
• Submit button:
74
<select id="gender"><select id="gender">
<option value="Value 1"<option value="Value 1"
selected="selected">Male</option>selected="selected">Male</option>
<option value="Value 2">Female</option><option value="Value 2">Female</option>
<option value="Value 3">Other</option><option value="Value 3">Other</option>
</select></select>
<input type="submit" id="submitBtn"<input type="submit" id="submitBtn"
value="Apply Now" />value="Apply Now" />

U1. 75
Other Form Controls (2)
• Reset button – brings the form to its initial state
• Image button – acts like submit but image is
displayed and click coordinates are sent
• Ordinary button – used for Javascript, no default
action
75
<input type="reset" name="resetBtn"<input type="reset" name="resetBtn"
value="Reset the form" />value="Reset the form" />
<input type="image" src="submit.gif"<input type="image" src="submit.gif"
name="submitBtn" alt="Submit" />name="submitBtn" alt="Submit" />
<button type="button"<button type="button"
onclick="myFunction()">Try it</button>onclick="myFunction()">Try it</button>

U1. 76
• Password input – a text field which masks the
entered text with * signs
• Multiple select field – displays the list of items in
multiple lines, instead of one
76
<input type="password" id="pass" /><input type="password" id="pass" />
<select id="products" multiple="multiple"><select id="products" multiple="multiple">
<option value="Value 1"<option value="Value 1"
selected="selected">keyboard</option>selected="selected">keyboard</option>
<option value="Value 2">mouse</option><option value="Value 2">mouse</option>
<option value="Value 3">speakers</option><option value="Value 3">speakers</option>
</select></select>

U1. 77
• File input – a field used for uploading files
When used, it requires the form element to have
a specific attribute:
77
<input type="file" id="photo" /><input type="file" id="photo" />
<form enctype="multipart/form-data"><form enctype="multipart/form-data">
......
<input type="file" id="photo" /><input type="file" id="photo" />
......
</form></form>

U1. 78
Labels
• Form labels are used to associate an
explanatory text to a form field using the field's
ID.
• Clicking on a label focuses its associated field
(checkboxes are toggled, radio buttons are
checked)
• Labels are both a usability and accessibility
feature and are required in order to pass
accessibility validation.
78
<label for="fn">First Name</label><label for="fn">First Name</label>
<input type="text" id="fn" /><input type="text" id="fn" />

U1. 79
HTML Forms – Example
79
<form method="post" action="apply-now.php"><form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" /><input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend><fieldset><legend>Academic information</legend>
<label for="degree">Degree</label><label for="degree">Degree</label>
<select name="degree" id="degree"><select name="degree" id="degree">
<option value="BA">Bachelor of Art</option><option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option><option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of<option value="MBA" selected="selected">Master of
Business Administration</option>Business Administration</option>
</select></select>
<br /><br />
<label for="studentid">Student ID</label><label for="studentid">Student ID</label>
<input type="password" name="studentid" /><input type="password" name="studentid" />
<fieldset><legend>Personal Details</legend><fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label><label for="fname">First Name</label>
<input type="text" name="fname" id="fname" /><input type="text" name="fname" id="fname" />
<br /><br />
<label for="lname">Last Name</label><label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" /><input type="text" name="lname" id="lname" />
form.htmlform.html

U1. 80
HTML Forms – Example (2)
80
<br /><br />
Gender:Gender:
<input name="gender" type="radio" id="gm" value="m" /><input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label><label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" /><input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label><label for="gf">Female</label>
<br /><br />
<label for="email">Email</label><label for="email">Email</label>
<input type="text" name="email" id="email" /><input type="text" name="email" id="email" />
<p><p>
<textarea name="terms" cols="30" rows="4"<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND CONDITIONS...</textarea>readonly="readonly">TERMS AND CONDITIONS...</textarea>
</p></p>
<p><p>
<input type="submit" name="submit" value="Send Form" /><input type="submit" name="submit" value="Send Form" />
<input type="reset" value="Clear Form" /><input type="reset" value="Clear Form" />
</p></p>
</form></form>
form.html (continued)form.html (continued)

U1. 81
form.html (continued)form.html (continued)
HTML Forms – Example (3)
81

U1. 82
TabIndex
• The tabindex HTML attribute controls the order in
which form fields and hyperlinks are focused when
repeatedly pressing the TAB key
tabindex="0" (zero) - "natural" order
If X > Y, then elements with tabindex="X" are iterated
before elements with tabindex="Y"
Elements with negative tabindex are skipped, however,
this is not defined in the standard
82
<input type="text" tabindex="10" /><input type="text" tabindex="10" />

U1. 83
HTML FramesHTML Frames
<frameset><frameset>,, <frame><frame> andand <iframe><iframe>

U1. 84
HTML Frames
• Frames provide a way to show multiple HTML
documents in a single Web page
• The page can be split into separate views (frames)
horizontally and vertically
• Frames were popular in the early ages of HTML
development, but now their usage is rejected
• Frames are not supported by all user agents
(browsers, search engines, etc.)
A <noframes> element is used to provide content for non-
compatible agents.
84

U1. 85
HTML Frames – Demo
85
<html><html>
<head><title>Frames Example</title></head><head><title>Frames Example</title></head>
<frameset cols="180px,*,150px"><frameset cols="180px,*,150px">
<frame src="left.html" /><frame src="left.html" />
<frame src="middle.html" /><frame src="middle.html" />
<frame src="right.html" /><frame src="right.html" />
</frameset></frameset>
</html></html>
frames.htmlframes.html
 Note the target attribute applied to theNote the target attribute applied to the
<a><a> elements in the left frame.elements in the left frame.

U1. 86
First Popular 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.

U1. 87
Web Browser usage -2012

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

U1. 89
Java Script

U1. 90
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 use JavaScript without purchasing a
license

U1. 91
• The HTML DOM (Document Object Model)
• When a web page is loaded, the browser creates a
Document Object Model of the page.
• The HTML DOM model is constructed as a tree of Objects:
HTML DOM (Document Object Model)

U1. 92
With the HTML DOM, JavaScript can access all
the elements of an HTML document.
With a programmable object model, JavaScript gets all
the power it needs to create dynamic HTML:
JavaScript can change all the HTML elements in the page
JavaScript can change all the HTML attributes in the page
JavaScript can change all the CSS styles in the page
JavaScript can react to all the events in the page
HTML DOM (Document Object Model)

U1. 93
Finding HTML Elements
Finding HTML Elements
• Often, with JavaScript, you want to manipulate HTML elements.
• To do so, you have to find the elements first.
• Finding HTML elements by id
Finding HTML Elements by Id
var x=document.getElementById("intro");

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

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

U1. 99
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Hello
JavaScript!'">
Click Me!</button>
</body>
</html>
Java script

U1. 100
<html>
<body>
<p>This example calls a function which performs a calculation, and returns the
result:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Javascript Cont...

U1. 101
For Loop Example
<html>
<body>
<p id="demo"></p>
<script>
cars = ["BMW", "Volvo", "Saab", "Ford"];
text = "";
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Javascript Cont...

U1. 102
While / do while loop:
while (i < 10) {
text += "The number is " + i;
i++;
}
_____________________________
do {
text += "The number is " + i;
i++;
}
while (i < 10);
Javascript Cont...

U1. 103
Array Demo:
<html>
<body>
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>
Javascript Cont...

U1. 104
Javascript Cont...

U1. 105
Javascript Cont...

U1. 106
<html>
<body>
<p>Click the button to display what day it is today:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
Javascript Cont...

U1. 107
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
Javascript Cont...

U1. 108
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
}
document.getElementById("demo").innerHTML = "Today is " + day;
}
</script>
</body>
</html>
Javascript Cont...

U1. 109
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
}

U1. 110
Ex: Try Catch
<!DOCTYPE html>
<html>
<body>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="message"></p>

U1. 111
<script>
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "empty";
if(isNaN(x)) throw "not a number";
x = Number(x);
if(x < 5) throw "too low";
if(x > 10) throw "too high";
}

U1. 112
catch(err) {
message.innerHTML = "Input is " + err;
}
}
</script>
</body>
</html>

U1. 113
CSS: Cascading Style Sheets

U1. 114
CSS:-Adding Style to HTML
There are three ways of providing styling information for the
Web browsers.
•External style sheet
•Internal style sheet
•Inline style
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).

U1. 115
External (Linking) style sheet
• You can separate style sheets from HTML documents. Style sheet files
are imported to HTML documents by <link>.
[example.html]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

U1. 116
• "myStyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
External (Linking) style sheet

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

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

U1. 119
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; }

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

U1. 121
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; }

U1. 122
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; }

U1. 123
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; }

U1. 124
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]
[style.css]
h1, h2, h3, h4{ color: red; font-size: 12px; }

U1. 125
DHTML

U1. 126
Dynamic HTML
Dynamic HTML, or DHTML, is an umbrella term for a
collection of technologies used together to create
interactive and animated web sites by using a
combination of :
• a static markup language (such as HTML),
• a client-side scripting language (such as
JavaScript),
• a presentation definition language (such as CSS),
and the Document Object Model.

U1. 127
DHTML
• DHTML is not a technology in and of itself; rather, it
is the product of three related and complementary
technologies: HTML, Cascading Style Sheets
(CSS), and script.
• To allow scripts and components to access features
of HTML and CSS, the contents of the document
were represented as objects in a programming
model known as the Document Object Model
(DOM).

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

U1. 129
Short Questions
1. By which property you can select one Radio Button
among multiple?
2. Give the names of four Button control present in
Standard Toolbox?
3. Write code for a html table that will have one row and
one column?
4. How to add JavaScript file reference in the web page?
5. What is external Style Sheet? How do you link it with a
HTML Page?
6. How to write bulleted point in HTML using tag?
7. What is the alt property in <img> tag and give the full
syntax of this tag ?

U1. 130
Long Questions
1. How a web page runs on a Client server architecture
explain?
2. What are HTML Tags and write the steps of add CSS.
3. What is Java Script? Why it is helpful to add JS code in a
web form.
4. What is HTML Page? Explain all Important Tags with a
practical example.
5. Design the HTML website for a company with some linked
pages and explain all pages with their use?
6. What is Cascading Style Sheets and describe all
Selectors with their use and examples?
7. What is DHTML. Explain the role of it.

U1. 131
Research Problem
Combinatorial pattern matching in images and
audio.
The signal processing community has traditionally
addressed the problem of measuring the similarity
between two images or audio segments (or parts
thereof) despite of slight differences due to scale,
orientation, lighting, stretching, etc. (in the first
case) or timing, volume, tone, noise, etc. (in the
second case). They have used an approach where
the object is seen as a continuous signal to be
processed.

U1. 132
Research Problem Contd…
• A recent alternative approach to pattern matching in
audio and images relies on combinatory rather than
on signal processing. The audio or image is seen as
a one or two dimensional text, where one or two
dimensional patterns are sought. Several results on
searching images permitting rotations, scaling, pixel
differences and stretching have been obtained, in
many of which we have been involved. The same has
happened in searching music files, using techniques
derived from the large body of knowledge acquired in
the field of pattern matching of biological sequences.
• Ref: http://www.cwr.cl/areas.html

U1. 133
Resources: Online
W3C Website
1. http://www.w3.org/Style/CSS/ (CSS)
2. http://www.w3.org/DOM/ (DOM)
3. http://www.w3.org/MarkUp/ (HTML/XHTML)
css-discuss listserv
1. http://www.css-discuss.org/
css-discuss Wiki
1. http://css-discuss.incutio.com/
JavaScript Message Board
1. http://www.aspmessageboard.com/forum/jscript.asp
XMLHttpRequest() Information
1. http://developer.apple.com/internet/webcontent/xmlhttpreq.html
2. http://www.xml.com/lpt/a/2005/02/09/xml-http-request.html

U1. 134
References
TEXT BOOKS:
1. K. K. Sharma, “Web Technology”, A.B. Publication Delhi, First Edition,
2008.
2. Stephen Walther, “ASP.NET 4”, Pearson Education.
3. Ethan Cerami, “Web Services”, O'Reilly Media, 2002.
4. Achyut S Godbole and Atul Kahate, “Web Technologies”, Tata McGraw Hill.
5. Heith Morneau, “Active Server Pages “, Vikas Publishing House.
REFERENCES:
1. Raj Kamal , “Internet and Web Technologies”, TMH.
2. Deitel, “Internet & World Wide Web , How to Program”, PHI.
3. V. K. Jain, “Advanced programming in Web Design”, Cyber tech.
4. Rick Dranell, “HTML4 unleashed”, Techmedia Publication, 2000.

Web tech html css js

More Related Content

What's hot (20)

Similar to Web tech html css js (20)

Recently uploaded (20)

Web tech html css js