HTML - basic - Lesson nr. 3
Structuring the text
In an html document the text appears without structure, continuously. To be able to later format and structure the text we can define titles and paragraphs.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - define titles of different sizes and levels, the h is abbreviation for header. The text enclosed in these tags appears in a separate row.
<br> - line break. Where this tag appears the text switches to a new line, without beginning a new paragraph.
This tag needs no closing.
<p> </p> - paragraph, abbreviation for paragraph. The text enclosed in this tags is separated visibly as a distinct part.
The difference between the line break and paragraph is that, the <p> tag has a closing part, the line break does not. The text in a paragraph is marked and identifiable so we can format it. The line break has no closing tag, so it does not mark a part of the text, it simply marks the place where a new line begins.
Exercises
1. In the index.html file mark the text Coders Work as the highest level header, then put the rest of the text in a paragraph.
View the result
2. Copy the following text to the index.html after the paragraph:
After finishing my studies, as a sociologist, I was eager to find out how youth is coping with getting a decent job for fulfilling their lives. The result of my research showed that the IT sector is the most popular, yet most unreachable for people with limited educational possibilities.
Together with a couple of friends who work as programmers, we decided to draw up a course – Coders Work - in which those interested can find out, about the basics of programming, ex: how to make a website, how to use JavaScript, CSS and HTML, and more.
Observe that the text appears continuously, the browser does not react to our enters. The header we marked previously remains in a separate row.
View the result
After finishing my studies, as a sociologist, I was eager to find out how youth is coping with getting a decent job for fulfilling their lives. The result of my research showed that the IT sector is the most popular, yet most unreachable for people with limited educational possibilities.
Together with a couple of friends who work as programmers, we decided to draw up a course – Coders Work - in which those interested can find out, about the basics of programming, ex: how to make a website, how to use JavaScript, CSS and HTML, and more.
Observe that the text appears continuously, the browser does not react to our enters. The header we marked previously remains in a separate row.
3. Put the text copied previously into 2 paragraphs. As you see, both begin in new rows.
View the result
4. Insert a line break after the first sentence of the second paragraph and observe, that it begins in a new row in the browser.
View the result
Questionnaire
1. If an html document contains the following rows:
<h4>Opera</h4>
<h5>Chrome</h5>
<h1>Firefox</h1>
Which header is bigger/has the highest level?
<h4>Opera</h4>
<h5>Chrome</h5>
<h1>Firefox</h1>
Which header is bigger/has the highest level?
2. An html document contains the following line:
<h1>Hobbies</h1><p>designing</p><p>painting, <br> drawing</p> writing
How many rows appear in the browser?
<h1>Hobbies</h1><p>designing</p><p>painting, <br> drawing</p> writing
How many rows appear in the browser?
3. If we want to insert a longer text in a webpage, which procedure is the best to give structure to the text?
Supplementary information
You can try more
Paragraphs here https://www.w3schools.com/html/html_paragraphs.asp
Headers here: https://www.w3schools.com/html/html_headings.asp
1. Log in to the codepen.io webpage, copy the text from below:
My social Life
Having an evening out with friends;
Chating with friends who are abroad;
Going out to nature;
Watching movies;
The first row should be third level header.
Using line breaks resolve that the text appeared in five rows.
2. Copy the text again, but this time use paragraph to get the text in five lines.
Paragraphs here https://www.w3schools.com/html/html_paragraphs.asp
Headers here: https://www.w3schools.com/html/html_headings.asp
1. Log in to the codepen.io webpage, copy the text from below:
My social Life
Having an evening out with friends;
Chating with friends who are abroad;
Going out to nature;
Watching movies;
The first row should be third level header.
Using line breaks resolve that the text appeared in five rows.
2. Copy the text again, but this time use paragraph to get the text in five lines.
