1 00:00:00,000 --> 00:00:00,127 2 00:00:00,127 --> 00:00:01,210 DAVID J. MALAN: All right. 3 00:00:01,210 --> 00:00:02,160 We are back. 4 00:00:02,160 --> 00:00:05,810 So, the goal of this final session is to introduce a few more concepts 5 00:00:05,810 --> 00:00:09,290 but also give everyone a chance to kind of stretch your fingers 6 00:00:09,290 --> 00:00:11,270 and actually do something a little hands-on. 7 00:00:11,270 --> 00:00:13,897 The goal is not to turn us all into web developers 8 00:00:13,897 --> 00:00:16,230 by any means but really just to give you a taste of some 9 00:00:16,230 --> 00:00:21,750 of the fundamental constructs of what goes into web programming and today web 10 00:00:21,750 --> 00:00:23,980 development, so the static side of things-- 11 00:00:23,980 --> 00:00:26,660 no logic, no programming language, just static content. 12 00:00:26,660 --> 00:00:29,660 And it will give us an opportunity to actually see what a web server is, 13 00:00:29,660 --> 00:00:34,140 see what an HTML file is, see what it is HTTP is actually serving up. 14 00:00:34,140 --> 00:00:38,600 But before we dive in, any retrospective questions about cloud computing 15 00:00:38,600 --> 00:00:43,922 or security or anything in between? 16 00:00:43,922 --> 00:00:44,890 >> No? 17 00:00:44,890 --> 00:00:47,181 All right, well, let's do this, just in case 18 00:00:47,181 --> 00:00:49,680 the process of signing up for something takes a few minutes. 19 00:00:49,680 --> 00:00:51,221 We'll let it do it in the background. 20 00:00:51,221 --> 00:00:56,860 Go ahead, if you could, to this URL here-- c9.io. 21 00:00:56,860 --> 00:01:02,810 This is a third-party service-- platform as a service, if you will-- 22 00:01:02,810 --> 00:01:05,190 that is going to invite you to sign up for an account, 23 00:01:05,190 --> 00:01:08,650 and it's going to give each of you an account in the so-called cloud 24 00:01:08,650 --> 00:01:11,330 on someone else's infrastructure, a company called Cloud9. 25 00:01:11,330 --> 00:01:13,350 But what's nice about this is that they give you 26 00:01:13,350 --> 00:01:15,990 an approximation of an actual real-world development 27 00:01:15,990 --> 00:01:18,530 environment, albeit in the cloud and in a web browser, 28 00:01:18,530 --> 00:01:21,175 and we'll use this to actually experiment a bit today. 29 00:01:21,175 --> 00:01:27,116 30 00:01:27,116 --> 00:01:30,260 And then go ahead and just navigate your way to the sign-up process 31 00:01:30,260 --> 00:01:32,630 if you could. 32 00:01:32,630 --> 00:01:36,080 So we happen to use this in the class I teach for all of our students, 33 00:01:36,080 --> 00:01:39,140 both on campus and off now, and it's replaced what historically 34 00:01:39,140 --> 00:01:41,390 was otherwise downloadable software. 35 00:01:41,390 --> 00:01:44,620 So what you were gaining access to is one of these virtual machines, 36 00:01:44,620 --> 00:01:46,460 essentially, that I described earlier. 37 00:01:46,460 --> 00:01:50,260 So this company Cloud9 probably rents from a third party-- indeed 38 00:01:50,260 --> 00:01:52,760 in this case, Google-- a whole bunch of virtual machines 39 00:01:52,760 --> 00:01:56,500 that they somehow chop up into the illusion of individual servers 40 00:01:56,500 --> 00:01:58,610 that each of us has full control over. 41 00:01:58,610 --> 00:02:01,640 It's not quite accurate to say that they're virtual machines, 42 00:02:01,640 --> 00:02:04,550 though, because what Cloud9 actually uses 43 00:02:04,550 --> 00:02:07,570 is a somewhat newer technology called containerization. 44 00:02:07,570 --> 00:02:13,150 And let me grab this picture here to paint this picture. 45 00:02:13,150 --> 00:02:16,540 >> A container is, if you recall the picture 46 00:02:16,540 --> 00:02:19,900 from earlier, a little lighter weight than a virtual machine. 47 00:02:19,900 --> 00:02:22,090 In fact, whereas last time we talked about there 48 00:02:22,090 --> 00:02:25,170 being an operating system and a hypervisor 49 00:02:25,170 --> 00:02:28,260 and then guest operating system, guest operating system, guest operating 50 00:02:28,260 --> 00:02:30,940 system, on top of your physical hardware, 51 00:02:30,940 --> 00:02:33,740 the difference with this newer technology, containerization, 52 00:02:33,740 --> 00:02:37,290 is that they all somehow share the same operating system. 53 00:02:37,290 --> 00:02:39,970 But they still create the illusion of everyone 54 00:02:39,970 --> 00:02:44,590 having his or her own exclusive administrative rights and files 55 00:02:44,590 --> 00:02:45,400 on the server. 56 00:02:45,400 --> 00:02:48,230 But there's less software in between you and the hardware. 57 00:02:48,230 --> 00:02:52,260 The result of which is, in theory, a higher performance, 58 00:02:52,260 --> 00:02:55,470 because you're using or wasting fewer resources 59 00:02:55,470 --> 00:02:57,360 on that so-called virtualization layer. 60 00:02:57,360 --> 00:02:59,420 So this is called containerization by nature 61 00:02:59,420 --> 00:03:02,920 by way of a technology called Docker, which is very much coming into its own. 62 00:03:02,920 --> 00:03:05,086 And this is something that engineers at your company 63 00:03:05,086 --> 00:03:08,610 might kind of sort of start talking about soon if they haven't already, 64 00:03:08,610 --> 00:03:11,590 though there's certainly no reason to jump on any bandwagons. 65 00:03:11,590 --> 00:03:15,410 >> So with that said, what you probably see now 66 00:03:15,410 --> 00:03:22,670 is a screen that looks a bit like this. 67 00:03:22,670 --> 00:03:23,170 OK. 68 00:03:23,170 --> 00:03:25,260 And just call me over if not. 69 00:03:25,260 --> 00:03:27,440 And if so-- I'll come over if not. 70 00:03:27,440 --> 00:03:30,244 Go ahead and click that big plus to create a workspace, 71 00:03:30,244 --> 00:03:31,660 and you'll see a screen like this. 72 00:03:31,660 --> 00:03:35,020 You can call the workspace name anything you want for now. 73 00:03:35,020 --> 00:03:38,660 And just actually for simplicity, go and-- well, some of you 74 00:03:38,660 --> 00:03:39,660 already have workspaces. 75 00:03:39,660 --> 00:03:47,050 Call it whatever you want-- business, Harvard, Thursday, whatever you'd like. 76 00:03:47,050 --> 00:03:48,800 You don't need a description. 77 00:03:48,800 --> 00:03:52,380 You can leave it private, unless you already have a bunch of workspaces. 78 00:03:52,380 --> 00:03:55,280 If you're forced to make it public, that's fine for today's purposes. 79 00:03:55,280 --> 00:03:56,750 Here, too, is one of the upsells. 80 00:03:56,750 --> 00:03:59,939 You get one private workspace by default. But if you want more, 81 00:03:59,939 --> 00:04:00,980 you have to pay for more. 82 00:04:00,980 --> 00:04:02,870 Otherwise, they force you to make your work public. 83 00:04:02,870 --> 00:04:05,600 But that's fine, because they also target this at open-source communities 84 00:04:05,600 --> 00:04:07,700 to encourage people to actually collaborate. 85 00:04:07,700 --> 00:04:10,699 >> And the last thing that's important, though, is, after you choose a name 86 00:04:10,699 --> 00:04:17,140 and after you choose private or public, click HTML5, the big orange icon 87 00:04:17,140 --> 00:04:22,430 second from the left, and then click Create Workspace. 88 00:04:22,430 --> 00:04:24,580 And it will probably take a minute or so, 89 00:04:24,580 --> 00:04:26,540 but you'll then have an environment, once you 90 00:04:26,540 --> 00:04:30,544 do that, that looks reminiscent of what I have on the screen here now. 91 00:04:30,544 --> 00:04:33,210 But, again, it might take a minute or more to get to this screen 92 00:04:33,210 --> 00:04:34,770 once you've clicked Create Workspace. 93 00:04:34,770 --> 00:04:37,936 But just flag me over if you'd like me to take a look at anything or advise. 94 00:04:37,936 --> 00:04:40,191 95 00:04:40,191 --> 00:04:40,690 All right. 96 00:04:40,690 --> 00:04:42,390 So I'm going to background this for now. 97 00:04:42,390 --> 00:04:44,260 Call me over if you seem to have any technical difficulties. 98 00:04:44,260 --> 00:04:46,210 But, again, it might take a little bit for that to open. 99 00:04:46,210 --> 00:04:49,570 And let's go ahead and talk about what it actually means to make a web page, 100 00:04:49,570 --> 00:04:52,780 what HTML is, and how all of this now interconnects as we're starting 101 00:04:52,780 --> 00:04:54,730 to actually use some of the technology. 102 00:04:54,730 --> 00:04:58,310 So it turns out that I can go on my little Mac here, 103 00:04:58,310 --> 00:05:01,650 open a simple program called TextEdit, or on Windows I could 104 00:05:01,650 --> 00:05:04,480 open something called Notepad.exe. 105 00:05:04,480 --> 00:05:08,260 And I could just simply do something like this-- "hello, world." 106 00:05:08,260 --> 00:05:12,020 And then I could save this as hello.txt So no magic there. 107 00:05:12,020 --> 00:05:15,200 This has nothing to do with web programming, nothing to do with HTML. 108 00:05:15,200 --> 00:05:16,790 Just creating a simple text file. 109 00:05:16,790 --> 00:05:20,600 But it turns out that a web page is literally just that. 110 00:05:20,600 --> 00:05:24,020 It's a simple text file containing text that you might type at your keyboard, 111 00:05:24,020 --> 00:05:30,070 but it typically but not always ends in not .txt but .html or .htm. 112 00:05:30,070 --> 00:05:32,050 And you don't just type words in the file. 113 00:05:32,050 --> 00:05:35,280 You actually have to use things called tags or, more generally, something 114 00:05:35,280 --> 00:05:37,190 called markup language. 115 00:05:37,190 --> 00:05:40,510 >> So I'm going to very quickly type and then explain the following. 116 00:05:40,510 --> 00:05:42,290 I'm going to first type this, which says, 117 00:05:42,290 --> 00:05:45,730 hey, browser, here comes a web page written in HTML. 118 00:05:45,730 --> 00:05:51,850 And these two things together say, hey, browser, the following is indeed HTML. 119 00:05:51,850 --> 00:05:55,790 Hey, browser, here comes the head or the top of my page. 120 00:05:55,790 --> 00:05:59,900 Hey, browser, inside of the top of my page, put a title that is, "hello, 121 00:05:59,900 --> 00:06:01,610 world." 122 00:06:01,610 --> 00:06:08,370 Hey, browser, after the head of my page, here comes the body of my page. 123 00:06:08,370 --> 00:06:12,170 And, hey, browser, the body of my page should also say, "hello world." 124 00:06:12,170 --> 00:06:15,500 So what are the salient details here? 125 00:06:15,500 --> 00:06:17,960 This is what's generally called a doc-type declaration, 126 00:06:17,960 --> 00:06:20,190 and, frankly, it's a little hard to memorize this at first. 127 00:06:20,190 --> 00:06:21,481 You just kind of copy-paste it. 128 00:06:21,481 --> 00:06:23,760 This is the formal way of saying, hey, browser, 129 00:06:23,760 --> 00:06:28,030 I am using HTML version 5 which came out somewhat recently. 130 00:06:28,030 --> 00:06:31,380 It's a magical incantation that some humans with a poor sense of design 131 00:06:31,380 --> 00:06:33,640 decided to put at the very top of the file. 132 00:06:33,640 --> 00:06:35,473 Even though it's a little arcane, that's all 133 00:06:35,473 --> 00:06:38,250 it means-- hey, browser, here comes with version 5 of HTML. 134 00:06:38,250 --> 00:06:41,741 >> The rest of this has been with us for some time now, historically, 135 00:06:41,741 --> 00:06:44,740 but it's been evolving, and it's probably been getting a little simpler. 136 00:06:44,740 --> 00:06:47,320 Notice a few characteristics of what I've highlighted. 137 00:06:47,320 --> 00:06:49,890 There's these things with angled brackets-- the left bracket 138 00:06:49,890 --> 00:06:51,040 and the right bracket. 139 00:06:51,040 --> 00:06:52,490 And notice the symmetry here. 140 00:06:52,490 --> 00:06:57,340 And by symmetry, I mean, just as I have this start tag here or an open tag 141 00:06:57,340 --> 00:07:01,560 if you will, down here I have a close tag or an end tag that's 142 00:07:01,560 --> 00:07:06,460 different only insofar as it has this slash at the beginning of the word 143 00:07:06,460 --> 00:07:07,360 HTML. 144 00:07:07,360 --> 00:07:09,360 And you can think of this as I was casually 145 00:07:09,360 --> 00:07:12,280 proposing before, hey, browser, here comes some HTML. 146 00:07:12,280 --> 00:07:16,060 And, conversely, hey, browser, that's it for the HTML-- start and end. 147 00:07:16,060 --> 00:07:18,440 >> Meanwhile hey, browser, here comes the head of my page. 148 00:07:18,440 --> 00:07:20,140 Hey, browser, that's it for the head. 149 00:07:20,140 --> 00:07:22,240 Hey, browser, here is the body of my page. 150 00:07:22,240 --> 00:07:24,020 Hey, browser, that's it for the body. 151 00:07:24,020 --> 00:07:26,940 And inside of that is some arbitrary text for now. 152 00:07:26,940 --> 00:07:30,520 And inside of the head, meanwhile, is some arbitrary but tagged, 153 00:07:30,520 --> 00:07:34,410 so to speak, text that says, the title of my page shall be "hello, world." 154 00:07:34,410 --> 00:07:37,470 Now, for now, you can assume that browsers 155 00:07:37,470 --> 00:07:41,762 have only-- or, rather, web pages have only two parts-- the head and the body. 156 00:07:41,762 --> 00:07:44,220 And the head is generally just like the menu bar, the stuff 157 00:07:44,220 --> 00:07:45,510 really just at the very top. 158 00:07:45,510 --> 00:07:48,910 And the body is the guts of the page, everything in that big rectangle 159 00:07:48,910 --> 00:07:50,239 that fills the screen. 160 00:07:50,239 --> 00:07:51,780 So I'm going to go ahead and do this. 161 00:07:51,780 --> 00:07:54,400 I going to go ahead and click Save, File Save. 162 00:07:54,400 --> 00:07:58,580 And I'm going to save this as hello.html, 163 00:07:58,580 --> 00:08:00,870 and I'm just going to put it on my desktop. 164 00:08:00,870 --> 00:08:03,520 And I'm going to go ahead and click Save. 165 00:08:03,520 --> 00:08:05,806 And notice-- my Mac at least is yelling at me. 166 00:08:05,806 --> 00:08:07,180 Are you sure you want to do this? 167 00:08:07,180 --> 00:08:08,710 And I'm going to say, yes, use HTML. 168 00:08:08,710 --> 00:08:10,400 I know better in this case. 169 00:08:10,400 --> 00:08:14,686 And now I'm going to go to my desktop where I have this file suddenly. 170 00:08:14,686 --> 00:08:16,060 And I'm going to double-click it. 171 00:08:16,060 --> 00:08:18,268 And you'll notice that, by default, Chrome opened up. 172 00:08:18,268 --> 00:08:19,996 That's because that's my default browser. 173 00:08:19,996 --> 00:08:21,370 And it just says, "hello, world." 174 00:08:21,370 --> 00:08:23,078 But it says "hello, world" in two places. 175 00:08:23,078 --> 00:08:23,979 Notice top left. 176 00:08:23,979 --> 00:08:25,020 Pretty hard to miss that. 177 00:08:25,020 --> 00:08:26,180 It's big and bold. 178 00:08:26,180 --> 00:08:30,690 And where else does it seem to say, "hello, world"? 179 00:08:30,690 --> 00:08:31,470 >> AUDIENCE: The tab. 180 00:08:31,470 --> 00:08:33,100 >> DAVID J. MALAN: Yeah, the tab itself. 181 00:08:33,100 --> 00:08:35,159 So when I said the head of the page is everything up top-- 182 00:08:35,159 --> 00:08:36,367 and indeed this is the title. 183 00:08:36,367 --> 00:08:37,710 It's just in the tab here. 184 00:08:37,710 --> 00:08:40,320 And I can pull this tab out so as not to confuse. 185 00:08:40,320 --> 00:08:43,360 This is just a single tab now, and indeed we see "hello, world" 186 00:08:43,360 --> 00:08:45,970 up here and "hello, world" down here. 187 00:08:45,970 --> 00:08:47,160 So pretty straightforward. 188 00:08:47,160 --> 00:08:49,050 But it's also fairly simple. 189 00:08:49,050 --> 00:08:50,440 And, actually, I zoomed in. 190 00:08:50,440 --> 00:08:53,272 I can change the font size just to magnify for accessibility. 191 00:08:53,272 --> 00:08:56,830 But let's now do something a little more interesting. 192 00:08:56,830 --> 00:08:59,760 >> I'm going to go-- whoops, let me get back to my text file. 193 00:08:59,760 --> 00:09:02,400 I'm going back to my text file, and I'm going 194 00:09:02,400 --> 00:09:06,320 to change this and say "hello, Disney World." 195 00:09:06,320 --> 00:09:07,970 Save. 196 00:09:07,970 --> 00:09:10,919 And go back to my browser and click Reload. 197 00:09:10,919 --> 00:09:12,710 And now, of course, it says "Disney World." 198 00:09:12,710 --> 00:09:15,500 And I'm going to artificially zoom in just so it's easier to see. 199 00:09:15,500 --> 00:09:19,012 So now, unfortunately, I kind of want to-- actually, that's a Mac feature. 200 00:09:19,012 --> 00:09:21,720 I want to click on Disney World and go somewhere like disney.com, 201 00:09:21,720 --> 00:09:23,290 but that doesn't work. 202 00:09:23,290 --> 00:09:26,850 So a basic tenet of the web is hyperlinks, links that go elsewhere. 203 00:09:26,850 --> 00:09:28,390 So how do I do that? 204 00:09:28,390 --> 00:09:34,690 Well, I could just say, "hello, http://www.disney.com." 205 00:09:34,690 --> 00:09:36,110 Save this. 206 00:09:36,110 --> 00:09:37,620 Reload. 207 00:09:37,620 --> 00:09:39,400 But this too, not clickable. 208 00:09:39,400 --> 00:09:42,930 And what's nice here, even though this is not functional yet, 209 00:09:42,930 --> 00:09:45,930 is that it seems that the browser literally only does 210 00:09:45,930 --> 00:09:46,950 what I tell it to do. 211 00:09:46,950 --> 00:09:50,110 So if I just type a URL like this, it's just going to show me the URL. 212 00:09:50,110 --> 00:09:54,270 I need to use tags or markup language to actually tell 213 00:09:54,270 --> 00:09:55,621 the browser to do even more. 214 00:09:55,621 --> 00:09:57,870 So I'm going to go ahead and delete this for a moment. 215 00:09:57,870 --> 00:10:00,980 And I'm going to say, hey, browser, start an anchor here, 216 00:10:00,980 --> 00:10:02,650 a link so to speak. 217 00:10:02,650 --> 00:10:07,500 And the hyper-reference, the destination of that anchor, should be this URL. 218 00:10:07,500 --> 00:10:08,750 And notice my quotes. 219 00:10:08,750 --> 00:10:11,590 I could use single quotes, too, but you have to be consistent, 220 00:10:11,590 --> 00:10:14,270 and I would generally just use double quotes to keep it simple. 221 00:10:14,270 --> 00:10:16,820 Notice I'm going to close the tag. 222 00:10:16,820 --> 00:10:21,160 And then here I'm going to say, "Disney World." 223 00:10:21,160 --> 00:10:26,890 And now I need some symmetry-- open bracket, /a, closed bracket. 224 00:10:26,890 --> 00:10:28,090 >> So what have I introduced? 225 00:10:28,090 --> 00:10:30,100 We've had a few tags already. 226 00:10:30,100 --> 00:10:32,410 HTML, Head, Title, Body, are all tags, so to speak, 227 00:10:32,410 --> 00:10:34,280 with open and closed counterparts. 228 00:10:34,280 --> 00:10:36,530 But notice, this is sort of fundamentally different. 229 00:10:36,530 --> 00:10:39,140 This is what we'll call in HTML an attribute. 230 00:10:39,140 --> 00:10:41,451 And an attribute is just a key-value pair. 231 00:10:41,451 --> 00:10:43,950 This is a common thing in computer science-- key-value pair. 232 00:10:43,950 --> 00:10:45,770 It's sort of the tool of the trade. 233 00:10:45,770 --> 00:10:47,040 A key and a value. 234 00:10:47,040 --> 00:10:49,390 A word and then some other word or words. 235 00:10:49,390 --> 00:10:53,790 And in this case, the key is href, and the value is that full URL. 236 00:10:53,790 --> 00:10:57,890 And what an attribute does is it influences the behavior of a tag. 237 00:10:57,890 --> 00:11:01,010 And in this case, we need to influence the behavior of the anchor tag, 238 00:11:01,010 --> 00:11:04,140 because we need to anchor this link to somewhere. 239 00:11:04,140 --> 00:11:06,960 And how you do that is by way of the attribute. 240 00:11:06,960 --> 00:11:08,970 >> So I'm going to go ahead and save the file now. 241 00:11:08,970 --> 00:11:11,300 Go back to my browser and reload. 242 00:11:11,300 --> 00:11:14,580 And, voila, we now have the beginnings of a legitimate web page. 243 00:11:14,580 --> 00:11:18,420 Super-simple, but if I hover over this-- notice in the bottom-left corner, 244 00:11:18,420 --> 00:11:19,830 it's super-small. 245 00:11:19,830 --> 00:11:21,730 But you do see www.disney.com. 246 00:11:21,730 --> 00:11:27,076 And if I click it, indeed this whisks me away to disney.com. 247 00:11:27,076 --> 00:11:29,380 Now, the curious thing here is that it is not 248 00:11:29,380 --> 00:11:33,940 the best-- the most marketable URL, but that's fine because this file does not 249 00:11:33,940 --> 00:11:35,360 exist on the World Wide Web. 250 00:11:35,360 --> 00:11:39,740 It exists as a local file in apparently my Users directory-- /jharvard-- 251 00:11:39,740 --> 00:11:41,890 for John Harvard-- /desktop. 252 00:11:41,890 --> 00:11:42,634 But it has a URL. 253 00:11:42,634 --> 00:11:43,800 It just happens to be local. 254 00:11:43,800 --> 00:11:47,050 Unfortunately, none of you can visit this, because if you type this URL, 255 00:11:47,050 --> 00:11:49,980 you'd be telling your browser, look for a file called hello.html 256 00:11:49,980 --> 00:11:50,772 on your hard drive. 257 00:11:50,772 --> 00:11:53,271 And, of course, unless you've been following along manually, 258 00:11:53,271 --> 00:11:54,530 it's not going to exist there. 259 00:11:54,530 --> 00:11:55,190 >> So that's fine. 260 00:11:55,190 --> 00:11:57,815 We still need a way, ultimately, to get this file into the web, 261 00:11:57,815 --> 00:12:01,180 but let's tease apart a couple of security implications of what we just 262 00:12:01,180 --> 00:12:04,850 saw and tie it back to the earlier discussion from this morning. 263 00:12:04,850 --> 00:12:08,200 It turns out that, if a browser literally just does 264 00:12:08,200 --> 00:12:12,560 what I tell it to do, and it seems to be the case that an anchor tag is 265 00:12:12,560 --> 00:12:17,380 influenced by the value of this attribute called href 266 00:12:17,380 --> 00:12:20,810 but it displays this text, this would seem 267 00:12:20,810 --> 00:12:26,520 to imply that I could put the URL in both places and then reload 268 00:12:26,520 --> 00:12:29,100 and now see the URL and go to the URL. 269 00:12:29,100 --> 00:12:32,680 Notice, if I hover over the bottom-left, I'm indeed going still to disney.com. 270 00:12:32,680 --> 00:12:38,340 >> So if you've ever been phished-- P-H-I-S-H-E-D-- 271 00:12:38,340 --> 00:12:42,820 with one of those bogus emails from like PayPal your bank, 272 00:12:42,820 --> 00:12:46,470 you've probably gotten links inside of the email that you're reading that 273 00:12:46,470 --> 00:12:49,970 tells you to click here to go confirm your password or confirm your birthdate 274 00:12:49,970 --> 00:12:53,840 or social or something socially engineering you to disclose 275 00:12:53,840 --> 00:12:54,920 information. 276 00:12:54,920 --> 00:12:57,625 Well, I could kind of take advantage of this, couldn't I? 277 00:12:57,625 --> 00:13:01,240 I could say something like, www.paypal.com. 278 00:13:01,240 --> 00:13:11,340 And instead of disney.com, I could go to, like, badguy.com. 279 00:13:11,340 --> 00:13:12,850 Reload. 280 00:13:12,850 --> 00:13:16,620 And how easy is it to dupe, especially a non-technical reader 281 00:13:16,620 --> 00:13:20,649 or a cursorily reading reader than to click 282 00:13:20,649 --> 00:13:23,940 a link like this, which if I click it-- I actually don't want to go badguy.com. 283 00:13:23,940 --> 00:13:25,398 I don't know what's actually there. 284 00:13:25,398 --> 00:13:30,080 So paypal.com, notice, is what it says it's going to, 285 00:13:30,080 --> 00:13:33,210 but of course, if I look down super-low, it's a little blurry, 286 00:13:33,210 --> 00:13:34,230 but it says badguy.com. 287 00:13:34,230 --> 00:13:38,644 That's the only tell right now that I'm going to the wrong place. 288 00:13:38,644 --> 00:13:41,560 And when I said earlier that banks really shouldn't encourage or train 289 00:13:41,560 --> 00:13:44,510 users into clicking links, this is just one manifestation of it. 290 00:13:44,510 --> 00:13:45,430 And it's that simple. 291 00:13:45,430 --> 00:13:48,120 You are now an adversary if you do something like this 292 00:13:48,120 --> 00:13:51,000 and try to trick a user into visiting your website. 293 00:13:51,000 --> 00:13:53,320 But for now, we'll keep things nice and clean. 294 00:13:53,320 --> 00:13:55,640 We're going to go ahead and rewind these changes. 295 00:13:55,640 --> 00:13:56,530 Reload the page. 296 00:13:56,530 --> 00:13:57,740 And I go back to disney.com. 297 00:13:57,740 --> 00:14:00,660 >> Let's see if we can't tease this apart a little more. 298 00:14:00,660 --> 00:14:04,160 So "hello, Disney World." 299 00:14:04,160 --> 00:14:05,950 I'm going to say down here. 300 00:14:05,950 --> 00:14:08,220 Maybe I'm going to make some room. 301 00:14:08,220 --> 00:14:12,730 "We hope you enjoy your stay!" 302 00:14:12,730 --> 00:14:13,830 Save. 303 00:14:13,830 --> 00:14:15,850 Reload. 304 00:14:15,850 --> 00:14:19,010 It's not rea-- that's not what I intended, right? 305 00:14:19,010 --> 00:14:21,870 I mean, if I'm treating my text file like a word processor, 306 00:14:21,870 --> 00:14:24,894 what did you hope would happen here? 307 00:14:24,894 --> 00:14:27,060 Yeah, I feel like there should be a line break here, 308 00:14:27,060 --> 00:14:28,799 so it feels buggy in some way. 309 00:14:28,799 --> 00:14:31,090 But that's actually deliberate, because just as before, 310 00:14:31,090 --> 00:14:33,381 the browser is only going to do what you tell it to do. 311 00:14:33,381 --> 00:14:34,806 I have not told it to break lines. 312 00:14:34,806 --> 00:14:37,930 I've not told it to move down, even though, intuitively, I feel like I did. 313 00:14:37,930 --> 00:14:39,805 So it turns out we need a little more markup, 314 00:14:39,805 --> 00:14:41,390 and I'm going to fix this as follows. 315 00:14:41,390 --> 00:14:46,160 I'm going to preface this first hello with what's called a paragraph tag. 316 00:14:46,160 --> 00:14:48,920 And then I'm going to go ahead and wrap this other sentence 317 00:14:48,920 --> 00:14:54,370 in another paragraph tag, even though they're super-short paragraphs. 318 00:14:54,370 --> 00:14:55,930 Now I'm going to save. 319 00:14:55,930 --> 00:14:57,160 Reload. 320 00:14:57,160 --> 00:14:59,070 And now we have that space, and we sort of 321 00:14:59,070 --> 00:15:01,680 have the semantics of two separate paragraphs. 322 00:15:01,680 --> 00:15:05,290 >> That's all fine and good, but it would be nice to add an image to this page, 323 00:15:05,290 --> 00:15:08,710 so I'm going to go look for Mickey Mouse on Google Images. 324 00:15:08,710 --> 00:15:12,830 And just for fun, I'm going to grab this image. 325 00:15:12,830 --> 00:15:15,350 I'm going to go ahead now and grab the URL of this image, 326 00:15:15,350 --> 00:15:16,510 though there's different ways to do this. 327 00:15:16,510 --> 00:15:18,520 For now, I'm just going to copy the URL. 328 00:15:18,520 --> 00:15:24,770 I'm going to go back into my text file, and I'm going to say here, 329 00:15:24,770 --> 00:15:31,160 img src= quote unquote that URL, super-long. 330 00:15:31,160 --> 00:15:34,580 And then the notion of an image is a little different. 331 00:15:34,580 --> 00:15:38,640 There's really no notion of starting an image and ending an image, 332 00:15:38,640 --> 00:15:40,630 like a start tag an end tag. 333 00:15:40,630 --> 00:15:43,840 So it feels a little weird to me semantically to do this, 334 00:15:43,840 --> 00:15:45,390 to have a close-image tag. 335 00:15:45,390 --> 00:15:46,780 It's not incorrect. 336 00:15:46,780 --> 00:15:48,840 It's perfectly correct, and it's encouraged, 337 00:15:48,840 --> 00:15:50,870 but there's shorthand notation. 338 00:15:50,870 --> 00:15:53,780 I can kind of simultaneously open and close the same tag, 339 00:15:53,780 --> 00:15:55,510 and that will make the browser happy. 340 00:15:55,510 --> 00:15:56,950 So it's just a little more succinct for things 341 00:15:56,950 --> 00:15:59,408 that conceptually really don't make sense to start and end. 342 00:15:59,408 --> 00:16:01,190 They just are there, or they're not. 343 00:16:01,190 --> 00:16:06,020 >> So I'm going to save this and go back to my "hello, world" page and reload. 344 00:16:06,020 --> 00:16:09,880 And it's a little out of control, because that image is actually 345 00:16:09,880 --> 00:16:12,210 a little large, but that's OK. 346 00:16:12,210 --> 00:16:13,710 I could resize it in a program. 347 00:16:13,710 --> 00:16:14,900 Or you know what. 348 00:16:14,900 --> 00:16:17,350 Just to demonstrate, I'm going to actually say 349 00:16:17,350 --> 00:16:21,760 that the width of this thing should only be 200 pixels, 200 dots. 350 00:16:21,760 --> 00:16:24,360 Let me go ahead and save and reload, and now the page 351 00:16:24,360 --> 00:16:25,690 looks a little more reasonable. 352 00:16:25,690 --> 00:16:27,260 But notice the pattern. 353 00:16:27,260 --> 00:16:30,030 Well, I've kind of taught you all of HTML in some sense, at least 354 00:16:30,030 --> 00:16:33,531 conceptually, because all HTML is is these tags-- open tags, closed tags, 355 00:16:33,531 --> 00:16:35,280 and attributes that modify their behavior. 356 00:16:35,280 --> 00:16:38,380 And, apparently, every tag can have zero or one 357 00:16:38,380 --> 00:16:43,005 or two or more attributes, each of which does something a little different. 358 00:16:43,005 --> 00:16:44,380 Now, how do you know what exists? 359 00:16:44,380 --> 00:16:46,800 You just listen to someone like me tell you what exists, 360 00:16:46,800 --> 00:16:50,860 or you just Google around for a tutorial on HTML, and it really is this simple. 361 00:16:50,860 --> 00:16:54,030 >> Truly, when I was an undergrad years ago and learned HTML, 362 00:16:54,030 --> 00:16:56,530 one of my math teaching assistants just spent 363 00:16:56,530 --> 00:16:59,600 a little bit of time tutoring me for like half an hour, an hour, 364 00:16:59,600 --> 00:17:00,660 and then I was on my way. 365 00:17:00,660 --> 00:17:03,300 I was on my way toward making the most hideous websites ever, 366 00:17:03,300 --> 00:17:05,549 which, apparently, I haven't really progressed beyond. 367 00:17:05,549 --> 00:17:09,849 But the point is that, once you understand these simple ideas-- 368 00:17:09,849 --> 00:17:13,450 if arcane text-- but these simple ideas of starting a thought 369 00:17:13,450 --> 00:17:15,960 and closing a thought, keeping everything nicely balanced, 370 00:17:15,960 --> 00:17:19,150 looking something up, modifying the behavior of that tag, that's really all 371 00:17:19,150 --> 00:17:20,079 there is to it. 372 00:17:20,079 --> 00:17:28,140 And in fact, if we now go to something like google.com-- actually, 373 00:17:28,140 --> 00:17:31,920 let's go a place a little more reasonable-- stanford.edu. 374 00:17:31,920 --> 00:17:37,800 And I'm going to go to View, Developer, View Source. 375 00:17:37,800 --> 00:17:41,400 It's ugly, but notice-- and I'll zoom in notice 376 00:17:41,400 --> 00:17:43,432 some stuff that's familiar already. 377 00:17:43,432 --> 00:17:45,140 There's this up here, which is a browser. 378 00:17:45,140 --> 00:17:46,800 Here comes HTML5. 379 00:17:46,800 --> 00:17:47,634 There's HTML. 380 00:17:47,634 --> 00:17:49,550 Apparently, there's an attribute that I didn't 381 00:17:49,550 --> 00:17:51,540 use that specifies the language of the page, 382 00:17:51,540 --> 00:17:54,380 and this can help with automatic translation and stuff like that. 383 00:17:54,380 --> 00:17:55,546 Here's the head of the page. 384 00:17:55,546 --> 00:17:57,790 Here's the title of Stanford's page. 385 00:17:57,790 --> 00:17:59,832 There's a tag I didn't talk about yet-- Meta tag. 386 00:17:59,832 --> 00:18:01,540 It's just sort of background information. 387 00:18:01,540 --> 00:18:04,210 It helps with SEO, or search-engine optimization, 388 00:18:04,210 --> 00:18:06,320 or Google-search results or the like. 389 00:18:06,320 --> 00:18:09,029 But if we keep looking, keep looking, here's the Body tag. 390 00:18:09,029 --> 00:18:11,570 And there's bunches of other tags we've not talked about yet. 391 00:18:11,570 --> 00:18:13,750 But Div is one for a division of the page. 392 00:18:13,750 --> 00:18:16,680 It's like an invisible rectangle if you kind of want to mentally 393 00:18:16,680 --> 00:18:20,160 divide your page into different units online. 394 00:18:20,160 --> 00:18:22,650 And then lots of divs I see, something called Class, 395 00:18:22,650 --> 00:18:24,440 but we'll come back to that. 396 00:18:24,440 --> 00:18:26,200 >> This is interesting-- Forms. 397 00:18:26,200 --> 00:18:27,730 Forms are all over the web. 398 00:18:27,730 --> 00:18:30,310 Any search box you're ever used is a form. 399 00:18:30,310 --> 00:18:31,490 And, so, let's actually see. 400 00:18:31,490 --> 00:18:32,790 Form. 401 00:18:32,790 --> 00:18:33,910 Action. 402 00:18:33,910 --> 00:18:37,660 The action of this form, for whatever historical reasons, is that URL. 403 00:18:37,660 --> 00:18:38,840 Method is "post." 404 00:18:38,840 --> 00:18:44,060 Turns out that HTTP requests can use the verb "get," like we saw before, 405 00:18:44,060 --> 00:18:45,070 or "post." 406 00:18:45,070 --> 00:18:47,030 And will see a difference of this in a moment. 407 00:18:47,030 --> 00:18:48,363 Let's actually see what this is. 408 00:18:48,363 --> 00:18:49,830 Let me go back to Stanford's page. 409 00:18:49,830 --> 00:18:53,330 What form are they talking about, do you think? 410 00:18:53,330 --> 00:18:54,485 What jumps out at you? 411 00:18:54,485 --> 00:18:54,970 >> AUDIENCE: Search box. 412 00:18:54,970 --> 00:18:55,845 >> DAVID J. MALAN: Yeah. 413 00:18:55,845 --> 00:18:58,410 So up at the top right here is this Search box. 414 00:18:58,410 --> 00:19:02,441 And that's how they implemented it-- a tag that's literally open-bracket form. 415 00:19:02,441 --> 00:19:03,940 And then let's search for something. 416 00:19:03,940 --> 00:19:09,220 Let's search for a buddy of mine-- "Nick Parlante." 417 00:19:09,220 --> 00:19:11,380 Enter. 418 00:19:11,380 --> 00:19:13,750 And of course, it went to a slightly different URL. 419 00:19:13,750 --> 00:19:15,140 Let me go back here. 420 00:19:15,140 --> 00:19:18,960 Let's search for "courses." 421 00:19:18,960 --> 00:19:19,460 Damn it. 422 00:19:19,460 --> 00:19:20,484 Went to a different URL. 423 00:19:20,484 --> 00:19:23,400 So, Stanford's adding some magic that they're not taking me to the URL 424 00:19:23,400 --> 00:19:25,820 that we saw in the action attribute there. 425 00:19:25,820 --> 00:19:32,480 But this form here is implemented purely by way of this markup here, these tags. 426 00:19:32,480 --> 00:19:35,710 In fact, here's the input for the type of search that you want. 427 00:19:35,710 --> 00:19:38,940 Here is the input for another type of search. 428 00:19:38,940 --> 00:19:41,960 Here is the input for the string itself. 429 00:19:41,960 --> 00:19:45,394 And so the goal is not to wrap our minds around all of these tags 430 00:19:45,394 --> 00:19:46,060 but just to see. 431 00:19:46,060 --> 00:19:48,300 It's just opening and closing tags and looking things up. 432 00:19:48,300 --> 00:19:48,560 Yeah? 433 00:19:48,560 --> 00:19:48,920 Victoria? 434 00:19:48,920 --> 00:19:49,795 >> AUDIENCE: [INAUDIBLE] 435 00:19:49,795 --> 00:19:51,925 436 00:19:51,925 --> 00:19:53,550 DAVID J. MALAN: That's a good question. 437 00:19:53,550 --> 00:19:54,660 That's a little trickier to see. 438 00:19:54,660 --> 00:19:56,300 Let me come back to that question in just a few minutes 439 00:19:56,300 --> 00:19:59,000 when we look at something called CSS, or cascading style sheets, 440 00:19:59,000 --> 00:20:02,500 and we can try to infer as much from the page. 441 00:20:02,500 --> 00:20:08,090 So if we now take a look at google.com, let's see what their page looks like. 442 00:20:08,090 --> 00:20:09,840 You would they're-- that's cute today. 443 00:20:09,840 --> 00:20:12,490 444 00:20:12,490 --> 00:20:12,990 OK. 445 00:20:12,990 --> 00:20:13,690 All done. 446 00:20:13,690 --> 00:20:15,260 All right, so View Source. 447 00:20:15,260 --> 00:20:19,590 You would think Google has really nice source code. 448 00:20:19,590 --> 00:20:24,970 So, apparently, what is going on here? 449 00:20:24,970 --> 00:20:27,880 And in fact, this is not even HTML. 450 00:20:27,880 --> 00:20:30,930 This is something called JavaScript. 451 00:20:30,930 --> 00:20:32,344 And let's keep going and going. 452 00:20:32,344 --> 00:20:34,010 I don't even know where the page starts. 453 00:20:34,010 --> 00:20:37,240 I'm going to use Command F, open bracket HTML. 454 00:20:37,240 --> 00:20:38,200 All right, there it is. 455 00:20:38,200 --> 00:20:44,150 I found the start of the page, and there is so much stuff in here. 456 00:20:44,150 --> 00:20:45,310 >> What is actually going on? 457 00:20:45,310 --> 00:20:47,460 Well, you know what, we can clean this up. 458 00:20:47,460 --> 00:20:52,109 If I instead go to this Inspect toolbar, this special diagnostic tool, 459 00:20:52,109 --> 00:20:54,150 and go not to Network, where we keep going today, 460 00:20:54,150 --> 00:20:56,420 but if I go to Elements, what's really nice 461 00:20:56,420 --> 00:20:59,990 is that a browser has a lot much better eyes than I do. 462 00:20:59,990 --> 00:21:02,670 And the browser can read that mess of a web page, 463 00:21:02,670 --> 00:21:04,700 that HTML mail we just looked at, and it can 464 00:21:04,700 --> 00:21:08,340 parse it or read and analyze it and reformat it 465 00:21:08,340 --> 00:21:09,910 in a nice human-friendly way. 466 00:21:09,910 --> 00:21:11,740 So what I'm seeing now in this screen here 467 00:21:11,740 --> 00:21:15,470 under Elements, the exact same content, but they've indented everything, 468 00:21:15,470 --> 00:21:18,140 they've colorized it, but it's the exact same text 469 00:21:18,140 --> 00:21:19,620 that I downloaded from the server. 470 00:21:19,620 --> 00:21:23,630 >> And what's nice now is I can see in the body, for instance-- notice, 471 00:21:23,630 --> 00:21:26,480 the page is still composed of just a head and a body, 472 00:21:26,480 --> 00:21:28,660 and I can hierarchically dive in here. 473 00:21:28,660 --> 00:21:32,420 Notice that Google seems to have to divs-- this one and this one. 474 00:21:32,420 --> 00:21:33,310 I can expand that. 475 00:21:33,310 --> 00:21:35,370 There's a whole bunch of other divs. 476 00:21:35,370 --> 00:21:36,900 So it's a little complex. 477 00:21:36,900 --> 00:21:37,400 But wait. 478 00:21:37,400 --> 00:21:40,970 This seems so much more readable, relatively, than this. 479 00:21:40,970 --> 00:21:43,840 Why is Google embarrassing itself by just sending 480 00:21:43,840 --> 00:21:50,400 this huge mess of code of some sort just to implement something 481 00:21:50,400 --> 00:21:53,640 that looks so simple at first glance? 482 00:21:53,640 --> 00:21:55,270 Like, why don't they add more spaces? 483 00:21:55,270 --> 00:21:56,811 Why didn't they hit Enter like I did? 484 00:21:56,811 --> 00:21:59,110 Look how good I was at writing a web page. 485 00:21:59,110 --> 00:22:00,680 I hit Enter so diligently. 486 00:22:00,680 --> 00:22:03,760 I indented so everything is so pretty and readable. 487 00:22:03,760 --> 00:22:08,463 Why does Google not practice the same? 488 00:22:08,463 --> 00:22:11,409 >> AUDIENCE: [INAUDIBLE] 489 00:22:11,409 --> 00:22:12,305 490 00:22:12,305 --> 00:22:13,180 DAVID J. MALAN: Good. 491 00:22:13,180 --> 00:22:14,270 Very fair. 492 00:22:14,270 --> 00:22:16,650 They do not have some person at Google manually 493 00:22:16,650 --> 00:22:18,160 updating the home page anymore. 494 00:22:18,160 --> 00:22:20,010 It's not 1999 anymore. 495 00:22:20,010 --> 00:22:21,140 So they have software. 496 00:22:21,140 --> 00:22:25,397 They have other tools that generate dynamically they're HTML. 497 00:22:25,397 --> 00:22:27,480 Of course, that code itself was written by humans, 498 00:22:27,480 --> 00:22:30,220 but the reality is, it's quite fair to say, 499 00:22:30,220 --> 00:22:33,340 the browser certainly doesn't care how messy the code is. 500 00:22:33,340 --> 00:22:35,940 But there's an even more compelling technical reason 501 00:22:35,940 --> 00:22:42,580 that Google distributes their HTML code in such a sloppy, seemingly 502 00:22:42,580 --> 00:22:48,350 overwhelming way all packed together with very little way-- very little 503 00:22:48,350 --> 00:22:51,274 in the way of formatting like I did. 504 00:22:51,274 --> 00:22:52,570 >> AUDIENCE: [INAUDIBLE] 505 00:22:52,570 --> 00:22:53,528 >> DAVID J. MALAN: Faster? 506 00:22:53,528 --> 00:22:54,040 Why? 507 00:22:54,040 --> 00:22:55,680 And what did you say, Lydia? 508 00:22:55,680 --> 00:22:56,240 Faster? 509 00:22:56,240 --> 00:22:57,281 Why faster? 510 00:22:57,281 --> 00:22:58,156 AUDIENCE: [INAUDIBLE] 511 00:22:58,156 --> 00:23:00,522 512 00:23:00,522 --> 00:23:02,230 DAVID J. MALAN: There's no space to read. 513 00:23:02,230 --> 00:23:02,730 Yeah. 514 00:23:02,730 --> 00:23:04,560 So think about what a space is. 515 00:23:04,560 --> 00:23:08,394 So each character on the keyboard takes some amount of space to represent, 516 00:23:08,394 --> 00:23:10,560 either physically, like it takes up that much space, 517 00:23:10,560 --> 00:23:13,250 or somehow underneath the hood, that requires memory. 518 00:23:13,250 --> 00:23:15,740 And as an aside-- and we'll talk more about this tomorrow-- 519 00:23:15,740 --> 00:23:19,930 every character on the keyboard typically requires 8 bits, or one byte. 520 00:23:19,930 --> 00:23:23,360 So a pattern of 8 zeros or ones, or just 1 byte, as we 521 00:23:23,360 --> 00:23:24,720 humans would typically say. 522 00:23:24,720 --> 00:23:27,690 So that's small, but it's still non-zero. 523 00:23:27,690 --> 00:23:29,940 It's still some amount of space. 524 00:23:29,940 --> 00:23:36,082 So if an engineer or Google hits the space bar just once, and suppose 525 00:23:36,082 --> 00:23:38,540 Google-- it's super-popular-- suppose that a billion people 526 00:23:38,540 --> 00:23:40,780 visit their home page a day, or some number of people 527 00:23:40,780 --> 00:23:43,290 visit the home page a billion times a day, 528 00:23:43,290 --> 00:23:48,890 how many additional bytes has that software engineer just cost Google 529 00:23:48,890 --> 00:23:51,310 by hitting his or her space bar once? 530 00:23:51,310 --> 00:23:52,692 >> AUDIENCE: [INAUDIBLE] 531 00:23:52,692 --> 00:23:54,150 DAVID J. MALAN: Not quite that bad. 532 00:23:54,150 --> 00:23:57,070 Just one byte times a billion. 533 00:23:57,070 --> 00:23:57,871 So a-- 534 00:23:57,871 --> 00:23:59,120 AUDIENCE: 8 billion gigabytes. 535 00:23:59,120 --> 00:24:00,370 DAVID J. MALAN: Not 8 billion. 536 00:24:00,370 --> 00:24:01,240 8 billion bytes. 537 00:24:01,240 --> 00:24:02,410 But 1 gigabyte. 538 00:24:02,410 --> 00:24:04,080 1 gigabyte would be the unit of measure. 539 00:24:04,080 --> 00:24:08,240 If he or she does two spaces, 2 gigabytes. 540 00:24:08,240 --> 00:24:09,030 Three gigabytes. 541 00:24:09,030 --> 00:24:09,530 Right? 542 00:24:09,530 --> 00:24:11,860 It scales expensively. 543 00:24:11,860 --> 00:24:16,150 And so in cases like Google, which, granted, are extreme cases, 544 00:24:16,150 --> 00:24:21,450 there are other issues that arise just by making very reasonable decisions 545 00:24:21,450 --> 00:24:25,744 or taking very simple human actions, because it has this magnified effect. 546 00:24:25,744 --> 00:24:27,660 So one of the reasons this looks so compressed 547 00:24:27,660 --> 00:24:30,660 is exactly as Victoria said-- it was just generated by computers anyway. 548 00:24:30,660 --> 00:24:31,900 So no big deal. 549 00:24:31,900 --> 00:24:33,309 Let the browser figure it out. 550 00:24:33,309 --> 00:24:35,350 But it also deliberately doesn't have much space, 551 00:24:35,350 --> 00:24:36,766 because the space isn't necessary. 552 00:24:36,766 --> 00:24:38,250 And the space actually costs money. 553 00:24:38,250 --> 00:24:40,670 >> It either costs time, because just to push 554 00:24:40,670 --> 00:24:44,670 that much more data out of google.com's headquarters just 555 00:24:44,670 --> 00:24:47,710 has got to take some amount of time, even if it's milliseconds 556 00:24:47,710 --> 00:24:51,190 or microseconds, but that adds up over so many users, or more likely, 557 00:24:51,190 --> 00:24:52,270 it probably costs money. 558 00:24:52,270 --> 00:24:54,690 Google probably connects to someone else in the world, one 559 00:24:54,690 --> 00:24:56,398 of those peering points, and if they have 560 00:24:56,398 --> 00:24:59,880 some kind of financial relationship whereby their data costs money, 561 00:24:59,880 --> 00:25:01,730 they might as well minimize how much data 562 00:25:01,730 --> 00:25:04,530 they're spitting out on their internet connection. 563 00:25:04,530 --> 00:25:07,630 >> So the funny thing, though, ultimately, or maybe the reassuring thing, 564 00:25:07,630 --> 00:25:11,030 is that even though this looks terribly overwhelming, at the end of the day, 565 00:25:11,030 --> 00:25:16,750 it's still the exact same principles as this very simple page here of an HTML 566 00:25:16,750 --> 00:25:17,390 page. 567 00:25:17,390 --> 00:25:20,610 So just to summarize and so that you have a canonical version if you weren't 568 00:25:20,610 --> 00:25:25,900 following along by choice here, here might be the most simple of web pages, 569 00:25:25,900 --> 00:25:28,240 so something to play with perhaps later. 570 00:25:28,240 --> 00:25:30,790 >> Well, let's introduce a couple of other ideas now. 571 00:25:30,790 --> 00:25:33,420 We're about to introduce something called a style tag. 572 00:25:33,420 --> 00:25:38,110 We can stylize this page in more interesting ways. 573 00:25:38,110 --> 00:25:40,860 So whereas HTML email is all about marking up 574 00:25:40,860 --> 00:25:44,470 the data, sort of specifying to a browser how to structure the data, 575 00:25:44,470 --> 00:25:48,110 where to put it, CSS, or cascading style sheets, 576 00:25:48,110 --> 00:25:52,640 is a second language that generally gets commingled with HTML 577 00:25:52,640 --> 00:25:55,670 as we'll see-- but we can clean that up in a moment-- that takes 578 00:25:55,670 --> 00:25:59,850 it the final mile, and it stylizes it. 579 00:25:59,850 --> 00:26:02,460 It gets the colors just right, the font sizes just right, 580 00:26:02,460 --> 00:26:03,860 the positioning just right. 581 00:26:03,860 --> 00:26:06,510 It's all about the aesthetics or formatting, not about 582 00:26:06,510 --> 00:26:08,330 the fundamental data itself. 583 00:26:08,330 --> 00:26:11,390 And the easiest way to show this is perhaps by example. 584 00:26:11,390 --> 00:26:15,320 So I'm going to go over to my simple text file. 585 00:26:15,320 --> 00:26:17,970 And in just a moment, I'll walk us through the process 586 00:26:17,970 --> 00:26:19,360 of doing this ourselves. 587 00:26:19,360 --> 00:26:23,310 >> I'm going to go back to my file here and reload the page just 588 00:26:23,310 --> 00:26:25,800 to confirm what it looks like. 589 00:26:25,800 --> 00:26:27,190 That's where we're at now. 590 00:26:27,190 --> 00:26:31,170 I feel like kids would enjoy having some color to this web page. 591 00:26:31,170 --> 00:26:34,480 So I'm going to go up here into the head of the page. 592 00:26:34,480 --> 00:26:38,130 And I'm going to do style, /style. 593 00:26:38,130 --> 00:26:44,060 And then inside of this, I'm going to tell the body of my page-- 594 00:26:44,060 --> 00:26:46,870 and this formatting is, at first glance, perhaps a little 595 00:26:46,870 --> 00:26:49,400 strange but conventional. 596 00:26:49,400 --> 00:26:55,010 I'm going to say that the background color of this page should be green. 597 00:26:55,010 --> 00:26:57,960 And this is unfortunately sort of not the best design. 598 00:26:57,960 --> 00:27:00,710 Notice that previously in the world of HTML, 599 00:27:00,710 --> 00:27:03,190 I said that attributes are these key-value pairs. 600 00:27:03,190 --> 00:27:05,760 Something equals quote unquote "something." 601 00:27:05,760 --> 00:27:08,810 In the world of CSS, which was designed by some different people, 602 00:27:08,810 --> 00:27:11,020 they decided that, in their world, key-value pairs 603 00:27:11,020 --> 00:27:13,920 would be word colon something. 604 00:27:13,920 --> 00:27:15,220 So it's the same idea, though. 605 00:27:15,220 --> 00:27:18,620 It's associating a value with some key that somehow 606 00:27:18,620 --> 00:27:20,330 influences the behavior of this page. 607 00:27:20,330 --> 00:27:21,901 >> And you can probably guess. 608 00:27:21,901 --> 00:27:24,150 What is this probably going to do even if you've never 609 00:27:24,150 --> 00:27:27,867 seen HTML or CSS before? 610 00:27:27,867 --> 00:27:29,450 AUDIENCE: Change the background color. 611 00:27:29,450 --> 00:27:30,560 DAVID J. MALAN: Yeah, change the background color. 612 00:27:30,560 --> 00:27:33,280 And specifically the background color of the body. 613 00:27:33,280 --> 00:27:36,290 But insofar as the body for now is the web 614 00:27:36,290 --> 00:27:38,870 page-- it's the only thing below the title bar really-- 615 00:27:38,870 --> 00:27:40,870 it's probably going to influence the same thing. 616 00:27:40,870 --> 00:27:41,430 So let's see. 617 00:27:41,430 --> 00:27:42,490 Let's save this. 618 00:27:42,490 --> 00:27:44,310 Go here and reload. 619 00:27:44,310 --> 00:27:46,140 It's pretty hideous. 620 00:27:46,140 --> 00:27:48,070 And what's going on here is a side effect. 621 00:27:48,070 --> 00:27:49,850 I just chose this image randomly. 622 00:27:49,850 --> 00:27:53,305 Why is the green not permeating behind Mickey? 623 00:27:53,305 --> 00:27:54,180 AUDIENCE: [INAUDIBLE] 624 00:27:54,180 --> 00:27:56,880 625 00:27:56,880 --> 00:27:57,880 DAVID J. MALAN: Exactly. 626 00:27:57,880 --> 00:28:01,750 It turns out that images, pretty much all images that we might use, 627 00:28:01,750 --> 00:28:03,670 are all rectangles-- of rectangles. 628 00:28:03,670 --> 00:28:07,710 Even if Mickey has some curves to himself and has a background, 629 00:28:07,710 --> 00:28:09,330 that background has to be something. 630 00:28:09,330 --> 00:28:10,280 It has to be white. 631 00:28:10,280 --> 00:28:11,910 It has to be black or something else. 632 00:28:11,910 --> 00:28:13,650 It can be transparent. 633 00:28:13,650 --> 00:28:16,100 And in fact, I could open Mickey Mouse here 634 00:28:16,100 --> 00:28:18,590 in a program called Photoshop or something similar 635 00:28:18,590 --> 00:28:21,176 and change all of that white background to transparent, 636 00:28:21,176 --> 00:28:22,550 so the green would shine through. 637 00:28:22,550 --> 00:28:25,980 But that's something I would need to ask of myself or a graphic artist 638 00:28:25,980 --> 00:28:28,130 or a designer at my company, for instance, 639 00:28:28,130 --> 00:28:31,490 to do, especially since I just borrowed this one from the internet. 640 00:28:31,490 --> 00:28:33,030 But that's why this is happening. 641 00:28:33,030 --> 00:28:34,980 >> So what else might we want to do? 642 00:28:34,980 --> 00:28:41,040 Well, we might want to say we really hope you enjoy your stay. 643 00:28:41,040 --> 00:28:44,150 And for emphasis, I want to make this strong, 644 00:28:44,150 --> 00:28:48,310 and so I'll say open strong and close strong and then reload. 645 00:28:48,310 --> 00:28:50,320 And it's a little hard to see on the projector 646 00:28:50,320 --> 00:28:53,250 but perhaps really now jumps out at you a bit more. 647 00:28:53,250 --> 00:28:56,180 So you can add italics in this way, bold facing in this way. 648 00:28:56,180 --> 00:28:57,500 We could change the colors. 649 00:28:57,500 --> 00:29:01,610 In fact, just for kicks, I'm going to go ahead and do this. 650 00:29:01,610 --> 00:29:05,120 I don't really like how my paragraphs are this close together, 651 00:29:05,120 --> 00:29:06,870 so I might do something like this. 652 00:29:06,870 --> 00:29:13,310 I'm going to tell the browser, change every paragraph tag to have, 653 00:29:13,310 --> 00:29:16,952 let's say-- actually, you know what, let's align it text-align, center. 654 00:29:16,952 --> 00:29:19,410 And again, I know this only because someone taught it to me 655 00:29:19,410 --> 00:29:21,118 or I looked it up in an online reference. 656 00:29:21,118 --> 00:29:22,450 So let me save this. 657 00:29:22,450 --> 00:29:25,070 And, ah, now I've centered the image there. 658 00:29:25,070 --> 00:29:28,490 And actually, you know what, if I move my image into a paragraph 659 00:29:28,490 --> 00:29:34,510 tag-- so a third paragraph, even though it's not text. 660 00:29:34,510 --> 00:29:36,917 Let's save that and reload. 661 00:29:36,917 --> 00:29:40,000 Now the page is starting to look kind of-- I mean, it's still pretty ugly, 662 00:29:40,000 --> 00:29:43,180 but at least it looks like I spent two minutes instead of one minute 663 00:29:43,180 --> 00:29:43,950 making it. 664 00:29:43,950 --> 00:29:47,200 >> And so, incrementally, can we make these aesthetic changes now to the page? 665 00:29:47,200 --> 00:29:50,860 I've not really changed the data in the page other than adding the word really. 666 00:29:50,860 --> 00:29:52,650 I've added metadata, if you will. 667 00:29:52,650 --> 00:29:54,830 Hey, browser, make the word "really" bold. 668 00:29:54,830 --> 00:29:56,940 But the data is not strong. 669 00:29:56,940 --> 00:29:57,830 That's metadata. 670 00:29:57,830 --> 00:29:59,410 The data is "really." 671 00:29:59,410 --> 00:30:02,200 So we still have some of the same concepts as before. 672 00:30:02,200 --> 00:30:05,990 Now, of course, this is not on the web, so I'm going to do one final step here. 673 00:30:05,990 --> 00:30:10,300 >> I'm going to go to hello.html and just highlight and copy this. 674 00:30:10,300 --> 00:30:12,285 And now I'm going to go into Cloud9, which 675 00:30:12,285 --> 00:30:13,910 I'll walk you through in just a moment. 676 00:30:13,910 --> 00:30:17,080 And odds are you'll soon be, if not already, at a screen like this. 677 00:30:17,080 --> 00:30:21,080 And let me just give you a quick tour of what Cloud9 actually is. 678 00:30:21,080 --> 00:30:26,590 So again cloud 9 is this cloud-based service 679 00:30:26,590 --> 00:30:30,580 that gives you and me the illusion of having our own virtual machine 680 00:30:30,580 --> 00:30:33,090 in the cloud, technically a container in the cloud, 681 00:30:33,090 --> 00:30:35,160 that we have full administrative privileges to. 682 00:30:35,160 --> 00:30:37,130 So in theory, no one else in the world has 683 00:30:37,130 --> 00:30:39,152 access to the screen I'm looking at right now, 684 00:30:39,152 --> 00:30:40,860 except maybe the people who run the site, 685 00:30:40,860 --> 00:30:43,470 because technically they have physical access and so forth. 686 00:30:43,470 --> 00:30:44,740 >> So what do we see in this environment? 687 00:30:44,740 --> 00:30:46,230 I'm going to zoom out, because it's a little small. 688 00:30:46,230 --> 00:30:48,104 And let me point over here for just a moment. 689 00:30:48,104 --> 00:30:53,210 On the left-hand side of my and your screen, there's a file browser at left. 690 00:30:53,210 --> 00:30:55,362 So similar in spirit to Mac OS and Windows. 691 00:30:55,362 --> 00:30:57,070 These are all of the files in my account. 692 00:30:57,070 --> 00:30:59,250 And by default, if your account is like mine, 693 00:30:59,250 --> 00:31:05,090 you'll see or soon see helloworld.html and readme.md. 694 00:31:05,090 --> 00:31:07,950 Over here on the right, this is where my text files are going to go. 695 00:31:07,950 --> 00:31:11,620 If you've ever used Microsoft Word or Notepad or TextEdit, 696 00:31:11,620 --> 00:31:14,100 this is word my editing of files is going to go. 697 00:31:14,100 --> 00:31:16,540 And then the most arcane feature of this environment 698 00:31:16,540 --> 00:31:20,100 that we won't really need to use is down here called a Terminal Window. 699 00:31:20,100 --> 00:31:23,390 If you've used DOS from yesteryear, this is the Linux 700 00:31:23,390 --> 00:31:25,450 or the Linux equivalent of DOS. 701 00:31:25,450 --> 00:31:28,190 It's a text-based interface-- no mouse clicks, no dragging. 702 00:31:28,190 --> 00:31:30,770 All you can do is type commands, but those commands 703 00:31:30,770 --> 00:31:34,400 can create files, move files, open directories, close directories, 704 00:31:34,400 --> 00:31:35,740 do any number of things. 705 00:31:35,740 --> 00:31:38,060 But for now, we'll just spend our time up here. 706 00:31:38,060 --> 00:31:39,050 >> And so let's do this. 707 00:31:39,050 --> 00:31:41,008 If you're in this environment, which you should 708 00:31:41,008 --> 00:31:45,900 be if you created a workspace already, go ahead and just go up 709 00:31:45,900 --> 00:31:48,690 to File, New for a moment. 710 00:31:48,690 --> 00:31:51,740 And that will give you a new tab right here in the middle. 711 00:31:51,740 --> 00:31:54,250 And I just-- and let's go ahead and do this. 712 00:31:54,250 --> 00:31:59,910 Let's go ahead and now do File, Save and go ahead and call it hello.html, 713 00:31:59,910 --> 00:32:02,740 not to be confused with helloworld.html, which 714 00:32:02,740 --> 00:32:06,910 came with your new free account, which is just a sample file. 715 00:32:06,910 --> 00:32:11,020 You will see it suddenly appear, most likely on the left-hand side, 716 00:32:11,020 --> 00:32:12,810 and the tab will still be open. 717 00:32:12,810 --> 00:32:21,300 And let me encourage you now to recreate this file or some variants thereof. 718 00:32:21,300 --> 00:32:24,607 And if you can't quite see it on the screen, this is identical to the slides 719 00:32:24,607 --> 00:32:26,190 that you probably have in another tab. 720 00:32:26,190 --> 00:32:29,296 >> So in short, make your first web page, save it, and then in just a moment, 721 00:32:29,296 --> 00:32:31,170 I'll show you how you can actually view this. 722 00:32:31,170 --> 00:32:32,970 But change at least one thing. 723 00:32:32,970 --> 00:32:35,400 Change helloworld to something of your own choice, 724 00:32:35,400 --> 00:32:39,821 so that you're convinced that it's your file and not the one I just created. 725 00:32:39,821 --> 00:32:40,320 All right. 726 00:32:40,320 --> 00:32:43,804 And when you're ready-- no rush-- when you're ready, 727 00:32:43,804 --> 00:32:46,220 go ahead and save the file once you've made these changes. 728 00:32:46,220 --> 00:32:49,540 And if you click the Run button up top, this 729 00:32:49,540 --> 00:32:53,610 should open a new tab that will tell you what URL you can visit your file at, 730 00:32:53,610 --> 00:32:56,380 but it might take a moment to quote unquote "start Apache," which 731 00:32:56,380 --> 00:32:58,820 is the name of the web server. 732 00:32:58,820 --> 00:33:02,430 So be careful to do exactly what's in the file ultimately. 733 00:33:02,430 --> 00:33:04,610 So right now, I'll zoom in. 734 00:33:04,610 --> 00:33:07,780 If I start typing open-bracket HTML, notice 735 00:33:07,780 --> 00:33:09,650 it's prompting me to finish my thought. 736 00:33:09,650 --> 00:33:13,750 And if I finished my thought, it automatically gives me the closing tag. 737 00:33:13,750 --> 00:33:17,190 But the expectation is then I'll hit Enter, and then move inside there 738 00:33:17,190 --> 00:33:21,180 and do head inside and then I do body inside. 739 00:33:21,180 --> 00:33:24,430 And it's a little weird at first, because it's doing work for you, 740 00:33:24,430 --> 00:33:27,110 but realize that ultimately it saves you keystrokes. 741 00:33:27,110 --> 00:33:30,500 And in fact, a very common feature of programming environments these days 742 00:33:30,500 --> 00:33:33,260 both for web development like this and actual programming, 743 00:33:33,260 --> 00:33:36,960 which we'll talk about tomorrow, is these auto-complete features, 744 00:33:36,960 --> 00:33:39,710 things that just allow a programmer or a designer 745 00:33:39,710 --> 00:33:42,010 to type fewer keystrokes to accomplish the same thing. 746 00:33:42,010 --> 00:33:43,176 Sometimes it's good, though. 747 00:33:43,176 --> 00:33:44,560 Sometimes it's just annoying. 748 00:33:44,560 --> 00:33:49,290 749 00:33:49,290 --> 00:33:54,010 And, again, once you've transcribed the slide or some variant thereof, 750 00:33:54,010 --> 00:33:57,360 you can click the Run button up top. 751 00:33:57,360 --> 00:33:59,910 And then in the bottom window, you'll be informed 752 00:33:59,910 --> 00:34:04,290 at what URL you can visit your web page. 753 00:34:04,290 --> 00:34:08,790 Mine, for instance, is at business-daharvard.c9users.io 754 00:34:08,790 --> 00:34:11,480 and so forth. 755 00:34:11,480 --> 00:34:14,580 All right, so, let me-- any questions? 756 00:34:14,580 --> 00:34:19,460 Any other questions about just getting this working before we add features? 757 00:34:19,460 --> 00:34:21,692 And let me propose, just to get folks comfortable-- 758 00:34:21,692 --> 00:34:24,400 because it's one thing to just copy-paste blindly what I've done. 759 00:34:24,400 --> 00:34:27,177 But just so that folks wrestle with at least one to-do, 760 00:34:27,177 --> 00:34:28,510 I'm going to turn on some music. 761 00:34:28,510 --> 00:34:32,630 I'm going to propose a list of things you can potentially add. 762 00:34:32,630 --> 00:34:34,086 And you can certainly use Google. 763 00:34:34,086 --> 00:34:36,210 And why don't we just propose that you try to solve 764 00:34:36,210 --> 00:34:38,710 at least one particular problem here. 765 00:34:38,710 --> 00:34:45,090 So in terms of tags, let me reuse this here. 766 00:34:45,090 --> 00:34:48,280 >> Actually, let me put it in a textual form. 767 00:34:48,280 --> 00:35:02,380 Let's say that among the tags we might use here are some tags over here. 768 00:35:02,380 --> 00:35:06,090 We've seen the paragraph tag. 769 00:35:06,090 --> 00:35:07,850 Now it's going to auto-complete. 770 00:35:07,850 --> 00:35:12,220 Paragraph tag, the anchor tag. 771 00:35:12,220 --> 00:35:15,250 Let's say you want to make something bigger, 772 00:35:15,250 --> 00:35:19,480 so you might like-- the span tag can help. 773 00:35:19,480 --> 00:35:23,010 Well, you might need some help for that in just a moment. 774 00:35:23,010 --> 00:35:24,830 We've seen div. 775 00:35:24,830 --> 00:35:26,170 You'll see there's table. 776 00:35:26,170 --> 00:35:27,928 There something called tr, td. 777 00:35:27,928 --> 00:35:30,736 778 00:35:30,736 --> 00:35:32,860 Th, td. 779 00:35:32,860 --> 00:35:34,770 Come back to that in a moment. 780 00:35:34,770 --> 00:35:36,590 What else might be handy? 781 00:35:36,590 --> 00:35:38,310 There's strong. 782 00:35:38,310 --> 00:35:43,640 There's emphasis, or rather em. 783 00:35:43,640 --> 00:35:50,110 There's-- what else might you fancy here? 784 00:35:50,110 --> 00:35:51,930 Well, we'll take a look at that together. 785 00:35:51,930 --> 00:35:53,230 Form, which we've seen. 786 00:35:53,230 --> 00:35:54,130 There's form. 787 00:35:54,130 --> 00:35:56,500 There's input and a few others. 788 00:35:56,500 --> 00:35:58,924 789 00:35:58,924 --> 00:36:00,090 All right, so let's do this. 790 00:36:00,090 --> 00:36:02,330 To answer a Victoria's question, let me first 791 00:36:02,330 --> 00:36:05,020 just make sure that everyone is able to get their hello working. 792 00:36:05,020 --> 00:36:06,900 Then let me introduce a couple other ideas. 793 00:36:06,900 --> 00:36:09,209 Then we'll let folks solve some problem on their own. 794 00:36:09,209 --> 00:36:11,500 Then we'll actually come back to that notion of a form, 795 00:36:11,500 --> 00:36:14,950 and we'll actually re-implement together the front-end interface, 796 00:36:14,950 --> 00:36:16,450 so to speak, for Google itself. 797 00:36:16,450 --> 00:36:19,700 We'll use Google as the back end and let them do the hard work, the searching, 798 00:36:19,700 --> 00:36:22,760 but we'll recreate the front end of Google and the search form 799 00:36:22,760 --> 00:36:24,520 that they have on their own home page. 800 00:36:24,520 --> 00:36:27,050 And so we'll come back to these tags in just a moment. 801 00:36:27,050 --> 00:36:30,270 >> So this was what I proposed just a moment ago. 802 00:36:30,270 --> 00:36:33,940 We can add the stylization to a page inside of this style tag, 803 00:36:33,940 --> 00:36:36,950 and we can stylize the background color, the text alignment, 804 00:36:36,950 --> 00:36:39,000 whether it's center or left or right. 805 00:36:39,000 --> 00:36:41,630 But very quickly you would find or a web designer 806 00:36:41,630 --> 00:36:44,060 would find that this becomes a little unwieldy, 807 00:36:44,060 --> 00:36:48,330 because you're doing what's called mixing content 808 00:36:48,330 --> 00:36:50,120 with presentation thereof. 809 00:36:50,120 --> 00:36:53,756 You're mixing your data and the aesthetics thereof. 810 00:36:53,756 --> 00:36:56,380 And in fact, if you consider what's going to happen over time-- 811 00:36:56,380 --> 00:36:58,350 this is a very small web page, of course. 812 00:36:58,350 --> 00:37:01,590 But if I add content to this page and I add style to this page, 813 00:37:01,590 --> 00:37:04,650 the page very quickly gets longer and longer and longer. 814 00:37:04,650 --> 00:37:07,510 And suppose that I want have a second web page that 815 00:37:07,510 --> 00:37:09,010 shares some of these attributes. 816 00:37:09,010 --> 00:37:12,350 Suppose my second web page for my site-- also, I want everything center, 817 00:37:12,350 --> 00:37:14,960 and I also want everything with a green background. 818 00:37:14,960 --> 00:37:17,940 I'm pretty much going to have to copy and paste some of these lines 819 00:37:17,940 --> 00:37:20,730 into that second file, which feels fine. 820 00:37:20,730 --> 00:37:22,030 It will solve the problem. 821 00:37:22,030 --> 00:37:26,060 >> But what if I want a third page or a 30th page or a 40th page? 822 00:37:26,060 --> 00:37:28,730 Now I'm going to be copying and pasting a lot of duplicate code 823 00:37:28,730 --> 00:37:30,430 in multiple files. 824 00:37:30,430 --> 00:37:32,600 And so suppose that I decide or I'm told, 825 00:37:32,600 --> 00:37:34,780 hey, we're not using a green background anymore. 826 00:37:34,780 --> 00:37:36,380 We're going to start using orange. 827 00:37:36,380 --> 00:37:38,690 What do you have to change? 828 00:37:38,690 --> 00:37:42,900 Well, you have to change that style from green to orange in how many places? 829 00:37:42,900 --> 00:37:44,920 Like 30 or 40 places. 830 00:37:44,920 --> 00:37:45,900 It's tedious. 831 00:37:45,900 --> 00:37:47,039 It's prone to error. 832 00:37:47,039 --> 00:37:49,580 There's a number of reasons where you wouldn't want to induce 833 00:37:49,580 --> 00:37:51,840 that kind of pain for yourself. 834 00:37:51,840 --> 00:37:54,760 And so wouldn't it be nice if we could take what I just 835 00:37:54,760 --> 00:37:58,240 put between these two yellow tags, these style tags, 836 00:37:58,240 --> 00:38:04,050 factor it out, and put all of my stylization into one central file 837 00:38:04,050 --> 00:38:08,470 that all 30 or 40 of my other files borrow from or somehow reference, 838 00:38:08,470 --> 00:38:11,640 not unlike the networking diagrams we were doing before? 839 00:38:11,640 --> 00:38:15,030 >> So if I go in here, I'm going to actually propose 840 00:38:15,030 --> 00:38:17,880 that we replace the style tag with something 841 00:38:17,880 --> 00:38:21,620 called the link tag, which is horribly, horribly named, 842 00:38:21,620 --> 00:38:24,370 because you do not use the link tag to create what 843 00:38:24,370 --> 00:38:26,380 we humans know as a link in a web page. 844 00:38:26,380 --> 00:38:29,750 For that, you use which tag? 845 00:38:29,750 --> 00:38:31,464 How do you create a link in a web page? 846 00:38:31,464 --> 00:38:32,130 AUDIENCE: The a. 847 00:38:32,130 --> 00:38:34,870 DAVID J. MALAN: The a, or anchor tag, that went to Disney before. 848 00:38:34,870 --> 00:38:39,090 The link tag here is saying this-- link to a file called 849 00:38:39,090 --> 00:38:44,350 styles.css, the relationship to which is going to be that it's my stylesheet. 850 00:38:44,350 --> 00:38:48,290 So this is one of the S's in CSS-- cascading style sheets. 851 00:38:48,290 --> 00:38:50,490 Style sheet-- two of the S's in CSS. 852 00:38:50,490 --> 00:38:52,550 Cascading style sheet. 853 00:38:52,550 --> 00:38:58,640 This just means, hey, browser, go find styles.css on the local server 854 00:38:58,640 --> 00:39:01,870 and use it as your stylesheet, which means inside of that file 855 00:39:01,870 --> 00:39:05,310 is going to be all of the stylizations that we've just done. 856 00:39:05,310 --> 00:39:07,396 And so what that file might look like is this. 857 00:39:07,396 --> 00:39:10,020 And I'll just do this is a quick example, because we don't need 858 00:39:10,020 --> 00:39:12,000 to get too much into the weeds here. 859 00:39:12,000 --> 00:39:17,840 But if I copy this, what I'm proposing is that a programmer create a new file, 860 00:39:17,840 --> 00:39:24,450 paste in those lines-- whoops-- paste in those lines, 861 00:39:24,450 --> 00:39:32,270 save it as styles.css, and then, in the other file, delete all of that 862 00:39:32,270 --> 00:39:35,450 and replace it instead with this link tag. 863 00:39:35,450 --> 00:39:43,090 So that if I link href="styles.css", the relationship shall be "stylesheet" 864 00:39:43,090 --> 00:39:44,170 close tag. 865 00:39:44,170 --> 00:39:45,250 Save it. 866 00:39:45,250 --> 00:39:47,000 Go back to my helloworld. 867 00:39:47,000 --> 00:39:48,690 Reload. 868 00:39:48,690 --> 00:39:51,290 >> Literally nothing has happened. 869 00:39:51,290 --> 00:39:54,710 That is a good thing, because it means it's actually all working. 870 00:39:54,710 --> 00:39:58,860 To prove as much, suppose I make a typo, and I call this "Styles.css" 871 00:39:58,860 --> 00:40:03,080 with a capital S, which is incorrect, and then reload. 872 00:40:03,080 --> 00:40:05,470 Now you can see it just doesn't work. 873 00:40:05,470 --> 00:40:06,362 Now, why? 874 00:40:06,362 --> 00:40:08,070 Well, let's use a technique from earlier. 875 00:40:08,070 --> 00:40:10,153 Let me go ahead and, in my browser, in Chrome, I'm 876 00:40:10,153 --> 00:40:12,900 going to open up that special network tab as before, 877 00:40:12,900 --> 00:40:15,560 and let me reload the page. 878 00:40:15,560 --> 00:40:19,341 What are you not surprised to see now? 879 00:40:19,341 --> 00:40:20,840 Or maybe you're surprised to see it. 880 00:40:20,840 --> 00:40:23,225 Either way, what do you see now? 881 00:40:23,225 --> 00:40:24,100 AUDIENCE: [INAUDIBLE] 882 00:40:24,100 --> 00:40:24,770 DAVID J. MALAN: It's not found. 883 00:40:24,770 --> 00:40:25,680 Why is it not found? 884 00:40:25,680 --> 00:40:28,480 Well, Styles.css-- capital S-- does not exist. 885 00:40:28,480 --> 00:40:29,230 I misnamed it. 886 00:40:29,230 --> 00:40:30,430 Simple typo. 887 00:40:30,430 --> 00:40:33,816 But I'm getting understandably now a 404, because the server is saying, hey, 888 00:40:33,816 --> 00:40:34,440 it's not found. 889 00:40:34,440 --> 00:40:36,300 Literally, I don't know where that file is. 890 00:40:36,300 --> 00:40:38,880 So as a result, the browser shows you what it can, 891 00:40:38,880 --> 00:40:42,860 the raw content of the page, which was a 200, the HTML, 892 00:40:42,860 --> 00:40:45,390 but the stylization can't be added thereafter. 893 00:40:45,390 --> 00:40:47,120 And this is what's meant by cascading. 894 00:40:47,120 --> 00:40:49,070 You can sort of add it after, and it sort of 895 00:40:49,070 --> 00:40:50,874 refines the aesthetics of the web page. 896 00:40:50,874 --> 00:40:53,790 And you can even override those styles with yet other stylesheet files 897 00:40:53,790 --> 00:40:54,700 if you want. 898 00:40:54,700 --> 00:40:57,780 It's not found, though, in this case, because of course, I misnamed it. 899 00:40:57,780 --> 00:41:00,330 So I would have to fix that first. 900 00:41:00,330 --> 00:41:04,667 >> So let's go ahead and propose the following. 901 00:41:04,667 --> 00:41:07,410 902 00:41:07,410 --> 00:41:11,140 Let's go ahead and do this. 903 00:41:11,140 --> 00:41:14,220 Starting with perhaps your helloworld file, 904 00:41:14,220 --> 00:41:17,740 let me just invite a couple of feature suggestions. 905 00:41:17,740 --> 00:41:20,400 So, Victoria, you wanted to make some text bigger, right? 906 00:41:20,400 --> 00:41:24,555 All right, so we can do make text bigger. 907 00:41:24,555 --> 00:41:26,860 And we'll each pluck off just one problem to solve. 908 00:41:26,860 --> 00:41:30,867 Make text bigger. 909 00:41:30,867 --> 00:41:32,700 I'm not going to bother writing this when we 910 00:41:32,700 --> 00:41:35,600 have bullet technology right over here. 911 00:41:35,600 --> 00:41:39,970 So some problems. 912 00:41:39,970 --> 00:41:44,670 So we're going to try to make text bigger. 913 00:41:44,670 --> 00:41:45,170 All right. 914 00:41:45,170 --> 00:41:48,360 What else would someone propose? 915 00:41:48,360 --> 00:41:50,332 What else might we want to do in a web page? 916 00:41:50,332 --> 00:41:52,040 Let's come up with a short list of things 917 00:41:52,040 --> 00:41:55,366 and then delegate to the group to figure this out. 918 00:41:55,366 --> 00:41:56,270 >> AUDIENCE: [INAUDIBLE] 919 00:41:56,270 --> 00:42:02,251 >> DAVID J. MALAN: OK, position text on different sides of the page? 920 00:42:02,251 --> 00:42:02,750 All right. 921 00:42:02,750 --> 00:42:04,620 Something else. 922 00:42:04,620 --> 00:42:05,784 >> AUDIENCE: [INAUDIBLE] 923 00:42:05,784 --> 00:42:06,700 DAVID J. MALAN: It is. 924 00:42:06,700 --> 00:42:08,720 So a gif is just a different file format. 925 00:42:08,720 --> 00:42:12,830 We just used, what, a png or a jpg probably? 926 00:42:12,830 --> 00:42:14,480 We used a jpg. 927 00:42:14,480 --> 00:42:16,780 If you're curious, an excessive answer to your question 928 00:42:16,780 --> 00:42:19,404 is a jpg is generally used for photographs, because it supports 929 00:42:19,404 --> 00:42:21,500 millions of colors or 24-bit color. 930 00:42:21,500 --> 00:42:26,930 A gif is generally used for, like, internet memes these days-- animations, 931 00:42:26,930 --> 00:42:28,810 like animated gifs. 932 00:42:28,810 --> 00:42:32,320 But it happens to use a smaller color palette, only 256 possible colors, 933 00:42:32,320 --> 00:42:35,230 but it supports transparency and animation. 934 00:42:35,230 --> 00:42:40,330 And then there's png, which supports transparency and more colors 935 00:42:40,330 --> 00:42:41,300 but not animation. 936 00:42:41,300 --> 00:42:42,133 So it's a trade-off. 937 00:42:42,133 --> 00:42:44,144 938 00:42:44,144 --> 00:42:46,060 So adding a gif, though, would be functionally 939 00:42:46,060 --> 00:42:48,396 equivalent to adding a png or a jpg. 940 00:42:48,396 --> 00:42:49,110 Yeah. 941 00:42:49,110 --> 00:42:50,550 Image source equals. 942 00:42:50,550 --> 00:42:51,590 So something else. 943 00:42:51,590 --> 00:42:57,288 Let's come up with something that we sent to Victoria to do here. 944 00:42:57,288 --> 00:42:59,209 >> AUDIENCE: Add buttons for a form. 945 00:42:59,209 --> 00:43:00,000 DAVID J. MALAN: OK. 946 00:43:00,000 --> 00:43:02,179 So add buttons for a form. 947 00:43:02,179 --> 00:43:03,470 And we'll do that one together. 948 00:43:03,470 --> 00:43:07,220 So that'll be a perfect segue right after this challenge. 949 00:43:07,220 --> 00:43:10,357 Anything else? 950 00:43:10,357 --> 00:43:11,440 What might you like to do? 951 00:43:11,440 --> 00:43:14,040 952 00:43:14,040 --> 00:43:16,516 The web feels very underwhelming if this is all we can do. 953 00:43:16,516 --> 00:43:18,140 AUDIENCE: Change the color of the text. 954 00:43:18,140 --> 00:43:19,500 DAVID J. MALAN: Change the what? 955 00:43:19,500 --> 00:43:20,666 AUDIENCE: Color of the text. 956 00:43:20,666 --> 00:43:22,311 DAVID J. MALAN: Change color of text. 957 00:43:22,311 --> 00:43:22,810 All right. 958 00:43:22,810 --> 00:43:23,790 So, let's do this. 959 00:43:23,790 --> 00:43:27,209 Just again so that you're not, just by rote, doing exactly what I'm doing, 960 00:43:27,209 --> 00:43:29,500 I'm going to turn on music for maybe five minutes here. 961 00:43:29,500 --> 00:43:30,450 You're welcome to use Google. 962 00:43:30,450 --> 00:43:33,130 You're welcome to ask me, and I'll whisper a hint in your ear. 963 00:43:33,130 --> 00:43:35,171 You're welcome to look over on other's shoulders. 964 00:43:35,171 --> 00:43:37,340 But solve just one of these problems. 965 00:43:37,340 --> 00:43:40,190 But we'll do the last one, the forms one, if we could, together. 966 00:43:40,190 --> 00:43:42,790 So five minutes to solve any one of these problems 967 00:43:42,790 --> 00:43:46,780 using Google, intuition, or any other means available to you. 968 00:43:46,780 --> 00:43:48,630 >> [MUSIC PLAYING] 969 00:43:48,630 --> 00:43:49,130 All right. 970 00:43:49,130 --> 00:43:50,838 No worries if you want to keep tinkering, 971 00:43:50,838 --> 00:43:53,880 but I'll spoil a couple of these answers. 972 00:43:53,880 --> 00:43:57,986 So the first suggestion from Victoria was to make text bigger. 973 00:43:57,986 --> 00:43:59,360 So there's a few ways to do this. 974 00:43:59,360 --> 00:44:01,530 I've currently restored my screen to this size, 975 00:44:01,530 --> 00:44:04,310 though I've zoomed in artificially just to see things. 976 00:44:04,310 --> 00:44:07,470 And let's do this. 977 00:44:07,470 --> 00:44:11,380 Let me go ahead and grab some generic Latin text 978 00:44:11,380 --> 00:44:19,540 just so we have something to work with. 979 00:44:19,540 --> 00:44:20,715 So give me just one moment. 980 00:44:20,715 --> 00:44:21,840 I'll make three paragraphs. 981 00:44:21,840 --> 00:44:53,430 982 00:44:53,430 --> 00:44:53,930 OK. 983 00:44:53,930 --> 00:44:55,560 This will be a better example. 984 00:44:55,560 --> 00:44:57,840 So for the curious, in my hello.html, I just 985 00:44:57,840 --> 00:45:01,645 pasted three nonsensical Latin paragraphs 986 00:45:01,645 --> 00:45:03,270 just so we have some text to work with. 987 00:45:03,270 --> 00:45:06,720 And Victoria's goal was to make some of the text bigger. 988 00:45:06,720 --> 00:45:09,879 So I could, as before, go in here. 989 00:45:09,879 --> 00:45:11,170 And let me do it the right way. 990 00:45:11,170 --> 00:45:13,253 I'm going to have a link tag that points to a file 991 00:45:13,253 --> 00:45:20,560 called "styles.css," the relationship of which is again "stylesheet." 992 00:45:20,560 --> 00:45:25,221 And then I'm going to save that and open up this "styles.css." 993 00:45:25,221 --> 00:45:28,940 >> So, as before, I have the ability in this CSS file 994 00:45:28,940 --> 00:45:31,569 to actually override the default aesthetics of a web page, 995 00:45:31,569 --> 00:45:33,860 and the default aesthetics, of course, are pretty dull. 996 00:45:33,860 --> 00:45:36,943 It's sort of normal font size, black text, white background, and so forth. 997 00:45:36,943 --> 00:45:39,440 So suppose I want to make all of this text bigger. 998 00:45:39,440 --> 00:45:40,460 I could do a few things. 999 00:45:40,460 --> 00:45:43,750 In my styles.css file, I could say, you know what, 1000 00:45:43,750 --> 00:45:46,950 apply the following to the body of my page. 1001 00:45:46,950 --> 00:45:51,390 Go ahead and make the font size 24 points, 1002 00:45:51,390 --> 00:45:54,130 which is a number I might use in Microsoft Word. 1003 00:45:54,130 --> 00:45:57,620 Let me go back to my web page here and reload, 1004 00:45:57,620 --> 00:45:59,640 and you can see that it's already much bigger. 1005 00:45:59,640 --> 00:46:02,223 And we can get a little crazy, just like we can on a desktop-- 1006 00:46:02,223 --> 00:46:03,670 make it 96 points. 1007 00:46:03,670 --> 00:46:04,950 Reload. 1008 00:46:04,950 --> 00:46:07,610 And it's getting a little unwieldy at this point. 1009 00:46:07,610 --> 00:46:09,500 >> But I could be a little more precise. 1010 00:46:09,500 --> 00:46:14,530 Instead of applying this stylesheet to the body of my page, 1011 00:46:14,530 --> 00:46:21,740 what else might I apply it to instead, what other tag that might still 1012 00:46:21,740 --> 00:46:25,445 function in the same way? 1013 00:46:25,445 --> 00:46:26,444 >> AUDIENCE: The p tag? 1014 00:46:26,444 --> 00:46:27,360 DAVID J. MALAN: P tag. 1015 00:46:27,360 --> 00:46:29,350 So the head wouldn't be correct, because the head, 1016 00:46:29,350 --> 00:46:31,300 you can't actually control the aesthetics of. 1017 00:46:31,300 --> 00:46:32,700 There's either text there or not. 1018 00:46:32,700 --> 00:46:36,760 But the p tag-- I can dive in a little deeper, so to speak, to the paragraph 1019 00:46:36,760 --> 00:46:37,350 tags. 1020 00:46:37,350 --> 00:46:41,600 And even though there are three, that's perfectly fine, because in CSS, 1021 00:46:41,600 --> 00:46:44,900 when I just say "p," this means apply the following 1022 00:46:44,900 --> 00:46:48,300 to any tag that matches this selector, the selector just 1023 00:46:48,300 --> 00:46:49,430 being the name of the tag. 1024 00:46:49,430 --> 00:46:52,350 So wherever you see a "p," apply the font size, 1025 00:46:52,350 --> 00:46:55,222 and let's make it more reasonable again-- 24 point. 1026 00:46:55,222 --> 00:46:56,930 And you know what, just for good measure, 1027 00:46:56,930 --> 00:46:59,810 let's make the color red just for the moment. 1028 00:46:59,810 --> 00:47:03,740 And now if I reload, now we see three ugly paragraphs. 1029 00:47:03,740 --> 00:47:07,180 >> But now suppose that I'm sort of-- I want the first paragraph 1030 00:47:07,180 --> 00:47:08,210 to jump out at the user. 1031 00:47:08,210 --> 00:47:11,150 I don't want to just increase the font size of everything. 1032 00:47:11,150 --> 00:47:16,105 And so I actually want to identify or distinguish among these paragraphs. 1033 00:47:16,105 --> 00:47:18,730 So let's get rid of the red, because that's just kind of tacky, 1034 00:47:18,730 --> 00:47:23,885 and let's go ahead and make the font size 12-point by default, 1035 00:47:23,885 --> 00:47:26,260 so that we're back to something a little more reasonable. 1036 00:47:26,260 --> 00:47:29,190 And now I just want to increase the font size of the first paragraph. 1037 00:47:29,190 --> 00:47:31,440 I can do this in a few ways, but one way that's 1038 00:47:31,440 --> 00:47:37,180 perhaps most instructional at the moment is to do the following. 1039 00:47:37,180 --> 00:47:43,280 Let me go ahead and say, this paragraph has a unique ID of "first." 1040 00:47:43,280 --> 00:47:45,000 I could call this anything I want. 1041 00:47:45,000 --> 00:47:46,874 I could call this "foo" or any other word, 1042 00:47:46,874 --> 00:47:49,290 but I'm going to give it some semantically meaningful name 1043 00:47:49,290 --> 00:47:50,320 like "first." 1044 00:47:50,320 --> 00:47:54,790 This is the unique identifier, the ID, for my first paragraph. 1045 00:47:54,790 --> 00:47:59,360 >> What I can now do in my stylesheet is be a little more precise. 1046 00:47:59,360 --> 00:48:02,330 Instead of saying, apply the following to the p tag, 1047 00:48:02,330 --> 00:48:04,890 I can say the following-- apply the following, 1048 00:48:04,890 --> 00:48:11,000 or select, the HTML element that has a unique ID of "first." 1049 00:48:11,000 --> 00:48:12,350 What do I want to apply to it? 1050 00:48:12,350 --> 00:48:15,250 A font size of 24-point. 1051 00:48:15,250 --> 00:48:16,640 So I have two selectors now. 1052 00:48:16,640 --> 00:48:19,690 One makes all of the paragraphs 12-point. 1053 00:48:19,690 --> 00:48:24,960 But this one, especially since it comes second-- it comes last in the file-- 1054 00:48:24,960 --> 00:48:27,090 this has a cascading effect. 1055 00:48:27,090 --> 00:48:30,200 I've just made all of my paragraph tags 12-point, 1056 00:48:30,200 --> 00:48:34,350 but this now cascades and overrides that for any elements 1057 00:48:34,350 --> 00:48:38,800 in the page, any tag in the page whose unique ID is quote unquote "first." 1058 00:48:38,800 --> 00:48:41,720 And the hashtag in this context just means "unique identifier." 1059 00:48:41,720 --> 00:48:43,750 I don't put it in the HTML file. 1060 00:48:43,750 --> 00:48:46,880 I, over here, just say quote unquote "first." 1061 00:48:46,880 --> 00:48:48,470 >> So let me reload. 1062 00:48:48,470 --> 00:48:49,919 And now I see, ah, OK. 1063 00:48:49,919 --> 00:48:51,710 I mean, it's not that pretty, but it's kind 1064 00:48:51,710 --> 00:48:53,600 of like the preface to a book or something like that, 1065 00:48:53,600 --> 00:48:55,100 where the first paragraph is bigger. 1066 00:48:55,100 --> 00:48:57,933 Could be even more precise with just the first letters, but at least 1067 00:48:57,933 --> 00:48:59,110 I've exercised more control. 1068 00:48:59,110 --> 00:49:04,760 Now maybe-- maybe I want to do this occasionally for whatever reason, 1069 00:49:04,760 --> 00:49:09,010 and so I don't want this to apply to just one HTML tag. 1070 00:49:09,010 --> 00:49:15,110 Rather, let's say-- let's also do the following. 1071 00:49:15,110 --> 00:49:18,810 Class="import." 1072 00:49:18,810 --> 00:49:23,970 Whereas an ID is used to uniquely identify one thing, one tag, 1073 00:49:23,970 --> 00:49:30,190 in your web page, a class is meant to be used on any number of elements or tags 1074 00:49:30,190 --> 00:49:30,950 on your web page. 1075 00:49:30,950 --> 00:49:31,710 So it's reusable. 1076 00:49:31,710 --> 00:49:33,090 An ID is not reusable. 1077 00:49:33,090 --> 00:49:34,450 A class is reusable. 1078 00:49:34,450 --> 00:49:37,830 >> And you know what, for whatever philosophical reasons-- 1079 00:49:37,830 --> 00:49:40,180 I didn't finish my thought-- I'm going to say 1080 00:49:40,180 --> 00:49:44,300 that the first paragraph and the second paragraph are important. 1081 00:49:44,300 --> 00:49:48,600 So I'm going to apply the class called "important," that, if I save my file 1082 00:49:48,600 --> 00:49:51,510 and reload, has no functional impact yet. 1083 00:49:51,510 --> 00:49:53,780 But I've added some metadata to the file, 1084 00:49:53,780 --> 00:49:56,610 sort of something separate from the core data of the file, 1085 00:49:56,610 --> 00:50:02,300 so that now in my stylesheet, if I instead say ".important"-- you know, 1086 00:50:02,300 --> 00:50:07,110 anything that's important, I'm going to make font-color, red-- 1087 00:50:07,110 --> 00:50:09,930 or rather not font-color, just color. 1088 00:50:09,930 --> 00:50:12,930 There's inconsistencies in CSS unfortunately. 1089 00:50:12,930 --> 00:50:14,120 And reload. 1090 00:50:14,120 --> 00:50:17,640 Now notice the first two paragraphs are red 1091 00:50:17,640 --> 00:50:20,880 but not the third, because I only applied the class of "important" 1092 00:50:20,880 --> 00:50:25,020 to the first two of those things. 1093 00:50:25,020 --> 00:50:28,030 >> So in IDs, you have the ability to specify very precisely. 1094 00:50:28,030 --> 00:50:30,110 With classes, you have reusability. 1095 00:50:30,110 --> 00:50:33,800 But in both cases, notice the sort of good-design principle 1096 00:50:33,800 --> 00:50:39,072 where I factored out all of the aesthetics to my styles.css file. 1097 00:50:39,072 --> 00:50:40,280 So there's no messiness here. 1098 00:50:40,280 --> 00:50:44,490 There's no mention of red or bold-facing or font size in this file. 1099 00:50:44,490 --> 00:50:49,430 Rather I have semantically, meaningfully characterized my data as, 1100 00:50:49,430 --> 00:50:51,240 here is some important data. 1101 00:50:51,240 --> 00:50:52,800 Here is some more important data. 1102 00:50:52,800 --> 00:50:56,500 Moreover, here is the "first" of my important data. 1103 00:50:56,500 --> 00:51:01,050 So HTML is all about sort of tagging, literally, words 1104 00:51:01,050 --> 00:51:05,270 and paragraphs and constructs in your page with these little hints, if you 1105 00:51:05,270 --> 00:51:07,640 will, that you can somehow leverage using 1106 00:51:07,640 --> 00:51:10,880 other techniques like CSS in this way. 1107 00:51:10,880 --> 00:51:14,760 >> So in answer to Victoria's question, we can make text bigger in that way. 1108 00:51:14,760 --> 00:51:18,380 There are so many other ways, but the font tag-- open bracket "font"-- 1109 00:51:18,380 --> 00:51:19,770 is actually several years old. 1110 00:51:19,770 --> 00:51:21,410 And this is the problem, too, with relying only 1111 00:51:21,410 --> 00:51:23,485 on online resources-- they tend to be outdated. 1112 00:51:23,485 --> 00:51:26,110 And indeed, that's been deprecated, because the world realized, 1113 00:51:26,110 --> 00:51:28,970 what does "font-size=7" mean? 1114 00:51:28,970 --> 00:51:29,670 It doesn't. 1115 00:51:29,670 --> 00:51:32,770 And so for many years and to this day-- one of the side 1116 00:51:32,770 --> 00:51:36,060 notes here is that it is actually incredibly painful still sometimes 1117 00:51:36,060 --> 00:51:38,900 to develop sites for the web, because Microsoft 1118 00:51:38,900 --> 00:51:44,220 and Google and Mozilla and others often disagree as to how 1119 00:51:44,220 --> 00:51:47,480 to interpret a specification like HTML. 1120 00:51:47,480 --> 00:51:52,490 >> There is a rulebook for HTML that generally says what each tag means. 1121 00:51:52,490 --> 00:51:55,690 But sometimes it's left to the implementation's discretion, 1122 00:51:55,690 --> 00:51:57,290 Microsoft's discretion and Google. 1123 00:51:57,290 --> 00:52:00,000 And so you'll very often see on a website something 1124 00:52:00,000 --> 00:52:04,954 looks different on a PC than it does on a Mac, 1125 00:52:04,954 --> 00:52:06,995 and that's really because, at the end of the day, 1126 00:52:06,995 --> 00:52:08,891 they didn't test it well on both platforms. 1127 00:52:08,891 --> 00:52:11,390 But it's also because reasonable, smart people will disagree 1128 00:52:11,390 --> 00:52:14,970 and companies will disagree, and so one of the challenges of programming 1129 00:52:14,970 --> 00:52:16,980 for the web or designing things for the web 1130 00:52:16,980 --> 00:52:21,700 is writing your website in a way that works on every web browser. 1131 00:52:21,700 --> 00:52:23,410 But even that's unreasonable, right? 1132 00:52:23,410 --> 00:52:27,807 There are so many versions of so many browsers out there that, at some point, 1133 00:52:27,807 --> 00:52:30,890 you also have to make a judgment call and you have to decide as a company, 1134 00:52:30,890 --> 00:52:33,082 especially for e-commerce-style sites where you're 1135 00:52:33,082 --> 00:52:36,290 trying to use the latest and greatest technologies to give a really good user 1136 00:52:36,290 --> 00:52:37,110 experience. 1137 00:52:37,110 --> 00:52:41,019 But some percentage of your users might still be using Internet Explorer 6 or 7 1138 00:52:41,019 --> 00:52:43,810 or 8, especially depending on the country that they're coming from. 1139 00:52:43,810 --> 00:52:46,760 >> And so very commonly consulted is something 1140 00:52:46,760 --> 00:52:50,920 like "web browser statistics." 1141 00:52:50,920 --> 00:52:56,560 And if we go to-- let's see Wikipedia and see how up-to-date this chart is 1142 00:52:56,560 --> 00:52:59,320 if there is one. 1143 00:52:59,320 --> 00:53:02,420 So here you can see where browsers actually 1144 00:53:02,420 --> 00:53:06,160 are, according to December 2015, according to the US Government. 1145 00:53:06,160 --> 00:53:11,170 Chrome is at 42% market share, followed by IE largely in corporate settings 1146 00:53:11,170 --> 00:53:14,490 or PC settings, of course, followed by Firefox, 1147 00:53:14,490 --> 00:53:17,440 then Safari, then Opera didn't make the map here for some reason, 1148 00:53:17,440 --> 00:53:18,210 and then Others. 1149 00:53:18,210 --> 00:53:19,500 Maybe it's under Others. 1150 00:53:19,500 --> 00:53:27,700 But more problematic than that is-- let's see if Wikipedia also has 1151 00:53:27,700 --> 00:53:35,194 versions of browsers version-- 1152 00:53:35,194 --> 00:53:36,160 1153 00:53:36,160 --> 00:53:39,190 >> Let's go to browser statistics. 1154 00:53:39,190 --> 00:53:40,680 IE. 1155 00:53:40,680 --> 00:53:42,030 Even that's not enough. 1156 00:53:42,030 --> 00:53:44,854 Browser statistics. 1157 00:53:44,854 --> 00:53:45,353 My version. 1158 00:53:45,353 --> 00:53:48,980 1159 00:53:48,980 --> 00:53:50,540 That's not going to be right. 1160 00:53:50,540 --> 00:53:53,414 Let's see versions. 1161 00:53:53,414 --> 00:53:54,830 Browser market share. 1162 00:53:54,830 --> 00:53:57,110 Let's see if this comes up. 1163 00:53:57,110 --> 00:53:57,610 OK. 1164 00:53:57,610 --> 00:54:00,010 Now this is getting a little more useful. 1165 00:54:00,010 --> 00:54:04,870 So here, notice that we have all different versions of browsers. 1166 00:54:04,870 --> 00:54:09,887 And, my god, if you look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. 1167 00:54:09,887 --> 00:54:12,970 I mean, browsers increasingly updated, and sometimes some of those changes 1168 00:54:12,970 --> 00:54:16,430 are significant in terms of functionality. 1169 00:54:16,430 --> 00:54:20,630 And so at some point, the product managers or the engineers 1170 00:54:20,630 --> 00:54:23,620 need to make a decision-- you know what, only 1% of the world 1171 00:54:23,620 --> 00:54:24,740 is still using IE 7. 1172 00:54:24,740 --> 00:54:25,490 To hell with them. 1173 00:54:25,490 --> 00:54:27,470 We're just not going to support that browser. 1174 00:54:27,470 --> 00:54:28,740 And what does it mean not to support? 1175 00:54:28,740 --> 00:54:31,170 It might mean that buttons don't work on your web page, 1176 00:54:31,170 --> 00:54:33,050 or it might mean the formatting is completely off. 1177 00:54:33,050 --> 00:54:35,091 Or you might have to make that same judgment call 1178 00:54:35,091 --> 00:54:39,089 in mobile these days, where, we're not going to support IOS 5 anymore. 1179 00:54:39,089 --> 00:54:40,380 So people just have to upgrade. 1180 00:54:40,380 --> 00:54:45,850 Or we're not going to support Cupcake on Android OS for Android devices, 1181 00:54:45,850 --> 00:54:48,629 because as the world-- as the tech world wants to move forward, 1182 00:54:48,629 --> 00:54:51,170 it kind of wants to drag the world with it so that they don't 1183 00:54:51,170 --> 00:54:53,295 have to continue to be backwards compatible so they 1184 00:54:53,295 --> 00:54:54,920 can offer new and good features. 1185 00:54:54,920 --> 00:54:57,878 This is indeed one of the reasons why so many companies are rolling out 1186 00:54:57,878 --> 00:55:01,440 automatic updates and sort of forcing the latest versions of software on us. 1187 00:55:01,440 --> 00:55:04,010 And even companies like Apple will sort of 1188 00:55:04,010 --> 00:55:07,280 force you almost or compel you in terms of market forces 1189 00:55:07,280 --> 00:55:11,164 to buy a new phone because they just won't update your old phone anymore. 1190 00:55:11,164 --> 00:55:13,330 So you miss out on the latest and greatest features, 1191 00:55:13,330 --> 00:55:17,520 because it's costly to them as a company to maintain older, arguably 1192 00:55:17,520 --> 00:55:19,330 inferior versions of software. 1193 00:55:19,330 --> 00:55:23,660 But the net effect is that we also suffer this as well. 1194 00:55:23,660 --> 00:55:26,550 >> So let's take a look at just a couple of final things here. 1195 00:55:26,550 --> 00:55:29,740 Let's knock off real fast some of those other bullets, if curious. 1196 00:55:29,740 --> 00:55:33,440 So if you were trying to, for instance, position 1197 00:55:33,440 --> 00:55:36,420 the text on different sides of the page, I'm going to do one quick way, 1198 00:55:36,420 --> 00:55:38,360 but there's different ways of doing this. 1199 00:55:38,360 --> 00:55:42,610 Let me go ahead and eliminate-- simplify this as follows. 1200 00:55:42,610 --> 00:55:45,330 Let me just go back to my simple, simple paragraphs. 1201 00:55:45,330 --> 00:55:47,760 Let me go back to my styles.css. 1202 00:55:47,760 --> 00:55:51,040 And I'm just going to use the simple-- which you might have seen on Google 1203 00:55:51,040 --> 00:55:54,430 or recall from earlier-- text-align right. 1204 00:55:54,430 --> 00:55:56,220 And reload this page. 1205 00:55:56,220 --> 00:55:58,470 Now everything seems to be right-aligned, 1206 00:55:58,470 --> 00:56:00,770 as you might see on the overhead here. 1207 00:56:00,770 --> 00:56:04,470 >> We can make it look a little more book-like, and we can say "justify" 1208 00:56:04,470 --> 00:56:05,640 and reload. 1209 00:56:05,640 --> 00:56:09,870 Now it's nice and square on both sides, which is kind of nice. 1210 00:56:09,870 --> 00:56:12,220 Another goal that we had here was change color of text. 1211 00:56:12,220 --> 00:56:13,650 So we saw that with my red text. 1212 00:56:13,650 --> 00:56:15,630 And now add buttons for a form. 1213 00:56:15,630 --> 00:56:19,390 So why don't we try to do exactly this? 1214 00:56:19,390 --> 00:56:23,656 But first let me go to a site that most of us use every day-- Google. 1215 00:56:23,656 --> 00:56:25,780 And let's take a look at how Google actually works. 1216 00:56:25,780 --> 00:56:26,821 But I'm going to do this. 1217 00:56:26,821 --> 00:56:31,930 First let me do it in-- yep, let me go to Google first. 1218 00:56:31,930 --> 00:56:34,530 I'm going to have to go into Google Settings, 1219 00:56:34,530 --> 00:56:40,660 because I want to disable something called Instant Results. 1220 00:56:40,660 --> 00:56:43,580 >> So you might have noticed in Google these days-- let me go back 1221 00:56:43,580 --> 00:56:44,850 and turn this on. 1222 00:56:44,850 --> 00:56:47,900 So if I start searching for "cats" like this, 1223 00:56:47,900 --> 00:56:50,120 notice that not only do I get auto-complete up 1224 00:56:50,120 --> 00:56:54,520 top, all of a sudden, the page itself seems to change pretty quickly as well, 1225 00:56:54,520 --> 00:56:58,750 and that's Google using a language called JavaScript trying to be helpful. 1226 00:56:58,750 --> 00:57:01,540 But unfortunately, it kind of messes up our discussion 1227 00:57:01,540 --> 00:57:04,010 of what's actually happening underneath the hood here. 1228 00:57:04,010 --> 00:57:09,070 So I am just kind of quickly turn off instant results. 1229 00:57:09,070 --> 00:57:11,510 And I'm going to click Save. 1230 00:57:11,510 --> 00:57:13,930 And now I'm going to open that diagnostic toolbar that I 1231 00:57:13,930 --> 00:57:16,150 keep opening under the Network tab. 1232 00:57:16,150 --> 00:57:17,720 So let's do this. 1233 00:57:17,720 --> 00:57:21,960 Let me-- whoops-- scroll this down a bit. 1234 00:57:21,960 --> 00:57:24,410 And let me search for "cats." 1235 00:57:24,410 --> 00:57:26,790 >> And now notice-- actually, this is a good opportunity 1236 00:57:26,790 --> 00:57:28,840 to discuss for a moment. 1237 00:57:28,840 --> 00:57:32,460 Notice the moment I type-- stop it. 1238 00:57:32,460 --> 00:57:35,250 Stop it. 1239 00:57:35,250 --> 00:57:35,790 OK. 1240 00:57:35,790 --> 00:57:40,870 Notice the moment I type the letter C, watch the bottom of the screen. 1241 00:57:40,870 --> 00:57:48,600 A- T- S. What does the bottom of this screen, my Network tab, 1242 00:57:48,600 --> 00:57:53,320 suggest is happening each time I type a letter? 1243 00:57:53,320 --> 00:57:57,700 Unfortunately, the frog is very distracting today or the shamrock 1244 00:57:57,700 --> 00:58:00,339 or whatever he is. 1245 00:58:00,339 --> 00:58:01,880 What was happening each time I typed? 1246 00:58:01,880 --> 00:58:04,230 And let me clear the buffer and type it again. 1247 00:58:04,230 --> 00:58:06,580 So-- whoops. 1248 00:58:06,580 --> 00:58:13,280 Every time I type a letter, C- A- T-- so a new row obviously keeps appearing. 1249 00:58:13,280 --> 00:58:16,530 What does each of those rows represent, based on what we've seen and discussed 1250 00:58:16,530 --> 00:58:17,339 thus far? 1251 00:58:17,339 --> 00:58:18,130 AUDIENCE: A search? 1252 00:58:18,130 --> 00:58:21,770 DAVID J. MALAN: A search, or more generically, an HTTP request 1253 00:58:21,770 --> 00:58:23,125 from my browser to server. 1254 00:58:23,125 --> 00:58:29,090 Well, why is my browser making an HTTP request every time I type a letter? 1255 00:58:29,090 --> 00:58:30,502 >> AUDIENCE: [INAUDIBLE] 1256 00:58:30,502 --> 00:58:33,210 DAVID J. MALAN: Yeah, it's giving me these auto-complete results. 1257 00:58:33,210 --> 00:58:35,190 Like, where do these search results come from? 1258 00:58:35,190 --> 00:58:38,120 Well, every time I type a letter, Google sends more 1259 00:58:38,120 --> 00:58:40,460 and more and more of the word I'm typing. 1260 00:58:40,460 --> 00:58:41,040 Why? 1261 00:58:41,040 --> 00:58:44,540 Because they want to give me a better and better, better suggestion, 1262 00:58:44,540 --> 00:58:48,880 a list of suggestions, for what word I'm trying to actually complete. 1263 00:58:48,880 --> 00:58:53,030 So this is to say literally every character you type into Google 1264 00:58:53,030 --> 00:58:56,900 is being sent, ultimately in bulk, but also sometimes one 1265 00:58:56,900 --> 00:59:00,620 at a time in order to implement these auto-complete features when 1266 00:59:00,620 --> 00:59:03,000 the data is, of course, on the web. 1267 00:59:03,000 --> 00:59:08,780 >> Now, let's take a look at what actually happens when I click Google Search. 1268 00:59:08,780 --> 00:59:10,420 And then we'll leverage this ourselves. 1269 00:59:10,420 --> 00:59:15,320 So if I scroll down now to the very first request that just happened. 1270 00:59:15,320 --> 00:59:17,130 Notice the following. 1271 00:59:17,130 --> 00:59:25,550 It was sent to a fairly long URL-- https://www.google.com/search? 1272 00:59:25,550 --> 00:59:27,100 and then a whole bunch of stuff. 1273 00:59:27,100 --> 00:59:29,620 Let's see this actually now in the browser tab itself. 1274 00:59:29,620 --> 00:59:31,310 Let's get rid of the toolbar here. 1275 00:59:31,310 --> 00:59:33,140 Here's the page of search results. 1276 00:59:33,140 --> 00:59:34,790 And notice here's the URL. 1277 00:59:34,790 --> 00:59:37,430 Now, you can probably guess what's going on here in part. 1278 00:59:37,430 --> 00:59:39,090 So first of all, a definition. 1279 00:59:39,090 --> 00:59:42,570 This apparently is the destination where the form is submitted. 1280 00:59:42,570 --> 00:59:44,910 So when I typed in the words "cats" and hit Enter, 1281 00:59:44,910 --> 00:59:48,460 apparently Google sent my text input to this URL 1282 00:59:48,460 --> 00:59:50,770 that I've highlighted there, slash search. 1283 00:59:50,770 --> 00:59:56,530 Turns out, in a URL, anything that happens after a question mark is, 1284 00:59:56,530 --> 01:00:01,270 as we keep saying, a key-value pair that was typed into the form or somehow 1285 01:00:01,270 --> 01:00:04,500 transmitted from the browser to the server. 1286 01:00:04,500 --> 01:00:07,180 >> So any time you type input into a form on the web 1287 01:00:07,180 --> 01:00:10,000 and it's sent as we've been discussing, via a get, 1288 01:00:10,000 --> 01:00:12,400 one of these virtual envelopes, the contents 1289 01:00:12,400 --> 01:00:15,510 of that envelope-- yes, keep getting stuffed physically 1290 01:00:15,510 --> 01:00:19,010 into the envelope in class today, but technologically 1291 01:00:19,010 --> 01:00:21,110 it's actually put in the URL. 1292 01:00:21,110 --> 01:00:22,940 So in fact, let me sift through this. 1293 01:00:22,940 --> 01:00:25,010 Where do you see user input? 1294 01:00:25,010 --> 01:00:27,490 Where do you see something that I myself typed up here? 1295 01:00:27,490 --> 01:00:32,100 1296 01:00:32,100 --> 01:00:33,491 Yeah, so "cats." 1297 01:00:33,491 --> 01:00:33,990 Right? 1298 01:00:33,990 --> 01:00:36,380 So let me distill this into something simpler. 1299 01:00:36,380 --> 01:00:39,917 I'm going to delete everything about this URL that I don't understand, 1300 01:00:39,917 --> 01:00:42,250 and I'm just going to leave it as this-- /search?q=cats. 1301 01:00:42,250 --> 01:00:45,640 1302 01:00:45,640 --> 01:00:47,890 We'll see where q comes from in a moment, 1303 01:00:47,890 --> 01:00:51,220 but that feels like the minimum amount of information that I provided. 1304 01:00:51,220 --> 01:00:53,050 And now I'm going to hit Enter. 1305 01:00:53,050 --> 01:00:55,520 And notice it still works. 1306 01:00:55,520 --> 01:00:57,950 We still get back a whole bunch of cats. 1307 01:00:57,950 --> 01:01:00,340 So Google is fancier than this these days. 1308 01:01:00,340 --> 01:01:01,934 It's 2016, not 1999. 1309 01:01:01,934 --> 01:01:04,600 So there's other stuff that my browser is sending to the server. 1310 01:01:04,600 --> 01:01:07,100 But this is minimally all that's necessary. 1311 01:01:07,100 --> 01:01:08,380 >> So what's going on? 1312 01:01:08,380 --> 01:01:14,320 Well, first let me go ahead and go back to Cloud9 and let me go ahead 1313 01:01:14,320 --> 01:01:15,620 and close my tabs earlier. 1314 01:01:15,620 --> 01:01:18,230 And I'll do this on my own just for a moment. 1315 01:01:18,230 --> 01:01:20,730 I'm going to go ahead and create new file. 1316 01:01:20,730 --> 01:01:23,739 And I'm going to save it as google.html. 1317 01:01:23,739 --> 01:01:26,280 And I'm going to very quickly-- I'm going to steal, actually, 1318 01:01:26,280 --> 01:01:28,510 some of this text just to save time. 1319 01:01:28,510 --> 01:01:30,610 I'm going to paste this in here. 1320 01:01:30,610 --> 01:01:33,850 I'm not going to bother with any stylization this time. 1321 01:01:33,850 --> 01:01:38,340 We're going to call this "My Google." 1322 01:01:38,340 --> 01:01:41,230 And I'm going to get rid of everything in the body. 1323 01:01:41,230 --> 01:01:42,740 And I'm going to do the following. 1324 01:01:42,740 --> 01:01:45,690 Let me zoom in. 1325 01:01:45,690 --> 01:01:50,620 Form action-- and as I briefly mentioned earlier-- whoops-- as I briefly 1326 01:01:50,620 --> 01:01:54,130 mentioned earlier, the action of a form is where you send the data to. 1327 01:01:54,130 --> 01:01:56,620 So google.com/search. 1328 01:01:56,620 --> 01:01:59,390 And the method I want to use can be one of two things. 1329 01:01:59,390 --> 01:02:02,870 It can either be "get," as we keep discussing, or it can be "post." 1330 01:02:02,870 --> 01:02:05,340 For now, the fundamental difference is, if you use "get," 1331 01:02:05,340 --> 01:02:09,590 all of the information that the user provides gets sent in the URL. 1332 01:02:09,590 --> 01:02:13,530 >> That is great for things like search engines and a few other applications, 1333 01:02:13,530 --> 01:02:17,080 but in what circumstances would you not want to fill out a form 1334 01:02:17,080 --> 01:02:21,620 and have the information end up the URL, like in your browser's address bar? 1335 01:02:21,620 --> 01:02:25,470 1336 01:02:25,470 --> 01:02:26,605 What kind of forms do you-- 1337 01:02:26,605 --> 01:02:27,480 AUDIENCE: [INAUDIBLE] 1338 01:02:27,480 --> 01:02:28,450 DAVID J. MALAN: Yeah, like what? 1339 01:02:28,450 --> 01:02:29,270 AUDIENCE: Passwords. 1340 01:02:29,270 --> 01:02:31,936 DAVID J. MALAN: Yeah, so you log in to Facebook or some website. 1341 01:02:31,936 --> 01:02:34,395 That's user input from a form, a text box, 1342 01:02:34,395 --> 01:02:37,020 but you probably don't want it showing up in the browser's URL. 1343 01:02:37,020 --> 01:02:38,121 Why? 1344 01:02:38,121 --> 01:02:40,870 I mean, maybe there are some security implications on the network, 1345 01:02:40,870 --> 01:02:44,830 but more-- like, more simply, what if your roommate, your significant other, 1346 01:02:44,830 --> 01:02:47,710 your kids, your spouse looks through your browser history? 1347 01:02:47,710 --> 01:02:50,762 There is your password right there in your browser's history. 1348 01:02:50,762 --> 01:02:52,220 That doesn't feel like good design. 1349 01:02:52,220 --> 01:02:54,500 Or even more technically, suppose you're trying 1350 01:02:54,500 --> 01:02:59,180 to upload a photo to Flickr or Facebook or wherever-- 1351 01:02:59,180 --> 01:03:03,010 that is user input, even though it's a little more interesting-- how 1352 01:03:03,010 --> 01:03:05,530 do I cram an image in the URL bar? 1353 01:03:05,530 --> 01:03:06,730 You kind of sort of can't. 1354 01:03:06,730 --> 01:03:07,396 You kind of can. 1355 01:03:07,396 --> 01:03:10,210 But, really, I'm hard-pressed to imagine doing that. 1356 01:03:10,210 --> 01:03:13,470 So I need another method for uploading photos to a website, 1357 01:03:13,470 --> 01:03:15,657 and that other method is called "post." 1358 01:03:15,657 --> 01:03:18,740 But for now, we'll just talk about "get," which is the simpler of the two. 1359 01:03:18,740 --> 01:03:21,100 It just puts all the user input into the URL. 1360 01:03:21,100 --> 01:03:22,830 >> So here's the form I'm creating. 1361 01:03:22,830 --> 01:03:24,070 I want an input. 1362 01:03:24,070 --> 01:03:24,820 And you know what? 1363 01:03:24,820 --> 01:03:26,111 I'm going to take a guess here. 1364 01:03:26,111 --> 01:03:31,600 I'm going to recall my input "q" for "query." 1365 01:03:31,600 --> 01:03:34,970 And I think this is one of the original designs, perhaps, from 1999. 1366 01:03:34,970 --> 01:03:39,560 And then the type of this input is just going to be "text." 1367 01:03:39,560 --> 01:03:43,040 And then I'm going to have another input that doesn't need a name, as we'll soon 1368 01:03:43,040 --> 01:03:45,120 see, the type of which is "submit." 1369 01:03:45,120 --> 01:03:47,070 And this is going to give me a special button. 1370 01:03:47,070 --> 01:03:48,320 And that's it. 1371 01:03:48,320 --> 01:03:50,790 >> So let me go ahead and save this file. 1372 01:03:50,790 --> 01:03:54,910 I'm going to go back to my browser and go to google.html. 1373 01:03:54,910 --> 01:03:56,140 Enter. 1374 01:03:56,140 --> 01:03:59,680 And it's kind of sparse to say the least. 1375 01:03:59,680 --> 01:04:03,110 But let me go ahead and search for "cats." 1376 01:04:03,110 --> 01:04:06,510 And notice I'm currently at this Cloud9 URL. 1377 01:04:06,510 --> 01:04:09,240 But the moment I click this, where do you hope I'll end up? 1378 01:04:09,240 --> 01:04:10,160 >> AUDIENCE: Google. 1379 01:04:10,160 --> 01:04:11,118 >> DAVID J. MALAN: Google. 1380 01:04:11,118 --> 01:04:12,740 So let's click Submit. 1381 01:04:12,740 --> 01:04:15,200 And indeed I've re-implemented Google. 1382 01:04:15,200 --> 01:04:15,700 Right? 1383 01:04:15,700 --> 01:04:16,480 It's simpler. 1384 01:04:16,480 --> 01:04:17,120 It's lighter. 1385 01:04:17,120 --> 01:04:20,350 I mean, my code is clearly better than theirs, from the mess we saw earlier. 1386 01:04:20,350 --> 01:04:21,100 And you know what? 1387 01:04:21,100 --> 01:04:22,610 I'm going to spice this up a little bit. 1388 01:04:22,610 --> 01:04:23,860 I didn't mention this earlier. 1389 01:04:23,860 --> 01:04:27,860 There are tags like H1, for Heading 1, the most important heading in a page. 1390 01:04:27,860 --> 01:04:30,570 "My Google," I'll call this. 1391 01:04:30,570 --> 01:04:31,940 Let me reload. 1392 01:04:31,940 --> 01:04:33,772 It's looking a little better already. 1393 01:04:33,772 --> 01:04:34,980 And, actually, you know what? 1394 01:04:34,980 --> 01:04:36,430 I've already-- I lied. 1395 01:04:36,430 --> 01:04:40,200 I said I wasn't going to style this, but I'm going to style this like before. 1396 01:04:40,200 --> 01:04:46,860 And my body is going to be, let's say, text-align center. 1397 01:04:46,860 --> 01:04:48,800 It's looking more like Google already. 1398 01:04:48,800 --> 01:04:51,090 >> I need a line break, though, for that Submit button. 1399 01:04:51,090 --> 01:04:52,798 And it turns out, you can use paragraphs, 1400 01:04:52,798 --> 01:04:57,320 or you can more literally just say, give me a line break here-- the br tag. 1401 01:04:57,320 --> 01:04:59,319 And if I reload this, now it goes there. 1402 01:04:59,319 --> 01:05:01,610 It's a little ugly, so I could do multiple line breaks, 1403 01:05:01,610 --> 01:05:03,310 but let's not get too greedy here. 1404 01:05:03,310 --> 01:05:06,430 So now let's see if it works for "dogs." 1405 01:05:06,430 --> 01:05:08,640 It seems to work for "dogs," as well. 1406 01:05:08,640 --> 01:05:10,780 So what's the compelling takeaway here? 1407 01:05:10,780 --> 01:05:13,600 One-- wasn't a huge leap to introduce a few more tags, 1408 01:05:13,600 --> 01:05:15,370 like the form tag in the input tag. 1409 01:05:15,370 --> 01:05:17,120 But more fundamentally is, all we're doing 1410 01:05:17,120 --> 01:05:20,610 is leveraging our understanding of HTTP and the fact 1411 01:05:20,610 --> 01:05:24,900 that forms ultimately alter what's in the URL of the browser, 1412 01:05:24,900 --> 01:05:28,540 and so, therefore, we can mechanically provide input to a server 1413 01:05:28,540 --> 01:05:33,600 by making an HTML form and knowing that the server understands HTTP, 1414 01:05:33,600 --> 01:05:36,890 just like our body understands, like, shaking my hand, that same protocol, 1415 01:05:36,890 --> 01:05:40,920 and so we get back the response that we ultimately expect. 1416 01:05:40,920 --> 01:05:44,050 >> So let's try to do one last thing now with mobile, 1417 01:05:44,050 --> 01:05:47,052 and I'll make-- I'll add this code to the slides. 1418 01:05:47,052 --> 01:05:49,760 So if you'd like to tinker, you can certainly take it from there. 1419 01:05:49,760 --> 01:05:51,551 But I'm going to go ahead and do one thing. 1420 01:05:51,551 --> 01:05:54,120 I'm going to go ahead and open up my index page-- 1421 01:05:54,120 --> 01:05:59,030 my hello page as before, which has a lot of this faux-Latin text, 1422 01:05:59,030 --> 01:06:05,470 or meaningless Latin text, and has-- it looks like this at this font size. 1423 01:06:05,470 --> 01:06:07,850 But let me go ahead and do this. 1424 01:06:07,850 --> 01:06:09,300 I'm going to go into Cloud9. 1425 01:06:09,300 --> 01:06:10,380 And you don't have to do this step. 1426 01:06:10,380 --> 01:06:11,420 I'll just do it myself. 1427 01:06:11,420 --> 01:06:12,890 I'm going to click Share. 1428 01:06:12,890 --> 01:06:15,170 And this is a feature just of Cloud9, whereby 1429 01:06:15,170 --> 01:06:17,710 I can make my environment public. 1430 01:06:17,710 --> 01:06:20,240 >> And just for the sake of demonstration, let me do this. 1431 01:06:20,240 --> 01:06:22,870 I'm going to make my application public. 1432 01:06:22,870 --> 01:06:25,230 Notice it's warning me, am I sure I want to do this, 1433 01:06:25,230 --> 01:06:28,438 because this is going to make everyone in the world, whether they're here now 1434 01:06:28,438 --> 01:06:33,560 or watching the video later on the internet able to see what I see. 1435 01:06:33,560 --> 01:06:34,440 But that's OK. 1436 01:06:34,440 --> 01:06:37,870 I'm going to say "Done." 1437 01:06:37,870 --> 01:06:42,080 And let me encourage you, if I did this correctly-- let me test it first. 1438 01:06:42,080 --> 01:06:45,590 Go ahead, if you don't mind-- in a browser on your computer, 1439 01:06:45,590 --> 01:06:49,900 go to this URL, and hopefully you'll see my Latin text. 1440 01:06:49,900 --> 01:06:52,820 And to be clear, it's running not on my laptop. 1441 01:06:52,820 --> 01:06:53,610 It's in the cloud. 1442 01:06:53,610 --> 01:06:58,120 It's on Cloud9, literally, but I've made my workspace public 1443 01:06:58,120 --> 01:07:03,450 so that anyone on the internet can access my Latin home page. 1444 01:07:03,450 --> 01:07:07,209 >> Go to the same URL on your phone, if you could. 1445 01:07:07,209 --> 01:07:09,750 If it'll cost you, though, you can just look over a shoulder. 1446 01:07:09,750 --> 01:07:40,688 1447 01:07:40,688 --> 01:07:42,467 AUDIENCE: [INAUDIBLE] 1448 01:07:42,467 --> 01:07:43,550 DAVID J. MALAN: I'm sorry? 1449 01:07:43,550 --> 01:07:45,390 AUDIENCE: [INAUDIBLE] 1450 01:07:45,390 --> 01:07:47,710 DAVID J. MALAN: Just Latin words. 1451 01:07:47,710 --> 01:07:48,210 That's all. 1452 01:07:48,210 --> 01:07:49,250 But that's what you should see. 1453 01:07:49,250 --> 01:07:49,875 >> AUDIENCE: Yeah. 1454 01:07:49,875 --> 01:07:50,790 DAVID J. MALAN: Yeah. 1455 01:07:50,790 --> 01:07:51,300 Yeah. 1456 01:07:51,300 --> 01:07:51,540 OK. 1457 01:07:51,540 --> 01:07:53,530 So can I hold up your phone for just a moment? 1458 01:07:53,530 --> 01:07:57,504 So, hopefully, if you're accessing it, it should look almost unreadable. 1459 01:07:57,504 --> 01:07:59,920 It's still-- I mean, it's unreadable because of the Latin. 1460 01:07:59,920 --> 01:08:01,920 But it's also unreadable for what other reason? 1461 01:08:01,920 --> 01:08:03,775 Like, what displeases you about this? 1462 01:08:03,775 --> 01:08:04,650 AUDIENCE: It's small. 1463 01:08:04,650 --> 01:08:06,420 DAVID J. MALAN: It's super, super small. 1464 01:08:06,420 --> 01:08:07,920 So how could we fix this? 1465 01:08:07,920 --> 01:08:09,730 It's super, super small on Victoria's phone 1466 01:08:09,730 --> 01:08:11,400 and, if you've pulled it up yourself, probably 1467 01:08:11,400 --> 01:08:14,660 small on your phone as well, unless you have accessibility settings enabled. 1468 01:08:14,660 --> 01:08:15,530 What's that? 1469 01:08:15,530 --> 01:08:18,497 You could just pinch and zoom, which is workable, 1470 01:08:18,497 --> 01:08:20,330 but then you only see a few words at a time. 1471 01:08:20,330 --> 01:08:20,859 So wait a minute. 1472 01:08:20,859 --> 01:08:21,720 I know how to fix this. 1473 01:08:21,720 --> 01:08:22,219 Right? 1474 01:08:22,219 --> 01:08:26,130 I could use CSS, and I could change the font size from 12-point to 24-point. 1475 01:08:26,130 --> 01:08:29,020 But the side effect of that, of course, is going to be now, 1476 01:08:29,020 --> 01:08:32,630 on a desktop or a laptop, now the text is twice as big. 1477 01:08:32,630 --> 01:08:35,810 And so it would kind of be nice to distinguish between devices, 1478 01:08:35,810 --> 01:08:37,840 and it turns out there are ways of doing that. 1479 01:08:37,840 --> 01:08:39,590 There are several different ways, in fact, 1480 01:08:39,590 --> 01:08:44,189 whereby using CSS and fancier features that we won't go into in great detail, 1481 01:08:44,189 --> 01:08:46,960 you can essentially query the browser and say, 1482 01:08:46,960 --> 01:08:51,550 if your screen is smaller than this many pixels, use this font size. 1483 01:08:51,550 --> 01:08:55,180 If your screen is bigger than this many pixels, use this other font size. 1484 01:08:55,180 --> 01:08:57,080 >> You can be even fancier still. 1485 01:08:57,080 --> 01:09:00,140 If you've ever visited a web page that, on a desktop, 1486 01:09:00,140 --> 01:09:04,404 has a big menu maybe off to the side, and then all of the content 1487 01:09:04,404 --> 01:09:07,029 is to the side of that menu-- that's kind of a common paradigm. 1488 01:09:07,029 --> 01:09:09,670 Menu on left, content on right, or vice versa. 1489 01:09:09,670 --> 01:09:13,569 Doesn't really work on mobile when your screen is only this many pixels wide. 1490 01:09:13,569 --> 01:09:16,233 So more common on mobile is, your menu will suddenly get 1491 01:09:16,233 --> 01:09:18,399 collapsed, and you have to click a button to see it, 1492 01:09:18,399 --> 01:09:22,404 or the website will put the menu above it and put the content below it. 1493 01:09:22,404 --> 01:09:24,779 And you can implement these things in multiple ways, too. 1494 01:09:24,779 --> 01:09:28,340 You can ask your programmers, hey, team, any time 1495 01:09:28,340 --> 01:09:34,450 you see an HTTP request from an Android device, a Microsoft device, a Google 1496 01:09:34,450 --> 01:09:39,930 device, an Apple device, use this font size and use this menu layout, 1497 01:09:39,930 --> 01:09:42,670 or else use this default bigger layout. 1498 01:09:42,670 --> 01:09:45,410 >> Now, using what fundamental technique today 1499 01:09:45,410 --> 01:09:48,529 could the engineers use to know whether it's 1500 01:09:48,529 --> 01:09:53,660 an iPhone, an Android phone, a laptop, a desktop visiting the company's server? 1501 01:09:53,660 --> 01:09:55,310 Wherein do they get that information? 1502 01:09:55,310 --> 01:09:56,080 >> AUDIENCE: Header? 1503 01:09:56,080 --> 01:09:57,740 >> DAVID J. MALAN: Yeah, the HTTP header. 1504 01:09:57,740 --> 01:10:01,714 So every HTTP request coming from their customers to their servers 1505 01:10:01,714 --> 01:10:03,880 include, inside that virtual envelope, a whole bunch 1506 01:10:03,880 --> 01:10:08,260 of HTTP headers, one of which is the browser and the operating system 1507 01:10:08,260 --> 01:10:10,290 even, if you care to that level of detail. 1508 01:10:10,290 --> 01:10:13,790 Now, it's a cryptic-looking string, but there exists software that will just 1509 01:10:13,790 --> 01:10:18,530 simplify that, and you can just ask in programming code-- PHP, Java, C++, 1510 01:10:18,530 --> 01:10:23,650 whatever-- what phone is this-- what device is this user using? 1511 01:10:23,650 --> 01:10:27,501 And then you can say, show them this version of the website if it's a phone. 1512 01:10:27,501 --> 01:10:30,250 Show them this version of the website if it's a laptop or desktop. 1513 01:10:30,250 --> 01:10:32,316 But you don't even need server-side complexity. 1514 01:10:32,316 --> 01:10:33,940 You can do even the simplest of things. 1515 01:10:33,940 --> 01:10:34,815 >> I'm going to do this. 1516 01:10:34,815 --> 01:10:38,995 I'm going to go ahead into my Cloud9 environment, 1517 01:10:38,995 --> 01:10:41,370 and I'm going to add a tag that you saw in Google before. 1518 01:10:41,370 --> 01:10:42,770 It's called the metatag. 1519 01:10:42,770 --> 01:10:45,520 And I never remember this one, so I'm going to transcribe it here. 1520 01:10:45,520 --> 01:10:50,552 Meta name="viewport" and then content="width=device width,intital 1521 01:10:50,552 --> 01:11:02,060 scale=1" and that's it. 1522 01:11:02,060 --> 01:11:06,230 >> So it might as well be like a magical incantation. 1523 01:11:06,230 --> 01:11:11,300 It's not all that clear, but this has something to do with the viewport, 1524 01:11:11,300 --> 01:11:15,070 and the viewport is just the body of a web page, the rectangular region that 1525 01:11:15,070 --> 01:11:16,690 defines most of the page. 1526 01:11:16,690 --> 01:11:19,060 And this is just telling the browser, you know what? 1527 01:11:19,060 --> 01:11:22,589 Make the width of this page effectively equal to the device width. 1528 01:11:22,589 --> 01:11:25,380 In other words, don't assume that you have sort of unlimited space. 1529 01:11:25,380 --> 01:11:29,920 Assume you only have as much space as the device itself is big. 1530 01:11:29,920 --> 01:11:34,454 And so now, if I reload this in my browser, I see no change. 1531 01:11:34,454 --> 01:11:37,370 But if I did this correctly-- and let me cross my fingers-- if you all 1532 01:11:37,370 --> 01:11:42,920 reload your phones, do you see a compelling change? 1533 01:11:42,920 --> 01:11:43,620 Yeah, is that-- 1534 01:11:43,620 --> 01:11:45,067 >> AUDIENCE: [INAUDIBLE] 1535 01:11:45,067 --> 01:11:45,900 DAVID J. MALAN: Yes. 1536 01:11:45,900 --> 01:11:46,400 OK. 1537 01:11:46,400 --> 01:11:47,850 So arguably more readable now? 1538 01:11:47,850 --> 01:11:53,070 Still small, to be fair, but not so tiny as to be unmanageable. 1539 01:11:53,070 --> 01:11:56,920 And I could certainly override this further with CSS or on the server side, 1540 01:11:56,920 --> 01:12:00,120 but increasingly what you're seeing is more and more features 1541 01:12:00,120 --> 01:12:02,900 being added to client-side environments-- 1542 01:12:02,900 --> 01:12:06,530 JavaScript, as we'll discuss tomorrow, CSS, and HTML-- so 1543 01:12:06,530 --> 01:12:09,190 that all of these queries can be done on the client 1544 01:12:09,190 --> 01:12:11,910 so as to bother the server a lot less and not 1545 01:12:11,910 --> 01:12:14,530 to have to keep up with, for instance, the constant onslaught 1546 01:12:14,530 --> 01:12:17,210 of new operating-system versions, new browser versions. 1547 01:12:17,210 --> 01:12:20,190 You can just let the browser ask the device, how big are you, 1548 01:12:20,190 --> 01:12:22,890 and then make somewhat logical decisions based on that. 1549 01:12:22,890 --> 01:12:25,140 But we'll see more opportunities for logical decisions 1550 01:12:25,140 --> 01:12:27,223 tomorrow in the context of a programming language. 1551 01:12:27,223 --> 01:12:29,800 1552 01:12:29,800 --> 01:12:32,760 >> So, any questions, then, on web development? 1553 01:12:32,760 --> 01:12:36,130 Today is not web programming, per se, since most everything we did 1554 01:12:36,130 --> 01:12:38,370 was very aesthetic, if you will. 1555 01:12:38,370 --> 01:12:41,750 There is no decision-making in the code that we have written, 1556 01:12:41,750 --> 01:12:44,990 and so that's why HTML is a markup language, not a programming language. 1557 01:12:44,990 --> 01:12:47,140 But tomorrow we'll take a quick look, ultimately, 1558 01:12:47,140 --> 01:12:49,340 at JavaScript, which is an actual programming 1559 01:12:49,340 --> 01:12:54,220 language that lets us do a bit more. 1560 01:12:54,220 --> 01:12:56,800 >> Any questions? 1561 01:12:56,800 --> 01:13:00,480 Well, let me propose two opportunities optional for homework. 1562 01:13:00,480 --> 01:13:02,900 One is-- these Cloud9 accounts won't expire. 1563 01:13:02,900 --> 01:13:04,669 You're welcome to use them to tinker with. 1564 01:13:04,669 --> 01:13:05,960 It's the free level of service. 1565 01:13:05,960 --> 01:13:08,754 Realize that, if when creating your workspace, you made it public, 1566 01:13:08,754 --> 01:13:11,670 that does mean that anyone on the internet can see what you're typing. 1567 01:13:11,670 --> 01:13:15,104 So maybe just consider not embarrassing yourself 1568 01:13:15,104 --> 01:13:18,020 if you're putting your first web page out there publicly accidentally, 1569 01:13:18,020 --> 01:13:20,134 but no one's going to know to look there anyway. 1570 01:13:20,134 --> 01:13:23,760 >> And two-- let me toss up this URL as well, 1571 01:13:23,760 --> 01:13:28,250 especially if you came in today a little less comfortable than others, 1572 01:13:28,250 --> 01:13:30,430 unsure what all this stuff means. 1573 01:13:30,430 --> 01:13:36,780 Realize that much more of this video, which is both a good way to fall asleep 1574 01:13:36,780 --> 01:13:39,380 and also to laugh while doing so, also has 1575 01:13:39,380 --> 01:13:44,300 a lot of societally interesting and security-relevant discussions 1576 01:13:44,300 --> 01:13:47,370 therein from John Oliver, albeit a comedian. 1577 01:13:47,370 --> 01:13:55,456 >> But if there are no further questions, that brings us to the reception. 1578 01:13:55,456 --> 01:13:56,830 So why don't I turn on the music. 1579 01:13:56,830 --> 01:13:58,610 There should be drinks and snacks outside. 1580 01:13:58,610 --> 01:14:00,220 I'm happy to mingle for as long as folks would like, 1581 01:14:00,220 --> 01:14:01,600 answer questions more one-on-one. 1582 01:14:01,600 --> 01:14:03,330 But, otherwise, you're welcome to take off at any point, 1583 01:14:03,330 --> 01:14:05,740 and we'll see you again tomorrow morning for a bit more. 1584 01:14:05,740 --> 01:14:07,290 All right, thanks. 1585 01:14:07,290 --> 01:14:10,428