1 00:00:00,000 --> 00:00:02,440 [MUSIC PLAYING] 2 00:00:02,440 --> 00:00:16,097 3 00:00:16,097 --> 00:00:18,930 SPEAKER 1: Hello, everybody, and welcome to one of our last lectures 4 00:00:18,930 --> 00:00:20,160 for exploring digital media. 5 00:00:20,160 --> 00:00:22,380 I can't believe that we're here at the end. 6 00:00:22,380 --> 00:00:24,510 This week we're going to cover web development. 7 00:00:24,510 --> 00:00:27,120 And with us is a special lecturer, David Malan 8 00:00:27,120 --> 00:00:32,240 from Harvard University, who teaches the intro to computer science course CS50. 9 00:00:32,240 --> 00:00:36,548 It is a great course that many of us here have taken, 10 00:00:36,548 --> 00:00:38,340 and I would highly recommend that you take, 11 00:00:38,340 --> 00:00:42,090 if you're interested is piqued tonight with your web development stuff. 12 00:00:42,090 --> 00:00:43,770 It covers the language C-- 13 00:00:43,770 --> 00:00:46,290 14 00:00:46,290 --> 00:00:48,620 it covers C, it covers Python now. 15 00:00:48,620 --> 00:00:50,140 When I took it, it was PHP. 16 00:00:50,140 --> 00:00:54,148 So Python, and then you get a little bit of JavaScript, as well. 17 00:00:54,148 --> 00:00:54,690 You want to-- 18 00:00:54,690 --> 00:00:57,390 DAVID MALAN: Little bit of SQL, a little bit of Scratch, and then the two 19 00:00:57,390 --> 00:00:58,973 languages will be looking at tonight-- 20 00:00:58,973 --> 00:01:01,200 HTML and CSS, of course. 21 00:01:01,200 --> 00:01:03,020 AUDIENCE: People still use C? 22 00:01:03,020 --> 00:01:03,950 DAVID MALAN: Indeed. 23 00:01:03,950 --> 00:01:05,950 It's actually one of the most popular languages, 24 00:01:05,950 --> 00:01:09,138 albeit for very specialized purposes still. 25 00:01:09,138 --> 00:01:10,025 AUDIENCE: Wow. 26 00:01:10,025 --> 00:01:10,900 SPEAKER 1: All right. 27 00:01:10,900 --> 00:01:14,490 So feel free to chime in, ask questions, and make this as lively as possible. 28 00:01:14,490 --> 00:01:15,240 And welcome David. 29 00:01:15,240 --> 00:01:15,600 Thank you. 30 00:01:15,600 --> 00:01:16,558 DAVID MALAN: Thank you. 31 00:01:16,558 --> 00:01:17,850 So nice to see everyone. 32 00:01:17,850 --> 00:01:21,030 So the overarching goal tonight is web development, the goal of which 33 00:01:21,030 --> 00:01:23,520 is to empower you to understand how the web itself 34 00:01:23,520 --> 00:01:27,840 works, how to write web pages in these languages called HTML and CSS. 35 00:01:27,840 --> 00:01:30,073 And ultimately, give you enough technical comfort 36 00:01:30,073 --> 00:01:32,490 with which to exhibit your own work, creating, ultimately, 37 00:01:32,490 --> 00:01:34,657 a portfolio once you're out there in the real world, 38 00:01:34,657 --> 00:01:38,430 whether it's for photography or for videos that you've put together. 39 00:01:38,430 --> 00:01:42,213 And indeed, even if you're going into tonight's material feeling quite less 40 00:01:42,213 --> 00:01:44,880 comfortable, even if you're quite comfortable now with a camera, 41 00:01:44,880 --> 00:01:46,910 or at least more comfortable now with a camera, 42 00:01:46,910 --> 00:01:50,190 realize that what we'll do tonight is actually relatively accessible. 43 00:01:50,190 --> 00:01:53,730 We'll focus on the fundamental principles on how the web works 44 00:01:53,730 --> 00:01:57,060 and how web pages work, and the language itself is-- 45 00:01:57,060 --> 00:02:01,380 HTML-- and how you can teach yourself here on after more about the language, 46 00:02:01,380 --> 00:02:04,710 and teach yourself more techniques than we might actually look at in the class 47 00:02:04,710 --> 00:02:05,500 itself. 48 00:02:05,500 --> 00:02:07,590 So if you walk away tonight, or after watching 49 00:02:07,590 --> 00:02:11,580 this with just a bit more curiosity and a bit more interest in diving 50 00:02:11,580 --> 00:02:13,380 into this world, we'll have done our job. 51 00:02:13,380 --> 00:02:15,900 Because even in the real world, if you go off and want to create something 52 00:02:15,900 --> 00:02:17,910 like a portfolio website, or something for work, 53 00:02:17,910 --> 00:02:22,650 or for personal projects using popular sites like Squarespace or Wix-- 54 00:02:22,650 --> 00:02:25,520 which are site-builders-- generally, most people, 55 00:02:25,520 --> 00:02:28,890 whether technical or less technical, decide that they really always want 56 00:02:28,890 --> 00:02:32,202 to tweak something, or they want to add some feature or remove some feature. 57 00:02:32,202 --> 00:02:34,410 And once you understand a bit of tonight's material-- 58 00:02:34,410 --> 00:02:38,640 HTML and CSS-- can you go in and do those things yourself, 59 00:02:38,640 --> 00:02:40,290 and solve problems on your own. 60 00:02:40,290 --> 00:02:43,170 So without further ado, let's consider how we get 61 00:02:43,170 --> 00:02:44,960 to actually making our own web pages. 62 00:02:44,960 --> 00:02:47,970 Here's a URL, which is, of course, the address via which 63 00:02:47,970 --> 00:02:50,040 you can access something on the web. 64 00:02:50,040 --> 00:02:53,820 HTTP refers to the protocol or the language 65 00:02:53,820 --> 00:02:56,130 that a web server and a web browser speak. 66 00:02:56,130 --> 00:02:59,280 And we won't go too much into the weeds on what that is, but suffice 67 00:02:59,280 --> 00:03:02,850 it to say there is a convention via which web browsers know how to request 68 00:03:02,850 --> 00:03:05,100 web pages from the internet, and a convention 69 00:03:05,100 --> 00:03:09,960 via which web servers know how to respond with the contents of web pages. 70 00:03:09,960 --> 00:03:11,220 Now, where are those servers? 71 00:03:11,220 --> 00:03:15,210 Typically at domain names, like example.com, or more specifically here, 72 00:03:15,210 --> 00:03:17,490 www.example.com. 73 00:03:17,490 --> 00:03:21,600 And of course, this just represents one or more servers on the internet. 74 00:03:21,600 --> 00:03:23,687 And I say one or more because the bigger companies 75 00:03:23,687 --> 00:03:25,770 out there, like the Googles of the world certainly 76 00:03:25,770 --> 00:03:28,680 have more than one server that lives at a particular address, 77 00:03:28,680 --> 00:03:32,170 so that they can handle thousands or hundreds of thousands of users at once. 78 00:03:32,170 --> 00:03:34,830 So for tonight's purposes though, we'll assume this refers just 79 00:03:34,830 --> 00:03:36,690 to a single web server. 80 00:03:36,690 --> 00:03:39,630 But what does it mean when you visit www.example.com? 81 00:03:39,630 --> 00:03:46,200 Well, it turns out that implicit in that short URL is generally some file name. 82 00:03:46,200 --> 00:03:50,850 So when you don't specify a file name after the slash in a URL, 83 00:03:50,850 --> 00:03:54,000 it typically implies something like index.html. 84 00:03:54,000 --> 00:04:00,270 It can also be index.htm, or default.asp, or default.htm. 85 00:04:00,270 --> 00:04:02,220 It completely depends on the web server. 86 00:04:02,220 --> 00:04:05,340 But probably the most common convention in the tech world 87 00:04:05,340 --> 00:04:09,990 is to name a web page in a file called index.html, 88 00:04:09,990 --> 00:04:12,630 because at the end of the day, that is all the web page is. 89 00:04:12,630 --> 00:04:14,760 Whether you're visiting Facebook, or Google, 90 00:04:14,760 --> 00:04:19,170 or any other web-based application these days, what you are technically 91 00:04:19,170 --> 00:04:23,640 doing is yes, visiting a URL, but that URL is telling the server, 92 00:04:23,640 --> 00:04:27,180 please give me a specific file from that server 93 00:04:27,180 --> 00:04:30,160 so that my browser can show me the contents of that file. 94 00:04:30,160 --> 00:04:32,070 So here's where we'll spend all of our time 95 00:04:32,070 --> 00:04:34,400 tonight, actually creating the language-- 96 00:04:34,400 --> 00:04:37,680 HTML-- that is ultimately inside of this file. 97 00:04:37,680 --> 00:04:38,910 So what is HTML? 98 00:04:38,910 --> 00:04:40,770 It's not a programming language, per se. 99 00:04:40,770 --> 00:04:44,460 You can't use this language to build programs or write software. 100 00:04:44,460 --> 00:04:46,560 It's a markup language, which means it has 101 00:04:46,560 --> 00:04:48,870 what are called tags, which we'll see in just a moment. 102 00:04:48,870 --> 00:04:53,640 And those tags will allow you to tell a browser what to display on the screen 103 00:04:53,640 --> 00:04:54,810 and how to display it. 104 00:04:54,810 --> 00:04:57,240 So if you rewind quite a few years ago, if any of you 105 00:04:57,240 --> 00:05:02,670 grew up using WordPerfect before there were WYSIWYG editors-- what 106 00:05:02,670 --> 00:05:04,830 you see is what you get-- like Microsoft Word, 107 00:05:04,830 --> 00:05:08,500 you actually used to use low-level commands in your text file to say, 108 00:05:08,500 --> 00:05:10,740 hey, WordPerfect, start making my text bold, 109 00:05:10,740 --> 00:05:13,180 hey, WordPerfect, stop making my text bold. 110 00:05:13,180 --> 00:05:14,670 So it was very pedantic. 111 00:05:14,670 --> 00:05:16,900 And you, the human, the author had to tell 112 00:05:16,900 --> 00:05:19,600 the word processor exactly what to do. 113 00:05:19,600 --> 00:05:23,260 Well, turns out HTML is Hypertext Markup Language. 114 00:05:23,260 --> 00:05:25,270 And a markup language, as we'll see again, 115 00:05:25,270 --> 00:05:28,240 has tags, special instructions to the computer that tells it 116 00:05:28,240 --> 00:05:30,820 what to do with other words in that file. 117 00:05:30,820 --> 00:05:33,970 And hypertext is just a fancy term referring to the ability 118 00:05:33,970 --> 00:05:38,650 to link one page to another, ergo Hypertext Markup Language. 119 00:05:38,650 --> 00:05:41,140 So let's take a look at the simplest possible web page. 120 00:05:41,140 --> 00:05:42,970 If you were to visit some web page-- maybe 121 00:05:42,970 --> 00:05:46,060 it's www.example.com-- and see just a web 122 00:05:46,060 --> 00:05:48,460 page that says something simple like, hello world. 123 00:05:48,460 --> 00:05:50,200 Very simple black and white text. 124 00:05:50,200 --> 00:05:51,760 Nothing else, no images. 125 00:05:51,760 --> 00:05:56,920 The contents of that file index.html might look quite simply like this. 126 00:05:56,920 --> 00:05:59,260 So this is, perhaps, the simplest web page 127 00:05:59,260 --> 00:06:02,600 that we could write that a browser would understand. 128 00:06:02,600 --> 00:06:07,660 So if I visit http://www.example.com and hit Enter, 129 00:06:07,660 --> 00:06:11,590 most likely what the server is doing is sending me back over the internet 130 00:06:11,590 --> 00:06:13,600 a file called index.html-- 131 00:06:13,600 --> 00:06:15,140 just a text file. 132 00:06:15,140 --> 00:06:18,950 And inside of that file is literally these characters, top to bottom, 133 00:06:18,950 --> 00:06:19,600 left to right. 134 00:06:19,600 --> 00:06:24,160 When my browser-- whether it's Chrome, or Edge, or Firefox, or Safari, 135 00:06:24,160 --> 00:06:25,360 or any other browser-- 136 00:06:25,360 --> 00:06:29,570 receives this file, it literally looks at it, reads it top to bottom, 137 00:06:29,570 --> 00:06:32,680 left to right, and then does with this file says, 138 00:06:32,680 --> 00:06:36,160 displaying on the screen whatever the tags, so to speak, 139 00:06:36,160 --> 00:06:37,360 therein tell it to do. 140 00:06:37,360 --> 00:06:38,320 So what are these tags? 141 00:06:38,320 --> 00:06:39,945 Well, let's look at these step by step. 142 00:06:39,945 --> 00:06:43,300 The first line in this file is probably the most cryptic 143 00:06:43,300 --> 00:06:44,390 that we'll actually see. 144 00:06:44,390 --> 00:06:46,870 Its what's called a document type declaration. 145 00:06:46,870 --> 00:06:49,810 So it's a little cryptic in that it has an open angle bracket-- 146 00:06:49,810 --> 00:06:51,130 or a less than sign-- 147 00:06:51,130 --> 00:06:54,460 and then an exclamation point, and then the word DOCTYPE, and then a space, 148 00:06:54,460 --> 00:06:57,250 and then html, and then a closed bracket-- 149 00:06:57,250 --> 00:06:58,720 or a greater than sign. 150 00:06:58,720 --> 00:07:01,240 Well, that's just an arbitrary sequence of characters 151 00:07:01,240 --> 00:07:05,020 that the consortium that designed this language years ago 152 00:07:05,020 --> 00:07:09,130 decided means, hey, browser, here comes a file written 153 00:07:09,130 --> 00:07:12,850 in this language called HTML, and specifically, the latest version 154 00:07:12,850 --> 00:07:14,790 thereof, which is HTML5. 155 00:07:14,790 --> 00:07:16,540 Now, you can't glean that by just glancing 156 00:07:16,540 --> 00:07:19,270 at this first line in the file, but indeed, this just means, 157 00:07:19,270 --> 00:07:23,350 hey, browser, here comes a file written in the latest version of this language. 158 00:07:23,350 --> 00:07:26,890 So this is the kind of thing you just copy paste, whenever making a web page. 159 00:07:26,890 --> 00:07:28,870 Now, it starts to follow a pattern. 160 00:07:28,870 --> 00:07:31,130 So notice that there's already some symmetry, 161 00:07:31,130 --> 00:07:33,730 if you look at the next line and the very last line. 162 00:07:33,730 --> 00:07:38,050 So the symmetry here speaks to the fact that HTML is indeed a markup language. 163 00:07:38,050 --> 00:07:42,190 And you tell it what to do and when to no longer do that thing. 164 00:07:42,190 --> 00:07:43,550 And by that, I mean this-- 165 00:07:43,550 --> 00:07:46,760 the browser, upon seeing this line of code, is being told, 166 00:07:46,760 --> 00:07:49,390 hey, browser, here comes my HTML. 167 00:07:49,390 --> 00:07:53,440 And when the browser sees this last line later on in the file-- 168 00:07:53,440 --> 00:07:57,640 open bracket forward slash html close bracket-- 169 00:07:57,640 --> 00:07:59,950 that's telling the browser that's it for the web page. 170 00:07:59,950 --> 00:08:04,340 So it sort of start, stop, or open, close, so to speak. 171 00:08:04,340 --> 00:08:09,590 Now, inside of this HTML page, notice there's another pair of tags, 172 00:08:09,590 --> 00:08:10,360 so to speak. 173 00:08:10,360 --> 00:08:14,590 Open bracket head closed bracket, and then open bracket slash head 174 00:08:14,590 --> 00:08:15,500 closed bracket. 175 00:08:15,500 --> 00:08:17,110 And notice there the symmetry. 176 00:08:17,110 --> 00:08:20,027 In between those are some additional tags, that we'll see in a moment, 177 00:08:20,027 --> 00:08:22,610 but this says, hey, browser, here comes the head of the page-- 178 00:08:22,610 --> 00:08:24,170 the top of the page, so to speak. 179 00:08:24,170 --> 00:08:27,490 And this says, hey, browser, that's it for the head of the page. 180 00:08:27,490 --> 00:08:30,700 So just as a human actually has a head that's about yea big, 181 00:08:30,700 --> 00:08:34,960 and a human has a body which is about yea bigger, similarly, in a web page, 182 00:08:34,960 --> 00:08:39,549 does the head typically comprise just the very top of the file, 183 00:08:39,549 --> 00:08:41,500 like the title bar or the tab. 184 00:08:41,500 --> 00:08:43,870 The body, as we'll see, of the web page is actually 185 00:08:43,870 --> 00:08:45,910 everything else, the actual contents-- the text, 186 00:08:45,910 --> 00:08:47,898 the images, the movies, and the like. 187 00:08:47,898 --> 00:08:49,690 So what goes inside the head of a web page? 188 00:08:49,690 --> 00:08:50,410 Just the title. 189 00:08:50,410 --> 00:08:53,000 So these two tags collectively say, hey, browser, 190 00:08:53,000 --> 00:08:54,680 here comes the title of my web page. 191 00:08:54,680 --> 00:08:56,680 And then, hey, browser, that's it for the title. 192 00:08:56,680 --> 00:08:58,240 What is the actual title? 193 00:08:58,240 --> 00:09:01,330 Well, the first set of characters that actually have no angled 194 00:09:01,330 --> 00:09:06,040 brackets-- greater than or less than-- around them, just raw text. 195 00:09:06,040 --> 00:09:10,750 So the fact that hello comma title appears in between the open title 196 00:09:10,750 --> 00:09:13,060 tag and the closed title tag-- 197 00:09:13,060 --> 00:09:15,250 or the start tag and the end tag, so to speak-- 198 00:09:15,250 --> 00:09:18,630 means this is what will show up in the very tip top of the file 199 00:09:18,630 --> 00:09:22,090 in like the tab in your particular browser. 200 00:09:22,090 --> 00:09:23,625 Lastly, the body of the page. 201 00:09:23,625 --> 00:09:26,500 This says, hey, browser, here comes the body, the essence of my page. 202 00:09:26,500 --> 00:09:27,792 What's going to be in the body? 203 00:09:27,792 --> 00:09:30,640 Literally this string, hello comma body. 204 00:09:30,640 --> 00:09:32,680 So this is a super simple web page that's 205 00:09:32,680 --> 00:09:35,920 just saying hello to the world, calling attention to the title up top 206 00:09:35,920 --> 00:09:37,520 and the body down below. 207 00:09:37,520 --> 00:09:39,190 So let's actually see this in action. 208 00:09:39,190 --> 00:09:43,070 It's one thing to talk about this in the abstract and on a premade slide, 209 00:09:43,070 --> 00:09:49,210 but let's actually create this same web page using my own Mac or your own PC. 210 00:09:49,210 --> 00:09:50,870 So how do we go about doing this? 211 00:09:50,870 --> 00:09:54,340 Well, I'm going to go ahead and open up a program called VSCode, 212 00:09:54,340 --> 00:09:55,510 or Visual Studio Code. 213 00:09:55,510 --> 00:09:59,290 This is among the more popular text editing programs out there these days. 214 00:09:59,290 --> 00:10:01,420 It's essentially a super simple word processor-- 215 00:10:01,420 --> 00:10:04,330 so similar in spirit to Google Docs or to Microsoft Word-- 216 00:10:04,330 --> 00:10:07,660 but it doesn't have bold facing, it doesn't have italics, 217 00:10:07,660 --> 00:10:09,820 it doesn't have auto numbering, and such. 218 00:10:09,820 --> 00:10:13,090 It only supports pure text, and therefore, something 219 00:10:13,090 --> 00:10:15,470 like HTML, which is just text on the screen. 220 00:10:15,470 --> 00:10:18,540 So I'm going to go ahead and create a new file here on my own Mac. 221 00:10:18,540 --> 00:10:22,030 And I'm going to go ahead and save this in advance, say on my desktop, 222 00:10:22,030 --> 00:10:26,230 as a file called hello.html. 223 00:10:26,230 --> 00:10:31,180 And now I see in this program that I just have a blinking cursor on line 1 224 00:10:31,180 --> 00:10:33,520 in a file called hello.html. 225 00:10:33,520 --> 00:10:35,110 Well, what am I really doing here? 226 00:10:35,110 --> 00:10:39,250 Well, it seems to be the case that I'm creating a file called hello.html 227 00:10:39,250 --> 00:10:41,320 that eventually could live on a web server. 228 00:10:41,320 --> 00:10:44,050 I could upload this to Google.com, or Facebook.com, 229 00:10:44,050 --> 00:10:47,650 or whatever website I actually happen to be creating. 230 00:10:47,650 --> 00:10:50,293 But for now, it lives on my own Mac, or perhaps on your own PC. 231 00:10:50,293 --> 00:10:52,210 If you'd like to follow along at home-- or you 232 00:10:52,210 --> 00:10:55,390 will do this with the next assignment on your own Mac or PC. 233 00:10:55,390 --> 00:10:58,360 This web page, for the moment, is just going to live on my computer. 234 00:10:58,360 --> 00:11:00,637 And I'll be able to open it on my own browser, 235 00:11:00,637 --> 00:11:03,470 but it doesn't live on the internet-- it lives on my own hard drive. 236 00:11:03,470 --> 00:11:05,470 And that's the nice thing about web development, 237 00:11:05,470 --> 00:11:08,810 you can do it on your own Mac, PC, laptop, desktop, or the like. 238 00:11:08,810 --> 00:11:11,530 And only once you're ready to share those files with the world 239 00:11:11,530 --> 00:11:15,640 do you need to somehow drag and drop them via some program to a server, 240 00:11:15,640 --> 00:11:19,480 and actually host it somewhere on the actual internet at a URL. 241 00:11:19,480 --> 00:11:23,960 SPEAKER 1: And just out of curiosity David, using Microsoft's VS Code, 242 00:11:23,960 --> 00:11:26,122 are there other equivalent applications to use? 243 00:11:26,122 --> 00:11:27,580 Is it something special about that? 244 00:11:27,580 --> 00:11:28,300 DAVID MALAN: No, not at all. 245 00:11:28,300 --> 00:11:30,850 This VSCode just happens to be super popular these days, 246 00:11:30,850 --> 00:11:32,740 but these trends come and go. 247 00:11:32,740 --> 00:11:35,890 Other popular options include programs called Atom, 248 00:11:35,890 --> 00:11:40,663 include Sublime Text, Vim, Emacs, and a bunch of others, as well. 249 00:11:40,663 --> 00:11:42,580 Doesn't matter, ultimately, which one you use. 250 00:11:42,580 --> 00:11:45,400 This tends to be sort of a religious preference in the tech world. 251 00:11:45,400 --> 00:11:48,040 You just get used to one editor, and you like to use that one. 252 00:11:48,040 --> 00:11:50,690 This just happens to be among the trendier ones right now. 253 00:11:50,690 --> 00:11:54,500 SPEAKER 1: And are there any gotchas for the built-in Mac OS TextEdit, 254 00:11:54,500 --> 00:11:55,480 or anything like that? 255 00:11:55,480 --> 00:11:55,990 DAVID MALAN: Indeed. 256 00:11:55,990 --> 00:11:57,323 I'm glad you mentioned TextEdit. 257 00:11:57,323 --> 00:11:59,410 So with Mac OS comes a program called TextEdit, 258 00:11:59,410 --> 00:12:01,240 which allows you to edit text files. 259 00:12:01,240 --> 00:12:04,420 Ironically, by default, it doesn't let you edit text files. 260 00:12:04,420 --> 00:12:07,930 It lets you edit what are called rich text files, which are very simple 261 00:12:07,930 --> 00:12:11,080 Microsoft Word documents that do have bold facing, and italics, 262 00:12:11,080 --> 00:12:12,410 and underline, and the like. 263 00:12:12,410 --> 00:12:15,160 So if you use TextEdit, you actually have to go into your settings 264 00:12:15,160 --> 00:12:18,130 and disable rich text mode, and enable plain text mode. 265 00:12:18,130 --> 00:12:22,300 However, if you're on Windows though, and use a program called Notepad.exe, 266 00:12:22,300 --> 00:12:23,830 that will work out of the box. 267 00:12:23,830 --> 00:12:25,840 But it comes with some of its own complications, 268 00:12:25,840 --> 00:12:29,410 such that creating files in that program tend not to open 269 00:12:29,410 --> 00:12:31,210 well sometimes in other programs. 270 00:12:31,210 --> 00:12:34,820 So frankly, for any kind of web development these days, 271 00:12:34,820 --> 00:12:37,960 using a more proper, freely available, but downloadable program, 272 00:12:37,960 --> 00:12:41,343 like Atom, or VSCode, or Sublime tends to be the way to go. 273 00:12:41,343 --> 00:12:44,260 SPEAKER 1: We're getting some comments online about application called 274 00:12:44,260 --> 00:12:45,218 Brackets and Notepad++. 275 00:12:45,218 --> 00:12:47,010 DAVID MALAN: Brackets, [INAUDIBLE]---- yes. 276 00:12:47,010 --> 00:12:47,800 The list goes on. 277 00:12:47,800 --> 00:12:49,450 You can use absolutely anything you want, certainly, 278 00:12:49,450 --> 00:12:50,997 for the class and the real world. 279 00:12:50,997 --> 00:12:53,080 The point here is that it doesn't get much simpler 280 00:12:53,080 --> 00:12:54,788 than this, a black and white [? prompt ?] 281 00:12:54,788 --> 00:12:57,280 just waiting for me to type characters into the screen. 282 00:12:57,280 --> 00:12:58,990 So what are those characters going to be? 283 00:12:58,990 --> 00:13:01,240 So I'm going to go ahead and really recreate 284 00:13:01,240 --> 00:13:03,280 what we saw a moment ago, saying, hey, browser, 285 00:13:03,280 --> 00:13:05,380 the type of this document is HTML. 286 00:13:05,380 --> 00:13:08,500 And then I'm going to go ahead and say, hey, browser, here comes my HTML. 287 00:13:08,500 --> 00:13:10,292 And just so that I don't make any mistakes, 288 00:13:10,292 --> 00:13:12,013 I'm going to preemptively close this tag. 289 00:13:12,013 --> 00:13:13,930 I don't have to do this, but this way, I don't 290 00:13:13,930 --> 00:13:15,700 have to remember to come back and actually 291 00:13:15,700 --> 00:13:18,220 close or end that tag later on. 292 00:13:18,220 --> 00:13:21,500 What are the two things that come inside of the HTML tag? 293 00:13:21,500 --> 00:13:22,430 AUDIENCE: Head. 294 00:13:22,430 --> 00:13:24,130 DAVID MALAN: Yeah, so we had the head. 295 00:13:24,130 --> 00:13:25,990 And I'll do that whole thing preemptively. 296 00:13:25,990 --> 00:13:27,670 Head-- and then what was after that? 297 00:13:27,670 --> 00:13:28,907 AUDIENCE: Title. 298 00:13:28,907 --> 00:13:30,490 DAVID MALAN: Title was inside of that. 299 00:13:30,490 --> 00:13:35,480 What comes after head, if you recall? 300 00:13:35,480 --> 00:13:36,925 Literally head here, and then-- 301 00:13:36,925 --> 00:13:37,550 AUDIENCE: Body. 302 00:13:37,550 --> 00:13:39,200 DAVID MALAN: Body was the rest of it. 303 00:13:39,200 --> 00:13:40,760 So I can preemptively do this. 304 00:13:40,760 --> 00:13:43,010 So I can write the page really in any order, 305 00:13:43,010 --> 00:13:45,020 but this now speaks to the structure. 306 00:13:45,020 --> 00:13:46,280 So notice the symmetry. 307 00:13:46,280 --> 00:13:48,110 I've opened and closed HTML. 308 00:13:48,110 --> 00:13:51,080 Inside of that, I'd open and closed head, and done the same with body. 309 00:13:51,080 --> 00:13:54,620 So now, as you say, within head, I can go ahead and create my title. 310 00:13:54,620 --> 00:13:56,330 So I can go ahead and say title. 311 00:13:56,330 --> 00:13:58,550 And I'll go ahead and close that title tag. 312 00:13:58,550 --> 00:14:01,010 And then up here, I'll go ahead and say hello title-- 313 00:14:01,010 --> 00:14:03,470 though I could type anything, of course, that I want here. 314 00:14:03,470 --> 00:14:07,250 And then down in the body, I'll go ahead and say hello comma body, 315 00:14:07,250 --> 00:14:08,330 and click Save. 316 00:14:08,330 --> 00:14:10,010 Now, notice a few details-- 317 00:14:10,010 --> 00:14:13,670 I somehow have typed white, gray, and blue text 318 00:14:13,670 --> 00:14:17,060 even without trying in any way-- certainly without clicking any buttons. 319 00:14:17,060 --> 00:14:22,460 That's one of the features you get with text editors like VSCode, or Notepad++, 320 00:14:22,460 --> 00:14:24,000 or Atom, or the like. 321 00:14:24,000 --> 00:14:26,000 They give you what's called syntax highlighting, 322 00:14:26,000 --> 00:14:27,920 which is just a user-friendly feature that, 323 00:14:27,920 --> 00:14:31,700 if it supports the language you're writing in-- whether it's HTML, 324 00:14:31,700 --> 00:14:34,730 some other language called CSS, or C++, or JavaScript, 325 00:14:34,730 --> 00:14:38,240 or bunches of other languages-- it'll just automatically highlight 326 00:14:38,240 --> 00:14:41,990 the semantically interesting parts of what you have typed to draw 327 00:14:41,990 --> 00:14:45,620 your attention to what are angle brackets, what are tag names, 328 00:14:45,620 --> 00:14:46,850 what is actual text. 329 00:14:46,850 --> 00:14:51,450 It's not in the file itself, it's just a human-friendly presentation thereof. 330 00:14:51,450 --> 00:14:53,090 So I've save this file. 331 00:14:53,090 --> 00:14:55,470 I said a moment ago that I saved it on my desktop. 332 00:14:55,470 --> 00:14:57,080 So what can I do with this file? 333 00:14:57,080 --> 00:14:59,413 Well, I'm going to go ahead and just open up a browser-- 334 00:14:59,413 --> 00:15:03,230 say Chrome, though I could use Safari, or Firefox, or Edge, or anything else. 335 00:15:03,230 --> 00:15:06,088 And I'm going to go to literally File, Open File-- 336 00:15:06,088 --> 00:15:08,880 which is probably not something you've ever done with your browser, 337 00:15:08,880 --> 00:15:11,510 because, of course, you've typically gone to Open Location. 338 00:15:11,510 --> 00:15:13,510 Or frankly, you probably haven't even done that. 339 00:15:13,510 --> 00:15:16,092 You've just typed the URL right into the browser. 340 00:15:16,092 --> 00:15:18,050 But this is just saying, hey, browser, go ahead 341 00:15:18,050 --> 00:15:22,040 and open a file that happens to be called hello.html. 342 00:15:22,040 --> 00:15:23,570 And voila. 343 00:15:23,570 --> 00:15:26,330 I can do that on my own Mac, even without having 344 00:15:26,330 --> 00:15:28,250 a server or the whole internet involved. 345 00:15:28,250 --> 00:15:31,520 You'll see hello body is in the body of the page, the biggest part. 346 00:15:31,520 --> 00:15:35,300 You'll see hello title is along the top here, right in that tab. 347 00:15:35,300 --> 00:15:37,460 And notice the URL is kind of interesting. 348 00:15:37,460 --> 00:15:39,860 It's a file-- clearly, because I just created. 349 00:15:39,860 --> 00:15:43,160 And it's in my Users directory in a folder called jharvard-- 350 00:15:43,160 --> 00:15:44,510 for John Harvard-- 351 00:15:44,510 --> 00:15:49,160 in his desktop folder, and then in a file called hello.html. 352 00:15:49,160 --> 00:15:52,460 So this is just the way of viewing an HTML file, not on the internet, 353 00:15:52,460 --> 00:15:54,020 but on my own Mac or PC. 354 00:15:54,020 --> 00:15:57,620 So after tonight, and for your final project, perhaps, or your real world 355 00:15:57,620 --> 00:16:00,110 portfolio, the final step in web development 356 00:16:00,110 --> 00:16:03,860 would be to like drag and drop this and any other files up to some server 357 00:16:03,860 --> 00:16:07,445 so that you can have it hosted at a domain name, like example.com. 358 00:16:07,445 --> 00:16:12,570 But everything we'll do today just happens to live on my own computer. 359 00:16:12,570 --> 00:16:14,690 So that is perhaps the simplest possible web page. 360 00:16:14,690 --> 00:16:17,863 Of course, it's probably the most boring possible web page. 361 00:16:17,863 --> 00:16:20,780 So let's see if we can't do things that are a little more interesting. 362 00:16:20,780 --> 00:16:23,070 Let me go ahead and create a new file. 363 00:16:23,070 --> 00:16:26,330 And I'm going to go ahead and call this paragraphs.html. 364 00:16:26,330 --> 00:16:28,820 And let's go ahead and-- let me just copy and paste 365 00:16:28,820 --> 00:16:33,080 some of the code I wrote earlier, just so that I can save some time. 366 00:16:33,080 --> 00:16:35,490 And I want to go ahead and create a new body here. 367 00:16:35,490 --> 00:16:38,363 So I've created a new file called paragraphs.html. 368 00:16:38,363 --> 00:16:40,280 And the process by which you create a new file 369 00:16:40,280 --> 00:16:42,440 will totally depend on the program you're using. 370 00:16:42,440 --> 00:16:43,790 I went up to File, New. 371 00:16:43,790 --> 00:16:46,850 But other programs, like Notepad++ might have other keyboard shortcuts, 372 00:16:46,850 --> 00:16:48,870 or the like to do the exact same thing. 373 00:16:48,870 --> 00:16:50,870 I just changed my title to paragraphs, just so 374 00:16:50,870 --> 00:16:53,130 that I can distinguish one example from the other. 375 00:16:53,130 --> 00:16:56,150 And now, I have my blinking cursor inside the body. 376 00:16:56,150 --> 00:16:59,120 And the goal at hand is just to create some paragraphs of text. 377 00:16:59,120 --> 00:17:01,620 Well, I don't particularly want to think too hard about what 378 00:17:01,620 --> 00:17:04,460 to type, so it turns out I can do this-- 379 00:17:04,460 --> 00:17:06,418 Latin generator. 380 00:17:06,418 --> 00:17:09,460 If I Google Latin generator, you'll see that quite common on the internet 381 00:17:09,460 --> 00:17:12,440 are programs like this that allow you to generate what's generally 382 00:17:12,440 --> 00:17:19,910 called lorem ipsum Latin-like words that are actually nonsensical, but does 383 00:17:19,910 --> 00:17:21,310 give us something to work with. 384 00:17:21,310 --> 00:17:24,050 So I'm going to go ahead here and create maybe three paragraphs 385 00:17:24,050 --> 00:17:26,420 for myself, generate that. 386 00:17:26,420 --> 00:17:29,750 And indeed, now I've got some lorem ipsum text here 387 00:17:29,750 --> 00:17:33,290 that means nothing, but looks like something substantive. 388 00:17:33,290 --> 00:17:36,733 I'm going to go now and paste this into my file. 389 00:17:36,733 --> 00:17:38,150 Now, my file's currently wrapping. 390 00:17:38,150 --> 00:17:43,820 I can go ahead and change this by actually toggling Word Wrap. 391 00:17:43,820 --> 00:17:47,937 So you'll see that I, indeed, have three separate paragraphs inside my body. 392 00:17:47,937 --> 00:17:51,020 I've nicely indented, just like you might when writing a book or an essay. 393 00:17:51,020 --> 00:17:53,510 and I have second and third paragraphs, each of which 394 00:17:53,510 --> 00:17:55,970 seem to be representative of actual text. 395 00:17:55,970 --> 00:17:57,410 Let me save that. 396 00:17:57,410 --> 00:18:01,950 Let me go back to my browser, and File, Open, paragraphs.html. 397 00:18:01,950 --> 00:18:04,100 And unfortunately, there's a couple of anomalies. 398 00:18:04,100 --> 00:18:07,000 One, Google Chrome wants to translate this web 399 00:18:07,000 --> 00:18:10,610 page, which is wonderful, because it seems to be recognizing Latin. 400 00:18:10,610 --> 00:18:12,680 But if I just dismiss that, because no, I 401 00:18:12,680 --> 00:18:17,900 don't want to translate the sample text, what is the mistake or the bug, 402 00:18:17,900 --> 00:18:20,740 so to speak, in my code? 403 00:18:20,740 --> 00:18:23,660 What seems to be awry? 404 00:18:23,660 --> 00:18:24,910 AUDIENCE: Lack of line breaks. 405 00:18:24,910 --> 00:18:25,660 DAVID MALAN: Yeah. 406 00:18:25,660 --> 00:18:27,770 So lack of line breaks is indeed the case. 407 00:18:27,770 --> 00:18:30,980 All the same text is there, but it looks like all of my sentences 408 00:18:30,980 --> 00:18:33,110 have blurred together into just one big blob. 409 00:18:33,110 --> 00:18:34,040 Well, why is that? 410 00:18:34,040 --> 00:18:36,770 Well, it turns out that HTML is very pedantic. 411 00:18:36,770 --> 00:18:39,800 It will only do what you tell it to do. 412 00:18:39,800 --> 00:18:43,520 And even though I clearly hit Tab and I hit Enter here, hit the Return 413 00:18:43,520 --> 00:18:46,710 key a couple of times to indent things and create three paragraphs, 414 00:18:46,710 --> 00:18:47,630 that's not enough. 415 00:18:47,630 --> 00:18:52,430 Because browsers by default actually ignore most whitespace. 416 00:18:52,430 --> 00:18:54,982 And by whitespace, I mean hitting Enter a bunch of times, 417 00:18:54,982 --> 00:18:56,690 or hitting the Spacebar a bunch of times, 418 00:18:56,690 --> 00:18:58,357 or hitting the Tab key a bunch of times. 419 00:18:58,357 --> 00:19:01,280 Browsers, by default, just ignore a lot of that, 420 00:19:01,280 --> 00:19:03,957 unless you tell them to put it there. 421 00:19:03,957 --> 00:19:05,040 So what do I mean by this? 422 00:19:05,040 --> 00:19:09,140 Well, if you want a paragraph in HTML, you actually need to put it in there 423 00:19:09,140 --> 00:19:10,040 yourself. 424 00:19:10,040 --> 00:19:13,220 So I actually need to put a paragraph tag, which 425 00:19:13,220 --> 00:19:17,200 happens to be abbreviated with open bracket p closed bracket, just 426 00:19:17,200 --> 00:19:18,590 for succinctness. 427 00:19:18,590 --> 00:19:21,920 And then I'm going to go ahead and close that paragraph tag here. 428 00:19:21,920 --> 00:19:25,580 I'm going to go ahead and create another one over here, p tag, 429 00:19:25,580 --> 00:19:29,480 and then I'm going to go ahead and close that one here. 430 00:19:29,480 --> 00:19:33,500 And then I'm going to create a third one down here, and finally, 431 00:19:33,500 --> 00:19:36,292 close that tag here. 432 00:19:36,292 --> 00:19:38,750 And you'll notice my editors actually trying to be helpful, 433 00:19:38,750 --> 00:19:40,860 but sometimes it's not, because it gets confused 434 00:19:40,860 --> 00:19:42,380 if I haven't quite closed something. 435 00:19:42,380 --> 00:19:43,080 But that's fine. 436 00:19:43,080 --> 00:19:45,500 I'm going to go ahead and just fix it manually myself. 437 00:19:45,500 --> 00:19:48,230 And you'll now see that I, indeed, have the same three 438 00:19:48,230 --> 00:19:51,200 paragraphs of Latin text, but each of them 439 00:19:51,200 --> 00:19:56,060 here is sandwiched between an open p tag and a closed p tag, thereby telling 440 00:19:56,060 --> 00:19:58,880 the browser, here comes the beginning of a paragraph, that's 441 00:19:58,880 --> 00:20:00,810 it for this particular paragraph. 442 00:20:00,810 --> 00:20:03,808 So let's go ahead and save this file, go back to the browser. 443 00:20:03,808 --> 00:20:05,600 And just as you might on the real internet, 444 00:20:05,600 --> 00:20:08,750 go ahead and click Reload to reload the same file or web page. 445 00:20:08,750 --> 00:20:09,680 And voila. 446 00:20:09,680 --> 00:20:12,252 We still see that prompt for Latin over here. 447 00:20:12,252 --> 00:20:14,210 And that's fine, because Google is trying to be 448 00:20:14,210 --> 00:20:16,230 helpful with its built-in translator. 449 00:20:16,230 --> 00:20:20,630 But I do now see three paragraphs of text, which is nice, because now, it's 450 00:20:20,630 --> 00:20:22,550 actually as I intended. 451 00:20:22,550 --> 00:20:24,290 But notice what's still missing-- 452 00:20:24,290 --> 00:20:25,670 indentation. 453 00:20:25,670 --> 00:20:28,700 Because it too is going to ignore all of those tab characters. 454 00:20:28,700 --> 00:20:31,110 So we can really see this clearly as follows. 455 00:20:31,110 --> 00:20:34,760 If I a little reckless, and suppose I really want a lot of space 456 00:20:34,760 --> 00:20:36,920 in between these paragraphs, and I hit Enter a lot. 457 00:20:36,920 --> 00:20:40,520 I hit Save, and I go back to my file and reload, doesn't matter. 458 00:20:40,520 --> 00:20:44,660 The browser's going to ignore all but the first of those spaces, 459 00:20:44,660 --> 00:20:47,510 because I've still only told it to give me one paragraph, then 460 00:20:47,510 --> 00:20:49,340 a second paragraph, a third paragraph. 461 00:20:49,340 --> 00:20:51,590 There are ways to solve this problem, but the solution 462 00:20:51,590 --> 00:20:54,560 is not to just hit Enter a lot or the Spacebar a lot, as you might in, 463 00:20:54,560 --> 00:20:57,470 say, Microsoft Word or some other program. 464 00:20:57,470 --> 00:20:59,900 So that's a paragraph. 465 00:20:59,900 --> 00:21:01,520 How can we take this a bit further? 466 00:21:01,520 --> 00:21:03,350 Well, first of all, I should probably try 467 00:21:03,350 --> 00:21:06,500 to override these web pages' languages. 468 00:21:06,500 --> 00:21:08,930 And in fact, if I go back into hello.html, 469 00:21:08,930 --> 00:21:12,710 it turns out that you can actually tell a browser proactively 470 00:21:12,710 --> 00:21:16,280 what language it's written in, so that if Google Translate, or Bing Translate, 471 00:21:16,280 --> 00:21:19,160 or some other tool pops up automatically, it knows, 472 00:21:19,160 --> 00:21:22,850 without having to guess or analyze the file, what language it's written in. 473 00:21:22,850 --> 00:21:26,240 And we can do this by adding what's called an attribute. 474 00:21:26,240 --> 00:21:30,620 So HTML also supports not just tags, and of course pure text, 475 00:21:30,620 --> 00:21:32,360 but it also supports attributes. 476 00:21:32,360 --> 00:21:38,160 Attributes are like customization of a tag that changes its default behavior. 477 00:21:38,160 --> 00:21:42,410 So by default, the html tag just says, hey, browser, here comes HTML. 478 00:21:42,410 --> 00:21:44,090 But if you instead have a keyword-- 479 00:21:44,090 --> 00:21:46,130 in this case lang, for language-- 480 00:21:46,130 --> 00:21:50,480 then an equals sign, then two double quotes, or two single quotes-- 481 00:21:50,480 --> 00:21:53,330 you can use either, but you need to be consistent on both sides-- 482 00:21:53,330 --> 00:21:58,640 and then a language code, like en for English, or es for Spanish, 483 00:21:58,640 --> 00:22:00,800 or any number of other two character codes, 484 00:22:00,800 --> 00:22:03,450 that's a clue to the browser that says, hey, browser, 485 00:22:03,450 --> 00:22:07,620 here comes HTML written in this specific language. 486 00:22:07,620 --> 00:22:11,040 So browsers like Google Chrome can then use that clue, 487 00:22:11,040 --> 00:22:14,300 and then either prompt you to translate or maybe not translate 488 00:22:14,300 --> 00:22:18,170 the current page, especially if it's not obvious from the text or the images 489 00:22:18,170 --> 00:22:19,650 that you might actually have. 490 00:22:19,650 --> 00:22:21,692 So that's the first of the attributes we'll have, 491 00:22:21,692 --> 00:22:24,660 but we'll see a couple of others soon, as well. 492 00:22:24,660 --> 00:22:27,920 So of course, if you open up a book or any kind of text, 493 00:22:27,920 --> 00:22:29,690 you typically don't just have paragraphs, 494 00:22:29,690 --> 00:22:34,072 you tend to have headings, like chapter headings, section headings, subsection 495 00:22:34,072 --> 00:22:35,030 headings, and the like. 496 00:22:35,030 --> 00:22:38,120 If you think about any textbook, or even certain novels or books 497 00:22:38,120 --> 00:22:41,420 that are divided into sections, well, how can we do this in HTML? 498 00:22:41,420 --> 00:22:47,150 Well, let me go ahead and create another file called, let's say, headings.html. 499 00:22:47,150 --> 00:22:51,540 I'm going to go ahead and copy and paste that same code as before, 500 00:22:51,540 --> 00:22:53,480 but this time, I'm going to call it headings. 501 00:22:53,480 --> 00:22:56,730 And then in the body of this page, I'm going to go ahead and say a few things. 502 00:22:56,730 --> 00:23:03,020 One, two, three, four, five, and six. 503 00:23:03,020 --> 00:23:04,500 Let me save that file. 504 00:23:04,500 --> 00:23:08,720 Let me go back to my browser, and open up this file, headings.html. 505 00:23:08,720 --> 00:23:12,088 And hopefully, as expected, it is not the six paragraphs 506 00:23:12,088 --> 00:23:13,130 you might have hoped for. 507 00:23:13,130 --> 00:23:15,440 Just because I was hitting Enter doesn't mean anything. 508 00:23:15,440 --> 00:23:16,550 The browser's ignoring those. 509 00:23:16,550 --> 00:23:18,170 But I don't want paragraphs this time. 510 00:23:18,170 --> 00:23:20,270 I want these to be like section headings, 511 00:23:20,270 --> 00:23:24,360 where chapter 1 is big and bold, and maybe the next section two 512 00:23:24,360 --> 00:23:26,550 is a little smaller, but still bold. 513 00:23:26,550 --> 00:23:29,750 So it turns out that HTML has some special tags like this-- 514 00:23:29,750 --> 00:23:33,150 h1, and then the opposite, close h1. 515 00:23:33,150 --> 00:23:35,850 And then h2, and then h-- whoops. 516 00:23:35,850 --> 00:23:38,550 And then let me close h2. 517 00:23:38,550 --> 00:23:42,120 And then here, h3, and then close h3. 518 00:23:42,120 --> 00:23:46,980 And then open bracket h4, and then closed bracket h4. 519 00:23:46,980 --> 00:23:50,580 And then open bracket h5, closed bracket h5. 520 00:23:50,580 --> 00:23:56,580 And then lastly, open bracket h6, and then closed bracket h6. 521 00:23:56,580 --> 00:24:00,450 This is telling the browser, here comes a big and bold heading, 522 00:24:00,450 --> 00:24:02,760 here comes another one, but not quite as big and bold, 523 00:24:02,760 --> 00:24:04,380 here comes another, another, another. 524 00:24:04,380 --> 00:24:07,890 So if you have chapter, sections, subsections, sub-subsection, 525 00:24:07,890 --> 00:24:12,260 sub-sub-subsections in a text book or some other document, or an article, 526 00:24:12,260 --> 00:24:14,760 this is how you can achieve that result. Because if I go now 527 00:24:14,760 --> 00:24:18,360 to headings.html and click Reload, you'll see exactly 528 00:24:18,360 --> 00:24:20,562 that-- some big default bold text. 529 00:24:20,562 --> 00:24:23,520 Then it's getting a little smaller, a little smaller, a little smaller, 530 00:24:23,520 --> 00:24:26,020 just as you might expect in an actual text book. 531 00:24:26,020 --> 00:24:27,270 So that gives us our headings. 532 00:24:27,270 --> 00:24:30,228 And we could certainly go back in and start adding paragraphs of Latin, 533 00:24:30,228 --> 00:24:33,580 or English, or any text to kind of flesh this out further. 534 00:24:33,580 --> 00:24:36,120 But for now, let's just focus on that structure. 535 00:24:36,120 --> 00:24:37,540 Well, let's try something else. 536 00:24:37,540 --> 00:24:40,110 Let me go and copy paste this into another file 537 00:24:40,110 --> 00:24:42,870 that I'll call unordered.html. 538 00:24:42,870 --> 00:24:45,028 My goal at hand now is to make a list. 539 00:24:45,028 --> 00:24:47,070 And that list is going to be unordered-- that is, 540 00:24:47,070 --> 00:24:49,320 no numbers associated with the items. 541 00:24:49,320 --> 00:24:51,450 And if I start where I started before-- 542 00:24:51,450 --> 00:24:55,170 I might say one, two, and let's just stop with three this time. 543 00:24:55,170 --> 00:24:59,587 Of course, if I save this file and open unordered.html in my browser, 544 00:24:59,587 --> 00:25:01,670 I'm going to see one, two, three on the same line. 545 00:25:01,670 --> 00:25:04,110 They're not paragraphs, they're not headings. 546 00:25:04,110 --> 00:25:06,300 But I want this to be like a bulleted list. 547 00:25:06,300 --> 00:25:09,000 Well, you can imagine trying to do this your own way. 548 00:25:09,000 --> 00:25:13,600 Maybe use an asterisk as a bullet-like symbol, something like that. 549 00:25:13,600 --> 00:25:16,620 And then if I save that file and reload, closer. 550 00:25:16,620 --> 00:25:19,890 But of course, if I to move two and three onto the next lines, 551 00:25:19,890 --> 00:25:22,480 I'm going to need paragraph tags or something like that. 552 00:25:22,480 --> 00:25:26,400 But that still doesn't look quite as pretty as bullets and Microsoft Word, 553 00:25:26,400 --> 00:25:28,650 or Google Docs, or Gmail, or the like. 554 00:25:28,650 --> 00:25:30,540 But that's because I'm not taking advantage 555 00:25:30,540 --> 00:25:34,500 of another feature of HTML, which is literally what's called a list. 556 00:25:34,500 --> 00:25:38,730 I can go ahead and create an unordered list with open bracket ul, 557 00:25:38,730 --> 00:25:42,060 and then close that list with open bracket slash ul. 558 00:25:42,060 --> 00:25:45,690 And then I can go ahead and give this three list items. 559 00:25:45,690 --> 00:25:50,400 I can go ahead and say open bracket li, then closed bracket li, 560 00:25:50,400 --> 00:25:52,320 and then just do the exact same thing. 561 00:25:52,320 --> 00:25:56,370 And notice I'm not numbering them in any way-- it's indeed an unordered list-- 562 00:25:56,370 --> 00:26:01,170 but I am flanking each of these words with li, close li. 563 00:26:01,170 --> 00:26:05,180 Let's save that, go back to the browser, and reload. 564 00:26:05,180 --> 00:26:07,290 And voila, it looks a little prettier. 565 00:26:07,290 --> 00:26:08,782 It's still quite simple-- 566 00:26:08,782 --> 00:26:10,740 one, two, three-- but notice, now, I'm starting 567 00:26:10,740 --> 00:26:12,150 to get some aesthetics for free. 568 00:26:12,150 --> 00:26:15,180 I'm marking up my text, one, two, three, and the browser 569 00:26:15,180 --> 00:26:17,997 is taking care of rendering it as a list that's unordered. 570 00:26:17,997 --> 00:26:20,580 But wait a minute-- what if I want to make it an ordered list? 571 00:26:20,580 --> 00:26:23,760 Well, actually let me go ahead and create a file real quick. 572 00:26:23,760 --> 00:26:28,500 I'll create a file called ordered.html, paste this same code in there, 573 00:26:28,500 --> 00:26:30,510 but rename the title to ordered. 574 00:26:30,510 --> 00:26:33,930 And let me just go ahead and ask, well, if ul-- 575 00:26:33,930 --> 00:26:37,620 unordered list-- is the HTML tag for an unordered list, 576 00:26:37,620 --> 00:26:40,830 you can probably surmise how we get an ordered list, one 577 00:26:40,830 --> 00:26:44,700 that's automatically number, just like Microsoft Word and Google Docs can do. 578 00:26:44,700 --> 00:26:47,400 So maybe not ol, but let's go with our gut-- 579 00:26:47,400 --> 00:26:50,700 or at least my gut here-- ol and close ol. 580 00:26:50,700 --> 00:26:52,450 Save this file. 581 00:26:52,450 --> 00:26:56,010 Let me go ahead an open ordered.html. 582 00:26:56,010 --> 00:26:58,590 And voila, now I get the numbering for free. 583 00:26:58,590 --> 00:27:01,210 So here's where you start to see some of the power of HTML. 584 00:27:01,210 --> 00:27:04,240 Still super simple, but if you have lists of items, 585 00:27:04,240 --> 00:27:06,490 you don't have to worry about numbering them yourself. 586 00:27:06,490 --> 00:27:08,190 If you want to go in and add more items to the list, 587 00:27:08,190 --> 00:27:10,773 you don't have to worry about remembering everything yourself. 588 00:27:10,773 --> 00:27:13,680 The computer, namely the browser on the computer, 589 00:27:13,680 --> 00:27:16,350 can go ahead and take care of all of that complexity for you. 590 00:27:16,350 --> 00:27:18,300 And lists are everywhere on the web. 591 00:27:18,300 --> 00:27:21,690 Even though they might not be as blatant as bulleted lists 592 00:27:21,690 --> 00:27:23,880 or numbered list on a web page, anytime you 593 00:27:23,880 --> 00:27:26,070 see a whole bunch of menu options, anytime 594 00:27:26,070 --> 00:27:30,660 you're ordering something online from a menu, a la Grubhub or Uber 595 00:27:30,660 --> 00:27:34,170 Eats, or the like, you're probably seeing lists of items. 596 00:27:34,170 --> 00:27:37,073 It's just those lists are not rendered quite like this, with numbers 597 00:27:37,073 --> 00:27:37,740 or with bullets. 598 00:27:37,740 --> 00:27:40,073 They're rendered more beautifully with other aesthetics. 599 00:27:40,073 --> 00:27:43,110 And we'll see how you can render different aesthetics in a little bit 600 00:27:43,110 --> 00:27:45,960 tonight, with this other language called CSS. 601 00:27:45,960 --> 00:27:49,290 So now, we're really beginning to see what HTML can do for us, at least 602 00:27:49,290 --> 00:27:49,993 aesthetically. 603 00:27:49,993 --> 00:27:51,660 And indeed, that's what it's all about-- 604 00:27:51,660 --> 00:27:54,600 marking up your actual content, and letting the browser 605 00:27:54,600 --> 00:27:56,260 take it the rest of the way. 606 00:27:56,260 --> 00:27:56,760 All right. 607 00:27:56,760 --> 00:28:00,010 So what about a more visually interesting web page? 608 00:28:00,010 --> 00:28:02,160 It's really hard to get excited about text. 609 00:28:02,160 --> 00:28:06,600 What if we go ahead, and instead, open up a file that we'll name, 610 00:28:06,600 --> 00:28:09,480 for instance, say, image.html. 611 00:28:09,480 --> 00:28:12,750 Let me go ahead and save this file, changing the title 612 00:28:12,750 --> 00:28:14,520 and borrowing some of my code from before. 613 00:28:14,520 --> 00:28:16,380 So again, we're borrowing the same structure 614 00:28:16,380 --> 00:28:17,760 for every one of our web pages. 615 00:28:17,760 --> 00:28:20,885 And you too, for your assignment, final project, can certainly do the same. 616 00:28:20,885 --> 00:28:24,305 Just start with some boilerplate, so to speak, and then make it your own. 617 00:28:24,305 --> 00:28:27,140 Within the body of the web page here, what if I want 618 00:28:27,140 --> 00:28:31,640 to have a cat in the web page here? 619 00:28:31,640 --> 00:28:35,090 Well, it just so happens that I brought with me the image of a cat. 620 00:28:35,090 --> 00:28:38,065 And let me go ahead and grab that, for instance-- well, 621 00:28:38,065 --> 00:28:39,440 we'll grab it from Google Images. 622 00:28:39,440 --> 00:28:40,580 So I need a cat. 623 00:28:40,580 --> 00:28:45,200 So I'm going to go ahead and Google cat, and see a whole bunch of cats here. 624 00:28:45,200 --> 00:28:49,125 Let's say-- this one looks quite adorable, on Wiktionary. 625 00:28:49,125 --> 00:28:50,750 I'm going to go ahead, for the moment-- 626 00:28:50,750 --> 00:28:53,600 and assuming this is my cat that I happened to put online, 627 00:28:53,600 --> 00:28:57,037 I'm going to go ahead and copy the image address for the sake of demonstration. 628 00:28:57,037 --> 00:28:59,120 And that's going to give me the URL of that image. 629 00:28:59,120 --> 00:29:01,370 And indeed, if I paste that into my browser, 630 00:29:01,370 --> 00:29:04,250 I'm actually going to see this URL here. 631 00:29:04,250 --> 00:29:09,920 And actually, let me go back and actually visit this cat in situ, 632 00:29:09,920 --> 00:29:11,360 and go and do the same here. 633 00:29:11,360 --> 00:29:13,640 Copy image address, and there we have it. 634 00:29:13,640 --> 00:29:18,740 You'll see that at this URL, upload.wikimedia.org slash m 635 00:29:18,740 --> 00:29:21,440 I have this jpg of an actual cat. 636 00:29:21,440 --> 00:29:23,210 So that's the URL of my cat. 637 00:29:23,210 --> 00:29:26,630 I'm going to now go into my file in VSCode. 638 00:29:26,630 --> 00:29:29,510 I'm going to go ahead and now give myself the cat image. 639 00:29:29,510 --> 00:29:33,740 Of course, if I just paste the URL here, like this, that's a bit nonsensical. 640 00:29:33,740 --> 00:29:37,730 Because if I simply paste the URL of the cat, save the file, 641 00:29:37,730 --> 00:29:40,820 and then open this file, image.html, in the browser, I'm, of course, 642 00:29:40,820 --> 00:29:43,940 just going to see the URL, which is hardly rich media. 643 00:29:43,940 --> 00:29:47,840 So I really need to tell the browser to go put that image in the web page. 644 00:29:47,840 --> 00:29:49,260 And how can I do that? 645 00:29:49,260 --> 00:29:51,950 Well, turns out there's a tag called image. 646 00:29:51,950 --> 00:29:54,920 But it's abbreviated img, just because it's so popular. 647 00:29:54,920 --> 00:29:56,990 It saves you a few keystrokes. 648 00:29:56,990 --> 00:30:01,140 And then here, I need to specify the source of the image. 649 00:30:01,140 --> 00:30:03,890 So the image tag just says, hey, browser, put an image here. 650 00:30:03,890 --> 00:30:06,260 But it needs an attribute known as source-- 651 00:30:06,260 --> 00:30:11,360 similarly abbreviated src-- that has an equal sign as before, a quotation 652 00:30:11,360 --> 00:30:15,080 mark, and then at the very end of it, another quotation mark, and then 653 00:30:15,080 --> 00:30:16,320 a closed bracket. 654 00:30:16,320 --> 00:30:18,980 So this is now saying, hey, browser, put an image here, 655 00:30:18,980 --> 00:30:22,940 the source of which should be that same URL on Wikimedia, 656 00:30:22,940 --> 00:30:25,153 and go ahead and put it right there. 657 00:30:25,153 --> 00:30:26,820 Let me go ahead now and reload the page. 658 00:30:26,820 --> 00:30:29,870 And we should see the same adorable cat. 659 00:30:29,870 --> 00:30:33,800 But this time, it lives in my own file, index.html. 660 00:30:33,800 --> 00:30:38,120 So I've written my own HTML locally on my own Mac, perhaps you on your own PC, 661 00:30:38,120 --> 00:30:41,270 but I've referenced, I've hyperlinked, if you will, 662 00:30:41,270 --> 00:30:46,700 to an image that's actually elsewhere on the internet via that actual URL. 663 00:30:46,700 --> 00:30:48,440 And notice the anomaly here-- 664 00:30:48,440 --> 00:30:51,920 what did I omit from my file this time, that I've 665 00:30:51,920 --> 00:30:54,150 had and every other example thus far? 666 00:30:54,150 --> 00:30:55,163 AUDIENCE: [INAUDIBLE] 667 00:30:55,163 --> 00:30:57,080 DAVID MALAN: Yeah, I didn't close the bracket. 668 00:30:57,080 --> 00:30:59,930 And there's a reason for this, because I could maybe 669 00:30:59,930 --> 00:31:03,200 do this, like open bracket slash img. 670 00:31:03,200 --> 00:31:07,610 It's just not really sensible, because you can't start putting an image here, 671 00:31:07,610 --> 00:31:09,660 and then eventually stop putting the image there. 672 00:31:09,660 --> 00:31:11,660 It's just all or nothing, really, with an image. 673 00:31:11,660 --> 00:31:13,310 Put it there or don't put it there. 674 00:31:13,310 --> 00:31:15,740 So the authors of HTML decided, you know what? 675 00:31:15,740 --> 00:31:17,263 That's just not necessary. 676 00:31:17,263 --> 00:31:18,680 So you don't need to include that. 677 00:31:18,680 --> 00:31:20,847 If you really want to be nit picky, you can actually 678 00:31:20,847 --> 00:31:22,280 do this shorthand notation. 679 00:31:22,280 --> 00:31:26,862 You can put a slash in between the close quote and the close bracket 680 00:31:26,862 --> 00:31:28,820 just to make super clear I know what I'm doing, 681 00:31:28,820 --> 00:31:31,190 I didn't just forget the close tag or the end tag. 682 00:31:31,190 --> 00:31:34,700 But most people would even omit that as just being unnecessary. 683 00:31:34,700 --> 00:31:39,230 So while most tags do have this symmetry, opening and closing them, 684 00:31:39,230 --> 00:31:43,800 image is among those that does not need that, in fact. 685 00:31:43,800 --> 00:31:47,690 So what if I wanted to access a cat that's actually on my own computer? 686 00:31:47,690 --> 00:31:49,370 Well, I did bring another cat with me. 687 00:31:49,370 --> 00:31:51,890 Let me go ahead and grab this from my desktop. 688 00:31:51,890 --> 00:31:56,060 And I happen to have a cat in advance called cat.jpg. 689 00:31:56,060 --> 00:31:58,880 And let me go ahead and save that on my desktop. 690 00:31:58,880 --> 00:32:02,690 So suppose that now, the image in question is not on the internet, 691 00:32:02,690 --> 00:32:07,790 but quite simply, it's in the same folder as image.html. 692 00:32:07,790 --> 00:32:10,820 In other words, on my Mac, on my PC, and eventually on my server, 693 00:32:10,820 --> 00:32:13,310 I can have not just one, but two, or three, or hundreds 694 00:32:13,310 --> 00:32:15,860 of files all in one or more folders. 695 00:32:15,860 --> 00:32:21,560 And if cat.jpg happens to be on my Mac in the same folder as image.html, 696 00:32:21,560 --> 00:32:23,690 this is what's called a relative link. 697 00:32:23,690 --> 00:32:27,560 The browser's going to assume that, when you want cat.jpg, oh, it 698 00:32:27,560 --> 00:32:29,300 must be in the current folder. 699 00:32:29,300 --> 00:32:32,690 And so if I save this now, knowing that that file is indeed 700 00:32:32,690 --> 00:32:37,800 on my desktop, along with this html file, and reload, I'll now have the-- 701 00:32:37,800 --> 00:32:39,080 oh, but it's not. 702 00:32:39,080 --> 00:32:43,310 I'll now have-- what did I do wrong here? 703 00:32:43,310 --> 00:32:51,640 [INAUDIBLE] 704 00:32:51,640 --> 00:32:52,630 Sorry. 705 00:32:52,630 --> 00:32:54,350 What is wrong here? 706 00:32:54,350 --> 00:32:55,990 Oh, I'm sorry. 707 00:32:55,990 --> 00:32:57,710 Put it on my desktop. 708 00:32:57,710 --> 00:33:01,900 So if I now store that cat on my desktop and hit reload, voila-- 709 00:33:01,900 --> 00:33:05,758 now I see a very popular cat on the internet, known as Grumpy Cat, 710 00:33:05,758 --> 00:33:06,550 filling the screen. 711 00:33:06,550 --> 00:33:08,467 This jpg happens to be larger than the others, 712 00:33:08,467 --> 00:33:11,020 so it's filling the browser screen a bit more, 713 00:33:11,020 --> 00:33:13,202 but indeed, the effect is exactly the same. 714 00:33:13,202 --> 00:33:15,160 Now, if I had lots of images, it would actually 715 00:33:15,160 --> 00:33:17,170 be conventional to store them in folders. 716 00:33:17,170 --> 00:33:20,200 And so if you, on your own Mac or PC, with your photography, 717 00:33:20,200 --> 00:33:24,010 decide to store all of your images in different folders, you can do that too. 718 00:33:24,010 --> 00:33:27,340 If cat.jpg were in a folder called, say, folder, 719 00:33:27,340 --> 00:33:29,470 you can literally say folder slash cat. 720 00:33:29,470 --> 00:33:33,100 Maybe you have a whole folder called cats inside that folder. 721 00:33:33,100 --> 00:33:36,190 So just like you've seen on your own Mac, or PC, or in URLs, 722 00:33:36,190 --> 00:33:40,720 you can actually separate the file name from the actual current file 723 00:33:40,720 --> 00:33:43,730 via one or more folders, as well. 724 00:33:43,730 --> 00:33:44,230 All right. 725 00:33:44,230 --> 00:33:47,500 So it's not quite sufficient though, generally, when designing a web 726 00:33:47,500 --> 00:33:50,230 page, just to put some image here. 727 00:33:50,230 --> 00:33:53,620 Increasingly, [? do you ?] want to help the browser help 728 00:33:53,620 --> 00:33:59,720 the human understand what the content of your web page actually is. 729 00:33:59,720 --> 00:34:01,750 And so for reasons of accessibility, is it ever 730 00:34:01,750 --> 00:34:06,730 so important these days to use tags and attributes that exist for this purpose. 731 00:34:06,730 --> 00:34:10,449 For instance, the alt attribute allows you to say something like this-- 732 00:34:10,449 --> 00:34:13,810 the alternative to this actual image, particularly 733 00:34:13,810 --> 00:34:17,469 for those who have difficulty seeing, or are blind, 734 00:34:17,469 --> 00:34:22,273 or who therefore need screen readers to help them visualize in their minds eye, 735 00:34:22,273 --> 00:34:25,190 [? what ?] another person might be able to see visually on the screen, 736 00:34:25,190 --> 00:34:26,949 you can use this alt attribute. 737 00:34:26,949 --> 00:34:29,320 And the alt, or alternative attribute says, 738 00:34:29,320 --> 00:34:32,170 display this text in lieu of this image for those 739 00:34:32,170 --> 00:34:33,940 who might prefer to see it textually. 740 00:34:33,940 --> 00:34:36,280 This is also useful if, for instance, the image 741 00:34:36,280 --> 00:34:39,940 is broken, or corrupted, or missing, as it was for me just a moment ago. 742 00:34:39,940 --> 00:34:43,270 I just saw briefly a broken icon on the screen, 743 00:34:43,270 --> 00:34:46,239 but had I included this alternative text from the get-go, 744 00:34:46,239 --> 00:34:49,480 I would have at least seen what the textual description of this image, 745 00:34:49,480 --> 00:34:52,400 is even in the absence of that image itself. 746 00:34:52,400 --> 00:34:56,020 So both for screen readers and for usability for folks on slow internet 747 00:34:56,020 --> 00:34:59,710 connections can you help them see text renderings of these things, 748 00:34:59,710 --> 00:35:03,220 as opposed to the original file itself. 749 00:35:03,220 --> 00:35:08,200 All right, so we're just about covering now most of the functionality 750 00:35:08,200 --> 00:35:08,920 you might want. 751 00:35:08,920 --> 00:35:11,337 Even though we've only just scratched the surface of HTML, 752 00:35:11,337 --> 00:35:13,700 these really are most of the building blocks already. 753 00:35:13,700 --> 00:35:16,400 Let's go out and do one other example here called link1.html. 754 00:35:16,400 --> 00:35:19,150 SPEAKER 1: Before you get there, David, can I just ask a question? 755 00:35:19,150 --> 00:35:20,712 DAVID MALAN: Sure. 756 00:35:20,712 --> 00:35:22,420 SPEAKER 1: Let's say I have my portfolio, 757 00:35:22,420 --> 00:35:25,720 and I want to put all my images on my website. 758 00:35:25,720 --> 00:35:26,720 Does it make sense to-- 759 00:35:26,720 --> 00:35:29,720 let's say I keep them on an external hard drive, or something like that. 760 00:35:29,720 --> 00:35:33,130 Do I need to move them to my folder, or can I link directly to them 761 00:35:33,130 --> 00:35:34,108 on the hard drive? 762 00:35:34,108 --> 00:35:35,650 Or where might you store your images? 763 00:35:35,650 --> 00:35:36,680 DAVID MALAN: So good question. 764 00:35:36,680 --> 00:35:39,555 So at the end of the day, if your website's going to live, of course, 765 00:35:39,555 --> 00:35:42,190 on the actual web-- at example.com or some other website, 766 00:35:42,190 --> 00:35:44,080 some domain name maybe that you've bought, 767 00:35:44,080 --> 00:35:47,410 or some third-party service that you have paid for an account on-- 768 00:35:47,410 --> 00:35:50,620 odds are you're going to drag and drop or somehow upload all of your HTML 769 00:35:50,620 --> 00:35:52,820 files, but also those same images. 770 00:35:52,820 --> 00:35:55,750 So if you have all of your photographs on some external hard drive 771 00:35:55,750 --> 00:36:00,940 or on own local disk, you're going to need to upload those to the internet. 772 00:36:00,940 --> 00:36:04,630 Since you can't have a website that's referencing your own Mac or PC, 773 00:36:04,630 --> 00:36:08,207 if your own Mac or PC are not acting as a server on the internet, 774 00:36:08,207 --> 00:36:10,540 it's not sufficient just to have an internet connection. 775 00:36:10,540 --> 00:36:12,540 You actually need to have a domain name pointing 776 00:36:12,540 --> 00:36:15,820 at your computer, which, odds are, your Mac and PC does not have. 777 00:36:15,820 --> 00:36:18,520 Alternatively, if you go ahead and upload your entire portfolio 778 00:36:18,520 --> 00:36:21,880 of photographs or videos to sites like Flickr, 779 00:36:21,880 --> 00:36:24,040 or Instagram, or any number of other sites, 780 00:36:24,040 --> 00:36:27,190 you can use the URLs of your images and videos 781 00:36:27,190 --> 00:36:30,280 on those third-party web servers, and link to them, 782 00:36:30,280 --> 00:36:33,603 just as I did my first cat that I found via Google Images. 783 00:36:33,603 --> 00:36:35,770 So assuming you indeed own the rights to that image, 784 00:36:35,770 --> 00:36:39,378 and therefore, the URL is your own, you can include that in your file, as well. 785 00:36:39,378 --> 00:36:40,170 SPEAKER 1: Awesome. 786 00:36:40,170 --> 00:36:42,618 And if I'm going to keep everything on my own computer, 787 00:36:42,618 --> 00:36:45,410 I want to keep everything in this kind of root folder, if you will, 788 00:36:45,410 --> 00:36:45,940 of my project. 789 00:36:45,940 --> 00:36:48,220 So I need to move anything from an external hard drive 790 00:36:48,220 --> 00:36:50,620 into this folder, where I've got the rest of my HTML, 791 00:36:50,620 --> 00:36:52,367 kind of the base level of the web page? 792 00:36:52,367 --> 00:36:53,200 DAVID MALAN: Indeed. 793 00:36:53,200 --> 00:36:55,510 You pretty much want all of your files, your media 794 00:36:55,510 --> 00:36:59,950 files to be relative to the HTML file-- so in the same folder as your HTML 795 00:36:59,950 --> 00:37:04,460 files, or in folders that are inside of the same folder as your HTML files. 796 00:37:04,460 --> 00:37:06,400 So you essentially want to think of a website 797 00:37:06,400 --> 00:37:10,270 as being one big folder that has everything, including all of your HTML 798 00:37:10,270 --> 00:37:14,920 files, and then optionally, any of your media files maybe in some subfolders, 799 00:37:14,920 --> 00:37:15,950 as well. 800 00:37:15,950 --> 00:37:16,690 Indeed. 801 00:37:16,690 --> 00:37:18,620 So of course, the whole web-- 802 00:37:18,620 --> 00:37:21,950 the hyperlinkability of the web is, indeed, about those hyperlinks. 803 00:37:21,950 --> 00:37:26,170 So thus far, we've only seen pretty static content, including that image. 804 00:37:26,170 --> 00:37:29,830 How do I go about actually linking a human from one website to another? 805 00:37:29,830 --> 00:37:32,110 Well, let's go ahead and do something like this. 806 00:37:32,110 --> 00:37:35,620 What if I want to encourage my visitors to visit something like Harvard? 807 00:37:35,620 --> 00:37:40,000 Well, of course, if I just save this file, link1.html, open up this 808 00:37:40,000 --> 00:37:43,060 in my browser as link1.html, I'm going to see, 809 00:37:43,060 --> 00:37:45,205 of course, just the text visit Harvard. 810 00:37:45,205 --> 00:37:47,290 So not all that interesting. 811 00:37:47,290 --> 00:37:49,900 But what if I want them to visit harvard.edu? 812 00:37:49,900 --> 00:37:54,880 OK, well, I could say visit harvard.edu, save that, reload. 813 00:37:54,880 --> 00:37:57,920 It tells them now a little more explicitly where I want them to visit, 814 00:37:57,920 --> 00:37:59,170 but that too is not clickable. 815 00:37:59,170 --> 00:38:01,198 It's just text, just like the word visit. 816 00:38:01,198 --> 00:38:02,990 Well, what if I get a little more specific, 817 00:38:02,990 --> 00:38:07,660 and I say visit www.harvard.edu, save that, reload? 818 00:38:07,660 --> 00:38:09,290 That too is not sufficient. 819 00:38:09,290 --> 00:38:13,540 Now, even though you and I are probably accustomed in emails, or Facebook, 820 00:38:13,540 --> 00:38:17,410 or other tools these days on the web just typing the short parts of URLs-- 821 00:38:17,410 --> 00:38:21,760 something.com or www.something.com-- and then the tool-- 822 00:38:21,760 --> 00:38:23,530 Facebook, or Twitter, or the like-- 823 00:38:23,530 --> 00:38:28,270 automatically turns it into a link for you, when writing your own HTML, 824 00:38:28,270 --> 00:38:31,810 you actually have to do that linking for your users. 825 00:38:31,810 --> 00:38:34,852 Twitter, and Facebook, and the like are doing that automatically for you, 826 00:38:34,852 --> 00:38:37,977 but there is nothing that's automatic when you're making your own web pages 827 00:38:37,977 --> 00:38:39,640 or you're building websites like that. 828 00:38:39,640 --> 00:38:41,690 You need to create the link yourself. 829 00:38:41,690 --> 00:38:44,620 So it's not sufficient just to say where you want the user to go, 830 00:38:44,620 --> 00:38:47,440 you need to enable them to go there as follows-- 831 00:38:47,440 --> 00:38:49,660 open bracket a, for anchor-- 832 00:38:49,660 --> 00:38:52,990 which is like, give me an anchor to some other web page right here. 833 00:38:52,990 --> 00:38:55,030 And have it reference, or more technically, 834 00:38:55,030 --> 00:38:57,400 hyper-reference the following URL. 835 00:38:57,400 --> 00:39:05,380 So href="http://www.harvard.edu". 836 00:39:05,380 --> 00:39:08,320 And then let me go ahead and close that tag, and then let me go ahead 837 00:39:08,320 --> 00:39:12,710 and say Harvard, and then close the whole thing like that. 838 00:39:12,710 --> 00:39:14,560 So again, notice the parallelism here. 839 00:39:14,560 --> 00:39:17,590 Open bracket a, for anchor, and then close bracket 840 00:39:17,590 --> 00:39:19,540 slash a, to close the tag. 841 00:39:19,540 --> 00:39:22,043 Notice that I don't repeat the attributes. 842 00:39:22,043 --> 00:39:25,210 This would be a bit silly if you had to literally write the same thing twice 843 00:39:25,210 --> 00:39:26,260 in two locations. 844 00:39:26,260 --> 00:39:28,960 So when closing a tag that has one or more attributes, 845 00:39:28,960 --> 00:39:31,240 you just close it by its name. 846 00:39:31,240 --> 00:39:35,170 But notice now that the value of the href inside of these quotes is 847 00:39:35,170 --> 00:39:39,760 the actual URL you want to send the user to, including the http://, 848 00:39:39,760 --> 00:39:42,010 which you and I probably don't typically type anymore, 849 00:39:42,010 --> 00:39:45,850 but is hidden there in the browser's URL bar. 850 00:39:45,850 --> 00:39:49,150 Let me go ahead now and save this file, reload the page. 851 00:39:49,150 --> 00:39:53,640 And voila, now, you see in the top left-hand corner "Visit Harvard," 852 00:39:53,640 --> 00:39:57,970 and it's indeed now hyperlinked in, perhaps, that familiar default blue. 853 00:39:57,970 --> 00:40:01,630 And if you hover over this without clicking on it, it's terribly subtle, 854 00:40:01,630 --> 00:40:03,520 but at the very bottom of your browser, odds 855 00:40:03,520 --> 00:40:06,250 are you'll see the actual destination that word 856 00:40:06,250 --> 00:40:08,650 or words are about to link to. 857 00:40:08,650 --> 00:40:09,760 And notice the dichotomy. 858 00:40:09,760 --> 00:40:15,340 Even though it's going to lead to www.harvard.edu, 859 00:40:15,340 --> 00:40:17,800 the human is only seeing the word Harvard. 860 00:40:17,800 --> 00:40:20,350 So you have complete control over what the human sees 861 00:40:20,350 --> 00:40:22,990 versus where he or she actually ends up. 862 00:40:22,990 --> 00:40:28,150 And even though I did correctly include http://, Chrome, and Safari, 863 00:40:28,150 --> 00:40:31,150 and other browsers these days, they're just starting to simplify things 864 00:40:31,150 --> 00:40:33,010 for humans. 865 00:40:33,010 --> 00:40:38,030 Google and Apple decided, eh, no one needs to see http:// all over 866 00:40:38,030 --> 00:40:38,530 the place. 867 00:40:38,530 --> 00:40:42,653 But you do need to write it when actually writing your HTML. 868 00:40:42,653 --> 00:40:44,320 But you could do a kind of a switcheroo. 869 00:40:44,320 --> 00:40:46,960 Harvard and Yale, for instance, are quite the rivals, 870 00:40:46,960 --> 00:40:49,495 so we could tell the user, go ahead and visit Yale. 871 00:40:49,495 --> 00:40:52,120 Reload this page, and it looks like you're about to visit Yale, 872 00:40:52,120 --> 00:40:54,790 but of course, if I click this link, where am I going to go? 873 00:40:54,790 --> 00:40:56,650 Well, harvard.edu. 874 00:40:56,650 --> 00:40:57,610 And as an aside-- 875 00:40:57,610 --> 00:40:59,230 and this is a whole can of worms-- 876 00:40:59,230 --> 00:41:01,570 if you've ever received an email that purports 877 00:41:01,570 --> 00:41:05,140 to being from your bank, or from PayPal, or some website like that, 878 00:41:05,140 --> 00:41:08,590 but it's actually spam, but it looks like it isn't, well, odds 879 00:41:08,590 --> 00:41:12,980 are they are trying to trick you into clicking a link that says one thing, 880 00:41:12,980 --> 00:41:15,880 but actually leads you to a malicious website, something 881 00:41:15,880 --> 00:41:18,750 that's been set up probably to steal your password, or the like. 882 00:41:18,750 --> 00:41:20,750 So even with these basic building blocks tonight 883 00:41:20,750 --> 00:41:24,530 do we see how even those kinds of techniques are possible. 884 00:41:24,530 --> 00:41:26,710 So if I click on Yale, I'm actually going 885 00:41:26,710 --> 00:41:30,430 to find myself, voila, at Harvard University here. 886 00:41:30,430 --> 00:41:34,360 But the takeaway, ultimately, is that to have a hyperlink from one place 887 00:41:34,360 --> 00:41:36,970 to another, all I need is a link like this. 888 00:41:36,970 --> 00:41:41,470 And let's back it up and actually put it as Harvard instead. 889 00:41:41,470 --> 00:41:44,170 Well, what if you want to link not to some third-party website, 890 00:41:44,170 --> 00:41:47,800 like harvard.edu or yale.edu, but what if I've got multiple pages, 891 00:41:47,800 --> 00:41:51,430 as you might for an assignment or final project, and you've made another file? 892 00:41:51,430 --> 00:41:53,620 And indeed, look at the top of VSCode for me. 893 00:41:53,620 --> 00:41:56,410 I have all of these other files already created. 894 00:41:56,410 --> 00:41:59,920 What if I want to create a link from this example 895 00:41:59,920 --> 00:42:01,720 to one of my more recent ones? 896 00:42:01,720 --> 00:42:05,590 Well, let me go ahead and create a new file called link2.html, 897 00:42:05,590 --> 00:42:08,050 just because this is my second example of links. 898 00:42:08,050 --> 00:42:12,430 And suppose I want to link the user not to harvard.edu, but to a file I 899 00:42:12,430 --> 00:42:14,110 created a moment ago-- that cat. 900 00:42:14,110 --> 00:42:17,350 And that cat was stored in image.html. 901 00:42:17,350 --> 00:42:20,440 And if I want to link the human to image.html, 902 00:42:20,440 --> 00:42:22,990 I can use what's called, again, a relative link. 903 00:42:22,990 --> 00:42:27,820 If image.html is in the same folder as this file, 904 00:42:27,820 --> 00:42:30,253 then I can just do quote unquote, "image.html," 905 00:42:30,253 --> 00:42:32,170 and when I click on this link, it's just going 906 00:42:32,170 --> 00:42:34,003 to open up that other file without me having 907 00:42:34,003 --> 00:42:36,130 to go to File, Open, like before. 908 00:42:36,130 --> 00:42:40,810 So if there's no http://, it's just going to assume that the destination is 909 00:42:40,810 --> 00:42:42,910 relative to where I currently am. 910 00:42:42,910 --> 00:42:43,880 So let's try this. 911 00:42:43,880 --> 00:42:47,290 Let me go ahead and open up link2.html. 912 00:42:47,290 --> 00:42:49,810 Notice that it says visit image.html. 913 00:42:49,810 --> 00:42:53,020 And if I click that, I should see the familiar cat. 914 00:42:53,020 --> 00:42:56,590 But let me go ahead and hit Back, just to be super clear here, and zoom in. 915 00:42:56,590 --> 00:42:59,320 At the moment, I am opening my file called 916 00:42:59,320 --> 00:43:02,620 link2.html, my second example involving links. 917 00:43:02,620 --> 00:43:05,320 My HTML says "Visit image.html." 918 00:43:05,320 --> 00:43:09,940 It happens to be purple now, because that's what browsers do by default. 919 00:43:09,940 --> 00:43:12,760 Once it colorizes them, typically purple by default, 920 00:43:12,760 --> 00:43:15,490 [? just is ?] as a visual cue that you've been there before, 921 00:43:15,490 --> 00:43:17,490 maybe don't bother clicking on it again. 922 00:43:17,490 --> 00:43:18,490 But notice what happens. 923 00:43:18,490 --> 00:43:21,850 If I click on this link, watch the URL bar. 924 00:43:21,850 --> 00:43:24,190 It's not going to keep me at link2.html, it's 925 00:43:24,190 --> 00:43:27,610 going to take me now to image.html. 926 00:43:27,610 --> 00:43:30,910 And if I zoom out, again, I'll see that familiar cat. 927 00:43:30,910 --> 00:43:32,830 So if you've visited a website, like all of us 928 00:43:32,830 --> 00:43:35,027 have, and you've clicked on a menu, or you've 929 00:43:35,027 --> 00:43:38,110 clicked on one link that leads you somewhere else that leads you somewhere 930 00:43:38,110 --> 00:43:41,570 else that leads you somewhere else, all that's going on underneath the hood, 931 00:43:41,570 --> 00:43:44,290 so to speak, is that the programmers at Facebook, 932 00:43:44,290 --> 00:43:46,480 or Google, or Apple, or other companies have 933 00:43:46,480 --> 00:43:50,530 written HTML like this that is linking you to relative URLs-- 934 00:43:50,530 --> 00:43:54,550 other files on their same server in that same folder-- 935 00:43:54,550 --> 00:43:59,300 so that you can have multiple web pages on the same websites. 936 00:43:59,300 --> 00:44:04,000 And those are, again, called relative URLs. 937 00:44:04,000 --> 00:44:04,810 All right. 938 00:44:04,810 --> 00:44:07,870 So how can we begin to tie some of these things together? 939 00:44:07,870 --> 00:44:11,470 For instance, suppose I want to have a landing page with links to everything 940 00:44:11,470 --> 00:44:12,137 we've done. 941 00:44:12,137 --> 00:44:12,970 Well, you know what? 942 00:44:12,970 --> 00:44:14,137 Let me go ahead and do this. 943 00:44:14,137 --> 00:44:17,590 Let me just go ahead and open up an example I did an advance here, 944 00:44:17,590 --> 00:44:20,350 and open up a file called index.html. 945 00:44:20,350 --> 00:44:24,550 As before, I propose that the default name for a web page 946 00:44:24,550 --> 00:44:26,590 is indeed index.html. 947 00:44:26,590 --> 00:44:28,870 And let's look at this complete example now, 948 00:44:28,870 --> 00:44:31,810 in the context of all the building blocks we've looked at thus far. 949 00:44:31,810 --> 00:44:34,840 So on the very first line of this file is my DOCTYPE declaration. 950 00:44:34,840 --> 00:44:35,590 That's a mouthful. 951 00:44:35,590 --> 00:44:38,560 This just says, hey, browser, here comes some HTML. 952 00:44:38,560 --> 00:44:41,590 This we've not seen before, but I've included this in the examples 953 00:44:41,590 --> 00:44:43,180 that we wrote in advance for you. 954 00:44:43,180 --> 00:44:46,390 In fact, all of tonight's examples, especially if I've been going fast, 955 00:44:46,390 --> 00:44:48,932 you'll be able to download after tonight, and play with them, 956 00:44:48,932 --> 00:44:51,850 modify them, build your own websites on top of them, if you'd like. 957 00:44:51,850 --> 00:44:54,520 This syntax here is what's known as a comment. 958 00:44:54,520 --> 00:44:55,540 So it's pretty cryptic-- 959 00:44:55,540 --> 00:45:01,330 open bracket exclamation point dash dash something, and then dash dash close 960 00:45:01,330 --> 00:45:03,550 bracket, with no exclamation point. 961 00:45:03,550 --> 00:45:05,320 Why this sequence of characters? 962 00:45:05,320 --> 00:45:09,040 Well, the authors of HTML years ago just decided, who in their right mind 963 00:45:09,040 --> 00:45:11,850 is ever going to want to type that sequence of characters? 964 00:45:11,850 --> 00:45:14,500 Let's use it as a special instruction saying this 965 00:45:14,500 --> 00:45:16,730 is a comment, a note to self. 966 00:45:16,730 --> 00:45:19,090 So if you just want to remember what is this file, 967 00:45:19,090 --> 00:45:21,160 well, this is my note to self it demonstrates 968 00:45:21,160 --> 00:45:24,880 a home page, a listing for all of the pages 969 00:45:24,880 --> 00:45:27,110 that might exist on a website-- like a menu. 970 00:45:27,110 --> 00:45:29,770 Most everything else should look pretty familiar, 971 00:45:29,770 --> 00:45:32,530 even though I'm now combining techniques. 972 00:45:32,530 --> 00:45:36,490 So you'll see that this tag on line 5 says, hey, browser, here comes my HTML, 973 00:45:36,490 --> 00:45:39,190 and it's written in English as the language. 974 00:45:39,190 --> 00:45:42,070 If I fast forward, you'll see the opposite of that, all the way 975 00:45:42,070 --> 00:45:45,670 down here, on the last line 24, close html. 976 00:45:45,670 --> 00:45:48,130 Here we'll see, as before, the head of the web page. 977 00:45:48,130 --> 00:45:49,600 The title here is index. 978 00:45:49,600 --> 00:45:51,560 And notice what I did this time. 979 00:45:51,560 --> 00:45:53,500 I decided that, eh, you know what? 980 00:45:53,500 --> 00:45:57,220 Whitespace doesn't matter, so I can hit Enter as many times, as I want 981 00:45:57,220 --> 00:45:59,510 and I can hit Tab as many times as I want, 982 00:45:59,510 --> 00:46:01,630 but it doesn't change what the title is. 983 00:46:01,630 --> 00:46:03,460 So I've just been a little more succinct. 984 00:46:03,460 --> 00:46:06,770 So instead of doing this, as I did in my previous example-- 985 00:46:06,770 --> 00:46:08,847 that's just kind of wasting lines-- 986 00:46:08,847 --> 00:46:10,930 I can pull that up, make it a little more compact. 987 00:46:10,930 --> 00:46:13,930 And arguably, it's no less readable, in this case. 988 00:46:13,930 --> 00:46:16,690 And in fact, all of this indentation that I've 989 00:46:16,690 --> 00:46:20,360 been typing and copying and pasting thus far does not matter. 990 00:46:20,360 --> 00:46:24,070 This is just for the benefit of us, the humans, the students, 991 00:46:24,070 --> 00:46:26,920 the colleagues who might be working collectively on a website. 992 00:46:26,920 --> 00:46:31,240 It's just so much easier to read this than if I deleted all of that space, 993 00:46:31,240 --> 00:46:35,110 and we just had one horrific file that had all of these tags 994 00:46:35,110 --> 00:46:36,367 all on the same line. 995 00:46:36,367 --> 00:46:37,450 The browser wouldn't care. 996 00:46:37,450 --> 00:46:40,420 It's a smart computer that can distinguish all of these tags 997 00:46:40,420 --> 00:46:41,140 from another. 998 00:46:41,140 --> 00:46:44,830 But all of this indentation is really helpful clues to myself 999 00:46:44,830 --> 00:46:48,700 to make sure that every tag I'm opening, I'm closing, if need be, 1000 00:46:48,700 --> 00:46:51,880 and I can understand what is inside of, or indented, 1001 00:46:51,880 --> 00:46:54,460 or nested inside of something else. 1002 00:46:54,460 --> 00:46:55,600 Well, let's go down here. 1003 00:46:55,600 --> 00:46:57,280 The body of my page comes next. 1004 00:46:57,280 --> 00:47:01,150 Inside the body, it looks like I have a heading that says John Harvard-- 1005 00:47:01,150 --> 00:47:03,250 the author of this website, presumably. 1006 00:47:03,250 --> 00:47:05,200 On this line 11, we have an h2-- 1007 00:47:05,200 --> 00:47:08,230 so a slightly smaller heading, a subtitle, if you will-- saying 1008 00:47:08,230 --> 00:47:10,030 welcome to my home page. 1009 00:47:10,030 --> 00:47:14,400 Then we see a new tag, but it turns out this is just a convention-- 1010 00:47:14,400 --> 00:47:15,340 nav. 1011 00:47:15,340 --> 00:47:17,920 You can maybe infer, navigation. 1012 00:47:17,920 --> 00:47:21,640 So typically on websites, if you have a whole bunch of links to menu options, 1013 00:47:21,640 --> 00:47:24,610 you'll actually wrap them in a tag called nav. 1014 00:47:24,610 --> 00:47:28,360 It doesn't display any differently, it's just kind of a visual clue. 1015 00:47:28,360 --> 00:47:31,150 Because especially these days, browsers have gotten much better 1016 00:47:31,150 --> 00:47:33,700 at understanding the layout of websites, whether it's 1017 00:47:33,700 --> 00:47:37,210 for reasons of screen readers or accessibility more generally. 1018 00:47:37,210 --> 00:47:40,240 So nav it's just a hard coded clue to the computer, 1019 00:47:40,240 --> 00:47:44,650 hey, here comes the menu, so help the user navigate this page as needed 1020 00:47:44,650 --> 00:47:48,970 via the following lines of code inside of this navigation. 1021 00:47:48,970 --> 00:47:50,170 Well, what are those lines? 1022 00:47:50,170 --> 00:47:53,020 Well, here is just an unordered list of links-- 1023 00:47:53,020 --> 00:47:54,820 so a bulleted list, if you will. 1024 00:47:54,820 --> 00:47:56,800 And notice now the nesting. 1025 00:47:56,800 --> 00:47:59,530 Open bracket li says here comes a list item. 1026 00:47:59,530 --> 00:48:03,280 Then inside of this list item I have, it would seem, a link-- 1027 00:48:03,280 --> 00:48:05,080 for instance, to hello.html. 1028 00:48:05,080 --> 00:48:06,700 And that example's called hello. 1029 00:48:06,700 --> 00:48:11,650 Then I close this tag, then I close the outermost tag. 1030 00:48:11,650 --> 00:48:13,480 So again, everything is symmetric. 1031 00:48:13,480 --> 00:48:19,600 If I open li then I open a, I must reverse and close A, close li. 1032 00:48:19,600 --> 00:48:21,850 And so you'll see that symmetry is preserved. 1033 00:48:21,850 --> 00:48:22,630 And that's it. 1034 00:48:22,630 --> 00:48:26,350 Then I go ahead and close the list, close the nav, close the body, 1035 00:48:26,350 --> 00:48:28,450 close the HTML. 1036 00:48:28,450 --> 00:48:31,840 So let's go ahead and open this file index.html, 1037 00:48:31,840 --> 00:48:35,710 which again, is a list of links to everything else we've done thus far. 1038 00:48:35,710 --> 00:48:38,170 And it's super simple, but it does combine 1039 00:48:38,170 --> 00:48:39,790 all of these basic building blocks. 1040 00:48:39,790 --> 00:48:43,060 I've got hello, paragraphs, headings, unordered, ordered, image, and link. 1041 00:48:43,060 --> 00:48:45,100 And if I click on any of those actual links, 1042 00:48:45,100 --> 00:48:47,650 well, I'd be whisked away to those individual pages. 1043 00:48:47,650 --> 00:48:48,940 And why is this one purple? 1044 00:48:48,940 --> 00:48:54,105 Well, just a moment ago did I open, did I start with that same file hello.html. 1045 00:48:54,105 --> 00:48:57,790 1046 00:48:57,790 --> 00:49:01,600 Any questions then on these building blocks, thus far? 1047 00:49:01,600 --> 00:49:04,462 1048 00:49:04,462 --> 00:49:06,850 Yeah? 1049 00:49:06,850 --> 00:49:12,920 AUDIENCE: Can you link one website to another [INAUDIBLE]?? 1050 00:49:12,920 --> 00:49:15,550 DAVID MALAN: You absolutely-- 1051 00:49:15,550 --> 00:49:18,770 the question is, can you link one website to another 1052 00:49:18,770 --> 00:49:20,380 if they're not in the same folder? 1053 00:49:20,380 --> 00:49:21,790 So let me distinguish the terms. 1054 00:49:21,790 --> 00:49:24,700 If you want to link from one website to another website, 1055 00:49:24,700 --> 00:49:26,150 you can do that via its URL-- 1056 00:49:26,150 --> 00:49:30,380 http://-- and that means the web page is on a completely different server. 1057 00:49:30,380 --> 00:49:34,930 so yes, that absolutely works, just like my link to harvard.edu. 1058 00:49:34,930 --> 00:49:38,120 If you want to link from one web page to another, 1059 00:49:38,120 --> 00:49:42,880 they can be in the same folder, sure, or they can be in subfolders, 1060 00:49:42,880 --> 00:49:45,610 as by saying, quote, unquote "folder slash sub 1061 00:49:45,610 --> 00:49:48,100 folder slash something that html." 1062 00:49:48,100 --> 00:49:49,700 It can even be higher up. 1063 00:49:49,700 --> 00:49:53,800 So you can actually use what's known as double dot notation. 1064 00:49:53,800 --> 00:49:57,430 Dot dot slash means go up higher in my hard drive 1065 00:49:57,430 --> 00:49:59,200 to go into some other folder. 1066 00:49:59,200 --> 00:50:01,630 So short answer, yes, they can on your drive, 1067 00:50:01,630 --> 00:50:05,660 if you know the relative location. 1068 00:50:05,660 --> 00:50:09,830 All right, let's do one other example before we take a short break. 1069 00:50:09,830 --> 00:50:12,300 How do sites like Google work? 1070 00:50:12,300 --> 00:50:16,970 Well, let's go ahead and take up that loaded question as by opening, 1071 00:50:16,970 --> 00:50:19,970 for instance, Google itself, at google.com. 1072 00:50:19,970 --> 00:50:22,520 And today, the web page happens to look like this. 1073 00:50:22,520 --> 00:50:25,520 Well, it turns out that all this time you've been using Google, or Bing, 1074 00:50:25,520 --> 00:50:29,210 or whatever your favorite search engine is, odds are, in Chrome, or Edge, 1075 00:50:29,210 --> 00:50:32,900 or Safari, or Firefox, whatever you use, if you poke around the menu options, 1076 00:50:32,900 --> 00:50:36,080 you will see some options somewhere that probably 1077 00:50:36,080 --> 00:50:38,660 is called something like View Source. 1078 00:50:38,660 --> 00:50:42,530 And if, indeed, I go and click View Source, in my case, in Chrome, 1079 00:50:42,530 --> 00:50:45,140 you'll see this crazy list of output. 1080 00:50:45,140 --> 00:50:46,970 It's a huge amount of content. 1081 00:50:46,970 --> 00:50:49,160 And if I zoom through there, you'll actually 1082 00:50:49,160 --> 00:50:53,010 see the code that composes Google's home page. 1083 00:50:53,010 --> 00:50:55,700 Now, a lot of this is written in a language called JavaScript. 1084 00:50:55,700 --> 00:50:57,500 More on that in a future lecture. 1085 00:50:57,500 --> 00:51:01,460 But inside of that file, ultimately, is also HTML. 1086 00:51:01,460 --> 00:51:05,180 And it's a mess here, because, again, browsers don't care about whitespace. 1087 00:51:05,180 --> 00:51:07,040 They're going to ignore most of it anyway. 1088 00:51:07,040 --> 00:51:10,670 And Google actually, for efficiency, doesn't even use whitespace 1089 00:51:10,670 --> 00:51:12,170 when it's not needed in their files. 1090 00:51:12,170 --> 00:51:12,760 Why? 1091 00:51:12,760 --> 00:51:17,960 Google's just so big and so popular that, if they are spending time 1092 00:51:17,960 --> 00:51:21,950 adding spaces to their HTML files, those spaces 1093 00:51:21,950 --> 00:51:24,817 need to be transmitted over the internet as bytes, so to speak, 1094 00:51:24,817 --> 00:51:26,900 and that's just going to cost them time and money. 1095 00:51:26,900 --> 00:51:29,360 So in short, for efficiency, some of the biggest companies 1096 00:51:29,360 --> 00:51:32,438 out, there they don't pretty print their HTML, as I've been doing. 1097 00:51:32,438 --> 00:51:35,480 They don't indent it, they don't make sure everything's tabbed in nicely. 1098 00:51:35,480 --> 00:51:36,350 Because why? 1099 00:51:36,350 --> 00:51:38,252 That just adds bloat to the files. 1100 00:51:38,252 --> 00:51:40,460 But for us, and for smaller websites, not a big deal. 1101 00:51:40,460 --> 00:51:43,427 And it's much more important that we humans be able to read it. 1102 00:51:43,427 --> 00:51:45,260 Let me approach this from a different angle. 1103 00:51:45,260 --> 00:51:49,820 Let me go to View, Developer, and not View Source, but Developer Tools. 1104 00:51:49,820 --> 00:51:52,040 Because one of the nice things about modern browsers 1105 00:51:52,040 --> 00:51:53,720 is that they allow you to do this-- 1106 00:51:53,720 --> 00:51:57,290 there's typically a tab called Elements, or something like it. 1107 00:51:57,290 --> 00:52:00,050 And what this tool within Google Chrome does 1108 00:52:00,050 --> 00:52:04,280 is it actually reads that HTML top to bottom, left to right, but rather 1109 00:52:04,280 --> 00:52:08,190 than show it to you the way Google intended, with no whitespace, 1110 00:52:08,190 --> 00:52:11,840 it magically adds whitespace, it adds syntax highlighting-- 1111 00:52:11,840 --> 00:52:14,540 that is, the colorization-- just to help me, the human, 1112 00:52:14,540 --> 00:52:16,970 wrap my mind around what's going on. 1113 00:52:16,970 --> 00:52:21,150 So literally, this is the HTML code for Google's home page. 1114 00:52:21,150 --> 00:52:25,358 There's an open bracket HTML, there's an itemscope and itemtype attribute-- 1115 00:52:25,358 --> 00:52:26,150 whatever those are. 1116 00:52:26,150 --> 00:52:27,983 We haven't looked at them, but indeed, there 1117 00:52:27,983 --> 00:52:30,050 are other attributes you can use in HTML. 1118 00:52:30,050 --> 00:52:33,890 lang="en" is appropriate, because this is indeed written in English, 1119 00:52:33,890 --> 00:52:35,790 because I'm on the US version of the site. 1120 00:52:35,790 --> 00:52:37,212 Here's the head, dot dot dot. 1121 00:52:37,212 --> 00:52:39,920 And if I click that little triangle, I could look inside the head 1122 00:52:39,920 --> 00:52:41,530 and find the title of the web page. 1123 00:52:41,530 --> 00:52:43,370 Here's the body in purple here. 1124 00:52:43,370 --> 00:52:45,320 There's this other attribute called class-- 1125 00:52:45,320 --> 00:52:46,620 more on that in a moment. 1126 00:52:46,620 --> 00:52:50,750 But in short, all of the purple words you see here are HTML tags-- 1127 00:52:50,750 --> 00:52:52,520 and we'll see a few more over time-- 1128 00:52:52,520 --> 00:52:56,990 and they allow Google to present to you this search interface. 1129 00:52:56,990 --> 00:53:01,340 But it's important to note that the real secret source of Google is not an HTML. 1130 00:53:01,340 --> 00:53:05,150 Anytime you visit someone's website, you can look at their HTML. 1131 00:53:05,150 --> 00:53:08,210 You can see the source code for that website. 1132 00:53:08,210 --> 00:53:10,880 And so even though it's, indeed, their intellectual property, 1133 00:53:10,880 --> 00:53:14,490 typically, there's not really that much sophistication to HTML. 1134 00:53:14,490 --> 00:53:17,828 It's not a programming language with which you create applications, 1135 00:53:17,828 --> 00:53:20,870 it's just a markup language that shows you how to show text on the screen 1136 00:53:20,870 --> 00:53:22,250 and where to show it. 1137 00:53:22,250 --> 00:53:26,120 The real secret source for most websites is, of course, on the server. 1138 00:53:26,120 --> 00:53:30,350 Google is a powerful entity because they have so much data in their database. 1139 00:53:30,350 --> 00:53:32,900 This is just the user interface, or the front end 1140 00:53:32,900 --> 00:53:34,510 via which to access that information. 1141 00:53:34,510 --> 00:53:37,010 So just for demonstration's sake, let me go ahead and search 1142 00:53:37,010 --> 00:53:39,620 for one more cat and hit Enter. 1143 00:53:39,620 --> 00:53:43,340 And you'll notice, of course, that the URL, like most websites, changed-- 1144 00:53:43,340 --> 00:53:45,715 and it's, frankly, changed to be something super cryptic. 1145 00:53:45,715 --> 00:53:47,132 But you know what I'm going to do? 1146 00:53:47,132 --> 00:53:50,360 I'm going to go ahead and delete most everything I don't understand. 1147 00:53:50,360 --> 00:53:53,000 And there's the key word I do understand, cat. 1148 00:53:53,000 --> 00:53:56,360 So I'm going to go ahead and delete most of what's in the URL, 1149 00:53:56,360 --> 00:53:57,890 after searching for cat. 1150 00:53:57,890 --> 00:53:59,430 And I'm going to hit Enter again. 1151 00:53:59,430 --> 00:54:01,550 And it turns out this still works. 1152 00:54:01,550 --> 00:54:04,990 And indeed, when Google was invented back in like 1999, 1153 00:54:04,990 --> 00:54:10,040 in its very first, simplest version, this is all it essentially supported. 1154 00:54:10,040 --> 00:54:13,550 It supports your URLs that ended with the word search. 1155 00:54:13,550 --> 00:54:18,230 And then, if you added a question mark and then 1156 00:54:18,230 --> 00:54:21,920 a q for query, an equals sign, and then a keyword, 1157 00:54:21,920 --> 00:54:27,200 that is what the database will search for and spit out results for. 1158 00:54:27,200 --> 00:54:28,970 So everything you see here below-- 1159 00:54:28,970 --> 00:54:31,070 these images, the blue text, the green text, 1160 00:54:31,070 --> 00:54:32,612 and the gray text-- that's just HTML. 1161 00:54:32,612 --> 00:54:34,362 And we'll see in a little bit that there's 1162 00:54:34,362 --> 00:54:37,280 different ways to make different font sizes, and colors, and the like. 1163 00:54:37,280 --> 00:54:40,910 This is just HTML, but the real secret sauce is on Google's servers 1164 00:54:40,910 --> 00:54:44,360 somewhere that is searching their entire database for all the cats in the world. 1165 00:54:44,360 --> 00:54:46,303 But let me go ahead and change this manually. 1166 00:54:46,303 --> 00:54:48,470 I'm not using Google's interface, I'm literally just 1167 00:54:48,470 --> 00:54:53,540 changing the URL to say dog, q equals dog, and hit Enter. 1168 00:54:53,540 --> 00:54:57,410 And now, I'll get back a whole bunch of search results about dogs. 1169 00:54:57,410 --> 00:55:02,150 This is to say that URLs on the internet support what 1170 00:55:02,150 --> 00:55:05,170 are called parameters, these special keywords you 1171 00:55:05,170 --> 00:55:07,750 can put after a question mark into URL that 1172 00:55:07,750 --> 00:55:11,110 provide special input to the website. 1173 00:55:11,110 --> 00:55:13,660 And those are typically generated by filling out forms, 1174 00:55:13,660 --> 00:55:16,270 but for our purposes for now, just know that you 1175 00:55:16,270 --> 00:55:20,710 can modify the behavior of a URL by changing keywords 1176 00:55:20,710 --> 00:55:22,753 that come after the question mark. 1177 00:55:22,753 --> 00:55:24,670 And we're going to see this as a powerful tool 1178 00:55:24,670 --> 00:55:28,630 when it comes time to do something like embed a YouTube video on own website. 1179 00:55:28,630 --> 00:55:31,870 If I understand these HTTP parameters, these keywords that 1180 00:55:31,870 --> 00:55:34,090 come after the question mark, I can actually 1181 00:55:34,090 --> 00:55:38,600 exercise more control over how I'm embedding videos in my own website. 1182 00:55:38,600 --> 00:55:40,600 Let's go ahead and take a few minute break here. 1183 00:55:40,600 --> 00:55:43,630 And when we come back, we'll introduce a second language called CSS-- 1184 00:55:43,630 --> 00:55:45,430 Cascading Style Sheets-- and that's where 1185 00:55:45,430 --> 00:55:49,150 we can really make our web pages look all the more beautiful. 1186 00:55:49,150 --> 00:55:51,820 All right, so that is HTML. 1187 00:55:51,820 --> 00:55:55,020 And even though we'll see a few more tags along the way this evening, 1188 00:55:55,020 --> 00:55:56,770 those are pretty much the building blocks. 1189 00:55:56,770 --> 00:55:58,210 You have this notion of tags. 1190 00:55:58,210 --> 00:56:02,597 Some tags can have attributes, and sometimes can or can't be closed, 1191 00:56:02,597 --> 00:56:03,430 and that's about it. 1192 00:56:03,430 --> 00:56:06,190 Here on out, now that you have been equipped really with those 1193 00:56:06,190 --> 00:56:09,490 fundamentals will you find that by looking 1194 00:56:09,490 --> 00:56:11,410 at any number of online references will you 1195 00:56:11,410 --> 00:56:15,070 begin to fill in the blanks of the vocabulary that is HTML. 1196 00:56:15,070 --> 00:56:18,460 We pretty much have presented you the entire grammar, the set of rules, 1197 00:56:18,460 --> 00:56:19,162 and so forth. 1198 00:56:19,162 --> 00:56:22,120 And now, it's just a matter of, indeed, vocabulary, learning a few more 1199 00:56:22,120 --> 00:56:24,730 tags here or there to see what more that language can do. 1200 00:56:24,730 --> 00:56:27,040 And we'll see a few more such techniques along the way. 1201 00:56:27,040 --> 00:56:29,380 But what we haven't really seen yet is the ability 1202 00:56:29,380 --> 00:56:31,930 to really refine the aesthetics of a web page. 1203 00:56:31,930 --> 00:56:36,490 I got a pretty default bulleted list, a pretty default numbered list. 1204 00:56:36,490 --> 00:56:39,410 I got a pretty default blue link and purple links. 1205 00:56:39,410 --> 00:56:43,150 It would be nice, certainly, if I could create far more control over my web 1206 00:56:43,150 --> 00:56:46,360 page, much like the popular websites you yourself visit. 1207 00:56:46,360 --> 00:56:50,860 And the way you do that is via CSS, Cascading Style Sheets. 1208 00:56:50,860 --> 00:56:54,850 This is a second, separate language that is related to HTML, 1209 00:56:54,850 --> 00:56:56,450 but has a slightly different syntax. 1210 00:56:56,450 --> 00:57:00,160 But it's relatively straightforward to integrate into your HTML. 1211 00:57:00,160 --> 00:57:02,840 And we'll see now how we can go about doing that. 1212 00:57:02,840 --> 00:57:04,450 So let's first tee up a problem. 1213 00:57:04,450 --> 00:57:07,420 If I go ahead and open up my text editor here, VSCode, 1214 00:57:07,420 --> 00:57:13,570 I've pre-created a file called css1.html as representative of my very first CSS 1215 00:57:13,570 --> 00:57:14,457 example. 1216 00:57:14,457 --> 00:57:16,540 I'm going to go ahead, and in the body of my page, 1217 00:57:16,540 --> 00:57:20,860 I'm going to create a few new tags known as the header tag-- 1218 00:57:20,860 --> 00:57:22,235 not to be confused with the head. 1219 00:57:22,235 --> 00:57:24,110 And in here I'm going to say something like-- 1220 00:57:24,110 --> 00:57:26,410 John Harvard shall be the header of this web page, 1221 00:57:26,410 --> 00:57:28,690 making another home page for this fellow. 1222 00:57:28,690 --> 00:57:31,120 And then I'm going to say that the main part of my page 1223 00:57:31,120 --> 00:57:35,840 is going to say something like welcome to my home page, as before. 1224 00:57:35,840 --> 00:57:37,600 And then close the main part of the page. 1225 00:57:37,600 --> 00:57:39,392 And then, perhaps not surprisingly, there's 1226 00:57:39,392 --> 00:57:44,050 a tag called footer, where I can say something like copyright, let's say, 1227 00:57:44,050 --> 00:57:45,430 John Harvard. 1228 00:57:45,430 --> 00:57:47,507 And then over here, I'll close that tag. 1229 00:57:47,507 --> 00:57:49,840 So we haven't seen these tags yet, but they're, perhaps, 1230 00:57:49,840 --> 00:57:51,100 a bit self-explanatory. 1231 00:57:51,100 --> 00:57:53,080 Header, main, and footer-- 1232 00:57:53,080 --> 00:57:55,080 these are generally known as semantic tags 1233 00:57:55,080 --> 00:57:58,480 in HTML, which means that they have no effect visually 1234 00:57:58,480 --> 00:58:02,410 on the web page, other than to give you different sections of the web page. 1235 00:58:02,410 --> 00:58:05,350 But they do have semantic meaning, so that when the browser's trying 1236 00:58:05,350 --> 00:58:08,830 to better understand what the pages for accessibility purposes, 1237 00:58:08,830 --> 00:58:11,022 or optimization purposes-- especially on mobile, 1238 00:58:11,022 --> 00:58:14,230 you might want to see the main part of the page far more than you want to see 1239 00:58:14,230 --> 00:58:15,010 the footer-- 1240 00:58:15,010 --> 00:58:19,090 having these sort of semantic clues in your HTML just 1241 00:58:19,090 --> 00:58:22,640 helps the browser understand what it is it's looking at. 1242 00:58:22,640 --> 00:58:26,470 So when I look at this file now, I'm not going to see a terribly interesting web 1243 00:58:26,470 --> 00:58:27,730 page yet. 1244 00:58:27,730 --> 00:58:34,420 Let me go ahead and hit Save, open up my browser, and go into css1.html. 1245 00:58:34,420 --> 00:58:36,100 And I'll see, quite simply, this-- 1246 00:58:36,100 --> 00:58:39,215 John Harvard, welcome to my home page, copyright John Harvard. 1247 00:58:39,215 --> 00:58:41,590 All of the text, though, seems [? to be identical, ?] but 1248 00:58:41,590 --> 00:58:43,190 it is on separate lines. 1249 00:58:43,190 --> 00:58:46,420 So it's kind of like paragraph tags, but there's no gaps between the lines 1250 00:58:46,420 --> 00:58:47,110 right now. 1251 00:58:47,110 --> 00:58:49,240 These are really just like invisible rectangles 1252 00:58:49,240 --> 00:58:52,870 going across the screen that separate my header from the main part 1253 00:58:52,870 --> 00:58:54,800 from the footer of the web page. 1254 00:58:54,800 --> 00:58:56,180 Well, do one thing first. 1255 00:58:56,180 --> 00:58:59,830 It would be nice, frankly, in HTML if we could get a proper copyright symbol-- 1256 00:58:59,830 --> 00:59:02,890 (c) isn't quite it. 1257 00:59:02,890 --> 00:59:07,390 Unfortunately, on my US keyboard, I'm not aware of any copyright symbol 1258 00:59:07,390 --> 00:59:08,140 that I could type. 1259 00:59:08,140 --> 00:59:10,180 I certainly don't know the special keystroke. 1260 00:59:10,180 --> 00:59:13,660 So it turns out that HTML supports what are called entities. 1261 00:59:13,660 --> 00:59:17,440 And an entity is a very cryptic code that you would generally look up 1262 00:59:17,440 --> 00:59:19,240 and an online reference or in a book. 1263 00:59:19,240 --> 00:59:26,290 And it turns out that the code for the copyright symbol in HTML is number 169, 1264 00:59:26,290 --> 00:59:29,570 and you flank it with an ampersand and a semicolon. 1265 00:59:29,570 --> 00:59:33,820 So this says, hey, browser, here comes in HTML entity, so to speak. 1266 00:59:33,820 --> 00:59:36,610 The number of that entity is 169. 1267 00:59:36,610 --> 00:59:39,100 And then semicolon means that's it for the entity. 1268 00:59:39,100 --> 00:59:41,980 So slightly different syntax, but this is a special code 1269 00:59:41,980 --> 00:59:46,720 that now, if I reload my page, notice that I get, albeit small, 1270 00:59:46,720 --> 00:59:48,348 a proper copyright symbol. 1271 00:59:48,348 --> 00:59:50,140 And there's other such symbols that you can 1272 00:59:50,140 --> 00:59:54,580 imagine, from shapes, to other punctuation symbols, 1273 00:59:54,580 --> 00:59:58,780 to special symbology like that one there. 1274 00:59:58,780 --> 01:00:00,520 So that's just a minor touch up. 1275 01:00:00,520 --> 01:00:02,860 What if I actually want to go ahead and style this page? 1276 01:00:02,860 --> 01:00:06,500 Well, it turns out that you can, on many tags in HTML-- 1277 01:00:06,500 --> 01:00:08,330 including header, main, and footer-- 1278 01:00:08,330 --> 01:00:10,130 use the style attribute. 1279 01:00:10,130 --> 01:00:12,840 And you can say, I want the style of the header of my web page 1280 01:00:12,840 --> 01:00:16,370 to have a large font size, and then, you know 1281 01:00:16,370 --> 01:00:20,030 what-- go ahead and align the text in the center. 1282 01:00:20,030 --> 01:00:22,580 So notice the syntax here's a little new, 1283 01:00:22,580 --> 01:00:26,855 but I have flanked both sides with an open quote and a close quote. 1284 01:00:26,855 --> 01:00:29,480 I could have used single quotes-- so long as you're consistent. 1285 01:00:29,480 --> 01:00:31,850 And notice slightly new syntax now in orange-- 1286 01:00:31,850 --> 01:00:35,480 font-size, and then some value. 1287 01:00:35,480 --> 01:00:38,570 Then a semicolon, which, just like the entity, means end of thought. 1288 01:00:38,570 --> 01:00:40,580 It's like a period in an English sentence. 1289 01:00:40,580 --> 01:00:43,970 A semicolon here is like a period in a more technical sentence, using 1290 01:00:43,970 --> 01:00:45,710 this syntax here. 1291 01:00:45,710 --> 01:00:49,100 text-dash: center means, how do you want to line the text? 1292 01:00:49,100 --> 01:00:52,102 Well, the value of that shall be center. 1293 01:00:52,102 --> 01:00:54,560 Strictly speaking, you don't need the semicolon at the end, 1294 01:00:54,560 --> 01:00:56,180 but I did it for symmetry there. 1295 01:00:56,180 --> 01:00:58,430 So what you're looking at, that I've highlighted here, 1296 01:00:58,430 --> 01:01:00,090 is exactly that other language-- 1297 01:01:00,090 --> 01:01:02,630 CSS, Cascading Style Sheets. 1298 01:01:02,630 --> 01:01:05,570 It's a tiny little example of it, but this 1299 01:01:05,570 --> 01:01:10,850 is to say that the HTML attribute called style, as all of the attributes we've 1300 01:01:10,850 --> 01:01:13,370 seen, can take a value that's quoted. 1301 01:01:13,370 --> 01:01:15,350 The value of the style attribute, though, 1302 01:01:15,350 --> 01:01:18,770 can be written not in HTML, per se, not even in English, 1303 01:01:18,770 --> 01:01:23,150 per se, but specifically in CSS, Cascading Style Sheets. 1304 01:01:23,150 --> 01:01:25,280 And this language is actually relatively simple. 1305 01:01:25,280 --> 01:01:28,100 Even though it too has a big vocabulary, it is entirely 1306 01:01:28,100 --> 01:01:31,380 based on keys and values, so to speak-- 1307 01:01:31,380 --> 01:01:34,880 or more technically, properties followed by a colon, and then 1308 01:01:34,880 --> 01:01:36,800 the value of that property. 1309 01:01:36,800 --> 01:01:38,773 And you would only know what properties exist 1310 01:01:38,773 --> 01:01:41,690 by looking it up in a book, or an online reference, or taking a class. 1311 01:01:41,690 --> 01:01:44,360 font-size is one available CSS property. 1312 01:01:44,360 --> 01:01:46,970 text-align line is another available CSS property. 1313 01:01:46,970 --> 01:01:51,110 And the possible values completely depend on the properties themselves. 1314 01:01:51,110 --> 01:01:54,770 You can do large, small, medium, or few other things, as well. 1315 01:01:54,770 --> 01:01:58,490 You can do center, left, right, or justify, or a few other things, 1316 01:01:58,490 --> 01:01:59,030 as well. 1317 01:01:59,030 --> 01:02:01,405 You would only know that by looking it up in a reference. 1318 01:02:01,405 --> 01:02:03,500 But for our purposes right now, the key is 1319 01:02:03,500 --> 01:02:08,390 that the structure is something colon something semicolon, and then 1320 01:02:08,390 --> 01:02:10,560 optionally, repeat again and again. 1321 01:02:10,560 --> 01:02:13,055 So let me go ahead and try this out elsewhere too. 1322 01:02:13,055 --> 01:02:15,680 Let me go ahead here, and on the main part of my web page, say, 1323 01:02:15,680 --> 01:02:17,870 let's go ahead and make the font size medium. 1324 01:02:17,870 --> 01:02:21,410 And then again, text-align in the center. 1325 01:02:21,410 --> 01:02:24,350 And then lastly, in my footer, that's like the least important part 1326 01:02:24,350 --> 01:02:27,100 of my page, so I'm going to say font-size small text-align center. 1327 01:02:27,100 --> 01:02:29,510 1328 01:02:29,510 --> 01:02:30,390 Save it. 1329 01:02:30,390 --> 01:02:32,870 Now, I'm going to go back to the browser, reload the page. 1330 01:02:32,870 --> 01:02:36,860 And voila, looks similar, but now everything is nicely centered. 1331 01:02:36,860 --> 01:02:38,720 John Harvard's a little bigger than welcome 1332 01:02:38,720 --> 01:02:41,450 to my home page, which is a little bigger than the copyright. 1333 01:02:41,450 --> 01:02:44,220 So I've begun to stylized it in this way. 1334 01:02:44,220 --> 01:02:45,890 But there's a bunch of redundancy. 1335 01:02:45,890 --> 01:02:48,650 And in computer science, and in programming more generally, 1336 01:02:48,650 --> 01:02:52,283 redundancy is not a good thing, because it makes you more vulnerable to typos. 1337 01:02:52,283 --> 01:02:54,950 You might make a mistake in one place that you don't in another. 1338 01:02:54,950 --> 01:02:57,200 It makes it harder to change things, because you 1339 01:02:57,200 --> 01:02:59,540 might have to change your code in multiple places, 1340 01:02:59,540 --> 01:03:01,110 instead of just one place. 1341 01:03:01,110 --> 01:03:03,350 And so what's redundant here? 1342 01:03:03,350 --> 01:03:06,020 Well, my font sizes are varying-- 1343 01:03:06,020 --> 01:03:07,280 large, medium, and small. 1344 01:03:07,280 --> 01:03:09,740 So that's fine, but it seems a little lame 1345 01:03:09,740 --> 01:03:13,190 that I have text-align center, text-align center, text-align center. 1346 01:03:13,190 --> 01:03:16,040 It would be nice just to factor that out somehow, and say 1347 01:03:16,040 --> 01:03:19,160 text-align all of this in the center. 1348 01:03:19,160 --> 01:03:20,480 Well, how can you do that? 1349 01:03:20,480 --> 01:03:24,530 Well, notice that header, and main, and footer are all children, so to speak. 1350 01:03:24,530 --> 01:03:29,030 They're sort of like a family tree, nested inside of or indented inside 1351 01:03:29,030 --> 01:03:33,050 of body, which is to say that header is in body, main is in body, 1352 01:03:33,050 --> 01:03:34,160 and footer is in body. 1353 01:03:34,160 --> 01:03:35,220 So you know what? 1354 01:03:35,220 --> 01:03:37,700 Why don't I do this-- let me go ahead and copy this code, 1355 01:03:37,700 --> 01:03:41,720 put it in a file called css2.html, as my second version. 1356 01:03:41,720 --> 01:03:42,470 And you know what? 1357 01:03:42,470 --> 01:03:49,250 Let me go ahead and now remove this from there, remove this from there, 1358 01:03:49,250 --> 01:03:55,200 and remove this from here, and instead, put it on the body, 1359 01:03:55,200 --> 01:03:57,060 thereby factoring it out. 1360 01:03:57,060 --> 01:03:58,940 And here is now the C in CSS. 1361 01:03:58,940 --> 01:04:03,050 Cascading Style Sheets implies that, if you have a property, 1362 01:04:03,050 --> 01:04:08,930 like text-align center, on one HTML tag, but inside of that HTML tag-- 1363 01:04:08,930 --> 01:04:10,780 or element, as it's also called-- 1364 01:04:10,780 --> 01:04:13,730 are other HTML tags, as implied by the indentation 1365 01:04:13,730 --> 01:04:19,070 here, well, this will ensure that everything indented inside of the body 1366 01:04:19,070 --> 01:04:21,290 will be text-align center. 1367 01:04:21,290 --> 01:04:24,770 So I only need to say it once and it will apply to everything else down 1368 01:04:24,770 --> 01:04:25,560 below. 1369 01:04:25,560 --> 01:04:29,610 So if I save this file and open up css2.html, 1370 01:04:29,610 --> 01:04:33,380 I'll see the exact same thing, but my code is better designed. 1371 01:04:33,380 --> 01:04:34,098 Because why? 1372 01:04:34,098 --> 01:04:36,890 Well, if I want to go ahead and left-align or right-align the text, 1373 01:04:36,890 --> 01:04:38,600 I can change it in one place now. 1374 01:04:38,600 --> 01:04:41,450 I don't have to change it in three different places or god forbid, 1375 01:04:41,450 --> 01:04:46,310 if I had a much bigger website, in many more places than that. 1376 01:04:46,310 --> 01:04:50,540 So CSS also allows you to factor things out further. 1377 01:04:50,540 --> 01:04:56,000 It generally is considered messy to have the contents of your web page-- 1378 01:04:56,000 --> 01:04:59,300 John Harvard, welcome to my home page, copyright, and so forth-- 1379 01:04:59,300 --> 01:05:02,070 kind of commingled with the aesthetics thereof. 1380 01:05:02,070 --> 01:05:05,570 It's not such a big deal when our file's only 20 or so lines long, 1381 01:05:05,570 --> 01:05:09,620 but when a typical web page, like Google, or Facebook, or Imgur, 1382 01:05:09,620 --> 01:05:13,700 or Instagram, or the like, have a lot more content on the page, 1383 01:05:13,700 --> 01:05:17,090 you might have hundreds or even thousands of lines of code. 1384 01:05:17,090 --> 01:05:20,540 And so it makes it a lot harder to distinguish 1385 01:05:20,540 --> 01:05:24,170 what is your data, your information, from the aesthetics, 1386 01:05:24,170 --> 01:05:25,492 or the presentation thereof. 1387 01:05:25,492 --> 01:05:27,200 So this is to say it'd be nice if I could 1388 01:05:27,200 --> 01:05:30,483 move all of this orange stuff, all of the CSS elsewhere, 1389 01:05:30,483 --> 01:05:31,400 because you know what? 1390 01:05:31,400 --> 01:05:35,210 I'm not even that good in the real world at designing things using CSS. 1391 01:05:35,210 --> 01:05:37,280 I don't necessarily have the best artistic eye, 1392 01:05:37,280 --> 01:05:39,405 so maybe I'd like to collaborate with someone who's 1393 01:05:39,405 --> 01:05:42,860 better than me in the artistic sense with this language, 1394 01:05:42,860 --> 01:05:46,640 so maybe I can focus on the HTML, he or she can focus on the CSS. 1395 01:05:46,640 --> 01:05:49,480 It would be nice to separate these two just a little bit. 1396 01:05:49,480 --> 01:05:52,760 They're arguably different skill sets for some folks. 1397 01:05:52,760 --> 01:05:55,320 So let me go ahead and do exactly that, as follows. 1398 01:05:55,320 --> 01:05:58,960 Let me ahead and create another file, css3.html. 1399 01:05:58,960 --> 01:06:01,850 And in this file, let's go ahead and do this-- 1400 01:06:01,850 --> 01:06:04,820 let's get rid of all of these style attributes 1401 01:06:04,820 --> 01:06:08,900 altogether, really reverting to where we began the story, 1402 01:06:08,900 --> 01:06:12,790 getting rid of all of these style attributes on every one of the tags, 1403 01:06:12,790 --> 01:06:15,410 and thereby getting rid of all of the stylized. 1404 01:06:15,410 --> 01:06:17,150 But let's put it somewhere else. 1405 01:06:17,150 --> 01:06:19,880 It turns out that title is not the only thing that can 1406 01:06:19,880 --> 01:06:22,190 go inside the head of your web page. 1407 01:06:22,190 --> 01:06:25,100 You can also have a tag that's called style. 1408 01:06:25,100 --> 01:06:28,160 So it's not an attribute, it's a tag, but it's in a different place. 1409 01:06:28,160 --> 01:06:30,590 So they use the same word in two different contexts. 1410 01:06:30,590 --> 01:06:32,570 Style attribute is what we've been using, 1411 01:06:32,570 --> 01:06:34,970 but I'm now proposing to use a style tag, which 1412 01:06:34,970 --> 01:06:37,310 must go in the head of your web page. 1413 01:06:37,310 --> 01:06:38,870 Well, what am I going to put up here? 1414 01:06:38,870 --> 01:06:41,390 Well, now, you have a slightly different syntax. 1415 01:06:41,390 --> 01:06:44,570 You can specify the name of a tag, like body, 1416 01:06:44,570 --> 01:06:47,480 and then you have this convention of opening curly brace 1417 01:06:47,480 --> 01:06:49,370 and then closing that curly brace. 1418 01:06:49,370 --> 01:06:52,520 And they can be on different lines or the same lines. 1419 01:06:52,520 --> 01:06:54,030 To each his or her own. 1420 01:06:54,030 --> 01:06:57,050 And then I can put those same properties in here like this-- 1421 01:06:57,050 --> 01:06:58,580 text-align center. 1422 01:06:58,580 --> 01:07:01,640 So that will ensure that the entire body is aligned in the center. 1423 01:07:01,640 --> 01:07:03,680 I can do something similar for my header. 1424 01:07:03,680 --> 01:07:07,640 If I know that I want the font size of my header to be large, 1425 01:07:07,640 --> 01:07:10,610 I can simply say that for the main part of my web page, 1426 01:07:10,610 --> 01:07:12,650 I can say font-size medium. 1427 01:07:12,650 --> 01:07:15,290 And then down here, I can say the footer of my web page 1428 01:07:15,290 --> 01:07:21,380 is going to be font-size small, and then close this curly brace, as well. 1429 01:07:21,380 --> 01:07:23,930 So the syntax is almost the same. 1430 01:07:23,930 --> 01:07:27,470 I still have property colon value semicolon 1431 01:07:27,470 --> 01:07:30,110 for each of these customizations. 1432 01:07:30,110 --> 01:07:33,470 The only thing that's really new now is that inside of the style tag, 1433 01:07:33,470 --> 01:07:38,810 I'm mentioning in yellow each tag whose behavior I want to modify, 1434 01:07:38,810 --> 01:07:42,980 that I want to stabilize, and I'm using curly braces like this, just to say, 1435 01:07:42,980 --> 01:07:44,810 here comes one or more properties. 1436 01:07:44,810 --> 01:07:48,080 Because I could, if I wanted to make this web page even fancier, 1437 01:07:48,080 --> 01:07:51,800 have a bunch more stuff in here and in every other block. 1438 01:07:51,800 --> 01:07:53,660 But for now, I just have the one. 1439 01:07:53,660 --> 01:07:57,450 And to be clear, where the curly braces are does not matter. 1440 01:07:57,450 --> 01:07:58,460 You can do this. 1441 01:07:58,460 --> 01:08:01,130 I can put it all on the same line, if I really want, 1442 01:08:01,130 --> 01:08:03,770 and go ahead and do something even like this. 1443 01:08:03,770 --> 01:08:07,310 But this, of course, decreasingly lends itself 1444 01:08:07,310 --> 01:08:10,600 to readability and maintainability, because now, the line's just 1445 01:08:10,600 --> 01:08:13,680 going to get longer and longer and longer, the more things I add to it. 1446 01:08:13,680 --> 01:08:15,388 So a common convention is, perhaps, where 1447 01:08:15,388 --> 01:08:18,140 I began, which is to just open the curly brace like that, 1448 01:08:18,140 --> 01:08:19,670 and close it on a separate line. 1449 01:08:19,670 --> 01:08:23,359 But you can see and use different stylizations, as well. 1450 01:08:23,359 --> 01:08:28,729 Perhaps underwhelming, though, when I save this file and open up css3.html, 1451 01:08:28,729 --> 01:08:31,850 the file is exactly the same visually. 1452 01:08:31,850 --> 01:08:36,290 I've just designed it differently, and arguably better underneath the hood. 1453 01:08:36,290 --> 01:08:39,290 To be fair, it's gotten a little more verbose, 1454 01:08:39,290 --> 01:08:42,859 because frankly, I've exploded what all fit on individual lines 1455 01:08:42,859 --> 01:08:46,700 into this multi-step approach in the top of my web page. 1456 01:08:46,700 --> 01:08:52,819 But that's just allowing me, ultimately, to create reusable styles. 1457 01:08:52,819 --> 01:08:55,729 When it comes time to have not just one web page, but two, or three, 1458 01:08:55,729 --> 01:08:59,750 or thousands, you might want to reuse some of those same stylizations 1459 01:08:59,750 --> 01:09:00,979 on multiple pages. 1460 01:09:00,979 --> 01:09:05,899 And we're getting so close to isolating all of my CSS at the top of the file 1461 01:09:05,899 --> 01:09:09,260 that you can perhaps imagine factoring out of a file 1462 01:09:09,260 --> 01:09:12,170 altogether, and putting it somewhere else. 1463 01:09:12,170 --> 01:09:13,729 And we'll see that soon too. 1464 01:09:13,729 --> 01:09:16,189 But first, one last technique here. 1465 01:09:16,189 --> 01:09:19,130 It turns out that you can create CSS that doesn't just 1466 01:09:19,130 --> 01:09:21,620 specify the names of the tags-- 1467 01:09:21,620 --> 01:09:24,140 you can actually come up with your own keywords. 1468 01:09:24,140 --> 01:09:29,359 And let's see this by way of an example I created in advance called css4.html. 1469 01:09:29,359 --> 01:09:32,090 And you'll see that this file, per the green comment up top, 1470 01:09:32,090 --> 01:09:35,060 demonstrates what are called classes. 1471 01:09:35,060 --> 01:09:41,270 Notice that my CSS almost the same, but instead of saying words like body, 1472 01:09:41,270 --> 01:09:45,200 and header, and main, and footer, I've chosen this weird syntax-- 1473 01:09:45,200 --> 01:09:46,970 a period and then a word. 1474 01:09:46,970 --> 01:09:48,590 But that word can be anything I want-- 1475 01:09:48,590 --> 01:09:52,040 XYZ, [? Fubar Bas, ?] something else altogether. 1476 01:09:52,040 --> 01:09:55,550 I've chosen English words that are just self-descriptive of what 1477 01:09:55,550 --> 01:09:57,180 it is I'm trying to achieve. 1478 01:09:57,180 --> 01:10:02,540 So .centered means the following collection of one or more properties-- 1479 01:10:02,540 --> 01:10:03,890 namely this property. 1480 01:10:03,890 --> 01:10:09,050 .large means the following collection of these properties. .medium, .small. 1481 01:10:09,050 --> 01:10:13,130 So again, I could've called these WXYZ, or ABCD, anything else, 1482 01:10:13,130 --> 01:10:16,310 but I chose English words, or my whatever my native language is, 1483 01:10:16,310 --> 01:10:18,980 that just describes what is the purpose of everything 1484 01:10:18,980 --> 01:10:21,820 in between those curly braces. 1485 01:10:21,820 --> 01:10:22,910 Why? 1486 01:10:22,910 --> 01:10:28,730 Well, if I scroll down now in css4 to my actual code, notice what I've added. 1487 01:10:28,730 --> 01:10:32,870 There's a new attribute in my web page that's not style, 1488 01:10:32,870 --> 01:10:34,530 but it's called class. 1489 01:10:34,530 --> 01:10:36,620 And notice that my choice of English words 1490 01:10:36,620 --> 01:10:39,470 now makes my HTML arguably more readable, 1491 01:10:39,470 --> 01:10:43,190 because you can infer now from these classes, oh, the body of the web page 1492 01:10:43,190 --> 01:10:46,520 is going to be centered, or oh, the header of the web page 1493 01:10:46,520 --> 01:10:49,610 is going to be large, the footer of the web page is going to be small. 1494 01:10:49,610 --> 01:10:52,277 You don't necessarily need to get into the weeds of knowing what 1495 01:10:52,277 --> 01:10:53,870 does large mean, what the small mean. 1496 01:10:53,870 --> 01:10:57,530 That's a lower level detail that you can see, if you care about it, 1497 01:10:57,530 --> 01:11:00,590 but these are just semantically useful terms 1498 01:11:00,590 --> 01:11:03,020 that now refer to the stylization, without getting 1499 01:11:03,020 --> 01:11:07,580 into the weeds of actually doing the stylization-- as we did before 1500 01:11:07,580 --> 01:11:09,510 with the style attribute. 1501 01:11:09,510 --> 01:11:12,710 So this is a bit of a firehose, because we've now started with HTML, 1502 01:11:12,710 --> 01:11:15,890 and then we've introduced CSS, and then we've been moving CSS around. 1503 01:11:15,890 --> 01:11:20,330 But all CSS is, at the end of the day, is these key value pairs-- 1504 01:11:20,330 --> 01:11:22,760 these properties and these values. 1505 01:11:22,760 --> 01:11:26,330 And so CSS just so happens to come with some additional features, 1506 01:11:26,330 --> 01:11:28,970 like the ability to create your own classes, 1507 01:11:28,970 --> 01:11:32,630 as are implied by that single period before your choice of words. 1508 01:11:32,630 --> 01:11:34,490 That just makes things more reusable. 1509 01:11:34,490 --> 01:11:36,830 And this is super powerful, because in just a bit, 1510 01:11:36,830 --> 01:11:41,630 we'll actually see that there's some wonderfully free third-party libraries, 1511 01:11:41,630 --> 01:11:44,300 code that other people have written on the internet 1512 01:11:44,300 --> 01:11:47,630 that you can use in your own website, that actually allows you 1513 01:11:47,630 --> 01:11:51,350 to use their stylization and make your website all the prettier, 1514 01:11:51,350 --> 01:11:55,730 but without having to implement all of those things yourself. 1515 01:11:55,730 --> 01:11:59,480 So how can we take this one final step further, and actually 1516 01:11:59,480 --> 01:12:02,870 remove my CSS from the file so that I can actually 1517 01:12:02,870 --> 01:12:05,990 collaborate with someone else, or work on it separately, or reuse it 1518 01:12:05,990 --> 01:12:06,950 in other files? 1519 01:12:06,950 --> 01:12:08,908 Well, let me go ahead and open up a file that I 1520 01:12:08,908 --> 01:12:11,660 created in advance too called css5. 1521 01:12:11,660 --> 01:12:14,330 This one almost fits on the screen entirely. 1522 01:12:14,330 --> 01:12:17,840 Notice that this is the same HTML as we saw a moment ago, including 1523 01:12:17,840 --> 01:12:19,430 these classes-- 1524 01:12:19,430 --> 01:12:21,110 large, medium, and small. 1525 01:12:21,110 --> 01:12:23,990 But notice that I have this new tag up here. 1526 01:12:23,990 --> 01:12:26,210 And this is honestly one of the worst name tags, 1527 01:12:26,210 --> 01:12:28,100 because it does not do what it says. 1528 01:12:28,100 --> 01:12:32,360 But if you have a link tag with an href attribute and a rel, 1529 01:12:32,360 --> 01:12:35,510 for relationship attribute [? that's ?] stylesheet, 1530 01:12:35,510 --> 01:12:37,700 you can tell the browser this-- hey, browser, 1531 01:12:37,700 --> 01:12:39,560 go ahead and link in, so to speak. 1532 01:12:39,560 --> 01:12:45,140 Sort of copy paste the contents of this file, css5.css, 1533 01:12:45,140 --> 01:12:48,230 right here, the relationship of which is that it's 1534 01:12:48,230 --> 01:12:50,820 the stylesheet for this web page. 1535 01:12:50,820 --> 01:12:54,650 So if I open up that other file, css5.css, 1536 01:12:54,650 --> 01:12:56,750 you'll see that it's actually now familiar. 1537 01:12:56,750 --> 01:12:59,900 It's literally copied and pasted from the previous example, 1538 01:12:59,900 --> 01:13:02,570 but it's in a separate file, which means now, 1539 01:13:02,570 --> 01:13:05,960 I can use it and reuse it on multiple web pages 1540 01:13:05,960 --> 01:13:09,350 without having to copy and paste it inside of my HTML files. 1541 01:13:09,350 --> 01:13:11,750 I can just reference, so to speak, the same file. 1542 01:13:11,750 --> 01:13:14,000 I can link to the same file again and again. 1543 01:13:14,000 --> 01:13:16,250 And it means that I can work with a colleague on this. 1544 01:13:16,250 --> 01:13:19,100 I can focus on the HTML, he or she can work on the CSS, 1545 01:13:19,100 --> 01:13:22,550 and then when we merge the two together in the same folder, voila, 1546 01:13:22,550 --> 01:13:24,800 it'll all just work. 1547 01:13:24,800 --> 01:13:27,305 And so I say that this is a poorly named tag 1548 01:13:27,305 --> 01:13:29,180 because it would have been nice earlier, when 1549 01:13:29,180 --> 01:13:32,360 we were linking to harvard.edu, if the tag were called link. 1550 01:13:32,360 --> 01:13:36,680 Unfortunately, we used a, or anchor, for that, and link now for this purpose. 1551 01:13:36,680 --> 01:13:39,080 But once you memorize it or look it up will 1552 01:13:39,080 --> 01:13:43,140 the two become more distinct in your mind. 1553 01:13:43,140 --> 01:13:44,440 All right. 1554 01:13:44,440 --> 01:13:47,560 As before, feel free to interject with questions. 1555 01:13:47,560 --> 01:13:53,130 But we'll proceed now to make things even prettier iteratively here. 1556 01:13:53,130 --> 01:13:53,630 Let's go-- 1557 01:13:53,630 --> 01:13:53,850 SPEAKER 1: Would the 1558 01:13:53,850 --> 01:13:54,683 DAVID MALAN: --yeah? 1559 01:13:54,683 --> 01:13:56,886 SPEAKER 1: --the semantic tags that you have-- 1560 01:13:56,886 --> 01:13:59,350 I forget what they are off-hand. 1561 01:13:59,350 --> 01:14:04,040 Header, main-- do they behave like divs, if you're coming to web development 1562 01:14:04,040 --> 01:14:05,420 from the olden days? 1563 01:14:05,420 --> 01:14:06,680 DAVID MALAN: Indeed. 1564 01:14:06,680 --> 01:14:10,408 When Dan was learning this stuff, and when a lot of folks, myself included, 1565 01:14:10,408 --> 01:14:12,950 were learning this stuff, there's actually a bunch more tags. 1566 01:14:12,950 --> 01:14:15,680 And you'll see this as you dive into the assignment and your final project, 1567 01:14:15,680 --> 01:14:17,450 perhaps, and in the real world, as well. 1568 01:14:17,450 --> 01:14:20,790 Div is among the more useful, and also more generic tags out there. 1569 01:14:20,790 --> 01:14:22,790 It just means a division of the page, and it too 1570 01:14:22,790 --> 01:14:27,050 creates like an invisible rectangle across the screen that 1571 01:14:27,050 --> 01:14:30,230 allows you to store words, and images, and contents inside of it. 1572 01:14:30,230 --> 01:14:34,160 Header, and main, and footer are just like divs or divisions of the page, 1573 01:14:34,160 --> 01:14:35,870 but they're better named. 1574 01:14:35,870 --> 01:14:38,720 And the latest version of HTML, HTML5 realized, well, 1575 01:14:38,720 --> 01:14:42,830 we shouldn't just call everything in our web page generically a div or division. 1576 01:14:42,830 --> 01:14:44,990 So these are functionally, though, the same. 1577 01:14:44,990 --> 01:14:47,270 And there's a few others, as well-- things like aside 1578 01:14:47,270 --> 01:14:50,537 and nav, which we saw earlier, and several others, as well. 1579 01:14:50,537 --> 01:14:53,120 SPEAKER 1: And you can assign classes and ideas and everything 1580 01:14:53,120 --> 01:14:53,810 in the same way. 1581 01:14:53,810 --> 01:14:54,350 DAVID MALAN: Indeed. 1582 01:14:54,350 --> 01:14:57,560 It's just a way of helping the browser help the human, especially for reasons 1583 01:14:57,560 --> 01:15:00,995 of accessibility and for mobile access, where you might want to understand 1584 01:15:00,995 --> 01:15:03,620 the structure of the web page, that when you tap on the screen, 1585 01:15:03,620 --> 01:15:05,800 it zooms in on the main part of the screen, 1586 01:15:05,800 --> 01:15:08,920 and not on like the footer of the screen instead. 1587 01:15:08,920 --> 01:15:11,560 So rather than type out as many examples, 1588 01:15:11,560 --> 01:15:16,150 let me go ahead and open up a few others that we've made in advance, like css6. 1589 01:15:16,150 --> 01:15:18,880 So this one's a bit more of a mouthful, but you can perhaps 1590 01:15:18,880 --> 01:15:22,420 infer from what we're seeing what's going on here. 1591 01:15:22,420 --> 01:15:25,760 So I seem to have a header, a main, and a footer as before, 1592 01:15:25,760 --> 01:15:28,133 but notice I'm not using large, medium, and small. 1593 01:15:28,133 --> 01:15:30,550 You'll see for your assignment, or for your final project, 1594 01:15:30,550 --> 01:15:33,740 or any number of online resources, there's different units of measure. 1595 01:15:33,740 --> 01:15:36,640 And thus far, I used English words-- large, medium, and small-- 1596 01:15:36,640 --> 01:15:37,930 but you can specify points. 1597 01:15:37,930 --> 01:15:40,360 You can say 24 point, 96 point. 1598 01:15:40,360 --> 01:15:41,320 You can use pixels-- 1599 01:15:41,320 --> 01:15:43,300 20 pixels, 30 pixels. 1600 01:15:43,300 --> 01:15:46,090 Or you can even do relative values, like vh, 1601 01:15:46,090 --> 01:15:50,170 for viewport height, which is a fancy way of saying that the body of a web 1602 01:15:50,170 --> 01:15:54,610 page is otherwise-- well, the white rectangular region of a web page 1603 01:15:54,610 --> 01:15:57,610 that you see on your Mac or PC is generally known as the viewport. 1604 01:15:57,610 --> 01:15:59,930 That is literally the window you're looking at. 1605 01:15:59,930 --> 01:16:05,410 So if you say 20vh, that's actually saying 20% of the viewport height. 1606 01:16:05,410 --> 01:16:09,160 So if you have a screen that's this tall, the text that is in the header 1607 01:16:09,160 --> 01:16:11,990 is going to take up 20% of the height of the screen. 1608 01:16:11,990 --> 01:16:14,442 So it's a way of making your font size more dynamic. 1609 01:16:14,442 --> 01:16:15,400 What about all of this? 1610 01:16:15,400 --> 01:16:16,990 These are completely new. 1611 01:16:16,990 --> 01:16:19,720 We looked only before at text-align, but you can probably 1612 01:16:19,720 --> 01:16:21,250 infer what else is going on here. 1613 01:16:21,250 --> 01:16:24,820 So color white is going to make the text white. 1614 01:16:24,820 --> 01:16:27,820 background-image is going to take a URL-- 1615 01:16:27,820 --> 01:16:31,480 which happens to be a relative URL, a file in the same directory called 1616 01:16:31,480 --> 01:16:32,740 cat.jpg-- 1617 01:16:32,740 --> 01:16:34,570 and put it on the background. 1618 01:16:34,570 --> 01:16:38,200 It's not going to repeat it, and it's going to make the size of it 1619 01:16:38,200 --> 01:16:40,090 cover the web page. 1620 01:16:40,090 --> 01:16:42,110 How in the world would you know any of this? 1621 01:16:42,110 --> 01:16:43,910 Well, frankly, I didn't really remember it the other day, 1622 01:16:43,910 --> 01:16:46,480 and so I just looked it up in an online CSS reference. 1623 01:16:46,480 --> 01:16:49,030 And I just know that this allows me to specify 1624 01:16:49,030 --> 01:16:52,900 what image I want to use as the background of a web page, how 1625 01:16:52,900 --> 01:16:53,830 I want to size it-- 1626 01:16:53,830 --> 01:16:55,540 I want it to cover my web page-- 1627 01:16:55,540 --> 01:16:56,760 and do I want it to repeat. 1628 01:16:56,760 --> 01:17:00,010 Maybe, if the image is too small, do I want to see image, image, image, image, 1629 01:17:00,010 --> 01:17:01,780 or just stretch it to fill the screen? 1630 01:17:01,780 --> 01:17:05,140 I don't want it to repeat, because indeed, I want it to cover the screen. 1631 01:17:05,140 --> 01:17:07,570 So you would only know what values exist and which 1632 01:17:07,570 --> 01:17:09,910 ones you want to use, honestly, just by looking them up. 1633 01:17:09,910 --> 01:17:12,550 And there's so many that it's not even worth trying to memorize these things. 1634 01:17:12,550 --> 01:17:15,130 You'll just get accustomed to them, if you end up liking this 1635 01:17:15,130 --> 01:17:17,780 and you reuse them again and again. 1636 01:17:17,780 --> 01:17:20,680 So let's go ahead and look at what I'm actually going to see. 1637 01:17:20,680 --> 01:17:24,040 If I scroll down to the bottom of the page, the contents of the page 1638 01:17:24,040 --> 01:17:26,540 are actually going to be pretty much identical in this. 1639 01:17:26,540 --> 01:17:32,050 So let's go ahead and open up css6.html, and we'll see the following. 1640 01:17:32,050 --> 01:17:34,210 So it doesn't quite all fit on the screen, 1641 01:17:34,210 --> 01:17:37,600 but that's OK, because I really just want to use that image as a background 1642 01:17:37,600 --> 01:17:39,500 now, not see the whole image. 1643 01:17:39,500 --> 01:17:42,130 And you'll see that John Harvard, and welcome to my home page, 1644 01:17:42,130 --> 01:17:45,040 and the copyright is all in white, because notice that I 1645 01:17:45,040 --> 01:17:46,750 did specify [? a ?] color of white. 1646 01:17:46,750 --> 01:17:50,200 This cat is the background image, and indeed, it's covering the screen. 1647 01:17:50,200 --> 01:17:52,150 And what's nice is that this is all dynamic. 1648 01:17:52,150 --> 01:17:55,160 If I go in here and start resizing my browser window, 1649 01:17:55,160 --> 01:17:58,510 notice that the font is getting smaller and smaller, because John Harvard is 1650 01:17:58,510 --> 01:18:03,140 still taking up 20% of the height of the viewport, the rectangular region. 1651 01:18:03,140 --> 01:18:06,340 And I'm seeing a little less of the cat, but that's OK, because again, he's 1652 01:18:06,340 --> 01:18:07,770 just the background. 1653 01:18:07,770 --> 01:18:09,520 So if you've ever visited a website that's 1654 01:18:09,520 --> 01:18:12,820 far more interesting than the examples we looked at up until now, that 1655 01:18:12,820 --> 01:18:17,140 have nice pretty background images, they might be using some CSS properties 1656 01:18:17,140 --> 01:18:19,210 quite like those, as well. 1657 01:18:19,210 --> 01:18:23,050 Well, how about even fancier these days-- let's jump right to the spoiler. 1658 01:18:23,050 --> 01:18:27,160 Let's open up css7.html, which is our seventh and final version of this 1659 01:18:27,160 --> 01:18:29,110 series, and you'll notice this-- 1660 01:18:29,110 --> 01:18:30,430 perhaps a familiar face. 1661 01:18:30,430 --> 01:18:32,800 Here, we have Connor boxing in the library, 1662 01:18:32,800 --> 01:18:36,550 but I have that exact same text overlaying a video. 1663 01:18:36,550 --> 01:18:38,680 So it turns out that, using richer media, 1664 01:18:38,680 --> 01:18:41,590 can you do the same kind of thing-- fill the screen, 1665 01:18:41,590 --> 01:18:44,170 but overlay the contents of your web page. 1666 01:18:44,170 --> 01:18:44,830 Pretty common. 1667 01:18:44,830 --> 01:18:46,900 If you go to a nice, very interactive website, 1668 01:18:46,900 --> 01:18:49,480 you might actually see some motion video going on. 1669 01:18:49,480 --> 01:18:51,010 Well, how is this example working? 1670 01:18:51,010 --> 01:18:52,510 Well, let's open it up. 1671 01:18:52,510 --> 01:18:56,020 If I open up css7.html, some of it's going to be new to me. 1672 01:18:56,020 --> 01:18:58,150 Let's focus on the HTML first. 1673 01:18:58,150 --> 01:19:01,660 And most of this, I think, we can notice as familiar. 1674 01:19:01,660 --> 01:19:05,170 Footer, main, header is all the same, but notice 1675 01:19:05,170 --> 01:19:07,870 I wrapped it all in a section tag this time, because it's 1676 01:19:07,870 --> 01:19:09,610 like a whole section of the screen. 1677 01:19:09,610 --> 01:19:11,710 And then up here, I have a video tag. 1678 01:19:11,710 --> 01:19:13,270 And I had to look this stuff up too. 1679 01:19:13,270 --> 01:19:16,120 I wanted the video to auto play, and because we only 1680 01:19:16,120 --> 01:19:19,690 shot a few seconds of footage, I want it to loop again and again, 1681 01:19:19,690 --> 01:19:23,200 so it doesn't become static, if the human waits there too long. 1682 01:19:23,200 --> 01:19:24,320 And I want it to be muted. 1683 01:19:24,320 --> 01:19:24,820 Why? 1684 01:19:24,820 --> 01:19:26,612 Because we didn't want to hear the punching 1685 01:19:26,612 --> 01:19:30,490 bag being hit, and also for reasons of user experience these days. 1686 01:19:30,490 --> 01:19:33,190 A lot of browsers, like Chrome, will not auto 1687 01:19:33,190 --> 01:19:35,290 play videos if they have sound on them. 1688 01:19:35,290 --> 01:19:39,110 It's become too annoying for users, it's become too invasive because of ads. 1689 01:19:39,110 --> 01:19:41,680 So if you start playing your videos muted, 1690 01:19:41,680 --> 01:19:43,780 they will most likely automatically play. 1691 01:19:43,780 --> 01:19:46,070 So this first attribute will be respected. 1692 01:19:46,070 --> 01:19:47,800 But these attributes are a little weird. 1693 01:19:47,800 --> 01:19:50,140 They don't have equal signs, and they don't have quotes. 1694 01:19:50,140 --> 01:19:53,830 And that's just because these attributes don't need values. 1695 01:19:53,830 --> 01:19:57,070 Just like certain tags, like image, don't need close tags, 1696 01:19:57,070 --> 01:20:00,610 some attributes don't need values, because I'm done with my thought. 1697 01:20:00,610 --> 01:20:01,630 Auto play this. 1698 01:20:01,630 --> 01:20:02,560 Loop this. 1699 01:20:02,560 --> 01:20:03,690 Mute this. 1700 01:20:03,690 --> 01:20:04,762 One word suffices. 1701 01:20:04,762 --> 01:20:06,720 You don't need an equal sign and double quotes. 1702 01:20:06,720 --> 01:20:07,910 How do you know this? 1703 01:20:07,910 --> 01:20:10,410 Just from the documentation, looking at an online reference. 1704 01:20:10,410 --> 01:20:11,970 And for the assignment and final project, 1705 01:20:11,970 --> 01:20:13,770 we'll point you to some popular references 1706 01:20:13,770 --> 01:20:17,190 that are freely available via which to check these things, as well. 1707 01:20:17,190 --> 01:20:22,140 The video tag, though, seems to take one tag inside of it, 1708 01:20:22,140 --> 01:20:24,630 which is the source of the video. 1709 01:20:24,630 --> 01:20:28,470 This is ridiculously named-- source source equals 1710 01:20:28,470 --> 01:20:33,120 the name of the file, which happens to be boxing.mp4, a movie file here. 1711 01:20:33,120 --> 01:20:35,790 The type of it is, indeed, video/mp4. 1712 01:20:35,790 --> 01:20:38,670 So this is just how you would embed a video in a web page. 1713 01:20:38,670 --> 01:20:39,810 How are they overlaid? 1714 01:20:39,810 --> 01:20:41,610 Well, let's just scroll up. 1715 01:20:41,610 --> 01:20:43,830 And we don't have to get too into the weeds here, 1716 01:20:43,830 --> 01:20:45,620 but you'll notice I did the following. 1717 01:20:45,620 --> 01:20:49,050 One, I told the video, make yourself 100% 1718 01:20:49,050 --> 01:20:51,182 of the height and 100% of the width. 1719 01:20:51,182 --> 01:20:53,640 So it turns out those are CSS properties, as well, that you 1720 01:20:53,640 --> 01:20:55,440 would know just by looking those up. 1721 01:20:55,440 --> 01:20:58,290 Margin 0 on the body was just to fix a little bug. 1722 01:20:58,290 --> 01:21:02,280 It turns out that most browsers put a little white border around everything, 1723 01:21:02,280 --> 01:21:04,380 and that looked a little ugly for a video, 1724 01:21:04,380 --> 01:21:06,330 so I wanted to get rid of that margin. 1725 01:21:06,330 --> 01:21:10,770 So saying margin 0 means disable any white border around the video. 1726 01:21:10,770 --> 01:21:13,590 And then section, down here, is a technique 1727 01:21:13,590 --> 01:21:16,980 via which you can overlay one thing on top of the other. 1728 01:21:16,980 --> 01:21:19,410 Because think about all of the examples thus far. 1729 01:21:19,410 --> 01:21:21,890 Like my three paragraphs, I had one paragraph, 1730 01:21:21,890 --> 01:21:24,840 then the next one was below it, then the next one was below it. 1731 01:21:24,840 --> 01:21:28,620 Nothing has overlapped other things yet, but in this example, 1732 01:21:28,620 --> 01:21:31,170 I deliberately want the text overlap the video. 1733 01:21:31,170 --> 01:21:32,590 So how do you solve this? 1734 01:21:32,590 --> 01:21:37,710 Well, I started googling around, and I googled something like CSS overlay text 1735 01:21:37,710 --> 01:21:41,470 on video, and I saw some suggested properties like this. 1736 01:21:41,470 --> 01:21:44,400 Well, if I want to make my text white, just say as much. 1737 01:21:44,400 --> 01:21:50,335 If I want to position this section, as I described it, on top of it absolutely-- 1738 01:21:50,335 --> 01:21:53,460 I don't want it to go below the video, because that would defeat the point. 1739 01:21:53,460 --> 01:21:59,070 I want to position it absolutely at pixel 0 on the left, 1740 01:21:59,070 --> 01:22:01,710 pixel 0 on the right, and pixel 0 on top. 1741 01:22:01,710 --> 01:22:06,100 That means take the section of text that would otherwise be below the video, 1742 01:22:06,100 --> 01:22:09,830 and instead, absolutely position it 0, 0, 0-- 1743 01:22:09,830 --> 01:22:12,720 so 0 pixels away from the top left and right. 1744 01:22:12,720 --> 01:22:15,277 So that the effect is to overlay the two. 1745 01:22:15,277 --> 01:22:17,610 And that's definitely among the more advanced techniques 1746 01:22:17,610 --> 01:22:18,660 we've seen thus far. 1747 01:22:18,660 --> 01:22:22,500 And even I had to hook this up to remember how to do this technique. 1748 01:22:22,500 --> 01:22:25,540 But in short, all of the building blocks are still there. 1749 01:22:25,540 --> 01:22:29,190 We have the names of our tags, that are referencing tags down below. 1750 01:22:29,190 --> 01:22:32,340 We have property colon value, property colon value-- 1751 01:22:32,340 --> 01:22:37,370 we're just now combining them in much more powerful ways. 1752 01:22:37,370 --> 01:22:40,590 SPEAKER 1: And I've just noticed that you've, in a lovely way, 1753 01:22:40,590 --> 01:22:44,050 alphabetized your attributes here. 1754 01:22:44,050 --> 01:22:45,265 But does the order matter? 1755 01:22:45,265 --> 01:22:46,890 DAVID MALAN: The order does not matter. 1756 01:22:46,890 --> 01:22:51,330 If you're just as obsessive as I am, I alphabetized everything. 1757 01:22:51,330 --> 01:22:54,852 I can make an academic argument which, frankly, it just helps me skim things, 1758 01:22:54,852 --> 01:22:57,560 because I can immediately see if something is there or not there, 1759 01:22:57,560 --> 01:22:59,190 if it's alphabetical. 1760 01:22:59,190 --> 01:23:03,690 I have yet to see a reference online that is as obsessive about this detail 1761 01:23:03,690 --> 01:23:04,850 as I am. 1762 01:23:04,850 --> 01:23:06,220 It's not necessary. 1763 01:23:06,220 --> 01:23:07,890 So what else can we do here too? 1764 01:23:07,890 --> 01:23:10,020 You'll notice that I typed the word white. 1765 01:23:10,020 --> 01:23:12,900 That's actually not, strictly speaking, the only option. 1766 01:23:12,900 --> 01:23:15,090 We can change the text to black, for instance. 1767 01:23:15,090 --> 01:23:16,480 And now this is a little weird. 1768 01:23:16,480 --> 01:23:18,420 There's this little square next to the word. 1769 01:23:18,420 --> 01:23:19,650 I did not create that square. 1770 01:23:19,650 --> 01:23:21,600 This is a feature of certain text editors, 1771 01:23:21,600 --> 01:23:25,200 like VSCode, that are just not that usefully 1772 01:23:25,200 --> 01:23:27,510 showing me what color I just typed. 1773 01:23:27,510 --> 01:23:30,150 It's more useful if you want to type something like rouge, 1774 01:23:30,150 --> 01:23:33,930 or some other color that you might not necessarily have in your mind's eye. 1775 01:23:33,930 --> 01:23:37,270 Here, it's just graphically showing me what white and black look like. 1776 01:23:37,270 --> 01:23:40,740 But if I go back to the page now and reload, you'll see that black-- 1777 01:23:40,740 --> 01:23:42,960 it didn't really look good the first time I tried it. 1778 01:23:42,960 --> 01:23:44,290 That's why I went with white. 1779 01:23:44,290 --> 01:23:45,660 But I can try other colors. 1780 01:23:45,660 --> 01:23:49,050 I can try something like red, reload now, and now it's red. 1781 01:23:49,050 --> 01:23:50,490 That's even worse, perhaps. 1782 01:23:50,490 --> 01:23:53,460 But you can express almost any color here, as well. 1783 01:23:53,460 --> 01:23:55,500 But it doesn't have to be a word. 1784 01:23:55,500 --> 01:23:57,660 You can actually do it in RGB format. 1785 01:23:57,660 --> 01:23:59,175 So if unfamiliar, RGB-- 1786 01:23:59,175 --> 01:24:01,050 or red green blue-- is the paradigm you might 1787 01:24:01,050 --> 01:24:03,030 see in Photoshop or in other tools. 1788 01:24:03,030 --> 01:24:05,400 It represents how much red, how much green, 1789 01:24:05,400 --> 01:24:08,340 and how much blue you might want in any given color. 1790 01:24:08,340 --> 01:24:09,450 Well, it turns out-- 1791 01:24:09,450 --> 01:24:12,090 and you would only know this from having learned it before, 1792 01:24:12,090 --> 01:24:14,190 or poked around, or read up on it earlier-- 1793 01:24:14,190 --> 01:24:16,740 if you do a value like 0, 0, 0-- 1794 01:24:16,740 --> 01:24:20,000 so 0 red, 0 green, and 0 blue-- 1795 01:24:20,000 --> 01:24:25,870 those frequencies of light together give you black in the aggregate. 1796 01:24:25,870 --> 01:24:30,600 So if I reload the page now, after saving it, I indeed get black. 1797 01:24:30,600 --> 01:24:34,440 If I do the opposite-- instead of no red, no green, no blue, but do a lot-- 1798 01:24:34,440 --> 01:24:41,610 and the maximum possible value, turns out is 255, 255, 255-- 1799 01:24:41,610 --> 01:24:44,080 and I reload now, I get white. 1800 01:24:44,080 --> 01:24:46,170 And you'll notice what's cool about this-- 1801 01:24:46,170 --> 01:24:53,430 if I do 255, 0, 0, that means a lot of red, 0 green, 0 blue. 1802 01:24:53,430 --> 01:24:56,775 And if I reload now, I get my familiar red. 1803 01:24:56,775 --> 01:24:58,650 So we can spend all day on this, but frankly, 1804 01:24:58,650 --> 01:25:01,250 if you Google something like HTML color wheel, 1805 01:25:01,250 --> 01:25:03,500 Google actually has this built in widget where you can 1806 01:25:03,500 --> 01:25:05,600 choose any color of the rainbow here-- 1807 01:25:05,600 --> 01:25:06,890 for instance, this purple-- 1808 01:25:06,890 --> 01:25:09,890 and you'll see that, in your CSS, you can actually type, 1809 01:25:09,890 --> 01:25:14,390 for this shade of purple, rgb(197, 45, 252). 1810 01:25:14,390 --> 01:25:16,490 Or turns out there's another syntax. 1811 01:25:16,490 --> 01:25:19,100 It's called hexadecimal, but more on that another time. 1812 01:25:19,100 --> 01:25:21,290 You can, instead, use this cryptic code here. 1813 01:25:21,290 --> 01:25:24,830 You can also type the word purple, but that's a very specific definition 1814 01:25:24,830 --> 01:25:26,630 of a specific shade of purple. 1815 01:25:26,630 --> 01:25:29,000 This gives you exactly this shade of purple. 1816 01:25:29,000 --> 01:25:31,820 So just to be clear, let me go ahead and copy 1817 01:25:31,820 --> 01:25:35,780 this, just for demonstration's sake, change this text 1818 01:25:35,780 --> 01:25:41,060 to that with the sharp sign, save it, and reload my example, 1819 01:25:41,060 --> 01:25:46,890 and now we've overlaid purple on top of Connor doing the boxing. 1820 01:25:46,890 --> 01:25:47,532 All right. 1821 01:25:47,532 --> 01:25:49,740 Well, let's go ahead and open up a few other examples 1822 01:25:49,740 --> 01:25:52,980 that are, perhaps, a little more familiar from the real world, 1823 01:25:52,980 --> 01:25:55,480 just to whet your appetite for what more you can do. 1824 01:25:55,480 --> 01:25:57,990 And again, the goal here is not to absorb 1825 01:25:57,990 --> 01:26:00,210 every one of these individual techniques, 1826 01:26:00,210 --> 01:26:02,092 but now to get sort of the lay of the land 1827 01:26:02,092 --> 01:26:04,800 and to understand, oh, if I want to achieve this effect that I've 1828 01:26:04,800 --> 01:26:07,140 seen on some website, these are the building blocks 1829 01:26:07,140 --> 01:26:10,270 that I can start to bring together to do that thing. 1830 01:26:10,270 --> 01:26:13,200 Let me go ahead and open up in my browser images1-- 1831 01:26:13,200 --> 01:26:16,560 plural-- and you'll see that I have this example here 1832 01:26:16,560 --> 01:26:18,810 of Grumpy Cat again and again. 1833 01:26:18,810 --> 01:26:20,458 But how did I get that effect? 1834 01:26:20,458 --> 01:26:22,500 Well, you'll see that there's three of them here, 1835 01:26:22,500 --> 01:26:24,083 and there's clearly some nice circles. 1836 01:26:24,083 --> 01:26:27,840 And I could absolutely open up Photoshop or some other program and just do that, 1837 01:26:27,840 --> 01:26:30,720 but it turns out I can do that in CSS. 1838 01:26:30,720 --> 01:26:37,470 If I open up images1.html, you'll see this HTML code, including the source 1839 01:26:37,470 --> 01:26:39,150 of this particular Grumpy Cat. 1840 01:26:39,150 --> 01:26:42,720 And you'll see that I reference the same image-- cat.jpg, cat.jpg, cat.jpg-- 1841 01:26:42,720 --> 01:26:45,990 three times, same alternative text each time. 1842 01:26:45,990 --> 01:26:49,650 But notice this-- if I go to the top of this file-- 1843 01:26:49,650 --> 01:26:51,690 I went ahead and kept my CSS in the same file, 1844 01:26:51,690 --> 01:26:54,023 because it's such a simple example, it didn't make sense 1845 01:26:54,023 --> 01:26:56,670 to factor it out into a second file. 1846 01:26:56,670 --> 01:27:00,528 On my image tag, I can give it a border radius of some percentage. 1847 01:27:00,528 --> 01:27:02,070 So how much do you want to curve it ? 1848 01:27:02,070 --> 01:27:04,200 0% or maybe 50%. 1849 01:27:04,200 --> 01:27:07,740 Let me go ahead and change it temporarily to 0% and reload, 1850 01:27:07,740 --> 01:27:11,100 and I'll see three happy cats, just as the original image is. 1851 01:27:11,100 --> 01:27:15,630 But if I change it back to 50%, that curves it in 50%, giving me, 1852 01:27:15,630 --> 01:27:17,130 effectively, these circles. 1853 01:27:17,130 --> 01:27:20,610 If I really ratchet it up, say, to 90% and reload, 1854 01:27:20,610 --> 01:27:25,000 I'll get a slightly more ovular shape now, as well. 1855 01:27:25,000 --> 01:27:27,540 So different values there allow you to add certain effects 1856 01:27:27,540 --> 01:27:29,400 to the actual image. 1857 01:27:29,400 --> 01:27:31,690 What if I want to do something more than that? 1858 01:27:31,690 --> 01:27:35,580 Well, it turns out that, frankly, it can become really tedious 1859 01:27:35,580 --> 01:27:37,970 writing your own CSS all of the time. 1860 01:27:37,970 --> 01:27:40,470 And if you're no artist, it's going to be really frustrating 1861 01:27:40,470 --> 01:27:43,170 trying to get the aesthetics of your way web page just write. 1862 01:27:43,170 --> 01:27:46,230 And yet, all of us have been come pretty accustomed to pretty nice 1863 01:27:46,230 --> 01:27:49,050 looking web pages out there, and so for instance, you 1864 01:27:49,050 --> 01:27:52,680 might want to borrow techniques you've seen on other websites 1865 01:27:52,680 --> 01:27:55,950 without having to recreate it entirely yourself. 1866 01:27:55,950 --> 01:28:00,000 So for instance, here is another example, images2.html, 1867 01:28:00,000 --> 01:28:02,080 but it's exactly the same thing. 1868 01:28:02,080 --> 01:28:04,500 But this time, if I open up the source code, 1869 01:28:04,500 --> 01:28:07,090 you're going to see a slightly new tag-- 1870 01:28:07,090 --> 01:28:11,730 this is images2-- and it's referencing a third-party site. 1871 01:28:11,730 --> 01:28:16,860 Notice first, though, that all of this is the same except this class-- 1872 01:28:16,860 --> 01:28:19,500 class="rounded-circle". 1873 01:28:19,500 --> 01:28:21,070 Well, where did that come from? 1874 01:28:21,070 --> 01:28:23,250 I could have invented it myself. 1875 01:28:23,250 --> 01:28:26,340 We've seen a little bit ago how you can create with the dot notation, 1876 01:28:26,340 --> 01:28:32,580 the period, your own words, like rounded-circle, or large, or medium, 1877 01:28:32,580 --> 01:28:34,140 or small, or centered. 1878 01:28:34,140 --> 01:28:37,480 You could certainly imagine creating a class called rounded-circle. 1879 01:28:37,480 --> 01:28:40,530 But the cool thing here is that I did not create this class. 1880 01:28:40,530 --> 01:28:44,880 We'll see in a second that I actually have used a third-party library, code 1881 01:28:44,880 --> 01:28:48,450 that someone else wrote, who solved this problem for me, who figured out 1882 01:28:48,450 --> 01:28:52,230 how to make things rounded circles, so I don't have to get into the weeds. 1883 01:28:52,230 --> 01:28:54,760 In computer science, this is known as an abstraction. 1884 01:28:54,760 --> 01:28:55,740 It's like a black box. 1885 01:28:55,740 --> 01:28:59,080 I don't care how they did it, I just know that they can do it. 1886 01:28:59,080 --> 01:29:02,980 So how do I get access to this amazing new feature called rounded-circle? 1887 01:29:02,980 --> 01:29:05,730 Well, notice up at the top of my web page, I've done a few things. 1888 01:29:05,730 --> 01:29:09,720 And all of this is copy paste from some documentation that we'll point you at. 1889 01:29:09,720 --> 01:29:13,230 I am using here a library, which is code written 1890 01:29:13,230 --> 01:29:15,780 by someone else called Bootstrap. 1891 01:29:15,780 --> 01:29:19,680 It originally was created by Twitter, used by Twitter's website for years. 1892 01:29:19,680 --> 01:29:21,990 Now, it's become a larger open-source project. 1893 01:29:21,990 --> 01:29:27,330 And in short, it just makes it very easy for you to make good looking websites. 1894 01:29:27,330 --> 01:29:30,090 Getbootstrap.com is the URL-- 1895 01:29:30,090 --> 01:29:32,470 and we'll point you at this afterwards, as well. 1896 01:29:32,470 --> 01:29:36,390 And if I go into the documentation and go into things like Components, 1897 01:29:36,390 --> 01:29:41,010 you'll see, for instance, that I can make much more interesting things 1898 01:29:41,010 --> 01:29:42,060 than I could earlier. 1899 01:29:42,060 --> 01:29:45,360 Let me go in, actually, to Content, and go to Tables. 1900 01:29:45,360 --> 01:29:48,580 And let me show you this first, before we come back to this example. 1901 01:29:48,580 --> 01:29:53,670 Let me go ahead and open up one example here-- table1.html. 1902 01:29:53,670 --> 01:29:56,910 This is kind of a mouthful, but let's take a look 1903 01:29:56,910 --> 01:29:58,740 at what this is going to look like. 1904 01:29:58,740 --> 01:30:00,937 That's a lot of new tags, but it's a good example 1905 01:30:00,937 --> 01:30:04,020 of how you would go about wrapping your mind around a new feature in HTML. 1906 01:30:04,020 --> 01:30:06,510 You open up some code, and look at it for the first time-- 1907 01:30:06,510 --> 01:30:09,060 honestly, I don't know what all of these cryptic symbols are, 1908 01:30:09,060 --> 01:30:12,750 but if you'll humor me, and allow me to just define a few, 1909 01:30:12,750 --> 01:30:14,820 it should make pretty good sense. 1910 01:30:14,820 --> 01:30:17,790 Table tag means, hey, browser, here comes an HTML table-- so 1911 01:30:17,790 --> 01:30:19,500 something with rows and columns. 1912 01:30:19,500 --> 01:30:21,600 Yet I don't see the words rows and columns. 1913 01:30:21,600 --> 01:30:22,590 Why? 1914 01:30:22,590 --> 01:30:25,020 Well, here comes thead, table head. 1915 01:30:25,020 --> 01:30:26,820 It's a very annoyingly succinct description 1916 01:30:26,820 --> 01:30:28,830 of the top row in the table-- 1917 01:30:28,830 --> 01:30:30,810 usually boldfaced, or something like that. 1918 01:30:30,810 --> 01:30:34,680 Down here, tbody-- table body-- that's all of the other rows, rows 2, 1919 01:30:34,680 --> 01:30:36,540 and 3, and 4, and 5. 1920 01:30:36,540 --> 01:30:39,880 Within the head is tr, table row. 1921 01:30:39,880 --> 01:30:42,150 So this is like a slice of a row in Excel, 1922 01:30:42,150 --> 01:30:44,380 or Google Spreadsheets, or the like. 1923 01:30:44,380 --> 01:30:46,610 And then th is table header. 1924 01:30:46,610 --> 01:30:51,310 This is like code for a specific cell, or technically, 1925 01:30:51,310 --> 01:30:52,862 a column within that row. 1926 01:30:52,862 --> 01:30:54,820 So in other words, even though it's written out 1927 01:30:54,820 --> 01:30:58,120 in this very text-based format, this is saying, here's a table, 1928 01:30:58,120 --> 01:31:02,080 here's the head of the table, here's a row in the table, here's a cell, 1929 01:31:02,080 --> 01:31:03,243 here's another cell. 1930 01:31:03,243 --> 01:31:05,410 So if you're thinking about this in your mind's eye, 1931 01:31:05,410 --> 01:31:07,030 this is like giving me two columns-- 1932 01:31:07,030 --> 01:31:10,940 week and lecture, left and right respectively. 1933 01:31:10,940 --> 01:31:13,150 It's just laid out in this text-based form. 1934 01:31:13,150 --> 01:31:17,000 What is going to be underneath the table head in the table body? 1935 01:31:17,000 --> 01:31:18,480 Well, let's take a look at this. 1936 01:31:18,480 --> 01:31:22,990 In the table body, I have table row, table row, table row, table row, 1937 01:31:22,990 --> 01:31:27,010 table row-- so at least five rows below the header. 1938 01:31:27,010 --> 01:31:28,600 What are the cells in each? 1939 01:31:28,600 --> 01:31:30,190 Well, when it's not the table header-- 1940 01:31:30,190 --> 01:31:33,190 the first row-- it's called td, table data. 1941 01:31:33,190 --> 01:31:35,740 These are awful names, but it really refers to cell. 1942 01:31:35,740 --> 01:31:37,780 It would be like having a tag called cell. 1943 01:31:37,780 --> 01:31:41,230 So in the first column, it's going to say 1, and in the second column, 1944 01:31:41,230 --> 01:31:44,438 it's going to say, Telling a Story and Introduction to Post Production, which 1945 01:31:44,438 --> 01:31:47,650 was the name of our first lecture in this room. 1946 01:31:47,650 --> 01:31:50,470 Lecture 2, Framing, Composition, Lens Basics. 1947 01:31:50,470 --> 01:31:53,440 Lecture 3, Exposure and Visual Camera Artifacts, and so forth. 1948 01:31:53,440 --> 01:31:56,200 So we're creating another table again, where it says week 1949 01:31:56,200 --> 01:31:59,720 and then lecture, and then 1, Telling a Story and Introduction 1950 01:31:59,720 --> 01:32:03,400 to Post Production; 2, Framing, Composition, and Lens Basics; 1951 01:32:03,400 --> 01:32:04,420 and so forth. 1952 01:32:04,420 --> 01:32:11,590 So long story short, if we wave our hand and open this file up now, table1.html, 1953 01:32:11,590 --> 01:32:16,000 you'll see a pretty simple and ugly HTML table. 1954 01:32:16,000 --> 01:32:19,490 Now, it looks like the table body is left-aligned, 1955 01:32:19,490 --> 01:32:22,580 and the table heading, not quite obviously, is centered here and there. 1956 01:32:22,580 --> 01:32:23,830 And honestly, this looks ugly. 1957 01:32:23,830 --> 01:32:25,330 And I could spend five minutes. 1958 01:32:25,330 --> 01:32:29,920 I could spend an hour adding borders, or colors, or trying to style this table, 1959 01:32:29,920 --> 01:32:31,120 but why bother? 1960 01:32:31,120 --> 01:32:34,332 One of the key features of programming these days, 1961 01:32:34,332 --> 01:32:36,040 and web development these days is you can 1962 01:32:36,040 --> 01:32:39,370 stand on the shoulders of other people who've already invested that time, 1963 01:32:39,370 --> 01:32:43,510 and who are maybe even more artistically inclined than you, and instead, make 1964 01:32:43,510 --> 01:32:49,810 your same data in your table look not like table1, but like table2. 1965 01:32:49,810 --> 01:32:50,860 And voila. 1966 01:32:50,860 --> 01:32:52,720 Now, you might not love this table still, 1967 01:32:52,720 --> 01:32:55,750 but arguably, it's much prettier than the previous one. 1968 01:32:55,750 --> 01:32:57,160 Everything's nicely lined up. 1969 01:32:57,160 --> 01:33:01,240 I have this nice striping to draw your attention to one row, versus the other. 1970 01:33:01,240 --> 01:33:02,660 How did I get to this? 1971 01:33:02,660 --> 01:33:08,740 Well, it turns out in table2.html, my code is almost identical, except-- 1972 01:33:08,740 --> 01:33:13,180 indeed, my code is almost identical, except notice what I did up here. 1973 01:33:13,180 --> 01:33:15,880 I added a class to my table tag. 1974 01:33:15,880 --> 01:33:19,450 Before, I just said open bracket table, close bracket. 1975 01:33:19,450 --> 01:33:22,060 But here, I've said table table-striped. 1976 01:33:22,060 --> 01:33:26,260 Those are two classes that someone else invented-- specifically, 1977 01:33:26,260 --> 01:33:29,980 the people who wrote the Bootstrap library invented for us-- 1978 01:33:29,980 --> 01:33:32,770 that, so long as I include their code in mine, 1979 01:33:32,770 --> 01:33:36,770 I can now have access to their stylization of tables. 1980 01:33:36,770 --> 01:33:41,380 So just by adding those two words, table and table-striped, all of my HTML 1981 01:33:41,380 --> 01:33:44,780 now renders like this, instead of like that. 1982 01:33:44,780 --> 01:33:47,980 And that really is starting to hint at the power of CSS. 1983 01:33:47,980 --> 01:33:48,780 How did I do this? 1984 01:33:48,780 --> 01:33:52,000 Again, I read the documentation, and I ultimately copied 1985 01:33:52,000 --> 01:33:55,030 and pasted these three lines from the documentation. 1986 01:33:55,030 --> 01:33:57,220 The key one really is the third. 1987 01:33:57,220 --> 01:34:03,550 This is referencing a URL of CSS that someone else wrote for me-- namely, 1988 01:34:03,550 --> 01:34:05,530 the authors of the Bootstrap library. 1989 01:34:05,530 --> 01:34:08,830 And if I view this file, which I can do by pasting that same URL 1990 01:34:08,830 --> 01:34:11,530 into a browser, you'll see a huge mess. 1991 01:34:11,530 --> 01:34:15,400 And if we look really closely, you'll see lots of semicolons, lots of colons. 1992 01:34:15,400 --> 01:34:18,730 Those are just a huge number of properties 1993 01:34:18,730 --> 01:34:23,650 that the authors of Bootstrap have invented for you, and I, and everyone 1994 01:34:23,650 --> 01:34:25,850 on the internet, if they want to use. 1995 01:34:25,850 --> 01:34:28,330 So we just get a lot of functionality for free. 1996 01:34:28,330 --> 01:34:31,210 So similarly, when we had the second version of our images 1997 01:34:31,210 --> 01:34:35,770 file a moment ago, the reason that I can now just say rounded-circle 1998 01:34:35,770 --> 01:34:41,230 is because someone else invented that class for me. 1999 01:34:41,230 --> 01:34:44,110 So it's suffices for me just to use rounded-circle 2000 01:34:44,110 --> 01:34:48,700 and to include Bootstrap's code up here with this new link tag. 2001 01:34:48,700 --> 01:34:53,650 And voila, my website is more powerful and looks prettier 2002 01:34:53,650 --> 01:34:55,287 than it might otherwise look. 2003 01:34:55,287 --> 01:34:57,120 SPEAKER 1: Here's a question for you, David. 2004 01:34:57,120 --> 01:34:57,550 DAVID MALAN: Indeed. 2005 01:34:57,550 --> 01:35:00,258 SPEAKER 1: So you said we can create our own classes with period. 2006 01:35:00,258 --> 01:35:02,980 So if we wanted to create a rounded-circle class, 2007 01:35:02,980 --> 01:35:06,887 we would have a CSS file or higher up in this file that was .rounded-circle. 2008 01:35:06,887 --> 01:35:07,720 DAVID MALAN: Mm-hmm. 2009 01:35:07,720 --> 01:35:10,930 SPEAKER 1: What would happen if we had our own rounded-circle 2010 01:35:10,930 --> 01:35:12,753 and we imported the Bootstrap library? 2011 01:35:12,753 --> 01:35:14,170 DAVID MALAN: Really good question. 2012 01:35:14,170 --> 01:35:16,300 If you had your own definition of rounded-circle, 2013 01:35:16,300 --> 01:35:18,790 and Bootstrap had its own, whose would win? 2014 01:35:18,790 --> 01:35:21,500 Well, there, again, is the C in Cascading Style Sheets-- 2015 01:35:21,500 --> 01:35:25,880 whoever's class is defined most recently takes effect. 2016 01:35:25,880 --> 01:35:30,040 So if you had this link tag here, and then maybe a style tag below it, 2017 01:35:30,040 --> 01:35:32,080 or another link tag linking to your file, 2018 01:35:32,080 --> 01:35:34,570 and you both happen to choose accidentally 2019 01:35:34,570 --> 01:35:37,270 the same keyword for your class, whichever 2020 01:35:37,270 --> 01:35:39,850 one was defined most recently, lower in the file, 2021 01:35:39,850 --> 01:35:42,080 would override the previous one. 2022 01:35:42,080 --> 01:35:45,180 So you generally want to be where those kinds of collisions, so to speak. 2023 01:35:45,180 --> 01:35:47,810 SPEAKER 1: So this might be an accidental overwrite, or maybe 2024 01:35:47,810 --> 01:35:48,320 intentional. 2025 01:35:48,320 --> 01:35:48,980 Who knows? 2026 01:35:48,980 --> 01:35:50,147 DAVID MALAN: Indeed, indeed. 2027 01:35:50,147 --> 01:35:52,285 It could be a feature or a bug, so to speak. 2028 01:35:52,285 --> 01:35:54,410 Well, let's take a look at a couple of examples too 2029 01:35:54,410 --> 01:35:59,840 that are really synergistic with some of the media with which you've 2030 01:35:59,840 --> 01:36:02,840 been experimenting and creating for this particular class. 2031 01:36:02,840 --> 01:36:06,860 Let's go ahead and open up iframe1.html. 2032 01:36:06,860 --> 01:36:09,800 And this is one of the last tags we'll take a look at. 2033 01:36:09,800 --> 01:36:11,900 Iframe is like an integrated frame. 2034 01:36:11,900 --> 01:36:14,870 It's like an embedded web page inside of a web page. 2035 01:36:14,870 --> 01:36:17,120 And this is a useful technique, because if you've ever 2036 01:36:17,120 --> 01:36:21,230 noticed various websites, of course, embed YouTube videos, or Vimeo 2037 01:36:21,230 --> 01:36:25,790 movies, or images, certainly, from Flickr and all sorts of other websites. 2038 01:36:25,790 --> 01:36:27,590 How did they actually do that? 2039 01:36:27,590 --> 01:36:32,150 Sometimes using an iframe, which is like saying, OK, I'm making my web page, 2040 01:36:32,150 --> 01:36:36,050 but inside of my web page, I'd like to allocate a rectangular region 2041 01:36:36,050 --> 01:36:37,430 for someone else's web page. 2042 01:36:37,430 --> 01:36:39,980 And maybe that web page is actual text [? and ?] images, 2043 01:36:39,980 --> 01:36:41,510 or maybe it's actually a video. 2044 01:36:41,510 --> 01:36:44,270 YouTube uses this technique, the iframe tag, 2045 01:36:44,270 --> 01:36:48,770 to allow you and I to embed videos that they're hosting on their servers, 2046 01:36:48,770 --> 01:36:49,627 but in our website. 2047 01:36:49,627 --> 01:36:51,710 And that's a wonderfully powerful tool, because it 2048 01:36:51,710 --> 01:36:55,370 means I don't have to figure out how to host videos on my own website. 2049 01:36:55,370 --> 01:36:56,670 So how do I do this? 2050 01:36:56,670 --> 01:37:00,620 Well, here's an example of HTML iframe1.html. 2051 01:37:00,620 --> 01:37:04,050 All of these tags are now familiar, from earlier examples. 2052 01:37:04,050 --> 01:37:05,733 The only new one is iframe. 2053 01:37:05,733 --> 01:37:08,150 It takes an attribute, optionally called allowfullscreen-- 2054 01:37:08,150 --> 01:37:10,850 if you want that little expansion icon to work, 2055 01:37:10,850 --> 01:37:14,000 so that you can fill the screen with the user's video. 2056 01:37:14,000 --> 01:37:18,260 frameborder="0" just gets rid of a stupid default border that you would 2057 01:37:18,260 --> 01:37:20,660 otherwise see on your web page, which just looks ugly, 2058 01:37:20,660 --> 01:37:22,130 but you don't need to remove it. 2059 01:37:22,130 --> 01:37:26,060 Height means give me a rectangle that's 315 pixels tall, 2060 01:37:26,060 --> 01:37:28,700 because that's how big I've decided I want my video to be. 2061 01:37:28,700 --> 01:37:30,680 What is the source of this iframe? 2062 01:37:30,680 --> 01:37:32,780 Well, I want it to be this URL from YouTube. 2063 01:37:32,780 --> 01:37:35,850 And I just looked at YouTube and I clicked the Share icon, 2064 01:37:35,850 --> 01:37:39,032 and clicked Embed, and I found the URL that I actually want. 2065 01:37:39,032 --> 01:37:41,240 If you're familiar with YouTube from your own videos, 2066 01:37:41,240 --> 01:37:43,010 you'll know that they have their own IDs. 2067 01:37:43,010 --> 01:37:44,540 And that's all that is there. 2068 01:37:44,540 --> 01:37:46,190 And then at the end here is width. 2069 01:37:46,190 --> 01:37:49,250 The width of my video, or the little rectangle in the window 2070 01:37:49,250 --> 01:37:51,350 should be 560 pixels. 2071 01:37:51,350 --> 01:37:54,350 Weirdly, the iframe should have nothing inside of it, 2072 01:37:54,350 --> 01:37:57,290 but you indeed need to close it for historical reasons. 2073 01:37:57,290 --> 01:38:00,380 So sometimes in the tech world, left hand didn't talk the right hand, 2074 01:38:00,380 --> 01:38:02,510 and you have these inconsistencies, and you just 2075 01:38:02,510 --> 01:38:05,540 have to kind of remember that these disparities exist. 2076 01:38:05,540 --> 01:38:09,198 So nothing goes in between those tags, but you do need to close the tag. 2077 01:38:09,198 --> 01:38:10,740 Well, what's this going to look like? 2078 01:38:10,740 --> 01:38:16,010 Well, let me open up iframe1.html, and voila, you'll see some familiar faces. 2079 01:38:16,010 --> 01:38:17,990 Now, it's a small rectangular video. 2080 01:38:17,990 --> 01:38:20,180 You can see that margin I described earlier, 2081 01:38:20,180 --> 01:38:23,210 kind of a stupid looking white border that's just there because. 2082 01:38:23,210 --> 01:38:23,720 That's fine. 2083 01:38:23,720 --> 01:38:26,540 I didn't get rid of it this time, but this is kind of ugly, right? 2084 01:38:26,540 --> 01:38:29,960 Why not let Dan and Ian fill the screen? 2085 01:38:29,960 --> 01:38:33,960 Well, I probably shouldn't have hardcoded that same width and height. 2086 01:38:33,960 --> 01:38:36,150 So how could we go about improving this? 2087 01:38:36,150 --> 01:38:41,630 Well, let me go and open up in my editor iframe2.html, and you'll see this. 2088 01:38:41,630 --> 01:38:47,390 Same HTML almost, except I've included-- actually, 2089 01:38:47,390 --> 01:38:49,640 let me get rid of this for just a moment. 2090 01:38:49,640 --> 01:38:52,430 Same HTML down here, except I've gotten rid 2091 01:38:52,430 --> 01:38:54,590 of the width and height, because remember, 2092 01:38:54,590 --> 01:38:57,947 we can control width and height with CSS. 2093 01:38:57,947 --> 01:38:59,780 And notice this is a slightly new technique. 2094 01:38:59,780 --> 01:39:02,840 If you want to apply the same properties to one, or two, or three 2095 01:39:02,840 --> 01:39:07,640 or more tags, that's fine, just separate them with commas like I did here. 2096 01:39:07,640 --> 01:39:10,970 So this is like saying in one fell swoop, hey, browser, 2097 01:39:10,970 --> 01:39:16,340 allocate 100% of your height and 100% of width not only to the whole thing, 2098 01:39:16,340 --> 01:39:19,640 but specifically to the body, and then within the body to the iframe. 2099 01:39:19,640 --> 01:39:22,790 So this kind of explodes the iframe and the body 2100 01:39:22,790 --> 01:39:27,170 to fill the entire screen horizontally and vertically. 2101 01:39:27,170 --> 01:39:30,357 iframe border, I just really hate that darn border, so I say border 0, 2102 01:39:30,357 --> 01:39:31,440 and that gets rid of that. 2103 01:39:31,440 --> 01:39:33,360 But that's just an aesthetic preference. 2104 01:39:33,360 --> 01:39:36,290 But the cool thing now is that now, it's going to kind of look 2105 01:39:36,290 --> 01:39:38,030 like we're watching Netflix or the like. 2106 01:39:38,030 --> 01:39:40,370 Because now, in iframe2, voila-- 2107 01:39:40,370 --> 01:39:42,530 now, it's filling the screen-- 2108 01:39:42,530 --> 01:39:43,660 almost, almost. 2109 01:39:43,660 --> 01:39:46,847 I still have this stupid border, or rather, this margin. 2110 01:39:46,847 --> 01:39:47,930 How can I get rid of that? 2111 01:39:47,930 --> 01:39:50,540 Well, let me actually go in here and edit this myself. 2112 01:39:50,540 --> 01:39:51,980 I know that this is on the body. 2113 01:39:51,980 --> 01:39:55,910 And I can say margin 0, save the file, and now again, 2114 01:39:55,910 --> 01:39:59,990 notice this white border around the video, if I reload now, voila. 2115 01:39:59,990 --> 01:40:01,670 Now, it looks pretty darn good. 2116 01:40:01,670 --> 01:40:04,790 Now, I'm fully filling the web page, and I have the ability 2117 01:40:04,790 --> 01:40:07,892 now to play this video, if I so choose. 2118 01:40:07,892 --> 01:40:09,350 SPEAKER 1: Just as good as Netflix. 2119 01:40:09,350 --> 01:40:09,710 DAVID MALAN: What's that? 2120 01:40:09,710 --> 01:40:11,240 SPEAKER 1: Just as good as Netflix. 2121 01:40:11,240 --> 01:40:12,782 DAVID MALAN: Just as good as Netflix. 2122 01:40:12,782 --> 01:40:14,030 Ever more engaging. 2123 01:40:14,030 --> 01:40:19,720 Unfortunately, Dan and Ian don't look so good if I start doing this. 2124 01:40:19,720 --> 01:40:22,130 So we can eventually get rid of one or both of them. 2125 01:40:22,130 --> 01:40:25,160 So it looks like the video is not actually maintaining its aspect ratio. 2126 01:40:25,160 --> 01:40:27,950 And this, of course, is going to bother anyone watching it. 2127 01:40:27,950 --> 01:40:32,450 So of course, it would make sense maybe to make sure not 100%, 100%, 2128 01:40:32,450 --> 01:40:35,330 because then it's dependent on the size of the user's window. 2129 01:40:35,330 --> 01:40:39,260 Let me enforce a 16 by 9 aspect ratio, for instance. 2130 01:40:39,260 --> 01:40:40,460 Well, how can I do that? 2131 01:40:40,460 --> 01:40:41,840 Honestly, it's not easy. 2132 01:40:41,840 --> 01:40:44,090 It would take me some amount of time and tinkering 2133 01:40:44,090 --> 01:40:47,310 using CSS to figure out the right numbers, and the math, 2134 01:40:47,310 --> 01:40:49,770 and the sort of dynamism so that I ensure 2135 01:40:49,770 --> 01:40:51,900 that this video is always 16 by 9. 2136 01:40:51,900 --> 01:40:53,220 But you know what? 2137 01:40:53,220 --> 01:40:55,170 Bootstrap's figured that out for me. 2138 01:40:55,170 --> 01:41:00,030 If I go ahead here and search for video, and go under Embeds, 2139 01:41:00,030 --> 01:41:02,730 you'll actually see that Bootstrap provides you 2140 01:41:02,730 --> 01:41:05,160 with the ability to create responsive video or slideshow 2141 01:41:05,160 --> 01:41:07,890 embeds based on the window of the parent dot dot dot. 2142 01:41:07,890 --> 01:41:12,270 It's a bit of a mouthful, but responsive is this term of art in the tech world 2143 01:41:12,270 --> 01:41:16,980 that just means an element on the web page that dynamically resizes, 2144 01:41:16,980 --> 01:41:19,270 based on the device in question. 2145 01:41:19,270 --> 01:41:23,040 So if I scroll down further, you'll see here under Aspect Ratios, 2146 01:41:23,040 --> 01:41:27,360 oh, here on Bootstrap's website is some sample HTML 2147 01:41:27,360 --> 01:41:31,380 that uses the tag Dan mentioned earlier, the div tag, via which, 2148 01:41:31,380 --> 01:41:35,910 using some special classes, can you specify what your aspect ratio is. 2149 01:41:35,910 --> 01:41:37,517 What aspect ratios are available? 2150 01:41:37,517 --> 01:41:38,850 Well, they support these three-- 2151 01:41:38,850 --> 01:41:41,610 21 by 9, 16 by 9, and 4 by 3-- 2152 01:41:41,610 --> 01:41:45,730 if you use Bootstrap's premade classes. 2153 01:41:45,730 --> 01:41:48,630 So again, it's just like a buffet of features, 2154 01:41:48,630 --> 01:41:52,440 none of which you would know necessarily from the get-go how to create yourself. 2155 01:41:52,440 --> 01:41:53,602 But that's the whole point. 2156 01:41:53,602 --> 01:41:55,560 These are sort of black boxes that you can just 2157 01:41:55,560 --> 01:41:58,120 use off the shelf in your own projects. 2158 01:41:58,120 --> 01:42:03,960 So if I go now into iframe3.html, the third version, 2159 01:42:03,960 --> 01:42:06,900 notice that this version, if I resize my window, 2160 01:42:06,900 --> 01:42:09,270 actually maintains it's aspect ratio. 2161 01:42:09,270 --> 01:42:12,450 It does add some letterboxing, but frankly, that's the only way to do it. 2162 01:42:12,450 --> 01:42:16,170 If you want to maintain a 16 by 9, you got to fill the space somehow else. 2163 01:42:16,170 --> 01:42:19,180 Maybe I chose black, you might choose white or something else. 2164 01:42:19,180 --> 01:42:22,440 But at least now, Dan and Ian have remained proportional. 2165 01:42:22,440 --> 01:42:23,590 Well, how did we do this? 2166 01:42:23,590 --> 01:42:27,030 Well, if I open up iframe3.html, you'll see 2167 01:42:27,030 --> 01:42:30,390 that I've again, at the top of my page, included Bootstrap's code. 2168 01:42:30,390 --> 01:42:32,940 And that's just copy and paste from their documentation. 2169 01:42:32,940 --> 01:42:37,500 But then down here, notice that I've added these classes. 2170 01:42:37,500 --> 01:42:39,900 But I had to do a little bit more, and I only knew this 2171 01:42:39,900 --> 01:42:41,550 from reading Bootstrap's documentation. 2172 01:42:41,550 --> 01:42:44,460 At first glance, these would have no meaning to anyone 2173 01:42:44,460 --> 01:42:46,290 else without the documentation. 2174 01:42:46,290 --> 01:42:49,380 I just copied and pasted the recommended classes 2175 01:42:49,380 --> 01:42:52,290 and added the requisite wrapper tags, like divs, 2176 01:42:52,290 --> 01:42:54,330 so that Bootstrap can do its thing. 2177 01:42:54,330 --> 01:42:58,860 And again, there's the distinction-- it's useful to understand how CSS works 2178 01:42:58,860 --> 01:43:00,660 and what you can do with it, but you don't 2179 01:43:00,660 --> 01:43:03,618 need to necessarily spend a huge amount of time getting into the weeds. 2180 01:43:03,618 --> 01:43:07,200 When all you care about is a high level problem, like aspect ratio, 2181 01:43:07,200 --> 01:43:11,220 libraries like Bootstrap exist to save you and me time, 2182 01:43:11,220 --> 01:43:13,710 so we can focus on the problems we do care about, 2183 01:43:13,710 --> 01:43:15,870 and not the ones that we don't. 2184 01:43:15,870 --> 01:43:22,380 Now, we mentioned those HTTP parameters earlier, those customizations, 2185 01:43:22,380 --> 01:43:24,000 notice how this is relevant now. 2186 01:43:24,000 --> 01:43:26,700 In our fourth and final example on iframes, 2187 01:43:26,700 --> 01:43:30,730 notice what I've done with Dan and Ian's introductory video. 2188 01:43:30,730 --> 01:43:36,230 Here is the same embed URL as before, but notice now that question mark. 2189 01:43:36,230 --> 01:43:39,900 There's a question mark now, after which is autoplay 2190 01:43:39,900 --> 01:43:44,730 equals 1, then an ampersand, then list equals, then this cryptic string. 2191 01:43:44,730 --> 01:43:49,740 Then if I keep going, we'll see at the very end of this line mute=1, 2192 01:43:49,740 --> 01:43:52,075 after another ampersand. 2193 01:43:52,075 --> 01:43:52,950 Well, what are those? 2194 01:43:52,950 --> 01:43:53,783 Well, you know what? 2195 01:43:53,783 --> 01:43:57,010 I googled this-- YouTube embed parameters-- 2196 01:43:57,010 --> 01:44:00,000 which is the term of art for things that come after the question mark. 2197 01:44:00,000 --> 01:44:02,790 I found this documentation right on Google's home page, 2198 01:44:02,790 --> 01:44:05,130 and I scroll down to Supported Parameters. 2199 01:44:05,130 --> 01:44:10,200 And I found one called autoplay, and I found one called list, 2200 01:44:10,200 --> 01:44:13,430 and I found another called-- 2201 01:44:13,430 --> 01:44:19,380 not here-- mute documented later in the documentation, unfortunately, 2202 01:44:19,380 --> 01:44:21,600 that led me to realize that, you know what? 2203 01:44:21,600 --> 01:44:26,520 If I do use that same YouTube URL, but embed these parameters 2204 01:44:26,520 --> 01:44:29,220 after the question mark, notice how I can slightly 2205 01:44:29,220 --> 01:44:33,930 improve my user experience, so that when users visit Dan and Ian's page here, 2206 01:44:33,930 --> 01:44:39,320 it immediately starts playing. 2207 01:44:39,320 --> 01:44:41,700 And so it's muted, so we're not going to hear them. 2208 01:44:41,700 --> 01:44:43,720 But this is arguably the experience I now want, 2209 01:44:43,720 --> 01:44:47,303 if the whole purpose of coming to this website is to see the video played. 2210 01:44:47,303 --> 01:44:50,220 So very familiar features that you yourself might have seen on the web 2211 01:44:50,220 --> 01:44:50,850 before. 2212 01:44:50,850 --> 01:44:54,230 And they're actually pretty accessible, not just off the top of your head, 2213 01:44:54,230 --> 01:44:55,980 but if you assemble these various building 2214 01:44:55,980 --> 01:44:59,280 blocks of HTML, and CSS, and the features therein, 2215 01:44:59,280 --> 01:45:03,120 can you reconstruct now some of these very familiar user 2216 01:45:03,120 --> 01:45:05,430 interface mechanisms. 2217 01:45:05,430 --> 01:45:08,173 Let's do one last set of examples to set the stage for where 2218 01:45:08,173 --> 01:45:10,590 you're going to be going-- not for this week's assignment, 2219 01:45:10,590 --> 01:45:13,650 but for perhaps your final project, and for our next lecture, 2220 01:45:13,650 --> 01:45:16,290 wherein we're focus on a third language called JavaScript. 2221 01:45:16,290 --> 01:45:19,860 JavaScript, as we'll eventually see, is an actual programming language. 2222 01:45:19,860 --> 01:45:21,180 You can write software with it. 2223 01:45:21,180 --> 01:45:23,450 You can make interactive things with it. 2224 01:45:23,450 --> 01:45:27,748 HTML and CSS or more about markup, and aesthetics, and the display thereof. 2225 01:45:27,748 --> 01:45:30,790 So we're going to need some JavaScript to make our websites even fancier. 2226 01:45:30,790 --> 01:45:33,570 But let's look at this final set of examples here. 2227 01:45:33,570 --> 01:45:40,080 In images5.html, I have a very simple and very primitive gallery of sorts, 2228 01:45:40,080 --> 01:45:42,870 I've got some thumbnails up here-- all of them the same cat, 2229 01:45:42,870 --> 01:45:44,138 for demonstration's sake-- 2230 01:45:44,138 --> 01:45:45,930 and then this big rectangular region that I 2231 01:45:45,930 --> 01:45:47,820 want to load the full image into. 2232 01:45:47,820 --> 01:45:51,840 So this is like a very weak version of Instagram, or SmugMug, or Google 2233 01:45:51,840 --> 01:45:53,400 Photos, or something like that. 2234 01:45:53,400 --> 01:45:57,150 But let me go ahead and click on any of the identical cats, and voila, 2235 01:45:57,150 --> 01:46:00,000 they end up in that particular box. 2236 01:46:00,000 --> 01:46:02,435 So a very similar mechanism to a lot of these photo-based 2237 01:46:02,435 --> 01:46:04,560 websites where you can toggle among the thumbnails, 2238 01:46:04,560 --> 01:46:06,390 and see a particularly big image. 2239 01:46:06,390 --> 01:46:10,770 This uses an iframe, and it actually is using HTML tags 2240 01:46:10,770 --> 01:46:14,125 to load individual images into the bigger iframe. 2241 01:46:14,125 --> 01:46:16,500 But this iframe, I decided, is just going to be a square. 2242 01:46:16,500 --> 01:46:20,160 It's going to fill the whole screen like Dan and Ian's video. 2243 01:46:20,160 --> 01:46:21,870 But that would be one approach. 2244 01:46:21,870 --> 01:46:25,720 Though another progression of this, though, might be something like this. 2245 01:46:25,720 --> 01:46:31,720 Let me go ahead and open up now images6.html. 2246 01:46:31,720 --> 01:46:33,660 Now, this looks a little cooler. 2247 01:46:33,660 --> 01:46:37,920 I have now three identical cats, but I could certainly swap out 2248 01:46:37,920 --> 01:46:39,930 those for dogs or other such cats. 2249 01:46:39,930 --> 01:46:42,270 Each of them has a title, and a description, 2250 01:46:42,270 --> 01:46:44,520 and then a button linking to the reference via which 2251 01:46:44,520 --> 01:46:46,270 I got this image in the first place. 2252 01:46:46,270 --> 01:46:48,420 And so now, things are looking kind of nice. 2253 01:46:48,420 --> 01:46:51,480 But honestly, based only on a couple of hours of HTML, how 2254 01:46:51,480 --> 01:46:55,350 would you even begin to have three different cats, and then 2255 01:46:55,350 --> 01:46:58,540 some bold facing, and some text, and some pretty blue buttons? 2256 01:46:58,540 --> 01:47:00,900 This is a lot quite quickly. 2257 01:47:00,900 --> 01:47:05,610 But if you know HTML and you know how to use CSS in libraries therefore, 2258 01:47:05,610 --> 01:47:10,830 can you, as in images6.html, do a little something like this? 2259 01:47:10,830 --> 01:47:14,010 At first glance, there's a lot going on in this file. 2260 01:47:14,010 --> 01:47:15,750 But how did I know to do this? 2261 01:47:15,750 --> 01:47:17,760 I read Bootstrap's documentation. 2262 01:47:17,760 --> 01:47:19,420 And you'll notice keywords like card. 2263 01:47:19,420 --> 01:47:20,130 Why? 2264 01:47:20,130 --> 01:47:23,040 Well, in Bootstrap, I got to poking around, thinking 2265 01:47:23,040 --> 01:47:26,730 about what other features they might have, and indeed, I found cards. 2266 01:47:26,730 --> 01:47:29,310 Cards-- if I scroll through the documentation, 2267 01:47:29,310 --> 01:47:30,480 you see some samples here. 2268 01:47:30,480 --> 01:47:33,527 And I'm like, oh, I like this layout, like an image with a caption 2269 01:47:33,527 --> 01:47:36,360 here, and then the title, and then some text, and some blue buttons. 2270 01:47:36,360 --> 01:47:39,090 I don't really know how to do that, or it would take me some time 2271 01:47:39,090 --> 01:47:39,798 to figure it out. 2272 01:47:39,798 --> 01:47:42,300 But that's fine, because if I scroll further, 2273 01:47:42,300 --> 01:47:46,110 this library, like other free libraries, they'll give you some sample code. 2274 01:47:46,110 --> 01:47:48,720 And I literally just copied and pasted this HTML, 2275 01:47:48,720 --> 01:47:52,290 I filled in some of the dot dot dots with my own cat.jpg, 2276 01:47:52,290 --> 01:47:55,470 and I read the additional documentation for customization 2277 01:47:55,470 --> 01:47:59,940 to figure out how I can use these cards three times in a row in my own website. 2278 01:47:59,940 --> 01:48:03,900 So again, we're just scratching the surface of a lot of the free features. 2279 01:48:03,900 --> 01:48:06,180 And this is how some of today's most popular websites 2280 01:48:06,180 --> 01:48:09,510 really get made-- by standing on the shoulders of others who have 2281 01:48:09,510 --> 01:48:12,160 helped them solve some common problems. 2282 01:48:12,160 --> 01:48:14,500 So the last common problem we'll solve is this-- 2283 01:48:14,500 --> 01:48:16,230 this one also caught my eye. 2284 01:48:16,230 --> 01:48:19,860 Bootstrap, and other libraries like it-- which are just as free and open-source, 2285 01:48:19,860 --> 01:48:21,220 so to speak-- 2286 01:48:21,220 --> 01:48:23,520 also gives you the ability to do things like this, 2287 01:48:23,520 --> 01:48:28,295 where you can have a slide of images depicted on the screen 2288 01:48:28,295 --> 01:48:29,670 here with controls, for instance. 2289 01:48:29,670 --> 01:48:31,860 So you could imagine this being a website where 2290 01:48:31,860 --> 01:48:34,958 you're clicking on your three favorite images on your own portfolio site. 2291 01:48:34,958 --> 01:48:37,500 Or down here, maybe this one, where there's even these little 2292 01:48:37,500 --> 01:48:40,270 breadcrumbs that show you how many images there are. 2293 01:48:40,270 --> 01:48:41,250 This is really cool. 2294 01:48:41,250 --> 01:48:43,830 I want this in my website, but my god, how 2295 01:48:43,830 --> 01:48:47,022 do I even begin to do that, and respond to mouse clicks, and the like? 2296 01:48:47,022 --> 01:48:49,230 Well, that's OK, because we have the building blocks. 2297 01:48:49,230 --> 01:48:52,140 And with Bootstrap, you'll see that there's some sample code. 2298 01:48:52,140 --> 01:48:55,530 And indeed, I copied and pasted this, and I started to customize it. 2299 01:48:55,530 --> 01:48:59,400 I recognized keywords, I recognized structure, like tags and attributes, 2300 01:48:59,400 --> 01:49:01,920 and I went ahead, and with a few minutes of effort, 2301 01:49:01,920 --> 01:49:06,730 I went ahead and created, finally, our last example tonight, images7. 2302 01:49:06,730 --> 01:49:08,670 And you'll see a few more lines at the top, 2303 01:49:08,670 --> 01:49:11,580 because I copied and pasted some more of the instructions, all 2304 01:49:11,580 --> 01:49:13,470 of it referring to Bootstrap. 2305 01:49:13,470 --> 01:49:15,570 But that's just from the documentation there. 2306 01:49:15,570 --> 01:49:21,900 You'll see more HTML but you'll see some familiar tags-- div, and ol, and li. 2307 01:49:21,900 --> 01:49:24,600 This is all based on that sample documentation. 2308 01:49:24,600 --> 01:49:27,000 And then you'll see up here, I decided my carousel 2309 01:49:27,000 --> 01:49:31,890 shall be 640 by 604 pixels, which matches the size of my Grumpy Cat. 2310 01:49:31,890 --> 01:49:36,090 And the effect in images7 is to do this. 2311 01:49:36,090 --> 01:49:39,720 I now have Grumpy Cat, I have the caption therefore-- 2312 01:49:39,720 --> 01:49:41,340 Grumpy Cat from Know Your Meme-- 2313 01:49:41,340 --> 01:49:42,755 and then a slider of three. 2314 01:49:42,755 --> 01:49:44,130 And then somehow, automatically-- 2315 01:49:44,130 --> 01:49:47,200 I'm not even controlling the keyboard-- is it sliding among the three 2316 01:49:47,200 --> 01:49:47,700 available? 2317 01:49:47,700 --> 01:49:50,860 Images I happened to use the same cat three times over, 2318 01:49:50,860 --> 01:49:55,110 but I just have to change the source attribute to dog.jpg, or bird.jpg, 2319 01:49:55,110 --> 01:49:58,620 or three different cats, or whatever to achieve the same result. 2320 01:49:58,620 --> 01:50:03,780 And this is the only thing tonight that we can't do with HTML and CSS alone. 2321 01:50:03,780 --> 01:50:06,510 This carousel, with which will end tonight, has, of course, 2322 01:50:06,510 --> 01:50:07,830 these interactive features. 2323 01:50:07,830 --> 01:50:09,920 On the one hand, it's sort of on autopilot. 2324 01:50:09,920 --> 01:50:13,050 It's scrolling itself, and indeed, it's scrolling visually, which 2325 01:50:13,050 --> 01:50:14,550 is something we didn't even look at. 2326 01:50:14,550 --> 01:50:16,300 I can click left and right, and I can even 2327 01:50:16,300 --> 01:50:19,350 click on this little thumbnails or those breadcrumbs. 2328 01:50:19,350 --> 01:50:22,740 That's going to require a little more power, not just the ability 2329 01:50:22,740 --> 01:50:26,160 to mark up content and the ability to stylize content. 2330 01:50:26,160 --> 01:50:28,717 We need to make it interactive, and so for that, we'll 2331 01:50:28,717 --> 01:50:31,800 introduce next time this language called JavaScript, an actual programming 2332 01:50:31,800 --> 01:50:34,210 language via which you can listen for mouse clicks, 2333 01:50:34,210 --> 01:50:36,000 you can scroll things from left to right, 2334 01:50:36,000 --> 01:50:38,190 and really bring life to your projects. 2335 01:50:38,190 --> 01:50:40,440 But ultimately, even though this has absolutely 2336 01:50:40,440 --> 01:50:43,290 been a firehose most likely between HTML and CSS 2337 01:50:43,290 --> 01:50:45,330 and now, these sort of teasers for next time, 2338 01:50:45,330 --> 01:50:50,040 realize that if you understand tags, and attributes, and their values, 2339 01:50:50,040 --> 01:50:53,580 and CSS properties and their values, and are going to be comfortable, 2340 01:50:53,580 --> 01:50:55,980 ultimately, poking around some online documentation, 2341 01:50:55,980 --> 01:50:58,500 you can build out your own vocabulary, and do these kinds 2342 01:50:58,500 --> 01:51:01,640 of examples and so many more. 2343 01:51:01,640 --> 01:51:03,640 So why don't we officially call it a night here? 2344 01:51:03,640 --> 01:51:05,777 And as always, we'll stick around for questions. 2345 01:51:05,777 --> 01:51:07,860 SPEAKER 1: I just have a couple questions for you. 2346 01:51:07,860 --> 01:51:09,830 As you said, it was a firehose for many people 2347 01:51:09,830 --> 01:51:11,580 where this is your first time seeing this. 2348 01:51:11,580 --> 01:51:15,230 And this is very kind of pedantic, where you're typing in all this HTML code. 2349 01:51:15,230 --> 01:51:19,110 But how do we kind of evolve from this to the next step? 2350 01:51:19,110 --> 01:51:22,080 Let's say that this is an interesting problem that we want to solve, 2351 01:51:22,080 --> 01:51:23,580 and we want to go on to next things. 2352 01:51:23,580 --> 01:51:27,870 How do we start to learn about things like libraries, and frameworks, and-- 2353 01:51:27,870 --> 01:51:28,590 what's next? 2354 01:51:28,590 --> 01:51:30,007 DAVID MALAN: Really good question. 2355 01:51:30,007 --> 01:51:31,980 So you can certainly pursue other courses 2356 01:51:31,980 --> 01:51:33,450 in web development and web design. 2357 01:51:33,450 --> 01:51:36,060 So the course Dan mentioned earlier, CS50, is one of them. 2358 01:51:36,060 --> 01:51:39,270 There's certainly any number of free online tutorials and references online. 2359 01:51:39,270 --> 01:51:42,390 Frankly, I learned HTML over the course of probably an hour or two, 2360 01:51:42,390 --> 01:51:44,040 when a TA taught me some years ago. 2361 01:51:44,040 --> 01:51:46,290 And then I've just kind of read up on technique since. 2362 01:51:46,290 --> 01:51:48,780 And so reading, and googling, and just experimenting. 2363 01:51:48,780 --> 01:51:51,530 What's nice about HTML and CSS is they can't really break things, 2364 01:51:51,530 --> 01:51:54,030 because worst case, something doesn't look the way you want. 2365 01:51:54,030 --> 01:51:58,470 So just hit Control-Z or Command-Z to undo what it is that you've done. 2366 01:51:58,470 --> 01:52:01,800 And really by experimenting, I think, you will learn a lot of this, 2367 01:52:01,800 --> 01:52:03,780 and just by googling references. 2368 01:52:03,780 --> 01:52:07,470 And when it comes to learning even new techniques, 2369 01:52:07,470 --> 01:52:09,380 the world is your oyster now, so to speak. 2370 01:52:09,380 --> 01:52:12,930 You can go to any website now, that you've been going to every day 2371 01:52:12,930 --> 01:52:15,900 until today, go to View, View Source, and you can actually 2372 01:52:15,900 --> 01:52:17,970 see how it is they built that. 2373 01:52:17,970 --> 01:52:21,030 Or go to Developer Tools and actually look at the HTML. 2374 01:52:21,030 --> 01:52:22,320 And just case in point-- 2375 01:52:22,320 --> 01:52:28,080 if I go, for instance, to harvard.edu, and I pull up View, Developer, 2376 01:52:28,080 --> 01:52:32,500 Developer Tools, you'll notice, if I shrink this a little bit-- 2377 01:52:32,500 --> 01:52:35,940 and for instance, suppose I really want to see how 2378 01:52:35,940 --> 01:52:38,400 did they make this Harvard University? 2379 01:52:38,400 --> 01:52:41,220 I can right-click or Control-click on that part of the web page-- 2380 01:52:41,220 --> 01:52:44,220 and if you've never noticed this, your browser might very well have this 2381 01:52:44,220 --> 01:52:44,910 option Inspect-- 2382 01:52:44,910 --> 01:52:48,270 it will jump you to the very line of HTML 2383 01:52:48,270 --> 01:52:52,300 in this website that is implementing that particular link to Harvard's 2384 01:52:52,300 --> 01:52:52,800 crest. 2385 01:52:52,800 --> 01:52:56,220 If I click on the triangle, you'll see that there's this tag called span. 2386 01:52:56,220 --> 01:52:58,720 That's similar in spirit to div, but a little bit different. 2387 01:52:58,720 --> 01:53:00,390 You'll see the word Harvard University. 2388 01:53:00,390 --> 01:53:03,720 And in short with enough ingenuity, can you reverse engineer 2389 01:53:03,720 --> 01:53:06,090 how it is a website did something so that you 2390 01:53:06,090 --> 01:53:09,458 can adapt some similar technique in your project too. 2391 01:53:09,458 --> 01:53:10,250 SPEAKER 1: Awesome. 2392 01:53:10,250 --> 01:53:14,070 As we all know, the internet is fraught with examples, for better or for worse. 2393 01:53:14,070 --> 01:53:16,650 Are there any references that you tend to rely on or think 2394 01:53:16,650 --> 01:53:20,010 are good, at least for the current time? 2395 01:53:20,010 --> 01:53:21,420 DAVID MALAN: Yeah, absolutely. 2396 01:53:21,420 --> 01:53:23,730 We can add these links, as well. w3schools.com 2397 01:53:23,730 --> 01:53:26,880 is a good one for HTML and CSS tutorials, 2398 01:53:26,880 --> 01:53:30,900 ultimately JavaScript as well there's another one from Mozilla, 2399 01:53:30,900 --> 01:53:34,943 the folks behind Firefox, which have a very authoritative website when 2400 01:53:34,943 --> 01:53:36,360 it comes to a lot of these things. 2401 01:53:36,360 --> 01:53:38,550 But generally, Google is your friend, and generally 2402 01:53:38,550 --> 01:53:40,920 speaking, the top hit or three will be pretty 2403 01:53:40,920 --> 01:53:43,130 good matches for any feature you want. 2404 01:53:43,130 --> 01:53:44,440 So what do I mean by that? 2405 01:53:44,440 --> 01:53:46,830 If you want to know how to left-align text, 2406 01:53:46,830 --> 01:53:50,310 literally Google CSS left-align text enter, and odds are, 2407 01:53:50,310 --> 01:53:52,040 you'll get any number of responses. 2408 01:53:52,040 --> 01:53:53,790 There's also a very popular website called 2409 01:53:53,790 --> 01:53:57,150 Stack Overflow, for programmers and web developers, 2410 01:53:57,150 --> 01:53:58,740 which is like a Q&A website. 2411 01:53:58,740 --> 01:54:01,410 And that tends to be one of the most popular places for Q&A, 2412 01:54:01,410 --> 01:54:04,980 and almost every question you might have has probably, amazingly, 2413 01:54:04,980 --> 01:54:06,350 been asked by someone else. 2414 01:54:06,350 --> 01:54:08,100 So finding those Google search results too 2415 01:54:08,100 --> 01:54:10,463 will help you solve problems really fast, as well. 2416 01:54:10,463 --> 01:54:11,255 AUDIENCE: Question. 2417 01:54:11,255 --> 01:54:12,005 DAVID MALAN: Yeah. 2418 01:54:12,005 --> 01:54:17,485 AUDIENCE: So I've heard about people tricking codes out [? there. ?] So 2419 01:54:17,485 --> 01:54:23,550 if you copy it and you try to put [? my effect your computer, ?] so how 2420 01:54:23,550 --> 01:54:25,770 do we avoid [INAUDIBLE]? 2421 01:54:25,770 --> 01:54:27,780 DAVID MALAN: So to be clear, the question 2422 01:54:27,780 --> 01:54:31,110 m how do you avoid someone copying your HTML and CSS, and therefore 2423 01:54:31,110 --> 01:54:32,020 your website? 2424 01:54:32,020 --> 01:54:35,130 AUDIENCE: No, like if you see something pretty cool 2425 01:54:35,130 --> 01:54:38,595 and you would like to use it, and when you copy the code, 2426 01:54:38,595 --> 01:54:42,643 it actually was a trick just so they can infect your computer. 2427 01:54:42,643 --> 01:54:43,310 DAVID MALAN: Oh. 2428 01:54:43,310 --> 01:54:44,680 AUDIENCE: I've heard of those before. 2429 01:54:44,680 --> 01:54:45,388 DAVID MALAN: Yes. 2430 01:54:45,388 --> 01:54:47,920 So what I have been opening is a very powerful tool. 2431 01:54:47,920 --> 01:54:52,150 When you go to Developer Tools, there have been issues where people are told, 2432 01:54:52,150 --> 01:54:56,590 click on Console instead of elements, and paste something from a website 2433 01:54:56,590 --> 01:54:59,980 to reset your Facebook password, or unlock free features. 2434 01:54:59,980 --> 01:55:03,080 That is never, never, never the thing to do. 2435 01:55:03,080 --> 01:55:05,740 There is no use case I can even think of where 2436 01:55:05,740 --> 01:55:07,900 that has solved the problem for me. 2437 01:55:07,900 --> 01:55:10,090 And what it's doing is this command line here, 2438 01:55:10,090 --> 01:55:12,280 this blinking prompt, which we did not use tonight, 2439 01:55:12,280 --> 01:55:15,790 really gives you control over the current web page, 2440 01:55:15,790 --> 01:55:18,220 and can lead to theft of information. 2441 01:55:18,220 --> 01:55:22,360 And so just ignore all such requests to do things like that. 2442 01:55:22,360 --> 01:55:23,920 Really good question. 2443 01:55:23,920 --> 01:55:26,837 All right, let's call it a night again, and we'll stick around though, 2444 01:55:26,837 --> 01:55:28,890 if folks have one-on-one questions. 2445 01:55:28,890 --> 01:55:29,530