Scribd
Upload
3 views

web d

Uploaded by

mail2rounaksharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

web d

Uploaded by

mail2rounaksharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

Experiment no.

1:
ONLINE BOOKSTORE WEBSITE HOME PAGE

SOURCE CODE:
Home.html
<html>
<frameset rows="15%,9%,76%" bordercolor="pink">
<frameset cols="20%,80%" bordercolor="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

Logo.html
<html>
<body>
<img src="C:\Users\Rounak\OneDrive\Desktop\logo.jpeg" alt="Logo" width="100" height="100">
</body>
</html>

Title.html
<html>
<body>
<center><i> <h1>GALGOTIAS COLLEGE OF ENGINEERING AND TECHNOLOGY</h1></i>
</font></center>
<center><b> <h2>ONLINE BOOKSTORE</h2></b> </font></center>
</body>
</html>

Branches.html
<html>
<table cellspacing=15>
<h1>COURSES</h1>
<tr><td><h1>CSE </h1></td></tr>
<tr><td><h1> ECE</h1> </td></tr>
<tr><td><h1>EEE</h1></td></tr>
<tr><td><h1> CIVIL</h1> </td></tr>
</table>
</body>
</html

Menu.html
<html>
<body>
<table width="100%">
<tr>
<td> <a href="homedes.html" target="f32"><h1>HOME</h1></a></td>
<td> <a href="file:///C:/Users/Rounak/OneDrive/Desktop/L1.html"
target="f32""><h1>LOGIN</h1></a></td>
<td> <a href="file:///C:/Users/Rounak/OneDrive/Desktop/r1.html"
target="f32"><h1>REGISTRATION</h1></a></td>
<td> <a href="file:///C:/Users/Rounak/OneDrive/Desktop/c2.html"
target="f32"><h1>CATALOGUE</h1></a></td>
<td> <a href="file:///C:/Users/Rounak/OneDrive/Desktop/cart.html"
target="f32"><h1>CART</h1></a></td>
</tr>
</table>
</body>
</html>

Homedes.html
<html>
<body>
<center> <u><h2>DESCRIPTION</h2> </u></center>
<p><h4>Welcome to our online bookstore, where the world of literature comes alive at your
fingertips. Discover a vast collection of books, ranging from timeless classics to contemporary
bestsellers, all just a click away.<br>
Explore our user-friendly website designed for book enthusiasts of all kinds. Browse through an
extensive catalog of genres, from thrilling mysteries to heartwarming romance, thought-provoking
non-fiction to fantastical adventures.<br>
Our online bookstore offers:<br>
Extensive Selection: Dive into a world of endless possibilities with our diverse collection of books. We
have something for every reader, no matter your taste or preference.<br>
Convenience: Shop from the comfort of your home, 24/7. No need to rush to a physical store – we're
always open, ready to serve you at your convenience.<br>
User-Friendly Interface: Our website is designed to provide a seamless and enjoyable shopping
experience. Find your favorite authors, discover new ones, and explore personalized
recommendations.<br>
Secure Transactions: Rest assured that your financial information is safe with us. We prioritize your
online security for worry-free transactions.<br>
Fast and Reliable Delivery: Receive your books at your doorstep swiftly and securely. We understand
the joy of holding a new book in your hands.<br>
Reviews and Ratings: Make informed decisions with the help of user reviews and ratings, ensuring
you choose the perfect book for your next adventure.<br>
Exclusive Deals and Promotions: Stay updated with our regular promotions and discounts, allowing
you to indulge in your reading passion without breaking the bank.<br>
Whether you're an avid reader, a casual browser, or a gift shopper, our online bookstore is your one-
stop destination for all things literary. Embark on a literary journey like never before – start exploring
our online bookstore today and bring the magic of books to your life. Happy reading!
</h4></body></html
Output
Experiment no. 2:
ONLINE BOOKSTORE WEBSITE LOGIN PAGE

Login.html
<html>
<head> <title>LOGIN PAGE</title>
</head>
<body>
<form name="login">
<h1>LOGIN </h1>
USERNAME: <input type="text" name="uname" ><br><br>
PASSWORD: <input type="password" name="pwd" ><br><br>
<input type="Login" value="Login" >
</center> </form>
</body></html
Output
Experiment no. 3:
ONLINE BOOKSTORE WEBSITE CATALOGUE PAGE
SOURCE CODE:
Catalogue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catalogue Page</title>
<style>
/* Your CSS styles for the catalog page */
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
text-align: center;
}
h1 {
font-size: 30px;
margin-bottom: 20px;
}
h2 {
font-size: 20px;
margin-top: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color:seagreen;
color: #fff;
}
.add-to-cart-button {
background-color:seagreen;
color: #fff;
padding: 5px 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.add-to-cart-button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div id="left-frame"><h1>COURSES<br><br> <a
href="file:///C:/Users/Rounak/OneDrive/Desktop/cse.html">CSE</a><br><br><br
> <a
href="file:///C:/Users/Rounak/OneDrive/Desktop/ece.html">ECE</a><br><br><b r>
<a href="file:///C:/Users/Rounak/OneDrive/Desktop/eee.html">EEE</a><br><br><b
r> <a
href="file:///C:/Users/Rounak/OneDrive/Desktop/civil.html">CIVIL</a><br><br>< br>
</div>
</body>
</html>

Cse.html
<!DOCTYPE html>
<html>
<head>
<title>Product Catalog</title>
<style>
.product {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
display: inline-block;
}
.product img {
max-width: 100px;
}
</style>
</head>
<body>
<h1>COMPUTER SCIENCE ENGINEERING</h1>
<!-- Product 1 -->
<div class="product">
<img

src="https://imgs.search.brave.com/05Wkea4-muoz-OttFnLnvgtByKBhjX-
zHBPFYm47uUI/rs:f
it:860:0:0/g:ce/aHR0cHM6Ly9pbWFn/tXMtbmEuc3NsLWlt/YWdlcy1hbWF6b24u/Y29
tL2ltYWdlcy9J
/Lzgxc05wN2d6YXtM/Lmpwtw"
alt="Product 1"
/>
<h3>The CSE Manual</h3>
<p>Scientific Style and Format for Authors.</p>
<p>Price: $19.99</p>
<button>Add to Cart</button>
</div>
<!-- Product 2 -->
<div class="product">
<img

src="https://imgs.search.brave.com/MuIsSh--
-J2-bORy96XgAutVx-ozmLbln6Hkmv5IIXw/rs:f
it:860:0:0/g:ce/aHR0cHM6Ly9hc3Nl/dHMuY2FtYnJptGdl/Lm9yty85NzgxMDA5/My8
wOTA3My9jb3tl
/ci85NzgxMDA5MzA5/MDczLmpwtw"
alt="Product 2"
/>
<h3>Introduction to Probability for Computing</h3>
<p>By Mor Harchol-Baltor.</p>
<p>Price: $29.99</p>
<button>Add to Cart</button>
</div>
<!-- Product 3 -->
<div class="product">
<img

src="https://imgs.search.brave.com/l32mSIbMqgjUhDWSlrPOd-
VqUN8CCEm-P5nkMlChDWw/rs:f
it:860:0:0/g:ce/aHR0cHM6Ly93d3cu/aW50tWxsaWdlbnQu/Y29tL3dwLWNvbnRl/bn
QvdXBsb2Fkcy8y
/
MDIyLzA4L0NvbXB1/dGVyLVNjaWVuY2Ut/UHJpbmNpcGxlcy1U/aGUtRm91bmRhdGl
v/bmFsLUNvbmNlcH
Rz/LW9mLUNvbXB1dGVy/LVNjaWVuY2UuanBn"
alt="Product 3"
/>
<h3>Computer Science Principles</h3>
<p>By Kevin Hare.</p>
<p>Price: $39.99</p>
<button>Add to Cart</button>
</div>
<!-- Product 4 -->
<div class="product">
<img

src="https://imgs.search.brave.com/z7JXcQSqKlJ-lJi7zntMqQQF3zc1kHM2M5RSiVVx
m4s/rs:f
it:860:0:0/g:ce/aHR0cHM6Ly9jtG4u/aGFja3IuaW8vdXBs/b2Fkcy9wb3N0cy9h/dHRhY
2httW50cy8x
/NjQzMTIxODM5tVJk/UEhheFptOS5wbmc"
alt="Product 3"
/>
<h3>Code Complete:Second Edition</h3>
<p>Steve MCc Connel.</p>
<p>Price: $39.99</p>
<button>Add to Cart</button>
</div>
<!-- Product 5 -->
<div class="product">
<img

src="https://imgs.search.brave.com/2aSbBvMJkfn3iTWvPeJisoaMyfd5dIvnk1XEpxAsp
lY/rs:f
it:860:0:0/g:ce/aHR0cHM6Ly9jtG4u/aGFja3IuaW8vdXBs/b2Fkcy9wb3N0cy9h/dHRhY
2httW50cy8x
/NjQzMTIxOTY4aHpq/elNvemUyNS5wbmc"
alt="Product 3"
/>
<h3>Machine Learning for Hackers</h3>
<p>By O'REILLY.</p>
<p>Price: $39.99</p>
<button>Add to Cart</button>
</div>
<!-- Product 6 -->
<div class="product">
<img

src="https://imgs.search.brave.com/mXj0JvGjHqIT14IMq-k7kt1voPt-Ew7oxQejTI8Ra
D4/rs:f
it:860:0:0/g:ce/aHR0cHM6Ly93d3cu/aW50tWxsaWdlbnQu/Y29tL3dwLWNvbnRl/bn
QvdXBsb2Fkcy8y
/
MDIyLzA4L0RhdGEt/U3RydWN0dXJlcy1h/bmQtQWxnb3JpdGht/cy13aXRoLVNjYWxh/
LnButw"
alt="Product 3"
/>
<h3>Data Structure and Algorithm with Scala</h3>
<p>By Springer.</p>
<p>Price: $39.99</p>
<button>Add to Cart</button>
</div>
<!-- Product 7 -->
<div class="product">
<img

src="https://imgs.search.brave.com/L5HM3wzDlS3t-
gkVcbFOHJdqKcoxxmr9CWoF8PVI0n4/rs:f
it:860:0:0/g:ce/aHR0cHM6Ly9jtG4u/aGFja3IuaW8vdXBs/b2Fkcy9wb3N0cy9h/dHRhY
2httW50cy8x
/NjQzMTIxOTQ3MnJO/SzdOeDJKQi5wbmc"
alt="Product 3"
/>
<h3>Collective Intelligence</h3>
<p>O'REILLY.</p>
<p>Price: $39.99</p>
<button>Add to Cart</button>
</div>
<!-- Product 8 -->
<div class="product">
<img

src="https://imgs.search.brave.com/0vKDdeUx5gbLpbtINfH7gnm228g8ULR8eqeaM
VtYAko/rs:f
it:860:0:0/g:ce/aHR0cHM6Ly93d3cu/aW50tWxsaWdlbnQu/Y29tL3dwLWNvbnRl/bn
QvdXBsb2Fkcy8y
/
MDIyLzA4L0MtUHJv/t3JhbW1pbmctQWJz/b2x1dGUtQmVnaW5u/tXJzLUd1aWRlLm
pw/tw"
alt="Product 3"
/>
<h3>Absolute Begginer's Guide</h3>
<h4>Minecraft Mode Programming:Second Edition</h4>
<p>Rogers Candenhead.</p>
<p>Price: $39.99</p>
<button>Add to Cart</button>
</div>
</body>
</html>

Ece.html
<!DOCTYPE html>
<html>
<head>
<title>Product Catalog</title>
<style>
.product {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
display: inline-block;
}
.product img {
max-width: 100px;
}
</style>
</head>
<body>
<h1>ELECTRONIC AND COMMUNICATION ENGINEERING</h1>
<!-- Product 1 -->
<div class="product">
<img

src="https://arspublications.com/wp-content/uploads/2019/05/ELECTRONIC-
CIRCUITS-I-A-623x818.jpg"
alt="Product 1"
/>
<h3>Electronic Circuits-I</h3>
<p>By K.Balaji</p>
<p>Price: $19.99</p>
<button>Add to Cart</button>
</div>
<!-- Product 2 -->
<div class="product">
<img

src="https://arspublications.com/wp-content/uploads/2019/11/New-WIRELESS-
NETWORKS-New-623x827.jpg"
alt="Product 2"
/>
<h3>Wireless Networks</h3>
<p>By Dr.T.Gnanasekaran</p>
<p>Price: $29.99</p>
<button>Add to Cart</button>
</div>
<!-- Product 3 -->
<div class="product">
<img

src="https://arspublications.com/wp-content/uploads/2019/05/New-DIGITAL-
ELECTRONICS-A-784x1024.jpg"
alt="Product 3"
/>
<h3>Digital Electronics</h3>
<p>By D.Edwin Dhas</p>
<p>Price: $39.99</p>
<button>Add to Cart</button>
</div>
<!-- Product 4 -->
<div class="product">
<img

src="https://th.bing.com/th/id/OIP.Efhd1re99FhFe0qfrsEmygAAAA?
pid=ImgDet&rs=1"
alt="Product 4"
/>
<h3>Electronic Instrumentation</h3>
<p>H S Kalsi</p>
<p>Price: $39.99</p>
<button>Add to Cart</button>
</div>
<!-- Product 5 -->
<div class="product">
<img

src="https://1.bp.blogspot.com/-
dqHUAlNI7ss/VXM8KJtqCYI/AAAAAAAAACw/19LkVL6ubtU/s1600/schaums-outline-
of-signals-and-systems-hwei-hsu-1-728.jpg"
alt="Product 5"
/>
<h3>Signals and Systems</h3>
<p>By Hwei P. HSU</p>
<p>Price: $39.99</p>
<button>Add to Cart</button>
</div>
</body>
</html
Output
Experiment no. 4:
ONLINE BOOKSTORE WEBSITE CARTPAGE

Cart.html
<!DOCTYPE html>
<html>
<head>
<title>Cart Page</title>
<style>
body {
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}
.navbar a {
color: #333;
margin-left: 10px;
}
.cart-items {
margin: 50px;
}
.cart-items th, .cart-items td {
border: 1px solid #dee2e6;
padding: 8px;
text-align: left;
}
.cart-items th {
background-color: #f8f9fa;
}
.total {
margin-top: 20px;
text-align: right;
}
</style>
</head>
<body>

</div>

<div class="cart-items">
<table>
<thead>
<tr>
<th>Book name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Java 2</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>
</tbody>
</table>
</div>

<div class="total">
<h2>Total amount: $130.5</h2>
</div>
</body>
</html>
Output
Experiment no.5:
ONLINE BOOKSTORE WEBSITE REGISTRATION PAGE
Registration.html
<!DOCTYPE html>
<html>
<head>
<title>Registration - Galgotias Online Bookstore</title>
<style>
/* Add your CSS styling here */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color:white;
}
#navigation {
background-color:black;
color: #fff;
text-align: center;
padding: 10px 0;
}
}
#nav-links {
margin-top: 10px;
}
#nav-links a {
color: #fff;
text-decoration: none;
margin: 0 15px;
}
#nav-links a:hover {
text-decoration: underline;
}
#registration {
width: 80%;
margin: 20px auto;
background-color:white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="radio"] {
margin-right: 10px;
}
select {
width: 32%;
padding: 10px;
margin-right: 10px;
}
textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
background-color:lightgrey;
color: black;
border: none;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #555;
}
</style>
</head>
<body>

<div id="registration">
<h2>Registration</h2>
<form action="process-registration.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required>

<label for="phone">Phone Number:</label>


<input type="tel" id="phone" name="phone" required>

<label>Sex:</label>
<input type="radio" id="male" name="sex" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="sex" value="female">
<label for="female">Female</label>

<label>Date of Birth:</label>
<select name="day" id="day" required>
<option value="" disabled selected>Day</option>
<!-- Add day options -->
</select>
<select name="month" id="month" required>
<option value="" disabled selected>Month</option>
<!-- Add month options -->
</select>
<select name="year" id="year" required>
<option value="" disabled selected>Year</option>
<!-- Add year options -->
</select>

<label>Languages known:</label>
<input type="checkbox" id="english" name="languages[]" value="English">
<label for="english">English</label>
<input type="checkbox" id="telugu" name="languages[]" value="Telugu">
<label for="telugu">Telugu</label>
<input type="checkbox" id="hindi" name="languages[]" value="Hindi">
<label for="hindi">Hindi</label>
<input type="checkbox" id="tamil" name="languages[]" value="Tamil">
<label for="tamil">Tamil</label>

<label for="address">Address:</label>
<textarea id="address" name="address" rows="4" required></textarea>

<button type="submit">Register</button>
</form>
</div>
</body>
</html>
Output
Experiment no. 6:
VALIDATION OF NAME AND PASSWORD

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>
</form>
</table>
</center>
</body>
</html>

2. Password validation
<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
Experiment no. 7:
E-MAIL AND PHONE NUMBER VALIDATION

1. EMAIL VALIDATION
<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">
31

<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

2. Phone no. validation


<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>
34

<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
Out
Experiment no. 8:
DESIGN A PAGE USING CSS

1. style.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="title">WEB DESIGNING</div><br>
<div class="paragraph">Web designing is the creation of a website layout or visual appearance using
HTML, CSS, and JavaScript. The designer uses CSS to style the web pages, while HTML provides the
structure and content. JavaScript is used to add interactive features to the web pages.</div>
</body>
</html>

Style.css
body {
background-image: url('https://creativesproutmedia.com/wp-content/uploads/2021/03/web-
design-1.jpg');
}

.title {
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: bold;
color: #000000;
}

.paragraph {
font-family: Times New Roman, serif;
font-size: 16px;
font-weight: normal;
color: #000000;
}
Output
2. backgroundimage.html
<html>
<head>
<style type="text/css">
body
{
background-image: url('https://th.bing.com/th/id/R.a5442182dcde60f6e87494fb3dedc91?
rik=93e4j81HmLDBAA&riu=https%3a%2f%2ffanyv88.com%3a443%2fhttp%2fwallpapercave.com%2fwp
%2fRvhYUd6.jpg&ehk=581%2buoK8EBt7ypb%2fKdUTvCTVlY5mmwiv%2fO%2bt5Edwk1M
%3d&risl=&pid=ImgRaw&r=0');
background-repeat:no-repeat
}
</style>
</head>
<body>
<center>
<font color=fuchsia>
<h1>WebTechnologies</h1>
</center>
</body>
</html

Output
Experiment no. 9: CSS

1. control the repetition of image with background-repeat property


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
background-image: url('https://th.bing.com/th/id/OIP.nv9g-1pv95SNmT7Lsj26HwHaE7?
w=4229&h=2819&rs=1&pid=ImgDetMain');
background-repeat:repeat;
background-size: cover;
}
</style>
<title>Background Repeat Example</title>
</head>
<body>
<center>
<font color=fuchsia>
<h1>Hello, world!</h1>
</body>
</html>

Output
2. Define style for link
Link.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="r1.html" class="hlink">HELP LINK</a><br><br>
<a href="home.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

You might also like