Scribd
Upload
0 views26 pages

HTML Program

The document outlines a series of experiments conducted by Himanshi Tomar, focusing on creating various web pages using HTML. Each experiment includes objectives and code snippets for designing a web page layout, login page, catalogue page, cart page, registration form, and a registration form with client-side validation using JavaScript. The experiments aim to demonstrate skills in web development and design for an online bookstore and educational institution.

Uploaded by

himanshi11tomar
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
0 views26 pages

HTML Program

The document outlines a series of experiments conducted by Himanshi Tomar, focusing on creating various web pages using HTML. Each experiment includes objectives and code snippets for designing a web page layout, login page, catalogue page, cart page, registration form, and a registration form with client-side validation using JavaScript. The experiments aim to demonstrate skills in web development and design for an online bookstore and educational institution.

Uploaded by

himanshi11tomar
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/ 26

Experiment 01

Name: Himanshi Tomar

Roll no. : 2412004D

Objective: The objective of this code is to create a simple and structured web page layout for Ajay Kumar Garg
Engineering College. The page contains a few key elements aimed at presenting the college's name, a navigation
bar, and a list of engineering departments.

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Ajay Kumar Garg Engineering College</title>

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: Arial, sans-serif;

.container {

border: 2px solid red;

width: 100%;

max-width: 1200px;

margin: 0 auto;

header {

background-color: #f39c12;
display: flex;

align-items: center;

padding: 10px;

border-bottom: 2px solid red;

.logo img {

height: 80px;

.title h1 {

flex-grow: 1;

text-align: center;

font-size: 24px;

nav {

background-color: #f1f1f1;

padding: 10px;

border-bottom: 2px solid red;

nav ul {

display: flex;

justify-content: space-around;

list-style-type: none;

nav ul li a {

text-decoration: none;

color: blue;

font-size: 18px;

.departments {

padding: 20px;
background-color: #fcf8e3;

.departments ul {

list-style-type: none;

font-size: 20px;

.departments ul li {

margin-bottom: 10px;

</style>

</head>

<body>

<div class="container">

<header>

<div class="logo">

<img src="your-logo-url-here.png" alt="College Logo">

</div>

<div class="title">

<h1>AJAY KUMAR GARG ENGINEERING COLLEGE, GHAZIABAD(U.P)</h1>

</div>

</header>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Login</a></li>

<li><a href="#">Registration</a></li>

<li><a href="#">Catalogue</a></li>

<li><a href="#">Cart</a></li>

</ul>
</nav>

<section class="departments">

<ul>

<li>ECE</li>

<li>EEE</li>

<li>CIVIL</li>

<li>CSE</li>

</ul>

</section>

</div>

</body>

</html>

Output:
Experiment 02
Name: Himanshi Tomar

Roll no. : 2412004D

Objective: The objective of this code is to create a basic login page using HTML, where a user can input a
username (Login ID) and password. The page provides fields for these inputs, along with options to either
submit the form or reset the input fields. It also includes a design with some styling elements like a background
color, a base font style, and a centered image.

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>

<body>

<html>

<head>

<style>

body {

background-color: pink;

font-family: Cambria, sans-serif;

font-size: 18px;

h1 {

font-family: 'Brush Script MT', cursive;

color: purple;

font-size: 48px;

text-align: center;

table {

margin: 0 auto;
width: 300px;

height: 150px;

border-spacing: 15px;

input[type="text"], input[type="password"] {

width: 100%;

padding: 8px;

input[type="submit"], input[type="reset"] {

padding: 8px 16px;

font-size: 16px;

</style>

</head>

<body>

<center>

<img src="images/login.jpg" width="385" height="135" /><br />

<h1><b>Enter Login Details:</b></h1>

</center>

<form name="f1" method="post" action="right.html">

<table>

<tr>

<td><b>Login ID:</b></td>

<td><input type="text" name="t1"></td>

</tr>

<tr>

<td><b>Password:</b></td>

<td><input type="password" name="t2"></td>

</tr>
<tr align="center">

<td><input type="submit" name="b1" value="Submit"></td>

<td><input type="reset" name="b2" value="Reset"></td>

</tr>

</table>

</form>

</body>

</html>

</body>

</html>

Output:
Experiment 03
Name: Himanshi Tomar

Roll no. : 2412004D

Objective: The objective of this code is to design a simple catalogue page using HTML, which lists details about
books, including the author, publisher, and price. It also provides an option to add each book to a shopping cart
through an "Add to cart" button for each item. The form action redirects to another page when the "Add to cart"
button is clicked.

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>

<body>

<html>

<head>

<title>Catalogue</title>

<style>

body {

background-color: pink;

font-family: Arial, sans-serif;

table {

width: 100%;

border-collapse: collapse;

td {

padding: 10px;

vertical-align: middle;
text-align: left;

img {

display: block;

margin: auto;

.book-info {

padding-left: 10px;

.price {

text-align: center;

input[type="submit"] {

background-color: purple;

color: white;

border: none;

padding: 8px 12px;

cursor: pointer;

</style>

</head>

<body>

<h1 align="center">Book Catalogue</h1>

<table border="1">

<tr>

<td>

<img src="images/wt.jpg" width="100" height="100" />

</td>

<td class="book-info">

<b>Book:</b> Web Technologies <br>

<b>Author:</b> Uttam K. Roy <br>


<b>Publication:</b> Oxford University Press

</td>

<td class="price">

<b>Price:</b> 531 &nbsp;&nbsp;&nbsp;

</td>

<td>

<form action="order.html">

<input type="submit" value="Add to cart" />

</form>

</td>

</tr>

<tr>

<td>

<img src="images/php.jpg" width="100" height="100" />

</td>

<td class="book-info">

<b>Book:</b> PHP & MySQL Web Development <br>

<b>Author:</b> Luke Welling & Laura Thompson <br>

<b>Publication:</b> PEARSON

</td>

<td class="price">

<b>Price:</b> 898 &nbsp;&nbsp;&nbsp;

</td>

<td>

<form action="order.html">

<input type="submit" value="Add to cart" />

</form>

</td>

</tr>

</table>
</body>

</html>

</body>

</html>

Output:
Experiment 04
Name: Himanshi Tomar

Roll no. : 2412004D

Objective: The objective of this set of HTML pages is to design a cart page and other related category pages for
an online bookstore, where users can select and view books from various engineering fields, choose quantities,
and see a breakdown of costs including shipping. It simulates the functionality of adding books to a cart for
purchase and provides some information about specific categories like Computer Science, Electronics, and
Mechanical Engineering.

Code:

<html>

<head>

<title>Engineering Book Catalogue</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: lightgray;

h1 {

color: blue;

text-align: center;

nav {

background-color: darkblue;

color: white;

padding: 10px;

text-align: center;

nav a {

color: white;

text-decoration: none;

margin: 0 15px;
font-size: 18px;

section {

margin-top: 20px;

.section-container {

background-color: cyan;

padding: 20px;

border-radius: 10px;

margin-bottom: 20px;

.book-info {

padding-left: 10px;

table {

width: 100%;

border-collapse: collapse;

margin-top: 10px;

table, td {

border: 1px solid black;

td {

padding: 10px;

input[type="submit"] {

background-color: purple;

color: white;

border: none;

padding: 8px 12px;


cursor: pointer;

</style>

</head>

<body>

<nav>

<a href="#CSE">CSE</a>

<a href="#ECE">ECE</a>

<a href="#EEE">EEE</a>

<a href="#MECH">Mechanical</a>

</nav>

<!-- CSE Section -->

<section id="CSE" class="section-container">

<h1>Computer Science and Engineering</h1>

<form method="post" action="order.html">

<table align="center">

<tr>

<td>Text Books</td>

<td>

<select name="book">

<option value="select the book" selected>Select the book</option>

<option value="C&Ds">C&Ds</option>

<option value="Ads">Ads</option>

<option value="Java">Java</option>

<option value="Oracle">Oracle</option>

<option value="Ms SQL Server">Ms SQL Server</option>

<option value="MySql">MySql</option>

</select>

</td>
</tr>

<tr>

<td>Quantity</td>

<td><input type="text" name="quantity"></

Output:
Experiment 05
Name: Himanshi Tomar

Roll no. : 2412004D

Objective: The objective of this code is to design a registration page using HTML that collects user information
such as name, password, email, phone number, gender, and address. The form allows users to input these details
and provides options to submit or reset the data.

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>

<link rel="stylesheet" href="style.css">

</head>

<body>

<style>

body {

background-color: #91afc4;

font-family: Arial, sans-serif;

text-align: center;

h1 {

color: blue;

text-align: center;

.required {

color: red;

</style>

<h1>Registration Form</h1>
<form action="right.html" method="POST">

<label for="firstname"

>First Name (Minimum 6 characters)<span class="required">*</span></label>

<br />

<input

type="text"

id="firstname"

name="firstname"

required

minlength="6" />

<br /><br />

<label for="lastname">Last Name<span class="required">*</span></label>

<br />

<input type="text" id="lastname" name="lastname" required /><br /><br />

<label for="email">Email Address<span class="required">*</span></label>

<br />

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

<small class="required">

(one e-mail id only): e.g. smith@hotmail.com</small >

<br /><br />

<label for="pass" ></label>

Password (Minimum 6 characters)<span class="required">*</span></label >

<br />

<input

type="password"

id="pass"

name="pass"

required

minlength="6" />

<br /><br />

<label for="addr">Address<span class="required">*</span></label>


<br />

<textarea rows="2" cols="20" id="addr" name="addr" required></textarea>

<br /><br />

<label for="mobileno">Mobile No<span class="required">*</span></label>

<br />

<input type="tel" id="mobileno" name="mobileno" required /><br /><br />

<label>Gender:</label><br />

<input type="radio" name="gender" value="male" required /> Male<br />

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

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

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

</form>

</body>

</html>

Output:
Experiment 06
Name: Himanshi Tomar

Roll no. : 2412004D

Objective: The objective of this code is to create a registration form with client-side validation using JavaScript.

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>

<link rel="stylesheet" href="style.css">

</head>

<body>

<style>

body {

background-color: #91afc4;

font-family: Arial, sans-serif;

text-align: center;

h1 {

color: blue;

text-align: center;

.required {

color: red;
}

.error {

color: red;

font-size: 12px;

</style>

<h1>Registration Form</h1>

<form id="registrationForm" action="right.html" method="POST">

<label for="firstname">

First Name (Minimum 6 characters)<span class="required">*</span>

</label>

<br />

<input type="text" id="firstname" name="firstname" required minlength="6" />

<span class="error" id="firstnameError"></span>

<br /><br />

<label for="lastname">Last Name<span class="required">*</span></label>

<br />

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

<span class="error" id="lastnameError"></span>

<br /><br />

<label for="email">Email Address<span class="required">*</span></label>

<br />

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

<small class="required"><br>

(one e-mail id only): e.g. smith@hotmail.com

</small>

<span class="error" id="emailError"></span>

<br /><br />


<label for="pass">Password (Minimum 6 characters)<span class="required">*</span></label>

<br />

<input type="password" id="pass" name="pass" required minlength="6" />

<span class="error" id="passwordError"></span>

<br /><br />

<label for="addr">Address<span class="required">*</span></label>

<br />

<textarea rows="2" cols="20" id="addr" name="addr" required></textarea>

<span class="error" id="addressError"></span>

<br /><br />

<label for="mobileno">Mobile No<span class="required">*</span></label>

<br />

<input type="tel" id="mobileno" name="mobileno" required />

<span class="error" id="mobileError"></span>

<br /><br />

<label>Gender:</label><br />

<input type="radio" name="gender" value="male" required /> Male<br />

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

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

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

</form>

<script>

const form = document.getElementById('registrationForm');


form.addEventListener('submit', function(event) {

let valid = true;

// Clear previous error messages

document.querySelectorAll('.error').forEach(e => e.textContent = '');

// First name validation

const firstName = document.getElementById('firstname').value;

if (firstName.length < 6) {

document.getElementById('firstnameError').textContent = 'First name must be at least 6 characters';

valid = false;

// Last name validation

const lastName = document.getElementById('lastname').value;

if (lastName === '') {

document.getElementById('lastnameError').textContent = 'Last name is required';

valid = false;

// Email validation

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

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

if (!emailPattern.test(email)) {

document.getElementById('emailError').textContent = 'Please enter a valid email address';

valid = false;

// Password validation

const password = document.getElementById('pass').value;


if (password.length < 6) {

document.getElementById('passwordError').textContent = 'Password must be at least 6 characters';

valid = false;

// Address validation

const address = document.getElementById('addr').value;

if (address === '') {

document.getElementById('addressError').textContent = 'Address is required';

valid = false;

// Mobile number validation

const mobile = document.getElementById('mobileno').value;

if (mobile === '' || mobile.length < 10 || mobile.length > 15) {

document.getElementById('mobileError').textContent = 'Please enter a valid mobile number';

valid = false;

// Prevent form submission if not valid

if (!valid) {

event.preventDefault();

});

</script>

</body>

</html>

Output:

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy