You are on page 1of 19

GURU GOBIND SINGH INDRAPRATSHA UNIVERSITY

Front End Design Tools& Web Services

Practical File

Made by: Akanksha Garg 01416403210 B.Tech CSE 7th Sem

INDEX
1. Formatting with HTML i. Working with Tables ii. Creating Lists iii. HTML Forms and Input iv. HTML Styles, Links and images v. Working with Frames vi. Div and Span Tag vii.Making Cascading Style Sheet 2. JavaScript i. Check Even Odd Number Java Script Program ii. Fibonacci Series JavaScript iii. Copy Text Java Script Program iv. Form Validation in Java Script Program v. Popup Window Program vi. Palindrome Program Java Script vii. Simple Switch Case in Java Script Program 3. Write a JSP program to display current date of Experiments & Time on the web 4. Using JDBC concepts write a program to perform the task of insertion, updation and deletion of records in Oracle database for Student Management System.

1. Formatting with HTML i. Working with 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. <html> <head> <title>Working with tables</title> </head> <body> <p>Table</p> <table border="1"> <tr> <th>Name</th> <th>Marks</th> </tr> <tr> <td>Neha</td> <td>78</td> </tr> <tr> <td>Raj</td> <td>75</td> </tr> </table> </body> </html>

ii. <html>

Creating Lists

<head><title>Lists</title></head> <body> <h3>Ordered List</h3> <ol> <li>Item 1</li> <li>Item 2</li> </ol> <h3>Unordered List</h3> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <h3>Desciption List</h3> <dl> <dt>Item 1</dt> <dd>Description for Item1</dd> <dt>Item 2</dt> <dd>Description for Item2</dd> </dl> </body> </html>

iii. <html>

HTML Forms and Input

<head><title>Forms</title></head> <body> <form> First name:<input type="text" name="firstname"><br> Last name:<input type="text" name="lastname"><br> Address:<input type="text" name="address"><br> Age:<input type="text" name="age"><br> Sex:<input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female<br> Username: <input type="text" name="username"><br> Password: <input type="password" name="pwd"><br> <input type="submit" value="Submit"> </form> </body> </html>

iv.

HTML Styles, Links and images

<html> <head><title>Images and Links</title></head> <body> <h4>Image</h4> <imgsrc="F:\GGSIPU\Sem 7\FEDT\File\Smiley Face.jpg" alt="Smiley face" width="100" height="100"> <h4>Link to Google</h4> <ahref="http://www.google.com">Google</a> </body> </html>

v. <html> <head>

Working with Frames

<title>Working with Frames</title> </head> <body> <p>Frame</p> <iframesrc="F:\GGSIPU\Sem height="250"></iframe> </body> </html> 7\FEDT\File\Images and Links.html" width="200"

vi. <html> <body>

Div and Span Tag

<!DOCTYPE html>

<h2>Using div tags</h2> <div id="container" style="width:500px"> <div id="header" style="background-color:#443266;color:#FFFFFF";text-align:center> <h1 style="margin-bottom:0;">Main Title</h1></div> <div id="menu" style="background-color:#C3C3E5;height:200px;width:100px;float:left;"> <b>Menu</b><br> Content1<br> Content2<br> Content3</div> <div id="content" style="backgroundcolor:#EEEEEE;height:200px;width:400px;float:left;"> Main Content</div> <div id="footer" #FFFFFF"> Footer</div> </div> <h2>Using Table</h2> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>Main Title</h1> </td></tr> <tr> <td style="background-color:#FFD700;width:100px;"> <b>Menu</b><br> Content1<br> Content2<br> </td> style="background-color:#443266;clear:both;text-align:center;color:

<td style="background-color:#EEEEEE;height:200px;width:400px;"> Content goes here</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> Footer</td> </tr> </table> </body> </html>

vii. <html>

Making Cascading Style Sheet

<!DOCTYPE html>

<body style="background-color:cyan;"> <h2 style="background-color:red;text-align:center">This is a heading</h2> <p style="background-color:green;color: paragraph.</p> #FFFFFF;text-align:center">This is a

<h1 style="font-family:verdana;text-align:center">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;text-align:center">A paragraph.</p> </body> </html>

2. JavaScript i. <html> <head> </head> <script type="text/javascript"> var number; number=prompt("Enter the number!"," ") if(number%2==0) document.write("The number is even."); else document.write("The number is odd."); </script> <body> </body> </html> Check Even Odd Number Java Script Program

ii. <html> <head> </head>

Fibonacci Series JavaScript

<script type="text/javascript"> var a=1,b=0,c; var limit; limit=prompt("Enter the limit of the series:"," "); alert("The series is :") while(b<=limit) { document.write(b+" "); c=a+b; a=b; b=c; } </script> <body> </body> </html>

iii.

Copy Text Java Script Program

<html> <head> </head> <script type="text/javascript"> function Copy() { CopiedTxt = document.selection.createRange(); CopiedTxt.execCommand("Copy"); } </script> <body> <form name="Form1"> <br /><br /> <textarea id="txtArea" cols="60" rows="5">We can copy text from this textarea.</textarea> <br> <input type="button" onClick="Copy()" value="" /> </form> </body> </html>

iv.

Form Validation in Java Script Program 1.0 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <script type="text/javascript"> function validate() { if(document.myForm.Name.value == "" ) { alert( "Please provide your name!" ); document.myForm.Name.focus() ; return false; } if(document.myForm.EMail.value == "" ) { alert( "Please provide your Email!" ); document.myForm.EMail.focus() ; return false; } if(document.myForm.Zip.value == "" || isNaN(document.myForm.Zip.value ) || document.myForm.Zip.value.length != 5 ) { alert( "Please provide a zip in the format #####." ); document.myForm.Zip.focus() ; return false; } if(document.myForm.Country.value == "-1" ) { alert( "Please provide your country!" ); return false; }

return( true ); } </script> <body> </body> </html>

v. <html> <head> </head>

Popup Window Program

<script language="javascript"> functionpopup_window() { var win=window.createPopup(); win.document.body.style.backgroundColor="lime"; win.document.body.style.border="lime"; win.document.body.style.border="solid black 10px"; win.document.body.innerHTML="<b>HELLO<b>"; win.show(200,100,500,200,document.body); } </script> <body> <input type="button" onClick="popup_window()"> </body> </html> name="b1" value="Show Popup Window"

vi. <html> <head> </head>

Palindrome Program Java Script

<script type="text/javascript"> functionchkpalindrome() { vartemp,rev=0 var no=parseInt(frm.t1.value) temp=no while(no>0) { rev=(rev*10)+(no%10) no=Math.floor(no/10) } if(rev==temp) alert(temp +" is Palindrome") else alert(temp + " is Not Palindrome") } </script> <body> <form name=frm> Enter any Number:<input type=text name=t1 /><input type=button value='Check' onclick="chkpalindrome();"> </form> </body> </html>

vii. <html> <head> </head>

Simple Switch Case in Java Script Program

<script type="text/javascript"> var month; alert("Switch program to find the month!"); month=prompt("Enter the number:"," "); month=parseInt(month); switch(month){ case 1: alert("January"); break; case 2:alert("Febuary"); break; case 3:alert("March"); break; case 4:alert("April"); break; case 5:alert("May"); break; case 6:alert("June"); break; case 7:alert("July"); break; case 8:alert("August"); break; case 9:alert("September"); break; case 10: alert("October"); break; case 11:alert("November"); break; case 12:alert("December"); break; default:alert("Wrong choice..!"); } </script>

<body> </body> </html>

3. Write a JSP program to display current date of Experiments & Time on the web <%@ page import ="java.util.*" %> <% Date today = new Date(); out.println(today); %> 4. Using JDBC concepts write a program to perform the task of insertion, updation and deletion of records in Oracle database for Student Management System. <%@page import="java.sql.*, java.util.*" %> <% Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); Connection con = DriverManager.getConnection("jdbc:odbc:fedt"); PreparedStatementps = con.prepareStatement("Insert into student values(?,?,?,?)"); ps.setInt(1,24); ps.setString(2,"Tarun"); ps.setString(3,"25"); ps.setString(4,"Noida"); intnum=ps.executeUpdate(); out.println("number of rows inserted are:" + num ); PreparedStatement ps1 = con.prepareStatement("update student set age=23 where StudentID=?"); ps1.setInt(1,56); num=ps1.executeUpdate(); out.println("number of rows updated are:" + num ); PreparedStatement ps2 = con.prepareStatement("delete from student where StudentID=?"); ps2.setInt(1,50); num=ps2.executeUpdate(); out.println("number of rows deleted are:" + num ); con.close(); %>

You might also like