View
13.512
Download
3
Category
Preview:
Citation preview
Unit 1: Web FundamentalsLesson 4: History and Future of the Web
August 20, 2013
2
Lesson 4: History and Future of the Web
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)
• 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
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
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
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
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
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?
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
…
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
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
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 click here
Then click here
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’
16
• Select ‘Plain text’
• Close the dialog box and open a new file by going to ‘File’’New’
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:’
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 long and complex:
23
<iframe width="560" height="315" src=”http://www.youtube.com/embed/-bayV3wez50" frameborder="0" allowfullscreen></iframe>
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
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
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
3. Take the follow-up quiz to test your understanding
Recommended