DAVID J. MALAN: All right. We are back. So, the goal of this final session is to introduce a few more concepts but also give everyone a chance to kind of stretch your fingers and actually do something a little hands-on. The goal is not to turn us all into web developers by any means but really just to give you a taste of some of the fundamental constructs of what goes into web programming and today web development, so the static side of things-- no logic, no programming language, just static content. And it will give us an opportunity to actually see what a web server is, see what an HTML file is, see what it is HTTP is actually serving up. But before we dive in, any retrospective questions about cloud computing or security or anything in between? No? All right, well, let's do this, just in case the process of signing up for something takes a few minutes. We'll let it do it in the background. Go ahead, if you could, to this URL here-- c9.io. This is a third-party service-- platform as a service, if you will-- that is going to invite you to sign up for an account, and it's going to give each of you an account in the so-called cloud on someone else's infrastructure, a company called Cloud9. But what's nice about this is that they give you an approximation of an actual real-world development environment, albeit in the cloud and in a web browser, and we'll use this to actually experiment a bit today. And then go ahead and just navigate your way to the sign-up process if you could. So we happen to use this in the class I teach for all of our students, both on campus and off now, and it's replaced what historically was otherwise downloadable software. So what you were gaining access to is one of these virtual machines, essentially, that I described earlier. So this company Cloud9 probably rents from a third party-- indeed in this case, Google-- a whole bunch of virtual machines that they somehow chop up into the illusion of individual servers that each of us has full control over. It's not quite accurate to say that they're virtual machines, though, because what Cloud9 actually uses is a somewhat newer technology called containerization. And let me grab this picture here to paint this picture. 

A container is, if you recall the picture from earlier, a little lighter weight than a virtual machine. In fact, whereas last time we talked about there being an operating system and a hypervisor and then guest operating system, guest operating system, guest operating system, on top of your physical hardware, the difference with this newer technology, containerization, is that they all somehow share the same operating system. But they still create the illusion of everyone having his or her own exclusive administrative rights and files on the server. But there's less software in between you and the hardware. The result of which is, in theory, a higher performance, because you're using or wasting fewer resources on that so-called virtualization layer. So this is called containerization by nature by way of a technology called Docker, which is very much coming into its own. And this is something that engineers at your company might kind of sort of start talking about soon if they haven't already, though there's certainly no reason to jump on any bandwagons. 

So with that said, what you probably see now is a screen that looks a bit like this. OK. And just call me over if not. And if so-- I'll come over if not. Go ahead and click that big plus to create a workspace, and you'll see a screen like this. You can call the workspace name anything you want for now. And just actually for simplicity, go and-- well, some of you already have workspaces. Call it whatever you want-- business, Harvard, Thursday, whatever you'd like. You don't need a description. You can leave it private, unless you already have a bunch of workspaces. If you're forced to make it public, that's fine for today's purposes. Here, too, is one of the upsells. You get one private workspace by default. But if you want more, you have to pay for more. Otherwise, they force you to make your work public. But that's fine, because they also target this at open-source communities to encourage people to actually collaborate. 

And the last thing that's important, though, is, after you choose a name and after you choose private or public, click HTML5, the big orange icon second from the left, and then click Create Workspace. And it will probably take a minute or so, but you'll then have an environment, once you do that, that looks reminiscent of what I have on the screen here now. But, again, it might take a minute or more to get to this screen once you've clicked Create Workspace. But just flag me over if you'd like me to take a look at anything or advise. All right. So I'm going to background this for now. Call me over if you seem to have any technical difficulties. But, again, it might take a little bit for that to open. And let's go ahead and talk about what it actually means to make a web page, what HTML is, and how all of this now interconnects as we're starting to actually use some of the technology. So it turns out that I can go on my little Mac here, open a simple program called TextEdit, or on Windows I could open something called Notepad.exe. And I could just simply do something like this-- "hello, world." And then I could save this as hello.txt So no magic there. This has nothing to do with web programming, nothing to do with HTML. Just creating a simple text file. But it turns out that a web page is literally just that. It's a simple text file containing text that you might type at your keyboard, but it typically but not always ends in not .txt but .html or .htm. And you don't just type words in the file. You actually have to use things called tags or, more generally, something called markup language. 

So I'm going to very quickly type and then explain the following. I'm going to first type this, which says, hey, browser, here comes a web page written in HTML. And these two things together say, hey, browser, the following is indeed HTML. Hey, browser, here comes the head or the top of my page. Hey, browser, inside of the top of my page, put a title that is, "hello, world." Hey, browser, after the head of my page, here comes the body of my page. And, hey, browser, the body of my page should also say, "hello world." So what are the salient details here? This is what's generally called a doc-type declaration, and, frankly, it's a little hard to memorize this at first. You just kind of copy-paste it. This is the formal way of saying, hey, browser, I am using HTML version 5 which came out somewhat recently. It's a magical incantation that some humans with a poor sense of design decided to put at the very top of the file. Even though it's a little arcane, that's all it means-- hey, browser, here comes with version 5 of HTML. 

The rest of this has been with us for some time now, historically, but it's been evolving, and it's probably been getting a little simpler. Notice a few characteristics of what I've highlighted. There's these things with angled brackets-- the left bracket and the right bracket. And notice the symmetry here. And by symmetry, I mean, just as I have this start tag here or an open tag if you will, down here I have a close tag or an end tag that's different only insofar as it has this slash at the beginning of the word HTML. And you can think of this as I was casually proposing before, hey, browser, here comes some HTML. And, conversely, hey, browser, that's it for the HTML-- start and end. 

Meanwhile hey, browser, here comes the head of my page. Hey, browser, that's it for the head. Hey, browser, here is the body of my page. Hey, browser, that's it for the body. And inside of that is some arbitrary text for now. And inside of the head, meanwhile, is some arbitrary but tagged, so to speak, text that says, the title of my page shall be "hello, world." Now, for now, you can assume that browsers have only-- or, rather, web pages have only two parts-- the head and the body. And the head is generally just like the menu bar, the stuff really just at the very top. And the body is the guts of the page, everything in that big rectangle that fills the screen. So I'm going to go ahead and do this. I going to go ahead and click Save, File Save. And I'm going to save this as hello.html, and I'm just going to put it on my desktop. And I'm going to go ahead and click Save. And notice-- my Mac at least is yelling at me. Are you sure you want to do this? And I'm going to say, yes, use HTML. I know better in this case. And now I'm going to go to my desktop where I have this file suddenly. And I'm going to double-click it. And you'll notice that, by default, Chrome opened up. That's because that's my default browser. And it just says, "hello, world." But it says "hello, world" in two places. Notice top left. Pretty hard to miss that. It's big and bold. And where else does it seem to say, "hello, world"? 

AUDIENCE: The tab. 

DAVID J. MALAN: Yeah, the tab itself. So when I said the head of the page is everything up top-- and indeed this is the title. It's just in the tab here. And I can pull this tab out so as not to confuse. This is just a single tab now, and indeed we see "hello, world" up here and "hello, world" down here. So pretty straightforward. But it's also fairly simple. And, actually, I zoomed in. I can change the font size just to magnify for accessibility. But let's now do something a little more interesting. 

I'm going to go-- whoops, let me get back to my text file. I'm going back to my text file, and I'm going to change this and say "hello, Disney World." Save. And go back to my browser and click Reload. And now, of course, it says "Disney World." And I'm going to artificially zoom in just so it's easier to see. So now, unfortunately, I kind of want to-- actually, that's a Mac feature. I want to click on Disney World and go somewhere like disney.com, but that doesn't work. So a basic tenet of the web is hyperlinks, links that go elsewhere. So how do I do that? Well, I could just say, "hello, http://www.disney.com." Save this. Reload. But this too, not clickable. And what's nice here, even though this is not functional yet, is that it seems that the browser literally only does what I tell it to do. So if I just type a URL like this, it's just going to show me the URL. I need to use tags or markup language to actually tell the browser to do even more. So I'm going to go ahead and delete this for a moment. And I'm going to say, hey, browser, start an anchor here, a link so to speak. And the hyper-reference, the destination of that anchor, should be this URL. And notice my quotes. I could use single quotes, too, but you have to be consistent, and I would generally just use double quotes to keep it simple. Notice I'm going to close the tag. And then here I'm going to say, "Disney World." And now I need some symmetry-- open bracket, /a, closed bracket. 

So what have I introduced? We've had a few tags already. HTML, Head, Title, Body, are all tags, so to speak, with open and closed counterparts. But notice, this is sort of fundamentally different. This is what we'll call in HTML an attribute. And an attribute is just a key-value pair. This is a common thing in computer science-- key-value pair. It's sort of the tool of the trade. A key and a value. A word and then some other word or words. And in this case, the key is href, and the value is that full URL. And what an attribute does is it influences the behavior of a tag. And in this case, we need to influence the behavior of the anchor tag, because we need to anchor this link to somewhere. And how you do that is by way of the attribute. 

So I'm going to go ahead and save the file now. Go back to my browser and reload. And, voila, we now have the beginnings of a legitimate web page. Super-simple, but if I hover over this-- notice in the bottom-left corner, it's super-small. But you do see www.disney.com. And if I click it, indeed this whisks me away to disney.com. Now, the curious thing here is that it is not the best-- the most marketable URL, but that's fine because this file does not exist on the World Wide Web. It exists as a local file in apparently my Users directory-- /jharvard-- for John Harvard-- /desktop. But it has a URL. It just happens to be local. Unfortunately, none of you can visit this, because if you type this URL, you'd be telling your browser, look for a file called hello.html on your hard drive. And, of course, unless you've been following along manually, it's not going to exist there. 

So that's fine. We still need a way, ultimately, to get this file into the web, but let's tease apart a couple of security implications of what we just saw and tie it back to the earlier discussion from this morning. It turns out that, if a browser literally just does what I tell it to do, and it seems to be the case that an anchor tag is influenced by the value of this attribute called href but it displays this text, this would seem to imply that I could put the URL in both places and then reload and now see the URL and go to the URL. Notice, if I hover over the bottom-left, I'm indeed going still to disney.com. 

So if you've ever been phished-- P-H-I-S-H-E-D-- with one of those bogus emails from like PayPal your bank, you've probably gotten links inside of the email that you're reading that tells you to click here to go confirm your password or confirm your birthdate or social or something socially engineering you to disclose information. Well, I could kind of take advantage of this, couldn't I? I could say something like, www.paypal.com. And instead of disney.com, I could go to, like, badguy.com. Reload. And how easy is it to dupe, especially a non-technical reader or a cursorily reading reader than to click a link like this, which if I click it-- I actually don't want to go badguy.com. I don't know what's actually there. So paypal.com, notice, is what it says it's going to, but of course, if I look down super-low, it's a little blurry, but it says badguy.com. That's the only tell right now that I'm going to the wrong place. And when I said earlier that banks really shouldn't encourage or train users into clicking links, this is just one manifestation of it. And it's that simple. You are now an adversary if you do something like this and try to trick a user into visiting your website. But for now, we'll keep things nice and clean. We're going to go ahead and rewind these changes. Reload the page. And I go back to disney.com. 

Let's see if we can't tease this apart a little more. So "hello, Disney World." I'm going to say down here. Maybe I'm going to make some room. "We hope you enjoy your stay!" Save. Reload. It's not rea-- that's not what I intended, right? I mean, if I'm treating my text file like a word processor, what did you hope would happen here? Yeah, I feel like there should be a line break here, so it feels buggy in some way. But that's actually deliberate, because just as before, the browser is only going to do what you tell it to do. I have not told it to break lines. I've not told it to move down, even though, intuitively, I feel like I did. So it turns out we need a little more markup, and I'm going to fix this as follows. I'm going to preface this first hello with what's called a paragraph tag. And then I'm going to go ahead and wrap this other sentence in another paragraph tag, even though they're super-short paragraphs. Now I'm going to save. Reload. And now we have that space, and we sort of have the semantics of two separate paragraphs. 

That's all fine and good, but it would be nice to add an image to this page, so I'm going to go look for Mickey Mouse on Google Images. And just for fun, I'm going to grab this image. I'm going to go ahead now and grab the URL of this image, though there's different ways to do this. For now, I'm just going to copy the URL. I'm going to go back into my text file, and I'm going to say here, img src= quote unquote that URL, super-long. And then the notion of an image is a little different. There's really no notion of starting an image and ending an image, like a start tag an end tag. So it feels a little weird to me semantically to do this, to have a close-image tag. It's not incorrect. It's perfectly correct, and it's encouraged, but there's shorthand notation. I can kind of simultaneously open and close the same tag, and that will make the browser happy. So it's just a little more succinct for things that conceptually really don't make sense to start and end. They just are there, or they're not. 

So I'm going to save this and go back to my "hello, world" page and reload. And it's a little out of control, because that image is actually a little large, but that's OK. I could resize it in a program. Or you know what. Just to demonstrate, I'm going to actually say that the width of this thing should only be 200 pixels, 200 dots. Let me go ahead and save and reload, and now the page looks a little more reasonable. But notice the pattern. Well, I've kind of taught you all of HTML in some sense, at least conceptually, because all HTML is is these tags-- open tags, closed tags, and attributes that modify their behavior. And, apparently, every tag can have zero or one or two or more attributes, each of which does something a little different. Now, how do you know what exists? You just listen to someone like me tell you what exists, or you just Google around for a tutorial on HTML, and it really is this simple. 

Truly, when I was an undergrad years ago and learned HTML, one of my math teaching assistants just spent a little bit of time tutoring me for like half an hour, an hour, and then I was on my way. I was on my way toward making the most hideous websites ever, which, apparently, I haven't really progressed beyond. But the point is that, once you understand these simple ideas-- if arcane text-- but these simple ideas of starting a thought and closing a thought, keeping everything nicely balanced, looking something up, modifying the behavior of that tag, that's really all there is to it. And in fact, if we now go to something like google.com-- actually, let's go a place a little more reasonable-- stanford.edu. And I'm going to go to View, Developer, View Source. It's ugly, but notice-- and I'll zoom in notice some stuff that's familiar already. There's this up here, which is a browser. Here comes HTML5. There's HTML. Apparently, there's an attribute that I didn't use that specifies the language of the page, and this can help with automatic translation and stuff like that. Here's the head of the page. Here's the title of Stanford's page. There's a tag I didn't talk about yet-- Meta tag. It's just sort of background information. It helps with SEO, or search-engine optimization, or Google-search results or the like. But if we keep looking, keep looking, here's the Body tag. And there's bunches of other tags we've not talked about yet. But Div is one for a division of the page. It's like an invisible rectangle if you kind of want to mentally divide your page into different units online. And then lots of divs I see, something called Class, but we'll come back to that. 

This is interesting-- Forms. Forms are all over the web. Any search box you're ever used is a form. And, so, let's actually see. Form. Action. The action of this form, for whatever historical reasons, is that URL. Method is "post." Turns out that HTTP requests can use the verb "get," like we saw before, or "post." And will see a difference of this in a moment. Let's actually see what this is. Let me go back to Stanford's page. What form are they talking about, do you think? What jumps out at you? 

AUDIENCE: Search box. 

DAVID J. MALAN: Yeah. So up at the top right here is this Search box. And that's how they implemented it-- a tag that's literally open-bracket form. And then let's search for something. Let's search for a buddy of mine-- "Nick Parlante." Enter. And of course, it went to a slightly different URL. Let me go back here. Let's search for "courses." Damn it. Went to a different URL. So, Stanford's adding some magic that they're not taking me to the URL that we saw in the action attribute there. But this form here is implemented purely by way of this markup here, these tags. In fact, here's the input for the type of search that you want. Here is the input for another type of search. Here is the input for the string itself. And so the goal is not to wrap our minds around all of these tags but just to see. It's just opening and closing tags and looking things up. Yeah? Victoria? 

AUDIENCE: [INAUDIBLE] DAVID J. MALAN: That's a good question. That's a little trickier to see. Let me come back to that question in just a few minutes when we look at something called CSS, or cascading style sheets, and we can try to infer as much from the page. So if we now take a look at google.com, let's see what their page looks like. You would they're-- that's cute today. OK. All done. All right, so View Source. You would think Google has really nice source code. So, apparently, what is going on here? And in fact, this is not even HTML. This is something called JavaScript. And let's keep going and going. I don't even know where the page starts. I'm going to use Command F, open bracket HTML. All right, there it is. I found the start of the page, and there is so much stuff in here. 

What is actually going on? Well, you know what, we can clean this up. If I instead go to this Inspect toolbar, this special diagnostic tool, and go not to Network, where we keep going today, but if I go to Elements, what's really nice is that a browser has a lot much better eyes than I do. And the browser can read that mess of a web page, that HTML mail we just looked at, and it can parse it or read and analyze it and reformat it in a nice human-friendly way. So what I'm seeing now in this screen here under Elements, the exact same content, but they've indented everything, they've colorized it, but it's the exact same text that I downloaded from the server. 

And what's nice now is I can see in the body, for instance-- notice, the page is still composed of just a head and a body, and I can hierarchically dive in here. Notice that Google seems to have to divs-- this one and this one. I can expand that. There's a whole bunch of other divs. So it's a little complex. But wait. This seems so much more readable, relatively, than this. Why is Google embarrassing itself by just sending this huge mess of code of some sort just to implement something that looks so simple at first glance? Like, why don't they add more spaces? Why didn't they hit Enter like I did? Look how good I was at writing a web page. I hit Enter so diligently. I indented so everything is so pretty and readable. Why does Google not practice the same? 

AUDIENCE: [INAUDIBLE] DAVID J. MALAN: Good. Very fair. They do not have some person at Google manually updating the home page anymore. It's not 1999 anymore. So they have software. They have other tools that generate dynamically they're HTML. Of course, that code itself was written by humans, but the reality is, it's quite fair to say, the browser certainly doesn't care how messy the code is. But there's an even more compelling technical reason that Google distributes their HTML code in such a sloppy, seemingly overwhelming way all packed together with very little way-- very little in the way of formatting like I did. 

AUDIENCE: [INAUDIBLE] 

DAVID J. MALAN: Faster? Why? And what did you say, Lydia? Faster? Why faster? AUDIENCE: [INAUDIBLE] DAVID J. MALAN: There's no space to read. Yeah. So think about what a space is. So each character on the keyboard takes some amount of space to represent, either physically, like it takes up that much space, or somehow underneath the hood, that requires memory. And as an aside-- and we'll talk more about this tomorrow-- every character on the keyboard typically requires 8 bits, or one byte. So a pattern of 8 zeros or ones, or just 1 byte, as we humans would typically say. So that's small, but it's still non-zero. It's still some amount of space. So if an engineer or Google hits the space bar just once, and suppose Google-- it's super-popular-- suppose that a billion people visit their home page a day, or some number of people visit the home page a billion times a day, how many additional bytes has that software engineer just cost Google by hitting his or her space bar once? 

AUDIENCE: [INAUDIBLE] DAVID J. MALAN: Not quite that bad. Just one byte times a billion. So a-- AUDIENCE: 8 billion gigabytes. DAVID J. MALAN: Not 8 billion. 8 billion bytes. But 1 gigabyte. 1 gigabyte would be the unit of measure. If he or she does two spaces, 2 gigabytes. Three gigabytes. Right? It scales expensively. And so in cases like Google, which, granted, are extreme cases, there are other issues that arise just by making very reasonable decisions or taking very simple human actions, because it has this magnified effect. So one of the reasons this looks so compressed is exactly as Victoria said-- it was just generated by computers anyway. So no big deal. Let the browser figure it out. But it also deliberately doesn't have much space, because the space isn't necessary. And the space actually costs money. 

It either costs time, because just to push that much more data out of google.com's headquarters just has got to take some amount of time, even if it's milliseconds or microseconds, but that adds up over so many users, or more likely, it probably costs money. Google probably connects to someone else in the world, one of those peering points, and if they have some kind of financial relationship whereby their data costs money, they might as well minimize how much data they're spitting out on their internet connection. 

So the funny thing, though, ultimately, or maybe the reassuring thing, is that even though this looks terribly overwhelming, at the end of the day, it's still the exact same principles as this very simple page here of an HTML page. So just to summarize and so that you have a canonical version if you weren't following along by choice here, here might be the most simple of web pages, so something to play with perhaps later. 

Well, let's introduce a couple of other ideas now. We're about to introduce something called a style tag. We can stylize this page in more interesting ways. So whereas HTML email is all about marking up the data, sort of specifying to a browser how to structure the data, where to put it, CSS, or cascading style sheets, is a second language that generally gets commingled with HTML as we'll see-- but we can clean that up in a moment-- that takes it the final mile, and it stylizes it. It gets the colors just right, the font sizes just right, the positioning just right. It's all about the aesthetics or formatting, not about the fundamental data itself. And the easiest way to show this is perhaps by example. So I'm going to go over to my simple text file. And in just a moment, I'll walk us through the process of doing this ourselves. 

I'm going to go back to my file here and reload the page just to confirm what it looks like. That's where we're at now. I feel like kids would enjoy having some color to this web page. So I'm going to go up here into the head of the page. And I'm going to do style, /style. And then inside of this, I'm going to tell the body of my page-- and this formatting is, at first glance, perhaps a little strange but conventional. I'm going to say that the background color of this page should be green. And this is unfortunately sort of not the best design. Notice that previously in the world of HTML, I said that attributes are these key-value pairs. Something equals quote unquote "something." In the world of CSS, which was designed by some different people, they decided that, in their world, key-value pairs would be word colon something. So it's the same idea, though. It's associating a value with some key that somehow influences the behavior of this page. 

And you can probably guess. What is this probably going to do even if you've never seen HTML or CSS before? AUDIENCE: Change the background color. DAVID J. MALAN: Yeah, change the background color. And specifically the background color of the body. But insofar as the body for now is the web page-- it's the only thing below the title bar really-- it's probably going to influence the same thing. So let's see. Let's save this. Go here and reload. It's pretty hideous. And what's going on here is a side effect. I just chose this image randomly. Why is the green not permeating behind Mickey? AUDIENCE: [INAUDIBLE] DAVID J. MALAN: Exactly. It turns out that images, pretty much all images that we might use, are all rectangles-- of rectangles. Even if Mickey has some curves to himself and has a background, that background has to be something. It has to be white. It has to be black or something else. It can be transparent. And in fact, I could open Mickey Mouse here in a program called Photoshop or something similar and change all of that white background to transparent, so the green would shine through. But that's something I would need to ask of myself or a graphic artist or a designer at my company, for instance, to do, especially since I just borrowed this one from the internet. But that's why this is happening. 

So what else might we want to do? Well, we might want to say we really hope you enjoy your stay. And for emphasis, I want to make this strong, and so I'll say open strong and close strong and then reload. And it's a little hard to see on the projector but perhaps really now jumps out at you a bit more. So you can add italics in this way, bold facing in this way. We could change the colors. In fact, just for kicks, I'm going to go ahead and do this. I don't really like how my paragraphs are this close together, so I might do something like this. I'm going to tell the browser, change every paragraph tag to have, let's say-- actually, you know what, let's align it text-align, center. And again, I know this only because someone taught it to me or I looked it up in an online reference. So let me save this. And, ah, now I've centered the image there. And actually, you know what, if I move my image into a paragraph tag-- so a third paragraph, even though it's not text. Let's save that and reload. Now the page is starting to look kind of-- I mean, it's still pretty ugly, but at least it looks like I spent two minutes instead of one minute making it. 

And so, incrementally, can we make these aesthetic changes now to the page? I've not really changed the data in the page other than adding the word really. I've added metadata, if you will. Hey, browser, make the word "really" bold. But the data is not strong. That's metadata. The data is "really." So we still have some of the same concepts as before. Now, of course, this is not on the web, so I'm going to do one final step here. 

I'm going to go to hello.html and just highlight and copy this. And now I'm going to go into Cloud9, which I'll walk you through in just a moment. And odds are you'll soon be, if not already, at a screen like this. And let me just give you a quick tour of what Cloud9 actually is. So again cloud 9 is this cloud-based service that gives you and me the illusion of having our own virtual machine in the cloud, technically a container in the cloud, that we have full administrative privileges to. So in theory, no one else in the world has access to the screen I'm looking at right now, except maybe the people who run the site, because technically they have physical access and so forth. 

So what do we see in this environment? I'm going to zoom out, because it's a little small. And let me point over here for just a moment. On the left-hand side of my and your screen, there's a file browser at left. So similar in spirit to Mac OS and Windows. These are all of the files in my account. And by default, if your account is like mine, you'll see or soon see helloworld.html and readme.md. Over here on the right, this is where my text files are going to go. If you've ever used Microsoft Word or Notepad or TextEdit, this is word my editing of files is going to go. And then the most arcane feature of this environment that we won't really need to use is down here called a Terminal Window. If you've used DOS from yesteryear, this is the Linux or the Linux equivalent of DOS. It's a text-based interface-- no mouse clicks, no dragging. All you can do is type commands, but those commands can create files, move files, open directories, close directories, do any number of things. But for now, we'll just spend our time up here. 

And so let's do this. If you're in this environment, which you should be if you created a workspace already, go ahead and just go up to File, New for a moment. And that will give you a new tab right here in the middle. And I just-- and let's go ahead and do this. Let's go ahead and now do File, Save and go ahead and call it hello.html, not to be confused with helloworld.html, which came with your new free account, which is just a sample file. You will see it suddenly appear, most likely on the left-hand side, and the tab will still be open. And let me encourage you now to recreate this file or some variants thereof. And if you can't quite see it on the screen, this is identical to the slides that you probably have in another tab. 

So in short, make your first web page, save it, and then in just a moment, I'll show you how you can actually view this. But change at least one thing. Change helloworld to something of your own choice, so that you're convinced that it's your file and not the one I just created. All right. And when you're ready-- no rush-- when you're ready, go ahead and save the file once you've made these changes. And if you click the Run button up top, this should open a new tab that will tell you what URL you can visit your file at, but it might take a moment to quote unquote "start Apache," which is the name of the web server. So be careful to do exactly what's in the file ultimately. So right now, I'll zoom in. If I start typing open-bracket HTML, notice it's prompting me to finish my thought. And if I finished my thought, it automatically gives me the closing tag. But the expectation is then I'll hit Enter, and then move inside there and do head inside and then I do body inside. And it's a little weird at first, because it's doing work for you, but realize that ultimately it saves you keystrokes. And in fact, a very common feature of programming environments these days both for web development like this and actual programming, which we'll talk about tomorrow, is these auto-complete features, things that just allow a programmer or a designer to type fewer keystrokes to accomplish the same thing. Sometimes it's good, though. Sometimes it's just annoying. And, again, once you've transcribed the slide or some variant thereof, you can click the Run button up top. And then in the bottom window, you'll be informed at what URL you can visit your web page. Mine, for instance, is at business-daharvard.c9users.io and so forth. All right, so, let me-- any questions? Any other questions about just getting this working before we add features? And let me propose, just to get folks comfortable-- because it's one thing to just copy-paste blindly what I've done. But just so that folks wrestle with at least one to-do, I'm going to turn on some music. I'm going to propose a list of things you can potentially add. And you can certainly use Google. And why don't we just propose that you try to solve at least one particular problem here. So in terms of tags, let me reuse this here. 

Actually, let me put it in a textual form. Let's say that among the tags we might use here are some tags over here. We've seen the paragraph tag. Now it's going to auto-complete. Paragraph tag, the anchor tag. Let's say you want to make something bigger, so you might like-- the span tag can help. Well, you might need some help for that in just a moment. We've seen div. You'll see there's table. There something called tr, td. Th, td. Come back to that in a moment. What else might be handy? There's strong. There's emphasis, or rather em. There's-- what else might you fancy here? Well, we'll take a look at that together. Form, which we've seen. There's form. There's input and a few others. All right, so let's do this. To answer a Victoria's question, let me first just make sure that everyone is able to get their hello working. Then let me introduce a couple other ideas. Then we'll let folks solve some problem on their own. Then we'll actually come back to that notion of a form, and we'll actually re-implement together the front-end interface, so to speak, for Google itself. We'll use Google as the back end and let them do the hard work, the searching, but we'll recreate the front end of Google and the search form that they have on their own home page. And so we'll come back to these tags in just a moment. 

So this was what I proposed just a moment ago. We can add the stylization to a page inside of this style tag, and we can stylize the background color, the text alignment, whether it's center or left or right. But very quickly you would find or a web designer would find that this becomes a little unwieldy, because you're doing what's called mixing content with presentation thereof. You're mixing your data and the aesthetics thereof. And in fact, if you consider what's going to happen over time-- this is a very small web page, of course. But if I add content to this page and I add style to this page, the page very quickly gets longer and longer and longer. And suppose that I want have a second web page that shares some of these attributes. Suppose my second web page for my site-- also, I want everything center, and I also want everything with a green background. I'm pretty much going to have to copy and paste some of these lines into that second file, which feels fine. It will solve the problem. 

But what if I want a third page or a 30th page or a 40th page? Now I'm going to be copying and pasting a lot of duplicate code in multiple files. And so suppose that I decide or I'm told, hey, we're not using a green background anymore. We're going to start using orange. What do you have to change? Well, you have to change that style from green to orange in how many places? Like 30 or 40 places. It's tedious. It's prone to error. There's a number of reasons where you wouldn't want to induce that kind of pain for yourself. And so wouldn't it be nice if we could take what I just put between these two yellow tags, these style tags, factor it out, and put all of my stylization into one central file that all 30 or 40 of my other files borrow from or somehow reference, not unlike the networking diagrams we were doing before? 

So if I go in here, I'm going to actually propose that we replace the style tag with something called the link tag, which is horribly, horribly named, because you do not use the link tag to create what we humans know as a link in a web page. For that, you use which tag? How do you create a link in a web page? AUDIENCE: The a. DAVID J. MALAN: The a, or anchor tag, that went to Disney before. The link tag here is saying this-- link to a file called styles.css, the relationship to which is going to be that it's my stylesheet. So this is one of the S's in CSS-- cascading style sheets. Style sheet-- two of the S's in CSS. Cascading style sheet. This just means, hey, browser, go find styles.css on the local server and use it as your stylesheet, which means inside of that file is going to be all of the stylizations that we've just done. And so what that file might look like is this. And I'll just do this is a quick example, because we don't need to get too much into the weeds here. But if I copy this, what I'm proposing is that a programmer create a new file, paste in those lines-- whoops-- paste in those lines, save it as styles.css, and then, in the other file, delete all of that and replace it instead with this link tag. So that if I link href="styles.css", the relationship shall be "stylesheet" close tag. Save it. Go back to my helloworld. Reload. 

Literally nothing has happened. That is a good thing, because it means it's actually all working. To prove as much, suppose I make a typo, and I call this "Styles.css" with a capital S, which is incorrect, and then reload. Now you can see it just doesn't work. Now, why? Well, let's use a technique from earlier. Let me go ahead and, in my browser, in Chrome, I'm going to open up that special network tab as before, and let me reload the page. What are you not surprised to see now? Or maybe you're surprised to see it. Either way, what do you see now? AUDIENCE: [INAUDIBLE] DAVID J. MALAN: It's not found. Why is it not found? Well, Styles.css-- capital S-- does not exist. I misnamed it. Simple typo. But I'm getting understandably now a 404, because the server is saying, hey, it's not found. Literally, I don't know where that file is. So as a result, the browser shows you what it can, the raw content of the page, which was a 200, the HTML, but the stylization can't be added thereafter. And this is what's meant by cascading. You can sort of add it after, and it sort of refines the aesthetics of the web page. And you can even override those styles with yet other stylesheet files if you want. It's not found, though, in this case, because of course, I misnamed it. So I would have to fix that first. 

So let's go ahead and propose the following. Let's go ahead and do this. Starting with perhaps your helloworld file, let me just invite a couple of feature suggestions. So, Victoria, you wanted to make some text bigger, right? All right, so we can do make text bigger. And we'll each pluck off just one problem to solve. Make text bigger. I'm not going to bother writing this when we have bullet technology right over here. So some problems. So we're going to try to make text bigger. All right. What else would someone propose? What else might we want to do in a web page? Let's come up with a short list of things and then delegate to the group to figure this out. 

AUDIENCE: [INAUDIBLE] 

DAVID J. MALAN: OK, position text on different sides of the page? All right. Something else. 

AUDIENCE: [INAUDIBLE] DAVID J. MALAN: It is. So a gif is just a different file format. We just used, what, a png or a jpg probably? We used a jpg. If you're curious, an excessive answer to your question is a jpg is generally used for photographs, because it supports millions of colors or 24-bit color. A gif is generally used for, like, internet memes these days-- animations, like animated gifs. But it happens to use a smaller color palette, only 256 possible colors, but it supports transparency and animation. And then there's png, which supports transparency and more colors but not animation. So it's a trade-off. So adding a gif, though, would be functionally equivalent to adding a png or a jpg. Yeah. Image source equals. So something else. Let's come up with something that we sent to Victoria to do here. 

AUDIENCE: Add buttons for a form. DAVID J. MALAN: OK. So add buttons for a form. And we'll do that one together. So that'll be a perfect segue right after this challenge. Anything else? What might you like to do? The web feels very underwhelming if this is all we can do. AUDIENCE: Change the color of the text. DAVID J. MALAN: Change the what? AUDIENCE: Color of the text. DAVID J. MALAN: Change color of text. All right. So, let's do this. Just again so that you're not, just by rote, doing exactly what I'm doing, I'm going to turn on music for maybe five minutes here. You're welcome to use Google. You're welcome to ask me, and I'll whisper a hint in your ear. You're welcome to look over on other's shoulders. But solve just one of these problems. But we'll do the last one, the forms one, if we could, together. So five minutes to solve any one of these problems using Google, intuition, or any other means available to you. 

[MUSIC PLAYING] All right. No worries if you want to keep tinkering, but I'll spoil a couple of these answers. So the first suggestion from Victoria was to make text bigger. So there's a few ways to do this. I've currently restored my screen to this size, though I've zoomed in artificially just to see things. And let's do this. Let me go ahead and grab some generic Latin text just so we have something to work with. So give me just one moment. I'll make three paragraphs. OK. This will be a better example. So for the curious, in my hello.html, I just pasted three nonsensical Latin paragraphs just so we have some text to work with. And Victoria's goal was to make some of the text bigger. So I could, as before, go in here. And let me do it the right way. I'm going to have a link tag that points to a file called "styles.css," the relationship of which is again "stylesheet." And then I'm going to save that and open up this "styles.css." 

So, as before, I have the ability in this CSS file to actually override the default aesthetics of a web page, and the default aesthetics, of course, are pretty dull. It's sort of normal font size, black text, white background, and so forth. So suppose I want to make all of this text bigger. I could do a few things. In my styles.css file, I could say, you know what, apply the following to the body of my page. Go ahead and make the font size 24 points, which is a number I might use in Microsoft Word. Let me go back to my web page here and reload, and you can see that it's already much bigger. And we can get a little crazy, just like we can on a desktop-- make it 96 points. Reload. And it's getting a little unwieldy at this point. 

But I could be a little more precise. Instead of applying this stylesheet to the body of my page, what else might I apply it to instead, what other tag that might still function in the same way? 

AUDIENCE: The p tag? DAVID J. MALAN: P tag. So the head wouldn't be correct, because the head, you can't actually control the aesthetics of. There's either text there or not. But the p tag-- I can dive in a little deeper, so to speak, to the paragraph tags. And even though there are three, that's perfectly fine, because in CSS, when I just say "p," this means apply the following to any tag that matches this selector, the selector just being the name of the tag. So wherever you see a "p," apply the font size, and let's make it more reasonable again-- 24 point. And you know what, just for good measure, let's make the color red just for the moment. And now if I reload, now we see three ugly paragraphs. 

But now suppose that I'm sort of-- I want the first paragraph to jump out at the user. I don't want to just increase the font size of everything. And so I actually want to identify or distinguish among these paragraphs. So let's get rid of the red, because that's just kind of tacky, and let's go ahead and make the font size 12-point by default, so that we're back to something a little more reasonable. And now I just want to increase the font size of the first paragraph. I can do this in a few ways, but one way that's perhaps most instructional at the moment is to do the following. Let me go ahead and say, this paragraph has a unique ID of "first." I could call this anything I want. I could call this "foo" or any other word, but I'm going to give it some semantically meaningful name like "first." This is the unique identifier, the ID, for my first paragraph. 

What I can now do in my stylesheet is be a little more precise. Instead of saying, apply the following to the p tag, I can say the following-- apply the following, or select, the HTML element that has a unique ID of "first." What do I want to apply to it? A font size of 24-point. So I have two selectors now. One makes all of the paragraphs 12-point. But this one, especially since it comes second-- it comes last in the file-- this has a cascading effect. I've just made all of my paragraph tags 12-point, but this now cascades and overrides that for any elements in the page, any tag in the page whose unique ID is quote unquote "first." And the hashtag in this context just means "unique identifier." I don't put it in the HTML file. I, over here, just say quote unquote "first." 

So let me reload. And now I see, ah, OK. I mean, it's not that pretty, but it's kind of like the preface to a book or something like that, where the first paragraph is bigger. Could be even more precise with just the first letters, but at least I've exercised more control. Now maybe-- maybe I want to do this occasionally for whatever reason, and so I don't want this to apply to just one HTML tag. Rather, let's say-- let's also do the following. Class="import." Whereas an ID is used to uniquely identify one thing, one tag, in your web page, a class is meant to be used on any number of elements or tags on your web page. So it's reusable. An ID is not reusable. A class is reusable. 

And you know what, for whatever philosophical reasons-- I didn't finish my thought-- I'm going to say that the first paragraph and the second paragraph are important. So I'm going to apply the class called "important," that, if I save my file and reload, has no functional impact yet. But I've added some metadata to the file, sort of something separate from the core data of the file, so that now in my stylesheet, if I instead say ".important"-- you know, anything that's important, I'm going to make font-color, red-- or rather not font-color, just color. There's inconsistencies in CSS unfortunately. And reload. Now notice the first two paragraphs are red but not the third, because I only applied the class of "important" to the first two of those things. 

So in IDs, you have the ability to specify very precisely. With classes, you have reusability. But in both cases, notice the sort of good-design principle where I factored out all of the aesthetics to my styles.css file. So there's no messiness here. There's no mention of red or bold-facing or font size in this file. Rather I have semantically, meaningfully characterized my data as, here is some important data. Here is some more important data. Moreover, here is the "first" of my important data. So HTML is all about sort of tagging, literally, words and paragraphs and constructs in your page with these little hints, if you will, that you can somehow leverage using other techniques like CSS in this way. 

So in answer to Victoria's question, we can make text bigger in that way. There are so many other ways, but the font tag-- open bracket "font"-- is actually several years old. And this is the problem, too, with relying only on online resources-- they tend to be outdated. And indeed, that's been deprecated, because the world realized, what does "font-size=7" mean? It doesn't. And so for many years and to this day-- one of the side notes here is that it is actually incredibly painful still sometimes to develop sites for the web, because Microsoft and Google and Mozilla and others often disagree as to how to interpret a specification like HTML. 

There is a rulebook for HTML that generally says what each tag means. But sometimes it's left to the implementation's discretion, Microsoft's discretion and Google. And so you'll very often see on a website something looks different on a PC than it does on a Mac, and that's really because, at the end of the day, they didn't test it well on both platforms. But it's also because reasonable, smart people will disagree and companies will disagree, and so one of the challenges of programming for the web or designing things for the web is writing your website in a way that works on every web browser. But even that's unreasonable, right? There are so many versions of so many browsers out there that, at some point, you also have to make a judgment call and you have to decide as a company, especially for e-commerce-style sites where you're trying to use the latest and greatest technologies to give a really good user experience. But some percentage of your users might still be using Internet Explorer 6 or 7 or 8, especially depending on the country that they're coming from. 

And so very commonly consulted is something like "web browser statistics." And if we go to-- let's see Wikipedia and see how up-to-date this chart is if there is one. So here you can see where browsers actually are, according to December 2015, according to the US Government. Chrome is at 42% market share, followed by IE largely in corporate settings or PC settings, of course, followed by Firefox, then Safari, then Opera didn't make the map here for some reason, and then Others. Maybe it's under Others. But more problematic than that is-- let's see if Wikipedia also has versions of browsers version-- 

Let's go to browser statistics. IE. Even that's not enough. Browser statistics. My version. That's not going to be right. Let's see versions. Browser market share. Let's see if this comes up. OK. Now this is getting a little more useful. So here, notice that we have all different versions of browsers. And, my god, if you look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. I mean, browsers increasingly updated, and sometimes some of those changes are significant in terms of functionality. And so at some point, the product managers or the engineers need to make a decision-- you know what, only 1% of the world is still using IE 7. To hell with them. We're just not going to support that browser. And what does it mean not to support? It might mean that buttons don't work on your web page, or it might mean the formatting is completely off. Or you might have to make that same judgment call in mobile these days, where, we're not going to support IOS 5 anymore. So people just have to upgrade. Or we're not going to support Cupcake on Android OS for Android devices, because as the world-- as the tech world wants to move forward, it kind of wants to drag the world with it so that they don't have to continue to be backwards compatible so they can offer new and good features. This is indeed one of the reasons why so many companies are rolling out automatic updates and sort of forcing the latest versions of software on us. And even companies like Apple will sort of force you almost or compel you in terms of market forces to buy a new phone because they just won't update your old phone anymore. So you miss out on the latest and greatest features, because it's costly to them as a company to maintain older, arguably inferior versions of software. But the net effect is that we also suffer this as well. 

So let's take a look at just a couple of final things here. Let's knock off real fast some of those other bullets, if curious. So if you were trying to, for instance, position the text on different sides of the page, I'm going to do one quick way, but there's different ways of doing this. Let me go ahead and eliminate-- simplify this as follows. Let me just go back to my simple, simple paragraphs. Let me go back to my styles.css. And I'm just going to use the simple-- which you might have seen on Google or recall from earlier-- text-align right. And reload this page. Now everything seems to be right-aligned, as you might see on the overhead here. 

We can make it look a little more book-like, and we can say "justify" and reload. Now it's nice and square on both sides, which is kind of nice. Another goal that we had here was change color of text. So we saw that with my red text. And now add buttons for a form. So why don't we try to do exactly this? But first let me go to a site that most of us use every day-- Google. And let's take a look at how Google actually works. But I'm going to do this. First let me do it in-- yep, let me go to Google first. I'm going to have to go into Google Settings, because I want to disable something called Instant Results. 

So you might have noticed in Google these days-- let me go back and turn this on. So if I start searching for "cats" like this, notice that not only do I get auto-complete up top, all of a sudden, the page itself seems to change pretty quickly as well, and that's Google using a language called JavaScript trying to be helpful. But unfortunately, it kind of messes up our discussion of what's actually happening underneath the hood here. So I am just kind of quickly turn off instant results. And I'm going to click Save. And now I'm going to open that diagnostic toolbar that I keep opening under the Network tab. So let's do this. Let me-- whoops-- scroll this down a bit. And let me search for "cats." 

And now notice-- actually, this is a good opportunity to discuss for a moment. Notice the moment I type-- stop it. Stop it. OK. Notice the moment I type the letter C, watch the bottom of the screen. A- T- S. What does the bottom of this screen, my Network tab, suggest is happening each time I type a letter? Unfortunately, the frog is very distracting today or the shamrock or whatever he is. What was happening each time I typed? And let me clear the buffer and type it again. So-- whoops. Every time I type a letter, C- A- T-- so a new row obviously keeps appearing. What does each of those rows represent, based on what we've seen and discussed thus far? AUDIENCE: A search? DAVID J. MALAN: A search, or more generically, an HTTP request from my browser to server. Well, why is my browser making an HTTP request every time I type a letter? 

AUDIENCE: [INAUDIBLE] DAVID J. MALAN: Yeah, it's giving me these auto-complete results. Like, where do these search results come from? Well, every time I type a letter, Google sends more and more and more of the word I'm typing. Why? Because they want to give me a better and better, better suggestion, a list of suggestions, for what word I'm trying to actually complete. So this is to say literally every character you type into Google is being sent, ultimately in bulk, but also sometimes one at a time in order to implement these auto-complete features when the data is, of course, on the web. 

Now, let's take a look at what actually happens when I click Google Search. And then we'll leverage this ourselves. So if I scroll down now to the very first request that just happened. Notice the following. It was sent to a fairly long URL-- https://www.google.com/search? and then a whole bunch of stuff. Let's see this actually now in the browser tab itself. Let's get rid of the toolbar here. Here's the page of search results. And notice here's the URL. Now, you can probably guess what's going on here in part. So first of all, a definition. This apparently is the destination where the form is submitted. So when I typed in the words "cats" and hit Enter, apparently Google sent my text input to this URL that I've highlighted there, slash search. Turns out, in a URL, anything that happens after a question mark is, as we keep saying, a key-value pair that was typed into the form or somehow transmitted from the browser to the server. 

So any time you type input into a form on the web and it's sent as we've been discussing, via a get, one of these virtual envelopes, the contents of that envelope-- yes, keep getting stuffed physically into the envelope in class today, but technologically it's actually put in the URL. So in fact, let me sift through this. Where do you see user input? Where do you see something that I myself typed up here? Yeah, so "cats." Right? So let me distill this into something simpler. I'm going to delete everything about this URL that I don't understand, and I'm just going to leave it as this-- /search?q=cats. We'll see where q comes from in a moment, but that feels like the minimum amount of information that I provided. And now I'm going to hit Enter. And notice it still works. We still get back a whole bunch of cats. So Google is fancier than this these days. It's 2016, not 1999. So there's other stuff that my browser is sending to the server. But this is minimally all that's necessary. 

So what's going on? Well, first let me go ahead and go back to Cloud9 and let me go ahead and close my tabs earlier. And I'll do this on my own just for a moment. I'm going to go ahead and create new file. And I'm going to save it as google.html. And I'm going to very quickly-- I'm going to steal, actually, some of this text just to save time. I'm going to paste this in here. I'm not going to bother with any stylization this time. We're going to call this "My Google." And I'm going to get rid of everything in the body. And I'm going to do the following. Let me zoom in. Form action-- and as I briefly mentioned earlier-- whoops-- as I briefly mentioned earlier, the action of a form is where you send the data to. So google.com/search. And the method I want to use can be one of two things. It can either be "get," as we keep discussing, or it can be "post." For now, the fundamental difference is, if you use "get," all of the information that the user provides gets sent in the URL. 

That is great for things like search engines and a few other applications, but in what circumstances would you not want to fill out a form and have the information end up the URL, like in your browser's address bar? What kind of forms do you-- AUDIENCE: [INAUDIBLE] DAVID J. MALAN: Yeah, like what? AUDIENCE: Passwords. DAVID J. MALAN: Yeah, so you log in to Facebook or some website. That's user input from a form, a text box, but you probably don't want it showing up in the browser's URL. Why? I mean, maybe there are some security implications on the network, but more-- like, more simply, what if your roommate, your significant other, your kids, your spouse looks through your browser history? There is your password right there in your browser's history. That doesn't feel like good design. Or even more technically, suppose you're trying to upload a photo to Flickr or Facebook or wherever-- that is user input, even though it's a little more interesting-- how do I cram an image in the URL bar? You kind of sort of can't. You kind of can. But, really, I'm hard-pressed to imagine doing that. So I need another method for uploading photos to a website, and that other method is called "post." But for now, we'll just talk about "get," which is the simpler of the two. It just puts all the user input into the URL. 

So here's the form I'm creating. I want an input. And you know what? I'm going to take a guess here. I'm going to recall my input "q" for "query." And I think this is one of the original designs, perhaps, from 1999. And then the type of this input is just going to be "text." And then I'm going to have another input that doesn't need a name, as we'll soon see, the type of which is "submit." And this is going to give me a special button. And that's it. 

So let me go ahead and save this file. I'm going to go back to my browser and go to google.html. Enter. And it's kind of sparse to say the least. But let me go ahead and search for "cats." And notice I'm currently at this Cloud9 URL. But the moment I click this, where do you hope I'll end up? 

AUDIENCE: Google. 

DAVID J. MALAN: Google. So let's click Submit. And indeed I've re-implemented Google. Right? It's simpler. It's lighter. I mean, my code is clearly better than theirs, from the mess we saw earlier. And you know what? I'm going to spice this up a little bit. I didn't mention this earlier. There are tags like H1, for Heading 1, the most important heading in a page. "My Google," I'll call this. Let me reload. It's looking a little better already. And, actually, you know what? I've already-- I lied. I said I wasn't going to style this, but I'm going to style this like before. And my body is going to be, let's say, text-align center. It's looking more like Google already. 

I need a line break, though, for that Submit button. And it turns out, you can use paragraphs, or you can more literally just say, give me a line break here-- the br tag. And if I reload this, now it goes there. It's a little ugly, so I could do multiple line breaks, but let's not get too greedy here. So now let's see if it works for "dogs." It seems to work for "dogs," as well. So what's the compelling takeaway here? One-- wasn't a huge leap to introduce a few more tags, like the form tag in the input tag. But more fundamentally is, all we're doing is leveraging our understanding of HTTP and the fact that forms ultimately alter what's in the URL of the browser, and so, therefore, we can mechanically provide input to a server by making an HTML form and knowing that the server understands HTTP, just like our body understands, like, shaking my hand, that same protocol, and so we get back the response that we ultimately expect. 

So let's try to do one last thing now with mobile, and I'll make-- I'll add this code to the slides. So if you'd like to tinker, you can certainly take it from there. But I'm going to go ahead and do one thing. I'm going to go ahead and open up my index page-- my hello page as before, which has a lot of this faux-Latin text, or meaningless Latin text, and has-- it looks like this at this font size. But let me go ahead and do this. I'm going to go into Cloud9. And you don't have to do this step. I'll just do it myself. I'm going to click Share. And this is a feature just of Cloud9, whereby I can make my environment public. 

And just for the sake of demonstration, let me do this. I'm going to make my application public. Notice it's warning me, am I sure I want to do this, because this is going to make everyone in the world, whether they're here now or watching the video later on the internet able to see what I see. But that's OK. I'm going to say "Done." And let me encourage you, if I did this correctly-- let me test it first. Go ahead, if you don't mind-- in a browser on your computer, go to this URL, and hopefully you'll see my Latin text. And to be clear, it's running not on my laptop. It's in the cloud. It's on Cloud9, literally, but I've made my workspace public so that anyone on the internet can access my Latin home page. 

Go to the same URL on your phone, if you could. If it'll cost you, though, you can just look over a shoulder. AUDIENCE: [INAUDIBLE] DAVID J. MALAN: I'm sorry? AUDIENCE: [INAUDIBLE] DAVID J. MALAN: Just Latin words. That's all. But that's what you should see. 

AUDIENCE: Yeah. DAVID J. MALAN: Yeah. Yeah. OK. So can I hold up your phone for just a moment? So, hopefully, if you're accessing it, it should look almost unreadable. It's still-- I mean, it's unreadable because of the Latin. But it's also unreadable for what other reason? Like, what displeases you about this? AUDIENCE: It's small. DAVID J. MALAN: It's super, super small. So how could we fix this? It's super, super small on Victoria's phone and, if you've pulled it up yourself, probably small on your phone as well, unless you have accessibility settings enabled. What's that? You could just pinch and zoom, which is workable, but then you only see a few words at a time. So wait a minute. I know how to fix this. Right? I could use CSS, and I could change the font size from 12-point to 24-point. But the side effect of that, of course, is going to be now, on a desktop or a laptop, now the text is twice as big. And so it would kind of be nice to distinguish between devices, and it turns out there are ways of doing that. There are several different ways, in fact, whereby using CSS and fancier features that we won't go into in great detail, you can essentially query the browser and say, if your screen is smaller than this many pixels, use this font size. If your screen is bigger than this many pixels, use this other font size. 

You can be even fancier still. If you've ever visited a web page that, on a desktop, has a big menu maybe off to the side, and then all of the content is to the side of that menu-- that's kind of a common paradigm. Menu on left, content on right, or vice versa. Doesn't really work on mobile when your screen is only this many pixels wide. So more common on mobile is, your menu will suddenly get collapsed, and you have to click a button to see it, or the website will put the menu above it and put the content below it. And you can implement these things in multiple ways, too. You can ask your programmers, hey, team, any time you see an HTTP request from an Android device, a Microsoft device, a Google device, an Apple device, use this font size and use this menu layout, or else use this default bigger layout. 

Now, using what fundamental technique today could the engineers use to know whether it's an iPhone, an Android phone, a laptop, a desktop visiting the company's server? Wherein do they get that information? 

AUDIENCE: Header? 

DAVID J. MALAN: Yeah, the HTTP header. So every HTTP request coming from their customers to their servers include, inside that virtual envelope, a whole bunch of HTTP headers, one of which is the browser and the operating system even, if you care to that level of detail. Now, it's a cryptic-looking string, but there exists software that will just simplify that, and you can just ask in programming code-- PHP, Java, C++, whatever-- what phone is this-- what device is this user using? And then you can say, show them this version of the website if it's a phone. Show them this version of the website if it's a laptop or desktop. But you don't even need server-side complexity. You can do even the simplest of things. 

I'm going to do this. I'm going to go ahead into my Cloud9 environment, and I'm going to add a tag that you saw in Google before. It's called the metatag. And I never remember this one, so I'm going to transcribe it here. Meta name="viewport" and then content="width=device width,intital scale=1" and that's it. 

So it might as well be like a magical incantation. It's not all that clear, but this has something to do with the viewport, and the viewport is just the body of a web page, the rectangular region that defines most of the page. And this is just telling the browser, you know what? Make the width of this page effectively equal to the device width. In other words, don't assume that you have sort of unlimited space. Assume you only have as much space as the device itself is big. And so now, if I reload this in my browser, I see no change. But if I did this correctly-- and let me cross my fingers-- if you all reload your phones, do you see a compelling change? Yeah, is that-- 

AUDIENCE: [INAUDIBLE] DAVID J. MALAN: Yes. OK. So arguably more readable now? Still small, to be fair, but not so tiny as to be unmanageable. And I could certainly override this further with CSS or on the server side, but increasingly what you're seeing is more and more features being added to client-side environments-- JavaScript, as we'll discuss tomorrow, CSS, and HTML-- so that all of these queries can be done on the client so as to bother the server a lot less and not to have to keep up with, for instance, the constant onslaught of new operating-system versions, new browser versions. You can just let the browser ask the device, how big are you, and then make somewhat logical decisions based on that. But we'll see more opportunities for logical decisions tomorrow in the context of a programming language. 

So, any questions, then, on web development? Today is not web programming, per se, since most everything we did was very aesthetic, if you will. There is no decision-making in the code that we have written, and so that's why HTML is a markup language, not a programming language. But tomorrow we'll take a quick look, ultimately, at JavaScript, which is an actual programming language that lets us do a bit more. 

Any questions? Well, let me propose two opportunities optional for homework. One is-- these Cloud9 accounts won't expire. You're welcome to use them to tinker with. It's the free level of service. Realize that, if when creating your workspace, you made it public, that does mean that anyone on the internet can see what you're typing. So maybe just consider not embarrassing yourself if you're putting your first web page out there publicly accidentally, but no one's going to know to look there anyway. 

And two-- let me toss up this URL as well, especially if you came in today a little less comfortable than others, unsure what all this stuff means. Realize that much more of this video, which is both a good way to fall asleep and also to laugh while doing so, also has a lot of societally interesting and security-relevant discussions therein from John Oliver, albeit a comedian. 

But if there are no further questions, that brings us to the reception. So why don't I turn on the music. There should be drinks and snacks outside. I'm happy to mingle for as long as folks would like, answer questions more one-on-one. But, otherwise, you're welcome to take off at any point, and we'll see you again tomorrow morning for a bit more. All right, thanks.