HTML Assignment
Q1:
Ans: <html>
<head>
<title>My Name</title>
</head>
<body>
<h1 id="my-name">Your Name Here</h1>
<script>
const nameElement = [Link]("my-name");
[Link] = "Utkarsh Mishra";
</script>
</body>
</html>
Output:
Q2:
Ans: <html>
<head>
<title>Numbers 1-10</title>
</head>
<body>
<h1>Numbers 1-10:</h1>
<ul id="number-list"></ul>
<script>
// Get the element with the id "number-list"
const numberList = [Link]("number-list");
// Loop through numbers 1-10 and create list items
for (let i = 1; i <= 10; i++) {
const listItem = [Link]("li");
[Link] = i;
[Link](listItem);
}
</script>
</body>
</html>
Output:
Q3:
Ans: <html>
<head>
<title>This is a webpage</title>
</head>
<body>
<!-- Add content here -->
</body>
</html>
Q4:
Ans: <html>
<head>
<title id="page-title"></title>
</head>
<body>
<h1 id="message"></h1>
<script>
// Get the current date
const currentDate = new Date();
// Set the title of the page to the current date
[Link]("page-title").textContent =
[Link]();
// Set the message to the screen
[Link]("message").textContent = "When was this webpage created?
Check page's title for the answer.";
</script>
</body>
</html>
Output:
Q5:
Ans: <html>
<body>
<h1>Hello, World!</h1>
<p>This is a custom webpage with a message of my choosing.</p>
</body>
</html>
Output:
Q6:
Ans: <html>
<head>
<title>Custom Webpage with Head Section</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a custom webpage with a message of my choosing.</p>
</body>
</html>
Output:
Q7:
Ans: <html>
<head>
<title>Squares of Numbers 1-20</title>
</head>
<body>
<h1>Squares of Numbers 1-20</h1>
<p>
1<sup>2</sup> = 1<br>
2<sup>2</sup> = 4<br>
3<sup>2</sup> = 9<br>
4<sup>2</sup> = 16<br>
5<sup>2</sup> = 25<br>
6<sup>2</sup> = 36<br>
7<sup>2</sup> = 49<br>
8<sup>2</sup> = 64<br>
9<sup>2</sup> = 81<br>
10<sup>2</sup> = 100<br>
11<sup>2</sup> = 121<br>
12<sup>2</sup> = 144<br>
13<sup>2</sup> = 169<br>
14<sup>2</sup> = 196<br>
15<sup>2</sup> = 225<br>
16<sup>2</sup> = 256<br>
17<sup>2</sup> = 289<br>
18<sup>2</sup> = 324<br>
19<sup>2</sup> = 361<br>
20<sup>2</sup> = 400<br>
</p>
</body>
</html>
Output:
Q8-a:
Ans: <html>
<head>
<title>Unalphabetized List with Subscripted Numbers</title>
</head>
<body>
<h1>Unalphabetized List with Subscripted Numbers</h1>
<p>
John<sub>9</sub><br>
Mary<sub>5</sub><br>
Peter<sub>3</sub><br>
Hary<sub>7</sub><br>
Hardy<sub>4</sub><br>
Tia<sub>8</sub><br>
Michael<sub>9</sub><br>
Johny<sub>6</sub><br>
C<sub>1</sub><br>
Party<sub>2</sub><br>
William<sub>10</sub><br>
</p>
</body>
</html>
Output:
Q8-b:
Ans: <html>
<head>
<title>Alphabetized List with Subscripted Numbers</title>
</head>
<body>
<h1>Alphabetized List with Subscripted Numbers</h1>
<p>
C<sub>1</sub><br>
Hardy<sub>2</sub><br>
Hary<sub>3</sub><br>
John<sub>4</sub><br>
Johny<sub>5</sub><br>
Mary<sub>6</sub><br>
Michael<sub>7</sub><br>
Party<sub>8</sub><br>
Peter<sub>9</sub><br>
William<sub>10</sub><br>
</p>
</body>
</html>
Output:
Q9:
Ans: <html>
<head>
<title>Indented Paragraphs</title>
</head>
<body>
<p> This is the first paragraph. It is indented using the
command. This command is used to add a space between the left margin and the text.</p>
<p> This is the second paragraph. It is also indented using the
command. You can adjust the number of commands to change the level of
indentation.</p>
</body>
</html>
Output:
Q10-a:
Ans: <html>
<head>
<title>Ordered List</title>
</head>
<body>
<h1>Ordered List of Popular Programming Languages</h1>
<ol>
<li>Python</li>
<li>JavaScript</li>
<li>Java</li>
<li>C++</li>
<li>Ruby</li>
</ol>
</body>
</html>
Output:
Q10-b:
Ans: <html>
<head>
<title>Unordered List</title>
</head>
<body>
<h1>Unordered List of Popular Programming Languages</h1>
<ul>
<li>PHP</li>
<li>Swift</li>
<li>Go</li>
<li>Kotlin</li>
<li>TypeScript</li>
</ul>
</body>
</html>
Output:
Q11:
Ans: <html>
<head>
<title>Heading and Horizontal Line</title>
</head>
<body>
<h1>Welcome to HTML Basics</h1>
<hr width="100%">
<p>This is a paragraph of text that relates to the heading above. HTML basics include
understanding how to use headings, horizontal lines, and paragraphs to create structured
content on the web.</p>
</body>
</html>
Output:
Q12:
Ans: <html>
<head>
<title>Preformatted Text</title>
</head>
<body>
<pre>
This is an example of preformatted text.
It will be displayed exactly as it is written,
with all spaces and line breaks preserved.
Here is a poem:
Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.
This text will not be formatted by the browser,
so it will appear exactly as it is written.
</pre>
</body>
</html>
Output:
Q13:
Ans: <html>
<head>
<title>Definition List</title>
</head>
<body>
<h1>Definition List of Programming Terms</h1>
<dl>
<dt>Algorithm</dt>
<dd>A set of instructions used to solve a specific problem or perform a particular
task.</dd>
<dt>Variable</dt>
<dd>A named storage location that holds a value that can be changed during the
execution of a program.</dd>
<dt>Data Type</dt>
<dd>A classification of data that determines the type of value it can hold and the
operations that can be performed on it.</dd>
<dt>Loop</dt>
<dd>A control structure that allows a section of code to be repeated a certain number
of times.</dd>
<dt>Function</dt>
<dd>A block of code that can be called multiple times from different parts of a program,
with or without parameters.</dd>
</dl>
</body>
</html>
Output:
Q14:
Ans: <html>
<head>
<title>Acronyms and Abbreviations</title>
</head>
<body>
<h1>Acronyms and Abbreviations</h1>
<p>HTML - HyperText Markup Language</p>
<br><br>
<p>CSS - Cascading Style Sheets</p>
<br><br>
<p>JS - JavaScript</p>
<br><br>
<p>API - Application Programming Interface</p>
<br><br>
<p>SQL - Structured Query Language</p>
<br><br>
<p>XML - eXtensible Markup Language</p>
<br><br>
<p>JSON - JavaScript Object Notation</p>
<br><br>
<p>PHP - Hypertext Preprocessor</p>
<br><br>
<p>CSV - Comma Separated Values</p>
<br><br>
<p>GUI - Graphical User Interface</p>
</body>
</html>
Output:
Q15:
Ans: <html>
<head>
<title>Links to Search Engines</title>
</head>
<body>
<h1>Links to Search Engines</h1>
<p>Here are some links to popular search engines:</p>
<ul>
<li><a href="[Link] target="_blank">Google</a></li>
<li><a href="[Link] target="_blank">Bing</a></li>
<li><a href="[Link] target="_blank">Yahoo</a></li>
<li><a href="[Link] target="_blank">DuckDuckGo</a></li>
<li><a href="[Link] target="_blank">StartPage</a></li>
<li><a href="[Link] target="_blank">CDAC</a></li>
<li><a href="[Link] target="_blank">Gmail (not a search engine, but
a popular email service)</a></li>
</ul>
<p>Note: Gmail is not a search engine, but a popular email service. I included it in the list
since you mentioned it.</p>
</body>
</html>
Output:
Q16:
Ans: <html>
<head>
<title>Links to Different Pages</title>
</head>
<body>
<h1>Links to Different Pages</h1>
<p>Here are some links to different pages on different websites:</p>
<ul>
<li><a href="[Link]
target="_blank">Wikipedia Main Page</a></li>
<li><a href="[Link] target="_blank">Stack
Overflow Questions</a></li>
<li><a href="[Link] target="_blank">GitHub
Explore</a></li>
<li><a href="[Link] target="_blank">Mozilla
Firefox Download</a></li>
<li><a href="[Link]
target="_blank">OpenStreetMap</a></li>
</ul>
</body>
</html>
Output:
Q17:
Ans: <html>
<head>
<title>Link to Bottom of Page</title>
</head>
<body>
<h1>Link to Bottom of Page</h1>
<p><a href="#bottom">Jump to Bottom of Page</a></p>
<!-- Add some content to make the page long enough to scroll -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor,
vestibulum magna sed, convallis ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor,
vestibulum magna sed, convallis ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor,
vestibulum magna sed, convallis ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor,
vestibulum magna sed, convallis ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor,
vestibulum magna sed, convallis ex.</p>
<!-- Add an anchor at the bottom of the page -->
<a name="bottom"></a>
<h2>Bottom of Page</h2>
</body>
</html>
Output:
Q18:
Ans: <html>
<head>
<title>Image Gallery</title>
<style>
.image-title {
text-align: center;
font-weight: bold;
margin-top: 10px;
}
.image-container {
text-align: center;
margin-bottom: 20px; /* Space between images */
}
</style>
</head>
<body>
<h1>Image Gallery</h1>
<div class="image-container">
<img src="[Link] alt="Image 1" />
<div class="image-title">Title of Image 1</div>
</div>
<br><br>
<div class="image-container">
<img src="[Link] alt="Image 2" />
<div class="image-title">Title of Image 2</div>
</div>
<br><br>
<div class="image-container">
<img src="[Link] alt="Image 3" />
<div class="image-title">Title of Image 3</div>
</div>
<br><br>
<div class="image-container">
<img src="[Link] alt="Image 4" />
<div class="image-title">Title of Image 4</div>
</div>
<br><br>
<div class="image-container">
<img src="[Link] alt="Image 5" />
<div class="image-title">Title of Image 5</div>
</div>
</body>
</html>
Output:
Q19:
Ans: <html>
<head>
<title>Image with Border</title>
<style>
.image-container {
border: 2px solid black;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h1>Image with Border</h1>
<div class="image-container">
<img src="[Link] alt="Image with Border" />
</div>
</body>
</html>
Output:
Q20:
Ans: <html>
<head>
<title>Image Link to Search Engine</title>
</head>
<body>
<h1>Image Link to Search Engine</h1>
<a href="[Link] target="_blank">
<img src="[Link] alt="Search Engine" />
</a>
</body>
</html>
Output:
Q21:
Ans: <html>
<head>
<title>Image Link to Itself</title>
</head>
<body>
<h1>Image Link to Itself</h1>
<a href="[Link]
<img src="[Link] alt="Image Link to Itself" />
</a>
</body>
</html>
Output: