Objective
Given an HTML document, try producing a similar document by observing it.
Description
You might've heard of the famous Pythagorean Theorem from your old days in school.
The Pythagorean Theorem simply states a method to calculate the largest side of a right-angled triangle based on the lengths of the other two sides.
In the following HTML document, we have a simple discussion on it:
For this exercise, your task is to produce a similar HTML document as the one shown above.
The tool you have at your disposal is purely observation.
That is, try observing the minute details in the HTML document (such as the document's title, whether text is bold or italicized, headings, etc.) and then draft a document yourself that looks exactly the same as it.
You can obviously copy all the text where necessary, but that text should appear exactly how it appears in the HTML document.
For this, note that wherever the text is formatted as bold or italicized (or both), you MUST NOT use semantic HTML elements to mark it up; just stick to normal formatting elements that carry no semantic significance.
Hints
Hint 1
As per the exercise's requirement of not using semantic elements to mark up bold or italicized text, use <b> instead of <strong> for making text bold, and <i> instead of <em> for making text italicized.
Hint 2
To represent the exponents in the formula (i.e the superscript number 2), use the <sup> element.
New file
Inside the directory you created for this course on HTML, create a new folder called Exercise-2-Pythagorean-Theorem and put the .html solution files for this exercise within it.
Solution
Let's start by laying out the boilerplate HTML structure and then fill in the given details:
<!DOCTYPE html>
<html>
<head>
<!--Head content-->
</head>
<body>
<!--Body content-->
</body>
<html>First things first, as we notice that the document's title in the browser window is 'Pythagorean Theorem', we start off by adding a <title>:
<!DOCTYPE html>
<html>
<head>
<title>Pythagorean Theorem</title>
</head>
<body>
<!--Body content-->
</body>
<html>Now getting into the document's content, it begins with a large heading, which would obviously be <h1>, followed by another, this time smaller, heading, which should most probably be <h2>.
Let's put these two headings in our HTML as well:
<!DOCTYPE html>
<html>
<head>
<title>Pythagorean Theorem</title>
</head>
<body>
<h1>Pythagorean Theorem</h1>
<h2>A geometric harmony</h2>
</body>
<html>Moving on, the following text block goes well with the choice of a <p> element, since it just denotes a paragraph.
In the text, the phrase 'Pythagorean Theorem' is formatted bold and italicized while the word 'hypotenuse' is formatted italicized only. Henceforth, we'll use the <b>-with-<i> and <i> to wrap these two, respectively.
So far, we get the following:
<!DOCTYPE html>
<html>
<head>
<title>Pythagorean Theorem</title>
</head>
<body>
<h1>Pythagorean Theorem</h1>
<h2>A geometric harmony</h2>
<p>The <b><i>Pythagorean Theorem</i></b> is a fundamental principle in geometry. It states that in a right-angled triangle, the square of the length of the <i>hypotenuse</i> (the side opposite the right angle) is equal to the sum of the squares of the lengths of the other two sides. Mathematically, it can be expressed as:</p>
</body>
<html>Up next, we'll use another <p> element for the formula text, with additionally wrapping up the text inside <b> element since it's formatted bold.
Also, since there are exponents (i.e. the number 2) at the top of each variable, we'll use the <sup> element to denote them as superscripts.
<!DOCTYPE html>
<html>
<head>
<title>Pythagorean Theorem</title>
</head>
<body>
<h1>Pythagorean Theorem</h1>
<h2>A geometric harmony</h2>
<p>The <b><i>Pythagorean Theorem</i></b> is a fundamental principle in geometry. It states that in a right-angled triangle, the square of the length of the <i>hypotenuse</i> (the side opposite the right angle) is equal to the sum of the squares of the lengths of the other two sides. Mathematically, it can be expressed as:</p>
<p><b>c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup></b></p>
</body>
<html>With this done, the following text block also goes with another <p>, with each of the three variables being wrapped up using <b> (since they are formatted bold).
<!DOCTYPE html>
<html>
<head>
<title>Pythagorean Theorem</title>
</head>
<body>
<h1>Pythagorean Theorem</h1>
<h2>A geometric harmony</h2>
<p>The <b><i>Pythagorean Theorem</i></b> is a fundamental principle in geometry. It states that in a right-angled triangle, the square of the length of the <i>hypotenuse</i> (the side opposite the right angle) is equal to the sum of the squares of the lengths of the other two sides. Mathematically, it can be expressed as:</p>
<p><b>c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup></b></p>
<p>Here, <b>c</b> represents the length of the hypotenuse, while <b>a</b> and <b>b</b> are the lengths of the other two sides.</p>
</body>
<html>The last thing left is the last text block, which goes with...you guessed it...another <p> element, where we need to format the word 'Pythagoras' as bold.
Isn't this getting easier?
Here's our final code.
<!DOCTYPE html>
<html>
<head>
<title>Pythagorean Theorem</title>
</head>
<body>
<h1>Pythagorean Theorem</h1>
<h2>A geometric harmony</h2>
<p>The <b><i>Pythagorean Theorem</i></b> is a fundamental principle in geometry. It states that in a right-angled triangle, the square of the length of the <i>hypotenuse</i> (the side opposite the right angle) is equal to the sum of the squares of the lengths of the other two sides. Mathematically, it can be expressed as:</p>
<p><b>c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup></b></p>
<p>Here, <b>c</b> represents the length of the hypotenuse, while <b>a</b> and <b>b</b> are the lengths of the other two sides.</p>
<p>This theorem is named after the ancient Greek mathematician <b>Pythagoras</b>, who made significant contributions to the field of mathematics.</p>
</body>
<html>And this marks the completion of this exercise.
