Introducing layout

The steps for this exercise:

  1. We will save our stylesheet in the scripts directory.
  2. We will create a new HTML5 document.
  3. We will break the page content into four sections.
  4. We’ll then add a stylesheet.
  5. Load class-4-demo.html in your browser.



1. Make sure you have a scripts folder on the web server

Need a refresher? See session 01 > Setting up your server space

2. Create a new HTML5 document.

Use this code as a template. Save it as template.html; then save a copy as class-4-demo.html. It’s this later file we will work with tonight.


3. Add this content to the BODY section of demo-class-4.html, then save.

4. Add a stylesheet and use it to style your page.

Next, open a new document; paste the code below; save the file as class-4.css and upload it to the scripts folder.

Now add the stylesheet just above the closing head element of the document (per the example).


5. Upload class-4-demo.html to the web server in the hcde532 working directory.

6. Load class-4-demo.html in your browser.

It should look like this: