>> Alright, welcome to CS50. This is the start of week eight, as you see on the big board here. We have our own little big board, which is currently ranking those that have tackled Psets 6 already, realize that this is purely optional, it's really just meant to add a fun twist to what's otherwise an interesting assignment. And you'll notice that I was number one on this board for like the first five minutes of having put it up and then I was quickly crushed by several of the teaching fellows, most of them former students themselves and we already have an appearance of several students and over the course of the week, I'm sure, I'm sure we'll see others. Realize that right now, the lower bound, if you're a little nervous or socially awkward about having your name and you're results put up there. So right now the lowest number, perhaps intentionally infinity amount of memory and amount of CPU cycles, so there's a nice healthy lower bound already and the upper bound right now is by our own Drew Rob, who I think was the top of the big board last year as well. So, he is perhaps among those of you, more comfortable this year, the guy to beat, but again this is purely for fun. So the past many weeks, we've focused on this fairly low level language C and hopefully you've gotten a sense, for better or for worse, how you can easily manipulate a machine on down to the specific bytes in memory. Now, that's often for the worst, since you've induced plenty of seg faults by now, but finally this week do we take things to a so called higher level language. This language is called PHP and next week a little bit of java script. And these are higher level in the sense that they hide a lot of those low level details that at the one hand are empowering but the other hand are also very dangerous and very time consuming. Problem sets 6 has you implementing the fastest dictionary that you can and part of that involves implementing a hash table or a tri. These fairly intricate and very powerful data structures that thankfully you get for free in a lot of languages. That is to say in PHP if you need a hash table, you pretty much write dollar sign hash table Done, you can start using it. You don't need to reinvent that wheel yourself and this is true of many languages, Java, PHP, Pearl, Java Script and a whole bunch of others, so the point of this week and next is to now take a big step upward in terms of your familiarity with languages and problem solving so that you now have more tools to choose from. So as much as we've emphasized C in this course, it's absolutely the wrong language to use for a lot of problems. For instance, all of these little demos I've done with the twitter site, the events site and the news site absolutely should you not use C to implement those kinds of web sites because it will just take you way too long and you'll have to implement so many annoying low level details that it will one, completely take the fun out of the entire experience and that itself is valuable, to actually enjoy what you do and two, you're just going to literally be reinventing wheels that other people have packaged up nicely in newer, more modern languages. So you'll find that this week onward and after CS50, hopefully you'll have a sense now of how these machines work and how you can really, really manipulate them, especially this week with Pset 6 to your will and to maximize performance, but it's not going to be the only tool in your tool kit and among them henceforth will be PHP, java script, an actual data base and some more. So, to do this, to start writing web based programs, which frankly, really allows us to do, well let me take a step back. Well, what's the point of doing web based programs? Well almost everyone these days has a browser and the alternative would be to have someone download a doc.exe file or download one of those MACDMG files and actually install it, so writing software that real people download and use on their computers, actually is kind of annoying. There's a lot of steps involved and the worst thing is, perhaps that you have to write the program for specific operating system or even for a specific CPU. So, if you want to write a program in C that both your MAC friends can use and your Windows friends can use, you kind of have to write it twice or at least compile it twice so that it works on two very different operating systems. GCC, we've been using, uses libraries, now that it's been designed for Lenox, you can use GCC on a Windows machine, you can use it on a MAC, but you're going to get somewhat different output because of the various libraries, that differ on those operating systems. So, these days, the web is increasingly the GUI, the graphical interface of choice and Google for instance, has really capitalized on this. Most of you, especially for student groups, probably use like Google Calendar, Google Docs, Google Spreadsheets, all of these things, so Google is kind of banking on this world of Microsoft Office and these client side programs, being a thing of yesteryear and the web is now going to become one's primary user interface, all the better. Because it means you can write software that anyone can use irrespective of their MAC, their PC, their actual operating system. So, with that said, what does it take? So write web based software, so in what language are all web pages written? So this thing called HTML, now HTML looks a little cryptic at first glance, I'm on the course's home page here, I'm going to go ahead and go up to page source and you're going to see a whole bunch of stuff that probably or hopefully looks like Greek to many of you at this point. But there's clearly some patterns, there's a lot of TVs right there to render that table of contestants on the home page, but this stuff is just call HTML and as the indentation suggests and the various color coding, there is fortunately a structure. HTML stands for hyper texted markup language, it's not a programming language because you can't implement logic with it, you can just mark up information. So starting today, we'll start making some web pages using HTML and HTML essentially tells the computer how to render actual data. Here's a word FUU, how do you want to render this? I want to render this as bold, so you use various tags, things between open brackets and closed brackets to say, make this bold and then you will explicitly tell the browser stop making this bold. So, how does one go about learning this? Well, literally after my Math 20 class years ago, I had a really nice CA who was like a senior at the time, Kirkland House, and he, I asked him for some reason, how do you make web pages? And he was a really nice guy and we went down to the lab in the basement of the Science Center, literally after Section one day and he spent like forty minutes teaching me how to make web pages and that's all it took. Now the thing was a God awful mess, the first thing I made, it was hideous. I downloaded every annoying graphic that you could find on the web. Things were flashing and spinning and blinking, but it was mine and it was really cool to then email this URL out to my you know, un, un welcoming family and friends to say look at me, my presence on the web. So that's going to be you in just a few days time, I had perhaps a little too much fun or a little too much awkwardness this morning when trolling through some archives. There's this wonderful website called the way back machine, oops, we won't use that one, called the way back machine and it led me to a bunch of links that this computer program maintained by some nice volunteers, had led me to archives of old websites that I actually made. Now this actually is not the very first, unfortunately that has been lost to time but this was apparently my original home page, so apparently had a thing for my initials back then and even then. But this is one of the worst design decisions that you can ever make. Before you can view my website, tell me who you are, like you had to actually type something into this, your name please and then hit enter. Unfortunately the archiving program on the web that does this didn't know how to actually submit its name, so you get this, so unfortunately that content has been lost, but then I realized that if I fast forwarded it for a couple of years in these internet archives, I then found this. This is more embarrassing than anything, but I thought if I embrace it and say, yes this was me; you won't find it yourself by Googling and then make fun of me. So, I had this computer in my room, dorm room, called Frog Man, because I had this, this is just a confession, so Frog Man, so this was Kermit the Frog dressed as Batman. For some reason I thought that this was cool at that age, I scanned it in, I said I need a host name for my computer, which they let you choose at the time, so I called it FrogMan.student.Harvard.edu and you can actually click through here. Turns out, what did I have here? About Frog Man, I mean it's really, Frog Man was born on an unknown day in January of 1998, he's a 4846 PC running red hot Lenox, I was really kind of a geek, apparently I was a Senior at the time, what did I have? This was actually kind of embarrassing, as I told you at week zero, I ran for UC president and lost. You can see my whole campaign, oh, you can't, my campaign platform has been lost. Oh well. Just, just as well. Anyhow, I shouldn't get caught up on a tangent, but the point is, let me at least make this academically motivated, if you look at this stuff, it's the same stuff. So twelve, fifteen years ago, the overall structure of these pages, really hasn't changed. And that's the funny thing, so the web was invented kind of by accident, at least given its current popularity these days, but every web page out there boils down to structure like this. And this is a bit misleading because some of the standards have changed, so you see a lot of capitalization here and this was code I wrote fifteen years ago, but the overall basics are the same. So what we'll focus today on is making some very simple web pages, then very quickly moving to more sophisticated environment, PHP, which will allow us to generate web pages dynamically. So, let's see, even for those of you a bit familiar with this stuff, if we can't fill in a few blanks. So, when you pull a web browser and go to w w w dot CS50 dot net and hit enter, what happens? Well, your computer whether it's a MAC or PC sends out a request to a local server, called a DNS server, Domain Name System server and it says hey, what is the IP address of the website called dub dub dub dot CS50 dot net? The reason for this question is that every computer on the internet, small white lie, has a unique address called the IP, internet protocol address and this is the number of the form something dot something dot something dot something, so it's four numbers separated by periods, each one of which can be between zero and two fifty five. So, IP addresses, if you're following along quickly here, how many bits total? Little quiz. >> [inaudible] >> So it's thirty two bits because you have four numbers, x dot y dot z dot w, each is between zero and two fifty five, that means you're using a byte, 8 bits, so you've got thirty two bits. So anyhow, every computer on the internet has an IP address, so this thing called a DNS server hands back to your computer the IP address of CS50 dot net. Which is one dot two dot three dot four or something like that. Your computer then makes a request out on the internet for the computer with address one dot two dot three dot four. There's all these machines on the internet called routers or gateways, these are just fancy computers whose pretty much sole purpose in life is to take data in from one direction and then send it on its way in another direction. Maybe that data coming in from here belongs that way or maybe that way or maybe that way, so if you think of a router as being just a computer in the middle of the United States, clearly there's many different directions which data can flow and the purpose of these devices called routers is to get data from point A to point B. Typically there will be thirty or fewer hops between point A and point B. That is a max of maybe thirty routers and typically it's like ten routers between points A and point B. Okay, so you need an IP address, just like a US postal address, uniquely identifies a house or a mailbox, and IP address uniquely identifies computers and thanks to these routers, which are very intelligent, they pretty much know based on that number what direction in the country or in the world that actual machine lives. So finally this request makes it from my little laptop to CS50 dot net. There is a thing called a web server running on that computer, it then realizes, oh, this is a user, they have requested dub dub dub CS50 dot net, let me return to them the CS50's home page. Well what is it that the web server actually returns? Well, the web server returns pretty much just a text file and let me switch back over to this computer here, it returns a text file that comprises, that comprises all of these things called tags, otherwise known as html, so my MAC or my PC is in receipt of a big text file like this. Inside of this file are some pretty basic instructions, one of which down here says open bracket body and that's essentially telling the browser, hey browser here comes the body of the web page and then below that it says open bracket table, well that's telling the browser, hey browser here comes a table and based on these instructions, these elements or these tags, the browser renders the information accordingly. In fact if I scroll down a little further, let me scroll down to where we actually see some familiar names perhaps, and right here, even though we have a big old mess going on and all of this was computer generated so it's not like I or the TFs had to type this in manually. Notice that we see Drew Rob's name there at top right and Drew Rob's name is inside of a tag called, there we go again, TD, okay, so this is just a teaser. So we'll look at the specifics of this in just a moment, but my computer has just received this really big text file. So what is a browser's purpose in life after requesting a web page and getting back a big text file? It parses this file, it reads this file from top to bottom, left to right and it does precisely as this file tells it to. If it encounters certain special tags that says put in image here, put a sound here, the browser recursively requests those files as well. So, most web pages these days have graphics, we've got the logo up top, we've got the photograph at top right there, CS's logo, there's a lot of files included inside of this one web page. So what a browser does again is it recursively goes through and requests any files that are mentioned inside of this HTML page. As in a side, now that you're sort of mature enough, computer science wise, to understand, if you go to Google dot com, if you've searched for recursion and hit enter, have you ever noticed this subtle joke? [ laughter ] >> So, some geeks still [inaudible], anyhow, you're not sure why your classmates are laughing, maybe ask the person next to you, but hopefully you're okay there. Okay, so that's the story, right? So we've got this internet that gets data from Point A to B, computers like mine can send requests across this internet and say give me your home page, what comes back is just a big text file. That's called H, HTML and browser upon receipt of that, reads it top to bottom, left to right and does what the file tells it to do. Well let's see if we can't fill a file like this ourselves. So this is just a windows PC here, I'm going to go ahead and run a trivial little program called Notepad. This is all it takes to start making web pages, I'm going to change my font just to bigger so you can see what I'm typing a little more effectively, but what I'm next going to do is this. And I'm going to cut some corners and we'll clean things up in a moment, but I just want to make a web page, so I'm going to tell the browser, alright browser, here comes a web page written in a language called HTML and I'm going to preemptively close this tag, so in HTML, anytime you open a tag, you must close it. And now let me be precise. HTML is a language, most web pages are written in, it's a complete mess, it has gotten messy over time, browsers have gotten very forgiving over time. So, we'll actually use in the course a language very similar in spirit called XHTML, extensible hyper text markup language, which even though you will notice inconsistencies like this, I didn't write XHTML, but I'm about to start using XHTML, essentially XHTML is the clean version of HTML and by that I mean, when you open a tag, you must close it and we'll see some other subtleties in a moment. So, those tags hopefully will say browser, here comes a web page written in this language, the closed tag says that's it, I'm done. So up here, you can actually have one part of a web page called a head and I'm going to open that tag and close it and then the other part of a web page is called the body and I'm going to close that. So, the web pages have two parts to them, head and body, essentially the head is anything in the title bar and stuff like that, the body is ninety nine percent of the web page. So actually the stuff inside the browser window, one of the only things that we can do in the head for now is to put a title. So if I want to name my web page, Hello World, and then close title. And if I want to put something really simple in the body, I might say, literally, Hello world. Alright, I'm going to go up to file, save and I'm going to save this onto my desktop and I'm going to call this Hello dot HTML, which is the convention for most web pages. Now if I go back to my desktop, I have this file called Hello dot HTML and incur the icon that Windows has automatically assigned to it, this is actually a web page. So that is my very first web page. Kind of misnomer, because where is this file not. On the web, right? It's on my desktop, so if I kind of like an idiot, go and copy paste this URL up here and tell all my family and friends, oh, I just took CS50, learned how to make web pages, visit here. Like, they're going to get an error because they're going to click that link and they're going to try to open their own copy of Hello dot HTML in their own mail in folder, which really doesn't make sense on their local computer, so clearly, we're missing a step. We now need to move this file out onto the World Wide Web. Alright, well thankfully, we have access to web servers. In fact in the course, we have our own server called CS50 dot net, we now have this new infrastructure that we mentioned last week and we're going to use for Pset 6, which is Cloud dot CS50 dot net and just as Cloud dot CS50 dot net let's you use SSH and Compilers, it's also running software called a web server, which is a software, it doesn't necessarily refer to a physical device, which means you can go to Cloud dot CS50 dot Net with a browser and actually see its home page. Now unfortunately there's really nothing there on Cloud dot CS50 dot Net, if I go ahead and enter there I get this error because we're not using it for an actual presence, but in fact if I go to this URL, which I'll tease apart in a moment. [inaudible] CS50 Pset6 and then got to big board dot CGI, what you will actually see is that table that you're seeing on our courses home page, actually lives on the Cloud, because after all that's where you will be running your own problem sets code. So I just generated on this Cloud this file here that using some PHP tricks I then integrate into our course's website. But to take away for now is that Cloud dot CS50 dot Net is a server. So how do I actually get my content there? Well, let me go ahead and do this, I'm going to go ahead in SSH2 Cloud dot CS50 dot Net. I'm going to go ahead and double click my settings because I've prefabbed it here with putty, I'm going to log in as CS50, you would log in as yourselves and now I have this little prompt here which is identical in spirit to NICE dot FES, except now we have more control over things and if you want to start hosting a web site on a typical server, what first you would have to do is write MKDR Public HTML. The World has adopted some conventions that says all web pages for a user must live in a folder called Public HTML. Alright, so I go ahead and do that, I can now go into my Public HTML directory, now I need to actually put some content there. So actually I'm going to go ahead and do Nano and Hello dot HTML and you know what, let me go to Notepad and let me copy this, let me paste this in here. I know that's very annoying when that happens to, let me go ahead and fix this, the fancy way, there are ways to avoid that, but this will be faster. Okay, so now I have a file called Hello dot HTML that's inside of my Cloud Account, identical in spirit to you having dot C files and dot H files in your NICE accounts and now your Cloud accounts as well. So, let me see what happens if I go to now Cloud dot CS50 dot Net, so Cloud dot CS50 dot Net and then because I'm a user on the server, you have to have kind of an ugly URL, so for problem sets 7 and 8, you guys, too have kind of ugly URLs but this is the convention when you're on a shared server with hundreds or thousands of other people. I'm going to type TILDACS50 and then Enter. And what this is showing me now are the contents, not of my home directory, because that would be kind of bad if people on the whole internet now could see inside of my home directory, but you do see that this is apparently the contents of what folder? What, whose folders contents are we now seeing? And I kind of tricked you, I had a public HTML already and there was already some stuff in it. But this is my public HTML directory. So notice, this is just one of those things you've got to remember. So even though when you're on the command line using Putty using SSH, C, something like TILDACS50 actually denotes what directory? Your home directory, there's this dichotomy, once you're using a website, TILDCS50 or TILDAFUU or TILDMAELIN [assumed spelling] actually refers to MAILENS public HTML directory, so when you're using the web, the TILDA means something a little different. Alright, well that's fine, let me go ahead and click Hello dot HTML and I seem to have a problem. So, it's forbidden and this kind of defeats the whole point of the web, so what probably is the solution here? Or just intuitively even? >> [inaudible] >> So it's forbidden, you don't have permission to access this file on the server, so we need to give ourselves permission. So I'm going to go over, so this is not something that most of you have had to do for problem sets yet, but I'm going to go ahead and let me do LS-L Hello dot HTML. Anytime you do at dash L, remember that's the long listing and it gives you more information, we started to discuss this in the current problem set and even in passed ones. So now notice, I apparently have a file called Hello dot HTML, this was when it was made, 1:33 pm, it's owned by user CS50 and then there's these things over here, so these little hyphens actually are bad thing, because what those hyphens indicate are the permissions for a file for myself, the so called owner, followed by my group, which happens to be CS50, but you guys on the Cloud are a special group called students and we generally are in staff. So we have myself, which are the first three bits, three hyphens here, then there's group permissions and then there is the whole world permissions. Now the fact that mine say RW is a good thing because that means I have the ability to do what two things? Read and Write the file, that's all that means, so, apparently all I need to now do is give everyone else that ability and we'll discuss some of these conventions in problem sets 7 in PDF, but I'm going to run a command called TRUMAUD [assumed spelling] Change Mode and what I'm going to say is change the mode of this file to six four four, which we'll discuss again in problem set, but just let me do an LS-L again of this file. Notice that has had the magical effect of giving everyone else Read permissions. I don't want to give the whole world write permissions, but read permissions is good because now if I go back to my browser window here and click reload, walla, I see my very simple web page, Hello World dot HTML. Alright, so now let's start to do some things that are a little more interesting and I'm actually going to go into some prepared examples, which you have print outs of today and I'm just going to look at this version of Hello dot HTML. So at the top of this file, ignore the messiness, just because of my font wrapping, let me go ahead and delete a few of these just so it doesn't confuse. So this is an arbitrary convention. In HTML, just as you can have comments in C, you can have comments in XHTML or HTML, open bracket, exclamation point, hyphen hyphen, then you put any, most anything you want and then below that you have hyphen hyphen close bracket, so that's a comment. Now the fact that I used all the stars and the forward slash star, it was me just being anal, trying to be consistent with all of the C examples we ever did in the course. But you can put anything you want, pretty much between those comments. But the magic really starts to happen down here. So this is pretty much the same exact file as I typed on the fly using Notepad dot exe, but notice that there's a few differences here. You do have a print out for notes, these three lines here are simply necessary, when you implement a web page in this language called HTML, you unfortunately have to type this God awful sequence of characters that even I have never once remembered, I always copy and paste it from some previous code I've written. But, this formality which was agreed upon a group of volunteers, it's an organization called the W3C, it's a standards group that essentially has said, if you want to write code in this language called XHTML, your page has to start with that. Now you can have some comments and stuff, but the page has to start with that. So this too for the course, just a copy paste and now there's one other difference that you have to do, which I was lazy about a moment ago, when you write open bracket HTML, to make sure your code is valid XHTML, you also just need to copy paste this XML NS thing with the equal sign, the double quotes with the URL inside of it. So I'm going to wave my hand at the reasons behind this because they're really just a distraction, but for now just take on faith that anytime you make a webpage for the course or for HTML in general, these are kind of some stupidities that you have to get started with by copy paste or remembrance and then you're ready to go. So now we're ready to go. Here is my webpage here, I'm going to go ahead and open this version of it, it's in, this is all linked on the courses web page, so lecture source and this is Hello dot HTML, pretty much looks the same. I've got Hello World top left of the body and now notice if I scroll up to the title, notice in the title in the head of the webpage is the same thing because that's what I typed. Just a quick change here, if I really want to be sort of obnoxious, especially if this thing gets indexed in Google and I want this showing up in Google results, if I save that and then reload my webpage, now you can see that I have this effect there. So we're now literally changing the internet as we type these commands, alright, so pretty powerful stuff. So now let's do something that's a little more interesting. Now I'm just going to do some things on the fly just to convey the relative simplicity of this stuff but really just to emphasize the basic building blocks. It's not going to be fun if we start teaching you the Bold tag, the Italics tag, the Center, there's so many simple things that you can do, just a little cheat sheet to your right or left hand side is really how you learn this stuff. I mean, even I when my, Tim my Math CF sat me down and taught me this stuff, he kind of did some of the basics to help me understand that the framework and anytime that you need to learn something new, you look at somebody else's webpage on the internet or you look in a manual linked to a number of resources on the website. So let's do something simple. I have decided that besides Hello World there I want to actually, I'm just going to zoom in here so it's more readable, I'm going to go ahead and make this Hello, bold. So it turns out there is a tag for Bold, open bracket B, close bracket. And if I save my file and go back here and reload, notice that Hello has indeed become a little more bold. Alright, so that's great, kind of a useless webpage, let me go ahead and put some other stuff there, Welcome to my first website exclamation point, I hope you enjoy your stay, it's pretty much what my original webpage was. So now I'm going to go back here, I'm going to reload, not really what I intended, so what's the obvious aesthetic bug? So, I'm missing new lines, so it turns out that web pages by design can have white space but it's got completely ignored by the browser other than single spaces. If you hit the space bar once, the browser notices, hit it twice or hit the er, enter key, stops noticing. So if I reload now, still no difference. So that's because this is a markup language, if you want a line break, you must say break here, so BR is the line break instruction. If I want it there and there, I'm going to simply put it twice. And now a word on the syntax in just a moment. But let me reload and now okay. Still hideous, but at least I'm starting to make sense of the general syntax here. So why did I do this thing here? Well, it turns out there are some tags that take what are called attributes, you can take a tag and you can tweak it's behavior, by adding what's called an attribute to that tag. So let's see, what's one that I might want to do, I'd really like to start centering this text, so one approach to doing that is and there are more modern ways, but I'm going to keep it simple. I'm going to do center and just to be anal, much like we advise in C and in the code you've been writing so far, I'm going to re-indent manually, though some tools can facilitate, just to keep everything clean. So anytime I open a tag, stylistically I indent by two spaces, four spaces, just be consistent and now what I have is a webpage that is not only line by line by line, but it's also now centered. Alright, so that's good. But now this is not really explaining these slashes here and it's not really a webpage, it's kind of a dead end, right? The whole point of the hyper text markup language is to actually link to other hyper links. I've got none of that, so let's actually say a link at the bottom here. My favorite site is dub dub dub dot CS50 dot net, let's do that, reload. Okay, that's great, but now you're going to get users, you know still a dead end. So unlike a lot of popular websites, FML and the like included in Facebook, when you post a link normally they, these days they automatically get hyper linked, well that's because someone at Facebook wrote a few lines of code that examines anything you type into their website and it realizes, oh, this starts with dub dub dub, this ends with a dot com or a dot net, I'm going to assume with high probability that this is a URL, let me make it clickable. How do you make something clickable, well you have to actually use one of these tags, so I'm going to say open bracket A for anchor, where do I want this link to lead, well the attribute is called hyper ref or Href. So I'm going to do quote unquote and now I'm going to type the actual URL that I want the user to go to, close quote, close angle bracket and now at the side here, VIM [assumed spelling], the editor that I'm using, let me actually move this onto a new line for space, it's already highlighting it. It doesn't mean that I can click it here, it's just an aesthetic thing, so let me go ahead and say, stop treating my text as a hyper link, what's the command for that? >> [inaudible] >> Yeah, so backlash A and now period. And actually and I can keep saying more stuff to emphasize that this link is inline. I have a whole bunch of text but the part that's underlined is the thing that is between the anchor tag and the close anchor tag. Popular mistake and you may have seen it in websites like this, though not that common in corporate websites do something stupid like oops, close B, which is kind of nonsensical, now weird things happened. Now this is where browsers have gone quote, unquote forgiving over the years. You know ten, fifteen years ago when this stuff was starting to catch on, there really weren't people saying let's adhere to these standards, the thing grew up fairly organically and browsers started competing amongst themselves for various features. So you will find over the next several weeks that sometimes your website looks different in IE versus Firefox versus Chrome versus Safari and frankly it's just a big old headache and it's largely because companies have never once agreed properly on certain interpretations for instance and in this case here. What is the right approach if you have an open A tag but a closed B tag, should I just assume it was a mistake and stop hyper linking it or should I, and this is why when you get ambiguity, it's unclear what the browser should, so some browsers do different things. But we're going to fix and I'm going to realize that if I now click this link, I in fact get whisked away to CS50's home page. Alright, laughed again, alright, so, what do we have that's interesting here? We have tags, open and closed, we have attributes like this. This is an attribute that modifies the behavior of the tag, so it turns out that the tags, aka elements, can have zero or more attributes. I say zero or more because this guy doesn't have an attribute, this guy doesn't have an attribute, this guy doesn't have an attribute, but this one does because not only are we telling the browser, here is an anchor, here is a clickable link, you have to tell that tag where it goes and so the general structure for all of these tags is generally this format. Open bracket, tag name, then zero or more of the following attribute equals quote, unquote value. Attribute equals quote, unquote value and so forth. And now we can use this same idea and actually use some attributes. It turns out and I know this because I read the manual or I went to class but there is a BG color attribute for body, so I can actually say that I want my webpage to be, say, red. And let's actually go back to this page here, whoops, let's go back here to Hello dot HTML, okay, so now it's actually starting to look less like my original home page. So, what else can I now do? Well, this is already getting sufficiently hideous, is there anything else that you would like to see how we do before we forge ahead with less ugly things. What's something you often see in a webpage? >> [inaudible] >> Flatching, okay, there is a tag from yester year called Blink which was actually deprecated forcibly by several companies because they hated web pages that would blink text like this, but we kind of mimic this, alright, we'll show one thing which is actually useful. Let me go ahead and search for something called animated jif, so a jif is a graphical format, you guys played with BMPs this week and the jpegs, you've probably seen jifs, unfortunately the world has spent a lot of time making really ugly things that blink and spin and dance, one of them, we have apparently five thousand here. Let's see if we can find something. How about computers. This is just some random website from Google, site is for sale if you're interested, okay, so like this is the web as I knew it in like 1995, like this, I mean this is what it looked like. Little graphics like this, little disks popping out of toasters, I mean this was the internet. So, I forgot it was, whoa okay, those are popups which have largely been done away with, too. Let's pick something here. Alright, let's pick this guy. So, I'm going to click this graphic and just to demonstrate a common work flow, especially for final projects and for the next couple of problem sets, I want this guy in my webpage. So one way I can do this, is I can copy the URL here, I can go back to my little file. I'm going to put a line break because I'm going to put this little graphic at the bottom and I'm going to use the image tag, succinctly just like C, it's not image, it's IMG. I need to tell the browser the source of this image, so I'm going to go ahead and give it that URL and then because there's no need to close a tag like image, alright the image is either there or it's not, we don't start putting an image through some stuff then stop putting an image just like a line break is similarly this atomic idea, either do it or don't do it. You can't start and finish a line break, that's why here to, I put this angled bracket in here. So, to be clear, this would be correct code, but it just looks stupid. Like open tag, close tag, it's all kind of wasteful in terms of bytes, so the world has this convention where you actually can put the slash inside of the tag, especially during generally after a space like that and that just says start and stop immediately because there's nothing going to go inside of this anyway. So now let me save this, let me go back to the browser, I'm going to go to my webpage, now backup guys, reload and voila, my webpage is really getting fancy. Now, there's an interesting aside, this is generally frowned upon, linking to someone else's content, now even though this image is only like four kilobytes, I'm right now hitting reload a lot, every time I reload my webpage, my browser is hitting not only the Cloud but also what? That guys web server, so this generally is a bad thing if you link to someone else's server, because it means visitors come to your page and he or she pays the bill for all of the bandwidth, for all of the graphics and content that have been coming into the webpage and sometimes content like that will be blocked. So let's do one final step so that you know how to do it, let me go back to this image, let me actually save it, I'm going to save it to my desktop here, we're going to call this computer dot jif, don't change the file extension, just the name. Now I have it on my desktop, what's the solution or the, oh I have one new spam message, one direct buy, you know we're lucky, this could have been a lot worse, these popups. Alright, so, so what's the solution for getting this image into my own account? You used this probably for Pset 5. Yeah, so SFDP, even for SFDP, you were generally downloading files from the server to your own computer. The program works in the same way in the other direction, so I'm going to use SecureFX, you can use Cyber Duck or whatever on your own computer. I'm going to very quickly just configure a new session, if you've never done this before we'll walk you through it in section or post something online, but I'm going to go ahead and hit enter, after typing Cloud I'm going to be prompted for my user name CS50, I'm going to type my password, now notice I've got some other directories because I use this kind of for other things, so I'm going to go into my Public HTML directory. There's my Hello dot HTML, so I'm just going to move this window to the side and I'm going to click computer dot jif, drag it over here, voila, that's all it took to copy the file to my own account. Now we're going to pay the bill for the bandwidth, but so be it. So now I'm going to go back here, I'm going to make the page look the same but reference of file on my local account, I'm just going to delete, delete, delete, delete, delete, delete, type computer dot jif, save it and go here and reload. Damn, what went wrong? What's that? Actually I asked that, really you shouldn't have detected that, I put it in the wrong place, so that's the academic lesson. I put it in my Public HTML directory, but you will not often have this problem, but I am actually only in my lecture source directory. So, now let's fix, now let's reload. Okay and voila, now notice one thing, fortunately SecureFX was smart enough to upload this with world readable permissions because of the way I configured it. If I do an LS dash L for computer dot jif, notice it is in fact read and read for everyone which is good. If it were the opposite, just in case you ever see this, which I'll simulate now, if it looks like that and now I go back to my webpage and reload, what will I likely see? Some kind of error or just bad stuff happen, it doesn't actually render and that's because of a permissions problem there, alright. So we have not made anything pretty there, but at least we've talked about open tags and closed tags and attributes and over all markup. Any questions just yet? Any questions? Alright, so while this is not the type of URL that one would advertise, let's actually make this a little more real, so that especially after you exit this course, you don't feel like anything you ever do on the internet has to be tied to some Harvard dot edu server or some CS50 dot net server. Well, yes we own the domain name CS50 dot Net because we as a course paid like nine ninety five, a couple of years ago to actually buy this domain name from a registrar. So there's this whole infrastructure on the internet of commerce and there are these entities called registrars that you go to a website like Go Daddy dot com, silly name but they are among the biggest so called registrars. You hand them some money or you hand them a credit card and then you can buy a domain name from them, if it's in fact available. What does this work flow actually look like? Well, if I go to and I'll switch us over here. Let's go to Go Daddy dot com, but there are dozens of other such registrars you can typically fill out a little search box like the one here and you can whoops, search for, for instance, let's do Harvard dot com and see if that's still available, because I'd love to scoop that up for nine ninety five, so click go. Presumably it's not actually owned and in fact they'll often recommend a whole bunch of domain names that you really don't want. Because who, New Harvard For You dot com, so kind of silly, this, this just means that it has been taken, so one of the hardest parts frankly on this side is to get a domain name, is finding one that's actually available. Come final projects, one of the options that you guys will have is not just to post your final projects on our own servers, because if you're implementing a project that you actually think will be useful to friends and to family, people even outside of Harvard, odds are you want to advertise something like My Good Domain name dot com and not something like Cloud CS50 dot net, so among the things that you will be able to do in a few weeks time if you do go to a site like this, buy yourself a domain name, you just have to tell that registrar, where in the internet you're server lives. So we for instance, have told Go Daddy a couple of years ago what the name, what the addresses are of those things called DNS servers. We typed them into Go Daddy's website, we have our own servers now in actual [inaudible] so we just told Go Daddy, this domain name lives at this particular IP address. So come final projects, you guys too, if you decide, purely optional to do a web based project and one that you wanted a vanity domain, you know your own domain name, you're simply going to have to find someplace to put it and tell Go Daddy where it is. Now so that you're work actually out lives this course's semester, we'll actually put you in touch with those folks called HCS, the Harvard Computer Society and they will actually provide you with an account on Harvard's Campus, but that will create the illusion that your domain name dot com is out there on the internet, even though it lives on their server. So just a little teaser so that you realize that your final projects and beyond, you can actually do this stuff yourself without the crutch of a course's own infrastructure. So, this is what we did to recap. HTML, this is the simplest, valid webpage that you can make in this language called XHTML. It's completely underwhelming just as Hello World, but it captures the basic spirit. Now fortunately in this world of XHTML, there are tools out there that can help you find mistakes in your code and one of the things that Pset 7 and 8 will expect is that your code be valid. What this means is that when you type open bracket something close bracket, you're not making stuff up as you go. You're actually using standard syntax that has been approved and actually exists in a language and this is simply offered now as a way of helping you debug your own code. But there's also this other feature, which we'll give just a teaser of here which is called CSS and the web has actually changed quite a bit from when I made those silly little pages with Frog Man and my all capital letters and all of my tags versus today. So very popular today is this supplementary language called CSS. So you have HTML or XHTML which is all about markup showing, teaching someone, telling the browser how to layout the webpage and then there's this complimentary language now called CSS, cascading style sheets, which much more like a word processor allows you to fine tune the aesthetics. If you want your font to be eighteen point, you can use CSS for that. If you want a very specific color, a very specific placement of some element on the page, you can use some CSS. And CSS is not a language we'll spend much time at all on in the course because frankly from the course's perspective we will be so thrilled if you produce even the most hideous of projects, if they are perfectly functional and actually well designed. We will not expect works of art, because frankly without the help of folks like Yuki and others, this is what CS50 dot Net would look like if I were in charge. So, we don't think this is now becoming a course about aesthetic design, it's only about functional design. So this clip here reveals one thing more that you can put inside of that head element. Those open tag for head and close tag. So besides the title, which I still have laid out here, you can put a style tag. And a style tag allows you to really control the more fine grain, fine grain control the aesthetics of a webpage. Well let me demonstrate, let me go over to let's say Hello dot HTML and let me go ahead to the top of the file and I'm going to indent and say style type equals text slash CSS, oops thank you. So I'm going to put this at the head, all of I've done is this, that's before, that's after I started typing style. Now I'm going to close it preemptively and things like this are just going to be conventions. There are some older browsers or some mobile browsers on phones that aren't very smart when it comes to tags. They don't understand, so you often see these sort of hacks or work around's that have evolved over the years, so for instance, this one here essentially tells the browser, here comes a style sheet, here comes some stuff in CSS. But, in case this confuses you or if you don't understand it, think of this as a comment. So again, these are just kind of work arounds, not terribly elegant, but this is what the [inaudible] has developed. But now, inside of this, I can go ahead and put some CSS. So, CSS will let you control things in essentially, three ways. You can define, in this language called CSS, some properties for actual elements. An element is that same thing as a tag, except that an element comprises essentially the open tag and the closed tag, but it's the tag is just the top thing or the bottom thing, open tag, closed tag, start tag, end tag, similar jargon. So this allows me to control the appearance of a tag or an element. The thing below it, with the hash mark, means I can control the behavior of a specific tag that has what's called an ID attribute. But don't worry so much about that now. And then also, we can define what are called classes. So this is just mean to introduce it so that you've seen it. These are aesthetics that you can ultimately worry very little about, or at least when you start reading up on this for P Set 7 and its PDF, you'll understand. Let me go ahead and do the following. Let me go ahead and say that everything in the body of this document, so I'm going to say the name of the element, body, thank you. Let me say the name of the element, name is body. Let me go ahead and say, let's make this font size 96 point. All right, so this isn't something I could express as easily in the body of the webpage so let me go ahead here, and reload. Wow. Ok. So it's getting even worse. All right, then at some point, well, let's see. What else can we do? What about the color? Lets really make it hideous. So what about yellow? [ Laughter ] Yeah. [ Laughter ] So, and realize too, I'm using some words and you can't write things like fusia or fairly random specific colors. But you can use your hexadecimal code. So if I actually wanted invisible text, a sort of secret webpage, what if I do this? Feels kind of fancy, right? Oh! Come to my webpage and how do you know what I've told you? Well you can just click and drag and see the message, right? [ Laughter ] So, that's how you can control the body. Let me do one other thing, and again, this is a hideous train wreck of a site so far. But that's not so much the point. It's just to look at some of these fundamentals. Let me go ahead and define a class called copyright. All right, so dot and then a t word like copyright and for copyright, I don't want this crazy 96 point Font, I want the font size to be smaller. I just want it to be 12 point. So now, CSS is cascading in the sense that things you define above can be overridden by things below. So what does that mean here? Well, let's actually put a copyright here. So copyright CS50 at the bottom. If I save that as is and reload, actually, we got to fix this red text here. Let's change the text back to oh, let's try blue this time. All right. Blue, even worse. Scroll down, there's my huge copyright. So I'd really like to shrink just that so let me go ahead and encapsulate copyright in what's called a span. This just says span the following line. So span and then what class do I want to assign to this line of code? Well, what did I call it. Yeah, just copyright, all lowercase, close bracket. Now I put my content, my actual data, which is copyright CS50 then I close span over here. And to be clear, even though in your open tags, you do specify attributes, you do not specify them again in the close tag. You just close the original word. Now let me go ahead and reload and uh-huh, now I have indeed, overridden the default font size and controlled it a little more specifically. And using the ID attribute, you can target very specific elements as well. So this is actually, all it sort of takes to start making webpage's. Pretty hideous webpage's at that. Let's go ahead and take a five minute break and then start making Google. All right, we are back. So, notice that there, ok, did it again, damn it, take three. All right, notice that there are a whole bunch of office hours, not only on Thursday nights and Friday afternoons, but also Monday, Tuesday, Wednesday and even on Sundays, so do, especially if you're finding that you would like a little more one on one attention or assistance with the problem set and the crazy Thursday nights really aren't conducive to thinking it through and understanding things at your pace, do take advantage of the blue when the red boxes, that are much earlier in the week, including tonight. So just a reminder on that. All right, so now there's this thing called Google. All right, it's pretty popular, works pretty well. But it uses, strikingly, a very simple interface and some very basic user interface mechanisms, right? And actually, these [inaudible] mechanisms are what compose most every website out there that takes user input. You have these things called forms. You have text fields like this one. You have buttons. You have drop down menus. You've got little radio buttons and check boxes. But that's actually about it. To implement forms on the web, you just need a few of these tools. So here's just a quick laundry list, and this is pretty extensive, of how you can actually take input from users. We focused thus far on providing output, aesthetic output, but you have these things called text fields. If I zoom in on this, this thing up here will allow me, open bracket input, name email, type equals text. This will tell the browser, put a textbox here, that the user can type stuff into, call that textbox email. If you, instead, want a bigger text area, where you would actually write a long response or multiple sentences or paragraphs, you have things called text areas. If you want a password, where when the user types, it becomes little circles or bullets and not actually clear text, well, you just say type equals password for that third one. If you want checkboxes, you say type equals checkbox. If you want radio buttons, the little circular things, you say type equals radio. And then finally, if you want one of those dropdown menus for long lists, you call it a select and then you give it a name and then you have one or more options beneath. So these are the basic building blocks of every website out there and it's amazing, frankly, that there exists so many permutations of these very simple elements on every website you use there today. This is kind of it, right? We've spent, you know, half an hour, an hour, talking about the structure of a webpage and where these files live and what it takes to get files from servers to browsers. But at the end of the day, now that you have this, or now that we'll start to use this, you have the ability to actually start making interactive, user software. In CS50's library, we get INT and get STRING, how do you get INT's and STRINGS from users, whala, with this basic commands for getting form elements. And it turns out, that on the web, because everything you get from users is typed at a keyboard, which essentially is text, you don't even have to worry as much about floating points and strings verses int's because it all comes into you, the server, as actual text. So let's see if we can't reimplement, as fast as we can, Google. So, here is Google. Every web browser that you probably use has a feature, even if you've not used this feature, called view source. So in Firefox, it happens to be under the view menu, under page source. And as I did a little bit ago, this just shows you the contents of this webpage. Now very often, will these contents look like a complete mess. In fact, Google's is particularly messy and particularly compressed. Even though I can scroll to the right, notice they did not waste time being all anal and pretty by indenting their code and hitting enter a whole lot. And that's because, when you get a billion hits per day, and you hit the enter key once and add one additional backslash end to your file, that's a billion more bytes that you have to let your users download over the course of the day. Hit enter twice, that's two billion bytes. So, you know, one Google employee who hits the enter key, can cost Google gigabytes of data just by having white space that we have so heavily preached in this class. Now this does not mean that if you go work for Google, you start to write code that looks like this. So they actually wrote it, odds are, in a very human friendly way, but they ran a little tool that removed all superfluous white space that transformed all of their variable names to just x and y and z. These are things called compressors and even I do this for the course's website and even other tools for a couple of reasons. One, you can save bytes and the fewer bytes you have to send to the user, the faster it goes. That might not matter so much when you're on Harvard's campus, but if you're using iPhones or Blackberries or cell phones these days, you know, 3G is kind of a joke. It's not all that fast. So the more bytes you send to a phone for a webpage, the longer it's going to take for the user to see it. So just optimizing these kinds of details are very important. Unfortunately, it makes this a little hard for us to see how this webpage works. But there is a familiar element. If I zoom in, what does Google, indeed, have that we had too? Open brackets, html, right? So it seems like we know how to implement Google. So, they have this, they have a head, there are some other meta tags, and there's definitely some details that we're not going to cover today or maybe ever in the course, because they are just not that interesting and not necessary. Some of them, like this meta tag, but oh, there's the title. So this is, right, this little piece of text is what gave Google its brand name, right, open bracket title, close bracket Google, close tag there. So let's actually tease apart some of the interesting stuff. Let me use control F and search for body, ok. So the real contents of the webpage don't start till down here so let me avoid some distractions. Let me just go ahead, oops, let me go ahead and put this into let's say, notepad. All right, so it's even messier here. So let me go ahead and do a control F for body, there's body. Now I'm going to move my cursor over here and I'm just going to delete all this stuff because clearly, it's not necessary for the body of webpage, it doesn't start till here. Ok, so this is why Google's homepage is white. This is why text on Google's page is black. Zero zero is all black. This is why links on Google's pages are kind of what color? Blue, so right, the fact that Google's homepage looks like this with blue links is because the links are 0000CC, so that's red, green, blue. So it's not FF, which is a lot, its CC, which is a good amount of blue, that's why the links are blue. Now realize, Google, largely for compatibility reasons and for financial cost reasons, did not waste time with things like this, though that is expected for the course and just for the matter of good practice. Google is, well, if your website gets billions of hits per day, you too can start leaving off your quotes. All right, so, we've got a body, but then, I'm already getting a little distracted here. Let's see, it turns out, let me look for the thing that I know implements the magic. Open bracket form, any form on a webpage, text fields, select menus and all of this, starts with open bracket form. So this too, is kind of a distraction. So let me get rid of everything before that, because really, I want to get to the guts of this webpage, which is the form. All right, so it turns out that in an html, in a webpage's form, there's a few attributes we care about, one is called action and one is maybe called name. Then there's this table here, but again, I'm getting a little overwhelmed, so let me search for the things that we promised a moment ago, are what make all this possible. So, just a recap, this is what the various input mechanisms look like, open bracket input, so that's all I'm going to search for. I'm going to whittle Google down to its base building blocks. So open bracket input, there's an input, oops. Lost it already. Open bracket input, so I really don't care about this to the left. And it turns out, Google is actually is laying its page out using an element called what? Apparently, so they're using a table. So behind Google.com, this webpage, the fact that some of this is centered and things are kind of in this invisible grid, is because Google is using an invisible table that we'll actually use too because it's very simple, even though some people frown upon it these days. But that's why there's this markup. Everything's being laid out in tabular form, but that's fine. Let's just get rid of that. Here's an input, I care about that. Here's another input, I care about that. Here's a span, I don't care about that, span, span, span, I don't really care about that. Let me search for the next input, just to finish whittling this down. No more inputs there, because this one is, yep, over here. So let me close the search for, uh, open bracket, open bracket, there it is. So there's my DR, and here is my Google search, oh, we're almost done. We almost have Google as an essence and here's another input and now we're all the way at the other end here. Let's do this, search for this, this, ok. There it is. Ok, so we have now whittled Google down to its most basic elements. Let me go ahead and shrink the fonts so we can actually see that had you thought of this first, it'd be your website and not Google's. That's really all it took to implement the front end, at least, to Google's website. Now, there's still some distractions here, so let's only focus on the ones that really matter. But here is open bracket form, here's open bracket input, and with these six or so elements, can we implement our own version of Google. Let me go over here, I'm going to go ahead and copy, hello.html, and I'm going to call it fake Google.html. I'm going to now open fake Google, fakegoogle.html, I'm going to rename it here to be proper, fakegoogle.html. reimplement Google. All right, so here's my basic webpage. I'm going to get rid of the hideous mess that this thing was so we're only going to do the important building blocks. So, delete, delete, delete, delete, delete, delete, delete, delete, no more red, ok. So now I have a very simple page. I'm going to call it fakegoogle, [inaudible] get rid of my trailing white space, save those bytes. So now I'm going to go back over to my browser here. I'm going to reload fakegoogle, oops, what did I forget to do? So there's this [inaudible] command, which will explain in more detail on Wednesday. But fakegoogle, I'm going to [inaudible] then I'm going to go ahead and reload my web browser, ok. There we go. Now it's time to implement Google. So, I need to do something here. Lets center it first, close center, all right, now I need something in the middle. So, it turns out there's this heading tag called H1, which means make this big and bold. So let's go ahead and call this fakegoogle H1 and now I need a form below it. So let's do open bracket form, I don't really know yet what comes next. But I know what comes at the very end. So form, so forms have to be submitted somewhere, when you click submit, where does the request go to, to what URL? Well, apparently, it goes to what? Search, so let's see, let's just copy what Google did. So forward slash search, and then that's enough. We're going to skip this name. So now what do I need? I need an input type, what type of input do I want first? A little sanity check. All right, just think, I want to implement Google. What do I need first? Text, right, I just need this big textbox. That's all and then two buttons and then we're done. So input type equals text. I need to give this thing a name so that Google knows what to expect. What was the name given to Google's versions of this? Do we see it here? It's in this line here. What is Google's called? Actually, lets actually take a step back. And let us search for CS50. So I'm going to go ahead and hit Google search and now notice what happens in the URL up top. Enter, notice there's a whole bunch of stuff that's gone on up here. But if we really whittle it down, where is the interesting dynamic part? It's just that, so apparently the mere passing of q equals something into the URL Google, is enough to teach Google to actually search for that phrase. A little aside, I have never once understood why this hit here, CS50, is the laws of word and that leads to our webpage. So extra credit if any of you can figure out who that guy is and why he has a video on your webpage because it's been there for two years. [ Laughter ] All right, so back to the page. So name equals q, that's going to be the input. So forms work as follows. You define the elements, like whether it's a menu or a text field, you give it a name because then when you enter, those same names end up in the URLs, just as we saw with my browsers a moment ago. So let's go ahead and do this. We've got input type equals q, now let me do input, turns out, there's another type, equals submit. And what does Google's button look like? Let's see, this Google's button says what on it? Google search, all right, so let's call this fakegooglsearch. Close quotes, all right. And then, all right, fine, we'll do the, I'm feeling lucky, I'm feeling lucky. All right, and now let's go back to my version of this and reload. Ok, almost there. What do I need to fix first, aesthetically? So I need a line break right. So I put this line break here with the BR instruction, now reload, ok. So now we can quibble about other things. It turns out, there are other things like size I can say size is 96 so we can really allow long search strings. That makes it bigger. You know, we can play all day long with these aesthetics. But now, let's at least see if the basic building blocks work. So now let me go ahead and type in CS50. And click fakegooglsearch, and unfortunately, bad stuff happened because where did I go? What URL? So I did go to search, slash search is the root of the current server's hard drive, so to speak, slash search. And then notice what happened. So the web form is smart enough to submit to the right action. I told it go to slash search. Unfortunately, I never implemented slash search on the server, but notice the more interesting part, question mark, something equals something. This is the means by which elements are encoded in URL's when you submit a form. You, the browser automatically puts a question mark after the URL and it does attribute equals value, ampersand [sp?], attribute equals value, ampersand. We only have one attribute here because I only gave one element a name, q, but so far so good. Question mark, attribute equals value. Well, let's not actually send our users to ourselves because we'd never actually implement in Google. Why don't we, instead, send them to da, da, da, dot Google.com. all right, so, I'm kind of punting on some of the implementation details but, lets reload and lets search for fakegoogle, whala, I have reimplemented Google. [ Laughter ] And it works, right? There is that guy again. So what are the basic building blocks here? Well, let's actually do this. Let me just go to the tools menu and even though we rarely preach certain software in this course, let me strongly urge you, especially if you have no opinions out the gate, use Firefox as your browser for problem sets 7 and 8 in your final project if you do a web based one, because it comes with so many free tools for debugging. One of them is this thing. I installed it from the course's website, this thing called Live HTTP Headers. And when a web browser contacts a web server, which actually going across the wire is a whole bunch of stuff you the human, never actually see, but let's just see what's going across the wire. Let me move this window aside. And now this is just an empty window right now. Let me go ahead and click fakegooglesearch. Enter, so a whole bunch of stuff just went across the wire. Well, when you type in HTTP colon slash, slash, what is that? So HTTP is a protocol, it's a language on its own, that is a language spoken by web servers and web browsers. How do you get data from point a to point b? you speak this language called HTTP. Now earlier today, I kind of dumbed things down and I said well, the browser asks for CS50.net's homepage. Well, what does that really mean? It's not going to write it in an English sentence, give me your homepage. But rather, it's going to encode it with this query. If you've ever heard of a get, and its fine if you haven't, it pretty much says what it does, that one blue, bold line there is all it takes for a browser to make a specific request of the server. In this case, what has my browser, upon hitting the submit button, asked Google.com, the server in question, to give it. Give it the result of asking for slash search question mark q equals CS50. And then there's all this other stuff. So there's a lot of meta data. For instance, this line here reminds the server what URL is requested. Here's some information on what browser I'm using, fairly cryptically. There's a bunch of other stuff and then finally, down here, we get a response from the server. The server tells us hey, here's a cookie, which we'll discuss on Wednesday. Hey, here is a caching information for performance reasons. So in short, there's a lot of stuff that's going on behind the scenes. But at the end of the day, my whole request boils down to this simple query here. Well, this is only so interesting when I've implemented just the front end. Well, back in the day, before php actually existed, I think that's an accurate statement, the freshman intramural sports program had, as I may have said in the past, a really fancy system for registering for sports. You would fill out a piece of paper, you would walk over to Wigglesworth C or D, you would knock on the door and get let in. And then you would find the proctor who lived there who ran the freshman intramural sports program. You would then submit your form through the mail slot in that person's door and then whalaa, you were registered for [inaudible] unless the paper got lost and stuff like that. Right, this was in 1996, a really interesting, a really obvious opportunity for automation. And at the time, actually, literally, I had just taken CS50 and then CS51. There was no web programming in the course then. I had no clue how to do this. But it was an excuse at the time to teach myself Pearl, which was a language very much in vogue at the time and still kind of is. But I used it and taught myself to make webpage's. And actually, the first one kind of looked like this because what does it mean to register for freshman intramural sports? Well, the proctor needed to know their name, their gender, whether or not they wanted to be a captain, perhaps, and then also their dorm. So even this interface, way back then, boiled down to some very basic constructs. Thankfully, PHP makes this stuff much more interesting, but clearly, when I click this submit button, I can't submit it to Google because that's completely useless. I'm going to have to submit it to a file on my own server. So what we haven't yet seen is the ability to actually implement logic ourselves. We implemented some HTML and some CSS for some ugly aesthetics, but then we completely punted on the logical design of Google by outsourcing that part to Google. So what we'll do on Wednesday, is actually implement the back end of this and the motivation here, to be clear, is that when you exit this course, you won't know just C and you'll be struck, I think, over the next couple of weeks, even if some of this moves quickly, and you feel like wow. We're really not learning PHP as much as we did C, that's the whole point because you're not going to have a course to teach you the next 20 years worth of languages. The point of the next several weeks are to help you realize how you can teach yourself new languages because there will be many over the course of your lifetime. So with that, PHP, on Wednesday. [ background noises ] ==== Transcribed by Automatic Sync Technologies ====