 All right. Welcome back to Computer Science E1. So it's been a while. My name is David Maylan. I'll be with us for the rest of the semester. We actually have a couple of lectures left. So we've got tonight, during which we will focus on website development. Language is called HTML, CSS, and the like. Next week, we'll look a bit of programming. We'll use a graphical programming environment called Scratch, which is a language that was developed down the road at MIT's Media Lab. And with this language, will we be able to explore things like loops, and conditions, and threads, and events, all concepts that full-time programmers really play with day in and day out? The week after, we will have our second, what was it? Let's say, in the last two weeks, we will have a movie night, and during which we will watch Startup.com, which is a wonderful and a fascinating documentary about the rise and fall of a company called GovWorks.com during the dot-com craze, where everything kind of went up and up and up and up, including the founder's enthusiasm, and then down and down and down. And these folks, for better or for worse, filmed their entire progression over the several years that they rose and fell. And so you really see the inner workings of an actual startup. And then, of course, we'll have our second exam mixed in there as well. Any questions before we forge ahead? All right, so one question tonight from our not-dumb question box. And that question was, how is VPN related to encryption? So before I answer it, maybe an answer from you. Anyone who didn't ask this question, how does VPN relate to encryption? And I'll fill in any blanks. It's a good exam review, actually. So, yeah. Close, virtual private network. OK. OK. OK, good. And let me summarize for those following along at home. So VPN is virtual private network. And what a VPN does for you is it creates a tunnel, an electronic tunnel between your laptop or your desktop here and some remote site. And that remote site is usually a university's campus or a company. And it creates the illusion that your computer is not on your local Comcast or Starbucks network, but rather on that remote network. And the upsides of this are that, one, there's a little bit of security. Recall that we discussed in the context of fire sheep and wireless packet sniffing. At least by using a VPN, you can generally hide yourself from adversaries, at least in your immediate vicinity, like a Starbucks. And it also allows you to get access to network resources like file servers, maybe printers, email servers, other computers that are associated only with that company. Now with that said, in theory, a VPN, a tunnel, might not be encrypted. But let's say nine times out of 10, maybe 10 times out of 10, it is, in fact, encrypted. And so that's really the P in VPN. The private network suggests that generally there is encryption going on so that when you are browsing the web or accessing remote file servers or doing anything like that with the remote network, it is, in fact, all scrambled. It's encrypted so that no one between point A and point B can actually see what's going on. So to summarize, how is VPN related to encryption? In general, and almost always, I would say, a VPN is implemented by way of some encryption protocol that's making sure everything scrambled between points A and B. But the encryption can be used in many other contexts. A VPN, though, specifically refers to this idea of a tunnel between two sites. Nicely answered. Other questions related to that or anything else? All right, so this is actually a good segue to things network related, specifically the web. So here's a little depiction of two computers. One we would generally call a client. One we would generally call a server, the client being on the left, the server being on the right. And these two computers, as the text suggests, are engaged in an HTTP transfer of some sort. So an HTTP, it's not pictured here on the diagram, but we've certainly seen this before. In what context do you see the acronym HTTP? Because these arrows happen to describe this thing called HTTP. OK, web address. Yeah, you've seen your browser bar, right? Odds are these days most of you probably aren't in the habit of bothering to type HTTP, colon slash slash, if only because it's a little tedious, but also because browsers these days, if you just type google.com, cnn.com, and hit Enter, what do they generally do for you? Exactly, they automatically put it in for you. And that wasn't always the case, but the world kind of realized that this is not an intellectually interesting exercise to constantly type that protocol. And the reality is, even though there are other services provided by the internet, there's instant messaging, there's email, there's web, there's FTP, and a whole slew of others, nine. I'll again make up a statistic. Nine times out of 10, when you're using a web browser, you're accessing a web site. And the web uses this protocol called HTTP. So what is this protocol? Well, protocol in general is a set of conventions, a set of standards that two people speak. For instance, if I meet Rose for the first time, she doesn't know this is coming. Hello, Rose. I am David. Hello, nice to meet you. Nice to meet you, too. So this is a silly human protocol whereby, when you meet someone for the first time or haven't seen them in a while, you extend your hand, you shake hands, you say some pleasantries, like how are you, and so forth. And that really is a protocol. When I extended my hand, Rose knew because she implements humanity to extend her hand as well and actually have this two-person handshake. And she also knew to exchange pleasantries in return. And that really is a protocol. Now, in the computer world, it's not quite as visual as that. It's all happening electronically. But what goes on on the web is essentially a picture like this. If you pull up a browser, Firefox, IE, Safari, whatever you like to use, and you type in cnn.com, or you type in the full URL, htp colon slash slash cnn.com slash, well, what does your browser do? Well, on a high level, it requests the day's news from cnn.com. CNN responds with the news. And on your screen, you see a whole bunch of text and a whole bunch of images. But let's dive in a bit deeper today. Not as deep as the first few lectures when we talked about TCP, IP, and zeros and ones transmitting across the internet, a little higher level than that. But now, the equivalent of our human handshake in the world of web traffic is that my client, my browser on the left, sends a message to the browser that generally looks like this. Get? Well, what do you want to get? The default web page. And if you've noticed, at the end of almost every URL is a forward slash. So that implies the default page on a website, the home page, if you will. And then by convention, a browser will also say what version of this language it understands or supports, the two primary ones being 1.0 and 1.1. So when we've been saying all of this time that a browser sends a message to a server, when we've said a browser requests a page of a server, well, what is it really sending? Well, it's not sending an email, but it's sending a message akin to an email in that it is pure ASCII text. It's just alphabetical letters. And it's sending a virtual envelope, if you will. And you think back a few weeks, what's on that envelope? Well, the IP address of the web server and my IP address is in the return field. So all of those details still apply. But today, inside of that envelope is a written message that, in its simplest form, is just this. Get me the root of the web server. And by the way, I'm speaking this language, just so that we know exactly what version of the protocol we're speaking. We can be a little more specific. You might have noticed that some web pages actually have what's called a path in the URL. So something.com slash, and then some more words, with some slashes, maybe with some dots, and the like, much like on your own computer. C, colon, backslash, program files, backslash, whatever. Well, you might also see a file request like this, where the message inside that virtual envelope is get me slash index.html. And what that's going to do is return to you not just the default page, but specifically the web page called index.html. So let's actually see this in action. It's not the case on all websites. But if I go to one, at the rest of distracting us with some of the day's news, if I go to HTTP, cnn.com slash and hit Enter, we'll notice that the day's news comes up. Well, if I instead do this again and do HTTP colon slash slash cnn.com slash index.html and hit Enter, what comes up? Well, it looks like precisely the same thing. So it appears that CNN has created, for today's headlines, a file, a text file, in fact, called index.html. And so that begs the question, well, what's inside that file? And it's inside that file that we're going to look today because the focus of today will be actually implementing websites and actually writing the language in which pages are written. HTTP is the language via which pages are requested from browser to server. But HTML, hypertext markup language, is the language in which those actual pages are written. And that's what we'll be writing ourselves today and for the course's final project. So before we peel back that layer and look at what's inside of index.html, any questions? On HTTP, the web, or anything related? Yeah. OK. Same thing. Absolutely. So if you've ever looked at a URL and you've been popping around pages, the URL does not stay slash, that's it, doesn't say slash index.html. It will often change. This is page 2.html, page 3.html, aboutus.html. What that means is that the author of that website has created multiple text files, all of which are named by convention something.html. And what we'll see today is that simply by writing a line of this language called HTML, can you link from page to page so that the browser knows when I click on something called 2.html, that should make another HTTP request, but not for this file, but for 2.html. Good question. Other questions? All right, so let's get overwhelmed for just a moment with some crazy syntax. I'm going to go back to cnn.com. And what I'm going to do is go up to my view menu. This varies by browser, but generally there's a view menu somewhere. And you can go to view, and I'm going to go to page source. Might be called something different in different browsers, but the idea is the same. Find the source code of the page. And for those unfamiliar, source code refers to, generally, the text that a programmer has written in order to implement a program or a web page. To be clear, HTML, as we'll see it tonight, is not a programming language, per se. Next week, we'll see Scratch. That is a programming language. Maybe we'll look at some snippets of languages like JavaScript, C, C++, maybe some acronyms you've heard of before, but not necessarily learned. HTML is not a programming language in that it really is all about markup and aesthetics and where to put text, where to put colors, where to put images on the screen. It's not, as we'll see, a language that you can write commands and logic in. You can't tell the computer to do something. You can only describe how to display something, we'll see. But that distinction will be more clear tomorrow, next week, rather. So I go to view page source, and it looks like whoever it is that works for cnn is their web developers. This is the stuff underneath the hood that implements the site we've seen to be cnn.com. And I'm going to scroll down, deliberately trying to overwhelm, because by the end of today, most of this will actually be readable. If not already, this probably looks a bit like Greek or some variant thereof, but soon it will not. And in fact, let's see if you can't tease apart some noteworthy aspects of this, at least for those unfamiliar with HTML. What stands out about what you're seeing here? What's similar? What patterns do you see? OK, what do you mean by commands? OK. cnn.com. OK, yeah? I'm referring to different stories. OK, good. So somewhere in the middle of this source code, this HTML code, there's at least something that feels a little more familiar. OK, I've seen URLs before. Maybe I haven't seen that URL before, but it starts with HTTP colon slash slash cnn.com slash 2001 slash US. That long thing after the first slash is the thing I called a path before, much like a path on your own computer's hard drive. Well, that's just a URL that I could just copy and paste into a browser, copy and paste into an email, and visit it, and actually read what that article is. But here, we're looking at the underlying source code, so that's actually a perfect inference. What's probably going on here is that this URL that happens to be embedded in this HTML file, once it's viewed not with human eyes, but with a browser. And this source code is translated into the structure of a web page. Odds are, we'll see a blue or red or whatever, a link that maybe has an underline under it so that when clicked, where does it go? Probably goes to that URL. And now let's actually look to the left and to the right of this thing. It's a little small, and I'm actually zoomed in about as far as I can here. Well, maybe I can go a little more. So I've zoomed in a little bit. There's the URL at top right. What do you see that's interesting structurally to the left of this URL? Yeah. Yeah, so there's a. Oh, perfect. Exactly. Yeah, so notice the href. It's in black here. And as an aside, this is just Firefox being nice and user friendly by color coding everything. The human who wrote this code did not highlight and make something black, something purple, something white. This is all just made to make different parts of the page stand out. It's really just black and white text that you could write with any program. But notice the href. href equals quote unquote. And inside of the quotes is the URL. So the left of the href is open bracket, open angled bracket A. And it turns out that A is the first tag that we're talking about here. So HTML is a tag based language. If you maybe used word perfect 1.0 back in the days before there was really Microsoft Word and WYSIWYG editors, what you see is what you get, where you can drag and highlight and whatnot. You had to be ever so deliberate when writing an essay. If you wanted to make something bold-faced or italicized or underlined, you had to do something that's actually identical to what is done in HTML today. So if I wanted to write an essay back in the day using the earliest of word processors, I might say hello. But if I really wanted to emphasize the next word, just to come up with an arbitrary example, I could do something like hello mom and just write it in all caps. Or if I had the power of a printer that can actually do bold-facing and italics, I can do something a little fancier. I can say hello comma. But now I have to tell the word processor start to make the following text bold. Now how do you do this? Well, it's just a convention that someone decided is going to be in the world of HTML. Open bracket B, close bracket. And now I can write mom in sort of non-yelling text. But now I have to tell the word processor, stop making everything bold. Otherwise the entirety of my letter will be bold, which just looks silly if nothing else. So the opposite of the B tag is the forward slash B tag. And then notice the angled brackets on both sides. So this says start making something bold. This means stop making something bold. And then I can continue this pattern making anything I want bold-faced. Now take a guess. What's the tag in this language called HTML for making something italic? It's going to be, yeah. Yeah? I'm sorry. I had this problem on wiki last night. OK. Indeed. OK, so let's come back to the wiki in just one moment. I'll explain the differences there. Yeah? Exactly. So if we wanted to make mom italicized, I can change the B to an I. If I want to underline the word mom, I can change it to a U. And there are a whole bunch of other conventions like that. Now A does something a little more fancy than pure text, than pure formatting of text. So we'll come back to that in a moment. But a quick word on the wiki. So the whole semester, we've been using that tool called MediaWiki, whereby you've been able to post your articles about hardware and software and networking stuff on the course's website. In a sentence, what is a wiki? We defined this a while back. But what is a wiki as you understand it now? You've used it. So OK. So let's put someone on the spot here. So you've clearly been using a wiki for the past few weeks. So just in a sentence, how would you describe it to your mom, your dad, your husband, your wife, your kids, stranger? What is the wiki you've been using in this class? User created database. OK, it's a user created database. That's actually pretty good, right? It's very web 2.0 in that anyone on the internet, at least people with usernames in the class, can actually edit it. So it's user generated content. It's not me and Dan and Chris and Rose writing absolutely everything there. So that's a salient feature. But what's interesting about it too is that you don't have to know stuff like this. You've never seen stuff like this. Unfortunately, you've seen some stupid alternatives. So the idea of a wiki originally was to make it a lot easier for normal people to edit websites. You don't have to do something called FTP or SSH. You don't have to connect to a remote server. Rather, you stay in your comfort zone. You open a web page. You click a link, maybe log in. And then as you all have been doing, you can click like an edit link. And then you get a big text box. And you can edit the contents of the page there without knowing stuff like this. Unfortunately, and this is really more of a personal disappointment with the whole wiki approach, is that you still need ways of semantically tagging the words that you're writing so that things do show up as bold-faced or italicized or underlined. And as you're pointing out, MediaWiki specifically has some curious conventions. If you want to make something bold-faced in MediaWiki, what do you do? What was it you proposed earlier? Yep, exactly. One, two, three. And then I would write mom. And then one, two, three, period. So the funny thing is, the whole point of a wiki is generally to save normal people the frustrations of having to learn something like a markup language, like HTML. But in many cases, do you find yourself just learning a completely different set of conventions that achieves the same result? In fact, it's no more efficient. Open bracket B, closed bracket for bold-facing in MediaWiki, apostrophe, apostrophe, apostrophe. We haven't really made all that much progress. So realize, though, that what you've been doing all this semester with the wiki is actually creating the former from the latter. You were creating the HTML from the wiki markup. If I go to computerscience1.net, this is the course's home page, which we, the staff, occasionally edit ourselves. But we never really write HTML. In fact, if I view the source of this page, as I can, by looking at view source, we'll see text much like, actually this is a bad example because I actually used HTML in it. Let's go to this page here. I'll come back to that one and explain why I waved my hand there. So here's the page for homework that, once every couple weeks, we update with an additional link to the next homework assignment. And there's no HTML. There's a star, which creates a bullet, as you've seen in the before version. There's open bracket, open bracket, and then a word, and then close bracket, close bracket. And that creates an internal link to another wiki page. But the funny thing is this is no less complex than the stuff we're about to dive into today and the stuff that drives the entire internet. And in fact, in MediaWiki, you can, if you want, also if the system administrators have enabled it, embed raw HTML code so that you can do things like embedding a Google Calendar, which we've done, or laying things out on a table as I've done on the home page with our two names, and things like this. So long story short, what we're doing today is going underneath the hood of the wiki, too, because even though in MediaWiki, we're editing content like this, when you actually click Save and then view the results of your hard work on a homework assignment, you see a web page. But now, if I go to that menu option I mentioned earlier, View Page Source, what MediaWiki is doing for you is reading the wiki text that you wrote. It's converting it to the equivalent HTML so that you did not have to know or care about the underlying implementation of this web page. And in fact, if you scroll through this now, you didn't write any of this. And in fairness, this would have been super tedious to have to write all of that out just to do a simple update to the web page. And so therein lies the value of a wiki is that it allows you to generate a lot of content automatically and only plug in a subset of that content yourself using a fairly user-friendly syntax. But curiously, no less verbose sometimes than the actual HTML that it gets converted to. So back to the first story at hand, which was CNN. I don't see a B tag here. I don't see an I tag. I don't see a U tag. So it turns out there's slightly more interesting markup going on here. So a few pieces of jargon so that we can start taking them for granted. In HTML, this is generally called open bracket. Then you have a letter or a full word or a shorthand notation for a word and then a closed bracket. And this is generally called a tag, a start tag, a open tag, or just more generally a tag. And the opposite of this thing is called a close tag or end tag. And it generally looks like the opposite. But we've seen already that there's actually variants of these tags. We've seen already that there's a tag that does not look as simple as this. What's one such tag? That's not nearly as simple as this one. Exactly. The one that began the story, open bracket, A, space, href equals quote unquote. And so indeed, a lot of tags can have their default behavior modified by things called attributes. And the most obvious one of those is that hyper reference. So let's take a look at this one. The tag here is called A. Anyone know what the A stands for? Anchor. So anchor, a hyperlink here. Hyperlink being a link, a URL, a highlighted text that you can click. So this is the anchor tag. The anchor tag takes what's called an attribute. And that attribute, hyper reference, just fancy way of saying link or URL, the value of that hyper reference has to be enclosed in quotes. And the quoted value in this case is going to be URL. And just so as not to get bored, I'm just going to write the first part, HTTP colon slash slash, something. Close quote, close bracket. And then over here, I'm going to write the corresponding close tag. And notice there is a nice feature here. Even though we had to type out all of this attribute in the open tag, the close tag remains succinct and simple. You only close the name of the tag. You don't reiterate, which would just be annoying, if nothing else, the entire list of attributes that followed it. So this begs the question now, what goes inside here? Exactly, the name of the link. So notice now the two-pronged approach we have here to implementing a clickable link in a web page. The destination is going to go between quotes here. And it's sort of hidden from the user inside of the open tag. But here is what the user sees. So that if this is a really long article on CNN's website but you just want to express that link more succinctly, and the user frankly probably doesn't care about the actual URL, we can say the link will be called election results, which is a much more inviting and a much more human friendly link that I might want to click on than something that literally looks like HTTP colon slash slash whatever the rest of the URL might be. But now let's circle back to previous discussions of security. What was a phishing attack? Let's peel back that layer now. Phishing attack, P-H-I-S-H-I-N-Z. Yeah, exactly. So the quick definition of a phishing attack was you get a piece of spam, really, an email pretending to be from Bank of America, or PayPal, or eBay, or someone that generally tries to earn money. And there's a link in that email that says, uh-oh, you need to verify your birth date, or uh-oh, you need to verify your password, or uh-oh, dot, dot, dot. And so you're invited to click that link that's embedded in the email. And it might look genuine. The URL might be, the link might say click here, which is pretty clear, if misleading. Or it might even say www.bankofamerica.com to give me the human some added comfort. Oh, I'm going to bankofamerica.com. I'm going to click this link. But really, what you're seeing is this text here, but where is it really going in this phishing attack? You're really going to be led to whatever the value of that href attribute is. And so herein lies the beauty of phishing attacks. It's so simple to exploit this very compelling feature, this duality of destination and user-friendly text, but you can mislead many humans by actually saying it goes somewhere, but clearly it does not. And so only by keeping an eye on the URL when you actually get to your destination, or by hovering over the link and looking in the bottom corner usually of your browser where it actually then shows you with a little cheat sheet where you're going to go if you click this link, can you be a little more certain? Or best yet, if you were the bank and you knew that phishing attacks were all the rage, especially with everyone on the planet's email address, having been stolen recently by that big company, what can you, the company, Bank of America, do to avoid getting into this predicament with your customers? Oh, no problem. Stretch on. Exactly, right? So the curious thing here is that companies, banks, have kind of initially created this problem by sending out emails early on to their customers saying, click here to log into your account. Because that's actually kind of convenient, right? And you want to lower the bar to people interacting with your company, with your website, so providing them a link rather than saying, go type in our URL to your browser is certainly more compelling. But as such, they kind of conditioned all of us humans to click links in emails, which might not necessarily now lead to the right place. So these days, at least a smart company, when they're sending out their marketing literature or their security warnings or whatnot, they will say, please visit our website, period. And generally, they won't even tell you what it is, or if they do, they won't make it linked to text. They'll just write it as pure text that maybe you could copy and paste, but at least it will signify to you that you should probably do this manually. So in short, henceforth, and just to tie our security lecture to this one, and next week, given any time you receive emails with links in them, unless it looks perfectly innocuous and it's not asking you for sketchy things like your username, password, birthday, never verify information, don't click links in emails. Instead, go type it in manually. And another way of confirming, as an aside, the legitimacy with high probability of a link, if, for instance, if you don't log into one of your sites very much, like let's pick one like Capital One. Capital One has a whole bunch of domains. CapitalOne.com, CapitalOneCreditCards.com. And to be honest, I log in so rarely that I don't really know which is the right one. And maybe the other was bought by some fraudulent person who's trying to trick you into logging into their website. This isn't 100% reliable, but it speaks to the power of out-search algorithms there. Google, like CapitalOne, and hit Enter. And with at least high probability, the top hit or top few hits are probably going to be the legitimate ones, because at least there's some algorithms of Google and millions of users who are going to that link and therefore bubbling it up in the results, whereas on the 20th page, there might be this bogus link to some random guy who bought a similar looking domain name. Again, don't hold me to that, because there have been plenty of attacks where illegitimate search results appear among the top in the rankings. But it's at least a nice little sanity check. And I certainly use it myself if I'm not quite sure what the right URL for a site is. So this hyperlink. We've got this link now, ahref equals quote, unquote. What's the end result? Well, it's an actual clickable link in the web page. But unfortunately, we've kind of dived into the middle of the story here. And indeed, there's this li tag. There's this div tag. There's a class attribute. Let's actually scroll back up to the top of CNN source code and see where this story began so that we're not just starting to write HTML in a vacuum. Now, unfortunately, the top of this web page is a complete mess. And that's prop, not so much because there's a really sloppy human who doesn't like to format his or her code very nicely. Odds are a lot of this web page is created dynamically with various computer scripts or programs that programmers wrote the result of the output of which is HTML. And this is useful because it means CNN probably doesn't have someone updating their index.html page every day. Rather, they probably have a nice administrative interface so that the authors or the editors can actually just type into a form similar in spirit to the Wiki, the title of an article, and the content of the article. Not so much the Wiki, rather the blog. They hit submit. And where does that article end up that they've just approved for publication? It ends up on the home page. So generally, once you know how to write HTML, the training wheels eventually come off and you start leveraging more sophisticated tools so that you don't have to write this stuff in perpetuity. Otherwise, it would take forever to implement most anything. But notice a few things. There is this mention of HTML up here. There are some meta tags. And if I scroll down further, let's look for the juicy one. There it is. It looks like the very first thing I see, focus on the top line, the very first thing I see in purple, is the HTML tag. So indeed, that's where this story begins. So when making a web page, the very first tag that you write is open bracket, HTML, closed bracket. So let's move away from CNN so that we don't get lost in the complexities of their news and actually do this ourselves. So I happen to be on a Mac, but this lesson applies whether you're using Windows or Linux or any operating system. I just need a super simple text editor on a Mac. That program is called TextEdit. Comes for free, much like Notepad, if familiar in the Windows world. And what I'm going to do here is just increase my font size just to make it more legible. And I'm going to now practice what I preached. Open bracket, HTML, closed bracket. Now there's one detail I'm going to include above that. And thankfully, the world has simplified this recently. It turns out that there are a lot of different versions of HTML and similar languages out there. So it generally helps to inform the browser what version of the language you're actually using. You might have read in the media at some point that there's this new fangled version of HTML called HTML5, Apple, for instance, has really heralded this in. And among the features of HTML5 are better video handling, better support for mobile contexts, lots of fun features. But today we'll focus really on the fundamentals that transcend any particular version except for this detail. At the very top of my file, I'm going to specify, and this is the only anomaly for now, open bracket, bang, exclamation point, as a computer scientist would call it, dock type in all caps, and then HTML in lowercase, closed bracket. So stupid thing to remember, but mind you, in previous versions of HTML, this same line was three lines long, and no reasonable human, myself included, ever remembered it. So consider this the simple version. For now, just take it as, at face value, must include that at the top of any web page that's written in the latest version of HTML, namely version 5. But that's not HTML, because the exclamation point makes it a little special, and that's the last exclamation point we'll write. The real web page is going to start with this HTML tag. So I saw earlier that there's the symmetry throughout web pages, open bracket, closed bracket, open tag, closed tag, up here as well. So I'm going to preemptively, so I don't make mistakes later, going to get into the habit of closing that tag right away. We'll see there are some exceptions to tags that have open tags, but do not have closed tags, but I think they'll jump out at us conceptually. But HTML and closed HTML, these kind of make sense, because much like I want to tell the browser, start making this bold, stop making this bold, it's pretty reasonable to tell the browser, here comes some HTML, that's it for my HTML. So it's an open and closed operation. So the juicy stuff is going to presumably go inside of these tags. Any questions thus far before we forge ahead? So nicely enough, despite the apparent complexity of CNN's website, there's only two main sections of any web page. There's what's called the title, and there's what's called the body, and the nice thing about the title, or rather the head, and then there's the body, the nice thing about the head is that at least initially for us, the only thing that's going to go in the head of the web page is the title, the little words that you see in the top of the window that define the window's title. The body is where all the interesting stuff goes, but I'm going to go ahead and lay this section out. I'm going to put my head section here and my body section here, closed body. Now at this point in the story, we have a very boring web page because we have absolutely no content. So now let's add the slightest bit of content. I know from having read the various tutorials that the only tag that for now I'm going to put in the head tag is something called the title tag. And I'm going to say, hello, world, exclamation point. But just as with these other tags, I need to hint to the browser, that's it for the title because it needs to both start and stop. I'm going to close my title tag here. And now, just so I have something in the body of the web page itself inside 90% of the screen, I'm going to similarly write a message down here like hello, world, which for now will be perfectly redundant, but that's OK. So now we've not looked at it in a browser. I claim this is a correct and a complete, if boring, web page. It has a title bar and it has a body, but the end result we'll see will be underwhelming. Any questions? Really good question. So I haven't mentioned this yet, but notice that I've been really anal about formatting this way more nicely than CNN's website is formatted. Again, the justification for the latter is that they probably had computer programs generating this stuff. And the takeaway is that browsers, as we'll see, actually do not care about white space. That is, space characters, tabs, carriage returns. It generally ignores all white space, except the first such space. In other words, this hello, world sentence fragment here is identical visually, as we'll see to this version here with all of these spaces. Because the browser, again, will ignore all but the first space. So why did I get into this habit already of pretty printing my code, as it's called, of indenting it? Well, frankly, it just makes it way more readable for me, the human. You'll recall in CNN, we saw the HTML tag way at the top over on the right. It wasn't clear what the structure of the web page was. And now for a simple page, it's not a big deal. If everything were even on one line, but when you're starting to write more interesting pages that have tens or hundreds of lines of HTML, frankly, you're going to make mistakes here or there. And finding a mistake in one huge blob of text is, dare say, impossible, whereas at least here, I can kind of visually figure out, OK, I forgot to close this tag or I left something off. It jumps out at you a little more. Now with that said, we'll see there are tools that more intelligently than I can analyze all of my text and figure out with high probability where my errors are, but the computer doesn't care. But this just keeps me sane. And we'll discuss this next week, too. In the world of programming, there's this notion of good style. It's not sufficient to just write a program that works, because if the person that inherits that program from you, the next employee after you quit, has to then maintain a complete mess of a web page or a computer program, it's a complete waste of everyone's time. So it's good for your sake and for others. And frankly, I've written enough programs now over the years that if I ever wrote something messy without good indentation, without what are called text comments to me, the human, in one week's time, I'll have forgotten what I wrote the previous week. So it's good practice to get into as things get more complex. So now let's actually look at the underwhelming result. And then we'll sex it up to make it much more compelling. So right now, I just have this program called TextEdit Alive. But again, you can do this on notepad.exe on your PCs. I'm going to go to File, Save As. And I'm going to go to my desktop. And I don't want to call it .txt, because even though it is a text file, recall that most programs on computers use the file extension to figure out what program should open it. So I'm going to call this index.html. I'm going to hit Enter. Now the Mac at least is being a little anal itself and saying, wait a minute, this is a text file. Are you sure you want to give it an incorrect extension? But yes, I want to rename this thing .html so that who will understand it properly? Who's going to consume this text that I wrote? What program? Yeah, the browser. I need to save it with an extension that's recognized not by TextEdit, but by the browser. So now on my desktop, I have this file here, index.html. If I go ahead and double click that, there is, as promised, the result, my very first web page. Hello, world is at top left in the body. And where is the title? Well, if I scroll over slightly, there is Hello, World in the title. So not bad. Now technically, this is not on the internet yet. Where is this web page? Right, it's on my computer. So I am the only one right now in the world that can see my home page, my website. So we'll get to a better place than that, where we're actually putting the HTML online. But the funny thing is about web development is that you can do absolutely everything offline. You can do it on your own Mac, on your own PC. You don't actually have to upload it to the actual internet or to a server on the internet until you want the outside world to actually access that. And we'll talk a bit more about that later today, how you actually get a website onto the internet and what your options are, who you have to pay, how much you have to pay, if anything. But for now, just know that so long as I have a server somewhere, maybe that I'm paying a few dollars per month for access to, eventually I'm just going to have to copy this file up to that server, put it in the right folder. And voila, it will appear at davidmailin.com, or whatever domain name it is that I happen to buy. So this is very boring. I'm already not thrilled with HTML. Let's do something more interesting. Give me something tractable to do here. Suggest something we could do to this web page that's not going to take us an hour. OK, add color. That's a good one. That's what I was kind of fishing for here. So let's actually add some color. So someone else, what color would you like me to make the text of hello world? First person gets it. OK, white with a pink background. So we need to somehow override what apparently is the default behavior of the body tag, which seems to be white background and black text. So how can we do this? Well, it turns out we can do this in a few different ways. I'm going to do it initially the old school way. I know about attributes, even though we've only seen one thus far. And it turns out, even though there are more fancy ways of doing this, which we'll see in a bit, the old school way of changing the background color of a web page was to add to the body tag an attribute called bgcolor, bg denoting background, equals quote unquote. And then inside of the quotes, what do I need to put, do you think? Oh, I'm sorry? The color. OK, so you wanted pink. So I'm going to go ahead and say pink. I'm going to save it. And let's do one thing at a time. I won't change the text color yet. Let me go back to the browser. No change. Why is there no change in the browser? Right, so while I did save it, I hit Command-S on my keyboard, but I didn't close bgcolor. So I think that's OK. I don't have to remember. You only have to close the tag name, not the attribute. So that's OK. But good sanity check. OK, good hypothesis. Maybe it just doesn't understand the special word pink, because maybe it's a little too special. Maybe it only understands black and white and blue and red. Maybe pink's a little too far out there. Do I need a number value? Indeed, that's going to be an alternative approach. So let's come back to that in a moment. Let me spoil the answer here to point out one of the fundamental features of HTTP. So we might have used this word way long ago, but HTTP is what's called a stateless protocol. And in fact, you can see that it's stateless in that any time you visit a web page, usually you see some kind of spinning icon or a globe or some silly animation that suggests that's what's happening, that the site's being updated. Or let me use different words, that the site's being, well, sorry, when you visit cnn.com or URL, you see something spinning. And that means the web page is downloading to your computer. Or more specifically now, the HTML is being downloaded to your computer. And when does that icon stop spinning? Is it getting awkward? When it's all done, right? It's as simple as that. As soon as the page has finished loading, downloaded from server to client and rendered on the screen, that icon stops spinning. Therein lies the statelessness. HTTP is stateless in that once you've requested a page, you've got an internet connection, the response comes back, then it disconnects. It does not maintain a constant connection. So this is in contrast with something like instant messaging or Skyping or even some video content where you do need a stateful connection. You need that internet connection between points A and B to be maintained because otherwise you're not going to be able to hear the other person's voice on the other end. Or you're not going to be able to get their instant message back. You need to have a stateful connection. So that implication here is that here's Safari. Here's my browser. What is not spinning here? I mean, there is no icon that's spinning anymore. But that's because it was about two and a half minutes ago that I actually opened that page in the browser. So the connection, in this case to my hard drive, not to the internet, is complete. So what do you generally do on the internet, frankly, when something goes wrong in your browser? Refresh. And that's the same takeaway here. So it's fine that I change the underlying source code in the text file. But only once I tell my browser, refresh that web page, albeit from my local hard drive, while I actually see the re-rendered results. It's not all going to happen automatically. So let me do this. In Safari, I'm going to click this little reload icon. So the projector here is not doing this justice. But I argue that is pink, at least on my laptop screen. All right. So now we wanted to make the text white. So let's go ahead and do that. Well, we have a few options here. I'm going to go ahead and do the simplest option for now. So I'm going to go ahead and say this. I want to change the style now of this web page. And let me shrink the font so we can see more at once. I want to change the style of this whole page to have a few special properties. And here is where we now have to introduce another language called CSS, Cascading Style Sheets. And allow me to say, the first one here, that is a complete mess co-mingling these two languages together because they have very different syntaxes. But as we'll see, both syntaxes are relatively simple. It's just a little weird that people decided to put the same languages in the same file. So what do I mean by this? It turns out that you can put multiple attributes inside of an attribute, inside of the double quotes. Thus far, we've only put a single value, like HTTP. We only put a single value, like pink. But it turns out you can, in a sense, put multiple values there. But as soon as you start putting multiple values inside of quotes, then we call them CSS properties. Cascading Style Sheet properties. And I promise this is the worst of the syntax here. So I happen to know from, say, some online tutorial that there is a color property with which I can set the style of my page. And the color I want to set this to, let's say, is white. So again, notice there is, what I don't like about this pedagogically, frankly, is that there's this inconsistency. On the left, we have quote unquote pink. But on the right, we have color colon white. But this will start to make more sense in a moment. So let me go ahead and save this now. And I'm going to go back to my browser. What do I need to do? It needs to refresh. And there we go. Let me increase the font size just so it's all the more clear. So now we're on our way. So now we've changed the color of this text to be white. Now, as an aside, at the risk of jumping ahead slightly, I'll point out what more you can do inside of the style attribute. So that's the kicker here. The style attribute is special in that you can put inside of the quotes for the style attribute, specifically multiple values with the keyword colon value. But if you want to put multiple such key value pairs, as let's start calling them, so the key is color, the value is white. And this is very common jargon in computer science. Key value pairs, the key is color, the value is white. If I want to put another such key value pair, turns out that the syntax is just a semicolon. So here, I'm going to say, you know what? It's kind of bothering me that Hello World is so far up in the top left-hand corner. I'd really like to align that text in the center of the page just to give it more pop. So let me go ahead and add the following. Let me go ahead and add to this semicolon separated list text align center. So notice the pattern is the same. Text align is now the key. Notice the hyphen and notice the capitalization. So in CSS, it is very much case-sensitive. And for HTML5, it's also case-sensitive. It should be lowercase, as I've been doing here. You may see in various online documentation a lot of people like to write HTML tags in all uppercase. That's fine in some contexts, but for what we're doing, consistency is important. So use all lowercase for any of your tags, any of your attributes, any of your properties. The words you write, hello, mom, or whatever, that can use capitalization. But inside of the tags, be consistent with lowercase. So text align center suggests that all of the text inside of the body tag is now going to be centered. Let's go ahead and see. I'm going to go ahead and reload. And voila. Now it's getting a little more interesting. It's a little hard to see, though, here. What do you generally do to text to make it stand out a little more? All right, so let's try bolding it. Let's do the simple approach. How do I change my source code here to make the text hello world bold? Yeah, so let's do the B tag. So let's do open brackets, B close brackets, and then what else do I have to do? Yes, I have to close it over here. So let's close it here. Let's go back to the browser, reload. It's a slight difference, but definitely a little bolder now. I can get really tacky. And now let me make it underlined. And notice the order in which I do these things doesn't matter. It only matters once I save it and then reload it. But now notice I have underlined and bolded it. But notice what's important here. Notice that I chose the order of these things very deliberately. So when you open a tag, if you open a tag first, you should close it last. And the second tag you open, you should close second last. So notice the symmetry. You want to have a nice balance of these tags. I don't want to reverse the U and the B accidentally because it would be asymmetric and it would throw off all of the appropriate symmetry we've implemented here. So that's what it looks like now. Let's go back to the page and reload. And now unfortunately that's really small to see, but I'll zoom in. It's not the sexiest of underlines, but it is there. And that's just because I've made the font so much bigger than the actual underline. All right, so this pink is a little hard to see. And in fact, I'd really like to use fuchsia instead. Unfortunately, the word fuchsia is kind of too far out there. So most browsers do actually understand some key words that frankly like a grade schooler would understand. Red, white, blue, pink, maybe purple, brown, black. Some of the basics, a bit more than just primary colors. But for something like fuchsia or something like light blue or hot pink, then I kind of have to be a little more technical when defining something like hot pink. I can't just write hot space pink, but I can Google hot pink and see what the computer scientist or programmer would do here. So I'm gonna Google this. Let's go to make it more clear in the middle of the page. I'm gonna Google something like HTML colors, hot pink. Enter. All right, and this is a very legitimate approach to take. So I'm gonna go ahead and let's see, hot pink color schemes. Let's see. Okay, I wouldn't call these hot pink necessarily, all of them. But it looks like this website or whoever made this website has just kind of put together some palettes, like a home decorator of colors. But what's interesting is that these colors are a little more precise now than the very bland red, blue, black, white. And in fact, you can't quite describe them with words very precisely, but it turns out you can describe them very precisely with letters and numbers. So notice below, I'm gonna call that thing in the top left there, hot pink. Feel like that's pretty close. But what apparently is the code for this color called hot pink in the top left now. Yeah. Exactly, right? So we saw this weeks ago now, but recall that we looked, we talked about decimal and we've all grown up with decimal. We talked about binary, just zeros and ones. Hexadecimal has how many digits available? 16, so zero through nine and A through F. And in fact, this is the scheme that the world decided by convention would be used to represent colors, hexadecimal. So now notice the top left, that box that looks like hot pink to me at least. Its code is apparently AA0078, looks like. Looks like a B, but I'm pretty sure it's an eight. So that's its hexadecimal code. Now what the heck does that mean? Well, it turns out, and some of you might remember this from years ago, before there were these sexy small projectors hanging from the ceiling, you might remember the huge honking projectors that actually had three lenses on them, red, green and blue. Or you might have just heard this term before, RGB. Well, it turns out with just some combination of red, green and blue, you can generate all the colors of the rainbow with pretty good precision. So what you're really seeing here is the letters A, A. What do we say? 0078, but it turns out that those letters actually represent different things if you look at them in the right way. I'm gonna break this sequence of six digits up into three doubles digits, AA0078, because it turns out that the first two digits represent red, the second two digits represent green, and the third two represent blue. So this means how much red do you want? How much green do you want? How much blue do you want? Now we won't have to worry, we won't go back, we won't regress back to the first few weeks and convert the hexadecimal back to decimal or binary today, but let's do an easy one. How much green is there? Apparently in the color I know is hot pink in English. Apparently there's no green. Yeah, 00 denotes no green, so it seems, at least according to this person's definition of that color shade that hot pink is comprised of AA, a lot of red, 78, a lot of blue, and no green, it would seem. Okay, and we can experiment by cranking up these values. In fact, just to put it out there, what if I wanted even more red than this, what do I change the AA to? How do I really crank up the red? So SCC would work, or in the worst case, FF, because F is the biggest number you can represent in hexadecimal, just as zero is the smallest, so if you make this FF, that's a whole lot of red, so let's actually see the results. So AA0078, so I'm gonna replace the English word pink now with the code, but I need to be extra clear to the browser that this is not a word that you should understand, this is a hexadecimal code, and so the notation for that in HTML is just the sharps symbol, the hash sign. Number, so it kind of makes sense, even though it's a hexadecimal number, so I say number sign AA0078. Now I'm written this in all capital letters, for hexadecimal codes, it actually doesn't matter, uppercase, lowercase, even though HTML tags were saying, and CSS properties should be lowercase, colors don't matter, just be consistent, so this is another matter of style. If you are not using the same kind of capitalization throughout your code, it's considered messy, it's considered poor style, so if you like all caps, just like I saw it in the webpage, that's fine, but just be consistent, even though functionally there's most likely no difference. All right, so now let's reload the page, hot pink used, well pink used to look like this, I give you hot pink, yeah that's definitely hotter pink, all right, so now, this is not nearly enough red for me, let's really crank up the red value, so we said a moment ago, let's change AA to FF, and reload the page, okay that, actually now that looks like hot pink, so seems that reasonable people can disagree as to what hot pink here is here, but all we're doing is kind of turning knobs, some red, some green, some blue, and now just for the sake of discussion, what if I make this FF, FF, FF, how much green is there now? How much blue is there now? And there's also a lot of red, so what color am I gonna get? White, so think of it in the world of physics, not in the world of like finger painting class, where in finger painting class it all becomes kind of brown or black, in the real world, when you have various frequencies of light, the more red, the more green, the more blue you have, the end result is actually the color we call white, so what's then, now you can get the other one, what's black? Yeah, so is 0, 0, 0, 0, 0, 0, now we have black, and again, a readable webpage. All right, why don't we go ahead and take a five minute break there. All right, we are back, so we've kind of evolved to something very hot pink-like and now have evolved back to something very simple, but at least it's pretty clean, so we have a black background, we have white text, but this is really not the web that we know today because the web we know today has things like hyperlinks and images and sounds, so let's at least try to add a couple of those features, get a sense of the range of HTML's features, and you'll see that now that we know these basic building blocks of tags and attributes and these CSS properties that are a special case that can go inside of the quotes for which tag? Sorry, CSS properties go inside of which attributes quoted string? The style, so the style attribute, which can go on many different tags, is kind of a special attribute that can have those things called CSS properties, and I'll give us a whirlwind tour of some of the other properties, but to be honest, what's really nice about HTML is that really once armed with some of these fundamentals, you can bootstrap yourself and learn new features, new tricks, because one, there's innumerable tutorials out there, two, most of the syntax follows precisely these same fundamentals, three, the worldwide web is pretty much open source, at least so far as the HTML goes, you can go to any website out there, go to View Source, and if you're curious as to how some webpage was designed, you can just learn by looking at the webpage. Now you might think, wait a minute, that sort of is contrary to the whole idea of having intellectual property, putting your company out there, but the real secret sauce in most websites is actually server side, right? Facebook is interesting, not because they wrote amazing HTML, but because they're sitting on such a rich data set that's stored in their database that's presented to users using HTML, but their intellectual property is not open tag, closed tag, and so forth. It's what's going on behind the scenes and the dynamic functionality that they have. So what we won't do tonight, but we'll do next week is talk about programming. So again, we'll use a language called Scratch, which is not used on the worldwide web, but is representative of programming languages more generally. So something like Facebook, as you might know, even though the website itself is presented using HTML and CSS, cascading style sheets, being underneath the hood on the servers, they tend to use a language called PHP, and PHP is an actual programming language, and for those of you who use Facebook, you'll know that many of their URLs actually end with .php, and that's because PHP is a programming language, similar in spirit to Scratch next week, with which you can programmatically generate HTML. Now, what do I mean by that? Well, as the quick teaser, let's suppose that Facebook or MySpace, any of these websites that have profile information, even if you're not a user of the site, they store lots of information about people, like names, addresses, photographs, friends, and all of that. So that's stored in a database. For our purposes, assume that a database is a fancy Excel spreadsheet with rows and columns, where every row represents a user. So in David's row, there might be David, and Melan, a URL of his photo, a list of his friends. So you can imagine storing information about people in just an Excel spreadsheet. So that's what a database is for our purposes. So PHP is a language that allows programmers at Facebook to query that database, to search that spreadsheet, and then present only parts of that data set to the actual user, so that when you go to my profile, you only see my name, and my friends, and my photos. When you go to Rose's page, you only see that same kind of data, but from her row in the spreadsheet. So a programming language allows you to make intelligent, conditional choices based on input from the user. And by input, I mean which person's profile did they click. But today is all about presentation and the structure of a webpage using this language called HTML. So let's go ahead and add some actual hypertext to this site in the form of some hyperlink. So we've actually seen how to do this. We can steal this from CNN's website, but we'll make our own URL. I'm going to go ahead and say, below hello world, I want to have a link to my favorite website. So I'm going to say, a href equals quote unquote, www.disney.com. And now close bracket, but I feel like I'm forgetting something. What do I still need to do here? So I need a title, if you will, descriptive text for the link. What do you want to put here? Mickey. I think I saw you mouthing Mickey. So let's say Mickey. All right, so this is going to be the text of my hyperlink, which is really going to lead to disney.com. Now, if I wanted to be super clear, there's nothing stopping me from again writing the whole URL inside the quotes and inside the tags. And that would just be ever more explicit to the user where I'm going, but most of the web is not hyperlinks that you see, but rather words that lead to URL. So let's go with this. I've saved it. I hit reload, and that is not what I wanted. Why does this seem inconsistent with what I just typed in my text file? It's all, it's kind of all on the same line, right? I very clearly, very anally, like hit enter twice and space, space, space, space, space so that everything was aligned what I expected in the center in the page. So what's the trouble here? Yeah, exactly. So again, a browser is only going to do what you tell it to do. Make this bold, stop making this bold. Here comes HTML, here's no more HTML. So similarly, if you want to say a line break, you have to say, here's a line break. It doesn't suffice to just hit enter on your computer because again, white space is defined as a space bar, a tab character, the enter key, and a few others. So all but the first are ignored. So that's why I'm getting one space between the exclamation point and the M in Mickey, but I'm not getting a new line. So to specify a line break, turns out there's a tag that kind of does the trick, open bracket, BR, close bracket, line break. So this one I'm going to propose does not need to have a closed tag. Now, why is that? Well, this is one of these like atomic things in life that there either is a line break or there's not. You can't kind of start a line break, do something else, and then finish line breaking. It's either there or it's not. So in that case where it just doesn't make mental sense to have a start and a stop tag, odds are you don't need it. And indeed in this case, the BR tag is sufficient. You don't need to close it. Now as an aside, in case you see this in documentation online, you will sometimes see various tutorials, put the forward slash inside the tag at the end, sometimes with a space right before it. This is not incorrect. In fact, this is consistent with the variant of HTML called XHTML, which stands for Extensible Hypertext Markup Language. This is just the world's attempt to make sure that you're always closing tags, even if it doesn't make conceptual sense. So you'll sometimes see that. You will sometimes see this, even though it's a little silly, but nothing in between the tags. Something between the tags would be wrong. But nothing between the tags is okay. It's just a little stupid looking. This would be okay too. But again, if you're sort of wondering why would I bother doing that, that's exactly what the world started to think recently with HTML5. So open bracket, BR, closed bracket, suffices. But just FYI, in case you see various tutorials that seem to be telling you different things. All right, so now let's save. Let's reload. All right, so now I'm on my way. I've got a BR tag and a hyperlink and a text. And if I click this text, let's see if I end up in the right place. Indeed, I got sent to Disney.com. They redirected me to go.com for whatever reason. But I'm pretty sure we're gonna see the Magic Kingdom in just a moment here on my slow internet connection. Okay, eventually we would see Disney's homepage, if a bit slowly. But let's go back to mine. Mine is much higher performance because it loads much quicker. Yeah. Mm-hmm. Exactly. So this is the curious thing about CSS properties when you use the style tag is when you define a style attribute like you've proposed a property, like you've mentioned of text-aligned center, that applies to the entirety of that tag. And everything inside of it. So that text-aligned center only stops having an effect when the closed tag, the corresponding closed tag is encountered, which in this case is trivially the last interesting one in the file, closed body. A good thought. What if you closed body earlier and then reopened it? A long story short, you can't. At least body is special in that you can only have one open tag, one closed tag. But there is a variant that we actually saw in CNN's own website. So let's actually introduce that now. Suppose that for whatever arbitrary reason, I wanted a hello world to be centered in the page, but I wanted my link to be on the left-hand side because I got a whole lot of content I wanna start writing and I want it to be left aligned like most websites. So I wanna stop centering. Well, I can't just close the body tag early because the entire body of my page has to be by definition of body in the body. So I have to introduce another tag that itself supports the style attributes. So I'm gonna do this. Let me go ahead and rip out the text-aligned property, but I'm gonna keep the text white there, color white. I don't care if everything is white for now, but what I'm gonna do here is only center this thing. Div style equals quote unquote center. Notice I'm gonna indent that. And now I'm gonna close the div tag and I'm also gonna get rid of this br for now. So what's going on now? So it turns out that the div tag doesn't look interesting, but it's a sort of invisible, helpful, structural element. It's what's called a block-level element. And as the name kind of suggests, this creates a division of the page, an invisible rectangle to which you can apply all sorts of style properties. Everything after this div's close tag will have its own set of properties applied by whatever tags are there. So this, again, let's me put an invisible rectangle, all of whose content is going to be centered in the page because of that style attribute, but everything after that div tag is no longer gonna have that same centering applied because the closed div tag ceases the effects of those properties. So what is this gonna look like? Well, let's save it. Let's reload. And indeed, now I have the desired effect. No, I'm not claiming this is pretty, but at least it's structurally consistent. Now, why did I get rid of the br tag? Well, it kind of is implicit. The notion of a line break, if you have what's called a block-level element, which again is like an invisible rectangle, a rectangle means there's a bottom to it, which means anytime you have a div tag, everything after the closed div tag will by definition of div be on the next line. So I don't need the br tag there. Now, if I really wanted more space between the two, this is gonna be a little sloppy, but I could do this much like you would on an old school typewriter or in a word processor, give me a line break, line break, line break, line break, and then Mickey indeed jumps down further on the page, but there are other ways of doing that still. We'll see one in just a moment. So let's do this now. I really, it's kind of rubbing my aesthetic taste the wrong way that part of the page is centered, part of it's not. So let's create two different divisions and hopefully the sort of the beauty of design will start to jump out of us, jump out at us in just a moment here. Notice that I'm gonna do this two div tags. And again, this is a structural thing and you can do this and take away from this tonight too. You can do what we're doing tonight probably a thousand different ways. There are many different ways to do this. There's no one right way, which is actually very liberating in that you just kind of go with your instincts, see if it works and if so, odds are you're probably good to go. So now I have two invisible divisions of the page, two rectangles if you will, each of which can have their own style attribute and thus each of which can have their own style properties. So if I do want to center this one, I could just borrow from before, though this doesn't make all that much sense because it's just kind of copy paste literally. Now they're both centered, but now I could apply different texts to this one. For instance up here, style, what if I actually wanted to say, you know what, I really want this text to be bigger. So I'm gonna say font size and I'm gonna do something crazy, 72 points. Now if you remember, recall from Microsoft word, that's pretty big. So let's say reload and indeed hello world is now super huge. But again, this speaks to the ability now for us to apply different properties to different parts of the page, different divisions of the page. Now what more can we do? Well, you'll notice that I'm kind of lying here. I do have a BG color of 0000, which is black. I have text color of white, except for one important detail. Who is not white at the moment? Mickey is purple. And in fact, a couple of minutes ago he was blue. And this is consistent with the web years ago, especially when every link on the inter, on the worldwide web was blue and underlined. And then you clicked on it and it became purple or some other color. Well, this is the default behavior because it turns out the anchor tag has by default a different color scheme. Now this can vary by browser to browser. And so this is one of the interesting headaches of the world today and has been with us for some time. You have some big fish out there, like the Mozilla Foundation with Firefox, Apple with Safari, Google with Chrome, Microsoft with IE, and reasonable people can certainly disagree when it comes to the implementation of various tags and properties and exactly how they should look on the screen. And so you will often find that if you implement a web page that looks amazing on IE, doesn't even work correctly on Chrome or vice versa or on any number of other browsers. So one of the things that's really the case in web development these days is a lot of headbanging, frankly, and using special tools, frankly, to try to normalize the appearance of your browser, of your website, across browsers. The worst thing to do, and you still see this, especially on some big stodgy companies' websites, this site is best viewed with Internet Explorer 6.0 or this, it's completely a cop-out when a company says only use this browser. And there are many applications even on this campus that have this rule. For those who are Harvard staff, it's largely laziness on those company's sites, company's parts for not supporting all browsers. It is absolutely possible. So realize if you're sort of the decision-maker in a company where you have to buy some product or pay for some website, should be a deal-breaker if they don't support all browsers. Yes? Okay. Laziness on the implementer's part. So if you see a website that says something like this, best viewed on such and such. Okay. And what's the question if you do see this? So the short answer is there is no technical reason to not ensure that a website works on all browsers these days. It takes time, it takes effort, and in turn, then money. But it is possible. If you do see such a message, it might not have any effect. The other reason might be that the person doesn't own a Mac, and therefore they didn't test the website on a Mac, and therefore they just know it works well on a PC. So go use a PC to visit my website. But again, and one of the reasons that we're preaching tonight, some of these standards, like do the dock type, do the lowercase, do the quote marks, is that the more the world standardizes on these stupid little details, frankly, the more universally things will render on multiple OSs and multiple browsers. So as an aside, that should be an artifact from yesteryear that is, in fact, not, if you look at the bottom of various large companies' websites. Yes? It does, yep, has a line break? Good question, if you want to make hello72point and world24point, this is actually a good example. So realize, take infer nothing from my lack of style and aesthetic taste tonight, just focusing on the technicalities here. But indeed, there's the challenge. I want to make hello72point and world24point, but the problem seems to be that thus far, the only mechanism I have for stylizing text is a div tag. If I need two div tags, what's gonna happen to my sentence? It's gonna be split onto two lines, which surely there's a solution here, and indeed there is. So just as div is a block level element, of invisible rectangle, spans the whole page, there is an inline element called, turns out, span. And a span tag is conceptually so similar to div. It's not something you can see, it just is there underneath the hood for structural reasons, but it does not induce a line break. And so here might be the solution to that problem. So I want to make hello72point and world24point. So now I have a design decision. Here's where you start to get a sense of the logic underlying programming or writing code even in HTML, much like programming languages. I could just plop in 24 point around world, but I feel like I want to keep this clean. So I'm gonna remove 72 point from the parent elements, if you will, the div tag, and I'm instead only gonna leave on the div tag the common properties, just cause that feels nice and clean. And then I'm gonna surround hello with, whoops, span, style equals font size 72 points. As an aside, it is okay to put the semicolon at the end, even if there are not other properties, but it's not necessary to do so. You only need the semicolon when you have multiple properties. So I'm gonna say hello and then close span, then a comma. This is gonna wrap, so I'm actually gonna hit enter for just a moment, but you know what, that's okay. Why is it okay that I fit enter there? Cause it's gonna ignore the carriage returns unless I hit the br tag. Well actually, that's just gonna make it unnecessarily confusing. Let's just keep going with a smaller font. So let's do span, style, font, size, and you said 24 points, close quotes, close tag, close span. And now, just to keep this a little cleaner this example, I'm gonna get rid of my underlining and my bold facing just to focus on one problem at a time. So notice the cleanliness now of this approach. I factored out to the parent element, the div, the text align center. Then I use the span elements as close as possible to the text that I wanna stylize further, 72 point on the left, 24 point on the right. Notice the comma is arbitrarily outside the span, so that's gonna be whatever the default font size is. So this might actually be a little ugly, but the close span tag means stop making it 72 point. So that follows logically. Let's go ahead and reload this page. Looks pretty stupid, but we've exercised precisely the control we wanted to over the webpage by using the span tag. So now let me take things one step further. We though we started with this discussion of bold tags and italics, the world has started to move away from hard coding things like that into actual tags. So what you see now in a lot of online tutorials and books is really a push to use div as much as possible, span as much as possible, and move the stylization into the CSS properties. So here we have stylization formatting in the HTML. The world is trying to, or at least certain parties in the world are trying to get us to the point of really just using tags for the structural markup, for the hyperlinking, but all of the formatting should really be saved for the style tag. And so what a modern web designer might do is not use the B tag, the U tag, the I tag at all. Instead, and unfortunately this is clearly more verbose, they might instead do this. If they want to make hello bold faced, they would add this only to the CSS and say font weight bold. So again, more verbose, which is a downside. But again, the point here is that as your pages get more and more complex, trying to factor out the formatting from the actual structure of the page, the HTML, putting it only in the style tags is at least keeping a bit of a division between content and stylization thereof. And if you've ever heard the buzzword semantic web, this is all about semantically tagging information on the web so that computers can understand the contents of web pages much more intelligently. This is a step toward that. So now if I reload this after adding font weight bold, notice that hello indeed became more bold. Now at the risk of throwing too much at us at once, let me take one step further, because again you'll see it out there inevitably as you read the tutorials, if not books. It turns out that one of the real values of CSS is that if you find yourself doing this copy paste, like I already started to font size this, font weight that, there's an opportunity to factor it out and actually put it to the head of your web page. If you find that you want all of your span tags to be 72 point or bold, if you find that you want all of your text to be blue, well you can actually specify blue or bold once at the very top of the file and say, hey browser, anytime you see a span tag, make it bold. And therefore we don't need to litter our markup code with all of these stupid style equals quote unquote, style equals quote unquote, we can put it at the very top. So how do I do this? Well, I'm gonna go to the head of my page and I'm going to put below the title or above the title, it doesn't matter so long as you open and close your tags properly. I'm gonna say style and I'm gonna close the tag. So notice here, style is now a tag, not an attribute, but that's because we're gonna use this as sort of a more powerful version of stylization. And now I'm gonna do this, excuse me. Here too, the world chose some slightly annoying syntax but if I want to make all span tags in my document bold, just because, I'm gonna say span and then I'm gonna use two curly braces, open curly brace, close curly brace, notice the symmetry, open is the left one, closes the right one. And this kind of encapsulates now a bunch of lines of properties that I want to include. To see this a little more symmetrically, if you can think of it like this. This works too, I just like to put things on separate lines but you can see how it's kind of embracing now the stuff I'm gonna put in the inside. So here we go, I'm gonna say that every span is going to have a font weight of bold. And you know what, let's get crazy here. Let's go ahead and say font size is going to be, let's say 36 point, all of them. And you know what, let's say all of them are going to be green and that's it for now. So in other words, you can now see perhaps the value because now you can kind of factor up to the very top just long lists of properties that you're never again gonna copy paste because now they're gonna be automatically applied to every tag whose name is span in this case. So let's see, let's scroll down. Just now to be consistent, I'm gonna delete the font size and the font weights. And in fact, that leaves me with nothing. Let's just get rid of this here. Font size, let's just get rid of this here. Now again, feels a little silly that I've just surrounded the words hello and world with span but again, the point here is to suggest the power of these CSS properties up top. Now let's save this, let's reload. And indeed feels like 36 point and it's definitely green, certainly. So that CSS and here's the keyword style sheet. Anytime you have a lot of CSS properties one after the other after the other after the other as I did in my head, that's what's called a style sheet. And it's a sheet in that it kind of reads like a piece of paper top to bottom. So now we have this. Now, let's take it one step further. So using span to make it 36 point and green feels kind of dumb, right? Because surely I'm gonna want some more variations of text in my document than just 36 point text. And yet I don't wanna create an infinite number of tags. Span is kind of the only one I have at this moment. So I need a way of distinguishing one span from another. So I'm gonna introduce one other feature. And now if you're wondering why we keep changing what we're doing, we're kind of taking a progressive number of steps to what really is the common case solution these days. So now suppose that my span tag, I wanna have stylized differently from my world tag but I still need to use the span tag so that their inline elements can't resort to div because that'll put one below the other. But you know what I can do? I can create using any word I want, what's called the class. I can say class equals, let's call it the greeting. And then let's say class equals, let's call it who. So now again, notice the semantics here. Like I want it to somehow conceptually distinguish hello from the recipient of that hello. So in general I'm gonna call hello the greeting which I might wanna stylize big bold green letters to really proclaim hello to someone. But maybe the person's name, I don't wanna scream so much especially if it's a long name, I want it to be smaller, don't want it to wrap, I'm making this up as I go. But the point is you might wanna style these two pieces of data differently. So now I have arbitrarily decided this is kind of like inventing your own tag but it's not a tag, you can invent your own classes using this class attribute. Now I can say this. At the very top of my file, I want to make my greeting spans that have the class greeting will get applied these properties. And as for the spans that have the who class, span.who I'm gonna make this very arbitrarily yellow and 24 points and normal, normal is the opposite of bold. So now notice here to the power. Now can I not only factor out some of the stylization, I can now kind of define my own templates if you will that can get applied to different tags in different places based on what class I applied to them. And this is the progression from where we started. We started with the style tag, hard coding and sometimes copying and pasting the same stupid properties again and again. Now I've moved that all up to the top but I've still tagged my content, my data in an interesting way in a way that makes sense to me the human greeting and who so that I can then stylize those two chunks of data differently at the top. And so if I reload this page now, now I have exercised further control there. But that's it for CSS, that was a lot. Any questions? All right, well what more can you do with that same syntax, so no new syntax? Well frankly, the web is always your friend. So I'm gonna Google CSS properties and I'm gonna go to this sheet here. There's many different tutorials. I'm gonna go to one of the more familiar. Though none of these websites tend to be perfect and I'm gonna choose something up here, stylizing fonts. Okay, is this good? That's a little confusing. Let's pick the other reference, HTML dog. Let's see how he does. Okay, so this isn't bad. So this is just the third Google result, right? I haven't even looked at this site in a long, long time but I just needed a list of what are the other CSS properties out there. I was doing some of those just from memory. So font weight, font size, color, text align. Turns out there's a whole bunch of them and frankly, this is how you learn new ones. It would be a very boring exercise indeed to just verbally go through all of these but notice that for text and fonts, you've got things like text indent, let's say line height, font style which pertains to bold-facing italics and so forth, font family, you can exercise some control over font faces on the internet. You can assume that everyone has the same fonts as you but most Macs and PCs and even Linux computers these days at least have Times New Roman, Courier, Helvetica, Ariel, some of the basics and even if not, you can actually specify a comma-separated list of font names so that the first one that matches will actually be used. In fact, well, I'll come back to that in a moment. Let's see what else there is here. Oh, so it looks like there's things on the right there related to background, to border, so you can do all sorts of things. If we scroll down further, there's mentions of margins. If you wanna put padding around elements in your screen, you can use that, colors down here at the left. So in short, many, many different properties but thankfully at this point, we've pretty much seen the syntactical mechanisms via which you can use any number of properties. But frankly, one of the best ways to learn this is as I said, from other people's code. And so even though with web development, you can pretty much use any browser. There, I would at least recommend when you're getting your feet wet to consider starting off with Firefox because there's so many free plugins for the browser that allow you to develop code a little more effectively. So one such plugin, which we will, I'll link on the lectures page for tonight, is going to be called Firebug. So Firebug is something, and I'll Google it as we could here, so I wanna install something called Firebug. Google tells me it's this hit here. And long story short, if you click install Firebug and you're using Firefox, if for those unfamiliar, Firefox exists for Windows, PCs and Linux. So it's nice and free and cross-platform. This will install a little bug in the bottom right-hand corner of your browser. That is useful because it helps you see the contents of a webpage. Case in point, let's go back to cnn.com. All right, so there's this content from today. If I go to View Source, there's all this Greek that we started out tonight looking at. And this is kind of a mess. Honestly, if I, the human, was curious as to how they laid out their movie right here and their links over here, it would take me forever to make sense of this because they clearly have not indented it nicely, added white space for readability. It's a huge mess. The computer again doesn't care. The computer is smarter than me and can figure it all out, but it would take me forever to kind of visually parse this and make sense of it. But tools like Firebug can help you make sense of that because they are indeed computer programs themselves. So I've just clicked in Firefox, the little bug icon, and notice it opens this pane at the bottom of my screen. At the top, I have a bunch of tags. There's something called console. There's something called HTML, CSS, script, and DOM, and net. We're not gonna use all of those tonight. You're welcome to poke around, but I'm gonna jump to the one called HTML. And I'm gonna click HTML and notice what it does for me. Oh my God. It has actually cleaned up CNN's website into something that's actually readable and it's cleaned it up by making it hierarchical by closing the tags, if you will, with those little triangles so that only when I click those triangles does it zoom in and show me what's inside, what's inside. So now you can start to make sense of what's on a webpage through a much more cleaned up version. So let's look inside the head. Oh my God, that's a lot. But notice there's the title tag and there's some things called meta tags which tend to help for search engines and Facebook and so forth these days. But let's not dwell there, let's go into body. All right, what do you notice a lot of? Yeah, so it turns out that CNN has indeed been practicing what we've been preaching, laying out their page structurally with a whole lot of divs. Now I bet if we start poking around it'll take us a while before we find the bottom because there's gonna be a whole lot of tags inside of tags, inside of tags, inside of tags and generally you're not gonna wanna play around the entirety of a webpages layout. In fact, you're probably gonna want to go to, let's go to there now, the homepage. All right, so this is facebook.com before you've logged in. And I am really curious how Mark Zuckerberg put the email text and the password text above those text fields there. So we've not looked at text fields today but I'm really curious how we got the text above something else. That's just kind of interesting to me. So rather than muddle through the Firebug output which you can also do once this thing is installed is you can right click or control click on a Mac on whatever it is you're curious about. Then a little pop up menu comes up as it normally does but notice this new option toward the bottom. Inspect element, Firebug put that there. So now I can go to inspect element and voila, it automatically finds the part of the HTML that pertains to just that piece of text. So now we can zoom in here and it's a little more advanced than we got into tonight but again a little Googling and tutorials would actually help us tease apart what this is. It looks like that word email is inside of a tag called label, we didn't look at that yet tonight but it's not all that complex. It's inside of a TD tag, inside of a TR tag, inside of a T body tag, inside of a table tag. So it feels like what the Facebook folks did is they laid out this grid of text boxes and words and button using some kind of invisible table. In fact, let me see if we can see that. This doesn't always work but what's nice about Firebug is that if you're just curious to play, this is obviously not changing Facebook.com, it's just changing my copy of the HTML source code. So if I add in border equals quote unquote to enter, well look at that, well let's minimize Firebug a little because it's a distraction now. I have now added an HTML border around that thing but now it's starting to make sense to me. Now, oh okay, I can go implement something like this on my website because I can now play with the source code. Moreover, if you've ever wondered what font Facebook is using, well we can figure that out too. If I scroll back down to Firebug's HTML panel here and I go, the notice that the email word is still highlighted here, notice what Firebug's doing on the right hand side. It turns out that CSS can get to be many dozens or hundreds of lines long. You can actually put CSS style sheets in external files and then tell the browser to include that file when rendering the HTML. So in short, it can be very complicated to figure out what of my CSS properties actually applies to this word of text but Firebug knows because it's the browser, it's gotta be able to show it to you so surely it knows if anyone does. So notice that on the right hand side Facebook is reasonably a pretty complex site these days. All of this stuff on the right are all of the various CSS properties that happen to apply to that word email. And that's because their CSS is a little more sophisticated than ours. They didn't just put a span tag around the word. They have this tag around this tag around this tag. So there's this whole hierarchy here but the only one I care about right now is damn, like darn, what font is Facebook using? Well, let's look, zoom in. I see mention of color and padding and font weight margin, vertical align, ooh, what font is Facebook using by default for everyone? Looks like Lucita Grande followed by Tahoma if you don't have Lucita followed by Verdana if you don't have Tahoma followed by Ariel if you don't have the others followed by Sans Serif which is sort of the catch-all which just means don't use something freely like Times New Rome and make it more computer-like something without serifs, without little Torley things on the font. So we can frankly change this value too and we can change, actually, well, let's see if we can do this just for fun. All right, demo on the fly. So I'm gonna scroll down here and I'm gonna change the font family to Comic Sans. Man, my browser doesn't have Comic Sans, a PC would. But notice I did just change the font for the entirety of Facebook to what looks like Times New Roman. It just assumed a default. It's definitely a little uglier at least versus the original. But long story short, tools like Firebug now allow you to bootstrap yourself all the more effectively by just poking around and learning by example. Any questions? Yeah, I was, yes. If I view CSS instead, good question. Let me make the window a little bigger. I'm gonna click CSS. What you'll now see is one of the CSS files that apply. So again, I didn't show this technique but you can move your CSS outside of the head tag to separate files which is good when it really starts getting long and when you have multiple people working on the same project. This is showing me one such style sheet if I click on this little dropdown menu. Facebook actually has all of these weirdly named CSS files applying and what Firebug is showing me is those various files. So that lets me see it but a little out of context. Frankly, the CSS we saw on the right hand side shows you CSS properties in context which is probably a little more useful. But how about this one? So we won't look at all these tabs but we will look at this net tab. So we've been talking for weeks now about how the internet works and tonight how HTTP works, browser to server, server back to browser. Well what really is going on inside of a webpage? Well we'll come full circle in a moment and actually add like an image to a webpage because thus far we've not done that. We've just done a hyperlink which is not an image. So what is really going on underneath the hood when I go to cnn.com and there's an image and there's a movie and there's some advertisements. Well inside of those webpages are lots and lots of tags that mention other file names. We saw Ahref but suppose you want an image. Well there is an IMG tag, SRC for source equals quote unquote and maybe it's something like hello.jif which recall from our multimedia lecture is a graphical file format, close bracket. In image tag you either have an image or you don't. You don't start the image then stop the image so it like the br tag does not have what? No n tag, no close tag. Just doesn't, not necessary. Doesn't make sense conceptually. So this might be in a webpage or it could be even more specific. It might be image. Well actually let's just do it. It might not be just a relative path so to speak, not just a file name. It might instead be, let me open up my file again. I need, let's go to google.com and let's google flamingos. I'm gonna keep a pink theme here. Let's go to google images. All right, this is a, this is cute. All right, let's go to this guy. All right, so this is really cute looking flamingo or fake flamingo, okay. Plastic flamingo, that works, that's fine. And so suppose this is my own personal photograph that I took of my front yard with the pink flamingos there and I just need now the URL of this photo so I can include it on my other website. Bear in mind that when doing this for real websites you should be mindful of who actually owns the images and copyright and so forth but for now we're just gonna use this arbitrary one for demonstration sake. I've right clicked or control clicked on the image. Notice there's a whole bunch of options but one is copy image location. This is just a user friendly way of saying what's the URL of this image. So let's copy that option and let's do a sanity check. I'm gonna open a new window and paste that and indeed I get this thing here. All right, so that's the image. All right, so now let's go back to my HTML source code and let's add now a hot pink flamingo to this mess. All right, so I'm gonna put it in its own division just so that it can be stylized separately if I want but it's not strictly necessary. Just kind of thinking ahead and keeping things kind of nice and similarly structured. The tag we said is image source equals quote unquote. It's okay if it wraps. My font is just a little big and I've saved it. Now as an aside, notice the file name in that URL does end in .jpg. There's a question mark and what appears to be a width and a height. It looks like this website's being a little fancy and will alter on the fly the size of this image based on the stuff after the question mark but for now let's just ignore that. For now it's just a URL that I found on the internet. Let's go back to my own personal page and click reload. Uh-oh, what's wrong? Why is he no longer centered? Because I put it in its own division and what is an image not? It's not text. We align the text align. So I'll leave it kind of as a at-home exercise figuring out how to center this guy. So for now I'm just gonna keep it where he is but again the takeaway here is that sometimes properties will work for one thing but not another. Obviously an image is not text so that guy is not applying. Oh rather, let's see actually. It's bothering me that it's not centered. So even though it's not text, it tends to work. I think there is at least one browser that does not respect what you're just seeing here but will still be aligned over on the left so long story short there's a CSS property called margin, margin left and margin right where you can actually fix this. For now it happens to work in Firefox but pretty sure it doesn't work in one browser so that's the part I'll leave as a at-home exercise if need be. So now we have an image. So this is pretty cool. Now it's feeling like the worldwide web that I know but recall that we can nest tag certainly. So this suggests I can actually make this Flamingo clickable. So if I want to make the Flamingo clickable and have the Flamingo take me to a page of Google search results about Flamingos what tag do I have to add to my HTML here? An a tag, yeah. All right, so let's go ahead and do this. So a href equals, well what was that Google result page? Let's go back to search results, copy the Google URL, paste that in. It's crazy long but that's fine. Close quote, close bracket and what do I still need to do? I still need the title but I don't want a title per se. I don't want words. I want the Flamingos. So I want the image tag inside of it. So I heard someone start to say it. What's missing? Oh, so I still have the file name so I still have my image tag. Notice I've put, good. So I need to close the tag on the other side of that. So this thing's getting a little ugly now but most of that's the URL. Notice over here I have the a href equals quote unquote long URL. Then what comes next? What tag is next? Yep, the image tag, notice there. Takes a while to get to it cause the URL's so long but there's close bracket and open bracket image dot dot dot and then close bracket but I don't need to close the image tag cause we already talked about that but I do need to close the anchor tag otherwise absolutely everything else on my webpage will become a huge link to Google which I probably don't want so I have to close the anchor tag. Now I save it, go back to my version, reload. Notice that it's actually highlighted ever so slightly in purple which suggests it's a link. We could get rid of that if we want but I'll leave it. And now notice my cursor becomes a hand instead of an arrow cause the browser knows the flamingo is clickable and I click and I'm whisked away to Google images now to precisely that same URL. Yeah, good question. Can you make just a section of the image clickable? You can indeed. You can use what's called an image map where you actually specify the XY pixel locations that you want to make clickable. I'm gonna wave my hand at that because it's a little more involved and we'd have to open up like Photoshop and figure out what the pixels are but short answer, yes, you can do that. Yeah. Click the URL. Oh, to put, oh yes, sure. So let's go to Google again and let's do something similarly cute. Puppy's this time. All right, images for puppy. So I'm just at Google images now. I'm gonna click the cute one there. Notice that this overlay, I'm gonna click the X and then go to the actual site rather than looking at Google's version of it here which brings me to, man, this doesn't, let's pick a different puppy. That's articles not gonna be so happy. All right, this guy's cute. So I'm at the page. Come on. All right, third dog's the charm. How about, there we go. I simply right click or control click and that little menu pops up and then I choose copy image location. So that's all. So now as an aside, if you're running your own web server, you really, it's not good practice to start linking to other people's images either because one, they own it and they don't want you doing that or two. Now anytime someone requests a webpage, they're paying the bill for the bandwidth because the user gets the HTML from your page but then where is the image? Well, it's still on that other guy's website. So the bits come from that website so it's also bad practice to link to other people's media like images and files and movies unless they're okay with it because that means you're not paying the bandwidth bill someone else is. So let's see what's going on here now in fact. We have a very simple webpage. We have this tool fire bug. I'm gonna open up not its HTML or CSS tab but it's net tab over here. And now in the bottom here, what we're gonna see in a moment when I reload the whole page is we are going to see each of the HTTP requests that my browser is sending to some server and we'll then actually see what's been in the so-called virtual envelope this whole time. So I'm gonna go ahead and force reload the whole page. Okay, and now sometimes, oh darn it. Okay, we can't use my own page because my own page lives on my hard drive which means it's already here. It's not on the internet so the net tab obviously doesn't apply. I'm gonna clear my cache because sometimes because of caching issues browsers do not re-download the same files multiple times. So let's try this here. Okay, here is the net tab. I just hit reload. I have fire bug open. What we see from top to bottom is every HTTP request, every virtual envelope that went from client to server and back to request this page of puppies. So on the top, notice that the first thing that I got with the keyword get was this week's puppies and that was the name of the page that we're actually on that Google led us to. So if I open this, let's see what was really sent. If I open this, notice some fairly arcane information that we saw weeks ago in our internet lectures. We see what's called the request over here and then a response up above it. And let me actually look at the raw content. Let me look at the so-called source. Whoops. So do you recall a little something like this where we talked about cookies and a bit of security? It was fairly esoteric at the time but this is to say this is what's going across the wire in addition to the words get slash HTTP 1.0. There's some other data like recall from the first exam. My browser, my operating system, the day and time, all of that interesting information is also transmitted. So this is just what was requested. But notice it's not just one file that comes back. What else came back? Well, it looks like there's this thing here. The second line here is a .css file, another CSS file, a third CSS file, a .js file, what's .js? That's JavaScript. That's a programming language. We'll talk briefly about next week. Another more JavaScript, more JavaScript, more JavaScript and then an actual GIF. So in short, visiting one URL gets me a page of HTML, a file containing that. But as we've seen inside of that HTML can be other URLs of content, file names, CSS file names, JavaScript file names, GIF file names, JPEG file names. And when you download the first homepage, so to speak, all you're getting is HTML text. What the browser then needs to do is recursively go back onto the internet, grab those files too, incorporate them all at once into the end result. And so this is why when you're on a slow internet connection in like a hotel or a Starbucks or on like a wireless service, sometimes you'll see some of the page, but then it'll just be a big empty rectangle. But then gradually, and if you think back a few years to the modem days, like you would see the image coming in, coming in, coming in. And that's because all of these subsequent HTTP requests have to go back to the server again and again and download them progressively. So that same story we told weeks ago we can now visualize here. So once you're ready to start making your own web pages, which you will do in part for the final project, I'll be using a more user-friendly environment of something called Google Sites, which we'll walk you through on the Wiki page online. What do you need to do after this class to actually get your own websites out there onto the internet? Well, we talked weeks ago about buying your own domain name from someone like godaddy.com and setting up DNS and stuff like that. So think back on or watch back on that lesson when we talked about going to godaddy.com, checking for davidmailin.net. If that's the domain you wanna buy, you pay $10, you check out, and now you own that website. But recall from that discussion, it's not enough if you wanna host a website to just own the domain name. You need to tell the world where that domain name lives, on what server. So generally then you would sign up for some web hosting account, and this might be $10 a month, $20 a month, maybe free depending on what quality of service you pay for or you look for. But what you'll get then for your web hosting service is like hard disk space, somewhere out there on the internet in the cloud as they say these days. And that just means they give you a username and a password. They let you use that program called FTP or SFTP to copy your files from your hard drive to their server. And so long as you've configured DNS in the right way, davidmailin.net or whatever you bought will be mapped via DNS to that server so that you can continue developing .html files on your computer, uploading them to your server, but then they will exist not on your laptop only. They will exist at yourdomainame.com. But at the end of the day, the stuff that you're writing is precisely this stuff here. So we'll follow up via the course's website on the next assignment, but the final project is already posted. It's not due for several weeks, but it will ultimately be about getting your hands dirty in this particular space. So we will see you next week. And I'll stick around for one-on-one questions.