Placeholder Image

Subtitles section Play video

  • [MUSIC PLAYING]

  • DAVID MALAN: This is CS50 and this is lecture 6.

  • And you'll recall that last week we introduced web programming

  • by way of HTML and CSS, or at least the building blocks

  • because we don't actually have the ability to program yet.

  • It's just markup, HTML and CSS with stylization thereof.

  • But we introduced this metaphor last week of a protocol called TCP/IP.

  • And we related it to, of course, an envelope.

  • And on this envelope, virtually, on the front

  • was at least two pieces of information.

  • And if anyone remembers what were those two

  • pieces of information in the to field?

  • Someone else who we didn't hear from recently?

  • Yeah?

  • AUDIENCE: An IP address.

  • DAVID MALAN: Yeah.

  • An IP address, a numeric address that uniquely identifies your computer

  • and someone else's computer.

  • And one other thing, if you remember.

  • Oh, come on.

  • It was like two minutes ago.

  • OK.

  • Yeah.

  • AUDIENCE: A port number.

  • DAVID MALAN: A port number.

  • So another number, shorter number, that's just a number like 80 or 443

  • referring to HTTP or HTTPS, or other numbers,

  • like 25 for email and the like.

  • And so together these unique addresses allow you to send information

  • to not only a specific computer, but a specific service

  • running on that computer.

  • And in order to actually request information from that server,

  • there's this other protocol called HTTP, Hypertext Transfer Protocol.

  • This is what's inside of the envelope.

  • So when the server opens it up, metaphorically,

  • looks inside, this is the command that that server reads in order to decide

  • what it should actually respond with.

  • And so this request here is telling the server--

  • otherwise known as www.example.com in this particular example--

  • to send back what exactly in its own envelope to me

  • and my laptop if I were to request this?

  • AUDIENCE: A specific web page.

  • DAVID MALAN: A specific web page.

  • And someone else, which web page specifically, presumably?

  • AUDIENCE: Index.

  • DAVID MALAN: Yeah, so index.html, which we said last week

  • just tends to be the default file name on a server for a web page

  • that's just selected by default. And it doesn't have to be called this,

  • but it's a human convention.

  • And the rest of this is just a verb saying, literally, get me that file.

  • This is just telling the server what version of HTTP

  • I speak so that humans can improve it and upgrade it over time.

  • But this would tell the server to return index.html.

  • Meanwhile, we saw more sophisticated get queries

  • when we started talking about Google, and any website that

  • has not just a front end, like HTML and CSS, but also a back end.

  • And a back end is where the logic is, where the server is,

  • and the interesting work, ultimately.

  • And so this slash search indicates some kind

  • of software running on Google servers as of last week

  • that's simply responds to requests.

  • And what did question mark q equals cats do or represent in that demonstration?

  • AUDIENCE: User input.

  • DAVID MALAN: Yeah, user input.

  • So the question mark just says, that's it for the file name or the URL.

  • Here comes the user's input.

  • Q is just literally the HTTP parameter or input

  • that Larry and Sergey, founders of Google,

  • 20 years ago decided would represent the user's input, q for query.

  • Equal just means that query that the human typed in was cats.

  • But the human doesn't even have to type this in.

  • Once you understand HTTP, if you really wanted to be kind of a nerd,

  • you could go to www.google.com/search?q=cats and it

  • would induce the search for you because at the end of the day,

  • that's all the browser is doing.

  • When you have these web forms that you now have the ability to create,

  • it's just automating the process of generating these HTTP messages.

  • Now, the server hopefully responds with a message you never, ever actually see,

  • HTTP 200, which literally means OK.

  • Of course, many of us have seen numbers other than 200 appear, like what?

  • 404, which means?

  • File not found.

  • Now, why the humans decided years ago to tell

  • other humans what that numeric code is, I mean,

  • that is an uninteresting detail.

  • But the world, for whatever reason, has revealed in many web sites 404.

  • But it just means the same thing.

  • Everything is not OK.

  • A file was not found.

  • You might see something else like this.

  • We saw this with Harvard, in fact, curiously,

  • that Harvard had moved permanently.

  • Now, Harvard was responding to certain queries with HTTP 301s

  • in order to achieve what feature or effect?

  • Why?

  • Yeah.

  • AUDIENCE: Redirections.

  • DAVID MALAN: Redirections.

  • So this is kind of a low-level way of describing it.

  • But 301, even though it says moved permanently,

  • that's a more technical hint to the browser saying,

  • Harvard moved not to whatever URL you just came from,

  • but to this URL specifically.

  • And now Harvard was probably, if you recall, redirecting me from what URL?

  • If I wasn't already at that URL, where might I have been?

  • Maybe dot com, if they actually own multiple domains and were redirecting.

  • That could work.

  • What else?

  • Yeah.

  • AUDIENCE: Just HTTP.

  • DAVID MALAN: Yeah.

  • Maybe I just typed in HTTP, and Harvard, in the interest of security,

  • wants to force my browser to request this page again via HTTPS.

  • Sometimes a website might prepend the www if you haven't typed it in,

  • or you can be redirected most anywhere.

  • In fact, if you go to CS50's own website by just typing CS50.harvard.edu,

  • watch the URL.

  • You'll be redirected to a more specific page, depending on the time of year.

  • So we use these tricks, as well.

  • 404 not found might look like this, but inside deeper

  • of that metaphorical envelope is the actual contents of the web page.

  • So you get back not only these HTTP headers,

  • as they're called, in the top of the response, so to speak,

  • but you also get back HTML, yet another language we looked at,

  • this one actually a language, but not a programming language.

  • These tags tell the browser exactly what to do and to render.

  • We introduced this style tag, though.

  • What did that allow us to do that HTML alone did not?

  • Yeah.

  • Use CSS to beautify the site and just make it nicer.

  • HTML, for the most part, is about structure

  • and about tagging the contents of your web page in a way

  • that the browser finds helpful.

  • But CSS is really for the user's benefit, at the end of the day,

  • and his or her eyes, because it really lets

  • you control font size and positioning and lower-level stuff

  • that you might have started tinkering with with the most recent problem set.

  • Now, we'd proposed that you probably shouldn't just

  • start typing CSS inside of your HTML page

  • because it's just a little harder to maintain as your examples get

  • more sophisticated.

  • So you might factor it out.

  • And odds are you did this for the problem

  • set because when making a home page, if you have the same CSS

  • styles across multiple files, it would be pretty silly and inefficient to copy

  • and paste them again and again when you can factor them out like this.

  • Lastly, we looked at JavaScript, last time,

  • another programming language that's super similar

  • to see, at least at first glance.

  • But it actually gets rid of a lot of the lower level

  • headaches like pointers and memory addresses and that

  • that we've struggled with in recent weeks.

  • But most important was how we used it.

  • So you can consider a web page like this as once it's loaded by your browser

  • as just being a tree structure.

  • Thinking back a couple of weeks to our discussion of data structures

  • and each of these nodes in the tree we saw in JavaScript can be manipulated.

  • And via that very simple principle, writing

  • code that modifies this existing tree in the browser's memory,

  • means you can make much more dynamic things like Gmail and Facebook

  • and any number of websites that are constantly changing.

  • You did not do this yet for the problems set.

  • You made static web pages just by hard coding HTML and CSS.

  • But starting next week, once we have, thanks to this week, the vocabulary

  • of Python will you start to make things more dynamic

  • and then even bring back into play JavaScript,

  • bringing all of these various threads together.

  • And to include the JavaScript, recall, we used either a script tag at the top

  • or refactored it out to a file.

  • Or in some cases, it's necessary or beneficial

  • to move it down to the bottom of the file or factor it out like that,

  • but more on that down the road.