 This e-lecture defines HTML, the markup language used to describe most websites, and it introduces its basic concepts. By the way, if you did not know until now, HTML stands for Hypertext Markup Language. It is the lingua franca for publishing on the worldwide web, which makes it the central component of any web development effort. Today, HTML offers a wide range of features that reflect the needs of a diverse and international community. We will deal with the most central aspects of HTML in this e-lecture. In particular, we will look at its basic elements, and we will define and discuss the structure of a web document. First, however, I would like to discuss some historical aspects of HTML and its general status. The development of HTML, as you know, is closely connected to the origin of the Internet. Thus, HTML has a long history. Its development goes back to the 1960s, when the Advanced Research Projects Agency decided to interconnect their mainframe computers primarily for military purposes during the Cold War. In 1980, the military and the scientific parts of the ARPANET were separated, leaving the ARPANET to the global scientific community. In 1989, the European Laboratory for Particle Physics CERN, located in Geneva in Switzerland, connected to the Internet. This research center provided much of the impetus for the adoption of connectivity and distributed computing standards such as TCP, IP. In the same year, Tim Berners-Lee, a graduate in physics who had joined CERN in 1984, wrote the first server and client software for what was to be known as the World Wide Web or W3 as an abbreviation. The system was first made available in December 1990, and over a period of three years it was constantly refined. At this time, in 1993, the Hypertext Markup Language, HTML, was established. So we can say that the early 1990s saw the birth of HTML. But is HTML a programming language? Well, it is certainly not. Rather, it is a format that describes the structure and appearance of a document. This description is not equivalent to a computer program, especially since it may be interpreted in different ways by different web browsers. In contrast to real programming languages such as C++, Lisp, JavaScript, PHP to name a few, HTML has no variables that can be declared. It does not allow the definition of functions. It cannot process data recursively or by means of loops and so on and so forth. The fact that HTML writing means the development of a specific code should not be mixed up with a code that is used in real programming. Let's illustrate this with an example. Suppose you had to write down the line HTML is a data format a hundred times. What would you do? Well, in HTML it would look like this. You would in fact have to write down the line HTML is a data format a hundred times to be presented in a web document a hundred times. In a programming language such as JavaScript or C++ or any other, you would write a loop similar to this one here. A loop which tells the computer what to do. In this case it tells the computer to write down the line HTML is a data format a hundred times on execution. So these examples clearly show that on the one hand we have a format, on the other hand we have a programming language. So HTML is a data format and not a programming language. Let's now look at the basic elements of HTML. The structure and the appearance of HTML documents are specified through so-called markup. These are elements within the source code that tell the browser what to do with the code. Let us look at the following text passage. Hello to all of you from the VLC. Now suppose we want to underline the item VLC. In word processor we would do the following. We would perhaps mark VLC and then we would press a button which underlines VLC. This is impossible in HTML. Rather what we have to do is we have to mark the passage in a very specific way. The way we have to mark it is specified within the code by the so-called markup. And here it is. In order to tell the browser to underline VLC we have to specify the beginning of the underlining process which is here. And the end of the underlining process which is here. And as a result the browser displays an underlined item VLC. So these additional markups such as U and end of U are referred to as tags. And they are the central markup elements of HTML. They serve as document control markers that advise the browser on how to display the elements of the document. Every tag consists of a tag name. And the tag name is always placed between an opening and a closing bracket. Usually the tag name is an abbreviation of a formatting instruction or an element that is added to a page. Here are two examples. The tag P stands for paragraph. And the tag table well it's self-explanatory it stands for the beginning of a table. Most HTML tags are container tags rather than stand-alone tags. They consist of two tags a beginning and an end tag. Now here is the structure of a container tag. The beginning tag represented in green. Then the content that is marked to which the tag is applied. And then the end of this markup the end tag. Applied to our examples well in fact here we have two container tags. The paragraph graph tag is a container tag with a beginning and an end. And so is the table tag. Tags can be extended by so-called attributes. Now attributes are small instructions placed within a tag to modify its appearance or behavior. The basic usage is quite simple as you can see here. After the tag name we need a blank here must be the blank. Then an attribute specific attribute. And then with or without a blank an equal sign followed by the value of the attribute in double quotes. Let's look at an example to illustrate this. Well here is the code of a relatively simple HTML document. I do not want to explain the entire code here. I want to focus on the body tag. As you can see here we have an opening tag and a closing tag and some other tags in between. Now without an attribute the body tag generates web documents with a white background. If we add the attribute background color and a specific value we can change the background color. Now here is an example. The attribute is BG color which stands for background color. Then we have our equation sign and then the value which is represented in the hexadecimal code. And the result is the background color green. If we change the value to another one here is an example. Another hexadecimal value the background color is yellow. As already said in many cases the attributes have value defaults. That is if they are not used a standard value is assumed. For example the standard value of the background color of an HTML document is always by default white. Let us now turn our attention to the basic structure of HTML documents. However there is one thing we have to settle first. It concerns the definition of the document type within the HTML code. In any HTML document the doc type declaration must be the very first thing before any other tag. The doc type declaration is not an HTML tag. Thus there is no closing tag. Rather it is an instruction to the web browser about what version of HTML the page is written in. So it specifies the rules for the markup language so that all browsers render the content correctly. Note that the exclamation mark here is part of this declaration so don't drop it. The document type definition presented here defines HTML5, the latest version of HTML. Previous doc type definitions looked a little bit more complicated. Here is one for HTML 4.01 which did not allow so called frame sets. And here is one for HTML 4.01 which did allow frame sets. These are just two examples so don't worry about them. Let's now look at the basic document structure. All HTML documents have the same basic structure. They consist of some text the HTML code so everything represented here. And this HTML code defines the content of the structure of the document. Well formed HTML documents that is documents that are in line with the rules of HTML consist of the following basic components. Now first of all we have the document type definition. Then we have two HTML tags which surround all other tags. Then we have a document header represented in green. And a document body represented in blue. So all HTML documents consist of four components. Document type definition, two HTML tags, the header and the body. Let us look at the header first. Now the document header, delimited by the tags head and end of head, describes the central properties of the HTML document. It serves as a container for various additional tags including among others the title tag as used over here. Now the title tag, a container tag, defines the title of the document. For example, here the title HTML document and this title is normally displayed in the browser's title bar. Further tags within the document header are the style tag which allows us to define particular styles, text styles, font size, font types. Or the script tag which allows us to insert instructions to the program event handlers from script languages such as JavaScript for example. But you will need them for more advanced web documents so we can ignore them here. Now the document body is the part that is displayed in the main window of the web browser. It is delimited by the body tags. Simple documents like the one presented here have a title tag which displays the title in our web document and they have one or several paragraphs that is the text we want to represent within a web document. More complex documents will include heavily formatted text, images, labels, lists and various special effects. Now that you know how documents are structured in HTML we should go on and look at further possibilities using HTML. For example, text formatting or the use of hyperlinks. But I suggest we leave that for further e-lectures on HTML. I'm looking forward to meeting you there.