Lab 5: HTML Tables And Forms Lab05 Instructions

User Manual:

Open the PDF directly: View PDF .
Page Count: 25

(week 4, chapter 5 & 6)
HTML Tables, Forms and Media
Creating Tables
Styling Tables
Creating Forms
Form Controls
Complete your Lab Report

LAB 5

(WEEK 4, CHAPTER 5 & 6)

HTML TABLES, FORMS AND

MEDIA

What You Will Learn

• How to create HTML tables

• How to style tables

• How to create HTML forms

• How to use the <video> and <audio> elements

Approximate Time

The exercises in this lab should take approximately 80 minutes to complete.

Lab 5: HTML Tables and Forms

CREATING TABLES

PREPARING DIRECTORIES

1 If you haven’t done so already, create a folder in your personal drive for all the labs for

this course.

2 Unzip lab05 files to your course folder created in step one.

The <table> element in HTML represents information that exists in a two-

dimensional grid. Tables can be used to display calendars, financial data,

pricing tables, and many other types of data. Just like a real-world table, an

HTML table can contain any type of data: not just numbers, but text, images,

forms, even other tables.

Exercise 5. 1

— CREATE A BASIC TABLE

1 Open, examine, and test lab05-exercise01.html in browser.

2 Add the following markup to the document.

<body>

<table>

<tr>

<td>The Death of Marat</td>

<td>Jacques-Louis David</td>

</tr>

<tr>

<td>Burial at Ornans</td>

<td>Gustave Courbet</td>

</tr>

Fundamentals of Web Development

</table>

</body>

The indenting shown here is purely for clarity purposes (that is, it is there to help you

see the structure of the table more clearly). It is up to you whether you want to space

the table markup in the same fashion.

3 Test in browser.

4 Add the following markup.

<table>

<tr>

<th>Title</th>

<th>Artist</th>

<th>Width</th>

<th>Height</th>

</tr>

<tr>

<td>The Death of Marat</td>

...

This adds a heading row to the table.

5 Test in browser. The result should look similar to that shown in Figure 5.1.

Figure 5.1 – Exercise 5.1 Complete

Lab 5: HTML Tables and Forms

Exercise 5. 2

— COMPLEX CONTENT IN TABLES

1 Open, examine, and test lab05-exercise02.html in browser.

2 Add the following content to the table.

<table>

<tr>

</tr>

<tr>

<td><em>The Death of Marat</em><br/>Jacques-Louis David</td>

<td>Width: 162cm<br/>Height: 128cm</td>

</tr>

<tr>

<td><em>Burial at Ornans</em><br/>Gustave Courbet</td>

<td>Width: 314cm<br/>Height: 663cm</td>

</tr>

<tr>

<td><em>Betty de Rothschild</em><br/>Jean-Auguste Ingres</td>

<td>Width: 142cm<br/>Height: 101cm</td>

</tr>

<tr>

<td><img src="images/art/13030.jpg" alt="Arrangement in Grey and

Black" /></td>

Fundamentals of Web Development

<td><em>Arrangement in Grey and Black</em><br/>James Abbott

Whistler</td>

<td>Width: 144cm<br/>Height: 162cm</td>

</tr>

</table>

Here we are adding content to an existing table structure. Notice that some cells

contain multiple HTML elements.

3 Test in browser. The result should look similar to that shown in Figure 5.2.

Figure 5.2 – Exercise 5.2 complete

Exercise 5. 3

— SPANNING ROWS AND COLUMNS

1 Open, examine, and test lab05-exercise03.html in browser.

Lab 5: HTML Tables and Forms

2 Add the following style to the <head> of the document and test.

<style>

td, th { border: solid 1pt black; }

</style>

This will make the structure of the table more obvious.

3 Add the following two tags to the beginning of the table and test in browser.

<tr>

<th>Artist</th>

<th colspan="4">Work Details</th>

</tr>

<tr>

<br/><strong>Jacques-Louis David</strong>

</td>

</tr>

4 Add the following element at the beginning of the table.

<table>

<caption>Artist Inventory</caption>

<tr>

<th>Artist</th>

The caption is used to provide a title for the table, which improves accessibility.

5 Test in browser. The result should be similar to that shown in Figure 5.3.

Fundamentals of Web Development

Figure 5.3 – Exercise 5.3 complete

Exercise 5. 4

— ALTERNATE TABLE STRUCTURE ELEMENTS

1 Open, examine, and test lab05-exercise04.html in browser.

Notice that the <td> element can be used in rows and columns.

2 Add the following attributes to the table headings.

<table>

<caption>Pricing Table</caption>

<tr>

<th scope="col">Basic</th>

<th scope="col">Premium</th>

</tr>

<tr>

<th scope="row">Upload Space</th>

Lab 5: HTML Tables and Forms

<td>Unlimited</td>

</tr>

<tr>

<th scope="row">Daily Uploads</th>

<td>Unlimited</td>

</tr>

<tr>

<th scope="row">Total Uploads</th>

<td>Unlimited</td>

</tr>

<tr>

<th scope="row">Social Sharing</th>

</tr>

<tr>

<th scope="row">Analytics</th>

</tr>

</table>

This improves the accessibility of the table.

3 Add the following around the first row.

<thead>

Fundamentals of Web Development

<tr>

<th scope="col">Basic</th>

<th scope="col">Premium</th>

</tr>

</thead>

4 Test in browser. There is no special formatting for this element; instead we can apply

special styling to it.

5 Add the following element around the other table rows.

<tbody>

<tr>

<th scope="row">Upload Space</th>

<td>Unlimited</td>

</tr>

<tr>

<th scope="row">Daily Uploads</th>

<td>Unlimited</td>

</tr>

<tr>

<th scope="row">Total Uploads</th>

<td>Unlimited</td>

</tr>

<tr>

<th scope="row">Social Sharing</th>

Lab 5: HTML Tables and Forms

</tr>

<tr>

<th scope="row">Analytics</th>

</tr>

</tbody>

Like with the <thead> element, there is no preset-browser formatting associated with

the <tbody> element.

6 Add the following element between the <thead> and <tbody> element.

<tfoot>

<tr>

<th scope="row">Price per year</th>

</tr>

</tfoot>

7 Test in browser.

Notice the <tfoot> appears at the end of the table but should appear in the markup

before the <tbody> element.

STYLING TABLES

Exercise 5. 5

— SIMPLE TABLE STYLING

1 Open, examine, and test lab05-exercise05.html in browser.

2 Add the following style to the <style> element and test.

Fundamentals of Web Development

table {

border: solid 1pt black;

}

3 Change the style as follows and test.

table, td {

border: solid 1pt black;

}

4 Add the following and test.

td, table {

border: solid 1pt black;

border-collapse: collapse;

}

5 Add the following and test.

td, table {

border: solid 1pt black;

border-collapse: collapse;

padding: 0.5em;

}

6 Replace the above styles with the following and test.

table {

font-family: "Lucida Sans", Verdana, Arial, sans-serif;

font-size: 1em;

}

tbody {

background-color: #F1F1F1;

}

td, th {

padding: 0.5em;

}

thead, tfoot {

Lab 5: HTML Tables and Forms

background-color: #CACACA;

}

7 Add the following and test.

caption {

font-size: 1.2em;

font-weight: bold;

background-color: #DCA806;

padding: 0.5em;

}

Fundamentals of Web Development

8 Add the following styles and test. The final result should look similar to Figure 5.4.

tbody tr:nth-child(odd) {

background-color: white;

}

This changes the background color of every other row within the <tbody>

Figure 5.4 – Exercise 5.5 complete

Exercise 5. 6

— CSS3 TABLE STYLING

1 Open, examine, and test lab05-exercise06.html in browser.

2 Add the following style and test.

caption {

margin-left: -2000px;

}

While we want to keep the caption element for accessibility reasons, we don’t, in this

case, want it to be visible. Shifting it to the left off screen does that. In Chapter Five, you

will learn how to do this via CSS positioning.

Lab 5: HTML Tables and Forms

3 Add the following to the bottom two rows of the markup.

<tr>

<th scope="row">Social Sharing</th>

</tr>

<tr>

<th scope="row">Analytics</th>

</tr>

4 Add the following style and test.

tbody span.yes:before {

content: url(images/yes16.png);

}

The before or after pseudo-elements allow you to insert content before or after the

content of an element. In this case we are adding an image into the select cells.

5 Add the following style and test.

tbody th {

text-align:right;

color: #1D1626;

background-color: #F2E0BD;

}

This will make the first column within the <tbody> element different from the other

columns.

6 Add the following style and test.

thead th:empty {

background-color: white;

}

Fundamentals of Web Development

This uses the empty pseudo-element to select any empty <th> element within the

<thead>.

7 Add the following style and test.

tfoot th {

background-color: white;

}

8 Add the following style and test.

tfoot {

color: #C74223;

text-shadow:1px 1px 1px black;

font-weight: bold;

}

This changes every element within the <tfoot> element.

9 Change the following style and test.

tfoot th {

background-color: white;

text-shadow: none;

}

This removes the text shadow from the first cell of the footer.

10 Modify the following style and test. The result should look like that in Figure 5.5.

tfoot, thead th:nth-last-child(1) {

color: #C74223;

text-shadow:1px 1px 1px #000;

font-weight: bold;

}

This selects the last cell in the <thead> so that it has the same styling as the footer

elements.

Lab 5: HTML Tables and Forms

Figure 5.5 – Exercise 5.6 complete

CREATING FORMS

Forms provide the user with an alternative way to interact with a web server.

Up to now, clicking hyperlinks was the only mechanism available to the user

for communicating with the server. Forms provide a much richer mechanism.

Using a form, the user can enter text, choose items from lists, and click

buttons. Typically programs running on the server will take the input from

HTML forms and do something with it, such as save it in a database, interact

with an external web service, or customize subsequent HTML based on that

input.

A form is constructed in HTML in the same manner as tables or lists: that is,

using special HTML elements.

Exercise 5. 7

— CREATING A FORM

1 Open lab05-exercise07.html in text editor.

Fundamentals of Web Development

2 Add the following to the <body> of the document.

<legend>Details</legend>

<p>

<label>Title: </label>

</p>

<p>

<label>Country: </label>

<option>Choose a country</option>

<option>Canada</option>

<option>Finland</option>

<option>United States</option>

</select>

</p>

</fieldset>

</form>

3 Test in browser.

Exercise 5. 8

— TESTING A FORM

1 Open lab05-exercise08.html in text editor.

2 Modify the <form> element as follows then test.

This sample PHP script on the book’s web site simply echoes back any form data in the

request.

3 Modify the <form> element as follows then test.

Lab 5: HTML Tables and Forms

<form method="post"

action="http://www.randyconnolly.com/tests/process.php">

FORM CONTROLS

Exercise 5. 9

— TEXT CONTROLS

1 Open and examine lab05-exercise09.html.

2 Modify the form as follows and test.

<p>

<label>Title: </label><br/>

</p>

<p>

<label>Password: </label><br/>

</p>

<p>

<label>Email: </label><br/>

</p>

<p>

<label>Website: </label><br/>

</p>

<p>

<label>Description: </label><br/>

<textarea placeholder="enter a description" rows="5"

cols="45"></textarea>

</p>

Fundamentals of Web Development

Exercise 5.10

— CHOICE CONTROLS

1 Open and examine lab05-exercise10.html.

2 Modify the form as follows and test (be sure to submit form).

<p>

<label>Countries: </label><br/>

<option>Australia</option>

<option>Canada</option>

<option>France</option>

<option>Sweden</option>

<option>Thailand</option>

<option>United States</option>

</select>

</p>

<p>

<label>Continent: </label><br/>

<option value="NA">North America</option>

<option value="EU">Europe</option>

<option value="SA">South America</option>

</select>

</p>

<p>

<option>Calgary</option>

<option>Los Angeles</option>

</optgroup>

Lab 5: HTML Tables and Forms

<option>London</option>

<option>Paris</option>

<option>Prague</option>

</optgroup>

</select>

</p>

<p>

<label>Gender of Traveler: </label><br/>

<input type="radio" name="gender" value="1">Female<br/>

</p>

<p>

<label>How did you hear about the site: </label><br/>

<input type="checkbox" name="hear" value="email">Email<br/>

<input type="checkbox" name="hear" value="friend">Friend<br/>

<input type="checkbox" name="hear" value="website">Website

</p>

Exercise 5.11

— BUTTON CONTROLS

1 Open and examine lab05-exercise11.html.

2 Modify the form as follows and test.

<p>

</p>

<p>

Fundamentals of Web Development

Yes

</a>

</button>

</button>

</p>

<p>

</p>

Exercise 5.12

— SPECIALIZED CONTROLS

1 Open and examine lab05-exercise12.html.

2 Modify the form as follows and test (be sure to submit form).

<p>

<label>Rate this photo: </label><br/>

</p>

<p>

Happiness Rating: Grumpy

Ecstatic

</p>

<p>

<label>Companion Color: </label><br/>

</p>

Note: not every browser supports all of these controls.

Lab 5: HTML Tables and Forms

Exercise 5.13

— DATE AND TIME CONTROLS

1 Open and examine lab05-exercise13.html.

2 Modify the form as follows and test (be sure to submit form).

<p>

<label>Date of photo: </label><br/>

</p>

<p>

<label>Time of photo: </label><br/>

</p>

<p>

<label>Date and time of photo: </label><br/>

</p>

<p>

<label>Week of photo: </label><br/>

</p>

Note: not every browser supports all of these controls.

WORKING WITH AUDIO AND VIDEO

Exercise 5.14

— VIDEO AND AUDIO ELEMENTS

1 Open and examine lab05-exercise14-audio.html.

2 Add the following code and test.

Fundamentals of Web Development

Browser doesn't support the audio control

</audio>

3 Add the following code and test (ideally in IE and Chrome or Firefox).

<p>Browser doesn't support the audio control</p>

</audio>

At the time of writing, IE 10 does not support the Ogg audio format. Notice also that this

step illustrates an alternative way of specifying the source.

4 Add the following code and test (ideally in IE and Chrome or Firefox).

<p>Browser doesn't support the audio control</p>

</audio>

<p>Browser doesn't support the audio control</p>

</audio>

<p>Browser doesn't support the audio control</p>

</audio>

5 Add the following code and test.

Lab 5: HTML Tables and Forms

<p>Browser doesn't support the audio control</p>

</audio>

The browser will use the first source format that it supports. Notice also that MIME

types are also defined.

6 Open and examine lab05-exercise14-video.html.

7 Add the following code and test (ideally in IE and Chrome and Firefox).

<video id="video1" poster="Media/video-preview.jpg" controls width="480"

height="360">

not supported

</video>

<video id="video2" poster="Media/video-preview.jpg" controls width="480"

height="360">

not supported

</video>

<video id="video3" poster="Media/video-preview.jpg" controls width="480"

height="360">

not supported

</video>

8 Add the following code for HTML plug-in and test.

<h2>flash </h2>

Fundamentals of Web Development

width="480" height="360">

</object>

COMPLETE YOUR LAB REPORT

Open lab 05 report.doc and answer the questions based on what you learned in

this lab exercise. Save your lab report as lab05_yourname and submit your

report via dropbox on elearning under lab 05 Report Submission before

Sunday 11:59PM.

Lab 5: HTML Tables And Forms Lab05 Instructions

Navigation menu

Versions of this User Manual:

Views

Navigation