Introducing layout

The steps for this exercise:

  1. Create a new folder on your web server and name it scripts. This is where we will save our stylesheets.
  2. Create a new HTML5 document.
  3. We’re going to break the page content into four sections.
  4. Add a stylesheet.
  5. Load class-4-demo.html in your browser.

 

 

1. Create a scripts folder on the web server

FTP and web server file structure
Remember to double-click the public_html folder before creating your new directory!

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).

Upload class-4-demo.html to the web server in the hcde532 folder.

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