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)
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 level heading.
Print two paragraphs that are both indented using the command.
Print two lists with any information you want. One list should be an ordered list, the other list should be an unordered list.
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.
Print some preformatted text of your choosing. (hint: use the <pre> tag).
Print a long quote and a short quote. Cite the author of each quote.
Print some deleted and inserted text of your choosing.
Print a definition list with 5 items.
Print two addresses in the same format used on the front of envelopes (senders address in top left corner, receivers address in the center).
Print ten acronyms and abbreviations of your choosing, each separated by two lines. Specify the data that the abbreviations and acronyms represent.
Answers:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Activity no.3</title>
</head>
<body>
<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>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Activity no.3</title>
</head>
<body>
<h3>Unalphabetized List</h3>
Henry<sub>8</sub><br>
Andry<sub>1</sub><br>
Jack<sub>10</sub><br>
Brian<sub>2</sub><br>
George<sub>7</sub><br>
Ethan<sub>5</sub><br>
Dave<sub>4</sub><br>
Isaac<sub>9</sub><br>
Charvy<sub>3</sub><br>
Frank<sub>6</sub><br>
<h3>Alphabetized List</h3>
Andry<sub>1</sub><br>
Brian<sub>2</sub><br>
Charvy<sub>3</sub><br>
Dave<sub>4</sub><br>
Ethan<sub>5</sub><br>
Frank<sub>6</sub><br>
George<sub>7</sub><br>
Henry<sub>8</sub><br>
Isaac<sub>9</sub><br>
Jack<sub>10</sub><br>
</body>
</html>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Activity no.3</title>
</head>
<body>
<p>
This is the first paragraph. It is indented using
non-breaking spaces at the beginning of the paragraph. This method is
commonly used in basic HTML exercises.
</p>
<p>
This is the second paragraph. It is also indented
using the command, creating space before the text starts on the line.
</p>
</body>
</html>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Activity no.3</title>
</head>
<body>
<h2>My Favorite Movies (Ordered List)</h2>
<ol>
<li>Spider Man</li>
<li>Iron Man</li>
<li>Interstellar</li>
<li>Thor</li>
<li>Parasite</li>
</ol>
<h2>My Favorite Snacks (Unordered List)</h2>
<ul>
<li>Chips</li>
<li>Popcorn</li>
<li>Chocolate</li>
<li>Fruit</li>
<li>Cookies</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Activity no.3</title>
</head>
<body>
<h1>My Favorite Movie: John Wick</h1>
<hr width=”100%”>
<p>
This action movie is an adrenaline pumping action film that showcases incredible
fight choreography and intense stunts. The story follows a legendary hitman
seeking vengeance, delivering a mix of suspense, drama, and action.
It is a perfect movie for fans of thrilling sequences and dynamic storytelling.
</p>
</body>
</html>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Activity no.3</title>
</head>
<body>
<h1>My Preformatted Text</h1>
<pre>
Success is not final,
failure is not fatal,
it is the courage,
to continue that counts.
/\_/\
( o.o )
> ^ <
</pre>
</body>
</html>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Activity no.3</title>
</head>
<body>
<h1>Long Quote & Short Quote</h1>
<pre>
“Don’t sit down and wait for the opportunities to come. Get up and make them.”
— Madam C.J. Walker
</pre>
<pre>
“Dream big, work hard.”
— Vedantu
</pre>
</body>
</html>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Activity no.3</title>
</head>
<body>
<h1>Deleted and Inserted Text</h1>
<p>
I watch Thor and it was
<del>boring</del>
<ins>amazing</ins>.
</p>
<p>
This website was last updated in
<del>2015</del>
<ins>2026</ins>.
</p>
</body>
</html>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Activity no.3</title>
</head>
<body>
<h1>Web Development Terms</h1>
<dl>
<dt>HTML</dt>
<dd>The standard markup language used to structure web pages.</dd>
<dt>CSS</dt>
<dd>A stylesheet language used to control the appearance of web content.</dd>
<dt>JavaScript</dt>
<dd>A programming language that adds interactivity to websites.</dd>
<dt>Browser</dt>
<dd>A software application used to access and view web pages.</dd>
<dt>Server</dt>
<dd>A computer that stores and delivers web content to users.</dd>
</dl>
</body>
</html>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Activity no.3</title>
<style>
body {
position: relative;
height: 100vh;
font-family: Arial, sans-serif;
}
.sender {
position: absolute;
top: 20px;
left: 20px;
}
.receiver {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
address {
font-style: normal;
line-height: 1.5;
}
</style>
</head>
<body>
<address class=”sender”>
Yamyam<br>
P-4<br>
Pagantayan
</address>
<address class=”receiver”>
Mike<br>
P-3<br>
Linintian
</address>
</body>
</html>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Activity no.3</title>
</head>
<body>
<h1>Acronyms & Abbreviations</h1>
<p>
<abbr title=”HyperText Markup Language”>HTML</abbr> — HyperText Markup Language
</p>
<p>
<abbr title=”Cascading Style Sheets”>CSS</abbr> — Cascading Style Sheets
</p>
<p>
<abbr title=”JavaScript”>JS</abbr> — JavaScript
</p>
<p>
<abbr title=”Application Programming Interface”>API</abbr> — Application Programming Interface
</p>
<p>
<abbr title=”Uniform Resource Locator”>URL</abbr> — Uniform Resource Locator
</p>
<p>
<abbr title=”Structured Query Language”>SQL</abbr> — Structured Query Language
</p>
<p>
<abbr title=”Central Processing Unit”>CPU</abbr> — Central Processing Unit
</p>
<p>
<abbr title=”Random Access Memory”>RAM</abbr> — Random Access Memory
</p>
<p>
<abbr title=”Operating System”>OS</abbr> — Operating System
</p>
<p>
<abbr title=”World Wide Web”>WWW</abbr> — World Wide Web
</p>
</body>
</html>