You are on page 1of 46

1

HTML PROGRAM TO DISPLAY BASIC TAGS


<html> <head> <title>BasicTags</title> </head> <body bgcolor="yellow"> <p> <b>HTML has following Sizes</b> <h1>HTML</h1> <h2>HTML</h2> <h3>HTML</h3> <h4>HTML</h4> <h5>HTML</h5> <h6>HTML</h6> </p> <hr> <p>There are different styles and fonts in HTML.They are <b>Bold</b>,<i>Italic</i>,<tt>Type writer style</tt>, <u>Underlined</u>,<strike>strike through</strike>,we can also use <strong>strong</strong> in place of <b>bold</b></p> <p><pre>

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ Matter inside pre tag is always printed as it is

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ </pre></p>

<p>M&nbsp;&nbsp;u&nbsp;&nbsp;l&nbsp;&nbsp;t&nbsp;&nbsp;i&nbsp;&nbsp;p&nbsp;&nbsp;l&nbsp; &nbsp;e spaces can be created using ampersand nbsp.To include symbols in web pages like less than etc using <br> ampersand lt for &lt;<br>ampersand gt for &gt;<br>ampersand le for &le;<br>ampersand ge for &ge;<br>ampersand quot for &quot; <br>ampersand copy for &copy </p> <p><font color="red" size="6">We can specify font colors and size using font tag and corresponding attributes</font></p> <p>Alignment can also be done.<p align="left">left alignment</p><p align="center">center alignment</p><p align="right">right alignment</p></p> <p>We can specify your alignment style or color or size or any style for a block of statements using DIV tag </p> <div align="center">This block is modified using DIV tag</div> <p>We can also specify subscripts and superscripts like x<sup>2</sup>or e<sup>x</sup> and H<sub>2</sub>O </p> <p>We can also specify links to other pages.For more information on HTML tags <a href="www.google.com">click here </a></p> </body> </htm l>

3 OUTPUT:

HTML PROGRAM TO DISPLAY STUDENT MARKS IN A TABLE

<html> <head> <title>student details</title> </head> <body> <table border="2" cellspacing="3" cellpadding="3"> <caption><b>Student Details</b></caption> <thead> <tr> <th>S.No</th> <th>Roll No</th> <th>Student Name</th> <th>Subj1-Marks</th> <th>Subj2-Marks</th> <th>Subj3-Marks</th> <th>Subj4-Marks</th> <th>Subj5-Marks</th> <th>Max Total</th> <th>Total</th> <th>Percentage(%)</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>09011A0364</td> <td>Aarti</td> <td>85</td> <td>89</td> <td>84</td> <td>87</td> <td>86</td> <td>500</td> <td>431</td> <td>86.2</td> </tr> <tr> <td>2</td> <td>09011A0359</td> <td>Reshma</td> <td>86</td> <td>84</td> <td>81</td> <td>80</td> <td>83</td> <td>500</td> <td>414</td> <td>82.8</td>

5
</tr> <tr> <td>3</td> <td>09011A0337</td> <td>Gopal</td> <td>79</td> <td>85</td> <td>80</td> <td>76</td> <td>89</td> <td>500</td> <td>409</td> <td>81.8</td> </tr> <tr> <td>4</td> <td>09011A0689</td> <td>Raghav</td> <td>89</td> <td>89</td> <td>90</td> <td>87</td> <td>88</td> <td>500</td> <td>443</td> <td>88.6</td> </tr> </tbody> <tfoot> </tfoot> </table> </body> </html>

6 OUTPUT:

HTML PROGRAM TO DISPLAY VARIOUS LISTS IN HTML


<html> <head> <title> lists </title> </head> <body> <h3>ORDERED LISTS</h3> <h3>3-2subjects</h3> <Ol type="i"> <li>WT</li> <li>MC</li> <li>CG</li> </Ol> <h3>3-1 subjects</h3> <Ol type="I"> <li>OS</li> <li>ACA</li> <li>CD</li> </ol> <h3>2-2subjects</h3> <Ol type = "a"> <li>CO</li> <li>DBMS</li> <li>FLAT</li> </Ol> <h3>2-1 subjects</h3> <Ol type ="A"> <li>DLD</li> <li>MFCS</li> <li>ADS</li> </Ol> <h3>1 yr subjects </h3> <h3>sem1</h3> <Ol type ="1"> <li>Maths</li> <li>English</li> <li>Engg Graphics</li> </Ol> <h3>sem 2</h3> <Ol type="1"start="4"> <li>physics</li> <LI>chemistry</li> <li>ES</li> </Ol> <h3>UNORDERED LIST </h3> <h3>seasons</h3> <ul type="circle"> <li>Winter</li> <li>Summer</li> <li>Rainy</li> </ul>

8
<h3> Languages</h3> <ul type="disc"> <li>Telugu</li> <li>Hindi</li> <li>English</li> </ul> <h3>Mobile brands</h3> <ul type="square"> <li>Nokia</li> <li>Samsung</li> <li>Motorola</li> </ul> <h3>DEFINITION LISTS</h3> <dl> <dt>HTML</dt> <dd>Hyper Text Markup Language</dd> <dt>ASP</dt> <dd>Active Server Pages</dd> <dt>DBMS</dt> <dd>Data Base Management Systems</dd> </dl> </body> </html>

9 OUTPUT:

10

HTML PROGRAM TO SHOW INLINE CSS


<html> <head> <title>inline style sheets</title> </head> <body style="font-family : arial,verdana,sans-serif;font-style: italic; letter-spacing: 2px;"> <h3 style="font-weight:bolder; font-variant: small-caps";>Introduction to inline style sheets</h3> <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) 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 also be applied to any kind of XML document, including plain XML, SVG and XUL. </p> </body> </html>

11 OUTPUT:

12

HTML PROGRAM TO SHOW EMBEDDED CSS

<!DOCTYPE html> <html> <head> <title>embedded</title> <style type="text/css"> .new{ font-style: normal; font-size: medium; color:#006633; font-weight: normal; } #style{ background-color: khaki; } #s{ color: #990099; font-family: cursive; font-size: smaller; } a:hover{ text-decoration:none; color:purple; letter-spacing:2px; } a:link{ color:red; text-decoration: none; } p { font-size: medium; font-style: oblique; font-family: serif; color: crimson; } h3 { font-size: x-large; font-weight: bolder; font-variant: small-caps; color: blue; font-style: italic; font-family: cursive; alignment-adjust: central; } </style> </head> <body id="style">

13
<h3>cascading style sheets</h3> <p> In CSS, selectors are used to declare which of the markup elements a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, or only those elements that 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 <span id="s">Document Object Model.</span> </p> <h4 class="new"> HTML documents may contain style sheet rules directly in them or they may import style sheets. Any style sheet language may be used with HTML. A simple style sheet language may suffice for the needs of most users, but other languages may be more suited to highly specialized needs. </h4> <a href="image.html">Cascading style sheets</a> <div id="s"> <h5>Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. See Terms of use for details. Wikipedia is a registered trademark of the Wikimedia Foundation, Inc., a non-profit organization.</h5> </div> </body> </html>

14 OUTPUT:

15

HTML TO SHOW EXTERNAL CSS

<html> <head> <title> mystyle</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <h1>Great thoughts</h1> <h2>Mahatma Gandhi</h2> <p>one needs to be slow to form convictions,but onceformed,they must be defended against the heaviest odds </p> <h2 >William Shakespeare</h2> <p>Some men are born great,some achieve greatness,and some have greatness thrust upon them</p> <h2>Swami Vivekananda</h2> <p>The powers of mind are like the rays of the sun dessipated. When they are concentrated,they illumine</p> </body> </html>

16 STYLE.css body{ background-color:#3399ff; } h1{ font-size:xx-large; font-weight:bolder; font-variant:small-caps; color:black; font-family:serif; } h2{ font-size:medium; font-variant:annotation; color:black; font-style:normal; font-weight:bold; } p{ font-size:medium; font-weight:normal; font-style:italic; color:black; }

17 OUPUT:

18

XML FILE TO SHOW EXTERNAL DTD


<!ELEMENT Employee (SSN,FirstName,LastName,Salary,Department)> <!ELEMENT SSN (#PCDATA)> <!ELEMENT FirstName (#PCDATA)> <!ELEMENT LastName (#PCDATA)> <!ELEMENT Salary (#PCDATA)> <!ELEMENT Department(#PCDATA)>

<!ATTLIST Employee id CDATA>

Employee.xml <?xml version="1.0"?>

<!DOCTYPE Employee SYSTEM "employees.dtd"> <Employee id="1111"> <SSN>111-11-1111</SSN> <FirstName>Ann</FirstName> <LastName>Adams</LastName> <Salary>65000.00</Salary> <Department>Accounting</Department> </Employee>

19 OUTPUT: <Employee id="1111"> <SSN>111-11-1111</SSN> <FirstName>Ann</FirstName> <LastName>Adams</LastName> <Salary>65000.00</Salary> <Department>Accounting</Department> </Employee>

20

XML TO SHOW BASIC DTD

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE student[ <!ELEMENT student (name,address,std,marks)> <!ELEMENT name (#PCDATA)> <!ELEMENT address (#PCDATA)> <!ELEMENT std (#PCDATA)> <!ELEMENT marks (#PCDATA)> ]> <student> <name>Shreya</name> <address>Delhi</address> <std>Second</std> <marks>87</marks> </student>

21 OUTPUT: <student> <name>Shreya</name> <address>Delhi</address> <std>Second</std> <marks>87</marks> </student>

22

JAVASCRIPT TO CHECK WHETHER GIVEN STRING IS A PALINDROME

<html> <head> <title>palindrome</title> </head> <body> <h1>Palindrome String</h1> <script language="javascript"> var str = prompt("Enter a string: " ,""); var temp = new Array(10); var i=(str.length-1); for(k=0;k<str.length;k++) { temp[k]=str.charAt(i); i--; } i=0; for(k=0;k<str.length;k++) { s=str.charAt(k); s1=temp[k]; if(s.charAt(i)==s1.charAt(i)) i++; } document.write("<br><br>"); if(i=str.length) document.write(str +" is a Palindrome!!"); else document.write(str + " is not a Palindrome!!"); document.close(); </script> </body> </html>

23 OUTPUT:

24

JAVASCRIPT PROGRAM TO SWAP TWO GIVEN NUMBERS


<html> <head> <title>swap</title> <script language="javascript"> function swap() { var n1=prompt("Enter 1st number : ",""); var n2=prompt("Enter 2nd number : ",""); var t=n1; n1=n2; n2=t; document.write("After swapping : <br>"); document.write("First Number : "+n1); document.write("<br>Second Number : "+n2); } </script> <body onload="swap()"> </body> </head> </html>

25
OUTPUT:

26

JAVASCRIPT PROGRAM TO SHOW POP UP BOXES


<html> <head> <title>pop-ups</title> </head> <body> <script language="javascript"> var str=prompt("Enter a string ",""); alert("Hello World!!!!"); </script> </body> </html>

OUTPUT:

27

JAVASCRIPT TO SHOW EVENT HANDLING


<html> <head> <script type="text/javascript"> function fun() { alert("You have entered "+form1.text1.value); } </script> </head> <body> <center> <h2>Number Guessing Game!!!</h2> </center> <form name="form1" onsubmit=fun();> Enter some Number<input type="password" name="text1"> <input type="submit" value="Submit"> </form> </body>

OUTPUT:

28

SERVLET TO DEMONSTRATE SESSION TRACKING


import java.io.*; import java.util.*; import javax.servlet.*; import javax.servlet.http.*;

public class SessionServletDemo extends HttpServlet { public void doGet(HttpServletRequest req,HttpServletResponse res) throws ServletException,IOException { res.setContentType("text/html"); HttpSession session=req.getSession(); String heading; Integer cnt=(Integer)session.getAttribute("cnt"); if(cnt==null) { cnt=new Integer(0); heading="Welcome you are accessing the page for the First Time"; } else { heading="Welcome once again"; cnt=new Integer(cnt.intValue()+1); }

29 session.setAttribute("cnt",cnt); PrintWriter out=res.getWriter(); out.println("<html>"); out.println("<body>"); out.println("<center>"); out.println("<h1>"+heading); out.println("<h2>The number of previous access="+cnt); out.println("</center>"); out.println("</body>"); out.println("</html>"); } } OUTPUT: Welcome you are accessing the page for the First Time 2nd time OUTPUT: Welcome once again The number of previous access 1

30

SERVLET TO DEMONSTRATE COOKIES


<html> <head> <title>Demo of cookie</title> </head> <body> <form name="form1" method="post" action="http://localhost:8080/mycookieservlet"> <h3> Enter the name of my cookie:</h3> <input type=text name="txt_data" size=30 value=""> <input type=submit value="submit"> </form> </body> </html>

<!MYCOOKIESSERVLET.JAVA - !-> import java.io.*; import javax.sevlet.*; import javax.servlet.http.*;

public class mycookieservlet extends HttpServlet { public void doPost(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException { String txt_data=req.getParameter("txt_data"); Cookie cookie=new Cookie("My_Cookie",txt_data); res.addCookie(cookie); res.setContentType("text/html"); PrintWriter out=res.getWriter(); out.println("<h2>MyCookie has been set to:"); out.println(txt_data);

31 out.println("<br><br>"); out.println("This page shows that the cookie has been added"); out.close(); } } OUTPUT:

MyCookie has been set to:asdf This page shows that the cookie has been added.

32

JSP PROGRAM TO DISPLAY RANDOM COLORS

<%@ page language="java" contentType="text/html" %> <html> <body bgcolor="white"> <%! String randomColor( ) { java.util.Random random = new java.util.Random( ); int red = (int) (random.nextFloat( ) * 255); int green = (int) (random.nextFloat( ) * 255); int blue = (int) (random.nextFloat( ) * 255); return "#" + Integer.toString(red, 16) + Integer.toString(green, 16) + Integer.toString(blue, 16); } %> <h1>Random Color</h1> <table bgcolor="<%= randomColor( ) %>" > <tr><td width="100" height="100">&nbsp;</td></tr> </table> </body> </html>

33 OUPUT:

34

JSP PROGRAM TO PERFORM BASIC CALCULATION

<html> <head> <title>calculator program in jsp</title> <script> function checkValue(){ var msg = ""; if (f1.operand1.value == "" || f1.operand2.value == "") msg += "Operands missing\n"; if (f1.op.selectedIndex == 3 && f1.operand2.value == 0) msg += "Division by zero"; if (msg.length > 0){ alert(msg); return false; } else return true; } </script> </head>

<body>

<% String str = "0",op2 = "0";

35 int result = 0; String op = "+"; char opchar = op.charAt(0); if (request.getParameter("op") != null){ op = request.getParameter("op"); opchar = op.charAt(0); str = request.getParameter("operand1"); op2 = request.getParameter("operand2"); switch(opchar){ case '0': result = Integer.parseInt(str) + Integer.parseInt(op2); break; case '1': result = Integer.parseInt(str) - Integer.parseInt(op2); break; case '2': result = Integer.parseInt(str) * Integer.parseInt(op2); break; case '3': result = Integer.parseInt(str) / Integer.parseInt(op2); break; case '4': result = Integer.parseInt(str) % Integer.parseInt(op2); break; } } %> <center>

<h2>Simple calculator program in jsp</h2>

36 <form method ="get" name ="f1" onsubmit = "return checkValue()"> <input type ="text" size ="20" name ="operand1" value = <%= str %> />

<select name = op size = 1> <option value = "0" <% if (opchar == '0') out.print("selected"); %> >+</option> <option value = "1" <% if (opchar == '1') out.print("selected"); %> >-</option> <option value = "2" <% if (opchar == '2') out.print("selected"); %> >*</option> <option value = "3" <% if (opchar == '3') out.print("selected"); %> >/</option> <option value = "4" <% if (opchar == '4') out.print("selected"); %> >/</option> </select>

<input type ="text" size="20" name ="operand2" value = <%= op2 %> /> <p> <input type = submit value = Calculate />

Result = <%= result + "" %> </form>

</body>

</html>

37 OUTPUT: 1 + 2 Output is 3.

38

SERVLET TO SHOW DATABASE CONNECTIVITY

import java.io.*; import java.util.Enumeration; import javax.servlet.*; import javax.servlet.http.*; import java.sql.*; import java.net.*;

public class emaildb extends HttpServlet{

Connection theConnection; private ServletConfig config;

public void init(ServletConfig config) throws ServletException{ this.config=config;

public void service (HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {

HttpSession session = req.getSession(true);

39 res.setContentType("text/html"); PrintWriter out = res.getWriter();

out.println("<HTML><HEAD><TITLE>Emai List.</TITLE>"); out.println("</HEAD>"); out.println("<BODY bgColor=blanchedalmond text=#008000 topMargin=0>"); out.println("<P align=center><FONT face=Helvetica><FONT color=fuchsia style=\"BACKGROUNDCOLOR: white\"><BIG><BIG>List of E-mail addresses.</BIG></BIG></FONT></P>"); out.println("<P align=center>"); out.println("<TABLE align=center border=1 cellPadding=1 cellSpacing=1 width=\"75%\">");

out.println("<TR>"); out.println("<TD>Name</TD>"); out.println("<TD>E-mail</TD>"); out.println("<TD>Website</TD></TR>");

try{ Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");//Loading Sun's JDBC ODBC Driver theConnection = DriverManager.getConnection("jdbc:odbc:emaildb", "admin", ""); //Connect to emaildb Data source Statement theStatement=theConnection.createStatement(); ResultSet theResult=theStatement.executeQuery("select * from emaillists"); //Select all records from emaillists table. while(theResult.next()) //Fetch all the records and print in table { out.println();

40

out.println("<TR>"); out.println("<TD>" + theResult.getString(1) + "</TD>"); out.println("<TD>" + theResult.getString(2) + "</TD>"); String s=theResult.getString(3); out.println("<TD><a href=" + s + ">" + s + "</a></TD>"); out.println("</TR>");

} theResult.close();//Close the result set theStatement.close();//Close statement theConnection.close(); //Close database Connection

}catch(Exception e){ out.println(e.getMessage());//Print trapped error. }

out.println("</TABLE></P>"); out.println("<P>&nbsp;</P></FONT></BODY></HTML>");

} public void destroy(){ }}

41 OUTPUT:

42

STATIC PAGES FOR AMAZONE LIKE WEBSITE:HOME PAGE


<html> <head> <title>home page</title> </head> <body> <center><b><h1>welcome to amazon.com</h1></b><br><br> <form method="post"action="login.html"> <input type="submit"value="click">registration user login hear </center> </body> </html>

Output:

43

STATIC PAGES FOR AMAZONE LIKE WEBSITE:REGISTRATION


<html> <head> <title>login page</title> </head> <body>

<form method="post" action="login.html"> <p> name: <input type="text" name="user" size="33"> </p> <p> password: <input type="password" name="pwd" size="33"> <br> </p> <br/> confirm password: <input type="password" name="cpwd" size="33"> <br> <input type="submit"> </form>

</body> </html>

44 OUTPUT:

45

STATIC PAGES FOR AMAZONE LIKE WEBSITE:CATALOGUE


<html> <head> <title>books catalog</title> </head> <body> <center><h1><p>welcome to books catalog</p></h1> <table border="1"width="25%"height="50%"> <tr> <th>computers</th> <th>electronics</th> <th>biotech</th> <th>mechanical</th> </tr> <tr> <td> </body> </html>

46 OUTPUT: