Exercise

1. Create a copy of the div with the ‘tables’ id, including all the nested content.
2. Paste this below the ‘tables’ div.
3. Now replace the ‘tables’ id with ‘lists’ and also replace the header text from ‘section-header’ to say ‘Lists’
4. Remove all nested divs from the ‘section-body’ div.
5. Then, inside the ‘section-body’, create the following, each below the previous:
   1. –  An <h2> tag with the text ‘Unordered List Example’.
   2. –  An unordered list containing three list items called ‘Unordered List Item 1’ with the number ascending with each new list item.
   3. –  An <h2> tag with the text ‘Ordered List Example’.
   4. –  An ordered list containing three list items called ‘Ordered List Item 1’ with the number ascending with each new list item.
   5. –  An <h2> tag with the text ‘Definition List Example’.
   6. –  A definition list containing three list terms called ‘Definition List Term 1’ with the number ascending with each new list item, followed by their corresponding definition examples.

Forms

Chapter 3 saw us explore the use of forms in web design. We understood how they function and also how they are created. We then broke down the main components that are used to construct a form and saw the differences between them and how they operate within the form. We also introduced the functionality of opening a draft email in the user’s email client, which we put into practice for our form action. Let’s replicate this on our website for future reference.