18
Unit 1: Web Fundamentals Lesson 3: HTML and Email August 20, 2013
| Date post: | 30-Aug-2014 |
| Category: |
Technology |
| Upload: | codecademy-ren |
| View: | 13,063 times |
| Download: | 1 times |
Unit 1: Web FundamentalsLesson 3: HTML and Email
August 20, 2013
2
Lesson 3: HTML and Email
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
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
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
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!
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
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
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
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!
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
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
Gmail server
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
Gmail server
Hotmail server
Yahoo server
AOL server
DNS
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!
Gmail server
Hotmail server
Yahoo server
AOL server
DNS
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?
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?
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
Summary (II)
• The way email works is similar to the way websites load
17
Thanks Andy!
Gmail server
Hotmail server
Yahoo server
AOL server
DNS
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
3. Take the follow-up quiz to test your understanding
