EXPERIMENT - 1
Aim: Introduction to HTML, CSS and applications of them
HTML (Hypertext Markup Language): A markup language used to create the
structure and content of web pages.
Purpose: Defines the layout and structure of a webpage, including text,
images, links, and multimedia.
Key HTML Elements:
Headings: (<h1> to <h6>) define titles and subheadings, helping with
content hierarchy and SEO (Search Engine Optimization).
Paragraphs: (<p>) used for blocks of text.
Links: (<a>) enable navigation between web pages or external resources.
Lists: Ordered (<ol>) and unordered (<ul>) lists for organizing items.
Forms: Allow user interaction through input fields, buttons, and checkboxes.
Multimedia: Embed audio and video using HTML elements like <audio> and
<video>.
Role of HTML:
Content Structure: HTML defines the semantic structure of a webpage,
making it understandable to browsers and search engines.
Accessibility: Proper use of HTML ensures web content is accessible to all
users, including those with disabilities (e.g., screen readers).
Applications of HTML
Webpage Structure: HTML is essential for creating the structure of web
pages, from personal blogs to complex websites like e-commerce platforms
and social media sites.
Web Forms: Used in login pages, registration forms, and online surveys for
user data collection.
Embedding Multimedia: HTML allows embedding videos, audio, and images
into websites, crucial for content delivery on platforms like YouTube or news
websites.
Search Engine Optimization (SEO): Proper use of HTML tags helps search
engines index websites more effectively, improving visibility in search
results.
Email Templates: HTML is widely used in designing and structuring email
newsletters and promotional emails.
CSS (Cascading Style Sheets): A styling language that controls the
appearance and layout of HTML elements.
Purpose: Separates content (HTML) from presentation (CSS), allowing for
better flexibility and control over the design of web pages.
Key CSS Features:
Text Styling: Customize fonts, colors, sizes, line heights, and text
alignments for a polished look.
Box Model: Defines how elements are rendered, including margins, borders,
padding, and content area.
Layout Control:
Flexbox: Simplifies complex layouts by aligning and distributing space
within a container.
Grid: Provides a two-dimensional system for creating grid-based layouts
with rows and columns.
Responsive Design: Use media queries to adapt a website's layout to
different screen sizes, making it mobile-friendly.
Animations & Transitions: Add dynamic effects, such as hover animations
and smooth transitions between states.
Visual Effects: Apply shadows, gradients, and filters to enhance the visual
appeal.
Role of CSS:
Design Consistency: CSS allows for consistent styling across multiple
pages of a website, ensuring uniform design.
User Experience: A well-designed and responsive CSS layout improves
navigation and user engagement.
Efficiency: External CSS files reduce redundancy, enabling faster page
loading and easier updates.
Applications of CSS
Website Design: CSS is used to create visually appealing and responsive
websites across various devices and screen sizes (mobile, tablet, desktop).
User Interface (UI) Design: CSS is integral in styling buttons, navigation
bars, and other UI components to enhance the overall user experience.
Web Animations: CSS enables smooth animations and transitions, often
seen in interactive elements like hover effects, modal popups, and dynamic
scrolling effects.
Brand Consistency: CSS allows designers to implement consistent branding
across multiple pages by defining a unified style guide with fonts, colors,
and layouts.
Responsive Web Design: CSS ensures that websites adapt seamlessly to
different screen sizes, providing an optimal viewing experience on mobile
phones, tablets, and desktops.
EXPERIMENT - 3
Aim: A Login page for the online book store website. Containing User
name and password.
HTML CODE (login.html)
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Login Page</title>
<link rel=”stylesheet” href=”login.css”>
</head>
<body>
<div class=”login-container”>
<h1><u>Login Page</u></h1>
<h2>Enter Your Details Here!</h2>
<form>
<div class=”form-group”>
<label for=”username”>User name/Email:</label>
<input type=”email” id=”username” name=”username”
placeholder=”Srishti_Rawat/[email protected]” required>
</div>
<div class=”form-group”>
<label for=”password”>Password:</label>
<input type=”password” id=”password” name=”password” required>
</div>
<button type=”submit”>Login</button>
</form>
</div>
</body>
</html>
CSS CODE (login.css)
body {
font-family: arial, sans-serif;
background-color: rgba(255, 99, 71, 0.5);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0; }
.login-container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 408px;
}
h1{
text-align: center;
color: black;
text-transform: uppercase;
}
h2{
text-align: center;
color: red;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 800;
}
input {
width: 400px;
height: 25px;
margin: auto;
padding: 4px;
border: 1px solid #ccc;
border-radius: 4px;
align-items: center;
font-weight: 600;
}
button {
width: 100%;
padding: 10px;
background-color: red;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #5d7beb;
}
OUTPUT
EXPERIMENT - 6
Aim: Registration Page: Create a “registration form” with the some
specific fields.
HTML CODE (registration.html)
<!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>
<link rel=”stylesheet” href=”registration.css”>
</head>
<body>
<div class=”reg-container”>
<h1><u>Registration Page</u></h1>
<h2>Enter Your Details Here Below !</h2>
<form>
<div class=”form-group”>
<label for=”username”>Name:</label>
<input type=”text” id=”username” name=”username”
placeholder=”Srishti_Rawat” required>
</div>
<div class=”form-group”>
<label for=”password”>Password:</label>
<input type=”password” id=”password” name=”password” required>
</div>
<div class=”form-group”>
<label for=”mobile”>Mobile Number:</label>
<input type=”tel” id=”mobile” name=”mobile”
placeholder=”XXXXXXXX34” required>
</div>
<div class=”form-group”>
<label for=”address”>Address:</label>
<input type=”text” id=”address” name=”address”
placeholder=”House_No.,Street,City,Pincode” required>
</div>
<button type=”submit”>Login</button>
<div class=”prev”>
<div class=”already”>
<a href=”index.html”>Already Registered</a>
</div>
<div class=”reset”>
<!-- <button type=”redirect1”>Reset</button> →
<a href=”clear”>Reset</a>
</div>
</div>
</form>
</div>
</body>
</html>
CSS CODE (registration.css)
body {
font-family: arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.reg-container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 408px;
}
h1{
text-align: center;
color: black;
text-transform: uppercase;
}
h2{
text-align: center;
color: red;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 800;
}
input {
width: 400px;
height: 25px;
margin: auto;
padding: 4px;
border: 1px solid #ccc;
border-radius: 4px;
align-items: center;
font-weight: 600;
}
button {
width: 100%;
padding: 8px;
background-color: red;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: center;
}
button:hover {
background-color: #5d7beb;
}
.prev{
display: flex;
justify-content: flex-end;
margin-top: 15px;
}
.already{
height: 20px;
width: 75px;
margin-top: 10px;
margin-bottom: 10px;
font-size: small;
font-weight: 800;
text-align: center;
gap: 5px;
}
.reset{
height: 20px;
margin: 15px 7px;
font-weight: 800;
font-size: small;
text-align: center;
}
.already :hover{
color: rgb(12, 38, 233);
}
.reset :hover{
color: rgb(12, 38, 233);
}
a{
color: rgb(0, 0, 0);
text-decoration: none ;
}
OUTPUT
EXPERIMENT - 4
Aim:Catalogue Page: The catalogue page should contain the details of
all the books available in the website in a table
HTML CODE (catalogue.html)
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<link rel=”stylesheet” href=”catalogue.css”>
<title>Book Catalogue</title>
</head>
<body>
<h1>Book Catalogue</h1>
<div class=”all”>
<div class=”contents”>
<table border=”2”>
<thead>
<tr>
<th>BOOK NAME</th>
<th>BOOK IMAGE</th>
<th>PRICE</th>
<th>BUY/ADD TO CART</th>
</tr>
</thead>
<tbody>
<tr>
<td >ATOMIC HABBITS</td>
<td height=”150px”><img src="C:\Users\Shristi
Rawat\OneDrive\Desktop\MYNEW\Screenshot 2024-10-16 204621.png"
alt=”ATOMIC HABBITSD” height=”100px” width=”100px”></td>
<td>Rs.250/-</td>
<td><button>Buy Now</button></td>
</tr>
<tr>
<td>IKIGAI</td>
<td height=”150px”><img src="C:\Users\Shristi
Rawat\OneDrive\Desktop\MYNEW\IKIGAI.png" alt=”IKIGAI”></td>
<td>Rs.200/-</td>
<td><button>Buy Now</button></td>
</tr>
<tr>
<td> Rich Dad Poor Dad</td>
<td height=”150px”><img src="C:\Users\Shristi
Rawat\OneDrive\Desktop\MYNEW\RDPD.png" alt=” Rich Dad Poor
Dad”></td>
<td>Rs.300/-</td>
<td><button>Buy Now</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
CSS CODE (catalogue.css)
body {
font-family: arial, sans-serif;
margin: 20px;
}
h1 {
text-align: center;
margin-top: 70px;
text-transform: uppercase;
color: black;
text-decoration: underline;
font-weight: 800;
}
table {
width: 100%;
border-collapse: collapse;
}
th{
border: 1px solid #e9e3e3;
padding: 10px;
font-weight: 800;
font-size: x-large;
text-align: center;
background-color: rgb(127, 175, 234);
opacity: 0.8;
}
td {
border: 1px solid #e9e3e3;
padding: 10px;
font-weight: 500;
font-size: x-large;
text-align: center;
background-color: rgb(127, 175, 234);
}
.all{
display: flex;
margin-top: 5px;
justify-content: center;
align-items: center;
}
th {
background-color: #ed8686;
}
tr:hover {
background-color: #f1f1f1;
}
button {
background-color: #bd4df1;
color: white;
border: none;
padding: 8px 16px;
cursor: pointer;
align-items: center;
justify-content: center;
}
button:hover {
background-color: #433f9f;
}
img {
width: 100px;
height: auto;
}
OUTPUT
EXPERIMENT - 2
Aim:Design the following static web pages required for an online book
store website. As it must contain three frames Home page, Login page
and catalogue page.
HTML CODE (home.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Top Page</title>
<link rel="stylesheet" href="home.css">
</head>
<body>
<div class="top">
<div class="logo"><img src="C:\Users\Shristi
Rawat\OneDrive\Desktop\MYNEW\GALGOTIAS.png" alt=""></div>
<div class="mark"><marquee behavior="alternate"
direction="behavior">ONLINE
BOOK STORE</marquee></div>
</div>
<div class="heading">GALGOTIAS COLLEGE</div>
<div class="nav">
<ul>
<p><a href="#">HOME</a></p>
<p><a href="#">LOGIN</a></p>
<p><a href="#">REGISTRATION</a></p>
<p><a href="#">CATALOGUE</a></p>
<p><a href="#">CART</a></p>
</ul>
</div>
</body>
</html>
CSS CODE (home.css)
body{
background-color: rgb(236, 227, 245);
}
.top{
display: flex;
flex-direction: row;
border: 2px solid black;
}
.logo{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 200px;
width: 200px;
border: 1px solid black;
margin: 5px;
}
.mark{
height: 200px;
width: 920px;
background-color: rgb(253, 253, 179);
margin: auto;
}
.mark marquee{
height: 180px;
width:800px;
font-size: xxx-large;
font-weight: 800;
padding: 70px;
}
img{
height: 180px; }
.heading{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 800;
text-align: center;
font-size: xx-large;
margin: 25px;
}
.nav ul{
text-decoration: none;
display: flex;
flex-direction: row;
align-content: space-evenly;
background-color: black;
height: 40px; }
a{
text-decoration: none;
text-emphasis: none;
color: white;
}
p{
margin-right: 70px;
margin: auto;
}
EXPERIMENT - 5
Aim:Cart page: The cart page contains the details about thebooks which
are added to the cart.
HTML CODE (cart.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="cart-container">
<h1>Your Cart</h1>
<table class="cart-table">
<thead>
<tr>
<th>Book</th>
<th>Author</th>
<th>Quantity</th>
<th>Price (INR)</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Atomic Habits</td>
<td>James Clear</td>
<td>
<input type="number" value="1" min="1">
</td>
<td>250</td>
<td>250</td>
</tr>
<tr>
<td>Ikigai</td>
<td>Héctor García, Francesc Miralles</td>
<td>
<input type="number" value="1" min="1">
</td>
<td>200</td>
<td>200</td>
</tr>
<tr>
<td>Rich Dad Poor Dad</td>
<td>Robert T. Kiyosaki</td>
<td>
<input type="number" value="1" min="1">
</td>
<td>300</td>
<td>300</td>
</tr>
</tbody>
</table>
<div class="cart-summary">
<h2>Cart Summary</h2>
<p>Subtotal: <span>750 INR</span></p>
<p>Tax: <span>50 INR</span></p>
<p>Total: <strong>800 INR</strong></p>
<button class="checkout-btn">Proceed to Checkout</button>
</div>
</div>
</body>
</html>
CSS CODE (home.css)
body{
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.cart-container {
background-color: rgb(204, 255, 204);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 800px;
width: 100%;
}
h1, h2 {
text-align: center;
color: #333;
}
/* Cart Table */
.cart-table {
background-color: rgb(204, 255, 255);
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.cart-table th, .cart-table td {
padding: 10px;
text-align: center;
border: 1px solid #ddd;
}
.cart-table th {
background-color:rgb(102, 153, 255);
color: #333;
}
.cart-table input[type="number"] {
width: 60px;
padding: 5px;
}
/* Cart Summary */
.cart-summary {
margin-top: 20px;
text-align: center;
}
.cart-summary p {
font-size: 18px;
color: #333;
margin: 10px 0;
}
.cart-summary strong {
font-size: 22px;
color: #e63946;
}
.checkout-btn {
background-color: #38b000;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
}
.checkout-btn:hover {
background-color: #2f9e00;
}
OUTPUT
