📝 HTML Assignment - 1
Instructions:
If you are unable to solve a problem, please keep it for the doubt session.
Do not use any AI tool, code generator, or external website to solve the problems. This
assignment is for your practice and understanding.
✅ Part A: Multiple Choice Questions (Tick the correct option)
1. Which tag is used to create a hyperlink in HTML?
☐ a) <link>
☐ b) <a>
☐ c) <href>
☐ d) <hyper>
2. What is the correct HTML element for the largest heading?
☐ a) <head>
☐ b) <heading>
☐ c) <h1>
☐ d) <h6>
3. Which attribute is used to provide alternative text for an image, if the image
cannot be displayed?
☐ a) alt
☐ b) src
☐ c) title
☐ d) href
4. What does the style attribute do in an HTML tag?
☐ a) Defines CSS in a separate file
☐ b) Adds inline CSS styling
☐ c) Links to a stylesheet
☐ d) Changes JavaScript behavior
5. Which tag is used to insert a line break in HTML?
☐ a) <br>
☐ b) <lb>
☐ c) <break>
☐ d) <line>
6. What is the correct HTML for inserting an image?
☐ a) <img href="[Link]" alt="MyPic">
☐ b) <img src="[Link]" alt="MyPic">
☐ c) <image src="[Link]" alt="MyPic">
☐ d) <src img="[Link]" alt="MyPic">
7. Which HTML tag is used to define the title of the document that appears in the
browser tab?
☐ a) <meta>
☐ b) <header>
☐ c) <title>
☐ d) <head>
💻 Part B: Coding-Based Questions
8. Create a simple HTML page with a title "My First Web Page" and a heading that says
"Welcome to HTML".
9. Write HTML code to display a paragraph about your favorite hobby. Add a heading
above it.
10. Design a page with three different headings (h1, h2, h3) and write one line under each
heading.
11. Use inline CSS to make the text color of a paragraph red and the background color
yellow.
12. Create a webpage that contains bold, italic, and underlined text in one paragraph.
13. Insert an image of your choice using the <img> tag. Add alt text and fix its width to
300px.
14. Create a page with a clickable link that takes the user to [Link]
Make the link open in a new tab.
15. Make a colored box using a div with inline styles – set width, height, background
color, and some padding.
16. Create a table with 3 rows and 2 columns: First row should have column headings
"Name" and "Age". Add data to the rest of the rows.
17. Create a table that lists 4 programming languages and their creators. Add a table
border.
18. Create an HTML page that contains a heading and two paragraphs. Give the second
paragraph a different text color using the style attribute.
19. Add a link that jumps to a specific section of your webpage (use anchor id).
20. Create a page with an image and a caption below it using a paragraph or <figcaption>.
Part A: Multiple Choice Questions (MCQs)
1. Which tag is used to create a hyperlink in HTML?
Answer: b) <a>
2. What is the correct HTML element for the largest heading?
Answer: c) <h1>
3. Which attribute is used to provide alternative text for an image, if the image
cannot be displayed?
Answer: a) alt
4. What does the style attribute do in an HTML tag?
Answer: b) Adds inline CSS styling
5. Which tag is used to insert a line break in HTML?
Answer: a) <br>
6. What is the correct HTML for inserting an image?
Answer: b) <img src="[Link]" alt="MyPic">
7. Which HTML tag is used to define the title of the document that appears in the
browser tab?
Answer: c) <title>
💻 Part B: Coding-Based Questions
Note: Below are sample solutions. There can be multiple correct ways to achieve the desired
results.
8. Create a simple HTML page with a title "My First Web Page" and a heading
that says "Welcome to HTML".
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
</body>
</html>
9. Write HTML code to display a paragraph about your favorite hobby. Add a
heading above it.
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>My Hobby</title>
</head>
<body>
<h2>Photography</h2>
<p>Photography allows me to capture moments and express creativity through
images.</p>
</body>
</html>
10. Design a page with three different headings (h1, h2, h3) and write one line under
each heading.
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Headings Example</title>
</head>
<body>
<h1>Main Heading</h1>
<p>This is under h1.</p>
<h2>Subheading</h2>
<p>This is under h2.</p>
<h3>Sub-subheading</h3>
<p>This is under h3.</p>
</body>
</html>
11. Use inline CSS to make the text color of a paragraph red and the background
color yellow.
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<p style="color: red; background-color: yellow;">This is a styled paragraph.</p>
</body>
</html>
12. Create a webpage that contains bold, italic, and underlined text in one
paragraph.
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Text Formatting</title>
</head>
<body>
<p>This is <b>bold</b>, <i>italic</i>, and <u>underlined</u> text.</p>
</body>
</html>
13. Insert an image of your choice using the <img> tag. Add alt text and fix its width
to 300px.
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<img src="[Link]" alt="Description of image" style="width: 300px;">
</body>
</html>
14. Create a page with a clickable link that takes the user to
[Link] Make the link open in a new tab.
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Link Example</title>
</head>
<body>
<a href="[Link] target="_blank">Visit Wikipedia</a>
</body>
</html>
15. Make a colored box using a div with inline styles – set width, height, background
color, and some padding.
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Styled Div</title>
</head>
<body>
<div style="width: 200px; height: 100px; background-color: lightblue; padding: 20px;">
This is a styled div.
</div>
</body>
</html>
16. Create a table with 3 rows and 2 columns: First row should have column
headings "Name" and "Age". Add data to the rest of the rows.
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
</body>
</html>
17. Create a table that lists 4 programming languages and their creators. Add a table
border.
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>Programming Languages</title>
</head>
<body>
<table border="1">
<tr>
<th>Programming Language</th>
<th>Creator</th>
</tr>
<tr>
<td>Python</td>
<td>Guido van Rossum</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Brendan Eich</td>
</tr>
<tr>
<td>Java</td>
<td>James Gosling</td>
</tr>
<tr>
<td>C</td>
<td>Dennis Ritchie</td>
</tr>
</table>
</body>
</html>
18. Create an HTML page that contains a heading and two paragraphs. Give the second
paragraph a different text color using the style attribute.
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled Paragraph</title>
</head>
<body>
<h1>Sample Heading</h1>
<p>This is the first paragraph with default text color.</p>
<p style="color: blue;">This is the second paragraph with blue text color.</p>
</body>
</html>
19. Add a link that jumps to a specific section of your webpage (use anchor id).
To create an in-page link that jumps to a specific section:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jump Link Example</title>
</head>
<body>
<h1>Main Heading</h1>
<p><a href="#section2">Go to Section 2</a></p>
<h2 id="section1">Section 1</h2>
<p>Content for section 1.</p>
<h2 id="section2">Section 2</h2>
<p>Content for section 2.</p>
</body>
</html>
In this example:
The link <a href="#section2">Go to Section 2</a> will jump to the section with the
id="section2" when clicked.
20. Create a page with an image and a caption below it using a paragraph or
<figcaption>.
Using the <figure> and <figcaption> elements:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image with Caption</title>
</head>
<body>
<figure>
<img src="[Link]" alt="Description of image" style="width:300px;">
<figcaption>This is the image caption.</figcaption>
</figure>
</body>
</html>
In this example:
The <figure> element encapsulates the image and its caption.
The <figcaption> element provides the caption text below the image.
