BUILDING A WEBSITE 7.4.2: Basics of HTML and CSS

STARTER ACTIVITY >> WEB BROWSERS Which web browser do you use? How many browsers can you think of? What do you like about the web browser you use the most? STARTER ACTIVITY

THIS LESSON: LEARNING OBJECTIVES In this lesson you will: UNDERSTAND how to set up a HTML template. LEARN how tags are used in HTML. UNDERSTAND how CSS can be used to add style to a webpage. So that you can: BEGIN the very first steps of creating your own website! The design will be used as the template to create websites in future lessons.

HOW WEBSITES ARE MADE... Information from BBC Bitesize. Websites are drawn out by hand on large sheets of paper...

… then scanned into a computer to create the website. Information from BBC Bitesize. … then scanned into a computer to create the website.

BUT AM I RIGHT? THINK: PAIR: SHARE: by yourself! your thoughts with the person next to you! SHARE: be prepared to share your thoughts with the rest of the class! Information from BBC Bitesize.

3 BUILDING BLOCKS To create a powerful website from scratch there are 3 languages you need to learn. These are... Information from BBC Bitesize. More information about each on the next slide...

HTML Hyper Text Markup Language provides the basic structure of sites, which is enhanced and modified by other technologies like CSS and JavaScript. Cascade Style Sheets is used to control presentation, formatting, and layout. JavaScript is used to control the behaviour of different elements. CSS Tell students they can learn JavaScript as an extension if they wish. Year 7 students will use it in year 8 but current year 8 students will miss out. JAVASCRIPT This term you will learn HTML and CSS. We will save JavaScript for another time!

BEFORE WE GET STARTED! Open Notepad++ and your online powerpoint. Remember that you will use your development diary to check your progress. It is important that you update it regularly during the lesson to show your progress. Remember to add screenshots of your work and write about your work - this is important to develop your coursework skills.

THE CODE BEHIND >>TASK When visiting any website on Google Chrome you can look at the HTML code behind a webpage! To do this by opening the developer tools. Shortcut = Ctrl + Shift + C Visit the school website Look at the HTML What do you notice? Add your thoughts do your diary

HTML TAGS HTML is built using tags. There are hundreds of different types of tags, each for doing a different job. For example, we can use <p> and </p> to show a new paragraph of text. It is important that when you <open> a tag, you make sure you </close> it! Information from BBC Bitesize. Beware, there are a few exceptions to the rule!

PARTS OF A WEBSITE Head Body Websites are made up of a head and body. All websites also follow a similar HTML template that we use as the first building block. >> GET READY! The next slide has the template. Open Notepad ++ and copy the code. Head Body Information from BBC Bitesize. Let’s set up your website...

>>TASK: Start Building! Copy the code into your Notepad++ and save as ‘mywebsite’ in a new folder called ‘HTML’. >>GOOD Change the title between the <title> tags to match your idea. >>BETTER Between the body tags, add a header tag, for example <h1> Best Website Ever! </h1>. >>BEST Under your header, add some text between paragraph tags, for example <p>text is cool</p>. Information from BBC Bitesize. You can also use <b> tags to make text bold, <u> undeline and <i> italics.

>>TASK: Add an image! Firstly, you need to download some images from Google and save them into your ‘HTML’ folder. >>GOOD Use the image tag <img> to add an image. >>BETTER Change the width of the picture. >>BEST Try adding the image as the background of a paragraph. For example, <p style="background-image:url('clouds.jpg')"> Information from BBC Bitesize. You can also use <b> tags to make text bold, <u> undeline and <i> italics.

CLASS REVIEW Have you created a HTML template? Have you included text to match your ideas from last lesson? Have you included images?

INTRODUCTION TO CSS At the moment, our websites lack style. We can change that by adding CSS. We can add it straight to our HTML in Notepad++ without switching to another application. All CSS is laid out in a similar way, such as the example to the right. Information from BBC Bitesize. Ready to try it! Notepad++ at the ready...

>>TASK: Add some style! You need to add some <style> tags, so that you can write the CSS between them. >>GOOD Change the colour of your headers and text. >>BETTER Change the font style and size. >>BEST Research available colours for CSS and get really creative. Information from BBC Bitesize.

>> TASK: DEVELOPMENT DIARY UPDATE >> EXTENSION: Add screenshots of your work to your development diary. Add a write up about what you have achieved and how you did it. Think about what else you would like to learn to be able to build your website further. Remember your diary is where you will showcase your work. Don’t be lazy with it! Be proud of your work! Coursework is a vital skill to develop. Don’t just write short sentences. Explain and justify the design choices you have made. Discuss what you have learnt and how you applied it! >> EXTENSION:

TASK REVIEW Show your website to the person next to you. Ask questions about the work. Give the work a rating out of five stars. Can you offer feedback? What is good about the work? What could be improved?

PLENARY: Epraise Questions What are the three building blocks of website creating? What do you use to create elements in HTML? How can you add an image to the website? How can you add style to a website?

NEXT LESSON We will introduce new skills using HTML and CSS to develop your website further.