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