WEB TECHNOLOGIES

[R15A0520]
LECTURE NOTES

[Link] III YEAR – II SEM(R15)

(2018-19)

DEPARTMENT OF
COMPUTER SCIENCE AND ENGINEERING

MALLA REDDY COLLEGE OF ENGINEERING &

TECHNOLOGY
(Autonomous Institution – UGC, Govt. of India)
Recognized under 2(f) and 12 (B) of UGC ACT 1956
(Affiliated to JNTUH, Hyderabad, Approved by AICTE - Accredi ted by NBA & NAAC – ‘A’ Grade - ISO 9001:2015 Certified)
Maisammaguda, Dhulapally (Post Via. Hakimpet), Secunderabad – 500100, Telangana State, India
III Year B. Tech. CSE –II Sem L T/P/D C
4 1/- / - 3
(R15A0520) WEB TECHNOLOGIES
Objectives:
Giving the students the insights of the Internet programming and how to design and
implement complete applications over the web.
It covers the notions of Web servers and Web Application Servers, Design Methodologies
with concentration on Object-Oriented concepts, Client-Side
Programming, Server-Side Programming, Active Server Pages, Database Connectivity to
web applications, Adding Dynamic content to web applications,
Programming Common Gateway Interfaces, Programming the User Interface for the web
applications.

UNIT I:
Web Basics and Overview: Introduction to Internet, World Wide Web, Web Browsers, URL,
MIME, HTTP, Web Programmers Tool box.
HTML Common tags: List, Tables, images, forms, frames, Basics of CSS and types of CSS.
Client-Side Programming (Java Script): Introduction to Java Script, declaring variables,
functions, Event handlers (onclick, onsubmit, etc.,) and Form Validation.

UNIT II:
Server-Side Programming (PHP): Declaring Variables, Data types, Operators, Control
structures, Functions, Reading data from web form controls like text buttons, radio buttons, list,
etc., Handling File Uploads, Handling Sessions & Cookies.
Introduction to XML: Document type definition, XML Schemas, Document Object model,
Presenting XML , Introduction to XHTML, Using XML Processors: DOM and SAX.

UNIT III:
Web Servers and Servlets: Tomcat web server, Installing the Java Software Development Kit,
Tomcat Server & Testing Tomcat.
Introduction to Servlets: Lifecycle of a Servlet, JSDK, Deploying Servlet, The Servlet API,
The javax. Servlet Package, Reading Servlet 150 parameters, Reading Initialization parameters.
The [Link] HTTP package, Handling Http Request & Responses, Using Cookies-Session
Tracking.

UNIT IV:
Introduction to JSP: The Problem with Servlet. The Anatomy of a JSP Page, JSP Process ing.
JSP Application Design with MVC Setting Up and JSP Environment, JSP Declarations,
Directives, Expressions, Code Snipplets, implement objects, Requests, Using Cookies and
Session for Session Tracking.

UNIT V:
Database Access: Database Programming using JDBC, JDBC drivers, Studying [Link].*
package, Connecting to database in PHP, Execute Simple Queries, Accessing a Database from a
Servlet and JSP page.
Java Beans: Introduction to Beans, Deploying java Beans in a JSP page.
TEXT BOOKS:

1. Web Technologies, Uttam K Roy, Oxford University Press

2. The Complete Reference PHP – Steven Holzner, Tata McGraw-Hill

REFERENCE BOOKS:
1. Programming world wide web-Sebesta, Pearson Education ,2007.
2. Core SERVLETS ANDJAVASERVER PAGES VOLUME 1: CORE TECHNOLOGIES By Marty Hall and
Larry Brown Pearson
3. Internet and World Wide Web – How to program by Dietel and Nieto PHI/Pearson Education
Asia.
4. Jakarta Struts Cookbook, Bill Siggelkow, S P D O’Reilly for chap 8.
5. March’s beginning JAVA JDK 5, Murach, SPD
6. An Introduction to Web Design and Programming –Wang-Thomson

OUTCOMES:
Analyze a web page and identify its elements and attributes.
Create web pages using XHTML and Cascading Styles sheets.
Installation and usage of Server software’s.
Database Connectivity to web applications
Build web applications using Servlet and JSP
 INDEX
UNIT NO TOPIC PAGE NO

Web Basics and Overview 01 - 06

HTML common tags 07 – 16

I
Cascading Style Sheets 17 – 19

Introduction to Java Script 20 - 32

Server-Side Programming (PHP) 33 - 59

II
Introduction to XML 60 - 86

Web Servers and Se rvlets 87 - 88

III
Introduction to Servlets 89 - 112

Introduction to JSP 113 - 116

IV
JSP ELEMENTS 116 - 126

Database Access 127 - 133

V
Java Beans 134 - 136
 Web Technologies III [Link] II Sem (R15)

UNIT - I

Web Basics and Overview: Introduction to Internet, World Wide Web, Web Browsers, URL, MIME, HTTP,
Web Programmers Tool box.
HTML Common tags: List, Tables, images, forms, frames, Basics of CSS and types of CSS.
Client-Side Programming (Java Script): Introduction to Java Script, declaring variables, functions, Event
handlers (onclick, onsubmit, etc.,) and Form Validation.

Introduction to Internet:- A global computer network providing a variety of information

and communication facilities, consisting of interconnected networks using standardized
communication protocols. "the guide is also available on the Internet"

The Internet is the global system of interconnected computer networks that use the Internet
protocol suite (TCP/IP) to link devices worldwide. It is a network of networks that consists of
private, public, academic, business, and government networks of local to global scope, linked by
a broad array of electronic, wireless, and optical networking technologies. The Internet carries a
vast range of information resources and services.

History of Internet
This marvelous tool has quite a history that holds its roots in the cold war scenario. A
need was realized to connect the top universities of the United States so that they can share all
the research data without having too much of a time lag. This attempt was a result of Advanced
Research Projects Agency (ARPA) which was formed at the end of 1950s just after the Russians
had climbed the space era with the launch of Sputnik. After the ARPA got success in 1969, it
didn‘t take the experts long to understand that how much potential can this interconnection tool
have. In 1971 Ray Tomlinson made a system to send electronic mail. This was a big step in the
making as this opened gateways for remote computer accessing i.e. telnet.

During all this time, rigorous paper work was being done in all the elite research
institutions. From giving every computer an address to setting out the rules, everything was
getting penned down. 1973 saw the preparations for the vital TCP/IP and Ethernet services. At
the end of 1970s, Usenet groups had surfaced up. By the time the 80s had started, IBM came up
with its PC based on Intel 8088 processor which was widely used by students and universities for
it solved the purpose of easy computing. By 1982, the Defense Agencies made the TCP/IP
compulsory and the term ―internet‖ was coined. The domain name services arrived in the year
1984 which is also the time around which various internet based marked their debut. A worm, or
a rust the computers, attacked in 1988 and disabled over 10% of the computer systems all over
the world. While most of the researchers regarded it as an opportunity to enhance computing as it
was still in its juvenile phase, quite a number of computer companies became interested in
dissecting the cores of the malware which resulted to the formation Computer Emergency
Rescue Team (CERT). Soon after the world got over with the computer worm, World Wide Web
came into existence. Discovered by Tim Berners-Lee, World Wide Web was seen as a service to
connect documents in websites using hyperlinks.

Dept. of CSE, MRCET Page | 1

Web Technologies III [Link] II Sem (R15)

World Wide Web

The World Wide Web (abbreviated WWW or the Web) is an information space where
documents and other web resources are identified by Uniform Resource Locators (URLs),
interlinked by hypertext links, and can be accessed via the Internet. English scientist Tim
Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser computer
program in 1990 while employed at CERN in Switzerland. The Web browser was released
outside CERN in 1991, first to other research institutions starting in January 1991 and to the
general public on the Internet in August 1991.
The World Wide Web has been central to the development of the Information Age and is
the primary tool billions of people use to interact on the Internet. Web pages are primarily text
documents formatted and annotated with Hypertext Markup Language (HTML). In addition to
formatted text, web pages may contain images, video, audio, and software components that are
rendered in the user's web browser as coherent pages of multimedia content.
Embedded hyperlinks permit users to navigate between web pages. Multiple web pages
with a common theme, a common domain name, or both, make up a website. Website content
can largely be provided by the publisher, or interactively where users contribute content or the
content depends upon the users or their actions. Websites may be mostly informative, primarily
for entertainment, or largely for commercial, governmental, or non-governmental organizational
purposes

WWW is another example of client/server computing. Each time a link is followed, the client is
requesting a document (or graphic or sound file) from a server (also called a Web server) that's
part of the World Wide Web that "serves" up the document. The server uses a protocol called
HTTP or Hyper Text Transport Protocol. The standard for creating hypertext documents for the
WWW is Hyper Text Markup Language or HTML. HTML essentially codes plain text
documents so they can be viewed on the Web.

Browsers :
WWW Clients, or "Browser": The program you use to access the WWW is known as a
browser because it "browses" the WWW and requests these hypertext documents. Browsers can
be graphical, allows to see and hear the graphics and audio;

text-only browsers (i.e., those with no sound or graphics capability) are also available. All of
these programs understand http and other Internet protocols such as FTP, gopher, mail, and
news, making the WWW a kind of "one stop shopping" for Internet users.

Dept. of CSE, MRCET Page | 2

Web Technologies III [Link] II Sem (R15)

Year List of Web browsers

1991 World Wide Web (Nexus)
1992 Viola WWW, Erwise, MidasWWW, MacWWW (Samba)
1993 Mosaic, Cello,[2] Lynx 2.0, Arena, AMosaic 1.0
IBM WebExplorer, Netscape Navigator, SlipKnot 1.0, MacWeb, IBrowse, Agora (Argo),
1994 Minuet
Internet Explorer 1, Internet Explorer 2, Netscape Navigator 2.0, OmniWeb, UdiWWW,
1995 Grail
Arachne 1.0, Internet Explorer 3.0, Netscape Navigator 3.0, Opera 2.0,
1996 PowerBrowser 1.5,[4] Cyberdog, Amaya 0.9,[5] AWeb, Voyager
Internet Explorer 4.0, Netscape Navigator 4.0, Netscape Communicator 4.0, Opera
1997 3.0,[6] Amaya 1.0[5]
1998 iCab, Mozilla
1999 Amaya 2.0,[5] Mozilla M3, Internet Explorer 5.0
2000 Konqueror, Netscape 6, Opera 4,[7] Opera 5,[8] K-Meleon 0.2, Amaya 3.0,[5] Amaya 4.0[5]
2001 Internet Explorer 6, Galeon 1.0, Opera 6,[9] Amaya 5.0[5]
2002 Netscape 7, Mozilla 1.0, Phoenix 0.1, Links 2.0, Amaya 6.0,[5] Amaya 7.0[5]
2003 Opera 7,[10] Apple Safari 1.0, Epiphany 1.0, Amaya 8.0[5]
2004 Firefox 1.0, Netscape Browser, OmniWeb 5.0
Opera 8,[11] Apple Safari 2.0, Netscape Browser 8.0, Epiphany 1.8, Amaya 9.0,[5] AOL
2005 Explorer 1.0, Maxthon 1.0,Shiira 1.0
Mozilla Firefox 2.0, Internet Explorer 7, Opera 9,[12], SeaMonkey 1.0, K-Meleon 1.0,
2006 Galeon 2.0, Camino 1.0, Avant11, iCab 3
2007 Apple Safari 3.0, Maxthon 2.0, Netscape Navigator 9, NetSurf 1.0, Flock 1.0, Conkeror
Google Chrome 1, Mozilla Firefox 3, Opera 9.5,[13], Apple Safari 3.1, Konqueror 4, Amaya
2008 10.0,[5] Flock 2, Amaya 11.0[5]
Google Chrome 2–3, Mozilla Firefox 3.5, Internet Explorer 8, Opera 10,[14], Apple Safari 4,
2009 SeaMonkey 2, Camino 2,surf, Pale Moon 3.0[15]
Google Chrome 4–8, Mozilla Firefox 3.6, Opera 10.50,[16], Opera 11, Apple Safari 5, K-
2010 Meleon 1.5.4,
Google Chrome 9–16, Mozilla Firefox 4-9, Internet Explorer 9, Opera 11.50, Apple
2011
Safari 5.1, Maxthon 3.0, SeaMonkey 2.1–2.6
Google Chrome 17–23, Mozilla Firefox 10–17, Internet Explorer 10, Opera 12, Apple
2012
Safari 6, Maxthon 4.0, SeaMonkey 2.7-2.14
Google Chrome 24–31, Mozilla Firefox 18–26, Internet Explorer 11, Opera 15–18, Apple
2013 Safari 7, SeaMonkey 2.15-2.23
2014 Google Chrome 32–39, Mozilla Firefox 27–34, Opera 19–26, Apple Safari 8
2015 Google Chrome 40–47, Microsoft Edge, Mozilla Firefox 35–43, Opera 27–34, Vivaldi

Dept. of CSE, MRCET Page | 3

Web Technologies III [Link] II Sem (R15)

Google Chrome 48–55, Mozilla Firefox 44–50, Microsoft Edge 14, Opera 35–42, Apple
2016
Safari 10, SeaMonkey 2.24–2.30, Pale Moon 26.0.0[17], Pale Moon 27.0.0[18]
Google Chrome 56–60, Microsoft Edge 15, Mozilla Firefox 51–55.0.2, Opera 43–45, Opera
2017 Neon

Uniform Resource Locators, or URLs: A Uniform Resource Locator, or URL is the address of
a document found on the WWW. Browser interprets the information in the URL in order to
connect to the proper Internet server and to retrieve your desired document. Each time a click on
a hyperlink in a WWW document instructs browser to find the URL that's embedded within the
hyperlink.
The elements in a URL: Protocol://server's address/filename

Hypertext protocol: [Link]

File Transfer Protocol: [Link]
Telnet Protocol: telnet://[Link]
News Protocol: news:[Link]
What are Domains? Domains divide World Wide Web sites into categories based on the nature
of their owner, and they form part of a site's address, or uniform resource locator (URL).
Common top- level domains are:

.com—commercial enterprises .mil—military site

org—organization site (non-profits, int—organizations established by
etc.) international treaty
.net—network .biz—commercial and personal
.edu—educational site (universities, .info—commercial and personal
schools, etc.)
.gov—government organizations .name—personal sites
Additional three- letter, four- letter, and longer top- level domains are frequently added.
Each country linked to the Web has a two- letter top- level domain, for example .fr is France, .ie is
Ireland.
MIME (Multi-Purpose Internet Mail Extensions):- MIME is an extension of the
original Internet e- mail protocol that lets people use the protocol to exchange different kinds of
data files on the Internet: audio, video, images, application programs, and other kind s, as well as
the ASCII text handled in the original protocol, the Simple Mail Transport Protocol (SMTP). In
1991, Nathan Borenstein of Bellcore proposed to the IETF that SMTP be extended so that
Internet (but mainly Web) clients and servers could recognize and handle other kinds of data
than ASCII text. As a result, new file types were added to "mail" as a supported Internet Protocol
file type.

Dept. of CSE, MRCET Page | 4

Web Technologies III [Link] II Sem (R15)

Servers insert the MIME header at the beginning of any Web transmission. Clients use
this header to select an appropriate "player" application for the type of data the header indicates.
Some of these players are built into the Web client or browser (for example, all browsers come
with GIF and JPEG image players as well as the ability to handle HTML files); other players
may need to be downloaded.

New MIME data types are registered with the Internet Assigned Numbers Authority
(IANA).

MIME is specified in detail in Internet Request for Comments 1521 and 1522, which
amend the original mail protocol specification, RFC 821 (the Simple Mail Transport Protocol)
and the ASCII messaging header, RFC 822.

Hypertext Transport Protocol:

HTTP means HyperText Transfer Protocol. HTTP is the underlying protocol used by the World
Wide Web and this protocol defines how messages are formatted and transmitted, 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 transmit the requested Web page. The other main
standard that controls how the World Wide Web works is HTML, which covers how Web pages
are formatted and displayed.

HTTP is called a stateless protocol because each command is executed independently, without
any knowledge of the commands that came before it. This is the main reason that it is difficult to
implement Web sites that react intelligently to user input.

HTTPS: A similar abbreviation, HTTPS means Hyper Text Transfer Protocol Secure.
Basically, it is the secure version of HTTP. Communications between the browser and website
are encrypted by Transport Layer Security (TLS), or its predecessor, Secure Sockets Layer
(SSL).
The Web Programmer‟s Toolbox:
HTML - a markup language
o To describe the general form and layout of documents
 HTML is not a programming language - it cannot be used
describe computations.
o An HTML document is a mix of content and controls
 Controls are tags and their attributes
 Tags often delimit content and specify something about how the
content should be arranged in the document
For example, <p>Write a paragraph here </p> is an element.
 Attributes provide additional information about the content of a tag
For example, <img src = "[Link]"/> <font color ="Red" />
Plug ins
o Integrated into tools like word processors, effectively converting them to
WYSIWYG HTML editors
Filters
o Convert documents in other formats to HTML

Dept. of CSE, MRCET Page | 5

Web Technologies III [Link] II Sem (R15)

Advantages of both filters and plug- ins:

o Existing documents produced with other tools can be converted to HTML
documents
o Use a tool you already know to produce HTML
Disadvantages of both filters and plug- ins:
o HTML output of both is not perfect - must be fine tuned
o HTML may be non-standard
o You have two versions of the document, which are difficult to synchronize
XML
o A meta-markup language (a language for defining markup language)
o Used to create a new markup language for a particular purpose or area
o Because the tags are designed for a specific area, they can be meaningful
JavaScript
o A client-side HTML-embedded scripting language
o Provides a way to access elements of HTML documents and dynamically change
them
Flash
o A system for building and displaying text, graphics, sound, interactivity, and
animation (movies)
o Two parts:
1. Authoring environment
2. Player
Supports both motion and shape animation
PHP
A server-side scripting language
Great for form processing and database access through the Web
Ajax
Asynchronous JavaScript + XML
 No new technologies or languages
Much faster for Web applications that have extensive user/server interactions
Uses asynchronous requests to the server
Requests and receives small parts of documents, resulting in much faster responses
Java Web Software
Servlets – server-side Java classes
JavaServer Pages (JSP) – a Java-based approach to server-side scripting
JavaServer Faces – adds an event-driven interface model on JSP
[Link]
Does what JSP and JSF do, but in the .NET environment
[Link] languages to be used as server-side scripting language
Ruby
A pure object-oriented interpreted scripting language
Every data value is an object, and all operations are via method calls
Both classes and objects are dynamic
Rails
A development framework for Web-based applications
Particularly useful for Web applications that access databases
Written in Ruby and uses Ruby as its primary user language

Dept. of CSE, MRCET Page | 6

Web Technologies III [Link] II Sem (R15)

HTML Common tags:-

HTML is the building block for web pages. HTML is a format that tells a computer how to
display a web page. The documents themselves are plain text files with special "tags" or codes
that a web browser uses to interpret and display information on your computer screen.

HTML stands for Hyper Text Markup Language

An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display the page
An HTML file must have an htm or html file extension.

HTML Tags:- HTML tags are used to mark-up HTML elements .HTML tags are surrounded by the two
characters < and >. The surrounding characters are called angle brackets. HTML tags normally come in
pairs like and The first tag in a pair is the start tag, the second tag is the end tag . The text between the
start and end tags is the element content . HTML tags are not case sensitive, <B>means the same as <b>.

The most important tags in HTML are tags that define headings, paragraphs and line breaks.

Tag Description
<!DOCTYPE...> This tag defines the document type and HTML version.
<html> This tag encloses the complete HTML document and mainly comprises of
document header which is represented by <head>...</head> and document
body which is represented by <body>...</body> tags.
<head> This tag represents the document's header which can keep other HTML tags
like <title>, <link> etc.
<title> The <title> tag is used inside the <head> tag to mention the document title.

<body> This tag represents the document's body which keeps other HTML tags like
<h1>, <div>, <p> etc.
<p> This tag represents a paragraph.
<h1> to <h6> Defines header 1 to header 6

<br> Inserts a single line break

<hr> Defines a horizontal rule

<!--> Defines a comment

Headings:-
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading while <h6>
defines the smallest.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

Dept. of CSE, MRCET Page | 7

 Web Technologies III [Link] II Sem (R15)

Paragraphs:-

Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text. You can use the
align attribute with a paragraph tag as well.

<p align="left">This is a paragraph</p>

<p align="center">this is another paragraph</p>

Note: You must indicate paragraphs with <p> elements. A browser ignores any
indentations or blank lines in the source text. Without <p> elements, the document becomes
one large paragraph. HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks:-
The <br> tag is used when you want to start a new line, but don't want to start a new paragraph.
The <br> tag forces a line break wherever you place it. It is similar to single spacing in a
document.
This Code output
<p>This <br> is a para<br> graph with This
is a para
line breaks</p> graph with line breaks

Horizontal Rule The element is used for horizontal rules that act as dividers between sections
like this:

The horizontal rule does not have a closing tag. It takes attributes such as align and width
Code Output
<hr width="50%" align="center">

Sample html program

<!DOCTYPE html>
<html>
<head>
<title>This is document title
</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>

Type the above program in notepad and save with some file name eg:[Link]
Open the file with browser and the webpage looks like this

Dept. of CSE, MRCET Page | 8

Web Technologies III [Link] II Sem (R15)

Lists:-HTML offers web authors three ways for specifying lists of information.
All lists must contain one or more list elements. Lists are of three types
1)Un ordered list
2)Ordered List
3)Definition list

HTML Unordered Lists:An unordered list is a collection of related items that have no
special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is
marked with a bullet.
Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul> <li>Beetroot</li>
<li>Ginger</li> <li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

HTML Ordered Lists:- items are numbered list instead of bulleted, This list is created
by using <ol> tag.

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

Dept. of CSE, MRCET Page | 9

 Web Technologies III [Link] II Sem (R15)

HTML Definition Lists:- HTML and XHTML supports a list style which is called
definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is
the ideal way to present a glossary, list of terms, or other name/value list. Definition List makes
use of following three tags.
1). <dl> - Defines the start of the list
2). <dt> - A term
3).<dd> - Term definition
4). </dl> - Defines the end of the list

<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt> <dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt> <dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

HTML tables:
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc.
into rows and columns of cells. The HTML tables are created using the <table> tag in which the
<tr> tag is used to create table rows and <td> tag is used to create data cells.

Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td> <td>Row 1, Column 2</td>
</tr>
<tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

Dept. of CSE, MRCET Page | 10

Web Technologies III [Link] II Sem (R15)

Table Heading: Table heading can be defined using <th> tag. This tag will be put to replace
<td> tag, which is used to represent actual data cell. Normally you will put your top row as table
heading as shown below, otherwise you can use <th> element in any row.

Tables Backgrounds: set table background using one of the following two ways:
1)bgcolor attribute - You can set background color for whole table or just for one cell.
2)background attribute - You can set background image for whole table or just for one cell. You
can also set border color also using bordercolor attribute.

<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title> </head>
<body>
<table border="1"bordercolor="red" bgcolor="yellow">
<tr> <th>Name</th>
<th>Salary</th> </tr>
<td>Jayapal </td> <td>50,000.00</td>
</tr>
<tr> <td>Ravi</td> <td>45,000.00</td>
</tr>
</table>
</body>
</html>

Images are very important to beautify as well as to depict many complex concepts in simple way
on your web page.
Insert Image:
insert any image in the web page by using <img> tag.
<img align="left|right|middle|top|bottom">

Attribute Values

Value Description

left Align the image to the left

right Align the image to the right

<img src="Image URL" ... attributes-
middle Align the image in the middle li /

top Align the image at the top

bottom Align the image at the bottom

Dept. of CSE, MRCET Page | 11

 Web Technologies III [Link] II Sem (R15)

Example

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body> <p>Simple Image Insert</p>
<img src="[Link]" alt="Test Image" />
</body>
</html>

HTML FORMS:
HTML Forms are required to collect some data from the site visitor. For example, during
user registration you would like to collect information such as name, email address, credit card,
etc. A form will take input from the site visitor and then will post it to a back-end application
such as CGI, ASP Script or PHP script etc. The back-end application will perform required
processing on the passed data based on defined business logic inside the application. There are
various form elements available like text fields, text area fields, drop-down menus, radio buttons,
checkboxes, etc.

<form action="Script URL" method="GET|POST"> form elements like input, text area etc. </form>

Dept. of CSE, MRCET Page | 12

Web Technologies III [Link] II Sem (R15)

HTML Form Controls :

There are different types of form controls that you can use to collect data using HTML
<img
form:src="Image URL" ... attributes-list/>
 Text Input Controls
 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button

Text Input Controls:-

There are three types of text input used on forms:
1)Single-line text input controls - This control is used for items that require only one
line of user input, such as search boxes or names. They are created using HTML
<input> tag.

<input type="text"> defines a one-line input field for text input:

Example:

<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

2)Password input controls - This is also a single- line text input but it masks the character as
soon as a user enters it. They are also created using HTML <input> tag.
Input Type Password

<input type="password"> defines a password field:

<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>

Dept. of CSE, MRCET Page | 13

 Web Technologies III [Link] II Sem (R15)

3)Multi-line text input controls - This is used when the user is required to give details that may
be longer than a single sentence. Multi- line input controls are created using HTML
<textarea> tag.

<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form> Description: <br />
<textarea rows="5" cols="50" name="description"> Enter description here... </textarea>
</form>
</body>
</html>

Checkboxes Controls:-
Checkboxes are used when more than one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to checkbox.
Here is an example HTML code for a form with two checkboxes:

<!DOCTYPE html>
<html> <head> <title>Checkbox Control</title> </head>
<body>
<form>
<input type="checkbox" name="C++" value="on"> C++
<br>
<input type="checkbox" name="C#" value="on"> C#
<br>
<input type="checkbox" name="JAVA" value="on"> JAVA
</form>
</body> </html>

Radio Button Control:-

Radio buttons are used when out of many options, just one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set to radio.

<!DOCTYPE ht ml>
<html> <head> <tit le>Radio Bo x Control</tit le> </head>
<body> <p>Select a Course</p>
<form>
<input type="radio" name="subject" value="C++"> C++
<br>
<input type="radio" name="subject" value="JAVA"> JA VA
<br>
<input type="radio" name="subject" value="HTML"> HTM L
</form> </body> </html>

Dept. of CSE, MRCET Page | 14

Web Technologies III [Link] II Sem (R15)

Select Box Controls :- A s elect box, also called drop down box which provides option to
list down various options in the form of drop down list, from where a user can select one or
more options.

<!DOCTYPE ht ml>
<html>
<head>
<title>Select Bo x Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="C++" selected>C++</option>
<option value="JAVA">JA VA</option>
<option value="HTM L">HTM L</option>
</select>
</form>
</body>
</html>

File Select boxes:- If you want to allow a user to upload a file to your web site, you will
need to use a file upload box, also known as a file select box. This is also created using the
<input > element but type attribute is set to file.

<!DOCTYPE ht ml>
<html>
<head>
<title>File Upload Bo x</tit le>
</head>
<body>
<p>File Up load Bo x</p>
<form>
<input type="file" name="fileupload" accept="image/*" />
</form>
</body>
</html>

Hidden Controls:- Hidden form controls are used to hide data inside the page which later on
can be pushed to the server. This control hides inside the code and does not appear on the
actual page. For example, following hidden form is being used to keep current page
number. When a user will click next page then the value of hidden control will be sent to the
web server and there it will decide which page will be displayed next based on the passed
current page.

<html> <head> <title>File Upload Bo x</tit le> </head>

<body>
<form>
<p>Th is is page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Sub mit" />
<input type="reset" name="reset" value="Reset" />
</form> </body> </ht ml>

Dept. of CSE, MRCET Page | 15

Web Technologies III [Link] II Sem (R15)

Button Controls:-
There are various ways in HTML to create clickable buttons. You can also create a clickable
button using <input> tag by setting its type attribute to button. The type attribute can take the
following values:

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="[Link]" />
</form>
</body> </html>

HTML frames: These are used to divide your browser window into multiple sections where
each section can load a separate HTML document. A collection of frames in the browser window
is known as a frameset. The window is divided into frames in a similar way the tables are
organized: into rows and columns.
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset>
tag defines, how to divide the window into frames. The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame>
tag and it defines which HTML document shall open into the frame.

Dept. of CSE, MRCET Page | 16

 Web Technologies III [Link] II Sem (R15)

Note: HTML <frame> Tag. Not Supported in HTML5.

<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<iframe src="[Link]" height="400" width="400"frameborder="1">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</iframe>
</body>
</html>

CSS stands for Cascading Style Sheets

CSS describes how HTML elements are to be displaye d on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
 Inline - by using the style attribute in HTML elements
 Inte rnal - by using a <style> element in the <head> section
 External - by using an external CSS file
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the <h1> element to blue:

<h1 style="color:blue;">This is a Blue Heading</h1>

<html> <head> <title>Page Title</title> </head>

<body>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body>
</html>

Dept. of CSE, MRCET Page | 17

Web Technologies III [Link] II Sem (R15)

Inte rnal CSS: An internal CSS is used to define a style for a single HTML page. An internal
CSS is defined in the <head> section of an HTML page, within a <style> element:

<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

External CSS:-
An external style sheet is used to define the style for many HTML pages. With an external style
sheet, you can change the look of an entire web site, by changing one file! To use an external
style sheet, add a link to it in the <head> section of the HTML page:

<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

An external style sheet can be written in any text editor. The file must not contain any HTML
code, and must be saved with a .css extension.
Here is how the "[Link]" looks:

body { background-color: powderblue; }

h1 { color: blue; }

p { color: red; }

Dept. of CSE, MRCET Page | 18

Web Technologies III [Link] II Sem (R15)

CSS Fonts: The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.

<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

CSS Border: The CSS border property defines a border around an HTML element.
CSS Padding: The CSS padding property defines a padding (space) between the text and the
border.
CSS Margin: The CSS margin property defines a margin (space) outside the border.

<html> <head>
<style>
h1 {
co lor: blue;
font-family : verdana;
font-size: 300%; }
p {
co lor: red; font-size: 160%; border: 2p x solid powderb lue; padding: 30p x; marg in: 50p x; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Dept. of CSE, MRCET Page | 19

Web Technologies III [Link] II Sem (R15)

JavaScript:
What is JavaScript?
Java Script is one popular scripting language over internet. Scripting means a small sneak (piece). It is
always independent on other languages.
JavaScript is most commonly used as a client side scripting language. This means that JavaScript code is
written into an HTML page. When a user requests an HTML page with JavaScript in it, the script is sent
to the browser and it's up to the browser to do something with it.
Difference between JavaScript and Java
JavaScript Java
Cannot live outside a Web page Can build stand-alone applications or live in a
Web page as an applet.
Doesn‘t need a compiler Requires a compiler
Knows all about your page Applets are dimly aware of your Web page.
Untyped Strongly typed
Somewhat object-oriented Object-oriented
There are no relationship between in java & java script. Java Script is a scripting language that always
dependent in HTML language. It used to css commands. It is mainly used to creating DHTML pages &
validating the data. This is called client side validations.
Why we Use JavaScript?
Using HTML we can only design a web page but you can not run any logic on web browser
like addition of two numbers, check any condition, looping statements (for, while), decision
making statement (if-else) at client side. All these are not possible using HTML So for perform
all these task at client side you need to use JavaScript.
Features of JavaScript

JavaScript is a client side technology, it is mainly used for gives client side validation, but it have lot of
features which are given below;

Dept. of CSE, MRCET Page | 20

Web Technologies III [Link] II Sem (R15)
 Java script is object based oriented language.

Inheritance is does not support in JavaScript, so it is called object based oriented language.

 JavaScript was developed by Netscape (company name) & initially called live script.

Later Microsoft developed & adds some features live script then it is called “Jscript”.

Jscript is nothing but Java script. We cannot create own classes in java script.

 Java script is designed to add interactivity to HTML pages. It is usually embedded

directly into html pages.

 Java script is mainly useful to improve designs of WebPages, validate form data at

client side, detects (find) visitor‘s browsers, create and use to cookies, and much more.

 Java script is also called light weight programming language , because Java script is

return with very simple syntax. Java script is containing executable code.

 Java script is also called interpreted language , because script code can be executed

without preliminary compilation.

 It Handling dates, ti me, onSubmit, onLoad, onClick, onMouseOver & etc .

 JavaScript is case sensitive.

 Most of the javascript control statements syntax is same as syntax of controlstatements

in C language.

 An important part of JavaScript is the ability to create new functions within scripts.

Declare a function in JavaScript using function keyword.

Creating a java script: - html script tag is used to script code inside the html page.

<script> </script>

The script is containing 2 attributes. They are

1) Language attribute : -

It represents name of scripting language such as JavaScript, VbScript.

<script language=―JavaScript‖>

2) Type attribute : - It indicates MIME (multi purpose internet mail extension) type of scripting code. It
sets to an alpha-numeric MIME type of code.

<script type=―text / JavaScript‖>

Dept. of CSE, MRCET Page | 21

Web Technologies III [Link] II Sem (R15)
Location of script or placing the script: - Script code can be placed in both head & body section of html
page.

Script in head section Script in body section

<html> <html>
<head> <head>
<script type=―text / JavaScript‖> </head>
Script code here <body>
</script> <script type= ―text / JavaScript‖>
</head> Script code here
<body> </script>
</body> </body>
</html> </html>
Scripting in both head & body section: - we can create unlimited number of scripts inside the same
page. So we can locate multiple scripts in both head & body section of page.
Ex: - <html>
<head>
<script type=―text / JavaScript‖>
Script code here
</script>
</head>
<body>
<script type=―text / JavaScript‖>
Script code here
</script>
</body>
</html>
Program: -
<html>
<head>
<script language="JavaScript">
[Link]("hai my name is Kalpana")
</script>
</head>
<body text="red">
<marquee>
<script language="JavaScript">
[Link]("hai my name is Sunil Kumar Reddy")
</script> </marquee>
</body>
</html>
O/P: - hai my name is Kalpana

hai my name is Sunil Kumar Reddy

Dept. of CSE, MRCET Page | 22

Web Technologies III [Link] II Sem (R15)

document. write is the proper name of object.

 There are 2 ways of executing script code

1) direct execute
2) to execute script code dynamically
Reacts to events: - JavaScript can be set to execute when something happens. When the page is finished
loading in browser window (or) when the user clicks on html element dynamically.

Ex: -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional // EN">
<HTML>
<HEAD>
<script language="JavaScript">
function myf( )
{
[Link]("Hai Kalpana")
}
</script>
</HEAD>
<BODY>
to execute script code:
<input type="button" value="click me" onclick="myf( )">
To execute script code:
<input type="button" value="touch me" onmouseover="myf( )">
</BODY>
</HTML>

O/P: - to execute script code: To execute script code:

Creating external script: - some times you might want to run same script on several pages without
having to write the script on each page. To simplify this, write external script & save .js extension. To use
external script specify .js file in src attribute of script tag.

Note: - external script can not contain script tag.

save: - [Link]
[Link]("this is external script code 1 "+"<br>");
[Link]("this is external script code 2 "+"<br>");
[Link]("this is external script code 3 "+"<br>");
[Link]("this is external script code 4 ");

<HTML> <BODY>
<script language="JavaScript">
[Link]("this is document code 1 "+"<br>");
[Link]("this is document code 2 "+"<br>");
</script>
<script src="[Link]">
</script>
</BODY>
</HTML>

Dept. of CSE, MRCET Page | 23

Web Technologies III [Link] II Sem (R15)

JavaScript syntax rules: - JavaScript is case sensitive language. In this upper case lower case letters
are differentiated (not same).

Ex: - a=20;
A=20;
Those the variable name „a‟ is different from the variable named „A‟.
Ex: - myf( ) // correct
myF( ) // incorrect
 ; is optional in general JavaScript.
Ex: - a=20 // valid
b=30 // valid
A=10; b=40; // valid
However it is required when you put multiple statements in the same line.
 JavaScript ignore white space. In java script white space, tag space & empty lines are not preserved.
 To display special symbols we use \.
Comment lines: - comments lines are not executable.

// single line comment

/* this is multi line comment */

Declaring variable : - variable is a memory location where data can be stored. In java script variables
with any type of data are declared by using the keyword ‗var‘. All keywords are small letters only.

var a; a=20;
var str; str= “Sunil”;
var c; c=‟a‟;
var d; d=30.7;
But the keyword is not mandatory when declare of the variable.
c;  not valid. In this solution var keyword must be declared.
 During the script, we can change value of variable as well as type of value of variable.
Ex: -
a=20;
a=30.7;
JavaScript functions: - in java script functions are created with the keyword ‗function‘ as shown below

Syntax: - function funname( )

{
--------
}
Generally we can place script containing function head section of web page. There are 2 ways to call the
function.
1) direct call function
2) Events handlers to call the function dynamically.
1 We can pass data to function as argument but that data will be available inside the function.

Dept. of CSE, MRCET Page | 24

Web Technologies III [Link] II Sem (R15)

Ex: -

<HTML> </HEAD>
<HEAD> <BODY>
<TITLE> Function direct call</TITLE> <script>
<script language="JavaScript"> var r=add(30,60)
function add(x,y) [Link]("addition is :"+r);
{ </script>
z=x+y </BODY>
return z </HTML>
}
</script> O/P: - addition is :90

2 to add dynamical effects, java script provide a list of events that call function dynamically.
Hare each event is one attribute that always specified in html tags.
attrname=”attrval”
eventName=”funname( )”
Ex: -
<HTML> </HEAD>
<HEAD> <BODY> to call function:
<TITLE> Function dynamically</TITLE> <input type="button" value="click hare"
<script language="JavaScript"> onclick="add( )">
function add( ) </script>
{ </BODY>
x=20 </HTML>
y=30
z=x+y
O/P: - to call function:
[Link]("addition is :"+z);
addition is :90
}
</script>
EVENT HANDLERS: Events are not case sensitive.
Java script events: -
Attribute The event occurs when…
onclick mouse click an object
ondblclick mouse double clicks
onmouseover a mouse cursor on touch here
onmousedown a mouse button is pressed
onmousemove the mouse is moved
onmouseout the mouse is moved out an element
onmouseup a mouse button is released
onkeydown a keyboard key is pressed
onkeypress a keyboard key is pressed or held down
onkeyup a keyboard key is released
onfocus an elements get focus
onblur an element loses focus
onchange the content of a field change
onselect text is selected
onload a page or an image is finished loading
onunload the user exist the page

Dept. of CSE, MRCET Page | 25

Web Technologies III [Link] II Sem (R15)

onerror an error occurs when loading a document or an image

onabort loading an image is interrupted
onresize a window or frame is resized
onreset the reset button is pressed
onsubmit the submit button is clicked
Ex: -
<HTML> <br>
<HEAD> <b onmousemove="add( )">
<TITLE> Mouse Events </TITLE> to call function cursor move here :
<script language="JavaScript"> </b>
function add() <br>
{ <b onmouseup="add( )">
a=55 to call function cursor up here :
b=45 </b>
c=a+b <br>
[Link]("addition is :"+c) <b onmouseout="add( )">
} to call function cursor out here :
</script> </b>
</HEAD> </BODY>
<BODY> </HTML>
<b onclick="add( )">
to call function click here : O/P: -
</b> to call function click here :
<br> to call function touch here :
<b onmouseover="add( )"> to call function double click here :
to call function touch here : addition is :100
</b> to call function cursor move here :
<br> to call function cursor up here :
<b ondblclick="add( )"> to call function cursor out here :
to call function double click here :
</b>
Program: -
<HTML>
<HEAD>
<TITLE> display student name </TITLE>
<script language="JavaScript">
function disp( )
{
// access from data
var name=[Link]
// (or) var name=[Link]("snameid").value
//checking name
if(name=""||!isNaN(name)||!isNaN([Link](0)))
[Link]("sname you entered is invalid")
else
[Link]("sname you have entered is : "+name);
}

Dept. of CSE, MRCET Page | 26

Web Technologies III [Link] II Sem (R15)

</script>
</HEAD>
<BODY>
<form name="student">
Enter Student name:
<input type="text" name="sname"id="snameid" value="enter" onblur="disp( )">
</form>
</BODY>
</HTML>

O/P: -
1
Enter Student name:

1
Enter Student name:
sname you have entered is : true

Popup boxes: - popup (arises) box is a small window that always shown before opening the
page. The purpose of popup box is to write message, accept some thing from user. Java script
provides 3 types of popup boxes. They are 1) alert 2) Confirm. 3) Prompt.

1) alert popup box :-

Alert box is a very frequently useful to send or write cautionary messages to end use alert
box is created by alert method of window object as shown below.
Syntax: - window – alert (“message”);
When alert popup, the user has to click ok before continue browsing.
Ex: -
<html> [Link]("This is for addition of 2
<head> no's")
<title> alert box </title> [Link]("Result is: "+c)
<script language="JavaScript"> }
function add( ) </script>
{ </head>
a=20 <body onload="add( )">
b=40 </body>
c=a+b </html>

O/P: -

Result is: 60

Dept. of CSE, MRCET Page | 27

Web Technologies III [Link] II Sem (R15)

2) confirm popup box:-

This is useful to verify or accept some thing from user. It is created by confirm method of
window object as shown below.
Syntax:- [Link] (“message?”);
When the confirm box pop‘s up, user must click either ok or cancel buttons to proceed. If user
clicks ok button it returns the boolean valve true. If user clicks cancel button, it returns the
boolean value false.
Ex: - [Link]("result is :"+c)
<HTML> }
<HEAD> else
<TITLE> Confirm </TITLE> {
<script> [Link]("you clicked cancel button")
function sub( ) }
{ }
a=50 </script>
b=45 </HEAD>
c=a-b <BODY onload="sub( )">
x=[Link]("Do you want to see to see the o/p in pop up box:
subtraction of numbers") </BODY>
if(x==true) </HTML>
{

O/P: -
to see the o/p in pop up box:

result is :5

3) Prompt popup box:- It is useful to accept data from keyboard at runtime. Prompt box is
created by prompt method of window object.
[Link] (“message”, “default text”);
When prompt dialog box arises user will have to click either ok button or cancel button after
entering input data to proceed. If user click ok button it will return input value. If user click
cancel button the value ―null‖ will be returned.
Ex: -
<HTML> {
<HEAD> a=a*i
<TITLE> Prompt </TITLE> }
<script> [Link]("factorial value :"+a)
function fact( ) }
{ </script>
var b=[Link]("enter +ve integer </HEAD>
:","enter here") <BODY onload="fact( )">
var c=parseInt(b) </BODY>
a=1 </HTML>
for(i=c;i>=1;i--)

O/P: -

Dept. of CSE, MRCET Page | 28

Web Technologies III [Link] II Sem (R15)

FORM VALIDATION:
When we create forms, providing form validation is useful to ensure that your customers enter valid and
complete data. For example, you may want to ensure that someone inserts a valid e-mail address into a
text box, or perhaps you want to ensure that someone fills in certain fields.

We can provide custom validation for your forms in two ways: server-side validation and client-side
validation.
SERVER-SIDE VALIDATION
In the server-side validation, information is being sent to the server and validated using one of server-side
languages. If the validation fails, the response is then sent back to the client, page that contains the web
form is refreshed and a feedback is shown. This method is secure because it will work even if JavaScript
is turned off in the browser and it can‘t be easily bypassed by malicious users. On the other hand, users
will have to fill in the information without getting a response until they submit the form. This results in a
slow response from the server.

The exception is validation using Ajax. Ajax calls to the server can validate as you type and provide
immediate feedback. Validation in this context refers to validating rules such as username availability.

Server side validation is performed by a web server, after input has been sent to the server.

CLIENT-SIDE VALIDATION

Server-side validation is enough to have a successful and secure form validation. For better user
experience, however, you might consider using client-side validation. This type of validation is done on
the client using script languages such as JavaScript. By using script languages user‘s input can be
validated as they type. This means a more responsive, visually rich validation.

With client-side validation, form never gets submitted if validation fails. Validation is being handled in
JavaScript methods that you create (or within frameworks/plugins) and users get immediate feedback if
validation fails.

Main drawback of client-side validation is that it relies on JavaScript. If users turn JavaScript off, they
can easily bypass the validation. This is why validation should always be implemented on both the client
and server. By combining server-side and client-side methods we can get the best of the two: fast
response, more secure validation and better user experience.

Client side validation is performed by a web browser, before input is sent to a web server.

Validation can be defined by many different methods, and deployed in many different ways.

Simple Example:
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">

Dept. of CSE, MRCET Page | 29

Web Technologies III [Link] II Sem (R15)

<!--
// Form validation code will come here.
function validate()
{
var n = [Link];
if( n == "" || (!isNaN(parseInt(n))) || [Link] < 3 || [Link] >= 8)
{
alert( "Please enter valid name and minimum length 3 characters and maximum length 8
characters !" );
[Link]();
return false;
}

var emailID = [Link];

if( emailID == "" )
{
alert( "Please provide your Email!" );
[Link]() ;
return false;
}

atpos = [Link]("@");
dotpos = [Link](".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
[Link]() ;
return false;
}

var z = [Link];
if(z == "" ||isNaN(z) || [Link] != 6 )
{
alert( "Please provide a zip in the format #####." );
[Link]() ;
return false;
}

var c = [Link];
if( c == "-1" )
{

Dept. of CSE, MRCET Page | 30

Web Technologies III [Link] II Sem (R15)

alert( "Please provide your country!" );

return false;
}
return( true );
}

//-->
</script>
</head>
<body bgcolor="bisque">
<h1><p align="center"> <b>Application Form Validation Using JavaScript</b></p></h1>
<form action="[Link]" name="myForm" onsubmit="return(validate());">
<table cellspacing="5" cellpadding="5" align="center" border="5" width="438">
<tr>
<td align="right"><b>Name</b></td>
<td><input type="text" name="Name" size="50" /></td>
</tr>
<tr>
<td align="right"><b>EMail</b></td>
<td><input type="text" name="EMail" size="50" /></td>
</tr>
<tr>
<td align="right"><b>Zip Code</b></td>
<td><input type="text" name="Zip" size="50" /></td>
</tr>
<tr>
<td align="right" ><b>Country</b></td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">INDIA</option>
<option value="2">UK</option>
<option value="3">USA</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</font> </table> </form> </body> </html>

Dept. of CSE, MRCET Page | 31

Web Technologies III [Link] II Sem (R15)

Output:

Dept. of CSE, MRCET Page | 32

Web Technologies III [Link] II Sem (R15)

UNIT – II
TOPICS:
Introduction to PHP Introduction to XML
Declaring Variables Basic XML document
Data Types Presenting XML
Operators Document Type Definition(DTD)
Control Structures XML Schemas
Functions Document Object Model(DOM)
Reading data from WEB form controls Introduction to XHTML
like text boxes, radio buttons, lists etc.. Using XML Processors: DOM and SAX
Handling File Uploads
Handling Sessions and Cookies

PHP INTRODUCTION

PHP started out as a small open source project that evolved as more and more people found out
how useful it was. Ras mus Lerdorf unleashed the first version of PHP way back in 1994.

PHP is a recursive acronym for "PHP: Hypertext Preprocessor".

PHP is a server side scripting language that is embedded in HTML. PHP scripts are executed
on the server
It is used to manage dynamic content, databases, session tracking, even build entire e-
commerce sites.
PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic
ODBC, Microsoft SQL Server , etc.)
PHP is an open source software.
PHP is pleasingly zippy in its execution, especially when compiled as an Apache module on the
Unix side. The MySQL server, once started, executes even very complex queries with huge
result sets in record-setting time.
PHP supports a large number of major protocols such as POP3, IMAP, and LDAP.
PHP is forgiving: PHP language tries to be as forgiving as possible.
PHP Syntax is C-Like.
Common uses of PHP:
PHP performs system functions, i.e. from files on a system it can create, open, read, write, and
close them. The other uses of PHP are:
PHP can handle forms, i.e. gather data from files, save data to a file, thru email you can send
data, return data to the user.
You add, delete, and modify elements within your database thru PHP.
Access cookies variables and set cookies.
Using PHP, you can restrict users to access some pages of your website.
It can encrypt data.

Dept. of CSE, MRCET Page | 33

Web Technologies III [Link] II Sem (R15)

Characteristics of PHP:
Simplicity
Efficiency
Security
Flexibility
Familiarity
All PHP code must be included inside one of the three special markup tags are recognized by the
PHP Parser.

<?php PHP code goes here ?>

<? PHP code goes here ?>
<script language="php"> PHP code goes here </script>
Most common tag is the <?php...?>
SYNTAX OVERVIEW:
Canonical PHP tags The most universally effective PHP tag style is:
<?php...?>
Short-open (SGML-style) tags Short or short-open tags look like this:
<?...?>
HTML script tags HTML script tags look like this:
<script language="PHP">...</script>
PHP - VARIABLE TYPES
The main way to store information in the middle of a PHP program is by using a variable. Here
are the most important things to know about variables in PHP.
A variable is used to store information.
All variables in PHP are denoted with a leading dollar sign ($).
The value of a variable is the value of its most recent assignment.
Variables are assigned with the = operator, with the variable on the left-hand side and the
expression to be evaluated on the right.
Variables can, but do not need, to be declared before assignment.
Variables used before they are assigned have default values.
PHP does a good job of automatically converting types from one to another when
necessary.
PHP variables are Perl- like.
Syntax: $var_name = value;
Eg: creating a variable containing a string, and a variable containing a number:
<?php
$txt="HelloWorld!";
$x=16;
?>

Dept. of CSE, MRCET Page | 34

 Web Technologies III [Link] II Sem (R15)

PHP is a Loosely Typed Language:

 In PHP, a variable does not need to be declared before adding a value to it.
 You do not have to tell PHP which data type the variable is
 PHP automatically converts the variable to the correct data type, depending on its value.
Naming Rules for Variables
 A variable name must start with a letter or an underscore "_"
 A variable name can only contain alpha- numeric characters and underscores (a-z, A-Z,
0-9, and _ )
 A variable name should not contain spaces. If a variable name is more than one word, it
should be separated with an underscore ($my_string), or with capitalization/Camel notation
($myString)
PHP Variables Scope
In PHP, variables can be declared anywhere in the script. The scope of a variable is the part of
the script where the variable can be referenced / used. PHP has three different variable scopes:
local
global
static
Global and Local Scope
A variable declared outside a function has a GLOBAL SCOPE and can only be accessed outside
a function:
Example
<?php
$x = 5; // global scope
function myTest() {
// using x inside this function will generate an error
echo "<p>Variable x inside function is: $x</p>";
}
myTest();
echo "<p>Variable x outside function is: $x</p>";
?>
A variable declared within a function has a LOCAL SCOPE and can only be accessed within
that function:
Example
<?php
function myTest() {
$x = 5; // local scope
echo "<p>Variable x inside function is: $x</p>";
}
myTest(); // using x outside the function will generate an error
echo "<p>Variable x outside function is: $x</p>";
?>
You can have local variables with the same name in different functions, because local variables
are only recognized by the function in which they are declared.

Dept. of CSE, MRCET Page | 35

Web Technologies III [Link] II Sem (R15)

PHP The global Keyword

The global keyword is used to access a global variable from within a function. To do this, use the
global keyword before the variables (inside the function):
Example
<?php
$x = 5; $y = 10;
function myTest() {
global $x, $y;
$y = $x + $y; }
myTest();
echo $y; // outputs 15
?>
PHP also stores all global variables in an array called $GLOBALS[index]. The index holds the
name of the variable. This array is also accessible from within functions and can be used to
update global variables directly. The example above can be rewritten like this:
Example
<?php
$x = 5;
$y = 10;
function myTest() {
$GLOBALS['y'] = $GLOBALS['x'] + $GLOBALS['y'];
}
myTest();
echo $y; // outputs 15
?>

PHP The static Keyword

Normally, when a function is completed / executed, all of its variables are deleted. However,
sometimes we want a local variable NOT to be deleted. We need it fo r a further job.
To do this, use the static keyword when you first declare the variable:
Example
<?php
function myTest() {
static $x = 0;
echo $x;
$x++;
}
myTest();
myTest();
myTest(); ?> Output: 0 1 2
Then, each time the function is called, that variable will still have the information it contained
from the last time the function was called.
Note: The variable is still local to the function.

Dept. of CSE, MRCET Page | 36