Web Technology

WEB TECHNOLOGY
UNIT – 1:
Internet Basic – Introduction to HTML – List Creating Table – Linking document
– Frames - Graphics to HTML Doc – Style sheet – style sheet basic – Add style to
document – Creating style sheet rules – Style sheet properties – Font – Text – List –
Color and Background color – Box – Display properties.
UNIT – 2:
Introduction to JavaScript – Advantage of JavaScript – JavaScript syntax – Data
type – Variable – Array – Operator and Expression – Looping Constructor – Function
– Dialog box.
UNIT – 3:
JavaScript document object model – Introduction – object in HTML – Event
Handling – Window object – Document object – Browser Object – Form Object –
Navigator object – Screen object – Build in object – User defined object – Cookies.
UNIT – 4:
ASP.NET Languages structure – Page event, Properties & Compiler Directives.
HTML server controls – Anchor, Tables, Forms, Forms, Files. Basic web server
Controls – Label, Textbox, Button, Image, Links, Check & Radio button, Hyperlink.
Data list Web server controls – Check box list, Radio button list, Drop down list, List
box, and Data grid, Repeater.
UNIT – 5:
Request and Response Objects, Cookies, Working with Data – OLEDB
connection class, Command class transaction class, data adaptor class, data set class.
Advanced Issues – Email, Application Security – Authentication, IP Address, Secure
by SSL & Client Certificates.
BOOKS FOR STUDY AND REFERENCES:
1. Bayross, Web Enable Commercial Application Development Using HTML,

DHTML, JavaScript, Perl CGI, BPB Publications.
2. Jaworski, Mastering JavaScript, BPB Publications, 1999
3. T. A Powell, complete Reference HTML (Third Edition), TMH, 2002.
4. G. Buczek, ASP.NET Developers Guide, TMH, 2002.
Internet Basic:
Created by K.Dharmarajan M.Sc, M.Phil., Lecturer ,Vels’s College, Chennai-117 1

The internet begin 1969, as an four computer network called ARPAnet which
was designed by the U.S. Defense Department so that research scientists could
communicate .In approximate two year, ARPAnet grew to about two-dozen sites and
by 1981,consisted of more then two hundred sites in 1990, ARPAnet was officially
disbanded and the network, which now consisted of hundred sits, came to be know as
the feature .
ARPANET : Advanced Research Projects Agency Network (1969)
A network of networks, joining many government, university and private

computers together and providing an infrastructure for the use of E-mail, bulletin
boards, search for information over Internet, enjoy Internet surfing , file archives,
hypertext documents, databases and other computational resources
Internet service provider (ISP), also sometimes referred to as an Internet

access provider (IAP), is a company that offers its customers access to the Internet.
The ISP connects to its customers using a data transmission technology appropriate
for delivering Internet Protocol datagram’s, such as dial-up, DSL, cable modem,
wireless or dedicated high-speed interconnects
WWW : World Wide Web Created 1989
This information is almost always retrieved using the Hypertext Transfer Protocol
(HTTP). In fact HTTP has been in use by the World Wide Web since 1989, and its use
has increased steadily over the years. Today there are millions of Web sites on the
World Wide Web, all of them using HTTP
The internet consists of two types of computer SERVER and CLIENT
 Computer which offer information of be read are called Server

 Computer that read the information offered are called client
Client-server computing or networking is a distributed application architecture

that partitions tasks or work loads between service providers (servers) and service
requesters, called clients
Current Servers
Google- http://www.google.com
Info seek- http://guide.infoseek.com
Alta Vista – http://www.altavista.digital.com
Lycos – http://www.lycos.com
Yahoo! – http://www.yahoo.com
Domain
A domain is logical grouping of computers on a network. It may include multiple

networks. It may also just be a subset of a network of computers .
""
com edu gov in t m il net o rg
n o m in u m m e ta in fo b e r k e le y nwu n a to a rm y uu
w est ea st w w w
d a k o ta to rn a d o
The top level domains
 com ... for commercial entities

 edu ... for four-year educational institutions
 gov ... for non-military, United States federal government instititutions
 mil ... for United States military organizations
 net ... for network operations and Internet Service Providers (ISP)
 org ... for non-profit organizations
Uniform Resource Locator (URL)
Consists of 4 parts:
Protocol ® Hyper Text Transfer Protocol (HTTP)
Domain Name ® or Internet Protocol (IP) address
Directory
Filename

Specific document filename
index. (s) htm(l) or default.(s)htm(l)
Example: http://www.google.com
TCP/IP
TCP/IP is an abbreviation for Transmission Control Protocol/Internet Protocol.
TCP is a lossless protocol, requiring a handshake to insure that data is not lost during
transmission.
Internet Protocol (IP) uses addresses which are a series of four "octet" (byte)
numbers in a dotted decimal notation. For example: 199.246.24.130
Application (process-to-process) Layer: This is the scope within which

applications create user data and communicate this data to other processes or
applications on another or the same host. The communications partners are often
called peers. This is where the "higher level" protocols such as SMTP, FTP, SSH,
HTTP, etc. operate.
Transport (host-to-host) Layer: The Transport Layer constitutes the networking

regime between two network hosts, either on the local network or on remote
networks separated by routers. The Transport Layer provides a uniform networking
interface that hides the actual topology (layout) of the underlying network
connections.
Internet (internetworking) Layer: The Internet Layer has the task of exchanging
datagram across network boundaries. It is therefore also referred to as the layer that
establishes internetworking; indeed, it defines and establishes the Internet
Link Layer: This layer defines the networking methods with the scope of the local
network link on which hosts communicate without intervening routers. This layer
describes the protocols used to describe the local network topology and the interfaces
needed to affect transmission of Internet Layer datagram’s to next-neighbor hosts.
Internet Use:
Internet used in business, education, Marketing, sales , research, online

reservation , online trade , software development , job searching, video conference,
Email ,File Transfer, chatting, etc.,
HTML

History
To make a long story short, HTML was invented in 1990 by a scientist called
Tim Berners-Lee. The purpose was to make it easier for scientists at different
universities to gain access to each other's research documents
HTML stands for Hyper Text Markup Language

HTML is not a programming language, it is a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages
HTML Tags
HTML markup tags are usually called HTML tags
HTML tags are keywords surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
Start and end tags are also called opening tags and closing tags
HTML Documents = Web Pages
 HTML documents describe web pages
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or Firebox) is to read HTML
documents and display them as web pages. The browser does not display the HTML
tags, but uses the tags to interpret the content of the page
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p> </body> </html>
Example Explained
 The text between <html> and </html> describes the web page
 The text between <body> and </body> is the visible page content
 The text between <h1> and </h1> is displayed as a heading
 The text between <p> and </p> is displayed as a paragraph
HTML Element Syntax

 An HTML element starts with a start tag / opening tag

 An HTML element ends with an end tag / closing tag
 The element content is everything between the start and the end tag
 Some HTML elements have empty content
 Empty elements are closed in the start tag
 Most HTML elements can have attributes
Tag Description
Basic
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br /> Inserts a single line break
<hr /> Defines a horizontal line
 Defines a comment
Formatting
<acronym> Defines an acronym
<abbr> Defines an abbreviation
<address> Defines contact information for the author/owner of a document
<b> Defines bold text
<bdo> Defines the text direction
<big> Defines big text
<blockquote> Defines a long quotation
<center> Deprecated. Defines centered text
<cite> Defines a citation
<code> Defines computer code text

<del> Defines deleted text
<dfn> Defines a definition term
<em> Defines emphasized text
<font> Deprecated. Defines font, color, and size for text
<i> Defines italic text
<ins> Defines inserted text
<kbd> Defines keyboard text
<pre> Defines preformatted text
<q> Defines a short quotation
<s> Deprecated. Defines strikethrough text
<samp> Defines sample computer code
<small> Defines small text
<strike> Deprecated. Defines strikethrough text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<tt> Defines teletype text
<u> Deprecated. Defines underlined text
<var> Defines a variable part of a text
<xmp> Deprecated. Defines preformatted text
Forms
<form> Defines an HTML form for user input
<input /> Defines an input control
<textarea> Defines a multi-line text input control

<button> Defines a push button
<select> Defines a select list (drop-down list)
<optgroup> Defines a group of related options in a select list
<option> Defines an option in a select list
<label> Defines a label for an input element
<fieldset> Defines a border around elements in a form
<legend> Defines a caption for a fieldset element
<isindex> Deprecated. Defines a searchable index related to a document
Frames
<frame /> Defines a window (a frame) in a frameset
<frameset> Defines a set of frames
<noframes> Defines an alternate content for users that do not support frames
<iframe> Defines an inline frame
Images
<img /> Defines an image
<map> Defines an image-map
<area /> Defines an area inside an image-map
Links
<a> Defines an anchor
<link /> Defines the relationship between a document and an external resource
Lists
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dir> Deprecated. Defines a directory list

<dl> Defines a definition list
<dt> Defines a term (an item) in a definition list
<dd> Defines a description of a term in a definition list
<menu> Deprecated. Defines a menu list
Tables
<table> Defines a table
<caption> Defines a table caption
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
<col /> Defines attribute values for one or more columns in a table
<colgroup> Defines a group of columns in a table for formatting
Styles
<style> Defines style information for a document
<div> Defines a section in a document
<span> Defines a section in a document
Meta Info
<head> Defines information about the document
<title> Defines the document title
<meta> Defines metadata about an HTML document
<base /> Defines a default address or a default target for all links on a page
<basefont /> Deprecated. Defines a default font, color, or size for the text in a page

Programming
<script> Defines a client-side script
<noscript> Defines an alternate content for users that do not support client-side scripts
<applet> Deprecated. Defines an embedded applet
<object> Defines an embedded object
<param /> Defines a parameter for an object
Text property
This page deals with html tags for formatting a webpage with text and will show
how to create a headline, how to make paragraphs, how to pick fonts and change
their color and size .Use the H tag to create a headline, the h tag comes in six
flavors
HTML Headings Property

<h1>Heading 1</h1>
<h6>Heading 6</h6>
Text align
Syntax: align= [left | center | right | justify]
Example
<H5 align=left>Hello World</H5>
The FONT tag
Fonts are one of the most important visual elements of your page and if you're
like most web designers you'll want to set a few fonts in every page.
Probably the most versatile text formatting tag is the <FONT></FONT> tag the
font tag not only allows the color and size of text to be selected but also allows
specific fonts to be selected
Example of the font tag
<FONT face="arial">this is the arial font face</FONT>
<FONT size=4>size 4</FONT>

<FONT size=1>size 1</FONT
The font tag gives enough flexibility to allow html authors to specify a 'back
up' font
<FONT face="georgic, times new roman, aerial">alternative fonts</FONT>
Font styles
use the <B></B> tags to make text <B>bold</B>
use the <EM></EM> tags to <EM>emphasise text</EM>
use the <U></U> tags to <U>underline text</U>
use the <I></I> tags to make<I>italic text</I>
use the <BIG></BIG> tags to <BIG>increase the font size by +1</BIG>

the maximum font size is 7
use the <SMALL></SMALL> tags to <SMALL>decrease the font size by -1</SMALL>

the minimum font size is 1
Horizontal Rule
Here's a horizontal rule... <hr /> ...that was a horizontal rule :)
Text Formatting Tags

Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text

<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<s> Deprecated. Use <del> instead
<strike> Deprecated. Use <del> instead
<u> Deprecated. Use styles instead
Example Program
<html><body>
<center><p><b>This text is bold</b></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</center>
</body></html>
Listing Property

There are 3 different types of lists. A <ol> tag starts an ordered list, <ul> for
unordered lists, and <dl> for definition lists. Use the type and start attributes to fine
tune your lists accordingly.
Unordered lists
HTML-CODE EXPLANATION / EXAMPLE
<ul> Makes a bulleted list using the default bullet type:

<li>text</li>
<li>text</li>  text
</ul>
 text
 This is another line
<ul type="disc">
 And this is the final line
o This is another line
<ul type="circle">
o And this is the final line
 This is another line
<ul type="square">
 And this is the final line
NUMBERED LISTS
Plain numbers
Capital Letters
Small Letters
Capital Roman Numbers
Small Roman Numbers
HTML-CODEEXP EXPLANATION/ EXAMPLE
<ol><li>text</li> 1. text
<li>text</li></ol>
2. text

Starts a numbered list, first # being 5.
<ol start="5"> 5. This is one line
6. This is another line

<ol type="A"> A. This is one line
B. This is another line

<ol type="a"> a. This is one line
b. This is another line

<ol type="I"> I. This is one line
II. This is another line

<ol type="1"> i. This is one line
ii. This is another line

VII. This is one line
<ol type="I" start="7">
VIII. This is another line
Hyperlinks, Anchors, and Links

Links -- they're what made the web The Web. The ability to link from one
document to another is one of the most central features of HTML
Links, otherwise known as hyperlinks, are defined using the <a> tag -
otherwise known as the anchor element.
To create a hyperlink, you use the tag in conjunction with the href attribute
(href stands for Hypertext Reference). The value of the href attribute is the URL, or,
location of where the link is pointing to.
Hyper Link syntax:
<a href="url">Link text</a>
The element content doesn't have to be text. You can link from an image or any other
HTML element.
Example:
<a href="http://www.yahoo.com/">Visit yahoo!</a>
Image Link

In HTML, images are defined with the <img> tag. The <img> tag is empty, which
means that it contains attributes only and it has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for
"source". The value of the src attribute is the URL of the image you want to display
on your page..
To embed an image into a web page, the image first needs to exist in either .jpg, .gif,
or .png format.
Image Link syntax:
<img src="url" />
Example:
<img src="smile.gif" width="100" height="100" alt="Smile" />
Src: This is the path to the image. It can be either an absolute path, or a relative
path
Width: This specifies the width to display the image. If the actual image is wider, it
will shrink to the dimensions you specify here. Likewise, if the actual image is smaller
it will expand to your dimensions. I don't recommend specifying a different size for
the image, as it will lose quality. It's better to make sure the image is the correct size
to start with.
Height: This specifies the height to display the image. This attribute works similar to
the width
Alt: Alternate text. This specifies text to be used in case the browser/user agent
can't render the image.
E-mail Link
<a href="mailto:[email protected]?subject=Hello%20Sir">
Send Mail</a>
Example Program
<html><body><p>
This is a mail link:
<a href="mailto:[email protected]?subject=Hello%20sir">

Send Mail</a></p>
<img src="Blue hills.jpg" width="100" height="100" alt="Smile" >
</body></html>
HTML Colors
Colors are displayed combining RED, GREEN, and BLUE light.
HTML colors are defined using a hexadecimal (hex) notation for the combination of
Red, Green, and Blue color values (RGB).
The lowest value that can be given to one of the light sources is 0 (hex 00). The
highest value is 255 (hex FF).
Hex values are written as 3 double digit numbers, starting with a # sign.
Font color
Set the color of your font with color
Example:
<font color="#990000">This text is hexcolor #990000</font><br />
<font color="red">This text is red</font>
Background Color :
The background color used for web page background color.
Example: <body bgColor=Navy>
Border color:
It’s used for Image,table ., border color
HTML Tables
A table is a two dimensional matrix ,consiter od rows and coloms .Table are
intended for displaying data in coloumns on web page.Tables are defined with the
<table> tag. A table is divided into rows (with the <tr> tag), and each row is divided
into data cells (with the <td> tag). The letters td stands for "table data," which is the

content of a data cell. A data cell can contain text, images, lists, paragraphs, forms,
horizontal rules, tables, etc.
Table property
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer
Example 1:
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
Output:
row 1, cell 1 row 1, cell 2

Headings in a Table
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Output:
Heading Another Heading
Use rowspan to span multiple rows and colspan to span multiple columns.
<table border="1"> <tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th> </tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
Output

Column 1 Column 2 Column 3
Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 3 Cell 1
Table with color
<table border="1" cellpadding="10" bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th>
<th>Column 2</th> </tr>
</table>
Output
Column 1 Column 2
HTML Frames
With frames, you can display more than one HTML document in the same browser
window. Each HTML document is called a frame, and each frame is independent of
the others.
The disadvantages of using frames are:
The web developer must keep track of more HTML documents
It is difficult to print the entire page
The Frameset Tag
The <frameset> tag defines how to divide the window into frames
Each frameset defines a set of rows or columns

The values of the rows/columns indicate the amount of screen area each
row/column will occupy
Attribute Description
rows Specifies the number of rows and their height in either pixels, percentages, or
relative lengths. Default is 100%
cols Specifies the number of columns and their width in either pixels, percentages,
or relative lengths. Default is 100%
name Assigns a name to a frame. This is useful for loading contents into one frame
from another.
longdesc A long description - this can elaborate on a shorter description specified with
the title attribute.
src Location of the frame contents (for example, the HTML page to be loaded into
the frame).
noresize Specifies whether the frame is resizable or not (i.e. whether the user can resize
the frame or not).
scrolling Whether the frame should be scrollable or not (i.e. should scrollbars appear).
Possible values:
 auto
 yes
 no
frameborder Whether the frame should have a border or not. Possible values:
 1 (border)
 0 (no border)
marginwidth Specifies the margin, in pixels, between the frame's contents and it's left and
right margins.
marginheight Specifies the margin, in pixels, between the frame's contents and it's top and
bottom margins.
Example 1
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm"> </frameset>
Mixed frame set:
<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm"></frameset></frameset> </html>
Style sheet
cascading style sheets are now the standard way to define the presentation of
your HTML pages, from fonts and colours to the complete layout of a page. They are
much more efficient than using HTML on every page to define the look of your site.
CSS is becoming a more important language to know every day, so the sooner
you have a grip on this most elegant of presentational languages, the better.
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.
CSS Example
CSS declarations always ends with a semicolon, and declaration groups are
surrounded by curly brackets:
<html> <head>
<style type="text/css">
P{
color:red;
text-align:center;
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
CSS Background
CSS background properties are used to define the background effects of an

element.
CSS properties used for background effects:
background-color
background-image
background-repeat
background-attachment
background-position
Background Color
The background-color property specifies the background color of an element.
body {background-color:#b0c4de;}
Background Image
The background-image property specifies an image to use as the background of
an element.By default, the image is repeated so it covers the entire element.
body {background-image:url('paper.gif');
Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally
and vertically.Some images should be repeated only horizontally or vertically, or they
will look strange, like this:
body
{ background-image:url('gradient2.png'); }
All CSS Background Properties

Property Description Values
background Sets all the background properties in background-color

one declaration background-image
background-repeat
background-position
inherit
background-attachment Sets whether a background image is scroll

fixed or scrolls with the rest of the fixed
page inherit
background-color Sets the background color of an color-rgb

element color-hex
color-name
transparent
inherit
background-image Sets the background image for an url(URL)

element none
inherit
background-position Sets the starting position of a top left

background image top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
inherit
background-repeat Sets if/how a background image will be repeat

repeated repeat-x
repeat-y
no-repeat
inherit
Text Color
The color property is used to set the color of the text. The color can be specified
by:
name - a color name, like "red"
RGB - an RGB value, like "rgb(255,0,0)"
Hex - a hex value, like "#ff0000"
Example
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);
property Description Values
color Sets the color of a text color
direction Sets the text direction ltr

rtl
line-height Sets the distance between lines normal

number
length
letter-spacing Increase or decrease the space between normal

characters length
text-align Aligns the text in an element left

right
center
justify
text-decoration Adds decoration to text none

underline
overline
line-through
blink
text-indent Indents the first line of text in an element length

%
text-shadow none
color
length
text-transform Controls the letters in an element none

capitalize
uppercase
lowercase
unicode-bidi normal
embed
bidi-override
vertical-align Sets the vertical alignment of an element baseline

sub
super
top,text-top
middle
bottom
text-bottom
length
%
white-space Sets how white space inside an element is normal

handled pre,nowrap
word-spacing Increase or decrease the space between words normal

length

Font Families
In CSS, there are two types of font family names:generic family - a group of
font families with a similar look (like "Serif" or "Monospace")
font family - a specific font family (like "Times New Roman" or "Arial")
Example
Property Description Values
font-family Specifies the font family for text family-name

generic-family
inherit
font-size Specifies the font size of text xx-small

x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
inherit
font-style Specifies the font style for text normal

italic
oblique
inherit
font-variant Specifies whether or not a text should be normal

displayed in a small-caps font small-caps
inherit
font-weight Specifies the weight of a font normal

bold
Example Program
<html> <head>

p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
</style></head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body></html>
List
In HTML, there are two types of lists:
unordered lists - the list items are marked with bullets
ordered lists - the list items are marked with numbers or letters
Example
ul.a {list-style-type: circle;}

ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}

ol.d {list-style-type: lower-alpha;}
Values for Unordered Lists

Value Description
none No marker
disc Default. The marker is a filled circle
circle The marker is a circle
square The marker is a square
Values for Ordered Lists

Value Description
armenian The marker is traditional Armenian numbering
decimal The marker is a number
decimal-leading-zero The marker is a number padded by initial zeros (01, 02, 03, etc.)
georgian The marker is traditional Georgian numbering (an, ban, gan, etc.)
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek The marker is lower-greek (alpha, beta, gamma, etc.)
lower-latin The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
upper-latin The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
CSS Colors
CSS has several options for defining colors of both text and background areas on your pages. These options can
entirely replace the color attributes in plain HTML. In addition, you get new options that you just didn't have in plain
HTML.
Value Description
color <color>
transparent
background-color
<color>
none
background-image
url(<URL>)
repeat
repeat-x
background-repeat
repeat-y
no-repeat
scroll
fixed
<percentage>
<length>
top
background-position center
bottom
left
right
background <background-color>
<background-image>
<background-repeat>
<background-attachment>

<background-position>
color <color>
transparent
background-color
<color>
none
background-image
url(<URL>)
repeat
repeat-x
background-repeat
repeat-y
no-repeat
Example Program
<html><head>
body{
background-color:#d0e4fe;}
h1
color:orange;
text-align:center;
font-family:"Times New Roman";
font-size:20px;
}</style></head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body></html>

CSS Box Model
All HTML elements can be considered as boxes. In CSS, the term "box model" is used
when talking about design and layout.
The CSS box model is essentially a box that wraps around HTML elements, and it
consists of: margins, borders, padding, and the actual content.
The box model allows us to place a border around elements and space elements in
relation to other elements
Explanation of the different parts:
Margin - Clears an area around the border. The margin does not have a background
color, and it is completely transparent
Border - A border that lies around the padding and content. The border is affected
by the background color of the box
Padding - Clears an area around the content. The padding is affected by the
background color of the box
Content - The content of the box, where text and images appear
Example:
<html><head>
div.ex
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
</style></head>

<body>
<img src="250px.gif" width="250" height="1" /><br /><br />
<div class="ex">The line above is 250px wide.<br />
The total width of this element is also 250px.</div>
</body>
</html>
CSS Display Property
The display property specifies if/how an element is displayed, and the visibility
property specifies if an element should be visible or hidden.
Hiding an Element - display:none or visibility:hidden

Hiding an element can be done by setting the display property to "none" or the
visibility property to "hidden". However, notice that these two methods produce
different results:
Example
h1.hidden {visibility:hidden;}
Changing How an Element is Displayed
Changing an inline element to a block element, or vice versa, can be useful for
making the page look a specific way, and still follow web standards.
li {display:inline;}
Example
<html><head>
Span {
display:block;
</style> </head>
<body>
<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span></body></html>
UNIT – 2: 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
JavaScript is case sensitive
JavaScript object-oriented Programming Language
Originally called Live Script when introduced in Netscape Navigator
Programming, HTML, and JavaScript

Created in 1989 European Laboratory for Particle Physics (Geneva Switzerland).
Developed by Netscape for use in Navigator Web Browsers
Purpose
Provide an easy way to access cross-referenced documents that exist on the
internet .Purpose make web pages (documents) more dynamic and interactive
Change contents of document, provide forms and controls, animation, control web
browser window, etc.
JavaScript Two formats:

Client-side Program runs on client (browser)
Server-side Program runs on server
Proprietary to web server platform
JavaScript use
 JavaScript can be used to validate data - A JavaScript can be used to
validate form data before it is submitted to a server. This saves the server from
extra processing
 JavaScript can be used to detect the visitor's browser - A JavaScript can
be used to detect the visitor's browser, and - depending on the browser - load
another page specifically designed for that browser
 JavaScript can be used to create cookies - A JavaScript can be used to
store and retrieve information on the visitor's computer
 JavaScript 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
 An interpreted language – which no compilation steps this provides easy
development process.
 Performance- the HTML files are fairly compact and quit small.
Syntax
<html>
<body>
<script type="text/javascript">
//your script goes here
</script>
</body>
</html>
And
<script type="text/javascript" src=’path.js’> </script>
Mostly in the head section of HTML file, use script tags and then enclose in comments
Example:
<html>
<body>
document.write("Hello World!");
</script>
</body>
</html>
Elements of JavaScript
Typical programming elements:

variables, operators, expressions, statements, definition of functions
Connection to Web
built-in functions (e.g., Date())
Document Object Model = names of ‘things’, properties, methods (e.g.,
document.write)
events (e.g., onSubmit, onMouseOver)
Comments
o JavaScript supports two types of comments. Double-slashes (//) tell JavaScript
to ignore everything to the end of the line.
//document. write(‘alert’);

o Block quotes begin a comment block with a slash-asterisk (/*) and JavaScript
will ignore everything from the start of the comment block until it encounters
an asterisk-slash (*/). Block quotes are useful for temporally disabling large
areas of code, or describing the purpose of a function, or detailing the purpose
and providing credits for the script itself.
Variables
JavaScript is not a strongly typed language which means you rarely have to
concern yourself with the type of data a variable is storing, only what the variable is
storing and in JavaScript, variables can store anything, even functions.
Syntax : var <variable Name> =value

Sample program for data type:
<html><body>
x=5+5;
document.write(x);
document.write("<br />");
var a=5,b=10,c;
c=a+b;
document.write(c);
var oct=0377,x=10,res;
res=oct+x;
document.write(res);
x=5+"5";
document.write(x);
x="5"+5;
document.write(x);
</script></body>
</html>
Array
Arrays are simply an ordered stack of data items with the same data type. Using
arrays, you can store multiple values under a single name. Instead of using a
separate variable for each item, you can use one array to hold all of them.
Syntax
var arrayname = new Array(numberofelements)

Example : Array with sort Char
<html>
<body>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.sort());
</script></body>
</html>
Example : Array with sort No
<html>
<body>
function sortNumber(a, b)
return b - a;
var n = ["10", "5", "40", "25", "100", "1"];
document.write(n.sort(sortNumber));
</script></body>
</html>
Dynamic Arrays:
In many a cases we will not want to create the array with a fixed size or length.
In such cases we can create an array with out passing length. This array will
dynamically set its value as and when a new variable or entry is added
Looping Constructor
A set of statements are executed as a loop until a condition is satisfied, the condition
is based on an incremental or decremental counter. In other words "Looping
statements in javascript are used to execute the same set of code a specified number
of times"
If Statement
Use the if statement to execute some code only if a specified condition is true.
Syntax
if (condition)
{
code to be executed if condition is true
}
If...else Statement
Use the if....else statement to execute some code if a condition is true and another
code if the condition is not true.
Syntax
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
Example
<html><body>
var a=5,b=10;
if(a>b)
document.write("A is big");
}else
document.write("B is big");
} </script> </body> </html>
Switch Statement:

Use the switch statement to select one of many blocks of code to be executed.
Syntax
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}
Example
<html><body>
var d = new Date()
theDay=d.getDay()
switch (theDay)
case 1: document.write("SUNDAY")
break;
case 2: document.write("Mon Day")
break;
case 3: document.write("Tues day")
break;
default:
document.write("I'm really looking forward to this weekend!");
} </script> </body> </html>
while Loop
The while loop loops through a block of code while a specified condition is true.
Syntax
while (var<=endvalue)
{
code to be executed
}
Example
<html> <body>
i=0
while (i <= 5)
document.write("The number is " + i)
document.write("<br>")
i++
</script> </body> </html>
do...while Loop
The do...while loop is a variant of the while loop. This loop will execute the block of
code ONCE, and then it will repeat the loop as long as the specified condition is true.
Syntax
do
{
code to be executed
}
while (var<=endvalue);
Example
<script language="javascript">

var i=0;
do
document.write("Testing DO-While loop");
while(i!=0)
</script>
for Loop
The for loop is used when you know in advance how many times the script should
run.
Syntax
for(var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}
Example
<html> <body>
for (i = 0; i <= 5; i++)
document.write("The number is " + i)
document.write("<br>")
</script> </body> </html>
Function
A function contains code that will be executed by an event or by a call to the 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.
Syntax
function functionname(var1,var2,...,varX)
{
some code
}
Example
<html> <head>
function myfunction(txt)
alert(txt)
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction('Hello')" value="Call function">
</form>
</body> </html>
Function with return Statement
The return statement is used to specify the value that is returned from the function.
So, functions that are going to return a value must use the return statement.
Example

<html>
<head>
function total(numberA,numberB)
return numberA + numberB
</script>
</head>
<body>
document.write(total(2,5))
</script>
</body>
</html>
Dialog box
JavaScript supports three important types of dialog boxes. These dialog boxes can be
used to raise and alert, or to get confirmation on any input or to have a kind of input
from the users.
Alert Dialog Box
The alert() method displays an alert box with a specified message and an OK button.
Syntax
alert(message)
Example
<html>
<head>

function display()
alert("Hello! I am an alert box!!");
</script>
</head>
<body>
<input type="button" onclick="display()" value="AlertBox" />
</body>
</html>
Prompt Dialog Box
The prompt dialog box is very useful when you want to pop-up a text box to get user
input
Syntax
prompt(msg,defaultText)
Msg -Required. The message to display in the dialog
boxdefaultText-Optional. The default input value
Example
<html> <head>
function dispprompt()
var fname=prompt("Please enter your name:","Your name")
document.getElementById("msg").innerHTML="Greetings " + fname
</script>

</head>
<body>
<input type="button" onclick="dispprompt()" value="prompt box" />
<br /><br />
<div id="msg"></div>
</body>
</html>
Confirmation Dialog Box
A confirmation dialog box is mostly used to take user's consent on any option. It
displays a dialog box with two buttons: OK and Cancel.
Syntax
confirm(message)
Example
<html><head>
function display()
confirm("Do you want to continue ?")
</script> </head> <body>
<input type="button" onclick="display()" value="confirm" />
</body> </html>
UNIT – 3
JavaScript document object model

The DOM (Document Object Model) gives you generic access to most elements, their
styles and attributes in a document.
Each HTML document loaded into a browser window becomes a Document object.
The Document object provides access to all HTML elements in a page, from within a
script.
The Document object is also part of the Window object, and can be accessed through the window.document
property.
Collection Description
anchors[] Returns an array of all the anchors in the document
forms[] Returns an array of all the forms in the document
images[] Returns an array of all the images in the document
links[] Returns an array of all the links in the document
Anchors
The anchors collection returns an array of all the anchors in the current document.
Syntax
document.anchors[].property
Example
<html>
<body>
<a name=" java ">java</a><br />
<a name="c++">C++</a><br />
document.write(document.anchors.length);</script></p>
</body>
</html>
forms

The forms collection returns an array of all the forms in the current document
Syntax
document.forms[].property
Example
<html>
<body>
<form name="Form1"></form>
<form name="Form2"></form>
<p>Number of forms:
document.write(document.forms.length);
</script></p>
</body>
</html>
images
The images collection returns an array of all the images in the current document.
Syntax
document.images[].property
Example:
<html>
<body>
<img border="0" src="a.jpg" width="150" height="113" />
<img border="0" src="b.jpg" width="152" height="128" />
<p>Number of images:
document.write(document.images.length);
</script></p></body> </html>
Links
The links collection returns an array of all the links in the current document.
The links collection counts

<a href=""> tags and <area> tags.
Syntax
document.links[].property
Example
<html>
<body>
<a href="images.html">Images</a>
<p>Number of areas/links:
document.write(document.links.length);
</script>
</p>
</body>
</html>
Javascript is an Event Driven Language
Javascript is an event driven language which means your scripts react to events you
set up. Your code isn't running all the time, it simply waits until an event starts
something up! Going into all the Javascript events is beyond the scope.

Window object
The JavaScript Window Object is the highest level JavaScript object which
corresponds to the web browser window.
Using JavaScript, we can manipulate windows in a variety of ways, such as open one,
close it, reload its page, change the attributes of the new window etc.

Open method
The open() method opens a new browser window.
Syntax
window.open(URL,name,specs)
URL -pecifies the URL of the page to open

name -Specifies the target attribute or the name of the window.
specs -A comma-separated list of items.
Reload window
To reload a window, use this method:
window.location.reload()
Close Window
The closed property returns a Boolean value indicating whether a window has been
closed or not.
Syntax
window.close()
Example Window object
<html>
<head>
function openWin()
{
myWindow=window.open("","","width=200,height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");
}
function closeWin()
{
myWindow.close();
}
function Relo()
{
myWindow.location.reload()
}
</script>
</head>
<body>
<input type="button" value="Open 'myWindow'" onclick="openWin()" />
<input type="button" value="Close 'myWindow'" onclick="closeWin()" />
<input type="button" value="Reload" onclick="Relo()" />
</body>
</html>
setInterval() method
The setInterval() method calls a function or evaluates an expression at specified
intervals (in milliseconds).
1000 ms = 1 second.
Syntax
setInterval(“windowname”,millisec)
Eg:
setTimeout("alert('hi!');", 500);
Other window objects

print()Prints the content of the current window
resizeBy()Resizes the window by the specified pixels
moveBy()Moves a window relative to its current position
moveTo()Moves a window to the specified position
Navigator Object
The navigator object contains information about the browser.
Property Description
appCodeName Returns the code name of the browser
appName Returns the name of the browser
appVersion Returns the version information of the browser
cookieEnabled Determines whether cookies are enabled in the browser
platform Returns for which platform the browser is compiled
userAgent Returns the user-agent header sent by the browser to

the server
The Navigator object is designed to contain information about the version of

Netscape Navigator which is being used. However, it can also be used with Internet
Explorer. All of its properties, which are read-only, contain information about different
aspects of the browser
Navigator Syntax
navigator.appCodeName
navigator.appName
navigator.appVersion
navigator.cookieEnabled
navigator.platform
navigator.userAgent
Example
<html>
<body>
document.write("Browser CodeName: " + navigator.appCodeName);
document.write("<br /><br />");
document.write("Browser Name: " + navigator.appName);
document.write("Browser Version: " + navigator.appVersion);
document.write("Cookies Enabled: " + navigator.cookieEnabled);
document.write("Platform: " + navigator.platform);
document.write("User-agent header: " + navigator.userAgent);
</script></body>
</html>
Screen object
The screen object contains information about the visitor's screen.

There is no public standard that applies to the screen object, but all major browsers support it.
availHeight Returns the height of the screen (excluding the Windows
Taskbar)
availWidth Returns the width of the screen (excluding the Windows
Taskbar)
colorDepth Returns the bit depth of the color palette for displaying
images
height Returns the total height of the screen
pixelDepth Returns the color resolution (in bits per pixel) of the screen
width Returns the total width of the screen
Screen Syntax
screen.availHeight
screen.availWidth
screen.colorDepth
screen.height
screen.pixelDepth
screen.width
Example
<HTML>
<BODY>
document.write("Available Height: " + screen.availHeight);
document.write("</br>Available Width: " + screen.availWidth);
document.write("</br>Color Depth: " + screen.colorDepth);
document.write("</br>Total Height: " + screen.height);
document.write("</br>Color resolution: " + screen.pixelDepth);
document.write("</br>Total Width: " + screen.width);
</script>
</BODY>
</HTML>
Form Object
form object is a Browser object of JavaScript used to access an HTML form. If a user
wants to access all forms within a document then he can use the forms array.
The form object is actually a property of document object that is uniquely created by
the browser for each form present in a document.
The properties and methods associated with form object are used to access the form
fields, attributes and controls associated with forms.
Properties of Form Object:

 action  hidden
 elements[]  password
 encoding  radio
 length  reset
 method  select
 name  submit
 target  text
 button checkbox  textarea
 FileUpload
action:
This property is a read or write property and its value is a string.
elements[]:
It contains all fields and controls present in the form. The user can access any
element associated with the form by using the looping concept on the elements array.
encoding:
This property is a read or write property and its value is a string. This property helps
determine the way of encoding the form data.
length:
This denotes the length of the elements array associated with the form.
method:
This property is a read or write property and its value is a string. This property helps
determine the method by which the form is submitted.
name:
name property of form object denotes the form name.
target:
This property denotes the name of the target window to which form it is to be
submitted into.
button:
The button property of form object denotes the button GUI control placed in the form.
checkbox:
checkbox property of form object denotes the checkbox field placed in the form.
select:
select property of form object denotes the selection list object placed in the form.
submit:
submit property of form object denotes the submit button field that is placed in the
form.
text:
text property of form object denotes the text field placed in the form.
textarea:
textarea property of form object denotes the text area field placed in the form.
Example of form objet
<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">Enter box: <BR>
<INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
<INPUT TYPE="button" NAME="button" Value="Click" >
<br>
Genter
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button3" onClick=0>
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button4" onClick=0>
<br>Language know<br>
<INPUT TYPE="checkbox" NAME="check2" Value="Check2">Tamil<BR>
<INPUT TYPE="checkbox" NAME="check3" Value="Check3">English<BR>
</br>
This is Text Area
<TEXTAREA NAME="myarea" COLS="40" ROWS="5">
</TEXTAREA>
</br>
List Items
<SELECT NAME="list" SIZE="1">
<OPTION>This is item 1
<OPTION>This is item 2
</SELECT>
</br>
<FORM>
<INPUT TYPE="file" NAME="elementName">
</FORM>
</FORM>
</BODY>
</HTML>
Built-in objects
These built-in objects are available through both the client-side JavaScript and
through LiveWire (Netscape's server-side application).
The three built-in objects are: the String object, the Math object, and
the Date object. Each of these provides great functionality, and together they give
JavaScript its power as a scripting language.
The String Object
The String object is used to manipulate a stored piece of text.
String objects are created with new String().
Syntax
var txt = new String(string);
String Object Methods

Method Description
charAt() Returns the character at the specified index

charCodeAt() Returns the Unicode of the character at the specified index
concat() Joins two or more strings, and returns a copy of the joined strings
fromCharCode() Converts Unicode values to characters

indexOf() Returns the position of the first found occurrence of a specified value in a
string
lastIndexOf() Returns the position of the last found occurrence of a specified value in a
string
match() Searches for a match between a regular expression and a string, and returns
the matches
replace() Searches for a match between a substring (or regular expression) and a
string, and replaces the matched substring with a new substring
search() Searches for a match between a regular expression and a string, and returns
the position of the match
slice() Extracts a part of a string and returns a new string
split() Splits a string into an array of substrings
substr() Extracts the characters from a string, beginning at a specified start position,
and through the specified number of character
substring() Extracts the characters from a string, between two specified indices
toLowerCase() Converts a string to lowercase letters

toUpperCase() Converts a string to uppercase letters
valueOf() Returns the primitive value of a String object
Example
<html>
<body>
var str="Hello world!";
document.write("First character: " + str.charAt(0) + "<br />");
document.write("Unicode of first character: " + str.charCodeAt(0) + "<br />");
document.write(str.indexOf("Hello") + "<br />");
document.write(str.toLowerCase()+"<br />");
document.write(str.toUpperCase()+"<br />");
document.write(str.valueOf()+"<br />")
var str1="Hello ";
var str2="Dharma!";
var str3=" Have a nice day!";
document.write(str1.concat(str2,str3)+ "<br />");
document.write(String.fromCharCode(72,69,76,76,79)+ "<br />");
document.write(str.lastIndexOf("Hello") + "<br />");
var str1="The rain in SPAIN stays mainly in the plain";
var patt1=/ain/gi;
document.write(str1.match(patt1)+ "<br />");
document.write(str.replace("Microsoft", "W3Schools"));
document.write(str.search("W3SCHOOLS"));
document.write(str.substr(3)+"<br />");
document.write(str.substr(3,4));
</script>
</body>
</html>
Date Object
The Date object is used to work with dates and times.

Date objects are created with new Date().
There are four ways of instantiating a date:
var d = new Date();

var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
Method Description
getDate() Returns the day of the month (from 1-31)

getDay() Returns the day of the week (from 0-6)
getFullYear() Returns the year (four digits)
getHours() Returns the hour (from 0-23)
getMilliseconds() Returns the milliseconds (from 0-999)
getMinutes() Returns the minutes (from 0-59)
getMonth() Returns the month (from 0-11)
getSeconds() Returns the seconds (from 0-59)
getTime() Returns the number of milliseconds since midnight Jan 1, 1970
getTimezoneOffset() Returns the time difference between GMT and local time, in minutes
getUTCDate() Returns the day of the month, according to universal time (from 1-31)
getUTCDay() Returns the day of the week, according to universal time (from 0-6)
getUTCFullYear() Returns the year, according to universal time (four digits)
getUTCHours() Returns the hour, according to universal time (from 0-23)
Example
<html>
<body>
var d=new Date()
document.write(d.getDate())
document.write(".")
document.write(d.getMonth() +1)
document.write(".")
document.write(d.getFullYear())
document.write(".")
document.write(d.getHours())
</script>
</body>
</html>
Math Object

The Math object allows you to perform mathematical tasks.
Math is not a constructor. All properties/methods of Math can be called by using Math
as an object, without creating it.
Syntax
var x = Math.PI; // Returns PI
var y = Math.sqrt(16); // Returns the square root of 16
E Returns Euler's number (approx. 2.718)

LN2 Returns the natural logarithm of 2 (approx. 0.693)
LN10 Returns the natural logarithm of 10 (approx. 2.302)
LOG2E Returns the base-2 logarithm of E (approx. 1.442)
LOG10E Returns the base-10 logarithm of E (approx. 0.434)
PI Returns PI (approx. 3.14159)
SQRT1_2 Returns the square root of 1/2 (approx. 0.707)
SQRT2 Returns the square root of 2 (approx. 1.414)
abs(x) Returns the absolute value of x
acos(x) Returns the arccosine of x, in radians
asin(x) Returns the arcsine of x, in radians
atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2
radians
atan2(y,x) Returns the arctangent of the quotient of its arguments
ceil(x) Returns x, rounded upwards to the nearest integer
cos(x) Returns the cosine of x (x is in radians)
exp(x) Returns the value of Ex
floor(x) Returns x, rounded downwards to the nearest integer
log(x) Returns the natural logarithm (base E) of x
max(x,y,z,...,n) Returns the number with the highest value
min(x,y,z,...,n) Returns the number with the lowest value
pow(x,y) Returns the value of x to the power of y
random() Returns a random number between 0 and 1
round(x) Rounds x to the nearest integer
sin(x) Returns the sine of x (x is in radians)
sqrt(x) Returns the square root of x
tan(x) Returns the tangent of an angle
Example
<html>
<body>
document.write("abs"+Math.abs(7.25) + "<br />");
document.write("acos"+Math.acos(0.64) + "<br />")
document.write("asin"+Math.asin(0.64) + "<br />")
document.write("atan2"+Math.atan2(8,4)+ "<br />");
document.write("ceil"+Math.ceil(0.60) + "<br />");
document.write("cos"+Math.cos(3) + "<br />");
document.write("floor"+Math.floor(0.60) + "<br />")
document.write("log"+Math.log(1) + "<br />");
document.write("max"+Math.max(-5,10) + "<br />");
document.write("pow"+Math.pow(0,0) + "<br />");
document.write("rount"+Math.round(0.60) + "<br />");
document.write("random"+Math.random() + "<br />");
document.write("sin"+Math.sin(3) + "<br />");
document.write("sqrt"+Math.sqrt(9) + "<br />");
</script>
</body>
</html>
User Defined Object
All user-defined objects and built-in objects are descendants of an object called
Object. .
The new Operator:
The new operator is used to create an instance of an object. To create an object,
the new operator is followed by the constructor method.
Example
<html>
<head>
<title>User-defined objects</title>
var book = new Object(); // Create the object
book.subject = "C++"; // Assign properties to the object
book.author = "Balagurusami";
</script>
</head>
<body>
document.write("Book name is : " + book.subject + "<br>");
document.write("Book author is : " + book.author + "<br>");
</script>
</body>
</html>
cookies
Cookies are small amounts of data stored by the web browser. They allow you to
store particular information about a user and retrieve it every time they visit your
pages.Each user has their own unique set of cookies.
syntax
set.cookie = "name=value; expires=date; path=path; domain=domain;

secure";
name=value This sets both the cookie's name and its value.
Ex : username=AAAA
expires=date This optional value sets the date that the cookie will expire on. The
date should be in the format returned by the the toGMTString() method of
the Date object – Greenwith Mean Time(DD-MM-YY)
expires=13/06/2003 00:00:00
domain=domain This optional value specifies a domain within which the cookie
applies. Only websites in this domain will be able to retrieve the cookie
Ex : domain=google.com
secure : This optional flag indicates that the browser should use SSL when sending
the cookie to the server. This flag is rarely used.
JavaScript escape() function to encode the valuebefore storing it in the cookie.

If you do this, you will also have to use the corresponding unescape() function when
you read the cookie value.
Example
<html>
<head>

</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie();"/>
</form>
</body>
</html>

DotNet Framework
Microsoft. NET
The Microsoft. NET strategy was presented by Microsoft officials to the rest of the
world in June 2000:
 .NET is Microsoft's new Internet and Web strategy

 .NET is NOT a new operating system
 .NET is a new Internet and Web based infrastructure
 .NET delivers software as Web Services
 .NET is a framework for universal services
 .NET is a server centric computing model
 .NET will run in any browser on any platform
 .NET is based on the newest Web standards
NET Internet Standards
.NET is built on the following Internet standards:
 HTTP, the communication protocol between Internet Applications

 XML, the format for exchanging data between Internet Applications
 SOAP, the standard format for requesting Web Services
 UDDI, the standard to search and discover Web Services
NET Framework
The .NET Framework is the infrastructure for the new Microsoft .NET Platform.
The .NET Framework is a common environment for building, deploying, and running
Web Services and Web Applications.
The .NET Framework contains common class libraries - like ADO.NET, ASP.NET and
Windows Forms - to provide advanced standard services that can be integrated into a
variety of computer systems.
The .NET Framework is language neutral. Currently it supports C++, C#, Visual
Basic, JScript (The Microsoft version of JavaScript) and COBOL. Third-party languages
- like Eiffel, Perl, Python, Smalltalk, and others - will also be available for building
future .NET Framework applications.

The new Visual Studio.NET is a common development environment for the new .NET
Framework. It provides a feature-rich application execution environment, simplified
development and easy integration between a number of different development
languages.
Common Language Run Time ( CLR)
Compilers and tools expose the runtime's functionality and enable you to write code
that benefits from this managed execution environment. Code that you develop with
a language compiler that targets the runtime is called managed code; it benefits from
features such as cross-language integration, cross-language exception handling,
enhanced security, versioning and deployment support, a simplified model for
component interaction, and debugging and profiling services.
To enable the runtime to provide services to managed code, language compilers must
emit metadata that describes the types, members, and references in your code.
Metadata is stored with the code; every loadable common language runtime portable
executable (PE) file contains metadata. The runtime uses metadata to locate and load
classes, lay out instances in memory, resolve method invocations, generate native
code, enforce security, and set run-time context boundaries.
The runtime automatically handles object layout and manages references to objects,
releasing them when they are no longer being used. Objects whose lifetimes are
managed in this way are called managed data. Garbage collection eliminates memory
leaks as well as some other common programming errors. If your code is managed,
you can use managed data, unmanaged data, or both managed and unmanaged data
in your .NET Framework application. Because language compilers supply their own
types, such as primitive types, you might not always know (or need to know)
whether your data is being managed.
The common language runtime makes it easy to design components and applications
whose objects interact across languages. Objects written in different languages can
communicate with each other, and their behaviors can be tightly integrated. For
example, you can define a class and then use a different language to derive a class
from your original class or call a method on the original class. You can also pass an
instance of a class to a method of a class written in a different language. This cross-
language integration is possible because language compilers and tools that target the
runtime use a common type system defined by the runtime, and they follow the
runtime's rules for defining new types, as well as for creating, using, persisting, and
binding to types.
As part of their metadata, all managed components carry information about the
components and resources they were built against. The runtime uses this information
to ensure that your component or application has the specified versions of everything
it needs, which makes your code less likely to break because of some unmet
dependency. Registration information and state data are no longer stored in the
registry where they can be difficult to establish and maintain. Rather, information
about the types you define (and their dependencies) is stored with the code as
metadata, making the tasks of component replication and removal much less
complicated.
Language compilers and tools expose the runtime's functionality in ways that are
intended to be useful and intuitive to developers. This means that some features of
the runtime might be more noticeable in one environment than in another. How you
experience the runtime depends on which language compilers or tools you use. For
example, if you are a Visual Basic developer, you might notice that with the common
language runtime, the Visual Basic language has more object-oriented features than
before. Following are some benefits of the runtime:
 Performance improvements.
 The ability to easily use components developed in other languages.
 Extensible types provided by a class library.
 New language features such as inheritance, interfaces, and overloading for

object-oriented programming; support for explicit free threading that allows
creation of multithreaded, scalable applications; support for structured exception
handling and custom attributes.
If you use Microsoft Visual C++.NET, you can write managed code using the Managed
Extensions for C++, which provide the benefits of a managed execution environment
as well as access to powerful capabilities and expressive data types that you are
familiar with. Additional runtime features include:
 Cross-language integration, especially cross-language inheritance.

 Garbage collection, which manages object lifetime so that reference counting is
unnecessary.
 Self-describing objects, which make using Interface Definition Language (IDL)

unnecessary.
 The ability to compile once and run on any CPU and operating system that
supports the runtime.
Common Type System (CTS)

Common Type System (CTS) describes how types are declared, used and managed
in the runtime and facilitates cross-language integration, type safety, and high
performance code execution.
Common Language Specification (CLS)
The CLS is simply a specification that defines the rules to support language
integration in such a way that programs written in any language, yet can
interoperate with one another, taking full advantage of inheritance, polymorphism,
exceptions, and other features.
ASP.NET
ASP.NET is the latest version of ASP. It includes Web Services to link applications,
services and devices using HTTP, HTML, XML and SOAP.
New in ASP.NET:
 New Language Support

 Programmable Controls
 Event Driven Programming
 XML Based Components
 User Authentication
 User Accounts and Roles
 High Scalability
 Compiled Code
 Easy Configuration
 Easy Deployment
 Not ASP Compatible
 Includes ADO.NET
Asp.Net – Introduction
Asp.net is the new offering for Web developers form the Microsoft. It is not simply the
next generation of ASP. Because it has evolved from Asp, Asp.Net looks very similar
to its predecessor. But concepts like web forms, Web Services, or server controls
gives Asp.Net the power to build real Web application.
What is ASP.NET?
 ASP.NET provides services to allow the creation, deployment, and execution of

Web Applications and Web Services
 Like ASP, ASP.NET is a server-side technology
 Web Applications are built using Web Forms. ASP.NET comes with built-in Web
Forms controls, which are responsible for generating the user interface. They
mirror typical HTML widgets like text boxes or buttons. If these controls do not
fit your needs, you are free to create your own user controls.
 Web Forms are designed to make building web-based applications as easy as

building Visual Basic applications
Features of ASP.NET
 Separation of Code from HTML

To make a clean sweep, with ASP.NET you have the ability to completely
separate layout and business logic. This makes it much easier for teams of
programmers and designers to collaborate efficiently. This makes it much easier
for teams of programmers and designers to collaborate efficiently.
 Support for compiled languages
developer can use VB.NET and access features such as strong typing and
object-oriented programming. Using compiled languages also means that
ASP.NET pages do not suffer the performance penalties associated with
interpreted code. ASP.NET pages are precompiled to byte-code and Just In
Time (JIT) compiled when first requested. Subsequent requests are directed to
the fully compiled code, which is cached until the source changes.
 Use services provided by the .NET Framework

The .NET Framework provides class libraries that can be used by your
application. Some of the key classes help you with input/output, access to
operating system services, data access, or even debugging. We will go into
more detail on some of them in this module.
 Graphical Development Environment

Visual Studio .NET provides a very rich development environment for Web
developers. You can drag and drop controls and set properties the way you do
in Visual Basic 6. And you have full IntelliSense support, not only for your code,
but also for HTML and XML.
 State management
To refer to the problems mentioned before, ASP.NET provides solutions for
session and application state management. State information can, for example,
be kept in memory or stored in a database. It can be shared across Web farms,
and state information can be recovered, even if the server fails or the
connection breaks down

 Update files while the server is running
Components of your application can be updated while the server is online and
clients are connected. The Framework will use the new files as soon as they are
copied to the application. Removed or old files that are still in use are kept in
memory until the clients have finished.
 XML-Based Configuration Files

Configuration settings in ASP.NET are stored in XML files that you can easily
read and edit. You can also easily copy these to another server, along with the
other files that comprise your application.
ASP.NET Page Life Cycle Overview
When an ASP.NET page runs, the page goes through a life cycle in which it performs a
series of processing steps. These include initialization, instantiating controls, restoring and
maintaining state, running event handler code, and rendering. It is important for you to
understand the page life cycle so that you can write code at the appropriate life-cycle stage
for the effect you intend. Additionally, if you develop custom controls, you must be familiar
with the page life cycle in order to correctly initialize controls, populate control properties
with view-state data, and run any control behavior code. (The life cycle of a control is based
on the page life cycle, but the page raises more events for a control than are available for an
ASP.NET page alone.)
General Page Life-cycle Stages
In general terms, the page goes through the stages outlined in the following table. In addition to the
page life-cycle stages, there are application stages that occur before and after a request but are not specific
to a page.
Stage Description
Page request The page request occurs before the page life cycle begins. When the page is requested
by a user, ASP.NET determines whether the page needs to be parsed and compiled
(therefore beginning the life of a page), or whether a cached version of the page can be
sent in response without running the page.
Start In the start step, page properties such as Request and Response are set. At this stage,
the page also determines whether the request is a postback or a new request and sets
the IsPostBack property. Additionally, during the start step, the page's UICulture
property is set.
Page During page initialization, controls on the page are available and each control's
initialization UniqueID property is set. Any themes are also applied to the page. If the current
request is a postback, the postback data has not yet been loaded and control property
values have not been restored to the values from view state.
Load During load, if the current request is a postback, control properties are loaded with
information recovered from view state and control state.
Validation During validation, the Validate method of all validator controls is called, which sets the

IsValid property of individual validator controls and of the page.
Postback If the request is a postback, any event handlers are called.
event handling
Rendering Before rendering, view state is saved for the page and all controls. During the rendering
phase, the page calls the Render method for each control, providing a text writer that
writes its output to the OutputStream of the page's Response property.
Unload Unload is called after the page has been fully rendered, sent to the client, and is ready
to be discarded. At this point, page properties such as Response and Request are
unloaded and any cleanup is performed.
Life-cycle Events
Within each stage of the life cycle of a page, the page raises events that you can handle to run your
own code. For control events, you bind the event handler to the event, either declaratively using
attributes such as onclick, or in code.
Pages also support automatic event wire-up, meaning that ASP.NET looks for methods with particular
names and automatically runs those methods when certain events are raised. If the
AutoEventWireup attribute of the @ Page directive is set to true (or if it is not defined, since by
default it is true), page events are automatically bound to methods that use the naming convention of
Page_event, such as Page_Load and Page_Init
The following table lists the page life-cycle events that you will use most frequently. There are more
events than those listed; however, they are not used for most page processing scenarios. Instead, they are
primarily used by server controls on the ASP.NET Web page to initialize and render themselves. If you want
to write your own ASP.NET server controls, you need to understand more about these stages.
Page Event Typical Use
PreInit Use this event for the following:

 Check the IsPostBack property to determine whether this is the first time
the page is being processed.
 Create or re-create dynamic controls.
 Set a master page dynamically.
 Set the Theme property dynamically.
 Read or set profile property values.
Note
If the request is a postback, the values of the controls have not yet been
restored from view state. If you set a control property at this stage, its value
might be overwritten in the next event.

Init Raised after all controls have been initialized and any skin settings have been
applied. Use this event to read or initialize control properties.
InitComplete Raised by the Page object. Use this event for processing tasks that require all
initialization be complete.
PreLoad Use this event if you need to perform processing on your page or control before the

Load event.
After the Page raises this event, it loads view state for itself and all controls, and
then processes any postback data included with the Request instance.
Load The Page calls the OnLoad event method on the Page, then recursively does the
same for each child control, which does the same for each of its child controls until
the page and all controls are loaded.
Use the OnLoad event method to set properties in controls and establish database
connections.
Control events Use these events to handle specific control events, such as a Button control's Click
event or a TextBox control's TextChanged event.
Note
In a postback request, if the page contains validator controls, check the IsValid
property of the Page and of individual validation controls before performing any
processing.
LoadComplete Use this event for tasks that require that all other controls on the page be loaded.
PreRender Before this event occurs:
 The Page object calls EnsureChildControls for each control and for the
page.
 Each data bound control whose DataSourceID property is set calls its
DataBind method. For more information, see Data Binding Events for Data-
Bound Controls below.
The PreRender event occurs for each control on the page. Use the event to make
final changes to the contents of the page or its controls.
SaveStateComplete Before this event occurs, ViewState has been saved for the page and for all
controls. Any changes to the page or controls at this point will be ignored.
Use this event perform tasks that require view state to be saved, but that do not
make any changes to controls.
Render This is not an event; instead, at this stage of processing, the Page object calls this
method on each control. All ASP.NET Web server controls have a Render method
that writes out the control's markup that is sent to the browser.
If you create a custom control, you typically override this method to output the
control's markup. However, if your custom control incorporates only standard
ASP.NET Web server controls and no custom markup, you do not need to override
the Render method.
A user control (an .ascx file) automatically incorporates rendering, so you do not
need to explicitly render the control in code.
Unload This event occurs for each control and then for the page. In controls, use this event
to do final cleanup for specific controls, such as closing control-specific database
connections.
For the page itself, use this event to do final cleanup work, such as closing open files
and database connections, or finishing up logging or other request-specific tasks.
Note
During the unload stage, the page and its controls have been rendered, so you
cannot make further changes to the response stream. If you attempt to call a
method such as the Response.Write method, the page will throw an exception.

Structure of Asp.Net
Directives
You can use directives to specify optional settings used by the page compiler when
processing ASP.NET files. For each directive you can set different attributes. One
example is the language directive at the beginning of a page defining the default
programming language.
Code Declaration Blocks
Code declaration blocks are lines of code enclosed in <script> tags. They contain the runat=server
attribute, which tells ASP.NET that these controls can be accessed on the server and on the client.
Optionally you can specify the language for the block. The code block itself consists of the definition of
member variables and methods.
Code Render Blocks
Render blocks contain inline code or inline expressions enclosed by the character sequences shown
here. The language used inside those blocks could be specified through a directive like the one shown
before.
HTML Control Syntax
You can declare several standard HTML elements as HTML server controls. Use the element as you are
familiar with in HTML and add the attribute runat=server. This causes the HTML element to be treated
as a server control. It is now programmatically accessible by using a unique ID. HTML server controls
must reside within a <form> section that also has the attribute runat=server.
Custom Control Syntax
There are two different kinds of custom controls. On the one hand there are the controls that ship with
.NET, and on the other hand you can create your own custom controls. Using custom server controls is
the best way to encapsulate common programmatic functionality.Just specify elements as you did with
HTML elements, but add a tag prefix, which is an alias for the fully qualified namespace of the control.
Again you must include the runat=server attribute. If you want to get programmatic access to the
control, just add an Id attribute.You can include properties for each server control to characterize its
behavior. For example, you can set the maximum length of a TextBox. Those properties might have
sub properties; you know this principle from HTML. Now you have the ability to specify, for example,
the size and type of the font you use .The last attribute is dedicated to event binding. This can be used
to bind the control to a specific event
Data Binding Expression
You can create bindings between server controls and data sources. The data binding expression is
enclosed by the character sequences <%# and %>. The data-binding model provided by ASP.NET is

hierarchical. That means you can create bindings between server control properties and superior data
sources.
Server-side Object Tags
If you need to create an instance of an object on the server, use server-side object tags. When the
page is compiled, an instance of the specified object is created. To specify the object use the identifier
attribute. You can declare .NET objects using class as the identifier, and COM objects using either
progid or classid.
Server-side Include Directives
With server-side include directives you can include raw contents of a file anywhere in your ASP.NET
file. Specify the type of the path to filename with the path type attribute. Use either File, when
specifying a relative path, or Virtual, when using a full virtual path.
Server-side Comments
To prevent server code from executing, use these character sequences to comment it out. You can
comment out full blocks - not just single lines.
Asp.Net – Framework
ASP.NET is based on the fundamental architecture of .NET Framework. Visual studio provides a
uniform way to combine the various features of this Architecture. Architecture is explained form
bottom to top in the following discussion.
At the bottom of the Architecture is Common Language Runtime. NET framework common language
runtime resides on top of the operating system services. The common language runtime loads and
executes code that targets the runtime. This code is therefore called managed code. The runtime gives
you, for example, the ability for cross-language integration.

1..NET Framework provides a rich set of class libraries. These include base classes, like networking
and input/output classes, a data class library for data access, and classes for use by programming
tools, such as debugging services. All of them are brought together by the Services Framework, which
sits on top of the common language runtime.
2. ADO.NET is Microsoft’s ActiveX Data Object (ADO) model for the .NET Framework. ADO.NET is not
simply the migration of the popular ADO model to the managed environment but a completely new
paradigm for data access and manipulation.
ADO.NET is intended specifically for developing web applications. This is evident from its two major
design principles:
>>Disconnected Datasets—In ADO.NET, almost all data manipulation is done outside the context of an
open database connection.
>>Effortless Data Exchange with XML—Datasets can converse in the universal data format of the Web,
namely XML.
3. The 4th layer of the framework consists of the Windows application model and, in parallel, the Web
application model.
The Web application model-in the slide presented as ASP.NET-includes Web Forms and Web Services.
ASP.NET comes with built-in Web Forms controls, which are responsible for generating the user
interface. They mirror typical HTML widgets like text boxes or buttons. If these controls do not fit your
needs, you are free to create your own user controls. Web Services brings you a model to bind
different applications over the Internet. This model is based on existing infrastructure and applications
and is therefore standard-based, simple, and adaptable. Web Services are software solutions delivered
via Internet to any device. Today, that means Web browsers on computers, for the most part, but the
device-agnostic design of .NET will eliminate this limitation.
4. One of the obvious themes of .NET is unification and interoperability between various programming
languages. In order to achieve this; certain rules must be laid and all the languages must follow these
rules. In other words we can not have languages running around creating their own extensions and
their own fancy new data types. CLS is the collection of the rules and constraints that every language
(that seeks to achieve .NET compatibility) must follow.
5.The CLR and the .NET Frameworks in general, however, are designed in such a way that code
written in one language can not only seamlessly be used by another language. Hence ASP.NET can be
programmed in any of the .NET compatible language whether it is VB.NET, C#, Managed C++ or
JScript.NET.
Asp.Net – Controls
Types of Controls:
1. Web Controls
2. Html Controls
3. Validation Controls
4. User Controls
1. Web Controls:
Web Controls provide a more consistent object model and a higher level of abstraction than
HtmlControls
– Most HTML elements can also be represented as Web Controls on the server
– Web Control versions typically have a more consistent interface (background color is always Back
Color property whereas in HTML it may be a style attribute (span) or a property (table) )
– Web Controls also provide higher-level controls with more functionality than primitive HTML
elements (like the Calendar control)
– Web Controls may render themselves differently based on client browser capabilities
Hierarchy of Web controls
Web controls
AdRotator Listbutton Image
DataGrid RadioButtonList ImageButton
DataList CheckBoxList Label
Button DropDownList
Calendar ListBox
CheckBox Panel
RadioButton Table
HyperLink TableRow
Textbox TableCell
A sample ASP.NET Page written with Webcontrols
<%@ Page Language="C#" %>
<html>
<body>
<form runat="Server">
<asp:RadioButton Text="Click me !" runat="server" ID="rb"/></br>
<asp:CheckBox Text="Click me !" runat="server" ID="ck"/></br>
<asp:Button Text="Click me !" runat="server" ID="btn"/></br>

</form>
</body>
</html>
1.HTML Controls:
HtmlControls are server-side representations of standard HTML elements
– Any HTML element in an ASPX page marked with the runat=server attribute will become an HTML
control on the server
– All derive from HtmlControl class
– HTML elements with no distinguished server-side functionality (like div, span, etc.) are all
represented as HtmlGenericControl instances
Html Controls
Html Image HtmlForm
HtmlInputFile HtmlButton
HtmlInputHidden HtmlSelect
HtmlInputRadioButton HtmlTable
HtmlInputText HtmlTableCell
HtmlInputButton HtmlTableRow
HtmlInputCheckButton HtmlTextArea
HtmlInputImage HtmlAnchor
A sample Code for HtmlControls
HtmlAnchor
The Anchor control to programmatically control an <a> HTML element. The <a> HTML element
allows you to create a hyperlink that allows you to move to another location on the page or to another
Web page. The HtmlAnchor control must be well formed with an opening and closing tag.
<a id="anchor1" runat="server">

Remember to embed the HtmlAnchor control inside the opening and closing tags of
an HtmlForm control.
HtmlButton Button control to program against the HTML <button> element. You can provide custom
code for the ServerClick event of the HtmlButtoncontrol to specify the action performed when the
control is clicked.
The HtmlButton control renders JavaScript to the client browser. The client browser must have
JavaScript enabled for this control to function properly
Declare an HtmlButton control on your Web Forms pag
<button runat="server"> </button>
HtmlForm
Form control to program against the HTML <form> element. To take advantage of the postback
services, all Web Forms controls, whether HTML, Web, pagelet, or custom, must be nested between
well-formed opening and closing tags of the HtmlForm control. If the tags are not closed properly,
ASP.NET will not recognize the element. The element will either be ignored or a compilation error will
occur, depending on how the element is formed.
<form id="programmaticID" method=POST|GET action="srcpageURL" runat="server" >

Other controls, input forms, and so on.
</form>
HtmlTable
Table control to program against the HTML <table> element. An HtmlTable control is made up of
rows (represented by HtmlTableRowobjects) stored in the Rows collection of a table. Each row is made
up of cells (represented by HtmlTableCell objects) stored in the Cells collection of a row.
To create a table, first declare an HtmlTable control in the form on your page. Next,
place HtmlTableRow objects between the opening and closing tags of the HtmlTable control, one for
each row you want in your table. Once the rows of the table are defined,
declare HtmlTableCell objects between the opening and closing tags of each HtmlTableRow object
to create the cells of the row.
<table id="programmaticID" align=left | center | right bgcolor="bgcolor"

border="borderwidthinpixels" bordercolor="bordercolor"
cellpadding="spacingwithincellsinpixels" cellspacing="spacingbetweencellsinpixels"
height="tableheight" rows="collectionofrows" width="tablewidth"
runat="server" >
<tr>
<td></td>
</tr>
</table>
HtmlInputFile
File control to program against the HTML <input type=file> element. You can use
the HtmlInputFile control to easily design a page that allows users to upload binary or text files from
a browser to a directory that you designate on your Web server. File upload is enabled in all HTML 3.2

and later Web browsers.
<input type=file id="programmaticID" accept="MIMEencodings" maxlength="maxfilepathlength"

size="widthoffilepathtextbox" postedfile="uploadedfile"
runat="server" >
Web Server Controls

The following topics cover the ASP.NET syntax that you use when creating a Web server control in a
text or HTML editor. These topics include the properties that are shared among all Web server controls,
as well as specific properties for each control.
Label control
Used to display text in a set location on the page. Unlike static text, you can customize the displayed
text by setting the Text property.
<asp:Label id="Label1" Text="label" runat="server"/>
Button control
The Button control allows you to create a push button on the Web Forms page. There are two types of
buttons that can be created. You can create either a submit button or a command button.
<asp:Button id="SubmitButton" Text="Submit" OnClick="SubmitBtn_Click" runat="server"/>
CheckBox control
The CheckBox control creates a check box on the Web Forms page that allows the user to switch
between a true or false state. You can specify the caption to display in the control by setting
the Text property. The caption can appear either on the right or left of the check box. Set
the TextAlignproperty to specify the side that the caption appears on.
<asp:CheckBox id=Check1 runat="server" Text="CheckBox 1" AutoPostBack="True"/>
HyperLink control
Use the HyperLink control to create a link that moves you to another page or location on the page.
Specify the page or location to link to by using theNavigateUrl property. The link can either be
displayed as text or an image. To display text, either set the Text property or simply place the text
between the opening and closing tags of the HyperLink control. To display an image, set
the ImageUrl property.
<asp:HyperLink id="hyperLink1" ImageUrl="images\pict.jpg"

NavigateUrl="http://www.microsoft.com" Text="Microsoft Official Site"
Target="_new" runat="server"/>
_blank Displays the linked page in a new window without frames.

_parent Displays the linked page in the immediate frameset parent.
_self Displays the linked page in the frame with focus.
_top Displays the linked page in a the full window without frames.
Image control
Use the Image control to display an image on the Web Forms page. Setting the ImageUrl property
specifies the path to the displayed image. You can specify the text to display in place of the
image when the image is not available by setting the AlternateText property.
The ImageAlign property specifies the alignment of the image in relation to other elements on the
Web Forms page.
This control only displays an image. If you want the image to behave like a button or need to
determine the coordinates where the mouse pointer is clicked on the image, use
the ImageButton control.
<asp:Image id="image1" runat="server" AlternateText="Image Description"

ImageAlign="left" ImageUrl="pict.jpg"/>
RadioButton
The RadioButton server control creates a radio button on the Web Forms page. Specify the text to
display in the control by setting Text property. The text can appear either on the left or the right of
the radio button. Set TextAlign property to control the side that the text appears on. You can group
multiple radio buttons together if you specify the same GroupName for each RadioButton control.
Grouping radio buttons together will only allow a mutually exclusive selection from the group.
<asp:RadioButton id="RadioButton1" AutoPostBack="True|False" Checked="True|False"

GroupName="GroupName" Text="label" TextAlign="Right|Left"
OnCheckedChanged="OnCheckedChangedMethod" runat="server"/>
TextBox server control
The TextBox server control is an input control that lets the user enter text. By default,
the TextMode property is set to SingleLine, which creates a text box with only one line. You can also
set the property to MultiLine or Password. MultiLine creates a text box with more than one
line. Password creates a single-line text box that masks the value entered by the user. The display
width of the text box is determined by its Columns property. If the text box is a multiline text box,
the display height is determined by theRows property.
<asp:TextBox ID="TextBox1" runat="server" TextMode="SingleLine | MultiLine | Password"

></asp:TextBox>
CheckBoxList control
The CheckBoxList control creates a multiselection check box group that can be dynamically
generated using data binding. To specify items that you want to appear in the CheckBoxList control,
place a ListItem element for each entry between the opening and closing tags of
the CheckBoxList control.
<asp:CheckBoxList id="Check1" RepeatLayout="flow" runat="server">

<asp:ListItem>Item 1</asp:ListItem>
<asp:ListItem>Item 2</asp:ListItem>
</asp:CheckBoxList>
DropDownList control

Use the DropDownList control to create a single selection drop-down list control. You can control the
appearance of the DropDownList control by setting the BorderColor, BorderStyle,
and BorderWidth properties.
To specify the items that appear in the DropDownList control, place a ListItem element for each
entry between the opening and closing tags of theDropDownList control.
Example
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Text="a" Value="1"></asp:ListItem>
<asp:ListItem Text="b" Value="2"></asp:ListItem
</asp:RadioButtonList>
ImageButton control
Use the ImageButton control to display an image that responds to mouse clicks. Specify the image to
display in the control by setting the ImageUrlproperty.
Both the Click and Command events are raised when the ImageButton control is clicked.
<asp:ImageButton id="ImageButton1" ImageUrl="string" Command="Command"

CommandArgument="CommandArgument" CausesValidation="true | false"
OnClick="OnClickMethod" runat="server"/>
the ListBox control
Use the ListBox control to create a list control that allows single or multiple item selection. Use
the Rows property to specify the height of the control. To enable multiple item selection, set
the SelectionMode property to ListSelectionMode.Multiple.
To specify the items that you want to appear in the ListBox control, place a ListItem element for
each entry between the opening and closing tags of theListBox control.
<asp:ListBox ID="ListBox1" runat="server">

<asp:ListItem Value="2">b</asp:ListItem>
<asp:ListItem Value="1">a</asp:ListItem>
</asp:ListBox> </div>
The DataGrid control

The DataGrid control renders a tabular, data-bound grid. This control allows you to define various
types of columns to control the layout of the cell contents of the grid (bound columns, template
columns) and add specific functionality (such as edit button columns, hyperlink columns, and so on).
The control also supports a variety of options for paging through data.
The DataGrid control displays the fields of a data source as columns in a table. Each row in
the DataGrid control represents a record in the data source. The DataGrid control supports selection,
editing, deleting, paging, and sorting.
Syntex
<asp:DataGrid ID="DataGrid1" runat="server"> </asp:DataGrid>

The order that the columns are displayed in the DataGrid control is controlled by the order that the
columns appear in the Columnscollection. Although you can programmatically change the order of the
columns by manipulating the Columns collection, it is easier to list the columns in the desired display
order.
Explicitly declared columns can be used in conjunction with automatically generated columns. When
using both, explicitly declared columns will be rendered first, followed by the automatically generated
columns. Automatically generated columns are not added to theColumns collection.
Example
<%@ Import Namespace="System.Data.SqlClient" %>
<Script Runat="Server">
Sub Page_Load
Dim conNorthwind As SqlConnection
Dim cmdSelect As SqlCommand
conNorthwind=New SqlConnection( "Server=localhost;UID=sa;PWD=secret;Database=Northwind" )
cmdSelect = New SqlCommand( "Select * From Employees", conNorthwind )
conNorthwind.Open()
dgrdEmployees.DataSource = cmdSelect.ExecuteReader()
dgrdEmployees.DataBind()
conNorthwind.Close()
End Sub
</Script>
<html><head><title>ExpertDataGrid.aspx</title></head>
<body><asp:DataGrid ID="dgrdEmployees" Runat="Server" /></body></html>
Repeater control
Use the Repeater control to create a basic templated data-bound list.

The Repeater control has no built-in layout or styles; you must explicitly declare all
HTML layout, formatting, and style tags within the control's templates.
The Repeater control is different from other data list controls in that it allows you to
place HTML fragments in its templates. This allows you to create a complex HTML
structure, such as a table. For example, to create a list within an HTML table, start
the table by placing the <table> tag in theHeaderTemplate. Next, create the rows
and columns of the table by placing <tr> tags, <td> tags, and data-bound items in
the ItemTemplate. If you want a different appearance for alternating items in the
table, create an AlternatingItemTemplate with the same contents as
the ItemTemplate, except with a different style specified. Finally, complete the table
by placing the </table> tag in the FooterTemplate.
<asp:Repeater id="Repeater1"
DataSource="<% databindingexpression %>"
runat=server>
<HeaderTemplate>
Header template HTML
</HeaderTemplate>
<ItemTemplate>
Item template HTML
</ItemTemplate>
<AlternatingItemTemplate>
Alternating item template HTML
</AlternatingItemTemplate>
<SeparatorTemplate>
Separator template HTML
</SeparatorTemplate>
<FooterTemplate>
Footer template HTML
</FooterTemplate>
<asp:Repeater>

UNIT – 5:
Cookies Overview
Cookies provide a means in Web applications to store user-specific information. For example, when a
user visits your site, you can use cookies to store user preferences or other information. When the
user visits your Web site another time, the application can retrieve the information it stored earlier.
What Are Cookies?
A cookie is a small bit of text that accompanies requests and pages as they go between the Web
server and browser. The cookie contains information the Web application can read whenever the user
visits the site.
For example, if a user requests a page from your site and your application sends not just a page, but
also a cookie containing the date and time, when the user's browser gets the page, the browser also
gets the cookie, which it stores in a folder on the user's hard disk.
Later, if user requests a page from your site again, when the user enters the URL the browser looks on
the local hard disk for a cookie associated with the URL. If the cookie exists, the browser sends the
cookie to your site along with the page request. Your application can then determine the date and time
that the user last visited the site. You might use the information to display a message to the user or
check an expiration date.
Cookies are associated with a Web site, not with a specific page, so the browser and server will
exchange cookie information no matter what page the user requests from your site. As the user visits
different sites, each site might send a cookie to the user's browser as well; the browser stores all the
cookies separately.
Cookies help Web sites store information about visitors. More generally, cookies are one way of
maintaining continuity in a Web application—that is, of performing state management. Except for the
brief time when they are actually exchanging information, the browser and Web server are
disconnected. Each request a user makes to a Web server is treated independently of any other
request. Many times, however, it's useful for the Web server to recognize users when they request a
page. For example, the Web server on a shopping site keeps track of individual shoppers so the site
can manage shopping carts and other user-specific information. A cookie therefore acts as a kind of
calling card, presenting pertinent identification that helps an application know how to proceed.
Cookies are used for many purposes, all relating to helping the Web site remember users. For
example, a site conducting a poll might use a cookie simply as a Boolean value to indicate whether a
user's browser has already participated in voting so that the user cannot vote twice. A site that asks a
user to log on might use a cookie to record that the user already logged on so that the user does not
have to keep entering credentials.
You can add cookies to the Cookies collection in a number of ways. The following example shows two
methods to write cookies:
Visual Basic
Response.Cookies("userName").Value = "patrick"
Response.Cookies("userName").Expires = DateTime.Now.AddDays(1)
Dim aCookie As New HttpCookie("lastVisit")

aCookie.Value = DateTime.Now.ToString()
aCookie.Expires = DateTime.Now.AddDays(1)
Response.Cookies.Add(aCookie)
ADO .NET
Most applications need data access at one point of time making it a crucial component when working
with applications. Data access is making the application interact with a database, where all the data is
stored. Different applications have different requirements for database access. ASP.NET uses ADO
.NET (Active X Data Object) as it's data access and manipulation protocol which also enables us to
work with data on the Internet.
Advantages of ADO.Net
 ADO.NET Does Not Depend On Continuously Live Connections

 Database Interactions Are Performed Using Data Commands
 Data Can Be Cached in Datasets
 Datasets Are Independent of Data Sources
 Data Is Persisted as XML
 Schemas Define Data Structures
OLEDB
The dot net framework data provider for OLEDB provides connectivity with the OLEDB supported
database management systems. It is the recommended middle tier for the SQL Server 6.5 or earlier
and Microsoft Access Database. It is a general data provider. You can also use it to connect with the
SQL Server or Oracle Database Management Systems. The classes for this provider are present in the
System.Data.OleDBClient namespace.
ADO.NET - Data Architecture

Data Access in ADO.NET relies on two components: DataSet and Data Provider.
Dataset
The dataset is a disconnected, in-memory representation of data. It can be considered as a local copy
of the relevant portions of the database. The DataSet is persisted in memory and the data in it can be
manipulated and updated independent of the database. When the use of this DataSet is finished,
changes can be made back to the central database for updating. The data in DataSet can be loaded

from any valid data source like Microsoft SQL server database, an Oracle database or from a
Microsoft Access database.
Data Provider
The Data Provider is responsible for providing and maintaining the connection to the database. A
DataProvider is a set of related components that work together to provide data in an efficient and
performance driven manner. The .NET Framework currently comes with two DataProviders: the
SQL Data Provider which is designed only to work with Microsoft's SQL Server 7.0 or later and the
OleDb DataProvider which allows us to connect to other types of databases like Access and Oracle.
Each DataProvider consists of the following component classes:
The Connection object which provides a connection to the database

The Command object which is used to execute a command
The DataReader object which provides a forward-only, read only, connected recordset
The DataAdapter object which populates a disconnected DataSet with data and performs update
Data access with ADO.NET can be summarized as follows:
A connection object establishes the connection for the application with the database. The command
object provides direct execution of the command to the database. If the command returns more than a
single value, the command object returns a DataReader to provide the data. Alternatively, the
DataAdapter can be used to fill the Dataset object. The database can be updated using the command
object or the DataAdapter.

Component classes that make up the Data Providers
The Connection Object
The Connection object creates the connection to the database. Microsoft Visual Studio .NET provides
two types of Connection classes: the SqlConnection object, which is designed specifically to connect to
Microsoft SQL Server 7.0 or later, and the OleDbConnection object, which can provide connections to a
wide range of database types like Microsoft Access and Oracle. The Connection object contains all of
the information required to open a connection to the database.
The Command Object
The Command object is represented by two corresponding classes: SqlCommand and OleDbCommand.
Command objects are used to execute commands to a database across a data connection. The
Command objects can be used to execute stored procedures on the database, SQL commands, or
return complete tables directly. Command objects provide three methods that are used to execute
commands on the database:
ExecuteNonQuery: Executes commands that have no return values such as INSERT, UPDATE or
DELETE
ExecuteScalar: Returns a single value from a database query
ExecuteReader: Returns a result set by way of a DataReader object
The DataReader Object
The DataReader object provides a forward-only, read-only, connected stream recordset from a
database. Unlike other components of the Data Provider, DataReader objects cannot be directly
instantiated. Rather, the DataReader is returned as the result of the Command object's ExecuteReader
method. The SqlCommand.ExecuteReader method returns a SqlDataReader object, and the
OleDbCommand.ExecuteReader method returns an OleDbDataReader object. The DataReader can
provide rows of data directly to application logic when you do not need to keep the data cached in
memory. Because only one row is in memory at a time, the DataReader provides the lowest overhead
in terms of system performance but requires the exclusive use of an open Connection object for the
lifetime of the DataReader.
The DataAdapter Object
The DataAdapter is the class at the core of ADO .NET's disconnected data access. It is essentially the
middleman facilitating all communication between the database and a DataSet. The DataAdapter is
used either to fill a DataTable or DataSet with data from the database with it's Fill method. After the
memory-resident data has been manipulated, the DataAdapter can commit the changes to the
database by calling the Update method. The DataAdapter provides four properties that represent
database commands:
SelectCommand
InsertCommand
DeleteCommand
UpdateCommand
When the Update method is called, changes in the DataSet are copied back to the database and the
appropriate InsertCommand, DeleteCommand, or UpdateCommand is executed.
Internet Information Services (IIS) - formerly called Internet Information

Server - is a web server application and set of feature extension modules created by
Microsoft for use with Microsoft Windows. It is the world's second most popular web server in
terms of overall websites behind the industry leader Apache HTTP Server.
Internet Information Services is used to make your computer a web server. If we want to
have a web server for developing dynamic website or want to publish website on our own
server then we install the IIS. IIS is used on windows plate form.
IIS takes request from user and executes the required files and sends result back to the user.
IIS server also provides the services of SMTP (Simple Mail Transport Protocol). We can send
emails using SMTP. FrontPage server extensions are also the part of IIS

IIS Features
IIS 7 is built on a modular architecture. Modules, also called extensions, can be added or
removed individually so that only modules required for specific functionality have to be
installed. IIS 7 includes native modules as part of the full installation. These modules are
individual features that the server uses to process requests and include the following:
HTTP modules - Used to perform tasks specific to HTTP in the request-processing pipeline,
such as responding to information and inquiries sent in client headers, returning HTTP errors,
and redirecting requests.
Security modules - Used to perform tasks related to security in the request-processing

pipeline, such as specifying authentication schemes, performing URL authorization, and
filtering requests.
Content modules - Used to perform tasks related to content in the request-processing

pipeline, such as processing requests for static files, returning a default page when a client
does not specify a resource in a request, and listing the contents of a directory.
Compression modules - Used to perform tasks related to compression in the request-

processing pipeline, such as compressing responses, applying Gzip compression transfer
coding to responses, and performing pre-compression of static content.
Caching modules - Used to perform tasks related to caching in the request-processing

pipeline, such as storing processed information in memory on the server and using cached
content in subsequent requests for the same resource.

Logging and Diagnostics modules - Used to perform tasks related to logging and diagnostics
in the request-processing pipeline, such as passing information and processing status to
HTTP.sys for logging, reporting events, and tracking requests currently executing in worker
E-mail [Electronic mail]
E-mail is one of the most common and reliable methods of communication for both personal and
business purposes. It also plays an important role in each and every Web site. This role will be in the
type of automated e-mails from the server after posting information from a form. You may have
noticed these types of e-mails while registering on a site.
The .NET Framework makes the task of sending email from a Web page relatively simple. In order to
send an email from an ASP.NET Web page you need to use the SmtpMail class found in
the System.Web.Mail namespace, which contains a static method Send.
We are using System.Web.Mail.SmtpMail to send email in dotnet 1.1 which is obsolete in 2.0.
The System.Net.Mail.SmtpClient Class will provide us the same feature as that of its predecessor.
This article explains how to use System.Net.Mail namespace to send emails.
Sending Email
The namespace that needs to be imported to send an email is the System.Web.Mail namespace. We
use the SmtpMail and MailMessage classes of this namespace for this purpose. The MailMessage class
provides properties and methods for constructing an email message
The following code shows how to add an attachment to an email.
Using System.IO;
Using System.Web.Mail;
MailAttachment ma=new MailAttachment("c:\sample.txt");

MailMessage mm=new MailMessage();
mm.To ="[email protected]";
mm.From="[email protected]";
mm.Body ="Attachment";
mm.Subject="Check out the attached text file";
mm.Attachments.Add(ma);
SmtpMail.SmtpServer="mail.programmersheaven.com";

SmtpMail.Send(mm);
Request / Response Objects
Because of ASP.NET’s improved object model, much of the functionality of the Request and
Response objects has been deprecated. There remain other uses for these objects. You can
work with cookies, redirect users, check browser capabilities and even send binary
information down the output stream.
QueryString
The QueryString collection is used to retrieve the variable values in the HTTP query string.
The HTTP query string is specified by the values following the question mark (?), like this:
<a href= "test.asp?txt=this is a query string test">Link with a query string</a>
The line above generates a variable named txt with the value "this is a query string test".
Query strings are also generated by form submission, or by a user typing a query into the
address bar of the browser.
Request.QueryString(variable)[(index)|.Count]
Form Collection
The Form collection is used to retrieve the values of form elements from a form that uses the
POST method.
Syntax
Request.Form(element)[(index)|.Count]
Example:
Response.Write(Request.Form("color")(i) & "<br />")
ServerVariables Collection
The ServerVariables collection is used to retrieve the server variable values.
Syntax
Request.ServerVariables (server_variable)
Example
response.write(x & "<br />")

ASP.NET Security
First, let’s establish what we mean by authentication, authorization, and impersonation.

(We’ll introduce them here but talk about each in more detail later in this chapter.) These
terms can be confusing, so let’s define them in a more concrete way by using the metaphor
of securing an office building.
Authentication is simply establishing the identity of the user. In the secure office building,
every person must have an ID badge. Each person who works in the building might be issued
a cardkey or badge to display, and a visitor might be asked to wear a temporary ID.
Authorization is a set of rights granted to particular users. Once the ID is established

through authentication, security isn’t improved beyond the ability to log an individual’s
actions unless we enforce that only certain users can access certain resources. In the secure
office building, we might limit specified groups to accessing only certain parts of the building.
For example, only those individuals working on a top-secret project would be authorized to
enter the project lab.
Impersonation is assuming the identity of someone else. In our example, impersonation

would be using the cardkey issued for someone else’s authentication. When impersonating,
all actions appear to be carried out by the assumed identity.
Windows Authentication Provider ASP.NET uses Windows authentication in conjunction

with IIS authentication. Authentication is performed by IIS in one of three ways: basic,
digest, or Integrated Windows Authentication. When IIS authentication is complete, ASP.NET
uses the authenticated identity to authorize access.
Forms Authentication Provider A system by which unauthenticated requests are

redirected to an HTML form using HTTP client-side redirection. The user provides credentials
and submits the form. If the application authenticates the request, the system issues a form
that contains the credentials or a key for reacquiring the identity. Subsequent requests are
issued with the form in the request headers; they are authenticated and authorized by an
ASP.NET handler using whatever validation method the application developer specifies.
Passport Authentication Provider Centralized authentication service provided by

Microsoft that offers a single logon and core profile services for member sites.
Syntax
<configuration>
<system.web>
<authentication
mode = " [ Windows | Forms | Passport | None ] ">
</authentication>
</system.web>
</configuration>

SSL Secured
This can be a requirement because SSL increases the CPU load on the web server and can
limit scalability. Often you need SSL only for a small subset of an application. On the other
hand SSL is not the "CPU killer" as sometime stated. IIS6 also support SSL accelerators that
allow to off-load the crypto operations to specialized CPUs.
IMO - in many cases it is totally OK to enable SSL protection for the whole application which
will save you from some headaches. But if you want a partitioned application, you have to
take several things into account
In the case of Forms authentication, the requireSSL attribute also checks if the user is
logging in from an SSL connection before calling FormsAuthentication.SetAuthCookie
(something you have to check yourself if you are issuing tickets manually).
More information refers your Book.
ALL THE BEST

Web Technology

Uploaded by

Copyright:

Available Formats

Web Technology

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technology

Uploaded by

Copyright:

Available Formats

WEB TECHNOLOGY

BOOKS FOR STUDY AND REFERENCES:

1. Bayross, Web Enable Commercial Application Development Using HTML,

Created by K.Dharmarajan M.Sc, M.Phil., Lecturer ,Vels’s College, Chennai-117 1

ARPANET : Advanced Research Projects Agency Network (1969)

A network of networks, joining many government, university and private

Internet service provider (ISP), also sometimes referred to as an Internet

WWW : World Wide Web Created 1989

The internet consists of two types of computer SERVER and CLIENT

 Computer which offer information of be read are called Server

Client-server computing or networking is a distributed application architecture

A domain is logical grouping of computers on a network. It may include multiple

com edu gov in t m il net o rg

 com ... for commercial entities

 gov ... for non-military, United States federal government instititutions

 mil ... for United States military organizations

 org ... for non-profit organizations

Uniform Resource Locator (URL)

Protocol ® Hyper Text Transfer Protocol (HTTP)

Domain Name ® or Internet Protocol (IP) address

Created by K.Dharmarajan M.Sc, M.Phil., Lecturer ,Vels’s College, Chennai-117 3

index. (s) htm(l) or default.(s)htm(l)

TCP/IP is an abbreviation for Transmission Control Protocol/Internet Protocol.

Application (process-to-process) Layer: This is the scope within which

Transport (host-to-host) Layer: The Transport Layer constitutes the networking

Internet used in business, education, Marketing, sales , research, online

Created by K.Dharmarajan M.Sc, M.Phil., Lecturer ,Vels’s College, Chennai-117 4

HTML stands for Hyper Text Markup Language

 HTML documents are also called web pages

 The text between <h1> and </h1> is displayed as a heading

 The text between <p> and </p> is displayed as a paragraph

HTML Element Syntax

Created by K.Dharmarajan M.Sc, M.Phil., Lecturer ,Vels’s College, Chennai-117 5

 Some HTML elements have empty content

 Empty elements are closed in the start tag

 Most HTML elements can have attributes

<!DOCTYPE> Defines the document type

<html> Defines an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<p> Defines a paragraph

<br /> Inserts a single line break

<hr /> Defines a horizontal line

Defines a comment

<acronym> Defines an acronym

<abbr> Defines an abbreviation

<address> Defines contact information for the author/owner of a document

<b> Defines bold text

<bdo> Defines the text direction

<big> Defines big text

<blockquote> Defines a long quotation

<center> Deprecated. Defines centered text

<cite> Defines a citation

<code> Defines computer code text

Created by K.Dharmarajan M.Sc, M.Phil., Lecturer ,Vels’s College, Chennai-117 6

<dfn> Defines a definition term

<em> Defines emphasized text

<font> Deprecated. Defines font, color, and size for text

<i> Defines italic text