41 The keyboard alternative is Alt+V, C - Cognizant E-learning Modules

Some of the HTML tags used to create a table are

<th>Quantity</th>

<th>Price</th>

<td>Soft Cheese</td>

The <table> </table> container tags are the main tags for a table, and all other tags are contained within them. These tags are required elements.

<caption> </caption>

<tr> </tr>

The <tr> </tr> tags are used to signify the start and end of a table row.

<td> </td>, and

Table data <td> </td> tags define the beginning and end of each cell in a row.

<th> </th>

42

The <th> </th> 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. <table> </table>

2. <td> </td>

3. <tr> </tr>

Answer

Option 1: Incorrect. The <table> </table> tags mark the beginning and end of the entire table.

Option 2: Incorrect. The <td> </td> tags mark the beginning and end of each cell within a row.

Option 3: Correct. The <tr> </tr> tags are used to define the beginning and end of each row in a table.

Correct answer(s):

3. <tr> </tr>

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.

43 Graphic

The View menu is open, with Source selected.

The HTML code of the Organic Food table with borders is displayed.

Code

<body>

<table width="80%" border="5" bgcolor="white"

height="600" cellspacing="1" cellpadding="10"

align="center" bordercolor="#000000">

<tr>

<font face ="Arial" size="4">Organic Vegetables </font>

</th>

You can change the appearance of rows, columns, or the entire table using the following basic attributes:

Code

<body>

<table width="80%" border="5" bgcolor="white"

height="600" cellspacing="1" cellpadding="10"

align="center" bordercolor="#000000">

44

<tr>

<font face ="Arial" size="4">Organic Vegetables </font>

</th>

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 <table> tag, in the <tr> tag, in the <td> tag, or in the <th> tag depending on the table element you wish to color. In this case, the background color is in the <table> 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

45

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 <th> or <td> 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

<img src="assets/eggplant.jpg" width="133"

height="133" border="0"></a>

There are a number of alignment attribute options available to you when using tables to display data.

46

align

You can place the align attribute within the <table> tags, the <caption> tags, the <tr> tags, the <td> tags, or the <th> tags to align the table or parts of it to the left, right, or center.

For example, <table align="right"> 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 <tr>, <td>, and <th> 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 <tr>, <td>, and <th> 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

<head>

</head>

<body>

INSERT THE MISSING CODE

Answer

You type <table width="200" align="center" border="1"> to create a table that is 200 pixels wide and centrally aligned with a border width of 1.

Correct answer(s):

1. <table width="200" align="center" border="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.

47

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 <form> </form> tags are used in an HTML document to signify the beginning and end of a form.

Various attributes need to be added to the <form> tag to ensure the form works correctly.

These include method, action, and enctype.

Graphic

In the sample HTML page, the code that defines the beginning of a form is:

<form name="survey" method="post"

action="survey.php" enctype="text/plain">

<form name="survey" method="post"

action="survey.php" enctype="text/plain">

<strong>Quick survey:</strong><br>

<br>

We are considering adding

carrots to our list of organic vegetables.<br>

<br>

Do you like carrots?

<br>

48

</form>

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: <form name="survey" method="post"

action="survey.php" enctype="text/plain">

Code

<form name="survey" method="post"

action="survey.php" enctype="text/plain">

<strong>Quick survey:</strong><br>

<br>

We are considering adding

carrots to our list of organic vegetables.<br>

<br>

Do you like carrots?

<br>

</form>

</body>

</html>

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

49

When creating a form, you can use a number of tags to create fields.

Code

<form name="survey" method="post"

action="survey.php" enctype="text/plain">

Do you like carrots?

<br>

What are your favorite vegetables?<br>

<br>

<select name="favorite_veg"

size="6" multiple>

<option value="Beans">Beans</option>

<option value="Broccoli">Broccoli</option>

<option value="Celery">Celery</option>

<option value="Peppers">Peppers</option>

<option value="Potatoes">Potatoes</option>

<option value="Tomatoes">Tomatoes</option>

</select><br>

<br>

Do you like any other vegetables? If so, please specify:<br>

<br>

<br>

< input name="like_carrots"

type="radio" value="Y"> Yes.<br>

< input name="like_carrots"

type="radio" value="N"> No.

Most controls are added to a form using the <input> tag. The <input> tag is an empty tag. The type of control that is displayed is decided using the type attribute. You can specify various types of control by using this attribute.

< select name="favorite_veg"

size="6" multiple>

<option value="Beans">Beans</option>

<option value="Broccoli">Broccoli</option>

<option value="Celery">Celery</option>

<option value="Peppers">Peppers</option>

<option value="Potatoes">Potatoes</option>

50

<option value="Tomatoes">Tomatoes</option>

</select>

The <select> </select> tags are used to define the start and end of a select list in a form.

Various attributes can be used with the <select> tag. The name attribute is used to name the list. The multiple attribute is used to specify whether multiple options can be selected from the list. The display of each option in the list requires further HTML coding using <option>

</option> tags.

< textarea name="notes" cols="50" rows="8"></textarea>

The <textarea> </textarea> tags enable the insertion of a multiline text input area into a form. These are commonly used for lengthy user input such as comments in a survey. Various attributes are added to the <textarea> tag to identify it and control how it is displayed. These attributes include name, rows, and cols. The name attribute gives the data entered into the text area a name, rows is used to specify the height of the text area in rows, and cols is used to specify the character width of the text area.

You can preview the form to check that its displaying correctly.

Some of the more common type attribute controls include

text

The text attribute is used to display a text field. Additional attributes such as name and value can be added to a text input to give it a name, recognizable by a CGI script, and a default value.

For example, you can create a text field called "identity", with a default value of "Do you like any other vegetables?"

checkbox

The checkbox attribute will display the input as a small box that can be checked or unchecked.

When checked, the value attribute of the checkbox is activated.

To ensure that a checkbox is checked by default, you can use the checked attribute.

For example, you can create a checkbox called "maillist" with a value of "Yes" that is checked by default.

radio

Radio buttons are round option buttons in a group of two or more that are mutually exclusive options. Radio buttons are useful for getting a response to a multiple choice question in a form.

When creating a group of radio buttons, you must ensure that they have the same value in the name attribute.

For example, you can create a radio button group called "survey" that enables a user to either select Yes or No as an option.

51

submit

If the type attribute is set to submit, a Submit button is displayed in the form. Submit buttons are used to send the form data to the relevant CGI script on the web server for processing.

You set the text that appears on the button by using the value attribute. This element is displayed by default.

reset, and

If the type attribute is set to reset, a Reset button is displayed in the form. Reset buttons are used to set all of the form inputs to the default or blank values.

This is a useful way for the user to clear the form if a mistake is made during data input.

hidden

Hidden inputs are used to include a value in the form that the user does not need to see. The hidden input is named using the name attribute and has its value added to it by using the value attribute.

For example, you can add a hidden input called "action", with a value of delete.

Each option in the select list needs to be given a value and text to identify it. This is done by adding the value attribute to the <option> tag.

The text used to identify the option in the list is entered between the <option> </option>

tags.

Code

<option value="apples">Apples</option>

<option value="pears">Pears</option>

</select>

Question

You are creating an HTML form and wish to place a user input on the screen called "comments" that enables the user to enter multiple lines of text.

Identify the correct code to enable this.

Options:

1. <textarea name="comments"> </textarea>

2. <input type="text" name="comments">

3. <input type="radio" name="comments">

52 Answer

Option 1: Correct. You can also specify the size of the text input area using rows – which specifies the height of the text area in rows – and cols – which specifies the character width of the text area – attributes.

Option 2: Incorrect. The code <input type="text" name="comments"> creates a text field with only one line.

Option 3: Incorrect. The code <input type="radio" name="comments"> creates a radio button called comments.

Correct answer(s):

1. <textarea name="comments"> </textarea>

Question

Match each tag to its description.

Options:

A. <input>

B. <select>

C. <textarea>

Targets:

1. An empty tag where the type of control displayed depends on the type attribute specified 2. A container tag that creates select lists

3. A tag that creates text area spaces

Answer

The <input> tag is used to create text boxes, checkboxes, radio buttons, and the Submit and Reset buttons.

The <select> tag also creates multiple select lists.

The <textarea> tag is a container tag.

Correct answer(s):

Target 1 = Option A

53

In document Cognizant E-learning Modules (Page 42-54)