LearnITWithMrC

Putting it all together

What am I Learning today?

I am learning how to create a multipage website with pages linked together

I am learning how to use HTML tags to add functionality (e.g. links, images) to my website

Knowledge Organiser

Lesson

Task 1 - Getting up to date Click to see more

We need to make sure we are up to date with our page so we can complete todays tasks

You must have completed your navigation bar to create the page links,

Task 1

Open your web page from last week using either Edublocks or Notepad++.

If your webpage is in Edublocks then Copy the code and paste it into your notepad++ index.html page

Open your page in a web browser

Task 2 - Duplicating your pages Click to see more

We now want to make a couple of copies of our home page to create other pages we can link to that will have the same style as our Home Page

To do that we simple need to open up two new files in notepad ++ and save them as page2 and page 3.

Don't forget to change the Language to HTML.

Task 2

Open up two new files in notepad ++
Change the change the Language to HTML.
save them as page2 and page3.
Open them both in Chrome.

Don't have any spaces in the filename of your HTML page.

Extension - Make the pages different

Change your two new pages so that you can tell the difference between them.

Task 3 - Adding Hyperlinks Click to see more

Now that we have got three different pages we are going to add in some hyperlinks so that we can click to move between the pages.

Task 3

We are going to use the anchor tag to create our hyperlinks. Anchor tags<a> need a "hyperlink reference" (href) to the page they will link to. Look at the example below

<a href="page2.html" >Page 2 </a>

Put the above link into your navigation bar
Test that it works by running the page and clicking on the link

Extension

Add in another link this time for page3 also try styling the link by changing its background colour. Click on the link below to see more styles you can use.

W3 Schools

Task 4 - Web Frameworks Click to see more

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

Task 5 - Lesson review Click to see more

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

Learning Outcomes I need to learn how to create a multipage website with pages linked together

I have a basic understanding of how I can create a multipage website with pages linked together with a little help from my teacher
I can show my teacher that I can create a multipage website with pages linked together without their help.
I can create a multipage website with pages linked together independently and I can also explain it to others and can complete any extension tasks I am given.

🠜 Now update your learning objectivesClick on the Assessment image

My Notes: Web_Design

Student_Comment_6 not found