Your SlideShare is downloading. ×
Lesson 104 23 aug13-1430-ay
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Lesson 104 23 aug13-1430-ay

13,500

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,500
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
47
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×