 So, first off, some basic terminology. What is the web? Well, what was coined the World Wide Web is really just the worldwide network of web servers and web browsers. And a web browser is a program which will request web pages and then display them. And a web server is simply a program that serves those web pages to the web browsers which request them. The standard format for web pages is called HTML, which stands for Hypertext Markup Language. The idea of hypertext is something that came about in the 1960s where you have a bunch of documents and in those documents you have links and the links take you to other documents. So it's hypertext in the sense that a link warps you from one place to the text to somewhere else. But web pages, of course, don't consist of just text and links, they can also contain images. So here, for example, is a really simple page that consists of some text and a link and also a picture. When a web browser requests a page from a web server, the standard protocol used is called HTTP, which stands for Hypertext Transfer Protocol. And as we discussed in an earlier unit, HTTP requests and responses are almost always sent over TCP-IP. The request or response data is put inside TCP segments and those TCP segments are placed inside IP packets which are then routed across the internet. And also, as we already discussed, the basic kind of HTTP request is called a GET request, which sends just basically a URL to a web server and then the web server looking at that URL then responds back with the appropriate content. Now, the important thing to understand here is that a typical web page is made up of multiple resources, not just the resource which is the HTML itself, because the HTML contains links, URLs to other resources, notably images. So, for example, if I look at the New York Times web page in the Firefox browser, I have a plugin for Firefox which shows me all of the requests that are made to get that page and as you can see, it consists of many GET requests, some of which are for the images on the page. Like, say, the big image in the center here. To get that image, the browser has to send a GET request just for that image. When I visited NewYorkTimes.com, first it sent a GET request which returned the HTML page and then somewhere in the HTML, there was a link for the image, this URL, HTTP colon slash laugh, Graphics 8 dot NYTimes.com slash images slash 2010 slash 08 slash 12, so blah, blah, blah, blah, blah. That's the URL for this JPEG file, which again is retrieved in a separate GET request. We also discussed in the earlier unit that there's another kind of HTTP request called a POST request and a POST request sends not just a URL, but also some data along with that URL and what that data means is really entirely up to the web server's interpretation. So POST requests are used for all kinds of things, but the most common use is on a page when you fill out a form and hit the submit button, the data you filled in gets sent along as a POST request. Now, if you go back to the early days of the web, say about the mid-90s, you would see pages like this one. Not only is it ugly, but it's also static, meaning that nothing on the page is really interactive and the page is exactly the same every time we visit it. Today's websites not only typically look better, but if you visit, say, the New York Times site and hit the refresh button repeatedly, you'll notice that most of the times you hit refresh, the page is not exactly the same. It keeps changing. What's going on there is not that someone is manually editing the front page HTML. Rather, the web server at the New York Times has server-side logic. It has custom code for the New York Times site, which when it gets a request, it then actually generates the page, which it's going to respond with. And the way this usually works is someone authored a fixed template for the New York Times site into which the web server will plug all of these elements and move them around. So at the New York Times, some reporter files a story. That story gets entered into a database and then the web server uses that database to pull stories from that database to assemble the front page. So because of server-side programming like this, most websites you visit today are dynamic. They don't constantly serve up exactly the same page for every time you send the same request. They send back different responses. There are exceptions, of course. Some sites you might still visit today will have some totally static pages, but server-side generated pages have been the norm since the late 90s. Now, the reason that web pages typically look better today than they did in the early days is not just because designers have gotten more competent. It's because the web browser itself has become more capable. Over the years, web browsers have added features that allow authors to create more dynamic, more interesting pages. The biggest two features added to this end are what are called CSS and JavaScript. CSS, short for Cascading Style Sheets, is a mechanism that allows page authors more control over the layout of the page and the formatting. That is precisely how everything on the page is arranged and how it looks. And the second big feature added in the late 90s is JavaScript. Browsers now include a JavaScript interpreter such that you can put JavaScript code in your HTML and the browser will execute that JavaScript code. And there's a JavaScript API within the browser that allows the JavaScript code to manipulate elements of the page. So to be clear, before the inclusion of JavaScript, pages were entirely generated on the server side and what the browser got was this totally static thing. So before JavaScript, the only sense in which websites were interactive is that the user could click links, and each link they clicked would take them to a new page. But now today, if you visit a site that uses JavaScript, you may click on something and find that it doesn't take you to a whole new page. You just immediately see something on the page change, like maybe a menu pops up. For a good example of something that's possible with JavaScript that wasn't possible before, just look at Google Maps. On Google Maps, you can click and drag the map to pan it around. That panning of the map is being done by JavaScript code running in your browser. And that's a very important thing to understand. On the server side of the typical website, as I mentioned, you'll have code which is generating the pages as the HTTP requests come in. But whatever JavaScript code gets sent to your browser runs in your browser on your computer, not on the server. When JavaScript was first introduced into the browser, there was no mechanism by which in your JavaScript code you can get more data from the server. But at some point, about 2000-2001, Microsoft added to their browser in an Explorer. They added a feature that allowed JavaScript code to make an HTTP request and then use that data within the page. So it'd be clear, normally when you click a link in a web page that triggers an HTTP request and then what you get back as the response, that's a whole new page. You can see the browser, the current page sort of goes white for a moment and then the new page fills in. In contrast, when JavaScript code on a web page makes an HTTP request, you don't see the whole page disappear and then a new page appears. You don't see that whole page refresh. So what might happen these days is you click on something like, say, a link, but that link has been turned into a special link by the JavaScript code that triggers a request for new data from the server and then once that data comes back from the server, it then just gets inserted by the JavaScript code into the page. And in some cases, this can happen fast enough that you hardly notice any delay whatsoever. So this feature turned out to be so useful that it was adopted by all the browsers and in the period about 2000-2005, you started to see it being used more and more frequently. In fact, it became so popular a term was coined Ajax, which stands for asynchronous JavaScript and XML, meaning you use JavaScript to make an asynchronous request and the data usually would come back in the format of XML, though it doesn't have to be XML, there are other data formats. Now, even before the introduction of JavaScript, web pages didn't necessarily have to be entirely static because there were a number of what are called browser plugins. A plugin is just some extra code added into your browser, enabling some new feature for web pages that otherwise web pages don't have. The most successful browser plugin to date is known as Flash, and it was created by Macromedia, which subsequently has been bought by Adobe, so today it's known as Adobe Flash. What the Flash plugin does is allow your browser to display Flash content, which is not HTML, but this whole specific language just for Flash, and Flash took off because it allows for interactive graphics and audio that you just otherwise can't do in a plain web page with just HTML because HTML was just not designed for that sort of purpose. It was just meant to be a bunch of static documents that link to each other. So, in any case, Flash is an example of a particularly successful browser plugin. I believe something like over 95% of all web browsers have Flash installed in their browser. A less popular plugin is Microsoft's Silverlight plugin, which is very much like Flash. Basically, it's another code interpreter that allows code written for Silverlight to run within your page and display complicated graphics and audio. Again, it's not quite as successful, whereas over 90% of users have Flash installed in their browser. Only about half of all users have Silverlight installed in their browser. It is used on a few popular sites like, say, Netflix as it's streaming. The video is delivered via Microsoft Silverlight. That's sort of the exception, though. Today, the vast majority of sites with the video are delivering the video and displaying it via the Flash plugin. So, YouTube, for example, the video there is delivered in Flash. And you can almost always tell which parts of a web page are done in Flash, because they'll be in their own little box where if you right-click there, you won't get the normal context menu. Instead, you'll get a context menu where at the bottom it says about Adobe Flash Player. So here, for example, most of what we're looking at is just straight HTML, but then that portion with the video, that box area, that's the Flash element being displayed on the page. Before we get into the details of HTML, you may be confused about the different versions of HTML. For example, you may have heard of what's called XHTML. What's the difference versus regular HTML? Well, the X just stands for XML. And XML, if you're not familiar, it stands for Extensible Markup Language. It's a generic syntax for markup languages. And while original HTML superficially resembles XML, there are in fact some subtle differences. And XHTML was an attempt to get HTML to conform to the XML standard, as well as clean up a few other loose ends. Well, this whole XHTML initiative wasn't terribly successful. While all of the browsers support the XHTML version of HTML, a large majority of websites out there seem to have just ignored it. So in that sense, it's failed. For our purposes, we're just going to ignore XHTML. There's not much to it. If you want to read up on it, it won't take you very long. Now, you may have also heard of HTML5, which is HTML version 5, the latest and greatest version, which replaces version 4, the version we've had for almost 15 years now. HTML5 is a really quite exciting development because it's adding to HTML, standard HTML, a whole bunch of features which otherwise we've had to rely upon plugins like Flash and Silverlight 4, like, say, video. There's now a video tag in HTML5, which when the browsers all support it, that will allow websites to deliver video in a way that doesn't rely upon any plugin. So video is one example of what's new in HTML5. There's a whole bunch of other things. If you want to read into it, I suggest you go and dive into mark5.info. That's a site that has a whole bunch of introductory stuff about HTML5. What we're going to discuss in this unit are just the classic features of HTML, the standard stuff that's been around for a long time.