$24
LAB 5(week 4, chapter 5 & 6) HTML Tables, Forms and Media Solution
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.0 — 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
<tdThe Death of Marat</td
<tdJacques-Louis David</td
<td1793</td
<td162cm</td
<td128cm</td
</tr
<tr
<tdBurial at Ornans</td
<tdGustave Courbet</td
<td1849</td
<td314cm</td
<td663cm</td
</tr
</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
<thTitle</th
<thArtist</th
<thYear</th
<thWidth</th
<thHeight</th
</tr
<tr
<tdThe 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
Exercise 5.0 — Complex Content in Tables
1
Open, examine, and test lab05-exercise02.html in browser.
2
Add the following content to the table.
<table
<tr
<th</th
<thWork</th
<thYear</th
<thSize</th
</tr
<tr
<td<img src="images/art/05030.jpg" alt="The Death of Marat" /</td
<td<emThe Death of Marat</em<br/Jacques-Louis David</td
<td1793</td
<tdWidth: 162cm<br/Height: 128cm</td
</tr
<tr
<td<img src="images/art/10020.jpg" alt="Burial at Ornans" /</td
<td<emBurial at Ornans</em<br/Gustave Courbet</td
<td1849</td
<tdWidth: 314cm<br/Height: 663cm</td
</tr
<tr
<td<img src="images/art/06020.jpg" alt="Betty de Rothschild" /</td
<td<emBetty de Rothschild</em<br/Jean-Auguste Ingres</td
<td1848</td
<tdWidth: 142cm<br/Height: 101cm</td
</tr
<tr
<td<img src="images/art/13030.jpg" alt="Arrangement in Grey and Black" /</td
<td<emArrangement in Grey and Black</em<br/James Abbott Whistler</td
<td1871</td
<tdWidth: 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.0 — Spanning Rows and Columns
1
Open, examine, and test lab05-exercise03.html in browser.
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
<thArtist</th
<th colspan="4"Work Details</th
</tr
<tr
<td rowspan="4"
<img src="images/art/5.jpg" alt="Jacques-Louis David" /
<br/<strongJacques-Louis David</strong
</td
</tr
4
Add the following element at the beginning of the table.
<table
<captionArtist Inventory</caption
<tr
<thArtist</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.
Figure 5.3 – Exercise 5.3 complete
Exercise 5.0 — 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
<captionPricing Table</caption
<tr
<th</th
<th scope="col"Free</th
<th scope="col"Basic</th
<th scope="col"Premium</th
</tr
<tr
<th scope="row"Upload Space</th
<td50MB</td
<td200MB</td
<tdUnlimited</td
</tr
<tr
<th scope="row"Daily Uploads</th
<td1</td
<td10</td
<tdUnlimited</td
</tr
<tr
<th scope="row"Total Uploads</th
<td20</td
<td100</td
<tdUnlimited</td
</tr
<tr
<th scope="row"Social Sharing</th
<td</td
<td</td
<td</td
</tr
<tr
<th scope="row"Analytics</th
<td</td
<td</td
<td</td
</tr
</table
This improves the accessibility of the table.
3
Add the following around the first row.
<thead
<tr
<th</th
<th scope="col"Free</th
<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
<td50MB</td
<td200MB</td
<tdUnlimited</td
</tr
<tr
<th scope="row"Daily Uploads</th
<td1</td
<td10</td
<tdUnlimited</td
</tr
<tr
<th scope="row"Total Uploads</th
<td20</td
<td100</td
<tdUnlimited</td
</tr
<tr
<th scope="row"Social Sharing</th
<td</td
<td</td
<td</td
</tr
<tr
<th scope="row"Analytics</th
<td</td
<td</td
<td</td
</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
<tdFree</td
<td$ 9.99</td
<td$ 19.99</td
</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.0 — Simple Table Styling
1
Open, examine, and test lab05-exercise05.html in browser.
2
Add the following style to the <style element and test.
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 {
background-color: #CACACA;
}
7
Add the following and test.
caption {
font-size: 1.2em;
font-weight: bold;
background-color: #DCA806;
padding: 0.5em;
}
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.0 — 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.
3
Add the following to the bottom two rows of the markup.
<tr
<th scope="row"Social Sharing</th
<td</td
<td<span class="check"</span</td
<td<span class="check"</span</td
</tr
<tr
<th scope="row"Analytics</th
<td</td
<td</td
<td<span class="yes"</span</td
</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;
}
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.
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.0 — Creating a Form
1
Open lab05-exercise07.html in text editor.
2
Add the following to the <body of the document.
<form method="get" action=""
<fieldset
<legendDetails</legend
<p
<labelTitle: </label
<input type="text" name="title" /
</p
<p
<labelCountry: </label
<select name="where"
<optionChoose a country</option
<optionCanada</option
<optionFinland</option
<optionUnited States</option
</select
</p
<input type="submit" /
</fieldset
</form
3
Test in browser.
Exercise 5.0 — Testing a Form
1
Open lab05-exercise08.html in text editor.
2
Modify the <form element as follows then test.
<form method="get" action="http://www.randyconnolly.com/tests/process.php"
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.
<form method="post"
action="http://www.randyconnolly.com/tests/process.php"
Form Controls
Exercise 5.0 — Text Controls
1
Open and examine lab05-exercise09.html.
2
Modify the form as follows and test.
<p
<labelTitle: </label<br/
<input type="text" name="title" /
</p
<p
<labelPassword: </label<br/
<input type="password" name="pass" size="8"/
</p
<p
<labelEmail: </label<br/
<input type="email" name="email" size="45"/
</p
<p
<labelWebsite: </label<br/
<input type="url" name="website" size="45"/
</p
<p
<labelDescription: </label<br/
<textarea placeholder="enter a description" rows="5"
cols="45"</textarea
</p
Exercise 5.0 — Choice Controls
1
Open and examine lab05-exercise10.html.
2
Modify the form as follows and test (be sure to submit form).
<p
<labelCountries: </label<br/
<select name="country"
<optionAustralia</option
<optionCanada</option
<optionFrance</option
<optionSweden</option
<optionThailand</option
<optionUnited States</option
</select
</p
<p
<labelContinent: </label<br/
<select size="4" name="continent"
<option value="NA"North America</option
<option value="EU"Europe</option
<option value="AS"Asia</option
<option value="SA"South America</option
</select
</p
<p
<labelCity: </label<br/
<select name="city"
<optgroup label="North America"
<optionCalgary</option
<optionLos Angeles</option
</optgroup
<optgroup label="Europe"
<optionLondon</option
<optionParis</option
<optionPrague</option
</optgroup
</select
</p
<p
<labelGender of Traveler: </label<br/
<input type="radio" name="gender" value="1"Female<br/
<input type="radio" name="gender" value="2"Male<br/
</p
<p
<labelHow 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.0 — Button Controls
1
Open and examine lab05-exercise11.html.
2
Modify the form as follows and test.
<p
<input type="button" value="Click Me" /
<input type="image" src="images/yes16.png" /
<input type="image" src="images/no16.png" /
</p
<p
<button
<a href="#"
<img src="images/yes16.png" alt=""/
Yes
</a
</button
<button
<img src="images/no16.png" alt=""/
No
</button
</p
<p
<input type="submit" /
<input type="reset" /
</p
Exercise 5.0 — Specialized Controls
1
Open and examine lab05-exercise12.html.
2
Modify the form as follows and test (be sure to submit form).
<p
<labelRate this photo: </label<br/
<input type="number" min="1" max="5" name="rate" /
</p
<p
Happiness Rating: Grumpy
<input type="range" min="0" max="10" step="1" name="happiness" /
Ecstatic
</p
<p
<labelCompanion Color: </label<br/
<input type="color" name="back" /
</p
Note: not every browser supports all of these controls.
Exercise 5.0 — 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
<labelDate of photo: </label<br/
<input type="date" name="photodate" /
</p
<p
<labelTime of photo: </label<br/
<input type="time" name="phototime" /
</p
<p
<labelDate and time of photo: </label<br/
<input type="datetime" name="photodatetime" /
</p
<p
<labelWeek of photo: </label<br/
<input type="week" name="photoweek" /
</p
Note: not every browser supports all of these controls.
Working with Audio and Video
Exercise 5.0 — Video and Audio Elements
1
Open and examine lab05-exercise14-audio.html.
2
Add the following code and test.
<h2mp3</h2
<audio src="Media/Sochi-Edit.mp3" controls
Browser doesn't support the audio control
</audio
3
Add the following code and test (ideally in IE and Chrome or Firefox).
<h2ogg</h2
<audio controls
<source src="Media/Sochi-Edit.ogg"
<pBrowser 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).
<h2m4a</h2
<audio controls
<source src="Media/Sochi-Edit.m4a"
<pBrowser doesn't support the audio control</p
</audio
<h2wav</h2
<audio controls
<source src="Media/Sochi-Edit.wav"
<pBrowser doesn't support the audio control</p
</audio
<h2webm</h2
<audio controls
<source src="Media/Sochi-Edit.webm"
<pBrowser doesn't support the audio control</p
</audio
5
Add the following code and test.
<h2All in one</h2
<audio controls
<source src="Media/Sochi-Edit.mp3" type="audio/mpeg"
<source src="Media/Sochi-Edit.ogg" type="audio/ogg"
<source src="Media/Sochi-Edit.m4a" type="audio/mp4"
<source src="Media/Sochi-Edit.wav" type="audio/wav"
<source src="Media/Sochi-Edit.webm" type="audio/webm"
<pBrowser 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).
<h2mp4</h2
<video id="video1" poster="Media/video-preview.jpg" controls width="480"
height="360"
<source src="Media/rocky.mp4" type=”video/mp4"
not supported
</video
<h2ogg</h2
<video id="video2" poster="Media/video-preview.jpg" controls width="480"
height="360"
<source src="Media/rocky.ogv" type=”video/ogg"
not supported
</video
<h2WebM</h2
<video id="video3" poster="Media/video-preview.jpg" controls width="480"
height="360"
<source src="Media/rocky.webm" type=”video/webm"
not supported
</video
8
Add the following code for HTML plug-in and test.
<h2flash </h2
<object type="application/x-shockwave-flash" data="Media/rocky.swf" 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.
