WEB TECHNOLOGIES LAB 2014 15

(1)

1. Write a HTML program illustrating text formatting.

<p><strong>This is strong</strong></p> <p><big>This text is big</big></p>

<p><em>This text is emphasized</em></p> <p><i>This text is italic</i></p>

<p><small>This text is small</small></p>

<p>This is<sub>subscript</sub>and<sup>superscript</sup></p> </body>

</html>

(2)

2. Illustrate font formatting using HTML code.

<fontstyle="font-family:verdana">Technical publisher</font<br> <font

style="font-family:arial:arial;color:red;font-size:20px;">Aparagraph.</font><br>

<font style="font-family:times new roman;color:green;font-size:12">A heading</font>

<br>Technical publishers</br> <u>Technical publishers</u> <i>Technical publishers</i> </body>

</html>

(3)

3. Prepare a sample code to illustrate links between different Sections of the page.

<a href="#c4">see als chapter 4.</a> </p>

<h2>Chapter 1 </h2>

<p>this chapter explains ba bla bla</p> <h2>Chapter 2 </h2>

<p>This chapter explains ba bla bla</p> <h2>Chapter 3 </h2>

<p>This chapter explains ba bla bla</p> <h2><a name="C4">Chapter 4 </a></h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 5 </h2>

<p> This chapter explains ba bla bla</p> <h2>Chapter 6 </h2>

<p> This chapter explains ba bla bla</p> </body>

</html>

(4)

4.Create a simple HTML program to illustrate three types of lists.

<ul> 1.Unordered list</ul> <ul>

<li>Technical</li> <li>vikas</li> <li>suresh</li> </ul>

<u>2.Ordered List</u> <ol>

<li>Technial</li> <li>vikas</li> <li>suresh</li>

<u>3.Definition List</u> <dl>

<dt>Technical </dt> <dd>--Test papers</dd> <dt>vikas</dt>

<dd>--text books</dd> <dt>suresh</dt>

<dd>--School books</dd> </dl>

</body> </html>

(5)

5. Embed a real player in your web page.

</body> </html>

(6)

6. Divide the web page as Row wise and Column wise

</html>

(7)

7. Using “table” tag, align the images in Rectagle Shape

</tr> <tr>

<tr>

(8)

(9)

8. Create a student registration system with the following fields: Name, Regdno, Gender, street, city, state, pincode, stdcode,

phone,birth, college, experience, course code. Create a main object called “Stu_info” with all the fields and “College” and Experience” as sub objects with in the main object. Create separate object definition for College and Experience with the following fields: College: Name, Location, Degree Experience: Employer, Location, Duties and Period.

<title>student registration system</title> <script language="javascript">

</script>

<h2>The Student Information System</h2>

name:  <input type=text name=sname value=" "><br> regdno:  <input type=text name=redno value=" "><br> gender:  <input type=radio

name=gender>male<input type=radio name=gender>female<br>

city:  <input type=text name=city value=" "><br> street:  <input type=text name=street value=" "><br> state:  <input type=text name=state value=" "><br>

pincode:  <input type=text name=pincode value=" "><br> stdcode:  <input type=text name=stdcode value=" "><br> phone:  <input type=text name=phone value=" "><br> course:  <input type=text name=course value=" "><br> <h2>College Details</h2>

college name:  <input type=text name=cname value=" "><br> location:  <input type=text name=location value=" "><br> Degree:  <input type=text name=degree value=" "><br> <h2>Experience Details</h2>

Employer:  <input type=text name=employer value=" "><br> Location:  <input type=text name=location value=" "><br> Duties:  <input type=text name=duties value=" "><br> Period:  <input type=text name=period value=" "><br> <input type=button value=Sumbit>

(10)

(11)

9.Create an Inline style sheet for your web page.

<title>inline style sheet</title> </head>

<body>

<p style="font-family:arial;color:red;font-size:20"> hi this my arial message</p>

<p style="font-family:verdana;color:green;font-size:40;"> hi this my verdana message</p>

</body> </html>

(12)

10. Write a CSS program to give different colors for different heading tags.

<title>dhtml programs</title> <style type="text/css">

h1{color:red} h2{color:blue} h3{color:green} h4{color:yellow} h5{color:pink} h6{color:black} </style>

</head> <body>

<h1>this is my message </h1> <h2>this is my message </h2> <h3>this is my message</h3> <h4>this is my messgag</h4> <h5>this is my message</h5> <h6>this is my message</h6> </body>

</html>

(13)

11. Using CSS, invert the behavior of <h1> to <h6> tags.

<title>inveting the h1 to h6 tags</title> <style type="text/css"> h1 { font-weight:bold; font-size:0.7 em; } h2 { font-weight:bold; font-size:0.8 em; } fh3 { font-weight:bold; font-size:1.0 em; } fh4 { font-weight:bold; font-size:1.3 em; } fh5 { font-weight:bold; font-size:1.5em; } fh6 { font-weight:bold; font-size:2.0 em; } </style> </head> </body>

<h1>inverted h1 </h1> <h2>inverted h2 </h2> <h3>inverted h3 </h3> <h4>inverted h4 </h4> <h5>inverted h5 </h5> <h6>inverted h6 </h6> </body>

(14)

(15)

12. Create an External Style sheet for creating a font family.

<title>external stylesheet</title> ,<style type="text/css">

</head> <body>

<a href="pro33.html">click here to see pro33 output</a> <h1>this is an arial type font with size 32 pixels</h1> <h2>this is an arial type font with size 24 pixels</h2> </body>

</html>

(16)

13. Illustrate the creation of Embedded Style sheet.

<title>embedde style sheets</title> <style type="text/css">

h1 {

font-family:"Times New Roman"; font-size:36px; background:#ffffff; color:maroon; h2 { font-family;arial,verdana,sans-serif; font-size:20px; background:#ffffff; color:black; } h3 { text-decoration:underline; } p { font-familly:arial,verdana,sans-serif; font-size:16px; background:#ffffff; color:navy; } </style> </head> <body>

<h3>an example of embedde style sheet</h3> <h1>the message in times roman</h1>

<h2>the message in arial with 20 px size</h2> <p>A paragraph with arial and 16px size</p> </body>

(17)

(18)

14. Write a Program in Java Script to find Factirial of a Given Number

<html>

<head><title>factorial</title> <script language="javascript"> var n,i,fact=1;

n=parseInt(window.prompt("value for n","0")); if(n==0)

document.writeln("fact of 0 is 1"); else

{

for(i=1;i<=n;i++) fact=fact*i;

document.writeln("fact="+fact); }

</script> </head>

(19)

15. Write a Java Script to accept the first, middle and last names of the user and print the name.

<title>accept first,middle,last names</title> <script language="javascript">

function printname() {

first = prompt("enter ur first name"); middle=prompt("enter ur middle name"); last=prompt("enter ur last name");

alert("hello Mr."+first+middle+last); }

</script> </head>

</html>

(20)

16. Write a Program in Java Script for the Bianry Search

<html><head><title>jyothi</title> <script language="javascript"> var n,a,i,key,l=0,h;

n=parseInt(window.prompt("value for n","0")); a=new Array(n); for(i=0;i<n;i++) a[i]=parseInt(window.prompt("ele","0")); key=parseInt(window.prompt("key ele","0")); h=n; binsearch(a,key,l,h); function binsearch(a,key,l,h) { var m; if(l<=h) { m=parseInt((l+h)/2); if(key<a[m]) { h=m-1; binsearch(a,key,l,h); } else if(key>a[m]) { l=m+1; binsearch(a,key,l,h); } else if(key=a[m])

(21)

(22)

17. Write a Program in Java Script for the Bubble Sort

<title>bubble sort</title> <script language="javascript"> var n,i,j,t,l;

n=parseInt(window.prompt("val n","0")); var a=new Array(n);

for(i=0;i<n;i++)

a[i]=parseInt(window.prompt("ele","0")); l=n-1;

for(i=0;i<l;i++) {

for(j=0;j<l-i;j++) {

if(a[j]>a[j+1]) {

t=a[j] a[j]=a[j+1]; a[j+1]=t; }

} }

document.writeln("sorted array"); for(i=0;i<n;i++)

document.writeln(a[i]);

</script></head><body>sorting</body> </html>

(23)

(24)

18. Write the script for the various validations given below: a. Candidate code should be generated

b. Date of Birth should not be null and age should be more than 21. c. All alphabet fields should be validated.

d. All number fields should accept only numbers.

e. Total experience should be calculated and displayed after accepting input for the “From” and “To” fields in the table.

<html> <head> <title>validations</title> <script language="javascript"> fuction validate() { cd=parseInt(document.f.cd.value); alert("the candidate code"+cd); d=parseInt(document.f.day.value); m=parseInt(document.f.mont.value); y=parseInt(document.f.year.value); now=new Date(); yer=now.geYear(); age=yer-y; if(age<=21)

alert("age of the candidate must be greater than 21"); fro=parseInt(document.f.from.value);

to=parseInt(document.f.to.value); exp=to-fro;

alert("candidate expreience is "+exp+"year"); }

</script> </head> <body>

enter code:  <input type=text value=" "name=cde><br> <h3>enter ur date of birth</h3>

enter day:  <input type=text value=" "name=day><br>

enter month:  <input type=text value=" "name=month><br> enter year:  <input type=text value=" "name=year><br> <h3>ente the experience details</h3>

from year:  <input type=text value=" "name=from><br> to year:  <input type=text value=" "name=to><br> <input type=button value=validate onClick=validate()>

(25)

(26)

19. Design a simple calculator by using Java Script. <html> <head> <title>simple calculator</title> <script language="javascript"> function add() { n1=parseInt(document.f.first.value); n2=parseInt(document.f.second.value); result=n1+n2; document.f.res.value=result; } function sub() { n1=parseInt(document.f.first.value); n2=parseInt(document.f.second.value); result=n1-n2; document.f.res.value=result; } function mul() { n1=parseInt(document.f.first.value); n2=parseInt(document.f.second.value); result=n1*n2; document.f.res.value=result; } function div() { n1=parseInt(document.f.first.value); n2=parseInt(document.f.second.value); result=n1/n2; document.f.res.value=result; } </script> </head> <body> <center>

<h2> A Simple Calculator</h2> <form name=f>

enter the first number here:  <input type=text name=first value=" "><br>

enter the second number here:  <input type=text name=second value=" "><br>

result:  <input type=text value=" "name="res"><br><br>

(27)

</form> </center> </body> </html>

(28)

20.Write a DHTML Program for Rollover Buttons <html>

if(document.images) {

b1=new Image(); b2=new Image(); b1.src="img1.jpg"; b2.src="img2.jpg"; }

</script></head> <body>

<a href="#" onmouseover="document.rollover.src=b2.src"

onmouseout="document.rollover.src=b1.src">

(29)

21.Write a ASP Program to get the Radio Button and Check Box Values

<form action="#" method="post"> <p>select the Radio Button</p>

<input type="radio" name="gender" value="female">female</input> <br>

<p>select the Check Boxes </p>

<%

Dim gender

gender=request.form("gender") If gender<>" " Then

response.write(gender) End If %> <% Dim q1,q2 q1=request.form("q1") If q1<>" " Then

response.write(q1 & " ") End If

q2=request.form("q2") If q2<>" " Then response.write(q2) End If

(30)

(31)

22.Write a ASP Program to implement Cookies in ASP <%

Response.Cookies("user")("fname")="sha" Response.Cookies("user")("lname")="xxx" Response.Cookies("user")("age")="28" %>

<html> <body> <% Dim x,y

For each x in Request.Cookies

If Request.Cookies(x).Haskeys Then For each y in Request.Cookies(x)

response.write(x & ":" & y & "=" & Request.Cookies(x)(y)) response.write("<br>")

Next End If Next %> </body> </html>