Exercise

1. Once again, start by creating a copy of the div with the ‘tables’ id, including all the nested content.
2. Paste this below the ‘lists’ div.
3. Now replace the ‘tables’ id with ‘forms’ and also replace the header text from ‘section-header’ to say ‘Forms’.
4. Remove all nested divs from the ‘section-body’ div.
5. Then, inside the ‘section-body’, create a new form.
6. Inside the form tags, create three input fields: one for first name, one for surname, and finally one for email address, ensuring that you use the correct input types for each.
7. Break up each input with a line break to force each input onto a row on its own.
8. Create labels for each input and then finish it off with a submit button.
9. Give the form an action of a mailto with the to: address set to ‘contact@website.com’ and a subject of ‘New User Request’.

Links

We focused on links in Chapter 2 and worked through the different ways we can instruct the browser to open the link using the ‘target’ attribute. We introduced the concept of absolute and relative urls and when to use one over the other. We also saw path structures and learned how to use a path structure to navigate through directories. We lastly saw bookmarks and how to scroll the webpage to a specific section in the website. Let’s now pull together what we have learned about links, and more specifically HTML bookmarking, to create a navigational structure to finish off our website.