SlideShare a Scribd company logo
Unit-III/Web Engineering St.Aloysius Institute of Technology
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:
Prepared By: Mr.Aditya patel Page 1
Unit-III/Web Engineering St.Aloysius Institute of Technology
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.
Prepared By: Mr.Aditya patel Page 2
Unit-III/Web Engineering St.Aloysius Institute of Technology
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:
Prepared By: Mr.Aditya patel Page 3
Unit-III/Web Engineering St.Aloysius Institute of Technology
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">
Prepared By: Mr.Aditya patel Page 4
Unit-III/Web Engineering St.Aloysius Institute of Technology
<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>
Prepared By: Mr.Aditya patel Page 5
Unit-III/Web Engineering St.Aloysius Institute of Technology
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 End
Empty Depr. DTD Description
Tag Tag
A anchor
ABBR abbreviated form (e.g., WWW, HTTP, etc.)
ACRONYM
ADDRESS information on author
APPLET D L Java applet
Prepared By: Mr.Aditya patel Page 6
Unit-III/Web Engineering St.Aloysius Institute of Technology
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
Prepared By: Mr.Aditya patel Page 7
Unit-III/Web Engineering St.Aloysius Institute of Technology
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
Prepared By: Mr.Aditya patel Page 8
Unit-III/Web Engineering St.Aloysius Institute of Technology
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
Prepared By: Mr.Aditya patel Page 9
Unit-III/Web Engineering St.Aloysius Institute of Technology
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
Prepared By: Mr.Aditya patel Page 10
Unit-III/Web Engineering St.Aloysius Institute of Technology
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.
Prepared By: Mr.Aditya patel Page 11
Unit-III/Web Engineering St.Aloysius Institute of Technology
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;">
Prepared By: Mr.Aditya patel Page 12
Unit-III/Web Engineering St.Aloysius Institute of Technology
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
This will produce following result:
This is Web Page Main title
Main Menu Technical and Managerial Tutorials
HTML
PHP
PERL...
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;">
Prepared By: Mr.Aditya patel Page 13
Unit-III/Web Engineering St.Aloysius Institute of Technology
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:
MainMenu Technical and Managerial Tutorials RightMenu
HTML HTML
PHP PHP
PERL... 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.
Prepared By: Mr.Aditya patel Page 14
Unit-III/Web Engineering St.Aloysius Institute of Technology
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
Prepared By: Mr.Aditya patel Page 15
Unit-III/Web Engineering St.Aloysius Institute of Technology
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"
Prepared By: Mr.Aditya patel Page 16
Unit-III/Web Engineering St.Aloysius Institute of Technology
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.
Prepared By: Mr.Aditya patel Page 17
Unit-III/Web Engineering St.Aloysius Institute of Technology
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>
Prepared By: Mr.Aditya patel Page 18
Unit-III/Web Engineering St.Aloysius Institute of Technology
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.
Prepared By: Mr.Aditya patel Page 19
Unit-III/Web Engineering St.Aloysius Institute of Technology
<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" />
Prepared By: Mr.Aditya patel Page 20
Unit-III/Web Engineering St.Aloysius Institute of Technology
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
Prepared By: Mr.Aditya patel Page 21
Unit-III/Web Engineering St.Aloysius Institute of Technology
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.
Prepared By: Mr.Aditya patel Page 22
Unit-III/Web Engineering St.Aloysius Institute of Technology
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.
Prepared By: Mr.Aditya patel Page 23
Unit-III/Web Engineering St.Aloysius Institute of Technology
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;}
Prepared By: Mr.Aditya patel Page 24
Unit-III/Web Engineering St.Aloysius Institute of Technology
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
Prepared By: Mr.Aditya patel Page 25
Unit-III/Web Engineering St.Aloysius Institute of Technology
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>';
Prepared By: Mr.Aditya patel Page 26
Unit-III/Web Engineering St.Aloysius Institute of Technology
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
Prepared By: Mr.Aditya patel Page 27
Unit-III/Web Engineering St.Aloysius Institute of Technology
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
Last-modified: String
Content-length: String
Set-Cookie: String
The URL that should be returned instead of the URL requested. You can use
this filed to redirect a request to any file.
The date of last modification of the resource.
The length, in bytes, of the data being returned. The browser uses this value
to report the estimated download time for a file.
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
CONTENT_TYPE
Description
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.
Prepared By: Mr.Aditya patel Page 28
Unit-III/Web Engineering St.Aloysius Institute of Technology
REMOTE_HOST
REQUEST_METHOD
SCRIPT_FILENAME
SCRIPT_NAME
SERVER_NAME
SERVER_SOFTWARE
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.
The method used to make the request. The most common methods are GET
and POST.
The full path to the CGI script.
The name of the CGI script.
The server's hostname or IP Address
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.
Prepared By: Mr.Aditya patel Page 29
Unit-III/Web Engineering St.Aloysius Institute of Technology
 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%.
Prepared By: Mr.Aditya patel Page 30
Unit-III/Web Engineering St.Aloysius Institute of Technology
 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".
Prepared By: Mr.Aditya patel Page 31
Unit-III/Web Engineering St.Aloysius Institute of Technology
 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
Prepared By: Mr.Aditya patel Page 32
Unit-III/Web Engineering St.Aloysius Institute of Technology
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()
Prepared By: Mr.Aditya patel Page 33
Unit-III/Web Engineering St.Aloysius Institute of Technology
%>
</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.
%>
Prepared By: Mr.Aditya patel Page 34
Unit-III/Web Engineering St.Aloysius Institute of Technology
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
Prepared By: Mr.Aditya patel Page 35
Unit-III/Web Engineering St.Aloysius Institute of Technology
%>
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.
Prepared By: Mr.Aditya patel Page 36
Unit-III/Web Engineering St.Aloysius Institute of Technology
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:
Prepared By: Mr.Aditya patel Page 37
Unit-III/Web Engineering St.Aloysius Institute of Technology
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;
}
Prepared By: Mr.Aditya patel Page 38

More Related Content

What's hot

4 internet programming
4 internet programming4 internet programming
4 internet programmingsoner_kavlak
 
Web technology
Web technologyWeb technology
Web technology
PCG Solution
 
Web engineering notes unit 2
Web engineering notes unit 2Web engineering notes unit 2
Web engineering notes unit 2
inshu1890
 
Html5
Html5Html5
Rails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSRails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSS
Timo Herttua
 
Ncp computer appls web tech asish
Ncp computer appls  web tech asishNcp computer appls  web tech asish
Ncp computer appls web tech asish
NCP
 
Xml material
Xml materialXml material
Xml material
prathap kumar
 
Web engineering 2(lect 0)
Web engineering 2(lect 0)Web engineering 2(lect 0)
Web engineering 2(lect 0)Roohul Amin
 
Unit 3 WEB TECHNOLOGIES
Unit 3 WEB TECHNOLOGIES Unit 3 WEB TECHNOLOGIES
Unit 3 WEB TECHNOLOGIES
tamilmozhiyaltamilmo
 
Website development courses
Website development coursesWebsite development courses
Website development courses
OSK IT SOLUTION
 
webservices overview
webservices overviewwebservices overview
webservices overviewelliando dias
 
KMUTNB - Internet Programming 1/7
KMUTNB - Internet Programming 1/7KMUTNB - Internet Programming 1/7
KMUTNB - Internet Programming 1/7
phuphax
 
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
www.webre24h.com - [O`reilly]   html and xhtml. pocket reference, 4th ed. - [...www.webre24h.com - [O`reilly]   html and xhtml. pocket reference, 4th ed. - [...
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
webre24h
 
Internet programming lecture 1
Internet programming lecture 1Internet programming lecture 1
Internet programming lecture 1Mohammed Hussein
 
HTML5 New Tags
HTML5 New TagsHTML5 New Tags
HTML5 New Tags
Ducat
 
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonWeb designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lesson
Mukalele Rogers
 
JavaScript
JavaScriptJavaScript
JavaScript
Gulbir Chaudhary
 

What's hot (18)

4 internet programming
4 internet programming4 internet programming
4 internet programming
 
Html
HtmlHtml
Html
 
Web technology
Web technologyWeb technology
Web technology
 
Web engineering notes unit 2
Web engineering notes unit 2Web engineering notes unit 2
Web engineering notes unit 2
 
Html5
Html5Html5
Html5
 
Rails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSRails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSS
 
Ncp computer appls web tech asish
Ncp computer appls  web tech asishNcp computer appls  web tech asish
Ncp computer appls web tech asish
 
Xml material
Xml materialXml material
Xml material
 
Web engineering 2(lect 0)
Web engineering 2(lect 0)Web engineering 2(lect 0)
Web engineering 2(lect 0)
 
Unit 3 WEB TECHNOLOGIES
Unit 3 WEB TECHNOLOGIES Unit 3 WEB TECHNOLOGIES
Unit 3 WEB TECHNOLOGIES
 
Website development courses
Website development coursesWebsite development courses
Website development courses
 
webservices overview
webservices overviewwebservices overview
webservices overview
 
KMUTNB - Internet Programming 1/7
KMUTNB - Internet Programming 1/7KMUTNB - Internet Programming 1/7
KMUTNB - Internet Programming 1/7
 
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
www.webre24h.com - [O`reilly]   html and xhtml. pocket reference, 4th ed. - [...www.webre24h.com - [O`reilly]   html and xhtml. pocket reference, 4th ed. - [...
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
 
Internet programming lecture 1
Internet programming lecture 1Internet programming lecture 1
Internet programming lecture 1
 
HTML5 New Tags
HTML5 New TagsHTML5 New Tags
HTML5 New Tags
 
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonWeb designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lesson
 
JavaScript
JavaScriptJavaScript
JavaScript
 

Viewers also liked

Introducing NoSQL and MongoDB to complement Relational Databases (AMIS SIG 14...
Introducing NoSQL and MongoDB to complement Relational Databases (AMIS SIG 14...Introducing NoSQL and MongoDB to complement Relational Databases (AMIS SIG 14...
Introducing NoSQL and MongoDB to complement Relational Databases (AMIS SIG 14...
Lucas Jellema
 
2015 Internet Trends Report
2015 Internet Trends Report2015 Internet Trends Report
2015 Internet Trends Report
IQbal KHan
 
Tracxn Research - Mobile Advertising Landscape, February 2017
Tracxn Research - Mobile Advertising Landscape, February 2017Tracxn Research - Mobile Advertising Landscape, February 2017
Tracxn Research - Mobile Advertising Landscape, February 2017
Tracxn
 
2017 iosco research report on financial technologies (fintech)
2017 iosco research report on  financial technologies (fintech)2017 iosco research report on  financial technologies (fintech)
2017 iosco research report on financial technologies (fintech)
Ian Beckett
 
Tugas 4 0317-imelda felicia-1412510545
Tugas 4 0317-imelda felicia-1412510545Tugas 4 0317-imelda felicia-1412510545
Tugas 4 0317-imelda felicia-1412510545
imeldafelicia
 
Tracxn Research - Insurance Tech Landscape, February 2017
Tracxn Research - Insurance Tech Landscape, February 2017Tracxn Research - Insurance Tech Landscape, February 2017
Tracxn Research - Insurance Tech Landscape, February 2017
Tracxn
 
Google Cloud Spanner Preview
Google Cloud Spanner PreviewGoogle Cloud Spanner Preview
Google Cloud Spanner Preview
DoiT International
 
Tracxn Research - Finance & Accounting Landscape, February 2017
Tracxn Research - Finance & Accounting Landscape, February 2017Tracxn Research - Finance & Accounting Landscape, February 2017
Tracxn Research - Finance & Accounting Landscape, February 2017
Tracxn
 
Tugas4 0317-nasrulakbar-141250552
Tugas4 0317-nasrulakbar-141250552Tugas4 0317-nasrulakbar-141250552
Tugas4 0317-nasrulakbar-141250552
Nasrul Akbar
 
Tracxn Research - Industrial Robotics Landscape, February 2017
Tracxn Research - Industrial Robotics Landscape, February 2017Tracxn Research - Industrial Robotics Landscape, February 2017
Tracxn Research - Industrial Robotics Landscape, February 2017
Tracxn
 
MongoDB NoSQL database a deep dive -MyWhitePaper
MongoDB  NoSQL database a deep dive -MyWhitePaperMongoDB  NoSQL database a deep dive -MyWhitePaper
MongoDB NoSQL database a deep dive -MyWhitePaper
Rajesh Kumar
 
Webinar: Fighting Fraud with Graph Databases
Webinar: Fighting Fraud with Graph DatabasesWebinar: Fighting Fraud with Graph Databases
Webinar: Fighting Fraud with Graph Databases
DataStax
 
Tracxn Research - Chatbots Landscape, February 2017
Tracxn Research - Chatbots Landscape, February 2017Tracxn Research - Chatbots Landscape, February 2017
Tracxn Research - Chatbots Landscape, February 2017
Tracxn
 
DATA SCIENCE IS CATALYZING BUSINESS AND INNOVATION
DATA SCIENCE IS CATALYZING BUSINESS AND INNOVATION DATA SCIENCE IS CATALYZING BUSINESS AND INNOVATION
DATA SCIENCE IS CATALYZING BUSINESS AND INNOVATION
Elvis Muyanja
 
Tracxn Research - Construction Tech Landscape, February 2017
Tracxn Research - Construction Tech Landscape, February 2017Tracxn Research - Construction Tech Landscape, February 2017
Tracxn Research - Construction Tech Landscape, February 2017
Tracxn
 
3P Learning (3PL) - Earning from Learning - equity research initiation report
3P Learning (3PL) - Earning from Learning - equity research initiation report3P Learning (3PL) - Earning from Learning - equity research initiation report
3P Learning (3PL) - Earning from Learning - equity research initiation report
George Gabriel
 
Comparing 30 MongoDB operations with Oracle SQL statements
Comparing 30 MongoDB operations with Oracle SQL statementsComparing 30 MongoDB operations with Oracle SQL statements
Comparing 30 MongoDB operations with Oracle SQL statements
Lucas Jellema
 
Salesforce Marketing Cloud Training | Salesforce Training For Beginners - Mar...
Salesforce Marketing Cloud Training | Salesforce Training For Beginners - Mar...Salesforce Marketing Cloud Training | Salesforce Training For Beginners - Mar...
Salesforce Marketing Cloud Training | Salesforce Training For Beginners - Mar...
Edureka!
 
Europa AI startup scaleups report 2016
Europa AI startup scaleups report 2016 Europa AI startup scaleups report 2016
Europa AI startup scaleups report 2016
Ian Beckett
 
Developing streaming applications with apache apex (strata + hadoop world)
Developing streaming applications with apache apex (strata + hadoop world)Developing streaming applications with apache apex (strata + hadoop world)
Developing streaming applications with apache apex (strata + hadoop world)
Apache Apex
 

Viewers also liked (20)

Introducing NoSQL and MongoDB to complement Relational Databases (AMIS SIG 14...
Introducing NoSQL and MongoDB to complement Relational Databases (AMIS SIG 14...Introducing NoSQL and MongoDB to complement Relational Databases (AMIS SIG 14...
Introducing NoSQL and MongoDB to complement Relational Databases (AMIS SIG 14...
 
2015 Internet Trends Report
2015 Internet Trends Report2015 Internet Trends Report
2015 Internet Trends Report
 
Tracxn Research - Mobile Advertising Landscape, February 2017
Tracxn Research - Mobile Advertising Landscape, February 2017Tracxn Research - Mobile Advertising Landscape, February 2017
Tracxn Research - Mobile Advertising Landscape, February 2017
 
2017 iosco research report on financial technologies (fintech)
2017 iosco research report on  financial technologies (fintech)2017 iosco research report on  financial technologies (fintech)
2017 iosco research report on financial technologies (fintech)
 
Tugas 4 0317-imelda felicia-1412510545
Tugas 4 0317-imelda felicia-1412510545Tugas 4 0317-imelda felicia-1412510545
Tugas 4 0317-imelda felicia-1412510545
 
Tracxn Research - Insurance Tech Landscape, February 2017
Tracxn Research - Insurance Tech Landscape, February 2017Tracxn Research - Insurance Tech Landscape, February 2017
Tracxn Research - Insurance Tech Landscape, February 2017
 
Google Cloud Spanner Preview
Google Cloud Spanner PreviewGoogle Cloud Spanner Preview
Google Cloud Spanner Preview
 
Tracxn Research - Finance & Accounting Landscape, February 2017
Tracxn Research - Finance & Accounting Landscape, February 2017Tracxn Research - Finance & Accounting Landscape, February 2017
Tracxn Research - Finance & Accounting Landscape, February 2017
 
Tugas4 0317-nasrulakbar-141250552
Tugas4 0317-nasrulakbar-141250552Tugas4 0317-nasrulakbar-141250552
Tugas4 0317-nasrulakbar-141250552
 
Tracxn Research - Industrial Robotics Landscape, February 2017
Tracxn Research - Industrial Robotics Landscape, February 2017Tracxn Research - Industrial Robotics Landscape, February 2017
Tracxn Research - Industrial Robotics Landscape, February 2017
 
MongoDB NoSQL database a deep dive -MyWhitePaper
MongoDB  NoSQL database a deep dive -MyWhitePaperMongoDB  NoSQL database a deep dive -MyWhitePaper
MongoDB NoSQL database a deep dive -MyWhitePaper
 
Webinar: Fighting Fraud with Graph Databases
Webinar: Fighting Fraud with Graph DatabasesWebinar: Fighting Fraud with Graph Databases
Webinar: Fighting Fraud with Graph Databases
 
Tracxn Research - Chatbots Landscape, February 2017
Tracxn Research - Chatbots Landscape, February 2017Tracxn Research - Chatbots Landscape, February 2017
Tracxn Research - Chatbots Landscape, February 2017
 
DATA SCIENCE IS CATALYZING BUSINESS AND INNOVATION
DATA SCIENCE IS CATALYZING BUSINESS AND INNOVATION DATA SCIENCE IS CATALYZING BUSINESS AND INNOVATION
DATA SCIENCE IS CATALYZING BUSINESS AND INNOVATION
 
Tracxn Research - Construction Tech Landscape, February 2017
Tracxn Research - Construction Tech Landscape, February 2017Tracxn Research - Construction Tech Landscape, February 2017
Tracxn Research - Construction Tech Landscape, February 2017
 
3P Learning (3PL) - Earning from Learning - equity research initiation report
3P Learning (3PL) - Earning from Learning - equity research initiation report3P Learning (3PL) - Earning from Learning - equity research initiation report
3P Learning (3PL) - Earning from Learning - equity research initiation report
 
Comparing 30 MongoDB operations with Oracle SQL statements
Comparing 30 MongoDB operations with Oracle SQL statementsComparing 30 MongoDB operations with Oracle SQL statements
Comparing 30 MongoDB operations with Oracle SQL statements
 
Salesforce Marketing Cloud Training | Salesforce Training For Beginners - Mar...
Salesforce Marketing Cloud Training | Salesforce Training For Beginners - Mar...Salesforce Marketing Cloud Training | Salesforce Training For Beginners - Mar...
Salesforce Marketing Cloud Training | Salesforce Training For Beginners - Mar...
 
Europa AI startup scaleups report 2016
Europa AI startup scaleups report 2016 Europa AI startup scaleups report 2016
Europa AI startup scaleups report 2016
 
Developing streaming applications with apache apex (strata + hadoop world)
Developing streaming applications with apache apex (strata + hadoop world)Developing streaming applications with apache apex (strata + hadoop world)
Developing streaming applications with apache apex (strata + hadoop world)
 

Similar to Web engineering notes unit 3

WT Module-1.pdf
WT Module-1.pdfWT Module-1.pdf
WT Module-1.pdf
RamyaH11
 
mst_unit1.pptx
mst_unit1.pptxmst_unit1.pptx
mst_unit1.pptx
michaelaaron25322
 
Internet programming notes
Internet programming notesInternet programming notes
Internet programming notes
Durgadevi palani
 
Grade 7_HTML.pptx
Grade 7_HTML.pptxGrade 7_HTML.pptx
Grade 7_HTML.pptx
shilpak0307
 
Dynamic html (#1)
Dynamic  html (#1)Dynamic  html (#1)
Dynamic html (#1)
Haider Habeeb
 
WHAT IS HTML.pdf
WHAT IS HTML.pdfWHAT IS HTML.pdf
WHAT IS HTML.pdf
Satishkumar722293
 
WHAT IS HTML.pdf
WHAT IS HTML.pdfWHAT IS HTML.pdf
WHAT IS HTML.pdf
Satishkumar722293
 
WHAT IS HTML.pdf
WHAT IS HTML.pdfWHAT IS HTML.pdf
WHAT IS HTML.pdf
Satishkumar722293
 
What is html xml and xhtml
What is html xml and xhtmlWhat is html xml and xhtml
What is html xml and xhtml
FkdiMl
 
Over view of html
Over view of htmlOver view of html
Over view of html
Keith Borgonia Manatad
 
HTML
HTMLHTML
Markup language classification, designing static and dynamic
Markup language classification, designing static and dynamicMarkup language classification, designing static and dynamic
Markup language classification, designing static and dynamicAnkita Bhalla
 
Grade 10 COMPUTER
Grade 10 COMPUTERGrade 10 COMPUTER
Grade 10 COMPUTER
Joel Linquico
 
Lecture-1.pptx
Lecture-1.pptxLecture-1.pptx
Lecture-1.pptx
vishal choudhary
 
WEB Module 1.pdf
WEB Module 1.pdfWEB Module 1.pdf
WEB Module 1.pdf
IbrahimBadsha1
 
Html
HtmlHtml
Html interview-questions-and-answers
Html interview-questions-and-answersHtml interview-questions-and-answers
Html interview-questions-and-answers
MohitKumar1985
 

Similar to Web engineering notes unit 3 (20)

WT Module-1.pdf
WT Module-1.pdfWT Module-1.pdf
WT Module-1.pdf
 
mst_unit1.pptx
mst_unit1.pptxmst_unit1.pptx
mst_unit1.pptx
 
Internet programming notes
Internet programming notesInternet programming notes
Internet programming notes
 
Iwt module 1
Iwt  module 1Iwt  module 1
Iwt module 1
 
Grade 7_HTML.pptx
Grade 7_HTML.pptxGrade 7_HTML.pptx
Grade 7_HTML.pptx
 
Dynamic html (#1)
Dynamic  html (#1)Dynamic  html (#1)
Dynamic html (#1)
 
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
 
What is html xml and xhtml
What is html xml and xhtmlWhat is html xml and xhtml
What is html xml and xhtml
 
Over view of html
Over view of htmlOver view of html
Over view of html
 
HTML
HTMLHTML
HTML
 
Markup language classification, designing static and dynamic
Markup language classification, designing static and dynamicMarkup language classification, designing static and dynamic
Markup language classification, designing static and dynamic
 
Grade 10 COMPUTER
Grade 10 COMPUTERGrade 10 COMPUTER
Grade 10 COMPUTER
 
Lecture-1.pptx
Lecture-1.pptxLecture-1.pptx
Lecture-1.pptx
 
WEB Module 1.pdf
WEB Module 1.pdfWEB Module 1.pdf
WEB Module 1.pdf
 
Html
HtmlHtml
Html
 
Html interview-questions-and-answers
Html interview-questions-and-answersHtml interview-questions-and-answers
Html interview-questions-and-answers
 
Xhtml 2010
Xhtml 2010Xhtml 2010
Xhtml 2010
 
Xhtml 2010
Xhtml 2010Xhtml 2010
Xhtml 2010
 

Recently uploaded

Quality defects in TMT Bars, Possible causes and Potential Solutions.
Quality defects in TMT Bars, Possible causes and Potential Solutions.Quality defects in TMT Bars, Possible causes and Potential Solutions.
Quality defects in TMT Bars, Possible causes and Potential Solutions.
PrashantGoswami42
 
weather web application report.pdf
weather web application report.pdfweather web application report.pdf
weather web application report.pdf
Pratik Pawar
 
The Benefits and Techniques of Trenchless Pipe Repair.pdf
The Benefits and Techniques of Trenchless Pipe Repair.pdfThe Benefits and Techniques of Trenchless Pipe Repair.pdf
The Benefits and Techniques of Trenchless Pipe Repair.pdf
Pipe Restoration Solutions
 
Courier management system project report.pdf
Courier management system project report.pdfCourier management system project report.pdf
Courier management system project report.pdf
Kamal Acharya
 
Automobile Management System Project Report.pdf
Automobile Management System Project Report.pdfAutomobile Management System Project Report.pdf
Automobile Management System Project Report.pdf
Kamal Acharya
 
J.Yang, ICLR 2024, MLILAB, KAIST AI.pdf
J.Yang,  ICLR 2024, MLILAB, KAIST AI.pdfJ.Yang,  ICLR 2024, MLILAB, KAIST AI.pdf
J.Yang, ICLR 2024, MLILAB, KAIST AI.pdf
MLILAB
 
Architectural Portfolio Sean Lockwood
Architectural Portfolio Sean LockwoodArchitectural Portfolio Sean Lockwood
Architectural Portfolio Sean Lockwood
seandesed
 
power quality voltage fluctuation UNIT - I.pptx
power quality voltage fluctuation UNIT - I.pptxpower quality voltage fluctuation UNIT - I.pptx
power quality voltage fluctuation UNIT - I.pptx
ViniHema
 
block diagram and signal flow graph representation
block diagram and signal flow graph representationblock diagram and signal flow graph representation
block diagram and signal flow graph representation
Divya Somashekar
 
Planning Of Procurement o different goods and services
Planning Of Procurement o different goods and servicesPlanning Of Procurement o different goods and services
Planning Of Procurement o different goods and services
JoytuBarua2
 
Cosmetic shop management system project report.pdf
Cosmetic shop management system project report.pdfCosmetic shop management system project report.pdf
Cosmetic shop management system project report.pdf
Kamal Acharya
 
Standard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - NeometrixStandard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - Neometrix
Neometrix_Engineering_Pvt_Ltd
 
Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024
Massimo Talia
 
H.Seo, ICLR 2024, MLILAB, KAIST AI.pdf
H.Seo,  ICLR 2024, MLILAB,  KAIST AI.pdfH.Seo,  ICLR 2024, MLILAB,  KAIST AI.pdf
H.Seo, ICLR 2024, MLILAB, KAIST AI.pdf
MLILAB
 
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdfHybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
fxintegritypublishin
 
ASME IX(9) 2007 Full Version .pdf
ASME IX(9)  2007 Full Version       .pdfASME IX(9)  2007 Full Version       .pdf
ASME IX(9) 2007 Full Version .pdf
AhmedHussein950959
 
Water Industry Process Automation and Control Monthly - May 2024.pdf
Water Industry Process Automation and Control Monthly - May 2024.pdfWater Industry Process Automation and Control Monthly - May 2024.pdf
Water Industry Process Automation and Control Monthly - May 2024.pdf
Water Industry Process Automation & Control
 
Student information management system project report ii.pdf
Student information management system project report ii.pdfStudent information management system project report ii.pdf
Student information management system project report ii.pdf
Kamal Acharya
 
Railway Signalling Principles Edition 3.pdf
Railway Signalling Principles Edition 3.pdfRailway Signalling Principles Edition 3.pdf
Railway Signalling Principles Edition 3.pdf
TeeVichai
 
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)
MdTanvirMahtab2
 

Recently uploaded (20)

Quality defects in TMT Bars, Possible causes and Potential Solutions.
Quality defects in TMT Bars, Possible causes and Potential Solutions.Quality defects in TMT Bars, Possible causes and Potential Solutions.
Quality defects in TMT Bars, Possible causes and Potential Solutions.
 
weather web application report.pdf
weather web application report.pdfweather web application report.pdf
weather web application report.pdf
 
The Benefits and Techniques of Trenchless Pipe Repair.pdf
The Benefits and Techniques of Trenchless Pipe Repair.pdfThe Benefits and Techniques of Trenchless Pipe Repair.pdf
The Benefits and Techniques of Trenchless Pipe Repair.pdf
 
Courier management system project report.pdf
Courier management system project report.pdfCourier management system project report.pdf
Courier management system project report.pdf
 
Automobile Management System Project Report.pdf
Automobile Management System Project Report.pdfAutomobile Management System Project Report.pdf
Automobile Management System Project Report.pdf
 
J.Yang, ICLR 2024, MLILAB, KAIST AI.pdf
J.Yang,  ICLR 2024, MLILAB, KAIST AI.pdfJ.Yang,  ICLR 2024, MLILAB, KAIST AI.pdf
J.Yang, ICLR 2024, MLILAB, KAIST AI.pdf
 
Architectural Portfolio Sean Lockwood
Architectural Portfolio Sean LockwoodArchitectural Portfolio Sean Lockwood
Architectural Portfolio Sean Lockwood
 
power quality voltage fluctuation UNIT - I.pptx
power quality voltage fluctuation UNIT - I.pptxpower quality voltage fluctuation UNIT - I.pptx
power quality voltage fluctuation UNIT - I.pptx
 
block diagram and signal flow graph representation
block diagram and signal flow graph representationblock diagram and signal flow graph representation
block diagram and signal flow graph representation
 
Planning Of Procurement o different goods and services
Planning Of Procurement o different goods and servicesPlanning Of Procurement o different goods and services
Planning Of Procurement o different goods and services
 
Cosmetic shop management system project report.pdf
Cosmetic shop management system project report.pdfCosmetic shop management system project report.pdf
Cosmetic shop management system project report.pdf
 
Standard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - NeometrixStandard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - Neometrix
 
Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024
 
H.Seo, ICLR 2024, MLILAB, KAIST AI.pdf
H.Seo,  ICLR 2024, MLILAB,  KAIST AI.pdfH.Seo,  ICLR 2024, MLILAB,  KAIST AI.pdf
H.Seo, ICLR 2024, MLILAB, KAIST AI.pdf
 
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdfHybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
 
ASME IX(9) 2007 Full Version .pdf
ASME IX(9)  2007 Full Version       .pdfASME IX(9)  2007 Full Version       .pdf
ASME IX(9) 2007 Full Version .pdf
 
Water Industry Process Automation and Control Monthly - May 2024.pdf
Water Industry Process Automation and Control Monthly - May 2024.pdfWater Industry Process Automation and Control Monthly - May 2024.pdf
Water Industry Process Automation and Control Monthly - May 2024.pdf
 
Student information management system project report ii.pdf
Student information management system project report ii.pdfStudent information management system project report ii.pdf
Student information management system project report ii.pdf
 
Railway Signalling Principles Edition 3.pdf
Railway Signalling Principles Edition 3.pdfRailway Signalling Principles Edition 3.pdf
Railway Signalling Principles Edition 3.pdf
 
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)
 

Web engineering notes unit 3

  • 1. Unit-III/Web Engineering St.Aloysius Institute of Technology 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: Prepared By: Mr.Aditya patel Page 1
  • 2. Unit-III/Web Engineering St.Aloysius Institute of Technology 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. Prepared By: Mr.Aditya patel Page 2
  • 3. Unit-III/Web Engineering St.Aloysius Institute of Technology 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: Prepared By: Mr.Aditya patel Page 3
  • 4. Unit-III/Web Engineering St.Aloysius Institute of Technology 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"> Prepared By: Mr.Aditya patel Page 4
  • 5. Unit-III/Web Engineering St.Aloysius Institute of Technology <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> Prepared By: Mr.Aditya patel Page 5
  • 6. Unit-III/Web Engineering St.Aloysius Institute of Technology 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 End Empty Depr. DTD Description Tag Tag A anchor ABBR abbreviated form (e.g., WWW, HTTP, etc.) ACRONYM ADDRESS information on author APPLET D L Java applet Prepared By: Mr.Aditya patel Page 6
  • 7. Unit-III/Web Engineering St.Aloysius Institute of Technology 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 Prepared By: Mr.Aditya patel Page 7
  • 8. Unit-III/Web Engineering St.Aloysius Institute of Technology 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 Prepared By: Mr.Aditya patel Page 8
  • 9. Unit-III/Web Engineering St.Aloysius Institute of Technology 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 Prepared By: Mr.Aditya patel Page 9
  • 10. Unit-III/Web Engineering St.Aloysius Institute of Technology 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 Prepared By: Mr.Aditya patel Page 10
  • 11. Unit-III/Web Engineering St.Aloysius Institute of Technology 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. Prepared By: Mr.Aditya patel Page 11
  • 12. Unit-III/Web Engineering St.Aloysius Institute of Technology 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;"> Prepared By: Mr.Aditya patel Page 12
  • 13. Unit-III/Web Engineering St.Aloysius Institute of Technology <center> Copyright © 2007 Tutorialspoint.com </center> </td> </tr> </table> This will produce following result: This is Web Page Main title Main Menu Technical and Managerial Tutorials HTML PHP PERL... 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;"> Prepared By: Mr.Aditya patel Page 13
  • 14. Unit-III/Web Engineering St.Aloysius Institute of Technology 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: MainMenu Technical and Managerial Tutorials RightMenu HTML HTML PHP PHP PERL... 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. Prepared By: Mr.Aditya patel Page 14
  • 15. Unit-III/Web Engineering St.Aloysius Institute of Technology 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 Prepared By: Mr.Aditya patel Page 15
  • 16. Unit-III/Web Engineering St.Aloysius Institute of Technology 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" Prepared By: Mr.Aditya patel Page 16
  • 17. Unit-III/Web Engineering St.Aloysius Institute of Technology 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. Prepared By: Mr.Aditya patel Page 17
  • 18. Unit-III/Web Engineering St.Aloysius Institute of Technology 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> Prepared By: Mr.Aditya patel Page 18
  • 19. Unit-III/Web Engineering St.Aloysius Institute of Technology 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. Prepared By: Mr.Aditya patel Page 19
  • 20. Unit-III/Web Engineering St.Aloysius Institute of Technology <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" /> Prepared By: Mr.Aditya patel Page 20
  • 21. Unit-III/Web Engineering St.Aloysius Institute of Technology 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 Prepared By: Mr.Aditya patel Page 21
  • 22. Unit-III/Web Engineering St.Aloysius Institute of Technology 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. Prepared By: Mr.Aditya patel Page 22
  • 23. Unit-III/Web Engineering St.Aloysius Institute of Technology 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. Prepared By: Mr.Aditya patel Page 23
  • 24. Unit-III/Web Engineering St.Aloysius Institute of Technology 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;} Prepared By: Mr.Aditya patel Page 24
  • 25. Unit-III/Web Engineering St.Aloysius Institute of Technology 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 Prepared By: Mr.Aditya patel Page 25
  • 26. Unit-III/Web Engineering St.Aloysius Institute of Technology 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>'; Prepared By: Mr.Aditya patel Page 26
  • 27. Unit-III/Web Engineering St.Aloysius Institute of Technology 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 Prepared By: Mr.Aditya patel Page 27
  • 28. Unit-III/Web Engineering St.Aloysius Institute of Technology 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 Last-modified: String Content-length: String Set-Cookie: String The URL that should be returned instead of the URL requested. You can use this filed to redirect a request to any file. The date of last modification of the resource. The length, in bytes, of the data being returned. The browser uses this value to report the estimated download time for a file. 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 CONTENT_TYPE Description 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. Prepared By: Mr.Aditya patel Page 28
  • 29. Unit-III/Web Engineering St.Aloysius Institute of Technology REMOTE_HOST REQUEST_METHOD SCRIPT_FILENAME SCRIPT_NAME SERVER_NAME SERVER_SOFTWARE 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. The method used to make the request. The most common methods are GET and POST. The full path to the CGI script. The name of the CGI script. The server's hostname or IP Address 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. Prepared By: Mr.Aditya patel Page 29
  • 30. Unit-III/Web Engineering St.Aloysius Institute of Technology  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%. Prepared By: Mr.Aditya patel Page 30
  • 31. Unit-III/Web Engineering St.Aloysius Institute of Technology  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". Prepared By: Mr.Aditya patel Page 31
  • 32. Unit-III/Web Engineering St.Aloysius Institute of Technology  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 Prepared By: Mr.Aditya patel Page 32
  • 33. Unit-III/Web Engineering St.Aloysius Institute of Technology 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() Prepared By: Mr.Aditya patel Page 33
  • 34. Unit-III/Web Engineering St.Aloysius Institute of Technology %> </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. %> Prepared By: Mr.Aditya patel Page 34
  • 35. Unit-III/Web Engineering St.Aloysius Institute of Technology 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 Prepared By: Mr.Aditya patel Page 35
  • 36. Unit-III/Web Engineering St.Aloysius Institute of Technology %> 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. Prepared By: Mr.Aditya patel Page 36
  • 37. Unit-III/Web Engineering St.Aloysius Institute of Technology 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: Prepared By: Mr.Aditya patel Page 37
  • 38. Unit-III/Web Engineering St.Aloysius Institute of Technology 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; } Prepared By: Mr.Aditya patel Page 38