Grade 11 Web Programming

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
account
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

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
O http://code.he.net/
O http://learningclubhouse.com/
O 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
O 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 <a> </a>
O The <a></a> 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 <src>
O src stands for "source." It tells the <img> link
where the picture comes from!

10. Images and Link Tags
O <img>. 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 <src>
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 <a> and </a> is the text you click on.

11. Links to W3schools,
codecademy and code.he.net
O http://www.codecademy.com/tracks/web
O http://code.he.net/
O http://learningclubhouse.com/
O 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
O http://www.w3schools.com/html/default.asp

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

14. Nested Link – a link inside a
link
O <ul><li>Tacos!</li></ul>
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