SlideShare ist ein Scribd-Unternehmen logo
1 von 38
Downloaden Sie, um offline zu lesen
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 1
Introduction
HTML (Hypertext Markup Language) is the set of markup symbols or codes inserted in a file intended
for display on a World Wide Web browser page. The markup tells the Web browser how to display a
Web page's words and images for the user. Each individual markup code is referred to as an element
(but many people also refer to it as a tag). Some elements come in pairs that indicate when some display
effect is to begin and when it is to end.
HTML is a formal Recommendation by the World Wide Web Consortium (W3C) and is generally
adhered to by the major browsers, Microsoft's Internet Explorer and Netscape's Navigator, which also
provide some additional non-standard codes. The current version of HTML is HTML 4.0. However,
both Internet Explorer and Netscape implement some features differently and provide non-standard
extensions. Web developers using the more advanced features of HTML 4 may have to design pages for
both browsers and send out the appropriate version to a user. Significant features in HTML 4 are
sometimes described in general as dynamic HTML. What is sometimes referred to as HTML 5 is an
extensible form of HTML called Extensible Hypertext Markup Language (XHTML)
 Tools needed - HTML is written in plain text. That means you don’t need any fancy software
programs like a word processor to create your HTML files. All you need is a simple text-editor
that’s already on your system. For MACs, that would be SimpleText and for Windows, Notepad.
Some rules As with most things in life, there are rules. In HTML, the rules are fairly simple. For
starters, HTML tags are always surrounded by what are called angle brackets < and >. You’ll
find these brackets on your keyboard just above the comma and period.
 Elements - The words/letters between these two angle brackets are called elements. These are
the coded commands within HTML. Elements tell the browser how to display the web page. For
example: <hr> tells the browser to display a horizontal rule; <br> tells the browser to skip a line.
 Container and empty tags - There are two kinds of tags: container and empty.
The container tag always wraps around text or graphics and comes in a set with an opening and a
closing:
<html> opening tag </html> closing tag
Notice the forward slash (/) on the closing tag. This tells the browser that the tag has ended.
On the other hand, the empty tag stands alone. The tag <br> is one that adds a line break. Empty tags
do not have to be wrapped around copy and do not require a closing.
 Case sensitive HTML is also not case sensitive. That means, you can use either lowercase or
uppercase. <HTML> is the same as <html>. For consistency, use either one or the other. It's best
not to mix and match. For our purposes, I have written our code in lowercase.
HTML structure
All HTML documents are divided into two main parts: the head and the body. It goes something like
this:
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 2
You must have the <html>, <head> and <body> container tags in every HTML file.
The <html> tag tells the browser that this is an HTML document. You must begin and end your files
with this tag. The <head> tag contains general information like the title of your document.
The <body> tag holds all your content: words, pictures, artwork and other stuff.
In general, dynamic means energetic, capable of action and/or change, or forceful, while
static means stationary or fixed. In computer terminology, dynamic usually means capable of action
and/or change, while static means fixed. Both terms can be applied to a number of different types of
things, such as programming languages (or components of programming languages), Web pages, and
application programs.
When a Web page is requested (by a computer user clicking a hyperlink or entering a URL),
the server where the page is stored returns the HTML document to the user's computer and
the browser displays it. On a static Web page, this is all that happens. The user may interact with the
document through clicking available links, or a small program (an applet) may be activated, but the
document has no capacity to return information that is not pre-formatted. On a dynamic Web page, the
user can make requests (often through a form) for data contained in a database on the server that will be
assembled on the fly according to what is requested. For example the user might want to find out
information about a theatrical performance, such as theater locations and ticket availability for particular
dates. When the user selects these options, the request is relayed to the server using an intermediary,
such as an Active Server Page (ASP) script embedded in the page's HTML. The intermediary tells the
server what information to return. Such a Web page is said to be dynamic.
A set of HTML capabilities are provided that help a designer create dynamic Web pages. This set of
capabilities is generally known as dynamic HTML.
There are dynamic and static programming languages. In a dynamic language, such as Perlor LISP, a
developer can create variables without specifying their type. This creates more flexible programs and
can simplify prototyping and some object-oriented coding. In a static programming language, such
as C or Pascal, a developer must declare the type of each variable before the code is compiled, making
the coding less flexible, but also less error-prone.
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 3
DHTML
DHTML is essentially Dynamic HTML. It is a new way of looking at and controlling the standard
HTML codes and commands. DHTML is a collection of technologies that are used to create interactive
and animated web sites. DHTML gives more control over the HTML elements. It allows one to
incorporate a client-side scripting language, such as JavaScript, a presentation definition language, such
as CSS, and the Document Object Model in HTML web pages.
DHTML also allows the pages to change at any time, without returning to the Web server first. It
allows scripting languages to change a web page's look and function after the page has been fully loaded
and during the viewing process. It also allows the user to add effects to their pages that are otherwise
difficult to achieve.
Wikipedia list additional DHTML features, such as DHTML allows the developers to:
 Animate text and images in their document, independently moving each element from any
starting point to any ending point, following a predetermined path or one chosen by the user.
 Embed a ticker that automatically refreshes its content with the latest news, stock quotes, or
other data.
 Use a form to capture user input, and then process, verify and respond to that data without
having to send data back to the server.
 Include rollover buttons or drop-down menus.
Some differences between HTML and DHTML:
 HTML is a mark-up language, while DHTML is a collection of technology.
 DHTML creates dynamic web pages, whereas HTML creates static web pages.
 DHTML allows including small animations and dynamic menus in Web pages.
 DHML used events, methods, properties to insulate dynamism in HTML Pages.
 DHML is basically using JavaScript and style sheets in an HTML page.
 HTML sites will be slow upon client-side technologies, while DHTML sites will be fast enough
upon client-side technologies.
 HTML creates a plain page without any styles and Scripts called as HTML. Whereas, DHTML
creates a page with HTML, CSS, DOM and Scripts called as DHTML.
 HTML cannot have any server side code but DHTML may contain server side code.
 In HTML, there is no need for database connectivity, but DHTML may require connecting to a
database as it interacts with user.
 HTML files are stored with .htm or .html extension, while DHTML files are stored with .dhtm
extension.
 HTML does not require any processing from browser, while DHTML requires processing from
browser which changes its look and feel.
The HTML Document Structure
Using the correct HTML document structure when creating a web page is important. If the HTML
document structure is incorrect the web page can break or the search engine spider may not be able to
read the page. Starting with the very first line in your HTML document:
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 4
DOCTYPE Declaration
The DOCTYPE declaration is the first part of coding that you should enter in your HTML document.
This is required if you wish to validate your document with the W3C's validation service.
Web browsers need to know what version of HTML/XHTML your page is written in to process the code
correctly.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
The HTML Tags
All HTML documents contain a <html> and </html> pair of tags. These tags identify the document's
contents as HTML to the browser. The <html> tag goes in the line right under your DOCTYPE
declaration. </html> is the last line of coding in your document.
Opening html tag:
<html>
The Head Tags - Opening Head Tag
The <head> and </head> tags identify the document's head area. The information between these two
tags is not visible on your page.
Opening head tag:
<head>
Character Encoding
The character encoding meta tag tells the browser which character set the web page uses.
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
Title Tag
The title tag creates the page title that is seen in the title bar of the web page.
<title>Title of the document</title>
Meta Tags
The meta tags provide information about your web page.
<metaname="Description" content="Your description">
<meta name="Keywords" content="first, second, third">
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 5
<meta name="Author" content="Author Information">
<meta name="Copyright" content="Copyright Statement">
<meta name="Distribution" content="Global">
<meta name="Expires" content="Tue, 01 Jun 1999 19:58:02 GMT">
<meta name="Robots" content="index,follow">
Link Tag
The link tag is used to link other documents to this one.
This example shows linking to an external stylesheet.
<link rel="stylesheet" type="text/css" href="styles/stylesht.css">
Script Tag
The script tag defines what type of script the browser is to execute. This tag can also be included in the
body of your page.
<script type="text/javascript">
<!--
<!--Your script -->
-->
</script>
Style Tag
The style tag is used to set the style of your document elements. It is better to use an external style sheet
using the link tag so if you wish to change something you only have to change it in one spot.
<style type="text/css">
Your style types
</style>
Closing Head Tag
The closing head tag defines the end of the document's head section.
</head>
The Body Tags
The body tags surround the body (contents) of your web page.
<body>
The body of the document
</body>
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 6
Closing HTML Tag
The closing HTML tag is the last line in your HTML document. Don't put anything after this tag! Your
page will not validate if you do.
</html>
The above descriptions are excerts from the HTML Basics Simplified ebook.
HTML Document Structure Related Articles
 DOCTYPE - DTD - Document Type Declaration The DOCTYPE Declaration (DTD or
Document Type Declaration), what it does and why each web page needs it.
 Character Encoding Character encoding tells the browser and validator what set of characters
to use when converting the bits to characters.
 Meta Tags What meta tags are and how they are constructed.
 Anatomy of a Web Page Description of the basic structure of a web page and the anatomy of a
web page. Here you will learn a web page basic structure.
 Code Validation Code validation is the process of checking that the coding of a web page is in
compliance with the standards and recommendations set by the World Wide Web Consortium
(W3C) for the web. Code validation helps to produce clean code.
 Lower Case HTML Tags and HTML Tag Attributes When entering your basic HTML tags
and HTML tag attributes use lower case in preparation for future web technologies, consistent
web page rendering and search engine optimization.
Name
Start
Tag
End
Tag
Empty Depr. DTD Description
A anchor
ABBR abbreviated form (e.g., WWW, HTTP, etc.)
ACRONYM
ADDRESS information on author
APPLET D L Java applet
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 7
AREA F E client-side image map area
B bold text style
BASE F E document base URI
BASEFONT F E D L base font size
BDO I18N BiDi over-ride
BIG large text style
BLOCKQUOTE long quotation
BODY O O document body
BR F E forced line break
BUTTON Push button
CAPTION table caption
CENTER D L shorthand for DIV align=center
CITE Citation
CODE computer code fragment
COL F E table column
COLGROUP O table column group
DD O definition description
DEL deleted text
DFN instance definition
DIR D L directory list
DIV generic language/style container
DL definition list
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 8
DT O Definition term
EM Emphasis
FIELDSET form control group
FONT D L local change to font
FORM interactive form
FRAME F E F Sub-window
FRAMESET F window subdivision
H1 Heading
H2 Heading
H3 Heading
H4 heading
H5 heading
H6 heading
HEAD O O document head
HR F E horizontal rule
HTML O O document root element
I italic text style
IFRAME L inline sub window
IMG F E Embedded image
INPUT F E form control
INS inserted text
ISINDEX F E D Single line prompt
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 9
KBD text to be entered by the user
LABEL form field label text
LEGEND Field set legend
LI O list item
LINK F E a media-independent link
MAP client-side image map
MENU D L menu list
META F E generic meta information
NOFRAMES F
alternate content container for non frame-
based rendering
NOSCRIPT
alternate content container for non script-
based rendering
OBJECT generic embedded object
OL ordered list
OPTGROUP option group
OPTION O selectable choice
P O Paragraph
PARAM F E Named properly value
PRE preformatted text
Q short inline quotation
S D L strike-through text style
SAMP sample program output, scripts, etc.
SCRIPT script statements
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 10
SELECT option selector
SMALL small text style
SPAN generic language/style container
STRIKE D L strike-through text
STRONG strong emphasis
STYLE style info
SUB Subscript
SUP Superscript
TABLE Table
TBODY O O table body
TD O Table data cell
TEXTAREA multi-line text field
TFOOT O table footer
TH O table header cell
THEAD O table header
TITLE document title
TR O table row
TT teletype or mono spaced text style
U D L underlined text style
UL unordered list
VAR instance of a variable or program argument
The tags used to produce links are the <a> and </a>. The <a> tells where the link should start and
the </a> indicates where the link ends. Everything between these two will work as a link. The target of
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 11
the link is added to the <a> tag using the ref="http://www.whateverpage.com" setting. The example
below shows how to make the word here work as a link to yahoo.
Click <a href="http://www.yahoo.com">here</a> to go to yahoo.
You simply:
Specify the target in the <a href=" ">.
 Then add the text that should work as a link.
 Finally add an </a> tag to indicate where the link ends.
It is possible to make one image link to several pages, depending on where the image is clicked. This
technique is called image mapping. You simply specify which areas of the image should link to where.
In the example below, if you position the mouse in the upper left corner it links to yahoo .... and in the
lower right corner.... it links to hotbot.
<img src="rainbow.gif" usemap = #example border=0>
<map name=example>
<area shape=Rect Coords=0,0,29,29
Href="http://www.yahoo.com">
<area shape=Rect Coords=30,30,59,59
Href="http://www.hotbot.com">
</map>
In the above example we only used rectangular image mappings. Possible shapes are:
 <area shape=rect coords= x1,y1, x2,y2 Href="http://www.domain.com">
 <area shape=circle coords= x1,y1, x2,y2 Href="http://www.domain.com">
 <area shape=polygon coords= x1,y1, x2,y2, .., xn,yn Href="http://www.domain.com">
There are excellent tools out there to help you create image maps. No one calculates the coordinates by
hand. If you want to use image maps on your site you will need to get a program that will allow you to
simply drag the mouse over the areas you want to work as links. Most HTML editors have this as a
built-in function.
Metadata
Metadata is "data about data". The term is ambiguous, as it is used for two fundamentally different
concepts (types). Structural metadata is about the design and specification of data structures and is
more properly called "data about the containers of data", descriptive metadata, on the other hand, is
about individual instances of application data, the data content.
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 12
Metadata are traditionally found in the card catalogs of libraries. As information has become
increasingly digital, metadata are also used to describe digital data using metadata standards specific to a
particular discipline. By describing the contents and context of data files, the quality of the original
data/files is greatly increased. For example, a web page may include metadata specifying what language
it is written in, what tools were used to create it, and where to go for more on the subject,
allowing browsers to automatically improve the experience of users.
Image Preliminaries
In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains
attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute.
Src stands for "source". The value of the src attribute is the URL of the image you want to display on
your page.
Syntax
<img src="url" />
The URL points to the location where the image is stored.
HTML Layout - Using Tables:
The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are
arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.
For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns
- but the header and footer column spans both columns using the colspan attribute:
<tablewidth ="100%" border="0">
<tr>
<td colspan="2" style="background-color:#CC99FF;">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFCCFF;
width:100px;text-align:top;">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td style="background-color:#eeeeee;height:200px;
width:300px;text-align:top;">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#CC99FF;">
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 13
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
This will produce following result:
This is Web Page Main title
Main Menu
HTML
PHP
PERL...
Technical and Managerial Tutorials
Copyright © 2007 Tutorialspoint.com
To Become more comfortable - Do Online Practice
Multiuple Columns Layouts - Using Tables
You can design your webpage to put your web content in multiple pages. You can keep your content in
middle column and you can use left column to use menu and right column can be used to put
advertisement or some other stuff. It will be very similar to our site tutorialspoint.com.
Here is an example to create three column layout:
<table width="100%" border="0">
<tr valign="top">
<td style="background-color:#FFCCFF;width:20%;
text-align:top;">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td style="background-color:#eeeeee;height:200px;
width:60%;text-align:top;">
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 14
Technical and Managerial Tutorials
</td>
<td style="background-color:#FFCCFF;
width:20%;text-align:top;">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>
This will produce following result:
Main Menu
HTML
PHP
PERL...
Technical and Managerial Tutorials Right Menu
HTML
PHP
PERL...
Background
Authors may specify the background of an element (i.e., its rendering surface) as either a color or an
image. In terms of the box model, "background" refers to the background of
the content, padding and border areas. Border colors and styles are set with the border properties.
Margins are always transparent. Background properties are not inherited, but the parent box's
background will shine through by default because of the initial 'transparent' value on 'background-color'.
The background of the root element becomes the background of the canvas and covers the entire canvas,
anchored (for 'background-position') at the same point as it would be if it was painted only for the root
element itself. The root element does not paint this background again.
For HTML documents, however, we recommend that authors specify the background for the BODY
element rather than the HTML element. For documents whose root element is an HTML "HTML"
element or an XHTML "html" element that has computed values of 'transparent' for 'background-
color' and 'none' for 'background-image', user agents must instead use the computed value of the
background properties from that element's first HTML "BODY" element or XHTML "body" element
child when painting backgrounds for the canvas, and must not paint a background for that child element.
Such backgrounds must also be anchored at the same point as they would be if they were painted only
for the root element.
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 15
According to these rules, the canvas underlying the following HTML document will have a "marble"
background:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<TITLE>Setting the canvas background</TITLE>
<STYLE type="text/css">
BODY { background: url("http://example.com/marble.png") }
</STYLE>
<P>My background is marble.
Note that the rule for the BODY element will work even though the BODY tag has been omitted in the
HTML source since the HTML parser will infer the missing tag.
Backgrounds of elements that form a stacking context (see the 'z-index' property) are painted at the
bottom of the element's stacking context, below anything in that stacking context.
Background properties: 'background-color', 'background-image', 'background-repeat', 'background
attachment', 'background-position', and 'background'
'background-color'
Value: <color> | transparent | inherit
Initial: transparent
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified
This property sets the background color of an element, either a <color> value or the keyword
'transparent', to make the underlying colors shine through.
h1 { background-color: #F00 }
<img>
Used by visual user agents to insert an image in the document. The src attribute specifies the image URL.
The required alt attribute provides alternative text in case the image cannot be displayed. (Though alt is
intended as alternative text, Microsoft Internet Explorer 7 and below render it as a tooltip if no title is
given. Safari and Google Chrome, on the other hand, do not display the alt attribute at all.) img was
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 16
proposed by Marc Andreessen and implemented in the NSCA Mosaic web browser.
IMG existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current.
<map>...</map>
Specifies a client-side image map.
<object>...</object>
Includes an object in the page of the type specified by the type attribute. This may be in any MIME-type
the user agent understands, such as an embedded HTML page, a file to be handled by a plug-in such
as Flash, a Java applet, a sound file, etc.
<param>
Originally introduced with applet, this element is now used with, and should only occur as a child
of object. It uses HTML attributes to set a parameter for the object, e.g. width, height, font, background
colour, etc., depending on the type of object. An object can have multiple params.
These elements can be combined into a form or in some instances used separately as user-interface
controls; in the document, they can be simple HTML or used in conjunction with Scripts. HTML markup
specifies the elements that make up a form, and the method by which it will be submitted. However, some
form of scripts (server-side, client-side, or both) must be used to process the user’s input once it is
submitted.
(These elements are either block or inline elements, but are collected here as their use is more restricted
than other inline or block elements.)
<form action="url">...</form>
Creates a form. The form element specifies and operates the overall action of a form area, using the
required action attribute.
<button>...</button>
A generic form button which can contain a range of other elements to create complex buttons.
<fieldset>...</fieldset>
A container for adding structure to forms. For example, a series of related controls can be grouped within
a field-set, which can then have a legend added in order to identify their function.
<input>
input elements allow a variety of standard form controls to be implemented.
Input Types:
type="checkbox"
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 17
A checkbox. Can be checked or unchecked.
type="radio"
A radio button. If multiple radio buttons are given the same name, the user will only be able to select
one of them from this group.
type="button"
A general-purpose button. The element <button> is preferred if possible (i.e. if the client supports it) as it
provides richer possibilities.
type="submit"
A submit button.
type="image"
An image button. The image URL may be specified with the src attribute.
type="reset"
A reset button for resetting the form to default values.
type="text"
A one-line text input field. The size attribute specifies the default width of the input in character-
widths. max-length sets the maximum number of characters the user can enter (which may be greater than
size).
type="password"
A variation of text. The difference is that text typed in this field is masked — characters are displayed as
an asterisk, a dot or another replacement. It should be noted, however, that the password is still submitted
to the server as clear text, so an underlying secure transport layer like HTTPS is needed if confidentiality
is a concern.
type="file"
A file select field (for uploading files to a server).
type="hidden"
hidden inputs are not visible in the rendered page, but allow a designer to maintain a copy of data that
needs to be submitted to the server as part of the form. This may, for example, be data that this web user
entered or selected on a previous form that needs to be processed in conjunction with the current form.
<isindex> (deprecated)
isindex could either appear in the document head or in the body, but only once in a document.
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 18
Isindex operated as a primitive HTML search form; but was de facto obsoleted by more advanced HTML
forms introduced in the early to mid-1990s. Represents a set of hyperlinks composed of a base URI,
an ampersand and percent-encoded keywords separated by plus signs.
<label for="id">...</label>
Creates a label for a form input (e.g. radio button). Clicking on the label fires a click on the matching
input.
<legend>...</legend>
A legend (caption) for a fieldset..
<option value="x">
Creates an item in a select list.
<optgroup>...</optgroup>
Identifies a group of options in a select list.
<select name="xyz">...</select>
Creates a selection list, from which the user can select a single option. May be rendered as a dropdown
list.
<textarea rows="8">...</textarea>
A multiple-line text area, the size of which is specified by cols (where a col is a one-character width of
text) and rows HTML attributes. The content of this element is restricted to plain text, which appears in
the text area as default text when the page is loaded.
Tables
The format of HTML Tables was proposed in the HTML 3.0 Drafts and the later RFC 1942 HTML
Tables. They were inspired on the CALS Table Model. Some elements in these proposals were included
in HTML 3.2; the present form of HTML Tables was standardized in HTML 4. (Many of the elements
used within tables are neither block nor inlineelements.)
<table>...</table>
Identifies a table. Several HTML attributes are possible in HTML Transitional, but most of these are
invalid in HTML Strict and can be replaced with style sheets. The summary attribute is however
informally required for accessibility purposes, though its usage is not simple.
<tr>...</tr>
Contains a row of cells in a table.
<th>...</th>
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 19
A table header cell; contents are conventionally displayed bold and centered. An aural user agent may use
a louder voice for these items.
<td>...</td>
A table data cell.
<colgroup>...</colgroup>
Specifies a column group in a table.
<col> or <col/>
Specifies a column in a table.
<caption>...</caption>
Specifies a caption for a table.
<thead>...</thead>
Specifies the header part of a table. This section may be repeated by the user agent if the table is split
across pages (in printing or other paged media).
<tbody>...</tbody>
Specifies a body of data for the table.
<tfoot>...</tfoot>
Specifies the footer part of a table. Like <thead>, this section may be repeated by the user agent if the
table is split across pages (in printing or other paged media).
Framing (World Wide Web)
Frames allow a visual HTML Browser window to be split into segments, each of which can show a
different document. This can lower bandwidth use, as repeating parts of a layout can be used in one
frame, while variable content is displayed in another. This may come at a certain usability cost, especially
in non-visual user agents,[citation needed]
due to separate and independent documents (or websites) being
displayed adjacent to each other and being allowed to interact with the same parent window. Because of
this cost, frames (excluding the <iframe> element) are only allowed in HTML 4.01 Frame-set.
In HTML 4.01, a document may contain a <head> and a <body> or a <head> and a <frameset>, but not
both a <body> and a <frameset>. However, <iframe> can be used in a normal document body.
<frameset>...</frameset>
Contains the set of frame elements for a document. The layout of frames is given by comma separated
lists in the rows and cols HTML attributes.
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 20
<frame> or <frame/>
Defines a single frame, or region, within the frameset. A separate document is linked to a frame using
the src attribute inside the frame element.
<noframes>...</noframes>
Contains normal HTML content for user agents that don't support frames.
<iframe>...</iframe>
An inline frame places another HTML document in a frame. Unlike an object element, an inline frame
can be the "target" frame for links defined by other elements, and it can be selected by the user agent as
the focus for printing, viewing its source, and so on.
The content of the element is used as alternative text to be displayed if the browser does not support i-
frames.
Embedding Video
Here is the simplest form of embedding a video file in your webpage:
<video src="foo.mp4" width="300" height="200" controls>
Your browser does not support the <video> element.
</video>
The current HTML5 draft specification does not specify which video formats browsers should support in
the video tag. But most commonly used video formats are:
1. Ogg: Ogg files with Thedora video codec and Vorbis audio codec.
2. mpeg4: MPEG4 files with H.264 video codec and AAC audio codec.
You can use <source> tag to specify media along with media type and many other attributes. A video
element allows multiple source elements and browser will use the first recognized format:
<!DOCTYPE HTML>
<html>
<body>
<video width="300" height="200" controls autoplay>
<source src="/html5/foo.ogg" type="video/ogg" />
<source src="/html5/foo.mp4" type="video/mp4" />
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 21
Your browser does not support the <video> element.
</video>
</body>
</html>
Video Attribute Specification:
The HTML5 video tag can have a number of attributes to control the look and feel and various
functionalities of the control:
Attribute Description
Autoplay This boolean attribute if specified, the video will automatically begin to play back as soon
as it can do so without stopping to finish loading the data.
Autobuffer This boolean attribute if specified, the video will automatically begin buffering even if
it's not set to automatically play.
Controls If this attribute is present, it will allow the user to control video playback, including volume,
seeking, and pause/resume playback.
Height This attribut specifies the height of the video's display area, in CSS pixels.
Loop This boolean attribute if specified, will allow video automatically seek back to the start
after reaching at the end.
Preload This attribute specifies that the video will be loaded at page load, and ready to run. Ignored
if autoplay is present.
poster This is a URL of an image to show until the user plays or seeks.
src The URL of the video to embed. This is optional; you may instead use the <source> element
within the video block to specify the video to embed
width This attribut specifies the width of the video's display area, in CSS pixels.
Embedding Audio
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 22
HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML document
as follows.
<audio src="foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>
The current HTML5 draft specification does not specify which audio formats browsers should support in
the audio tag. But most commonly used audio formats are ogg, mp3 and wav.
You can use <source> tag to specify media along with media type and many other attributes. An audio
element allows multiple source elements and browser will use the first recognized format:
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src="/html5/audio.ogg" type="audio/ogg" />
<source src="/html5/audio.wav" type="audio/wav" />
Your browser does not support the <audio> element.
</audio>
</body>
</html>
Audio Attribute Specification
The HTML5 audio tag can have a number of attributes to control the look and feel and various
functionalities of the control:
Attribute Description
autoplay This boolean attribute if specified, the audio will automatically begin to play back as
soon as it can do so without stopping to finish loading the data.
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 23
autobuffer This boolean attribute if specified, the audio will automatically begin buffering even
if it's not set to automatically play.
controls If this attribute is present, it will allow the user to control audio playback, including
volume, seeking, and pause/resume playback.
loop This boolean attribute if specified, will allow audio automatically seek back to the
start after reaching at the end.
preload This attribute specifies that the audio will be loaded at page load, and ready to run.
Ignored if autoplay is present.
src The URL of the audio to embed. This is optional; you may instead use the <source>
element within the video block to specify the video to embed
Database Integration
The HTTP listener and PL/SQL gateway are used to build web-enabled systems that provide tight
integration with a backend Oracle database. PL/SQL-based OAS and WebDB applications are developed
using a set of packages called the PL/SQL toolkit.
The PL/SQL Toolkit
WebDB and OAS both include the PL/SQL toolkit. The toolkit contains a variety of PL/SQL packages
written and supplied by Oracle that perform a range of tasks, including generating HTML tags,
manipulating cookies (name/value pairs used to save information throughout an entire session), and
creating complex HTML structures based on information in a database table. In general, procedures built
with the toolkit will work in either product, although you may run into minor database privilege issues
that the DBA can help you resolve.
HTP and HTF
HTP is a set of procedures that print syntactically correct HTML tags, which are returned to the user's
web browser. HTF is an equivalent set of functions that return HTML strings whose output is returned to
the program that called the function. In either package, procedures and functions correspond to specific
HTML tags; their parameters correspond to tag attributes.
OWA_COOKIE
A set of data structures, procedures, and functions used to create and manipulate cookies.
OWA_IMAGE
A set of data structures, procedures, and functions used to manipulate image maps.
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 24
OWA_OPT_LOCK
A set of data structures, procedures, and functions used to perform optimistic record locking. The package
can either compute a checksum that's used to test for differences or compare each field of the old and new
records
OWA_PATTERN
A set of data structures, procedures, and functions that perform advanced search and replace operations
on text strings using regular expressions.
OWA_SEC
A set of data structures, procedures, and functions used to develop customized security and authentication
procedures, such as GET_USER_ID (to return the user executing the procedure) or GET_CLIENT_IP (to
return the IP address of the machine making the request).
OWA_TEXT
A set of data structures, procedures, and functions used to perform operations on large strings. Also used
as the basis of many of the procedures in OWA_PATTERN.
OWA_UTIL
A set of data structures, procedures, and functions used to create advanced HTML structures, such as
calendars or tables. Many of the WebDB components, such as forms or calendars, are based directly on
this package.
Cascading Style Sheets a new feature being added to HTML that gives both Web site developers
and users more control over how pages are displayed. With CSS, designers and users can create style
sheets that define how different elements, such as headers and links, appear. These style sheets can then
be applied to any Web page. The term cascading derives from the fact that multiple style sheets can be
applied to the same Web page. CSS was developed by theW3C.
Three Ways to Insert CSS
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you
can change the look of an entire Web site by changing one file. Each page must link to the style sheet
using the <link> tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
An external style sheet can be written in any text editor. The file should not contain any html tags. Your
style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
hr {color:sienna;}
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 25
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal
styles in the head section of an HTML page, by using the <style> tag, like this:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation.To use
inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS
property. The example shows how to change the color and the left margin of a paragraph:
<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>
What is CGI ?
 The Common Gateway Interface, or CGI, is a set of standards that define how information is
exchanged between the web server and a custom script.
 The CGI specs are currently maintained by the NCSA and NCSA defines CGI is as follows:
The Common Gateway Interface, or CGI, is a standard for external gateway programs to interface with
information servers such as HTTP servers.
 The current version is CGI/1.1 and CGI/1.2 is under progress.
Web Browsing
To understand the concept of CGI, lets see what happens when we click a hyper link to browse a
particular web page or URL.
 Your browser contacts the HTTP web server and demand for the URL ie. filename.
 Web Server will parse the URL and will look for the filename in if it finds that file then sends
back to the browser otherwise sends an error message indicating that you have requested a wrong
file.
 Web browser takes response from web server and displays either the received file or error
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 26
message.
However, it is possible to set up the HTTP server so that whenever a file in a certain directory is
requested that file is not sent back; instead it is executed as a program, and whatever that program outputs
is sent back for your browser to display. This function is called the Common Gateway Interface or CGI
and the programs are called CGI scripts. These CGI programs can be a PERL Script, Shell Script, C or
C++ program etc.
CGI Architecture Diagram
Web Server Support & Configuration Before you proceed with CGI Programming, make sure that
your Web Server supports CGI and it is configured to handle CGI Programs. All the CGI Programs be
executed by the HTTP server are kept in a pre-configured directory. This directory is called CGI
Directory and by convention it is named as /cgi-bin. By convention PERL CGI files will have extention
as .cgi.
First CGI Program Here is a simple link which is linked to a CGI script called hello.cgi. This file is
being kept in /cgi-bin/ directory and it has following content. Before running your CGI program make
sure you have chage mode of file using chmod 755 hello.cgi UNIX command.
#!/usr/bin/perl
print "Content-type:text/htmlrnrn";
print '<html>';
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 27
print '<head>';
print '<title>Hello Word - First CGI Program</title>';
print '</head>';
print '<body>';
print '<h2>Hello Word! This is my first CGI program</h2>';
print '</body>';
print '</html>';
1;
If you click hello.cgi then this produces following output:
Hello Word! This is my first CGI program
This hello.cgi script is a simple PERL script which is writing its output on STDOUT file ie. screen. There
is one important and extra feature available which is first line to be printed Content-
type:text/htmlrnrn. This line is sent back to the browser and specifiy the content type to be displayed
on the browser screen. Now you must have undertood basic concept of CGI and you can write many
complicated CGI programs using PERL. This script can interact with any other exertnal system also to
exchange information such as RDBMS.
HTTP Header
The line Content-type:text/htmlrnrn is part of HTTP header which is sent to the browser to
understand the content. All the HTTP header will be in the following form
HTTP Field Name: Field Content
For Example
Content-type:text/htmlrnrn
There are few other important HTTP headers which you will use frequently in your CGI Programming.
Header Description
Content-type: String A MIME string defining the format of the file being returned. Example is
Content-type:text/html
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 28
Expires: Date String The date the information becomes invalid. This should be used by the
browser to decide when a page needs to be refreshed. A valid date string
should be in the format 01 Jan 1998 12:00:00 GMT.
Location: URL String The URL that should be returned instead of the URL requested. You can use
this filed to redirect a request to any file.
Last-modified: String The date of last modification of the resource.
Content-length: String The length, in bytes, of the data being returned. The browser uses this value
to report the estimated download time for a file.
Set-Cookie: String Set the cookie passed through the string
CGI Environment Variables
All the CGI program will have access to the following environment variables. These variables play an
important role while writing any CGI program.
Variable Name Description
CONTENT_TYPE The data type of the content. Used when the client is sending attached
content to the server. For example file upload etc.
CONTENT_LENGTH The length of the query information. It's available only for POST requests
HTTP_COOKIE Return the set cookies in the form of key & value pair.
HTTP_USER_AGENT The User-Agent request-header field contains information about the user
agent originating the request. Its name of the web browser.
PATH_INFO The path for the CGI script.
QUERY_STRING The URL-encoded information that is sent with GET method request.
REMOTE_ADDR The IP address of the remote host making the request. This can be useful for
logging or for authentication purpose.
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 29
REMOTE_HOST The fully qualified name of the host making the request. If this information is
not available then REMOTE_ADDR can be used to get IR address.
REQUEST_METHOD The method used to make the request. The most common methods are GET
and POST.
SCRIPT_FILENAME The full path to the CGI script.
SCRIPT_NAME The name of the CGI script.
SERVER_NAME The server's hostname or IP Address
SERVER_SOFTWARE The name and version of the software the server is running.
Here is small CGI program to list out all the CGI variables. Click this link to see the result Get
Environment
#!/usr/bin/perl
print "Content-type: text/htmlnn";
print "<font size=+1>Environment</font>n";
foreach (sort keys %ENV)
{
print "<b>$_</b>: $ENV{$_}<br>n";
}
Perl is a general-purpose programming language originally developed for text manipulation and now
used for a wide range of tasks including system administration, web development, network programming,
GUI development, and more.
What is PERL?
 Perl is a stable, cross platform programming language.
 Perl stands for Practical Extraction and Report Language.
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 30
 It is used for mission critical projects in the public and private sectors.
 Perl is an Open Source software, licensed under its Artistic License, or the GNU General Public
License (GPL).
 Perl was created by Larry Wall.
 Perl 1.0 was released to usenet's alt.comp.sources in 1987
 At the time of writing thi tutorial, latest version of perl is 5.16.2
 Perl is listed in the Oxford English Dictionary.
PC Magazine named Perl a finalist for its 1998 Technical Excellence Award in the Development Tool
category.
PERL Features
 Perl takes the best features from other languages, such as C, awk, sed, sh, and BASIC, among
others.
 Perls database integration interface DBI supports third-party databases including Oracle, Sybase,
Postgres, MySQL and others.
 Perl works with HTML, XML, and other mark-up languages.
 Perl supports Unicode.
 Perl is Y2K compliant.
 Perl supports both procedural and object-oriented programming.
 Perl interfaces with external C/C++ libraries through XS or SWIG.
 Perl is extensible. There are over 500 third party modules available from the Comprehensive Perl
Archive Network (CPAN).
 The Perl interpreter can be embedded into other systems.
PERL and the Web
 Perl is the most popular web programming language due to its text manipulation capabilities and
rapid development cycle.
 Perl is widely known as " the duct-tape of the Internet".
 Perl's CGI.pm module, part of Perl's standard distribution, makes handling HTML forms simple.
 Perl can handle encrypted Web data, including e-commerce transactions.
 Perl can be embedded into web servers to speed up processing by as much as 2000%.
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 31
 Perl's mod_perl allows the Apache web server to embed a Perl interpreter.
 Perl's DBI package makes web-database integration easy.
Perl is Interpreted
Perl is an interpreter, which means that your code can be run as is, without a compilation stage that
creates a non portable executable program.
Traditional compilers convert programs into machine language. When you run a Perl program, it's first
compiled into a byte code, which is then converted ( as the program runs) into machine instructions. So it
is not quite the same as shells, or TCL, which are strictly interpreted without an intermediate
representation.
JavaScript
Java Script is a dynamic computer programming language. It is most commonly used as part of web
browsers, whose implementations allow client-side scripts to interact with the user, control the browser,
communicate asynchronously, and alter the document content that is displayed. It has also become
common in server-side programming, game development and the creation of desktop applications.
JavaScript is a prototype-based scripting language with dynamic typing and has first-class functions.
Its syntax was influenced by C. JavaScript copies many names and naming conventions from Java, but
the two languages are otherwise unrelated and have very different semantics. The key design principles
within JavaScript are taken from the Self and Scheme programming languages. It is amulti-
paradigm language, supporting object-oriented, imperative, and functional programming styles.
The application of JavaScript to use outside of web pages—for example, in PDF documents, site-specific
browsers, and desktop widgets—is also significant. Newer and faster JavaScript VMs and platforms built
upon them (notably Node.js) have also increased the popularity of JavaScript for server-side web
applications. On the client side, JavaScript was traditionally implemented as an interpreted language
but just-in-time compilation is now performed by recent browsers.
JavaScript was formalized in the ECMA Script language standard and is primarily used as part of a web
browser (client-side JavaScript). This enables programmatic access to computational objects within a host
environment.
Javascript is a scripting language that will allow you to add real programming to your webpages. You can
create small application type processes with javascript, like a calculator or a primitive game of some sort.
However, there are more serious uses for javascript:
 Browser Detection - Detecting the browser used by a visitor at your page. Depending on the
browser, another page specifically designed for that browser can then be loaded.
 Cookies - Storing information on the visitor's computer, then retrieving this information
automatically next time the user visits your page. This technique is called "cookies".
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 32
 Control Browsers - Opening pages in customized windows, where you specify if the browser's
buttons, menu line, status line or whatever should be present.
 Validate Forms - Validating inputs to fields before submitting a form.
An example would be validating the entered email address to see if it has an @ in it, since if not,
it's not a valid address.
PHP
PHP is a server-side scripting language designed for web development but also used as a general-purpose
programming language. PHP is now installed on more than 244 million websites and 2.1 million web
servers. Originally created by Rasmus Lerdorf in 1995, the reference implementation of PHP is now
produced by The PHP Group. While PHP originally stood for Personal Home Page, it now stands
for PHP: Hypertext Preprocessor, a recursive backronym.
PHP code is interpreted by a web server with a PHP processor module, which generates the resulting web
page: PHP commands can be embedded directly into an HTML source document rather than calling an
external file to process data. It has also evolved to include a command-line interface capability and can be
used in standalone graphical applications.
PHP is free software released under the PHP License. PHP can be deployed on most web servers and also
as a standalone shell on almost every operating system and platform, free of charge.
<!DOCTYPE html>
<meta charset="utf-8">
<title>PHP Test</title>
<?php
echo 'Hello World';
?>
The PHP interpreter only executes PHP code within its delimiters. Anything outside its delimiters is not
processed by PHP (although non-PHP text is still subject to control structures described in PHP code).
The most common delimiters are <?php to open and ?> to close PHP sections. <script
language="php"> and </script> delimiters are also available, as are the shortened forms <? or <?= (which
is used to echo back a string or variable) and ?> as well as ASP-style short forms <% or <%= and %>.
While short delimiters are used, they make script files less portable as support for them can be disabled in
the PHP configuration, and they are therefore discouraged. The purpose of all these delimiters is to
separate PHP code from non-PHP code, including HTML.
The first form of delimiters, <?php and ?>, in XHTML and other XML documents, creates correctly
formed XML "processing instructions". This means that the resulting mixture of PHP code and other
markup in the server-side file is itself well-formed XML.
Variables are prefixed with a dollar symbol, and a type does not need to be specified in advance. Unlike
function and class names, variable names are case sensitive. Both double-quoted ("") and here doc strings
provide the ability to interpolate a variable's value into the string. PHP treats newlines as whitespace in
the manner of a free-form language (except when inside string quotes), and statements are terminated by
a semicolon. PHP has three types of comment syntax: /* */ marks block and inline comments; // as well
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 33
as # are used for one-line comments. The echo statement is one of several facilities PHP provides to
output text, e.g., to a web browser.
In terms of keywords and language syntax, PHP is similar to most high level languages that follow the C
style syntax. if conditions, for and while loops, and function returns are similar in syntax to languages
such as C, C++, C#, Java and Perl
Active Server Pages
Active Server Pages (ASP), also known as Classic ASP or ASP Classic, was Microsoft's first server-
side script engine for dynamically generated web pages. Initially released as an add-on to Internet
Information Services (IIS) via the Windows NT 4.0 Option Pack (ca. 1996), it was subsequently included
as a free component of Windows Server (since the initial release of Windows 2000 Server). ASP.NET,
first released in January 2002, has superseded ASP.
ASP 2.0 provided six built-in objects: Application, ASPError, Request, Response, Server, and
Session. Session, for example, represents a session that maintains the state of variables from page to
page. The Active Scripting engine's support of the Component Object Model (COM) enables
ASP websites to access functionality in compiled libraries such as DLLs.
ASP 3.0 does not differ greatly from ASP 2.0 but it does offer some additional enhancements such as:
Server. Transfer method, Server. Execute method, and an enhanced ASP Error object. ASP 3.0 also
enabled buffering by default and optimized the engine for better performance.
The use of ASP pages with Internet Information Services (IIS) is currently supported on all supported
versions of IIS. The use of ASP pages will be supported on Windows 8 for a minimum of 10 years from
the Windows 8 release date.
VBScript
Using VBScript in ASP pages is very simple. The interpreter replaces all the code in between the <%
and %> tags. In the example below, Response.Write Now() dynamically replaced by the current time of
the server.
<html>
<head>
<title>The current time</title>
</head>
<body>
The server's current time:<br />
<%
Response. Write Now()
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 34
%>
</body>
</html>
The Request object
Allows data to be read that was sent by the client browser: Form, Querystring, and HTTP Cookie. It also
provides information on the server, the client browser, and retrieve HTTP Cookie stored on the visitor's
machine. Can retrieve data from a form using both methods HTTP:
Request.Form reads data sent by POST.
Request.QueryString reads data sent by GET.
<%
Response.Write("Welcome " & Request.QueryString("name") & "!") 'this script is vulnerable to XSS,
the input has not been encoded (see below)
%>
The Response object
Can send information to the client, such as the writing of the text on a page or HTTP Cookie.
<%
If (Len(Request.QueryString("name")) > 0) Then
Response.Cookies("name") = Request.QueryString("name")
End If
Response.Write("Welcome " & Response.Cookies("name") & "!") 'this script is vulnerable to XSS, the
input has not been encoded (see below)
%>
<%
If (Len(Request.QueryString("name")) > 0) Then
Response.Cookies("name") = Request.QueryString("name")
End If
Response.Write ("Welcome " & Server.HTMLEncode(Response.Cookies("name")) & "!") 'this script is
NOT vulnerable to XSS, the input has been encoded using HTML Encoding.
%>
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 35
The Server object
Allows connections to databases (ADO), filesystem, and use of components installed on the server.
<%
Dim oAdoCon, oAdoRec, oAdoStm, oCdoCon, oCdoMsg, oSciDic, oSciFsm, oMswAdr
Set oAdoCon = Server.CreateObject("ADODB.Connection")
Set oAdoRec = Server.CreateObject("ADODB.Recordset")
Set oAdoStm = Server.CreateObject("ADODB.Stream")
Set oCdoCon = Server.CreateObject("CDO.Configuration")
Set oCdoMsg = Server.CreateObject("CDO.Message")
Set oSciDic = Server.CreateObject("Scripting.Dictionary")
Set oSciFsm = Server.CreateObject("Scripting.FileSystemObject")
Set oMswAdr = Server.CreateObject("MSWC.AdRotator")
%>
The Application object
Stores global variables.
<%
Application("Ali") = "My ASP Application"
Response.Write("Welcome to " & Application("Ali") & "!")
%>
The Session object
Stores variables accessible only to a single visitor.
<%
If (Len(Request.QueryString("name")) > 0) Then
Session("name") = Request.QueryString("name")
End If
Response. Write("Welcome " & Server.HTMLEncode(Session("name")) & "!") 'this script is NOT
vulnerable to XSS, the input has been encoded using HTML Encoding
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 36
%>
The Error object
Allows for the management of errors.
<%
On Error Resume Next
Dim o Error
Set o Error = Server.Plasterwork()
Response.Write("Asp Code: " & o Error.Asp Code & "<BR />")
Response.Write("Asp Description: " & o Error.Asp Description & "<BR />")
Response.Write("Category: " & o Error.Category & "<BR />")
Response.Write("Column: " & o Error.Column & "<BR />")
Response.Write("Description: " & o Error.Description & "<BR />")
Response.Write("File: " & o Error.File & "<BR />")
Response.Write("Line: " & o Error.Line & "<BR />")
Response.Write("Number: " & o Error.Number & "<BR />")
Response.Write("Source: " & o Error.Source & "<BR />")
If (Err.Number <> 0) Then
Err.Clear
End If
%>
ASP on non-Microsoft Operating Systems
Microsoft's ASP technology runs only on Windows platforms. A number of products emulate some of the
functionality of Classic ASP on non-Microsoft web servers. Apache::ASP for example ports Classic ASP
to the Apache Web Server, but does not interpret Visual Basic or other scripting languages supported by
ASP.
Sun Java System ASP (formerly ChiliSoft ASP) was a popular and reportedly complete emulator,[5]
but it
has been discontinued.
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 37
COOKIES
Cookies are data, stored in small text files, on your computer. When a web server has sent a web page to a
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":
 When a user visits a web page, his name can be stored in a cookie.
 Next time the user visits the page, the cookie "remembers" his name.
Cookies are saved in name-value pairs like:
username=John Doe
When a browser request a web page from a server, cookies belonging to the page is added to the request.
This way the server gets the necessary data to "remember" information about users.
Create a Cookie with JavaScript
JavaScript can create cookies, read cookies, and delete cookies with the property document.cookie.
With JavaScript, a cookie can be created like this:
document.cookie="username=John Doe";
You can also add an expiry date (in UTC or GMT time). By default, the cookie is deleted when the
browser is closed:
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
With a path parameter, you can tell the browser what path the cookie belongs to. By default, the cookie
belongs to the current page.
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
Read a Cookie with JavaScript
With JavaScript, cookies can be read like this:
var x = document.cookie;
Change a Cookie with JavaScript
With JavaScript, you can change a cookie the same way as you create it:
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
The old cookie is overwritten.
Delete a Cookie with JavaScript
Deleting a cookie is very simple. Just set the expires parameter to a passed date:
Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal
Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 38
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
Note that you don't have to specify a cookie value when you delete a cookie.
The Cookie String
The document.cookie property look like a normal text string. But is it not. Even if you write a whole
cookie string to document.cookie, when you read it out again, you can only see the name-value pair of it.
If you set a new cookie, older cookies are not overwritten. The new cookie is added to document.cookie,
so if you read document.cookie again you will get something like:
cookie1=value; cookie2=value;
Display All Cookies Create Cookie 1 Create Cookie 2 Delete Cookie 1 Delete Cookie 2
If you want to find the value of one specified cookie, you must write a JavaScript function that searches
for the cookie value in the cookie string.
JavaScript Cookie Example
In the example to follow, we will create a cookie that stores the name of a visitor. The first time a visitor
arrives to the web page, he will be asked to fill in his name. The name is then stored in a cookie. The next
time the visitor arrives at the same page, he will get a welcome message. For the example we will create 3
JavaScript functions:
1. A function to set a cookie value
2. A function to get a cookie value
3. A function to check a cookie value
A Function to Set a Cookie
First, we create a function that stores the name of the visitor in a cookie variable:
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Web design - How the Web works?
Web design - How the Web works?Web design - How the Web works?
Web design - How the Web works?
 
Semantic web
Semantic webSemantic web
Semantic web
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
 
Semantic Web
Semantic WebSemantic Web
Semantic Web
 
wamp.ppt
wamp.pptwamp.ppt
wamp.ppt
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
 
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxwebdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptx
 
Html 5 Features And Benefits
Html 5 Features And Benefits  Html 5 Features And Benefits
Html 5 Features And Benefits
 
CGI Presentation
CGI PresentationCGI Presentation
CGI Presentation
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
 
Intro to HTML, CSS & JS - Internship Presentation Week-3
Intro to HTML, CSS & JS - Internship Presentation Week-3Intro to HTML, CSS & JS - Internship Presentation Week-3
Intro to HTML, CSS & JS - Internship Presentation Week-3
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN Stack
 
ASP.NET Basics
ASP.NET Basics ASP.NET Basics
ASP.NET Basics
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development Ppt
 
Scripting Languages
Scripting LanguagesScripting Languages
Scripting Languages
 
Web engineering notes unit 2
Web engineering notes unit 2Web engineering notes unit 2
Web engineering notes unit 2
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
 
Front end development
Front end developmentFront end development
Front end development
 
Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web Development
 
Java servlet life cycle - methods ppt
Java servlet life cycle - methods pptJava servlet life cycle - methods ppt
Java servlet life cycle - methods ppt
 

Andere mochten auch

Andere mochten auch (20)

Web Engineering Notes II as per RGPV Syllabus
Web Engineering Notes II as per RGPV SyllabusWeb Engineering Notes II as per RGPV Syllabus
Web Engineering Notes II as per RGPV Syllabus
 
Web engineering UNIT V as per RGPV syllabus
Web engineering UNIT V as per RGPV syllabusWeb engineering UNIT V as per RGPV syllabus
Web engineering UNIT V as per RGPV syllabus
 
Web engineering UNIT IV as per RGPV syllabus
Web engineering UNIT IV as per RGPV syllabusWeb engineering UNIT IV as per RGPV syllabus
Web engineering UNIT IV as per RGPV syllabus
 
Distributed system unit II according to syllabus of RGPV, Bhopal
Distributed system unit II according to syllabus of  RGPV, BhopalDistributed system unit II according to syllabus of  RGPV, Bhopal
Distributed system unit II according to syllabus of RGPV, Bhopal
 
Data Structure Part II
Data Structure Part IIData Structure Part II
Data Structure Part II
 
Data Structure Part III
Data Structure Part IIIData Structure Part III
Data Structure Part III
 
Database Management System
Database Management SystemDatabase Management System
Database Management System
 
Computer Network MAC Layer Notes as per RGPV syllabus
Computer Network MAC Layer Notes as per RGPV syllabusComputer Network MAC Layer Notes as per RGPV syllabus
Computer Network MAC Layer Notes as per RGPV syllabus
 
Number System (Computer)
Number System (Computer)Number System (Computer)
Number System (Computer)
 
Basic Computer Engineering Unit II as per RGPV Syllabus
Basic Computer Engineering Unit II as per RGPV SyllabusBasic Computer Engineering Unit II as per RGPV Syllabus
Basic Computer Engineering Unit II as per RGPV Syllabus
 
Computer Architecture & Organization
Computer Architecture & OrganizationComputer Architecture & Organization
Computer Architecture & Organization
 
Computer Network notes (handwritten) UNIT 1
Computer Network notes (handwritten) UNIT 1Computer Network notes (handwritten) UNIT 1
Computer Network notes (handwritten) UNIT 1
 
Distributed system notes unit I
Distributed system notes unit IDistributed system notes unit I
Distributed system notes unit I
 
Web Engineering UNIT II Notes as per RGPV Syllabus
Web Engineering UNIT II Notes as per RGPV SyllabusWeb Engineering UNIT II Notes as per RGPV Syllabus
Web Engineering UNIT II Notes as per RGPV Syllabus
 
Cloud computing notes unit II
Cloud computing notes unit II Cloud computing notes unit II
Cloud computing notes unit II
 
Data Structure Notes Part-1
Data Structure Notes Part-1 Data Structure Notes Part-1
Data Structure Notes Part-1
 
Cloud computing notes unit I as per RGPV syllabus
Cloud computing notes unit I as per RGPV syllabusCloud computing notes unit I as per RGPV syllabus
Cloud computing notes unit I as per RGPV syllabus
 
Computer Network Notes (Handwritten) UNIT 2
Computer Network Notes (Handwritten) UNIT 2Computer Network Notes (Handwritten) UNIT 2
Computer Network Notes (Handwritten) UNIT 2
 
Notes 2D-Transformation Unit 2 Computer graphics
Notes 2D-Transformation Unit 2 Computer graphicsNotes 2D-Transformation Unit 2 Computer graphics
Notes 2D-Transformation Unit 2 Computer graphics
 
Unit 4 Multimedia CSE Vth sem
Unit 4 Multimedia CSE Vth semUnit 4 Multimedia CSE Vth sem
Unit 4 Multimedia CSE Vth sem
 

Ähnlich wie Web Engineering UNIT III as per RGPV Syllabus

Ähnlich wie Web Engineering UNIT III as per RGPV Syllabus (20)

Web engineering notes unit 3
Web engineering notes unit 3Web engineering notes unit 3
Web engineering notes unit 3
 
Internet programming notes
Internet programming notesInternet programming notes
Internet programming notes
 
WT Module-1.pdf
WT Module-1.pdfWT Module-1.pdf
WT Module-1.pdf
 
What is html xml and xhtml
What is html xml and xhtmlWhat is html xml and xhtml
What is html xml and xhtml
 
Grade 7_HTML.pptx
Grade 7_HTML.pptxGrade 7_HTML.pptx
Grade 7_HTML.pptx
 
Iwt module 1
Iwt  module 1Iwt  module 1
Iwt module 1
 
mst_unit1.pptx
mst_unit1.pptxmst_unit1.pptx
mst_unit1.pptx
 
HTML & JAVA Script
HTML & JAVA ScriptHTML & JAVA Script
HTML & JAVA Script
 
Html
HtmlHtml
Html
 
Dynamic html (#1)
Dynamic  html (#1)Dynamic  html (#1)
Dynamic html (#1)
 
Html interview-questions-and-answers
Html interview-questions-and-answersHtml interview-questions-and-answers
Html interview-questions-and-answers
 
WHAT IS HTML.pdf
WHAT IS HTML.pdfWHAT IS HTML.pdf
WHAT IS HTML.pdf
 
WHAT IS HTML.pdf
WHAT IS HTML.pdfWHAT IS HTML.pdf
WHAT IS HTML.pdf
 
WHAT IS HTML.pdf
WHAT IS HTML.pdfWHAT IS HTML.pdf
WHAT IS HTML.pdf
 
Over view of html
Over view of htmlOver view of html
Over view of html
 
WEB Mod1@AzDOCUMENTS.in (1).pdf
WEB Mod1@AzDOCUMENTS.in (1).pdfWEB Mod1@AzDOCUMENTS.in (1).pdf
WEB Mod1@AzDOCUMENTS.in (1).pdf
 
Html
HtmlHtml
Html
 
Vskills angular js sample material
Vskills angular js sample materialVskills angular js sample material
Vskills angular js sample material
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
HTML practical file
HTML practical fileHTML practical file
HTML practical file
 

Mehr von NANDINI SHARMA

Mehr von NANDINI SHARMA (15)

Function and Recursively defined function
Function and Recursively defined functionFunction and Recursively defined function
Function and Recursively defined function
 
Relation in Discrete Mathematics
Relation in Discrete Mathematics Relation in Discrete Mathematics
Relation in Discrete Mathematics
 
Mathematical Induction in Discrete Structure
Mathematical Induction in Discrete StructureMathematical Induction in Discrete Structure
Mathematical Induction in Discrete Structure
 
SETS in Discrete Structure
SETS in Discrete StructureSETS in Discrete Structure
SETS in Discrete Structure
 
Predicate logic
Predicate logicPredicate logic
Predicate logic
 
Rules of Inference in Discrete Structure
Rules of Inference in Discrete StructureRules of Inference in Discrete Structure
Rules of Inference in Discrete Structure
 
Proposition Logic in Discrete Structure
Proposition Logic in Discrete StructureProposition Logic in Discrete Structure
Proposition Logic in Discrete Structure
 
Algebraic Structure Part 2 DSTL
Algebraic Structure Part 2 DSTLAlgebraic Structure Part 2 DSTL
Algebraic Structure Part 2 DSTL
 
FIELD in Discrete Structure
FIELD in Discrete StructureFIELD in Discrete Structure
FIELD in Discrete Structure
 
Algebraic Structure
Algebraic StructureAlgebraic Structure
Algebraic Structure
 
LATTICE in Discrete Structure
LATTICE in Discrete StructureLATTICE in Discrete Structure
LATTICE in Discrete Structure
 
DSTL: TREES AND GRAPH
DSTL: TREES AND GRAPHDSTL: TREES AND GRAPH
DSTL: TREES AND GRAPH
 
5 variable kmap questions
5 variable kmap questions5 variable kmap questions
5 variable kmap questions
 
Computer Graphics
Computer GraphicsComputer Graphics
Computer Graphics
 
Multimedia
Multimedia Multimedia
Multimedia
 

Kürzlich hochgeladen

FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
 
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
dharasingh5698
 
notes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.pptnotes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.ppt
MsecMca
 
Call for Papers - African Journal of Biological Sciences, E-ISSN: 2663-2187, ...
Call for Papers - African Journal of Biological Sciences, E-ISSN: 2663-2187, ...Call for Papers - African Journal of Biological Sciences, E-ISSN: 2663-2187, ...
Call for Papers - African Journal of Biological Sciences, E-ISSN: 2663-2187, ...
Christo Ananth
 
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar  ≼🔝 Delhi door step de...Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar  ≼🔝 Delhi door step de...
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
Call Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort ServiceCall Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
Call Girls In Bangalore ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Bangalore ☎ 7737669865 🥵 Book Your One night StandCall Girls In Bangalore ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Bangalore ☎ 7737669865 🥵 Book Your One night Stand
amitlee9823
 

Kürzlich hochgeladen (20)

PVC VS. FIBERGLASS (FRP) GRAVITY SEWER - UNI BELL
PVC VS. FIBERGLASS (FRP) GRAVITY SEWER - UNI BELLPVC VS. FIBERGLASS (FRP) GRAVITY SEWER - UNI BELL
PVC VS. FIBERGLASS (FRP) GRAVITY SEWER - UNI BELL
 
chapter 5.pptx: drainage and irrigation engineering
chapter 5.pptx: drainage and irrigation engineeringchapter 5.pptx: drainage and irrigation engineering
chapter 5.pptx: drainage and irrigation engineering
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
 
Call Girls Walvekar Nagar Call Me 7737669865 Budget Friendly No Advance Booking
Call Girls Walvekar Nagar Call Me 7737669865 Budget Friendly No Advance BookingCall Girls Walvekar Nagar Call Me 7737669865 Budget Friendly No Advance Booking
Call Girls Walvekar Nagar Call Me 7737669865 Budget Friendly No Advance Booking
 
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
 
notes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.pptnotes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.ppt
 
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
Top Rated  Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...Top Rated  Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
 
NFPA 5000 2024 standard .
NFPA 5000 2024 standard                                  .NFPA 5000 2024 standard                                  .
NFPA 5000 2024 standard .
 
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdfONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
 
UNIT - IV - Air Compressors and its Performance
UNIT - IV - Air Compressors and its PerformanceUNIT - IV - Air Compressors and its Performance
UNIT - IV - Air Compressors and its Performance
 
Call for Papers - African Journal of Biological Sciences, E-ISSN: 2663-2187, ...
Call for Papers - African Journal of Biological Sciences, E-ISSN: 2663-2187, ...Call for Papers - African Journal of Biological Sciences, E-ISSN: 2663-2187, ...
Call for Papers - African Journal of Biological Sciences, E-ISSN: 2663-2187, ...
 
Bhosari ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready For ...
Bhosari ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready For ...Bhosari ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready For ...
Bhosari ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready For ...
 
Intze Overhead Water Tank Design by Working Stress - IS Method.pdf
Intze Overhead Water Tank  Design by Working Stress - IS Method.pdfIntze Overhead Water Tank  Design by Working Stress - IS Method.pdf
Intze Overhead Water Tank Design by Working Stress - IS Method.pdf
 
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar  ≼🔝 Delhi door step de...Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar  ≼🔝 Delhi door step de...
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
 
Call Girls Pimpri Chinchwad Call Me 7737669865 Budget Friendly No Advance Boo...
Call Girls Pimpri Chinchwad Call Me 7737669865 Budget Friendly No Advance Boo...Call Girls Pimpri Chinchwad Call Me 7737669865 Budget Friendly No Advance Boo...
Call Girls Pimpri Chinchwad Call Me 7737669865 Budget Friendly No Advance Boo...
 
Call Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort ServiceCall Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
 
Water Industry Process Automation & Control Monthly - April 2024
Water Industry Process Automation & Control Monthly - April 2024Water Industry Process Automation & Control Monthly - April 2024
Water Industry Process Automation & Control Monthly - April 2024
 
Call Girls In Bangalore ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Bangalore ☎ 7737669865 🥵 Book Your One night StandCall Girls In Bangalore ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Bangalore ☎ 7737669865 🥵 Book Your One night Stand
 
Call for Papers - International Journal of Intelligent Systems and Applicatio...
Call for Papers - International Journal of Intelligent Systems and Applicatio...Call for Papers - International Journal of Intelligent Systems and Applicatio...
Call for Papers - International Journal of Intelligent Systems and Applicatio...
 
Thermal Engineering Unit - I & II . ppt
Thermal Engineering  Unit - I & II . pptThermal Engineering  Unit - I & II . ppt
Thermal Engineering Unit - I & II . ppt
 

Web Engineering UNIT III as per RGPV Syllabus

  • 1. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 1 Introduction HTML (Hypertext Markup Language) is the set of markup symbols or codes inserted in a file intended for display on a World Wide Web browser page. The markup tells the Web browser how to display a Web page's words and images for the user. Each individual markup code is referred to as an element (but many people also refer to it as a tag). Some elements come in pairs that indicate when some display effect is to begin and when it is to end. HTML is a formal Recommendation by the World Wide Web Consortium (W3C) and is generally adhered to by the major browsers, Microsoft's Internet Explorer and Netscape's Navigator, which also provide some additional non-standard codes. The current version of HTML is HTML 4.0. However, both Internet Explorer and Netscape implement some features differently and provide non-standard extensions. Web developers using the more advanced features of HTML 4 may have to design pages for both browsers and send out the appropriate version to a user. Significant features in HTML 4 are sometimes described in general as dynamic HTML. What is sometimes referred to as HTML 5 is an extensible form of HTML called Extensible Hypertext Markup Language (XHTML)  Tools needed - HTML is written in plain text. That means you don’t need any fancy software programs like a word processor to create your HTML files. All you need is a simple text-editor that’s already on your system. For MACs, that would be SimpleText and for Windows, Notepad. Some rules As with most things in life, there are rules. In HTML, the rules are fairly simple. For starters, HTML tags are always surrounded by what are called angle brackets < and >. You’ll find these brackets on your keyboard just above the comma and period.  Elements - The words/letters between these two angle brackets are called elements. These are the coded commands within HTML. Elements tell the browser how to display the web page. For example: <hr> tells the browser to display a horizontal rule; <br> tells the browser to skip a line.  Container and empty tags - There are two kinds of tags: container and empty. The container tag always wraps around text or graphics and comes in a set with an opening and a closing: <html> opening tag </html> closing tag Notice the forward slash (/) on the closing tag. This tells the browser that the tag has ended. On the other hand, the empty tag stands alone. The tag <br> is one that adds a line break. Empty tags do not have to be wrapped around copy and do not require a closing.  Case sensitive HTML is also not case sensitive. That means, you can use either lowercase or uppercase. <HTML> is the same as <html>. For consistency, use either one or the other. It's best not to mix and match. For our purposes, I have written our code in lowercase. HTML structure All HTML documents are divided into two main parts: the head and the body. It goes something like this:
  • 2. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 2 You must have the <html>, <head> and <body> container tags in every HTML file. The <html> tag tells the browser that this is an HTML document. You must begin and end your files with this tag. The <head> tag contains general information like the title of your document. The <body> tag holds all your content: words, pictures, artwork and other stuff. In general, dynamic means energetic, capable of action and/or change, or forceful, while static means stationary or fixed. In computer terminology, dynamic usually means capable of action and/or change, while static means fixed. Both terms can be applied to a number of different types of things, such as programming languages (or components of programming languages), Web pages, and application programs. When a Web page is requested (by a computer user clicking a hyperlink or entering a URL), the server where the page is stored returns the HTML document to the user's computer and the browser displays it. On a static Web page, this is all that happens. The user may interact with the document through clicking available links, or a small program (an applet) may be activated, but the document has no capacity to return information that is not pre-formatted. On a dynamic Web page, the user can make requests (often through a form) for data contained in a database on the server that will be assembled on the fly according to what is requested. For example the user might want to find out information about a theatrical performance, such as theater locations and ticket availability for particular dates. When the user selects these options, the request is relayed to the server using an intermediary, such as an Active Server Page (ASP) script embedded in the page's HTML. The intermediary tells the server what information to return. Such a Web page is said to be dynamic. A set of HTML capabilities are provided that help a designer create dynamic Web pages. This set of capabilities is generally known as dynamic HTML. There are dynamic and static programming languages. In a dynamic language, such as Perlor LISP, a developer can create variables without specifying their type. This creates more flexible programs and can simplify prototyping and some object-oriented coding. In a static programming language, such as C or Pascal, a developer must declare the type of each variable before the code is compiled, making the coding less flexible, but also less error-prone.
  • 3. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 3 DHTML DHTML is essentially Dynamic HTML. It is a new way of looking at and controlling the standard HTML codes and commands. DHTML is a collection of technologies that are used to create interactive and animated web sites. DHTML gives more control over the HTML elements. It allows one to incorporate a client-side scripting language, such as JavaScript, a presentation definition language, such as CSS, and the Document Object Model in HTML web pages. DHTML also allows the pages to change at any time, without returning to the Web server first. It allows scripting languages to change a web page's look and function after the page has been fully loaded and during the viewing process. It also allows the user to add effects to their pages that are otherwise difficult to achieve. Wikipedia list additional DHTML features, such as DHTML allows the developers to:  Animate text and images in their document, independently moving each element from any starting point to any ending point, following a predetermined path or one chosen by the user.  Embed a ticker that automatically refreshes its content with the latest news, stock quotes, or other data.  Use a form to capture user input, and then process, verify and respond to that data without having to send data back to the server.  Include rollover buttons or drop-down menus. Some differences between HTML and DHTML:  HTML is a mark-up language, while DHTML is a collection of technology.  DHTML creates dynamic web pages, whereas HTML creates static web pages.  DHTML allows including small animations and dynamic menus in Web pages.  DHML used events, methods, properties to insulate dynamism in HTML Pages.  DHML is basically using JavaScript and style sheets in an HTML page.  HTML sites will be slow upon client-side technologies, while DHTML sites will be fast enough upon client-side technologies.  HTML creates a plain page without any styles and Scripts called as HTML. Whereas, DHTML creates a page with HTML, CSS, DOM and Scripts called as DHTML.  HTML cannot have any server side code but DHTML may contain server side code.  In HTML, there is no need for database connectivity, but DHTML may require connecting to a database as it interacts with user.  HTML files are stored with .htm or .html extension, while DHTML files are stored with .dhtm extension.  HTML does not require any processing from browser, while DHTML requires processing from browser which changes its look and feel. The HTML Document Structure Using the correct HTML document structure when creating a web page is important. If the HTML document structure is incorrect the web page can break or the search engine spider may not be able to read the page. Starting with the very first line in your HTML document:
  • 4. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 4 DOCTYPE Declaration The DOCTYPE declaration is the first part of coding that you should enter in your HTML document. This is required if you wish to validate your document with the W3C's validation service. Web browsers need to know what version of HTML/XHTML your page is written in to process the code correctly. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> The HTML Tags All HTML documents contain a <html> and </html> pair of tags. These tags identify the document's contents as HTML to the browser. The <html> tag goes in the line right under your DOCTYPE declaration. </html> is the last line of coding in your document. Opening html tag: <html> The Head Tags - Opening Head Tag The <head> and </head> tags identify the document's head area. The information between these two tags is not visible on your page. Opening head tag: <head> Character Encoding The character encoding meta tag tells the browser which character set the web page uses. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> Title Tag The title tag creates the page title that is seen in the title bar of the web page. <title>Title of the document</title> Meta Tags The meta tags provide information about your web page. <metaname="Description" content="Your description"> <meta name="Keywords" content="first, second, third">
  • 5. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 5 <meta name="Author" content="Author Information"> <meta name="Copyright" content="Copyright Statement"> <meta name="Distribution" content="Global"> <meta name="Expires" content="Tue, 01 Jun 1999 19:58:02 GMT"> <meta name="Robots" content="index,follow"> Link Tag The link tag is used to link other documents to this one. This example shows linking to an external stylesheet. <link rel="stylesheet" type="text/css" href="styles/stylesht.css"> Script Tag The script tag defines what type of script the browser is to execute. This tag can also be included in the body of your page. <script type="text/javascript"> <!-- <!--Your script --> --> </script> Style Tag The style tag is used to set the style of your document elements. It is better to use an external style sheet using the link tag so if you wish to change something you only have to change it in one spot. <style type="text/css"> Your style types </style> Closing Head Tag The closing head tag defines the end of the document's head section. </head> The Body Tags The body tags surround the body (contents) of your web page. <body> The body of the document </body>
  • 6. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 6 Closing HTML Tag The closing HTML tag is the last line in your HTML document. Don't put anything after this tag! Your page will not validate if you do. </html> The above descriptions are excerts from the HTML Basics Simplified ebook. HTML Document Structure Related Articles  DOCTYPE - DTD - Document Type Declaration The DOCTYPE Declaration (DTD or Document Type Declaration), what it does and why each web page needs it.  Character Encoding Character encoding tells the browser and validator what set of characters to use when converting the bits to characters.  Meta Tags What meta tags are and how they are constructed.  Anatomy of a Web Page Description of the basic structure of a web page and the anatomy of a web page. Here you will learn a web page basic structure.  Code Validation Code validation is the process of checking that the coding of a web page is in compliance with the standards and recommendations set by the World Wide Web Consortium (W3C) for the web. Code validation helps to produce clean code.  Lower Case HTML Tags and HTML Tag Attributes When entering your basic HTML tags and HTML tag attributes use lower case in preparation for future web technologies, consistent web page rendering and search engine optimization. Name Start Tag End Tag Empty Depr. DTD Description A anchor ABBR abbreviated form (e.g., WWW, HTTP, etc.) ACRONYM ADDRESS information on author APPLET D L Java applet
  • 7. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 7 AREA F E client-side image map area B bold text style BASE F E document base URI BASEFONT F E D L base font size BDO I18N BiDi over-ride BIG large text style BLOCKQUOTE long quotation BODY O O document body BR F E forced line break BUTTON Push button CAPTION table caption CENTER D L shorthand for DIV align=center CITE Citation CODE computer code fragment COL F E table column COLGROUP O table column group DD O definition description DEL deleted text DFN instance definition DIR D L directory list DIV generic language/style container DL definition list
  • 8. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 8 DT O Definition term EM Emphasis FIELDSET form control group FONT D L local change to font FORM interactive form FRAME F E F Sub-window FRAMESET F window subdivision H1 Heading H2 Heading H3 Heading H4 heading H5 heading H6 heading HEAD O O document head HR F E horizontal rule HTML O O document root element I italic text style IFRAME L inline sub window IMG F E Embedded image INPUT F E form control INS inserted text ISINDEX F E D Single line prompt
  • 9. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 9 KBD text to be entered by the user LABEL form field label text LEGEND Field set legend LI O list item LINK F E a media-independent link MAP client-side image map MENU D L menu list META F E generic meta information NOFRAMES F alternate content container for non frame- based rendering NOSCRIPT alternate content container for non script- based rendering OBJECT generic embedded object OL ordered list OPTGROUP option group OPTION O selectable choice P O Paragraph PARAM F E Named properly value PRE preformatted text Q short inline quotation S D L strike-through text style SAMP sample program output, scripts, etc. SCRIPT script statements
  • 10. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 10 SELECT option selector SMALL small text style SPAN generic language/style container STRIKE D L strike-through text STRONG strong emphasis STYLE style info SUB Subscript SUP Superscript TABLE Table TBODY O O table body TD O Table data cell TEXTAREA multi-line text field TFOOT O table footer TH O table header cell THEAD O table header TITLE document title TR O table row TT teletype or mono spaced text style U D L underlined text style UL unordered list VAR instance of a variable or program argument The tags used to produce links are the <a> and </a>. The <a> tells where the link should start and the </a> indicates where the link ends. Everything between these two will work as a link. The target of
  • 11. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 11 the link is added to the <a> tag using the ref="http://www.whateverpage.com" setting. The example below shows how to make the word here work as a link to yahoo. Click <a href="http://www.yahoo.com">here</a> to go to yahoo. You simply: Specify the target in the <a href=" ">.  Then add the text that should work as a link.  Finally add an </a> tag to indicate where the link ends. It is possible to make one image link to several pages, depending on where the image is clicked. This technique is called image mapping. You simply specify which areas of the image should link to where. In the example below, if you position the mouse in the upper left corner it links to yahoo .... and in the lower right corner.... it links to hotbot. <img src="rainbow.gif" usemap = #example border=0> <map name=example> <area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com"> <area shape=Rect Coords=30,30,59,59 Href="http://www.hotbot.com"> </map> In the above example we only used rectangular image mappings. Possible shapes are:  <area shape=rect coords= x1,y1, x2,y2 Href="http://www.domain.com">  <area shape=circle coords= x1,y1, x2,y2 Href="http://www.domain.com">  <area shape=polygon coords= x1,y1, x2,y2, .., xn,yn Href="http://www.domain.com"> There are excellent tools out there to help you create image maps. No one calculates the coordinates by hand. If you want to use image maps on your site you will need to get a program that will allow you to simply drag the mouse over the areas you want to work as links. Most HTML editors have this as a built-in function. Metadata Metadata is "data about data". The term is ambiguous, as it is used for two fundamentally different concepts (types). Structural metadata is about the design and specification of data structures and is more properly called "data about the containers of data", descriptive metadata, on the other hand, is about individual instances of application data, the data content.
  • 12. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 12 Metadata are traditionally found in the card catalogs of libraries. As information has become increasingly digital, metadata are also used to describe digital data using metadata standards specific to a particular discipline. By describing the contents and context of data files, the quality of the original data/files is greatly increased. For example, a web page may include metadata specifying what language it is written in, what tools were used to create it, and where to go for more on the subject, allowing browsers to automatically improve the experience of users. Image Preliminaries In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. Syntax <img src="url" /> The URL points to the location where the image is stored. HTML Layout - Using Tables: The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like. For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns - but the header and footer column spans both columns using the colspan attribute: <tablewidth ="100%" border="0"> <tr> <td colspan="2" style="background-color:#CC99FF;"> <h1>This is Web Page Main title</h1> </td> </tr> <tr valign="top"> <td style="background-color:#FFCCFF; width:100px;text-align:top;"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td style="background-color:#eeeeee;height:200px; width:300px;text-align:top;"> Technical and Managerial Tutorials </td> </tr> <tr> <td colspan="2" style="background-color:#CC99FF;">
  • 13. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 13 <center> Copyright © 2007 Tutorialspoint.com </center> </td> </tr> </table> This will produce following result: This is Web Page Main title Main Menu HTML PHP PERL... Technical and Managerial Tutorials Copyright © 2007 Tutorialspoint.com To Become more comfortable - Do Online Practice Multiuple Columns Layouts - Using Tables You can design your webpage to put your web content in multiple pages. You can keep your content in middle column and you can use left column to use menu and right column can be used to put advertisement or some other stuff. It will be very similar to our site tutorialspoint.com. Here is an example to create three column layout: <table width="100%" border="0"> <tr valign="top"> <td style="background-color:#FFCCFF;width:20%; text-align:top;"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td style="background-color:#eeeeee;height:200px; width:60%;text-align:top;">
  • 14. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 14 Technical and Managerial Tutorials </td> <td style="background-color:#FFCCFF; width:20%;text-align:top;"> <b>Right Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> </tr> <table> This will produce following result: Main Menu HTML PHP PERL... Technical and Managerial Tutorials Right Menu HTML PHP PERL... Background Authors may specify the background of an element (i.e., its rendering surface) as either a color or an image. In terms of the box model, "background" refers to the background of the content, padding and border areas. Border colors and styles are set with the border properties. Margins are always transparent. Background properties are not inherited, but the parent box's background will shine through by default because of the initial 'transparent' value on 'background-color'. The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again. For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background- color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.
  • 15. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 15 According to these rules, the canvas underlying the following HTML document will have a "marble" background: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <TITLE>Setting the canvas background</TITLE> <STYLE type="text/css"> BODY { background: url("http://example.com/marble.png") } </STYLE> <P>My background is marble. Note that the rule for the BODY element will work even though the BODY tag has been omitted in the HTML source since the HTML parser will infer the missing tag. Backgrounds of elements that form a stacking context (see the 'z-index' property) are painted at the bottom of the element's stacking context, below anything in that stacking context. Background properties: 'background-color', 'background-image', 'background-repeat', 'background attachment', 'background-position', and 'background' 'background-color' Value: <color> | transparent | inherit Initial: transparent Applies to: all elements Inherited: no Percentages: N/A Media: visual Computed value: as specified This property sets the background color of an element, either a <color> value or the keyword 'transparent', to make the underlying colors shine through. h1 { background-color: #F00 } <img> Used by visual user agents to insert an image in the document. The src attribute specifies the image URL. The required alt attribute provides alternative text in case the image cannot be displayed. (Though alt is intended as alternative text, Microsoft Internet Explorer 7 and below render it as a tooltip if no title is given. Safari and Google Chrome, on the other hand, do not display the alt attribute at all.) img was
  • 16. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 16 proposed by Marc Andreessen and implemented in the NSCA Mosaic web browser. IMG existed in HTML Internet Draft 1.2, and was standardized in HTML 2.0; still current. <map>...</map> Specifies a client-side image map. <object>...</object> Includes an object in the page of the type specified by the type attribute. This may be in any MIME-type the user agent understands, such as an embedded HTML page, a file to be handled by a plug-in such as Flash, a Java applet, a sound file, etc. <param> Originally introduced with applet, this element is now used with, and should only occur as a child of object. It uses HTML attributes to set a parameter for the object, e.g. width, height, font, background colour, etc., depending on the type of object. An object can have multiple params. These elements can be combined into a form or in some instances used separately as user-interface controls; in the document, they can be simple HTML or used in conjunction with Scripts. HTML markup specifies the elements that make up a form, and the method by which it will be submitted. However, some form of scripts (server-side, client-side, or both) must be used to process the user’s input once it is submitted. (These elements are either block or inline elements, but are collected here as their use is more restricted than other inline or block elements.) <form action="url">...</form> Creates a form. The form element specifies and operates the overall action of a form area, using the required action attribute. <button>...</button> A generic form button which can contain a range of other elements to create complex buttons. <fieldset>...</fieldset> A container for adding structure to forms. For example, a series of related controls can be grouped within a field-set, which can then have a legend added in order to identify their function. <input> input elements allow a variety of standard form controls to be implemented. Input Types: type="checkbox"
  • 17. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 17 A checkbox. Can be checked or unchecked. type="radio" A radio button. If multiple radio buttons are given the same name, the user will only be able to select one of them from this group. type="button" A general-purpose button. The element <button> is preferred if possible (i.e. if the client supports it) as it provides richer possibilities. type="submit" A submit button. type="image" An image button. The image URL may be specified with the src attribute. type="reset" A reset button for resetting the form to default values. type="text" A one-line text input field. The size attribute specifies the default width of the input in character- widths. max-length sets the maximum number of characters the user can enter (which may be greater than size). type="password" A variation of text. The difference is that text typed in this field is masked — characters are displayed as an asterisk, a dot or another replacement. It should be noted, however, that the password is still submitted to the server as clear text, so an underlying secure transport layer like HTTPS is needed if confidentiality is a concern. type="file" A file select field (for uploading files to a server). type="hidden" hidden inputs are not visible in the rendered page, but allow a designer to maintain a copy of data that needs to be submitted to the server as part of the form. This may, for example, be data that this web user entered or selected on a previous form that needs to be processed in conjunction with the current form. <isindex> (deprecated) isindex could either appear in the document head or in the body, but only once in a document.
  • 18. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 18 Isindex operated as a primitive HTML search form; but was de facto obsoleted by more advanced HTML forms introduced in the early to mid-1990s. Represents a set of hyperlinks composed of a base URI, an ampersand and percent-encoded keywords separated by plus signs. <label for="id">...</label> Creates a label for a form input (e.g. radio button). Clicking on the label fires a click on the matching input. <legend>...</legend> A legend (caption) for a fieldset.. <option value="x"> Creates an item in a select list. <optgroup>...</optgroup> Identifies a group of options in a select list. <select name="xyz">...</select> Creates a selection list, from which the user can select a single option. May be rendered as a dropdown list. <textarea rows="8">...</textarea> A multiple-line text area, the size of which is specified by cols (where a col is a one-character width of text) and rows HTML attributes. The content of this element is restricted to plain text, which appears in the text area as default text when the page is loaded. Tables The format of HTML Tables was proposed in the HTML 3.0 Drafts and the later RFC 1942 HTML Tables. They were inspired on the CALS Table Model. Some elements in these proposals were included in HTML 3.2; the present form of HTML Tables was standardized in HTML 4. (Many of the elements used within tables are neither block nor inlineelements.) <table>...</table> Identifies a table. Several HTML attributes are possible in HTML Transitional, but most of these are invalid in HTML Strict and can be replaced with style sheets. The summary attribute is however informally required for accessibility purposes, though its usage is not simple. <tr>...</tr> Contains a row of cells in a table. <th>...</th>
  • 19. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 19 A table header cell; contents are conventionally displayed bold and centered. An aural user agent may use a louder voice for these items. <td>...</td> A table data cell. <colgroup>...</colgroup> Specifies a column group in a table. <col> or <col/> Specifies a column in a table. <caption>...</caption> Specifies a caption for a table. <thead>...</thead> Specifies the header part of a table. This section may be repeated by the user agent if the table is split across pages (in printing or other paged media). <tbody>...</tbody> Specifies a body of data for the table. <tfoot>...</tfoot> Specifies the footer part of a table. Like <thead>, this section may be repeated by the user agent if the table is split across pages (in printing or other paged media). Framing (World Wide Web) Frames allow a visual HTML Browser window to be split into segments, each of which can show a different document. This can lower bandwidth use, as repeating parts of a layout can be used in one frame, while variable content is displayed in another. This may come at a certain usability cost, especially in non-visual user agents,[citation needed] due to separate and independent documents (or websites) being displayed adjacent to each other and being allowed to interact with the same parent window. Because of this cost, frames (excluding the <iframe> element) are only allowed in HTML 4.01 Frame-set. In HTML 4.01, a document may contain a <head> and a <body> or a <head> and a <frameset>, but not both a <body> and a <frameset>. However, <iframe> can be used in a normal document body. <frameset>...</frameset> Contains the set of frame elements for a document. The layout of frames is given by comma separated lists in the rows and cols HTML attributes.
  • 20. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 20 <frame> or <frame/> Defines a single frame, or region, within the frameset. A separate document is linked to a frame using the src attribute inside the frame element. <noframes>...</noframes> Contains normal HTML content for user agents that don't support frames. <iframe>...</iframe> An inline frame places another HTML document in a frame. Unlike an object element, an inline frame can be the "target" frame for links defined by other elements, and it can be selected by the user agent as the focus for printing, viewing its source, and so on. The content of the element is used as alternative text to be displayed if the browser does not support i- frames. Embedding Video Here is the simplest form of embedding a video file in your webpage: <video src="foo.mp4" width="300" height="200" controls> Your browser does not support the <video> element. </video> The current HTML5 draft specification does not specify which video formats browsers should support in the video tag. But most commonly used video formats are: 1. Ogg: Ogg files with Thedora video codec and Vorbis audio codec. 2. mpeg4: MPEG4 files with H.264 video codec and AAC audio codec. You can use <source> tag to specify media along with media type and many other attributes. A video element allows multiple source elements and browser will use the first recognized format: <!DOCTYPE HTML> <html> <body> <video width="300" height="200" controls autoplay> <source src="/html5/foo.ogg" type="video/ogg" /> <source src="/html5/foo.mp4" type="video/mp4" />
  • 21. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 21 Your browser does not support the <video> element. </video> </body> </html> Video Attribute Specification: The HTML5 video tag can have a number of attributes to control the look and feel and various functionalities of the control: Attribute Description Autoplay This boolean attribute if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data. Autobuffer This boolean attribute if specified, the video will automatically begin buffering even if it's not set to automatically play. Controls If this attribute is present, it will allow the user to control video playback, including volume, seeking, and pause/resume playback. Height This attribut specifies the height of the video's display area, in CSS pixels. Loop This boolean attribute if specified, will allow video automatically seek back to the start after reaching at the end. Preload This attribute specifies that the video will be loaded at page load, and ready to run. Ignored if autoplay is present. poster This is a URL of an image to show until the user plays or seeks. src The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed width This attribut specifies the width of the video's display area, in CSS pixels. Embedding Audio
  • 22. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 22 HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML document as follows. <audio src="foo.wav" controls autoplay> Your browser does not support the <audio> element. </audio> The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav. You can use <source> tag to specify media along with media type and many other attributes. An audio element allows multiple source elements and browser will use the first recognized format: <!DOCTYPE HTML> <html> <body> <audio controls autoplay> <source src="/html5/audio.ogg" type="audio/ogg" /> <source src="/html5/audio.wav" type="audio/wav" /> Your browser does not support the <audio> element. </audio> </body> </html> Audio Attribute Specification The HTML5 audio tag can have a number of attributes to control the look and feel and various functionalities of the control: Attribute Description autoplay This boolean attribute if specified, the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
  • 23. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 23 autobuffer This boolean attribute if specified, the audio will automatically begin buffering even if it's not set to automatically play. controls If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback. loop This boolean attribute if specified, will allow audio automatically seek back to the start after reaching at the end. preload This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present. src The URL of the audio to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed Database Integration The HTTP listener and PL/SQL gateway are used to build web-enabled systems that provide tight integration with a backend Oracle database. PL/SQL-based OAS and WebDB applications are developed using a set of packages called the PL/SQL toolkit. The PL/SQL Toolkit WebDB and OAS both include the PL/SQL toolkit. The toolkit contains a variety of PL/SQL packages written and supplied by Oracle that perform a range of tasks, including generating HTML tags, manipulating cookies (name/value pairs used to save information throughout an entire session), and creating complex HTML structures based on information in a database table. In general, procedures built with the toolkit will work in either product, although you may run into minor database privilege issues that the DBA can help you resolve. HTP and HTF HTP is a set of procedures that print syntactically correct HTML tags, which are returned to the user's web browser. HTF is an equivalent set of functions that return HTML strings whose output is returned to the program that called the function. In either package, procedures and functions correspond to specific HTML tags; their parameters correspond to tag attributes. OWA_COOKIE A set of data structures, procedures, and functions used to create and manipulate cookies. OWA_IMAGE A set of data structures, procedures, and functions used to manipulate image maps.
  • 24. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 24 OWA_OPT_LOCK A set of data structures, procedures, and functions used to perform optimistic record locking. The package can either compute a checksum that's used to test for differences or compare each field of the old and new records OWA_PATTERN A set of data structures, procedures, and functions that perform advanced search and replace operations on text strings using regular expressions. OWA_SEC A set of data structures, procedures, and functions used to develop customized security and authentication procedures, such as GET_USER_ID (to return the user executing the procedure) or GET_CLIENT_IP (to return the IP address of the machine making the request). OWA_TEXT A set of data structures, procedures, and functions used to perform operations on large strings. Also used as the basis of many of the procedures in OWA_PATTERN. OWA_UTIL A set of data structures, procedures, and functions used to create advanced HTML structures, such as calendars or tables. Many of the WebDB components, such as forms or calendars, are based directly on this package. Cascading Style Sheets a new feature being added to HTML that gives both Web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear. These style sheets can then be applied to any Web page. The term cascading derives from the fact that multiple style sheets can be applied to the same Web page. CSS was developed by theW3C. Three Ways to Insert CSS External Style Sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below: hr {color:sienna;}
  • 25. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 25 p {margin-left:20px;} body {background-image:url("images/back40.gif");} Internal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this: <head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head> Inline Styles An inline style loses many of the advantages of style sheets by mixing content with presentation.To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph: <p style="color:sienna;margin-left:20px;">This is a paragraph.</p> What is CGI ?  The Common Gateway Interface, or CGI, is a set of standards that define how information is exchanged between the web server and a custom script.  The CGI specs are currently maintained by the NCSA and NCSA defines CGI is as follows: The Common Gateway Interface, or CGI, is a standard for external gateway programs to interface with information servers such as HTTP servers.  The current version is CGI/1.1 and CGI/1.2 is under progress. Web Browsing To understand the concept of CGI, lets see what happens when we click a hyper link to browse a particular web page or URL.  Your browser contacts the HTTP web server and demand for the URL ie. filename.  Web Server will parse the URL and will look for the filename in if it finds that file then sends back to the browser otherwise sends an error message indicating that you have requested a wrong file.  Web browser takes response from web server and displays either the received file or error
  • 26. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 26 message. However, it is possible to set up the HTTP server so that whenever a file in a certain directory is requested that file is not sent back; instead it is executed as a program, and whatever that program outputs is sent back for your browser to display. This function is called the Common Gateway Interface or CGI and the programs are called CGI scripts. These CGI programs can be a PERL Script, Shell Script, C or C++ program etc. CGI Architecture Diagram Web Server Support & Configuration Before you proceed with CGI Programming, make sure that your Web Server supports CGI and it is configured to handle CGI Programs. All the CGI Programs be executed by the HTTP server are kept in a pre-configured directory. This directory is called CGI Directory and by convention it is named as /cgi-bin. By convention PERL CGI files will have extention as .cgi. First CGI Program Here is a simple link which is linked to a CGI script called hello.cgi. This file is being kept in /cgi-bin/ directory and it has following content. Before running your CGI program make sure you have chage mode of file using chmod 755 hello.cgi UNIX command. #!/usr/bin/perl print "Content-type:text/htmlrnrn"; print '<html>';
  • 27. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 27 print '<head>'; print '<title>Hello Word - First CGI Program</title>'; print '</head>'; print '<body>'; print '<h2>Hello Word! This is my first CGI program</h2>'; print '</body>'; print '</html>'; 1; If you click hello.cgi then this produces following output: Hello Word! This is my first CGI program This hello.cgi script is a simple PERL script which is writing its output on STDOUT file ie. screen. There is one important and extra feature available which is first line to be printed Content- type:text/htmlrnrn. This line is sent back to the browser and specifiy the content type to be displayed on the browser screen. Now you must have undertood basic concept of CGI and you can write many complicated CGI programs using PERL. This script can interact with any other exertnal system also to exchange information such as RDBMS. HTTP Header The line Content-type:text/htmlrnrn is part of HTTP header which is sent to the browser to understand the content. All the HTTP header will be in the following form HTTP Field Name: Field Content For Example Content-type:text/htmlrnrn There are few other important HTTP headers which you will use frequently in your CGI Programming. Header Description Content-type: String A MIME string defining the format of the file being returned. Example is Content-type:text/html
  • 28. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 28 Expires: Date String The date the information becomes invalid. This should be used by the browser to decide when a page needs to be refreshed. A valid date string should be in the format 01 Jan 1998 12:00:00 GMT. Location: URL String The URL that should be returned instead of the URL requested. You can use this filed to redirect a request to any file. Last-modified: String The date of last modification of the resource. Content-length: String The length, in bytes, of the data being returned. The browser uses this value to report the estimated download time for a file. Set-Cookie: String Set the cookie passed through the string CGI Environment Variables All the CGI program will have access to the following environment variables. These variables play an important role while writing any CGI program. Variable Name Description CONTENT_TYPE The data type of the content. Used when the client is sending attached content to the server. For example file upload etc. CONTENT_LENGTH The length of the query information. It's available only for POST requests HTTP_COOKIE Return the set cookies in the form of key & value pair. HTTP_USER_AGENT The User-Agent request-header field contains information about the user agent originating the request. Its name of the web browser. PATH_INFO The path for the CGI script. QUERY_STRING The URL-encoded information that is sent with GET method request. REMOTE_ADDR The IP address of the remote host making the request. This can be useful for logging or for authentication purpose.
  • 29. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 29 REMOTE_HOST The fully qualified name of the host making the request. If this information is not available then REMOTE_ADDR can be used to get IR address. REQUEST_METHOD The method used to make the request. The most common methods are GET and POST. SCRIPT_FILENAME The full path to the CGI script. SCRIPT_NAME The name of the CGI script. SERVER_NAME The server's hostname or IP Address SERVER_SOFTWARE The name and version of the software the server is running. Here is small CGI program to list out all the CGI variables. Click this link to see the result Get Environment #!/usr/bin/perl print "Content-type: text/htmlnn"; print "<font size=+1>Environment</font>n"; foreach (sort keys %ENV) { print "<b>$_</b>: $ENV{$_}<br>n"; } Perl is a general-purpose programming language originally developed for text manipulation and now used for a wide range of tasks including system administration, web development, network programming, GUI development, and more. What is PERL?  Perl is a stable, cross platform programming language.  Perl stands for Practical Extraction and Report Language.
  • 30. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 30  It is used for mission critical projects in the public and private sectors.  Perl is an Open Source software, licensed under its Artistic License, or the GNU General Public License (GPL).  Perl was created by Larry Wall.  Perl 1.0 was released to usenet's alt.comp.sources in 1987  At the time of writing thi tutorial, latest version of perl is 5.16.2  Perl is listed in the Oxford English Dictionary. PC Magazine named Perl a finalist for its 1998 Technical Excellence Award in the Development Tool category. PERL Features  Perl takes the best features from other languages, such as C, awk, sed, sh, and BASIC, among others.  Perls database integration interface DBI supports third-party databases including Oracle, Sybase, Postgres, MySQL and others.  Perl works with HTML, XML, and other mark-up languages.  Perl supports Unicode.  Perl is Y2K compliant.  Perl supports both procedural and object-oriented programming.  Perl interfaces with external C/C++ libraries through XS or SWIG.  Perl is extensible. There are over 500 third party modules available from the Comprehensive Perl Archive Network (CPAN).  The Perl interpreter can be embedded into other systems. PERL and the Web  Perl is the most popular web programming language due to its text manipulation capabilities and rapid development cycle.  Perl is widely known as " the duct-tape of the Internet".  Perl's CGI.pm module, part of Perl's standard distribution, makes handling HTML forms simple.  Perl can handle encrypted Web data, including e-commerce transactions.  Perl can be embedded into web servers to speed up processing by as much as 2000%.
  • 31. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 31  Perl's mod_perl allows the Apache web server to embed a Perl interpreter.  Perl's DBI package makes web-database integration easy. Perl is Interpreted Perl is an interpreter, which means that your code can be run as is, without a compilation stage that creates a non portable executable program. Traditional compilers convert programs into machine language. When you run a Perl program, it's first compiled into a byte code, which is then converted ( as the program runs) into machine instructions. So it is not quite the same as shells, or TCL, which are strictly interpreted without an intermediate representation. JavaScript Java Script is a dynamic computer programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. It has also become common in server-side programming, game development and the creation of desktop applications. JavaScript is a prototype-based scripting language with dynamic typing and has first-class functions. Its syntax was influenced by C. JavaScript copies many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics. The key design principles within JavaScript are taken from the Self and Scheme programming languages. It is amulti- paradigm language, supporting object-oriented, imperative, and functional programming styles. The application of JavaScript to use outside of web pages—for example, in PDF documents, site-specific browsers, and desktop widgets—is also significant. Newer and faster JavaScript VMs and platforms built upon them (notably Node.js) have also increased the popularity of JavaScript for server-side web applications. On the client side, JavaScript was traditionally implemented as an interpreted language but just-in-time compilation is now performed by recent browsers. JavaScript was formalized in the ECMA Script language standard and is primarily used as part of a web browser (client-side JavaScript). This enables programmatic access to computational objects within a host environment. Javascript is a scripting language that will allow you to add real programming to your webpages. You can create small application type processes with javascript, like a calculator or a primitive game of some sort. However, there are more serious uses for javascript:  Browser Detection - Detecting the browser used by a visitor at your page. Depending on the browser, another page specifically designed for that browser can then be loaded.  Cookies - Storing information on the visitor's computer, then retrieving this information automatically next time the user visits your page. This technique is called "cookies".
  • 32. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 32  Control Browsers - Opening pages in customized windows, where you specify if the browser's buttons, menu line, status line or whatever should be present.  Validate Forms - Validating inputs to fields before submitting a form. An example would be validating the entered email address to see if it has an @ in it, since if not, it's not a valid address. PHP PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language. PHP is now installed on more than 244 million websites and 2.1 million web servers. Originally created by Rasmus Lerdorf in 1995, the reference implementation of PHP is now produced by The PHP Group. While PHP originally stood for Personal Home Page, it now stands for PHP: Hypertext Preprocessor, a recursive backronym. PHP code is interpreted by a web server with a PHP processor module, which generates the resulting web page: PHP commands can be embedded directly into an HTML source document rather than calling an external file to process data. It has also evolved to include a command-line interface capability and can be used in standalone graphical applications. PHP is free software released under the PHP License. PHP can be deployed on most web servers and also as a standalone shell on almost every operating system and platform, free of charge. <!DOCTYPE html> <meta charset="utf-8"> <title>PHP Test</title> <?php echo 'Hello World'; ?> The PHP interpreter only executes PHP code within its delimiters. Anything outside its delimiters is not processed by PHP (although non-PHP text is still subject to control structures described in PHP code). The most common delimiters are <?php to open and ?> to close PHP sections. <script language="php"> and </script> delimiters are also available, as are the shortened forms <? or <?= (which is used to echo back a string or variable) and ?> as well as ASP-style short forms <% or <%= and %>. While short delimiters are used, they make script files less portable as support for them can be disabled in the PHP configuration, and they are therefore discouraged. The purpose of all these delimiters is to separate PHP code from non-PHP code, including HTML. The first form of delimiters, <?php and ?>, in XHTML and other XML documents, creates correctly formed XML "processing instructions". This means that the resulting mixture of PHP code and other markup in the server-side file is itself well-formed XML. Variables are prefixed with a dollar symbol, and a type does not need to be specified in advance. Unlike function and class names, variable names are case sensitive. Both double-quoted ("") and here doc strings provide the ability to interpolate a variable's value into the string. PHP treats newlines as whitespace in the manner of a free-form language (except when inside string quotes), and statements are terminated by a semicolon. PHP has three types of comment syntax: /* */ marks block and inline comments; // as well
  • 33. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 33 as # are used for one-line comments. The echo statement is one of several facilities PHP provides to output text, e.g., to a web browser. In terms of keywords and language syntax, PHP is similar to most high level languages that follow the C style syntax. if conditions, for and while loops, and function returns are similar in syntax to languages such as C, C++, C#, Java and Perl Active Server Pages Active Server Pages (ASP), also known as Classic ASP or ASP Classic, was Microsoft's first server- side script engine for dynamically generated web pages. Initially released as an add-on to Internet Information Services (IIS) via the Windows NT 4.0 Option Pack (ca. 1996), it was subsequently included as a free component of Windows Server (since the initial release of Windows 2000 Server). ASP.NET, first released in January 2002, has superseded ASP. ASP 2.0 provided six built-in objects: Application, ASPError, Request, Response, Server, and Session. Session, for example, represents a session that maintains the state of variables from page to page. The Active Scripting engine's support of the Component Object Model (COM) enables ASP websites to access functionality in compiled libraries such as DLLs. ASP 3.0 does not differ greatly from ASP 2.0 but it does offer some additional enhancements such as: Server. Transfer method, Server. Execute method, and an enhanced ASP Error object. ASP 3.0 also enabled buffering by default and optimized the engine for better performance. The use of ASP pages with Internet Information Services (IIS) is currently supported on all supported versions of IIS. The use of ASP pages will be supported on Windows 8 for a minimum of 10 years from the Windows 8 release date. VBScript Using VBScript in ASP pages is very simple. The interpreter replaces all the code in between the <% and %> tags. In the example below, Response.Write Now() dynamically replaced by the current time of the server. <html> <head> <title>The current time</title> </head> <body> The server's current time:<br /> <% Response. Write Now()
  • 34. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 34 %> </body> </html> The Request object Allows data to be read that was sent by the client browser: Form, Querystring, and HTTP Cookie. It also provides information on the server, the client browser, and retrieve HTTP Cookie stored on the visitor's machine. Can retrieve data from a form using both methods HTTP: Request.Form reads data sent by POST. Request.QueryString reads data sent by GET. <% Response.Write("Welcome " & Request.QueryString("name") & "!") 'this script is vulnerable to XSS, the input has not been encoded (see below) %> The Response object Can send information to the client, such as the writing of the text on a page or HTTP Cookie. <% If (Len(Request.QueryString("name")) > 0) Then Response.Cookies("name") = Request.QueryString("name") End If Response.Write("Welcome " & Response.Cookies("name") & "!") 'this script is vulnerable to XSS, the input has not been encoded (see below) %> <% If (Len(Request.QueryString("name")) > 0) Then Response.Cookies("name") = Request.QueryString("name") End If Response.Write ("Welcome " & Server.HTMLEncode(Response.Cookies("name")) & "!") 'this script is NOT vulnerable to XSS, the input has been encoded using HTML Encoding. %>
  • 35. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 35 The Server object Allows connections to databases (ADO), filesystem, and use of components installed on the server. <% Dim oAdoCon, oAdoRec, oAdoStm, oCdoCon, oCdoMsg, oSciDic, oSciFsm, oMswAdr Set oAdoCon = Server.CreateObject("ADODB.Connection") Set oAdoRec = Server.CreateObject("ADODB.Recordset") Set oAdoStm = Server.CreateObject("ADODB.Stream") Set oCdoCon = Server.CreateObject("CDO.Configuration") Set oCdoMsg = Server.CreateObject("CDO.Message") Set oSciDic = Server.CreateObject("Scripting.Dictionary") Set oSciFsm = Server.CreateObject("Scripting.FileSystemObject") Set oMswAdr = Server.CreateObject("MSWC.AdRotator") %> The Application object Stores global variables. <% Application("Ali") = "My ASP Application" Response.Write("Welcome to " & Application("Ali") & "!") %> The Session object Stores variables accessible only to a single visitor. <% If (Len(Request.QueryString("name")) > 0) Then Session("name") = Request.QueryString("name") End If Response. Write("Welcome " & Server.HTMLEncode(Session("name")) & "!") 'this script is NOT vulnerable to XSS, the input has been encoded using HTML Encoding
  • 36. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 36 %> The Error object Allows for the management of errors. <% On Error Resume Next Dim o Error Set o Error = Server.Plasterwork() Response.Write("Asp Code: " & o Error.Asp Code & "<BR />") Response.Write("Asp Description: " & o Error.Asp Description & "<BR />") Response.Write("Category: " & o Error.Category & "<BR />") Response.Write("Column: " & o Error.Column & "<BR />") Response.Write("Description: " & o Error.Description & "<BR />") Response.Write("File: " & o Error.File & "<BR />") Response.Write("Line: " & o Error.Line & "<BR />") Response.Write("Number: " & o Error.Number & "<BR />") Response.Write("Source: " & o Error.Source & "<BR />") If (Err.Number <> 0) Then Err.Clear End If %> ASP on non-Microsoft Operating Systems Microsoft's ASP technology runs only on Windows platforms. A number of products emulate some of the functionality of Classic ASP on non-Microsoft web servers. Apache::ASP for example ports Classic ASP to the Apache Web Server, but does not interpret Visual Basic or other scripting languages supported by ASP. Sun Java System ASP (formerly ChiliSoft ASP) was a popular and reportedly complete emulator,[5] but it has been discontinued.
  • 37. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 37 COOKIES Cookies are data, stored in small text files, on your computer. When a web server has sent a web page to a 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":  When a user visits a web page, his name can be stored in a cookie.  Next time the user visits the page, the cookie "remembers" his name. Cookies are saved in name-value pairs like: username=John Doe When a browser request a web page from a server, cookies belonging to the page is added to the request. This way the server gets the necessary data to "remember" information about users. Create a Cookie with JavaScript JavaScript can create cookies, read cookies, and delete cookies with the property document.cookie. With JavaScript, a cookie can be created like this: document.cookie="username=John Doe"; You can also add an expiry date (in UTC or GMT time). By default, the cookie is deleted when the browser is closed: document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT"; With a path parameter, you can tell the browser what path the cookie belongs to. By default, the cookie belongs to the current page. document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"; Read a Cookie with JavaScript With JavaScript, cookies can be read like this: var x = document.cookie; Change a Cookie with JavaScript With JavaScript, you can change a cookie the same way as you create it: document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"; The old cookie is overwritten. Delete a Cookie with JavaScript Deleting a cookie is very simple. Just set the expires parameter to a passed date:
  • 38. Unit-III/Web Engineering Truba College of Sc. & Tech., Bhopal Prepared By: Ms. Nandini Sharma (CSE Dept.) Page 38 document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; Note that you don't have to specify a cookie value when you delete a cookie. The Cookie String The document.cookie property look like a normal text string. But is it not. Even if you write a whole cookie string to document.cookie, when you read it out again, you can only see the name-value pair of it. If you set a new cookie, older cookies are not overwritten. The new cookie is added to document.cookie, so if you read document.cookie again you will get something like: cookie1=value; cookie2=value; Display All Cookies Create Cookie 1 Create Cookie 2 Delete Cookie 1 Delete Cookie 2 If you want to find the value of one specified cookie, you must write a JavaScript function that searches for the cookie value in the cookie string. JavaScript Cookie Example In the example to follow, we will create a cookie that stores the name of a visitor. The first time a visitor arrives to the web page, he will be asked to fill in his name. The name is then stored in a cookie. The next time the visitor arrives at the same page, he will get a welcome message. For the example we will create 3 JavaScript functions: 1. A function to set a cookie value 2. A function to get a cookie value 3. A function to check a cookie value A Function to Set a Cookie First, we create a function that stores the name of the visitor in a cookie variable: function setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = "expires="+d.toGMTString(); document.cookie = cname + "=" + cvalue + "; " + expires; }