Description
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.
CREATING TABLES
PREPARING DIRECTORIES
-
If you haven’t done so already, create a folder in your personal drive for all the labs for this course.
-
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.
E x e r c i s e 5 . 1 — C R E A T E A B A S I C T A B L E
-
Open, examine, and test lab05-exercise01.html in browser.
-
Add the following markup to the document.
<body>
<table>
<tr>
<td>The Death of Marat</td> <td>Jacques-Louis David</td> <td>1793</td> <td>162cm</td> <td>128cm</td>
</tr>
<tr>
<td>Burial at Ornans</td> <td>Gustave Courbet</td> <td>1849</td> <td>314cm</td> <td>663cm</td>
</tr>
-
Fundamentals of Web Development
3
</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.
-
Test in browser.
-
Add the following markup.
<table>
<tr>
<th>Title</th>
<th>Artist</th>
<th>Year</th>
<th>Width</th>
<th>Height</th>
</tr>
<tr>
<td>The Death of Marat</td>
…
This adds a heading row to the table.
-
Test in browser. The result should look similar to that shown in Figure 5.1.
Figure 5.1 – Exercise 5.1 Complete
Copyright © 2017 Randy Connolly and Ricardo Hoar
E x e r c i s e 5 . 2 — C O M P L E X C O N T E N T I N T A B L E S
-
Open, examine, and test lab05-exercise02.html in browser.
-
Add the following content to the table.
<table>
<tr>
<th></th>
<th>Work</th>
<th>Year</th>
<th>Size</th>
</tr>
<tr>
<td><img src=”images/art/05030.jpg” alt=”The Death of Marat” /></td> <td><em>The Death of Marat</em><br/>Jacques-Louis David</td> <td>1793</td>
<td>Width: 162cm<br/>Height: 128cm</td> </tr>
<tr>
<td><img src=”images/art/10020.jpg” alt=”Burial at Ornans” /></td> <td><em>Burial at Ornans</em><br/>Gustave Courbet</td> <td>1849</td>
<td>Width: 314cm<br/>Height: 663cm</td> </tr>
<tr>
<td><img src=”images/art/06020.jpg” alt=”Betty de Rothschild” /></td> <td><em>Betty de Rothschild</em><br/>Jean-Auguste Ingres</td> <td>1848</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
5
<td><em>Arrangement in Grey and Black</em><br/>James Abbott Whistler</td>
<td>1871</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.
-
Test in browser. The result should look similar to that shown in Figure 5.2.
Figure 5.2 – Exercise 5.2 complete
E x e r c i s e 5 . 3 — S P A N N I N G R O W S A N D C O L U M N S
-
Open, examine, and test lab05-exercise03.html in browser.
Copyright © 2017 Randy Connolly and Ricardo Hoar
-
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.
-
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>
<td rowspan=”4″>
<img src=”images/art/5.jpg” alt=”Jacques-Louis David” /> <br/><strong>Jacques-Louis David</strong>
</td>
</tr>
-
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.
-
Test in browser. The result should be similar to that shown in Figure 5.3.
|
Fundamentals of Web Development |
7 |
Figure 5.3 – Exercise 5.3 complete
E x e r c i s e 5 . 4 — A L T E R N A T E T A B L E S T R U C T U R E E L E M E N T S
-
Open, examine, and test lab05-exercise04.html in browser. Notice that the <td> element can be used in rows and columns.
-
Add the following attributes to the table headings.
<table>
<caption>Pricing 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> <td>50MB</td>
Copyright © 2017 Randy Connolly and Ricardo Hoar
<td>200MB</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope=”row”>Daily Uploads</th>
<td>1</td>
<td>10</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope=”row”>Total Uploads</th>
<td>20</td>
<td>100</td>
<td>Unlimited</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.
-
Add the following around the first row.
<thead>
-
Fundamentals of Web Development
9
<tr>
<th></th>
<th scope=”col”>Free</th>
<th scope=”col”>Basic</th>
<th scope=”col”>Premium</th>
</tr>
</thead>
-
Test in browser. There is no special formatting for this element; instead we can apply special styling to it.
-
Add the following element around the other table rows.
<tbody>
<tr>
<th scope=”row”>Upload Space</th> <td>50MB</td>
<td>200MB</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope=”row”>Daily Uploads</th> <td>1</td>
<td>10</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope=”row”>Total Uploads</th> <td>20</td>
<td>100</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope=”row”>Social Sharing</th>
Copyright © 2017 Randy Connolly and Ricardo Hoar
<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.
-
Add the following element between the <thead> and <tbody> element.
<tfoot>
<tr>
<th scope=”row”>Price per year</th> <td>Free</td>
<td>$ 9.99</td> <td>$ 19.99</td>
</tr>
</tfoot>
-
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
E x e r c i s e 5 . 5 — S I M P L E T A B L E S T Y L I N G
-
Open, examine, and test lab05-exercise05.html in browser.
-
Add the following style to the <style> element and test.
-
Fundamentals of Web Development
11
table {
border: solid 1pt black;
}
-
Change the style as follows and test. table, td {
border: solid 1pt black;
}
-
Add the following and test. td, table {
border: solid 1pt black;
border-collapse: collapse;
}
-
Add the following and test. td, table {
border: solid 1pt black;
border-collapse: collapse;
padding: 0.5em;
}
-
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 {
Copyright © 2017 Randy Connolly and Ricardo Hoar
background-color: #CACACA;
}
-
Add the following and test. caption {
font-size: 1.2em;
font-weight: bold;
background-color: #DCA806;
padding: 0.5em;
}
-
Fundamentals of Web Development
13
-
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
E x e r c i s e 5 . 6 — C S S 3 T A B L E S T Y L I N G
-
Open, examine, and test lab05-exercise06.html in browser.
-
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.
Copyright © 2017 Randy Connolly and Ricardo Hoar
-
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>
-
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.
-
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.
-
Add the following style and test. thead th:empty {
background-color: white;
}
-
Fundamentals of Web Development
15
This uses the empty pseudo-element to select any empty <th> element within the <thead>.
-
Add the following style and test. tfoot th {
background-color: white;
}
-
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.
-
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.
-
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.
Copyright © 2017 Randy Connolly and Ricardo Hoar
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.
E x e r c i s e 5 . 7 — C R E A T I N G A F O R M
-
Open lab05-exercise07.html in text editor.
-
Fundamentals of Web Development
17
-
Add the following to the <body> of the document.
<form method=”get” action=””> <fieldset>
<legend>Details</legend>
<p>
<label>Title: </label>
<input type=”text” name=”title” /> </p>
<p>
<label>Country: </label> <select name=”where”>
<option>Choose a country</option> <option>Canada</option> <option>Finland</option> <option>United States</option> </select>
</p>
<input type=”submit” /> </fieldset>
</form>
-
Test in browser.
E x e r c i s e 5 . 8 — T E S T I N G A F O R M
-
Open lab05-exercise08.html in text editor.
-
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.
-
Modify the <form> element as follows then test.
Copyright © 2017 Randy Connolly and Ricardo Hoar
<form method=”post” action=”http://www.randyconnolly.com/tests/process.php”>
FORM CONTROLS
E x e r c i s e 5 . 9 — T E X T C O N T R O L S
-
Open and examine lab05-exercise09.html.
-
Modify the form as follows and test.
<p>
<label>Title: </label><br/>
<input type=”text” name=”title” /> </p>
<p>
<label>Password: </label><br/>
<input type=”password” name=”pass” size=”8″/> </p>
<p>
<label>Email: </label><br/>
<input type=”email” name=”email” size=”45″/> </p>
<p>
<label>Website: </label><br/>
<input type=”url” name=”website” size=”45″/> </p>
<p>
<label>Description: </label><br/>
<textarea placeholder=”enter a description” rows=”5″ cols=”45″></textarea>
</p>
-
Fundamentals of Web Development
19
E x e r c i s e 5 . 1 0 — C H O I C E C O N T R O L S
-
Open and examine lab05-exercise10.html.
-
Modify the form as follows and test (be sure to submit form).
<p>
<label>Countries: </label><br/>
<select name=”country”> <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/>
<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>
<label>City: </label><br/>
<select name=”city”>
<optgroup label=”North America”> <option>Calgary</option> <option>Los Angeles</option>
</optgroup>
<optgroup label=”Europe”>
Copyright © 2017 Randy Connolly and Ricardo Hoar
<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/> <input type=”radio” name=”gender” value=”2″>Male<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>
E x e r c i s e 5 . 1 1 — B U T T O N C O N T R O L S
-
Open and examine lab05-exercise11.html.
-
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=””/>
-
Fundamentals of Web Development
21
Yes
</a>
</button>
<button>
<img src=”images/no16.png” alt=””/>
No
</button>
</p>
<p>
<input type=”submit” />
<input type=”reset” />
</p>
E x e r c i s e 5 . 1 2 — S P E C I A L I Z E D C O N T R O L S
-
Open and examine lab05-exercise12.html.
-
Modify the form as follows and test (be sure to submit form).
<p>
<label>Rate 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>
<label>Companion Color: </label><br/>
<input type=”color” name=”back” /> </p>
Note: not every browser supports all of these controls.
Copyright © 2017 Randy Connolly and Ricardo Hoar
E x e r c i s e 5 . 1 3 — D A T E A N D T I M E C O N T R O L S
-
Open and examine lab05-exercise13.html.
-
Modify the form as follows and test (be sure to submit form).
<p>
<label>Date of photo: </label><br/>
<input type=”date” name=”photodate” /> </p>
<p>
<label>Time of photo: </label><br/>
<input type=”time” name=”phototime” /> </p>
<p>
<label>Date and time of photo: </label><br/>
<input type=”datetime” name=”photodatetime” /> </p>
<p>
<label>Week of photo: </label><br/>
<input type=”week” name=”photoweek” /> </p>
Note: not every browser supports all of these controls.
WORKING WITH AUDIO AND VIDEO
E x e r c i s e 5 . 1 4 — V I D E O A N D A U D I O E L E M E N T S
-
Open and examine lab05-exercise14-audio.html.
-
Add the following code and test.
<h2>mp3</h2>
<audio src=”Media/Sochi-Edit.mp3″ controls >
-
Fundamentals of Web Development
23
Browser doesn’t support the audio control
</audio>
-
Add the following code and test (ideally in IE and Chrome or Firefox).
<h2>ogg</h2>
<audio controls >
<source src=”Media/Sochi-Edit.ogg” >
<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.
-
Add the following code and test (ideally in IE and Chrome or Firefox).
<h2>m4a</h2>
<audio controls >
<source src=”Media/Sochi-Edit.m4a” >
<p>Browser doesn’t support the audio control</p> </audio>
<h2>wav</h2>
<audio controls >
<source src=”Media/Sochi-Edit.wav” >
<p>Browser doesn’t support the audio control</p> </audio>
<h2>webm</h2>
<audio controls >
<source src=”Media/Sochi-Edit.webm” >
<p>Browser doesn’t support the audio control</p> </audio>
-
Add the following code and test.
<h2>All in one</h2>
<audio controls >
<source src=”Media/Sochi-Edit.mp3″ type=”audio/mpeg”> <source src=”Media/Sochi-Edit.ogg” type=”audio/ogg”>
Copyright © 2017 Randy Connolly and Ricardo Hoar
<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”> <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.
-
Open and examine lab05-exercise14-video.html.
-
Add the following code and test (ideally in IE and Chrome and Firefox).
<h2>mp4</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>
<h2>ogg</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>
<h2>WebM</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>
-
Add the following code for HTML plug-in and test.
<h2>flash </h2>
-
Fundamentals of Web Development
25
<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.
Copyright © 2017 Randy Connolly and Ricardo Hoar
