Web Site Design

Unit 11.3A: Web programming

Starter Activity

O In pairs, name the 5 most things to think about when designing a website

O You have 1 minute…

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

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

Remember to save your files as .txt

and .html

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

Plenary

1. What does HTML stand for?2. What is a Tag?3. Name 3 types of Tag4. What is the most important part of

web design?5. What is the difference between .txt

and .html?

Extended LinksO 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.htm

O http://www.teach-ict.com/gcse_new/software/web_design/quiz/walkplank_web_design.htm

O http://www.w3schools.com/html/default.asp

Tags and ElementsO h1O pO h6O liO OlO UlO StrongO BoldO Emphasis O SubO SupO How many standard colours exist?

Images and Links TagsO <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!

Images and Link TagsO <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.

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.htm

O http://www.teach-ict.com/gcse_new/software/web_design/quiz/walkplank_web_design.htm

O http://www.w3schools.com/html/default.asp

Vocab DefintionsO amaya O dreamweaver O notepad O body O head O Ordered list O body O Heading1O strong O boldO heading6O tag

O browser O href O title O code O HTMLO unordered list O CodeacademyO hyperlinkO url O CSS O list

Nested Link – a link inside a link

O <ul><li>Tacos!</li></ul>

O Tacos

Website Creation O Using Amaya, build Computers & Society

websiteO You need a home pageO Section(page) for each topic:1. AI 2. Biometrics3. Health & Safety 4. Ergonomics5. Copyright6. Expert systems

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