******************************************************************EX.NO:1BASIC HTML TAGS

************************************************************** HTML documentsdescribe web pages. HTML documentscontain HTML tagsand plain text. HTML documents are alsocalled web pages. Tags are HTML commands every text is marked up between HTML tags. There tags instruct the browser how to display a text. A tag consist of A Left operator Tag Name A Right operator - The HTML stands forHyperTextMarkupLanguage. The HTML element represents the root of an HTML document. - The HEAD element represents a collection of metadata for the document. header - The title element represent the document's title or name. WELCOME SCREEN - The meta element can represent document-level metadata with the name attribute, http-equiv attribute, and the file's character encoding declaration. - The style element allows authors to embed style information in their documents. The style element is one of several inputs to the styling processing model. The element does not represent content for the user. body { color: black; background: white; } em { font-style: normal; color: red; } - The script element allows authors to include dynamic script and data blocks in their documents. The element does not represent content for the user. - The link element allows authors to link their document to other resources. The link element allows authors to link their document to other resources. - The BOBY element represents the main content of the document. Welcome Screen - The div element has no special meaning at all. It represents its children. It can be used with the class, Lang, and title attributes to mark up semantics common to a group of consecutive elements. My other cat, colored black and white. He apparently visited our neighbors.

- These elements represent headings for their sections. Let's call it a drawing surface Let's call it a drawing surface Let's call it a drawing surface Let's call it a drawing surface Let's call it a drawing surface

- These elements represent the center alignment of group of elements. - The table element represents data with more than one dimension, in the form of a table. < TABLE > Negative Characteristic Positive sadmood happy Failinggradepassing - An IMG element represents an image. The image given by the src attribute is the embedded content, and the value of the alt attribute is the IMG element's fallback content. The A element has an href attribute, then it represents A hyperlink (a hypertext anchor). click - This element is used for scrolling text. The menu element represents a list of commands. list item1 list item2

- The DD element represents the description, definition, or value, part of a term-description group in a description list (DL element). A DL can be used to define a vocabulary list, like in a dictionary. In the following example, each entry, given by a DT with a DFN, has several DDS, showing the various parts of the definition. happiness The state of being happy. Good fortune success rejoice To cause one to be delighted. - The embed element represents an integration point for an external application or interactive content.

1. - The OL element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document. The items of the list are the li element child nodes of the OL element, in tree order.
   1. United Kingdom
   2. Switzerland

- The UL element represents a list of items, where the order of the items is not important that is, where changing the order would not materially change the meaning of the document. The items of the list are the LI element child nodes of the UL element.

• Switzerland
• Norway

- The FORM element represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. Google: - The input element represents a typed data field, usually with a FORM control to allow the user to edit the data. - The button element represents a button. If the element is not disabled, then the user agent should allow the user to activate the button. Show hint -The TEXTAREA element represents a multiline plain text edit control for the element's raw value. The contents of the control represent the control's default value. Feed back - The FRAMESET element contains set of frames in rows or columns. - The FRAME element used to divide the document into partitions. It depends upon the FRAMESET rows or cols value. - The P element represents a paragraph. There was once an example from Femley,
Whose markup was of dubious quality.
To move the error from the markup to the rhyming.
- The BR element represents a line break.
The valuator complained
So the author was pained - The FONT element changes the font style, size, color of the text in the document. visit again - The APPLET element use to display the java file in the html document file.

******************************************************************EX.NO:2CREATING A WEBPAGE USING IMAGE MAP******************************************************************

Aim To Create a web page with the following using HTMLi) To embed an image map in a web pageii) To fix the hot spotsiii) Show all the related information when the hot spots are clicked.

AlgorithmStep1 :Open a notepad.Step 2:Write the code for imagemap.html. Step 3: Enter a program that includes tags for and other tags.Step 4: Insert Hyperlink using . Step5: Save the file with .html extension.Step6: Run the program in a web browserStep: Display Results.

Program:HOME.HTML

Home - States of India!!!

Republic of India India is the Seventh Lagest country in the world by geographical area, the second most populous country with over 1.2 billion people, and the populus democracy in the world. India is a federal constitutional republic with a parliamentry democracy consisting of 28 states and 7 union Terriories. Features

Population - 1,028,783,343(2001 census).

Capital - New Delhi

Largest City - Mumbai

Currency - Indian Rupee

Time Format - IST (UTC + 5:30)

NAtion Sport - Hockey

Current PM - Manmohan Singh

Current President - Prathiba Patil

To view details of states please click on the specified area in the map !!!

ANDHRAPRADESH.HTML

Andhra Pradesh - India Andhra Pradesh A.P., is a state situated on the southeastern coast of India. It is India's fourth largest state by area and fifth largest by population.

Districts - 23

Capital City - Hyderabad

Largest City - Hyderabad

Governor - E. S. L. Narasimhan

Chief Minister - N. Kiran Kumar Reddy

Population - 78,323,330

Tourist spots - Tirumala Tirupati, Charminar, Golconda Fort, Chandragiri, Chowmahalla Place, Falaknuma Palace etc.,

back

KARNATAKA.HTML

Karnataka - India Karnataka

Districts - 30

Capital City - Bangalore

Largest City - Bangalore

Governor- Hansraj Bhardwaj

Chief Minister - D. V. Sadananda Gowda

Population - 61,130,704

Tourist spots - Gol Gumbaz, Mysore Palace, Keshava Temple etc.,

back KERALA.HTML

Kerala - India Kerala

Districts - 14

Capital City - Thiruvanandapuram

Largest City - Thiruvanandapuram

Governor - Hansraj Bhardwaj

Chief Minister -Oommen Chandy

Population - 33,387,677

Tourist spots - Edakkal Caves, Palayur, Kovalam Beach,Munnar, Kochi, Alapuzha etc.,

Back TAMILNADU.HTML

Tanil Nadu - India Tamil Nadu is one of the 28 states of India. Its capital and largest city is Chennai. Tamil Nadu lies in the southernmost part of the Indian Peninsula and is bordered by the States of puducherry, Kerala, Karnataka, Andha Pradesh.

Districts - 32

Capital City - Chennai

Largest City - Chennai

Governor - Konijeti Rosaiah

Chief Minister - Jayalalithaa

Population - 72,138,958

Tourist spots - Mamallapuran, Ooty, Kodaikanal, Marina, Mudurai Meenakshi Amman Temple, Thanjavur etc.,

back

SCREEN SHOTS

****************************************************************EX.NO:3STUDY OF CASCADING STYLE SHEETS (CSS)**************************************************************Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document. In CSS, selectors are used to declare which elements a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, or only those elements which match a certain attribute; elements may be matched depending on how they are placed relative to each other in the markup code, or on how they are nested within the document object modelA style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in braces. Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;)SyntaxThe CSS syntax is made up of three parts: a selector, a property and a value:selector {property: value}The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:body {color: black}External Style SheetAn 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 tag.The tag goes inside the head section:

The browser will read the style definitions from the file mystyle.css, and format the document according to it. Internal Style SheetAn internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the tag,

selector {property:value; property:value;..}

Inline StylesAn inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property.

This is a paragraph

******************************************************************EX.NO:4 CREATION OF HTML PAGE USING CASCADING STYLE SHEET******************************************************************Aim:To create a HTML page using types of Cascading Style Sheet.ALGORITHMInternal CSS:STEP 1: Create a HTML program with tag.STEP 2: Inside the tag, specify the format required for that web page.STEP3 : Run the program with a web browser.External CSS:STEP 4: Open a notepad, type the needed CSS in it and save it with .css extension. STEP5: Refer this .css file in the HTML using the tag .STEP 6: Run the program with a web browser.ROBUST CSSFILE.HTML

FLOWERS

p{background-color: lightgrey;text-align: justify;margin: 2em 7em;}

FLOWER

Flowersometimes known as a bloom or blossom,is the reproductive structure found in flowering plants.The flower is God's finest workmanship in the world.It is his finest gift to the mankind.We have seen the flowers of many kinds and to many colors.In India we see the flowers like

Lily

Lotus

Rose

Jasmine

CSS.CSSh1,h2{text-decoration: underline;font-style: italic;text-align: center;}#body{background-color: tan;border: red dotted;text-align: center;}.div{border: peru solid ;}*{letter-spacing: 1px;}a:link{color: black;}a:visited{color: yellow;}a:hover{color: green;}a:active{color: blue;}ul li{font-size: small;}

OUTPUT

SCREEN SHOT

******************************************************************EX.NO:5 WEB FORM VALIDATION USING DHTML******************************************************************AIMTo write a java script program that performs form validation. ALGORITHM:STEP 1: Start the program,STEP 2: Create a Form using form elements,STEP 3: Write a script program for validate the form using javascript,STEP 4: Save the file with extension html.STEP 5: Execute the page by opening html file from any browser.STEP 6: Stop the program.STUDENTVALIDATION.HTML

CGPA CALCULATION function mark() { var name=document.getElementById('name'); var regno=document.getElementById('regno'); var dept=document.getElementById('dept'); var sem1=document.getElementById('sem1'); var sem2=document.getElementById('sem2'); var sem3=document.getElementById('sem3'); var sem4=document.getElementById('sem4'); var sem5=document.getElementById('sem5'); var sem6=document.getElementById('sem6'); var sem7=document.getElementById('sem7'); var sem8=document.getElementById('sem8'); var cgpa=document.getElementById('cgpa'); var dest=document.getElementById('dest'); if(name.value == 0 ){alert("pls enter the name");return false;} if(regno.value == 0 ){alert("pls enter the register number");return false;} if(dept.value == 0 ){alert("pls enter the department");return false;} if(sem1.value == 0 ){alert("pls enter semester 1 gpa");return false;} if(sem1.value > 10 ){alert("pls enter semester 1 gpa between 1-10");return false;} if(sem2.value == 0 ){alert("pls enter semester 2 gpa");return false;} if(sem2.value > 10 ){alert("pls enter semester 2 gpa between 1-10");return false;} if(sem3.value == 0 ){alert("pls enter semester 3 gpa");return false;} if(sem3.value > 10 ){alert("pls enter semester 3 gpa between 1-10");return false;} if(sem4.value == 0 ){alert("pls enter semester 4 gpa");return false;} if(sem4.value > 10 ){alert("pls enter semester 4 gpa between 1-10");return false;} if(sem5.value == 0 ){alert("pls enter semester 5 gpa");return false;} if(sem5.value > 10 ){alert("pls enter semester 5 gpa between 1-10");return false;} if(sem6.value == 0 ){alert("pls enter semester 6 gpa");return false;} if(sem6.value > 10 ){alert("pls enter semester 6 gpa between 1-10");return false;} if(sem7.value == 0 ){alert("pls enter semester 7 gpa");return false;} if(sem7.value > 10 ){alert("pls enter semester 7 gpa between 1-10");return false;} if(sem8.value == 0 ){alert("pls enter semester 8 gpa");return false;} if(sem8.value > 10 ){alert("pls enter semester 8 gpa between 1-10");return false;} cgpa.value=parseInt(sem1.value)+parseInt(sem2.value)+ parseInt(sem3.value)+parseInt(sem4.value)+parseInt(sem5.value)+ parseInt(sem6.value)+parseInt(sem7.value)+parseInt(sem8.value); var result=cgpa.value/8 if(result >= 7.5){dest.value="First Class";} if(result < 7.5){dest.value="Second Class";} if(result < 5){dest.value="Third Class";} } STUDENT CGPA VALIDATION
Student Name Register No: Department Semester 1 Semester 2 Semester 3 Semester 4 Semester 5 Semester 6 Semester 7 Semester 8 CGPA Destinction

OUTPUT

SAMPLE SCREEN SHOT

******************************************************************EX.NO:6 CREATING A COLOUR PALETTE USING JAVA****************************************************************** AIM:

To Write a Program in JAVA to create applets incorporating the following features.1. Create a color palette with matrix of buttons2. Set background and foreground control text area by selecting a color from color palatte.3. To set background images.

ALGORITHM:STEP 1: Start the program,STEP 2: Write a program for applet using java,STEP 3: Save the applet program with extension .java,STEP 4: Compile that program by javac command.STEP 5: Run the applet by entering appletviewer command.STEP 6: Stop the program.AppletClass.javaimport java.awt.*;import java.awt.event.*;import java.applet.*;public class AppletClass extends Applet implements ItemListener { int curcolor = 6; int flag = 1; String text = "Click any of the Button"; Button buttons[] = new Button[6]; String colors[] = {"Red", "Blue", "Green", "Yellow", "Magenta", "pink"}; Image img1; CheckboxGroup cbg = new CheckboxGroup(); Checkbox box1 = new Checkbox("Background Color", cbg, true); Checkbox box2 = new Checkbox("Text Color", cbg, false); Checkbox box3 = new Checkbox("Loading Image ", cbg, false); public void init() { for (int i = 0; i < 6; i++) { buttons[i] = new Button(" "); add(buttons[i]); } buttons[0].setBackground(Color.red); buttons[1].setBackground(Color.blue); buttons[2].setBackground(Color.green); buttons[3].setBackground(Color.yellow); buttons[4].setBackground(Color.magenta); buttons[5].setBackground(Color.pink); add(box1); add(box2); add(box3); box1.addItemListener(this); box2.addItemListener(this); box3.addItemListener(this); } public void itemStateChanged(ItemEvent ev) { if (box1.getState() == true) { flag = 1; } else if (box2.getState() == true) { text = "Default color is black"; flag = 2; } else if (box3.getState() == true) { img1 = getImage(getDocumentBase(), "sample.gif"); flag = 3; } repaint(); } public void paint(Graphics g) { if (flag == 2) { g.drawString(text, 30, 100); switch (curcolor) { case 0: g.setColor(Color.red); break; case 1: g.setColor(Color.blue); break; case 2: g.setColor(Color.green); break; case 3: g.setColor(Color.yellow);break; case 4: g.setColor(Color.magenta);break; case 5: g.setColor(Color.pink);break; case 6: g.setColor(Color.black);break; } g.drawString(text, 30, 100); } else if (flag == 1) { g.drawString(text, 30, 100); switch (curcolor) { case 0: setBackground(Color.red);break; case 1: setBackground(Color.blue);break; case 2: setBackground(Color.green);break; case 3: setBackground(Color.yellow); break; case 4: setBackground(Color.magenta);break; case 5: setBackground(Color.pink); break; case 6: setBackground(Color.white); break; } } else if (flag == 3) { g.drawImage(img1, 200, 300, this); } } public boolean action(Event e, Object o) { for (int i = 0; i < 6; i++) { if (e.target == buttons[i]) { curcolor = i; text = "You have Chosen" + colors[i]; repaint(); return true; } } return false; }}APPLET.HTML

OUTPUT :SCREEN SHOT:1

SCREEN SHOT: 2

******************************************************************EX.NO:7 INVOKING SERVLETS FROM HTML FORM******************************************************************AIM:To write a program to invoke Servlet from HTML form.

ALGORITHMSTEP1: Create a HTML page including some form elements.STEP2: Inside the tag, for the action attribute specify the full path name of the File.STEP3: Create a .java file that imports javax.http.servlet.*;STEP4: Set classpath where servlet-api.jar file resides. STEP5: Compile the servlet program using javac programname.java STEP6: Place the class file \Tomcat 5.5\webapps\Examples\WEB-INF\classes\folder. STEP7: Define the doPost function to process the data obtained from the HTML file.STEP8: Modify the web.xml file using your servletClassName. STEP9: Invoke the class file using http://localhost:8080/servetClassName from your browser

Postparam.javaimport java.io.*;import java.util.*;import javax.servlet.*;public class postparam extends GenericServlet{public void service(ServletRequest request,ServletResponse response)throws ServletException,IOException{PrintWriter pw=response.getWriter();Enumeration e=request.getParameterNames();while(e.hasMoreElements()){String pname=(String)e.nextElement();pw.print(pname+"=");String pvalue=request.getParameter(pname);pw.println(pvalue);}pw.close();}}

Postparam.html

Employee

phone

XML CODE:

//Include the code in Web.xml document//

PostparamPostparam

Postparam/Postparam

OUTPUTSCREEN SHOTS:

******************************************************************EX.NO:8 ONLINE EXAMINATION USING JSP AND DATABASE******************************************************************

AIM: To write an online Examination using JSP with three tier architecture

ALGORITHM: STEP 1: Create a user interface form for getting Seat number and NameSTEP2: Create jsp file which calculates the total marks on the serverSTEP3: Place the jsp file \Tomcat 5.5\webapps\Examples\WEB-INF\jsp\ folder. STEP4: Create a data base to store the existing user details. If a new login has to be created, then display the corresponding page.STEP5: Create a table in MS ACCESS or ORACLE that contains three fields .STEP6: Create a DSN to map the Microsoft Access Driver using ODBC in Administrative Tools.STEP7: Import java.sql.* in the java program to execute the SQL queries.STEP8: Load the database driver by using Class.forName(). STEP9: Create a Connection and Statement Object.STEP10: Establish a Database Connection with DSN using DriverManager.getConnection( ).STEP11: Execute the query using executeQuery() and that gets stored in a Resultset. STEP12: Until there are records in table specified get the fields in each record one by one and display onto the screen.STEP13: Close the Statement and Connection Object.STEP 14: DIsplay the resultsHome.html

Online Examination OnLine Examination Seat Number: Name:
Total Marks:10(Each question carries equal marks) Time: 15 Min.
1. Apache is an open source web server
True False
2. In Modern PC there is no cache memory.
True False
3. Tim-Berner Lee is the originator of Java.
True False
4.JPG is not a video file extension.
True False
5. HTTP is a statefull protocol
True False

exam.jsp

Online Examination

Student Database
Seat No Name Mark

Thanks!....

OUTPUT:

******************************************************************EX.NO:9 PROGRAMS USING XML SCHEMA XSLT/XSL******************************************************************Aim:Programs using XML-Schema-XSLT/XSL Algorithm: Step 1: Start the Program Step 2: Create a root process for food Step 3: Create a style for XSLT with focus on each item Step 4: Output the items Step 5: StopSTRUCTURE.XML

apple $4.56 good energy 650 strawberry $56.7 a good ice cream 450 chapathy $5.89 morning meal 780 bread $6.78 with jam and butter 670

STOCK.XSL

FOOD STRUCTURE Name Price Description Calories

OUTPUT : SCREEN SHOT

******************************************************************EX.NO:10 PROGRAM USING AJAX******************************************************************AIM:To write programs to search and display chemistry elements definition detail using JSP.Algorithm:

Step 1: Start the Program Step 2: Enter the chemistry element in index.htmlStep 3: Read the data by request document.getElementByIdStep 4: Check given element in element listStep 5: Display the definition of given element.Step 6: Stop the Program

Program:

Ajax

function loadXMLDoc(){var xmlhttp;xmlhttp=new XMLHttpRequest();xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}xmlhttp.open("GET","info",true);xmlhttp.send();}

This line is going to change Welcome to Ajax program Press the button to get the definition of ajax Change

Info.txtAjax exchanges the data with the server, and update parts of a web page without reloading the whole page.

OUTPUT:

******************************************************************EX.NO:11 IMPLEMENTING AN APPLICATION WITH WEB SERVICESAIM:To implement an application using web services and database .Algorithm:Step 1: Start the ProgramStep 2: Create a root process for ReservationStep 3: Create a service with focus on each itemStep 4: Output the itemsStep 5: StopProgram:

Airline Reservation System

Output:

******************************************************************EX.NO:12 MENUS AND MENU GROUPINGAIM:To create menus and menu grouping using HTML.Algorithm:Step 1: Start the program. Step 2: Create a HTML file content for creating menus and menu group Step 3: Use javascript to display the group of elements Step 4: Use option command for selection Step 5: Display the output with menus and menu groupsStep 6:Stop the program

Algorithm: Menus.Html volvo saab mercedes audi Menugroup.html

volvo saab mercedesaudi

Output:

******************************************************************EX.NO:13 CREATING TIME TABLE USING CSS******************************************************************Aim:To create timetable using CSS in html.Algorithm:Step 1: Start the program.Step 2: Create the table using tagsStep 3: Apply the rowspan and colspan tags in tableStep 4: Apply the styles in html program Step 5:Stop the program

Program:Table.html

Timetable body { font-family: arial; }

th,td { margin: 0; text-align: center; border-collapse: collapse; outline: 1px solid #e3e3e3; }

td { padding: 5px 10px; }

th { background: #666; color: white; padding: 5px 10px; } td:hover { cursor: pointer; background: #666; color: white; }

Time Monday Tuesday Wednesday Thrusday Friday Saturday 10:00 - 11:00 Physics-1 English Chemestry-1 Alzebra Physical

11:00 - 12:00 Math-2 Chemestry-2 Physics-1 Hindi English Soft Skill

12:00 - 01:00 Hindi English Math-1 Chemistry Physics Chem.Lab

01:00 - 02:00 Cumm. Skill Sports English Computer Lab Header Header 02:00 - 03:00 Header Header Header Header Header Header

Output: