Getting started

Follow these steps to make your first web page:

1. Get organised

Web Design projects mean you will be working with lots of files.

You will be making .html files which are web pages.

You will also be saving images of different formats eg .jpg, .png, .bmp

So, first, let's set up a project folder for Focus 1. Create the following folder structure:

2. Choose a text editor

You will be doing a lot of typing!

Choose a good text editor to type your HTML script.

Some options are:

Windows	Mac
Notepad++	Brackets

3. Save your first .html file

Create a new file in your text editor.

Save the empty file as focus1.html in your focus1 project folder.

Check - use your File Explorer to look at your file in your folder. If it has a browser icon, you have probably been successful!

4. Basic Structure

In your focus1.html file, type the basic structure of every web page on planet Earth:

5. Adding content

Your webpage content eg text, images, videos, go into the body section of your .html file

Let's start with text.

Type the following text into the body section of your webpage:

Save your file and open it in a web browser. Does it look the same?

Tags help the browser to understand how to place content into a webpage.

There are a few text tags in HTML:

• h1
• h2
• h3
• h4
• h5
• p

Edit your page as follows:

Save your file and refresh your browser window.

Can you see the difference between the different tags. For example, wheat is the difference between the h1 tag and the h3 or p tags?

Important note about tags

Most tags come in pairs! eg:

<h1>blah blah blah</h1>

The first tag opens the pair and the second tag closes the pair.

I wonder what would happen if we forgot to close the tag pair?

TASK

Introduce yourself by editng your focus1.html file.

Create a webpage that will tell the world:

1. your name - use the h1 tag for this - it will be the main heading
2. where you are from
3. your hobbies
4. any other interesting things about you.

Use different tags in your page eg you could make a heading and/or subheadings.

Challenge

If you have time, can you also figure out how to:

• change the background color of the body section of your page?
• include an image in your page?
• include a Youtube video in your page
• change the color of the heading of your page

SUBMISSION

Submit your project folder as instructed by your tutor.