CS50x 2025 - Lecture 8 - HTML, CSS, JavaScript

Key Takeaways

[Music] [Applause] [Music] [Music] [Music] all right this is cs50 and this week we begin to introduce web programming that is still writing code ultimately but whereby the user interface is now going to be a browser or even a mobile device ultimately to do that we're going to introduce you to First some fundamentals of how the internet works itself then we'll transition to a language but not technically a programming language called HTML hypertext markup language followed by another language though also not a programming language quite yet called cascading stylesheets and ultimately we'll reintroduce some proper programming so as to automate much of what we'll be now discussing but first let's begin with what underlies the worldwide web or web for short which is the internet itself and it's perhaps simplest to think of the Internet it's like the underlying Plumbing that allows us to get data from point A to point B so there's lots of computers in the world nowadays they are all physically connected somehow or virtually connected with wires or wirelessly and if you can imagine each of those computers somehow being able to talk to one another that then is our internet an inter Network set of computers that can somehow intercommunicate but it wasn't always that way even though you and I take for granted the fact that we can all talk electronically nowadays online indeed early on there were only a few points of presence on this here internet so for instance here is the United States in 1969 when arpanet which uh was developing what we now know as the internet and there were only a few locations here primarily on the west coast and those universities initially were indeed able to intercommunicate sending the first emails for instance even before there was a worldwide web eventually some other universities came online Harvard for instance among them on the east coast of the United States and then East Coast and West Coast were suddenly able to intercommunicate as well as with emails and the like but in order to get data from point A to point B so to speak in this case West Coast to East Coast not to mention the rest of the world once more and more servers were introduced to this mix we needed to somehow route the information and so one of our first terms of art today will be that of routers routers are simply computers or technically servers whose purpose in life is to Route information from one point to another now these servers might look a little different from your laptops and phones certainly they might look different from your desktop PCS but they're still just PCS computers that maybe have a different form factor a different shape but that typically live in what are called Data Centers like big warehouses that store lots and lots of computers those computers have lots of cables that interconnect them with other computers there as well as other warehouses and data centers much like the dots you just saw on the screen but the software that those servers are running give them the ability to Route information from one location to another so if I here am representing the server essentially these devices need to decide when they receive some information an email a web page or the like does it go this way or this way or this way or this other way and they use software to figure all of that out now here we have a visualization uh in the spirit of using Zoom from some of our former teaching fellows who acted this out so if you can imagine a teaching fellow named Phyllis wanting to send say an email to a teaching fellow whom you might know in fact named Brian well they might Phyllis might put that message in some kind of envelope here physical but think of it as virtual as well and she's going to hands that envelope off to the next router near her and maybe it's above below to the left or the right but generally this envelope is going to take some path from point A Phyllis to point B no pun intended Brian let's take a look [Music] [Applause] [Music] [Applause] are wonderful so many thanks to cs50's team for making that visualization possible and how well it worked getting the data up down left right from Phyllis to Brian ultimately but how were those teaching fellows how were those routers making decisions well in this case we actually practiced quite a bit but in the real world it's all dynamically figured out via software in some form and the language that routers typically talk in order to figure out how to get from point A to point B is a a language or really a protocol called TCP IP which is technically two protocols together that each do a little something different and in fact let's focus on the one that's probably generally familiar to many of you namely IP so even if you're not a computer person odds are at some point you've heard of Ip perhaps in the context of an IP address um IP stands for Internet Protocol and you can think of this as a language or a protocol to be more proper that computers speak when trying to send information between each other and a protocol is really just a set of conventions and so for instance in the human world much of it if I were to extend my hand to you upon greeting you for the first time most likely depending on where you're from you would know instinctively to like reach out with your hand and shake my hand completing a human protocol so it's not so much a language that we're speaking but a set of conventions and indeed that's what PCP and IP are but IP is very specifically FOC focused on addressing servers in the world so what do I mean by that well it turns out that every computer in the world that's connected to the internet has what's called indeed an IP address a unique identifier that typically is of this format something do something do something do something where each of those somethings is a number a simple integer those integers are typically 0 through 255 which is to say that you have four four values in a typical IP address that's between 0 and 255 if you're doing some Mental Math now you might recognize those numbers anytime you're counting from 0 to 255 you're using eight bits or one bite which is to say that an IP address as represented here with these hash symbols is 32 bits in total or four bytes so your mind can immediately start to wander if you do some of that mental math to conclude that oh it would seem that you can have no more than per past discussions for 4 billion IP addresses because 2 to the 32 power gives us 4 billion especially if we don't have to worry about negative numbers which is to imply that there can only be 4 billion devices on the internet in total now that's a lot but there's also a lot of humans in the world and there's a lot of humans with multiple devices laptops desktops not to mention all of those servers and Internet of Things devices so the world not only uses this format nowadays which is technically called IP version 4 there's also a new and improved version of IP addresses known as IP version 6 which is the world is starting to use especially some of the bigger companies and internet service providers out there but odds are your computer and my computer still tend to use ipv4 this format so we'll focus on this one if only because you're likely to see it in the near term in the real world as such so how does this all work well this is perhaps the most cryptic looking diagram I could find that represents exactly how IP works now this is sort of asky Art and this is actually a diagram from the specification or RFC request for comments that defines how IP the Internet Protocol is supposed to work and what this diagram is implying is that anytime you want to send a message over the internet using this protocol called IP you first have to make sure that you write an address on the envelope and you write another address on the envelope that is your sender address or Source address and the way you do this of course is not something physical in an envelope but rather you use a sequence of bits that indicates what the source IP address should be and what the destination IP address should be and then let me wave my hand there's a whole bunch of other bits being used anytime you send information on the internet in addition to that Source address and destination address so this though is essentially written on the outside of this envelope in this here way now what does that really mean well let me make this a little more concrete and just for the sake of discussion suppose that Phyllis in our example was sending indeed an envelope virtually to Brian from point A to point B then let's suppose for the sake of discussion that Brian's IP address is a number like 1.2.3.4 so metaphorically what Phyllis would do or really phyllis's computer would do is write that IP address right in the middle of the envelope just like a human would when addressing a letter in the real world but so that Brian could potentially reply to her either with new information or at least to acknowledge receipts of the same envelope she's also going to put her IP address in the top left corner and maybe her IP address is 5. 6.7.8 so if I sit to say I'm making up these numbers to keep them simple but they could be actual IP addresses because they fall into that format of something do something. something. something and so now when Phyllis hands this envelope off to the person or the router next to them uh next to her that router can look at the same envelope realize oh this is going to address 1.2.3.4 I might not be physically next to Brian that I IP address but I can at least hand it off to some other router that might be closer to Brian and therefore know how to get it to him eventually and so what routing is all about is exactly that these servers passing off metaphorically these envelopes back and forth back and forth ideally getting them closer to their destination now unlike the real world where the shortest distance between two points is a straight line you might recall that Phyllis didn't actually hand that envelope up into the right diagonally to Brian rather it went up and down and it didn't necess neily follow the shortest path but in the real world routers might at least ideally route data in the fastest way possible so even though they might Traverse geographically disperate routes sometimes because the servers are faster or less busy it might make more sense to spend a little more distance to get the data there based on how the servers are configured and also finances might be involved there's a lot of big internet service providers in the world the Comcast the Verizon of the world in the United States for instance they might have relationships with internet service providers such that they want to ideally keep data on their Network so as to not have to pay fees to Route the data on someone else's Network so to speak so there's lots of ingredients that go into deciding how to get the data from point A to point B but in general it doesn't really take more than 30 hops so to speak 30 passings of the envelope from router to router because at that point it's probably stuck in a loop if it's going on for more than say 30 such hops so what's really written on the envelope is more Arcane information like this but it's just patterns of bits so it's as though Phyllis was just writing patterns of zeros and ones on this envelope that adhere to this pattern and then inside of the envelope is what Phyllis might actually want to send Brian now what might that be well as you know uh the internet is filled with cats and for instance here is one such picture of a very happy cat unfortunately it's a pretty big picture and if you can imagine this being maybe a video instead it would be even bigger in terms of its file size even more bites and so what computers typically do is they additionally fragment information when they're sending it on the internet so rather than try to shove this big cat inside of that envelope what a computer would do even though this feels a little sacriligious would be to tear happy cat in two maybe even into four parts and then put each of these fragments inside of an envelope followed by another fragment inside of another envelope at which point to be fair Phyllis had better address the second Envelope as well probably with the same amount of information so she would probably put 1.2.3.4 on the middle of the envelope and 5. 6.7.8 in the top of the envelope to indicate that this one too is destined for uh Brian's IP address as well unfortunately once we start chopping things up into fragments like this it's no longer sufficient for the outside of the envelope to indicate only the destination because what if they arrive in this order or maybe this order or some other order altogether after after all there's nothing stopping Phyllis from handing one envelope here and another envelope here so long as they eventually make their way to Brian so he's going to need a little more information in order to reassemble this data at its destination and know ultimately just how many total envelopes were sent to him so how can we go about doing that well let me propose that we introduce another protocol as well that will help us guarantee delivery of this information so there's this other protocol tcpip and it's typically written or said in the same breath as TP such that we talk about tcpip but it's a separate protocol and tcp's perpose purpose in life is to solve a few problems for instance among the problems that TCP does for us is it ensures that we acknowledge exactly how many envelopes were sent so for instance on the outside of this envelope we might write not only the destination and the source address but I'm also going to say something like one of four in the memo field of the envelope we don't often use this in the real world but if you were to you could put it down there and then in the other envelope I might write two of four and so that now Brian upon receipt of that can see that oh this is the second such envelope and I could keep doing this for number three and number four and what this allows Brian to do ultimately is not only confirm that okay I got pieces one and two and three and four he can also infer if he's missing any pieces lest he have a very unhappy cat that's missing an entire quadrant of that their picture so TC P accordingly can help Phyllis guarantee delivery by establishing an additional protocol on these virtual envelopes that dictates that we also keep track of the the sequence numbers of these here envelopes so that Brian can infer if anything has been missed otherwise he can acknowledge thank you Phyllis I got all four of these but there's another problem that TCP solves for us which is that the internet itself does so many different things nowadays we've got email we've got the worldwide web more on that soon we've got video conferencing we've got streaming media and so many other applications that run on top of the physical infrastructure that is the internet so what else does TCP do it also defines a convention for what we're going to call ports a port is simply a unique numeric identifier for a specific internet service and years ago a bunch of humans decided to standardize what these port numbers are so for instance a bunch of humans in a room decided that you know what to uniquely identify worldwide web traffic let's use port 880 so the number the integer 80 but if it's securely sent using not HTTP but https more on those also a bit later then it's going to use port 443 and there's other numbers as well 25 for instance is commonly used for email 53 is commonly used for DNS and there's other integers as well much longer list than the two here on the screen what Phyllis can then do is if she specifically wants to request a web page of Brian whereby Brian is now not only the recipient but a web server that has pages of content what Phyllis can do on the outside of this envelope is ADD essentially a colon and then a port number such that now the destination is still 1.2.3.4 colon 80 and this indicates that when Brian receives this envelope he as a server knows that this envelope is destined for not the email server not the video conferencing server not the the streaming media server but rather for the web server that happens to be running at Brian's location and in fact this is because as an aside when we talk about a server a server singular can actually do multiple things a single server can handle email and web and video conferencing and more and so what these port numbers ultimately allow servers to do is to Multiplex so to speak or distinguish which server or which uh which type of service should be handling this inbound request so that Brian replies with a web page and not for instance an email or something that's inappropriate like that meanwhile if we want to get a little dirt our hands a little dirtier with the underlying format of these things even though I wrote it on the outside of the envelope as just colon 80 what's really happening underneath the hood is a little something more complicated like this whereby Phyllis would write not only a destination Port but also a source Port so it turns out even Phyllis uses a unique identifier so that Brian knows how to address his response to her specifically and there's that sequence number and the acknowledgement number that I alluded to earlier whereby TCP ensures that we can can keep track of one of four 2 of Four 3 of four four of four so long story short what TCP I together allow us to do is uniquely address computers on the internet as by using IP addresses in a standard way and to guarantee delivery of data between two points by using these sequence numbers and as well as these port numbers to make sure that the data gets where it needs to go now I'm using guarantee a little bit generously if the internet goes down the power goes out TCP is not going to get data from point A to point B but assuming the internet itself is working that is what these protocols together do but to recap then with tcpip we have this mechanism for addressing computers uniquely much like we do already in the real world and in fact Sanders Theater for instance is 45 Quincy Street Cambridge Massachusetts 02138 USA that is exactly what you could write on the outside of an envelope to mail it physically to Sanders Theater what we're talking about then with these virtual envelopes is the exactly the same idea but in a way that supports servers sending the same data and it turns out that just dealing with numbers like IP addresses is much easier than full text like things on the outside of our own envelopes indeed imagine how much happier the mail service the postal workers would be if all we were writing were very clean numbers on the outside of the envelopes and they wouldn't have to read messy handwriting with much more complicated strings of text all right so it stands to reason then that this seems to work at least as I've told it here but of course none of us probably use IP addresses explicitly every day in fact when you go to a website you probably type google.com or cs50. or other such domain names and yet here I am telling the story that underneath the hood Allah uh Phyllis communicating with Brian everything uses IP addresses not to mention port numbers and sequence numbers on the outside of these envelopes well so if I it to say your Mac your PC your phone is somehow figuring out how to write those numbers on the envelope even though you and I as the humans are only typing in actual domain names like google.com cs50. and the like so how does that all work well in the world of the internet there's other types of servers out there as well not just routers that route data from point A to point B there's also DNS servers as well domain name system servers and these typically live inside of your internet service providers Network or on your University's campus or in your company's office or somewhere uh in between you and the rest in the world and what a DNS server does in short is translate domain names to IP addresses so that you and I as humans can type the more userfriendly version of google.com and cs50. and you and I don't have to worry about or figure out what the underlying IP addresses are now it turns out the implementation of a DNS server follows a familiar Paradigm we've long talked about dictionaries now an abstract data type that allows us to associate keys with values well in the case of a DNS server they essentially have inside of their memory a two column sheet or table the first of which is the domain name the second of which is an IP address technically those domain names are called fully qualified domain names because it might be something like google.com or www.google.com or some other subdomain there in so what it is you type would be in the leftand column here and what it is that gets written on the envelope would be in the right hand column here instead so now this table could you could imagine it being very very big I mean there's thousands hundreds of thousands millions of domain names out there nowadays and surely your phone in your pocket doesn't know about all of them but that's okay because the design of DNS is actually to be very hierarchical so that your internet service provider probably has its own DNS server that can translate many domain names to IP addresses especially if they're popular ones and therefore they have looked up the IP address already in the past for their customers but if you visit a random website that's not very popular and no one has visited at all or recently your internet service provider can recursively ask another DNS server for the answer to the question what is the IP address of that domain name and in fact around the world there are what are called root servers a small number of servers that for instance know about all of the dos and all of the orgs and all of the.gov and similarly for other countries as well where by those servers even if they don't know the exact IP address they might know the IP address of another DNS server who does have the answer and so long story short if you've ever bought or really rented your own domain name before or if that's something you choose to do in the future essentially what you're doing when you pay someone some number of dollars per year to buy a domain name is you're asking them to add an entry to their DNS server or someone's DNS server that Associates that domain name henceforth with a specific IP address address of your server or server so someone somewhere is doing that for you but the whole process is indeed recursive because if your ISP doesn't know the answer it can maybe ask another DNS server or maybe these root DNS servers as well your own Mac your PC your phone might itself cash or remember these answers though too because it's a little silly in terms of design if your phone or your laptop or desktop has to constantly ask that same question every time you visit google.com odds are the IP address is not going to change or at least it's not going to change that frequently however again if you've ever set up your own domain name if you moved it around or something has changed about it sometimes you can break a website by changing its IP address because there's lots of servers in the world that have cashed C A D or remembered the old IP address but thankfully the other feature that DNS provides is expiration dates so essentially the answer to the question what is the IP address for this domain name typically expires is after a few seconds a few minutes a few hours a few days unless you really mess things up and say don't expire this for a year then your website could in fact be a dead end somehow so this is worth knowing for future uh web developers doing things in the real world so DNS to recap then simply converts IP uh domain names to IP addresses and technically can go in the other direction as well and so when you as a human go to a browser on a laptop desktop or phone and type in google.com enter or CS5 . a enter what essentially happens is your device checks its local cache to see if it's already been asked that question before and if it has it just immediately knows the IP address writes it on the outside of the envelope so to speak and sends out your data if it doesn't know the answer your computer is going to ask the local DNS server which might ask another DNS server which might ask another DNS server but recursively you will eventually get your answer if that domain name actually exists and at that point your computer can indeed write the correct IP address on the outside of the envelope add any sequence numbers add any port numbers and voila it's on its way from point A to point B so that then is DNS how about one other acronym that's a bit related here to that of DHCP and let me assure that it's not really that important to memorize like what all of these acronyms stand for but rather it is useful I think to generally know what they in fact do so DHCP is dynamic uh host configuration protocol so there we have another protocol a set of conventions and the purpose of DHCP is to actually give your computer an IP address when it boots up this wasn't always the case back in the day if you've had internet connectivity for a while some technician probably would come to your house when you or your family signed up for Internet service they would probably have a sheet of paper on which was your personal IP address and if you wanted to connect your PC to the internet they would like type that IP address manually into your computer so that your computer knows what IP address to use when talking to other servers that's not particularly scalable that's not particularly maintainable you don't want the technician to have to come out just to make a change or something like that and you probably want to be able to use multiple devices as well and so nowadays what most computers use is DHCP to dynamically figure out what is their IP address and so nowadays when you first open your laptop in the morning or boot up your PC or take out your phone if you haven't used it in a while and therefore it no longer has an IP address cuz these two expire after some amount of time your phone your device will broadcast a message like what is my IP address and hopefully on the nearby Network in your home in your company at your University or in your internet service provider more generally you will hear an answer oh use the IP address four uh 5.6.7 do8 for instance in the case of Phyllis or 1.2.3.4 in the case of Brian's recipient address as well so the people who run these servers the internet service providers of the world the system administrators at your company or campus they can come up with the rules via which these IP addresses are assigned or who gets what number but ultimately DHCP is just another protocol that governs how your device gets its IP address but that's not quite everything it's actually kind of neat DHCP servers also tell your computer what DNS server to use they give you the IP address of one or more DNS servers to ask questions of DHCP servers also tell you the IP address of of your default gateway the router that you should use by default to hand one of those envelopes to and this is indeed why Phyllis probably knew to whom to hand that envelope in the first place because when she booted up so to speak she was assigned an IP address she was told what default gateway to use and the default gateway AKA router these are just synonyms is the device to which she should hand off data by default in order to get it from point A to point B so why do we focus on all of these acronyms all of these Technologies well on the one hand they're sort of omnipresent and even though you might need not need to say these acronyms verbally all that often you're going to see them on occasion when something goes wrong you're going to need to troubleshoot things like this but more importantly they're sort of Representative of very real world engineering problems that the world has had and encountered over the years but they're relatively Simple Solutions there too you know I don't necessarily know how I could write code to implement a DNS server or DHCP server and perhaps neither you but it sounds like a pretty simple idea a if I have the ability in code to hear requests I can respond to those requests by maybe using a dictionary in memory and in the case of a DNS server and responding to those answers so this is to say all of the fundamentals all of the ideas we've been talking about throughout cs50 really are used as building blocks to solve these very real world very omnipresent technologies that you and I now take for granted every day let's now consider one other protocol that's with us every day nowadays that of HTTP hypertext trans transfer protocol which is indeed itself a protocol a set of conventions that governs in this case how web browsers and web servers inter communicate it is very much related to https which is literally the secure version there of that somehow uses encryption somehow scrambles the data to ensure that when you're visiting a web page you and only you can see that web page and no one in between you on the internet actually knows what it is you're looking at or the specific URL that you are visiting beyond the name or the IP address of the website itself so even though you and I probably don't even bother typing HTTP colon or https col odds are nowadays you and I just type google.com enter cs50. enter or you click on a bookmark underneath the hood this protocol is everywhere and those prefixes HTTP and htps colon are required when using a browser even though your browser automatically tends to insert those prefixes automatically if you the human don't bother typing them yourself so they're used of course in URLs uniform resource locators which specifically are the addresses that we use to get to useful information on the worldwide web or web for short here for instance is one of the simplest URLs we can talk about I'm going to use https deliberately to imply that you really do want to try to use secure sites alone now aays but this domain name would seem to be www.example.com or that's the fully qualified domain name itself but let's tease apart what's going on here typically in your browser uh you might see a trailing slash so a forward slash at the end of it which just indicates albeit non obviously that you want the default web page at that domain name in particular you want to be able to access whatever the default content is for that website nowadays though browsers like Safari and chrome and even others tend to hide these details just to simplify what you're actually seeing in your browser but typically if you click or double click on the URL bar in your own browser you'll see more information including this trailing slash so if you only type in google.com enter probably your browser is automatically appending the forward slash to indicate you want the default homepage but sometimes there's more to the URL sometimes it's slash path where by path I just mean a folder or a file name or something along those lines and that's more specifically referring to like probably a directory on the server containing some web page specifically sometimes it's more explicit sometimes the URL might literally end in HTML which is going to stand for hypertext markup language one of the first languages we'll soon look at in detail and that's the language in which web pages are written so what this URL indicates is that at the server called www.example.com there is a file called file. HTML that this user wants to see in their browser sometimes though and it's not often the case anymore that you see these file extensions the world decided years ago that these are just kind of ugly and not strictly necessary technically so sometimes you'll just see Slash folder slash which just means there's a folder AKA directory somewhere in the server whose web page contents you want to see sometimes it's nested sometimes it's a folder and then a file inside of which is the webpage contents that you want to see so in short URLs generally follow this kind of format and there might be zero or more of these folders and maybe a file name explicitly or not but what else is going on here well here we have the fully qualified domain name and just to toss out a bit more jargon Technically when you say domain name typically you mean something like this just the example.com because the www in this context is generally referred to as a host name it's like the name of a specific server at a company at a university that is providing some service like this the worldwide web AKA a web server it is not strictly necessary for a server to have a name of www just to be a web server for many years mit's website was web.mit.edu whereas everyone else in the world was using www but odds are many of you are probably not even the habit of typing www. something. something rather you type in google.com and hit enter and the browser somehow automatically CH brings you to www.google.com so the host name is the name of a specific server the domain name is typically just something like the example.com and let me disclaim that's a bit of a white lie because if you're Google if you're meta if you're any of these big companies you don't just have one web server so technically the www refers to a collection of servers maybe it's two maybe it's 20 maybe it's 20,000 servers there are technologies that allow you to uh support that as well but lastly there's one other piece of jargon that's worth knowing the last part of these fully qualified domain names is known as the TLD or top level domain and that is what generally historically indicated what type of domain it is in the us.com means commercial cal.gov means government.org means organization um however there are so many more top level domains nowadays and in fact they're not us Centric and in fact just because you have com does not mean you are in the US it just means that you paid someone to use that their domain name in fact there's other tlds too every country has its own us for the United States UK for the UK JP for Japan and so forth anytime the TLD is just two characters that's a country code and yet that's kind of curious because we're in the habit of using cs50. a uh there are websites that use TV uh there are websites that use doio cs50 included and if you'd like to go down that rabbit hole feel free to Google top level domain or TLD and any of those and you'll actually see that even though we are using cs50. to imply artificial intelligenceai has nothing to do with artificial intelligence except that that is how uh you can abbreviate it in English as an acronym it actually is a two character country code and that country and others have decided to actually monetize the TLD by selling it to really anyone who's willing to pay per year to use that their TLD so lastly Within These here URLs we of course have the actual HTTP HTTP or https and that dictates the protocol that is going to be used when a web browser requests a web page at that their address now what does this protocol do it's similar in spirit again to sort of a handshake whereby a web browser when it wants a web page it's kind of like extending a hand hoping that the web server will respond and know what to do of course there's no such handshake physically here but rather metaphorically the web server should know how to respond so long as the web browser standardizes the message that it sends so what do I mean by that well let me propose that inside of this envelope can be one of two messages and this is a bit of a simplification but the first of those messages is get and what get means is literally get me a specific web page by contrast you can use post inside of these envelopes and post generally means to send information somewhere else and this too is an oversimplification but generally the word get is used by a browser when it just wants to get information the word post is used when it wants to send information often sensitive information like a credit card an email address a password or anytime you're sort of filling out a form it's generally sent via the post keyword instead and these are indeed verbs like get and post are both verbs in English implying that this is some here Action Now dot dot dot means that there's other verbs that can be used inside of these envelopes as well but let's be more specific inside of the envelope that's being sent from browser to server is more specifically a message like this so if I with my browser visit www.harvard.edu the message that goes inside of that virtual Envelope as we discussed earlier is literally text that looks quite like this so the the cat is gone there's no more pictures of cats just yet if you're just requesting Harvard's own homepage but inside of that envelope is indeed get slash HTTP SL2 for instance then host then the actual uh host name or fully qualified domain name that you are seeking and dot dot dot there's some other stuff there but that's what's inside of that envelope hopefully what's going to come back from the server is another envelope inside of which is a response so whereas the first message is a request to get get something the response is indeed a response that hopefully contains the actual web page that you requested and you'll see that the response might look like http/2 200 and then content type text HTML which just means that the web page is written indeed in this language we're about to spend time with today HTML below which is the actual content so how can I actually go about seeing some of this well let me actually go over to vs code and up until now we've been using vs code for the purposes of writing code but we do have this terminal window and the terminal window gives me access to an underlying operating system that operating system recall is called Linux and I have a command line interface here and up until now I've been using this command line interface for commands like CD and LS uh make debug 50 uh python SQL lights three and the like but there's other commands that typically come on a system including this one that allows me to make internet requests as well not even with a browser but textually moreover there's always been even though I generally hide it during class A second tab namely ports and if you yourself look at cs50. after logging in odds are you will see a ports tab among others and what you'll see here is that all this time cs50's own development environment has been using by default a TCP port number namely 1337 which is a very elite number for us to use and that is the port number that's used by cs50's customizations of vs code our so-called extension uses that TCP port number so that when our extension is talking to VSS code code it uses a standard port number on the outside of its own virtual envelopes if you will you as users don't need to care about that but that's why that tab all this time if you've seen it has had numbers in there and soon we're going to see some additional numbers as well but if I go back to my terminal window here I of course could type commands and one of the commands I could type is actually this let me increase the size of my terminal window let me go ahead and type curl which means connect url- capital I and now let me go ahead and type in HTTPS www. harvard.edu so I'm going to manually type this into my terminal Windows command line interface and see what comes back I'm going to hit enter and I get a bunch of stuff back that's why I used a dot dot dot on my slide a moment ago but in this output is some familiar text now one we saw this line earlier on my slide http/2 and then some number 20 and then there are other lines here that I waved my hands at earlier because they weren't strict necessary including the host Line If This Server is only doing one thing we don't even need to clarify that this is www.harvard.edu but what then is this http/2 and this 200 well it turns out that the two is just the version of HTTP that my browser or my keystrokes we're using a moment ago 1.1 is a common version number two is a common number three is catching on over time but this just indicates what version of the protocol the browser and server are speaking even though this browser has no graphical user interface it's just a command simulating a HTTP request to get back these headers and that's in fact what dasi means show me just the headers I don't want to see any cats or Harvard news I just want to see the headers inside of the envelope but it turns out all this time for as many years as you've been using a browser you could actually do this in your own browser as well let me open up another tab here and let me manually go to https www.harvard.edu enter and what I'll see here is 's homepage as of right now today it all worked as you might expect but it turns out all this time you've had access to some powerful tools underneath the hood let me actually rightclick anywhere on this web page and select inspect and that's going to open what are called developer tools in the context of my browser which is Chrome most every browser nowadays Safari Edge and others have similar looking tools though you might have to access them via different menus and in fact in Chrome you can also go up to the dot dot dot menu and find your way to Dev V ER tools but there's a lot going on here but what I'm going to do is go to the network tab here for a moment and I'm going to zoom in just for the sake of legibility and notice here that when I clear this network tab this is giving me access essentially to a log of everything that's you're about to see on the screen and notice it just uh undeleted itself apparently Harvard is doing something behind the scenes every few seconds which is why that road reappeared because indeed I'm trying to record my network activity but let's go ahead and do this let me clear that one more time and reload the page and so many rows just flashed across the screen in fact in the bottom leftand corner you'll see that my browser unbeknownst to me made not one but 67 HTTP requests that's how many envelopes essentially went back and forth between my browser and harvard.edu a moment ago here comes another and if we just keep this open it's going to come again and again Harvard is kind of keeping the page alive but let me zoom out and scroll back to the very top of this and focus on just the first page I requested and click on W ww. harvard.edu and let me click on headers here what I'm seeing is diagnostic information if you will about what I just did and you'll see that the URL I requested was indeed this thing here I used a request me a request method of get unbeknownst to me get is what is used by default when you just type a URL and hit enter Then the status code that came back ah there's that 200 so it turns out that what web servers and browsers have done over the years thanks to http is they have stand ardized what these numeric codes are to indicate success or failure in the world of programs that you and I have been writing we typically use zero to indicate success and maybe one or two or some other integer to indicate failure in the context of the web it's kind of the same idea but the web uses 200 to indicate success and other numbers to indicate failure or something else happening as well well what else can those status codes represent well let's take a look here noce notice that when I'm in my browser and I go to Simply harvard.edu with no https no col no www no trailing SL enter it all just sort of works and brings me to the intended place now why is that well at the lowest level we can actually see this in our command line interface let me go back to my terminal window which I've still full screened and let me type this time curl D capital I and then simply HTTP colh harvard.edu so I'm going to help the program a little bit and provide it with the protocol but I'm not going to provide it with the secure version I'm not even going to mention www let's see what comes back ideally it's a 200 okay cuz that's what means success but what I see here is weirdly that harvard.edu has moved permanently and this time the status code coming back from an older version of HTTP in this case 1.1 instead of two apparently has a status code of 301 so it turns out that different types of responses indeed have different numbers ass assciated with them and 301 means moved permanently a sort of redirection if you will and where is Harvard's new location well if we scroll down among these headers you'll see that oh the server is additionally telling me that the location to which Harvard has moved permanently is https colh harvard.edu okay so what this seems to indicate is that Harvard server really wants me to stay on the secure version of the website all right so let me go ahead and highlight and copy that let me go ahead and do curl dasi and that URL so almost the same except for the https this time and the trailing slash and hit enter but this time too notice and this time the server is using a newer version of the protocol we're back to version two it's still telling me 301 it's not uh berating me by saying move permanently again but 301 is enough for me the browser to know oh Harvard's website is now at this location www.harvard.edu again using https and so okay let's do this one more time let me go ahead and copy that URL and do curl dasi and that full URL and now we're back to getting a 200 okay so among the reasons that your browser is able to figure out what you want is because one the server might be telling it no go here no go here okay now you're in the right place and frankly browsers nowadays in cooperation with servers that are configured in a certain way will tolerate you typing in only harvard.edu and just know proactively no no no no you don't want that you want https and you want the WW W because the browser for instance has seen that response before from the server but at the end of the day it's really just these status codes that are enabeling us to actually Forge these responses so we've seen a couple now we've seen 200 for okay we've seen 301 for move permanently there's Bunches of others as well including for instance this one here odds are most everyone here has seen 404 at some point in their lives I mean all it's sort of in the the human vernacular we all know that 404 means file not found like the URL is wrong the file was deleted something is missing that's a little weird that we as humans have been acclimated to a fairly esoteric HTTP status code but that's all it is if you visit a web page that simply does not exist you will get back not 200 not even 301 you'll get back a similar header like this saying 404 file not found now you might see a web page and it might be a cute web page or it might be a black and white Texton web page it depends how the web server has been configured to show you that information but 404 indeed means file not found and here is a non-exhaustive list of other status codes we've seen 200 okay 301 okay there's other 300 level status codes that generally refer to redirecting the user from one URL to another the 400s generally indicate user error like your fault my fault so 401 is unauthorized 403 is forbidden like you haven't logged in properly 404 is not found 418 is actually an April Fool's joke from years ago I'm a teapot was sort of a fun joke among Engineers more on that if you Google it if you'd like 500 arrange errors mean server error so someone screwed up maybe not you but frankly in a couple weeks time when you're writing web-based applications yourself anytime you see a 500 it is your fault also so you are both the user and the server in that their case but long story short the way these things work are simply underneath the hood via these status codes which really are being sent virtually inside of envelopes like these your browser is generally hiding that detail because Normal users don't need to care about this level of detail but you've always had the power of opening your own browsers developer tools and poking around and seeing these things and all I'm doing in my w black and white window here with curl which connects me to a URL using a command line interface is showing you even more in detail what's inside of those envelopes but it's just another way of viewing the same kind of information now we can actually have a little bit of fun with this uh with a with a smile and a wink to our our students at Yale who are perhaps watching this now um it turns out has anyone ever been to this URL here um safety school.org I'll zoom in here in a new tab has anyone applied to safetyschool.org or visited safetyschool.org well we love them equally but turns out if you go to safetyschool.org you end up at this here website which if I zoom back in is apparently https www.yale.edu so what is going on there well I could open my developer tools but let me use my newfound command line skills and do it here c-i HTTP cols safetyschool.org enter and you'll see that oh safety school.org has moved permanently to yale.edu own website so this is to a practical joke that has lived on the internet for years there is someone out there I don't know who they are they have been paying an annual fee for years now simply to have this esoteric joke for US computer scientists there are ones for Harvard as well in all fairness but this is one that's perhaps been around the longest so somewhere there's a Harvard Alum who's getting older and older but is still paying this bill year over year since the web was invented all right we're back and we now focus on HTML hypertext markup language which is the language in which web pages are written it is not a programming language and as such we won't need to spend all that much time on it because the basics of HTML are fairly straightforward even though it has a decently large vocabulary different features that you'll pick up invariably over time what HTML does have fundamentally are what are called Tags and attributes these are the basic building blocks of the language and what the language looks like is this so here is perhaps the simplest web page that I could come up with a Hello web World web page if you will and it's just text it is text that's typically stored in a file like index.html for short um and in that file would just be these lines of code and these lines here are going to indicate to the browser what it should do upon receipts of an envelope containing this message now how are we going to go about serving up this content well ultimately we just need to put this content on an actual web server well it turns out you already have a web server even though you haven't been using it as such in other words when you visit cs50. deev and use vs code in the cloud you're obviously using a browser but you're less obviously using a web server that is serving up a copy of VSS code to you in that browser but the caveat there is that by default you've probably been in the habit of typing cs50. deev enter and you've probably noticed if not prior to today after today that the full URL ends up being https cs50. deev and then maybe some other stuff after that but implicit in that URL is one of those port numbers that we saw in TCP either 80 or 443 because it's https it's actually the ladder 443 which indicates implicitly that must be a server on cs50. deev that is listening for requests and is serving up that version of vs code in fact we eventually redirect you to github's version of VSS code AKA code spaces but the idea is the same and in that URL you have a web page that's being served up to you but it's already running on Port 443 and perhaps 80 which is to say if we want to come up with our own web server we could like start up our own server connect it to the internet give it an IP address and then communicate with it using Port 80 or 443 but it's actually a lot simpler to embrace the reality that any server can have multiple Services be it web or email or video conferencing or the like or heck two different web servers and so even though VSS code in the cloud is already running a web server because that's indeed how it works there's nothing Stopping You and Me from inside of VSS code starting a second web server so long as we choose a different port number a different TCP Port that's not already being being used by the server itself so how are we going to do that well we're going to introduce you to a new command today quite called quite appropriately http-server this is a command that you can run in your terminal window that will start your very own web server by default on Port 880 8080 isn't that special but it tends to be a convention whenever you want to run a web server on a port other than 80 by default um you would just use 8080 as a go-to but it could really be any number within a large range now this http server command is going to allow me to serve up some actual content what might that content be well let me go ahead and do this let me go ahead and run uh code index.html and let me go ahead and whip up a very simple web page here in and I'll explain in just a moment what these lines are but let me go ahead and just kind of transcribe it uh uh in this here file so uh angle bracket exclamation point dock type HTML close bracket then I had HTML Lang equals quote unquote enen then I had head then I had had title and inside of that title I had hello comma title below that head I had open tag body inside of which I had hello body so there's a lot of weird stuff going on here if you've never seen this before but I think I have recreated the file you just saw in slide form a moment ago what I'm now going to do is try to view this file inside of my browser but to do that I need to do this I'm going to go ahead and run HTTP server enter and a whole bunch of stuff is going to appear in my turn terminal window some diagnostic output a URL and the like but in particular I'm going to get this little popup that's telling me Oh my application running on port 8080 is now available this is just a userfriendly feature of VSS code specifically cs50's own extension therein that allows me to click open and browser I immediately get a second tab inside of which I see the contents of my code space at this moment in time now notice to save myself some time today I've downloaded in advance a source 8 folder inside of which are a lot of today's examples if I so need them and there's a file I literally just created called index.html what you're seeing here is a a directory index of my current folder so this is a dynamically automatically generated web page that's simply showing me in a web browser what is inside of my codespace now what's my URL well it turns out it's going to be something that ends in github.com matically it's not a domain name I had to buy or sign up for and it's really meant to be temporary because I'm going to use my codespace as a development environment to develop web pages but most important for now is that indeed This Server program is running on Local Host which is a nickname for the local computer no matter what its actual name is specifically on port 8080 and this is why I'm now seeing my folder instead of vs code this tab has port 8080 this tab would appear to have Port 443 which is github's own web server running at this domain now I'm going to go ahead and click my index.html and we will see what the simplest web page in the world might look like and voila there is my hello body which is the only thing in this otherwise big white rectangular region otherwise known as the viewport of my browser and if I zoom in at the top here you'll see that my title of my tab is indeed what we saw earlier hello comma title so long story short even if you're completely new to developing web pages clearly we have the ability with this language called HTML to indicate what the title of a page should be in its Tab and what the contents of its body should be as underwhelming and as black and white as all of this might be well let me go back to my sample code here and let's now actually introduce some building blocks here in so what is actually going on the first line of code that I type that you see highlighted here is the pages so-called document type declaration that's a a silly mouthful but it's really just a standardized line of text that says hey browser here comes a web page written HTML specifically version five of HTML which is what most of the world is is now using um odds are this line of code will change over time but for now this is what we have below that things get a little more interesting and a little more symmetric if you will and no more exclamation points like you see in this first line that's a bit of an anomaly down here you'll see what I'll describe as Open Bracket HTML then the space then Lang equals quote unquote n then close bracket and by open and close bracket I mean a less than sign and a greater than sign respectively which you can type on your keyboard what this uh is doing is the following this is the beginning of an HTML element as we might call it and the tag here for this element is called HTML so anything immediately after a less than sign is the name of the tag and the way that browsers work is by relying on these tags to know what to do and where within the confines of the browser so you can think of this first tag as saying hey browser here comes some HTML now what is that HTML all about well this thing here highlighted Lang short for language indicates what human language is presumably going to be used throughout the rest of the page all of the tags all of the attributes for better for worse are going to be in English because the language HTML itself was standardized by English-speaking people you can write web pages with your own content in any human language in this case I have opted to write my page as simple as it is in English as well hello title and hello body and the en attribute value here so to speak is just like a clue to the browser that in case you've got Google translate or any kind of automatic translation this is a little hint as to what the human language is to facilitate automatic translation or search engine optimization SEO or the like but that whole thing started the HTML page now we have a sequence of other tags hey browser here comes the head of the page which metaphorically is like the very top of the page here aka the tab that we looked at a moment ago hey browser here comes the title of my page what's the title the title is hello comma title now things are a little weird the next line of text here is Open Bracket SL tile close bracket and whereas therefore I might call the previous tag the open tag or the start tag this one here now would be the close tag or the end tag so there's a symmetry here that effectively is conveying to the browser hey browser that's it for the title the title is now complete what comes next hey browser that's it for the head of the web page nothing left in there what comes next hey browser here comes the head the body of the web page sort of everything else the big contents of that white rectangular region is the so-called body of the page hey browser here's the contents of the body hey browser that's it for the body hey browser that's it for the HTML itself now notice the forward slash indicates the end tag or the Clos tag and you don't need to be super verbose even though my HTML tag started with a language attribute Lang equals quote unquote you don't need to repeat the Lang you don't need to repeat the quotes or the it's sort of obvious to the browser that this is closing the previously opened HTML tag now in general the tags you're seeing should exist in one and only one place you must use these tags in certain locations we will soon see Bunches of other tags that you can use zero or more times to structure the actual content of your own page so how do we get into that and what are we ultimately doing well what we really have is in this HTML code a textual representation of a tree one of our now familiar data structures whereby there's a root of this tree that has some number of children that might have some number of grandchildren and so forth and so depicted here at right is what you might call a document object model or Dom Doom for short which is actually what the browser is probably doing in its own memory or Ram when it re uh accesses a web page in other words if you type in google.com and hit enter you immediately see the contents of Google's website in your browser what Google has probably done is sent text that looks kind of like this but more complicated than this simple example that text is read top to bottom left to right by your browser and loaded somehow into memory using malok or other techniques like that to create Bunches of nodes in memory with a lot of pointers that somehow represent this tree structure in the computer's memory so that it actually knows what to display on the screen so with that said let me go back here to VSS code and I'm going to go do a sequence of examples now and I'm going to go back to the code and then back to my browser to show you exactly what's going on recall that at this moment in time the only two things I have are a source 8 folder which I came with by default today in advance in case I need to copy paste anything and index.html which I just created for the first time so let me go back to my VSS code tab here and you'll notice that in my terminal window there's actually a bunch of logging information diagnostic information long story short anytime anyone visits a web server with a browser odds are the server is logging that visit in fact this is how companies know this is how internet service providers know this is how parental controls know what websites you are visiting because all of this information is going back and forth between browser and server here because I am running the server via that HTTP server command I now get access access to all of this juicy information including what the browser is that the user is using what day and time they visited my page and so forth but for the sake of discussion I'm not going to really care about this diagnostic information I'm going to hide this for the most part but notice two under ports now whereas previously I only had one TCP port in use 1337 which is cs50 specific now notice that vs code is detected that I'm running uh something else on port 8080 so you see a second Port there and you might over time if you open more and more tab SE even additional ports as well that all happened for you automatically so for now I'm going to go ahead and hide my terminal window cuz I don't really care what's going on there but that's still going to keep HTTP server for me running in the background let's go ahead and introduce some new tags so for instance let me go ahead and create um a new file actually let me retract that let me open my terminal window and instead of showing the log let me create a second terminal window with the plus icon so I'm still running the other one with the command but I still have the ability to run commands now in my he prompt for instance I want to run a command code paragraphs. HTML let's go ahead and create a more interesting web page with actual paragraphs of English or other type of text to save myself some keystrokes I'm going to be in the habit today of copying the hello world example as a starting point perhaps and then just changing it as needed for instance I'm going to change the title of this here page to paragraphs and then in here I'm going to type out some paragraphs of text now what are those paragraphs well I wanted to save some time so in advance generated some Latin like text here so I can copy paste three long paragraphs of Latin text some laurum ipsum text here now it doesn't matter what this means it's sort of nonsensical words but this is a web page that is going to have ultimately some paragraphs of text not English but fake Latin so let's go ahead and open this let me go back to my other tab I do need to reload this tab because I've created a new file that this browser didn't know about before there it is paragraphs. HTML let me go ahead and click now paragraphs. HTML and there are my three paragraphs well wait a minute this is just like one Big Blob of a paragraph instead of the three paragraphs that I was promised well why is that well let me go back to um my editor here and you'll see that even though even if I hide my terminal here even though I've got these blank lines clearly the browser is just ignoring me and this is because HTML is pretty pedantic like it is designed to only do what you tell it to do and so if you don't tell it explicitly give me a new paragraph it's just going to combine uh uh adjacent texts as we've seen already so how do I do this it's actually pretty simple let me go into my body tag and let me actually open a paragraph tag or P for short now notice vs code is trying to be helpful by automatically completing the rest of this thought by giving me both a start tag and an end tag in this case that's not really helpful because I already have the text that I want to put inside of this paragraph so I'm going to go ahead and delete the clo tag manually and I'm going to move over here and close this myself and just to be uh stylistically nice I'm going to go ahead and indent that now down here I'm going to do one more paragraph tag P for short I'm going to cut that out and I'm going to paste this in here and again I'm fighting with the auto uh the auto formatting because it is trying to understand what I intend even though I'm going back and fixing this now let me fix that let me go down here let me go ahead and fix this now indent here and voila now we've got three paragraph elements and to be clear an HTML element is generally everything between a start tag and an end tag so I have three paragraph elements P for short why is it only P well web devel the designers of the HTML language years ago decided why write out paragraphs when Open Bracket P close bracket suffices so let's now go back to my other tab if I now nothing I see nothing changed but again that's because I already received the virtual envelope in my browser that contained the previous version of that page if I want to get a new copy of paragraphs. HTML I need to reload this tab and now I see the same text but broken down into three separate paragraphs so this is just to demonstrate the point that if you want something to happen you really need to tell the browser to do exactly that well let's introduce some other tags too let me go back to uh my editor here let me go ahead and open my terminal window and let's create something called headings. HTML much like a a book a uh much like a uh an academic paper you might have section headings like the chapter and the section and the subsection and so forth we can actually implement this with some HTML too so let me kind of cut a corner here and copy and paste paragraphs. HTML into headings. HTML let me hide my terminal window let me change the title here just to be headings to be super explicit as to what's going on and let me go ahead now and say h11 and down here let me say H2 two and down here let me see H3 3 now these are three new tags H1 H2 and H3 by definition H1 is typically big and bold H2 is typically not quite as big but still bold H3 is not quite as big still but still bold and these are the default stylizations of these here tags that come with HTML let me go back to my other tab let me click back so I now see my new file headings. HTML let me click on headings. HTML and now even though it's still nonsensical Latin likee text at least it's starting to look pretty looks like a chapter of a book with some sections and subsections and so forth that's because the browser now understands what it is I want of it now you could simulate this by just literally typing the word one in its own paragraph the word two in its own paragraph the word three in its own paragraph but it wouldn't be bigger and it wouldn't be bolder and when it comes to the semantics of web pages it's probably useful to use tags in this case like H1 H2 H3 because it kind of indicates the relative importance of the text like this is the beginning of the text this is maybe some finer detail and then this is the finest detail it might actually help search engines or heck even AI nowadays understand that these are different sections in your text and we'll soon see there's even other tags you can do to be even more helpful to the browser and search engines and AI well how about something else let's move away from big blobs of nonsensical text and let's do something with a um chunk of nonsensical lists let me go into to my terminal window create a new file called list uh. HTML and let me copy paste my hello code from earlier just to save some steps and let me go ahead and rename the title to list in this case and let's just have a list of three things Foo bar and baz um if you've never heard these words before they're sort of go-to computer science words when you just want some random placeholders they mean nothing per se but Fubar and baz are go-to default words like X Y and Z for mathematicians all right this looks like Ace nice pretty list I've indented it which looks great but if I go back to my other tab hit back and I click on list. HTML I think you probably know where this is going just like the paragraphs we just get one big paragraph of Foo bar baz we don't get Foo on one line bar on the next line baz on the third well why is that well just as before the browser seems to be ignoring Whit space beyond single white spaces in fact I can try to be really explicit like please give me some breaks between these lines but if I go back to my other tab click reload it just canonizes multiple spaces into a single space for better for worse so if I really want a list I need to tell the browser that I want a list and one way I can do that is as follows let me delete that temporarily and let me do UL for unordered list which means I'm going to get a bulleted list with little circles next to each word let me then use an Li tag for list item and type Foo inside of the first let me type another Li tag and bar for the next one and then a third with baz and again VSS code is autoc completing which is why I'm able to type the Clos tags so quickly but I've got now Fubar and baz inside of Li tags which in turn are inside of a UL tag now let me go back to my other tab click reload and now we have a bulleted list of items one at a time well what if I want to number this list well I could certainly just go in here and start manually writing one and two and three but you could imagine that getting a little Annoying over time because if you need to reorder the list or add things to it like it's just minorly annoying to have to maintain numbers for lists of things like this is what software is good at this is an easy fix and you might guess where I'm going with this if I want to move from an unordered list which is just Bullets by default to an ordered list which is numbered I can change the UL to an o in both places so that my start tag and end tag still match I can go back to my other tab click reload and what's going to happen by default now is ah I get one and two and three and long story short there are actually techniques whereby you can change this Behavior using attributes to not just be these Arabic numerals but you can use Roman numerals or other symbols that browsers are designed to support and it all just kind of happens for you which is great because if you're writing something like an outline for a paper or the like you don't really want to have to think about all of those numbers just like Google Docs and Microsoft Word like the software should figure that out for you and indeed HTML can do just that all right how about one other here this time let me go ahead and cut a corner and open a file I created in advance just to save a few keystrokes let me close most of those files for now let me go ahead and copy from my source 8 directory a file I brought with me called table. HTML and let me open this up in its own Tab and you'll see this file here that demonstrates a table and indeed I know that because I have a top this file that I wrote in advance something called a comment we've seen comment comments in C with SL slash we've seen comments in Python with hash symbols in HTML a little weirdly you can write comments with Open Bracket exclamation point dash dash then you write your comment and you finish your thought with another dash dash close bracket but no additional exclamation point why these keystrokes well the humans who designed this probably figured who is ever going to type that sequence of keystrokes like that's what we'll use for our comments tag as an aside if you ever actually want to write those patterns of characters there's a way to escape those things as we've seen in other languages as well but let's focus on the juicy part here what's inside the body of this here page apparently something called a table and a table by that we mean tabular data like in a spreadsheet or in a database table TR I'll tell you is short for table row TR TD a little less obvious but it's short for table data so it's kind of like the cell in that row and the fact that there are three table data elements inside of this one table row element means that there's going to be three cells or really three columns from left to right inside of this row below that is going to be another table row inside of which are three more cells four five six as their contents then 789 then curiously an asterisk a zero and a pound symbol so where are we going with this well if you're imagining your mind's eye a telephone that has buttons and labels it seems like I've just been laying out rows and Columns of numbers you'd see on your your cell phone or an oldtime uh landline phone well let's open this let me o go back to my other tab click back now you see table. HTML and this isn't going to be all that pretty but it is tabular data and if I zoom in with command plus here in my browser you can see that this is laid out rather like a phone pad now this is not a super compelling use but you can imagine actual tabular data Maybe data that came from a database maybe Google in fact when they implemented Google Sheets or Microsoft when they implemented Office 365 in the cloud for Excel maybe that's how they're laying out all of your data in your browser as it is underneath the hood they are using of course HTML but specifically table tags like this now as an aside they're probably doing even fancier things than that nowadays but they certainly could use TR tags TD tags and these table tags as well all right enough about text let me actually go back to vs code here let's close table. HTML and let's do something with an image in fact let me go ahead and grab a file called maybe uh bridge.png which is a portable Network graphic version of the bridge with which you're now familiar that we ran a number of filters on in the past and this is now in ping format because BMP format which we used in a previous problem set tends not to be used on the web or supported necessarily by browsers but pings are gifs are jpegs are and potentially a few other formats as well so I'm pretty good going with portable Network graphic we're good to go so let's create a web page that that actually includes this image because at the moment I'm just showing you the image I'm not actually embedding this image in a web page like Google or other websites would so let's do this let's close that tab let's open a new file called image. HTML just to save some keystrokes let me copy paste my Hello World example again changing the title to image and in the body of this page instead of any text let's actually put an image from Harvard University let me go ahead and use Open Bracket IMG for short Source equals quote unquote bridge.png so in this case we have a couple of new things going on here we've got a new tag of course IMG which is short for image why it was just faster to type for humans than image so they called it three letters instead of five source is representative of another attribute we saw an attribute earlier Lang equals well it turns out that the image tag if you read its documentation or listen to me now has an attribute called Source SRC for short that allows you to specify the source of an image that you want to display in the page but somewhat differently here the image tag that I've written has no Clos tag no end tag I could do this but frankly Open Bracket SL image but frankly this seems a little unnecessary if not confusing and it is technologically unnecessary it turns out that some tags can be empty in the sense that they don't need a Clos tag and an image kind of makes sense right unlike a head of the page the title of a page the body of a page that start over here and maybe end down here an image is either there or it's not like you can't start showing the image and eventually stop showing the image like it's either there or it's not so you don't really need an end tag for certain start tags an image is among the examples if now I go back to my table here and click back to see my directory index there is not only my ping but also my image. HTML page and if I click on this it's not all that different from looking at the image itself but apparently this is a pretty high resolution photograph that we took I haven't done anything to resize it and so what I'm seeing is a web page inside of which is this entire image so that's okay but uh I'm going to need eventually some techniques for shrinking this down and we'll come back to that in a little bit CSS another language is going to be one of our solutions to that their problem but of course things can go wrong for instance suppose that I mistyped this and I wrote brid without the e and I go back to this page and reload that's of course a typographical error and I see this broken icon and you might have seen this on the real web sometimes images are broken because it's essentially a 404 happening underneath the hood and in fact the image just cannot be found so if I want to help the user with this for a number of reasons I can actually do this let me add an ALT attribute for alternative and say something like Harvard University in other words in the event this image can't be displayed go ahead and at least show the user some explanatory text better still if someone is you if someone is blind or they are using a screen reader to help them hear what is on a web page that they otherwise can't see the alt attributes value can be spoken aloud to someone with a screen reader so they know exactly what the image is that everyone else can see so they can still appreciate what the content of this web page are if I go back to my tab here in this case it's still a typographical error but at least now people with and without screen readers can see what this image is supposed to be and even if I fix the typographical error and reload the page if someone can see the image they now will but if someone's using screen reader software which for those unfamiliar a software that looks at a web page and tries to describe in English or some other human language what is on the web page now we have a helped that device be all the more accept accessible as well so you might have zero or one or now it seems two attributes on a given tag all right well what else can we do in terms of media well there's something else we can do here and I'll just show you this one and let you play around with it online if you'd like in my source eight directory I've actually got a video file uh called video. HTML as well as video. mpp4 and if I open the former of those you'll see a page I wrote in advance that shows another technique about HTML at the end of the day we still only have tags and attributes so like fundamentally we've not really pushed ourselves too far here but notice that there's a video tag in HTML that does come with two attributes at least least one called controls one called muted the controls attribute just means please show the user like a play button and a pause button and maybe some other things the muted attribute means literally that mute the audio by default and that tends to be a good thing because nowadays browsers are pretty um defensive against advertisements and annoying advertisements like videos autop playing on websites so you can ensure that your video will still autoplay but without bothering the user so you can mute the volume at least by default but what's worth noting for our purposes is that some attributes apparently don't even need values there's no equal sign there's no quotes which in some cases are necessary to specify the language of this pages in English but some attributes indeed do not need values and if even if they do you can use as in Python single quotes or double quotes and sometimes no quotes at all but I would get into the Habit still stylistically of using double quotes for consistency as I have but as for the rest of this a source tag exists which you can put inside of the video tag it itself has confusingly a source attribute SRC for short as well as a type attribute which indicates what type of video are you trying to play for the user so I'll wave my hands at some of that media but you're welcome to play that page and open it on your own and even unmute it to see what I've otherwise shown but let's now make the web all the more interactive let me close that example let me go ahead and open a new file called link. HTML and start making the hyperlink links with which we're all familiar clickable links in web pages which is what makes the web the web itself let me cut some Corners here and copy paste my Hello World example into link. HTML let me change the title to link just so we know what's what and let's actually make a page that has a genuine link to Harvard's uh to maybe that image of Harvard called image. HTML I could say something like this uh visit Harvard period now this of course is just text so this is not that interesting but just to make sure we're on the same page let me click back let me go to link. HTML and you'll see that I've called it link. HTML but there's no link there I can click Harvard all I want but nothing actually happens so let's make it a link what do I want to link to well I could link to Harvard's website but I already have a picture of Harvard let's try linking to a page relative to this one let me go ahead and open a new tag called The Anchor tag a for short let me use its attribute called href which is a little Arcane but it stands for hyper reference the destination of this link let me add some quotes and say image. HTML close quote close tag and then notice VSS code's trying to be helpful but sometimes it doesn't know what I intend so I'm going to delete the end tag move my cursor over and paste it at the end and finish my period there just because I want everything to be balanced and now even though this one looks a little more cryptic this is now the beginning of hyperlinking pages on websites if I go back to my other tab click reload ah now I see the familiar underline text which of course signals in many web pages that this here is a link if I hover over it it's going to be a little small but in the bottom left hand corner of my browser which is Chrome I can actually see that this will lead me to a page called image. HTML and indeed if I click on Harvard for real I get back to image. HTML and the URL in my browser has changed from link. HTML to image. HTML so this is what's known as a relative link where I'm linking from one of my own pages to another of my pages they're in the same folder so I don't need to mention any folder names the server just knows what I want so that's then a link but what if I want to link to a actual URL and not just a relative page like Harvard's own website well that I can do too I can change the value of this HF attribute and I could just do harvard.edu unfortunately this is not going to work the values of hrefs in a web page if they're going to be full-fledged UR L have to be actual URLs protocol and all in this case and so I'm going to do https www.harvard.edu and heck I'm going to include the trailing slash even though I don't strictly need it and technically speaking I could omit the protocol if I want the same protocol to be used but in general I'm going to link to the full-fledged URL of harvard.edu here I'm going to go over to my image tab I'm going to kick back to go back to my link tab I'm going to reload to make sure I get the latest h HML in my browser and if I hover over this now super subtle but in the bottom corner of my browser now ah this indeed leads me to harvard.edu and if I click that we should see the familiar forests that we saw a little bit ago and now this is an external link not a relative link uh that I've now implemented in this web page all right let me click back and let me reveal one other feature now of those so-called developer tools previously I opened up developer tools when I wanted to play around with http the protocol that just gets the web pages from browser to server and back but now it turns out I'm going to use another feature of my developer tools by WR clicking or control clicking anywhere on my page or going through the uh main menu I'm going to click inspect and now inspect makes a little more sense because now I'm literally inspecting the web page itself notice at left here is a um visualization of the underlying HTML of this web page and some of it's hidden but I'm going to click the little triangle to reveal the rest of it and you will see essentially at left here under the elements tab in Chrome a list of all of the elements that compose this web page and again an element is everything between an open tag and a Clos tag so in this case I am seeing a very pretty printed version of my own source code and some things are broken out onto different lines just to make clear that here's some text here's a link here's some other text both of which are inside of this body tag and notice too as I hover over things Chrome just to be helpful because if I'm a developer I want some help here I can see in light blue what I am hovering over in my HTML being mirrored in the actual body of the page if I hover over the body I see everything to the body as well now what I can take away from this is the following this here is my web page and it's very pretty printed if I close this tab I can see my same uh code in another way if I right click or control click I can also go to view page Source view page source is a feature that's been in browsers for years and you can see the same code but exactly as it came from the server I happen to be pretty nitpicky so it's all nicely indented as well but this is a static version of the page whereas the uh developer tools allows me to actually poke around with things in fact let me close this tab let me reclick again on inspect and watch this if I want to poke around here I could actually go into the developer tools and temporarily without even going back to my terminal window I can click on or click on anything in this page and I can actually change it in real time like I can change Harvard to Harvard University and then hit command enter and in this case I can change the contents of the web page but curiously that has not changed anything on the server because this makes clear the point that once the browser has requested a web page from the server and downloaded that virtual envelope inside of which is the original version of link. HTML that's what the browser is going to keep in its memory you can change your copy of that page all you want but it doesn't affect the server at all the browser gets a copy of what's on the server in fact we can take this feature out for a spin seemingly maliciously but not in a way that has any effect in fact let me pull up not just harvard.edu but specifically the admissions page for Harvard College and scroll down here and you'll see this advertisement toward the end why Harvard well notice that if I want to see the underlying HTML of this page I can see it in a couple of ways I can rightclick and choose view page source and it's going to look like way more code than we've written today this is me scrolling through all of the HTML that composes the admissions websites HTML at Harvard there's a lot there but it's going to follow that same pattern of uh tags and attributes or I can kind of pretty print it by going to inspect going to the elements Tab and there notice is the exact same content even though I was scrolling through it super fast but it shows you everything pretty printed so you can kind of poke around more importantly I can click on any part of the page with my control key or two fingers and select inspect and what's nice is that Chrome and really any browser will jump to the specific HTML in the browser's memory that corresponds to that part of the page the upside of this is I can actually infer how did Harvard make this web page how did they structure their HTML now we haven't talked about all of these tags yet but notice that there's all of these div tags div there's a section tag but there are some familiar ones here's an H2 Harvard is using an H2 tag for y Harvard here's a UL down below for some kind of unordered list but notice here I can be a little playful here and maybe we should nudge people to go to Yale instead let me change in the elements tab Harvard to Yale hit enter and now I seem to have hacked Harvard's website and it suddenly says why Yale instead but of course this changes nothing on the server because this to is a copy and the moment I reload Harvard's website I get a fresh copy of what's actually on the server so what's the value here well one pedagogically it's just a useful mechanism these developer tools for understanding and learning how a website is structured if you want to do something similar yourself as a developer tool frankly sometimes it's a lot faster to just mock things up in the developer tools decide okay I like how this looks and then go over to your actual HTML and make the changes for real it's a faster way of iterating and it's also a helpful way of diagnosing certain problems that we might otherwise run into all right but there's still a danger here speaking of Harvard and speaking of Yale let me go ahead and close that tab there and return to the HTML of link. HTML it turns out that the attacks with which you're familiar in the real world namely fishing attacks are all too easily waged via HTML alone to be fished is typically means to receive some kind of spam email that's trying to trick you into clicking on a link that purports to be legitimate but is really taking you to some adversary some bad guy website that's trying to steal your credit card information your username your password or something like that and those emails in Gmail in Outlook and other tools they themselves are using HTML anytime you get an email that's not just black and white text but has colors and maybe images and formatting it's using HTML so HTML is used not only for web pages not only for mobile apps but also for emails as well and here's how easy it is to unfortunately deceive users suppose that I still have a link here to Harvard but I actually Chang the actual href to be yale.edu if I go back to my actual browser here and close my developer tool and click reload the page still says like the HTML visit Harvard period And this is super subtle but if I hover over this link in the bottom corner of my browser now I'm actually going to be led to yale.edu if I click this link in fact if I actually do that voila now I'm actually at yale.edu so not a big deal in this case I'm just sending one student from one place to another but you could imagine making a website that looks like a bank's website that looks like PayPal's website that looks like something legitimate such that when I click on a link no one's really looking in the bottom left hand corner of their browser all the time you could all too easily trick a user into visiting a page and maybe filling out form on a page that they didn't actually intend and we say this not to empower you to do such things but the opposite to detect when such behavior is happening and frankly getting into the habit of hovering over links that you're a little suspicious about is probably a good practice but for today know just how easily these threats can be weighed and why there are so many of these threats to Us online it boils down to these basic fundamentals now all that said we haven't even done anything dynamically every web page we've made thus far has still been very static like content I have made in advance and you can reload reload all you want it's always going to look the same from the server again and again but how about we Recons we revisit how URLs work not just to serve up static content but Dynamic content as well it turns out that besides having folder names and file names at the end of URLs you can also have a question mark in URLs and then key value pairs literally with an equal sign in between them we've seen key value pairs all over the place most recently in things like dictionaries for instance but in this case here we have a canonical format for how you can actually provide input from a browser to a server typically that's typed in Via a form so for instance let me actually open up a brand new tab here and let me go to to google.com just the main page that doesn't come with my browser and I'm going to go ahead and type in something like cats cat now ignoring the fact that there's a whole lot of autocomplete going on here let me hit enter and let me emphasize what my URL we can be distracted For a Moment by the cute cats on the top of the page but let's then zoom in on the top of the page here where we'll see a very long URL most of which frankly I don't understand and probably only Google employees would understand what everything is in this URL but let me delete delete most everything except the essence of this URL and what I've left at the top of my browser is only https www.google.com search which is the path question mark Q equals cats it turns out way back in 1999 when Larry and Sergey founded Google and created their very first search page they had a text box just like this one but more simple in design and if you filled out that text box with one or more words and hit enter you submitted a query to the server for which you want to search Q for short and so all that form needs to do when you hit enter is change the url it would seem to take that user input in a standard format Q equals cats something equals something something equals something in fact if there's multiple such parameters as these are called just like in functions you can separate them with Amper Sands but the question mark just means to the server hey server here come some key value pairs otherwise known as HTTP parameters when I hit enter the search results are actually going to be exactly the same most of the other stuff in the URL is probably for tracking purposes so Google can track of what I'm searching for and what I'm clicking on but in essence if we distill the URL to just question mark Q equals cats after search we have provided user input to this here page and what's kind what's cool about that is the following normally the canonical URL might be as simple as this or it might actually have two key values and pairs which indeed can be separated by these here ampersands I think I can take advantage of this here feature and Implement like my own version of Google let me do this like that's kind of it for HTML like there's Bunches of other tags and attributes out there but those are really for an online tutorial or book or reference or or some other source to just pick up what more vocabulary there is at the end of the day it's just more Tags and More attributes following this this shared structure so for now I want to make things more Dynamic leveraging my knowledge of just that let me go back into my vs code let me create my own page called search. HTML enter let me save a few keystrokes by copying and pasting my Hello World code and changing the title to search let me get rid of the body here and let me begin to create my very own form using literally a form tag F RM space and then here I'm going to close the tag immediately inside of this form element now let me go ahead and create an input whose name equals q and inside of this form element let me additionally add an input whose type equals submit and we'll see what this gets us first let me go back to my other tab click back to see my directory listing of files click on search. HTML and this is super simple but I seem to have the beginnings of an interactive web form a big text box and a submit button by default that seems to be a form unfortunately if I type in anything to this cats and then click submit nothing actually happens but but if I go to my own URL here at the top notice that I'm still on search. HTML but question mark Q equals cat was automatically added for me by the browser as soon as I click submit so let me go back and add a little more detail in my editable file let me specifically specify that the type of this text box is text but that it turns out as the default so I'm actually going to enhance that and make this a search box specifically let me go back to my browser and reload and this is subtle but if I now type in cats notice that I get this little X here which is just a userfriendly feature which means now I can click on the X to clear that box that is simply because I changed the type of this box from generic text to a search box for which that feature is useful I don't really like the idea of submit I'd kind of like my button to say something about Google so let me go back to my submit tag here and change the value of that input to be quote unquote Google search then let me go back to the page reload and now things are getting a little more interesting whereby I have a Google search button it still doesn't do anything but let me be more specific when I submit this form I want the method to be used the verb to be quote unquote get somewhat confusingly the convention is to use lowercase here even though inside of the envelope I've demonstrated with curl that it tends to be capitalized in the actual HTTP protocol but so be it but get is actually the default so I don't strictly need that but what I do want to add here is an action what action do I want this form to take when submitted well I don't have a backend I don't have a database I have not searched the web ever with this here code space but Google has so let me use Google's backend their servers and database to search for whatever Q is let me change the action value here to be htps www.google.com search so just the beginning of that URL without the question mark now let me go back to my search tab read load and now nothing visually seems to have happened but if I type in cats now and click on this new and improved Google search button Watch What Happens not only to my URL but the contents of the page I have just searched from my own web page for cats on google.com in other words by nature of how HTML forms work specifically using the get method and the action of Google's own URL my browser knows how to assemble all of those ingredients into a brand new URL that contains as the value of Q whatever I typed into that box and heck I can do this manually now even though no one searches like this I could just search for Q equals dogs and now I get some adorable dogs as my search results here but that's just because I Now understand what these URLs are doing for me and how they are structured if I zoom out and I go back to search. HTML I can actually make some improvements here to that same form you might have noticed that when I typed cats the second time I actually saw it autocompleting as cats there was a little pop over there if I don't want any autocomplete there's an attribute for that autoc complete equals quote unquote off this will now disable the browser from remembering things that I've searched for before I can also do this notice if I go back here to my search page and click reload notice that with no hands on the keyboard the box is there the button is there but my cursor isn't I have to manually focus my cursor on that box and then it gets highlighted in blue and I see the blinking cursor that's not the best user experience or ux so to speak why you're going to make the user move their cursor and put the cursor where you want it to be anyway so I can fix that let me go back to this same search box and let me add autofocus and I don't actually need to give it a value but if I now go back to the page and reload watch even without clicking on that text box it's already highlighted and blinking because I've given Focus so to speak to that their text box now what is this text box it's just a big white box well if you read the documentation for or listen to what I'm here saying about the input tag you can also have a placeholder attribute that can contain any text you want like query for instance quote unquote if I now go back to this page reload once more now you see in Gray text inside of the Box sort of explanatory instructions as to what I'm looking for and as soon as I start typing cats query goes away so that too is a feature you've probably seen in browsers that's just the result of someone having used the right HTML tags and attributes now I've been a little um deliberate here I have alphabetized all of my attributes if only because it helps me personally skim things from left to right and know if I've missed something that I intended but strictly speaking there's no official ordering to any of these attributes you can put them left to right right to left they don't need to be alphabetically sorted but stylistically this is indeed what I myself tend to do here let's take a look at one more use of forms that that will allow us to introduce another feature that's present not only in HTML but in other programming languages as well including in fact python so let me go ahead and create a new file here called register. HTML and let's just imagine that we're trying to create a web page via which someone can register for something a website a sport or anything else and what I'm going to do in register. HTML is save a few keystrokes and copy my search code into register. HTML and I'm going to change the title to register and I'm going to get rid of the form as a starting point here let me close my terminal and inside of this form let's just create the beginnings of a registration form but unlike the Google example I'm not going to bother trying to submit this anywhere that'll be a goal for another time but let me go ahead and in this form create an input uh for which autocomplete is off like before for which the field is autofocused and you should only have one autofocus field otherwise the cursor doesn't know where to go let me specify that I want this input to be someone's email address because after all I want this to be a registration page so the placeholder text I'm going to be using is email so they know what to type and then the type of this field for now is just going to be text and then I'm going to go ahead and have a submit button but it turns out you can have different types of buttons and one other way to express a submit button is literally with an HTML element called button for which the label here will be register so long story short there's different ways to implement buttons here is now a second way let me know go back to my other tabs let's close the tats let's hit back to get to my directory index and let's now click on register HTML so very similar in spirit to my search form but now I'm clearly asking for an email with the registration button however I could try to register with anything here in fact if I'm not paying attention maybe I'll just type my name like I always do in these examples and click register and even though nothing technically happened notice my URL did change so the form was submitted because question mark email equals David is appearing there but that was not an email address and it would be nice if the browser says no no no no that's not an email address you cannot submit that form yet but if this is just a text box it's going to tolerate any kind of text but as you might know from uh Microsoft Office and Google forms you can certainly validate forms in those kinds of software certainly we could do so in HTML well we can in a couple ways let me go back to my HTML and let me change the type of this input to be not text not search but email and it turns out that this is one of the officially supported types of inputs nowadays where the browser will now know that okay before I can let the human submit this form I better check that they're typed in an email so let me reload this page let me again foolishly try to type in just my name not my email and click register and now notice I'm getting admonished by the browser this is a default popup that's saying please include an at in the email address David is missing an app so obviously I've not typed an email address so let me fix this maen harvard.edu now the error has gone away I can click register and even though nothing useful happens again the URL changed IND that I did submit the form just to know we're useful all right so that's all fine and good but it turns out that email is one of the relatively few types of fields that you can check for in addition to search and text more generally and a few others as well but it turns out that uh browsers nowadays in the context of HTML support what are called regular Expressions to help solve this problem a regular expression is a pattern otherwise known as a Rex for short that allows you to Val validate input from users and make sure that that input matches some pattern and this is a bit of a mouthful how you can do these there's a whole bunch of documentation online not only at this URL but in Python's own documentation and in other locations as well but just wanted to give you a taste of the possibilities because these are really everywhere in highlevel programming nowadays as well as in this context of HTML here is the symbology of regular Expressions we're not on a language it's just a way of representing patterns if you will if you have a dot in a string of text that's a regular expression that just means any character it's like a wild card any one character can be there um a star is actually means zero or more time so you can say give me a character Zero or more times so there's either nothing there or there's one or there's two or there's more you can use a plus which means give me one or more characters so not zero but one or more you can use a question mark which means zero or one character but that's it you can use curly braces unrelated to Python and say I want this many current occurrences of a character and you can have a range inside of curly braces give me minimally this many characters maximally this one and you can do other things too in square brackets you can say give me any one of these digits Zer through n in this case but you could type anything in there that you want you could say 0-9 to specify a whole range without having to type them all out you can type Dash uh back slash D to indicate any digit so you don't have to type any of that out or you can do the opposite back SL capital D which means anything except a digit so long story short and I'm very much waving my hands at some of the details here there's this whole symbology that humans have come up with in different languages via which you can represent patterns so this is all to say that I could come up with my own pattern for an email address even though it's not going to be as good as the browser's own let me go back to vs code here instead of saying email uh type equals email let me go back to type equals text or heck I can go to the default and get rid of this all together but I'm going to use one other attribute we haven't yet seen which is literally pattern equals quote unquote inside of this pattern's value I can use a regular expression a pattern that represents what kinds of values I want to accept now I'm going to keep this simple and therefore not very good but remember that dot means any character plus means one or more of any character and at sign means literally an at sign another dot means any character another plus means one or more of any character then back slash doedu what's going on here well we haven't seen this yet but curiously if I want to literally have a period in the user's input well I can't use dot because that means any character it was a wild card so just like in see just like in Python I have to escape certain characters so in regular Expressions if I do backs slash dot that means give me a literal dot in the user's input an actual period and then edu means make sure that the user's email address in this case ends with doedu now this is a bit of a simplification because it is not the case in email addresses that you can allow for any one or more characters then an at sign and then any one or more characters and then a edu it's actually more formally defined than that so this is a very quick and dirty regular expression for an email address however if I now go back back to my register page and reload and I again try to type in David and not an invalid email address that pattern will be checked and the browser will prevent the form from submitting at all so I can express different patterns of things now for email that's not the best thing because in fact if I actually look at the official definition of an email address is regular expression according to browsers it's actually this crazy long sequence of text using the symbols I showed you as well as some others but this just speaks to how complicated the definition of an email addresses pattern is so using type equals quote unquote email definitely the better bet but let me do something a little more reasonable if I go back to vs code here and let's suppose that we want to ask the user not for an email address but their phone number so let me change the placeholder to be phone for instance and then let me change the pattern to be that of a Us phone number so here I could do this in a bunch of ways but I'm going to use backd which means digit and then curly braces three times then a hyphen then a back SL D curly braces three then a hyphen then backd curly braces 4 and this here represents a standard format for a us-based phone number three digits -3 digits -4 digits so this is how I can now ensure that the human types in not an email address and definitely not their name but a phone number that at least follows a certain pattern maybe not very user friendly because do you really want to require the user to type in dashes wouldn't it be nice if they can skip those maybe they want to use parentheses so there's better ways arguably still to do this the point here though is that uh web pages and other programming languages more broadly do support these things called regular Expressions which are wonderfully useful in the real world but there is a danger here suppose that even though this catches invalid phone numbers now register it's telling me to match the requested format unfortunately as great as all these features are these patterns are that I just introduced you as web developers now should never trust users input why the only thing stopping the user from typing in invalid data like their name instead of their email or their name instead of a phone number or something else invalid is the code that they've downloaded to their browser but recall that even though when they view page Source they see exactly what came from your website they can open their own browser developer tools via inspect here they can go go to those elements and for instance expand the form by clicking this triangle and if they don't like the pattern you're imposing on them well let me just go ahead in there delete uh delete that hit enter okay watch what happens now I have modified the inmemory version of the web page I can click register now all I want and I have just submitted daav ID instead of a phone number so this is to say unfortunately that this week alone we do not yet have enough skills enough knowledge to correctly validate user input we can make the experience more user friendly we can tell them right away in the browser you're doing something wrong please don't submit this form yet but we're also going to need before long a server side mechanism for defending against that kind of attack too so through fishing and in this case through modification of the actual Dom in memory we've seen all too readily how adversaries can try to infiltrate our sites in some way now in addition to the developer tools that come with your own browser it's worth noting that there is at least one official Source via which you can validate your actual HTML that is to say make sure that it is well formed and it actually adheres to the HTML spec at validator w3.org is a web-based tool that you can use to copy paste your HTML even paste the URLs of web pages into and this is actually a tool that will provide you with some feedback as to whether or not you've made syntactic errors with your actual code all right with that said let's go ahead and take a 5 minute break and when we come back we'll introduce ization of these Pages namely through CSS all right we are back and it's time now to start stylizing these web pages so that they're not just these boring black and white pages that have structure to them but really no style and so for this what we're going to do is introduce another language called CSS or cascading stylesheets which is another language but not a programming language via which you can specify how certain tags should be appearing on the screen for instance we've already seen tags like H1 H2 h 3 and I described those as big and bold and not quite as big and bold and not quite quite as big and bold but what do we mean by bold and big it would be nice if we could actually use Font sizes or pixel sizes it would be nice if we could introduce colors and other Aesthetics and indeed CSS allows you to Adorn the structure of your page with the last mile of detail so to speak the colors the sizing the spacing the positioning and so much more now in order to do this we're going to need to introduce one other term of art namely properties and frankly at this point we're just coming up with different words for the same ideas in all of these various languages but properties are sets of not surprisingly key value pairs a property allows you to specify the color of something is this value or the margin for this something is this value or the height of something is this value so properties is just the term of art used in the CSS world to describe key value pairs just like attributes is the word used in the world of HTML to describe their key value pair same ideas for as long as far back as the dictionaries with which we introduced this here topic now where can you go about using properties and how can you go about using them well it turns out there's going to be different ways of applying properties to elements inside of a web page and you're going to have to specify as the developer how to select those their elements and with the wave of a hand let me describe there as being type selectors class selectors ID selectors and attribute selectors some of which we will see over time and all this means is that we're going to use slightly different syntax when we want to refer to different parts of a web page to do that though we're going to need to tell the browser that we want to include some CSS in our page so here again is that sample HTML that represents really the simplest canonical web page that we can create this one's just some saying hello title and hello body and if we make room in the head now it turns out that there can be more than just a title inside of the head of a web page in particular you can have a uh tag called Style which is wonderfully named because inside of that tag you can put some of those CSS properties key value pairs uh targeting specific elements inside of a web page alternatively we're going to see that instead of using a style tag you can actually use another tag up here namely a link tag which unfortunately is poorly named in so far as it doesn't refer to a hyperlink in the way that the anchor tag and the hre attribute does that we described earlier this one allows you to link in the contents of a CSS file which contains all of those same properties the key value pairs but instead of typing them out in your actual web page you can actually put them in a separate file and include them more readily but turns out there's yet another way to stylize web pages and that's with style attributes and we'll begin our story there if only because it's the simplest way to begin but then as we often do we'll try to improve improve improve the design thereof so let me go back to vs code here let me create a new file called home HTML and pretend like we're creating a homepage for someone like John Harvard here on campus let me go ahead and save a few K Strokes as often by copying and pasting my Hello World code into home.html I'll change the title of the page I'll get rid of hello body and I'll hide my terminal window so that we can now build a homepage for John Harbor let me imagine this homepage is having like three big sections like a a sort of header for the page with John's name maybe a middle of the page that just welcomes people to his web page and then a footer with like copyright information or or things like that pretty common format for a web page sort of something up here something down here something down here we just need a generic structure with uh with which to play with some HTML and then some CSS so let me do this let me create a paragraph tag at the top of the page that just has John Harvard's name let me create a second paragraph below that that says welcome to my homepage exclamation point and then below that let me have a footer of sorts that's just copyright uh John Harvard let in this way now let's go about improving this in a few ways well one this is a very quick and dirty Copyright symbol it turns out as an aside that there's other ways to express characters in HTML one of which is through what are called HTML entities because it turns out for some symbols that aren't easily typed on your keyboard uh you can actually use some special syntax and I'm going to use this Amper sand uh pound symbol 169 semicolon and here vs code is actually highlight highlighting it uh colorizing it so I can see what's going on differently this is an HTML entity using code number 169 which if you look at up in a book or a manual online you'll see that this means an actual Copyright symbol so a little C with a circle around it so useful and commonly used here in the US not as easy to type on the keyboard you could alternatively go Google it highlight copy it elsewhere and paste it in using Unicode but HTML entities are commonly used still to represent certain symbols like these now let's look at what this web page uh resembles let me go back to vs code in my directory index let me click on home.html and here we have John Harvard's web page but notice that there are indeed three paragraphs of text although it's not really appropriate to call these paragraphs because they're really just different uh parts of the page or divisions of the page so we'll come back to that but all of the font sizes are the same like there's no uh making john Harvard big and bold here I don't really need to see the copyright as big as it is so you might want to start stylizing content like this but we have with HTML alone structured this web page so how can I add some style well first I'm going to introduce a style attribute before then taking it away I'm going to go to my paragraphs start tag here I'm going to add a style attribute and I'm going to change for instance the font size here so font Das size colon large semicolon close quotes then on this tag here I'm going to add another style attribute equals quote unquote font-size medium semicolon close quote and then lastly just to keep this going style equals quote unquote font size colon small semicolon close quote now strictly speaking I don't need the semicolons in this particular case I'm doing it just for uniformity as we'll soon see but they're kind of back just as they were uh kind of back uh when we introduced SQL in the end of those statements but here now I seem to have added some attributes the style attribute to each of these tags that's stylizing the Aesthetics of this here page so the structure is the same but now the Aesthetics are different in fact let me go back to my other tab let me reload the page and I should see now these new Styles and indeed it's a little subtle but the top line is bigger the middle line is medium and the bottom line is indeed smaller well it'd be nice to kind of Center everything so what else can we do with this page well let me go back to vs code here and let me after the semicolon do something like this text-align Colon Center semicolon and just to save some time let me go ahead and highlight everything I just added and paste paste it inside of those same quotes So now notice I have more properties and indeed that's what we're looking at here this key font size has a value of large the whole thing therefore is a property and I've used it in three different ways with three different values large medium and small this is another property over here text a line whose value is Center and I'm using that again and again and again separating them both Again by semicolons let me go back to my page here and you might imagine as soon as I click reload now everything is nicely centered so I'm taking some baby steps toward improving the Aesthetics of this page but I dare say I haven't really done this in the best way let's let's chip away at this further so paragraph tags are fine but semantically they're really meant to describe paragraphs and I'm hard pressed to say that John Harvard is a paragraph and copyright is a paragraph but these are different regions of or areas of my page so I think what I'd like to do here is just be semantically a little more appropriate so I'm going to change my P tag to be a little more generically div tags which stands for division which is kind of a generic rectangular region of the page which in some sense is adding less information but we're going to improve upon this further this is a very common way to structure pages in fact when we glimpsed Harvard's HTML earlier there were lots of divs divs divs divs in the page because someone who designed that page was kind of laying things out in rectangular regions and even though there's no visible rectangles that's kind of what's going on here it's one rectangular region on top of another three of them in total but I don't think this is the best design still why well let me go back to vs code here and even if you're brand new to CSS let alone HTML as well you might have noticed that I kind of copied and pasted and that generally has not been a good practice it suggests that I'm just doing something redundantly but what if I did this what if I factored out that redundancy that commonality the textalign center as follows let me go ahead and delete it here let me delete it here and let me delete it here and let me propose that all three of these divs actually have a common parent from which they descend so to speak namely the body tag so technically I could go up here and do a style attribute on the body tag equals quote unquote and then put text align Colon Center semicolon and the idea of again the document object model with CSS is that that text alignment centering it will Cascade down to the child Elements which are div div div three of them in this case so that all of them are still centered let me go back to my other tab here and reload and even though nothing has changed visually underneath the hood I have factored out that commonality and appli textaline Center to all three of those same elements now technically there's other ways to do this if I didn't want to stylize the whole body especially if this is a bigger page that has other elements inside of it I could actually introduce a parent of my own it is perfectly reasonable to create a parent div which after all is just sort of a generic container there let me close it all the way at the bottom here and indent it accordingly and then let me go ahead and indent all of these three divs inside of that new div to make the point that if I don't want to apply a style to an entire body of the page that's fine I can similarly just do text align center right here and that too would achieve the same result and indeed in Harvard's page we might have notice there were lots of divs not only side by side but nested inside of each other perhaps it would seem for simp similar reasons as well now strictly speaking I don't have to do it this way let me go back to the body approach just to keep it simple but let me propose that as useful as these divs are as these containers whereby each of them describes a different region of the page I could probably help the internet I could help search engines I could help AI I could help screen readers for accessibility sake understand a bit more about what I mean for each of these divisions of the page to be so instead of just generically saying div what I'm actually going to do instead is use three semantic tags and by semantic tags I just mean html tags that are not as generic as div or paragraph or P for short I'm going to specify that John Harvard is actually in the header of this page and I'm going to close that tag accordingly that welcome to my homepage is in the main part of the page and I'm going to close that accordingly and the footer is actually in a tag called footer itself and I'll close that one as well now these are not Tags I'm just making up these are officially in the HTML specification but they mean exactly what they say the header for the page is probably useful it's kind of informational where you are whose web page this is but the main part of the page is generally the juicy part that has actual information that isn't just logos and and headings like that the footer though typically tends to be less important it's got useful stuff but it's probably not as important as the header and or the main part of the page so these tags capture those semantics and the upside is when Google or Bings show you sample search results or when chat GPT or some future technology is learning about what this page is saying it could logically give a little more weight to the header and the main part and less weight to the footer so you don't see excerpts from the footer which might not generally be nearly as useful but what else can we do now that we've introduced these tags let's actually take a step toward improving the design of this page too generally speaking it's not the best practice to combine uh the structure of your page with the Aesthetics thereof in other words it's not the best idea to combine HTML with CSS all in the same place because when I glance at this page it would be nice if my HTML really did just structure the page and then somewhere else maybe in a different file altogether all of the Aesthetics are why because this way maybe I could use different CSS properties for night mode uh for dark mode and for light mode so that depending on the time of day the colors of the website might be a little bit different I could maybe use different stylesheets for different devices or different types of browsers or the like so it'd be nice to kind of factor out the stylization from the web page itself that said this is sort of a swinging pendulum in Industry there are technologies that actually do combine CSS with HTML the argument being that the closer they are the easier it is to maintain the code and understand what is affecting what so you'll find arguments in both directions when it comes to the separation of HTML and CSS but let's take a step towards separating them at least for our desktop and laptop based purposes purp here let me do this I'm going to go ahead and delete all of these style attributes which is unfortunately going to ruin the Aesthetics of the site and make it very generic as before however I'm going to reintroduce those properties in a different place as I proposed earlier we can make room in the head for not just the title but a proper style tag so not an attribute but a tag and inside of that style element what I'm going to put is a few different properties but the way I'm going to do this is by SEL in parts of the Webb page that I want these properties to apply to so when I said earlier there's these different selectors in the world of CSS this is a fancy way of saying there's different syntax you can use to apply automatically certain properties to certain tags or certain types of tags so let me go back to VSS code here and what I'm going to do inside of my style element is this I'm going to specify that any tag called body which happens to be one and only one should have all of its text align in the center semicolon unfortunately curly braces are back when using CSS in this way not unlike C but again we're not programming we're really just defining key value pairs any tag called header I want to have some slightly different properties font size uh colon large any tag that's called main I want to have font size colon medium and then any tag that's called footer I want to have font size colon small now even though this is taking up way more lines of code it is a step toward keeping my Styles separate from the content of the page and eventually if you if you are on the same page as me here where this might be leading we can probably copy and paste all of those Styles into a separate file then two people can work on the same website at once one person can do structure one person can do style we can do the whole light mode dark mode Thing by having different files for different times of day feels like a design opportunity and all we've done though is Select Tags by way of their names here in this particular case if I again go back to my other Tab and reload the page it's actually not going to look any different but underneath the hood it's indeed been structured and styled slightly differently and here's where we have an opportunity I actually reintroduce those developer tools for yet another reason let me right click or control click on the page let me click inspect and as before you can see all of your HTML at left under elements but notice at right all this time even though I didn't mention it before you can also see styles for things as well so for instance if I click on the body Watch What Happens at right I will then see a summary from my browser of all of the CSS properties that are being applied to the body of the page one of them is apparently text align Center and then there's two others even though I didn't type these out display colon block margin colon 8 pixels and that's the user agent Style St sheet long story short there are certain default properties that browsers have be it Chrome or Edge or Safari or Firefox or the like and what I'm seeing in italics there for the body are some of the default stylizations and this is why therefore some browsers will render the exact same HTML slightly differently unless you try to standardize it somehow with your own CSS but what's nice about Chrome's developer tools and any of these browsers is here too instead of going back and forth and back and forth between VSS code and my browser t and reloading each time I want to see a change I can change things in real time not permanently but in the browser's memory so if I'm just curious and I want to see what this text would look like when aligned to the left I can type in left and notice it immediately jumps there if I delete that all together notice that Chrome actually shows me a drop-down menu allaha autocomplete of all of the possible valid values for the CSS property so it's a great learning technique too I don't have to constantly look things up or watch a video online I can let the browser tell me what are the possible values if I'm learning or I just forget what I can possibly type there I can go ahead and um undo that go back to having things centered but I can actually play around a bit further here suppose I want to change the font sizes well let me go down to header here and notice what we meant was uh font size large for header well honestly reasonable people are going to disagree what small medium and large mean certainly across Google and Microsoft and Apple and other companies so what does large actually mean well I could be more specific if I really want this to mean something I can say something like 18 point which with you might be familiar in the desktop publishing world I can change this to maybe 24 point to make it even bigger or I can even deal in pixels I can say something like 36 PX for pixels and I can get really crazy like 360 and you see that now it doesn't even fit on the screen but look how nice it looks because it's being dynamically sized so I can just kind of play around with these various Styles um in the inspector itself so in short within Google's developer tools and again almost every browser has this now nowadays the network tab showed us the underlying HTTP stuff the elements tab shows us the underlying HTML and now the Styles tab shows us the underlying CSS and there's so much more but so wonderfully useful when trying to modify or learn this here stuff let me go back now to vs code and let me propose to introduce another way of selecting elements previously I mentioned there was this whole list and what we've just done is Select things by way of their type the type of the tag was body or header or main or footer but there's these things called classes in CSS 2 it's not really the same thing as classes in python or Java or other languages if you're familiar but classes in CSS are our own keywords that we can invent and Associate our own properties with those keywords so for instance if I wanted to reuse Styles like text align Center and font size large and font size medium and small I don't have to associate them with specific tags I can create my own nicknames for these if you will let me say that anytime I want to Center something no matter what tag it is I'm going to use a class called centered anytime I want to make something large I'm going to use a class called large anytime medium I'm going to make a class called medium and anytime small I'm going to make a class called small now why the dots the humans who invented CSS needed to come up with some way to distinguish the types of tags or the names of tags from classes and so you simp use a DOT to indicate hey browser here comes a class whose name I'm making up on my own so anything with a DOT represents the start of a class name how do I use these well let me scroll down to the bottom of the page and now there's no association yet with any of those class names with this HTML but what I can introduce now is a class attribute where I can specify okay I want John Harvard to be large and I want the main part of my page to be uh medium and I want the uh footer of my page to be small and by the way I want all of this to be centered so you can create these reusable words and you can invent the word subject to a few constraints on what characters you can use but now you have a set of classes so to speak that you can use on these tags and maybe Bunches of others they're not that useful at the moment because this web page is so darn simplistic but you could certainly imagine in Harvard's web page and Yale's web page and Google's web page where they have so many darn tags might be very useful to use these classes and reuse them so you don't have to copy and paste any of that text as we saw before and in fact let's take this one step further it's a little silly that I keep scrolling up and down let's just move all of this CSS to its own file so let me highlight that and cut it let me get rid of my style tags Al together let me create from my terminal window a file called styles.css though I could call it anything I want let me paste those lines in there and VSS code nicely left aligned everything for me that's it out of sight out of mind let me close that file and then inside of the head of this page instead of a style tag let me do in link href equals styles.css and the real tag for the relationship here is that of stylesheet it's generally the only one you'll use and this is the kind of thing you might have to look up or copy paste but href refers to the file that you want to link in essentially copy paste but automatically like an include in C or an import in Python and the relationship of that file to this one is that of what's called a stylesheet a sheet or page of properties so let's now perhaps use these techniques to make things that are a little prettier now and a little more visually interesting let me go ahead and do this let me close out this homepage here let me go ahead and create a uh open up our old file called link. HTML which previously looked like this when we left it at Yale let's actually undo that fishing attack and change it back to harvard.edu for consistency with before and let's try to bring this link to life in a slightly different more colorful way if I open this page recall we did see the link if I close my developer tools go back to link. HTML notice it was underlined by default which was great because it made very visually clear that it is a link and not just text and it was purple which is the default color in most browsers to indicate yes it's a link but it's one you've already visited so purple means you've visited it before and blue typically means it's a link but you have not visited it before so that's a default but suppose I want to override that and and make things more Crimson or red in nature well let me go back to vs code here and in VSS code let me go ahead and just for the sake of discussion let me take one step backward just because it's easier and more efficient during class to reintroduce our style tag but if you're convinced you could and probably should move this stuff to a separate file that's indeed the best practice but I'm going to keep it simple in the same file let's go ahead and start to stylize this anchor tag as follows my anchor tag abbreviated a is going to have the following property associated with it a color of how about red semicolon and now let me go back to the tag here reload the page and indeed it's now red and underlines here if you want to get rid of the underlying you can I could additionally inside of these curly braces say text decoration which is another property we haven't yet seen uh whose value is now going to be none if I go back to be uh my browser tab reload the page it's still red but not underlined and that's fine and that's pretty common nowadays but here too for accessibility sake you should be mindful of the fact that depending on the quality of someone's Vision they might not be able to distinguish red from black or red from some other color so in terms of accessibility you should make sure that if you're removing telltale signs of links like underlines make sure there's sufficient contrast between the colors that you're indeed using so in fact let me go ahead and um leave that alone for now but let me propose that I'd like to at least show when a user on a laptop or desktop hovers over the link let me at least underline it then this is less useful on mobile because on mobile you don't really hover as much as you do tap or not tap but just so youve seen how in CSS this is done I can do this too I can have a selector that says a colon hover which is a special keyword that the browser knows about which means when and I'm hovering over with my cursor and anchor tag change the text decoration temporarily to actually being underlined and if I go back to my browser tab reload notice that I get now some interactive Behavior anytime I hover you can see the line appearing For Better or For Worse this is how you can Implement a bit more dynamism then with your hair content and the fact that it's an anchor tag means that it's going to apply to any of the anchors any of the links in this here page if I don't want that to be the the case let me propose this let me propose that instead of doing this I want to Define some properties as follows let's go ahead and undo this and in this page let's suppose that we have a visit to Harvard or a visit to AHF equals htps www.yale.edu uh close bracket Yale so the page is a little longer now but the sentence now reads visit Harvard or Yale with two different links how can I now stop analyze these a bit differently well let me go ahead and do this inside of my style attribute let me specify that I want the har link to be read how do I do that I'm actually I'm actually not sure I can just yet but what if I do this if I know I want to stylize this tag let me actually give it a unique identifier there's different ways to do this but perhaps the most deliberate would be give this Harvard give this anchor tag a unique identifier called Harvard or whatever you might want to call it and let's do the same over here let's add an ID to the second anchor tag that calls this tag uh Yale and I'm using lowercase by convention what this allows me to use is yet another type of CSS selector not type or name not class but ID I can create a unique identifier that allows me to say Target the Harvard element how do I express that well instead of using a DOT I actually use a hash symbol here and I say hash Harvard and then inside of those curly braces I can say color red and I can do hash Yale and then inside of those curly braces I can say color blue and actually just to bring back memories For Better or For Worse of hexad deal notation and Photoshop as we discussed when we discussed multimedia and representation thereof I can actually use heximal codes so instead of saying red or blue or any other color I could say hash symbol here unrelated to the hash symbol next to the class name now we are combining color codes with CSS I can do this ff0000 which is a lot of red no green no blue down here I can say hash symbol no red uh no no green lots of blue and those represent essentially the same colors down here I still want to do uh I'm going to not bother actually with the text decoration anymore let me go back to my page here let me reload and now I have now it's getting a little prettier a red Harvard a blue Yale with those two links targeted specifically now there's yet other ways too a third way would be to Target a uh element based on the value or presence of one of its attributes AKA an attribute selector but I'll wave my hand at that since surely you'll see eventually in documentation elsewhere if you go down this road with web design how you might Target those as well but we don't have to do even these selectors IDs are meant to be unique so maybe it would be better to say anytime I have something related to Harvard let's use a class called Harvard anytime I have a something Yale related let's use a class called Yale so here then instead of saying ID I can say class equals Harvard and class equals Yale and now even though it's not relevant for this simple example I can use that class on different elements again and again an ID is meant to be unique and it is a mistake on your part or my part if you use it in multiple places all right so much like with HTM which really only had tags and attributes as its basic similarly is CSS relatively simple in design with just these properties and it has a much larger vocabulary of things and features that you can use throughout your web page but we'll wave our hand at that so that you pick up that vocabulary over time via online references or the like but for now let's just focus on how you can really leverage CSS to take up a notch the Aesthetics of your page and make things much prettier than I myself have been doing thus far let me go back to vs code and let me cop from the code I brought with me today uh phone book example that gives us the simple form of a phone book with three people let me go ahead and open this file as it's already been made and in this file here after I close my terminal window is this a phone book that is apparently made up of an HTML table inside of that table is a couple new tags that well I'm introducing for formality sake here one is called T head for table head inside of which is the heading of the table with a table row TR with two th tags table heading for short long story short even though the table I made earlier to mock up the visual of a phone keypad is perfectly correct structurally it turns out if you want to distinguish the header of your HTML table from the rest of your HTML table you can do so by introducing T head up here and T body down here so implicitly what I was doing earlier was treating everything is the table body with no fancy header up top but what is different here is that by using th for the table heading here instead of TD it's a clue to the browser that this actually has some semantic meaning this is the heading of the table and maybe it for instance should be boldfaced by default but we've seen already we can start to override that as for the body of this table it seems like it's a phone book with three people Julia David and John with our now familiar numbers each implemented in a table row if I go back over to my directory index and reload I'll now see phone. HTML and even though the data is there honestly it's not particularly pretty if you will in other words within this file here I've got all of the data I care about but certainly no CSS and while I could go in and start using some selectors and adding some CSS some key value pairs for properties to make this prettier maybe with some borders and the like I bet I can do better by standing on the shoulders of someone else who's made a thirdparty library who's thought about what would be the prettiest way to display an HTML table and this gives us an opportunity to discuss where are called Frameworks in the world of web development in particular a framework is really a library written by some third party that just makes it easier to frame your own project to sort of structure your own project so that you don't have to implement a lot of Basics particularly aesthetic that so many other people have had to deal with as well better to focus on the problem you actually care about the business you're building the product you're creating rather than worry too much about the Aesthetics thereof and among the more popular Frameworks in the world of HTML and CSS is something called bootstrap which is a li that anyone can use and incorporate into their websites really by just including one or more HTML tags and suddenly everything would seem to look prettier and in fact let me go ahead and do this let me copy an example I brought with me as well this one a second phone book example if we open this new and improved version of phone book. HTML notice a few things in the head of my page I've included a link tag this time but it's not referring to a file of my own like styles.css from before but rather it's referring to an absolute URL that ultimately per the end of this URL points to a file somewhere in the cloud called bootstrap.min.css where Min is just saying that this is a minified file which means a lot of the white space has been deleted from it just to shrink the file's ultimate size but it is in fact a CSS file meanwhile lower down in this file if I close my terminal window here we'll see in the table tag that I've used a class attribute the value of which is table why is this well according to bootstrap's own documentation they just told me if I want to use their stylization their stylesheet be sure to add a class of table to your own HTML table so that they don't presume to change the Aesthetics of all of your tables just the one to which you've added this class meanwhile the documentation also advised me to add scope equals column and scopey Bs column to two of these table headings up here but otherwise the data itself is exactly the same so let me go back to my browser tab here which previously looked like this with no CSS whatsoever and honestly even if I added my own CSS you've probably been underwhelmed as to how pretty my own Pages look probably would not have looked much better but simply by including bootstrap CSS file and adding those attributes that I pointed out notice what happens when I now click reload on this newly stylized phone book suddenly it looks much better still black and white so if you were expecting even fancier you're not going to get it but it's still black and white but notice the font is no longer the default it's no longer some serif but it's some sansera font with less decoration notice that name and number have been automatically boldfaced notice that clearly there's more padding or spacing among all of these values so arguably it's easier to read notice that there's the Gray Line separating each of the rows from each other and long story short it's just prettier it's nicer to look at but you and I don't have to figure out how to adjust the white space how to adjust the Bold facing how to adjust the font size and all of that the library takes care of that for you moreover there's other features you can include here if I read the documentation it turns out that I can also add table- striped to the class attribute so we haven't seen this yet but it turns out that the class attributes value can be one word or two or three so long as they're separated by spaces so if I read the documentation turns out I can apply two classes to this table the second one now being table striped and watch what happens when I now reload the page I now see that every other row is very beautifully striped slightly more usable slightly prettier to look at and maybe more helpful then to discern what data is on what row and let me wave my hands at the rest of this but suffice it to say that by way of Frameworks like bootstrap you can actually make your website faster and better and preter without having to reinvent lots of wheelers yourself that said if you're particularly artistically inclined and want to fine-tune things you can create some or even all of the CSS that you're using but for more on bootstrap all of its documentation is at this URL here in fact in many of cs50's own projects do we ourselves use bootstrap and its classes so we don't have to figure out all of the Aesthetics thereof now with all that said just one language remains this one a proper programming language that For Better or For Worse is going to bring back functions and arguments and loops and conditionals but before we get there let's take a five minute break and when we return for the final time we'll dive into JavaScript all right we are back and we now take a look at the third of our three languages today that of JavaScript but specifically one that's a programming language and by programming language I indeed mean that we'll get functions and arguments and loops and conditionals and more back but let's take a quick tour through JavaScript just as we did python much more quickly because what's ultimately important to us today is that you have a sense of what JavaScript can do but we will really only scratch the surface of this here language not only can JavaScript be used in some of the ways we'll see today but it's also increasingly being used on the server as well to generate entire websites and applications and more so we'll give you a sense really of some of the basic syntax and basic capabilities but ultimately defer to your future endeavors your own final project perhaps to apply JavaScript and explore it all the more so just as we did earlier let's consider the simplest of web pages here in HTML alongside its own Dom or document object model which represents again how that HTML might be structured in the computer's memory once the page has been downloaded and loaded by the browser unfortunately what you're looking at here is a very static web page one that simply says hello title and hello body but wouldn't it be nice if that Dom could evolve over time after all in C and then in Python we experimented with data structures via which we can add and remove data dynamically based on user input and More in fact almost any web page you've used nowadays has some form of dynamism involved such that it's rare for it to be a static website odds are something is changing case in point if you open up your Gmail inbox or Outlook inbox and just sit there staring at it odds are For Better or For Worse more email will appear more email will appear and previously we describe those kinds of inboxes as Stacks which they rather are underneath the hood but visually how are those stacks of emails being implemented in HTML well we've seen already that it's probably some form of tabular data a bunch of TRS TRS TRS one for each email that you might receive but if it's coming from the server once how can you possibly get more emails so long story short thanks to serers side Technologies python among them and client side languages like JavaScript among them can you actually behind the scenes get more and more data from the server in order to update the web page and in turn the underlying Dom so how can we go about doing this well let's see what some of the things are that JavaScript can do we have conditionals in JavaScript whereby such as in scratch when we had X less than y as a Boolean expression in JavaScript here at right that kind of code is now going to look like this unfortunately the parentheses are back the curly braces are sometimes back but this is perhaps the simplest way to think about the structure of a JavaScript version of a conditional it actually looks at a glance exactly like C uh if we consider an if else in scratch here at right now JavaScript would be exactly the same just as we saw in fact in C and similarly if we have an if else if else if that too might look exactly like this but unlike python which rather abbreviated else if in JavaScript and in C it is else if with a space in between all right what about variables in JavaScript if you actually want to be able to store something in your own variables well in scratch recall that we might have set a counter equal to an initial value of zero like this in JavaScript there's a few ways to do it but the simplest way to describe this is by using a new keyword let which is like a very polite way of asking the browser to give you a variable let me have a a variable called counter and initialize it to a value of zero semicolons though are now back now that's a bit of an overstatement because JavaScript can actually tolerate the absence of semicolons at least in many cases however for consistency we and I will continue to use them here how about if you want to increment that counter by a value of one well in JavaScript you can do this by setting counter equals to counter plus one the equal sign being of course our assignment operator from right to left you could also do counter plus equals 1 just as in C and in Python and if you like the and C plus plus and minus minus are now back so in JavaScript you can do that to increment or decrement a variable respectively what about loops while in scratch we might have had something like this to repeat three times in JavaScript it similarly is going to be very similar to C but instead of saying something like int for integer and C we indeed say let in JavaScript to create a variable like I do this say three times while incrementing with Plus+ I along the way what else might we now do well we might have a forever block here and scratch that does something of course forever in uh JavaScript you can also say while true where true is back to being lower case here and that will ensure that whatever is between those curly braces will happen again and again meanwhile if we revisit the canonical form of this HTML where can we actually put Javascript code turns out there's a few different places and there's a few different reasons to use one place or another but just so that you see in the range of possibilities especially when you then see suggestions in online documentation for JavaScript libraries you can put a script tag in the head of your page just like we put a style tag or a link tag up there as well as the title and inside of that can go some raw JavaScript code typed out by you of course I've proposed that it tends not to be ideal to co-mingle one language with another and so there's other ways to do this too you can actually have a script tag this one with a source element that will allow you to specify another file name or even another URL from which you want theob JavaScript itself to come what's a little weird though about the script tag here even when used with a source attribute is that you'll see that I've close the tag nonetheless with an Open Bracket SL script close bracket tag at the end of this line to make clear that there's no JavaScript inside of this element indeed it's only coming from that same source as an aside you will also see and there are also reasons to sometimes put a script tag in the body of the page that is below almost everything else in the page or a script tag with a file reference therein even uh at the bottom of the page just because order of operations can indeed matter but these are sort of subtleties that uh we'll try to avoid for now simply focusing on really what JavaScript itself can do and in fact what's perhaps most powerful about JavaScript and what nicely brings us rather full circle back to where we started the class in scratch JavaScript in the context of browsers can be very much event driven so just like in scratch when we actually had actual events and even a block if you discovered it called broadcast where you could have one Sprite somehow signal to another in JavaScript and specifically in the context of browsers there's just so many events or things that can happen for instance you might change the value of a field in a form you might give something focus by clicking on a text box you might drag something from one place to another you might put your mouse down or Mouse over something on a mobile device you might put a finger down there by touching down on the device so long story short all of these keywords that you see here represent events that happen inside of a browser that JavaScript as a language can be used to listen for and respond to and as such you can use JavaScript to make very interactive and responsive web pages whether that's to go get more emails from the server or to grab more of a map if you're clicking and dragging while using Google Maps or the like so let's begin Tobe scratch the surface today only of what JavaScript can do let me go back to vs code here let me create a new file here called hello.html and in that file I'm going to go ahead and save a few steps by first copying as a starting point some of my earlier code let me close my terminal window change my title as always to just hello and get rid of now that default body and let's go ahead and whip up a very simple interactive page that just says hello to someone more interactively ideally letting them type in their own name just as we've done in so many languages prior let me go ahead and create a form tag in here and inside of that form let's give myself an input and just to practice what I've been preaching let's turn autocomplete off as before let's turn on autofocus so I don't have to click in it manually let's give this input a unique identifier for reasons that we'll soon see like name although I could call this thing anything I want but I do want the person's name let me use the placeholder text of name so it's clear to the user what I'm prompting them for and the type of this text box even though this is the default shall indeed be text what else do I want to do well let's keep it simple and just have an input type equals submit so that I get a button which you've seen in a couple of different ways let me go back to my other tab reload the page and I'll see now hello.html inside of this file I see a very simple form if I type in my name though and click submit notice that my URL has changed if I zoom in up here and there's indeed a question mark which suggests that something was submitted from the the browser to the server but there's nothing after that there's no something equals something and why is that well even though I gave the text box an ID of name I didn't give the text field a name itself in other words I did not say if confusingly name equals quote unquote name just as I did name equals quote unquote Q or name equals quote unquote email and that's fine because you we've certainly seen inputs before that don't actually send anything to the server they just result for instance in the case of a button in the form itself being submitted so this is to say that if an input in a form does not have a name it's simply not going to be submitted to the server but that's okay because my goal at hand today at least for this example is to say hello to the user but not server side we don't yet have the means yet until we reintroduce some python to generate content server side I want to do everything client side and so just to be clear just as HTML is downloaded from the server to the browser CSS is downloaded from the server to the browser JavaScript as we are currently using it will also be downloaded from the server to the browser and executed client side in your own Mac your PC or your phone which is to say that any of the data we get from the server has to come all at the get-go until then it gets executed client side so if I want to greet the user based on what they type in their type in their name as I need my client side JavaScript code to go grab that name from the form and display play it on the screen for me so how can I do this well it turns out that the form element can take another attribute that we've not yet used that's actually reminiscent of those keywords on this list here indeed notice on this list is a submit event and indeed in HTML I can use an onsubmit attribute in my code to do most anything I want for instance suppose I want to call a function I'm going to call a function called greet however I don't want this actual form to submitted I actually want to return false here as well after a semicolon just to make clear that what I want this form to do is no longer to submit to the server but rather greet the user by calling some function called greet and then return false and return false per the documentation for how browsers and JavaScript works just means that the form never goes to the server so how can I go about uh using this here code now this greed function doesn't actually come with JavaScript but I can create it myself just as I could create functions in scratch in C and in Python in fact let me go up to the head of the page and keep things simple create a script tag in there above my title and then inside of that script tag let's go about defining a function in JavaScript it's a little different from C it's a little different from python but the end result is really the same in JavaScript you literally write the keyword function which means hey browser here comes a new function you then give that function a name I'll call it greet you then specify in parentheses whether or not that function takes any arguments and for now I'm going to say no none and then inside of curly braces I can implement the actual function well what do I want to actually greet the user with anything for now let's keep it simple let's actually use javascript's builtin function called alert and just say something like how about uh hello comma World close quote semicolon so the alert function unlike greet does come with the language here I'm going to go back to my browser reload the page type in David and now I'm going to click submit and notice what happens I now get a fairly ugly popup which is built into the browser itself but toward the middle of it it indeed says hello comma world now that has nothing to do with the name I typed in but we can fix that let me click okay go back to VSS code and before I say hello hello world let's do this let's create a variable called name and set it equal to the following function though it's admittedly a mouthful document Dot query selector quote unquote hashname do value semicolon there's a lot to unpack here so what's going on well recall that from python you can change certain things together and recall from C and python you can use the dot operator to go inside of structures or objects so that's a lot of what's going on here so it turns out there's a special Global variable when using JavaScript in a browser called document which refers to the document itself the Dom if you will and if you go into inside of the document it comes with a method AKA function called query selector capital S lowercase q and what query selector lets you use funny enough is the exact same syntax that CSS uses to select elements so you can select elements in the Page by way of their name or type like body or uh header or main or footer you can specify you can select Elements by way of classes or by way of their IDs or other techniques as well now recall earlier that I did give this HTML input a name an ID of quote unquote name and so if I want to refer to that ID recall from CSS that the you symbol is the hash symbol and then the name of that identifier so what's happening here is I'm saying go into the document use the query selector method look for the element whose unique ID is name and please grab its value that is whatever the human typed into that input and store it from right to left in a variable called name now all I have to do is include it in my alert to the user and just as in Python there's different ways to do this what I'm going to go ahead and do first is our old friend the plus operator after a space inside quotes and aen to or concatenate to hello comma space that person's name now notice too what I've deliberately done here is the following in the world of C double quotes are what you use for Strings and single quotes are what you use for characters in the world of python double quotes or or single quotes can be used for Strings otherwise known as stirs in JavaScript same thing is true double quotes or single quotes I will say conventionally probably most JavaScript programmers use single quotes for better for worse for Strings so that's the Habit I'm going to adopt here if only to be consistent with that let me now go back to my other browser page reload type in again my name David and notice now when I click submit ah now I get if I zoom in hello comma David so I've created a string there dynamically notice too once I dismiss this by clicking okay if I go back up to the URL bar notice that I have not actually submitted the form no question mark no key value pairs have appeared in the URL all of this is indeed happening client side now what more can I now do with this well this arguably is not the best design because as before with CSS I'm kind of co-mingling one language with another and I've kind of baked into my HTML some very explicit JavaScript code can I get rid of this well I can in fact do that in a couple of different ways let's go ahead and do this let me go ahead and get rid of the on submit stuff leaving therefore just the form and the two inputs inside of it that I had previously just to be uh to avoid a problem let me go below this now and add a script tag after getting rid of this one up here so I'm going to deliberately move everything to the bottom of the page for now just so that this works without creating a problem and what am I now going to do well turns out in JavaScript you can actually use JavaScript to query the Dom for specific elements and then listen to events that might happen with those elements you don't need an onsubmit attribute you can do all of this in code so how might I do this well let me do this let me create a JavaScript variable called form set it equal to document. query selector and then let me go ahead and select the one and only form in my page with quote unquote form I don't need a hash symbol I don't need a DOT because I'm selecting that element by its type it or its name which in this case is form all right what can I now do with this variable I can now use form Dot and a new method that we haven't yet seen it turns out in a web page once you have a variable or some other value that represents an element on the page you can call a method called add event listener and as the name implies that allows you after the page has been created to start listening for some special event on that element that event being drawn from a list like this one here including the submit event so how can I do this well this function takes one argument which is quote unquote the type of event that you want to listen for and I could listen for any number of things but the one that's relevant for a text box in this case or one that's relevant for a form with this text box is going to be quote unquote submit and then I can call a function that actually gets called whenever that form is submitted now greet again does not yet exist cuz I deleted it earlier but notice what's happening here which is not something we've done much before except a little bit in Python I am calling the form variables add event listener function AKA method I'm telling it to please add an event listener on the submit event and whenever that event is fired or triggered please call this function greet so I'm passing in the name of the function I am not using parentheses after the name of this function CU I don't want to call greet now I want to register greet as an event listener so to speak so it's called later by its name by the browser for me now how can I go about implementing greet I can do something as before so above this code so before I use it let's say function greet open paren close Pin then inside of this function let's do something similar to before let name equals document. query selector uh quote unquote uh hash name to get at the element with that unique name or with that unique ID value and below that let's go ahead and use our alert function saying again hello comma space plus to use the can catenation operator that particular name now there's one other thing I do want to do here because by default when forms are submitted they indeed get submitted to the server but that's behavior that we wanted to preempt the way we' prevented that last time was by adding return false inside of the event handler but there's actually a better way to do that it turns out that when adding an event listener using a function called greet you're actually going to be passed in an argument whether you want it or not that I can refer to as event or E for short but I'll be more explicit with event and it turns out that that argument that gets automatically passed in for you whenever that event is triggered allows you to call event.prevent default which is a more programmatic less hackish way than previously whereby I just returned false this is literally telling the browser when you at this event let me do my own thing by alerting the user hello so and so but prevent the default Behavior which we know now to be submitting the form itself so if I haven't made any mistakes here and I go back to my browser reload this page type in DAV ID again and click submit there we have it again the browser has shown me hello comma David but this is getting a little verbose honestly and in fact there's more JavaScript like ways to do things like this and let me propose to do this notice that I am one using a variable called name here and then only using it in one place that's totally fine and very reasonable but we know from C and python that's not strictly necessary so if you're more comfortable you can get rid of that whole variable like such and then just concatenate to hello comma space the return value of that same function now this fits on the screen nicely it's still pretty readable I would wager that this is reasonably welld designed but if this line of code got much longer we probably do want to go back to the version with an actual variable but we still want to prevent the default but what about this line here notice that I'm calling a function called greet even though even though I'm only doing that once so we can actually do something in JavaScript that's kind of neat that we can't quite do in the same way in C or in Python and at least not nearly as elegantly it turns out that if I'm only using the function greet once I don't really need to give this function a name in fact let me just kind of get rid of that there and get rid of this here and let me propose this this will look ugly at first but I'm going to grab this whole function and I'm going to literally copy and paste it as the second argument to add event listener I'm going to go ahead and clean it up a little bit to be a a little conventional here I'm going to move my curly brace to this line I'm going to get rid of this space but now this is actually pretty compact let me get rid of some of the blank lines and notice what I'm now doing I'm still using a variable called form to get the one form in the page I'm then telling that form to add an event listener for the submit event but because I want to tell it what function to call what you can do in JavaScript which you can actually do in Python 2 is you can pass in an anonymous function otherwise known as a Lambda function that still might take an argument but does not need a name why because if you're using it uh only one place why bother even giving it a name so the only thing I've done is I've deleted the name greet and simply calling it function and then passing in the specifying the argument it should take take but the next two lines are exactly the same and the only thing you have to be careful about is notice I've got the closed curly brace here and then the closed parenthesis the first of which closes this curly brace the second of which closes this first parenthesis and if you really want to tighten things up we don't really need the form variable let me get rid of that line of code and change that variable to be this one liner and so even though this is getting a little complicated visually for those unfamiliar with JavaScript this is fairly conventional syntax for doing a whole lot of things at once in this particular language without unnecessarily using variables and the like now let me demonstrate that still this here works if I reload the page and type in my name David and submit we do get that popup but let me do what I did previously which was to put this whole script tag inside of my head tag at the top of the page so I'll make room for it up there same exact code but now the script tag is above the form tag let me go back to my browser here click reload type in David and click submit and dang it we're somehow back to the broken version where still my name because I added that name attribute earlier is getting submitted to the server but I don't want this getting submitted to the server what is now going wrong well let's see if we can't diagnose this let me go back let me right click or control click and inspect and show you one final tab today which is that of the JavaScript console it turns out that in the console tab of your developer tools you can see error messages from languages like JavaScript and if you see anything read like this odds are I'm afraid you messed up or in this case I messed up and let's see if we can infer what's wrong cannot read properties of null reading ad event listener unfortunately just like clang just like python the error messages in the computer world are not always that clear especially for firsttime programmers but it at least seems to relate to line seven character 43 of hello. HT ml so let's go back to this line here ah line seven here is in place why might the form be null well notice that this Global variable here is referring to the whole document query selector is selecting some element from that document but if that element doesn't yet exist this function call here which I've highlighted will return null so this is kind of like saying null. event listener which just like our time from C kind of makes no sense you can't reference null you can't do anything with null so something has gone wrong now why is that well much like python much like C these languages are typically read top to bottom left to right and unfortunately if you define the form on line 16 but you try to access the form on line 7 it's just not going to work and so what you're seeing in javascript's console here is that it's null because it hasn't yet been read now previously I avoided that problem by moving the whole script tag to the bottom of the page just sort of avoiding the problem but there is another way to do it and you'll see in lots of libraries even though it's a bit of a mouthful let me go into hello.html here and add one more event listener which I'll type out myself document. add event listener and I'm going to listen for a very special event that you have to capitalize just right Dom content loaded quote unquote and then I'm going to go ahead and call another anonymous function that simply does all of this stuff together at the very bottom of what I just added I'm going to add another whoops I'm going to add the closed curly brace and another closed parenthesis to now close this curly brace up here that I just added and this parenthesis here that I just added so this two is more of a mouthful but what is Dom content loaded I mean it kind of does what it says when the Dom's content the entirety of it has been loaded then can you go ahead and execute these lines of code how do you know what lines of code to execute well here too I've defined an anonymous function in JavaScript which just allows me to contain inside of these curly braces the lines of code that I want to execute not now but eventually when the Dom's content has loaded so this is to say that even in these simplistic examples we've seen already JavaScript very heavily tends to use these Anonymous functions or really people who write JavaScript code tend to heavily use these Anonymous functions if only because it tightens things up and typically once you have some experience with programming in this or other languages you'll get more and more familiar with this even though at a glance for the first time this admittedly looks way more complicated than the problem it's actually trying to solve now that said just like with CSS we can get rid of all of this stuff let me highlight and cut that out let me delete all these new lines let me go into my script tag and let me pretend for the moment with a source attribute that I have a file called scripts.js and I could imagine now going into a file called scripts.js s pasting all of the code I just cut out of this file and then just like CSS allowing one file to refer to the other so in other words you can ultimately go ahead and Implement that same Paradigm of separating one language from another in JavaScript as well all right that was a lot but let's now Focus not so much on writing as much code like this but looking at some examples that I brought with me to demonstrate what more we can do with JavaScript in my terminal window let me go ahead and grab a fifth version of this file uh from my source eight directory that's going to look a little something like this in hello.html now which I wrote in advance this time we have some very similar code such that I'm listening for the Dom content to be loaded I am defining a variable in this case called input because I want to to find a textbooks on the page and I'm using another event listener and we've seen it on this here list not just submit but for instance key up when the human's finger comes up from the keyboard just after having typed something let's see for the moment before we dive in further to how this event is being used what this page now looks like if I close my developer tools and reload the page notice that the submit button is gone but I still have a text box and watch what happens when I start typing like the letter c or a or t or if I delete delete delete w o r l d delete delete delete delete and then there's a default value here as well so notice now it's sort of all automatically updating the Dom of the page as I'm typing in fact let me do this let me reopen my developer tools with inspect let me go to the elements Page by default and notice the P tag here at the moment in the browser's memory is the phrase hello comma whoever you are let me start to type my own name now instead of cat or world or anything else d and notice that not only am I seeing hello comma D on the screen notice that the Dom as represented by the elements tab has been dynamically updated as well if I type in now an a notice what happens in both places too the Dom gets updated again VI ID notice that and it's flashing to draw your eye to it I'm updating the Dom in memory meanwhile if I close this and open up the page Source recall that this is a static version in here there is no mention of David in the actual HTML that's coming from me the user so if we go back now to vs code let's look at how this works again on line 10 I created a variable called input that just uses query selector to find the input element the text box then I registered an invent listener on that text box for key up so this thing responds as soon as the finger comes off the key I want this function anonymously to be called whenever that key goes up I inside of this function Define a variable called name and I use the query selector to get another element on the page called P well where did that come from well let me open the page Source again and notice at the bottom of the page is not only the form which is super simple no submit button even but there's also an empty paragraph tag that I just put there as a default element to fill with my content let me go back to vs code here and notice that once I've got that I've got room for the person's name so what I'm going to do is this if the input has a value if the textbooks box has something typed in I'm going to do this I'm going to go inside of that name the so-called paragraph I'm going to change its inner HTML capitalization is important here lowercase inner all caps HTML and I'm going to change it to be hello comma something more on that in a moment else if there's no input value that is it's blank so this Boolean expression is false let's just change the inner HTML to be hello comma whoever you are that's the default value the last thing to tease apart then is what is going on here um this this is horrible to look at I will admit and is the ugliest of the syntax we've seen but just like in Python we have those format strings or F strings where you can put the F and then quote marks and then curly braces inside to interpolate the value of some variable JavaScript has something similar except it's much more ugly to look at specifically you use back ticks which vary in their location based on whether you have a US English keyboard or something else but a back tick at the beginning and a back tick at the end and inside of those back ticks if you want to interpolate the value of some variable you do use curly braces but you also use a dollar sign so it's like python syntax but worse but it's the exact same idea there's nothing really complicated beyond that other than remembering or Googling the Syntax for that technique so at the end of the day the result is that we get this sort of automatically updating page that updates one keystroke at a time based on what the user typed in this time based specifically on the key up event instead of submit well let's do one other let me go back to vs code here open up my terminal after closing hello.html let me copy from my source directory today something called background. HTML and now let's go back to my directory listing here reload and see background. HTML and click it this is very simple but let's see if we can infer how this works I've got three buttons and they're not rectangular as much as they are square but that's just because the labels are r g and B are so short but Watch What Happens R turns my background red green turns it green B turns it blue well how is that happening well let me go back to VSS code here and let me actually open now this file background. HTML and notice what's going on here inside of my body I've got three buttons Each of which has a unique ID red green or blue and Each of which has super short labels r g and B in all caps but then I have a script tag no first I'm creating a variable called body that's just grabbing the element from the page the type of which is body and there's only one of those and then notice this I've got three nearly identical lines of code starting here I'm going into the document using query selector to find whatever element has a unique ID of red per the hash symbol on that element I'm adding an event listener for the click event which is again on our list of events that you can listen for in JavaScript in addition to submit and in addition to key up here then I'm listening for click and I'm calling this Anonymous function when that R button is clicked and when it is I execute one line of code and here's where today kind of comes together in uh full circle I can inside of my web page using JavaScript modify the CSS of my page too I can go into that body element access its style uh attribute which which is a variable inside of the body and that exists because that's how browsers work and I can access the background color property inside of that body tag style it's like accessing its style attribute if you will and I can set it equal to quotee unquote red or I could do hash ff0000 but I kept it simple with quote unquote red the next three lines of code are the same thing but for green the last three lines are the same thing but for blue the only thing that's weird here is where did background color come from because it's lowercase b in capital c unfortunately this is maybe not the best design historically in J in CSS we saw text align we saw color we saw a couple of other properties as well unfortunately there is in CSS a a CSS property called background-color I just didn't happen to use it just yet unfortunately CSS uses background- color JavaScript necessarily uses background color with capital c why well in JavaScript you can do math like in most languages and unfortunately the dash is already used as a minus sign so unfortunately in JavaScript if you wrote this property as background-color this would be like trying to subtract color from background so background minus color which makes no sense so left hand and right hand weren't really communicating it seems so the solution was just to use camel case so to speak like a camel with a hump and capitalize the C but get rid of The Hyphen and there is a mapping therefore from CSS properties to JavaScript attributes in this way so that's all that's happening and in fact we can see this again in our inspector let me reload the page to go back to White let me again open up the developer tools let me click on the body of the page which currently has no attributes and at right there's no Styles being applied to it other than the defaults from the user agent stylesheet but Watch What Happens now under element. style and on the body tag itself when I click r a style attribute will suddenly appear programmatically on the body tag with a value corresponding to background-color colon red notice over at right here too we see a summary in Chrome's developer tools of exactly that if I click on G if I click on B I can see exactly the same thing happening for each of those colors so here now we have the ability with JavaScript not only to alter the Dom of the page the contents of it what the user is seeing but also it would seem the CSS thereof what more can we do let's look at one other example that sort of evokes a tag from yester Year let me go into my source directory and grab an example called blink. HTML and show you in this code here in if I hide my terminal window we've got a function in this file inside of my script tag called blank which apparently toggles visibility of greeting but what does that mean well let's try to infer here there's a variable called body which is set equal to the return value of query selector and we're checking this question if the visibility of that element is hidden then change the visibility to visible else change the visibility to Hidden now this too is one of these left hand and right hand we're not intercommunicating I have no idea why the opposite of visible Is Not Invisible but the opposite of visible in CSS is hidden For Better or For Worse so what's really happening here is we have a conditional an if else construct that's saying if the visibility is hidden make it visible but if it's visible make it hidden back or forth how is this being used well here is another function that comes with JavaScript there's a global variable called window which refers to the browser window itself that comes with a method called set interval capital I that function takes two arguments the first of which is the name of a function to call notice again not using parentheses because I don't want to call blink on line 22 I want to pass the name of that blink function to this set interval function and 500 is the second argument that refers to a number of milliseconds and what set interval does as you might imagine is it will now call the blank function every 500 milliseconds or half a second so the effect if I go back to my browser tab close my developer tools and click now on blink. HTML is a resurrection of a tag that actually existed when I was growing up whereby you could literally do Open Bracket blink close bracket and you could make your web Page's text blink like this even worse there was a tag called Marquee that would scroll your text across the screen very hideously so and in fact among all of the features of HTML among the few that have been removed over the years are exactly those two tags but with JavaScript we can bring them back now in this way the point of which really is to demonstrate again how much control we now have over Javas over our Dom and our web pages thanks to JavaScript let's do one final example here let's go back to vs code here open my terminal and let me copy one last file from today's distribution code called autocom complete. HTML and let's go ahead and open up autocomplete HTML here in VSS code well what's going on here well it turns out that there are a there's a body of this page which just has a text input that's of type text with a placeholder of query below that there's this empty unordered list with nothing initially much like there was an empty paragraph tag previously so I could put hello so and so then there's this file here using a script tag referencing large. JS so I actually need that file too that's in today's distribution too so let me grab large. JS which if we open that up might look somewhat familiar it is a JavaScript version of the dictionary from problem set five wherein you implemented the fastest spell checker that you could so there's 100,000 plus words in this file but notice they're structured as a JavaScript variable called words all caps to make clear that I mean for it to be Global it's using square brackets as on line one because that it turns out much like python is how JavaScript indicates an array but in JavaScript they're again called arrays instead of lists and then I just have this comma separated list of strings using double quotes but I could have used single quotes for all 100,000 plus of those words so by including this file this means that my script down here has access to that word variable what am I doing well I create a variable called input and set it equal to query selector return value just so I can get a variable pointing to that text box then I'm again as before adding an event listener listening for key up so the finger coming up and whenever that happens I call this Anonymous function I first in that function set an HTML variable to quote unquote so the empty string nothing because what I want to do is build up a list of words that match whatever the human has typed in and you'll perhaps see where this is going in a moment if the user then has typed something in there's a value in that textbook do this iterate over that array of words so for each word of words here too is a JavaScript specific feature but it's similar in spirit to python sort of similar in spirit to C but the preposition I'm using is indeed of and I'm saying for each of the words of this words array it's a little weird the English but this is how you can iterate over every element in a JavaScript array if the current word that we're iterating over starts with capital W so this is a function that comes with strings in JavaScript that input value so in other words if the word we're looking at in the dictionary um starts with the same letters that the human has typed into the text box let's do this let's concatenate onto the HTML variable which is just an empty string initially the following HTML now this too looks weird but remember that the back ticks mean that you can interpolate variables inside of curly braces so so this means add to that HTML variable another Li tag and another close Li tag inside of which though is the word that has matched the first few characters and do that again and again and again and plus equals here just means concatenate concatenate concatenate so we're essentially building up in JavaScript more and more and more and more HTML dynamically based on the humans key strokes and the very last thing I do is this I ask the document to query select the UL element which previously was an empty unordered list but change its inner HTML to be equal to the LI tags that I've been creating creating creating in one big variable so if I go back over to vs code here and if I go back to my browser tab here and click back and I now go into autocom complete. HTML as the name suggests this is the essence of how autocomplete exists in Google in bing and in applications more generally on the web and in some mobile devices if I type in C I see now an unordered list of all of the words that start with C in this dictionary if I type A nothing seems to happen but that's because the list is so long if I type c a now notice I get every word that starts with C A if I type in s now I get just four words including ketchup at the end that starts with c a TS meanwhile if I open up the web pages Source notice none of those words are in there they're in the large. JS file but not in this page if I instead close that and open up the inspector again and I go to the elements Tab and after uh having typed in cats notice there are indeed four Li elements there but watch what happens as soon as I delete mention of cats here all four of those L disappear and now I'm back to the UL alone so this is to say with HTML we can structure our web pages with CSS we can stylize our web pages and with JavaScript we can dynamically update and modify our web pages and Via JavaScript can we therefore Implement applications like Gmail and Google itself and cs50. and so much more because it makes what's otherwise a very static experience in the browser suddenly Dynamic and indeed what JavaScript can even do is make more HTTP calls to the server to get more and more data more and more tiles from a map more and more emails from the server but today we've seen just the fundamentals through your coming problem sets and perhaps final project will you have an opportunity to apply all three of these Technologies together to build the web applications and the mobile applications that you and I already use every day that's it for cs50 we will see you next time [Music]