[MUSIC] In this video, I'll provide a brief historical perspective of HTML. And we'll also talk about some of the basic design philosophies that you should have in mind when you work with it. In order to motivate this study, let's start with a quote from Tim Berners-Lee, who is considered the father of the world wide web. In this quote he's reminiscing about the early days of the world wide web. And here's what he said. I just had to take the hypertext idea and connect it to the TCP and DNS ideas and ta-da, the World Wide Web. So we've already studied TCP and DNS. In this video, let's start to talk about the hypertext idea. So first let's start with the background history of hypertext. The hypertext markup language, or HTML, was present in the document sharing system that Berners-Lee developed while he was working at CERN in the early 1990's. In 1995, the HTML working group created by the Internet Engineering Task Force released the HTML 2.0 standard. This was a very important standard. It had very widespread use. Additional versions of the standard were created under the auspices of the World Wide Web Consortium and this is W3C for short. The most recent is HTML5 the big, big improvement. It was released in 2008, it incorporates many new features such as video playback, some drag and drop capabilities that add a lot of interactivity to HTML. So many websites now are using the HTML 5 Standard. Markup languages such as HTML are examples of a declarative programing language style. So with this programing paradigm you express the logic of a computation without describing its control flow. Prolog and SQL are other examples of declarative programming languages, although SQL also has some procedural constructs. The program flow so therefore is not actually specified with markup language. You specify what, not how, in the computation. In the case of markup languages such as HTML, this means you specify what should appear on the webpage, not how it should look. Not how it's styled or how it should behave. And what I mean by behavior is when the item might be visible on the page and how it's animated, these types of things. If created properly, HTML documents should follow the separation of content and presentation principle. I'll get to that in just a second, but first I want to show you an example of HTML. So here is a div element in a HTML. And this is the beginning of the div element and here's the end. The div element is used to specify the major divisions or sections in a document. And here's an h1 HTML element. This is a level one heading and the title of this heading is going to be introduction. So notice that we're specifying things but not saying how anything should be computed or how these things should look. Now let's talk about this separation of content and presentation. And I'm going to make the same point. What this says is the specification of how content is presented should be separated from the content itself. By the way, this is a special case of the more general concept of separation of concerns used quite often in computing. For instance, in programming, the separation of concerns is achieved by encapsulating information inside modules with well defined interfaces. This principle was also used in the design of the Internet protocol stack. So again, the meaning or the semantics of the document should be separated from how it's presented to readers. Many web 1.0 applications did not follow the separation of content and presentation principle. They jumbled the two together making it really, really difficult to maintain these types of web pages. Here are some advantages associated with using this. The same content can be rendered differently depending upon the needs of the user. For example, you could render text or you could render that same text as braille. The more important thing is there's a meaning of the content and then how you represent it could be different. Another advantage is if this design principle is followed, you can change the styling of section headings and other things, and they'll be reflected throughout the entire document. Indeed, you could even update or change the entire graphic design of a document in this way without changing the actual content, just changing the styling. Also, by capturing the meaning or the semantics of a document, further intelligent machine processing of the document is possible. For example, you could write a script that finds all of the emphasized words in a a document, all of the level one headings, etc. So again this is supported by specifying meaning but not the styling of the content. In the next video we'll talk about how we can integrate styling and behavior into the overall document.
