Setting up a project

Before we can start building our web pages, we first need a foundation to work from. We need to make sure we have a folder dedicated to storing our projects and also an organised file structure for each project.

  1. Create a folder in an appropriate location called Authoring projects.
  2. Create a folder inside called Law hill website.
  3. Inside, create a file called index.html.
  4. Additionally, create the following folders:
    • css
    • images
    • pages
  5. Inside css, create a file called style.css.
  6. Download this file, called simple-reset.css, and place it inside the css folder.

Folder structure

Folder Description
css Stores style sheets (CSS) for styling web pages.
images A place for images to be stored.
pages Other web pages (HTML) should be stored here.

You may have additional folders in future projects for videos or sound, or even just for greater organisation, such as sorting images into specific categories.

Files

File Description
index.html The file the browser will look for first when directed to a URL. You can consider this the home page.
css/style.css The main CSS file used for styling your web pages.
css/simple-reset.css A short CSS file that ensures greater consistency in how elements act when styled by resetting their default properties. There are other, more complex CSS resets out there, but you shouldn't need to worry about them for now.
error_outline

Terminology

  • HTML - Hyper Text Markup Language. Used to describe document structure.
  • CSS - Cascading Style Sheet. Used to describe document styling and layout.

Basic HTML template

Open up index.html in an appropriate text editor, such as Notepad++, Atom or Sublime Text. Copy the following HTML code into index.html.

code

index.html

Doctype declaration

Must come at the top of each HTML document.

This tells the browser that this is a HTML document and what version of HTML it is, which in this case is HTML 5. Before HTML 5, you could choose from different types of HTML 4.01 and XHTML, but they are no longer relevant today.

<html> tag

Contains all HTML. The lang attribute sets the language of the document

<head> tag

Contains details of the HTML document, such as its title, links to styling, and other meta information.

<title> tag

Sets the title of the page which you can see in the browser tab.

<meta> tag

Describes this HTML document in various ways. This one sets the character encoding of the document which means special characters, such as those in foreign languages, will display correctly.

Links files to this document, such as CSS or JavaScript files.

<body> tag

The <body> must come after the <head> tag, not before.

Contains all content to be displayed in the browser.

Next section