A

Laboratory
fileOn
Web design (BCS-353)
Submitted for Bachelor
of technologyIn
Computer science
BATCH 2022-2026
Submitted to: submitted by:

Mr. Hridesh gupta Ashutosh Paswan

DGI, Greater Noida CSE 2nd Year(3rdsem)
Roll No=17051
University Roll No.= 2202300100050
 INDEX
S.No List of programs Pg.No.

1 Design the following static web pages required for an online book store 1-8
web site.

1) HOME PAGE: The static home page must contain three frames.
2) LOGIN PAGE
3) CATOLOGUE PAGE: The catalogue page should contain the
details of all the books available in the web site in a table.
4) REGISTRATION PAGE

2 Write JavaScript to validate the following fields of the Registration 9-14

page.

1. First Name (Name should contains alphabets and the length

should not be less than 6 characters).
2. Password (Password should not be less than 6 characters length).
3. E-mail id (should not contain any invalid and must follow the
standard pattern name@domain.com)
4. Mobile Number (Phone number should contain 10 digits only).
5. Last Name and Address (should not be Empty).

3 Develop and demonstrate the usage of inline, internal and external 15-17
style sheet using CSS

4 Develop and demonstrate JavaScript with POP-UP boxes and 18-21

functions for the following problems:
a) Input: Click on Display Date button using onclick( ) function
Output: Display date in the textbox

b) Input: A number n obtained using prompt

Output: Factorial of n number using alert

c) Input: A number n obtained using prompt

Output: A multiplication table of numbers from 1 to 10 of n using
alert

d) Input: A number n obtained using prompt and add another number

using confirm
Output: Sum of the entire n numbers using alert

5 Write an HTML page that contains a selection box with a list of 5 22

countries. When the user selects a country, its capital should be
printed next in the list. Add CSS to customize the properties of the
font of the capital (color,bold and font size).
6 Write an HTML page including any required JavaScript that takes a 23-24
number from text field in the range of 0 to 999 and shows it in words.
It should not accept four and above digits, alphabets and special
characters.

Develop and demonstrate PHP Script for the following problems: 25-26
7 a) Write a PHP Script to find out the Sum of the Individual Digits.
b) Write a PHP Script to check whether the given number is
Palindrome or not

Create an XML document that contains 10 users information. Write a

8 Java Program, which takes User Id as input and returns the user 27-29
details by taking the user information from XML document using
DOM parser or SAX parser.

Implement the following web applications using (a) PHP 30-35

9 (b) Servlets 36-44
(c) JSP 45-51
A web application that takes a name as input and on submit it shows a hello
<name> page where name is taken from the request. It shows the start time
i at the right top corner of the page and provides a logout button. On clicking
this button, it should show a logout page with Thank You <name > message
with the duration of usage (hint: Use session to store name and time).
ii Write a PHP Program to display current Date, Time and Day.
A web application that takes name and age from an HTML page. If the age
is less than 18, it should send a page with “Hello <name>, you are not
iii authorized to visit the site” message, where <name> should be replaced with
the entered name. Otherwise it should send “Welcome <name> to this site”
message.
A web application that lists all cookies stored in the browser on clicking
iv “List Cookies” button. Add cookies if necessary.
52-57
10 Implement the web applications with Database using
(a) PHP, (b) Servlets and (c) JSP.
58-59
11 Modify the above PHP program to use an xml instead of database
60-67
12 Write a program to design a simple calculator using (a) JavaScript (b)
PHP (c) Servlet and (d) JSP.
 ASSIGNMENT -1
OBJECTIVE: Design a homepage required for an online book store website .

1) HOME PAGE:

The static home page must contain three frames.

Top frame: Logo and the college name and links to Home page, Login page, Registration
page, Catalogue page and Cart page (the description of these pages will be given below).

Left frame: At least four links for navigation, which will display the catalogue of respective
links . For e.g.: When you click the link “IT” the catalogue for IT Books should be displayed in
the Right frame.

Right frame: The pages to the links in the left frame must be loaded

here. Initially this page contains description of the web site.

home.html:

<html>

<frameset rows="15%,9%,76%" bodycolor="pink">

<frameset cols="20%,80%" borderwork="red">

<frame src="logo.html" scrolling="no">

<frame src="title.html" >

</frameset>

<frame src="menu.html" name="f2" scrolling="no">

<frameset cols="15%,85%" bordercolor="red">

<frame src=" branches.html" name="f31">

<frame src="homedes.html" name="f32">

</frameset> </frameset> </html>

Output: home page

logo.html <html>

<body>

<img src=" C:\Documents and Settings\satish\Desktop\monday2\monday\Sunset.jpg" >

</body>

</html> title.html

<html>

<body>
<center<i> ONLINE BOOK SHOP </i> </font></center>

</body>

</html>

branches.html

<html>

<table cellspacing=15>

<tr><td> <a href="csechecktest.html" target="f32">CSE </a></td></tr>

<tr><td><a href="ecechecktest.html" target="f32"> ECE </a> </td></tr>

<tr><td><a href="eeechecktest.html" target="f32">EEE </a></td></tr>

<tr><td><a href="civilchecktest.html" target="f32"> Civil </a> </td></tr>

</table>

</body>

</html>

Output: left frame

menu.html <html>

<body>

<table width="100%">

<tr>

<td> <a href="homedes.html" target="f32">Home </a></td>

<td> <a href="login.html" target="f32">Login </a></td>

<td> <a href="registration.html" target="f32">Registration</a></td>

<td> <a href="catalogue.html" target="f32">Catalogue </a></td>

<td> <a href="cart.html" target="f32">Cart </a></td>

</tr>

</table>

</body> </html>

homedes.html

<html>

<body>

<center> <u> ONLINE BOOK SHOP </u></center>

<p>This website contains various books.

</body></html> Output: top frame

 ASSIGNMENT-2
OBJECTIVE: Create a login page.

login.html

<html>

<head> <title> Login Page </title>

</head>

<body>

<form name="login"> <h3> <u> Login Page </u>

</h3> username: <input type="text" name="uname"

><br> password: <input type="password" name="pwd"

><br>

<input type="submit" value="Submit" >

<input type="reset" value="reset">

</center> </form>

</body></html>
Output: login page(we will get this output when you click on login in home page)
 ASSIGNMENT-3

OBJECTIVE: To design a CATOLOGUE PAGE. The catalogue page should contain the details of all
the books available in the website in a table.

catalogue.html

<HTML>

<HEAD>

<TITLE> lOADING xml dOCUMENT </TITLE>

<SCRIPT LANGUAGE="JavaScript">

function fun()

window.alert("You have selected the book");

</SCRIPT>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

var xmldoc; xmldoc = new

ActiveXObject("Microsoft.XMLDOM");

xmldoc.load("book.xml");

arr=xmldoc.getElementsByTagName("ITEM");

for(i=0;i<arr.length;i++)

document.write("<div align='left'><img src='Sunset.jpg' width='50' height='50'>

</div>");

document.write("<div
align='center'><b>NAME:</b>"+xmldoc.getElementsByTagName("NAME")[i].childNodes[0].nodeValu
e+"<BR></div>");
 document.write("<div
align='center'><b>AUTHOR:</b>"+xmldoc.getElementsByTagName("AUTHOR")[i].childNodes[0].nod
eValue+"<BR></div>");

document.write("<div
align='center'><b>PRICE:</b>"+xmldoc.getElementsByTagName("PRICE")[i].childNodes[0].nodeValu
e+"<BR></div>");

document.write("<div
align='center'><b>PUBLISHER:</b>"+xmldoc.getElementsByTagName("PUBLISHER")[i].childNodes[
0].nodeValue+"<BR></div>");

document.write("<div
align='center'><b>ISBN:</b>"+xmldoc.getElementsByTagName("ISBN")[i].childNodes[0].nodeValue+"
<BR></div>");

document.write("<div align='right'><input type='button' value='Add To

Cart' onclick='fun()'</div>"); document.write("<BR>");

</SCRIPT>

</BODY></HTML>

book.xml

<?xml version="1.0"?>

<BOOK>

<ITEM>

<NAME> JAVA </NAME>

<AUTHOR> SCHIELD </AUTHOR>

<PRICE> 500 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12345 </ISBN>

</ITEM>

<ITEM>

<NAME> C++ </NAME>

 <AUTHOR> HERBERT </AUTHOR>

<PRICE> 499.99 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12346 </ISBN>

</ITEM>

<ITEM>

<NAME> DigitalElectronics </NAME>

<AUTHOR> SCHIELD </AUTHOR>

<PRICE> 500 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12345 </ISBN>

</ITEM>

<ITEM>

<NAME> opticalCommunication </NAME>

<AUTHOR> HERBERT </AUTHOR>

<PRICE> 499.99 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12346 </ISBN>

</ITEM>

<ITEM>

<NAME> Electric Theory1 </NAME>

<AUTHOR> SCHIELD </AUTHOR>

<PRICE> 500 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12345 </ISBN>

</ITEM>
<ITEM>

<NAME> Electric Theory2 </NAME>

<AUTHOR> HERBERT </AUTHOR>

<PRICE> 499.99 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12346 </ISBN>

</ITEM>

<ITEM>

<NAME> CIVIL THEORY1 </NAME>

<AUTHOR> SCHIELD </AUTHOR>

<PRICE> 500 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12345 </ISBN>

</ITEM>

<ITEM>

<NAME> CIVIL THEORY2 </NAME>

<AUTHOR> HERBERT </AUTHOR>

<PRICE> 499.99 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12346 </ISBN>

</ITEM>

</BOOK>
Output: Catalogue page

csechecktest.html

<HTML>

<HEAD>

<TITLE> lOADING xml dOCUMENT </TITLE>

<SCRIPT LANGUAGE="JavaScript">

function fun()

window.alert("You have selected the book");

}
</SCRIPT>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

var xmldoc; xmldoc = new

ActiveXObject("Microsoft.XMLDOM");

xmldoc.load("csebook.xml");

arr=xmldoc.getElementsByTagName("ITEM");

for(i=0;i<arr.length;i++)

document.write("<div align='left'><img src='Sunset.jpg' width='50' height='50'>

</div>");

document.write("<div align='center'><b>NAME:</b>"+xmldoc.getElementsByTagName("NAME")
[i].childNodes[0].nodeValu e+"<BR></div>");

document.write("<div align='center'><b>AUTHOR:</b>"+xmldoc.getElementsByTagName("AUTHOR")
[i].childNodes[0].nod eValue+"<BR></div>");

document.write("<div align='center'><b>PRICE:</b>"+xmldoc.getElementsByTagName("PRICE")
[i].childNodes[0].nodeValu e+"<BR></div>");

document.write("<div
align='center'><b>PUBLISHER:</b>"+xmldoc.getElementsByTagName("PUBLISHER")[i].childNodes[
0].nodeValue+"<BR></div>");

document.write("<div align='center'><b>ISBN:</b>"+xmldoc.getElementsByTagName("ISBN")
[i].childNodes[0].nodeValue+"
<BR></div>"); document.write("<div align='right'><input type='button' value='Add To Cart'

onclick='fun()'</div>"); document.write("<BR>");

</SCRIPT></BODY></HTML>
casebook.xml

<?xml version="1.0"?>

<CSEBOOK>

<ITEM>

<NAME> JAVA </NAME>

<AUTHOR> SCHIELD </AUTHOR>

<PRICE> 500 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12345 </ISBN>

</ITEM>

<ITEM>

<NAME> C++ </NAME>

<AUTHOR> HERBERT </AUTHOR>

<PRICE> 499.99 </PRICE>

<PUBLISHER> TATA </PUBLISHER><ISBN> 12346 </ISBN></ITEM></CSEBOOK>

Output: right frame(we will get this output when we click on cse which was in left frame)
 ASSIGNMENT-4

OBJECTIVE : To design a CART PAGE that contains the details about the books which
are added to the cart.

Program for creating a CART page contains the details about the books which are added to
the cart.The cart page contains the fields: Book, name, Price, Quantity and Amount cart.html

<html>

<body >

<table cellspacing="50" cellpadding="20">

<tr>

<td>Book name</td>

<td>price</td>

<td>quantity</td>

<td>amount</td>

</tr>

<tr>

<td>java2</td>

<td>$35.5</td>

<td>2</td>

<td>$70</td>

</tr>

<tr>

<td>XML bible</td>

<td>$40.5</td>

<td>1</td>

<td>$40.5</td>

</tr> <tr>
<td></td>

<td></td>

<td>Total amount </td>

<td>130.5 </td>

</tr>

</body>

</html>

Output:
Program for creating DTD for the XML file(dtd.xml

<?xml version="1.0" ?>

<?xml:stylesheet type="text/xsl" href="Style.xsl"?>

<!DOCTYPE BOOKS[

<!ELEMENT BOOKS (INFORMATION)>

<!ELEMENT INFORMATION (Book)>

<!ELEMENT Book (book_name,Author_name,ISBN_number,publisher,Edition,Price)>

<!ELEMENT book_name (#PCDATA)>

<!ELEMENT Author_name (#PCDATA)>

<!ELEMENT ISBN_number (#PCDATA)>

<!ELEMENT publisher (#PCDATA)>

<!ELEMENT Edition (#PCDATA)>

<!ELEMENT price (#PCDATA)>

]>

<BOOKS>

<INFORMATION>

<Book>

<book_name>XML BIBLE</book_name>

<Author_name>RAJA</Author_name>

<ISBN_number>11530-115</ISBN_number>

<publisher>Pearson</publisher>

<Edition>I-Edition</Edition>

<Price>750</Price>

</Book>

<Book>

<book_name>HTML</book_name>
<Author_name>DIETL</Author_name>

<ISBN_number>11528-115</ISBN_number>

<publisher>wiley</publisher>

<Edition>III-Edition</Edition>

<Price>470</Price>

</Book>

<Book>

<book_name>JAVASCRIPT</book_name>

<Author_name>RANI</Author_name>

<ISBN_number>11525-115</ISBN_number>

<publisher>Techical</publisher> <Edition>IV-Edition</Edition>

<Price>270</Price>

</Book>

<Book>

<book_name>WEB TECHNOLOGIES</book_name>

<Author_name>PUNTAMBEKAR</Author_name>

<ISBN_number>11530-115</ISBN_number>

<publisher>Technical</publisher>

<Edition>I-Edition</Edition>

<Price>340</Price>

</Book>

</INFORMATION>

</BOOKS>
Style.xsl

<?xml version="1.0" ?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<h2 align="center">My BOOK Collection</h2>

<table border="1" align="center">

<tr bgcolor="GRAY">

<th><font color="white"> BOOK_NAME</font></th>

<th><font color="white"> Author</font></th>

<th><font color="white"> ISBN</font></th>

<th><font color="white"> Publisher</font></th>

<th><font color="white"> Edition</font></th>

<th><font color="white"> Price</font></th>

</tr>

<xsl:for-each select="BOOKS/INFORMATION/Book">

<tr>

<td><xsl:value-of select="book_name"/></td>

<td bgcolor="black"><b><font color="white">

<xsl:value-of select="Author_name"/></font></b></td>

<td><xsl:value-of select="ISBN_number"/></td>

<td><xsl:value-of select="publisher"/></td>

<td><xsl:value-of select="Edition"/></td>

<td><xsl:value-of select="Price"/></td>

</tr>
</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

Output:
 ASSIGNMENT -5
OBJECTIVE : Create a“ Registration form“ having various fields.

1)Name (Text field)

2)Password (password
field)
3) E-mailid(text field)
4) Phone Number(text field)
5) Sex(radio button)
6) Date of birth(3 select boxes)
7) Languages known(checkboxes–English, Telugu, Hindi, Tamil)
8) Address(text area)

HTML code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<link rel="stylesheet" href="registration page.css">

<body>

<h1><B><U>REGISTRATION FORM</U></B></h1>

<form action="form.php" class="register">

<label for="na">Enter your name:</label>

<input type="text" placeholder="NAME" id="na" name="na"><br>

<label for="username">Username:</label>

<input type="text" id="username" name="username"><br>

<label for="pwd">Password:</label>

<input type="password" id="pwd" name="pwd"><br>

<label for="pno">Enter your phone number:</label>

 <input type="text" id="pno" name="pno"><br>

Select Your Sex: <br>

<input type="radio" id="ma" name="SEX" value="MALE">

<label for="ma">Male</label>

<input type="radio" id="fe" name="SEX" value="FEMALE">

<label for="fe">Female</label>

<input type="radio" id="ot" name="SEX" value="OTHER">

<label for="ot">Others</label><br>

<label for="birthday">Date Of Birth:</label>

<input type="date" id="birthday"

name="birthday"><br> Select Your Preffered Language:

<br>

<input type="checkbox" id="eng" name="eng" value="ENGLISH">

<label for="eng"> English</label>

<input type="checkbox" id="HIN" name="HIN" value="HINDI">

<label for="HIN"> Hindi</label>

<input type="checkbox" id="TEL" name="TEL" value="TELEGU">

<label for="TEL">Telegu</label><br>

<label for="ad">Enter your Address:</label>

<input type="text" placeholder="address" id="ad" name="ad"><br>

</form>

</body>

</html>

CSS code:

H1{
text-align: center;
font-size: 50PX;
}
.register{
 text-align: center;
height: 300px;
font-size: 30px;
text-decoration: underline;
line-height: 2;
word-spacing: 5px;
}
input[type=text] {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid blue;
border-radius: 4px;
}
input[type=password] {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid blue;
border-radius: 4px;
}

input[type=date] {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid blue;
border-radius: 4px;
}
Output-

REGISTRATION FORM:
 ASSIGNMENT -6
OBJECTIVE: Write JavaScript to validate the “name” and “password” fields of the registration page.

Program in JavaScript to validate the following fields of the above registration page.

1. Name (Name should contains alphabets and the length should not be less than
6 characters).

2. Password (Password should not be less than 6 characters length).

Program for validating the username (Name should contains alphabets and the
length should not be less than 6 characters).

1)NAME VALIDATION

<html>

<head>

<title>validating a textbox</title>

<script language="javascript">

function button_click()

{ var fname=f.fname.value; var spchar = "!@#$

%^&*()+=-[]\\\';,./{}|\":<>?~"; var

number="0123456789"; if(fname.length<6)

alert("first name atleast 6 characters");

} if(fname!="") { for (var

i=0;i<fname.length;i++)

{ if(spchar.indexOf(fname.charAt(i)) != -

1)

{ alert ("Userid should not have

special characters");
f.fname.value=" "; return

false;

} } if(fname!="") { for

(var i=0;i<fname.length;i+

+)

{ if(number.indexOf(fname.charAt(i)) != -

1)

{ alert ("Userid should not

have numbers");

f.fname.value=""; return

false;

}}

if(fname.length>=6)

alert("valid

username");

</script>

<body>

<center>

<form name="f">

<table>

<h2 align="center">USER NAME VALIDATION</h2>

<tr>

<td align="right">USERNAME:</td>

<td><input type="text" name="fname" maxlength=20 size=30></td>

</tr>

<br>

<tr>

<td></td>

<td><input type="button" value="SUBMIT" onClick="button_click()"></td></tr>

</form>

</table>

</center>

</body>

</html>
OUTPUT:
Program for password field validation(should not be less than 6

characters) (pwdvalid.html)

<html>

<head>

<title>PASSWORD VALIDATION</title>

<script language="javascript"> function

pass()

{ var pw=f.pw.value;

var cpw=f.cpw.value;

if(pw.length<6)

alert("PASSWORD MUST BE 6 CHARACTERS");

} if(pw!=cpw)

alert("PASSWORD DON'T MATCH");

} else

if(pw.length>=6)

alert("PASSWORD VALIDATION SUCCESS");

</script>

</head>

<body>

<form name="f">

<table align="center">

<h2 align="center">PASSWORD VALIDATION</h2>

<br>
<tr>

<td align="right">PassWord:</td>

<td align="left"><input type="PassWord" maxlength="10" size="30"name="pw"></td>

</tr>

<tr>

<td align="right">Confirm PassWord:</td>

<td align="left"><input type="PassWord" maxlength="10" size="30"name="cpw"></td>

</tr>

<tr>

<td></td>

<td><input type="button" value="SUBMIT" onClick="pass()"/></td>

</tr>

</table> </form> </body> </html>

Output:
 ASSIGNMENT -7
OBJECTIVE: Write JavaScript to validate the “Email ID ” and “Phone Number” fields of the
registration page.

Program for E-mail id validation(should not contain any invalid and must follow the
standard pattern-)(emailvalid.html)
<html>

<head>

<title>EMAIL ID VALIDATION</title>

<script language="javascript"> function

check()

{ if(f.txtname.value.indexOf('@')==-1)

{ alert("invalid");

else if((f.txtname.value.indexOf('@')==0)||(f.txtname.value.indexOf('.')==0)||
(f.txtname.value.indexOf('@'))>

(f.txtname.value.indexOf('.')))

{ alert("invalid email

id");

f.txtname.value=""; }

else alert("valid email

id");

</script>

</head>

<body>

<form name="f">

<table align="center">
<h2 align="center">EMAIL VALIDATION</h2>

<br>

<tr>

<td align="right">Email-ID:</td>

<td align="left"><input type="text" name="txtname" size=40>

</tr>

<tr>

<td></td>

<td><input type="button" value="SUBMIT" onClick="check()"/></td>

</tr>

</table>

</form>

</body>

</html>
Output:
Program for Phone number validation(Phone number should contain 10
digits only)(phnvalid.html)
<html>

<head>

<title>PHONE NUMBER VALIDATION</title>

<script language="javascript"> function

phno()

{ var

ph=f.ph.value;

if(ph.length==10)

{ if(isNaN(ph)) alert("It is not a valid

Phone number"); else alert("It is a

valid Phone number");

} else alert("Please enter a valid phone

number");

</script>

</head>

<body>

<form name="f">

<table align="center">

<br><br><br><br>

<h2 align="center">PHONE NUMBER VALIDATION</h2>

<br>

<tr>

<td align="right">PHONE NO:</td>

<td align="left"><input type="text" maxlength="15" size="30"name="ph"></td>

</tr>

<tr>

<td></td>

<td><input type="button" value="SUBMIT" onClick="phno()"/></td>

</tr>

</table> </form> </body> </html>

Output:
 ASSIGNMENT -8
OBJECTIVE: Design a web page using CSS(Cascading Style Sheets) which includes Use of different
font, styles and background image.

1. Use different font styles:

In the style definition you define how each selector should work (font, color

etc.). Then, in the body of your pages, you refer to these selectors to activate the

styles. Program for creating inline style sheets

1) Inline.html

<head>

<title>inline style sheet</title>

</head> <body> normal bold:<b>web

technologies</b><br> after applying inline

style

<b style="color:red;font-size:22px;font-family:arial;text-decoration:underline">Web technologies</b>

</body>

</html>

Output:
2. Set a background image for both the page and single elements on the page.

Program for creating the background image(image.html)

<html>

<head>

<style type="text/css"> body

background-image: url(“C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\

Sunset.jpg"); background-repeat:no-repeat

</style>

</head>

<body>

<center>

<font color=fuchsia>

<h1>WebTechnologies</h1>

</center>

</body>

</html>
Output:
 ASSIGNMENT -9
OBJECTIVE: Using CSS Control the repetition of the image with the background-repeat property and
define styles for links.

Control the repetition of the image with the background-repeat

property. As background-repeat: repeat

Tiles the image until the entire page is filled, just like an ordinary background image

in plain HTML.

Program for image repetition

<html>

<head>

<style type="text/css"> body{

background-image:url("C:\Documents and Settings\All Users\Documents\My Pictures\

Sample Pictures\Winter.jpg"); background-repeat:repeat

</style>

</head>

<body>

<center>

<font color=fuchsia>

<h1>satish</h1>

</font>

</center>

</body>

</html>
Output:

Define styles for links as A:link A:visited

A:active

A:hover

Defining styles using CSS(external.html)

<html>

<head>

<title>external style sheet</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body bgcolor="black">
<font color=white >normal bold : <b>Web technologies</b><br>after applied embedded style :

<b class="headline">Web Technologies</b><br>

<b>

<a href="login.html" class="xlink">CROSS LINK</a>

<br>

<a href="login.html" class="hlink">HELP LINK</a><br><br>

<a href="login.html">another LINK</a>

</b>

</font>

</body>

</html>

style.css

b.headline {color:green; font-size:22px; font-family:arial; text-decoration:underline}

.xlink {cursor:crosshair;color:cyan}

.hlink{cursor:help;color:purple}

A:link {text-decoration:none;color:green} /* unvisited link */

A:visited {text-decoration: none;color:yellow} /* visited link */

A:active {text-decoration: none;color:blue} /* selected link */

A:hover {text-decoration: underline; color: red} /* mouse over link

*/
Output: