Getting organised

1. Set your Learning Objectives to red.

2. Open up your PowerPoint from last lesson it should be called 'Web Design'.

To download the PowerPoint by clicking on the image below

Save your PowerPoint as 'Web Design'



---

In order to help you on your HTML journey we are going to use a website that can teach you all the things you need to know about creating HTML web pages.

Click on the image below to go to the W3 Shools website

Using Edublocks for HTML5

We are going to look at how we can use the block coding tool Edublocks to help us on our HTML journey.

1. Firstly let's create an account, click on the link below:


Use your school email and password to create an account with the microsoft button

---

When you have logged in you can use the link below to create your initial html page



---

We now need ready to turn our code into a web page you can view in your web browser.

Firstly we need to make sure we have a folder to store our web page

Create a folder for you web pages.

Task 1

1. How to open a text editor

   In order to create our web page we need to use a text editor

   

Copy your HTML code from Edublocks into your notepad++ file.



Save your file

Adding an image onto the page

Before we add in our own page banner let's first see how we add an image to our website. To add an image we need to put a link to it in the img src tag. Copy the link below and paste it into the img src tag.

https://www.freewebheaders.com/wp-content/gallery/computer/colorful-tablet-computer-tech-creative-web-header.jpg

Task 4

if you haven't made a banner use the one below just so you have a banner image to use. Right click on it and save it as banner.png

1. Copy your banner into your Web Design folder and make sure its is called banner

2. Now write the name banner.png inside of your img src tag and make sure it is inside your header box

We cannot give edublocks a link to our banner as it is on our computer, so we will have to copy our code into our notepad ++ page to see this working.

You must put your banner and web page inside the same folder, "Web Design", for this to work.

3. After you have copied your code Save it and then refresh your browser and your page should now look something like this.
Click here

Extension

Can you add some text to go with your image ?

---

In order to make a website quickly web designers often use CSS frameworks and custom made templates.

A framework is a design structure where a lot of the styling has been done for you by creating classes that do specific things like creating tables or a colour scheme.

Click on the link below to see W3 Schools CSS framework and some of their templates.

Maybe you could adapt one of their templates for your own website

Summing it all up

Lets look at the learning outcomes and decide which one best describes our current level of understanding :

Tick the one you feel is closest to your level