CC50: Módulo 8 - HTML, CSS, JavaScript

[Music] so [Music] [Music] all right this is cs50 and this is week eight the week of all hallows eve indeed thanks to our friends here in the american repertory theater the stage looks amazing today with some special lighting and some special characters of course speaking of characters this past Week you all explored 50ville for the very first time looking for the rubber duck that had gone missing and thankfully the culprits have been found and allow me to say that a little someone would like to say hello yes even he has rather dressed up for the

occasion but thank you for all the hard work there so this week of course we transitioned to the world of web programming the motivation being that For the past many weeks pretty much all of the code we have written has been focused on command line programs compiling your code interpreting your code but generally just interacting with a fairly mundane uh blinking prompt textually but of course the software that you and i use every day these days is in the form of laptops and desktops in browsers or on mobile devices or apps and today we begin

to transition to a set of languages and a set of Technologies by which you can start to apply all of the past week's knowledge and mental models for procedural programming to a much more familiar a much more graphical domain indeed over the course of the next couple of weeks we focus on web programming and the use of languages called html and css and javascript with which today's websites are made and increasingly with which today's mobile applications or apps on your phone are made as well but in order To get to that point in the story

we need to consider what the uh the framework is on top of which we're gonna run these websites or these web applications and so that invites the question of the internet exactly what is the internet all of us use it every day but let's take a couple of volunteers from the audience just to define for us what we mean by the internet all of us are literally on the internet Right now but if you take a step back and think about it what is the internet how might you define it for someone less technical than

you or someone less familiar sophia how would you define it the network of all the computers around the world that are kind of taking in information from the network and also giving it information perfect the internet is this network of networks so if you have a small network In your home a small network or a large network at your company or your university and you start to interconnect all of those networks using cables or some kind of wireless technology you get the internet so to speak a network of networks and this is really the infrastructure

if you will on top of which all of today's applications are run so when you use the web when you use chat when you use slack when you use video conferencing zoom or the like You're using the internet but think of the internet really as the lower level plumbing that gets the zeros and ones from you to someone else and back and the applications on top of that are all implemented ultimately in software and so if we consider then that we've got all of these computers interconnected somehow it stands to reason that we need to

somehow decide as a global community how to get data from points a to point b and beyond and so throughout the Internet are these computers called routers and the at the end of the day they're probably a little bigger than the desktops and laptops with which you and i are familiar but at the end of the day they're the same kinds of devices with cpus central processing units the brains inside of the computer that do all the thinking ram or memory where all of the values are stored and hard disks and where data is persisted

and pictured here for Instance is an image from mit that depicted a few years back what some of the most significant peering points on the internet throughout the united states so each of the red dots here represents essentially one router or one very important place into which a lot of cables come in and then go out and interconnect all points of the country and then the story continues well beyond the united states these days using Oceanic cables and other wireless or satellite technologies or the like so suffice is to say there's sort of this mesh

this interconnection of all of these different computers and intern networks throughout the world which is to say that there's many different paths that data can take to go from point a to point b there isn't necessarily a line between you and facebook.com or stanford.edu rather there's a whole bunch of routers Sometimes a handful sometimes as many as 30 that will relay your data from left to right to up to down or in some other direction in order to get data from you to the web server that you're trying to contact and then back to you

with the server's response so how does all of this work well decades ago humans essentially had to get together and decide as a group what standards they were going to use or more specifically what protocols all of these Computers are going to speak a protocol isn't so much a language as it is a set of conventions right back in healthier times you and i if we were meeting each other in person might extend a hand and if i did this you would immediately know that you should probably extend your hand too and we would have

a physical handshake and that's like a human protocol i initiate a communication with you by extending my hand you acknowledge that communication by extending your Hand and then that sort of interaction is complete so we have these human protocols in the world of computers they're similar protocols but obviously it's all zeros and ones so if the first computer sends this pattern of zeros and ones the other computer should reply with a different set of zeros and ones and so these protocols we're about to discuss just standardize what those patterns of zeros and ones are or

really what all of the messages are going back And forth and two of the protocols most commonly used to get data on the internet from point a to point b are called tcp ip tcp and ip are two separate protocols but they're so often used together that you typically mention them in one breath tcpip and this is these are acronyms you've probably seen maybe on your mac or pc or somewhere on your phone settings and it refers to essentially two sets of conventions that computers Use to get data from one point to another so what

do we mean by data and what do we mean by moving things between point a and point b we'll just consider it sort of as an old school envelope whereby if you wanted to send a letter to someone else in the world you and i would probably reach for a piece of paper back in the day we would pick up an envelope and we would write our note on that piece of paper put the paper in the envelope and then the most important Step after writing the actual message would be to address the envelope and

of course in the real world you would put the recipient's address typically in the middle of the envelope you might put your return address in the top corner of the envelope and then maybe postage or something like that but we humans have pretty much standardized through all of the postal systems that kind of convention when using envelope so the metaphor here is that the envelope and The message they're in are generally thought of or referred to as packets packets of information and this would be the physical incarnation of what computers ultimately are just going to

do using zeros and ones so let's tease apart the two sets of conventions they use for actually putting data in these envelopes addressing these envelopes and sending them out from point a to point b let's consider first ip ip stands for internet protocol and pretty much any Mac and pc and iphone and ipad and android device these days has been designed by apple or google or someone else to understand ip it's as though those companies have written software running on those devices that make sure that those devices all support ip just like i was taught

presumably by some human this human convention of shaking hands back in the day ip internet protocol Simply standardizes how computers address each other so in our physical human world if you wanted to send me an envelope for instance you might write to harvard's computer science department at 33 oxford street cambridge massachusetts zero two one three eight usa that is presumably a unique postal address that addresses the computer science building on campus so that if you drop an envelope in the mail in california or anywhere abroad it should Eventually via some number of hops and mail

carriers and the like make its way to that particular address computers then have i similarly unique addresses known as ip addresses and so when your computer mac pc phone whatever sends data from itself to another server the address that it writes on the outside of that virtual envelope is the ip address of the remote server so for instance if i were to send a message to you i would figure out what your ip address is i Would write that ip address virtually on the outside of this envelope i would probably write my own ip address

on the top left hand corner of this metaphorical envelope and then i would send it out on the internet and what does that mean it would mean i take that envelope and i hand it to the nearest router so it turns out when you're at home you actually have a router of your own it's that device that connects to your cable modem or dsl modem or Something like that if you're on campus like at a place like harvard or yale harvard and yale have their own routers so your computer when on campus just knows to

hand data off to that and if you're at home using um or if you're elsewhere in the world like in starbucks or an airport similarly are there routers there so your computers generally know where the closest router is and then router's purpose in life is again to figure out does this packet go Left right up down so to speak in order to get it closer to its destination but this sort of is a chicken in the egg if i want to send you a piece of information i need to know your ip address but i

don't really know your ip address until i know where you are so there is this uh other system that you've probably seen in acronym for two called dns domain name system and this is a technology that's deployed throughout the internet that's supported By max pcs and phones these days that just translates what we you and i would typically call domain names or fully qualified domain names from those english-like or human readable characters to the corresponding ip addresses right there's a reason that companies do not advertise their websites as being a numeric ip address none of

us would ever remember them they instead advertise them as microsoft.com and google.com and new yorktimes.com Dns is a technology that your mac and pc and phone support that know when a human types in one of those human readable addresses a domain name dns converts those names to the ip addresses so literally if you type in harvard.edu or yale.edu enter into your web browser your mac or pc quickly looks up the ip address of that web server using the software that came with the mac or pc and converts it to the corresponding ip address and then

Writes virtually on the outside of the envelope the ip address of harvard or yale's web server before sending it out on the internet so these are just services dns is a service that your own isp internet service provider provides when you're on campus it's harvard or yale when you're at starbucks it's probably starbucks when you're in an airport it's the airport when you're at home it's your own internet service provider like verizon or comcast or the Like so the world just decided to use that technology as well and lastly one other acronym for now tcp

tcp or transmission control protocol is a solution to a couple of problems one of which is that it tends to be pretty convenient for individual servers on the internet to be able to do multiple things right you can like you there's lots of things the internet can do the servers can host email they can host websites they can Host chat servers video conferencing i mean that's already a growing list of features of software that you can use on the internet and it would be nice financially administratively if one server could do multiple things at once

and indeed they can so when a computer receives one of these virtual envelopes and that computer that server happens to support multiple services email web chat video whatever It looks at the envelope for one additional piece of information and that piece of information is known as a port number p-o-r-t number which is just a small integer that the world has decided represents specific services so for instance in the world of tcp the world decided years ago that our computers should virtually write the number 80 on these envelopes after the ip address to signify that this

is a request for a web page or 443 on the outside of the Envelope if it's a secure request for a web page using something called https more on that in a bit and there's other numbers as well email has its own unique numbers zoom has its own unique numbers and all these other internet services that you and i might use every day have their own unique tcp ports so that companies and people can have one server doing multiple things but upon receipt of one of these envelopes the server can look at it and be

and realize oh this is A request for email this is a request for a web page this is a request for chat or something else all together now notably two tcp also handles delivery and it's the part of the protocol that also ensures that when you send data from point a to point b if any data gets lost because literally something's wrong with one of those routers or because maybe uh the one of those routers got overwhelmed and just Received way more packets at once than it can handle that could happen because these computers have

of course finite memory if you send too much data through one the internet might get congested your video might buffer and a whole bunch of other symptoms might arise so tcp also handles the process of retransmitting data as needed if any of these packets is lost on the internet literally tcp will also compel your mac or pc or phone to re-send that data as Well but what's notable about the internet is that data doesn't necessarily follow one specific path in fact if you send multiple packets from one person to another those packets might actually take

different routes each time and this is actually a feature not a bug so to speak because you can imagine servers getting congested or problems needed to getting needing to be routed around and so tcp also supports with other protocols an adaptive Solution to this problem whereby maybe your data will go this way sometimes maybe it'll go this way some other times but this is why in part that sometimes your internet speeds are variable because again these routers in between might be different or might be a little bit overloaded so we thought we tried to tell

this story by enlisting the help of some of cs50 staff in fact brian let me start with you um would you mind taking on the role in just a moment of playing A web browser someone's own mac or pc or phone and request of me maybe something silly like asking me for a picture of a cat yeah sure so if i want to ask you some web server for a picture of a cat i need to send a message to you in order to send that request to you so i might write down my request

on a sheet of paper and i'll just put that request inside of an envelope and then i would have to label that Envelope with all the information we talked about in particular with your ip address that i might look up with dns and then i can send that envelope off all right and i think we need a little bit of help here because brian and i are in different places and so he and i uh can't just hand the envelope from one to the other so let's go ahead and list the help of cs50 staff

here uh also who have uh chimed in here on zoom and see if we can't route this web this request from Brian who's playing the role of a web browser to me who'll play the role of a web server in order to receive this request for a cat so here we go let's see if we can enlist the team here [Music] [Music] all right well thank you to phyllis for having handed me this envelope and what we have now is the request that brian sent me i'm gonna go open it up and i did see

a message inside requesting a Picture of a cat which is not uncommon on the internet so now if i'm the web server and i actually have an archive of pictures of cats i'm going to go ahead and respond to brian with one of those cats but to do so i'm going to go ahead and have to look up on my hard drive or somewhere in the computer that picture of a cat and and here's one here so i'm gonna go and send brian this very happy cat i've got some envelopes of my own and i'm

gonna go ahead and write uh Brian's ip address on the middle of this envelope i'm gonna put my ip address on the top left of this envelope and then maybe any other identifying information i need and then i'll go ahead and put the cat into the envelope but of course this isn't really going to fit and this is actually quite commonly the case anytime a computer is trying to transmit a decent amount of data whether it's a big image or maybe it's an even bigger video file for equity's sake it tends to Be good for

computers to chop up large packets into multiple smaller packets in fact you might have heard of something called net neutrality or more technical topic known of quality of service in a nutshell net neutrality speaks to just what kinds of decisions computers should make when it comes to prioritizing data and a common convention is historically that all of us should chop up our large packets into smaller packets send them out so that they can get then co-mingled With other people's packets and we all sort of reach our destinations at the same rate net neutrality as an

aside is all about an interest by some parties and prioritizing maybe the data from certain companies that pay a bit more and so this really speaks to just use or maybe abuse of these basic primitives here but this is not fair for me to try to cram this one big image into an envelope so i'm going to literally go ahead and tear the picture in half Essentially chop the packet into two let me go ahead now and put this into the envelope because it'll fit a little more easily so i've got one packet of information

for brian i've got now let's see one more packet of information for brian that i'll fit the other half of this image into but i think i'm gonna have to do something else before i drop this out on the internet and hand it back to phyllis to send out back to brian i might need Some additional information on these envelopes i've already got brian's ip in the to field i've got my ip address in the from field i've also jotted down the port number that i should use for brian and my own return port number

and those are decided typically by my mac or pc but i feel like i probably need a little more information what more should i virtually write on the outside of this envelope to make sure That the data is received as intended any intuition no familiarity with tcpip assumed here but if brian's about to now get two envelopes what additional data should i perhaps give him great brian confuses the top of the photo with the bottom so you need somehow to tell brian that this is a top and this is the bottom a link maybe to

converge them perfect and so we need to make sure brian knows the order in which These packets should be reassembled so that he indeed gets the cat the right way and not the wrong way for instance so you know what probably suffices is for me to add what we'll call a sequence number to each of these packets which is essentially a number which you can think of as one of two and on the other one two of two so that brian knows when what order to reassemble the packets but also more importantly in case one

of the packets or both of them gets lost or Somehow dropped by one of the routers along the way there's enough information on those packets to enable me and him to recover that and resend packet one and or two as needed so let's go ahead and do this let me go ahead and enlist the help of the team starting with phyllis here and phyllis if you'd like to go ahead here and [Music] all right of course that's only half of the problem so i'm going to go ahead now And send the second packet finally in

an ideal world i would actually send these out in parallel but there's no reason that they couldn't still follow different paths in fact this one i worry might take a little bit more time let's see [Music] [Applause] amazing brian do you want to go ahead and open up your envelopes and reassemble them yeah so i now have two Envelopes i guess i'll open up the one that says one of two first and it is the top half of the cat and then i'll open up the other envelope which is two of two and that is

the bottom half of the cat and so together i think i now have the full cat wonderful well thank you to brian into the whole team and so to recap ip is this protocol the set of conventions That standardizes what gets written on these envelopes it's how computers uniquely address each other with numbers of some sort tcp governs a few different things but among them is this numbering of services like 80 for insecure web traffic or 443 for secure web traffic that ensures that the data gets from one point to another and is handled by

the right application running on that particular server dns then is what we used to begin with if Brian had his own domain name my computer would have had to look up his ip address or conversely he would have had to look up mine so that we humans who are actually using the internet in a human-friendly way don't have to remember ip addresses which again are just numbers but instead can remember things like harvard.edu yale.edu and the like so that then is the internet the fundamental infrastructure the plumbing on top of which we now have the

ability To get data from point a to point b and so in some sense if you're comfortable with that we can now sort of abstract the internet away and just think of it as being a mechanism that gets data from one point to another and so long as we can now assume that we have this fundamental public service that gets data from one point to another now we can start to build on top of it in terms of software and other languages and actually use it for interesting things But before we forge ahead to do

those things any questions or confusion we can clear up on tcp or ip or dns or the internet or routers or any of these other new terms grid back to you i have a question so um does shopping the information create any problem because um i don't know a piece of information can go there for two seconds and another one for three seconds does It create any problem for the user really good question these packets can take different durations of time and even though i did stipulate that they should go out to phyllis's hands roughly

at the same time even if she needs to pass them in two different directions there can absolutely be delays and in fact typically you and i as humans will start to notice delays if packets take more than 200 milliseconds to get from point a to point b after that it looks Like there's a bit of delay and certainly if it's two or three seconds you'll really notice it at that point it's not necessarily a problem brian hopefully would patiently wait for the second half of the cat for some amount of time if he only received

one packet eventually he as a human and in turn he has a computer would probably get a little anxious and would ask me to retransmit a packet if it doesn't arrive after 5 seconds 10 seconds 30 seconds These timeouts can typically be specified by the software running on the person's computer but at that point you and i would certainly notice the difference all right so if we now have this ability fundamentally to get data from point a to point b what is actually inside of the envelope that brian sent me and what was inside the

envelope i sent him besides just the picture of a cat well for that we Transitioned to another language or another protocol rather called http hyper text transfer protocol and this is an acronym you've probably seen or typed bunches of times it's of course what appears at the beginning of urls uniform resource locators which are uh the tools that you and i use to actually figure out what uh what website or what image we actually want to request of the internet so the web you know the world Wide web is really just one of many services

that run on top of the internet the web gives us web pages zoom gives us video conferencing uh other tools give us text chatting voice chatting and the like so the web is really just an application on top of the internet it's hands down the most popular application but it really is just an application it's a service that's using that underlying plumbing so http is a different protocol that really governs What goes inside of these envelopes tcp governs what goes outside the envelopes http governs what goes inside of the envelopes assuming we are talking about

web browsers and web servers and not video conferencing or something else so with http it comes with a few different commands or of a pretty limited vocabulary two of which are the most important terms to know which is get and post these are literally english verbs and they are two of the commands if you Will that http supports and what brian probably did inside of that envelope is he probably literally wrote down get cat or something like that post is used for other applications that we'll get to before long but get is the operative word

and it literally is how a browser will request or get information from a server so somewhere in the envelope brian sent me was the english word get probably bought followed by cat.jpeg or something like that there's probably a Bit more information but the essence of http means that if brian wants something from me and he's the browser and i'm the server he should start his request with the standardized verb get followed by the name of the file that he wants to get so let's put this now into the context of one of the more familiar

urls so here's for instance a canonical format of a url and let's highlight a few features of it so first https increasingly you're Seeing this on the web even if you don't type it it's often automatically appearing in the address bar of your browser because browsers or web servers are adding it for you the s just refers to a secure version of http and we'll come back to this topic of security next week and beyond too but in the context of http this just means that the data between me and brian and vice versa is

encrypted somehow it's way better than caesar or other ciphers it's way more Mathematically sophisticated but it essentially just scrambles the information so that brian knows he's asking for a cat i the web server knows he's asking for a cat but if any of you or any of the tfs who were playing the role of routers sort of maliciously or nosely opened the envelope instead of handing it off to the next staff member they wouldn't understand what's inside the envelope because it would look like similar to caesar and other ciphers sort Of like random zeros in

one so https just means that the contents of these packets are encrypted what else is salient about these urls well here's what we call a domain name odds are most everyone knows what a domain name is and it's typically two phrases something dot something else and example.com is of course an example here but harvard.edu.edu and millions of others these days to the end of that though is what we would Typically call the top level domain or tld this is just uh the type of website historically that you're trying to visit dot com meant commercial dot

edu meant education dot net meant some kind of network dot org is an organization that's no longer really the case in fact there's hundreds perhaps even thousands of top level domains nowadays that you can buy domains in that try to categorize Things sometimes but there's no hard rules around most of those top level domains you have to be an accredited educational institution to use edu you have to be in the us military to do mil they're similar constraints in other countries who have their own two character country code tlds like u.k for united kingdom.jp for

japan and many others each country is free to standardize as it sees fit but you and i can buy a com A dot org a dot net a dot u s a dot there's many many many others and if you go on wikipedia you can see a nearly exhaustive list but this just tends to categorize the type of website that it is besides that there's this prefix this generally known as a host name and www is just a human convention years ago pretty much any server on the internet that had a human friendly name like

this Www.example.com this was just meant to connote to the user that oh www this must be the address of a web server and not a mail server not a chat server or something else it's not strictly required it's just human convention and odds are you and i when you visit websites you probably don't even bother typing this in anymore but it is a historical feature that allows a visual cue clue typically to the humans as to what type of server it is So besides that there's this one hidden piece of information as well if you

just want to visit example.com's homepage you might just type this url or even just type example.com and hit enter and let the browser redirect you so to speak take you to this canonical form of the url but very often you're technically requesting a specific file and if not mentioned that file name is typically index.html it can be other Things as well depending on the language or the server technology that someone's using but implicit at the end of urls is often the name of a file brian might have specifically requested cat.jpg but if he were requesting

not a picture of a cat but a full-fledged web page with text and other information odds are there's an implicit file name there like index.html and this is now important because when we look inside this envelope this is a Piece of information that needs to then be in there so let's take a look at some sample http requests and responses the more technical dive into what brian and i and the staff acted out a moment ago technically speaking when brian sent me a request for that cat he wrote inside this envelope not only the keyword

get and something like cat.jpeg he also specified a couple of other things and let's generalize it now away from cats and just propose this Inside of an http request that is any of these virtual envelopes is literally a request for like get followed by slash if you don't want a cat you just want the default home page followed by a mention of what version of http the browser and server should speak 1.1 is pretty common two is pretty is increasingly common three is even now out there but there's just different versions of the protocol it's

like humans have refined what it means to Shake hands these versions of protocols evolve over time but there's also a line like this host colon www.example.com because just in case i am a particularly fancy server that supports not only example.com but maybe harvard.edu and yale.edu it's possible long story short for companies nowadays to host multiple websites and multiple domains on the same server this little clue inside the envelope make sure it's that it goes to example.com or Harvard.edu or yale.edu if all of these entities are sharing the same physical server so more specifically a request

might look instead look like this if you're not just requesting the default home page but you want a specific file it might say slash index.html instead what does my response look like so i've gotten brian's envelope now i'm going to go ahead and respond with my own one or two or more envelopes inside of mine yes is gonna go pieces of that cat but some Additional information as well per the protocol so my response just like in the human world i might extend my hand if i see brian initiating handshake i'm gonna respond with something

like this http 1.1 which just reminds this browser what's version i'm speaking then a number which is the status code followed by a shorthand summary like okay 200 okay means i got you i found the cat here it comes piece by piece in these envelopes and i also put in the envelope A mention of the content type if it's a web page i'm going to put text html if it's a jpeg i might instead say image slash jpeg and there's the different content types otherwise known as mime types for all different file formats in the

world well that's not always going to be the case that the response is as simple as that whereby your browser requests information and the server responds with the requested information sometimes the users make Their way to the wrong place so for instance suppose that a browser visits www.harvard.edu the response might not necessarily be okay initially it might not be status code 200. and in fact we can see this let me go ahead and open up on my screen here a browser window that's going to take me to let's say harvard.edu and i'm going to go

ahead and type into the url bar Http colon slash www.harvard.edu enter now all this happened pretty quickly but if i click on the url bar which has been simplified or shortened by chrome at the moment notice where i actually ended up somehow or other my browser did not keep me at http it redirected me so to speak to https this is probably intentional on harvard's part they would rather that i'd be visiting them securely so that if i'm reading articles or other content There's really nobody's business except mine in harvard certainly no one no routers

in between should be able to see this so somehow harvard redirected me from http to https well how can i see this well it turns out embedded in chrome and edge and firefox and safari all of today's browsers there are often developer tools that sometimes you have to enable via certain menu but these developer tools are so powerful and they allow you the user or now you the Programmer to actually see and understand what's going on underneath the hood of these browsers and servers so i'm going to do this in chrome specifically i'm going to

go to view developer and then i'm going to go to developer tools and odds are if you're a chrome user this menu option has always been there even if you never noticed it so feel free to play along at home and then notice this pops up on the top right here i'm going to go ahead and Move it down to the bottom just by clicking the dot dot menu and move the developer tools to the bottom of my screen just so we can see things a little wider and i'm going to go ahead and click

on the network tab up here and when i click on the network tab here i'm going to see a whole bunch of information related to my last request so i'm going to go ahead and do this request again let me go ahead and go back to the url bar and let me go ahead And actually just for good measure let me do this in incognito mode and even though you perhaps are in the habit of using incognito mode if you don't want the browser to remember where you've been or what you've logged in as incognito

mode is incredibly powerful for developers tool so that you can sort of reset the browser state to like a first condition without any previous network browsing showing up in your history so i'm going To do this again now in incognito mode after having opened developer tools http colon slash www.harvard.edu enter and a whole bunch of stuff just flew by the window some of what is this some of which is this chart information which shows me the performance so to grad your question earlier about noticing amount of time you can see that some of the requests

that were just induced vary between a few milliseconds and over 1 000 milliseconds but what i care about for now is this fairly arcane listing down here a whole lot of stuff just flew across the screen and indeed if i zoom in on the bottom simply visiting harvard.edu induces 70 http requests per this mentioned in the bottom left-hand corner it resulted in 6.8 megabytes of information being transferred and in total it took rather atrociously 11.95 seconds so greg like that is slow Relatively speaking well absolutely speaking so what's the takeaway here well anytime you visit

a webpage there's not just the one web page itself with all of the text in it there's probably images maybe videos maybe music and other things all of those get downloaded separately so if brian had asked me for a full web page like the course's home website i might respond not with a single envelope or Two envelopes i might respond with 70 envelopes containing the responses to every piece of media that composes cs50's own website or in this case harvard's but for now let's focus only on the first of these requests if i look at

the first row here in chrome i will see a reminder of where i visited first but notice the status column over here is 301 301 moved permanently it turns out that there's numbers besides 200 that tell browsers what to do 200 just Means okay here's the data you requested 301 means whatever you requested has moved permanently to a different url so let me go ahead and click this first row and you'll see that a whole different set of tabs pops up i'm going to click headers here and now let me define a term when brian

and i are using http inside of these envelopes and i write something like get slash http 1.1 or host colon Www.example.com each of those lines of text is what we'll call an http header it's a line of text inside of the envelope so what we're seeing here is chrome summary of all of the headers that were inside of these envelopes let me go ahead and look at my request headers first i'm going to click view source and i can literally see the raw request that my browser sent to www.harvard.edu get slash http 1.1 host colon

Www.harvard.edu and then a bunch of other stuff which we'll ignore for now but those are all http headers but if i scroll back up here let's look at the response headers now what came back in a different envelope from harvard to my laptop notice here that it's http 1.1 but it's not 200 okay it's 301 moved permanently this is a hint to my browser that uh there's nothing at the url you visited you need to visit a different location Instead to know where i need to go i need to scroll down and find this header

here notice that the third line in the response is location colon https colon slash www.harvard.edu so this is how the envelope that comes back contains a clue to me to say we have moved permanently to the secure version of the website and if i zoom out now and click this little x to close those tabs you'll see that the next Request that my browser automatically sent on its own was to instead if i scroll down here to this request url https colon slash www.harvard.edu and the response he got this time under this general summary here

was now indeed 200. so this is just a simple mechanism that allows a browser and server to intercommunicate in a way that can send them from one location to another and let me make this a little More familiar odds are you have seen not this before explicitly because you as a human would rarely if ever see the number 301 or move permanently until today now that you're a programmer who's using these developer tools but odds are you've seen another number maybe in the chat if you want to just chime in if you're thinking about web

pages and numbers has anyone seen quite often probably a number that maybe now makes a little more sense Brian what are you seeing a lot of people saying 404 i also saw a 500 and a 502 yeah so 404 is the code that humans adopted years ago that just signifies not found so if you visit an incorrect url or an old url that's no longer exists on a server for maybe an old cat that's been deleted the server will respond not with 200 okay but with 404 not found thereby telling your browser to display some

kind of error message uh weirdly browsers years ago weren't Especially user friendly and then browsers just told us humans 404 404 which frankly is not very user friendly but all it boils down to is this little hint inside of the response envelope coming back that indicates uh that something went wrong that something was not found and there's a whole list of these status codes and this is certainly not something you need to memorize but as we focus more and more on web programming You'll just get naturally familiar with some of these there's other ways of

redirecting the user from one place to another 302 and 307 can be used for efficiency servers can sometimes respond with 304 which essentially means you already asked me that question the cat has not changed on the server use your own copy of the cap so long story short if brian's own browser were smart it would cache c-a-c-h-e that is remember the cat that he just downloaded From me so that if brian hits reload or he comes back to that same website again and wants to see the cat again it just his browser loads the local

copy instead of bothering me the web server and wasting time milliseconds sending another cat 304 would just say the cat is the same use your own local copy then there's others you might have seen 401 or 403 before which refer to like not being logged in correctly or something like that 500 is actually bad and in fact i can pretty much guarantee that over the next couple of weeks all of you will experience your very first of several http 500 errors that's going to mean next week that you screwed up with your code and you

actually wrote buggy python code that just meant the whole server didn't know what to do and that's an internal server error fixable and will help you debug it but indeed that's quite common as well 503 just means the Server might be overloaded in some way and so service is unavailable and there's others dot dot dot as well so we can actually have a little bit of fun with this in a couple of different directions it turns out that if we send this http request we can take a look at what comes back and let me

go ahead and do this instead of using my browser i'm going to use a command line tool which tends to just be a little Cleaner because i don't have to fuss around with all these buttons let me go ahead and use a program called curl and curls purpose in life is just to connect to a url and it's not going to bother showing me the webpage or any of the content it's just going to show me the http headers if i use a command line argument of dash capital i and now i'm going to go

ahead and do http colon slash safetyschool.org And i'm going to go ahead and hit enter and this is my mac now sending one envelope to safetyschool.org containing get that verb requesting the home page they are presumably going to respond to me with another h envelope inside of which is some kind of response maybe it's a 200 maybe it's something else all right it looks like forgive me that safetyschool.org has moved permanently per this 301 to this new location www.yale.edu Sorry and in fact we can do this if i oh copy this url and let me

go into a browser i'll use incognito again so that i don't have any uh past history i'm going to go ahead and hit enter and voila the visual effect is just as real as the headers would imply so uh indeed the funny thing about this joke is that someone on the internet has been paying for the domain name safetyschool.org for like 20 years now for this joke And the only thing it does is redirect one domain name to another now fair is fair let me go ahead and transition away from safetyschool.org to harvardsucks.org which also

exists and someone on the other side has been hosting this website for some time and in fact if you visit that url uh let's go to harvardsux.org enter you'll actually see a whole website so the yalies really went all out here and you can actually See an amazing hack here whereby at harvardsucks.org there's an old youtube video of an amazing hack or prank that was pulled at one of the harvard yale football games uh some years ago where yale to their credit uh tricked us into spelling out uh with a bitmap if of all things

um we suck so fair spare so in any card a bit of a stretch to connect those to underlying http messages but it all indeed relates to these very simple primitives let me Point out one other thing as well we might also see in the form of http requests even more sophisticated first lines where you're not requesting just slash the default home page you're not requesting slash cat dot jpeg or slash index.html there might also be question marks and equal signs and notice this is an excerpt from an envelope my mac or pc or phone

might send to google.com requesting pictures of cats and in fact let me go ahead and do this on my Browser let me go to https i'm not going to bother using the insecure version at all i'm going to go explicitly to google.com search question mark q equals cats so this is the human version of the url that my mac will translate into this lower level message that's going to be shoved inside of the virtual envelope so i'm going to go ahead and hit enter and voila i now see indeed a whole bunch Of pictures of

cats including some more horrific photos from a movie that didn't fare well as well so that is to say that it seems that once you understand url formats you can begin to pass input to servers and here's now where we bridge past weeks to future weeks thus far when we visited web pages like harvard.edu and yale.edu and the like we're just visiting static web content we're not actually providing user input like you would using getstring or input or Any kinds of command line programs we've written but it turns out that urls do support user input

and they are standardized if you see a question mark and then the name of a variable like q and then an equal sign and then a word like cats that's like the web based analog of a command line program having asked you what is the value of q and the human typing in cats so this is to say there is a way using urls that will actually allow us to pass input to a web Server and indeed that's what's happening when you're visiting google.com but it just boils down to understanding these urls and before we

begin to build some of our own solutions on top of this infrastructure any questions now or confusion on http or status codes or anything we've seen thus far anything at all yeah over to santiago When you want to for example publish a web page um why is it that you have to buy a domain name is that because you're kind of like using memory in some server yeah it's a really good question why do you have to buy a domain name um it kind of boils down to capitalism to be honest um there is a

non-zero cost to running certain aspects of the internet certainly or really all aspects of the internet there are some non-profit and volunteers uh Nonprofit organizations and volunteers that have historically helped govern it increasingly though there's overhead to operationalizing the internet running things like the main dns servers and other features and so there are what are called internet registrars much like a university registrar whose purpose in life is to allow people to essentially rent domain names on an annual basis and indeed when you buy a domain name it's not yours permanently Instead you're paying a yearly

fee once renewal fee every one or two or three years or the like it might range from a couple of dollars to hundreds or even thousands of dollars uh we can go down the rabbit hole talking about domain name squatting whereby if you think of a really cool word and you buy the domain name and someone else comes along and wants it there's capitalism at play there potentially an opportunity for you to sell a domain name to someone Else but in part it helps just regulate exactly who can sign up for domain names and presumably

put some downward pressure on all of them just disappearing if you could just sign up for free for as many as you want other questions or clarifications on not just http but also tcp ip dns or anything else from today's alphabet soup a question came in in the chat if you Have multiple packets that you're trying to send from one place to the other do they have to be sent out one after the other or can you send all the packets out at the same time really good question um we did not think that we

humans could do that very well choreographically using zoom a bit ago so we sent one pack at a time through through the teaching fellows but yes a computer would typically dump all of Those packets out at the same time they would be serialized one after the other but it would happen very quickly and by chance they might all follow the same route through the teaching fellows as routers or they might go in different directions depending on just how congested or how busy the internet is at that moment in time they might arrive out of order

but indeed that's why brian needs to know what the sequence number is on the outside of the envelope so he Can rearrange them in the correct order anything else on your end brian how do the routers know which way to send any particular packet of data really good question how do the writers know so back in the day and in some cases it's literally hard-coded you can think of a router as having essentially like an excel spreadsheet in its memory with at least two columns one of which is an ip address the other of which

is like the Direction it should go out on like right left up and down like the cables aren't going in four different directions certainly but you can think of it in metaphorically in that way it tells the router that if you receive data for this ip address send it out on this cable or if it's for this ip address send it out on that cable and all of these cables are connected to other routers in the same city in different cities across an ocean to some other endpoint That would be very painful though if humans

had to manually configure all of the interconnections we saw on mit's map just a bit ago and so it turns out there's other protocols out there that we won't spend time on in this class but that routers rely on in order to dynamically adapt so long story short there are protocols that will figure out if all of a sudden my packets are not getting through to brian i'm going to start Routing around that dynamically and the routers are going to figure out that does not seem to be a good destination because i'm not getting any

response or it's just taking way too long to hear back so there are protocols that govern how you can decide whether to start dynamically changing those so-called routing tables the the spreadsheet to which i referred earlier all right so we have now at this point an infrastructure known as the internet That allows us to send packets of information from points a to point b by writing addresses and port numbers on the outside of those envelopes we have another protocol called http which is specifically used for web browsers and web servers separate from video conferencing and

chat which have their own set of conventions and protocols but we have a mechanism for get requesting information and responding with information and we know from problem set Four how you can respond with a cat it's just a sequence of bits whether it's a bitmap or a jpeg or something else but we haven't yet seen what an actual web page looks like and indeed if we look a little deeper in the envelope that i'm sending to brian and he's sending to me and you're getting back from harvard and we're getting back from yale we're going

to see another language altogether it's not a programming language per se it's what's known as a markup language which Just means it's more about aesthetics than it is about logic and there's going to be a couple of other languages tucked in there css cascading style sheets javascript which is a proper programming language but let's go ahead and take a five-minute break here and when we come back we'll learn to make web pages themselves all right so when you visit a website requesting the home page or a specific file on the Website exactly what is inside

of the virtual envelope a little deeper down below the http headers that you get back from the server well that language is known as html hypertext markup language which indeed is not a programming language which means there's no loops there's no conditions there's no functions or variables per se it's just text that tells a browser fairly pedantically top to bottom left to right what to display and how so let's take a Look at some examples an html page is going to contain really two different concepts inside of it what we'll call tags or elements and

also attributes well what are those well here is perhaps the simplest web page we can make and this is html itself and you'll see that it's structured in kind of a symmetric way some things are indented like in a proper programming language but there is some symmetry to what's going on here so let's tease Apart top to bottom exactly what we're looking at here this very first line is known as a document type declaration long story short whenever making a modern web page this should just be the very first line of your file no matter

what it signifies that you and i are using the latest version of html which is version 5. in the future this line will probably change as html itself the language evolves as humans add more and more features to it below that notice is A pair of what we're going to call tags tags are things between open brackets that start with a word like html or some succinct phrase like that optionally with something like this word and an equal sign and maybe something in quotes after that but highlighted in yellow here is the first of our

html tags and coincidentally this tag is the html tag and the way it works is as follows when a browser receives an envelope containing text like this it first reads That first line and says okay this file contains html version 5. what's what comes after it oh here is the contents of the web page it says hey browser here comes some html notice down here is sort of the opposite of that statement when you get to the end of this file you'll see a similar looking tag but there's a forward slash in front of the

same word html that's what we'll call a close tag if we think of this as an open tag or if you think of this as a start tag this is An end tag and most tags indeed have that symmetry whereby when you open them once you should eventually close them ideally in the appropriate order notice that you don't have to repeat other stuff when you close a tag you just mentioned the name of the tag to keep it fairly succinct and that means hey browser that's it for the html all right what's inside of that

if we look down below this you'll see that there's this thing here which is what's Going to be called an attribute attributes tend to be short succinct phrases that have some special meaning for that particular tag this particular attribute if you read the documentation for the language html will say that if you add lang equals quote unquote something to your html tag that's going to be a clue to the browser that says hey browser here comes html and by the way the contents of this web page are going to be in english at least in

this Case by default for en every language in the world has its own two-digit or three-digit three-character character or three-character code that can be placed inside these uh quotes that will standardize exactly what the browser interprets it as useful these days if you have like translation enabled in your browser it knows what language the page is written in so that it can help you translate it to your own spoken language all right below that there's Two sets two pairs of tags the head tag here and the body tag here and i've highlighted them both at

the same time because you can think of these as both children of the html tag so if we borrow our metaphor of a family tree and some kind of hierarchy here if you think of like the html tag as being like the parent so to speak this parent has two children a head tag and a body tag each of which is respectively opened and Closed let's consider the first one the head tag what's inside of that so to speak inside of that is the title tag which as you might guess by now is going to

represent the title of the webpage we're writing specifically the title of this webpage is going to be literally and just a goofily hello comma title so that's what you would see in like the tab of this web page let's back up a little bit and look now with the second child of the html tag the so-called body Tag this is going to be the big rectangular region of the web page otherwise known as the body or viewport and here we see that the contents of that rectangular region of the page is going to be literally

hello comma body so that is to say this is the html for a fairly simplistic web page whose title bar in the tab is hello comma title and whose body in the big rectangular region is quite simply hello comma body and it's perhaps helpful now to call out Explicitly that we can think of this a la week 5 is really a data structure even though it's just text inside of that envelope that gets read top to bottom left to right what the browser is actually going to do on your laptop or desktop or phone is

actually build a data structure in memory so microsoft who wrote edge or google who wrote chrome or apple who wrote uh safari wrote code that reads html top to bottom left to right like a big long String parses it that is analyzes it and builds up into the computer's memory a tree-like data structure like this much like for problem set five you built up your own hash table in memory for what was otherwise just a big text file of words so you can see the hierarchy here if you think of the whole file as being

the so-called document we'll draw a node so to speak in this tree here the very first and only child of that is the html Tag indeed every web page has to start with that html tag it has two children as i proposed head and body respectively and then head has a title child and that has a child itself which is just text and just to be a little nitpicky i've deliberately drawn these nodes in slightly different shapes just to connote that html head title and body are indeed all tags opened and closed these ovals here

are just text those are not inside Of ta those are not tags themselves that's just raw text here and here and then the document node is the one random one this is the only thing that's going to start with an exclamation point typically unless you have what we'll call comments in html which are just notes to self that we saw in c and in python there's similar syntax for those all right with that said if this is the simplest web page we can make where do we make it how do we make it so You

could certainly just open up your mac or pc and open up something like textedit or notepad.exe and type this out copy and paste it save the file and open it in your browser but that's not that interesting because if you just save a html file on your mac or pc you are going to be literally the only one in the world who can visit it so ideally you want a server on which you can write and save your html so that other people your users your customers can visit the File via the internet now thankfully

we all have access to a tool already called cs50 ide which itself is a web-based tool for writing code and the code we'll start right now just happens to be in html so let me go ahead and do that let me go ahead and open up a new file i'll go ahead and call this say hello dot html dot html being the conventional file extension and then let me just go ahead and retype that so doctype html says hey browser here comes version 5. Html lang equals quote-unquote en and now notice what the ide is

doing for me for better or for worse depending on your preferences it's going to try to complete your thoughts for you so you can just type less this is increasingly a feature of ides integrated development environments because now i can type roughly half as much now i'm going to go ahead and open the head of the page notice it got automatically closed i'm going to go ahead and open the title of The page that will automatically close as well and let me go ahead and just do something like hello title and then down here outside

of the head tag i'll do my body tag and do hello comma body now strictly speaking this indentation is not necessary if i wanted to be a little more terse and not use as many lines this is totally reasonable as well and it's probably reasonable up to a point if i had a crazy long title i probably should move It to a line of its own but again these details are not going to matter to the computer to the browser reading this but they certainly make it prettier and easier for me the human and presumably

you to read as well so i've gone ahead and saved this file and in the past i would have used like make for c or i would have used python for python but neither of those is applicable because we're not writing or running code i now want to visit this web page and how do i Do that well i need a browser and i'm all set there obviously i can use chrome safari whatever on my own mac but i also need a server and it turns out that cs50 ide insofar as it is already a

web server that we use to write code we can use it as a web server to serve our html as well so a moment a little bit ago when i played the role of a web server i need to essentially implement in the ide that same notion of some program that's just going to listen and listen And listen like i was waiting for brian and anytime i get an http request from anyone's browser i'm going to respond with the appropriate file now we're not going to implement a web server ourselves web servers are kind of

commodity these days anyone can just download or pay for one and use one and indeed the ide comes with one quite simply called http dash server so this is a program pre-installed in the ide it's free and open source you can use it On linux or macs or pcs as well but it's pre-installed in the ide and when i run it what it's going to do for me is start curiously a second web server because the ide itself is already running on cs50's own web server i need to now run my own web server but

in order to distinguish one from the other i'm just going to use a different port and by default the port that the cs50 ide uses is this one 8080. so again by default most web servers in the world to Use port 80 if insecure and port 443 if secure but those are unfortunately already used by cs50 ide itself which is running already on cs50s web server so if i want to use the same server the same computer in the cloud to listen for other requests of my own i'm just going to start my own second

web server in parallel and just have it listed on a different port and that's just so that you and i can run our own web server even though we don't have Control over the ide itself outside of our own accounts now it's a pretty cryptic looking hostname if you will it's this random thing 0cda3813 and so forth but at the end of the day it's just a url notice that it ends in cs50.xyz which is a domain name that we bought and we use solely for this purpose of running web servers on cs50 ide so

if i go ahead and click that and click open voila i will now see a fairly arcane Textual listing of all of the files in the folder in which i just ran http server and let me go ahead and zoom in a little bit and you'll see that there's only one file on there thus far that we've written hello.html so let me go ahead and click on that file and voila there it is hello body my very first page i don't see the title because i'm in full screen mode but let me go ahead and

on full screen myself and sure enough if i zoom in on the title and the Tab of this page it's hello comma title so what has just happened i happen to be using cs50 ide just because it's convenient you and i already have accounts on it we're running our own web server implementing the software version of the role i was humanly playing earlier i'm using chrome as my browser just like brian was our browser in the story before and so when i visit this long url in my browser's bar That the server told me to

visit notice that it ends with slash a hello.html so all in one environment i'm sort of serving web pages and requesting web pages and this is perfect because this is what a real world software developer would do when building their own websites or web applications they want to actually keep everything local and work on it and work on it until they're ready to release it to the world well let me go ahead here and point out one Thing in the tab here and in fact some of you very cleverly are actually amazingly transcribed that url

because i'm seeing more http requests coming in right now live notice that in the terminal window of my ide where i ran http server i'm seeing row by row the requests coming in and so this is kind of a log because my web server is still running and if any of you actually want to type out that same url again if you rewind in time in the video you can Actually visit my hello.html file right now on the internet assuming you're watching lecture live and you can see new rows appearing in my output here but

that's just to say it's useful for us diagnostically but let me go ahead and do something else here for just a moment i'm going to go ahead and in a moment create another file this time to demonstrate some other html tags so let's go back here and In my say i'll keep my terminal window running but i don't really care about the output now so i'm just going to go ahead and minimize it down there i'm going to go ahead and create another file up here called paragraphs.html and let's see if we can introduce some

other features of html i'll go ahead and type out the same as before doctype html my html tag with my lang for english attribute sometimes admittedly the id will get confused if i Sort of start a thought don't finish my thought then try to finish it again and that's fine you might just have to clean up what the ide is trying to do for you to be helpful i'm going to go ahead and create the head tag here i'm going to give myself a title here i'll call this page paragraph so i'll keep it all

in one line just to keep it succinct i'll open up my body and now i'm going to go ahead and type out like five paragraphs of latin text That i'll just go ahead and put right here and let me go ahead and indent this nicely just to make it nice and readable this is your sort of lorem ipsum text which is just sort of latin-like nonsense and here i have five paragraphs of text now so this is different it's way more than just hello body so let me go ahead and save this file let me

go back to my other tab here notice that nothing has changed until i click reload which will reveal the Latest contents of my folder so let me click paragraphs.html and i should see five paragraphs of latin-like text huh no that's just a big mess one massive long paragraph any instincts for what the bug here might be any thoughts on the chat over the raised hand yeah over to ryan at least from the way it's set up it Doesn't look like html has kind of auto line spacing by default so it's not going to kind of

collect them all into this one big string unless you somehow create a space in between each paragraph exactly html like most any computer language programming or otherwise is going to take you literally and if you don't tell it what to do using an html cases these tags it's just going to do some default behavior instead so let me actually go back to Cs50 ide and you know what let me introduce another tag here turns out there's a tag called the paragraph tag and the shorthand notation for that is quite simply open bracket p close bracket

the id is going to try to finish my thought but because i already have the paragraph i'm going to need to manually fix this myself so let me go ahead and open it there and let me go ahead now and just kind of insert a few of these so one There one there one there one there and let me go ahead and copy the close tag one there one there one there and one there and now let me just for style sake indent further and i know that pretty much in every past week i've claimed

that copy paste is bad not really the case with html because if you want multiple paragraphs there's no notion of a loop you can't kind of create five paragraphs of latin like text with html alone so copy paste in This case is the right solution all right let me go ahead now and go back to my other tab and now hit reload nothing's gonna change until you tell it to so just like you would reload a normal website let me reload my own and voila we fixed the problem that ryan identified by now explicitly using

html's paragraph tag and it's deliberately the p tag because html tags tend to be succinct it's fewer characters to type and how do i know It's the p tag you just have to learn it at some point in a class in a book and a website and indeed much like with python as with c we're not going to aspire to teach you the the um laundry list of html tags and attributes that are out there but focus today particularly on concepts and fundamentals so that you can add to your vocabulary quite quickly via any number

of online resources that we'll point you to all right let's go ahead and do this rather than do Everything from scratch let me go ahead and copy this and create another file that i'll call headings.html when writing a paper or writing uh writing or reading a book it's very common to have like chapter headings or section or subsection headings and indeed you can do this in html as well so i'm going to go ahead and introduce a couple more tags here namely the h1 tag which is like the biggest heading tag and i'm just gonna

write the word one here just To keep it simple over here i'm gonna do h2 and i'll say two down here i'm gonna go ahead and say h3 and i'll say three and down here i'll do h4 and then four and then down here i'll do h5 here five and then down here i've ran out of paragraphs but there is a sixth so i'm going to go ahead and give myself one duplicated paragraph just for Demonstration's sake so that we have all six here and go ahead and save it there all right so if i

go back now to my browser and reload it's looking nothing happens because i'm in the wrong file but if i go back i now have a file called headings.html let's click that and it's the same content but now it's kind of getting a little prettier right it's big and bold headings One two three four notice those headings are getting smaller and smaller but that's kind of the convention in a book or an academic paper where your sections and subsections and sub-sub-sections get smaller and smaller and we can customize this if we really want but out

of the box html gives us the ability to even format things like headings like that as well well what else can we do in html well let me go back to my ide let me go ahead and copy paste some of this just To save some time and then we create another file called say list.html turns out html makes it really easy to write lists so here let me change my title to lists and down here if i wanted to have a list of three things like foo bar and baz which are sort of generic

computer science terms whenever you just need placeholders like x y and z and math foobar and baz are what people tend to reach for all right i have a nice Clean list there let me go back to my other tab go back to my directory index here and there's list.html let me click on that and voila same problem as ryan identified again if i don't pedantically tell the browser start a list continue the list keep going end the list it's just going to assume that i just want one big block of text in fact it

preserved white space it collapsed all of those new lines and Tabs into single spaces but that's not what i want so how can i fix this i need some kind of additional tag and it turns out there's a couple of approaches there's the unordered list tag so ul for unordered list which means it's not numbered and then inside of that you can have child tags called the li or list list item foo let me give myself another one bar and give myself another one baz so it's more to type and definitely there's almost as Many

red characters the html which is just being nicely syntax highlighted for me by the ide then there is actual content foobar baz but if i now go back here and reload i get a much cleaner bulleted list and if you looked at the course's website we actually make heavy use of bulleted lists for content and indentation and so forth we're just using a whole bunch of ul tags if by contrast you wanted the computer to number things for you you could Certainly do like this one two three but you can imagine that getting a little

annoying quickly if you want to reorder things or add things in between so computers are really good at doing tedious things so let me change this unordered list to an ordered list using ol instead and if i go back to the other tab reload voila now it's one two three and it's automatically numbered for me i don't have to worry about it At all well let's do one other that speaks to the sort of structure of a page let me go ahead and copy my starting point hello and create a file called uh table.html if

you ever want to lay out tabular data where you have rows and columns because you want to make sense of some financial information or just something akin to a spreadsheet in your own website well how can we do this let me go ahead and call this table and down Here in my body let me introduce the table tag and the table tag is a little more involved because you have to define what are called table rows so i can do a tr tag there and then inside of table rows i can have data so td

for table data let me just put like the number one and let me go ahead and make let me mock up something a little familiar like a phone keypad two and three then let me go ahead and copy this once more And give myself another row with say four five six and let me give myself one more of those with how about seven eight nine and then lastly one more of those just to give myself uh like the equivalent of a keypad and do like the asterisk and then zero and then the pound key let

me save this go to my other browser tab open up table dot html And voila you see something akin to like an old school phone keypad there and there's sort of implicit rows and columns if i wanted to i can make it a little prettier with actual lines or borders in between and around these things but html gives them the ability to layout tabular data using trs for table rows and tds for the columns they're in all right this is all pretty boring and textual and really not the web that you and i all know

so let Me go back here and let's do something a little more interesting let me go ahead and start off a file called maybe image.html and let me go ahead and start with our boilerplate as before i'll rename the type this title image and down here let me go ahead and do something like this let me go ahead and do image how about Source equals quote unquote harvard.jpg it turns out i came with an image of harvard in my eide and let me go ahead and describe it as much too let me add this alt

attribute here harvard university and we'll come back to what this means in a moment but here we have the second tag thus far that actually shows us how to customize the behavior of a tag so the lang attribute earlier customized the behavior of the whole web page by telling the browser here comes a Webpage written in english and down here we have two attributes alt which has a value after the equal sign and then source src which itself has a value after the equal sign you can use single quotes or double quotes but you should

be consistent and you can but each of these attributes should have an equal sign in between the key and the value there so how might i go about doing this well let me go ahead and open Up this file now let me go ahead and reload we should see now image.html and harvard.jpg which i just grabbed from my ide and voila image.html is the original painting of what's adorned our backdrop here for the past several weeks so that's interesting you can link to a specific image like that and what's the role of the alt attribute

so the alt attribute is all too overlooked by new and experienced programmers alike but this speaks to Accessibility not all of us can necessarily see and hear and interact with media in the same way as others and so those who have difficulty with sight or with sound or the like the alt attribute is a wonderfully powerful and so simple mechanism to include on your image tags that literally just describes in english or your own spoken language what it is a human would otherwise be looking at even if they are perhaps blind and cannot actually see

what's There and if they have a screen reader installed software that actually can vocalize text on the screen this incredibly usefully helps people hear what it is that you and i might otherwise only be looking at so be sure to be mindful of those kinds of tags and you would only know that these tags exist by again taking a class reading a book looking at an online reference we're just beginning to add to now our vocabulary and in fact let's take This one step further and do something a little more powerfully and familiar still let

me go ahead and create a file called link.html let me paste my starting point there i'll re-title this as link the web of course is filled with links and indeed hyper text markup language is all about hypertext which is an arcane allusion to links hypertext is context with links that link elsewhere so how might i implement a link in a web page well let me go ahead and in this Page initially just encourage people to visit harvard period let me go back to my other browser window open up now link.html and of course this does

not really do anything i can't click on visit or harvard or anything else and have it do anything because it's obviously just text so how can i actually link the user to some destination well we need another tag it is called the anchor tag abbreviated with a single letter a And it has an attribute of href for hyper reference and hyper reference just means what do you want to link to well let's go ahead and keep it simple let's link to a file i already created image.html and the word i want to link is literally

harvard so on the left of the word harvard i have a href equals quote-unquote image.html and on the right of harvard i have the close tag and again notice just because i had an attribute on the tag does not mean you Need to redundantly copy-paste it in the close tag it suffices to close only the name of the tag let me save the file go back to this page now let me zoom in a little bit and reload and voila now you see the familiar hyperlink that you might see on many web pages where it's

actually underlined and indeed if i hover over that if i hover over that and then click voila we'll find ourselves at harvard university back in 1792 because now what I'm looking at is image.html and in fact let me go out of full screen mode for just a moment to make clear that the url at this point in the story where i see just visit harvard in the page is something slash link.html your url will differ from mine but mine happens to be this long cryptic string because it's my account slash link.html when i click on

the link though notice that i end up at image.html thereby taking me to a Relative url that is a file in my own account if i don't want to link to that file though maybe i want to link to harvard itself it's not sufficient to just do harvard.edu that is not a url www is not a url i need my protocol so to speak either http or better yet https if i save that file now and reload and go back here the text looks exactly the same but notice if i hover over it there's a

tiny tiny tiny tiny little visual clue at the bottom of the screen That says where i'm going to end up and indeed if i click this now notice that my url bar is not going to stay as my ide link.html it's going to whisk me away to the actual harvard.edu and here it's worth noting that chrome and safari and browsers for better or for worse are increasingly simplifying the user experience or ux of browsers i am not literally at harvard.edu if you click or double click on the address bar you'll see where you actually are

and This is for developers or worse for regular users it's probably cleaner just to see the domain name but all of the information is indeed there if you dig for it just a little bit but there's kind of a an exploit here possible there's kind of an exploit here what if i were to do something somewhat maliciously like this like let me change this to yale.edu and leave the word harvard unchanged if I go back now to my other tab and reload it looks different at the moment because it's blue instead of purple purple by

default means i've been there before which we were a few minutes ago blue means i haven't visited before but if i don't really notice that subtlety i might very well think that oh this is the university i want to go to but voila when i click on that wrong place all right silly example but this can really be exploited for ill purposes What comes to mind or what threats come to mind with this very simple mechanism right now that you have the ability to make web pages you have the ability to sort of say you're

going one place but really lead the user elsewhere can you see how this might be abused santiago i think it maybe could be used by um so-called hackers who can insert malicious software into your Computer yeah and they trick you into doing that yeah and trick is the operative word i mean most of us are probably not in the habit of opening up before clicking on a link hovering over it like i did a moment ago and then very paranoically like looking down here to see if am i really going to the right place and

even this can be spoofed you can trick the user into thinking they're going to the Right place but still override this behavior and so if you've ever been the victim of or the near victim of phishing attack p-h-i-s-h-i-n-g fishing refers to trying to trick humans as santiago says via social engineering into doing something that they didn't actually intend and so you can imagine receiving spam in your email inbox that says click this link to visit paypal.com because you need to verify your password or click here to Tell us your social security number this is so

common these days to get emails which it themselves these days are if they're not just text they are html itself when you're looking at any email and gmail that has clickable links or images that email contains html like we're writing here it is trivial to trick users into going places that they didn't actually intend and so among the takeaways for today beyond the mechanics of how to do these things Should be consideration for your own personal security as to how distrusting you should really be of websites because of how simple these mechanisms are and how

they can lead you indeed to the wrong place and recall that a bit ago we wrote this link.html example which had in the correct version a link to www.harvard.edu whose text was the word harvard suppose now that we want to override the browser's default stylization of links which recall if i Now visit in my other tab link.html is pretty boring by default and this has been true for like 20 years links tend to be blue and underlined before you visit them or purple and underlined after you visited them at least once a sort of visual

cue but most websites today including cs50 zone use different colors and different aesthetics for links on a web page with or without underlining different colors maybe even different background colors you can Style these things using css in bunches of ways so how might we do this well let's go ahead and be fair here and say visit harvard or for instance a href equals quote unquote https www.yale.edu uh question mark nope no close bracket yale let's give myself two links that of course if i reload just looks like this both of them are now boring and

purple because we've been to both places already so let me go ahead and add a style tag up here just to keep us in the Same file i'm going to go back to using a style tag rather than introduce a separate file so to keep things simple in my style tag let me go ahead and change these links for instance to have a color of maybe let's make them all red initially f-f-o-o-o and let's go ahead and save that let me reload and you'll see that now both of the links are red and underlined i

don't really like the underline so let's get rid of that let's Change the text decoration of my a tags to be none and again you would only know these properties exist from some form of reference but again just adding to our vocabulary let's reload now and now the underlines are gone but it would be kind of cool like some websites if when you hover over the link at least on a map laptop or desktop the link then underlines drawing your attention all the more to it how can we do that well it turns out that

some you can use what Are called pseudo selectors which are work like this if i want to change the behavior of the a tag but only when a user is hovering over it you literally write the name of the tag colon hover and then inside of this block i'm going to go ahead and say text decoration underline so this will say make everything red and not underlined by default but when the user hovers go ahead and decorate it with an underline so let's go back to The file after saving reload no visual change yet until

i move my cursor up here and voila now it's getting a little more like modern websites now this isn't quite fair to yale that both of the links are red so what if we change the colors of different types of links well let me go down here and i need to distinguish these links in different ways and i could use classes for that but if i've only got one harvard link and one yale link i might as well Uniquely identify them let me go ahead and add an attribute called id of quote unquote harvard and

i'll keep it all lowercase kind of like a variable and then then here i'm going to say id equals quote unquote yale i could call these things anything i want but because there's only one harvard link in one yale link i'm going to add an attribute in html that just lets me verbally uniquely identify each of those links but up here notice what i can do now let Me go ahead and remove the color from here and let me instead say that for any tag that for the tag that has an id of harvard go

ahead and color it as ff000 but if it has an id of yale go ahead and have a color of uh zero zero zero zero ff so that should give me my blue in rgb and notice the new symbol here is the hash symbol so in the world of css a hash symbol before a word means the unique identifier harvard or the unique identifier yale a dot Before a word means the class centered the class large or medium or small and if you don't have any symbol before the word like a hash or a dot

it means literally the tag called a or literally the tag called a when it's being hovered over it so again few pieces of syntax it's not programming code but it is code of some sort here let me save this let me go back to my tab and reload and voila now i have kind of the beginnings of a prettier website where i'm Distinguishing harvard with its underline in red and yale with its underline in blue but only under those certain conditions so we have with css the ability to much more precisely control the aesthetics of

our web pages all right let's go ahead and clarify just a couple of things here let me go up to um one final example and see if we can't now come back to that idea of user input so let me go back to the ide here And let me grab a little bit of starter code from my hello file as before and create one final example here called search.html that's purely html indeed i'm going to name this thing search and then i'm going to down in my body of the page crews another new tag turns

out html also supports a form tag and that form tag can take a couple of attributes one of which is action and this is where you Want to have the form lead the user i'm going to go ahead and come back to that in just a moment the other is method and the method is the http verb to use for now i'm going to use get and here inconsistently it should be lowercase even though we've previously seen it in uppercase inside of the form tag i'm going to have a couple of inputs an input whose

name is going to be q and whose type is going to be search And then down here i'm going to have another input whose type is going to be submit and whose value is going to be quote unquote search as well they're a little different i'm deliberately omitting the name because it's not strictly necessary but where am i going with this well i haven't actually implemented a search engine all i'm doing at the moment is implementing a front end to a search engine a front end to google.com i'm Going to let google itself do the

hard work of actually searching the data the internet for me so i'm going to specify an action of www.google.com search so here we have what is about to be a form you know text boxes and buttons that the user can interact with the action of which is going to be to send the user to this url using get but that url is going to have Automatically added to it by my browser one http parameter so to speak a variable of sorts called q and why this well recall earlier that when i visited google.com i was

able to simulate a search by literally going to https colon www.google.com search question mark q equals cats i claimed that google is designed by the software engineers there to take user input via the url well you and i do not search for things By typing out long urls like that with q equals anything that would be incredibly poor experience you and i just type things into search boxes or forms so indeed if i now go into my other tab here for search.html you're not going to be very impressed by the aesthetics of my form right

now it's just a rectangular text box and a search button but watch what happens my url at the moment ends in search.html I'm going to go ahead and type in something literally like cats and now notice if i hit enter or manually click on the search button my web page which contains an html form because it has an action of that's google's url and a method of get my browser is going to convert that into the corresponding http request and in turn url so that the user is automatically sent to if i double click on

it this full url here and the user's Input is automatically by the browser appended to the url via question mark q equals cat and it's not just cats we now have our own very simple google search engine where we can search for dogs too if we want and notice that the url here changes to be question mark q equals dogs so like this is how the web now works we talked earlier about how the internet works how you just get raw data zeros And ones packets of info from point a to point b this is

now how the web works when you visit a website and don't just want a specific picture of a cat or a dog you want to search for cats or dogs or you want to log into a website or you want to check out of amazon.com providing user input you are always filling out html forms which look essentially just like this they might have more inputs and they might be a little more complicated but they are a Form tag on amazon.com on facebook.com on any website with one or more inputs that when submitted so to speak

via you hitting enter or clicking submit or search or whatever the button is labeled that's how the next request gets submitted to the server so it's a lot and that's not all the html tags out there but that's all the ideas of html right it really is like open tags and close tags some of which Can have zero or more attributes and just understanding that mental model and now via forms we have the mechanism for submitting so to speak user input to search to websites to web servers and just to call out that other verb

here turns out google only supports get for its search program at www.google.com search you can only use get but post is also very common in fact post is a different verb that can be tucked inside of that envelope and post Actually changes what happens in the browser so that q equals cats and q equals dogs does not show up in the url because this is actually one other threat to our privacy right if your little sibling comes over to your browser or your parents after you've been searching on the web they can scroll through often

your entire history of your browser why because literally everything you search for on google or bing or whatever ended Up in the url because of this mechanism and for user convenience your browser tends to cache or save all of those urls now that's minorly intrusive certainly when you have roommates or family members or the like to your privacy but it's especially concerning if you are registering for websites or checking out with usernames and passwords and credit card numbers and things that are even more sensitive long story short post which is just a different verb that

you Can use in http that hides the q equals cats that hides the credit card number equals this that hides the password equals that essentially metaphorically deeper in the envelope it does not put it into the url bar but it still sends it to the server a little more privately all right that was a lot that was a lot of tags all at once culminating in this ability to get to submit user input but any questions then on the ideas the syntax Or the implications of making web pages with this language html nothing on you

brian all good here all right well i'm kind of embarrassed by all of the work i've done thus far because all of these pages are incredibly boring and like very underwhelming and nowhere close to the sort of user interfaces that you and i are familiar with day to day when using the actual web so let me go ahead and close most of these tabs and let's Transition to not focusing on the structure of web pages alone but now focusing on the aesthetics of web pages the stylization of web pages where now your sort of artistic

flair can really come out and we can begin to recreate user interfaces ultimately more like our world of scratch where you actually see colors and shapes and images and sounds but still using these basic building blocks and for this we need a language called css or cascading style sheets This too not a programming language but it is an additional language that you can use in conjunction with html in order to stylize your pages and make them prettier css boils down to the use of what we'll call properties properties are similar in spirit to variables or

more generally they're just more key value pairs and again notice this recurring theme like we introduced dictionaries or dicks in python a couple of weeks ago those are Just collections of key value pairs in the form of a hash table essentially we saw just a moment ago attributes in html which essentially are key value pairs q equals cats is a key equals a value q equals dogs is a key equals a value css has the same idea but because different people invented this they call these things properties instead of attributes but it's the same idea

just a different vocabulary and there's going to be different ways to apply different Properties like color and font size and positioning to html tags using css so how do we get there well it turns out that css is a language that you can use in conjunction with html which is to say you can start with an html page like this like we've already created saying hello title and hello body but you can add some additional attributes and or tags to it to begin to Stylize it you can actually add a style tag in the head

of the web page here pictured here which is another thing we could put inside the head though strictly speaking it can go elsewhere in the body as well alternatively you can link to a file in a separate file and so we'll see a couple of different approaches there but before we do that let's make this more real with some concrete examples let me go ahead and whip up a new example here in a file Called css.html just to demonstrate this new language let me go ahead and start as always with just my raw html with

my doctype html let me go ahead and do my html lang equals english then down here i'll do the head of my page the title of my page i'll just title it simply css the body of my web page and now let's actually do something interesting let me introduce a few more html tags that are available in the language one Is called header and here i'm going to go ahead and say something like john harvard i'm going to make a home page for john harvard the founder of harvard and let me go ahead here and

do a main section of my page and i'm going to say welcome to my home page and then down here i'm going to have a so-called footer and inside of here i'm going to say copyright like copyright symbol john harvard so super simple web page three lines and Just here's three new html tags you would only know this again from a class a book or an online reference but there are tags called header main and footer that don't do anything special they don't make things big and bold like the heading tags did h1 through h6

they're just what are called semantic tags they are more than generic paragraph tags but they help you the programmer and they help the browser know that oh this is the header of your page this is the main Part of your page this is the footer which can help again with screen readers distinguishing what's really important on the page it can help with translation tools like google translate to know what you actually want translated like the main part of the page and not less important info like the header or footer so just three html tags but

you can think of them like paragraph tags but with more uh specific names all right so let me go Ahead and save this file open up not my dogs here but go back to the index and now i have a new file css.html let's click it and voila you know it's pretty underwhelming but it does what it says it's got three lines with this content let's begin to stylize this and try to make it a little more inviting so to do this let me go ahead and add a style attribute with equals quote unquote now

here's where things get a little weird In the world of html and css you do actually or can actually commingle the two languages and we kind of saw this already we saw python code with sql inside of it today we're seeing html code with css inside of it so inside of these quotes i'm going to put some of those so-called properties key value pairs let me go ahead and change the font size of my header to be large and let me go ahead and align the text as centered And notice the pattern here it's new

it's not an equal sign there's not additional quotes it's because again left hand wasn't talking to right hand and different people invented html and css essentially but font size is the name of a css property in aesthetic detail colon is what separates the key from the value and the value in this case is large and i'm choosing large because it's one of the available ones you got Small medium large extra large and a bunch of others as well you can also use specific font sizes or pixel sizes as well text dash align is going to

align text colon in the center now let me go ahead and do something similar here on the main tag let's do font size medium and then text align center and then down here let's do style equals font size small because it's the footer it's less important text align center All right saving the file and i'm sad to say the semicolons are back they're not strictly necessary in all places but i'm doing it for consistency they're definitely needed here to separate keys from other keys let me open up this page again let me hit reload and

voila it's a little prettier it's nothing to write home about really but it has john harvard as large welcome to my homepage as medium and the footer as uh something small so that's not bad and Let me clean this up too this open parenthesis c close parenthesis isn't necessarily that pretty i don't know where the symbol is on my screen but let me go ahead here and let me type out this ampersand 169 semicolon this is weird but this is a feature of html called an html entity which is a numeric code that identifies a

symbol that is often not on your keyboard but you might want to display anyway let me go ahead here and reload And voila if i zoom in now we have a proper copyright symbol and there's other html entities for other symbols as well especially if you can't see them on your keyboard all right what happens after this that's not bad but i feel like there's an inelegance here can anyone recognize in the code i've written thus far even if you've never seen html before is there an opportunity for better design I claim it's correct but

feel free to chime in in the chat can i improve the design and even though i said earlier that copy paste is bad that doesn't mean we can't or is necessary in html that doesn't mean we can can't chip away at it in some places brian any thing jumping out some people are saying that your style attributes are starting to get very long they are getting long and i dare say Redundant even though the font size is changing so that seems kind of necessary text align center text align center text align center that seems unnecessary

right like why am i doing that again and again but here's where the c in css comes in css is cascading style sheets which literally refers to kind of a waterfall effect of these properties so what i can actually do is let me go ahead and remove text align center from each of header main and footer and let Me be a little smarter let me go up to my body tag which is the so-called parent tag for those three add a style attribute there and put text align center there and trust that because body is

the parent any properties it has will cascade down onto so to speak its children thereby allowing me to define text online in one place instead of three let me go ahead and reload the page and voila nothing has changed but i claim now that My page is better designed because i've eliminated that redundancy and made my lines to brian's point a little shorter as well so that's pretty clean but this seems a little bit of a slippery slope if if i wanted to make a larger homepage which surely i might with lots more content having

all of these style attributes all over the place very quickly gets messy and in the real world it makes it hard for you and i to collaborate with better artists Than you or i might be it might be nice for one of us if working on a team maybe for even a cs50 final project one of us does the html one of us does the css this would be a mess if you and i we're trying to collaborate on the same exact file so let's see if we can't take a step toward factoring these out

and keeping html and css separate so how might i do this well let me go ahead here and get rid of all of this let me get rid of all of these style Attributes which again just doesn't feel very maintainable certainly as my page gets longer and let me transition to that other format we saw a teaser for before a style tag not an attribute but a tag that can go in the head of the webpage here and let me go ahead and do something a little different here let me go ahead and say my

header should be text align center My main part should be text align let me do this just like we did in c text align center and then my footer will be text align center and then just for consistency with before font size large down here in main font size medium down here font size small the id is not recognizing all of these keywords but it's okay that some Are white some are blue here so there's still some redundancy here but notice what i'm doing now inside of my style tag it is allowed to use what's

called a css selector and there's different types of selectors but the one we're seeing now is what's called a type selector and it's a bit arcanely named but this just means that if you want to style every instance of a certain tag every header tag every main tag every footer tag you can literally inside of a style Tag put the name of that tag then a pair of curly braces apologies they are back for css and then inside of those curly braces you just put those key value pairs the properties separated by semicolons and i'm

stylizing it nice on separate lines just so that it's a lot more readable the effect is not going to be any different if i go back to my other tab and reload nothing has changed but i've begun to tease out the css from the rest of my Page but notice there's still some redundancy here and i could remove for instance text align center from here text align center from here text align center from here and maybe apply it to the body instead but there's other types of selectors i can use if you want to define

one or more properties in a reusable way such that you can use them on all sorts of tags turns out css supports what are called classes and i'm going to go ahead And do this instead instead of just saying my header is going to have a font size of large i'm going to introduce what's called a class in css the syntax for which is to use a dot and then a keyword of your own choice and i'm going to call this first set of properties dot large this next set of properties dot this next set

of properties dot medium and this next set of properties dot small and this is a little weird that it's Starting with a dot that's just because humans decided that when you define what's called a class a reusable set of properties you start your keyword with a dot and i'm going to give myself one other one dot centered is going to be text align center so none of these classes centered large medium or small are in use yet until i now apply them to my html tags so let me scroll back down to my html where

i removed earlier all of those style Attributes and i'm going to use a different attribute now called class i'm going to go ahead and add to this header centered large i'm going to add class to the main tag as centered medium and down here i'm going to say class equals centered small so i can have inside of the attribute called class a value that's just a space separated list of words and strictly speaking it can be any number of spaces but that just looks Stupid and is stupid stylistically so just one space suffices but this

just means hey browser apply the centered class and the medium class to the following contents and again if i go back to the tab and reload nothing still has changed i'm just changing the design i'm hopefully improving the design but here too you can probably note that using centered again and again is also again dumb let me remove that redundancy let me add to my body a class of Centered and now things are getting a little tight like i've reintroduced some attributes but now if i'm collaborating with someone i can say can you go ahead

and create me css classes for large text medium text small text i'll just assume that you're going to do that correctly and i can just use those terms those classes and assume that you have defined code in css like this stuff here but you know what i can do one step better i don't need you to even touch this same File you and i can work pretty independently in fact let me go ahead and propose this let me highlight all of the code i just wrote up here and cut it let me get rid of

this style tag all together let me create a new file called let's say styles.css just by convention but i could call it anything i want dot css paste it into there and save it and let me go ahead and i don't need any of the indentation Anymore so let me just shift everything over there using a fancy keyboard shortcut this could be the file you're working on you create all of these properties and these classes for me in a separate file then in my html file if you and i are collaborating i can use a

link tag a hyper reference value of styles.css the relationship of which is that of stylesheet to your file now here's where you just kind of have to Throw up your hands in an ideal world we would have called links in web pages the link tag and we wouldn't have used open bracket a for anchor this is not a link in the clickable sense this just means link this html file to this css file with a relationship of stylesheet what is a style sheet it is a sheet of styles it is a file of properties and

those properties can be inside of types or classes or what we'll soon see Are unique ids as well and there's other types for that as well but here we have now arguably the best designed version in that this is pretty compact it's pretty succinct there's only html and html values in attributes but all the css is in this second file now you and i can really collaborate independently any questions then on css and what we can do with it we Have only scratched the surface of css thus far but suffice it to say and actually

just to tease just how bad at this i might be suppose you really want to have a colorful background well let me go into my css file here styles.css and i don't have to use only classes i can say something like well let's go ahead and make my body tag have a background color of how about red semicolon let's go back to the browser reload it's okay it's getting ugly Pretty fast let me go ahead and change the color of my text maybe to white to make it stand out a little more on the red

reload all right it's back to something there i can change this to any color maybe a little yale blue over here reload voila it's now blue or if you really want to be fancy per week four how about we make it zero zero ff00 speaking hexadecimal which of course is going to make it green for me instead so this is to say there's so many different Css properties out there and again we're focusing here only on the list uh the the the ideas um when it comes time to actually using these properties we'll point you

at the appropriate reference just to flesh out your vocab all the more are any questions then on the capabilities of sia css and its relationship with html anything on your own brian all good here so the one thing we haven't done any of today at all is programming and for that We actually need a third and final language that of javascript and in the past weeks of the course we've used what we would describe as really server side programming you have written c code you've written python code on the server specifically on cs50 ide which

is by nature in the cloud a server but it turns out that all this time you haven't really been using your own mac or your own pc or your own phone for that matter other than it's Just a very expensive display a very expensive screen all of the code is written all of the code is running on this backend server and that's a missed opportunity because all of your users all of your friends all of us are on our own pretty fancy macs and pcs or phones these days it's kind of a shame that those

devices all have cpus and ram and storage space yet we're not using any of those capabilities we're really just using the Glass screen to see what's elsewhere on a server but with javascript we have another language that we'll see in a bit that will allow us to write code save it on the server but run it on users computers and do what's called client-side programming so we'll still save the code we write on the server but we're going to include the code inside of these virtual envelopes that get downloaded by users browsers and instead of

just reading the Code top to bottom left to right and displaying information as is the case with html and css we'll additionally read the javascript code deeper in the envelope and execute that on users macs and pcs and phones and here's where web programming gets really interesting because you now have a full-fledged computer at your disposal that's not even your own so let's go ahead and take another five minute break here and when we come back we'll conclude with a look At javascript all right we are back and we're about to introduce a programmatic way

of controlling web pages and even adding to web pages and changing the content user c thereby making our websites no longer just static that is written once and viewable the same way forever but dynamic somehow changing in response to user interactions or user input let's go ahead and now consider how we can make our web pages all the more dynamic by Introducing javascript so let's go ahead quickly and introduce just some of the syntax of javascript and wonderfully javascript syntactically is pretty similar to c and python a little more syntactically similar to c but there's

no memory management there's no pointers so it's kind of like somewhere in between c and python syntax but it should all come fairly familiar uh fairly easily now in scratch recall When we had a variable called counter initialized to zero how do we now declare the same in javascript it's going to look like this so it's not quite python it's not quite c you literally use the keyword let's which means let the following variable exist the variable is called counter equals zero semicolon strictly speaking these semicolons aren't always necessary but for consistency i'll keep using

them here suppose you want to change the Counter by one as in scratch increment it by one in javascript you can do it very verb very verbosely like this you can do it a little more succinctly like this like in python and c or the plus plus is back so if you've been missing that in python the plus the as nicolas seems to be the plus plus is now back as well how about something like this a condition so if you want to say if x less than y in javascript it's going to say if

x less than y so here we Have the curly braces are back the parentheses are back but the ideas are still the same if else in scratch look like this in javascript it's going to look like that in scratch if else if else looks like this in javascript it's going to look like this so more like c there's no weird l if abbreviation it's literally else if again but with the parentheses and with the curly braces and honestly if you get hung up early on in these next few weeks Like these are the stupid details

of learning some new language you got to develop the muscle memory you got to start remembering what language is what but don't stress when you get hung up on curly braces and parentheses like those things have never fundamentally mattered but they do of course matter to the computer but not to us uh certainly intellectually as we introduce the new compelling features of this language how about something like a for loop or while Loop for that matter in scratch if you wanted to do something forever you can convert that now in javascript similar to c while

true or while any expression is true if you want to repeat something three times almost the same as c but i'm using let here instead of int so javascript like python is loosely typed it has types but you the programmer don't need to stress over specifying them the computer will figure it out so let is how you would declare a keyword And with that said there are other ways to declare variables in javascript including constants but for now we'll keep things simple and focused only on this keyword here so here's that web page again and

the tree representation thereof and this tree is useful only as a mental model for what the computer is doing inside of its memory after having loaded a web page with javascript now we have the ability to change this tree in real time When the user clicks something drag something type something in with javascript we will now have a programming language that allows us to mutate this tree in real time thereby making our web pages no longer static or fixed in one state but dynamic and changing instead so how might we do this well let's consider

exactly where we can go about writing some javascript code we can do that by adding a script tag in the head Like this strictly speaking it can also go in the body like this and there are some logical implications of those choices or we can even factor it out to a file like scripts.js just as we did with css so even though the tag is different it's script and the attribute is different it's source and it's stupidly written like this if you are using an external file you literally close the tag even though there's nothing

inside of it that's one of these A reality of using this particular tag well let me go ahead and propose that we write an actual program in javascript let me go back over to my ide let's create a new file called uh actually let's go ahead and open up our old one hello.html and let's make it interactive rather than say hello body all the time let's see if we can't make it say a little something to me and to you so down here in the body of my page let me go ahead And change this

and do something like this form uh close form input how about let's do id of quote unquote name and type is going to be text and then let me go ahead and give myself a submit button type equals submit so super simple the only difference now is i want a generic text box i don't want one that's specific to searching and i Want a submit button a generic one i don't care what it says let me go back to my other tab click hello.html and we have a form similar to the google search example but

now i am going to use a web form in my own html file to interact with the user because after all this is how humans interact with web pages typically is via these forms i want to enable the user to type in their name click submit and then i want my webpage now not google to say Hello david hello brian hello to whoever types this in so i'm not going to use a form in quite the same way as before there's not going to be an action because i'm not going to send it to google

i'm not going to send it anywhere else i'm going to write code that's entirely client-side in the browser itself so what do i want the form to do when this form is submitted i want it to call a function called greet and at the moment this is a little messy We're going to clean this up in a moment but there is this attribute in html con alts on submit the value of which is not html per se it's not css it's now javascript code i want to call a function called greet this function doesn't exist

yet but it will soon how do i go about doing that well let me go ahead and go up here and add my script tag and up here let me go ahead and define a function in javascript it's a little Similar to c it's a little similar to python you literally though in javascript say function you write the name of your function any arguments in parentheses and then in curly braces you define the function i'm going to go ahead and just say alert quote unquote hello body for now i'm going to keep it simple and

just goofy output hello body and because this form by default as with all forms typically does get submitted to a Server i'm going to add one other curiosity i'm going to say return false also inside of this on submit attribute so i realize things are kind of escalating quickly here because there's a lot of pieces in motion but focus again on the basics the attribute is on submit what do you want to do when the user submits i want to execute these two lines of javascript code call the greet function and then return false return

false in this context means don't submit The form call the function but don't submit the form anywhere i just want to use it as a client-side uh tool for interacting with the user i don't need to send it to the server or to google to anyone else let me go ahead now and um specify this i deliberately gave this text field an id of name but we'll use that in just a moment let me go over to my other tab now reload because i've made changes i can type in david but i'm Going to be

ignored for the moment but when i click submit now notice it's not the best user interface but there is an alert on my screen from my specific url that says hello comma body but i'd like it to say hello comma david so how can i do that well let me go back into my code here and let me go ahead and define a variable called name but i could call it anything i want and let me use this special function document.query and this is a function that comes with Javascript that allows you to select any

html element but you need to be able to identify it using some kind of selector and here's where for better or for worse css and html and javascript start borrowing ideas from each other if i want to get the value of the user's text box i bet i could give it a unique id like quote unquote name and i can select it by using my css syntax of name And once i've selected that html element so to speak that tag i'm going to go inside of it and get its value so this syntax is a

little familiar a little unfamiliar we've seen the dot notation before in c when it came to structs we've seen the dot notation in python when it came to libraries like the csv library we're using it in a similar way document is this special global variable that just comes with javascript in the Browser and it gives you access to all things related to your document your web page query selector is a function that comes with that document that google and microsoft and apple wrote for you called query selector whose purpose in life is to take a

css selector in quotes that identifies one or more nodes that is uh nodes from the tree and this tree actually has a Name though i've not used it before this tree that we keep referring to is technically called a dom a document object model which is just a fancy way of saying that document this global variable gives you access to this dom this tree so when you call document.queryselector that induces your browser for you to search the whole tree all of those nodes and parents and children and grandchildren and so forth all of those Nodes

looking for the one with the unique identifier of name and then looking inside of that node inside that rectangle if you will getting the actual value that the human typed in so if i want to now output this value i'm just going to use some old school concatenation let me add to that string hello name and i can use double quotes i can do single quotes does not matter so long as you're consistent in the javascript World for whatever reasons the convention tends to be single quotes if only because you can type it almost twice

as fast because you don't have to hold the stupid shift key to type a double quote or to type a single quote as you would a double quote all right let me go back to this page reload because i've made changes let me type in my name again autocomplete is popping up nicely click submit and voila hello david the user interface Is still kind of lame but it's at least now dynamic and i can type in anyone's name as you could brian submit hello brian and you can change other things about the web page and

some of this is just sort of implementation details but recall that you can give a button a value and you can say something like greet me now if i go back here and reload my button now says greet me turns out that your input for text can have a Placeholder like what's your name and then saving that file and reloading you see in grayed out text a prompt on the box that's not actually there because once you start clicking it goes away i can also disable that somewhat annoying autocomplete by saying auto complete equals quote

unquote off and then i can go back to my page and re-reload and now notice even when i click in there it doesn't auto-complete which is maybe Good for privacy's sake and notice two i can do one other thing let me go ahead and add auto focus notice that every time i reload the page i had to click in the box but now when i reload the page the cursor is already there blinking and ready to go thereby saving your users one step so again another vote in favor of accessibility and usability by just putting

the user where they probably want to be anyway All right any questions thus far on this introduction of javascript by way of this function greet inside of our new script tag and using this new on submit attribute that calls that function and then short circuits the form submission by just saying return false call the function but don't submit the form to the server like we did with google all right well let me at the risk of Making it look more complicated let me make it more complicated but in a way that'll be familiar over the

next couple of weeks when you see more and more examples and you use third-party libraries you've seen some building blocks we would not expect you to write this you know this week tonight based on these examples but just to give you the mental model for how javascript is typically written so this like with css tends to be a little poorly designed When you start co-mingling your languages like uh that makes it hard to collaborate with someone else it makes it hard to maintain one language independent of another so it tends to be a good thing

to keep these things separate and that's not always the case there's actually now a trend especially in mobile app development of putting these things back together but this tends to keep things clean at least when we're first starting out so let me go Ahead and actually go ahead and get rid of my code up here for now and let me go ahead and get rid of this on submit handler and let me go ahead now and down here actually up here give myself a script tag and let me go ahead and do the same thing

a little differently document dot query selector this time let me select the form and i'm not going to bother giving it a name there's only one Form so if i just select form that'll give me my form and let me use this fancy function add event listener it turns out that the world of web programming is filled with what we would call events when you click on a page that's an event when you drag on a page that's an event on a phone when you touch a page that's an event turns out using javascript you

now the programmer can write code that listens for these events and responds to them by doing Something so i'm going to go ahead and add an event listener on my form that's listening for the submit event what do i want my code to do when the form is submitted i want to call the greet function all right for the greet function to work i need to reintroduce it so let me quickly whip up the greet function let me go ahead and do an alert of hello and then plus name i need to get the name

though so let me say let Name equals document dot um query selector and now let me go ahead and i still have the id there so let's say quote unquote name dot value so i think greet now exists but now this line of code notice does this it says hey browser find me the form then add an event listener listening for the submit event and when that event is call when that event happens call this function this is very Similar well somewhat similar to our lambda example last week when we passed a function into the

sorted function so as to tell it to sort by value instead of by key remember that syntax when we defined a function just to help us sort things notice that i do not want to call greet i do not want to call greet online 13. i want to tell the browser to call greet when it is ready therefore i pass the function in by name Let me go ahead now and save and reload okay nothing visually has changed but when i type in david and greet me huh nothing happened let me say david greet nothing

happened when in doubt if something's acting up let's go back to those developer tools developer developer tools and let's not look at network but look at console and here is where your new friend is going to show you all of the mistakes that you've made In javascript code just like in python and c you see the errors in your terminal window because javascript is being run on the client side in the user's browser you can't just look at your terminal window there won't be any errors there you need to look in your own browser if

you're the one testing things and sure enough notice here cannot read property on add event listener of null so this is a subtle one but i did it deliberately because it's So common and i promise i did it deliberately let me go back here and point out this browsers are pretty naive as fancy and as powerful as they seem to be getting they still take us literally just like python and c did top to bottom left to right and if on line 13 i am saying query for the form tag but the form tag doesn't

exist until line 21 it's not going to work and therefore the error message i'm seeing makes sense you Cannot read property add event listener of null where is null coming from form is currently null as of line 13. it does not exist until line 21 uh 21 so how do we fix this well one way the sort of quick and dirty way would be well let's just move this down below inside of the body now but below the form tag and i think this will work let me go ahead and reload now the error goes

away but i haven't done anything yet let me click uh in the box and say david greet Me okay it's back to working but much like in python and c this is kind of a slippery slope like the solution to our problems can't just be we'll move it down move it down there's got to be a better way similar in spirit to prototypes but not quite in the same way the way javascript handles this problem is as follows if i undo that and go back to the top where i have my script now i can

actually do this instead I can do something like this document i can do this document dot add event listener and this is a weird one but dom content loaded call this function listen and let me go here and give myself a second function function listen and inside of this function will be that one line of code so i've got two Functions now one of which handles the greeting no changes there a new one called listen whose purpose in life is just to add that event listener that's all but notice here on line 18 now i'm

adding an event listener to the document itself saying when the dom content is loaded that is to say when this whole tree has been loaded and therefore the form tag has been loaded and everything else go ahead and call the listen function the listen function is just Going to add another listener to the form tag listening for submissions and so now if i go ahead and save this reload i'll keep my developer tools open and type in david and greet me still works but i haven't had to sort of do this stupid resort of like

moving my code down to the bottom and solving the problem that way i'm just telling the browser don't do the following until the dom's content has loaded All right questions on any of this and this is absolutely the more the most sophisticated i think of the syntax and the logic we've done today but again we're just planting the seeds for understanding this in the weeks to come no well let me go ahead and blow your minds with one other feature of javascript that actually has similarities with python recall that anytime we define a function in

one place and then use it in one place That's generally been kind of lame like why are you bothering to create a function adding lines of code to write a function that you're only going to call once last week with python recall that uh two weeks ago with python recall we defined a function f and then we said no no this is stupid let's just use a lambda function an anonymous function because it's only being used in one place so this is going to be the ugliest we See but here we go if i know

that i want to call a function called listen when the dom's content is loaded i don't need to give that function a name i can actually just put the function right there i'm going to literally copy and paste this over here let me remove the excess white space here let me go ahead and now point out and i'm going to do this a little Stylistically differently just to be consistent with what other people do notice now i've done this i've literally moved that function as the second argument to add event listener and i don't need

its name at this point i'm going to go ahead and just do this the equivalent in javascript of a lambda function is to literally just say function with no name and still have open parentheses with or without a space in between them and so What this is now saying a little more elegantly even though more cryptically on the document object your global variable add the event listener listening for the dom content loaded well what do you want to do when the dom's content has loaded call this anonymous function otherwise known as a lambda function but

notice what are we going to do we're going to query for the form and we're going to add an event listener on submit By calling the greet function well we don't need to do that let's go ahead and remove that let's go ahead and delete the greet function name and get rid of it let's make one more anonymous function let me paste this in here i got to clean up my formatting real quick so let me go ahead and remove some white space here remove the function name put my curly brace over there get rid

of this one Here indent that indent this close this scary looking to be sure or at least cryptic looking or maybe delightful depending on whether you like this kind of thing but again it's just basic building blocks right in python you can define functions that don't have names that's great because if you want to pass one function to another function you can literally just write the code using the supported syntax which in javascript is not to use the word lambda but to use The word function no name but still parentheses and then making sure it's

still a well-formed function with an open curly brace here and a closed curly brace here you can then write out your code and the only reason i have this other parenthesis over here uh is because i'm already inside of a function called add event listener so again if uncomfortable with that not a problem certainly at this stage but again we're just kind of now Stacking these different ideas on top on top on top of one another all right well let me show you now a pre-made example that shows you exactly what you can do now

with these events here's a non-exhaustive list of events that you can listen for in a browser not just things like submitting but also um clicking and dragging keep pressing Moving your mouse over moving your mouse down the button up and down touching and moving and other such events there's this whole list of events that you can do such that you can actually do things like this let me go back to my ide and let me open up a pre-made example this one called hello5.html and in hello5.html i've got this example already that it's just doing

a few things it's listening for dom content loaded but it's then listening for key Up and what's it going to do with key up well let's see let me go over here into my index i'm going to close the debugging tools let me reload my directory index here and that gives me this other file in source 8 called hello5.html now notice here i'm going to go ahead and type in david notice the webpage itself is immediately Interacting with me and as soon as i delete it it says hello whoever you are so with javascript you

have the ability even to change the contents of the web page not just by throwing up an ugly alert you can use code like you see here which we won't get into the details of but allows you to change the page itself and notice here this is kind of ugly looking syntax you don't even have to concatenate just like python has f strings in javascript you can use back Ticks plus a dollar sign and stupid curly braces and do the same thing and i'm kind of showing some some bias here stupid syntax i think but

same exact idea as it was in python and again these are the kinds of things that will trip you up early on inevitably but again as you get more comfortable with the language all of the ideas will outshine the particular syntax all right let's look at a few other pre-made examples just to give you a Sense of the capabilities of javascript here's a program called background.html and this web page you'll see is going to have three buttons it turns out you can implement buttons on a web page in different ways you can literally use the

button uh tag down here i have a whole bunch of code using query selector again but more powerfully notice what you can also do if you go ahead in javascript and select your body by saying Document.queryselectorbody you can actually then access a special variable inside of the page's body or any tag for that matter called style and then you can change with javascript the style of a css property using code and unfortunately left hand was not talking to right hand in css it would be background dash color as we saw unfortunately in javascript a proper

programming language this would mean Background minus color like literally arithmetic so the world decided that any css properties with hyphens would instead become something like background capital color to distinguish the two but it's the same exact idea if i go now into this file here background.html well now i have a very simple page with three buttons r g and b but notice when i click on them i have defined in advance i claim some event listeners for click and every time I hear the click i change the css of the page and if this weren't

cool already let me open up view developer tools developer tools here notice the third and final tab today is elements no matter how ugly your html is the developer tag the developer tools elements tab will always show it to you in a very pretty printed colorful fashion but it will also show you the actual css as it's changing in real time so let me reload the page by default Notice the whole page is a white background and notice down here indeed the body has no style attributes on it but if i zoom out for a

moment and now click r watch the html on the bottom of the page chrome just dynamically added background color red if i click green background color green is now there and blue so using these developer tools you can interact with your own website and see what's changing in the dom we are Changing in real time the attributes of this tree thereby making the page all the more dynamic this is powerful too let me go to harvard.edu for instance open up developer tools and notice here we can see all of harvard.edu's html in the elements tab

notice it's a lot of html tier but there's all these triangles that expand it or rather that collapse it just to make it more succinct if you want to look at specific things let's go ahead and say something Like this let's see what could be fun to change here uh how about this i'm going to go ahead and right click or control click on about harvard because this i'm finding um not what i want it's going to automatically open in the elements tab the actual html that harvard used to create about harvard it's got some

other tags here span is another thing it's like a mini paragraph all on one line class we've Seen before i don't know what lg nav text it's probably large navigational text that harvard invented as a class name but notice what i can do here how about we change this to yale and then hit enter and voila hackingharvard.edu so of course understanding what's going on here is important i'm only changing my local copy of harvard.edu that's been downloaded onto my page if you go to harvard.edu now those changes are not Persistent so it's not hacking per

se but this is really to how you can learn how to design web pages if i go to yale.edu i can similarly look at all of yale's html and change things here let me right-click on about yale click on inspect let me go ahead and change this to harvard enter and i can be really malicious too but on my own machine notice over here at right in the developer tools you can see all of the css styles that are currently being Applied to that particular tag and notice this if i change color down here at

top bottom right let me change it to ff000 and hit enter voila i've changed all of yale's tags along that row to be read so this isn't again about hacking some website because it has no effect on the actual server but it is so much easier and faster to sort of fine-tune your own pages aesthetics by just using your browser tinker with things try new properties and so forth and then when You're ready to save it then go into your text editor and type out or copy paste those particular attributes what else can we do

well let me show you a few final examples here too let me go ahead and go into size.html notice here here's some sample latin text in an initial font size but i'm using a little drop down menu that you see commonly on eight web forms let me Make the text larger let me make it extra extra large this is just using javascript listening for change events to this drop down menu and correspondingly changing the styles size of that particular paragraph of text let me do this other thing back in my day when i learned html

html 1.0 uh we're up to five now there was literally an html tag called blink that would literally do this my first homepage probably greeted visitors with like welcome to my webpage In this hideous hideous uh blinking aesthetic but with javascript we can do the same thing and let me go open and oh let me go ahead and open inspect here and let me move this up here and zoom in notice what's happening i wrote some javascript code in this file called blink.html that every half a second or second is changing the style of my

body to be visible or hidden visible or hidden and if you want a little teaser of that if i actually look at that html In blink.html that's because in javascript there's this cool function called window.setinterval that lets you call a function every number of milliseconds so if i were to change this to be even faster let's do it every 100 milliseconds and save and reload you'll see now it's flashing even faster so you can do things again and again by registering these kinds of intervals in code even cooler let me go ahead and Grab another

url here and just because of my browser settings i'm going to go ahead and open this one in safari instead of chrome right now this is called geolocation.html in this file we've written some code in advance that's actually going to try to figure out where in the world you are and notice for privacy's sake we can't just presume to figure out where you all are we're instead going to uh prompt you like this the browser is going to do That for you i'm going to go ahead and allow this query and voila this pro this

file geolocation.html just prints out your gps coordinates not particularly interesting but if i go to like google maps i can literally search for those gps coordinates and if you're curious as to where i am right now at this moment that's not me but if i go into satellite mode and zoom in we are indeed roughly In that part of the american repertory theater on brattle street in cambridge massachusetts usa so pretty creepy that using javascript you can even figure out where your users are now creepy at first glance but if you've used ubereats or grubhub

or merely any website like for the weather that asks you for your location how is it doing that well the programmer of those websites has written some code as we did in geolocation.html that has a line of code like this Navigator.geolocation.getcurrentposition and then it's a function built into your browser that with the user's permission will tell you the user's latitude and longitude using again uh just some built-in functionality to the browser and then one final example here in javascript uh it turns out that you can implement autocomplete in an even fancier way in advance of

today we converted problem set five spell checker the 140 000 plus Words the text file called large into a corresponding javascript file called large.js and we wrote autocomplete here so let me go ahead and type in a and i will instantaneously see an unordered list of all of the words that start with a let me type in ap now it's changing to all the words that start with ap a-p-p-l-e this is how auto-complete works using javascript what am i listening for well if i go back to this Laundry list of events from a moment ago

i bet i'm listening for one of these key presses or key up events so listening for the user hitting their key and as soon as they type their key i'm using probably that that dot value syntax to get the value of whatever the human typed in and then i'm displaying it in the web page and then dynamically adding or removing li elements from the web page dynamically so again we've not seen hands on how to do this but the building Blocks are there you can change the web page's style you can add html to the

page and you can listen for these kinds of events now it turns out that it is not only javascript that can make use of urls in this way and we thought we'd do one final demo here this one calling back into play python whereby um i'm gonna do a little something with our jack-o'-lantern here let me bring him over closer to me And you'll see that he's got a a light bulb tucked inside of him and let's go ahead and face him forward it turns out that the light bulb inside of this jack-o-lantern here is

actually one of these fancier modern led light bulbs that has an internet connection it's an internet of things device an iot device and it happens to be talking to this little wireless device here that i have on the lectern So that the light bulb is literally communicating wirelessly to that device on the lectern and that device in turn is plugged into harvard's network and my laptop of course is plugged into harvard's network too and so we have the ability now it would seem to write code on my mac or your pc that somehow talks to

this light bulb by using our local internet our local network if you will to connect those two devices and it turns out that devices like this very Often have apis application programming interfaces that for simplicity are actually based on urls there's simple url so that if i send a certain http request to this light bulb it will turn itself off or on or do something else and if i send another request it will do that thing as well now that's not how all apis work but indeed just because we're transitioning now to web programming doesn't

mean we're leaving python behind in fact next week we'll Bring python back all the more and sql combine all five of these technologies html css javascript python and sql and tie them all together into a full-fledged web application but to do this let me go ahead and create a program here called light.pi in python and i'm doing it on my own mac so that i'm not in the cloud i'm actually on harvard's local network here let me import a couple of libraries import os and import requests We've not seen this before but there's a library

that's available with python called requests which allows you to make with python http requests just like a browser let me go ahead and declare a variable called username that's going to be the result of just getting what's called an environment variable called username so for privacy's sake i didn't want to type my own username and password for harvard's network into this program so there Exists what are called environment variables on macs and pcs and linux computers that you can store values sort of secretly elsewhere and using python's os.getn function you can load those into the

computer's memory somewhat privately let me go ahead and get the ip address of the light bulb by doing os.getend quote unquote ip and then lastly let me go ahead and construct a url by having read the documentation Thankfully a colleague constructed urls that looks like this http colon slash then the ip address of the light bulb slash api slash my username personally in case different people want to control the light bulb slash lights slash one slash state so this is a weird looking url but it's essentially going to be http colon slash slash whatever the

numeric ip address is of this light bulb slash ip slash my username slash lights slash one slash State so i could literally copy and paste that into a browser if i knew what those values were offhand but i'm going to do this programmatically instead i'm going to go ahead and write requests and i could say get if i want to send a get request which is not what i want because i don't want to get the value of the light bulb i don't want to post the value of the light bulb it turns out there's

a third http verb that we've not seen before but it's often used for apis Called put technically it's all caps put but in code it's written in lowercase.put so this is going to send it's going to send a message from my mac to this light bulb so let me go ahead and put to this url the following python dictionary i'm going to go ahead and put a value of quote-unquote on to the python boolean value of false now what is json json stands for javascript object notation which is just a Conventional way of sending textual

messages across the internet so we'll see that before long but for now this is just sending to the light bulb a dictionary with which has a key of on and a value of false and if i didn't do anything wrong let me go ahead and close this file run python of light dot pi cross my fingers as always voila now this light bulb doesn't have to be One foot for me it can be literally elsewhere on the internet so long as i have an internet connection and i have access to that ip address over the

internet which i didn't want to do today unless we have hundreds of people turning the light bulb on and off for me but let me go ahead and change the code a little bit now let me go ahead and turn it back on and change on of course to true as you might guess so almost the same code let Me go ahead now and run python of light.pi again on and let's make it a little fancier let's go ahead and get a little more logical here doing things a little more interestingly than we have thus

far and let's see if we can't bring that blink to life as well let me go down here and let's do something infinitely this time how about while true so forever this demo will go on whoops while true Go ahead and put to that url not just on and off let's go ahead and change the brightness to a value of 254 so really bright and let's go ahead and change on to true as before but then let's go ahead and sleep for a moment so time dot sleep for one second and then let's go ahead

and send another request after a second to that same url sending in a python dictionary where on is now false And then let's go ahead and sleep for one second you might have noticed i need another library i need to import time which kind of sounds amazing but it's just the library called time i've saved the file and i'm forever going to send one request turning it on another request sending it off and now the climactic finish python of light.pie all right Okay that's it for cs50 we will see you next time [Music] [Music] okay

this one we can fix [Music] i really tried to hide it [Music] okay we'll try again here we go [Music] you