| Headings |
|
1-4 Orientation 1: Headings The following sections show how to set headings. |
1-4 A 1 Discover
|
|
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.
|
|
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-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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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-4 B 1
VegetablesAndFruits
"This page comes in 2 sections. One for vegetables, the other for fruits." |
|
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
At this point you have 2 identical files, named StarfruitJuice03.html and StarfruitJuice04.html.
|
|
This page was created by Hanspeter Amend
|
|
|
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> <h3 style="text-align:center;">Poisenous mushrooms</h3> <h4>Amanita muscaria</h4> <h4>Deadly webcap</h4> <h3 style="text-align:center;">Edible mushrooms</h3> <h4>Brown mushroom</h4> <h4>Shiitake</h4> <h2 style="text-align:center;">Carrots</h2> <h3>Purple carrots</h3> <h3>Yellow carrots</h3> <h3>White carrots</h3> <!-- Fruits section --> <h2 style="text-align:center;">Citrus fruits</h2> <h3>Oranges</h3>
<h3>Yuzu</h3> <h2 style="text-align:center;">Nuts</h2> <h3>Pistacios</h3>
<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>
1-4 A 11 <! Title: Set style attribute for text style. > <! Line break > <! Paragraph > <! Set heading > |
|