1. www.computerscienceuk.com HTML, Formatting Text and Images Lesson 2

2. www.computerscienceuk.com Starter On your whiteboards Study the code: What will the webpage look like? 4 different things to find! Learning Habits : Notice Detail!

3. www.computerscienceuk.com Starter

4. www.computerscienceuk.com Starter

5. www.computerscienceuk.com Starter

6. www.computerscienceuk.com Starter

7. www.computerscienceuk.com Learning Objectives – Remember what HTML is – Learn how to use HTML to write a basic web page with a range of formatting skills Success Criteria All: Create a webpage with text formatted in a couple of ways MOST: Format test in a number of ways and change the font FEW: Create a professional looking page. Literacy – Key Words HTMLHyper Text Mark-up Language TagsCode which commands how a browser displays text and images HyperlinkA piece of text which when clicked takes you to another page.

8. www.computerscienceuk.com Learning Habits This computing topic is a challenge… …so what Learning Habits might we need to be successful today? Noticing Detail Perseverance Listening to Understand Independence Capitalising on Resources

9. www.computerscienceuk.com What is HTML? How does it work? Learning Objective 1 – Remembering HTML

10. www.computerscienceuk.com What is HTML? HTML stands for “Hyper Text Mark-up Language” It is a language which is used to write websites.

11. www.computerscienceuk.com HTML Instructs the Browser… “It tells the browser how text and images should appear on the screen” Sure! Can you display this text bold and in the centre of the page, then can you display a horizontal line, then could you place this picture underneath ….?

12. www.computerscienceuk.com HTML is made up of pairs of “Tags” Tags are used to tell the browser how some text (or an image) is to be arranged on the webpage. Different tags do different jobs… This is the HTML tag for turning some text into a heading: This is the Title So what is HTML?...tags This is the text to be displayed on the webpage These tags tell the browser to display the text as a heading (big and bold)

13. www.computerscienceuk.com Code inside the tags is ‘ behind the scenes information’ Code inside the tags is ‘ for the webpage that we see ’

14. www.computerscienceuk.com What is HTML? So how does HTML work?

15. www.computerscienceuk.com Formatting Tags? Lesson Objective 2 – Understand and learn how to apply some basic formatting techniques in HTML

16. www.computerscienceuk.com Remembering Paragraph Tags Remember that normal text goes between paragraph tags: Some text to be displayed

17. www.computerscienceuk.com Text Alignment Some text to be displayed

18. www.computerscienceuk.com Demonstration

19. www.computerscienceuk.com Mini Whiteboards: Your go… Write the HTML code to align some text (you choose the message) to the centre of the screen. Some text to be displayed Speech marks? American Spelling?

20. www.computerscienceuk.com Mini Whiteboards: Your go… Write the HTML code to align some text (you choose the message) to the right of the screen. Some text to be displayed Speech marks?

21. www.computerscienceuk.com Text Font, Size and Colour We can also change the ‘look’ of text using font tags: Some text to be displayed

22. www.computerscienceuk.com Text Font, Size and Colour Some text to be displayed

23. www.computerscienceuk.com Text Font, Size and Colour Some text to be displayed

24. www.computerscienceuk.com Text Font, Size and Colour Some text to be displayed Notice the American spelling again!

25. www.computerscienceuk.com Text Font, Size and Colour

26. www.computerscienceuk.com Demonstration

27. www.computerscienceuk.com Mini Whiteboards: Your go… Write the HTML to make some text size 8 and blue (you choose the message). Some text to be displayed Speech marks? American spelling?

28. www.computerscienceuk.com Mini Whiteboards: Your go… Write the HTML to make some text size 50 and have font ‘Arial’ (you choose the message). Some text to be displayed Speech marks?

29. www.computerscienceuk.com Combinations of Tags

30. www.computerscienceuk.com Activity Open the task sheet for todays lesson and attempt the first section EXTENSION: If you complete this earlier and find this quite easy, load this presentation and read ahead, see if you can get an image into your web page!

31. www.computerscienceuk.com Plenary What do HTML tags do? What tag will align the text ‘HELLO’ to the left hand side?