Noida Institute of Engineering & Technology,
Greater Noida
Web Designing Lab File
Branch: Data Science Semester: Ist
Session: 2025-26
Subject Name: Web Designing Subject Code: CCSE0152
Student Name: Akshat Tripathi Faculty Name:Akansha Bansal
Roll no: 0251CS025
Department of Computer Science & Engineering (Artificial
Intelligence)
NOIDA INSTITUTE OF ENGINEERING & TECHNOLOGY
19, KNOWLEDGE PARK-II, INSTITUTIONAL AREA,
GREATER NOIDA, (U. P.) - 201 306, INDIA
PROGRAM LIST
[Link]. Program Name Submission
Grade Signature
Date
1 Create [Link] with your name
as <h1> heading, a short paragraph
introducing yourself , and <hr> tag
for separation.
2 Create an HTML file ([Link])
ensuring all essential tags are present
(<!DOCTYPE
html>,<html>,<head>,<title>,<body>)
.
3 Create [Link]. Use <h1> for the city
name ,<h2> for its famous
landmarks ,and paragraphs <p> to
describe them , using <br> For line
breaks where appropriate.
4 Create a HTML page to insert
horizontal rules.
5 Create a new HTML file and add
comments (``) explaining the
purpose of each main tag (head,
body, title).
6 Create a mobile-responsive layout
using basic HTML.
7 In your [Link] file, explicitly set
the language of the document using
the lang attribute in the <html> tag
(e.g., <html lang="en">).
8 Create [Link] with an
<h1> "Website Under Construction"
and a simple paragraph with a
"Coming Soon!"message.
9 Create [Link] with a clear
<h1> "Welcome to Our Site" and a
paragraph about the site's purpose.
10 Create a page explaining W3C and its
purpose
11 Create an ordered and unordered list.
12 Create a list inside another list.
13 Create a definition list for at least five
web development terms (e.g., HTML,
CSS, JavaScript, Server, Browser).
14 Create a table with 3 rows and 3
columns.
15 Create a table name Student Gared
with <thead> for headers (Name,
Subject, Grade) and <tbody> for at
least three student records.
16 Design a table for a simple product
catalog with columns like Product
Name, Price, and Stock, using <th>
and <td> tags.
17 Create a table with rowspan and
colspan property.
18 Create a web page that provide a
basic frame layout.
19 Design a webpage that add an
image.
20 Create an image with clickable
hyperlink.
21 Create an HTML page with three
distinct sections (<section
id="section1">, <section
id="section2">, etc.)
22 Design a complete registration form
including fields for: Username (text),
Password (password), Email (email),
Age (number), and a Submit button.
Include appropriate label tags.
23 Create a feedback form asking: "How
would you rate our service?" (radio
buttons: Excellent, Good, Fair, Poor)
and "What services are you interested
in?" (checkboxes: Web Design, SEO,
Hosting).
24 Create a form with text input, radio
button, checkbox, and submit button.
25 Design a webpage using CSS that
change background color of the body.
26 Design a webpage that should be add
margin and padding to elements in
CSS.
27 Create one HTML page that uses inline
CSS on an <h1>, internal CSS on a
<p>, and links to an external [Link]
for the <body> background color.
28 :Create a style lists using CSS.
29 Create two CSS classes:.highlight
(yellow background) and .important
(red text). Apply these classes to
different paragraphs and observe their
effects.
30 Create three <div> elements. Give
each a different border-width, border-
style, and border-color. Apply padding
and margin values to visually
differentiate them.
31 Create a div and a p element. Use CSS
to set their width and height, and
observe how they behave as block
elements.
Program Number: 1
Program Name: Create [Link] with your name as <h1> heading, a short paragraph introducing
yourself , and <hr> tag for separation.
Code:
<!DOCTYPE html>
<html>
<head>
<title>My Page </title>
</head>
<body>
<h1> Purva Arora </h1>
<p> Hello I am Purva, pursuing [Link] in CS data Science. <br>I love coding, data analytics, and reading
books.</P>
<hr>
</body>
</html>
Output:
Program Number: 2
Program Name: Create an HTML file ([Link]) ensuring all essential tags are present (<!DOCTYPE
html>,<html>,<head>,<title>,<body>).
Code:
<!DOCTYPE html>
<html>
<head>
<title>Practice File </title>
</head>
<body>
<h1>Practice File</h1>
<p>This is a simple practice file with all essential tags</p>
</body>
</html>
Output:
Program Number: 3
Program Name: Create [Link]. Use <h1> for the city name ,<h2> for its famous landmarks ,and
paragraphs <p> to describe them , using <br> For line breaks where appropriate.
Code:
<!Doctype>
<html>
<title>Aligarh</title>
</head>
<body>
<h1> Aligarh </h1>
<h2> Famous landmarks - Aligarh Fort, Aligarh Muslim University (AMU), the Maulana Azad Library, and the
Jama Masjid</h2>
<p>Aligarh Muslim University (AMU): A major center of learning with historical buildings like the Centenary
Gate <br> The Maulana Azad Library :It is the largest university library in Asia, known for its extensive
collection of manuscripts, rare books, and artifacts. </p>
</body>
</html>
Output:
Program Number: 4
Program Name: : Create a HTML page to insert horizontal rules.
Code:
<!Doctype html>
<html>
<head>
<title>Horizontal Rule Example</title>
</head>
<body>
<h1>Welcome</h1>
<hr>
<p>This is after horizontal rule.</p>
</body>
</html>
Output:
Program Number: 5
Program Name: : Create a new HTML file and add comments (``) explaining the purpose of each main
tag (head, body, title).
Code:
<!DOCTYPE html>
<html>
<head>
<!-- The heading shown on the web page -->
<title>Information about main tags</title>
<!-- Title shown in the browser tab -->
</head>
<body>
<!-- Contains the content that is shown on the webpage -->
<h1>Hello World</h1>
<!-- Main heading -->
<p>This is a simple HTML page.</p>
<!-- Paragraph text -->
</body>
</html>
Output:
Program Number: 6
Program Name: Create a mobile-responsive layout using basic HTML.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>New Tab</title>
<style>
@media(max-width: 600px){
h1{
color: pink;
}
}
</style>
</head>
<body>
<h1>mobile responsive web page!</h1>
</body>
</html>
Output:
Program Number: 7
Program Name: In your [Link] file, explicitly set the language of the document using the lang attribute in
the <html> tag (e.g., <html lang="en">).
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple HTML page.</p>
</body>
</html>
Output:
Program Number: 8
Program Name: Create [Link] with an <h1> "Website Under Construction" and a simple
paragraph with a "Coming Soon!"message.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Coming Soon</title>
</head>
<body>
<h1>Website Under Construction</h1>
<p>Coming Soon!</p>
</body>
</html>
Output:
Program Number: 9
Program Name: Create [Link] with a clear <h1> "Welcome to Our Site" and a paragraph about the
site's purpose.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Homepage</title>
</head>
<body>
<h1>Welcome to Our Site</h1>
<p>This website is created to provide information, tutorials, and resources for beginners learning web design
and development.</p>
</body>
</html>
Output:
Program Number: 10
Program Name: Create a page explaining W3C and its purpose.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>About W3C</title>
</head>
<body>
<h1>What is W3C?</h1>
<p>W3C stands for the World Wide Web Consortium. It's basically a group of smart people from all over the
world who work together to make the web better.
They create rules and standards so that websites work properly on all browsers and devices.</p>
<h2>Why is it Important?</h2>
<p>Without W3C, every website could be different and confusing.
Their rules make sure that the web is accessible to everyone and that things like HTML, CSS, and JavaScript
work the same way everywhere.
So, thanks to W3C, surfing the internet is easier and smoother!</p>
</body>
</html>
Output:
Program Number: 11
Program Name: Create an ordered and unordered list.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ordered List</title>
</head>
<body>
<h1><center>Types of Programing Language</center></h1>
<hr>
<h3>Ordered List</h3>
<ol type="1">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
</ol>
<h3> Unordered List</h3>
<ul>
<li>Maths</li>
<li>IOT</li>
<li>Web Designing</li>
<li>ABC Lab</li>
<li> C Programing</li>
</ul>
</body>
</html>
Output:
Program Number: 12
Program Name: Create a list inside another list.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>List</title>
</head>
<body>
<h1><center>List inside List</center></h1>
<hr>
<h3>Ordered List</h3>
<ol type="1">
<li>Java</li>
<ol type="a">
<li>Conditional Statements</li>
<li>Functions</li>
</ol>
<li>Python</li>
<ol type="a">
<li>Variables</li>
<li>Operators</li>
</ol>
</ol>
<h3> Unordered List</h3>
<ul>
<li>Maths</li>
<ul>
<li>Sets</li>
<li>Diffrential Calculus</li>
</ul>
<li>IOT</li>
<ul>
<li>Univversal Gates</li>
<li>Basic Gates</li>
</ul>
</ul>
</body>
</html>
Output:
Program Number: 13
Program Name: Create a definition list for at least five web development terms (e.g., HTML, CSS,
JavaScript, Server, Browser).
Code:
<!DOCTYPE html>
<html>
<head>
<title>Web Development Terms and Definitions</title> <!-- Title shown on browser tab -->
</head>
<body>
<h1>Five Web Development Terms and Their Definitions</h1> <!-- Main heading -->
<dl> <!-- Definition List starts -->
<dt><strong>1. HTML (HyperText Markup Language)</strong></dt>
<dd>It is the standard language used to create and structure content on web pages.</dd>
<dt><strong>2. CSS (Cascading Style Sheets)</strong></dt>
<dd>It is used to style and layout web pages, including colors, fonts, and spacing.</dd>
<dt><strong>3. JavaScript</strong></dt>
<dd>It is a scripting language that makes web pages interactive and dynamic.</dd>
<dt><strong>4. Front-End Development</strong></dt>
<dd>It involves building the part of a website that users interact with directly using HTML, CSS, and
JavaScript.</dd>
<dt><strong>5. Back-End Development</strong></dt>
<dd>It refers to server-side development that handles databases, logic, and server configuration.</dd>
</dl> <!-- Definition List ends -->
</body>
</html>
Output:
Program Number: 14
Program Name: Create a table with 3 rows and 3 columns.
Code:
<!DOCTYPE html>
<html>
<head>
<title>3x3 Table</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Class</th>
<th>Marks</th>
</tr>
<tr>
<td>Riya</td>
<td>10</td>
<td>89</td>
</tr>
<tr>
<td>Aman</td>
<td>12</td>
<td>92</td>
</tr>
</table>
</body>
</html>
Output:
Program Number: 15
Program Name: Create a table name Student Gared with <thead> for headers (Name, Subject, Grade) and
<tbody> for at least three student records
Code:
<!DOCTYPE html>
<html>
<head>
<title>Student Grade Table</title>
</head>
<body>
<h2>Student Grade Table</h2>
<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aarav</td>
<td>Math</td>
<td>A</td>
</tr>
<tr>
<td>Priya</td>
<td>Science</td>
<td>B+</td>
</tr>
<tr>
<td>Rohan</td>
<td>English</td>
<td>A+</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Program Number: 16
Program Name: : Design a table for a simple product catalog with columns like Product Name, Price, and
Stock, using <th> and <td> tags.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Product Catalog</title>
</head>
<body>
<table border="1">
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Stock</th>
</tr>
<tr>
<td>Notebook</td>
<td>₹50</td>
<td>Available</td>
</tr>
<tr>
<td>Pen</td>
<td>₹10</td>
<td>Out of Stock</td>
</tr>
</table>
</body>
</html>
Output:
Program Number: 17
Program Name: Create a table with rowspan and colspan property.
Code:
<html>
<head>
<title>Rowspan and Colspan</title>
</head>
<body>
<h2>Rowspan & Colspan Example</h2>
<table border="1">
<tr><th rowspan="2">Name</th><th colspan="2">Scores</th></tr>
<tr><th>Math</th><th>Science</th></tr>
<tr><td>Amit</td><td>5</td><td>90</td></tr>
<tr><td>Sita</td><td>75</td><td>88</td></tr>
</table>
</body>
</html>
Output:
Program Number: 18
Program Name: Create a web page that provide a basic frame layout.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Frames Examples</title>
</head>
<frameset cols="30%,70%">
<frame src="C:\Users\Student\Pictures\[Link]">
<frame src="C:\Users\Student\Pictures\[Link]">
</frameset>
</html>
Output:
Program Number: 19
Program Name: Design a webpage that add an image.
Code:
<!DOCTYPE html>
<html>
<head>
<title>image Example</title>
</head>
<body>
<h2>My Image</h2>
<img src="C:\Users\Student\Pictures\[Link]" alt="Sample image" width="300">
</body>
</html>
Output:
Program Number: 20
Program Name: Create an image with clickable hyperlink.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Clickable Image Link</title>
</head>
<body>
<!-- Image with hyperlink -->
<a href="[Link] target="_blank">
<img src="C:\Users\purva\OneDrive\Documents\[Link]" alt="Clickable Image" width="300"> </a>
</body>
</html>
Output:
Program Number: 21
Program Name: Create an HTML page with three distinct sections (<section id="section1">, <section id="section2">,
etc.
Code:
<!DOCTYPE html>
<html>
<head>
<title>sections example</title>
</head>
<body>
<section id="section1">
<h2>Section 1</h2>
<p>This is the first section.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>This is the second section.</p>
</section>
<section id="section3">
<h2>Section 3</h2>
<p> This is the third section</p>
</section>
</body>
</html>
Output:
Program Number: 22
Program Name: Design a complete registration form including fields for: Username (text), Password (password),
Email (email), Age (number), and a Submit button. Include appropriate label tags.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h2>Registration Form</h2>
<form>
<label for=username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age"><br><br>
<input type="submit"value="Submit">
</form>
</body>
</html>
Output:
Program Number: 23
Program Name: Create a feedback form asking: "How would you rate our service?" (radio buttons: Excellent, Good,
Fair, Poor) and "What services are you interested in?" (checkboxes: Web Design, SEO, Hosting).
Code:
<!DOCTYPE html>
<html>
<head>
<title>Feedback Form</title>
</head>
<body>
<h2>Customer Feedback</h2>
<form action="/submit-feedback" method="post">
<h3>How would you rate our service?</h3>
<input type="radio" id="excellent" name="rating" value="Excellent">
<label for="excellent">Excellent</label><br>
<input type="radio" id="good" name="rating" value="Good">
<label for="good">Good</label><br>
<input type="radio" id="fair" name="rating" value="Fair">
<label for="fair">Fair</label><br>
<input type="radio" id="poor" name="rating" value="Poor">
<label for="poor">Poor</label><br> <hr>
<h3>What services are you interested in?</h3>
<input type="checkbox" id="webdesign" name="services" value="Web Design">
<label for="webdesign">Web Design</label><br>
<input type="checkbox" id="seo" name="services" value="SEO">
<label for="seo">SEO</label><br>
<input type="checkbox" id="hosting" name="services" value="Hosting">
<label for="hosting">Hosting</label><br><br>
<input type="submit" value="Submit Feedback">
</form>
</body>
</html>
Output:
Program Number: 24
Program Name: Create a form with text input, radio button, checkbox, and submit button.
Code:
<!DOCTYPE html>
<html>
<head>
<title> Form Example</title>
</head>
<body>
<h2>Sample Form</h2>
<form>
<label>Name</label>
<input type="text"><br><br>
<label>Gender</label>
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female<br><br>
<label>Hobbies</label>
<input type="checkbox">Reading
<input type="checkbox">Sports
<input type="checkbox">Music<br><br>
<input type="submit"value="submit">
</form>
</body>
</html>
Output:
Program Number: 25
Program Name: Design a webpage using CSS that change background color of the body.
Code:
<!DOCTYPE html>
<html>
<head>
<title>backgroung color</title>
<style>
body{background-color:lightblue;}
</style>
</head>
<body>
<h2>Background Color Example</h2>
</body>
</html>
Output:
Program Number: 26
Program Name: Design a webpage that should be add margin and padding to elements in CSS.
Code:
<style>
.box{background-color:yellow;margin:100px;padding:50px;}
</style>
</head>
<body>
<div class="box">This box has margin and padding</div>
</body>
</html>
Output:
Program Number: 27
Program Name: Create one HTML page that uses inline CSS on an <h1>, internal CSS on a <p>, and links to an
external [Link] for the <body> background color.
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Types</title>
<style>
p{color:violet;}/*Internal CSS*/
</style>
<link rel="stylesheet" href="[Link]"><!--External CSS-->
</head>
<body>
<h1 style="color:red;">inline CSS Examlple</h1>
<p> This uses internal CSS.</p>
</body>
</html>
/*[Link]*/
body{background-color:lightpink;}
Output:
Program Number: 28
Program Name: Create a style lists using CSS.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Styled Lists</title>
<style>
ul {list-style-type:square; }
ol {list-style-type:upper-roman;}
</style>
</head>
<body>
<ul><li>Item A</li><li>Item B</li></ul>
<ol><li>First</li><li>Second</li></ol>
</body>
</html>
Output:
Program Number: 29
Program Name: Create two CSS classes:.highlight (yellow background) and .important (red text). Apply these classes
to different paragraphs and observe their effects.
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS classes</title>
<style>
.highlight{background:yellow;}
.important{color:red;}
</style>
</head>
<body>
<p class="highlight"> this text is highlighted.</p>
<p class="important"> this text is important.</p>
</body>
</html>
Output:
Program Number: 30
Program Name: Create three <div> elements. Give each a different border-width, border-style, and border-color.
Apply padding and margin values to visually differentiate them.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Divs</title>
<style>
.div1 {border-width: 2px;border-style: solid;border-color: blue;padding: 15px;margin: 10px;}
.div2 {border-width: 5px;border-style: dashed;border-color: green;padding: 20px;margin: 20px;}
.div3 {border-width: 3px;border-style: dotted;border-color: red;padding: 10px;margin: 30px;}
</style>
</head>
<body>
<div class="div1">
This is the first div with a solid blue border, 2px width, 15px padding, and 10px margin.
</div>
<div class="div2">
This is the second div with a dashed green border, 5px width, 20px padding, and 20px margin.
</div>
<div class="div3">
This is the third div with a dotted red border, 3px width, 10px padding, and 30px margin.
</div>
</body>
</html>
Output:
Program Number: 31
Program Name: Create a div and a p element. Use CSS to set their width and height, and observe how they behave as
block elements.
Code:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block Element Behavior</title>
<style>
.block-div {width: 200px;height: 100px;background-color: lightblue;border: 2px solid blue;margin-
bottom: 10px;}
.block-p {width: 150px;height: 80px;background-color: lightgreen;border: 2px solid green;}
</style>
</head>
<body>
<div class="block-div">This is a div element.</div>
<p class="block-p">This is a paragraph element.</p>
</body>
</html>
Output: