Scribd
Upload
12 views70 pages

Rinku Lab File

The document is a practical file for a Web Programming Lab course, detailing various HTML experiments conducted by a student named Rinku Saini. It includes code examples for displaying education details, creating a CV, building a home page with navigation links, and developing login and registration forms. Additionally, it covers creating an institute website, illustrating list types, and using framesets.

Uploaded by

himanshuashudhankhar2007
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
12 views70 pages

Rinku Lab File

The document is a practical file for a Web Programming Lab course, detailing various HTML experiments conducted by a student named Rinku Saini. It includes code examples for displaying education details, creating a CV, building a home page with navigation links, and developing login and registration forms. Additionally, it covers creating an institute website, illustrating list types, and using framesets.

Uploaded by

himanshuashudhankhar2007
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/ 70

PRACTICAL FILE

OF
“WEB PROGRAMMING LAB”
(13060213)

FACULTY OF ENGINEERING AND TECHNOLOGY

Submitted to: Submitted by:


Ms. Charvi Name: Rinku Saini
Assistant Professor Roll no.: 241306025
CSE, FEAT BCA B 2nd Sem
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 a tabular format.
<!DOCTYPE html>
<html>
<head>
<title>Education Details</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
table {
width: 70%;
border-collapse: collapse;
margin: 0 auto;
}
th, td {
border: 1px solid #444;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
caption {
font-size: 1.5em;
margin-bottom: 10px;
}
</style>
</head>
<body>
<table>
<caption>My Education Details</caption>
<thead>
<div class="info">
<h2>Name: Rinku Saini</h2>
<p>Roll No: 241306025</p>
</div> <tr>
<th>Qualification</th>
<th>Institution</th>
<th>Year of Passing</th>
<th>Percentage / CGPA</th>
</tr>
</thead>
<tbody>
<tr>
<td>10th class</td>
<td>Budhera public School</td>
<td>2021</td>
<td>85%</td>
</tr>
<tr>
<td>12th class</td>
<td>Budhera public school</td>
<td>2023</td>
<td>88%</td>
</tr>
<tr>
<td>graduation(BCA)</td>
<td>SGT UNIVERSITY</td>
<td>2024</td>
<td>Presuring</td>
</tr>
</tbody>
</table>

</body>
</html>

Output
EXPERIMENT – 2

AIM- Write an HTML code to display your CV on a web page.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My CV</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
line-height: 1.6;
} h1,
h2 {
color: #2c3e50;
}
.section {
margin-bottom: 20px;
}
.contact-info {
font-size: 0.95em;
color: #555;
}
</style>
</head>

<body>

<h1>Rinku Saini</h1>
<h3>Roll no: 241306025</h3>
<p class="contact-info">
</p>

<div class="section">
<h2>Career Objective</h2>
<p>
To obtain a challenging position where I can utilize my skills and contribute to the success of
the
organization.
</p>
</div>

<div class="section">
<h2>Education</h2>
<ul>
<li>Bachelor in Computer applications, SGT University (2024 - 2028)</li>
<li>High School,Delhi pulic School (2021 - 2023)</li>
</ul>
</div>

<div class="section">
<h2>Skills</h2>
<ul>
<li>HTML, CSS, JavaScript</li>
<li>Python, Java</li>
<li>Problem Solving and Teamwork</li>
</ul>
</div>

<div class="section">
<h2>Experience</h2>
<ul>
<li>fresher</li>
</ul>
</div>

<div class="section">
<h2>Projects</h2>
<ul>
<li>Portfolio Website – A personal site to showcase my work and resume</li>
</ul>
</div>
<div class="section">
<h2>Languages</h2>
<ul>
<li>English – Fluent</li>
</ul>
</div>
<div class="section">
<h2>Hobbies</h2>
<ul>
<li>Coding challenges</li>
<li>Traveling</li>
</ul>
</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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home Page</title>
</head>
<body>
<div class="info">
<h2>Name: Rinku Saini</h2>
<h3>Roll No: 241306025</h3>
</div>
<h1>Welcome to Our Website</h1>
<nav>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Our Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About Us</title>
</head>
<body>
<h1>About Us</h1>
<p>We are a company dedicated to delivering quality services to our clients.</p>
<a href="index.html">Back to Home</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Our Services</title>
</head>
<body>
<h1>Our Services</h1>
<ul>
<li>Web Development</li>
<li>Mobile App Development</li>
<li>Digital Marketing</li>
</ul>
<a href="index.html">Back to Home</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact Us</title>
</head>
<body>

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 .
Source Code

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

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

<title>Login</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

display: flex;

height: 100vh;

align-items: center;

justify-content: center;

.login-container {

background: #fff;

padding: 2em;

border-radius: 8px;

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

width: 300px;

input[type="text"],

input[type="password"] {
width: 100%;

padding: 0.75em;

margin: 0.5em 0 1em;

border: 1px solid #ccc;

border-radius: 4px;

button {

width: 100%;

padding: 0.75em;

background-color: #28a745;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

button:hover {

background-color: #218838;

</style>

</head>

<body>

<div class="login-container">

<h2>Login</h2>

<form action="profile.html" method="GET">

<label for="username">Username:</label>

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

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

<button type="submit">Login</button>

</form>

</div>

</body>

</html>

2. Profile Page
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

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

<title>Profile</title>

<style>
body {

font-family: Arial, sans-serif;

background-color: #e9f5ff;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

.profile-box {

background: white;

padding: 2em;

border-radius: 8px;

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

text-align: center;

</style>

</head>

<body>

<div class="profile-box">

<h1>Welcome to Your Profile!</h1>

<p>You have successfully logged in.</p>

</div>

</body>

</html>
EXPERIMENT – 5

AIM – Write an HTML code to create a Registration Form. On submitting the form, the user
should be asked to login with this new credentials.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

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

<title>Register</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f0f8ff;

display: flex;

align-items: center;

justify-content: center;

height: 100vh;
}

.form-container {

background: white;

padding: 2em;

border-radius: 8px;

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

width: 320px;

input {

width: 100%;

padding: 0.75em;

margin: 0.5em 0 1em;

border: 1px solid #ccc;

border-radius: 4px;

button {

width: 100%;

padding: 0.75em;

background-color: #007bff;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

button:hover {

background-color: #0056b3;

</style>
</head>

<body>

<div class="form-container">

<h2>Register</h2>

<form action="login.html" method="GET">

<label for="fullname">Full Name:</label>

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

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

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

<label for="username">Username:</label>

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

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

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

<button type="submit">Register</button>

</form>

</div>

</body>

</html>
2. Login Page
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

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

<title>Login</title>

<style>

body {
font-family: Arial, sans-serif;

background-color: #fdf6e3;

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

.form-container {

background: white;

padding: 2em;

border-radius: 8px;

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

width: 300px;

input {

width: 100%;

padding: 0.75em;

margin: 0.5em 0 1em;

border: 1px solid #ccc;

border-radius: 4px;

button {

width: 100%;

padding: 0.75em;

background-color: #28a745;

color: white;

border: none;

border-radius: 4px;
cursor: pointer;

button:hover {

background-color: #218838;

</style>

</head>

<body>

<div class="form-container">

<h2>Login</h2>

<p>Registered successfully. Please log in:</p>

<form action="profile.html" method="GET">

<label for="username">Username:</label>

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

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

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

<button type="submit">Login</button>

</form>

</div>

</body>

</html>
Output
EXPERIMENT -6
AIM – Write an HTML code to create your Institute website, Department Website and
Tutorial website for specific subject.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>My Institute</title>

</head>

<body>

div class="info">

<h2>Name: Rinku Saini</h2>

<p>Roll No: 241306025</p>

</div>

<h1>Welcome to My Institute</h1>

<p>Leading education institute focused on innovation and excellence.</p>

<h2>Departments</h2>

<ul>

<li><a href="department.html">Computer Science Department</a></li>

<li><a href="#">Mechanical Engineering</a></li>

<li><a href="#">Business Administration</a></li>

</ul>

<footer>
<p>&copy; 2025 My Institute. All rights reserved.</p>

</footer>

</body>

</html>

Output
Experiment 7
AIM: Write an HTML code to illustrate the usage of the following: Ordered list, Unordered
list and Definition list.

<!DOCTYPE html>

<head>

<meta charset="UTF-8">

<<tle>Document</<tle>

</head>

<body>

<h1>Nested LIST</h1>

<p>Rinku Saini</p>

<p>241306025</p>

<p>BCA2A</p>

<p>Nested list is as follows</p>

<ol type="A">

<li>APPLE</li>

<li>MANGO</li>

<ul type="square">

<li>green mango</li>

<li>red mango</li>

</ul>

<li>BANANA</li>

<ul type="disc">

<li> 10 piece</li>

<ul type="circle">

<li>60 repees</li>

</ul>

<li>5 piece</li>
<ul type="circle">

<li>30 repees</li>

</ul>

</ul>

<dl>

<dt>ORANGE</dt>

<dd>BUY 2KG, GET 1KG FREE</dd>

<dt>GRAPES</dt>

<dd>BUY 3KG, GET 1KG FREE</dd>

</dl>

<li>PINEAPPLE</li>

</od>

</body>

</html>
Output
Experiment-8

AIM: Write an html code to create a frameset having header, navigation and content
sections. Source Code:

<!Doctype html>
<html>
<frameset rows="30,70">
<frame src="header.html">
<frameset cols="25,75">
<frame src="navigation.html">
<frame src="content.html">
</frameset> </html>
header.html
<!Doctype html>
<html>
<body bgcolor="LightSteelBlue">
<h1 align="center">THE CULINARY HA VEN GROUP</h1>
<h2 align="center">When Passion Meets Tastebuds</h2>
</body> </html>
navigation.html
<!Doctype html>
<html>
<body bgcolor="AntiqueWhite">
<h2>CulinaryHavenGroup</h2>
<a href="#">Menu<br><br></a>
<a href="#">Specialties<br><br></a>
<a href="#">Reservations<br><br></a>
<a href="#">Opening<br><br></a>
<a href="#">Contact Us<br><br></a>
<a href="#">Sign Up/Login<br><br></a>
<a href="#">Terms and Conditions<br><br></a>
</body> </html>
content.html
<!Doctype hmtl>Rinku (241306025)
<html>
<body bgcolor="MintCream">
<h3 align="center"><br><br>Share, Explore And Celebrate The Art Of
Cooking</h3>
<p align="center">"Welcome to our Culinary Haven Group,where each dish is crafted to
perfection in an elegant setting.Experience the art of fine dining with exquisite flavors and
exceptional service that will transport you to a world of culinary delight.Whether you're
here to discover new recipes, exchange tips, or simply savor the joy of food, this is your
sanctuary for delicious discoveries. Join us in creating a space filled with flavor, creativity,
and inspiration. <strong>Let's cook, share, and enjoy every bite together! </strong>"</p>
<br><br><br><br>
<h2 align="center">Contact Us</h2>
<h4 align="center">Leave us a message we will be happy to respond.</h4>
</body>
</html>
Output
EXPERIMENT 9

AIM – Write an HTML code to demonstrate the usage of inline CSS.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Inline CSS Example</title>

</head>

<body>

<div class="info">

<h2>Name: Rinku Saini </h2>

<p>Roll No: 241306025 </p>

</div>

<h1 style="color: darkblue; text-align: center;">Welcome to Inline CSS</h1>

<p style="font-size: 18px; color: green;">

This paragraph is styled using inline CSS. The font size is increased, and the color is green.

</p>

<button style="background-color: orange; color: white; padding: 10px 20px; border: none;
border-radius: 5px;">

Click Me

</button>

<html>
Output
EXPERIMENT – 10

AIM – Write an HTML code to demonstrate the usage of internal CSS.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Internal CSS Example</title>

<style>

body {

background-color: #f0f8ff;

font-family: Arial, sans-serif;

h1 {

color: #2c3e50;

text-align: center;

p{

font-size: 18px;

color: #34495e;

padding: 10px;

.highlight {

background-color: #ffeaa7;

border-left: 5px solid #fdcb6e;

padding: 10px;
margin: 15px 0;

button {

background-color: #0984e3;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

cursor: pointer;

button:hover {

background-color: #74b9ff;

</style>

</head>

<body>

<div class="info">

<h2>Name: Rinku Saini </h2>

<p>Roll No: 241306025</p>

</div>

<h1>Welcome to Internal CSS</h1>

<p>This paragraph uses the default paragraph styling from the internal CSS block.</p>

<div class="highlight">
This is a highlighted message using a custom class.

</div>

<button>Click Me</button>

</body>

</html>

Output
EXPERIMENT – 11

AIM – Write an HTML code to demonstrate the usage of external CSS.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>External CSS Example</title>

<link rel="stylesheet" href="styles.css"> <!-- Link to the external CSS file -->

</head>

<body>

<div class="info">

<h2>Name: Rinku Saini </h2>

<p>Roll No: 241306025</p>

</div>

<h1>Welcome to External CSS</h1>

<p>This paragraph is styled using an external CSS file.</p>

<div class="note">

This is a highlighted note styled from an external stylesheet.

</div>

<button>Click Me</button>

</body>

</html>
Output
Experiment:- 12
1) Introduction to CSS
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a
document written in HTML or XML. CSS controls the layout and appearance of web pages,
including elements like fonts, colors, spacing, and positioning. It allows web developers to
separate content from design, making websites more maintainable and visually appealing.

2) Features of CSS
• Separation of content and design: CSS allows HTML to focus on structure, while style
rules define the visual design.
• Reusability: One CSS file can style multiple web pages, saving time and effort.
• Cascading rules: Styles are applied based on hierarchy and priority, making
customization flexible.
• Responsive design: CSS supports media queries that adapt the layout for different
screen sizes.
• Selector-based styling: Target elements precisely using selectors like IDs, classes,
tags, etc.

3) Advantages of CSS
• Improved website performance: CSS files are cached by browsers, reducing page
load time.
• Consistency: A single stylesheet can enforce a uniform design across all pages.
• Easier maintenance: Updating the CSS file automatically updates the style across all
pages.
• Accessibility: CSS makes content more accessible by allowing flexible layout and
responsive design.
• Customization: Users can override styles (e.g., for accessibility tools).

4) Types of CSS
1. Inline CSS
• Style is applied directly to HTML elements using the style attribute.
• Example: <p style="color: red;">This is red text.</p>
2. Internal CSS
• Style rules are defined within a <style> tag inside the <head> section of the HTML
document.
• Useful for single-page styling.
3. External CSS
• Style rules are written in a separate .css file and linked using the <link> tag.
• Best for multi-page websites.

5) CSS Example
HTML + External CSS Example
HTML File (index.html):
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Advanced CSS Example</title>

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

</head>

<body>

<!-- Grouping Example -->

<h1>Welcome to Advanced CSS</h1>

<p>This is a sample paragraph to demonstrate advanced CSS features.</p>

<p>By Rinku Saini 241306025</p> <!-- Updated name and roll number -->

<!-- Navigation Bar Example -->

<ul class="navbar">

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

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

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

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

</ul>

<!-- Layout with Floating Example -->

<div class="main-content">

<div class="content">Main Content</div>

<div class="sidebar">Sidebar Content</div>

</div>
<!-- Image Sprite Example -->

<div class="icon icon-home"></div>

<div class="icon icon-user"></div>

<!-- Attribute Selector Example -->

<a href="#" class="link" title="Go to Home">Home Link</a>

<a href="#" class="link" title="Go to About">About Link</a>

<!-- Pseudo-class Example -->

<a href="#">Hover Over Me</a>

</body>

</html>

Output
EXPERIMENT – 13

AIM – CSS Styling(Background, Text Format, Controlling Fonts)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Enhanced CSS Styling Example</title>

<!-- Importing Google Fonts -->

<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Open+Sans
&display=swap" rel="stylesheet">

<style>

/* General body styling */

body {

margin: 0;

padding: 0;

font-family: 'Open Sans', sans-serif;

background: linear-gradient(to right, #dfe6e9, #b2bec3);

color: #2d3436;

/* Container for content */

.container {

max-width: 900px;

margin: 50px auto;

padding: 40px;
background-color: #ffffff;

border-radius: 12px;

box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

h1 {

font-family: 'Montserrat', sans-serif;

font-size: 36px;

text-align: center;

color: #0984e3;

margin-bottom: 20px;

text-transform: uppercase;

p{

font-size: 18px;

line-height: 1.8;

margin-bottom: 20px;

.highlight {

background-color: #ffeaa7;

border-left: 6px solid #fdcb6e;

padding: 15px;

margin-bottom: 20px;

font-style: italic;

}
.custom-box {

padding: 20px;

border: 2px solid #74b9ff;

background-color: #dfe6e9;

border-radius: 10px;

transition: background-color 0.3s ease;

.custom-box:hover {

background-color: #b2bec3;

.btn {

display: inline-block;

padding: 12px 25px;

background-color: #00b894;

color: white;

border: none;

border-radius: 8px;

text-decoration: none;

font-weight: bold;

transition: background-color 0.3s;

.btn:hover {

background-color: #00cec9;

}
/* Responsive Design */

@media screen and (max-width: 600px) {

.container {

padding: 20px;

margin: 20px;

h1 {

font-size: 28px;

</style>

</head>

<body>

<div class="container">

<h1>CSS Styling</h1>

<div class="info">

<h2>Name: Rinku Saini </h2>

<p>Roll No: 241306025</p>

</div>

<p>

This is a demonstration of advanced CSS styling, including fonts, colors, box shadows, and
responsive layout. The design is both clean and mobile-friendly.

</p>

<p class="highlight">

This paragraph is highlighted using background color and a left border. It uses italic
styling to emphasize the content.
</p>

<div class="custom-box">

This box uses border radius, transitions, and hover effects for interactivity.

</div>

<br>

<a href="#" class="btn">Explore More</a>

</div>

</body>

</html>
Output
EXPERIMENT – 14

AIM – CSS Id and Class

<!DOCTYPE html>

<html lang="en">

<head>

<title>Inline CSS - ID and Class Examples</title>

</head>

<body>

<div class="info">

<h2>Name: Rinku Saini </h2>

<p>Roll No: 241306025</p>

</div>

<!-- ID Examples -->

<h1 id="title1" style="color: blue; font-size: 28px; text-align: center;">This is Heading 1 (ID
Example)</h1>

<p id="para1" style="color: green; font-style: italic;">This is a paragraph with ID styling.</p>

<div id="box1" style="width: 200px; height: 100px; background-color: lightgray; border: 2px
solid black; margin-bottom: 10px;">

Box with ID

</div>

<!-- Class Examples -->

<h2 class="subtitle" style="color: orange; font-size: 24px;">This is a subtitle (Class


Example)</h2>

<p class="info" style="color: purple; font-weight: bold;">Paragraph with class styling.</p>

<div class="card" style="width: 150px; height: 80px; background-color: lightblue; border-


radius: 10px; padding: 10px;">
Card with class

</div>

Output
EXPERIMENT – 15
AIM: Advance CSS:
1. Grouping 2. Dimension
3. Display 4. Positioning
5. Floating 6. Align
7. Pseuodo 8. class Image sprites
9.Attribute sector 10. Navigation bar

1. 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: Sunidhi <br>Roll No.:241306046</b></p>
<hr>
<p class="font-style">This text uses custom font styling.</p>

</body>
</html>
Output:

2. 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: Sunidhi<br>Roll No.:241306046</b></p>
<hr>
<div class="box">Fixed size box</div>

</body>
</html>

Output:
3. 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: Sunidhi <br>Roll No.:241306046</b></p> <hr>
<div class="inline-box">Box 1</div>
<div class="inline-box">Box 2</div>

</body>
</html>
Output:

4. 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: Sunidhi <br>Roll No.:241306046</b></p>
<hr>
<div class="relative-box">Relative Positioned Box</div>

</body>
</html>
Output:

5. 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: Sunidhi <br>Roll No.:241306046</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:

6. 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: Sunidhi <br>Roll No.:241306046</b></p>
<hr>
<p class="center-text">This text is centered.</p>

</body>
</html>

Output:

7. 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: Sunidhi<br>Roll No.:241306046</b></p>
<hr>
<a href="#">Hover over this link</a>
</body>
</html>

Output:
9. 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: Sunidhi <br>Roll No.:241306046</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: Sunidhi <br>Roll No.:241306046</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:
Expriment 16
Creating Page Layout and site designs
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

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

<title>Colorful Cards Layout</title>

<style>

*{

box-sizing: border-box;

margin: 0;

padding: 0;

body {

font-family: 'Segoe UI', sans-serif;

background: #007BFF;

color: #333;

line-height: 1.6;

header {

background: #333;

color: #fff;

padding: 1rem 2rem;

display: flex;
justify-content: space-between;

align-items: center;

.nav-links {

list-style: none;

display: flex;

gap: 1rem;

.nav-links li a {

color: white;

text-decoration: none;

padding: 0.5rem;

transition: background 0.3s;

.nav-links li a:hover {

background: #555;

border-radius: 5px;

.container {

display: flex;

margin: 2rem;

gap: 2rem;

aside {

width: 20%;

background: #fff;

padding: 1rem;

border-radius: 8px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);

main {

flex: 1;

background: #fff;

padding: 1rem;

border-radius: 8px;

box-shadow: 0 0 5px rgba(0,0,0,0.1);

.card-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 1rem;

margin-top: 1rem;

.card {

padding: 1rem;

border-radius: 6px;

color: white;

transition: transform 0.2s;

.card:hover {

transform: translateY(-5px);

.card-1 {

background: #FF6F61;

.card-2 {
background: #6B5B95;

.card-3 {

background: #88B04B;

footer {

text-align: center;

background: #333;

color: white;

padding: 1rem;

margin-top: 2rem;

@media (max-width: 768px) {

.container {

flex-direction: column;

aside {

width: 100%;

</style>

</head>

<body>

<header>

<h1>My Website</h1>

<nav>

<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="#">Contact</a></li>

</ul>

</nav>

</header>

<div class="container">

<aside>

<h2>Sidebar</h2>

<ul>

<li><a href="#">Link A</a></li>

<li><a href="#">Link B</a></li>

<li><a href="#">Link C</a></li>

</ul>

</aside>

<main>

<h2>Main Content</h2>

<div class="card-grid">

<div class="card card-1">

<h3>Card 1</h3>

<p>Suni</p> <!-- Updated name -->

</div>

<div class="card card-2">

<h3>Card 2</h3>

<p>241306025</p> <!-- Updated roll number -->

</div>

<div class="card card-3">

<h3>Card 3</h3>
<p>Web Programming</p>

</div>

</div>

</main>

</div>

<footer>

<p>&copy; 2025 My Website. All rights reserved.</p>

</footer>

</body>

</html>

Output
EXPERIMENT – 17
AIM: Writing program in XML and create a style sheet in CSS & display the
document in internet explorer.

CODE:

XML FILE

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style2.css"?>
<library>
<student>
<name>RINKU SAINI</name>
<regno>241306025</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 FILE 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:

You might also like