In this example, This is a little text. is written within the body tag pair of an HTML page. The text will be displayed when the page is opened in a browser:

<html>

<body>
This is a little text.
</body>

</html>

1-6 Orientation 2: Including the HTML and body tag pairs

To keep introductory explanations simple, the HTML and body tag pairs were omitted so far. But from now on they must be included in each HTML document.

1-6 Explanation 6: Simplified structure to build a new HTML document

When you build a new HTML document, it is crucial to first start with this structure:

<html>

<body>

</body>

</html>

You should only begin writing code inside the body tags after you have completely written the simplified HTML structure.

1-6 A 1

When building a new HTML page...

	Yes	No
start with this structure: <html> <body> Code here
start with your code and then add this structure later: <html> <body> </body> </html>
start with this structure: <html> </html>
start with this structure: <html> <body> </body> </html>

1-6 Orientation 3: Summary of initial steps to build a new HTML file

The following section lists previous sections on how to build a new HTML file. Re-read:

page 2: Comment with exercise number
page 6: Simplified structure for creating a new HTML document

1-6 Explanation 7: Initial steps to build a new HTML file

When you build a new HTML file, follow these initial steps:

create a new blank HTML file with Notepad++
save the blank HTML file with the number of the exercise, without the blank spaces
in the first line, write the name of the exercise as a comment
add the simplified HTML structure
save the file
only begin writing content when the previous steps are complete

1-6 A 2

Create an HTML file that displays this text:

Various animals

There are different types of animals. They can be classified into various groups. Each group contains species with unique characteristics.

Animals living in air

Some animals, such as birds and bats, live in the air. This group includes mammals, birds and reptiles.

Animals living in water

Others, like fish, live in water.

Each of these groups has unique characteristics.

1-6 A 3 Discover

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

<html>

<body style="background-color:yellow;">
<p>Hello.</p>
</body>

</html>

Open this file in a browser and explain what <body style="background-color:yellow;"> will show:

1-6 Explanation 8: The background color of an HTML page

To set the background color of an HTML page, use:

<html>

<body style="background-color:value;">
…
</body>

</html>

If this style is not set, then the value of the background color property will default to 'white'.

1-6 Orientation 4: Copies of previous files

For the following exercises, make a copy of each of the following files in the Exercises01 folder:

Cats
Dogs
Birds
Music
Games
Your own files

Use the copies for the following exercises and save them with the corresponding new names.
Add the basic HTML structure to each file, then include the content. Finally, use the color names from page 5 to change the background color for each of these files.

1-6 A 4 Dogs

Update the dogs file with the simplified HTML structure and a background color. Also, adjust font colors.

1-6 A 5

Decide if the following steps to start writing a new HTML page are right or not.

	Yes	No
Step 1: <html> Step 2: <body> Step 3: your code Step 4: </html> Step 5: </body>
Step 1: <html> </html> Step 2: <html> <body> </body> </html> Step 3: <html> <body> <p>This is a little text</p> </body> </html>
Only after the basic HTML structure is in place should you begin writing code within the body tags.

1-6 A 6 Cats

Update the cats file with the simplified HTML structure and a background color. Also, adjust font colors.

1-6 Explanation 9: Background colors and texts

When working with colored texts and backgrounds, be mindful of bright background colors that display dark fonts, and ensure those with a dark background color display bright fonts, so all texts are easy to read.

1-6 A 7 Birds

Update the birds file with the simplified HTML structure and a background color. Also, adjust font colors.

1-6 Explanation 10: Use of color for reading

Use colors that work well together and are balanced for a pleasant reading experience. You can use contrasting colors to highlight important parts of the text.

1-6 A 8 Music

Update the music file with the simplified HTML structure and a background color. Also, adjust font colors.

1-6 A 9 Games

Update the games file with the HTML structure and a background color. Also, adjust font colors.

1-6 A 10 Your own HTML files

Update your own files with the simplified HTML structure and a background color. Also, adjust font colors.

1-6 Orientation 5: Previous files

The next few exercises refer to files you have created for exercises on page 5.

1-6 A 11 VegetablesAndFruits

Update the Vegetables and Fruit file with the simplified HTML structure and a background color. Also, adjust font colors.

1-6 A 12 DreamsAndReality

Update the DreamsAndReality file with the simplified HTML structure and a background color. Also, adjust font colors.

1-6 A 13 BooksAndMovies

Update the BooksAndMovies file with the simplified HTML structure and a background color. Also, adjust font colors.

1-6 Orientation 6: Review of style terms I

The following exercises are a review of style terms described on page 3.

1-6 A 14

<h1 style= "text-align:right;color:yellow;">This is a little text.</h1>

Decide, if the following statements about the above line are true or false.

In the above line…

	Yes	No
'style' is an element.
'color' is a style.
'style' is an attribute name.
'right' is a style name.
'yellow' is a property name.
'right' is a property value.
'text-align' is a style.
'text-align' is a property name.
'color:yellow' is a style.

1-6 Orientation 7: Review of style terms II

If you wish to review some of the terms from the previous exercise, refer to page 3.

1-6 B 1 HTML file with your own text

Create an HTML file with any text you like. Use all tags and tag pairs you have learned so far, along with headings and colors.

1-6 A 15 Rereading the yellow sections

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

1-6 A 16 StarfruitJuice06.html

within the StarfruitJuiceFiles folder, create a copy of the StarfruitJuice05.html file
rename the copy of the StarfruitJuice05.html file to StarfruitJuice06.html

At this point you have 2 identical files, named StarfruitJuice05.html and StarfruitJuice06.html.

modify StarfruitJuice06.html to make it look exactly like this.
save StarfruitJuice06.html

This page was created by Hanspeter Amend

Previous page Table of contents

Solution proposals

1-6 A 2

<html>

<body>

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

<p>There are different types of animals. They can be classified into various groups. Each group contains species with unique characteristics.</p>

<h3>Animals living in air</h3>
<p> Some animals, such as birds and bats, live in the air. This group includes
mammals, birds and reptiles. </p>

<h3>Animals living in water</h3>
<p>Others, like fish, live in water.</p>
Each of these groups has unique characteristics.

</body>

</html>

1-6 A 16

<html>

<!- - Set style attribute for the color style of the page background. - ->
<body style= "background-color:lightblue;">

<!- - Title: Set style attribute for text style. - ->
<h1 style= "text-align:center;color:blue;">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>

</body>

</html>

This page was created by Hanspeter Amend

Previous page Table of contents