Akash Web File (Final) --- 1
Uploaded by
himanshuashudhankhar2007Akash Web File (Final) --- 1
Uploaded by
himanshuashudhankhar2007PRACTICAL FILE
OF
“WEB PROGRAMMING LAB”
(13060213)
FACULTY OF ENGINEERING AND TECHNOLOGY
Submitted to: Submitted by:
Ms. Charvi Name: AKASH KUMAR
Assistant Professor Roll no.: 241306042
CSE, FEAT BCA AIML 2nd Sem
INDEX
S.No Name of the Experiment Date Signature
10
11
12
13
14
15
16
17
EXPERIMENT -1
AIM: Write an HTML code to display Your Education details in tabular form.
Source 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>
<style> body{ font-family: 'Times New Roman',
Times, serif; align-items: center; } caption{ font-
size:
2em; font-weight:
bold; } table{ width:
60%; margin-
top: 20px;
} th,td{ padding: 10px;
border:
1px solid black;
} th{background-color: rgb(116, 159, 241);
}
p{ font-size: 1.6em;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<table>
<caption>Akash kumar : Education Details </caption>
<tr>
<th> Qualification </th>
<th> School/College</th>
<th> Board/University</th>
<th> Year</th>
<th> Percentage/CGPA</th>
</tr>
<tr>
<th> 10 <sup>th</sup></th>
<td> K.V.A.A.I Rangpuri</td>
<td> CBSE</td>
<td> 2022</td>
<td> 70%</td>
</tr>
<tr>
<th> 12 <sup>th</sup></th>
<td> K.V.A.A.I Rangpuri</td>
<td> CBSE</td>
<td> 2024</td>
<td> 75%</td>
</tr>
<tr>
<th> BCA</th>
<td> SGT University</td>
<td> SGT University</td>
<td> Persuing </td>
<td> -</td>
</tr>
</table>
</body>
OUTPUT:
EXPERIMENT -2
AIM: Write an HTML code to display Your C.V.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resume </title> <style> body{
font-family: Arial, Helvetica, sans-serif;
margin: 20px; align-items: center; }
.container{ background-color: #fff; border: 1px solid black; padding: 20px; max-width:
700px; margin: auto;
}
.header{ display: flex; justify-content: space-between; align-items: ; }
.pic img{ height: 100px; align-items:
center;
} table{ width: 60%; margin-
bottom: 3%;
} th,td{ padding: 10px; border: 1px
solid black;
} th{ background-color: rgb(148, 165, 251);
}
}
.header p{ background-color: rgb(180, 180, 234);
}
</style> </head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<div class="section-title"><strong>SUMMERY:</strong></div>
<p>Passionate BCA student at SGT University, scheduled to graduate in 2027 with 70% in
10th and 75% in 12th. Proficient in computer fundamentals and Microsoft Office, with
good leadership and teamwork abilities. Creative individual who enjoys sketching,
painting, and badminton, and is bilingual in English and Hindi. Devoted to personal and
professional development. </p>
</div>
<div class="sectio">
<div class="section-title"><strong>CONTACT INFORMATION:</strong></div>
<p>Email: <a href=" [email protected]">
[email protected]</a></p>
<p>Phone: XXXXXXXX75</p>
<p>Address: Mata Chowk Mahipalpur, New Delhi-110037</p>
</div>
<div class="section">
<div class="section-title"><strong>ACADEMIC DETAILS:</strong></div>
<p><Strong>Currently Pursuing BCA from SGT Uinversity(till2027). <br> Completed
10 <sup>th</sup> from (K.V.A.A.I Rangpuri) and 12
<sup>th</sup> from (K.V.A.A.I Rangpuri)</Strong></p>
<table>
<caption>Education Details </caption>
<tr>
<th> Qualification </th>
<th> School/College</th>
<th> Board/University</th>
<th> Year</th>
<th> Percentage/CGPA</th>
</tr>
<tr>
<th> 10 <sup>th</sup></th>
<td>K.V.A.A.I Rangpuri</td>
<td> CBSE</td>
<td> 2022</td>
<td> 70%</td>
</tr>
<tr>
<th> 12 <sup>th</sup></th>
<td> K.V.A.A.I Rangpuri</td>
<td> CBSE</td>
<td> 2024</td>
<td> 92%</td>
</tr>
<tr>
<th> BCA</th>
<td> SGT University</td>
<td> SGT University</td>
<td> 2025-2027</td>
<td> Persuing </td>
</tr>
</table>
</div>
<div class="section">
<div class="section-title"><strong>COMPUTER
PROFICIENCY:</strong></div>
<ul>
<li>Having good knowledge of MS OFFICE:</li>
<ul>
<li>MS-WORD.</li>
<li>MS-EXCEL.</li>
<li>MS-POWERPOINT.</li>
</ul>
<li>Basic knowledge of C Programming.</li>
</ul>
</div>
<div class="section">
<div class="section">
<div class="section-title"><strong>OTHER SKILLS:</strong></div>
<ul>
<li>leadership</li>
<li>Can work efficiently in team, as well as individually</li>
<li>Having good inter-personal skills</li>
</ul>
</div>
<div class="section">
<ul>
<li><strong>Date of Birth :</strong> 15 <sup>th</sup> of November
2003</li>
<li><strong>Languages :</strong> English & Hindi</li>
<li><strong>Nationality :</strong> Indian</li>
<li><strong>Strength :</strong> Positive attitude, Hardworker, Punctuality, Good listener,
Quick learner</li>
</ul>
</div>
<div class="section">
<div class="section-title"><strong>HOBBIES:</strong></div>
<ul>
<li>Watching Anime</li>
<li>Badminton</li>
<li>Listen Music</li>
</ul>
</div>
<div class="section">
<div class="section-title"><strong>DECLARATION:</strong></div>
<p>I heareby inform you that all the statements made above are true in the best of my
knowledge and belief.</p>
</div>
</body>
</html>
OUTPUT:
EXPERIMENT – 3
AIM: Write an HTML code to create a Home page having three links: About Us, Our
Services and Contact Us. Create separate web pages for the three links.
✅ 1. index.html – Home Page
Code:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 40px;
background-color: #f0f8ff;
text-align: center;
}
a{
display: inline-block;
margin: 20px;
padding: 12px 24px;
background-color: #4CAF50;
color: white;
text-decoration: none;
border-radius: 8px;
font-size: 18px;
}
a:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<h1>Welcome to Our Website</h1>
<p>Select an option below:</p>
<a href="about.html">About Us</a>
<a href="services.html">Our Services</a>
<a href="contact.html">Contact Us</a>
</body>
</html>
OUTPUT:
✅ 2. about.html – About Us Page
Code:
<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<h1>About Us</h1>
<p>We are a company dedicated to providing excellent services to our customers.</p>
<p><a href="index.html">Back to Home</a></p>
</body>
</html>
OUTPUT:
✅ 3. services.html – Our Services Page
Code:
<!DOCTYPE html>
<html>
<head>
<title>Our Services</title>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<h1>Our Services</h1>
<ul>
<li>Web Development</li>
<li>Mobile App Development</li>
<li>AI & Machine Learning Solutions</li>
</ul>
<p><a href="index.html">Back to Home</a></p>
</body>
</html>
OUTPUT:
✅ 4. contact.html – Contact Us Page
Code:
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<h1>Contact Us</h1>
<p>Email: [email protected]</p>
<p>Phone: +1 123 456 7890</p>
<p><a href="index.html">Back to Home</a></p>
</body>
</html>
OUTPUT:
EXPERIMENT – 4
AIM: Write an HTML code to create a login form. On submitting the form, the user
should get navigated to a profile page.
LOGIN PAGE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Login Form</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.login-box {
background-color: #fff;
padding: 4vw;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
h2 {
margin: 0 0 20px;
text-align: center;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="login-box">
<h2>Login Form</h2>
<form action="/login" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required />
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
</div>
<div>
<button type="submit">Login</button>
</div>
</form>
</div>
</body>
</html>
PYTHON:
from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)
@app.route('/')
def index():
return render_template('login.html')
@app.route('/login', methods=['POST'])
def login():
username = request.form.get('username')
password = request.form.get('password')
# Simple check (you can replace with database logic)
if username and password:
return redirect(url_for('profile', username=username))
else:
return "Invalid credentials, please try again.", 401
@app.route('/profile/<username>')
def profile(username):
return f"<div><h1>Welcome, {username}!</h1></div>"
if __name__ == '__main__':
app.run(debug=True)
OUTPUT:
After “Clicking” Login:
EXPERIMENT – 5
AIM: Write an HTML code to create a Registration Form. On submitting the form,
the user should be asked to login with these new credentials.
LOGIN CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Login Form</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.login-box {
background-color: #fff;
padding: 4vw;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
perspective: 1000px;
transform-style: preserve-3d;
}
h2 {
margin: 0 0 20px;
text-align: center;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
.register-link {
text-align: center;
margin-top: 10px;
}
.register-link a {
color: #007bff;
text-decoration: none;
}
.register-link a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-box">
<h2>Login Form</h2>
<form action="/login" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required />
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
</div>
<div>
<button type="submit">Login</button>
</div>
</form>
<div class="register-link">
<p>Don't have an account? <a href="/register">Register here</a></p>
</div>
</div>
</body>
</html>
REGISTER CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Registration Form</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.register-box {
background-color: #fff;
padding: 4vw;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
perspective: 1000px;
transform-style: preserve-3d;
}
h2 {
margin: 0 0 20px;
text-align: center;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
.login-link {
text-align: center;
margin-top: 10px;
}
.login-link a {
color: #007bff;
text-decoration: none;
}
.login-link a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="register-box">
<h2>Registration Form</h2>
<form action="/register" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required />
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
</div>
<div>
<button type="submit">Register</button>
</div>
</form>
<div class="login-link">
<p>Already have an account? <a href="/">Login here</a></p>
</div>
</div>
</body>
</html>
PYTHON CODE:
from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)
# In-memory storage for users (for simplicity, use a database in production)
users = {}
@app.route('/')
def index():
return render_template('login.html')
@app.route('/login', methods=['POST'])
def login():
username = request.form['username']
password = request.form['password']
if username in users and users[username] == password:
return redirect(url_for('profile', username=username))
else:
return "Invalid credentials, please try again.", 401
@app.route('/register', methods=['GET', 'POST'])
def register():
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
if username in users:
return "Username already exists, please choose another.", 400
else:
users[username] = password
return redirect(url_for('index'))
return render_template('register.html')
@app.route('/profile/<username>')
def profile(username):
return f"<h1>Welcome, {username}!</h1>"
if __name__ == '__main__':
app.run(debug=True)
OUTPUT:
After Clicking “Register”
EXPERIMENT - 6
AIM: Write an HTML code to create your Institute website, Department Website
and Tutorial website for specific subject.
Source Code:
IFRAMES:
<!DOCTYPE html>
<html>
<head>
<title>My Education Web Portal</title>
<style>
body {
text-align: center;
font-family: "Times New Roman", Times, serif;
}
h2 {
color: #0056b3;
font-size: 2rem;
}
a{
margin: 0 10px;
font-size: 1rem;
color: #0077cc;
text-decoration: none;
}
iframe {
width: 90%;
height: 500px;
border: none;
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Welcome to My Education Web Portal</h2>
<div>
| <a href="ins.html" target="iframe_a">Institute Website</a> |
<a href="dep.html" target="iframe_a">Department Website</a> |
<a href="tut.html" target="iframe_a">Tutorial Website</a> |
</div>
<iframe name="iframe_a"
src="https://plus.unsplash.com/premium_photo-1677567996070-
68fa4181775a?q=80&w=2072&auto=format&fit=crop&ixlib=rb-
4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
title="iframe"
scrolling="no">
</iframe>
<footer>
<h2>Name: Akash Kumar <br> Roll No.: 241306042</h2>
</footer>
</body>
</html>
INSTITUTE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Institute</title>
<style>
body {
text-align: center;
}
h2 {
color: #0077cc;
font-size: 2.5rem;
}
h3 {
color: #333;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2>Welcome To My Institute</h2>
<h3>Courses Offered</h3>
<h3>We offer the following programs:</h3>
<h3>
Course 1: 3 Years <br />
Course 2: 2 Years <br />
Course 3: 1 Year
</h3>
</body>
</html>
DEPARTMENT:
<!DOCTYPE html>
<html>
<head>
<title>Department of AIML</title>
<style>
h2 {
color: #0056b3;
font-size: 3rem;
}
h3 {
color: #333;
font-size: 1.5rem;
}
body{
text-align: center;
}
</style>
</head>
<body>
<h2>Welcome To Our Department Of AIML</h2>
<h3>About Our Department</h3>
<h3>
Introduction to Artificial Intelligence <br />
Machine Learning Algorithms <br />
Deep Learning <br />
Natural Language Processing
</h3>
</body>
</html>
TUTORIAL:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
text-align: center;
}
iframe {
width: 60% ;
height: 20em;
border: 1px solid black;
margin: 40px 20px;
}
</style>
</head>
<body>
<h2>Web Programming Tutorial</h2>
<p>Learn web programming with examples, exercises, and projects.</p>
<h3>HTML Tutorial</h3>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/HcOc7P5BMi4?si=KpBKLeBHIC-bhzDD" title="YouTube video
player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h3>CSS Tutorial</h3>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/ESnrn1kAD4E?si=7WipHjrDf0qVHBI6" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-
picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h3>JavaScript Tutorial</h3>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VlPiVmYuoqw?si=rs2QGPGdVkdryQfz" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-
picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h3>Web Dev</h3>
</body>
</html>
EXPERIMENT - 7
AIM: Write an HTML code to illustrate the usage of the following: Ordered List,
Unordered List, Definition List.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fruit
List</title>
</head>
<body>
<hr>
<p><b>Name : Akash Kumar <br> Roll
No.:241306042
</b></p> <hr>
<h2>My nested list </h2>
<ol type="A">
<li><b>Apple</b></li>
<li><b>Mango</b></li>
<uL type="square">
<LI><B>Green Mango </B></LI>
<LI><B>Red Mango</B></L>
</uL>
<LI><B>Banana</B></LI>
<uL type="disc">
<LI><B>10 Pieces</B></LI>
<uL type="circle">
<LI><B>60 rupees</B></LI>
</uL>
<LI><B>5 pieces</B></LI>
<uL type="circle">
<LI><B>30 rupees</B></LI>
</uL>
</uL>
<LI><B>Strawberry</B></LI>
</ol>
<hr>
<H2>My Definition list</H2>
<dl>
<dt><b>HTML</b></dt>
<dd>Hyper Text Markup Language</dd>
<dt><b>CSS</b></dt>
<dd>Cascading Style Sheets</dd>
</dl>
<hr>
</body>
</html>
OUTPUT:
EXPERIMENT - 8
AIM: Write an HTML code to create a frameset having header, nav and content
section.
Source Code:
<!DOCTYPE html>
<html lang="en">
<frame style="background-color: rgb(231, 238, 246);" src="nav.html" frameborder="0" scrolling="no">
<frame src="default.html" name="preview tab" frameborder="0"
style="border: 1px solid black; border-radius: 20px; overflow: hidden;" scrolling="no">
</frameset> </frameset>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> a{ text-decoration: none;
}
</style>
</head>
<nav>
<ul type="none">
<li><span>🔸</span><a href="default.html" target="preview tab" style="color:
rgb(17, 20, 23); font-style: bold;font-size: medium;"><strong>HOME</strong></a></li> <br>
<li><span>🔸</span><a href="h.html" target="preview tab" style="color: rgb(22,
26, 29); font-style: bold;font-size: medium;"><strong>DEPARTMENTS</strong></a></li> <br>
<li><span>🔸</span><a href="h.html" target="preview tab" style="color: rgb(15,
16, 17); font-style: bold;font-size: medium;"><strong>RGISTRATION</strong></a></li> <br>
<li><span>🔸</span><a href="h.html" target="preview tab" style="color: rgb(17,
19, 21); font-style: bold;font-size: medium;"><strong>LOGIN</strong></a></li>
</ul>
</nav>
<footer style="position: absolute; bottom: 0;">
<h2>Name: Akash Kumar <br>
Reg.No.: 241306042</h2>
</footer>
</html>
OUTPUT:
EXPERIMENT – 9
AIM : Write an HTML code to demonstrate the usage of inline CSS.
1. Change Text Colour:
Code:
<p style="color: red;">This is red text.</p>
Output:
2. Change Background Colour:
Code:
<div style="background-color: lightblue;">Blue background</div>
Output:
3. Change Font Size:
Code:
<h1 style="font-size: 36px;">Large Heading</h1>
Output:
4. Add Border:
Code:
<p style="border: 1px solid black;">Paragraph with border</p>
Output:
5. Add Padding
Code:
<div style="padding: 20px;">Padded box</div>
Output:
6. Add Margin
Code:
<div style="margin: 30px;">Box with margin</div>
Output:
7. Text Alignment
Code:
<p style="text-align: center;">Centered text</p>
Output:
8. Change Font Family
Code:
<p style="font-family: Arial, sans-serif;">Different font</p>
Output:
9. Change Width and Height
Code:
<div style="width: 200px; height: 100px; background: gray;">Fixed size box</div>
Output:
10. Make Text Bold and Italic
Code:
Output:
EXPERIMENT – 10
AIM: Write an HTML code to demonstrate the usage of internal CSS.
📄 File 1: style-demo1.html
Code:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example 1</title>
<style>
body {
background-color: #f0f8ff; font-
family: Arial, sans-serif;
} h1 { color:
darkblue; text-
align: center;
} p{
color: #333;
font-size: 18px;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<h1>Welcome to Page 1</h1>
<p>This page uses internal CSS to style the body, headings, and paragraphs.</p>
</body>
</html>
OUTPUT:
📄 File 2: style-demo2.html
Code:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example 2</title>
<style> body { background-
color: #fffbe0; font-family:
Verdana, sans-serif;
} h2 {
color: green;
border-bottom: 2px solid gray;
} ul { list-style-
type: square; padding-
left: 20px;
} li {
color: #555;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<h2>Shopping List</h2>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
</body>
</html>
OUTPUT:
EXPERIMENT – 12
AIM: Creating style sheets:
o Write intro to CSS.
o Features.
o Advantages.
o Types with examples.
o Conclusion.
Introduction to CSS
1. CSS (Cascading Style Sheets) is a language used to describe the presentation and styling of
HTML documents.
2. It controls how web pages look—such as layout, colours, fonts, spacing, and
responsiveness—separating the content (HTML) from the design (CSS).
3. CSS makes websites visually attractive and user-friendly.
Features of CSS
1. ✅ Separation of content and design
2. 🎨 Styling options for colors, fonts, borders, layouts, etc.
3. 📱 Responsive design with media queries
4. 🧩 Reusability through external style sheets
5. 🧠 Cascading and inheritance rules to manage priority
6. 🧼 Cleaner HTML by removing inline styling
Advantages of CSS
1. Improved Website Appearance
CSS enhances the visual presentation of web pages significantly.
2. Saves Time
External CSS files can be reused across multiple HTML pages.
3. Faster Page Loading
CSS reduces code redundancy and allows for cleaner HTML.
4. Responsive Web Design
CSS helps adapt the layout to different screen sizes.
5. Easier Maintenance
Updating one CSS file changes styles across an entire site.
Types of CSS with Examples:
1. Inline CSS
CSS is applied directly within an HTML element using the style attribute.
Code:
<p style="color: red; font-size: 20px;">This is inline CSS</p>
Output:
2. Internal CSS
CSS is written inside a <style> tag within the <head> section of the HTML document.
Code:
<!DOCTYPE html>
<html>
<head> <style>
p{ color:
green; font-
size: 18px;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<p>This is internal CSS</p>
</body>
</html>
OUTPUT:
3. External CSS
CSS is placed in a separate .css file and linked using the <link> tag.
Code:
<!-- HTML file -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p> <hr>
<p>This is External CSS</p>
</body>
</html>
OUTPUT:
/* styles.css file */
<!DOCTYPE html>
<html>
<head> <style>
p { color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<p>This is External CSS</p>
</body>
</html>
OUTPUT:
Conclusion:
CSS plays a crucial role in modern web development. It allows developers to build visually
appealing, consistent, and responsive websites while keeping HTML content clean and organized.
Understanding the types and benefits of CSS is essential for creating efficient and maintainable
web pages.
EXPERIMENT – 13
AIM: CSS Styling(Background, Text Format, Controlling Fonts)
1. Using CSS for Background
CSS allows you to style the background of elements using properties like backgroundcolor,
background-image, etc.
<!DOCTYPE html>
<html>
<head> <style> body {
background-color: #f0f8ff;
}
.section {
background-image: url('https://via.placeholder.com/300x100');
background-repeat: no-repeat; background-size: cover;
padding: 50px; color: black;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<h2>Background Color Example</h2>
<div class="section">
This section has a background image.
</div>
</body>
</html>
OUTPUT:
2. Using CSS for Text Formatting
CSS text formatting includes alignment, transformation, decoration, spacing, and more.
Code:
<!DOCTYPE html>
<html>
<head> <style> p {
text-align: center; text-
transform: uppercase; text-
decoration: underline;
letter-spacing: 2px; line-
height: 1.8;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<p>This is formatted text using CSS</p>
</body>
</html>
3. Using CSS for Controlling Fonts
CSS can change the font type, size, weight, and style.
Code:
<!DOCTYPE html>
<html>
<head>
<style> .font-
style {
font-family: 'Verdana', sans-serif;
font-size: 20px; font-weight:
bold; font-style: italic;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<p class="font-style">This text uses custom font styling.</p>
</body>
</html>
OUTPUT:
EXPERIMENT – 14
AIM: Show Examples:
o of CSS ID.
o and CSS class selector.
1. CSS ID Selector:
The ID selector is used to style a single, unique element. It starts with a # symbol in CSS.
Code:
<!DOCTYPE html>
<html>
<head>
<style> #highlight {
color: white;
background-color: blue;
padding: 10px; font-
size: 20px;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<p id="highlight">This paragraph is styled using an ID selector.</p>
</body>
</html>
Output:
2. CSS Class Selector:
The class selector is used to style multiple elements with the same class. It starts with a .
(dot) in CSS.
Code:
<!DOCTYPE html>
<html>
<head>
<style> .box { border:
2px solid black; padding:
15px; margin: 10px;
background-color: lightgray;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p> <hr>
<div class="box">This is Box 1</div>
<div class="box">This is Box 2</div>
<p class="box">This is a paragraph with the same class</p>
</body>
</html>
OUTPUT:
EXPERIMENT – 15
AIM: CSS Advanced (Grouping, Dimension, Display, Positioning, Floating, Align,
Pseudo class, Navigation Bar, Image Sprites, Attribute sector)
✅ Grouping Selector
Use: Apply the same style to multiple selectors at once.
Code:
<!DOCTYPE html>
<html>
<head>
<style> h1, h2, p { color:
navy; font-family: Arial, sans-
serif;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<p class="font-style">This text uses custom font styling.</p>
</body>
</html>
OUTPUT:
✅ Dimension (Width and Height)
Use: Control the size of elements.
Code:
<!DOCTYPE html>
<html>
<head>
<style> .box { width:
200px; height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<div class="box">Fixed size box</div>
</body>
</html>
OUTPUT:
✅ Display Property
Use: Control how elements are displayed (block, inline, flex, etc.).
Code:
<!DOCTYPE html>
<html>
<head>
<style> .inline-box {
display: inline-block;
width: 100px; height:
50px; background:
orange; margin: 5px;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p> <hr>
<div class="inline-box">Box 1</div>
<div class="inline-box">Box 2</div>
</body>
</html>
OUTPUT:
✅ Positioning (static, relative, absolute, fixed)
Use: Place elements at specific positions.
Code:
<!DOCTYPE html>
<html>
<head>
<style> .relative-box {
position: relative; top:
20px; left: 30px;
background: lightgreen;
padding: 10px;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<div class="relative-box">Relative Positioned Box</div>
</body>
</html>
OUTPUT:
✅ Floating
Use: Float elements to the left or right for layout control.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.float-box {
float: left;
width: 150px;
height: 100px;
margin: 10px;
background-color: pink;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<div class="float-box">Box 1</div>
<div class="float-box">Box 2</div>
<p>Text wraps around floated boxes.</p>
</body>
</html>
OUTPUT:
✅ Text Align
Use: Align text inside an element.
Code:
<!DOCTYPE html>
<html>
<head>
<style> .center-text
{ text-align:
center; color:
darkred;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<p class="center-text">This text is centered.</p>
</body>
</html>
OUTPUT:
✅ Pseudo-class
Use: Define special states (e.g. :hover, :first-child, :focus).
Code:
<!DOCTYPE html>
<html>
<head> <style> a:hover {
color: red; text-decoration:
underline;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<a href="#">Hover over this link</a>
</body>
</html>
OUTPUT:
✅ Attribute Selector
Use: Target elements with specific attributes.
Code:
<!DOCTYPE html>
<html>
<head> <style>
input[type="text"] { background-
color: #e0f7fa; border: 1px solid
#00acc1;
}
</style>
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<input type="text" placeholder="Text input">
<input type="password" placeholder="Password input">
</body>
</html>
OUTPUT:
✅ Navigation Bar Code (HTML + CSS)
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Navigation Bar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<hr>
<p><b>Name: Akash kumar <br>Roll No.:241306042</b></p>
<hr>
<nav class="navbar">
<div class="logo">MySite</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
OUTPUT:
EXPERIMENT – 16
AIM: Creating page Layout and Site Designs.
Designing the layout and structure of a web page using HTML involves organizing content
into meaningful sections that improve readability, usability, and accessibility. HTML serves as
the foundation of every web page, defining the structure, while CSS is later used to style it.
🔷 1. Purpose of Page Layout in HTML
Organize content visually and logically.
Help users navigate and understand the website.
Prepare content to be styled and displayed across devices.
Establish a consistent structure across multiple pages.
🔷 2. Common Sections of a Web Page Layout
HTML5 introduced semantic elements to define specific parts of a page clearly:
Header: Usually contains the logo, website title, and navigation menu.
Navigation (Nav): Holds menus or links that help users move between pages.
Main: Represents the central content unique to each page.
Section: Groups related content under a common theme or purpose.
Article: Contains standalone content such as blog posts or news articles.
Aside: Used for sidebars, ads, or supplementary information.
Footer: Placed at the bottom, containing copyright, contact info, or links.
🔷 3. Types of Page Layouts
Single Column Layout: Ideal for mobile devices or blogs; content flows vertically.
Two-Column Layout: One column for main content, another for sidebar/ads.
Three-Column Layout: Often used in news websites; sidebars on both sides.
Grid Layout: Uses rows and columns for more complex, flexible designs.
🔷 5. Principles of Good Layout Design
Consistency: Uniform layout across pages.
Clarity: Clear visual hierarchy with headings and sections.
Simplicity: Avoid clutter; use whitespace to separate content.
Accessibility: Use semantic tags and alt attributes for screen readers.
Responsiveness: Though handled by CSS, structure should be adaptable.
🔷 6. Linking Pages in a Site Design
Internal linking is done through navigation menus.
A consistent layout ensures smooth navigation across "Home", "About", "Contact", etc.
Each page follows the same structural layout for a unified user experience.
✅ Conclusion
HTML is essential for defining the structure and layout of a website. It provides a logical
way to separate and organize content into sections that users and search engines can easily
understand. While HTML handles the structure, CSS is later applied to control the visual
appearance and responsiveness of these layouts.
EXPERIMENT – 17
AIM: Writing program in XML and create a style sheet in CSS & display the
document in internet explorer.
XML CODE:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style2.css"?>
<library>
<student>
<name>Akash Kumar</name>
<regno>241306042</regno>
</student>
<book>
<title> Oppenheimer </title>
<author>Christopher Nolen</author>
<year>2014</year>
</book>
<book>
<title>The Hobbit</title>
<author>J.R.R. Tolkien</author>
<year>1937</year>
</book>
</library>
CSS CODE:
library {
display: block;
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
padding: 30px;
}
student {
display: block;
margin-bottom: 20px;
}
name {
display: block;
font-size: 22px;
color: #1a237e;
font-weight: bold;
}
regno {
display: block;
font-size: 18px;
color: green;
}
book {
display: block;
margin: 15px auto;
padding: 10px;
border: 1px solid #ccc;
background-color: #fff;
}
title {
display: block;
font-size: 16px;
font-weight: bold;
}
author {
display: block;
font-style: italic;
margin-top: 5px;
}
year {
display: block;
margin-top: 2px;
font-size: 14px;
}
OUTPUT:
EXPERIMENT – 11
AIM: Write an HTML code to demonstrate the usage of external CSS.
FRAMESET:
<!DOCTYPE html>
<html>
<head>
<title>Photo Gallery with Frameset</title>
<link rel="stylesheet" href="style.css">
</head>
<frameset rows="20%,45%,45%">
<frameset> <frame src="title.html" scrolling="off" frameborder="0"></frameset>
<frameset cols="33%,33%,34%">
<frame src="photo1.html" frameborder="0" scrolling="off">
<frame src="photo2.html" frameborder="0" scrolling="off">
<frame src="photo3.html" frameborder="0" scrolling="off">
</frameset>
<frameset cols="33%,33%,34%" >
<frame src="photo4.html" frameborder="0" scrolling="off">
<frame src="photo5.html" frameborder="0" scrolling="off">
<frame src="photo6.html" frameborder="0" scrolling="off">
</frameset>
</frameset>
</html>
CSS CODE:
body {
text-align: center;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
img {
width: 95%;
height: 65%;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
p{
font-size: 20px;
font-weight: bold;
color: #333;
margin-top: 10px;
}
frame{
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3) ;
border-radius: 20px;
}
.title{
font-size: 30px;
font-family: ‘Times New Roman’, Times, serif;
}
TITLE 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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="title">|| MY ANIME GALARY ||</p>
<p> NAME : Aryan Verma <br> Reg. No. 241306064</p>
</body>
</html>
IMAGE FILES:
IMG:1 –
<!DOCTYPE html>
<html>
<head>
<title>Photo 1</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="https://wallpapercave.com/wp/wp11326365.jpg" alt="Photo 1">
<p>〢 ONE PIECE 〢Aryan’s #1 Anime</p>
<P> </P>
</body>
</html>
IMG:2 –
<!DOCTYPE html>
<html>
<head>
<title>Photo 1</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="https://cdn.theanimegallery.com/theanimegallery/b61e5646-410d-4163-93df-
f6d2a7a0d3f3-bleach-anime-wallpaper.webp" alt="Photo 2">
<p>〢BLEACH〢</p>
</body>
</html>
IMG:3 –
<!DOCTYPE html>
<html>
<head>
<title>Photo 1</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="https://wallpapers-clan.com/wp-content/uploads/2025/05/eren-yeager-cool-aot-wallpaper-
cover.jpg" alt="Photo 3">
<p>〢Attack On Titan〢</p>
</body>
</html>
IMG:4 –
<!DOCTYPE html>
<html>
<head>
<title>Photo 4</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="https://images.alphacoders.com/136/1363137.png" alt="Photo 4">
<p>〢Demon Slayer〢</p>
</body>
</html>
IMG:5 –
<!DOCTYPE html>
<html>
<head>
<title>Photo 4</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="https://wallpapers.com/images/featured/haikyuu-4k-dbhpie4w1ghx8tnx.jpg" alt="Photo
1">
<p>〢Haikyu !!〢</p>
</body>
</html>
IMG:6 –
<!DOCTYPE html>
<html>
<head>
<title>Photo 4</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="https://e0.pxfuel.com/wallpapers/114/268/desktop-wallpaper-black-clover-black-bulls.jpg"
alt="Photo 1">
<p>〢BLACK CLOVER〢</p>
</body>
</html>
OUTPUT:
You might also like
- Yoga Anatomy (Leslie Kaminoff) (Z-Library)No ratings yetYoga Anatomy (Leslie Kaminoff) (Z-Library)43 pages
- Program No:1: Objective: - To Write An HTML/Java Scripts Code To Display Your CV in NavigatorNo ratings yetProgram No:1: Objective: - To Write An HTML/Java Scripts Code To Display Your CV in Navigator65 pages
- Masters Among Us: An Exploration of Supernal Encounters and Miraculous PhenomenaFrom EverandMasters Among Us: An Exploration of Supernal Encounters and Miraculous PhenomenaNo ratings yet
- Load ASP - NET MVC Partial Views Dynamically Using Jquery - BinaryIntellect Knowledge BaseNo ratings yetLoad ASP - NET MVC Partial Views Dynamically Using Jquery - BinaryIntellect Knowledge Base8 pages
- Class 12 Banking Management System Documentation Utkarsh SaxenaNo ratings yetClass 12 Banking Management System Documentation Utkarsh Saxena48 pages
- NDLI CLUB Registration Process: Website: Https://club - Ndl.iitkgp - Ac.in/club-Home Support Email0% (1)NDLI CLUB Registration Process: Website: Https://club - Ndl.iitkgp - Ac.in/club-Home Support Email27 pages
- The Truth About HTML5 - FreePdfBook PDFNo ratings yetThe Truth About HTML5 - FreePdfBook PDF269 pages
- Web App. Dev. Security - Lab Manual 3 - JavaScriptNo ratings yetWeb App. Dev. Security - Lab Manual 3 - JavaScript20 pages
- Installation: Cloudtv H5 Platform Training - 2014No ratings yetInstallation: Cloudtv H5 Platform Training - 201438 pages
- SOP 024 Install Sumo in Any Site Using GTMNo ratings yetSOP 024 Install Sumo in Any Site Using GTM8 pages
- What'S New in Iknow?: Quick Start Guide For IknowNo ratings yetWhat'S New in Iknow?: Quick Start Guide For Iknow7 pages
