web site design unit 11.3a: web programming. starter activity o in pairs, name the 5 most things to...

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

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=505

79fb998b470000202dc8b

Web Site Design

Unit 11.3A: Web programming

Building your website in Dreamweaver

O Using Dreamweaver, build Computers & Society website

O You need a home pageO Section(page) for each topic:O AI O BiometricsO Health & Safety O ErgonomicsO CopyrightO Expert systems

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

Dreamweaver Demo

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

Dreamweaver linksWatch 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/

Week Plan

O Wednesday – Codecademy HTML and CSS

exercises

O Thursday – Dreamweaver demo and site

building

O Friday – 1st lesson – complete

O 2nd lesson – wikibooks notes, questions

and exercises in notebooks

Meta Tags in HTML

Read the article below, taking notes and prepare to

discuss the main points

How-To-Use-HTML-Meta-Tags