Scribd
Upload
14 views

Webd

Introduction to html

Uploaded by

shivankpandey48
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Webd

Introduction to html

Uploaded by

shivankpandey48
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 38

Raj Kumar Goel Institute of Technology,

Ghaziabad

Web Development Designing Lab (BCS 353)

Name

Roll No.

Section- Batch
INDEX
Experiment Experiment Name Date of Date of Faculty
No. Signature
Conduction Submission
1. Design the following static web pages required
for an online book store website.

2. Login page: The login page contains the user


name and the password of the user to
authenticate.
3. Catologue Page: The catalogue page conatains
details of all available books in the website in a
table
4. The cart page contains the detail about the
books which are added to the cart
5. Registration Page

6. JS VALIDATION: Write Java script to


validate the following feilds
7. JS VALIDATION:
1. Email Id
2. Phone No
8. CSS: Design a Web page using CSS

9. CSS: Control the repetation of the image with


background – Repeat property
10. Consider a small topic of your choice on which
you can develop static web pages and try to
implement all topics of html,CSS and JS within
the topic
EXPERIMENT – 1
Aim: - Design the following static web pages required for an online book store
website.

HOMEPAGE:

The static home page must contain three frames.

Top frame: Logo and the college name and links to Homepage, Loginpage, Registration
page, Catalogue page and Cart page.

Code: -Homepage

<head>

<frameset rows="20%,*">

<frame src="topframe.html"name="f1">

<frameset cols="20%,*">

<frame src="leftframe.html"name="f2">

<frame src="rightframe.html"name="f3">

</frameset>

</frameset>

</head>
OUTPUT:

Top frame:

<html>
<body>
<p>
<img src="C:\Documents and Settings\All Users\Documents\My
Pictures\Sample Pictures\Winter.jpg" align=left width=100 height=100">
<h1 align=center>Online book store</h1>
</p>
<br>
<p>
<h2>&nbsp;nbsp;&nbsp;&nbsp;
<a href="homepage.html" target=_parent> Home
</a>
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<a href="login.html" target="f3"> login
</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="registration.html" target="f3"> registration
</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nbsp;&nbsp;&nbsp;
<a href="catalogue.html" target="f3"> Catalogue
</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="cart.html" target="f3"> Cart
</a> &nbsp;
</h2>
</p>
</body>
</html>

Output

Left frame:
<html>
<body>

<a href=cse.html target="f3"><h3>CSE</h3> </a><br><br><br><br><br>

<a href=ece.html target="f3"><h3>ECE</h3></a><br><br><br><br><br>

<a href=eee.html target="f3"><h3>EEE</h3></a><br><br><br><br><br>

<a href=civil.html target="f3"><h3>Civil</h3></a>

</body>

</html>

OUTPUT:

Right frame:
<html>

<body bgcolor="pink">

<p>

<h2 align="center"> <font face="times new roman" color="green" >Online book


store information </font> </h2>

<h3> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<font face="monotype corsiva"


color=blue> This is the online book store developed by students of pvpsit.It
contains book catalogue of various branches like cse,ece,eee,civil </font></h3>

</p>

</body>

</html>

OUTPUT
Experiment No.2

Aim: - Login Page: The login page contains the user name
and the password of the user to authenticate.

Code:
<html>

<body>

<p>

<img src="C:/Documents and Settings/All Users/Documents/My


Pictures/Sample Pictures/Winter.jpg" align="left" width="100" height="100">

</p>

<h1 align="center">Online book store</h1>

<br>

<p>

<h2>

&nbsp;&nbsp;&nbsp;&nbsp;

<a href="homepage.html" target="_parent">Home</a>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

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

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

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

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

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


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

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

&nbsp;

</h2>

</p>

</body>

</html>
OUTPUT:
Experiment No.3

Aim: - CATOLOGUE PAGE: The catalogue page should contain the


details of all the books available in the website in a table. The details
should contain the following:

1. Snap shot of Cover Page.


2. Author Name.
3. Publisher.

4. Price.
5. Add to cart button

Code: -

<html>
<body>
<center>
<table border=1>
<tr>
<th> Book Preview </th>
<th> Book Details </th>
<th> Price </th>
<th> Payment </th>
</tr>
<tr>
<td> <img src="image.jpg" width=100 height=50>
</td>
<td>
<pre>
<font face="comic sans ms" size=4 color="green" > book:XML Bible
Author:winston Publisher:Wiesley
</font>
</pre>
</td>
<td>&nbsp;$40 &nbsp; </td>
<td> &nbsp; &nbsp; <a href="cart.html" target="_blank">
<img src="C:\Users\kivi2\Downloads\1234.png"
width="150" height="100">
</a> &nbsp; &nbsp;
</td>
</tr>
<tr>

<td> <img src="image.jpg" width=100 height=50>


</img>
</td>
<td>
<pre>
<font face="comic sans ms" size=4 color="green" > book:Java 2
Author:Watson Publisher:BPB publications
</font>
</pre>
</td>
<td>&nbsp; $40 &nbsp;</td>
<td> &nbsp; &nbsp; <a href="cart.html" target="_blank">
<img src="C:\Users\kivi2\Downloads\1234.png"
width="150" height="100">
</a> &nbsp; &nbsp;
</td>
</tr>
</table>
</center>
</body>
</html>
Output
Experiment No. 4

Aim: - The cart page contains the details about the books which
are added to the cart.

Code:
<html>

<body>

<center><br><br><br>

<img src=”E:\aa.jpg”>

<table border=1 cellpadding=center>

<thead>

<tr>

<th>Book name</th>

<th>price</th>

<th>quantity</th>

<th>amount</th>

</tr>

</thead>

<tr>

<td>java 2</td>

<td>$45</td>

<td>2</td>
<td>$70</td>

</tr>

<tr>

<td> XML bible</td>

<td> $20</td>

<td> 5</td>

<td> $40</td>

</tr>

<th colspan=4>total amount=$110>

</th>

</tr>

</table>

</center>

</body>

</html>
OUTPUT:
Experiment No. 5

Aim: - REGISTRATION PAGE: Create a ‘’registration form’’ with


the following fields

1) Name (Text field)


2) Password (password field)
3) E-mail-id (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) Address (text area)

Code: -
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Registration Form</title>

</head>

<body>

<h1>Registration Form</h1>

<form action="submit.php" method="post">

<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

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

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

<label for="email">E-mail:</label>

<input type="text" id="email" name="email" required><br><br>

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

<input type="text" id="phone" name="phone" required><br><br>

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

<input type="radio" id="other" name="sex" value="other">

<label for="other">Other</label><br><br>

<label for="dob">Date of Birth:</label>

<select id="day" name="day">

<option value="">Day</option>

</select>

<select id="month" name="month">

<option value="">Month</option>

<!-- Add month options here -->

</select>

<select id="year" name="year">

<option value="">Year</option>
<!-- Add year options here -->

</select><br><br>

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

<label for="address">Address:</label><br>

<textarea id="address" name="address" rows="4" cols="50"></textarea><br><br>

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

</form>

</body>

</html>
Output: -
Experiment No. 6
Aim: - JS VALIDATION: Write 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).

Code: -
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Registration Page</title>
<script> function validateForm() {
// Name validation
var name = document.getElementById("name").value; if (!/^[a-
zA-Z]{6,}$/.test(name)) {
alert("Name should contain alphabets only and have at least 6
characters."); return false;
}
// Password validation
var password = document.getElementById("password").value; if
(password.length < 6) {
alert ("Password should be at least 6 characters long.");
return false;
}// Form is valid
return true;
}
</script>
</head>
<body>
<h1>Registration Page</h1>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name"
required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>

Output: -
Experiment No. 7

Aim: - JS VALIDATION:

1. E-mail-id (should not contain any invalid and must


follow the standard pattern([email protected])
2. Phone Number (Phone number should contain 10 digits
only).

Code: -

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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


scale=1.0">

<title>Form Validation</title>

<style>

/* Add your CSS styles here */

</style>

</head>

<body>

<h1>Form Validation</h1>
<form id="myForm" onsubmit="return validateForm()">

<label for="email">E-mail:</label>

<input type="text" id="email" name="email" required><br><br>

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

<input type="text" id="phone" name="phone" required><br><br>

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

</form>

<script>

function validateForm() {

var emailInput = document.getElementById("email").value; var


phoneInput = document.getElementById("phone").value;

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;


var phonePattern = /^\d{10}$/;

if (!emailPattern.test(emailInput)) {

alert("Invalid email address. Please enter a valid email."); return false;

if (!phonePattern.test(phoneInput)) {

alert("Invalid phone number. Please enter a 10-digit phone number.");


return false;
}

return true; // Form is valid and can be submitted

</script>

</body>

</html>

Output: -
Experiment No. 8

Aim: - CSS: Design a web page using CSS (Cascading Style Sheets) which
includes the following:

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.

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

Code: -

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>CSS Styling Example</title>

<style>

/* Define font styles */ body {

font-family: Arial, sans-serif; font-size: 16px;


color: #333;

h1 {

font-family: "Times New Roman", Times, serif; font-size: 36px;

color: #009688;

p{

font-family: "Courier New", Courier, monospace; font-size: 18px;

line-height: 1.5;

/* Set background image for the entire page */ body {

background-image: url('background.jpg'); background-size: cover;

background-repeat: no-repeat;

/* Set background image for a specific element */

.highlight-box {

background-image: url('highlight-background.jpg');

background-size: cover; background-repeat: no-repeat; padding: 20px;


margin: 20px 0; border-radius: 10px;

</style>

</head>

<body>

<h1>Welcome to My CSS Page</h1>

<p>This is an example of a web page styled using CSS. You can use different
fonts and set background images for elements on the page.</p>

<div class="highlight-box">

<h2>Highlighted Section</h2>

<p>This section has a custom background image set using CSS. You can apply
various styles to make your content stand out.</p>

</div>

<p>Feel free to explore and experiment with different styles and backgrounds for
your web pages!</p>

</body>

</html>
Output: -
Experiment No. 9

Aim: - CSS:
Control the repetition of the image with the background-repeat
property.

Define styles for links as

A: link A: visited A: active A: hover

Code: -

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>CSS Styling Example</title>

<style>

/* Control background image repetition */ body {

background-image: url('image.jpg');

background-repeat: no-repeat; /* Prevent repetition */ background-size: cover;

background-attachment: fixed; /* Fixed background position */


}

/* Define styles for links */ a:link {

color: #3498db; /* Unvisited link color */

text-decoration: none; /* Remove underline */

a:visited {

color: #8e44ad; /* Visited link color */

a:active {

color: #e74c3c; /* Active link color (when clicked) */

a:hover {

color: #e67e22; /* Link color on hover */

text-decoration: underline; /* Add underline on hover */

/* Additional styling for page content */

.container {

max-width: 800px; margin: 0 auto; padding: 20px;

background-color: rgba(255, 255, 255, 0.8); border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);


}

h1 {

color: #333;

p{

font-size: 18px; line-height: 1.5;

color: #666;

</style>
</head>
<body>
<div class="container">
<h1>Welcome to My CSS Page</h1>
<p>This is an example of a web page styled using CSS. You can control the
repetition of background images and define styles for links.</p>
<p>Feel free to <a href="#">explore</a> and <a href="#">click</a> on the links to
see how they change on interaction</p>
</div>
</body>
</html>
Output: -
Experiment No. 10

Aim: - Consider a small topic of your choice on which you can


develop static Web pages and try to implement all topics of
html, CSS and JS within the topic.

Choose any one topic.


1. Your Own Portfolio
2. To-Do List
3. Survey Form
4. A Tribute Page
5. A Questionnaire

Code: - Survey Form

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Survey Form</title>

font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0;

padding: 0;

}
header {

background-color: #3498db; color: white;

text-align: center; padding: 20px;

.container {

max-width: 800px; margin: 20px auto; background-color: #fff; padding: 20px;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

h1 {

color: #333;

text-align: center;

label {

display: block; margin-bottom: 10px; font-weight: bold;

}
input[type="text"], input[type="email"] { width: 100%;

padding: 10px; margin-bottom: 20px;

border: 1px solid #ccc; border-radius: 5px;

select {

width: 100%; padding: 10px; margin-bottom: 20px;

border: 1px solid #ccc; border-radius: 5px;

textarea { width: 100%;

height: 100px; padding: 10px; margin-bottom: 20px;

border: 1px solid #ccc; border-radius: 5px;

.btn {

background-color: #3498db; color: white;

border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;

.btn:hover {

background-color: #2187c0;
}

/* JavaScript Validation */

.error {

color: #e74c3c; font-size: 14px;

</style>

</head>

<body>

<header>

<h1>Survey Form</h1>

</header>

<div class="container">

<form id="survey-form" action="submit.php" method="post">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<label for="age">Age:</label>

<select id="age" name="age">


<option value="">Select your age</option>

<option value="under18">Under 18</option>

<option value="18-30">18-30</option>

<option value="31-50">31-50</option>

<option value="over50">Over 50</option>

</select>

<label for="comments">Comments:</label>

<textarea id="comments" name="comments"></textarea>

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

</form>

<div id="error-message" class="error"></div>

</div>

<script>

// JavaScript form validation

document.getElementById('survey-form').addEventListener('submit', function (e)


{ var name = document.getElementById('name').value;

var email = document.getElementById('email').value;


if (name.trim() === '' || email.trim() === '') { e.preventDefault(); // Prevent form
submission

document.getElementById('error-message').innerHTML = 'Name and Email are


required fields.';

});

</script>

</body>

</html>
Output: -

You might also like