1. Unit 1: Web Fundamentals
Lesson 4: History and Future of the Web
August 20, 2013

2. Lesson 4: History and Future of the Web
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. Recap from last time (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
3
Website Email
HTML

4. Recap from last time (II)
• The way email works is similar to the way websites load
4
Thanks Andy!
iamandy@gmail.com
federererer@yahoo.com
Gmail
server
Hotmail
server
Yahoo
server
AOL
server
DNS

5. The World Wide Web
• Webpages connect to other webpages using links
• Millions of websites link to each other, creating a rich web of content
• That’s why the internet is called the World Wide Web (WWW)
5

6. HTML tags (I)
• Start and end tags are used in HTML to label sections of code
• Tags are words surrounded by angle brackets, <>, that tell the
browser what kind of content to expect
• So start tags will look like <tag>, while end tags will look like </tag>
6

7. HTML tags (II)
• Start and end tags are used in HTML to label sections of code
• Tags are words surrounded by angle brackets, <>, that tell the
browser what kind of content to expect
• So start tags will look like <tag>, while end tags will look like </tag>
• A couple examples:
• <title>A Tale of Two Cities</title> is a title
• <p>It was the best of times, it was the worst of times</p>
7
is a paragraph

8. It wasn’t always like this…
• Before images and video appeared, there were only text links
• These text links are created in HTML using <a> tags (a for anchor)
8
See the <a> tags?

9. Then <img> came along
• The <img> tag was a BIG deal – it allowed images to become links
of their own!
• Clicking the image takes a user to a new webpage
9
Here’s the <img> tag
…

10. What if you want users to stay on the page?
• The problem with using links is that users will need to leave to go to
another website
• To allow them to view content without leaving, you can embed
content
10
Video can be viewed
directly on the page

11. Now with embedding possible, websites began
adding all kinds of exciting content
11
Embedded videos
<video> tag
Embedded music
<audio> tag
Embedded flash
<embed> tag
Even embedded webpages!
<iframe> tag

12. Let’s learn to embed content ourselves (I)
1. Open your Chrome browser and go to www.youtube.com
12

13. Let’s learn to embed content ourselves (II)
2. When you find a video you like, click ‘Share’ and then ‘Embed’
13
First click here
Then click here

14. Let’s learn to embed content ourselves (III)
3. Copy the HTML code you see beneath ‘Embed’
14
Copy this code

15. Let’s learn to embed content ourselves (IV)
4. If on a PC, open a new file in Notepad. If on a Mac, open TextEdit
15
MacPC

16. Let’s learn to embed content ourselves (V)
• If on a Mac, and you haven’t already
done so, go to ‘TextEdit’’Preferences’
16
• Select ‘Plain text’
• Close the dialog box and open a new
file by going to ‘File’’New’

17. Let’s learn to embed content ourselves (VI)
6. Paste the code in the new file, and add ‘http:’ right before
‘//www.youtube.com’ (this is a glitch in YouTube!)
17
MacPC
Add ‘http:’

18. Let’s learn to embed content ourselves (VII)
7. Now go to ‘File’’Save’
18
MacPC

19. Let’s learn to embed content ourselves (VIII)
8. Name the file ‘baaaa.html’ and hit ‘Save’.
19
MacPC
‘baaaa.html’

20. Let’s learn to embed content ourselves (IX)
9. Open your Chrome browser. Go to ‘File’’Open File’.
20
MacPC

21. Let’s learn to embed content ourselves (X)
10. Locate your file and click ‘Open’.
21
MacPC

22. Let’s learn to embed content ourselves (XI)
11. Not bad!
22
This address will look
different for you

23. What’s in store for the future? (I)
• Embedding media is pretty complicated now
• The HTML code needed to embed is too long and complex:
23
<iframe width="560" height="315" src=”http://www.youtube.com/embed/-
bayV3wez50" frameborder="0" allowfullscreen></iframe>

24. What’s in store for the future? (II)
• What if we could use our own, custom tags?
• <img> and <audio> are boring. Use <gangnam-style>!
24

25. Summary (I)
• The World Wide Web was created by allowing webpages to link to
one another
• Tags such as <img>, <video>, and <audio> have enabled users to
view content
• Embedding allows users to view content without leaving a webpage
25
A webpage A webpage embedded
within a webpage

26. Summary (II)
• It’s not hard to embed content into your own HTML page
• Websites such as YouTube will often provide code for you to copy
and paste into your page
• In the future, websites will be able to invent their own tags!
26
<iframe width="560" height="315" src=”http://www.youtube.com/embed/-
bayV3wez50" frameborder="0" allowfullscreen></iframe>
YouTube-provided HTML code

27. 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
27