Web Site Design Unit 11.3A: Web programming. Starter Activity O In pairs, name the 5 most things to...
-
Upload
agnes-cain -
Category
Documents
-
view
214 -
download
2
Transcript of Web Site Design Unit 11.3A: Web programming. Starter Activity O In pairs, name the 5 most things to...
![Page 1: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/1.jpg)
Web Site Design
Unit 11.3A: Web programming
![Page 2: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/2.jpg)
Starter Activity
O In pairs, name the 5 most things to think about when designing a website
O You have 1 minute…
![Page 3: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/3.jpg)
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
![Page 4: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/4.jpg)
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
![Page 5: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/5.jpg)
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
![Page 6: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/6.jpg)
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?
![Page 7: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/7.jpg)
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
![Page 8: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/8.jpg)
Tags and ElementsO h1O pO h6O liO OlO UlO StrongO BoldO Emphasis O SubO SupO How many standard colours exist?
![Page 9: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/9.jpg)
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!
![Page 10: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/10.jpg)
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.
![Page 11: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/11.jpg)
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
![Page 12: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/12.jpg)
![Page 13: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/13.jpg)
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
![Page 14: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/14.jpg)
Nested Link – a link inside a link
O <ul><li>Tacos!</li></ul>
O Tacos
![Page 15: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/15.jpg)
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
![Page 16: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/16.jpg)
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
![Page 17: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/17.jpg)
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
![Page 18: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/18.jpg)
Web Site Design
Unit 11.3A: Web programming
![Page 19: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/19.jpg)
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
![Page 20: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/20.jpg)
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
![Page 21: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/21.jpg)
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
![Page 22: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/22.jpg)
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/
![Page 23: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/23.jpg)
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
![Page 24: 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.](https://reader037.fdocuments.us/reader037/viewer/2022110401/56649ddf5503460f94ad98e0/html5/thumbnails/24.jpg)
Meta Tags in HTML
Read the article below, taking notes and prepare to
discuss the main points
How-To-Use-HTML-Meta-Tags