Scribd
Upload
105 views11 pages

JYOTHI

The document contains code snippets for creating a website catalog with HTML and CSS. It includes code for a book catalog page with data in a table, navigation links, group pages, and basic styling with CSS including formatting text, setting backgrounds, applying hover effects to links, and using classes. The snippets show the structure and elements needed to build out the initial pages and styling of an e-commerce bookstore website.

Uploaded by

Muthe Murali
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
105 views11 pages

JYOTHI

The document contains code snippets for creating a website catalog with HTML and CSS. It includes code for a book catalog page with data in a table, navigation links, group pages, and basic styling with CSS including formatting text, setting backgrounds, applying hover effects to links, and using classes. The snippets show the structure and elements needed to build out the initial pages and styling of an e-commerce bookstore website.

Uploaded by

Muthe Murali
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 11

Week-1

Catalogue program:

<html>
<head>
<title> Preparation of catalogue</title>
</head>
<body>
<h1 align="center"> BOOKS INFORMATION</h1>
<table border=1 height=250 width=250 align="center">
<Thead>
<TR>
<TH>SNO</TH>
<TH>BOOKTITLE</TH>
<TH>AUTHOR</TH>
<TH>PUBLICATIONS</TH>
<TH>PRICE</TH>
<TH>SELECT</TH>
</TR>
</Thead>
<Tbody>
<TR>
<td>1</td>
<td>Java</td>
<td>Herbert</td>
<td>TATA</td>
<td>$50</td>
<td><input type="button" value="b1"></td>
</TR>
<TR>
<td>2</td>
<td>WT</td>
<td>Bates</td>
<td>TATA</td>
<td>$100</td>
<td><input type="button" value="add to cart"></td>
</TR>
<TR>
<td>3</td>
<td>SPM</td>
<td>Royce</td>
<td>SSR</td>
<td>$70</td>
<td><input type="button" value="b2"></td>
</TR>
</Tbody>
</Table>
</body>
</html>

FILE-1

<HTML>
<HEAD>
<TITLE>WELCOME</TITLE>
</HEAD>
<BODY bgcolor=gray text=#442211>
<center><img src="Water lilies.jpg" width=50heigth=80></center>
<MARQUEE><B><U><I>WELCOME TO CSEA.COM</I></U></B></MARQUEE>
</BODY>
</HTML>

FILE-2

<HTML>
<HEAD>
<TITLE>FILE2</TITLE>
</HEAD>
<BODY bgcolor=pink>
<A HREF="flie4.html" target=n4>HOME</A>
&nbsp;&nbsp;<A HREF="LOGIN.HTML" target=n4>LOGIN</A>
&nbsp;&nbsp;<A HREF="REGISTRATION.HTML" target=n4>REGISTRATION</A>
&nbsp;&nbsp;<A HREF="CATALOG.HTML" target=n4>CATALOG</A>
&nbsp;&nbsp;<A HREF="CART.HTML" target=n4>CART</A>
</BODY>
</HTML>

FILE-3

<html>
<body bgcolor=#cffcff>
<h1 >Groups</h1>
<h3><ul type=disc>
<li><a href="cse.html" target=n4>CSE</a></li>
<li><a href="ece.html" target=n4>ECE</a></li>
<li><a href="it.html" target=n4>IT</a></li>
<li><a href="eee.html" target=n4>EEE</a></li>
<li><a href="mech.html" target=n4>MECH</a></li>
</ul></h3>
</body>
</html>

FILE-4

<html>
<body background="blue hills.jpg">
<h1 ALIGN=CENTER>WELCOME</H1>
</body>
</html>

LOGIN

<html>
<head>
<title> LOGIN PAGE </title>
</head>
<body>
<h1 align="center">LOGIN INFORMATION</h1>
<form method="get">
<br>
<br>
<font size=5>
Name:<input type="text" name="n1" value="NAME"><br><br>
Password:<input type="password" name="n2"><br><br>
<input type="submit" name="n3" value="SUBMIT">
<input type="reset" name="n4" value="RESET">
</font>
</form>
</body>
</html>

Website

<html>
<head>
<title> WEBSITE CREATION </title>
</head>
<frameset rows="10%,10%,80%">
<frame src="FILE1.html" name="n1">
<frame src="FILE2.html" name="n2">
<frameset cols="20%,80%">
<frame src="file3.html" name="n3">
<frame src="file4.html" name="n4">
</frameset>
</frameset>
</html>

Weekk-2

Cart Information:

<html>
<head>
<title> Calculation of cart </title>
</head>
<body>
<h1 align="center">CART INFORMATION</h1>
<table border=0 height=250 width=250 align="center">
<Thead>
<TR>
<TH>BOOKNAME</TH>
<TH>PRICE</TH>
<TH>AMOUNT</TH>
</TR>
</Thead>
<Tbody>
<TR>
<td>Java</td>
<td>$50</td>
<td>$50</td>
</TR>
<TR>
<td>WT</td>
<td>$100</td>
<td>$100</td>
</TR>
<TR>
<td colspan=2>Total amount</td>
<td>$150</td>
</TR>
</Tbody>
</Table>
</body>
</html>
Registration:

<html>
<head>
<title> REGISTRATION PAGE </title>
</head>
<body>
<h1 align="center"> WELCOME TO REGISTRATION </h1>
<br><br><br>
<form method="get">
<font size=5>
Name:<input type="text" name="n1"><br><br>
Password:<input type="password" name="n2"><br><br>
Email id:<input type="text" name="n3">@y.com<br><br>
Phone number:<input type="text" name="n4"><br><br>
Sex:<br>Male<input type="radio" name="r1" value="MALE">
Female<input type="radio" name="r2" value="FEMALE"><br><br>
Date Of Birth:
<select name="s1">
<option selected>dd</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="s2">
<option selected>mm</option>
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>Apr</option>
<option>May</option>
<option>Jun</option>
<option>Jul</option>
<option>Aug</option>
<option>Sep</option>
<option>Oct</option>
<option>Nov</option>
<option>Dec</option>
</select>
<select name="s3">
<option selected>yy</option>
<option>1991</option>
<option>1990</option>
<option>1989</option>
<option>1988</option>
<option>1987</option>
<option>1986</option>
<option>1985</option>
<option>1984</option>
<option>1983</option>
</select>
<br>
<br>
<br>
Languages known:<br>
Eng:<input type="checkbox" name="c1" value="e"><br>
Tel:<input type="checkbox" name="c2" value="t"><br>
Hin:<input type="checkbox" name="c3" value="h"><br><br>
Address:<Textarea rows="8" cols="25"></Textarea>
<br>
<br>
<input type="checkbox" name="c3" value="S">
I accept the above terms and conditions
<br><br>
<input type="submit" name="n5" value="SUBMIT">
</font>
</form>
</body>
</html>

Week-3

Valid Information:

<html>
<head>
<title> LOGIN </title>
<script type="text/javascript">
function login()
{
//Define rules/patterns for regular expression
var re_name=new RegExp("^[A-Z][a-zA-Z]+$");
//How can we read values from component
var n=document.forms[0].elements[0].value;
var password=new RegExp("[a-zA-Z0-9_.#]+$");
var n1=document.forms[0].elements[1].value;
var pw_length=n1.length;
var phoneno=new RegExp("[//d]+$");
var n2=document.forms[0].elements[2].value;
var ph_length=n2.length;
var emailid=new RegExp("[a-zA-Z0-9]+$");
var n3=document.forms[0].elements[3].value;
if(n.match(re_name))
{
alert("Valid username");
if(pw_length>=6)
{
alert("valid password");
}
else
{
alert("invalid password");
}
}
else
{
alert("invalid username");
}
if(ph_length<=10)
{
alert("valid phone number");
}
else
{
alert("invalid phone number");
}
if(n3.match(emailid))
{
alert("Valid email id");
}
else
{
alert("invalid email id");
}
}
</script>
</head>
<body>
<h1 align="center">LOGIN FORM</h1>
<form>
<br>
<br>
<font size=5>

Name:<input type="text" ><br><br>


Password:<input type="password" ><br><br>
Phone Number:<input type="text"><br><br>
email id:<input type="text">@gmail.com<br><br>
<input type="button" onclick="login()" value="login">

</font>
</form>
</body>
</html>

Week-4

CSS-1:

<html>
<head>
<title> Applying various kinds of styles to text</title>
<link href="font.css" rel=stylesheet type="text/css">
</head>
<body>
Simple external CSS
<h1> Good Morning </h1>
<h2> this is our Web Technologies lab session </h2>
<p> this is one of the interesting subject in this semester </p>
<h3> this lab carries 75 marks for our external </h3>
</body>
</html>

CSS-2

<html>
<head>
<title>Applying background properties</title>
<style>
h1{background-color:green;color:yellow;}
body{background-image:url(Sunset.jpg);}
</style>
<body>
<h1>Hi friends</h1>
</body>
</html>

CSS-3:

<html>
<head>
<title>Applying background properties</title>
<style>
h1{background-color:green;color:yellow;}
body{background-image:url(Sunset.jpg);
background-repeat:no-repeat;
background-repeat:repeat-x;}
</style>
<body>
<h1>Hi friends</h1>
</body>
</html>
CSS-4

<html>
<head>
<title>Applying various text styles</title>
<style>
.wt{text-transform:"uppercase";text-align:"left";color:pink;}
</style>
</head>
<body>
<h1>Hi friends</h1>
<p class="wt"> this is inline form of cascading style sheets </p>
<h3>this is cse-a</h3>
</body>
</html>

CSS-5

<html>
<head>
<style>
A{text-decoration:none;color:red;}
A:visited{color:pink}
A:link{color:green}
A:active{color:brown}
A:hover{color:yellow}
</style>
</head>
<body>
<A href="ex.html" target="parent">click this</A>
</body>
</html>

CSS-6

<html>
<head>
<title>Applying various text styles</title>
<style>
.wt{text-transform:"uppercase";text-align:"left";color:pink;}
</style>
</head>
<body>
<h1>Hi friends</h1>
<div class="wt">
<p> this is inline form of cascading style sheets </p>
<h3>this is cse-a</h3>
</body>
</html>

CSS-7

<html>
<head>
<style type="text/css">
.xlink{cursor:crosshair}
.hlink{cursor:help}
</style>
</head>
<body>
<b>
<a href="ex.html">Hello</a><br>
<a href="pgm1.htm" class="xlink">Crosslink</a><br>
<a href="pgm1.htm" class="hlink">Helplink</a>
</b>
</body>
</html>

You might also like