Unit 1: Web Fundamentals
Lesson 4: History and Future of the Web
August 20, 2013
Lesson 4: History and Future of the Web
2
Introduction
to HTML
Learning to
Use HTML
HTML and
Email
History and
Future of t...
Recap from last time (I)
• HTML is important – not only is it used to create websites, but it also
allows us to send email...
Recap from last time (II)
• The way email works is similar to the way websites load
4
Thanks Andy!
iamandy@gmail.com
feder...
The World Wide Web
• Webpages connect to other webpages using links
• Millions of websites link to each other, creating a ...
HTML tags (I)
• Start and end tags are used in HTML to label sections of code
• Tags are words surrounded by angle bracket...
HTML tags (II)
• Start and end tags are used in HTML to label sections of code
• Tags are words surrounded by angle bracke...
It wasn’t always like this…
• Before images and video appeared, there were only text links
• These text links are created ...
Then <img> came along
• The <img> tag was a BIG deal – it allowed images to become links
of their own!
• Clicking the imag...
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
anoth...
Now with embedding possible, websites began
adding all kinds of exciting content
11
Embedded videos
<video> tag
Embedded m...
Let’s learn to embed content ourselves (I)
1. Open your Chrome browser and go to www.youtube.com
12
Let’s learn to embed content ourselves (II)
2. When you find a video you like, click ‘Share’ and then ‘Embed’
13
First cli...
Let’s learn to embed content ourselves (III)
3. Copy the HTML code you see beneath ‘Embed’
14
Copy this code
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
Let’s learn to embed content ourselves (V)
• If on a Mac, and you haven’t already
done so, go to ‘TextEdit’’Preferences’
...
Let’s learn to embed content ourselves (VI)
6. Paste the code in the new file, and add ‘http:’ right before
‘//www.youtube...
Let’s learn to embed content ourselves (VII)
7. Now go to ‘File’’Save’
18
MacPC
Let’s learn to embed content ourselves (VIII)
8. Name the file ‘baaaa.html’ and hit ‘Save’.
19
MacPC
‘baaaa.html’
Let’s learn to embed content ourselves (IX)
9. Open your Chrome browser. Go to ‘File’’Open File’.
20
MacPC
Let’s learn to embed content ourselves (X)
10. Locate your file and click ‘Open’.
21
MacPC
Let’s learn to embed content ourselves (XI)
11. Not bad!
22
This address will look
different for you
What’s in store for the future? (I)
• Embedding media is pretty complicated now
• The HTML code needed to embed is too lon...
What’s in store for the future? (II)
• What if we could use our own, custom tags?
• <img> and <audio> are boring. Use <gan...
Summary (I)
• The World Wide Web was created by allowing webpages to link to
one another
• Tags such as <img>, <video>, an...
Summary (II)
• It’s not hard to embed content into your own HTML page
• Websites such as YouTube will often provide code f...
What to do on your own
1. Go to URL to complete the Codecademy course online
2. Do the practice set on the material learne...
Upcoming SlideShare
Loading in …5
×

Lesson 104 23 aug13-1430-ay

13,844 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
13,844
On SlideShare
0
From Embeds
0
Number of Embeds
13,364
Actions
Shares
0
Downloads
50
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson 104 23 aug13-1430-ay

  1. 1. Unit 1: Web Fundamentals Lesson 4: History and Future of the Web August 20, 2013
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12. Let’s learn to embed content ourselves (I) 1. Open your Chrome browser and go to www.youtube.com 12
  13. 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. 14. Let’s learn to embed content ourselves (III) 3. Copy the HTML code you see beneath ‘Embed’ 14 Copy this code
  15. 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. 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. 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. 18. Let’s learn to embed content ourselves (VII) 7. Now go to ‘File’’Save’ 18 MacPC
  19. 19. Let’s learn to embed content ourselves (VIII) 8. Name the file ‘baaaa.html’ and hit ‘Save’. 19 MacPC ‘baaaa.html’
  20. 20. Let’s learn to embed content ourselves (IX) 9. Open your Chrome browser. Go to ‘File’’Open File’. 20 MacPC
  21. 21. Let’s learn to embed content ourselves (X) 10. Locate your file and click ‘Open’. 21 MacPC
  22. 22. Let’s learn to embed content ourselves (XI) 11. Not bad! 22 This address will look different for you
  23. 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. 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. 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. 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. 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

×