 Okay so welcome to the third and fourth part of this course which is all about HTML and in this lecture we cover the basics of HTML we cover lots of tags lots of examples how to add content to a website then we go a little bit into the distinction between X HTML HTML 5 and finally we cover what it means that HTML is correct we go into HTML validation and discuss accessibility of websites the learning outcomes are that you are able to explain key language concepts of HTML you should be able to define what accessibility means and give examples for that based on your HTML knowledge you should somehow be able to tell predict how a website looks like so far of course only restricted to the structure and develop basic applications this will to a large extent not come through the lecture but through the first assignment similarly the more advanced learning outcomes are to analyze source code propose improvements and improve existing applications and all of that requires a lot of practice so it will be mainly a part of the assignments now these slides are mainly a reference they contain lots of text and there will be demos now during this lecture and doing the exercise sessions and I'll upload all the files that I reference in this slide set but it's really a reference so they're not excellent slides they are a reference for you to read up and the demos we are doing they focus on content they are ugly so I do not anyhow design them in a nice way and the main reason is that HTML is simply not con concerned with design it's content so the styling the design comes later when we cover CSS in lectures five and six so don't get too upset if the slides are really not that nice as for literature there is a lot of stuff now the first two references are really good references to look up different tags examples for different things you might want to do with HTML so they're really good references great tutorials that cover everything from really basic stuff to advanced things so that that's a typical place to look up if you have any questions regarding HTML third one is really on HTML5 specifically the fourth one is the W3C validator will use this one heavily especially in the assignments and then the fifth and sixth reference are on accessibility the seventh is on the coursebook so chapter two is all about HTML there is a practical example in there you of course don't have to follow that but it's a good read to quickly read up required reading so relevant for the exam is only number six so this is a part on what you might want to look at when you look at accessibility now HTML I've mentioned a couple of times already and the acronym stands for hypertext markup language and what this means is basically we have some more hypertext and that's as we already discussed in the first lecture that's text that somehow contains links to other texts so basically text and links that's what we have an HTML and then markup language is basically a language where you can somehow mark or tag parts in the document to indicate logic structures for example you could mark that there is a paragraph or you give instruction how to lay out it so HTML is such a language other languages you might know for example markdown where you can indicate what is a paragraph what is a list and so on or the languages you use for editing text in wikis is similar but you'll get if you have never worked with HTML or anything similar you will see what this means to tag something so basically all together this is a language that helps you to write text and annotate it so that you can link to other texts but it's actually not only text it's everything else you might want to include so you include images videos sounds everything else in your text and these annotations that we have the part of the markup language they are so-called tags and an HTML attack is indicated by these angle brackets so you always have a start bracket and end bracket in between you have some kind of text that describe what this tag is about and the text you want to annotate is between the start in the end so for example here we have a so-called P tag this stands for a paragraph and here we have an end tag so this is the same name P and P and the only difference is that we have a slash so basically means that here our paragraph starts here our paragraph ends and everything that is in between is the text that belongs to this paragraph so that that's really how it works so if you would only use these P tags you could now write a number of paragraphs and HTML would understand that okay whenever we get to this tag then this one starts again then basically we get to a new paragraph so that's how HTML looks like you have the start tag you have the end tag and you have the content in between HTML is text so it can be read and written using any kind of text editor and that's good when you write it of course you have to somehow write your HTML code but the main intention is that it's interpreted so you don't want to look at source code at HTML code but usually you want to look at the result and that's what you do with a browser so if you have Firefox Chrome what they really do is they interpret HTML code and instead of showing you all the ugly tags they show you the formatted result so instead of showing you the P it shows you a paragraph so that's really the example here and this is not compiled it's just interpreted and this means whenever you look at a website you can actually look at the source code so you can look at the HTML and this screenshot is from Firefox where you can just right click and say view page source and I can demonstrate that so if we go to any page google.com for example and I right click and say view page source Chrome has something similar you'll get this window that shows you lots of cryptic text this is a specifically bad example because Google messes up a lot if we go to a different website for example I believe the Wikipedia website looks slightly more readable see this is already a bit maybe more readable but this is essentially as you see there are just these kind of tags that describe different parts of the document now HTML has different versions so it started in 91 already that's the first websites I showed you in the first lecture and it evolved and it's still evolving ideally a browser any kind of browser now they should be able to interpret all versions if it's declared properly in the source code but the issue is always that HTML is slightly displayed differently in different browsers so they some browsers are stricter they ignore certain things that you should not be doing others are more liberal and there are slight differences so it's always a bit tricky to get a website look exactly how you want it to look on all different browsers that's important to know we will look into X HTML and HTML 5 even though HTML 5 is sort of the standard nowadays X HTML has not really become very popular HTML 5 is developed as a so-called living standard that means it basically evolves it changes over time instead of releasing fixed versions it just evolves over time and you can look it up under this address if you're interested so this address describes what kind of elements you have for kind of tags how they are supposed to be nested and so on and the difference between the versions is essentially what kind of tags they support so what kind of things you can do and what kind of restrictions you have and what you how you declared is is the first line of an HTML document so there is the so-called dog type tag and if you use the first one here exclamation mark dog type HTML it means you are using HTML 5 this one here which is looks very cryptic is HTML 4 in strict there are different kinds of versions and the one down here is X HTML 1.0 strict so those are simply different versions of HTML but the most common one you'll see all over the place is just a simple dog type HTML if we go back to Wikipedia you'll also see that that's the case here so basically the browser knows we are having an HTML 5 document and it means the browser interprets it as such now let's go into what HTML really looks like so you have seen that we have tags but basically you have the dog type that tells you what is the version of HTML and what I've written here this kind of open tag exclamation mark two dashes and then two dashes and closing bracket at the end that's a comment in HTML so basically here I'm just having a comment saying HTML version so every HTML document should start with this tag then you have the HTML tags so you have the start tag and you have at the very end of your document you have the end tag and that should contain everything else so within this tag you have further tags and there are two parts that are particularly important it's the head and it's the body the head is indicated by the head tag and then the end tag that's meta information so that's sort of all for example the title of your website who is the author keywords and so on that belongs here the body is what you actually see so text pictures videos and so on and common thing is that you have a title in the head and then in the body you have tags for example the h1 tag is a heading and paragraph you have already seen so this website would show you in the toolbar it would show you my first website as a title and then the browser would display a heading saying my first website and under it a paragraph welcome to my website so that's the very basics of how HTML looks like the title is a required thing you should always have that the same goals for HTML and doc type now since you've learned Python it's maybe important to notice that the the indentation that we go in here is something that is done as convention in HTML but it's not required so you can put the entire code into one line and it will still look exactly the same indentation just makes it more readable but because you have the ant tags the browser does not need to have this indentation information so it's fine to have everything in one line the other thing of course that you have noticed is that tags can be nested so the head tag is within the HTML tag the title tag is within the head tag and so on and this of course has a logical meaning so for example the paragraph here is within the body and that means that it's displayed in the body and this finally means that because of this nesting an HTML document is actually a tree structure so you can say that the HTML tag is the root and then the head is one of the child's and then the head itself has another child and so on this is not so relevant right now but it becomes very important when we get later to JavaScript for example and as I already discussed this tag here is a comment and as long as you don't close it it's a comment so you can go over multiple lines there is no single line comment in HTML okay so you have seen tags and so far almost everything I've shown you had a start and an end tag but not all tags have an end tag one example that you have seen is the dog type tag there is no ending tag to this one and that's fine basically a tag does not need to have an end tag when it does not enclose anything when there's nothing within it so if you do a line break for example it's a br tag then then it doesn't make sense to have anything within the line break so it's simply a single thing an image is a similar thing you just have a one tag and that's it these are called empty tags that's just a name and there is a convention to add a slash before you close the bracket so you will often see something like that that simply says br and instead of directly closing the angle you have a space and a slash and that indicates it okay there's nothing else coming there's no end tag to this one and that's a convention it's not required the other thing that you have not seen yet in this very brief example is attributes but most tags can have something like attributes that's basically added information and in general that's a key value pair so you have an attribute name equals quotation marks and under value and a typical thing is for example the the image when you have an image tag you have to tell the browser where is the image located where is the image file and for that you need the source attribute so you would if you just do IMG and you close it it will not display anything it doesn't make sense but you need to tell the browser where is the image so you use source equals quotation mark test.jpg and that would mean that we are looking for the test.jpg file that's in the same folder as our HTML document so this is an HTML attribute very very common again if we go to the Wikipedia page you'll see this all over the place so for example here the HTML tag actually has some kind of attributes already the class attribute the lang attribute the directory attribute okay so that's the first part on HTML and we'll continue then with more tags and details in the second part