Web site design

598 views

Published on

Grade 11 Web Programming

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
598
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web site design

  1. 1. Web Site Design Unit 11.3A: Web programming
  2. 2. Starter ActivityO In pairs, name the 5 most things to think about when designing a websiteO You have 1 minute…
  3. 3. Lesson Objectives1. Learn what HTML is and how to use it2. Learn how to create simple web pages3. Learn how to identify web page components and coding
  4. 4. Main ActivitiesO Open Notepad on your laptopsO Open the PDF named Chapter 4 Web_Design sent to your nis-schools.com accountO Start from page 33 in your PDF and work up to Activity 1
  5. 5. Web Design Theory TaskO Using the link below, make notes in your copy books and answer the questions fullyO Make sure to write each question before the answer or include the question into your answerO WikiBooks Web Design
  6. 6. Plenary1. 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?
  7. 7. Extended LinksO http://www.codecademy.com/tracks/webO http://code.he.net/O http://learningclubhouse.com/O http://www.teach- ict.com/gcse_new/software/web_design/miniweb/index.ht mO http://www.teach- ict.com/gcse_new/software/web_design/quiz/walkplank_ web_design.htmO http://www.w3schools.com/html/default.asp
  8. 8. Tags and ElementsO h1O pO h6O liO OlO UlO StrongO BoldO EmphasisO SubO SupO How many standard colours exist?
  9. 9. 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!
  10. 10. 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.
  11. 11. Links to W3schools,codecademy and code.he.netO http://www.codecademy.com/tracks/webO http://code.he.net/O http://learningclubhouse.com/O http://www.teach- ict.com/gcse_new/software/web_design/miniweb/index.ht mO http://www.teach- ict.com/gcse_new/software/web_design/quiz/walkplank_ web_design.htmO http://www.w3schools.com/html/default.asp
  12. 12. Vocab DefintionsO amaya O browserO dreamweaver O hrefO notepad O titleO body O codeO head O HTMLO Ordered list O unordered listO body O CodeacademyO Heading1 O hyperlinkO strong O urlO bold O CSSO heading6 O listO tag
  13. 13. Nested Link – a link inside a linkO <ul><li>Tacos!</li></ul>O Tacos
  14. 14. Website CreationO Using Amaya, build Computers & Society websiteO You need a home pageO Section(page) for each topic:1. AI2. Biometrics3. Health & Safety4. Ergonomics5. Copyright6. Expert systems
  15. 15. Web page designO On each page you should have the following;O Title of Web pageO Definition of page topic (Biometrics)O Examples of the technology or the topicO Images and links to another resources

×