Learning Objective
After completing this topic, you should be able to
create a basic web page Exercise overview
In this exercise, you're required to create a basic web page displaying product information.
This involves creating a web page.
You work for a company called EarthFarm, which sells organic foodstuffs and herbs. You want to create a web page containing some basic information about the company products.
Task 1: Creating a web page
You are starting to build the Produce page of the site. So far, you've entered the structural tags.
You now want to build up the rest of the page.
Code
<html>
<head>
</head>
<body>
</body>
</html>
Question
You have given the title "EarthFarm Produce" to your web page.
Add the closing tag for the title of your web page.
Code
<html>
<head>
<title>EarthFarm ProduceINSERT THE MISSING CODE
30
</head>
<body>
</body>
</html>
Answer
The closing tag has the same name tag as the opening tag. It also has a forward slash (/) after the first angle bracket and before the start of the name tag. To close the title tag, you add the closing
</title> tag.
Correct answer(s):
1. </title>
Question
You want to change the background color of your web page from the default white color to a yellow color.
Enter the attribute to change the background color to a shade of yellow. The hexadecimal color value is #FFFFCC.
Code
<html>
<head>
<title>EarthFarm Produce</title>
</head>
<body INSERT THE MISSING CODE>
</body>
</html>
Answer
To change the color of your web page to a shade of yellow, you enter the body tag attribute bgcolor="#FFFFCC".
Correct answer(s):
31
1. bgcolor="#FFFFCC"
Question
You want the main heading on the page to be "About our produce".
Enter the code to create the main heading.
Code
<html>
<head>
<title>EarthFarm Produce</title>
</head>
<body bgcolor="#FFFFCC">
INSERT THE MISSING CODE
</body>
</html>
Answer
The <h1> </h1> tags are heading tags. To display "About our produce" as the main heading, you type <h1>About our produce</h1>. The tag <h1> defines the largest header.
Correct answer(s):
1. <h1>About our produce</h1>
Question
You have entered the text for your first paragraph and now you want to add an extra line break after the word "wreaths".
Enter the tag to do this.
Code
<html>
<head>
<title>EarthFarm Produce</title>
</head>
<body bgcolor="#FFFFCC">
<h1>About our produce</h1>
<p>
32
Here at EarthFarm, we grow a wide variety of vegetables, crops, and fruit, including tomatoes, pumpkins, wheat,
asparagus, peppers, squash, apples, and strawberries. We also rear cattle, sheep, goats, and chickens, and we produce
organic honey from our beehive. We also grow flowers and herbs, which we sell to order or in ready-tied bouquets and wreaths.
</p>
INSERT THE MISSING CODE
</body>
</html>
Answer
The <br> tag creates a single line break in text wherever it is inserted. The <br> tag has no closing tag.
Correct answer(s):
1. <br>
Question
You have created the structure of an unordered list and now you need to enter the list items.
Add the text "Pumpkins" as your first list item.
Code
Here at EarthFarm, we grow a wide variety of vegetables, crops, and fruit, including tomatoes, pumpkins, wheat,
asparagus, peppers, squash, apples, and strawberries. We also rear cattle, sheep, goats, and chickens, and we produce
organic honey from our beehive. We also grow flowers and herbs, which we sell to order or in ready-tied bouquets and wreaths.
</p>
<br>
33
<h2>Organic Vegetables</h2>
<ul>
INSERT THE MISSING CODE
</body>
</html>
Answer
List items must be preceded by the <li> list item tag. There is no closing tag. To create a list item called "Pumpkins", you type <li>Pumpkins.
Correct answer(s):
1. <li>Pumpkins
Question
After you complete the bulleted list, you want to add the text "We sell only organic produce." and format it in Arial font face.
Add the appropriate code to your HTML file.
Code
<p>
Here at EarthFarm, we grow a wide variety of vegetables, crops, and fruit, including tomatoes, pumpkins, wheat,
asparagus, peppers, squash, apples, and strawberries. We also rear cattle, sheep, goats, and chickens, and we produce
organic honey from our beehive. We also grow flowers and herbs, which we sell to order or in ready-tied bouquets and wreaths.