Web site design

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

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 Tag
4. What is the most important part of web
design?
5. What is the difference between .txt and
.html?

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

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?

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!

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.

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

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

Nested Link – a link inside a
link
O <ul><li>Tacos!</li></ul>

O Tacos

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

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

Web site design

More Related Content

Viewers also liked

Viewers also liked (19)

Similar to Web site design

Similar to Web site design (20)

Recently uploaded

Recently uploaded (20)

Web site design