1. Differentiate between homepage and landing page of a web application.

[4]
Ans:-

Feature Homepage Landing Page

Purpose Provides an overview of the website, its Designed to convert visitors into
features, and content customers or achieve a specific goal

Target Audience General audience, including existing Specific audience, often targeted
customers and new visitors through advertising or marketing
campaigns

Content Typically includes navigation menu, Focused on a single message, offer,

featured content, and calls-to-action or promotion, with minimal
navigation

Design Often has a more complex design, with Simple, concise design, with a clear
multiple sections and elements focus on the call-to-action

Conversion Goal May have multiple conversion goals, Has a single, specific conversion
such as sign-ups, purchases, or goal, such as filling out a form or
engagement making a purchase

Traffic Source Typically receives organic traffic, direct Often receives traffic from paid
traffic, and internal linking advertising, social media, or email
marketing campaigns

Length of Stay Visitors may stay for an extended Visitors typically stay for a shorter
period, exploring the website period, with a focus on completing
the conversion goal

Frequency of Update May be updated regularly, with new May be updated less frequently,
content and features with a focus on optimizing the
conversion rate
2. Identify and differentiate the key features of Web 1.0, Web 2.0 and Web 3.0. [6]
Ans:-

Parameters Web 1.0 Web 2.0 Web 3.0

Basics Mostly Read-Only Wildly Read-Write Portable and Personal

Primary Focus Company Focus Community Focus Individual Focus

Example of Content Home Pages Blogs/Wikis Live-streams/Waves

Focus of Content Owning Content Sharing Content Consolidating Content

Example of WebForms Web Applications Smart Applications

Interaction

Interaction Based Directories Tagging User Behaviour

On

Monetization Page Views Cost Per Click User Engagement

Strategy

Type of Advertising Banner Advertising Interactive Advertising Behavioural Advertising

Website Example Britannica Online Wikipedia The Semantic Web

Languages and HTML/Portals XML/RSS RDF/RDFS/OWL

Backlinks

3. List the main components of a web browser and briefly explain the functionality of each component. [7]
Ans:- It is important to note that browsers such as Chrome run multiple instances of the rendering engine: one for each
tab. Each tab runs in a separate process. The browser's main components are :
1. The user interface: This includes the address bar, back/forward button, bookmarking menu, etc. Every part of the
browser displays except the window where you see the requested page.
2. The browser engine: marshals actions between the UI and the rendering engine.
3. The rendering engine : responsible for displaying requested content. For example if the requested content is HTML, the
rendering engine parses HTML and CSS, and displays the parsed content on the screen.
4. Networking: For network calls such as HTTP requests, using different implementations for different platform behind a
platform-independent interface.
5. UI backend: Used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface
that is not platform specific. Underneath it uses operating system user interface methods.
6. JavaScript interpreter. Used to parse and execute JavaScript code.
7. Data storage: This is a persistence layer. The browser may need to save all sorts of data locally, such as cookies.
Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem.

4. State the basic steps followed by a rendering engine of a browser while displaying a page on screen.[7]
Ans:- The entire process followed by a browser from fetching the webpage to displaying it on the screen.

• By default the rendering engine can display HTML and XML documents and images.

• It can display other types of data via plug-ins or extension; for example, displaying PDF documents using a PDF viewer
plug-in.

• Different browsers use different rendering engines:

➔ Internet Explorer uses Trident,
➔ Firefox uses Gecko,
➔ Safari uses WebKit.
➔ Chrome and Opera (from version 15) use Blink, a fork of WebKit.
WebKit is an open source rendering engine which started as an engine for the Linux platform and was modified by Apple
to support Mac and Windows.
In software engineering, a project fork happens when developers take a copy of source code from one software package
and start independent development on it, creating a distinct and separate piece of software. The term often implies not
merely a development branch, but a split in the developer community, a form of schism.
• The rendering engine will start getting the contents of the requested document from the networking layer.

• After that, the basic flow is given by:

• Step 1: Parsing the HTML document and convert elements to DOM nodes in a tree called the “content tree” – HTML
Parser
• Step 2: Parse the style data, both in external CSS files and in style element, together with visual instructions in HTML to
create another tree, call “render tree”; the render tree contains rectangles with visual attributes like color and dimensions.
– CSS Parser
• Step 3: Give each node the exact coordinates where it should appear on the screen – Layout
• Step 4: The Render tree will be traversed and each node will be painted using the UI backend layer -Painting

It's important to understand that this is a gradual process. For better user experience, the rendering engine will try to
display contents on the screen as soon as possible. It will not wait until all HTML is parsed before starting to build and
layout the render tree. Parts of the content will be parsed and displayed, while the process continues with the rest of the
contents that keeps coming from the network.

5. Explain the purpose of a sitemap in website development and list two types of sitemaps commonly used. [3]
Ans:- A sitemap is a visual representation of a website's architecture, outlining the hierarchy of pages, content, and
functionality. The primary purpose of a sitemap is to plan, organize, and communicate the structure of a website to
stakeholders, developers, and designers. A sitemap helps to:

● Define the website's information architecture

● Identify relationships between pages and content
● Plan navigation and user flow
● Ensure consistency in page layout and design
● Facilitate communication among team members and stakeholders
● Inform the development process, including content creation and linking

Two Types of Sitemaps Commonly Used:

● Visual Sitemap for website architecture planning and communication
● HTML Sitemaps for website visitors to improve navigation
Another type of sitemap, XML Sitemaps use for search engines to better index your website.

1. Visual Sitemap:
❖ A visual sitemap is a very effective method for both planning and communicating ideas about a website‟s structure.
❖ A 2D image or drawing representing the structure of a website.
❖ Pages are represented as blocks and cells linked together in a hierarchical organizational chart.
❖ Visual sitemaps are typically created with a computer by manually drawing or generated by crawling an existing
website.
 2. HTML Sitemap:
❖ An HTML Sitemap is for the users. It helps visitors navigate across the website easily.
❖ HTML formatted sitemaps are used for human interaction and understanding of page content locations within a
website.
❖ It may be included as a page on a website as an additional navigation aid. Actual formatting or styling of the sitemap
may vary depending on the designer‟s tastes.

6. How does a sitemap improve the search engine optimization (SEO) of a website? Explain with an example. [3]
Ans:- A sitemap can significantly improve a website's search engine optimization (SEO) by providing search engines with a
clear understanding of the website's structure, content, and relationships between pages. Here are some ways a sitemap
enhances SEO:
● Faster Indexing: A sitemap informs search engines about new or updated content, allowing them to crawl and index
the website more efficiently.
● Improved Crawlability: A sitemap helps search engines discover pages that might be difficult to crawl, such as those
with complex URLs or those not linked from the main navigation.
● Better Page Prioritization: A sitemap allows webmasters to specify page priority, ensuring that important pages are
crawled and indexed more frequently.
● Enhanced Content Organization: A sitemap helps search engines understand the relationships between pages,
improving the website's overall content organization and structure.
● Example: Let's say we have an e-commerce website, example.com, that sells clothes, electronics & home appliances,
etc. The website has a large collection of products, each with its own page. Without a sitemap, search engines might
struggle to crawl and index all the product pages, especially if they're not linked from the main navigation.
By creating a sitemap, we can inform search engines about the product pages, including their URLs, update frequencies,
and relationships with other pages. For instance, our sitemap might include the following entries.
By submitting this sitemap to search engines, we're providing them with a clear understanding of our website's structure
and content. This can lead to:
● Faster indexing of new product pages
● Improved crawlability of product pages that might be difficult to reach
● Better prioritization of important pages, such as the homepage and category pages
● Enhanced content organization, making it easier for users to find related products
By leveraging a sitemap, we can improve our website's SEO, increase visibility, and drive more traffic to our online store.

7. Explain the difference between an XML sitemap and an HTML sitemap. [3]
Ans:-

Feature XML Sitemap HTML Sitemap

Purpose Inform search engines about website Provide a visual representation of website
structure and content structure for users

Format Written in Extensible Markup Language Written in HyperText Markup Language

(XML) (HTML)

Target Audience Search engines (e.g., Google, Bing, Yahoo) Human users and website visitors

Content Lists URLs, metadata, and relationships Displays a hierarchical structure of

between pages website pages and categories

Submission Submitted to search engines through Not submitted to search engines; instead,
Webmaster Tools or robots.txt linked from website's footer or navigation

Crawlability Helps search engines crawl and index website Does not directly impact search engine
pages more efficiently crawlability

Indexing Aids in faster indexing of new or updated Does not affect indexing of website pages
content

User Experience Not directly visible to users; improves Provides a clear visual representation of
website's SEO website structure, enhancing user
experience and navigation

Tools Used Generated using tools like Sitemap Generator, Created using HTML, CSS, and JavaScript,
Screaming Frog SEO Spider, or manual coding often with the help of website builders or
CMS platforms

8. What is a wireframe in web design? List two key elements that are typically included in a wireframe. [3]
Ans:- A wireframe is a schematic or blueprint that is useful for helping programmers and designers think and
communicate about the structure of the software or website.
• The design is called wireframes (sometimes called wires, mockups, or mocks).
• A wireframe is a two-dimensional skeletal outline of a webpage or app.
• Wireframes provide a clear overview of the page structure, layout, information architecture, user flow, functionality, and
intended behaviors.
• A wireframe represents the initial product concept, styling, color, and graphics are kept to a minimum. Wireframes can be
drawn by hand or created digitally, depending on how much detail is required.
• Wireframing is used by designers. This process allows all stakeholders to agree on where the information will be placed
before the developers build the interface out with code.
• Wireframing is drafting a simple layout and the framework of a web page.
•There are three main types of wireframes:
1. Low-fidelity wireframes,
2. Mid-fidelity wireframes,
3. High-fidelity wireframes.

Low-fidelity wireframes
• Basic visual representations of the webpage.
• Serve as the design‟s starting point.
• They tend to be fairly rough, created without any sense of scale, grid, or pixel accuracy.
• Omit any detail that could potentially be a distraction and include only simplistic images, block shapes, and mock
content—such as filler text for labels and headings.
• Low fidelity wireframes are useful for starting conversations, deciding on navigation layout, and mapping the user flow.
• A low-fidelity wireframe may include pseudo-Latin text fillers and gray boxes filled in with an „X‟ to indicate an image.

Mid-fidelity wireframes
• The commonly used wireframe feature, more accurate representations of the layout.
• While they still avoid distractions such as images or typography, more detail is assigned to specific components, and
features are clearly differentiated from each other.
• Varying text weights used to separate headings and body content.
• Though still black and white, designers can use different shades of gray to communicate the visual prominence of
individual elements.
• Mid-fidelity wireframes are created using a digital wireframing tool, such as Sketch or Balsamiq.

High-fidelity wireframes
• High-fidelity wireframes boast pixel-specific layouts.
• It may include actual featured images and relevant written content.
• This added detail makes high-fidelity wireframes ideal for exploring and documenting complex concepts such as menu
systems or interactive maps.
• It should be saved for the latter stages of the product‟s design cycle.

9. Develop a sitemap for a university’s website that includes academic programs, departments, research centers,
admissions, and student services. [7]
Ans:-

10. Design a wireframe for a job recruitment website with sections for job listings, company profiles, user
resumes, application tracking, and job search filters. [7]
Ans:-

11. Develop a wireframe for a personal portfolio website showcasing your academic achievements. [7]
Ans:-

12. Develop a wireframe for a conference management system that includes features for event schedules, speaker
profiles, attendee registration, session booking, and feedback collection. [7]
Ans:-

13. In Hypertext Markup Language (HTML) what does the terms ‘hypertext’ and ‘markup’ specify. [3]
Ans:- In Hypertext Markup Language (HTML), the terms "hypertext" and "markup" are crucial components that define the
language's purpose and functionality.

❖ Hypertext:
➢ The term "hypertext" refers to the ability to create links between different pieces of text, images, or other
media.
➢ In the context of HTML, hypertext allows users to navigate between web pages, access additional information,
and explore related content by clicking on hyperlinks.
 ➢ Hypertext enables the creation of a non-linear, interactive experience, where users can jump from one piece of
content to another, rather than following a linear sequence.
❖ Markup:
➢ The term "markup" refers to the process of adding annotations or tags to a document to define its structure,
format, and content.
➢ In HTML, markup involves surrounding content with HTML elements, such as <p>, <img>, or <a>, to indicate its
purpose, appearance, and behavior. These elements, also known as tags, provide instructions to web browsers
on how to render the content, making it visually appealing and functional.

In essence, HTML's "markup" aspect focuses on structuring and formatting content, while the "hypertext" aspect enables
the creation of interactive links between different pieces of content. Together, they form the foundation of the web,
allowing users to access, navigate, and interact with online content.

14. Explain the utility of metadata in an HTML document with relevant examples. [6]
Ans:- Metadata in an HTML document refers to information that provides context and meaning to the content, but is not
directly displayed to the user. This hidden data plays a crucial role in improving search engine rankings, enhancing
accessibility, and providing a better user experience. By including relevant metadata in your HTML documents, you can
ensure that your content is discoverable, usable, and engaging for a wider audience.

Let's explore the utility of metadata in HTML with some relevant examples:
1. Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript">
2. Define a description of your web page:
<meta name="description" content="Free Web tutorials for HTML and CSS">
3. Define the author of a page:
<meta name="author" content="John Doe">
4. Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
5. Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

15. What are semantic HTML elements, and why are they important? Provide examples of two semantic elements
and describe their roles. [5]
Ans:- Semantic HTML elements are a set of HTML elements that provide meaning to the structure of a webpage, beyond
just presentation. They help search engines, screen readers, and other machines understand the context and purpose of
different parts of a webpage, improving the overall user experience and accessibility.

● Semantic HTML elements are crucial for several reasons:

➔ Improved Search Engine Optimization (SEO): Search engines can better understand the content and relevance of
a webpage, leading to improved search engine rankings.
➔ Enhanced Accessibility: Screen readers and other assistive technologies can provide a better experience for users
with disabilities, as they can understand the context and purpose of different elements.
➔ Better Code Readability and Maintainability: Semantic HTML elements make the code more readable and
maintainable, as they provide a clear understanding of the webpage's structure and content.

● Examples of Semantic HTML Elements:

➔ <header> Element:
The <header> element represents the header section of a webpage or a section. It typically contains the title,
logo, and navigation menu. The <header> element provides a clear indication of the header section, making it
easier for search engines and screen readers to understand the webpage's structure.
 <header>
<h1>SEMANTIC</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

➔ <figure> Element:
The <figure> element represents a self-contained piece of content, such as an image, diagram, or code snippet.
It provides a way to associate a caption with the content, making it easier for users to understand the context
and purpose of the content.
<figure>
<img src="image.jpg" alt="A diagram illustrating HTML semantic elements">
<figcaption>Figure 1: HTML Semantic Elements</figcaption>
</figure>

16. Explain the purpose of the <doctype> declaration in an HTML document. Why is it important? [3]
Ans:- The <!DOCTYPE> declaration, also known as the document type declaration, is the first line of code in an HTML
document. It informs the web browser about the document type and the version of HTML used in the document.

● Purpose of the <!DOCTYPE> Declaration:

● Specifies the Document Type: It tells the browser that the document is written in HTML and specifies the version
of HTML used.
● Triggers Standards Mode: The <!DOCTYPE> declaration triggers the browser's standards mode, which ensures
that the browser renders the HTML and CSS according to the W3C standards.
● Prevents Quirks Mode: Without the <!DOCTYPE> declaration, the browser may render the page in quirks mode,
which can lead to inconsistent and unpredictable behavior.

● The <!DOCTYPE> declaration is crucial for several reasons:

● Ensures Consistent Rendering: By triggering standards mode, the <!DOCTYPE> declaration ensures that the
browser renders the HTML and CSS consistently across different browsers and devices.
● Improves Accessibility: A valid <!DOCTYPE> declaration helps screen readers and other assistive technologies to
correctly interpret the document structure and content.
● Enhances Search Engine Optimization (SEO): Search engines like Google can better understand the document
structure and content when the <!DOCTYPE> declaration is present, which can improve search engine rankings.
● Simplifies Debugging: With a valid <!DOCTYPE> declaration, developers can more easily identify and debug
HTML and CSS issues, as the browser will render the page according to the W3C standards.

17. What is the difference between the <strong> and <b> tags in HTML? When should each be used? [4]
Ans:-

strong tag bold tag

The <strong> tag is used to define text with The bold (<b>) tag specifies bold text without any
strong importance extra importance.

It has semantic meaning, it implies that the text is It has not any semantic meaning, it only applies
important visual styling

The text inside this tag is bold It makes any text bold.

Conveys importance for both sighted and screen Provides no semantic meaning for screen
readers. readers.

Contributes to SEO by signaling importance to Doesn’t convey importance, less helpful for SEO.
search engines.

Encouraged for emphasis with importance. Primarily used for visual styling without
semantic implications.
● Use <strong>:
● When you want to indicate strong importance or emphasis on a piece of text.
● When you want to provide semantic meaning to the text.
● When you want to improve accessibility and SEO.
<!DOCTYPE html>
<html>
<head>
<title>Strong Tag Example</title>
</head>
<body>
<h2>Using Strong Tag</h2>
<p>GeeksforGeeks a
<strong>Computer science </strong>
Portal.
</p>
</body>
</html>
● Use <b>:
❖ When you only want to make text bold for visual purposes, without conveying any additional meaning.
❖ When you're working with legacy systems or older browsers that don't support HTML5.
<!DOCTYPE html>
<html>
<head>
<title>Bold Tag Example</title>
</head>
<body>
<h2>Using Bold Tag</h2>
<p>This is
<b>bold text</b>
within a paragraph.
</p>
</body>
</html>
18. Differentiate between the <ul>, <ol>, and <dl> tags in HTML. When should each be used? [5]
Ans:-

Features OL UL DL

Tag <ol> <ul> <dl>

List Type Ordered List Unordered List Definition List

List Items <li> <li> <dt> (term) and

<dd> (definition)

Visual Representation Bullet points or discs Numbers, letters, or Term-definition format

Roman numerals

Use Cases Options, features, Steps, instructions, Glossary, dictionary,

benefits, etc. ranked items, etc. FAQs, etc.

● Use <ul>:
● When you want to present a list of items that do not have a specific order or sequence.
● When you want to create a list of options or choices.
● When you want to create a list of features or benefits.
● Use <ol>:
● When you want to present a list of items that have a specific order or sequence.
● When you want to create a list of steps or instructions.
● When you want to create a list of ranked items.
● Use <dl>:
● When you want to present a list of terms and their corresponding definitions or descriptions.
● When you want to create a glossary or dictionary.
● When you want to create a list of FAQs (Frequently Asked Questions).
Examples:

<!-- Unordered List --> <!-- Ordered List --> <!-- Definition List -->
<ul> <ol> <dl>
<li>Item 1</li> <li>Step 1</li> <dt>Term 1</dt>
<li>Item 2</li> <li>Step 2</li> <dd>Definition of Term
<li>Item 3</li> <li>Step 3</li> 1</dd>
</ul> </ol> <dt>Term 2</dt>
<dd>Definition of Term
2</dd>
</dl>

19. What is the purpose of the <button> element in HTML? Explain the different types of buttons it can create and
provide an example of each type. [3]
Ans:- The <button> element in HTML is used to create a clickable button within a form or as a standalone element. Its
primary purpose is to provide a way for users to interact with a web page, submitting forms, triggering actions, or
navigating to other pages.

The <button> element can create different types of buttons, each with its own purpose and characteristics.
Three types of attribute values are used in the button tag. With the help of this type of attribute value, we can specify the
work of the button tag.
 ● Submit: with the help of this attribute value, we can specify that it is a submit button. It is the default value for the
submit button for all browsers except for Internet Explorer.
● Button: with the help of this attribute value, we can specify that it is a clickable button. It is the default value for the
Internet Explorer.
● Reset: with the help of this attribute value, we can specify that it is a reset button. It is used to change the previous
data from the form.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example for button attribute value</title>
</head>
<body>
<form action="#" method="get">
<label for="fname">Enter Your First name:</label>

<input
type="text"
id="fname"
name="fname"
placeholder="Enter your first name"
/><br>

<label for="lname">Enter Your Last name:</label>

<input
type="text"
id="lname"
name="lname"
placeholder="Enter your last name"
/><br>

<input type="submit" value="Submit" />

<input type="reset" value="Reset">
<button type="button" value="Click me">Sign Up</button>
</form>
</body>
</html>

20. What are the role of the attributes ‘method’ and ‘action’ in an HTML form? [3]
Ans:- Roles of attributes:-
● method Attribute: The method attribute specifies the HTTP method to be used when submitting the form data. The
most commonly used values for the method attribute are:
● get: The default method, which appends the form data to the URL as a query string. This method is suitable for
retrieving data, but it has limitations, such as character limits and visibility of sensitive data.
● post: This method sends the form data in the request body, which is more secure and suitable for submitting
sensitive data or large amounts of data.
 ● action Attribute: The action attribute specifies the URL where the form data will be submitted. This can be a
server-side script, a web application, or any other resource that can process the form data.
Example:-
<form method="post/get" action="https://example.com/submit">
<!-- form fields here -->
</form>

21. Create an HTML document that includes a form for file uploads. Ensure that the form supports multiple file
selections and restricts file types to images only. [4]
Ans:-

<!DOCTYPE html>
<html>
<head>
<title>File Upload Form</title>
</head>
<body>
<h1>File Upload Form</h1>
<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="files" name="files[]" multiple accept=".jpg, .jpeg, .png, .gif, .bmp">
<label for="files">Select images to upload:</label>
<br><br>
<input type="submit" value="Upload Files">
</form>
</body>
</html>

22. Create an HTML page to display a product catalog with a list of products. Each product should have an image,
name, description, and price. Use HTML5 semantic elements. [5]
Ans:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Catalog</title>
<!-- <style>
/* Add some basic styling to make the catalog look decent */
.product {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border: 1px solid #ddd;
margin: 20px;
}
.product img {
width: 100px;
height: 100px;
margin-bottom: 10px;
}
.product h2 {
 font-size: 18px;
margin-top: 0;
}
.product p {
font-size: 14px;
color: #666;
}
.product .price {
font-size: 16px;
font-weight: bold;
color: #337ab7;
}
</style> -->
</head>
<body>
<header>
<h1>Product Catalog</h1>
</header>
<main>
<section class="product-list">
<article class="product">
<img src="product1.jpg" alt="Product 1 Image">
<h2>Product 1</h2>
<p>This is a description of Product 1.</p>
<p class="price">$19.99</p>
</article>
<article class="product">
<img src="product2.jpg" alt="Product 2 Image">
<h2>Product 2</h2>
<p>This is a description of Product 2.</p>
<p class="price">$29.99</p>
</article>
<article class="product">
<img src="product3.jpg" alt="Product 3 Image">
<h2>Product 3</h2>
<p>This is a description of Product 3.</p>
<p class="price">$39.99</p>
</article>
<!-- Add more products here -->
</section>
</main>
<footer>
<p>&copy; 2023 Product Catalog</p>
</footer>
</body>
</html>

23. Create an HTML page that includes a navigation menu with three links: Home, About, and Contact. Below the
navigation menu, add sections containing a heading and a paragraph of text, for each of the navigation links. Use
appropriate HTML elements and structure your code following best practices. [6]
Ans:-

<!DOCTYPE html>
<html lang="en">
 <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Menu Example</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Home</h1>
<p>Welcome to our website! This is the home page.</p>
</section>
<section id="about">
<h1>About</h1>
<p>This is the about page, where you can learn more about our company.</p>
</section>
<section id="contact">
<h1>Contact</h1>
<p>Get in touch with us through our contact page.</p>
</section>
</main>
</body>
</html>

24. Design an HTML form for a survey that includes different question types such as multiple choice, checkboxes,
and text areas. For example, include questions about user satisfaction with options for rating, and a comment
Section. [5]
Ans:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survey Form</title>
<style>
/* Add some basic styling to make the form look decent */
form {
max-width: 600px;
margin: 40px auto;
padding: 20px;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
 margin-bottom: 10px;
}
input[type="radio"], input[type="checkbox"] {
margin-right: 10px;
}
textarea {
width: 100%;
height: 100px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<form>
<h1>Survey Form</h1>
<section>
<h2>Overall Satisfaction</h2>
<label>
<input type="radio" name="satisfaction" value="1"> Very Satisfied
</label>
<label>
<input type="radio" name="satisfaction" value="2"> Satisfied
</label>
<label>
<input type="radio" name="satisfaction" value="3"> Neutral
</label>
<label>
<input type="radio" name="satisfaction" value="4"> Dissatisfied
</label>
<label>
<input type="radio" name="satisfaction" value="5"> Very Dissatisfied
</label>
</section>
<section>
<h2>Features Used</h2>
<label>
<input type="checkbox" name="features[]" value="Feature 1"> Feature 1
</label>
<label>
<input type="checkbox" name="features[]" value="Feature 2"> Feature 2
</label>
<label>
<input type="checkbox" name="features[]" value="Feature 3"> Feature 3
</label>
</section>
<section>
<h2>Comments</h2>
<label>
<textarea name="comments"></textarea>
</label>
</section>
<button type="submit">Submit Survey</button>
</form>
</body>
</html>
25. Create an HTML form for contacting a company that includes fields for name, email, subject, and message.
Include a "Submit" button. Add basic HTML5 validation attributes to ensure that the username, email and message
fields are not empty and message fields must contain at least 10 characters. [5]
Ans:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<style>
/* Add some basic styling to make the form look decent */
form {
max-width: 600px;
margin: 40px auto;
padding: 20px;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<form>
<h1>Contact Us</h1>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required minlength="10"></textarea>
<button type="submit">Submit</button>
</form>
</body>
</html>

26. Design an HTML form for student registration using suitable types of input elements for user name, password,
phone number, e-mail id, date of birth, gender and provisions for submit and reset. Add basic HTML5 validation
attributes to ensure that none of the fields is empty and username consists of alphanumeric characters only.
Ans:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<style>
/* Add some basic styling to make the form look decent */
form {
max-width: 600px;
margin: 40px auto;
padding: 20px;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input, select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<form>
<h1>Student Registration Form</h1>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required pattern="[a-zA-Z0-9]+">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</body>
</html>