1. Web Site Design Unit 11.3A: Web programming

2. Starter Activity O In pairs, name the 5 most things to think about when designing a website O You have 1 minute…

3. Lesson Objectives 1. Learn what HTML is and how to use it 2. Learn how to create simple web pages 3. Learn how to identify web page components and coding

4. Main Activities O Open Notepad on your laptops O Open the PDF named Chapter 4 Web_Design sent to your nis-schools.com accountChapter 4 Web_Design O Start from page 33 in your PDF and work up to Activity 1

5. Web Design Theory Task O Using the link below, make notes in your copy books and answer the questions fully O Make sure to write each question before the answer or include the question into your answer O WikiBooks Web Design WikiBooks Web Design

6. Plenary 1. What does HTML stand for? 2. What is a Tag? 3. Name 3 types of Tag 4. What is the most important part of web design? 5. What is the difference between.txt and.html?

7. Extended Links O http://www.codecademy.com/tracks/web http://www.codecademy.com/tracks/web O http://code.he.net/ http://code.he.net/ O http://learningclubhouse.com/ http://learningclubhouse.com/ O http://www.teach- ict.com/gcse_new/software/web_design/miniweb/index.ht m http://www.teach- ict.com/gcse_new/software/web_design/miniweb/index.ht m O http://www.teach- ict.com/gcse_new/software/web_design/quiz/walkplank_ web_design.htm http://www.teach- ict.com/gcse_new/software/web_design/quiz/walkplank_ web_design.htm O http://www.w3schools.com/html/default.asp http://www.w3schools.com/html/default.asp

8. Tags and Elements O h1 O p O h6 O li O Ol O Ul O Strong O Bold O Emphasis O Sub O Sup O How many standard colours exist?

9. Images and Links Tags O O The tag is the one used to make hyperlinks (or just links) on webpages. These are the words or images you click to go to a new page! O O src stands for "source." It tells the link where the picture comes from!

10. Images and Link Tags O. This tag is a bit different from the others. Instead of putting the content between the tags, you tell the tag where to get the picture using O href stands for "hypertext reference." O Remember that hypertext (that is, links) is text you can click on? O Well, href tells that link where to go! O The text after href is the web address, and the text between and is the text you click on.

11. Links to W3schools, codecademy and code.he.net O http://www.codecademy.com/tracks/web http://www.codecademy.com/tracks/web O http://code.he.net/ http://code.he.net/ O http://learningclubhouse.com/ http://learningclubhouse.com/ O http://www.teach- ict.com/gcse_new/software/web_design/miniweb/index.ht m http://www.teach- ict.com/gcse_new/software/web_design/miniweb/index.ht m O http://www.teach- ict.com/gcse_new/software/web_design/quiz/walkplank_ web_design.htm http://www.teach- ict.com/gcse_new/software/web_design/quiz/walkplank_ web_design.htm O http://www.w3schools.com/html/default.asp http://www.w3schools.com/html/default.asp

13. Vocab Defintions O amaya O dreamweaver O notepad O body O head O Ordered list O body O Heading1 O strong O bold O heading6 O tag O browser O href O title O code O HTML O unordered list O Codeacademy O hyperlink O url O CSS O list

14. Nested Link – a link inside a link O Tacos! O Tacos

15. Website Creation O Using Amaya, build Computers & Society website O You need a home page O Section(page) for each topic: 1. AI 2. Biometrics 3. Health & Safety 4. Ergonomics 5. Copyright 6. Expert systems

16. Web page design O On each page you should have the following; O Title of Web page O Definition of page topic (Biometrics) O Examples of the technology or the topic O Images and links to another resources

17. Code Academy CSS Exercises O Sign in and complete the Codecademy HTML exercises to all 3 levels O Extension: O http://www.codecademy.com/courses/web- beginner-en- TlhFi?curriculum_id=50579fb998b470000202 dc8b http://www.codecademy.com/courses/web- beginner-en- TlhFi?curriculum_id=50579fb998b470000202 dc8b

18. Web Site Design Unit 11.3A: Web programming

19. Building your website in Dreamweaver O Using Dreamweaver, build Computers & Society website O You need a home page O Section(page) for each topic: O AI O Biometrics O Health & Safety O Ergonomics O Copyright O Expert systems

20. Lesson Objectives Create HTML and CSS files in Dreamweaver CS6 Attach CSS files to existing HTML pages Create Rollover Images to display multiple images in your browser

21. Dreamweaver Demo O Take notes O Take notes as you are watching the Dreamweaver demonstration O You will learn how to use Dreamweaver to build and improve your website O You can access notes and resources from the shared area on the school network and from computerscienceastana.weebly.com computerscienceastana.weebly.com

22. Dreamweaver links Watch these videos tonight at home to give you an idea how Dreamweaver works There are 6 parts from beginner to intermediate level http://www.youtube.com/watch?v=1HDocBZLnxc&list =PL35C2AE0B07BB4E9B Abode TV http://tv.adobe.com/

23. Week Plan O Wednesday – Codecademy HTML and CSS exercises O Thursday – Dreamweaver demo and site building O Friday – 1 st lesson – complete O 2 nd lesson – wikibooks notes, questions and exercises in notebooks

24. Meta Tags in HTML Read the article below, taking notes and prepare to discuss the main points How-To-Use-HTML-Meta-Tags