1 00:00:09,176 --> 00:00:10,906 >> Alright, welcome to CS50. 2 00:00:10,906 --> 00:00:13,146 This is the start of week eight, 3 00:00:13,146 --> 00:00:15,286 as you see on the big board here. 4 00:00:15,286 --> 00:00:16,736 We have our own little big board, 5 00:00:17,036 --> 00:00:18,966 which is currently ranking those 6 00:00:18,966 --> 00:00:22,056 that have tackled Psets 6 already, 7 00:00:22,086 --> 00:00:24,666 realize that this is purely optional, it's really just meant 8 00:00:24,666 --> 00:00:26,966 to add a fun twist to what's otherwise an 9 00:00:26,966 --> 00:00:28,616 interesting assignment. 10 00:00:28,926 --> 00:00:31,126 And you'll notice that I was number one on this board 11 00:00:31,126 --> 00:00:33,416 for like the first five minutes of having put it up 12 00:00:33,416 --> 00:00:35,486 and then I was quickly crushed by several 13 00:00:35,486 --> 00:00:39,116 of the teaching fellows, most of them former students themselves 14 00:00:39,336 --> 00:00:41,696 and we already have an appearance of several students 15 00:00:41,696 --> 00:00:42,826 and over the course of the week, I'm sure, 16 00:00:42,826 --> 00:00:43,926 I'm sure we'll see others. 17 00:00:44,526 --> 00:00:46,866 Realize that right now, the lower bound, 18 00:00:46,866 --> 00:00:49,596 if you're a little nervous or socially awkward 19 00:00:49,596 --> 00:00:51,776 about having your name and you're results put up there. 20 00:00:52,066 --> 00:00:53,756 So right now the lowest number, 21 00:00:54,066 --> 00:00:57,906 perhaps intentionally infinity amount of memory and amount 22 00:00:58,166 --> 00:01:01,626 of CPU cycles, so there's a nice healthy lower bound already 23 00:01:01,726 --> 00:01:03,986 and the upper bound right now is by our own Drew Rob, 24 00:01:04,206 --> 00:01:06,876 who I think was the top of the big board last year as well. 25 00:01:06,946 --> 00:01:10,076 So, he is perhaps among those of you, more comfortable this year, 26 00:01:10,336 --> 00:01:12,586 the guy to beat, but again this is purely for fun. 27 00:01:12,586 --> 00:01:14,526 So the past many weeks, we've focused 28 00:01:14,526 --> 00:01:16,736 on this fairly low level language C 29 00:01:16,906 --> 00:01:18,896 and hopefully you've gotten a sense, for better or for worse, 30 00:01:18,896 --> 00:01:22,066 how you can easily manipulate a machine on down 31 00:01:22,066 --> 00:01:24,986 to the specific bytes in memory. 32 00:01:24,986 --> 00:01:27,436 Now, that's often for the worst, since you've induced plenty 33 00:01:27,436 --> 00:01:28,496 of seg faults by now, 34 00:01:28,836 --> 00:01:30,766 but finally this week do we take things to a 35 00:01:30,766 --> 00:01:32,636 so called higher level language. 36 00:01:32,636 --> 00:01:33,796 This language is called PHP 37 00:01:33,796 --> 00:01:36,296 and next week a little bit of java script. 38 00:01:36,296 --> 00:01:39,086 And these are higher level in the sense that they hide a lot 39 00:01:39,086 --> 00:01:43,516 of those low level details that at the one hand are empowering 40 00:01:43,516 --> 00:01:45,776 but the other hand are also very dangerous 41 00:01:45,776 --> 00:01:46,936 and very time consuming. 42 00:01:46,936 --> 00:01:50,286 Problem sets 6 has you implementing the fastest 43 00:01:50,866 --> 00:01:54,906 dictionary that you can and part 44 00:01:54,906 --> 00:01:57,506 of that involves implementing a hash table or a tri. 45 00:01:57,506 --> 00:02:00,856 These fairly intricate and very powerful data structures 46 00:02:01,106 --> 00:02:04,836 that thankfully you get for free in a lot of languages. 47 00:02:04,836 --> 00:02:07,236 That is to say in PHP if you need a hash table, 48 00:02:07,496 --> 00:02:10,726 you pretty much write dollar sign hash table Done, 49 00:02:10,726 --> 00:02:11,776 you can start using it. 50 00:02:11,856 --> 00:02:14,616 You don't need to reinvent that wheel yourself and this is true 51 00:02:14,616 --> 00:02:19,056 of many languages, Java, PHP, Pearl, Java Script 52 00:02:19,056 --> 00:02:21,916 and a whole bunch of others, so the point of this week 53 00:02:21,916 --> 00:02:26,326 and next is to now take a big step upward in terms 54 00:02:26,326 --> 00:02:28,966 of your familiarity with languages and problem solving 55 00:02:28,966 --> 00:02:32,296 so that you now have more tools to choose from. 56 00:02:32,346 --> 00:02:35,076 So as much as we've emphasized C in this course, 57 00:02:35,126 --> 00:02:37,866 it's absolutely the wrong language to use 58 00:02:38,176 --> 00:02:39,576 for a lot of problems. 59 00:02:39,576 --> 00:02:41,566 For instance, all of these little demos I've done 60 00:02:41,566 --> 00:02:43,696 with the twitter site, the events site 61 00:02:43,696 --> 00:02:46,586 and the news site absolutely should you not use C 62 00:02:46,816 --> 00:02:48,396 to implement those kinds of web sites 63 00:02:48,396 --> 00:02:50,966 because it will just take you way too long and you'll have 64 00:02:50,966 --> 00:02:53,716 to implement so many annoying low level details 65 00:02:53,716 --> 00:02:55,866 that it will one, completely take the fun 66 00:02:56,096 --> 00:02:58,776 out of the entire experience and that itself is valuable, 67 00:02:58,776 --> 00:03:01,426 to actually enjoy what you do and two, you're just going 68 00:03:01,426 --> 00:03:03,366 to literally be reinventing wheels 69 00:03:03,366 --> 00:03:06,186 that other people have packaged up nicely in newer, 70 00:03:06,426 --> 00:03:07,836 more modern languages. 71 00:03:07,966 --> 00:03:10,516 So you'll find that this week onward and after CS50, 72 00:03:10,516 --> 00:03:13,496 hopefully you'll have a sense now of how these machines work 73 00:03:13,696 --> 00:03:15,816 and how you can really, really manipulate them, 74 00:03:15,816 --> 00:03:18,816 especially this week with Pset 6 to your will 75 00:03:18,816 --> 00:03:21,516 and to maximize performance, but it's not going 76 00:03:21,516 --> 00:03:23,036 to be the only tool in your tool kit 77 00:03:23,036 --> 00:03:26,286 and among them henceforth will be PHP, java script, 78 00:03:26,286 --> 00:03:29,466 an actual data base and some more. 79 00:03:29,466 --> 00:03:34,066 So, to do this, to start writing web based programs, 80 00:03:34,066 --> 00:03:36,336 which frankly, really allows us to do, 81 00:03:36,626 --> 00:03:38,666 well let me take a step back. 82 00:03:38,666 --> 00:03:40,666 Well, what's the point of doing web based programs? 83 00:03:40,736 --> 00:03:43,236 Well almost everyone these days has a browser 84 00:03:43,476 --> 00:03:44,926 and the alternative would be 85 00:03:44,926 --> 00:03:48,586 to have someone download a doc.exe file or download one 86 00:03:48,586 --> 00:03:51,646 of those MACDMG files and actually install it, 87 00:03:51,646 --> 00:03:54,086 so writing software that real people download and use 88 00:03:54,086 --> 00:03:56,466 on their computers, actually is kind of annoying. 89 00:03:56,466 --> 00:03:59,396 There's a lot of steps involved and the worst thing is, 90 00:03:59,446 --> 00:04:01,306 perhaps that you have to write the program 91 00:04:01,636 --> 00:04:05,156 for specific operating system or even for a specific CPU. 92 00:04:05,356 --> 00:04:07,196 So, if you want to write a program in C 93 00:04:07,366 --> 00:04:08,906 that both your MAC friends can use 94 00:04:08,906 --> 00:04:11,206 and your Windows friends can use, you kind of have 95 00:04:11,256 --> 00:04:14,126 to write it twice or at least compile it twice 96 00:04:14,466 --> 00:04:18,016 so that it works on two very different operating systems. 97 00:04:18,016 --> 00:04:20,896 GCC, we've been using, uses libraries, 98 00:04:20,896 --> 00:04:23,986 now that it's been designed for Lenox, you can use GCC 99 00:04:23,986 --> 00:04:25,936 on a Windows machine, you can use it on a MAC, 100 00:04:26,376 --> 00:04:28,146 but you're going to get somewhat different output 101 00:04:28,146 --> 00:04:29,646 because of the various libraries, 102 00:04:29,706 --> 00:04:31,286 that differ on those operating systems. 103 00:04:31,566 --> 00:04:35,296 So, these days, the web is increasingly the GUI, 104 00:04:35,296 --> 00:04:38,936 the graphical interface of choice and Google for instance, 105 00:04:38,936 --> 00:04:40,516 has really capitalized on this. 106 00:04:40,516 --> 00:04:42,706 Most of you, especially for student groups, probably use 107 00:04:42,706 --> 00:04:45,316 like Google Calendar, Google Docs, Google Spreadsheets, 108 00:04:45,316 --> 00:04:49,346 all of these things, so Google is kind of banking on this world 109 00:04:49,346 --> 00:04:51,806 of Microsoft Office and these client side programs, 110 00:04:51,806 --> 00:04:54,306 being a thing of yesteryear and the web is now going 111 00:04:54,386 --> 00:04:57,546 to become one's primary user interface, all the better. 112 00:04:57,546 --> 00:04:59,336 Because it means you can write software 113 00:04:59,336 --> 00:05:02,386 that anyone can use irrespective of their MAC, their PC, 114 00:05:02,606 --> 00:05:04,016 their actual operating system. 115 00:05:04,016 --> 00:05:06,166 So, with that said, what does it take? 116 00:05:06,346 --> 00:05:07,576 So write web based software, 117 00:05:07,836 --> 00:05:09,996 so in what language are all web pages written? 118 00:05:10,146 --> 00:05:15,436 So this thing called HTML, now HTML looks a little cryptic 119 00:05:15,436 --> 00:05:18,576 at first glance, I'm on the course's home page here, 120 00:05:18,916 --> 00:05:22,216 I'm going to go ahead and go up to page source and you're going 121 00:05:22,216 --> 00:05:26,536 to see a whole bunch of stuff that probably or hopefully looks 122 00:05:26,536 --> 00:05:28,296 like Greek to many of you at this point. 123 00:05:28,296 --> 00:05:29,946 But there's clearly some patterns, there's a lot 124 00:05:29,946 --> 00:05:32,976 of TVs right there to render that table of contestants 125 00:05:32,976 --> 00:05:36,096 on the home page, but this stuff is just call HTML 126 00:05:36,096 --> 00:05:38,566 and as the indentation suggests and the various color coding, 127 00:05:38,806 --> 00:05:40,086 there is fortunately a structure. 128 00:05:40,356 --> 00:05:43,196 HTML stands for hyper texted markup language, 129 00:05:43,406 --> 00:05:44,856 it's not a programming language 130 00:05:44,856 --> 00:05:46,926 because you can't implement logic with it, 131 00:05:47,186 --> 00:05:48,906 you can just mark up information. 132 00:05:49,216 --> 00:05:52,606 So starting today, we'll start making some web pages using HTML 133 00:05:52,806 --> 00:05:54,896 and HTML essentially tells the computer how 134 00:05:54,896 --> 00:05:56,626 to render actual data. 135 00:05:56,796 --> 00:05:59,576 Here's a word FUU, how do you want to render this? 136 00:05:59,576 --> 00:06:02,666 I want to render this as bold, so you use various tags, 137 00:06:03,246 --> 00:06:05,966 things between open brackets and closed brackets to say, 138 00:06:06,206 --> 00:06:10,336 make this bold and then you will explicitly tell the browser stop 139 00:06:10,336 --> 00:06:11,806 making this bold. 140 00:06:12,116 --> 00:06:14,436 So, how does one go about learning this? 141 00:06:14,436 --> 00:06:18,626 Well, literally after my Math 20 class years ago, 142 00:06:18,626 --> 00:06:21,366 I had a really nice CA who was like a senior at the time, 143 00:06:21,366 --> 00:06:24,016 Kirkland House, and he, I asked him for some reason, 144 00:06:24,016 --> 00:06:25,016 how do you make web pages? 145 00:06:25,016 --> 00:06:27,516 And he was a really nice guy and we went down to the lab 146 00:06:27,516 --> 00:06:28,626 in the basement of the Science Center, 147 00:06:28,626 --> 00:06:30,686 literally after Section one day and he spent 148 00:06:30,686 --> 00:06:33,476 like forty minutes teaching me how to make web pages 149 00:06:33,476 --> 00:06:34,456 and that's all it took. 150 00:06:34,456 --> 00:06:36,056 Now the thing was a God awful mess, 151 00:06:36,106 --> 00:06:37,656 the first thing I made, it was hideous. 152 00:06:37,816 --> 00:06:40,446 I downloaded every annoying graphic 153 00:06:40,446 --> 00:06:41,616 that you could find on the web. 154 00:06:41,616 --> 00:06:43,686 Things were flashing and spinning and blinking, 155 00:06:43,686 --> 00:06:46,236 but it was mine and it was really cool 156 00:06:46,456 --> 00:06:50,256 to then email this URL out to my you know, un, 157 00:06:50,416 --> 00:06:53,766 un welcoming family and friends to say look at me, 158 00:06:53,766 --> 00:06:54,956 my presence on the web. 159 00:06:54,956 --> 00:06:57,196 So that's going to be you in just a few days time, 160 00:06:57,506 --> 00:06:58,996 I had perhaps a little too much fun 161 00:06:58,996 --> 00:07:02,106 or a little too much awkwardness this morning when trolling 162 00:07:02,106 --> 00:07:03,516 through some archives. 163 00:07:03,576 --> 00:07:06,686 There's this wonderful website called the way back machine, 164 00:07:07,356 --> 00:07:10,406 oops, we won't use that one, called the way back machine 165 00:07:10,476 --> 00:07:12,406 and it led me to a bunch of links 166 00:07:12,766 --> 00:07:14,396 that this computer program maintained 167 00:07:14,396 --> 00:07:19,346 by some nice volunteers, had led me to archives 168 00:07:19,476 --> 00:07:21,456 of old websites that I actually made. 169 00:07:21,456 --> 00:07:24,836 Now this actually is not the very first, unfortunately 170 00:07:24,836 --> 00:07:26,296 that has been lost to time 171 00:07:26,616 --> 00:07:28,586 but this was apparently my original home page, 172 00:07:29,376 --> 00:07:30,606 so apparently had a thing 173 00:07:30,606 --> 00:07:32,316 for my initials back then and even then. 174 00:07:32,316 --> 00:07:34,316 But this is one of the worst design decisions 175 00:07:34,316 --> 00:07:35,316 that you can ever make. 176 00:07:35,316 --> 00:07:38,826 Before you can view my website, tell me who you are, 177 00:07:38,826 --> 00:07:41,026 like you had to actually type something into this, 178 00:07:41,026 --> 00:07:42,866 your name please and then hit enter. 179 00:07:42,866 --> 00:07:45,216 Unfortunately the archiving program on the web 180 00:07:45,216 --> 00:07:48,486 that does this didn't know how to actually submit its name, 181 00:07:48,486 --> 00:07:49,946 so you get this, so unfortunately 182 00:07:49,946 --> 00:07:52,346 that content has been lost, but then I realized 183 00:07:52,346 --> 00:07:53,926 that if I fast forwarded it for a couple of years 184 00:07:53,926 --> 00:07:56,516 in these internet archives, I then found this. 185 00:07:57,146 --> 00:07:59,176 This is more embarrassing than anything, but I thought 186 00:07:59,176 --> 00:08:01,176 if I embrace it and say, yes this was me; 187 00:08:01,176 --> 00:08:03,136 you won't find it yourself by Googling 188 00:08:03,136 --> 00:08:04,656 and then make fun of me. 189 00:08:05,166 --> 00:08:08,256 So, I had this computer in my room, dorm room, 190 00:08:08,396 --> 00:08:12,836 called Frog Man, because I had this, this is just a confession, 191 00:08:13,096 --> 00:08:16,346 so Frog Man, so this was Kermit the Frog dressed as Batman. 192 00:08:16,346 --> 00:08:18,396 For some reason I thought that this was cool at that age, 193 00:08:18,666 --> 00:08:22,266 I scanned it in, I said I need a host name for my computer, 194 00:08:22,266 --> 00:08:23,586 which they let you choose at the time, 195 00:08:23,586 --> 00:08:27,216 so I called it FrogMan.student.Harvard.edu 196 00:08:27,216 --> 00:08:29,426 and you can actually click through here. 197 00:08:30,946 --> 00:08:32,356 Turns out, what did I have here? 198 00:08:32,476 --> 00:08:35,736 About Frog Man, I mean it's really, Frog Man was born 199 00:08:35,736 --> 00:08:38,606 on an unknown day in January of 1998, 200 00:08:38,606 --> 00:08:42,326 he's a 4846 PC running red hot Lenox, I was really kind 201 00:08:42,326 --> 00:08:44,026 of a geek, apparently I was a Senior 202 00:08:44,026 --> 00:08:45,726 at the time, what did I have? 203 00:08:45,766 --> 00:08:47,926 This was actually kind of embarrassing, as I told you 204 00:08:47,926 --> 00:08:50,516 at week zero, I ran for UC president and lost. 205 00:08:51,336 --> 00:08:54,526 You can see my whole campaign, oh, you can't, 206 00:08:54,796 --> 00:08:56,456 my campaign platform has been lost. 207 00:08:56,456 --> 00:08:58,126 Oh well. Just, just as well. 208 00:08:58,186 --> 00:09:00,696 Anyhow, I shouldn't get caught up on a tangent, 209 00:09:00,696 --> 00:09:01,756 but the point is, let me 210 00:09:01,756 --> 00:09:04,026 at least make this academically motivated, 211 00:09:04,246 --> 00:09:06,406 if you look at this stuff, it's the same stuff. 212 00:09:06,406 --> 00:09:09,416 So twelve, fifteen years ago, the overall structure 213 00:09:09,416 --> 00:09:11,166 of these pages, really hasn't changed. 214 00:09:11,166 --> 00:09:13,636 And that's the funny thing, so the web was invented kind 215 00:09:13,636 --> 00:09:16,666 of by accident, at least given its current popularity these 216 00:09:16,666 --> 00:09:18,816 days, but every web page out there boils 217 00:09:18,816 --> 00:09:20,666 down to structure like this. 218 00:09:20,666 --> 00:09:22,476 And this is a bit misleading because some 219 00:09:22,476 --> 00:09:24,346 of the standards have changed, so you see a lot 220 00:09:24,346 --> 00:09:27,296 of capitalization here and this was code I wrote fifteen years 221 00:09:27,296 --> 00:09:30,366 ago, but the overall basics are the same. 222 00:09:30,366 --> 00:09:31,426 So what we'll focus today 223 00:09:31,426 --> 00:09:33,746 on is making some very simple web pages, 224 00:09:33,966 --> 00:09:37,466 then very quickly moving to more sophisticated environment, PHP, 225 00:09:37,466 --> 00:09:41,166 which will allow us to generate web pages dynamically. 226 00:09:41,256 --> 00:09:43,966 So, let's see, even for those of you a bit familiar 227 00:09:43,966 --> 00:09:46,766 with this stuff, if we can't fill in a few blanks. 228 00:09:47,136 --> 00:09:52,916 So, when you pull a web browser and go to w w w dot CS50 dot net 229 00:09:52,916 --> 00:09:54,426 and hit enter, what happens? 230 00:09:54,566 --> 00:09:58,256 Well, your computer whether it's a MAC or PC sends out a request 231 00:09:58,486 --> 00:10:01,016 to a local server, called a DNS server, 232 00:10:01,136 --> 00:10:05,526 Domain Name System server and it says hey, what is the IP address 233 00:10:05,746 --> 00:10:08,396 of the website called dub dub dub dot CS50 dot net? 234 00:10:08,836 --> 00:10:11,336 The reason for this question is that every computer 235 00:10:11,336 --> 00:10:12,696 on the internet, small white lie, 236 00:10:12,966 --> 00:10:16,686 has a unique address called the IP, internet protocol address 237 00:10:17,026 --> 00:10:17,896 and this is the number 238 00:10:17,896 --> 00:10:21,776 of the form something dot something dot something dot 239 00:10:21,776 --> 00:10:25,016 something, so it's four numbers separated by periods, 240 00:10:25,016 --> 00:10:27,626 each one of which can be between zero and two fifty five. 241 00:10:27,986 --> 00:10:30,466 So, IP addresses, if you're following along quickly here, 242 00:10:30,536 --> 00:10:32,866 how many bits total? 243 00:10:33,016 --> 00:10:34,206 Little quiz. 244 00:10:34,206 --> 00:10:35,156 >> [inaudible] 245 00:10:35,156 --> 00:10:37,716 >> So it's thirty two bits because you have four numbers, 246 00:10:37,716 --> 00:10:41,836 x dot y dot z dot w, each is between zero and two fifty five, 247 00:10:42,146 --> 00:10:43,976 that means you're using a byte, 8 bits, 248 00:10:43,976 --> 00:10:45,016 so you've got thirty two bits. 249 00:10:45,146 --> 00:10:48,076 So anyhow, every computer on the internet has an IP address, 250 00:10:48,076 --> 00:10:50,496 so this thing called a DNS server hands back 251 00:10:50,496 --> 00:10:53,376 to your computer the IP address of CS50 dot net. 252 00:10:53,586 --> 00:10:57,086 Which is one dot two dot three dot four or something like that. 253 00:10:57,086 --> 00:11:00,246 Your computer then makes a request out on the internet 254 00:11:00,246 --> 00:11:04,056 for the computer with address one dot two dot three dot four. 255 00:11:04,306 --> 00:11:07,266 There's all these machines on the internet called routers 256 00:11:07,306 --> 00:11:10,046 or gateways, these are just fancy computers whose pretty 257 00:11:10,046 --> 00:11:12,986 much sole purpose in life is to take data in from one direction 258 00:11:13,216 --> 00:11:15,226 and then send it on its way in another direction. 259 00:11:15,356 --> 00:11:18,596 Maybe that data coming in from here belongs that way or maybe 260 00:11:18,596 --> 00:11:21,356 that way or maybe that way, so if you think of a router 261 00:11:21,356 --> 00:11:23,516 as being just a computer in the middle of the United States, 262 00:11:23,646 --> 00:11:26,506 clearly there's many different directions which data can flow 263 00:11:26,706 --> 00:11:29,296 and the purpose of these devices called routers is to get data 264 00:11:29,296 --> 00:11:32,756 from point A to point B. Typically there will be thirty 265 00:11:32,756 --> 00:11:37,296 or fewer hops between point A and point B. That is a max 266 00:11:37,526 --> 00:11:40,426 of maybe thirty routers and typically it's like ten routers 267 00:11:40,466 --> 00:11:44,486 between points A and point B. Okay, so you need an IP address, 268 00:11:44,486 --> 00:11:47,746 just like a US postal address, uniquely identifies a house 269 00:11:47,746 --> 00:11:51,076 or a mailbox, and IP address uniquely identifies computers 270 00:11:51,076 --> 00:11:53,276 and thanks to these routers, which are very intelligent, 271 00:11:53,536 --> 00:11:56,616 they pretty much know based on that number what direction 272 00:11:56,616 --> 00:11:59,426 in the country or in the world that actual machine lives. 273 00:11:59,686 --> 00:12:01,876 So finally this request makes it 274 00:12:01,876 --> 00:12:03,986 from my little laptop to CS50 dot net. 275 00:12:04,486 --> 00:12:07,316 There is a thing called a web server running on that computer, 276 00:12:07,546 --> 00:12:09,686 it then realizes, oh, this is a user, 277 00:12:09,776 --> 00:12:13,166 they have requested dub dub dub CS50 dot net, let me return 278 00:12:13,166 --> 00:12:15,156 to them the CS50's home page. 279 00:12:15,356 --> 00:12:18,416 Well what is it that the web server actually returns? 280 00:12:18,416 --> 00:12:21,936 Well, the web server returns pretty much just a text file 281 00:12:22,336 --> 00:12:24,476 and let me switch back over to this computer here, 282 00:12:24,476 --> 00:12:33,026 it returns a text file that comprises, that comprises all 283 00:12:33,026 --> 00:12:36,486 of these things called tags, otherwise known as html, 284 00:12:36,906 --> 00:12:41,886 so my MAC or my PC is in receipt of a big text file like this. 285 00:12:41,886 --> 00:12:44,886 Inside of this file are some pretty basic instructions, 286 00:12:45,016 --> 00:12:48,276 one of which down here says open bracket body 287 00:12:48,326 --> 00:12:50,046 and that's essentially telling the browser, 288 00:12:50,046 --> 00:12:53,016 hey browser here comes the body of the web page and then below 289 00:12:53,016 --> 00:12:56,166 that it says open bracket table, well that's telling the browser, 290 00:12:56,166 --> 00:12:59,776 hey browser here comes a table and based on these instructions, 291 00:12:59,826 --> 00:13:02,136 these elements or these tags, 292 00:13:02,376 --> 00:13:04,886 the browser renders the information accordingly. 293 00:13:04,886 --> 00:13:08,306 In fact if I scroll down a little further, let me scroll 294 00:13:08,306 --> 00:13:11,726 down to where we actually see some familiar names perhaps, 295 00:13:12,446 --> 00:13:16,476 and right here, even though we have a big old mess going on 296 00:13:16,476 --> 00:13:18,766 and all of this was computer generated so it's not like I 297 00:13:18,766 --> 00:13:20,506 or the TFs had to type this in manually. 298 00:13:20,806 --> 00:13:23,296 Notice that we see Drew Rob's name there at top right 299 00:13:23,686 --> 00:13:30,186 and Drew Rob's name is inside of a tag called, there we go again, 300 00:13:30,186 --> 00:13:31,316 TD, okay, so this is just a teaser. 301 00:13:31,526 --> 00:13:33,656 So we'll look at the specifics of this in just a moment, 302 00:13:33,836 --> 00:13:35,886 but my computer has just received this really big 303 00:13:35,886 --> 00:13:36,456 text file. 304 00:13:36,456 --> 00:13:38,596 So what is a browser's purpose in life 305 00:13:38,596 --> 00:13:41,626 after requesting a web page and getting back a big text file? 306 00:13:41,976 --> 00:13:46,356 It parses this file, it reads this file from top to bottom, 307 00:13:46,646 --> 00:13:49,076 left to right and it does precisely 308 00:13:49,196 --> 00:13:50,766 as this file tells it to. 309 00:13:51,096 --> 00:13:54,116 If it encounters certain special tags that says put 310 00:13:54,116 --> 00:13:56,196 in image here, put a sound here, 311 00:13:56,466 --> 00:14:00,696 the browser recursively requests those files as well. 312 00:14:00,696 --> 00:14:02,906 So, most web pages these days have graphics, 313 00:14:02,906 --> 00:14:05,126 we've got the logo up top, we've got the photograph 314 00:14:05,126 --> 00:14:07,706 at top right there, CS's logo, there's a lot 315 00:14:07,706 --> 00:14:10,466 of files included inside of this one web page. 316 00:14:10,736 --> 00:14:13,606 So what a browser does again is it recursively goes through 317 00:14:13,786 --> 00:14:17,096 and requests any files that are mentioned inside 318 00:14:17,096 --> 00:14:18,596 of this HTML page. 319 00:14:18,806 --> 00:14:23,256 As in a side, now that you're sort of mature enough, 320 00:14:23,256 --> 00:14:24,816 computer science wise, to understand, 321 00:14:24,816 --> 00:14:29,586 if you go to Google dot com, if you've searched for recursion 322 00:14:29,816 --> 00:14:32,776 and hit enter, have you ever noticed this subtle joke? 323 00:14:33,516 --> 00:14:41,046 [ laughter ] 324 00:14:41,546 --> 00:14:43,986 >> So, some geeks still [inaudible], anyhow, 325 00:14:44,406 --> 00:14:46,496 you're not sure why your classmates are laughing, 326 00:14:46,496 --> 00:14:47,996 maybe ask the person next to you, 327 00:14:47,996 --> 00:14:50,566 but hopefully you're okay there. 328 00:14:50,826 --> 00:14:52,896 Okay, so that's the story, right? 329 00:14:52,896 --> 00:14:55,636 So we've got this internet that gets data from Point A to B, 330 00:14:55,856 --> 00:14:58,516 computers like mine can send requests across this internet 331 00:14:58,516 --> 00:14:59,886 and say give me your home page, 332 00:15:00,046 --> 00:15:01,956 what comes back is just a big text file. 333 00:15:01,956 --> 00:15:05,126 That's called H, HTML and browser upon receipt of that, 334 00:15:05,126 --> 00:15:06,596 reads it top to bottom, left to right 335 00:15:06,806 --> 00:15:08,796 and does what the file tells it to do. 336 00:15:08,946 --> 00:15:12,206 Well let's see if we can't fill a file like this ourselves. 337 00:15:12,206 --> 00:15:14,856 So this is just a windows PC here, I'm going to go ahead 338 00:15:14,856 --> 00:15:18,296 and run a trivial little program called Notepad. 339 00:15:18,296 --> 00:15:20,396 This is all it takes to start making web pages, 340 00:15:20,396 --> 00:15:21,996 I'm going to change my font just to bigger 341 00:15:21,996 --> 00:15:24,346 so you can see what I'm typing a little more effectively, 342 00:15:24,836 --> 00:15:26,876 but what I'm next going to do is this. 343 00:15:26,876 --> 00:15:28,836 And I'm going to cut some corners and we'll clean things 344 00:15:28,836 --> 00:15:31,756 up in a moment, but I just want to make a web page, so I'm going 345 00:15:31,756 --> 00:15:33,416 to tell the browser, alright browser, 346 00:15:33,556 --> 00:15:36,416 here comes a web page written in a language called HTML 347 00:15:36,506 --> 00:15:40,106 and I'm going to preemptively close this tag, so in HTML, 348 00:15:40,106 --> 00:15:42,836 anytime you open a tag, you must close it. 349 00:15:42,886 --> 00:15:44,316 And now let me be precise. 350 00:15:45,106 --> 00:15:47,596 HTML is a language, most web pages are written in, 351 00:15:47,716 --> 00:15:51,216 it's a complete mess, it has gotten messy over time, 352 00:15:51,216 --> 00:15:54,256 browsers have gotten very forgiving over time. 353 00:15:54,486 --> 00:15:57,366 So, we'll actually use in the course a language very similar 354 00:15:57,366 --> 00:15:59,226 in spirit called XHTML, 355 00:15:59,336 --> 00:16:01,646 extensible hyper text markup language, 356 00:16:01,976 --> 00:16:04,146 which even though you will notice inconsistencies 357 00:16:04,146 --> 00:16:06,046 like this, I didn't write XHTML, 358 00:16:06,276 --> 00:16:08,506 but I'm about to start using XHTML, 359 00:16:08,766 --> 00:16:12,776 essentially XHTML is the clean version of HTML and by 360 00:16:12,776 --> 00:16:15,206 that I mean, when you open a tag, you must close it 361 00:16:15,206 --> 00:16:17,016 and we'll see some other subtleties in a moment. 362 00:16:17,016 --> 00:16:19,656 So, those tags hopefully will say browser, 363 00:16:19,656 --> 00:16:21,616 here comes a web page written in this language, 364 00:16:21,776 --> 00:16:24,226 the closed tag says that's it, I'm done. 365 00:16:24,466 --> 00:16:26,936 So up here, you can actually have one part 366 00:16:26,936 --> 00:16:29,836 of a web page called a head and I'm going to open that tag 367 00:16:29,836 --> 00:16:31,426 and close it and then the other part 368 00:16:31,426 --> 00:16:34,546 of a web page is called the body and I'm going to close that. 369 00:16:34,546 --> 00:16:37,206 So, the web pages have two parts to them, head and body, 370 00:16:37,356 --> 00:16:39,816 essentially the head is anything in the title bar and stuff 371 00:16:39,816 --> 00:16:42,576 like that, the body is ninety nine percent of the web page. 372 00:16:42,576 --> 00:16:45,106 So actually the stuff inside the browser window, 373 00:16:45,416 --> 00:16:47,286 one of the only things that we can do in the head 374 00:16:47,396 --> 00:16:49,056 for now is to put a title. 375 00:16:49,206 --> 00:16:51,026 So if I want to name my web page, 376 00:16:51,026 --> 00:16:54,226 Hello World, and then close title. 377 00:16:54,596 --> 00:16:56,966 And if I want to put something really simple in the body, 378 00:16:56,966 --> 00:17:00,286 I might say, literally, Hello world. 379 00:17:00,286 --> 00:17:04,386 Alright, I'm going to go up to file, save and I'm going 380 00:17:04,386 --> 00:17:06,586 to save this onto my desktop and I'm going 381 00:17:06,586 --> 00:17:08,546 to call this Hello dot HTML, 382 00:17:08,766 --> 00:17:10,636 which is the convention for most web pages. 383 00:17:10,636 --> 00:17:12,086 Now if I go back to my desktop, 384 00:17:12,376 --> 00:17:15,626 I have this file called Hello dot HTML and incur the icon 385 00:17:15,626 --> 00:17:17,396 that Windows has automatically assigned to it, 386 00:17:17,606 --> 00:17:19,326 this is actually a web page. 387 00:17:19,586 --> 00:17:22,036 So that is my very first web page. 388 00:17:22,556 --> 00:17:25,076 Kind of misnomer, because where is this file not. 389 00:17:25,486 --> 00:17:27,346 On the web, right? 390 00:17:27,346 --> 00:17:30,396 It's on my desktop, so if I kind of like an idiot, 391 00:17:30,396 --> 00:17:34,946 go and copy paste this URL up here and tell all my family 392 00:17:34,946 --> 00:17:36,746 and friends, oh, I just took CS50, 393 00:17:36,866 --> 00:17:38,716 learned how to make web pages, visit here. 394 00:17:39,216 --> 00:17:41,116 Like, they're going to get an error because they're going 395 00:17:41,116 --> 00:17:42,556 to click that link and they're going to try 396 00:17:42,556 --> 00:17:46,506 to open their own copy of Hello dot HTML in their own mail 397 00:17:46,506 --> 00:17:48,186 in folder, which really doesn't make sense 398 00:17:48,186 --> 00:17:50,706 on their local computer, so clearly, we're missing a step. 399 00:17:51,006 --> 00:17:54,216 We now need to move this file out onto the World Wide Web. 400 00:17:54,436 --> 00:17:57,556 Alright, well thankfully, we have access to web servers. 401 00:17:57,556 --> 00:18:00,526 In fact in the course, we have our own server called CS50 dot 402 00:18:00,526 --> 00:18:02,536 net, we now have this new infrastructure 403 00:18:02,536 --> 00:18:04,956 that we mentioned last week and we're going to use for Pset 6, 404 00:18:05,176 --> 00:18:07,966 which is Cloud dot CS50 dot net and just 405 00:18:07,966 --> 00:18:12,656 as Cloud dot CS50 dot net let's you use SSH and Compilers, 406 00:18:12,906 --> 00:18:15,496 it's also running software called a web server, 407 00:18:15,616 --> 00:18:17,696 which is a software, it doesn't necessarily refer 408 00:18:17,696 --> 00:18:19,826 to a physical device, which means you can go 409 00:18:19,826 --> 00:18:22,546 to Cloud dot CS50 dot Net with a browser 410 00:18:22,756 --> 00:18:24,436 and actually see its home page. 411 00:18:24,676 --> 00:18:26,986 Now unfortunately there's really nothing there 412 00:18:26,986 --> 00:18:29,846 on Cloud dot CS50 dot Net, if I go ahead 413 00:18:29,846 --> 00:18:33,126 and enter there I get this error because we're not using it 414 00:18:33,196 --> 00:18:38,586 for an actual presence, but in fact if I go to this URL, 415 00:18:38,586 --> 00:18:40,556 which I'll tease apart in a moment. 416 00:18:40,736 --> 00:18:46,836 [inaudible] CS50 Pset6 and then got to big board dot CGI, 417 00:18:46,866 --> 00:18:49,636 what you will actually see is that table that you're seeing 418 00:18:49,636 --> 00:18:52,696 on our courses home page, actually lives on the Cloud, 419 00:18:52,696 --> 00:18:53,496 because after all that's 420 00:18:53,496 --> 00:18:55,916 where you will be running your own problem sets code. 421 00:18:56,146 --> 00:18:59,786 So I just generated on this Cloud this file here 422 00:18:59,986 --> 00:19:02,396 that using some PHP tricks I then integrate 423 00:19:02,586 --> 00:19:03,746 into our course's website. 424 00:19:03,746 --> 00:19:04,846 But to take away for now is 425 00:19:04,846 --> 00:19:07,636 that Cloud dot CS50 dot Net is a server. 426 00:19:07,946 --> 00:19:10,496 So how do I actually get my content there? 427 00:19:10,756 --> 00:19:12,826 Well, let me go ahead and do this, I'm going to go ahead 428 00:19:12,826 --> 00:19:15,426 in SSH2 Cloud dot CS50 dot Net. 429 00:19:15,426 --> 00:19:18,206 I'm going to go ahead and double click my settings 430 00:19:18,206 --> 00:19:20,946 because I've prefabbed it here with putty, I'm going to log 431 00:19:20,946 --> 00:19:23,946 in as CS50, you would log in as yourselves 432 00:19:24,556 --> 00:19:27,006 and now I have this little prompt here which is identical 433 00:19:27,006 --> 00:19:30,156 in spirit to NICE dot FES, except now we have more control 434 00:19:30,156 --> 00:19:32,936 over things and if you want to start hosting a web site 435 00:19:33,136 --> 00:19:35,506 on a typical server, what first you would have 436 00:19:35,506 --> 00:19:38,586 to do is write MKDR Public HTML. 437 00:19:39,116 --> 00:19:40,796 The World has adopted some conventions 438 00:19:40,866 --> 00:19:43,496 that says all web pages for a user must live 439 00:19:43,496 --> 00:19:45,686 in a folder called Public HTML. 440 00:19:46,216 --> 00:19:48,746 Alright, so I go ahead and do that, I can now go 441 00:19:48,746 --> 00:19:51,346 into my Public HTML directory, 442 00:19:51,716 --> 00:19:54,036 now I need to actually put some content there. 443 00:19:54,326 --> 00:19:56,196 So actually I'm going to go ahead and do Nano 444 00:19:56,466 --> 00:20:00,536 and Hello dot HTML and you know what, let me go to Notepad 445 00:20:00,536 --> 00:20:03,536 and let me copy this, let me paste this in here. 446 00:20:03,536 --> 00:20:06,886 I know that's very annoying when that happens to, let me go ahead 447 00:20:06,886 --> 00:20:11,306 and fix this, the fancy way, there are ways to avoid that, 448 00:20:11,306 --> 00:20:13,056 but this will be faster. 449 00:20:13,196 --> 00:20:16,656 Okay, so now I have a file called Hello dot HTML that's 450 00:20:16,656 --> 00:20:19,106 inside of my Cloud Account, identical in spirit 451 00:20:19,106 --> 00:20:21,116 to you having dot C files and dot H files 452 00:20:21,116 --> 00:20:23,506 in your NICE accounts and now your Cloud accounts as well. 453 00:20:23,846 --> 00:20:25,966 So, let me see what happens if I go 454 00:20:25,966 --> 00:20:30,756 to now Cloud dot CS50 dot Net, so Cloud dot CS50 dot Net 455 00:20:30,756 --> 00:20:33,316 and then because I'm a user on the server, 456 00:20:33,406 --> 00:20:36,586 you have to have kind of an ugly URL, so for problem sets 7 457 00:20:36,586 --> 00:20:38,706 and 8, you guys, too have kind of ugly URLs 458 00:20:38,706 --> 00:20:41,576 but this is the convention when you're on a shared server 459 00:20:41,576 --> 00:20:43,606 with hundreds or thousands of other people. 460 00:20:44,256 --> 00:20:47,306 I'm going to type TILDACS50 and then Enter. 461 00:20:47,726 --> 00:20:50,096 And what this is showing me now are the contents, 462 00:20:50,146 --> 00:20:52,036 not of my home directory, because that would be kind 463 00:20:52,036 --> 00:20:55,046 of bad if people on the whole internet now could see inside 464 00:20:55,046 --> 00:20:57,136 of my home directory, but you do see 465 00:20:57,136 --> 00:20:59,446 that this is apparently the contents of what folder? 466 00:21:00,066 --> 00:21:04,156 What, whose folders contents are we now seeing? 467 00:21:05,146 --> 00:21:07,456 And I kind of tricked you, I had a public HTML already 468 00:21:07,456 --> 00:21:08,526 and there was already some stuff in it. 469 00:21:08,906 --> 00:21:11,206 But this is my public HTML directory. 470 00:21:11,416 --> 00:21:12,316 So notice, this is just one 471 00:21:12,316 --> 00:21:13,686 of those things you've got to remember. 472 00:21:13,686 --> 00:21:15,066 So even though when you're 473 00:21:15,066 --> 00:21:19,176 on the command line using Putty using SSH, C, 474 00:21:19,176 --> 00:21:23,786 something like TILDACS50 actually denotes what directory? 475 00:21:25,346 --> 00:21:28,016 Your home directory, there's this dichotomy, 476 00:21:28,056 --> 00:21:31,926 once you're using a website, TILDCS50 or TILDAFUU 477 00:21:31,926 --> 00:21:33,656 or TILDMAELIN [assumed spelling] actually refers 478 00:21:33,656 --> 00:21:36,426 to MAILENS public HTML directory, 479 00:21:36,426 --> 00:21:37,656 so when you're using the web, 480 00:21:37,886 --> 00:21:39,506 the TILDA means something a little different. 481 00:21:39,686 --> 00:21:41,036 Alright, well that's fine, let me go ahead 482 00:21:41,036 --> 00:21:44,866 and click Hello dot HTML and I seem to have a problem. 483 00:21:45,856 --> 00:21:48,706 So, it's forbidden and this kind of defeats the whole point 484 00:21:48,706 --> 00:21:51,656 of the web, so what probably is the solution here? 485 00:21:52,166 --> 00:21:53,986 Or just intuitively even? 486 00:21:53,986 --> 00:21:55,676 >> [inaudible] 487 00:21:55,676 --> 00:21:58,166 >> So it's forbidden, you don't have permission 488 00:21:58,166 --> 00:21:59,976 to access this file on the server, 489 00:22:00,216 --> 00:22:01,766 so we need to give ourselves permission. 490 00:22:01,766 --> 00:22:03,986 So I'm going to go over, so this is not something that most 491 00:22:03,986 --> 00:22:06,206 of you have had to do for problem sets yet, but I'm going 492 00:22:06,206 --> 00:22:11,246 to go ahead and let me do LS-L Hello dot HTML. 493 00:22:11,596 --> 00:22:14,166 Anytime you do at dash L, remember that's the long listing 494 00:22:14,166 --> 00:22:15,856 and it gives you more information, 495 00:22:15,856 --> 00:22:18,166 we started to discuss this in the current problem set 496 00:22:18,476 --> 00:22:19,566 and even in passed ones. 497 00:22:19,776 --> 00:22:23,406 So now notice, I apparently have a file called Hello dot HTML, 498 00:22:23,676 --> 00:22:27,276 this was when it was made, 1:33 pm, it's owned by user CS50 499 00:22:27,276 --> 00:22:29,386 and then there's these things over here, 500 00:22:29,736 --> 00:22:32,696 so these little hyphens actually are bad thing, 501 00:22:32,696 --> 00:22:36,226 because what those hyphens indicate are the permissions 502 00:22:36,226 --> 00:22:39,276 for a file for myself, the so called owner, 503 00:22:39,686 --> 00:22:43,176 followed by my group, which happens to be CS50, but you guys 504 00:22:43,176 --> 00:22:45,256 on the Cloud are a special group called students 505 00:22:45,256 --> 00:22:46,586 and we generally are in staff. 506 00:22:47,246 --> 00:22:51,056 So we have myself, which are the first three bits, 507 00:22:51,346 --> 00:22:54,176 three hyphens here, then there's group permissions 508 00:22:54,606 --> 00:22:56,886 and then there is the whole world permissions. 509 00:22:57,146 --> 00:23:00,176 Now the fact that mine say RW is a good thing 510 00:23:00,176 --> 00:23:02,286 because that means I have the ability to do what two things? 511 00:23:03,516 --> 00:23:05,566 Read and Write the file, that's all that means, so, 512 00:23:05,566 --> 00:23:08,636 apparently all I need to now do is give everyone else 513 00:23:08,756 --> 00:23:11,176 that ability and we'll discuss some of these conventions 514 00:23:11,176 --> 00:23:13,296 in problem sets 7 in PDF, but I'm going 515 00:23:13,296 --> 00:23:15,886 to run a command called TRUMAUD [assumed spelling] Change Mode 516 00:23:16,176 --> 00:23:18,726 and what I'm going to say is change the mode of this file 517 00:23:18,966 --> 00:23:22,566 to six four four, which we'll discuss again in problem set, 518 00:23:22,566 --> 00:23:25,346 but just let me do an LS-L again of this file. 519 00:23:25,616 --> 00:23:27,576 Notice that has had the magical effect 520 00:23:27,576 --> 00:23:29,866 of giving everyone else Read permissions. 521 00:23:29,866 --> 00:23:31,656 I don't want to give the whole world write permissions, 522 00:23:31,886 --> 00:23:34,236 but read permissions is good because now if I go back 523 00:23:34,286 --> 00:23:38,636 to my browser window here and click reload, walla, 524 00:23:38,636 --> 00:23:42,996 I see my very simple web page, Hello World dot HTML. 525 00:23:43,196 --> 00:23:45,346 Alright, so now let's start to do some things 526 00:23:45,346 --> 00:23:46,896 that are a little more interesting 527 00:23:46,896 --> 00:23:50,776 and I'm actually going to go into some prepared examples, 528 00:23:50,776 --> 00:23:53,476 which you have print outs of today and I'm just going to look 529 00:23:53,676 --> 00:23:55,916 at this version of Hello dot HTML. 530 00:23:55,916 --> 00:23:58,596 So at the top of this file, ignore the messiness, 531 00:23:58,596 --> 00:24:00,876 just because of my font wrapping, let me go ahead 532 00:24:00,876 --> 00:24:04,206 and delete a few of these just so it doesn't confuse. 533 00:24:04,436 --> 00:24:06,146 So this is an arbitrary convention. 534 00:24:06,226 --> 00:24:08,926 In HTML, just as you can have comments in C, 535 00:24:09,136 --> 00:24:12,576 you can have comments in XHTML or HTML, open bracket, 536 00:24:12,576 --> 00:24:15,766 exclamation point, hyphen hyphen, then you put any, 537 00:24:15,766 --> 00:24:17,756 most anything you want and then below 538 00:24:17,756 --> 00:24:19,786 that you have hyphen hyphen close bracket, 539 00:24:19,786 --> 00:24:20,676 so that's a comment. 540 00:24:20,976 --> 00:24:22,896 Now the fact that I used all the stars 541 00:24:22,896 --> 00:24:25,626 and the forward slash star, it was me just being anal, 542 00:24:25,626 --> 00:24:27,146 trying to be consistent with all 543 00:24:27,146 --> 00:24:29,126 of the C examples we ever did in the course. 544 00:24:29,126 --> 00:24:30,506 But you can put anything you want, 545 00:24:30,626 --> 00:24:32,286 pretty much between those comments. 546 00:24:32,546 --> 00:24:34,846 But the magic really starts to happen down here. 547 00:24:35,096 --> 00:24:38,906 So this is pretty much the same exact file as I typed 548 00:24:39,066 --> 00:24:41,246 on the fly using Notepad dot exe, 549 00:24:41,556 --> 00:24:43,646 but notice that there's a few differences here. 550 00:24:43,646 --> 00:24:45,366 You do have a print out for notes, 551 00:24:45,896 --> 00:24:49,306 these three lines here are simply necessary, 552 00:24:49,486 --> 00:24:52,836 when you implement a web page in this language called HTML, 553 00:24:53,176 --> 00:24:55,876 you unfortunately have to type this God awful sequence 554 00:24:55,876 --> 00:24:58,236 of characters that even I have never once remembered, 555 00:24:58,236 --> 00:25:00,986 I always copy and paste it from some previous code I've written. 556 00:25:01,366 --> 00:25:04,096 But, this formality which was agreed upon a group 557 00:25:04,096 --> 00:25:06,446 of volunteers, it's an organization called the W3C, 558 00:25:06,526 --> 00:25:08,996 it's a standards group that essentially has said, 559 00:25:08,996 --> 00:25:12,376 if you want to write code in this language called XHTML, 560 00:25:12,676 --> 00:25:14,436 your page has to start with that. 561 00:25:14,436 --> 00:25:16,006 Now you can have some comments and stuff, 562 00:25:16,076 --> 00:25:18,356 but the page has to start with that. 563 00:25:18,526 --> 00:25:20,596 So this too for the course, just a copy paste 564 00:25:20,816 --> 00:25:22,956 and now there's one other difference that you have to do, 565 00:25:22,956 --> 00:25:24,616 which I was lazy about a moment ago, 566 00:25:24,966 --> 00:25:27,206 when you write open bracket HTML, 567 00:25:27,476 --> 00:25:31,596 to make sure your code is valid XHTML, you also just need 568 00:25:31,596 --> 00:25:35,386 to copy paste this XML NS thing with the equal sign, 569 00:25:35,496 --> 00:25:37,736 the double quotes with the URL inside of it. 570 00:25:37,736 --> 00:25:40,316 So I'm going to wave my hand at the reasons behind this 571 00:25:40,316 --> 00:25:41,806 because they're really just a distraction, 572 00:25:42,086 --> 00:25:44,906 but for now just take on faith that anytime you make a webpage 573 00:25:44,906 --> 00:25:47,786 for the course or for HTML in general, these are kind 574 00:25:47,786 --> 00:25:49,756 of some stupidities that you have to get started 575 00:25:49,756 --> 00:25:51,486 with by copy paste or remembrance 576 00:25:51,846 --> 00:25:52,876 and then you're ready to go. 577 00:25:52,966 --> 00:25:54,126 So now we're ready to go. 578 00:25:54,126 --> 00:25:56,146 Here is my webpage here, I'm going to go ahead 579 00:25:56,146 --> 00:25:59,216 and open this version of it, it's in, this is all linked 580 00:25:59,216 --> 00:26:01,626 on the courses web page, so lecture source 581 00:26:01,626 --> 00:26:05,076 and this is Hello dot HTML, pretty much looks the same. 582 00:26:05,296 --> 00:26:08,196 I've got Hello World top left of the body and now notice 583 00:26:08,196 --> 00:26:11,516 if I scroll up to the title, notice in the title in the head 584 00:26:11,516 --> 00:26:14,946 of the webpage is the same thing because that's what I typed. 585 00:26:15,456 --> 00:26:18,876 Just a quick change here, if I really want to be sort 586 00:26:18,876 --> 00:26:21,466 of obnoxious, especially if this thing gets indexed in Google 587 00:26:21,466 --> 00:26:24,676 and I want this showing up in Google results, if I save that 588 00:26:24,676 --> 00:26:27,866 and then reload my webpage, now you can see 589 00:26:27,866 --> 00:26:29,066 that I have this effect there. 590 00:26:29,266 --> 00:26:31,656 So we're now literally changing the internet 591 00:26:31,816 --> 00:26:33,406 as we type these commands, alright, 592 00:26:33,406 --> 00:26:34,686 so pretty powerful stuff. 593 00:26:34,956 --> 00:26:37,146 So now let's do something that's a little more interesting. 594 00:26:37,146 --> 00:26:38,846 Now I'm just going to do some things on the fly just 595 00:26:38,846 --> 00:26:41,466 to convey the relative simplicity of this stuff 596 00:26:41,666 --> 00:26:44,346 but really just to emphasize the basic building blocks. 597 00:26:44,346 --> 00:26:47,306 It's not going to be fun if we start teaching you the Bold tag, 598 00:26:47,586 --> 00:26:50,786 the Italics tag, the Center, there's so many simple things 599 00:26:50,786 --> 00:26:53,056 that you can do, just a little cheat sheet to your right 600 00:26:53,056 --> 00:26:55,776 or left hand side is really how you learn this stuff. 601 00:26:55,776 --> 00:27:00,226 I mean, even I when my, Tim my Math CF sat me down 602 00:27:00,226 --> 00:27:02,326 and taught me this stuff, he kind of did some of the basics 603 00:27:02,326 --> 00:27:04,876 to help me understand that the framework and anytime 604 00:27:04,876 --> 00:27:06,036 that you need to learn something new, 605 00:27:06,076 --> 00:27:08,196 you look at somebody else's webpage on the internet 606 00:27:08,196 --> 00:27:10,056 or you look in a manual linked to a number 607 00:27:10,056 --> 00:27:11,296 of resources on the website. 608 00:27:11,646 --> 00:27:12,816 So let's do something simple. 609 00:27:12,816 --> 00:27:15,926 I have decided that besides Hello World there I want 610 00:27:15,926 --> 00:27:18,086 to actually, I'm just going to zoom in here 611 00:27:18,166 --> 00:27:20,106 so it's more readable, I'm going to go ahead 612 00:27:20,106 --> 00:27:22,256 and make this Hello, bold. 613 00:27:22,496 --> 00:27:24,516 So it turns out there is a tag for Bold, 614 00:27:24,516 --> 00:27:26,446 open bracket B, close bracket. 615 00:27:26,446 --> 00:27:29,886 And if I save my file and go back here and reload, 616 00:27:29,886 --> 00:27:33,296 notice that Hello has indeed become a little more bold. 617 00:27:33,566 --> 00:27:35,786 Alright, so that's great, kind of a useless webpage, 618 00:27:35,786 --> 00:27:37,726 let me go ahead and put some other stuff there, 619 00:27:38,316 --> 00:27:42,576 Welcome to my first website exclamation point, 620 00:27:42,866 --> 00:27:44,836 I hope you enjoy your stay, 621 00:27:44,926 --> 00:27:46,836 it's pretty much what my original webpage was. 622 00:27:47,346 --> 00:27:49,666 So now I'm going to go back here, I'm going to reload, 623 00:27:50,206 --> 00:27:52,356 not really what I intended, 624 00:27:52,686 --> 00:27:55,426 so what's the obvious aesthetic bug? 625 00:27:57,006 --> 00:28:00,326 So, I'm missing new lines, so it turns out that web pages 626 00:28:00,326 --> 00:28:04,046 by design can have white space but it's got completely ignored 627 00:28:04,046 --> 00:28:06,166 by the browser other than single spaces. 628 00:28:06,166 --> 00:28:08,356 If you hit the space bar once, the browser notices, 629 00:28:08,356 --> 00:28:11,346 hit it twice or hit the er, enter key, stops noticing. 630 00:28:11,586 --> 00:28:14,266 So if I reload now, still no difference. 631 00:28:14,586 --> 00:28:16,836 So that's because this is a markup language, 632 00:28:16,836 --> 00:28:20,086 if you want a line break, you must say break here, 633 00:28:20,086 --> 00:28:22,286 so BR is the line break instruction. 634 00:28:22,316 --> 00:28:23,616 If I want it there and there, 635 00:28:23,826 --> 00:28:25,256 I'm going to simply put it twice. 636 00:28:25,256 --> 00:28:27,506 And now a word on the syntax in just a moment. 637 00:28:27,506 --> 00:28:29,546 But let me reload and now okay. 638 00:28:29,886 --> 00:28:32,526 Still hideous, but at least I'm starting to make sense 639 00:28:32,526 --> 00:28:34,196 of the general syntax here. 640 00:28:34,546 --> 00:28:36,756 So why did I do this thing here? 641 00:28:37,046 --> 00:28:38,916 Well, it turns out there are some tags 642 00:28:39,216 --> 00:28:41,766 that take what are called attributes, you can take a tag 643 00:28:41,766 --> 00:28:43,166 and you can tweak it's behavior, 644 00:28:43,436 --> 00:28:46,196 by adding what's called an attribute to that tag. 645 00:28:46,576 --> 00:28:49,236 So let's see, what's one that I might want to do, 646 00:28:49,236 --> 00:28:51,066 I'd really like to start centering this text, 647 00:28:51,666 --> 00:28:55,036 so one approach to doing that is and there are more modern ways, 648 00:28:55,086 --> 00:28:56,096 but I'm going to keep it simple. 649 00:28:56,096 --> 00:29:00,016 I'm going to do center and just to be anal, much like we advise 650 00:29:00,016 --> 00:29:02,506 in C and in the code you've been writing so far, 651 00:29:02,506 --> 00:29:04,466 I'm going to re-indent manually, 652 00:29:04,466 --> 00:29:05,836 though some tools can facilitate, 653 00:29:06,046 --> 00:29:07,286 just to keep everything clean. 654 00:29:07,526 --> 00:29:10,646 So anytime I open a tag, stylistically I indent 655 00:29:10,746 --> 00:29:13,686 by two spaces, four spaces, just be consistent 656 00:29:14,026 --> 00:29:17,196 and now what I have is a webpage that is not only line by line 657 00:29:17,196 --> 00:29:19,706 by line, but it's also now centered. 658 00:29:19,996 --> 00:29:21,136 Alright, so that's good. 659 00:29:21,136 --> 00:29:25,816 But now this is not really explaining these slashes here 660 00:29:25,816 --> 00:29:28,656 and it's not really a webpage, it's kind of a dead end, right? 661 00:29:28,656 --> 00:29:31,206 The whole point of the hyper text markup language is 662 00:29:31,206 --> 00:29:33,796 to actually link to other hyper links. 663 00:29:34,066 --> 00:29:37,366 I've got none of that, so let's actually say a link 664 00:29:37,726 --> 00:29:38,676 at the bottom here. 665 00:29:39,736 --> 00:29:44,686 My favorite site is dub dub dub dot CS50 dot net, 666 00:29:44,956 --> 00:29:46,296 let's do that, reload. 667 00:29:46,986 --> 00:29:49,296 Okay, that's great, but now you're going to get users, 668 00:29:49,386 --> 00:29:50,636 you know still a dead end. 669 00:29:50,966 --> 00:29:53,156 So unlike a lot of popular websites, 670 00:29:53,326 --> 00:29:55,076 FML and the like included in Facebook, 671 00:29:55,076 --> 00:29:56,916 when you post a link normally they, 672 00:29:56,916 --> 00:29:58,956 these days they automatically get hyper linked, 673 00:29:59,136 --> 00:30:01,526 well that's because someone at Facebook wrote a few lines 674 00:30:01,526 --> 00:30:04,746 of code that examines anything you type into their website 675 00:30:04,746 --> 00:30:06,996 and it realizes, oh, this starts with dub dub dub, 676 00:30:07,206 --> 00:30:09,936 this ends with a dot com or a dot net, I'm going to assume 677 00:30:09,936 --> 00:30:11,626 with high probability that this is a URL, 678 00:30:11,696 --> 00:30:13,376 let me make it clickable. 679 00:30:13,606 --> 00:30:15,976 How do you make something clickable, well you have 680 00:30:15,976 --> 00:30:17,876 to actually use one of these tags, so I'm going 681 00:30:17,876 --> 00:30:20,446 to say open bracket A for anchor, 682 00:30:20,806 --> 00:30:22,356 where do I want this link to lead, 683 00:30:22,356 --> 00:30:25,526 well the attribute is called hyper ref or Href. 684 00:30:25,996 --> 00:30:28,276 So I'm going to do quote unquote and now I'm going 685 00:30:28,276 --> 00:30:32,256 to type the actual URL that I want the user to go to, 686 00:30:32,826 --> 00:30:37,016 close quote, close angle bracket and now at the side here, 687 00:30:37,016 --> 00:30:38,576 VIM [assumed spelling], the editor that I'm using, 688 00:30:38,686 --> 00:30:40,716 let me actually move this onto a new line for space, 689 00:30:41,056 --> 00:30:42,256 it's already highlighting it. 690 00:30:42,256 --> 00:30:43,636 It doesn't mean that I can click it here, 691 00:30:43,636 --> 00:30:47,226 it's just an aesthetic thing, so let me go ahead and say, 692 00:30:47,496 --> 00:30:50,366 stop treating my text as a hyper link, 693 00:30:50,486 --> 00:30:53,366 what's the command for that? 694 00:30:53,366 --> 00:30:53,433 >> [inaudible] 695 00:30:53,433 --> 00:30:56,046 >> Yeah, so backlash A and now period. 696 00:30:56,046 --> 00:31:01,126 And actually and I can keep saying more stuff to emphasize 697 00:31:01,166 --> 00:31:02,726 that this link is inline. 698 00:31:02,966 --> 00:31:04,286 I have a whole bunch of text 699 00:31:04,286 --> 00:31:06,416 but the part that's underlined is the thing that is 700 00:31:06,416 --> 00:31:08,776 between the anchor tag and the close anchor tag. 701 00:31:09,076 --> 00:31:12,026 Popular mistake and you may have seen it in websites like this, 702 00:31:12,106 --> 00:31:13,156 though not that common 703 00:31:13,156 --> 00:31:16,226 in corporate websites do something stupid like oops, 704 00:31:16,386 --> 00:31:19,066 close B, which is kind of nonsensical, 705 00:31:19,326 --> 00:31:20,666 now weird things happened. 706 00:31:20,666 --> 00:31:22,346 Now this is where browsers have gone quote, 707 00:31:22,346 --> 00:31:24,016 unquote forgiving over the years. 708 00:31:24,016 --> 00:31:26,816 You know ten, fifteen years ago when this stuff was starting 709 00:31:26,816 --> 00:31:29,686 to catch on, there really weren't people saying let's 710 00:31:29,686 --> 00:31:33,056 adhere to these standards, the thing grew up fairly organically 711 00:31:33,206 --> 00:31:35,356 and browsers started competing amongst themselves 712 00:31:35,356 --> 00:31:36,236 for various features. 713 00:31:36,536 --> 00:31:38,426 So you will find over the next several weeks 714 00:31:38,476 --> 00:31:41,326 that sometimes your website looks different in IE 715 00:31:41,636 --> 00:31:44,346 versus Firefox versus Chrome versus Safari 716 00:31:44,346 --> 00:31:46,836 and frankly it's just a big old headache and it's largely 717 00:31:46,836 --> 00:31:49,536 because companies have never once agreed properly 718 00:31:49,866 --> 00:31:52,546 on certain interpretations for instance and in this case here. 719 00:31:52,986 --> 00:31:56,196 What is the right approach if you have an open A tag 720 00:31:56,196 --> 00:31:58,926 but a closed B tag, should I just assume it was a mistake 721 00:31:58,926 --> 00:32:02,746 and stop hyper linking it or should I, and this is why 722 00:32:02,746 --> 00:32:05,866 when you get ambiguity, it's unclear what the browser should, 723 00:32:05,866 --> 00:32:07,496 so some browsers do different things. 724 00:32:07,496 --> 00:32:09,716 But we're going to fix and I'm going to realize 725 00:32:09,756 --> 00:32:11,036 that if I now click this link, 726 00:32:11,146 --> 00:32:13,926 I in fact get whisked away to CS50's home page. 727 00:32:14,236 --> 00:32:17,346 Alright, laughed again, alright, so, 728 00:32:17,346 --> 00:32:19,586 what do we have that's interesting here? 729 00:32:19,586 --> 00:32:23,236 We have tags, open and closed, we have attributes like this. 730 00:32:23,416 --> 00:32:26,026 This is an attribute that modifies the behavior 731 00:32:26,346 --> 00:32:30,996 of the tag, so it turns out that the tags, aka elements, 732 00:32:31,356 --> 00:32:33,276 can have zero or more attributes. 733 00:32:33,456 --> 00:32:36,096 I say zero or more because this guy doesn't have an attribute, 734 00:32:36,276 --> 00:32:37,536 this guy doesn't have an attribute, 735 00:32:37,536 --> 00:32:39,746 this guy doesn't have an attribute, but this one does 736 00:32:39,816 --> 00:32:42,846 because not only are we telling the browser, here is an anchor, 737 00:32:42,846 --> 00:32:45,456 here is a clickable link, you have to tell that tag 738 00:32:45,456 --> 00:32:48,506 where it goes and so the general structure for all 739 00:32:48,506 --> 00:32:50,786 of these tags is generally this format. 740 00:32:51,036 --> 00:32:53,936 Open bracket, tag name, then zero or more 741 00:32:53,936 --> 00:32:56,836 of the following attribute equals quote, unquote value. 742 00:32:56,836 --> 00:32:59,956 Attribute equals quote, unquote value and so forth. 743 00:33:00,076 --> 00:33:01,946 And now we can use this same idea 744 00:33:01,946 --> 00:33:03,876 and actually use some attributes. 745 00:33:03,876 --> 00:33:05,926 It turns out and I know this because I read the manual 746 00:33:05,926 --> 00:33:09,596 or I went to class but there is a BG color attribute for body, 747 00:33:09,906 --> 00:33:14,086 so I can actually say that I want my webpage to be, say, red. 748 00:33:14,086 --> 00:33:17,346 And let's actually go back to this page here, whoops, 749 00:33:18,156 --> 00:33:22,266 let's go back here to Hello dot HTML, okay, 750 00:33:22,496 --> 00:33:24,156 so now it's actually starting to look less 751 00:33:24,156 --> 00:33:25,606 like my original home page. 752 00:33:26,046 --> 00:33:29,406 So, what else can I now do? 753 00:33:29,406 --> 00:33:31,946 Well, this is already getting sufficiently hideous, 754 00:33:32,226 --> 00:33:33,206 is there anything else that you would 755 00:33:33,206 --> 00:33:35,086 like to see how we do before we forge ahead 756 00:33:35,086 --> 00:33:36,536 with less ugly things. 757 00:33:37,746 --> 00:33:39,536 What's something you often see in a webpage? 758 00:33:39,536 --> 00:33:40,666 >> [inaudible] 759 00:33:40,666 --> 00:33:42,446 >> Flatching, okay, there is a tag 760 00:33:42,616 --> 00:33:43,926 from yester year called Blink 761 00:33:43,926 --> 00:33:47,906 which was actually deprecated forcibly by several companies 762 00:33:47,906 --> 00:33:51,166 because they hated web pages that would blink text like this, 763 00:33:51,666 --> 00:33:54,146 but we kind of mimic this, alright, we'll show one thing 764 00:33:54,146 --> 00:33:55,426 which is actually useful. 765 00:33:55,426 --> 00:33:57,756 Let me go ahead and search for something called animated jif, 766 00:33:58,266 --> 00:34:00,456 so a jif is a graphical format, you guys played 767 00:34:00,456 --> 00:34:02,236 with BMPs this week and the jpegs, 768 00:34:02,236 --> 00:34:03,356 you've probably seen jifs, 769 00:34:03,696 --> 00:34:05,186 unfortunately the world has spent a lot 770 00:34:05,186 --> 00:34:08,066 of time making really ugly things that blink and spin 771 00:34:08,066 --> 00:34:12,326 and dance, one of them, we have apparently five thousand here. 772 00:34:12,326 --> 00:34:13,776 Let's see if we can find something. 773 00:34:13,776 --> 00:34:15,146 How about computers. 774 00:34:15,306 --> 00:34:20,396 This is just some random website from Google, site is for sale 775 00:34:20,396 --> 00:34:24,286 if you're interested, okay, so like this is the web 776 00:34:24,286 --> 00:34:27,316 as I knew it in like 1995, like this, 777 00:34:27,636 --> 00:34:29,536 I mean this is what it looked like. 778 00:34:29,646 --> 00:34:32,286 Little graphics like this, little disks popping 779 00:34:32,286 --> 00:34:34,106 out of toasters, I mean this was the internet. 780 00:34:34,536 --> 00:34:38,256 So, I forgot it was, whoa okay, those are popups 781 00:34:38,256 --> 00:34:40,036 which have largely been done away with, too. 782 00:34:40,036 --> 00:34:40,966 Let's pick something here. 783 00:34:40,966 --> 00:34:41,956 Alright, let's pick this guy. 784 00:34:41,956 --> 00:34:43,956 So, I'm going to click this graphic and just 785 00:34:43,956 --> 00:34:45,306 to demonstrate a common work flow, 786 00:34:45,306 --> 00:34:47,466 especially for final projects and for the next couple 787 00:34:47,466 --> 00:34:49,916 of problem sets, I want this guy in my webpage. 788 00:34:50,266 --> 00:34:53,206 So one way I can do this, is I can copy the URL here, 789 00:34:53,566 --> 00:34:55,686 I can go back to my little file. 790 00:34:55,686 --> 00:34:57,476 I'm going to put a line break because I'm going 791 00:34:57,476 --> 00:34:59,186 to put this little graphic at the bottom and I'm going 792 00:34:59,186 --> 00:35:01,746 to use the image tag, succinctly just like C, 793 00:35:01,746 --> 00:35:02,896 it's not image, it's IMG. 794 00:35:02,896 --> 00:35:06,216 I need to tell the browser the source of this image, 795 00:35:06,216 --> 00:35:09,266 so I'm going to go ahead and give it that URL and then 796 00:35:09,266 --> 00:35:13,166 because there's no need to close a tag like image, 797 00:35:13,286 --> 00:35:15,326 alright the image is either there or it's not, 798 00:35:15,326 --> 00:35:16,706 we don't start putting an image 799 00:35:16,906 --> 00:35:19,446 through some stuff then stop putting an image just 800 00:35:19,446 --> 00:35:22,406 like a line break is similarly this atomic idea, 801 00:35:22,566 --> 00:35:24,106 either do it or don't do it. 802 00:35:24,106 --> 00:35:27,466 You can't start and finish a line break, that's why here to, 803 00:35:27,466 --> 00:35:30,056 I put this angled bracket in here. 804 00:35:30,316 --> 00:35:33,716 So, to be clear, this would be correct code, 805 00:35:33,716 --> 00:35:35,046 but it just looks stupid. 806 00:35:35,046 --> 00:35:38,066 Like open tag, close tag, it's all kind of wasteful in terms 807 00:35:38,066 --> 00:35:40,116 of bytes, so the world has this convention 808 00:35:40,116 --> 00:35:43,186 where you actually can put the slash inside of the tag, 809 00:35:43,456 --> 00:35:45,566 especially during generally after a space like that 810 00:35:45,566 --> 00:35:47,666 and that just says start and stop immediately 811 00:35:47,666 --> 00:35:49,686 because there's nothing going to go inside of this anyway. 812 00:35:50,016 --> 00:35:52,626 So now let me save this, let me go back to the browser, 813 00:35:52,626 --> 00:35:54,746 I'm going to go to my webpage, now backup guys, 814 00:35:54,746 --> 00:35:59,336 reload and voila, my webpage is really getting fancy. 815 00:35:59,676 --> 00:36:01,026 Now, there's an interesting aside, 816 00:36:01,236 --> 00:36:02,516 this is generally frowned upon, 817 00:36:02,516 --> 00:36:04,026 linking to someone else's content, 818 00:36:04,026 --> 00:36:06,936 now even though this image is only like four kilobytes, 819 00:36:07,276 --> 00:36:09,346 I'm right now hitting reload a lot, 820 00:36:09,346 --> 00:36:11,206 every time I reload my webpage, 821 00:36:11,206 --> 00:36:14,886 my browser is hitting not only the Cloud but also what? 822 00:36:15,456 --> 00:36:18,926 That guys web server, so this generally is a bad thing 823 00:36:18,926 --> 00:36:20,626 if you link to someone else's server, 824 00:36:20,626 --> 00:36:23,296 because it means visitors come to your page and he 825 00:36:23,296 --> 00:36:25,346 or she pays the bill for all of the bandwidth, 826 00:36:25,346 --> 00:36:27,806 for all of the graphics and content that have been coming 827 00:36:27,806 --> 00:36:29,966 into the webpage and sometimes content 828 00:36:29,966 --> 00:36:30,876 like that will be blocked. 829 00:36:30,876 --> 00:36:33,256 So let's do one final step so that you know how to do it, 830 00:36:33,256 --> 00:36:36,646 let me go back to this image, let me actually save it, 831 00:36:36,796 --> 00:36:38,636 I'm going to save it to my desktop here, 832 00:36:39,386 --> 00:36:43,486 we're going to call this computer dot jif, 833 00:36:43,736 --> 00:36:45,556 don't change the file extension, just the name. 834 00:36:45,896 --> 00:36:48,696 Now I have it on my desktop, what's the solution or the, 835 00:36:48,976 --> 00:36:52,316 oh I have one new spam message, one direct buy, 836 00:36:52,466 --> 00:36:53,896 you know we're lucky, this could have been a lot worse, 837 00:36:53,896 --> 00:36:54,506 these popups. 838 00:36:54,826 --> 00:36:58,316 Alright, so, so what's the solution 839 00:36:58,316 --> 00:37:00,306 for getting this image into my own account? 840 00:37:00,586 --> 00:37:03,806 You used this probably for Pset 5. 841 00:37:03,986 --> 00:37:05,956 Yeah, so SFDP, even for SFDP, 842 00:37:05,956 --> 00:37:07,656 you were generally downloading files 843 00:37:07,776 --> 00:37:09,586 from the server to your own computer. 844 00:37:09,736 --> 00:37:11,836 The program works in the same way in the other direction, 845 00:37:11,836 --> 00:37:14,176 so I'm going to use SecureFX, you can use Cyber Duck 846 00:37:14,176 --> 00:37:15,486 or whatever on your own computer. 847 00:37:15,486 --> 00:37:18,126 I'm going to very quickly just configure a new session, 848 00:37:18,126 --> 00:37:21,396 if you've never done this before we'll walk you through it 849 00:37:21,396 --> 00:37:23,336 in section or post something online, but I'm going 850 00:37:23,336 --> 00:37:25,696 to go ahead and hit enter, after typing Cloud I'm going 851 00:37:25,696 --> 00:37:27,436 to be prompted for my user name CS50, 852 00:37:27,436 --> 00:37:29,336 I'm going to type my password, 853 00:37:29,776 --> 00:37:31,586 now notice I've got some other directories 854 00:37:31,586 --> 00:37:33,656 because I use this kind of for other things, so I'm going to go 855 00:37:33,656 --> 00:37:35,596 into my Public HTML directory. 856 00:37:35,866 --> 00:37:38,036 There's my Hello dot HTML, so I'm just going 857 00:37:38,036 --> 00:37:40,236 to move this window to the side and I'm going 858 00:37:40,236 --> 00:37:43,856 to click computer dot jif, drag it over here, voila, 859 00:37:43,856 --> 00:37:46,146 that's all it took to copy the file to my own account. 860 00:37:46,146 --> 00:37:48,926 Now we're going to pay the bill for the bandwidth, but so be it. 861 00:37:49,226 --> 00:37:50,566 So now I'm going to go back here, 862 00:37:50,566 --> 00:37:54,406 I'm going to make the page look the same but reference of file 863 00:37:54,406 --> 00:37:57,976 on my local account, I'm just going to delete, delete, delete, 864 00:37:57,976 --> 00:38:01,976 delete, delete, delete, type computer dot jif, save it 865 00:38:02,116 --> 00:38:03,566 and go here and reload. 866 00:38:04,596 --> 00:38:06,076 Damn, what went wrong? 867 00:38:06,646 --> 00:38:10,246 What's that? 868 00:38:10,346 --> 00:38:13,036 Actually I asked that, 869 00:38:13,076 --> 00:38:14,566 really you shouldn't have detected that, 870 00:38:14,566 --> 00:38:17,166 I put it in the wrong place, so that's the academic lesson. 871 00:38:17,166 --> 00:38:19,126 I put it in my Public HTML directory, 872 00:38:19,126 --> 00:38:22,346 but you will not often have this problem, but I am actually only 873 00:38:22,346 --> 00:38:23,646 in my lecture source directory. 874 00:38:23,646 --> 00:38:25,156 So, now let's fix, now let's reload. 875 00:38:25,406 --> 00:38:27,766 Okay and voila, now notice one thing, 876 00:38:27,836 --> 00:38:31,126 fortunately SecureFX was smart enough to upload this 877 00:38:31,126 --> 00:38:32,536 with world readable permissions 878 00:38:32,536 --> 00:38:33,746 because of the way I configured it. 879 00:38:33,966 --> 00:38:37,656 If I do an LS dash L for computer dot jif, notice it is 880 00:38:37,656 --> 00:38:40,716 in fact read and read for everyone which is good. 881 00:38:40,716 --> 00:38:43,466 If it were the opposite, just in case you ever see this, 882 00:38:43,826 --> 00:38:45,986 which I'll simulate now, if it looks like that 883 00:38:46,106 --> 00:38:48,166 and now I go back to my webpage and reload, 884 00:38:48,166 --> 00:38:49,216 what will I likely see? 885 00:38:49,776 --> 00:38:54,706 Some kind of error or just bad stuff happen, 886 00:38:54,746 --> 00:38:56,456 it doesn't actually render and that's 887 00:38:56,496 --> 00:38:59,006 because of a permissions problem there, alright. 888 00:38:59,336 --> 00:39:02,526 So we have not made anything pretty there, 889 00:39:02,766 --> 00:39:05,046 but at least we've talked about open tags and closed tags 890 00:39:05,046 --> 00:39:07,516 and attributes and over all markup. 891 00:39:07,766 --> 00:39:08,936 Any questions just yet? 892 00:39:10,576 --> 00:39:11,316 Any questions? 893 00:39:11,626 --> 00:39:15,006 Alright, so while this is not the type of URL 894 00:39:15,006 --> 00:39:15,946 that one would advertise, 895 00:39:15,986 --> 00:39:17,486 let's actually make this a little more real, 896 00:39:17,486 --> 00:39:19,886 so that especially after you exit this course, you don't feel 897 00:39:19,886 --> 00:39:22,806 like anything you ever do on the internet has to be tied 898 00:39:22,806 --> 00:39:26,556 to some Harvard dot edu server or some CS50 dot net server. 899 00:39:26,806 --> 00:39:30,726 Well, yes we own the domain name CS50 dot Net because we 900 00:39:30,726 --> 00:39:32,966 as a course paid like nine ninety five, 901 00:39:33,336 --> 00:39:34,856 a couple of years ago 902 00:39:34,856 --> 00:39:37,576 to actually buy this domain name from a registrar. 903 00:39:37,826 --> 00:39:39,886 So there's this whole infrastructure on the internet 904 00:39:39,886 --> 00:39:42,596 of commerce and there are these entities called registrars 905 00:39:42,866 --> 00:39:46,266 that you go to a website like Go Daddy dot com, silly name 906 00:39:46,266 --> 00:39:48,766 but they are among the biggest so called registrars. 907 00:39:49,076 --> 00:39:51,246 You hand them some money or you hand them a credit card 908 00:39:51,496 --> 00:39:53,606 and then you can buy a domain name from them, 909 00:39:53,876 --> 00:39:55,156 if it's in fact available. 910 00:39:55,296 --> 00:39:57,076 What does this work flow actually look like? 911 00:39:57,076 --> 00:40:00,116 Well, if I go to and I'll switch us over here. 912 00:40:00,856 --> 00:40:05,016 Let's go to Go Daddy dot com, but there are dozens of other 913 00:40:05,066 --> 00:40:08,086 such registrars you can typically fill 914 00:40:08,086 --> 00:40:12,016 out a little search box like the one here and you can whoops, 915 00:40:12,316 --> 00:40:17,186 search for, for instance, let's do Harvard dot com and see 916 00:40:17,186 --> 00:40:19,036 if that's still available, because I'd love to scoop 917 00:40:19,036 --> 00:40:21,616 that up for nine ninety five, so click go. 918 00:40:22,156 --> 00:40:23,746 Presumably it's not actually owned 919 00:40:23,976 --> 00:40:25,926 and in fact they'll often recommend a whole bunch 920 00:40:25,926 --> 00:40:27,696 of domain names that you really don't want. 921 00:40:27,756 --> 00:40:33,206 Because who, New Harvard For You dot com, so kind of silly, this, 922 00:40:33,206 --> 00:40:34,606 this just means that it has been taken, 923 00:40:34,606 --> 00:40:36,886 so one of the hardest parts frankly on this side is 924 00:40:36,886 --> 00:40:40,216 to get a domain name, is finding one that's actually available. 925 00:40:40,316 --> 00:40:41,976 Come final projects, one of the options 926 00:40:41,976 --> 00:40:44,466 that you guys will have is not just to post your final projects 927 00:40:44,506 --> 00:40:47,196 on our own servers, because if you're implementing a project 928 00:40:47,196 --> 00:40:50,096 that you actually think will be useful to friends and to family, 929 00:40:50,336 --> 00:40:52,786 people even outside of Harvard, odds are you want 930 00:40:52,786 --> 00:40:56,626 to advertise something like My Good Domain name dot com 931 00:40:56,626 --> 00:40:59,096 and not something like Cloud CS50 dot net, 932 00:40:59,556 --> 00:41:00,946 so among the things that you will be able to do 933 00:41:00,946 --> 00:41:03,176 in a few weeks time if you do go to a site like this, 934 00:41:03,276 --> 00:41:06,276 buy yourself a domain name, you just have to tell 935 00:41:06,276 --> 00:41:09,986 that registrar, where in the internet you're server lives. 936 00:41:10,226 --> 00:41:13,116 So we for instance, have told Go Daddy a couple 937 00:41:13,116 --> 00:41:16,006 of years ago what the name, what the addresses are 938 00:41:16,056 --> 00:41:17,976 of those things called DNS servers. 939 00:41:17,976 --> 00:41:19,766 We typed them into Go Daddy's website, 940 00:41:20,056 --> 00:41:22,206 we have our own servers now in actual [inaudible] 941 00:41:22,346 --> 00:41:25,856 so we just told Go Daddy, this domain name lives 942 00:41:25,856 --> 00:41:27,516 at this particular IP address. 943 00:41:27,516 --> 00:41:30,026 So come final projects, you guys too, if you decide, 944 00:41:30,176 --> 00:41:32,896 purely optional to do a web based project and one 945 00:41:32,896 --> 00:41:36,116 that you wanted a vanity domain, you know your own domain name, 946 00:41:36,446 --> 00:41:38,466 you're simply going to have to find someplace to put it 947 00:41:38,466 --> 00:41:40,596 and tell Go Daddy where it is. 948 00:41:40,726 --> 00:41:42,476 Now so that you're work actually 949 00:41:42,476 --> 00:41:45,546 out lives this course's semester, we'll actually put you 950 00:41:45,546 --> 00:41:47,156 in touch with those folks called HCS, 951 00:41:47,156 --> 00:41:51,106 the Harvard Computer Society and they will actually provide you 952 00:41:51,106 --> 00:41:53,266 with an account on Harvard's Campus, 953 00:41:53,506 --> 00:41:55,286 but that will create the illusion 954 00:41:55,476 --> 00:41:58,086 that your domain name dot com is out there on the internet, 955 00:41:58,136 --> 00:41:59,656 even though it lives on their server. 956 00:41:59,656 --> 00:42:01,786 So just a little teaser so that you realize 957 00:42:01,786 --> 00:42:03,246 that your final projects and beyond, 958 00:42:03,246 --> 00:42:06,406 you can actually do this stuff yourself without the crutch 959 00:42:06,446 --> 00:42:08,006 of a course's own infrastructure. 960 00:42:08,406 --> 00:42:10,196 So, this is what we did to recap. 961 00:42:10,326 --> 00:42:14,666 HTML, this is the simplest, valid webpage that you can make 962 00:42:14,666 --> 00:42:16,486 in this language called XHTML. 963 00:42:16,486 --> 00:42:19,126 It's completely underwhelming just as Hello World, 964 00:42:19,286 --> 00:42:20,916 but it captures the basic spirit. 965 00:42:21,156 --> 00:42:24,566 Now fortunately in this world of XHTML, there are tools out there 966 00:42:24,566 --> 00:42:27,286 that can help you find mistakes in your code and one 967 00:42:27,286 --> 00:42:29,936 of the things that Pset 7 and 8 will expect is 968 00:42:29,936 --> 00:42:31,236 that your code be valid. 969 00:42:31,916 --> 00:42:35,496 What this means is that when you type open bracket something 970 00:42:35,496 --> 00:42:38,186 close bracket, you're not making stuff up as you go. 971 00:42:38,256 --> 00:42:42,096 You're actually using standard syntax that has been approved 972 00:42:42,096 --> 00:42:43,786 and actually exists in a language 973 00:42:44,276 --> 00:42:47,266 and this is simply offered now as a way 974 00:42:47,266 --> 00:42:49,616 of helping you debug your own code. 975 00:42:49,936 --> 00:42:51,336 But there's also this other feature, 976 00:42:51,696 --> 00:42:54,016 which we'll give just a teaser of here which is called CSS 977 00:42:54,136 --> 00:42:56,646 and the web has actually changed quite a bit 978 00:42:56,646 --> 00:42:59,216 from when I made those silly little pages with Frog Man 979 00:42:59,486 --> 00:43:02,716 and my all capital letters and all of my tags versus today. 980 00:43:02,716 --> 00:43:06,066 So very popular today is this supplementary language 981 00:43:06,066 --> 00:43:06,696 called CSS. 982 00:43:06,696 --> 00:43:10,936 So you have HTML or XHTML which is all about markup showing, 983 00:43:10,936 --> 00:43:12,946 teaching someone, telling the browser how 984 00:43:12,946 --> 00:43:16,306 to layout the webpage and then there's this complimentary 985 00:43:16,306 --> 00:43:19,126 language now called CSS, cascading style sheets, 986 00:43:19,426 --> 00:43:21,966 which much more like a word processor allows you 987 00:43:21,966 --> 00:43:23,766 to fine tune the aesthetics. 988 00:43:23,766 --> 00:43:25,566 If you want your font to be eighteen point, 989 00:43:25,826 --> 00:43:27,196 you can use CSS for that. 990 00:43:27,196 --> 00:43:30,416 If you want a very specific color, a very specific placement 991 00:43:30,416 --> 00:43:33,116 of some element on the page, you can use some CSS. 992 00:43:33,116 --> 00:43:36,726 And CSS is not a language we'll spend much time at all 993 00:43:36,726 --> 00:43:38,136 on in the course because frankly 994 00:43:38,136 --> 00:43:40,876 from the course's perspective we will be so thrilled 995 00:43:40,876 --> 00:43:43,506 if you produce even the most hideous of projects, 996 00:43:43,786 --> 00:43:46,586 if they are perfectly functional and actually well designed. 997 00:43:46,586 --> 00:43:49,576 We will not expect works of art, because frankly without the help 998 00:43:49,576 --> 00:43:51,036 of folks like Yuki and others, 999 00:43:51,226 --> 00:43:54,046 this is what CS50 dot Net would look like if I were in charge. 1000 00:43:54,406 --> 00:43:57,196 So, we don't think this is now becoming a course 1001 00:43:57,196 --> 00:44:00,236 about aesthetic design, it's only about functional design. 1002 00:44:00,646 --> 00:44:04,056 So this clip here reveals one thing more 1003 00:44:04,056 --> 00:44:06,506 that you can put inside of that head element. 1004 00:44:06,786 --> 00:44:09,116 Those open tag for head and close tag. 1005 00:44:09,386 --> 00:44:12,026 So besides the title, which I still have laid out here, 1006 00:44:12,286 --> 00:44:13,396 you can put a style tag. 1007 00:44:13,976 --> 00:44:15,526 And a style tag allows you 1008 00:44:15,526 --> 00:44:18,206 to really control the more fine grain, 1009 00:44:18,586 --> 00:44:21,706 fine grain control the aesthetics of a webpage. 1010 00:44:21,706 --> 00:44:22,756 Well let me demonstrate, 1011 00:44:22,756 --> 00:44:26,886 let me go over to let's say Hello dot HTML 1012 00:44:27,566 --> 00:44:30,676 and let me go ahead to the top of the file and I'm going 1013 00:44:30,676 --> 00:44:34,466 to indent and say style type equals text slash CSS, 1014 00:44:34,466 --> 00:44:35,946 oops thank you. 1015 00:44:36,446 --> 00:44:39,826 So I'm going to put this at the head, all of I've done is this, 1016 00:44:39,906 --> 00:44:42,926 that's before, that's after I started typing style. 1017 00:44:42,926 --> 00:44:45,566 Now I'm going to close it preemptively and things 1018 00:44:45,566 --> 00:44:46,846 like this are just going to be conventions. 1019 00:44:46,886 --> 00:44:50,466 There are some older browsers or some mobile browsers on phones 1020 00:44:50,706 --> 00:44:52,466 that aren't very smart when it comes to tags. 1021 00:44:52,496 --> 00:44:55,436 They don't understand, so you often see these sort of hacks 1022 00:44:55,736 --> 00:44:57,766 or work around's that have evolved over the years, 1023 00:44:57,766 --> 00:45:00,956 so for instance, this one here essentially tells the browser, 1024 00:45:01,166 --> 00:45:04,686 here comes a style sheet, here comes some stuff in CSS. 1025 00:45:05,166 --> 00:45:07,936 But, in case this confuses you or if you don't understand it, 1026 00:45:08,046 --> 00:45:09,096 think of this as a comment. 1027 00:45:09,496 --> 00:45:11,126 So again, these are just kind of work arounds, 1028 00:45:11,126 --> 00:45:13,096 not terribly elegant, but this is what the [inaudible] 1029 00:45:13,096 --> 00:45:13,796 has developed. 1030 00:45:14,006 --> 00:45:16,746 But now, inside of this, I can go ahead and put some CSS. 1031 00:45:17,426 --> 00:45:19,696 So, CSS will let you control things 1032 00:45:19,966 --> 00:45:21,236 in essentially, three ways. 1033 00:45:22,316 --> 00:45:24,686 You can define, in this language called CSS, 1034 00:45:25,406 --> 00:45:27,446 some properties for actual elements. 1035 00:45:27,446 --> 00:45:29,316 An element is that same thing as a tag, 1036 00:45:29,646 --> 00:45:32,476 except that an element comprises essentially the open tag 1037 00:45:32,476 --> 00:45:35,166 and the closed tag, but it's the tag is just the top thing 1038 00:45:35,506 --> 00:45:38,056 or the bottom thing, open tag, closed tag, start tag, 1039 00:45:38,056 --> 00:45:39,836 end tag, similar jargon. 1040 00:45:40,296 --> 00:45:42,596 So this allows me to control the appearance 1041 00:45:42,596 --> 00:45:43,996 of a tag or an element. 1042 00:45:44,326 --> 00:45:47,446 The thing below it, with the hash mark, 1043 00:45:47,826 --> 00:45:50,956 means I can control the behavior of a specific tag 1044 00:45:51,866 --> 00:45:53,796 that has what's called an ID attribute. 1045 00:45:53,876 --> 00:45:55,396 But don't worry so much about that now. 1046 00:45:55,626 --> 00:45:58,176 And then also, we can define what are called classes. 1047 00:45:58,246 --> 00:46:01,176 So this is just mean to introduce it 1048 00:46:01,176 --> 00:46:01,996 so that you've seen it. 1049 00:46:02,356 --> 00:46:05,366 These are aesthetics that you can ultimately worry very little 1050 00:46:05,366 --> 00:46:07,576 about, or at least when you start reading up on this 1051 00:46:07,576 --> 00:46:09,856 for P Set 7 and its PDF, you'll understand. 1052 00:46:10,166 --> 00:46:12,266 Let me go ahead and do the following. 1053 00:46:13,236 --> 00:46:16,776 Let me go ahead and say that everything in the body 1054 00:46:17,156 --> 00:46:19,116 of this document, so I'm going to say the name 1055 00:46:19,116 --> 00:46:20,646 of the element, body, thank you. 1056 00:46:20,646 --> 00:46:25,686 Let me say the name of the element, name is body. 1057 00:46:25,966 --> 00:46:30,436 Let me go ahead and say, let's make this font size 96 point. 1058 00:46:30,696 --> 00:46:32,816 All right, so this isn't something I could express 1059 00:46:32,816 --> 00:46:34,546 as easily in the body of the webpage 1060 00:46:34,546 --> 00:46:35,966 so let me go ahead here, and reload. 1061 00:46:36,366 --> 00:46:38,676 Wow. Ok. So it's getting even worse. 1062 00:46:38,676 --> 00:46:42,236 All right, then at some point, well, let's see. 1063 00:46:42,286 --> 00:46:42,996 What else can we do? 1064 00:46:43,166 --> 00:46:44,026 What about the color? 1065 00:46:44,026 --> 00:46:45,236 Lets really make it hideous. 1066 00:46:45,276 --> 00:46:46,946 So what about yellow? 1067 00:46:46,946 --> 00:46:48,706 [ Laughter ] 1068 00:46:48,706 --> 00:46:50,606 Yeah. 1069 00:46:50,606 --> 00:46:50,746 [ Laughter ] 1070 00:46:50,746 --> 00:46:52,776 So, and realize too, I'm using some words 1071 00:46:52,776 --> 00:46:55,176 and you can't write things like fusia 1072 00:46:55,316 --> 00:46:57,566 or fairly random specific colors. 1073 00:46:57,716 --> 00:46:59,576 But you can use your hexadecimal code. 1074 00:46:59,576 --> 00:47:02,216 So if I actually wanted invisible text, 1075 00:47:02,406 --> 00:47:04,446 a sort of secret webpage, what if I do this? 1076 00:47:06,026 --> 00:47:07,506 Feels kind of fancy, right? 1077 00:47:07,506 --> 00:47:11,426 Oh! Come to my webpage and how do you know what I've told you? 1078 00:47:11,426 --> 00:47:14,956 Well you can just click and drag and see the message, right? 1079 00:47:15,516 --> 00:47:19,876 [ Laughter ] 1080 00:47:20,376 --> 00:47:22,056 So, that's how you can control the body. 1081 00:47:22,056 --> 00:47:23,516 Let me do one other thing, and again, 1082 00:47:23,556 --> 00:47:26,726 this is a hideous train wreck of a site so far. 1083 00:47:26,726 --> 00:47:27,786 But that's not so much the point. 1084 00:47:27,786 --> 00:47:29,256 It's just to look at some of these fundamentals. 1085 00:47:29,446 --> 00:47:33,426 Let me go ahead and define a class called copyright. 1086 00:47:33,696 --> 00:47:36,896 All right, so dot and then a t word like copyright 1087 00:47:37,126 --> 00:47:40,216 and for copyright, I don't want this crazy 96 point Font, 1088 00:47:40,216 --> 00:47:41,896 I want the font size to be smaller. 1089 00:47:42,126 --> 00:47:43,546 I just want it to be 12 point. 1090 00:47:43,976 --> 00:47:48,586 So now, CSS is cascading in the sense that things you define 1091 00:47:48,586 --> 00:47:51,346 above can be overridden by things below. 1092 00:47:51,646 --> 00:47:53,066 So what does that mean here? 1093 00:47:53,066 --> 00:47:55,166 Well, let's actually put a copyright here. 1094 00:47:55,166 --> 00:47:58,516 So copyright CS50 at the bottom. 1095 00:47:58,756 --> 00:48:01,256 If I save that as is and reload, actually, 1096 00:48:01,256 --> 00:48:02,616 we got to fix this red text here. 1097 00:48:03,236 --> 00:48:08,636 Let's change the text back to oh, let's try blue this time. 1098 00:48:08,636 --> 00:48:09,366 All right. 1099 00:48:09,936 --> 00:48:11,076 Blue, even worse. 1100 00:48:11,196 --> 00:48:13,546 Scroll down, there's my huge copyright. 1101 00:48:13,656 --> 00:48:16,356 So I'd really like to shrink just that so let me go ahead 1102 00:48:16,356 --> 00:48:20,506 and encapsulate copyright in what's called a span. 1103 00:48:20,826 --> 00:48:22,676 This just says span the following line. 1104 00:48:22,936 --> 00:48:24,986 So span and then what class do I want 1105 00:48:24,986 --> 00:48:26,256 to assign to this line of code? 1106 00:48:26,256 --> 00:48:28,646 Well, what did I call it. 1107 00:48:28,646 --> 00:48:31,276 Yeah, just copyright, all lowercase, close bracket. 1108 00:48:31,576 --> 00:48:33,716 Now I put my content, my actual data, 1109 00:48:33,716 --> 00:48:37,046 which is copyright CS50 then I close span over here. 1110 00:48:37,046 --> 00:48:39,446 And to be clear, even though in your open tags, 1111 00:48:39,446 --> 00:48:40,786 you do specify attributes, 1112 00:48:40,866 --> 00:48:43,626 you do not specify them again in the close tag. 1113 00:48:43,666 --> 00:48:45,586 You just close the original word. 1114 00:48:45,916 --> 00:48:48,996 Now let me go ahead and reload and uh-huh, now I have indeed, 1115 00:48:48,996 --> 00:48:51,076 overridden the default font size 1116 00:48:51,076 --> 00:48:53,546 and controlled it a little more specifically. 1117 00:48:53,546 --> 00:48:54,466 And using the ID attribute, 1118 00:48:54,716 --> 00:48:58,406 you can target very specific elements as well. 1119 00:48:58,776 --> 00:49:02,756 So this is actually, all it sort of takes 1120 00:49:02,806 --> 00:49:04,116 to start making webpage's. 1121 00:49:04,116 --> 00:49:05,686 Pretty hideous webpage's at that. 1122 00:49:05,686 --> 00:49:07,096 Let's go ahead and take a five minute break 1123 00:49:07,096 --> 00:49:08,976 and then start making Google. 1124 00:49:10,816 --> 00:49:13,656 All right, we are back. 1125 00:49:13,796 --> 00:49:18,896 So, notice that there, ok, did it again, damn it, take three. 1126 00:49:19,506 --> 00:49:23,106 All right, notice that there are a whole bunch of office hours, 1127 00:49:23,106 --> 00:49:26,506 not only on Thursday nights and Friday afternoons, 1128 00:49:26,506 --> 00:49:29,716 but also Monday, Tuesday, Wednesday and even on Sundays, 1129 00:49:30,076 --> 00:49:31,956 so do, especially if you're finding that you would 1130 00:49:31,956 --> 00:49:34,246 like a little more one on one attention or assistance 1131 00:49:34,246 --> 00:49:37,206 with the problem set and the crazy Thursday nights really 1132 00:49:37,206 --> 00:49:41,166 aren't conducive to thinking it through and understanding things 1133 00:49:41,166 --> 00:49:44,596 at your pace, do take advantage of the blue when the red boxes, 1134 00:49:44,596 --> 00:49:46,556 that are much earlier in the week, including tonight. 1135 00:49:46,706 --> 00:49:47,786 So just a reminder on that. 1136 00:49:48,316 --> 00:49:49,926 All right, so now there's this thing called Google. 1137 00:49:49,926 --> 00:49:52,796 All right, it's pretty popular, works pretty well. 1138 00:49:53,086 --> 00:49:56,536 But it uses, strikingly, a very simple interface 1139 00:49:56,536 --> 00:50:00,426 and some very basic user interface mechanisms, right? 1140 00:50:00,426 --> 00:50:04,036 And actually, these [inaudible] mechanisms are what compose most 1141 00:50:04,036 --> 00:50:06,046 every website out there that takes user input. 1142 00:50:06,096 --> 00:50:07,586 You have these things called forms. 1143 00:50:07,836 --> 00:50:09,506 You have text fields like this one. 1144 00:50:09,736 --> 00:50:10,616 You have buttons. 1145 00:50:10,616 --> 00:50:11,986 You have drop down menus. 1146 00:50:11,986 --> 00:50:15,096 You've got little radio buttons and check boxes. 1147 00:50:15,316 --> 00:50:17,066 But that's actually about it. 1148 00:50:17,256 --> 00:50:18,906 To implement forms on the web, 1149 00:50:19,456 --> 00:50:21,646 you just need a few of these tools. 1150 00:50:21,646 --> 00:50:23,666 So here's just a quick laundry list, 1151 00:50:23,666 --> 00:50:25,336 and this is pretty extensive, 1152 00:50:25,546 --> 00:50:27,986 of how you can actually take input from users. 1153 00:50:27,986 --> 00:50:30,636 We focused thus far on providing output, aesthetic output, 1154 00:50:30,906 --> 00:50:32,626 but you have these things called text fields. 1155 00:50:32,626 --> 00:50:35,626 If I zoom in on this, this thing up here will allow me, 1156 00:50:35,706 --> 00:50:39,126 open bracket input, name email, type equals text. 1157 00:50:39,456 --> 00:50:42,126 This will tell the browser, put a textbox here, 1158 00:50:42,176 --> 00:50:45,426 that the user can type stuff into, call that textbox email. 1159 00:50:45,946 --> 00:50:48,066 If you, instead, want a bigger text area, 1160 00:50:48,066 --> 00:50:50,166 where you would actually write a long response 1161 00:50:50,166 --> 00:50:51,856 or multiple sentences or paragraphs, 1162 00:50:52,136 --> 00:50:53,756 you have things called text areas. 1163 00:50:53,756 --> 00:50:56,086 If you want a password, where when the user types, 1164 00:50:56,086 --> 00:50:57,806 it becomes little circles or bullets 1165 00:50:57,806 --> 00:50:59,716 and not actually clear text, well, 1166 00:50:59,716 --> 00:51:02,386 you just say type equals password for that third one. 1167 00:51:02,386 --> 00:51:05,356 If you want checkboxes, you say type equals checkbox. 1168 00:51:05,356 --> 00:51:07,546 If you want radio buttons, the little circular things, 1169 00:51:07,826 --> 00:51:09,436 you say type equals radio. 1170 00:51:09,436 --> 00:51:11,906 And then finally, if you want one of those dropdown menus 1171 00:51:11,906 --> 00:51:13,966 for long lists, you call it a select 1172 00:51:14,176 --> 00:51:16,266 and then you give it a name and then you have one 1173 00:51:16,266 --> 00:51:17,646 or more options beneath. 1174 00:51:17,906 --> 00:51:21,446 So these are the basic building blocks of every website 1175 00:51:21,446 --> 00:51:24,336 out there and it's amazing, frankly, that there exists 1176 00:51:24,336 --> 00:51:27,316 so many permutations of these very simple elements 1177 00:51:27,316 --> 00:51:28,886 on every website you use there today. 1178 00:51:29,196 --> 00:51:30,376 This is kind of it, right? 1179 00:51:30,376 --> 00:51:32,206 We've spent, you know, half an hour, an hour, 1180 00:51:32,206 --> 00:51:34,476 talking about the structure of a webpage 1181 00:51:34,476 --> 00:51:37,676 and where these files live and what it takes to get files 1182 00:51:37,676 --> 00:51:38,916 from servers to browsers. 1183 00:51:38,916 --> 00:51:41,206 But at the end of the day, now that you have this, 1184 00:51:41,256 --> 00:51:43,716 or now that we'll start to use this, you have the ability 1185 00:51:43,896 --> 00:51:46,856 to actually start making interactive, user software. 1186 00:51:46,856 --> 00:51:49,496 In CS50's library, we get INT and get STRING, 1187 00:51:49,786 --> 00:51:52,506 how do you get INT's and STRINGS from users, whala, 1188 00:51:52,506 --> 00:51:55,056 with this basic commands for getting form elements. 1189 00:51:55,056 --> 00:51:57,436 And it turns out, that on the web, because everything you get 1190 00:51:57,436 --> 00:51:59,046 from users is typed at a keyboard, 1191 00:51:59,316 --> 00:52:02,136 which essentially is text, you don't even have to worry as much 1192 00:52:02,136 --> 00:52:05,176 about floating points and strings verses int's 1193 00:52:05,346 --> 00:52:08,696 because it all comes into you, the server, as actual text. 1194 00:52:09,366 --> 00:52:11,516 So let's see if we can't reimplement, 1195 00:52:11,516 --> 00:52:14,046 as fast as we can, Google. 1196 00:52:14,356 --> 00:52:15,526 So, here is Google. 1197 00:52:16,436 --> 00:52:19,556 Every web browser that you probably use has a feature, 1198 00:52:19,556 --> 00:52:21,856 even if you've not used this feature, called view source. 1199 00:52:21,906 --> 00:52:23,576 So in Firefox, it happens to be 1200 00:52:23,576 --> 00:52:25,146 under the view menu, under page source. 1201 00:52:25,456 --> 00:52:26,686 And as I did a little bit ago, 1202 00:52:26,906 --> 00:52:29,286 this just shows you the contents of this webpage. 1203 00:52:29,286 --> 00:52:31,446 Now very often, will these contents look 1204 00:52:31,446 --> 00:52:32,546 like a complete mess. 1205 00:52:32,806 --> 00:52:35,466 In fact, Google's is particularly messy 1206 00:52:35,766 --> 00:52:37,086 and particularly compressed. 1207 00:52:37,356 --> 00:52:39,586 Even though I can scroll to the right, 1208 00:52:39,946 --> 00:52:43,336 notice they did not waste time being all anal and pretty 1209 00:52:43,336 --> 00:52:46,576 by indenting their code and hitting enter a whole lot. 1210 00:52:46,786 --> 00:52:48,976 And that's because, when you get a billion hits per day, 1211 00:52:48,976 --> 00:52:50,466 and you hit the enter key once 1212 00:52:50,466 --> 00:52:52,976 and add one additional backslash end to your file, 1213 00:52:53,236 --> 00:52:55,316 that's a billion more bytes that you have 1214 00:52:55,356 --> 00:52:57,356 to let your users download over the course of the day. 1215 00:52:57,356 --> 00:52:59,626 Hit enter twice, that's two billion bytes. 1216 00:52:59,716 --> 00:53:02,956 So, you know, one Google employee who hits the enter key, 1217 00:53:03,166 --> 00:53:07,056 can cost Google gigabytes of data just by having white space 1218 00:53:07,056 --> 00:53:09,236 that we have so heavily preached in this class. 1219 00:53:09,756 --> 00:53:11,686 Now this does not mean that if you go work for Google, 1220 00:53:11,686 --> 00:53:13,346 you start to write code that looks like this. 1221 00:53:13,796 --> 00:53:15,446 So they actually wrote it, odds are, 1222 00:53:15,446 --> 00:53:18,446 in a very human friendly way, but they ran a little tool 1223 00:53:18,446 --> 00:53:21,836 that removed all superfluous white space that transformed all 1224 00:53:21,836 --> 00:53:24,136 of their variable names to just x and y 1225 00:53:24,136 --> 00:53:26,996 and z. These are things called compressors and even I do this 1226 00:53:26,996 --> 00:53:28,606 for the course's website and even other tools 1227 00:53:28,896 --> 00:53:29,906 for a couple of reasons. 1228 00:53:29,906 --> 00:53:33,156 One, you can save bytes and the fewer bytes you have to send 1229 00:53:33,156 --> 00:53:34,506 to the user, the faster it goes. 1230 00:53:34,806 --> 00:53:36,856 That might not matter so much when you're on Harvard's campus, 1231 00:53:36,856 --> 00:53:39,396 but if you're using iPhones or Blackberries 1232 00:53:39,396 --> 00:53:42,416 or cell phones these days, you know, 3G is kind of a joke. 1233 00:53:42,416 --> 00:53:43,196 It's not all that fast. 1234 00:53:43,516 --> 00:53:46,116 So the more bytes you send to a phone for a webpage, 1235 00:53:46,316 --> 00:53:48,496 the longer it's going to take for the user to see it. 1236 00:53:48,716 --> 00:53:51,356 So just optimizing these kinds of details are very important. 1237 00:53:51,486 --> 00:53:53,676 Unfortunately, it makes this a little hard for us 1238 00:53:53,776 --> 00:53:55,896 to see how this webpage works. 1239 00:53:55,896 --> 00:53:57,236 But there is a familiar element. 1240 00:53:57,236 --> 00:54:03,256 If I zoom in, what does Google, indeed, have that we had too? 1241 00:54:03,476 --> 00:54:05,766 Open brackets, html, right? 1242 00:54:05,806 --> 00:54:08,136 So it seems like we know how to implement Google. 1243 00:54:08,136 --> 00:54:10,236 So, they have this, they have a head, 1244 00:54:10,236 --> 00:54:11,386 there are some other meta tags, 1245 00:54:11,386 --> 00:54:13,376 and there's definitely some details that we're not going 1246 00:54:13,376 --> 00:54:15,396 to cover today or maybe ever in the course, 1247 00:54:15,396 --> 00:54:17,496 because they are just not that interesting and not necessary. 1248 00:54:17,776 --> 00:54:20,086 Some of them, like this meta tag, but oh, there's the title. 1249 00:54:20,396 --> 00:54:23,626 So this is, right, this little piece 1250 00:54:23,686 --> 00:54:26,296 of text is what gave Google its brand name, right, 1251 00:54:26,296 --> 00:54:29,666 open bracket title, close bracket Google, close tag there. 1252 00:54:29,666 --> 00:54:32,286 So let's actually tease apart some of the interesting stuff. 1253 00:54:32,286 --> 00:54:34,986 Let me use control F and search for body, ok. 1254 00:54:35,286 --> 00:54:37,466 So the real contents of the webpage don't start till 1255 00:54:37,466 --> 00:54:39,826 down here so let me avoid some distractions. 1256 00:54:40,106 --> 00:54:43,046 Let me just go ahead, oops, let me go ahead and put this 1257 00:54:43,046 --> 00:54:45,626 into let's say, notepad. 1258 00:54:46,206 --> 00:54:47,796 All right, so it's even messier here. 1259 00:54:47,796 --> 00:54:49,376 So let me go ahead and do a control F 1260 00:54:49,376 --> 00:54:51,446 for body, there's body. 1261 00:54:51,446 --> 00:54:53,796 Now I'm going to move my cursor over here and I'm just going 1262 00:54:53,796 --> 00:54:56,026 to delete all this stuff because clearly, it's not necessary 1263 00:54:56,026 --> 00:54:58,056 for the body of webpage, it doesn't start till here. 1264 00:54:58,366 --> 00:55:00,876 Ok, so this is why Google's homepage is white. 1265 00:55:01,256 --> 00:55:04,996 This is why text on Google's page is black. 1266 00:55:05,396 --> 00:55:07,016 Zero zero is all black. 1267 00:55:07,016 --> 00:55:11,296 This is why links on Google's pages are kind of what color? 1268 00:55:12,226 --> 00:55:14,836 Blue, so right, the fact that Google's homepage looks 1269 00:55:14,836 --> 00:55:19,196 like this with blue links is because the links are 0000CC, 1270 00:55:19,196 --> 00:55:20,776 so that's red, green, blue. 1271 00:55:21,056 --> 00:55:24,646 So it's not FF, which is a lot, its CC, which is a good amount 1272 00:55:24,966 --> 00:55:26,716 of blue, that's why the links are blue. 1273 00:55:26,846 --> 00:55:30,486 Now realize, Google, largely for compatibility reasons 1274 00:55:30,486 --> 00:55:35,006 and for financial cost reasons, did not waste time with things 1275 00:55:35,006 --> 00:55:37,606 like this, though that is expected for the course and just 1276 00:55:37,606 --> 00:55:38,836 for the matter of good practice. 1277 00:55:38,836 --> 00:55:41,956 Google is, well, if your website gets billions of hits per day, 1278 00:55:42,246 --> 00:55:44,436 you too can start leaving off your quotes. 1279 00:55:44,916 --> 00:55:48,166 All right, so, we've got a body, but then, 1280 00:55:48,166 --> 00:55:50,606 I'm already getting a little distracted here. 1281 00:55:50,606 --> 00:55:52,586 Let's see, it turns out, let me look for the thing 1282 00:55:52,586 --> 00:55:53,996 that I know implements the magic. 1283 00:55:54,076 --> 00:55:57,696 Open bracket form, any form on a webpage, text fields, 1284 00:55:57,766 --> 00:56:00,756 select menus and all of this, starts with open bracket form. 1285 00:56:01,046 --> 00:56:02,616 So this too, is kind of a distraction. 1286 00:56:02,676 --> 00:56:05,426 So let me get rid of everything before that, because really, 1287 00:56:05,426 --> 00:56:07,936 I want to get to the guts of this webpage, which is the form. 1288 00:56:07,936 --> 00:56:11,786 All right, so it turns out that in an html, in a webpage's form, 1289 00:56:12,086 --> 00:56:15,196 there's a few attributes we care about, one is called action 1290 00:56:15,546 --> 00:56:17,306 and one is maybe called name. 1291 00:56:17,616 --> 00:56:19,426 Then there's this table here, but again, 1292 00:56:19,426 --> 00:56:21,176 I'm getting a little overwhelmed, so let me search 1293 00:56:21,176 --> 00:56:23,176 for the things that we promised a moment ago, 1294 00:56:23,176 --> 00:56:25,646 are what make all this possible. 1295 00:56:25,746 --> 00:56:28,736 So, just a recap, this is what the various input mechanisms 1296 00:56:28,736 --> 00:56:30,196 look like, open bracket input, 1297 00:56:30,196 --> 00:56:31,876 so that's all I'm going to search for. 1298 00:56:31,876 --> 00:56:34,476 I'm going to whittle Google down to its base building blocks. 1299 00:56:34,506 --> 00:56:36,726 So open bracket input, there's an input, oops. 1300 00:56:36,796 --> 00:56:37,866 Lost it already. 1301 00:56:38,296 --> 00:56:40,906 Open bracket input, so I really don't care 1302 00:56:40,906 --> 00:56:41,836 about this to the left. 1303 00:56:41,836 --> 00:56:45,256 And it turns out, Google is actually is laying its page 1304 00:56:45,256 --> 00:56:47,536 out using an element called what? 1305 00:56:47,536 --> 00:56:51,346 Apparently, so they're using a table. 1306 00:56:51,556 --> 00:56:55,506 So behind Google.com, this webpage, the fact that some 1307 00:56:55,506 --> 00:56:57,136 of this is centered and things are kind 1308 00:56:57,136 --> 00:56:58,586 of in this invisible grid, 1309 00:56:58,586 --> 00:57:01,036 is because Google is using an invisible table 1310 00:57:01,036 --> 00:57:03,016 that we'll actually use too because it's very simple, 1311 00:57:03,016 --> 00:57:04,756 even though some people frown upon it these days. 1312 00:57:05,056 --> 00:57:06,506 But that's why there's this markup. 1313 00:57:06,506 --> 00:57:09,676 Everything's being laid out in tabular form, but that's fine. 1314 00:57:09,676 --> 00:57:10,916 Let's just get rid of that. 1315 00:57:10,916 --> 00:57:12,536 Here's an input, I care about that. 1316 00:57:12,796 --> 00:57:14,566 Here's another input, I care about that. 1317 00:57:15,446 --> 00:57:19,136 Here's a span, I don't care about that, span, span, span, 1318 00:57:19,136 --> 00:57:20,476 I don't really care about that. 1319 00:57:21,166 --> 00:57:22,586 Let me search for the next input, 1320 00:57:22,586 --> 00:57:24,206 just to finish whittling this down. 1321 00:57:24,206 --> 00:57:28,756 No more inputs there, because this one is, yep, over here. 1322 00:57:29,186 --> 00:57:33,526 So let me close the search for, uh, open bracket, 1323 00:57:33,746 --> 00:57:34,966 open bracket, there it is. 1324 00:57:35,126 --> 00:57:38,906 So there's my DR, and here is my Google search, 1325 00:57:38,906 --> 00:57:39,796 oh, we're almost done. 1326 00:57:39,796 --> 00:57:42,956 We almost have Google as an essence and here's another input 1327 00:57:43,206 --> 00:57:46,256 and now we're all the way at the other end here. 1328 00:57:46,386 --> 00:57:49,216 Let's do this, search for this, this, ok. 1329 00:57:49,756 --> 00:57:50,356 There it is. 1330 00:57:50,856 --> 00:57:53,286 Ok, so we have now whittled Google 1331 00:57:53,286 --> 00:57:55,216 down to its most basic elements. 1332 00:57:55,216 --> 00:57:57,746 Let me go ahead and shrink the fonts so we can actually see 1333 00:57:58,066 --> 00:57:59,746 that had you thought of this first, 1334 00:57:59,906 --> 00:58:01,806 it'd be your website and not Google's. 1335 00:58:02,086 --> 00:58:04,526 That's really all it took to implement the front end, 1336 00:58:04,526 --> 00:58:05,856 at least, to Google's website. 1337 00:58:05,856 --> 00:58:07,286 Now, there's still some distractions here, 1338 00:58:07,536 --> 00:58:09,716 so let's only focus on the ones that really matter. 1339 00:58:09,806 --> 00:58:12,996 But here is open bracket form, here's open bracket input, 1340 00:58:12,996 --> 00:58:15,116 and with these six or so elements, 1341 00:58:15,356 --> 00:58:17,166 can we implement our own version of Google. 1342 00:58:17,166 --> 00:58:20,486 Let me go over here, I'm going to go ahead and copy, 1343 00:58:20,486 --> 00:58:25,216 hello.html, and I'm going to call it fake Google.html. 1344 00:58:25,826 --> 00:58:29,866 I'm going to now open fake Google, fakegoogle.html, 1345 00:58:29,866 --> 00:58:33,926 I'm going to rename it here to be proper, fakegoogle.html. 1346 00:58:36,056 --> 00:58:37,686 reimplement Google. 1347 00:58:37,686 --> 00:58:40,376 All right, so here's my basic webpage. 1348 00:58:40,406 --> 00:58:43,046 I'm going to get rid of the hideous mess that this thing was 1349 00:58:43,096 --> 00:58:45,676 so we're only going to do the important building blocks. 1350 00:58:45,676 --> 00:58:48,256 So, delete, delete, delete, delete, delete, delete, delete, 1351 00:58:48,976 --> 00:58:51,136 delete, no more red, ok. 1352 00:58:51,346 --> 00:58:52,886 So now I have a very simple page. 1353 00:58:53,156 --> 00:58:58,636 I'm going to call it fakegoogle, [inaudible] get rid 1354 00:58:58,636 --> 00:59:00,556 of my trailing white space, save those bytes. 1355 00:59:00,556 --> 00:59:02,936 So now I'm going to go back over to my browser here. 1356 00:59:03,276 --> 00:59:07,446 I'm going to reload fakegoogle, oops, what did I forget to do? 1357 00:59:07,686 --> 00:59:09,366 So there's this [inaudible] command, which will explain 1358 00:59:09,366 --> 00:59:11,236 in more detail on Wednesday. 1359 00:59:11,236 --> 00:59:13,306 But fakegoogle, I'm going to [inaudible] then I'm going 1360 00:59:13,306 --> 00:59:17,056 to go ahead and reload my web browser, ok. 1361 00:59:17,256 --> 00:59:17,606 There we go. 1362 00:59:17,926 --> 00:59:19,216 Now it's time to implement Google. 1363 00:59:19,266 --> 00:59:20,676 So, I need to do something here. 1364 00:59:20,676 --> 00:59:23,706 Lets center it first, close center, all right, 1365 00:59:23,706 --> 00:59:25,306 now I need something in the middle. 1366 00:59:25,376 --> 00:59:27,426 So, it turns out there's this heading tag called H1, 1367 00:59:27,426 --> 00:59:29,276 which means make this big and bold. 1368 00:59:29,446 --> 00:59:31,596 So let's go ahead and call this fakegoogle H1 1369 00:59:31,596 --> 00:59:34,456 and now I need a form below it. 1370 00:59:34,456 --> 00:59:36,136 So let's do open bracket form, 1371 00:59:36,136 --> 00:59:37,946 I don't really know yet what comes next. 1372 00:59:37,946 --> 00:59:39,396 But I know what comes at the very end. 1373 00:59:39,806 --> 00:59:42,606 So form, so forms have to be submitted somewhere, 1374 00:59:42,816 --> 00:59:43,786 when you click submit, 1375 00:59:43,956 --> 00:59:46,416 where does the request go to, to what URL? 1376 00:59:46,646 --> 00:59:48,746 Well, apparently, it goes to what? 1377 00:59:49,576 --> 00:59:53,206 Search, so let's see, let's just copy what Google did. 1378 00:59:53,206 --> 00:59:56,846 So forward slash search, and then that's enough. 1379 00:59:56,916 --> 00:59:57,946 We're going to skip this name. 1380 00:59:58,196 --> 00:59:59,086 So now what do I need? 1381 00:59:59,086 --> 01:00:01,626 I need an input type, what type of input do I want first? 1382 01:00:01,706 --> 01:00:03,906 A little sanity check. 1383 01:00:04,136 --> 01:00:07,816 All right, just think, I want to implement Google. 1384 01:00:07,816 --> 01:00:10,516 What do I need first? 1385 01:00:10,696 --> 01:00:13,176 Text, right, I just need this big textbox. 1386 01:00:13,376 --> 01:00:15,376 That's all and then two buttons and then we're done. 1387 01:00:15,646 --> 01:00:17,366 So input type equals text. 1388 01:00:18,346 --> 01:00:20,116 I need to give this thing a name 1389 01:00:20,116 --> 01:00:21,996 so that Google knows what to expect. 1390 01:00:22,326 --> 01:00:25,126 What was the name given to Google's versions of this? 1391 01:00:25,406 --> 01:00:26,286 Do we see it here? 1392 01:00:26,366 --> 01:00:29,406 It's in this line here. 1393 01:00:29,996 --> 01:00:30,936 What is Google's called? 1394 01:00:30,936 --> 01:00:35,266 Actually, lets actually take a step back. 1395 01:00:35,266 --> 01:00:36,906 And let us search for CS50. 1396 01:00:36,906 --> 01:00:40,266 So I'm going to go ahead and hit Google search 1397 01:00:40,266 --> 01:00:42,566 and now notice what happens in the URL up top. 1398 01:00:42,566 --> 01:00:44,516 Enter, notice there's a whole bunch 1399 01:00:44,516 --> 01:00:46,166 of stuff that's gone on up here. 1400 01:00:46,476 --> 01:00:47,846 But if we really whittle it down, 1401 01:00:47,846 --> 01:00:49,666 where is the interesting dynamic part? 1402 01:00:49,946 --> 01:00:52,816 It's just that, so apparently the mere passing 1403 01:00:52,816 --> 01:00:55,716 of q equals something into the URL Google, 1404 01:00:55,886 --> 01:01:01,036 is enough to teach Google to actually search for that phrase. 1405 01:01:01,396 --> 01:01:04,556 A little aside, I have never once understood why this hit 1406 01:01:04,616 --> 01:01:08,256 here, CS50, is the laws of word and that leads to our webpage. 1407 01:01:08,326 --> 01:01:11,296 So extra credit if any of you can figure out who that guy is 1408 01:01:11,596 --> 01:01:13,276 and why he has a video on your webpage 1409 01:01:13,276 --> 01:01:14,446 because it's been there for two years. 1410 01:01:14,446 --> 01:01:14,716 [ Laughter ] 1411 01:01:14,716 --> 01:01:19,436 All right, so back to the page. 1412 01:01:19,436 --> 01:01:22,216 So name equals q, that's going to be the input. 1413 01:01:22,406 --> 01:01:24,146 So forms work as follows. 1414 01:01:24,146 --> 01:01:26,646 You define the elements, like whether it's a menu 1415 01:01:26,646 --> 01:01:29,176 or a text field, you give it a name because then 1416 01:01:29,176 --> 01:01:32,746 when you enter, those same names end up in the URLs, 1417 01:01:32,826 --> 01:01:35,476 just as we saw with my browsers a moment ago. 1418 01:01:35,776 --> 01:01:37,306 So let's go ahead and do this. 1419 01:01:37,306 --> 01:01:40,996 We've got input type equals q, now let me do input, turns out, 1420 01:01:40,996 --> 01:01:42,896 there's another type, equals submit. 1421 01:01:43,326 --> 01:01:46,856 And what does Google's button look like? 1422 01:01:46,856 --> 01:01:49,076 Let's see, this Google's button says what on it? 1423 01:01:49,076 --> 01:01:52,396 Google search, all right, so let's call this fakegooglsearch. 1424 01:01:52,776 --> 01:01:54,396 Close quotes, all right. 1425 01:01:54,506 --> 01:01:56,246 And then, all right, fine, we'll do the, 1426 01:01:56,246 --> 01:02:01,456 I'm feeling lucky, I'm feeling lucky. 1427 01:02:02,226 --> 01:02:03,496 All right, and now let's go back 1428 01:02:03,496 --> 01:02:05,076 to my version of this and reload. 1429 01:02:05,656 --> 01:02:07,436 Ok, almost there. 1430 01:02:07,436 --> 01:02:09,946 What do I need to fix first, aesthetically? 1431 01:02:10,736 --> 01:02:12,366 So I need a line break right. 1432 01:02:12,446 --> 01:02:13,956 So I put this line break here 1433 01:02:13,956 --> 01:02:16,396 with the BR instruction, now reload, ok. 1434 01:02:16,776 --> 01:02:18,516 So now we can quibble about other things. 1435 01:02:18,516 --> 01:02:19,806 It turns out, there are other things 1436 01:02:19,806 --> 01:02:22,706 like size I can say size is 96 1437 01:02:22,756 --> 01:02:24,736 so we can really allow long search strings. 1438 01:02:24,736 --> 01:02:25,536 That makes it bigger. 1439 01:02:25,926 --> 01:02:28,016 You know, we can play all day long with these aesthetics. 1440 01:02:28,016 --> 01:02:30,736 But now, let's at least see if the basic building blocks work. 1441 01:02:31,126 --> 01:02:34,306 So now let me go ahead and type in CS50. 1442 01:02:34,366 --> 01:02:37,296 And click fakegooglsearch, and unfortunately, 1443 01:02:37,986 --> 01:02:39,966 bad stuff happened because where did I go? 1444 01:02:40,026 --> 01:02:46,816 What URL? So I did go to search, slash search is the root 1445 01:02:46,986 --> 01:02:48,876 of the current server's hard drive, 1446 01:02:49,056 --> 01:02:50,796 so to speak, slash search. 1447 01:02:50,946 --> 01:02:52,146 And then notice what happened. 1448 01:02:52,146 --> 01:02:56,006 So the web form is smart enough to submit to the right action. 1449 01:02:56,006 --> 01:02:57,476 I told it go to slash search. 1450 01:02:57,476 --> 01:02:59,806 Unfortunately, I never implemented slash search 1451 01:02:59,806 --> 01:03:02,396 on the server, but notice the more interesting part, 1452 01:03:02,396 --> 01:03:05,046 question mark, something equals something. 1453 01:03:05,266 --> 01:03:10,136 This is the means by which elements are encoded in URL's 1454 01:03:10,136 --> 01:03:11,146 when you submit a form. 1455 01:03:11,426 --> 01:03:13,956 You, the browser automatically puts a question mark 1456 01:03:13,956 --> 01:03:17,216 after the URL and it does attribute equals value, 1457 01:03:17,516 --> 01:03:20,336 ampersand [sp?], attribute equals value, ampersand. 1458 01:03:20,336 --> 01:03:21,886 We only have one attribute here 1459 01:03:21,886 --> 01:03:25,746 because I only gave one element a name, q, but so far so good. 1460 01:03:25,746 --> 01:03:27,986 Question mark, attribute equals value. 1461 01:03:28,276 --> 01:03:32,506 Well, let's not actually send our users to ourselves 1462 01:03:32,506 --> 01:03:34,416 because we'd never actually implement in Google. 1463 01:03:34,666 --> 01:03:38,236 Why don't we, instead, send them to da, da, da, dot Google.com. 1464 01:03:38,236 --> 01:03:41,276 all right, so, I'm kind of punting on some 1465 01:03:41,276 --> 01:03:45,536 of the implementation details but, lets reload and lets search 1466 01:03:45,536 --> 01:03:48,956 for fakegoogle, whala, I have reimplemented Google. 1467 01:03:48,956 --> 01:03:49,236 [ Laughter ] 1468 01:03:49,236 --> 01:03:51,776 And it works, right? 1469 01:03:51,836 --> 01:03:54,026 There is that guy again. 1470 01:03:54,126 --> 01:03:56,966 So what are the basic building blocks here? 1471 01:03:56,966 --> 01:03:58,186 Well, let's actually do this. 1472 01:03:58,186 --> 01:04:00,086 Let me just go to the tools menu 1473 01:04:00,346 --> 01:04:02,966 and even though we rarely preach certain software in this course, 1474 01:04:02,966 --> 01:04:04,356 let me strongly urge you, 1475 01:04:04,356 --> 01:04:06,536 especially if you have no opinions out the gate, 1476 01:04:07,026 --> 01:04:10,846 use Firefox as your browser for problem sets 7 and 8 1477 01:04:10,846 --> 01:04:12,826 in your final project if you do a web based one, 1478 01:04:13,066 --> 01:04:16,386 because it comes with so many free tools for debugging. 1479 01:04:16,386 --> 01:04:17,176 One of them is this thing. 1480 01:04:17,586 --> 01:04:19,356 I installed it from the course's website, 1481 01:04:19,356 --> 01:04:21,266 this thing called Live HTTP Headers. 1482 01:04:21,726 --> 01:04:24,636 And when a web browser contacts a web server, 1483 01:04:24,796 --> 01:04:26,906 which actually going across the wire is a whole bunch 1484 01:04:26,906 --> 01:04:29,346 of stuff you the human, never actually see, 1485 01:04:29,546 --> 01:04:31,476 but let's just see what's going across the wire. 1486 01:04:31,476 --> 01:04:32,916 Let me move this window aside. 1487 01:04:32,976 --> 01:04:35,906 And now this is just an empty window right now. 1488 01:04:36,146 --> 01:04:38,336 Let me go ahead and click fakegooglesearch. 1489 01:04:38,486 --> 01:04:42,676 Enter, so a whole bunch of stuff just went across the wire. 1490 01:04:42,746 --> 01:04:45,796 Well, when you type in HTTP colon slash, 1491 01:04:45,796 --> 01:04:46,926 slash, what is that? 1492 01:04:47,206 --> 01:04:50,426 So HTTP is a protocol, it's a language on its own, 1493 01:04:50,736 --> 01:04:54,876 that is a language spoken by web servers and web browsers. 1494 01:04:54,876 --> 01:04:57,446 How do you get data from point a to point b? 1495 01:04:57,446 --> 01:04:59,746 you speak this language called HTTP. 1496 01:04:59,896 --> 01:05:01,756 Now earlier today, I kind of dumbed things down 1497 01:05:01,756 --> 01:05:05,276 and I said well, the browser asks for CS50.net's homepage. 1498 01:05:05,616 --> 01:05:06,846 Well, what does that really mean? 1499 01:05:06,846 --> 01:05:08,506 It's not going to write it in an English sentence, 1500 01:05:08,506 --> 01:05:09,476 give me your homepage. 1501 01:05:09,476 --> 01:05:12,136 But rather, it's going to encode it with this query. 1502 01:05:12,426 --> 01:05:15,296 If you've ever heard of a get, and its fine if you haven't, 1503 01:05:15,296 --> 01:05:17,906 it pretty much says what it does, that one blue, 1504 01:05:17,906 --> 01:05:20,936 bold line there is all it takes for a browser 1505 01:05:21,016 --> 01:05:23,136 to make a specific request of the server. 1506 01:05:23,386 --> 01:05:25,536 In this case, what has my browser, 1507 01:05:25,536 --> 01:05:28,856 upon hitting the submit button, asked Google.com, 1508 01:05:28,856 --> 01:05:30,526 the server in question, to give it. 1509 01:05:30,866 --> 01:05:32,846 Give it the result of asking 1510 01:05:32,846 --> 01:05:36,226 for slash search question mark q equals CS50. 1511 01:05:36,226 --> 01:05:38,116 And then there's all this other stuff. 1512 01:05:38,116 --> 01:05:39,646 So there's a lot of meta data. 1513 01:05:39,646 --> 01:05:43,536 For instance, this line here reminds the server what URL 1514 01:05:43,536 --> 01:05:44,346 is requested. 1515 01:05:44,456 --> 01:05:46,826 Here's some information on what browser I'm using, 1516 01:05:46,826 --> 01:05:47,816 fairly cryptically. 1517 01:05:48,066 --> 01:05:50,386 There's a bunch of other stuff and then finally, down here, 1518 01:05:50,566 --> 01:05:52,166 we get a response from the server. 1519 01:05:52,326 --> 01:05:54,446 The server tells us hey, here's a cookie, 1520 01:05:54,446 --> 01:05:55,606 which we'll discuss on Wednesday. 1521 01:05:55,606 --> 01:05:58,616 Hey, here is a caching information 1522 01:05:58,616 --> 01:05:59,656 for performance reasons. 1523 01:05:59,876 --> 01:06:00,716 So in short, there's a lot 1524 01:06:00,716 --> 01:06:02,626 of stuff that's going on behind the scenes. 1525 01:06:02,676 --> 01:06:05,336 But at the end of the day, my whole request boils 1526 01:06:05,336 --> 01:06:07,746 down to this simple query here. 1527 01:06:08,046 --> 01:06:10,536 Well, this is only so interesting 1528 01:06:10,536 --> 01:06:12,616 when I've implemented just the front end. 1529 01:06:12,686 --> 01:06:17,096 Well, back in the day, before php actually existed, 1530 01:06:17,096 --> 01:06:18,846 I think that's an accurate statement, 1531 01:06:19,166 --> 01:06:22,596 the freshman intramural sports program had, as I may have said 1532 01:06:22,596 --> 01:06:24,386 in the past, a really fancy system 1533 01:06:24,386 --> 01:06:25,566 for registering for sports. 1534 01:06:25,936 --> 01:06:28,386 You would fill out a piece of paper, you would walk 1535 01:06:28,386 --> 01:06:31,036 over to Wigglesworth C or D, you would knock 1536 01:06:31,036 --> 01:06:32,326 on the door and get let in. 1537 01:06:32,326 --> 01:06:34,616 And then you would find the proctor who lived there 1538 01:06:34,616 --> 01:06:36,386 who ran the freshman intramural sports program. 1539 01:06:36,686 --> 01:06:39,456 You would then submit your form through the mail slot 1540 01:06:39,456 --> 01:06:42,256 in that person's door and then whalaa, you were registered 1541 01:06:42,256 --> 01:06:45,676 for [inaudible] unless the paper got lost and stuff like that. 1542 01:06:45,816 --> 01:06:49,416 Right, this was in 1996, a really interesting, 1543 01:06:49,416 --> 01:06:53,876 a really obvious opportunity for automation. 1544 01:06:54,086 --> 01:06:55,726 And at the time, actually, literally, 1545 01:06:55,726 --> 01:06:58,256 I had just taken CS50 and then CS51. 1546 01:06:58,256 --> 01:06:59,966 There was no web programming in the course then. 1547 01:06:59,966 --> 01:07:01,406 I had no clue how to do this. 1548 01:07:01,406 --> 01:07:04,216 But it was an excuse at the time to teach myself Pearl, 1549 01:07:04,216 --> 01:07:05,866 which was a language very much in vogue 1550 01:07:05,866 --> 01:07:07,236 at the time and still kind of is. 1551 01:07:07,576 --> 01:07:10,566 But I used it and taught myself to make webpage's. 1552 01:07:10,566 --> 01:07:13,286 And actually, the first one kind of looked like this 1553 01:07:13,426 --> 01:07:14,996 because what does it mean to register 1554 01:07:14,996 --> 01:07:16,336 for freshman intramural sports? 1555 01:07:16,556 --> 01:07:19,016 Well, the proctor needed to know their name, their gender, 1556 01:07:19,016 --> 01:07:21,096 whether or not they wanted to be a captain, perhaps, 1557 01:07:21,496 --> 01:07:22,776 and then also their dorm. 1558 01:07:22,846 --> 01:07:24,696 So even this interface, way back then, 1559 01:07:24,696 --> 01:07:27,856 boiled down to some very basic constructs. 1560 01:07:27,856 --> 01:07:30,956 Thankfully, PHP makes this stuff much more interesting, 1561 01:07:31,216 --> 01:07:34,406 but clearly, when I click this submit button, I can't submit it 1562 01:07:34,406 --> 01:07:36,026 to Google because that's completely useless. 1563 01:07:36,026 --> 01:07:38,726 I'm going to have to submit it to a file on my own server. 1564 01:07:38,996 --> 01:07:40,906 So what we haven't yet seen is the ability 1565 01:07:40,906 --> 01:07:43,406 to actually implement logic ourselves. 1566 01:07:43,666 --> 01:07:46,046 We implemented some HTML and some CSS 1567 01:07:46,046 --> 01:07:48,726 for some ugly aesthetics, but then we completely punted 1568 01:07:48,826 --> 01:07:50,796 on the logical design of Google 1569 01:07:50,796 --> 01:07:52,586 by outsourcing that part to Google. 1570 01:07:52,836 --> 01:07:54,016 So what we'll do on Wednesday, 1571 01:07:54,016 --> 01:07:55,596 is actually implement the back end of this 1572 01:07:55,596 --> 01:07:57,236 and the motivation here, to be clear, 1573 01:07:57,236 --> 01:08:00,076 is that when you exit this course, you won't know just C 1574 01:08:00,076 --> 01:08:02,646 and you'll be struck, I think, over the next couple of weeks, 1575 01:08:02,646 --> 01:08:05,876 even if some of this moves quickly, and you feel like wow. 1576 01:08:05,876 --> 01:08:08,776 We're really not learning PHP as much as we did C, 1577 01:08:08,776 --> 01:08:10,616 that's the whole point because you're not going 1578 01:08:10,826 --> 01:08:13,286 to have a course to teach you the next 20 years worth 1579 01:08:13,286 --> 01:08:13,976 of languages. 1580 01:08:14,196 --> 01:08:15,596 The point of the next several weeks are 1581 01:08:15,596 --> 01:08:18,906 to help you realize how you can teach yourself new languages 1582 01:08:18,996 --> 01:08:21,196 because there will be many over the course of your lifetime. 1583 01:08:21,196 --> 01:08:23,286 So with that, PHP, on Wednesday. 1584 01:08:25,516 --> 01:08:29,480 [ background noises ]