PAGES AND LAYOUT IN HTML PRESENTATION FOR YEAR 11

PAGES AND LAYOUT IN HTML PRESENTATION FOR YEAR 11

1. Pages & Layout HTML – Lesson 3

2. Pages & Layout Speech Tennis: You and the person sitting next to you and have to try and name as many different HTML tags as possible. If you or your partner repeats a tag already said then they are out. Extension: what do the tags you said do? 14/10/2019

3. What we are learning today Learning Objective Why does the layout of a website change how a user interacts with it? Success Criteria Define layout Describe how divs create a layout Explain why layouts change the usability of a website

4. Recap from last week Last week we looked at the following tags: < img >, <table>, <a> What do these tags do?

5. <div></div> Divide up your page using the <div> tag Each <div> section can have its own formatting applied Content Header Navbar Container

6. <div></div> code You can see in the code to the left There are three different sections in the code You can then put different tags in the divs

7. What divs look like

8. Choose your page Android For the brave. Add in your own divs to the template. Linux For the courageous. Starts out with the divs. From there you are on your own

9. Task There are three divs in the template. They need to be called: h eader n avigation c ontent Create a webpage about your favourite animal

10. Hyperlinks Like in our last lesson you can use links to link between the pages in your own website that we will create later A link is created by using the <a> tag. This a nchors a link to your web page. < a href =“home.html”>Home Page</a> The page to link to

11. Task In the navigation div of your webpage Please make a list of three links to pages that you will create soon. Home About Gallery Support: www.w3schools.com/html

12. Multiple pages Why does a website have more than one page? Websites use more than one page to show different information. It also is used to section the information.

13. Create your extra pages We going to create duplicates of the pages you just edited. In notepad++ you need to click: File -> Save As... Give the html file a different name and then edit the heading to match the file name E.g. If I call a file about.html then in that file I’d change a heading to say About.