LAB MANUAL SUBJECT: WEB TECHNOLOGY CLASS : T.E (COMPUTER) SEMESTER: VI
INDEX No. 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 ASP Implement Response Object 11 10 Connectivity To Database Through ASP 12 11 PROJECT Develop A E Commerce Web Site 13
Practical 1 Implements Basic HTML Tags. Create a home page which has an image and a list to navigate to other pages of the same site. Write a program which will perform the following tasks: 1. Use of <HTML><HEAD><TITLE><BODY> Tags 2. Use of <H1> to <H6> Tags 3. Use of <img> Tag 4. Use of <br>,<hr>,<p> Tags 5. 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 Implementation Of Table Tag To display UniversityMarksheet Using Tables Tag 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 Implementation Of FRAMES Create a home page which will have various frames for the user to navigate to different sections of a site. : 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 Design A FORM In HTML(Yahoo registration form) Create a Form which has textfields, textarea, checkbox, radiobutton,submit button, reset button, drop down box,image(if required) 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, drop down 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 Validation Of FORM Using Java Script. To study concepts of Javascript. 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.e mail address is a valid e mail 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 Implementation Of CSS(All 4 Types) To study cascading style sheets (css). 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 Develop A Clock Using Java Script To display a digital clock at the status bar using javascript. 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 0 59) 3) getseconds() Returns the seconds of a date Object.(from 0 59) 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. SyntaxsetTimeout(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 DHTML(Layer/DIV) To implement div and layer tag. 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 ASP Implement Response Object To implement the response object of ASP. ASP Wrox Publication 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 Connectivity To Database Through ASP To create a database connection and display data. ASP Wrox publication 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 Develop A E Commerce Web Site. To Develop A E Commerce Web Site. Kriss Jamsa, Javascript in 21 days,asp Wrox Publication 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