HTML has many other elements some of which are useful even on a basic page.  To practise HTML and learn the new (to you) tags you will now try to recreate three pages using the principles you have just learned plus a few other useful tags.  You know how elements and tags work because of the beginner's HTML tutorial and as all the new tags work in the same way you should be able to guess what to do.

Create a folder inside the folder you have been using so far and call it htmlpractise.  Start by opening your template and saving it in the new folder as index.html.  The first page on a site should normally be called index.html.

A client has requested three Web pages with details on the following three pages. The text and images are at the bottom of each page for you to copy and use to save time (a real client will often provide images and text).  Create the pages using only HTML tags. Do not use CSS to format them yet and you should not need to use anything you have not already learned apart from those listed below.

If you get stuck just skip that bit but make a note to try it again later. This exercise tests your ability to create structure so when finished check that all tags are in pairs and that your indentation is correct.  Also check that the page works in at least three browsers.

Remember to comment your code!

The new elements

In addition to those you know already and can find in your pages you will need to use these to provide what the customer asks for on the three pages:

  • <sup></sup> go around superscript text (e.g. 42)
  • <hr> - makes a line across the page (a horizontal rule)
  • <abbr></abbr> used to identify an abbreviation (a title attribute is used inside the opening tag to give the full text that was abbreviated)
  • <q></q> to go around short quotes within a paragraph
  • <br> gives a line break but without a blank line as seen with p elements
  • <blockquote></blockquote> for long quotes shown as a separate paragraph
  • one of the other type attribute values for a form input field is email (type="email")