Workshop

The workshop contains quiz questions and activities to help you solidify your understanding of the material covered. Try to answer all questions before looking at the "Answers" section that follows.

Quiz

1:
Write the HTML to make it possible for someone clicking the words "About the authors" at the top of a page to skip down to a list of credits at the bottom of the page.
2:
Suppose your company has three employees and you want to create a company directory page listing some information about each of them. Write the HTML for that page and the HTML to link to one of the employees from another page.
3:
If your email address is bon@soir.com, how would you make the text "goodnight greeting" into a link that people can click to compose and send you an email message? How would you code the o's in the email address to help hide the address from spammers?

Answers

A1:
Type this at the top of the page:

<a href="#credits">About the Authors</a>

Type this at the beginning of the credits section:

<a id="credits"></a>

A2:
The company directory page would look like the following:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title>company directory</title> </head> <body> <h1>company directory</h1> <h2><a id="jones"></a>jane jones</h2> <p> ms. jones is our accountant... etc. </p> <h2><a id="smith"></a>sam smith</h2> <p> mr. smith is our salesman... etc. </p> <h2><a id="bharwaniji"></a>r.k. satjiv bharwahniji</h2> <p> mr. bharwahniji is our president... etc. </p> </body> </html>

If the file were named directory.html, a link to one employee's information from another page would look like the following:

<a href="directory.html#bharwaniji">about our president</a>

A3:
Type the following on your web page:

send me a <a href="mailto:bon@soir.com">goodnight greeting</a>!

To help hide the email address from spammers, replace the o's in the address with o, like this:

send me a <a href="mailto:bon@soir.com">goodnight greeting</a>!