WEBVTT X-TIMESTAMP-MAP=LOCAL:00:00:00.000,MPEGTS:900000 00:00:00.000 --> 00:00:02.976 [MUSIC PLAYING] 00:00:09.424 --> 00:00:11.100 DAVID J. MALAN: Web development. 00:00:11.100 --> 00:00:12.976 So you know how the internet works. 00:00:12.976 --> 00:00:16.100 And how there's all these computers on the internet somehow interconnected. 00:00:16.100 --> 00:00:20.900 And they support protocols like TCP/IP, and there's wires and wireless. 00:00:20.900 --> 00:00:23.330 And so we have, that is to say, infrastructure 00:00:23.330 --> 00:00:26.810 via which we can get data to and from computers, or to 00:00:26.810 --> 00:00:28.619 and from clients and servers. 00:00:28.619 --> 00:00:30.410 Indeed, that's the relationship we're going 00:00:30.410 --> 00:00:34.100 to look at today when we look at web development, the process of developing 00:00:34.100 --> 00:00:34.730 web sites. 00:00:34.730 --> 00:00:38.030 And keep in mind, that the web is just one of many services 00:00:38.030 --> 00:00:39.410 that the internet supports today. 00:00:39.410 --> 00:00:42.620 The internet, of course, supports email, and video conferencing, 00:00:42.620 --> 00:00:44.510 and all sorts of other applications. 00:00:44.510 --> 00:00:48.410 But the web itself is one specific application, or service, 00:00:48.410 --> 00:00:49.577 that runs atop the internet. 00:00:49.577 --> 00:00:51.368 In other words, it assumes that an internet 00:00:51.368 --> 00:00:53.180 exists so that we can get data from point A 00:00:53.180 --> 00:00:57.020 to point B. And on top of that then, do we layer 00:00:57.020 --> 00:01:01.180 a whole bunch of functionality that allows us to click, and browse, 00:01:01.180 --> 00:01:03.890 and view information atop the internet. 00:01:03.890 --> 00:01:06.320 So let's consider the scenario at hand. 00:01:06.320 --> 00:01:09.362 Odds are if you're browsing the web you're using a web browser. 00:01:09.362 --> 00:01:12.320 And on a desktop or laptop, it might look a little something like this. 00:01:12.320 --> 00:01:14.569 On a phone, of course, it might look a little smaller. 00:01:14.569 --> 00:01:17.840 And web browsers can even be found on home console, gaming consoles, 00:01:17.840 --> 00:01:18.890 and the like, these days. 00:01:18.890 --> 00:01:22.880 But we'll assume that the essence of a web browser is something like this. 00:01:22.880 --> 00:01:26.060 Atop the browser is a space to type in an address, 00:01:26.060 --> 00:01:29.020 or a URL, or uniform resource locator. 00:01:29.020 --> 00:01:32.900 And that's generally something that starts with HTTP, colon, slash, slash. 00:01:32.900 --> 00:01:35.630 Or HTTPS, colon, slash, slash. 00:01:35.630 --> 00:01:38.302 And then the address, or the domain name, of a website 00:01:38.302 --> 00:01:39.260 that you want to visit. 00:01:39.260 --> 00:01:41.718 And odds are there's a back button, maybe a forward button, 00:01:41.718 --> 00:01:44.660 a reload button, and a few other features as well. 00:01:44.660 --> 00:01:47.610 But what are you doing when you type in something like example.com 00:01:47.610 --> 00:01:52.670 or Google.com or Facebook.com or any number of other domain names 00:01:52.670 --> 00:01:53.940 into a web browser? 00:01:53.940 --> 00:01:56.600 Well, you're sending a request from your computer, 00:01:56.600 --> 00:02:02.000 be it a laptop, desktop, or phone, from your device to some remote server, 00:02:02.000 --> 00:02:03.480 point B so to speak. 00:02:03.480 --> 00:02:07.200 And that server's purpose in life is to look at your request, 00:02:07.200 --> 00:02:10.789 so to speak, figure out what it is you want, and then respond to that request 00:02:10.789 --> 00:02:11.480 accordingly. 00:02:11.480 --> 00:02:16.640 Recall, in fact, when we've sent requests on the internet for cats, 00:02:16.640 --> 00:02:18.020 like this one here. 00:02:18.020 --> 00:02:21.270 We send some kind of request in a virtual envelope, 00:02:21.270 --> 00:02:25.190 if you will, and on the outside of that envelope was the address of the server. 00:02:25.190 --> 00:02:30.560 But not the domain name like Google.com, but rather the IP address and port 00:02:30.560 --> 00:02:34.500 number, a TCP port number, and then my return IP address as well. 00:02:34.500 --> 00:02:37.880 And so inside of that envelope is some kind of request for a very 00:02:37.880 --> 00:02:40.040 specific resource, like a cat. 00:02:40.040 --> 00:02:42.980 And then in the envelope that comes back from the server, 00:02:42.980 --> 00:02:44.840 from, for instance, Google Images, is going 00:02:44.840 --> 00:02:48.860 to be the cat, itself, in the form of maybe one, or two, or three, 00:02:48.860 --> 00:02:53.210 or more packets, if everything has been fragmented and sequenced. 00:02:53.210 --> 00:02:57.390 But what specifically is inside of this envelope and where is it coming from? 00:02:57.390 --> 00:02:58.550 Well, what is a web server? 00:02:58.550 --> 00:03:01.730 A server, it's just a device that looks a little something like this. 00:03:01.730 --> 00:03:03.440 Odds are you don't have one of these in your home. 00:03:03.440 --> 00:03:05.630 Odds are if you have a computer at home or at work, 00:03:05.630 --> 00:03:08.000 it's a more traditional laptop or desktop. 00:03:08.000 --> 00:03:09.840 But this, too, is a computer. 00:03:09.840 --> 00:03:12.500 This is a server, it just happens to be kind of flat. 00:03:12.500 --> 00:03:14.330 It's what's called a rack server. 00:03:14.330 --> 00:03:18.650 And a rack server is just a server that has a CPU, and a motherboard, 00:03:18.650 --> 00:03:21.710 and RAM, and hard drives, and other devices as well. 00:03:21.710 --> 00:03:25.910 And it just tends to be kind of squished down into either a 1.5 inch 00:03:25.910 --> 00:03:28.610 height, or maybe a three inch height, or some other multiple, 00:03:28.610 --> 00:03:30.770 typically, of 1.5 inches. 00:03:30.770 --> 00:03:33.560 And it just slides into literally a rack. 00:03:33.560 --> 00:03:36.470 And this is so that system administrators, and companies more 00:03:36.470 --> 00:03:40.790 generally, can squeeze a lot of these servers into one small footprint. 00:03:40.790 --> 00:03:44.630 So you just stack one on top of the other, like trays in a cafeteria. 00:03:44.630 --> 00:03:46.430 And behind, on the back of these servers, 00:03:46.430 --> 00:03:50.300 are all sorts of ports into which you can connect wires and cables that 00:03:50.300 --> 00:03:52.400 can interconnect all of these devices. 00:03:52.400 --> 00:03:56.059 Indeed, if your company is running a web server, 00:03:56.059 --> 00:03:57.850 odds are it doesn't have just one of these. 00:03:57.850 --> 00:04:02.300 Odds are it has one of many of these inside of a data center, 00:04:02.300 --> 00:04:04.220 or some kind of-- 00:04:04.220 --> 00:04:09.320 perhaps more likely-- a wiring closet where you actually keep your devices. 00:04:09.320 --> 00:04:11.960 This might be a particularly clean and fancy version. 00:04:11.960 --> 00:04:15.410 And behind each of these doors is tens of, if not 00:04:15.410 --> 00:04:19.110 dozens, of servers depending on their actual size. 00:04:19.110 --> 00:04:21.620 So that's what a web server actually is. 00:04:21.620 --> 00:04:25.830 But what is it that you're sending to any one of these web servers? 00:04:25.830 --> 00:04:28.880 Well, you're sending a request inside of this envelope. 00:04:28.880 --> 00:04:32.285 And you're sending a request very specifically for whatever resource 00:04:32.285 --> 00:04:33.160 it is you care about. 00:04:33.160 --> 00:04:35.493 Maybe it's today's news, maybe it's some search results, 00:04:35.493 --> 00:04:37.790 maybe it is in fact that cat. 00:04:37.790 --> 00:04:42.410 And the language in which this request is written inside of this envelope 00:04:42.410 --> 00:04:47.690 is going to be in what's called HTTP, Hypertext Transfer Protocol. 00:04:47.690 --> 00:04:49.820 And this transfer protocol is really just a set 00:04:49.820 --> 00:04:53.240 of conventions to recall that mandate how a computer speaks 00:04:53.240 --> 00:04:56.930 to another computer when it wants to request information off 00:04:56.930 --> 00:04:58.040 of the world wide web. 00:04:58.040 --> 00:05:00.260 Meanwhile, if I want to request a cat specifically, 00:05:00.260 --> 00:05:04.132 my request might instead look like this, where I'm getting /cat.jpeg, 00:05:04.132 --> 00:05:06.590 if that's indeed the name of the file name, and by the way, 00:05:06.590 --> 00:05:09.720 I speak HTTP version 1.1. 00:05:09.720 --> 00:05:12.770 So that's what's in the request that I sent to the server, 00:05:12.770 --> 00:05:15.150 what is it that comes back from the server? 00:05:15.150 --> 00:05:17.910 Well, odds are, it contains a bunch of text, and then 00:05:17.910 --> 00:05:20.340 the actual response of the message that are requested. 00:05:20.340 --> 00:05:23.250 So specifically, inside of the envelope that, say, comes back 00:05:23.250 --> 00:05:25.950 from Google, if I'm requesting that particular image, 00:05:25.950 --> 00:05:28.500 is going to be a message that hopefully says 00:05:28.500 --> 00:05:32.340 HTTP slash 1.1, which is just a reiteration of the language 00:05:32.340 --> 00:05:35.280 or the protocol being spoken, 200 OK. 00:05:35.280 --> 00:05:38.040 Where 200 means literally everything is OK, 00:05:38.040 --> 00:05:41.700 here is satisfaction of your particular request. 00:05:41.700 --> 00:05:43.950 So we actually never really see this message 00:05:43.950 --> 00:05:48.300 because it's inside of this envelope, or kind of written on the inside in what 00:05:48.300 --> 00:05:50.220 are called HTTP headers. 00:05:50.220 --> 00:05:54.780 Little lines of text that the server adds to its envelope that's coming back 00:05:54.780 --> 00:05:56.610 to you that contains information like this 00:05:56.610 --> 00:05:58.901 so that the browser knows whether to show the remaining 00:05:58.901 --> 00:06:03.600 contents of the envelope, or to actually display some kind of error message. 00:06:03.600 --> 00:06:07.080 In fact, there's a whole bunch of these so-called HTTP status 00:06:07.080 --> 00:06:10.620 codes that indicate whether the envelope you're getting back from a web server 00:06:10.620 --> 00:06:12.780 is indeed a successful response. 00:06:12.780 --> 00:06:15.969 200 OK is one you almost never really see, 00:06:15.969 --> 00:06:17.760 because it means all is well and so instead 00:06:17.760 --> 00:06:19.470 you would actually see the cat, or your search results, 00:06:19.470 --> 00:06:20.820 or something else on the screen. 00:06:20.820 --> 00:06:24.750 But you might also see a status code, or at least your browser might, 00:06:24.750 --> 00:06:28.470 that's number 301, or 302, and these indicate 00:06:28.470 --> 00:06:31.650 that your browser should actually redirect you to some other URL, 00:06:31.650 --> 00:06:32.970 and we'll see that in a bit. 00:06:32.970 --> 00:06:35.590 You might see 304 which means not modified. 00:06:35.590 --> 00:06:37.650 This is actually a clever mechanism, whereby 00:06:37.650 --> 00:06:42.420 a web server to save time, and save bandwidth, bytes, 00:06:42.420 --> 00:06:44.790 it can actually respond to your request for that cat 00:06:44.790 --> 00:06:48.330 and say, uh, David you requested this cat just a little bit ago, 00:06:48.330 --> 00:06:50.310 the cat has not been modified, I'm not going 00:06:50.310 --> 00:06:51.990 to waste time sending it to you again. 00:06:51.990 --> 00:06:53.730 You should check your cache. 00:06:53.730 --> 00:06:58.590 In other words, browsers will very often cache files, keep copies of them 00:06:58.590 --> 00:07:01.810 after you've requested them, so if you revisit that same web page, 00:07:01.810 --> 00:07:04.860 they don't have to waste time and bytes actually re-requesting them. 00:07:04.860 --> 00:07:08.320 And so the server can indicate you don't need to re-request this file, 00:07:08.320 --> 00:07:10.290 It's not, in fact, been modified. 00:07:10.290 --> 00:07:12.630 Meanwhile, if something kind of goes wrong, 00:07:12.630 --> 00:07:15.909 your browser might give back a 401 or 403 response. 00:07:15.909 --> 00:07:17.700 Which indicates that you're not authorized, 00:07:17.700 --> 00:07:19.860 you're forbidden from accessing the resource. 00:07:19.860 --> 00:07:21.870 Maybe you have to log in via some mechanism 00:07:21.870 --> 00:07:24.987 or maybe you're just not allowed to access that file or directory. 00:07:24.987 --> 00:07:27.570 Now, odds are there's at least one on this list that all of us 00:07:27.570 --> 00:07:31.050 have seen all too often, 404 not found. 00:07:31.050 --> 00:07:33.690 If you've ever wondered why your browser sometimes tells you 00:07:33.690 --> 00:07:36.810 this fairly cryptic number 404, that's just 00:07:36.810 --> 00:07:40.410 because the folks who designed HTTP, this protocol, 00:07:40.410 --> 00:07:45.420 decided some time ago that the number 404, if a server sends it to a browser, 00:07:45.420 --> 00:07:50.100 it's like a numeric code that just says, whatever you requested is not found. 00:07:50.100 --> 00:07:54.370 So I would get back that number inside of that envelope 00:07:54.370 --> 00:08:00.180 if cat.jpeg did not exist on the server, and therefore could not be found. 00:08:00.180 --> 00:08:03.870 Finally, perhaps the worst of these is 500 internal server error. 00:08:03.870 --> 00:08:07.400 This is not your fault. So if you ever see this, it is not something you did, 00:08:07.400 --> 00:08:09.330 it's something the programmer of the web site 00:08:09.330 --> 00:08:14.230 did because he or she did not, in fact, implement the website correctly. 00:08:14.230 --> 00:08:16.950 Now there's any number of other responses that you might see. 00:08:16.950 --> 00:08:20.710 Some of them even a little more low-level than these, 00:08:20.710 --> 00:08:25.620 but those in the world who are programming, or using APIs, application 00:08:25.620 --> 00:08:28.960 programming interfaces, might actually see more status codes than these. 00:08:28.960 --> 00:08:31.560 But these are perhaps the most common user-facing ones 00:08:31.560 --> 00:08:34.590 that you and I might see when visiting a web site. 00:08:34.590 --> 00:08:37.320 So what else is inside of this envelope? 00:08:37.320 --> 00:08:40.200 In addition to those so-called HTTP headers, 00:08:40.200 --> 00:08:42.780 those numeric codes with a few words that 00:08:42.780 --> 00:08:45.990 indicate exactly what the status of this envelope is. 00:08:45.990 --> 00:08:49.270 What else, ideally, should be inside of this envelope? 00:08:49.270 --> 00:08:51.750 Well, if it's a cat, like cat.jpeg, it will literally 00:08:51.750 --> 00:08:54.201 be the bytes composing that JPEG. 00:08:54.201 --> 00:08:57.450 A whole bunch of zeros and ones that can be opened in a browser, or Photoshop, 00:08:57.450 --> 00:08:59.520 or some other graphics program. 00:08:59.520 --> 00:09:02.430 But if it's a request initially for a web page, 00:09:02.430 --> 00:09:07.950 like Google's home page, or cnn.com, or your Facebook news feed, 00:09:07.950 --> 00:09:10.650 or even your Gmail inbox, where you actually 00:09:10.650 --> 00:09:13.290 expect to see, not just one thing, but many things. 00:09:13.290 --> 00:09:17.340 A lot of text, a lot of graphics, that is, a more proper web page. 00:09:17.340 --> 00:09:21.840 Well, how is it that these web server goes about fitting 00:09:21.840 --> 00:09:24.000 all of that information in here? 00:09:24.000 --> 00:09:27.750 Well, turns out, what's typically inside of these responses, 00:09:27.750 --> 00:09:31.660 below the HTTP status code, so to speak, is this. 00:09:31.660 --> 00:09:33.990 A language called HTML. 00:09:33.990 --> 00:09:38.340 And HTML, or HyperText Markup Language, isn't a programming language, 00:09:38.340 --> 00:09:43.090 because it doesn't give us the ability to command the computer to do things. 00:09:43.090 --> 00:09:47.520 It doesn't have what is called control flow, like loops, and conditions, 00:09:47.520 --> 00:09:49.590 and variables, and other such things. 00:09:49.590 --> 00:09:52.530 It rather is a markup language, in that literal sense. 00:09:52.530 --> 00:09:57.060 Whereby you can mark up data information in your web page, 00:09:57.060 --> 00:09:59.490 and tell the browser, really, how to display it, 00:09:59.490 --> 00:10:01.300 how to structure it, how to format it. 00:10:01.300 --> 00:10:05.140 So it's kind of like a formatting language, not a programming language. 00:10:05.140 --> 00:10:07.170 And here is perhaps the simplest web page 00:10:07.170 --> 00:10:09.820 that you might write in this language called HTML. 00:10:09.820 --> 00:10:12.190 And even if you've never seen this before, 00:10:12.190 --> 00:10:14.920 odds are your eyes can notice some patterns. 00:10:14.920 --> 00:10:18.580 I see a whole bunch of angled brackets, as they're called. 00:10:18.580 --> 00:10:21.580 I see a whole bunch of closed-angled brackets. 00:10:21.580 --> 00:10:26.620 I see a lot of symmetry, like I see two mentions of HTML, two mentions of head, 00:10:26.620 --> 00:10:30.060 two mentions of body, plus this thing up here, as well. 00:10:30.060 --> 00:10:32.560 And I also see the repeated phrase, "hello world." 00:10:32.560 --> 00:10:36.550 So if you want to guess, you'd be right in thinking maybe this 00:10:36.550 --> 00:10:41.020 is a web page that, quite simply, says to the user, "hello world." 00:10:41.020 --> 00:10:42.790 Now why, actually, is that? 00:10:42.790 --> 00:10:47.260 Well, it turns out that a web page does follow this exact same standard format. 00:10:47.260 --> 00:10:51.850 If you want to make a website for users or customers on the worldwide web, 00:10:51.850 --> 00:10:53.450 what does that mean you have to do? 00:10:53.450 --> 00:10:58.570 Well, you have to actually implement the website by writing HTML like this. 00:10:58.570 --> 00:11:00.490 And you can use most any program for this. 00:11:00.490 --> 00:11:03.291 On Windows you can use Notepad, on Mac OS, you can use Textedit. 00:11:03.291 --> 00:11:05.290 But the reality is, those programs aren't really 00:11:05.290 --> 00:11:06.880 designed for making web pages. 00:11:06.880 --> 00:11:08.860 So there's fancier programs still. 00:11:08.860 --> 00:11:12.760 You can use programs like Atom or Sublime Text, which 00:11:12.760 --> 00:11:15.130 are more sophisticated text editors. 00:11:15.130 --> 00:11:18.310 And there's even more fancy programs that even hide a lot of these details 00:11:18.310 --> 00:11:22.060 from you and just let you click, and drag, and drop, and create HTML 00:11:22.060 --> 00:11:23.480 without actually understanding it. 00:11:23.480 --> 00:11:27.522 But our goal here, is to indeed understand this underlying language. 00:11:27.522 --> 00:11:29.230 But at the end of the day it's just text. 00:11:29.230 --> 00:11:32.110 So, so long as you have a program, even Microsoft 00:11:32.110 --> 00:11:34.900 Word, can you start to make web pages. 00:11:34.900 --> 00:11:37.210 Now you wouldn't use Microsoft Word, necessarily, 00:11:37.210 --> 00:11:39.730 since it's going to save it typically in the wrong format, 00:11:39.730 --> 00:11:42.760 but the point is all you need is a computer with a keyboard and some way 00:11:42.760 --> 00:11:44.350 of typing out text. 00:11:44.350 --> 00:11:46.660 Now let's consider what's going on here. 00:11:46.660 --> 00:11:47.860 Notice the symmetry. 00:11:47.860 --> 00:11:50.011 I start the document, first of all, with this. 00:11:50.011 --> 00:11:52.510 Document type declaration, which is just, kind of, something 00:11:52.510 --> 00:11:54.200 you should copy and paste for now. 00:11:54.200 --> 00:11:57.730 And it just indicates, hey browser, here comes a web page 00:11:57.730 --> 00:12:00.730 written in HTML version 5, a.k.a. 00:12:00.730 --> 00:12:03.850 HTML 5, which is the latest version of this particular language. 00:12:03.850 --> 00:12:07.480 Then, below that, is one of these open brackets, as we'll call them, 00:12:07.480 --> 00:12:10.540 the word HTML, HyperText Markup Language, then a space, 00:12:10.540 --> 00:12:12.700 then Lang equals, quote unquote, "E-N." 00:12:12.700 --> 00:12:13.442 what is that? 00:12:13.442 --> 00:12:15.400 Well, this is just an indication to the browser 00:12:15.400 --> 00:12:19.000 that the language, the human language, in which this page is 00:12:19.000 --> 00:12:21.100 going to be written, is going to be E-N, which 00:12:21.100 --> 00:12:23.080 is the universal code for English. 00:12:23.080 --> 00:12:25.540 And there's two-character, or even three-character codes 00:12:25.540 --> 00:12:28.180 for every spoken language in the world. 00:12:28.180 --> 00:12:32.320 Now here, notice, is open bracket, head, close bracket. 00:12:32.320 --> 00:12:34.360 And then, what I'll call the opposite of this, 00:12:34.360 --> 00:12:37.900 open bracket, slash, head, close bracket. 00:12:37.900 --> 00:12:40.810 And so here's the first instance of some symmetry. 00:12:40.810 --> 00:12:42.790 Let's start thinking about this tag as meaning, 00:12:42.790 --> 00:12:44.690 let's open the head of my web page. 00:12:44.690 --> 00:12:48.160 Let's think of this tag as, closing the head of my web page. 00:12:48.160 --> 00:12:50.980 Or starting and stopping, however you want to think about it. 00:12:50.980 --> 00:12:54.550 But inside of the head of my web page is apparently going to be this. 00:12:54.550 --> 00:12:57.150 A title, open bracket, title, close bracket. 00:12:57.150 --> 00:13:00.230 Then just some words, hello world, which could be anything. 00:13:00.230 --> 00:13:02.800 And then open bracket, slash, title, close bracket. 00:13:02.800 --> 00:13:06.130 Which is the opposite of that open tag for title. 00:13:06.130 --> 00:13:09.400 Now notice that there's this nesting I started over here with HTML. 00:13:09.400 --> 00:13:12.190 Inside of and indented inside of that his head. 00:13:12.190 --> 00:13:14.950 Then inside of and indented inside of that is title. 00:13:14.950 --> 00:13:17.590 And then just to be kind of neat about it, 00:13:17.590 --> 00:13:20.110 I put the close title tag here on the same line. 00:13:20.110 --> 00:13:22.254 Turns out the browser won't particularly care. 00:13:22.254 --> 00:13:25.420 But this was such a short phrase that I felt I would just do it on one line. 00:13:25.420 --> 00:13:28.219 But I could have put the title on its own line, and the close title 00:13:28.219 --> 00:13:29.260 on its own line, as well. 00:13:29.260 --> 00:13:31.970 But more on those kinds of details in a bit. 00:13:31.970 --> 00:13:33.940 And then that's it for the head. 00:13:33.940 --> 00:13:36.910 Now I encounter the so-called body of my page, close body. 00:13:36.910 --> 00:13:40.330 Inside of which is, hello world, with this again, some indentation. 00:13:40.330 --> 00:13:42.710 And then lastly, close HTML. 00:13:42.710 --> 00:13:47.192 So notice the symmetry happens in the opposite order 00:13:47.192 --> 00:13:48.400 when you're closing the tags. 00:13:48.400 --> 00:13:52.360 The first tag I open, so to speak, is the last tag I closed. 00:13:52.360 --> 00:13:54.250 And again, notice the symmetry. 00:13:54.250 --> 00:13:56.750 I don't just do one after the other. 00:13:56.750 --> 00:13:59.650 And so I'm, indeed, going to start calling these things tags. 00:13:59.650 --> 00:14:03.550 HTML is a tagged-based markup language, where tag is generally 00:14:03.550 --> 00:14:05.920 open bracket, some word, close bracket. 00:14:05.920 --> 00:14:08.920 But sometimes these tags have what we'll call attributes. 00:14:08.920 --> 00:14:14.410 Sort of configuration details that allow us to influence the behavior of a tag. 00:14:14.410 --> 00:14:18.730 And this attribute, lang, short for language, equals E-N, 00:14:18.730 --> 00:14:21.850 is a configuration of the body of the page so that the browser knows. 00:14:21.850 --> 00:14:24.580 Or rather, the whole page so that the browser knows, 00:14:24.580 --> 00:14:28.840 oh this HTML file is written in the human language known as English. 00:14:28.840 --> 00:14:32.980 And so this way, Chrome, and Firefox, and Edge, and other browsers 00:14:32.980 --> 00:14:35.625 don't necessarily have to infer from any of the text 00:14:35.625 --> 00:14:37.000 on the page, what language it is. 00:14:37.000 --> 00:14:38.958 Because as you may have noticed, browsers today 00:14:38.958 --> 00:14:42.250 might sometimes prompt you to translate English 00:14:42.250 --> 00:14:45.240 to French, or Spanish, or Japanese, or some other language 00:14:45.240 --> 00:14:48.250 if they detect that the web page is in some other language 00:14:48.250 --> 00:14:49.940 that you yourself might not speak. 00:14:49.940 --> 00:14:54.250 So this is just making sure that the web browser knows exactly what language you 00:14:54.250 --> 00:14:58.100 intend for this page to be written in. 00:14:58.100 --> 00:14:59.330 So that's it. 00:14:59.330 --> 00:15:02.890 But what is this page actually going to look like in the end? 00:15:02.890 --> 00:15:06.250 Well, let me go ahead and open up, on my Mac, 00:15:06.250 --> 00:15:09.926 a very simple program called TextEdit. 00:15:09.926 --> 00:15:13.050 And I'm going to go ahead and literally write out this exact same web page. 00:15:13.050 --> 00:15:19.680 Open bracket, exclamation point, doc type, HTML, open bracket HTML, 00:15:19.680 --> 00:15:21.132 lang equals English. 00:15:21.132 --> 00:15:24.090 And then I'm going to get ahead of myself here, just so I don't forget. 00:15:24.090 --> 00:15:28.560 I'm going to do open brackets, slash, HTML, to close that tag. 00:15:28.560 --> 00:15:30.750 And then I'm going to go inside of it and do what 00:15:30.750 --> 00:15:33.390 I recall being the head of the page. 00:15:33.390 --> 00:15:37.260 And let me you go ahead and preemptively close the head tag. 00:15:37.260 --> 00:15:40.530 And now in here I recall there being a title, so, hello world. 00:15:40.530 --> 00:15:41.940 And now close title. 00:15:41.940 --> 00:15:46.642 But again, if I really wanted to, I could put these tags on their own line, 00:15:46.642 --> 00:15:47.850 but it's not going to matter. 00:15:47.850 --> 00:15:50.770 So I'm just going to leave it a little tighter, like that. 00:15:50.770 --> 00:15:52.590 Now, below the head of my page was what? 00:15:52.590 --> 00:15:53.590 The body. 00:15:53.590 --> 00:15:55.920 So I'm going to go ahead and open the body of my page. 00:15:55.920 --> 00:15:58.080 Close the body of my page. 00:15:58.080 --> 00:16:00.150 And then just redundantly, put, hello world, 00:16:00.150 --> 00:16:02.410 a sort of standard go-to message. 00:16:02.410 --> 00:16:06.780 So that's it, all I did was open up a text editor on my computer, 00:16:06.780 --> 00:16:09.930 TextEdit on a Mac, could be Notepad.exe on Windows, 00:16:09.930 --> 00:16:11.700 or any number of other programs. 00:16:11.700 --> 00:16:15.930 I haven't yet saved it, but the point is that this shall be a web page. 00:16:15.930 --> 00:16:16.890 I just need to save it. 00:16:16.890 --> 00:16:19.470 So let me go ahead to file, save. 00:16:19.470 --> 00:16:23.490 Let me go ahead and save it onto my desktop, for instance, as hello. 00:16:23.490 --> 00:16:26.970 And notice, on a Mac, at least, TextEdit is presumptuously 00:16:26.970 --> 00:16:29.280 trying to save it as text because that's all it is. 00:16:29.280 --> 00:16:31.830 But I'm going to go ahead and override that to .html. 00:16:31.830 --> 00:16:35.820 Also common is .htm, But more common is .html, 00:16:35.820 --> 00:16:38.430 and I'm going to go ahead now and save the file. 00:16:38.430 --> 00:16:41.305 Now, TextEdit is going to be a little obnoxious and say, 00:16:41.305 --> 00:16:43.680 you have used the extension .html at the end of the name, 00:16:43.680 --> 00:16:45.990 the standard extension is .txt. 00:16:45.990 --> 00:16:48.512 Well, here's where, after taking a course like this, 00:16:48.512 --> 00:16:50.220 you should know better than the computer. 00:16:50.220 --> 00:16:52.680 And even though Apple's trying to help coax you 00:16:52.680 --> 00:16:57.030 toward a more common solution, nope, we want to use HTML. 00:16:57.030 --> 00:17:00.139 Now odds are, Notepad on Windows won't prompt you in the same way. 00:17:00.139 --> 00:17:02.430 But the point is that you understand better, hopefully, 00:17:02.430 --> 00:17:04.822 now what it is we're trying to do. 00:17:04.822 --> 00:17:06.780 Because you do want to save this is a web page. 00:17:06.780 --> 00:17:10.440 And it turns out that the standard file extension to use for a web page is 00:17:10.440 --> 00:17:13.410 indeed going to be .html. 00:17:13.410 --> 00:17:15.900 And now, all I'm going to go do is take a look 00:17:15.900 --> 00:17:17.730 at my desktop, where I save this file. 00:17:17.730 --> 00:17:20.511 And indeed there is a file called, hello.html. 00:17:20.511 --> 00:17:22.260 I'm going to go ahead and double-click it. 00:17:22.260 --> 00:17:27.089 And, voila, the most uninteresting web page you can imagine. 00:17:27.089 --> 00:17:30.610 In fact, let's zoom in on this just so we can see exactly what's going on. 00:17:30.610 --> 00:17:32.250 And there's a few things of note. 00:17:32.250 --> 00:17:36.480 So one, notice in the top corner of my browser's tab 00:17:36.480 --> 00:17:38.589 is apparently the title of the web page. 00:17:38.589 --> 00:17:40.380 So this is how you can think of a web page. 00:17:40.380 --> 00:17:43.270 It has both the head, which is the very top of the page, 00:17:43.270 --> 00:17:47.160 and then a body, which is like 99% of the contents of a page, typically. 00:17:47.160 --> 00:17:49.590 So the head really is just this top part, potentially. 00:17:49.590 --> 00:17:52.080 Which minimally, for now, just has a title. 00:17:52.080 --> 00:17:54.840 The body of the web page, meanwhile, is down here. 00:17:54.840 --> 00:17:57.640 And that is where all of my content is ultimately going to go. 00:17:57.640 --> 00:17:59.910 But for now, my only content is, hello world. 00:17:59.910 --> 00:18:02.250 Now up here, you see kind of a funky URL. 00:18:02.250 --> 00:18:06.150 It doesn't start with HTTP or HTTPS because I've not yet 00:18:06.150 --> 00:18:09.810 put this file on a server, like the servers we saw earlier. 00:18:09.810 --> 00:18:13.830 Rather, this file literally lives on my own laptop's desktop. 00:18:13.830 --> 00:18:16.620 And so it's in my users folder, J Harvard folder, 00:18:16.620 --> 00:18:18.480 which is my username right now. 00:18:18.480 --> 00:18:21.540 And it's desktop, and the file was called hello.html. 00:18:21.540 --> 00:18:25.296 And curiously, the URL starts with file:///, 00:18:25.296 --> 00:18:28.570 which indicates that the file is indeed local to my computer. 00:18:28.570 --> 00:18:30.180 So I've made a web page, yes. 00:18:30.180 --> 00:18:33.940 But I haven't put it on a web server. 00:18:33.940 --> 00:18:37.140 So no one else on the internet could actually access this web page 00:18:37.140 --> 00:18:40.930 unless they physically walk over to my Mac here, and pull up this file. 00:18:40.930 --> 00:18:45.750 But that's OK, because there do exist web hosts, as they're called, 00:18:45.750 --> 00:18:47.430 and we can certainly go if we want. 00:18:47.430 --> 00:18:49.470 And buy our own domain name, ultimately. 00:18:49.470 --> 00:18:54.120 And drag and drop these files into some server elsewhere in the world. 00:18:54.120 --> 00:18:57.960 But for now, we'll focus on just web development on a local computer, 00:18:57.960 --> 00:19:00.720 and actually writing the code that drives them. 00:19:00.720 --> 00:19:02.640 So that's the simplest of web pages. 00:19:02.640 --> 00:19:06.420 So up until now we've been using TextEdit, a super simple text 00:19:06.420 --> 00:19:08.250 editor for actually writing HTML. 00:19:08.250 --> 00:19:11.190 But it's not all that designed for writing web pages. 00:19:11.190 --> 00:19:13.500 And indeed, as we saw when we tried to save the file, 00:19:13.500 --> 00:19:15.990 it also didn't really understand what it was we're trying to do. 00:19:15.990 --> 00:19:18.573 Well, turns out there's better software out there, still free, 00:19:18.573 --> 00:19:21.660 that you can download on a Mac, or a PC, or other operating systems. 00:19:21.660 --> 00:19:25.960 And one such text editor, as these things are called, is called Atom. 00:19:25.960 --> 00:19:28.320 And in fact, if I go ahead and open up Atom, 00:19:28.320 --> 00:19:30.930 after having downloaded it, and installed it on my Mac, 00:19:30.930 --> 00:19:33.120 I'll actually see an interface quite like this, 00:19:33.120 --> 00:19:35.610 that's a little more colorful, certainly, at first glance. 00:19:35.610 --> 00:19:39.300 And it also allows me to open multiple files at once along the left hand 00:19:39.300 --> 00:19:40.080 side, here. 00:19:40.080 --> 00:19:42.900 In fact, for today I've prepared a number of examples 00:19:42.900 --> 00:19:45.390 in advance, sort of Julia-Child-style. 00:19:45.390 --> 00:19:49.920 And indeed, here is hello.html, prewritten by me 00:19:49.920 --> 00:19:53.350 and opened in this other program called [? Adam. ?] 00:19:53.350 --> 00:19:55.320 Now there's only one other change I made to it, 00:19:55.320 --> 00:19:58.236 but you'll see the color is the most glaring difference at the moment. 00:19:58.236 --> 00:19:59.760 But this isn't in the file, itself. 00:19:59.760 --> 00:20:02.730 And indeed, if I open this hello.html in my browser, 00:20:02.730 --> 00:20:04.380 I wouldn't see any of these colors. 00:20:04.380 --> 00:20:06.570 The colors are just here for me, the human, 00:20:06.570 --> 00:20:10.970 to better distinguish different features of this file from others. 00:20:10.970 --> 00:20:13.340 So for instance, all my tags, and angled brackets 00:20:13.340 --> 00:20:16.730 are apparently being displayed by Atom, just on its own, in blue. 00:20:16.730 --> 00:20:19.340 All of my text, like hello world and hello world, 00:20:19.340 --> 00:20:20.900 are being displayed in gray. 00:20:20.900 --> 00:20:25.405 And then in big green color, are my attributes values, 00:20:25.405 --> 00:20:27.470 so that they really jump out at me. 00:20:27.470 --> 00:20:29.420 And now, there's one other detail in this file 00:20:29.420 --> 00:20:31.640 that I didn't type up a moment ago. 00:20:31.640 --> 00:20:33.920 And that's these lines here, up top. 00:20:33.920 --> 00:20:36.350 Well, turns out that HTML supports not just 00:20:36.350 --> 00:20:38.850 tags that we've been using to structure the page, 00:20:38.850 --> 00:20:40.670 it also supports what are called comments. 00:20:40.670 --> 00:20:44.180 And if you write open bracket, exclamation point, dash, dash, 00:20:44.180 --> 00:20:45.186 and then some words. 00:20:45.186 --> 00:20:47.810 And then the opposite of that, which isn't really the opposite, 00:20:47.810 --> 00:20:51.560 because we're missing the exclamation point, but dash, dash, angle bracket. 00:20:51.560 --> 00:20:55.280 You can actually put in your web page a comment like this, 00:20:55.280 --> 00:20:57.510 says hello to the world wide web. 00:20:57.510 --> 00:20:59.510 And this is really just meant for you, later on, 00:20:59.510 --> 00:21:03.110 if you forget what this file's for, there is a sentence reminding you. 00:21:03.110 --> 00:21:06.230 But more commonly is it used for colleagues you might have, 00:21:06.230 --> 00:21:09.470 or other people who might look at your code, your HTML code, 00:21:09.470 --> 00:21:12.620 so that they, too, know what you intend for this web page to do, 00:21:12.620 --> 00:21:17.430 without their having to read through all of the actual code, itself. 00:21:17.430 --> 00:21:20.660 So this file would open up identically in a browser, 00:21:20.660 --> 00:21:24.230 but of course it doesn't really do anything of interest. 00:21:24.230 --> 00:21:26.000 All it does is display, hello world. 00:21:26.000 --> 00:21:31.190 And the whole web is about linking, and clicking, and nowadays dragging, 00:21:31.190 --> 00:21:33.810 and going all over the world wide web. 00:21:33.810 --> 00:21:37.370 How do we take a step toward that kind of dynamism? 00:21:37.370 --> 00:21:39.860 Well, let me go ahead and do this. 00:21:39.860 --> 00:21:42.750 Let me go ahead and create a new file. 00:21:42.750 --> 00:21:46.370 And as before, I'm going to start this file with doc type HTML, 00:21:46.370 --> 00:21:50.870 open bracket HTML, close HTML. 00:21:50.870 --> 00:21:56.350 Let me have the head of the web page, and then close the head of my web page. 00:21:56.350 --> 00:22:00.220 And then my title, which this time-- and notice among Atom's features, 00:22:00.220 --> 00:22:03.237 like a lot of text editors like it, is to actually try 00:22:03.237 --> 00:22:04.570 to help you finish your thought. 00:22:04.570 --> 00:22:07.630 And here it's prompting me, do you mean title, and indeed yes, 00:22:07.630 --> 00:22:10.780 and I can let it auto complete a lot of the words I'm going to type. 00:22:10.780 --> 00:22:14.200 But for now I'm going to do Hello comma world, close title. 00:22:14.200 --> 00:22:16.210 And indeed let it finish my thought for me. 00:22:16.210 --> 00:22:20.230 Now down here, recall, is the body of my web page. 00:22:20.230 --> 00:22:24.040 And I'm going to go ahead and close the body of my web page. 00:22:24.040 --> 00:22:26.920 And a moment ago, recall, we had, hello world. 00:22:26.920 --> 00:22:29.680 But this shall be our first example involving links. 00:22:29.680 --> 00:22:31.000 So I'm going to re-title this. 00:22:31.000 --> 00:22:32.460 I don't want this page to say, hello world. 00:22:32.460 --> 00:22:34.126 I want it to, quite simply, to say link. 00:22:34.126 --> 00:22:36.430 Not all that interesting but the interesting part, 00:22:36.430 --> 00:22:37.720 going to be down here. 00:22:37.720 --> 00:22:41.500 Suppose that I'm making a web page, maybe for Harvard, for their home page. 00:22:41.500 --> 00:22:44.650 And I want to invite the users to visit Harvard on the web. 00:22:44.650 --> 00:22:50.910 I might say something like, visit Harvard on the web, period. 00:22:50.910 --> 00:22:53.730 Now, of course this is not all that interesting, because, indeed, 00:22:53.730 --> 00:22:59.270 if I open this file in a browser, I will just see this, 00:22:59.270 --> 00:23:00.945 visit Harvard on the web. 00:23:00.945 --> 00:23:04.070 And that is not all that interesting, because what's your user going to do? 00:23:04.070 --> 00:23:07.070 Odds are he or she, now, is going to open up Google, search for Harvard, 00:23:07.070 --> 00:23:08.520 and pull up Harvard on the web. 00:23:08.520 --> 00:23:10.677 But what if we can help lead our user there. 00:23:10.677 --> 00:23:12.510 So let me actually go ahead and change this. 00:23:12.510 --> 00:23:13.940 Let me open up Atom again. 00:23:13.940 --> 00:23:20.070 And let me go ahead and change this to just say, how about Visit Harvard. 00:23:20.070 --> 00:23:24.060 And how do I make Harvard a link to some other destination? 00:23:24.060 --> 00:23:28.400 Well, turns out there are other tags besides these. 00:23:28.400 --> 00:23:33.110 There's the anchor tag, abbreviated a, and that tag 00:23:33.110 --> 00:23:36.840 will actually create a link for us that looks a little something like this. 00:23:36.840 --> 00:23:40.700 So start anchor tag, close anchor or tag, again abbreviate as just, a. 00:23:40.700 --> 00:23:43.619 If I go back to the browser, I don't see any difference yet. 00:23:43.619 --> 00:23:45.410 Indeed, it's still just says, visit Harvard 00:23:45.410 --> 00:23:47.780 the web, but that's because I've changed and save the file, 00:23:47.780 --> 00:23:49.190 but I've not reloaded the browser. 00:23:49.190 --> 00:23:51.856 So if I go ahead in Chrome here, and click reload in any browser 00:23:51.856 --> 00:23:54.710 that you might use, similarly has a reload button, somewhere. 00:23:54.710 --> 00:23:55.940 And click, reload. 00:23:55.940 --> 00:23:59.540 Indeed, the page has now changed to match my text file. 00:23:59.540 --> 00:24:01.340 But it's still not a link. 00:24:01.340 --> 00:24:04.430 And so even though I've said, put an anchor here, 00:24:04.430 --> 00:24:07.760 I actually need to tell the browser where to anchor this text to. 00:24:07.760 --> 00:24:10.850 So it turns out, and you would only know this from a class, 00:24:10.850 --> 00:24:12.790 or reading a book, or some online reference, 00:24:12.790 --> 00:24:16.190 that the anchor tag takes a whole bunch of attributes. 00:24:16.190 --> 00:24:19.325 And, indeed, Atom is trying to complete my thought here for me. 00:24:19.325 --> 00:24:21.200 And I'm actually going to go ahead and choose 00:24:21.200 --> 00:24:24.950 the second of the suggestions, href, for hyper- reference. 00:24:24.950 --> 00:24:28.100 And I'm going to go ahead and specify this equals, quote unquote, 00:24:28.100 --> 00:24:35.630 "http://www.harvard.edu/, Save. 00:24:35.630 --> 00:24:38.070 So, now notice, I still have a tag. 00:24:38.070 --> 00:24:39.920 It's opened and it's closed. 00:24:39.920 --> 00:24:42.600 And, indeed, it has an attribute now, just as before. 00:24:42.600 --> 00:24:44.510 So just for good measure, let me go ahead now 00:24:44.510 --> 00:24:47.632 and make sure the world knows this is an English version of my page. 00:24:47.632 --> 00:24:49.340 So now I have two attributes on the page. 00:24:49.340 --> 00:24:51.980 The first of which modifies the HTML tag, the second of which 00:24:51.980 --> 00:24:53.990 modifies the anchor tag. 00:24:53.990 --> 00:24:58.820 And now, this attribute has a hyper reference, which is an actual URL. 00:24:58.820 --> 00:25:02.650 And if I go and reload the browser, now. 00:25:02.650 --> 00:25:07.930 Notice the, perhaps familiar, if dated, blue text that's also 00:25:07.930 --> 00:25:10.300 underlined, thereby signifying, visually, 00:25:10.300 --> 00:25:13.166 that this is now a link to some other page. 00:25:13.166 --> 00:25:15.790 And sure enough, and this is going to be a little small to see, 00:25:15.790 --> 00:25:20.750 if I hover over this with my cursor, notice way down here. 00:25:20.750 --> 00:25:23.830 Do you see in your browser's left-hand corner, most likely, 00:25:23.830 --> 00:25:27.160 whether it's Chrome or any other, the destination URL, that 00:25:27.160 --> 00:25:29.380 clicking this link will lead you to. 00:25:29.380 --> 00:25:30.460 Let's try it. 00:25:30.460 --> 00:25:34.090 Three, two, one, click. 00:25:34.090 --> 00:25:35.140 And voila! 00:25:35.140 --> 00:25:37.090 I'm now at Harvard's home page. 00:25:37.090 --> 00:25:40.270 And indeed, the URL has changed to be exactly that. 00:25:40.270 --> 00:25:42.800 Of course, if I hit back, I go back to where I was. 00:25:42.800 --> 00:25:46.300 But I now have a web page, that's still not on the internet, 00:25:46.300 --> 00:25:48.280 it's still living only on my own Mac, here. 00:25:48.280 --> 00:25:52.480 But that doesn't mean we can't link to websites on the actual internet, 00:25:52.480 --> 00:25:54.200 just as we did. 00:25:54.200 --> 00:25:56.320 But what's going on here? 00:25:56.320 --> 00:25:57.494 It became purple. 00:25:57.494 --> 00:25:58.660 That seems a little strange. 00:25:58.660 --> 00:25:59.868 It was blue, now it's purple. 00:25:59.868 --> 00:26:00.770 What does that mean? 00:26:00.770 --> 00:26:02.478 Well, this is a common default convention 00:26:02.478 --> 00:26:05.067 by browsers to just indicate to you, the human, 00:26:05.067 --> 00:26:06.650 that you've already visited this link. 00:26:06.650 --> 00:26:09.520 So especially early on in the web, when pages might just 00:26:09.520 --> 00:26:11.596 be formatted with bunches and bunches of links, 00:26:11.596 --> 00:26:13.720 can get pretty tedious, and pretty hard to remember 00:26:13.720 --> 00:26:15.320 which ones have you visited. 00:26:15.320 --> 00:26:18.100 So search engines these days, and even our own little web site, 00:26:18.100 --> 00:26:20.440 might change the color of links to indicate, visually 00:26:20.440 --> 00:26:22.510 to you, which ones you've actually seen. 00:26:22.510 --> 00:26:26.200 And it's the browser that's keeping track of those clicks. 00:26:26.200 --> 00:26:29.650 So as an aside, there's an interesting privacy implication there, right. 00:26:29.650 --> 00:26:32.530 The browser is now keeping track of what links you visited, 00:26:32.530 --> 00:26:34.390 just so we can make them purple. 00:26:34.390 --> 00:26:36.130 That means some other human, potentially, 00:26:36.130 --> 00:26:37.610 can come sit down at your computer. 00:26:37.610 --> 00:26:41.890 And if you've not cleared your cache, so to speak, and reset your browser, 00:26:41.890 --> 00:26:44.170 odds are, realize, some of that information 00:26:44.170 --> 00:26:46.990 might still be accessible, as well. 00:26:46.990 --> 00:26:48.580 Let's open another example. 00:26:48.580 --> 00:26:52.150 And rather than type this one out from scratch, 00:26:52.150 --> 00:26:57.550 let me go ahead and just open up image.html, An example I've 00:26:57.550 --> 00:26:59.710 put together here, in advance. 00:26:59.710 --> 00:27:02.740 Now, notice at the top there's kind of a spoiler, this is Grumpy Cat. 00:27:02.740 --> 00:27:05.980 And more academically, this demonstrates images. 00:27:05.980 --> 00:27:10.030 So indeed, the web is filled with images on web pages, not just text, certainly. 00:27:10.030 --> 00:27:12.550 So what do you notice that's different here? 00:27:12.550 --> 00:27:14.260 With this example. 00:27:14.260 --> 00:27:16.990 The comment up top is certainly different. 00:27:16.990 --> 00:27:19.360 But the HTML tag seems the same, the head is the same. 00:27:19.360 --> 00:27:21.568 The title is a little different, it just says, image, 00:27:21.568 --> 00:27:23.420 but that's not really that interesting. 00:27:23.420 --> 00:27:26.200 But there's two new things in the body. 00:27:26.200 --> 00:27:29.050 One appears in dark gray, to be an other comment. 00:27:29.050 --> 00:27:32.320 And that's just my attribution, so that I and the rest of the world 00:27:32.320 --> 00:27:35.920 knows my citation, for where I got what you're about to see. 00:27:35.920 --> 00:27:41.110 And now notice below that, this image tag, open bracket, IMG. 00:27:41.110 --> 00:27:44.590 So again, the authors of the web were pretty succinct, early on. 00:27:44.590 --> 00:27:48.340 So just like we have a for anchor, we have IMG for image. 00:27:48.340 --> 00:27:51.550 You don't want to spell the whole thing out, but you can still say, image. 00:27:51.550 --> 00:27:56.020 Open bracket, image, Alt equals Grumpy Cat-- more on that in a moment-- 00:27:56.020 --> 00:27:58.570 source equals cat.jpeg. 00:27:58.570 --> 00:28:00.460 And then notice this curiosity-- 00:28:00.460 --> 00:28:03.100 slash, close bracket. 00:28:03.100 --> 00:28:06.400 So whereas every other tag we've seen so far has an open bracket, 00:28:06.400 --> 00:28:10.990 some word, close bracket, then some stuff, then open bracket, slash, 00:28:10.990 --> 00:28:13.180 that same word, close bracket. 00:28:13.180 --> 00:28:16.000 This image tag seems to be empty, in some sense. 00:28:16.000 --> 00:28:19.990 It just has a start tag, but it kind of, sort of, has an end tag inside of it, 00:28:19.990 --> 00:28:20.740 all in one. 00:28:20.740 --> 00:28:22.360 And this is actually deliberate. 00:28:22.360 --> 00:28:26.770 Because unlike head, and title, and body, which have the semantics of, 00:28:26.770 --> 00:28:30.130 hey browser, here comes my page's head; hey browser, 00:28:30.130 --> 00:28:33.850 here comes my page's title; hey browser, here comes my page's body. 00:28:33.850 --> 00:28:36.539 All of which can eventually stop. 00:28:36.539 --> 00:28:38.080 Hey browser, that's it for the title. 00:28:38.080 --> 00:28:39.580 Hey browser, that's it for the head. 00:28:39.580 --> 00:28:41.950 Hey browser, that's it for the body of my web page. 00:28:41.950 --> 00:28:44.500 Images are kind of there, or not there. 00:28:44.500 --> 00:28:47.910 It's not like you can say, hey browser, here comes an image. 00:28:47.910 --> 00:28:51.510 It's just going to be there all at once, or not at all. 00:28:51.510 --> 00:28:53.920 There's no notion, really, of starting and stopping, 00:28:53.920 --> 00:28:55.480 as there is with these other tags. 00:28:55.480 --> 00:28:58.210 Which might contain multiple pieces of information, 00:28:58.210 --> 00:29:00.610 or multiple words, or multiple characters. 00:29:00.610 --> 00:29:04.240 So we're going to go ahead and, just for good measure, close that image tag. 00:29:04.240 --> 00:29:06.010 Even though it's not strictly necessary. 00:29:06.010 --> 00:29:09.820 By putting the slash inside of the open tag. 00:29:09.820 --> 00:29:13.210 Now you can perhaps guess that this is going to embed, ultimately, 00:29:13.210 --> 00:29:15.970 a cat whose file name is cat.jpeg. 00:29:15.970 --> 00:29:19.360 And that happens to be a file that I downloaded in advance from this URL, 00:29:19.360 --> 00:29:23.260 here and then put it in the same folder as this file, 00:29:23.260 --> 00:29:26.500 image.html, just by dragging it on my hard drive 00:29:26.500 --> 00:29:28.030 to where I intend for it to be. 00:29:28.030 --> 00:29:32.750 In HTML, I'm specifying, now, that the source of this image src, 00:29:32.750 --> 00:29:37.110 short for source, is going to be that file name, cat.jpeg. 00:29:37.110 --> 00:29:40.960 If that cat lived elsewhere, I could put the name of the folder it's in, 00:29:40.960 --> 00:29:42.100 or folders that it's in. 00:29:42.100 --> 00:29:45.730 If it's on the web itself, I could put http:// something, 00:29:45.730 --> 00:29:47.230 and actually give a full path to it. 00:29:47.230 --> 00:29:50.000 But I made a copy of this cat, put it in my same folder. 00:29:50.000 --> 00:29:52.060 So I can just describe it by its name. 00:29:52.060 --> 00:29:55.029 Alt, meanwhile, is a good thing for accessibility. 00:29:55.029 --> 00:29:57.820 Because for folks who might be visiting a web page can't physically 00:29:57.820 --> 00:30:00.970 see the cat for lack of sight, they can at least, 00:30:00.970 --> 00:30:03.410 using technology like screen readers, which will actually 00:30:03.410 --> 00:30:05.190 read to them the words on the page. 00:30:05.190 --> 00:30:07.190 We can describe to them an alternative version 00:30:07.190 --> 00:30:10.850 of this image, that is literally Grumpy Cat, so that that software can 00:30:10.850 --> 00:30:12.920 recite to them, verbally, Grumpy Cat. 00:30:12.920 --> 00:30:15.470 So that, even though they, too, will be disappointed 00:30:15.470 --> 00:30:18.650 in what they're seeing upon visiting my super simple page, 00:30:18.650 --> 00:30:22.430 they'll at least know what is there, based on that alternative text. 00:30:22.430 --> 00:30:25.010 So we can have both side by side, so that we 00:30:25.010 --> 00:30:27.830 know what it is we're embedding here. 00:30:27.830 --> 00:30:30.620 So, spoiler, let's take a look at a Grumpy Cat. 00:30:30.620 --> 00:30:35.360 Let me go ahead into my folder, open up image.html. 00:30:35.360 --> 00:30:40.040 And voila, there is a very Grumpy Cat, staring back 00:30:40.040 --> 00:30:43.070 at probably very disappointed humans. 00:30:43.070 --> 00:30:45.590 All right, so we've seen now a whole bunch 00:30:45.590 --> 00:30:49.860 of basic tags, like body, and HTML, and head, and title, and so forth. 00:30:49.860 --> 00:30:54.750 We've seen a for anchor, and we've seen image, or IMG, for images as well. 00:30:54.750 --> 00:30:57.130 Both of which have some requisite attributes. 00:30:57.130 --> 00:30:59.120 What else can we do in HTML? 00:30:59.120 --> 00:31:01.500 Let's go ahead and look at this example, here-- 00:31:01.500 --> 00:31:05.300 paragraphs.html-- which has a whole bunch of seemingly [INAUDIBLE] 00:31:05.300 --> 00:31:06.800 text that I just whipped up. 00:31:06.800 --> 00:31:09.890 And notice I've got three paragraphs of text, all three of which 00:31:09.890 --> 00:31:10.700 are pretty long. 00:31:10.700 --> 00:31:13.640 And so just like a book, I've formatted things pretty nicely 00:31:13.640 --> 00:31:15.800 by hitting Enter a couple of times, and indenting. 00:31:15.800 --> 00:31:18.330 So that it kind of reads like a chapter in a book. 00:31:18.330 --> 00:31:20.780 So again, this is paragraphs.html. 00:31:20.780 --> 00:31:26.390 but when I open this page, I actually get this really long chunk of text. 00:31:26.390 --> 00:31:30.474 And in fact, given that it's in Latin, or fake Latin-like text here, 00:31:30.474 --> 00:31:33.140 it's actually not clear where the paragraphs are supposed to be. 00:31:33.140 --> 00:31:35.480 But I do know they're supposed to be three. 00:31:35.480 --> 00:31:38.090 And yet this is just one big glob of text 00:31:38.090 --> 00:31:40.940 with no line breaks actually in there. 00:31:40.940 --> 00:31:42.290 So a sanity check. 00:31:42.290 --> 00:31:45.110 It turns out that most any browser allows you to view its source 00:31:45.110 --> 00:31:46.394 code in the browser, itself. 00:31:46.394 --> 00:31:47.810 You don't even need a text editor. 00:31:47.810 --> 00:31:50.226 You can't change it this way, but you can at least see it. 00:31:50.226 --> 00:31:54.200 So generally, you can right click or control click on a web page. 00:31:54.200 --> 00:31:56.660 And choose something like, view page source, which 00:31:56.660 --> 00:31:58.310 is going to show you the actual HTML. 00:31:58.310 --> 00:31:59.520 So let's do that. 00:31:59.520 --> 00:32:03.440 And sure enough, here is Chrome showing me the source code for this web page. 00:32:03.440 --> 00:32:06.650 And you can see the nice indentation and the line breaks. 00:32:06.650 --> 00:32:10.460 The fact that I have these gaps between lines here, actually in the file. 00:32:10.460 --> 00:32:14.420 And yet, if we look back into the browsers actual rendering of the page, 00:32:14.420 --> 00:32:16.830 all of those line breaks are being ignored. 00:32:16.830 --> 00:32:18.560 So what's going on? 00:32:18.560 --> 00:32:21.800 Well, HTML is a pretty literal language. 00:32:21.800 --> 00:32:25.280 It is only going to do what you tell it to do. 00:32:25.280 --> 00:32:30.470 Or really, the browser is only going to do what HTML tells it to do. 00:32:30.470 --> 00:32:33.421 So if I've not said, hey browser, put a paragraph here, 00:32:33.421 --> 00:32:35.170 it's not going to really know what I want. 00:32:35.170 --> 00:32:37.670 Because indeed, we've seen this convention of humans, 00:32:37.670 --> 00:32:40.340 like me, having a lot of carriage returns, 00:32:40.340 --> 00:32:43.220 or new lines and files, or a lot of indentation. 00:32:43.220 --> 00:32:47.210 Really, just to keep the page pretty printed, as I said, nicely formatted. 00:32:47.210 --> 00:32:48.710 So it's very human readable. 00:32:48.710 --> 00:32:51.380 But computers don't care how neat your code actually is. 00:32:51.380 --> 00:32:53.810 They just need to know top to bottom, left or right, 00:32:53.810 --> 00:32:55.130 what it is they need to do. 00:32:55.130 --> 00:32:56.720 Hey browser, here comes web page. 00:32:56.720 --> 00:32:57.620 Hey browser, here comes the head. 00:32:57.620 --> 00:32:59.090 Hey browser, here comes the title. 00:32:59.090 --> 00:33:03.410 They just need these instructions, or commands, in the form of HTML tags. 00:33:03.410 --> 00:33:08.210 So it turns out, that there are actually tags and HTML that 00:33:08.210 --> 00:33:11.060 allow us to address this problem. 00:33:11.060 --> 00:33:13.400 We need to be more explicit with the browser. 00:33:13.400 --> 00:33:16.640 And so indeed, what I'm going to go ahead and do here is open 00:33:16.640 --> 00:33:20.120 a paragraph tag, open bracket, p. 00:33:20.120 --> 00:33:21.260 And indent that. 00:33:21.260 --> 00:33:24.920 And then I'm going to go ahead and close the paragraph, thereby signifying, 00:33:24.920 --> 00:33:26.480 that's it, browser for the paragraph. 00:33:26.480 --> 00:33:28.563 Then I'm going to go ahead and put in another one, 00:33:28.563 --> 00:33:30.470 and indent that block of code inside of it. 00:33:30.470 --> 00:33:31.804 Really just to keep things neat. 00:33:31.804 --> 00:33:33.886 And then I'm going to go ahead and close this one. 00:33:33.886 --> 00:33:35.950 Then I'm going to go ahead and open one more. 00:33:35.950 --> 00:33:38.210 Indent this final paragraph. 00:33:38.210 --> 00:33:40.670 And then down here, I'm going to go ahead and close this. 00:33:40.670 --> 00:33:44.250 And so even though the contents of the page haven't changed. 00:33:44.250 --> 00:33:46.490 I still just have those exact, three paragraphs. 00:33:46.490 --> 00:33:48.990 And I still have some visual space between them. 00:33:48.990 --> 00:33:52.160 Now I have a more emphatic, semantic, command, 00:33:52.160 --> 00:33:56.000 in the form of these p tags saying, hey browser, start a paragraph, 00:33:56.000 --> 00:33:56.870 end a paragraph. 00:33:56.870 --> 00:34:00.900 Hey browser, start a new paragraph, end the paragraph, and so forth. 00:34:00.900 --> 00:34:05.060 So if I now go back to my browser, and reload this same page, 00:34:05.060 --> 00:34:08.719 now I get the three paragraphs that I actually intend. 00:34:08.719 --> 00:34:12.230 So on the one hand, HTML is very tolerant of whitespace, and tabs, 00:34:12.230 --> 00:34:13.580 and character-- 00:34:13.580 --> 00:34:16.190 tab characters, and the like because that 00:34:16.190 --> 00:34:17.947 lends itself to readability of code. 00:34:17.947 --> 00:34:20.030 But, of course, it complicates things in the sense 00:34:20.030 --> 00:34:23.659 that we have to be ever more careful to be super explicit with the browser, 00:34:23.659 --> 00:34:25.949 to tell it what we want it to do. 00:34:25.949 --> 00:34:27.170 Now what about formatting? 00:34:27.170 --> 00:34:30.486 I mean, my god, this page is still no more interesting than it was before. 00:34:30.486 --> 00:34:32.360 Well, let me go ahead and open up an example. 00:34:32.360 --> 00:34:34.526 I did make in advance, as well called headings.html. 00:34:34.526 --> 00:34:38.239 Dot This one doesn't have quite as many words, but it does have more tags. 00:34:38.239 --> 00:34:42.110 It has an H1 tag, an H2 tag, H3, H4, H5 and H6, 00:34:42.110 --> 00:34:44.519 which is heading 1 through heading 6. 00:34:44.519 --> 00:34:46.310 Now, it turns out browsers, years ago, just 00:34:46.310 --> 00:34:49.730 decided that they would have some standard tags for headings. 00:34:49.730 --> 00:34:55.190 Like the chapters in a page, or the sections in a book, or the subsections, 00:34:55.190 --> 00:34:56.389 or the sub subsections. 00:34:56.389 --> 00:34:59.130 Each of which is generally still prominent, and kind of bold, 00:34:59.130 --> 00:35:01.940 typically, by default. But gets a little smaller, a little smaller, 00:35:01.940 --> 00:35:02.940 and a little smaller. 00:35:02.940 --> 00:35:06.480 And so indeed, just to give you a sense of what these things look like, here. 00:35:06.480 --> 00:35:10.470 Let me go ahead and open this up in a browser, Headings.html, 00:35:10.470 --> 00:35:14.670 and sure enough, 1, 2, 3, 4, 5, 6. 00:35:14.670 --> 00:35:17.856 It's still bold, and you still see all six of the words, 00:35:17.856 --> 00:35:19.230 but they get smaller and smaller. 00:35:19.230 --> 00:35:21.730 The idea being, that these are generally going to headers 00:35:21.730 --> 00:35:25.420 atop of text, in like a book, or chapters, or the like. 00:35:25.420 --> 00:35:27.660 So we have those, now, in our tool kit. 00:35:27.660 --> 00:35:29.220 Well, what else can we do? 00:35:29.220 --> 00:35:32.330 It turns out, if I open up the list.html, 00:35:32.330 --> 00:35:35.260 the browsers also support automated lists. 00:35:35.260 --> 00:35:38.820 So if I want an on unordered list, with just a whole bunch 00:35:38.820 --> 00:35:43.320 of bullets, as is convention, I can open up UL, close brackets. 00:35:43.320 --> 00:35:47.070 And then I can have a whole bunch of list items, or LI tags, list item. 00:35:47.070 --> 00:35:50.450 Foo, bar and baz, where foo, bar, and baz are just silly words 00:35:50.450 --> 00:35:53.850 that computer scientists tend to use when they need just a placeholder word. 00:35:53.850 --> 00:35:57.450 Like in algebra you have x, and y, and z. 00:35:57.450 --> 00:35:59.840 So, then I close each of these list items. 00:35:59.840 --> 00:36:01.230 I close the unordered list. 00:36:01.230 --> 00:36:02.550 Let's see what this looks like. 00:36:02.550 --> 00:36:07.620 If I go ahead and open up in a browser, list.html, 00:36:07.620 --> 00:36:09.360 I sure enough see foo, bar in baz. 00:36:09.360 --> 00:36:13.320 But the browser has very nicely for me, given me three bullets. 00:36:13.320 --> 00:36:15.450 But you know what, unordered list kind of 00:36:15.450 --> 00:36:18.300 suggests that there should be other types of lists in the world, 00:36:18.300 --> 00:36:19.290 like ordered lists. 00:36:19.290 --> 00:36:26.556 And sure enough, if I go back into my text editor, and just change UL to OL, 00:36:26.556 --> 00:36:32.190 and then resave my file, go back to the browser, reload the page, 00:36:32.190 --> 00:36:34.600 can you guess what's probably going to happen? 00:36:34.600 --> 00:36:38.570 I've gone from an unordered list to an ordered list. 00:36:38.570 --> 00:36:41.000 Let me go ahead and hit reload. 00:36:41.000 --> 00:36:41.576 Aha! 00:36:41.576 --> 00:36:43.700 The browser has taken care of the numbering for me. 00:36:43.700 --> 00:36:46.250 So just a marginally nice feature, but now one 00:36:46.250 --> 00:36:49.550 I don't have to think about, because now it just does the numbering for me. 00:36:49.550 --> 00:36:51.890 All right, so what else might I do on a web page? 00:36:51.890 --> 00:36:55.760 Well, let me go ahead and open up table.html, 00:36:55.760 --> 00:37:00.140 which looks a little more overwhelming, at first glance. 00:37:00.140 --> 00:37:04.070 Now, turns out that it's pretty common on the web to lay out data tabularly. 00:37:04.070 --> 00:37:06.620 With rows and columns, like a spreadsheet. 00:37:06.620 --> 00:37:08.600 Well, how do you go about doing that? 00:37:08.600 --> 00:37:11.270 Because that's seemingly such a complex layout. 00:37:11.270 --> 00:37:15.300 Well, we can have in our body, a table tag, as it's called, thankfully. 00:37:15.300 --> 00:37:18.320 Another tag that actually says what it means. 00:37:18.320 --> 00:37:20.650 TR, dammit, we're back to cryptic tags. 00:37:20.650 --> 00:37:22.550 TR for table row. 00:37:22.550 --> 00:37:24.580 Just more succinct than writing, table row. 00:37:24.580 --> 00:37:26.600 TD, table data. 00:37:26.600 --> 00:37:31.370 And then down here, close table row, close table. 00:37:31.370 --> 00:37:35.000 And inside of this, a whole bunch of closed table datas, as well. 00:37:35.000 --> 00:37:37.400 So, what is this doing, and how? 00:37:37.400 --> 00:37:39.290 Well, if you think about what a table is, 00:37:39.290 --> 00:37:41.900 it's a whole bunch of rows, one after the other, 00:37:41.900 --> 00:37:44.030 one a top the other, on down. 00:37:44.030 --> 00:37:47.480 Table data is like columns, or really cells, in the page. 00:37:47.480 --> 00:37:49.910 And so this says, hey browser, here comes a table. 00:37:49.910 --> 00:37:53.340 Hey browser, here comes the first row in the table. 00:37:53.340 --> 00:37:54.590 Hey browser, here's some data. 00:37:54.590 --> 00:37:55.640 Hey browser, here's some data. 00:37:55.640 --> 00:37:56.890 Hey browser, here's some data. 00:37:56.890 --> 00:37:59.670 Hey browser, that's it for the first row. 00:37:59.670 --> 00:38:01.760 So that's one, two, three pieces of data. 00:38:01.760 --> 00:38:05.600 Or really one, two, three columns, or cells, in that first row. 00:38:05.600 --> 00:38:08.425 Hey browser, here comes a second row, dot, dot, dot. 00:38:08.425 --> 00:38:10.550 Hey browser, here comes a third row, dot, dot, dot. 00:38:10.550 --> 00:38:12.716 Hey browser, here comes a fourth row, dot, dot, dot. 00:38:12.716 --> 00:38:15.350 And notice, I was careful to make sure that each of my rows 00:38:15.350 --> 00:38:19.570 has three table data, so that everything lines up as intended. 00:38:19.570 --> 00:38:23.660 And notice, just for fun, I put some numbers in the middle there, 00:38:23.660 --> 00:38:27.920 plus an asterisk, and then a zero, and then a sharp sign. 00:38:27.920 --> 00:38:31.280 And let me go ahead and open up now, table dot HTML. 00:38:31.280 --> 00:38:32.480 And voila! 00:38:32.480 --> 00:38:37.250 You'll be very disappointed to see, the simplest of telephone keypads, 00:38:37.250 --> 00:38:40.640 that you might have on your home phone, or cell phone, these days. 00:38:40.640 --> 00:38:43.950 But it's laid out tabularly, with everything neatly in rows and columns. 00:38:43.950 --> 00:38:45.650 And that's just a single number, but I can actually 00:38:45.650 --> 00:38:46.910 do something more interesting. 00:38:46.910 --> 00:38:51.560 Actually have words, and phrases, and more complexity, still. 00:38:51.560 --> 00:38:54.500 But my gosh, this is still just so, so underwhelming. 00:38:54.500 --> 00:38:57.800 I mean, we started off with just hello world, we ramped things up 00:38:57.800 --> 00:38:59.702 and we gave ourselves a link to Harvard.edu, 00:38:59.702 --> 00:39:01.910 and then we ramped things up further with Grumpy Cat, 00:39:01.910 --> 00:39:05.120 and then we kind of got into the weeds of some of these additional tags. 00:39:05.120 --> 00:39:06.620 So we have more of a vocabulary now. 00:39:06.620 --> 00:39:07.850 More tools in our toolkit. 00:39:07.850 --> 00:39:12.770 But how do we actually start to make web sites a little more dynamic, where they 00:39:12.770 --> 00:39:15.140 can, indeed, take input from a user? 00:39:15.140 --> 00:39:17.420 Well, for this, let's first try to figure out 00:39:17.420 --> 00:39:19.160 how google.com, itself, works. 00:39:19.160 --> 00:39:23.430 And then see if we can't re-implement a little bit of Google ourselves. 00:39:23.430 --> 00:39:29.090 Let me go ahead to Google.com, enter. 00:39:29.090 --> 00:39:31.010 And take note of a couple of things, first. 00:39:31.010 --> 00:39:35.410 One, notice at top, that I'm not at Google.com, per se, 00:39:35.410 --> 00:39:37.370 I'm at www.google.com. 00:39:37.370 --> 00:39:43.520 And yet, I'm not exactly there, I'm at www.google.com via https://. 00:39:43.520 --> 00:39:47.790 But I didn't type https://. 00:39:47.790 --> 00:39:49.880 I didn't type www dot. 00:39:49.880 --> 00:39:51.130 I just typed google.com. 00:39:51.130 --> 00:39:53.820 So what's actually going on there? 00:39:53.820 --> 00:39:59.390 Well, turns out, that the worldwide web does need to use fully formed URLs 00:39:59.390 --> 00:40:02.450 in order to bring you to the right place, whether it starts with HTTP, 00:40:02.450 --> 00:40:06.060 HTTPS, or even file://. 00:40:06.060 --> 00:40:08.780 Browsers today, though, in so far as they're 00:40:08.780 --> 00:40:11.990 pretty much used for browsing the world wide web, takes some liberties. 00:40:11.990 --> 00:40:14.870 And so if you just type in google.com, most browsers 00:40:14.870 --> 00:40:19.520 will assume that you want http://google.com. 00:40:19.520 --> 00:40:22.172 Because HTTP, again, is the protocol that your browser 00:40:22.172 --> 00:40:23.630 is going to speak with that server. 00:40:23.630 --> 00:40:27.320 As opposed to an email protocol, or videoconferencing, or chat protocol, 00:40:27.320 --> 00:40:30.770 or something else, the browsers just presumptuously, but pretty reasonably, 00:40:30.770 --> 00:40:35.090 by design, are assuming what protocol it is you want. 00:40:35.090 --> 00:40:37.610 Moreover, some browsers are even helpful when 00:40:37.610 --> 00:40:43.190 it comes to this prefix, www, which is still very common as the subdomain, 00:40:43.190 --> 00:40:45.980 or hostname, for web sites. 00:40:45.980 --> 00:40:49.910 So that they're not just Google it's www.google.com. 00:40:49.910 --> 00:40:53.120 Really just for branding purposes, also for some technical purposes, 00:40:53.120 --> 00:40:54.830 for some privacy purposes. 00:40:54.830 --> 00:40:57.680 But really it's just convention, for the most part, 00:40:57.680 --> 00:41:03.540 for humans to start their web sites with the prefix www, for world wide web. 00:41:03.540 --> 00:41:04.940 But it's not strictly necessary. 00:41:04.940 --> 00:41:08.040 But browsers will sometimes, if google.com, for instance, 00:41:08.040 --> 00:41:11.810 didn't lead somewhere, will presumptuously prepend www you. 00:41:11.810 --> 00:41:15.430 Or the server itself will tell you mm, Mm, mm, don't go to Google.com, 00:41:15.430 --> 00:41:18.290 go to www.google.com. 00:41:18.290 --> 00:41:23.679 So we can actually see all of this ambiguity in practice, as follows. 00:41:23.679 --> 00:41:26.720 Here, I have, in this black and white window, a so-called terminal window 00:41:26.720 --> 00:41:27.320 on my Mac. 00:41:27.320 --> 00:41:30.580 And Windows, and Linux, and other operating systems have these, too. 00:41:30.580 --> 00:41:33.120 And I'm going to run what's called the command line program, 00:41:33.120 --> 00:41:36.410 just because it's enlightening, here, for our purposes, called cURL. 00:41:36.410 --> 00:41:40.540 Which is a program that really pretends to be a browser. 00:41:40.540 --> 00:41:45.040 It actually does send a textual message, in one of those virtual envelopes, 00:41:45.040 --> 00:41:46.000 to a server. 00:41:46.000 --> 00:41:49.910 And it shows us what's coming back in raw form. 00:41:49.910 --> 00:41:53.080 So it's not a browser, there's no URL bar for me to type things into. 00:41:53.080 --> 00:41:55.300 I can only type into this black and white window. 00:41:55.300 --> 00:41:58.600 But it's going to let me send an envelope to a server. 00:41:58.600 --> 00:42:02.380 And then get back a response envelope, and see what's actually inside of it, 00:42:02.380 --> 00:42:04.232 without actually rendering the web page. 00:42:04.232 --> 00:42:05.690 So I'm going to do this as follows. 00:42:05.690 --> 00:42:10.690 Let me go ahead and cURL Google.com, Enter. 00:42:10.690 --> 00:42:13.630 And you'll see that the following HTML came back, 00:42:13.630 --> 00:42:16.332 and it's not even quite like what we've seen thus far. 00:42:16.332 --> 00:42:19.540 It's actually all in capital letters, which is actually a little dated, right 00:42:19.540 --> 00:42:20.890 now, but this is fine. 00:42:20.890 --> 00:42:22.800 You'll notice that-- this is weird-- 00:42:22.800 --> 00:42:25.300 Google has moved, 301 move. 00:42:25.300 --> 00:42:28.790 But recall that 301 was one of those status codes, earlier, that I said, 00:42:28.790 --> 00:42:32.200 does mean that the browser should revisit some other URL. 00:42:32.200 --> 00:42:39.560 And indeed, we see this document has moved to www.google.com with an http:// 00:42:39.560 --> 00:42:40.720 explicit prefix. 00:42:40.720 --> 00:42:42.280 Moreover, let me do this. 00:42:42.280 --> 00:42:48.340 Let me rerun this command, with a dash, capital I, command, line argument. 00:42:48.340 --> 00:42:53.170 This shows me not the body of the response, 00:42:53.170 --> 00:42:55.420 but, rather, the HTTP headers. 00:42:55.420 --> 00:42:56.920 So notice what's different. 00:42:56.920 --> 00:43:02.110 This is what, ultimately, is inside of the envelope that 00:43:02.110 --> 00:43:03.380 came back from Google. 00:43:03.380 --> 00:43:04.990 That's ultimately what we care about. 00:43:04.990 --> 00:43:07.810 But recall that also inside of these envelopes, 00:43:07.810 --> 00:43:10.060 are one or more HTTP headers. 00:43:10.060 --> 00:43:14.740 Among which are the status code like 200 OK, or 301 00:43:14.740 --> 00:43:17.330 moved permanently, as we see here. 00:43:17.330 --> 00:43:20.410 So by rerunning this same command, cURL with dash I, 00:43:20.410 --> 00:43:23.860 I get to see really deep inside of the envelope. 00:43:23.860 --> 00:43:26.527 Like what all of these HTTP headers are, too, 00:43:26.527 --> 00:43:29.860 which humans don't normally see, because they're really just meant for browsers. 00:43:29.860 --> 00:43:32.930 But they do, in seeing them, help us understand what's going on. 00:43:32.930 --> 00:43:36.320 So what are the headers that are coming back in Google's envelope? 00:43:36.320 --> 00:43:40.144 Well, HTTP 1.1, 301 Moved Permanently. 00:43:40.144 --> 00:43:43.060 That's interesting, Google has, kind of, packed up and gone elsewhere. 00:43:43.060 --> 00:43:43.900 But where? 00:43:43.900 --> 00:43:45.050 To a location. 00:43:45.050 --> 00:43:47.860 So the second line is a second HTTP header, 00:43:47.860 --> 00:43:50.260 that's tucked somewhere in that envelope from my browser. 00:43:50.260 --> 00:43:53.260 And it says, hey browser, go to this URL instead. 00:43:53.260 --> 00:43:58.360 Don't just go to Google.com, go to www.google.com using HTTP. 00:43:58.360 --> 00:43:58.960 Why? 00:43:58.960 --> 00:44:00.790 Just because Google says so. 00:44:00.790 --> 00:44:04.330 Their server has been configured by Google's employees 00:44:04.330 --> 00:44:09.310 to redirect users to the URL that has the www, just because. 00:44:09.310 --> 00:44:12.500 Probably, partly for marketing reasons, partly for technical reasons, 00:44:12.500 --> 00:44:14.590 but that is what the server is saying. 00:44:14.590 --> 00:44:16.180 There's other information there, too. 00:44:16.180 --> 00:44:19.820 The content type of this message is text, slash, HTML. 00:44:19.820 --> 00:44:22.780 Happens to use something called UTF 8, or Unicode, in this case. 00:44:22.780 --> 00:44:23.890 A superset of ASCII. 00:44:23.890 --> 00:44:27.700 It happens to say the exact date and time that this request was sent, 00:44:27.700 --> 00:44:29.500 when the response expires. 00:44:29.500 --> 00:44:32.020 Indeed notice, Google is telling us that we 00:44:32.020 --> 00:44:36.700 can keep this response in our memory, in our computers' RAM, for like a month. 00:44:36.700 --> 00:44:39.950 And then don't ask me this question again for a month. 00:44:39.950 --> 00:44:42.160 Google is going to just keep saying the same thing. 00:44:42.160 --> 00:44:44.500 And then there's some lower level technical-- 00:44:44.500 --> 00:44:48.040 more technical HTTP headers, there, that we'll wave our hands at, for now. 00:44:48.040 --> 00:44:50.200 But my browser might find those helpful. 00:44:50.200 --> 00:44:54.670 All right, so if Google is telling me that it, literally, moved permanently, 00:44:54.670 --> 00:44:56.080 per the 301 status code. 00:44:56.080 --> 00:44:59.290 And its new location is this URL, here. 00:44:59.290 --> 00:45:01.435 Well, let's go to that URL, here. 00:45:01.435 --> 00:45:03.226 Let me go ahead and start over and do cURL. 00:45:06.170 --> 00:45:10.900 http://www.google.com, Enter. 00:45:10.900 --> 00:45:11.920 Interesting. 00:45:11.920 --> 00:45:16.750 So now I've gotten back a whole, long web page. 00:45:16.750 --> 00:45:19.841 That seems to contain, I don't even know what. 00:45:19.841 --> 00:45:22.090 So, turns out, this isn't HTML email that we're seeing 00:45:22.090 --> 00:45:23.506 at the bottom of the screen, here. 00:45:23.506 --> 00:45:26.230 This is something called JavaScript, a programming language 00:45:26.230 --> 00:45:29.260 that can actually be used with HTML and CSS, 00:45:29.260 --> 00:45:31.060 in conjunction, to create a web page. 00:45:31.060 --> 00:45:35.060 But if I scroll up high enough, you'll start to see eventually, ah! 00:45:35.060 --> 00:45:35.560 Interesting. 00:45:35.560 --> 00:45:39.760 You'll start to see some actual HTML in the page. 00:45:39.760 --> 00:45:43.930 And indeed, if I now rerun the same command, but with dash, 00:45:43.930 --> 00:45:46.070 capital I, so I get the headers. 00:45:46.070 --> 00:45:49.990 Notice, ah, this time it's 200 OK. 00:45:49.990 --> 00:45:53.560 And the server has actually responded, rather than redirecting me 00:45:53.560 --> 00:45:56.110 somewhere else, altogether. 00:45:56.110 --> 00:45:59.350 All right so that's what's deep inside of the envelope. 00:45:59.350 --> 00:46:00.790 These HTTP headers. 00:46:00.790 --> 00:46:03.700 Let's go back now to a higher level, to the actual browser 00:46:03.700 --> 00:46:05.590 that's making these requests. 00:46:05.590 --> 00:46:10.840 And see what URL is being requested, and what that very first GET request is. 00:46:10.840 --> 00:46:14.950 Let me go ahead and search for my favorite, cats, enter. 00:46:14.950 --> 00:46:17.050 And you'll notice at the top, now, the URL 00:46:17.050 --> 00:46:20.440 has changed to be a pretty long sequence of characters. 00:46:20.440 --> 00:46:24.130 And honestly, I don't even know what most of these characters mean or do. 00:46:24.130 --> 00:46:26.950 It's really up to Google to understand that. 00:46:26.950 --> 00:46:30.400 But I do know that I'm looking for cats and, frankly, sometimes when 00:46:30.400 --> 00:46:34.390 I get curious and try to start poking around on websites. 00:46:34.390 --> 00:46:37.540 I might just start tinkering to see if I can understand what's going on. 00:46:37.540 --> 00:46:39.940 So I'm going go ahead and delete most of the URL. 00:46:39.940 --> 00:46:42.670 And then go ahead delete even more of the URL. 00:46:42.670 --> 00:46:49.690 And distill it to just this here https://www.google.com/search. 00:46:49.690 --> 00:46:52.510 And indeed, it seems Chrome, here, has redirected me 00:46:52.510 --> 00:46:57.460 to HTTPS so that the connection is also secure, 00:46:57.460 --> 00:47:01.090 which we did not see with the command line version of cURL. 00:47:01.090 --> 00:47:04.630 So slash, search, question mark q, equals cats. 00:47:04.630 --> 00:47:07.160 Let me hit Enter. 00:47:07.160 --> 00:47:10.520 Seems like the exact same search result. So curiously, 00:47:10.520 --> 00:47:14.840 even though Google, upon searching for cats, previously used a super long URL, 00:47:14.840 --> 00:47:19.050 much of which I didn't understand, looks like that's not strictly all necessary. 00:47:19.050 --> 00:47:22.850 And it looks like it is sufficient information 00:47:22.850 --> 00:47:28.170 to get search results on cats, to just haven't a URL that looks like this. 00:47:28.170 --> 00:47:31.670 Now, this is useful because I'm going to use this information 00:47:31.670 --> 00:47:34.730 to make my own search engine. 00:47:34.730 --> 00:47:36.860 Let me go ahead and start. 00:47:36.860 --> 00:47:39.350 In Atom, let me go ahead and create a file 00:47:39.350 --> 00:47:42.230 that's ultimately called search.html. 00:47:42.230 --> 00:47:44.780 let me start it as usual with a doc type. 00:47:44.780 --> 00:47:49.760 Let me then start the body, the web page, itself, with open bracket HTML. 00:47:49.760 --> 00:47:53.180 Let me have a head up here, and close head. 00:47:53.180 --> 00:47:55.340 And then in here, a title. 00:47:55.340 --> 00:47:59.330 And I'll go ahead and call this, search, just so I remember which page is which. 00:47:59.330 --> 00:48:02.660 In here is going to be my body, and close body. 00:48:02.660 --> 00:48:05.000 And now I need to introduce a new tag. 00:48:05.000 --> 00:48:07.310 This one being in HTML form. 00:48:07.310 --> 00:48:11.420 Some kind of text boxes, and maybe check boxes, and buttons, and radio buttons, 00:48:11.420 --> 00:48:14.690 and the like, that will allow me to actually submit information from 00:48:14.690 --> 00:48:16.100 my page to Google's. 00:48:16.100 --> 00:48:20.874 And I know from practice that form takes an action attribute. 00:48:20.874 --> 00:48:23.540 Which in this case is going to be, I'm going to go out on a limb 00:48:23.540 --> 00:48:27.260 here, and do www.google.com, slash search. 00:48:27.260 --> 00:48:28.310 And that's it. 00:48:28.310 --> 00:48:31.205 And I'm going to use the method called, GET. 00:48:31.205 --> 00:48:34.500 It turns out, that there are different types 00:48:34.500 --> 00:48:36.210 of requests you can make of web pages. 00:48:36.210 --> 00:48:38.220 The default, and perhaps the most common is GET. 00:48:38.220 --> 00:48:41.220 And we've literally seen that keyword before, here it's written in lowercase. 00:48:41.220 --> 00:48:43.011 But in other contexts it's written in caps. 00:48:43.011 --> 00:48:47.160 GET me slash HTTP 1.1 was that earliest message we saw. 00:48:47.160 --> 00:48:51.110 So here, I see a reiteration of using that method. 00:48:51.110 --> 00:48:56.300 And this is in contrast with post, and put, and patch, and delete, 00:48:56.300 --> 00:48:58.800 that are also supported, but not generally used by us 00:48:58.800 --> 00:49:00.420 humans in the same way. 00:49:00.420 --> 00:49:05.220 Inside of this form, I'm going to introduce one other tag called input. 00:49:05.220 --> 00:49:07.470 I'm going to give this input a name of q. 00:49:07.470 --> 00:49:10.050 And the type of this input is going to be text. 00:49:10.050 --> 00:49:10.952 And that's it. 00:49:10.952 --> 00:49:13.410 I'm going to go ahead and open and close the tag all in one 00:49:13.410 --> 00:49:17.190 fell swoop, because there's really going to be nothing inside of this input, 00:49:17.190 --> 00:49:18.450 by definition. 00:49:18.450 --> 00:49:21.270 Meanwhile, I'm going to have one other input type, 00:49:21.270 --> 00:49:23.970 this one's going to be a submission type. 00:49:23.970 --> 00:49:28.680 And it's value, or the label on it, is going to be just search. 00:49:28.680 --> 00:49:31.259 So we've not seen some of these tags before. 00:49:31.259 --> 00:49:33.300 But you can perhaps infer what's going to happen. 00:49:33.300 --> 00:49:35.910 Here is, hey browser, here comes a form. 00:49:35.910 --> 00:49:38.220 Hey browser, give me an input of type text. 00:49:38.220 --> 00:49:40.560 Hey browser, give me an input of type submit. 00:49:40.560 --> 00:49:43.090 And this one, by convention, is going to be a button. 00:49:43.090 --> 00:49:45.450 So this would seem to give me what? 00:49:45.450 --> 00:49:50.174 This would seem to give me, if I open up search.html. 00:49:50.174 --> 00:49:52.840 Wow, I have to kind of look all the way up at the top to see it. 00:49:52.840 --> 00:49:59.220 A super simple text box, a super simple search button, and that's it. 00:49:59.220 --> 00:50:01.830 But what's magical, now, about this example, 00:50:01.830 --> 00:50:06.910 and because of the fact that I know a bit of HTML, now, notice what I can do. 00:50:06.910 --> 00:50:12.790 I can go ahead and zoom out, and search for cats, and then click Search. 00:50:12.790 --> 00:50:17.820 And even though I've not implemented a database, let alone a web server, 00:50:17.820 --> 00:50:21.840 let alone a web search engine, notice that I can just kind of 00:50:21.840 --> 00:50:24.000 punt that detail to Google. 00:50:24.000 --> 00:50:28.470 And notice, voila, so long as I send users to Google, 00:50:28.470 --> 00:50:30.030 I can get them some cats. 00:50:30.030 --> 00:50:34.620 And lest you think this is sort of precanned, let me go ahead 00:50:34.620 --> 00:50:36.900 and try start searching for not just cats, but dogs. 00:50:36.900 --> 00:50:41.040 And see if my same form works for other animals. 00:50:41.040 --> 00:50:45.100 And indeed, there is the most adorable dog that comes back as well. 00:50:45.100 --> 00:50:46.350 And notice what's happening. 00:50:46.350 --> 00:50:50.015 My web page, which is just running on my Mac, is written in HTML, 00:50:50.015 --> 00:50:54.360 it's using an HTML form, with an action attribute and a specific method. 00:50:54.360 --> 00:50:58.680 And together, the browser is using that HTML form as sufficient information 00:50:58.680 --> 00:51:00.450 to assemble the URL. 00:51:00.450 --> 00:51:05.160 To which it sends the user, when you type into that input text box, 00:51:05.160 --> 00:51:07.020 and click that submit button. 00:51:07.020 --> 00:51:12.770 Indeed, we end up at Google.com slash search, question mark, q equals dogs. 00:51:12.770 --> 00:51:17.580 Where the question mark means, hey browser, or rather, hey server, 00:51:17.580 --> 00:51:21.420 here come my HTTP parameters, as they're called. 00:51:21.420 --> 00:51:26.760 These keys and values, a name like q, a key, and a value like dog. 00:51:26.760 --> 00:51:28.909 So q, my query, equals dogs. 00:51:28.909 --> 00:51:30.700 Turns out you can have multiple parameters. 00:51:30.700 --> 00:51:34.260 So you might see ampersands, sometimes, as you might have noticed earlier, 00:51:34.260 --> 00:51:36.060 that before I deleted them. 00:51:36.060 --> 00:51:40.200 But for our purposes today, we just need this one parameter. 00:51:40.200 --> 00:51:43.860 So, we're not going to focus on implementing an actual search engine. 00:51:43.860 --> 00:51:47.530 For now, we'll just assume that someone else will build that for us. 00:51:47.530 --> 00:51:50.880 But let's see if we can, at least, make our web pages a little prettier, 00:51:50.880 --> 00:51:55.320 or at least pave the way for making our web sites better designed. 00:51:55.320 --> 00:51:57.480 How to do this. 00:51:57.480 --> 00:52:03.000 Let me go ahead and open up css0.html. 00:52:03.000 --> 00:52:08.060 This is now the first of a final series of examples 00:52:08.060 --> 00:52:10.220 that introduce another language, still. 00:52:10.220 --> 00:52:14.450 We've been focusing thus far on HTML, HyperText Markup Language, which 00:52:14.450 --> 00:52:16.820 is all of these tags and attributes. 00:52:16.820 --> 00:52:19.340 And that allows us to structure our web pages, 00:52:19.340 --> 00:52:22.100 and literally tag information on our web pages, 00:52:22.100 --> 00:52:25.400 so that we know what goes where and how to display it. 00:52:25.400 --> 00:52:29.090 But we've seen that browsers default styling is kind of lame. 00:52:29.090 --> 00:52:32.930 It's just like black and white, background and text. 00:52:32.930 --> 00:52:37.160 It's big and bold, or small and bold, for the headings. 00:52:37.160 --> 00:52:39.140 And it's really not all that interesting. 00:52:39.140 --> 00:52:42.140 I mean, my god, the font is like Times New Roman by default. 00:52:42.140 --> 00:52:43.500 Can't we do better? 00:52:43.500 --> 00:52:44.480 Well, you can. 00:52:44.480 --> 00:52:48.590 And indeed, with modern web development, do you have access to not just HTML, 00:52:48.590 --> 00:52:51.950 but also a language called CSS, Cascading Style Sheets, 00:52:51.950 --> 00:52:56.120 that allow you, in a web page, to kind of take the styling the last mile. 00:52:56.120 --> 00:52:59.210 To take this structure from your web page, 00:52:59.210 --> 00:53:01.340 and then tweak it so that it looks prettier 00:53:01.340 --> 00:53:03.170 and it's laid out exactly as you want, not 00:53:03.170 --> 00:53:05.210 how the browser is laying it out by default. 00:53:05.210 --> 00:53:06.350 So how do we do this? 00:53:06.350 --> 00:53:08.450 Here is CSS zero. 00:53:08.450 --> 00:53:11.930 And you'll notice a few new tags, header, main, and footer. 00:53:11.930 --> 00:53:15.590 Not to be confused with head, which is the top part of the web page. 00:53:15.590 --> 00:53:18.890 Header is just semantically the top part of the body. 00:53:18.890 --> 00:53:20.630 Main is the main part of the body. 00:53:20.630 --> 00:53:22.860 Footer is the bottom-most part of the body. 00:53:22.860 --> 00:53:25.970 But we don't have to use these tags, we can use other names, as well, 00:53:25.970 --> 00:53:29.010 that you might find in a reference or online resource. 00:53:29.010 --> 00:53:32.930 But I have three parts of this page, a header, main, and a footer. 00:53:32.930 --> 00:53:35.450 The first of which says, John Harvard, second of which says, 00:53:35.450 --> 00:53:39.050 welcome to my home page, last of which is my copyright symbol, just 00:53:39.050 --> 00:53:41.090 as a little footer on the page. 00:53:41.090 --> 00:53:42.410 But notice what I've done. 00:53:42.410 --> 00:53:45.530 I've added to each of those tags, header, main, and footer, 00:53:45.530 --> 00:53:46.760 a style attribute. 00:53:46.760 --> 00:53:48.410 Which we've not seen before. 00:53:48.410 --> 00:53:52.730 And my style attribute has, in green here, a bunch of properties, 00:53:52.730 --> 00:53:53.780 as we'll call them. 00:53:53.780 --> 00:53:56.000 These properties are not technically HTML, 00:53:56.000 --> 00:53:58.940 these properties are another language, altogether. 00:53:58.940 --> 00:54:02.990 Thankfully still looks like English, but notice the formatting. 00:54:02.990 --> 00:54:05.690 It's another key value pair paradigm. 00:54:05.690 --> 00:54:09.760 So we've seen in URLs that we have HTTP parameters, like q equal search, 00:54:09.760 --> 00:54:12.740 or q equals cats, or q equals dogs. 00:54:12.740 --> 00:54:16.190 Similarly, in CSS, not just HTTP, do you have this notion 00:54:16.190 --> 00:54:18.294 of keys and values, keys and values. 00:54:18.294 --> 00:54:19.460 But the syntax is different. 00:54:19.460 --> 00:54:22.920 This time, we're going to use colons and semi-colons to separate things. 00:54:22.920 --> 00:54:28.940 So it turns out, in the language called CSS, there is a property called, 00:54:28.940 --> 00:54:30.750 font dash size. 00:54:30.750 --> 00:54:31.980 After which, we put colon. 00:54:31.980 --> 00:54:33.930 After which, we put the font size we want. 00:54:33.930 --> 00:54:38.340 Turns out that CSS, this language, supports small, and large, 00:54:38.340 --> 00:54:40.350 and a few other words, as well. 00:54:40.350 --> 00:54:45.990 Or you can literally put, like, 16 point, pt; or 24 px, for pixels; 00:54:45.990 --> 00:54:48.250 and a few other measurement systems, as well. 00:54:48.250 --> 00:54:50.875 But I'm going to go ahead and still leave it a little relative, 00:54:50.875 --> 00:54:53.130 and just let the browser figure out what large is. 00:54:53.130 --> 00:54:57.970 Text dash align colon center, is going to center the text. 00:54:57.970 --> 00:55:00.687 And I've separated these properties with semi-colons. 00:55:00.687 --> 00:55:02.520 And this last one is not strictly necessary, 00:55:02.520 --> 00:55:04.930 but I put it there just in case I add any more later. 00:55:04.930 --> 00:55:08.220 Meanwhile, the main part of my web page should be medium font size, 00:55:08.220 --> 00:55:09.600 also aligned in the center. 00:55:09.600 --> 00:55:13.680 And then the footer of my web page should be small, also aligned center. 00:55:13.680 --> 00:55:16.890 So if I go ahead now and open up css0.html. 00:55:16.890 --> 00:55:22.120 Let's look, all right, it's still pretty ugly, but it's getting there. 00:55:22.120 --> 00:55:25.890 It's now centered, as I intend, and this font's a little bit bigger than this, 00:55:25.890 --> 00:55:26.790 than this. 00:55:26.790 --> 00:55:29.700 So it's kind of laid out hierarchically in that way. 00:55:29.700 --> 00:55:34.770 But notice, I didn't really do this in the best possible way. 00:55:34.770 --> 00:55:37.470 Looks like there's a lot of redundancy, here. 00:55:37.470 --> 00:55:40.080 The font size is varying, to be sure. 00:55:40.080 --> 00:55:43.750 But what is not varying? 00:55:43.750 --> 00:55:47.650 Yeah, like text align center, text align center, text align center. 00:55:47.650 --> 00:55:50.270 That's kind of lame that I've just copied and pasted 00:55:50.270 --> 00:55:53.810 that all over the place, when really I'm not leveraging 00:55:53.810 --> 00:55:57.500 the hierarchical nature of HTML, here. 00:55:57.500 --> 00:56:02.180 It turns out that Cascading Style Sheets, do cascade 00:56:02.180 --> 00:56:03.570 in a couple of different ways. 00:56:03.570 --> 00:56:07.190 One, you can actually have multiple CSS files, eventually-- 00:56:07.190 --> 00:56:08.540 one of which we'll soon see-- 00:56:08.540 --> 00:56:11.300 that can override other such files, and so forth. 00:56:11.300 --> 00:56:14.660 But notice, they also support some notion of hierarchy, it turns out. 00:56:14.660 --> 00:56:18.050 So if you want the header, and the main, and the footer 00:56:18.050 --> 00:56:23.250 tags all to be text align center, well, do they have a common ancestor, 00:56:23.250 --> 00:56:24.020 so to speak. 00:56:24.020 --> 00:56:26.660 If you think of a web page really like a family tree, 00:56:26.660 --> 00:56:31.176 where the roots of the tree is HTML, and it has two children, head and body. 00:56:31.176 --> 00:56:33.050 And actually, you know what, we can see this. 00:56:33.050 --> 00:56:36.740 Consider this HTML, here, which was that simplest of web pages 00:56:36.740 --> 00:56:39.950 with which we began, you can actually think of this as kind 00:56:39.950 --> 00:56:42.570 of like a family tree, as follows. 00:56:42.570 --> 00:56:46.970 If you think of the whole document as being this node, so to speak, up here. 00:56:46.970 --> 00:56:51.020 Below which, is the HTML tag, or element, as it's more 00:56:51.020 --> 00:56:54.800 generally called, and that HTML element has two children, head and body. 00:56:54.800 --> 00:56:56.780 And they're children in the sense that, even 00:56:56.780 --> 00:57:01.130 though they're both inside of the HTML tag, they're both at the same level. 00:57:01.130 --> 00:57:05.900 Head is kind of alongside body, body is not inside of head. 00:57:05.900 --> 00:57:09.950 And so, we can draw them on the same level, conceptually. 00:57:09.950 --> 00:57:12.800 Meanwhile, the head of the page has a title child. 00:57:12.800 --> 00:57:16.940 And the title tag has a hello world string inside of it. 00:57:16.940 --> 00:57:19.446 Meanwhile, body has its own string, hello world. 00:57:19.446 --> 00:57:21.320 And I've drawn these in different shapes here 00:57:21.320 --> 00:57:23.445 to convey that they're each a little bit different. 00:57:23.445 --> 00:57:25.370 Document is special, refers to the whole file. 00:57:25.370 --> 00:57:29.210 But HTML, head, title, and body are all HTML tags. 00:57:29.210 --> 00:57:33.080 And then these ovals, here, hello world, hello world, are just text nodes. 00:57:33.080 --> 00:57:37.010 And indeed, this is what a computer scientist would call a tree. 00:57:37.010 --> 00:57:38.690 Not unlike a family tree. 00:57:38.690 --> 00:57:40.340 And trees have nodes. 00:57:40.340 --> 00:57:43.580 And in this case when a browser receives a web 00:57:43.580 --> 00:57:46.530 page, in one of those virtual envelopes, and reads it top to bottom, 00:57:46.530 --> 00:57:47.120 left to right. 00:57:47.120 --> 00:57:51.470 What it's really doing, underneath the hood, is, thanks to programming code 00:57:51.470 --> 00:57:55.310 that programmers have written at companies like Google, 00:57:55.310 --> 00:57:57.650 and Microsoft, and others, they are building up 00:57:57.650 --> 00:58:01.520 in your computer's memory, or RAM, a treelike data 00:58:01.520 --> 00:58:06.990 structure, that looks, if you were to draw it, a little bit like this. 00:58:06.990 --> 00:58:13.460 And so notice here, that head is a child of HTML, 00:58:13.460 --> 00:58:15.890 just his body is a child of HTML, and title 00:58:15.890 --> 00:58:18.930 is a child of head in the same way. 00:58:18.930 --> 00:58:24.950 So if we go back to the example at hand, notice the header, and main, 00:58:24.950 --> 00:58:28.560 and footer in this slightly more involved example, 00:58:28.560 --> 00:58:30.960 are all children of what elements. 00:58:30.960 --> 00:58:35.270 They're are all inside of the same parent called body. 00:58:35.270 --> 00:58:39.320 Which suggests an opportunity to factor out, so to speak, 00:58:39.320 --> 00:58:42.140 the CSS property that's common to all of these. 00:58:42.140 --> 00:58:46.450 And put it on their parent element, so that it kind of cascades downward, 00:58:46.450 --> 00:58:50.030 atop all of those elements. 00:58:50.030 --> 00:58:51.470 And we can see that here. 00:58:51.470 --> 00:58:57.740 This is css1.html, which is almost the same, except it's a little narrower. 00:58:57.740 --> 00:59:01.340 Because I removed all of that text align center and put it, where? 00:59:01.340 --> 00:59:04.680 On the body in its own style tag. 00:59:04.680 --> 00:59:05.720 So this is nice. 00:59:05.720 --> 00:59:08.690 And indeed, this is now what distinguishes one page from another, 00:59:08.690 --> 00:59:11.720 being better or worse designed. 00:59:11.720 --> 00:59:14.840 Both of these are correct, both of them achieve exactly the same goal. 00:59:14.840 --> 00:59:17.180 But honestly, this one is a little easier to maintain. 00:59:17.180 --> 00:59:17.750 Why? 00:59:17.750 --> 00:59:22.029 Because if I open up css1.html, as I might here, 00:59:22.029 --> 00:59:24.570 you'll notice that I see a whole bunch of text in the center. 00:59:24.570 --> 00:59:26.486 But if I want to go ahead and change that, you 00:59:26.486 --> 00:59:30.410 know what, I can just change it in one place to text align left, 00:59:30.410 --> 00:59:31.550 reload the page. 00:59:31.550 --> 00:59:34.070 And now, it's all the way over on the left. 00:59:34.070 --> 00:59:38.936 If I go back into the editor and change it now to right, reload the page. 00:59:38.936 --> 00:59:40.134 Woo. 00:59:40.134 --> 00:59:42.800 That's what it sounds like when alignment changes on a web page. 00:59:42.800 --> 00:59:45.200 It's now all the way over here, on the right. 00:59:45.200 --> 00:59:49.220 The key takeaway, though, is that I can just change it in one place, 00:59:49.220 --> 00:59:50.450 instead of three places. 00:59:50.450 --> 00:59:52.325 And surely, this is a pretty simple web page. 00:59:52.325 --> 00:59:53.991 There's not all that much content there. 00:59:53.991 --> 00:59:56.480 But in actual web pages on the internet, is there 00:59:56.480 --> 00:59:58.550 many, many, many more lines of code. 00:59:58.550 --> 01:00:03.290 And so these kinds of design decisions start to make even more sense. 01:00:03.290 --> 01:00:04.880 And save even more time. 01:00:04.880 --> 01:00:07.850 Indeed, let's consider, now, an alternative approach still. 01:00:07.850 --> 01:00:10.610 A bad principle at hand here is this, I am 01:00:10.610 --> 01:00:14.665 co-mingling my web page's content with the presentation 01:00:14.665 --> 01:00:16.730 thereof, the aesthetics thereof. 01:00:16.730 --> 01:00:19.010 And this, in computer science, and programming, 01:00:19.010 --> 01:00:21.080 specifically, is generally frowned upon. 01:00:21.080 --> 01:00:23.840 To have your data, like John Harvard, welcome to my home page, 01:00:23.840 --> 01:00:26.420 the actual content you care about, intermingled 01:00:26.420 --> 01:00:28.970 all in the same file, let alone the same lines 01:00:28.970 --> 01:00:32.000 of code, with the stylization of that data. 01:00:32.000 --> 01:00:35.267 Aligning things in the center, making the font large, or medium, or small, 01:00:35.267 --> 01:00:36.350 it's just a little sloppy. 01:00:36.350 --> 01:00:38.660 Plus, it makes it harder to collaborate. 01:00:38.660 --> 01:00:42.942 If you are really not good at web design, the aesthetics of it, 01:00:42.942 --> 01:00:45.650 but you can certainly make HTML, and you can structure web pages, 01:00:45.650 --> 01:00:49.519 and maybe you're a programmer who can generate HTML in some other language. 01:00:49.519 --> 01:00:51.810 Well, if you want to collaborate with someone who's got 01:00:51.810 --> 01:00:56.240 more of an artistic eye, and he or she is happy to do all of your CSS. 01:00:56.240 --> 01:00:59.510 And take the web site the final mile, you just got to get it to him 01:00:59.510 --> 01:01:01.850 or her in some structural form. 01:01:01.850 --> 01:01:05.280 Well, it would be nice, frankly, to put all of the CSS in one place 01:01:05.280 --> 01:01:08.240 so that he or she can work independently of you. 01:01:08.240 --> 01:01:11.340 So that you're not, literally, changing the same lines of code. 01:01:11.340 --> 01:01:15.650 So in css2.html, do we have a step toward that. 01:01:15.650 --> 01:01:18.650 Notice that I've replaced the style attribute in these lines, 01:01:18.650 --> 01:01:22.920 here, with a new attribute called class. 01:01:22.920 --> 01:01:25.350 And class, I've come up with arbitrarily, but kind of 01:01:25.350 --> 01:01:28.050 reasonably with three key words, large, medium, and small. 01:01:28.050 --> 01:01:30.300 I could have called it foo, bar and bar; x, y and z. 01:01:30.300 --> 01:01:33.390 But I'm choosing words that describe the kind of class 01:01:33.390 --> 01:01:38.700 that I want to apply to each of these HTML elements, header, main, 01:01:38.700 --> 01:01:39.540 and footer. 01:01:39.540 --> 01:01:42.870 Indeed, if I scroll up, notice what's up here now. 01:01:42.870 --> 01:01:48.030 Instead of using style as an attribute, a curiosity about the style attribute, 01:01:48.030 --> 01:01:51.012 is that it also exists as a style tag. 01:01:51.012 --> 01:01:53.970 And if you have a style tag, it should go in the head of your web page. 01:01:53.970 --> 01:01:55.800 Which is why I've scrolled up here. 01:01:55.800 --> 01:01:58.140 And now notice I've done a few different things. 01:01:58.140 --> 01:01:59.640 I have put a few keywords here. 01:01:59.640 --> 01:02:02.040 Centered, large, medium, and small. 01:02:02.040 --> 01:02:04.500 Each of which I very deliberately started with a dot. 01:02:04.500 --> 01:02:06.570 Kind of looks like a typo, but it's not. 01:02:06.570 --> 01:02:10.770 Turns out the convention in web development is to use a dot, 01:02:10.770 --> 01:02:13.350 and then a word, when you want to define your own class, 01:02:13.350 --> 01:02:16.930 your own set of properties with which to stylize a web page. 01:02:16.930 --> 01:02:19.380 So I have arbitrarily, but again pretty reasonably, 01:02:19.380 --> 01:02:22.807 I think, come up with some key words, centered, large, medium, small. 01:02:22.807 --> 01:02:25.140 And put dots in front of them so that those are classes, 01:02:25.140 --> 01:02:27.750 those are now added to the browser's vocabulary. 01:02:27.750 --> 01:02:30.840 Specifically, if I use the centered class, 01:02:30.840 --> 01:02:34.170 it's going to make whatever it's applied to text align centered. 01:02:34.170 --> 01:02:36.390 If I use the large class, it's going to make 01:02:36.390 --> 01:02:40.710 the font size of its contents large; medium, medium; small, small. 01:02:40.710 --> 01:02:43.530 So I've kind of given myself new puzzle pieces, 01:02:43.530 --> 01:02:49.500 of some sort, new building blocks I can use to create a more well-designed web 01:02:49.500 --> 01:02:50.130 page. 01:02:50.130 --> 01:02:53.790 Because notice what I've done, not just in those tags, but even in the body, 01:02:53.790 --> 01:02:57.090 I've now specified that the class of the body should be centered. 01:02:57.090 --> 01:02:59.760 Use all of the properties associated with centered. 01:02:59.760 --> 01:03:03.150 The header should be class large, use all of the properties associated 01:03:03.150 --> 01:03:04.570 with the class large. 01:03:04.570 --> 01:03:07.180 Medium and small, same thing. 01:03:07.180 --> 01:03:11.460 So the end result frankly, is not all that surprising. 01:03:11.460 --> 01:03:14.760 It looks exactly the same, but it's better designed at this point. 01:03:14.760 --> 01:03:18.300 Because now my colleague, for instance, can isolate his or her work 01:03:18.300 --> 01:03:21.570 to just the top of the file, while I work on the bottom. 01:03:21.570 --> 01:03:24.270 But frankly, even that feels like it's inviting some trouble 01:03:24.270 --> 01:03:25.650 and we don't have to do that. 01:03:25.650 --> 01:03:28.560 Indeed, we'll soon see we can factor this out to a separate file. 01:03:28.560 --> 01:03:31.890 But you know, this can be done even more cleanly. 01:03:31.890 --> 01:03:35.040 Let me show you css3.html. 01:03:35.040 --> 01:03:37.920 And, oh my goodness, notice what's happened. 01:03:37.920 --> 01:03:41.970 Now I've really whittled down my HTML code to its essence. 01:03:41.970 --> 01:03:45.080 I'd argue this is much more readable now, because it literally just says, 01:03:45.080 --> 01:03:48.390 header, main, footer, with no visual distractions of style 01:03:48.390 --> 01:03:51.540 attributes at all, or class attributes at all. 01:03:51.540 --> 01:03:54.060 My text in gray, John Harvard, welcome to my home page, 01:03:54.060 --> 01:03:55.920 and so forth, really jumps out at me. 01:03:55.920 --> 01:03:57.420 And I'm just using fewer characters. 01:03:57.420 --> 01:04:01.176 So beyond the readability of it, just took less work to write that out. 01:04:01.176 --> 01:04:02.550 But what have I done differently? 01:04:02.550 --> 01:04:05.800 Well, up at top, notice this. 01:04:05.800 --> 01:04:11.330 It turns out that while, yes CSS and HTML do support classes, 01:04:11.330 --> 01:04:14.340 I don't technically need them in this context, right. 01:04:14.340 --> 01:04:18.930 Classes are especially useful for larger web pages where you're reusing styles, 01:04:18.930 --> 01:04:21.540 and you want to give them names so that you can use them 01:04:21.540 --> 01:04:23.040 as ingredients to your own web page. 01:04:23.040 --> 01:04:27.390 And maybe even share those CSS classes or ingredients with other people. 01:04:27.390 --> 01:04:32.400 But here, I really just want to text align center the body of my page. 01:04:32.400 --> 01:04:35.430 I want to make the font size large for the header, 01:04:35.430 --> 01:04:38.580 the font size medium for main, and the font size small for footer. 01:04:38.580 --> 01:04:41.970 And so notice the absence of any periods before these words. 01:04:41.970 --> 01:04:47.604 I can also specify actual tags, or elements, of my web page by their name. 01:04:47.604 --> 01:04:49.770 I don't need to go to the trouble of adding classes, 01:04:49.770 --> 01:04:51.660 unless that would be helpful for me. 01:04:51.660 --> 01:04:54.300 I can just distill it as this. 01:04:54.300 --> 01:04:59.460 And modify the aesthetics of my web page using just those selectors, as they're 01:04:59.460 --> 01:05:00.270 called. 01:05:00.270 --> 01:05:05.310 And indeed, if I open up this, css3.html, it, too, looks identical. 01:05:05.310 --> 01:05:08.730 But now, I'm going to take it one step final and further. 01:05:08.730 --> 01:05:15.030 In css4.html, I have really pruned this file down to its essence. 01:05:15.030 --> 01:05:19.230 And notice here, that there's no mention even of the style tag, 01:05:19.230 --> 01:05:21.060 up in the header of my web page. 01:05:21.060 --> 01:05:26.790 Rather, in the head of my web pages, only the title, as we've always seen, 01:05:26.790 --> 01:05:27.960 and also a link tag. 01:05:27.960 --> 01:05:29.910 Which, confusingly named, has nothing to do 01:05:29.910 --> 01:05:33.630 with blue links you might click in a web page, those again are anchors. 01:05:33.630 --> 01:05:37.620 But rather link href, so the attribute is unfortunately 01:05:37.620 --> 01:05:39.150 named the exact same thing. 01:05:39.150 --> 01:05:44.790 But href css4.css, which happens to be the name of a file in the same folder, 01:05:44.790 --> 01:05:48.060 the relationship to which is that it's a style sheet, 01:05:48.060 --> 01:05:49.750 and then I'm closing that tag. 01:05:49.750 --> 01:05:54.060 So, here notice, that I am specifying in the head of my web page, hey browser, 01:05:54.060 --> 01:05:58.530 please link to this other file called css4.css 01:05:58.530 --> 01:06:02.160 with which I have a relationship that is that of stylesheet. 01:06:02.160 --> 01:06:06.300 That is to say, hey browser, my stylesheet is called css4.css. 01:06:06.300 --> 01:06:07.560 And what is in that file? 01:06:07.560 --> 01:06:10.990 Literally, the same thing that was in the page a moment ago. 01:06:10.990 --> 01:06:14.019 So I factored out all of those lines from my HTML file, 01:06:14.019 --> 01:06:15.310 and just put them in their own. 01:06:15.310 --> 01:06:17.370 Which is useful for a few reasons. 01:06:17.370 --> 01:06:19.900 One, now my colleague can go off on his or her own 01:06:19.900 --> 01:06:22.340 and focus entirely on that file. 01:06:22.340 --> 01:06:24.500 Send me, somehow, the latest version, eventually, 01:06:24.500 --> 01:06:26.390 and we'll merge our work together. 01:06:26.390 --> 01:06:30.560 But two, if I want to use these same settings in multiple web pages, 01:06:30.560 --> 01:06:34.040 if I want to make them freely available as open source software, 01:06:34.040 --> 01:06:36.890 I can now isolate all of those properties, those aesthetics, 01:06:36.890 --> 01:06:38.150 to one file. 01:06:38.150 --> 01:06:40.670 And share it with anyone else in my company or the world. 01:06:40.670 --> 01:06:42.230 I can even have different themes. 01:06:42.230 --> 01:06:45.860 In fact, if you've ever used software, or WordPress, or any other kind 01:06:45.860 --> 01:06:48.500 of blogging software that lets you have standard functionality 01:06:48.500 --> 01:06:51.950 with your account, but it also lets you change the aesthetics. 01:06:51.950 --> 01:06:54.230 Like maybe you have a green theme, or a blue theme, 01:06:54.230 --> 01:06:57.650 or a minimalist theme, or a very 3-D theme, 01:06:57.650 --> 01:06:59.660 or any number of different aesthetic changes. 01:06:59.660 --> 01:07:02.810 Those are generally implemented in the form of just different style sheets. 01:07:02.810 --> 01:07:06.209 So a web site like WordPress might have one of these, 01:07:06.209 --> 01:07:08.000 if everyone has to use the same aesthetics. 01:07:08.000 --> 01:07:10.257 Or two of these, or 10 of these, or any number, 01:07:10.257 --> 01:07:12.090 or maybe they even let you make custom style 01:07:12.090 --> 01:07:16.550 sheets to configure your site or your blog to look exactly as you, 01:07:16.550 --> 01:07:18.230 yourself, intend. 01:07:18.230 --> 01:07:24.920 And so using CSS can we do exactly that kind of customization. 01:07:24.920 --> 01:07:27.950 So at the end of the day, web development 01:07:27.950 --> 01:07:29.450 is really about writing code. 01:07:29.450 --> 01:07:32.642 Its code in the language called HTML, HyperText Markup Language, 01:07:32.642 --> 01:07:34.850 which is really about the structure of your web page. 01:07:34.850 --> 01:07:37.790 What is the head, what is the body, and what goes inside of each. 01:07:37.790 --> 01:07:39.860 But then there's CSS, Cascading Style Sheets, 01:07:39.860 --> 01:07:43.280 that allow you to fine tune the web page and really control the aesthetics. 01:07:43.280 --> 01:07:46.276 And I've not really made the prettiest of websites here. 01:07:46.276 --> 01:07:48.650 But it turns out now that you have these building blocks, 01:07:48.650 --> 01:07:51.410 you know what a tag is, you know what an attribute is, 01:07:51.410 --> 01:07:53.360 and you've seen some examples thereof, you're 01:07:53.360 --> 01:07:56.240 really equipped to bootstrap yourself to learning all the more about web 01:07:56.240 --> 01:07:57.240 development on your own. 01:07:57.240 --> 01:08:00.500 From any number of online resources, or tutorials, or books, because now 01:08:00.500 --> 01:08:02.990 you just need to build out your vocabulary. 01:08:02.990 --> 01:08:05.120 You just need to know what other tags exist, 01:08:05.120 --> 01:08:09.470 what other attributes exist for those tags, and then you're off and running. 01:08:09.470 --> 01:08:13.160 Indeed, what's important, ultimately, is these concepts. 01:08:13.160 --> 01:08:15.680 The fact that a web page is nothing more than a text file 01:08:15.680 --> 01:08:19.819 written in CSS, and HTML, and maybe some JavaScript, still. 01:08:19.819 --> 01:08:23.420 And that file, while most of today lived on my own Mac, 01:08:23.420 --> 01:08:27.170 could certainly be dragged and dropped or somehow uploaded to a server. 01:08:27.170 --> 01:08:33.890 So that it lives not at file:/// slash, but at http or https://. 01:08:33.890 --> 01:08:37.111 And in order to get my web site on the internet, 01:08:37.111 --> 01:08:39.319 I just need to make sure I have one of those servers. 01:08:39.319 --> 01:08:42.950 And most of us don't go out and buy big fancy rack servers, 01:08:42.950 --> 01:08:44.779 let alone have our own data center. 01:08:44.779 --> 01:08:48.740 Rather, we just sign up for free, or we pay someone a few dollars a month, 01:08:48.740 --> 01:08:52.370 a web host, so to speak, who does have data centers like that. 01:08:52.370 --> 01:08:53.899 Who does have servers like that. 01:08:53.899 --> 01:08:57.080 And what they create for me is a username, and a password. 01:08:57.080 --> 01:08:59.479 And they give me, really just a folder, at the end 01:08:59.479 --> 01:09:02.160 of the day, into which I can put all of my files-- 01:09:02.160 --> 01:09:08.479 .html, .css, .jpep and others, so that now I can put my work of art 01:09:08.479 --> 01:09:10.850 on the internet at a specific URL. 01:09:10.850 --> 01:09:14.210 And if I go to the trouble, too, of buying a domain name, 01:09:14.210 --> 01:09:17.090 for a few dollars a year, or a few dollars every several years. 01:09:17.090 --> 01:09:19.170 And I can figure that domain name to know about, 01:09:19.170 --> 01:09:23.990 to point at, that web post, and the IP address, or IP address is thereof. 01:09:23.990 --> 01:09:26.510 Now can I have my own custom domain name, 01:09:26.510 --> 01:09:30.260 so now I am truly out there on the worldwide web. 01:09:30.260 --> 01:09:32.300 So all it takes is these building blocks. 01:09:32.300 --> 01:09:36.229 All it takes is an understanding of HTTP and how this runs atop of the internet. 01:09:36.229 --> 01:09:40.220 So that ultimately, you can not only get some pages from the internet, 01:09:40.220 --> 01:09:43.540 you, yourself, can put them there.