 After the introduction to the basic principles of HTML and the use of text in our first two HTML e-lectures, we will now focus on the main tags, attributes and principles that are used for more advanced text formatting. This includes the use of pre-formatted text and block quotes and the use of particular styles. Furthermore, we will discuss how text can be organized by means of lists and by means of the use of tables. The examples with which I will illustrate these extensions will use the HTML document with the source code I presented in my e-lecture, HTML and CSS Basics Text Part 1 as a starting point. Now, here it is, to the left in the HTML source code and to the right as it is displayed within the browser. Now, if you want the browser to render the text in exactly the same way as it is typed in the HTML source code, including, for example, carriage returns like the one over here, multiple character spaces and tabs, you can use the pre-tag. Now, in using this tag, the text in the browser is formatted in the same way as in the source code. Using the browser's constant width font with additional space added above and below. If you use long quotations, they can be formatted as a block quote using the block quote tag to set them apart from the rest of the page. Block quotes are usually displayed with an indent on the left and a right margin with a little extra space added above and below. Look at this example, then you understand what I mean. Let's now turn our attention to physical text styles. HTML provides a set of physical text styles which are used directly in the flow of text, so-called inline elements, to affect the appearance of the text. Each physical tag gives the browser specific display instructions. Let's look at the most commonly used examples of physical text style. We already saw the underline tag. Now, the text which is enclosed in the underline tag is obviously underlined. And if you use the text, the tag for bold, the B tag, well, then the enclosed text appears in bold. And quite similarly, here is the tag that displays the text in between in italics, the I tag. Further physical text styles include the superscript or subscript tags, as you can see over here. And of course, you can easily combine these tags. For example, you can create text that appears in italics and is underlined or text that is bold and in italics, but be careful in combining these things too often. The physical text style can be contrasted with logical text styles where the tags display to some extent what they mean. In contrast to physical text styles, they do not give the browser specific display instructions. The displayed result may vary among browsers. Let's now look at some of the most commonly used logical text styles. Here is the code tag. A text that occurs within the closed tags is rendered in the browser's monospace font. That is, in a font with constant width, for example, in courier. If you use the em or emphasis tag, the text within these tags is displayed with normal emphasis, usually in italics. And if you want special emphasis, you can use the strong tag. This gives strong emphasis to the enclosed text, usually in bold. Another means of formatting texts makes use of lists. Now, formatted lists provide a way to organize content by itemizing information. And in fact, there are three kinds of lists that can be defined in HTML. We have unordered and ordered lists and there are so-called definition lists which are not used that often. An unordered list is a collection of related items that do not appear in a special order. So let us expand our source code by a simple unordered list. Unordered lists are defined using the ul tags to surround the list. Ul obviously stands for unordered list. The list items themselves are placed between the li tags, li or list item. The result is a list with bullets before each list item where the bullet is a default value. In most browsers, it will be displayed as a filled circle. Ordered lists should be used when the sequence of the list item is important. In HTML, ordered lists are defined using the ul tags, ul obviously for ordered lists. Now list items again are displayed between the li tag, the list item tag. And as a result, the list is now ordered in terms of numbers in an ascending order by default in our case from 1 to 3. Finally, we have definition lists. Now they are used for displaying lists of words associated with blocks of descriptive text. They are delimited by the dl tag definition list. Within the list, each term is marked with the dt tag definition list term. That is the headline of a definition list. And the items themselves are specified using the dd tags. The result is a list that has neither bullets nor numbers, so a format similar to block quotes which we discussed earlier on. Definition lists are often used in glossaries or when you want to present attribute value definitions. Lists can be nested within one another. Now here we have nested two unordered lists within one another. As a result, we get a second bullet list with a new bullet form here by default an empty circle. Alternatively, you can list different list types within one another. So here we have one ordered list and inside the ordered list we have an unordered list. Now let's turn our attention to tables. Now basically, a table is a collection of items arranged in terms of rows and columns of cells. Most cells contain data values. However, there's also a possibility to insert headers for rows and columns that describe the data. Let's first have a look at the main tags used to create and format tables. Now a table is introduced obviously by the table tag. Then we have rows. So in this table we have two rows. This is row number one and this is row number two. And then in each row we have columns. So this here would be column number one and this here would be column number two. And these first three tags are responsible for the organization of tables in such a way. There are also additional tags like the th for table header or the caption tag. But I will not discuss them in this e-lecture because they're not used that often. To generate this table here, we need the following source code. Now first of all, we need the table tag to define the table. And within the table we want two table rows. So let's insert the row tag and immediately we have our two rows. And within each row we want to have two columns. So we need the TD tag twice within each table row tag. So this is our table. And if we just use these plain tags, this is the result. Not very convincing, is it? We don't even see that there is a table on the screen. We just see some organized data here. But we could achieve the same effect with block quotes, couldn't we? However, the use of tables allows us to use certain options. With specific attribute value pairs, we can format tables and their content almost without limits. Here is our example with some attributes applied to the central tags. Now let's look at the attributes associated with the table tag first. Now the opening table tag has the attribute width is 100%, value 100%. Now this simply means that the table uses the entire horizontal browser width. If we use the attribute border and the value 1, we will create a small border line that separates cells and rows. And the attributes, cell spacing and cell padding, define the outer and inner space required for the cells of the table. And then we can also associate attributes with the column tag, the TD tag. Now here we have used the align attribute and defined the value center in each case, which means that the text in each cell is now displayed in a centered format. One thing should be remembered though. The chief use of tables in web design is not to manage page layout but to present data. Well, let's summarize. Now that you know how documents are structured in HTML, we should go on and look at further possibilities using HTML. For example, the integration of images and other non-textual media or the use of hyperlinks. But I suggest we leave that to further e-lectures on HTML.