GURUGRAM UNIVERSITY
(A State Government University established under Haryana Act 17 of 2017)
Engineering Graphics(Web Designing)
Submitted To: Submitted By:
Mrs. Geetanjali ADITYA SINGH
(Assistant Professor) 241000050005
CSE(Artificial intelligence)
2nd Semester(2024-25)
[Link] AIM DATE SIGN
1 Prepare a survey document of ten
website which you like and dislike
with various reasons.
2 Introduction to basic HTML
elements
3 Use table tag to format web page.
Also create the Time Table of your
class using table tag.
4 Create your profile page i.e.
educational details, Hobbies,
Achievement, My Ideals etc.
5 Create Style sheet to set formatting
for text tags and embed that style
sheet on web pages created for your
site.
6 Design a web page and embed
various multimedia features in the
page.
7 Design signup form to validate
username, password, and phone
numbers etc using Java script.
8 Write a JavaScript program to
determine whether a given year is a
leap year in the Gregorian calendar.
EXPERIMENT-1
AIM-Prepare a survey document of ten websites which you like and dislike with various reasons.
Theory-
Website Rating Survey
Objective: To assess ten websites based on their usability, design, content quality, speed, security, and
overall user satisfaction.
Website User Rating (out of
Description Reason for Like/Dislike
Name 10)
Google Search engine 9.5 Fast, accurate results, clean design
Amazon E-commerce 8.0 Wide product range, but can be cluttered
Wikipedia Online encyclopedia 9.0 Informative, but occasionally inaccurate
Facebook Social media 7.5 Good for connecting, privacy concerns exist
Quick updates, but misinformation is an
Twitter (X) Social media 7.0
issue
Professional Great for careers, but paid features can be
LinkedIn 8.5
networking limiting
YouTube Video sharing 9.0 Vast content, but ads can be intrusive
Reddit Community forum 8.0 Good discussions, but moderation varies
Netflix Streaming service 8.5 Strong library, but subscription costs rising
CNN News website 7.5 Good coverage, but bias concerns exist
EXPERIMENT-2
AIM-Introduction to basic HTML elements
Theory-HTML (Hypertext Markup Language) is the standard language for creating web pages. It provides
a structure for content using various elements, which are represented as tags. Here's an introduction to
some of the basic HTML elements:
Common HTML Elements
<html>: Defines the entire HTML document.
<head>: Contains metadata, links to stylesheets, and the title of the webpage.
<title>: Specifies the title shown on the browser tab.
<body>: Contains the visible content of the webpage.
<h1> to <h6>: Heading tags, where <h1> is the largest and <h6> the smallest.
<p>: Defines a paragraph.
<a href="URL">: Creates hyperlinks.
<img src="[Link]" alt="Description">: Embeds an image.
<ul> and <ol>: Creates unordered and ordered lists.
Program-
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph of text.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>
</body>
</html>
Output-
Welcome to My Page
This is a paragraph of text.
Item 1
Item 2
Name Age
Alice 25
 
EXPERIMENT-3
AIM-Use table tag to format web page. Also create the Time Table of your class using table tag.
Theory-The <table> tag in HTML is used to create a structured format for displaying data in rows and
columns. It organizes information into a grid layout, making it easy to read and analyze on a webpage.
Program-
<!DOCTYPE html>
<html>
<head>
<title>Class Timetable</title>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1 style="text-align: center;">My Class Timetable</h1>
<table>
<tr>
<th>Day</th>
<th>Time</th>
<th>Subject</th>
<th>Teacher</th>
<th>Room</th>
</tr>
<tr>
<td>Monday</td>
<td>9:00 AM - 10:00 AM</td>
<td>Mathematics</td>
<td>Mr. Sharma</td>
<td>101</td>
</tr>
<tr>
<td>Tuesday</td>
<td>10:00 AM - 11:00 AM</td>
<td>Science</td>
<td>Ms. Gupta</td>
<td>102</td>
</tr>
<tr>
<td>Wednesday</td>
<td>11:00 AM - 12:00 PM</td>
<td>English</td>
<td>Mr. Singh</td>
<td>103</td>
</tr>
<tr>
<td>Thursday</td>
<td>12:00 PM - 1:00 PM</td>
<td>History</td>
<td>Ms. Roy</td>
<td>104</td>
</tr>
<tr>
<td>Friday</td>
<td>1:00 PM - 2:00 PM</td>
<td>Computer Science</td>
<td>Mr. Khan</td>
<td>105</td>
</tr>
</table>
</body>
</html>
Output-
My Class Timetable
Day Time Subject Teacher Room
9:00 AM
Mr.
Monday - 10:00 Mathematics 101
Sharma
AM
10:00
AM - Ms.
Tuesday Science 102
11:00 Gupta
AM
11:00
AM - Mr.
Wednesday English 103
12:00 Singh
PM
12:00
Thursday PM - History Ms. Roy 104
1:00 PM
1:00 PM
Computer Mr.
Friday - 2:00 105
Science Khan
PM
EXPERIMENT-4
AIM- Create your profile page i.e. educational details, Hobbies, Achievement, My Ideals etc.
Theory- The provided HTML code creates a personal profile webpage using simple structure and styling.
It organizes content into sections such as Educational Details, Hobbies, Achievements, and Ideals. Styling
is added with CSS for better visual appeal, such as borders, shadows, and spacing, ensuring a user-
friendly and clean design. Key HTML elements like <div>, <h1>, <ul>, and <p> are used to present
content logically and accessibly. This combination of HTML and CSS ensures readability and a
professional look.
Program-
<!DOCTYPE html>
<html>
<head>
<title>My Profile</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f9f9f9;
h1, h2 {
text-align: center;
color: #333;
.section {
margin: 20px auto;
padding: 20px;
width: 80%;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
.section h2 {
color: #555;
.section ul {
padding-left: 20px;
</style>
</head>
<body>
<h1>Welcome to My Profile</h1>
<div class="section">
<h2>Educational Details</h2>
<ul>
<li>High School: XYZ High School, Graduated in 2015</li>
<li>Bachelor's Degree: Computer Science, ABC University, 2019</li>
<li>Master's Degree: Artificial Intelligence, DEF University, 2022</li>
</ul>
</div>
<div class="section">
<h2>Hobbies</h2>
<ul>
<li>Reading books on technology and fiction</li>
<li>Playing the guitar</li>
<li>Traveling to explore new cultures</li>
<li>Photography</li>
</ul>
</div>
<div class="section">
<h2>Achievements</h2>
<ul>
<li>Won the National Coding Championship in 2019</li>
<li>Published a research paper on Machine Learning in 2021</li>
<li>Volunteered for a community development project in 2020</li>
</ul>
</div>
<div class="section">
<h2>My Ideals</h2>
<p>
I strive to live by principles of integrity, hard work, and compassion.
I admire innovators like Alan Turing and Marie Curie for their perseverance
and contributions to humanity. My goal is to use my skills and knowledge to
make a positive impact on the world.
</p>
</div>
</body>
</html>
Output-
Welcome to My Profile
Educational Details
High School: XYZ High School, Graduated in 2015
Bachelor's Degree: Computer Science, ABC University, 2019
Master's Degree: Artificial Intelligence, DEF University, 2022
Hobbies
Reading books on technology and fiction
Playing the guitar
Traveling to explore new cultures
Photography
Achievements
Won the National Coding Championship in 2019
Published a research paper on Machine Learning in 2021
Volunteered for a community development project in 2020
My Ideals
I strive to live by principles of integrity, hard work, and compassion. I admire
innovators like Alan Turing and Marie Curie for their perseverance and
contributions to humanity. My goal is to use my skills and knowledge to make
a positive impact on the world.
EXPERIMENT-5
AIM- Create Style sheet to set formatting for text tags and embed that style sheet on web pages created
for your site.
Theory- HTML structures and defines the elements of the webpage, while CSS applies design and style,
such as colors, fonts, spacing, and layout. By linking an external CSS file using the <link> tag, you create
reusable styles that can be applied across multiple HTML pages, ensuring consistency, easier
maintenance, and better readability of the code. This approach follows a modular design principle,
promoting clean and efficient web development.
Program-
CSS:
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f9f9f9;
color: #333;
h1, h2, h3 {
color: #0056b3;
margin-bottom: 10px;
p{
font-size: 16px;
margin-bottom: 20px;
}
ul, ol {
margin: 10px 0;
padding-left: 20px;
a{
color: #ff6600;
text-decoration: none;
a:hover {
text-decoration: underline;
.highlight {
font-weight: bold;
color: #d9534f;
Embed CSS in website:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph with <span class="highlight">highlighted</span> text.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<a href="[Link] Example</a>
</body>
</html>
Output-
Welcome to My Website
This is a paragraph with highlighted text.
Item 1
Item 2
Item 3
Visit Example
EXPERIMENT-6
AIM- Design a web page and embed various multimedia features in the page.
Theory-
Embedded Multimedia Features
1. Images:
o Use the <img> tag to display images.
o Add the alt attribute for accessibility (describes the image when it cannot be displayed).
2. Audio:
o Use the <audio> tag with the controls attribute to create a media player.
o Supports formats like MP3 and WAV.
3. Video:
oUse the <video> tag with the controls attribute for a video player.
oSupports formats like MP4 and WebM.
4. Interactive Content:
o Use the <iframe> tag to embed interactive elements such as maps or external websites.
Benefits
A visually appealing and interactive webpage.
Users can engage with multimedia content such as images, audio, video, and maps.
Ensures cross-browser compatibility with fallback messages for unsupported elements.
Program-
<!DOCTYPE html>
<html>
<head>
<title>Multimedia Web Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f9f9f9;
color: #333;
h1, h2 {
text-align: center;
color: #0056b3;
.section {
margin: 20px auto;
padding: 20px;
width: 80%;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
video, audio {
display: block;
margin: 10px auto;
width: 100%;
iframe {
display: block;
margin: 10px auto;
width: 80%;
height: 300px;
</style>
</head>
<body>
<h1>Welcome to My Multimedia Page</h1>
<div class="section">
<h2>Image Gallery</h2>
<img src="[Link]" alt="Nature Image" width="600">
<img src="[Link]" alt="Cityscape Image" width="600">
</div>
<div class="section">
<h2>Audio Section</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div class="section">
<h2>Video Section</h2>
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</div>
<div class="section">
<h2>Interactive Content</h2>
<iframe src="[Link] title="Google Maps"></iframe>
</div>
</body>
</html>
Output-
EXPERIMENT-7
AIM- Design signup form to validate username, password, and phone numbers etc using Java script.
Theory-
Explanation of the Code
1. HTML Form:
o Includes input fields for username, password, and phone number.
o Each field has an associated <span> with a class error to display validation messages.
2. CSS for Styling:
o Styles the form with a clean and modern look using background color, padding, and
borders.
o Errors are displayed in red for clarity.
3. JavaScript Validation:
o The validateForm() function is triggered when the signup button is clicked.
o Checks the following:
Username: Must be at least 5 characters.
Password: Must be at least 8 characters and include at least one number.
Phone Number: Must contain exactly 10 digits.
o Displays appropriate error messages if validation fails.
o If all validations pass, a success alert is shown.
Program-
<!DOCTYPE html>
<html>
<head>
<title>Signup Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 20px;
} .form-container {
width: 50%;
margin: auto;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
label {
display: block;
margin: 10px 0 5px;
font-weight: bold;
input {
width: 100%;
padding: 10px;
margin: 5px 0 20px;
border: 1px solid #ccc;
border-radius: 5px;
button {
padding: 10px 20px;
background: #0056b3;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
button:hover {
background: #003d80;
.error {
color: red;
font-size: 14px;
</style>
</head>
<body>
<div class="form-container">
<h1>Signup Form</h1>
<form id="signupForm">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Enter your username">
<span class="error" id="usernameError"></span>
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password">
<span class="error" id="passwordError"></span>
<label for="phone">Phone Number</label>
<input type="text" id="phone" name="phone" placeholder="Enter your phone number">
<span class="error" id="phoneError"></span>
<button type="button" onclick="validateForm()">Sign Up</button>
</form>
</div>
<script>
function validateForm() {
let isValid = true;
// Clear previous errors
[Link]("usernameError").innerText = "";
[Link]("passwordError").innerText = "";
[Link]("phoneError").innerText = "";
// Validate username
const username = [Link]("username").value;
if ([Link] < 5) {
[Link]("usernameError").innerText = "Username must be at least 5
characters long.";
isValid = false;
// Validate password
const password = [Link]("password").value;
if ([Link] < 8 || !/[0-9]/.test(password)) {
[Link]("passwordError").innerText = "Password must be at least 8
characters long and include a number.";
isValid = false;
}
// Validate phone number
const phone = [Link]("phone").value;
if (!/^\d{10}$/.test(phone)) {
[Link]("phoneError").innerText = "Phone number must be exactly 10
digits.";
isValid = false;
if (isValid) {
alert("Signup successful!");
</script>
</body>
</html>
Output-
EXPERIMENT-8
AIM- Write a JavaScript program to determine whether a given year is a leap year in the Gregorian
calendar.
THEORY-
How it Works:
1. Logic for Leap Year:
o A year is considered a leap year if:
It is divisible by 4 and not divisible by 100.
OR it is divisible by 400.
o This accounts for the special cases in the Gregorian calendar.
2. Function Implementation:
o The function isLeapYear(year) checks the year against these conditions.
o It returns true for leap years and false otherwise.
3. Example Usage:
o You can replace 2024 in the year variable with any year you want to check.
o The program outputs whether the year is a leap year or not.
Program-
Javascript:
function isLeapYear(year) {
// A leap year is divisible by 4
// But not divisible by 100, unless it is also divisible by 400
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
return true;
} else {
return false;
// Example usage:
const year = 2024; // Replace with the year you want to check
if (isLeapYear(year)) {
[Link](year + " is a leap year.");
} else {
[Link](year + " is not a leap year.");
Output-
