0% found this document useful (0 votes)

21 views11 pages

Web Technology PDF

Uploaded by

sauravsubedi1128

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

21 views11 pages

Web Technology PDF

Uploaded by

sauravsubedi1128

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 11

Web Technologies (Csc-353) Difference between client/server and peer-to-peer HTML Attributes

Web server: Web servers are computers that deliver (serves) Web pages. Every Web server has an IP address and
Attributes provide additional information about HTML elements.
Unit 1: Introduction
possibly a domain name. A Web server is a program that uses HTTP (Hypertext Transfer Protocol) to serve the files
Introduction to Networking: that form Web pages to users, in response to their requests, which are forwarded by their computers' HTTP clients. The <!DOCTYPE> Declaration
Dedicated computers and appliances may be referred to as Web servers as well. The <!DOCTYPE> declaration helps the browser to display a web page correctly.
Importance of Computer Network:
There are many different documents on the web, and a browser can only display an HTML page 100%
 Sharing of devices such as printer correctly if it knows the HTML type and version used.
and scanner Web client: It typically refers to the Web browser in the user's machine.  The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about
 Sharing of program and software
what version of HTML the page is written in.
 Sharing of files Web Browser: Browsers are software programs that allow you to search and view the many different
 Sharing of data kinds of information that's available on the World Wide Web. The information could be web sites, video  The <!DOCTYPE> tag does not have an end tag.
 Sharing of information or audio information.
 Better Communication using internet Common DOCTYPE Declarations
services such as email SMTP : Simple Mail Transfer Protocol(SMTP), a protocol for sending e-mail messages between servers. Most e- HTML 5 <!DOCTYPE html>
Internet and its Evolution: mail systems that send mail over the Internet use SMTP to send messages from one server to another; the HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
The Internet is a global network connecting millions of computers. More than 190 countries are linked into messages can then be retrieved with an e-mail client using either POP or IMAP. In addition, SMTP is generally used Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
to send messages from a mail client to a mail server. This is why you need to specify both the POP or IMAP server

om
exchanges of data, news and opinions. No one actually owns the Internet, and no single person or organization
controls the Internet in its entirety. and the SMTP server when you configure your e-mail application. SMTP by default uses TCP port 25.
Types of computer Network: HTML Text Formatting Tags HTML "Computer Output" Tags
WWW : WWW is a system of interlinked hypertext documents accessed via the Internet. The World Wide POP: Post Office Protocol (POP) is an application-layer Internet standard protocol used by local e-mail clients to Tag Description Tag Description
Different LAN MAN WAN retrieve e-mail from a remote server over a TCP/IP connection. <b> Defines bold text <code> Defines computer code text
.c Web, or simply Web, is a way of accessing information over the medium of the Internet. It is an information-

.c
Cost Low High Higher <em> Defines emphasized text <kbd> Defines keyboard text
sharing model that is built on top of the Internet. The Web uses the HTTP protocol, only one of the languages
Network Size Small Larger Largest <i> Defines a part of text in italic <samp> Defines sample computer code
tu

tu
spoken over the Internet, to transmit data. Web services, which use HTTP to allow applications to
Speed Fastest Slower Slowest communicate in order to exchange business logic, use the Web to share information. The web also utilizes Review of HTML <small> Defines smaller text <var> Defines a variable
Transmission Media Twisted-pair Twisted pair, fiber optics Fiber optics, Radio waves, satellite browsers, such as Internet Explorer or Firefox, to access Web documents called Web pages that are linked to each Introduction to HTML <strong> Defines important text <pre> Defines preformatted text
al

al
No. of Computers Smallest Large Largest other via hyperlinks. Web documents also contain graphics, sounds, text and video. HTML is a language for describing web pages. It is not a programming language. A markup language <sub> Defines subscripted text
specifies the layout and style of a document. The browser does not display the HTML tags, but uses the <sup> Defines superscripted text
ep

ep
<ins> Defines inserted text
Network Architecture:
tags to interpret the content of the page.
Web Page: A web page is a document commonly written in Hyper Text Markup Language (HTML) that is accessible <del> Defines deleted text
Network architecture is the overall design of a computer network that describes how a computer network is through the Internet network using a browser. A web page is accessed by entering a URL address and may contain • HTML stands for Hyper Text Markup Language
<mark> Defines marked/highlighted text
•
an

an
configured and what strategies are being used. It is also called network model or network design. Two main text, graphics, and hyperlinks to other web pages and files. A markup language is a set of markup tags
network architecture are: • The tags describe document content
Web site: A connected group of pages on the World Wide Web regarded as a single entity, usually maintained by HTML Comment Tags
1) Client/server Network • HTML documents contain HTML tags and plain text
bc

bc
one person or organization and devoted to a single topic or several closely related topics. You can add comments to your HTML source by using the following syntax:
2) Peer to peer Network • HTML documents are also called web pages
URI: Uniform Resource Identifier (URI) is a string of characters used to identify the name of a resource. Such 
Client/Server: HTML Tags
identification enables interaction with representations of the resource over a network, typically the World Wide Comments are not displayed by the browser, but they can help document your HTML.
On a client/server network, one computer Web, using specific protocols.
act as a server, that provides services and  HTML tags are keywords (tag names) surrounded by angular brackets like <html> HTML Hyperlinks (Links)
URI looks like: public://myfile.jpeg
the other computers(client) on the network  HTML tags normally come in pairs like <b> and </b> The HTML <a> tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you
request services from the server. URL: Web browsers request pages from web servers by using a URL.  The first tag in a pair is the start tag, the second tag is the end tag can click on to jump to another document. When you move the cursor over a link in a Web page, the
The URL is the address of a web page, like: http://sites/default/files/myfile.jpeg  The end tag is written like the start tag, with a forward slash before the tag name arrow will turn into a little hand.
Peer-to peer This provides location and protocol which is http part.  Start and end tags are also called opening tags and closing tags The most important attribute of the <a> element is the href attribute, which indicates the link's
It is a simple, inexpensive network that destination.
* URI is basically a name, it is representation of an entity or some kind of resource somewhere. HTML Elements
typically connects fewer computers. There By default, links will appear as follows in all browsers:
* URL specifies where that resource can be found. So URL is a URI but URI is not a URL because URL belongs to
is no central server in this type of network.
the subset of URI.
An HTML element is everything from the start tag to the end tag  An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
Example: <a href="http://www.devcpgn.blogspotcom/">Visit Me !</a>
Source: http://www.devcpgn.blogspot.com Unit1:1 Source: http://www.devcpgn.blogspot.com Unit1:2 Source: http://www.devcpgn.blogspot.com Unit1:3 Source: http://www.devcpgn.blogspot.com Unit1:4

<head> HTML Images - The <img> Tag and the Src Attribute Unordered Lists
<link rel="stylesheet" type="text/css" href="mystyle.css"> Syntax for defining an image: <img src="url" alt="some_text"> An unordered list is a collection of related items that have no special order or sequence. This list is created by
HTML Links - The id Attribute using HTML <ul> tag. Each item in the list is marked with a bullet.
</head> <img> Tag Attributes Definations
The id attribute can be used to create a bookmark inside an HTML document. Bookmarks are not
Alt specifies an alternate text for an image, if the image cannot be displayed
displayed in any special way. They are invisible to the reader. Example
The HTML <style> Element Width, height Sets width and height of an image
Example:
The <style> tag is used to define style information for an HTML document. Inside the <style> element
An anchor with an id inside an HTML document: HTML <map> Tag <html>
you specify how HTML elements should render in a browser: < head>
<a id="tips">Useful Tips Section</a> The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas. <head>
<style type="text/css"> <title>HTML Unordered List</title> This will produce following result:
Create a link to the "Useful Tips Section" inside the same document: The <map> element contains a number of <area> elements, that defines the clickable areas in the image map.
body {background-color:yellow;} </head>
<a href="#tips">Visit the Useful Tips Section</a> Attribute Value Description
p {color:blue;} <body>  Beetroot
Or, create a link to the "Useful Tips Section" from another page: </style> name Mapname Required. Specifies the name of an image-map <ul>
 Ginger
<a href="http://www.devcpgn.blogspot.com/html_links.htm#tips"> </head> Example: <li>Beetroot</li>
<li>Ginger</li>  Potato
Visit the Useful Tips Section</a> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<li>Potato</li>  Radish
<map name="planetmap">
</ul>
The HTML <meta> Element <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
Html Links- Target attribute: The target attribute specifies where to open the linked document. </body>
Metadata is data (information) about data. The <meta> tag provides metadata about the HTML <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> </html>
Syntax: <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
document. Metadata will not be displayed on the page, but will be machine parsable.
om

om
</map>
<link target="_blank|_self|_parent|_top|framename"> Meta elements are typically used to specify page description, keywords, author of the document, last The type Attribute
Attribute Value Description modified, and other metadata. The metadata can be used by browsers (how to display content or HTML Tables: Example: You can use type attribute for <ul> tag to specify the type of bullet you like. By default it is a disc. Following are
reload page), search engines (keywords), or other web services. <meta> tags always go inside the Tag Description <table border="1" style="width: 300px"> the possible options:
.c

.c
_blank Load in a new window <tr>
<head> element. Example of meta tag <table> Defines a table
_self Load in the same frame as it was clicked <td>Jill</td>  <ul type="square">
Define keywords for search engines: <th> Defines a header cell in a table
tu

tu
_parent Load in the parent frameset <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> <tr> Defines a row in a table
<td>Smith</td>  <ul type="disc">
<td>50</td> o <ul type="circle">
_top Load in the full body of the window Define a description of your web page: <td> Defines a cell in a table </tr>
al

al
<caption> Defines a table caption Example:
framename Load in a named frame <meta name="description" content="Online help for students of IT "> <tr>
Define the author of a page: <thead> Groups the header content in a table <td>Eve</td>
ep

ep
<tbody> Groups the body content in a table <td>Jackson</td> <html>
<meta name="author" content="Devendra Chapagain”> <head>
The HTML <head> Element: <tfoot> Groups the footer content in a table <td>94</td>
Refresh document every 30 seconds: </tr> <title>HTML Unordered List</title>
Inside <head> can include scripts, instruct the browser where to find style sheets, provide meta
an

an
<meta http-equiv="refresh" content="30"> </table> </head>
information, and more. The following tags can be added to the head section: <title>, <style>, <meta>, This will produce following result:
<body>
<link>, <script>, <noscript>, and <base>. The HTML <script> Element <ul type="square">
HTML Lists: 
bc

bc
Tag Description Beetroot
The <script> tag is used to define a client-side script, such as a JavaScript. Common uses for JavaScript <li>Beetroot</li>
<head> Defines information about the document  Ginger
are image manipulation, form validation, and dynamic changes of content. The most common HTML lists are ordered and unordered lists: <li>Ginger</li>
 Potato
<title> Defines the title of a document <li>Potato</li>
HTML <noscript> Tag List properties allow you to:  Radish
<base> Defines a default address or a default target for all links on a page <li>Radish</li>
The <noscript> tag defines an alternate content for users that have disabled scripts in their browser or
<link> Defines the relationship between a document and an external resource </ul>
have a browser that doesn't support script. The <noscript> element can be used in both <head> and  Set different list item markers for ordered lists
<meta> Defines metadata about an HTML document </body>
<body>.When used inside the <head> element: <noscript> must contain <link>, <style>, and <meta>  Set different list item markers for unordered lists
<script> Defines a client-side script </html>
elements. The content inside the <noscript> element will be displayed if scripts are not supported, or  Set an image as the list item marker
<style> Defines style information for a document
are disabled in the user's browser. <script> Lists may contain:
Example: <ul> - An unordered list. This will list items using plain bullets. HTML Ordered Lists
The HTML <title> Element document.write("Hello World!")
</script> <ol> - An ordered list. This will use different schemes of numbers to list your items.
The <title> tag defines the title of the document. The <title> element is required in all HTML/XHTML If you are required to put your items in a numbered list instead of bulleted then HTML ordered list will be used.
<noscript>Your browser does not support JavaScript!</noscript> <dl> - A definition list. This arranges your items in the same way as they are arranged in a dictionary.
documents. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive
ordered list element tagged with <li>.
The HTML <link> Element
The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets:

Source: http://www.devcpgn.blogspot.com Unit1:5 Source: http://www.devcpgn.blogspot.com Unit1:6 Source: http://www.devcpgn.blogspot.com Unit1:7 Source: http://www.devcpgn.blogspot.com Unit1:8
Example </body> HTML Forms: The action tag specifies what page will process the information entered by the user. The server side
<html> This will produce following result: </html> program that process this data can be written in any scripting language that web server understand.
<head> Commonly used server side scripting are: JavaScript, VB Script and ASP.
<title>HTML Ordered List</title> 1. Beetroot HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields,
</head> 2. Ginger HTML Description Lists checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, and Text element:
<body> 3. Potato The definition/Description list is the ideal way to present a glossary, list of terms, or other name/value list. label elements. HTML Forms are used to select different kinds of user input. A form is defined with a <form> tag. Text element are data entry field used in a HTML forms. Text field accept a single line of text entry.
<ol> 4. Radish <input type=”text” name=txt_name value=”some value”>
<li>Beetroot</li> Definition List makes use of following three tags. A form has two duties: to collect information from the user and to send that information to a separate web page Events:
for processing. For example, whenever you submit personal information to a web, you are using a form. Or JavaScript provides the following event handlers for the text object’s events.
<li>Ginger</li> Focus()
whenever you type the keyword into your search engine, you are using a form. Forms are the heart and soul of  onFocus()
<li>Potato</li> <dl> - Defines the start of the list Blur()
the World wide web.  onBlur()
<li>Radish</li> <dt> - A term Select()
 onSelct()
</ol> <dd> - Term definition Change()
 onChande()
</body> </dl> - Defines the end of the list
</html> HTML Forms - The Input Element Password Element:
The most important form element is the <input> element. The <input> element is used to select user All keystroke for this field are displayed as an asterisk (*). This make password element ideal for accepting input
A description list is a list of terms/names, with a description of each term/name.
The type Attribute information. An <input> element can vary in many ways, depending on the type attribute. An <input> element of confidential information, such as password, bank a/c number etc.
You can use type attribute for <ol> tag to specify the type of numbering you like. By default it is a number. <dl> can be of type text field, checkbox, password, radio button, submit button, and more. <input type=”password” name=”txt_pwd” value=””>

om
Coffee
Following are the possible options: <dt>Coffee</dt> Events:
- black hot drink The most common input types are given below: JavaScript provides the following event handlers for the password object’s events.
<dd>- black hot drink</dd> Focus()
Milk  onFocus()
<ol type="1"> - Default-Case Numerals. <dt>Milk</dt> Syntax: Blur()
- white cold drink <input type="value">  onBlur()
<ol type="I"> - Upper-Case Numerals. .c <dd>- white cold drink</dd> Select()

.c
 onSelct()
<ol type="i"> - Lower-Case Numerals. </dl> Change()
Attribute value Description  onChande()
<ol type="a"> - Lower-Case Letters.
tu

tu
<ol type="A"> - Upper-Case Letters. Text A text field Button Element:
HTML Colors: Password A password text field where each keystroke appears as an * The HTML Button element is a commonly used form object. It is generally used to trigger appropriate form level
al

al
The start Attribute Button A new button other than submit and reset button processing.
You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the CSS colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color Checkbox A checkbox <input type=”button” name=”btn_ok” value=”ok”>
ep

ep
possible options: values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 Radio A radio button
(hex FF). Color names are also defined in HTML like: Aqua, Black, Blue, Brown, Cyan, Red, Gold, Indigo, etc. Reset A reset button Events: JavaScript provides the following event handlers for the buttonobject’s events.
<ol type="1" start="4"> - Numerals starts with 4. Hex values are written as 3 double digit numbers, starting with a # sign. Submit A submit button Click()  onClick()
an

an
Color Color HEX Color RGB Select A selection list
<ol type="I" start="4"> - Numerals starts with IV.
TextArea A multiline text entry field
<ol type="i" start="4"> - Numerals starts with iv. #000000 rgb(0,0,0) Submit Button Element:
Hidden A field that may contain value but is not displayed within a form
<ol type="a" start="4"> - Letters starts with d. The submit button is a special purpose button. The submit button submits the current data held in each data
bc

bc
#FF0000 rgb(255,0,0)
<ol type="A" start="4"> - Letters starts with D. element to webserver for further processing.
#00FF00 rgb(0,255,0) Creating Forms:
<input type=”Submit” name=”btn_submit” value=”SUBMIT”>
#0000FF rgb(0,0,255) A form is created using a <form> tag
Example Events:
#FFFF00 rgb(255,255,0) <form method=POST action=”samepage url.asp”> JavaScript provides the following event handlers for the submit object’s events.
Following is an example where we used <ol type="i" start="4" > Click()
Method:  onClick()
#00FFFF rgb(0,255,255)
The method tag can be set either GET or POST
<html> #FF00FF rgb(255,0,255) GET: GET method sends the data captured by form element to the web server encoded into URL, which
<head> #C0C0C0 rgb(192,192,192) The Reset Button Element:
points to web server. The data captured in form element is appended to the URL.
<title>HTML Ordered List</title> This will produce following result: #FFFFFF rgb(255,255,255) <input type=”Reset” name=”btn_reset” value=”RESET”>
</head> iv. Beetroot Events:
POST: POST method sends the data captured by form element back to the web server as a separate bit JavaScript provides the following event handlers for the Reset object’s events.
<body> v. Ginger Click()
stream of data. When there is a large amount of data to be send back to the web server, this method is  onClick()
<ol type="i" start="4"> vi. Potato
used.
<li>Beetroot</li> vii. Radish
<li>Ginger</li> The checkbox element
 If the method attribute is not specified to the <form> </form> tags, the default method used by the
<li>Potato</li> <input type=”checkbox” value=”yes” name=”yes/no” CHECKED>
browser to send data back to the web server is GET method.
<li>Radish</li>
Action: Events:
</ol> JavaScript provides the following event handlers for the checkbox object’s events.
Source: http://www.devcpgn.blogspot.com Unit1:9 Source: http://www.devcpgn.blogspot.com Unit1:10 Source: http://www.devcpgn.blogspot.com Unit1:11  onClick()
Source: http://www.devcpgn.blogspot.com Unit1:12

Click() ↑ ↑ ↑ UPWARDS ARROW Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a far better look
to your HTML page in comparison to HTML attributes.
→ → → RIGHTWARDS ARROW
The Radio Element: ↓ ↓ ↓ DOWNWARDS ARROW Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device. By
♠
<input type= “radio” name=”Radio group name” value=”” CHECKED> ♠ &spades; BLACK SPADE SUIT using the same HTML document, different versions of a website can be presented for handheld devices such as
Event JavaScript provides the following event handlers for the radio object’s events. PDAs and cell phones or for printing.
Clicked() ♣ ♣ &clubs; BLACK CLUB SUIT
 onClicked()
♥ ♥ &hearts; BLACK HEART SUIT Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So
it’s a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.
♦ ♦ &diams; BLACK DIAMOND SUIT
TextArea Element: Platform Independence − The Script offer consistent platform independence and can support latest browsers as
The textarea form element provides a way to create a customized size, multiple line text entry. well.
Some Mathematical Symbols:
<textarea rows="4" cols="50"> Syntax :
Char Number Entity Description
A CSS rule has two main parts: a selector and one or more declarations. Selector is normally the HTML
</textarea> ∀ ∀ ∀ FOR ALL
element you want to style and each declaration consists of a property and value. The property is the style
Event:
JavaScript provides the following event handlers for the TextArea object’s events. ∂ ∂ ∂ PARTIAL DIFFERENTIAL attribute we want to use and each property has a value associated with it.
Focus() ∃ HTML <span> Tag:
 onFocus() ∃ ∃ THERE EXISTS
om

om
Blur()
 onBlur() ∅ ∅ ∅ EMPTY SETS A <span> element used to color a part of a text:
Select() * For Detail CSS
 onSelect() Example: <p>My mother has <span style="color:blue">blue</span> eyes.</p>
∇ ∇ ∇ NABLA Properties reference
The select and Option element: ∈ ∈ ∈ ELEMENT OF to CSS.doc
.c

.c
A select object on HTML form appears as srop-down list or scrollable list of selectable items. Events:
∉ ∉ ∉ NOT AN ELEMENT OF
<SELECT Name=”Items”>
tu

tu
<option SELECTED> Computer ∋ ∋ &ni; CONTAINS AS MEMBER Events can be user actions, such as clicking a mouse button or pressing a key, or system occurrences, such as Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table>
<option> Mouse ∏ ∏ ∏ N-ARY PRODUCT running out of memory. etc.
al

al
<option> Keyboard Property - A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into
∑ ∑ ∑ N-ARY SUMMATION
</SELECT> CSS properties. They could be color, border etc.
ep

ep
Value - Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.
HTML Div tags:
If the <SIZE> attribute is set to a value less than the actual choice available in the select list a scrollable list will Example:
an

an
be created. The <div> tag defines a division or a section in an HTML document. The <div> element is very often used together Review of CSS: p {color:red;text-align:center;}
<SELECT name=”items” size=2 MULTIPLE> * to select multiple objects MULTIPLE attribute must be used. with CSS, to layout a web page. By default, browsers always place a line break before and after the <div> element.
<option SELECTED> Computer However, this can be changed with CSS. Introduction:
Inserting CSS
bc

bc
<option> Mouse Attribute Value Description Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document
<option> Keyboard align left Not supported in HTML5. written in a markup language. It was intended to allow developers to separate content from design and layout We can use style sheets in three different ways in our HTML document. CSS can be added to HTML in the
</SELECT> right Specifies the alignment of the content inside a <div> element following ways:
so that HTML could perform more of the function without worry about the design and layout. It is used to
center o Inline - using the style attribute in HTML elements
separate style from content.
justify
Advantages of CSS o Internal - using the <style> element in the <head> section
Special Characters: <body> <body> o External - using an external CSS file
<div id="container" style="width:500px"> <table width="500"> CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.
Certain characters are taken to have special meaning within the context of an HTML document. <div id="header" style="background-color:#FFA500;"> <tr> style for each HTML element and apply it to as many Web pages as you want.
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <td colspan="2" style="background-color:#FFA500;"> When there more than one style specified for an HTML element than inline style (inside an HTML element) has
Char Number Entity Description <h1>Main Title of Web Page</h1> the highest priority, which means that it will override a style defined inside the <head> tag, or in an external
<div id="menu" style="background- </td></tr>
© © © COPYRIGHT SIGN Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time. Just write one style sheet, or in a browser (a default value).
color:#FFD700;height:200px;width:100px;float:left;"> <tr>
® ® ® REGISTERED SIGN <b>Menu</b><br> <td style="background-color:#FFD700;width:100px;"> CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.
HTML<br> <b>Menu</b><br>HTML<br>CSS<br>JavaScript
* If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style
€ € € EURO SIGN Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will
CSS<br> </td> sheet will override the internal style sheet!
™ ™ ™ TRADEMARK JavaScript</div> <td style="background- be updated automatically.
color:#EEEEEE;height:200px;width:400px;"> Inline Styles
← ← ← LEFTWARDS ARROW <div id="content" style="background- Content goes here</td>
color:#EEEEEE;height:200px;width:400px;float:left;"> </tr>
Source: http://www.devcpgn.blogspot.com Unit1:13 Content goes here</div> <tr>
Source: http://www.devcpgn.blogspot.com Unit1:14 Source: http://www.devcpgn.blogspot.com Unit1:15 Source: http://www.devcpgn.blogspot.com Unit1:16
<div id="footer" style="background-color:#FFA500;clear:both;text- <td colspan="2" style="background-color:#FFA500;text-
align:center;"> align:center;">
Copyright © www.devcpgn.blogspot.com</div> Copyright ©www.devcpgn.blogspot.com </td>
An inline style can be used if a unique style is to be applied to one single occurrence of an element. To use inline You can define style rules based on the class attribute of the elements. All the elements having that class will be JavaScript Statements:
styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example formatted according to the defined rule. Why JavaScript?
JavaScript statements are "instructions" to be "executed" by the web browser. This JavaScript statement tells
below shows how to change the text color and the left margin of a paragraph: .black {  JavaScript can be used to create cookies
the browser to write "Hello World" to the web page:
color: #000000;  Transmitting information about the user's reading habits and browsing activities to various websites.
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
} Web pages frequently do this for web analytics, ad tracking, personalization or other purposes. document.write("Hello World");
Examples: This rule renders the content in black for every element with class attribute set to black in our document.  Interactive content, for example games, and playing audio and video
The semicolon is optional (according to the JavaScript standard), and the browser is supposed to
The ID Selectors  Validating input values of a Web form to make sure that they are acceptable before being submitted to
<html> You can define style rules based on the id attribute of the elements. All the elements having that id will be interpret the end of the line as the end of the statement.
the server.
<body style="background-color:yellow;"> formatted according to the defined rule.  Loading new page content or submitting data to the server via AJAX without reloading the page (AJAX: JavaScript Code:
<h2 style="background-color:red; text-align:center;">This is a heading</h2> #black { Asynchronous JavaScript and XML: Using AJAX, webpages get updated in the background without
<p style="background-color:green;">This is a paragraph.</p> color: #000000; JavaScript code (or just JavaScript) is a sequence of JavaScript statements. Each statemen is executed by the
reloading and refreshing the webpage)
<h1 style="font-family:verdana;">A heading</h1> } browser in the sequence they are written. Following example will write a heading and two paragraphs to a web
 Animation of page elements, fading them in and out, resizing them, moving them, etc.
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> This rule renders the content in black for every element with id attribute set to black in our document. page:
</body>
The HTML <script> tag is used to insert a JavaScript into an HTML page. A simple example is given below: Example
</html>
Grouping and Nesting Selectors <html> <script type="text/javascript">
<body> The example below shows how to add HTML tags to the JavaScript: document.write("<h1>This is a heading</h1>");
<html>
<script type="text/javascript"> document.write("<p>This is a paragraph.</p>");

om
Internal Style Sheet <body>
document.write("Hello World!"); document.write("<p>This is another paragraph.</p>");
Pseudo Classes and Elements <script type="text/javascript">
</script> </script>
An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the document.write("<h1>Hello World!</h1>");
</body> </script>
<head> section of an HTML page, by using the <style> tag, like this:
.c

.c
</html> </body>
JavaScript Code Blocks:
<head> </html>
tu

tu
<style> JavaScript statements can be grouped together in code blocks, inside curly brackets {...}. The purpose of code
body {background-color:yellow;} blocks is to define statements to be executed together. One place you will find statements grouped together in
al

al
p {color:blue;} blocks, are in JavaScript functions:
</style> JavaScript Comments Example
ep

ep
</head> function myFunction() {
JavaScript comments can be used to explain JavaScript code, and to make it more readable. It can also be used
document.write("hello");
to prevent execution, when testing alternative code.
document.write("Dev");
an

an
External Style Sheet Single Line Comments }

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can Single line comments start with //.
bc

bc
change the look of an entire Web site by changing one file. Each page must link to the style sheet using the Any text between // and the end of the line, will be ignored by JavaScript (will not be executed). JavaScript Keywords
<link> tag. The <link> tag goes inside the <head> section: The given example uses a single line comment at the end of each line, to explain the code:
JavaScript statements often start with a keyword to identify the JavaScript action to be performed. Some of the
<head>
JavaScript keywords or reserved words are:
<link rel="stylesheet" type="text/css" href="mystyle.css"> var x = 5; // Declare x, give it the value of 5
</head> var y = x + 2; // Declare y, give it the value of x + 2
Client-side Programming (Review of JavaScript): abstract default float
CSS Comments
Introduction to JavaScript: boolean delete for
Comments are used to explain your code, and may help you when you edit the source code at a later date.
break do function
Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/" JavaScript is a Scripting Language. A scripting language is a lightweight programming language. JavaScript code byte double goto
Eg. /* this is a css comment */ can be inserted into any HTML page, and it can be executed by all types of web browsers. Multi-line Comments case else if
JavaScript is used to make web pages interactive. It runs on your visitor's computer and doesn't require constant catch enum implements
downloads from your website. JavaScript and Java are completely different languages, both in concept and Multi-line comments start with /* and end with */. Any text between /* and */ will be ignored by JavaScript.
char export import
design. /*
class extends in
ID and Class Selectors This is the example of
const false instanceof
 Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely when you write Multiline comment
The Class Selectors continue final int
JavaScript statements, create or call variables, objects and functions. */
debugger finally interface
Source: http://www.devcpgn.blogspot.com Unit1:17 Source: http://www.devcpgn.blogspot.com Unit1:18 Source: http://www.devcpgn.blogspot.com Unit1:19 Source: http://www.devcpgn.blogspot.com Unit1:20

long short true  JavaScript Assignment Operators result = (a > b) ? "A is greater" : "B is greater ";
native static try document.write(result);
Assignment operators assign values to JavaScript variables.
new super typeof document.write("<br/>");
null switch var JavaScript Operators: Operator Example Same As Example2 </script>
package synchronized void </body>
= x=y x=y var x = 10;
private this volatile 1. Arithmetic Operators </html>
+= x += y x=x+y x += 5;
protected throw while 2. Comparison Operators x -= 5;
public throws with 3. Logical (or Relational) Operators -= x -= y x=x–y txt1 = "Dev"; JavaScript Functions:
return transient 4. Assignment Operators *= x *= y x=x*y txt2 = "Cpgn";
5. Conditional (or ternary) Operators txt3 = txt1 + " " + txt2; Like any other advanced programming language, JavaScript also supports all the features necessary to write
/= x /= y x=x/y
modular code using functions. A JavaScript function is a block of code designed to perform a particular task.
JavaScript Variables: %= x %= y x=x%y
 Arithmetic Operators JavaScript allows us to write our own functions as well.
As with algebra, JavaScript variables are used to hold values or expressions. A variable can have a short name,
like x, or a more descriptive name, like lastname. Arithmetic operators are used to perform arithmetic on numbers (literals or variables). Function Definition
 JavaScript Comparison Operator
Rules for JavaScript variable names: Operator Description Before we use a function, we need to define it. The most common way to define a function in JavaScript is by
Operator Description Example (let x=3)
 Variable names are case sensitive (a and A are two different variables) + Addition using the function keyword, followed by a unique function name, a list of parameters (that might be empty), and
om

om
 Variable names must begin with a letter or the underscore character == equal to X==3 True a statement block surrounded by curly braces.
- Subtraction
 Names can contain letters, digits, underscores, and dollar signs. === is exactly equal to value and type X===3 True
* Multiplication Syntax:
 Names must begin with a letter != not equal X!=3 False
 Names can also begin with $ and _ / Division
.c

.c
!== not equal value or not equal type X!==5 True <script type="text/javascript">
 Reserved words (like JavaScript keywords) cannot be used as names % Modulus function functionname(parameter-list)
> greater than x>5 False {
tu

tu
You can declare JavaScript variables with the var statement: ++ Increment statements
< less than X<5 True
}
Example -- Decrement >= greater than or equal to x>=5 False
al

al
Or simply you can write </script>
var x = 5; Example:
X=5; <= less than or equal to X<=2 True
var y = 6;
ep

ep
var z = x + y; <html> document.write(result);
Example:
<body> document.write(linebreak);
<script type="text/javascript">  Logical Operators:
<script type="text/javascript">
an

an
JavaScript Data types var a = 22;b = 5; document.write("a + b + c = ");
Logical operators are used to determine the logic between variables or values. function sayHello()
var c = "Test"; result = a + b + c; {
One of the most fundamental characteristics of a programming language is the set of data types it supports. Operator Description Example (let x=5 and y=2)
var linebreak = "<br />"; document.write(result); alert("Hello there");
These are the type of values that can be represented and manipulated in a programming language. JavaScript && AND (x<7 && y>1) is true
bc

bc
document.write(linebreak); }
variables can hold many data types: numbers, strings, arrays, objects and more: document.write("a + b = "); || OR (x<7 || y>5) is true </script>
result = a + b; a = a++; ! NOT !(x==y) is true
Example: document.write(result); document.write("a++ = ");
var length = 10; // Number document.write(linebreak); result = a++;
 Conditional Operator (? :) Calling a Function
document.write(result);
var firstName = "Kamal"; // String
document.write("a - b = "); document.write(linebreak); The conditional operator first evaluates an expression for a true or false value and then executes one of the two To invoke a function somewhere later in the script, you would simply need to write the name of that function as
var colors = ["Red", "Green", "Blue"]; // Array
document.write(a-b); given statements depending upon the result of the evaluation. shown in the following code.
var x = {firstName:"Binod", lastName:"Aryal"}; // Object
document.write(linebreak); b = b--;
document.write("b-- = "); Example: <html>
document.write("a / b = "); result = b--; <head>
JavaScript has dynamic types. This means that the same variable can be used as different types: result = a / b; document.write(result); <html>
document.write(result); document.write(linebreak); <body> <script type="text/javascript">
var x; // Now x is undefined <script type="text/javascript">
document.write(linebreak); </script> function sayHello()
var x = 10; // Now x is a Number {
</body> var a = 30;
var x = "Kamal"; // Now x is a String document.write("a % b = "); </html> document.write ("Hello there!");
var b = 20;
result = a % b; }
//var linebreak = "<br />";
</script>

Source: http://www.devcpgn.blogspot.com Unit1:21 Source: http://www.devcpgn.blogspot.com Unit1:22 Source: http://www.devcpgn.blogspot.com Unit1:23 Source: http://www.devcpgn.blogspot.com Unit1:24
</head> var result; <head> <input type="button" value="Click Me" onclick="getValue();" />
<body> result = concatenate('Ram', 'Sita'); </form>
<p>Click the button to call the function</p> document.write (result ); <script type="text/javascript">
<form> } function getConfirmation(){ </body>
<input type="button" onclick="sayHello()" value="Say Hello"> </script> var retVal = confirm("Do you want to continue ?"); </html>
</form> </head> if( retVal == true ){
</body> <body> document.write ("User wants to continue!");
</html> <form> return true;
<input type="button" onclick="secondFunction()" value="Call Function"> }
</form> else{ JavaScript - Events
Function Parameters </body> Document.write ("User does not want to continue!");
</html> return false; What is an Event?
There is a facility to pass different parameters while calling a function. These passed parameters can be }
} JavaScript's interaction with HTML is handled through events that occur when the user or the browser
captured inside the function and any manipulation can be done over those parameters. A function can take
</script> manipulates a page.
multiple parameters separated by comma. JavaScript - Dialog Boxes
</head> When the page loads, it is called an event. When the user clicks a button, that click too is an event. Other
<html>
JavaScript supports three important types of dialog boxes. These dialog boxes can be used to raise and alert, or
<body>
<head> to get confirmation on any input or to have a kind of input from the users. examples include events like pressing any key, closing a window, resizing a window, etc. Developers can use
<form>
<input type="button" value="Click Me" onclick="getConfirmation();" /> these events to execute JavaScript coded responses, which cause buttons to close windows, messages to be
1) Alert Dialog Box

om
<script type="text/javascript"> </form> displayed to users, data to be validated, and virtually any other type of response imaginable.
function sayHello(name, age)
{ An alert dialog box is mostly used to give a warning message to the users. For example, if one input field HTML 5 Standard Events
</body>
document.write (name + " is " + age + " years old."); requires to enter some text but the user does not provide any input, then as a part of validation, you can use an </html>
} .c alert box to give a warning message. The standard HTML 5 events are listed below: Here script indicates a JavaScript function to be executed against

.c
</script> that event.
Nonetheless, an alert box can still be used for friendlier messages. Alert box gives only one button "OK" to select
tu

tu
</head>
3) Prompt Dialog Box Attribute Value Description
and proceed.
<body> Offline script Triggers when the document goes offline
The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus, it enables you
<form> Example:
al

al
to interact with the user. The user needs to fill in the field and then click OK. Onabort script Triggers on an abort event
<input type="button" onclick="sayHello('Dev', 25)" value="Say Hello">
Onafterprint script Triggers after the document is printed
</form> <html> This dialog box is displayed using a method called prompt() which takes two parameters: (i) a label which you
ep

ep
</body> Onbeforeonload script Triggers before the document loads
<head>
</html> want to display in the text box and (ii) a default string to display in the text box. Onbeforeprint script Triggers before the document is printed
<script type="text/javascript">
function Warn() { Onblur script Triggers when the window loses focus
This dialog box has two buttons: OK and Cancel. If the user clicks the OK button, the window method prompt()
an

an
alert ("This is a warning message!"); Oncanplay script Triggers when media can start play, but might has to stop for buffering
document.write ("This is a warning message!");
will return the entered value from the text box. If the user clicks the Cancel button, the window method
The return Statement Oncanplaythrough script Triggers when media can be played to the end, without stopping for
} prompt() returns null.
buffering
A JavaScript function can have an optional return statement. This is required if you want to return a value from a </script>
bc

bc
Example: Onchange script Triggers when an element changes
function. This statement should be the last statement in a function.
</head> Onclick script Triggers on a mouse click
For example, you can pass two numbers in a function and then you can expect the function to return their <body> <html> Oncontextmenu script Triggers when a context menu is triggered
multiplication in your calling program. <form> <head> Ondblclick script Triggers on a mouse double-click
<input type="button" value="Click Me" onclick="Warn();" />
Ondrag script Triggers when an element is dragged
</form> <script type="text/javascript">
</body> 
{
</script> Ondrop script Triggers when dragged element is being dropped
var full; A confirmation dialog box is mostly used to take user's consent on any option. It displays a dialog box with two
full = first + last; Ondurationchange script Triggers when the length of the media is changed
buttons: Ok and Cancel. </head>
return full; Onemptied script Triggers when a media resource element suddenly becomes empty.
} If the user clicks on the OK button, the window method confirm() will return true. If the user clicks on the Cancel Onended script Triggers when media has reach the end
<body>
button, then confirm() returns false. You can use a confirmation dialog box as follows. <p>Click the following button to see the result: </p> Onerror script Triggers when an error occur
function secondFunction()
{
Onfocus script Triggers when the window gets focus
<html> <form>
Source: http://www.devcpgn.blogspot.com Unit1:25 Source: http://www.devcpgn.blogspot.com Unit1:26 Source: http://www.devcpgn.blogspot.com Unit1:27 Source: http://www.devcpgn.blogspot.com Unit1:28

Onformchange script Triggers when a form changes Onwaiting script Triggers when media has stopped playing, but is expected to resume For example, the following line causes a runtime error because here the syntax is correct, but at runtime, it is
catch ( e ) {
Onforminput script Triggers when a form gets user input Some Examples: trying to call a method that does not exist.
alert("Error: " + e.description );
Onhaschange script Triggers when the document has change }
onclick Event <script type="text/javascript">
Oninput script Triggers when an element gets user input window.printme();
Oninvalid script Triggers when an element is invalid </script> finally {
This is the most frequently used event type which occurs when a user clicks the left button of his mouse. You
alert("Finally block will always execute!" );
Onkeydown script Triggers when a key is pressed can put your validation, warning etc., against this event type. }
Onkeypress script Triggers when a key is pressed and released }
Exceptions also affect the thread in which they occur, allowing other JavaScript threads to continue normal
Onkeyup script Triggers when a key is released <html> </script>
<head>
execution.
Onload script Triggers when the document loads
<script type="text/javascript"> </head>
Onloadeddata script Triggers when media data is loaded Logical Errors <body>
function sayHello() {
Onloadedmetadata script Triggers when the duration and other media data of a media element alert("Hello World") <p>Click the following to see the result:</p>
Logic errors can be the most difficult type of errors to track down. These errors are not the result of a syntax or
is loaded }
Onloadstart script Triggers when the browser starts to load the media data runtime error. Instead, they occur when you make a mistake in the logic that drives your script and you do not <form>
</script>
get the result you expected. <input type="button" value="Click Me" onclick="myFunc();" />
Onmessage script Triggers when the message is triggered </head>
</form>
Onmousedown script Triggers when a mouse button is pressed <body>
You cannot catch those errors, because it depends on your business requirement what type of logic you want to </body>
Onmousemove script Triggers when the mouse pointer moves </html>
<form> put in your program.
Onmouseout script Triggers when the mouse pointer moves out of an element <input type="button" onclick="sayHello()" value="Say Hello" />
om

om
Onmouseover script Triggers when the mouse pointer moves over an element </form> The try...catch...finally Statement
How to get the value of textbox in JavaScript
Onmouseup script Triggers when a mouse button is released JavaScript implements the try...catch...finally construct as well as the throw operator to handle exceptions. You
</body> Syntax:
Onmousewheel script Triggers when the mouse wheel is being rotated can catch programmer-generated and runtime exceptions, but you cannot catch JavaScript syntax errors. Here is
</html>
Onoffline script Triggers when the document goes offline the try...catch...finally block syntax –
.c

.c
var x = document.getElementById("myText").value;
Onoine script Triggers when the document comes online or
<script type="text/javascript">
tu

tu
Ononline script Triggers when the document comes online var x = document.FormName.TextFieldName.value;
try {
Onpagehide script Triggers when the window is hidden // Code to run
Onpageshow script Triggers when the window becomes visible [break;]
al

al
}
Onpause script Triggers when media data is paused Error Handling Example:
Onplay script Triggers when media data is going to start playing catch ( e ) {
ep

ep
Error can occur due to wrong input, from a user, or from an Internet server. It can be syntax error or any <html>
Onplaying script Triggers when media data has start playing // Code to run if an exception occurs
unexpected things. There are three types of errors in programming: [break;] <head>
Onpopstate script Triggers when the window's history changes
} <title>Get value of text box in Javascript</title>
Onprogress
an

script Triggers when the browser is fetching the media data

an
(a) Syntax Errors
Onratechange script Triggers when the media data's playing rate has changed (b) Runtime Errors [ finally {
// Code that is always executed regardless of <script language="javascript" type="text/javascript">
Onreadystatechange script Triggers when the ready-state changes (c) Logical Errors
// an exception occurring function GetValue()
bc

bc
Onredo script Triggers when the document performs a redo
}] {
Onresize script Triggers when the window is resized </script>
Syntax Errors var name = document.getElementById('txtUserName').value;
Onscroll script Triggers when an element's scrollbar is being scrolled
var address=document.MyForm.txtaddress.value;
Onseeked script Triggers when a media element's seeking attribute is no longer true, Syntax errors, also called parsing errors are typically coding errors or typing mistakes made by the programmer. The try block must be followed by either exactly one catch block or one finally block (or one of both). When an alert(name);
and the seeking has ended
Syntax error occur at compile time in traditional programming languages and at interpret time in JavaScript. For exception occurs in the try block, the exception is placed in “e” and the catch block is executed. The optional alert(address);
Onseeking script Triggers when a media element's seeking attribute is true, and the
seeking has begun
example, the following line causes a syntax error because it is missing a closing parenthesis. finally block executes unconditionally after try/catch. }
Onselect script Triggers when an element is selected <script type="text/javascript"> </script>
Onstalled script Triggers when there is an error in fetching media data Document.write(“Hello ”; The given below example describes the try catch and finally block </head>
Onstorage script Triggers when a document loads </script> <html> <body>
Onsubmit script Triggers when a form is submitted <head> <h1>Get Value of Text Box in JavacScript</h1>
<script type="text/javascript"> <form name="MyForm">
Onsuspend script Triggers when the browser has been fetching media data, but stopped Runtime Errors function myFunc()
before the entire media file was fetched { <input id="txtUserName" type="text" /><br/>
Ontimeupdate script Triggers when media changes its playing position Runtime errors, also called exceptions, occur during execution (after compilation/interpretation). var a = 100; <input id="txtaddress" type="text" name="txtUser"/> <br/>
Onundo script Triggers when a document performs an undo <input type="button" value="Btn1" onclick="GetValue()" />
Onunload script Triggers when the user leaves the document try {
alert("Value of variable a is : " + a );
</form>
Onvolumechange script Triggers when media changes the volume, also when volume is set to } </body>
"mute"
Source: http://www.devcpgn.blogspot.com Unit1:29 Source: http://www.devcpgn.blogspot.com Unit1:30 Source: http://www.devcpgn.blogspot.com Unit1:31 Source: http://www.devcpgn.blogspot.com Unit1:32
</html> isNaN( document.myForm.Zip.value ) || Deleting a cookie is very simple. Just set the expires parameter to a passed date:
</body> document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
document.myForm.Zip.value.length != 5 ) </html>
Note that you don't have to specify a cookie value when you delete a cookie.
{

alert( "Please provide a zip in the format #####." ); Creating Cookies Example:
Cookies
document.myForm.Zip.focus() ; <html>
Form Validation Cookies are data, stored in small text files, on your computer. When a web server has sent a web page to a
return false; <head>
JavaScript provides a way to validate form's data on the client's computer before sending it to the web server. browser, the connection is shut down, and the server forgets everything about the user. Cookies were invented
} to solve the problem "how to remember information about the user": <script type="text/javascript">
Form validation is the process of checking that a form has been filled in correctly before it is processed. For function WriteCookie()
 When a user visits a web page, his name can be stored in a cookie.
{
example, if your form has a box for the user to type their email address, you might want your form handler to if( document.myForm.Country.value == "-1" )  Next time the user visits the page, the cookie "remembers" his name. if( document.myform.customer.value == "" ){
check that they've filled in their address before you deal with the rest of the form. You can check your form from alert("Enter some value!");
{
either server side or client side. Client side validation is easier and simpler than server side validation. Client side Cookies are saved in name-value pairs like: return;
form validation is usually done using JavaScript. You can validate your form against the following. alert( "Please provide your country!" ); }
Username=Dolly
return false; cookievalue= escape(document.myform.customer.value) + ";";
- Checking for empty text boxes document.cookie="name=" + cookievalue;
- Numbers validation } When a browser request a web page from a server, cookies belonging to the page is added to the request. This document.write ("Setting Cookies : " + "name=" + cookievalue );
- Check for letters return( true );
way the server gets the necessary data to "remember" information about users. }

om
</script>
- Check the selection made or not }
- Email validation Create a Cookie with JavaScript
</head>
</script> JavaScript can create cookies, read cookies, and delete cookies with the property document.cookie.
- Password Validation
.c With JavaScript, a cookie can be created like this:

.c
</head> <body>
Here is a simple example of validation. document.cookie="username=Dev cpgn";
<body> <form name="myform" action="">
tu

tu
<form name="myForm" onsubmit="return(validate());"> You can also add an expiry date (in UTC or GMT time). By default, the cookie is deleted when the browser is
<html> Enter name: <input type="text" name="customer"/>
<table cellspacing="2" cellpadding="2" border="1"> closed.
<input type="button" value="Set Cookie" onclick="WriteCookie();"/>
<head> Name Description
al

al
<tr> </form>
<title>Form Validation</title> Name=”Value” Specifies the name of the cookie Required
<td align="right">Name</td>
<script type="text/javascript">
<td><input type="text" name="Name" /></td> PATH=”path” Specifies the path of the URLs for which the cookie is valid. If the Optional </body>
ep

ep
// Form validation code will come here. </tr> URL matches both the PATH and the DOMAIN, then the cookie is </html>
function validate() <tr> sent to the server in the request in the request header. (If left
<td align="right">EMail</td> unset , the value of the PATH is the same as the document that Reading Cookies Example:
an

an
{ <td><input type="text" name="EMail" /></td> set the cookie). This may be blank if you want to retrieve the
if( document.myForm.Name.value == "" ) </tr> <html>
cookie from any directory or page.
<head>
{ <tr> EXPIRES=date Specifies the expiry date of the cookie. After this date the cookie Optional
bc

bc
<td align="right">Zip Code</td> will no longer be stored by the client or sent to the server. If this <script type="text/javascript">
alert( "Please provide your name!" ); <td><input type="text" name="Zip" /></td> is blank the cookie will expires when browser is closed. function ReadCookie()
document.myForm.Name.focus() ; </tr>
DOMAIN=domain Specifies the domain portion of the URLs for which the cookie is Optional {
return false; <tr> valid. The default value for this attribute is the domain of the var allcookies = document.cookie;
<td align="right">Country</td> current document setting the cookie. document.write ("All Cookies : " + allcookies );
} <td>
<select name="Country">
SECURE Specifies that the cookie should only be transmitted over a secure Optional
// Get all the cookies pairs in an array
<option value="-1" selected>[choose yours]</option> over a secure link
cookiearray = allcookies.split(';');
if( document.myForm.EMail.value == "" ) <option value="1">USA</option> Example:
<option value="2">UK</option>
{ <option value="3">INDIA</option>
document.cookie="username=Dev cpgn; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"; // Now take key value pair out of this array
</select> for(var i=0; i<cookiearray.length; i++){
alert( "Please provide your Email!" ); </td> name = cookiearray[i].split('=')[0];
Read a Cookie with JavaScript
document.myForm.EMail.focus() ; </tr> value = cookiearray[i].split('=')[1];
With JavaScript, cookies can be read like this:
document.write ("Key is : " + name + " and Value is : " + value);
return false; <tr> var x = document.cookie; }
<td align="right"></td>
} }
<td><input type="submit" value="Submit" /></td>
</tr> * document.cookie will return all cookies in one string much like: cookie1=value; cookie2=value; cookie3=value; </script>

if( document.myForm.Zip.value == "" || </table> </head>

Delete a Cookie with JavaScript
</form>
Source: http://www.devcpgn.blogspot.com Unit1:33 Source: http://www.devcpgn.blogspot.com Unit1:34 Source: http://www.devcpgn.blogspot.com Unit1:35 Source: http://www.devcpgn.blogspot.com Unit1:36

<body> (Multipurpose Internet Mail Extensions- a specification for formatting non-ASCII messages so that they can
Unit 2: Issue of Web Technology be sent over the Internet. Many e-mail clients now support MIME, which enables them to send and receive  2-Tier Architecture
<form name="myform" action="">
Architectural issues of web layer graphics, audio, and video files via the Internet) specification. A two-tier client/server is a computing architecture in which an entire application is distributed as two
<p> click the following button and see the result:</p>
<input type="button" value="Get Cookie" onclick="ReadCookie()"/> The web layer is also referred to as the UI layer. The web layer is primarily concerned with presenting the distinct layers or tiers. It divides the application logic, data and processing between client and server
</form> user interface and the behavior of the application (handling user interactions/events). While the web layer  HTTP is stateless: This is a direct result of HTTP's being connectionless. The server and client are
devices.
can also contain logic, core application logic is usually located in the services layer. The three Layers within the aware of each other only during a request. Afterwards, each forgets the other. For this reason neither
</body> The two-tier is based on Client Server architecture. The two-tier architecture is like client server
Web Layer are: the client nor the browser can retain information between different requests across the web pages.
</html> application. The direct communication takes place between client and server. There is no intermediate
File Transfer Protocol (FTP): between client and server. Because of tight coupling a 2 tiered application will run faster
HTML-The Content Layer: The content layer is where you store all the content that your customers want to
Setting Cookie Expiry Date:
read or look at. This includes text and images as well as multimedia. It's also important to make sure that every FTP is a protocol for exchanging files over the Internet. FTP works in the same way as HTTP for transferring
<html> aspect of your site is represented in the content layer. That way, your customers who have JavaScript turned Web pages from a server to a user's browser and SMTP for transferring electronic mail across the Internet
<head> off or can't view CSS will still have access to the entire site, if not all the functionality. in that, like these technologies, FTP uses the Internet's TCP/IP protocols to enable data transfer.
<script type="text/javascript"> FTP is most commonly used to download a file from a server using the Internet or to upload a file to a
function WriteCookie() CSS - the Styles Layer: Store all your styles for your Web site in an external style sheet. This defines the way the server (e.g., uploading a Web page file to a server). Sites that have a lot of downloading (software sites,
{ pages should look, and you can have separate style sheets for various media types. Store your CSS in an external
var now = new Date();
for example) will often have an FTP server to handle the traffic. If FTP is involved, the URL will have ftp: at
style sheet so that you can get the benefits of the style layer across the site.
now.setMonth( now.getMonth() + 1 ); the front. FTP can be run in active or passive mode, which determines how the data connection is
om

om
cookievalue = escape(document.myform.customer.value) + ";" established.
JavaScript - the Behavior Layer: JavaScript is the most commonly used language for writing the behavior layer;
document.cookie="name=" + cookievalue; ASP, CGI and PHP can also generate Web page behaviors. However, when most developers refer to the behavior  Active FTP
document.cookie = "expires=" + now.toUTCString() + ";" layer, they mean that layer that is activated directly in the Web browser - so JavaScript is nearly always the Active mode was originally the only method of FTP, and is therefore often the default mode for FTP. In
.c

.c
document.write ("Setting Cookies : " + "name=" + cookievalue ); language of choice. You use this layer to interact directly with the DOM or Document Object Model. active mode, the client sends the server the IP address and port number on which the client will listen, Figure: Two tire architecture
}
and the server initiates the TCP connection.
tu

tu
</script> The above figure shows the architecture of two-tier. Here the direct communication between client and
Hyper Text Transfer Protocol (HTTP): * The client issues a PORT command to the server signaling that it will “actively” provide an IP and
HTTP is the basic protocol used by the World Wide Web. HTTP defines how messages are formatted and transmitted,
server, there is no intermediate between client and server.
</head> port number to open the Data Connection back to the client.
The Two-tier architecture is divided into two parts:
al

al
<body> and what actions Web servers and browsers should take in response to various commands. For example, when you
enter a URL in your browser, this actually sends an HTTP command to the Web server directing it to fetch and 1) Client Application (Client Tier)
<form name="formname" action="">  Passive FTP
ep

ep
transmit the requested Web page. 2) Database (Data Tier)
Enter name: <input type="text" name="customer"/> In this mode the client sends a PASV command to the server and receives an IP address and port number
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
in return. The client uses these to open the data connection to the server. At the condition when the
</form> On client application side the code is written for saving the data in the SQL server database. Client sends
client is behind a firewall and unable to accept incoming TCP connections, passive mode may be
an

an
the request to server and it process the request & send back with data. The main problem of two tier
</body> used.
</html> architecture is the server cannot respond multiple request same time, as a result it cause a data integrity
* The client issues a PASV command to indicate that it will wait “passively” for the server to supply
issue.
bc

bc
an IP and port number, after which the client will create a Data Connection to the server.
Advantages:
Easy to maintain and modification is bit easy
Figure: Internet is based on the client server model Client Server Model
Communication is faster
The client–server model is a computing model that acts as distributed application which partitions tasks or
The client, in this case the browser communicates with the server, requesting a web page. The server processes that Disadvantages:
workloads between the providers of a resource or service, called servers, and service requesters, called clients.
request and responds by sending the web page contents to the browser. In two tier architecture application performance will be degrade upon increasing the users.
Often clients and servers communicate over a computer network on separate hardware, but both client and server
A browser is works as an HTTP client because it sends requests to an HTTP server which is called Web Cost-ineffective
may reside in the same system. A server machine is a host that is running one or more server programs
server. The Web Server then sends responses back to the client. The standard and default port for HTTP servers to
which share their resources with clients. A client does not share any of its resources, but requests a server's content
listen on is 80 but it can be changed to any other port like 8080 etc.
or service function. Clients therefore initiate communication sessions with servers which await incoming requests.  3-Tier Architecture
 HTTP is connectionless: After a request is made, the client disconnects from the server and waits for a Three-tier architecture typically comprise a presentation tier, a business tier, and a data tier. Three layers
A server machine is a host that is running one or more server programs which share their resources with in the three tier architecture are as follows:
response. The server must re-establish the connection after it processes the request.
clients. A client does not share any of its resources, but requests a server's content or service function. Clients 1) Client layer (Presentation layer)
therefore initiate communication sessions with servers which await incoming requests.
 HTTP is media independent: Any type of data can be sent by HTTP as long as both the client and 2) Business layer (Logic layer)
Client/Server architecture can be of different model based on the number of layers it holds. Some of
server know how to handle the data content. How content is handled is determined by the MIME 3) Data layer (Data Access Layer)
them are:
Unit 2:1 Unit 2:2 Unit 2:3
Source: http://www.devcpgn.blogspot.com Source: http://www.devcpgn.blogspot.com Source: http://www.devcpgn.blogspot.com
Source: http://www.devcpgn.blogspot.com Unit1:37
1. Centralization: Unlike P2P, where there is no central administration, here in this architecture there is a Unit 3: The Client Tier
1) Client layer: centralized control. Servers help in administering the whole set-up. Access rights and resource allocation is
 N-Tier Architecture (multi-tier) done by Servers. Introduction to XML:
It is also called as Presentation layer which contains user interface part of application. This layer is used N-tier architecture (with N more than 3) is really 3 tier architectures in which the middle tier is 2. Proper Management: All the files are stored at the same place. In this way, management of files becomes  XML stands for EXtensible Markup Language derived from Standard Generalized Markup Language (SGML).
split up into new tiers. The application tier is broken down into separate parts. easy. Also it becomes easier to find files.  XML was designed to store, carry and exchange data.
for the design purpose where data is presented to the user or input is taken from the user. For example
3. Back-up and Recovery possible: As all the data is stored on server its easy to make a back-up of it. Also, in  XML was designed to be both human- and machine-readable.
designing registration form which contains text box, label, button etc. The primary advantage of N-tier architectures is that they make load balancing possible. Since the
case of some break-down if data is lost, it can be recovered easily and efficiently. While in peer computing  XML is not a replacement for HTML
application logic is distributed between several servers, processing can then be more evenly
we have to take back-up at every workstation.  XML Does Not Use Predefined Tags
2) Business layer: distributed among those servers. N-tiered architectures are also more easily scalable, since only
4. Upgradation and Scalability in Client-server set-up: Changes can be made easily by just upgrading the server.
servers experiencing high demand, such as the application server, need be upgraded. The primary  XML is self-descriptive
Also new resources and systems can be added by making necessary changes in server.
disadvantage of N-tier architectures is that it is also more difficult to program and test an N-tier  XML is Extensible
In this layer all business logic written like validation of data, calculations, data insertion etc. This acts as 5. Accessibility: From various platforms in the network, server can be accessed remotely.
architecture due to its increased complexity.  XML is a software- and hardware-independent tool for storing and transporting data.
an interface between Client layer and Data Access Layer. This layer is also called the intermediary layer 6. As new information is uploaded in database, each workstation need not have its own storage capacities
 HTML is about displaying information, while XML is about carrying information.
helps to make communication faster between client and data layer. increased (as may be the case in peer-to-peer systems). All the changes are made only in central computer
 XML does not DO anything. XML was created to structure, store, and transport information.
on which server database exists.
3) Data layer: 7. Security: Rules defining security and access rights can be defined at the time of set-up of server.
XML is a software- and hardware-independent tool for storing and transporting data. HTML is designed to display
8. Servers can play different roles for different clients.
data. In contrast, XML is designed to transport and store data. XML stands for EXtensible Markup Language and is
Disadvantages

om
In this layer actual database is comes in the picture. Data Access Layer contains methods to connect with much like HTML. XML was designed to carry data, not to display data. XML tags are not predefined. You must define
1. Failure of the server causes whole network to be collapsed
database and to perform insert, update, delete, get data from database based on our input data. your own tags. XML is designed to be self-descriptive.
2. Expensive than P2P, Dedicated powerful servers are needed
3. Extra effort are needed for administering and managing the server.
.c Uses of XML

.c
1. XML is an international standard
Difference between 2 tier and 3 tier architecture
XML is a document standard that is maintained by the W3C (World Wide Web Consortium), an organization that is
tu

tu
S.N 2 tier 3 tier
responsible for Web standards. XML documents are vendor-neutral, and they are not tied to one application or one
1 2Tier is Client server architecture 3Tier is Client, Server and Database architecture
company.
al

al
2 In 2Tier client directly get communication to

al
3Tier has a Middle stage to communicate client to

al
server. server 2. It Separates Data from HTML
3 Client -Server Architecture Web -based application If you need to display dynamic data in your HTML document, it will take a lot of work to edit the HTML each
ep

ep
4 Client will hit request directly to server and Here in between client and server middle ware will time the data changes. With XML, data can be stored in separate XML files.
Figure: Three-tier architecture client will get response directly from server be there, if client hits a request it will go to the 3. It Simplifies Data Sharing:
Figure: N-tier architecture
middle ware and middle ware will send to server In the real world, computer systems and databases contain data in incompatible formats. XML data is stored
an

an
Advantages Client/Server Architecture: and vice versa. in plain text format. This provides a software- and hardware-independent way of storing data. This makes it much
 High performance Client-server architecture (client/server) is a network architecture in which each computer or process on the 5 2-tier means 1) Design layer 2) Data layer 3-tier means 1) Design layer 2) Business layer or easier to create data that can be shared by different applications.
 Scalability – Each tier can scale horizontally Logic layer 3) Data layer 4. XML Simplifies Data Transport:
bc

bc
network is either a client or a server. Servers are powerful computers or processes dedicated to managing disk drives
 Performance – Because the Presentation tier can cache requests, network utilization is minimized, and the (file servers), printers (print servers), or network traffic (network servers). Clients are PCs or workstations on which 6 Fig. Fig. One of the most time-consuming challenges for developers is to exchange data between incompatible
load is reduced on the Application and Data tiers. users run applications. Clients rely on servers for resources, such as files, devices, and even processing power. systems over the Internet. Exchanging data as XML greatly reduces this complexity, since the data can be
 High degree of flexibility in deployment platform and configuration read by different incompatible applications.
 Better Re-use 5. It Makes Your Data More Available:
 Improve Data Integrity Different applications can access your data, not only in HTML pages, but also from XML data sources.
 Improved Security – Client is not direct access to database.
 Easy to maintain and modification is bit easy, won’t affect other modules Where XML is used?
 In three tier architecture application performance is good.
Disadvantages - XML can separate data from HTML
 Increase Complexity/Effort - XML is used to exchange data
- XML can be used to share data
Figure: Client server model
- XML can be used to store data
Advantages - XML can make your data more useful
- XML can be used to create new *ML language

Unit 2:4 Unit 2:5 Unit 2:6 Unit3:1

What is Markup? Rules for Tags and Elements:  Entity References:  Names cannot start with the letters xml (or XML, or Xml, etc)
Markup is information added to a document that enhances its meaning in certain ways, in that it identifies the parts  Each XML-element needs to be closed either with start or with end elements as shown below Some characters have a special meaning in XML. If you place a character like "<" inside an XML element, it will  Names cannot contain spaces
and how they relate to each other. More specifically, a markup language is a set of symbols that can be placed in the  If the XML declaration does not have a closing tag, this is not an error. The declaration is not a part of XML. generate an error because the parser interprets it as the start of a new element. Best Naming Practices
text of a document to demarcate and label the parts of that document. Following example shows how XML markup <element>....</element> or in simple-cases, just this way: <element/>  Make names descriptive. Names with an underscore separator are nice:
looks, when embedded in a piece of text: Nesting of elements This will generate an XML error: <first_name>, <last_name>.
<message> An XML-element can contain multiple XML-elements. Following example shows correct nested tags: <message>salary < 1000</message>
<text>Hello, world!</text> <?xml version="1.0"?> To avoid this error, replace the "<" character with an entity reference:  Names should be short and simple, like this: <book_title> not like this:
</message> <contact-info> <message>salary < 1000</message> <the_title_of_the_book>.
<company>TutorialsPoint</company> There are 5 pre-defined entity references in XML:
Rules for writing XML:
<contact-info> not allowed character replacement-entity character description  Avoid "-" characters. If you name something "first-name," some software may think you want to
Following is a complete XML document:
subtract name from first.
<?xml version="1.0"?> < < less than
Root element: An XML document can have only one root element. For example, following is not a correct XML
<contact-info>
<name>Dev Cpgn</name>
document, because both the x and y elements occur at the top level without a root element: > > greater than  Avoid "." characters. If you name something "first.name," some software may think that "name" is a
<Address>Kawasoti</Address> & & ampersand property of the object "first."
<x>...</x>
<phone>9867031614</phone> ' ' apostrophe
</contact-info>
<y>...</y>  Avoid ":" characters. Colons are reserved to be used for something called namespaces (more later).
The following example shows a correctly formed XML document: " " quotation mark
om

om
The following diagram depicts the syntax rules to write different types of markup and text in an XML document.
<root>  XML documents often have a corresponding database. A good practice is to use the naming rules of your
<x>...</x>  Character References: These contain references, such as A, contains a hash mark (“#”) followed by a database for the elements in the XML documents.
<y>...</y> number. The number always refers to the Unicode code of a character. In this case, 65 refers to alphabet
</root>
.c

.c
"A".  Non-English letters like éòá are perfectly legal in XML, but watch out for problems if your software vendor
Case sensitivity: The names of XML-elements are case-sensitive. That means the name of the start and the end doesn't support them.
tu

tu
elements need to be exactly in the same case. 5) XML Text
The names of XML-elements and XML-attributes are case-sensitive, which means the name of start and end XML Namespace:
For example <contact-info> is different from <Contact-Info>.
al

al
elements need to be written in the same case. A Namespace is a set of unique names. Namespace is a mechanisms by which element and attribute name can be
To avoid character encoding problems, all XML files should be saved as Unicode UTF-8 or UTF-16 files. assigned to group. The Namespace is identified by URI (Uniform Resource Identifiers). A Namspace is declared using
3) Attributes Whitespace characters like blanks, tabs and line-breaks between XML-elements and between the XML-attributes
ep

ep
reserved attributes. Such an attribute name must either be xmlns or begin with xmlns: shown as below:
An attribute specifies a single property for the element, using a name/value pair. An XML-element can have one or will be ignored. <element xmlns:name="URL">
more attributes.
¤ The Namespace starts with the keyword xmlns.
an

an
Comments in XML ¤ The word name is the Namespace prefix.
Rules for XML Attributes:
The syntax for writing comments in XML is similar to that of HTML. ¤ The URL is the Namespace identifier.
 Attribute names in XML (unlike HTML) are case sensitive. That is, HREF and href are considered two
1) XML Declaration 
bc

bc
different XML attributes.
The XML document can optionally have an XML declaration. It is written as below: XML Namespaces provide a method to avoid element name conflicts. In XML, element names are defined by the
 Attribute names are defined without quotation marks, whereas attribute values must always appear in
-> This line is also called the XML prolog: Well Formed XML developer. This often results in a conflict when trying to mix XML documents from different XML applications.
<? xml version="1.0" encoding="UTF-8"?> quotation marks.
XML documents that conform to the syntax rules above are said to be "Well Formed" XML documents. Consider following examples;
Eg.
Where version is the XML version and encoding specifies the character encoding used in the document. A "Well Formed" XML document has correct XML syntax. The syntax rules as described in previous sections are: This XML carries HTML table information:
<note date="12/11/2007"> <table>
Rules for XML Declaration: ¤ XML documents must have a root element
<to>Tove</to> <tr>
 The XML declaration is case sensitive and must begin with "<?xml>" where "xml" is written in lower-case. ¤ XML elements must have a closing tag
<from>Jani</from> <td>Apples</td>
 If document contains XML declaration, then it strictly needs to be the first statement of the XML document. ¤ XML tags are case sensitive
</note> <td>Bananas</td>
 An HTTP protocol can override the value of encoding that you put in the XML declaration. ¤ XML elements must be properly nested
</tr>
¤ XML attribute values must be quoted </table>
4) XML References
2) Tags and Elements This another XML carries information about a table (a piece of furniture):
References usually allow you to add or include additional text or markup in an XML document. References always
An XML file is structured by several XML-elements, also called XML-nodes or XML-tags. XML-elements' names are begin with the symbol "&", which is a reserved character and end with the symbol ";". XML has two types of XML Naming Rules <table>
enclosed by triangular brackets < > as shown below:  XML elements must follow these naming rules: <name>Dining table</name>
references:
<element> <width>80</width>
 Names can contain letters, numbers, and other characters
<length>120</length>
 Names cannot start with a number or punctuation character </table>
Unit3:2 Unit3:3 Unit3:4 Unit3:5
Source: http://www.devcpgn.blogspot.com Source: http://www.devcpgn.blogspot.com Source: http://www.devcpgn.blogspot.com Source: http://www.devcpgn.blogspot.com
If these XML fragments were added together, there would be a name conflict. Both contain a <table> element, but In the above CDATA example, CDATA is used just after the element employee to make the data/text unparsed, so it  XML Schemas are richer and more powerful than DTDs
the elements have different content and meaning. Following is a simple example of internal DTD: PCDATA - Parsed Character Data. will give the value of employee:  XML Schemas are written in XML
An XML parser will not know how to handle these differences. Thus XML namespaces are used for providing XML parsers normally parse all the text in an XML  XML Schemas support data types
<firstname>vimal</firstname><lastname>jaiswal</lastname><email>[email protected]</e
uniquely named elements and attributes in an XML document. <?xml version="1.0" encoding="UTF-8" standalone="yes" ?> document.  XML Schemas support namespaces
mail>
<!DOCTYPE address [ - Basically used for ELEMENTS
Example: <!ELEMENT address (name, company, phone)> Why Use XML Schemas?
Namespace affects only a limited area in the document. An element containing the declaration and all of its <!ELEMENT name (#PCDATA)> CDATA – Just a Character Data (Unparsed)
 External DTD  It is easier to describe allowable document content
descendants are in the scope of the Namespace. Following is a simple example of XML Namespace: <!ELEMENT company (#PCDATA)> The term CDATA is used about text data that
In external DTD elements are declared outside the XML file. They are accessed by specifying the system attributes  It is easier to validate the correctness of data
<?xml version="1.0" encoding="UTF-8"?> <!ELEMENT phone (#PCDATA)> should not be parsed by the XML parser.
which may be either the legal .dtd file or a valid URL. To refer it as external DTD, standalone attribute in the XML  It is easier to work with data from a database
<cont:contact xmlns:cont="www.devcpgn.blogspot.com/profile"> ]> Characters like "<" and "&" are illegal in XML
declaration must be set as no. This means, declaration includes information from the external source.  It is easier to define data facets (restrictions on data)
<cont:name>Bindu</cont:name> <address> elements.  It is easier to define data patterns (data formats)
Following is the syntax for external DTD:
<cont:company>Abc</cont:company> <name>Binod </name> - Used for Attributes of XML i.e ATTLIST  It is easier to convert data between different data types
<cont:phone>9867031614</cont:phone> <company>Xyz company</company> <!DOCTYPE root-element SYSTEM "file-name">
</cont:contact> <phone>(011) 123-4567</phone> * By default, everything is PCDATA
where file-name is the file with .dtd extension.
Here, the Namespace prefix is cont, and the Namespace identifier (URI) as www.devcpgn.blogspot.com/profile. </address>
This means, the element names and attribute names with the cont prefix (including the contact element), all Syntax:
Example:
belong to the www.devcpgn.blogspot.com/profile namespace. So this PCDATA it will give the value of employee:
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

om
Binod Xyz company (011) 123-4567 <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE address SYSTEM "address.dtd">
Document Type Declaration (DTD) <address> Example:
The XML Document Type Declaration, commonly known as DTD, is a way to describe XML language precisely. DTDs The DTD above is interpreted like this: <name>Binod Babu</name> <?xml version="1.0" encoding="UTF-8"?>
.c  !DOCTYPE address defines that the root element of this document is address

.c
check vocabulary and validity of the structure of XML documents against grammatical rules of appropriate XML <company>Xyz company</company> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
language. A DTD defines the document structure with a list of legal elements and attributes.  !ELEMENT address defines that the address element contains three elements: <phone>(011) 123-4567</phone> <xs:element name="contact">
</address> <xs:complexType>
tu

tu
An XML DTD can be either specified inside the document, or it can be kept in a separate document and then liked "name, company, phone"
<xs:sequence>
separately.  !ELEMENT name defines the name element to be of type "#PCDATA" The content of the DTD file address.dtd are as shown:
<xs:element name="name" type="xs:string" />
Basic syntax of a DTD is as follows:  !ELEMENT company defines the company element to be of type "#PCDATA"
al

al
<xs:element name="company" type="xs:string" />
<!DOCTYPE element DTD identifier  !ELEMENT phone defines the phone element to be of type "#PCDATA" <!ELEMENT address (name,company,phone)> <xs:element name="phone" type="xs:int" />
[ <!ELEMENT name (#PCDATA)> </xs:sequence>
ep

ep
declaration1 Rules <!ELEMENT company (#PCDATA)> </xs:complexType>
<!ELEMENT phone (#PCDATA)> </xs:element>
declaration2  The document type declaration must appear at the start of the document (preceded only by the XML </xs:schema>
........ header) — it is not permitted anywhere else within the document.
an

an
The basic idea behind XML Schemas is that they describe the valid format that an XML document can take.
]>  Similar to the DOCTYPE declaration, the element declarations must start with an exclamation mark. XML - Schemas
In the above syntax,  The Name in the document type declaration must match the element type of the root element.
 The DTD starts with <!DOCTYPE delimiter.
XSD Simple Elements
bc

bc
XML Schema is commonly known as XML Schema Definition (XSD). It is used to describe and validate the structure
A simple element is an XML element that contains only text. It cannot contain any other elements or attributes.
 An element tells the parser to parse the document from the specified root element. Example of CDATA: and the content of XML data. XML schema defines the elements, attributes and data types. Schema element
The text can be of many different types. It can be one of the types included in the XML Schema definition (Boolean,
 DTD identifier is an identifier for the document type definition, which may be the path to a file on the <?xml version="1.0"?> supports Namespaces. It is similar to a database schema that describes the data in a database.
string, date, etc.), or it can be a custom type that you can define yourself.
system or URL to a file on the internet. If the DTD is pointing to external path, it is called External Subset. <!DOCTYPE employee SYSTEM "employee.dtd">
 The square brackets [ ] enclose an optional list of entity declarations called Internal Subset. <employee> XML Schema is an XML-based alternative to DTD.
<![CDATA[ The purpose of an XML Schema is to define the legal building blocks of an XML document, just like a DTD. You can also add restrictions to a data type in order to limit its content, or you can require the data to match a
<firstname>vimal</firstname> An XML Schema: specific pattern.
<lastname>jaiswal</lastname>  defines elements that can appear in a document
The syntax for defining a simple element is:
 Internal DTD <xs:element name="xxx" type="yyy"/>
<email>[email protected]</email>  defines attributes that can appear in a document
A DTD is referred to as an internal DTD if elements are declared within the XML files. To refer it as internal DTD, ]]> where xxx is the name of the element and yyy is the data type of the element.
 defines which elements are child elements
standalone attribute in XML declaration must be set to yes. This means, the declaration works independent of </employee>  defines the order of child elements
external source.
 defines the number of child elements XML Schema has a lot of built-in data types. The most common types are:
The syntax of internal DTD is as shown:  defines whether an element is empty or can include text - xs:string
 defines data types for elements and attributes - xs:decimal
<!DOCTYPE root-element [element-declarations]>  defines default and fixed values for elements and attributes - xs:integer
where root-element is the name of root element and element-declarations is where you declare the elements.  XML Schemas are extensible to future additions - xs:boolean
Unit3:6 Unit3:7 Unit3:8 And here are the corresponding simple element definitions:Unit3:9
Source: http://www.devcpgn.blogspot.com Source: http://www.devcpgn.blogspot.com Source: http://www.devcpgn.blogspot.com Source: http://www.devcpgn.blogspot.com
<xs:element name="lastname" type="xs:string"/>
<xs:element name="age" type="xs:integer"/>
<xs:element name="dateborn" type="xs:date"/>

- xs:date To specify how whitespace characters should be handled, we would use the whiteSpace constraint. This example XSD Complex Types:
- xs:time Restrictions on Content defines an element called "address" with a restriction. The whiteSpace constraint is set to "preserve", which A complex element is an XML element that contains other elements and/or attributes.
Example: When an XML element or attribute has a data type defined, it puts restrictions on the element's or attribute's means that the XML processor WILL NOT remove any white space characters: There are four kinds of complex elements:
Here are some XML elements: content. If an XML element is of type "xs:date" and contains a string like "Hello World", the element will not <xs:element name="address"> - empty elements
<lastname>Refsnes</lastname> validate. With XML Schemas, you can also add your own restrictions to your XML elements and attributes. These <xs:simpleType> - elements that contain only other elements
<age>36</age> restrictions are called facets. <xs:restriction base="xs:string"> - elements that contain only text
<dateborn>1970-03-27</dateborn> <xs:whiteSpace value="preserve"/> - elements that contain both other elements and text
XSD Restrictions/ Facets: </xs:restriction> Note: Each of these elements may contain attributes as well!
1. Restrictions on Values </xs:simpleType>
Default and Fixed Values for Simple Elements: The following example defines an element called "age" with a restriction. The value of age cannot be lower than 0 </xs:element> Examples of Complex Elements
Simple elements may have a default value OR a fixed value specified. A default value is automatically assigned to or greater than 120: - A complex XML element, "product", which is empty:
the element when no other value is specified. whitespace value= "replace", the XML processor WILL REPLACE all white space characters (line feeds, tabs, <product pid="1345"/>
<xs:element name="age"> spaces, and carriage returns) with spaces
In the following example the default value is "red": <xs:simpleType> whiteSpace value= "collapse", which means that the XML processor WILL REMOVE all white space characters - A complex XML element, "employee", which contains only other elements:
<xs:element name="color" type="xs:string" default="red"/> <xs:restriction base="xs:integer"> (line feeds, tabs, spaces, carriage returns are replaced with spaces, leading and trailing spaces are removed, and <employee>
<xs:minInclusive value="0"/> multiple spaces are reduced to a single space): <firstname>Dev</firstname>
A fixed value is also automatically assigned to the element, and you cannot specify another value. <xs:maxInclusive value="120"/> <lastname>Cpgn</lastname>
om

om
In the following example the fixed value is "red": </xs:restriction> 5. Restrictions on Length: </employee>
<xs:element name="color" type="xs:string" fixed="red"/> </xs:simpleType> To limit the length of a value in an element, we would use the length, maxLength, and minLength constraints. This
</xs:element> example defines an element called "password" with a restriction. The value must be exactly eight characters: - A complex XML element, "food", which contains only text:
XSD Attributes: <xs:element name="password">
.c

.c
<food type="dessert">Ice cream</food>
Simply attributes are associated with the complex elements. If an element has attributes, it is considered to be of a 2. Restrictions on a Set of Values <xs:simpleType> <xs:element name="password"> - A complex XML element, "description", which contains both elements and text:
<xs:simpleType>
tu

tu
complex type. Simple elements cannot have attributes. But the attribute itself is always declared as a simple To limit the content of an XML element to a set of acceptable values, we would use the enumeration constraint. <xs:restriction base="xs:string"> <description>
type. All attributes are declared as simple types. The example below defines an element called "car" with a restriction. The only acceptable values are: Audi, <xs:length value="8"/> <xs:restriction base="xs:string"> It happened on <date lang="english">12/6/2015</date> ....
Golf, BMW: </xs:restriction> <xs:minLength value="5"/> </description>
al

al
The next example defines an element called "zipcode" with <xs:maxLength value="8"/>
The syntax for defining an attribute is: <xs:element name="car"> </xs:simpleType>
a restriction. The only acceptable value is FIVE digits in a
<xs:attribute name="xxx" type="yyy"/> , where xxx is the name of the attribute and yyy specifies the data <xs:simpleType> </xs:element> </xs:restriction> How to Define a Complex Element
sequence, and each digit must be in a range from 0 to 9:
ep

ep
type of the attribute. <xs:restriction base="xs:string"> <xs:element name="zipcode"> Look at this complex XML element, "employee", which contains only other elements:
Example: <xs:enumeration value="Audi"/> <xs:simpleType> <employee>
<xs:enumeration value="Golf"/> <xs:restriction base="xs:integer"> Restrictions for Datatypes: <firstname>John</firstname>
an

an
Here is an XML element with an attribute: <xs:enumeration value="BMW"/> <xs:pattern value="[0-9][0-9][0-9][0-9][0-9]"/> Constraint Description <lastname>Smith</lastname>
<name lname="aryal">Smith</name> </xs:restriction> </xs:restriction> enumeration Defines a list of acceptable values </employee>
</xs:simpleType> </xs:simpleType> fractionDigits Specifies the maximum number of decimal places allowed. Must be equal to or greater than zero
bc

bc
We can define a complex element in an XML Schema two different ways:
And here is the corresponding attribute definition: </xs:element> </xs:element> length Specifies the exact number of characters or list items allowed. Must be equal to or greater than zero
1. The "employee" element can be declared directly by naming the element, like this:
<xs:attribute name="lname" type="xs:string"/> 3. Restrictions on a Series of Values maxExclusive Specifies the upper bounds for numeric values (the value must be less than this value)
maxInclusive Specifies the upper bounds for numeric values (the value must be less than or equal to this value) <xs:element name="employee">
To limit the content of an XML element to define a series of numbers or letters that can be used, we would use the <xs:complexType>
maxLength Specifies the maximum number of characters or list items allowed. Must be equal to or greater than
Default and Fixed Values for Attributes: pattern constraint. zero <xs:sequence>
The example below defines an element called "letter" with a restriction. The only acceptable value is ONE of minExclusive Specifies the lower bounds for numeric values (the value must be greater than this value) <xs:element name="firstname" type="xs:string"/>
Attributes may have a default value OR a fixed value specified. the LOWERCASE letters from a to z: The next example defines an element called "initials" with a restriction. minInclusive Specifies the lower bounds for numeric values (the value must be greater than or equal to this value) <xs:element name="lastname" type="xs:string"/>
A default value is automatically assigned to the attribute when no other value is specified. <xs:element name="letter"> The only acceptable value is THREE of the UPPERCASE letters from a to z: minLength Specifies the minimum number of characters or list items allowed. Must be equal to or greater than </xs:sequence>
In the following example the default value is “ENGLISH ": <xs:simpleType> <xs:element name="initials"> zero </xs:complexType>
<xs:attribute name="lang" type="xs:string" default="ENGLISH"/> <xs:restriction base="xs:string"> <xs:simpleType> pattern Defines the exact sequence of characters that are acceptable </xs:element>
<xs:pattern value="[a-z]"/> <xs:restriction base="xs:string"> totalDigits Specifies the exact number of digits allowed. Must be greater than zero
If you use the method described above, only the "employee" element can use the specified complex type. Note
A fixed value is also automatically assigned to the attribute, and you cannot specify another value. </xs:restriction> <xs:pattern value="[A-Z][A-Z][A-Z]"/> whiteSpace Specifies how white space (line feeds, tabs, spaces, and carriage returns) is handled
that the child elements, "firstname" and "lastname", are surrounded by the <sequence> indicator. This means that
</xs:restriction>
In the following example the fixed value is “ENGLISH ": </xs:simpleType> the child elements must appear in the same order as they are declared.
</xs:simpleType>
</xs:element>
</xs:element>
<xs:attribute name="lang" type="xs:string" fixed="ENGLISH"/> 4. Restrictions on Whitespace Characters 2. The "employee" element can have a type attribute that refers to the name of the complex type to use:

Unit3:10 Unit3:11 Unit3:12 Unit3:13

Source: http://www.devcpgn.blogspot.com Source: http://www.devcpgn.blogspot.com Source: http://www.devcpgn.blogspot.com Source: http://www.devcpgn.blogspot.com
<xs:element name="employee" type="personinfo"/> You can define the "person" element in a schema, like this:  Choice Indicator
<xs:element name="person"> The following schema declares the "ordernote" element: The <choice> indicator specifies that either one child element or another can occur:
<xs:complexType name="personinfo"> <xs:complexType> <xs:element name="ordernote"> <xs:element name="person">
<xs:sequence> <xs:sequence> <xs:complexType mixed="true"> <xs:complexType>
<xs:element name="firstname" type="xs:string"/> <xs:element name="firstname" type="xs:string"/> <xs:sequence> <xs:choice>
<xs:element name="lastname" type="xs:string"/> <xs:element name="lastname" type="xs:string"/> <xs:element name="name" type="xs:string"/> <xs:element name="employee" type="employee"/>
</xs:sequence> </xs:sequence> <xs:element name="orderid" type="xs:positiveInteger"/> <xs:element name="member" type="member"/>
</xs:complexType> </xs:choice>
</xs:complexType> <xs:element name="shipdate" type="xs:date"/>
</xs:element> </xs:complexType>
If you use the method described above, several elements can refer to the same complex type, like this: </xs:sequence>
<xs:element name="employee" type="personinfo"/> </xs:complexType> </xs:element>
<xs:element name="student" type="personinfo"/> Or you can give the complexType element a name, and let the "person" element have a type attribute that refers </xs:element>
<xs:element name="member" type="personinfo"/> to the name of the complexType (if you use this method, several elements can refer to the same complex type):  Sequence Indicator
Note: To enable character data to appear between the child-elements of "ordernote", the mixed The <sequence> indicator specifies that the child elements must appear in a specific order:
<xs:complexType name="personinfo"> <xs:element name="person" type="persontype"/> attribute must be set to "true". The <xs:sequence> tag means that the elements defined (name, orderid <xs:element name="person">
<xs:sequence> and shipdate) must appear in that order inside a "ordernote" element. <xs:complexType>
<xs:element name="firstname" type="xs:string"/> <xs:complexType name="persontype"> <xs:sequence>
<xs:element name="lastname" type="xs:string"/> <xs:sequence> <xs:element name="firstname" type="xs:string"/>
</xs:sequence> <xs:element name="firstname" type="xs:string"/>

om
<xs:element name="lastname" type="xs:string"/>
</xs:complexType> <xs:element name="lastname" type="xs:string"/> </xs:sequence>
</xs:sequence> XSD Indicators:
</xs:complexType>
Types of XSD Complex Elements </xs:complexType> XSD indicators are used to control how elements are to be used in documents with indicators. There are
</xs:element>
.c seven indicators:

.c
1. XSD Empty Element 3. XSD Text only Elements
An empty XML element cannot have contents, only attributes. For eg 1. Order indicators: They contain;
A complex text-only element can contain text and attributes. This type contains only simple content (text Occurrence Indicators
tu

tu
<product prodid="1345" /> All
and attributes), therefore we add a simpleContent element around the content. When using simple content, you Occurrence indicators are used to define how often an element can occur.
The "product" element above has no content at all. To define a type with no content, we must define a type that Choice
must define an extension OR a restriction within the simpleContent element, like this: Note: For all "Order" and "Group" indicators (any, all, choice, sequence, group name, and group reference) the
allows elements in its content, but we do not actually declare any elements, like this: Sequence
al

al
default value for maxOccurs and minOccurs is 1.
<xs:element name="product"> <xs:element name="somename"> 2. Occurrence indicators: They include;
OR  maxOccurs Indicator
<xs:complexType> <xs:complexType> <xs:element name="somename"> maxOccurs
ep

ep
it is possible to declare the "product" element more The <maxOccurs> indicator specifies the maximum number of times an element can occur:
<xs:complexContent> compactly, like this: <xs:simpleContent> <xs:complexType> minOccurs
3. Group indicators: They contain; <xs:element name="person">
<xs:restriction base="xs:integer"> <xs:element name="product"> <xs:extension base="basetype"> <xs:simpleContent> <xs:complexType>
<xs:attribute name="prodid" type="xs:positiveInteger"/> <xs:complexType> Group name
an

an
.... <xs:restriction base="basetype"> <xs:sequence>
</xs:restriction> <xs:attribute name="prodid" type="xs:positiveInteger"/> attributeGroup name
.... <xs:element name="full_name" type="xs:string"/>
</xs:complexType> ....
</xs:complexContent> .... Order Indicators <xs:element name="child_name" type="xs:string" maxOccurs="10"/>
</xs:element>
</xs:extension>
bc

bc
</xs:complexType> </xs:restriction> Order indicators are used to define the order of the elements. </xs:sequence>
</xs:element> </xs:simpleContent> </xs:simpleContent>  All Indicator </xs:complexType>
</xs:complexType> </xs:complexType> The <all> indicator specifies that the child elements can appear in any order, and that each child element must </xs:element>
2. XSD Elements only </xs:element> </xs:element> occur only once: The example above indicates that the "child_name" element can occur a minimum of one time (the default value
An "elements-only" complex type contains an element that contains only other elements. Consider an XML <xs:element name="person"> for minOccurs is 1) and a maximum of ten times in the "person" element.
element "person”, that contains only other elements: Note: You can use the extension/restriction element to expand or to limit the base simple type for the element.
<xs:complexType>  minOccurs Indicator
<xs:all> The <minOccurs> indicator specifies the minimum number of times an element can occur:
4. XSD Mixed Content (that contain other element and text)
An XML element, "person", that contains only other elements: <xs:element name="firstname" type="xs:string"/> <xs:element name="person">
A mixed complex type element can contain attributes, elements, and text. Consider an XML element, "ordernote",
<xs:element name="lastname" type="xs:string"/> <xs:complexType>
<person> that contains both text and other elements:
</xs:all> <xs:sequence>
<firstname>John</firstname> <ordernnote> </xs:complexType>
Notice the <xs:sequence> tag. It means that the <xs:element name="full_name" type="xs:string"/>
<lastname>Smith</lastname> Dear Mr.<name>Jagdish Bhatta</name>. </xs:element>
elements defined ("firstname" and "lastname") <xs:element name="child_name" type="xs:string"
Your gift order for the valentine day with order id Note: When using the <all> indicator you can set the <minOccurs> indicator to 0 or 1 and the <maxOccurs>
</person> maxOccurs="10" minOccurs="0"/>
must appear in that order inside a "person" <orderid>9999</orderid> indicator can only be set to 1 (the <minOccurs> and <maxOccurs> are described later). </xs:sequence>
element. will be shipped on <shipdate>2012-02-13</shipdate>.
</ordernnote>
Unit3:14 Unit3:15 Unit3:16 Unit3:17
Source: http://www.devcpgn.blogspot.com Source: http://www.devcpgn.blogspot.com Source: http://www.devcpgn.blogspot.com Source: http://www.devcpgn.blogspot.com

</xs:complexType> <xs:attribute name="lastname" type="xs:string"/> The Extensible Stylesheet Language (XSL) has three major subcomponents: <?xml version="1.0" encoding="UTF-8"?>
</xs:element> <xs:attribute name="birthday" type="xs:date"/> XSL-FO <catalog>
The example above indicates that the "child_name" element can occur a minimum of zero times and a maximum of </xs:attributeGroup> The Formatting Objects standard. By far the largest subcomponent, this standard gives mechanisms for describing <cd>
ten times in the "person" element. After you have defined an attribute group, you can reference it in another definition, like this: font sizes, page layouts, and other aspects of object rendering. <title>Yeti Dherai maya </title>
Tip: To allow an element to appear an unlimited number of times, use the maxOccurs="unbounded" statement: <xs:attributeGroup name="personattrgroup"> <artist>Narayan Gopal</artist>
<xs:attribute name="firstname" type="xs:string"/> XSLT <country>Nepal</country>
<xs:attribute name="lastname" type="xs:string"/> This is the transformation language, which lets you define a transformation from XML into some other format. For <company>Media Hub</company>
Group Indicators example, you might use XSLT to produce HTML or a different XML structure. You could even use it to produce plain <price>10.90</price>
Group indicators are used to define related sets of elements. <xs:attribute name="birthday" type="xs:date"/>
text or to put the information in some other document format. <year>1985</year>
</xs:attributeGroup>
Element Groups </cd>
Element groups are defined with the group declaration, like this: XPath .
<xs:element name="person">
<xs:group name="groupname"> At bottom, XSLT is a language that lets you specify what sorts of things to do when a particular element is .
<xs:complexType> encountered. But to write a program for different parts of an XML data structure, you need to specify the part of the </catalog>
...
<xs:attributeGroup ref="personattrgroup"/> structure you are talking about at any given time. XPath is that specification language. It is an addressing mechanism
</xs:group>
</xs:complexType> that lets you specify a path to an element so that, for example, <article><title> can be distinguished Create an XSL Style Sheet
You must define an all, choice, or sequence element inside the group declaration. The following example defines a
</xs:element> from <person><title>. In that way, you can describe different kinds of translations for the different <title>elements. Then you create an XSL Style Sheet ("cdcatalog.xsl") with a transformation template:
group named "persongroup", that defines a group of elements that must occur in an exact sequence:
<xs:group name="persongroup">
<xs:sequence> Correct Style Sheet Declaration <?xml version="1.0" encoding="UTF-8"?>
om

om
<xs:element name="firstname" type="xs:string"/> The root element that declares the document to be an XSL style sheet is <xsl:stylesheet> or <xsl:transform>. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
XSL/XSLT: Note: <xsl:stylesheet> and <xsl:transform> are completely synonymous and either can be used! <xsl:template match="/">
<xs:element name="lastname" type="xs:string"/>
The correct way to declare an XSL style sheet according to the W3C XSLT Recommendation is: <html>
<xs:element name="birthday" type="xs:date"/>
XSL- EXtensible Stylesheet Language, and is a style sheet language for XML documents. <xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> or: <body>
</xs:sequence>
.c

.c
XSLT- XSL Transformations <h2>My CD Collection</h2>
</xs:group> <xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <table border="1">
After you have defined a group, you can reference it in another definition, like this:
tu

tu
HTML uses predefined tags, and the meaning of each tag is well understood. To get access to the XSLT elements, attributes and features we must declare the XSLT namespace at the top of the <tr bgcolor="#9acd32">
<xs:group name="persongroup"> The <table> tag in HTML defines a table - and a browser knows how to display it. document. <th>Title</th>
<xs:sequence> Adding styles to HTML elements are simple. Telling a browser to display an element in a special font or color, is The xmlns:xsl="http://www.w3.org/1999/XSL/Transform" points to the official W3C XSLT namespace. If you use <th>Artist</th>
al

al
<xs:element name="firstname" type="xs:string"/> easy with CSS. this namespace, you must also include the attribute version="1.0". </tr>
<xs:element name="lastname" type="xs:string"/> <xsl:for-each select="catalog/cd">
ep

ep
<xs:element name="birthday" type="xs:date"/> XSL = Style Sheets for XML XSLT <xsl:template> Element <tr>
</xs:sequence> CSS = Style Sheets for HTML <td><xsl:value-of select="title"/></td>
</xs:group> XSL = Style Sheets for XML An XSL style sheet consists of one or more set of rules that are called templates. A template contains rules to apply <td><xsl:value-of select="artist"/></td>
an

an
XML does not use predefined tags (we can use any tag-names we like), and therefore the meaning of each tag is when a specified node is matched. </tr>
<xs:element name="person" type="personinfo"/> not well understood. </xsl:for-each>
A <table> tag could mean an HTML table, a piece of furniture, or something else - and a browser does not know The <xsl:template> element is used to build templates. </table>
bc

bc
<xs:complexType name="personinfo"> how to display it. The match attribute is used to associate a template with an XML element. The match attribute can also be used to </body>
<xs:sequence> XSL describes how the XML document should be displayed! define a template for the entire XML document. The value of the match attribute is an XPath expression (i.e. </html>
<xs:group ref="persongroup"/> match="/" defines the whole document). </xsl:template>
<xs:element name="country" type="xs:string"/> XSLT (XSL Transformations) </xsl:stylesheet>
</xs:sequence> - XSLT is a language for transforming XML documents into XHTML documents or to other XML documents. The <xsl:value-of> Element
</xs:complexType> - XPath is a language for navigating in XML documents. The <xsl:value-of> element can be used to extract the value of an XML element and add it to the output stream of Link the XSL Style Sheet to the XML Document
the transformation:
 XSLT stands for XSL Transformations Add the XSL style sheet reference to your XML document ("cdcatalog.xml"):
Attribute Groups
 XSLT is the most important part of XSL The <xsl:for-each> Element <?xml version="1.0" encoding="UTF-8"?>
Attribute groups are defined with the attributeGroup declaration, like this:
 XSLT transforms an XML document into another XML document The <xsl:for-each> element allows you to do looping in XSLT. <?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
<xs:attributeGroup name="groupname">  XSLT uses XPath to navigate in XML documents The XSL <xsl:for-each> element can be used to select every XML element of a specified node-set: <catalog>
...  XSLT is a W3C Recommendation <cd>
</xs:attributeGroup> <title>Yeti Dherai maya </title>
The following example defines an attribute group named "personattrgroup": Example: <artist>Narayan Gopal</artist>
<xs:attributeGroup name="personattrgroup"> We want to transform the following XML document ("cdcatalog.xml") into XHTML: <country>Nepal</country>
<xs:attribute name="firstname" type="xs:string"/> <company>Media Hub</company>
Unit3:18 Unit3:19 Unit3:20 Unit3:21
Source: http://www.devcpgn.blogspot.com Source: http://www.devcpgn.blogspot.com Source: http://www.devcpgn.blogspot.com Source: http://www.devcpgn.blogspot.com
<price>10.90</price> <?xml version="1.0"?> Difference between DTD and XSD
 Text inside HTML elements are text nodes
<year>1985</year> <Company> DTD XSD
</cd> <Employee category="Technical">  Comments are comment nodes
Abbreviation DTD stands for Document Type XSD stands for XML Schema Definition
. <FirstName>Tanmay</FirstName> Definition
. <LastName>Patil</LastName> Uses DTD is more suitable for small XML data XSD is used in large XML data example: ADO.Net
</catalog> <ContactNo>1234567890</ContactNo> example: bookname, companyname Dataset, Web services
Advantages of DOM
</Employee> etc.
- XML DOM is language and platform independent.
<Employee category="Non-Technical"> Strongly/weakly DTD is weakly typed XML Schema is strongly typed
- XML DOM is traversable - Information in XML DOM is organized in a hierarchy which allows developer to
Example Explained <FirstName>Taniya</FirstName> Typed DTD lacks strong typing capabilities, and An XML Schema can define the data type of certain
navigate around the hierarchy looking for specific information.
 Since an XSL style sheet is an XML document, it always begins with the XML declaration: <?xml <LastName>Mishra</LastName> has no way of validating the content to elements within specific length or values. This
- XML DOM is modifiable - It is dynamic in nature providing developer a scope to add, edit, move or remove
version="1.0" encoding="UTF-8"?>. <ContactNo>1234667898</ContactNo> data types. ability ensure that the data stored in the XML
nodes at any point on the tree.
 The next element, <xsl:stylesheet>, defines that this document is an XSLT style sheet document (along with </Employee>
- You can append, delete or update a child node because data is available in the memory. document is accurate.
the version number and XSLT namespace attributes). </Company> Provisions of DTD allows inline definitions XML Schema does not allow inline definitions
 The <xsl:template> element defines a template. The match="/" attribute associates the template with the Disadvantages of DOM Inline Definition
root of the XML source document. The following illustration shows how memory is structured when this XML data is read into the DOM structure.
- It consumes more memory (if the XML structure is large) as program written once remains in memory all extensible DTD is not extensible XML schema are extensible
 The content inside the <xsl:template> element defines some HTML to write to the output. the time until and unless removed explicitly. Datatype DTD doesn't support any datatypes. XML schemas define datatypes for elements and
 The select attribute, in the example above, contains an XPath expression. An XPath expression works like - Due to the larger usage of memory its operational speed, compared to SAX is slower. support attributes
navigating a file system - if the XML contains a large data, then it will be very expensive The purpose of a DTD is to define the XML Schema enables schema authors to specify

om
 The value of the select attribute is an XPath expression. An XPath expression works like navigating a file - the whole XML is loaded to memory although you are looking for something particular structure of an XML document. It that element quantity’s data must be numeric or,
system defines the structure with a list of legal even more specifically, an integer. Example:
elements:
XML DOM .c SAX (Simple API for XML) <xs:element name="note">

.c
It is an event-driven online algorithm for parsing XML documents, with an API interface. SAX provides a mechanism <!ATTLIST contact type CDATA <xs:complexType>
- A DOM (Document Object Model) defines a standard way for accessing and manipulating documents. for reading data from an XML document that is an alternative to that provided by the Document Object #IMPLIED> <xs:sequence>
tu

tu
- The XML DOM defines a standard way for accessing and manipulating XML documents. Model (DOM). Where the DOM operates on the document as a whole, SAX parsers operate on each piece of the <!ELEMENT address1 ( #PCDATA)> <xs:element name="address1" type="xs:string"/>
- The XML DOM views an XML document as a tree-structure. XML document sequentially. <!ELEMENT city ( #PCDATA)> <xs:element name="city" type="xs:string"/>
al

al
- All elements can be accessed through the DOM tree. Their content (text and attributes) can be modified or Advantages of SAX: <!ELEMENT state ( #PCDATA)> <xs:element name="state" type="xs:string"/>
deleted, and new elements can be created. The elements, their text, and their attributes are all known as  Do not need to process and store the entire document (low memory requirement) <!ELEMENT zip ( #PCDATA)> <xs:element name="zip" type="xs:string"/>
nodes.
 Can quickly skip over parts not of interest </xs:sequence>
ep

ep
- The nodes of every document are organized in a tree structure, called the DOM tree. </xs:complexType>
 Fast processing
an

an
Disadvantages of SAX:
 Only traverse the document once The difference between HTML and XML
S.N HTML XML
 The topmost node of a tree is called the root. The root node is <Company> which in turn
bc

bc
Both SAX and DOM are used to parse the XML document 1 Markup language for displaying web pages Markup language defines a set of rules for
contains the two nodes of <Employee>. These nodes are referred to as child nodes. in a web browser. Designed to display data encoding documents that can be read by both
 The child node <Employee> of root node <Company>, in turn consists of its own child SAX DOM with focus on how the data looks humans and machines. Designed with focus on
It stands for Simple API for XML It stands for Document Object Model storing and transporting data.
node (<FirstName>, <LastName>, <ContactNo>).
SAX is event-based DOM is tree model 2 HTML has a very strict set of predefined XML has an infinite number of possible elements
 The two child nodes, <Employee> have attribute values Technical and Non-Technical, are In SAX, events are triggered when the XML is In DOM, there are no events triggered while elements.
referred as attribute nodes. being parsed parsing. 3 An HTML document can be XML But an XML document can't be HTML unless it
 The text within the every node is called as text node.
Parses node by node Stores the entire XML document into memory uses the named HTML elements and served as
before processing XHTML.
Doesn’t store the XML in memory Occupies more memory 4 No strict rules. Browser will still generate Strict rules must be followed or processor will
We can’t insert or delete a node We can insert or delete nodes data to the best of its ability terminate processing the file
The XML Document Object Model (DOM) class is an in-memory representation of an XML document. The DOM In the HTML DOM (Document Object Model), everything is a node:
Top to bottom traversing Traverse in any direction. 5 HTML is Static XML is dynamic
allows you to programmatically read, manipulate, and modify an XML document.  The document itself is a document node 6 It displays a web page It transport data between application and the
 All HTML elements are element nodes database.
It is the common and structured way that XML data is represented in memory, although the actual XML data is
HTML was designed to display data XML was not designed to display data
stored in a linear fashion when in a file or coming in from another object. The following is XML data.  All HTML attributes are attribute nodes

Unit3:22 Unit3:23 Unit3:24 Unit3:25

Unit 4: The server tier 2. Internet Information Services (IIS) presentation. This is normally used in Web applications and interactive
Web Server Concept The Internet Information Server (IIS) is a high performance Web Server websites.
Web server is a computer where the web content is stored. Basically web server is from Microsoft. This web server runs on Windows NT/2000 and 2003
used to host the web sites but there exists other web servers also such as gaming, platforms (and may be on upcoming new Windows version also). IIS 2. Using server-side scripting and processing to dynamically form both the
storage, FTP, email etc. comes bundled with Windows NT/2000 and 2003; Because IIS is tightly layout and content to be delivered to the user based on parameters such as
integrated with the operating system so it is relatively easy to administer it. the user’s location, time of day, browser being used or user preferences.
* Web site is collection of web pages while web server is a software that respond to 3. Lighttpd Some good examples of this are social networking sites and content delivery
the request for web resources. The lighttpd, pronounced lighty is also a free web server that is distributed sites. Social networking sites such as Facebook and Twitter provide entirely
with the FreeBSD operating system. This open source web server is fast, different content per user because of the difference of their connections and
secure and consumes much less CPU power. Lighttpd can also run on subscribed services, while sites like YouTube and Amazon provide dynamic
Windows, Mac OS X, Linux and Solaris operating systems. content based on user-specific preferences based on past purchases or
Fig: For every client, session data is stored separately
4. Sun Java System Web Server views; the server gives suggested items or content that the user may like
This web server from Sun Microsystems is suited for medium and large based on historical data. State management using session is one of the best ASP.NET features, because it
web sites. Though the server is free it is not open source. It however, runs is secure, transparent from users, and we can store any kind of object in it. Along
on Windows, Linux and UNIX platforms. The Sun Java System web server Sessions and State with these advantages, some times session can cause performance issues in high
om

om
supports various languages, scripts and technologies required for Web 2.0 traffic sites because it is stored in server memory and clients read data from the
such as JSP, Java Servlets, PHP, Perl, Python, and Ruby on Rails, ASP A session is a way to store information (in variables) to be used across multiple
server. Now let's have a look at the advantages and disadvantages of using
and Coldfusion etc. pages.
session in our web applications.
5. Jigsaw Server
.c

.c
Jigsaw (W3C's Server) comes from the World Wide Web Consortium. It is Unlike a cookie, the information is not stored on the users computer.
Advantages:
We all know that the web uses the HTTP protocol and the HTTP protocol is a
tu

tu
open source and free and can run on various platforms like Linux, UNIX,  It helps maintain user state and data all over the application.
Windows, and Mac OS X Free BSD etc. Jigsaw has been written in Java stateless protocol; in other words, when a client sends a request to the server, an
 It is easy to implement and we can store any kind of object eg. Database, dataset
instance of the page is created and the page is converted to HTML format and then
al

al
and can run CGI scripts and PHP programs. etc.
the server provides the response and then the instance of the page and the value
 Stores client data separately.
of the control are destroyed. So if we have a requirement to store the values of the
ep

ep
When client sends request for a web page, the web server search for the  Session is secure and transparent from the user.
Using control flow to control dynamic content generation controls and pass them into another web form then a State Management
requested page if requested page is found then it will send it to client with an Technique is used. Disadvantages:
an

an
HTTP response.
Dynamic content in the context of HTML and the World Wide Web refers to website  As session is stored on the server memory, it is not advisable to use session state
 If the requested web page is not found, web server will the send an HTTP Session is a State Management Technique. A Session can store the value on the
content that constantly or regularly changes based on user interactions, timing and when there is a large volume of data.
response: Error 404 Not found. Server. It can support any type of object to be stored along with our own custom
bc

bc
other parameters that determine what content is delivered to the user. This means  With the use of session state, it will affect the performance of memory, because it is
 If client has requested for some other resources then the web server will that the content of the site may differ for every user because of different objects. A session is one of the best techniques for State Management because it stored in server memory until you destroy the state
contact to the application server and data store to construct the HTTP parameters. Facebook is an excellent example of a site that delivers dynamic stores the data as client-based, in other words the data is stored for every user The problem with sessions is that when you close your browser you also lose the

response. content, as every user gets different content based on their friends and social separately and the data is secured also because it is on the server. session so, if you had a site requiring a login, this couldn't be saved as a session
Examples of web server interactions, although the layout stays generally the same. like it could as a cookie, and the user would be forced to re-login every time they
S. Web Server Description This could be different text, video, advertisements or even an entirely different visit.
N. layout and color. Any element in a page which contains movement and can change
1 Apache HTTP Server over time may be considered as dynamic content. Storing and retrieving values from Session
This is the most popular web server in the world developed by the Apache There are two ways to provide dynamic content:
Software Foundation. Apache web server is an open source software and The following code is used for storing a value to session:
can be installed on almost all operating systems including Linux, UNIX, 1. Using client-side scripting and frameworks such as JavaScript, AJAX and
Windows, FreeBSD, Mac OS X and more. About 60% of the web server Bootstrap to change the UI behavior within a specific Web page in response //Storing UserName in Session
machines run the Apache Web Server. to specific user actions and timings. This gives dynamic behavior to the UI Session["UserName"] = txtUser.Text;
Unit 4: Page 1 Unit 4: Page 2 Unit 4: Page 3 Unit 4: Page 4
Now, let's see how we can retrieve values from session:  Session_Start var message, x; You may have a working app, but it also needs to have good web architecture.
 Session_End message = document.getElementById("p01"); Here are several attributes necessary for good web application architecture:
//Check weather session variable null or not
message.innerHTML = "";
if (Session["UserName"] != null) void Session_Start(object sender, EventArgs e) x = document.getElementById("demo").value;  Solves problems consistently and uniformly
{ { try {  Make it as simple as possible
//Retrieving UserName from Session // Code that runs when a new session is started if(x == "") throw "empty";  Supports the latest standards include
lblWelcome.Text = "Welcome : " + Session["UserName"]; } if(isNaN(x)) throw "not a number";
 Offers fast response times
} void Session_End(object sender, EventArgs e) x = Number(x);
 Utilizes security standards to reduce the chance of malicious penetrations
else { if(x < 5) throw "too low";
 Does not crash
{ // Code that runs when a session ends. if(x > 10) throw "too high";
}  Heals itself
//Do Something else }
catch(err) {  Does not have a single point of failure
}
message.innerHTML = "Input is " + err;  Scales out easily
Error Handling }  Allows for easy creation of known data
There are three types of error in the programming. }  Errors logged in a user-friendly way
Session ID a) Syntax Error </script>  Automated deployments
b) Logical Error

om
When a client communicates with a server, only the session ID is transmitted c) Runtime error </body> Using tag libraries
between them. When the client requests for data, ASP.NET looks for the session </html>
ID and retrieves the corresponding data. This is done in the following steps:
.c When executing JavaScript code, different errors can occur.
In a Web application, a common design goal is to separate the display code from

.c
Client hits the web site and information is stored in the session. Error can be handled by try catch and finally block. Architecting Web Application

try { business logic. Java tag libraries are one solution to this problem. Tag libraries
 Server creates a unique session ID for that client and stores it in the Session State Web application architecture defines the interactions between allow you to isolate business logic from the display code by creating a Tag class
tu

tu
Block of code to try
Provider. } applications, middleware systems and databases to ensure multiple applications (which performs the business logic) and including an HTML-like tag in your JSP
 The client requests for some information with the unique session ID from the catch(err) { can work together. When a user types in a URL and taps “Go,” the browser will find page. When the Web server encounters the tag within your JSP page, the Web
al

al
server. Block of code to handle errors the Internet-facing computer the website lives on and requests that particular page. server will call methods within the corresponding Java Tag class to produce the
 Server looks in the Session Providers and retrieves the serialized data from the } required HTML content.
ep

ep
state server and type casts the object. finally { The server then responds by sending files over to the browser. After that action, the
Block of code to be executed regardless of the try / catch result
Tag libraries were designed so that Java code could be executed within a JSP
browser executes those files to show the requested page to the user. Now, the page without using Java script blocks.
Take a look at the the pictorial flow: }
an

an
user gets to interact with the website. Of course, all of these actions are executed It separates the display code from business logic. Instead of script blocks, tag
within a matter of seconds. Otherwise, users wouldn’t bother with websites. libraries allow you to create custom HTML-like tags that map to a Java class that
 The try statement lets you test a block of code for errors.
performs the business logic. Groups of these HTML-like tags are called tag
bc

bc
 The catch statement lets you handle the error.
 The throw statement lets you create custom errors. What’s important here is the code, which has been parsed by the browser. This libraries.
 The finally statement lets you execute code, after try and catch, regardless of very code may or may not have specific instructions telling the browser how to
the result. react to a wide swath of inputs. As a result, web application architecture includes all
Example: sub-components and external applications interchanges for an entire software
<!DOCTYPE html> application.
<html> Of course, it is designed to function efficiently while meeting its specific needs and
<body> goals. Web application architecture is critical since the majority of global network
<p>Please input a number between 5 and 10:</p> traffic, and every single app and device uses web-based communication. It deals
Fig: Communication of client, web server, and State Provider <input id="demo" type="text"> with scale, efficiency, robustness, and security.
<button type="button" onclick="myFunction()">Test Input</button>
Session Event <p id="p01"></p>
Best Practices for Good Web Application Architecture
There are two types of session events available in ASP.NET: <script>
function myFunction() {
Unit 4: Page 5 Unit 4: Page 6 Unit 4: Page 7 Unit 4: Page 8

Last Update: 2076/1/3 Creating an SQL statement The SELECT TOP clause is useful on large tables with thousands of records. Returning a large );
number of records can impact on performance.
Unit 5: Introduction to Advanced Server Side Issues What is SQL? The SQL INSERT INTO Statement
 SQL stands for Structured Query Language Note: Not all database systems support the SELECT TOP clause. MySQL supports the LIMIT The INSERT INTO statement is used to insert new records in a table.
Database Connectivity  SQL lets you access and manipulate databases clause to select a limited number of records, while Oracle uses ROWNUM.
In working with databases, the following are the concepts which are common to all databases.  SQL became a standard of the American National Standards Institute (ANSI) in 1986, and INSERT INTO Syntax
To work with the data in a database, the first step is the connection. The connection to a of the International Organization for Standardization (ISO) in 1987 SQL Server / MS Access Syntax: It is possible to write the INSERT INTO statement in two ways.
database normally consists of the given parameters. What Can SQL do?
 SQL can execute queries against a database SELECT TOP number|percent column_name(s) The first way specifies both the column names and the values to be inserted:
Database name or Data Source – The first important parameter is the database name to  SQL can retrieve data from a database FROM table_name
which the connection needs to be established. Each connection can only work with one database WHERE condition; INSERT INTO table_name (column1, column2, column3, ...)
 SQL can insert records in a database
at a time. VALUES (value1, value2, value3, ...);
 SQL can update records in a database
The SQL SELECT DISTINCT Statement
 SQL can delete records from a database
Credentials – The next important aspect is the username and password which needs to be The SELECT DISTINCT statement is used to return only distinct (different) values. If you are adding values for all the columns of the table, you do not need to specify the column
used to establish a connection to the database. It ensures that the username and password have  SQL can create new databases names in the SQL query. However, make sure the order of the values is in the same order as the
the necessary privileges to connect to the database.  SQL can create new tables in a database Inside a table, a column often contains many duplicate values; and sometimes you only want to columns in the table. The INSERT INTO syntax would be as follows:
 SQL can create stored procedures in a database list the different (distinct) values.
Optional parameters - For each database type, you can specify optional parameters to  SQL can create views in a database SELECT DISTINCT Syntax: INSERT INTO table_name
om

om
provide more information on how .net should handle the connection to the database. For  SQL can set permissions on tables, procedures, and views SELECT DISTINCT column1, column2, ... VALUES (value1, value2, value3, ...);
example, one can specify a parameter for how long the connection should stay active. If no FROM table_name;
operation is performed for a specific period of time, then the parameter would determine if the Some of The Most Important SQL Commands The SQL UPDATE Statement
connection has to be closed. SELECT - extracts data from a database The SQL WHERE Clause The UPDATE statement is used to modify the existing records in a table.
.c

.c
UPDATE - updates data in a database The WHERE clause is used to filter records.
Selecting data from the database – Once the connection has been established, the next DELETE - deletes data from a database UPDATE Syntax:
tu

tu
important aspect is to fetch the data from the database. C# can execute 'SQL' select command INSERT INTO - inserts new data into a database The WHERE clause is used to extract only those records that fulfill a specified condition. UPDATE table_name
against the database. The 'SQL' statement can be used to fetch data from a specific table in the CREATE DATABASE - creates a new database SET column1 = value1, column2 = value2, ...
al

al
database. ALTER DATABASE - modifies a database WHERE Syntax: WHERE condition;
CREATE TABLE - creates a new table SELECT column1, column2, ...
ALTER TABLE - modifies a table
ep

ep
Inserting data into the database – C# can also be used to insert records into the database. FROM table_name The SQL DELETE Statement
Values can be specified in C# for each row that needs to be inserted into the database. DROP TABLE - deletes a table WHERE condition; The DELETE statement is used to delete existing records in a table.

The SQL CREATE DATABASE Statement

an
Updating data into the database – C# can also be used to update existing records into the The SQL ORDER BY Keyword DELETE Syntax
The CREATE DATABASE statement is used to create a new SQL database. The ORDER BY keyword is used to sort the result-set in ascending or descending order. DELETE FROM table_name WHERE condition;
database. New values can be specified in C# for each row that needs to be updated into the
database.
Syntax:
bc

bc
The ORDER BY keyword sorts the records in ascending order by default. To sort the records in The SQL MIN() and MAX() Functions
CREATE DATABASE databasename; descending order, use the DESC keyword. The MIN() function returns the smallest value of the selected column.
Deleting data from a database – C# can also be used to delete records into the database.
Select commands to specify which rows need to be deleted can be specified in C#.
The SQL DROP DATABASE Statement ORDER BY Syntax: The MAX() function returns the largest value of the selected column.
The DROP DATABASE statement is used to drop an existing SQL database. SELECT column1, column2, ...
FROM table_name MIN() Syntax
Steps to creating Simple User Registration Syntax ORDER BY column1, column2, ... ASC|DESC; SELECT MIN(column_name)
1. Create a database DROP DATABASE databasename; FROM table_name
2. Creating table with five fields in database The SQL SELECT Statement The SQL CREATE TABLE Statement WHERE condition;
 username The SELECT statement is used to select data from a database. The CREATE TABLE statement is used to create a new table in a database. Example:
 email SELECT Syntax: SELECT MIN(Price) AS SmallestPrice
 password SELECT column1, column2, ... Syntax: FROM Products;
3. Create form in html FROM table_name; CREATE TABLE table_name (
4. Adding styles to form column1 datatype, The SQL COUNT(), AVG() and SUM() Functions
5. Connect to the database using ASP.net or PHP The SQL SELECT TOP Clause column2 datatype, The COUNT() function returns the number of rows that matches a specified criteria.
6. Writing logic for user registration script The SELECT TOP clause is used to specify the number of records to return. column3 datatype, The AVG() function returns the average value of a numeric column.
.... The SUM() function returns the total sum of a numeric column.
Source: http://www.devcpgn.blogspot.com Unit 4: Page 1 Source: http://www.devcpgn.blogspot.com Unit 4: Page 2 Source: http://www.devcpgn.blogspot.com Unit 4: Page 3 Source: http://www.devcpgn.blogspot.com Unit 4: Page 4
authenticated” and an unauthenticated user. There can be many situations where anonymous authentication is
COUNT() Syntax: useful.
SELECT COUNT(column_name) SQL Constraints Session Cookies
FROM table_name SQL constraints are used to specify rules for data in a table. 2) Windows Authentication: Provides information on how to use Windows authentication in conjunction with 1 Session expires when the browser is 1 Cookies last longer than session
WHERE condition; Microsoft Internet Information Services (IIS) authentication to secure ASP.NET applications. This is the default closed.
SQL Create Constraints authentication mode in ASP.NET and it is set in web.config file of the application. 2 Session are stored on the server computer 2 Cookies are stored on the user’s
AVG() Syntax: Constraints can be specified when the table is created with the CREATE TABLE statement, or computer
SELECT AVG(column_name) after the table is created with the ALTER TABLE statement. Windows Authentication uses the security features of Windows clients and servers. Unlike Basic authentication, 3 Session are reliable and more secure as 3 Cookies are unreliable and less secure
FROM table_name initially, it does not prompt users for a user name and password. The current Windows user information on the we cannot easily access the session value as we can easily access the cookie value
WHERE condition; Syntax: client computer is supplied by the web browser through a cryptographic exchange involving hashing with the Web 4 Session can store unlimited amount of 4 Cookies can store only limited amount of
CREATE TABLE table_name ( data data
server. If the authentication exchange initially fails to identify the user, the web browser will prompt the user for a
SUM() Syntax: column1 datatype constraint, 5 Session is mainly used for login/logout 5 cookies using for user activity tracking
Windows user account user name and password.
SELECT SUM(column_name) column2 datatype constraint, purpose
FROM table_name column3 datatype constraint,
WHERE condition; .... Windows authentication is generally used if the users accessing the application belong to same organization.
); This authentication method uses Windows accounts for validating users' credentials. This type of authentication is
very good for intranet Web sites where we know our users.
File Handling
Constraints are used to limit the type of data that can go into a table. This ensures the accuracy File Handling concept in C#.

om
The SQL DROP TABLE Statement and reliability of the data in the table. If there is any violation between the constraint and the data Cookies
The DROP TABLE statement is used to drop an existing table in a database. action, the action is aborted. Cookies are data, stored in small text files, on your computer. File handling simply deal with creating, reading, deleting and editing files. Website can handle local files. It can read
from, and write to, a text file on the disk. The code can run on any server with file system privileges—and also a
Syntax .c Constraints can be column level or table level. Column level constraints apply to a column, and When a web server has sent a web page to a browser, the connection is shut down, and the

.c
local development machine
DROP TABLE table_name; table level constraints apply to the whole table. server forgets everything about the user.
There are some modes of File which is mostly used in Real application.
tu

tu
SQL ALTER TABLE Statement The following constraints are commonly used in SQL: Cookies were invented to solve the problem "how to remember information about the user": 1. Create :-In this mode New File will be created .If File is Exist then It will be Overridden.
The ALTER TABLE statement is used to add, delete, or modify columns in an existing table. 2. Append :- In Append mode Existing File will be open and contents will be written from Last .If
al

al
NOT NULL - Ensures that a column cannot have a NULL value When a user visits a web page, his/her name can be stored in a cookie.
The ALTER TABLE statement is also used to add and drop various constraints on an existing UNIQUE - Ensures that all values in a column are different Next time the user visits the page, the cookie "remembers" his/her name. File is not Exist then new File will be created. Append mode is used Between two Files.
ep

ep
table. PRIMARY KEY - A combination of a NOT NULL and UNIQUE. Uniquely identifies each row in a Cookies are saved in name-value pairs like: 3. Create New:-In this mode New File will be created, if File is already Exist then it will thrown
table Exception.
ALTER TABLE - ADD Column FOREIGN KEY - Uniquely identifies a row/record in another table username = John Doe
4. Open:- In this Existing file will be opened if file is not Exist then it will be thrown Exception.
an

an
To add a column in a table, use the following syntax: CHECK - Ensures that all values in a column satisfies a specific condition When a browser requests a web page from a server, cookies belonging to the page is added to
DEFAULT - Sets a default value for a column when no value is specified the request. This way the server gets the necessary data to "remember" information about users. 5. OpenRead:- In this Opens the Existing File for Reading the Contents.
ALTER TABLE table_name INDEX - Used to create and retrieve data from the database very quickly
6. Truncate:-In this Existing File will be open and the Entire contents of the file will be
bc

bc
ADD column_name datatype;
removed.But if the file is not Exist then it will be thrown Exception.
Example: Authentication: StreamReader Class:-
ALTER TABLE Customers
 Flush():- Flush function is used for immediately save the File contents
ADD Email varchar(255); Authentication: Authentication is the process of determining the identity of a user based on the user’s credentials.
from Buffer to Memory.
The user’s credentials are usually in the form of user ID and password, which is checked against any credentials'
ALTER TABLE - DROP COLUMN store such as database. If the credentials provided by the user are valid, then the user is considered an  Close():-Close function is used for closing the file.If we do not write close() statement in our
To delete a column in a table, use the following syntax (notice that some database systems don't authenticated user.
allow deleting a column): program then File will be always open mode ,then No other person will be used this File at that
In ASP.NET there are different ways in which authentication is performed as discussed below:
time. This is the reason for using close statement in the File Program.
ALTER TABLE table_name  Read()- It is used for Reading the Value using File Stream.
1) Anonymous Access: There is no authentication performed and the user is treated as anonymous user by IIS.
DROP COLUMN column_name;
The following SQL deletes the "Email" column from the "Customers" table:  Read-line():-It is used for Read the value using File Stream in a File Line by Line.
Sometimes it is necessary or possible to access any data from remote server or database without any authenticated Peek():- It returns next value but not use it.

Example: person. If the data is easily accessible without any authentication (i.e username and password) that means the user
accessing those data or file has an anonymous access. There is no difference between a user who is “anonymously  Seek():- It is used for Read/Write a values at any positions in a file.
ALTER TABLE Customers
DROP COLUMN Email; StreamWriter Class:-
Source: http://www.devcpgn.blogspot.com Unit 4: Page 5 Source: http://www.devcpgn.blogspot.com Unit 4: Page 6 Source: http://www.devcpgn.blogspot.com Unit 4: Page 7 Source: http://www.devcpgn.blogspot.com Unit 4: Page 8

close()-->Close function is used for closing the file. HTTP headers - Thousands or even millions of clients hitting the web site in a short interval of time (DDoS) Distributed

Syntax: setrawcookie(name,value,expire,path,domain,secure); Denial of Service attacks
 Flush():-Flush function is used for immediately save the File contents - Computer worms
from Buffer to Memory. FTP Functions: - Millions of infected browsers and/or web servers
 Write():- It is used for writing a File using File stream class. The FTP functions give client access to file servers through the File Transfer Protocol (FTP). - limited on large web sites with very few resources (bandwidth, etc.)
The FTP functions are used to open, login and close connections, as well as upload, download, rename, - Client requests are served more slowly and the number of connections increases so much that server limits
 WriteLine():- It is used to write a File Line by Line using File stream.
delete, and get information on files from file servers. Not all of the FTP functions will work with every server or are reached
return the same results. - Web servers required urgent maintenance or upgrade
Some FTP Functions are given below: - Hardware Software failures
ftp_alloc — Allocates space for a file to be uploaded To partially overcome load limits and to prevent overload we can use techniques like:
ftp_cdup — Changes to the parent directory - Managing network traffic by using: Firewalls, Block unwanted traffic
ftp_chdir — Changes the current directory on a FTP server - HTTP traffic managers- redirect or rewrite requests having bad HTTP patterns
ftp_chmod — Set permissions on a file via FTP - Bandwidth management and traffic shaping
ftp_close — Closes an FTP connection - Deploying web cache techniques
ftp_connect — Opens an FTP connection - Use different domains to serve different content (static and dynamic) by separate Web servers,
ftp_delete — Deletes a file on the FTP server - Add more hardware resources
ftp_exec — Requests execution of a command on the FTP server - Use many web servers
om

om
ftp_fget — Downloads a file from the FTP server and saves to an open file These technique to limit the load on websites are called anti-overload techniques in web server.
ftp_fput — Uploads from an open file to the FTP server
ftp_get_option — Retrieves various runtime behaviours of the current FTP stream
ftp_get — Downloads a file from the FTP server Q. How a Domain Name is translated to an IP Address?
.c

.c
ftp_login — Logs in to an FTP connection
ftp_mdtm — Returns the last modified time of the given file DNS (Domain Name System) is what translate domain name (for eg. www.google.com) into an IP address that our
tu

tu
ftp_mkdir — Creates a directory browser can use (for eg. 173.194.35.148). Before the page is loaded, the DNS must be resolved so the browser can
ftp_nb_continue — Continues retrieving/sending a file (non-blocking) establish a TCP connection to make the HTTP request. The DNS Resolution process starts when the user types a
al

al
ftp_nb_fget — Retrieves a file from the FTP server and writes it to an open file (non-blocking) URL address on the browser and hits Enter.
ftp_nb_fput — Stores a file from an open file to the FTP server (non-blocking)
ep

ep
ftp_nb_get — Retrieves a file from the FTP server and writes it to a local file (non-blocking) On the Internet, many communications programs deal only with IP addresses, yet allow their users to specify
ftp_nb_put — Stores a file on the FTP server (non-blocking) machines in terms of their host names (or alias host names). Or a program which already knows the IP address
HTTP Functions: ftp_nlist — Returns a list of files in the given directory must determine the domain name for the network to which the machine is connected. Such programs must
an

an
ftp_put — Uploads a file to the FTP server somehow convert the host names into IP addresses (or vice versa) behind the scenes. How do they achieve this
The HTTP functions let you manipulate information sent to the browser by the Web ftp_pwd — Returns the current directory name translation between IP addresses and host names?
server, before any other output has been sent. ftp_quit — Alias of ftp_close
bc

Function Description ftp_raw — Sends an arbitrary command to an FTP server

bc
The mapping of host names to IP addresses is handled through a service called Domain Name Service (DNS). Rather
ftp_rawlist — Returns a detailed list of files in the given directory than require individual machines, applications, or users to keep up with the constant changes in host names and IP
header() Sends a raw HTTP header to a client ftp_rename — Renames a file or a directory on the FTP server addresses, a series of special DNS servers across the world (known as "name servers") keep track of the
Syntax: header(string, replace, http_response_code) ftp_rmdir — Removes a directory name/address information for all the computers on the Internet. Applications that need to determine an IP address
headers_list() Returns a list of response headers sent (or ready to send) ftp_set_option — Set miscellaneous runtime FTP options from a host name (or vice versa) contact the local "name server" to supply this information.
Syntax: headers_list() ftp_site — Sends a SITE command to the server
To determine whether or not the headers have been sent yet, use the
ftp_size — Returns the size of the given file For instance, if you use a web browser to check out the site "web.mit.edu", the program actually first contacts your
headers_sent() function.
ftp_ssl_connect — Opens an Secure SSL-FTP connection local DNS machine to obtain the IP-address that matches the host name you provided; then the program uses that
headers_sent() Checks if / where the HTTP headers have been sent
ftp_systype — Returns the system type identifier of the remote FTP server IP address to complete your request.
Syntax: headers_sent(file,line)
setcookie() Defines a cookie to be sent along with the rest of the HTTP headers
Syntax: setcookie(name,value,expire,path,domain,secure,httponly); DNS is used much more frequently than is usually supposed: virtually every activity that moves information across
A cookie is often used to identify a user. A cookie is a small file that the the network (getting web documents, transferring files, sending or receiving electronic mail) relies on DNS.
server embeds on the user's computer. Each time the same computer Q. What are anti overload techniques in web server?
requests a page with a browser, it will send the cookie too. At any time web servers can be overloaded because of:
setrawcookie() Defines a cookie (without URL encoding) to be sent along with the rest of the - Too much legitimate web traffic
Source: http://www.devcpgn.blogspot.com Unit 4: Page
Source: http://www.devcpgn.blogspot.com Unit 4: Page 9 Source: http://www.devcpgn.blogspot.com Unit 4: Page 11
10

HSSLiVE XII CA Chapter - 4 Web Technology Joy John
No ratings yet
HSSLiVE XII CA Chapter - 4 Web Technology Joy John
7 pages
Class 10 Computer Application Code 165 Study Material
100% (10)
Class 10 Computer Application Code 165 Study Material
2 pages
UI Module Complete Notes
No ratings yet
UI Module Complete Notes
480 pages
C# and .NET TECHNOLOGIES Notes
No ratings yet
C# and .NET TECHNOLOGIES Notes
113 pages
Web Development: Benedicto B. Balilo JR
No ratings yet
Web Development: Benedicto B. Balilo JR
101 pages
HTMLs
No ratings yet
HTMLs
28 pages
Introduction To Web Application Development
No ratings yet
Introduction To Web Application Development
14 pages
Module 1
No ratings yet
Module 1
156 pages
Web Dev Lecture 1 - 2
No ratings yet
Web Dev Lecture 1 - 2
16 pages
Web Tech 56
No ratings yet
Web Tech 56
17 pages
Computer Netwrok (Web Services)
No ratings yet
Computer Netwrok (Web Services)
14 pages
Introduction To Web Programming
No ratings yet
Introduction To Web Programming
12 pages
Introduction To Web Development and Design
No ratings yet
Introduction To Web Development and Design
38 pages
HTML Unit-1
No ratings yet
HTML Unit-1
62 pages
Web Technology
No ratings yet
Web Technology
12 pages
Web Jose
No ratings yet
Web Jose
23 pages
HTML
No ratings yet
HTML
27 pages
ITNT
No ratings yet
ITNT
25 pages
Multimedia With Internet and Animation: Unit 4
No ratings yet
Multimedia With Internet and Animation: Unit 4
24 pages
Internet Principles of Operation
No ratings yet
Internet Principles of Operation
5 pages
Introduction To Web Services
No ratings yet
Introduction To Web Services
12 pages
Introduction To Web Programming
No ratings yet
Introduction To Web Programming
48 pages
Web Design PUT
No ratings yet
Web Design PUT
12 pages
Web Technologies Lecture No 1
No ratings yet
Web Technologies Lecture No 1
22 pages
Image Classification Thesis
100% (2)
Image Classification Thesis
6 pages
Cikakkiyar Kariya: Salisu Abdulrazak
No ratings yet
Cikakkiyar Kariya: Salisu Abdulrazak
42 pages
FTVTI Exit Exam Preparation
No ratings yet
FTVTI Exit Exam Preparation
69 pages
Web Programming: 1St Meet
No ratings yet
Web Programming: 1St Meet
40 pages
WT QB Solution
No ratings yet
WT QB Solution
110 pages
MIS - Ethical and Social Issues
No ratings yet
MIS - Ethical and Social Issues
38 pages
1st TERM TECHNOLOGY 3rd GRADE
No ratings yet
1st TERM TECHNOLOGY 3rd GRADE
26 pages
Unit 1
No ratings yet
Unit 1
81 pages
HTML Session 1
No ratings yet
HTML Session 1
147 pages
Web Developing: Chapter-1
No ratings yet
Web Developing: Chapter-1
30 pages
ABAP Data Dictionary
No ratings yet
ABAP Data Dictionary
68 pages
Chapter 1 and 2-Chapter 1&2 dt-2025-04-01 13-38-50
No ratings yet
Chapter 1 and 2-Chapter 1&2 dt-2025-04-01 13-38-50
251 pages
Internet VS The Web Confusion Between Terms: Internet and Web
No ratings yet
Internet VS The Web Confusion Between Terms: Internet and Web
12 pages
M.E Design 2008 Syllabus
No ratings yet
M.E Design 2008 Syllabus
35 pages
CDC IT Dept - Curriculum Structure
No ratings yet
CDC IT Dept - Curriculum Structure
12 pages
Lesson 10 - Web Development
No ratings yet
Lesson 10 - Web Development
45 pages
Presentation On Genera Banking Activities of SEBL
No ratings yet
Presentation On Genera Banking Activities of SEBL
15 pages
Chapter 6 Server Side
No ratings yet
Chapter 6 Server Side
19 pages
Csc132 (First Lecture Slide)
No ratings yet
Csc132 (First Lecture Slide)
13 pages
Introduction To Web Technology
No ratings yet
Introduction To Web Technology
23 pages
Module 01
No ratings yet
Module 01
23 pages
Unit - 2 SDP Student
No ratings yet
Unit - 2 SDP Student
103 pages
Web Developer
No ratings yet
Web Developer
5 pages
Computer Networks Lecture Notes: Course Code - Course Name
No ratings yet
Computer Networks Lecture Notes: Course Code - Course Name
57 pages
HSSLiVE XII CS Chapter - 4 Web Technology Joy John
No ratings yet
HSSLiVE XII CS Chapter - 4 Web Technology Joy John
7 pages
Chapter 1: Introduction: Web Design and Development
No ratings yet
Chapter 1: Introduction: Web Design and Development
32 pages
CC106 Reviewer
No ratings yet
CC106 Reviewer
9 pages
Web Tech 2
No ratings yet
Web Tech 2
10 pages
Web Design HTML
No ratings yet
Web Design HTML
18 pages
Lockformer Vulcan Catalog PDF
No ratings yet
Lockformer Vulcan Catalog PDF
6 pages
CH 7discretization and Concept Hierarchy Generation
No ratings yet
CH 7discretization and Concept Hierarchy Generation
7 pages
Course Answer-Booklet
No ratings yet
Course Answer-Booklet
3 pages
Solidworks Enterprise PDM 2012 Pro/E Connector Best Practices Guide
No ratings yet
Solidworks Enterprise PDM 2012 Pro/E Connector Best Practices Guide
27 pages
MCQ Web Tech
No ratings yet
MCQ Web Tech
8 pages
MSFT Cloud Architecture Identity PDF
No ratings yet
MSFT Cloud Architecture Identity PDF
6 pages
Lecture Note Internet and Web Design
No ratings yet
Lecture Note Internet and Web Design
44 pages
Week1 Introduction
No ratings yet
Week1 Introduction
7 pages
Unit 59 - Web Authoring
No ratings yet
Unit 59 - Web Authoring
7 pages
Iwt Pyq
No ratings yet
Iwt Pyq
6 pages
File 1689661682 0009614 WebTechUnit1
No ratings yet
File 1689661682 0009614 WebTechUnit1
36 pages
Web Designing and HTML
No ratings yet
Web Designing and HTML
19 pages
WT Unit-I
No ratings yet
WT Unit-I
49 pages
Annual Maintenance Contract - IMA, Pune
No ratings yet
Annual Maintenance Contract - IMA, Pune
5 pages
Lecture 1 - Introduction
No ratings yet
Lecture 1 - Introduction
19 pages
A Conference Call in Real Life Functional Language
No ratings yet
A Conference Call in Real Life Functional Language
3 pages
HTML Notes
No ratings yet
HTML Notes
44 pages
Bartec Product Catalogue
No ratings yet
Bartec Product Catalogue
20 pages
Curriculum Vitae: Job Title
No ratings yet
Curriculum Vitae: Job Title
3 pages
Evaluation of CFD Codes On A Two-Phase Flow Benchmark Reference Test Case
No ratings yet
Evaluation of CFD Codes On A Two-Phase Flow Benchmark Reference Test Case
4 pages
E-Tutorial - TRACES PDF Generation Utility
No ratings yet
E-Tutorial - TRACES PDF Generation Utility
25 pages
Trend Micro Apex One Training For Certified Professionals: Duration: 3 Days Course Code: TMAO
No ratings yet
Trend Micro Apex One Training For Certified Professionals: Duration: 3 Days Course Code: TMAO
3 pages
3rd Year - Web
No ratings yet
3rd Year - Web
62 pages
Fusion
No ratings yet
Fusion
34 pages
Unit 1-2
No ratings yet
Unit 1-2
22 pages
Web Designing-1
0% (1)
Web Designing-1
7 pages
WD Reviewer
No ratings yet
WD Reviewer
7 pages
3D Modelling of A Residential Building Using Autocad2024
No ratings yet
3D Modelling of A Residential Building Using Autocad2024
29 pages
TB3209 Getting Started With ADC 90003209A
No ratings yet
TB3209 Getting Started With ADC 90003209A
27 pages
Basic - Case Study 3
No ratings yet
Basic - Case Study 3
3 pages
Mexico Localization User Guide Cfdi 4.0 - English
No ratings yet
Mexico Localization User Guide Cfdi 4.0 - English
3 pages
Discover The Secret To Legendary IT Service
No ratings yet
Discover The Secret To Legendary IT Service
24 pages
Steve Jobs Letter
No ratings yet
Steve Jobs Letter
4 pages
IT Terminal Examination
No ratings yet
IT Terminal Examination
3 pages
Logfile Router Transcript
No ratings yet
Logfile Router Transcript
12 pages
Kenya - Google IMEI Tracker Online - How To Track Your Android Phone Using IMEI Number in 20251
No ratings yet
Kenya - Google IMEI Tracker Online - How To Track Your Android Phone Using IMEI Number in 20251
9 pages
Web Devlopment
From Everand
Web Devlopment
Netra
No ratings yet