Headings

1-4 A 1 Discover

In the Exercises01 folder, create an HTML file with these lines of code:

<h6>Hello.</h6>
<h5>Hello.</h5>
<h4>Hello.</h4>
<h3>Hello.</h3>
<h2>Hello.</h2>
<h1>Hello.</h1>

Open this file in a browser and explain what the <h1></h1> till <h6></h6> tags do:

1-4 Explanation 1: The heading tag pairs

There are 6 types of heading tag pairs: <h1></h1> to <h6></h6>. They can be used for displaying titles in various sizes.

Heading tag pair	HTML version

<h1>Title.</h1>	Title.
<h2>Title.</h2>	Title.
<h3>Title.</h3>	Title.
<h4>Title.</h4>	Title.
<h5>Title.</h5>	Title.
<h6>Title.</h6>	Title.

1-4 Example 1: The alignment of headings

The alignment of the text in the element below is defined by the center value of the text-align property in the opening tag of the heading tag pair.

In a browser, this element:

<h5 style="text-align:center;">This text is in the middle.</h5>

will display the text like this:

This text is in the middle.

1-4 Explanation 2: The alignment of headings

The alignment of text is defined by the value of the text-align property in the style attribute of the opening heading tag.

For heading 1, the element looks like this:

If this style is not set, then the text-align property will default to left.

1-4 Explanation 3: How to write a tag pair - review

Remember to follow these steps to write a tag pair:

start by writing two pairs of angle brackets: <><>
add a forward slash to the second pair to create the closing tag: <></>
insert the name of the tag pair into both the opening and closing tags: <name letter></name letter>.
While some tag names consist of several characters, for most cases, use a single letter to represent the tag name. Remember to place the forward slash in the closing tag.
place your text within the tag pair: <name letter>Text here</name letter>
if your text is short, write the opening and closing paragraph tags on the same line:
<p>This is short text</p>
if your text is long, place the opening and closing paragraph tags on separate lines, with the long text between them:
<p>
This is an extended piece of text that provides more detailed information.
</p>

Remember to always write the tag pair first, and then insert your text between the tags.

1-4 A 2

Referring to the previous explanation Headings tag pairs, estimate the tag pairs required to create an HTML file that shows the word Hello in the sizes shown in these lines:

Hello.

Then create an HTML file that displays the above lines, applying the previous explanation on how to write a tag pair.

1-4 A 3

Create an HTML file that shows these lines:

Hello.

1-4 A 4 Drinks and Snacks

open this file in a browser
copy and paste the text into Notepad++
when you save the file, start with the name of this exercise, then add an underscore, like this: DrinksAndSnacks_, and finish with the exercise number
in Notepad++, apply tags, so the text, when viewed in a browser, appears exactly like the one you opened previously
use sizes h1 - h2 for the headings
in your code, include the comments below. Add more of your own for extra clarity:

"This page comes in 2 sections. One for drinks, the other for snacks."
"Drinks section"
"Snacks section"

1-4 A 5 Cats

1. Within the Exercises01 folder, create a copy of the commented cats file you have created for an exercise on the second page.
2. Rename the copy of the commented cats file with the exercise number, removing any blank spaces.

At this point, you have two identical files: the original cats file and the renamed cats file.

3. Using heading tag pairs, apply titles and subtitles to the texts of the renamed cats file. If necessary, add additional text.
4. Save the modified file.

1-4 A 6 Dogs

1. Within the Exercises01 folder, create a copy of the commented dogs file you have created for an exercise on the second page.
2. Rename the copy of the commented dogs file with the exercise number, removing any blank spaces.

At this point, you have two identical files: the original dogs file and the renamed dogs file.

3. Using heading tag pairs, apply titles and subtitles to the texts of the renamed dogs file. If necessary, add additional text.
4. Save the modified file.

1-4 A 7 Birds

1. Within the Exercises01 folder, create a copy of the commented birds file you have created for an exercise on the second page.
2. Rename the copy of the commented birds file with the exercise number, removing any blank spaces.

At this point, you have two identical files: the original birds file and the renamed birds file.

3. Using heading tag pairs, apply titles and subtitles to the texts of the renamed birds file. If necessary, add additional text.
4. Save the modified file.

1-4 A 8 Music

1. Within the Exercises01 folder, create a copy of the commented music file you have created for an exercise on the second page.
2. Rename the copy of the commented music file with the exercise number, removing any blank spaces.

At this point, you have two identical files: the original music file and the renamed music file.

3. Using heading tag pairs, apply titles and subtitles to the texts of the renamed music file. If necessary, add additional text.
4. Save the modified file.

1-4 A 9 Games

1. Within the Exercises01 folder, create a copy of the commented games file you have created for an exercise on the second page.
2. Rename the copy of the commented games file with the exercise number, removing any blank spaces.

At this point, you have two identical files: the original games file and the renamed games file.

3. Using heading tag pairs, apply titles and subtitles to the texts of the renamed games file. If necessary, add additional text.
4. Save the modified file.

1-4 A 10 Your own HTML files

Within the Exercises01 folder, create your own HTML file with headings, subheadings and texts.

1-4 Orientation 2: Turning off Word Wrap in Notepad++

The following exercise requires you to work with a long text in Notepad++. To make it easier to read, adjust the text display in Notepad++ by applying the following steps:

in the menu bar, click View
in the View menu, tick Word wrap

1-4 B 1 VegetablesAndFruits

open this file in a browser
copy and paste the text into Notepad++
when you save the file, start with the name of this exercise, then add an underscore, like this: VegetablesAndFruits_, and finish with the exercise number
in Notepad++, apply tags, so the text, when viewed in a browser, appears exactly like the one you opened previously
use sizes h1 - h4 for the headings
in your code, include the comments below. Add more of your own for extra clarity:

"This page comes in 2 sections. One for vegetables, the other for fruits."
"Vegetables section"
"Fruits section"

1-4 Orientation 3: Turning Word Wrap on or off in Notepad++

For the following exercises, you can choose to either leave Word Wrap turned off in Notepad++ or turn it back on.

1-4 B 2 DreamsAndReality

For the previous exercise you created an HTML document with 2 main titles: Vegetables and Fruits, together with several subtitles.
In this exercise, create another HTML document with 2 main titles and several subtitles. But this time the two main titles are: Dreams and Reality. For each of the two main titles, create several subtitles with texts of your own. Use all types of tags and tag pairs you have learned so far. Make sure the text looks organized and well structured, so people can understand and enjoy reading it. When saving the file, remember to add the name of this exercise to the beginning of its number, followed by an underscore: DreamsAndReality_.

1-4 A 11 Rereading the yellow sections

Now that you have gone through the exercises on this page, reread the yellow sections of the previous page and of this page.

1-4 Submit 1: Exercise

Click here.

1-4 A 12 StarfruitJuice04.html

within the StarfruitJuiceFiles folder, create a copy of the StarfruitJuice03.html file
rename the copy of the StarfruitJuice03.html file to StarfruitJuice04.html

At this point you have 2 identical files, named StarfruitJuice03.html and StarfruitJuice04.html.

modify StarfruitJuice04.html, so it looks exactly like this.
save StarfruitJuice04.html

This page was created by Hanspeter Amend

Previous page Table of contents

Solution proposals

1-4 A 2

<h2>Hello.</h2>
<h3 style="text-align:center;">Hello.</h3>
<h4 style="text-align:right;">Hello.</h4>

1-4 A 3

<h4>Hello.</h4>
Hello.
<h6 style="text-align:center;">Hello.</h6>
<h4 style="text-align:right;">Hello.</h4>
<h2>Hello.</h2>
<h1 style="text-align:center;">Hello.</h1>

1-4 A 4

<h1 style="text-align:center;">Drinks</h1>

Drinks are liquids that people consume to stay hydrated and refreshed. They can be enjoyed hot or cold and are an important part of daily life. Some drinks provide nutrients and energy, while others are mainly consumed for taste and enjoyment.

<h2>Water</h2>
Water is the most important drink for the human body. It helps regulate body temperature, supports digestion, and keeps the body hydrated. Drinking enough water every day is essential for good health.

<h2>Juices</h2>
Juices are drinks made from pressed fruits or other natural sources. They are often rich in vitamins and minerals and can be consumed fresh, bottled, or diluted with water. Some juices contain natural sugars and should be enjoyed in moderation.
<br><br>

<h1 style="text-align:center;">Snacks</h1>

Snacks are small portions of food eaten between main meals. They provide quick energy and help reduce hunger during the day. Snacks can be sweet or savory and may be enjoyed at home, at school, or on the go.

<h2>Sweet snacks</h2>
Sweet snacks include items that contain sugar or natural sweetness. They are often eaten for enjoyment and quick energy. Examples include biscuits, bars, and other small treats.

<h2>Spicy snacks</h2>
Spicy snacks are usually salty rather than sweet. They are popular as
light food options and are often eaten during breaks or social activities.

1-4 B 1

1-4 A 12

<!– – Title: Set style attribute for text style. – –>
<h1 style= "text-align:center;">About the Star Fruit</h1>

<!– – Line break – –>
The starfruit, also called carambola, is a sweet and sour fruit that is in the shape of a five-point star.<br>
The skin is edible and the flesh has a mild, sour flavor that makes it popular in a number of dishes.

<!– – Paragraph – –>
<p>The starfruit is yellow or green in color. It comes in two main types: a smaller, sour variety and a larger, sweeter one.</p>

<!– – Set heading – –>
<h1>Starfruit Juice Recipe</h1>

This page was created by Hanspeter Amend

Previous page Table of contents

Page sections

Workbook pages

Title.

Title.

Title.

Title.

Title.

Title.

This text is in the middle.

Hello.

Hello.

Hello.

Hello.

Hello.

Hello.

Hello.

Hello.