So far we have been creating little bits of html. Now let’s create a whole document.

<!DOCTYPE html>
<html>
  <head>
    <title>A demo page</title>
  </head>

  <body>
    Your page goes here
  </body>
</html>

Things to notice:

The doctype

<!DOCTYPE html>

This is an HTML5 doctype. It tells the browser what type of HTML we are using. The HTML5 doctype is the only doctype you should be using at the moment.

The html tag

<html></html>

This tag wraps the entire document. We call it the root tag. Any tree we draw will have this as it’s root.

The head tag

<head></head>

This tag marks off the header of the document. This section contains information about the document such as the title, and description. You can also link to and external resources your page needs here, like JavaScript files or CSS stylesheets.

More on this later

The body tag

<body></body>

This is your page body, the part of the page that will be rendered on the screen.

All the code we have written so far, all your h1, p, table, el, etc tags go in here.

Exercise

You are going to create a little page on any topic you like. Don’t worry that it doesn’t look pretty yet, we’ll get to that soon.

  1. Create a new folder and index file.
  2. Create a complete web page. Include the doctype, head and body sections.
  3. Add an h1 to the body.
  4. Add some paragraphs or text.
  5. Add a hyperlink to one of the paragraphs.
  6. Make some of your text bold.
  7. Make some of your text italic.
  8. Add a picture.
  9. Add in a table of data.
  10. Draw the HTML tree diagram. When you’ve done it, show me.