CS50x 2024 - Lecture 8 - HTML, CSS, JavaScript

Key Takeaways

[Music] [Music] he [Music] all right this is cs50 and this is already week eight uh but this is a cs50 bingo board from one of your classmates at Yale shashana kindly sent this to us and she's apparently been taking close notice of certain Expressions that I apparently tend to say quite a bit some of which I'm aware of but not all of them and the idea here as she described it is that if and when I say any of these Expressions on the screen you can sort of draw a line through that box and if you get five in a row you win a fabulous prize uh it seems only fair then if we maybe give away some cookies today uh if and when I actually do say five such things in a row uh perhaps it'll be all the more motivation to keep a wrapped ear against everything we're talking about today um so if and when that happens feel free to just yell out Bingo um and then please see Carter during the break or after class for adjudication all right so today ultimately though week eight is about the internet and in turn how it works and in fact how we can start building software on top of it so up until now of course we've experimented with scratch spent quite a bit of time with C only really spent a week plus so far on Python and about the same on SQL But ultimately we're going to come full circle next week and tie all of those languages together but we're going to do it in the context of the web and in fact to do that we're going to introduce three different languages today but only one of which is a proper programming language the other two are more about presentation markup languages so to speak and those languages are HTML and CSS commonly used in conjunctions some of you might have done this middle school high school even if you ever made a personal website of sorts um and JavaScript a programming language that is very commonly used in the context of browsers to make inter uh interfaces that are all the more interactive but it can also be used server side and what you'll find that is our goal this week like last week like two weeks ago is really to teach you ultimately how to program how to program procedurally and also with elements of what we'll call functional programming object-oriented programming Concepts that you'll Explore More if you pursue more programming or higher level classes but at the end of the day you will exit this class Having learned how to program particularly in a context that's very much in Vogue nowadays be it for the web or be it for mobile devices and all of the ideas thus far will be applicable as we now begin to build on top of the internet so what is it so back in the late 60s 1970s it wasn't much of anything this is an early diagram depicting a few access points on the west coast of the United States which represents what was originally called arpanet and this was a project from the US Department of Defense to begin to inter Network computers by enabling them to exchange data using what's now known as packets packets of information back and forth wasn't too long before East Coast was eventually connected through MIT Harvard and others and nowadays fast forward to present day just a few decades later everything it would seem is somehow interconnected either with wires or wirelessly but how do you actually get data from any of these points to any of these other points or all of the points that now EX well let me stipulate for today's purposes that the world nowadays is filled with routers simply computers servers whose purpose in life is to Route information from left to right top to bottom geographically so to speak to just get data from point A to point B but typically you're not going to have a direct connection between point A and B you might have c d e in other words you might have many different servers between you and someone else so if you have a friend at Stanford University and you simply send them an email well odds are that email is going to be put inside what we're soon going to call a packet and that packet might actually pass through the hands so to speak of uh any number of routers typically more than one or two but typically fewer than 30 such routers and it's up to the in uh the it administrators of the world to figure out how to route data between these servers and we have software nowadays that dynamically figures out the best path it's not necessarily a straight line as it might be in the world of mathematics but hopefully it's the fastest way to get data from point A to point B so the teaching fellows thanks to zoom kindly put together in years past a demonstration of this whereby each of the teaching fellows or Tas that you see on the screen here consider representing a router that is a device on the internet its P purpose in life is to get data north south east or west between two points ultimately and if we assume that Phyllis for instance wants to send a packet of information to Brian up here at top left from bottom right it turns out that by Design the internet can send that data over any number of routes it can go up and to the left it can go left and then up it can double back a little bit again it's not necessarily a straight line and this is a feature not a bug the intent of the internet early on was to be able to Route Around uh down servers so if one router is overwhelmed or if one router is offline the internet can still adapt dynamically and just route it some other direction so here for instance is one representative route that our packets might take thanks to the team [Music] [Applause] [Music] [Music] so my thanks to the team and if you've never if you've ever used Zoom before you know you don't often see exactly the same layout that someone else sees so it took us forever to actually get that right because no one actually knew to whom they were necessarily passing it but if all of those TFS and T represent routers well what is it they were handing what is it that Phyllis wanted to send to Brian well I've called it generically a packet and a packet is like a generic term for some amount of information but it's kind of analogous to an envelope in the real world if you're still in the habit of sending letters or Postal mail you typically put your information inside of an envelope such as this and then you hand it off to the mail carrier or you drop it into the mailbox and then humans in the case of the Postal Service actually get it from point A to point B but odds are goes through different cities different countries even so you can think of that as roughly analogous to these things called routers but the technical term for what it is the TFS were just doing is they were implementing a protocol that we know as tcp/ip and this is actually probably a pair of acronyms that you've probably seen maybe on your Mac PC or phone even if even if you haven't really thought much about it but this is is actually a pair of protocols two protocols that the internet generally uses nowadays and has for some time to get data from point A to point B and let's consider each of these halves so you have a sense of what it is the internet is doing when you do send an email or do anything else well first IP stands for Internet Protocol and you've probably even heard this in popular media since a lot of humans are indeed familiar with uh this notion of Ip and they associate it typically with IP addresses as you might so I'll stipulate for today that every computer every internetwork device in the world has an IP address an Internet Protocol address similar in spirit to like buildings in the physical world here we are at 45 Quincy Street Cambridge Massachusetts USA uh 02138 USA like that is a unique string theoretically that uniquely identifies this building similarly in the world of computers we use a simpler mechanism just numbers of this format that uniquely represent computers now that's a bit of a white lie because there's actually way to share IP addresses and within your home often within your dorm or your apartment you'll actually have what appears to be the same IP address as your roommates or family members but for now let's keep things simple and assume that every Mac PC and phone in the world has a unique IP address that's formatted like this number. number. number. number each of these number signs represents a value between Zer and 255 and even though we haven't played around with this kind of arithmetic in some time if each of of these placeholders is 0 through 255 how many bits are being used to represent each number think back to like week zero week one yeah so eight in fact eight bits in total or one bite so IP addresses are generally four byes or 32 bits and the other math we kept doing early on is if you've got four bytes or 32 bits that's a maximum of two to the 302 power total number of values how many IP addresses can you have it would seem maximally in the world enough actually not enough would be a better answer nowadays but roughly 4 billion was the rough math that we typically did anytime two to the 32 was involved but it turns out with all of the humans and all of the devices servers clients PCS Macs phones and everything else Internet of Things devices nowadays even four billion not quite enough so the world is gradually in the process of transitioning what from this format which is technically ipv4 version 4 to IPv6 and in the world of IPv6 we've actually bumped things up from 32 bits to 128 bits which is a crazy number of possible permutations two to the 128 so you'll gradually see that over time but those are a lot uh uh Messier of a format because they're so much larger so we'll use the more commonplace ones ipv4 now just to get into the weeds briefly this is some asy art that is someone wrote this up decades ago in a text file to represent the layout of of one of these packets so think of this as like the digital representation of this here envelope and even though we won't get into the weeds of what this represents up here you just have some value saying that this is bite zero this is bite 10 this is bite 20 and this is bite 32 but zero indexed so that is to say that this is just kind of an artist's rendition of a grid of uh bits top to bottom left to right and what's going to be in interesting for us today is not most of these fields there's a whole bunch of information that's capsulated inside of any one of these packets but we'll focus initially on these two Source address and destination address maybe the most important thing IP does is it standardizes how you what you put so to speak on the outside of these envelopes it says that every computer is going to have a unique address of that form something do something do something do something and so just like in the real world if I want to send this packet from Phyllis to bran and suppose that Brian's IP address is a number like very simply 1.2 3.4 what Phyllis would do is put that IP address in the middle of this envelope just like you would address a letter in the real world but so that Brian could reply to her if only to confirm receipt she's also going to put in the top left of this envelope virtually her own IP address which for the sake of discussion is maybe 5. 6.7.8 in practice they won't be as pretty as that but it's the general idea so you have a source address uh from which it's coming and a destination address to which it's going and that's what IP does it sort of standardizes in addition to a bunch of other numbers and values that need to be in this envelope too it really just mandates that computers on the internet and minimally provide a source address and a destination address so that the envelope can get from point A to point B but that's not quite enough because it turns out and if you saw the bloopers from the tf's uh Zoom session there you would see that it's very common not only for humans to physically drop an envelope like that and frankly even in the real world for M male Carri to like lose mail occasionally undelivered to uh recipients and so it turns out that IP alone is not enough to guarantee delivery because sometimes the packet just might not get to its destination more technically that might happen because like the router is overwhelmed right like it only has so much memory it only has so fast a CPU and if it's receiving way too many packets CU so many people are on the internet at some moment in time well it might just kind of get overwhelmed and uh metaphorically drop certain packets in the sense that there's just not enough room in its memory to keep up with the traffic so the effect for the sender is that the packet just doesn't get through and so there's this other protocol TCP that humans typically use in conjunction with IP via their Max PES and phones that does a couple of other things for us one it guarantees delivery or really guarantees delivery and it does that actually by doing this it does that by having Phyllis right on the out outside of the envelope not just the source address and destination address but also what we'll call a sequence number so for instance this would be packet one of two that she might be sending to Brian so maybe in like the memo field she could write one of two and then if she happens to send a second packet to Brian she might write similarly a source address and destination address but she might write two out of two because now logically if Brian only gets one of these like that sequence number is enough information for him to know wait a minute I need to ask phy to resend number one or maybe resend number two if both of them don't get through I mean honestly that's probably when Phyllis hits reload or resends the email but in general these sequence numbers help with guaranteeing delivery but if Phyllis and Brian are each representing computers in the story they can be doing different things they can be doing email chat video conferencing direct messaging or any number of services on the internet nowadays so TCP gives us one other feature namely port numbers because when Brian receives that envelope Assuming he's indeed a computer how does he know that what's inside of that envelope is indeed an email versus a direct message versus like a little bit of video versus sound versus any other type of media ideally the outside of the envelope would have a bit of a clue for him that indicates this is the type of data here in or more specifically this is the program really that should open this envelope the email program the video conferencing program or whatever else so what Brian would what Phyllis would typically do on the outside of this envelope lastly in addition to the uh Source address destination address and the memo field the sequence number she would also write a port number and it turns out two of the most common port numbers in the world of TCP are these two 80 which represents the web that is to say something called HTTP more on that today or https which most everyone nowadays probably knows means secure so it's some kind of secure version of HTTP and that number happens to be 443 there's no mathematical significance of these they're just kind of arbitrary but humans decades ago decided to standardize on these numbers so what it means for Phyllis is that on the outside of her envelope she should generally put a colon after the destination address and then the number of the port that she wants to receive this packet so if she's actually not sending an email but maybe making a web request and Brian is a web server and Phyllis is a web browser she would write colon 80 or if she's using https securely we would change that 80 to a 443 there's other stuff on the outside of that envelope in fact just like with IP there might be fields that look like this but just to give you a sense of this which is a TCP packet you'll see that indeed sequence numbers are actually really big they use all 32 bits of this part of the picture which is to say that generally computers are sending way more than one packet or two they might be sending dozens hundreds thousands even to depending on the size of the data in question and there's some other features therein including Source port and destination Port destination Port is the 80 or the 443 that I mentioned earlier but long story short Phyllis also gets to pick a source port to uniquely identify this particular request but more on that another time for now just know that TCP is the pair of protocols that the internet uses to get data from point A to point B IP standardizes how the addresses work and TCP guarantees delivery with those sequence numbers and also helps the servers like do more than one thing helps the multiplex so to speak among email Web video conferencing by using those port numbers so at the end of the day everything even now weeks into the class it all boils down somehow to zeros and ones or in turn numbers as we might think of them in this case questions on any of these building blocks thus far questions on any of these no all right well on the outside of this envelope are just some arbitrary numbers 1 2 3 4 5 six 7A that's obviously not what you and I are in their habit of typing when we actually visit like websites for instance you and I are generally in the habit of typing harvard.edu or yale.edu or google.com or the like otherwise known as domain names but your Mac your PC has to at the end of the day address those virtual envelopes AKA packets with actual IP addresses like there is no room for Words letters of the English alphabet in those pictures that we showed on the screen it's just 32 bits here 32 bits here so it turns out on the internet there's another type of server that unlike routers which route information from point A to point B there's another type of server that are all over the place frankly in your home uh on campus in a company on the internet more more broadly known as DNS servers domain name system servers so what do these things do this is just a type of server on the internet whose purpose in life is to answer questions of the form what is the IP address for this domain name so for instance if you do pull up your browser on your Mac your PC or your phone you type in harvard.edu and hit enter what your device is designed to do is to ask some local DNS server on campus on your mobile carriers Network on your apartment or dorms Network what is the IP address of harvard.edu or yale.edu whatever you actually typed in hopefully there is a nearby DNS server that will respond with a numeric address of the form something do something do something do something and that's the number that your computer your device will actually use on the outside of that virtual envelope so you can kind of think as DNS servers honestly is fitting the model that we keep coming back to this notion of a dictionary or a hashtable more specifically whereby inside of a DNS server is essentially a a dictionary a two column spreadsheet or database table if you will and in one column are domain names harvard.edu yale.edu google.com on the right hand side right hand column are just the corresponding IP addresses and that's it to be technical if they're not generally called just domain names technically it's a fully qualified domain name more on that another time but domain names as we know them generally have different parts and we'll soon see how to tease them apart beyond the usual questions though on what DNS server's purpose in life is or how this might work no all right so like how does your Mac how does your PC how does your phone know what these IP addresses are well they don't come from the manufacturer this way and there's this whole hierarchy in the world of DNS servers such that your phone your Mac your PC will generally ask the nearest DNS server which is usually owned by uh your internet service provider at home in your apartment or by your University or by your company but it's a hierarchical system and it's kind of a recursive design in that if that local DNS server does not have the answer it's going to ask someone bigger more important than it if that one doesn't know it might ask someone again recursively for it and throughout the world there's a finite number of what are called root servers that essentially know about all the Dooms in the world all of the edus in the world all of the do whatever is in the world and so someone at the end of the day knows about those systems and in fact if you've ever bought or in the future might buy a domain name part of that process is paying someone to associate an IP address for you with the actual server that you're going to actually be using so your final projects for instance in cs50 it's sometimes common for folks to actually buy for personal use their own domain name for few dollars a year typically so you're sort of renting it more than you're buying it but among the steps you'll go through if you ever do that is to essentially inform the world what will be the IP address or IP addresses of your particular domain name that you've bought for say that calendar year all right so how does all this get started well back in the day when you arrived on Camp campus here at Yale anyone or in the world you would actually configure your Mac or PC to know the IP addresses of your nearest router of your nearest DNS server so literally like someone would come to your home back in the day when signing up for Internet service and configure your Mac or PC for you of course nowadays I don't remember anyone really touching my computer recently to configure it for me it all seems to happen automatically and indeed there's this other type of server now in the world another solution to a uh human-made problem known as hcp and I think this is among the remaining acronyms for today Dynamic host configuration protocol it's not that intellectually interesting to memorize that but what DHCP servers do is answer questions of the form what should be my DNS server and router quote unquote so nowadays when you turn on your phone in the morning if it's uh if you actually powered it off if you open your laptop lid for the first day of classes or the like your Mac your PC your phone is ESS broadcasting a hello world message unbeknownst to you that's just asking the local network hey what IP address should I use for my DNS server and for my router and hopefully Harvard or Yale or your apartment or your home more generally has a DHCP server nearby whose purpose in life is just to hand out answers to that question and what these DHCP servers also do is they tell your Mac your PC your phone what IP address your device should use because that too is no longer manually configured so this all just nowadays happens automatically and on the case of a campus like this or at Yale it's because at the very beginning of your visit to campus you did register somehow you probably logged in You author you authenticated against your Harvard account or your Yale account and that is what uh enabled the DHCP server henceforth and forever to recognize your particular computer and answer those questions for you all right so that's it for how the internet works at least so far as we are concerned today we're going to now start building on top of it and undoubtedly the most popular form of the internet nowadays is something called HTTP that is the worldwide web though most people don't really say it that uh in long form anymore but HTTP is just another protocol that governs how web browsers and how web servers speak just like IP is a protocol that governs how computers address each other on the internet and how TCP governs how computers keep track of of sequences of packets from point A to point B and also Multiplex among different services using those port numbers and to be clear what's a protocol well you know in the in the human world it's very common protocol and I can't quite reach any of you but if I were to reach over and say hi nice to meet you you presumably if we weren't 5et apart would extend your hand we would sort of acknowledge in this strange cultural convention but that's a protocol I know how to do it you know how to do it I'm initiating you're responding and that's exactly what's happening all the time on the internet you have a client like me and in this case that's initiating a request you have a server like you in this case that's responding to that request or uh analogously like if you're in a a restaurant you might be the client sitting down at the table you want to order food and there's a server that serves you that food after you have requested it so computers really on the internet are implementing that same Paradigm so when it comes very specifically to the web which is different of course from email and video conferencing and all these other services on the internet the worldwide web uses this protocol HTTP which standardizes what goes inside of those envelopes in order to allow a web browser to request and receive information from a web server so we've talked about really the lower level details up into n d now the outside of the envelope let's now look inside of the envelope when it comes to actual web pages that you might visit or soon today you yourselves might design so HTTP stands for hypertext transfer protocol which is another mouthful that again just standardizes how we're going to get web traffic from point A to point B from browser to server and back um https is literally the secure version of that and what that means for today's purposes is that the the connection is somehow encrypted scrambled using very fancy mathematics so that it is very very very unlikely that anyone who intercepts your traffic your packets between point a and point B will have any idea what is inside of those envelopes they might intercept the packet itself digitally they might try to open it up but it's going to look like metaphorically like random zeros and ones on the inside when using https because of what's called encryption but let's look at some some canonical URLs like all of us are in their habit of seeing these and typing these all the time well let's actually tease apart some of the jargon here so here is an example URL with all of the usual components so uh here for instance with the yellow slash this generally means even though you rarely type it and you rarely see it nowadays this means the default we uh the default page for the website give me the the root of the website so to speak so this is to say this represents a folder like the default folder inside of which is presumably the default web page and we'll see what that means more concretely in just a bit if though you're visiting a more specific URL we're going to henceforth call this a path so slash something is representative of a path maybe a file maybe a folder just like in the world of Max PCS and Cloud Services specifically you might sometimes be in the habit of visiting an actual file something called like/ file. HTML nowadays this is kind of very 90s early 2000s nowadays most web servers hide the file extension the HTML even if it's there on the server it just looks a little messy nowadays it sort of reveals information that's not necessary so very often you won't see HTML even if there is actually a file ending in that suffix you might instead see Slash folder with a slash maybe not a slash maybe a slash but that generally represents a folder on the server and sometimes there are of course files in folder so all of the stuff you're probably familiar with on Macs and PCs and even Google Drive and the like those same semantics exist in the context of URL so there's a mapping between this URL and something on a hard drive somewhere on some server all right what about the other parts so this is the fully qualified domain name so the full domain name even though you and I when we say domain name we typically just mean this example.com for instance so technically the www is what we would typically call a host name a host name is like the name of a specific server that lives somewhere in that domain and this is just a human convention even though most URLs still probably start with www. something that's not strictly required that's just a configuration detail and historically this was just a kind of signal to less technical people in particular when you would see a URL in print that oh this is a web address this is an address on that new worldwide web www just kind of canotes that but decreasingly do you see websites using this I mean some of cs50's own tool it's just cs50. deev it's just cs50. because most of us are now conditioned to know that oh okay that's probably a URL even though there's no explicit www and in fact even if you type the www using tricks that we'll soon see you can redirect the user from one to another essentially remove the WW or add it to the server uh to the address bar in that their browser this thing here is called the top level domain and many of the domain names that you and I are in the habit certainly in the US nowadays are end in.com which stands for commercial. edu stands for educational. goov stands for US Government but of course there's hundreds of country codes too that by convention or two letters so UK for the United Kingdom JP for Japan and two characters for every other country in the world but even those have kind of been used in in clever ways sotv for instance is actually a country code that's been used by a lot of the English-speaking world to represent television for TV shows and the like um a similarly does not actually mean artificial intelligence it's a two character country code that has been used by the world nowadays to represent AI ly for bitly and cs50. L2 that's a country code that has been uh that allows people like us to essentially buy domain names in that subdomain but long story short back in the day there only used to be a few of these top level domains now there are hundreds of them so I do think over time it's going to become uh a lot less regimented as it seems to be now as to what URLs actually look like lastly uh Beyond uh the colon SL SL here is the scheme or the protocol and this just means that this URL is going to be securely accessing the server to the https instead of HTTP mouthful but just to get some vocabulary out there questions on these here URLs that we've probably been taking for granted for years who approves really good question who approves edu so you have to be an accredited uh educational institution to use edu I don't recall the name of the organization that does this but it can't be anyone on the internet you actually have to apply and be a seemingly legitimate educational institution um that is not true of a lot of domain names like anyone can buy a com anyone can buy a.org a net not a.gov for instance and then different countries might have their own policies over who can be in what domain or subdomain as well all right so now that we have URLs so defined there's a couple of verbs with which to be familiar in the context of the web namely get and post and that is to say there's two different ways to request information from a server that is there's two different ways to format request that go inside of this envelope and the default dare say and the most common one is just what's called get like literally the verb the English verb get and we'll see in a moment what this means exactly concretely but just know that there's an alternative that we'll play with over time known as post and whereas get as the noun as the verb suggests is all about just getting information post as the verb kind of suggest is more about sending information so post is used when you submit a credit card because you're sort of sending sens potentially sensitive information post is used when you upload like an image to a website or the like but get is used when you're just clicking on links and visiting web pages and not really pushing any information to the server so for today we'll focus primarily on get so what does this mean inside of this envelope probably unbeknownst to you up until now is are messages that look like this these are HTTP messages that are being put automatically in these virtual envelop for you by your Mac your PC for your phone so for instance if you were to visit https col www.harvard.edu you would hit enter what your Mac PC or phone is going to do is put a textual message that looks literally like this inside of a virtual envelope address it on the outside to the appropriate IP address for harvard.edu using your own IP address as the source address and then hand it off to some nearest router but inside of this envelope is enough information to the server to know what it is you want so for instance get is the verb so you just want to get some information the information you want to get is slash which I defined earlier is just the default page on the website http/2 just means what version of HTTP we're talking about you'll see nowadays in the wild 1.1 you'll see two you'll start to see version three over time but I'll use two for all of my examples here and you'll see inside of this envelope too what we're going to start calling an HTTP header a single line of text that literally tells the server like what fully qualified domain name it's looking for and this is important only in so far as nowadays generally on sing on a server you might have multiple websites being hosted this is not going to be true probably of Google or of Microsoft or meta or massive companies like that but it's definitely going to be true of smaller Enterprises even places like Harvard that don't need thousands of web servers but maybe just a couple or maybe just a few so in this case this ensures that when the server received this packet it knows to serve up harbor. edu and not yale.edu or some other website that by coincidence might just be hosted on the same server because both Harvard and Yale are maybe paying the same cloud provider to host their websites so dot dot dot just means there's other HTTP headers but notice the colon here is just giving us yet another one of those key value pairs the key is host the value is www.h harbor. edu there again are those dictionaries um that I claimed we would continue to see all over the place what then comes back from the server if this is what's inside the message from browser to server what does the server send back ideally the server sends back a message that looks like this an acknowledgement of what version is being used a status code which is going to be an Arcane looking number like 200 it's going to then have another HTTP header of its own saying what type of content is in this envelope ideally something called text HTML that is hypertext markup language which we're about to see and then some other stuff that's what's coming back from the server to the browser and we can actually now see this let me actually go over to VSS code here let me maximize my terminal window just so we can see more at once and let me go ahead and type in this command curl - capital I https www.harvard.edu so a complete URL that's secure that's got the uh the host name of www and curl just means connect to a URL it's a command line program that comes with Linux comes with Mac OS Windows you might have to install it individually and it just lets me simulate being a browser it's going to let me simulate sending a packet like this without caring what the website actually looks like so no pictures no no images no text no nothing just what's inside of the envelope in terms of the server's response and here's mostly dot dot dot the Ellipsis I waved my hand at earlier there's a lot of these key value pairs but if I scroll up to the top you'll see that 200 is the status code that came back and you'll see that the content type is indeed text/html and there's a whole lot of other stuff here clearly a lot of this is diagnostic it reveals information about the server that might be useful generally to more technical people than me at this point in the conversation or maybe my Mac or my PC or my phone for now we can focus really on just the essence of this response which is this here but here's where even these Arcane numbers might start to get a little more familiar in fact um suppose that um I want to see this in my browser actually let me do this let me go back to vs code here let me open up incognito mode here which generally is to give you private browsing so to speak and we'll talk more about this next week and that in incognito mode or private mode you have no history you have no cookies you have no sessions terms will Define next week I'm going to use it again and again today to make sure that my browser is essentially starting uh from scratch freshly so that I don't have anything in my history from previous examples and what I'm going to do actually first is open up via my browsers menu so-called developer tools these are going to look a little different in Chrome versus Edge versus Firefox versus Safari versus other browsers as well but almost any modern browser whatever your favorite is nowadays has built into it developer tools and you might have to click a different button to access it but these are tools for developers like web developers that want to not just use the browser to go places but use the browser to develop their own websites and web applications now there's a whole bunch of tabs here and I'm going to focus on the network tab initially essentially this is like diagnostic information kind of like debug 50 like a debugger but it's specific to the web and the web browser here so with my developer tools open and with the network tab open I'm going to go up to the URL bar and type in HTTPS col www.harvard.edu so the exact same thing that I typed in curl a moment ago in my terminal I'm just typing in my browser like I would normally do and if I hit enter what's interesting about developer tools and let me go ahead and drag them to the top and maximize the window is you see all of the HTTP requests all of the virtual envelopes that just went instantaneously it would seem back and forth between my Mac here and Harvard's own web server and notice it's way more than a single envelope it's way more than a single request why for now assume that each of those rows of output represents maybe a sound that was downloaded a video an image some text there's all sorts of media in web pages nowadays and they might actually be spread across multiple files browsers are designed if you will to recursively get all of the media for a single web page and download it automatically with we humans only typing the URL itself once but watch this at the very top of this output I scrolled all the way to the top of my network tab I'll see a request a row that represents my original request reest for the website and if I zoom in here we'll see that 200 means apparently okay so all is well here's the content of the website but there's a lot in fact if I look at the very bottom of the window harvard.edu is composed of 91 separate files it would seem and that's just the landing page itself not to mention everything else we might click on ultimately but 200 okay is a good thing and odds are you've never actually seen that because it's indeed okay so let's consider actually what else could uh happen when you make these requests well here for instance is a shorter request suppose that I omit the www just because it's faster to type and honestly you and I are almost always nowadays I bet in the habit of just typing something.com or something. edu we don't bother typing the https the so-called scheme or protocol we probably don't bother typing the www you can probably think of someone in your life who's very like pedantic like that typing it out and it's full but you don't need to do that typically for a couple of reasons if I in fact go back to VSS code here let me use Curl again to connect to another URL that's similar https colh harvard.edu now notice before I went to www and that's indeed Harvard's preferred URL if you will but harvard.edu will still work but watch what happens when I hit enter I'm going to get back the contents of the virtual envelope that Harvard just sent back to me but it's not okay it's not 200 anymore it's actually this number here 301 which actually means something specific 301 actually means that Harvard's website moved permanently so to speak in other words Harvard Gale any server can configure itself to redirect the user to another place if they'd prefer to canonicalize on some other URL so by default for Branding purposes most websites still probably use www. something. something so Harvard is in fact doing this and for reasons we'll talk about next week There's technical motivations to do so related to something called cookies and sessions but for now that just seems to be a um a different status code but if I now open up another browser window and I'll do this again in uh let's say I'll do this again in how about uh incognito mode just to start fresh with a brand new window let me open my developer tools again let me go to the URL bar and only type https harvard.edu enter I'm still in my network tab here and if I scroll to the very top of this notice ah the Top Road looks a little different now it's not 200 anymore and I can click on that here and what I'm now seeing in yellow is that 301 AKA moved permanently so this is to say you've been able to do this all this time in your browser if you care to you can see what's going on underneath the hood if you will check that off I think underneath the hood so as to just understand what's going on now for users this is not that useful or intellectually interesting but for developers this can be very useful for understanding things and also diagnosing problems ultimately so that's just a few of the a couple of the status codes that can come back not just 200 but perhaps 301 there's also this one now with which humans generally are familiar 404 well it turns out 404 is what happens when a file is not found so I can simulate that here let me go back to vs code in my terminal window let me do curl - capital I httpswww cuz Harvard prefers that harvard.edu like let's see if there's a page about cats within Harvard's website I'm pretty sure there's not and so indeed when I hit enter whole lot of output a lot of HTTP headers but notice at the top 404 it's file not found now what you see in the browser is going to completely depend on the website some websites just display like an error message or a status code number and that's why you and I have seen probably in the world 404 messages sometimes they're much more userfriendly sometimes they're links back to the homepage to help you out entirely up to the server but that status code indicates that something has gone wrong and in fact there's a whole bunch of these status codes some of which you'll now start to see in the class 200's okay and it's a good thing if you never see that because it means everything's working 404 is not found 301 is moved permanently any of these that start with three relate to redirects long story short there's different ways to redirect the user from one place to another as we'll see as we saw from that location header a moment ago 400s are generally bad means that the user the the browser somehow did something wrong like 403 Forbidden probably means you're not logged in um 5 500 you're going to start doing next week most likely 500 is like the Segal of the web if you will so there's no pointers or anything like that but 500 means that you wrote some buggy code AS invariably we all will next week um 418 is an April Fool's joke from years ago um some servers honor this but someone brought up literally this long technical document proposing a response that says I'm a teapot for a server even though it was just a joke on April 1st some years ago so sort of geek humor if you will so those are then the status codes that are available to us um let me show you one other has anyone been to this URL here so you have all right so without spoiling here let me actually well let me go into incognito mode here someone's pulling it up on their phone clearly safety School .org SL enter oh my goodness another box gets crossed out today too I think so how is that working well if we actually diagnose this with curl let me go into vs code kl- capital I HTTP and it doesn't support https because this is an old website cols safetyschool.org enter all this server does is return an HTTP 301 response with a location that literally refers us back to y edu and this is amazing someone has been paying for this domain name for decades um and all it does is literally this now um I know for the our friends at Yale who are watching this it's not quite fair to uh poke fun turns out Yale got us even better so later today we'll we'll turn the tables a little bit all right so let's go ahead and take a look now at what it is that composes this web page when it is indeed 200 okay let's introduce another language here or an actual language called HTML which is not a programming language but is a markup language which is to say it's all about Aesthetics like mocking up a web page so that you can see the information you care about but HTML is not going to have functions and loops and conditionals and all of that stuff we talked about in week zero it's just about presenting information so here are some of the building blocks of HTML you're about to see really only two vocabulary words HTML honestly is the kind of language that like you learn in like 30 minutes and then you're just often running with online tutorials documentation and the like I still remember years ago just learning it from um a teaching fellow who kind of gave me a crash course and then you kind of fill in the Gap the blanks yourself because it has relatively few Concepts associated with it even though it in fairness it can take years to get good at making pretty websites um today we can get good very quickly at making functional websites so that artistic disclaimer so in the world of HTML there's really two concepts tags and attributes and those of you who have played with websites growing up might be familiar with some of these already so here is some sample HTML HTML is just a text-based language you type it out with your keyboard again it's not a programming language so you can't call functions or write logic but you can mock up a web page and this web page for instance is quite simply going to say hello title in its title bar or the tab and in the body of it the big white box it's going to say hello comma body just to distill this really into its Essence before we make more interesting pages so what's going on in this HTML um is uh enough detail that the server can display the information for it so in fact let me go ahead and reveal this as follows I'm going to go over to uh VSS code here I'm going to create a new file here called for instance let's just call it hello.html and I'm going to really quickly whip up that same web page from memory so doc type HTML HTML Lang equals quote unquote en uh close bracket open head open title hello comma title and then down here open body and you'll notice I'm actually not quite as fast as I might seem to be vs code is configured to automatically finish half of my thought for me so when I open one of these things that we're going about to call tags vs code is doing some of the heavy lifting for me and in here I'm going to do hello comma body but I think this is the entirety of the file that I just proposed in the slide version thereof so this is clearly now a text file in my Cod space within vs code how do I actually view it with a web browser so if this file were created on my Mac or PC I could literally just double click it and Chrome or my default browser would open up and show me this web page but this file technically is not on my Mac or PC it's in the cloud it's in your code space so all that we need to do is actually turn on a web server to serve this file to me or to anyone else in the world in fact and the command we're going to run now is literally called http-server This is a piece of software that someone else wrote that we pre-installed in everyone's code space and by running this it starts a server whose purpose in life is to listen for HTTP requests and as soon as it receives one from a browser be it mine or anyone else's it will respond with the contents of that file so let me go into VSS code here let me reopen my terminal window and I'm going to go ahead and literally run HTTP d server enter and now you'll see a whole bunch of output most of which isn't gerain to our discussion yet but here is this URL here and if I hover over it I'll see a little open URL uh popup that I can click on or on my Mac I can command click on the URL itself or uh and that will open up in a new tab this folder so this is going to look a little esoteric at first glance but this is what's called a directory listing like it's just literally the contents of the folder folder that I'm in so I'm in my codespaces default folder I deleted everything from last week and weeks prior your folder will of course have many other things that you've created and kept I have a source a directory that I downloaded in advance because it's got all of today's examples made in advance but there's the file I just created and there's some other information here like the date and time at which I created this file and so forth but you'll see that this is just a web page that lives at this URL here and this is actually somewhat specific to code spaces the the infrastructure we're using but if I zoom in up here you'll see that I am effectively running my own web server at this weird looking URL that GitHub dynamically generated for us for me and you'll have a different unique one as well you'll see that baked into this URL is actually a port number and they're doing some trickery normally I would have to acce