1.
Explain basic structure of HTML 5 document
An HTML5 document follows a standard structure that tells the browser how to interpret the
webpage. It begins with the <!DOCTYPE html> declaration, followed by the <html> tag that
contains two main sections: the <head> and the <body>. The <head> section includes
metadata like title, styles, and scripts, while the <body> section contains all the visible
content of the webpage such as text, images, links, and forms.
2. Differentiate between HTML and HTML 5.
HTML HTML5
Older version of the HyperText Markup
Latest version of HTML with modern features.
Language.
Does not support audio and video
Provides built-in <audio> and <video> tags.
without external plugins like Flash.
Limited support for graphics; requires Supports <canvas> and SVG for drawing graphics
external plugins. and animations.
Does not support local storage or offline Supports localStorage, sessionStorage, and
data. offline caching.
Less semantic; fewer tags to describe More semantic with new tags like <header>,
page structure. <footer>, <nav>, <section>, <article>.
Supports responsive design with the viewport
No native support for responsive design.
meta tag.
Input types are basic (text, password, Includes new input types such as email, date,
etc.). color, range, url.
Supports Web Workers for background
Web workers are not available.
processing.
Built-in form validation using attributes like
No built-in form validation.
required, pattern, etc.
Performance and speed are lower Faster, efficient, and optimized for modern
compared to HTML5. browsers and devices.
3. What are the list types in HTML. Create the given list using HTML
->
1. Ordered List (<ol>)
• Displays items in a numbered format (1, 2, 3…).
2. Unordered List (<ul>)
• Displays items with bullet points.
3. Description List (<dl>)
• Used to display terms and their descriptions.
Here is the HTML code:
<!DOCTYPE html>
<html>
<body>
<!-- Unordered List -->
<h3>Unordered List</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Ordered List -->
<h3>Ordered List</h3>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<!-- Description List -->
<h3>Description List</h3>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>Scripting language for web pages</dd>
</dl>
</body>
</html>
4. Explain session management for secure web applications.
Session management is a technique used in web applications to identify users and maintain
their data across multiple page requests. Since HTTP is a stateless protocol, the server
cannot remember users automatically. Sessions solve this by storing a unique session ID on
the server and usually sending it to the client through a cookie. This allows the server to
track logged-in users, store temporary data, and maintain authentication securely.
For secure session management, the session ID must be protected from misuse. Common
practices include using HTTPS to prevent session hijacking, regenerating session IDs after
login to avoid fixation attacks, and setting session timeouts to log out inactive users.
Sessions should also be stored on the server side so an attacker cannot manipulate them.
Modern frameworks also provide built-in methods to encrypt session data and restrict
access.
Secure session management ensures that only authenticated users can access protected
pages and that sensitive actions are performed safely without unauthorized access.
5. Write HTML Code to construct the given table.
6. Create a vertical navigation bar as shown below and highlight the link or tab
corresponding to the current page to let the user know which page/section he/she is on.
7. Create the Horizontal navigation bar with dropdown menu as shown in the figure using
HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Navbar with Dropdown</title>
<style>
/* Main navbar container */
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
overflow: hidden;
}
/* Horizontal menu items */
ul li {
float: left;
position: relative;
}
/* Links style */
ul li a {
display: block;
padding: 14px 20px;
text-decoration: none;
color: white;
}
/* Hover effect */
ul li a:hover {
background-color: #111;
}
/* Dropdown menu container */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 150px;
z-index: 1;
}
/* Dropdown links */
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
text-decoration: none;
}
/* Hover inside dropdown */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show dropdown on hover */
ul li:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>Horizontal Navigation Bar with Dropdown</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Services </a>
<div class="dropdown-content">
<a href="#">Web Development</a>
<a href="#">App Development</a>
<a href="#">SEO</a>
</div>
</li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
8. Write a code using appropriate language to display the output as three buttons with the
name of the color on it. When the user clicks on the button, the background color of the
page should get changed as per the name of the color on the button.
9. Write HTML code and apply the style to the following by using External style sheet :
i. The paragraph will have a background color of blue.
ii. The font in the paragraph will be green.
iii. There will be two paragraphs with break in between.
iv. The header h1 will be underlined.
v. All must be styled in center
->
[Link]:
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Welcome to CSS Styling</h1>
<p>This is the first paragraph.</p>
<br>
<p>This is the second paragraph.</p>
</body>
</html>
[Link]
/* Center all text */
body, h1, p {
text-align: center;
}
/* Style paragraphs */
p{
background-color: blue;
color: green;
padding: 10px;
}
/* Underline h1 */
h1 {
text-decoration: underline;
}
[Link] between SVG and Canvas element.
SVG (Scalable Vector Graphics) Canvas Element
1. Vector-based graphics. 1. Raster (pixel-based) graphics.
2. Stays clear and smooth when zoomed
2. Becomes blurry/pixelated on zooming.
or resized.
3. Drawn using XML tags like <circle> and
3. Drawn using JavaScript APIs.
<rect>.
4. Each shape is an object and can be 4. Once drawn, shapes cannot be edited
edited later. individually.
5. Supports events on each object (click, 5. No events on individual shapes, only on
hover). whole canvas.
6. Best for animations, games, and real-time
6. Best for charts, diagrams, maps, icons.
graphics.
7. Lower performance for heavy 7. High performance for complex, continuous
animations. drawing.