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'



---

3. Create a folder for you web pages.

   

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



---

Now it's time to create your first HTML code by copying the example below

1. You should change the title to your websites name.
2. See what happens if you add in another text block and add some extra text.

---

Task 1

---

---

Extension- More tags

See if you can work out how to use these two tags and what they might be used for.

Creating a layout using styling and dividers

One of the best ways we can layout our page is to use dividers. Dividers or divs enable us to split up and style different areas of our page.

Let's create the outline area for our page.

To do that we are going to use a divider <div> tag and style it with a border so we can see it.

Task 2

Create the block below in Edublocks, then copy the HTML code into your notepad file.

Your code should look like code below:

Your web page should look like this

---

---

---

Add some more text into your blue paragraph tag

See what happens to your red box if you add some more text to your blue paragraph tag

Now let's change the size of the divider so it will be the full size of our page. To do that we need to add the styles Height and Width into our styling for our divider.

However this makes the styling in the blocks a little cumbersome and more difficult to reuse. So instead of doing the styling inside of our divider, we are going to style our divider in the Head of our web page.

To do that we have to give our style a name. Then we can use that name in our divider and it will do all the styling we use here inside our divider.

Change your code so it now looks like this:

We can have as many styles as we want in a class.

---

---

Extension- border style and background

The border has 3 properties the first is its width in pixels(px), in our case that is 1px the second is it's style which we have chosen as solid and the third is its colour we have chosen red

• Change the width of the border in pixels(px)
• Change the colour of the border using one of your hexadecimal codes you created last week when you designed your page

• Change the colour of the background of your outline divider by adding the background-color block inside of your class style block

Centering our divider on the page

Web pages that are not full pages tend to be created so that they are in the centre of the full page

We can do that to our page by adding a style called margin

However what we want to do can't be done with the margin block in edublocks, so we need to use the plain text block and type our code into it

If we set the properties of the margin to 0 auto then it will automatically centre our divider(div) on the page

Task 3

1. Add this to the end of your divider style: margin: 0 auto;

see example below

Click on the button below to see what your code would look in a web browser.
Click here

---

---

Extension

Screenshot your centred web page layout and your HTML code into your PowerPoint

---

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

---

2. Now either go back to your file explorer page double click on your index.html file and it will open up in a web browser for you to see

   Or do the following in notepad++

   
   

---

---

Extension- More tags

Putting dividers inside of divider

Now we have our outside border created we are going to split our page up using more sections tags so that it looks something like this

---

Task 4

To do this we first need to split our page into 3 sections see below:

1. Let's first create the three sections for our page


---

2. Now let's create a styled area for our page header where our banner will go
3. Create another style underneath our first outline to call it .myheader and then style it the same as our first style i.e. width 1200px but set it's height to 100px see below:


Copy your code to your notepad file and save it and then refresh your browser and your page should now look something like this.

Click here

---

Extension

Can you add a class style for the Main part of your page using the divider tag <div> ?

Can you add a class style for the Footer to your web page using a footer tag <div> ?

Click here to see my example

---

Screenshot your code into your PowerPoint

---

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