[MUSIC PLAYING] SPEAKER 1: Hello, everybody, and welcome to one of our last lectures for exploring digital media. I can't believe that we're here at the end. This week we're going to cover web development. And with us is a special lecturer, David Malan from Harvard University, who teaches the intro to computer science course CS50. It is a great course that many of us here have taken, and I would highly recommend that you take, if you're interested is piqued tonight with your web development stuff. It covers the language C-- it covers C, it covers Python now. When I took it, it was PHP. So Python, and then you get a little bit of JavaScript, as well. You want to-- DAVID MALAN: Little bit of SQL, a little bit of Scratch, and then the two languages will be looking at tonight-- HTML and CSS, of course. AUDIENCE: People still use C? DAVID MALAN: Indeed. It's actually one of the most popular languages, albeit for very specialized purposes still. AUDIENCE: Wow. SPEAKER 1: All right. So feel free to chime in, ask questions, and make this as lively as possible. And welcome David. Thank you. DAVID MALAN: Thank you. So nice to see everyone. So the overarching goal tonight is web development, the goal of which is to empower you to understand how the web itself works, how to write web pages in these languages called HTML and CSS. And ultimately, give you enough technical comfort with which to exhibit your own work, creating, ultimately, a portfolio once you're out there in the real world, whether it's for photography or for videos that you've put together. And indeed, even if you're going into tonight's material feeling quite less comfortable, even if you're quite comfortable now with a camera, or at least more comfortable now with a camera, realize that what we'll do tonight is actually relatively accessible. We'll focus on the fundamental principles on how the web works and how web pages work, and the language itself is-- HTML-- and how you can teach yourself here on after more about the language, and teach yourself more techniques than we might actually look at in the class itself. So if you walk away tonight, or after watching this with just a bit more curiosity and a bit more interest in diving into this world, we'll have done our job. Because even in the real world, if you go off and want to create something like a portfolio website, or something for work, or for personal projects using popular sites like Squarespace or Wix-- which are site-builders-- generally, most people, whether technical or less technical, decide that they really always want to tweak something, or they want to add some feature or remove some feature. And once you understand a bit of tonight's material-- HTML and CSS-- can you go in and do those things yourself, and solve problems on your own. So without further ado, let's consider how we get to actually making our own web pages. Here's a URL, which is, of course, the address via which you can access something on the web. HTTP refers to the protocol or the language that a web server and a web browser speak. And we won't go too much into the weeds on what that is, but suffice it to say there is a convention via which web browsers know how to request web pages from the internet, and a convention via which web servers know how to respond with the contents of web pages. Now, where are those servers? Typically at domain names, like example.com, or more specifically here, www.example.com. And of course, this just represents one or more servers on the internet. And I say one or more because the bigger companies out there, like the Googles of the world certainly have more than one server that lives at a particular address, so that they can handle thousands or hundreds of thousands of users at once. So for tonight's purposes though, we'll assume this refers just to a single web server. But what does it mean when you visit www.example.com? Well, it turns out that implicit in that short URL is generally some file name. So when you don't specify a file name after the slash in a URL, it typically implies something like index.html. It can also be index.htm, or default.asp, or default.htm. It completely depends on the web server. But probably the most common convention in the tech world is to name a web page in a file called index.html, because at the end of the day, that is all the web page is. Whether you're visiting Facebook, or Google, or any other web-based application these days, what you are technically doing is yes, visiting a URL, but that URL is telling the server, please give me a specific file from that server so that my browser can show me the contents of that file. So here's where we'll spend all of our time tonight, actually creating the language-- HTML-- that is ultimately inside of this file. So what is HTML? It's not a programming language, per se. You can't use this language to build programs or write software. It's a markup language, which means it has what are called tags, which we'll see in just a moment. And those tags will allow you to tell a browser what to display on the screen and how to display it. So if you rewind quite a few years ago, if any of you grew up using WordPerfect before there were WYSIWYG editors-- what you see is what you get-- like Microsoft Word, you actually used to use low-level commands in your text file to say, hey, WordPerfect, start making my text bold, hey, WordPerfect, stop making my text bold. So it was very pedantic. And you, the human, the author had to tell the word processor exactly what to do. Well, turns out HTML is Hypertext Markup Language. And a markup language, as we'll see again, has tags, special instructions to the computer that tells it what to do with other words in that file. And hypertext is just a fancy term referring to the ability to link one page to another, ergo Hypertext Markup Language. So let's take a look at the simplest possible web page. If you were to visit some web page-- maybe it's www.example.com-- and see just a web page that says something simple like, hello world. Very simple black and white text. Nothing else, no images. The contents of that file index.html might look quite simply like this. So this is, perhaps, the simplest web page that we could write that a browser would understand. So if I visit http://www.example.com and hit Enter, most likely what the server is doing is sending me back over the internet a file called index.html-- just a text file. And inside of that file is literally these characters, top to bottom, left to right. When my browser-- whether it's Chrome, or Edge, or Firefox, or Safari, or any other browser-- receives this file, it literally looks at it, reads it top to bottom, left to right, and then does with this file says, displaying on the screen whatever the tags, so to speak, therein tell it to do. So what are these tags? Well, let's look at these step by step. The first line in this file is probably the most cryptic that we'll actually see. Its what's called a document type declaration. So it's a little cryptic in that it has an open angle bracket-- or a less than sign-- and then an exclamation point, and then the word DOCTYPE, and then a space, and then html, and then a closed bracket-- or a greater than sign. Well, that's just an arbitrary sequence of characters that the consortium that designed this language years ago decided means, hey, browser, here comes a file written in this language called HTML, and specifically, the latest version thereof, which is HTML5. Now, you can't glean that by just glancing at this first line in the file, but indeed, this just means, hey, browser, here comes a file written in the latest version of this language. So this is the kind of thing you just copy paste, whenever making a web page. Now, it starts to follow a pattern. So notice that there's already some symmetry, if you look at the next line and the very last line. So the symmetry here speaks to the fact that HTML is indeed a markup language. And you tell it what to do and when to no longer do that thing. And by that, I mean this-- the browser, upon seeing this line of code, is being told, hey, browser, here comes my HTML. And when the browser sees this last line later on in the file-- open bracket forward slash html close bracket-- that's telling the browser that's it for the web page. So it sort of start, stop, or open, close, so to speak. Now, inside of this HTML page, notice there's another pair of tags, so to speak. Open bracket head closed bracket, and then open bracket slash head closed bracket. And notice there the symmetry. In between those are some additional tags, that we'll see in a moment, but this says, hey, browser, here comes the head of the page-- the top of the page, so to speak. And this says, hey, browser, that's it for the head of the page. So just as a human actually has a head that's about yea big, and a human has a body which is about yea bigger, similarly, in a web page, does the head typically comprise just the very top of the file, like the title bar or the tab. The body, as we'll see, of the web page is actually everything else, the actual contents-- the text, the images, the movies, and the like. So what goes inside the head of a web page? Just the title. So these two tags collectively say, hey, browser, here comes the title of my web page. And then, hey, browser, that's it for the title. What is the actual title? Well, the first set of characters that actually have no angled brackets-- greater than or less than-- around them, just raw text. So the fact that hello comma title appears in between the open title tag and the closed title tag-- or the start tag and the end tag, so to speak-- means this is what will show up in the very tip top of the file in like the tab in your particular browser. Lastly, the body of the page. This says, hey, browser, here comes the body, the essence of my page. What's going to be in the body? Literally this string, hello comma body. So this is a super simple web page that's just saying hello to the world, calling attention to the title up top and the body down below. So let's actually see this in action. It's one thing to talk about this in the abstract and on a premade slide, but let's actually create this same web page using my own Mac or your own PC. So how do we go about doing this? Well, I'm going to go ahead and open up a program called VSCode, or Visual Studio Code. This is among the more popular text editing programs out there these days. It's essentially a super simple word processor-- so similar in spirit to Google Docs or to Microsoft Word-- but it doesn't have bold facing, it doesn't have italics, it doesn't have auto numbering, and such. It only supports pure text, and therefore, something like HTML, which is just text on the screen. So I'm going to go ahead and create a new file here on my own Mac. And I'm going to go ahead and save this in advance, say on my desktop, as a file called hello.html. And now I see in this program that I just have a blinking cursor on line 1 in a file called hello.html. Well, what am I really doing here? Well, it seems to be the case that I'm creating a file called hello.html that eventually could live on a web server. I could upload this to Google.com, or Facebook.com, or whatever website I actually happen to be creating. But for now, it lives on my own Mac, or perhaps on your own PC. If you'd like to follow along at home-- or you will do this with the next assignment on your own Mac or PC. This web page, for the moment, is just going to live on my computer. And I'll be able to open it on my own browser, but it doesn't live on the internet-- it lives on my own hard drive. And that's the nice thing about web development, you can do it on your own Mac, PC, laptop, desktop, or the like. And only once you're ready to share those files with the world do you need to somehow drag and drop them via some program to a server, and actually host it somewhere on the actual internet at a URL. SPEAKER 1: And just out of curiosity David, using Microsoft's VS Code, are there other equivalent applications to use? Is it something special about that? DAVID MALAN: No, not at all. This VSCode just happens to be super popular these days, but these trends come and go. Other popular options include programs called Atom, include Sublime Text, Vim, Emacs, and a bunch of others, as well. Doesn't matter, ultimately, which one you use. This tends to be sort of a religious preference in the tech world. You just get used to one editor, and you like to use that one. This just happens to be among the trendier ones right now. SPEAKER 1: And are there any gotchas for the built-in Mac OS TextEdit, or anything like that? DAVID MALAN: Indeed. I'm glad you mentioned TextEdit. So with Mac OS comes a program called TextEdit, which allows you to edit text files. Ironically, by default, it doesn't let you edit text files. It lets you edit what are called rich text files, which are very simple Microsoft Word documents that do have bold facing, and italics, and underline, and the like. So if you use TextEdit, you actually have to go into your settings and disable rich text mode, and enable plain text mode. However, if you're on Windows though, and use a program called Notepad.exe, that will work out of the box. But it comes with some of its own complications, such that creating files in that program tend not to open well sometimes in other programs. So frankly, for any kind of web development these days, using a more proper, freely available, but downloadable program, like Atom, or VSCode, or Sublime tends to be the way to go. SPEAKER 1: We're getting some comments online about application called Brackets and Notepad++. DAVID MALAN: Brackets, [INAUDIBLE]---- yes. The list goes on. You can use absolutely anything you want, certainly, for the class and the real world. The point here is that it doesn't get much simpler than this, a black and white [? prompt ?] just waiting for me to type characters into the screen. So what are those characters going to be? So I'm going to go ahead and really recreate what we saw a moment ago, saying, hey, browser, the type of this document is HTML. And then I'm going to go ahead and say, hey, browser, here comes my HTML. And just so that I don't make any mistakes, I'm going to preemptively close this tag. I don't have to do this, but this way, I don't have to remember to come back and actually close or end that tag later on. What are the two things that come inside of the HTML tag? AUDIENCE: Head. DAVID MALAN: Yeah, so we had the head. And I'll do that whole thing preemptively. Head-- and then what was after that? AUDIENCE: Title. DAVID MALAN: Title was inside of that. What comes after head, if you recall? Literally head here, and then-- AUDIENCE: Body. DAVID MALAN: Body was the rest of it. So I can preemptively do this. So I can write the page really in any order, but this now speaks to the structure. So notice the symmetry. I've opened and closed HTML. Inside of that, I'd open and closed head, and done the same with body. So now, as you say, within head, I can go ahead and create my title. So I can go ahead and say title. And I'll go ahead and close that title tag. And then up here, I'll go ahead and say hello title-- though I could type anything, of course, that I want here. And then down in the body, I'll go ahead and say hello comma body, and click Save. Now, notice a few details-- I somehow have typed white, gray, and blue text even without trying in any way-- certainly without clicking any buttons. That's one of the features you get with text editors like VSCode, or Notepad++, or Atom, or the like. They give you what's called syntax highlighting, which is just a user-friendly feature that, if it supports the language you're writing in-- whether it's HTML, some other language called CSS, or C++, or JavaScript, or bunches of other languages-- it'll just automatically highlight the semantically interesting parts of what you have typed to draw your attention to what are angle brackets, what are tag names, what is actual text. It's not in the file itself, it's just a human-friendly presentation thereof. So I've save this file. I said a moment ago that I saved it on my desktop. So what can I do with this file? Well, I'm going to go ahead and just open up a browser-- say Chrome, though I could use Safari, or Firefox, or Edge, or anything else. And I'm going to go to literally File, Open File-- which is probably not something you've ever done with your browser, because, of course, you've typically gone to Open Location. Or frankly, you probably haven't even done that. You've just typed the URL right into the browser. But this is just saying, hey, browser, go ahead and open a file that happens to be called hello.html. And voila. I can do that on my own Mac, even without having a server or the whole internet involved. You'll see hello body is in the body of the page, the biggest part. You'll see hello title is along the top here, right in that tab. And notice the URL is kind of interesting. It's a file-- clearly, because I just created. And it's in my Users directory in a folder called jharvard-- for John Harvard-- in his desktop folder, and then in a file called hello.html. So this is just the way of viewing an HTML file, not on the internet, but on my own Mac or PC. So after tonight, and for your final project, perhaps, or your real world portfolio, the final step in web development would be to like drag and drop this and any other files up to some server so that you can have it hosted at a domain name, like example.com. But everything we'll do today just happens to live on my own computer. So that is perhaps the simplest possible web page. Of course, it's probably the most boring possible web page. So let's see if we can't do things that are a little more interesting. Let me go ahead and create a new file. And I'm going to go ahead and call this paragraphs.html. And let's go ahead and-- let me just copy and paste some of the code I wrote earlier, just so that I can save some time. And I want to go ahead and create a new body here. So I've created a new file called paragraphs.html. And the process by which you create a new file will totally depend on the program you're using. I went up to File, New. But other programs, like Notepad++ might have other keyboard shortcuts, or the like to do the exact same thing. I just changed my title to paragraphs, just so that I can distinguish one example from the other. And now, I have my blinking cursor inside the body. And the goal at hand is just to create some paragraphs of text. Well, I don't particularly want to think too hard about what to type, so it turns out I can do this-- Latin generator. If I Google Latin generator, you'll see that quite common on the internet are programs like this that allow you to generate what's generally called lorem ipsum Latin-like words that are actually nonsensical, but does give us something to work with. So I'm going to go ahead here and create maybe three paragraphs for myself, generate that. And indeed, now I've got some lorem ipsum text here that means nothing, but looks like something substantive. I'm going to go now and paste this into my file. Now, my file's currently wrapping. I can go ahead and change this by actually toggling Word Wrap. So you'll see that I, indeed, have three separate paragraphs inside my body. I've nicely indented, just like you might when writing a book or an essay. and I have second and third paragraphs, each of which seem to be representative of actual text. Let me save that. Let me go back to my browser, and File, Open, paragraphs.html. And unfortunately, there's a couple of anomalies. One, Google Chrome wants to translate this web page, which is wonderful, because it seems to be recognizing Latin. But if I just dismiss that, because no, I don't want to translate the sample text, what is the mistake or the bug, so to speak, in my code? What seems to be awry? AUDIENCE: Lack of line breaks. DAVID MALAN: Yeah. So lack of line breaks is indeed the case. All the same text is there, but it looks like all of my sentences have blurred together into just one big blob. Well, why is that? Well, it turns out that HTML is very pedantic. It will only do what you tell it to do. And even though I clearly hit Tab and I hit Enter here, hit the Return key a couple of times to indent things and create three paragraphs, that's not enough. Because browsers by default actually ignore most whitespace. And by whitespace, I mean hitting Enter a bunch of times, or hitting the Spacebar a bunch of times, or hitting the Tab key a bunch of times. Browsers, by default, just ignore a lot of that, unless you tell them to put it there. So what do I mean by this? Well, if you want a paragraph in HTML, you actually need to put it in there yourself. So I actually need to put a paragraph tag, which happens to be abbreviated with open bracket p closed bracket, just for succinctness. And then I'm going to go ahead and close that paragraph tag here. I'm going to go ahead and create another one over here, p tag, and then I'm going to go ahead and close that one here. And then I'm going to create a third one down here, and finally, close that tag here. And you'll notice my editors actually trying to be helpful, but sometimes it's not, because it gets confused if I haven't quite closed something. But that's fine. I'm going to go ahead and just fix it manually myself. And you'll now see that I, indeed, have the same three paragraphs of Latin text, but each of them here is sandwiched between an open p tag and a closed p tag, thereby telling the browser, here comes the beginning of a paragraph, that's it for this particular paragraph. So let's go ahead and save this file, go back to the browser. And just as you might on the real internet, go ahead and click Reload to reload the same file or web page. And voila. We still see that prompt for Latin over here. And that's fine, because Google is trying to be helpful with its built-in translator. But I do now see three paragraphs of text, which is nice, because now, it's actually as I intended. But notice what's still missing-- indentation. Because it too is going to ignore all of those tab characters. So we can really see this clearly as follows. If I a little reckless, and suppose I really want a lot of space in between these paragraphs, and I hit Enter a lot. I hit Save, and I go back to my file and reload, doesn't matter. The browser's going to ignore all but the first of those spaces, because I've still only told it to give me one paragraph, then a second paragraph, a third paragraph. There are ways to solve this problem, but the solution is not to just hit Enter a lot or the Spacebar a lot, as you might in, say, Microsoft Word or some other program. So that's a paragraph. How can we take this a bit further? Well, first of all, I should probably try to override these web pages' languages. And in fact, if I go back into hello.html, it turns out that you can actually tell a browser proactively what language it's written in, so that if Google Translate, or Bing Translate, or some other tool pops up automatically, it knows, without having to guess or analyze the file, what language it's written in. And we can do this by adding what's called an attribute. So HTML also supports not just tags, and of course pure text, but it also supports attributes. Attributes are like customization of a tag that changes its default behavior. So by default, the html tag just says, hey, browser, here comes HTML. But if you instead have a keyword-- in this case lang, for language-- then an equals sign, then two double quotes, or two single quotes-- you can use either, but you need to be consistent on both sides-- and then a language code, like en for English, or es for Spanish, or any number of other two character codes, that's a clue to the browser that says, hey, browser, here comes HTML written in this specific language. So browsers like Google Chrome can then use that clue, and then either prompt you to translate or maybe not translate the current page, especially if it's not obvious from the text or the images that you might actually have. So that's the first of the attributes we'll have, but we'll see a couple of others soon, as well. So of course, if you open up a book or any kind of text, you typically don't just have paragraphs, you tend to have headings, like chapter headings, section headings, subsection headings, and the like. If you think about any textbook, or even certain novels or books that are divided into sections, well, how can we do this in HTML? Well, let me go ahead and create another file called, let's say, headings.html. I'm going to go ahead and copy and paste that same code as before, but this time, I'm going to call it headings. And then in the body of this page, I'm going to go ahead and say a few things. One, two, three, four, five, and six. Let me save that file. Let me go back to my browser, and open up this file, headings.html. And hopefully, as expected, it is not the six paragraphs you might have hoped for. Just because I was hitting Enter doesn't mean anything. The browser's ignoring those. But I don't want paragraphs this time. I want these to be like section headings, where chapter 1 is big and bold, and maybe the next section two is a little smaller, but still bold. So it turns out that HTML has some special tags like this-- h1, and then the opposite, close h1. And then h2, and then h-- whoops. And then let me close h2. And then here, h3, and then close h3. And then open bracket h4, and then closed bracket h4. And then open bracket h5, closed bracket h5. And then lastly, open bracket h6, and then closed bracket h6. This is telling the browser, here comes a big and bold heading, here comes another one, but not quite as big and bold, here comes another, another, another. So if you have chapter, sections, subsections, sub-subsection, sub-sub-subsections in a text book or some other document, or an article, this is how you can achieve that result. Because if I go now to headings.html and click Reload, you'll see exactly that-- some big default bold text. Then it's getting a little smaller, a little smaller, a little smaller, just as you might expect in an actual text book. So that gives us our headings. And we could certainly go back in and start adding paragraphs of Latin, or English, or any text to kind of flesh this out further. But for now, let's just focus on that structure. Well, let's try something else. Let me go and copy paste this into another file that I'll call unordered.html. My goal at hand now is to make a list. And that list is going to be unordered-- that is, no numbers associated with the items. And if I start where I started before-- I might say one, two, and let's just stop with three this time. Of course, if I save this file and open unordered.html in my browser, I'm going to see one, two, three on the same line. They're not paragraphs, they're not headings. But I want this to be like a bulleted list. Well, you can imagine trying to do this your own way. Maybe use an asterisk as a bullet-like symbol, something like that. And then if I save that file and reload, closer. But of course, if I to move two and three onto the next lines, I'm going to need paragraph tags or something like that. But that still doesn't look quite as pretty as bullets and Microsoft Word, or Google Docs, or Gmail, or the like. But that's because I'm not taking advantage of another feature of HTML, which is literally what's called a list. I can go ahead and create an unordered list with open bracket ul, and then close that list with open bracket slash ul. And then I can go ahead and give this three list items. I can go ahead and say open bracket li, then closed bracket li, and then just do the exact same thing. And notice I'm not numbering them in any way-- it's indeed an unordered list-- but I am flanking each of these words with li, close li. Let's save that, go back to the browser, and reload. And voila, it looks a little prettier. It's still quite simple-- one, two, three-- but notice, now, I'm starting to get some aesthetics for free. I'm marking up my text, one, two, three, and the browser is taking care of rendering it as a list that's unordered. But wait a minute-- what if I want to make it an ordered list? Well, actually let me go ahead and create a file real quick. I'll create a file called ordered.html, paste this same code in there, but rename the title to ordered. And let me just go ahead and ask, well, if ul-- unordered list-- is the HTML tag for an unordered list, you can probably surmise how we get an ordered list, one that's automatically number, just like Microsoft Word and Google Docs can do. So maybe not ol, but let's go with our gut-- or at least my gut here-- ol and close ol. Save this file. Let me go ahead an open ordered.html. And voila, now I get the numbering for free. So here's where you start to see some of the power of HTML. Still super simple, but if you have lists of items, you don't have to worry about numbering them yourself. If you want to go in and add more items to the list, you don't have to worry about remembering everything yourself. The computer, namely the browser on the computer, can go ahead and take care of all of that complexity for you. And lists are everywhere on the web. Even though they might not be as blatant as bulleted lists or numbered list on a web page, anytime you see a whole bunch of menu options, anytime you're ordering something online from a menu, a la Grubhub or Uber Eats, or the like, you're probably seeing lists of items. It's just those lists are not rendered quite like this, with numbers or with bullets. They're rendered more beautifully with other aesthetics. And we'll see how you can render different aesthetics in a little bit tonight, with this other language called CSS. So now, we're really beginning to see what HTML can do for us, at least aesthetically. And indeed, that's what it's all about-- marking up your actual content, and letting the browser take it the rest of the way. All right. So what about a more visually interesting web page? It's really hard to get excited about text. What if we go ahead, and instead, open up a file that we'll name, for instance, say, image.html. Let me go ahead and save this file, changing the title and borrowing some of my code from before. So again, we're borrowing the same structure for every one of our web pages. And you too, for your assignment, final project, can certainly do the same. Just start with some boilerplate, so to speak, and then make it your own. Within the body of the web page here, what if I want to have a cat in the web page here? Well, it just so happens that I brought with me the image of a cat. And let me go ahead and grab that, for instance-- well, we'll grab it from Google Images. So I need a cat. So I'm going to go ahead and Google cat, and see a whole bunch of cats here. Let's say-- this one looks quite adorable, on Wiktionary. I'm going to go ahead, for the moment-- and assuming this is my cat that I happened to put online, I'm going to go ahead and copy the image address for the sake of demonstration. And that's going to give me the URL of that image. And indeed, if I paste that into my browser, I'm actually going to see this URL here. And actually, let me go back and actually visit this cat in situ, and go and do the same here. Copy image address, and there we have it. You'll see that at this URL, upload.wikimedia.org slash m I have this jpg of an actual cat. So that's the URL of my cat. I'm going to now go into my file in VSCode. I'm going to go ahead and now give myself the cat image. Of course, if I just paste the URL here, like this, that's a bit nonsensical. Because if I simply paste the URL of the cat, save the file, and then open this file, image.html, in the browser, I'm, of course, just going to see the URL, which is hardly rich media. So I really need to tell the browser to go put that image in the web page. And how can I do that? Well, turns out there's a tag called image. But it's abbreviated img, just because it's so popular. It saves you a few keystrokes. And then here, I need to specify the source of the image. So the image tag just says, hey, browser, put an image here. But it needs an attribute known as source-- similarly abbreviated src-- that has an equal sign as before, a quotation mark, and then at the very end of it, another quotation mark, and then a closed bracket. So this is now saying, hey, browser, put an image here, the source of which should be that same URL on Wikimedia, and go ahead and put it right there. Let me go ahead now and reload the page. And we should see the same adorable cat. But this time, it lives in my own file, index.html. So I've written my own HTML locally on my own Mac, perhaps you on your own PC, but I've referenced, I've hyperlinked, if you will, to an image that's actually elsewhere on the internet via that actual URL. And notice the anomaly here-- what did I omit from my file this time, that I've had and every other example thus far? AUDIENCE: [INAUDIBLE] DAVID MALAN: Yeah, I didn't close the bracket. And there's a reason for this, because I could maybe do this, like open bracket slash img. It's just not really sensible, because you can't start putting an image here, and then eventually stop putting the image there. It's just all or nothing, really, with an image. Put it there or don't put it there. So the authors of HTML decided, you know what? That's just not necessary. So you don't need to include that. If you really want to be nit picky, you can actually do this shorthand notation. You can put a slash in between the close quote and the close bracket just to make super clear I know what I'm doing, I didn't just forget the close tag or the end tag. But most people would even omit that as just being unnecessary. So while most tags do have this symmetry, opening and closing them, image is among those that does not need that, in fact. So what if I wanted to access a cat that's actually on my own computer? Well, I did bring another cat with me. Let me go ahead and grab this from my desktop. And I happen to have a cat in advance called cat.jpg. And let me go ahead and save that on my desktop. So suppose that now, the image in question is not on the internet, but quite simply, it's in the same folder as image.html. In other words, on my Mac, on my PC, and eventually on my server, I can have not just one, but two, or three, or hundreds of files all in one or more folders. And if cat.jpg happens to be on my Mac in the same folder as image.html, this is what's called a relative link. The browser's going to assume that, when you want cat.jpg, oh, it must be in the current folder. And so if I save this now, knowing that that file is indeed on my desktop, along with this html file, and reload, I'll now have the-- oh, but it's not. I'll now have-- what did I do wrong here? [INAUDIBLE] Sorry. What is wrong here? Oh, I'm sorry. Put it on my desktop. So if I now store that cat on my desktop and hit reload, voila-- now I see a very popular cat on the internet, known as Grumpy Cat, filling the screen. This jpg happens to be larger than the others, so it's filling the browser screen a bit more, but indeed, the effect is exactly the same. Now, if I had lots of images, it would actually be conventional to store them in folders. And so if you, on your own Mac or PC, with your photography, decide to store all of your images in different folders, you can do that too. If cat.jpg were in a folder called, say, folder, you can literally say folder slash cat. Maybe you have a whole folder called cats inside that folder. So just like you've seen on your own Mac, or PC, or in URLs, you can actually separate the file name from the actual current file via one or more folders, as well. All right. So it's not quite sufficient though, generally, when designing a web page, just to put some image here. Increasingly, [? do you ?] want to help the browser help the human understand what the content of your web page actually is. And so for reasons of accessibility, is it ever so important these days to use tags and attributes that exist for this purpose. For instance, the alt attribute allows you to say something like this-- the alternative to this actual image, particularly for those who have difficulty seeing, or are blind, or who therefore need screen readers to help them visualize in their minds eye, [? what ?] another person might be able to see visually on the screen, you can use this alt attribute. And the alt, or alternative attribute says, display this text in lieu of this image for those who might prefer to see it textually. This is also useful if, for instance, the image is broken, or corrupted, or missing, as it was for me just a moment ago. I just saw briefly a broken icon on the screen, but had I included this alternative text from the get-go, I would have at least seen what the textual description of this image, is even in the absence of that image itself. So both for screen readers and for usability for folks on slow internet connections can you help them see text renderings of these things, as opposed to the original file itself. All right, so we're just about covering now most of the functionality you might want. Even though we've only just scratched the surface of HTML, these really are most of the building blocks already. Let's go out and do one other example here called link1.html. SPEAKER 1: Before you get there, David, can I just ask a question? DAVID MALAN: Sure. SPEAKER 1: Let's say I have my portfolio, and I want to put all my images on my website. Does it make sense to-- let's say I keep them on an external hard drive, or something like that. Do I need to move them to my folder, or can I link directly to them on the hard drive? Or where might you store your images? DAVID MALAN: So good question. So at the end of the day, if your website's going to live, of course, on the actual web-- at example.com or some other website, some domain name maybe that you've bought, or some third-party service that you have paid for an account on-- odds are you're going to drag and drop or somehow upload all of your HTML files, but also those same images. So if you have all of your photographs on some external hard drive or on own local disk, you're going to need to upload those to the internet. Since you can't have a website that's referencing your own Mac or PC, if your own Mac or PC are not acting as a server on the internet, it's not sufficient just to have an internet connection. You actually need to have a domain name pointing at your computer, which, odds are, your Mac and PC does not have. Alternatively, if you go ahead and upload your entire portfolio of photographs or videos to sites like Flickr, or Instagram, or any number of other sites, you can use the URLs of your images and videos on those third-party web servers, and link to them, just as I did my first cat that I found via Google Images. So assuming you indeed own the rights to that image, and therefore, the URL is your own, you can include that in your file, as well. SPEAKER 1: Awesome. And if I'm going to keep everything on my own computer, I want to keep everything in this kind of root folder, if you will, of my project. So I need to move anything from an external hard drive into this folder, where I've got the rest of my HTML, kind of the base level of the web page? DAVID MALAN: Indeed. You pretty much want all of your files, your media files to be relative to the HTML file-- so in the same folder as your HTML files, or in folders that are inside of the same folder as your HTML files. So you essentially want to think of a website as being one big folder that has everything, including all of your HTML files, and then optionally, any of your media files maybe in some subfolders, as well. Indeed. So of course, the whole web-- the hyperlinkability of the web is, indeed, about those hyperlinks. So thus far, we've only seen pretty static content, including that image. How do I go about actually linking a human from one website to another? Well, let's go ahead and do something like this. What if I want to encourage my visitors to visit something like Harvard? Well, of course, if I just save this file, link1.html, open up this in my browser as link1.html, I'm going to see, of course, just the text visit Harvard. So not all that interesting. But what if I want them to visit harvard.edu? OK, well, I could say visit harvard.edu, save that, reload. It tells them now a little more explicitly where I want them to visit, but that too is not clickable. It's just text, just like the word visit. Well, what if I get a little more specific, and I say visit www.harvard.edu, save that, reload? That too is not sufficient. Now, even though you and I are probably accustomed in emails, or Facebook, or other tools these days on the web just typing the short parts of URLs-- something.com or www.something.com-- and then the tool-- Facebook, or Twitter, or the like-- automatically turns it into a link for you, when writing your own HTML, you actually have to do that linking for your users. Twitter, and Facebook, and the like are doing that automatically for you, but there is nothing that's automatic when you're making your own web pages or you're building websites like that. You need to create the link yourself. So it's not sufficient just to say where you want the user to go, you need to enable them to go there as follows-- open bracket a, for anchor-- which is like, give me an anchor to some other web page right here. And have it reference, or more technically, hyper-reference the following URL. So href="http://www.harvard.edu". And then let me go ahead and close that tag, and then let me go ahead and say Harvard, and then close the whole thing like that. So again, notice the parallelism here. Open bracket a, for anchor, and then close bracket slash a, to close the tag. Notice that I don't repeat the attributes. This would be a bit silly if you had to literally write the same thing twice in two locations. So when closing a tag that has one or more attributes, you just close it by its name. But notice now that the value of the href inside of these quotes is the actual URL you want to send the user to, including the http://, which you and I probably don't typically type anymore, but is hidden there in the browser's URL bar. Let me go ahead now and save this file, reload the page. And voila, now, you see in the top left-hand corner "Visit Harvard," and it's indeed now hyperlinked in, perhaps, that familiar default blue. And if you hover over this without clicking on it, it's terribly subtle, but at the very bottom of your browser, odds are you'll see the actual destination that word or words are about to link to. And notice the dichotomy. Even though it's going to lead to www.harvard.edu, the human is only seeing the word Harvard. So you have complete control over what the human sees versus where he or she actually ends up. And even though I did correctly include http://, Chrome, and Safari, and other browsers these days, they're just starting to simplify things for humans. Google and Apple decided, eh, no one needs to see http:// all over the place. But you do need to write it when actually writing your HTML. But you could do a kind of a switcheroo. Harvard and Yale, for instance, are quite the rivals, so we could tell the user, go ahead and visit Yale. Reload this page, and it looks like you're about to visit Yale, but of course, if I click this link, where am I going to go? Well, harvard.edu. And as an aside-- and this is a whole can of worms-- if you've ever received an email that purports to being from your bank, or from PayPal, or some website like that, but it's actually spam, but it looks like it isn't, well, odds are they are trying to trick you into clicking a link that says one thing, but actually leads you to a malicious website, something that's been set up probably to steal your password, or the like. So even with these basic building blocks tonight do we see how even those kinds of techniques are possible. So if I click on Yale, I'm actually going to find myself, voila, at Harvard University here. But the takeaway, ultimately, is that to have a hyperlink from one place to another, all I need is a link like this. And let's back it up and actually put it as Harvard instead. Well, what if you want to link not to some third-party website, like harvard.edu or yale.edu, but what if I've got multiple pages, as you might for an assignment or final project, and you've made another file? And indeed, look at the top of VSCode for me. I have all of these other files already created. What if I want to create a link from this example to one of my more recent ones? Well, let me go ahead and create a new file called link2.html, just because this is my second example of links. And suppose I want to link the user not to harvard.edu, but to a file I created a moment ago-- that cat. And that cat was stored in image.html. And if I want to link the human to image.html, I can use what's called, again, a relative link. If image.html is in the same folder as this file, then I can just do quote unquote, "image.html," and when I click on this link, it's just going to open up that other file without me having to go to File, Open, like before. So if there's no http://, it's just going to assume that the destination is relative to where I currently am. So let's try this. Let me go ahead and open up link2.html. Notice that it says visit image.html. And if I click that, I should see the familiar cat. But let me go ahead and hit Back, just to be super clear here, and zoom in. At the moment, I am opening my file called link2.html, my second example involving links. My HTML says "Visit image.html." It happens to be purple now, because that's what browsers do by default. Once it colorizes them, typically purple by default, [? just is ?] as a visual cue that you've been there before, maybe don't bother clicking on it again. But notice what happens. If I click on this link, watch the URL bar. It's not going to keep me at link2.html, it's going to take me now to image.html. And if I zoom out, again, I'll see that familiar cat. So if you've visited a website, like all of us have, and you've clicked on a menu, or you've clicked on one link that leads you somewhere else that leads you somewhere else that leads you somewhere else, all that's going on underneath the hood, so to speak, is that the programmers at Facebook, or Google, or Apple, or other companies have written HTML like this that is linking you to relative URLs-- other files on their same server in that same folder-- so that you can have multiple web pages on the same websites. And those are, again, called relative URLs. All right. So how can we begin to tie some of these things together? For instance, suppose I want to have a landing page with links to everything we've done. Well, you know what? Let me go ahead and do this. Let me just go ahead and open up an example I did an advance here, and open up a file called index.html. As before, I propose that the default name for a web page is indeed index.html. And let's look at this complete example now, in the context of all the building blocks we've looked at thus far. So on the very first line of this file is my DOCTYPE declaration. That's a mouthful. This just says, hey, browser, here comes some HTML. This we've not seen before, but I've included this in the examples that we wrote in advance for you. In fact, all of tonight's examples, especially if I've been going fast, you'll be able to download after tonight, and play with them, modify them, build your own websites on top of them, if you'd like. This syntax here is what's known as a comment. So it's pretty cryptic-- open bracket exclamation point dash dash something, and then dash dash close bracket, with no exclamation point. Why this sequence of characters? Well, the authors of HTML years ago just decided, who in their right mind is ever going to want to type that sequence of characters? Let's use it as a special instruction saying this is a comment, a note to self. So if you just want to remember what is this file, well, this is my note to self it demonstrates a home page, a listing for all of the pages that might exist on a website-- like a menu. Most everything else should look pretty familiar, even though I'm now combining techniques. So you'll see that this tag on line 5 says, hey, browser, here comes my HTML, and it's written in English as the language. If I fast forward, you'll see the opposite of that, all the way down here, on the last line 24, close html. Here we'll see, as before, the head of the web page. The title here is index. And notice what I did this time. I decided that, eh, you know what? Whitespace doesn't matter, so I can hit Enter as many times, as I want and I can hit Tab as many times as I want, but it doesn't change what the title is. So I've just been a little more succinct. So instead of doing this, as I did in my previous example-- that's just kind of wasting lines-- I can pull that up, make it a little more compact. And arguably, it's no less readable, in this case. And in fact, all of this indentation that I've been typing and copying and pasting thus far does not matter. This is just for the benefit of us, the humans, the students, the colleagues who might be working collectively on a website. It's just so much easier to read this than if I deleted all of that space, and we just had one horrific file that had all of these tags all on the same line. The browser wouldn't care. It's a smart computer that can distinguish all of these tags from another. But all of this indentation is really helpful clues to myself to make sure that every tag I'm opening, I'm closing, if need be, and I can understand what is inside of, or indented, or nested inside of something else. Well, let's go down here. The body of my page comes next. Inside the body, it looks like I have a heading that says John Harvard-- the author of this website, presumably. On this line 11, we have an h2-- so a slightly smaller heading, a subtitle, if you will-- saying welcome to my home page. Then we see a new tag, but it turns out this is just a convention-- nav. You can maybe infer, navigation. So typically on websites, if you have a whole bunch of links to menu options, you'll actually wrap them in a tag called nav. It doesn't display any differently, it's just kind of a visual clue. Because especially these days, browsers have gotten much better at understanding the layout of websites, whether it's for reasons of screen readers or accessibility more generally. So nav it's just a hard coded clue to the computer, hey, here comes the menu, so help the user navigate this page as needed via the following lines of code inside of this navigation. Well, what are those lines? Well, here is just an unordered list of links-- so a bulleted list, if you will. And notice now the nesting. Open bracket li says here comes a list item. Then inside of this list item I have, it would seem, a link-- for instance, to hello.html. And that example's called hello. Then I close this tag, then I close the outermost tag. So again, everything is symmetric. If I open li then I open a, I must reverse and close A, close li. And so you'll see that symmetry is preserved. And that's it. Then I go ahead and close the list, close the nav, close the body, close the HTML. So let's go ahead and open this file index.html, which again, is a list of links to everything else we've done thus far. And it's super simple, but it does combine all of these basic building blocks. I've got hello, paragraphs, headings, unordered, ordered, image, and link. And if I click on any of those actual links, well, I'd be whisked away to those individual pages. And why is this one purple? Well, just a moment ago did I open, did I start with that same file hello.html. Any questions then on these building blocks, thus far? Yeah? AUDIENCE: Can you link one website to another [INAUDIBLE]?? DAVID MALAN: You absolutely-- the question is, can you link one website to another if they're not in the same folder? So let me distinguish the terms. If you want to link from one website to another website, you can do that via its URL-- http://-- and that means the web page is on a completely different server. so yes, that absolutely works, just like my link to harvard.edu. If you want to link from one web page to another, they can be in the same folder, sure, or they can be in subfolders, as by saying, quote, unquote "folder slash sub folder slash something that html." It can even be higher up. So you can actually use what's known as double dot notation. Dot dot slash means go up higher in my hard drive to go into some other folder. So short answer, yes, they can on your drive, if you know the relative location. All right, let's do one other example before we take a short break. How do sites like Google work? Well, let's go ahead and take up that loaded question as by opening, for instance, Google itself, at google.com. And today, the web page happens to look like this. Well, it turns out that all this time you've been using Google, or Bing, or whatever your favorite search engine is, odds are, in Chrome, or Edge, or Safari, or Firefox, whatever you use, if you poke around the menu options, you will see some options somewhere that probably is called something like View Source. And if, indeed, I go and click View Source, in my case, in Chrome, you'll see this crazy list of output. It's a huge amount of content. And if I zoom through there, you'll actually see the code that composes Google's home page. Now, a lot of this is written in a language called JavaScript. More on that in a future lecture. But inside of that file, ultimately, is also HTML. And it's a mess here, because, again, browsers don't care about whitespace. They're going to ignore most of it anyway. And Google actually, for efficiency, doesn't even use whitespace when it's not needed in their files. Why? Google's just so big and so popular that, if they are spending time adding spaces to their HTML files, those spaces need to be transmitted over the internet as bytes, so to speak, and that's just going to cost them time and money. So in short, for efficiency, some of the biggest companies out, there they don't pretty print their HTML, as I've been doing. They don't indent it, they don't make sure everything's tabbed in nicely. Because why? That just adds bloat to the files. But for us, and for smaller websites, not a big deal. And it's much more important that we humans be able to read it. Let me approach this from a different angle. Let me go to View, Developer, and not View Source, but Developer Tools. Because one of the nice things about modern browsers is that they allow you to do this-- there's typically a tab called Elements, or something like it. And what this tool within Google Chrome does is it actually reads that HTML top to bottom, left to right, but rather than show it to you the way Google intended, with no whitespace, it magically adds whitespace, it adds syntax highlighting-- that is, the colorization-- just to help me, the human, wrap my mind around what's going on. So literally, this is the HTML code for Google's home page. There's an open bracket HTML, there's an itemscope and itemtype attribute-- whatever those are. We haven't looked at them, but indeed, there are other attributes you can use in HTML. lang="en" is appropriate, because this is indeed written in English, because I'm on the US version of the site. Here's the head, dot dot dot. And if I click that little triangle, I could look inside the head and find the title of the web page. Here's the body in purple here. There's this other attribute called class-- more on that in a moment. But in short, all of the purple words you see here are HTML tags-- and we'll see a few more over time-- and they allow Google to present to you this search interface. But it's important to note that the real secret source of Google is not an HTML. Anytime you visit someone's website, you can look at their HTML. You can see the source code for that website. And so even though it's, indeed, their intellectual property, typically, there's not really that much sophistication to HTML. It's not a programming language with which you create applications, it's just a markup language that shows you how to show text on the screen and where to show it. The real secret source for most websites is, of course, on the server. Google is a powerful entity because they have so much data in their database. This is just the user interface, or the front end via which to access that information. So just for demonstration's sake, let me go ahead and search for one more cat and hit Enter. And you'll notice, of course, that the URL, like most websites, changed-- and it's, frankly, changed to be something super cryptic. But you know what I'm going to do? I'm going to go ahead and delete most everything I don't understand. And there's the key word I do understand, cat. So I'm going to go ahead and delete most of what's in the URL, after searching for cat. And I'm going to hit Enter again. And it turns out this still works. And indeed, when Google was invented back in like 1999, in its very first, simplest version, this is all it essentially supported. It supports your URLs that ended with the word search. And then, if you added a question mark and then a q for query, an equals sign, and then a keyword, that is what the database will search for and spit out results for. So everything you see here below-- these images, the blue text, the green text, and the gray text-- that's just HTML. And we'll see in a little bit that there's different ways to make different font sizes, and colors, and the like. This is just HTML, but the real secret sauce is on Google's servers somewhere that is searching their entire database for all the cats in the world. But let me go ahead and change this manually. I'm not using Google's interface, I'm literally just changing the URL to say dog, q equals dog, and hit Enter. And now, I'll get back a whole bunch of search results about dogs. This is to say that URLs on the internet support what are called parameters, these special keywords you can put after a question mark into URL that provide special input to the website. And those are typically generated by filling out forms, but for our purposes for now, just know that you can modify the behavior of a URL by changing keywords that come after the question mark. And we're going to see this as a powerful tool when it comes time to do something like embed a YouTube video on own website. If I understand these HTTP parameters, these keywords that come after the question mark, I can actually exercise more control over how I'm embedding videos in my own website. Let's go ahead and take a few minute break here. And when we come back, we'll introduce a second language called CSS-- Cascading Style Sheets-- and that's where we can really make our web pages look all the more beautiful. All right, so that is HTML. And even though we'll see a few more tags along the way this evening, those are pretty much the building blocks. You have this notion of tags. Some tags can have attributes, and sometimes can or can't be closed, and that's about it. Here on out, now that you have been equipped really with those fundamentals will you find that by looking at any number of online references will you begin to fill in the blanks of the vocabulary that is HTML. We pretty much have presented you the entire grammar, the set of rules, and so forth. And now, it's just a matter of, indeed, vocabulary, learning a few more tags here or there to see what more that language can do. And we'll see a few more such techniques along the way. But what we haven't really seen yet is the ability to really refine the aesthetics of a web page. I got a pretty default bulleted list, a pretty default numbered list. I got a pretty default blue link and purple links. It would be nice, certainly, if I could create far more control over my web page, much like the popular websites you yourself visit. And the way you do that is via CSS, Cascading Style Sheets. This is a second, separate language that is related to HTML, but has a slightly different syntax. But it's relatively straightforward to integrate into your HTML. And we'll see now how we can go about doing that. So let's first tee up a problem. If I go ahead and open up my text editor here, VSCode, I've pre-created a file called css1.html as representative of my very first CSS example. I'm going to go ahead, and in the body of my page, I'm going to create a few new tags known as the header tag-- not to be confused with the head. And in here I'm going to say something like-- John Harvard shall be the header of this web page, making another home page for this fellow. And then I'm going to say that the main part of my page is going to say something like welcome to my home page, as before. And then close the main part of the page. And then, perhaps not surprisingly, there's a tag called footer, where I can say something like copyright, let's say, John Harvard. And then over here, I'll close that tag. So we haven't seen these tags yet, but they're, perhaps, a bit self-explanatory. Header, main, and footer-- these are generally known as semantic tags in HTML, which means that they have no effect visually on the web page, other than to give you different sections of the web page. But they do have semantic meaning, so that when the browser's trying to better understand what the pages for accessibility purposes, or optimization purposes-- especially on mobile, you might want to see the main part of the page far more than you want to see the footer-- having these sort of semantic clues in your HTML just helps the browser understand what it is it's looking at. So when I look at this file now, I'm not going to see a terribly interesting web page yet. Let me go ahead and hit Save, open up my browser, and go into css1.html. And I'll see, quite simply, this-- John Harvard, welcome to my home page, copyright John Harvard. All of the text, though, seems [? to be identical, ?] but it is on separate lines. So it's kind of like paragraph tags, but there's no gaps between the lines right now. These are really just like invisible rectangles going across the screen that separate my header from the main part from the footer of the web page. Well, do one thing first. It would be nice, frankly, in HTML if we could get a proper copyright symbol-- (c) isn't quite it. Unfortunately, on my US keyboard, I'm not aware of any copyright symbol that I could type. I certainly don't know the special keystroke. So it turns out that HTML supports what are called entities. And an entity is a very cryptic code that you would generally look up and an online reference or in a book. And it turns out that the code for the copyright symbol in HTML is number 169, and you flank it with an ampersand and a semicolon. So this says, hey, browser, here comes in HTML entity, so to speak. The number of that entity is 169. And then semicolon means that's it for the entity. So slightly different syntax, but this is a special code that now, if I reload my page, notice that I get, albeit small, a proper copyright symbol. And there's other such symbols that you can imagine, from shapes, to other punctuation symbols, to special symbology like that one there. So that's just a minor touch up. What if I actually want to go ahead and style this page? Well, it turns out that you can, on many tags in HTML-- including header, main, and footer-- use the style attribute. And you can say, I want the style of the header of my web page to have a large font size, and then, you know what-- go ahead and align the text in the center. So notice the syntax here's a little new, but I have flanked both sides with an open quote and a close quote. I could have used single quotes-- so long as you're consistent. And notice slightly new syntax now in orange-- font-size, and then some value. Then a semicolon, which, just like the entity, means end of thought. It's like a period in an English sentence. A semicolon here is like a period in a more technical sentence, using this syntax here. text-dash: center means, how do you want to line the text? Well, the value of that shall be center. Strictly speaking, you don't need the semicolon at the end, but I did it for symmetry there. So what you're looking at, that I've highlighted here, is exactly that other language-- CSS, Cascading Style Sheets. It's a tiny little example of it, but this is to say that the HTML attribute called style, as all of the attributes we've seen, can take a value that's quoted. The value of the style attribute, though, can be written not in HTML, per se, not even in English, per se, but specifically in CSS, Cascading Style Sheets. And this language is actually relatively simple. Even though it too has a big vocabulary, it is entirely based on keys and values, so to speak-- or more technically, properties followed by a colon, and then the value of that property. And you would only know what properties exist by looking it up in a book, or an online reference, or taking a class. font-size is one available CSS property. text-align line is another available CSS property. And the possible values completely depend on the properties themselves. You can do large, small, medium, or few other things, as well. You can do center, left, right, or justify, or a few other things, as well. You would only know that by looking it up in a reference. But for our purposes right now, the key is that the structure is something colon something semicolon, and then optionally, repeat again and again. So let me go ahead and try this out elsewhere too. Let me go ahead here, and on the main part of my web page, say, let's go ahead and make the font size medium. And then again, text-align in the center. And then lastly, in my footer, that's like the least important part of my page, so I'm going to say font-size small text-align center. Save it. Now, I'm going to go back to the browser, reload the page. And voila, looks similar, but now everything is nicely centered. John Harvard's a little bigger than welcome to my home page, which is a little bigger than the copyright. So I've begun to stylized it in this way. But there's a bunch of redundancy. And in computer science, and in programming more generally, redundancy is not a good thing, because it makes you more vulnerable to typos. You might make a mistake in one place that you don't in another. It makes it harder to change things, because you might have to change your code in multiple places, instead of just one place. And so what's redundant here? Well, my font sizes are varying-- large, medium, and small. So that's fine, but it seems a little lame that I have text-align center, text-align center, text-align center. It would be nice just to factor that out somehow, and say text-align all of this in the center. Well, how can you do that? Well, notice that header, and main, and footer are all children, so to speak. They're sort of like a family tree, nested inside of or indented inside of body, which is to say that header is in body, main is in body, and footer is in body. So you know what? Why don't I do this-- let me go ahead and copy this code, put it in a file called css2.html, as my second version. And you know what? Let me go ahead and now remove this from there, remove this from there, and remove this from here, and instead, put it on the body, thereby factoring it out. And here is now the C in CSS. Cascading Style Sheets implies that, if you have a property, like text-align center, on one HTML tag, but inside of that HTML tag-- or element, as it's also called-- are other HTML tags, as implied by the indentation here, well, this will ensure that everything indented inside of the body will be text-align center. So I only need to say it once and it will apply to everything else down below. So if I save this file and open up css2.html, I'll see the exact same thing, but my code is better designed. Because why? Well, if I want to go ahead and left-align or right-align the text, I can change it in one place now. I don't have to change it in three different places or god forbid, if I had a much bigger website, in many more places than that. So CSS also allows you to factor things out further. It generally is considered messy to have the contents of your web page-- John Harvard, welcome to my home page, copyright, and so forth-- kind of commingled with the aesthetics thereof. It's not such a big deal when our file's only 20 or so lines long, but when a typical web page, like Google, or Facebook, or Imgur, or Instagram, or the like, have a lot more content on the page, you might have hundreds or even thousands of lines of code. And so it makes it a lot harder to distinguish what is your data, your information, from the aesthetics, or the presentation thereof. So this is to say it'd be nice if I could move all of this orange stuff, all of the CSS elsewhere, because you know what? I'm not even that good in the real world at designing things using CSS. I don't necessarily have the best artistic eye, so maybe I'd like to collaborate with someone who's better than me in the artistic sense with this language, so maybe I can focus on the HTML, he or she can focus on the CSS. It would be nice to separate these two just a little bit. They're arguably different skill sets for some folks. So let me go ahead and do exactly that, as follows. Let me ahead and create another file, css3.html. And in this file, let's go ahead and do this-- let's get rid of all of these style attributes altogether, really reverting to where we began the story, getting rid of all of these style attributes on every one of the tags, and thereby getting rid of all of the stylized. But let's put it somewhere else. It turns out that title is not the only thing that can go inside the head of your web page. You can also have a tag that's called style. So it's not an attribute, it's a tag, but it's in a different place. So they use the same word in two different contexts. Style attribute is what we've been using, but I'm now proposing to use a style tag, which must go in the head of your web page. Well, what am I going to put up here? Well, now, you have a slightly different syntax. You can specify the name of a tag, like body, and then you have this convention of opening curly brace and then closing that curly brace. And they can be on different lines or the same lines. To each his or her own. And then I can put those same properties in here like this-- text-align center. So that will ensure that the entire body is aligned in the center. I can do something similar for my header. If I know that I want the font size of my header to be large, I can simply say that for the main part of my web page, I can say font-size medium. And then down here, I can say the footer of my web page is going to be font-size small, and then close this curly brace, as well. So the syntax is almost the same. I still have property colon value semicolon for each of these customizations. The only thing that's really new now is that inside of the style tag, I'm mentioning in yellow each tag whose behavior I want to modify, that I want to stabilize, and I'm using curly braces like this, just to say, here comes one or more properties. Because I could, if I wanted to make this web page even fancier, have a bunch more stuff in here and in every other block. But for now, I just have the one. And to be clear, where the curly braces are does not matter. You can do this. I can put it all on the same line, if I really want, and go ahead and do something even like this. But this, of course, decreasingly lends itself to readability and maintainability, because now, the line's just going to get longer and longer and longer, the more things I add to it. So a common convention is, perhaps, where I began, which is to just open the curly brace like that, and close it on a separate line. But you can see and use different stylizations, as well. Perhaps underwhelming, though, when I save this file and open up css3.html, the file is exactly the same visually. I've just designed it differently, and arguably better underneath the hood. To be fair, it's gotten a little more verbose, because frankly, I've exploded what all fit on individual lines into this multi-step approach in the top of my web page. But that's just allowing me, ultimately, to create reusable styles. When it comes time to have not just one web page, but two, or three, or thousands, you might want to reuse some of those same stylizations on multiple pages. And we're getting so close to isolating all of my CSS at the top of the file that you can perhaps imagine factoring out of a file altogether, and putting it somewhere else. And we'll see that soon too. But first, one last technique here. It turns out that you can create CSS that doesn't just specify the names of the tags-- you can actually come up with your own keywords. And let's see this by way of an example I created in advance called css4.html. And you'll see that this file, per the green comment up top, demonstrates what are called classes. Notice that my CSS almost the same, but instead of saying words like body, and header, and main, and footer, I've chosen this weird syntax-- a period and then a word. But that word can be anything I want-- XYZ, [? Fubar Bas, ?] something else altogether. I've chosen English words that are just self-descriptive of what it is I'm trying to achieve. So .centered means the following collection of one or more properties-- namely this property. .large means the following collection of these properties. .medium, .small. So again, I could've called these WXYZ, or ABCD, anything else, but I chose English words, or my whatever my native language is, that just describes what is the purpose of everything in between those curly braces. Why? Well, if I scroll down now in css4 to my actual code, notice what I've added. There's a new attribute in my web page that's not style, but it's called class. And notice that my choice of English words now makes my HTML arguably more readable, because you can infer now from these classes, oh, the body of the web page is going to be centered, or oh, the header of the web page is going to be large, the footer of the web page is going to be small. You don't necessarily need to get into the weeds of knowing what does large mean, what the small mean. That's a lower level detail that you can see, if you care about it, but these are just semantically useful terms that now refer to the stylization, without getting into the weeds of actually doing the stylization-- as we did before with the style attribute. So this is a bit of a firehose, because we've now started with HTML, and then we've introduced CSS, and then we've been moving CSS around. But all CSS is, at the end of the day, is these key value pairs-- these properties and these values. And so CSS just so happens to come with some additional features, like the ability to create your own classes, as are implied by that single period before your choice of words. That just makes things more reusable. And this is super powerful, because in just a bit, we'll actually see that there's some wonderfully free third-party libraries, code that other people have written on the internet that you can use in your own website, that actually allows you to use their stylization and make your website all the prettier, but without having to implement all of those things yourself. So how can we take this one final step further, and actually remove my CSS from the file so that I can actually collaborate with someone else, or work on it separately, or reuse it in other files? Well, let me go ahead and open up a file that I created in advance too called css5. This one almost fits on the screen entirely. Notice that this is the same HTML as we saw a moment ago, including these classes-- large, medium, and small. But notice that I have this new tag up here. And this is honestly one of the worst name tags, because it does not do what it says. But if you have a link tag with an href attribute and a rel, for relationship attribute [? that's ?] stylesheet, you can tell the browser this-- hey, browser, go ahead and link in, so to speak. Sort of copy paste the contents of this file, css5.css, right here, the relationship of which is that it's the stylesheet for this web page. So if I open up that other file, css5.css, you'll see that it's actually now familiar. It's literally copied and pasted from the previous example, but it's in a separate file, which means now, I can use it and reuse it on multiple web pages without having to copy and paste it inside of my HTML files. I can just reference, so to speak, the same file. I can link to the same file again and again. And it means that I can work with a colleague on this. I can focus on the HTML, he or she can work on the CSS, and then when we merge the two together in the same folder, voila, it'll all just work. And so I say that this is a poorly named tag because it would have been nice earlier, when we were linking to harvard.edu, if the tag were called link. Unfortunately, we used a, or anchor, for that, and link now for this purpose. But once you memorize it or look it up will the two become more distinct in your mind. All right. As before, feel free to interject with questions. But we'll proceed now to make things even prettier iteratively here. Let's go-- SPEAKER 1: Would the DAVID MALAN: --yeah? SPEAKER 1: --the semantic tags that you have-- I forget what they are off-hand. Header, main-- do they behave like divs, if you're coming to web development from the olden days? DAVID MALAN: Indeed. When Dan was learning this stuff, and when a lot of folks, myself included, were learning this stuff, there's actually a bunch more tags. And you'll see this as you dive into the assignment and your final project, perhaps, and in the real world, as well. Div is among the more useful, and also more generic tags out there. It just means a division of the page, and it too creates like an invisible rectangle across the screen that allows you to store words, and images, and contents inside of it. Header, and main, and footer are just like divs or divisions of the page, but they're better named. And the latest version of HTML, HTML5 realized, well, we shouldn't just call everything in our web page generically a div or division. So these are functionally, though, the same. And there's a few others, as well-- things like aside and nav, which we saw earlier, and several others, as well. SPEAKER 1: And you can assign classes and ideas and everything in the same way. DAVID MALAN: Indeed. It's just a way of helping the browser help the human, especially for reasons of accessibility and for mobile access, where you might want to understand the structure of the web page, that when you tap on the screen, it zooms in on the main part of the screen, and not on like the footer of the screen instead. So rather than type out as many examples, let me go ahead and open up a few others that we've made in advance, like css6. So this one's a bit more of a mouthful, but you can perhaps infer from what we're seeing what's going on here. So I seem to have a header, a main, and a footer as before, but notice I'm not using large, medium, and small. You'll see for your assignment, or for your final project, or any number of online resources, there's different units of measure. And thus far, I used English words-- large, medium, and small-- but you can specify points. You can say 24 point, 96 point. You can use pixels-- 20 pixels, 30 pixels. Or you can even do relative values, like vh, for viewport height, which is a fancy way of saying that the body of a web page is otherwise-- well, the white rectangular region of a web page that you see on your Mac or PC is generally known as the viewport. That is literally the window you're looking at. So if you say 20vh, that's actually saying 20% of the viewport height. So if you have a screen that's this tall, the text that is in the header is going to take up 20% of the height of the screen. So it's a way of making your font size more dynamic. What about all of this? These are completely new. We looked only before at text-align, but you can probably infer what else is going on here. So color white is going to make the text white. background-image is going to take a URL-- which happens to be a relative URL, a file in the same directory called cat.jpg-- and put it on the background. It's not going to repeat it, and it's going to make the size of it cover the web page. How in the world would you know any of this? Well, frankly, I didn't really remember it the other day, and so I just looked it up in an online CSS reference. And I just know that this allows me to specify what image I want to use as the background of a web page, how I want to size it-- I want it to cover my web page-- and do I want it to repeat. Maybe, if the image is too small, do I want to see image, image, image, image, or just stretch it to fill the screen? I don't want it to repeat, because indeed, I want it to cover the screen. So you would only know what values exist and which ones you want to use, honestly, just by looking them up. And there's so many that it's not even worth trying to memorize these things. You'll just get accustomed to them, if you end up liking this and you reuse them again and again. So let's go ahead and look at what I'm actually going to see. If I scroll down to the bottom of the page, the contents of the page are actually going to be pretty much identical in this. So let's go ahead and open up css6.html, and we'll see the following. So it doesn't quite all fit on the screen, but that's OK, because I really just want to use that image as a background now, not see the whole image. And you'll see that John Harvard, and welcome to my home page, and the copyright is all in white, because notice that I did specify [? a ?] color of white. This cat is the background image, and indeed, it's covering the screen. And what's nice is that this is all dynamic. If I go in here and start resizing my browser window, notice that the font is getting smaller and smaller, because John Harvard is still taking up 20% of the height of the viewport, the rectangular region. And I'm seeing a little less of the cat, but that's OK, because again, he's just the background. So if you've ever visited a website that's far more interesting than the examples we looked at up until now, that have nice pretty background images, they might be using some CSS properties quite like those, as well. Well, how about even fancier these days-- let's jump right to the spoiler. Let's open up css7.html, which is our seventh and final version of this series, and you'll notice this-- perhaps a familiar face. Here, we have Connor boxing in the library, but I have that exact same text overlaying a video. So it turns out that, using richer media, can you do the same kind of thing-- fill the screen, but overlay the contents of your web page. Pretty common. If you go to a nice, very interactive website, you might actually see some motion video going on. Well, how is this example working? Well, let's open it up. If I open up css7.html, some of it's going to be new to me. Let's focus on the HTML first. And most of this, I think, we can notice as familiar. Footer, main, header is all the same, but notice I wrapped it all in a section tag this time, because it's like a whole section of the screen. And then up here, I have a video tag. And I had to look this stuff up too. I wanted the video to auto play, and because we only shot a few seconds of footage, I want it to loop again and again, so it doesn't become static, if the human waits there too long. And I want it to be muted. Why? Because we didn't want to hear the punching bag being hit, and also for reasons of user experience these days. A lot of browsers, like Chrome, will not auto play videos if they have sound on them. It's become too annoying for users, it's become too invasive because of ads. So if you start playing your videos muted, they will most likely automatically play. So this first attribute will be respected. But these attributes are a little weird. They don't have equal signs, and they don't have quotes. And that's just because these attributes don't need values. Just like certain tags, like image, don't need close tags, some attributes don't need values, because I'm done with my thought. Auto play this. Loop this. Mute this. One word suffices. You don't need an equal sign and double quotes. How do you know this? Just from the documentation, looking at an online reference. And for the assignment and final project, we'll point you to some popular references that are freely available via which to check these things, as well. The video tag, though, seems to take one tag inside of it, which is the source of the video. This is ridiculously named-- source source equals the name of the file, which happens to be boxing.mp4, a movie file here. The type of it is, indeed, video/mp4. So this is just how you would embed a video in a web page. How are they overlaid? Well, let's just scroll up. And we don't have to get too into the weeds here, but you'll notice I did the following. One, I told the video, make yourself 100% of the height and 100% of the width. So it turns out those are CSS properties, as well, that you would know just by looking those up. Margin 0 on the body was just to fix a little bug. It turns out that most browsers put a little white border around everything, and that looked a little ugly for a video, so I wanted to get rid of that margin. So saying margin 0 means disable any white border around the video. And then section, down here, is a technique via which you can overlay one thing on top of the other. Because think about all of the examples thus far. Like my three paragraphs, I had one paragraph, then the next one was below it, then the next one was below it. Nothing has overlapped other things yet, but in this example, I deliberately want the text overlap the video. So how do you solve this? Well, I started googling around, and I googled something like CSS overlay text on video, and I saw some suggested properties like this. Well, if I want to make my text white, just say as much. If I want to position this section, as I described it, on top of it absolutely-- I don't want it to go below the video, because that would defeat the point. I want to position it absolutely at pixel 0 on the left, pixel 0 on the right, and pixel 0 on top. That means take the section of text that would otherwise be below the video, and instead, absolutely position it 0, 0, 0-- so 0 pixels away from the top left and right. So that the effect is to overlay the two. And that's definitely among the more advanced techniques we've seen thus far. And even I had to hook this up to remember how to do this technique. But in short, all of the building blocks are still there. We have the names of our tags, that are referencing tags down below. We have property colon value, property colon value-- we're just now combining them in much more powerful ways. SPEAKER 1: And I've just noticed that you've, in a lovely way, alphabetized your attributes here. But does the order matter? DAVID MALAN: The order does not matter. If you're just as obsessive as I am, I alphabetized everything. I can make an academic argument which, frankly, it just helps me skim things, because I can immediately see if something is there or not there, if it's alphabetical. I have yet to see a reference online that is as obsessive about this detail as I am. It's not necessary. So what else can we do here too? You'll notice that I typed the word white. That's actually not, strictly speaking, the only option. We can change the text to black, for instance. And now this is a little weird. There's this little square next to the word. I did not create that square. This is a feature of certain text editors, like VSCode, that are just not that usefully showing me what color I just typed. It's more useful if you want to type something like rouge, or some other color that you might not necessarily have in your mind's eye. Here, it's just graphically showing me what white and black look like. But if I go back to the page now and reload, you'll see that black-- it didn't really look good the first time I tried it. That's why I went with white. But I can try other colors. I can try something like red, reload now, and now it's red. That's even worse, perhaps. But you can express almost any color here, as well. But it doesn't have to be a word. You can actually do it in RGB format. So if unfamiliar, RGB-- or red green blue-- is the paradigm you might see in Photoshop or in other tools. It represents how much red, how much green, and how much blue you might want in any given color. Well, it turns out-- and you would only know this from having learned it before, or poked around, or read up on it earlier-- if you do a value like 0, 0, 0-- so 0 red, 0 green, and 0 blue-- those frequencies of light together give you black in the aggregate. So if I reload the page now, after saving it, I indeed get black. If I do the opposite-- instead of no red, no green, no blue, but do a lot-- and the maximum possible value, turns out is 255, 255, 255-- and I reload now, I get white. And you'll notice what's cool about this-- if I do 255, 0, 0, that means a lot of red, 0 green, 0 blue. And if I reload now, I get my familiar red. So we can spend all day on this, but frankly, if you Google something like HTML color wheel, Google actually has this built in widget where you can choose any color of the rainbow here-- for instance, this purple-- and you'll see that, in your CSS, you can actually type, for this shade of purple, rgb(197, 45, 252). Or turns out there's another syntax. It's called hexadecimal, but more on that another time. You can, instead, use this cryptic code here. You can also type the word purple, but that's a very specific definition of a specific shade of purple. This gives you exactly this shade of purple. So just to be clear, let me go ahead and copy this, just for demonstration's sake, change this text to that with the sharp sign, save it, and reload my example, and now we've overlaid purple on top of Connor doing the boxing. All right. Well, let's go ahead and open up a few other examples that are, perhaps, a little more familiar from the real world, just to whet your appetite for what more you can do. And again, the goal here is not to absorb every one of these individual techniques, but now to get sort of the lay of the land and to understand, oh, if I want to achieve this effect that I've seen on some website, these are the building blocks that I can start to bring together to do that thing. Let me go ahead and open up in my browser images1-- plural-- and you'll see that I have this example here of Grumpy Cat again and again. But how did I get that effect? Well, you'll see that there's three of them here, and there's clearly some nice circles. And I could absolutely open up Photoshop or some other program and just do that, but it turns out I can do that in CSS. If I open up images1.html, you'll see this HTML code, including the source of this particular Grumpy Cat. And you'll see that I reference the same image-- cat.jpg, cat.jpg, cat.jpg-- three times, same alternative text each time. But notice this-- if I go to the top of this file-- I went ahead and kept my CSS in the same file, because it's such a simple example, it didn't make sense to factor it out into a second file. On my image tag, I can give it a border radius of some percentage. So how much do you want to curve it ? 0% or maybe 50%. Let me go ahead and change it temporarily to 0% and reload, and I'll see three happy cats, just as the original image is. But if I change it back to 50%, that curves it in 50%, giving me, effectively, these circles. If I really ratchet it up, say, to 90% and reload, I'll get a slightly more ovular shape now, as well. So different values there allow you to add certain effects to the actual image. What if I want to do something more than that? Well, it turns out that, frankly, it can become really tedious writing your own CSS all of the time. And if you're no artist, it's going to be really frustrating trying to get the aesthetics of your way web page just write. And yet, all of us have been come pretty accustomed to pretty nice looking web pages out there, and so for instance, you might want to borrow techniques you've seen on other websites without having to recreate it entirely yourself. So for instance, here is another example, images2.html, but it's exactly the same thing. But this time, if I open up the source code, you're going to see a slightly new tag-- this is images2-- and it's referencing a third-party site. Notice first, though, that all of this is the same except this class-- class="rounded-circle". Well, where did that come from? I could have invented it myself. We've seen a little bit ago how you can create with the dot notation, the period, your own words, like rounded-circle, or large, or medium, or small, or centered. You could certainly imagine creating a class called rounded-circle. But the cool thing here is that I did not create this class. We'll see in a second that I actually have used a third-party library, code that someone else wrote, who solved this problem for me, who figured out how to make things rounded circles, so I don't have to get into the weeds. In computer science, this is known as an abstraction. It's like a black box. I don't care how they did it, I just know that they can do it. So how do I get access to this amazing new feature called rounded-circle? Well, notice up at the top of my web page, I've done a few things. And all of this is copy paste from some documentation that we'll point you at. I am using here a library, which is code written by someone else called Bootstrap. It originally was created by Twitter, used by Twitter's website for years. Now, it's become a larger open-source project. And in short, it just makes it very easy for you to make good looking websites. Getbootstrap.com is the URL-- and we'll point you at this afterwards, as well. And if I go into the documentation and go into things like Components, you'll see, for instance, that I can make much more interesting things than I could earlier. Let me go in, actually, to Content, and go to Tables. And let me show you this first, before we come back to this example. Let me go ahead and open up one example here-- table1.html. This is kind of a mouthful, but let's take a look at what this is going to look like. That's a lot of new tags, but it's a good example of how you would go about wrapping your mind around a new feature in HTML. You open up some code, and look at it for the first time-- honestly, I don't know what all of these cryptic symbols are, but if you'll humor me, and allow me to just define a few, it should make pretty good sense. Table tag means, hey, browser, here comes an HTML table-- so something with rows and columns. Yet I don't see the words rows and columns. Why? Well, here comes thead, table head. It's a very annoyingly succinct description of the top row in the table-- usually boldfaced, or something like that. Down here, tbody-- table body-- that's all of the other rows, rows 2, and 3, and 4, and 5. Within the head is tr, table row. So this is like a slice of a row in Excel, or Google Spreadsheets, or the like. And then th is table header. This is like code for a specific cell, or technically, a column within that row. So in other words, even though it's written out in this very text-based format, this is saying, here's a table, here's the head of the table, here's a row in the table, here's a cell, here's another cell. So if you're thinking about this in your mind's eye, this is like giving me two columns-- week and lecture, left and right respectively. It's just laid out in this text-based form. What is going to be underneath the table head in the table body? Well, let's take a look at this. In the table body, I have table row, table row, table row, table row, table row-- so at least five rows below the header. What are the cells in each? Well, when it's not the table header-- the first row-- it's called td, table data. These are awful names, but it really refers to cell. It would be like having a tag called cell. So in the first column, it's going to say 1, and in the second column, it's going to say, Telling a Story and Introduction to Post Production, which was the name of our first lecture in this room. Lecture 2, Framing, Composition, Lens Basics. Lecture 3, Exposure and Visual Camera Artifacts, and so forth. So we're creating another table again, where it says week and then lecture, and then 1, Telling a Story and Introduction to Post Production; 2, Framing, Composition, and Lens Basics; and so forth. So long story short, if we wave our hand and open this file up now, table1.html, you'll see a pretty simple and ugly HTML table. Now, it looks like the table body is left-aligned, and the table heading, not quite obviously, is centered here and there. And honestly, this looks ugly. And I could spend five minutes. I could spend an hour adding borders, or colors, or trying to style this table, but why bother? One of the key features of programming these days, and web development these days is you can stand on the shoulders of other people who've already invested that time, and who are maybe even more artistically inclined than you, and instead, make your same data in your table look not like table1, but like table2. And voila. Now, you might not love this table still, but arguably, it's much prettier than the previous one. Everything's nicely lined up. I have this nice striping to draw your attention to one row, versus the other. How did I get to this? Well, it turns out in table2.html, my code is almost identical, except-- indeed, my code is almost identical, except notice what I did up here. I added a class to my table tag. Before, I just said open bracket table, close bracket. But here, I've said table table-striped. Those are two classes that someone else invented-- specifically, the people who wrote the Bootstrap library invented for us-- that, so long as I include their code in mine, I can now have access to their stylization of tables. So just by adding those two words, table and table-striped, all of my HTML now renders like this, instead of like that. And that really is starting to hint at the power of CSS. How did I do this? Again, I read the documentation, and I ultimately copied and pasted these three lines from the documentation. The key one really is the third. This is referencing a URL of CSS that someone else wrote for me-- namely, the authors of the Bootstrap library. And if I view this file, which I can do by pasting that same URL into a browser, you'll see a huge mess. And if we look really closely, you'll see lots of semicolons, lots of colons. Those are just a huge number of properties that the authors of Bootstrap have invented for you, and I, and everyone on the internet, if they want to use. So we just get a lot of functionality for free. So similarly, when we had the second version of our images file a moment ago, the reason that I can now just say rounded-circle is because someone else invented that class for me. So it's suffices for me just to use rounded-circle and to include Bootstrap's code up here with this new link tag. And voila, my website is more powerful and looks prettier than it might otherwise look. SPEAKER 1: Here's a question for you, David. DAVID MALAN: Indeed. SPEAKER 1: So you said we can create our own classes with period. So if we wanted to create a rounded-circle class, we would have a CSS file or higher up in this file that was .rounded-circle. DAVID MALAN: Mm-hmm. SPEAKER 1: What would happen if we had our own rounded-circle and we imported the Bootstrap library? DAVID MALAN: Really good question. If you had your own definition of rounded-circle, and Bootstrap had its own, whose would win? Well, there, again, is the C in Cascading Style Sheets-- whoever's class is defined most recently takes effect. So if you had this link tag here, and then maybe a style tag below it, or another link tag linking to your file, and you both happen to choose accidentally the same keyword for your class, whichever one was defined most recently, lower in the file, would override the previous one. So you generally want to be where those kinds of collisions, so to speak. SPEAKER 1: So this might be an accidental overwrite, or maybe intentional. Who knows? DAVID MALAN: Indeed, indeed. It could be a feature or a bug, so to speak. Well, let's take a look at a couple of examples too that are really synergistic with some of the media with which you've been experimenting and creating for this particular class. Let's go ahead and open up iframe1.html. And this is one of the last tags we'll take a look at. Iframe is like an integrated frame. It's like an embedded web page inside of a web page. And this is a useful technique, because if you've ever noticed various websites, of course, embed YouTube videos, or Vimeo movies, or images, certainly, from Flickr and all sorts of other websites. How did they actually do that? Sometimes using an iframe, which is like saying, OK, I'm making my web page, but inside of my web page, I'd like to allocate a rectangular region for someone else's web page. And maybe that web page is actual text [? and ?] images, or maybe it's actually a video. YouTube uses this technique, the iframe tag, to allow you and I to embed videos that they're hosting on their servers, but in our website. And that's a wonderfully powerful tool, because it means I don't have to figure out how to host videos on my own website. So how do I do this? Well, here's an example of HTML iframe1.html. All of these tags are now familiar, from earlier examples. The only new one is iframe. It takes an attribute, optionally called allowfullscreen-- if you want that little expansion icon to work, so that you can fill the screen with the user's video. frameborder="0" just gets rid of a stupid default border that you would otherwise see on your web page, which just looks ugly, but you don't need to remove it. Height means give me a rectangle that's 315 pixels tall, because that's how big I've decided I want my video to be. What is the source of this iframe? Well, I want it to be this URL from YouTube. And I just looked at YouTube and I clicked the Share icon, and clicked Embed, and I found the URL that I actually want. If you're familiar with YouTube from your own videos, you'll know that they have their own IDs. And that's all that is there. And then at the end here is width. The width of my video, or the little rectangle in the window should be 560 pixels. Weirdly, the iframe should have nothing inside of it, but you indeed need to close it for historical reasons. So sometimes in the tech world, left hand didn't talk the right hand, and you have these inconsistencies, and you just have to kind of remember that these disparities exist. So nothing goes in between those tags, but you do need to close the tag. Well, what's this going to look like? Well, let me open up iframe1.html, and voila, you'll see some familiar faces. Now, it's a small rectangular video. You can see that margin I described earlier, kind of a stupid looking white border that's just there because. That's fine. I didn't get rid of it this time, but this is kind of ugly, right? Why not let Dan and Ian fill the screen? Well, I probably shouldn't have hardcoded that same width and height. So how could we go about improving this? Well, let me go and open up in my editor iframe2.html, and you'll see this. Same HTML almost, except I've included-- actually, let me get rid of this for just a moment. Same HTML down here, except I've gotten rid of the width and height, because remember, we can control width and height with CSS. And notice this is a slightly new technique. If you want to apply the same properties to one, or two, or three or more tags, that's fine, just separate them with commas like I did here. So this is like saying in one fell swoop, hey, browser, allocate 100% of your height and 100% of width not only to the whole thing, but specifically to the body, and then within the body to the iframe. So this kind of explodes the iframe and the body to fill the entire screen horizontally and vertically. iframe border, I just really hate that darn border, so I say border 0, and that gets rid of that. But that's just an aesthetic preference. But the cool thing now is that now, it's going to kind of look like we're watching Netflix or the like. Because now, in iframe2, voila-- now, it's filling the screen-- almost, almost. I still have this stupid border, or rather, this margin. How can I get rid of that? Well, let me actually go in here and edit this myself. I know that this is on the body. And I can say margin 0, save the file, and now again, notice this white border around the video, if I reload now, voila. Now, it looks pretty darn good. Now, I'm fully filling the web page, and I have the ability now to play this video, if I so choose. SPEAKER 1: Just as good as Netflix. DAVID MALAN: What's that? SPEAKER 1: Just as good as Netflix. DAVID MALAN: Just as good as Netflix. Ever more engaging. Unfortunately, Dan and Ian don't look so good if I start doing this. So we can eventually get rid of one or both of them. So it looks like the video is not actually maintaining its aspect ratio. And this, of course, is going to bother anyone watching it. So of course, it would make sense maybe to make sure not 100%, 100%, because then it's dependent on the size of the user's window. Let me enforce a 16 by 9 aspect ratio, for instance. Well, how can I do that? Honestly, it's not easy. It would take me some amount of time and tinkering using CSS to figure out the right numbers, and the math, and the sort of dynamism so that I ensure that this video is always 16 by 9. But you know what? Bootstrap's figured that out for me. If I go ahead here and search for video, and go under Embeds, you'll actually see that Bootstrap provides you with the ability to create responsive video or slideshow embeds based on the window of the parent dot dot dot. It's a bit of a mouthful, but responsive is this term of art in the tech world that just means an element on the web page that dynamically resizes, based on the device in question. So if I scroll down further, you'll see here under Aspect Ratios, oh, here on Bootstrap's website is some sample HTML that uses the tag Dan mentioned earlier, the div tag, via which, using some special classes, can you specify what your aspect ratio is. What aspect ratios are available? Well, they support these three-- 21 by 9, 16 by 9, and 4 by 3-- if you use Bootstrap's premade classes. So again, it's just like a buffet of features, none of which you would know necessarily from the get-go how to create yourself. But that's the whole point. These are sort of black boxes that you can just use off the shelf in your own projects. So if I go now into iframe3.html, the third version, notice that this version, if I resize my window, actually maintains it's aspect ratio. It does add some letterboxing, but frankly, that's the only way to do it. If you want to maintain a 16 by 9, you got to fill the space somehow else. Maybe I chose black, you might choose white or something else. But at least now, Dan and Ian have remained proportional. Well, how did we do this? Well, if I open up iframe3.html, you'll see that I've again, at the top of my page, included Bootstrap's code. And that's just copy and paste from their documentation. But then down here, notice that I've added these classes. But I had to do a little bit more, and I only knew this from reading Bootstrap's documentation. At first glance, these would have no meaning to anyone else without the documentation. I just copied and pasted the recommended classes and added the requisite wrapper tags, like divs, so that Bootstrap can do its thing. And again, there's the distinction-- it's useful to understand how CSS works and what you can do with it, but you don't need to necessarily spend a huge amount of time getting into the weeds. When all you care about is a high level problem, like aspect ratio, libraries like Bootstrap exist to save you and me time, so we can focus on the problems we do care about, and not the ones that we don't. Now, we mentioned those HTTP parameters earlier, those customizations, notice how this is relevant now. In our fourth and final example on iframes, notice what I've done with Dan and Ian's introductory video. Here is the same embed URL as before, but notice now that question mark. There's a question mark now, after which is autoplay equals 1, then an ampersand, then list equals, then this cryptic string. Then if I keep going, we'll see at the very end of this line mute=1, after another ampersand. Well, what are those? Well, you know what? I googled this-- YouTube embed parameters-- which is the term of art for things that come after the question mark. I found this documentation right on Google's home page, and I scroll down to Supported Parameters. And I found one called autoplay, and I found one called list, and I found another called-- not here-- mute documented later in the documentation, unfortunately, that led me to realize that, you know what? If I do use that same YouTube URL, but embed these parameters after the question mark, notice how I can slightly improve my user experience, so that when users visit Dan and Ian's page here, it immediately starts playing. And so it's muted, so we're not going to hear them. But this is arguably the experience I now want, if the whole purpose of coming to this website is to see the video played. So very familiar features that you yourself might have seen on the web before. And they're actually pretty accessible, not just off the top of your head, but if you assemble these various building blocks of HTML, and CSS, and the features therein, can you reconstruct now some of these very familiar user interface mechanisms. Let's do one last set of examples to set the stage for where you're going to be going-- not for this week's assignment, but for perhaps your final project, and for our next lecture, wherein we're focus on a third language called JavaScript. JavaScript, as we'll eventually see, is an actual programming language. You can write software with it. You can make interactive things with it. HTML and CSS or more about markup, and aesthetics, and the display thereof. So we're going to need some JavaScript to make our websites even fancier. But let's look at this final set of examples here. In images5.html, I have a very simple and very primitive gallery of sorts, I've got some thumbnails up here-- all of them the same cat, for demonstration's sake-- and then this big rectangular region that I want to load the full image into. So this is like a very weak version of Instagram, or SmugMug, or Google Photos, or something like that. But let me go ahead and click on any of the identical cats, and voila, they end up in that particular box. So a very similar mechanism to a lot of these photo-based websites where you can toggle among the thumbnails, and see a particularly big image. This uses an iframe, and it actually is using HTML tags to load individual images into the bigger iframe. But this iframe, I decided, is just going to be a square. It's going to fill the whole screen like Dan and Ian's video. But that would be one approach. Though another progression of this, though, might be something like this. Let me go ahead and open up now images6.html. Now, this looks a little cooler. I have now three identical cats, but I could certainly swap out those for dogs or other such cats. Each of them has a title, and a description, and then a button linking to the reference via which I got this image in the first place. And so now, things are looking kind of nice. But honestly, based only on a couple of hours of HTML, how would you even begin to have three different cats, and then some bold facing, and some text, and some pretty blue buttons? This is a lot quite quickly. But if you know HTML and you know how to use CSS in libraries therefore, can you, as in images6.html, do a little something like this? At first glance, there's a lot going on in this file. But how did I know to do this? I read Bootstrap's documentation. And you'll notice keywords like card. Why? Well, in Bootstrap, I got to poking around, thinking about what other features they might have, and indeed, I found cards. Cards-- if I scroll through the documentation, you see some samples here. And I'm like, oh, I like this layout, like an image with a caption here, and then the title, and then some text, and some blue buttons. I don't really know how to do that, or it would take me some time to figure it out. But that's fine, because if I scroll further, this library, like other free libraries, they'll give you some sample code. And I literally just copied and pasted this HTML, I filled in some of the dot dot dots with my own cat.jpg, and I read the additional documentation for customization to figure out how I can use these cards three times in a row in my own website. So again, we're just scratching the surface of a lot of the free features. And this is how some of today's most popular websites really get made-- by standing on the shoulders of others who have helped them solve some common problems. So the last common problem we'll solve is this-- this one also caught my eye. Bootstrap, and other libraries like it-- which are just as free and open-source, so to speak-- also gives you the ability to do things like this, where you can have a slide of images depicted on the screen here with controls, for instance. So you could imagine this being a website where you're clicking on your three favorite images on your own portfolio site. Or down here, maybe this one, where there's even these little breadcrumbs that show you how many images there are. This is really cool. I want this in my website, but my god, how do I even begin to do that, and respond to mouse clicks, and the like? Well, that's OK, because we have the building blocks. And with Bootstrap, you'll see that there's some sample code. And indeed, I copied and pasted this, and I started to customize it. I recognized keywords, I recognized structure, like tags and attributes, and I went ahead, and with a few minutes of effort, I went ahead and created, finally, our last example tonight, images7. And you'll see a few more lines at the top, because I copied and pasted some more of the instructions, all of it referring to Bootstrap. But that's just from the documentation there. You'll see more HTML but you'll see some familiar tags-- div, and ol, and li. This is all based on that sample documentation. And then you'll see up here, I decided my carousel shall be 640 by 604 pixels, which matches the size of my Grumpy Cat. And the effect in images7 is to do this. I now have Grumpy Cat, I have the caption therefore-- Grumpy Cat from Know Your Meme-- and then a slider of three. And then somehow, automatically-- I'm not even controlling the keyboard-- is it sliding among the three available? Images I happened to use the same cat three times over, but I just have to change the source attribute to dog.jpg, or bird.jpg, or three different cats, or whatever to achieve the same result. And this is the only thing tonight that we can't do with HTML and CSS alone. This carousel, with which will end tonight, has, of course, these interactive features. On the one hand, it's sort of on autopilot. It's scrolling itself, and indeed, it's scrolling visually, which is something we didn't even look at. I can click left and right, and I can even click on this little thumbnails or those breadcrumbs. That's going to require a little more power, not just the ability to mark up content and the ability to stylize content. We need to make it interactive, and so for that, we'll introduce next time this language called JavaScript, an actual programming language via which you can listen for mouse clicks, you can scroll things from left to right, and really bring life to your projects. But ultimately, even though this has absolutely been a firehose most likely between HTML and CSS and now, these sort of teasers for next time, realize that if you understand tags, and attributes, and their values, and CSS properties and their values, and are going to be comfortable, ultimately, poking around some online documentation, you can build out your own vocabulary, and do these kinds of examples and so many more. So why don't we officially call it a night here? And as always, we'll stick around for questions. SPEAKER 1: I just have a couple questions for you. As you said, it was a firehose for many people where this is your first time seeing this. And this is very kind of pedantic, where you're typing in all this HTML code. But how do we kind of evolve from this to the next step? Let's say that this is an interesting problem that we want to solve, and we want to go on to next things. How do we start to learn about things like libraries, and frameworks, and-- what's next? DAVID MALAN: Really good question. So you can certainly pursue other courses in web development and web design. So the course Dan mentioned earlier, CS50, is one of them. There's certainly any number of free online tutorials and references online. Frankly, I learned HTML over the course of probably an hour or two, when a TA taught me some years ago. And then I've just kind of read up on technique since. And so reading, and googling, and just experimenting. What's nice about HTML and CSS is they can't really break things, because worst case, something doesn't look the way you want. So just hit Control-Z or Command-Z to undo what it is that you've done. And really by experimenting, I think, you will learn a lot of this, and just by googling references. And when it comes to learning even new techniques, the world is your oyster now, so to speak. You can go to any website now, that you've been going to every day until today, go to View, View Source, and you can actually see how it is they built that. Or go to Developer Tools and actually look at the HTML. And just case in point-- if I go, for instance, to harvard.edu, and I pull up View, Developer, Developer Tools, you'll notice, if I shrink this a little bit-- and for instance, suppose I really want to see how did they make this Harvard University? I can right-click or Control-click on that part of the web page-- and if you've never noticed this, your browser might very well have this option Inspect-- it will jump you to the very line of HTML in this website that is implementing that particular link to Harvard's crest. If I click on the triangle, you'll see that there's this tag called span. That's similar in spirit to div, but a little bit different. You'll see the word Harvard University. And in short with enough ingenuity, can you reverse engineer how it is a website did something so that you can adapt some similar technique in your project too. SPEAKER 1: Awesome. As we all know, the internet is fraught with examples, for better or for worse. Are there any references that you tend to rely on or think are good, at least for the current time? DAVID MALAN: Yeah, absolutely. We can add these links, as well. w3schools.com is a good one for HTML and CSS tutorials, ultimately JavaScript as well there's another one from Mozilla, the folks behind Firefox, which have a very authoritative website when it comes to a lot of these things. But generally, Google is your friend, and generally speaking, the top hit or three will be pretty good matches for any feature you want. So what do I mean by that? If you want to know how to left-align text, literally Google CSS left-align text enter, and odds are, you'll get any number of responses. There's also a very popular website called Stack Overflow, for programmers and web developers, which is like a Q&A website. And that tends to be one of the most popular places for Q&A, and almost every question you might have has probably, amazingly, been asked by someone else. So finding those Google search results too will help you solve problems really fast, as well. AUDIENCE: Question. DAVID MALAN: Yeah. AUDIENCE: So I've heard about people tricking codes out [? there. ?] So if you copy it and you try to put [? my effect your computer, ?] so how do we avoid [INAUDIBLE]? DAVID MALAN: So to be clear, the question m how do you avoid someone copying your HTML and CSS, and therefore your website? AUDIENCE: No, like if you see something pretty cool and you would like to use it, and when you copy the code, it actually was a trick just so they can infect your computer. DAVID MALAN: Oh. AUDIENCE: I've heard of those before. DAVID MALAN: Yes. So what I have been opening is a very powerful tool. When you go to Developer Tools, there have been issues where people are told, click on Console instead of elements, and paste something from a website to reset your Facebook password, or unlock free features. That is never, never, never the thing to do. There is no use case I can even think of where that has solved the problem for me. And what it's doing is this command line here, this blinking prompt, which we did not use tonight, really gives you control over the current web page, and can lead to theft of information. And so just ignore all such requests to do things like that. Really good question. All right, let's call it a night again, and we'll stick around though, if folks have one-on-one questions.