web site design unit 11.3a: web programming. starter activity o in pairs, name the 5 most things to...
TRANSCRIPT
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