The World Wide Web: Crash Course Computer Science #30

0:03 Hi, I’m Carrie Anne, and welcome to CrashCourse Computer Science.

0:05 Over the past two episodes,

0:07 we’ve delved into the wires, signals, switches, packets,

0:10 routers and protocols that make up the internet.

0:12 Today we’re going to move up yet another

0:14 level of abstraction and talk about the World

0:16 Wide Web.This is not the same thing as the Internet,

0:18 even though people often use the

0:20 two terms interchangeably in everyday language.

0:21 The World Wide Web runs on top of the internet,

0:24 in the same way that Skype, Minecraft or Instagram do.

0:27 The Internet is the underlying plumbing that conveys

0:29 the data for all these different applications.

0:31 And The World Wide Web is the biggest

0:33 of them all– a huge distributed application running

0:35 on millions of servers worldwide,

0:37 accessed using a special program called a web browser.

0:40 We’re going to learn about that, and much more, in today’s episode.

0:43 INTRO The fundamental building block of the World Wide

0:54 Web– or web for short– is a single

0:57 page.

0:58 This is a document, containing content, which can include links to other pages.

1:01 These are called hyperlinks.

1:03 You all know what these look like:

1:04 text or images that you can click, and they jump you

1:06 to another page.

1:08 These hyperlinks form a huge web of interconnected information,

1:10 which is where the whole thing

1:12 gets its name.

1:13 This seems like such an obvious idea.

1:15 But before hyperlinks were implemented,

1:16 every time you wanted to switch to another piece

1:18 of information on a computer,

1:19 you had to rummage through the file system to find it, or type

1:22 it into a search box.

1:24 With hyperlinks, you can easily flow from one related topic to another.

1:28 The value of hyperlinked information was conceptualized

1:30 by Vannevar Bush way back in 1945.

1:33 He published an article describing a hypothetical machine called a Memex,

1:36 which we discussed in Episode 24.

1:39 Bush described it as "associative indexing...

1:41 whereby any item may be caused at will

1:44 to select another immediately and automatically."

1:47 He elaborated:

1:47 "The process of tying two things together is the important thing...thereafter,

1:52 at any time, when one of those items is in view,

1:55 the other [item] can be instantly recalled

1:57 merely by tapping a button."

1:59 In 1945, computers didn’t even have screens,

2:01 so this idea was way ahead of its time!

2:04 Text containing hyperlinks is so powerful,

2:06 it got an equally awesome name: hypertext!

2:09 Web pages are the most common type of hypertext document today.

2:12 They’re retrieved and rendered by web browsers which

2:14 we'll get to in a few minutes.

2:15 In order for pages to link to one another,

2:18 each hypertext page needs a unique address.

2:20 On the web, this is specified by a Uniform Resource Locator, or URL for short.

2:25 An example web page URL is thecrashcourse.com/courses.

2:29 Like we discussed last episode, when you request a site,

2:31 the first thing your computer does

2:33 is a DNS lookup.

2:34 This takes a domain name as input– like “the crash course dot com”– and replies

2:38 back with the corresponding computer’s IP address.

2:40 Now, armed with the IP address of the computer you want,

2:43 your web browser opens a TCP connection

2:45 to a computer that’s running a special piece of software called a web server.

2:49 The standard port number for web servers is port 80.

2:52 At this point,

2:52 all your computer has done is connect to the web server at the address

2:55 thecrashcourse.com The next step is to ask that

2:59 web server for the “courses” hypertext page.

3:01 To do this, it uses the aptly named Hypertext Transfer Protocol, or HTTP.

3:05 The very first documented version of this spec,

3:09 HTTP 0.9, created in 1991, only had

3:11 one command– “GET”.

3:13 Fortunately, that’s pretty much all you need.

3:15 Because we’re trying to get the “courses” page,

3:17 we send the server the following command– GET /courses.

3:21 This command is sent as raw ASCII text to the web server,

3:24 which then replies back with

3:25 the web page hypertext we requested.

3:27 This is interpreted by your computer's web browser and rendered to your screen.

3:31 If the user follows a link to another page,

3:33 the computer just issues another GET request.

3:35 And this goes on and on as you surf around the website.

3:38 In later versions, HTTP added status codes,

3:41 which prefixed any hypertext that was sent

3:43 following a GET request.

3:45 For example, status code 200 means OK– I’ve got the page and here it is!

3:49 Status codes in the four hundreds are for client errors.

3:51 Like, if a user asks the web server for a page that doesn’t exist,

3:55 that’s the dreaded 404 error!

3:57 Web page hypertext is stored and sent as plain old text,

4:00 for example, encoded in ASCII or

4:01 UTF-16, which we talked about in Episodes 4 and 20.

4:05 Because plain text files don’t have a way

4:07 to specify what’s a link and what’s not,

4:09 it was necessary to develop a way to

4:11 “mark up” a text file with hypertext elements.

4:13 For this, the Hypertext Markup Language was developed.

4:16 The very first version of HTML version 0.a,

4:19 created in 1990, provided 18 HTML commands

4:22 to markup pages.

4:23 That’s it!

4:24 Let’s build a webpage with these!

4:25 First, let’s give our web page a big heading.

4:28 To do this, we type in the letters “H 1”,

4:30 which indicates the start of a first level

4:32 heading, and we surround that in angle brackets.

4:35 This is one example of an HTML tag.

4:38 Then, we enter whatever heading text we want.

4:40 We don’t want the whole page to be a heading.

4:42 So, we need to “close” the “h1” tag like so, with a little slash in the front.

4:45 Now lets add some content.

4:47 Visitors may not know what Klingons are,

4:49 so let’s make that word a hyperlink to the

4:51 Klingon Language Institute for more information.

4:53 We do this with an “A” tag,

4:55 inside of which we include an attribute that specifies

4:57 a hyperlink reference.

4:58 That’s the page to jump to if the link is clicked.

5:00 And finally, we need to close the A tag.

5:03 Now lets add a second level heading, which uses an “h2” tag.

5:06 HTML also provides tags to create lists.

5:09 We start this by adding the tag for an ordered list.

5:12 Then we can add as many items as we want, surrounded in “L i” tags, which stands

5:16 for list item.

5:17 People may not know what a bat'leth is, so let’s make that a hyperlink too.

5:21 Lastly, for good form, we need to close the ordered list tag.

5:24 And we’re done– that’s a very simple web page!

5:27 If you save this text into notepad or textedit,

5:30 and name it something like “test.html”,

5:31 you should be able to open it by dragging it into your computer’s web browser.

5:35 Of course, today’s web pages are a tad more sophisticated.

5:38 The newest version of HTML, version 5,

5:40 has over a hundred different tags– for things

5:42 like images, tables, forms and buttons.

5:44 And there are other technologies we’re not going to discuss,

5:47 like Cascading Style Sheets

5:48 or CSS and JavaScript,

5:49 which can be embedded into HTML pages and do even fancier things.

5:54 That brings us back to web browsers.

5:56 This is the application on your computer that

5:58 lets you talk with all these web servers.

6:00 Browsers not only request pages and media,

6:01 but also render the content that’s being

6:03 returned.

6:04 The first web browser, and web server,

6:06 was written by (now Sir) Tim Berners-Lee over

6:09 the course of two months in 1990.

6:10 At the time, he was working at CERN in Switzerland.

6:13 To pull this feat off,

6:15 he simultaneously created several of the fundamental web standards we

6:18 discussed today: URLs, HTML and HTTP.

6:21 Not bad for two months work!

6:23 Although to be fair, he’d been researching hypertext systems for over a decade.

6:27 After initially circulating his software amongst colleagues at CERN,

6:29 it was released to the

6:30 public in 1991.

6:32 The World Wide Web was born.

6:34 Importantly, the web was an open standard,

6:36 making it possible for anyone to develop new

6:38 web servers and browsers.

6:39 This allowed a team at the University of

6:41 Illinois at Urbana-Champaign to create the Mosaic web

6:43 browser in 1993.

6:45 It was the first browser that allowed graphics to be embedded alongside text;

6:49 previous browsers displayed graphics in separate windows.

6:52 It also introduced new features like bookmarks,

6:54 and had a friendly GUI interface, which made

6:56 it popular.

6:57 Even though it looks pretty crusty, it’s recognizable as the web we know today!

7:01 By the end of the 1990s,

7:02 there were many web browsers in use, like Netscape Navigator,

7:05 Internet Explorer, Opera, OmniWeb and Mozilla.

7:08 Many web servers were also developed,

7:09 like Apache and Microsoft’s Internet Information

7:11 Services (IIS).

7:13 New websites popped up daily,

7:14 and web mainstays like Amazon and eBay were founded in the mid-1990s.

7:18 A golden era!

7:19 The web was flourishing and people increasingly needed ways to find things.

7:23 If you knew the web address of where you

7:25 wanted to go– like ebay.com– you could just

7:27 type it into the browser.

7:28 But what if you didn’t know where to go?

7:30 Like, you only knew that you wanted pictures of cute cats.

7:33 Right now!

7:34 Where do you go?

7:35 At first,

7:36 people maintained web pages which served as directories hyperlinking to other

7:39 websites.

7:40 Most famous among these was "Jerry and David's guide to the World Wide Web",

7:44 renamed Yahoo in 1994.

7:45 As the web grew,

7:47 these human-edited directories started to get unwieldy, and so search engines

7:50 were developed.

7:51 Let’s go to the thought bubble!

7:52 The earliest web search engine that operated like the ones we use today,

7:56 was JumpStation,

7:57 created by Jonathon Fletcher in 1993 at the University of Stirling.

8:01 This consisted of three pieces of software that worked together.

8:04 The first was a web crawler,

8:05 software that followed all the links it could find on the

8:07 web; anytime it followed a link to a page that had new links,

8:10 it would add those to

8:11 its list.

8:12 The second component was an ever enlarging index,

8:14 recording what text terms appeared

8:16 on what pages the crawler had visited.

8:18 The final piece was a search algorithm that consulted the index;

8:21 for example, if I typed

8:22 the word “cat” into JumpStation, every webpage where the word “cat” appeared

8:26 would come up in a list.

8:28 Early search engines used very simple metrics

8:30 to rank order their search results,

8:32 most often just the number of times a search term appeared on a page.

8:35 This worked okay, until people started gaming the system,

8:38 like by writing “cat” hundreds

8:40 of times on their web pages just to steer traffic their way.

8:43 Google’s rise to fame was in large part

8:45 due to a clever algorithm that sidestepped

8:47 this issue.

8:48 Instead of trusting the content on a web page,

8:50 they looked at how other websites linked to

8:52 that page.

8:53 If it was a spam page with the word cat over and over again,

8:56 no site would link to it.

8:57 But if the webpage was an authority on cats,

8:59 then other sites would likely link to it.

9:01 So the number of what are called “backlinks”,

9:04 especially from reputable sites, was often

9:05 a good sign of quality.

9:07 This started as a research project called

9:09 BackRub at Stanford University in 1996,

9:12 before being spun out, two years later, into the Google we know today.

9:15 Thanks thought bubble!

9:16 Finally, I want to take a second to talk about

9:19 a term you’ve probably heard a lot recently,

9:20 “Net Neutrality”.

9:21 Now that you’ve built an understanding of packets,

9:24 internet routing, and the World Wide

9:25 Web,

9:25 you know enough to understand the essence– at least the technical essence– of

9:29 this big debate.

9:30 In short,

9:30 network neutrality is the principle that all packets on the internet should be

9:34 treated equally.

9:35 It doesn’t matter if the packets are my email or you streaming this video,

9:38 they should all chug along at the same speed and priority.

9:41 But many companies would prefer that their data arrive to you preferentially.

9:45 Take for example, Comcast,

9:46 a large ISP that also owns many TV channels, like NBC and The

9:50 Weather Channel, which are streamed online.

9:52 Not to pick on Comcast, but in the absence of Net Neutrality rules,

9:55 they could for example say that

9:57 they want their content to be delivered silky smooth, with high priority…

10:01 But other streaming videos are going to get throttled,

10:03 that is, intentionally given less

10:04 bandwidth and lower priority.

10:06 Again I just want to reiterate here this is just conjecture.

10:09 At a high level,

10:10 Net Neutrality advocates argue that giving internet providers this

10:13 ability to essentially set up tolls on the internet– to provide

10:17 premium packet delivery– plants the seeds for an exploitative business model.

10:20 ISPs could be gatekeepers to content,

10:22 with strong incentives to not play nice with competitors.

10:25 Also, if big companies like Netflix and Google can pay to get special treatment,

10:29 small companies, like start-ups, will be at a disadvantage, stifling innovation.

10:34 On the other hand,

10:34 there are good technical reasons why you might want different types

10:37 of data to flow at different speeds.

10:39 That skype call needs high priority,

10:40 but it’s not a big deal if an email comes in a few

10:43 seconds late.

10:44 Net-neutrality opponents also argue that market

10:46 forces and competition would discourage bad

10:49 behavior,

10:49 because customers would leave ISPs that are throttling sites they like.

10:53 This debate will rage on for a while yet,

10:55 and as we always encourage on Crash Course,

10:57 you should go out and learn more because

10:59 the implications of Net Neutrality are complex

11:01 and wide-reaching.

11:02 I’ll see you next week.