Scribd
Upload
46 views

special worksheet for html and css

Uploaded by

Tarun Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
46 views

special worksheet for html and css

Uploaded by

Tarun Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 26

Worksheet

class VIII
chapter 2
Web Designing Using HTML
HTML (HyperText Markup Language) is the standard language for creating web pages.
Basic Structure of an HTML Document:
<!DOCTYPE html>: Declaration to define the document type.
<html>: Root element of an HTML page.
<head>: Contains metainformation, title, and linked files.
<body>: Contains the content of the webpage such as text, images, links, etc.
Tags: HTML uses tags to define elements. Tags are enclosed in angle brackets, e.g., <p> for a paragraph.
Attributes: Tags can have attributes, e.g., <img src="image.jpg" alt="Image">, where src and alt are
attributes.
Common Tags: <h1> to <h6> for headings, <p> for paragraphs, <a> for hyperlinks, <img> for images,
<ul>/<ol> for lists, <table> for tables.

1. Which tag is used to create a hyperlink in HTML?


a) <img> b) <a> c) <p> d) <div>
2. What is the correct HTML tag for inserting a line break?
a) <br> b) <lb> c) <break> d) <line>
3. Which attribute is used to define the source of an image in HTML?
a) href b) src c) alt d) link
4. How do you create a numbered list in HTML?
a) <ul> b) <ol> c) <li> d) <list>
5. Which tag is used to define a table in HTML?
a) <table> b) <tr> c) <td> d) <th>
6. The <title> tag is found in which section of an HTML document?
a) <body> b) <head> c) <footer> d) <nav>
7. Which tag is used to define a division or a section in an HTML document?
a) <section> b) <div> c) <span> d) <header>
8. Which tag is used to create an unordered list?
a) <ol> b) <ul> c) <li> d) <list>

Section B: Assertion and Reasoning


9. Assertion (A): The <img> tag is used to insert images in an HTML document.
Reason (R): The alt attribute in the <img> tag is used to provide alternative text if the image cannot be
displayed.
a) Both A and R are true, and R is the correct explanation of A.
b) Both A and R are true, but R is not the correct explanation of A.
c) A is true, but R is false.
d) A is false, but R is true.

10. Assertion (A): The <a> tag is used for creating hyperlinks in HTML.
Reason (R): The href attribute specifies the URL of the page the link goes to.
a) Both A and R are true, and R is the correct explanation of A.
b) Both A and R are true, but R is not the correct explanation of A.
c) A is true, but R is false.
d) A is false, but R is true.

Section C: Short Answer Type Questions


11. Explain the purpose of the <head> section in an HTML document.

12. What is the difference between <ul> and <ol> tags?

13. How can you create a hyperlink that opens in a new tab?

14. What is the role of the alt attribute in the <img> tag?

15. List three different types of lists that can be created in HTML.

16. Write a simple HTML code to display a table with two rows and two columns.

17. What is the significance of the <!DOCTYPE html> declaration?

Section D: Long Answer Type Questions


18. Write an HTML code to create a webpage with the following features:
A heading "My First Webpage"
A paragraph explaining what the page is about
An image with an alternative text
A link to another webpage

19. Describe the steps to create a form in HTML with at least three input fields. Include the tags and
attributes used.

20. Explain the difference between blocklevel and inline elements in HTML. Give examples.

21. What are the different types of attributes used in HTML? Explain with examples.

22. Discuss the importance of semantic tags in HTML. Provide examples of commonly used semantic
tags.

23. How can you create a responsive web page using HTML? Discuss the concepts of viewport and media
queries.

24. Write a detailed note on the history and evolution of HTML.

Section E: Case Study Based Questions


25. Case Study:
Scenario: Imagine you are creating a website for a school project. The homepage needs to include a
title, a welcome message, a navigation menu, and a footer with contact information.
Q1: What tags and attributes would you use to create the navigation menu?
Q2: How would you ensure that the footer remains at the bottom of the page?
Q3: Provide a sample HTML code for the homepage.

26. Case Study:


Scenario: You are tasked with designing a webpage for a local library. The page should display a list of
available books, with each book's title linking to a detailed page about the book.
Q1: How would you structure the HTML document?
Q2: Which tags would you use to create the list of books?
Q3: Write the HTML code for the book list section.

27. Case Study:


Scenario: Your friend is learning HTML and has created a webpage. However, the webpage doesn't
display properly on mobile devices.
Q1: What advice would you give to improve the webpage's responsiveness?
Q2: Which meta tag is crucial for making a webpage responsive?
Q3: Suggest ways to optimize images for faster loading on mobile devices.

28. Case Study:


Scenario: A local business wants to create a webpage that includes their business name, address, a
map showing their location, and a contact form.
Q1: Which HTML elements would you use to display the map?
Q2: How would you create the contact form?
Q3: Provide the HTML code for the contact form section.

29. Case Study:


Scenario: You are designing a portfolio webpage for an artist. The page should showcase images of the
artist's work, each with a brief description.
Q1: What tags would you use to display the images and descriptions?
Q2: How can you ensure the images are displayed in a grid format?
Q3: Write the HTML code for one image and description section.

30. Case Study:


Scenario: You are building a blog page. Each blog post should have a title, publication date, content,
and a "Read More" link.
Q1: How would you structure the HTML for a single blog post?
Q2: What tags would you use to format the title and date?
Q3: Provide the HTML code for a sample blog post.

Notes on Web Designing Using HTML


HTML (HyperText Markup Language) is the standard language for creating web pages.
Basic Structure of an HTML Document:
<!DOCTYPE html>: Declaration to define the document type.
<html>: Root element of an HTML page.
<head>: Contains metainformation, title, and linked files.
<body>: Contains the content of the webpage such as text, images, links, etc.
Tags: HTML uses tags to define elements. Tags are enclosed in angle brackets, e.g., <p> for a paragraph.
Attributes: Tags can have attributes, e.g., <img src="image.jpg" alt="Image">, where src and alt are
attributes.
Common Tags: <h1> to <h6> for headings, <p> for paragraphs, <a> for hyperlinks, <img> for images,
<ul>/<ol> for lists, <table> for tables.
Section A: Multiple Choice Questions (MCQs)

1. Which tag is used to create a hyperlink in HTML?


a) <img>
b) <a> (Correct Answer)
c) <p>
d) <div>

2. What is the correct HTML tag for inserting a line break?


a) <br> (Correct Answer)
b) <lb>
c) <break>
d) <line>

3. Which attribute is used to define the source of an image in HTML?


a) href
b) src (Correct Answer)
c) alt
d) link

4. How do you create a numbered list in HTML?


a) <ul>
b) <ol> (Correct Answer)
c) <li>
d) <list>

5. Which tag is used to define a table in HTML?


a) <table> (Correct Answer)
b) <tr>
c) <td>
d) <th>

6. The <title> tag is found in which section of an HTML document?


a) <body>
b) <head> (Correct Answer)
c) <footer>
d) <nav>

7. Which tag is used to define a division or a section in an HTML document?


a) <section>
b) <div> (Correct Answer)
c) <span>
d) <header>

8. Which tag is used to create an unordered list?


a) <ol>
b) <ul> (Correct Answer)
c) <li>
d) <list>

9. What is the correct HTML tag for the largest heading?


a) <heading>
b) <h6>
c) <h1> (Correct Answer)
d) <head>

10. Which tag is used to add a row in a table?


a) <td>
b) <tr> (Correct Answer)
c) <th>
d) <table>

11. Which HTML element is used to specify a footer for a document or section?
a) <bottom>
b) <footer> (Correct Answer)
c) <foot>
d) <end>

12. Which attribute is used to open a hyperlink in a new tab?


a) target="_tab"
b) new="_blank"
c) target="_blank" (Correct Answer)
d) link="_newtab"

13. How do you specify a background color for an HTML document?


a) <body background="color:red">
b) <body style="backgroundcolor:red;"> (Correct Answer)
c) <background color="red">
d) <body bgcolor="red">

14. Which of the following HTML elements is used for making text bold?
a) <i>
b) <b> (Correct Answer)
c) <u>
d) <em>

15. What does the <hr> tag in HTML stand for?


a) Hyperlink
b) Horizontal Rule (Correct Answer)
c) Hard Rule
d) High Rank
Section B: Assertion and Reasoning

16. Assertion (A): The <img> tag is used to insert images in an HTML document.
Reason (R): The alt attribute in the <img> tag is used to provide alternative text if the image cannot be
displayed.
a) Both A and R are true, and R is the correct explanation of A. (Correct Answer)
b) Both A and R are true, but R is not the correct explanation of A.
c) A is true, but R is false.
d) A is false, but R is true.

17. Assertion (A): The <a> tag is used for creating hyperlinks in HTML.
Reason (R): The href attribute specifies the URL of the page the link goes to.
a) Both A and R are true, and R is the correct explanation of A. (Correct Answer)
b) Both A and R are true, but R is not the correct explanation of A.
c) A is true, but R is false.
d) A is false, but R is true.

18. Assertion (A): The <title> tag is used to display the title of the webpage in the browser's title bar.
Reason (R): The <title> tag is located inside the <body> tag.
a) Both A and R are true, and R is the correct explanation of A.
b) Both A and R are true, but R is not the correct explanation of A. (Correct Answer)
c) A is true, but R is false.
d) A is false, but R is true.

19. Assertion (A): The <ul> tag is used to create an ordered list.
Reason (R): The <li> tag defines a list item in both ordered and unordered lists.
a) Both A and R are true, and R is the correct explanation of A.
b) Both A and R are true, but R is not the correct explanation of A.
c) A is true, but R is false. (Correct Answer)
d) A is false, but R is true.

20. Assertion (A): HTML is a programming language.


Reason (R): HTML is used to structure and present content on the web.
a) Both A and R are true, and R is the correct explanation of A.
b) Both A and R are true, but R is not the correct explanation of A.
c) A is true, but R is false.
d) A is false, but R is true. (Correct Answer)

Section C: Short Answer Type Questions

21. Explain the purpose of the <head> section in an HTML document.


Answer: The <head> section contains metainformation about the HTML document, such as the title,
character set, styles, scripts, and links to external resources. It does not display content on the webpage.

22. What is the difference between <ul> and <ol> tags?


Answer: <ul> is used to create an unordered list with bullet points, while <ol> is used to create an
ordered list with numbered items.

23. How can you create a hyperlink that opens in a new tab?
Answer: You can create a hyperlink that opens in a new tab by using the target="_blank" attribute
within the <a> tag. For example: <a href="https://example.com" target="_blank">Link</a>.

24. What is the role of the alt attribute in the <img> tag?
Answer: The alt attribute provides alternative text for an image if the image cannot be displayed. It is
also useful for screen readers to describe the image to visually impaired users.

25. List three different types of lists that can be created in HTML.
Answer: The three types of lists in HTML are:
Unordered list (<ul>)
Ordered list (<ol>)
Definition list (<dl>)

26. Write a simple HTML code to display a table with two rows and two columns.
Answer:
html
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td

Section C: Short Answer Type Questions (Continued)

26. Write a simple HTML code to display a table with two rows and two columns.
Answer:
html
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

27. What is the purpose of the <meta> tag in HTML?


Answer: The <meta> tag provides metadata about the HTML document, such as character set, author,
description, keywords, and viewport settings for responsive design.

28. How can you make text italic in HTML?


Answer: You can make text italic in HTML using the <i> tag or the <em> tag. Example: <i>Italic Text</i>
or <em>Italic Text</em>.

29. Explain the difference between the <b> and <strong> tags.
Answer: The <b> tag is used to make text bold without adding any extra importance, while the
<strong> tag not only makes the text bold but also indicates that the text is of strong importance or
urgency.

30. What is the purpose of the colspan attribute in the <td> tag?
Answer: The colspan attribute in the <td> tag specifies the number of columns a cell should span
across. It allows a single cell to extend across multiple columns in a table.

31. How do you create a checkbox in an HTML form?


Answer: You can create a checkbox in an HTML form using the <input type="checkbox"> tag. Example:
<input type="checkbox" name="subscribe" value="newsletter"> Subscribe to newsletter.

32. What is an iframe and how is it used in HTML?


Answer: An iframe (Inline Frame) is used to embed another HTML document within the current
document. It is created using the <iframe> tag. Example: <iframe src="https://example.com"
width="300" height="200"></iframe>.

33. Describe the use of the <input> tag in HTML.


Answer: The <input> tag is used to create interactive form controls, such as text fields, radio buttons,
checkboxes, submit buttons, and more. It is an essential tag for collecting user input in forms.

34. How can you include a comment in an HTML document?


Answer: Comments in HTML are included using the following syntax: <! Comment goes here >.
Comments are not displayed in the browser.

35. Write the HTML code to create a hyperlink to the email address 'example@example.com'.
Answer:
html
<a href="mailto:example@example.com">Send Email</a>

Section D: Long Answer Type Questions

36. Explain the role of the <form> tag in HTML. Provide an example with at least three form elements.
Answer: The <form> tag is used to create a form for user input in HTML. It contains form elements like
text fields, checkboxes, radio buttons, and submit buttons. Example:
html
<form action="/submit_form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male"> Male
<input type="radio" id="female" name="gender" value="female"> Female<br>
<input type="submit" value="Submit">
</form>

37. Discuss the importance of the <table> tag in HTML, including its attributes and usage.
Answer: The <table> tag in HTML is used to create tables for organizing data in rows and columns.
Important attributes include border, cellpadding, cellspacing, width, height, and align. The <tr> tag
defines a row, <td> defines a cell, and <th> defines a header cell. Tables are useful for displaying
structured data.

38. Describe the structure and purpose of the <ul>, <ol>, and <li> tags in HTML.
Answer: The <ul> tag creates an unordered list with bullet points, the <ol> tag creates an ordered list
with numbered items, and the <li> tag defines each list item. These tags are used to organize items in a
list format, providing clarity and structure to the content.

39. How can you create a navigation bar using HTML? Provide an example.
Answer: A navigation bar can be created using a combination of <ul>, <li>, and <a> tags. Example:
html
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

40. Explain the significance of the <head> and <body> tags in an HTML document.
Answer: The <head> tag contains metainformation about the document, such as the title, styles, and
links to external resources. The <body> tag contains the visible content of the webpage, such as text,
images, links, and other media. Together, these tags structure the document by separating metadata
from content.

41. What is the use of the id and class attributes in HTML? Provide examples.
Answer: The id attribute uniquely identifies an element, and the class attribute is used to apply the
same style or behavior to multiple elements. Example:
html
<p id="intro">This is an introduction.</p>
<p class="highlight">This is highlighted text.</p>

42. Write HTML code to create a form with a dropdown list, a checkbox, and a submit button.
Answer:
html
<form action="/submit" method="post">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select><br>
<input type="checkbox" id="agree" name="agree" value="yes">
<label for="agree"> I agree to the terms and conditions</label><br>
<input type="submit" value="Submit">
</form>

43. Explain the <link> tag and its use in HTML. Provide an example of linking a CSS file.
Answer: The <link> tag is used to link external resources to the HTML document, such as stylesheets.
It is typically placed in the <head> section. Example:
html
<link rel="stylesheet" href="styles.css">

44. Describe the difference between blocklevel and inline elements in HTML. Provide examples.
Answer: Blocklevel elements, such as <div>, <p>, and <h1>, take up the full width of their container
and start on a new line. Inline elements, such as <span>, <a>, and <img>, only take up as much space as
needed and do not start on a new line. Blocklevel elements are used for larger sections of content, while
inline elements are used within blocklevel elements for smaller sections of content.

45. What are the semantic elements in HTML5? Explain with examples.
Answer: Semantic elements in HTML5 are elements that clearly describe their meaning to both the
browser and the developer. Examples include:
<header>: Defines a header for a document or section.
<nav>: Defines a navigation bar.
<article>: Defines an independent, selfcontained article.
<section>: Defines a section in a document.
<footer>: Defines a footer for a document or section.

Section E: Case Study Based Questions

46. Case Study: Website Navigation Menu


Scenario: A website's navigation menu needs to be created using HTML. It should include links to
"Home," "About Us," "Services," and "Contact."
Questions:
a) Write the HTML code to create the navigation menu using an unordered list.
Answer:
html
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><

46. Case Study: Website Navigation Menu (Continued)


Scenario: A website's navigation menu needs to be created using HTML. It should include links to
"Home," "About Us," "Services," and "Contact."
Questions:
a) Write the HTML code to create the navigation menu using an unordered list.
Answer:
html
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

b) Explain the purpose of the <nav> tag in the code above.


Answer: The <nav> tag is used to define a section of the document intended for navigation links. It
helps in grouping navigationrelated elements together, making it easier for users and search engines to
identify the main navigation of a webpage.

c) How can you style the navigation menu to display horizontally instead of vertically?
Answer: To display the navigation menu horizontally, you can use CSS to set the display property of
the list items to inline or inlineblock. Example:
css
nav ul {
liststyletype: none;
padding: 0;
}
nav ul li {
display: inline;
marginright: 20px;
}

47. Case Study: Form Validation


Scenario: A registration form on a website requires the user to input their name, email, and
password. The form should not be submitted if any of these fields are empty.
Questions:
a) Write the HTML code for the form with the required fields.
Answer:
html
<form action="/register" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<input type="submit" value="Register">
</form>

b) What is the purpose of the required attribute in the input fields?


Answer: The required attribute specifies that the input field must be filled out before submitting the
form. If the field is left empty, the form will not be submitted, and the user will be prompted to
complete the field.

c) Suggest one way to improve the security of the password input in this form.
Answer: One way to improve the security of the password input is by adding clientside validation
using JavaScript to enforce strong password criteria (e.g., minimum length, inclusion of numbers,
uppercase and lowercase letters, and special characters). Additionally, using HTTPS for secure data
transmission can further protect the password.

48. Case Study: Image Gallery


Scenario: A webpage needs an image gallery with three images displayed in a single row. Each image
should link to a larger version of the image.
Questions:
a) Write the HTML code to create the image gallery.
Answer:
html
<div class="gallery">
<a href="image1_large.jpg"><img src="image1_small.jpg" alt="Image 1"></a>
<a href="image2_large.jpg"><img src="image2_small.jpg" alt="Image 2"></a>
<a href="image3_large.jpg"><img src="image3_small.jpg" alt="Image 3"></a>
</div>

b) How can you style the images to display in a single row?


Answer: You can style the images to display in a single row using CSS by setting the display property
to inlineblock or using flexbox. Example:
css
.gallery {
display: flex;
gap: 10px;
}
.gallery img {
width: 150px;
height: auto;
}

c) What is the purpose of the alt attribute in the <img> tag?


Answer: The alt attribute provides alternative text for an image if it cannot be displayed. It is also
used by screen readers for accessibility purposes, helping visually impaired users understand the
content of the image.

49. Case Study: Responsive Design


Scenario: A webpage needs to be responsive, meaning it should adapt to different screen sizes,
including mobile devices. The main content should be displayed in a single column on small screens and
in two columns on larger screens.
Questions:
a) Write the HTML structure for the main content with two sections.
Answer:
html
<div class="container">
<div class="contentleft">Left Content</div>
<div class="contentright">Right Content</div>
</div>

b) Provide the CSS code to make the layout responsive as described.


Answer:
css
.container {
display: flex;
flexwrap: wrap;
}
.contentleft, .contentright {
flex: 1 1 100%;
}
@media (minwidth: 768px) {
.contentleft, .contentright {
flex: 1 1 50%;
}
}

c) Explain the role of media queries in responsive design.


Answer: Media queries are used in responsive design to apply different styles based on the device's
characteristics, such as screen width, height, and orientation. They allow the webpage to adapt its
layout and content presentation to various devices, ensuring a consistent and userfriendly experience
across all screen sizes.

50. Case Study: HTML5 Video Integration


Scenario: A website requires an embedded video on the homepage. The video should include controls
for play, pause, and volume, and it should be responsive to different screen sizes.
Questions:
a) Write the HTML code to embed the video with the necessary controls.
Answer:
html
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

b) How can you make the video responsive?


Answer: To make the video responsive, you can use CSS to set the video’s width to 100% of its
container and use the maxwidth property to prevent it from exceeding its original size. Example:
css
video {
width: 100%;
maxwidth: 600px;
height: auto;
}

c) What fallback options can be provided for browsers that do not support the <video> tag?
Answer: For browsers that do not support the <video> tag, you can provide a fallback message or
alternative content, such as a link to download the video or instructions on how to upgrade the browser.
This can be done within the <video> tag, as shown in the example above.

Section F: Additional Questions

51. Explain how to create a table with merged cells using the rowspan and colspan attributes in HTML.
Answer: The rowspan attribute allows a cell to span multiple rows, while the colspan attribute allows a
cell to span multiple columns. Example:
html
<table border="1">
<tr>
<td rowspan="2">Row 1 & 2, Col 1</td>
<td>Row 1, Col 2</td>
</tr>
<tr>
<td>Row 2, Col 2</td>
</tr>
<tr>
<td colspan="2">Row 3, Col 1 & 2</td>
</tr>
</table>

52. What is the purpose of the <fieldset> and <legend> tags in HTML forms?
Answer: The <fieldset> tag is used to group related elements in a form, and the <legend> tag provides
a caption for the fieldset. This helps in organizing and structuring forms for better user experience and
accessibility. Example:
html
<fieldset>
<legend>Personal Information</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname">
</fieldset>

53. Describe how the <audio> tag is used in HTML, including an example with multiple audio sources.
Answer: The <audio> tag is used to embed audio files in a webpage. Multiple audio sources can be
provided for different formats. Example:
html
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser

does not support the audio tag.


</audio>

54. Explain the difference between the <section>, <article>, and <div> tags in HTML5.
Answer:
<section>: Defines a section in a document, typically with a heading, and is used for thematically
grouping content.
<article>: Represents independent, selfcontained content that could be distributed independently,
such as a blog post or news article.
<div>: A generic container used to group elements for styling or layout purposes, without conveying
any specific meaning or structure.

55. What are semantic elements in HTML, and why are they important? Provide examples.
Answer: Semantic elements clearly describe their meaning in a human and machinereadable way,
improving accessibility and SEO. Examples include <header>, <footer>, <article>, <section>, and <nav>.
They provide better structure and understanding of the content, both for developers and search
engines.

Section F: Additional Questions (Continued)

56. How can you link to a specific part of the same webpage using HTML?
Answer: You can link to a specific part of the same webpage using anchor tags with the href attribute
pointing to an id of the element you want to jump to. Example:
html
<a href="section2">Go to Section 2</a>
...
<h2 id="section2">Section 2</h2>
57. What are the differences between blocklevel and inline elements in HTML? Provide examples of
each.
Answer:
Blocklevel elements: These elements start on a new line and take up the full width available.
Examples include <div>, <p>, and <h1>.
Inline elements: These elements do not start on a new line and only take up as much width as
necessary. Examples include <span>, <a>, and <img>.

58. Explain the role of the <meta> tag in HTML. Provide an example of setting the character encoding for
a webpage.
Answer: The <meta> tag provides metadata about the HTML document, such as the character set,
author, description, and viewport settings. Example for setting the character encoding:
html
<meta charset="UTF8">

59. How do you create a dropdown list in an HTML form? Write the HTML code for a dropdown list that
includes three options: "Red," "Green," and "Blue."
Answer:
html
<label for="colors">Choose a color:</label>
<select id="colors" name="colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>

60. What is the difference between the id and class attributes in HTML? When would you use each?
Answer:
id attribute: Uniquely identifies a single element on the page. It should be used when you need to
apply a unique style or JavaScript action to a specific element.
class attribute: Can be used on multiple elements and is used to apply the same styles or behaviors to
a group of elements.

61. Explain the concept of HTML5 local storage. Provide an example of how to store and retrieve data
using local storage.
Answer: HTML5 local storage allows web applications to store data in the browser on the clientside.
The data persists even after the browser is closed. Example:
javascript
// Store data
localStorage.setItem("username", "JohnDoe");

// Retrieve data
var username = localStorage.getItem("username");

62. What is the purpose of the <label> tag in HTML forms, and how does it improve accessibility?
Answer: The <label> tag associates a label with a specific form control, improving accessibility by
making it easier for screen readers to identify the purpose of form fields. It enhances user experience by
allowing users to click on the label to focus on the corresponding input field.

63. Describe the difference between absolute and relative paths in HTML. Provide examples of each.
Answer:
Absolute path: Specifies a full URL to a resource, including the domain name. Example:
html
<a href="https://www.example.com/images/picture.jpg">Picture</a>

Relative path: Specifies a path relative to the current document. Example:


html
<a href="images/picture.jpg">Picture</a>

64. How can you create a tooltip for an HTML element? Provide an example using the title attribute.
Answer: A tooltip can be created using the title attribute on any HTML element. When the user hovers
over the element, the tooltip text will appear. Example:
html
<button title="Click to submit the form">Submit</button>

65. Explain the purpose of the <noscript> tag in HTML. When is it used?
Answer: The <noscript> tag defines content that should be displayed if the user's browser does not
support JavaScript or if JavaScript is disabled. It provides a fallback for users who cannot execute scripts.

66. Write the HTML code to create a simple ordered list with the items "First," "Second," and "Third."
Answer:
html
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>

67. What is the purpose of the alt attribute in the <img> tag, and why is it important for accessibility?
Answer: The alt attribute provides alternative text for an image if it cannot be displayed. It is
important for accessibility because screen readers use it to describe images to visually impaired users.

68. Explain how to create a hyperlink that opens in a new tab. Provide an example.
Answer: To create a hyperlink that opens in a new tab, use the target="_blank" attribute in the <a>
tag. Example:
html
<a href="https://www.example.com" target="_blank">Visit Example</a>
69. Describe the purpose of the <iframe> tag in HTML. Provide an example of embedding a YouTube
video using an <iframe>.
Answer: The <iframe> tag is used to embed another HTML document within the current document.
Example of embedding a YouTube video:
html
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0" allowfullscreen></iframe>

70. What is the purpose of the <canvas> tag in HTML5? Provide a basic example of drawing a rectangle
using JavaScript and the <canvas> tag.
Answer: The <canvas> tag is used for drawing graphics via scripting (usually JavaScript). It provides a
space where you can draw shapes, images, and other objects. Example:
html
<canvas id="myCanvas" width="200" height="100" style="border:1px solid 000000;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "FF0000";
ctx.fillRect(20, 20, 150, 75);
</script>

Section G: Advanced Questions

71. Explain how the <picture> tag is used for responsive images in HTML5. Provide an example.
Answer: The <picture> tag allows you to define multiple sources for an image, enabling the browser to
choose the most appropriate one based on device characteristics such as screen size. Example:
html
<picture>
<source media="(minwidth: 650px)" srcset="img_large.jpg">
<source media="(minwidth: 465px)" srcset="img_medium.jpg">
<img src="img_small.jpg" alt="A responsive image">
</picture>

72. How do you create an HTML form that allows users to upload a file? Write the necessary HTML code.
Answer:
html
<form action="/upload" method="post" enctype="multipart/formdata">
<label for="file">Choose a file:</label>
<input type="file" id="file" name="file">
<input type="submit" value="Upload">
</form>
73. Describe the difference between the <link> and <a> tags in HTML. When would you use each?
Answer:
<link> tag: Used to link external resources like stylesheets or icons to an HTML document. It is placed
inside the <head> section. Example:
html
<link rel="stylesheet" href="styles.css">

<a> tag: Used to create hyperlinks that navigate to other webpages or parts of the same page.
Example:
html
<a href="https://www.example.com">Visit Example</a>

74. What is the purpose of the defer attribute in the <script> tag? Provide an example of its use.
Answer: The defer attribute tells the browser to execute the script after the document has been fully
parsed, ensuring that the script doesn't block the loading of the page. Example:
html
<script src="script.js" defer></script>

75. Explain the use of the data* attributes in HTML5. Provide an example of how they can be used with
JavaScript.
Answer: The data* attributes allow you to store custom data in HTML elements. They can be accessed
and manipulated using JavaScript. Example:
html
<div id="item" dataprice="10.99" dataproduct="apple"></div>
<script>
var item = document.getElementById("item");

var price = item.getAttribute("dataprice");


var product = item.getAttribute("dataproduct");
console.log("Product:", product, "Price:", price);
</script>

76. What is the purpose of the <fieldset> and <legend> tags in HTML forms? Provide an example of their
use.
Answer: The <fieldset> tag groups related elements in a form, and the <legend> tag provides a caption
for the group. Example:
html
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
77. Describe the difference between the checked and selected attributes in HTML forms. Provide an
example for each.
Answer:
checked attribute: Used to preselect a radio button or checkbox in a form. Example:
html
<input type="radio" id="option1" name="option" value="1" checked>

selected attribute: Used to preselect an option in a dropdown list. Example:


html
<select>
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
</select>

78. How can you include a comment in an HTML document, and why might you use comments? Provide
an example.
Answer: Comments are included in HTML using <! and > and are not displayed by the browser. They
are used for explanations, notes, or to temporarily disable code. Example:
html
<! This is a comment >
<p>This text will be displayed.</p>

79. Explain the purpose of the role attribute in HTML and provide an example of its use for accessibility.
Answer: The role attribute defines the role of an element in the accessibility tree, helping assistive
technologies understand the purpose of the element. Example:
html
<nav role="navigation">
<ul>
<li><a href="home">Home</a></li>
<li><a href="about">About</a></li>
</ul>
</nav>

80. How can you create a responsive image gallery in HTML? Provide a basic example using a
combination of <div> tags, images, and CSS.
Answer:
html
<div class="gallery">
<img src="img1.jpg" alt="Image 1">
<img src="img2.jpg" alt="Image 2">
<img src="img3.jpg" alt="Image 3">
</div>
<style>
.gallery {
display: flex;
flexwrap: wrap;
}
.gallery img {
width: 30%;
margin: 1.5%;
boxshadow: 0 0 10px rgba(0,0,0,0.1);
}
</style>

81. What is the purpose of the <map> and <area> tags in HTML? Provide an example of how to use them
to create an image map.
Answer: The <map> tag is used to define an image map, which is a clickable map area within an
image. The <area> tag defines the clickable areas. Example:
html
<img src="planets.jpg" alt="Planets" usemap="planetmap">
<map name="planetmap">
<area shape="rect" coords="34,44,270,350" alt="Sun" href="sun.html">
<area shape="circle" coords="290,350,50" alt="Mercury" href="mercury.html">
</map>

82. How do you create a simple search form in HTML that sends a GET request to a search engine?
Provide the HTML code.
Answer:
html
<form action="https://www.google.com/search" method="get">
<label for="query">Search:</label>
<input type="text" id="query" name="q">
<input type="submit" value="Search">
</form>

83. Explain the difference between the name and id attributes in HTML forms. When would you use
each?
Answer:
name attribute: Used to reference form data after a form is submitted. It is essential for form
elements that are submitted to the server.
id attribute: Used to uniquely identify an element within the HTML document. It is often used for CSS
styling and JavaScript manipulation.

84. What is the purpose of the <dl>, <dt>, and <dd> tags in HTML? Provide an example of a definition
list.
Answer: The <dl> tag defines a definition list, the <dt> tag defines a term, and the <dd> tag defines a
description of the term. Example:
html
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

85. Describe the use of the accesskey attribute in HTML and provide an example of its use.
Answer: The accesskey attribute specifies a shortcut key to activate or focus an element. It improves
accessibility by providing keyboard navigation. Example:
html
<a href="home" accesskey="h">Home</a>

86. How do you create a multiselect list box in an HTML form? Provide the HTML code.
Answer:
html
<label for="fruits">Choose your favorite fruits:</label>
<select id="fruits" name="fruits" multiple>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
<option value="date">Date</option>
</select>

87. Explain the purpose of the novalidate attribute in an HTML form tag. When would you use it?
Answer: The novalidate attribute is used to disable the browser's automatic form validation. It might
be used when custom validation is handled via JavaScript instead of the browser's default behavior.

88. What is the purpose of the <figure> and <figcaption> tags in HTML5? Provide an example of how to
use them together.
Answer: The <figure> tag is used to group media content like images, diagrams, or code blocks, and
the <figcaption> tag is used to provide a caption or explanation for the content. Example:
html
<figure>
<img src="mountain.jpg" alt="A beautiful mountain">
<figcaption>A beautiful mountain in the sunrise.</figcaption>
</figure>

89. Describe the target attribute in the <form> tag. Provide an example of a form that opens the result in
a new window.
Answer: The target attribute specifies where to display the response after submitting the form.
Example to open the result in a new window:
html
<form action="/submit" target="_blank">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>

90. What is the purpose of the <s> tag in HTML? When would you use it?
Answer: The <s> tag represents text that is no longer accurate or relevant, often used to show a
strikethrough effect on the text. It is used to indicate something that has been updated or corrected.
Example:
html
<p>This is the <s>old price</s> new price.</p>

Section H: Final Questions

91. Explain the use of the download attribute in the <a> tag. Provide an example of a link that allows
users to download a file.
Answer: The download attribute in the <a> tag specifies that the target will be downloaded when a
user clicks on the hyperlink. It can also be used to provide a default file name for the download.
Example:
html
<a href="report.pdf" download="Annual_Report.pdf">Download Report</a>

92. What is the difference between the <em> and <strong> tags in HTML? When should each be used?
Answer:
<em> tag: Represents emphasized text, which is typically rendered in italics. It is used to stress
importance or to indicate a change in the tone of the text.
<strong> tag: Represents strong importance, seriousness, or urgency, and is typically rendered in
bold. It is used to highlight text that is more important than other text.

93. Describe how to create a table with merged cells using the rowspan and colspan attributes. Provide
an example.
Answer: The rowspan attribute allows a cell to span multiple rows, and the colspan attribute allows a
cell to span multiple columns. Example:
html
<table border="1">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Contact Info</th>
</tr>
<tr>
<td>Email</td>
<td>Phone</td>
</tr>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td>1234567890</td>
</tr>
</table>

94. What is the purpose of the <output> tag in HTML, and how is it used in conjunction with form
elements? Provide an example.
Answer: The <output> tag represents the result of a calculation or user action. It is used in conjunction
with form elements to display the result of an operation. Example:
html
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50"> +
<input type="number" id="b" value="50">
= <output name="result" for="a b">100</output>
</form>

95. Explain how to create a collapsible section in HTML using the <details> and <summary> tags. Provide
an example.
Answer: The <details> tag is used to create a collapsible section, and the <summary> tag defines a
visible heading for the section. When the user clicks the summary, the content within <details> is
toggled between hidden and visible. Example:
html
<details>
<summary>More Information</summary>
<p>This is additional information that can be collapsed or expanded by clicking the summary.</p>
</details>

96. What is the purpose of the autocomplete attribute in HTML forms? Provide an example of its use.
Answer: The autocomplete attribute specifies whether a form or input field should have autocomplete
enabled, allowing the browser to fill in data based on previous entries. Example:
html
<form autocomplete="on">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</form>

97. Describe how to create a sticky navigation bar that stays at the top of the page as you scroll. Provide
the necessary HTML and CSS code.
Answer: A sticky navigation bar remains fixed at the top of the page when the user scrolls. Example:
html
<style>
.navbar {
position: webkitsticky; /* For Safari */
position: sticky;
top: 0;
backgroundcolor: 333;
padding: 10px;
zindex: 1000;
}
.navbar a {
color: white;
textdecoration: none;
padding: 14px 20px;
display: inlineblock;
}
</style>

<div class="navbar">
<a href="home">Home</a>
<a href="about">About</a>
<a href="contact">Contact</a>
</div>

<div style="padding:15px 0 2000px; fontsize:30px;">


<p>Scroll to see the sticky effect.</p>
</div>

98. Explain the role of the lang attribute in the <html> tag. How does it affect accessibility and search
engines?
Answer: The lang attribute specifies the language of the document's content, which helps screen
readers pronounce words correctly and assists search engines in understanding the language of the
page. Example:
html
<html lang="en">

99. What is the purpose of the <progress> tag in HTML? Provide an example of how to display a progress
bar.
Answer: The <progress> tag represents the completion progress of a task, often displayed as a
progress bar. Example:
html
<label for="file">File upload progress:</label>
<progress id="file" value="32" max="100">32%</progress>
100. How do you use the <time> tag in HTML? Provide an example of its use to display a specific date
and time.
Answer: The <time> tag represents a specific time (including dates, times, or durations). It can be used
for events or publication dates. Example:
html
<p>The event starts at <time datetime="20240809T14:00">2:00 PM on August 9, 2024</time>.</p>

You might also like