Lab Manual of Web Programming

7/28/2019 Lab Manual of Web Programming

1/57

Marathwada Shikshan Prasarak Mandals

Deogiri Technical Campus for Engineering and Management Studies, Aurangaba

Laboratory Manual

Introduction To Web Programming

For

Second year Students (CSE)

DepartmentOf

Computer Science Engineering.

Prepared by: Mr.P.R.Rathod Approved by: H.O.D. (Dept. of CSE)


2/57

LABORATORY MANUAL CONTENTS

This manual is intended for the Second year students of Computer Science and EngineerinSubject of Introduction to web Programming. This manual typically contains practical/Lab Sessions related wDesigning Various aspects related the subject to enhanced understanding.

Students are advised to thoroughly go through this manual rather than only topics mentioned in syllabus as practical aspects are the key to understanding and conceptual visualization of theoretical aspe

covered in the books.

Good Luck for your Enjoyable Laboratory Sessions.

Subject Teacher. H.O.D.

Prof.P.R.Rathod C.S.E. Dept.


Deogiri Technical Campus for Engineering and Management Studies, Aurangabad



3/57

Sr.

NoTitle of Experiments.

Performed

Dates

Staff

Sign.

Remark

1. To Study of Web design

2. To Study Hyper Text Markup Language structure

3. Design home page which will display your information.

4.

Create Hyperlinks in home page hobbies, Achievement, My

Ideals.

5Use table tag to format web page. Also display educational detailsin tabular format

6

Create Style sheet to set formatting for text tags. Use it in

above pages

7

Design signup form to validate username, password, and

phone numbers etc .using Java script.

8

Develop and demonstrate a DHTML file the includes

JavaScript for using various menu items and submenu items

9Design a web page for departmental information system.

10

Design and Develop a shopping cart using HTML andJavaScript

Theory:-

Website:

A website is a means for you to present information to a global online audience. Websites make tinformation you present or the products you sell more accessible to an immensely large market, now extendi



4/57


5/57

and-mortar world; having that business name does not mean that you also have the shoppremises to go with the name.

o Detailed information on getting a good domain name can be found in the article

Tips on Choosing a Good Domain Name.

o After you read that, you will need to know the steps to registering a domain nameand the things you need to look out for when registering. You can find a detailedguide in the article How to Register Your Own Domain Name.

o It may also be wise to take a look at some of the Important Precautions to Take

When Buying a Domain Name, just so that you don't commit the same mistakesthat some newcomers make when buying a domain name.

2. Domain Registrar:-

A domain is a friendly name which is given to a network address for a server or website.If we all had to remember the network address numbers for our favorites sites it would be a

nightmare. So the DNS (Domain Naming Service) was devised. The Internet DNS is governedby an organization called ICANN. This organization is responsible for the coordination ofdomain names and network addresses on the Internet.

The Registrars are companies or non-profit organizations which maintain and administerthe specific domain extensions. Depending upon the country or extension, there may be morethan one registrar. For example all .uk domains are administered and sold by one registrar,Nominet. Generic TLD's are sold by approximately 50 registrars; some of the more well knownones are Network Solutions, Internet Registrars and Bulk Register. Most registrars prefer not tosell direct to the public, and if they do, they will charge a high price for a domain. Registrarsprefer to sell domains through ISP's (Internet Service Providers) or ICP's (Internet Content

Providers), such as ourselves and other web hosting companies. Because we purchase thedomains in bulk, we get a much better price which can be passed on to you the customer.

3. Choosing hosting services:-

A web host is basically a company that has many computers connected to the Internet.When you place your web pages on their computers, everyone in the world will be able toconnect to it and view them. You will need to sign up for an account with a web host so that yourwebsite has a home. If getting a domain name is analogous to getting a business name in thebrick-and-mortar world, getting a web hosting account is analogous to renting office or shoppremises for your business.

o There are many issues involved in finding a good web host. Read up on thevarious things you need to look for in searching for a good web host in the articleHow to Choose a Web Host.

http://www.thesitewizard.com/archive/domainname.shtmlhttp://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/gettingstarted/precautions-to-take-when-buying-domain-names.shtmlhttp://www.thesitewizard.com/gettingstarted/precautions-to-take-when-buying-domain-names.shtmlhttp://www.icann.org/http://www.nominet.net/http://www.thesitewizard.com/archive/findhost.shtmlhttp://www.thesitewizard.com/archive/domainname.shtmlhttp://www.thesitewizard.com/archive/registerdomain.shtmlhttp://www.thesitewizard.com/gettingstarted/precautions-to-take-when-buying-domain-names.shtmlhttp://www.thesitewizard.com/gettingstarted/precautions-to-take-when-buying-domain-names.shtmlhttp://www.icann.org/http://www.nominet.net/http://www.thesitewizard.com/archive/findhost.shtml


6/57

o After you have an idea of what to look for, you can search for one from the

Budget Web Hosting page. You can also find out which web host I'm currentlyusing from the which Web Host Do You Recommend?

After you sign up for a web hosting account, you will need to point your domain to that accounton your web host. Information on how to do this can be found in the guide How to Point aDomain Name to Your Website (Or What to Do after Buying Your Domain Name).

4. Designing your Web Pages

Once you have settled your domain name and web host, the next step is to design the website itself. In this article, I will assume that you will be doing this yourself. If you are hiring aweb designer to do it for you, you can probably skip this step, since that person will handle it onyour behalf.

Although there are many considerations in web design, as a beginner, your first step is toactually get something out onto the web. The fine-tuning can come after you've figured out howto get a basic web page onto your site. One way is to use a WYSIWYG ("What You See Is WhatYou Get") web editor to do it. Such editors allow you to design your site visually, without havingto muck around with the technical details. They work just like a normal word processor.

5. Submit new site to search engines:-

An integral part of web design is search engine readiness. Search engine promotion doesnot start after the web site is made. It starts at the web design stage. How to Improve YourSearch Engine Ranking on Google is also important for the simple reason that Google is the mostpopular search engine around, at least at the time this article was written.

Conclusion:

Date of performance by

Student

Date of Assessment by

Staff

Staff Signature Remark


Deogiri Institute of Technology and Management Studies

Practical Experiment Instruction SheetDepartment: CSE Subject:INTRODUCTION TO WEB PROGRAMMING Experiment No. : 2

http://www.thefreecountry.com/webhosting/budget1.shtmlhttp://www.thesitewizard.com/archive/webhosting.shtmlhttp://www.thesitewizard.com/archive/webhosting.shtmlhttp://www.thesitewizard.com/domain/point-domain-name-website.shtmlhttp://www.thesitewizard.com/domain/point-domain-name-website.shtmlhttp://www.thesitewizard.com/domain/point-domain-name-website.shtmlhttp://www.thesitewizard.com/archive/google.shtmlhttp://www.thesitewizard.com/archive/google.shtmlhttp://www.thefreecountry.com/webhosting/budget1.shtmlhttp://www.thesitewizard.com/archive/webhosting.shtmlhttp://www.thesitewizard.com/domain/point-domain-name-website.shtmlhttp://www.thesitewizard.com/domain/point-domain-name-website.shtmlhttp://www.thesitewizard.com/archive/google.shtmlhttp://www.thesitewizard.com/archive/google.shtml


7/57

Experiment Title: To Study Introduction of HTML Structure

Theory:

Introduction of HTML Structure

WebPages are written in HTML - a simple scripting language.HTML is short form forHypertext Markup Language.

Hypertext is simply a piece of text that works as a link.

Markup Language is a way of writing layout information within documents.

Basically an HTML document is a plain text file that contains text and nothing else.When a browser opens an HTML file, the browser will look for HTML codes in the text and usethem to change the layout, insert images, or create links to other pages.Since HTML documents are just text files they can be written in even the simplest text editor.

WHY LEARN HTML? :-

It is possible to create WebPages without knowing anything about the HTML sourcebehind the page. There are excellent editors on the market that will take care of the HTML parts.All you need to do is layout the page. However, if you want to make it above average in webdesign, it is strongly recommended that you understand these tags.

Important benefits:

You can use tags the editor does not support.

You can read the code of other people's pages, and "borrow" the cool effects.

You can do the work yourself, when the editor simply refuses to create the effectsyou want.

You can write your HTML by hand with almost any available text editor,including notepad that comes as a standard program with Windows. All you needto do is type in the code, then save the document, making sure to put an .htmlextension or an .htm extension to the file (for instance "mypage.html").

TAGS:-

Basically, a computer sees an "A" as simply an "A" - whether it is bold, italic, big orsmall. To tell the browser that an "A" should be bold we need to put a markup in front of the A.



8/57

Such a markup is called a Tag. All HTML tags are enclosed in < and >.

A tag is a method of formatting HTML documents.

With tags you can create italic orbold characters, make things blink, and can control thecolor and size of the lettering.

Tags can be "nested". This means that you can make something bold and italic andgreenand blinkingby simply surrounding the previous tag with the next.

Tags can be used to insert pictures and graphics.

Tags can be used to create bulleted lists like this one, or numbered lists.

Tags look something like this: chosen text .

All tags use the < and > (less-than and greater-than symbols) to signal the browser. Theseare located above the comma and period keys.

Within a tag, capitalization doesn't matter. is the same as or . Iusually don't bother capitalizing when I use tags. Below, I have used capital letters whenI felt that the number "1" and the letter "l" might be confused.

It is essentialto always close the tags! If not, the formatting will contaminate everythingthat follows it. But don't panic, closing tags is very easy, and even the most experiencedsurfers sometimes forget.

Example: a piece of text as it appears on the screen.

This is an example ofbold text.

HTML: the HTML for the above example:

This is an example of bold text.

As you can see, the start tag indicates that whatever follows should be written in bold. Thecorresponding end tag indicates that the browser should stop writing text in bold.

PAGE STRUCTURE:-

All normal web pages consist of a head and a body.

Head



9/57

Body

The head is used for text and tags that do not show directly on the page.

The body is used for text and tags that are shown directly on the page.

Finally, all web pages have an tag at the beginning and the end, telling the browserwhere the document starts and where it stops.

The most basic code - the code you will use for any page you make, is shown below:

HEAD SECTION:-

The head section of the webpage includes all the stuff that does not show directly on theresulting page.

The and tags encapsulate the title of your page. The title is what shows in the topof your browser window when the page is loaded.Right now it should say something like "Basics - Html Tutorial" on top of the window containingthis text.

BODY SECTION:-

The body of the document contains all that can be seen when the user loads the page. In the restof this tutorial you can learn in detail about all the different aspects of HTML, including:



10/57

1) Text: - Formatting, Resizing, Layout, Listing

2) Links: - To local pages, to pages at other sites, to bookmarks

3) Images: - Inserting images (GIF and jpg) , Adding a link to an image

4) Backgrounds: - Colors, Images, Fixed Image

5) Tables

6) Frames

7) Forms

8) Met tags

9) Hexadecimal Colors

Conclusion:


Student


Staff




11/57

Theory:-

Basic HTML Code:-

The first tag in your HTML document is . This tag tells your browser that this isthe start of an HTML document. The last tag in your document is . This tag tells yourbrowser that this is the end of the HTML document.

Save the file as "mypage.html".

Start your Internet browser. Select "Open" (or "Open Page") in the File menu of yourbrowser. A dialog box will appear. Select "Browse" (or "Choose File") and locate theHTML file you just created - "mypage.htm" - select it and click "Open". Now you shouldsee an address in the dialog box, for example "C:\MyDocuments\mypage.html". ClickOK, and the browser will display the page.

Or write the path in the address window. E.g. C:\ MyDocuments\mypage.html.

Or double-click on icon

HTML tags normally come in pairs like and

The first tag in a pair is the start tag, the second tag is the end tag

The text between the start and end tags is the element content

HTML tags are not case sensitive, means the same as



Deogiri Technical Campus for Engineering and Management Studies.

Practical Experiment Instruction SheetDepartment: CSE Subject: INTRODUCTION TO WEB PROGRAMMING Experiment No. : 3

Experiment Title:Design home page which will display your information.


12/57

Basic Tag Description

Defines an HTML document

Defines the document's body

to Defines header 1 to header 6

Defines a paragraph

Inserts a single line break

Defines a comment

An ordered HTML list Two paragraphs divided by a horizontal line

HTML Code:-

Resume

Sandip Pawar

Plot No:-24, Vasant Nagar,
Aurangabad, Maharastra-431005

9420020094

[email protected]



13/57

Carrier Objective :

To work in a challenging and responsible position where my professional background

can be utilized for the progress of the organization and to update myself with the latesttechnologies, so as to enable myself to establish in future.

Educational Qualification:Master of Engineering in Computer Science and Engineering
College:-Government college, Aurangabad
Bachalor of Engineering in Computer Science and Engineering
College:-M.S.Bidve Engg.college, Aurangabad

Work Experience:

I worked as Assistant Professor in Computer science department form 16 Jan 2007 to 16

may 2010 in SGGS,Nanded.

I worked as search Fellow in SRTMU,Naded till date

Extra Curricular Activity:

International Paper Presentation National conference on e-Governance Microsoft Certified Professional



14/57

Output:-

Conclusion:

Date of performance byStudent

Date of Assessment byStaff




15/57




Experiment Title:To Create Hyperlinks in home page

Theory:

Introduction of Hyperlinks:-

A hyperlink (or link) is a word, group of words, or image that you can click on to jump toa new document or a new section within the current document .When you move the cursor over alink in a Web page, the arrow will turn into a little hand. Links are specified in HTML using the tag.

The tag can be used in two ways:

1. To create a link to another document, by using the href attribute

2. To create a bookmark inside a document, by using the name attribute

HTML Link Syntax:-

The HTML code for a link is simple. It looks like this:

Link text

The href attribute specifies the destination of a link.

Example

Visit W3Schoolswhich will display like this: Visit W3Schools

Clicking on this hyperlink will send the user to W3Schools' homepage.

The "Link text" doesn't have to be text. It can be an image or any other HTML element.

...

By clicking the following text or link, we can go the next page.

Go to the next page

http://www.w3schools.com/http://www.w3schools.com/


16/57

On execution of html code, the page is displayed as

The web browser shows the above example as-

By clicking the following text or link, we can go the nextpage.

Go to the next page

HTML Links - The target Attribute:-

The target attribute specifies where to open the linked document.

The example below will open the linked document in a new browser window or a new tab:

Example

Visit W3Schools!

Opening of a page in another Window:

The above example shows the opening of a hyperlinked page in the same window. The desiredpage can also be opened in a new window. The code will be like this-

open the page in new window...


open the page innew window

The web browser will display this as-


http://www.roseidia.net/http://www.roseidia.net/


17/57


18/57


International Paper Presentation

National conference on e-GovernanceMicrosoft Certified Professional



19/57

Output:-

Conclusion:-


Student


Staff




20/57




Experiment Title: Use table tag to format web page

Theory:-

HTML Tables:-

Tables are defined with the tag.

A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). td stands for "table data," and holds the content of a data cell. A tag can containtext, links, images, lists, forms, other tables, etc.

Table Example

row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2

How the HTML code above looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2



21/57

HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes

this can be useful, but most of the time, we want the borders to show.

To display a table with borders, specify the border attribute:

Row 1, cell 1Row 1, cell 2

HTML Table HeadersHeader information in a table are defined with the tag.

All major browsers display the text in the element as bold and centered.

Header 1Header 2row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2

How the HTML code above looks in your browser:

Header 1 Header 2

row 1, cell 1 row 1, cell 2row 2, cell 1 row 2, cell 2



22/57

Html Code:-

Resume

Sandip Pawar

Plot No:-24,Vasant Nagar,
Aurangabad,Maharastra-431005

9420020094
[email protected]

Carrier Objective:

To work in a challenging and responsible position where my professional backgroundcan be utilized for the progress of the organization and to update myself with the latesttechnologies,so as to enable myself to establish in future.

college:-Goverment college,Aurangabad
college:-M.S.Bidve Engg.college,Aurangabad

ClassPercentage

First year,second Divison



23/57

Second yearFirst division

Third yearFirst division

Final yearDistinction

Work Experience:

I worked as Assistant Professor in Computer science department form 16 Jan 2007 to 16 may2010 in SGGS,Nanded.






24/57

Output:-

Conclusion:-






25/57




Experiment Title: Create Style sheet to set formatting for text tags

Theory:-

HTML Styles - CSS

CSS was introduced together with HTML 4, to provide a better way to style HTML elements.

CSS can be added to HTML in the following ways:

a) Inline - using the style attribute in HTML elements

b) Internal - using the element in the section

c) External - using an external CSS file

The preferred way to add CSS to HTML is to put CSS syntax in separate CSS files.

However, in this HTML tutorial we will introduce you to CSS using the style attribute. This isdone to simplify the examples. It also makes it easier for you to edit the code and try it yourself.

a) Inline Styles

An inline style can be used if a unique style is to be applied to one single occurrence of anelement.

To use inline styles, use the style attribute in the relevant tag. The style attribute can contain anyCSS property. The example below shows how to change the text color and the left margin of aparagraph:

This is a paragraph.



26/57

HTML Style Example - Background Color

The background-color property defines the background color for an element:

Example

This is a heading

This is a paragraph.

The background-color property makes the "old" bgcolor attribute obsolete.

HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties define the font, color, and size of the text in anelement:

Example

A heading

A paragraph.

The font-family, color, and font-size properties make the old tag obsolete.



27/57


28/57

HTML Code:-

Resume

Sandip Pawar

Plot No:-24,Vasant Nagar,
Aurangabad,Maharastra-431005

9420020094
[email protected]

Carrier Objective:

To work in a challenging and responsible position where my professional background

can be utilized for the progress of the organization and to update myself with the latesttechnologies,

so as to enable myself to establish in future.

college:-Goverment college,Aurangabad
college:-M.S.Bidve Engg.college,Aurangabad

ClassPercentage

First year,



29/57

second Divison

Second year

First division

Third yearFirst division

Final yearDistinction

Work Experience:

I worked as Assistant Professor in Computer science department form 16 Jan 2007 to 16

may 2010 in SGGS,Nanded.






30/57

Output:-

Conclusion:-


Student


Staff




31/57




Experiment Title: Design Signup form using Java script

Theory:-

What is a Script?

A script is an executable list of commands like macro or batch file created by a scriptinglanguage. Scripts (like PHP, Perl) which are executed on a web server are called server-sidescripts and scripts (like JavaScript) which are executed on user's computer, interpreted by thebrowser is called client-side scripts.

What is JavaScript?

JavaScript is a cross-platform, object-oriented scripting language developed by Netscape.JavaScript was created by Netscape programmerBrendan Eich.

It was first released under the name of Live Script as part of Netscape Navigator 2.0 inSeptember 1995. It was renamed JavaScript on December 4, 1995. As JavaScript works on theclient side, It is mostly used for client-side web development.

JavaScript is designed for use on web pages and closely integrated with HTML. JavaScript cancreate applications which run in the browsers such as IE, Opera, Firefox, Google Chrome andother. Netscape submitted JavaScript to ECMA International for standardization resulting in thestandardized version named ECMAScript.

JavaScript and Java

JavaScript and Java are similar in some ways but fundamentally they are different. Java is aprogramming language developed by Sun Microsystems, Inc. and JavaScript is a scriptinglanguage developed by Netscape. Java is a server-side and static type language. JavaScript is aclient-side, dynamically typed language. Java programs are compiled on the server and run onalmost every platform without distribution of source code where as scripts written in JavaScriptare placed inside a HTML document and interpreted by the browser. The syntax, reserved-wordsof JavaScript and Java are also different.



32/57

JavaScript compare to Java

JavaScriptJava

JavaScript is used for front-end web

development (for example field levelvalidation in a HTML form).

Java is used as a back-end language

within a web environment.

Interpreted (not compiled) by client. Compiled bytecodes downloaded from

server, executed on client.

Object-oriented. No distinction

between types of objects. Inheritance is

through the prototype mechanism, and

properties and methods can be added

to any object dynamically.

Class-based. Objects are divided into

classes and instances with all

inheritance through the class

hierarchy. Classes and instances

cannot have properties or methods

added dynamically.

Variable data types not declared (loose

typing).

Variable data types must be declared

as Java maintains strong typechecking.

Cannot automatically write to hard

disk.

Cannot automatically write to hard

disk.

What can we do with JavaScript?

Control the appearance of elements on your web page

Every web page is a collection of several individual elements which are called objects like animage, a link etc.

JavaScript is capable of controlling the appearance of many objects. For example you can opennew pages in customized windows where you can specify their size, determine whether theyhave scroll bars or not etc.

JavaScript responds user actions on your web pages

JavaScript can control objects on web pages in response to various actions taken by the userwhich is called event. For example display a dialog box when an user clicks on a button, opening



33/57

a new page, mouse over on a link to change the appearance of the link or control the backgroundcolor of your web pages.

Display various date time format

JavaScript has the ability to retrieve the date and time of your computer's clock and it is enable todisplay various formatting of date-time through its internal date object.

Perform calculations

JavaScript can perform wide variety of mathematical calculations. It has a library of all themathematical constants and functions needed. These functions can be applied in different ways,for example an online financial transaction where JavaScript can be used to calculate subtotal,total etc, or an online calculator or creating games and interactive simulations with advance mathfunctions such as sine and cosine.

Validate forms data

JavaScript can be used to validate form data including names, addresses, URL, email addresses,phone numbers, zip codes etc. in html forms before sending the data to a server. If you want tovalidate the said data in server side you have to wait while the information is sent up to theserver for checking, using JavaScript you can detect the error and prompt the user immediately.

Create Cookies

A cookie is a mechanism in a web browser where a simple text sent to the visitors' computer. Asit is a piece of text, cookies are not executable. JavaScript can store information from this pieceof text on visitor's computer and reuse it automatically next time the user visits the same page.

Detect the visitor's browser

Sometimes it is difficult to create pages that are displayed identical on different browsers or evenoperating systems. JavaScript can detect the visitor's browser and load the appropriate page forthat specific browser.

Dynamic HTML

Dynamic HTML, or DHTML, is a collection of technologies used together to make interactiveand animated web site by using a combination of JavaScript, HTML, DOM (Document objectmodule) and CSS.



34/57

JavaScript Code:-

html>Form Validation

function checkEmail() {if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value)){

return true;}return false;

}function checkName(str){

var re = /[^a-zA-Z]/gif (re.test(str)) return false;return true;

}

function checkAddress(str){var re = /[^[a-z][A-Z][0-9]]/gif(re.test(str)) return false;return true;

}function validate(){var emailID=document.form.email;var nn=document.form.name;

var add=document.form.address;

if((nn.value==null)||(nn.value=="")){alert("Please Enter your Name!")nn.focus();return false}if(checkName(nn.value)==false){nn.value=""



35/57

alert("Invalid Name!");nn.focus()return false}if((emailID.value==null)||(emailID.value=="")){

alert("Please Enter your Email ID!")emailID.focus()return false}if (checkEmail(emailID.value)==false){emailID.value=""alert("Invalid Email Adderess!");emailID.focus()return false}if ((add.value==null)||(add.value=="")){

alert("Please Enter your Address!")add.focus()return false}if (checkAddress(add.value)==false){add.value=""alert("Invalid Adderess!");add.focus()return false}if(document.form.qua.selectedIndex==""){alert ( "Please select your qualification!" );

return false;}

return true}

Enter Name:
Enter an Email Address :
Enter Address
Select Qualification:

BTechMBBSMBAMCA



36/57

Output:-



37/57

Conclusion:-







Experiment Title: Develop and demonstrate a DHTML file the includes JavaScript for menu items

and submenu items

Theory:-

Introduction to DHTML:-

This page is an introduction to DHTML. Dynamic HTML was a marketing term used bythe makers of theNetscape Navigatorbrowser and the Internet Explorerbrowser, to describe the"new" technologies that these browsers in the 4.x generation would support. The tables below listthe technologies comprising what was termed DHTML or Dynamic HTML at the time that the

version 4.x browsers (NN and IE) were released.

Dynamic HTML is composed of a series of technologies which have helped to make Webpages interactive. The technologies comprising DHTML will be evolving. New technologies willbe added from time to time. Fifteen years from now, of the technologies currently discussed inthis article -- some will have become obsolete and new ones will have been added. Think of"dynamic" HTML as changing, evolving, improving over time as new technologies becomeavailable for Web developers and as more bandwidth becomes available to home users.

DHTML is a set of initials representing Dynamic HTML, or Dynamic Hypertext MarkupLanguage. It is pronounced just by saying the letters, d,h,t,m,l. DHTML was originally a

marketing term created by Microsoft and Netscape to refer to a suite of technologies supportedby the fourth generation browsers, Netscape Navigator 4.x and Microsoft Internet Explorer 4.x.The technologies of DHTML, named in Table 1, enhance the "dynamic" capabilities of these twobrowsers. With DHTML the web page designer controls how the various HTML elements aredisplayed and positioned in the window. The position of an element may be changed even after

http://www.hitmill.com/internet/browsers.html#netschttp://www.hitmill.com/internet/browsers.html#microhttp://www.hitmill.com/internet/browsers.html#netschttp://www.hitmill.com/internet/browsers.html#micro


38/57

the document has loaded. Content can be made to appear and disappear as needed. The documentcan react and change -- even from actions initiated by the web page visitor, the end-user.

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."

DHTML Example:-

body{font-family:arial;}table{font-size:80%;background:black}a{color:black;text-decoration:none;font:bold}a:hover{color:#606060}td.menu{background:lightblue}table.menu{font-size:100%;position:absolute;

visibility:hidden;}function showmenu(elmnt){document.getElementById(elmnt).style.visibility="visible";}function hidemenu(elmnt){document.getElementById(elmnt).style.visibility="hidden";

}



39/57

Drop down menuTutorials

HTMLCSSXMLXSLScripting
JavaScript

VBScriptDHTMLASPADOValidation
Validate HTMLValidate XHTMLValidate CSSValidate XMLValidate WML

Mouse over these options to see the drop down menus



40/57

Output:-

Conclusion:-



41/57


Student


Staff





Experiment Title Design a web page for departmental information system.

Theory:-

Website:-

web site, or simply site, is a set of related web pages containing content such as text,images, video, audio, etc. A website is hosted on at least one web server, accessible via anetwork such as the Internet or a private local area networkthrough an Internet address known asa Uniform Resource Locator. All publicly accessible websites collectively constitute the WorldWide Web.

Webpage:-

It is a document, typically written in plain text interspersed with formatting instructionsof Hypertext Markup Language (HTML, XHTML). A webpage may incorporate elements fromother websites with suitable markup anchors. Web pages are accessed and transported with theHypertext Transfer Protocol (HTTP), which may optionally employ encryption (HTTP Secure,HTTPS) to provide security and privacy for the user of the webpage content. The user'sapplication, often a web browser, renders the page content according to its HTML markupinstructions onto a display terminal.

The pages of a website can usually be accessed from a simple Uniform Resource Locator (URL)called the web address. The URLs of the pages organize them into a hierarchy, although hyperlinking between them conveys the reader's perceived site structure and guides the reader'snavigation of the site which generally includes a home page with most of the links to the site'sweb content, and a supplementary about,contact and link page.

Web Server:-

http://en.wikipedia.org/wiki/Web_pagehttp://en.wikipedia.org/wiki/Content_(media)http://en.wikipedia.org/wiki/Written_languagehttp://en.wikipedia.org/wiki/Imagehttp://en.wikipedia.org/wiki/Videohttp://en.wikipedia.org/wiki/Soundhttp://en.wikipedia.org/wiki/Web_serverhttp://en.wikipedia.org/wiki/Internethttp://en.wikipedia.org/wiki/Local_area_networkhttp://en.wikipedia.org/wiki/Uniform_Resource_Locatorhttp://en.wikipedia.org/wiki/World_Wide_Webhttp://en.wikipedia.org/wiki/World_Wide_Webhttp://en.wikipedia.org/wiki/Documenthttp://en.wikipedia.org/wiki/Plain_texthttp://en.wikipedia.org/wiki/HTMLhttp://en.wikipedia.org/wiki/XHTMLhttp://en.wikipedia.org/wiki/HTML_anchorhttp://en.wikipedia.org/wiki/Hypertext_Transfer_Protocolhttp://en.wikipedia.org/wiki/HTTP_Securehttp://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/Computer_monitorhttp://en.wikipedia.org/wiki/Web_addresshttp://en.wikipedia.org/wiki/Hyperlinkhttp://en.wikipedia.org/wiki/Hyperlinkhttp://en.wikipedia.org/wiki/Site_maphttp://en.wikipedia.org/wiki/Home_pagehttp://en.wikipedia.org/wiki/Web_contenthttp://en.wikipedia.org/wiki/About_pagehttp://en.wikipedia.org/wiki/Contact_pagehttp://en.wikipedia.org/wiki/Link_pagehttp://en.wikipedia.org/wiki/Web_pagehttp://en.wikipedia.org/wiki/Content_(media)http://en.wikipedia.org/wiki/Written_languagehttp://en.wikipedia.org/wiki/Imagehttp://en.wikipedia.org/wiki/Videohttp://en.wikipedia.org/wiki/Soundhttp://en.wikipedia.org/wiki/Web_serverhttp://en.wikipedia.org/wiki/Internethttp://en.wikipedia.org/wiki/Local_area_networkhttp://en.wikipedia.org/wiki/Uniform_Resource_Locatorhttp://en.wikipedia.org/wiki/World_Wide_Webhttp://en.wikipedia.org/wiki/World_Wide_Webhttp://en.wikipedia.org/wiki/Documenthttp://en.wikipedia.org/wiki/Plain_texthttp://en.wikipedia.org/wiki/HTMLhttp://en.wikipedia.org/wiki/XHTMLhttp://en.wikipedia.org/wiki/HTML_anchorhttp://en.wikipedia.org/wiki/Hypertext_Transfer_Protocolhttp://en.wikipedia.org/wiki/HTTP_Securehttp://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/Computer_monitorhttp://en.wikipedia.org/wiki/Web_addresshttp://en.wikipedia.org/wiki/Hyperlinkhttp://en.wikipedia.org/wiki/Hyperlinkhttp://en.wikipedia.org/wiki/Site_maphttp://en.wikipedia.org/wiki/Home_pagehttp://en.wikipedia.org/wiki/Web_contenthttp://en.wikipedia.org/wiki/About_pagehttp://en.wikipedia.org/wiki/Contact_pagehttp://en.wikipedia.org/wiki/Link_page


42/57

Web server can refer to either the hardware (the computer) or the software (the computerapplication) that helps to deliver Web content that can be accessed through the Internet. Themost common use of web servers is to host websites, but there are other uses such as gaming,data storage or running enterprise applications.

Essential Principles for Good Web Design:-

1. Precedence (Guiding the Eye)

Good Web design, perhaps even more than other type of design, is about information.One of the biggest tools in your arsenal to do this isprecedence. When navigating a good design,the user should be led around the screen by the designer. I call this precedence, and its about

how much visual weight different parts of your design have.A simple example of precedence is that in most sites, the first thing you see is the logo. This isoften because its large and set at what has been shown in studies to be the first place people look(the top left). his is a good thing since you probably want a user to immediately know what sitethey are viewing.

But precedence should go much further. You should direct the users eyes through a sequence ofsteps. For example, you might want your user to go from logo/brand to a primary positioningstatement, next to a punchy image (to give the site personality), then to the main body text, withnavigation and a sidebar taking a secondary position in the sequence.

What your user should be looking at is up to you, the Web designer, to figure out.

To achieve precedence you have many tools at your disposal:

Position Where something is on a page clearly influences in what order the user sees

it.

Color Using bold and subtle colors is a simple way to tell your user where to look.

Contrast Being different makes things stand out, while being the same makes them

secondary.

Size Big takes precedence over little (unless everything is big, in which case little

might stand out thanks to Contrast)

Design Elements if there is a gigantic arrow pointing at something, guess where the

user will look?

http://en.wikipedia.org/wiki/Computer_hardwarehttp://en.wikipedia.org/wiki/Softwarehttp://en.wikipedia.org/wiki/Web_contenthttp://en.wikipedia.org/wiki/Internethttp://en.wikipedia.org/wiki/Websitehttp://en.wikipedia.org/wiki/Online_gamehttp://en.wikipedia.org/wiki/Enterprise_softwarehttp://en.wikipedia.org/wiki/Computer_hardwarehttp://en.wikipedia.org/wiki/Softwarehttp://en.wikipedia.org/wiki/Web_contenthttp://en.wikipedia.org/wiki/Internethttp://en.wikipedia.org/wiki/Websitehttp://en.wikipedia.org/wiki/Online_gamehttp://en.wikipedia.org/wiki/Enterprise_software


43/57

2. Spacing

When I first started designing I wanted to fill every available space up with stuff. Emptyspace seemed wasteful. In fact the opposite is true. Spacing makes things clearer. In Web designthere are three aspects of space that you should be considering:

Line Spacing

When you lay text out, the space between the lines directly affects how readable it appears. Toolittle space makes it easy for your eye to spill over from one line to the next, too much spacemeans that when you finish one line of text and go to the next your eye can get lost. So you needto find a happy medium. You can control line spacing in CSS with the line-height selector.Generally I find the default value is usually too little spacing. Line Spacing is technically calledleading(pronounced lading), which derives from the process that printers used to use to separate

lines of text in ye old days by placing bars of lead between the lines.

Padding

Generally speaking text should never touch other elements. Images, for example, should not betouching text, neither should borders or tables.Padding is the space between elements and text. The simple rule here is that you should alwayshave space there. There are exceptions of course, in particular if the text is some sort ofheading/graphic or your name is David Carson :-) But as a general rule, putting space betweentext and the rest of the world makes it infinitely more readable and pleasant.

White Space

First of all, white space doesnt need to be white. The term simply refers to empty space on apage (or negative space as its sometimes called). White space is used to give balance, proportionand contrast to a page. A lot of white space tends to make things seem more elegant and upmarket, so for example if you go to an expensive architect site, youll almost always see a lot ofspace. If you want to learn to use whitespace effectively, go through a magazine and look at howadverts are laid out. Ads for big brands of watches and cars and the like tend to have a lot ofempty space used as an element of design.

3. Navigation

One of the most frustrating experiences you can have on a Web site is being unable tofigure out where to go or where you are. Id like to think that for most Web designers, navigationis a concept weve managed to master, but I still find some pretty bad examples out there. Thereare two aspects of navigation to keep in mind:

http://en.wikipedia.org/wiki/David_Carson_(graphic_designer)http://www.marchesepartners.com/site/http://en.wikipedia.org/wiki/David_Carson_(graphic_designer)http://www.marchesepartners.com/site/


44/57

Navigation where can you go?

There are a few commonsense rules to remember here. Buttons to travel around a site should beeasy to find towards the top of the page and easy to identify. They should look like navigationbuttons and be well described. The text of a button should be pretty clear as to where its takingyou. Aside from the common sense, its also important to make navigation usable. For example,if you have a rollover sub-menu, ensuring a person can get to the sub-menu items without losingthe rollover is important. Similarly changing the color or image on rollover is excellent feedbackfor a user.

Orientation Where are you now?

There are lots of ways you can orient a user so there is no excuse not to. In small sites, it mightbe just a matter of a big heading or a down version of the appropriate button in your menu. In alarger site, you might make use ofbread crumb trails, sub-headings and a site map for the truly

lost.

4. Design to Build

Life has gotten a lot easier since Web designers transitioned to CSS layouts, but evennow its still important to think about how you are going to build a site when youre still inPhotoshop. Consider things like:

Can it actually be done?

You might have picked an amazing font for your body copy, but is it actually a standardHTML font? You might have a design that looks beautiful but is 1100px wide and will

result in a horizontal scroller for the majority of users. Its important to know what canand cant be done, which is why I believe all Web designers should also build sites, atleast sometimes.

What happens when a screen is resizes?

Do you need repeating backgrounds? How will they work? Is the design centered or left-aligned?

Are you doing anything that is technically difficult?

Even with CSS positioning, some things like vertical alignment are still a bit painful andsometimes best avoided.

Could small changes in your design greatly simplify how you build it?Sometimes moving an object around in a design can make a big difference in how youhave to code your CSS later. In particular, when elements of a design cross over eachother, it adds a little complexity to the build. So if your design has, say three elements

http://en.wikipedia.org/wiki/Breadcrumb_(navigation)http://en.wikipedia.org/wiki/Breadcrumb_(navigation)


45/57

and each element is completely separate from each other, it would be really easy to build.On the other hand if all three overlap each other, it might still be easy, but will probablybe a bit more complicated. You should find a balance between what looks good and smallchanges that can simplify your build.

For large sites, particularly, can you simplify things?

There was a time when I used to make image buttons for my sites. So if there was adownload button, for example, I would make a little download image. In the last year orso, Ive switched to using CSS to make my buttons and have never looked back. Sure, itmeans my buttons dont always have the flexibility I might wish for, but the savings inbuild time from not having to make dozens of little button images are huge.

5. TypographyText is the most common element of design, so its not surprising that a lot of thought has

gone into it. Its important to consider things like:

Font Choices Different types of fonts say different things about a design. Some look

modern, some look retro. Make sure you are using the right tool for the job.

Font sizes Years ago it was trendy to have really small text. Happily, these days

people have started to realize that text is meant to be read, not just looked at. Make sureyour text sizes are consistent, large enough to be read, and proportioned so that headings

and sub-headings stand out appropriately.

Spacing As discussed above, spacing between lines and away from other objects is

important to consider. You should also be thinking about spacing between letters, thoughon the Web this is of less importance, as you dont have that much control.

Line Length There is no hard and fast rule, but generally your lines of text shouldnt

be too long. The longer they are, the harder they are to read. Small columns of text workmuch better (think about how a newspaper lays out text).

Color One of my worst habits is making low-contrast text. It looks good but doesnt

read so well, unfortunately. Still, I seem to do it with every Web site design Ive ever

made, tsk tsk tsk.

Paragraphing Before I started designing, I loved to justify the text in everything. It

made for nice edges on either side of my paragraphs. Unfortunately, justified text tends tocreate weird gaps between words where they have been auto-spaced. This isnt nice for



46/57

your eye when reading, so stick to left-aligned unless you happen to have a magic bodyof text that happens to space out perfectly.

6. UsabilityWeb design aint just about pretty pictures. With so much information and interaction to

be effected on a Web site, its important that you, the designer, provide for it all. That meansmaking your Web site design usable.

Weve already discussed some aspects of usability navigation, precedence, and text. Here arethree more important ones:

Adhering to Standards

There are certain things people expect, and not giving them causes confusion. Forexample, if text has an underline, you expect it to be a link. Doing otherwise is not good

usability practice. Sure, you can break some conventions, but most of your Web siteshould do exactly what people expect it to do!

Think about what users will actually do

Prototyping is a common tool used in design to actually try out a design. This is donebecause often when you actually use a design, you notice little things that make a bigdifference. ALA had an article a while back called Never Use a Warning When YouMean Undo, which is an excellent example of a small interface design decision that canmake life suck for a user.

Think about user tasks

When a user comes to your site what are they actually trying to do? List out the different

types of tasks people might do on a site, how they will achieve them, and how easy youwant to make it for them. This might mean having really common tasks on yourhomepage (e.g. start shopping, learn about what we do, etc.) or it might meanensuring something like having a search box always easily accessible. At the end of theday, your Web design is a tool for people to use, and people dont like using annoyingtools!

7. Alignment

Keeping things lined up is as important in Web design as it is in print design. Thats notto say that everythingshould be in a straight line, but rather that you should go through and try to

keep things consistently placed on a page. Aligning makes your design more ordered anddigestible, as well as making it seem more polished.

You may also wish to base your designs on a specific grid. I must admit I dont do thisconsciously though obviously a site like Psdtuts+ does in fact have a very firm grid structure.

http://en.wikipedia.org/wiki/Website_wireframehttp://alistapart.com/articles/neveruseawarninghttp://alistapart.com/articles/neveruseawarninghttp://en.wikipedia.org/wiki/Website_wireframehttp://alistapart.com/articles/neveruseawarninghttp://alistapart.com/articles/neveruseawarning


47/57

This year Ive seen a few really good articles on grid design including SmashingMagazinesDesigning with Grid-Based Approach & A List Aparts Thinking Outside The Grid. In fact, ifyoure interested in grid design, you should definitely pay a visit to the aptly namedDesignByGrid.com home to all things griddy.

8. Clarity (Sharpness)

Keeping your design crisp and sharp is super important in Web design. And when itcomes to clarity, its all about the pixels.

In your CSS, everything will be pixel perfect so theres nothing to worry about, but in Photoshopit is not so. To achieve a sharp design you have to:

Keep shape edges snapped to pixels. This might involve manually cleaning up shapes,

lines, and boxes if youre creating them in Photoshop.

Make sure any text is created using the appropriate anti-aliasing setting. I use Sharp alot.

Ensuring that contrast is high so that borders are clearly defined.

Over-emphasizing borders just slightly to exaggerate the contrast.

9. Consistency

Consistency means making everything match. Heading sizes, font choices, coloring,

button styles, spacing, design elements, illustration styles, photo choices, etc. Everything shouldbe themed to make your design coherent between pages and on the same page.

Keeping your design consistent is about being professional. Inconsistencies in a design are likespelling mistakes in an essay. They just lower the perception of quality. Whatever your designlooks like, keeping it consistent will always bring it up a notch. Even if its a bad design, at leastmake it a consistent, bad design.

The simplest way to maintain consistency is to make early decisions and stick to them. With areally large site, however, things can change in the design process. When I designed Flash Den,for example, the process took months, and by the end some of my ideas for buttons and imageshad changed, so I had to go back and revise earlier pages to match later ones exactly.

Having a good set of CSS style sheets can also go a long way to making a consistent design. Tryto define core tags like and

in such a way as to make your defaults match properly andavoid having to remember specific class names all the time.

http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/http://alistapart.com/articles/outsidethegridhttp://www.designbygrid.com/http://websitetraining.org/http://activeden.net/?ref=PsdPremiumhttp://activeden.net/?ref=PsdPremiumhttp://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/http://alistapart.com/articles/outsidethegridhttp://www.designbygrid.com/http://websitetraining.org/http://activeden.net/?ref=PsdPremium


48/57

Requirement Computer Department Information:-

1. about us

2. H.O.D

3. Staff

4. Labs

5. Student Association

6. Assignment

7. Achievement

Conclusion:-



49/57


Student


Staff


Marathwada Shikshan Prasarak MandalsDeogiri Institute of Technology and Management Studies


Experiment Title: Design and Develop a shopping cart using HTML and JavaScriptTheory:-

What's A Shopping Cart?

A Shopping Cart is a series of pages that are all linked together through some sort ofprogramming (usually PERL or JavaScript) that allows data to be transferred along with theviewer as he or she moves from page to page.For example: A woman enters a site. That site sells clothing. One page displays the dresses thesite has for sale. Another displays the shoes, and yet another displays the accessories.

The woman clicks to purchase a dress. The purchase is then added to her "Shopping Cart".She then moves to the shoes page and clicks to purchase a pair. That item too is added to herShopping Cart. Finally, she moves to the accessories page and adds a scarf. After choosing theitems she wants to purchase, she clicks on the order page link and a page pops up listing all ofher purchases with a final price added up. That's the concept of a Shopping Cart.

It seems like a rather simple process on this side of the curtain, but behind the scenes, it's

quite a difficult task to get that purchase data to move along from page to page as the viewershops around.

How Does This Shopping Cart Work?

If cookies are a new concept to you, please read the cookie tutorial for a lot of importantinformation. I make that statement because many people believe cookies are the scourge of theInternet high seas. I just see them the same way.

Plus, if you want this Shopping Cart effect, you need to store the information somewhere asthe viewer moves from page to page. The user's cookie is the easiest way to do it without

inventing some new method of writing to the user's hard drive. Cookies are in wide use todayand as long as your user knows you are using them, I don't see the problem. Be honest I alwayssay.

http://www.htmlgoodies.com/tutors/cookie.htmlhttp://www.htmlgoodies.com/tutors/cookie.html


50/57

The Shopping Cart Program

Here's the great thing about this Shopping Cart. It is already fully self-contained and requireslittle assembly from you. In fact, the entire set of pages and programming were sent to me and Iwent in and cut away anything that wasn't specifically needed for the cart to work. I then entereda great deal of comment lines into the code. Every time you need to alter or enter a piece of

information to make this script work for your needs, it is denoted right in the page's code.What you get here is a bare-bones template that will allow you to add your own images, text,

and prices. As long as you do not alter the JavaScript programming, the cart should workstraightaway.

Code:-

Deogiri Market- Worth County Campus - Worth County Campus/* Ryan Blalock (ShoppingCart.htm)

9/29/09 */body {background: transparent url(images/bg.gif) repeat left top; }table {color:white;width: 800px;margin-left: auto;margin-right: auto;font-size: 10pt;font-family: arial,helvetica,sans-serif;background-color: black; }

td#header {font-size: 16pt;text-align: center; }td, th {padding: .3em; }td.align {vertical-align: top; }h1 {width: 775px;height: 125px;font-size: 20pt;

font-family: "bernhardmod BT",serif;padding: 15 15 0 40;background-image: url(logo.png);background-repeat: no-repeat;text-align: center;



51/57

border-bottom: groove thick;margin-bottom: 0; }.center {text-align: center; }tr#black {

color: white;background-color: black;font-weight: bold;text-align: center; }tr#nav {color: black;background: #000 url(images/headergradient.png) repeat-x left bottom;font-weight: bold;text-align: center; }tr#header {color: black;

background-color: #FFF;font-weight: bold;text-align: center; }td#body {color: black;background-color: #FFF;text-align: justify; }button {margin-left: 1em; }var imageclock=new Object()//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:

imageclock.digits=["images/clock/c0.gif", "images/clock/c1.gif", "images/clock/c2.gif","images/clock/c3.gif", "images/clock/c4.gif", "images/clock/c5.gif", "images/clock/c6.gif","images/clock/c7.gif", "images/clock/c8.gif", "images/clock/c9.gif", "images/clock/cam.gif","images/clock/cpm.gif", "images/clock/colon.gif"]

imageclock.instances=0var preloadimages=[]for (var i=0; i


52/57

sections[0]="12"else if (sections[0]>=13)sections[0]=sections[0]-12+""for (var i=0; i=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'

document.getElementById(this.spanid).innerHTML=currenttimeHTML}function checkForm1() {if (document.form1.prod.selectedIndex == 0){alert ("Select literature");return false;}else if (document.form1.qty.selectedIndex == 0){alert ("Select quantity");return false;}else if (document.form1.ship.value == "0.00"){alert ("Select a shipping option");return false;}else return true;}



53/57

Deogiri- Worth County Campus

new imageclock.display()

Navigation:: Home | InformationTechnology | Web Design | Cosmetology | Calendar | CompTIAE-mail us at:document.write("[email protected]");

Welcome to Deogiri - Worth County- campus bookstore.Located on this page, you will find all the literature needed for the Deogiri classes given at theDeogiri- Worth Campus. If, for some reason, the literature that you need is not available on thispage, please try the other Deogiri campuses' bookstores. Literature needed for each quarter ofclasses will vary by teacher, and if any questions are to come to mind, feel free to ask.

Web Design Literature

New Perspectives: Blended HTML,XHTML, and CSS Introductory $73.49

Quantity12345678



54/57

910Add to Cart

New Perspectives:JavaScript $63.49
Quantity1234567
8910Add to Cart

NewPerspectives on Adobe Dreamweaver CS4 $84.49

Quantity12345678910Add to Cart

Adobe PhotoshopCS4: Complete Concepts and Techniques $66.49

Quantity



55/57

12345

678910Add to Cart

Info Tech Literature

Cosmetology
1210 Railway station Roas,Aurangabad-4310005.


56/57

Output:-



57/57

Conclusion:-