Technologies for Web Applications: HTML and DHTML, HTML Basic Concepts, Static and dynamic HTML, Structure of HTML documents, HTML Elements, Linking in HTML, Anchor Attributes, Image Maps, Meta Information, Image Preliminaries, Layouts, Backgrounds, Colors and Text, Fonts, Tables, Frames and layers, Audio and Video Support with HTML Database integration, CSS, Positioning with Style sheets, Forms Control, Form. Elements. Introduction to CGI PERL, JAVA SCRIPT, PHP, ASP , Cookies Creating and Reading Cookies
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;">
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;
}