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'



---

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

Using Edublocks for HTML5

Click on the link below to log into your edublocks account.

---

When you have logged in open create a new page for the navigation bar you are going to make later.



---

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++

   
   

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 ?

If your dividers start to move about when you add text to them you will need to add in the styling below to the bottom of your style for the divider class

In order to complete our web page template we need to have some way of navigating between pages

Task 1

1. Create a navigation bar using the code below.




---



---

Extension- My Colours

Change the colours of the buttons to your own colours.

Task

1. Add the navigation bar code to your main page code using the example below to help you.



2. So that it looks like this:


3. So when you run it your page looks something like this:



---



---

Extension

4. Can you make a copy of your main page and save it as "page2", so you can hyperlink to it?

---

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