UNIT - I

InternetBasic:

The internet begin 1969, as an four computer network called ARPAnet which was
designed by the U.S. Defense Departmentso thatresearch scientistscould communicate

.In approximate two year, ARPAnet grew to about two-dozen sites and by
1981,consisted of more then two hundred sitesin 1990, ARPAnetwasofficially disbanded and
the network, which now consisted of hundred sits, came to be know asthe 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 WideWeb since 1989, and its use has
increased steadily over theyears.Today there are millions of Websiteson 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 beread 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

The top level domains

com ... for commercial entities

edu ... for four-year educational institutions
gov ...for non-military,UnitedStatesfederalgovernmentinstititutions
mil ... for United States military organizations

net ... fornetworkoperations and Internet Service Providers (ISP)

org ... for non-profit organizations

Uniform Resource Locator (URL)

Consistsof4parts:

Protocol Hyper Text Transfer Protocol

(HTTP) Domain Name orInternet Protocol (IP)
address Directory

Filename

Specificdocumentfilename

index. (s) htm(l) ordefault.(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 Layerhas the task of exchanging datagram
across network boundaries. It is therefore also referred to as the layer that establishes
internetworking; indeed, itdefinesand establishesthe Internet

Link Layer: This layerdefines 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.

InternetUse:

Internetusedinbusiness, 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 iteasier for scientist’s atdifferentuniversities 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 mark up tags to describe webpages

HTML Tags

HTML mark up tags are usually called HTML tags

HTML tags are keywords surrounded byangle 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=WebPages

 HTML documents describe web pages

HTML documentscontain HTML tagsand plain text

HTML documentsarealsocalled 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 browserdoes not display the HTML tags,
butuses the tags to interpretthe contentof the page

<html>

<body>

<h1>MyFirstHeading</h1>

<p>Myfirstparagraph</p></body></html>

ExampleExplained

The text between <html> and </html> describestheweb page

• The text between <body> and </body> isthevisiblepagecontent

The textbetween <h1> and </h1> isdisplayed asa heading

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

HTMLElementSyntax

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

•
<acronym> Defines an acronym
An
<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 along quotation
<center> Deprecated. Defines centered text
<cite> Define sacitation
<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 key board text
<pre> Defines preformatted text
<q> Defines a short quotation
<s> Deprecated. Defines strike through text
<samp> Defines sample computer code
<small> Defines small text
<strike> Deprecated. Defines strike through text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<tt> Defines tele type text
<u> Deprecated. Defines underlined text
<var> Defines a variable part of a text
<xmp> Deprecated. Defines preformatted text
Forms
<form> DefinesanHTMLformforuserinput
HTML element ends with an end tag / closing tag
• The element content is every thing between the start and the end tag
• Some HTML elements have empty content
• Empty elementsare 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

<input/> Defines an input control

<textarea> Defines a multi-line text input control
<button> Defines a push button
<select> Defines a select list (drop-downlist)
<optgroup> Defines a group of related options in as elect list
<option> Defines an option in as elect list
<label> Definesa label for an input element
<fieldset> Defines a border around elements in a form
<legend> Defines a caption for a field set element
<isindex> Deprecated. Defines a search able index related to a
document
Frames
<frame/> Defines a window (aframe) 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 are a 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
<table> Defines a table
<ol> Defines an ordered list
<caption> Defines at able caption
<li> Defines a list item
<th> Defines a header cell in a table
<dir> Deprecated. Defines a directory list
<tr> Defines a row in a table
<dl> Defines a definition list
<td> Defines a cell in a table
<dt> Defines a term (an item) in a definition list
<thead> Groups the header content in a table
<dd> Defines a description of a termin a definition list
<tbody> Groups the body content in a table
<menu> Deprecated. Defines a menulist
<tfoot> Groups the footer content in a table
Tables
<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
MetaInfo
<head> Defines information about the document
<title> Defines the document title
<meta> Defines meta data 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
 Textproperty

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
andsize.UsetheHtagtocreateaheadline,theh tagcomesin six flavors

HTMLHeadingsProperty

<h1>Heading1</h1>

<h6>Heading6</h6>

Text align

Syntax: align= [left | center| right | justify]

Example

<H5align=left>HelloWorld</H5>

TheFONTtag

Fonts are one of the most important visual elements of yourpage and if you're like
mostweb designersyou'llwantto seta few fontsin every page.

Probably the mostversatile textformatting tag isthe <FONT></FONT> tag the fonttag
notonly allowsthecolor and sizeoftexttobeselected butalsoallowsspecific fonts to be selected

Example of the font tag

<FONTface="arial">thisisthearialfontface</FONT>

<FONTsize=4>size4</FONT>

<FONT size=3>size3</FONT>

<FONTsize=2>size2</FONT>

<FONTsize=1>size 1</FONT

The font tag gives enough flexibility to allow html authors to specify a 'back up'
font

<FONTface="georgic,times new roman,aerial">alternativefonts</FONT>

 Font styles

usethe<B></B>tagstomaketext<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>tagstomake<I>italictext</I>

use the<BIG></BIG>tagsto<BIG>increasethefontsizeby+1</BIG>

the maximum font size is 7

use the<SMALL></SMALL>tagsto<SMALL>decreasethefontsizeby-1</SMALL>

the minimum font size is 1

HorizontalRule

Here's a horizontal rule...<hr/>...that was a horizontal rule:)

TextFormattingTags

Description
Tag
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small ltext
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines super scripted text
<ins> Defines inserted text
<del> Defines deleted text
<s> Deprecated. Use <del> instead
<strike> Deprecated. Use <del> instead
<u> Deprecated.Use styles instead

ExampleProgram

<html>

<body>
 <center><p><b>Thistextisbold</b></p>

<p><big>Thistextisbig</big></p>

<p><i>Thistextisitalic</i></p>

<p><code>Thisiscomputeroutput</code></p>

<p>Thisis_subscriptand^superscript</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.Usethetypeandstartattributestofinetuneyour lists accordingly.

Unordered lists

HTML-CODE EXPLANATION/EXAMPLE
<ul> Makes a bulleted list using the default bullet type:

<li>text</li> text text

<li>text</li>

</ul>
This is another line

<ultype="disc"> And this is the final line

This is another line

<ultype="circle"> And this is the final line

This is another line

<ultype="square"> And this is the final line

NUMBERED LISTS
 Plain numbers
CapitalLetters
Small Letters
CapitalRomanNumbers
Small Roman Numbers
HTML-CODE EXP EXPLANATION/EXAMPLE

<ol><li>text</li> 1. text
2. text
<li>text</li></ol>
Starts a numbered list, first # being 5.

<olstart="5"> 5. This is one line

6. This is another line

<oltype="A"> 1. This is one line

2. This is another line

<oltype="a"> 1. This is one line

2. This is another line

<oltype="I"> I. This is one line

II. This is another line

<oltype="1"> i.This is one line

i.This is another line

VII.This is one line

<oltype="I"start="7"> VIII.This is another line

Hyperlinks, Anchors, and Links

Links -- they're what made the web The Web. The abilityto linkfromone 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
forHypertext Reference). The value of the href attribute is the URL, or, location of where the
link is pointing to.
 Hyper Link syntax:

<ahref="url">Linktext</a>

The element content doesn't have to be text. You can link from an image orany other
HTML element.

Example:

<ahref="http://www.yahoo.com/">Visityahoo!</a>Image Link

Graphics to HTML:

In HTML, images are defined with the <img> tag. The <img> tag is empty, which
means thatitcontainsattributesonly and ithasno 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 webpage, the image first needs to exist in either .jpg,.gif,or.png format.

ImageLinksyntax:

<imgsrc="url"/>

Example:

<imgsrc="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 r elative 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 similarto the
width

Alt: Alternate text. This specifies text to be used in case the browser/useragent can't
render the image.

E-mail Link

<ahref="mailto:[email protected]?subject=Hello%20Sir"> Send Mail</a>

ExampleProgram
 <html><body>
<p>This is a mail
link:

<ahref="mailto:[email protected]?subject=Hello%20sir">
Send Mail</a></p>

<imgsrc="Bluehills.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 forthe combination of Red,
Green, and Blue color values (RGB).

The lowestvalue thatcan be given to one of the lightsources is 0 (hex 00). The highest
value is 255 (hex FF).

Hexvaluesarewrittenas3doubledigitnumbers, starting with a # sign.

Font color

Set the colorof yourfont with color

Example:

<font color="#990000">This text is hex color#990000</font><br/>

<font color="red">This text is red</font>

Background Color:

The background color used for webpage background color.

Example: <body bgColor=Navy>

Bordercolor:

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 datain coloumnson web page.Tablesaredefined 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

Example1:

<tableborder="1">
<tr>
<td>row1,cell1</td>
<td>row1,cell2</td>
</tr>
<tr>
<td>row2,cell1</td>
<td>row2,cell2</td>
</tr>
</table>
Output:
row1,cell1 row1,cell2
row2,cell1 row2,cell2

Headings in a Table

<tableborder="1">
<tr>
<th>Heading</th>
<th>AnotherHeading</th>
 </tr>
<tr>
<td>row1,cell1</td>
<td>row1,cell2</td>
</tr>
<tr>
<td>row2,cell1</td>
<td>row2,cell2</td>
</tr>
</table>

Output:
Heading Another
Heading
row1,cell1 row1,cell2
row2,cell1 row2,cell2

Use row span to span multiple rows and col span to span multiple columns.

<table border="1"><tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th></tr>
<tr><tdrowspan="2">Row1Cell1</td>
<td>Row1Cell2</td><td>Row1Cell3</td></tr>
<tr><td>Row2Cell2</td><td>Row2Cell3</td></tr>
<tr><tdcolspan="3">Row3Cell1</td></tr>
</table>

Output

Column1 Column2 Column3

Row1Cell1 Row1Cell2 Row1Cell3
Row2Cell2 Row2Cell3
Row3Cell1

Table with color

 <tableborder="1"cellpadding="10"bgcolor="rgb (0,255,0)">
<tr>
<th>Column1</th>
<th>Column2</th></tr>
<tr><td>Row1Cell1</td><td>Row1Cell2</td></tr>
<tr><td>Row2Cell1</td><td>Row2Cell2</td></tr>
</table>

Output
Column1 Column2

Row1Cell1 Row1Cell2

Row2Cell1 Row2Cell2

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 developermust keep trackof more HTML documents it is difficult to print
the entire page

The Frame set Tag:

The <frameset> tag defines how to divide the window into

frames each frame set 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 I neither

pixels, percentages, nor relative lengths. Default is 100%

cols Specifiesthenumberofcolumnsandtheirwidthineitherpixels,
percentages, or relative lengths. Default is 100%
name Assigns anameto aframe.This is usefulforloadingcontents
into oneframe from another.

longdesc Alongdescription- this cane laborate on a shorter description

specified with the title attribute.

src Locationof the frame contents (for example, the HTMLpage

to be loadedinto the frame).

noresize Specifies whetherthe frame is resizable ornot (i.e.whetherthe

usercanresize the frame or not).

scrolling Whether the frame should be scrollable or not (i.e.should

scroll bars appear). Possible values:

auto
yes
no

frameborder Whetherthe frame shouldhave a borderornot.Possible

values: 1 (border)
(noborder)

marginwidth
Specifiesthemargin,in pixels,between the
frame'scontentsandit'sleftand right margins.
marginheight Specifies themargin,in pixels, between the frame's contents
andit's topand bottom margins.
Example 1
<framesetcols="25%,75%">
<framesrc="frame_a.htm">
<framesrc="frame_b.htm"></frameset>

Mixed frame set:

<html>
<framesetrows="50%,50%">
<framesrc="frame_a.htm">
<framesetcols="25%,75%">
<framesrc="frame_b.htm">
<framesrc="frame_c.htm">
</frameset>
 </frameset>
</html>

UNIT - II
Style sheet

Cascading style sheets are now the standard way to define the presentation of your
HTML pages, from fontsand coloursto thecompletelayoutofapage. 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 everyday, so the sooneryou

haveagrip on thismostelegantofpresentationallanguages, thebetter.

CSSSyntax

A CSS rule has two main parts:a selector,and one or more declarations:

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

CSSExample

A CSS declaration 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>HelloWorld!</p>
<p>ThisparagraphisstyledwithCSS.</p>
</body>
</html>

CSS Background

CSSbackground 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

BackgroundColor

The background – color property specifies the background color of an

element.

body {background-color: #b0c4de;}

Back ground 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');

BackgroundImage-RepeatHorizontallyorVertically

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

{back ground – image : url ('gradient2. png');}

All CSS Background Properties

Property Description Values

background Sets all the background background-
properties in one declaration color background-
image background-
repeat background-
attachment
background-
position inherit
background- Sets whether a scroll fixed
attachment background image is fixed or inherit
scrolls with the rest of the page
background-color Sets the back ground color-rgb color-
color of an element hex color- name
transparent inherit

background-image Sets the back ground url(URL) none

image for an element inherit
background-position Sets the starting position top lefttop center
of a background image top right center left
center center
center right bottomleft
bottomcenter
bottomright x% y%
xposypos
inherit

background-repeat Sets if / how a repeat repeat-x

background image will be repeat-y no-repeat inherit
repeated
 Text Color

The color property is used to set the color of the text. The colorcan be specified by:
name - a color name, like "red"

RGB-anRGBvalue,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 ordecrease the space normal length

between characters
text-align Aligns the text in an element left right center justy

text-decoration Adds decoration to text none underline overline

line-through blink

text-indent Indents the first line of text in an length%

element
text-shadow none color length

text-transform Controls the letters in an element none capitalize

upper case lower case

unicode-bidi normal embed

bidi-override
vertical-align Sets the vertical alignment of an baseline sub super top,text-
element top middle bottom text-
bottom length %
white-space Sets how white space inside normal pre,no wrap
an element is handled

word-spacing Increase or decrease the space normal length

between words

Font Families

In CSS, there are two types of font familynames: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 normal small-

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

Example Program

<html>
<head>
<style type="text/css">
p.normal{font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
 p.thicker {font-weight:900;}
</style>
</head>
<body>
<pclass="normal">Thisisaparagraph.</p>
<pclass="light">Thisisaparagraph.</p>
<pclass="thick">Thisisaparagraph.</p>
<pclass="thicker">Thisisaparagraph.</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 Nomarker
disc Default.The marker is afilled circle
circle The marker is a circle
square The marker is a square

Values for OrderedLists

Value Description
armenian The marker is traditional Armenian num bering
decimal The marker is a number
decimal-leading-zero The marker is a number p added by initial zeros
(01,02,03,etc.)
georgian The marker is traditional Georgian num bering
(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>
background-color transparent

<color>
background-image none url(<URL>)

repeat repeat-x repeat-y no-repeat

background-repeat
background- scroll fixed
attachment
<percentage>

<length> top center bottom left

background- right
position
<background-color>

background <background-image>

<background-repeat>

<background-attachment>

<background-position>
 color <color>
background-color transparent

<color>
background-image none url(<URL>)

repeat repeat-x repeat-y no-repeat

background-repeat

ExampleProgram

<html><head>
<style type="text/css">
body{background-color:#d0e4fe;} h1
{
color:orange; text-align:center;
}
p
{
font-family:"Times New Roman"; font-size:20px;
}</style></head>
<body>
<h1>CSSexample!</h1>
<p>Thisisaparagraph.</p>
</body></html>

CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term"boxmodel" is used
when talking about design and layout.

The CSSbox 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 borderaround 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>
<styletype="text/css">div.ex
{
width:220px; padding:10px; border:5pxsolidgray; margin:0px;
}
</style></head>
<body>
<imgsrc="250px.gif"width="250"height="1"/><br/><br/>
<divclass="ex">The line above is 250pxwide.<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
specifiesif an elementshould be visible or hidden.

Hiding an Element-display: none or visibility : hidden

Hiding an elementcan be done by setting the display property to "none" or the visibility
propertyto"hidden".However, notice thathese two methods produce different results:

Example

h1.hidden {visibility:hidden;}

ChangingHowanElementisDisplayed

Changing an inline element to a block element, orvice versa, can be useful formaking
thepagelook aspecific way, and stillfollow web standards.

li{display:inline;}

Example

<html><head>
<style type="text/css"> Span {
display:block;
 }
</style></head>
<body>
<h2>Nirvana</h2>
<span>Record:MTV UnpluggedinNewYork</span>
<h2>Radiohead</h2>
<span>Record:OKComputer</span>
<span>Year:1997</span></body></html>

UNIT–3
Java Script 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, fromwithin
a script.

The Document object is also part of the Window object, and can be accessed through the
window.document property.

Collection Description
anchors[] Returnsanarrayofalltheanchorsin thedocument

forms[] Returnsan arrayofalltheformsin thedocument

images[] Returnsanarrayofalltheimagesinthedocument

links[] Returnsanarrayofallthelinksinthedocument

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/>
<aname="c++">C++</a><br/>
<script type = "text/javascript"> document. write (document .anchors. length);
</script></p>
</body>
</html>

forms

The forms collectionreturns anarrayof all the forms inthe current document

Syntax

document.forms[].property

Example

<html>
<body>
<form name="Form1"></form>
<form name="Form2"></form>
<p>Numberofforms:
<script type="text/javascript">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>
<imgborder="0"src="a.jpg"width="150"height="113"/>
<imgborder="0"src="b.jpg"width="152"height="128"/>
<p>Numberof images:
 <script type="text/javascript">document.write(document.images.length);
</script></p></body></html>

Links

The links collection returns an arrayof all the links in the current
document. The links collection counts

<ahref="">tagsand<area>tags.

Syntax
document.links[].property
Example
<html>
<body>
<ahref="images.html">Images</a>
<p>Numberof areas/links:
<script type="text/javascript">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 p!Going
into all the Java script
 events
is beyond the scope.

Window object

The Java Script 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,

closeit, 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-pecifiestheURLofthepagetoopen
 name -Specifies the target attribute orthe name of the window.
specs -A comma-separated list of items.

Reload window

Toreloadawindow,usethismethod:

window.location.reload()

Close Window

The closedproperty returns aBoolean value indicating whether a window hasbeen

closed or not.

Syntax
window.close()

Example Window object

<html>
<head>
<script type="text/javascript"> function openWin()
{
myWindow=window.open("","","width=200,height=100");
myWindow.document.write("<p>Thisis'myWindow'</p>");
}
functioncloseWin()
{
myWindow.close();
}
functionRelo()
{
myWindow.location.reload()
}
</script>
</head>
<body>
<inputtype="button"value="Open'myWindow'"onclick="openWin()"/>
<inputtype="button"value="Close'myWindow'"onclick="closeWin()"/>
<inputtype="button"value="Reload"onclick="Relo()"/>
</body>
</html>

set Interval() method

 The set Interval() method calls a function or evaluates an expression at specified
intervals (in milliseconds).

1000ms = 1 second.

Syntax

setInterval(“windowname”,millisec)

Eg:

setTimeout("alert('hi!');", 500);

Other window objects

print()Prints the content of the current window resize By () Resizes the

window by the specified pixels move By () 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 – age n the adersent 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>
<scripttype="text/javascript">
document.write("BrowserCodeName: "+ navigator.appCodeName);
document.write("<br /><br />");
document.write("BrowserName:"+navigator.appName);
document.write("<br /><br />");
document.write("BrowserVersion: " + navigator.appVersion);
document.write("<br /><br />");
document.write("CookiesEnabled:"+ navigator.cookieEnabled);
document.write("<br /><br />");
document.write("Platform: "+ navigator.platform);
document.write("<br /><br />");
document.write("User-agentheader:"+navigator.userAgent);
</script></body></html>

ScreenObject

Thescreenobjectcontainsinformationaboutthevisitor'sscreen.

Thereisnopublicstandardthatappliestothescreenobject,butallmajorbrowsers support it.

Property Description
availHeight Returnstheheightofthescreen(excludingtheWindows
Taskbar)
availWidth Returnsthewidthofthescreen(excludingtheWindows
Taskbar)
colorDepth Returnsthebitdepthofthecolorpalettefordisplaying
images
height Returnsthetotalheightofthescreen
pixelDepth Returnsthecolorresolution(inbitsperpixel)ofthescreen
width Returnsthetotalwidthofthescreen

ScreenSyntax

screen.avail Height screen.avail Width screen.color Depth screen.height

screen.pixel Depth screen.width

Example

<HTML>
<BODY>
<scripttype="text/javascript">
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>Colorresolution: " + screen.pixelDepth);
document.write("</br>Total Width: " + screen.width);
</script>
</BODY>
</HTML>

FormObject

form object is a Browser object of Java Script 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.

PropertiesofFormObject:

action hidden
elements[] password
encoding radio
length reset
method select
name submit
target text
button check box textarea

Action:

This propertyis a read orwrite propertyand its value is a string.

elements :

Itcontainsallfieldsandcontrolspresentintheform.Theusercanaccessanyelement associated
with theform by using thelooping concepton theelementsarray.

Encoding:
 Thispropertyisareadorwritepropertyanditsvalueisastring.Thispropertyhelps determine the
way of encoding the form data.

Length:

This denotes the length of the elements array associated with the form.
Method:

Thispropertyisareadorwritepropertyanditsvalueisastring.Thispropertyhelps determine the

method by which the form is submitted.

Name:

name propertyof formobject denotes the formname.

Target:

Thisproperty denotesthenameofthe targetwindowtowhich form itisto besubmitted into.

Button:

The button property of form object denotes the button GUI control placed in the form.
Checkbox:

Check box property of form object denotes the check box 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 objectdenotes the submit button field thatis placed in the form.
Text:

Text property of form object denotes the text field placed in the form.

Textarea:

Text are a property of form object denotes the text are a field placed in the form.

Example of form objet

<HTML>
<HEAD>
 <TITLE>TestInput</TITLE>
</HEAD>
<BODY>
<FORMNAME="myform"ACTION=""METHOD="GET">Enterbox:<BR>
<INPUTTYPE="text"NAME="inputbox"VALUE=""><P>
<INPUTTYPE="button"NAME="button"Value="Click">
<br>Genter
<INPUTTYPE="radio"NAME="rad"VALUE="radio_button3"onClick=0>
<INPUTTYPE="radio"NAME="rad"VALUE="radio_button4"onClick=0>
<br>Languageknow<br>
<INPUTTYPE="checkbox"NAME="check2" Value="Check2">Tamil<BR>
<INPUTTYPE="checkbox"NAME="check3" Value="Check3">English<BR>
</br>
ThisisTextArea
<TEXTAREANAME="myarea"COLS="40"ROWS="5">
</TEXTAREA>
</br>List Items
<SELECTNAME="list"SIZE="1">
<OPTION>Thisisitem1
<OPTION>Thisisitem2
</SELECT>
</br>
<FORM>
<INPUTTYPE="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).

Thethreebuilt-in objectsare: theString object, theMath object, and theDateobject. Each

oftheseprovidesgreatfunctionality,andtogether theygiveJavaScriptitspower as a scripting
language.

TheStringObject

The String object is used to manipulate a stored piece of

text. String objects are created with new String().

Syntax

var txt= newString(string);

StringObjectMethods

Method Description
charAt() Returnsthecharacteratthespecifiedindex
charCodeAt() ReturnstheUnicodeofthecharacteratthespecifiedindex
concat() Joinstwoormorestrings,andreturnsacopyofthejoinedstrings
fromCharCode() ConvertsUnicodevaluestocharacters
indexOf() Returnsthepositionofthefirstfoundoccurrenceofaspecifiedval
ueina string
lastIndexOf() Returnsthepositionofthelastfoundoccurrenceofaspecifiedvalu
einastring
match() Searches for amatch between a regular expression and a
string, and returns the matches
replace() Searchesforamatchbetweenasubstring(orregularexpression)a
nda string, and replaces the matched substring with a new
substring
search() Searches for amatch between a regular expression and a
string, and returns the position of the match
slice() Extracts apartofastringandreturns anewstring
split() Splitsastringintoanarrayofsubstrings
substr() Extracts the characters froma string,beginning at a specified
start position, and through the specified number of character
substring() Extractsthecharactersfroma
string,betweentwospecifiedindices
toLowerCase() Convertsastring tolowercaseletters
toUpperCase() Convertsastringtouppercaseletters
valueOf() ReturnstheprimitivevalueofaStringobject

Example

<html>
<body>
<script type="text/javascript"> 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 "; varstr2="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 />");

varstr1="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= newDate();

var d = new Date(milliseconds); var d = new Date(dateString);

var d= newDate(year,month,day,hours,minutes,seconds,milliseconds);

Method Description
getDate() Returnsthedayofthemonth(from1-31)
 getDay() Returnsthedayof theweek(from0-6)
getFullYear() Returnstheyear(fourdigits)
getHours() Returnsthehour(from0-23)
getMilliseconds() Returnsthemilliseconds(from 0-999)
getMinutes() Returnsthe minutes(from0-59)
getMonth() Returnsthemonth(from0-11)
getSeconds() Returnstheseconds(from0-59)
getTime() ReturnsthenumberofmillisecondssincemidnightJan1,1970
getTimezoneOffset() Returns the time difference between GMT and local time, in
minutes
getUTCDate() Returnsthedayofthemonth,accordingtouniversaltime (from1-31)
getUTCDay() Returnsthedayoftheweek,accordingtouniversaltime (from0-6)
getUTCFullYear() Returnstheyear,accordingtouniversaltime(fourdigits)
getUTCHours() Returns thehour,accordingtouniversaltime(from0-23)

Example
<html>
<body>
<script type="text/javascript">
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

varx=Math.PI;//ReturnsPI
vary=Math.sqrt(16);//Returnsthesquarerootof16

Property Description
E ReturnsEuler'snumber(approx.2.718)
LN2 Returnsthenaturallogarithmof2(approx.0.693)
LN10 Returns thenaturallogarithmof10(approx.2.302)
LOG2E Returnsthe base-2logarithmofE(approx.1.442)
LOG10E Returnsthebase-10logarithmofE(approx.0.434)
PI ReturnsPI(approx.3.14159)
SQRT1_2 Returnsthesquarerootof1/2(approx.0.707)
SQRT2 Returnsthesquarerootof2(approx.1.414)
abs(x) Returnstheabsolutevalueofx
acos(x) Returns thearccosineofx,inradians
asin(x) Returnsthearcsineofx,inradians
atan(x) Returnsthearctangentofxasanumericvaluebetween-
PI/2andPI/2 radians
atan2(y,x) Returns thearctangentofthequotientofits arguments
ceil(x) Returns x,roundedupwardstothenearest integer
cos(x) Returnsthecosineofx(xisinradians)
exp(x) ReturnsthevalueofEx
floor(x) Returnsx,roundeddownwardstothenearestinteger
log(x) Returnsthenaturallogarithm(baseE)ofx
max(x,y,z,...,n) Returnsthenumberwiththehighestvalue
min(x,y,z,...,n) Returnsthe numberwiththelowestvalue
pow(x,y) Returnsthevalueofxtothepowerofy
random() Returnsarandomnumberbetween0and1
round(x) Roundsxtothenearestinteger
sin(x) Returnsthesineofx(xisinradians)
sqrt(x) Returnsthesquarerootofx
tan(x) Returns thetangent ofanangle

Example

<html>
<body>
<script type="text/javascript">
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>

UserDefinedObject

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-definedobjects</title>
<scripttype="text/javascript">
var book = new Object();
// Create the object book.subject = "C++";
// Assign properties to the object book.author = "Balagurusami";
</script>
</head>
<body>
<scripttype="text/javascript">
document.write("Bookname is :"+book.subject +"<br>");
document.write("Bookauthoris: "+book.author+"<br>");
</script>
</body>
</html>
 UNIT – 4
HTML Controls:

Html Controls are server-side representations of standard HTML elements Any

HTML element in an ASPX page marked with the run at = serve rattribute will become an
HTML control on the server All derive from Html Control class HTML elements with no
distinguished server-side functionality (likediv,span,etc.) are all represented as Html
Generic Control instances

HtmlControls

Html Image
Html Form
Html Inpu tFile
Html Button
Html Input Hidden
Html Select
Html Input Radio Button
Html Table
Html Input Text
Html Table Cell
Html Input Button
Html Table Row
Html Input Check Button
Html Text Area Html Input Image
 Html Anchor
A sample Code for Html Controls

Html Anchor

The Anchor control to programmatically control an <a> HTML element. The <a>
HTML element allows you to create a hyper link that allows you to move to another
location on the page or to another Web page.

The Html Anchor control must be well formed with an opening and closing tag.

<a id="anchor1"runat="server">

Remember to embed the Html Anchor control inside the opening and closing tags
of an Html Form control.

Html Button Button control to program against the HTML <button> element. You
can provide custom code for the Server Click event of the Html Button control to specify
the action performed when the control is clicked.

The Html Button control renders Java Script to the client browser. The client browse
rmust have JavaScript enabled for this control to function properly

Declare an Html Button control on your Web Forms pag

<buttonrunat="server"></button>

Html Form

Form control to program against the HTML <form> element. To take advantage of
the post back services, all Web Forms controls, whether HTML, Web, pagelet, or custom,
must be nested between well-formed opening and closing tags of the Html Form control.
If the tags are not closed properly, ASP.NET will not recognize the element. The element
will either be ignored or acompilation error will occur, depending on how the element is
formed.

<form id="programmaticID" method = POST | GET action = "src page URL"

runat="server"> Other controls, input forms, and so on.

</form>

Html Table

Table control to program against the HTML <table> element. An Html Table
control is made up of rows (represented by Html Table Row objects) stored in the Rows
collection of a table. Each row is made up of cells (represented by Html Table Cell
objects) stored in the Cells collection of a row.

To create a table, first declare an Html Table control in the form on your page.
Next, place Html Table Row objects between the opening and closing tags of the Html
Table control, one for each row you want in your table. Once the rows of the table are
defined, declare Html Table Cell objects between the opening and closing tags of each
Html Table Row object to create the cells of the row.

<table id = "programmatic ID" align = left | center | right bg color = “bg color”
border = “border width in pixels” border color = "border color"

cell padding = "spacingwithincellsinpixels" cellspacing = "spacing between cells

inpixels" height = "table height" rows = "collection of rows" width = "table width"
runat="server">

<tr>
<td></td>
</tr>
</table>

Html Input File

File control to program against the HTML <input type=file> element. You can use
the Html Input File 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 = "programmatic ID" accept = "MIME encodings" max length =

"max file path length" size = "width of file path text box" posted file = "uploaded file"

runat="server">

Web Server Controls

The following topics coverthe ASP.NET syntaxthat you use when creating a Web
servercontrolin a text or HTML editor. These topics include the properties that are shared
among all Web server controls, as wellas 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 controlallows you to create a push button on the Web Forms page.
There are two types of buttons thatcan be created. You can create either a submit button
or a command button.

<asp: Button id="Submit Button" Text="Submit" OnClick="SubmitBtn_Click"

runat="server"/>

Check Box control

The Check Box 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 captions can appear either on the right or left of
the check box. Set the Text Align property to specify the side that the caption appears on.

<asp:Check Box id=Check1runat="server"Text="CheckBox1"AutoPostBack="True"/>

Hyper Link control

Use the Hyper Link 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 the Navigate Url
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
Hyper Link control. To display an image, set the Image Url 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 with out frames.

_parent Displays the linked page in the immediate frame set 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
Image Url 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 Alternate Text
property. The Image Align property specifies the alignment of the image in relation to
otherelements on the Web Forms page.
 This control only displays an image. If you wantthe image to behave like a button or
need to determinethe coordinates where the mouse pointeris clicked on the image, use the
ImageButton control.

<asp:Image id="image1"runat="server"AlternateText="Image
Description"ImageAlign="left"ImageUrl="pict.jpg"/>

Radio Button

The Radio Button server control creates a radio button on the Web Forms page.
Specify the text to display in the control by setting Text property. The textcan appear
either on the left or the right of the radio button. Set Text Align property to control the
side that the text appears on. You can group multiple radio buttons together if you specify
the same Group Name for each Radio Button 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"/>

Text Box server control

The Text Box server control is an input control that lets the user enter text. By
default, the Text Mode property is set to Single Line, which creates a text box with only
one line. You can also set the property to Multi Line or Password. Multi Line 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 boxis a multi line text box, the display height is determined by the
Rows property.

<asp:TextBoxID="TextBox1"runat="server"TextMode="SingleLine|MultiLine|
Password"></asp:TextBox>

Check Box List control

The Check Box List control creates a multi selection check box group that can be
dynamically generated using data binding. To specify items that you want toappear in the
Check Box List control, place a List Item element for each entry between the opening
and closing tags of the Check Box List control.

<asp:CheckBoxListid="Check1"RepeatLayout="flow"runat="server">
<asp:ListItem>Item1</asp:ListItem>
<asp:ListItem>Item2</asp:ListItem>
</asp:CheckBoxList>

Drop Down List control

 Use the DropDownList control to create a single selection drop-down list control.
You can control the appearance of the Drop Down List control by setting the Border
Color, Border Style, and Border Width properties.

To specify the items that appear in the Drop Down List control, place a List Item
element for each entry between the opening and closing tags of the Drop Down List
control.

Example
<asp:RadioButtonListID="RadioButtonList1"runat="server">
<asp:ListItem Text="a"Value="1"></asp:ListItem>
<asp:ListItemText="b" Value="2"></asp:ListItem
</asp:RadioButtonList>

Image Button control

Use the Image Button control to display an image that responds to mouse clicks.
Specify the image to display in the control by setting the Image Url property.

Boththe ClickandCommandeventsare raisedwhentheImageButtoncontrolis clicked.

<asp:ImageButton id="ImageButton1" ImageUrl="string" Command="Command"

CommandArgument="CommandArgument" CausesValidation="true|false"
OnClick="OnClickMethod" runat="server"/>

List Box control

Use the List Box controltocreate 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 Selection Mode property
to List Selection Mode. Multiple.

To specify the items that youwant to appear in the List Box control, place a List
Item element for each entry between the opening and closing tags of the List Box control.

<asp:ListBoxID="ListBox1" runat="server">

<asp:ListItemValue="2">b</asp:ListItem>

<asp:ListItemValue="1">a</asp:ListItem>

</asp:ListBox>&nbsp;</div>

The Data Grid control

 The Data Grid control renders a tabular, data-bound grid. This control allows you
to define various types of columns to controlthe layout of the cellcontents of the grid
(bound columns, template columns) and add specific functionality (suchas edit
buttoncolumns, hyperlinkcolumns, andsoon). The control also supports a variety of
options for paging through data.

The Data Grid control displays the fields of a data source as columns in a table.
Each row in the Data Grid control represents a record in the data source. The Data Grid
control supports selection, editing, deleting, paging, and sorting.

Syntex

<asp:DataGridID="DataGrid1"runat="server"></asp:DataGrid>

The order that the columns are displayed in the Data Grid control is controlled by
the order that the columns appear in the Columns collection. 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 generatedcolumns.

Automatically generated columns are not added to the Columns collection.

Example

<%@ ImportNamespace="System.Data.SqlClient"%>

<ScriptRunat="Server">Sub Page_Load

Dimcon Northwind As Sql Connection Dim cmd Select As Sql Command

con North wind = New Sql Connection ("Server = local host; UID = sa; PWD =
secret; Data base = North wind" ) cmd Select = New Sql Command
("Select * From Employees", con North wind) con North wind. Open()

dgrdEmployees.DataSource = cmd Select.ExecuteReader() dgrdEmployees.DataBind()

conNorthwind.Close() End Sub
</Script>

<html><head><title>ExpertDataGrid.aspx</title></head>

<body><asp:DataGridID="dgrdEmployees"Runat="Server"/></body></html>

Repeater control
 Use the Repeater control to create a basic template data-bound list.

The Repeater control has no built-in layout or styles; you must explicitly declare all
HTML layout, formatting, and style tags with in thecontrol's templates.

The Repeater control isdifferentfrom other data listcontrolsin thatitallowsyou 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 the HeaderTemplate. Next, create the rows and columnsof the table by
placing <tr>tags, <td>tags, and data-bound itemsin

the ItemTemplate. If you want a different appearance for alternating items in the table,
create an Alternating Item Template with the same contents as the ItemTemplate, except
with a different style specified. Finally,complete the table by placing

the</table>tag intheFooterTemplate.

<asp:Repeater id="Repeater1" DataSource="<%databindingexpression%>"runat=server>

<HeaderTemplate>Headertemplate HTML
</HeaderTemplate>
<ItemTemplate>Itemtemplate HTML
</ItemTemplate>
<AlternatingItemTemplate>Alternating item template HTML
</AlternatingItemTemplate>
<SeparatorTemplate>Separatortemplate HTML
</SeparatorTemplate>
<FooterTemplate>Footertemplate HTML
</FooterTemplate>
<asp:Repeater>
 UNIT–5:

Cookies Over view

Cookies provide a means in Web applications to store user – specific information.

Forexample, 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 smallbit of text that accompanies requests and pages as they go

between the Webserver and browser. The cookie contains information the Web application
can read whenever the user visits the site.

Forexample, if a userrequests a page fromyoursite and yourapplication sends not just

a page, but also a cookie containingthe date andtime, whenthe user's browsergets the page,
the browseralso gets the cookie, which it stores in a folder on the user's hard disk.

Later if userrequests a page fromyoursite again, whenthe userenters the URLthe

browserlooks onthe local hard diskfor a cookie associated with the URL. If the cookie
exists, the browser sends the cookie to your site along with the page request.
Yourapplication can then determine the date and time thatthe userlastvisited the site. You
might use the information to display a message to the userorcheckan expiration date.

Cookies are associated with a Web site,not with a specificpage,so the browser and
server will exchange cookieinformationno matterwhat page the userrequests fromyoursite.
As the uservisits different sites, each site might send a cookie to the user's browser as
well; the browser stores all the cookies separately.
 Cookies helpWebsites store informationabout 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 thathelps an application know how to precede.

Cookies are used for many purposes; all relating to helping the Website 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 can
not 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:

VisualBasic
Response.Cookies("userName").Value="patrick"

Response.Cookies ("userName").Expires=DateTime.Now.AddDays(1)

Dim a Cookie As New Http Cookie ("lastVisit") a Cookie.Value =

DateTime.Now.To String() a Cookie.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 fordatabase access. ASP.NETuses ADO .NET (Active X Data Object) as it's
data accessand manipulation protocol which also enables ustowork with dataon the
Internet.

AdvantagesofADO.Net

ADO.NETDoesNotDependOnContinuouslyLiveConnections

DatabaseInteractionsArePerformedUsingDataCommands

DataCanBeCachedinDatasets

DatasetsAreIndependentofDataSources
 Data Is PersistedasXML

SchemasDefineDataStructures

OLEDB

The dot net frame work data provider for OLEDB provides connectivity with the
OLEDB supported database management systems. It is there commended middletier for
the SQL Server 6.5or 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 inthe System. Data. Ole DB Client
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 Data Set is finished, change scan be made back to the central
database for updating.The data in Data Set can be loaded from any valid data source like

Microsoft SQL server database, an Oracle data base or from a Microsoft Access
database.

DataProvider

The Data Provider is responsible for providing and maintaining the connection to the
database. A Data Provider is a setof related components that work together to provide data
in an efficient and performance driven manner. The .NET Frame work currently comes
with two Data Providers: the SQL Data Provider which is designed only to work with
Microsoft's SQL Server 7.0 or later and the OleDb Data Provider which allows us to
connect to other types of databases like Accessand Oracle.Each DataProvider
consistsofthefollowing component classes:

The Connection object which provides a connection to the database The Command
object which is used to execute a command

TheDataReaderobjectwhichprovides a forward-only, readonly,connected record set

 The DataAdapterobject whichpopulates a disconnectedDataSet withdata
andperforms update Data access withADO.NETcanbe summarizedas 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.

ComponentclassesthatmakeuptheDataProviders The Connection Object

The Connection object creates the connection to the database. Microsoft Visual
Studio.NET provides two types of Connection classes: the Sql Connection object, which is
designed specifically to connect to Microsoft SQL Server 7.0 or later, and the OleDb
Connection 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: Sql Command

and OleDb Command. 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:
 Execute Non Query: Executes commands that have nore turn values such as
INSERT, UPDATE or DELETE Execute Scalar: Returns a single value from a database
query Execute Reader:Returns a result set by way of aData Reader object

The Data Reader Object

TheData Reader object provides a forward - only, read-only, connected stream record
set from a database. Unlike other components of the Data Provider, Data Reader objects
cannot be directly instantiated. Rather, the Data Reader is returned as the result of the
Command object's Execute Reader method. The Sql Command. Execute Reader method
returns a Sql DataReader object, and the Ole Db Command.ExecuteReader method returns
an OleDb Data Reader object. The Data Reader can provide rows of data directly to
applicationlogic when youdo not need tokeep thedata cachedinmemory. Becauseonly onerow
isin memoryat atime, theDataReaderprovidesthe lowest overhead interms
ofsystemperformance but requires theexclusive useof an open Connection object for the
lifetime of the DataReader.

TheDataAdapterObject

The DataAdapter is the class atthe core ofADO .NET's disconnected data access. It
is essentially the middle man facilitating all communication between the database and a
DataSet. The DataAdapteris used either to fill a DataTable or DataSet with data from the
database with it's Fillmethod. After the memory-resident data hasbeen manipulated, the
DataAdapter can committhechangestothedatabase bycalling theUpdate method. The Data
Adapter provides four properties that represent database commands:

SelectCommand InsertCommand DeleteCommand UpdateCommand

When the Update method is called, changes in the Data Set a recopied back to the
data base and the appropriate Insert Command, Delete Command, or Update Command is
executed.

Internet Information Services (IIS) - formerly called Internet InformationServer - 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
overallwebsites 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 publishwebsite onour own
server then we install the IIS. IIS is used on windows plate form.
 IIStakesrequestfrom userandexecutestherequiredfilesandsendsresultbackto theuser.IIS
server also provides the services of SMTP (Simple MailTransport 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. IIS7 includes native modules as part ofthe full installation.These modules are
individual features that the server uses to process requests and include the following:

HTTP modules - Usedto 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 there quest-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 there quest-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 [Electronicmail]

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
Website. 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 Frame work 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 Smtp
Mail class found in the System.Web.Mail name space,which contains a static method
Send.

We are using System.Web.Mail.Smtp Mail to send email in dot net1.1 which is

obsolete in 2.0.

The System.Net.Mail.Smtp Client Class will provide us the same feature as

that of its predecessor. This article explains how to use System.Net.Mail name
space to send emails.

SendingEmail

The namespace that needs to be imported to send an email is the

System.Web.Mail name space. We use the Smtp Mail and Mail Message classes of
this name space for this purpose.The Mail Message class provides properties and
methods for constructing an email message

The following code shows how to add an attachment to an email.

UsingSystem.IO;

UsingSystem.Web.Mail;

Mail Attachment ma=new Mail Attachment ("c:\sample.txt"); Mail Message mm=new

Mail Message();

mm.To="[email protected]";
 mm.From="[email protected]"; mm.Body ="Attachment";

mm.Subject="Checkouttheattachedtextfile";

mm.Attachments.Add(ma);

SmtpMail.SmtpServer="mail.programmers heaven. com"; Smtp Mail.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.

Query String

The Query String 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:

<ahref="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 aquery into the
address bar of the browser.

Request.Query String (variable)[(index)|.Count]

Form Collection

The Form collectionis 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/>")

Server Variables Collection

The Server Variables collection isused to retrieve the server variable values.

Syntax
 Request.Server Variables (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 card key 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 is n’t improved beyond the ability to log an individual’s
actions unless we enforce that only certain users can access
certainresources.Inthesecureofficebuilding,wemight 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 some one else. In our example,

impersonation would be using the card key issued for some one 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. Authenticationis performedby IISinone ofthree 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 formusing 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 what ever validation method the application developer specifies.

Passport Authentication Provider Centralized authentication service provided by

Microsoft that offers a single log on and core profile services for member sites.

Syntax
 <configuration>
<system.web>
<authentication
mode="[Windows|Forms|Passport|None]">
</authentication>
</system.web>
</configuration>

SSLSecured

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 sub set of an application. On the
other hand SSL is not the "CPU killer" as sometime stated. IIS6 also support SSL accelerators
that allow off-loading 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 head aches.But if you want a partitioned application,you have
to take several things into account

In the case of Forms authentication,the require SSL attribute also checks if the user is
logging in from an SSL connection before calling Forms Authentication. Set Auth Cookie
(something you have to check yourself if you are issuing tickets manually).

More information refers your Book.

ALL THE BEST