Welcome to our lecture on HTML. My goal in this lecture is not to make you the world's greatest web designer or front end expert. I just want to teach you enough HTML so that you can sort of do the rest of this class. Because the rest of this class is like here's some HTML. And now we're going to come up with cool ways to make more HTML. And that really is the theme of this class. I never tire of this particular picture but you might get tired because I always want to place everything we're doing in the right context right. Because there's really three major pieces of software and two network connections that sort of govern everything we do in web applications. This is you out here, okay. So you're sitting there, you're sitting in a browser you've got a keyboard you've got a mouse you got whatever. Right. And you have a piece of software running on your laptop, so this is your laptop then that talks to over the network to a web server and we're going to run PHP and all kinds of things in there. The Apache web server. This is like Chrome. This is Apache. And then, we have mySQL which is often on a third piece of hardware and a network connection even though when you're doing your own development for this class these two computers will be the same but they still talk to each other over a virtual loopback network. And so, here we are, the document object model is the thing that effectively is the view and HTML is when you make a request and somehow it runs in the server maybe it reads some data in a database and it comes back and then the request comes back. HTML is the format of that request and then it gets parsed by your browser it reads right through those things looking for less than and greater thans and all those things that lead to sort of a set of pixels on the screen and the little image that you see. And so this is HTML. So HTML, HTTP is the protocol we use to retrieve these documents. And HTML is the format of those documents when they are retrieved. And so HTML is very much a browser thing. It tells us how we create look and feel in the browser. And the idea of HTML, it's a way to mark up text and if you're old enough you remember things like word processors with Reveal Codes. Now, that really reveals how old you really are. But the notion of saying this is bold and this is italics and this is normal text, that's just something that you need to do in any kind of word processing. And so, one thing that's cool about HTML is they came up with a format that you can actually look at. And so if you dig deep into Microsoft Word, you might find in a doc file some weird thing you can't look at. But HTML its internal format, it's an internal way of representing the markup that talks about the look and feel of a document, except you can look at it, and I as a programmer I just love to look at stuff because then I can write a Python program to generate HTML or another program to generate javascript. Because you just know what it is because it's really just text. But then we have text that has meaning. And so the tagging is meaning. So less than p greater than p says start a paragraph, Less than strong and greater than strong start bold. Slash strong says stop bold. So, again, we tag them and less than and greater than and slash are special characters. Now we have ways to represent those and we'll talk about that in a second. But the idea is this is a user viewable markup format. There are many markup formats, Word documents are a markup format. Although, there's doc X which is XML so it's easier for you to see what's in XML. And so the web started out in the early 1990s, it became popular in 1994 and so we're over 20 years past this and it kind of helps to understand where we're at and understand why HTML is the way it is. Is it started out in a really small effort. And so a group of two people, Tim Berners-Lee and Robert Cailliau, invented sort of the first round of the web in the 1990s and they weren't a gigantic company. They were just two people and so they had to build simple things. And so we are in their debt because they were engineers that engineered something easy. And so now we get this richness of what we can do with the web but at the core level it's kind of easy and beautiful. Now it's important if you watch that video of Robert Cailliau that the web when it was invented in 1990 was not exactly the web that we have today. The web was really very much for serious documentation, serious kinds of things. It wasn't really intended to be sort of fun and frivolous and entertaining and to watch movies and to consume information, that all came later. And so HTML was sort of just, it was a workhorse. It was designed to get some stuff done to show pictures of design documents and you know images opened in a new window and it seemed like it made a ton of sense to do that. And I have a video of what it was like actually to surf the web using one of the early Mosaic, a piece of software circa 1994 that I regurgitated I found some source code and I made it work on a Mac and I'll show you a video of all that. But even sort of from 1994-'95 then the web evolved a great deal after that. People were just amazed that there was a place on the screen that you could click and you would go somewhere else. I mean that was enough. We were excited. And so you see all these blue links that are underlined that really are saying click me click me click me click please I'm a page full of useful information please click me. Now this is functional and I recall in 1996 when I would see this, I'm like, whoa so beautiful. This is the future. Well, this sort of was the future of '96. But then what happens is that as people that are not like me use the web, it had to be prettier. And so it's evolved a lot. And the good news is sitting here in 2017 or later. So much good stuff is done that we're not going to teach you the bad stuff. I'll show you a couple of bad things, sort of these old thing. But we're at a point now where web pages are powerful engines of commerce and money and they do things in Yahoo where they count the number of pixels in this little white bar and they will add one and subtract one and decide if people liked the page better based on the number of pixels and all they're doing is they're figuring out what is pleasing to us and they're optimizing to make a very pleasing user interfaces and compare and contrast that obsession with beauty with hey, the click works. That's amazing. You know, CSS is a big part of this which we'll talk about in an upcoming lecture. And so in the good old days HTML was really tolerant. You know, it just didn't matter. You could have tags that didn't finish and have all kinds of things. You could have uppercase tags, you could have attributes that didn't have double quotes on it. You didn't have to like put a slash LI at the end of this thing. All these uppercase tags. In the old days, they just wanted, the browsers wanted to be friendly, they didn't want to show broken right. You didn't want to like oh bad page don't look at said page right. And so the browsers were really tolerant. They let us, all a lot of HTML built by hand and you know people would make mistakes and the browsers wanted to fix those mistakes and show us you know relatively simple code. Now in 1994, '95, '96, the idea it was very very clear that this HTML in the web was an engine of commerce and productivity et cetera et cetera et cetera. And so it became very important for us to build standards around that. And so Tim Berners-Lee, one of the other initial creators of the World Wide Web, moved from CERN to MIT (Massachusetts Institute of Technology) CERN of course is in Switzerland. It's a physics lab, it's not a computer science place. MIT is more of a technical computer science place. And so the home of the standards for the World Wide Web is an organization called the Worldwide Web Consortium or the W3C that comes out of MIT. And so HTML moved from a thing that a couple of engineers put together at CERN to solve a problem they had to solve to something that became a foundational technology for the future of industry. So HTML started getting revised, more professional, more clear. So you got HTML 1. We have HTML 2, 3, 4. 3 didn't last very long, 4 lasted a long time. Now, HTML 5 is what we're using today. And so, this has been something that the World Wide Web Consortium has been guiding. And the whole idea and if you look at my internet history technology and security class you will see that this whole thing was actually fraught with peril, right. In the World Wide Web Consortium was the good guys and bad guys and Microsoft was the good guys in that particular one but I'm not going to, this is a not history class. Well, it's a little bit of a history class. I can't help myself. And so but the World Wide Web Consortium, it was founded and underpins all the things that we do on the web today and really enables all the beauty that we see on the web and yet, it's still simple enough to understand. Part of the problem was in the interim years like 2003 through 2008 it was just kind of a mess. And then finally it got cleaned up about four or five years ago. So there's just some rules now. And so the World Wide Web Consortium said this is what HTML should look like and things like tags have to be lowercase. OK. All tags have to start and stop. If you have an attribute, it's got a double quotes around it and browsers will still tolerate all kinds of mistakes. OK, here's a paragraph tag, beginning paragraph, end of paragraph, list tag, list tags, slash LI, et cetera. And so now because of the sort of maturation, maturing of this whole thing, we now have rules that we follow and that in the old days we used to do sort of all kinds of irresponsible things when it came to the Web. So up next we're going to talk a little bit about how HTML documents are put together and a little more detail on HTML.
