Question You want to format the text "Welcome to the EarthFarm web site" in italics. Enter the necessary tags and text. Code EarthFarm INSERT THE MISSING CODE
Answer
18
To format "Welcome to EarthFarm web site" in italics you type Welcome to the EarthFarm web site. Correct answer(s): 1. Welcome to the EarthFarm web site
Question In the HTML code , match each individual component with the correct description. Options: A. B.
font
C.
size
2
Targets: 1. Attribute 2. Tag 3. Value
Answer The size attribute tells the browser to display the text enclosed within the tags at a specified size. The tags tell the browser to format the enclosed text in a particular way. The value of 2, combined with the tags and the attribute, size, tells the browser that this portion of the text should be displayed at size 2. Correct answer(s): Target 1 = Option C Target 2 = Option B Target 3 = Option A
19
2. Structural HTML tags Every HTML page has common structural tags that are needed to build the page.
Code
There are several common structural tags needed in each HTML page:
Code
20
The tags define your document as an HTML page for the browser. It encloses all the other tags and the content in your HTML document. The opening tag can have attributes such as lang, which is used to specify the language that the HTML document is written in. For example, you can specify English as the language: , and The tags are used to provide information about the page. The tags contain other tag elements such as the tags and <meta> tags. The text you enter in the tags is displayed in the Title bar of your browser. Meta tags are used to provide information about your web site. The content placed inside the meta tag varies widely depending upon the value that is set within the name and content attributes of the tag. Common values for the name attribute include keywords which is used to associate keywords with the site and description. These keywords provide a description of the site for display in search engine results: <meta name="keywords"content="organic, fruit, vegetables"> The tags enclose all the information that will be visible to the users on your web pages. The opening tag can have several attributes. For example, if you want to specify the background color for your web page, you add the bgcolor attribute and specify a hexadecimal color value. For example, you can change the background color of your web page to red: The Document Type Definition, or DTD, describes the markup language used to create the document. It states whether the page was created using HTML 4.01 Strict, HTML 4.01 Transitional, or HTML 4.01 Frameset. The example shows that this web page was created using HTML 4.01 Transitional. The absence of this tag may restrict the use of advanced browser features.
Graphic The DTD is .
Code 21
Question You are starting to build your first web page, and you have entered the structural tags that are needed for the basic structure of the page. You now want to add the title "EarthFarm" to your web page. Enter the title with the appropriate tags. Code INSERT THE MISSING CODE
Answer
22
To give your web page the title "EarthFarm" you enter EarthFarm inside the tags. Correct answer(s): 1. EarthFarm 2. EarthFarm 3. EarthFarm 4. EarthFarm
Question Which set of tags can be used, with the relevant attributes, to relay keywords associated with the site to search engines? Options: 1. 2. 3. <meta> 4.
Answer Option 1: Incorrect. The tags enclose all the information that the user views onscreen. Option 2: Incorrect. The tags define your document as an HTML page for the browser. They enclose all the other tags and the content in the HTML document. Option 3: Correct. You use <meta> tags, along with the name attribute set to keywords and the content attribute containing the relevant keywords, to enable search engines to index your web site correctly. Option 4: Incorrect. The tags are used to display the title of your web page in the browser Title bar. Correct answer(s): 3. <meta>
23
3. Elements of an HTML document The tags contain all the contents of the document, such as the text and images, that will be visible in the document window of the browser. Different tags are used to format the text and display the images.
Code EarthFarm Welcome to EarthFarm
Here at EarthFarm, we base our farming techniques on the development of biological diversity and the maintenance and replenishment of soil fertility.
We grow vegetables, crops, flowers, and herbs in a completely organic environment.
We specialise in: - Organic food
- Organic vegetables
- Organic fruit
- Organic meat
- Flowers and herbs
The most common tags used in the body of the HTML document are
Code EarthFarm Welcome to EarthFarm
Here at EarthFarm, we base our farming techniques on the development of biological diversity and the maintenance and replenishment of soil fertility.
We grow vegetables, crops, flowers, and herbs in a completely
24
organic environment.
We specialise in: - Organic food
- Organic vegetables
- Organic fruit
- Organic meat
- Flowers and herbs
The
tags are heading tags. In HTML you can have up to six different heading sizes. The tag defines the largest header and defines the smallest header. Paragraph breaks occur automatically at the end of each heading element.
The
tags are used to format text in paragraphs. In HTML documents you can't separate blocks of text into paragraphs by pressing the Enter key because white space is not recognized. You have to enclose the text inside the
tags.
The
tag creates a single line break in text wherever it is inserted. The
tag has no closing tag.
The
tag creates a horizontal rule. This is a straight line which extends across a page. This can be used to divide the content into sections. The
tag has no closing tag. ![]()
, and The ![]()
tag defines an image and attaches it to your web page. This tag requires the src attribute for a graphic to load correctly. The src attribute specifies the name of the graphic file and the location of the file on the computer: 
Different types of graphic files can be displayed such as JPEG, gif, and PNG files. Other attributes such as the height and width of the image can be specified. The ![]()
tag has no closing tag. The tags are used to format text. The face attribute enables you to set the font type: Text
25
The size attribute specifies the size of the text and the color attribute enables you to set the color. You may want to display some content in bulleted or numbered lists. There are different tags used for each of these lists. For a bulleted list, the tags are used. The tag stands for unordered list, which is a bulleted list. It doesn't display the list items numerically or alphabetically. To create an ordered, numerical list, you use the
tags. In both types of list, the list items must be preceded by the - list item tag. There is no closing tag.
Code EarthFarm Welcome to EarthFarm
Here at Earthfarm, we base our farming techniques on the development of biological diversity and the maintenance and replenishment of soil fertility.
We grow vegetables, crops, flowers, and herbs in a completely organic environment. Our livestock are fed a carefully prepared organic diet and are allowed to roam free across our parkland.
We specialise in: - Organic food
- Organic vegetables
- Organic fruit
- Organic meat
- Flowers and herbs
Question
26
You want to format the text "Welcome to EarthFarm" in Arial font face. Without adding unnecessary spaces to the code, enter the appropriate tags and text. Code EarthFarm INSERT THE MISSING CODE
Answer To display the text "Welcome to EarthFarm" in Arial, you type Welcome to EarthFarm. Correct answer(s): 1. Welcome to EarthFarm
Question Match the tags with their descriptions. Options: ![]()
A. B.
C.
D.
Targets: 1. Embeds a graphic in a web page 2. Creates a straight line which extends across the page 3. Formats text size and type 4. Groups text into paragraphs
Answer The ![]()
tag uses the src attribute to specify the graphic file to embed and the location of the file. The
tag creates a horizontal rule, which can be used to divide content into sections.
27
The tags enable you to specify the font face and size by using the face and size attributes. The
tags organize blocks of text into paragraphs. Correct answer(s): Target 1 = Option A Target 2 = Option B Target 3 = Option C Target 4 = Option D
Summary HTML tags, also referred to as elements, tell the browser how to display content. Tags consist of a text command inside angled brackets. There are two types of tags – container tags and empty tags. Container tags have opening and closing tags and empty tags only have opening tags. Tags have attributes and values. There are several key structural tags that are common to every HTML page. These include the tag, which defines the document as an HTML page, the tag, which contains information about the page, and the tag, which contains the information that will be visible to the user. The DTD describes the markup language used to create the document. Because the body of the HTML document contains the visible content, the tag contains many other nested tags. Some of the most common ones are those for attaching an image ![]()
, creating a paragraph , creating a horizontal rule
, and formatting text .
28
Creating a Web Page 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
Question You have given the title "EarthFarm Produce" to your web page. Add the closing tag for the title of your web page. Code EarthFarm ProduceINSERT THE MISSING CODE<br />
<br />
29<br />
<br />
</head> <body><br />
<br />
</body> </html><br />
<br />
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 tag. Correct answer(s): 1.
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 EarthFarm Produce
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):
30
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 EarthFarm Produce INSERT THE MISSING CODE
Answer The
tags are heading tags. To display "About our produce" as the main heading, you type About our produce
. The tag defines the largest header. Correct answer(s): 1. About our produce
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 EarthFarm Produce About our produce
31
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.
INSERT THE MISSING CODE
Answer The
tag creates a single line break in text wherever it is inserted. The
tag has no closing tag. Correct answer(s): 1.
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 EarthFarm Produce About our produce
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.
32
Organic Vegetables
INSERT THE MISSING CODE
Answer List items must be preceded by the - list item tag. There is no closing tag. To create a list item called "Pumpkins", you type
- Pumpkins. Correct answer(s): 1.
- 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 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.
Organic Vegetables
- Pumpkins
- Tomatoes
- Potatoes
- Celery
- Beans
- Peppers
- Onions
- Garlic
33
INSERT THE MISSING CODE
Answer The tags are used to format text. You can also add an attribute, such as a font face or size. To display the text "We sell only organic produce." in Arial, you enter We sell only organic produce.. Correct answer(s): 1. We sell only organic produce.
Finally, you preview the web page in your browser.
34
Hyperlinks, Tables, and Forms Learning Objectives
After completing this topic, you should be able to
insert hyperlinks into a web page
recognize tags used to create a table in HTML
recognize the tags that are used to create forms in HTML 1. Hyperlinks Hyperlinks provide a clickable link between web pages on the Internet. You can create a hyperlink that's linked to another page within the same site, to a page on another site, or to a section of the current page. A hyperlink can be represented by text or an image.
Graphic The product.htm web page contains the following text: "At EarthFarm we sell only organic produce in our farm shop. You can see our complete product list here." The word "here" is a hyperlink. An external hyperlink links two web pages.
Try It You want to view the HTML for the external hyperlink. To complete the task 1. Select View - Source Using keyboard: The keyboard alternative is Alt+V, C.
The HTML for the external hyperlink displays. The HTML for the link is displayed. You scroll through it to view the link at the bottom of the page.
Graphic This code is highlighted: here
35
Code approach to farming means that in addition to making vegetables, fruit, meat, and honey available to you, we can offer dairy products including goats cheese and yogurt and also preserves and relishes made in our farm kitchen.
At EarthFarm we sell only organic produce in our farm shop. You can see our complete produce list here.
| | 
In HTML, you should have the following elements within an external link:
Code here anchor tags The anchor tags surround the text or image that represents the link on the web page. hypertext reference attribute The hypertext reference attribute, or href attribute, identifies the file or Uniform Resource Locator, also known as URL, that the anchor text or image links to. You place the href attribute within the first anchor tag followed by the equals sign and the page that you want to link to. file or URL, and
36
You can link to a file, a fully qualified URL, or a partial URL. You can also link to another anchor on the current page. In this case, you link to a page in the same folder as the page with the anchor called "produce_list.htm". text for the link The text for this link is the word "here." On the EarthFarm web page, it's underlined and in a different color to the rest of the text. When you move your mouse over it, the pointer changes to a hand so you know it can be clicked. You can also create hyperlinks using an image as the clickable anchor. The file that the image links to is homepage.htm. The image is held in the assets folder of the web site and is called "ef_workers.jpg".
Graphic The sample image-based hyperlink is 
Code Visit our recipes page | | Details about our Farm
37
| You select File - Exit to close the Notepad file that shows the HTML.
Try It You want to view the hyperlink's target page. To complete the task 1. Click the here hyperlink
The hyperlink's target page downloads. The produce_list.htm page contains a number of internal links. You use internal links to jump to other parts of the same document without having to scroll.
Graphic There are a number of headings at the top of the page that are also hyperlinks. They are "Organic Food", "Organic Vegetables", "Organic Fruit", "Organic Meat", and "Flowers and Herbs".
Try It You want to move to other parts of the HTML document without having to scroll. To complete the task 1. Click the Organic Vegetables link
The Organic Vegetables section of the page displays. You select View - Source to view the HTML code for the produce_list.htm page.
Keyboard Sequence The keyboard alternative is Alt+V, C. You scroll through the source and locate the link for Organic Vegetables in the HTML.
Code
38
Organic Food Organic Vegetables Organic Fruit Organic Meat Flowers and Herbs | In this case, you first create a named anchor for the Organic Vegetables area.
Code Organic Vegetables Then you create the link used to jump to the anchor you just created. Within the link's code, the first instance of the words represents the newly-created anchor name, and the second instance represents the link text used to access the target.
Code Organic Food Organic Vegetables Organic Fruit Organic Meat Flowers and Herbs | The value for the href attribute includes the hash (#) symbol before the target text. The hash symbol tells the browser to search for the text within the page. If you omit the symbol, the link doesn't work.
Code
39
Organic Food Organic Vegetables Organic Fruit Organic Meat Flowers and Herbs |
Question Type the opening anchor tag and attributes for the link to a page called frameset.htm. Code INSERT THE MISSING CODE
Answer You type to create the opening tag and attributes. Correct answer(s): 1.
2. Tables Tables have a number of functions. They can display tabular data and you can use them to align text and images on a web page.
Graphic The table lists a number of foodstuffs and their prices at given quantities. The table does not display any borders. To view the HTML code for the Organic Food table, you select View - Source.
Keyboard Sequence 40
The keyboard alternative is Alt+V, C. Some of the HTML tags used to create a table are
Code Organic Food | Food | Quantity | Price | | Flour | 2 lbs | $3 | | Soft Cheese | 1 lb | $3 | | Sugar | 1 lb | $8 | The container tags are the main tags for a table, and all other tags are contained within them. These tags are required elements. The tags are used to signify the start and end of a table row. | , and Table data | tags define the beginning and end of each cell in a row. |
41
The | tags define the table heading and mark the beginning and the end of the heading text. Heading text is usually placed in the top row or the first column as it defines the data that comes after it. This tag is not mandatory because not all tables require heading text.
Question Which table elements define the beginning and end of each row in a table? Options: 1. 2. | 3.
Answer Option 1: Incorrect. The tags mark the beginning and end of the entire table. Option 2: Incorrect. The | tags mark the beginning and end of each cell within a row. Option 3: Correct. The tags are used to define the beginning and end of each row in a table. Correct answer(s): 3. Your web browser doesn't show table borders unless specified in the HTML. It makes decisions on how to show other table elements such as text alignment and table width. You can also specify how your table looks in a browser by manipulating the HTML.
Graphic The table lists a number of foodstuffs and their prices at given quantities. The table includes a border.
Note Tables with the same settings may not look identical in different browsers. You view the HTML code for the Organic Food table with borders.
42
Graphic The View menu is open, with Source selected. The HTML code of the Organic Food table with borders is displayed.
Code | Organic Vegetables | | Food | Quantity | Price | | Honey | 1 jar | $8 | | Eggs | 6 | $2 | | Flour | 2 lbs | You can change the appearance of rows, columns, or the entire table using the following basic attributes:
Code
43
| Organic Vegetables | | Food | Quantity | Price | | Honey | 1 jar | $8 | | Eggs | 6 | $2 | | Flour | 2 lbs | width The width attribute describes the intended table width, either in pixels, or as a percentage of screen width. For example, you use this code to specify that the table takes up 80% of the screen. Specifying the table width in pixels may result in the table being wider than the screen. This attribute can also be applied to cells in a table. border Table borders are not displayed in browser windows unless specified. To show borders around all cells within tables, you use the border attribute. To draw a border of 5 pixels around all the cells in the table, you use this code. bgcolor You use the bgcolor attribute to specify the background color for the table. The attribute goes in the tag, in the tag, in the | tag, or in the | tag depending on the table element you wish to color. In this case, the background color is in the tag and specified as white. height The height attribute works in the same way as the width attribute except it is used to specify the height of a table, row, or cell. cellpadding and cellspacing, and
44
You control the white space between the border and the text in the cell using the cellpadding attribute. To prescribe a space of 10 pixels between the cell border and its contents, you use this code. The white space between cells can be controlled using the cellspacing attribute. To ensure there is a one pixel space between cells in a table, you use this code. rowspan and colspan The attributes rowspan and colspan – when placed within the or | tags – enable you to span a heading across the rows or columns of your table respectively. To create the heading "Organic Vegetables" in an Arial font and size 4 spanning across three columns, you use this code. You view the source for a web page on the EarthFarm site. The page comprises a table.
Code | | | | There are a number of alignment attribute options available to you when using tables to display data.
45
align You can place the align attribute within the tags, the tags, the tags, the | tags, or the | tags to align the table or parts of it to the left, right, or center. For example, horizontally aligns the entire table to the right. valign The valign attribute vertically aligns text within a row or cell. Its values are top, middle, and bottom. The valign attribute is generally used with the , | , and | tags. halign The halign attribute horizontally aligns text within a row or cell. Its values are left, center, and right. The halign attribute is commonly used with the | , | , and | tags.
Question Insert the opening tag for a table that's 200 pixels wide. Specify that it's centrally aligned and has a border width of 1. Code INSERT THE MISSING CODE
Answer You type to create a table that is 200 pixels wide and centrally aligned with a border width of 1. Correct answer(s): 1.
3. Forms Forms are used in HTML pages to collect user input and forward it to a web server. Forms are widely used in online surveys, online banking, online shopping, information requests, and for site registration purposes. You can enter and submit data by using controls such as checkboxes, radio buttons, text fields, and submit buttons.
46
Data is processed using Common Gateway Interface, or CGI, scripts located at the web server or client-side scripts that are run by the client's browser. The tags are used in an HTML document to signify the beginning and end of a form. Various attributes need to be added to the
Code Untitled Document <meta http-equiv="Content-Type" content="text/html"> The method attribute specifies which method the browser uses to send form data to a web server. You can use the get or post value with this attribute.
Graphic In the sample HTML page, the code that defines the method, action, and enctype attributes of a form is: The get value specifies that the form data is appended to the URL for use in a query string. The post value specifies that the form data is posted to the URL, which is specified by the action attribute. The action attribute specifies the name and location of the CGI script used to process the form. The enctype attribute sets a MIME type for the data being sent to the web server. In this case, the value for the enctype attribute is "text/plain".
48
When creating a form, you can use a number of tags to create fields.
Code
| | | |
| 
