lab manual - fr. agnelps.fragnel.edu.in/lm/sem6/wt.pdf · lab manual subject: web technology ......
TRANSCRIPT
LAB MANUAL
SUBJECT: WEB TECHNOLOGY
CLASS : T.E (COMPUTER)
SEMESTER: VI
INDEXNo. Title Pag
e No.
1 Implements Basic HTML Tags 3
2 Implementation Of Table Tag 4
3 Implementation Of FRAMES 5
4 Design A FORM In HTML(Yahoo registration form) 6
5 Validation Of FORM Using Java Script. 7
6 Implementation Of CSS(All 4 Types) 8
7 Develop A Clock Using Java Script 9
8 DHTML(Layer/DIV) 10
9 ASPImplement Response Object 11
10 Connectivity To Database Through ASP 12
11 PROJECTDevelop A ECommerce Web Site 13
Practical 1
Title: Implements Basic HTML Tags.
Aim: Create a home page which has an image and a list to navigate to other pages of the same site.
References: Kriss Jamsa
Requirements: Write a program which will perform the following tasks:1. Use of <HTML><HEAD><TITLE><BODY> Tags2. Use of <H1> to <H6> Tags3. Use of <img> Tag4. Use of <br>,<hr>,<p> Tags5. Use of All Text Formatting Tags like
<b>,<i>,<u>,<em>,<big>,<small>,<sub>,<sup>,<address>,<del>,<ins>
6. Use Of Hyperlink i.e. <a></a> Tag.
Practical 2
Title: Implementation Of Table Tag
Aim: To display UniversityMarksheet Using Tables Tag
References: Kriss Jamsa
Requirements: 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). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
Tags required are as follows :
1) <table>..</table> Defines a table Attribute of table
Border If you do not specify a border attribute
the table will be displayed without any borders
<table border="1">
CellPadding to create more white space between the cell content and its borders.
<table border="1" cellpadding="10">
CellSpacing to increase the distance between the cells.
<table border="1"
cellspacing="10">
2) <th> .. </th> Displays heading in the table
3) <tr>..</tr> Divides table into rows
4) <td>..</td> Divide into data cells
5) <caption>..</caption> It gives title for a table
Practical 3
Title: Implementation Of FRAMES
Aim: Create a home page which will have various frames for the user to navigate to different sections of a site.
References: Kriss Jamsa
Requirements: : With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame
is independent of the others. Tags required are as follows :
1)<frameset> ..</frameset> Defines how to divide the window into frames
Attributes of frameset
cols – To divide a frame vertically <frameset cols="25%,75%">
rows – To divide a frame horizontally
<frameset rows="25%,50%,25%">
The frameset column size value can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space (cols="25%,*").
2)<frame> Defines what HTML document to put into each frame
Attributes of frame
src location of file
name – name of the frame
3)<noframes>..</noframes> Defines a noframe section for browsers that cannot display frames
Practical 4
Title: Design A FORM In HTML(Yahoo registration form)
Aim: Create a Form which has textfields, textarea, checkbox, radiobutton,submit button, reset button, drop down box,image(if required)
References: Kriss Jamsa
Requirements: A form is an area that can contain form elements. Form elements are elements that allow the user to enter informatio
(like text fields, textarea fields, dropdown menus, radio buttons, checkboxes, etc.) in a form.
Tags required are as follows :
1)<form>..</form> A form is defined with this tag.
Attribute of form:
action When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to.
<form name="input" action="html_form_action.asp">
2)<input> The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most
commonly used input types are explained below.
Textfields <input type="text" name =”fname”>Radio Buttons <input type="radio" name="gender" value=”male”> Checkboxes <input type="checkbox" name="vehicle" value="Bike" >Submit Button <input type="submit" value="Submit">Reset Button <input type="reset" value="Reset"><textarea>.. Used to accept multiple line from the user</textarea><select>.. Used to create a drop down list.</select>
Practical 5
Title: Validation Of FORM Using Java Script.
Aim: To study concepts of Javascript.References: Kriss JamsaRequirements: Write a program which will perform the following tasks: Take the same form from previous practical i.e. Yahoo registration form. Now validate this form i.e you have to check before submitting the form whether 1.any field of the form is empty? 2.email address is a valid email address or not,(first letter should be always character,it should contain @ etc.) 3.password should not be more than 7 characters long.
Practical 6
Title: Implementation Of CSS(All 4 Types)
Aim: To study cascading style sheets (css).
References: Kriss Jamsa
Requirements: Write a program which will perform the following tasks: CSS is a set of specifications called rules that give you complete control over layout of a web page and the appearance of the contents. You have to implement 4 ways of adding CSS to a web page i.e. 1)Embedding CSS 2)Linking to an external CSS 3)Importing an external CSS
4)Inline CSS
Practical 7
Title: Develop A Clock Using Java Script
Aim: To display a digital clock at the status bar using javascript.
References: Kriss Jamsa
Requirements: A Clock can be displayed using the help of Date() Object. var myDate= new Date(); Methods of Date Object 1) getHours()Returns the hour of a date object (from 0
23)2) getMinutes() Returns the minutes of a date object
(from 059) 3) getSeconds() Returns the seconds of a date Object.(from
059)
We have to use the method setTimeout() & clearTimeout()setTimeout() It belongs to window objects. It is used to
call a function or evaluate an expression after a specified number of milliseconds.
Syntax setTimeout(code,millisecond,lang) where code A pointer to a function ot the code to be executed. millisecond The no. of milliseconds to wait before executing the code, lang Optional,it is the scripting language. clearTimeout() This also belongs to window object. It cancels a timeout that is set with the setTimeout() metho.
Practical 8
Title: DHTML(Layer/DIV)
Aim: To implement div and layer tag.
References: Kriss Jamsa
Requirements: Write a program which will perform the following tasks:1) The Div tag defines division/section in a HTML
document. Browser generally place a line break before and after <div> element.<div> tag is used to group together block elements to format them with styles.
2)Layer tag allows us to position blocks of content in the webpage. These contents may overlap each other be transparent,opaque,visible or even invisible.
Practical 9
Title: ASPImplement Response Object
Aim: To implement the response object of ASP.
References: ASP Wrox Publication
Requirements: Write a program which will display some text at the browser's window. You have to write a ASP program in Javascript & VBScript using response object that will display some text.
Practical 10
Title: Connectivity To Database Through ASP
Aim: To create a database connection and display data.
References: ASP Wrox publication
Requirements: 1. First we have to set the ODBC Driver through Control Panel. 2.Then select the database to which you want to connect to. 3.Now write a code for ASP to display the data,delete the
particular record, add new data to database.
Practical 11
Title: Develop A ECommerce Web–Site.
Aim: To Develop A ECommerce WebSite.
References: Kriss Jamsa, Javascript in 21 days,ASPWrox Publication
Requirements: You should use all HTML,DHTML,Java Script,ASP to develop this web site.
There should be interaction between client and server. You should be able to store data ,retrieve records,delete
data,search data, using ASP.
Synopsis For The Project: ● Title● Applications● Languages Used● Hardware Components● Software Components● System Diagram● Description● Whole Code Printout● First Page Output