3.  https://www.youtube.com/watch?v=bw7O5fk3kqk&feature=share https://www.youtube.com/watch?v=bw7O5fk3kqk&feature=share Use the think diagram … ISP Server (server farm) DDS IP address HTTP TDS & Data Packets

4. Go to https://login.microsoftonline.com/https://login.microsoftonline.com/ computerusername@students.princehenrys.co.uk

5. Novice  Know how to use the basic HTML tags (,,,,, )  Know how to use HTML to add an image and hyperlink  Know how to code a ordered and unordered list (,, tags) Intermediate  Know how to use in line STYLES (color, font-family, font-size, background-color)  Know how to use a tags Expert  Know how to use a linked Cascading style sheet (CSS)  tags  Add a navigation bar using CSS and link two pages together

6. 1. 2. 3. 4. This is my first web page 5. 6. 7. This is my message to the world! 8. 10.

7. Adding images and Links NB: In Chrome > View image >copy url link text for the hyperlinks” Adding Lists list item 1 list item 2 list item 1 list item 2 Adding a table Month Savings January $100 February $80

8.  Intermediate  See the HTML cheat sheet on Edmodo to find the following tags:  Add a tag to make a new line of text bold  Add a tag to make a new link of text italic  Add a tag to make a line of text H1  Expert  See the colour code chart on Edmodo to find the codes for colours  Add a tag to apply a colour to the text hello world Or hello world  Take a photo of your code and upload to Edmodo as a new post

9.  Understand what HTML and CSS are used for  Define some basic HTML terminology  Explain and implement and tags  Create all types of headings to

10.  Demonstrate knowledge of tags so far including, and  Define hyperlinks, explain their use and create a link using  Understand and create an image tag  Construct a linked image

11.  Recognise HTML can be used to create lists  Recognise indentation and explain why it is used  Describe and create ordered and unordered lists  Demonstrate how to use nesting with lists

12.  Describe what inline CSS is  Use style attributes (including font-color, font-family, text-align)  Demonstrate how to bold and italicise text

14.  Explain what CSS is and the reason it is separate from HTML  Create a link to a CSS stylesheet  Describe 'selectors', 'properties' and 'values' and implement property-values  Illustrate CSS syntax and comments

15. Explain why hexadecimal values are used in CSS  Explain why 'em' units are needed and the need for default fonts as backups  Create backgrounds and borders and style them 7. CSS an Overview 22 - 26 Plenary: Build a basic HTML index page and linked CSS stylesheet

19.  Draw your brain  Write about what you know about website design

20.  HTML  HTML TAGS  CSS  JavaScript  Web browser

21.  https://www.youtube.com/watch?v=mzPxo7Y6JyA https://www.youtube.com/watch?v=mzPxo7Y6JyA  https://www.youtube.com/watch?v=Ggh_y-33Eso https://www.youtube.com/watch?v=Ggh_y-33Eso

23. Expert Novice I can add HTML tags in the correct order I can add images and links Intermediate I can use inline styles Expert I know how to use CSS Intermediate Novice

24. Add your own navigation bar styles - go to http://css.maxdesign.com.au/listamatic/http://css.maxdesign.com.au/listamatic/ Colour codes: http://www.w3schools.com/html/html_colors.asp #codeshttp://www.w3schools.com/html/html_colors.asp HTML Cheatsheet: http://missallgar-iteach.org/HTML/HTML5Cheatsheet.pnghttp://missallgar-iteach.org/HTML/HTML5Cheatsheet.png CSS Cheatsheet: http://missallgar-iteach.org/HTML/CSS%20cheat%20sheet.jpghttp://missallgar-iteach.org/HTML/CSS%20cheat%20sheet.jpg How to HTML tags http://www.w3schools.com/tags/http://www.w3schools.com/tags/

25. I now know how to

26. p { color: blue; } h1 { color: red; }

27. a:link { color: green; } a:visited { color: blue; }

28. This is my first web page

29. #image1 { left:55%; top:20%; width:152px; height: 160px; position: absolute; }

30. 1. Print html code 2. Print CSS 3. Print screen what it looks like in chrome!!!