Placeholder Image

字幕表 動画を再生する

  • [MUSIC PLAYING]

  • DAVID MALAN: All right.

  • This is CS50, and last time where we left off

  • was here, focusing on data structures.

  • And indeed, one of the last data structures we looked at

  • was that of a hash table.

  • But that was the result of a progression of data structures

  • that we began with this thing here, an array.

  • Recall that an array was actually a data structure that was actually introduced

  • back in week two of CS50, but it was advantageous at the time,

  • because it allowed us to do things efficiently, like binary search,

  • and it was very easy to use with its square bracket notation

  • and adding integers or strings or whatever it is.

  • But it had limitations, recall.

  • And among those limitations were its lack

  • of resizeability, its lack of dynamism.

  • We had to decide in advance how big we wanted this data structure to be,

  • and if we wanted it to be any bigger, or for that matter any smaller,

  • we would have to dynamically ourselves resize it and copy

  • all of the old elements into a new array, and then go about our business.

  • And so we introduced last time this thing here instead,

  • a linked list that addresses that problem by having us on demand

  • allocate these things that we called nodes,

  • storing inside them an integer or really any data type that we want,

  • but connecting those nodes with these arrows pictured

  • here, specifically connecting them or threading them together using something

  • called pointers.

  • Whereby pointers are just addresses of those nodes in memory.

  • So while we pay a bit of a price in terms of more memory in order

  • to link these nodes together, we gain this flexibility,

  • because now when we want to grow or shrink this kind of data structure,

  • we simply use our friend malloc or free or similar functions still.

  • But we then, using linked lists-- and at a lower level,

  • pointers as a new building block, did we begin to solve other problems.

  • We considered the problem of a stack of trays in the cafeteria,

  • and we presented an abstract data type known as a stack.

  • And a stack supports operations like push and pop.

  • But what's interesting about a stack for our purposes

  • recall is that we don't need to commit necessarily

  • to implementing it one way or another.

  • Indeed, we can abstract away the underlying implementation

  • details of a stack, and implement it using an array if we want,

  • if we find that easier or convenient.

  • Or for that matter we can implement it using a linked list,

  • if we want that additional ability to grow and shrink.

  • And so the data type itself in a stack has these two operations, push and pop,

  • but they're independent, ultimately, of how we actually

  • implement things underneath the hood.

  • And that holds true as well for this thing you here.

  • A line, or more properly a queue, whereby

  • instead of having this last in, first out or LIFO property,

  • we want something more fair in the human world, a first in, first out.

  • So that when you NQueue or Dqueue some piece

  • of data, whatever was NQueued first is the first thing

  • to get out of that queue as well.

  • And here too did we see that we could implement these things using a linked

  • list or using array, and I would wager there is yet

  • other possible implementations as well.

  • And then we transitioned from these abstract data types

  • to another sort of paradigm for building a data structure in memory.

  • Rather than just linking things together in a unidirectional way, so to speak,

  • with a linked list, we introduced trees, and we introduced things

  • like binary search trees, that so long as you

  • keep these data structures pretty well balanced, such that the height of them

  • is logarithmic and is not linear like a linked list,

  • can we achieve the kind of efficiency that we saw back in week zero

  • when we did binary search on a phone book.

  • But now, thanks to these pointers and thanks to malloc and free

  • can we grow and shrink the data structure without committing in advance

  • to an actual fixed size array.

  • And similarly did we solve another real world problem.

  • Recall that a few weeks ago we looked at forensics,

  • and most recently did we look at compression, both of which

  • happen to involve files.

  • And in this case, the goal was to compress information,

  • ideally losslessly, without throwing away any of the underlying information.

  • And thanks to Huffman coding did we see one technique

  • for doing that, whereby instead of using seven or eight bits for every letter

  • or punctuation symbol in some text, we can instead come up with our own coding

  • that we use one bit like a one to represent a super common letter like e,

  • and two or three or four or more bits for the less

  • common letters in our world.

  • And then again we came to hash tables.

  • And hash tables too is an abstract type that we could implement using an array

  • or using a linked list or using an array and a linked list.

  • And indeed, we looked first at a hash table as little more than an array.

  • But we introduced this idea of a hash function, that

  • allows you, given some input, to decide on some output

  • and index a numeric value, typically, that allows

  • you to decide where to put some value.

  • But if you use something like an array, of course,

  • you might paint yourself into a corner, such

  • that you don't have enough room ultimately for everything.

  • And so we introduced separate chaining, whereby a hash table in this form

  • is really just an array, pictured here vertically, and a set of linked

  • lists hanging off that array, pictured here horizontally,

  • that allows us to get some pretty good efficiency in terms

  • of hashing, finding the chain that we want in pretty much constant time,

  • and then maybe incurring a bit of linear cost

  • if we actually have a number of collisions.

  • Now today, after leaving behind these data structures-- among them

  • a try, which recall was our last data structure that allowed us

  • in theory in constant time to look up or insert or even delete words in a data

  • structure, depending only on the length of the string,

  • not how many strings were in there-- do we continue to use these ideas,

  • these building blocks, these data structures.

  • But now today we literally leave behind the world of C

  • and starts to enter the world of web programming,

  • or really the world of web pages and dynamic outputs

  • and databases, ultimately, and all of the things that most of us

  • are familiar with every day.

  • But it turns out that this time we don't have to leave behind those ingredients.

  • Indeed, something like this, which you'll soon

  • know as HTML-- the language in which web pages are written-- HyperText Markup

  • Language-- even this textual document, which seems to have a bit of structure

  • to it, as you might glean here from the indentation, can underneath the hood

  • be itself represented as a tree.

  • A DOM, or Document Object Model, but indeed, we'll

  • see now some real world, very modern applications of the same data

  • structures in software that we ourselves use.

  • Because today, we look at how the internet works,

  • and in turn how we actually build software atop it.

  • But first, a teaser.

  • [VIDEO PLAYBACK]

  • [MUSIC PLAYING]

  • -He came with a message, with a protocol all his own.

  • He came to a world of cruel firewalls, uncaring routers,

  • and dangers far worse than death.

  • He's fast.

  • He's strong.

  • He's TCPIP, and he's got your address.

  • Warriors of the Net.

  • [END PLAYBACK]

  • DAVID MALAN: All right, so coming soon is how the internet works.

  • And it's not quite like that.

  • But we'll see in a bit more detail.

  • But let's consider first something a little more familiar, if abstractly,

  • like our own home.

  • So odds are, before coming to a place like this,

  • you had internet access at home or at school or at work or the like.

  • And inside of that building-- let's call it your home--

  • you had a number of devices.

  • Maybe a laptop, maybe a desktop, maybe both, maybe multiple.

  • And you had some kind of internet service provider, Comcast or Verizon

  • or companies like that, that actually run some kind of wired connection,

  • typically-- though it could be wireless-- into your home,

  • and via that connection are you on your laptop or desktop able to get out

  • onto the internet.

  • Well it turns out that the internet itself is a pretty broad term.

  • The internet is really just this interconnection

  • of lots of different networks.

  • Harvard here has a network.

  • Yale has a network.

  • Google has a network.

  • Facebook has a network.

  • Your home has a network and the like.

  • And so the internet really is the interconnection

  • of all of those physical networks.

  • And on top of this internet, do there run services, things like the web

  • or the world wide web.

  • Things like email.

  • Things like Facebook Messenger.

  • Things like Skype.

  • And any number of applications that we use every day

  • run on top of this physical layer known as the internet.

  • But how does this internet itself work?

  • Well, when you first plug in your computer to a home modem

  • that you might get from Verizon or Comcast-- it might be a cable

  • modem or a DSL modem or another technology still-- or more commonly

  • these days, you connect wirelessly, such that your Mac or PC

  • laptop connects somehow wirelessly to this device, what actually happens?

  • Like the first time you have internet installed on your home,

  • how does your computer know how to connect to that device,

  • and how does that device know how to get your laptop's data

  • to and from the rest of the internet?

  • Well, odds are you know on your Mac or PC

  • you at least get to choose the name of your network,

  • whether it's Harvard University or Yale or LinkSys or Airport Extreme

  • or whatever it is at home, and then once you're connected to that,

  • it turns out that there's special software running

  • on this device in your home called a router.

  • And actually, it can be called any number of things.

  • But one of its primary functions is to route information,

  • and also to assign certain settings to your computer.

  • Indeed, running inside of this so-called router in your home

  • typically is a protocol, a special type of software called DHCP-- Dynamic Host

  • Configuration Protocol.

  • And this is just a fancy way of saying but that little device in your home

  • knows how to get you onto the internet.

  • And how does it do that?

  • Well, the first time you turn on your Mac or PC

  • and connect to your home network-- or Harvard's or Yale's for that matter--

  • you are assigned, thanks to this technology DHCP an IP address,

  • a numeric address, something of the form something

  • dot something dot something dot something that uniquely in theory

  • identifies your computer on the internet,

  • so long as your computer speaks this protocol IP, or the Internet Protocol.

  • And we'll see in a bit that IP and TCP-- or more

  • commonly known as TCPIP-- is really just a set of conventions

  • that governs how computers talk to each other on the internet.

  • And the first way they do that is by agreeing upon in advance

  • what each of their addresses look like.

  • Now, these addresses are actually changing in format over time,

  • because frankly, we're running out of these addresses.

  • But the most common address right now still

  • is an IP version 4, or V4 address, that is literally of the form something dot

  • something dot something dot something.

  • And so when your computer first turns on in your home network,

  • you are given a number that looks a little something like that.

  • And via that address now can you talk to other computers on the internet,

  • because this is like your from address in the physical world,

  • and you can receive responses from computers on the internet,

  • because they now know you via this address.

  • So much like the CS building here is that 33 Oxford Street

  • Cambridge, Massachusetts, or the CS building at Yale

  • was 51 Prospect Street, New Haven, Connecticut, much as those

  • addresses uniquely identified those two buildings,

  • so do IP addresses in the world of computers uniquely identify computers.

  • So here for instance just happens to be by convention

  • what most of Harvard's own IP addresses look like.

  • Now that I'm on this network here, odds are my IP address starts

  • with 140.247 dot something dot something,

  • or 128.103 dot something dot something.

  • Or at New Haven at Yale, it might look like 130.132 dot

  • something dot something, or 128.36 dot something dot something.

  • And it turns out that each of these somethings

  • simply is by definition a number between 0 and 255.

  • 0 to 255.

  • I feel like we've heard these numbers before.

  • And indeed, if you can count from 0 to 255,

  • that means you're using what 8 bits.

  • And so each of these numbers is 8 bits plus 8 plus 8 plus 8.

  • So that's 32 bits.

  • And indeed, an IP address typically these days-- at least version 4--

  • is a 32-bit value which means there can be total no more than 4 billion

  • or so computers on the internet.

  • And we're actually starting to bump up against that, because everything

  • these days seems to be on the internet, whether it's your phone, laptop,

  • or even some smart device in your home.

  • And so there is a way to mitigate that.

  • It turns out that your computer, even if you're on campus,

  • might not quite have one of those Harvard or Yale IPs.

  • You might instead have depending on where you are on campus a private IP

  • address, or if you're in your home, you similarly

  • might have one of these addresses.

  • And these are private in the sense that they

  • are used to route information within your home or within your school

  • or within your company, but these addresses are not

  • meant to be used by the outside world.

  • Instead, what you get from Harvard or Yale

  • or Comcast or Verizon when you connect to their network

  • typically is at least the ability to have one or more public IP

  • addresses that the rest of the world knows you by.

  • So what does this actually mean?

  • Well, sometimes it doesn't really mean anything at all.

  • And in fact, if you look at popular media today or various television

  • shows, you'll see that IP is either miscommunicated or outright

  • misunderstood.

  • Let's take a look.

  • [VIDEO PLAYBACK]

  • -It's a 32-bit IPv4 address.

  • -IP, as in the internet?

  • -Private network.

  • To meet is private network.

  • It's just so amazing.

  • It's in their IP address.

  • She's letting us watch what she's doing in real time.

  • [END PLAYBACK]

  • DAVID MALAN: No, no, that is not what a hacker does in real time,

  • and that is not how you watch a hacker in real time.

  • Indeed, if you zoom in on this screen here,

  • you'll see that what's actually being looked at

  • has nothing to do with networking per se.

  • This is actually programming code written

  • in a language called Objective C, which happens

  • to be used conventionally for Mac applications

  • or more recently iOS applications.

  • And of all the things for them to have pulled out,

  • they use this code, which has to be something

  • related to some kind of drawing program insofar as it's talking about crayons.

  • Moreover, if you actually look at one of the other scenes from this show,

  • this was the IP address in question.

  • This too is not technically accurate.

  • What's wrong with this IP address in this frame here from the show?

  • Yeah, so if the IP addresses can only be from 0 to 255,

  • 275 is definitely too big.

  • Now, in their defense, this is probably a good thing,

  • because now they're not broadcasting some random, unsuspecting person's

  • actual IP address.

  • But there too there's a technical limitation.

  • But of course, we humans, when we visit websites using Safari or Chrome or IE

  • or Edge or whatever, we rarely if ever type

  • in the address of websites or servers by these numeric IP addresses.

  • Rather, we seem to use more user-friendly words,

  • like www.google.com, or harvard.edu, or yale.edu, or facebook.com, or the like.

  • And thankfully, there exists in the world

  • another system, another technology known as DNS-- Domain Name System.

  • And what DNS does is it simply converts numeric IP addresses

  • to more human-friendly host names, or fully qualified domain names.

  • Which is to say when I first sit down at my Mac or my PC on my home network

  • or Harvard's or Yale's and I type in something like www.google.com and hit

  • Enter, the way that my computer actually talks to google.com

  • is by way of those numeric IP addresses.

  • But the way my Mac or PC figures out what that IP address is of google.com

  • is it asks the local operating system-- Mac OS or Windows--

  • and if Mac OS or Windows doesn't know, my operating system asks

  • Harvard's network or Yale's network or Comcast's network,

  • wherever I physically am, because each of those networks

  • has their own DNS server, whose purpose in life is to convert IP

  • addresses to host names and host names to IP addresses.

  • And in the event that Comcast or Yale or Harvard, wherever I am,

  • doesn't know the answer to what is the IP address for www.google.com,

  • there exist root servers in the world.

  • Servers that are globally administered at the end of the day

  • can at least help those DNS servers figure out what the answers are.

  • And indeed, when you buy or when you rarely

  • rent a domain name, among the things you're doing

  • is informing the world via a set of standards

  • what your server's IP addresses are.

  • And so that's exactly what Google and others have done.

  • But of course, the data at the end of the day still has to get from my laptop

  • to Google.

  • And then my search results have to get from Google to me.

  • And how does that happen?

  • I mean, most of Google's servers are probably

  • out in Mountain View, California or maybe here on the East Coast somewhere,

  • if they have multiple servers.

  • Or maybe somewhere in the world.

  • And indeed, big companies these days have servers all over the place.

  • So how does one little old laptop know how

  • to request search results from Google or how

  • to request my news feed from Facebook or how to do any number of other things

  • on the internet?

  • Well it does it by way of these things called routers.

  • It turns out that between me and most any other point on the internet,

  • there's one or more routers-- special servers

  • that could be this big, this big, any number of sizes these days.

  • They're just computers that typically live in data centers of some sort.

  • And these routers' purpose in life is to quite simply route information.

  • So when my Mac wants to talk to google.com,

  • my Mac constructs what we call a packet of information inside of which

  • is my request.

  • Give me all of your search results for cats,

  • for instance, if that's what I'm searching for.

  • And that packet is handed off to the nearest router.

  • That router happens to be, at this point in the story, at Harvard here.

  • Harvard has its own routers.

  • And Harvard's routers are somehow wired or wirelessly connected

  • to other routers in the world.

  • And those routers, typically no more than 30 routers away,

  • can get my data by routing it, routing it, routing it, routing it, routing it,

  • until it eventually reaches its correct destination.

  • In its simplest form, what you can think of these routers

  • as doing is looking at those IP addresses-- something

  • dot something dot something dot something-- and deciding, based

  • on those numbers, which direction to go.

  • So maybe if my IP address starts arbitrarily with 1,

  • maybe the packet should go that way to that router.

  • If it starts with 2, it should go that way

  • and be routed to that router, or that way, or that way.

  • It doesn't really matter.

  • This all happens dynamically thanks to software.

  • But routers just use those IP addresses to decide

  • which way to route your information.

  • And we can actually see this.

  • Let me go ahead into CS50 IDE, and Macs and PCs and other computers

  • have the same software.

  • This will allow me to do a number of things at my command line here.

  • For instance, suppose that I wanted to check

  • what the IP address is for google.com.

  • Because if I want to send Google a letter, like a packet of information

  • requesting a whole bunch of search results about cats,

  • I need to know their IP address.

  • So what I can do at the command line here

  • is run a command that's pretty popular called nslookup-- names server lookup.

  • And I can type in something like www.google.com Enter,

  • and wala, I seem to get the answer here that Google's IP address is apparently

  • 172.217.4.36.

  • And I know that answer, because Harvard's server--

  • and I know it's Harvard, because it starts with 140.247-- Harvard's DNS

  • server somewhere here on campus just knew that result.

  • But it's non-authoritative, in the sense that Harvard does not run google.com.

  • But Harvard has previously asked Google or someone else

  • for Google's IP address.

  • And so Harvard is answering the question for me, but not authoritatively.

  • It's a delegate who is relaying that information to me.

  • Now, suppose I want to do this for another site.

  • Let me go ahead and search for nslookup say www.facebook.com.

  • And you'll see here that Facebook's IP address is apparently 31.13.80.36.

  • And there's some more cleverness going on here.

  • It turns out there's other types of DNS records

  • or entries, starmini.c10r.facebook.com.

  • I don't really know what that means.

  • Facebook's a big enough company that there's probably

  • a lot more complexity going on.

  • But just out of curiosity, let me go ahead and copy this IP address here.

  • And in a browser, go to http:// that IP address.

  • Enter.

  • And wala, I make my way to Facebook.com.

  • But it would be pretty bad for business if everyone in the world

  • had to know that Facebook's IP address is this.

  • Back in the day when people still used phone numbers,

  • you might have services like 1-800-COLLECT, C-O-L-L-E-C-T,

  • these mnemonics, so that it was easier for humans to remember phone numbers.

  • Thankfully, DNS does all of this automatically.

  • We just have to remember facebook.com, and DNS

  • does that conversion even more dynamically than the old school

  • 1-800-COLLECT tricks that the world adopted.

  • So that's how my computer would get the TO address.

  • So at this point in the story, if I want to send a request to google.com--

  • and this is just an envelope in which I might send a letter--

  • I need to have two pieces of information.

  • I need to have the TO address here, which for Google recall--

  • let me look it up again-- is 172.217.4.36.

  • 7 And so I'm going to put that in the TO field of this envelope.

  • And now I need to know my own IP address.

  • So it turns out my computer has its own IP address.

  • And so when I send this request over the internet to Google,

  • I'm going to need to include my own IP address, which Windows or Mac

  • OS knows for me.

  • And so in the top corner of this envelope might

  • I write my actual IP address as well.

  • So now I have to actually route this information.

  • I first have to write Google a note, and I

  • might say on this blank sheet of paper, search for cats.

  • So this might be my search request.

  • And I'm going to go ahead and just bundle this

  • up, put this inside of this envelope.

  • But now I need to send this envelope or this so-called packet of information

  • to www.google.com.

  • And who knows where they are?

  • Maybe they're in California.

  • Maybe they're here on the East Coast.

  • Maybe they're somewhere else.

  • How do I route this information?

  • Well, turns out that Harvard has a router, again,

  • and Harvard's routers know of other routers.

  • And in turn, and we using the same command prompt

  • can we actually see the path that my data should

  • take if I trace the route one query at a time from here to www.google.com.

  • And now what you see, one row at a time, is the following.

  • The first hop between me and Google is apparently this router here.

  • Row number, mr-sc-1-gw-vl427.fas.net.harvard.edu.

  • Don't quite understand all of that, but I

  • do know just from knowing the people there, MR is the machine room.

  • So here at Harvard Science Center, there is a room with machines.

  • And that's where this server apparently is.

  • SC means Science Center.

  • GW by convention means gateway, which is just

  • a synonym for router, this kind of device.

  • And then I don't know what VL427 means.

  • But I do know that if we continue to the next hop here,

  • row two, Core Science Center gateway, or Core Science Center router.

  • So one router is connected to another router.

  • The third hop to which my data is delivered

  • is bdrgw2, which I know by convention means border gateway.

  • And so this data is being passed from hop one to two to three.

  • And once it goes there, it goes to hop four or router

  • number four, which is nox1sumgw.

  • So nox is the northern crossroads, which is a common peering point here

  • in the Northeast of the US, which just means lots of different internet

  • service providers interconnect their cabling and their technology

  • so as to route data to and from locations.

  • That's apparently where we're connected here.

  • Then I don't know where row five is, but it

  • looks like its owned by internet two, which

  • is a fast level of internet service that a lot of universities use.

  • Then router 6, 7, 8, 9, 10, and 11 don't even disclose that they have names.

  • And they might not.

  • Routers don't and computers don't need to have

  • domain names or human-friendly terms, it's just useful for us humans.

  • But then lastly in hop 12, we finally make our way to whatever this is,

  • which seems to be some kind of synonym or alias for one of Google's servers.

  • So it seems that in just 12 hops, I can get data from here to Google.

  • And you know how long it takes to get from here to Google, wherever they are?

  • 9 milliseconds in total.

  • That's pretty darn fast to make a request from my computer

  • to some other computer, especially when that computer could be most anywhere

  • in the world or in the country.

  • Now, there's a lot of variability.

  • If you look at each of these rows-- 1.5 milliseconds, 1.9, 2.9, 25, 25, 25.

  • These aren't cumulative.

  • What my computer is doing is sending a packet to the first router,

  • then to the second rather, then to the third router,

  • and measuring each time how long it takes.

  • So you really just get a rough sense, an average of sorts,

  • based on running this command like this.

  • So it seems to take between 10 and 30 milliseconds

  • to get my data from me to Google.

  • Now, I don't know where Google's servers are,

  • but I do know that UC Berkeley is in California,

  • and their servers I do think are in California.

  • So let's do another by tracing the route to www.berkeley.edu

  • where some of our friends there are.

  • That was super fast, even though it still took some 93 milliseconds.

  • So I'm going to infer that the server of Google's

  • that I'm talking to isn't all the way in California,

  • because to get to California in reality seems to take a good 100 or 90

  • milliseconds.

  • But let's see what we can glean here.

  • So Machine Room Science Center.

  • It's a core gateway.

  • It's a border gateway to Northern Crossroads, to an unnamed server.

  • Don't know what this one is.

  • But I can guess maybe what this is.

  • And notice in particular, router number six jumps from seven

  • milliseconds to like 49.

  • That's a pretty good distance.

  • And indeed, if you look at the name here, Hous, this I'm guessing

  • is a router that's in Houston, Texas, halfway across the country.

  • After that, maybe Los Angeles here in step 8.

  • And that, indeed takes a little more time.

  • So you can probably infer that it's farther away.

  • No name, no name.

  • This one here, I'm not really sure.

  • But now we seem to be in Berkeley's campus and CalWeb-- California web,

  • their server farm production.

  • Indeed, it takes some 90 seconds in total to get to Berkeley.

  • What about MIT?

  • MIT should be pretty close.

  • Let's do a trace route to MIT.edu.

  • And it takes-- all right, so it seems that two routers between us and MIT

  • aren't even cooperating, and that's their prerogative.

  • Not actually responding to our requests.

  • And so in about 10 milliseconds, we get to MIT's server,

  • which seems to be hosted by a third party

  • company called Akamai, which is a content delivery network,

  • among other things.

  • Which means MIT has outsourced to some third party

  • the physical hosting of their servers, which is not uncommon.

  • But let's do one more.

  • Let's do one like for CNN, but not here in the US.

  • But maybe .co.jp for the Japanese version of CNN's website.

  • Let's go ahead and run this.

  • Initially following the same route, Machine Room, Core Gateway, border.

  • And then wala, 189 milliseconds later, we seem to have gotten to Japan.

  • But what can we glean from these numbers?

  • I'm not quite sure where all of these hops are.

  • But what is interesting to me is this one here between routers 8 and 9, what

  • do you notice?

  • That's a sizable jump in time.

  • And it's not a fluke.

  • It's not an anomaly, because indeed, it seems to persist.

  • So if we go farther and farther into this trace, then

  • indeed it's staying at 170 plus milliseconds.

  • So what do you think is in between routers number 8 and 9?

  • What would be between these?

  • I dare say there's an entire ocean between them.

  • And we can see that thanks to this animation here,

  • there's a whole lot going on between points A and B,

  • including sometimes some pretty big cables and some pretty big oceans.

  • Let's take a look.

  • [MUSIC PLAYING]

  • All right, there's something about really cool music

  • that makes lines cool.

  • But indeed, those pictures capture the complexity

  • of all the wiring that's actually interconnecting all of the continents

  • and countries of the world that actually explains more technically some

  • of those differences in timings.

  • But at the end of the day, this packet has to get somewhere.

  • And suppose it does make its way over to Google servers,

  • and Google receives this packet of information,

  • realizes, oh, someone is searching for cats again.

  • What does Google actually do in order to respond to that request?

  • Well, it turns out that Google too is going to use a whole bunch of packets.

  • And whereas previously, it was their address in the TO field

  • and my address in the FROM field, now they're

  • just going to simply reverse this so that the TO field now is to me,

  • the FROM field is from Google.

  • And inside of this envelope is going to be their various search results.

  • Now turns out we found one such search result here.

  • So if Google has decided to send me back this search result.

  • Maybe I was feeling lucky and clicked that button.

  • So I just get back one result. They're going to put the cat into the envelope.

  • But sometimes, the data is pretty big.

  • Sometimes this image might be kilobytes, megabytes, or if it's a video file,

  • could be gigabytes large.

  • And it would be kind of rude if Google, in order

  • to send me a really big response, shoved a really big piece of information

  • in its packet and then clogged the internet so-called tubes on their way

  • back to my laptop, thereby preventing anyone else from talking to Google

  • or nearby websites at that same moment in time.

  • So indeed, what Google and what many websites do

  • is they leverage a feature of IP, and its sister protocol

  • TCP that lets us fragment this.

  • And indeed, they will take this perfectly nice picture of a cat,

  • and they will fragment it, thanks to IP, into maybe four different pieces, each

  • of which is smaller than the original.

  • And inside of this envelope then goes one piece at a time.

  • And so if I put one such piece in this first envelope.

  • I can then much more efficiently clearly proceed to transmit this.

  • And then if I do the same with a second and a third

  • and maybe a fourth envelope, now Google can respond with one, two, three

  • and maybe more packets of information that make their way on the internet,

  • not even necessarily following the same path.

  • In fact, there's no guarantee that A to B

  • is going to be the same route as B to A. Things change dynamically over time.

  • But Google's going to have to include a little bit

  • more information on this envelope.

  • It's not sufficient anymore just to send me four envelopes.

  • What else had they probably best do so that I can actually

  • see my cat when it gets back to me?

  • I've got to know how many packets they sent me,

  • and I need to know in what order.

  • So it turns out that what Google is probably going to do

  • is something like this, write on this envelope the number of the packet

  • and really how many there are.

  • And this is a bit of a white lie, it's actually

  • done a little differently thanks to some other fields

  • that are inside of this envelope.

  • But we can think of it really as 1/4, 2/4, 3/4, 4/4,

  • so that if I only get two of these envelopes

  • or three of these envelopes or four, I now know definitively, wait a minute,

  • I only got 3/4 of my cat.

  • And moreover, the ones I did get, I know the order in which

  • I can reassemble those packets.

  • Now, I mentioned this other protocol, TCP,

  • that, indeed often works in conjunction with IP.

  • And you can think of IP as giving you features like addressing, signing

  • every computer in the world a unique address, and fragmentation,

  • being able to chop things up.

  • But TCP further allows us to associate sequence numbers with packets

  • that allows me the receiver to know, wait a minute,

  • I'm missing one or more packets.

  • So TCP is often said to guarantee delivery, and it is this protocol.

  • So long as your Mac or your PC or your computer

  • supports it, which they all do these days.

  • If it determines, hey, wait a minute, I'm missing this packet,

  • TCP is the protocol, the set of conventions, that say Google,

  • I need this packet again or these packets again,

  • and they will be retransmitted.

  • Now, you pay a price in terms of performance,

  • because now you might have to wait for the rest of the cat.

  • So there might be a bit of a latency in order to get back that response.

  • And that might not always be desirable.

  • And indeed, I can think of some scenarios,

  • like if you're watching a baseball game on TV or soccer or football

  • where you're watching a live stream-- or maybe it's the Oscars or the Emmys,

  • or something live, where you really want to stay in sync with that broadcast,

  • even if sometimes there's network issues or there's

  • buffering-- you don't necessarily want it to buffer.

  • You don't necessarily want lost information to be retransmitted.

  • You'd rather just lose a few seconds of the show

  • so that at least you're staying current, especially if you're there

  • with a bunch of other people and it would be just silly if you

  • gradually over time drift out of date.

  • And so the rest of the world is finished watching the show or the game,

  • and you're still chugging along.

  • So as an alternative to TCP, there's other protocols, one of which

  • is called UDP that's very often used for live streaming

  • and for video and applications like that, where you really just want

  • the software to forge ahead, rather than wait for some new data

  • to get transmitted.

  • But there's other things we can do with the internet.

  • And indeed, there's lots of things we ourselves do every day.

  • It's not just the web, like in downloading cats from Google.

  • But there's email, and there's Skype, and Facebook Messenger,

  • and any number of other services.

  • So how in the world does a computer upon receiving a packet of information

  • know if it is an email or if it is a web page, or put more concretely,

  • how do I know if I should show this user this cat in his or her email program

  • or in his or her browser, which might be the same?

  • In other words, how do I distinguish between one type of program

  • running on the internet from another?

  • Well, turns out that TCP also provides a standardization of services.

  • And that is just a fancy way of saying that in addition to saying

  • on this envelope to who it is and what number it is and from whom it is,

  • I also need to uniquely identify the type of service

  • whose information is in that packet.

  • And I do this just by writing a number.

  • And I typically write one of these numbers.

  • 80 if that packet is meant to be web information.

  • So HTTP is the string that most of us type most every day-- or at least

  • see these days, even though our browsers generally fill it in

  • if we don't explicitly type it.

  • It turns out that the world decided years ago

  • that if you want to send information from yourself

  • to a web server like Google to request cats,

  • you had better write the number 80 in the TO field in addition

  • to Google's IP address.

  • This way, Google knows it's not an email destined for Gmail,

  • knows it's not a message destined for Google Hangouts or the like.

  • Google servers can actually distinguish this

  • as an HTTP request or web request from any number of other services.

  • If you're using encryption, HTTPS, that special number

  • that the world standardized on is 443.

  • You rarely see this, but it's on the envelopes

  • that your Macs or PCs are actually sending to Google servers.

  • Meanwhile, there's other port numbers, so to speak.

  • If you've ever heard of FTP, file transfer protocol.

  • This is software that's not recommended anymore,

  • because it's comply unencrypted.

  • But it's still unfortunately popular in some applications

  • or with some less expensive web services.

  • 21 is the number that identifies that service.

  • And that just means inside of this packet

  • is information related to transferring files, not a web page per se.

  • 22, SSH, Secure Shell.

  • This is a very popular protocol, at least among computer scientists

  • and others, that allows you to run commands on your Mac or PC

  • on a remote server, but in an encrypted way.

  • And those kinds of packets contain the number 22.

  • SMTP-- Simple Mail Transfer Protocol-- is what email generally

  • is for outbound email.

  • So if you send an email, your envelopes have 25 on them.

  • And then lastly, DNS is again that service

  • that converts host names to IP addresses and vice versa.

  • So when your Mac or PC asks the world, hey, wait a minute,

  • what is the IP address for www.google.com?

  • That envelope has the number 53 on the outside.

  • And dot dot dot, there's dozens or even hundreds of these other things,

  • for Skype and for Google Hangouts and the like.

  • But these here are just some of the most common.

  • So the envelope, at the end of the day, has

  • a decent amount of information on it.

  • The TO address, the FROM address, and that TO address furthermore

  • has a port number associated with it.

  • And then, if it's been fragmented especially,

  • there's got to be some kind of number that

  • identifies the packet itself so that you can detect if something is missing.

  • But there's kind of a side effect, or really a feature

  • of having this level of detail on each of these envelopes.

  • You've probably heard of a firewall.

  • Maybe not in the real world.

  • In the real world, a firewall is literally

  • a wall that's meant to block fire, typically

  • in like strip malls and offices or stores that

  • are next to each other physically.

  • A firewall is meant to keep a fire that breaks out

  • in one store from traveling into another store, creating even more damage.

  • But in the software world, a firewall is a piece of software

  • that really keeps packets out that you don't want coming in,

  • or keeps packets in that you don't want going out.

  • So a firewall might be used by parents to prevent kids

  • from accessing Facebook or Google, or silly things

  • during the day for instance, if they want them focusing on other things.

  • It might be used by universities or corporations

  • to block access to certain websites that you simply

  • don't want your students or your staff actually accessing.

  • It might be used to keep corporate data inside,

  • so that nothing accidentally leaks out-- financial information, or emails,

  • or the like.

  • You can use a firewall to block outbound access as well.

  • But this invites the question then, how is a firewall implemented?

  • Well, it's not all that hard, really.

  • Because if the internet is just a whole bunch of these packets flying

  • back and forth between computers, between routers, leaving and entering

  • our own network, whether that's my home or my campus or my company,

  • I could just have my routers, for instance,

  • look at every one of those envelopes, look at the TO address,

  • maybe look at the FROM address, and just blacklist certain addresses.

  • Indeed, if I know that I don't want my employees accessing Facebook,

  • I could, for instance, just say to my routers, configure my routers,

  • do not allow any data going to or from IP address 31.13.80.36.

  • Now, it might be easier said than done, because in reality, Facebook probably

  • has multiple IP addresses.

  • So we might have to grow this list or dig a little deeper in order

  • to block them.

  • And better yet, we could potentially look inside of the envelopes themselves

  • to see, is this a Facebook packet?

  • But if they're using encryption, which they do by default

  • these days, that might not really be feasible.

  • So we can have kind of a heavy-handed solution

  • there, and just block everything we think is Facebook.com.

  • But certainly, things might leak out potentially over time if things change.

  • But what else could we do?

  • Suppose that I really don't want people Skyping during the day,

  • or I don't want people using Facebook Messenger,

  • or some software that has its own unique TCP port number

  • that some company or the world has standardized on.

  • You could block all outbound email by just blocking port 25, it would seem,

  • or a few other ports that are popular.

  • You could block all web access by blocking 80 and 443.

  • You could block all DNS traffic, if you really want.

  • And indeed, a lot of companies do this, especially

  • like Starbucks kind of places, internet cafes in airports and the like.

  • Sometimes they only want you using their DNS server,

  • not your own company's or your own home's.

  • And so they can block access to any DNS server other than their own.

  • This is unfortunately often or sometimes for advertising

  • reasons, so that they can actually keep track of what you're accessing

  • and where and why-- or where, at least.

  • But it's all possible technologically with this underneath the hood.

  • So what are some of the defenses in place,

  • especially when you want to visit some site that isn't necessarily encrypted?

  • Or maybe you want to visit some site that is blocked,

  • and you want to simply be able to work around this, because you're traveling

  • or you need to be able to access something privately

  • at your home or your work.

  • Well it turns out, that there are services called VPNs or Virtual Private

  • Networks.

  • And Harvard has one VPN at vpn.harvard.edu.

  • And Yale has one as well at access.yale.edu.

  • And this is simply software that you generally download to your phone

  • or your computer that allows you to connect via some protocol and some port

  • to your company or to your home's network, but in an encrypted way.

  • So a VPN gives you an encrypted tunnel, so to speak,

  • so that you are connected to the internet.

  • That's a precondition.

  • You have to get on the internet itself.

  • But then you configure your Mac or PC to route

  • all-- in theory-- of your internet traffic through the VPN.

  • So even if I'm just visiting Gmail or Facebook or whatever on my Mac,

  • if I'm connected to Harvard's VPN, all of that traffic by design

  • is going through Harvard.edu first, and then it's

  • going out to Facebook or Google or wherever it's destined.

  • Similarly, if I'm traveling in a foreign country that

  • happens to block a lot of internet access, if they do allow VPN access,

  • I can, in my hotel room or wherever, connect to Harvard or to Yale, route

  • all of my internet traffic through Harvard or Yale, and then from Yale

  • to Harvard to wherever I'm going on the internet.

  • And the upside of this is that it's entirely encrypted,

  • which means no one at that company or that country in theory

  • knows what data is going through the tunnel.

  • But it also potentially costs me a good amount of time.

  • We've seen that we're really only talking milliseconds,

  • but hundreds of milliseconds can certainly add up.

  • So if I'm abroad, for instance, trying to connect to some website that's

  • going from that country to Harvard, to the destination, back to Harvard,

  • back to the country I'm in, your internet connectivity might be slower,

  • but at least it's not actually permanently blocked.

  • So if you've ever heard of friends of yours actually accessing services

  • like Netflix or Hulu, that for licensing reasons,

  • do restrict you typically to being in this country--

  • this is why you might have read that Hulu and Netflix and others are

  • cracking down on people using VPNs, whether it's

  • Harvard's or Yale's or a third party companies,

  • so as to circumvent those licensing restrictions.

  • But technologically, all it's doing is giving you

  • an encrypted tunnel between you and someone

  • you have an affiliation with, like Harvard or Yale,

  • and encrypting all of your traffic in between there,

  • and routing all of your traffic through it.

  • So with that said, we've looked at DNS, and we've looked at DHCP,

  • and we've looked at routers.

  • And there's other hardware still, whether, it's

  • in your home or campus or office, there's

  • things like switches, which are fairly simple devices that just have lots

  • of ethernet jacks, so to speak, that you can plug physical cables into,

  • and those cables can then intercommunicate,

  • so that you can wire computers together en mass.

  • There are things called access points or APs.

  • Those are the things around campus that have the little bunny ear

  • antennas that are often blinking.

  • Those are the wireless access points.

  • And access points often have firewalls, often have routing software built in.

  • So the line is increasingly blurry these days as to what these small devices do.

  • So it really is the services that matter.

  • And indeed, while a little dated, I thought

  • it would be fun to take a look now at a longer form version of the 60

  • second trailer of Warriors of the Net that

  • was made a few years ago to paint a more visual picture of how

  • the internet works.

  • It definitely takes some liberties with shall we say accuracy.

  • But it also helps paint a picture of what

  • really is going on underneath the hood.

  • So let's take a look at the internet.

  • [MUSIC PLAYING]

  • [VIDEO PLAYBACK]

  • -For the first time in history, people and machinery

  • are working together, realizing a dream.

  • A uniting force that knows no geographical boundaries, without

  • regard to race, creed, or color.

  • A new era, where communication truly brings people together.

  • This is the Dawn of the Net.

  • Want to know how it works?

  • Click here to begin your journey into the net.

  • Now exactly what happened when you clicked on that link?

  • You started a flow of information.

  • This information travels down into your own personal mail

  • room, where Mr. IP packages it, labels it, and send it on its way.

  • Each packet is limited in its size.

  • The mailroom must decide how to divide the information, and how to package it.

  • Now the package needs a label, containing important information,

  • such as sender's address, receiver's address, and the type of packet it is.

  • Because this particular packet is going out on to the internet,

  • it also gets an address for the proxy server, which has

  • a special function, as we'll see later.

  • The packet is now launched onto your Local Area Network, or LAN.

  • This network is used to connect all the local computers, routers,

  • printers, et cetera for information exchange

  • within the physical walls of the building.

  • The LAN is a pretty uncontrolled place, and unfortunately, accidents

  • can happen.

  • The highway of the LAN is packed with all types of.

  • Information these are IP packets, Novell packets, Apple Talk packets.

  • They're going against traffic, as usual.

  • The local router reads the address, and if necessary,

  • lifts the packet onto another network.

  • Ah, the router.

  • A symbol of control in a seemingly disorganized world.

  • [METHODICAL MUTTERING]

  • There he is, systematic, uncaring, methodical, conservative,

  • and sometimes not quite up to speed.

  • But at least he is exact, for the most part.

  • As the packets leave the router, they make their way

  • into the corporate internet and head for the router switch.

  • A bit more efficient than the router, the router switch

  • plays fast and loose with IP packets, deftly routing them along the way.

  • A digital pinball wizard, if you will.

  • [ERRATIC MUTTERING]

  • As packets arrive at their destination, they're

  • picked up by the network interface, Ready to be sent to the next level.

  • In this case, the proxy.

  • The proxy is used by many companies as sort of a middleman

  • in order to lessen the load on their internet connection,

  • and for security reasons as well.

  • As you can see, the packets are all of various sizes,

  • depending on their content.

  • The proxy opens the packet and looks for the web address or URL.

  • Depending upon whether the address is acceptable,

  • the packet is sent on to the internet.

  • There are, however, some addresses which do not

  • meet with the approval of the proxy.

  • That is to say, corporate or management guidelines.

  • These are summarily dealt with.

  • We'll have none of that.

  • For those who make it, it's on the road again.

  • Next up, the firewall.

  • The corporate firewall serves two purposes.

  • It prevents some rather nasty things from the internet

  • from coming into the intranet, and it can also

  • prevent sensitive corporate information from being sent out onto the internet.

  • Once through the firewall, a router picks up the packet,

  • and places it onto a much narrower road, or bandwidth, as we say.

  • Obviously, the road is not broad enough to take them all.

  • Now, you might wonder what happens to all those packets

  • which don't make it along the way.

  • Well, when Mr. IP doesn't receive an acknowledgement

  • that a packet has been received in due time,

  • he simply sends a replacement packet.

  • We are now ready to enter the world of the internet, a spider

  • web of interconnected networks which span our entire globe.

  • Here, routers and switches establish links between networks.

  • Now, the net is an entirely different environment

  • than you'll find within the protective walls of your LAN.

  • Out here, it's the Wild West.

  • Plenty of space, plenty of opportunities,

  • plenty of things to explore and places to go.

  • Thanks to very little control and regulation,

  • new ideas find fertile soil to push the envelope of their possibilities.

  • But because of this freedom, certain dangers also lurk.

  • You'll never know when you'll meet the dreaded ping of death.

  • A special version of a normal request ping, which some idiot thought up

  • to mess up unsuspecting hosts.

  • The path our packets take may be via satellite, telephone lines, wireless,

  • or even transoceanic cable.

  • They don't always take the fastest or shortest routes possible,

  • but they will get there eventually.

  • Maybe that's why it's sometimes called the world wide wait.

  • But when everything is working smoothly, you

  • can circumvent the globe five times over at the drop of a hat, literally.

  • And all for the cost of a local call or less.

  • Near the end of our destination, we'll find another firewall.

  • Depending upon your perspective as a data packet,

  • the firewall could be a bastion of security or a dreaded adversary.

  • It all depends on which side you're on and what your intentions are.

  • The firewall is designed to let in only those packets that meet its criteria.

  • This firewall is operating on ports 80 and 25.

  • All attempts to enter through other ports are closed for business.

  • Port 25 is used for mail packets, while port 80 is the entrance for packets

  • from the internet to the web server.

  • Inside the firewall, packets are screened more thoroughly.

  • Some packets make it easily through customs,

  • while others look just a bit dubious.

  • The firewall officer is not easily fooled,

  • such as when this ping of death packet tries to disguise itself

  • as a normal ping packet.

  • For those packets lucky enough to make it this far,

  • the journey is almost over.

  • It's just a line up on the interface to be taken up into the web server.

  • Nowadays, a web server can run on many things,

  • from a mainframe to a webcam to the computer on your desk.

  • Why not your refrigerator?

  • With a proper set up, you can find out if you

  • have the makings for chicken cacciatore or if you have to go shopping.

  • Remember, this is the dawn of the net.

  • Almost anything's possible.

  • One by one, the packets are received, opened, and unpacked.

  • The information they contain, that is, your request for information,

  • is sent on to the web server application.

  • The packet itself is recycled, ready to be used again, and filled

  • with your requested information, addressed, and sent out on its way

  • back to you, back past the firewall, routers,

  • and on through to the internet, back through your corporate firewall,

  • and onto your interface, ready to supply your web browser with the information

  • you requested, that is, this film.

  • Pleased with their efforts, and trusting in a better world,

  • our trusty data packets ride off blissfully

  • into the sunset of another day, knowing fully they

  • have served their masters well.

  • Now isn't that a happy ending?

  • [END PLAYBACK]

  • DAVID MALAN: All right, so that is how the internet works.

  • And as has been our tendency over the past few weeks,

  • now that we know how we can get data from point A to point B,

  • we can abstract above that, and just take

  • for granted now that we can move data from point A to point B

  • and start moving the actual data.

  • So that invites the question now of what is inside this envelope.

  • When I get a response back from Google containing a whole bunch of cats,

  • or when I get back my news feed from Facebook, or my inbox from Google.

  • Well, inside of these packets quite often

  • is messages that conform to HTTP, the Hypertext Transfer Protocol.

  • So this is just one of those services that we alluded to earlier.

  • Among them also were SSH, and DNS, and SMTP, and yet others.

  • But HTTP is perhaps by far the most common one in so far

  • as we use the web so much these days.

  • So inside of HTTP, there are certain types

  • of messages, messages that conform to certain patterns by which we

  • get information.

  • Now, what is the P in HTTP?

  • HTTP, Hypertext Transfer Protocol.

  • Well, let me borrow Arthuro over here.

  • And we have this silly human convention of course

  • that when you meet someone for the first time or the first time in a while,

  • you say, oh, hi, my name is David.

  • Nice to meet you, Arthuro.

  • And we exchange hands.

  • And when I put out my hand, Arthuro knows to put out his hand.

  • And then we do this silly handshake.

  • Why is that?

  • Well, it's just a protocol.

  • It's a convention.

  • It's a set of conventions that we humans for better or for worse

  • have adopted by which we greet each other.

  • Similarly do computers have protocols via which they communicate,

  • and sets of conventions that govern how you start to communicate

  • and how you finish communicating.

  • So what do those messages actually look like?

  • The simplest of them is quite literally this verb

  • here, get, whereby inside of this envelope, when

  • I'm requesting information of Google for the first time--

  • and indeed, I put that message before, search

  • for cats-- that actually has a certain message at the top of it, really,

  • that is literally get.

  • There's a little more information, but at the end of the day, it just is get.

  • Specifically, these are the first couple of lines

  • inside of any request that my browser makes of a web server,

  • like in this case, harvard.edu.

  • If I want to get the default home page of Harvard., I literally,

  • inside of my envelope, write this message-- GET slash space HTTP/1.1,

  • which is the latest version of HTTp that people use.

  • Then below that, I specify the host that I want to talk to, just in case

  • Harvard or Google or whoever has multiple domain names physically

  • running on the same servers, which is possible.

  • So I say host, www.harvard.edu.

  • And then maybe there's some other text.

  • But this first line or two is really the most important.

  • And then what comes back from the server,

  • whether it's being sent to Harvard or being sent to Yale,

  • is a response that hopefully says is literally, OK, inside

  • of which is the cat or inside of which is the inbox for Gmail

  • or inside of which is my news feed from Facebook.

  • All of which typically are in this language here,

  • HTML-- HyperText Markup Language.

  • So whereas HTTP is a protocol, like a sort of handshake agreement

  • that governs that when I want to request information of a server,

  • I should say GET and then a few other words,

  • and then the server should respond with OK and a few other words,

  • HTML is the language in which the actual web

  • pages that are coming back from Google or Facebook or Harvard or Yale

  • are actually written in.

  • It's not a programming language like C or Scratch.

  • It's a markup language, as we'll see, that

  • really controls formatting and layout.

  • There aren't ifs and loops and other such constructs instead.

  • But that's what's below the dot dot dot when the response comes back

  • from Harvard or Yale or Google is this language HTML.

  • Now, 200 is a status code, so to speak, that we almost never actually see

  • from a server.

  • But odds are, some of you have seen at least one of these status codes before.

  • And perhaps the most obvious or the most familiar

  • is probably this one here, when you've requested some web page,

  • and either it doesn't exist anymore or you have a typo more commonly

  • or the URL is broken for some reason.

  • Odds are you have literally seen the status code 404,

  • because the server is just showing it to you.

  • But at a lower level, these numbers are actually

  • typically sent in these packets of information

  • back and forth from the server to me.

  • But we'll see before long that you can use status codes like 301 and 302

  • to you induce redirects, so to speak.

  • If you want to send the user from one URL to another-- maybe

  • the domain name is changed-- you can do that there.

  • For efficiency, a server can say 304, not modified.

  • As in, you already asked me for this page.

  • It hasn't modified since you asked me for it,

  • I'm not going to send it to you again, thereby

  • saving a bit of time and bandwidth.

  • Unauthorized or forbidden generally means

  • that you don't have access to the file for some reason.

  • And 500's actually pretty bad.

  • So we'll probably induce this ourselves before long when we actually write

  • programs that run on a web server.

  • But 500 means there's generally a problem in your code

  • that's supposed to be serving up web content to browsers.

  • So let's actually see these kinds of things too.

  • It turns out that I can pretend to be a browser at my command line here.

  • In fact, I can use a program called Telnet,

  • which is an older program, similar in spirit to something called SSH,

  • which I mentioned earlier, but it's not encrypted.

  • But it allows me to connect to a remote server specifically on a certain port.

  • So I for instance, can connect to harvard.edu and on port 80

  • specifically.

  • I could actually with textual commands send emails to Harvard in this way,

  • or send chat messages if they support that.

  • But for now, we're focusing only on HTTP, the unencrypted version.

  • And if I go ahead and hit enter, you'll see

  • that I'm connected to www.harvard.edu.cdn.cloudflare.net,

  • which is curious.

  • But it turns out-- and we could see this if we poked around with nslookup again.

  • It turns out that Harvard is also outsourcing its home

  • page to a third party CDN-- Content Delivery Network-- called Cloudflare,

  • so Harvard's servers really live elsewhere.

  • And now I talked too long and the connection got automatically closed.

  • So let me go ahead and redo this, and just pretend to be a browser by typing

  • GET/HTTP/1.1 host www.harvard.edu and then Enter Enter twice.

  • And it flew across the screen, but let me scroll back up to the top.

  • This is-- even though it might look cryptic to you at the moment

  • if you've never made web pages before-- this is this language called HTML.

  • And it's quite a lot of HTML, so let me keep scrolling up and up and up and up.

  • Until hopefully if we go up high enough-- oh, I've exceeded my buffer.

  • So I'm going to do this differently.

  • I'm going to go ahead and-- you might recall

  • from a past problem, where you can actually redirect the output to a file.

  • So I'm going to go ahead and save this in a file called output.txt.

  • GET/HTTP/1.1 host www.harvard.edu, enter, enter.

  • And now I'm going to go ahead and open this file, which is here.

  • And you can see that what just happened was this.

  • The server responded with 200 OK, which is great.

  • And then the date of the server in Greenwich Mean Time.

  • And then a bunch of information.

  • Cookies, we'll come back to these before long.

  • But those will be germane to when we actually

  • write our own software for the read.

  • Drupal, seems that Harvard's website is using

  • Drupal, a popular content management software for websites.

  • And then there's some other stuff about caching

  • and when the site expires and so forth.

  • This is a little strange.

  • Harvard's website apparently expired in 1978.

  • But more on that another time.

  • And so there's some interesting HTTP headers

  • besides things like the host field that we sent and the GET and the OK

  • that I mentioned earlier as well.

  • Now, Telnet is not a very user-friendly way to do this.

  • I'm going to actually redo this with a different command, Curl,

  • whereby I can do a curl-I, and I'm going to then do

  • the full URL-- www.harvard.edu, Enter.

  • And now what's nice with curl.

  • Is that I don't actually see the HTML.

  • I only see in this case the HTTP headers, which are still quite a few,

  • but we can now at least see them a little more readily.

  • In fact, let me go and do the same now for yale.edu,

  • and see if we can glean any differences in their servers.

  • There we go here.

  • So the headers that are coming back for Yale are these that I've highlighted.

  • And it looks too that there's some interesting stuff going on.

  • It seems that Yale also uses Drupal.

  • So it seems that both universities are doing something rather familiar.

  • But most of this information is not all that useful.

  • But it is useful if maybe we do this.

  • What if we visit, for instance-- why don't we

  • go to HTTP-- how about we go to reference.cs50.net, which you might

  • use as an alternative to man pages.

  • And this is a little curious.

  • It moved permanently.

  • This is not 200 OK.

  • Move permanently.

  • Where did it go?

  • Well, wait a minute, let me go ahead and highlight that URL.

  • And let me go ahead in another tab and just go there.

  • OK, it's there.

  • So where did it move to?

  • And in fact, if I look at the domain again,

  • it is indeed there, but notice this.

  • Almost all of CS50's website's actually run not over HTTP per se

  • but HTTPS, where the S means secure, whereby

  • all of our websites for the most part are encrypted.

  • But that's not what I typed.

  • I just went to http://reference.cs50.net.

  • And yet when I do that with this command line interface, which

  • mimics the behavior of a browser, if I visit HTTP, I'm told by CS50's server,

  • moved permanently, status code 301.

  • But notice this one other header that's kind of interesting-- location.

  • This location header-- and a header to be clear

  • is just a word, a colon, and then a value.

  • This header specifies where we move to.

  • So this seems to be a mechanism whereby using HTTP

  • headers-- sort of messages inside the envelope

  • that the human doesn't really see, but that the browser doesn't understand.

  • This seems to be a way that we can forcibly

  • redirect all users from the insecure version of our website

  • to the secure version, so that thereafter, all of the information

  • is secure.

  • And frankly, there's not all that much private information going on there.

  • But if you don't really want the whole world or the NSA

  • or Harvard or Yale knowing what pages, what functions you

  • need to look up on reference.cs50.net, by forcing everything

  • to HTTPS, in theory, everything is perfectly secure now so

  • that only you know what pages you're visiting.

  • And we, since we run the server.

  • But no one in between.

  • And indeed, that's one of the biggest values of using HTTPS-based URLs,

  • so that even if there is some man in the middle,

  • so to speak, a bad guy, an adversary between you and that remote server,

  • whether it's here on campus or in Starbucks or the airport

  • or some random adversary on the internet, he or she in theory

  • should not be able to see anything between points A and B

  • if you are, as before using a VPN between those points or two,

  • using a protocol like HTTPS that by design is encrypting information.

  • And suffice it to say the encryption is far fancier than Caesar or Vegener.

  • But it is indeed similar in spirit, where

  • those zeros and ones going back and forth are scrambled in some way

  • that only you and the point B server can actually decode them or decrypt them.

  • So let's visit an actual website now, Google.

  • But before we do that, let's turn off some of the more modern features

  • by going to Setting, going to Search Settings,

  • and turn off so-called instant results.

  • Because for our purposes today, instant results

  • use a technology or language called JavaScript,

  • which we'll get to in a few weeks' time, but for now it's

  • just going to be a distraction from the underlying HTTP feature.

  • So I'm going to go ahead and indeed never show instant results.

  • So that now when I search for something like cats on google.com and hit Enter,

  • I'm going to find myself at a fairly long URL, indeed this URL here.

  • And I have no idea what most of this URL means, not knowing

  • how Google works underneath the hood.

  • But I'm looking for some familiar patterns.

  • And indeed, if I pretty much a little ignorantly but hopefully cleverly just

  • delete anything I don't understand, I'm going to deliberately leave myself

  • with just the essence of this URL.

  • So notice, I didn't type this URL.

  • I ended up at this URL after I typed in cats to that search box and hit Enter.

  • Now I found myself in a really long URL and then

  • I just started deleting things I didn't understand to distill

  • this URL into quite simply this.

  • https://www.google.com/search?q=cats.

  • Well, it turns out that much like in the world of C,

  • you have functions from CS50 like getString and getInt,

  • or if you implement them yourself, scanF or other such functions

  • whereby you can get user input.

  • It's less obvious at first glance how a web server can get input from a user.

  • Because there is no-- well, rather, you can see the search

  • box that I typed into, but until I hit Enter,

  • the server doesn't see that information necessarily.

  • And that's a bit of a white lie, because nowadays thanks to JavaScript

  • and thanks to autocomplete, Google's actually

  • seeing every keystroke you type.

  • But in theory, when I hit Enter, only when I hit Enter,

  • do they see the full word cats.

  • And how do they get access to it not having physical access to my keyboard?

  • They see it in the URL here.

  • And so indeed HTTP, beyond supporting status codes and the sort

  • of digital equivalent of my handshake with Arthuro,

  • also supports input, specifically input parameters that in this case

  • is arbitrarily but reasonably called q, because back in the day,

  • Google decided that the default input to its search page would be q for query.

  • And indeed, if I hit Enter now, the results seem no different.

  • So for whatever reason, Google uses by default a lot more parameters,

  • all of which I deleted.

  • But the only necessary one is cats.

  • And notice even without changing the page, I can go up in here

  • and change my cats to dogs and hit Enter.

  • And now notice I've searched for dogs just as though I had typed this myself.

  • But indeed, the only thing I've been changing up here is the keyword.

  • And if I search for mice now, I'm changing the search result.

  • So it seems that the essence of an HTTP request

  • boils down to what is sent here.

  • So let's try this as well.

  • Let me go ahead and copy that URL.

  • And just for good measure, I can go ahead and do something like curl

  • and then paste this URL.

  • And let me go ahead and quote it, just because it has a question

  • mark that could break things.

  • And hit Enter.

  • It's pretty overwhelming here, but this is all of the HTML

  • that's coming back from google.com.

  • So when I see these search results in google.com,

  • this web page is written in this language called HTML.

  • And HTML, as we'll see, is a little overwhelming perhaps at first glance,

  • but follows some very simple patterns.

  • And we can see them better in browsers like Chrome as follows.

  • If you Control-Click or right click on your web page, most any web page

  • if you're using Chrome, you can choose Inspect.

  • And there's keyboard shortcuts and other menu options

  • by which you can access this.

  • And notice among the elements tab here that just popped up.

  • And notice now, again a little overwhelming.

  • But what's nice about Chrome-- and Edge can do this and Firefox and Safari

  • and others-- it can pretty print your HTML.

  • Sort of like Style 50 you can sort of see through any messiness,

  • similarly, can the browser kind of look at the mess that

  • just came across the wire from Google and format it as follows.

  • And indeed, it looks like this language HTML follows a certain pattern.

  • There's always this at the top, open bracket, exclamation point, doc type,

  • HTML, close bracket.

  • Then there's open bracket html in lower case, then some other words and quotes

  • and equals signs perhaps.

  • Then a head, then a body.

  • Maybe some divs for divisions of the page.

  • And even though this is quite a lot, let's look at a simpler one

  • just for kicks real fast.

  • Let's go to harvard.edu and hit Enter.

  • And indeed-- well, actually, it looks just about as complicated.

  • Here's the HTML that composes harvard.edu.

  • So let's try to distill this into its essence.

  • I showed a web page earlier.

  • Let's go back to that to point out-- to be clear,

  • these were called query strings.

  • Let's come back to HTML.

  • So HTML is up to version 5 these days.

  • And this governs what syntax you should use when writing HTML.

  • And here per the earlier slide is perhaps

  • the simplest web page we can make.

  • So the key components-- and there's others we can add

  • and others we will soon add-- boil down to this.

  • This first line, this is so-called document type declaration.

  • This is just a fancy way of saying, you have to type this line first

  • in your file in order to tell the browser that's

  • reading this file top to bottom, left to right this web

  • page is written in version 5 of HTML.

  • Previous versions either didn't have this or had longer versions of this.

  • Is just a globally-understood symbol that means version 5.

  • Then below that is your actual HTML tags.

  • So web pages are composed of HTML tags, or more properly, elements.

  • And most elements have an open tag and a closed tag-- a start tag

  • and an end tag-- that are identical, except for typically the slash.

  • So indeed, notice the symmetry.

  • This tag here, and so far it's what we'll call an open tag or start tag,

  • means hey browser, here comes a web page written in HTML.

  • Hey browser, here comes the head of the web page.

  • Hey browser, here comes the title of the web page.

  • And there's no technical reason I wrote this all on one

  • line instead of putting hello world on its own line and this other tag

  • on its own line.

  • It just felt short enough to just write in one line, so I went with it.

  • But notice that title is open tier.

  • Then there's literally some hard coded text, hello world.

  • And then there is the opposite so to speak, of the tag.

  • It's the same word for the tag, but this forward

  • slash inside of the tag, which closes or ends the tag

  • and sort of ends the whole title element.

  • Meanwhile, that's it for the head, at least in this example.

  • So hey browser, that's it for the head.

  • Oh hey, browser, here comes the body.

  • Hey browser, here's some actual text.

  • Hey browser, that's it for the body.

  • Hey browser, that's it for the web page.

  • So I've also by convention-- and for stylistic purposes like in C--

  • indented things to be very pretty printed, very readable to humans.

  • But the browser certainly doesn't care.

  • And indeed, we saw when we looked at the mess that is Google's website,

  • it's just a big mess of tags and markup so to speak.

  • But for Google, that makes sense, because you

  • don't want to have to transmit any characters unnecessarily.

  • Indeed, if you think about it, if Google's website gets

  • visited by a billion people per day, which

  • actually feels kind of reasonable.

  • And suppose that a programmer at Google hits the space bar just one extra time

  • and saves Google's home page.

  • Well what's the implication of Google having just one

  • additional space in their web page?

  • If that web page is downloaded a billion times,

  • that's a billion extra ASCII characters that gets downloaded per day.

  • And a billion ASCII characters is a billion bytes, which is one gigabyte.

  • So just by hitting the spacebar can really big players like Google

  • cost themselves a huge amount of space and maybe cost or time.

  • So that's why a lot of big websites minify or compress their information,

  • whereas we will be a little more lax here,

  • because it's more important for now certainly that things

  • be readable and understandable.

  • But the white space does not matter to the browser.

  • So let's actually do something with this.

  • Keeping in mind the following, just as this indentation kind of implies,

  • this really if you think about it is a tree structure.

  • There's some document on the screen, which I will literally call document,

  • because that's what browsers do.

  • The top element of which-- I'll draw with a rectangle,

  • distinguish it from the document itself-- is the HTML element that

  • starts here and ends here.

  • And in so far as it starts here and ends here, everything that's inside of it,

  • you can think of as children in a family tree.

  • And the first child is head, the second child

  • is body, left and right respectively.

  • The head tag meanwhile has the title child,

  • and so that's why we see title here.

  • And then I'll draw it with an ellipse, just different shape

  • because it's raw text.

  • It's not an actual tag.

  • And similarly does body have some text below it.

  • So this is just a tree.

  • It's not a binary tree, although it might be by coincidence here,

  • because there aren't many children.

  • But it's some kind of tree structure, each of whose nodes has zero

  • or more children.

  • And indeed, underneath the hood what is IE,

  • what is Edge or Firefox or Chrome or Safari actually doing

  • when it downloads a web page like this?

  • Some programmer or programmers have after taking classes like CS50

  • and knowing what these data structures are implemented in code a tree that

  • represents that web page.

  • And indeed, once in a few weeks we get to JavaScript

  • using yet another language will you be able to manipulate

  • that tree in real time to change the contents of a web page

  • and what a user is seeing.

  • Indeed, if you kind of fast forward in your mind,

  • suppose that you do use something like Facebook and Messenger

  • built into it for sending messages to people or Gmail,

  • where you suddenly get new rows of emails and your web page,

  • what's really happening?

  • Every time you get a message in Facebook,

  • it's just as though this tree is getting modified with like another child

  • somewhere in here.

  • Every time you get a new email in Gmail, it's

  • like another node is appearing in this tree.

  • So there really is this equivalence to this markup language HTML and the tree

  • structures that we've just come from in recent weeks.

  • So let's actually now do something with this.

  • I'm going to go over to CS50 IDE, and I'm

  • going to go ahead and make if you will the simplest of web pages as follows.

  • I'm going to go ahead and create a new file, a text file.

  • I'm going to call it hello.html.

  • And I'm going to go ahead and populate this

  • with exactly what we saw a moment ago.

  • Doc type, HTML.

  • Open bracket, HTML.

  • And notice that CS50 IDE is trying to be helpful here,

  • and when it notices you typing something familiar,

  • it's going to try to finish your thought for you.

  • So indeed, it did.

  • I'm going to go ahead and open now the head of the page.

  • It's going to complete that thought.

  • I'm going to open the title of the page, hello world.

  • And now I'm going to move my cursor down here physically

  • to do body, close bracket, hello comma world, save.

  • So I have written code.

  • It's source code, but it's code written in HTML-- HyperText Markup Language.

  • And indeed, you see no loops or conditions or functions.

  • There's no logic.

  • This is just markup.

  • Do this, stop doing this.

  • Do this, stop doing this.

  • It's fairly mundane.

  • But it's going to allow us to actually visit this file in a browser.

  • Indeed, let me go into a browser now and visit this page hello.html.

  • Incredibly underwhelming.

  • Indeed, this is a huge screen.

  • And all I've created is a web page that says hello world up here.

  • And if I scrolled up, I could actually see the tab

  • whose title is also hello world.

  • But that's my first web page.

  • And if I now apply a lesson learned, if I go ahead and right click

  • or Control-Click Chrome's backdrop and choose inspect,

  • now you'll notice finally here's a simple web page,

  • and not all the messiness that was Harvard's or Google's.

  • You can actually see your HTML.

  • You can't permanently change the files here,

  • because you need to do that in CS50 IDE and change the files.

  • And so here's where there's a potential point of confusion.

  • CS50 IDE is of course a cloud based service,

  • and it's where I'm writing and saving my files.

  • And it just so happens that built into CS50 IDE

  • is its own web server just for serving students work.

  • So when I visit this web here in another tab, I'm visiting not CS50 IDE per se,

  • but the web server running on a certain port on CS50 IDE

  • so I can serve up these web pages.

  • So let's go ahead and do something a little more interesting than that.

  • Let me go ahead now and create another file say as follows.

  • Let me go ahead and copy this just for good measure

  • so I don't have to recreate the whole thing.

  • And let me go ahead and create a new file called Image.html.

  • Paste this in here.

  • And instead of hello world, I'm just going to write say image up here.

  • And how do I embed an image?

  • Well, turns out that there is that literally an image

  • tag-- img to be succint.

  • Indeed, you might want to write out this.

  • But nope, back in the day people decided that img is sufficient.

  • I'm going to go ahead and give it a source.

  • What should the source of this be?

  • Well, let me just do a quick search for like a grumpy cat.

  • And there's a good one.

  • So I'm going to go ahead and Control-Click or Right

  • Click for our purposes now just the image address here.

  • We'll assume this is my image and I'm grabbing the address here

  • for the moment.

  • I'm going to paste it in here, in that there is the URL of a JPEG that

  • is of a grumpy cat.

  • Now with an image, there isn't really the same concept

  • of like starting an image and stopping an image like there

  • is start the title stop the title, start the body, stop the body.

  • And so there are so-called empty elements in HTML

  • that you can express either by doing this, which feels a little silly.

  • Like you're opening the image tag and then immediately closing it,

  • which feels a little ridiculous.

  • And so there's shorter hand syntax where you can actually

  • put the slash inside of the open tag like this so

  • that the element is empty so to speak.

  • Open and closed.

  • It's not strictly required, but at least this way

  • we're making clear our intent is to open and close the thing all at once.

  • Now for accessibility purposes, for someone who has trouble with vision,

  • you might want to provide some alternative text like grumpy cat

  • so that if they're using a screen reader or some other device, there

  • it can actually have a system support explaining what it

  • is that you might otherwise be seeing.

  • So let me go ahead now and open this file image.html.

  • And it's pretty darn simple.

  • But there is my own web page with this big white background,

  • and nothing else yet and this grumpy cat.

  • All right, but of course this web page doesn't do anything.

  • It would be nice if I could click on something and go somewhere.

  • So let's do that.

  • Let's do another example whereby-- I'll call this link.html.

  • And in here-- let me get started just by copying and pasting

  • that-- instead of the cat, let me go ahead and do a an anchor.

  • So it's a little counterintuitive.

  • It's not link, it's anchor.

  • And then anchor, confusingly, has a hyperreference,

  • which is the link to which it goes.

  • And I'm going to go ahead and do something clever

  • like https://www.google.com/search?q=cats.

  • And then close bracket.

  • And now notice CS50 IDE is trying to be helpful.

  • It closes the tag for me, and I can just write the word cats.

  • But let me finish this thought.

  • Let me say search for cats period.

  • And so now, even though we've seen only some simple tags so far,

  • you can use to HTML in line, so to speak, sort of

  • in the middle of another thought.

  • If I want to convey the sentence search for cats,

  • but I want cats to be clickable so that when you click on the word cats

  • it actually goes to Google and searches for cats,

  • I can borrow the idea from earlier-- and I just

  • happen to remember that q is the query that I have to pass in.

  • And notice that I surround cats with the open tag and the close tags.

  • So that now if I open a browser with this file,

  • I see again, a very simple web page.

  • And I can even zoom in to make this more clear.

  • All it says is search for cats period.

  • But notice, it's the link alone that's underlined.

  • And it happens to be purple by default, because we already

  • searched for cats earlier, and browsers typically remember URLs you visited.

  • So that's why it's purple and not say blue, which tends to be the default.

  • But if I click on this, indeed, I get a page full of cats.

  • I can combine these ideas.

  • Let me actually go into the IDE, and instead of the word cats,

  • let me go ahead and paste the image tag.

  • So it's a little hard to see all on one line

  • here, but notice I can search for a href, close this tag.

  • And then immediately open the image tag with its same value as before.

  • And then close that.

  • And then close the anchor tag.

  • Save that, reload.

  • Now it's a little stupid grammatically.

  • Search for cat picture.

  • But notice if I hover over the cat, my cursor becomes a little pointer.

  • And indeed, if I look in Chrome's bottom left corner, I'll see that if I click,

  • it's going to lead me to a URL.

  • And indeed, if I click on the cat, anywhere on the cat,

  • now I've made a hyperlink.

  • So now the world wide web so to speak is getting more interesting.

  • It's getting pretty ugly, but at least it's getting more interesting.

  • So what are these things?

  • They're not tags, per se.

  • These are what we'll call attributes.

  • So indeed, it seems that based on these simple examples

  • alone certain tags like image can have their behavior modified

  • with these attributes.

  • And the format for those is a keyword like alt for alternative

  • equals and then quote unquote some value,

  • and source-- src-- which is by design.

  • You can't write out source S-O-U-R-C-E. You'd have to do src per

  • the documentation equals quote unquote some URL.

  • And you would only know that these things

  • exist by googling around, reading some online documentation, taking a class.

  • But thankfully, there's not terribly, terribly many of them.

  • And most every one can be looked up on demand when

  • you're curious how to do something.

  • In fact, let's take a look at a few other tags

  • some this time that I've put together in advance.

  • We have a whole bunch of online examples that you're welcome to look for online.

  • Here's one that has a whole bunch of paragraphs.

  • So in this page here, notice that I've done a couple of things.

  • Inside of my body, I have a bunch of Latin paragraphs.

  • Sort of nonsensical Latin, but I've wrapped each of them

  • in an open p tag and a closed p tag, simply because I want these

  • to be three separate blocks of text.

  • And let me go ahead into my browser now and open this file in today's directory

  • as paragraphs.html.

  • And that's it.

  • It's a little more interesting now that it fills the screen.

  • But indeed, there are distinct paragraphs.

  • There's one other tag that I proactively included here, which

  • is a little cryptic at first glance.

  • But this is a metatag that has to go in the head of the web page.

  • And here too you would know this from some online reference.

  • And it's cryptic only insofar as there's a lot of words here.

  • But the effect of this essentially is that if this same web

  • page is viewed not on my browser but on my phone, which might otherwise

  • be pretty small to look at, and I'd have to squint to see the text,

  • this tag is one technique for actually telling the web

  • page to sort of resize itself and the text for whatever the device with is.

  • So without this tag, these three paragraphs

  • you might have to squint to actually read them pretty well on an Android

  • phone or an iPhone.

  • With that tag, the font size will sort of

  • grow to take into account the fact that this is a smaller device

  • and everything should not just be squeezed in on there.

  • But otherwise, syntactically, everything else there is the same.

  • Let's look at another example.

  • If I go into headings.html, this one doesn't do all that much.

  • But it seems to demonstrate tags called H1 through H6, literally saying

  • one, two, three, four, five, six.

  • And by convention, though this differs ever so slightly by browsers,

  • H1 is big bold text.

  • H2 is not quite as big, but still bold text.

  • H3 is not quite as big.

  • H4 not quite as big.

  • Headings that you might see in a research paper

  • or in the chapters and sections or subsections of a book.

  • It's a way of adding sort of semantic headings to a web page that in our case

  • might look ultimately like this.

  • From bigger to smaller.

  • And so these might just be the section headings in some book

  • or some kind of reference like that.

  • What about lists, which are pretty common?

  • Well, if we go into list.html, it's pretty common on the web

  • or in various applications to have bulleted lists or ordered lists.

  • This is in an unordered list of bullets, foo, bar, and baz, which

  • are just silly variable names in computer science.

  • And if we want to see what this one is, if I go into list.html,

  • you'll see quite simply that we just have a little more nesting.

  • Body, UL, and LI.

  • So UL us Unordered List, LI is List Item, and foo, bar, and baz

  • are each of the three list items.

  • If I change this ever so slightly to OL, Ordered List,

  • and then go back to that web page and reload,

  • now it's an automatically numbered list.

  • So there's a lot of features you sort of get for free here,

  • not unlike a typical Word processor.

  • If we want to go really all out and see a lot of nesting,

  • you can see a table here, which might be useful

  • if you want to show a whole bunch of tabular data for research purposes

  • or maybe sports scores and data on a ESPN site or the like.

  • It's a little more involved, but if you just read it top to bottom,

  • it all becomes pretty intuitive.

  • Inside of this page's body there's an HTML table.

  • This table has a TR, Table Row.

  • And that table row has table data, table data, table data.

  • So three columns, left to right.

  • And another row with another three columns,

  • another row with another three, columns another row with another three columns.

  • And I chose these values arbitrarily just

  • to kind of markup an old school telephone keypad, because indeed,

  • if we go into this with table.html, you see this.

  • You can add borders, and we'll see ways you can actually tweak the aesthetics.

  • But it's just laying things out in a grid here,

  • like you might tabular style data.

  • But none of these have been all that pretty thus far.

  • Indeed, I'm just using the default fonts and sizes, which apparently are just

  • black text, white background, Times New Roman

  • font, and pretty small text at that.

  • The web of course these days is much prettier than this.

  • So how do you actually start to stylize things?

  • Well, as we often do, let's take a progression of ideas.

  • Let me go into version zero of this file.

  • css0.html.

  • That does something terribly simply.

  • It's more interesting than any of the pages

  • we've seen thus far, if only because we have some slightly differing

  • font sizes and some actual content, but it's still pretty simple.

  • So what am I doing?

  • This is big and bold and centered.

  • This is kind of medium and bold and centered.

  • And this is kind of small, this copyright holder there.

  • So let's solve this in one way, but then iteratively improve upon this

  • as follows.

  • Let me go into css0.html, and we'll see that I've introduced amazingly already

  • another language.

  • CSS-- Cascading Style Sheets-- is another language

  • that is almost always used in conjunction with HTML these days.

  • And whereas HTML is all about formatting-- rather,

  • all about markup and all about layouts and sort

  • of semantically tagging things in a way that makes sense,

  • CSS is used to kind of take things the last mile

  • and stylize things so that they look and appear in exactly the way

  • that you intend.

  • So this is a little messy at the moment, because I

  • seem to be co-mingling my HTML and CSS literally as follows.

  • Turns out that in HTML there's a generic tag

  • called the div for just a division of the page.

  • If you want to think of the page as having rectangular regions,

  • div would be one way of doing that.

  • Or you could use a p tag or paragraph.

  • And I can add a style attribute here that's a style font

  • size colon 36 pixels semi-colon font weight colon bold semi-colon.

  • And not all of the semi-colons, at least on the end there, are necessary.

  • But this is two CSS properties.

  • A property called font size with a value of 36 pixels,

  • and a property of font weight with a value of bold.

  • And then similarly, notice what I've done in a div of tag outside of this

  • have I wrapped it with text align center.

  • And that's a property called text align.

  • Its value is center, and it's going to center all of its children so to speak.

  • So we can use the same language from our discussion of data structures

  • and trees.

  • Meanwhile, you'll notice that my middle div is slightly smaller at 24 pixels

  • and not bold, and my last one is 12 pixels.

  • But this is a little messy now, because I've

  • co-mingled my HTML markup with my CSS.

  • It would be kind of nice if we could factor out the aesthetics,

  • put them in one central spot to make it easier to edit.

  • And so let me propose this instead.

  • I've now simplified the body of my page to just have three divs, each of which

  • has a unique ID.

  • Turns out there's an attribute in HTML called ID that

  • allows you to have a unique identifier.

  • You can use that almost any word you want,

  • though there are some restrictions on the letters you can use,

  • or where you can have numbers, and so forth.

  • But I'm just going to sort of conveniently call

  • the top div top, middle, and bottom.

  • And those are unique.

  • And now that I have the ability to identify those divs uniquely,

  • let's look at another tag up here.

  • Inside of the head of my web page now, notice I have a style tag.

  • Not a style attribute, an actual style tag.

  • And the syntax here is a little different from before,

  • but it's kind of reminiscent of C. But none of this

  • has to do with programming per se, this is just aesthetics now.

  • This syntax here says, hey, browser, apply to the body tag

  • the following CSS properties in between curly braces.

  • Text align center for the entire body.

  • Hey, browser, apply the following properties

  • to whatever HTML tag has a unique ID of top.

  • So the hashtag here means ID.

  • It's just a symbol that the world has adopted.

  • So this means whatever HTML tag has a unique ID of top,

  • apply these two properties to it.

  • Notice the semi-colon's on the end, and I've invented everything

  • to keep things nice and pretty.

  • Middle will have this property, bottom will have that property.

  • So now it's cleaner in that I've relegated to the top

  • to one central spot all of the aesthetics of my web page.

  • I've left all of the lower level markup down here.

  • So that if on a whim tomorrow I want to change

  • the font size or the color or the layout,

  • I can do that very simply without actually changing the data.

  • So the data is things like these white words here.

  • And I've got some metadata, these red tags and green attributes,

  • here, so that I can uniquely identify things in the page.

  • But the aesthetics are now fundamentally separated.

  • But it's still a little messy, because they're still in the same file.

  • So let me open a third version of this, css2.html,

  • which makes the file even smaller.

  • What do I seem to have done here?

  • So in this case, I seem to have similarly given

  • IDs to these three divs.

  • But I've introduced into the head of the page not a style tag,

  • but a link tag, confusingly named, because it's not an anchor tag,

  • it's link with an href.

  • So even more confusing.

  • But all this means is hey, browser, grab the contents of this file-- css2.css--

  • the relation to this file is that of style sheet.

  • So it's stylisation.

  • And then apply it to this web page.

  • What is in css2.css?

  • It's just those same tags as before, but in their own file.

  • So what's the purpose of this?

  • At the end of the day, the result in each of these three cases

  • is an identical web page.

  • All three of these things look exactly like this, so there are no prettier.

  • But from a design perspective underneath the hood,

  • these things are fundamentally better designed,

  • because now this CSS file in theory could be shared across multiple pages.

  • Multiple pages of mine could now have this one link tag up top,

  • so that once a browser downloads css2.css or whatever the file is,

  • it can reuse and cache the file for my entire website

  • so that as the user clicks around to my website,

  • they don't have to re download the CSS file.

  • And indeed, even if the browser tries, it

  • can get that HTTP 304 not modified message so that it doesn't waste time

  • or bandwidth redownloading the file.

  • So this also allows me to use, as we'll eventually

  • see in future problems, third party libraries.

  • It turns out that a lot of people in the world who are better than little old me

  • at design certainly have created files ending in .css that have some really

  • beautiful stylizations that you can apply to your own web pages so that you

  • don't have to worry about as much the aesthetics.

  • Bootstrap is one such tool formerly from Twitter,

  • and other such libraries exist that allow you to stylize your site just

  • by using themes or skins, so to speak, that other people have created.

  • There is one last piece of syntax here I should draw attention

  • to is this thing here.

  • So this cryptic sequence of characters is what's known as an HTML entity.

  • It turns out there are some symbols that to my knowledge

  • I can't type on my Mac's keyboard, like the copyright symbol.

  • You can maybe do it on iOS these days via special software support.

  • But this is the canonical way of putting certain special characters inside

  • of a web page that you might not be able to express or easily

  • express on your keyboard.

  • And these are standardized, too.

  • So if I actually googled HTML entities, I

  • could actually see whole charts telling me

  • that ampersand hashtag 169 semi-colon will give me the copyright symbol.

  • And just to be clear, when that's actually rendered,

  • you don't see that in the page.

  • You instead see the more familiar copyright symbol there.

  • So let's now finally try to tie some of these things together.

  • I know that Google supports search queries via GET.

  • And this is in contrast just to be clear with one other thing.

  • That is POST.

  • It would be a little worrisome if every time you

  • logged into Facebook or Google or any website,

  • or any time you bought something on Amazon or any website,

  • if your credit card and your password and all your sort

  • of semi-private information appeared in the URL

  • just like these Google search queries.

  • So it turns out that HTTP supports another verb.

  • And there's a few others, but the two we'll focus on are GET and POST.

  • And POST is inside the envelope's initial message,

  • just like my handshake to AJ, almost identically.

  • But instead of GET, it's POST.

  • What do you want to post information to and what protocol do you want to use?

  • This is an example of a snippet of how I might log into Facebook.

  • When I log in to Facebook, I don't want my friends or my siblings or my family

  • members being able to see in my browser's history or the search box

  • what my user name or really what my password is.

  • And that's exactly what HTTP GET does by design.

  • POST is just another way of submitting information to a server,

  • still using the same conventions of HTTP parameter equals some value.

  • And indeed, you can send multiple ones by separating them

  • in this case with an ampersand.

  • No relationship to the ampersand we just saw in an HTML entity.

  • But notice that this email and password are deliberately

  • below the HTTP headers.

  • So they're not in URL bar, there instead deeper

  • inside the envelope, if you will.

  • But I need to know this because when I make my own web pages,

  • this becomes relevant.

  • Let me go ahead and create a super simple web page called search.html

  • that again has the doc type declaration at the top, that then has my HTML tags,

  • my head tags, my title tags-- and I'll call this search.

  • And then over here I will have the body of the page.

  • And then I'm just going to do an H1 for CS50 search, which

  • is just a big bold heading on the page.

  • And now I'm going to have a form.

  • And I'm going to have action equals https://www.google.com/search.

  • The method I want to use is necessarily GET, not POST.

  • Though in different contexts, I might want to use POST.

  • But I'm not doing logons or something like that.

  • I'm using Google search engine.

  • So now I have the HTML form element, which we've not yet seen.

  • But it turns out there's another tag called input

  • that you can give a name to like q, that can be a type like text,

  • and it's empty.

  • And then we can have another input whose type

  • might be quote unquote submit and close that tag.

  • And then save the page.

  • If I now go back into this file and go to search.html, if I zoom in,

  • we see if you will, version one of Google, without any aesthetics.

  • And indeed, the actual version one of Google

  • wasn't all that much more complicated.

  • But if I now type in cats, submit this query, I go to actual Google,

  • typing in effectively cats, because of the URL

  • I was redirected to-- which is to say that using HTML,

  • we can reconstruct exactly what Google's been doing all this time.

  • Because if you distill the essence of Google into just a few lines of code,

  • this is it.

  • And indeed, this is essentially what Google looked like a few years ago.

  • Although, to be fair, they also had this.

  • They had another input whose type was submit,

  • and whose value even early on was I'm Feeling Lucky.

  • And if we save this, it's going to actually do anything,

  • because we need a little more logic in order to make that work.

  • But if I reload, now we get the second Google button as well.

  • And so all we've implemented for now is the front end of Google, so to speak.

  • We have completely punted to Google's back end, their own databases,

  • their own software, the actual searching of things, because that's

  • because we don't really have a language yet,

  • a way of expressing searches ourselves.

  • Indeed, we could using C and using HTML and using

  • CSS start to build our own server, and we could actually

  • write code in C that receives something like q equals cats, parse the cats,

  • like to read it, extract it from that string,

  • then figure out in our own database where can I find some cats.

  • But it's going to be incredibly, incredibly tedious to do that in C.

  • In fact, if you think back to the problems Vigenere and Caesar

  • and the like, even just manipulating strings in C is really non-trivial

  • and gets quickly tedious.

  • And so we really need a better language.

  • And that language is going to be in the coming weeks Python, which

  • is a higher level language than C. In fact, the Python interpreter

  • so to speak itself is written in C. So the world some years ago

  • used C to write support for really what many would call a better language

  • for solving problems like this.

  • And so not only can you use Python for command line applications

  • and processing and analyzing data like a data scientist might use it for.

  • We can also use Python to actually write the back end of google.com,

  • or the back end of Facebook, or the back of any web server

  • that has to read the parameters, understand them, maybe look up

  • some data or store some data in a database,

  • and respond to the user with dynamic output.

  • So all that and more in the weeks ahead.

  • [MUSIC PLAYING]

[MUSIC PLAYING]

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

B1 中級

CS50 2016 - 第6週 - HTTP (CS50 2016 - Week 6 - HTTP)

  • 20 5
    小克 に公開 2021 年 01 月 14 日
動画の中の単語