Objective
Given a Google Docs document, try reproducing it using HTML.
Description
Working in word processor software is pretty common; almost every student has done it once in a lifetime. Word processor software is used to produce documents.
There are many word processor software available today, some free and available on the cloud, some open-source, and some paid. For now, we're concerned with Google Docs which is a free, cloud-based word processor application.
Ali, who's trying to learn the very basics of Google Docs, has the following content in his document:
There's a heading (the main heading) followed by two paragraphs of text. Pretty simple.
The paragraphs have been configured to be distanced by 10 pts (a measurement unit).
Essentially, any piece of text that's typed in Google Docs without manually configuring it to be something else (e.g. a heading, a subheading, etc.) is considered to be a paragraph. Pressing Enter starts a new paragraph, whereas pressing Shift + Enter takes us to a new line in the same paragraphs.
The two paragraphs of text in Ali's document are highlighted as follows:
Notice the two separate lines of text in the first paragraph. These aren't two different paragraphs but rather two lines in the same paragraph.
In this exercise, your task is to take this document of Ali and reproduce it using HTML.
Note that the HTML document's title (the one that appears in the browser tab) must be the same as the main heading in Ali's document.
In the end, the HTML document that you produce should look as follows:
Hints
Hint 1
Leverage the <br> element inside the first <p> element.
New file
Inside the directory you created for this course on HTML, create a new folder called Exercise-3-Two-Paragraphs and put the .html solution files for this exercise within it.
Solution
The exercise is extremely simple to solve. We just need the following elements: <title>, <h1>, <p> and <br>. That's it!
Let's start off with the document's title:
<!DOCTYPE html>
<html>
<head>
<title>Learning Google Docs</title>
</head>
<body>
</body>
<html>Now, over to the main heading, given using <h1>:
<!DOCTYPE html>
<html>
<head>
<title>Learning Google Docs</title>
</head>
<body>
<h1>Learning Google Docs</h1>
</body>
<html>To end with, let's add the two paragraphs of text:
<!DOCTYPE html>
<html>
<head>
<title>Learning Google Docs</title>
</head>
<body>
<h1>Learning Google Docs</h1>
<p>Written by: Ali<br>Date: 28/10/23</p>
<p>This is a small piece of text.</p>
</body>
<html>Notice the usage of <br> in the first paragraph to add a newline character right after the first line of text.
<h1> element in the source code above is completely optional; we've done so for the sake of readability, keeping the main heading separate from the paragraphs.And this completes this exercise.
