Web site design
-
Upload
dave-marker -
Category
Technology
-
view
388 -
download
0
description
Transcript of Web site design
![Page 1: Web site design](https://reader035.fdocuments.us/reader035/viewer/2022062405/55530918b4c9054e3f8b4c06/html5/thumbnails/1.jpg)
Web Site Design
Unit 11.3A: Web programming
![Page 2: Web site design](https://reader035.fdocuments.us/reader035/viewer/2022062405/55530918b4c9054e3f8b4c06/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](https://reader035.fdocuments.us/reader035/viewer/2022062405/55530918b4c9054e3f8b4c06/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](https://reader035.fdocuments.us/reader035/viewer/2022062405/55530918b4c9054e3f8b4c06/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](https://reader035.fdocuments.us/reader035/viewer/2022062405/55530918b4c9054e3f8b4c06/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](https://reader035.fdocuments.us/reader035/viewer/2022062405/55530918b4c9054e3f8b4c06/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](https://reader035.fdocuments.us/reader035/viewer/2022062405/55530918b4c9054e3f8b4c06/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](https://reader035.fdocuments.us/reader035/viewer/2022062405/55530918b4c9054e3f8b4c06/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](https://reader035.fdocuments.us/reader035/viewer/2022062405/55530918b4c9054e3f8b4c06/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](https://reader035.fdocuments.us/reader035/viewer/2022062405/55530918b4c9054e3f8b4c06/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](https://reader035.fdocuments.us/reader035/viewer/2022062405/55530918b4c9054e3f8b4c06/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](https://reader035.fdocuments.us/reader035/viewer/2022062405/55530918b4c9054e3f8b4c06/html5/thumbnails/12.jpg)
![Page 13: Web site design](https://reader035.fdocuments.us/reader035/viewer/2022062405/55530918b4c9054e3f8b4c06/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](https://reader035.fdocuments.us/reader035/viewer/2022062405/55530918b4c9054e3f8b4c06/html5/thumbnails/14.jpg)
Nested Link – a link inside a link
O <ul><li>Tacos!</li></ul>
O Tacos
![Page 15: Web site design](https://reader035.fdocuments.us/reader035/viewer/2022062405/55530918b4c9054e3f8b4c06/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](https://reader035.fdocuments.us/reader035/viewer/2022062405/55530918b4c9054e3f8b4c06/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