Starter ActivityO In pairs, name the 5 most things to think about when designing a websiteO You have 1 minute…
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
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
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
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?
Tags and ElementsO h1O pO h6O liO OlO UlO StrongO BoldO EmphasisO 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.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
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
Nested Link – a link inside a linkO <ul><li>Tacos!</li></ul>O Tacos
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
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