 Use the think diagram … ISP Server (server farm) DDS IP address HTTP TDS & Data Packets

Go to

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

This is my first web page This is my message to the world!

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

 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

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

 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

 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

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

 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

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 Plenary: Build a basic HTML index page and linked CSS stylesheet

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

 HTML  HTML TAGS  CSS  JavaScript  Web browser

 

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

Add your own navigation bar styles - go to Colour codes: #codeshttp:// HTML Cheatsheet: CSS Cheatsheet: How to HTML tags

I now know how to

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

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

This is my first web page

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

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