Print the squares of the numbers 1 – 20. Each number should be on a separate line, next to it the number 2 superscripted, an equal sign and the result. (Example: 102 = 100)
<!DOCTYPE html>
<html>
<head>
<title>Squares 1 to 20</title>
</head>
<body>
<!– Each number with superscript 2 and its result –>
<p>1<sup>2</sup> = 1</p>
<p>2<sup>2</sup> = 4</p>
<p>3<sup>2</sup> = 9</p>
<p>4<sup>2</sup> = 16</p>
<p>5<sup>2</sup> = 25</p>
<p>6<sup>2</sup> = 36</p>
<p>7<sup>2</sup> = 49</p>
<p>8<sup>2</sup> = 64</p>
<p>9<sup>2</sup> = 81</p>
<p>10<sup>2</sup> = 100</p>
<p>11<sup>2</sup> = 121</p>
<p>12<sup>2</sup> = 144</p>
<p>13<sup>2</sup> = 169</p>
<p>14<sup>2</sup> = 196</p>
<p>15<sup>2</sup> = 225</p>
<p>16<sup>2</sup> = 256</p>
<p>17<sup>2</sup> = 289</p>
<p>18<sup>2</sup> = 324</p>
<p>19<sup>2</sup> = 361</p>
<p>20<sup>2</sup> = 400</p>
</body>
</html>
Prints 10 names with a line break between each name. The list should be alphabetized, and to do this place a subscripted number next to each name based on where it will go in the alphabetized list. (Example: Alan1). Print first, the unalphabetized list with a subscript number next to each name, then the alphabetized list. Both lists should have an <h1> level heading.
<!DOCTYPE html>
<html>
<head>
<title>Names List</title>
</head>
<body>
<!– Unalphabetized list –>
<h1>Unalphabetized List</h1>
<p>Maynard<sub>3</sub></p>
<p>JohnRick<sub>2</sub></p>
<p>Alexis<sub>1</sub></p>
<p>Pedot<sub>5</sub></p>
<p>Burlasoy<sub>4</sub></p>
<!– Alphabetized list –>
<h1>Alphabetized List</h1>
<p>Alexis<sub>1</sub></p>
<p>JohnRick<sub>2</sub></p>
<p>Maynard<sub>3</sub></p>
<p>Burlasoy<sub>4</sub></p>
<p>Pedot<sub>5</sub></p>
</body>
</html>
Print two paragraphs that are both indented using the command.
<!DOCTYPE html>
<html>
<head>
<title>Indented Paragraphs</title>
</head>
<body>
<!– First indented paragraph –>
<p> This is the first indented paragraph. Dota 2 is a popular online multiplayer game developed by Valve where two teams of five players compete to destroy the enemy’s Ancient. Each player controls a unique hero with special abilities and roles, such as support, carry, or tank. The game requires teamwork, strategy, and quick decision-making to win. Known for its intense matches and competitive esports scene, Dota 2 is enjoyed by millions of players around the world.</p>
<!– Second indented paragraph –>
<p> This is the second indented paragraph. Dota 2 is a strategy-based battle arena game where players choose from over a hundred heroes, each with different skills and playstyles. The main goal is to work with your team to defeat opponents by pushing lanes, destroying towers, and controlling the map. Success in Dota 2 depends on good coordination, smart item choices, and understanding hero strengths and weaknesses. It is well known for having deep gameplay and exciting competitive tournaments.</p>
</body>
</html>
Print two lists with any information you want. One list should be an ordered list, the other list should be an unordered list.
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<!– Ordered list –>
<ol>
<li>Wake up</li>
<li>Eat breakfast</li>
<li>Go to school</li>
</ol>
<!– Unordered list –>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
</body>
</html>
Prints an h1 level heading followed by a horizontal line whose width is 100%. Below the horizontal line print a paragraph relating to the text in the heading.
<!DOCTYPE html>
<html>
<head>
<title>Heading and Line</title>
</head>
<body>
<!– Main heading –>
<h1>My Favorite Hobby</h1>
<!– Horizontal line –>
<hr width=”100%”>
<!– Paragraph related to heading –>
<p>My favorite hobby is playing Dota 2 because it helps me relax.</p>
</body>
</html>
Print some preformatted text of your choosing. (hint: use the <pre> tag)
<!DOCTYPE html>
<html>
<head>
<title>Preformatted Text</title>
</head>
<body>
<!– Preformatted text –>
<pre>
Name: Maynard R. Talinda
Age: 21
Course: IT
</pre>
</body>
</html>
Print a long quote and a short quote. Cite the author of each quote.
<!DOCTYPE html>
<html>
<head>
<title>Quotes</title>
</head>
<body>
<!– Long quote –>
<blockquote>
” You’d have done better to clothe yourself in knowledge, for all the good your scraps of armor did you.”
– Invoker
</blockquote>
<!– Short quote –>
<q>Words of power.</q> – Invoker
</body>
</html>
Print some deleted and inserted text of your choosing.
<!DOCTYPE html>
<html>
<head>
<title>Deleted and Inserted</title>
</head>
<body>
<!– Deleted and inserted text –>
<p>This is <del>wrong</del> <ins>correct</ins> text.</p>
</body>
</html>
Print a definition list with 5 items.
<!DOCTYPE html>
<html>
<head>
<title>Definition List</title>
</head>
<body>
<!– Definition list –>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>CPU</dt>
<dd>Central Processing Unit</dd>
<dt>RAM</dt>
<dd>Random Access Memory</dd>
<dt>URL</dt>
<dd>Uniform Resource Locator</dd>
</dl>
</body>
</html>
Print two addresses in the same format used on the front of envelopes (senders address in top left corner, receivers address in the center).
<!DOCTYPE html>
<html>
<head>
<title>Addresses</title>
</head>
<body>
<!– Sender’s address (top left) –>
<p>
Maynard R. Talinda<br>
P-4, Pag-antayan<br>
Cantilan, Surigao del Sur, Philippines
</p>
<br><br><br>
<!– Receiver’s address (center) –>
<center>
Raffred Francis O. Guazon<br>
456 Rizal Ave.<br>
Cebu City, Philippines
</center>
</body>
</html>
Print ten acronyms and abbreviations of your choosing, each separated by two lines. Specify the data that the abbreviations and acronyms represent.
<!DOCTYPE html>
<html>
<head>
<title>Acronyms</title>
</head>
<body>
<!– Each acronym separated by two lines –>
<p>HTML – HyperText Markup Language</p><br><br>
<p>CSS – Cascading Style Sheets</p><br><br>
<p>CPU – Central Processing Unit</p><br><br>
<p>RAM – Random Access Memory</p><br><br>
<p>USB – Universal Serial Bus</p><br><br>
<p>LAN – Local Area Network</p><br><br>
<p>WAN – Wide Area Network</p><br><br>
<p>URL – Uniform Resource Locator</p><br><br>
<p>HTTP – HyperText Transfer Protocol</p><br><br>
<p>AI – Artificial Intelligence</p>
</body>
</html>