Headings


Page sections

1-4 A 1 Discover 1-4 A 2 1-4 A 3 1-4 A 4 Cats 1-4 A 5 Dogs 1-4 A 6 Birds 1-4 A 7 Music 1-4 A 8 Games 1-4 A 9 Your own HTML files 1-4 A 10 Rereading the yellow sections 1-4 A 11 StarfruitJuice04.html 1-4 B 1 VegetablesAndFruits 1-4 B 2 DreamsAndReality 1-4 Definition 1: Heading 1-4 Example 1: The alignment of headings 1-4 Explanation 1: The heading tag pairs 1-4 Explanation 2: The alignment of headings 1-4 Explanation 3: How to write a tag pair - review 1-4 Orientation 1: Headings 1-4 Orientation 2: Turning off Word Wrap in Notepad++ 1-4 Orientation 3: Turning Word Wrap on or off in Notepad++ 1-4 Submit 1: Exercise

Workbook pages

1. Settings. Line breaks and paragraphs.

2. Commenting code and checking your StarfruitJuice files

3. Style Terms

4. Headings

5. Fonts and Colors.

6. Simplified HTML structure. Colors.

7. Ordered and unordered lists

8. More List Styles

9. Font Families and Font Sizes

10. Bold, Italic and Underline

11. Tables. Online HTML Editor.

12. Including images in Tables

13. Visual Studio Code. Table Colors.

14. Table Headings and Heights of Table Rows

15. Table Sizes, Borders and Alignments

16. Rice Files

17. Hyperlinks

18. Further studies

1-4 Definition 1: Heading

Text that defines the title of a section of text is called a heading in HTML.

1-4 Orientation 1: Headings

The following sections show how to set headings.

1-4 A 1 Discover

  1. 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>

  1. 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:

<h1 style="text-align:value;">Text here.</h1>

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:

  1. start by writing two pairs of angle brackets: <><>
  2. add a forward slash to the second pair to create the closing tag: <></>
  3. 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.
  4. place your text within the tag pair: <name letter>Text here</name letter>
  5. if your text is short, write the opening and closing paragraph tags on the same line:
    <p>This is short text</p>
  6. 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.

Hello.

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.

Hello.
Hello.

Hello.

Hello.

Hello.



1-4 A 4 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 5 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 6 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 7 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 8 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 9 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:
  1. in the menu bar, click View
  2. in the View menu, tick Word wrap

1-4 B 1 VegetablesAndFruits

  1. open this file in a browser
  2. copy and paste the text into Notepad++
  3. when saving the file, begin with the name of this exercise, followed by an underscore. For example: VegetablesAndFruits_, then add the exercise number
  4. in Notepad++, apply HTML tags, so that the page, when viewed in a browser, matches the PDF file exactly.
  5. use sizes h1 through h4 for the headings
  6. in your code, include the comments below:

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

Add more comments of your own for extra clarity.


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 10 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 11 StarfruitJuice04.html

  1. within the StarfruitJuiceFiles folder, create a copy of the StarfruitJuice03.html file
  2. 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.

  1. modify StarfruitJuice04.html, so it looks exactly like this.
  2. 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 B 1

<!-- This page comes in 2 sections. One for vegetables, the other for fruits -->

<!-- Vegetables section -->

<h1 style="text-align:center;">Vegetables</h1>
Vegetables are parts of plants that are eaten by humans as food as part of a meal. This meaning is often used: it is applied to plants to mean all edible plant matter, including the flowers, fruits, stems, leaves, roots, and seeds.
<p>Carrots and potatoes are parts of the root of the plants, but since they are eaten by humans, they are vegetables. They are not in the same category as a fruit, nut, herb, spice, or grain.<br>
Tomatoes are often thought of as vegetables, but because they have seeds, they are, botanically, fruits. Vegetables are an important part of people's diet. Vegetables and fruits are sometimes called produce. Vegetables contain vitamins A, B, C, D, minerals and carbohydrates.</p><br>

<h2 style="text-align:center;">Mushrooms</h2>
Mushrooms have been eaten and used as medicine for thousands of years. Traditional and folk medicine practitioners like the bell-shaped vegetable because of their healing and cleansing properties. All varieties of mushrooms are low in calories and fat, and they contain various nutrients and low amounts of fiber.

<h3 style="text-align:center;">Poisenous mushrooms</h3>
<h4>Death cap</h4>
The world's most deadly mushroom, and it's common in England. Death cap is responsible for most fatal mushroom poisonings worldwide. These innocent-looking mushrooms have tinted green caps, white stems and white gills. Ingestion of just half a cap can lead to death.

<h4>Amanita muscaria</h4>
Even very small amounts of these mushrooms can cause severe poisoning. Clinical signs occur after a minimum of 6 hours, and include watery diarrhoea, abdominal pain and vomiting. There is a high risk of life-threatening liver damage within 2 - 3 days.

<h4>Deadly webcap</h4>
A deadly poisonous mushroom. It's rare in the UK, but responsible for several deaths in Europe. People have eaten it after mistaking it for magic mushroom.

<h3 style="text-align:center;">Edible mushrooms</h3>
<h4>Champignon</h4>
Ninety percent of mushrooms eaten are of this variety, and can easily be found at your local grocery store. With less culinary flair than the more exotic-looking mushrooms on the market, the simple button mushroom is anything but boring. This mild-tasting variety is easy to cook and adapts to the flavors of any dish. They can be eaten raw or cooked and are a popular addition to soups, stir-frys, salad, and or topped on pizzas. The easiest way to cook them is to simply saute them with a little oil.

<h4>Brown mushroom</h4>
Brown mushrooms are similar to the white button mushroom, just with darker, firmer, and more flavorful flesh of the white button mushroom. While they have a more intense taste than the champignon, the two mushrooms can be used interchangeably, and both are often widely used in savory and spicy dishes.

<h4>Shiitake</h4>
Shiitake mushrooms are native to East Asia, with 83% of them grown in Japan. In Japanese, shiitake means "oak fungus" where they can be found. They have an umbrella-shaped brown cap. Fresh shiitakes have a light woodsy flavor and aroma, while their dried version has a more intense flavor. You can cook with both fresh and dried shitake, however, the dried ones are more widely used. Shiitake mushrooms are low in calories, while also offering many vitamins, minerals, and health-promoting compounds to protect against inflammation and to help your immune system. They have long been used in traditional Eastern medicine for supporting health and longevity.
<p>Shiitake mushrooms' distinct flavor is a great addition to vegetarian dishes. Often sold dried, they simply need to be soaked in hot water to soften before cooking. Sautee shiitakes with vegetables and serve with a poached egg; add them to pasta dishes or stir-fries; make a flavorful soup, or roast them up for a crispy snack.</p>
<p>Also called: black forest, black winter, brown oak.</p><br>

<h2 style="text-align:center;">Carrots</h2>
Carrots are a root vegetable, typically orange in color, though purple, black, red, white, and yellow ones exist. All of them are domesticated forms of the wild carrot, native to Europe and Southwestern Asia.<br>
The plant probably originated in Persia and was originally cultivated for its leaves and seeds.

<h3>Purple carrots</h3>
Purple carrots make excellent snacks, salads and soups. They are also great as fresh juice.

<h3>Yellow carrots</h3>
Yellow carrots light up a salad or stir fry with their sunny yellow color. They are extra sweet and also have the visual appeal of bright orange and yellow. These carrots are especially great for juicing too. Enjoy their sharp, intense flavor raw, or roast them for an even more intense taste.

<h3>White carrots</h3>
White carrots are very sweet and mild flavored. This variety is decorative, with straight roots averaging 6 to 8 inches in length. White Carrots are typically sweeter than the orange variety and have a mild, natural taste making them perfect for eating raw. Due to their thickness, white carrots can also be cooked whole and be used in many recipes including soups, stews and casseroles.<br>
The white carrot is made entirely of white tissue. This gives them a pure white colour. In comparison to orange carrots, their flavour is smoother.<br><br>

<!-- Fruits section -->
<h1 style="text-align:center;">Fruits</h1>
Fruit and vegetables should be an important part of your daily diet. They are naturally good and contain vitamins and minerals that can help to keep you healthy. They can also help protect against some diseases.
<p>Most people will benefit from eating more fruit and vegetables as part of a well-balanced, healthy diet and an active lifestyle. There are many varieties of fruit and vegetables available and many ways to prepare, cook and serve them.</p>
<p>Fruit are best bought when they are in season. Otherwise try frozen or canned fruits as they are just as nutritious and budget-friendly as well.</p>

<h2 style="text-align:center;">Citrus fruits</h2>
A citrus fruit is a juicy fruit with a sharp taste such as an orange, lemon, or grapefruit.

<h3>Oranges</h3>
The term orange may refer to a number of citrus trees that produces fruit for people to eat. Oranges are a very good source of Vitamin C. Orange juice is an important part of many people's breakfast. The "sweet orange", which is the kind that are most often eaten today, grew first in South and East Asia but now grows in lots of parts of the world.
<p>Oranges are round orange-coloured fruit that grow on a tree which can reach 10 metres high. Orange trees have dark green shiny leaves and small white flowers with five petals. The flowers smell very sweet which attracts many bees.</p>


<h3>Grape fruit</h3>
Grapefruit is a citrus fruit grown in sub-tropical places. It is bigger than an orange and is often more sour, but many types of grapefruit have other flavors.
<p>The tree which the grapefruit grows on is normally 5-6 meters tall but can reach up to 15 meters tall. It has dark green leaves that measure up to 150mm and has white flowers that grow 5cm in length. The fruit itself can grow 10-15cm in diameter.
In 2007, there were about 5,061,023 tons of grapefruits made worldwide, most of the tons coming from the U.S. There are many different kinds of grapefruits with different color pulp. The most popular colors are red, white and pink.
There are also a wide range of flavors grapefruits have, from highly acidic and bitter to sweet.
</p>

<h3>Yuzu</h3>
The yuzu is a citrus fruit and plant. It originated in East Asia. The fruit looks like a rough small and yellow grapefruit, and changes colour from green to yellow when it becomes more ripe.
<p>The yuzu is often used in Japanese and Korean cuisine. It appears much like a lemon but tastes more like a floral lime.</p><br>

<h2 style="text-align:center;">Nuts</h2>
<h3>Almonds</h3>
Almonds are incredibly popular due to their flavor, impressive nutrient profile, and relatively cheap cost. You can eat them raw or roasted, and they're often made into almond butter, almond flour, and almond milk.

<h3>Pistacios</h3>
Pistachios have been eaten since 6,000 years ago.


<p>These nuts are have a lot of nutrients but are lower in calories and fat than many other nuts.</p>

<p>Pistachios are a good source of numerous nutrients, including vitamin B6, which your body needs for its immune function.</p>

<p>Additionally, these nuts are rich in plant compounds.</p>

<p>In a 4-month study including 100 people with overweight, one group ate 42 grams of pistachios per day and underwent a weight loss program, while the other group only participated in the weight loss program.</p>

<p>The groups lost similar amounts of weight, but the pistachio group experienced significant reductions in blood pressure and significant increases in blood antioxidant levels.</p>


<h3>Cashew nuts</h3>
These nuts are a good source of several nutrients that are essential to bone health, including protein, vitamin K, magnesium, and manganese.
<p>A review of five studies found that eating cashews led to significant reductions in blood pressure.</p>


<h3>Peanuts</h3>
Peanuts are a rich source of plant protein, which can help you feel full.

 

1-4 A 11

<!– – 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