CS50 2021 - Lecture 8 - HTML, CSS, JavaScript

all right this is cs50 and this is already week eight and if we think back to like the past several weeks now recall that things started pretty interestingly pretty interactively in like week zero when we were using scratch because with scratch we had a gui a graphical user interface so even as we explored variables and loops and conditionals and all of that you had kind of a fun environment in which to express those ideas and then in week one we sort of took a lot of that away when we introduced c and a terminal window and a command line because now all of your programs became very textual uh very keyboard based and gone was the mouse the animations the menus and so forth and so now fast forward to week 8 we're going to bring those kinds of user interface ui elements back in the form of web programming and this goes beyond just laying out websites this will to this week and next week combine elements of the backend server stuff that we've been doing for the past several weeks using python using sql and now introducing a couple of other languages on the so-called client side on your own mac your own pc your own phone that's going to talk to those back-end services so indeed at this end of cs50 does everything rather come together into a user interface that's just super familiar all of us are on our phones desktops laptops every day and increasingly even the mobile apps that you all are using are implemented not necessarily in languages like swift or java if you're familiar with those but with languages called html css and javascript which we'll focus on here today but before we do that let's kind of provide a foundation on which these apps can run because indeed we'll start to look underneath the hood of how the internet itself works albeit quickly so that we have kind of a mental model for where all of this code is running how you can troubleshoot issues and how really ultimately after cs50 you can learn by just poking around other actual websites so the internet we're all on it literally right now what is it in your own words what is the internet it's this utility nowadays that we all rather take for granted how would you describe it okay big storage and indeed that's how the cloud is described which is kind of an abstraction if you will for a whole lot of wires and cables and hardware and the internet other formulations of the term how else okay a bunch of data that we can all reach by way of being interconnected somehow with wires or wirelessly and so really the internet too is a hardware thing there's a whole lot of servers out there that are somehow interconnected via physical cables via internet service providers via wireless connectivity and the like and once you start to have networks of networks of networks you get the internet indeed harvard has its own network and yale has its own network and your own home probably has its own network but once you start connecting those networks do you get the interconnected network that is the internet as we now know it so there's this whole alphabet soup that goes with the internet some of whose acronyms and terms you've probably seen before but let's at least peel back some of those layers and consider what some of the building blocks are so here's a picture of the internet before it was known as the internet back in 1969 when it was something called arpanet from the advanced research projects agency and the intent originally was just to interconnect a few universities here in utah and california literally servers or computers on each of those in each of those areas somehow interconnected with wires so that people could start to share data a year later it expanded to include mit and harvard and others and now fast forward to today you have a huge number of systems around the world that are on the same network and in fact if i just pull up a web page here that's sort of constantly changing let me go ahead and bring up a visualization of the internet as it might now be today this here in the abstract depicts the entire world with all of these different interconnections wires typically going across the oceans like this and all of the blue lines and all the other colored lines represent well we're not gonna no more features today where all of these lines and interconnections represent just how interconnected the world is today and it just means that there's all the more servers all the more cabling all of the more hardware giving us this underlying infrastructure but if we focus really on just these nodes these individual dots whether back in 1970 or now in 2021 each of these dots you can think of is yes a server but a certain type of server namely known as a router and a router is the name implies just routes data left to right top to bottom from one point to another and so there's all these servers here on campus at harvard on yale's campus in comcast network verizon's network your own home network you have your own routers out there whose purpose in life is to take in data and then decide should i send it this way or this way or this way so to speak assuming there are multiple options with multiple cables you and your home probably have just one cable coming in or going out but certainly if you're a place like harvard or yale or comcast or the like there's probably a whole bunch of interconnect interconnections that the data can then travel across ultimately so how do we get data among these routers for instance if you want to send an email to someone at stanford in california from here on the east coast or if you want to visit www.stanford.edu how does your laptop your phone your desktop actually get data from point a to point b well essentially your laptop or phone knows when it boots up at the beginning of the day what the local router is what the address of that local router is so if you want to send an email from like my laptop over here my laptop's essentially going to hand it to the nearest harvard router and then from there i don't know i don't care how it gets the rest of the distance but hopefully within some small number of steps later harvard's router is going to send it to maybe boston's router is going to send it to california's router is going to send it to stanford's writer until finally it reaches stanford's email server and we can depict this actually how about a bit playfully thankfully the course's staff kindly volunteered to create a visualization for this using a familiar technology so here we have some of our tfs and tas and cas present and past let me go ahead and full screen this window here give me just a moment to pull it up on my screen here and we'll consider what happens if we want to send a packet of information from one person or router namely phyllis in this case in the bottom right hand corner up to brian in this case in the top left-hand corner so each of the staff members here represents exactly one of these routers on the internet [Music] [Applause] [Music] [Applause] uh [Music] [Applause] [Music] [Applause] the applause is appreciated it actually took us a significant number of attempts to get that ultimately right so when what was it the staff were all passing here well in that visualization they were just past saying oh here we are with uh autoplay on youtube here we have next here we have just physically what it was the staff were passing around so phyllis started with an envelope inside of which was that email presumably on the east coast and she wanted to send it to brian on the west coast top left-hand corner and so she had all of these different options different connections between her and point b namely brian she could go up down uh in her case and then each of those subsequent routers could go up down left or right until it finally reaches brian and long story short there's algorithms that figure out how you decide to send a packet up down left or right so to speak but they do so by taking an input and in the form of input is this envelope and there's at least a couple of things on the outside of this because all of these routers and in turn all of our macs and pcs and phones these days speak something called tcp ip a set of acronyms you've probably seen somewhere on your phone your mac or pc in print somewhere which refers to two protocols two conventions that computers use to intercommunicate these days now what's a protocol a protocol is like a set of rules that you behave in healthier times i might extend my hand and someone like carter might extend his hand thereby interacting with me based on a human protocol of like literally physically shaking hands nowadays we have mask protocols whereby what you need to do is wear a mask indoors but that too it's just a set of rules that we all follow and adhere to that somewhere standardized and documented so computers use protocols all the time to govern how they are sending information and receiving information in tcp and ip are two such protocols that standardize this as follows what tcpip tells someone like phyllis to do is if she wants to send an email to brian is put the animal in a virtual envelope so to speak but on the outside of that virtual envelope put brian's unique address and i'll describe this as destination on the middle of the envelope just like in our human world you would write the destination address on the envelope and then she's going to put her own source address in the top left hand corner just like you the sender would put your own source address in the human world but instead of these addresses being like something kirkland street cambridge massachusetts 02138 usa you probably know that computers on the internet have unique addresses of their own known as ip addresses and an ip address is just a numeric identifier on the internet that allows computers like phyllis and brian to address these envelopes to and from each other and you've probably seen the format at some point typically the format of ip addresses is something dot something dot something dot something each of those somethings represented here with a hash symbol is a number from 0 through 255 and based on that little hint if each of these hashes represents a number from 0 to 255 each of those hashes is represented with how many bytes or bits how many eight bits or one byte which is to say we can extrapolate from there an ip address must use 32 bits or four bytes if we rewind now to some of the primitives we looked at in week zero and what that means is at least at a glance it looks like we have four billion some odd ip addresses available to us now unfortunately there's a huge number of humans in the world these days all of whom have many of whom have multiple devices uh certainly in places like this where you have a laptop and a phone and you have other internet of things type devices all of which need to be addressed so there's another type of ip address that's starting to be used more commonly this is version 4 of ip there's also version 6 which instead of 32 bits uses 128 bit which gives us a crazy number of possible addresses for computers so we can at least handle all of the more the additional devices we now have today so this is to say what ultimately is going on this envelope is the destination address that is brian's ip address and the source address that is phyllis's ip address so that this packet can go from point a to point b and if need be back by just flipping the source and the destination but on the internet you presumably know that there's not just email servers there's web servers there's chat servers video servers game servers like there's all of these different functions on the internet nowadays and so when brian receives that envelope how does he know it's an email versus a web page versus a skype call versus something else altogether well it turns out that we can look at the other part of this acronym the tcp in tcpip and what tcp allows us to do for instance is specify a couple of things one the type of service whose data is in this envelope that is it does this video a numeric identifier and i'm going to go ahead and write down a colon and the word port p-o-r-t and i'm going to write that in the source address too colon and port so technically now what's on this envelope is not just the addresses but also a unique number that represents what kind of service has is being sent from point a to point b whether it's email or web traffic or skype or something else these numbers are standardized and here are just two of the most common ones not even the context of email but in the context of the web port 80 is typically used whenever an envelope contains a web page or a request therefore or the number 443 when that request is actually encrypted using that thing you probably know in urls known as https where the s literally means secure more on what the http means later if it's email the number might be 25 or 465 or 587 like these are the kinds of things you google if you ultimately care about but if you've ever had to configure like outlook or even gmail to talk to another account you might very well have seen these numbers by typing in something like smtp.js and then a number which is only to say these numbers are omnipresent but they're typically not things you and i have to care about because servers and computers nowadays automate much of this process but that's all it takes ultimately for phyllis to get this message to brian but what if it's a really big message if it's a short email it might fit perfectly in one single packet so to speak but suppose that phyllis wants to send brian a picture of a cat like this or worse a video of a cat it would be kind of inequitable if no one else could do anything on the internet just because phyllis wants to send brian a really big picture a really big video of a cat it would be nice if we could kind of time share the interconnections across these routers so that we can give a little bit of time to phyllis a little bit of time to someone else a little bit of time to someone else so that eventually phyllis's entire cat gets through the internet but in terms of uh in terms of fairness she doesn't monopolize the bandwidth of the network in question and this then allows us to do one other feature of tcpip which is fragmentation where we can temporarily and phyllis's computer would do this automatically fragment the big packet in question or the big file in question and then use not just a single envelope but maybe a second a third and a fourth or more if we do that though we're probably going to need one other piece of information just logically on these envelopes like if you were implementing this chopping up this picture of a cat into four parts like intuitively what might you want to put virtually on the outside of this envelope now yeah the order of them somehow so probably something like part one of four part two of four part three of four and so forth so i'm gonna write one more thing in like the memo line of the envelope here i put some kind of sequence number that's just a little bit of a clue to brian to know in what order to reassemble these things and even more powerfully than that this actually gives us this simple primitive of just using ins on these envelopes in these packets if brian receives envelopes like these with numbers like these in the memo field what other feature does tcp apparently enable brian and phyllis to implement this is a bit subtle but it's not just the ordering of the packets what else might be useful about putting numbers on these things might you think what might be useful here yeah back sorry a little letter if you missed something that was intended to be sent if i heard that correct so shorter answer exactly yes the tcp because of this simple little integer that we're including can quote unquote guarantee delivery why because if brian receives one out of four two out of four four out of four but not three out of four he now knows predictably that he needs to ask phyllis somehow to resend that packet and so this is why pretty much always if you receive an email you either receive the whole thing or nothing at all like sentences and words and paragraphs should never really be missing from an email or if you download a photograph on the web it shouldn't just have a blank hole in the middle just because that packet of information happened to be lost tcp if it is the protocol being used to transmit data from point a to point b ensures that it either all gets there or ultimately none of it at all so this is an important property but just as a teaser there's other protocols out there there's something called udp which is an alternative to tcp that doesn't guarantee delivery and just as a taste of why you might ever not want to guarantee delivery maybe you're watching like a streaming uh video like a sports event online you probably don't necessarily want the thing to buffer and buffer and buffer just because you have a slow connection because you're going to start to miss things and then you're going to be the only one in the world watching the game that ended 20 minutes ago when everyone else is sort of up to speed similarly for a voice call be really annoying if our voice is constantly buffered so udp might be a good protocol for making sure that even if the person on the other end sounds a little crappy at least you can hear them it's not pausing and rescinding and rescinding because that would really slow down that sort of human interaction so in short ip handles the addressing of these packets and standardizes numbers that every computer your own included gets and tcp handles the standardization of like what services can be used uh between points a and point b all right this is great but presumably when phyllis sends a message to brian like she doesn't really know and probably shouldn't care what his ip address is right these days it's like i don't know most of the phone numbers that my friends have i instead look them up in some way and indeed when you visit a website what do you type in it's typically not something.something.something.something where each of those somethings is a number what do you typically type into a browser so a domain name right something like stanford.edu harvard.edu yale.edu gmail.com or any other such domain name and so thankfully there's another system on the internet one more acronym for today called dns domain name system and pretty much every network on the internet harvard's yales comcast your own home network somewhere somehow has a dns server you probably didn't have to configure it yourself someone else did your campus your job your internet service provider but there's some server connected somehow to the network you're on via wires or wirelessly that just has a really big table in its memory a big spreadsheet if you will or if you prefer a hash table that has at least two columns of keys and values respectively where on the left hand side is what we'll call domain name something like harvard.edu yale.edu an ip address on the right hand side that is to say a dns server's purpose in life is just to translate domain names to ip addresses and vice versa if you want to go in the other direction and technically just to be precise it translates fully qualified domain names to ip addresses and we'll see what those are in just a moment but again all of this just kind of happens magically when you turn on your phone or your laptop today because all of these things are preconfigured for us nowadays so how can we actually start to see some of these things in action well let's go ahead and and poke around for instance at a couple of urls here let me see uh let me switch over here for a second and let me go ahead and propose that give me just one moment that we consider let me slide something around here give me a moment all right let's see what we can actually do now with these basic primitives if we now have the ability to move data from point a to point b and what can be in that envelope could be yes an email but today onward it's really going to be web content there's going to be content that you're requesting like give me today's home page and there's content you're sending which would be the contents of that actual home page and so just to go one level deeper now that we have these packets that are getting from point a to point b using tcp ip let's put something specific inside of them not just an email and a bunch of text but something called http which stands for hyper text transfer protocol you've seen this for decades now probably in the form of urls so much so that you probably don't even type it nowadays your browser just adds it for you automatically and you just type in harvard.edu or yale.edu or the like but http is just a final protocol that we'll talk about here that just standardizes how web browsers and web servers intercommunicate so this is a distinction now between the internet and the web the internet is really like the low-level plumbing all of the cables all of the technology that just moves packets from left to right right to left top to bottom that gets data from point a to point b you can do anything you want on top of that internet nowadays email and web and video and chat and gaming and all of that so http or the web is just one application that is conceptually on top of built on top of the internet once you take for granted that there is an internet you can do really interesting things with it just like in our physical world once you have electricity you can just assume you can do really interesting things with that too without even knowing or caring how it works but now that you'll be programming for the web it's useful to understand how some of these things indeed work so let's take a peek at the format of the things that go inside of these messages these days it's usually actually https that's in play where again the s just means secure more on that later but the http is what standardizes what kinds of messages go inside of these envelopes and wonderfully it's just textual information typically there's a simple text format that humans decided on years ago that goes inside of these envelopes that tells a browser how to request information from a server and how to respond from the server to that client with information so here's for instance a canonical url https colon slash www.example.com what might you see at the end of this you might sometimes see a slash browsers nowadays kind of simplify things and don't show it to you but slash as we'll see just represents like the default folder the root of the web server's hard drive like whatever the base is of it's like c colon backslash on windows or it's uh you know my computer on mac os but a url can have more than that it can have slash path where path is just a word or multiple words that sort of describe a longer part of the url that path could actually be a specific file we'll see like something called file.html more on html in just a bit or it can even be slash folder maybe with another slash or maybe it can be folder file.html now these days safari and even chrome to some extent and other browsers are in the habit of trying to hide more in these more and more of these details from you and i uh from you and me ultimately though we'll it'll be useful to understand what urls you're at because it maps directly to the code that we're ultimately going to write but this is only to say that all this stuff in yellow refers to presumably a specific file and or folder on the web server on which you're programming all right what's this example.com this is the domain name as we described it earlier example.com is the so-called domain name this whole thing www.example.com is the fully qualified domain name and what the ww is referring to is specifically the name of a specific server in that domain so back in the day there was a www.example.com web server there might have been a mail.example.com mail server there might have been a chat.example.com chat server nowadays this host name or subdomain depending on the context can actually refer to a whole bunch of servers right when you go to www.facebook that's not one server that's thousands of servers nowadays so long story short there's technology that somehow get your data to one of those servers but this whole thing is what we meant by fully qualified domain name this thing here host name in the context of an email address it might alternatively be called a subdomain this thing here top level domain probably know that com means commercial although anyone can buy it these days dot org is similar dot net some of them are a bit restricted dot mil is just for the usmilitary.edu is just for accredited educational institutions but there are hundreds if not more top level domains nowadays some more popular than others cs50s tools for instance use i cs50.io sort of connotes input output it actually is a belongs though to a small island nation a country whose country code is dot io and you see other two letter uh top level domains that are country-specific indeed something.uk something.jp and the like typically refer to countries but some of them have been rather co-opted.tv as well because they have these meanings in english as well lastly this is what we'll call the protocol that specifies how the server uses this url to get data from point a to point b so what is inside of this envelope let's now start poking around a little bit more what is inside of this envelope it's essentially for our purposes today one of two verbs either get or post and if any of you have dabbled with html or made your own website you might have seen some of these terms before but these two verbs describe just how to send information from you to the server long story short more on this next week get means put any user input in the url post means hide it so that things you're searching for credit card numbers you're typing in usernames and passwords you're inputting don't show up in the url and are therefore visible to anyone with access to your computer and your search history but rather they're somehow provided elsewhere deeper into that envelope but for now we'll focus almost entirely on get which is perhaps the most common one that we're always going to use and what we're going to do is this let me switch over just to a blank screen here and if we assume that little old me is this laptop here and i'm connected to the cloud and in that cloud is some server that i want to request the webpage of harvard.edu or yale.edu it's really going to be a two-step process there's going to be a request that goes from point a to point b and then hopefully the server that hears that request is going to reply with what we'll typically call a response and other terms that are relevant here is my laptop is the so-called client harvard.edu yale.edu whatever it is is the so-called server and just like in a restaurant where you might request something to eat the server might bring it to you it's again that kind of bi-directional relationship one request one response for each such web page we request all right so what's inside these envelopes and what do we actually see well this arrow this line i just drew from left to right representing the request technically looks a little more like this when you visit a web page using your browser on your phone laptop or desktop what's going inside that envelope and the textual message your mac or pc your phone is automatically generating looks a little something like this the verb get the url or rather the path that you want to get slash represents the default page on the website http slash 1.1 is just some mention of what version of http you're speaking now we're up to versions 2 and version 3. but 1.1 is quite common and the envelope contains some mention of the host that was typed in the fully qualified domain name this is because single servers can actually host many different websites if you're using squarespace or wix or one of these popular hosting websites nowadays you don't get your own personal server most likely you're on the same server as dozens hundreds of other customers but when your customers your users browsers include a little mention of your specific fully qualified domain name in the envelope squarespace and wix just know to send it to your webpage or my webpage or some other customer altogether dot dot dot there's some other stuff there but that's really the essence of what's in these respon requests hopefully then when your browser requests this web page from the server what comes back well hopefully a response that looks like this http slash 1.1 so the same version some status code like a number 200 and then literally a short phrase like okay which means exactly that like okay this request was satisfied then it contains some other information like the type of content that's coming back and we'll see that this too is standardized text html means here comes some html which is just a text language it could instead be image slash jpeg or image slash ping or video mp4 there are these different content types otherwise known as mime types that uniquely identify types of files that come back similar in spirit to file extensions but a little more standardized this way then there's more some more stuff dot dot but in general what you see here are our familiar pattern keys and values these keys and values are otherwise known as http headers and your browser has been sending these every time you visit a website and indeed we can see this right now ourselves let me go over in just a second to chrome on my computer though you can do this kind of thing with most any browser today let me go ahead and now open up chrome here and let me go ahead and do this i'll go ahead and visit http colon harvard.edu enter and voila i'm at harvard's homepage for today the content often changes but this is what it looks like right now well i typed in the url but notice it changed a little bit it actually sent me to https and it added the www even though i didn't type that but it turns out we can poke around at what my browser is actually doing let me open another page and i'm going to start to use incognito mode this time not because i care that people know i'm visiting harvard.edu but because it throws away any history that i just did so that every request is going to look like a brand new one and that's just useful diagnostically because we're always going to see fresh information my browser is not going to remember what i previously already requested but i'm going to go up to view developer developer tools which is something that all of you have if you use chrome and there's something analogous for firefox and edge and safari and other browsers developer tools is going to open up these tabs down here i don't really care what's new so i'm going to close the bottom thing there and i'm going to hover over the network tab for just a moment and now i'm going to go and say http colon harvard.edu so the shorter version i'm going to hit enter and a whole bunch of stuff just flew across the screen and it's still coming in and if i zoom in down here my god visiting harvard.edu still going is downloading what 17 18 19 megabytes 20 megabytes millions of bytes of information over 111 http requests in other words a bit of a simplification but my browser unbeknownst to me sent one envelope initially with the request then the server said okay by the way there's 110 other things you need 112 other things you need to get so my computer went back and forth requesting even more content for me why well inside of harvard's webpage is a whole bunch of images and maybe sound files and videos and other stuff that all need to be downloaded and to compose what is ultimately the web page but i don't care about like a hundred plus of these things let's focus on the very first one first the very first request i sent was up here and i'm gonna click on this row under the network tab and then i'm gonna see a bit of diagnostic information to an average person using the web they needn't care about this just as you probably didn't care about it until right now and even then perhaps not but if i scroll down to request headers you will see if i click view source literally everything that was in the request my mac just sent to harvard.edu two of the lines are familiar get slash http 1.1 host colon harvard.edu and then other stuff that for now it's not that interesting for us but let's look at the response that came back from the server i'm going to scroll up now and see response headers view source and this is interesting it is not okay there's no 200 there's no word okay curiously harvard.edu has moved permanently what does that mean well there's a whole bunch of stuff here that's not that interesting for us but this line location is interesting this is an http header a standardized key value pair that's part of the http protocol that is conventions and if i highlight just this one it's telling me harvard is not at https.edu harvard's website is now and perhaps forever at https colon www.harvard.edu so what's the value here probably someone at harvard wants you to use a secure connection so they redirected you from http to https maybe the marketing people want you to be at www instead of just harvard.edu just to standardize things but there are technical reasons to use a host name and not just the raw domain name and all this other stuff is sort of uninteresting for our purposes now because a browser that receives a 301 response knows by design by the definition of http to automatically redirect the user and that's why in my browser all of this happened in like a split second because i didn't really know or care about all of those headers but that's why and how i ended up at this url here my browser was told to go elsewhere via that new location and the browser just followed those breadcrumbs if you will at which point it downloaded all of the other images and files and so forth that compose this particular page well let me let me zoom out and let me actually go into vs code if only because it's a little more pleasant to do things in just a terminal window without actually using a full-fledged browser so now let's just use an equivalent program it's called curl for connecting to a url that's going to allow me to play with websites and just see those headers without bothering to download all the images and text and so forth from the website it's going to allow me to do something like this let me go ahead and run for instance curl dash i x get which is just the command line arguments that says simulate a get request textually as though you're a browser and let's go to http colon harvard.edu enter now by way of how curl works i'm just seeing the headers it didn't bother downloading the whole website and you see exactly the same thing 301 move permanently location is indeed this one here so that's kind of interesting but let's follow it manually now let's now do what it's telling me to do let's go to the location with https and the www and hit enter and now what's a good sign with this output most of it's irrelevant what looks good 200 okay that means i'm seeing presumably if i were using a real browser the actual content of the webpage looks like harvard's version of http is even newer than my the one i'm using it's using http version two which is fine but 200 is indeed indicative of things being okay well what if i try visiting some bogus url like harvard.edu when this file does not exist something completely random probably doesn't exist and hit enter what do you see now that's perhaps familiar in the real world yeah yeah error 404 all of us have seen this probably endlessly from time to time when you screw up by mistyping a url or someone deletes the webpage in question but all that is is a status code that a browser is being sent from the server that's a little clue as to what the actual problem is underneath the hood so instead of getting back for instance something like okay or move permanently what i've just gotten back quite simply is 404 not found well it turns out there's other types of status codes that you'll start to see over time as you start to program for the web 200 is okay 301 is moved permanently 302 304 307 are all similar in spirit they're related to redirecting the user from one place to another 401 403 uh unauthorized or forbidden if you ever mess up your password or you try visiting a url you're not supposed to look at you might see one of these codes indicating that you just don't have authorization for those 404 not found 418 i'm a teapot was a april fool's joke by the community tech community years ago 500 is bad and unfortunately all of you are probably on a path now to creating http 500 errors once next week we start writing code because all of us are going to screw up we're going to have typos logical errors and this is on the horizon just like seg faults were in the world of c but solvable with the right skills 503 service unavailable means maybe the server's overloaded or something like that and there's other codes there but those are perhaps some of the most common ones has anyone i can we can get away with this here less so in new haven has anyone ever visited safetyschool.org http colon safetyschool.org there we do this enter oh look at that where did we end up okay so so this has been like a joke for like 10 or 20 years someone out there has been paying for the domain name safetyschool.org just for this two second demonstration but we can now infer how did this work the person who bought that domain name and somehow configured dns to point to like their web server the ip address of their web server what is their web server presumably spitting out whenever a browser requests the page what status code perhaps well we can simulate this let me go over to vs code let me go back over here let me increase my terminal window let me do curl dash i x get http colon safetyschool.org enter and that's all this website does there's not even an actual website there no html no css languages we're about to see it literally just exists on the internet to do that redirect there in fairness there are others let me actually do another one here instead of safetyschool.org turns out someone some years ago bought harvardsucks.org enter and when we do this you'll see that oh i they don't need us to be secure but i do need the the www let's do this one enter oh that one is not found this demo actually worked for so many years but someone has stopped paying for the squarespace discount recently apparently so so fortunately we did save the youtube video to which this thing refers and so just to put this into context since it's been quite a few years harvard and yale of course have this long-standing rivalry uh there is this tradition of pranking each other and honestly hands down one of the best pranks ever done in this rivalry was by yale to harvard it's about a three minute retrospective it's one of the earliest videos i dare say on youtube so the quality is uh representative of that but let me go ahead and full screen my you my page here and what used to live at harvardsucks.org is this video here if we could dim the lights for about three minutes use lyfo.com to build a website it's free and easy [Music] [Applause] this is for you yale we love you yeah we're here [Applause] [Applause] what do you think of yale they don't think good we can't really fix it does everyone have it doesn't happen does everyone other stuff probably that it's gonna be legible it's very small uh what house is [Applause] all right [Applause] [Music] [Applause] oh [Applause] what do you think of the answer [Applause] oh there it goes again [Applause] [Applause] five all right so thanks to our friends at yale for that one um let's go ahead here and consider in just a moment what further is deeper down inside of the envelope because we now have the ability to get data from we oh okay oh youtube autoplay again gotta stop doing that let's consider for just a moment that let's consider for just a moment that we now have this ability to get data from point a to point b and we have the ability to specify in those envelopes what it is we want from the website we want to get the home page we want to get back the html but what is that html in fact we don't yet have the language with which the web pages themselves are written namely html and css but let's go ahead and take a five-minute break here and when we come back we'll learn those two languages all right we are back so we got three languages to look at today but two of them are not actually programming languages what makes something a programming language like c or python and sql is that there are these contracts by which you can express conditionals you might have variables you might have looping constructs you have the ability ultimately to express logic html and css aren't so much about logic as they are about structure and the aesthetics of a page and so we're going to create like the skeleton of a web page using this pair of languages html and css and then toward the end of it today we'll introduce an actual programming language that actually is pretty similar in spirit and syntactically to both c and python but that's going to allow us to make these web pages not just static things that you look at but interactive applications as well and then next week again in week nine will we reintroduce python and sql tie all of this together so you can actually have a browser or a phone talking to a back-end server and creating the experience that you and i now take for granted for most any app or website today well let's go ahead and do this let's quickly whip up something in this language called html i'm in vs code here i'm going to go ahead and create a file quite simply called hello.html the convention is typically to end your file names in html and i'm going to go ahead and bang this out real quick but then we'll more slowly step through what the constructs are here in so i'm going to say doc type html open bracket html and then notice i'm going to do open bracket slash html close bracket and i'm leveraging a feature of vs code and programming environments more generally to do a bit of autocomplete so you'll see that there's this symmetry to much of what i'm going to type but i'm not typing all of these things vs code is automatically generating the end of my thought for me if you if you will let me go ahead and say uh open the head tag open the title tag i'll say something cute like hello title and then down here i'm going to create the body of this web page and say something like hello body and let me specify at the very top that all of this is really in english lang equals en so at this moment i have a file in my vs code environment called hello.html vs code as we're using it of course is cloud-based we're using it in a browser even though you can also download it and run it on a mac and pc so we are kind of in this weird situation where i'm using the cloud to create a web page and i want that web page to also live in the cloud that is on the internet but the thing about vs code or really any website that you might use in a browser by default that website is using probably tcp port number 80 or tcp port number 443 which is http and https respectively but here i am sort of a programmer myself trying to create my own website on an existing website so it's a bit of a weird situation but that's okay because what's nice about tcp is that you and i can just pick port numbers to use and run our own web server on a web server that is we can control the environment entirely by just running our own web server via this command http dash server in my terminal window this is a command that we pre-installed in vs code here and you'll notice a pop-up just came up your application running on port 8080 is available that's a commonly used tcp port number when 80 is already used and 443 is already used you can run your own server on your own port 8080 in this case i've opened that tab in advance and if i go into another browser tab here let me reload this page here i've got a whole bunch of files visible here at once and actually let me cheat for just a second let me go ahead and clean this up real quick we'll hide this in just a moment let me go ahead and show you only what i wanted you to see here so when i open up this tab whoops when i open up this tab sorry let's do this again open in browser there we go so when i open up this tab here i see a so-called directory listing of the web server i'm running so i don't see any of my other files i don't see anything belonging to vs code itself i only see the file that i've created in my current directory called hello.html and so if i click on this file now i should see hello body i don't see the title but that's because the title of a web page nowadays is typically embedded in the tab and if i'm full screen in my browser there are no tabs so let me minimize the window a bit and now you can see just in this single browser window and my own url here that hello body is in the top left hand corner and if i zoom in there's hello title so what have i done here i have gone ahead and created my own web page in html in a file called hello.html and then i have opened up a web server of my own configured it to listen on tcp port 8080 which just says to the internet hey listen for requests from web browsers not on the standard port number 80 or 443 listen on 8080 and this means i can develop a website using a web-based tool like this one here which is increasingly common today all right so now let's consider what it is i actually just typed out html is characterized really by just two features two vocab words tags and attributes most of what i just typed were tags but there was at least one attribute already here's the same source code that i typed out in html from top to bottom let's consider what this is the very first line of code here doctype html is the only anomalous one it's the only one that starts with an open bracket a less than sign and an exclamation point there's no more exclamation points thereafter for now this is the document type declaration which is a fancy way of saying it's just got to be there nowadays it's like a little breadcrumb at the beginning of a file that says to the browser i am you are about to see a file written in html version 5. that line of code has changed over time over the years the most recent version of it is nice and succinct like this and it's just a clue to the browser as to what version of html is being used by you the programmer all right what comes after that well after that and i've highlighted two things in yellow this is what we're going to start calling an open tag or a start tag open bracket html then something close bracket is the so-called start or open tag then the corresponding close or end tag is down here and it's almost the same you use the same tag number use the same angled brackets but you do add a slash and you don't repeat yourself with any of the things called attributes because what is this thing here lang equals quote unquote en means the language of my page is written in the english language the humans have standardized two and three letter codes for every human language right now and so this is just a clue to the browser for like automatic translation and accessibility purposes what language the web page itself is written in not the tags but the words like hello title and hello body which while minimalist are indeed in english so when you close a tag you close the name of it with the slash and the angle brackets you don't repeat the attribute that would just be annoying to have to type everything again but notice the pattern here it's new syntax but this is another example of key value pairs in computing the key is lang the value is en for english the attribute is called lang the value is called is en so again it's just key value pairs and just yet another context probably the browser is using a hash table underneath the hood to keep track of this stuff like a two column table with keys and values again humans keep using the same paradigm in different languages what's inside of that the nesting is important visually not to the computer but to us the humans because it implies that there's some hierarchy here and indeed what is inside of the html tag here well we have what we'll call the head tag the head tag says hey browser here comes the head of the page and then the body tag says hey browser here comes the body of the page the body is like 99 of the user's experience the big rectangular window the head is really just the address bar and other such stuff at top like the title that we saw a moment ago just to introduce the vernacular then the html tag otherwise known as an element has two children the head child and the body child which is to say that head and body are now siblings so you can use the same kind of family tree terminology that we used when talking about trees weeks ago if we look at the head tag how many children does it seem to have i'm seeing one and indeed at least if we ignore all the white space the the spaces or tabs or new line characters there's just one child a title element and an element is the terminology that includes the start tag and the end tag and everything in between so this is the title element and the title element has one child which is just pure text otherwise known as a text node recall node from our discussions of data structures weeks ago if we jump into the body which is the other child of the html tag it too has one child which is just another chunk of text a text node that says quote unquote hello body what's nice about this indentation even though the browser technically is not going to care is that it implies this kind of structure and this is where we connect like weeks five and now weeks eight here is the tree structure we began to talk about even in our world of sea it's not a binary tree even though this one happens to have no more than two children it's an arbitrary tree that can have zero or any number of children but if we have a special node here that refers to the document the root node so to speak is html drawn with a rectangle here just for discussion sake it has two children head and body also rectangles head has a title child and then it and body have text nodes which i've drawn with ovals instead which is only to say that when your browser chrome safari whatever downloads a web page opens up that envelope and sees the contents that have come back from the server it essentially reads the code that someone wrote the html code top to bottom left to right and creates in the browser's memory in your mac or your pc or your phone's memory or ram this kind of data structure that's what's going on underneath the hood and that's why aesthetically it's just nice as a human to indent things stylistically because it's very clear then to you and to other programmers what the structure actually is so that's it for like the fundamentals of html we'll see a bunch of tags and a bunch of examples now but html is just tags and attributes and it's the kind of thing that you look them up when you need to eventually many of them get engrained i constantly check the reference guides or stack overflow if i'm trying to figure out how do i lay something out it's really just these building blocks that allow you to assemble the structure of a web page this one's being super simple but it's just tags and attributes any questions on this framework before we start to add more tags more vocabulary if you will anything here no all right so let's oh hand in the middle yeah sorry what would happen if we put the title tag where if we put the telo tag around body uh that's a good question let's try it so let me actually go to uh this and say open bracket title whoops sometimes you don't want it to finish your thought for you but it did that time i've gone ahead and changed the file let me go and open up give me a second to open my terminal window and go back to the url that has my page give me a second there's my hello.html let me zoom in on this let me zoom in on this and let me go ahead now and click on hello.html and in this case it looks like we don't actually see anything so the browser is hiding it technically speaking browsers tend to be pretty generous and half the time when you make mistakes in html it will display it might display not display as you intended it might not display the same on macs or pcs or chrome or on firefox there is a tool though that we'll see that can help answer this question for you for instance if i go to validator.w3.org w3 is the worldwide web consortium a group of people that standardize this kind of stuff i can click on validate by direct input and just copy paste my sample html into this box and click check and i should see hopefully that indeed it's an error what you propose that i do the browser just did its best to do something which was to show me nothing at least rather than the incorrect information but if i revert that change and let me undo what we just did let me copy my original code back into this text box and click check now you can see conversely my code is now correct and there's automated tools to check that but we'll encourage you for problem sets and projects to use that particular manual tool all right so let's go ahead and enhance this a little bit by introducing a whole bunch of tags just to give you a sense of some of the building blocks here so i'm going to go ahead and create a new file called paragraphs.html and i'm just going to do a bunch of copy paste just to start things off so i'm not constantly typing all this star and stuff again and again because i want everything to be the same here except i'm going to change my title to be paragraphs for this demo and inside of the body i need a whole bunch of paragraphs of text and i don't really want to come up with some text so let me go to some random website here and grab lorem ipsum text which if you're involved in like student newspaper or just design this is just placeholder text kind of looks like latin but technically isn't here though i have a handy way of just getting three long paragraphs in something that looks like latin and i've put those notice inside of the body and they're indeed long look how long the uh the made up words here are so let me go now into my browser tab here let me reload this page and you'll see two files have now appeared paragraphs.html which is my new one and hello.html let me click on paragraphs.html and what clearly seems to be wrong yeah yeah it's obviously one massive paragraph instead of three so that's interesting but it's just a little hint as to how pedantic html is it will only do what you say and each of these tags tells the browser to start doing something and then maybe stop doing something like hey browser here comes my html hey browser here comes the head of my page hey browser here comes the title of my page hello title hey browser that's it for the title that's it for the head here comes the body tag so it's kind of having this conversation between the browser between the html and the browser doing literally what it says so if you want a paragraph you're probably going to want to use the p tag for paragraph and i'm going to go ahead and add this to my code i'm going to keep things neat even though the browser won't care by indenting things here let me create another paragraph tag here and close it right after that one indenting again and i'm keeping everything nice and orderly let me do one more here let me indent that and then let me add it to the end of my page here so again a little tedious but now i have three paragraphs of text that say hey browser start a paragraph hey browser stop that paragraph start stop and so forth let me go back to the browser window here let me hit command r or control r to reload the page and voila now i have three cleaner paragraphs all right so there's a p tag for paragraphs so now we have that particular building block what if i want to add for instance some headings to this page well that's something that's possible too let me go ahead and create a new file called headings.html let me copy and paste that same code as before but now let's preface each paragraph with maybe h1 and i'm gonna just write the word one and here i'm gonna say h2 two and down here i might say h3 three so this is another tag another three tags h1 h2 h3 as you might have inferred by the file name i chose this gives you headings like in a chat in a book different chapters or sections or sub sections or in an academic paper you have different hierarchies to the text that you're writing so now that i've added an h1 tag and the word one h2 tag the word two h3 tag and the word three let's go back to the browser reload the page again and voila once the page reloads i'll do it with the manual button reload the page oh what am i doing wrong yeah i'm right right i'm not in the headings file so let me go back a page now there's headings.html let me click on that okay now we see some evidence of this again it's nonsensical content but you can kind of see that h1 is apparently big and bold h2 is slightly less big but still bold h3 is the same but a little smaller and it goes all the way down to h6 after that you should probably reorganize your thoughts but there's six different hierarchies here as you might use for chapters sections subsections and so forth all right so those are headings as an html tag in our vocabulary what's a common thing too well let me go to vs code again let me go ahead and get some boilerplate here create a file called list.html let's create a simple list inside of my body and i'll give this a title of list and let me fix the title of this one to be headings as well so in list.html suppose i want to have a list of things foo bar and baz or like a computer scientist go to words just like a mathematician might say xyz foobarbaz is in list.html let me go back to my browser hit the back button there's list.html and hopefully i'll see foo bar and baz one on each line like a nice little list but of course i do not and this is not english chrome thinks it might be arabic but that's um curious too because the lang attribute should be overriding that so google is trying to override it all right what's the obvious explanation why we're seeing fubar and baz on the same line and not three separate ones because we yeah we didn't tell it to do that so we need paragraph tags or maybe something else turns out there is something else there is a ul tag for an unordered list in html inside of which you can have li tags for list item inside of which you can put your words so there's my foo there's my bar there's my baz and again notice that vs code is finishing my thought for me but notice the hierarchy open ul open li close li open li closely openly close li close ul so it's sort of done in reverse order here let me go back to my browser reload the same page list.html and voila a default bulleted list that still seems to be in arabic what if i want this list to be numbered well you can probably guess if you don't want an unordered list but an ordered list what tag should i use oh well sure so let's try that not always that easy as just guessing but in this case ol is going to do the trick let me go back to my other browser let me reload the page and now it's going to automatically number for me it's a tiny thing but this is actually useful if you have a very long list of data and maybe you might add some things in the middle the beginning or the edit would just be annoying to have to go and renumber it the computer is doing it for us by instead just a numbering from top to bottom here all right what about another type of layout not just paragraphs not just lists but what about tabular data you've got some research data you want to present some financial data you want to present a phone book that you want to present how might we go about laying out data a la a table well let me create a file called table.html and i'll just copy paste where we started earlier let me start to close some of these other files and in table.html this is going to be a bit more html but i'm going to go ahead and do this table and close table tables can have table headings so t head is the name of that tag and tables can have t bodies table bodies so i'm going to add that tag and this is a common technique sort of start your thought finish your thought and then go back and fill in what's in between what do i want to put in this table how about a bunch of names and numbers so for instance like left column name right column number so let's create a table row with what's called the tr tag let's create a table heading with the t h tag and let's say name here let's create another table heading called number here and all of that to be clear is in one table row meanwhile in the table body let me create another table row but this time it's not a heading now i'm in the guts of my table let's do table data which is synonymous with like the cell of the table in like an excel spreadsheet or google spreadsheet in this td i'm going to say like carter's name and then let's you grab carter's number from our past demo 617-495-1000 then let's put me into the mix and i'll go ahead and copy paste here which often is not good but we'll see that there's a lot of shared structure with html let me go ahead and do mine 949 468 2750 and now save this page so we're getting to be a lot of indentation i'm using four spaces by default some people use two spaces by default so long as you're consistent that's considered good style but let me go back to my browser here and hit back that then brings me to my directory listing again here's table.html and this is not that interesting yet but you can see that there's two columns name and number because it's a table heading th the browser made it bold faced for me in there in the table or two rows below that carter and david it's a little oh i forgot my number one sorry about that one and one it's not the prettiest table right i feel like i kind of want to separate things a little more maybe put some borders or the like but with html alone i'm really focusing on the structure alone so we'll make this prettier soon but for now this is how you might lay out tabular data all right let me pause here just to see if there's any questions but again the goal right now is just to kind of throw at you some basic building blocks that again can be easily looked up in a reference but we're going to start stylizing these things soon too and yeah in the middle how do you indent paragraphs really good question for that we're probably going to want something called css cascading style sheets so let me come back to that in just a little bit for the stylization of these things beyond the basics like big and bold we're going to need a different language altogether all right well let's now create what the web is full of which is uh like photographs and images and the like let me go ahead and create a new file called image.html and let me go ahead and change the title here to be say image and then in the body of this page let's go ahead and put an image the interesting thing about an image is that it's actually not going to have a start tag and an end tag because that's kind of illogical like how can you start an image and then eventually finish it it's either there or it isn't so some tags do not have end tags so let me do image img source equals harvard.jpg and let me go ahead and in my terminal window i actually came with a photo of harvard let me grab this for just a second uh let me grab harvard.jpg and put it into my directory pretend that i downloaded that in advance and so i'm referring to now a file called harvard.jpg that apparently is in the same folder as my image.html file if this image were on the internet like harvard server i could also say like https colon www.harvard.edu slash folder name whatever it is slash harvard.jpg but if you've in advance uploaded a file to your own vs code environment like i did before class by dragging and dropping this full file this photo of harvard you can just refer to it relatively so to speak this would be the same thing as saying dot slash harvard.jpg go to the current directory and get the file called harvard.jpg but that's unnecessary to type for accessibility purposes though for someone who's vision impaired it's ideal if we also give this an alternative text something like harvard university and the so called alt tag and this is so that screen readers will recite what it is the photo is for folks who can't see it and if you're just on a slow connection sometimes you'll see the text of what you're about to see before the image itself downloads especially on a mobile device so let's now go back to my open browser tab and let's look in the directory i now have harvard.jpg which i downloaded in advance and image.html let me click on image.html and here we have a really big picture of memorial hall the building we're currently in suffice it to say i should probably fix this and maybe make it only so wide but to do that we're going to probably want to use this other language css there are some historical attributes that you can still use to control width and height and so forth but we're going to do it the better way so to speak with a language designed for just that how about a video though i also came prepared with let me grab another file here let me grab a file called halloween.mp4 which is an mpeg file and let me go ahead and change this now to be a file called video.html i'll change my title to be video and let's go ahead and now introduce another tag a video tag open bracket video and then let me go ahead and close that tag proactively and then inside of the video tag you can say the source of the video is going to be specifically halloween.mp4 the type of this file i know is video mp4 because i looked up its content type or mime type and the video tag actually has a few attributes i can have this thing auto play i can have it loop forever i can mute it so that there's no sound which is necessary nowadays most browsers to prevent ads don't auto play videos if they have sound so if you mute your video it will auto play but presumably not annoy users and let me set the width of this thing to be like oh pixels wide but i can make it any size i want so i know this just from having you know looked up the syntax for this tag but notice one curiosity sometimes attributes don't have values they're empty attributes they're just single words autoplay loop muted and that kind of makes sense for any attribute that really does what it says like it doesn't make sense to say muted equals something like it's either muted or not the attribute is there or not similarly for these others as well so let me go back to my other browser tab reload the directory listing there is both my mp4 and also video.html which is the webpage that embeds it and this is actually a video that was just on harvard's website last yesterday and it was amazing so we included it in this demo here this is the video that was on harvard.edu last night same photo but you can see here that an image alone probably would not have the same effect this is actually a movie a small video file that's now looping now there's some artifacts here like there's a white border around the top i feel like it'd be nice to fill the screen but again we'll come back to a language that can allow us to do exactly that well it's not just videos like this that you might want to put into a web page let me create another file called iframe.html if you've ever poked around with you if you have your own youtube account or you had your own blog or wordpress site or wix or squarespace you might have been in the habit of embedding videos in websites using like embedded youtube players well this is possible too using what's called an inline frame an iframe and an iframe is just a tag that is literally iframe it has source equals and then a url and if it happens to be a youtube video there's a certain url format you need to follow per youtube's documentation so you might do www.youtube.com embed and then here's an id of a uh so this is essentially what we do if we want to embed uh cs50's own lecture videos in the course's website or the video player does literally this if i want to allow full screen i can add this attribute to that i know exists by just having checked the documentation and if i now go back to my browser here reload my directory listing there's iframe.html it's not going to fill the screen because i haven't customized the aesthetics yet but it does seem to embed uh not it does not seem to embed because i must have mistyped something let me reload the screen a tiny little video there for for you to play with later if you'd like so we could change the width change the height get rid of that margin and so forth but an iframe is a way of embedding someone else's web page in your web page if they allow it so as to create all the more of an interactive experience for them on say your site all right well let what the web is of course known for things like links let's go ahead and create a file called link.html and if we want to create a webpage that actually links from itself somewhere else let's go ahead and do this something very simple like visit harvard.edu period now in like facebook instagram a lot of websites nowadays if you just type in a domain name or a fully qualified domain name it automatically becomes a link that's because those websites have code in them that automatically detect something that looks like a url and turns it into a proper link html itself does not do that for you and so if i go back to my web page here click on link.html if you type visit harvard.edu period that's all you're literally going to see but instinctively even if you've never written html before what should we probably do here to solve this problem what could we do to solve this problem what do i probably want to add yeah yeah so i want to surround the url with some kind of link text and you wouldn't necessarily know this until someone told you or you looked it up but the tag for creating a link is somewhat weirdly called the a tag for anchor it has an attribute called href for hyper reference which is like a link in the virtual world to a url so let me type in harvard's full and proper url here then i'm going to close the tag and then i can still say harvard.edu and make that what the human sees but the place they're going to go should be a full url protocol and all http or https and all now if i go back here and reload the page now it automatically gets underlined it happens to be purple by default why because we visited harvard.edu a few minutes ago so my browser by default is indicating in purple that i've been there before but now i have a link that i can click on and if i hover over it but don't click you'll see that in most browsers there's a little clue as to where you will go if you click subsequently on this link and without going too far down a rabbit hole but to tie together our discussion of cyber security recently what if i were to do something like this right now you have the beginnings of a phishing attack of sorts p-h-i-s-h-i-n-g whereby you can create clearly a web page or heck even an email using html that tells the user they're going to go one place but they're really going to go someplace else altogether and that is the essence of phishing attacks these days if you've ever gotten a bogus email pretending to be from paypal or your bank or some other website odds are they've just written html that says whatever they want but the underlying tags might do something very different and so having the instinct to look in the bottom left hand corner or be a little suspicious when you're just told blindly to click on a link it's this easy to socially engineer people that is deceive them by just saying one thing and linking to another well what if i want to link my page to another page i already created well if i want to link to like that photo of harvard i can just do href equals quote unquote in the name of a file in my same account that is itself a web page so this is how you can create relative links a multi-page web pages or multi-page websites yourself so if i now reload this page hover over harvard.edu you'll see in the bottom left-hand corner a very long url but that's because i'm in code spaces right now vs code and it's appending automatically to the end of my current url the file name image.html but this should work when i click on this i go immediately to that file we created earlier with a crazy big version of the image but that's just a way that one page on a website can link to another page on a website let's do one other thing here making things more responsive because in fact that wasn't a particularly responsive website responsive means responding to the size of the user's device which is so important when someone might be on a screen like this or on a screen like this these days there are special tags we can use to tell the browser to modify its display based on the hardware so let me create a file called responsive.html i'm going to copy paste some starting point here call this title responsive and let me go ahead and just grab let me grab some of that lorem ipsum text from before just so that we have a sizeable paragraph to play with here and let me go ahead and grab this text here and i'm just going to paste this into the body of this page and that's it so i just have a big paragraph at the moment inside of my body let me go back to my browser let me open up this file called responsive.html to make the point that it is not yet responsive let me go ahead and click on responsive.html that looks fine but here's another trick you can do using chrome or edge or other browsers these days you can pretend to be another device let me go to view developer developer tools again last time we used this to use the network tab which was kind of interesting because we could see what the underlying network traffic is but notice we can also click on this icon in chrome at least that looks like a mobile phone i can turn my laptop into what looks like a mobile device by clicking this i'm going to click the dot dot menu over here and just move the dock instead of on the bottom where it might be by default i'm going to move it to the right hand side so that now on the left you see what looks more like the shape of a vertical phone and in fact if i go to my dimensions here i'll choose something like iphone x so a few years back here's what that same website might look like on an iphone x you know that looks pretty damn small you know to be able to read it and that's because the website has not automatically responded to the fairly narrow dimensions of the iphone in question or android device or whatnot so let me go ahead and do this let me go back into my code and let me go into the head of the page and for the first time add another tag up here this word is now all over the internet but there is a meta tag that is called that allows you to specify the name of some kind of configuration detail here a property if you will viewport is the technical term for the rectangular region that the human sees in a browser it's essentially the body of the page but only the part the human is currently seeing and you can specify the content of the viewport should have an initial scale of one so it shouldn't be zoomed in or out and the width that the browser should assume should be equal to the device's width these are sort of magical statements that you just have to know or copy paste or transcribe that just express to the browser assume that the width of the page is the same thing as the width of the device don't assume the luxury of a big laptop or desktop computer now making only that change let me go back to my pretend iphone here using chrome's developer tools let me reload the page and now it's not very effective on this screen if i were showing you this on is there well i'm there we go let's do this there we go so if i zoom in to 100 this would be on an actual physical device much more readable than it would have been a moment ago even though i realized that demo was not necessarily persuasive but it's as simple as telling the browser to resize the thing to the width of the page all right let me pause here to see if there's any questions because that feels like enough html tags we'll add just a couple of more in but for the most part like html tags are things you google and figure out over time just to build up your vocabulary the basic building blocks are tags attributes some attributes have values some do not and that's sort of the structure of html in essence questions on any of these though yeah do attributes have an order uh no attributes can be in any order from left to right i tend to be a little nitpicky and so i alphabetize them if only because then i can easily spot if something's missy if missing if it's not there alphabetically most people on the internet don't seem to be do that yeah in the middle yeah good question i mentioned that html is starting to replace other languages for user interfaces and it's not just html alone it's html with css with javascript both of which we'll get a taste of here today that rather has been the trend for portability and the ability for companies for individual programmers to write one version of an app and have it work on android devices and iphones and macs and pcs and the like it is very expensive it is very time consuming to learn a language like java and write an android app learn another language called swift and make an ios app not to mention make them look and behave the same not to mention fix a bug in one and then remember to fix it in the other i mean this is just very painful and time consuming and costly so this this standardization on html css and javascript even for mobile apps and web apps has been increasingly compelling because it solves problems like that all right so let's go ahead and now do something that's finally interactive all of these pages thus far are really just tastes of static content content that does not change well let's go ahead and and do this let me introduce one other format of urls which looks a little something like it did before so slash path but it could actually be something like this slash path question mark key equals value you might not have noticed or care to notice the urls in your url bar every day but these things are everywhere often when you type into a search engine like google a search query whatever you just typed ends up in the url when you click on a link that contains some information there might be a question mark and then some keys and values there might be an ampersand and more keys and values here again is that very common programming paradigm of just associating keys with values we can see this as follows let me actually go to uh google.com in a browser here and let me search for something the internet is filled with cats enter notice now that my url changed from google.com to google.com search question mark q equals cats ampersand and then a bunch of stuff that i don't understand or know so let's just delete it for now and leave it with the essence of that url and that still works if i zoom out here years ago you would get pictures of cats now you get uh videos of the the movie and then that top query there is cat's a bad movie um but we can also of course click on images and there are the adorable cat creepy cats all right this didn't used to happen when we searched for cats but anyhow the point is that the url changed to include the user's input and this is such a simple but such a powerful thing this is how humans provide input to servers they don't manually create the urls like i sort of just did but when you fill out a form on the web and you hit enter typically the url suddenly changes to include whatever you typed in in the url assuming the form is using the verb get that's not ideal if you're typing in a username a password a credit card information because you don't want the next person to sit down at your laptop to see literally everything you typed in saved in your history so there's another verb post that can hide all of that and it's just sent a little differently but things like this are typically sent via get and what that means underneath the hood is that your browser is just making a request like this get slash search question mark q equals whatever you typed in the host that you visited and so forth and hopefully what comes back is a page full of search results including cats and what's interesting here now is if i go back to vs code on my own computer and let me go ahead and create a file called how about search.html in search.html i'm going to start with some copy paste from before change my title to search and in the body of this page i'm going to introduce a form tag and in this form tag i'm going to have a couple of inputs and the types of inputs are going to be text and the type of the input is going to be submit and this isn't that interesting yet but let's see what's happening in the page itself let me go back to my directory listing let me click on search.html i seem to have the beginning of my own search engine it's not very interesting it's just a text box and a submit button but let's finish my thoughts here so let's specifically give this text box a name of q which if you roll back to the late 90s when larry and sergey of google fame created google.com q represented query the query that the human is typing in so the name of this text box shall be text that shall be q the form is going to use what method technically it uses get by default but i'll be explicit and say method equals quote unquote get stupidly it's lowercase in html even though what's in the envelope is indeed uppercase by convention the action of this form specifically would ideally go to my own server but we don't really have time today to implement google itself so we're just going to send the user's request to google.com search so i'm creating a form the action of which is to send the data to google's slash search path using the get method it's going to send a input called q whenever i click this submit button let me go back to the browser reload the page nothing seems to have changed yet but if i search for let me zoom out so we can see the url bar right now i'm in search.html if i zoom out and search for cats now and click submit i'm whisked away to google.com but notice that the url is parameterized with those key value pairs that key value pair and i get back a whole bunch of cat results and i can very easily now make this a little prettier right now it's not ideal that like the human has to move their cursor and click in the box and it's a little obnoxious that autocomplete is enabled if i don't want to search for cats anymore well according to html's documentation i can say something like this autocomplete equals off to turn off autocomplete autofocus to automatically put the cursor inside of that text box if i want some explanatory text i can put placeholder text like quote unquote query and now if i go back to this page and reload now it's a little more user friendly you see query and kind of gray text the cursor is already there and blinking i don't have to even move my cursor i can search for dogs now and you didn't see any autocomplete at all hit enter to submit and now i'm searching for there we go adorable dogs instead so what have i done i've implemented the front end of google.com just not the back end to implement the backend we're obviously going to need like a really big database maybe something like sql we're gonna need some code that like searches the database for dogs or cats or anything else we're gonna need python for something like that and in fact that's the direction we're steering next week when we implement that back end so today it's all about this front end or any question then about forms these url parameters before we now transition to making things look a little prettier with css and then we'll end by making things a little more functional with javascript anything at all no all right so let's start to answer a couple of the questions they came up by making these pages a little more aesthetically interesting let me whoops i closed that tab by accident let me go ahead and open my browser give me one second to get open that url all right so let's go ahead now and introduce to the mix one other language as follows let me go ahead and create a file called home.html as though i'm making a home page for the very first time and in this page i'm going to give a title of home i'm just going to have like three things first i'm going to have maybe a paragraph of text up here at the top that says something welcoming for my home page like my name john harvard for instance or john harvard's homepage then in the middle of the page i'm going to have some text like welcome to my home page exclamation point and at the bottom of the page i'm going to have a final paragraph that says something like copyright the copyright symbol john harvard or something like that all right so it's like a web page with three different structural areas made with text this isn't that interesting if i open this page called home.html after reloading my directory listing here come on uh where'd it go home.html standby apologies come on oh where did it go uh sorry interesting okay that did not save for some reason so let me rewind and do this real fast again let me create a file called home.html okay let me give it a title of home let me empty the body let me reload over here now to make sure it's appearing okay it wasn't saving for some reason let me go ahead and create quick three quick paragraphs the first paragraph for john harvard inside the middle i'm going to say something like welcome to my home page exclamation point and at the bottom whoops at the bottom a little footer that says something like copyright a little simple copyright symbol and uh john harvard's name all right so now let me open up home.html and you'll see indeed three different sections to this page oops i made a mess of this okay now let me reload the page and there we go very simple very underwhelming web page that has three main sections let's start to now stylize this in an interesting way so that it's a little more aesthetically pleasing first these aren't really paragraphs they're sort of like areas of the page divisions like the header is up here there's like the main part of my screen and then there's the footer of my screen so paragraphs isn't quite right if these aren't really paragraphs of texts i might more properly call them divs or divisions of the page which is a very commonly used tag in html which just has this generic rectangular region to it it does not do anything aesthetically no bold facing no size changes it just creates an invisible rectangular region inside of which you can start to style the text or i can take this one step further there's some other tags in html known as semantic tags that literally have names that describe the types of your page which is all the more compelling these days for accessibility to for screen readers for search engines because now a screen reader a search engine can realize that footer is probably a little fluffy the header might be a little interesting the main part of the page is probably the juicy part that i want users to be able to search for or read aloud uh substantively so let's start to stylize this page somehow let's introduce a style attribute in html inside of which is going to be text like this font size colon large text align colon center on main i'm going to add a style attribute and say font size medium text align center and then on the footer i'm going to say style equals font size small text align center what's going on here well in blue is the language we promised called css for cascading style sheets we're not really seeing the cascading style sheet of it yet but in blue here notice it's another very common paradigm it's different syntax now but how would you describe what you're looking at here in blue this is another example of what kind of programming convention what how you might you oh no just scratching what how much you describe it yeah it's just more key value pairs right it'd be nice if the world standardized how you write key value pairs because we've now seen equal signs and arrows and colons and semicolons and all this but just different languages different choices the key here is font dash size the value is large the other key is text dash align the col the value is center the semicolon just separates one key value pair from another just like in the url the ampersand did in the context of http the designers of css use semicolons instead strictly speaking this semicolon isn't necessary i tend to include it just for symmetry but it doesn't matter because there's nothing after that this is a bit of a weird example this is the co-mingling of css inside of javascript so as of now you can use the css language inside of the quote marks in the value of a style attribute we did something a little similarly last two weeks a week plus ago when we included some sql inside of python so again languages can kind of cross barriers together but we're going to clean this up because this is going to get messy quickly certainly for large web pages the size of harvard's or yales or the like so let's see what this looks like let me go back to my browser window here reload the page and it's not that different but it's indeed centered and it's indeed large medium and small text and let me make one refinement the copyright symbol actually can be expressed but there's no key on my us keyboard here i can actually magically say ampersand hash 169 semicolon using what's called an html entity turns out there are numeric codes with this weird syntax that allow you to specify symbols that exist in macs and pcs and phones but that don't exist on most keyboards if i reload the page now now it's a proper copyright symbol so mine are aesthetic but it introduces us to these html entities so even if you've never seen css before you can probably find something kind of dumb about what i did here like poor design it is correct if my goal was small medium and large bottom up what looks like a bad design perhaps even if you've never seen this language before yeah yeah i've used the same style three times like copy paste or typing the exact same thing again and again it has rarely been a good thing well here's where we can take advantage of the design of css because it supports what we might call inheritance whereby child children inherit the properties the key value pairs of their parents or ancestors and what that means is i can do this let me get rid of this text a line let me get rid of this text of line let me get rid of this one i could get rid of the semicolon too but i'll leave it for now and let me add all of that style to the parent element the body so that it sort of cascades down to the header the main and the footer tags as well and let me close my quotes there too now if i go back to my browser and hit reload nothing changes but it's a little better designed right because if i want to change the text alignment to maybe be right aligned i can now reload the page and voila now it's over there i change it in one place not in three different places so that would seem to be a marginally better design and could we do this anymore differently well it's not that elegant that it's all just kind of in line with my html this generally tends to be bad practice where you co-mingle your html and your css especially since some of you might be really good at like laying out the structure of web pages and the content and the data and you might have a horrible sense of design or just not care about the aesthetics you might work with a designer an artist who's much better at all of these fine tunings aesthetically wouldn't it be nice if you could work on the html they could work on the css and you don't have to somehow like literally edit the same lines of code as each other well just like we can move stuff into header files in c or packages in python we can do the same in css so i'm actually going to go ahead and do this let me get rid of all of these style attributes and let me now start to practice a convention of not commingling css with my html let me instead move it into the head of the page in a style tag instead of an attribute this is one of the rare examples where the there are attributes that have the same names of tags as vice versa it's not very common but this one does exist here's a slightly different syntax for expressing the same key value pairs if i want to apply css properties that is key value pairs to the header of the page i say header and then i use curly braces and inside of those i say font dash size large text dash align center then if i want to apply some properties to the main section of the page i again do font size say medium and then i can do text align center then lastly on the footer of the page i can assign some properties like font size small and then text align center semicolon and i don't have to do anything more in my html it always just represents the structure of my page but because of this style tag in the head of the page the browser knows in advance that the moment it encounters a header tag a main tag or a footer tag it should apply those properties those styles if i reload the page other than it being re-centered now there's no other changes all we're doing is sort of iteratively improving the design here but now everything's in the top of the file but there's still a bad design here what could i now do that would be smarter similar problem to yeah okay create a new file with just the css i like that let's go there in just one second but even as we're here there's still a redundancy we can probably chip away at yeah get rid of the text align center in three different places which doesn't seem necessary and perhaps someone else if i get rid of text align center what should i add to my style tag in order to bring it back but apply it to everything in the page and the page if i scroll down looks like this in html yeah yeah so the body tag so let me go ahead and say body and then in here put text align center and that now if i reload the page has no visual effect but it's just better design because now i've factored out that kind of commonality and so just to make clear what we've been doing here these are all again css properties these key value pairs and there's different types of ways of using them and there's this whole taxonomy what we've been doing thus far are what we're going to call type selectors where the type is the name of a tag and so it turns out there's other ways though to do this and let's head in this direction let's go ahead and maybe write our css slightly differently because you know what would be nice i bet after today once i start creating other files for my home page or john harvard's homepage i might want to have center text on other pages and i might want to have large text or medium text or small text it'd be nice if i could reuse these properties again and again and kind of create my own library maybe even ultimately putting it in a separate file so let me do this instead of explicitly applying text align center to the body let me create a new noun or an adjective rather for myself called centered it has to start with a dot because what i'm doing is inventing my own class so to speak this has nothing to do with classes in java or python class here is this aesthetic feature and actually let me rename these to be dot large dot medium and dot small what this is doing for me is it's inventing new words well named words that i can now use in this file or potentially in other web pages i make as follows i can now say if i want to center the whole body i can say class equals centered on the header tag i can say class equals large on the main tag i can say class equals medium on the footer tag i can say class equals small but let me take this one step further as you suggested why don't i go ahead now and let me actually get rid of let me grab all the css copy it to my clipboard let me get rid of the style tag here and create a new file called home.css and let me just save all of that same text in a separate file ending in css nothing else no html whatsoever but let me go back to my home.html page and this is one of the most annoyingly named tags because it doesn't really mean what it does link href home.css rel equals stylesheet so ideally we would have used the link tag for links in web pages but this is linked in the sort of conceptual sense we're linking this file to this other one so that they work together using this hyper reference home.css the relationship of that file to this one is that of stylesheet a stylesheet is a file containing a whole bunch of stylizations a whole bunch of properties as we just did so here too it's underwhelming the effect if i reload the page nothing changed but now i not only have a better design here because i can now use those same classes in my second page that i might make my third page my fourth page my bio my you know resume page whatever it is i'm making on my website here i can reuse those styles by just including one line of code instead of copying and pasting all of that style stuff into file after file after file and heck if the rest of the world is really impressed by my centered class and my large and medium and small classes i could bundle this up let other people on the internet download it and i have my own library my own css library that other people can use why should you ever invent a centered class again if i already did it for you stupid and small as this one is but it would be nice now to package this up in a way that's usable by other people as well so this is perhaps the best design when it comes to css use classes where you can use external style sheets where you can but don't use the style attribute where we began which while explicit starts to get messy quickly especially for large files any questions then on this now all right so that's class selectors when you specify dot something that means you're selecting all of the tags in the page that have that particular class and applying those properties so there's a couple of others here just to give you a taste now of what's possible there's so much more that you can actually do with html and css together let me go ahead and open up a few examples that i did here in advance let me go ahead and open up vs code and let me go ahead and copy my source 8 directory give me one sec to grab the source 8 directory for today's lectures so that i can now go into my browser go into some of the pre-made examples in source a and let me open up paragraphs one here so here's something it's a little subtle but does anyone notice how this is stylized this is just some generic lorem of some text again but what's noteworthy stylistically a book might do this yeah yeah the first paragraph's a little bigger why who knows it's just a stylistic thing at the beginning of the chapter the first paragraph is bigger how did we do that well we can actually explore this in a couple of ways one i can obviously go into vs code and show you the code but now that we're using chrome and we're using these developer tools let's again go into them view developer developer tools and now notice let me turn off the mobile feature and let me move the dock back to the bottom just so that it's fully wide we looked at the network tab before we looked at the mobile button before now let me click on elements what's nice about the elements tab is you can see a pretty printed version of the web pages html nicely color coded syntax highlighted for you so that you can now henceforth learn from look at the source code the html source code of any web page on the internet notice that my own web page here it's not that interesting there's a bunch of paragraph tags of some text but notice what i did the very first one i gave an id to this is something that you as a web designer can do you can give an id attribute to any tag in a page to give it a unique identifier the onus is on you not to reuse the word anywhere else if you if you reuse it you've screwed up it's incorrect behavior but i chose an id of first just so that i have some way of referring to the very first paragraph in this file if i look in the head of the page and the style tag here notice that i have hash first so just as i use dot for classes the world of css uses a hash symbol to represent ids unique ids and what this is telling the browser whatever element has the first id first t without the hash apply font size larger to it and that's why the first paragraph and only the first paragraph is actually stylized if i actually go into vs code now and let me go into my source a directory let me open up paragraphs1.html here is the actual file if i want to change the color of that first paragraph to green for instance i can do color colon green let me close the developer tools reload the page and now that page is green as well you don't have to just use words you can use hexadecimal what was the hex code for green in rgb like no red lots of green no blue so you could do 0 0 ff00 using a hash which coincidentally is the same symbol but it has nothing to do with ids this is just how photoshop and web pages represent colors let's go back here and reload it's the same although it's slightly different version of green this is pure green here if i want to change it to red that would be let's see rgb ff000 and here i can go and reload now it's first paragraph red this actually gets pretty tedious quickly like if you're a web designer trying to make a website for the first time it actually might be fun to tinker with the website before you open up your editor and you start making changes and save and reload that's just more steps so notice what you can do with developer tools 2 in chrome and other browsers when i highlight over this paragraph under the elements tab notice that one it gets highlighted in blue if i move my cursor it doesn't get highlighted if i move it it gets highlighted so it's showing me what that tag represents but notice over here on the right you can also see all of the stylizations of that particular element some of them are built in the italicized ones here at the bottom means user agent stylesheet that means this is what google makes all paragraphs look like by default but in non-italicized here you see hash first which is my code that i just changed and if i want to start tinkering with colors i can do like 0 0 0 0 ff enter i changed it to blue but notice if i go back to vs code i didn't change my original vs code code this is now purely client-side and this is a key detail when i drew that picture earlier of the browser going making a request to the cloud the server in the cloud and the response coming back the browser your mac your pc your phone has a copy of all the html and css so you can change it here however you actually want and for instance you can do this with any website let's go say on a field trip here to how about stanford.edu so here's stanford's website as of today uh let's go ahead here and let's see there's their admissions page campus life and so forth let me go ahead and view developer tools on stanford's page developer tools elements you can see all of their html and notice it's collapsed so here's their header here's their main part and you can i'm using my keyboard shortcuts to just open and close the tags to dive in deeper and deeper suppose you want to kind of mess with stanford you can actually like right click on any element of a page or control click inspect and that's going to jump you automatically to the tag in the elements tab that shows you that link and notice if i hover over this li notice stanford's using a list as an unordered list from left to right though it doesn't have to be a bulleted list top to bottom they've used css to change it to be a list from news events academics research healthcare campus admission about well so much for admission that's gone so now if i close developer tools now it's gone from stanford's website but of course what have i really done i've just like mutated my own local copy so this is not hacking even though this might be how they do it in tv in the movies it's still there if i reload the page but it's a wonderfully powerful way to one just iterate quickly and try different things stylistically figure out how you want to design something and two just learn how stanford did something so for instance if i right click or control click on admission again go to inspect and let me go to the li tag let me keep going up up up up to the ul tag there's going to be a lot going on here but notice they have applied all of these css properties to that particular ul tag but notice here this is how it's something like this and we'd have to read more to learn how this works list style type none this is how they probably got rid of the bullets and what you can do is just tinker like alright well what does this do well let me uncheck it all right didn't really change anything font weight uncheck this there we go so now the margin has changed the padding around it has changed let's get rid of this we can just start turning things on and off just to get a sense of how the web page works i'm not really learning anything here so far let me go to the li here for uh let's go to the admissions one here um margin there we go okay so when you there's a display property in css that's apparently effectively changing things from vertical to horizontal if i turn that off now stanford's links all look like this and there are those bullets so again just default styles that they've somehow overridden and a good web designer just knows ultimately how to do these kinds of things all right any questions on these kinds of tweaks thus far no all right have a couple final building blocks before we'll take one more break and then we'll dive in with javascript to manipulate this stuff programmatically let me go ahead and open up how about paragraphs two here let me close this tab let me go into paragraphs two which is pre-made and this one looks the same except when i go ahead and inspect this first paragraph notice that i was able to get rid of the id somehow which is just to say there's many many ways to solve problems in html and css just like there is in c in python let me look in the head and the style of the page now this is what uh we might call a um this is another type of selector that allows us to specify the paragraph tag that itself happens to be the first child only so you can apply css to a very specific child namely first child there's also syntax for last child if just the first one is supposed to look a little different so here i've just gotten out of the business of creating my own unique identifier and instead i'm using this type of selector as well well what more can we do let me go into another example here called link one dot html and here we have a very simple page that just says visit harvard but notice it's purple by default because we've been to harvard.edu before let's see if we can't maybe stylize harvard's links to be a little different let me go into link version 2 now which looks like this and now harvard is very red how did i do that well let me right click on it click inspect and i can start to poke around it looks like my html is not at all noteworthy it's just very simple html anchor tag with an href so let's look at the style let me zoom out and we can look at it in two different ways we can literally look at the style contents here or we can look at chrome's pretty version of it over here it looks like my style sheet in the style tag has changed the color to be red and the text decoration which is a new thing but it's another css property to none notice if i turn that off links on the internet are underlined by default which tends to be good for familiarity for visibility for accessibility but if it's very obvious what is text and what is a link maybe you change text decoration to none but maybe watch this maybe the link comes back the line comes back when you hover over it well let's look at how i did this in style notice that i have stylization and i put my curly braces on the same line here as tends to be convention in css color is red text decoration is none but whenever an anchor tag is hovered over you can change the decoration decoration to be back to the default underline so again just little ways of playing around with the aesthetics of the page once you understand that really there's just different types of selectors and you might have to remind yourself look them up occasionally as to what the syntax is but it's just another way of scoping your properties to specific tags let's look at a version three of this here which adds yale to the mix if i go to link3.html maybe i want to have harvard links red yale links blue how might i have done this well let's right click and click inspect and here we might have two links with a couple of techniques just to again emphasize you can do this so many different ways i gave my harvard link and id of harvard my yale link and id of yale in my css if we go to the head of the page i then did this the tag with the harvard id aka harvard should be read yale should be blue and then any anchor tag should have no text decoration unless you hover over it at which point it should be underlined and so if i hover over harvard it's red underlined yale it's blue underlined if i want to get rid of the ids i can do this a slightly different way let me go into link four same effect but notice i got rid of the ids now how else can i express myself well let's look at the css here the anchor tag has no text declaration by default unless you're hovering over it and this is kind of cool this is what we would call on our list here an attribute selector where you select tags using css notation based on an attribute so this is saying go ahead and find any anchor tag whose href value happens to equal this url and make it red do the same for yale and make it blue now this might not be ideal because if there's something after the slash these equal signs don't work because if it's a different harvard or different yale link this is a little too precise so let me look at version 5 here of link.html look at this style and i did this a little smarter this is new syntax and again just the kind of thing you look up star equals means change any anchor tag whose href contains anywhere in it harvard.edu to red and do the same thing for yale based on star equals so star here connotes wild card so search for harvard.edu or yale.edu anywhere in the href and if it's there colorize the link and again we could do this all day long with diminishing returns to actually achieve the same kind of stylizations in different ways and as projects just get larger and larger you just have more and more decisions to make and so you have certain conventions you start to adopt and indeed if i may you have the introduction of what are called frameworks ultimately if you're a full-time web developer or you're working for a company doing the same you might have internal conventions that you adhere to for instance the company might say always use classes don't use ids or always use attribute selectors or don't use this and it wouldn't be necessarily a draconia as that draconian is that but they might have a style guide of sorts but what many people and many companies do nowadays is they do not come up with all of their own css properties they start with something off the shelf a framework typically a free and open source framework that just gives them a lot of pretty stylizations for free just by using a third-party library and one of the most popular ones nowadays is something called bootstrap that cs50 uses on all of its websites super popular in industry as well it's at getbootstrap.com and this is just to give you a taste of it a website that documents the library that they offer and there's so much documentation here but let me just go to things like how about components it just gives you out of the box the css with which you can create little alerts if you've ever noticed on cs50's website little colorful warnings at the top of the page or callouts to draw your attention to things how did we do that it's probably a paragraph tag or a div tag and maybe we change the font color we change the background color or it's a lot of stuff we could absolutely do from scratch but you know what why do i reinvent the wheel if we can just use bootstrap so for instance let me just scroll down if you've ever seen on cs50s website a yellow warning alert like this let me just zoom in on this we are just using html like this we're using a div tag which again is an invisible division a rectangular region of the page but we're using classes called alert and another class called alert warning those are classes that the friend the the folks at bootstrap invented they associated certain text colors and background colors and padding and margin and like other aesthetics with so all we have to do is use those classes role equals alert just makes clear to like a screen reader that this is an alert that should probably be recited and whatever's in between the open tag and close tag is what the human would see how do you use something like bootstrap well you just read the documentation under getting started there is a link tag you copy paste into your own so let me do this let me go into our phone book example from earlier give me a second to find phonebook.html from earlier [Music] how did it go missing something crap oh table it was called sorry i didn't call it phonebook so in table.html we had code like this let me actually read bootstrap's documentation really fast and they tell me dot dot dot copy paste this code i'm going to put this into the head of my page and it's quite long but notice it's a link tag which i used earlier for my own css file the href of which is this cdn link content delivery network that's referring to a specific version a bootstrap that's available on this day and the file that i'm including is called bootstrap.min.css this is an actual file i can visit with my browser if i open this in a separate tab this is the css that bootstrap has made freely available to us crazy long no white space that's because it's been minimized just to not waste space by adding lots of white space and comments but this contains a whole lot hundreds of css properties that we can reuse thanks to classes that they invented if i want to use some javascript code i can also copy this script tag but we'll come back to that before long let me now just make a couple of tweaks to this this table if i go into my browser from before and i go into table.html this is what it looked like previously oops that is not what it looked like previously got to go back one level higher it looked like this previously and actually that's slightly a lie let me remove this this is what it looked like previously where name and number were bold but centered and then carter and david were on the left and the numbers were to the right you know it's fine it's not that pretty but it'd be nice if it were a little prettier than that so if we add bootstrap into it notice one thing happens first when i reload the page no longer are chrome's default styles used now bootstrap's default styles are used which is a way of enforcing similarity across chrome edge firefox safari and others notice it went from a serif font to a sans-serif font and something cleaner like this it still looks pretty ugly but let me go into bootstrap's documentation let me go under their content tab for tables and if i just kind of start skimming this these are some good looking tables right like there's some underlining here some uh it's bolder font there's a dark line if i keep going oh that's getting pretty too if i want to have a colorful table like i could figure all of this stuff out myself if i want sort of dark mode here uh if i want to have alternating highlights and so forth there's so many different stylizations of tables that i could do myself but i care about making a phone book not about reinventing these wheels so if i read the documentation closely it turns out that all i need to do is add bootstrap's table class to my table tag and watch with a simple reload what my nowtable.html file looks like much nicer right might not be what you want but my god with like two lines of code i just really prettied things up and so here then is the value of using something like a framework it allows you to actually create much prettier much more much more user-friendly websites than you might otherwise be able to make on your own certainly quickly in fact let's iterate one more time on one other example before we introduce a bit of that code let me go ahead and open up search.html from before which recall looks like this and search.html on my browser was this very simple google search and suppose i want to reinvent google.com's ui a bit more here's a screenshot of google.com on a typical day it's got an about link a store link gmail images these weird dots sign in their logo it's not appearing well on the screen here but there's a big text box in the middle and then two buttons google search and i'm feeling lucky well could i maybe go about implementing this ui myself using some html some css and maybe bootstrap's help just so i don't have to figure out all of these various stylizations well here's my starting point in search.html let's go and add in bootstrap first and foremost so that we have access to all of their classes that are reusable now and let me go ahead and figure out how to do this well just like stanford's site had like its nav navigation bar using a ul but they changed it from being a bulleted list to being left to right i bet i can do something like this myself so let me go into the body of my page and first based on bootstrap's documentation let me add a div called a div with a class of container fluid container fluid is just a class that comes with bootstrap that says make your web page fluid that is grow to fill the window so that way it's going to resize nicely i'm going to go ahead and fix my indentation here if you haven't discovered this yet if you highlight multiple lines in vs code you can hit tab and indent them all at once so now i have all of that inside of this div now just like in stanford's site let's create an unordered list that has maybe an li called with a class of nav item and then in here whoops in here let me go ahead and say uh a href equals https colon slash about.google which is the real url of google's about page and i'll put the about text in there then i'm going to close my li tag here and i want to do one other thing because i'm using bootstrap bootstrap's documentation if i read it closely says to add a class to your links called like nav link and text dark to make it dark uh like black or dark gray instead of the default blue all right so i think i have now an about link in the navigation part of my screen let me go ahead and save this and reload all right so not exactly what i wanted it's a bulleted list still so i need to override this somehow let me read bootstrap's documentation a little more clearly and let me pretend to do that for times sake if i go under content oops if i go under components and i go to navs and tabs long story short if you want to create a pretty menu like this where your links are from the left to the right just like stanford i essentially need html like this and this is subtle but i left off this class i should have added a class called nav on my ul so that was my bad let me go in here and say add class equals nav and then again this class nav item bootstrap told me to nav link text dark bootstrap told me to let me go back to my page here reload and okay still kind of ugly but at least the about link is in the top left hand corner just like it should be in the real google.com now let me whip up a couple of more links real fast let me go and do a little copy paste so i bet next week we can avoid this kind of copy paste let me change this link to be store.google.com the text will be store let me go ahead and create another one here for gmail so this one's going to go to officially how about technically it's www.google.com gmail normally it just redirects and let me grab one more of these and for google images and i'm going to paste this whoops i'm going to come on i'm going to put this here too this is going to be images and that url is img hp is their url all right let me go ahead and reload the browser page now it's coming along right about store gmail images it's not quite what i want so i'd have to read the documentation to figure out how to maybe nudge one of these over to start right aligning it and there's a couple of ways to do this but one way is if i want gmail to move all the way over and push everything else i can say that add some margin to the gmail list item margin start auto this is in bootstrap's documentation a way of saying whatever space you have just automatically shove everything apart and now if i reload the page again now voila gmail and images is over to the right all right so now we're kind of moving along let me go ahead and add the big blue button to sign in so here with sign in let me go ahead and over in my same nav let me go ahead and create for instance uh we want a button so i'm going to go ahead and do this as follows yeah so let's go ahead and do one more li class equals nav item and then inside of this li tag what am i going to do turns out there is a class that can turn a link into a button if you say btn for button and then button primary makes it blue the href for this one is going to be https accounts.google.com service login which is literally where you go if you click on the big blue button the role of this link is that of button and then sign in is going to be the text on it if i now reload the page now we're getting even closer although it looks a little stupid notice that sign in is way in the top right hand corner whereas the real google.com has a little bit of margin around it okay that's an easy fix too let me go back into my html here let me add margin dash three this two is a bootstrap thing they have a class called m something the something is a number from like one to five i believe that adds just some amount of white white space so if i reload now okay it's just a little prettier and now let me accelerate just to demonstrate how i can take this home let me go ahead and open up my pre-made version of this whereby i added to this some final flourishes if i go to search 2.html i decided to replace their logo with just this out of a cat and notice that i re-implemented essentially google.com here's a text box here's two buttons even though they're a little washed out on the screen i even figured out how to get dots that look pretty similar to google's and if we view source you can see how i kind of finish this code if i go to view developer tools and i go to elements and i go into this div and i go into this div you'll see that here's my image tag for happy cat and i added some classes there to make it fluid in with 25 of the screen if i go into the form tag this is the same form tag as before but notice i used button tags this time with button and button light classes and then i stylize them in a certain way and so in the end result if i want to go ahead and search now for birds and click google search voila i've implemented something that's pretty darn close to google.com without even touching raw css myself and now here's the value then of a framework you can just start to use off-the-shelf functionality that someone else created for you but if you want to make refinements you don't really like the shade of blue that bootstrap chose or the gray button or you want to curve things a bit more that's where you can create your own css file and do the last mile sort of fine-tuning things and that tends to be best practice stand on the shoulders of others as much as you can using libraries and then if you really don't like what the library is doing then use your own skills and understanding of html and css to refine things a bit further but still after all of that all of these examples we've done thus far are still static other than the google one which searches on the real google.com let's take a final five minute break and we'll give you a sense of what we can next do next week onward with javascript see you in five all right so i think it's fair to say we're about to see our very last language next week and final projects are ultimately going to be about synthesizing so many of these thankfully this language called javascript is quite similar syntactically to both c and python and indeed if you can imagine doing something in either of those you can probably do it in some form in javascript the most fundamental difference today though is that when you have written c code and python code thus far you've done it on the server you've done it in the terminal window environment and when you run the code it's running in the cloud on the server the difference now today with javascript is even though you're going to write it in the cloud using vs code recall that when a browser gets the page containing this code it's going to get a copy of the html the css and the javascript code so javascript that we see today is all going to be executed in the browser on users on macs pcs and phones not in the server javascript can be used on the server using an environment called node.js it's an alternative to python or ruby or java or other languages we're using it today client side which is a key difference so in scratch let's do this one last time if you wanted to create a variable in scratch setting counter equal to zero in javascript it's going to look like this you don't specify the type but you do use the keyword let and there's a few others as well that say let counter equal zero semicolon if you want to increment that variable by one you in javascript could say something like you can say something like counter equals counter plus one or you can do it more succinctly with plus equals or the plus plus is back in javascript you can now say counter plus plus semicolon again in scratch if you wanted to do a conditional like this asking if x less than y it looks pretty much like c the parentheses are unfortunately back the curly braces here are back if you have multiple statements in particular but syntactically it's pretty much the same as it was for if for if else and even for its else if else unlike python it's two words again else if so quite quite like c nothing new beyond that if you wanted to do something forever in scratch you'd use this block in javascript you can do it a few ways similar to python similar to c you just say while true in javascript booleans are lowercase again just like in c so it's lowercase true if you want to do something a finite number of times like repeat three times looks almost like c as well the only difference really is using the word let here instead of ins and again you'll use let to create a string or an int or any other type of variable in javascript the browser will figure out what type you mean from context in c we would have said int instead ultimately this language and that's it for our tour of javascript syntax there's bunches of other features but syntactically it's going to be that accessible relatively speaking the power of javascript running in the user's browser is going to be that you can change this thing in memory think about most any website that's at all interesting today that you use it's typically very interactive and dynamic if you're sitting in front of gmail on a laptop or desktop with the browser tab open and someone sends you an email all of a sudden another row appears in your inbox another row another row how is that implemented honestly it could be an html table maybe it's a bunch of divs top to bottom the point though is you don't have to hit command r or control r to reload the page to see more email it automatically appears every few seconds or minutes how is that working when you visit gmail.com you are downloading not just html and css with your initial inbox presumably you're downloading some javascript code that is designed to keep talking every second every 10 seconds or something to gmail servers and they then are using their code to add another element another element another element to the existing dom document object model which is the fancy term for tree in memory that represents html so that the web page can continue to update in real time google maps same thing if you click and drag and drag and drag your browser did not download the entire world to your mac or pc by default it only downloaded what's in your viewport the rectangular region but when you click and drag it's going to get some more tiles up there some more images some more images as you keep dragging using javascript again behind the scenes so let's actually use javascript to start interacting with pages how can we do this we can put the javascript code in the head of the page in the body of the page or even factor it out to a separate file so let's take a look here is a new version of hello.html that during the break i just added a form to because it'd be nice if this page didn't just say hello title hello body it said hello david hello carter hello whoever uses it i've got a form that i borrowed from some of our earlier code and that form has an input whose id is name and who's uh that also has a submit button but there's no code in this yet so let's add a little bit of javascript code as follows suppose that when this form is submitted i want to greet the user how can i do that well let's do it the somewhat messy way first i can add an attribute called on submit to the form element and i can say on submit call a function called greet close quotes unfortunately this function doesn't yet exist but i can make it exist but there's another detail here when the user clicks submit normally forms get submitted to the server i don't want to do that today i want to just submit the form to the browsers keep on the same page and just print on the screen hello david or so forth so i'm also going to go ahead and say return false and this is a javascript way of telling the browser even when the user tries to submit the form return false like no don't let them actually submit the form but do call this function called greet in the head of my page i'm going to add a script tag wherein the language is implicitly javascript and has no relationship for those of you who took apcs with java just a similarly named language but no relation i am going to name a function called greet apparently in javascript the way you create a function is you literally say the word function instead of def you don't specify a return type and in this function i could do something like this uh alert quote unquote uh how about hello there initially i'm gonna keep it simple using a built-in function called alert which is not a good user interface there are better ways to do this but we're doing something simple first let me now go ahead and load this page again it still looks as simple as before with just a simple text box i'll zoom in to make it bigger i'm going to type my name but i think it's going to be ignored when i click submit it just says hello there and this is again this is an ugly user interface it literally says the whole codespace url of the webpage is saying this to you it's really just meant for simple interactions like this for now all right let's have it say hello david somehow well how can i do this well if this element on the page was given by me a unique id it'd be nice if just like in css i can go grab the value of that text box using code and i actually can let me go ahead and do this let me store in a variable called name the result of calling a special function called document.query selector this query selector function is javascript's version of what we were doing in css to select nodes using hashes or dots or other syntax it's the same syntax so if i want to select the element whose unique id is name i can literally just pass in single or double quotes hash name just like in css that gives me the actual node from the tree it gives me one of these rectangles from the dom the document object model if i actually want to get at the specific value therein i need to go one step further and say dot value so similar in spirit to python where we saw a lot of dot notation where you can go inside an object inside of an object that's what's going on long story short in javascript there is a special global variable called document that lets you just do stuff with the document the web page itself one of those functions is called query selector that function returns to you whatever it is you're selecting and dot value means go inside of that rectangle and grab the actual text that the human typed in so if i want to now say hello to that person the syntax is a little different from c and python i can use concatenation which actually does exist in python but we didn't use it much i can go ahead and say hello quote unquote hello plus name all right now if i go back to the browser window reload the page to get the latest version of the code type in david and click submit now i see hello david not the best website but it does demonstrate how i can start to interact with the page but let me stipulate that this commingling of languages is never a good thing it's fine to use classes but using style equals quote unquote and a whole bunch of css that was not going to scale well once you have lots and lots of properties same here once you have more and more code you don't want to just put your code inside of this on submit handler so there's a better way let's get rid of that on submit attribute and literally never use it again that was for demonstration sake only and let's do this let me move the script tag actually just below the form but still inside the body so that the script tag exists only after the form tag exists logically just like in python your code is read top to bottom left to right and let me now do this let me define this function called greet and then let me do this document.queryselector let me select the form on the page it doesn't have a unique id it doesn't need to i can just reference it by name form because there's only one of them and let me call this special function add event listener this is a function that listens for events now this is actually a term of art within programming many different languages are governed by events and pretty much any user interface is governed by events especially phones on phones you have touches and you have drags and you have long press and you have pinch and all of these other gestures on your mac or pc you have click you have drag you have key down key up as you're moving your hands up and down on the keyboard this is a non-exhaustive list of all of the events that you can listen for in the context of web programming and this might be a throwback to scratch where recall scratch let you broadcast events and we had the two puppets sort of talking to one another via events in the world of web programming game programming any human physical device these days they're just governed by events and you write code that listens for these events happening so what do i want to listen for well i want to add an event listener for the submit event and when that happens i want to call the greet function like this so this is kind of interesting thank you i have my greet function as before no changes but i'm adding one line of code down here i'm telling the browser to use document.queryselector to select the form then i'm adding an event listener specifically for the submit event and when that happens i call greet notice i am not using parentheses after greet i don't want to call greet right away i want to tell the browser to call greet when it hears this submit event now let me go ahead and um let me go ahead and deliberately i think trip over something here let me type in my name david submit and there we go all right hello david all right but let's let's now make this slightly better designed right now i'm defining a function greet which is fine but i'm only using it in one place and you might recall we we stumbled on this in python where i was like why are we creating a special function called get value when we're only using it like one line later and we introduced what type of function in python the other day yeah so lambda functions anonymous functions you can actually do this in javascript as well if i want to define a function all at once i can actually do this let me cut this onto my clipboard paste it over here let me fix all of the alignment let me get rid of the name and i can actually now do this the syntax is a little weird but using now just these four lines of code i can do this i can tell the browser to add an event listener for the submit event and then when it hears that call this function that has no name and unlike python this function can have multiple lines which is actually a nice thing it looks a little weird there's a lot of indentation curly braces going on now but you can think of this as just being run these two lines of code when the form is submitted but if i want to block the form from actually being submitted i got to do one other thing and you would only know this from being told it or reading the documentation i need to do this function prevent default passing in this e argument which is a variable that represents the event more on that another time that just allows us to prevent whatever the default handling of that particular event is so long story short this is representative of the type of code you might write in javascript whereby you can actually interact with your code the user's actual form and we can do interesting things too built into browsers nowadays is functionality like this let me open up a version that i wrote in advance in today's source 8 directory and if i skip to this one here let me try this version using hello version five and let me go oops no hello version six that was all right version six let me type in my name david and oh damn it uh this of course worked earlier let's try this again david oh god oh why is it not working well it's supposed to say hello david using the computer's voice but we'll fix that later on let me give you a taste of examples that do actually work sorry about that i'll have to debug that afterward what else can we do so here's a very simple example that has just three buttons in it one red one green one blue well it turns out using javascript you can control the css of a page programmatically i can change the background of the body of the page to red to green to blue just by listening for clicks on these buttons and then changing css properties just to give you a taste of this if i view the page's source similar code here i can select the red button by an id that i apparently defined on it right up here i can add an event listener this time not for submit but for click and when it's clicked i execute this one line of code and this one line of code we haven't seen before but you can go into the body of the page it's style property and you can change its background color to red this is one example of like two different groups not talking to one another in advance in css properties that have two words are usually hyphenated like background dash color unfortunately in javascript if you do something dash something that's subtraction which is logically nonsensical here so in css you can convert background-color to in javascript background color where you capitalize the c and you get rid of the minus sign what else can we do here well back in the day there used to be a blink tag and it's one of the few historical examples of a tag that was removed from html because in the late 90s early 2000s this is what the web looked like there's a lot of this kind of stuff there was even a marquee that would move text from left to right over the screen and the web was a very ugly place i will admit my very first webpage probably used both of these tags but how can we bring it back well this is a version of the blink tag implemented in javascript tao i wrote some code in this example that waits every 500 milliseconds to change the css of the page to be visible invisible visible invisible because built into javascript is support for a clock so you can just do something on some sort of schedule let me go ahead and open up this example autocomplete let me zoom back out in autocomplete.html i whipped up as an example that has just a text box but i also grabbed the dictionary from problem set five speller so that if i want to search for something like apple this searches that hundred and forty thousand words using javascript to create what we know in the world of the web as auto complete when you start searching for something you sure start to see words that start with that phrase and sure enough if i search for something like banana here's the three variants of bananas that appear in that file and so forth how is that working just javascript when it finds matching words it's just updating the dom the tree and the computer's memory to show more and more text or less and for one final example this is how programs like doordash and google maps and ubereats and so work you have built into browsers today some fancy apis application programming interfaces whereby you can ask for information about the user's device for instance here i wrote a program in geolocation.html that's apparently asking to know my location all right let me go ahead and allow it this time that's something you're comfortable with on your own device it's taking a moment because sometimes these things take a little while to analyze but hopefully in just a moment there are apparently my gps coordinates and as a final flourish today for what you can do with a little bit of html for your structure css for your style and now javascript for your logic which will tie in again next week let me go ahead and search google for those gps coordinates zoom in here on google maps and if we zoom in in okay we're pretty close we're not on that street but there oh there it is actually there's the marker it had put for us we're indeed here in memorial hall so all that with javascript with the basic understanding of the dom and the document object model we'll pick up where we left off next week and now add a back end see you next time you

Channel: CS50

Views: 109,802

Keywords: cs50, harvard, computer, science, david, j., malan

Id: Pawk7o9Tsds

Length: 172min 15sec (10335 seconds)

Published: Mon Nov 01 2021