All right, welcome back to Computer Science E1. This is milk and cookies night, as you may have noticed in back, and also website development. So two hours hence, you all will know how to make websites. And to make this all the more of an awesome notion, let's take an arbitrary website. Tell me your favorite website. Anything? OK, that actually lends itself to discussion. As many of you probably saw something like this, or even better, nothing at all for much of today. As of this morning, FAS's web servers, rather ironically, given tonight's topic, are not working. Fortunately, we are outsourcing your final projects, as you already know, to a third party host. So that actually works out well anyway. But if you've had trouble submitting to the drop boxes, accessing your FAS email, or visiting the course's website, you may soon be seeing messages like this. Hopefully, they'll be gone within a few hours, or certainly by morning. If you had trouble submitting anything because of this, just email us or call us when you can. Let us know, and we'll work out the details, since this obviously isn't your fault. I need your second favorite website tonight. Good one, weatherchannel.com. So weatherchannel.com has today's forecast. And more dramatic than today's weather will be the stuff behind today's weather. So this is just a website I've pulled up using Internet Explorer. I've gone up to the View menu, up to Source. And what is this stuff that I've just pulled up? I'll be it in rather small text. So this is the source code, so to speak, underlying weatherchannel.com. HTML or XHTML are the languages in which web pages are written today. And you'll often see coupled with XHTML or HTML a language called JavaScript, which you see some snippets of above here. You'll see a language called Cascading Style Sheets, a language of sorts, which we'll also introduce tonight. And sometimes you'll see other types of technologies underlying a web page's design. The takeaway, though, for this introduction is that that front page that you yourself might pull up every day should not have this many blank lines in it. This perhaps could be our example of bad design, although let's see, we can scroll over. Yeah, no, it's not even over there. So by the end of tonight, you will be able to make things that look like this. So if that's not already enticing enough, let's motivate this discussion with some questions. So a website, what is it? A deceptively simple question. What's a website? Yeah. All right, good. So it's a bunch of files that you download. That sounds awfully like my email. If I download, say, attachments from an email. So what's a website? How's a website different from attachments, files that I might download from emails? So it's viewable by anybody, so there's this public aspect to it, assuming you don't have usernames and passwords. The web itself, we said in lectures one and two, is a service, really. It's an application of sorts that runs on top of the infrastructure that we said was the internet. Tonight's focus then will be entirely on how you can make use of that service, the worldwide web. Put yourself out there. Put your business out there. Put your photos out there. Put your anything out there in a form that for the most part is completely publicly accessible. And next to email, the web is probably the most popular use of the internet today, be it to check today's weather, the course's website, or any number of websites out there.  So this is a photocopy of an article for Money Magazine, sort of strange to be in a CS class, getting photocopies of Money Magazine. But what they had in their most recent December issue was a little hand-holding article called Defend Your Virtual Home. And it's essentially a walkthrough of all the kinds of things you can do or should do with respect to your security and privacy on the internet, all of the things you shouldn't do or should not be able to do on the internet with regard to your security and privacy. So we offer this tonight, as well as the following recap. Since we saw some looks of fear and some comments of fear based on the last couple of lectures in which a few of you seem to have left sort of more scared about what your computer can do or what it might be doing unbeknownst to you than when you walked into the door. And those lectures were not designed to scare you off of that machine or make you absolutely paranoid to use it, because there are, relatively speaking, some pretty simple things, some pretty common sense things, easy things you can do to generally practice safe computing and not have to worry so much about what threats might be out there. So just rapid fire, what are some of the threats or some of the concerns that you might have or face when using your computer on the internet, as you know them or as maybe we discussed in previous weeks? What might you be worried about? Getting? Adware, spyware.  So what can you do? Well, this article offers a number of bold suggestions, which we might go through rapid fire just to say what we or what I agree or disagree with. But frankly, and this, again, is fairly subjective, I would say that the only types of things that you should really bother doing or the only things you need to do to keep yourself relatively secure these days is have some kind of anti-spyware software installed. And I mean, personally, I use spybot. Why? Because it's free, it's relatively easy, it's updated pretty frequently, and that's sort of enough for me. And spyware can do any number of things, most of which tend to be bad. What about antivirus software or antivirus slash worm slash spyware software? The words used to describe these packages these days are becoming sort of overly specific or underly specific insofar as they do so many things. So these shrink-wrapped boxes that you might buy these days might not fall perfectly into these categories, but it's the spirit of the software that's important. What do I use, personally, for antivirus? AVG, which is the thing we link on the course's website. Why? It's free, it's easy, it's pretty often updated, and it certainly does the job presumably as well as some of the more commercial products. By contrast, Norton antivirus is popular, McAfee virus scan is popular. Many of you might already have those on your computer because you bought it, or a lot of computers, Dell, IBM, sometimes ship with this software these days. The only reason I tend not to like the products that you tend to pay for is that they tend to do too much, and they try to do too much. And you get too many of these prompts. Even when we use Dawn's computer in class, there were a couple of pop-ups that were coming up, not from spyware, but from the anti-spyware software. And personally, that's a nuisance, I think, certainly for me or potentially for people. And the reason that you get these kinds of pop-ups is that software like that, typically that you pay for, tries to do too much in that it tries to infer even more about what's going on in your computer and therefore tends to err on the side of paranoia. The downside, or the flip side, of course, is that if the computer thinks something bad might be going on but isn't sure, well, it punts. And it punts by giving you a pop-up and saying, I don't know if this is bad. It doesn't seem to be such a good thing. You now decide yes or no. Do you want the action to proceed? Frankly, if you get too many of these false positives or prompts, they just tend to get in the way, I think, of actual good computing. And so that's why we at least in the course recommend these free solutions, which do enough and at relatively low cost to you in terms of nuisance. Other things you should do. What about these wireless routers that a lot of you have? What do you need to know or bear in mind when using these things in your home or office? So people could be hacking them and taking your information. Let's be more specific now. What does that mean, to be hacking them? Good. So the example we concluded with at the end of lecture nine when Dan brought up the laptop was that packet sniffing example, where while I was speaking, he was sniffing some of the packets that my computer was sending, the result of which was he had a list, a veritable list of everything I had done in the past few minutes. And we pulled out a couple of examples of, I think, the websites that I had just happened to visit. That you are particularly vulnerable to wireless packet sniffing when you're using an access point that doesn't use any sort of security. So anytime you go to some internet cafe or some airport or some hotel or, frankly, you just haven't gotten around to paying for internet access in your apartment and you see a list like this, not only with one access point, but with half a dozen, all of which might have good signal strength, realize, and we unfortunately only have one that's proximal, that one on the wall, but in your apartments and homes, you might see others. And certainly when you're traveling, you might see others. And ignoring for now the legality of tapping into someone else's paid for internet connection, if you just arbitrarily connect to one of these access points obtained via DHCP, automatically an IP address, through that access point via which you can access the internet through that person's connection, you have to be aware that anyone else who is similarly connected to that access point, or even the owner of that access point, could be sniffing, logging, watching everything that goes through that access point. And you just have to bear that in mind. For the most part, that's probably not such a huge deal, right? If you're pulling up weather.com, you probably don't really care if someone else knows that, even if you might feel a little violated so far as privacy goes that someone is bothering to do that. But when it comes to sending instant messages or emails, then you want to be a little more careful. But fortunately with email in particular, there exist protections here. When you check your email, depending on the server, you can sometimes visit your web mail, for instance, not via HTTP, but via, for instance, HTTPS. And you might be able to do this these days with Hotmail and or Gmail and or AOL mail. It depends on the services, whether or not they provide this feature. But if you see a URL beginning with HTTPS, be it a website for e-commerce or an email, web mail based system, well, then you can trust that even if your transport layer is insecure, that is your physical internet connection might be vulnerable to attack. Well, it doesn't matter for all intents and purposes if your connection from point A to B is itself encrypted. Alternatively, what can the owner of an access point do to provide some degree of protection for his own use of his own access point? Yeah, so you can turn on encryption for the access point itself, which means the connection between my laptop and the wireless antennas is secure. You have to bear in mind, especially if you're using someone else's internet connection, someone could be packet sniffing from the wire or anywhere else on the internet if they have physical access to that. But again, thinking pragmatically and realistically is someone really in the middle of the internet going to care about what websites you're visiting or what instant messages you're sending? Probably not. So it's sort of a calculated risk that you're facing. But certainly your whole traffic is not vulnerable to interception in this room. And that arguably is much more common when you sit down in an internet cafe or some other such public place today. But you have to realize when you have these wireless routers, you have two options, WPA sometimes and WEP and sometimes WPA2, which is a newer version of it. Which of these is the worst of the two? WEP. So it is fact that given enough minutes and the right software, one of these guys right now could be sitting here figuring out the WEP key to some local access point if it showed up in their neighborhood. Unfortunately, there are a lot of routers, sometimes the cheaper ones, though as technology progresses, this is becoming less of a problem, that only support WEP. And frankly, if you're worried about this in your home, worried about just neighbors being nosy and so forth, you might as well spend the additional $20 or $50 and choose a router that on the box specifically says it supports WPA. Since if you use a passphrase or a key that's long enough, if you use the key phrase 1, 2, 3, 4, even if you're using WPA, doesn't take long for someone to figure that out. But if you use something that's 10 characters long or 20, bearing in mind, you don't have to remember this thing because you type it into your computer once and it remembers it. Well, that's certainly a good and easy step for you to take. Well, turning our attention momentarily just to this article, you'd certainly read this at your leisure, if you would like. But just to debunk or validate some of the suggestions they make on the very first page of text, which is page 122. So the fix, keep your computer up to date, is a suggestion that Money Magazine makes to you. What does this mean? Well, this means in Windows and macOS, turn on automatic updates. For the most part, for the typical user, that is a good thing. Because often, the updates that Microsoft and Apple force down to your computer when you turn on automatic updates are in your best interests, so far as security goes.  So for someone who runs a business and a bunch of servers, those types of people probably don't want to turn these things on, only because sometimes improvements, things that are meant to be improvements, end up breaking things. And at least in some environments, that's not acceptable. But for a typical user, I would say, turn these on. And in fact, if you have something like Windows XP2, Windows XP with Service Pack 2, it probably is on already. And how do you find out? You can go to the Security Control Panel under Windows. And macOS has something similar. Bullet 2, use security software, dot, dot, dot. Sure, I concur with that based on what we said earlier. But don't depend on it. Useful. They can't really trust it. That's where I think you interject your own common sense. Don't click dangerous links. And don't click bogus attachments or risky attachments. This is a tricky one. Column 2, take away your PC's superpowers. What this means is that when you log into your PC usually, you have administrative privileges, which just means for the most part, you can install software. Unfortunately, ideal as this idea is. And this means create a new user called mail-in-to and only give that person user rights, not administrative rights. It just means that I can't do as much with that account as I might otherwise with an administrative account. Unfortunately, a lot of Windows software might break or might not operate correctly if you don't have administrative privileges. So realistically, I don't think this is a good option. So you'll hear it a lot. But in practice, it tends not to work well, at least for people who like to install software pretty often or uninstall things. Finally, get a router and lock it down. We touched upon that. Be careful at the coffee shop there, too. Just know. Don't be scared. Don't be paranoid. But just know what the risks are when you sit down and connect to a wireless access point and realize that if you have one of those T-Mobile hotspot accounts via which you log in, remember that you're logging into a web page when you do things like that at Starbucks. You are not logging into the access point. Starbucks access point, correct me if I'm wrong, is not secure in the WPA or web sense, which means, yes, you're logging into Starbucks or T-Mobile and saying, I have an account with you. Therefore, let my internet traffic go through. But you're not encrypting it in any way. So just, again, be mindful of the distinction.  When we had that discussion, passwords like 1, 2, 3, 4, not so good. We're using passwords on multiple sites, not so good. Post-it notes with passwords on your monitor. Not ideal, but realistically, if you're not worried about the people in your home or office compromising your information, better to write the password down on a post-it note than to forget it altogether or to choose one that's so easy to remember that it's easy for someone else to guess. And finally, know how your computer watches you. So again, this is one of these concerns about cookies, which tend to be a good thing, not so much a bad thing. But we had that discussion a while ago. Shred or smash when you get rid of your computer, sell it or whatever. You know from last lecture how you can wipe the data, at least with free software. Rarely do you have to pay for any of these protections. And finally, don't assume you are anonymous online. And you've seen that too. Just as we knew exactly when students were accessing the website, we also, for the most part, knew what their IP address was, what their host name was, what their browser was, who their ISP was. And if that same student subsequently sent us an email, bear in mind that we could correlate that kind of information with the headers in the email and infer who it was that was visiting the website. So just realize that that kind of information is out there. So hopefully, long story short from Lectures 8 and 9, it's fine if you were spooked. But don't be spooked so much that you think that this is an untenable situation. With that said, questions? All right, so let's go figure out how to make weatherchannel.com and the like. So we know what the web is. It's a service. It's an application that runs on top of the internet. What then is a web server? Won't work tonight to look at the slide, right? What's a web server? Good. So it's just a server that holds information in the form of files. And those files are served by this server, this web server, to users that visit it. The relationship that we'll be focusing on tonight is pretty much that between web browser, like Netscape, IE, Firefox, whatever, and web server, popular incarnations of web servers just so that you've heard it before, or something called IIS on Microsoft's platforms. So if you have a web server running on a PC, it's probably Microsoft's, Internet Information Services software. If it's running on a Unix or Linux computer, it's probably something called HTTPD, which is made by Apache. Free software, it's probably fair to say that many, if not most, websites these days are run by Apache software or something similar in spirit, unless servers are themselves running on Windows, in which case you might instead use something like Microsoft's hardware. Nice thing is about the web and about website development. It doesn't really matter what server you're running on, because for the most part, any platform provides the basic set of features, for the most part. Certainly at the level that we'll be focusing on website development in this class. So a server is a computer, or at least it's a service being provided on a computer. When you log into a server, you have some kind of hard drive there, one or more hard drives, the root of which we often call forward slash. That denotes the root of a hard drive, or we call it in the Windows world what?  So just a single slash, usually in the world of Unix and Linux, which is what we'll focus on, because it's more common, and it's also what we'll use for the final projects. This denotes the root of the hard drive. Well, beneath the root, you might have folders for a whole bunch of users. This might be Malon's directory. This might be Ray's directory, and so forth. And this might be called our home directories on the server. We log into the server via SSH, like you might have done before. And when you log in, you have access to files on the server, which might be laid out as follows. Well, this is useful so that you can store files, but you also want your files to be publicly accessible. So on a system like www.fas.harvard.edu, anything that you see on my website on that page is actually in a directory called by convention public underscore html. All that is is a folder in my account. And by definition of a web server, anything that's in this folder will be publicly accessible. And presumably, there's html pages. That is, web pages, files written in html in that folder being made accessible to the world. This is the setup you see on a shared server, like Harvard's, the result of which is that you would visit my web page here as something like www.fas.harvard.edu slash tilde mail-in.  So that's all fine and good. And I would show you this if fas were actually working. But we're going to outsource everything tonight, which is just as well, because this arguably is not the sexiest of URLs. Imagine telling people to visit me at www.fas.harvard.edu slash tilde m-a-l-a-n. No one's ever going to visit. Even if it's just mail-in.com, it's questionable whether anyone will visit. But certainly, this is not memorable, and it's not sexy. And this is why in the final project this year, for the first time, have we migrated to this third party hosting approach whereby each of you were invited to buy your own domain. And based on the final projects, part one that have been coming in, most of you took that route rather than the fas route that you were certainly welcome to just work on the local system, though not today. Much more exciting, I think, this year than in past years is that you'll be able to and will be helped in setting up your own website on the web. And even though we saw in the final project proposals that some of you have sort of been wondering, OK, that might be all fine and good. Why? Who cares? It's certainly the case that more so than in years past is this question of, how do I make a website becoming a much more common question? And fortunately, it's becoming a much easier question to answer. And so for those of you who are thinking, all right, this might be fun to make a website, but why would I ever want to keep running this website? Do realize, especially, ideally as an alum of this class, that if there comes a day where a buddy of yours says, hey, do you know how I can make a website or where I begin, you'll at least exit this class, not only with Savvy on other topics, but with an answer to that question. And with the experience of setting one up yourself, you'll find that, one, it's not that hard. And two, even if it's a little self-indulgent to put a lot of photos of you and your friends and your trips on the web, even if no one ever visits it, I certainly feel and think personally, there's this coolness factor with having my website.com out there. And if nothing else, it should be a proud little moment for you to share with just some family and friends and say, hey, look at me. I'm on the internet. Could you even fathom me having done this a few months ago? And if we can make a few of you feel that way, then hopefully our job will be done well. So with that said, how does one go about making a website in the real world? This is all fine and good. And most of the setup that you'll do if you use your FAS accounts, which I'll refer you to the Teaching Fellows in section in workshop for what steps are different here. If they're fundamentally the same, just some of the names of the directories and so forth will be different, where do you begin? How do you set up a website? Well, fortunately, you can already answer the first question. How do you begin setting up a website? This isn't that self-serving of us. There are other ways to answer that. So what's the first step in setting up a website? What do you obviously need to do? You need a domain name that's not taken. How many of you found a domain name on the first try? Oh, that's pretty good. I've sometimes spent hours on projects just trying to figure out a good name. How many of you spent more than just one try finding a name? Wow, so that's impressive. So maybe I'm just not very good at this. That could be the explanation. All right, so you've got your domain name. Well, what does that mean? Well, we sent you to godaddy.com if only because, one, we've used it ourselves. And two, it does tend to be very popular, even though hopefully you realized how ridiculous all of the bye, bye, bye splashy banners were on that website. I mean, they make it hard to find how to just check out without paying more than $8.99. But again, that's sort of a lesson unto itself, navigating what's there, say, a poorly designed website from a user's perspective, but a brilliant design from someone who's trying to upsell your perspective. So with that said, you check out. You now own mailin.com, for instance. And what does that mean exactly? Well, what you have just done is registered with an authorized authority, that being godaddy, your domain name for a year. You effectively have ownership of that for at least a year, assuming you paid for just one year. What godaddy then does is registers that name with the authorities that run the internet so that effectively it is reserved for you. There has to be some kind of agreement in the world. Otherwise, this whole system wouldn't work. If someone from this country could buy mailin.com, someone from another country could buy mailin.com, the whole setup just doesn't work. So there is something going on behind the scenes when you buy that domain name such that the world effectively is being informed that you now own that name. And no one else, even if they go through some other registrar, can buy that domain name. Well, what then is step two? You own mailin.com or some such domain name, but that's not a website in and of itself. That's just the name. And that name might be used, yes, for a website, but it can also be used for email or for FTP or SFTP or any other service you might want to provide. We in the course will do web and email since they're the two most popular, but you can do anything with that host name that you can do with the internet. If you want to set up a website, what, based on what you might have inferred from the project spec, do you next need to go find for yourself? So you need a host. And this in and of itself is kind of an overwhelming thing which we've tried to save you the headache of. If you Google the term web host, which is the common moniker given to people who give you the ability to map your domain name to a physical server like this so that you can actually host your content to the world, if we search for web host, frankly, it's just overwhelming. Like, where do you begin? This is just the first page of results.  You might have seen that GoDaddy itself offers web hosts and they might be fine. Dreamhost.com is the host that we're currently using for a number of reasons, not the least of which is the fact that with our one account can we host an unlimited number of domains. Now, this is kind of the exciting thing, exciting in a geeky way, because of all of the competition out there for web hosting. And because of the relative cheapness of providing web hosting services today, you get ridiculous deals. So for instance, this is dreamhost.com. And you yourselves will not have to visit this website per se. But just to give you a sense of where we began so that you could repeat these steps, if you signed up for a host not through us, but through on your own, we signed up for, I think, a one-year or monthly plan, which I think we have the code monster plan, which as you would see, it's now cheaper than we're currently paying. That's wonderful, just like that computer of mine. If we scroll down, so we're in column three here, level three. So it's $15.95, $19.95 a month, $20, not horrible. A lot cheaper than your internet service, probably. What are we getting in our account? Well, we have a 97-day money-back guarantee, if we're very disappointed in your submissions. We have 24-hour, kidding, technical support, so forth. But what's more interesting? 400 gigabytes of storage space. So even though some of you might have thought it was kind of neat that we offered you in the spec a gigabyte of storage for yourself, we're actually keeping most of it for ourselves.  As though that weren't good enough, every week, they're apparently throwing two gigabytes more at us. So monthly bandwidth at sign up. This, too, is good, especially when our podcast was formally hosted in this account, four terabytes per month. A terabyte is how many gigabytes? 1,000, or 1024, and a gigabyte is how many megabytes? 1024, and a megabyte is how many bytes? Or kilobytes. I'm not following the pattern here. 1024, and a kilobyte is how many bytes? 1024. So we're talking about a trillion bytes per month, four trillion. In fact, we don't foresee us going over this, even with all of these websites being hosted. And long story short, you'll see a whole bunch of other services offered, features, some of which are more marketing-speak than they are actual features. But things to bear in mind when you're signing up for your own web posts is what kind of email support might I get? Sort of closely coupled with the idea of having a website is having email addresses in that same domain. So the options that you have when setting up email are most popularly something called POP, if you'll recall, and IMAP. Think way back to lectures four and five, what was the distinction between POP and IMAP, as you might recall from your reading or from class or experience? Sort of a useful thing to keep in mind. POP doesn't quite forward, but if you think of the acronym as implying that it pops mail off the server, it does do that. When you have a POP-based email account, david.mailin.com, what that means is when you check your mail, your mail is being copied from the server down to your local client. And then depending on how you've configured your email client, it's sometimes or always deleted from the server subsequently. The result of which is you have your email on your local computer now. But if you or one want to travel or check your email from home and work, if you subsequently try to access your email from your work computer, what will you see in your inbox? Nothing. And that in and of itself, especially as people become more transient in their internet usage, that in and of itself can certainly be a nuisance. My mom for a while only could get POP email access from her internet service provider. And this was just a common frustration, because if she'd go visit family sometimes out of state, she would then have no access to her email because it was on her local client. Oh, well, one obvious solution is don't let it delete from the server. Just leave everything on the server and on your client. What becomes problematic in that case? Sorry? Double, you have this inconsistency problem. Plus it becomes annoying if nothing else, that you have all these old emails sort of intermingled with emails you might still care about.  Yes, with your Gmail account, no with your Comcast account. The result of which is that you'll be forced effectively to eventually start deleting emails and attachments, big emails and so forth. And that too can just be a nuisance. So by contrast, IMAP still lets you access email, but it maintains synchronicity between your client and the server. Which is to say, if you check your email from home, not only will the emails be downloaded from your computer, they'll remain on the server until you delete them from your client. The moment you hit Control D on your client, a message will be sent to the server saying also delete it from the server. And in this way, do you get synchronicity between the two? The result of which is if you then check your email elsewhere, either with Outlook or maybe Webmail from your ISP, what you see in your inbox should be exactly what's sitting on home as well. And if you make changes while at the office to your email account and then log back in at work and pull up Outlook or whatever program, the moment it connects to the server, even though briefly you'll see old messages, they should disappear, assuming you've deleted them elsewhere. And it does automatic synchronization. Long story short, if you have the option for IMAP, it certainly tends to be better these days. And I would certainly, if choosing to host a website, look for IMAP as a feature. It's not uncommon, but sometimes it's not, in fact, offered. So beyond that, the rest is sort of icing on the cake. If you're a real web developer and you really want something technically specific, the rest of these options might be of particular import to you.  And that's about it. Well, what do you get once you sign up for an account? If I scroll down here and said, sign up now, as we, the course, already have, you would receive some kind of account from dreamhost.com. And you would receive a username and password. You could then log into Dreamhost's account. And you can specify, I want to now start setting up mailin.com. And the neat thing about Dreamhost, for instance, and we don't get any kind of kickbacks from Dreamhost, right? We're paying them. So let's this come across as an advert, like our Coke and everything else in American Express earlier tonight. We don't get anything out of this. They're just good to use. You can host an unlimited number of domains with Dreamhost, which is sort of crazy, which is how we're able to host 30-some-odd websites using this account for the purposes of the course. Well, what we're doing and what these guys are currently doing, hopefully, is creating your Dreamhost accounts based on your submissions of final project part one. What you'll receive by email for most shortly is exactly what you see on one of tonight's handouts, which is about final project part two, which you should have in your hands. Yes? No? Yes? Yes? No? No? Yes? No? Problem set about exam two. That's exam two. We should have one final project part two. Surprise. OK, available on the course's website, though not tonight, is the second part of the project. Sorry, it didn't seem to come back from the printers. So that's OK. It's on the web, in theory.  And on the final project part two, which dare I try to access it now, let me pull it up for just one second, because this will be helpful as a walkthrough for your own final project. So I am just using secure FTP to access the course's account via a protocol, a service, SFTP, which for whatever reason is working today, even though the website is not. I'm going into our final project directory, grabbing the spec, putting it on the desktop, and opening it here, and what you should have in your hands had it come back is the following. So the top part of this document specifies these fields. So what you're going to get from us shortly is an email, providing you with a reminder of what domain you bought, which should not be new information, the email address that you requested we set up for you, and a password that we're going to set up for you. Mind you, as we say in a footnote here, emailing around your passwords is in stark opposition to the recommendations we made two weeks ago. However, with a class of 50 students, the fact of the matter is it's much easier to email you all your passwords than going around whispering it in your ears or calling you on the phone with the password. We are going to hope that there's no bad guy sitting between you and us when we send these emails, but realize this is not best practice. So frankly, the odds of someone being really interested in stealing the information you're about to make publicly accessible on the web are probably not such a concern, but realize the hypocrisy in this. So we're going to give you that information. We're going to give you this. cms.dreamhost.com is the server on which all of your websites will be hosted, more on that in just a moment. So what that means when we signed up with Dreamhost, we were given an account on a server called cms. We are similarly going to create other accounts for you such that when you log into cms.dreamhost.com using your FTP username and FTP password, which will also provide you in this email, when you connect via SFTP, you will see a root directory as though that's the server. But the nice thing is about this setup is that what you'll then see is three directories, two of which are irrelevant, one of which is relevant, which is simply going to be called domain.tld. Where domain.tld is whatever you bought. What that means is that when you log in via FTP, which if you haven't used it before, it's one, very easy to use. Two, we'll do it in section and or workshop in the coming week. You will have this folder and anything you put in this folder will become accessible on the web. Specifically, it will become accessible at www.domain.tld, or just domain.tld. It's literally going to be as simple as that. The reason that you get this illusion as though you are the only domain on the server is because Dreamhost, like most every other web host out there, supports what's called virtual hosting, which essentially means they use one server, for instance, cms.dreamhost.com, to store a whole bunch of websites. But they configure it in a way that creates the illusion of each of these domains, essentially being its own web server, even though it's being co-hosted with a whole bunch of other websites. The upside of this is that relatively cheaply can Dreamhost host a whole bunch of websites. The downside, potentially, is if your account is on the same box as a really popular website, or whatever it happens to be, well, your website might be slow. And so what you have to realize is that even though we're only paying $20 a month, which is pretty cheap, you can pay $1 a year with some web hosts these days and get your own web host with like a gig of storage and unlimited email addresses and so forth. But you really get what you pay for. I was doing this for a year with a site just personally that, frankly, if it went down, the world would not notice. And that was fine. It was just a test website I was playing for. But I got what I paid for. Within two months, I had lost my dollar and all of the content I had uploaded to the server. But if you do this on your own, certainly beyond this course, just so you have some other options in mind, Dreamhost is fine. Other ones that personally I've used, if you want to keep them in mind, thehostgroup.com has been good to me. A very popular one is called pair.net. If I'm getting the domain name correctly, that's more of a high volume type website, way more than someone like an individual person might likely need. And there are a whole bunch. Oh, there's another one I've used, erice.net among the weirder ones. But it's like $10 a year. So if, again, you want an account that you don't really care about, but it's useful to have for maybe a secondary email account or some basic web space, those guys have been good to me as well. And I point these out only because there are so many damn options on the web that finding a web post is sort of a challenge sometimes unto itself. And the best solution to that problem usually is asking around for recommendations, people at work, friends, and so forth. All right, so you will get, and if you do this outside of this course, you will similarly get all of that kind of information, login information after you've bought your domain. So what do you have to do to tell the world that subsequently, mailin.com or domain.tld needs to point very specifically to that server?  Would anyone mind revealing your domain name so we can pull it up? OK. .com? So if you just bought your domain, and you might have done this already, you'll see a page like this. This means your domain is currently parked, quote unquote, at godaddy.com. That just means you don't really have a web hosting account with GoDaddy. They just by default have chosen to proclaim to the world that this domain is owned by someone and it's parked at GoDaddy. The alternative would just be to display an error message or nothing at all. This in and of itself is not particularly useful, except it's a wonderful ad now for GoDaddy services. So that's not useful. And we're not going to put our files on GoDaddy. Rather, we're going to put them on Dreamhost. So what do you need to do at GoDaddy? Well, the only thing you'll need to do and the spec to will remind you of this process. And this too is exactly what you would do, not just for E1, not just for your final project, but for website development and hosting in general is the following. You would log into whatever site you bought the domain name from. You're going to type your username or customer number, which I can't remember, so I wrote it on my laptop there. And I'm going to paste this in here. And I won't tell you our password, but I'm going to log in to GoDaddy.com. And again, the spec, which you'll soon have in your hands, will walk you through this. You'll go up to Domains, My Domains. And this, of course, will vary based on registrar. But frankly, there's little reason not to just keep using the same registrar with which you're already familiar. It's hard to beat $10 a year.  So mailin.com, unfortunately, was taken. But I did go out and get us mailinrouge.com. This, of course, is a pun. I was not so clever as to come up with this in office made of mine when we were first choosing our desks four years ago when I returned to grad school, plastered a sign over my desk saying, this is mailinrouge's desk. So I thought we'd go with the domain name. And notice, I splurged a little bit, right? I wasn't happy with just the .com. Fur vanity's sake, or also just discussion's sake, officially. I also bought the .net and the .org. Maybe easy question, but why? Yeah? Mm, good. So one, if people mistakenly type the wrong one, at least you can map that to your own domain name. And two, it's not uncommon for people to buy bogus domain names or domain names with slight misspellings or just different TLDs just to make fun of some company thinking that make fun of or just make money off of sites where you pull up a slight misspelling of very popular websites. You usually get some kind of advertisements pushed at you. If nothing else, this slightly discourages it.   So I didn't go that far in this case. But what I did do was I did go this route for tonight so that we could show you, if you did go this route yourself, well, how you can map all of those domains to just one. And the simplest way to set up that, as well as the simple task you must achieve to map your domain name to your server, is the following. When I pulled up my account and went to my domains, I see this page. And you too will soon be doing this at home. You will then simply click on the domain name that you want to modify. I'll go with the .com and make that my primary domain. You'll see some scary looking information or just a lot of details, almost all of which you can ignore. Because the only thing you'll need to do is the following. There's an icon up there called name servers. And you're going to click this. You're then going to see a form that looks like this. And the only thing you have to do, henceforth, I go daddy, until you want to move your website elsewhere or renew your domain name, is fill in these top three boxes to be very specifically ns1.dreamhost.com, ns2.dreamhost.com, and ns3.dreamhost.com. NS stands for name server. What this is doing is the following. It is informing the world the moment I click OK that, yeah, I bought mailinruse.com from go daddy, but that's uninteresting. What it's telling the world is that, henceforth, any requests by some random internet user's laptop or desktop for mailinruse.com should be referred to one of these servers at dreamhost.com. Because guess what? Dreamhost is going to do for us. Well, when you visit www.mailinruse.com with your browser, that's not sufficient to getting from point A to B. What does your computer need in order to visit what is mailinruse.com? Think back to our envelope passing a while back. The server, the address. What kind of address? The IP address. When we talked about routers, those big computers that have tables that decide whether the packet goes this way or that way, they had tables that essentially relied on the use of IP addresses. Saying anything that starts with 1.40.247 should go that way. Anything that starts with a different number should go that way. Well, your request for mailinruse.com needs to get translated to an IP address. A DNS server, aka name server, is what does this? The sole purpose in life, for the most part, of a DNS server is to answer questions of the form, what is the IP address of mailinruse.com? What is the IP address of weatherchannel.com? What is the IP address of cnn.com? And it can also reverse the answer. You can say, here's an IP address. What web server does this belong to? So that's useful because it means you, the user, never have to know what's going on underneath the hood with IP addresses, with routers, with the internet. And it's what ultimately makes the internet work as seamlessly as it tends to for typical users. So at the moment I click OK, I am now telling the world that any requests, be it via email, or web, or instant messaging. If I'm running my own instant messaging service, any such request for IP address should be referred now to Dreamhost. And Dreamhost is going to tell the world what mailinruse.com's IP address is. And it's specifically going to tell the world that the IP address of mailinruse.com is identical to that for cms.dreamhost.com. So this is what it means to be virtually hosted. The official name of the server on which my website will be hosted will be cms.dreamhost.com. Could be anything else. Could just be a specific IP address. But for now, it's cms.dreamhost.com. But because of DNS and because of virtual web hosting, as it's called, multiple host names, mailinruse.com, rayds.com, dan.com, can all point to the same server. And it's because DNS servers ultimately tell the world what IP address relates to a domain name. So if that DNS server at dreamhost.com, for everyone in this room, as of tonight, starts answering questions of the forum, what is David's IP address? What is Dan's IP address? What is Chris's IP address? And gives the same answer to every query. And specifically gives the IP address of cms.dreamhost.com. Then all of our requests for web pages for students in this class will be mapped to the same server. And that server will then determine, based on what name was requested, whose directory the request should be sent to. So let's validate this. So I'm going to pull up a command prompt in Windows here. I will make this slightly bigger and change our font size to something a little larger. And what I am going to type is nslookup cms.dreamhost.com. Enter. This program, which is available on many computers, translates cms.dreamhost.com to its IP address. How does it do that? It asks the nearest DNS server, what is the IP address of cms.dreamhost.com? That's all. And in fact, it looks like cms.dreamhost.com has the IP address of <IP_ADDRESS>. Or yes, .29. Well, wait a minute. What if I similarly say, all right, nslookup mailinrug.com? If this demo works, what should I see? OK, so why might this be? So let's extract a lesson from this. Servers, turns out, can sometimes have multiple IP addresses, which is exactly where we're going with this. So this is why. That's always great when that works. So this is perfectly OK. Because even though my content will in fact be hosted on cms.dreamhost.com, it's possible for one, a server to have multiple IP addresses that both physically refer to the same machine. What does that mean? It usually means they have two ethernet cards. Sometimes for bandwidth reasons, sometimes for redundancy reasons, it depends. It could also mean that, just like FAS, allows you to access your files from multiple different login machines, it could just be that my files, even though Dreamhost has been telling us to go to cms.dreamhost.com, there might be other servers that provide me with access to my files. The short answer is it's unclear from what just happened which scenario it is. But when we do finally pull up mailinrug.com, it will be resolved to that IP address, which ultimately will map to, somehow or other, the files that I put onto cms.dreamhost.com. And my website should come up. Well, let's confirm this. I am going to do the following. I'm going to, with our FTP program, which on the PC is SecureFX, I'm going to connect to cms.dreamhost.com as mailin, and then with my password, which I can't tell you. And notice that what I have here is a layout that looks very similar to this. And I said there's three folders, but I said ignore the other two. Well, there are the other two. You'll have this too. One is called logs. One is called mailder. Mailder, as you might guess, is where your email is going to end up. But for tonight, we're just going to go into this directory. And it looks like there's three files in there. For now, let's ignore that. And let's instead open up a local copy. How do you make a website? Well, quite simply, I am going to open this file. And this will be a little teaser before we take break. Every web page you make in this class will start with this scary sequence of three lines. OK, personally, I never remember how to type these lines. So I always copy and paste them from a previous file. So don't be daunted by this. And this is actually a little small. Let me very quickly make this a little larger for us. Let's make this, let's see how we do this. Document classes, HTML. What you will see, there we go, we recommend in the final project spec that you not just use programs like Notepad or similarly cheap and dumb programs, because it'll just be black and white text. The nice thing about a program like I'm using TextPad, which we refer to in the spec, is that it does something called syntax highlighting, which means all of the interesting parts of your documents will be highlighted automatically in a different color. Well, how do you make a web page? Here is your first introduction to making a web page. Every web page starts with that. And we'll take the hood off of this example after break. But I'm going to say this is mail in Rouge, title, I'm going to say head. I'm going to say body, bg, color equals white. Then I'm going to say image, source equals mail in. I will just say hello. Welcome to mail in Rouge, exclamation point, slash body. I'm going to delete some blank lines. You don't have to be writing this down, don't worry. And I'm going to go to the file menu. I'm going to save it. I'm going to call it test.html. I'm going to hit Enter. I'm going to go back to this FTP program. And quite simply, all I'm going to do, and you shouldn't be seeing that in advance, is I'm going to drag test.html to my mail in Rouge.com directory. And notice that it appears at right. Now it's over here, which means it's on the server. So now I'm going to go up here and go to mailin Rouge.com slash test.html. We'll try the little finger crossing, since it works so well last time. When I cross my fingers and hit Enter, what should I now see? What I just typed. All right, one for one tonight. So I have just made a web page on the internet, not that hard. Also not that dramatic. So just before we take our break here, let's suppose that I know a few more HTML skills, which, within an hour's time, you too will, what do I need to do to enhance this thing? Well, let's forget about the text. And let's instead use an image that I spent far too much time on Photoshop with and insert this mailin Rouge.jpg, whatever that is. Let's go ahead and refresh it. And I'm going to re-upload the file to the server, because I've just changed the local file. If I refresh this, nothing material has happened, because I haven't changed what's on the server. So bear that in mind. FTP, I'm going to take this file, test.html, move it over there. And now, prepare to be, you won't be amazed yet, I'm going to change the color to be black instead of white, so to make the website look so much better. I'm going to re-upload that just by dragging. That's all it takes. I'm going to go back to the website. Just like a web page you might visit, just hit refresh, and it'll re-grab the newest copy of the web page. And drum roll. Wow, look at that Photoshop work. Look at what I did for my latest problem set. So this is all fine and good, but who the heck wants to visit mail-n-ruse.com-test.html? How do you make it the default page? Well, it turns out that all you have to do is name that same file index.html, which on most web servers is the default page that a web browser will retrieve if you don't specify a file name. So if I want my so-called home page to be that same thing, I just have to rename it index.html. I'm going to center the image this time. And now notice that, one, test.html is gone. If this is a good lesson, if you see things like this not found, fortunately this error message, unlike some, kind of tells you what's wrong. The file's not there. You mistyped it. You had a space in the file name that you didn't actually type. You have different capitalization. These names are case sensitive. Well, now, though, because I named it index.html, I can just go to mailinruse.com and drumroll. There is our first website. Nothing more humble than that, right? On that note, why don't we take a five minute break? And when we resume, we will take the hood off of weatherchannel.com, so to speak, and show you how to make things far more interesting than that. All right. So in last hour's episode, we one, bought a domain name. We two, configured the registrar of the domain name to inform the world that the name servers that should resolve IP address queries for that domain name are at Dreamhost, specifically NS1, NS2, and NS3. We then set up our account with Dreamhost.com, such that I logged into my account, then I had gotten this username and password from my web host, and I simply started uploading files to the folder that my web host had told me to put all of my content in. So why did this not work when we did this whole IP address trick earlier? In other words, how is it that virtual hosting works, and yet the not seem to work in our demonstration a moment ago? Well, we've solved the problem. So when we earlier asked for the IP address of cms.dreamhost.com, we got back this number that ended in .29. It turns out that cms.dreamhost.com appears to be the FTP server for Dreamhost. And by FTP server, we mean File Transfer Protocol, which means this server's job in life is to allow people to upload and download files via an FTP client. And that's even better than a web page, which really only lets you download files in one direction, and it doesn't let you do this drag and drop and so forth. So that's useful for us so we can get our content there and back. However, the web server that is virtually hosting mailinruse.com and all of your websites henceforth is a different machine altogether, or at least a machine with a different IP address. And that IP address we saw was the one ending in .78. The reason I just came to this conclusion was by the following test. I simply brought up a web browser. And instead of visiting mailinruse.com, I decided, you know what? Let me visit the IP address that mailinruse.com actually is. So that is <IP_ADDRESS>. Enter. And I got this message. But mailinruse.com seems to be accessible. But that's OK, because the way we have our server set up is that my website is being virtually hosted, which means the only way to reach it is by its domain name, not by its IP address. The reason being, if multiple websites are being hosted on this server virtually, so to speak, well, which one should I expect to pop up anyway? And so the way Dreamhost has things configured, right?  But they just have this error message, which just means, what website do you even want, really? It's unclear. So that's to be expected. Now suppose I pull up not just the IP address of mailinruse.com, but this other one of cmiss.dreamhost.com, which recall ended in .29. Well, what led me to the conclusion I offered a moment ago was this. Nothing's happening, right? It looks like, and now it's just timing out. It's not doing anything, my browser, which seems to suggest that the IP address that belongs to cmiss.dreamhost.com is not, in fact, a web server. If it were, that should work. We should at least get something back. So the hypothesis I'll offer is that cmiss.dreamhost.com is an FTP server via which we and you will be able to upload and download your files, but only via which you'll be able to upload and download your files. To access your website, obviously you'll visit your domain name .com, but your website physically is going to be hosted on a different machine, whose name we don't care about, because all of that happens behind the scenes, seamlessly for you. But what is important to note is that even those cmiss.dreamhost.com's IP address refers to one server, an FTP server, and the IP address that apparently refers to my website is a different number or maybe a different server, they both have access to the same hard drives or to the same storage space, because obviously, otherwise, this would not work. And this is a common practice, to be able to log into multiple machines via maybe different protocols or services, but still have access to the same content. And that's simply the way their system administrators have apparently set things up. Henceforth, it's not interesting to you what your IP address is, certainly when you're hosting a website, because the DNS servers take care of all of that for you. Neither you nor your visitors need to know. So how do you go about writing something? This is like a web page written in Photoshop, right? I haven't really done anything interesting here. I've just plastered a big graphic on my web page. How can I actually start doing things with text and links and mail to links and other sorts of things? Well, let's start at the beginning. Here's where we began, which was with this XHTML, which I just whipped up pretty quickly. Even I copy-paste the first three lines, because I never remember them, and that's fine. In this class, we'll be writing XHTML, which stands for Extensible Hypertext Markup Language. Don't need to write that down, because you don't need to repeat it, but it's also on your jargon sheets. But if you can remember it, great. But all it means is that XHTML is a markup language. And as that kind of implies, it's a language. It's not a programming language. You can't make software with it, but you can mark up content and make things look bold, or big, or small, or blue, or red, black, or white, because you can mark up text. And you can include images and also sound and videos these days, and you do this by writing XHTML. As an aside, many websites, maybe most websites are written in a looser, less robust language called HTML, which just doesn't have some of the same constraints that we're imposing. But increasingly know that websites are beginning to be written more in XHTML, because it is a superior language from the computer's perspective. So for now, just think that XHTML and HTML are pretty much the same, except with HTML, you got to cut a lot of corners, and a lot of corners that, frankly, sometimes result in webpages displaying content differently. Because if you're being sort of lax with the rules, a browser has to make a decision as to what you meant. And sometimes Firefox, they will think you meant something different than Internet Explorer meant. But even besides that, you'll see as you develop your projects, dealing with browser differences is a pain. It is a nightmare, a headache. And sadly, it hasn't gotten hugely better over the years, where Microsoft will decide to implement some feature in one way, and Firefox will interpret that feature in another way, the result of which is your webpage looks different on different browsers, which means part of the development process. Certainly for corporate sites or sites where you care about the user's experience, you end up developing them with Internet Explorer open in one window, Firefox in another, a Macintosh computer on the other to run Safari. It really is an involved process, but it's really just a quality assurance process. And usually it's easy to fix inconsistencies, but you have to be aware that what looks right on your screen might not look right on someone else's screen. And that's important certainly for business sites. So what is all this stuff? Well, for now, just assume that the top few lines, four lines of any XHTML document you write needs to look like that. And don't worry about what it is, just copy, paste it. The interesting stuff and the stuff that you'll get to spend your time on are these things. So what immediately jumps out at you at what I've written here? Describe it in sort of high level terms. What's interesting about those several lines of code at the bottom? Everything I start, I end. Example? Title. I seem to have one instance of title and then another, but the second is slightly different. What's different? Close, we'll get the jargon right. Forward slash. Minor point and maybe religious debate more than an important debate, but forward slash same word. So each of these things that begins with an open bracket, as we'll call it, and ends with a closed bracket is called a tag. So when you write XHTML or HTML, it's all about writing not only your content, like the actual words the user sees, but marking it up with tags. And tags are not data so much as they are what a CS person would call metadata or semantic information, whereby it has meaning to the computer, but the user doesn't need to know that that tag is behind the scenes. So nothing in these open brackets and closed brackets actually should appear to the user unless you've made a typo, in which case it might actually appear erroneously. Any web page you write, besides starting with this crazy stuff, must start with open bracket, HTML, close bracket. It is a paradox that when you write XHTML, you must start your document with HTML. So be it. Any document you write must therefore end with open bracket, forward slash HTML. And this is sort of an easy trick to get used to. And this really is the difference between XHTML and HTML with HTML. You don't necessarily have to close your tags, so to speak. You can open them, but you never have to get around to closing them, the result of which it's much harder for a computer to parse, that is, read the web page. So we preach better of the two XHTML. So with that said, any tag you open, you've got to eventually close. And you've got to open and close it in sort of opposite order. So the first tag you open is going to be the last tag that you close. So everything gets nicely balanced in that regard. It's symmetric. The next tag you'll write after HTML is the head tag. And inside the head tag, so to speak, goes your title tag. And if you decide to write more advanced web pages that might have little scripts and programs written in JavaScript, sometimes in the head tag, well, you also have many programs using another type of tag. But for now, know that you simply must have a title tag. Below that, we're all done. So we close the head tag, so to speak. And then we open the body tag. We type whatever our content is for the body of the web page. Recall that originally it was something like welcome to mail in rouge, I think, something like that. Close body, close HTML. Now we have a web page. The two things, therefore, that every web page must have is a head and a body. Where is this head appearing? Stuff in the head, specifically the title tag, appears where on your web page. Did you notice? Very top in the so-called title bar. So notice that it is mail in rouge exclamation point. That's the title. And the only thing you would put in the title tag is the, oh, I see it's a different version here that I'm playing with. So let me, let's we wonder about the inconsistency. So the file that's on the server is this one, whose title is mail in rouge exclamation point. And that's what appears in the browser window. That's also what appears, notice, down here in the task bar on, say, a Windows PC. That's all. The body is where all the juicy stuff really happens. So let's tease this apart. I'm going to restore it to where it was a moment ago. So our original web page was white. And I simply said, welcome to mail in rouge. Let's go ahead and upload this thing to the server. Uploading is as simple as dragging and dropping. And we'll cover this in section and workshop if you are not so familiar. Let's refresh it. And here's the web page. Oh, that's not it. Let's upload index.html. It worked that time. And here we go. We're back to our very boring web page. So what can we begin to do to control the behavior of a web page? All right. Well, I deleted some of the interesting stuff, but I left one remnant, bgcolor. So whereas the name of that tag is the body tag, tags in xhtml can also have what are called attributes. An attribute is simply something that modifies the behavior of the tag. So bgcolor, as you might guess, denotes what? Background color. What you'll notice in xhtml is there are lots of nicknames really for things, because it's much quicker to type bgcolor than background color. So you just have to get used to some of these nicknames. bgcolor is an attribute, which means that it is something of the form name equals quote unquote value. The name of the attribute just tells the browser what behavior modification it needs to impose. And the value specifies how it should control that behavior. Put into a much more accessible context, bgcolor equals quote unquote white clearly means make the body of the web page have a background that is white. So to convince you of this distinction, what if we do, well, black? This is not magical at all. I'm just going to go back to the files. I'm going to upload index.html again, open my browser, refresh. Well, now we have a web page with, interestingly, a little bit of hidden text that you only see if you highlight it, which is kind of stupid. So that's not a very good web page. Pick your favorite color. Let's make it a little sexier. OK, so funny thing about xhtml, it only understands a fixed number of colors in words. So rouge, how do we get that? Well, let's compromise for a moment and just say, red? Get away with that, maybe. All right, well, let's go back to the file. Upload this. Let me clean some of this up and get rid of this. Reload my web page. Now we have an ugly red web page. How can we make more precise color specifications? Well, you all had the opportunity for a recent problem set to play with Photoshop. Well, buying a $500 program to figure out what you're about to see is complete overkill, since you can look this up on any web reference. But if you'd like to link your recent savvy with multimedia and now website development, one of the things you were able to do with Photoshop recall was play around with colors. And you could play around with the color wheel and the slider and so forth. And one of the details that you probably overlooked at the time was the following. If you choose that color palette, I'm using lots of words here so we can get through the startup process, if you choose the color palette on Photoshop, which was just this background foreground thing here, you get the little color wheel once your computer is done loading. And now we have a range of millions of colors. So let's pick something. Oh, I don't know. Where will you be happy for Rouge? Like, I don't. I don't. Down left? Yeah, that's good. Like there? All right. So Rouge. Now, how do I get that color? I can't just write Rouge as the BG color. But if you ever notice this thing down here, the pound sign, well, this is an example of a hexadecimal color code. Turns out you can write most any color, certainly, that you'd care to write, in a sequence of codes. This started with a sharp sign, followed by number, number, number, number, number, number, where each of these values is any number from 0 to 9 or A through F. We talked very briefly way early on about hexadecimal, I think. Hex meaning 16. So hexa meaning 16. So 0 through 9 plus A through F gives you the ability to count from 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, which is 16. But we're only doing it using these characters. Each pair represents a color. Have you ever heard the acronym RGB?  Using those three colors, can you create a whole range of colors by mixing them effectively, like you might paint? So similarly, can you specify colors in XHTML and other contexts, like graphic design, using hexadecimal notation, where these two digits tell you how much red you want. These two digits tell you how much green you want.  So if I just wanted red, I could choose the largest two values here, the smallest values for these other guys, which essentially means give me a lot of red, no green, and no blue. And so in my web page, it turns out, I could go back here and not write, quote unquote, red, which is a common enough color that XHTML knows what it means. But I could say, sharp, FF, 0, 0, 0, 0. I can save it. I can upload the file again via index.html. I can refresh my web page. And what should I see? Same ugly web page. Because FF, 0, 0, 0, 0, 0 means the same thing as, quote unquote, red. Well, now let's go to Rouge. So that was the request. I'll go to Photoshop. And again, there are better ways to find this. Usually a lot of HTML books will have references in the back to tell you the codes you can type for various colors. And that's a neat trick. I'm going to copy this. And I'm going to go paste it into the web page. Again, it's got to be prefixed with the sharp sign. AA5961 is the value we chose. I'm going to re-upload that. And I'm going to refresh. And now we have a slightly less annoying web page to look at. So there you have it. You can choose it from any number of thousands of colors now using that idea, mixing the colors manually. Or frankly, Google around on the web or use one of the recommended resources on the course website's resources page, not tonight. And you will be able to just look these kinds of things up online. But for the most part, you can choose the words off the top of your head. So that's an attribute. Controls the behavior of a tag in a certain way. There's only certain attributes defined for certain tags. How do you know what tags have what attributes associated with them? Memory, really, or a reference book. So one of the things that you should realize about making web pages is that it's completely reasonable and expected, certainly for the course, to sit with an XHTML book by your side and just look things up. When you want to figure out a new trick, look it up. Not a big deal. And if you do it enough times, you'll just remember it. Alternatively, there's no need to buy books to learn XHTML, pull up any one of the websites that we recommend on the course's website, or just Google around for XHTML tutorial or XHTML reference. And there's so much free information. There's no need to have a book, but sometimes it's more convenient. So we do recommend in sets one and two an XHTML book that is a pretty good one. It's a useful, quick and dirty reference to have next to you. Well, let's do something more interesting than a web page like this. Let's make it white again just for clarity's sake. Let's then restore power to the laptop. Let's change this back to white. And let's do something interesting with the body. So make a request of me, something reasonable that I can implement in XHTML. Let's do words for now. Well, no, I don't want to just type words because I can do that pretty well. So tell me how to design something aesthetically. Simple. Sorry? Import a penguin. Import a penguin? So include a picture of a penguin on my web page. OK, you're setting the bar a little too high for me, I think. So I will use Google Images. This is a good exercise. Search for Google Images of a penguin. OK, we'll go with the Linux penguin so that there's at least some relevance here, arguably. I'm going to choose that image. Come on. OK, so now I have a penguin. Specifically, I have the URL of the penguin. So for the discussion's sake, I'm simply going to copy that URL. I'm going to go back to my web page. And I'm going to say, all right, I want to have in this web page one, I want to center everything. And to center something is you might be pleased to realize, open bracket, center. Close bracket. But remember to close it. And the good habit to get into, honestly, is whenever you write an open tag, write the close tag, and then move back into the middle of things so that you can continue writing. To include an image, as you might have noticed earlier, you simply say image, src for source equals, and then the URL of the image. I'm going to save it. I'm going to go back to the FTP program, upload that, go back to my home page, which is now far from its original design. And there's my web page. And you can know it's mine because, one, it says mailinrush.com up top. But, two, it has a penguin now, and not the mailinrush Photoshopped logo. So that's all fine and good. But what if this guy who's hosting this website at unix.ag.org decides he doesn't like my using his bandwidth to make images in my web page? This is common practice to try to include content from someone else's server in your web page, and it's that easy. But realistically, let's suppose, for argument's sake, that this gentleman is perfectly fine with me downloading this image. He hasn't claimed it as intellectual property. It's just something he found on the internet, too. It's not copyrighted in any sense. Well, you probably know how you can just right-click or control-click an image in Internet Explorer or Safari, and then just do save picture as. And I'm going to save it to my desktop as penguin. And notice, what file format is it in? Ping. So that's OK. It's a ping. It might be a JPEG. It might be a GIF. It's a ping, so I don't want to change the file extension. You can't just change something and expect it to convert. I'm just going to leave it alone. So now notice on my desktop, I have penguin.png. So if I want to include this in my web page in a more legitimate sense, that is, now I'm hosting it, and I'm not subject to what that other guy decides to do with his web server, all I have to do is upload that file to my website. Now I'm going to go back to my XHTML and say, you know what? This isn't at a URL. It's at a local reference, which is just penguin.jpg. Save it. Reupload. And what we've got next is the same exact, whoops, that's his website, we haven't changed his website. I refresh my web page, same thing. But now the image is coming from my server. And this is worth bearing in mind, because sometimes people will try copying other people's images' URLs, especially from Google Images, including it in their own web page. But you can configure your web server in such a way that if someone tries to do that, that they just get a warning message or a broken link. Turns out this guy just hasn't configured his web server in that way. So the best way to do this is to save the images, copy them to your hard drive, then upload them to your own account, assuming that's legitimate for you to do so with that image. It's not bad. I made a web page with a penguin. Give me something else with text this time. Yeah. Actually gave you different images. So that's quite possible. I need to do that. The short answer is it depends. You can write a program to do that. You can configure your web server to do that. If you want to chat with me after, I can offer some technical details. It's non-trivial. But it does remind me incidentally, when we were talking about our security stuff earlier and accessings, for instance, someone's access point that wasn't your own or didn't belong to you, there's this brilliant article a few months ago on a news website which explained how this guy, with way too much free time, had essentially set up a server in his apartment or office or wherever that was acting as a firewall, router, switch, access point, all that stuff. But he configured this access point in such a way that if anyone who connected to it could access the internet and they'd get an IP address via DHCP and everything worked just as you would expect. People could leach his internet access all they wanted. But he configured the access point to flip upside down any JIF or JPEG that went through his access point. Which meant anyone who accessed the internet through his computer had this crazy weird problem where every web page's image was upside down. The other trick he played for a while was to use the same software he was running. And rather than flip the images around, he ran the equivalent of a Photoshop filter and made all of the images blurry so that the user visiting the web page was checking their eyesight at that point. So I guess buyer beware. But you can do neat tricks, certainly if you have control over such data. But how do you create web pages that even have images? Well, it's as simple as this. And there are more details. Tonight has not meant so much about teaching you every nuance of XHTML, because this would very quickly degrade into an incredibly boring talk if it hasn't already. Rather, it's meant to introduce some of the concepts and the basic ideas. And frankly, there is absolutely no reason for anyone to ever take a course on learning HTML or XHTML. Frankly, it's the sort of thing where after a few basic building blocks, you should be able to bootstrap yourself to learning the rest largely on your own, because all you have to do is turn to the page on how do I make something centered and write the tag that will allow you to do that or borrow it from something you've seen already. What about something with text? We might want to make text big. Well, a way to make text big would be to use something called a heading tag. So h1 in XHTML defines a really big heading, which just means big and bold text. If I now say welcome here, notice that if I upload this file to the server, it will now say welcome, yes. But it will say it like that in much bigger print than you saw before. By contrast, if I below that say not just h1, but go to the other extreme and say h6, which is another predefined tag which you would know existed if you just looked in any XHTML reference book or website, well, I would simply see on the line below this. And now you see the distinction. Well, what else can you do? Just to give you a sense of things, not an exhaustive reference. Let me go ahead and delete that. And you'll see in tonight's lecture slides that rather even though we're working through this on the fly, you have references in the form of those slides. Suppose I wanted to change the font of something. I could say the font tag. And then I could say face, where face equals the font name or family. What's a font that's very popular? Aerial. I'll go with aerial because I know that one will work. By default, what font were we seeing? Do you recognize it? This is Times New Roman, which is fine for printed documents on web pages. Doesn't look so pretty. So let's say aerial. And now I'm going to say size equals. And unfortunately with the font tag, you can only say size equals 1 through 7. So I'm going to choose 6. And these are relative sizes. It's not point size. It's not pixels. It's relative sizes. So it's somewhat browser dependent here, too. Say size equals 6. And what's your favorite color for text? Something simpler. Blue, I heard. I'll go with blue. And this is ugly text close font. Now I'm going to save it. I am going to re-upload the file. And now notice that we have still a very ugly web page. But at least now it's an aerial. And it's now blue. All right, so where are we going with this? Well, one, it's worth noting a couple of nuances here. So one, just because I have aerial installed on my computer doesn't mean the next guy is going to have aerial installed on his computer. Now it's a bit of a white lie because these days pretty much any computer, Mac or PC, has aerial. And it has time. So you're safe. But if you really like that Comic Sans font that looks like handwriting on your PC, well, that's fine. You can call it, for instance, Comic Sans. And then your web page will look great, or at least really cutesy, on your Windows PC. Mac user pulls it up. If Comic Sans isn't installed, which it probably isn't, he's going to get some other font, probably the default font, which again speaks to this problem of a non-uniform experience. So for the most part, what websites will do is either, one, choose a very common font and just leave it at that. Two, they'll provide a list of fonts where you can provide alternatives in this form. Separate them with commas, such that the browser, if it doesn't have one installed on its machine, it will try the next, and so forth. Or better yet, arguably, is sometimes to just describe the type of font that you want, either a serif font. And that's a font that has little twiddles on the ends. It's nice and pretty and elegant, like Times New Roman, or something that sounds serif, like aerial, which is just straight or curved lines with no little frills on the edges of the letters. So if I just say sans serif, I leave it to the browser, granted, to decide what font to use. But at least I know the style of the font. And if you look closely, for the most part, most websites use only a handful of fonts these days. Something like Arial is common. Something like Arial, another one that's common, is Verdana on Windows PC, and there's a couple of others. But for the most part, it's good practice to stick with something more generic, because then at least you know the website will look the same on multiple people's browsers. So looking at the slides for just a moment, just so that you have something to refer back to, this first example here is just a terribly simple example. Pretty much where we began, but it just puts in writing the most basic, perhaps, of web pages. This one here adds the notion of attributes and values, so you can modify the behavior of your website's appearance. This one here starts to get a little more involved. So notice we've used the font tag, which we just used on the fly. But here's a neat new feature. Hypertext markup language at the end of the day is all about hypertext, which means links, URLs that you can click on and so forth. So how do you do that? Well, suppose I want to have a website linked in my web page. Well, I could do this. This is ugly text, and I will say that leads to, and now I'm going to say open bracket, A, href, for anchor, a hyper reference here. And my favorite web page will be HTTP, colon, slash, slash. And you do need to include that in hyperlinks in the web page, even though you don't have to type it in a browser, weatherchannel.com, close quote, close bracket, and the weather channel. So I showed you this briefly, I think in the last lecture, where you have this distinction between what the hyper references and what the name of the link is. So notice, what's in between the quotes is the URL the user is going to go to. What's in between the open tag and the close tag? The anchor tag is what's going to appear on the web page. So if I save this and now upload this index.html, refresh my page, now notice I have a hyperlink in that same string of text. And if I hover over it, notice that the URL is weatherchannel.com, but the text is something completely different. So how, again, are those spammers and those fishers trying to get you to click on bogus links? Well, let's just suppose that I change this to a badguyswebsite.com. But you know what? I'm going to call it paypal.com. Well, what's the effect? Well, if we update the web page and refresh it in the browser, well, now it looks like I have a nice little link to paypal.com. But not quite. So that's how phishing attacks tend to work. When you click on one URL, thinking it's one thing, but it actually leads elsewhere. Well, you don't necessarily just have to make text lead somewhere. You can make images lead somewhere. For instance, the course's website, which I would be showing you, has banners up top. And in fact, we had some wonderful submissions for the multimedia problems set, which I wanted to show you, because if you click on the banner on the course's website, it'll flip through each of your submissions. I'll try this just for kicks to see if we even have a chance of seeing it. Oh, it came up this time. So if at home, I won't dwell on this now, but if you click this banner, you'll see each of your submissions. We'll leave that one up there for now, just because it's the most startling when someone visits the website. It's not changing it for everyone, mind you. It's changing it just for you using cookies, remembering what you've seen before. What I'll invite you to do at home or at your leisure this week is do take a look also at the several mousepad designs that were submitted. In next week's lecture, what we will do is have a vote as to which mousepad design you find to be your favorite, and then we will go to press with that. And your souvenir, come terms end, will be, I'll just pull up one just because it makes you smile. Um, there's our winner, right? No bias here on our part. What we'll do next week is vote, and at terms end, you'll walk away with a very nice mousepad in hand. Yeah. If it's not there, drop us a note, and we will check through the archives. It might just mean that I overlooked it. So with that said, back to the question hand, how do you make links not only be based on text but on images? Well, so far we've seen that xHTML is all about just nesting things, right? You can nest tags within tags within tags so long as you keep things balanced at the end of the day and eventually close those tags. So if instead of saying paypal.com, I wanted a penguin to lead to CNN or to badguyswebsite.com, I could simply put what here? Yeah, image, source equals penguin.png, and that's it. Oh, but this is an interesting point to make. Notice that have I ever closed my image tag now or before? No, and it's a little silly in this sense to do now this slash image because nothing really conceptually should go in between these two tags, right? What would it mean to embed something inside of an image? It's either there or it's not. It's not like it can start being there. You can put something in the middle and then have the rest of it appear elsewhere. So some tags like this, they conceptually don't really lend themselves to the notion of starting and stopping, but rather they're more atomic ideas. Put something here. Well, you can do this to close it, yes. And you must, sorry, that's completely wrong, IMG. You must close it to be, as we've said, consistent with xHTML. Every tag that's open must be closed, but there's a trick, a shortcut. Anytime you have a link that doesn't need to have anything inside of it, you can simply put your forward slash at the very end of the same tag. And we'll see an example of this again in just a moment. So if I now save this, upload this to the website, refresh. Now I have, this is ugly text that leads to this penguin, which in turn leads to a bad guy's website. Notice the blue border around it. That's sort of the mark of a bad web designer. There are attributes you will learn when you start playing around yourself. Border equals quote unquote zero. We'll get rid of that ugly blue border around the image. We'll go ahead and upload this, refresh.  Doesn't yet exist. What else can we do here? Well, notice that I've been trying to keep things nice and neat. I've been tabbing and spacing so that everything sort of flows inward and then back outward, completely unnecessary. You could write a web page that is just as accurate and functional, even if you got rid of all of that and left it as this. Let me save this, re-upload it, index.html, refresh. Web page is the same. Well, wait a minute. Suppose that I don't want the penguin there. I want it rather below the text because this already looks pretty ugly. Tonight is ultimately about how to make really ugly web pages. Re-leave it to you to make better looking web pages using the same tools that we're providing you with. So what can we do to fix this? All right, well, let's go back to the original condition, just because that's confusing. Let's say border equals zero. That's where we left off. Well, I am simply going to do this. Here's the start of the image. I want to put it below the text, so let's just do that. Just like you would in Microsoft Word, put the image down below. Let's upload it again and reload. Uh-oh. Why is that? Well, didn't go down enough spaces. They don't like that idea. What else? Good. You have to tell it. You have to break somehow. So everything we've done thus far is sort of like an implicit instruction to the browser. Put the body here. Put the title here. Make this bold. Make this blue. We never really said put a line break here. That is to say XHTML ignores white space. Any white space you have beyond one individual space is ignored, which means if you want to put white space, carriage returns, new lines, and so forth, you have to explicitly say as much by saying something like put a line break here. Or equivalently, put a line break here. Those tags are equivalent, but it's sort of silly to write it this way, so I would get into the habit of writing these atomic elements just as one entity like that with the forward slash right at the tail end. And now I'm going to clean this up, because if you now know that white space is irrelevant, the only reason I've had this white space thus far is just for human readability. It quickly becomes a nightmare to read and update your web pages if you yourself can't read the code. So we get into the habit, and we certainly preach the habit of so-called pretty printing. Pretty printing simply meaning keep things human readable, but not in a way that helps the computer. It helps you, the developer. So I'm just going to move this over. I'm going to keep things nicely indented. I'm going to now move the link in here. This has no material effect, but it does become a little more manageable for me to maintain. Save this, upload it back to the server, reload. And now we have it below. Again, still ugly, but at least we're getting there. How do I get multiple line breaks? Well, what might you think? Now let's put a bunch of them. That's going to keep putting it down, break, break, break, break, break, presumably. And in fact, it does. And so that's the idea. Again, the concepts are important here, not the design qualities that we're preaching thus far. Well, this is getting annoying having to upload the file all the time, every time I make the slightest of changes. Turns out you don't need to do that. The beauty of having a browser on your computer is that you can visit not only URLs, but also files. Well, it turns out that if I put the image in the same directory as the HTML page, just by dragging it there, notice that now my URL is not mailinruse.com. Notice it's c, colon, backslash, whatever the path is to the folder in which my file is. If I refresh this, notice that now I can just edit this on the client side. And this is a neat trick too, because as you develop your final project, especially if you don't want the world seeing your work before it's completed, if only out of embarrassment, you can develop everything on your local computer without internet access, assuming you don't want to download images and so forth, do it all in a folder. And then when you're ready, upload it and mass. Same result is achieved. Well, what else can you do when developing web pages? Well, it's actually useful that the web pages we've been developing with just XHTML are turning out pretty ugly. Because XHTML only takes you, sorry, we don't need that. XHTML only takes you so far aesthetically. But very commonly used today in the design of websites is something called cascading style sheets. And this too is something that you'll be introduced to largely by way of bootstrapping. We'll give you the building blocks, but really then refer you to any online reference or a textbook or to this week's sections and workshops where you can learn more. But cascading style sheets lets you really fine tune the aesthetics of your web page. We said a moment ago the font tag only supports 1 through 7. That's sort of lame when what does 1 through 7 mean if it's up to the browser. If you want to exercise precise control, you can use things like CSS, which just to give you a sense of it through this example, using the div tag, for instance, you can create what are called divisions in your page. Think of these as just chunks of your page, blocks of your page that you want to do something to. Doesn't mean to draw a line or a physical division. It just means create a conceptual division. And in this tag, notice that we have a style attribute. One way via which you can use cascading style sheets or cascading style sheet examples in your website is just to stay style equals quote unquote. And then anything you put in that value can be cascading style sheets and that further refines the aesthetics of your web page. And this already should look a little weird because now it looks like the value of an attribute is, yes, something in quotes. But notice there's a whole bunch of things now in quotes, separated by what character? Semicolon. So for better or for worse, this is the way the world works with cascading style sheets and website development. If you want to exercise multiple degrees of control within one tag with cascading style sheets, you just separate those directives using semicolons. And we can sort of learn by example here. If this text here, let's say, it says, hello world. Well, this text is going to be aligned in the center. You'll see already that there are multiple ways to do things when designing websites. You can just say open bracket center, text, close bracket, center. Or you can do it in this way with cascading style sheets. The color of the text is obviously going to be blue. The font family is going to be sans serif. And the font size, and this becomes a useful trick, is 36 point. You know what 36 point is. In Ergo, the browser will render it at a fixed size, not at some arbitrary font size equals seven, for instance. So that's useful too. You can do other tricks. Much of what's on the course's website is the result of cascading style sheets. So typically, when you visit, every time I smile when I see this one, when you visit a web page, usually a very basic web page for years had hyperlinks that were always what color? Blue. And if you clicked on them once, they'd become purple. And links were usually underlined with a blue line. Well, that's all fine and good. But it doesn't really lend itself to the sexiest of websites or the prettiest of websites. So among the ways you can control the behavior of links is with cascading style sheets. For instance, every link on the course's website is designed certainly not to be that blue Times New Roman font with a blue line under it. Rather, we're using something that's sans serif that is red, but with no underline. But what happens when you hover over one of the links in the course's website? It underlines then to draw your attention to the fact that it's a link.  But if you hover over these, they similarly become blue, and they become underlined there. Cascading style sheets are a wonderful thing. And this is just a snippet, a sneak preview of what you can do with cascading style sheets. We'll defer more of it to the section that's devoted to enhancing your websites with cascading style sheets or to any number of online resources, a couple of which we link to in the resources page. But for now, just think of it as a way of exercising more aesthetic control over your website. For the most part, the websites you design for the course and certainly the stuff that we've looked at tonight are largely static in nature. That is to say, you design the web page, you make it look like something, and I'll wave my hands that this is another example of CSS. But it's too much, I think, to throw everything at you in the first night before you've even written the XHTML. Well, most of the stuff we've looked at is in the form of static content. You make a web page, and it looks the same every time you pull it up. Well, many websites these days, certainly the ones we visit the most commonly, like Amazon and Google, they're ever changing. And certainly for all of the billions of web pages that Google has indexed, there is not some guy writing an XHTML web page that gives you a link to the first 10 results. And another guy who wrote the page for the results 11 through 20, and another guy who wrote the results for 21 through 30, all of that stuff, needless to say, is automatically generated. And just so that you've heard some of the jargon, among the technologies that these bigger websites are using, none of them are hard, and they just require a bit more savvy than you can introduce, certainly, in just one lecture's time, server side includes. Look like this. Again, I'll wave my hand at it for now, but this is something you can return to with your final projects, if you're so inclined, allow you to output things dynamically like the current time, or the user's IP address, or other such things that the server would know, DHTML. This is the combined use of something called JavaScript, a programming language with XHTML and CSS, Cascading Style Sheets, that creates those websites that have more interactivity, things you can drag and drop. And any website that's a little sexier than the more static ones you've seen often uses the combination of these technologies, something called Ajax is related. And again, this is something that might recur if you continue in your progression of studying of programming and so forth. CGI is the name given to a technology that allows you to generate web pages dynamically, often on Unix or Linux computers. The course's website uses CGI to dynamically generate the lecture's page and the section page. We rarely edit XHTML ourselves on the website. We edit a configuration file, type some commands, and bam, the website changes itself to save us the time of having to write XHTML manually. On Microsoft platforms, you have things like ASPs. On Java platforms, you have JSPs. And there are other such dynamic technologies. We will return to more of what you can do with your final project as the course progresses. Let us make one quick announcement about this weekend's and this week's workshop and section. Eugenia, mind coming down for just a second? Hello. So tonight and Saturday's sections are on XHTML. So basically you'll be working on actually making a web page. And then this Saturday's workshop is an introduction to digital video editing. So any of you movie makers out there, we look forward to seeing you. Excellent. So tonight again, to be clear, it was meant to introduce some of the concepts and some of the basic building blocks of website development and where you're going with your project. It's through these sections and workshops and also on your own over the next two months, where you'll get an opportunity to really dive in deep, look something up online, ask questions of us, figure out how do I do this, but one of the best ways to learn, to be honest, about how to write web pages is to just look at the source code of other people's web pages. If you see something you like, not to copy it per se, but to look at how they implemented it and to learn from others. And that, frankly, is certainly how I learned this stuff early on. Someone gave me a one hour crash course on HTML and I went off and learned the rest on my own just by asking questions and poking around. So you have many months to work on this. We'll return to it over time. But until then, we will see you next week.