Lab Manual of Web Programming

Marathwada Shikshan Prasarak Mandal’s

Deogiri Technical Campus for Engineering and Management Studies, Aurangabad.

Laboratory Manual Introduction To Web Programming

For Second year Students (CSE)

Department Of Computer Science Engineering.

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

LABORATORY MANUAL CONTENTS

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

Students are advised to thoroughly go through this manual rather than only topics mentioned in the syllabus as practical aspects are the key to understanding and conceptual visualization of theoretical aspects covered in the books. Good Luck for your Enjoyable Laboratory Sessions.

Subject Teacher. Prof.P.R.Rathod

H.O.D. C.S.E. Dept.

Marathwada Shikshan Prasarak Mandal’s Deogiri Technical Campus for Engineering and Management Studies, Aurangabad

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Sr. No 1. 2. 3.

Title of Experiments.
To Study of Web design To Study Hyper Text Markup Language structure Design home page which will display your information. Create Hyperlinks in home page hobbies, Achievement, My

Performed Dates

Staff Sign.

Remark

4.

Ideals. Use table tag to format web page. Also display educational details in tabular format Create Style sheet to set formatting for text tags. Use it in above pages

5 6

Design signup form to validate username, password, and

7

phone numbers etc .using Java script.

Develop and demonstrate a DHTML file the includes

8

JavaScript for using various menu items and submenu items

9

Design a web page for departmental information system. Design and Develop a shopping cart using HTML and JavaScript

10

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

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

to billions of people. There are no limits to what can be achieved with your website. A website is essentially a series of documents all linked together in a self-contained environment, much like a book - but to move Marathwada Shikshan Prasarak Mandal’s between pages on a website, we click on hyperlinks rather than turn pages. Unlike a book, a website can be a very dynamic environment offering a personalized reading experience with a high Studies. degree of interactivity. Deogiri Technical Campus for Engineering and Management Need of Website:Practical Experiment Instruction Sheet Every day more and more people are coming online. Every day, people are spending more No. time: online. Department: CSE Subject: INTRODUCTION TO WEB PROGRAMMING Experiment 1 People are becoming more reliant on the Internet not only as a means of direct communication with loved ones, Experiment Title: Introduction to WEB Design but as a source of information, a way to explore new ideas and as a place to buy products and services. Much of the world's business, legal and administrative infrastructure is now highly dependent on the Internet.

Having your own website allows you to: · Share ideas with an audience · Meet people who share common interests · Provide advice or support to visitors and clients · Give your company a more professional image · Market products to an international audience · Provide a wide range of information based services The Essential Step-by-Step Guide to Making Your Own Website:       Choose a domain name Register with a Registrar Choose a hosting service Tell Registrar the IP address Create web content Store (publish) onto hosting server (FTP) Submit new site to search engines

1. Domain Name

The first thing you need to do before anything else is to get yourself a domain name. A domain name is the name you want to give to your website. For example, the domain name of the website you're reading is "thesitewizard.com". To get a domain name, you have to pay an annual fee to a registrar for the right to use that name. Getting a name does not get you a website or anything like that. It's just a name. It's sort of like registering a business name in the brick-

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

and-mortar world; having that business name does not mean that you also have the shop premises 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. After you read that, you will need to know the steps to registering a domain name and the things you need to look out for when registering. You can find a detailed guide in the article How to Register Your Own Domain Name. 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 mistakes that some newcomers make when buying a domain name.

o

o

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 governed by an organization called ICANN. This organization is responsible for the coordination of domain names and network addresses on the Internet. The Registrars are companies or non-profit organizations which maintain and administer the specific domain extensions. Depending upon the country or extension, there may be more than 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 known ones are Network Solutions, Internet Registrars and Bulk Register. Most registrars prefer not to sell direct to the public, and if they do, they will charge a high price for a domain. Registrars prefer 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 the domains 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 to connect to it and view them. You will need to sign up for an account with a web host so that your website has a home. If getting a domain name is analogous to getting a business name in the brick-and-mortar world, getting a web hosting account is analogous to renting office or shop premises for your business.
o

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

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

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 currently using 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 account on your web host. Information on how to do this can be found in the guide How to Point a Domain 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 web site itself. In this article, I will assume that you will be doing this yourself. If you are hiring a web designer to do it for you, you can probably skip this step, since that person will handle it on your behalf. Although there are many considerations in web design, as a beginner, your first step is to actually get something out onto the web. The fine-tuning can come after you've figured out how to get a basic web page onto your site. One way is to use a WYSIWYG ("What You See Is What You Get") web editor to do it. Such editors allow you to design your site visually, without having to 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 does not start after the web site is made. It starts at the web design stage. How to Improve Your Search Engine Ranking on Google is also important for the simple reason that Google is the most popular 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

Marathwada Shikshan Prasarak Mandal’s Deogiri Institute of Technology and Management Studies Practical Experiment Instruction Sheet
Department: CSE Subject: INTRODUCTION TO WEB PROGRAMMING Experiment No. : 2

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

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 for Hypertext 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 use them 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 source behind 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 web design, 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 effects you 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 need to do is type in the code, then save the document, making sure to put an .html extension 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 or small. To tell the browser that an "A" should be bold we need to put a markup in front of the A.

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

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 or bold characters, make things blink, and can control the color and size of the lettering.  Tags can be "nested". This means that you can make something bold and italic and green and blinking by 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: <b> chosen text </b> .  All tags use the < and > (less-than and greater-than symbols) to signal the browser. These are located above the comma and period keys.  Within a tag, capitalization doesn't matter. <FONT> is the same as <font> or <Font> . I usually don't bother capitalizing when I use tags. Below, I have used capital letters when I felt that the number "1" and the letter "l" might be confused.  It is essential to always close the tags! If not, the formatting will contaminate everything that follows it. But don't panic, closing tags is very easy, and even the most experienced surfers sometimes forget. Example: a piece of text as it appears on the screen. This is an example of bold text. HTML: the HTML for the above example: This is an example of <b>bold</b> text.

As you can see, the start tag <b> indicates that whatever follows should be written in bold. The corresponding end tag </b> indicates that the browser should stop writing text in bold.

PAGE STRUCTURE:All normal web pages consist of a head and a body. Head

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

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 <html> tag at the beginning and the end, telling the browser where the document starts and where it stops. The most basic code - the code you will use for any page you make, is shown below:

<html> <head> <!-- This section is for the title and technical info of the page. --> </head> <body> <!-- This section is for all that you want to show on the page. --> </body> </html>

HEAD SECTION:-

The head section of the webpage includes all the stuff that does not show directly on the resulting page. The <title> and </title> tags encapsulate the title of your page. The title is what shows in the top of your browser window when the page is loaded. Right now it should say something like "Basics - Html Tutorial" on top of the window containing this text.

BODY SECTION:-

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

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

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:

Date of performance by Student

Date of Assessment by Staff

Staff Signature

Remark

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Marathwada Shikshan Prasarak Mandal’s Deogiri Technical Campus for Engineering and Management Studies. Practical Experiment Instruction Sheet
Department: CSE Subject: INTRODUCTION TO WEB PROGRAMMING Experiment No. : 3 Experiment Title: Design home page which will display your information. Theory:Basic HTML Code:The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser 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 your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\mypage.html". Click OK, 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 <b> and </b>  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, <b> means the same as <B>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Basic Tag Description  <html> Defines an HTML document  <body> Defines the document's body  <h1> to <h6> Defines header 1 to header 6  <p> Defines a paragraph  <br> Inserts a single line break  <!--> Defines a comment  <ol> An ordered HTML list  <hr> Two paragraphs divided by a horizontal line

HTML Code:<head> <title>Resume</title> </head> <body> <h1>Sandip Pawar </h1> <p> Plot No:-24, Vasant Nagar,<br> Aurangabad, Maharastra-431005 </p> <p> 9420020094<br> [email protected] </p> <hr>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

<H2>Carrier Objective :</H2> <P> 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 latest technologies, so as to enable myself to establish in future.</P> <h2>Educational Qualification:</h2> Master of Engineering in Computer Science and Engineering<br> College:-Government college, Aurangabad<br> Bachalor of Engineering in Computer Science and Engineering<br> College:-M.S.Bidve Engg.college, Aurangabad<br> <h2>Work Experience:</h2> <p>I worked as Assistant Professor in Computer science department form 16 Jan 2007 to 16 may 2010 in SGGS,Nanded.</p> <p>I worked as search Fellow in SRTMU,Naded till date</p> <h2>Extra Curricular Activity:</h2> <ol> <li>International Paper Presentation </li> <li>National conference on e-Governance </li> <li>Microsoft Certified Professional</li> </ol> </body> </html>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Output:-

Conclusion:

Date of performance by Student

Date of Assessment by Staff

Staff Signature

Remark

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Marathwada Shikshan Prasarak Mandal’s Deogiri Institute of Technology and Management Studies Practical Experiment Instruction Sheet
Department: CSE Theory: Introduction of Hyperlinks:A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document .When you move the cursor over a link in a Web page, the arrow will turn into a little hand. Links are specified in HTML using the <a> tag. The <a> 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: <a href="url">Link text</a> The href attribute specifies the destination of a link.
Example

Subject: INTRODUCTION TO WEB PROGRAMMING Experiment Title: To Create Hyperlinks in home page

Experiment No. : 4

<a href="http://www.w3schools.com/">Visit W3Schools</a> which 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. <html> <head><title>...</title></head> <body> <p>By clicking the following text or link, we can go the next page.</p> <p> <a href="http://www.w3schools.com">Go to the next page</a> </p>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

</body> </html> On execution of html code, the page is displayed as The web browser shows the above example asBy clicking the following text or link, we can go the next page. 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 <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Opening of a page in another Window:

The above example shows the opening of a hyperlinked page in the same window. The desired page can also be opened in a new window. The code will be like this<a href="http://www.google.com/" target="_blank">open the page in new window</a> <html> <head><title>...</title></head> <body> <p>By clicking the following text or link, we can go the next page.</p> <p> <a href="http://www.google.com/" target="_blank">open the page in new window</a> </p> </body> </html>
The web browser will display this as-

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

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Open the page in a new window Code:<head> <title>Resume</title> </head> <body> <h1>Sandip Pawar </h1> <p> Plot No:-24,Vasant Nagar,<br> Aurangabad,Maharastra-431005 </p> <p> 9420020094<br> [email protected] </p> <hr> <H2>Carrier Objective:</H2> <P> 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 latest technologies, so as to enable myself to establish in future.</P> <h2>Educational Qualification:</h2> Master of Engineering in Computer Science and Engineering<br> college:-Goverment college,Aurangabad<br> Bachalor of Engineering in Computer Science and Engineering<br> college:-M.S.Bidve Engg.college,Aurangabad<br> <h2>Work Experience:</h2> <p>I worked as Assistant Professor in Computer science department form 16 Jan 2007 to 16 may 2010 in SGGS,Nanded.</p> <p>I worked as search Fellow in SRTMU,Naded till date</p>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

<h2>Extra Curricular Activity:</h2> <ol> <li>International Paper Presentation </li> <li> <a href="http://www.indiaegov.org/eworld.html">National conference on eGovernance</a></li> <li>Microsoft Certified Professional</li> </ol> </body> </html> </html>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Output:-

Conclusion:Date of performance by Student Date of Assessment by Staff Staff Signature Remark

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Marathwada Shikshan Prasarak Mandal’s Deogiri Institute of Technology and Management Studies Practical Experiment Instruction Sheet
Department: CSE Subject: INTRODUCTION TO WEB PROGRAMMING Experiment Title: Use table tag to format web page Experiment No. : 5

Theory:-

HTML Tables:Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

Table Example
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> 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

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

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: <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>

HTML Table Headers
Header information in a table are defined with the <th> tag. All major browsers display the text in the <th> element as bold and centered. <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> How the HTML code above looks in your browser: Header 1 Header 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Html Code:<head> <title>Resume</title> </head> <body> <h1>Sandip Pawar </h1> <p> Plot No:-24,Vasant Nagar,<br> Aurangabad,Maharastra-431005 </p> <p> 9420020094<br> [email protected] </p> <hr> <H2>Carrier Objective:</H2> <P> 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 latest technologies, so as to enable myself to establish in future.</P> <h2>Educational Qualification:</h2> Master of Engineering in Computer Science and Engineering<br> college:-Goverment college,Aurangabad<br> Bachalor of Engineering in Computer Science and Engineering<br> college:-M.S.Bidve Engg.college,Aurangabad<br> <table border="1"> <tr> <th>Class</th> <th>Percentage</th> </tr> <tr> <td>First year,</td> <td>second Divison</td>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

</tr> <tr> <td>Second year</td> <td>First division</td> </tr> <tr> <td>Third year</td> <td>First division</td> </tr> <tr> <td>Final year</td> <td>Distinction</td> </tr></table> <h2>Work Experience:</h2> <p>I worked as Assistant Professor in Computer science department form 16 Jan 2007 to 16 may 2010 in SGGS,Nanded.</p> <p>I worked as search Fellow in SRTMU,Naded till date</p> <h2>Extra Curricular Activity:</h2> <ol> <li>International Paper Presentation </li> <li>National conference on e-Governance </li> <li>Microsoft Certified Professional</li> </ol> </body> </html>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Output:-

Conclusion:Date of performance by Student Date of Assessment by Staff Staff Signature Remark

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Marathwada Shikshan Prasarak Mandal’s Deogiri Institute of Technology and Management Studies Practical Experiment Instruction Sheet
Department: CSE Subject: INTRODUCTION TO WEB PROGRAMMING Experiment No. : 6 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) b) c)

Inline - using the style attribute in HTML elements Internal - using the <style> element in the <head> section 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 is done 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 an element. To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph: <p style="color:blue;margin-left:20px;">This is a paragraph.</p>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

HTML Style Example - Background Color
The background-color property defines the background color for an element:

Example
<!DOCTYPE html> <html> <body style="background-color: yellow;"> <h2 style="background-color: red;">This is a heading</h2> <p style="background-color: green;">This is a paragraph.</p> </body> </html> 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 an element:

Example
<!DOCTYPE html> <html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html> The font-family, color, and font-size properties make the old <font> tag obsolete.

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

HTML Style Example - Text Alignment
The text-align property specifies the horizontal alignment of text in an element:

Example
<! DOCTYPE html> <html> <body> <h1 style="text-align: center ;"> Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html> The text-align property makes the old <center> tag obsolete.

b) Internal Style Sheet
An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this: <head> <style type="text/css"> body {background-color: yellow ;} p {color: blue;} </style> </head>

c) External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

HTML Style Tags
Tag Description <style> Defines style information for a document <link /> Defines the relationship between a document and an external resource

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

HTML Code:<head> <title>Resume</title> </head> <body> <body style="background-color:green;"> </body> <h1 style="background-color:yellow;font-family:times;text aligin:right">Sandip Pawar</h1> <p> Plot No:-24,Vasant Nagar,<br> Aurangabad,Maharastra-431005 </p> <p> 9420020094<br> [email protected] </p> <hr> <H2>Carrier Objective:</H2> <P> 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 latest technologies, so as to enable myself to establish in future.</P> <h2>Educational Qualification:</h2> Master of Engineering in Computer Science and Engineering<br> college:-Goverment college,Aurangabad<br> Bachalor of Engineering in Computer Science and Engineering<br> college:-M.S.Bidve Engg.college,Aurangabad<br> <table border="1"> <tr> <th>Class</th> <th>Percentage</th> </tr> <tr> <td>First year,</td>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

<td>second Divison</td> </tr> <tr> <td>Second year</td> <td>First division</td> </tr> <tr> <td>Third year</td> <td>First division</td> </tr> <tr> <td>Final year</td> <td>Distinction</td> </tr></table> <h2>Work Experience:</h2> <p>I worked as Assistant Professor in Computer science department form 16 Jan 2007 to 16 may 2010 in SGGS,Nanded.</p> <p>I worked as search Fellow in SRTMU,Naded till date</p> <h2>Extra Curricular Activity:</h2> <ol> <li>International Paper Presentation </li> <li>National conference on e-Governance </li> <li>Microsoft Certified Professional</li> </ol> </body> </html>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Output:-

Conclusion:-

Date of performance by Student

Date of Assessment by Staff

Staff Signature

Remark

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Marathwada Shikshan Prasarak Mandal’s Deogiri Institute of Technology and Management Studies Practical Experiment Instruction Sheet
Department: CSE Theory:What is a Script? A script is an executable list of commands like macro or batch file created by a scripting language. Scripts (like PHP, Perl) which are executed on a web server are called server-side scripts and scripts (like JavaScript) which are executed on user's computer, interpreted by the browser 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 programmer Brendan Eich. It was first released under the name of Live Script as part of Netscape Navigator 2.0 in September 1995. It was renamed JavaScript on December 4, 1995. As JavaScript works on the client side, It is mostly used for client-side web development. JavaScript is designed for use on web pages and closely integrated with HTML. JavaScript can create applications which run in the browsers such as IE, Opera, Firefox, Google Chrome and other. Netscape submitted JavaScript to ECMA International for standardization resulting in the standardized version named ECMAScript. JavaScript and Java JavaScript and Java are similar in some ways but fundamentally they are different. Java is a programming language developed by Sun Microsystems, Inc. and JavaScript is a scripting language developed by Netscape. Java is a server-side and static type language. JavaScript is a client-side, dynamically typed language. Java programs are compiled on the server and run on almost every platform without distribution of source code where as scripts written in JavaScript are placed inside a HTML document and interpreted by the browser. The syntax, reserved-words of JavaScript and Java are also different. Subject: INTRODUCTION TO WEB PROGRAMMING Experiment Title: Design Signup form using Java script Experiment No. : 7

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

JavaScript compare to Java JavaScript JavaScript is used for front-end web development (for example field level validation in a HTML form). Interpreted (not compiled) by 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. Variable data types not declared (loose typing). Cannot automatically write to hard disk. Java Java is used as a back-end language within a web environment. Compiled bytecodes downloaded from server, executed on client. 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 must be declared as Java maintains strong type checking. 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 an image, a link etc. JavaScript is capable of controlling the appearance of many objects. For example you can open new pages in customized windows where you can specify their size, determine whether they have 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 user which is called event. For example display a dialog box when an user clicks on a button, opening

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

a new page, mouse over on a link to change the appearance of the link or control the background color 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 to display 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 the mathematical 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 math functions 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 to validate the said data in server side you have to wait while the information is sent up to the server 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. As it is a piece of text, cookies are not executable. JavaScript can store information from this piece of 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 even operating systems. JavaScript can detect the visitor's browser and load the appropriate page for that specific browser. Dynamic HTML Dynamic HTML, or DHTML, is a collection of technologies used together to make interactive and animated web site by using a combination of JavaScript, HTML, DOM (Document object module) and CSS.

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

JavaScript Code:html> <h2>Form Validation</h2> <script language = "Javascript"> 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]/g if (re.test(str)) return false; return true; } function checkAddress(str){ var re = /[^[a-z][A-Z][0-9]]/g if(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=""

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

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 } </script> <form name="form" method="post" onSubmit="return validate()"> <pre> Enter Name: <input type="text" name="name" size="30"><br> Enter an Email Address : <input type="text" name="email" size="30"><br> Enter Address <textarea name="address" rows="5" cols="23"></textarea><br> Select Qualification: <select name="qua"> <option value="BTech">BTech</option> <option value="MBBS">MBBS</option> <option value="MBA">MBA</option> <option value="MCA">MCA</option>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

</select><br> <input type="submit" name="Submit" value="Submit"> </pre> </form> </html>

Output:-

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Conclusion:-

Date of performance by Student

Date of Assessment by Staff

Staff Signature

Remark

Marathwada Shikshan Prasarak Mandal’s Deogiri Institute of Technology and Management Studies Practical Experiment Instruction Sheet
Department: CSE Subject: INTRODUCTION TO WEB PROGRAMMING Experiment No. : 8 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 by the makers of the Netscape Navigator browser and the Internet Explorer browser, to describe the "new" technologies that these browsers in the 4.x generation would support. The tables below list the 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 Web pages interactive. The technologies comprising DHTML will be evolving. New technologies will be added from time to time. Fifteen years from now, of the technologies currently discussed in this 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 become available for Web developers and as more bandwidth becomes available to home users. DHTML is a set of initials representing Dynamic HTML, or Dynamic Hypertext Markup Language. 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 supported by 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 two browsers. With DHTML the web page designer controls how the various HTML elements are displayed and positioned in the window. The position of an element may be changed even after

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

the document has loaded. Content can be made to appear and disappear as needed. The document can 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:<!DOCTYPE html> <html> <head> <style> 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; } </style> <script type="text/javascript"> function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } </script> </head> <body>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

<h3>Drop down menu</h3> <table width="100%"> <tr bgcolor="#FF8080"> <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')"> <a href="/default.asp">Tutorials</a><br /> <table class="menu" id="tutorials" width="120"> <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr> <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr> <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr> </table> </td> <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')"> <a href="/default.asp">Scripting</a><br /> <table class="menu" id="scripting" width="120"> <tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr> <tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr> <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr> <tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr> <tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr> </table> </td> <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')"> <a href="/site/site_validate.asp">Validation</a><br /> <table class="menu" id="validation" width="120"> <tr><td class="menu"><a href="/web/web_validate.asp">Validate HTML</a></td></tr> <tr><td class="menu"><a href="/web/web_validate.asp">Validate XHTML</a></td></tr> <tr><td class="menu"><a href="/web/web_validate.asp">Validate CSS</a></td></tr> <tr><td class="menu"><a href="/web/web_validate.asp">Validate XML</a></td></tr> <tr><td class="menu"><a href="/web/web_validate.asp">Validate WML</a></td></tr> </table> </td> </tr> </table> <p>Mouse over these options to see the drop down menus</p> </body> </html>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Output:-

Conclusion:-

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Date of performance by Student

Date of Assessment by Staff

Staff Signature

Remark

Marathwada Shikshan Prasarak Mandal’s Deogiri Institute of Technology and Management Studies Practical Experiment Instruction Sheet
Department: CSE Subject: INTRODUCTION TO WEB PROGRAMMING Experiment No. : 9 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 a network such as the Internet or a private local area network through an Internet address known as a Uniform Resource Locator. All publicly accessible websites collectively constitute the World Wide Web. Webpage:It is a document, typically written in plain text interspersed with formatting instructions of Hypertext Markup Language (HTML, XHTML). A webpage may incorporate elements from other websites with suitable markup anchors. Web pages are accessed and transported with the Hypertext 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's application, often a web browser, renders the page content according to its HTML markup instructions 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 hyper linking between them conveys the reader's perceived site structure and guides the reader's navigation of the site which generally includes a home page with most of the links to the site's web content, and a supplementary about, contact and link page. Web Server:-

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Web server can refer to either the hardware (the computer) or the software (the computer application) that helps to deliver Web content that can be accessed through the Internet. The most 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 is precedence. When navigating a good design, the user should be led around the screen by the designer. I call this precedence, and it’s 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 is often because it’s 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 site they are viewing. But precedence should go much further. You should direct the user’s eyes through a sequence of steps. For example, you might want your user to go from logo/brand to a primary positioning statement, next to a punchy image (to give the site personality), then to the main body text, with navigation 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?

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

2. Spacing When I first started designing I wanted to fill every available space up with stuff. Empty space seemed wasteful. In fact the opposite is true. Spacing makes things clearer. In Web design there 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. Too little space makes it easy for your eye to spill over from one line to the next, too much space means that when you finish one line of text and go to the next your eye can get lost. So you need to 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 called leading (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 be touching text, neither should borders or tables. Padding is the space between elements and text. The simple rule here is that you should always have space there. There are exceptions of course, in particular if the text is some sort of heading/graphic or your name is David Carson :-) But as a general rule, putting space between text and the rest of the world makes it infinitely more readable and pleasant. White Space First of all, white space doesn’t need to be white. The term simply refers to empty space on a page (or negative space as it’s sometimes called). White space is used to give balance, proportion and contrast to a page. A lot of white space tends to make things seem more elegant and up market, so for example if you go to an expensive architect site, you’ll almost always see a lot of space. If you want to learn to use whitespace effectively, go through a magazine and look at how adverts are laid out. Ads for big brands of watches and cars and the like tend to have a lot of empty 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 to figure out where to go or where you are. I’d like to think that for most Web designers, navigation is a concept we’ve managed to master, but I still find some pretty bad examples out there. There are two aspects of navigation to keep in mind:

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Navigation — where can you go? There are a few commonsense rules to remember here. Buttons to travel around a site should be easy to find – towards the top of the page and easy to identify. They should look like navigation buttons and be well described. The text of a button should be pretty clear as to where it’s taking you. Aside from the common sense, it’s 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 losing the rollover is important. Similarly changing the color or image on rollover is excellent feedback for 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 might be just a matter of a big heading or a ‘down’ version of the appropriate button in your menu. In a larger site, you might make use of bread 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 even now it’s still important to think about how you are going to build a site when you’re still in Photoshop. Consider things like:
•

Can it actually be done? You might have picked an amazing font for your body copy, but is it actually a standard HTML 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. It’s important to know what can and can’t be done, which is why I believe all Web designers should also build sites, at least sometimes.

•

What happens when a screen is resizes? Do you need repeating backgrounds? How will they work? Is the design centered or leftaligned? Are you doing anything that is technically difficult? Even with CSS positioning, some things like vertical alignment are still a bit painful and sometimes 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 you have to code your CSS later. In particular, when elements of a design cross over each other, it adds a little complexity to the build. So if your design has, say three elements

•

•

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

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 probably be a bit more complicated. You should find a balance between what looks good and small changes 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 a download button, for example, I would make a little download image. In the last year or so, I’ve switched to using CSS to make my buttons and have never looked back. Sure, it means my buttons don’t always have the flexibility I might wish for, but the savings in build time from not having to make dozens of little button images are huge.

5. Typography
Text is the most common element of design, so it’s not surprising that a lot of thought has gone into it. It’s 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 sure your 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, though on the Web this is of less importance, as you don’t have that much control. Line Length — There is no hard and fast rule, but generally your lines of text shouldn’t be too long. The longer they are, the harder they are to read. Small columns of text work much better (think about how a newspaper lays out text). Color — One of my worst habits is making low-contrast text. It looks good but doesn’t read so well, unfortunately. Still, I seem to do it with every Web site design I’ve 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 to create weird gaps between words where they have been auto-spaced. This isn’t nice for

•

•

•

•

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

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

6. Usability
Web design ain’t just about pretty pictures. With so much information and interaction to be effected on a Web site, it’s important that you, the designer, provide for it all. That means making your Web site design usable. We’ve already discussed some aspects of usability – navigation, precedence, and text. Here are three more important ones:
•

Adhering to Standards There are certain things people expect, and not giving them causes confusion. For example, 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 site should 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 done because often when you actually use a design, you notice little things that make a big difference. ALA had an article a while back called Never Use a Warning When You Mean Undo, which is an excellent example of a small interface design decision that can make 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 you want to make it for them. This might mean having really common tasks on your homepage (e.g. ‘start shopping’, ‘learn about what we do,’ etc.) or it might mean ensuring something like having a search box always easily accessible. At the end of the day, your Web design is a tool for people to use, and people don’t like using annoying tools!

•

•

7. Alignment
Keeping things lined up is as important in Web design as it is in print design. That’s not to say that everything should 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 and digestible, as well as making it seem more polished. You may also wish to base your designs on a specific grid. I must admit I don’t do this consciously – though obviously a site like Psdtuts+ does in fact have a very firm grid structure.

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

This year I’ve seen a few really good articles on grid design including SmashingMagazine’s Designing with Grid-Based Approach & A List Apart’s Thinking Outside The Grid. In fact, if you’re interested in grid design, you should definitely pay a visit to the aptly named DesignByGrid.com home to all things griddy.

8. Clarity (Sharpness)
Keeping your design crisp and sharp is super important in Web design. And when it comes to clarity, it’s all about the pixels. In your CSS, everything will be pixel perfect so there’s nothing to worry about, but in Photoshop it 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 you’re creating them in Photoshop. Make sure any text is created using the appropriate anti-aliasing setting. I use ‘Sharp’ a lot. 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 should be 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 like spelling mistakes in an essay. They just lower the perception of quality. Whatever your design looks like, keeping it consistent will always bring it up a notch. Even if it’s a bad design, at least make it a consistent, bad design. The simplest way to maintain consistency is to make early decisions and stick to them. With a really 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 images had 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. Try to define core tags like <h1> and <p> in such a way as to make your defaults match properly and avoid having to remember specific class names all the time.

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Requirement Computer Department Information:1. about us 2. H.O.D 3. Staff 4. Labs 5. Student Association 6. Assignment 7. Achievement

Conclusion:-

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Date of performance by Student

Date of Assessment by Staff

Staff Signature

Remark

Marathwada Shikshan Prasarak Mandal’s Deogiri Institute of Technology and Management Studies Practical Experiment Instruction Sheet
Department: CSE Subject: INTRODUCTION TO WEB PROGRAMMING Experiment No. : 10 Experiment Title: Design and Develop a shopping cart using HTML and JavaScript Theory:-

What's A Shopping Cart?
A Shopping Cart is a series of pages that are all linked together through some sort of programming (usually PERL or JavaScript) that allows data to be transferred along with the viewer 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 the site 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 her Shopping Cart. Finally, she moves to the accessories page and adds a scarf. After choosing the items she wants to purchase, she clicks on the order page link and a page pops up listing all of her 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 viewer shops around.

How Does This Shopping Cart Work?
If cookies are a new concept to you, please read the cookie tutorial for a lot of important information. I make that statement because many people believe cookies are the scourge of the Internet high seas. I just see them the same way. Plus, if you want this Shopping Cart effect, you need to store the information somewhere as the 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 today and as long as your user knows you are using them, I don't see the problem. Be honest I always say.

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

The Shopping Cart Program
Here's the great thing about this Shopping Cart. It is already fully self-contained and requires little assembly from you. In fact, the entire set of pages and programming were sent to me and I went in and cut away anything that wasn't specifically needed for the cart to work. I then entered a 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 work straightaway. Code:<html> <head> <title>Deogiri Market- Worth County Campus - Worth County Campus</title> <style type="text/css" media="all"> /* 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;

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

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; } </style> <script type="text/javascript"> 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=0 var preloadimages=[] for (var i=0; i<imageclock.digits.length; i++){ //preload images preloadimages[i]=new Image() preloadimages[i].src=imageclock.digits[i] } imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead var sections=timestring.split(":") if (sections[0]=="0") //If hour field is 0 (aka 12 AM)

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

sections[0]="12" else if (sections[0]>=13) sections[0]=sections[0]-12+"" for (var i=0; i<sections.length; i++){ if (sections[i].length==1) sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />' else sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />' } return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2] } imageclock.display=function(){ var clockinstance=this this.spanid="clockspan"+(imageclock.instances++) document.write('<span id="'+this.spanid+'"></span>') this.update() setInterval(function(){clockinstance.update()}, 1000) } imageclock.display.prototype.update=function(){ var dateobj=new Date() var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+ ((dateobj.getHours()>=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; } </script> </head>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

<body> <div class="center"> <table border="0"> <tr id="header"> <td colspan="2"><h1>Deogiri- Worth County Campus</td> </tr> <tr> <td align="right"> <script type="text/javascript"> new imageclock.display() </script> </td></tr> <tr id="nav"> <td>Navigation:: <a href="index.html">Home</a> | <a href="infotech.html">Information Technology</a> | <a href="webdesign.html">Web Design</a> | <a href="cosmo.html">Cosmetology</a> | <a href="cal.html">Calendar</a> | <a href="comptia.html">CompTIA</a></td> </tr> <tr> <td id="body">E-mail us at: <b><script type="text/javascript"> document.write("[email protected]"); </script></b></td></tr> <tr> <td id="body" colspan="2"><p>Welcome to Deogiri - Worth County- campus bookstore. Located on this page, you will find all the literature needed for the Deogiri classes given at the Deogiri- Worth Campus. If, for some reason, the literature that you need is not available on this page, please try the other Deogiri campuses' bookstores. Literature needed for each quarter of classes will vary by teacher, and if any questions are to come to mind, feel free to ask.</p> <p><strong><u>Web Design Literature</u></strong></p> <p><img src="HTML.jpg" alt="Quarter One: HTML Literature" width="75" height="75" /><input type="checkbox" id="HTML" value="HTML" />New Perspectives: Blended HTML, XHTML, and CSS Introductory <strong>$73.49</strong></p> <select id="quantity" size="1"> <option>Quantity</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

<option>9</option> <option>10</option> </select> <button type="submit">Add to Cart</button> <p><img src="javascript.jpg" alt="Quarter Two: JavaScript Literature" width="75" height="75" /><input type="checkbox" id="javascript" value="javascript" />New Perspectives: JavaScript <strong>$63.49</strong></p> <select id="quantity" size="1"> <option>Quantity</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> <button type="submit">Add to Cart</button> <p><img src="dreamweaver.jpg" alt="Quarter Three: Dreamweaver literature" width="75" height="75" /><input type="checkbox" id="dreamweaver" value="dreamweaver" />New Perspectives on Adobe Dreamweaver CS4 <strong>$84.49</strong></p> <select id="quantity" size="1"> <option>Quantity</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> <button type="submit">Add to Cart</button> <p><img src="photoshop.jpg" alt="Quarter Four: Photoshop literature" width="75" height="75" /><input type="checkbox" id="photoshop" value="photoshop" />Adobe Photoshop CS4: Complete Concepts and Techniques <strong>$66.49</strong></p> <select id="quantity" size="1"> <option>Quantity</option>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

<option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> <button type="submit">Add to Cart</button> <p><strong><u>Info Tech Literature</u></strong></p> <p><strong><u>Cosmetology</u></strong></p> <tr id="black"> <td colspan="2">1210 Railway station Roas,Aurangabad-4310005.</td> </tr> </table> </div> </body> </html>

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Output:-

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)

Conclusion:-

Prepared by: Mr.P.R.Rathod

Approved by: H.O.D. (Dept. of CSE)