[ Silence ] >> Welcome back. This is CS50 and the start of week 8. So this animation is all moment ago is actually not a movie. It's not actually a webpage. And this webpage is implemented entirely in a language called JavaScript and that language called JavaScript supports now, where increasingly technology called WebGL or Graphics Library with which you can actually implement fancy things like this just to either in Ts or scare. We actually look at the source code for the page that you just saw playing some music and sound. This is an example of a language called JavaScrip that we dive into next week. So technically it's actually quite similar to see but you'll see that this person put a good deal of work into this particular animation. So it did take some degree of effort. Anyhow, today is ultimately about pulling back the layers of the internet in the web and transitioning us from C much to your pleasure perhaps and transitioning us to PHP, and HTML, CSS, JavaScript, and SQL ingredients with which we will dive into the web programming portion of the course and a lot of the more familiar technologies that we take perhaps on a daily basis for granted. So no, that in just a week or two's time you will be able to put together yourself websites like this which I found in the internet archives way back machine this morning. If you go back 10 or so years, I lost quite miserably. But I thought I would take a screen shot of this 'cause this is also a wonderful example of how not to make a website besides--it's clear what the website was for perhaps but the silly little icons where I thought it would be cool to have this guy in a hood saying "Come in enter," "Click to Enter." "Click to Enter" is not a cool feature of a website. Or you probably seen this on many websites particularly those implemented fairly and immediately with a technology called flash and, well, this was me learning how to program in--for the web way back then and didn't get much better. Then fast forward to senior year and this is apparently what my website look like 'cause I had a Muppets calendar and I apparently thought it was cool at the time. So I scan this end and then had my own server running an operating system called Linux although an older version than what we're using today and then I put my professional portfolio of web work and such up here on this website. So I think that's the worst of it. Though I'm thinking, I actually have all the campaign materials including the posters and the platform so I'm thinking of running again this year if that is allowed so we shall see. So the internet is something we certainly take for granted. I thought we take a quick look though with a teaser. It's about 50 or so seconds long as to how the internet works and then we'll start as promise to peel back these layers today and moving forward this week. I give you warriors of the net. [ Video Clip ] [ Music ] [ Background Music ] >> He came with a message. With a protocol all his own. [ Music ] [ Background Music ] >> He came to a world of cruel firewalls, uncaring routers, and danger is far worse than death. He's fast, he's strong, he's TCP/IP and he's got your address. Warriors of the Net. >> So that is how the internet works and [laughter] we will dive in to more details over the course of today and this week. So a couple of quick announcement. So one, you probably found this and 36 other photos and now it's time to actually find this up on campus and photograph, yourself or someone with your--from your section with them. The deadline for the scavenger hunt to get out as many photographs of you and they--you and them is Monday at noon just before next week's lecture. So feel free to partake. And the winning section will get some fabulous price, the big award. So this is the [inaudible] that's historically been associated with problem set 6. Relates first, this is completely optional. It's for those who actually want to participate in a competition of source with your code fairly publically. So if you go to the course's homepage as of today you will see that a top of the list or frankly whole bunch of stuff who took the course last year. This is not to say that most of you are behind now but rather this is mostly stuff, those some of your own classmate who have challenged this so-called big board. So problem set 6 recall involves implementing the fastest spell-checker possible and you need to deploy tools like hash tables or tries or link list. There're some other fancy data structures. And once you get your code working you can ran a command called "check 50" inside the appliance which will upload your codes to one of our servers. It will run in the benchmark. The benchmark is something means to analyze it in terms of its memory use and its CPU time. And so which you have here are the top 20 people who since about 4 a.m. last night have challenge the big board. I think, my apologize. Nathan is about to get disqualified because the staff and I are all quite suspicious that this is not in fact a legitimate entry 0.150 seconds is order of magnitude faster than the next most--the rapid one, Neil. So either Nathaniel is about to be promoted to staff or we're going to delete his entry there. So there are ways to see at this competition but we will--we are good at detecting such. So what are you seeing here on the left-hand column you see how much RAM each of these folks' programs used. In my defense I was actually number one last night around 4 a.m. but I have slept since then using 38 megabytes of RAM and then if you scroll to the right you'll see in each column how many seconds where spent in the load function, the check function size on load and so forth and if you read the fine print you'll see exactly how we are benchmarking or codes. If you'd like to do that anytime before the deadline by all means feel free to partake. But certainly don't feel that any bubbles have been burst. If you don't quite get to the point of challenging that, it is just for fun. So the final project expectedly posted later today on the course's website as the PDF. It will be very much as predicted in week 0 of the course where this will be an opportunity on a few weeks time for you to implement most anything you want, working either solo, on group of two, or three with classmates. I will say that historically about 80 plus percent of the class tackles web-based projects so even though 80 percent of the class has no idea how to make web-based projects at this point in time that is a lack of feature. We shall fix this week, next week, and beyond. So know that as you start to think about your final project, we have a tradition of seminars where the TFs and CAs and staff from across campus offer a slate of onetime classes that are totally optional that give you opportunities to learn stuff related to but not core to the course. So this year already we have a running roster of seminars that will be scheduled, filmed and presented over the next month on Java, on educational software using Emacs, IOS, JQuery, Ruby on Rails, the whole bunch of terms with which you might not be familiar and that's fine, just scroll on down and you'll read descriptions of these and they're meant to be really inspiration or tools to bootstrap you towards making projects that might use technologies and languages that we might know otherwise cover in the course and if you're a little eager to get going realize that we have three prior year--four prior years worth of seminars. All video taped, all with slides, some with code there, so it's quite the treasure chest of stuff that you can learn on your own. And also what we've done is put together this site, projects@cs50.net which is meant to be a repository from ideas, from the staff and people across campus, faculty and full-time staff alike. I get an e-mail like every other day from folks across campus saying, "Hi! Do you know some student who might want to help us make this particular--solve this particular problem?" So you'll see here are recent postings from students and stuff and faculty with ideas that they are hoping to either work with you on toward the end of the semester and maybe into J term beyond or to have you implement and save the day for them. So you will be ask and just a couple of week's time to pre-propose a project which will be an opportunity with the very short form to just tell your TF what you're thinking about so that he or she can kind of gauge us to the viability of it given the time allowed and just how complex or how simple it might be. Then you have a formal proposal. And once we A-okay your proposal, you are free to dive into your project, but more on that later today on the PDF on the course's website. And lastly, those of you who are either eager this coming year or this coming summer or even beyond in pursuing tech internships, generally, there are plenty of companies that will hire someone after taking CS50 or particularly after taking CS50 and something else in the spring. So generally having two solids CS courses under your belt is enough to get you into the door of a lot of popular tech companies, Google, Microsoft, and alike. Well, it's our own, Matt and Melissa are gonna be holding this Friday is really crush course on how to prepare for this kinds of interviews in tech or even if you're a freshmen and not really thinking about this yet but you kinda wanna know what this world might be like. Historically OCS tends to cater a little less toward the technology companies so we thought we tried to bring this in-house and do our best to equip you with some fun puzzles and to give you a sense of what is it mean to have a technical interview about programming in computer science. >> I will say from personal experience when being interviewed by Microsoft on campus and the recruiter says, "Oh so, what's your favorite language?" Do not try to show off and say, "I really assembly language." Because if my own experience is any indication, that recruiter will then proceed to ask you a question about one of the most difficult languages in which the program and you have to then prove to him or her that you actually know what's you're talking about. So suffice it to say I'm--no one told me this, 10 years ago when I had my Microsoft interview. So go with something with which you a bit more comfortable. Assembly language is something that you will see in CS61 if you'd like to go that route. Alright, so internet, what is it? We have hundreds of people taking this class all whom use the internet, some of whom are using the internet right now, so what is it? In layman's terms? [ Inaudible Remark ] [ Laughter ] >> A series of tubes. You've been well educated by the daily show. So yes, it's a series of tubes. Google that and you will--well, Google it now and will lose half the attention of the class that's fine. So it's a series of tubes, metaphorically, but in real terms the internet is what? It's some kind of infrastructure that connects hundreds, thousands, millions of computers together in the world. So it's some kind of physical infrastructure that in its simplest form is computer and computer with some kind of connection in between them, maybe it's a wire, maybe it's wireless, maybe it's satellite. But it's this mesh as we kind of saw from that teaser thriller of interconnections among computers. So the internet is some physical infrastructure, what then is the World Wide Web? It's kind of easy to conflate the two, but what is the web? Well, how do you access the web? Obviously, with the web browser and let's push a little harder. When you use the web browser you usually type in an address and even know these days most of us aren't--are lazy enough that we don't bother typing this prefix, anytime you go to a webpage, hidden there is http:// but that's changing if you have an iPhone or if you have a mobile device that's hiding these prefixes but that conjures up something more technical and HTTP is a protocol, Hyper Text Transfer Protocol. And it's the language that a web server and a web browser speak when communicating on the internet. So what does all this mean? Well, the web is just a service, alright. Email is a service, Instant Messaging is a service. A Skype is a service that used the internet which again is this physical infrastructure to actually make that infrastructure useful or you can send emails using one protocol and you can access webpages using another and that's because computers on the internet, clients and servers alike. All speak these things called protocol. So first, some easy jargon. So client is just like a laptop, it's a desktop. It's something that's not a server. A server by contrast is something that lives on the internet it's almost always listening for connections and request and much like a waiter in a--or server in a restaurant that server response to request from clients. Alright, so when client requests something from server and server response to client, how they exchange those informations? That information is called the protocol. So for instance, what's a normal of human protocol? We'll find meet someone for the first time I might say, "Hello. I am David. And what do you do?" >> I'm a student. [ Laughter ] >> I'm sorry, you want to--you extend your hands. >> Oh, yeah. >> Yeah. But you are indeed a student as well. So right. So in this--the real world we have this protocols, maybe silly protocols whereby if I extend my hand and say "Hi, how are you?" Typically the other person on the other end will extend his or her hand and completes the protocol exchange and that's all we're talking about when we use the web. So what is this really mean? Well, if we actually type in something like dubdub.google.com into a browser, on a laptop, on a client well, well, what actually happens? Well, at the very highest level, my laptop contacts Google. Google responds and I see a big search box and then I can repeat this transaction and actually provide input this time into the text field. But what my computer is really saying is something pretty simple. My computer, my browser is essentially sending a very short message saying get me slash, where slash generally denotes the route of a hard drive or in this case the route of a web server, the default page, and then I just have to mention in my message to the server what language I want to speak. So this is literally what is sent to a server from my browser. And I obviously the human don't have to know or don't have to do any of that because that's what the browser does. It converts the more human friendly google.com into a message like this. What does it mean to send a message? Well, will see this too with Mr. TCP/IP in the video in a while but you can think of my computer as sort of preparing a little virtual envelope inside of which is putting a virtual slip of paper written on with is a message like this. And then on this virtual envelop my computer has to put some addresses, the "to address" and the "from address." And even if you're not quite sure what they are, you can probably guess to what address am I referring when I talk about the to and the from there. All of our computers have one of these things. So it's an IP address. IP is just Internet Protocol address. An internet protocol is again just a set of standards that humans agreed on a bunch of years ago and they decided that according to the IP protocol, everyone, every computer on the internet is gonna have unique address. And that address is going to be of this form W.X.Y.Z where each of these letters is actually a number from 0 to 255 with some exception. But in a nutshell, it's something dot something dot something dot something dot something and each of those numbers is fairly small and quick check. If each of these letters is between 0 and 255, how many bits are being used for each of these place holders? So it's just 8 right 'cause 2 to the 8 is 256. So when IP address is 32 bits in total which means how many possible IP address or computers are there on the internet? So roughly 32 billion, maximum. You don't need negative number so we can go all the way up to 4--sorry all the way up to 4 billion. 2 to the 32 and that might sound like a lot given the number of humans in the world, but frankly just a few years ago even the number of IP address is being used on campus suddenly sky rocketed. What happened over the past few years that has consumed even more of Harvard's IP address than traditionally was the case? Yeah, we all have smart phones, right. Every time you walk into this room if you can figured your phone for either the Harvard University SSID or the CS50 SSID, you walk into a room and bam your device has requested from Harvard an IP address. So even right now Harvard itself is--has a shortage or sort of IP addresses which is solvable technology. But the world a long story short is transitioning away from these things, version 4 of IP. So it's gonna be called IPv6. And IPv6, just to paint the picture, is gonna use not 32 bits but 128 which is huge. We're probably not gonna run out of IP addresses in our lifetime if we all adapt this particular standard. So what goes on then? So on the browser, I create the sort of virtual envelope. I write on a piece of paper that message get/, and using this version put in it inside the envelope, on the front of the envelope, I write the "to" address which is the IP address of Google. And then in the top left-hand corner of this envelope I write my address which is whatever my laptop's IP address is. Well, just to make this more concrete, if you have a Mac you might have seen this before, you can go up to system preferences. You can go to network and then you can see exactly what your IP address is at this moment. And as an aside Harvard owns--no you can't. You can only see me. Thank you. So you can see on a Mac that this is your IP address if you go ahead and open up your system preferences and click Network. So Harvard has given me an address of this form 140.247 as an aside, most Harvard IP address start with that, so you can identify them as belonging to Harvard. But Harvard owns others and then there's some other stuff called subnet mask and router and DNS only touch upon some of these things but for more take CS143, a networking class. So each of our computers has an IP address but I don't know CN--or google.com's IP address, right. All I, the human user know is that the website is called google.com or more properly www.google.com. So how does is--how do I figure this out? How does my laptop figure this out? Well, what's the keyword here? What's the spoiler? So DNS, we actually saw this acronym a moment ago. So DNS is something also that might have seen overtime at least somewhere on your computer, but it's stands for Domain Name System and all these refers to is a standard set of servers across the internet whose whole purpose in life is to convert domain names like google.com into IP address and vice-versa and the advantage here is that I and even my own personal computer don't have to know what google.com's IP address is because we can just ask one of this servers. What server do we ask? Well again, when you boot up your computer on campus Harvard gives you not just an IP address but it also tells you what DNS servers to use. Or if you're at home Verizon on Comcast or whoever would tell you the same kind of information. So now I go ahead and I tell my computer--or my browser, ask the operating system. Hey, please ask the local DNS server what's the IP is for google.com. Hopefully my operating system knows the answer because it talks to a DNS server. That DNS server finally responds. And so now I can write it on the "to" field of this envelope. And I--it's pretty easy for me and my browser to figure out what my own IP address is just like I did as a human a moment ago, so I can write that on "from" address and then I can hand it off to "whom." >> Once I finished addressing this envelope filling it with this request, I have to get it to Google but how does it get there? What's maybe the keyword here, even if you're not quite sure how the story goes? Sorry? [ Inaudible Answer ] >> ISP. Okay, so ISP, Internet Service Provider is typically involved, but they're involved because they have themselves a certain type of server, a certain type of computer, generally called a--yeah, router, so a router. So a router is also maybe a term you've at least heard, right, Cisco and other companies make lots of these things. The name kinda spoils what it does. It routes stuff. Well, what is it route? It routes things like these virtual envelopes. And let me start calling it a little more something technical. Instead of virtual envelope, we'll generally call it a "packet." So a packet of information is something like, we've been describing metaphorically here as an envelope. So once your computer has this on--this packet ready, it needs to hand it off to someone. And in fact, we kind of glimpsed this a moment ago, at least on a MAC, and Windows, and Linux, have identical features. If I zoom in here, notice that my computer indeed knows about a router. Its address also starts with 140.247. So that means it belongs to Harvard and so all my computer has to do via its ethernet cable or via some WiFi connection is actually temporarily readdress this envelope not to google.com but to say--actually send it to 140.247118.1, and so I still have to mention somewhere on the envelope that the ultimate destination is google.com and its IP address but for the first hop, so to speak, for the first router, I'm gonna say, let me hand it actually to this guy instead. Now, what happens next? Odds are Harvard's router doesn't know we're all possible web servers are in the internet, right? They might know Google, but there's some tiny websites that they might not know about in advance. So what does Harvard's router likely do upon receiving some packet from little old me? So DNS actually doesn't need to come into play anymore, 'cause at this point in the story, so it's not a bad thought, but we're already talking only in terms of IP addresses. We don't need to work DNS into the picture again. So what would you do if I hand you a piece of information and say, give this to Matt? What would you do if you don't know who Matt is? Right, maybe hand this the person next to you, right? Let them deal with it. And then if he or she doesn't know who Matt, well, maybe they'll just pass it along and they'll just pass it along. Now thankfully on the internet, it's not necessarily the case that every router knows exactly where Matt is, or where google.com is, but because these addresses are number-based, that means that very efficiently these computers can have the equivalence of like databases or fancy Excel spreadsheets wherein one column is a list of IP addresses that it knows about and in the other column is a direction, a router as that picture of a meshed network suggest actually has a connection usually not just to one other router but maybe to two or three or four. So upon receiving a packet, a router can literally route information left or right, or forward, or back, up, down, whatever direction the wires are actually going in and thanks to these routing table inside of its memory which again couple columns IPE on one column, and direction in the other, well the router can decide I don't really know where Matt is but in know Matt lives on the East Coast so let me send this packet to a router that's a little closer to the East Coast, and then it can make a similar decision and again and again. And so generally, this takes maybe 10 hops, maybe 30 hops maximally. But the internet is designed to be pretty efficient. So if a packet is going around and around more than 30 times to different routers, usually it gets killed, it gets dropped and then I, the browser, have to figure out how to get it there more efficiently. So this is all very abstract. But we can actually make this a bit more concrete. I'm gonna go ahead and open up the appliance here and what I've done in advance is I've actually connected to the Harvard Computer Society's server. A lot of Harvard's network is firewalled in the sense that you can't do certain things. But if I actually connect to this particular system, I can do more than that so HCS just refers to that server and my account on it. I'm gonna go ahead and do this. I'm going to re-log in since I did that too long ago, and I'm going to go ahead and run--I'm gonna go ahead and run traceroute to let's say dubdub.Stanford.edu, right? I know that Stanford's out on Palo Alto but I'm not quite sure exactly how to get it there but hopefully my computer does if I go and send an email to some friend who's at Stanford, hopefully my computer can in fact trace the route from here to there. So I'm gonna go ahead and hit Enter, and what we see flying by is a whole bunch of stuff all of a sudden. It looks like 15 lines--16--17 lines. So it actually looks like if we fast forward to the end of the story that there are 17 hops between me and Stanford University at this moment in time or more specifically between the Harvard Computer Society's server which is also on campus and Stanford. Why? Well, in step 17, dubdub.l-lb.stanford.edu is apparently the name of one of Stanford's web servers, LB actually stands for Load Balancer, so it's some fancier device there. But that server has parenthetically an IP address, it does not start with 140247 'cause that belongs to Harvard, this apparently belongs to Stanford. And then on the right-hand side here, what do you think these numbers mean, three sets of numbers? [ Inaudible Remark ] >> What's that? [ Inaudible Remark ] >> Yeah, the time. So how long did it take for my data, for my packet, for my email, for my instant message, whatever it is, I'm trying to do at this moment in time on the internet, it took only 89 milliseconds to travel from here and Cambridge, Mass. to Palo Alto, California, right. And we take this for granted, but if you kinda pause and think about that, that's kinda mind-blowing. You can only imagine how many hours it takes to physically get a human from Cambridge to Palo Alto and yet this is 90 milliseconds, right. This is a tenth of a second with which we got this data there. So that's kind of cool. But we can see more along the way. Let's actually trace this route as this command implies. Let me scroll back up to the top and you'll see that the story started here at step 1. So this is apparently the IP address of HCS' server, that's step 1. And then this one, it doesn't have a name but it belongs to Harvard just because it starts with the same numbers and then apparently Harvard passes the data off to this server which because the system administrators decided to give it a name, it has a name now, I don't really know where this is but BDRGW, anyone wanna guess what this shorthand notation means? [ Inaudible Remark ] >> Actually, it's Border Gateway. It's like shorthand notation for a router. A gateway is a router. These are synonyms, border, it's probably literally on the periphery of Harvard campus somewhere and then this has an IP address. As an aside, Harvard also owns a lot of IP addresses that start with 128.103 but this makes sense, right? It only took about 2 milliseconds to go from Sanders or wherever HCS' server is to this Border Gateway and this, you know, pretty reasonable, 2 milliseconds because we stayed on campus, contrast this with going to Stanford which is 3,000 miles away, it's reasonable to expect that it's gonna take more time than staying on campus. Well, let's see where my email or my IM or whatever it is I'm trying to do on the internet went to next. Well, in Step 4, goes to nox.org so this is actually one of these big ISPs essentially. Northern Crossroads is what NoX stands for and that's just one of Harvard's peering points. So the system administrators here plug their routers by some kind of fancy cables into this other bigger fish on the internet so that our data has some place to flow. Apparently, Northern Crossroads has multiple routers here and here but where it gets interesting is in step 7, where is my data apparently at this point in the story? We can only infer, but feels--looks like Kansas. And if I scroll to the right, look at the times, we jumped from like 2 milliseconds up to 30 milliseconds so it stands to reason that there're a few states geographically in between us. This is a bit of an anomaly, right? It feels like, if my data took 100 milliseconds to get to this point and then 30 milliseconds to get to the next point, these are from the origin point, so realize the internet is not entirely predictable, it could take--some routers rather could be slower. They could be congested and so there could be these bottlenecks someplace on the internet but whatever that issue was, it went away pretty quickly because from [inaudible]--here to Kansas, looks like it actually only takes closer to 30 milliseconds. Where are we in step 8? Where's my email now? Houston probably, and by step 9? Los Angeles probably, LOSA, I'm guessing. And if we scroll over here, oh dear God, that's quite the detour. But, here too, not necessarily consistently the case. And here too an important takeaway is that if we ran this again or you ran this tonight or tomorrow, these routes could constantly change, one of the key features of the internet, which is particularly inspired by its military origins is that it's supposed to be dynamic. These routes can and should change overtime especially if the routers or humans running them determine, "Wow, this router in Los Angeles is really slow, let's route around it at this point." And so this can be reconfigured manually or even automatically so these routes are not hard coded. In fact there could any number of ways to get from here to there. So 10 seems to corroborate the idea that we're in LA because LAX is in the name here. So system administrators have this habit traditionally of using airport codes as the names of their routers so that's not uncommon to see. I'm not quite sure where this one is. But by step 12 looks like we're somewhere in the campus of Stanford, then here's another boundary router dot Stanford.edu. >> Here's another border router and [inaudible] router, I don't know what this is, but these are just the names, name given to their machines. So long story short, what do all of these lines represent? These literally represent the path that my email or instant message or in this case just simulation took to get from Cambridge to Palo Alto. Well, let's take a look at one other example that's not even--soon other academic institution. That one was using the Internet 2 which is a faster interconnection among a lot of universities. Let's go ahead and do traceroutes of dubdubdub.CNN.com. Alright, so Enter. And this seems to be going this time from Harvard in steps 1 and 2 and then also 3 and then 4 and then apparently there's some kind of cable between Cambridge and Boston, that's pretty reasonable to expect. Then there's some kind of connection between Boston, and in step 7, New York. So that's kind of cool that within 6 milliseconds we can get to Manhattan or thereabout. This is probably new--no, this is Washington, DC. In step 8 and step 9, step 10 we're in Atlanta. Step 11 we're still in Atlanta. And then these routers are apparently not responding to our request at this point for privacy reasons of configuration reasons. So you don't always see exactly what's happening. That doesn't mean there's a dead-end, it just means that the program I'm using or the special protocol ICMP that I'm using to do this simulation, it specifically is blocked. Not necessarily web traffic or the like. So one last one, right, 'cause the numbers here are only interesting and so far is that they're pretty damn fast, 2 milliseconds to DC, 24 milliseconds to Atlanta. Well, let's do an example where we go not to CNN.com but like co.jp which is the Japanese version of their website, let's hit Enter here. And see what happens? And it's being a little slower, but we see that this is apparently its IP address, okay. So a few servers weren't responding and unfortunately we can't see the magic happening here because in steps 1, 2, 3, 4, 5, let's actually--just for kicks, let's rerun this in case we get better data. Maybe not. But in a moment, we well see--come on--actually let's try the other direction. Alright, UK, see if this helps--or not at all. [Laughter] Okay, come on. Okay, better. For some reason it's being pretty slow, alright. So our data is in Boston at the moment. [ Noise ] >> Okay, still pretty fast. So this seems to be the network that's just not cooperating. Alright, so apparently we're going the long way to London. We're going down to Washington then down to Atlanta then apparently we're kind of hitting that bottleneck here again. So this is really isn't demonstrating what I wanted to. So let's try one last time with Japan. Oh, Japan is being better now. So here we go. Now it's 1 or 2 milliseconds to Harvard, there are some good data, alright. So, you know it's kinda sad when you get excited about stuff like this. [ Laughter ] >> So, let's see here. So, we got some Harvard going on at the top, some more Northern Crossroads which is in the northeast--northeast, I'm not sure where this or number 6 is, 7 is just not talking to us. But now 8 is getting more interesting, it's apparently in New York City, and this one's cool. This is when you actually do get neat glimpses into the inner workings of the internet. What is in between steps 9 and 10? It's like the entirety of the United States, right? SJC is probably San Jose in California and so these kind of make sense if the time to get to step 9 is 27 milliseconds and the time to get to step 10 is 100 milliseconds suggest that there's some distance there and actually what is between steps 11 and 12? Like literally the Pacific Ocean, right? And so there's some huge sub-Pacific cable or cables that are going from the West Coast of the US to the East Coast of Japan, apparently in Tokyo or thereabouts between steps 11 and 12 and sure enough, it takes 100 milliseconds to cross the Pacific Ocean. Hereto, kind of think back to things we learned in history class, I think that's kind of fast to cross an ocean. So anyhow, you can very easily get distracted with this but hopefully the takeaway here is that what's really happening on the internet is a lot of handing off and off and off of these virtual envelopes, more technically known as packets, inside of which are messages for the recipient. So what is the recipient going to do? Well, for this, we can actually use a different tool, so I'm still inside of my appliance here and I'm just loading up Firefox which you probably used at some point this term. But what we've done in the appliance is we've actually preinstalled a few helpful tools that don't come with Firefox by default but they are freely available for your MAC, PC, and the appliance. So if I go to my tools menu, notice that we have a few things here. One is called Live HTTP Headers, and then soon we'll be playing with things in here, Web Developer like Firebug and these other tools here but I'm gonna go ahead and pull up Live HTTP Headers. Notice it just gives me this big blank window and what this thing is going to do is it's gonna sniff the traffic between my browser and say google.com and it's gonna show me what's inside of these packets that we've been talking about as virtual envelopes. So we can actually see what humans are taking for granted. Now what's going on here, it looks like Firefox is designed to like do auto updates or whatnot, so it's already talking apparently to Google of all places so you can also see what this--what your browser is doing when you are not even on the keyboard. But I'll clear that 'cause it's a distraction for this and I'm just gonna go here to--let me shrink my window a little bit so we can see both at once. I'm gonna go to http colon slash slash dub dub dub dot google dot com slash enter, and sure enough on the right hand side, I see all of the secret messages that were inside of this envelope. And I kind of lied to you earlier in that it's not as simple as just saying GET / HTTP/1.0 but it's pretty close. So what we see here at the top of these Live HTTP Headers window is one--the URL that I just visited. So that's not interesting. But what is inside of the envelope that I just sent? It's everything here that I've highlighted in blue. So the very first message is as promised, it's a slightly newer version of HTTP but that's a message from browser to server, hey, I would like to shake hands with you, so to speak, using this protocol called HTTP. And what else is in there? Well, apparently the next like, host colon, is a reminder to the server, I asked for google.com--dub dub dub dot google.com. Now just as a quick check, why might it be necessary for the browser to explicitly remind the server what its own name is? How was this envelope addressed? What's on the outside of the envelope, rather? [ Inaudible Remark ] >> The--so, the router address or somewhere on there too, the IP address of google.com. So because we're using the internet and this protocol called IP, we're actually routing information from 2--from point A to point B using IP addresses so this notion of dub dub dub dot google.com in this very human friendly words is something we need to actually typically remind the server of just in case as we'll see there's actually multiple web servers listening, multiple websites listening at this particular IP address. In the case of Google, not likely, but in the case of Final Project Season, and using commercial web host if you actually host a project externally, this will absolutely be the case that multiple domain names share the same IP address. Now, what's the rest of these? Well, some of this is uninteresting but this one's a little juicy, turns out every time you visit a website on the internet, you're telling them a little something about yourself. Even if you haven't logged in, you're telling them that in this case I'm running Linux, I'm telling them that I'm running Firefox, I'm telling them that I'm running version 7.01 of Firefox and also it seems that I'm also--have a cookie. We talked briefly about this in previous weeks and we'll come back to them more technically this week and next, but I'm essentially showing a handstamp to the website that says, I've been here before, because you stamped my hand by storing this thing called a cookie on my hard drive and by agreement of HTTP on the--because we speak this protocol, I'm always gonna show you that cookie every time I revisit you because I've been to Google before so let's just scroll down as to what the server replies with. When I pull up google.com, the server is gonna respond with a very similar message but with a number, in this case, 200, which means okay. Now, if you've ever seen in a browser the number 404, 401, 500, 403, any of these ring a bell? 404 in particular? What does 404 generally represent? [ Inaudible Remark ] >> File Not Found. Like you made a typo where the web server made a mistake, so where are those numbers coming from? Why so technical? They're just inside of the server's response. So when my browser opens the envelope that was sent from Google to me, inside of there is a message among which is this code that's this other 200 which means everything is okay or 404 Page Not Found and a whole bunch of others. And then there's a whole bunch of other things here which we'll wave our hands at but these too relate to cookies and some other features of the website. So at the end of the day, what we end up seeing is of course this, but what's been going on underneath the hood is the entirety of that story. The internet's actually getting data from point A to point B but because browsers and web servers speak this other protocol, HTTP, and it be clear that protocol just says, if you want data from me, you must send a message that looks like this and I agree in turn to send you a message that looks like this, but thankfully Microsoft and Mozilla and Google, they simplify these very technical details and just show us what we care about which is typically a page that looks a little something like this. So that's in a little more detail how the internet works and how the web works. Any questions? >> Alright, so if we peel back this layer now of Google, let me go up here, let me go to view page source which is not there, let me go here and click view page source and what you will see is how Google implemented their website, and in here is a little something called HTML and a lot of something called JavaScript both of which you will be speaking in just a little bit's time. Let's go ahead and take a five-minute break here and we'll come back and start writing some HTML. [ Noise ] >> Alright, we are back, so let us learn how to make something like this. So, how do you actually start putting webpages on the internet? Well thus far, all of our stories have assumed that there's a browser, a client, and that's easy 'cause almost all of us have that either right now or back in your room but the server is a little less obvious how you go about doing this. Well, it turns out that all this time you've been using the CS50 appliance for C programming and to write your code and for other purposes but it itself is preconfigured to be a server. Now the appliance is only so useful because when you're on campus and using wireless, your IP address is actually changing pretty often. So even though your laptop has a server, a web server on it, even though we haven't used it up until today, it's not really gonna be accessible by anyone else on the internet because they don't know your IP address. Your appliance also does not have a human friendly name like google.com and also for security purposes we've configured the appliance's server to not be accessible on the internet unless you throw some switch, so to speak, to actually let the outside world have access. But this is the funny thing, like a server on the internet does not need to be some mainframe computer that takes a part of a room, it doesn't even need to be a server in a rack, a rack of servers, rather it can literally be our own laptops. People would even hack things like the Xbox and the PS3 to be web servers because all you need to run a server is just a computer and you need to put the right software on it and the software is just called web server software. So even though we call physical devices typically servers, that's fine but it's really the software that's the server, the thing that's like a waiter in a restaurant actually serving up information, and there's web servers, there's mail servers, there's instant messaging servers, Skype servers. There's a whole bunch of servers or services on the internet and you just need the right software and so we already have that. So let me go over to the appliance here and then go ahead and close Firefox and just get to the point of having my terminal window open here, so jharvard@appliance. Well, when you log into a terminal window in the appliance, you can usually type ls and see what you have in your home directory. You have desktop by default and you also have source--I have a source directory from today but we need a special directory. Almost always, if you have the appliance in this case or if you have an account on a commercial web server that you can pay 5 dollars a month, 20 dollars a month for, you generally have the username and password that you can use to connect to the server. Now, even though in the case of the appliance, you don't really need to connect to it, you just need to double click it and it opens and there you are, it turns out that we can also connect to the appliance as though at some random server on the internet from our own Mac or PC. So we'll see that in a moment but first let's do this. I'm gonna go ahead into my home directory where I am by default, I'm gonna type this command MK for make directory and then I'm gonna make a special directory called public underscore html, all lowercase, no spaces, and then I'm gonna hit enter. If I really wanted to or if I wasn't comfortable at the command line, I could also go to my home directory, I could for instance go to file, I could go create folder and do the exact same thing, but by now [inaudible] you're pretty comfortable using the blinking prompt at the terminal window. But there it is, public HTML, there's nothing in it, so let's go back to the terminal window and see what we can do with that. I'm gonna go into public HTML with CD as you've done before, I'm gonna hit enter, type ls and indeed nothing is there. So let's do this. I'm gonna open up gedit where even though you usually double click its icon, you can also type its name in all lower case and I'm gonna create a special file called index.html. All lower case, no spaces, enter. That's gonna go ahead and prompt gedit to open and notice in its title bar it's pointing out that you're inside of your public HMTL directory and that's good 'cause I want this file to end up in that directory specifically. I'm gonna go ahead now and just do the following. I'm gonna do open bracket exclamation point DOCTYPE in all caps html in lower case and that's it. So this term we're using a version of HTML called HTML5. It's sort of the latest and greatest even though it's not quite a fully adopted standard. This is these technologies as you might gather are kind of a moving target. Even though C as we know has been the same since 1999, HTML changes by the month, by the year, and so I will focus particularly on the fundamentals over the next few weeks and [inaudible] sort of the temporal aspects. But this very first line that I typed in a file called index.html is just a clue to the browser with which I'm gonna open this file that, hey, this is HTML. It's not sufficient unfortunately that just the file name ends in .html, if to be a little more pedantic and at the top of the file say doctype HTML. And then I can proceed to do the following. It turns out that every webpage on the internet is composed of what we'll call tags. A tag is something that has an open bracket and a closed bracket. And so this is--and it's unfortunate that this looks the same. What we just typed is not a tag, it's a special case. But this is a tag, open bracket HTML close bracket and then I'm gonna do the opposite so to speak here. So every webpage starts with open bracket HTML, close bracket, and then ends with the opposite where the opposite is the same word with the forward slash inside of the brackets. So you can really think of this quite simply as this means here comes a webpage, that's the end of the webpage. These are like directives that are just telling the browser so straightforwardly, do this, don't do this. Or here is this, here is not this. They're kind of reversing each other's effects. Now every webpage has 2 main parts. One is called the head of a webpage and I'm gonna preemptively create the open part and the closed part and then the body. And notice too just like we did in C, I'm trying to be a little nitpicky with my indentation in white space. I'm trying to keep it looking clean even though as we saw from Google that was a mess. Browsers don't care what it looks like but for humans, it's a good thing. And if we have as much traffic in which Google does where every byte or white space counts, well then we can resort to that as well. But for now, this is definitely good style. Unfortunately this is a very uninteresting webpage. There's a placeholder for the head of it, there's a placeholder for the body but--but nothing more. So for now, the only thing we're gonna put into the head is gonna be a title tag. So I'm gonna go ahead and open title tag and then close title tag. But for the first time I'm now gonna actually put in some content, hello comma world for instance. So that's it for title and then down here, hello comma world again. And so that's it for now. So I have a title tag in the head, the head is an HTML but I also have a body tag that's inside of HTML as well but not inside head. So notice the indentation. Just like with curly braces and parenthesis in C, similarly, do we have a nice symmetry here, both aesthetically and also logically with our tags. So what's this kind of mean? Well in a nutshell, when you open up a browser, and you go to a page here, the thing that appears usually in a title bar, that's the head and specifically the title and everything that appears down below from the below all the buttons and whatnot, that's the body. So the body is really 99 percent of a webpage. So now let me go back to this file, I'm gonna go ahead and make sure I saved it with file save or control S, and that's it. So this is all the webpage is. Indeed an interesting webpage but it's just a text file. Just like C programs are text files, so is a webpage a text file, but the thing with a web file--webpage, if you don't compile it, this is literally what's gonna get sent to the browser. HTML is what's called an interpretive language which means you don't covert it to 0's and 1's, rather you just send it to a machine. And the machine then reads it top to bottom, left to right. So the takeaway here immediately is that if you are at all concerned for your intellectual property, it doesn't matter, like it's out there. When you write webpages, anyone on the internet can see your HTML. But the reality is HTML is not an interesting language. It's kind of fun to play with it first and we're gonna use it quite a bit to make more interesting things but it's just static mark up. It's entirely aesthetic. It's not a programming language 'cause there's no notion of functions or loops or conditions, all there is is do this, don't do this. And so we'll see a few more examples of that. So now let's go ahead and open this. So I'm gonna go ahead and open up Firefox, and as promised, the appliance itself is a server which means it's listening for connections from browsers and from other things on the internet. So I'm gonna go up to the address bar, and I'm gonna open my own webpage. I'm gonna go to http://localhost, so I'm specifically typing local host because that's the nickname, that's like the--the local google.com name for my own appliance, slash, and then this is the convention. Because we're currently using a jharvard account, if I literally type tilde jharvard, I'm gonna have a URL right now that looks like this. So definitely not good for the branding of my website, no one's gonna remember this and the tilde is hard to find even on some keyboards. But this is the convention. Typically when you, little old you has an account on a server and that server is web server, you can access your pages at a URL that looks like this. As an aside you all probably have FAS accounts back from problem set 0, even though we haven't used them. But that means you actually have access to www.people.fas.harvard.edu slash tilde username where username is your own FAS username. >> So that's where frogman and my UC campaign used to live, at crazy long URLs like that. I mean just imagine trying to write that on a poster back in the day. It's no one--no one visited my website is the point of the story. [ Laughter ] >> So let's hit enter and see what my webpage looks like, enter. Damn it. So, there's a problem. And there is that number, I see it in the title and in the tab, 403 forbidden. So this had something to do with permissions. And this is actually a good thing, it's a mistake on my part but it's a good thing in that clearly by default, when I create files on the internet, they're not accessible to the whole world until I tell the world, now you may look at these files. So I have to actually run a new command. I have to do a couple of things. First, let me go back to my home directory by typing CD. And then I'm gonna go ahead and do ls-l, and this gives me the long listing. And you've done this before for a problem set. Now notice for public HTML, I have in desktop, notice that they just say this, DRWX hyphen hyphen hyphen hyphen hyphen hyphen. What does all of that actually mean? Well, let me go ahead and just open up real fast a text editor, just so I have some place to type. And let me just repeat that. So the public HTML directory currently looks like this, hyphen hyphen hyphen hyphen hyphen hyphen, these are its so called permissions. Now what does this mean? There is always the same number of characters here. D just means directory and it's public HTML is a directory, we made it ourselves, and just take a guess, what does R stand for? Read? W? Writes. X? Executable. So what do this mean the context of a directory? Well, right here, I'm gonna say this is me and this is all over here. And I'm just gonna put a question mark for now as to these middle 3, and let me separate them just a little bit to make this a little more clear as to what represents what. If I just add some white space here, these 3 triples of hyphens or letters represent permissions for 3 different people. Me is the one on the left, so me, I have read, write and executability permission for that directory. What does that mean? Read means you can see the contents, write means you can change the contents, executable means you can double click the folder or CD into it. You can actually get into it. It doesn't mean execute like run, it means you can actually open it and go inside in the first place. As an aside, the middle 3 refer to what's called a group. If you've ever poked around on your appliance, you might know that John Harvard is always associated with students somehow, well, that's the group that you're in so to speak. But for now, we'll just pretty much ignore that one 'cause the interesting one is on the right hand side. Hyphen hyphen hyphen means all, the rest of the internet has no permissions whatsoever. There's no R, there's no W, there's no X which means everybody else on the internet is not gonna be able to touch this directory at all. But this is a problem, because if I want this directory to be on the internet, I need to give the world a few permissions and the most important one is executability. Minimally, if I have web files in here, my HTML is in this directory, surely the world has to be able to get into this directory somehow. So I can use a new command for that called chmod for change mode, and I can simply type change mode, chmod, A for all, plus X, so L plus executability, and then I just mention the name of the directory, enter. And now if I do ls-l again, notice what's changed. Public HTML is still read, write, execute for me but also execute for everyone else, as well as my group. But again, I'm gonna wave my hand at the group to tell, the last one is what's really important. So let's now reload, hopefully I've fixed all my problems. And I click reload. Still forbidden. So what--who might be the culprit now? You know, what about index.html, let's go in there. So it's CD pubic HTML, let me type ls-l. And this looks okay, it looks like my file which created with readability privileges for everyone because that's how I configured it in advance. But if I go here, let me do one other command, I hit CD to go back to my home directory, ls-al, there's a whole bunch of stuff. It turns out inside of your home directories, there's all of these dot files, files that literally begin with the period. And by convention in Linux, anything that starts with a dot, Mac OS 2 is hidden, you don't see it when you type ls or double click a folder. But this is all like preferences and cash files and temporary stuff that programs just put there, so you don't really see it. But what I care about is this one. At the very top, notice that there's a folder called dot. What does dot represent? Your current directory. So dot means this directory. So I'm in my home directory, so this very top line means I own my home directory, jharvard, that's--make sense. I'm in the students group, we know that. But notice, I have the ability to execute this directory, but it turns out I need to let the rest of the world into my home directory too. I don't want them to have readability. I don't want the R 'cause I don't want them to see what files I have in my account. But I at least want them to be able to open it so to speak so as to visit it on the web. So to fix this, I'm gonna do chmod. Oops, A plus X and I can solve this in a couple of ways. I can say dot 'cause I'm in a directory I care about. I can say tilde 'cause that represents my home directory too. Enter. That hopefully fixed that problem, now let's go back to my browser and reload. Ah, my first webpage on the internet. Well, not really the internet, on my computer. So that's progress. So notice, I'm in a browser, I'm actually ta--telling the browser to talk to local host as though it's a server. Even though local host is a special name that refers to my own computer, my own appliance, tilde jharvard means go into the jharvard guy's account and specifically go into his public HTML. So the web server knows that tilde jharvard actually means John Harvard's public HTML directory. And this frankly is a little confusing. You might recall from Psets and whatnot, that you very often type things like CD plus till--or you might do something like ls tilde CS50, just to kind of poke around CS50's account. Tilde CS50, when you're at a terminal refers to CS50's home directory. Unfortunately, when you're in a browser, tilde jharvard or tilde CS50 actually refers to those users' public HTML directory. So you just have to remember that it's different at the black and white window as it is in the browser. Alright, so this is a very underwhelming webpage. I feel like I didn't really need to go to Harvard for this. So, let's kinda of do better than this. So what can we do? Well first, let's notice this. Let me go over to my own computer. So now I'm on my Mac, I'm using Chrome, and I have a brand new browser open here and I've been visiting Rob's eyes again. Okay. So let me go to this address now, http://localhost/~jharvard and then enter. So notice, this does not work because now when I'm on my Mac or when I'm on my PC, if I go to local host, what's it obviously referring to now, with my own computer, the local host. But it turns out, and we've not needed to know this before, it turns out that your CS50 appliance has its own special IP address, a number of that form, W.X.Y.C. You can always visit 192.168.56.50. And this is documented and will be on the next problem set, so don't worry about memorizing it. But notice that this might actually look a little creepily like the one at home. We're not at Harvard, but back home if you have your own personal router and you've ever seen your IP address, well, it turns out that any IP that starts with 192.168 is a private IP address. The world had the foresight to realize sometimes we don't want IPs to be publicly accessible on the real internet. So this is a private one that we adopted for our own purposes. So if I hit enter now, notice that now on my Mac, I can visit the appliance as though it's a random server on the internet with an IP address, and so now I'm kind of simulating using the internet. And what you'll find for final projects and Psets, you all actually have counts already on cloud.cs50.net which is a server that's actually on the internet. You've probably seen this page before where you can actually put your own accounts on here so that eventually, you'll be able to have cloud.cs50.net/~malan or if that's your username. Or more interestingly for final projects for just a few dollars if you want, you can buy your own domain name and actually change a crazy looking U address like that to actually be something simple like isawyouharvard.com. And in fact when [inaudible] made that website, she had it living on a cloud.cs50.net in her own tilde so and so account. But we hid all of that details for her automatically so that she actually had a sexier URL that real people could actually remember. So this tilde stuff is really just useful for development purposes. So let's go back into the appliance and let's actually start making this webpage a little more interesting. So what are all these things in turquoise? So each of these tags, it has an open tag and a closed tag, and they again tell the browser what to do. Here is the title, here is the body. Well suppose we want to make things a little more interesting, and I actually want to make something bold. So I can say something arbitrarily like hello in bold as follows, open bracket B, and then close bracket B over here. So now again, notice the symmetry, B denotes bold, if I save this and then I go back to my browser whether on my Mac or on the appliance and reload, it's not quite a huge change, but now you can see the difference there a little bit. So let's actually go back into here and see if we can't make this a little uglier still. So let me go into body, and I wanna change the background color. Like this is pretty lame webpage, white background, black text. Let's try to do something more interesting. Well, it turns out that HTML tags can have attributes. Attributes modify their behavior and they look like this, name equals quote unquote value where name is the name of an attribute and value is how you want to control the behavior of the tag. So this is not a real attribute and value pair, I need to do something legitimate like BG color for background color. >> And let's do something crazy like pink, quote unquote, let me go back to my browser. After saving, reload and now it's starting to get hideous, right? So now--and let me just increase the font size artificially with my browser just by zooming in. I didn't fundamentally change the webpage yet. Let's now see if we can make our text a little different. So making text a little different gets a little more complicated these days, but that's okay, I'm gonna go ahead and do the following. I wanna make this whole sentence or this whole phrase a different color. And so I can't really do this right now 'cause I don't wanna do this on the body tag just yet. So I'm actually gonna do this, I'm gonna start making more to this page than just one line of text. So I wanna create what we'll call a division. And div--division just makes sort of an invisible rectangle sort of like you might have if you're a newspaper editor, just trying to lay out articles on a--on a physical page. Div just says create a virtual rectangle here and apply a bunch of stylization all to this tag--all to this division at once. So I wanna style this division of the page. Style equals quote unquote, so notice this is an attribute that's gonna modify the behavior of the division of the page. And I'm not gonna do anything just yet, no style for this element, I just wanna do a little sanity check back in the browser to make sure that this division didn't change anything in a bad way. So I'm gonna reload, and in fact nothing bad has happened, nothing visually has happened. But let's do this, let me right click or control click on the webpage, got a view page source and you can do this on any website on the internet. There is in fact my same page. But realize and don't get confused, I'm in a browser now. I cannot start typing in Firefox to change the webpage. I need to change it on the server where in this case the server is the appliance itself. This is just read only. So let's now change the style here, let's go into gedit again and let me go and say, you know what, I want the color of this text to be let's say red. So notice the difference here. Anytime you're inside of quote marks, specifically inside of style attributes quote marks, you actually say what's called the property colon and then something else. And if this feels like this is all of a sudden becoming a lot to take in, honestly, like HTML is kind of really simple at the end the day. This is we've almost seen already all of the fundamental puzzle pieces much like in scratch. We spent like 20 minutes on scratch and then you just kind of poke around and see what other puzzle pieces there are, same idea is gonna apply here. We'll show you a number of tags this week and in section, but till then realize that Google is your friend and you can find some other feature just by poking around or reading some manuals. So I know from having read the manual that color colon red is going to do exactly that. So let me go back to my browser after saving, I'm gonna reload, alright. So now it's getting a little hideous. So let's do another line of text. I'm gonna go in here and say goodbye world exclamation point. Now I'm gonna go back to my browser and save in--that's not really what I intended here. So we've got our first little hiccup. So Y is this second line appearing on the same line as the very first thing I typed do you think. It's the same paragraph, it's in the same division, or more specifically HTML is really kind of dumb language by design, like if it will only make a browser do something, if it tells the browser to do that explicitly, you can hit enter all day long as I'll do here, enter, enter, enter put pretty huge amount of space, right, just kind of trying to make the browser notice my white space but it doesn't have any effect. But if I view the source in Firefox, it's there, it's just being ignored. So I have to actually go back and be a little more explicit. If I actually want a line break, so to speak, I actually have to say something like BR, which is the tag in HTML for line break. So here too you can see how it--this HTML is very like pedantic, it says, make this bold, stop making this bold. Put line break here, then the next line of text. But here too, a little bit of asymmetry. Notice that I don't have to do this. Textually not wrong, you are allowed to do this but this is just kinda stupid, right. It's a line break, it's either there or it's not. You can't sort of start breaking the line and putting stuff on the next line and then stop midway through. Right, you either move the curser down or you don't, so in this case, it's kind of an anomaly. This is an empty element so to speak that doesn't have or doesn't need a closed tag. Now as an aside, if you do read up on HTML online and specifically a variant of HTML called XHTML, you'll see all of sorts of conventions and for HTML5, they simplified it, so what we just did here is right, not all the tags needs to be closed. But let's save this, let's go back to the browser here, reload, okay. So now, it's getting a little more interesting visually but this is not the webpage I know. I kind of like going to websites 'cause they're not dead end, so I can click on things. Well let's actually go here, and let's say goodbye world. Well, this is getting inter--uninteresting. Let's get rid of this. Actually let me save this and let's put it down below so I don't delete all of our hard work. I'm gonna make another division, and just as a test, test, 1, 2, 3, I just wanna see where this is gonna end up, but what's nice about a division is it indeed makes a rectangle invisibly so this next division or paragraph is lower on the page. So let's go over here and tweak this a little bit. Let's say here are some of my favorite websites. So I can do this and then I can say cs50.net and facebook.com, save, but of course, you should know where this is going. This just looks atrocious, right? They're not clickable first of all, and they're also not on this next line, so let's fix this in a couple of ways. Well, it turns out that HTML supports a bunch of features, here's one that's somewhat arbitrary. They're something called an unordered list, UL, let me indent this and close the unordered list. And it's unordered in that it's not gonna have numbers associated with it, and then in front of each of these list items, I'm gonna use the li tag. So we'll see in just a moment, open li, close li, save, reloading my browser. Okay, so it's still hideous frankly but you've seen the extent of my web capabilities, so this isn't all that far off. So here we have now an unordered list but still this is not hyperlinked, right? This is not going anywhere so let's make a link. Well this too is actually pretty easy. You can't just save cs50.net, you have to actually tell the browser to create a link to cs50.net. So the tag for that is the anchor tag A, href for hyper-reference which just means URL, quote, unquote, http:// so we use S so, :// dub dub dub dot cs50.net. And then over here, I have to close the anchor tag so even though I have an attribute on this anchor tag, the name of the anchor tag is just A, so when you close a tag, even if it has attributes, you don't copy and paste the attributes again, you just succinctly use the name of the tag. So let's do a quick save and see if I'm on the right track, reload. So it's blue and kind of ugly and old school but if I click this now, it actually does go to the courses websites, let me go back over here. Now we can do facebook.com as well, so let's zoom in here, so we can go A, href equals http dot dot facebook.com slash. And then over here, we can close this tag or, you know, we can even--right. Who knows, watch this, myspace.com. So now that still works. So notice this dichotomy. Herein lies the wonderful opportunity for social engineering attack. So all of us have probably got emails from like PayPal saying please change your password or even from harvard.edu webmaster or whatever saying please fill up this form and tell--so we can reset your password. As of now, realize it is pretty trivial to make a webpage or even make an HTML based email that says one thing and goes somewhere else. Case in point, this is what myspace.com is apparently these days. So if we go back here [laughter] notice the dichotomy. So it says obviously facebook.com, but if I hover over this link, it's gonna be a little small but notice there are some telling signs this is actually going to take me to myspace.com, and that's because the destination is decoupled from the actual label. So if you've ever been the recipient of some phishing attack or clicking a link actually takes you somewhere illegitimate, that's actually how we can do this. So, if we're making this ugly, we might as well go all the way, so let's actually--no, no offense. [Laughter] Okay. So we have some eyes on the desktop here, but here's a problem, so Rob's eyes are currently on my own max desktop but the appliance of course or rather the--my website is inside of the appliance. So how do I get Rob's eyes into the appliance? Well, there's a couple of ways and frankly the easiest approach is probably just to open Firefox in the appliance and download the eyes in the right location. But you're not always gonna think of that and maybe on your own personal laptop, you've got photos and whatnot in your hard drive and you want to upload those so to speak into the appliance, you can actually upload files into the appliance very easily. I only have a Mac running here at the moment, but let me just demo the Mac and I'll point you toward the PC instructions. On a Mac, you can go to the go menu. You can then say connect to a server and even though it's the CS50 appliance as of today, it turns out it's been a server all these time. Oops, I shouldn't skip over the most important detail. So notice in the window, I just have to type this, the IP address of the appliance, and then this thing, this is a different protocol, it's not HTTP, it's something called Samba which is Windows file sharing, and so SMB://. If I hit enter here, notice in a moment, it's doing connecting dot dot dot dot dot dot dot dot dot, and voila, now I have my jharvard home directory mounted on my Mac. And you could do the exact same thing in Windows, so that you have a Window on your own computer connecting your computer with this and you don't have to use something like dropbox or other tricks. For the PC instructions, just go to manual.cs50.net and go to the appliances page for how to transfer files back and forth. >> But the point here is I can now open my index.html file, I can now drag Rob's eyes into this folder, I can now go back--oops, back to the appliance itself, and let's just do a quick check. I'm gonna go into public HTML, ls-l. Oh, there's gonna be a problem, Rob's eyes are not accessible on the internet yet or on the appliance in this case here. So let's actually see what happens when this is the case. Let me go, oh, we're not gonna keep, we're not gonna put in points for effort here, might as well just plop it at the bottom. So let's do this, image for image tag, source for the source of the image, and then I could put a URL. But if I already have the file locally, I can just say eyes.png, and now I can go over here, I can back to my browser, and reload and unfortunately we now see nothing. And yet, if I go up here to view page source, Rob's eyes are definitely there, at least in terms of HTML. So how did we fix this before? Well, before we did chmod A plus--oops, we did chmod A plus X which was executability, but an image is not something that's executable. It's not a directory and it's not a program, so what do you probably wanna do in order to see an image. Yeah, so you can kind of guess, read. So chmod plus R for read, eyes.png ls and now these two are world readable so to speak, the R is a good thing. Let's go back to the browser, reload, and oh my gosh [laughter] that's--well, that's even worse than usual, but you really see the glints in his eye now and that's just because I zoomed on in this page a moment ago in my browser, but we can also make this clickable and remember we did this really fast last time. Just because the link is normally text, it doesn't mean it has to be so we can do A href and I apologize to Rob that it's getting creepy that I know the URL of his facebook profile [laughter] now, academic purposes, so let's save that. And now notice we've sandwiched now an image tag inside of the open A tag and the close A tag, the href is going to go to again, Rob Bowden's webpage. If I now reload this, doesn't look any different but if I hover over his eye, you see that the cursor appears. If I now click on that glint in his eye, I have to go to Facebook where if I log in I can now befriend Rob Bowden. So why don't we leave it on that note and we'll see you again on Wednesday. [ Applause ]