SIR PADAMPAT SINGHANIA UNIVERSITY, UDAIPUR

School of Engineering

LAB MANUAL

Subject: Web technology

Sub-Code: IT301
Branch: CSE/IT

Prepared By: Ms. Poonam Saini Page 1

Main principles for effective web page design
1. Include essential elements on each page.
2. Use appropriate navigational aids.
3. Keep page lengths short.
4. Use appropriate text fonts and styles.
5. Use color appropriately.
6. Keep graphics small.

For additional information concerning these six principles, please read below and check
out some of the Web sites listed at the end of this page.

Six Basic Principles of Web Page Design

1. Include essential elements on each page.
Any Web page may be accessed directly from another Web site, therefore each Web page
needs to contain essential information which allows it to act as an independent document.
This essential information is usually placed into one of three main parts of the Web page;
the header , the body, or the footer (Lynch, 1997).

The header is used to bring continuity to the various pages of the Web site, as well as
indicate the main topic of the particular Web page. Therefore, the header usually contains
a banner graphic which ties the various Web pages of the site together, the title of the
document, and navigational aids which link to other pages within the Web site.

The body contains the main textual content of the document, as well as hypertext links to
other related Web sites.

The footer is used to verify the origin and authorship of the Web page. Therefore, the
footer should contain the author or contact person of the site, as well as the institution
with which the author is affiliated (if any), navigational links to other pages within the
Web site, the date of last revision, and a statement of copyright. Other useful information
might also include the author's e-mail and mailing addresses, as well as the URL of the
document.

2. Use appropriate navigational aids.

Good navigational aids are essential to good Web page design. Zimmerman (1997) points
out that one way to increase the navigability of Web pages is to include "return to home
page", "previous page", and "next page" links on each page. Lynch (1995), and others,
suggest that local navigational links be located both at the beginning and end of the page
layout so they are easily accessible to the viewer of the Web page. By including the
navigational links at the end of the page, the user is not forced to return to the beginning
of the Web page after browsing it in order to access another page. Another method used

Prepared By: Ms. Poonam Saini Page 2

to increase navigability is to provide a menu or table of contents of the Web site on each
Web page.

3. Keep page lengths short.

It is usually recommended that Web page lengths not exceed two or three screens worth
of information (Lynch, 1995). A major disadvantage of long Web pages is that the user
needs to depend on the vertical scroll bar to navigate within the page, a process which
can be disorienting to the viewer. In order to keep Web pages short, longer topics can be
subdivided into logical chunks of information on separate Web pages. Individual Web
pages should include only relevant, yet complete, information on a single topic.

4. Use appropriate text fonts and styles.

Different web page browsers may display special non-standard text fonts in various ways.
For this reason, Web page designers should use standard text fonts in designing Web
pages (Vaughan, 1996). Lynch (1995) suggests using major HTML heading styles very
sparingly and reducing header sizes in general so that more information can be displayed
on the screen at one time without loosing legibility or causing over crowding to the
screen layout.

5. Use color appropriately.

Marcus (1990), McFarland (1995), and others point out that color should be used
sparingly and only to highlight key elements of the page or to indicate specific functions.
Just because you can view a particular color with a particular browser does not mean that
others will be able to view it on their monitor with their browser. Therefore it is
important to use browser-safe colors, which are also know as web-save colors.

Black is traditionally used on Web pages for the main body of text because of its
legibility on a light background. Some colors are traditionally used to convey a particular
meaning. Red, for example, is often used to signify danger or warning, and thus should
be used sparingly to convey such meaning. Blue is traditionally used to indicate hypertext
links to other Web pages, and a shade of purple to indicate links which have already been
accessed by the current user. Altering these traditional color schemes will most likely
confuse the new viewer to the Web site.

6. Keep graphics small.

Graphics can effectively be used to add interest to a web page, but the amount and size of
graphics should be kept to a minimum (Zimmerman, 1997). Too many graphics, or a
single large graphic, can take a long time to download. Usually, using several smaller
graphics, as opposed to one large one, can create a better impression for visitors to your
site.

The Beginner's Guide to HTML

Hypertext Markup Language (HTML) is the predominant authoring language used to
create web pages. This language contains tags to format the contents of web documents.
For example, HTML tags provide instructions on how text should appear (bold, italics, a

Prepared By: Ms. Poonam Saini Page 3

specific color etc.) or how a web page is structured (e.g., put a graphic here, insert a link
here, etc.). HTML tags can have attributes, which are further specifications for a tag.

You can recognize HTML tags because they are all enclosed in angle brackets, like these:
< >. Usually, tags come in pairs to indicate the beginning and ending of a specific
command. The begin tag looks like this: < > and the end tag looks like this: . So, to start a
paragraph, the HTML tag <p> is placed at the point in the text where a new paragraph
should begin. To end a paragraph, the HTML tag </p> is placed at the end of the text that
belongs in the paragraph.

So, an HTML document (or web page) is the combination of plain text and HTML tags
and, as such, HTML is a “universal” language for the internet. Who makes sure that
everyone uses the same tags to accomplish the same instructions?.As of 1996, all the
versions of HTML are maintained by the World Wide Web Consortium (W3C). The most
important HTML tags and their attributes are listed and defined below:

...

A Anchor tag used to define where a hyperlink should go.

<a></a>

Href An attribute of the Anchor tag defining the destination of the hyperlink
whether it's to other text on the same page or to a completely different
web page.

body Body tag indicates everything that will appear on the page. All web
page attributes (text, links and graphics) are placed inside the start/end
body tag pairing.
<body></body>

Bgcolor An attribute of the Body tag to indicate a web page's background

color.

background An attribute of the Body tag to indicate a web page's background

picture.

Link Alink An attribute of the Body tag indicating the color of active links and the
Vlink color of active links after they've been visited.

B Bold tag; makes the surrounded text bold.

<b></b>

Br Line break tag; inserts a line break into text.

<br>

Comments Tag used to insert comments on the web page that are not visible in the
web browser.
<!--Comment-->

Prepared By: Ms. Poonam Saini Page 4

DIV Tag that defines particular sections on the web page.
<div></div>

Font Tag for defining font properties.

<font></font>

Size Attribute of the Font tag that defines font size.

Color Attribute of the Font tag that defines font color.

Face Attribute of the Font tag used to choose a specific font.

Pointsize Attribute of the Font tag used to give explicit point size to the font and
recognized only by Netscape.

Form Tag used to create forms on a web page into which users can enter
data.
<form></form>

Frame Tag used to define individual frames that belong in a frameset so more
than one HTML document can be displayed on a single web page.
<frame />

Src An attribute of the Frame tag meaning “source” (the URL) of the
picture or HTML document to be displayed in a frame.

Name An attribute of the Frame tag used to assigned a name to individual

frames, which can be linked from other frames.

scrolling An attribute of the Frame tag used to specify whether scroll bars
should appear in a frame.

noresize An attribute of the Frame tag that preserves layout by preventing users
from resizing a frame.

frameborder An attribute of the Frame tag specifying if a border should appear

around a frame.

bordercolor An attribute of the Frame tag that defines border color

marginwidth An attribute of the Frame tag that conveys how wide a page should be
by indicating the left and right margins.

marginheight An attribute of the Frame tag defining page height by indicating top
and bottom margins.

Frameset Tag used to specify the layout of a web page containing

frames;.individual frames on a web page are defined inside the
frameset.

Prepared By: Ms. Poonam Saini Page 5

 <frameset></frameset>

Cols Attribute of the Frameset tag used to specify column distance between
frames in pixels or percentage or proportions.

Rows Attribute of the Frameset tag used to specify row distance between
frames in pixels or percentage or proportions.

Frameborder Attribute of the Frameset tag used to specify if a border should appear
around a frame.

Framespacing Attribute of the Frameset tag defining the space between frames in
pixels.

Border Attribute of the Frameset tag defining the width of all frames.

bordercolor Attribute of the Frameset tag defining the border color of all frames.

H1-H6 Tag defining the heading style, where h1 is the largest header and h6 is
the smallest.
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Head Header tag used at the beginning of a web page to contain information
about the page, such as its title.
<head></head>

HR Tag used to create a line dividing a web page or frame horizontally.

<hr>

size Attribute of the HR tag defining the thickness of the horizontal line in
pixels.

Width Attribute of the HR tag specifying the width of the horizontal line in
pixels or proportions.

Align Attribute of the HR tag defines the alignment of the line as left, right,
or center.

Color Attribute of the HR tag defining the color of the horizontal line.

HTML Tag used at the very beginning and very end of a document to define it
as an HTML document.
<html></html>

Prepared By: Ms. Poonam Saini Page 6

I Tag that makes the enclosed text into italics.
<i></i>

IMG Tag used to place an image on the web page.

<img />

Src Attribute of the IMG tag specifying the URL of the image.

Justifications Tag defines how text should be aligned on the web page.
<left></left>
<center></center>
<right></right>

Ol Tag used to define an ordered list, which means items in the list will
be numbered.
<ol></ol>

Li Tag used for defining items that belong in a list.

P Tag to form a paragraph within web page text, leaving a line gap at the
top and bottom.
<p></p>

Table Tag used to defines a table for a web page.

<table></table>

Border Attribute of the Table tag defining the table's border in pixels.

cellpadding Attribute of the Table tag defining the space between table text.

cellspacing Attribute of the Table tag defining spacing between table cells.

Width Attribute of the Table tag defining table width in pixels.

Bgcolor Attribute of the Table tag defining a table's background color.

background Attribute of the Table tag defining a table's background image.

Align Attribute of the Table tag defining alignment of data in the cells.

bordercolor Attribute of the Table tag defining border color.

bordercolorlight Attribute of the Table tag used to define the lighter color of a border
having a 3D effect.

bordercolordark Attribute of the Table tag used to define the darker color of a border
having a 3D effect.

td Tag defining data within an HTML table cell.

<td></td>

Prepared By: Ms. Poonam Saini Page 7

tr Tag defining a row in an HTML table.
<tr></tr>

Title Tag defining the title of the HTML document (web page).
<title></title>

U Tag used to specify underlined text.

<u></u>

ul Tag used to define an unordered list, which means items in the lift will
appear as bullet points.
<ul></ul>

Top Ten Mistakes in Web Design

Summary:
The ten most egregious offenses against users. Web design disasters and
HTML horrors are legion, though many usability atrocities are less common
than they used to be.

Since my first attempt in 1996, I have compiled many top-10 lists of the biggest
mistakes in Web design. See links to all these lists at the bottom of this article.
This article presents the highlights: the very worst mistakes of Web design. 7.)

Prepared By: Ms. Poonam Saini Page 8

1. Bad Search
Overly literal search engines reduce usability in that they're unable to handle typos,
plurals, hyphens, and other variants of the query terms. Such search engines
are particularly difficult for elderly users, but they hurt everybody.
A related problem is when search engines prioritize results purely on the basis of how
many query terms they contain, rather than on each document's importance. Much better
if your search engine calls out "best bets" at the top of the list -- especially for important
queries, such as the names of your products.
Search is the user's lifeline when navigation fails. Even though advanced search can
sometimes help,simple search usually works best, and search should be presented as a
simple box, since that's what users are looking for.

2. PDF Files for Online Reading

Prepared By: Ms. Poonam Saini Page 9

Users hate coming across a PDF file while browsing, because it breaks their flow. Even
simple things like printing or saving documents are difficult because standard browser
commands don't work. Layouts are often optimized for a sheet of paper, which rarely
matches the size of the user's browser window. Bye-bye smooth scrolling. Hello tiny
fonts.
Worst of all, PDF is an undifferentiated blob of content that's hard to navigate.
PDF is great for printing and for distributing manuals and other big documents that need
to be printed. Reserve it for this purpose and convert any information that needs to be
browsed or read on the screen into real web pages.

3. Not Changing the Color of Visited Links

A good grasp of past navigation helps you understand your current location, since it's the
culmination of your journey. Knowing your past and present locations in turn makes it
easier to decide where to go next. Links are a key factor in this navigation process. Users
can exclude links that proved fruitless in their earlier visits. Conversely, they might
revisit links they found helpful in the past.
Most important, knowing which pages they've already visited frees users from
unintentionally revisiting the same pages over and over again.
These benefits only accrue under one important assumption: that users can tell the
difference between visited and unvisited links because the site shows them in different
colors. When visited links don't change color, users exhibit more navigational
disorientation in usability testing and unintentionally revisit the same pages repeatedly.

4. Non-Scannable Text
A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to
read.
To draw users into the text and support scannability, use well-documented tricks:
subheads
bulleted lists
highlighted keywords
short paragraphs
the inverted pyramid
a simple writing style, and
de-fluffed language devoid of marketese.

5. Fixed Font Size

Prepared By: Ms. Poonam Saini Page 10

CSS style sheets unfortunately give websites the power to disable a Web browser's
"change font size" button and specify a fixed font size. About 95% of the time, this fixed
size is tiny, reducing readability significantly for most people over the age of 40.
Respect the user's preferences and let them resize text as needed. Also, specify font sizes
in relative terms -- not as an absolute number of pixels.

6. Page Titles with Low Search Engine Visibility

Search is the most important way users discover websites. Search is also one of the most
important ways users find their way around individual websites. The humble page title is
your main tool to attract new visitors from search listings and to help your existing users
to locate the specific pages that they need.
The page title is contained within the HTML <title> tag and is almost always used as the
clickable headline for listings on search engine result pages (SERP). Search engines
typically show the first 66 characters or so of the title, so it's truly micro content.
Page titles are also used as the default entry in the Favorites when users bookmark a site.
For your homepage, begin the with the company name, followed by a brief description of
the site. Don't start with words like "The" or "Welcome to" unless you want to be
alphabetized under "T" or "W."
For other pages than the homepage, start the title with a few of the most salient
information-carrying words that describe the specifics of what users will find on that
page. Since the page title is used as the window title in the browser, it's also used as the
label for that window in the taskbar under Windows, meaning that advanced users will
move between multiple windows under the guidance of the first one or two words of each
page title. If all your page titles start with the same words, you have severely reduced
usability for your multi-windowing users.

7. Anything That Looks Like an Advertisement

Selective attention is very powerful, and Web users have learned to stop paying attention
to any ads that get in the way of their goal-driven navigation. (The main exception
being text-only search-engine ads.)
Unfortunately, users also ignore legitimate design elements that look like prevalent forms
of advertising. After all, when you ignore something, you don't study it in detail to find
out what it is.
Therefore, it is best to avoid any designs that look like advertisements. The exact
implications of this guideline will vary with new forms of ads; currently follow these
rules:
banner blindness means that users never fixate their eyes on anything that looks like a
banner ad due to shape or position on the page
animation avoidance makes users ignore areas with blinking or flashing text or other
aggressive animations
pop-up purges mean that users close pop-up windoids before they have even fully
rendered; sometimes with great viciousness (a sort of getting-back-at-GeoCities triumph).

Prepared By: Ms. Poonam Saini Page 11

8. Violating Design Conventions
Consistency is one of the most powerful usability principles: when things always behave
the same, users don't have to worry about what will happen. Instead, they know what will
happen based on earlier experience. Every time you release an apple over Sir Isaac
Newton, it will drop on his head. That's good.

The more users' expectations prove right, the more they will feel in control of the system
and the more they will like it. And the more the system breaks users' expectations, the
more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a
tomato and jump a mile into the sky.

Jakob's Law of the Web User Experience states that "users spend most of their time
onother websites."

This means that they form their expectations for your site based on what's commonly
done on most other sites. If you deviate, your site will be harder to use and users will
leave.

9. Opening New Browser Windows

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit
by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more
windows, thanks (particularly since current operating systems have miserable window
management).

Designers open new browser windows on the theory that it keeps users on their site. But
even disregarding the user-hostile message implied in taking over the user's machine,
the strategy is self-defeating since it disables the Back button which is the normal way
users return to previous sites. Users often don't notice that a new window has opened,
especially if they are using a small monitor where the windows are maximized to fill up
the screen. So a user who tries to return to the origin will be confused by a grayed
out Back button.

Links that don't behave as expected undermine users' understanding of their own system.
A link should be a simple hypertext reference that replaces the current page with new
content. Users hate unwarranted pop-up windows. When they want the destination to
appear in a new page, they can use their browser's "open in new window" command --

Prepared By: Ms. Poonam Saini Page 12

assuming, of course, that the link is not a piece of code that interferes with the browser’s

standard behavior.

10. Not Answering Users' Questions

Users are highly goal-driven on the Web. They visit sites because there's
something they want to accomplish -- maybe even buy your product. The
ultimate failure of a website is to fail to provide the information users are
looking for.

Sometimes the answer is simply not there and you lose the sale because users
have to assume that your product or service doesn't meet their needs if you
don't tell them the specifics. Other times the specifics are buried under a thick
layer of marketese and bland slogans. Since users don't have time to read
everything, such hidden info might almost as well not be there.

The worst example of not answering users' questions is to avoid listing the
price of products and services. No B2C ecommerce site would make this
mistake, but it's rife in B2B, where most "enterprise solutions" are presented so
that you can't tell whether they are suited for 100 people or 100,000 people.

Prepared By: Ms. Poonam Saini Page 13

Price is the most specific piece of info customers use to understand the nature
of an offering, and not providing it makes people feel lost and reduces their
understanding of a product line. We have miles of videotape of users
asking "Where's the price?" while tearing their hair out.

Even B2C sites often make the associated mistake of forgetting prices in
product lists, such ascategory pages or search results. Knowing the price is key
in both situations; it lets users differentiate among products and click through to
the most relevant ones.

CSS
Introduction
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files

CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style.

Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.
CSS Example
CSS declarations always ends with a semicolon, and declaration groups are surrounded
by curly brackets:
p {color:red;text-align:center;}
To make the CSS more readable, you can put one declaration on each line, like this:
Example:

Prepared By: Ms. Poonam Saini Page 14

p
{
color:red;
text-align:center;
}

DHTML
DHTML is NOT a Language
DHTML stands for Dynamic HTML.
DHTML is NOT a language or a web standard.
To most people DHTML means the combination of HTML, JavaScript, DOM and CSS.
According to the World Wide Web Consortium (W3C):
"Dynamic HTML is a term used by some vendors to describe the combination of HTML,
style sheets and scripts that allows documents to be animated."

CGI-PERL
The acronym stands for Common Gateway Interface, a rather misleading term to describe
a common format for sending data from a HTML form to a server. A CGI script takes
form data, manipulates it as required, then returns a HTML document 'on the fly' to the
browser.

CGI scripts are usually written in programming languages which are good at
manipulating text ('string handling', in programming jargon), such as Perl, Python, or C.
CGI scripts can be written in any programming language, as long as the program returns
a HTML document, although it's a brave programmer who'd write a CGI script in a
number-crunching language such as FORTRAN!

Prepared By: Ms. Poonam Saini Page 15

Prepared By: Ms. Poonam Saini Page 16
CGI Means
Common - CGI programs can be written with many languages. CGI can be
programmed in C, C++, Java, Perl, Visual Basic, or any other language that can
accept user input, process that input, and respond with output. Further, CGI works
with many different types of systems. CGI works on Mac, NT, Windows, OS2,
Amiga, UNIX, and pretty much every operating system that runs web server
software.

• By the way, if you use a "platform independent" language like Perl or Java to
write your CGI script, the exact same CGI script can be moved directly from one
platform to another without it breaking!
• Gateway - CGI's usefulness does not stem from what it can accomplish by itself,
but what it can accomplish by making partnerships with other resources. I often
see CGI as a middleman or a translator whose job it is to help more powerful
resources like databases, graphics generation programs, or network applications
talk to each other and work towards a common solution.
• CGI is the gateway between the lone web surfer with her trusty web browser and
the vast web of computers (each with their own specific language and protocols)
and computer programs (each with their own interfaces and methods of output).

Prepared By: Ms. Poonam Saini Page 17

 • CGI translates between the language the client speaks (perhaps HTMLized
English) and the multitude of languages spoken by the resources the client wants
to utilize (such as SQL for relational databases). This is a crucial job, cause let me
tell ya, my grandmother does not want to know how to speak SQL when she is
browsing the web!
• Interface - CGI is not a language. Neither is it a program. CGI is a standard of
communication, a process, an interface that provides well-defined rules for
creating partnerships. The benefit is that if everyone follows the rules of the
interface, then everyone can talk to each other. Thus, typically we say that we
write "CGI programs" or "CGI scripts" that perform the functions of the common
gateway interface.

CGI Scripts
The CGI script will be responsible for processing the form data and responding to the
client in the form of dynamically generated HTML.

Perl
• Another cool Perl trick is the use of the "." operator that "appends" a value to an
already existing scalar variable. Thus, the following code would print out "Selena
Sol":
• $name = "Selena" . " Sol"; print "$name"; An alternative shorthand for appending
to scalar variables is using the ".=" operator. For example, the following code
does the same thing as the code above.

$name = "Selena"; $name .= " Sol"; print

“$name\n”;

• Fortunately, Perl provides an easy way to determine how many elements are
contained in an array. When used as a scalar, the list array name will be equal to
the number of elements it contains. Thus, if the list array @available_colors
contains the elements: red, green, blue and brown, then the following line would
set $number_of_colors equal to four.
• $number_of_colors = @available_colors;
• Likewise, you can add to or modify the values of an existing array by simply
referencing the array by number. For example, to add an element to
@available_colors, you might use the following line:
• $available_colors[4] = "orange"; Thus, @available_colors would include the
elements: red, green, blue, brown, and orange.
• You can also use this method to overwrite an element in a list array. To change a
value in @available_colors, you might use the syntax:
• $available_colors[0] = "yellow"; Now, the elements of @available_colors would
be: yellow, green, blue, brown, orange.

Prepared By: Ms. Poonam Saini Page 18

 • Perl invokes a powerful tool for pattern matching that gives the program great
flexibility in controlling matches. In Perl, a string is matched by placing it
between two slashes as follows:
• /[pattern_to_match]/ Thus, /eric/ matches for the string "eric". You may also
match according to whole classes of characters using the square brackets ([]). The
pattern match will then match against any of the characters in the class. For
example, to match for any single even numbered digit, you could use the
following match:
• /[02468]/ For classes including an entire range of characters, you may use the
dash (-) to represent the list. Thus, the following matches any single lower case
letter in the alphabet:
• /[a-z]/ Likewise, you may use the caret (^) character within the square brackets to
match every character that is "not" in the class. The following matches any single
character that is not a digit.
• /[^0-9]/
• Pattern matching can also be used to manipulate variables. In particular, many
CGI scripts take advantage of the "=~" operator in conjunction with the
substitution operator using the format
• $variable_name =~ s/[string_to_remove]/[string_to_add]/gi; For example, if we
want to censor every occurrence of the word "Frack" from the client-defined input
field "comment", we might use the line
• Perl also provides you with all of the file management functions typically offered
by your operating system. In my experience, the three most utilized functions in
CGI scripts are unlink, rename and chmod. unlink is Perl's function for deleting a
file from the file system. The syntax is pretty straight forward.

PHP
Introduction
PHP (recursive acronym for "PHP: Hypertext Preprocessor") is a widely-used Open
Source general-purpose scripting language that is especially suited for Web development
and can be embedded into HTML. PHP is a server side scripting language. Full
information about PHP is available on the WWW at http://www.php.net/. The PHP
language is strongly based on C (not C++) in the Unix environment. It has an significant
influence from perl and the Unix scripting language awk.

Example:
<html>
<head>
<title>Example</title>
</head>
<body>

Prepared By: Ms. Poonam Saini Page 19

 <?php
echo "Hi, I'm a PHP script!";
?>
</body>
</html>

PHP is used for the following:

• Server-side scripting.
• Command line scripting.
• Writing desktop applications

MYSQL
Introduction to Database
A database is a separate application that stores a collection of data. Each database has one
or more distinct APIs for creating, accessing, managing, searching, and replicating the
data it holds.

Other kinds of data stores can be used, such as files on the file system or large hash tables
in memory but data fetching and writing would not be so fast and easy with those type of
systems.

So now a days we use relational database management systems (RDBMS) to store and
manager huge volume of data. This is called relational database because all the data is
stored into different tables and relations are established using primary keys or other keys
known as foreign keys.

A Relational DataBase Management System (RDBMS) is a software that:

Enables you to implement a database with tables, columns, and indexes.

Guarantees the Referential Integrity between rows of various tables.
Updates the indexes automatically.
Interprets an SQL query and combines information from various tables.

RDBMS Terminology:
Before we proceed to explain MySQL database system, lets revise few definitions related
to database.

Database: A database is a collection of tables, with related data.

Prepared By: Ms. Poonam Saini Page 20

 Table: A table is a matrix with data. A table in a database looks like a simple
spreadsheet.
Column: One column (data element) contains data of one and the same kind, for
example the column postcode.
Row: A row (= tuple, entry or record) is a group of related data, for example the
data of one subscription.
Redundancy: Storing data twice, redundantly to make the system faster.
Primary Key: A primary key is unique. A key value can not occur twice in one
table. With a key you can find at most one row.
Foreign Key: A foreign key is the linking pin between two tables.
Compound Key: A compound key (composite key) is a key that consists of
multiple columns, because one column is not sufficiently unique.
Index: An index in a database resembles an index at the back of a book.
Referential Integrity: Referential Integrity makes sure that a foreign key value
always points to an existing row.

MySQL Database:
MySQL is a fast, easy-to-use RDBMS used being used for many small and big
businesses. MySQL is developed, marketed, and supported by MySQL AB, which is a
Swedish company. MySQL is becoming so popular because of many good reasons.

MySQL is released under an open-source license. So you have nothing to pay to

use it.
MySQL is a very powerful program in its own right. It handles a large subset of
the functionality of the most expensive and powerful database packages.
MySQL uses a standard form of the well-known SQL data language.
MySQL works on many operating systems and with many languages including
PHP, PERL, C, C++, JAVA etc.
MySQL works very quickly and works well even with large data sets.
MySQL is very friendly to PHP, the most appriciated language for web
development.
MySQL supports large databases, up to 50 million rows or more in a table. The
default file size limit for a table is 4GB, but you can increase this (if your
operating system can handle it) to a theoretical limit of 8 million terabytes (TB).
MySQL is customizable. The open source GPL license allows programmers to
modify the MySQL software to fit their own specific environments.

Prepared By: Ms. Poonam Saini Page 21

 Lab Exercises
1. HTML Lab Exercises
Before starting this set of exercises you must understand the process of editing HTML.
The most basic method is to use a simple word processor like Note Pad or Word Pad
(found in the Windows Accessories group) or SimpleText for the Mac. Here's the drill:

1. Type your HTML code into the editor.

2. Save the file (you can do this at any point if you want to view your work).
Remember where you save it to.
3. View your work by going to your WWW browser and choosing Open File from
the File Menu and navigate to your saved html file to view it. When you go back
to the editor to make more additions or changes, and then you come back to the
browser, you don't need to re-open the page each time. Use the Refresh or
Reload Button to get the most recent version of your file.
4. Tip: If you leave both the editor and browser open you can toggle back and forth
between them using the alt-tab command or the program buttons on the task bar
(PC only). On a Mac you will need to cascade the two windows.

Basic Tags: Lab Exercise

1. Create a simple HTML document about yourself or a topic of your choice using
the basic tags learned in the first lesson. (Keep it simple for these exercises. You
will be designing a "real" web page later.)
2. Save the document as an .htm file and remember where you saved it (name it
yournamefile1.htm). If you are using a Mac, you should use the .html file
extension.
3. Launch your WWW browser. If you are already in your web browser (reading this
tutorial!), you may want to open a second browser window.
4. View your file in the browser by selecting Open File from the File menu. This
may differ somewhat from browser to browser.
5. Add bold and italic words to your document, save and view.
6. Add a header to your document, save and view.
7. Add paragraph and break tags to your document, save and view.
8. Add a horizontal rule where appropriate, save and view.

Lists: Lab Exercise

1. Add an unordered list to your document, save and view.
2. Add an ordered list to your document, save and view.
3. Add a definition list to your document, save and view.

Prepared By: Ms. Poonam Saini Page 22

Links: Lab Exercise
1. Create a new file called yournamefile2.htm (it can be very basic).
2. Create a link to Yahoo (http://www.yahoo.com).
3. Create a link from yournamefile2.htm to yournamefile1.htm.

Images: Lab Exercise

1. Open one of your HTML files in your editor.
2. Add an image to your document using the tag, <IMG SRC="image.gif"> (Note:
image.gif is a generic name. Your image may be horse.gif or scenery.gif. Also,
the image must be placed in the same directory or folder as your HTML
file. Although the image *can* be in another directory, the way to reference that
image in your image tag isn't a part of this exercise). Save and view. You can
obtain images in several ways:
1. You can save any image off the Internet by clicking on the image (click
and hold down on the Mac til the pop-up menu appears)(right-click for
PC's) and saving it to disk. There are many free resources out there on the
Internet that you can take advantage of. Note that many images are
copyrighted and may not be freely used.
2. You can scan an image and save it as a .gif or .jpg file with image editing
software.
3. You can create your own images with image editing software.
3. Align a short description to the bottom of you image, save and view.
4. Align the description to the top of the image, save and view.

Tables: Lab Exercise

1. Add a simple table to yournamefile1.htm without borders. Make the table with 2
rows and columns, save and view.
2. Add border value of 1, save and view.
3. Add a border value of 5, save and view.
4. Make the top row a table header, save and view.
5. Align all data elements to the middle of their cells, save and view.

Netscape Extensions: Lab Exercise

1. Center one of your headers in yournamefile1.htm, save and view.
2. Center your image, save and view.
3. Align the image to the right, save and view.
4. Put a border around the image with a value of 1; save and view each.
5. Add a horizontal rule that is aligned to the left, is 50% of the width of the page
and has a size value of 5, save and view.
6. Give some text (non-header) a font size value of +3, save and view.

Prepared By: Ms. Poonam Saini Page 23

 7. Put a background color and text color on your page. In order to do this you must
obtain the hexadecimal value for the color you want to use. Click here to view
colors and their associated hexadecimal values. The hex values are at the top of
each color swatch (a 6 digit alpha-numeric number). Just plug the value in at the
appropriate place in your Body tag.

Editors
We have attempted to teach you some of the basic HTML tags in this tutorial. Many
people don't feel that it is important to learn HTML code anymore, since there are many
editors and document converters out there that don't require any knowledge of HTML.
Our experience has been that even with these tools there are often times when you still
need to edit the code to make things look right. There are four basic types of editors:

1. Basic text editors like Wordpad and SimpleText

2. HTML editors that provide many shortcuts to hand coding, but still basically
work with HTML.
3. WYSIWYG (what you see is what you get) editors that add html code
automatically.
4. Document converters that allow conversion of word processor documents and
spreadsheets .

You can find a list of editors on our HTML Resources page.

2. CSS LAB EXCERCISES

1. Create a web page with inline style sheet.
2. Create a web page by embedding a style sheet.
3. Create a web page to show linking its linking with the style sheet.
4. Create a web page by importing a style sheet into it.

3. JAVASCRIPT LAB EXCERCISES

1. Make a very simple web page using a series of document.write() methods to display
image and simple text using JavaScript.
2. Create a web page prompt the user to enter his name and branch and display the
welcome message with the information entered by the user.
3. Write a script to take three numbers from the user and display the greatest number
out of three.
4. Write a script that contains a function that you can pass a letter grade as a parameter
and have it display a passed or failed condition. Demonstrate the functions by printing
out the pass/fail status for five students. This letter grade should be based on the
following:

Prepared By: Ms. Poonam Saini Page 24

 A is a grade of 90 or greater
B is a grade of 80 or greater, but less that 90
C is a grade of 70 or greater, but less than 80
F is any grade below 70
5. Write a script to take an expression from the user and display the result on the page.
6. Set the value of the variable myString equal to "The JavaScript Learning Center is
Great!". Extract a new string from the variable myString that reads "JavaScript is
Great!". Print both strings to the browser.
7. Write a script that will scroll a message at the rate of one character per second..
8. Create web page containing a clock

4. DHTML LAB EXCERCISES

1. Create a web page with a text box and a button. On click of a button a message box is
displayed with the text entered by the user in the textbox
2. Create a web page with some text in using some color. Change the color of the text on
click of a button or on mouse over.
3. Create a web page with changing text after a time interval.
4. Create a web page with a sliding menu on it.
5. Create a web page with a image and a button. On click of a button the image shuld
move horizontally.
6. Create a web page with a image on mouse over the size of the image should be
changed.
7. Create a dynamic page with moving window.

5. Perl/CGI LAB EXCERCISES

1. Write a program to print a hello message.
2. Write a program to split the string.
3. Write a program to multiply the numbers.
4. Write a program to access the file and display its contents.
5. Write a program to find sum of ten numbers using the concept of array.
6. Write a program to display the concept of push and pop operators.

6. PHP and MYSQL LAB EXCERCISES

1. Write a program to print PHP information.

Prepared By: Ms. Poonam Saini Page 25

2. Create a we page HTML and and execute a PHP file on submission of the HTML
form and display the information using PHP.
3. Write a program to ;find the factorial of a number and display.
4. Write a program to implement the concept of if-else and while loop.
5. Write a program to show that array is received on server side during multiple options
in SELECT.
6. Write a program to show the concept of cookie.
7. Write a program to redirect the browser.
8. Write a PHP script showing function call.
9. Write a program in PHP to create a file and write the data into it.
10. Create a database of an employee in MySql.
11. Write a program to connect to the database already created in MySql.
12. Write a program to read, write, update and delete the database using PHP.

Books:

1. Web enabled commercial application development using HTML,DHTML,

JavaScript, Perl CGI, Ivan Bayross, BPB.
2. Learning PHP & MySQL: Step-by-Step Guide to Creating Database-Driven Web
Sites by Michele Davis and Jon Phillips.
3. Web Technologies by Godbole, Tata Mc Graw .
4. Html: Css/ Javascript/ Dhtml (I Performance Series) by Steven E. Callihan
5. Web programming Building Internet Applications, Chris Bates, Wiley
6. http://www.w3schools.com/

Prepared By: Ms. Poonam Saini Page 26