 All right, so welcome back to Computer Science E1. This is our lecture on website development. And we thought we'd begin with a quick look at today's Metro. This is the free newspaper for those unfamiliar that they have in the subways and Metro system here. And the cover was actually kind of interesting. Tackling crime online in Massachusetts. The subtext is cyber criminals strike in Boston, deemed the second riskiest city online. Hub officials urge caution when connecting to the web. Tips for ensuring your surfing experience is a safe one. Does the Boston Police Department need its own cyber crime unit, page two? So some excerpts from the article. Because frankly, when I read that, I didn't know what it meant for a city to be the second riskiest online. They seem to simply be conflating that with the omnipresence of wireless connectivity here. So it's the most risky, because we can get on the internet so relatively easy. So it's sort of turning a good into a bad, it seems. But some more here. So cyber criminals hitting hotspots. So this is germane to our recent discussions of wireless and security. TJX hackers sentencing federal report shed light on growing problem online. This is referring to the TJ Maxx episode a couple years ago. Some guys, I think, were sitting in the parking lot or nearby with laptop sniffing traffic. And the company, as I recall, was simply stupid in that they didn't have their wireless traffic actually encrypted. Or if they did, maybe, I don't recall specifically, they were using weak encryption, like WEP, or something with a very short key that they cracked. But the short of it was their wireless network was compromised. Report hub second riskiest city for identity theft and online crime. So let's see if we can't confirm or debunk some of these statements. It's just a couple paragraphs here. So news of internet fraud and user protection risks have rekindled the base state's focus on cyber crimes in the last three weeks. The hackers behind the Framingham-based TJX company's data breach were sentenced to prison at the end of March. And an April report urged federal agencies to ramp up their fight against internet-based attacks. One survey just ranked the hub the second riskiest online city in the nation. I'm not sure where that survey came from. But Bill Oates, the city's chief information officer, said the survey highlights Boston's extensive connectivity. He also said that new Wi-Fi hotspots are coming, and that users should always be cautious when connected. Now it's starting to get a little more interesting. If you're going to be using wireless hotspots, quote unquote, that's maybe not the place to do a lot of shopping, he said. Let's see if we can't come back to that advice in a moment. But while it's ultimately up to users to protect themselves, wireless providers should educate the public. Quote unquote, ideally those who provide wireless connections would do more to educate their customers about safe and best practices, said Marion Merritt, the internet safety advocate for Norton, a division of Symantec. The Boston Police Department doesn't have an online crime unit, but a spokeswoman said that some detectives specialize in the field. The Attorney General's Office and Medford and Rainham police forces all have cyber crime units. So the tips that the article concludes with are, one, ensure websites are secure prior to submitting personal information. Two, do your homework to ensure the business or website is legit. And three, monitor and review credit card statements. So before we offer some thoughts, reactions, comments, positive or negative. Oh, you have your own copy. Excellent. Reactions, anything that you resonated well with you, resonated poorly with you? Yeah. OK, so quite fair. So if you're using your credit card online, we shouldn't maybe point the finger at Boston being such a dangerous, scary place, but rather the users are making poor decisions. But even then, let's see if we can't push back on that concern. Almost any reputable website that you shop online at should have what in place? So secured by HTTPS. So that technology called SSL, Secure Socket Layers. And you know that a website is encrypted. If in the URL, you see HTTPS colon slash slash, you can also look for the little padlock icon in the bottom of the screen or thereabouts. But it's much more reliable to look at the URL because then you can trust that at least most, if not all of the websites is in fact secure. But quick pushback, I seem to recall saying myself a couple of weeks ago that a lot of websites, including Amazon and Facebook, and a lot of websites that have user names and passwords and even credit cards, don't use SSL throughout your experience. So OK, so a couple of comments there. So one, why not just when you order things, you can certainly mail the check-in as a second step. So I would push back on, say, one, if you are more comfortable, by all means do that. I would argue that most websites don't make it easier or even possible to take that approach. And to be honest, I would argue that paper checks, the system we've had for decades, is ridiculously more insecure than anything online is. At least online, we have some form of mathematical encryption usually, which is much stronger than the trust we have that when I hand someone a check, which literally has my bank's account number or literally has my bank's routing number, sometimes has my home address on the top. And even is sometimes asked of me to provide my social security number, I would actually argue that checks are a lot riskier, especially since once someone has my account number, if they empty my account or take some amount of money from it, it's probably a lot harder to convince your bank to put money back in your account than it is to say to AmEx or MasterCard or Visa. I'm not paying this bill because these aren't my charges. At least that's been my take on it. So a good idea, and certainly reasonable if that gives one comfort, but probably increasingly unrealistic given how many online vendors wouldn't allow for that process, though some do. Other comments? Yeah. Yeah, so that's a good point. If these are private entities like Starbucks and other entities nearby, maybe it isn't really the BPD's role to get involved with those particular areas. But actually, technologically, why are there so many unencrypted access points around? Think back to our discussion in class. Like, why does this problem exist? Is it? No, OK. OK, so that's true, right? There is a computational cost to encryption, arguably with small clientele's locally. You can probably ignore the relative cost of the encryption, but it certainly raises the bar to connecting to that access point. For instance, there's a cafe in the north end of Boston that I've been to, and they have free wireless access for customers, but they probably keep the local residents. The north end is a very densely populated place to keep the locals from using their free internet access. They actually do have encryption enabled, but just to raise the bar to actually connecting to it. So you have to go to the guy behind the counter, pay him like $5 for a coffee, and then he'll tell you what the WEP or WPA password is, but that at least keeps unauthorized quote, unquote, people off the network. But what about Starbucks and the like and all of these other entities, Logan Wi-Fi? Where the heck would you go within the airport to ask someone for the password for the wireless? It's just not quite realistic, I would say, with a lot of the applications of this technology right now to even bother securing it. So that's true, too. If you know the key on the network that everyone else has, in theory, you could just be decrypting everyone else's traffic as well. So that doesn't necessarily mitigate. No true. And think, too, that with regard to SSS. So the funny thing here is that, and they don't even speak to any of really the technical, interesting details of Wi-Fi and all of this, I mean, there is a solution to this. It's to only visit websites that are purely encrypted. And if you go to bankofthewest.com or bankofamerica.com, almost any bank, as we discussed a couple weeks ago, does use SSL throughout your transaction. And if your communications are encrypted between your laptop and that third party website, it doesn't even matter if you're using an insecure medium like free Wi-Fi that itself is unencrypted because you have elsewhere in that story your own encrypted channel. So even when you log into amazon.com or Facebook or any site that requires credentials, odds are you're still using an encrypted connection, at least for part of that transaction per the URL that changes to HTTPS. But recall this slightly more sophisticated discussion we had a week ago about session hijacking. And we looked at some of the so-called HTTP headers, which revealed that those things called cookies are actually being transmitted over the internet potentially without encryption, which means this bad guy sitting near you in the airport or in Starbucks can actually sniff that partly unencrypted traffic, grab your session cookie ID, and then pretend to be you on Amazon. But even there, there are pushbacks that they fail to recognize. Sites like Amazon are smart, whereby even if you've logged into Amazon, they let you then add things to your shopping cart and so forth. It's mildly annoying, but the very last step, even if you're already logged in, guess what they ask you to do? Log in again. Provide your password just to be doubly short that very last moment that with high probability, it is in fact you and not someone who's just stolen your cookie. So frankly, we can be pushing more of this back onto the actual websites themselves to not solve the problem 100%, but at least to raise the bar. And frankly, they don't even explain what identity theft means in this context. Does this mean people are stealing my email address because it's being transmitted in the clear? Does this mean they're stealing my book buying habits? Odds are they're not really stealing my user names and passwords because those in fact are typically sent these days only via encrypted connections. So in short, hopefully you would understand after a few weeks in this course an article like this more, but hopefully understand enough to realize there's really not much technical meat here. And there's maybe not really cause for alarm because even the author doesn't necessarily seem to appreciate some of the subtleties of these issues. They didn't. They don't even say the source of the survey, frankly. Oh, wait. Oh, they do. Riskiest online cities. Seattle is the most risky. There's a lot of tech companies there, though. I think Microsoft even has free Wi-Fi on their buses from Seattle and the rest of the city. The other top five are Seattle, Boston, Washington, DC, San Francisco, where Google has free Wi-Fi on its buses between campus and the city, though it's probably encrypted. And then Raleigh is number five. Oh, and this is according to Norton, a division of Symantec. So take it for what it ruins worth. Yeah? Mm. Mm-hmm. Mm-hmm. It's hard to answer in the abstract. So context is, if you visit a site, you're then cautioned that you're being redirected to some other site. Honestly, it depends. I would say there's not much cause for concern if you know the website you're visiting, you know the website you're going to. And to be honest, I would argue that identity theft in the context of using online websites providing your credit card is much less of a concern. I would be much more concerned, honestly, about a company to whom I've given my credit card, whether by some paper form or by some internet transaction, having their whole database of 100,000 user accounts compromised or a million user accounts compromised. Because the reality is that's the high profile target is going after 100,000 users, not just little old me sitting in an internet cafe. You can do a lot more damage with the ladder. And also, credit cards are pretty darn good, some more than others these days, about protecting you. And so if you see fraudulent charges, frankly, let the credit card companies deal with it. Credit card numbers are not something I think we need to be as worried about these days, given how many banks and credit card companies have come to our defense. In case in point, we worry so much about online transactions. I have a Banana Republic card that I got at one point because it gave me 15% off some big purchase. But I have this card. I haven't used it in months. And then all of a sudden, this past week, I get a bill for $150. And like an idiot, I almost paid it, not having remembered, wait a minute. I haven't even been to Banana Republic recently. But then I called up the customer service number to inquire what was going on. And it seems that someone had bought some women's clothes in three or four different stores in New Jersey. Didn't appear to be theft or fraud because they actually were nice enough to return one of those items to another store. So what the representative on the phone hypothesized is that someone went to one of these stores, didn't have their Banana Republic visa on them, asked the cashier to look it up by their social security number or their phone number or something like that. And then Banana and Gap and the like have what they call shopping passes, little paper receipts. They give you that are valid for three days that tell you what your account number is. And apparently, the cashier seems to have just given someone else my account number. So we may worry about cryptography and SSL and talk crazy things about riskiest cities when it's just stupid human mistakes that really put some of our data at risk. So that was kind of an interesting wake up for me. So there's definitely increasing regulation around this, which is good because it's raising the bar either through legal mechanisms or court-based penalties for companies screwing up so that they too feel the pain of what happens when our own identities or bank accounts are compromised. Do you want to? I'm sorry, you've had a mic this whole time and yet I didn't let you talk. I know, I've just been taking a so short nap. It's been a good time. So anyway, but continuing on with some of the security you might have heard of, or there was this one company a couple of years ago where the CEO was so confident in his product and this company said that they would, given some personal information that you provided to them, they would protect your identity to make sure that nobody is able to steal it. And they basically did this by just monitoring your credit reports, making sure that there was no sort of fraudulent requests on your credit report or what have you. And he was so confident about it that he actually released the social security number in the advertisements. And he said, oh, okay, this is my social security number. Just try to steal my identity. And of course people did, people tried and they were actually able to succeed. And it just goes to show that we do focus a lot on a certain subset of things, but it really is the large picture that we have to pay attention to. Keeping our social security number private is certainly something that we should strive to do. So don't take out $1,000 ads with your social security number in them. It's the takeaway tonight. Yeah, I guess that would be a good thing to do. But another thing that you can do is talking about ads and security. So imagine we have this ad here that David actually just came across a little bit earlier today. This was found in where Staples, I think, right in Harvard Square. It's a free PC tune up. Here's what we'll do. Boost speed and performance, check for spyware and viruses, optimize your hard drive. What does this mean? What are they doing? What are they talking about here? What do you think they're doing? I notice they say they'll check for spyware and viruses. They don't say they'll get rid of them. Yeah. I mean, that's the operative word, right? It's that basically what you're doing is you are bringing in your computer, presumably your laptop, giving it to them. And for free, you're letting some person that you don't know have complete access to your computer. And what do you do on your computer? I mean, you normally, you have your emails and such, but you probably also maybe store some passwords. You probably store some important documents, work-related, tax-related, et cetera. It's just not necessarily a good idea, even if this is a free PC tune up. I mean, this is even irrespective of the fact that you can do all of these things yourself and you could probably do the extra step of not only checking for spyware and viruses, but actually going ahead and removing them. But you can do that all from the safety of your own home. And this is sort of similar to these products that are these services that a lot of companies are now trying to get on or trying to offer these days like Best Buy and their Optimizer PCs, just a frankly bunch of crap where for a long time what they would do is you would look at these laptops or at these computers that they were selling in the store and that there would be a price associated with it and then you try to purchase this computer. They say, okay, well, we actually don't have any of these machines at this price. They're a little bit more expensive because we run our optimized service on them or whatever and that adds like $50 or I forget the exact amount, it's like $30, $50, $100 to the cost of the machine. What they would do is they would take these new computers, they would open them up, run this useless software on them, trying to do, claiming to do this sort of thing when really they didn't optimize anything and there's consumer reports that a whole sort of sting operation where they bought all these different machines and tested their performance and found that there was actually no difference and in some cases they were slower, there was worse performance with the so-called optimized service than if you just bought the machine new. So it's just sort of something to watch out for. Even if it's advertised as free, so I mean even if we're talking about these sort of security implications of it, there's just all of this other, there's all these other downsides to the performance. It's just not something that you should do. Just spend the time to try to attempt all of these things on your own at home because you would be able to, well I don't know, boost speed and performance, they're being very vague. Like what exactly does that mean? There's probably nothing super hidden that they're going to be able to do to be able to do this. So this is like partially genuine, this is not really hacking your system. This is by stable, regular companies so they're not, it's not smart. But the danger is that they can contact your personal information in the files but it's fire at the company so they wouldn't do that, right? Right, well I mean the intent is not malicious of course. Like they're trying to offer you the service and they're claiming that their service does these things but the downside to allowing this service to be performed on your machine is that if a worker or if an employee is using your computer, there's nothing necessarily stopping them from pulling this data off of your machine or doing other things to your machine that you're not going to allow. And of course that doesn't mean that all of the employees are going to do that. No, it would be a very, very small percentage that would even bother going outside of their bounds necessarily but the risk is still there just because the company is reputable, doesn't mean that the one shady employee isn't going to do these things. So it's a matter of, I mean, mitigating risk, right? Even though we could probably assume that Staples wouldn't harm the computer necessarily and they'll perform their service, it's just sort of questionable. First of all, the utility of this service and then second of all, now you're giving your laptop away to someone else and so now you have to take into account all of these extra security implications. Any questions then? I was looking on my phone for another photo. I took it from a hotel a few weeks ago in New York. That's kind of a mom and pop kind of place but it's actually a really big hotel and there too doesn't seem to be a whole lot of tech savvy because when you check in to the right hand side, I'll try it next time I'm back, I'll try to get this photo, there's a sign warning you to beware identity theft while staying in this very nice, it's like literally four star hotel though it's run by sort of a local family, beware identity theft while using wifi access and this is totally a sort of cover their back sides kind of approach I think to wire the security, just saying, hey, beware. But the sad part is like, what are you the user supposed to take away from that? Like don't use the internet or only visit certain sites. It's not clear what that message and frankly messages like these are actually saying. So again, hopefully you can make some smart decisions on your own actually understanding the technologies involved. Yeah. Oh, it's a good question. So if you have to have your computer repaired and you need to send it off for repair, what can you do? To be honest, it depends. So I actually literally had to do that recently with my Mac. I, because it's a Mac have enabled something called File Vault which Mac's come built in with. You do incur a slight performance penalty but what it means is everything on the hard drive is encrypted. This gave me some comfort though and I don't mind paying the 1%, 10% performance penalty on the whole because it meant I was able to go to the Apple store, hand them my laptop and the guy actually asked me for my username and password and having sat in on E1 long enough now I knew just enough to say, mm-mm, you don't need that. They could boot it off of an external hard drive if they really needed to write the fact that my track pad wasn't working did not require my username and password. So I just declined, he said, oh, okay. So there too, some sort of savvy from the user can protect yourself. On Windows, it's a little harder to be honest. There are third party products with which you can encrypt parts or all of your hard drive. They're not particularly standard. PGP, full disk encryption is the name of one product. Some people at Harvard University, for instance, use this for FERPA reasons, legal compliance. But to be honest, it ultimately boils down to a bit of trust. If it's a laptop, you could remove the hard drive and you could check with the person you're sending it to. Is it okay if I don't send you the drive? And usually, hard drives are increasingly easy to remove from laptops, but it depends on the model. Beyond that, it kind of boils down to trust. Are you comfortable turning this over to someone? There aren't some surefire steps you can take. Now, if you don't care about your data or you can back it up first, then you can take our advice from a week or two ago, download something like D-Band, Derek's Boot and Nuke, and you can just wipe the whole hard drive and then you can send it away with more comfort, but it kind of depends. If it's your hard drive that's damaged and you need the data recovered, then you kind of have to disclose what's on it for them to be helpful. All right, so tonight is about website development. So we've been using websites throughout the class and well before you even entered E1, you were probably using websites every day. And today is ultimately about taking the hood off of what's been underneath those websites this whole time so that you're empowered by terms and to make your own websites. They might not be the fanciest of websites. You might not be the next Facebook.com after just a couple of weeks, but you'll know the basic language called HTML, a related language called CSS or cascading style sheets. And from there, can you really bootstrap yourself if this world appeals to you to learning about more tools and more sophisticated techniques. Case in point, years ago when I was a freshman in college, I literally went down to the basement of the Science Center with my math teaching fellow who offered me like a one hour tutorial on how to make a webpage. And the result was my most hideous homepage ever, but that did speak to the relative ease with which you can pick up what on first glance might look terribly cryptic, but as we break it down into some of the basic building blocks tonight is actually pretty straightforward because you'll ultimately be writing lines and lines of code, programming code so to speak, that just tell the computer in a terse syntax what to do. So with that said, let me go ahead and start by opening up the source code to our own page. So this is computer science e1 website, computer science one dot net. If you go in my browser here to the view menu and go to page source, different browsers call this somewhat different things, but almost all browsers let you do this easily. You will see the underlying code, the HTML for this page. So HTML stands for hypertext markup language. And that's just a fancy way of saying this is a language with which you mark up content that you actually want to display to the user. And just as a little teaser, you know already that in a simple text file or in a wiki or an email, you can just write a word like hi, exclamation point in text, and the user will see that when they open the file. But it's not clear when you use a very simple interface like a text editor, whether it's text edit or notepad on windows, how you would make something like this bold in Microsoft Word, people like us would usually highlight it and then go to the bold option in the menu. But when you're just writing text, and this is the fascinating thing, web pages at the end of the day are just text. Now they might look purple and blue and black and white here, but that's only because Firefox has decided for human readability to colorize some of this text. That's being done automatically for me. I did not write the purple or blue or any other colors here. So it turns out that what we're about to start doing today is that if you want to make the text bold in a web page, you literally tell the computer, make this bold by with what's called markup. So markup or tags. So this little thing here is a tag. Open bracket be closed bracket says start making the following text bold and then the opposite of that tag, this now is called let's say an open tag or a start tag. The opposite, a closed tag or an end tag would be open bracket forward slash be closed bracket. So it's the same tag, but with the slash right before the character. So this says to the browser in the end, stop making text bold. So it's start and it's stop. And that's basic example. There's many more tags that we'll introduce tonight and that you'll experiment with in the weeks to come, but it ultimately as simple as that. So even with this little building block, if you now glance at some of the stuff up here, do you start to see the beginnings of patterns like this? You might not know what these purple tags are. Look, it's at top left there. There's li. Turns out that just means list item. And we'll get to that in a little bit. This open bracket a stands for anchor, which means put a hyperlink here. Put a clickable link here. And then you'll see just a teaser here, a space. So sometimes there's more stuff inside of these brackets. A space href is just the short hand form of hyperreference or hyperlink. So that tag is ultimately saying put a link here to the following URL. So all of this text goes somewhere. It goes into a file. And how does this file get transferred? So we know that when we try to visit a web page, we type in the URL, like computerscience1.net. And then we hit Return. And then something happens. What happens? How do we get this HTML file onto our computer? So this is sort of you have to remind yourself back from the internet lectures, how do we actually pass this text from the server back to us? What happens? OK, so using TCP-IP, and what about it, though? So we use that's how packets are transmitted from one machine to another. But there was a specific protocol that we use to try to contact a server, request a web page, and that server then responds with the web page to us. So the IP address, that's the address of the server. So once we find out, so let's say we need to find out where computer science1.net resides, we would use DNS, if you would recall, to the domain name system to figure out the IP address of this server from the domain name. Then my computer contacts that IP address using something, using some protocol that I'm trying to get you to say, that then the server knows, OK, I know because of this protocol that I need to send this data back. What is this protocol? HTTP, that's right, perfect. So we use this HTTP protocol, and this is separate from HTML. Just because they both start with HT, you shouldn't get them confused. They're different. Using HTTP, this is a protocol. This is almost the language of sorts that your computer uses to communicate with a server that is elsewhere to try to retrieve from that server a file. And that file usually has contents that is this HTML text, this HTML markup, like David just described earlier. And so we have, for example, if we try to view the HTTP headers that occur, this is basically what happens behind the scenes when we make a request. So when I try to visit computer science1.net, my computer has to resolve that using DNS to an IP address. Then it connects to that server using, say, TCPIP. And then it tells it, because of this HTTP protocol, it sends it a message. And it is this message, get slash HTTP slash 1.1. And so this is the HTTP part that we're talking about. You do not have to write or modify or do anything with this. But it is through this protocol. It is through this text that happens between your computer and between the far server through the internet that you are able to retrieve these files that make up this HTML page. So it's important to realize the difference. On the server, there exists a bunch of files. And so the server can run any operating system. It can be a Macintosh computer. It can be a Windows computer. Or most likely, what it is, if it's a legitimate big company server, it's probably going to be running something like Linux or Unix or some form of one of those operating systems. But on that server, it has, just like you have on your computer, a bunch of folders and a bunch of files within those folders. And that server knows that a specific folder within that computer contains a bunch of HTML files. And it's that folder that contains these files that it exposes to the internet. And so when my computer says, get slash HTTP slash 1.1, the server knows, OK, well, a slash means the default page, which is typically a file called index.html. So typically, what you will see is something that looks like index.html. Now realize that there's other types as well, like .php or .aspx. There's a whole bunch of stuff that you might find. Sometimes you even see .htm.htm.html are used pretty much interchangeably. But typically, especially these days, what you will see is this. But these are just files that reside on the computer. And they're just text files whose contents David teased that a little bit earlier. But the server has these files in a folder somewhere on its hard drive. And the server, when it receives a message like this, gets slash HTTP slash 1.1. It says, OK, I know that the slash means the default page, which is probably index.html. I will look for that file, and I'll read that file and I'll spit out its contents back to the person, back to the user. And it is this that we are going to be talking about. It is this file that gets returned to us in the form of this source code. So somewhere on the server, there exists this file that looks like this. Now, of course, with many things, it's a bit more complex than this. It's a bit of a white light if we were to actually open up the file on the server itself. In this particular instance, it's going to look a little bit more complicated. And the reason for that is that nowadays, what can happen is that we can have more than just this HTML, more than just this markup language inside of a file. It's possible through some other files like .php, .aspx, and some other ones that the server will read it first. And it's basically like a small program. You don't have to worry about this aspect. We're not going to get into anything this complex. But this is how a lot of dynamic web pages work, so how web pages, especially like ours, where when you reload it, you can get a different image, for example. So there's something that's changing, obviously. And if it's just a regular file, it's not going to change. But using some other type of programming language, which some servers allow, you can actually make it so that this HTML that gets sent back to us changes. But that's just for your information. That's how these web pages can change. It's possible to modify the contents of this HTML file using a program, but we're not going to do that. What we are going to do is write an HTML file. In this HTML file, you can put on a web server. And as long as you find that HTML file through a correct URL, that server will return the HTML file to your browser. Your browser will interpret its contents and display the web page to you. So let's make one of these files. And this is honestly where I think the internet has become so very exciting, so very empowering. It's because if you at least assume that most of us have computers or have access to and some kind of internet connection, you don't need to go out and get all sorts of fancy tools. You arguably don't even need all that much training, as you'll see in the next hour tonight. You really just need to understand some of these basics and then because so much of what we're going to do tonight follows the pattern of this open bracket, closed bracket routine, you just start to pick up new tidbits here and there. You can start to look after tonight at other websites, whether it's ours or CNN or websites you're already familiar with. Look at their source code and better understand how they implement these features you've been taking for granted as an end user just pointing and clicking. So I'm on a Mac here. And I'm going to simply go open a program like TextEdit. So this is the free, dumb text editor that comes with Mac OS. It's the Mac analog of notepad.exe, if you're familiar with that. In theory, you can use something like Microsoft Word or Word Processor. In fact, a lot of these commercial programs have HTML support built in. But the downside of that is that they generate, often, automatically for you much more complicated HTML than you actually need to know. They also tend to show you the HTML and within the Word document itself as opposed to showing you the raw source code. So in short, for now, we're going to stick with the very simple, very simplistic programs like Notepad and TextEdit. So I'm going to simply open a new document. It couldn't get simpler than this, a blank white window with absolutely no content. I'm going to zoom in. I'll make my font size a little bigger. But what I'm now going to do is make my first web page. Now, I'm not going to put it on a server just yet. For simplicity, I'm going to let this first web page live on my laptop. But we'll get there. We'll actually upload this file manually to a server. And then we'll visit the actual URL at which this first home page will live. So we saw the open bracket B tag before for bold. But that was really out of context. We need to start to tell the browser from start to finish that this is a web page. And the means by which we do this is to start by using the HTML tag. This tag says to the browser, literally, here comes a web page. And now we're going to retract some of what we're showing now and take things up a notch in just a little bit with more sophisticated code. But for now, we're going to go with some simple examples. So this is the start of a simple first home page. Now, I'm going to be a little forward thinking here, because I know already that anytime you open a tag, you must close a tag, at least the way using the version of HTML that we're going to introduce in the course. So I'm going to preemptively close this tag in advance, just so I don't forget. And this is a common newbie mistake. If you're just going top to bottom and forget that you opened a tag way before, best to avoid that altogether and do it at the beginning. So now I'm going to hit the up arrow and get in between these tags. And now I'm going to put the two parts that every web page has. And you'll see in a moment, this stuff's actually pretty simple. I'm going to hit the spacebar a couple times just to visually indent so that I can keep things pretty. This is a human convention, but it's not a machine requirement. I'm going to say, here comes the head of my web page. And then I'm going to go down a couple lines, hit the spacebar to keep my indentation aligned, and say, OK, there's the head of my page. And now I'm preemptively going to say, my web page also needs a body. And I'm going to just make some room for it there. So this is trivial, though this may look at first glance. All it takes to make a web page. Here's the head. Here's the body. Now unfortunately, it's completely devoid of content at the moment. So let's put a little bit of content. Now for now, there aren't too many tags that can go inside of the head of a web page, but one of the most common and the required one is this guy, title. So I'm going to give this a title like my first web page. And then I'm going to close the title. And notice I'm making some stylistic decisions here. I don't feel like hitting return all the time and indenting everything. And you don't have to, because these tags are read by the browser, top to bottom, left to right. So it sees open title, then some text, then closed title. That's perfectly fine. You don't need to hit Enter and indent everything. In fact, why bother? Everything fits nicely on one line there. It just looks pretty. So realize there's going to be a trade-off as we proceed. Sometimes things just look better as I'm editing them, but they have no material effect on what the browser actually sees. Because white space, and by that I mean all this blank space here and here, doesn't matter at all to the browser. In fact, it's going to ignore most white space. So all this indentation is largely for human convenience so that when I glance at this, I can immediately get the lay of the land without having to read it myself, top to bottom, left to right in a more confusing fashion. So now in the body, this is where I can put the text. I'm going to say something stupid, like, welcome to my home on the web, exclamation point. And now arguably, I don't need this white space, so just to prove that point, I'm going to remove this, remove this, and that's it. This is about as simple a web page as you can get. So what do I do next? I'm going to go to the File menu, and I'm going to do Save. I'm going to browse to my desktop here. Now I need to get a name. I'm going to go with the default name Dan proposed. So index.html, weird though it might look at first glance, is the standard name for most web pages, at least when you don't see the HTML extension in a URL. When we visit cnn.com, recall, it's the same thing as visiting cnn.com slash index.html. It's a little trick that they use because this is not interesting to the user, so it's the default file name that's usually hidden. But I'm going to explicitly type index.html. There's some options here, but I'm going to go ahead and just ignore that for now and click Save. And now, if I look on my desktop, I have this new file, index.html. Now what I'm going to go ahead and do is go back to my browser. And I'm just going to shrink some things so I can make some room here on the screen just to demonstrate what I'm doing. I can't just pull up a URL, because this file, as you can see, literally lives on my hard drive. My laptop, because I have a firewall and all of that installed, it doesn't have its own server on the internet. I'm kind of running in client mode now. But browsers just need to see HTML. It doesn't matter where that HTML came from. So a little trick I can do is take this file, click, and just drag it onto the browser, and voila. There is my first web page. In the top left, you see my little welcome message, silly though that is there. And where is that title I typed? Just to point out what may be obvious. Yeah, it's in the name of the tab right here. And it's also because that tab is selected in the title, as we expected, of the page itself. So on a PC, note there? Notepad.exe. And you can get that under Start Programs, Accessories, Notepad, or you can type it in the Run menu. Or you can navigate to it in the hard drive itself under my computer. So let's make this slightly more interesting. I'm going to go back to my text file. And actually, before I forge ahead too quickly, any questions about this example? And we'll have, as usual, we'll have describe notes online, so you don't have to write all this down if you don't want. We'll put it online, but feel free to. Yeah. HTML, a computer language, it is arguably. Most people don't use that term. It's not a programming language. So HTML does not enable you to write programs like AOL Instant Messenger, or Skype, or Microsoft Word. But it does allow you to mark up data like I'm doing here with my silly little sentences. So that's the difference. It's a markup language, not a programming language. And that'll make even more sense in a week or two when we actually look at a programming language. Other questions? Good question. Does it matter that title and open title and closed title I have on the same line, but head and close head, body and closed body, I don't have on the same line? No, it doesn't matter. So long as I'm symmetrically opening and closing the tags, this additional use of white space is just because it looks prettier to me, but is the human, but it is not necessary. So now, let me go ahead and do one thing here. It turns out, as we saw in E1's own source code, that you can have other stuff in between the open bracket and the closed bracket. These are what are known as attributes. So right now, we have tags. Open bracket, some word, closed bracket, is a tag. But if I hit the space bar after the word body, it turns out that there are some standard attributes that modify the behavior of a particular tag. So I'm going to type one that I happen to know because I learned it in advance. BG color. You can maybe guess what this is going to denote. Background color. Why is it BG color and not background color? Well, it's a shorter to type. And this is why the world adopted some of these shorthand notations. So any time you have an attribute, it does have to follow a certain structure. The attribute's name equals quote unquote. And then you put the value of that attribute, so to speak, inside of the quotes. Now, a few asides. You don't need to use double quotes. You can use single quotes if you prefer for any stylistic reason. So long as you're consistent using double quotes or two single quotes, I can have space here. This does not matter because it's still following the basic structure. But frankly, this looks stupid. Or if it doesn't, begin to interpret this as looking stupid. And so you should have maybe a space, but preferably no spaces. But these are, again, stylistic decisions that humans make conventions. The machine doesn't really care. So in here, quickly, pick your favorite color. Green. I heard green first, so we'll go with green. And I'm going to do quote unquote green. And now I'm going to go to File. And I'm going to go to Save. I'm going to go back to my browser and hasn't changed. But this should not be a foreign idea because HTTP is stateless. We're not connecting still to that file or to any server. So I'm going to have to, as you might have anticipated, reload. And we're on our way to making the really hideous web page I made several years ago. Yes, a question. Just a question with the college one. Are there so many, I take it you can't put a fusion on me? I don't know if maybe you can. Right. You can really only say in words a very select number of colors. Some of the major ones, like red, green, blue, et cetera. If you want more control over the colors, you have to be a bit more quantitative about it. And so all right. So let's say that you want to just pick any color. So as you might recall, you can have millions and even sometimes billions of different colors, not only on the web, but on your own computer. And you might recall that one of the things that we talked about, especially in the multimedia lecture, was this idea of bit depth. So you can have a certain number of bits for each color. And typically what we see is eight bits for the red color, eight bits for the green color, eight bits for the blue color, which means that we have about a bite of information for each color. And what you can actually do is encode this information using something called hexadecimal. So normally what we do when we count is, as you know, we go from 0 to 9, for example. And in binary, we go from 0 to 1. But hexadecimal, it not only goes from 0 to 9, but it goes an additional few. So 0 all the way to f. So in other words, it goes 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, where a represents the value 10, b represents the value 11. But what this means is that you can represent this number 10 with only one character. You don't need to put a 1 and then a 0 to represent what we would conceptually think of as 10. You can just use, in addition to the numbers, just some of these letters as well. And so using hexadecimal, we can quickly encode then a variety of colors. So we said that in an 8-bit color depth. That means that we have one byte worth of information for each color channel. And how many values is in a byte? 256. That's right. And so 0 through f, coincidentally, represents 16 different values, because it's a. So it goes 0 to 9, which is 10 values. And then a is 11, b is 12, c is 13, so on and so forth, 16 times. So you can imagine that if we have two characters, we have 0 through f and then we have another character that can be 0 through f. That means that we have 16 different values, possible values in the first character, 16 different possible values in the second character. Combine those two together. You multiply 16 times 16. It's 256. So in two characters, using hexadecimal, can we represent one byte worth of information? And that is exactly what happens. So let's just pick a color. And this is using Photoshop. And we can actually get a bunch of information about this color. So we can see here the red, the green, and the blue values. And each of these, because it's a byte of information, it's anywhere from 0. Let's see. 0 is a valid number, which would obviously represent black, all the way to 256. 255, because we started counting at 0. That is the maximum value. So we can go if we have only red, for example. And we say that red has a value of 0 along with green and blue. Then this color, you can see at the very top of this box, the new box, it shows the color as being black. But instead, if we represent the number 255 in red, now it's a pure red. But if you look just beyond that, you see there's this information just below it, FF00000. And this is a hexadecimal encode of that same information. So we have 255, 0, and 0. And so what we're doing in hexadecimal is in six characters, we're able to say what each color is. So for example, FF. That means it is the biggest number possible for the red. 00, that's the smallest number possible for the green. 00, that's the smallest color possible for the blue. And so in hexadecimal notation, where did the chalk go? We've got that for me. In hexadecimal notation, you can use six characters to represent a red, let's see, red color, a green color, and a blue color, like this, R, R, G, G, B, B, where any of these would be something in the range 0 through F. So any six-digit representation of this number that can be anything from 0 through F will form a color. So we can just type in random numbers here and see what we get. We can see that we now get this blue color. And so after a while, you start to understand, well, OK, now, 02 for the red, that's not very large of a number. 72 for this middle two characters, that's much larger. And this is in the green section. So we would expect this to have a bit of green. B2 is also a large number. So we have this mix of a green and a blue. And that's exactly what we see in the, well, it looks, the color is off on the screen. But on this screen, it looks more like it should, which is more of like this green blue turquoise sort of color. And so in this way, you can represent millions of different colors using just six characters. And so typically, when you go back to HTML, you can type in a raw color information like green or you can type in one of these hexadecimal numbers. All right, so picture looks. You can type in one of these hexadecimal numbers with a pound sign in front of it. And then the computer will know that it should use that number instead. So let's say we had pound. And then what was this number? 02, 72, B2. Save that. We can go back to Firefox, was it? Refresh, and that's the same color that we have. So we can represent, especially with these more complex colors, any number of millions of different possible colors using this hexadecimal notation. So a little quiz here, then. Instead of the moniker green, which is sufficiently common that the web browsers these days just understand some of the obvious ones, including fuchsia, but that wasn't always the case, what would the hexadecimal code be for green? Perfect, 00FF00, because this effectively means no red, lots of green, and no blue. And sure enough, 00FF00, save it. Go back to the browser, reload, and we get that exact same shade of green. Now, I happen to have Photoshop on this computer, but to be honest, this is such a common question that if you Google HTML color, look at there. It's already the top hit, color codes. You'll get so many results, cheat sheets, if you will, that will just tell you some common mappings. So you can either go with some very basic ones, red, green, blue, fuchsia, pink, purple, or you can really choose from any number of a million different millions of different colors. So it's a good question. So to be honest, I would probably, if I didn't own something like Photoshop, I would say something like HTML color turquoise. And I would find someone else who's already figured this out, to be honest. And there's turquoise. And again, the screen here looks a little weird. But this guy claims that turquoise is 00FFFF. So if I go ahead and take that information here, 00FFFF, save. And then reload my web page. I can then match the color there. But no, no, go ahead. If you want to come up with a less common color, one that the browsers might not necessarily know. And to be honest, whereas we can kind of slap an official definition on what it means to be green, all green, no red, no blue, what does it mean to be turquoise? To my knowledge, there's no mathematical definition of the color known as turquoise. So there's some judgment there. And so for some of those more sophisticated colors, you need to exercise that judgment by going with someone else's recommendation or using a tool like Photoshop to figure out what shade of turquoise really strikes your fancy. Or if you have a Mac, you can cheat a little bit. And there's an application called a digital color meter. And if you set it to an RGB as hex value, 8 bits, which is what we talked about. We're using a hex decimal number with 8 bits per color channel. What this will do is you can actually hover your mouse over anything. And it will tell you the exact color that's used. So you can see up here, it says, for this particular color, this is C9, C9, C9, which is just a form of gray, for example. And that's the exact value that makes this up. And so you can use a tool like this. Once you find a color that you like to just sort of hover over the color that you like and say, OK, I like this color. So it is going to be this value, 2F, 5F, AD. And so you can then use that color information in your own web page to display that color. Because what I found typically is if I Google for a color and I want to find a color code that someone is using in hex decimal online, it's usually overly bright, just like the turquoise that David was showing. It's just sort of in your face. It's like, why on earth would I want to use a 90-style color that you might find in a 90-style web page on something that should be a little bit more modern. So you have to tone down that color a bit. And so you can either use a tool like this. Or frankly, even just with this knowledge, you can say, OK, well, FFF might be a little bit bright. So maybe I'll try a lower number. So maybe I'll try 009999 instead and see how that looks. And then you can become more of a guess and check sort of situation. And even my own personal web page, which I revamped a few months ago, I couldn't quite decide on what color I wanted to use for the links. Right now they happen to be orange. So occasionally, when I see a really nice color on someone else's website, I do something like Dan did. I figure out what the color code is. I add it to a list of color codes that I like. And I'm using this language that Dan alluded to earlier called PHP, such that any time you visit my web page, it randomly picks a new color for all of the links. And then it remembers what color it's chosen for you by using a thing called a cookie, which we've discussed, because I thought it would be a little amateurish. Every time you click a different link on my page, all of the colors change suddenly. So this way it essentially stays constant for at least a day on your computer. And yes, I'm a geek. So let's tease before we take a break with just a couple of other features and really some of the more familiar ones, because this is clearly not a compelling web page. Let's see if we can add some more compelling features to it. So I'm going to go back to my HTML source code. I'm finding this a little distracting now. So I'm going to instead go back to just white. How do I make something white? So you might think it was this, but Dan actually spoiled this before. The absence of all colors actually gives you black. And it's the presence of all colors, much like in the real world with the actual spectrum of light. The presence of all colors, lots of each of these that gives you white. So ff, ff, ff is white. 0, 0, 0, 0, 0, 0, 0 is black. So that makes sure that my background is white by default, even though that tends to be the default value anyway. So now let me do something like this. I'm going to say enter, enter, enter. And I'm going to say goodbye at this part of the web page. So now let's go back to my browser. Let me go ahead and reload. And unfortunately, that's not quite what I intended. What is apparently wrong here? What were you expecting? The new lines. The new lines. I hit enter, enter, enter. And yet goodbye is on the same line. But this is a side effect of the tidbit I offered a bit ago, which is that the browser ignores white space. White space is really for the benefit of us, the humans, just to tease things apart visually. If I want a line break, I have to tell the browser, put line break here, just like I've been telling it to put a bolt here, put body here, put head here. So what I do is open bracket, br for break, and then generally a space. But we'll come back to this eventually why you need that there. Br slash close bracket. And that says put line break here. And if I want to have multiple line breaks, I'm going to do this a couple of times. So now if I hit save and go back here and reload, now I get the line breaks that I actually want. Question? Ah, good question. So I'm being imprecise. Web browsers ignore more than one space. So if you have space, space, space, space, space, or enter, enter, enter, enter, the only one it pays attention to is the very first one. Or put another way, it collapses multiple white spaces into a single white space. But so carriage returns are effectively ignored. So now before we run out of tape, let's actually make this a useful thing. So at the very end, I'm actually going to put an anchor, open bracket A. The destination, let's say, where does everyone go at the end? Let's send them to www.Disney.com. So I'm going to put a URL there. And let me shrink my font so it fits. Disney.com. Close quote, close bracket. Now what is this href call, just to reiterate the nomenclature? It's a hyperlink, but more generally, this word equals quote, unquote, is called an, not an anchor? Attribute, just like BGColor. href equals quote unquote is an attribute that modifies the behavior of the A tag. And so now, notice I've opened the A tag. I have my same text as before, goodbye. But beware, I have to now close the A tag. But for efficiency, the browser will not expect you to write the whole open tag. All you have to do is close the name of the tag. You don't have to rewrite all of the attributes. That would just be annoying and long. So now if I go back to my browser, click Reload. There's the familiar underline for default links. And in fact, if I click this link, even though this web page itself is not on the internet, but I'm connected to the internet, I can click this hyperlink and, oh, little sanity check down here. It's small. But in fact, I'm hovering over. It goes to Disney.com. And voila. I've now made a delivery mechanism for Disney.com. Let's take a five minute break. Hello, everyone. Welcome back. So before what? That's fun. That's so funny. Can we say hello? Well, yeah. I mean, I haven't talked to them in about five minutes. Oh, gosh. Hello. OK, everybody. Welcome back. So before the break, David showed us how to make this web page. And so OK, so something that's special about this web page that we didn't have in our previous example is perhaps most notably, well, besides the abundant images, the video that's here. So for example, David can play a video by clicking Play on this web page. And there's this very nice video that happens to stream over the internet to our computers. And we can watch it remotely. This is how you might see videos on YouTube, for example, et cetera. But this, you should realize, is not HTML. They do not send a video to us in any sort of HTML code. It is actually a video that is somehow embedded into this website or into this web page. And so you might imagine that somewhere there is an element that we haven't learned quite yet that represents this video. And typically, there is a type of element that can embed a specific object within a web page. And this object you might have heard of before is called flash. And one of the most common types of video that you will find on the internet is through this technology that's called flash. And flash is made by a company called Adobe, which also creates incidentally Photoshop. And what this flash player allows you to do is just this piece of software that is called by a specific combination of an element with a specific attribute and a specific value. And when you put this in your web page and you load up this web page, it loads up this flash application and it displays a video to you. And something that's particularly interesting lately is that flash has come under quite a bit of fire. And maybe that's not fair. Flash is very important on the internet these days because of its prevalence on a number of websites, not only Disney.com, but YouTube. Our own website, we use flash. A whole bunch of websites just use flash and for more than just video. A lot of those silly little web games that you'll play with the stick figures and you try to shoot people while you shoot other objects in the game while you're procrastinating from doing your own work is usually done also in flash. And so the problem is that there's some devices like the iPad and the iPhone, which are now becoming very, very popular, the iPhone especially, and it doesn't support this technology called flash. And if you have been looking online and reading up on some of these devices and everybody's complaining about there's a lack of flash, this device does not support flash, this is what they're referring to. That does not, these devices do not have this software installed that allows you to view these web pages or to play these silly little games on these devices that don't have flash installed. And luckily for us, most computers come with flash pre-installed just because it's so prevalent on the internet today. Our computers, your computer at home most likely has flash pre-installed so you don't have to worry about it. It's not something that you've had to do. But, oh and this is what it looks like. If you are on an iPhone or on an iPad or some other device that doesn't support flash, you will typically see something like this, which just means that there's a missing program. There's a missing plug-in so-called that allows or that would allow this data or this object to be shown on a web page but instead we just get a little Lego brick sign showing that there's something missing from this particular application. And so this is sort of a downside, certainly to a lot of these devices, the iPhone and the iPad in particular, it sort of limits the webpages that you can visit. You can't just go to youtube.com on the web browser and then be able to view a video because it just won't work. You can't go to our website and view the flash version, the QuickTime version will work just fine. You can't view the flash version because flash isn't installed, it just won't work. So there's this competing, it's this sort of competing development alongside flash and it's come up especially recently something called HTML5. And so what we've been dealing with is HTML but it's an older version of HTML and the version that we've been talking about here specifically is called XHTML. It's just the type of HTML and older forms of HTML don't support all of the same elements that the newer forms do so on. It's a very complicated world, unfortunately. There's a lot of different versions and a lot of the browsers have to be able to display all of these different things. HTML3 versus XHTML versus the original HTML. It's just this sort of nightmare. But we can simplify it and right now the popular one is the one that we've been teaching, XHTML. So it's been a little bit of a white lie that we've been calling everything HTML. It really technically isn't, it really is XHTML. But now there's this new version of HTML coming out called HTML5 and it is supposed to support by default these videos so that you can play back these videos like YouTube or even some of the ones that we have without needing to have this flash installed. And in fact, if you were to go to youtube.com slash HTML5 and you hit enter on your browser, what you will see is that YouTube has this sort of beta version of their website that allows you to view their website in HTML5. Now there's a bit of a trick about this. Using HTML5 means that you don't have to use flash and if you're on a Mac, this is particularly important because on a Mac, flash sucks. I can't say it any other way, it crashes all the time, it's slow, it's buggy, it's terrible to use. So we try to avoid it as much as possible. And in fact in some devices like the iPhone, you can't use it at all. So if you have this competing, this competing language or this competing markup language called HTML5 that allows us to do a lot of the same things with this other technology, then we might try to use this instead. So you can join the HTML5 beta but the trick is that, like I said, it's a new version of HTML and not all browsers support it. If you are using a PC at home and you're still using, and I don't know why you would, but if you're still using Internet Explorer, heaven forbid, HTML5 just simply does not work. It is not supported. It doesn't understand what the language means so it can't display it to you. Firefox even has some, what do you go down there? In further context there. If you want to purchase a nice top, I don't know what, use David's card, go to the New Jersey store and find the... No, I bring this up to emphasize that though a lot, flash is often used for videos and also for silly, especially kid-oriented sites like Disney.com. It's so terribly popular in the fashion industry in any kind of high-end, sexy kind of website for architects or real estate where people want to have a dynamism to the site and so the fact that this woman's clothes keep changing here is not the result of an animated GIF which recall does not actually support millions of colors which photographs warrants. This is actually, if you right click or control click on it, it's a flash animation and so I bring this up because the spat that Steve Jobs is currently having with Adobe and it's trickling over even to Google who has long resisted doing almost anything in flash if they can avoid it would break a lot of existing websites. So there's a lot of hoopla now on various bulletin boards and in the blogosphere about people being upset that all of their hard work with this good or bad technology, whatever your opinion might soon or before long come to an end. It's omnipresent and if you start, and we point this out too is that because even though we've been doing fairly ugly things with web pages thus far today, if you want to have something swoosh over from left to right or it's this neat little hover over, sometimes you can do that with HTML in a language called JavaScript and another one called CSS but not always. In fact, many people end up spending good money on smart people to actually write in this other language called flash or action script as it's also called. So the, but this all boils down to the fact that flash right now is extremely prevalent except in some of these high profile devices and HTML5 is not. HTML5 is supported by Safari and by the iPhone and by the iPad but some of the most popular web browsers in the world don't yet support HTML5. And so even though there's this huge push for HTML5 and there's a lot of talk about it online and even here in this class, it's just not that realistic yet to be able to replace flash with HTML5 because Internet Explorer doesn't support it. I think Firefox has very limited support. You can't show movies for example. It's just, it's, so it's sort of at odds with this idea that Steve Jobs is trying to push against the use of flash towards HTML5 yet probably about 90% of the world with the current browsers that they have installed and they're currently using just cannot use it whereas they will be able to view these flash, these flash applications or these flash webpages. So flash is for, well flash is, I would say it's more than just animations. It can show photographs but it allows a certain amount of dynamism with it so that you would be able to like click on, it could for example show you a slideshow of images, you could click on one and it could very nicely show an image. You can do a lot of this in HTML but a lot of people do use flash for more than just animations as well. Let's see, like this, the Banana Republic website that David just showed, it wasn't necessarily an animation. It was just sort of an image but it allows you to do more with that image than you would just by displaying an image on an HTML page. And even Bank of America's two factor authentication that I praised a couple of lectures ago, that actually uses flash, minimal flash but flash nonetheless, so in theory they could do that with other technologies. Flash works on Macs, not on, Flash does not work on iPhones or iPads and while flash works on Macs, I just find it sort of buggy and slow. The trend does seem to be given that Google is fairly anti-flash and Apple is absolutely anti-flash, like flash will probably die before long and even Adobe, one or more representatives have kind of admitted that this is not, they're going to be their bread and butter forever and frankly it's not such a bad thing I think to have such a popular proprietary plug-in for which people need to pay for development tools generally. We don't need it, there's plenty of other ways of solving this and a problem of animation and the like. So we've promised some mention of this other language called CSS and we have just started to scratch the surface of HTML but let's see if we can add a couple more features to this web page and then start to exercise more finer and control over the aesthetics of it and that's where this language called CSS comes in. So first let me point out one common theme in website development is there are often so many ways to accomplish the same or nearly same goal. Case in point, I'm gonna delete all of these line breaks here and I'm instead gonna use a different tag that I learned the other day which is the paragraph tag which is open bracket P, closed bracket. Just to be anal I'm gonna indent that sentence down there and then I'm gonna go ahead and close this paragraph tag because conceptually in my mind that first sentence kind of was a paragraph if short and then this link at the bottom of my page with goodbye it's also kind of a paragraph. So if I now save this file and I go back to Firefox with that index.html page now I get essentially the same effect not quite as much white space because to be fair I had more line breaks and here I just have two paragraphs but notice I do in fact get the text on a different line. Turns out that there's some other built in tags and again the goal tonight really is not to hit you with every possible tag because frankly it will get very boring quickly but just to give you a taste of the capabilities here so I'm actually gonna be a little silly and I'm gonna kind of disregard for the moment aesthetics and I'm gonna use this tag called h1 which stands for heading one. There's six of these heading one, h2, h3, h4, h5, h6. h1 is gonna make the text look a little different. Let's see what it does. Reload, well it seems that the default behavior on at least Firefox is to make h1 text big and bold. By contrast if I change this to h6 which is a little counterintuitive you think one would be small and six would be big but nope they took the other approach. So there's some stupid sort of historical artifacts here but what's curious is that if I pasted this URL or opened the file in say Safari on Dan's computer or Internet Explorer on a PC the downside of HTML and the way the web grew up is that these web pages might actually not look identical because Mozilla, the company that makes Firefox and Internet Explorer, Microsoft who makes Internet Explorer might have made different judgment calls. They might have said, all right, h1 text, it should be big but what does it mean to be big? Maybe it means 24 point but maybe Mozilla's felt 26 point is more to our liking so you've got these stupid inconsistencies across browsers and this plagued the web for years, the so-called browser wars which spoke not only to people's preference for one browser or the other but the different rendering engines so to speak that these browsers have and today people still get ticked off often to be honest by Microsoft for not quite doing what almost everyone else is doing Firefox and Apple who actually builds their browser Safari on an open source browser called WebKit. They've been a little better in general about adhering to standards but the reality is the fact that we have Chrome that's popular from Google, Firefox that's popular, Internet Explorer that's popular and Safari that's popular. There's a lot of humans at each of those companies and sometimes even though there are these specifications these formal things like HTML4 and XHTML and HTML5 reasonable people might disagree when it comes to interpreting something like big and bold and so this is a nuisance to be honest of website development in that you might design something, test it on one browser and then realize damn, it looks completely different or completely broken on another browser so this is to say that though for the course certainly we won't expect you to test your website on all possible browsers this is absolutely part of the process of developing websites and thankfully there are tools these days free software that actually helps simplify this process by normalizing web pages behavior across sites. So let's add one thing here just because it's a common one if I wanna have a mail to link if I wanna have a link not to goodbye but rather to say email me well if I just put mail in at post.harvard.edu and save and reload notice if I hover over this the text to change to email me and in the bottom left, can't hover and zoom at the same time notice that it's very small but notice here it says users mail in desktop slash mail in at post.harvard that's not what I want it seems to be thinking that mail in at post is really the name of like a file locally so there's actually a little hint I have to give to the browser which says quote unquote mail to mail in at post.harvard.edu and then if I hover over this notice now it says mail to colon mail in at post.harvard.edu and browser should open your default mail program if you now click this link but two gotchas one if you use web mail like Gmail or Hotmail or Yahoo Mail clicking links like this really doesn't help because they're not gonna open up Yahoo log you in automatically and start composing a message so these kinds of links do have limited utility and there's actually a downside what is the downside of this webpage I've just made what is the risk I've just created to me the user so spam right there's a lot of people out there who write programs not eight web pages but programs that crawl around the internet similar to Google and Yahoo but whose purpose in life is not to create databases for search engines but rather databases of people's email addresses and because email addresses follows a pattern it's really easy to slurp up my email address and so embedding email addresses and web pages in this way generally is not such a good idea. So this gives us an idea that maybe you would want to be able to have more than just one webpage available as well so you have a website and a website is usually a collection of web pages so you would have more than just your index.html maybe you want to be able to present additional data or additional content on a separate webpage as well and so when you create a link you can link not only to another website and you can link not only to a mail to colon your email address link but you can also link to another webpage on your same site so for example let's say that I link to this 2.html so you recall that when we were talking about how we actually retrieve a webpage from a server we contact the server from our machine and the server looks in a folder for a file called index.html and it returns the contents of that file and so if I have this 2.html this is telling the web browser that I want to look for another page that's on the same server in the same directory it's in the same folder but it's going to be called something else and so imagine that I have that you can see that I have this link that says goodbye and again it's gonna be tough to show you but let's see I can do this. Make it small. All right so here I hover over goodbye and you can see that it links to now 2.html but now this 2.html is in the same folder that's on my desktop where I'm also storing this index.html so I can click on goodbye and it takes me to my second page to page two that looks very much like our index but it's just it's different it has different content and so this is a separate file that I've called 2.html that resides in the same folder as my index.html and I can link back how can I link back to my index.html so if I wanted to have some text that says go back to home or to page one how would I create a link to make this text truthful so I have to create a link a what href what else do I type? Equals good because href is the attribute now I have to type the value so what's my value not parentheses but in quotes. yep index.html perfect okay then I have to close that element so slash a okay so now I can save this go back reload now you can see that I have a new link that appears and if I hover over it you can see that it will link back to my index.html and so again recall that these files are just stored on my desktop I don't have a web server running nothing like that but it works the same way when you upload these two files to a web server somewhere and you will be able to link from one page to another using this sort of relative what's called a relative path so it's relative because index.html and page two are in the same directory so that it just knows to look for one file in the same directory as the other now this brings up an interesting idea something that we've been talking about for a while let's say that I wanted to display the text of the link that I wanted to to visit so let's see HTTP computer science one dot net and I make the link equal to the same thing now I realize that it has gone off the page a little bit but that's okay we can take a look and see that we have some text here that's represented it shows on the page HTTP colon double slash computer science one dot net and you can see that when I hover over it also shows the link as pointing to the same thing but now if it's not obvious by now and hopefully this will become a little bit easier to understand one of the things that we've been talking about especially in the security lectures is that it's very easy to make it look like you're clicking on something when actually you're clicking on something else so instead of doing this what if I then wanted to fool people into going to Disney.com so now what will appear right so I'll see computer science one dot net but if I were to click on this link it's not going to take me to computer science one dot net it's going to take me to Disney.com and so this is how all of this this problem is able to to arise in an email if you see a link and it you might have been wondering well how can it say one thing but it goes somewhere else it's exactly this mechanism they're using in an email HTML and they're referring to using an href attribute they're referring to a website or to a domain that's completely different than the text that that is marked up with that specific tag alright so few tags and then we'll begin to stylize with that thing called CSS come on alright so I'm gonna go back to my version of this page we left off on this version with the email address and let's just gonna rip this stuff out and I'm really gonna simplify I don't even want the distraction of that because let's just focus on the innards here and here's just sort of a random assortment of tags just to give you a sense of the range of HTML capabilities but also to give you the syntax that you might have seen aesthetically in various popular websites here's how you do it so suppose I want to do a list of my favorite movies well there's this tag called open bracket UL close bracket for unordered list I'm gonna preemptively close this one and again we'll be sure to include all the source code in the scribe notes for tonight each of these has what's called a list item recall that we saw that in the courses web course websites own source code I'm gonna say something like goonies here but now that I've opened that tag I now need to close it and then I'm gonna move to the next line and do another favorite movie like the godfather close li and I'll come up with a third one let's say what's my third favorite movie audience participation all right godfather two but not three all right so let's save that reload the page all right so now we have a bulleted list it might be a little ugly that might not quite be the font size I want in the like but at least I see a structure that you might have seen on various websites now let's do another one it turns out you know what let me make that an ordered list something with numbers turns out there's an ol tag for ordered list that immediately changes those to numbers for me so you have some built-in functionality that might very well prove useful what about displaying data in tabular form actually having tables with rows and columns this is a common approach to show data or to lay things out let me go ahead and I'll leave that for now in case folks are still scribbling but I'm going to introduce quickly the table tag and this too even though it might look a little cryptic that the upside of all the syntax is that the browser itself is pretty dumb it's only going to do what you tell it to do so with each of these little building blocks can you say start doing this stop doing this so start a table stop a table but while you're making that table put a table row here tr is table row stop making a row here so start and stop so now what am I going to put inside well conceptually if I'm making a row now come the columns and for whatever reason they didn't call this the column tag or tc instead it's called td for table data stupid decision perhaps but td says table data this is making the equivalent of an excel spreadsheets cell a little rectangle let me go ahead and put a one there and now close bracket td and now just to save time i'm going to do a little copy paste and i'm going to make the second cell the two the third cell the three and now if i go back to my webpage here and reload the movies will still be up top there but now i have a table i'd kind of like to see this table so let me go ahead and add an attribute that i know to exist from having read an online tutorial border equals quote unquote one it's going to be ugly but there's at least a border now and let me go ahead and increase my font size just to make it more is really ugly that is the default border this is this is again 1990 style web pages but let's now do another table row and i'm going to go ahead and copy paste partly just to save time but also because structurally the next row i want to make is exactly the same and the third is going to be this and voila now i have my own little phone pad now this is useless information here but it at least gives you a taste of you know how you might structure data in rows and columns well what more can we do well we've had a number of examples with links let me go ahead here to the top little hodge podge let me shrink this down and let me do something like this um let me actually go ahead is dand data and do a href equals http well let's we can make it slightly more real world goonies on internet movie database i'm curious to know what the url is there it is um so notice if you haven't already that when you use various search engines you can right click or control click links and you'll get something like this copy link location that would let me either paste it into here directly or now that we know how to write web pages i can just paste it into here directly i have to close the link down here but now i have a link for goonies so let me go back to my web page hit reload this is now blue let's do one other search here not goonies but instead search for internet movie database oh and as an aside i am not logged into google so a little creepy isn't this this here how do they know where i am my ip address so they are inferring with high probability where in the world i am based on my ip address i've actually not seen that before they must be trying some new features they do that sometimes anyhow let's go ahead and search for godfather internet movie database which is just a popular website with movie ratings and the like let me go ahead back to my own web page and do another a href equals quote unquote that url and i'm gonna i'm gonna get a little sloppy here i'm gonna immediately go now and reload and whoa what just happened and why did this happen exactly so newbie mistake common but realize this way if you ever ever happens to you if all of a sudden your hold on page becomes one huge hyperlink to one site it's probably because of some silly typo so it's not something to be angry about but it can take some time to get used to finding these things because finding the absence of my anchor tag might not be obvious especially if you've not dabbled in this world before but sure enough it's because i forgot to close my anchor tag and here in the here in light here in uh... also lies a challenge with working with multiple browsers that's an ambiguous case what does it mean to close the li tag but not close the anchor tag should i should i the browser just assume that the user screwed up and i'll just close it for them this too is where browsers have to make judgment calls and ironically these browser incompatibilities or differences in aesthetics is partly the result of browser manufacturers being really nice and forgiving when it comes to accepting human mistakes and just assuming the user meant to close the tag because among other things this has encouraged laziness over time on humans parts so that the browsers will just fix these problems for themselves and also you get this unpredictable behavior sometimes but i promise to stylize this slightly differently right now i seem to have blue links by default and we've certainly seen websites where when you hover over the link the text changes or the color changes or the line only appears when you hover over it even on e1's own website you see these different aesthetics so how in the world do people do that blue is just some random person somewhere's arbitrary decision back in the day that links will be blue with underlines but the world has moved away from those defaults so it turns out i can actually do something like this next to my anchor tag i have this attribute here i can actually add another attribute called the style attribute and this will stylize this particular element so tag is the act tag refers to open bracket name close bracket but the whole thing between the open bracket open tag and the closed tag is collectively called an element as dan hinted here with this sample code so you know what i want to make the color of this particular link uh pound f f o o o what's that color gonna be red exactly lots of red no green no blue and sure enough now that becomes red i can really be crazy and say something like font hyphen size equals oh here we go 96 point and notice now now that i have two properties so now i'm using a language called css cascading style sheets it's a little weird it's a little sloppy and that now all of a sudden in between two quotes i have what technically is a different language because notice the different structure now instead of having attribute equals quote unquote now inside of the attributes value i have this other syntax whose pattern is property name colon property value and then if you have another one semicolon property name colon value maybe a semicolon so this is where things start to get messy it's not that complicated at least once you get used to it but it's because the world has started to commingle this thing called css which is just the stuff between the quotes now and this other thing called html so let me go ahead and save this is really daring stuff that i'm trying here how do i know incidentally that color is a valid property and font hyphen size is a valid property looked it up learned it it's just a part of the rule book reload wow so here again is my 1990 style web page it's really easy to do damage quickly but again this just speaks to the power and the versatility and frankly the relative ease with which you can make the browser do anything you want now this style this css is really really useful to be able to apply different styles to various texts but you'll notice that if we wanted to make all of the the hrefs all of the links appear the same what do we have to do in this case right we have to do it for everyone so there's a way that we can pull the css out from this style attribute in the tag and be able to apply it for all of the elements that are the same type and so we can do something that so we can we can apply actually css in three different ways one is in this style attribute the next is in this way we can actually do something called embedding a css style sheet we can embed css into the head of our of our page and from there we can define color or style for a wide variety of elements but it will apply to all of the elements within the page so you'll notice that this is the head of my page and after the title it doesn't matter if it's after before the title frankly but i have within here a style element that has a type attribute whose value is text css text slash css specifically and after that i have this funky stuff here that i'll get to in just a minute but you'll notice that in here this is the actual css that we have seen before and so by using something that looks like this what i can do is actually get this exact page so i i basically just replicated david's you know wacky style choices to be able to have these huge of red links but they're applied to all of the links within the page without me having to add a style attribute to them so if we tear this apart you'll notice that we have these css they're called css rules they're they're basically just rules that define the style for particular elements and i've defined not only the color but also the font size and they're grouped together inside of these curly brackets so we can group rules together with curly brackets open curly bracket some a set of rules they're separated by semicolons so like david showed before we have a rule colon a value semicolon and then just to make it look pretty i put it on the next line but again you don't have to do this white space isn't important we could make it really ugly and put it all on one really long line if we wanted to but just for readability's sake we're just going to make sure that it's that it's indented properly like this we're indented prettily maybe uh and so now i have these two rules and they're going to apply this set of rules is going to apply to all elements in the page a and remember that we have elements a and then the attributes href but it's really the element name that matters and so we can actually change more than just a we could have rules that apply to more than just this specific element so maybe i'm going to make this a little bit less crazy maybe now i want to change the font of a paragraph tag so i can apply some css rules to the paragraph tag as well so maybe i can do a background color uh and then now i can do something uh kind of crazy like all green for example hopefully i didn't get rid of all of my paragraph tags now you'll see that i've changed the background color for all of the paragraph tags just by adding some css and again you can see i'm making sort of a christmas tree out of this making it really ugly um but you can do some some very nice things with this sort of with these css rules now i sort of glossed over these two things over here what these are this is just sort of a special element and it's what it does is it's called an html comment and what it is telling the browser is that anything between this angle bracket exclamation point dash dash and then the end dash dash angle bracket the web browser should ignore but specifically it's not it's still reading it for the style but it's not going to print it out so in other words i could have an html comment here html comment like that and it doesn't even need to be an all uppercase and if i save that and reload you'll notice that it doesn't appear on the web page even though it is in the body and so this html comments you'll notice that this particular program is kind of graying it out it's not going to actually display the text on the page even though if i were to look at this source it's right down here html comment so this text actually exists but it's not being displayed so how is this relevant to the css style sheet it's that for older browsers or maybe there's maybe an older browser doesn't recognize this this style elements doesn't know what to do with it it's not going to just blindly print out this text on your page because this is going to make it really ugly really fast and it will instead ignore it it's not going to print it out on the page and the browsers browsers that understand what this style type text css means will say okay i know to ignore this html comments and i'll just process the css rules contained within let me see a question did i close my style tag i show i hope i did yep yeah so it's closed here so i had an html comments here uh closed html comment and then i closed the style tag as well what goes between the quotes here so so attributes also have to have a value so in this case we're saying that there is an element called style so we're you can presume that this is going to style something and then the type that we're going to use to style this page with is this value text css so we're using css to apply this style to the web page and so similarly uh for example body background color here even though we've done this in html we're saying that we have an element called body and there is an attribute called background color and the value the the value that this background color should be is this pound ff ff ff so this white color should be the background color so this is a this is just the value that's applied to whatever this attribute is i'm sorry oh you know oh the quotes um so the quotes is just telling the browser that anything between the quotes is the value for it and the reason for this could be that it won't interpret the the data that's contained within the quotes for anything other than the value that's associated with this attribute it's just the protection to make sure that you know maybe there's some wacky characters inside here this may or may not be valid but maybe you have something like this that the quotes just tell the browser how it will know what the beginning and the end of that value is obviously this will break if you try to do something kind of crazy like you have quotes in here it's just not going to work out very well but the the quotes just signify just tell the browser what is the value for that attribute so this i had before this color uh let's see ff ff ff so i had a white background color and so we can replicate this in css so instead of needing uh to use the the html attribute bg color we could still use css to be able to apply the same sort of thing so we would use we would apply css to the body tag and there's a rule called background color and i can apply and i'll just to make it visible i'll make it something different 000 ff now my hideous web page is going to be even worse than it was before but you can see that i have applied a background color to the body element without needing to use these html elements and in fact this is sort of the preferred way this using this we're able to separate the appearance of a web page from its actual content so we can actually stylize all of our code or all of our web page using css and we can just have the content we can uh we can allow all of the content to be contained within the html itself so that we can just separate out how this this content will look by using css yes uh yeah i would say that more like well what you were doing more accurately is not creating your own defaults but you're overriding the browser's defaults um yes yeah it is it does it reads it in order so if i had in addition to this maybe i want to stylize one of these links especially so i could have style uh color uh let's see pound ff ff ff just to go just to do something sort of crazy now what i'm doing is i'm mixing css right because i've already defined a css style for the color for the um the a elements up here but i'm trying to overwrite it using a style attribute down here and in fact you will see that it will allow you to overwrite it as you go so it's red top down so if i have um maybe if i have another rule here there's there's some there's occasionally times that you will actually want to do this you can override previous colors using this same sort of thing uh and then you will be able to change the color of all of them as a whole so it is it can you can override older rules as well but that's sort of an advanced like that's it's not something that you really have to worry about with a basic css style sheet yes is there any advantage to using this way over dream move um i would argue that yes i think using um using a lot of web design programs like dream weaver they tend to be a bit error prone they let you do some advanced things but they tend not to be very cross browser compatible um and i think using this sort of uh what's called wissy wig what you see is what you get sort of application it removes you far enough away from the code that if you have a problem with with some little thing maybe being misplaced or misaligned and you try and you can't figure out how to fix it in dream weaver looking at the code is just sort of it's just really daunting because they they do they use the same sort of code they use they also use css they also use html but it just tends to be really bloated and really over and it just becomes difficult to break it apart and figure out how it actually works but doing it by yourself and i'm not advocating necessarily that you always type out you know very complicated web page in uh in just the notepad editor but doing it this way you at least end up a very good understanding of what uh of how the web page is designed and you will know okay well maybe why are all of my links green for example you'll know where exactly to go in your web page and find that specific css rule or html attribute that allows you to modify that so these web pages uh beyond being uglier all pretty useless in that they live only on our laptops at the moment so how can we actually put it on the internet well there's a number of ways you can certainly go out and buy a domain name david.com and then you can pay someone usually a few dollars a month to host that domain name but it turns out that with fas accounts for which you all signed up early in the semester you can actually go to www.people.fas.harvard.edu slash and then the convention is at tilde which is usually in the top left and this is as you can many web servers for the folder in which your public html file should go so just to demonstrate that it's not a huge leap to go from client something from the whole world to see can make fun of i can drag this file into this sfdp program in a moment it's going to transfer the bytes from client to server that was pretty fast and now notice in the window index.html actually appears if i now go back to this url because index.html is also harvard's default file name when i reload this i'm going to still get this access forbidden i wasn't sure if that would happen or not but that's because by default most of these sfdp programs for better don't give the whole world read access to them otherwise it would be like disclosing all of our personal documents to the whole world so in this particular program i actually have to open a little preferences window and say give everyone on the internet read access so i just click read and read but this will vary based on program but now if i go back to the browser and reload notice the url i am not on my local hard drive anymore i'm on www.people and sure enough there is my hideous web page now in the context of the server that shrunk the fog back down so that everything would fit so now i'm on the internet you can tell all your friends about this hideous web page but it is that easy to get it on there yeah great question why do you not see public underscore html in the url just convention it's a stupid named folder and the convention is to hide it but to show you at slash till the mail in the contents of that folder so it's purely a configuration detail and if we can show you two other details we have certainly made some ugly web pages but we can do better or uglier if i go to um i need a picture of a let's make it cute a puppy well if actually i can interrupt for a second so this yeah but important okay so if you are actually modifying web page and you put it up on the on on the on uh how can i compete with that yeah all right so so if you actually upload your html page to a web server and then you look at it on your web browser and you realize that you need to make a change let's say you're still modifying the file on your computer this this is also sort of like a newbie gotcha newbie mistake where you are modifying the file on your computer and you save it you have to also send that file again up to the server you have to send the updated file to the server because it it's not linked otherwise you have to be able to uh after you save it upload it and then reload the browser to see the change in that in that web page yes yes browsers will often cache files save them locally temporarily just to speed up performance so you often have to sometimes hit the reload button multiple times or hold a special keyboard shortcut and do a forcible reload okay we have a couple minutes left for puppy time so i've just found a random image now maybe i took this photo maybe i put it on flicker i happen to use google images you should respect certain people's copyrights of photos and only do this if they allow you i'm going to assume just for uh demonstration sake that this puppy is in fact globally accessible i'm going to copy the url of this photo notice it ends in jpeg so this is not a web page this is actually a file on the internet and i'm going to go back to my source code here and i'm going to say all right this really this whole page is really stupid i can really impress people a lot more with just one picture of a puppy so it turns out that one of the most compelling tags we haven't even looked at is image and it's not image it's img source src equals quote unquote and then the name or the url of an image and now this is a curious tag because it wouldn't really make sense to tell the browser start putting the photo here then do some stuff and then stop putting the photo here you either put it there or you don't there are tags like the br tag that are empty that is they don't open and close you do it all at once and the syntax for this even though it's something again a little new is to put the slash inside of the tag and not in a separate tag but you could if you prefer the aesthetics of this that is equally correct but just a little weird because you have nothing to put inside of that but if i now reload this and look at the version that's on my own computer per dan's warning in fact now i have a really huge picture of a puppy because it turns out this image was way larger than i was seeing actually no it's because i've zoomed in on the page then uh now i actually have this image embedded so one final recommendation if we may we'll discuss this more in writing in the weeks to come toward final project time but there is this program called firebug if you google firebug one word you'll get to this page here if you don't have the firefox browser installed yet it exists for max and pcs we would actually strongly recommend that you download it and play with it it doesn't matter if you want to keep using your own favorite browser but what's nice about firefox is that it's really friendly when it comes to website development and if you install firefox and then install firebug both of them free what you will get at the bottom of every web page you visit is this literally a bug icon in the bottom corner and if you click that bug this interface here will pop up and now it might be a little to a lot to take in at first glance but notice i have highlighted the html tab and what's compelling about firebug for tonight's purpose is is that no matter what a hideous mess the sources of the actual page this is just kind of overwhelming and a complete mess to read what firebox does among other things is it nicely formats everything in really anal indented fashion just like i was doing with my own keyboard and what's really cool is that now you can take an arbitrary website whether it's computer science one dot net cnn.com facebook.com and for a learning exercise you can explore it so it turns out that the body of our page there's just two parts of this web page head and body per those two tags there as we promised if i expand the body tag i'll see that there's this thing called a div this is just a big division of the page it's a tag we didn't bother using yet tonight but if i open that this div has multiple other divs inside of it and here's where it gets interesting if i start to hover over these tags i can see what tag represents what on the page notice the light blue at the top of the page that's telling me this tag is controlling that part of the page this tag is controlling that part of the page this one this part of the page and it's a wonderful pedagogical tool to be honest even though it's not quite meant for this because you can learn from its visualization how pages are structured and it's a great way to bootstrap yourself to more and more sophisticated techniques over the weeks and months to come if this kind of thing is striking you any final questions all right we will see you in a week bye