Prior Learning - Set up a website

Aim

Learn how to set up the folders and files needed for a website.

Learn how to set up the HTML elements needed for a webpage.

0 - Create a folder for the website

0.1 - Create a folder for your whole website

Create a folder for your website.

0.2 - Create folders for images, css and fonts

Create folders called:

images

fonts (optional)

css

Make sure the names are spelt correctly and have no capital letters or spaces

1 - Create your HTML file

Your HTML file will hold all the content of your web page.

Each page of the website will have its own HTML file, but for the moment just create one.

Open Notepad++.

Create an HTML file.

Save As index.html in the folder you created.

2 - Create your CSS file

You will style your website using CSS (Cascading Style Sheets).

Create a file called style.css in the css folder.

3 - Create the web page sections

Create each of these parts of the HTML.

3.1 - Doctype

First declare the doctype.

3.2 - HTML start and end tags

3.3 - Head and Body

3.4 - Meta tags

3.5 - Link to stylesheet

Your HTML page needs to be linked to your stylesheet, otherwise it won’t work.

The path must match exactly with where your stylesheet is and what it is named.

3.5 - Title

The Title appears in the tab at the top when the webpage is loaded.

At the end, your HTML should look like this:

4 - Create the body sections

The body is made up of sections.

Before putting in any content or doing any styling, create the sections like <header>, <nav> and <article>.

Imagine that your website design is like this:   The HTML you need is shown below.

Note - your website might be a bit different. The <header> and <footer> are sometimes outside the wrapper as shown below. So that HTML would look like this:

My sections look like this:

5 - Check the link to the stylesheet works

Before you try to style the webpage, check that the link to the stylesheet works  by giving the page a background colour.

Save all the pages.

Open the file in your browser.

Put this in your CSS file:

SAVE IT and SAVE THE HTML. Run in Chrome (or a different browser).

You should see a red page . If you don’t, check that the link is correct.

6 - Set up your basic CSS styling

We need to set the height, width and colour of the elements.

NOTE: we don’t need to use the right background images or colours at this stage. We just want to see what we are doing. If you do already have the right images or know the colour, you could use it now. I’ve just used some placeholder colours so I can see what is going on.

It should now look like this:

9 - Finish

You have now completed the basic setup for your webpage.

If you are at NCEA Level 2, you may now need to learn how to put in a web form and how to use advanced tools.

The next  tutorial will help you with this.