 This screencast will familiarize you with the making of your very first HTML document. For this reason, we will proceed with the following steps. Getting started and which editor to use, typing HTML in an editor, saving your HTML document and opening it in the browser and how to continue with your document. The first question you may have is how you can create an HTML document and which software you can use for editing. You can either use a simple editor, which you have installed on your computer, or you can download an editor from the Internet. The advantage of the freely available software NodePEP++ portable, for instance, is that it highlights HTML syntax. A more professional and costly program is Adobe Dreamweaver, which allows, for example, the insertion of all standard HTML tags, scripts, links, images, and much more. In the course of this program, we will use NodePEP++ portable. So please download it on your computer. We also need a browser for the editing of HTML documents, because this is how we can see the changes in our document. So you can use Firefox, Internet Explorer, Google Chrome, or which browser you have installed on your computer. All HTML documents have the same basic structure. They consist of HTML code, which defines the content and structure of the document. And we are now going to look at this in more detail. So please run your NodePEP++ portable and create a new document. In any HTML document, the DOC type declaration must be the very first tag. All well-formed HTML documents also consist of the following basic components. First of all, the enclosing HTML tags, then the document header with the title. And remember, the title is that what is displayed in the browser's title bar. Then we have the document body, which needs to be opened and closed. And within the body of an HTML document, we have the part that is displayed in the main window of the browser later on. And it is delimited by the beginning and ending body tag. So you can see it is also a container tag. And within the body tag, further tags can be used such as paragraphs, headings, images, tables and lists and textiles are possible too, of course. But in our simple HTML document, we will only use the P tag and the headline and the U tag and we will first of all insert a title, which is HTML document. And be careful not to make typos. Now we will continue with the insertion of a paragraph. And now we want to make the word VLC underlined. So we use the U tag, we open and we close it. And that's basically all for now. Now that we have typed the HTML code into our chosen editor, we need to save the document. The document cannot be viewed in a browser unless you save it in the correct format, which is .html, so you always need to use this file extension. Another aspect that needs to be considered are the file names you are choosing. So remember that you cannot capitalize letters, you cannot use spaces and you cannot use special characters. If you do so, you will experience errors and problems when you continue with more complex HTML documents, hyperlinks and in many other cases. Let us now save our document with regard to these criteria. Just go to the menu bar on the top of your editor. Go to save as and then select the folder where you want to save your document in and then select an appropriate file name like my underscore, first underscore, HTML underscore, document. And we need the correct extension, which is .html. Then save and you will immediately recognize that the HTML syntax is highlighted. And this will make it very easy for you to check for mistakes. See for instance, we didn't open the UTag appropriately, there was a typo and if we delete it, we can see the correct opening and ending tag and that's it. We need to save the document again. Now you can use a simple double click in order to open it with the default browser for the file type .html and there it is. And you can immediately see that HTML document is in the title bar of the browser. The headline welcome is displayed very large and here you have your underlined word VLC. As a final step, we have to structure our HTML document. Visual structure makes the code easier to read. In case someone other than you has to work on your file, it will be easier. Moreover, opening and closing tags can be spotted quicker. This is why we are going to indent our tags and break the HTML into a tree like structure. So this is what we are going to do now in our editor again. You can simply use the keys on the keyboard for that. Another point are ignored items such as double spaces or line breaks which are inserted without using the proper tag which is the BR tag as you know already. So let us now insert some of these ignored items and save the document and then check in the browser again. So I am going to use double or triple spaces and I am going to insert a line break via the enter key on the keyboard. We have to save the document again and open it in the browser. And as you can see, nothing has changed here. Please also remember that changes to a document are only visible in the browser after saving it again or reloading it in the browser.