Lesson 103 23 aug13-1430-ay

14,312 views

Published on

Published in: Technology
  • Be the first to comment

Lesson 103 23 aug13-1430-ay

  1. 1. Unit 1: Web Fundamentals Lesson 3: HTML and Email August 20, 2013
  2. 2. Lesson 3: HTML and Email 2 Introduction to HTML Learning to Use HTML HTML and Email History and Future of the Web HTML and Forms Search Engine Optimization Learning to Use CSS Introduction to CSS Reusing Code 3 Ways to Use CSS Separation of Concerns Launching Your Own Website Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 8 Lesson 7 Lesson 6 Lesson 5 Lesson 9 Lesson 10 Lesson 11 Lesson 12 Build understanding Develop skills
  3. 3. Recap from last time (I) • It’s simple to create an HTML file – no different from creating a Word document or a PDF file • .html files are opened with web browsers, in the same way that .doc files are opened with Microsoft Word and .pdf files are opened with Adobe Reader 3 opens .doc files opens .pdf files opens .html files
  4. 4. Recap from last time (II) • A web browser is an application used to access and display web pages and other content on the internet • There are many different browsers, but they all have the same basic function – to load HTML files 4 Chrome Internet Explorer Firefox Safari Opera
  5. 5. So far we have only seen HTML used in websites • HTML is also used in every email you send or receive • Just like a website such as the Guardian, an email may be stylized to look nice, but it’s actually written in a bunch of HTML code 5 This is HTML!
  6. 6. How do we view the HTML of an email? (I) 1. Let’s see how to do this in Gmail. If you don’t have a Gmail account, just follow along. Go to www.gmail.com, type in your Username and Password, and sign in. 6 Sign in here
  7. 7. How do we view the HTML of an email? (II) 2. In the main screen, select an email in your inbox and click it 7 Click on the email
  8. 8. How do we view the HTML of an email? (III) 3. Next to the reply button, click on the arrow to bring up a menu of additional options. Click on ‘Show original’. 8 First click here Then click here
  9. 9. How do we view the HTML of an email? (IV) 4. A new page should open. Scroll all the way to the bottom and you should see HTML! 9 This is HTML!
  10. 10. So how does email work? (I) • We’ve seen how the internet works already. Email is actually pretty similar. Let’s revisit our friend, Andy Murray. 10 Let’s email Roger iamandy@gmail.com federererer@yahoo.com
  11. 11. So how does email work? (II) 1. When Andy writes an email to Roger, his message is first sent to a Gmail server (because he uses Gmail). 11 iamandy@gmail.com federererer@yahoo.com Gmail server
  12. 12. So how does email work? (III) 2. The Gmail server has to decide where to send Andy’s message. Since Roger uses Yahoo! Mail, the Gmail server uses a Domain Name Server, or DNS, to find the Yahoo server. 12 iamandy@gmail.com federererer@yahoo.com Gmail server Hotmail server Yahoo server AOL server DNS
  13. 13. So how does email work? (IV) 3. Once the Yahoo server is found, the message is sent and Roger can now read the email whenever he logs in to check his inbox! 13 Thanks Andy! iamandy@gmail.com federererer@yahoo.com Gmail server Hotmail server Yahoo server AOL server DNS
  14. 14. Email vs. Websites (I) • Both rely on servers to transmit information • Both involve sending and receiving HTML • Both use DNS to find the right servers to use 14 How are they similar? How are they different?
  15. 15. Email vs. Websites (II) • Both rely on servers to transmit information • Both involve sending and receiving HTML • Both use DNS to find the right servers to use 15 • Email messages are sent from one server to another. Website requests are sent from a user to a single server and back • Email is for messages written in HTML. Websites are for webpages written in HTML. How are they similar? How are they different?
  16. 16. Summary (I) • HTML is important – not only is it used to create websites, but it also allows us to send email • While both websites and email are made to look pretty on the outside, they are actually created with some HTML code 16 Website Email HTML
  17. 17. Summary (II) • The way email works is similar to the way websites load 17 Thanks Andy! iamandy@gmail.com federererer@yahoo.com Gmail server Hotmail server Yahoo server AOL server DNS
  18. 18. What to do on your own 1. Go to URL to complete the Codecademy course online 2. Do the practice set on the material learned 1. Take the follow-up quiz to test your understanding 18

×