1 00:00:00,000 --> 00:01:17,540 [MUSIC PLAYING] 2 00:01:17,540 --> 00:01:18,980 SPEAKER 1: All right. 3 00:01:18,980 --> 00:01:23,030 This is CS50, and this is already week 8. 4 00:01:23,030 --> 00:01:25,513 And if we think back to the past several weeks now, 5 00:01:25,513 --> 00:01:28,430 recall that things started pretty interestingly, pretty interactively, 6 00:01:28,430 --> 00:01:30,857 in like week 0, when we were using Scratch, 7 00:01:30,857 --> 00:01:33,440 because with Scratch we had a GUI, a graphical user interface. 8 00:01:33,440 --> 00:01:36,980 So even as we explored variables and loops and conditionals and all of that, 9 00:01:36,980 --> 00:01:39,892 you had kind of a fun environment in which to express those ideas. 10 00:01:39,892 --> 00:01:41,600 And then in week 1, we sort of took a lot 11 00:01:41,600 --> 00:01:45,500 of that away, when we introduced C, and a terminal window, and a command line, 12 00:01:45,500 --> 00:01:50,180 because now, all of your programs became very textual, very keyboard-based, 13 00:01:50,180 --> 00:01:53,240 and gone was the mouse, the animations, the menus, and so forth. 14 00:01:53,240 --> 00:01:55,430 And so now, fast forward to week 8, we're 15 00:01:55,430 --> 00:01:58,760 going to bring those kinds of user interface, UI, elements back, 16 00:01:58,760 --> 00:02:00,320 in the form of web programming. 17 00:02:00,320 --> 00:02:02,660 And this goes beyond just laying out websites. 18 00:02:02,660 --> 00:02:06,878 This will, to this week and next week, combine elements of the back-end server 19 00:02:06,878 --> 00:02:09,170 stuff that we've been doing for the past several weeks, 20 00:02:09,170 --> 00:02:11,780 using Python, using SQL, and now introducing 21 00:02:11,780 --> 00:02:14,780 a couple of other languages, on the so-called client side, 22 00:02:14,780 --> 00:02:17,270 on your own Mac, your own PC, your own phone, that's going 23 00:02:17,270 --> 00:02:19,280 to talk to those back-end services. 24 00:02:19,280 --> 00:02:22,580 So indeed, at this end of CS50, does everything rather 25 00:02:22,580 --> 00:02:25,940 come together into a user interface that's just super familiar. 26 00:02:25,940 --> 00:02:28,760 All of us are on our phones, desktops, laptops, every day. 27 00:02:28,760 --> 00:02:32,060 And increasingly, even the mobile apps that you all are using 28 00:02:32,060 --> 00:02:36,320 are implemented, not necessarily in languages like Swift or Java, 29 00:02:36,320 --> 00:02:38,450 if you're familiar with those, but with languages 30 00:02:38,450 --> 00:02:42,360 called HTML, CSS, and JavaScript, which we'll focus on here today. 31 00:02:42,360 --> 00:02:47,180 But before we do that, let's provide a foundation on which these apps can run, 32 00:02:47,180 --> 00:02:50,630 because indeed, we'll start to look underneath the hood of how the internet 33 00:02:50,630 --> 00:02:54,913 itself works, albeit quickly, so that we have kind of a mental model for where 34 00:02:54,913 --> 00:02:57,830 all of this code is running, how you can troubleshoot issues, and how, 35 00:02:57,830 --> 00:03:00,560 really, ultimately, after CS50, you can learn, by just 36 00:03:00,560 --> 00:03:02,965 poking around other actual websites. 37 00:03:02,965 --> 00:03:04,340 So the internet, we're all on it. 38 00:03:04,340 --> 00:03:08,910 Literally, right now, what is it, in your own words? 39 00:03:08,910 --> 00:03:11,480 What is the internet? 40 00:03:11,480 --> 00:03:14,180 It's this utility nowadays, that we all rather take for granted. 41 00:03:14,180 --> 00:03:15,263 How would you describe it? 42 00:03:15,263 --> 00:03:16,463 AUDIENCE: Big storage. 43 00:03:16,463 --> 00:03:18,380 SPEAKER 1: OK, big storage, and indeed, that's 44 00:03:18,380 --> 00:03:22,260 how the cloud is described, which is kind of an abstraction if you will, 45 00:03:22,260 --> 00:03:25,580 for a whole lot of wires and cables and hardware. 46 00:03:25,580 --> 00:03:28,750 And the internet, other formulations of the term, how else? 47 00:03:28,750 --> 00:03:30,500 AUDIENCE: Bunch of data that we can reach. 48 00:03:30,500 --> 00:03:32,417 SPEAKER 1: OK, a bunch of data that we can all 49 00:03:32,417 --> 00:03:36,050 reach, by way of being interconnected somehow with wires or wirelessly. 50 00:03:36,050 --> 00:03:38,810 And so really, the internet, too, is a hardware thing. 51 00:03:38,810 --> 00:03:42,620 There's a whole lot of servers out there, that are somehow interconnected, 52 00:03:42,620 --> 00:03:45,140 via physical cables, via internet service providers, 53 00:03:45,140 --> 00:03:47,190 via wireless connectivity, and the like. 54 00:03:47,190 --> 00:03:49,970 And once you start to have networks of networks of networks, 55 00:03:49,970 --> 00:03:51,170 do you get the internet. 56 00:03:51,170 --> 00:03:54,140 Indeed, Harvard has its own network and Yale has its own network, 57 00:03:54,140 --> 00:03:56,495 and your own home probably has its own network. 58 00:03:56,495 --> 00:03:58,370 But once you start connecting those networks, 59 00:03:58,370 --> 00:04:02,730 do you get the interconnected network that is the internet as we now know it? 60 00:04:02,730 --> 00:04:05,360 So there's this whole alphabet soup that goes 61 00:04:05,360 --> 00:04:07,610 with the internet, some of whose acronyms and terms 62 00:04:07,610 --> 00:04:08,540 you've probably seen before. 63 00:04:08,540 --> 00:04:10,340 But let's at least peel back some of those layers 64 00:04:10,340 --> 00:04:12,560 and consider what some of the building blocks are. 65 00:04:12,560 --> 00:04:15,560 So here's a picture of the internet before it was known as the internet, 66 00:04:15,560 --> 00:04:17,990 back in 1969, when it was something called 67 00:04:17,990 --> 00:04:21,290 ARPANET, from the Advanced Research Projects Agency. 68 00:04:21,290 --> 00:04:24,680 And the intent, originally, was just to Interconnect a few universities here 69 00:04:24,680 --> 00:04:29,510 in Utah and California, literally servers, or computers, in each 70 00:04:29,510 --> 00:04:31,700 of those areas, somehow interconnected with wires, 71 00:04:31,700 --> 00:04:33,425 so that people could start to share data. 72 00:04:33,425 --> 00:04:36,990 A year later, it expanded to include MIT and Harvard and others. 73 00:04:36,990 --> 00:04:40,010 And now fast forward to today, you have a huge number 74 00:04:40,010 --> 00:04:43,130 of systems around the world that are on this same network. 75 00:04:43,130 --> 00:04:45,650 And, in fact, if I just pull up a web page 76 00:04:45,650 --> 00:04:48,110 here, that's sort of constantly changing, 77 00:04:48,110 --> 00:04:52,610 a visualization of the internet as it might now be today, this here, 78 00:04:52,610 --> 00:04:55,880 in the abstract, all of these lines and interconnections 79 00:04:55,880 --> 00:04:59,817 represent just how interconnected the world is today. 80 00:04:59,817 --> 00:05:02,900 And it just means that there's all the more servers, all the more cabling, 81 00:05:02,900 --> 00:05:06,630 all of the more hardware giving us this underlying infrastructure. 82 00:05:06,630 --> 00:05:11,210 But if we focus, really, on just these nodes, these individual dots, 83 00:05:11,210 --> 00:05:15,680 whether back in 1970, or now in 2021, each of these dots you can think of as, 84 00:05:15,680 --> 00:05:19,193 yes, a server, but a certain type of server, namely known as a router. 85 00:05:19,193 --> 00:05:21,110 And a router, as the name implies, just routes 86 00:05:21,110 --> 00:05:25,110 data left to right, top to bottom, from one point to another. 87 00:05:25,110 --> 00:05:28,940 And so there's all these servers here on campus at Harvard, on Yale's campus, 88 00:05:28,940 --> 00:05:32,460 in Comcast's network, Verizon's network, your own home network, 89 00:05:32,460 --> 00:05:35,269 you have your own routers out there, whose purpose in life 90 00:05:35,269 --> 00:05:38,085 is to take in data and then decide, should I send it this way, 91 00:05:38,085 --> 00:05:40,460 or this way, or this way, so to speak, assuming there are 92 00:05:40,460 --> 00:05:42,320 multiple options with multiple cables. 93 00:05:42,320 --> 00:05:45,500 You, in your home, probably have just one cable coming in or going out. 94 00:05:45,500 --> 00:05:49,970 But certainly, if you're a place like Harvard or Yale or Comcast or the like, 95 00:05:49,970 --> 00:05:53,030 there's probably a whole bunch of interconnections 96 00:05:53,030 --> 00:05:55,700 that the data can then travel across ultimately. 97 00:05:55,700 --> 00:05:58,790 So how do we get data among these routers? 98 00:05:58,790 --> 00:06:01,460 For instance, if you want to send an email to someone 99 00:06:01,460 --> 00:06:04,310 at Stanford, in California, from here, on the East Coast, 100 00:06:04,310 --> 00:06:08,580 or if you want to visit www.stanford.edu, how does your laptop, 101 00:06:08,580 --> 00:06:12,365 your phone, your desktop, actually get data from point A to point B? 102 00:06:12,365 --> 00:06:15,920 Well, essentially, your laptop or phone knows 103 00:06:15,920 --> 00:06:19,950 when it boots up at the beginning of the day, what the local router is, what 104 00:06:19,950 --> 00:06:21,490 the address of that local router is. 105 00:06:21,490 --> 00:06:24,300 So if you want to send an email from my laptop over here, 106 00:06:24,300 --> 00:06:27,510 my laptop is essentially going to hand it to the nearest Harvard router. 107 00:06:27,510 --> 00:06:29,520 And then, from there, I don't know, I don't care 108 00:06:29,520 --> 00:06:31,062 how it gets the rest of the distance. 109 00:06:31,062 --> 00:06:33,630 But hopefully, within some small number of steps later, 110 00:06:33,630 --> 00:06:36,270 Harvard's router is going to send it to maybe Boston's router 111 00:06:36,270 --> 00:06:38,395 is going to send it to California's router is going 112 00:06:38,395 --> 00:06:41,580 to send it to Stanford's router, until finally it reaches Stanford's email 113 00:06:41,580 --> 00:06:42,180 server. 114 00:06:42,180 --> 00:06:45,630 And we can depict this, actually, how about a bit playfully. 115 00:06:45,630 --> 00:06:47,880 Thankfully, the course's staff kindly volunteered 116 00:06:47,880 --> 00:06:52,600 to create a visualization for this, using a familiar technology. 117 00:06:52,600 --> 00:06:56,130 So here we have some of our TFs and TAs and CAs present and past. 118 00:06:56,130 --> 00:06:59,280 Let me go ahead and full screen this window here. 119 00:06:59,280 --> 00:07:02,200 Give me just a moment to pull it up on my screen here. 120 00:07:02,200 --> 00:07:06,990 And we'll consider what happens if we want to send a packet of information 121 00:07:06,990 --> 00:07:11,310 from one person or router, namely Phyllis in this case, 122 00:07:11,310 --> 00:07:14,370 in the bottom right hand corner, up to Brian, in this case, 123 00:07:14,370 --> 00:07:15,640 in the top left hand corner. 124 00:07:15,640 --> 00:07:18,270 So each of the staff members here represents exactly one 125 00:07:18,270 --> 00:07:20,860 of these routers on the internet. 126 00:07:20,860 --> 00:07:25,360 [MUSIC PLAYING] 127 00:07:48,730 --> 00:07:50,220 [APPLAUSE] 128 00:07:50,220 --> 00:07:51,420 The applause is appreciated. 129 00:07:51,420 --> 00:07:53,700 It actually took us a significant number of attempts 130 00:07:53,700 --> 00:07:55,290 to get that ultimately right. 131 00:07:55,290 --> 00:07:58,440 So when, what was it the staff were all passing here? 132 00:07:58,440 --> 00:08:01,523 Here we have just, physically, what it was the staff were passing around. 133 00:08:01,523 --> 00:08:03,690 So Phyllis started with an envelope, inside of which 134 00:08:03,690 --> 00:08:05,760 was that email, presumably, on the East Coast, 135 00:08:05,760 --> 00:08:08,945 and she wanted to send it to Brian on the West Coast, top left hand corner. 136 00:08:08,945 --> 00:08:11,820 And so she had all of these different options, different connections, 137 00:08:11,820 --> 00:08:14,920 between her and point B, namely Brian. 138 00:08:14,920 --> 00:08:18,480 She could go up, down, in her case, and then each of those subsequent routers 139 00:08:18,480 --> 00:08:21,270 could go up, down, left, or right, until it finally reaches Brian. 140 00:08:21,270 --> 00:08:23,250 And long story short, there's algorithms that 141 00:08:23,250 --> 00:08:26,620 figure out how you decide to send a packet up, down, 142 00:08:26,620 --> 00:08:28,470 left, or right, so to speak. 143 00:08:28,470 --> 00:08:33,525 But they do so by taking an input, and in the form of input is this envelope. 144 00:08:33,525 --> 00:08:36,150 And there's at least a couple of things on the outside of this, 145 00:08:36,150 --> 00:08:39,090 because all of these routers and, in turn, all of our Macs and PCs 146 00:08:39,090 --> 00:08:41,820 and phones these days, speak something called 147 00:08:41,820 --> 00:08:44,940 TCP/IP, a set of acronyms you've probably 148 00:08:44,940 --> 00:08:47,820 seen somewhere on your phone, your Mac or PC, 149 00:08:47,820 --> 00:08:52,230 in print somewhere, which refers to two protocols, two conventions, 150 00:08:52,230 --> 00:08:55,003 that computers use to inter-communicate these days. 151 00:08:55,003 --> 00:08:55,920 Now what's a protocol? 152 00:08:55,920 --> 00:08:58,440 A protocol is like a set of rules, that you behave. 153 00:08:58,440 --> 00:09:00,900 In healthier times, I might extend my hand and someone 154 00:09:00,900 --> 00:09:04,440 like Carter might extend his hand, thereby interacting with me, based 155 00:09:04,440 --> 00:09:07,680 on a human protocol of like literally physically shaking hands. 156 00:09:07,680 --> 00:09:10,890 Nowadays, we have mask protocols, whereby what you need to do 157 00:09:10,890 --> 00:09:12,400 is wear a mask indoors. 158 00:09:12,400 --> 00:09:15,450 But that, too, is just a set of rules that we all follow and adhere to, 159 00:09:15,450 --> 00:09:17,760 that's somewhere standardized and documented. 160 00:09:17,760 --> 00:09:20,520 So computers use protocols all the time to govern 161 00:09:20,520 --> 00:09:23,430 how they are sending information and receiving information. 162 00:09:23,430 --> 00:09:28,290 And TCP and IP are two such protocols that standardize this as follows. 163 00:09:28,290 --> 00:09:31,020 What TCP/IP tells someone like Phyllis to do, 164 00:09:31,020 --> 00:09:34,960 if she wants to send an email to Brian, is put the email in a virtual envelope, 165 00:09:34,960 --> 00:09:35,710 so to speak. 166 00:09:35,710 --> 00:09:40,890 But on the outside of that virtual envelope, put Brian's unique address. 167 00:09:40,890 --> 00:09:44,940 And I'll describe this as destination on the middle of the envelope, 168 00:09:44,940 --> 00:09:47,820 just like in our human world, you would write the destination 169 00:09:47,820 --> 00:09:49,140 address on the envelope. 170 00:09:49,140 --> 00:09:53,010 And then she's going to put her own source address in the top left hand 171 00:09:53,010 --> 00:09:55,559 corner, just like you, the sender, would put your own source 172 00:09:55,559 --> 00:09:56,980 address in the human world. 173 00:09:56,980 --> 00:10:00,240 But, instead of these addresses being like something Kirkland Street, 174 00:10:00,240 --> 00:10:04,950 Cambridge, Massachusetts 02138, USA, you probably know that computers 175 00:10:04,950 --> 00:10:09,450 on the internet have unique addresses of their own, known as IP addresses. 176 00:10:09,450 --> 00:10:12,000 And an IP address is just a numeric identifier 177 00:10:12,000 --> 00:10:15,270 on the internet, that allows computers, like Phyllis and Brian, 178 00:10:15,270 --> 00:10:18,240 to address these envelopes to and from each other. 179 00:10:18,240 --> 00:10:20,550 And you've probably seen the format at some point. 180 00:10:20,550 --> 00:10:24,120 Typically, the format of IP addresses is something dot something 181 00:10:24,120 --> 00:10:26,070 dot something dot something. 182 00:10:26,070 --> 00:10:28,680 Each of those somethings, represented here with a hash symbol, 183 00:10:28,680 --> 00:10:33,660 is a number from 0 through 255. 184 00:10:33,660 --> 00:10:36,720 And, based on that little hint, if each of these hashes 185 00:10:36,720 --> 00:10:40,440 represents a number from 0 to 255, each of those hashes 186 00:10:40,440 --> 00:10:43,350 is represented with how many bytes or bits? 187 00:10:43,350 --> 00:10:47,250 Eight bits or one byte, which is to say, we can extrapolate from there, 188 00:10:47,250 --> 00:10:50,880 an IP address must use 32 bits or 4 bytes, 189 00:10:50,880 --> 00:10:54,450 if we rewind now to some of the primitives we looked at in week 0. 190 00:10:54,450 --> 00:10:56,800 And what that means is, at least at a glance, 191 00:10:56,800 --> 00:11:00,962 it looks like we have 4 billion some odd IP addresses available to us. 192 00:11:00,962 --> 00:11:02,670 Now, unfortunately, there's a huge number 193 00:11:02,670 --> 00:11:05,580 of humans in the world these days, all of whom have, many of whom 194 00:11:05,580 --> 00:11:09,030 have multiple devices, certainly in places like this, where you have 195 00:11:09,030 --> 00:11:12,783 a laptop, and a phone, and you have other internet of things-type devices, 196 00:11:12,783 --> 00:11:14,200 all of which need to be addressed. 197 00:11:14,200 --> 00:11:16,140 So there's another type of IP address that's 198 00:11:16,140 --> 00:11:17,820 starting to be used more commonly. 199 00:11:17,820 --> 00:11:20,220 This is version 4 of IP. 200 00:11:20,220 --> 00:11:23,040 There's also version 6 which, instead of 32 bits, 201 00:11:23,040 --> 00:11:27,360 uses 128 bits, which gives us a crazy number of possible addresses 202 00:11:27,360 --> 00:11:31,680 for computers, so we can at least handle all of the additional devices we now 203 00:11:31,680 --> 00:11:32,620 have today. 204 00:11:32,620 --> 00:11:35,580 So this is to say, what ultimately is going on this envelope 205 00:11:35,580 --> 00:11:39,750 is the destination address, that is Brian's IP address, and the source 206 00:11:39,750 --> 00:11:43,830 address, that is Phyllis's IP address, so that this packet can go from point A 207 00:11:43,830 --> 00:11:46,860 to point B, and if need be, back, by just flipping 208 00:11:46,860 --> 00:11:48,450 the source and the destination. 209 00:11:48,450 --> 00:11:53,460 But on the internet, you presumably know that there's not just email servers. 210 00:11:53,460 --> 00:11:57,000 There's web servers, there's chat servers, video servers, game servers. 211 00:11:57,000 --> 00:12:00,000 Like there's all of these different functions on the internet nowadays. 212 00:12:00,000 --> 00:12:02,580 And so, when Brian receives that envelope, 213 00:12:02,580 --> 00:12:09,240 how does he know it's an email, versus a web page, versus a Skype call, 214 00:12:09,240 --> 00:12:11,430 versus something else altogether. 215 00:12:11,430 --> 00:12:14,580 Well, it turns out that we can look at the other part 216 00:12:14,580 --> 00:12:18,090 of this acronym, the TCP in TCP/IP. 217 00:12:18,090 --> 00:12:20,980 And what TCP allows us to do, for instance, 218 00:12:20,980 --> 00:12:22,630 is specify a couple of things. 219 00:12:22,630 --> 00:12:27,600 One, the type of service whose data is in this envelope, that is, 220 00:12:27,600 --> 00:12:30,690 it does this with a numeric identifier. 221 00:12:30,690 --> 00:12:35,460 And I'm going to go ahead and write down a colon, and the word port, P-O-R-T. 222 00:12:35,460 --> 00:12:39,030 And I'm going to write that in the source address, too, colon and port. 223 00:12:39,030 --> 00:12:41,190 So technically, now, what's on this envelope 224 00:12:41,190 --> 00:12:43,920 is not just the addresses, but also a unique number 225 00:12:43,920 --> 00:12:48,990 that represents what kind of service is being sent from point A to point B, 226 00:12:48,990 --> 00:12:52,600 whether it's email, or web traffic, or Skype, or something else. 227 00:12:52,600 --> 00:12:57,150 These numbers are standardized, and here are just two of the most common ones, 228 00:12:57,150 --> 00:13:00,000 not even in the context of email, but in the context of the web. 229 00:13:00,000 --> 00:13:02,940 Port 80 is typically used whenever an envelope contains 230 00:13:02,940 --> 00:13:07,170 a web page, or a request therefor, or the number 443, 231 00:13:07,170 --> 00:13:11,010 when that request is actually encrypted, using that thing you probably 232 00:13:11,010 --> 00:13:15,000 know, in URLs, known as HTTPS, where the S literally means secure. 233 00:13:15,000 --> 00:13:16,890 More on what the HTTP means later. 234 00:13:16,890 --> 00:13:20,763 If it's email, the number might be 25 or 465, or 587. 235 00:13:20,763 --> 00:13:23,680 These are the kinds of things you Google if you ultimately care about. 236 00:13:23,680 --> 00:13:28,080 But if you've ever had to configure, like, Outlook or even Gmail 237 00:13:28,080 --> 00:13:30,480 to talk to another account, you might very well 238 00:13:30,480 --> 00:13:34,710 have seen these numbers, by typing in something like SMTP.Gmail.com 239 00:13:34,710 --> 00:13:37,700 and then a number, which is only to say these numbers are omnipresent. 240 00:13:37,700 --> 00:13:39,450 But they're typically not things you and I 241 00:13:39,450 --> 00:13:42,390 have to care about, because servers and computers nowadays 242 00:13:42,390 --> 00:13:44,620 automate much of this process. 243 00:13:44,620 --> 00:13:49,020 But that's all it takes, ultimately, for Phyllis to get this message to Brian. 244 00:13:49,020 --> 00:13:50,850 But what if it's a really big message? 245 00:13:50,850 --> 00:13:54,160 If it's a short email, It might fit perfectly in one single packet, 246 00:13:54,160 --> 00:13:54,750 so to speak. 247 00:13:54,750 --> 00:13:58,050 But suppose that Phyllis wants to send Brian a picture of a cat, 248 00:13:58,050 --> 00:14:00,390 like this, or worse, a video of a cat. 249 00:14:00,390 --> 00:14:04,620 It would be kind of inequitable if no one else could do anything 250 00:14:04,620 --> 00:14:06,870 on the internet, just because Phyllis wants 251 00:14:06,870 --> 00:14:10,410 to send Brian a really big picture, a really big video of a cat. 252 00:14:10,410 --> 00:14:14,160 It would be nice if we could kind of time-share the interconnections, 253 00:14:14,160 --> 00:14:17,338 across these routers, so that we can give a little bit of time 254 00:14:17,338 --> 00:14:19,380 to Phyllis, a little bit of time to someone else, 255 00:14:19,380 --> 00:14:22,588 a little bit of time to someone else, so that eventually, Phyllis' entire cat 256 00:14:22,588 --> 00:14:23,700 gets through the internet. 257 00:14:23,700 --> 00:14:29,280 But in terms of fairness, she doesn't monopolize the bandwidth 258 00:14:29,280 --> 00:14:31,650 of the network in question. 259 00:14:31,650 --> 00:14:35,790 And this, then, allows us to do one other feature of TCP/IP, 260 00:14:35,790 --> 00:14:38,880 which is fragmentation, where we can temporarily, 261 00:14:38,880 --> 00:14:41,760 and Phyllis's computer would do this automatically, fragment 262 00:14:41,760 --> 00:14:45,390 the big packet in question, or the big file in question, 263 00:14:45,390 --> 00:14:50,370 and then use, not just a single envelope, but maybe a second, a third, 264 00:14:50,370 --> 00:14:52,178 and a fourth, or more. 265 00:14:52,178 --> 00:14:53,970 If we do that, though, we're probably going 266 00:14:53,970 --> 00:14:57,840 to need one other piece of information, just logically, on these envelopes. 267 00:14:57,840 --> 00:15:01,140 Like, if you were implementing this, chopping up this picture of a cat 268 00:15:01,140 --> 00:15:04,110 into four parts, like, intuitively, what might you 269 00:15:04,110 --> 00:15:07,720 want to put virtually on the outside of this envelope now? 270 00:15:07,720 --> 00:15:08,220 Yeah. 271 00:15:08,220 --> 00:15:09,067 AUDIENCE: The order. 272 00:15:09,067 --> 00:15:10,650 SPEAKER 1: The order of them, somehow. 273 00:15:10,650 --> 00:15:14,280 So probably something like part one of four, part two of four, 274 00:15:14,280 --> 00:15:15,970 part three of four, and so forth. 275 00:15:15,970 --> 00:15:18,600 So I'm going to write one more thing in like the memo line of the envelope 276 00:15:18,600 --> 00:15:19,110 here. 277 00:15:19,110 --> 00:15:21,360 I put some kind of sequence number, that's 278 00:15:21,360 --> 00:15:24,000 just a little bit of a clue to Brian, to know 279 00:15:24,000 --> 00:15:25,980 in what order to reassemble these things. 280 00:15:25,980 --> 00:15:29,010 And even more powerfully than that, this actually 281 00:15:29,010 --> 00:15:33,060 gives us this simple primitive of just using INTs on these envelopes, 282 00:15:33,060 --> 00:15:34,260 in these packets. 283 00:15:34,260 --> 00:15:39,690 If Brian receives envelopes like these, with numbers like these in the memo 284 00:15:39,690 --> 00:15:43,500 field, what other feature does TCP apparently 285 00:15:43,500 --> 00:15:46,350 enable Brian and Phyllis to implement? 286 00:15:46,350 --> 00:15:48,090 This is a bit subtle. 287 00:15:48,090 --> 00:15:50,420 But it's not just the ordering of the packets. 288 00:15:50,420 --> 00:15:54,510 What else might be useful about putting numbers on these things, 289 00:15:54,510 --> 00:15:56,797 might you think? 290 00:15:56,797 --> 00:15:57,880 What might be useful here? 291 00:15:57,880 --> 00:15:58,996 Yeah, in back. 292 00:15:58,996 --> 00:16:00,740 AUDIENCE: How about if you like missed. 293 00:16:00,740 --> 00:16:02,660 SPEAKER 1: If you missed something that was intended to be sent, 294 00:16:02,660 --> 00:16:03,660 if I heard that correct. 295 00:16:03,660 --> 00:16:07,918 So short answer, exactly, yes, TCP, because of this simple little integer 296 00:16:07,918 --> 00:16:10,460 that we're including, can quote unquote "guarantee" delivery. 297 00:16:10,460 --> 00:16:10,970 Why? 298 00:16:10,970 --> 00:16:14,150 Because if Brian receives one out of four, two out of four, 299 00:16:14,150 --> 00:16:16,370 four out of four, but not three out of four, 300 00:16:16,370 --> 00:16:20,210 he now knows, predictably, that he needs to ask Phyllis, somehow, 301 00:16:20,210 --> 00:16:21,720 to resend that packet. 302 00:16:21,720 --> 00:16:25,610 And so this is why pretty much always, if you receive an email, 303 00:16:25,610 --> 00:16:28,220 you either receive the whole thing, or nothing at all. 304 00:16:28,220 --> 00:16:31,550 Like sentences and words and paragraphs should never really 305 00:16:31,550 --> 00:16:33,170 be missing from an email. 306 00:16:33,170 --> 00:16:35,287 Or if you download a photograph on the web, 307 00:16:35,287 --> 00:16:37,370 it shouldn't just have a blank hole in the middle, 308 00:16:37,370 --> 00:16:40,460 just because that packet of information happened to be lost. 309 00:16:40,460 --> 00:16:44,660 TCP, if it is the protocol being used to transmit data from point A to point B, 310 00:16:44,660 --> 00:16:48,600 ensures that it either all gets there, or ultimately, none of it at all. 311 00:16:48,600 --> 00:16:51,920 So this is an important property, but, just as a teaser there's 312 00:16:51,920 --> 00:16:53,120 other protocols out there. 313 00:16:53,120 --> 00:16:56,540 There's something called UDP, which is an alternative to TCP, 314 00:16:56,540 --> 00:16:58,280 that doesn't guarantee delivery. 315 00:16:58,280 --> 00:17:01,880 And just as a taste of why you might ever not want to guarantee delivery, 316 00:17:01,880 --> 00:17:07,175 maybe you're watching like a streaming video, like a sports event online. 317 00:17:07,175 --> 00:17:09,050 You probably don't necessarily want the thing 318 00:17:09,050 --> 00:17:12,285 to buffer and buffer and buffer, just because you have a slow connection, 319 00:17:12,285 --> 00:17:14,160 because you're going to start to miss things. 320 00:17:14,160 --> 00:17:16,280 And then you're going to be the only one in the world watching 321 00:17:16,280 --> 00:17:19,658 the game that ended 20 minutes ago, when everyone else is sort of up to speed. 322 00:17:19,658 --> 00:17:21,950 Similarly for a voice call, it would be really annoying 323 00:17:21,950 --> 00:17:23,750 if our voice is constantly buffered. 324 00:17:23,750 --> 00:17:26,487 So UDP might be a good protocol for making sure 325 00:17:26,487 --> 00:17:29,570 that, even if the person on the other end sounds a little crappy, at least 326 00:17:29,570 --> 00:17:30,800 you can hear them. 327 00:17:30,800 --> 00:17:33,590 It's not pausing and resending and resending, 328 00:17:33,590 --> 00:17:37,770 because that would really slow down that sort of human interaction. 329 00:17:37,770 --> 00:17:40,670 So, in short, IP handles the addressing of these packets, 330 00:17:40,670 --> 00:17:44,150 and standardizes numbers that every computer, your own included, gets, 331 00:17:44,150 --> 00:17:48,350 and TCP handles the standardization of like what services 332 00:17:48,350 --> 00:17:54,470 can be used, between points A and point B. All right, this is great, 333 00:17:54,470 --> 00:17:58,460 but presumably, when Phyllis sends a message to Brian, 334 00:17:58,460 --> 00:18:00,590 she doesn't really know and probably shouldn't 335 00:18:00,590 --> 00:18:02,720 care what his IP address is, right? 336 00:18:02,720 --> 00:18:05,300 These days it's, like, I don't know most of the phone numbers 337 00:18:05,300 --> 00:18:06,470 that my friends have. 338 00:18:06,470 --> 00:18:08,422 I instead look them up in some way. 339 00:18:08,422 --> 00:18:10,880 And, indeed, when you visit a website, what do you type in? 340 00:18:10,880 --> 00:18:13,857 It's typically not something dot something dot something dot 341 00:18:13,857 --> 00:18:16,107 something, where each of those somethings is a number. 342 00:18:16,107 --> 00:18:17,990 What do you typically type in to a browser? 343 00:18:17,990 --> 00:18:19,430 So a domain name, right? 344 00:18:19,430 --> 00:18:23,839 Something like Stanford.edu, Harvard.edu, Yale.edu, gmail.com, 345 00:18:23,839 --> 00:18:25,880 or any other such domain name. 346 00:18:25,880 --> 00:18:28,430 And so, thankfully, there's another system 347 00:18:28,430 --> 00:18:33,359 on the internet, one more acronym for today, called DNS, domain name system. 348 00:18:33,359 --> 00:18:37,550 And pretty much every network on the internet, Harvard's, Yale's, Comcast's, 349 00:18:37,550 --> 00:18:41,647 your own home network, somewhere, somehow has a DNS server. 350 00:18:41,647 --> 00:18:43,730 You probably didn't have to configure it yourself. 351 00:18:43,730 --> 00:18:48,150 Someone else did, your campus, your job, your internet service provider. 352 00:18:48,150 --> 00:18:51,920 But there is some server connected somehow to the network you're on, 353 00:18:51,920 --> 00:18:56,510 via wires or wirelessly, that just has a really big table in its memory, 354 00:18:56,510 --> 00:18:59,480 a big spreadsheet, if you will, or, if you prefer, 355 00:18:59,480 --> 00:19:03,800 a hash table, that has at least two columns of keys and values 356 00:19:03,800 --> 00:19:04,620 respectively. 357 00:19:04,620 --> 00:19:06,050 Where on the left hand side is what we'll 358 00:19:06,050 --> 00:19:08,070 call domain name, something like Harvard.edu, 359 00:19:08,070 --> 00:19:12,710 Yale.edu, an IP address on the right hand side, that is to say, 360 00:19:12,710 --> 00:19:17,420 a DNS server's purpose in life is just to translate domain names 361 00:19:17,420 --> 00:19:18,705 to IP addresses. 362 00:19:18,705 --> 00:19:21,080 And vice versa, if you want to go in the other direction, 363 00:19:21,080 --> 00:19:25,880 and technically, just to be precise, it translates fully qualified domain names 364 00:19:25,880 --> 00:19:27,240 to IP addresses. 365 00:19:27,240 --> 00:19:29,250 And we'll see what those are in just a moment. 366 00:19:29,250 --> 00:19:31,460 But again, all of this just kind of happens magically 367 00:19:31,460 --> 00:19:33,210 when you turn on your phone or your laptop 368 00:19:33,210 --> 00:19:37,100 today, because all of these things are pre-configured for us nowadays. 369 00:19:37,100 --> 00:19:42,560 So how can we actually start to see some of these things in action? 370 00:19:42,560 --> 00:19:48,720 Well, let's go ahead and poke around, for instance, at a couple of URLs here. 371 00:19:48,720 --> 00:19:52,340 Let's see what we can actually do now with these basic primitives. 372 00:19:52,340 --> 00:19:56,480 If we now have the ability to move data from point A to point B, 373 00:19:56,480 --> 00:19:59,060 and what can be in that envelope could be, yes, an email, 374 00:19:59,060 --> 00:20:01,820 but today, onward, it's really going to be web content. 375 00:20:01,820 --> 00:20:04,010 There's going to be content that you're requesting, 376 00:20:04,010 --> 00:20:05,392 like give me today's home page. 377 00:20:05,392 --> 00:20:07,100 And there's content you're sending, which 378 00:20:07,100 --> 00:20:09,320 would be the contents of that actual home page. 379 00:20:09,320 --> 00:20:14,450 And so, just to go one level deeper, now that we have these packets that 380 00:20:14,450 --> 00:20:18,410 are getting from point A to point B using TCP/IP, let's 381 00:20:18,410 --> 00:20:23,030 put something specific inside of them, not just an email and a bunch of text, 382 00:20:23,030 --> 00:20:27,958 but something called HTTP, which stands for hypertext transfer protocol. 383 00:20:27,958 --> 00:20:29,750 You've seen this for decades now, probably, 384 00:20:29,750 --> 00:20:33,140 in the form of URLs, so much so that you probably don't even type it nowadays. 385 00:20:33,140 --> 00:20:35,330 Your browser just adds it for you automatically, 386 00:20:35,330 --> 00:20:38,910 and you just type in Harvard.edu, or Yale.edu, or the like. 387 00:20:38,910 --> 00:20:42,200 But HTTP is just a final protocol that we'll 388 00:20:42,200 --> 00:20:46,220 talk about here, that just standardizes how web browsers and web 389 00:20:46,220 --> 00:20:48,420 servers inter-communicate. 390 00:20:48,420 --> 00:20:51,410 So this is a distinction now between the internet and the web. 391 00:20:51,410 --> 00:20:53,810 The internet is really like the low-level plumbing, 392 00:20:53,810 --> 00:20:56,900 all of the cables, all of a technology that just moves packets 393 00:20:56,900 --> 00:21:01,130 from left to right, right to left, top to bottom, that gets data from point A 394 00:21:01,130 --> 00:21:05,750 to point B. You can do anything you want on top of that internet nowadays, 395 00:21:05,750 --> 00:21:09,930 email and web and video and chat and gaming, and all of that. 396 00:21:09,930 --> 00:21:13,460 So HTTP, or the web, is just one application 397 00:21:13,460 --> 00:21:17,503 that is conceptually on top of, built on top of the internet. 398 00:21:17,503 --> 00:21:19,670 Once you take for granted that there is an internet, 399 00:21:19,670 --> 00:21:21,260 you can do really interesting things with it, 400 00:21:21,260 --> 00:21:23,750 just like in our physical world, once you have electricity, 401 00:21:23,750 --> 00:21:26,750 you can just assume you can do really interesting things with that, too, 402 00:21:26,750 --> 00:21:28,910 without even knowing or caring how it works. 403 00:21:28,910 --> 00:21:32,610 But now that you'll be programming for the web, 404 00:21:32,610 --> 00:21:35,940 it's useful to understand how some of these things indeed work. 405 00:21:35,940 --> 00:21:40,010 So let's take a peek at the format of the things that 406 00:21:40,010 --> 00:21:41,210 go inside of these messages. 407 00:21:41,210 --> 00:21:43,730 These days, it's usually actually HTTPS that's 408 00:21:43,730 --> 00:21:45,980 in play, where, again, the S just means secure. 409 00:21:45,980 --> 00:21:50,900 More on that later, but the HTTP is what standardizes what kinds of messages 410 00:21:50,900 --> 00:21:52,280 go inside of these envelopes. 411 00:21:52,280 --> 00:21:56,090 And wonderfully, it's just textual information, typically. 412 00:21:56,090 --> 00:22:00,800 There is a simple text format that humans decided on years ago, 413 00:22:00,800 --> 00:22:04,250 that goes inside of these envelopes, that tells a browser how 414 00:22:04,250 --> 00:22:08,570 to request information from a server, and how to respond from the server 415 00:22:08,570 --> 00:22:10,200 to that client with information. 416 00:22:10,200 --> 00:22:16,400 So here's, for instance, a canonical URL, https://www.example.com. 417 00:22:16,400 --> 00:22:18,170 What might you see at the end of this? 418 00:22:18,170 --> 00:22:19,638 You might sometimes see a slash. 419 00:22:19,638 --> 00:22:22,430 Browsers nowadays kind of simplify things and don't show it to you. 420 00:22:22,430 --> 00:22:25,580 But slash, as we'll see, just represents like the default 421 00:22:25,580 --> 00:22:28,460 folder, the root of the web server's hard drive, 422 00:22:28,460 --> 00:22:29,885 like whatever the base is of it. 423 00:22:29,885 --> 00:22:35,990 It's like C colon backslash on Windows, or it's my computer on Mac OS. 424 00:22:35,990 --> 00:22:38,240 But a URL can have more than that. 425 00:22:38,240 --> 00:22:40,790 It can have slash path, where path is just a word, 426 00:22:40,790 --> 00:22:44,360 or multiple words, that sort of describe a longer part of the URL. 427 00:22:44,360 --> 00:22:46,880 That path could actually be a specific file, we'll see, 428 00:22:46,880 --> 00:22:49,070 like something called file.html. 429 00:22:49,070 --> 00:22:52,490 More on HTML in just a bit, or it can even be slash folder, 430 00:22:52,490 --> 00:22:56,720 maybe with another slash, or maybe it can be /folder/file.html. 431 00:22:56,720 --> 00:23:00,890 Now these days Safari, and even Chrome to some extent, and other browsers, 432 00:23:00,890 --> 00:23:04,430 are in the habit of trying to hide more and more of these details 433 00:23:04,430 --> 00:23:06,170 from you and me. 434 00:23:06,170 --> 00:23:08,930 Ultimately, though, it'll be useful to understand 435 00:23:08,930 --> 00:23:12,620 what URLs you're at, because it maps directly to the code, 436 00:23:12,620 --> 00:23:14,450 that we're ultimately going to write. 437 00:23:14,450 --> 00:23:17,090 But this is only to say that all this stuff in yellow 438 00:23:17,090 --> 00:23:22,130 refers to, presumably, a specific file and/or folder on the web 439 00:23:22,130 --> 00:23:24,022 server, on which you're programming. 440 00:23:24,022 --> 00:23:24,980 All right, what's this? 441 00:23:24,980 --> 00:23:29,810 Example.com, this is the domain name, as we described it earlier. 442 00:23:29,810 --> 00:23:32,430 Example.com is the so-called domain name. 443 00:23:32,430 --> 00:23:37,340 This whole thing, www.example.com, is the fully qualified domain name. 444 00:23:37,340 --> 00:23:41,240 And what the WW is referring to is specifically the name 445 00:23:41,240 --> 00:23:44,100 of a specific server in that domain. 446 00:23:44,100 --> 00:23:48,650 So back in the day, there was a www.example.com web server. 447 00:23:48,650 --> 00:23:52,250 There might have been a mail.example.com mail server. 448 00:23:52,250 --> 00:23:55,310 There might have been a chat.example.com chat server. 449 00:23:55,310 --> 00:24:00,140 Nowadays, this hostname, or subdomain, depending on the context, 450 00:24:00,140 --> 00:24:02,390 can actually refer to a whole bunch of servers, right? 451 00:24:02,390 --> 00:24:05,600 When you go to www.facebook.com, that's not one server, 452 00:24:05,600 --> 00:24:07,460 that's thousands of servers nowadays. 453 00:24:07,460 --> 00:24:09,440 So long story short, there's technology that 454 00:24:09,440 --> 00:24:11,930 somehow get your data to one of those servers, 455 00:24:11,930 --> 00:24:15,300 but this whole thing is what we meant by fully qualified domain name. 456 00:24:15,300 --> 00:24:17,630 This thing here, hostname, in the context of an email 457 00:24:17,630 --> 00:24:20,510 address it might alternatively be called a subdomain. 458 00:24:20,510 --> 00:24:23,870 This thing here, top level domain, you probably 459 00:24:23,870 --> 00:24:27,230 know that dot com means commercial, although anyone can buy it these days. 460 00:24:27,230 --> 00:24:29,570 Dot org is similar, dot net. 461 00:24:29,570 --> 00:24:32,990 Some of them are a bit restricted, dot mil is just for the US military, 462 00:24:32,990 --> 00:24:35,520 dot edu is just for accredited educational institutions. 463 00:24:35,520 --> 00:24:39,020 But there are hundreds, if not more, top level domains 464 00:24:39,020 --> 00:24:41,510 nowadays, some more popular than others. 465 00:24:41,510 --> 00:24:45,350 CS50's tools, for instance, use CS50.io. 466 00:24:45,350 --> 00:24:47,990 IO sort of connotes input-output. 467 00:24:47,990 --> 00:24:52,940 It actually belongs, though, to a small island nation, a country, 468 00:24:52,940 --> 00:24:59,175 whose country code is .io, and you see other two letter top level domains that 469 00:24:59,175 --> 00:25:00,050 are country specific. 470 00:25:00,050 --> 00:25:04,208 Indeed, it's something.uk, something.jp, and the like typically 471 00:25:04,208 --> 00:25:05,000 refer to countries. 472 00:25:05,000 --> 00:25:07,850 But some of them have been rather co-opted, .tv as well, 473 00:25:07,850 --> 00:25:10,740 because they have these meanings in English as well. 474 00:25:10,740 --> 00:25:12,800 Lastly, this is what we'll call the protocol. 475 00:25:12,800 --> 00:25:16,850 That specifies how the server uses this URL to get data from point A 476 00:25:16,850 --> 00:25:20,160 to point B. So what is inside of this envelope? 477 00:25:20,160 --> 00:25:22,430 Let's now start poking around a little bit more. 478 00:25:22,430 --> 00:25:24,020 What is inside of this envelope? 479 00:25:24,020 --> 00:25:27,590 It's essentially, for our purposes today, one of two verbs, 480 00:25:27,590 --> 00:25:29,600 either GET or POST. 481 00:25:29,600 --> 00:25:32,420 And if any of you have dabbled with HTML or made your own website, 482 00:25:32,420 --> 00:25:34,378 you might have seen some of these terms before. 483 00:25:34,378 --> 00:25:38,510 But these two verbs describe just how to send information 484 00:25:38,510 --> 00:25:40,760 from you to the server. 485 00:25:40,760 --> 00:25:42,980 Long story short, more on this next week, 486 00:25:42,980 --> 00:25:47,280 GET means put any user input in the URL, POST means hide it, 487 00:25:47,280 --> 00:25:50,450 so that things you're searching for, credit card numbers you're typing in, 488 00:25:50,450 --> 00:25:53,442 usernames and passwords you're inputting, don't show up in the URL, 489 00:25:53,442 --> 00:25:55,400 and are therefore visible to anyone with access 490 00:25:55,400 --> 00:25:57,480 to your computer and your search history, 491 00:25:57,480 --> 00:26:01,610 but rather they're somehow provided elsewhere, deeper into that envelope. 492 00:26:01,610 --> 00:26:04,100 But for now, we'll focus almost entirely on GET, 493 00:26:04,100 --> 00:26:07,550 which is perhaps the most common one that we're always going to use. 494 00:26:07,550 --> 00:26:09,060 And what we're going to do is this. 495 00:26:09,060 --> 00:26:11,270 Let me switch over just to a blank screen here. 496 00:26:11,270 --> 00:26:14,990 And if we assume that little old me is this laptop here, 497 00:26:14,990 --> 00:26:20,000 and I'm connected to the cloud, and in that cloud is some server that I 498 00:26:20,000 --> 00:26:23,990 want to request the web page of, Harvard.edu or Yale.edu, 499 00:26:23,990 --> 00:26:26,790 it's really going to be a two-step process. 500 00:26:26,790 --> 00:26:31,700 There's going to be a request, that goes from point A to point B, 501 00:26:31,700 --> 00:26:33,560 and then, hopefully, the server that hears 502 00:26:33,560 --> 00:26:37,820 that request is going to reply with what we'll typically call a response. 503 00:26:37,820 --> 00:26:40,850 And other terms that are relevant here, is my laptop 504 00:26:40,850 --> 00:26:44,450 is the so-called client, Harvard.edu, Yale.edu, whatever 505 00:26:44,450 --> 00:26:46,160 it is, is the so-called server. 506 00:26:46,160 --> 00:26:49,250 And just like in a restaurant, where you might request something to eat, 507 00:26:49,250 --> 00:26:50,900 the server might bring it to you. 508 00:26:50,900 --> 00:26:53,180 It's, again, that kind of bidirectional relationship. 509 00:26:53,180 --> 00:26:58,190 One request, one response, for each such web page we request. 510 00:26:58,190 --> 00:27:01,850 All right, so what's inside these envelopes, and what do we actually see? 511 00:27:01,850 --> 00:27:04,820 Well, this arrow, this line I just drew from left to right, 512 00:27:04,820 --> 00:27:09,110 representing the request, technically looks a little more like this. 513 00:27:09,110 --> 00:27:11,840 When you visit a web page, using your browser, 514 00:27:11,840 --> 00:27:15,260 on your phone, laptop, or desktop, what's going inside that envelope, 515 00:27:15,260 --> 00:27:18,602 and the textual message your Mac or PC or phone is automatically generating, 516 00:27:18,602 --> 00:27:20,060 looks a little something like this. 517 00:27:20,060 --> 00:27:23,920 The verb GET, the URL, or rather the path that you want to get, 518 00:27:23,920 --> 00:27:26,750 slash represents the default page on the website. 519 00:27:26,750 --> 00:27:31,490 HTTP/1.1 is just some mention of what version of HTTP you're speaking. 520 00:27:31,490 --> 00:27:35,030 Now we're up to version 2, and version 3, but 1.1 is quite common. 521 00:27:35,030 --> 00:27:39,620 And the envelope contains some mention of the host that was typed in, 522 00:27:39,620 --> 00:27:41,310 the fully qualified domain name. 523 00:27:41,310 --> 00:27:46,140 This is because single servers can actually host many different websites. 524 00:27:46,140 --> 00:27:49,820 If you're using Squarespace or Wix or one of these popular hosting websites 525 00:27:49,820 --> 00:27:53,090 nowadays, you don't get your own personal server, most likely. 526 00:27:53,090 --> 00:27:56,460 You're on the same server as dozens, hundreds of other customers. 527 00:27:56,460 --> 00:28:00,050 But when your customers, your users' browsers, 528 00:28:00,050 --> 00:28:04,280 include a little mention of your specific, fully qualified domain 529 00:28:04,280 --> 00:28:06,650 name in the envelope, Squarespace and Wix just 530 00:28:06,650 --> 00:28:10,250 know to send it to your web page or my web page or some other customer 531 00:28:10,250 --> 00:28:10,950 altogether. 532 00:28:10,950 --> 00:28:12,840 Dot dot dot, there's some other stuff there. 533 00:28:12,840 --> 00:28:16,340 But that's really the essence of what's in these requests. 534 00:28:16,340 --> 00:28:20,120 Hopefully, then, when your browser requests this web page from the server, 535 00:28:20,120 --> 00:28:21,170 what comes back? 536 00:28:21,170 --> 00:28:25,760 Well, hopefully, a response that looks like this, HTTP/1.1, 537 00:28:25,760 --> 00:28:29,630 so the same version, some status code, like a number 200, 538 00:28:29,630 --> 00:28:33,830 and then literally a short phrase like OK, which means exactly that, like, OK, 539 00:28:33,830 --> 00:28:35,490 this request was satisfied. 540 00:28:35,490 --> 00:28:38,870 Then it contains some other information, like the type of content 541 00:28:38,870 --> 00:28:39,680 that's coming back. 542 00:28:39,680 --> 00:28:41,597 And we'll see that this, too, is standardized. 543 00:28:41,597 --> 00:28:45,740 Text/HTML means here comes some HTML, which is just a text language. 544 00:28:45,740 --> 00:28:51,950 It could instead be image/jpeg or Image/png, or video/mp4, 545 00:28:51,950 --> 00:28:55,790 there are these different content types, otherwise known as MIME types, 546 00:28:55,790 --> 00:28:58,520 that uniquely identify types of files, that come back, 547 00:28:58,520 --> 00:29:01,130 similar in spirit to file extensions, but a little more 548 00:29:01,130 --> 00:29:03,040 standardized this way. 549 00:29:03,040 --> 00:29:04,790 Then there's some more stuff, dot dot dot. 550 00:29:04,790 --> 00:29:09,650 But in general, what you see here, are a familiar pattern, keys and values. 551 00:29:09,650 --> 00:29:13,460 These keys and values are otherwise known as HTTP headers. 552 00:29:13,460 --> 00:29:17,900 And your browser has been sending these every time you visit a website. 553 00:29:17,900 --> 00:29:20,230 And, indeed, we can see this right now ourselves. 554 00:29:20,230 --> 00:29:24,230 Let me go over, in just a second, to Chrome on my computer, 555 00:29:24,230 --> 00:29:27,360 though you can do this kind of thing with most any browser today. 556 00:29:27,360 --> 00:29:32,450 I'll go ahead and visit HTTP://Harvard.edu, Enter. 557 00:29:32,450 --> 00:29:35,267 And, voila, I'm at Harvard's home page for today. 558 00:29:35,267 --> 00:29:36,350 The content often changes. 559 00:29:36,350 --> 00:29:38,790 But this is what it looks like right now. 560 00:29:38,790 --> 00:29:41,810 Well, I typed in the URL, but notice it changed a little bit. 561 00:29:41,810 --> 00:29:44,820 It actually sent me to HTTPS and added the www, 562 00:29:44,820 --> 00:29:46,490 even though I didn't type that. 563 00:29:46,490 --> 00:29:50,510 But it turns out we can poke around at what my browser is actually doing. 564 00:29:50,510 --> 00:29:51,620 Let me open another page. 565 00:29:51,620 --> 00:29:54,350 I'm going to start to use incognito mode this time, not because I 566 00:29:54,350 --> 00:29:56,308 care that people know I'm visiting Harvard.edu, 567 00:29:56,308 --> 00:30:00,280 but because it throws away any history that I just did. 568 00:30:00,280 --> 00:30:02,780 So that every request is going to look like a brand new one, 569 00:30:02,780 --> 00:30:05,238 and that's just useful diagnostically, because we're always 570 00:30:05,238 --> 00:30:06,590 going to see fresh information. 571 00:30:06,590 --> 00:30:09,890 My browser is not going to remember what I previously already requested. 572 00:30:09,890 --> 00:30:13,250 But I'm going to go up to View, developer, 573 00:30:13,250 --> 00:30:16,850 developer tools, which is something that all of you have, if you use Chrome. 574 00:30:16,850 --> 00:30:19,460 And there's something analogous for Firefox and Edge 575 00:30:19,460 --> 00:30:21,440 and Safari and other browsers. 576 00:30:21,440 --> 00:30:24,110 Developer tools is going to open up these tabs down here. 577 00:30:24,110 --> 00:30:27,318 I don't really care what's new, so I'm going to close the bottom thing there. 578 00:30:27,318 --> 00:30:29,990 And I'm going to hover over the Network tab for just a moment. 579 00:30:29,990 --> 00:30:35,060 And now I'm going to go and say HTTP://Harvard.edu, so 580 00:30:35,060 --> 00:30:36,230 the shorter version. 581 00:30:36,230 --> 00:30:39,830 I'm going to hit Enter, and a whole bunch of stuff 582 00:30:39,830 --> 00:30:41,150 just flew across the screen. 583 00:30:41,150 --> 00:30:42,410 And it's still coming in. 584 00:30:42,410 --> 00:30:47,510 And if I zoom in down here, my God, visiting Harvard.edu, still going, 585 00:30:47,510 --> 00:30:51,890 is downloading, what 17, 18, 19 megabytes, 20 megabytes, 586 00:30:51,890 --> 00:30:56,990 millions of bytes of information, over 111 HTTP requests. 587 00:30:56,990 --> 00:30:59,870 In other words, a bit of a simplification, but my browser, 588 00:30:59,870 --> 00:31:03,500 unbeknownst to me, sent one envelope initially with the request. 589 00:31:03,500 --> 00:31:05,420 Then the server said, OK, by the way, there's 590 00:31:05,420 --> 00:31:09,050 110 other things you need, 112 other things you need to get. 591 00:31:09,050 --> 00:31:13,250 So my computer went back and forth, requesting even more content for me. 592 00:31:13,250 --> 00:31:14,000 Why? 593 00:31:14,000 --> 00:31:17,390 Well, inside of Harvard's web page is a whole bunch of images, 594 00:31:17,390 --> 00:31:20,150 and maybe sound files and videos and other stuff, 595 00:31:20,150 --> 00:31:22,550 that all need to be downloaded and to compose 596 00:31:22,550 --> 00:31:23,970 what is ultimately the web page. 597 00:31:23,970 --> 00:31:26,690 But I don't care about like 100 plus of these things. 598 00:31:26,690 --> 00:31:28,970 Let's focus on the very first one first. 599 00:31:28,970 --> 00:31:31,520 The very first request I sent was up here. 600 00:31:31,520 --> 00:31:34,580 And I'm going to click on this row, under the Network tab. 601 00:31:34,580 --> 00:31:37,310 And then I'm going to see a bit of diagnostic information. 602 00:31:37,310 --> 00:31:40,550 To an average person using the web, they needn't care about this, 603 00:31:40,550 --> 00:31:43,100 just as you probably didn't care about it until right now. 604 00:31:43,100 --> 00:31:44,810 And even then, perhaps not. 605 00:31:44,810 --> 00:31:48,800 But if I scroll down to request headers, you will see, 606 00:31:48,800 --> 00:31:52,760 if I click View source, literally everything that was in the request 607 00:31:52,760 --> 00:31:55,090 my Mac just sent to Harvard.edu. 608 00:31:55,090 --> 00:32:00,290 Two of the lines are familiar, get/http1.1, host:harvard.edu, 609 00:32:00,290 --> 00:32:03,750 and then other stuff that, for now, it's not that interesting for us. 610 00:32:03,750 --> 00:32:07,190 But let's look at the response that came back from the server. 611 00:32:07,190 --> 00:32:12,230 I'm going to scroll up now and see response headers, view source. 612 00:32:12,230 --> 00:32:13,610 And this is interesting. 613 00:32:13,610 --> 00:32:15,020 It is not OK. 614 00:32:15,020 --> 00:32:17,840 There's no 200, there's no word OK. 615 00:32:17,840 --> 00:32:21,920 Curiously, harvard.edu has moved permanently. 616 00:32:21,920 --> 00:32:22,762 What does that mean? 617 00:32:22,762 --> 00:32:24,470 Well, there's a whole bunch of stuff here 618 00:32:24,470 --> 00:32:25,928 that's not that interesting for us. 619 00:32:25,928 --> 00:32:28,590 But this line, location, is interesting. 620 00:32:28,590 --> 00:32:32,360 This is an HTTP header, a standardized key value pair, 621 00:32:32,360 --> 00:32:36,110 that's part of the HTTP protocol, that is, conventions. 622 00:32:36,110 --> 00:32:38,690 And if I highlight just this one, it's telling me, 623 00:32:38,690 --> 00:32:42,230 mm-mmm, Harvard is not at HTTP://Harvard.edu, 624 00:32:42,230 --> 00:32:48,050 Harvard's website is now, and perhaps forever, at HTTPS://www.harvard.edu. 625 00:32:48,050 --> 00:32:51,440 So what's the value here? 626 00:32:51,440 --> 00:32:54,450 Probably someone at Harvard wants you to use a secure connection. 627 00:32:54,450 --> 00:32:56,900 So they redirected you from HTTP to HTTPS. 628 00:32:56,900 --> 00:33:01,200 Maybe the marketing people want you to be at www instead of just Harvard.edu. 629 00:33:01,200 --> 00:33:01,700 Why? 630 00:33:01,700 --> 00:33:04,158 Just to standardize things, but there are technical reasons 631 00:33:04,158 --> 00:33:07,250 to use a hostname, and not just the raw domain name. 632 00:33:07,250 --> 00:33:10,140 And all this other stuff is sort of uninteresting for our purposes, 633 00:33:10,140 --> 00:33:15,170 now, because a browser that receives a 301 response knows, 634 00:33:15,170 --> 00:33:20,270 by design, by the definition of HTTP, to automatically redirect the user. 635 00:33:20,270 --> 00:33:23,873 And that's why, in my browser, all of this happened in like a split second, 636 00:33:23,873 --> 00:33:26,540 because I didn't really know or care about all of those headers. 637 00:33:26,540 --> 00:33:30,290 But that's why and how I ended up at this URL here. 638 00:33:30,290 --> 00:33:33,650 My browser was told to go elsewhere via that new location. 639 00:33:33,650 --> 00:33:36,200 And the browser just followed those breadcrumbs, 640 00:33:36,200 --> 00:33:38,930 if you will, at which point it downloaded all of the other images 641 00:33:38,930 --> 00:33:43,370 and files, and so forth, that compose this particular page. 642 00:33:43,370 --> 00:33:44,447 Well, let me zoom out. 643 00:33:44,447 --> 00:33:46,280 And let me actually go into VS Code, if only 644 00:33:46,280 --> 00:33:49,405 because it's a little more pleasant to do things in just a terminal window, 645 00:33:49,405 --> 00:33:53,010 without actually using a full-fledged browser. 646 00:33:53,010 --> 00:33:55,190 So now let's just use an equivalent program. 647 00:33:55,190 --> 00:33:58,160 It's called Curl, for connecting to a URL, that's 648 00:33:58,160 --> 00:34:01,070 going to allow me to play with websites and just see those headers, 649 00:34:01,070 --> 00:34:03,680 without bothering to download all the images and text 650 00:34:03,680 --> 00:34:05,120 and so forth from the website. 651 00:34:05,120 --> 00:34:07,710 It's going to allow me to do something like this. 652 00:34:07,710 --> 00:34:14,750 Let me go ahead and run, for instance, Curl-I-xget, which is just the command 653 00:34:14,750 --> 00:34:18,380 line arguments that says simulate a GET request textually, 654 00:34:18,380 --> 00:34:19,640 as though you're a browser. 655 00:34:19,640 --> 00:34:24,470 And let's go to HTTP://Harvard.edu Enter. 656 00:34:24,470 --> 00:34:27,642 Now, by way of how Curl, works, I'm just seeing the headers. 657 00:34:27,642 --> 00:34:29,600 It didn't bother downloading the whole website. 658 00:34:29,600 --> 00:34:32,600 And you see exactly the same thing, 301 moved permanently. 659 00:34:32,600 --> 00:34:35,370 Location is, indeed, this one here. 660 00:34:35,370 --> 00:34:37,010 So that's kind of interesting. 661 00:34:37,010 --> 00:34:38,690 But let's follow it manually now. 662 00:34:38,690 --> 00:34:41,490 Let's now do what it's telling me to do. 663 00:34:41,490 --> 00:34:46,190 Let's go to the location, with HTTPS and the www and hit Enter. 664 00:34:46,190 --> 00:34:50,210 And now, what's a good sign with this output? 665 00:34:50,210 --> 00:34:51,470 Most of it's irrelevant. 666 00:34:51,470 --> 00:34:52,640 AUDIENCE: Migrate? 667 00:34:52,640 --> 00:34:55,550 SPEAKER 1: 200 OK, that means I'm seeing, presumably, 668 00:34:55,550 --> 00:34:59,030 if I were using a real browser, the actual content of the web page. 669 00:34:59,030 --> 00:35:02,720 Looks like Harvard's version of HTTP is even newer than the one I'm using. 670 00:35:02,720 --> 00:35:04,860 It's using HTTP version 2, which is fine. 671 00:35:04,860 --> 00:35:08,420 But 200 is indeed indicative of things being OK. 672 00:35:08,420 --> 00:35:11,630 Well, what if I try visiting some bogus URL, 673 00:35:11,630 --> 00:35:18,140 like Harvard.edu, when this file does not exist, something completely random, 674 00:35:18,140 --> 00:35:21,140 probably doesn't exist, and hit Enter. 675 00:35:21,140 --> 00:35:24,800 What do you see now, that's perhaps familiar, in the real world? 676 00:35:24,800 --> 00:35:25,797 Yeah. 677 00:35:25,797 --> 00:35:26,989 AUDIENCE: Error 404. 678 00:35:26,989 --> 00:35:28,429 SPEAKER 1: Yeah, error 404. 679 00:35:28,429 --> 00:35:30,409 All of us have seen this probably endlessly, 680 00:35:30,409 --> 00:35:33,110 from time to time, when you screw up by mis-typing a URL, 681 00:35:33,110 --> 00:35:35,030 or someone deletes the web page in question. 682 00:35:35,030 --> 00:35:38,030 But all that is is a status code that a browser 683 00:35:38,030 --> 00:35:41,330 is being sent from the server, that's a little clue as to what 684 00:35:41,330 --> 00:35:44,192 the actual problem is, underneath the hood. 685 00:35:44,192 --> 00:35:45,900 So instead of getting back, for instance, 686 00:35:45,900 --> 00:35:49,010 something like OK, or moved permanently, what I've just gotten back, quite 687 00:35:49,010 --> 00:35:51,710 simply, is 404 not found. 688 00:35:51,710 --> 00:35:55,520 Well, it turns out there's other types of status codes 689 00:35:55,520 --> 00:35:59,020 that you'll start to see over time, as you start to program for the web. 690 00:35:59,020 --> 00:36:00,190 200 is OK. 691 00:36:00,190 --> 00:36:01,690 301 is moved permanently. 692 00:36:01,690 --> 00:36:05,230 302, 304, 307 are all similar in spirit. 693 00:36:05,230 --> 00:36:08,590 They're related to redirecting the user from one place to another. 694 00:36:08,590 --> 00:36:12,610 401, 403, unauthorized or forbidden. 695 00:36:12,610 --> 00:36:14,830 If you ever mess up your password, or you 696 00:36:14,830 --> 00:36:16,943 try visiting a URL you're not supposed to look at, 697 00:36:16,943 --> 00:36:19,360 you might see one of these codes, indicating that you just 698 00:36:19,360 --> 00:36:21,250 don't have authorization for those. 699 00:36:21,250 --> 00:36:25,480 404 not found, 418, I'm a teapot, was an April Fool's joke 700 00:36:25,480 --> 00:36:27,880 by the tech community years ago. 701 00:36:27,880 --> 00:36:29,140 500 is bad. 702 00:36:29,140 --> 00:36:31,090 And, unfortunately, all of you are probably 703 00:36:31,090 --> 00:36:34,780 on a path now to creating HTTP 500 errors, once, 704 00:36:34,780 --> 00:36:36,923 next week, we start writing code, because all of us 705 00:36:36,923 --> 00:36:37,840 are going to screw up. 706 00:36:37,840 --> 00:36:41,440 We're going to have typos, logical errors, and this is on the horizon, 707 00:36:41,440 --> 00:36:45,850 just like segfaults were in the world of C, but solvable with the right skills. 708 00:36:45,850 --> 00:36:49,062 503 service unavailable, means maybe the server is overloaded, 709 00:36:49,062 --> 00:36:50,020 or something like that. 710 00:36:50,020 --> 00:36:51,530 And there's other codes there. 711 00:36:51,530 --> 00:36:54,820 But those are perhaps some of the most common ones. 712 00:36:54,820 --> 00:36:58,450 Has anyone, we can get away with this here, less so in New Haven, 713 00:36:58,450 --> 00:37:02,780 has anyone ever visited SafetySchool.org? 714 00:37:05,350 --> 00:37:12,190 HTTP://SafetySchool.org, dare we do this, Enter. 715 00:37:12,190 --> 00:37:13,570 Oh, look at that. 716 00:37:13,570 --> 00:37:14,740 Where did we end up? 717 00:37:14,740 --> 00:37:15,610 [LAUGHTER] 718 00:37:15,610 --> 00:37:17,374 OK, so-- 719 00:37:17,374 --> 00:37:21,070 [APPLAUSE] 720 00:37:21,070 --> 00:37:23,860 --so this has been like a joke for like 10 or 20 years. 721 00:37:23,860 --> 00:37:26,620 Someone out there has been paying for the domain name, 722 00:37:26,620 --> 00:37:30,010 safetyschool.org, just for this two second demonstration. 723 00:37:30,010 --> 00:37:32,350 But we can now infer, how did this work? 724 00:37:32,350 --> 00:37:35,260 The person who bought that domain name and somehow configured 725 00:37:35,260 --> 00:37:39,310 DNS to point to their web server, the IP address of their web server, 726 00:37:39,310 --> 00:37:41,680 what is their web server presumably spitting out, 727 00:37:41,680 --> 00:37:44,830 whenever a browser requests the page? 728 00:37:44,830 --> 00:37:46,780 What status code, perhaps? 729 00:37:46,780 --> 00:37:48,020 Well, we can simulate this. 730 00:37:48,020 --> 00:37:50,710 Let me go over to VS Code. 731 00:37:50,710 --> 00:37:52,030 Let me go back over here. 732 00:37:52,030 --> 00:37:53,720 Let me increase my terminal window. 733 00:37:53,720 --> 00:38:02,080 Let me do Curl-I-xget HTTP://safetyschool.org Enter, 734 00:38:02,080 --> 00:38:03,820 and that's all this website does. 735 00:38:03,820 --> 00:38:06,130 There's not even an actual website there. 736 00:38:06,130 --> 00:38:08,650 No HTML, no CSS languages we're about to see. 737 00:38:08,650 --> 00:38:13,510 It literally just exists on the internet to do that redirect there. 738 00:38:13,510 --> 00:38:17,170 In fairness, there are others. 739 00:38:17,170 --> 00:38:19,420 Let me actually do another one here. 740 00:38:19,420 --> 00:38:23,320 Instead of safetyschool.org, turns out someone, 741 00:38:23,320 --> 00:38:29,380 some years ago, bought HarvardSucks.org Enter. 742 00:38:29,380 --> 00:38:33,880 And when we do this, you'll see that, oh, they don't need us to be secure, 743 00:38:33,880 --> 00:38:35,620 but I do need the www. 744 00:38:35,620 --> 00:38:38,620 Let's do this one, Enter. 745 00:38:38,620 --> 00:38:40,570 That one is not found. 746 00:38:40,570 --> 00:38:42,593 This demo actually worked for so many years. 747 00:38:42,593 --> 00:38:45,010 But someone has stopped paying for the Squarespace account 748 00:38:45,010 --> 00:38:46,480 recently, apparently. 749 00:38:46,480 --> 00:38:47,382 So-- 750 00:38:47,382 --> 00:38:50,280 [APPLAUSE] 751 00:38:50,280 --> 00:38:55,920 OK, so, fortunately, we did save the YouTube video 752 00:38:55,920 --> 00:38:57,480 to which this thing refers. 753 00:38:57,480 --> 00:39:00,063 And so, just to put this into context, since it's 754 00:39:00,063 --> 00:39:02,230 been quite a few years, Harvard and Yale, of course, 755 00:39:02,230 --> 00:39:04,080 have this long-standing rivalry. 756 00:39:04,080 --> 00:39:06,700 There is this tradition of pranking each other. 757 00:39:06,700 --> 00:39:10,630 And, honestly, hands down, one of the best pranks ever done in this rivalry 758 00:39:10,630 --> 00:39:12,870 was by Yale to Harvard. 759 00:39:12,870 --> 00:39:14,550 It's about a three-minute retrospective. 760 00:39:14,550 --> 00:39:16,883 It's one of the earliest videos, I dare say, on YouTube, 761 00:39:16,883 --> 00:39:19,320 so the quality is representative of that. 762 00:39:19,320 --> 00:39:22,210 But let me go ahead and full screen my page here. 763 00:39:22,210 --> 00:39:26,700 And what used to live at HarvardSucks.org is this video here. 764 00:39:26,700 --> 00:39:29,546 If we could dim the lights for about three minutes. 765 00:39:29,546 --> 00:39:30,213 [VIDEO PLAYBACK] 766 00:39:30,213 --> 00:39:52,799 [MUSIC PLAYING] 767 00:39:52,799 --> 00:39:57,783 [CHEERING] 768 00:39:57,783 --> 00:39:59,700 - Actually we're going all the way to the top. 769 00:39:59,700 --> 00:40:01,496 And you pass it down. 770 00:40:01,496 --> 00:40:03,790 - This is for you, Yale. 771 00:40:03,790 --> 00:40:04,950 - We love you, Yale. 772 00:40:04,950 --> 00:40:08,130 - We're here to trip up Harvard. 773 00:40:08,130 --> 00:40:08,910 - Go Harvard! 774 00:40:08,910 --> 00:40:10,558 - Go Harvard! 775 00:40:10,558 --> 00:40:12,210 - Pass from the top one, pass it down. 776 00:40:12,210 --> 00:40:13,523 - Pass them down. 777 00:40:13,523 --> 00:40:16,630 - It's nice to say the ERA sucks. 778 00:40:16,630 --> 00:40:18,800 - Let's go Harvard. 779 00:40:18,800 --> 00:40:20,150 - Where does? 780 00:40:20,150 --> 00:40:21,592 - You see that [BEEP]? 781 00:40:21,592 --> 00:40:23,540 Where they're passing. 782 00:40:23,540 --> 00:40:26,210 It's going to have to happen. 783 00:40:26,210 --> 00:40:28,840 - It's actually going to happen. 784 00:40:28,840 --> 00:40:30,260 I can't [BEEP] believe this. 785 00:40:30,260 --> 00:40:32,320 - What do you think of Yale? 786 00:40:32,320 --> 00:40:34,080 - They don't think good. 787 00:40:34,080 --> 00:40:34,580 - Hah-hah. 788 00:40:37,142 --> 00:40:38,350 - Because they don't have it. 789 00:40:38,350 --> 00:40:39,660 Doesn't run out of stuff. 790 00:40:39,660 --> 00:40:39,780 - OK. 791 00:40:39,780 --> 00:40:40,822 - Is there another stuff? 792 00:40:40,822 --> 00:40:44,150 - Probably that's going to be legible, very small. 793 00:40:44,150 --> 00:40:44,650 - Garbage. 794 00:40:47,434 --> 00:40:48,362 - I know, but-- 795 00:40:48,362 --> 00:40:49,610 - Well, what houses? 796 00:40:49,610 --> 00:40:51,320 - Says, are we in boats now? 797 00:40:51,320 --> 00:40:52,070 - How many extras? 798 00:40:52,070 --> 00:40:53,195 - How many extra are there? 799 00:40:53,195 --> 00:40:53,910 - Sometimes. 800 00:40:53,910 --> 00:40:56,760 - Yeah. 801 00:40:56,760 --> 00:40:57,754 [CHEERING] 802 00:40:57,754 --> 00:40:58,254 - OK. 803 00:40:58,254 --> 00:40:59,712 - You guys are from Harvard, right? 804 00:40:59,712 --> 00:41:00,500 - No, vote for. 805 00:41:00,500 --> 00:41:01,130 Full timer. 806 00:41:01,130 --> 00:41:02,420 - Yeah, these are '05s. 807 00:41:02,420 --> 00:41:03,848 - Just make sure everyone has one. 808 00:41:03,848 --> 00:41:04,931 - They're probably crummy. 809 00:41:04,931 --> 00:41:05,848 - We're still passing. 810 00:41:05,848 --> 00:41:06,880 - All the cards needed. 811 00:41:06,880 --> 00:41:07,214 - Oh, no. 812 00:41:07,214 --> 00:41:07,714 My bad. 813 00:41:07,714 --> 00:41:08,900 - Yeah. 814 00:41:08,900 --> 00:41:11,570 All right, cue it up. 815 00:41:11,570 --> 00:41:12,560 [CHEERING] 816 00:41:12,560 --> 00:41:13,550 Go, Harvard. 817 00:41:18,500 --> 00:41:22,460 [APPLAUSE] 818 00:41:22,460 --> 00:41:24,935 - Hold up your signs. 819 00:41:24,935 --> 00:41:26,920 [BEEP] 820 00:41:26,920 --> 00:41:27,640 - You suck. 821 00:41:27,640 --> 00:41:27,880 You suck. 822 00:41:27,880 --> 00:41:28,200 You suck. 823 00:41:28,200 --> 00:41:28,840 You suck. 824 00:41:28,840 --> 00:41:29,670 You suck. 825 00:41:29,670 --> 00:41:30,390 You suck. 826 00:41:30,390 --> 00:41:31,057 You suck. 827 00:41:31,057 --> 00:41:31,971 You suck. 828 00:41:31,971 --> 00:41:32,885 You suck. 829 00:41:32,885 --> 00:41:34,100 You suck. 830 00:41:34,100 --> 00:41:35,060 You suck. 831 00:41:35,060 --> 00:41:35,950 You suck. 832 00:41:35,950 --> 00:41:36,670 You suck. 833 00:41:36,670 --> 00:41:37,650 You suck. 834 00:41:37,650 --> 00:41:38,940 You suck. 835 00:41:38,940 --> 00:41:39,440 [SCREAMING] 836 00:41:39,440 --> 00:41:42,700 - What do you think of Yale, sir? 837 00:41:42,700 --> 00:41:45,184 - Going to be, do one more time. 838 00:41:45,184 --> 00:41:46,636 - One more time. 839 00:41:46,636 --> 00:41:48,088 One more time. 840 00:41:48,088 --> 00:41:52,450 [SCREAMING] 841 00:41:52,450 --> 00:41:54,665 - Oh, there it goes again. 842 00:41:54,665 --> 00:41:55,165 - Oh. 843 00:42:00,500 --> 00:42:01,470 - Harvard sucks. 844 00:42:01,470 --> 00:42:02,440 Harvard sucks. 845 00:42:02,440 --> 00:42:03,410 Harvard sucks. 846 00:42:03,410 --> 00:42:04,865 Harvard sucks. 847 00:42:04,865 --> 00:42:05,835 Harvard sucks. 848 00:42:05,835 --> 00:42:06,805 Harvard sucks. 849 00:42:06,805 --> 00:42:08,280 Harvard sucks. 850 00:42:08,280 --> 00:42:12,620 [END PLAYBACK] 851 00:42:12,620 --> 00:42:17,030 SPEAKER 1: All right, so thanks to our friends at Yale for that one. 852 00:42:17,030 --> 00:42:20,938 Let's go ahead here and consider, in just a moment, what further is deeper 853 00:42:20,938 --> 00:42:22,730 down inside of the envelope, because we now 854 00:42:22,730 --> 00:42:28,010 have the ability to get data from, oh, OK, YouTube autoplay again. 855 00:42:28,010 --> 00:42:29,150 Got to stop doing that. 856 00:42:29,150 --> 00:42:33,890 Let's consider for just a moment that, let's consider for just a moment 857 00:42:33,890 --> 00:42:37,460 that we now have this ability to get data from point A to point B. 858 00:42:37,460 --> 00:42:41,298 And we have the ability to specify in those envelopes what 859 00:42:41,298 --> 00:42:42,590 it is we want from the website. 860 00:42:42,590 --> 00:42:44,000 We want to get the home page. 861 00:42:44,000 --> 00:42:45,740 We want to get back the HTML. 862 00:42:45,740 --> 00:42:47,055 But what is that HTML? 863 00:42:47,055 --> 00:42:50,180 In fact, we don't yet have the language with which the web pages themselves 864 00:42:50,180 --> 00:42:52,302 are written, namely HTML and CSS. 865 00:42:52,302 --> 00:42:54,510 But let's go ahead and take a five minute break here. 866 00:42:54,510 --> 00:42:57,990 And when we come back, we'll learn those two languages. 867 00:42:57,990 --> 00:42:59,880 All right, we are back. 868 00:42:59,880 --> 00:43:02,180 So we've got three languages to look at today. 869 00:43:02,180 --> 00:43:04,640 But two of them are not actually programming languages. 870 00:43:04,640 --> 00:43:08,960 What makes something a programming language, like C or Python and SQL, 871 00:43:08,960 --> 00:43:12,280 is that there are these constructs via which you can express conditionals. 872 00:43:12,280 --> 00:43:14,780 You might have variables, you might have looping constructs. 873 00:43:14,780 --> 00:43:17,150 You have the ability, ultimately, to express logic. 874 00:43:17,150 --> 00:43:20,720 HTML and CSS aren't so much about logic as they are about structure, 875 00:43:20,720 --> 00:43:22,250 and the aesthetics of a page. 876 00:43:22,250 --> 00:43:25,070 And so we're going to create the skeleton of a web page using 877 00:43:25,070 --> 00:43:26,998 this pair of languages, HTML and CSS. 878 00:43:26,998 --> 00:43:28,790 And then toward the end of the today, we'll 879 00:43:28,790 --> 00:43:30,680 introduce an actual programming language, 880 00:43:30,680 --> 00:43:34,040 that actually is pretty similar in spirit and syntactically 881 00:43:34,040 --> 00:43:37,910 to both C and Python, but that's going to allow us to make these web pages not 882 00:43:37,910 --> 00:43:42,060 just static, things that you look at, but interactive applications as well. 883 00:43:42,060 --> 00:43:46,580 And then next week again, in week 9, will we reintroduce Python and SQL, 884 00:43:46,580 --> 00:43:50,060 tie all of this together, so that you can actually have a browser or a phone 885 00:43:50,060 --> 00:43:53,030 talking to a back-end server, and creating 886 00:43:53,030 --> 00:43:56,960 the experience that you and I now take for granted for most any app or website 887 00:43:56,960 --> 00:43:57,620 today. 888 00:43:57,620 --> 00:43:58,995 Well, let's go ahead and do this. 889 00:43:58,995 --> 00:44:02,210 Let's quickly whip up something in this language called HTML. 890 00:44:02,210 --> 00:44:03,410 I'm in VS Code here. 891 00:44:03,410 --> 00:44:07,910 I'm going to go ahead and create a file quite simply called, Hello.html. 892 00:44:07,910 --> 00:44:11,300 The convention is typically to end your file names in dot html. 893 00:44:11,300 --> 00:44:13,592 And I'm going to go ahead and bang this out real quick. 894 00:44:13,592 --> 00:44:16,650 But then we'll more slowly step through what the constructs are herein. 895 00:44:16,650 --> 00:44:21,290 So I'm going to say doctype html open bracket html, 896 00:44:21,290 --> 00:44:25,880 and then notice I'm going to do open bracket slash html close bracket. 897 00:44:25,880 --> 00:44:29,480 And I'm leveraging a feature of VS Code and programming environments more 898 00:44:29,480 --> 00:44:31,410 generally, to do a bit of autocomplete. 899 00:44:31,410 --> 00:44:34,640 So you'll see that there's this symmetry to much of what I'm going to type, 900 00:44:34,640 --> 00:44:36,440 but I'm not typing all of these things. 901 00:44:36,440 --> 00:44:41,420 VS Code is automatically generating the end of my thought for me, if you will. 902 00:44:41,420 --> 00:44:45,320 Let me go ahead and say, Open the head tag. 903 00:44:45,320 --> 00:44:46,640 Open the title tag. 904 00:44:46,640 --> 00:44:48,740 I'll say something cute like, Hello, title. 905 00:44:48,740 --> 00:44:51,470 And then down here, I'm going to create the body of this web page 906 00:44:51,470 --> 00:44:53,270 and say something like Hello, body. 907 00:44:53,270 --> 00:44:57,050 And let me specify at the very top, that all of this is really in English, 908 00:44:57,050 --> 00:44:58,400 Lang equals en. 909 00:44:58,400 --> 00:45:04,370 So at this moment, I have a file in my VS Code environment called Hello.html. 910 00:45:04,370 --> 00:45:07,292 VS Code as we're using it, of course, is cloud-based. 911 00:45:07,292 --> 00:45:09,500 We're using it in a browser, even though you can also 912 00:45:09,500 --> 00:45:11,600 download it and run it on a Mac and PC. 913 00:45:11,600 --> 00:45:14,300 So we are in this weird situation where I'm 914 00:45:14,300 --> 00:45:16,580 using the cloud to create a web page, and I 915 00:45:16,580 --> 00:45:21,590 want that web page to also live in the cloud, that is, on the internet. 916 00:45:21,590 --> 00:45:24,890 But the thing about VS Code, or really any website 917 00:45:24,890 --> 00:45:28,550 that you might use in a browser, by default that website is using probably 918 00:45:28,550 --> 00:45:33,170 TCP port number 80 or TCP port number 443, 919 00:45:33,170 --> 00:45:35,870 which is HTTP and HTTPS respectively. 920 00:45:35,870 --> 00:45:38,720 But here I am, sort of a programmer myself, 921 00:45:38,720 --> 00:45:43,050 trying to create my own website on an existing website. 922 00:45:43,050 --> 00:45:44,540 So it's a bit of a weird situation. 923 00:45:44,540 --> 00:45:47,030 But that's OK, because what's nice about TCP 924 00:45:47,030 --> 00:45:51,380 is that you and I can just pick port numbers to use and run our own web 925 00:45:51,380 --> 00:45:53,120 server, on a web server. 926 00:45:53,120 --> 00:45:55,610 That is, we can control the environment entirely, 927 00:45:55,610 --> 00:46:01,520 by just running our own web server via this command, HTTP-server, 928 00:46:01,520 --> 00:46:02,540 in my terminal window. 929 00:46:02,540 --> 00:46:05,253 This is a command that we preinstalled in VS Code here. 930 00:46:05,253 --> 00:46:06,920 And you'll notice a pop-up just came up. 931 00:46:06,920 --> 00:46:09,650 Your application running on port 8080 is available. 932 00:46:09,650 --> 00:46:12,980 That's a commonly used TCP port number, when 80 is already used, 933 00:46:12,980 --> 00:46:15,740 and 443 is already used, you can run your own server 934 00:46:15,740 --> 00:46:18,330 on your own port, 8080 in this case. 935 00:46:18,330 --> 00:46:22,400 I've opened that tab in advance, and if I go into another browser tab here, 936 00:46:22,400 --> 00:46:26,060 here I see a so-called directory listing of the web server I'm running. 937 00:46:26,060 --> 00:46:28,130 So I don't see any of my other files. 938 00:46:28,130 --> 00:46:31,160 I don't see anything belonging to VS Code itself. 939 00:46:31,160 --> 00:46:34,370 I only see the file that I've created in my current directory, called 940 00:46:34,370 --> 00:46:35,660 Hello.html. 941 00:46:35,660 --> 00:46:40,040 And so if I click on this file now, I should see Hello, body. 942 00:46:40,040 --> 00:46:41,120 I don't see the title. 943 00:46:41,120 --> 00:46:43,070 But that's because the title of a web page 944 00:46:43,070 --> 00:46:45,507 nowadays is typically embedded in the tab. 945 00:46:45,507 --> 00:46:47,840 And if I'm full screen in my browser, there are no tabs. 946 00:46:47,840 --> 00:46:49,460 So let me minimize the window a bit. 947 00:46:49,460 --> 00:46:53,840 And now you can see just in this single browser window, in my own URL 948 00:46:53,840 --> 00:46:56,190 here, that Hello, body, is in the top left hand corner. 949 00:46:56,190 --> 00:46:58,610 And if I zoom in, there's Hello, title. 950 00:46:58,610 --> 00:47:00,080 So what have I done here? 951 00:47:00,080 --> 00:47:05,300 I have gone ahead and created my own web page in HTML, 952 00:47:05,300 --> 00:47:08,660 in a file called Hello.html. 953 00:47:08,660 --> 00:47:13,060 And then I have opened up a web server of my own, 954 00:47:13,060 --> 00:47:15,400 configured it to listen on TCP port 8080, 955 00:47:15,400 --> 00:47:18,790 which just says to the internet, hey, listen for requests from web browsers, 956 00:47:18,790 --> 00:47:22,420 not on the standard port number, 80 or 443, listen on 8080. 957 00:47:22,420 --> 00:47:26,290 And this means I can develop a website using a web-based tool, like this one 958 00:47:26,290 --> 00:47:28,660 here, which is increasingly common today. 959 00:47:28,660 --> 00:47:32,500 All right, so now let's consider what it is I actually just typed out. 960 00:47:32,500 --> 00:47:36,700 HTML is characterized really by just two features, two vocab words, tags 961 00:47:36,700 --> 00:47:37,540 and attributes. 962 00:47:37,540 --> 00:47:40,780 Most of what I just typed were tags, but there was at least one attribute 963 00:47:40,780 --> 00:47:41,540 already. 964 00:47:41,540 --> 00:47:45,680 Here's the same source code that I typed out in HTML, from top to bottom. 965 00:47:45,680 --> 00:47:46,930 Let's consider what this is. 966 00:47:46,930 --> 00:47:50,440 The very first line of code here, doctype html, 967 00:47:50,440 --> 00:47:51,700 is the only anomalous one. 968 00:47:51,700 --> 00:47:55,330 It's the only one that starts with an open bracket, a less than sign, 969 00:47:55,330 --> 00:47:56,590 and an exclamation point. 970 00:47:56,590 --> 00:47:59,200 There's no more exclamation points thereafter, for now. 971 00:47:59,200 --> 00:48:02,650 This is the document type declaration, which is a fancy way of saying, 972 00:48:02,650 --> 00:48:04,240 it's just got to be there nowadays. 973 00:48:04,240 --> 00:48:06,782 It's like a little breadcrumb at the beginning of a file that 974 00:48:06,782 --> 00:48:11,830 says to the browser, you are about to see a file written in HTML version 5. 975 00:48:11,830 --> 00:48:14,808 That line of code has changed over time, over the years. 976 00:48:14,808 --> 00:48:17,350 The most recent version of it is nice and succinct like this, 977 00:48:17,350 --> 00:48:20,380 and it's just a clue to the browser as to what version of HTML 978 00:48:20,380 --> 00:48:22,690 is being used by you, the programmer. 979 00:48:22,690 --> 00:48:24,590 All right, what comes after that? 980 00:48:24,590 --> 00:48:27,400 Well, after that, and I've highlighted two things in yellow, 981 00:48:27,400 --> 00:48:30,250 this is what we're going to start calling an open tag, 982 00:48:30,250 --> 00:48:34,720 or a start tag, open bracket HTML then something, close bracket, 983 00:48:34,720 --> 00:48:36,800 is the so-called start or open tag. 984 00:48:36,800 --> 00:48:39,550 Then the corresponding close or end tag is down here. 985 00:48:39,550 --> 00:48:40,900 And it's almost the same. 986 00:48:40,900 --> 00:48:44,060 You use the same tag number, you use the same angled brackets. 987 00:48:44,060 --> 00:48:46,930 But you do add a slash, and you don't repeat yourself 988 00:48:46,930 --> 00:48:49,840 with any of the things called attributes, 989 00:48:49,840 --> 00:48:51,580 because, what is this thing here? 990 00:48:51,580 --> 00:48:54,700 Lang equals quote unquote "en," means the language 991 00:48:54,700 --> 00:48:57,440 of my page is written in the English language. 992 00:48:57,440 --> 00:49:00,580 The humans have standardized two and three letter codes 993 00:49:00,580 --> 00:49:03,260 for every human language, right now. 994 00:49:03,260 --> 00:49:06,940 And so this is just a clue to the browser for like automatic translation 995 00:49:06,940 --> 00:49:10,210 and accessibility purposes, what language the web page 996 00:49:10,210 --> 00:49:11,140 itself is written in. 997 00:49:11,140 --> 00:49:14,470 Not the tags, but the words, like Hello, title and Hello, body, 998 00:49:14,470 --> 00:49:16,990 which while minimalist, are indeed in English. 999 00:49:16,990 --> 00:49:19,950 So when you close a tag, you close the name of it with the slash 1000 00:49:19,950 --> 00:49:20,920 and the angle brackets. 1001 00:49:20,920 --> 00:49:23,128 You don't repeat the attribute. 1002 00:49:23,128 --> 00:49:25,670 That would just be annoying to have to type everything again. 1003 00:49:25,670 --> 00:49:26,837 But notice the pattern here. 1004 00:49:26,837 --> 00:49:28,070 It's new syntax. 1005 00:49:28,070 --> 00:49:31,360 But this is another example of key value pairs in computing. 1006 00:49:31,360 --> 00:49:35,440 The key is Lang, the value is E-N for English. 1007 00:49:35,440 --> 00:49:37,990 The attribute is called Lang, the value is 1008 00:49:37,990 --> 00:49:41,950 called, it is E-N. So again, it's just key value pairs, 1009 00:49:41,950 --> 00:49:43,360 in just yet another context. 1010 00:49:43,360 --> 00:49:45,490 Probably the browser's using a hash table underneath the hood, 1011 00:49:45,490 --> 00:49:48,615 to keep track of this stuff, like a two column table, with keys and values. 1012 00:49:48,615 --> 00:49:52,100 Again, humans keep using the same paradigm in different languages. 1013 00:49:52,100 --> 00:49:53,540 What's inside of that? 1014 00:49:53,540 --> 00:49:56,050 The nesting is important visually, not to the computer, 1015 00:49:56,050 --> 00:49:58,300 but to us, the humans, because it implies 1016 00:49:58,300 --> 00:49:59,780 that there's some hierarchy here. 1017 00:49:59,780 --> 00:50:03,590 And, indeed, what is inside of the HTML tag here? 1018 00:50:03,590 --> 00:50:06,700 Well, we have what we'll call the head tag. 1019 00:50:06,700 --> 00:50:10,060 The head tag says, hey, browser, here comes the head of the page. 1020 00:50:10,060 --> 00:50:12,327 And then the body tag says, hey, browser, 1021 00:50:12,327 --> 00:50:13,660 here comes the body of the page. 1022 00:50:13,660 --> 00:50:17,710 The body is like 99% of the user's experience, the big rectangular window. 1023 00:50:17,710 --> 00:50:21,340 The head is really just the address bar and other such stuff at top, 1024 00:50:21,340 --> 00:50:24,100 like the title that we saw a moment ago. 1025 00:50:24,100 --> 00:50:28,540 Just to introduce the vernacular, then, the HTML tag, otherwise known 1026 00:50:28,540 --> 00:50:33,010 as an element, has two children, the head child and the body child, 1027 00:50:33,010 --> 00:50:35,770 which is to say that head and body are now siblings. 1028 00:50:35,770 --> 00:50:38,920 So you can use the same kind of family tree terminology that we used, 1029 00:50:38,920 --> 00:50:41,230 when talking about trees, weeks ago. 1030 00:50:41,230 --> 00:50:45,610 If we look at the head tag, how many children does it seem to have? 1031 00:50:45,610 --> 00:50:48,400 I'm seeing one, and, indeed, at least if we 1032 00:50:48,400 --> 00:50:52,660 ignore all the white space, the spaces or tabs or new line characters, 1033 00:50:52,660 --> 00:50:54,880 there's just one child, a title element. 1034 00:50:54,880 --> 00:50:58,840 And an element is the terminology that includes the start tag and the end tag, 1035 00:50:58,840 --> 00:51:00,230 and everything in between. 1036 00:51:00,230 --> 00:51:02,050 So this is the title element. 1037 00:51:02,050 --> 00:51:05,620 And the title element has one child, which is just pure text, 1038 00:51:05,620 --> 00:51:07,600 otherwise known as a text node. 1039 00:51:07,600 --> 00:51:10,720 Recall, node, from our discussions of data structures weeks ago. 1040 00:51:10,720 --> 00:51:14,770 If we jump then to the body, which is the other child of the HTML tag, 1041 00:51:14,770 --> 00:51:18,730 it too has one child, which is just another chunk of text, a text node, 1042 00:51:18,730 --> 00:51:21,100 that says, quote unquote "Hello, body." 1043 00:51:21,100 --> 00:51:24,850 What's nice about this indentation, even though the browser technically 1044 00:51:24,850 --> 00:51:29,120 is not going to care, is that it implies this kind of structure. 1045 00:51:29,120 --> 00:51:32,710 And this is where we connect, like weeks 5 and now weeks 8, here 1046 00:51:32,710 --> 00:51:37,090 is the tree structure we began to talk about, even in our world of C. 1047 00:51:37,090 --> 00:51:39,393 It's not a binary tree, even though this one happens 1048 00:51:39,393 --> 00:51:40,810 to have no more than two children. 1049 00:51:40,810 --> 00:51:44,770 It's an arbitrary tree that can have 0 or any number of children. 1050 00:51:44,770 --> 00:51:47,650 But if we have a special node here that refers to the document, 1051 00:51:47,650 --> 00:51:50,890 the root node, so to speak, is HTML, drawn with a rectangle 1052 00:51:50,890 --> 00:51:52,480 here, just for discussion's sake. 1053 00:51:52,480 --> 00:51:55,330 It has two children, head and body, also rectangles. 1054 00:51:55,330 --> 00:51:58,660 Head has a title child, and then it and body 1055 00:51:58,660 --> 00:52:01,670 have text nodes, which I've drawn with ovals instead. 1056 00:52:01,670 --> 00:52:05,110 Which is only to say that when your browser, Chrome, Safari, whatever, 1057 00:52:05,110 --> 00:52:07,570 downloads a web page, opens up that envelope, 1058 00:52:07,570 --> 00:52:10,580 and sees the contents that have come back from the server, 1059 00:52:10,580 --> 00:52:14,030 it essentially reads the code that someone wrote, 1060 00:52:14,030 --> 00:52:16,440 the HTML code, top to bottom, left to right, 1061 00:52:16,440 --> 00:52:20,210 and creates in the browser's memory, in your Mac or your PC 1062 00:52:20,210 --> 00:52:24,050 or your phone's memory or RAM, this kind of data structure. 1063 00:52:24,050 --> 00:52:25,940 That's what's going on underneath the hood. 1064 00:52:25,940 --> 00:52:28,400 And that's why aesthetically, it's just nice, as a human, 1065 00:52:28,400 --> 00:52:31,610 to indent things stylistically, because it's very clear then 1066 00:52:31,610 --> 00:52:36,510 to you, and to other programmers, what the structure actually is. 1067 00:52:36,510 --> 00:52:39,920 So that's it for like the fundamentals of HTML. 1068 00:52:39,920 --> 00:52:42,260 We'll see a bunch of tags and a bunch of examples now. 1069 00:52:42,260 --> 00:52:44,490 But HTML is just tags and attributes. 1070 00:52:44,490 --> 00:52:47,240 And it's the kind of thing that you look them up when you need to. 1071 00:52:47,240 --> 00:52:48,950 Eventually, many of them get ingrained. 1072 00:52:48,950 --> 00:52:51,747 I constantly check the reference guides or stack overflow 1073 00:52:51,747 --> 00:52:54,080 if I'm trying to figure out, how do I lay something out. 1074 00:52:54,080 --> 00:52:55,872 It's really just these building blocks that 1075 00:52:55,872 --> 00:52:58,940 allow you to assemble the structure of a web page. 1076 00:52:58,940 --> 00:53:02,360 This one is being super simple, but it's just tags and attributes. 1077 00:53:02,360 --> 00:53:04,910 Any questions on this framework, before we 1078 00:53:04,910 --> 00:53:09,297 start to add more tags, more vocabulary, if you will? 1079 00:53:09,297 --> 00:53:10,130 In the middle, yeah. 1080 00:53:10,130 --> 00:53:13,110 AUDIENCE: What would happen if we put the title tag? 1081 00:53:13,110 --> 00:53:16,900 SPEAKER 1: If we put the hello tag around body, that's a good question. 1082 00:53:16,900 --> 00:53:17,560 Let's try it. 1083 00:53:17,560 --> 00:53:24,060 So let me actually go to this, and say open bracket title, 1084 00:53:24,060 --> 00:53:27,270 whoops, sometimes you don't want it to finish your thought for you. 1085 00:53:27,270 --> 00:53:28,410 But it did that time. 1086 00:53:28,410 --> 00:53:30,840 I've gone ahead and changed the file. 1087 00:53:30,840 --> 00:53:34,170 Let me go and open up, give me a second to open my terminal window, 1088 00:53:34,170 --> 00:53:38,220 and go back to the URL that has my page. 1089 00:53:38,220 --> 00:53:40,440 Give me a second. 1090 00:53:40,440 --> 00:53:42,000 There's my Hello.html. 1091 00:53:42,000 --> 00:53:43,570 Let me zoom in on this. 1092 00:53:43,570 --> 00:53:44,970 Let me zoom in on this. 1093 00:53:44,970 --> 00:53:49,700 And let me go ahead now and click on Hello.html. 1094 00:53:49,700 --> 00:53:53,160 And in this case, it looks like we don't actually see anything. 1095 00:53:53,160 --> 00:53:54,440 So the browser is hiding it. 1096 00:53:54,440 --> 00:53:57,860 Technically speaking, browsers tend to be pretty generous. 1097 00:53:57,860 --> 00:54:00,140 And half the time, when you make mistakes in HTML, 1098 00:54:00,140 --> 00:54:01,910 it will display, it might display-- 1099 00:54:01,910 --> 00:54:03,245 not display as you intend it. 1100 00:54:03,245 --> 00:54:06,830 It might not display the same on Macs or PCs or Chrome or on Firefox. 1101 00:54:06,830 --> 00:54:09,020 There is a tool, though, that we'll see, that 1102 00:54:09,020 --> 00:54:10,850 can help answer this question for you. 1103 00:54:10,850 --> 00:54:14,840 For instance, if I go to Validator.w3.org, 1104 00:54:14,840 --> 00:54:16,880 W3 is the World Wide Web Consortium, a group 1105 00:54:16,880 --> 00:54:19,040 of people that standardize this kind of stuff, 1106 00:54:19,040 --> 00:54:21,440 I can click on Validate by direct input, and just 1107 00:54:21,440 --> 00:54:25,220 copy paste my sample HTML into this box, and click Check. 1108 00:54:25,220 --> 00:54:27,860 And I should see, hopefully, that indeed, it's 1109 00:54:27,860 --> 00:54:29,480 an error, what you proposed that I do. 1110 00:54:29,480 --> 00:54:31,552 The browser just did its best to do something, 1111 00:54:31,552 --> 00:54:34,760 which was to show me nothing at least, rather than the incorrect information. 1112 00:54:34,760 --> 00:54:38,300 But if I revert that change, and let me undo what we just did, 1113 00:54:38,300 --> 00:54:43,220 let me copy my original code back into this text box, and click Check, 1114 00:54:43,220 --> 00:54:45,640 now you can see, conversely, my code is now correct. 1115 00:54:45,640 --> 00:54:47,390 And there's automated tools to check that. 1116 00:54:47,390 --> 00:54:49,682 But we'll encourage you, for problem sets and projects, 1117 00:54:49,682 --> 00:54:52,640 to use that particular manual tool. 1118 00:54:52,640 --> 00:54:55,430 All right, so let's go ahead and enhance this a little bit 1119 00:54:55,430 --> 00:54:57,380 by introducing a whole bunch of tags, just 1120 00:54:57,380 --> 00:54:59,760 to give you a sense of some of the building blocks here. 1121 00:54:59,760 --> 00:55:05,100 So I'm going to go ahead and create a new file called Paragraphs.html. 1122 00:55:05,100 --> 00:55:08,100 And I'm just going to do a bunch of copy/paste just to start things off, 1123 00:55:08,100 --> 00:55:11,240 so I'm not constantly typing all this darn stuff again and again, 1124 00:55:11,240 --> 00:55:13,220 because I want everything to be the same here, 1125 00:55:13,220 --> 00:55:16,250 except I'm going to change my title to be Paragraphs for this demo. 1126 00:55:16,250 --> 00:55:19,837 And inside of the body, I need a whole bunch of paragraphs of text. 1127 00:55:19,837 --> 00:55:21,920 And I don't really want to come up with some text. 1128 00:55:21,920 --> 00:55:25,490 So let me go to some random website here and grab lorem ipsum text, 1129 00:55:25,490 --> 00:55:28,860 which if you're involved in like student newspaper or just design, 1130 00:55:28,860 --> 00:55:32,390 this is placeholder text, kind of looks like Latin, but technically isn't. 1131 00:55:32,390 --> 00:55:35,930 Here, though, I have a handy way of just getting three long paragraphs 1132 00:55:35,930 --> 00:55:37,610 in something that looks like Latin. 1133 00:55:37,610 --> 00:55:39,820 And I've put those, notice, inside of the body. 1134 00:55:39,820 --> 00:55:40,820 And they're indeed long. 1135 00:55:40,820 --> 00:55:43,920 Look how long the made-up words here are. 1136 00:55:43,920 --> 00:55:50,060 So let me go now into my browser tab here. 1137 00:55:50,060 --> 00:55:54,110 Let me reload this page, and you'll see two files have now appeared, 1138 00:55:54,110 --> 00:55:56,810 Paragraphs.html, which is my new one, and Hello.html. 1139 00:55:56,810 --> 00:56:02,160 Let me click on Paragraphs.html, and what clearly seems to be wrong? 1140 00:56:02,160 --> 00:56:02,660 Yeah. 1141 00:56:02,660 --> 00:56:03,980 AUDIENCE: One paragraph. 1142 00:56:03,980 --> 00:56:06,980 SPEAKER 1: Yeah, it's obviously one massive paragraph, instead of three. 1143 00:56:06,980 --> 00:56:11,570 So that's interesting, but it's just a little hint as to how pedantic HTML is. 1144 00:56:11,570 --> 00:56:12,950 It will only do what you say. 1145 00:56:12,950 --> 00:56:16,220 And each of these tags tells the browser to start doing something, 1146 00:56:16,220 --> 00:56:19,610 and then maybe stop doing something, like, hey, browser, here comes my HTML. 1147 00:56:19,610 --> 00:56:21,485 Hey, browser, here comes the head of my page. 1148 00:56:21,485 --> 00:56:24,020 Hey, browser, here comes the title of my page, Hello, title. 1149 00:56:24,020 --> 00:56:25,850 Hey, browser, that's it for the title. 1150 00:56:25,850 --> 00:56:28,470 That's it for the head, here comes the body tag. 1151 00:56:28,470 --> 00:56:31,220 So it's kind of having this conversation between the browser, 1152 00:56:31,220 --> 00:56:34,280 between the HTML and the browser, doing literally what it says. 1153 00:56:34,280 --> 00:56:36,530 So if you want a paragraph, you're probably 1154 00:56:36,530 --> 00:56:39,290 going to want to use the P tag for paragraph. 1155 00:56:39,290 --> 00:56:42,450 And I'm going to go ahead and add this to my code. 1156 00:56:42,450 --> 00:56:45,200 I'm going to keep things neat, even though the browser won't care, 1157 00:56:45,200 --> 00:56:46,880 by indenting things here. 1158 00:56:46,880 --> 00:56:50,840 Let me create another paragraph tag here, and close it 1159 00:56:50,840 --> 00:56:53,330 right after that one, indenting again, and I'm 1160 00:56:53,330 --> 00:56:55,040 keeping everything nice and orderly. 1161 00:56:55,040 --> 00:56:57,210 Let me do one more here. 1162 00:56:57,210 --> 00:57:02,700 Let me indent that, and then let me add it to the end of my page here. 1163 00:57:02,700 --> 00:57:06,480 So again, a little tedious, but now I have three paragraphs of text that say, 1164 00:57:06,480 --> 00:57:07,910 hey, browser, start a paragraph. 1165 00:57:07,910 --> 00:57:09,530 Hey, browser, stop that paragraph. 1166 00:57:09,530 --> 00:57:11,490 Start, stop, and so forth. 1167 00:57:11,490 --> 00:57:13,770 Let me go back to the browser window here. 1168 00:57:13,770 --> 00:57:17,300 Let me hit Command R or Control R to reload the page. 1169 00:57:17,300 --> 00:57:20,540 And voila, now I have three cleaner paragraphs, all right? 1170 00:57:20,540 --> 00:57:22,370 So there's a P tag for paragraphs. 1171 00:57:22,370 --> 00:57:24,380 So now we have that particular building block. 1172 00:57:24,380 --> 00:57:27,647 What if I want to add, for instance, some headings to this page? 1173 00:57:27,647 --> 00:57:29,480 Well, that's something that's possible, too. 1174 00:57:29,480 --> 00:57:32,960 Let me go ahead and create a new file called Headings.html. 1175 00:57:32,960 --> 00:57:35,720 Let me copy and paste that same code as before. 1176 00:57:35,720 --> 00:57:39,830 But now, let's preface each paragraph with maybe H1. 1177 00:57:39,830 --> 00:57:42,290 And I'm going to just write the word one. 1178 00:57:42,290 --> 00:57:45,260 And here I'm going to say H2, two. 1179 00:57:45,260 --> 00:57:48,380 And down here I might say H3, three. 1180 00:57:48,380 --> 00:57:52,993 So this is another tag, another three tags, H1, H2, H3. 1181 00:57:52,993 --> 00:57:55,160 As you might have inferred by the file name I chose, 1182 00:57:55,160 --> 00:57:59,150 this just gives you headings, like in a book, different chapters or sections 1183 00:57:59,150 --> 00:58:01,220 or subsections, or in an academic paper, you 1184 00:58:01,220 --> 00:58:03,990 have different hierarchies to the text that you're writing. 1185 00:58:03,990 --> 00:58:08,270 So now that I've added an H1 tag, and the word one, H2 tag, the word 1186 00:58:08,270 --> 00:58:11,300 two, H3 tag and the word three, let's go back to the browser, 1187 00:58:11,300 --> 00:58:16,040 reload the page again, and voila, once the page 1188 00:58:16,040 --> 00:58:20,960 reloads, I'll do it with the manual button, reload the page. 1189 00:58:20,960 --> 00:58:23,640 Oh, what am I doing wrong? 1190 00:58:23,640 --> 00:58:24,140 Yeah. 1191 00:58:24,140 --> 00:58:25,432 AUDIENCE: Not in headings file. 1192 00:58:25,432 --> 00:58:27,390 SPEAKER 1: Right, I'm not in the headings file. 1193 00:58:27,390 --> 00:58:28,710 So let me go back a page. 1194 00:58:28,710 --> 00:58:30,230 Now there's Headings.html. 1195 00:58:30,230 --> 00:58:31,410 Let me click on that. 1196 00:58:31,410 --> 00:58:33,110 OK, now we see some evidence of this. 1197 00:58:33,110 --> 00:58:34,730 Again, it's nonsensical content. 1198 00:58:34,730 --> 00:58:37,790 But you can kind of see that H1 is apparently big and bold, 1199 00:58:37,790 --> 00:58:40,730 H2 is slightly less big, but still bold. 1200 00:58:40,730 --> 00:58:42,560 H3 is the same but a little smaller. 1201 00:58:42,560 --> 00:58:44,175 And it goes all the way down to H6. 1202 00:58:44,175 --> 00:58:46,550 After that, you should probably reorganize your thoughts. 1203 00:58:46,550 --> 00:58:48,440 But there are six different hierarchies here, 1204 00:58:48,440 --> 00:58:52,640 as you might use for chapters, sections, subsections, and so forth, all right? 1205 00:58:52,640 --> 00:58:56,870 So those are headings, as an HTML tag, in our vocabulary. 1206 00:58:56,870 --> 00:59:03,710 What's a common thing, too, well, let me go to VS Code again, let me go ahead 1207 00:59:03,710 --> 00:59:08,660 and get some boilerplate here, create a file called List.html. 1208 00:59:08,660 --> 00:59:11,450 Let's create a simple list inside of my body, 1209 00:59:11,450 --> 00:59:14,330 and I'll give this a title of List. 1210 00:59:14,330 --> 00:59:17,340 And let me fix the title of this one to be Headings, as well. 1211 00:59:17,340 --> 00:59:22,980 So in List.html, suppose I want to have a list of things, foo, bar, and baths, 1212 00:59:22,980 --> 00:59:24,980 they're like a computer scientist's go-to words, 1213 00:59:24,980 --> 00:59:27,110 just like a mathematician might say xyz. 1214 00:59:27,110 --> 00:59:29,930 Foo, bar, baths is in List.html. 1215 00:59:29,930 --> 00:59:33,800 Let me go back to my browser, hit the Back button. 1216 00:59:33,800 --> 00:59:37,730 There's List.html, and, hopefully, I'll see foo, bar, and baths, one 1217 00:59:37,730 --> 00:59:41,700 on each line like a nice little list, but, of course, I do not. 1218 00:59:41,700 --> 00:59:42,770 And this is not English. 1219 00:59:42,770 --> 00:59:44,810 Chrome thinks it might be Arabic. 1220 00:59:44,810 --> 00:59:48,557 But that's curious, too, because the Lang attribute 1221 00:59:48,557 --> 00:59:49,640 should be overriding that. 1222 00:59:49,640 --> 00:59:51,832 So Google is trying to override it. 1223 00:59:51,832 --> 00:59:53,540 All right, what's the obvious explanation 1224 00:59:53,540 --> 00:59:56,570 why we're seeing foo, bar, and baths on the same line, and not 1225 00:59:56,570 --> 00:59:57,740 three separate ones? 1226 00:59:57,740 --> 00:59:59,150 AUDIENCE: We didn't tell it. 1227 00:59:59,150 --> 01:00:00,817 SPEAKER 1: We didn't tell it to do that. 1228 01:00:00,817 --> 01:00:03,080 So we need paragraph tags, or maybe something else. 1229 01:00:03,080 --> 01:00:04,730 Turns out there is something else. 1230 01:00:04,730 --> 01:00:08,780 There is a UL tag, for an unordered list in HTML, 1231 01:00:08,780 --> 01:00:12,405 inside of which you can have LI tags, for list item, 1232 01:00:12,405 --> 01:00:14,030 inside of which you can put your words. 1233 01:00:14,030 --> 01:00:17,670 So there's my foo, there's my bar, there's my baths. 1234 01:00:17,670 --> 01:00:20,480 And, again, notice that VS Code is finishing my thought for me. 1235 01:00:20,480 --> 01:00:25,220 But notice the hierarchy, open UL, open LI, close LI, open LI, 1236 01:00:25,220 --> 01:00:28,580 close LI, open LI, close LI, close UL. 1237 01:00:28,580 --> 01:00:30,950 So it's sort of done in reverse order here. 1238 01:00:30,950 --> 01:00:36,980 Let me go back to my browser, reload the same page, List.html, and voila, 1239 01:00:36,980 --> 01:00:40,190 a default bulleted list, that still seems to be in Arabic. 1240 01:00:40,190 --> 01:00:41,960 What if I want this list to be numbered? 1241 01:00:41,960 --> 01:00:43,610 Well, you can probably guess. 1242 01:00:43,610 --> 01:00:47,180 If you don't want an unordered list, but an ordered list, what tag should I use? 1243 01:00:47,180 --> 01:00:48,470 AUDIENCE: OL. 1244 01:00:48,470 --> 01:00:50,450 SPEAKER 1: OL, sure, so let's try that. 1245 01:00:50,450 --> 01:00:53,120 Not always that easy as just guessing, but in this case, 1246 01:00:53,120 --> 01:00:54,870 OL is going to do the trick. 1247 01:00:54,870 --> 01:00:56,390 Let me go back to my other browser. 1248 01:00:56,390 --> 01:00:59,473 Let me reload the page, and now it's going to automatically number for me. 1249 01:00:59,473 --> 01:01:01,920 It's a tiny thing, but this is actually useful 1250 01:01:01,920 --> 01:01:04,260 if you have a very long list of data, and maybe you 1251 01:01:04,260 --> 01:01:06,420 might add some things in the middle, the beginning, or the end. 1252 01:01:06,420 --> 01:01:08,753 It would just be annoying to have to go and renumber it. 1253 01:01:08,753 --> 01:01:11,580 The computer is doing it for us by, instead, just 1254 01:01:11,580 --> 01:01:13,960 numbering from top to bottom here. 1255 01:01:13,960 --> 01:01:16,020 All right, what about another type of layout, 1256 01:01:16,020 --> 01:01:18,767 not just paragraphs, not just lists, but what about tabular data? 1257 01:01:18,767 --> 01:01:20,850 You've got some research data you want to present, 1258 01:01:20,850 --> 01:01:24,142 some financial data you want to present, a phone book that you want to present. 1259 01:01:24,142 --> 01:01:27,030 How might we go about laying out data, a la a table? 1260 01:01:27,030 --> 01:01:30,030 Well, let me create a file called Table.html, 1261 01:01:30,030 --> 01:01:32,730 and I'll just copy paste where we started earlier. 1262 01:01:32,730 --> 01:01:35,100 Let me start to close some of these other files. 1263 01:01:35,100 --> 01:01:38,497 And in Table.html, this is going to be a bit more HTML, 1264 01:01:38,497 --> 01:01:40,080 but I'm going to go ahead and do this. 1265 01:01:40,080 --> 01:01:44,400 Table and close table, tables can have table headings. 1266 01:01:44,400 --> 01:01:49,690 So T head is the name of that tag, and tables can have T bodies, table bodies. 1267 01:01:49,690 --> 01:01:50,970 So I'm going to add that tag. 1268 01:01:50,970 --> 01:01:53,428 And this is a common technique, sort of start your thought, 1269 01:01:53,428 --> 01:01:56,530 finish your thought, and then go back and fill in what's in between. 1270 01:01:56,530 --> 01:01:58,110 What do I want to put in this table? 1271 01:01:58,110 --> 01:02:02,200 How about a bunch of names and numbers. 1272 01:02:02,200 --> 01:02:06,160 So, for instance, like left column name, right column number. 1273 01:02:06,160 --> 01:02:09,450 So let's create a table row, with what's called the TR tag. 1274 01:02:09,450 --> 01:02:14,190 Let's create a table heading with the TH tag, and let's say name here. 1275 01:02:14,190 --> 01:02:18,070 Let's create another table heading called number here. 1276 01:02:18,070 --> 01:02:21,420 And all of that, to be clear, is in one table row. 1277 01:02:21,420 --> 01:02:25,140 Meanwhile, in the table body, let me create another table row, 1278 01:02:25,140 --> 01:02:26,910 but this time, it's not a heading. 1279 01:02:26,910 --> 01:02:28,390 Now I'm in the guts of my table. 1280 01:02:28,390 --> 01:02:31,980 Let's do table data, which is synonymous with like the cell of the table, 1281 01:02:31,980 --> 01:02:34,680 in like an Excel spreadsheet or Google spreadsheet. 1282 01:02:34,680 --> 01:02:37,530 In this TD, I'm going to say like Carter's name, 1283 01:02:37,530 --> 01:02:43,290 and then lets grab Carter's number from our past demo, 617-495-1000. 1284 01:02:43,290 --> 01:02:47,020 Then let's put me into the mix, and I'll go ahead and copy paste here, 1285 01:02:47,020 --> 01:02:48,150 which often is not good. 1286 01:02:48,150 --> 01:02:51,270 But we'll see that there's a lot of shared structure with HTML. 1287 01:02:51,270 --> 01:02:57,580 Let me go ahead and do mine, 949-468-2750, and now save this page. 1288 01:02:57,580 --> 01:03:00,000 So we're getting to be a lot of indentation. 1289 01:03:00,000 --> 01:03:03,520 I'm using four spaces by default. Some people use two spaces by default. 1290 01:03:03,520 --> 01:03:06,000 So long as you're consistent, that's considered good style. 1291 01:03:06,000 --> 01:03:08,790 But let me go back to my browser here, and hit back. 1292 01:03:08,790 --> 01:03:11,040 That then brings me to my directory listing again. 1293 01:03:11,040 --> 01:03:14,370 Here's Table.html, and this is not that interesting yet. 1294 01:03:14,370 --> 01:03:17,340 But you can see that there's two columns, name and number. 1295 01:03:17,340 --> 01:03:22,110 Because it's a table heading, TH, the browser made it boldfaced for me. 1296 01:03:22,110 --> 01:03:25,920 In there, in the table, are two rows below that, Carter and David. 1297 01:03:25,920 --> 01:03:29,070 It's a little, oh, I forgot my number one, sorry about that. 1298 01:03:29,070 --> 01:03:32,005 One and one, it's not the prettiest table, right? 1299 01:03:32,005 --> 01:03:33,880 I feel like I kind of want to separate things 1300 01:03:33,880 --> 01:03:35,963 a little more, maybe put some borders or the like. 1301 01:03:35,963 --> 01:03:40,090 But with HTML alone, I'm really focusing on the structure alone. 1302 01:03:40,090 --> 01:03:41,710 So we'll make this prettier soon. 1303 01:03:41,710 --> 01:03:45,140 But for now, this is how you might lay out tabular data. 1304 01:03:45,140 --> 01:03:47,890 All right, let me pause here just to see if there's any questions. 1305 01:03:47,890 --> 01:03:50,220 But, again, the goal right now is just to kind of throw at you 1306 01:03:50,220 --> 01:03:53,610 some basic building blocks, that, again, can be easily looked up in a reference. 1307 01:03:53,610 --> 01:03:57,480 But we're going to start stylizing these things soon, too. 1308 01:03:57,480 --> 01:03:58,350 Yeah, in the middle. 1309 01:03:58,350 --> 01:03:59,500 AUDIENCE: How to indent? 1310 01:03:59,500 --> 01:04:01,195 SPEAKER 1: How do you indent paragraphs? 1311 01:04:01,195 --> 01:04:02,070 Really good question. 1312 01:04:02,070 --> 01:04:03,630 For that, we'll probably going to want something 1313 01:04:03,630 --> 01:04:05,117 called CSS, Cascading Style Sheets. 1314 01:04:05,117 --> 01:04:07,200 So let me come back to that, in just a little bit. 1315 01:04:07,200 --> 01:04:10,590 For the stylization of these things, beyond the basics, like big and bold, 1316 01:04:10,590 --> 01:04:13,980 we're going to need a different language altogether. 1317 01:04:13,980 --> 01:04:16,980 All right, well, let's now create what the web 1318 01:04:16,980 --> 01:04:21,510 is full of, which is like photographs and images and the like. 1319 01:04:21,510 --> 01:04:26,640 Let me go ahead and create a new file called Image.html, and let me go ahead 1320 01:04:26,640 --> 01:04:29,590 and change the title here to be, say, Image. 1321 01:04:29,590 --> 01:04:32,997 And then, in the body of this page, let's go ahead and put an image. 1322 01:04:32,997 --> 01:04:35,580 The interesting thing about an image is that it's actually not 1323 01:04:35,580 --> 01:04:39,060 going to have a start tag and an end tag, because that's kind of illogical. 1324 01:04:39,060 --> 01:04:42,090 Like, how can you start an image and then eventually finish it? 1325 01:04:42,090 --> 01:04:43,710 It's either there or it isn't. 1326 01:04:43,710 --> 01:04:46,350 So some tags do not have end tags. 1327 01:04:46,350 --> 01:04:52,890 So let me do image, IMG, source equals Harvard.jpeg. 1328 01:04:52,890 --> 01:04:55,710 And let me go ahead, and, in my terminal window, 1329 01:04:55,710 --> 01:04:58,110 I actually came with a photo of Harvard. 1330 01:04:58,110 --> 01:05:01,560 Let me grab this for just a second. 1331 01:05:01,560 --> 01:05:04,980 Let me grab Harvard.jpeg and put it into my directory, 1332 01:05:04,980 --> 01:05:07,630 pretend that I downloaded that in advance. 1333 01:05:07,630 --> 01:05:10,230 And so I'm referring to now a file called 1334 01:05:10,230 --> 01:05:15,840 Harvard.jpeg, that apparently is in the same folder as my Image.html file. 1335 01:05:15,840 --> 01:05:19,020 If this image were on the internet, like Harvard server, 1336 01:05:19,020 --> 01:05:25,210 I could also say like HTTPS://www.Harvard.edu/FolderName, 1337 01:05:25,210 --> 01:05:29,370 whatever it is, /Harvard.jpeg, but if you've in advance uploaded a file 1338 01:05:29,370 --> 01:05:32,580 to your own, the Scode environment, like I did before class, 1339 01:05:32,580 --> 01:05:35,880 by dragging and dropping this whole file, this photo of Harvard, 1340 01:05:35,880 --> 01:05:39,210 you can just refer to it relatively, so to speak. 1341 01:05:39,210 --> 01:05:42,330 This would be the same thing as saying ./Harvard.jpeg, 1342 01:05:42,330 --> 01:05:45,750 go to the current directory and get the file called Harvard.jpeg. 1343 01:05:45,750 --> 01:05:47,670 But that's unnecessary to type. 1344 01:05:47,670 --> 01:05:51,270 For accessibility purposes, though, for someone who's vision-impaired, 1345 01:05:51,270 --> 01:05:54,930 it's ideal if we also give this an alternative text, something 1346 01:05:54,930 --> 01:05:58,830 like Harvard University, in the so-called Alt tag, 1347 01:05:58,830 --> 01:06:01,140 and this is so that screen readers will recite 1348 01:06:01,140 --> 01:06:03,390 what it is the photo is, for folks who can't see it. 1349 01:06:03,390 --> 01:06:05,880 And if you're just on a slow connection, sometimes you'll 1350 01:06:05,880 --> 01:06:07,860 see the text of what you're about to see, 1351 01:06:07,860 --> 01:06:11,410 before the image itself downloads, especially on a mobile device. 1352 01:06:11,410 --> 01:06:16,050 So let's now go back to my open browser tab, and let's look in the directory. 1353 01:06:16,050 --> 01:06:20,340 I now have Harvard.jpeg, which I downloaded in advance, and Image.html. 1354 01:06:20,340 --> 01:06:24,060 Let me click on Image.html, and here we have 1355 01:06:24,060 --> 01:06:28,980 a really big picture of Memorial Hall, the building we're currently in. 1356 01:06:28,980 --> 01:06:33,570 Suffice it to say I should probably fix this and maybe make it only so wide. 1357 01:06:33,570 --> 01:06:37,080 But to do that, we're going to probably want to use this other language, CSS. 1358 01:06:37,080 --> 01:06:40,650 There are some historical attributes that you can still 1359 01:06:40,650 --> 01:06:43,092 use to control width and height, and so forth. 1360 01:06:43,092 --> 01:06:45,300 But we're going to do it the better way, so to speak, 1361 01:06:45,300 --> 01:06:47,850 with a language designed for just that. 1362 01:06:47,850 --> 01:06:49,290 How about a video, though. 1363 01:06:49,290 --> 01:06:54,210 I also came prepared with, let me grab another file here, 1364 01:06:54,210 --> 01:06:59,590 let me grab a file called Halloween.mp4, which is an MPEG file. 1365 01:06:59,590 --> 01:07:06,630 And let me go ahead and change this now to be a file called Video.html. 1366 01:07:06,630 --> 01:07:08,400 I'll change my title to be Video. 1367 01:07:08,400 --> 01:07:11,790 And let's go ahead and now introduce another tag, a video tag, 1368 01:07:11,790 --> 01:07:16,980 open bracket video, and then let me go ahead and close that tag proactively. 1369 01:07:16,980 --> 01:07:21,270 And then inside of the video tag, you can say the source of the video 1370 01:07:21,270 --> 01:07:26,310 is going to be specifically Halloween.mp4, the type of this file, 1371 01:07:26,310 --> 01:07:31,320 I know, is Video/mp4, because I looked up its content type or MIME type. 1372 01:07:31,320 --> 01:07:33,510 And the video tag actually has a few attributes. 1373 01:07:33,510 --> 01:07:35,520 I can have this thing autoplay. 1374 01:07:35,520 --> 01:07:37,200 I can have it loop forever. 1375 01:07:37,200 --> 01:07:40,410 I can mute it, so that there's no sound, which is necessary nowadays. 1376 01:07:40,410 --> 01:07:45,190 Most browsers, to prevent ads, don't autoplay videos, if they have sound. 1377 01:07:45,190 --> 01:07:48,390 So if you mute your video, it will autoplay, but presumably not 1378 01:07:48,390 --> 01:07:49,410 annoy users. 1379 01:07:49,410 --> 01:07:53,740 And let me set the width of this thing to be like, oh, 1280 pixels wide. 1380 01:07:53,740 --> 01:07:55,390 But I can make it any size I want. 1381 01:07:55,390 --> 01:07:59,100 So I know this just from having looked up the syntax for this tag. 1382 01:07:59,100 --> 01:08:00,930 But notice one curiosity. 1383 01:08:00,930 --> 01:08:03,630 Sometimes attributes don't have values. 1384 01:08:03,630 --> 01:08:04,860 They're empty attributes. 1385 01:08:04,860 --> 01:08:08,195 They're just single words, autoplay, loop, muted, 1386 01:08:08,195 --> 01:08:10,320 and that kind of makes sense for any attribute that 1387 01:08:10,320 --> 01:08:12,150 really does what it says. 1388 01:08:12,150 --> 01:08:15,180 Like, it doesn't make sense to say muted equals something. 1389 01:08:15,180 --> 01:08:16,530 Like it's either muted or not. 1390 01:08:16,530 --> 01:08:18,130 The attribute is there or not. 1391 01:08:18,130 --> 01:08:20,170 Similarly, for these others, as well. 1392 01:08:20,170 --> 01:08:23,790 So let me go back to my other browser tab, reload the directory listing. 1393 01:08:23,790 --> 01:08:27,930 There is both my mp4 and also Video.html, 1394 01:08:27,930 --> 01:08:30,010 which is the web page that embeds it. 1395 01:08:30,010 --> 01:08:33,600 And this is actually a video that was just on Harvard's website yesterday, 1396 01:08:33,600 --> 01:08:34,750 and it was amazing. 1397 01:08:34,750 --> 01:08:39,030 So we included it in this demo here. 1398 01:08:39,030 --> 01:08:45,600 This is the video that was on Harvard.edu last night, same photo. 1399 01:08:45,600 --> 01:08:47,818 But you can see here that an image alone probably 1400 01:08:47,818 --> 01:08:49,110 would not have the same effect. 1401 01:08:49,110 --> 01:08:52,303 This is actually a movie, a small video file that's now looping. 1402 01:08:52,303 --> 01:08:55,470 Now there's some artifacts here, like there's a white border around the top. 1403 01:08:55,470 --> 01:08:57,303 I feel like it'd be nice to fill the screen. 1404 01:08:57,303 --> 01:09:01,840 But again, we'll come back to a language that can allow us to do exactly that. 1405 01:09:01,840 --> 01:09:04,080 Well, it's not just videos like this, that you 1406 01:09:04,080 --> 01:09:05,790 might want to put into a web page. 1407 01:09:05,790 --> 01:09:10,092 Let me create another file called iFrame.html. 1408 01:09:10,092 --> 01:09:13,050 If you've ever poked around with, if you have your own YouTube account, 1409 01:09:13,050 --> 01:09:16,373 or if you had your own blog or WordPress site, or Wix or Squarespace, 1410 01:09:16,373 --> 01:09:18,540 you might have been in the habit of embedding videos 1411 01:09:18,540 --> 01:09:21,480 in websites, using like embedded YouTube players. 1412 01:09:21,480 --> 01:09:25,170 Well, this is possible, too, using what's called an inline frame, 1413 01:09:25,170 --> 01:09:26,220 an iFrame. 1414 01:09:26,220 --> 01:09:29,340 And an iFrame is just a tag that is literally iFrame. 1415 01:09:29,340 --> 01:09:32,768 It has source equals, and then a URL, and if it 1416 01:09:32,768 --> 01:09:36,060 happens to be a YouTube video, there's a certain URL format you need to follow, 1417 01:09:36,060 --> 01:09:37,620 per YouTube's documentation. 1418 01:09:37,620 --> 01:09:45,460 So you might do www.youtube.com, embed, and then here's an ID of a video. 1419 01:09:45,460 --> 01:09:51,000 So this is essentially what we do, if we want to embed CS50's own lecture 1420 01:09:51,000 --> 01:09:54,210 videos, in the course's website, or the video player does literally this. 1421 01:09:54,210 --> 01:09:57,720 If I want to allow full screen, I can add this attribute, too, 1422 01:09:57,720 --> 01:10:00,470 that I know exists, by just having checked the documentation. 1423 01:10:00,470 --> 01:10:04,529 And if I now go back to my browser here, reload my directory listing, 1424 01:10:04,529 --> 01:10:05,847 there's iFrame.html. 1425 01:10:05,847 --> 01:10:07,680 It's not going to fill the screen, because I 1426 01:10:07,680 --> 01:10:09,569 haven't customized the aesthetics yet. 1427 01:10:09,569 --> 01:10:13,920 But it does seem to embed a tiny little video there for you to play with later, 1428 01:10:13,920 --> 01:10:14,529 if you'd like. 1429 01:10:14,529 --> 01:10:17,609 So we could change the width, change the height, get rid of that margin, 1430 01:10:17,609 --> 01:10:18,279 and so forth. 1431 01:10:18,279 --> 01:10:22,979 But an iFrame is a way of embedding someone else's web page in your web 1432 01:10:22,979 --> 01:10:25,770 page, if they allow it, so as to create all 1433 01:10:25,770 --> 01:10:29,460 the more of an interactive experience for them on, say, your site. 1434 01:10:29,460 --> 01:10:32,460 All right, well, the web is, of course, known for things like links. 1435 01:10:32,460 --> 01:10:35,880 Let's go ahead and create a file called Link.html. 1436 01:10:35,880 --> 01:10:39,390 And if we want to create a web page that actually links from itself somewhere 1437 01:10:39,390 --> 01:10:43,909 else, let's go ahead and do this, something very simple like visit 1438 01:10:43,909 --> 01:10:45,288 Harvard.edu period. 1439 01:10:48,359 --> 01:10:51,990 Now, in like Facebook, Instagram, a lot of websites nowadays, if you just type 1440 01:10:51,990 --> 01:10:54,660 in a domain name, or a fully qualified domain name, 1441 01:10:54,660 --> 01:10:56,580 it automatically becomes a link. 1442 01:10:56,580 --> 01:10:59,970 That's because those websites have code in them that automatically 1443 01:10:59,970 --> 01:11:04,359 detects something that looks like a URL, and turns it into a proper link. 1444 01:11:04,359 --> 01:11:06,260 HTML itself does not do that for you. 1445 01:11:06,260 --> 01:11:10,630 And so if I go back to my web page here, click on Link.html, 1446 01:11:10,630 --> 01:11:13,660 if you type visit Harvard.edu period, that's 1447 01:11:13,660 --> 01:11:15,400 all you're literally going to see. 1448 01:11:15,400 --> 01:11:19,000 But instinctively, even if you've never written HTML before, what should 1449 01:11:19,000 --> 01:11:23,135 we probably do here to solve this problem? 1450 01:11:23,135 --> 01:11:24,760 What could we do to solve this problem. 1451 01:11:24,760 --> 01:11:26,052 What do I probably want to add. 1452 01:11:26,052 --> 01:11:26,614 Yeah. 1453 01:11:26,614 --> 01:11:28,270 AUDIENCE: Surround your-- 1454 01:11:28,270 --> 01:11:31,510 SPEAKER 1: Yeah, so I want to surround the URL with some kind of link text. 1455 01:11:31,510 --> 01:11:34,093 And you wouldn't necessarily know this until someone told you, 1456 01:11:34,093 --> 01:11:37,150 or you looked it up, but the tag for creating a link is somewhat weirdly 1457 01:11:37,150 --> 01:11:39,640 called the A tag for anchor. 1458 01:11:39,640 --> 01:11:43,060 It has an attribute called HREF for hyper-reference, 1459 01:11:43,060 --> 01:11:46,600 which is like a link in the virtual world to a URL. 1460 01:11:46,600 --> 01:11:49,690 So let me type in Harvard's full and proper URL here. 1461 01:11:49,690 --> 01:11:51,910 Then I'm going to close the tag. 1462 01:11:51,910 --> 01:11:57,220 And then I can still say Harvard.edu, and make that what the human sees. 1463 01:11:57,220 --> 01:12:02,770 But the place they're going to go should be a full URL protocol and all, 1464 01:12:02,770 --> 01:12:04,780 HTTP or HTTPS, and all. 1465 01:12:04,780 --> 01:12:07,090 Now if I go back here and reload the page, 1466 01:12:07,090 --> 01:12:09,130 now it automatically gets underlined. 1467 01:12:09,130 --> 01:12:10,900 It happens to be purple by default. Why? 1468 01:12:10,900 --> 01:12:13,100 Because we visited Harvard.edu a few minutes ago. 1469 01:12:13,100 --> 01:12:16,450 So my browser, by default, is indicating in purple that I've been there before. 1470 01:12:16,450 --> 01:12:18,400 But now I have a link that I can click on, 1471 01:12:18,400 --> 01:12:22,690 and if I hover over it but don't click, you'll see that, in most browsers, 1472 01:12:22,690 --> 01:12:26,650 there's a little clue as to where you will go if you click subsequently 1473 01:12:26,650 --> 01:12:27,820 on this link. 1474 01:12:27,820 --> 01:12:29,890 And without going too far down a rabbit hole, 1475 01:12:29,890 --> 01:12:33,280 but to tie together our discussion of cybersecurity recently, 1476 01:12:33,280 --> 01:12:36,670 what if I were to do something like this. 1477 01:12:36,670 --> 01:12:41,140 Right now you have the beginnings of a phishing attack of sorts, 1478 01:12:41,140 --> 01:12:46,090 P-H-I-S-H-I-N-G, whereby you can create clearly a web page, or, heck, 1479 01:12:46,090 --> 01:12:50,350 even an email using HTML, that tells the user they're going to go one place, 1480 01:12:50,350 --> 01:12:53,420 but they're really going to go someplace else altogether. 1481 01:12:53,420 --> 01:12:55,930 And that is the essence of phishing attacks these days. 1482 01:12:55,930 --> 01:12:59,260 If you've ever gotten a bogus email pretending to be from PayPal 1483 01:12:59,260 --> 01:13:01,720 or your bank or some other website, odds are 1484 01:13:01,720 --> 01:13:04,240 they've just written HTML that says whatever they want, 1485 01:13:04,240 --> 01:13:07,850 but the underlying tags might do something very different. 1486 01:13:07,850 --> 01:13:10,600 And so having the instinct to look in the bottom left hand corner, 1487 01:13:10,600 --> 01:13:14,020 or be a little suspicious when you're just told blindly to click on a link, 1488 01:13:14,020 --> 01:13:17,410 it's this easy to socially engineer people, that is, 1489 01:13:17,410 --> 01:13:22,150 deceive them, by just saying one thing and linking to another. 1490 01:13:22,150 --> 01:13:26,380 Well, what if I want to link my page to another page I already created? 1491 01:13:26,380 --> 01:13:29,230 Well, if I want to link to that photo of Harvard, 1492 01:13:29,230 --> 01:13:32,530 I can just do HREF = equals quote unquote and the name of a file, 1493 01:13:32,530 --> 01:13:35,930 in my same account, that is itself a web page. 1494 01:13:35,930 --> 01:13:39,490 So this is how you can create relative links, multi-page web 1495 01:13:39,490 --> 01:13:42,080 pages, multi-page websites, yourself. 1496 01:13:42,080 --> 01:13:45,460 So if I now reload this page, hover over Harvard.edu, 1497 01:13:45,460 --> 01:13:49,000 you'll see in the bottom left hand corner a very long URL. 1498 01:13:49,000 --> 01:13:51,910 But that's because I'm in code spaces right now, VS Code, 1499 01:13:51,910 --> 01:13:55,570 and it's appending automatically to the end of my current URL 1500 01:13:55,570 --> 01:13:57,755 the file name, Image.html. 1501 01:13:57,755 --> 01:13:58,630 But this should work. 1502 01:13:58,630 --> 01:14:01,060 When I click on this, I go immediately to that 1503 01:14:01,060 --> 01:14:04,960 file we created earlier, with a crazy, big version of the image. 1504 01:14:04,960 --> 01:14:07,630 But that's just a way that one page on a website 1505 01:14:07,630 --> 01:14:11,530 can link to another page on a website. 1506 01:14:11,530 --> 01:14:15,520 Let's do one other thing here, making things more responsive, 1507 01:14:15,520 --> 01:14:18,430 because, in fact, that wasn't a particularly responsive website. 1508 01:14:18,430 --> 01:14:21,510 Responsive means responding to the size of the user's device, which 1509 01:14:21,510 --> 01:14:24,010 is so important when someone might be on a screen like this, 1510 01:14:24,010 --> 01:14:25,840 or on a screen like this these days. 1511 01:14:25,840 --> 01:14:30,700 There are special tags we can use to tell the browser to modify its display, 1512 01:14:30,700 --> 01:14:32,080 based on the hardware. 1513 01:14:32,080 --> 01:14:36,190 So let me create a file called Responsive.html. 1514 01:14:36,190 --> 01:14:39,940 I'm going to copy/paste some starting point here, call this title Responsive. 1515 01:14:39,940 --> 01:14:44,560 And let me go ahead and just grab, let me grab some of that lorem ipsum text 1516 01:14:44,560 --> 01:14:50,150 from before, just so that we have a sizable paragraph to play with here. 1517 01:14:50,150 --> 01:14:53,980 And let me go ahead and grab this text here. 1518 01:14:53,980 --> 01:14:57,440 And I'm just going to paste this into the body of this page. 1519 01:14:57,440 --> 01:14:58,220 And that's it. 1520 01:14:58,220 --> 01:15:01,570 So I just have a big paragraph, at the moment, inside of my body. 1521 01:15:01,570 --> 01:15:03,340 Let me go back to my browser. 1522 01:15:03,340 --> 01:15:06,430 Let me open up this file, called Responsive.html, 1523 01:15:06,430 --> 01:15:09,250 to make the point that it is not yet responsive. 1524 01:15:09,250 --> 01:15:11,590 Let me go ahead and click on Responsive.html. 1525 01:15:11,590 --> 01:15:12,770 That looks fine. 1526 01:15:12,770 --> 01:15:16,190 But here's another trick you can do, using Chrome or Edge or other browsers 1527 01:15:16,190 --> 01:15:16,690 these days. 1528 01:15:16,690 --> 01:15:18,730 You can pretend to be another device. 1529 01:15:18,730 --> 01:15:23,140 Let me go to View, developer, developer tools again. 1530 01:15:23,140 --> 01:15:25,588 Last time we used this to use the Network tab, which 1531 01:15:25,588 --> 01:15:28,630 was kind of interesting, because we could see what the underlying network 1532 01:15:28,630 --> 01:15:29,630 traffic is. 1533 01:15:29,630 --> 01:15:32,920 But notice, we can also click on this icon, in Chrome, at least, 1534 01:15:32,920 --> 01:15:34,960 that looks like a mobile phone. 1535 01:15:34,960 --> 01:15:40,007 I can turn my laptop into what looks like a mobile device by clicking this. 1536 01:15:40,007 --> 01:15:43,090 I'm going to click the dot dot dot menu over here, and just move the dock. 1537 01:15:43,090 --> 01:15:45,310 Instead of on the bottom, where it might be by default, 1538 01:15:45,310 --> 01:15:47,090 I'm going to move it to the right hand side. 1539 01:15:47,090 --> 01:15:49,120 So that now on the left, you see what looks more 1540 01:15:49,120 --> 01:15:50,890 like the shape of a vertical phone. 1541 01:15:50,890 --> 01:15:53,650 And, in fact, if I go to my dimensions here, 1542 01:15:53,650 --> 01:15:57,550 I'll choose something like iPhone X, so a few years back. 1543 01:15:57,550 --> 01:16:01,470 Here's what that same website might look like on an iPhone X. You know, 1544 01:16:01,470 --> 01:16:05,130 that looks pretty damn small, to be able to read it. 1545 01:16:05,130 --> 01:16:07,650 And that's because the website has not automatically 1546 01:16:07,650 --> 01:16:11,580 responded to the fairly narrow dimensions of the iPhone 1547 01:16:11,580 --> 01:16:13,780 in question, or Android device, or whatnot. 1548 01:16:13,780 --> 01:16:15,220 So let me go ahead and do this. 1549 01:16:15,220 --> 01:16:17,200 Let me go back into my code. 1550 01:16:17,200 --> 01:16:20,190 And let me go into the head of the page, and for the first time, 1551 01:16:20,190 --> 01:16:21,958 add another tag up here. 1552 01:16:21,958 --> 01:16:24,000 This word is now all over the internet, but there 1553 01:16:24,000 --> 01:16:26,940 is a metatag that is called, that allows you 1554 01:16:26,940 --> 01:16:30,818 to specify the name of some kind of configuration detail here, 1555 01:16:30,818 --> 01:16:31,860 or property, if you will. 1556 01:16:31,860 --> 01:16:34,890 Viewport is the technical term for the rectangular region 1557 01:16:34,890 --> 01:16:36,550 that the human sees in a browser. 1558 01:16:36,550 --> 01:16:39,300 It's essentially the body of the page. but only the part the human 1559 01:16:39,300 --> 01:16:40,860 is currently seeing. 1560 01:16:40,860 --> 01:16:43,560 And you can specify the content of the viewport 1561 01:16:43,560 --> 01:16:45,570 should have an initial scale of 1. 1562 01:16:45,570 --> 01:16:47,460 So it shouldn't be zoomed in or out. 1563 01:16:47,460 --> 01:16:50,100 And the width that the browser should assume 1564 01:16:50,100 --> 01:16:52,620 should be equal to the device's width. 1565 01:16:52,620 --> 01:16:55,530 These are sort of magical statements that you just have to know 1566 01:16:55,530 --> 01:16:59,580 or copy/paste or transcribe, that just express, to the browser, 1567 01:16:59,580 --> 01:17:03,420 assume that the width of the page is the same thing as the width of the device. 1568 01:17:03,420 --> 01:17:07,260 Don't assume the luxury of a big laptop or desktop computer. 1569 01:17:07,260 --> 01:17:12,240 Now, making only that change, let me go back to my pretend iPhone 1570 01:17:12,240 --> 01:17:14,490 here, using Chrome's developer tools. 1571 01:17:14,490 --> 01:17:17,040 Let me reload the page. 1572 01:17:17,040 --> 01:17:22,530 And now, it's not very effective on this screen, if I were showing you this on, 1573 01:17:22,530 --> 01:17:24,240 is there-- 1574 01:17:24,240 --> 01:17:25,510 well, there we go. 1575 01:17:25,510 --> 01:17:26,680 Let's do this. 1576 01:17:26,680 --> 01:17:27,310 There we go. 1577 01:17:27,310 --> 01:17:32,160 So if I zoom in to 100%, this would be on an actual physical device, much more 1578 01:17:32,160 --> 01:17:34,180 readable than it would have been a moment ago, 1579 01:17:34,180 --> 01:17:36,847 even though I realized that demo was not necessarily persuasive. 1580 01:17:36,847 --> 01:17:38,640 But it's as simple as telling the browser 1581 01:17:38,640 --> 01:17:42,610 to resize the thing to the width of the page. 1582 01:17:42,610 --> 01:17:45,780 All right, let me pause here to see if there's any questions, because that 1583 01:17:45,780 --> 01:17:47,400 feels like enough HTML tags. 1584 01:17:47,400 --> 01:17:49,120 We'll add just a couple of more in. 1585 01:17:49,120 --> 01:17:51,210 But for the most part, like HTML tags are 1586 01:17:51,210 --> 01:17:55,050 things you Google and figure out over time, just to build up your vocabulary. 1587 01:17:55,050 --> 01:17:57,990 The basic building blocks are tags, attributes. 1588 01:17:57,990 --> 01:17:59,460 Some attributes have values. 1589 01:17:59,460 --> 01:18:00,270 Some do not. 1590 01:18:00,270 --> 01:18:03,983 And that's sort of the structure of HTML in essence. 1591 01:18:03,983 --> 01:18:05,400 Questions on any of these, though. 1592 01:18:05,400 --> 01:18:06,138 Yeah. 1593 01:18:06,138 --> 01:18:07,770 AUDIENCE: Do attributes have an order? 1594 01:18:07,770 --> 01:18:09,420 SPEAKER 1: Do attributes have an order? 1595 01:18:09,420 --> 01:18:12,510 No, attributes can be in any order, from left to right. 1596 01:18:12,510 --> 01:18:15,510 I tend to be a little nit-picky, and so I alphabetize them, 1597 01:18:15,510 --> 01:18:18,725 if only because then I can easily spot if something's missing, 1598 01:18:18,725 --> 01:18:20,100 if it's not there alphabetically. 1599 01:18:20,100 --> 01:18:25,760 Most people on the internet don't seem to do that. 1600 01:18:25,760 --> 01:18:26,990 Yeah, in the middle. 1601 01:18:26,990 --> 01:18:27,770 Version. 1602 01:18:27,770 --> 01:18:28,610 Yeah, good question. 1603 01:18:28,610 --> 01:18:30,620 I mentioned that HTML is starting to replace 1604 01:18:30,620 --> 01:18:32,660 other languages for user interfaces. 1605 01:18:32,660 --> 01:18:34,100 And it's not just HTML alone. 1606 01:18:34,100 --> 01:18:37,910 It's HTML with CSS, with JavaScript, both of which we'll get a taste of here 1607 01:18:37,910 --> 01:18:39,020 today. 1608 01:18:39,020 --> 01:18:41,720 That rather has been the trend for portability, 1609 01:18:41,720 --> 01:18:44,390 and the ability for companies, for individual programmers, 1610 01:18:44,390 --> 01:18:46,760 to write one version of an app and have it 1611 01:18:46,760 --> 01:18:50,900 work on Android devices and iPhones and Macs and PCs, and the like. 1612 01:18:50,900 --> 01:18:52,160 It is very expensive. 1613 01:18:52,160 --> 01:18:55,220 It is very time-consuming to learn a language like Java 1614 01:18:55,220 --> 01:18:58,130 and write an Android app, learn another language called Swift 1615 01:18:58,130 --> 01:19:00,800 and make an iOS app, not to mention make them look and behave 1616 01:19:00,800 --> 01:19:02,932 the same, not to mention fix a bug in one 1617 01:19:02,932 --> 01:19:04,640 and then remember to fix it in the other. 1618 01:19:04,640 --> 01:19:08,870 I mean, this is just very painful and time-consuming and costly. 1619 01:19:08,870 --> 01:19:13,160 So this standardization on HTML, CSS, and JavaScript, 1620 01:19:13,160 --> 01:19:17,240 even for mobile apps and web apps, has been increasingly compelling, 1621 01:19:17,240 --> 01:19:19,820 because it solves problems like that. 1622 01:19:19,820 --> 01:19:23,660 All right, so let's go ahead and now do something that's finally interactive. 1623 01:19:23,660 --> 01:19:25,970 All of these pages thus far are really just tastes 1624 01:19:25,970 --> 01:19:28,850 of static content, content that does not change. 1625 01:19:28,850 --> 01:19:31,800 Well, let's go ahead and do this. 1626 01:19:31,800 --> 01:19:34,820 Let me introduce one other format of URLs, which looks 1627 01:19:34,820 --> 01:19:36,860 a little something like it did before. 1628 01:19:36,860 --> 01:19:40,260 So slash path, but it could actually be something like this, 1629 01:19:40,260 --> 01:19:43,820 slash path question mark, key equals value. 1630 01:19:43,820 --> 01:19:45,830 You might not have noticed, or cared to notice, 1631 01:19:45,830 --> 01:19:48,450 the URLs in your URL bar every day. 1632 01:19:48,450 --> 01:19:50,090 But these things are everywhere. 1633 01:19:50,090 --> 01:19:53,030 Often when you type into a search engine like Google 1634 01:19:53,030 --> 01:19:56,300 a search query, whatever you just typed ends up in the URL. 1635 01:19:56,300 --> 01:19:58,907 When you click on a link that contains some information, 1636 01:19:58,907 --> 01:20:01,490 there might be a question mark, and then some keys and values. 1637 01:20:01,490 --> 01:20:04,280 There might be an ampersand and more keys and values. 1638 01:20:04,280 --> 01:20:06,710 Here, again, is that very common programming paradigm 1639 01:20:06,710 --> 01:20:08,870 of just associating keys with values. 1640 01:20:08,870 --> 01:20:10,830 We can see this as follows. 1641 01:20:10,830 --> 01:20:15,200 Let me actually go to google.com, in a browser 1642 01:20:15,200 --> 01:20:19,850 here, and let me search for something the internet is filled with, cats. 1643 01:20:19,850 --> 01:20:24,290 Enter, notice now that my URL changed from google.com 1644 01:20:24,290 --> 01:20:27,800 to google.com slash search question mark, 1645 01:20:27,800 --> 01:20:30,890 Q equals cats, ampersand and then a bunch of stuff 1646 01:20:30,890 --> 01:20:32,390 that I don't understand or know. 1647 01:20:32,390 --> 01:20:37,310 So let's just delete it for now, and leave it with the essence of that URL. 1648 01:20:37,310 --> 01:20:38,368 And that still works. 1649 01:20:38,368 --> 01:20:40,910 If I zoom out here, years ago you would get pictures of cats. 1650 01:20:40,910 --> 01:20:44,930 Now you get videos of the movie. 1651 01:20:44,930 --> 01:20:48,140 And then that top query there, is Cats a bad movie. 1652 01:20:48,140 --> 01:20:50,630 But we can also, of course, click on Images. 1653 01:20:50,630 --> 01:20:53,330 And there are the adorable cat, creepy cats. 1654 01:20:53,330 --> 01:20:56,150 All right, this didn't used to happen when we searched for cats. 1655 01:20:56,150 --> 01:21:01,730 But anyhow, the point is that the URL changed to include the user's input. 1656 01:21:01,730 --> 01:21:04,370 And this is such a simple, but such a powerful thing. 1657 01:21:04,370 --> 01:21:08,630 This is how humans provide input to servers. 1658 01:21:08,630 --> 01:21:11,550 They don't manually create the URLs, like I sort of just did. 1659 01:21:11,550 --> 01:21:14,600 But when you fill out a form on the web and you hit Enter, 1660 01:21:14,600 --> 01:21:17,480 typically the URL suddenly changes to include 1661 01:21:17,480 --> 01:21:20,360 whatever you typed in, in the URL, assuming 1662 01:21:20,360 --> 01:21:22,700 the form is using the verb GET. 1663 01:21:22,700 --> 01:21:24,140 That's not ideal. 1664 01:21:24,140 --> 01:21:25,932 If you're typing in a username, a password, 1665 01:21:25,932 --> 01:21:29,140 a credit card information, because you don't want the next person to sit down 1666 01:21:29,140 --> 01:21:31,760 at your laptop to see literally everything you typed in, 1667 01:21:31,760 --> 01:21:33,140 saved in your history. 1668 01:21:33,140 --> 01:21:35,870 So there's another verb, POST, that can hide all of that. 1669 01:21:35,870 --> 01:21:37,580 And it's just sent a little differently. 1670 01:21:37,580 --> 01:21:40,310 But things like this are typically sent via GET, 1671 01:21:40,310 --> 01:21:43,730 and what that means underneath the hood is that your browser is just 1672 01:21:43,730 --> 01:21:47,240 making a request like this, Get/search? 1673 01:21:47,240 --> 01:21:51,560 Q equals, whatever you typed in, the host that you visited, and so forth. 1674 01:21:51,560 --> 01:21:56,630 And hopefully what comes back is a page full of search results, including cats. 1675 01:21:56,630 --> 01:22:01,770 And what's interesting here now is, if I go back to VS Code on my own computer, 1676 01:22:01,770 --> 01:22:08,600 and let me go ahead and create a file called, how about Search.html. 1677 01:22:08,600 --> 01:22:13,490 In Search.html, I'm going to start with some copy/paste from before, 1678 01:22:13,490 --> 01:22:14,840 change my title to search. 1679 01:22:14,840 --> 01:22:18,420 And in the body of this page, I'm going to introduce a form tag. 1680 01:22:18,420 --> 01:22:22,340 And in this form tag, I'm going to have a couple of inputs. 1681 01:22:22,340 --> 01:22:29,060 And the types of inputs are going to be text, and the type of the input 1682 01:22:29,060 --> 01:22:32,257 is going to be submit. 1683 01:22:32,257 --> 01:22:34,340 And this isn't that interesting yet, but let's see 1684 01:22:34,340 --> 01:22:36,230 what is happening in the page itself. 1685 01:22:36,230 --> 01:22:38,570 Let me go back to my directory listing. 1686 01:22:38,570 --> 01:22:40,730 Let me click on Search.html. 1687 01:22:40,730 --> 01:22:43,250 I seem to have the beginning of my own search engine. 1688 01:22:43,250 --> 01:22:44,360 It's not very interesting. 1689 01:22:44,360 --> 01:22:47,010 It's just a text box and a submit button. 1690 01:22:47,010 --> 01:22:48,810 But let's finish my thoughts here. 1691 01:22:48,810 --> 01:22:53,720 So let's specifically give this text box a name of Q, 1692 01:22:53,720 --> 01:22:57,560 which, if you roll back to the late '90s when Larry and Sergey of Google fame 1693 01:22:57,560 --> 01:23:01,850 created Google.com, Q represented query, the query that the human's typing in. 1694 01:23:01,850 --> 01:23:05,630 So the name of this text box shall be text, 1695 01:23:05,630 --> 01:23:09,650 shall be Q. The form is going to use what method? 1696 01:23:09,650 --> 01:23:11,510 Technically it uses GET by default, but I'll 1697 01:23:11,510 --> 01:23:14,090 be explicit and say method equals quote unquote "get." 1698 01:23:14,090 --> 01:23:18,440 Stupidly, it's lowercase in HTML, even though what's in the envelope is indeed 1699 01:23:18,440 --> 01:23:20,660 uppercase, by convention. 1700 01:23:20,660 --> 01:23:25,300 The action of this form, specifically, would ideally go to my own server. 1701 01:23:25,300 --> 01:23:28,160 But we don't really have time today to implement Google itself. 1702 01:23:28,160 --> 01:23:32,750 So we're just going to send the user's request to google.com/search. 1703 01:23:32,750 --> 01:23:34,960 So I'm creating a form, the action of which 1704 01:23:34,960 --> 01:23:39,520 is to send the data to Google's slash search path, using the GET method. 1705 01:23:39,520 --> 01:23:44,830 It's going to send an input called Q, whenever I click this Submit button. 1706 01:23:44,830 --> 01:23:47,890 Let me go back to the browser, reload the page. 1707 01:23:47,890 --> 01:23:52,720 Nothing seems to have changed yet, but, if I search for, let me zoom out, 1708 01:23:52,720 --> 01:23:54,160 so we can see the URL bar. 1709 01:23:54,160 --> 01:23:57,760 Right now I'm in Search.html. 1710 01:23:57,760 --> 01:24:01,090 If I zoom out and search for cats now and click Submit, 1711 01:24:01,090 --> 01:24:03,070 I'm whisked away to google.com. 1712 01:24:03,070 --> 01:24:06,760 But notice that the URL is parameterized, with those key value 1713 01:24:06,760 --> 01:24:08,380 pairs, that key value pair. 1714 01:24:08,380 --> 01:24:10,240 And I get back a whole bunch of cat results. 1715 01:24:10,240 --> 01:24:12,580 And I can very easily now make this a little prettier. 1716 01:24:12,580 --> 01:24:15,610 Right now, it's not ideal that like the human has to move their cursor 1717 01:24:15,610 --> 01:24:16,925 and click in the box. 1718 01:24:16,925 --> 01:24:19,300 And it's a little obnoxious that autocomplete is enabled. 1719 01:24:19,300 --> 01:24:21,100 If I don't want to search for cats anymore, 1720 01:24:21,100 --> 01:24:25,090 well, according to HTML's documentation, I can say something like this. 1721 01:24:25,090 --> 01:24:29,170 Autocomplete equals off, to turn off autocomplete, auto focus 1722 01:24:29,170 --> 01:24:32,330 to automatically put the cursor inside of that text box. 1723 01:24:32,330 --> 01:24:36,100 If I want some explanatory text, I can put placeholder text like quote unquote 1724 01:24:36,100 --> 01:24:37,330 "query." 1725 01:24:37,330 --> 01:24:39,460 And now if I go back to this page and reload, 1726 01:24:39,460 --> 01:24:41,270 now it's a little more user-friendly. 1727 01:24:41,270 --> 01:24:43,450 You see query in kind of gray text. 1728 01:24:43,450 --> 01:24:45,280 The cursor is already there and blinking. 1729 01:24:45,280 --> 01:24:46,810 I don't have to even move my cursor. 1730 01:24:46,810 --> 01:24:49,930 I can search for dogs now, and you didn't see any autocomplete at all. 1731 01:24:49,930 --> 01:24:52,720 Hit enter to submit, and now I'm searching for, 1732 01:24:52,720 --> 01:24:55,640 there we go, adorable dogs, instead. 1733 01:24:55,640 --> 01:24:56,570 So what have I done? 1734 01:24:56,570 --> 01:25:00,660 I've implemented the front end of Google.com, just not the back end. 1735 01:25:00,660 --> 01:25:02,410 To implement the back end, we're obviously 1736 01:25:02,410 --> 01:25:05,620 going to need like a really big database, maybe something like SQL. 1737 01:25:05,620 --> 01:25:09,292 We're going to need some code that like searches the database for dogs or cats, 1738 01:25:09,292 --> 01:25:10,000 or anything else. 1739 01:25:10,000 --> 01:25:11,900 We're going to need Python for something like that. 1740 01:25:11,900 --> 01:25:13,720 And in fact, that's the direction we're steering next week, 1741 01:25:13,720 --> 01:25:15,070 when we implement that back end. 1742 01:25:15,070 --> 01:25:18,400 But today it's all about this front end. 1743 01:25:18,400 --> 01:25:24,490 Or any question, then, about forms, these URL parameters, before we now 1744 01:25:24,490 --> 01:25:28,488 transition to making things look a little prettier, with CSS? 1745 01:25:28,488 --> 01:25:31,030 And then we'll end by making things a little more functional, 1746 01:25:31,030 --> 01:25:33,230 with JavaScript. 1747 01:25:33,230 --> 01:25:35,250 Anything at all? 1748 01:25:35,250 --> 01:25:35,750 No? 1749 01:25:35,750 --> 01:25:38,930 All right, so let's start to answer a couple of the questions that 1750 01:25:38,930 --> 01:25:44,040 came up, by making these pages a little more aesthetically interesting. 1751 01:25:44,040 --> 01:25:49,680 Let's go ahead now and introduce to the mix one other language, as follows. 1752 01:25:49,680 --> 01:25:52,370 Let me go ahead and create a file called Home.html, 1753 01:25:52,370 --> 01:25:55,100 as though I'm making a home page for the very first time. 1754 01:25:55,100 --> 01:25:57,770 And in this page, I'm going to give a title of Home. 1755 01:25:57,770 --> 01:25:59,700 And I'm just going to have like three things. 1756 01:25:59,700 --> 01:26:04,100 First I'm going to have maybe a paragraph of text up here 1757 01:26:04,100 --> 01:26:07,130 at the top, that says something welcoming for my home page, 1758 01:26:07,130 --> 01:26:10,550 like my name, John Harvard, for instance, or John Harvard's home page. 1759 01:26:10,550 --> 01:26:13,880 Then in the middle of the page, I'm going to have some text like, 1760 01:26:13,880 --> 01:26:16,790 welcome to my home page exclamation point! 1761 01:26:16,790 --> 01:26:19,850 And at the bottom of the page, I'm going to have a final paragraph that 1762 01:26:19,850 --> 01:26:23,480 says something like copyright, the copyright symbol, John 1763 01:26:23,480 --> 01:26:24,980 Harvard, or something like that. 1764 01:26:24,980 --> 01:26:29,240 All right, so it's like a web page with three different structural areas, 1765 01:26:29,240 --> 01:26:30,530 made with text. 1766 01:26:30,530 --> 01:26:31,790 This isn't that interesting. 1767 01:26:31,790 --> 01:26:36,230 If I open this page called Home.html, let me go ahead 1768 01:26:36,230 --> 01:26:39,740 and create three quick paragraphs, a first paragraph for John Harvard. 1769 01:26:39,740 --> 01:26:43,100 Inside the middle, I'm going to say something like welcome to my home page 1770 01:26:43,100 --> 01:26:44,040 exclamation point! 1771 01:26:44,040 --> 01:26:46,280 And at the bottom, whoops, at the bottom, 1772 01:26:46,280 --> 01:26:49,460 a little footer that says something like copyright, 1773 01:26:49,460 --> 01:26:54,140 a little simple copyright symbol, and John Harvard's name. 1774 01:26:54,140 --> 01:26:56,173 All right, now let me reload the page. 1775 01:26:56,173 --> 01:26:56,840 And there we go. 1776 01:26:56,840 --> 01:27:01,100 It's a very simple, very underwhelming web page that has three main sections. 1777 01:27:01,100 --> 01:27:03,997 Let's start to now stylize this in an interesting way, 1778 01:27:03,997 --> 01:27:06,080 so that it's a little more aesthetically pleasing. 1779 01:27:06,080 --> 01:27:08,060 First, these aren't really paragraphs. 1780 01:27:08,060 --> 01:27:11,913 They're sort of like areas of the page, divisions, like the header is up here. 1781 01:27:11,913 --> 01:27:13,580 There's like the main part of my screen. 1782 01:27:13,580 --> 01:27:15,330 And then there's the footer of my screen. 1783 01:27:15,330 --> 01:27:17,622 So paragraphs isn't quite right, if these aren't really 1784 01:27:17,622 --> 01:27:18,960 paragraphs of texts. 1785 01:27:18,960 --> 01:27:21,530 I might more properly call them divs or divisions 1786 01:27:21,530 --> 01:27:25,640 of the page, which is a very commonly used tag in HTML, which just has 1787 01:27:25,640 --> 01:27:27,930 this generic rectangular region to it. 1788 01:27:27,930 --> 01:27:32,000 It does not do anything aesthetically, no bold facing, no size changes. 1789 01:27:32,000 --> 01:27:36,410 It just creates an invisible rectangular region, inside of which 1790 01:27:36,410 --> 01:27:38,150 you can start to style the text. 1791 01:27:38,150 --> 01:27:40,070 Or I can take this one step further. 1792 01:27:40,070 --> 01:27:44,270 There's some other tags in HTML, known as semantic tags, that literally 1793 01:27:44,270 --> 01:27:46,678 have names that describe the types of your page, which 1794 01:27:46,678 --> 01:27:49,220 is all the more compelling these days for accessibility, too, 1795 01:27:49,220 --> 01:27:53,690 for screen readers, for search engines, because now, a screen reader, a search 1796 01:27:53,690 --> 01:27:56,392 engine can realize that footer is probably a little fluffy. 1797 01:27:56,392 --> 01:27:58,100 The header might be a little interesting. 1798 01:27:58,100 --> 01:28:01,010 The main part of the page is probably the juicy part, 1799 01:28:01,010 --> 01:28:05,570 that I want users to be able to search for or read aloud, substantively. 1800 01:28:05,570 --> 01:28:08,480 So let's start to stylize this page somehow. 1801 01:28:08,480 --> 01:28:12,290 Let's introduce a style attribute in HTML, 1802 01:28:12,290 --> 01:28:16,910 inside of which is going to be text like this, font size colon 1803 01:28:16,910 --> 01:28:20,660 large, text align colon center. 1804 01:28:20,660 --> 01:28:23,990 On Main, I'm going to add a style attribute and say font size 1805 01:28:23,990 --> 01:28:27,830 medium, text align center. 1806 01:28:27,830 --> 01:28:31,550 And then on the footer, I'm going to say style equals font size 1807 01:28:31,550 --> 01:28:36,410 small, text align center. 1808 01:28:36,410 --> 01:28:38,040 What's going on here? 1809 01:28:38,040 --> 01:28:40,400 Well, in blue is the language we promised, 1810 01:28:40,400 --> 01:28:42,920 called CSS, for Cascading Style Sheets. 1811 01:28:42,920 --> 01:28:46,040 We're not really seeing the Cascading Style Sheet of it yet. 1812 01:28:46,040 --> 01:28:50,000 But in blue here, notice is another very common paradigm. 1813 01:28:50,000 --> 01:28:52,670 It's different syntax now, but how would you 1814 01:28:52,670 --> 01:28:56,270 describe what you're looking at here in blue? 1815 01:28:56,270 --> 01:29:00,710 This is another example of what kind of programming convention? 1816 01:29:00,710 --> 01:29:01,598 AUDIENCE: Key value. 1817 01:29:01,598 --> 01:29:03,890 SPEAKER 1: Yeah, it's just more key value pairs, right? 1818 01:29:03,890 --> 01:29:06,840 It'd be nice if the world standardized how you write key value pairs, 1819 01:29:06,840 --> 01:29:11,068 because we've now seen equal signs and arrows and colons and semicolons, 1820 01:29:11,068 --> 01:29:11,610 and all this. 1821 01:29:11,610 --> 01:29:13,818 But it's just different languages, different choices. 1822 01:29:13,818 --> 01:29:16,930 The key here is font-size, the value is large. 1823 01:29:16,930 --> 01:29:20,730 The other key is text-align, the colon, the value is center. 1824 01:29:20,730 --> 01:29:24,450 The semicolon just separates one key value pair from another. 1825 01:29:24,450 --> 01:29:28,290 Just like in the URL, the ampersand did, in the context of HTTP. 1826 01:29:28,290 --> 01:29:31,200 The designers of CSS used semicolons instead. 1827 01:29:31,200 --> 01:29:33,957 Strictly speaking, this semicolon isn't necessary. 1828 01:29:33,957 --> 01:29:36,540 I tend to include it just for symmetry, but it doesn't matter, 1829 01:29:36,540 --> 01:29:38,130 because there's nothing after that. 1830 01:29:38,130 --> 01:29:40,110 This is a bit of a weird example. 1831 01:29:40,110 --> 01:29:45,150 This is the co-mingling of CSS inside of JavaScript. 1832 01:29:45,150 --> 01:29:50,490 So as of now, you can use the CSS language inside of the quote marks 1833 01:29:50,490 --> 01:29:53,250 in the value of a style attribute. 1834 01:29:53,250 --> 01:29:56,350 We did something a little similarly last two weeks, 1835 01:29:56,350 --> 01:30:00,840 a week plus ago, when we included some SQL inside of Python. 1836 01:30:00,840 --> 01:30:03,573 So again, languages can kind of cross barriers together. 1837 01:30:03,573 --> 01:30:05,490 But we're going to clean this up, because this 1838 01:30:05,490 --> 01:30:08,407 is going to get messy quickly, certainly for large web pages, the size 1839 01:30:08,407 --> 01:30:11,020 of Harvard's or Yale's, or the like. 1840 01:30:11,020 --> 01:30:13,180 So let's see what this looks like. 1841 01:30:13,180 --> 01:30:16,950 Let me go back to my browser window here, reload the page. 1842 01:30:16,950 --> 01:30:18,730 And it's not that different. 1843 01:30:18,730 --> 01:30:23,220 But it's indeed centered, and it's indeed large, medium, and small text. 1844 01:30:23,220 --> 01:30:24,540 And let me make one refinement. 1845 01:30:24,540 --> 01:30:26,580 The copyright symbol actually can be expressed, 1846 01:30:26,580 --> 01:30:28,830 but there's no key on my US keyboard here. 1847 01:30:28,830 --> 01:30:34,710 I can actually magically say ampersand hash 169 semicolon, 1848 01:30:34,710 --> 01:30:36,975 using what's called an HTML entity. 1849 01:30:36,975 --> 01:30:40,800 It turns out there are numeric codes, with this weird syntax, that 1850 01:30:40,800 --> 01:30:44,160 allow you to specify symbols that exist in Macs and PCs and phones, 1851 01:30:44,160 --> 01:30:46,170 but that don't exist on most keyboards. 1852 01:30:46,170 --> 01:30:49,860 If I reload the page now, now it's a proper copyright symbol. 1853 01:30:49,860 --> 01:30:54,030 So minor aesthetic, but it introduces us to these HTML entities. 1854 01:30:54,030 --> 01:30:57,480 So even if you've never seen CSS before, you 1855 01:30:57,480 --> 01:31:00,330 can probably find something kind of dumb about what 1856 01:31:00,330 --> 01:31:02,010 I did here, like poor design. 1857 01:31:02,010 --> 01:31:06,390 It is correct, if my goal was small, medium, and large, bottom up, what 1858 01:31:06,390 --> 01:31:10,890 looks like a bad design, perhaps, even if you've never 1859 01:31:10,890 --> 01:31:12,460 seen this language before. 1860 01:31:12,460 --> 01:31:12,960 Yeah. 1861 01:31:12,960 --> 01:31:13,680 AUDIENCE: Same 1862 01:31:13,680 --> 01:31:15,930 SPEAKER 1: Yeah, I've used the same style three times, 1863 01:31:15,930 --> 01:31:18,750 like copy/paste, or typing the exact same thing again and again. 1864 01:31:18,750 --> 01:31:21,030 It has rarely been a good thing. 1865 01:31:21,030 --> 01:31:25,500 Well, here's where we can take advantage of the design of CSS, 1866 01:31:25,500 --> 01:31:27,930 because it supports what we might call inheritance, 1867 01:31:27,930 --> 01:31:33,270 whereby children inherit the properties, the key value pairs of their parents 1868 01:31:33,270 --> 01:31:34,380 or ancestors. 1869 01:31:34,380 --> 01:31:36,280 And what that means is, I can do this. 1870 01:31:36,280 --> 01:31:38,040 Let me get rid of this text align. 1871 01:31:38,040 --> 01:31:39,840 Let me get rid of this text align. 1872 01:31:39,840 --> 01:31:41,040 Let me get rid of this one. 1873 01:31:41,040 --> 01:31:43,950 I could get rid of the semicolon, too, but I'll leave it for now. 1874 01:31:43,950 --> 01:31:50,310 And let me add all of that style to the parent element, the body, 1875 01:31:50,310 --> 01:31:55,320 so that it sort of cascades down to the header, the main, and the footer tags 1876 01:31:55,320 --> 01:31:56,140 as well. 1877 01:31:56,140 --> 01:31:58,260 And let me close my quotes there, too. 1878 01:31:58,260 --> 01:32:02,190 Now, if I go back to my browser and hit reload, nothing changes. 1879 01:32:02,190 --> 01:32:04,050 But it's a little better designed, right? 1880 01:32:04,050 --> 01:32:07,410 Because if I want to change the text alignment to maybe be right aligned, 1881 01:32:07,410 --> 01:32:10,300 I can now reload the page, and voila, now it's over there. 1882 01:32:10,300 --> 01:32:12,760 I change it in one place, not in three different places. 1883 01:32:12,760 --> 01:32:15,630 So that would seem to be marginally better design. 1884 01:32:15,630 --> 01:32:18,250 And could we do this any more differently? 1885 01:32:18,250 --> 01:32:24,060 Well, it's not that elegant that it's all just in line with my HTML. 1886 01:32:24,060 --> 01:32:26,430 This generally tends to be bad practice, where 1887 01:32:26,430 --> 01:32:29,820 you co-mingle your HTML and your CSS, especially since some of you 1888 01:32:29,820 --> 01:32:32,430 might be really good at laying out the structure of web pages 1889 01:32:32,430 --> 01:32:35,220 and the content and the data, and you might have a horrible sense of design 1890 01:32:35,220 --> 01:32:36,630 or just not care about the aesthetics. 1891 01:32:36,630 --> 01:32:38,380 You might work with a designer, an artist, 1892 01:32:38,380 --> 01:32:41,550 who's much better at all of these fine tunings aesthetically. 1893 01:32:41,550 --> 01:32:45,730 Wouldn't it be nice if you could work on the HTML, they could work on the CSS. 1894 01:32:45,730 --> 01:32:47,790 And you don't have to somehow like literally 1895 01:32:47,790 --> 01:32:49,920 edit the same lines of code as each other. 1896 01:32:49,920 --> 01:32:53,940 Well, just like we can move stuff into header files in C, 1897 01:32:53,940 --> 01:32:57,703 or packages in Python, we can do the same in CSS. 1898 01:32:57,703 --> 01:32:59,620 So I'm actually going to go ahead and do this. 1899 01:32:59,620 --> 01:33:02,190 Let me get rid of all of these style attributes, 1900 01:33:02,190 --> 01:33:07,650 and let me now start to practice a convention of not co-mingling CSS 1901 01:33:07,650 --> 01:33:09,030 with my HTML. 1902 01:33:09,030 --> 01:33:13,860 Let me instead move it into the head of the page, in a style tag, 1903 01:33:13,860 --> 01:33:15,420 instead of an attribute. 1904 01:33:15,420 --> 01:33:17,820 This is one of the rare examples where there 1905 01:33:17,820 --> 01:33:20,670 are attributes that have the same names of tags as vice versa. 1906 01:33:20,670 --> 01:33:23,250 It's not very common, but this one does exist. 1907 01:33:23,250 --> 01:33:26,700 Here's a slightly different syntax for expressing the same key value pairs. 1908 01:33:26,700 --> 01:33:30,720 If I want to apply CSS properties, that is, key value pairs, 1909 01:33:30,720 --> 01:33:35,010 to the header of the page, I say header, and then I use curly braces, 1910 01:33:35,010 --> 01:33:41,910 and inside of those I say font-size large, text-align center. 1911 01:33:41,910 --> 01:33:45,940 Then, if I want to apply some properties to the main section of the page, 1912 01:33:45,940 --> 01:33:50,880 I again do font-size, say, medium, and then I can do text-align center. 1913 01:33:50,880 --> 01:33:53,430 Then, lastly, on the footer of the page, I 1914 01:33:53,430 --> 01:33:58,830 can assign some properties like font-size small, and then text-align 1915 01:33:58,830 --> 01:34:01,340 center semicolon. 1916 01:34:01,340 --> 01:34:04,250 And I don't have to do anything more in my HTML. 1917 01:34:04,250 --> 01:34:07,680 It all just represents the structure of my page. 1918 01:34:07,680 --> 01:34:10,122 But, because of this style tag in the head of the page, 1919 01:34:10,122 --> 01:34:12,080 the browser knows in advance that the moment it 1920 01:34:12,080 --> 01:34:14,660 encounters a header tag, a main tag, or a footer tag, 1921 01:34:14,660 --> 01:34:17,870 it should apply those properties, those styles. 1922 01:34:17,870 --> 01:34:20,840 If I reload the page, other than it being recentered now, 1923 01:34:20,840 --> 01:34:21,920 there's no other changes. 1924 01:34:21,920 --> 01:34:24,980 All we're doing is sort of iteratively improving the design here. 1925 01:34:24,980 --> 01:34:28,130 But now everything's in the top of the file. 1926 01:34:28,130 --> 01:34:30,050 But there's still a bad design here. 1927 01:34:30,050 --> 01:34:34,010 What could I now do that would be smarter? 1928 01:34:34,010 --> 01:34:36,510 Similar problem to before. 1929 01:34:36,510 --> 01:34:37,010 Yeah. 1930 01:34:37,010 --> 01:34:37,760 AUDIENCE: Create it. 1931 01:34:37,760 --> 01:34:39,740 SPEAKER 1: OK, create a new file with just the CSS. 1932 01:34:39,740 --> 01:34:40,220 I like that. 1933 01:34:40,220 --> 01:34:41,637 Let's go there in just one second. 1934 01:34:41,637 --> 01:34:43,970 But even as we're here, there's still a redundancy 1935 01:34:43,970 --> 01:34:45,710 we can probably chip away at. 1936 01:34:45,710 --> 01:34:49,040 Yeah, get rid of the text-align center in three different places, which 1937 01:34:49,040 --> 01:34:51,410 doesn't seem necessary, and perhaps someone 1938 01:34:51,410 --> 01:34:57,800 else, if I get rid of text-align center, what should I add to my style tag 1939 01:34:57,800 --> 01:35:00,800 in order to bring it back, but apply it to everything in the page? 1940 01:35:00,800 --> 01:35:03,630 And the page, if I scroll down, looks like this, in HTML. 1941 01:35:03,630 --> 01:35:04,130 Yeah. 1942 01:35:04,130 --> 01:35:05,090 AUDIENCE: The body. 1943 01:35:05,090 --> 01:35:06,600 SPEAKER 1: Yeah, so the body tag. 1944 01:35:06,600 --> 01:35:08,520 So let me go ahead and say body. 1945 01:35:08,520 --> 01:35:11,090 And then in here, put text-align center. 1946 01:35:11,090 --> 01:35:14,090 And that, now, if I reload the page, has no visual effect, 1947 01:35:14,090 --> 01:35:15,950 but it's just better design, because now I 1948 01:35:15,950 --> 01:35:18,050 factored out that kind of commonality. 1949 01:35:18,050 --> 01:35:20,330 And so, just to make clear what we've been doing here, 1950 01:35:20,330 --> 01:35:23,300 these are all, again, CSS properties, these key value pairs. 1951 01:35:23,300 --> 01:35:26,270 And there's different types of ways of using them. 1952 01:35:26,270 --> 01:35:28,605 And there's this whole taxonomy. 1953 01:35:28,605 --> 01:35:31,730 What we've been doing thus far are what we're going to call type selectors, 1954 01:35:31,730 --> 01:35:33,980 where the type is the name of a tag. 1955 01:35:33,980 --> 01:35:36,980 And so it turns out there's other ways, though, to do this. 1956 01:35:36,980 --> 01:35:39,020 And let's head in this direction. 1957 01:35:39,020 --> 01:35:42,590 Let's go ahead and maybe write our CSS slightly differently, 1958 01:35:42,590 --> 01:35:44,090 because you know what would be nice. 1959 01:35:44,090 --> 01:35:48,320 I bet, after today, once I start creating other files for my home page, 1960 01:35:48,320 --> 01:35:50,030 or John Harvard's home page, I might want 1961 01:35:50,030 --> 01:35:52,550 to have centered text on other pages. 1962 01:35:52,550 --> 01:35:55,820 And I might want to have large text or medium text or small text. 1963 01:35:55,820 --> 01:35:58,820 It'd be nice if I could reuse these properties again and again, 1964 01:35:58,820 --> 01:36:01,100 and kind of create my own library, maybe even 1965 01:36:01,100 --> 01:36:03,620 ultimately putting it in a separate file. 1966 01:36:03,620 --> 01:36:04,370 So let me do this. 1967 01:36:04,370 --> 01:36:07,850 Instead of explicitly applying text-align center to the body, 1968 01:36:07,850 --> 01:36:10,910 let me create a new noun, or an adjective, 1969 01:36:10,910 --> 01:36:13,250 rather, for myself, called centered. 1970 01:36:13,250 --> 01:36:15,830 It has to start with a dot, because what I'm doing 1971 01:36:15,830 --> 01:36:18,590 is inventing my own class, so to speak. 1972 01:36:18,590 --> 01:36:21,470 This has nothing to do with classes in Java or Python. 1973 01:36:21,470 --> 01:36:24,080 Class here is this aesthetic feature. 1974 01:36:24,080 --> 01:36:26,780 And, actually, let me rename these, to be dot large, 1975 01:36:26,780 --> 01:36:29,810 dot medium, and dot small. 1976 01:36:29,810 --> 01:36:33,740 What this is doing for me is it's inventing new words, 1977 01:36:33,740 --> 01:36:37,040 well-named words, that I can now use in this file, 1978 01:36:37,040 --> 01:36:40,020 or potentially in other web pages I make, as follows. 1979 01:36:40,020 --> 01:36:43,130 I can now say, if I want to center the whole body, 1980 01:36:43,130 --> 01:36:45,440 I can say class equals centered. 1981 01:36:45,440 --> 01:36:48,980 On the header tag, I can say class equals large. 1982 01:36:48,980 --> 01:36:52,030 On the main tag I can say class equals medium. 1983 01:36:52,030 --> 01:36:54,440 On the footer tag, I can say class equals small. 1984 01:36:54,440 --> 01:36:57,200 But let me take this one step further. 1985 01:36:57,200 --> 01:37:00,020 As you suggested, why don't I go ahead now 1986 01:37:00,020 --> 01:37:03,260 and let me actually get rid of-- let me grab all of the CSS, 1987 01:37:03,260 --> 01:37:05,120 copy it to my clipboard. 1988 01:37:05,120 --> 01:37:12,170 Let me get rid of the style tag here, and create a new file called Home.css, 1989 01:37:12,170 --> 01:37:17,240 and let me just save all of that same text in a separate file ending in .css, 1990 01:37:17,240 --> 01:37:19,430 nothing else, no HTML whatsoever. 1991 01:37:19,430 --> 01:37:22,610 But let me go back to my Home.html page, and this 1992 01:37:22,610 --> 01:37:25,760 is one of the most annoyingly named tags, because it doesn't really 1993 01:37:25,760 --> 01:37:33,860 mean what it does, Link HREF Home.css rel equals stylesheet. 1994 01:37:33,860 --> 01:37:37,100 So ideally we would have used the link tag for links in web pages, 1995 01:37:37,100 --> 01:37:39,920 but this is link in the sort of conceptual sense. 1996 01:37:39,920 --> 01:37:43,790 We're linking this file to this other one, so that they work together, 1997 01:37:43,790 --> 01:37:47,420 using this hyper-reference, Home.css, the relationship 1998 01:37:47,420 --> 01:37:50,090 of that file to this one is that of stylesheet. 1999 01:37:50,090 --> 01:37:52,280 A stylesheet is a file containing a whole bunch 2000 01:37:52,280 --> 01:37:56,390 of stylizations, a whole bunch of properties, as we just did. 2001 01:37:56,390 --> 01:37:58,430 So here, too, it's underwhelming the effect. 2002 01:37:58,430 --> 01:38:00,810 If I reload the page, nothing changed. 2003 01:38:00,810 --> 01:38:05,690 But now, I not only have a better design here, 2004 01:38:05,690 --> 01:38:10,730 because I can now use those same classes in my second page that I might make, 2005 01:38:10,730 --> 01:38:15,020 my third page, my fourth page, my bio, my resume page, whatever it is I'm 2006 01:38:15,020 --> 01:38:18,830 making on my website here, I can reuse those styles by just 2007 01:38:18,830 --> 01:38:23,060 including one line of code, instead of copying and pasting all of that style 2008 01:38:23,060 --> 01:38:25,650 stuff into file after file after file. 2009 01:38:25,650 --> 01:38:28,130 And heck, if the rest of the world is really 2010 01:38:28,130 --> 01:38:32,005 impressed by my centered class, and my large and medium and small classes, 2011 01:38:32,005 --> 01:38:34,880 I could bundle this up, let other people on the internet download it, 2012 01:38:34,880 --> 01:38:39,290 and I have my own library, my own CSS library, that other people can use. 2013 01:38:39,290 --> 01:38:41,690 Why should you ever invent a centered class again, 2014 01:38:41,690 --> 01:38:45,140 if I already did it for you, stupid and small as this one is. 2015 01:38:45,140 --> 01:38:47,000 But it would be nice now to package this up 2016 01:38:47,000 --> 01:38:51,720 in a way that's usable by other people as well. 2017 01:38:51,720 --> 01:38:55,160 So this is perhaps the best design, when it comes to CSS. 2018 01:38:55,160 --> 01:39:00,410 Use classes where you can, use external stylesheets where you can, 2019 01:39:00,410 --> 01:39:04,780 but don't use the style attribute where we began, which while explicit, 2020 01:39:04,780 --> 01:39:10,340 starts to get messy quickly, especially for large files. 2021 01:39:10,340 --> 01:39:12,425 All right, any questions, then, on this. 2022 01:39:15,170 --> 01:39:17,540 No, all right, so that's class selectors. 2023 01:39:17,540 --> 01:39:19,940 When you specify dot something, that means 2024 01:39:19,940 --> 01:39:24,020 you're selecting all of the tags in the page, that have that particular class, 2025 01:39:24,020 --> 01:39:25,470 and applying those properties. 2026 01:39:25,470 --> 01:39:27,637 So there's a couple of others here, just to give you 2027 01:39:27,637 --> 01:39:29,240 a taste now of what's possible. 2028 01:39:29,240 --> 01:39:32,880 There's so much more that you can actually do with HTML and CSS together. 2029 01:39:32,880 --> 01:39:37,310 Let me go ahead and open up a few examples that I did here in advance. 2030 01:39:37,310 --> 01:39:39,200 Let me go ahead and open up VS Code. 2031 01:39:39,200 --> 01:39:47,310 And let me go ahead and copy my source eight directory. 2032 01:39:47,310 --> 01:39:50,850 Give me one second to grab the source eight directory for today's lectures, 2033 01:39:50,850 --> 01:39:55,680 so that I can now go into my browser, go into some 2034 01:39:55,680 --> 01:39:57,630 of the pre-made examples in source eight, 2035 01:39:57,630 --> 01:40:01,270 and let me open up paragraphs one here. 2036 01:40:01,270 --> 01:40:04,500 So here's something, it's a little subtle. 2037 01:40:04,500 --> 01:40:08,100 But does anyone notice how this is stylized? 2038 01:40:08,100 --> 01:40:10,950 This is just some generic lorem ipsum text again. 2039 01:40:10,950 --> 01:40:16,780 But what's noteworthy stylistically, a book might do this. 2040 01:40:16,780 --> 01:40:17,280 Yeah? 2041 01:40:17,280 --> 01:40:18,240 AUDIENCE: They're bigger. 2042 01:40:18,240 --> 01:40:19,740 SPEAKER 1: Yeah, the first paragraph's a little bigger. 2043 01:40:19,740 --> 01:40:20,130 Why? 2044 01:40:20,130 --> 01:40:22,500 Who knows, it's just a stylistic thing at the beginning of the chapter. 2045 01:40:22,500 --> 01:40:23,790 The first paragraph is bigger. 2046 01:40:23,790 --> 01:40:24,880 How did we do that? 2047 01:40:24,880 --> 01:40:27,370 Well, we can actually explore this in a couple of ways. 2048 01:40:27,370 --> 01:40:29,910 One, I can obviously go into VS Code and show you the code. 2049 01:40:29,910 --> 01:40:33,090 But, now, that we're using Chrome and we're using these developer tools, 2050 01:40:33,090 --> 01:40:34,380 let's again go into them. 2051 01:40:34,380 --> 01:40:37,470 View developer, developer tools, and now notice, 2052 01:40:37,470 --> 01:40:41,010 let me turn off the mobile feature, and let me move the dock back 2053 01:40:41,010 --> 01:40:43,560 to the bottom, just so that it's fully wide. 2054 01:40:43,560 --> 01:40:45,450 We looked at the Network tab before. 2055 01:40:45,450 --> 01:40:47,880 We looked at the mobile button before. 2056 01:40:47,880 --> 01:40:49,780 Now let me click on Elements. 2057 01:40:49,780 --> 01:40:53,460 What's nice about the Elements tab is you can see a pretty printed 2058 01:40:53,460 --> 01:40:58,560 version of the web page's HTML, nicely color-coded, syntax highlighted 2059 01:40:58,560 --> 01:41:02,640 for you, so that you can now henceforth learn from, look at, the source 2060 01:41:02,640 --> 01:41:06,270 code, the HTML source code, of any web page on the internet. 2061 01:41:06,270 --> 01:41:09,030 Notice that my own web page here, it's not that interesting. 2062 01:41:09,030 --> 01:41:11,880 There's a bunch of paragraph tags of lorem ipsum text. 2063 01:41:11,880 --> 01:41:13,290 But notice what I did. 2064 01:41:13,290 --> 01:41:16,260 The very first one, I gave an ID to. 2065 01:41:16,260 --> 01:41:18,660 This is something that you, as a web designer, can do. 2066 01:41:18,660 --> 01:41:22,260 You can give an ID attribute to any tag in a page, 2067 01:41:22,260 --> 01:41:24,030 to give it a unique identifier. 2068 01:41:24,030 --> 01:41:26,760 The onus is on you, not to reuse the word, anywhere else. 2069 01:41:26,760 --> 01:41:28,740 If you reuse it, you've screwed up. 2070 01:41:28,740 --> 01:41:30,210 It's incorrect behavior. 2071 01:41:30,210 --> 01:41:34,170 But I chose an ID of first, just so that I 2072 01:41:34,170 --> 01:41:38,080 have some way of referring to the very first paragraph in this file. 2073 01:41:38,080 --> 01:41:41,380 If I look in the head of the page, and the style tag here, 2074 01:41:41,380 --> 01:41:44,100 notice that I have hash first. 2075 01:41:44,100 --> 01:41:47,220 So just as I use dot for classes, the world of CSS 2076 01:41:47,220 --> 01:41:50,550 uses a hash symbol to represent IDs, unique IDs. 2077 01:41:50,550 --> 01:41:55,530 And what this is telling the browser, whatever element has the first ID, 2078 01:41:55,530 --> 01:42:00,990 F-I-R-S-T, without the hash, apply font-size larger to it. 2079 01:42:00,990 --> 01:42:04,350 And that's why the first paragraph, and only the first paragraph, 2080 01:42:04,350 --> 01:42:05,760 is actually stylized. 2081 01:42:05,760 --> 01:42:08,310 If I actually go into VS Code now, and let 2082 01:42:08,310 --> 01:42:09,930 me go into my source eight directory. 2083 01:42:09,930 --> 01:42:12,810 Let me open up Paragraphs1.html. 2084 01:42:12,810 --> 01:42:14,430 Here is the actual file. 2085 01:42:14,430 --> 01:42:18,330 If I want to change the color of that first paragraph to green, for instance, 2086 01:42:18,330 --> 01:42:20,160 I can do color colon: green. 2087 01:42:20,160 --> 01:42:23,670 Let me close the developer tools, reload the page. 2088 01:42:23,670 --> 01:42:26,380 And now that page is green as well. 2089 01:42:26,380 --> 01:42:27,960 You don't have to just use words. 2090 01:42:27,960 --> 01:42:31,080 You can use hexadecimal. 2091 01:42:31,080 --> 01:42:34,890 What was the hex code for green in RGB? 2092 01:42:34,890 --> 01:42:38,500 Like no red, lots of green, no blue. 2093 01:42:38,500 --> 01:42:42,690 So you could do 00 FF 00, using a hash, which, coincidentally, 2094 01:42:42,690 --> 01:42:44,940 is the same symbol, but it has nothing to do with IDs. 2095 01:42:44,940 --> 01:42:48,600 This is just how Photoshop and web pages represent colors. 2096 01:42:48,600 --> 01:42:49,858 Let's go back here and reload. 2097 01:42:49,858 --> 01:42:52,650 It's the same, although it's a slightly different version of green. 2098 01:42:52,650 --> 01:42:54,060 This is pure green here. 2099 01:42:54,060 --> 01:42:59,940 If I want to change it to red, that would be, let's see, RGB FF 00 00, 2100 01:42:59,940 --> 01:43:01,890 and here I can go and reload. 2101 01:43:01,890 --> 01:43:03,740 Now it's first paragraph red. 2102 01:43:03,740 --> 01:43:05,490 This actually gets pretty tedious quickly. 2103 01:43:05,490 --> 01:43:08,430 Like, if you're a web designer trying to make a website for the first time, 2104 01:43:08,430 --> 01:43:10,770 it actually might be fun to tinker with the website, 2105 01:43:10,770 --> 01:43:13,230 before you open up your editor and you start making changes 2106 01:43:13,230 --> 01:43:14,340 and save and reload. 2107 01:43:14,340 --> 01:43:15,580 That's just more steps. 2108 01:43:15,580 --> 01:43:18,420 So notice what you can do with developer tools, 2109 01:43:18,420 --> 01:43:20,400 too, in Chrome and other browsers. 2110 01:43:20,400 --> 01:43:23,790 When I highlight over this paragraph, under the Elements tab, 2111 01:43:23,790 --> 01:43:26,310 notice that, one, it gets highlighted in blue. 2112 01:43:26,310 --> 01:43:28,523 If I move my cursor, it doesn't get highlighted. 2113 01:43:28,523 --> 01:43:29,940 If I move it, it gets highlighted. 2114 01:43:29,940 --> 01:43:33,450 So it's showing me what that tag represents. 2115 01:43:33,450 --> 01:43:36,150 But notice over here on the right, you can also 2116 01:43:36,150 --> 01:43:39,747 see all of the stylizations of that particular element. 2117 01:43:39,747 --> 01:43:40,830 Some of them are built-in. 2118 01:43:40,830 --> 01:43:44,370 The italicized ones here at the bottom means user agent stylesheet. 2119 01:43:44,370 --> 01:43:48,580 That means this is what Google makes all paragraphs look like by default. 2120 01:43:48,580 --> 01:43:52,240 But in non-italicized here, you see hash first, 2121 01:43:52,240 --> 01:43:54,250 which is my code, that I just changed. 2122 01:43:54,250 --> 01:43:59,790 And if I want to start tinkering with colors, I can do like 00 00 FF Enter. 2123 01:43:59,790 --> 01:44:01,020 I changed it to blue. 2124 01:44:01,020 --> 01:44:05,910 But notice, if I go back to VS Code, I didn't change my original VS Code code. 2125 01:44:05,910 --> 01:44:07,950 This is now purely client side. 2126 01:44:07,950 --> 01:44:09,030 And this is a key detail. 2127 01:44:09,030 --> 01:44:12,090 When I drew that picture earlier of the browser going, 2128 01:44:12,090 --> 01:44:15,060 making a request to the cloud, the server in the cloud and the response 2129 01:44:15,060 --> 01:44:18,300 coming back, the browser, your Mac, your PC, your phone, 2130 01:44:18,300 --> 01:44:22,450 has a copy of all the HTML and CSS, so you can change it here, 2131 01:44:22,450 --> 01:44:24,473 however you actually want. 2132 01:44:24,473 --> 01:44:26,640 And, for instance, you can do this with any website. 2133 01:44:26,640 --> 01:44:32,820 Let's go, say, on a field trip here, to how about Stanford.edu. 2134 01:44:32,820 --> 01:44:35,580 So here's Stanford's website as of today. 2135 01:44:35,580 --> 01:44:37,950 Let's go ahead here and let's see, there's 2136 01:44:37,950 --> 01:44:40,450 their admissions page, campus life, and so forth. 2137 01:44:40,450 --> 01:44:45,090 Let me go ahead and view developer tools on Stanford's page, 2138 01:44:45,090 --> 01:44:49,050 developer tools, elements, you can see all of their HTML. 2139 01:44:49,050 --> 01:44:52,030 And notice it's collapsed, so here is their header. 2140 01:44:52,030 --> 01:44:54,930 Here's their main part, and I'm using my keyboard shortcuts 2141 01:44:54,930 --> 01:44:58,012 to just open and close the tags, to dive in deeper and deeper. 2142 01:44:58,012 --> 01:44:59,970 Suppose you want to kind of mess with Stanford, 2143 01:44:59,970 --> 01:45:02,670 you can actually like right click on any element of a page, 2144 01:45:02,670 --> 01:45:06,930 or control click, Inspect, and that's going to jump you automatically 2145 01:45:06,930 --> 01:45:10,870 to the tag in the Elements tab that shows you that link. 2146 01:45:10,870 --> 01:45:15,690 And notice, if I hover over this LI, notice Stanford's using a list, 2147 01:45:15,690 --> 01:45:17,730 as an unordered list from left to right. 2148 01:45:17,730 --> 01:45:20,063 But it doesn't have to be a bulleted list top to bottom. 2149 01:45:20,063 --> 01:45:24,010 They've used CSS to change it to be a list, from news, events, academics, 2150 01:45:24,010 --> 01:45:26,670 research, health care, campus admission, about. 2151 01:45:26,670 --> 01:45:29,500 Well, so much for admission, that's gone. 2152 01:45:29,500 --> 01:45:33,720 So now, if I close developer tools, now it's gone from Stanford's website. 2153 01:45:33,720 --> 01:45:36,780 But, of course, what have I really done. 2154 01:45:36,780 --> 01:45:39,213 I've just like mutated my own local copy. 2155 01:45:39,213 --> 01:45:41,130 So this is not hacking, even though this might 2156 01:45:41,130 --> 01:45:42,755 be how they do it in TV and the movies. 2157 01:45:42,755 --> 01:45:44,500 It's still there if I reload the page. 2158 01:45:44,500 --> 01:45:48,410 But it's a wonderfully powerful way to, one, just iterate quickly, and try 2159 01:45:48,410 --> 01:45:50,160 different things stylistically, figure out 2160 01:45:50,160 --> 01:45:52,710 how you want to design something, and two, just learn 2161 01:45:52,710 --> 01:45:54,190 how Stanford did something. 2162 01:45:54,190 --> 01:45:57,148 So, for instance, if I right click or control click on admission again, 2163 01:45:57,148 --> 01:46:00,640 go to inspect, and let me go to the LI tag. 2164 01:46:00,640 --> 01:46:04,020 Let me keep going up, up, up, up, up to the UL tag. 2165 01:46:04,020 --> 01:46:06,130 There's going to be a lot going on here. 2166 01:46:06,130 --> 01:46:10,080 But notice, they have applied all of these CSS properties 2167 01:46:10,080 --> 01:46:12,510 to that particular UL tag. 2168 01:46:12,510 --> 01:46:15,720 But notice, here, this is how, it's something like this. 2169 01:46:15,720 --> 01:46:19,680 And we'd have to read more to learn how this works, list style type none, 2170 01:46:19,680 --> 01:46:21,930 this is how they probably got rid of the bullets. 2171 01:46:21,930 --> 01:46:23,490 And what you can do is just tinker. 2172 01:46:23,490 --> 01:46:25,198 Like, all right, well, what does this do? 2173 01:46:25,198 --> 01:46:26,580 Well, let me uncheck it. 2174 01:46:26,580 --> 01:46:29,910 All right, didn't really change anything, font weights, uncheck this, 2175 01:46:29,910 --> 01:46:30,730 there we go. 2176 01:46:30,730 --> 01:46:34,380 So now the margin is changed, the padding around it has changed. 2177 01:46:34,380 --> 01:46:35,610 Let's get rid of this. 2178 01:46:35,610 --> 01:46:37,890 We can just start turning things on and off, just 2179 01:46:37,890 --> 01:46:39,600 to get a sense of how the web page works. 2180 01:46:39,600 --> 01:46:41,640 I'm not really learning anything here so far. 2181 01:46:41,640 --> 01:46:47,610 Let me go to the LI here for, let's go to the admissions one here. 2182 01:46:47,610 --> 01:46:51,240 Margin, there we go, OK. 2183 01:46:51,240 --> 01:46:54,037 So when there's a display property in CSS, 2184 01:46:54,037 --> 01:46:57,120 that's apparently effectively changing things from vertical to horizontal, 2185 01:46:57,120 --> 01:47:00,300 if I turn that off, now Stanford's links all look like this. 2186 01:47:00,300 --> 01:47:01,530 And there are those bullets. 2187 01:47:01,530 --> 01:47:04,650 So again, just default styles, that they've somehow overridden, 2188 01:47:04,650 --> 01:47:07,590 and a good web designer just knows ultimately 2189 01:47:07,590 --> 01:47:10,308 how to do these kinds of things. 2190 01:47:10,308 --> 01:47:12,600 All right, how about a couple of final building blocks, 2191 01:47:12,600 --> 01:47:13,800 before we'll take one more break. 2192 01:47:13,800 --> 01:47:16,425 And then we'll dive in with JavaScript to manipulate this stuff 2193 01:47:16,425 --> 01:47:17,580 programmatically. 2194 01:47:17,580 --> 01:47:21,240 Let me go ahead and open up, how about Paragraphs2 here. 2195 01:47:21,240 --> 01:47:25,440 Let me close this tab, let me go into Paragraphs2, which is premade. 2196 01:47:25,440 --> 01:47:28,860 And this one looks the same, except, when 2197 01:47:28,860 --> 01:47:31,470 I go ahead and inspect this first paragraph, 2198 01:47:31,470 --> 01:47:33,630 notice that I was able to get rid of the ID 2199 01:47:33,630 --> 01:47:36,010 somehow, which is just to say, there's many, 2200 01:47:36,010 --> 01:47:38,370 many ways to solve problems in HTML and CSS, 2201 01:47:38,370 --> 01:47:40,230 just like there is in C and Python. 2202 01:47:40,230 --> 01:47:43,230 Let me look in the head and the style of the page now. 2203 01:47:43,230 --> 01:47:49,620 This is what we might call another type of selector, 2204 01:47:49,620 --> 01:47:53,190 that allows us to specify the paragraph tag, 2205 01:47:53,190 --> 01:47:55,920 that itself happens to be the first child only. 2206 01:47:55,920 --> 01:47:59,810 So you can apply CSS to a very specific child, namely first child. 2207 01:47:59,810 --> 01:48:02,495 There's also syntax for last child, if just the first one 2208 01:48:02,495 --> 01:48:04,120 is supposed to look a little different. 2209 01:48:04,120 --> 01:48:06,240 So, here, I've just gotten out of the business 2210 01:48:06,240 --> 01:48:09,090 of creating my own unique identifier and, instead, I'm 2211 01:48:09,090 --> 01:48:11,950 using this type of selector as well. 2212 01:48:11,950 --> 01:48:13,090 Well, what more can we do? 2213 01:48:13,090 --> 01:48:17,880 Let me go into another example here, called Link1.html, 2214 01:48:17,880 --> 01:48:21,220 and here we have a very simple page that just says visit Harvard. 2215 01:48:21,220 --> 01:48:23,220 But notice it's purple by default, because we've 2216 01:48:23,220 --> 01:48:25,080 been to Harvard.edu before. 2217 01:48:25,080 --> 01:48:28,140 Let's see if we can't maybe stylize Harvard's links 2218 01:48:28,140 --> 01:48:29,620 to be a little different. 2219 01:48:29,620 --> 01:48:34,510 Let me go into Link version 2, now, which looks like this. 2220 01:48:34,510 --> 01:48:36,820 And now Harvard is very red. 2221 01:48:36,820 --> 01:48:37,780 How did I do that? 2222 01:48:37,780 --> 01:48:40,260 Well, let me right click on it, click Inspect, 2223 01:48:40,260 --> 01:48:41,760 and I can start to poke around. 2224 01:48:41,760 --> 01:48:44,190 It looks like my HTML is not at all noteworthy. 2225 01:48:44,190 --> 01:48:47,760 It's just very simple HTML, anchor tag with an HREF. 2226 01:48:47,760 --> 01:48:49,500 So let's look at the style. 2227 01:48:49,500 --> 01:48:50,437 Let me zoom out. 2228 01:48:50,437 --> 01:48:52,270 And we can look at it in two different ways. 2229 01:48:52,270 --> 01:48:55,230 We can literally look at the style, contents here, 2230 01:48:55,230 --> 01:48:59,280 or we can look at Chrome's pretty version of it, over here. 2231 01:48:59,280 --> 01:49:03,330 It looks like my style sheet, in the style tag, 2232 01:49:03,330 --> 01:49:07,810 has changed the color to be red, and the text decoration, which is a new thing, 2233 01:49:07,810 --> 01:49:09,930 but it's another CSS property, to none. 2234 01:49:09,930 --> 01:49:12,720 Notice, if I turn that off, links on the internet 2235 01:49:12,720 --> 01:49:14,640 are underlined by default, which tends to be 2236 01:49:14,640 --> 01:49:17,400 good for familiarity, for visibility, for accessibility. 2237 01:49:17,400 --> 01:49:21,960 But, if it's very obvious what is text and what is a link, 2238 01:49:21,960 --> 01:49:24,870 maybe you change text decoration to none. 2239 01:49:24,870 --> 01:49:28,950 But maybe, watch this, maybe the link comes, the line comes back 2240 01:49:28,950 --> 01:49:30,420 when you hover over it. 2241 01:49:30,420 --> 01:49:32,970 Well, let's look at how I did this in style. 2242 01:49:32,970 --> 01:49:37,920 Notice that I have stylization, and I put my curly braces on the same line 2243 01:49:37,920 --> 01:49:40,380 here, as tends to be convention in CSS. 2244 01:49:40,380 --> 01:49:42,390 Color is red, text decoration is none. 2245 01:49:42,390 --> 01:49:46,770 But, whenever an anchor tag is hovered over, 2246 01:49:46,770 --> 01:49:51,690 you can change the text decoration to be back to the default, underline. 2247 01:49:51,690 --> 01:49:55,060 So, again, just little ways of playing around with the aesthetics of the page, 2248 01:49:55,060 --> 01:49:56,640 once you understand that, really, there's 2249 01:49:56,640 --> 01:49:57,900 just different types of selectors. 2250 01:49:57,900 --> 01:49:59,940 And you might have to remind yourself, look them up occasionally, 2251 01:49:59,940 --> 01:50:01,170 as to what the syntax is. 2252 01:50:01,170 --> 01:50:06,360 But it's just another way of scoping your properties to specific tags. 2253 01:50:06,360 --> 01:50:10,260 Let's look at version 3 of this here, which adds Yale to the mix. 2254 01:50:10,260 --> 01:50:15,510 If I go to Link3.html, maybe I want to have Harvard links red, 2255 01:50:15,510 --> 01:50:16,770 Yale links blue. 2256 01:50:16,770 --> 01:50:18,280 How might I have done this? 2257 01:50:18,280 --> 01:50:20,820 Well, let's right click, and click Inspect. 2258 01:50:20,820 --> 01:50:25,680 And here we might have two links, with a couple of techniques, 2259 01:50:25,680 --> 01:50:28,440 just to, again, emphasize, you can do this so many different ways. 2260 01:50:28,440 --> 01:50:33,870 I gave my Harvard link an ID of Harvard, my Yale link an ID of Yale. 2261 01:50:33,870 --> 01:50:38,610 In my CSS, if we go to the head of the page, I then did this. 2262 01:50:38,610 --> 01:50:41,250 The tag with the Harvard ID, a.k.a. 2263 01:50:41,250 --> 01:50:45,480 #Harvard, should be red, #Yale should be blue, 2264 01:50:45,480 --> 01:50:49,380 and then any anchor tag should have no text decoration, 2265 01:50:49,380 --> 01:50:52,530 unless you hover over it, at which point it should be underlined. 2266 01:50:52,530 --> 01:50:56,040 And so, if I hover over Harvard, it's red underlined, Yale, 2267 01:50:56,040 --> 01:50:57,070 it's blue underlined. 2268 01:50:57,070 --> 01:51:00,070 If I want to get rid of the IDs, I can do this a slightly different way. 2269 01:51:00,070 --> 01:51:01,350 Let me go into Link4. 2270 01:51:01,350 --> 01:51:04,410 Same effect, but notice, I got rid of the IDs now. 2271 01:51:04,410 --> 01:51:06,090 How else can I express myself? 2272 01:51:06,090 --> 01:51:07,800 Well, let's look at the CSS here. 2273 01:51:07,800 --> 01:51:10,320 The anchor tag has no text decoration by default, 2274 01:51:10,320 --> 01:51:11,860 unless you're hovering over it. 2275 01:51:11,860 --> 01:51:13,270 And this is kind of cool. 2276 01:51:13,270 --> 01:51:15,690 This is what we would call, on our list here, 2277 01:51:15,690 --> 01:51:20,610 an attribute selector, where you select tags using CSS notation, 2278 01:51:20,610 --> 01:51:22,180 based on an attribute. 2279 01:51:22,180 --> 01:51:25,500 So this is saying, go ahead and find any anchor tag 2280 01:51:25,500 --> 01:51:30,150 who's HREF value happens to equal this URL, and make it red. 2281 01:51:30,150 --> 01:51:32,135 Do the same for Yale, and make it blue. 2282 01:51:32,135 --> 01:51:35,260 Now, this might not be ideal, because if there's something after the slash, 2283 01:51:35,260 --> 01:51:37,410 these equal signs don't work, because if it's 2284 01:51:37,410 --> 01:51:41,010 a different Harvard or different Yale link, this is a little too precise. 2285 01:51:41,010 --> 01:51:44,220 So let me look at version 5 here, of Link.html. 2286 01:51:44,220 --> 01:51:47,760 Look at this style, and I did this a little smarter. 2287 01:51:47,760 --> 01:51:48,750 This is new syntax. 2288 01:51:48,750 --> 01:51:50,760 And, again, just the kind of thing you look up. 2289 01:51:50,760 --> 01:51:58,350 Star equals means, change any anchor tag who's HREF contains anywhere in it 2290 01:51:58,350 --> 01:52:03,360 Harvard.edu to red, and do the same thing for Yale, based on star equals. 2291 01:52:03,360 --> 01:52:04,950 So star here connotes wildcard. 2292 01:52:04,950 --> 01:52:08,460 So search for Harvard.edu or Yale.edu anywhere in the HREF, 2293 01:52:08,460 --> 01:52:11,460 and if it's there, colorize the link. 2294 01:52:11,460 --> 01:52:15,540 And, again, we could do this all day long, with diminishing returns, 2295 01:52:15,540 --> 01:52:18,820 to actually achieve the same kind of stylizations in different ways. 2296 01:52:18,820 --> 01:52:20,923 And as projects just get larger and larger, 2297 01:52:20,923 --> 01:52:22,840 you just have more and more decisions to make. 2298 01:52:22,840 --> 01:52:25,560 And so you have certain conventions you start to adopt. 2299 01:52:25,560 --> 01:52:28,980 And, indeed, if I may, you have the introduction 2300 01:52:28,980 --> 01:52:31,950 of what are called frameworks, ultimately. 2301 01:52:31,950 --> 01:52:34,320 If you're a full-time web developer, or you're 2302 01:52:34,320 --> 01:52:37,698 working for a company doing the same, you might have internal conventions 2303 01:52:37,698 --> 01:52:38,490 that you adhere to. 2304 01:52:38,490 --> 01:52:42,180 For instance, the company might say, always use classes, don't use IDs. 2305 01:52:42,180 --> 01:52:45,030 Or always use attribute selectors, or don't use this. 2306 01:52:45,030 --> 01:52:48,030 And it wouldn't be necessarily as draconian as that. 2307 01:52:48,030 --> 01:52:50,280 But they might have a style guide of sorts. 2308 01:52:50,280 --> 01:52:53,250 But, what many people, and many companies, do nowadays, 2309 01:52:53,250 --> 01:52:57,210 is they do not come up with all of their own CSS properties. 2310 01:52:57,210 --> 01:53:01,050 They start with something off the shelf, a framework, typically a free and open 2311 01:53:01,050 --> 01:53:04,590 source framework, that just gives them a lot of pretty stylizations 2312 01:53:04,590 --> 01:53:07,980 for free, just by using a third party library. 2313 01:53:07,980 --> 01:53:09,720 And one of the most popular ones nowadays 2314 01:53:09,720 --> 01:53:11,670 is something called Bootstrap, that CS50 uses 2315 01:53:11,670 --> 01:53:14,970 on all of its websites, super-popular in industry as well. 2316 01:53:14,970 --> 01:53:20,970 It's at getbootstrap.com, and this is just to give you a taste of it, 2317 01:53:20,970 --> 01:53:24,420 a website that documents the library that they offer. 2318 01:53:24,420 --> 01:53:28,560 And there's so much documentation here, but let me just go to things like, 2319 01:53:28,560 --> 01:53:30,330 how about components. 2320 01:53:30,330 --> 01:53:33,930 It just gives you, out of the box, the CSS with which you 2321 01:53:33,930 --> 01:53:35,130 can create little alerts. 2322 01:53:35,130 --> 01:53:37,200 If you've ever noticed on CS50's website, 2323 01:53:37,200 --> 01:53:39,810 little colorful warnings at the top of the page, or call 2324 01:53:39,810 --> 01:53:41,670 outs, to draw your attention to things. 2325 01:53:41,670 --> 01:53:42,660 How did we do that? 2326 01:53:42,660 --> 01:53:45,300 It's probably a paragraph tag or a div tag, 2327 01:53:45,300 --> 01:53:46,920 and maybe we changed the font color. 2328 01:53:46,920 --> 01:53:48,540 We changed the background color. 2329 01:53:48,540 --> 01:53:51,090 Or it's a lot of stuff we could absolutely do from scratch, 2330 01:53:51,090 --> 01:53:53,555 but, you know what, why would we reinvent 2331 01:53:53,555 --> 01:53:55,180 the wheel if we can just use Bootstrap. 2332 01:53:55,180 --> 01:53:57,060 So, for instance, let me just scroll down. 2333 01:53:57,060 --> 01:54:01,660 If you've ever seen on CS50's website a yellow warning alert like this, 2334 01:54:01,660 --> 01:54:04,350 let me just zoom in on this. 2335 01:54:04,350 --> 01:54:07,080 We are just using HTML like this. 2336 01:54:07,080 --> 01:54:10,050 We're using a div tag, which, again, is an invisible division, 2337 01:54:10,050 --> 01:54:11,620 a rectangular region of the page. 2338 01:54:11,620 --> 01:54:16,620 But we're using classes called alert and another class called alert warning. 2339 01:54:16,620 --> 01:54:21,270 Those are classes that the folks at Bootstrap invented. 2340 01:54:21,270 --> 01:54:23,790 They associated certain text colors and background 2341 01:54:23,790 --> 01:54:26,850 colors and padding and margin and like other aesthetics with, 2342 01:54:26,850 --> 01:54:29,220 so all we have to do is use those classes. 2343 01:54:29,220 --> 01:54:32,250 Role equals alert, just makes clear to like a screen reader that this 2344 01:54:32,250 --> 01:54:34,320 is an alert, that should probably be recited, 2345 01:54:34,320 --> 01:54:37,410 and whatever's in between the open tag and close tag, 2346 01:54:37,410 --> 01:54:39,120 is what the human would see. 2347 01:54:39,120 --> 01:54:41,070 How do you use something like Bootstrap? 2348 01:54:41,070 --> 01:54:42,840 Well, you just read the documentation. 2349 01:54:42,840 --> 01:54:48,080 Under Getting Started, there is a link tag you copy/paste into your own. 2350 01:54:48,080 --> 01:54:49,040 So let me do this. 2351 01:54:49,040 --> 01:54:53,120 So in Table.html, we had code like this. 2352 01:54:53,120 --> 01:54:55,990 Let me actually read Bootstrap's documentation really fast. 2353 01:54:55,990 --> 01:54:57,234 And they tell me... 2354 01:54:57,234 --> 01:54:59,350 copy/paste this code. 2355 01:54:59,350 --> 01:55:01,360 I'm going to put this into the head of my page. 2356 01:55:01,360 --> 01:55:03,790 And it's quite long, but notice, it's a link tag, 2357 01:55:03,790 --> 01:55:07,660 which I used earlier for my own CSS file, the HREF of which 2358 01:55:07,660 --> 01:55:10,300 is this CDN link, content delivery network, that's 2359 01:55:10,300 --> 01:55:13,540 referring to a specific version of Bootstrap that's available on this day. 2360 01:55:13,540 --> 01:55:17,560 And the file that I'm including is called Bootstrap.min.css. 2361 01:55:17,560 --> 01:55:21,100 This is an actual file I can visit with my browser. 2362 01:55:21,100 --> 01:55:24,430 If I open this in a separate tab, this is the CSS 2363 01:55:24,430 --> 01:55:27,340 that Bootstrap has made freely available to us. 2364 01:55:27,340 --> 01:55:29,030 Crazy long, no white space. 2365 01:55:29,030 --> 01:55:31,030 That's because it's been minimized, just to not 2366 01:55:31,030 --> 01:55:33,580 waste space by adding lots of white space and comments. 2367 01:55:33,580 --> 01:55:37,030 But this contains a whole lot, hundreds, of CSS properties 2368 01:55:37,030 --> 01:55:40,660 that we can reuse, thanks to classes that they invented. 2369 01:55:40,660 --> 01:55:44,093 If I want to use some JavaScript code, I can also copy this script tag. 2370 01:55:44,093 --> 01:55:45,760 But we'll come back to that before long. 2371 01:55:45,760 --> 01:55:49,330 Let me now just make a couple of tweaks to this table. 2372 01:55:49,330 --> 01:55:52,360 If I go into my browser from before, this 2373 01:55:52,360 --> 01:55:55,270 is what it looked like previously, where name and number were 2374 01:55:55,270 --> 01:55:57,895 bold, but centered, and then Carter and David were on the left, 2375 01:55:57,895 --> 01:55:59,312 and the numbers were to the right. 2376 01:55:59,312 --> 01:56:00,010 It's fine. 2377 01:56:00,010 --> 01:56:03,470 It's not that pretty, but it'd be nice if it were a little prettier than that. 2378 01:56:03,470 --> 01:56:06,910 So if we add Bootstrap into it, notice one thing happens first, 2379 01:56:06,910 --> 01:56:08,680 when I reload the page. 2380 01:56:08,680 --> 01:56:12,070 No longer are Chrome's default styles used. 2381 01:56:12,070 --> 01:56:14,290 Now Bootstrap's default styles are used, which 2382 01:56:14,290 --> 01:56:17,920 is a way of enforcing similarity across Chrome, Edge, Firefox, 2383 01:56:17,920 --> 01:56:19,270 Safari, and others. 2384 01:56:19,270 --> 01:56:21,850 Notice it went from a serif font to a sans serif 2385 01:56:21,850 --> 01:56:23,600 font, and something cleaner like this. 2386 01:56:23,600 --> 01:56:28,030 It still looks pretty ugly, but let me go into Bootstrap's documentation. 2387 01:56:28,030 --> 01:56:34,120 Let me go under their content tab, for tables. 2388 01:56:34,120 --> 01:56:36,340 And if I just kind of start skimming this, 2389 01:56:36,340 --> 01:56:38,200 these are some good looking tables, right? 2390 01:56:38,200 --> 01:56:42,250 Like, there's some underlining here, some bolder font. 2391 01:56:42,250 --> 01:56:43,480 There's a dark line. 2392 01:56:43,480 --> 01:56:45,598 If I keep going, ooh, that's getting pretty, too, 2393 01:56:45,598 --> 01:56:48,640 if I want to have a colorful table, like I could figure all of this stuff 2394 01:56:48,640 --> 01:56:51,790 out myself if I want some dark mode here, 2395 01:56:51,790 --> 01:56:55,280 if I want to have alternating highlights, and so forth. 2396 01:56:55,280 --> 01:56:58,300 There's so many different stylizations of tables that I could do myself. 2397 01:56:58,300 --> 01:57:02,020 But I care about making a phone book, not about reinventing these wheels. 2398 01:57:02,020 --> 01:57:06,790 So if I read the documentation closely, it turns out that all I need to do 2399 01:57:06,790 --> 01:57:10,690 is add Bootstrap's table class to my table tag, 2400 01:57:10,690 --> 01:57:15,400 and watch with a simple reload, what my now Table.html file looks like. 2401 01:57:15,400 --> 01:57:17,140 Much nicer, right? 2402 01:57:17,140 --> 01:57:20,200 Might not be what you want, but, my God, with like two lines of code, 2403 01:57:20,200 --> 01:57:22,070 I just really prettied things up. 2404 01:57:22,070 --> 01:57:24,920 And so here, then, is the value of using something like a framework. 2405 01:57:24,920 --> 01:57:31,120 It allows you to actually create much prettier, much more 2406 01:57:31,120 --> 01:57:36,040 user-friendly websites than you might otherwise be able to make on your own, 2407 01:57:36,040 --> 01:57:38,020 certainly quickly. 2408 01:57:38,020 --> 01:57:41,650 In fact, let's iterate one more time on one other example, 2409 01:57:41,650 --> 01:57:43,670 before we introduce a bit of that code. 2410 01:57:43,670 --> 01:57:48,500 Let me go ahead and open up Search.html from before, 2411 01:57:48,500 --> 01:57:53,140 which, recall, looks like this, and Search.html on my browser 2412 01:57:53,140 --> 01:57:56,320 was this very simple Google search. 2413 01:57:56,320 --> 01:58:00,610 And suppose I want to reinvent Google.com's UI a bit more. 2414 01:58:00,610 --> 01:58:03,520 Here's a screenshot of Google.com on a typical day. 2415 01:58:03,520 --> 01:58:07,390 It's got an about link, a store link, Gmail images, these weird dots, 2416 01:58:07,390 --> 01:58:09,168 sign in, their logo. 2417 01:58:09,168 --> 01:58:10,960 It's not appearing well on the screen here, 2418 01:58:10,960 --> 01:58:13,660 but there's a big text box in the middle, and then two buttons, 2419 01:58:13,660 --> 01:58:15,940 Google search, and I'm feeling lucky. 2420 01:58:15,940 --> 01:58:19,660 Well, could I maybe go about implementing this UI myself, 2421 01:58:19,660 --> 01:58:23,680 using some HTML, some CSS, and maybe Bootstrap's help, 2422 01:58:23,680 --> 01:58:26,918 just so I don't have to figure out all of these various stylizations? 2423 01:58:26,918 --> 01:58:28,210 Well, here's my starting point. 2424 01:58:28,210 --> 01:58:33,440 In Search.html, let's go and add in Bootstrap, first and foremost, 2425 01:58:33,440 --> 01:58:38,150 so that we have access to all of their classes that are reusable now. 2426 01:58:38,150 --> 01:58:41,540 And let me go ahead and figure out how to do this. 2427 01:58:41,540 --> 01:58:47,200 Well, just like Stanford's site had like its NAV navigation bar, using a UL, 2428 01:58:47,200 --> 01:58:50,170 but they changed it from being a bulleted list to being left to right, 2429 01:58:50,170 --> 01:58:52,130 I bet I can do something like this myself. 2430 01:58:52,130 --> 01:58:54,370 So let me go into the body of my page and, first, 2431 01:58:54,370 --> 01:58:58,660 based on Bootstrap's documentation, let me add a div called 2432 01:58:58,660 --> 01:59:01,450 a div with a class of container fluid. 2433 01:59:01,450 --> 01:59:03,640 Container fluid is just a class that comes 2434 01:59:03,640 --> 01:59:07,300 with Bootstrap that says, make your web page fluid, that is, 2435 01:59:07,300 --> 01:59:08,770 grow to fill the window. 2436 01:59:08,770 --> 01:59:10,840 So that way it's going to resize nicely. 2437 01:59:10,840 --> 01:59:13,200 I'm going to go ahead and fix my indentation here. 2438 01:59:13,200 --> 01:59:14,950 If you haven't discovered this yet, if you 2439 01:59:14,950 --> 01:59:16,840 highlight multiple lines in VS Code, you can 2440 01:59:16,840 --> 01:59:18,890 hit Tab and indent them all at once. 2441 01:59:18,890 --> 01:59:21,260 So now, I have all of that inside of this div. 2442 01:59:21,260 --> 01:59:26,860 Now, just like in Stanford's site, let's create an unordered list that has maybe 2443 01:59:26,860 --> 01:59:36,370 an LI, called with a class of NAV item, and then in here, whoops, in here, 2444 01:59:36,370 --> 01:59:46,510 let me go ahead and say, A HREF=https://about.google, 2445 01:59:46,510 --> 01:59:48,780 which is the real URL of Google's about page. 2446 01:59:48,780 --> 01:59:50,580 And I'll put the about text in there. 2447 01:59:50,580 --> 01:59:54,720 Then I'm going to close my LI tag here, and I want to do one other thing, 2448 01:59:54,720 --> 01:59:56,190 because I'm using Bootstrap. 2449 01:59:56,190 --> 01:59:58,200 Bootstrap's documentation, if I read it closely, 2450 01:59:58,200 --> 02:00:03,450 says to add a class to your links, called like NAV link, and text dark, 2451 02:00:03,450 --> 02:00:08,520 to make it dark, like black or dark gray, instead of the default blue. 2452 02:00:08,520 --> 02:00:12,360 All right, so I think I have now an about link 2453 02:00:12,360 --> 02:00:14,470 in a navigation part of my screen. 2454 02:00:14,470 --> 02:00:17,970 Let me go ahead and save this and reload. 2455 02:00:17,970 --> 02:00:20,160 All right, so not exactly what I wanted. 2456 02:00:20,160 --> 02:00:23,550 It's a bulleted list, still, so I need to override this somehow. 2457 02:00:23,550 --> 02:00:26,640 Let me read Bootstrap's documentation a little more clearly. 2458 02:00:26,640 --> 02:00:28,830 And let me pretend to do that, for time's sake. 2459 02:00:28,830 --> 02:00:32,490 If I go under content, oops, if I go under components, 2460 02:00:32,490 --> 02:00:36,610 and I go to Navs and Tabs, long story short, 2461 02:00:36,610 --> 02:00:39,510 if you want to create a pretty menu like this, where your links are 2462 02:00:39,510 --> 02:00:41,610 from the left to the right, just like Stanford, 2463 02:00:41,610 --> 02:00:43,810 I essentially need HTML like this. 2464 02:00:43,810 --> 02:00:46,080 And this is subtle, but I left off this class. 2465 02:00:46,080 --> 02:00:49,710 I should have added a class called NAV on my UL. 2466 02:00:49,710 --> 02:00:50,640 So that was my bad. 2467 02:00:50,640 --> 02:00:53,130 Let me go in here and say add class equals 2468 02:00:53,130 --> 02:00:57,510 NAV, and then again, this class NAV item, Bootstrap told me to, 2469 02:00:57,510 --> 02:01:00,270 NAV link text dark, Bootstrap told me to. 2470 02:01:00,270 --> 02:01:06,330 Let me go back to my page here, reload, and OK, still kind of ugly. 2471 02:01:06,330 --> 02:01:08,970 But at least the About link is in the top left hand corner, 2472 02:01:08,970 --> 02:01:11,700 just like it should be in the real google.com. 2473 02:01:11,700 --> 02:01:13,950 Now let me whip up a couple of more links real fast. 2474 02:01:13,950 --> 02:01:17,280 Let me go and do a little copy/paste, though I bet next week 2475 02:01:17,280 --> 02:01:19,620 we can avoid this kind of copy/paste. 2476 02:01:19,620 --> 02:01:24,060 Let me change this link to be Store.google.com. 2477 02:01:24,060 --> 02:01:26,280 The text will be store. 2478 02:01:26,280 --> 02:01:30,750 Let me go ahead and create another one here for Gmail. 2479 02:01:30,750 --> 02:01:35,490 So this one's going to go to, officially, how about, 2480 02:01:35,490 --> 02:01:39,450 technically it's www.google.com/gmail. 2481 02:01:39,450 --> 02:01:40,980 Normally it just redirects. 2482 02:01:40,980 --> 02:01:43,140 And let me grab one more of these. 2483 02:01:43,140 --> 02:01:46,500 And for Google Images, and I'm going to paste this, whoops, 2484 02:01:46,500 --> 02:01:47,850 I'm going to, come on. 2485 02:01:47,850 --> 02:01:49,440 I'm going to put this here, too. 2486 02:01:49,440 --> 02:01:57,060 This is going to be images, and that URL is IMG.hp, is the URL. 2487 02:01:57,060 --> 02:02:00,090 All right, let me go ahead and reload the browser page. 2488 02:02:00,090 --> 02:02:01,650 Now it's coming along, right? 2489 02:02:01,650 --> 02:02:03,300 About, store, Gmail, images. 2490 02:02:03,300 --> 02:02:04,865 It's not quite what I want. 2491 02:02:04,865 --> 02:02:06,990 So I'd have to read the documentation to figure out 2492 02:02:06,990 --> 02:02:11,203 how to maybe nudge one of these over, to start right aligning it. 2493 02:02:11,203 --> 02:02:12,870 And there's a couple of ways to do this. 2494 02:02:12,870 --> 02:02:17,160 But one way is if I want Gmail to move all the way over and push everything 2495 02:02:17,160 --> 02:02:26,970 else, I can say that add some margin to the Gmail list item, margin start auto. 2496 02:02:26,970 --> 02:02:31,530 This is in Bootstrap's documentation, a way of saying whatever space you have, 2497 02:02:31,530 --> 02:02:33,750 just automatically shove everything apart. 2498 02:02:33,750 --> 02:02:38,250 And now, if I reload the page again, now, voila, Gmail and images 2499 02:02:38,250 --> 02:02:39,270 is over to the right. 2500 02:02:39,270 --> 02:02:41,145 All right, so now we're kind of moving along. 2501 02:02:41,145 --> 02:02:44,230 Let me go ahead and add the big blue button to sign in. 2502 02:02:44,230 --> 02:02:49,230 So here with sign in, let me go ahead and, over in my same NAV, yeah, 2503 02:02:49,230 --> 02:02:53,010 so let's go ahead and do one more LI, class equals NAV item. 2504 02:02:53,010 --> 02:02:56,250 And then, inside of this LI tag, what am I going to do? 2505 02:02:56,250 --> 02:03:01,920 Turns out there is a class that can turn a link into a button, if you say BTN, 2506 02:03:01,920 --> 02:03:05,220 for button, and then button primary, makes it blue, 2507 02:03:05,220 --> 02:03:08,362 the HREF for this one is going to be https://accounts.goo 2508 02:03:08,362 --> 02:03:12,300 gle.com/service/login, which is literally where you go if you click 2509 02:03:12,300 --> 02:03:13,440 on that big blue button. 2510 02:03:13,440 --> 02:03:15,750 The role of this link is that of button. 2511 02:03:15,750 --> 02:03:19,050 And then sign in, is going to be the text on it. 2512 02:03:19,050 --> 02:03:22,553 If I now reload the page, now we're getting even closer, 2513 02:03:22,553 --> 02:03:23,970 although it looks a little stupid. 2514 02:03:23,970 --> 02:03:26,730 Notice that sign in is way in the top right hand corner, 2515 02:03:26,730 --> 02:03:30,300 whereas the real google.com has a little bit of margin around it? 2516 02:03:30,300 --> 02:03:31,830 OK, that's an easy fix, too. 2517 02:03:31,830 --> 02:03:33,870 Let me go back into my HTML here. 2518 02:03:33,870 --> 02:03:35,657 Let me add margin-3. 2519 02:03:35,657 --> 02:03:36,990 This, too, is a Bootstrap thing. 2520 02:03:36,990 --> 02:03:39,510 They have a class called m-something. 2521 02:03:39,510 --> 02:03:42,270 The something is a number from like 1 to 5, 2522 02:03:42,270 --> 02:03:45,790 I believe, that adds just some amount of white space. 2523 02:03:45,790 --> 02:03:49,480 So if I reload now, OK, it's just a little prettier. 2524 02:03:49,480 --> 02:03:51,000 And now let me accelerate. 2525 02:03:51,000 --> 02:03:54,480 Just to demonstrate how I can take this home, let me go ahead 2526 02:03:54,480 --> 02:03:59,040 and open up my premade version of this, whereby 2527 02:03:59,040 --> 02:04:02,670 I added to this some final flourishes. 2528 02:04:02,670 --> 02:04:06,090 If I go to Search2.html, I decided to replace their logo 2529 02:04:06,090 --> 02:04:09,390 with just this out of a cat, and notice that I 2530 02:04:09,390 --> 02:04:11,473 re-implemented essentially google.com. 2531 02:04:11,473 --> 02:04:13,890 Here's a text box, here's two buttons, even though they're 2532 02:04:13,890 --> 02:04:15,450 a little washed out on the screen. 2533 02:04:15,450 --> 02:04:18,690 I even figured out how to get dots that look pretty similar to Google's. 2534 02:04:18,690 --> 02:04:22,230 And if we view source, you can see how I kind of finished this code. 2535 02:04:22,230 --> 02:04:29,130 If I go to view developer tools, and I go to elements, and I go into this div, 2536 02:04:29,130 --> 02:04:34,890 and I go into this div, you'll see that here's an image tag for happy cat. 2537 02:04:34,890 --> 02:04:39,340 And I added some classes there to make it fluid, and width 25% of the screen. 2538 02:04:39,340 --> 02:04:42,460 If I go into the form tag, this is the same form tag as before. 2539 02:04:42,460 --> 02:04:44,760 But, notice, I used button tags this time, 2540 02:04:44,760 --> 02:04:47,480 with button and button light classes. 2541 02:04:47,480 --> 02:04:49,770 And then I stylized them in a certain way. 2542 02:04:49,770 --> 02:04:53,030 And so in the end result, if I want to go ahead and search now for birds, 2543 02:04:53,030 --> 02:04:55,790 and click Google search, voila, I've implemented 2544 02:04:55,790 --> 02:04:58,790 something that's pretty darn close to Google.com, 2545 02:04:58,790 --> 02:05:01,760 without even touching raw CSS myself. 2546 02:05:01,760 --> 02:05:04,310 And now here's the value, then, of a framework. 2547 02:05:04,310 --> 02:05:06,620 You can just start to use off the shelf functionality 2548 02:05:06,620 --> 02:05:08,430 that someone else created for you. 2549 02:05:08,430 --> 02:05:10,910 But if you want to make refinements, you don't really 2550 02:05:10,910 --> 02:05:13,640 like the shade of blue that Bootstrap chose, or the gray button, 2551 02:05:13,640 --> 02:05:15,557 or you want to curve things a bit more, that's 2552 02:05:15,557 --> 02:05:17,930 where you can create your own CSS file, and do 2553 02:05:17,930 --> 02:05:20,180 the last mile, sort of fine tuning things. 2554 02:05:20,180 --> 02:05:21,770 And that tends to be best practice. 2555 02:05:21,770 --> 02:05:24,860 Stand on the shoulders of others as much as you can, using libraries. 2556 02:05:24,860 --> 02:05:27,360 And then if you really don't like what the library is doing, 2557 02:05:27,360 --> 02:05:30,110 then use your own skills and understanding of HTML and CSS 2558 02:05:30,110 --> 02:05:33,360 to refine things a bit further. 2559 02:05:33,360 --> 02:05:37,070 But still, after all of that, all of these examples we've done thus far 2560 02:05:37,070 --> 02:05:39,560 are still static, other than the Google one, 2561 02:05:39,560 --> 02:05:41,480 which searches on the real Google.com. 2562 02:05:41,480 --> 02:05:43,340 Let's take a final 5 minute break and we'll 2563 02:05:43,340 --> 02:05:47,090 give you a sense of what we can next do, next week onward, with JavaScript. 2564 02:05:47,090 --> 02:05:48,630 See you in five. 2565 02:05:48,630 --> 02:05:52,190 All right, so I think it's fair to say, we're 2566 02:05:52,190 --> 02:05:54,628 about to see our very last language. 2567 02:05:54,628 --> 02:05:56,420 Next week and final projects are ultimately 2568 02:05:56,420 --> 02:05:58,910 going to be about synthesizing so many of these. 2569 02:05:58,910 --> 02:06:01,850 Thankfully, this language called JavaScript is quite similar 2570 02:06:01,850 --> 02:06:04,038 syntactically to both C and Python. 2571 02:06:04,038 --> 02:06:06,830 And, indeed, if you can imagine doing something in either of those, 2572 02:06:06,830 --> 02:06:09,200 you can probably do it in some form in JavaScript. 2573 02:06:09,200 --> 02:06:11,550 The most fundamental difference today, though, 2574 02:06:11,550 --> 02:06:14,930 is that when you have written C code and Python code thus far, 2575 02:06:14,930 --> 02:06:16,187 you've done it on the server. 2576 02:06:16,187 --> 02:06:18,270 You've done it in the terminal window environment. 2577 02:06:18,270 --> 02:06:21,620 And when you run the code, it's running in the cloud on the server. 2578 02:06:21,620 --> 02:06:23,930 The difference now today with JavaScript is, 2579 02:06:23,930 --> 02:06:27,170 even though you're going to write it in the cloud using VS Code, 2580 02:06:27,170 --> 02:06:31,790 recall that, when a browser gets the page containing this code, 2581 02:06:31,790 --> 02:06:35,820 it's going to get a copy of the HTML, the CSS, and the JavaScript code. 2582 02:06:35,820 --> 02:06:40,820 So JavaScript, that we see today, is all going to be executed in the browser, 2583 02:06:40,820 --> 02:06:44,540 on users' own Macs, PCs, and phones, not in the server. 2584 02:06:44,540 --> 02:06:47,870 JavaScript can be used on the server, using an environment called Node.js. 2585 02:06:47,870 --> 02:06:51,560 It's an alternative to Python or Ruby or Java or other languages. 2586 02:06:51,560 --> 02:06:55,170 We are using it today client side, which is a key difference. 2587 02:06:55,170 --> 02:06:57,740 So in Scratch, let's do this one last time. 2588 02:06:57,740 --> 02:07:00,800 If you wanted to create a variable in Scratch, set encounter equal to 0. 2589 02:07:00,800 --> 02:07:03,140 In JavaScript, it's going to look like this. 2590 02:07:03,140 --> 02:07:06,050 You don't specify the type, but you do use the keyword let, 2591 02:07:06,050 --> 02:07:11,390 and there's a few others as well, that say let counter equal 0 semicolon. 2592 02:07:11,390 --> 02:07:15,440 If you want to increment that variable by one, you in JavaScript 2593 02:07:15,440 --> 02:07:18,740 could say something like, counter equals counter plus 1, 2594 02:07:18,740 --> 02:07:21,320 or you can do it more succinctly, with plus equals, 2595 02:07:21,320 --> 02:07:23,900 or the plus plus is back in JavaScript. 2596 02:07:23,900 --> 02:07:26,930 You can now say counter plus plus semicolon again. 2597 02:07:26,930 --> 02:07:29,930 In Scratch, if you wanted to do a conditional like this, 2598 02:07:29,930 --> 02:07:34,550 asking if x less than y, it looks pretty much like C. The parentheses are, 2599 02:07:34,550 --> 02:07:36,170 unfortunately, back. 2600 02:07:36,170 --> 02:07:39,500 The curly braces here are back, if you have multiple statements in particular. 2601 02:07:39,500 --> 02:07:43,760 But, syntactically, it's pretty much the same as it was for if, for if else, 2602 02:07:43,760 --> 02:07:46,310 and even for it's else if else. 2603 02:07:46,310 --> 02:07:49,430 Unlike Python, it's two words again, else if. 2604 02:07:49,430 --> 02:07:53,155 So quite, quite like C, nothing new beyond that. 2605 02:07:53,155 --> 02:07:56,030 If you want to do something forever in Scratch, you'd use this block. 2606 02:07:56,030 --> 02:07:59,540 In JavaScript, you can do it a few ways, similar to Python, similar to C, 2607 02:07:59,540 --> 02:08:00,980 you just say while true. 2608 02:08:00,980 --> 02:08:04,460 In JavaScript, Booleans are lowercase again, just like in C. 2609 02:08:04,460 --> 02:08:05,882 So it's lowercase true. 2610 02:08:05,882 --> 02:08:08,090 If you want to do something a finite number of times, 2611 02:08:08,090 --> 02:08:11,850 like repeat three times, looks almost like C as well. 2612 02:08:11,850 --> 02:08:16,260 The only difference, really, is using the word let here, instead of INT. 2613 02:08:16,260 --> 02:08:18,950 And, again, you'll use let to create a string, or an INT, 2614 02:08:18,950 --> 02:08:21,170 or any other type of variable in JavaScript. 2615 02:08:21,170 --> 02:08:24,830 The browser will figure out what type you mean from context. 2616 02:08:24,830 --> 02:08:28,040 In C we would have said INT instead. 2617 02:08:28,040 --> 02:08:31,760 Ultimately, this language, and that's it for our tour of JavaScript syntax. 2618 02:08:31,760 --> 02:08:34,310 There's bunches of other features, but syntactically it's 2619 02:08:34,310 --> 02:08:36,650 going to be that accessible, relatively speaking. 2620 02:08:36,650 --> 02:08:39,380 The power of JavaScript running in the user's browser 2621 02:08:39,380 --> 02:08:43,040 is going to be that you can change this thing in memory. 2622 02:08:43,040 --> 02:08:47,240 Think about most any website, that's at all interesting today, that you use. 2623 02:08:47,240 --> 02:08:49,580 It's typically very interactive and dynamic. 2624 02:08:49,580 --> 02:08:53,390 If you're sitting in front of Gmail on a laptop or desktop with the browser tab 2625 02:08:53,390 --> 02:08:55,950 open, and someone sends you an email, all of a sudden, 2626 02:08:55,950 --> 02:08:59,210 another row appears in your inbox, another row, another row. 2627 02:08:59,210 --> 02:09:00,530 How is that implemented? 2628 02:09:00,530 --> 02:09:02,520 Honestly, it could be an HTML table. 2629 02:09:02,520 --> 02:09:04,550 Maybe it's a bunch of divs top to bottom. 2630 02:09:04,550 --> 02:09:07,880 The point, though, is, you don't have to hit Command R or Control 2631 02:09:07,880 --> 02:09:10,340 R to reload the page to see more email. 2632 02:09:10,340 --> 02:09:13,880 It automatically appears every few seconds or minutes. 2633 02:09:13,880 --> 02:09:15,560 How is that working? 2634 02:09:15,560 --> 02:09:18,620 When you visit Gmail.com, you are downloading not just 2635 02:09:18,620 --> 02:09:22,130 HTML and CSS with your initial inbox, presumably. 2636 02:09:22,130 --> 02:09:24,200 You're downloading some JavaScript code, that 2637 02:09:24,200 --> 02:09:28,400 is designed to keep talking every second, every 10 seconds or something, 2638 02:09:28,400 --> 02:09:32,090 to Gmail servers, and they, then, are using their code 2639 02:09:32,090 --> 02:09:35,300 to add another element, another element, another element, 2640 02:09:35,300 --> 02:09:40,580 to the existing DOM, document object model, which is the fancy term for tree 2641 02:09:40,580 --> 02:09:44,660 in memory that represents HTML, so that the web page can continue 2642 02:09:44,660 --> 02:09:45,860 to update in real time. 2643 02:09:45,860 --> 02:09:47,040 Google Maps, same thing. 2644 02:09:47,040 --> 02:09:49,910 If you click and drag and drag and drag, your browser did not 2645 02:09:49,910 --> 02:09:53,160 download the entire world to your Mac or PC by default. 2646 02:09:53,160 --> 02:09:56,300 It only downloaded what's in your viewport, the rectangular region. 2647 02:09:56,300 --> 02:09:59,300 But when you click and drag, it's going to get some more tiles up there, 2648 02:09:59,300 --> 02:10:02,510 some more images, some more images, as you keep dragging, using 2649 02:10:02,510 --> 02:10:05,120 JavaScript, again, behind the scenes. 2650 02:10:05,120 --> 02:10:08,480 So let's actually use JavaScript to start interacting with pages. 2651 02:10:08,480 --> 02:10:09,788 How can we do this? 2652 02:10:09,788 --> 02:10:12,080 We can put the JavaScript code in the head of the page, 2653 02:10:12,080 --> 02:10:15,990 in the body of the page, or even factor it out to a separate file. 2654 02:10:15,990 --> 02:10:16,940 So let's take a look. 2655 02:10:16,940 --> 02:10:21,410 Here is a new version of Hello.html, that, during the break, 2656 02:10:21,410 --> 02:10:24,590 I just added a form to, because it'd be nice if this page didn't just 2657 02:10:24,590 --> 02:10:28,280 say Hello, title, Hello, body, it said, Hello, David, Hello, Carter, Hello, 2658 02:10:28,280 --> 02:10:29,480 whoever uses it. 2659 02:10:29,480 --> 02:10:32,480 I've got a form that I borrowed from some of our earlier code, 2660 02:10:32,480 --> 02:10:38,690 and that form has an input whose ID is name, that also has a submit button. 2661 02:10:38,690 --> 02:10:40,380 But there's no code in this yet. 2662 02:10:40,380 --> 02:10:43,410 So let's add a little bit of JavaScript code as follows. 2663 02:10:43,410 --> 02:10:46,910 Suppose that, when this form is submitted, I want to greet the user. 2664 02:10:46,910 --> 02:10:48,090 How can I do that? 2665 02:10:48,090 --> 02:10:51,110 Well, let's do it the somewhat messy way first. 2666 02:10:51,110 --> 02:10:55,160 I can add an attribute called on submit to the form element, 2667 02:10:55,160 --> 02:11:00,260 and I can say on submit, call the function called greet, close quotes. 2668 02:11:00,260 --> 02:11:02,360 Unfortunately, this function doesn't yet exist. 2669 02:11:02,360 --> 02:11:03,577 But I can make it exist. 2670 02:11:03,577 --> 02:11:04,910 But there's another detail here. 2671 02:11:04,910 --> 02:11:08,660 When the user clicks submit, normally forms get submitted to the server. 2672 02:11:08,660 --> 02:11:10,190 I don't want to do that today. 2673 02:11:10,190 --> 02:11:14,180 I want to just submit the form to the browsers, keep on the same page, 2674 02:11:14,180 --> 02:11:16,950 and just print to the screen, Hello, David, or so forth. 2675 02:11:16,950 --> 02:11:19,670 So I'm also going to go ahead and say, return false. 2676 02:11:19,670 --> 02:11:24,110 And this is a JavaScript way of telling the browser, even when the user tries 2677 02:11:24,110 --> 02:11:25,640 to submit the form, return false. 2678 02:11:25,640 --> 02:11:27,980 Like, no, don't let them actually submit the form. 2679 02:11:27,980 --> 02:11:30,170 But do call this function called greet. 2680 02:11:30,170 --> 02:11:34,760 In the head of my page, I'm going to add a script tag, wherein the language is 2681 02:11:34,760 --> 02:11:37,490 implicitly JavaScript, and has no relationship, 2682 02:11:37,490 --> 02:11:41,210 for those of you who took APCS with Java, just a similarly named language, 2683 02:11:41,210 --> 02:11:45,350 but no relation, I'm going to name a function called Greet. 2684 02:11:45,350 --> 02:11:48,440 Apparently in JavaScript, the way you create a function is you 2685 02:11:48,440 --> 02:11:51,170 literally say the word function instead of Def. 2686 02:11:51,170 --> 02:11:53,510 You don't specify a return type. 2687 02:11:53,510 --> 02:11:58,190 And in this function, I could do something like this, alert quote 2688 02:11:58,190 --> 02:12:01,610 unquote, how about, Hello, there. 2689 02:12:01,610 --> 02:12:05,310 Initially I'm going to keep it simple, using a built-in function called alert, 2690 02:12:05,310 --> 02:12:06,840 which is not a good user interface. 2691 02:12:06,840 --> 02:12:08,215 There are better ways to do this. 2692 02:12:08,215 --> 02:12:10,190 But we're doing something simple first. 2693 02:12:10,190 --> 02:12:13,040 Let me now go ahead and load this page again. 2694 02:12:13,040 --> 02:12:16,370 It still looks as simple as before, with just a simple text box. 2695 02:12:16,370 --> 02:12:17,750 I'll zoom in to make it bigger. 2696 02:12:17,750 --> 02:12:19,280 I'm going to type my name, but I think it's going 2697 02:12:19,280 --> 02:12:21,050 to be ignored when I click Submit. 2698 02:12:21,050 --> 02:12:22,640 It just says, Hello, there. 2699 02:12:22,640 --> 02:12:24,920 And this is, again, this is an ugly user interface. 2700 02:12:24,920 --> 02:12:28,190 It literally says the whole code space URL of the web page 2701 02:12:28,190 --> 02:12:29,390 is saying this to you. 2702 02:12:29,390 --> 02:12:33,265 It's really just meant for simple interactions like this, for now. 2703 02:12:33,265 --> 02:12:35,390 All right, let's have it say Hello, David, somehow. 2704 02:12:35,390 --> 02:12:36,840 Well, how can I do this? 2705 02:12:36,840 --> 02:12:41,030 Well, if this element on the page was given by me a unique ID, 2706 02:12:41,030 --> 02:12:45,140 it'd be nice if, just like in CSS, I can go grab the value of that text box, 2707 02:12:45,140 --> 02:12:46,280 using code. 2708 02:12:46,280 --> 02:12:47,780 And I actually can. 2709 02:12:47,780 --> 02:12:49,380 Let me go ahead and do this. 2710 02:12:49,380 --> 02:12:53,270 Let me store, in a variable called name, the result 2711 02:12:53,270 --> 02:12:58,190 of calling a special function called document.queryselector. 2712 02:12:58,190 --> 02:13:01,490 This query selector function is JavaScript's version 2713 02:13:01,490 --> 02:13:03,950 of what we were doing in CSS, to select nodes, 2714 02:13:03,950 --> 02:13:06,770 using hashes or dots or other syntax. 2715 02:13:06,770 --> 02:13:08,250 It's the same syntax. 2716 02:13:08,250 --> 02:13:13,200 So if I want to select the element whose unique ID is name, 2717 02:13:13,200 --> 02:13:16,520 I can literally just pass, in single or double quotes, hash name, 2718 02:13:16,520 --> 02:13:18,020 just like in CSS. 2719 02:13:18,020 --> 02:13:20,840 That gives me the actual node from the tree. 2720 02:13:20,840 --> 02:13:25,010 It gives me one of these rectangles from the DOM, the document object model. 2721 02:13:25,010 --> 02:13:28,160 If I actually want to get at the specific value therein, 2722 02:13:28,160 --> 02:13:31,110 I need to go one step further and say .value. 2723 02:13:31,110 --> 02:13:33,110 So, similar in spirit to Python, where we 2724 02:13:33,110 --> 02:13:36,020 saw a lot of dot notation, where you can go inside an object, 2725 02:13:36,020 --> 02:13:38,000 inside of an object, that's what's going on. 2726 02:13:38,000 --> 02:13:41,900 Long story short, in JavaScript, there is a special global variable 2727 02:13:41,900 --> 02:13:45,200 called document, that lets you just do stuff with the document, the web page 2728 02:13:45,200 --> 02:13:45,830 itself. 2729 02:13:45,830 --> 02:13:48,170 One of those functions is called query selector. 2730 02:13:48,170 --> 02:13:51,590 That function returns to you whatever it is you're selecting. 2731 02:13:51,590 --> 02:13:54,840 And dot value means go inside of that rectangle, 2732 02:13:54,840 --> 02:13:58,080 and grab the actual text that the human typed in. 2733 02:13:58,080 --> 02:14:02,060 So if I want to now say, Hello, to that person, 2734 02:14:02,060 --> 02:14:04,820 the syntax is a little different from C and Python. 2735 02:14:04,820 --> 02:14:07,550 I can use concatenation, which actually does exist in Python, 2736 02:14:07,550 --> 02:14:08,750 but we didn't use it much. 2737 02:14:08,750 --> 02:14:14,180 I can go ahead and say hello, quote unquote "Hello," plus name. 2738 02:14:14,180 --> 02:14:16,940 All right, now, if I go back to the browser window, 2739 02:14:16,940 --> 02:14:20,720 reload the page, to get the latest version of the code, type in David, 2740 02:14:20,720 --> 02:14:23,840 and click Submit, now I see, Hello, David. 2741 02:14:23,840 --> 02:14:27,230 Not the best website, but it does demonstrate how 2742 02:14:27,230 --> 02:14:29,640 I can start to interact with the page. 2743 02:14:29,640 --> 02:14:33,020 But let me stipulate that this co-mingling of languages 2744 02:14:33,020 --> 02:14:34,470 is never a good thing. 2745 02:14:34,470 --> 02:14:36,980 It's fine to use classes, but using style 2746 02:14:36,980 --> 02:14:39,153 equals quote unquote and a whole bunch of CSS, 2747 02:14:39,153 --> 02:14:42,320 that was not going to scale well, once you have lots and lots of properties. 2748 02:14:42,320 --> 02:14:44,480 Same here, once you have more and more code, 2749 02:14:44,480 --> 02:14:48,270 you don't want to just put your code inside of this on submit handler. 2750 02:14:48,270 --> 02:14:49,560 So there's a better way. 2751 02:14:49,560 --> 02:14:52,110 Let's get rid of that on summit attribute, 2752 02:14:52,110 --> 02:14:53,940 and literally never use it again. 2753 02:14:53,940 --> 02:14:56,220 That was for demonstration's sake only. 2754 02:14:56,220 --> 02:14:57,610 And let's do this. 2755 02:14:57,610 --> 02:15:01,470 Let me move the script tag, actually, just below the form, 2756 02:15:01,470 --> 02:15:05,400 but still inside the body, so that the script tag exists only 2757 02:15:05,400 --> 02:15:08,290 after the form tag exists, logically. 2758 02:15:08,290 --> 02:15:12,220 Just like in Python, your code is read top to bottom, left to right. 2759 02:15:12,220 --> 02:15:14,560 And let me now do this. 2760 02:15:14,560 --> 02:15:17,400 Let me define this function called Greet, and then 2761 02:15:17,400 --> 02:15:22,710 let me do this, document.queryselector, let me select the form on the page. 2762 02:15:22,710 --> 02:15:24,040 It doesn't have a unique ID. 2763 02:15:24,040 --> 02:15:24,870 It doesn't need to. 2764 02:15:24,870 --> 02:15:28,110 I can just reference it by name, form, because there's only one of them. 2765 02:15:28,110 --> 02:15:32,220 And let me call this special function, add event listener. 2766 02:15:32,220 --> 02:15:35,280 This is a function that listens for events. 2767 02:15:35,280 --> 02:15:38,010 Now this is actually a term of art within programming. 2768 02:15:38,010 --> 02:15:40,980 Many different languages are governed by events. 2769 02:15:40,980 --> 02:15:44,460 And pretty much any user interface is governed by events, especially phones. 2770 02:15:44,460 --> 02:15:49,073 On phones, you have touches, and you have drags, and you have long press, 2771 02:15:49,073 --> 02:15:51,240 and you have pinch, and all of these other gestures. 2772 02:15:51,240 --> 02:15:53,520 On your Mac or PC you have click, you have drag, 2773 02:15:53,520 --> 02:15:56,790 you have key down, key up, as you're moving your hands up and down 2774 02:15:56,790 --> 02:15:57,670 on the keyboard. 2775 02:15:57,670 --> 02:16:00,930 This is a non-exhaustive list of all of the events 2776 02:16:00,930 --> 02:16:03,727 that you can listen for in the context of web programming. 2777 02:16:03,727 --> 02:16:06,060 And this might be a throwback to Scratch, where, recall, 2778 02:16:06,060 --> 02:16:08,220 Scratch let you broadcast events. 2779 02:16:08,220 --> 02:16:11,550 And we had the two puppets sort of talking to one another via Events. 2780 02:16:11,550 --> 02:16:15,420 In the world of web programming, game programming, any human physical device 2781 02:16:15,420 --> 02:16:17,940 these days, they're just governed by events. 2782 02:16:17,940 --> 02:16:20,770 And you write code that listens for these events happening. 2783 02:16:20,770 --> 02:16:22,110 So what do I want to listen for? 2784 02:16:22,110 --> 02:16:25,270 Well, I want to add an event listener for the Submit event. 2785 02:16:25,270 --> 02:16:30,580 And when that happens, I want to call the Greet function, like this. 2786 02:16:30,580 --> 02:16:32,610 So this is kind of interesting. 2787 02:16:32,610 --> 02:16:36,240 Thank you, I have my Greet function as before, no changes. 2788 02:16:36,240 --> 02:16:38,760 But I'm adding one line of code down here. 2789 02:16:38,760 --> 02:16:41,880 I'm telling the browser to use document.queryselector 2790 02:16:41,880 --> 02:16:43,140 to select the form. 2791 02:16:43,140 --> 02:16:46,360 Then I'm adding an event listener, specifically for the Submit event. 2792 02:16:46,360 --> 02:16:48,480 And when that happens, I call Greet. 2793 02:16:48,480 --> 02:16:51,270 Notice I am not using parentheses after Greet. 2794 02:16:51,270 --> 02:16:53,190 I don't want to call Greet right away. 2795 02:16:53,190 --> 02:16:59,700 I want to tell the browser to call Greet, when it hears this Submit event. 2796 02:16:59,700 --> 02:17:07,800 Now let me go ahead and deliberately, I think, trip over something 2797 02:17:07,800 --> 02:17:11,820 here, let me type in my name, David, submit, and there we go. 2798 02:17:11,820 --> 02:17:13,170 All right, Hello, David. 2799 02:17:13,170 --> 02:17:17,040 All right, but let's now make this slightly better designed. 2800 02:17:17,040 --> 02:17:20,380 Right now, I'm defining a function Greet, which is fine. 2801 02:17:20,380 --> 02:17:22,360 But I'm only using it in one place. 2802 02:17:22,360 --> 02:17:24,930 And you might recall, we stumbled on this in Python, 2803 02:17:24,930 --> 02:17:28,020 where I was like, why are we creating a special function called get value 2804 02:17:28,020 --> 02:17:30,270 when we're only using it like one line later? 2805 02:17:30,270 --> 02:17:33,650 And we introduced what type of function in Python the other day? 2806 02:17:33,650 --> 02:17:34,410 AUDIENCE: Lambda. 2807 02:17:34,410 --> 02:17:37,030 SPEAKER 1: Yeah, so lambda functions, anonymous functions. 2808 02:17:37,030 --> 02:17:39,420 You can actually do this in JavaScript as well. 2809 02:17:39,420 --> 02:17:43,810 If I want to define a function all at once, I can actually do this. 2810 02:17:43,810 --> 02:17:47,470 Let me cut this onto my clipboard, paste it over here. 2811 02:17:47,470 --> 02:17:49,260 Let me fix all of the alignment. 2812 02:17:49,260 --> 02:17:50,790 Let me get rid of the name. 2813 02:17:50,790 --> 02:17:54,480 And I can actually, now, do this. 2814 02:17:54,480 --> 02:17:56,160 The syntax is a little weird. 2815 02:17:56,160 --> 02:17:59,830 But using now just these four lines of code, I can do this. 2816 02:17:59,830 --> 02:18:03,340 I can tell the browser to add an event listener for the Submit event. 2817 02:18:03,340 --> 02:18:07,139 And then when it hears that, call this function that has no name. 2818 02:18:07,139 --> 02:18:09,959 And unlike Python, this function can have multiple lines, 2819 02:18:09,959 --> 02:18:11,459 which is actually a nice thing. 2820 02:18:11,459 --> 02:18:12,523 It looks a little weird. 2821 02:18:12,523 --> 02:18:14,940 There's a lot of indentation in curly braces going on now. 2822 02:18:14,940 --> 02:18:19,260 But you can think of this as just being, run these two lines of code, 2823 02:18:19,260 --> 02:18:21,957 when the form is submitted. 2824 02:18:21,957 --> 02:18:24,540 But if I want to block the form from actually being submitted, 2825 02:18:24,540 --> 02:18:25,530 I've got to do one other thing. 2826 02:18:25,530 --> 02:18:28,738 And you would only know this from being told it or reading the documentation. 2827 02:18:28,738 --> 02:18:32,100 I need to do this function, prevent default, 2828 02:18:32,100 --> 02:18:35,930 passing in this E argument, which is a variable that represents 2829 02:18:35,930 --> 02:18:37,680 the event, more on that another time, that 2830 02:18:37,680 --> 02:18:40,290 just allows us to prevent whatever the default 2831 02:18:40,290 --> 02:18:43,320 handling of that particular event is. 2832 02:18:43,320 --> 02:18:46,590 So long story short, this is representative of the type of code 2833 02:18:46,590 --> 02:18:49,770 you might write in JavaScript, whereby you can actually interact 2834 02:18:49,770 --> 02:18:52,230 with your code, the user's actual form. 2835 02:18:52,230 --> 02:18:54,000 And we can do interesting things, too. 2836 02:18:54,000 --> 02:18:57,340 Built into browsers nowadays is functionality like this. 2837 02:18:57,340 --> 02:19:01,059 So here's a very simple example, that has just three buttons in it, one red, 2838 02:19:01,059 --> 02:19:02,190 one green, one blue. 2839 02:19:02,190 --> 02:19:04,559 Well, it turns out using JavaScript, you can control 2840 02:19:04,559 --> 02:19:06,690 the CSS of a page programmatically. 2841 02:19:06,690 --> 02:19:09,090 I can change the background of the body of the page 2842 02:19:09,090 --> 02:19:14,190 to red, to green, to blue, just by listening for clicks on these buttons, 2843 02:19:14,190 --> 02:19:16,290 and then changing CSS properties. 2844 02:19:16,290 --> 02:19:19,080 Just to give you a taste of this, if I view the page's source, 2845 02:19:19,080 --> 02:19:23,520 similar code here, I can select the red button by an ID 2846 02:19:23,520 --> 02:19:26,250 that I apparently defined on it, right up here. 2847 02:19:26,250 --> 02:19:29,680 I can add an event listener, this time not for submit, but for click. 2848 02:19:29,680 --> 02:19:32,007 And when it's clicked, I execute this one line of code. 2849 02:19:32,007 --> 02:19:34,049 And this one line of code we haven't seen before, 2850 02:19:34,049 --> 02:19:37,680 but you can go into the body of the page, its style property, 2851 02:19:37,680 --> 02:19:40,139 and you can change its background color to red. 2852 02:19:40,139 --> 02:19:42,660 This is one example of two different groups 2853 02:19:42,660 --> 02:19:44,370 not talking to one another in advance. 2854 02:19:44,370 --> 02:19:47,719 In CSS, properties that have two words are usually hyphenated, 2855 02:19:47,719 --> 02:19:49,400 like background-color. 2856 02:19:49,400 --> 02:19:52,309 Unfortunately, in JavaScript, if you do something dash something, 2857 02:19:52,309 --> 02:19:55,950 that's subtraction, which is logically nonsensical here. 2858 02:19:55,950 --> 02:20:00,740 So in CSS, you can convert background-color to, in JavaScript, 2859 02:20:00,740 --> 02:20:03,410 background Color, where you capitalize the C, 2860 02:20:03,410 --> 02:20:05,660 and you get rid of the minus sign. 2861 02:20:05,660 --> 02:20:06,990 What else can we do here? 2862 02:20:06,990 --> 02:20:09,709 Well, back in the day, there used to be a blink tag. 2863 02:20:09,709 --> 02:20:11,780 And it's one of the few historical examples 2864 02:20:11,780 --> 02:20:16,490 of a tag that was removed from HTML, because in the late '90s, early 2000s, 2865 02:20:16,490 --> 02:20:17,930 this is what the web looked like. 2866 02:20:17,930 --> 02:20:19,985 There was a lot of this kind of stuff. 2867 02:20:19,985 --> 02:20:21,860 There was even a marquee that would move text 2868 02:20:21,860 --> 02:20:23,318 from left to right over the screen. 2869 02:20:23,318 --> 02:20:25,590 And the web was a very ugly place. 2870 02:20:25,590 --> 02:20:28,879 I will admit, my very first web page probably used both of these tags. 2871 02:20:28,879 --> 02:20:30,350 But how can we bring it back? 2872 02:20:30,350 --> 02:20:33,500 Well, this is a version of the blink tag implemented in JavaScript. 2873 02:20:33,500 --> 02:20:34,010 How? 2874 02:20:34,010 --> 02:20:39,530 I wrote some code in this example, that waits every 500 milliseconds to change 2875 02:20:39,530 --> 02:20:43,280 the CSS of the page to be visible, invisible, visible, 2876 02:20:43,280 --> 02:20:46,700 invisible, because built into JavaScript is support for a clock. 2877 02:20:46,700 --> 02:20:49,260 So you can just do something on some sort of schedule. 2878 02:20:49,260 --> 02:20:51,590 Let me go ahead and open up this example, autocomplete. 2879 02:20:51,590 --> 02:20:53,059 So let me zoom back out. 2880 02:20:53,059 --> 02:20:57,559 In Autocomplete.html, I whipped up as an example, that has just a text box, 2881 02:20:57,559 --> 02:21:00,290 but I also grabbed the dictionary from problem 2882 02:21:00,290 --> 02:21:04,520 set 5 speller, so that if I want to search for something like Apple, 2883 02:21:04,520 --> 02:21:08,300 this searches that 140,000 words, using JavaScript, 2884 02:21:08,300 --> 02:21:11,188 to create what we know in the world of the web as autocomplete. 2885 02:21:11,188 --> 02:21:12,980 When you start searching for something, you 2886 02:21:12,980 --> 02:21:15,440 should start to see words that start with that phrase. 2887 02:21:15,440 --> 02:21:17,973 And sure enough, if I search for something like banana, 2888 02:21:17,973 --> 02:21:21,140 here's the three variants of bananas that appear in that file, and so forth. 2889 02:21:21,140 --> 02:21:22,190 How is that working? 2890 02:21:22,190 --> 02:21:25,620 Just JavaScript, when it finds matching words, 2891 02:21:25,620 --> 02:21:28,670 it's just updating the DOM, the tree in the computer's memory, 2892 02:21:28,670 --> 02:21:31,730 to show more and more text, or less. 2893 02:21:31,730 --> 02:21:37,970 And for one final example, this is how programs like DoorDash and Google Maps 2894 02:21:37,970 --> 02:21:39,680 and Uber Eats and so work. 2895 02:21:39,680 --> 02:21:43,850 You have built into browsers today some fancy APIs, application programming 2896 02:21:43,850 --> 02:21:47,960 interfaces, whereby you can ask for information about the user's device. 2897 02:21:47,960 --> 02:21:51,410 For instance, here, I wrote a program, in Geolocation.html, that's 2898 02:21:51,410 --> 02:21:53,257 apparently asking to know my location. 2899 02:21:53,257 --> 02:21:55,340 All right, let me go ahead and allow it this time, 2900 02:21:55,340 --> 02:21:58,010 if that's something you're comfortable with on your own device. 2901 02:21:58,010 --> 02:22:01,010 It's taking a moment, because sometimes these things take a little while 2902 02:22:01,010 --> 02:22:01,890 to analyze. 2903 02:22:01,890 --> 02:22:06,410 But, hopefully, in just a moment, there are apparently my GPS coordinates, 2904 02:22:06,410 --> 02:22:10,040 and as a final flourish today, for what you can do with a little bit of HTML 2905 02:22:10,040 --> 02:22:12,410 for your structure, CSS for your style, and now 2906 02:22:12,410 --> 02:22:17,180 JavaScript for your logic, which we'll tie in again next week, let me go ahead 2907 02:22:17,180 --> 02:22:19,790 and search Google for those GPS coordinates. 2908 02:22:19,790 --> 02:22:25,280 Zoom in here on Google Maps, and if we zoom in, in, in, 2909 02:22:25,280 --> 02:22:26,270 OK, we're pretty close. 2910 02:22:26,270 --> 02:22:29,930 We're not on that street, but there, oh, there it is, actually. 2911 02:22:29,930 --> 02:22:31,640 There is the marker it had put for us. 2912 02:22:31,640 --> 02:22:33,927 We're indeed here in Memorial Hall. 2913 02:22:33,927 --> 02:22:36,260 So all that with JavaScript, but the basic understanding 2914 02:22:36,260 --> 02:22:38,060 of the DOM and the document object model, 2915 02:22:38,060 --> 02:22:40,290 we'll pick up where we left off next week. 2916 02:22:40,290 --> 02:22:41,300 And now add a back-end. 2917 02:22:41,300 --> 02:22:43,070 See you next time. 2918 02:22:43,070 --> 02:22:44,500 [APPLAUSE] 2919 02:22:44,500 --> 02:23:18,000 [MUSIC PLAYING]