 So we've finished up with the introduction of what HTML is, what the tags are, and how a classical structure for HTML looks like. And now we go into depth and look at specific tags you can use. First of all, one important thing to note is that all tags, whether it's a paragraph or the body tag or the HTML tag, can have two attributes and that's the ID and the class attributes. So both of them are used to identify elements. And the ID is a single element, a unique element, which means that you shouldn't have any double IDs, you shouldn't reuse it. And a class is, well, it's a class of elements. So you might want to group elements in a certain way. For now, this is almost not relevant. But later on, when we want to use CSS for styling or when we want to add behavior through JavaScript, these things are really important because you might want to format or lay out specific elements, and then you have to select them somehow. And the ID and class are used to select elements. And similarly with JavaScript, you might want to read a certain element, for example, what has someone added to the input field for a login, or you might want to change it if you have some kind of behavior. So these things are very important. And you'll see that more when we get to CSS. Now let's look a bit at the head. As we already discussed, the head in HTML includes meta information. And that means, for example, the page title, where you just put text in between. And this is typically displayed in the browser bar. So if we go into any kind of website again, google.com, if you look up here, here it says Google, that's most likely the title if we find it here. So you see here is the title tag, and it says Google. So that's exactly what you see at the top of the page. Now, there are usually more things being used. One is the encoding, and that's done using the meta tag. So the meta tag and the char set attribute that basically tell the browser which character encoding to use. And that's particularly important if you use special characters. If you, for example, use the Icelandic special characters, it's important to use a certain character encoding. And then you typically have additional information about the page, and that's usually again done with the meta tag. And you could say, well, the name is keywords, content, cats and dogs. And that means, well, the keywords for your website are cats and dogs. We'll get to that later, but these tags are quite useful for search engines to find your website. So if you choose them wisely, you will be found better. The other thing that is often done in the head is the inclusion of scripts or CSS documents. Not very important right now. We'll get there. But just so you know it, if you do use the link tag with the rel attribute and the reference attribute, you basically tell the browser, please link to the style sheet file that is located in mystyle.css. So basically you load an external file. And the same goes with JavaScript, and you use the script tag and you just say, load the script at the source script.js. So that's it basically. It just means you include documents. Again, not very important right now. We'll get there. As discussed, you can optimize your website to be found by a search engine. And that's really what search engines look for is all the meta information. So the title of your website, the keywords, the description and maybe the author. And the keywords you have already seen and the title. So here we have the title tag. Here we use the meta tag with the name keyword. If you want to add a description, you just use the meta tag with name description. And then you add some kind of text all about cats. If someone Googles cats, there is a higher chance that they will find your website. And you can also add the author attribute to the meta tag. And then if someone searches for my name, there is a higher chance that they will find my website. This is good for accessibility, which we'll get to later. So not as relevant right now. Okay, so let's look at a complete example because now we have looked at the head. So you remember you need the dog type to declare that you're using HTML5. Then you have the HTML tags. You have the head tag and the body tag. In this example, we do not add anything to the body, so it's empty. But we add a couple of things to the head. So just a title, a character encoding, a description, author, keywords. This is in the material on Canvas is the file 01bearbones.html. So you can look at this example. I have it open here in VS Code. So you see that this is exactly the same as on the slides, slightly more readable. If we find this now and you can just open this file as you see with the HTML ending, it automatically here shows the Firefox symbol. So you can open it with any kind of browser, Safari, Firefox, Chrome. It doesn't matter. I'll use Firefox here. And you see that, well, there is nothing. But you see up here is actually my title bearbones.html example. And if we look at the source, you will see that it's exactly what I had in my file. So what we have now is a valid HTML document. It's arguably not very useful, but it displays what we wanted to display, which is nothing in this case. So that's how you would do a basic HTML example, and now we will add things to it. First of all, the body is there already, and it contains all the content that we want to see that we see in our currently in the blank window. And this is where we'll add stuff now. We can add text. We can add links, images, videos, lots of different things. And I'll just go through some of them. One important thing are headings. And for that you use the h1 to h6 tags. And this means that h1 is the most important heading, and h6 is the least important heading. So usually you would start with h1, and then you have h2 and so on. And the text of the heading is just going between the start and the end tag. So if I do h1, basic HTML tags, slash h1, I'll just get a heading that might look something like this. The important thing is that the actual size and the look depends on your browser. So the font type might change, the size might change. All that HTML tells the browser is that h1 is more important than h2 or h3. It doesn't have to be larger or bolder or anything like that. So the important thing is that h1 to h6 indicates the importance. Let's look at that. Second example, basic tags. I added a lot of different things here, and we go through the different parts. But I have, for example, the h1 tag here. And let's just open that browser, and you can ignore everything you see here. But the first part you see is exactly the screenshot I have in the slides. So I have added a heading. That's great, but let's continue. Paragraphs we have already seen, so let's add a couple of paragraphs. If you add a p tag, it just defines a paragraph, which includes sort of the space before and after. Again, this is in my example here. So you see this, here we present a number of basic tags. If we look into the code, you see that this is a p tag. And you'll also notice that I have one p tag here, and then I have another one for the you can find a full reference. And you see that the browser renders this at two different paragraphs. So it automatically adds a line break here, and it adds some space in between. So that's because they are in two different tags. That's the p tag. And then let's add an image. You have already seen it in the file, and I've already shown you the tag. The img tag defines an image. It's an empty tag, so it doesn't have any n tag, but it needs an image source. So somehow you need to tell the browser where the file is located and should display. And you should also add an alternative text with the alt attribute. So if you do image source HTML5.png, alt blah blah blah, it basically shows this file, it tries to locate it and display it. And if out of some reason it's not available, it shows you this text instead. This is also the text it shows when you hover over the image. So when you don't click on it, you sometimes see this bar that shows you the text. You see here that I have the image, and if I hover over it, it doesn't work in my browser, let's see. No, that's too bad. But if I out of some reason change the source of the image and it doesn't find it. So if I, for example, add something here, then my browser doesn't find this, and then you see that instead I have this text here. So that's the alternative text. Now, an important thing is here, I link to HTML5.png. And if we look into my files, you'll notice that the picture has to be in the same folder as my HTML file. Otherwise it's not found. So if I move this over here, and I would reload my page, you see that it's not found. If I move it back, then it's there again. So this has to do with how I declare the source. And we'll look at that a bit later. You can, of course, say that HTML5 should be in a subfolder and so on. So you can link to it. Not everything has to be in the same folder. It depends on how you write the source. Okay, so this is an image. This is also fairly straightforward. And then let's do some lists. So bullet point lists or ordered lists you might want to have. HTML exactly knows these two types. So for the unordered list, you have the UL tag. And for ordered lists, you have the OL tag. And then you start a list. So for example, here we do an unordered list. You do UL tag and you end it. And then for every list item, you just use the LI tag. So LI start, LI end. And you see here, this is the screenshot that it simply shows one item with a bullet, another item, a third item. And you can, of course, have a list in a list. So here I have an unordered list and you see in there I have an ordered list. And that's why here there is this indentation and there is a one assembly. One important thing to note is that for the nested list, the OL tag is actually within the list here, within this element. So you see that here I do not end the LI. It's at the end here instead. So that's an important thing that you get that right, that the OL, the sub list is nested in the list element above. And exactly this is again in my example here. So you'll see that it's slightly longer. Down here I have the thing I took the screenshot off. And then I have more examples that describe the different tags. So these are just a number of basic tags you might need. And now we're almost done. The thing missing here is the link, but everything else is actually stuff we have covered. So if you look at this, the head you have seen in the body we have an H1 tag. We have an image tag. We have a number of paragraphs. Then we have an H2 tag. If you look at the browser, you'll note that this one is smaller than this one. So Firefox in this case makes the H2 tag slightly smaller. Then we have an unordered list. You have seen those. We have an ordered list. Now there's the link left and then there are some special characters which we go into in the third part of this recording. No, sorry. It's already in this one. Okay. So last but not least we talked about hypertext. Hypertext has links in it. And that's the ATAC. The ATAC stands for anchor. So it's somehow anchors to something else. And it defines a hyperlink to another resource. Often those are pages, but you know of course that sometimes you have links that link to whatever, to an image, to a PDF file, to a video, whatnot. So you can link to resources. And you need to have the ref hyperreference attribute to define where to go, what to reference. And you have the target attribute to define how to open the link. So we'll get there. If we for example do a ref and then we have developer mozilla or blah, blah, blah, we simply link to this website. So if someone clicks on it, they will end up on developer mozilla.org. Then we have the target. And there are essentially two choices here. We have the underscore blank or underscore self. And those are those things you know, of course, if you do underscore blank, it opens the link in a new window. So it keeps your current website open, but it opens the link in a new window and self would do it in the same window. So those are typical behaviors that you have all seen. The convention is quite often that you use blank if you link to an external website. So here we go from our own website to mozilla.org and self if it's on your own website. You want to stay in the same document. So this is exactly what I have here. So you see the a ref target and whatever is in between the start and the end tag is the stuff that gets underlined and blue. So that's what you see here. And you see that the point the dot is already outside in my HTML code. So it does not get does not become marked part of the link. And to see that this works, we just click on it and you see that it opens a new tab here. And it links to the Mozilla page. So those are hyperlinks. And now we're really pretty far in our HTML stuff. We can do lots of basic things. But there's a couple of more things that are important. First of all, linking you can do not only to external websites. You can also link to parts of your HTML documents. And if you remember the URIs we discussed in lecture two, there was something called a fragment. So we had the possibility to have this hash symbol in our URL. And then we said this references a section in the resource. And what we can do is that we have a paragraph. For example, we have any HTML tag and we give this one an ID. So we identify this paragraph as important paragraph. It's a unique ID. And then when we have a reference, we can simply use the hash with the ID. And that will cause the document to jump down to that link. So that's exactly what Wikipedia does. So if we again go to Wikipedia orc to the URL thing. And you remember that if you click on any of this, we jump to this section. So up here you see the fragment. You see the slash syntax. And if we look into the page source here, you'll see that here is a tag that has ID. Syntax. So that's exactly this reference up here. And then the link up here, if I get to it, like this one, you see that it's exactly hyper reference to hash syntax. So that's how you jump within a document. That's one way of doing it, but you can actually link to a lot of different things. And I've already mentioned that for the image URLs that there are different ways to reference things. And URLs in general are of course used for hyperlinks, as I've just shown you, but they're also used for images. They're used for referencing files, JavaScript files and so on. So you can have a lot of different URLs and it's maybe important to look at them shortly. One of them is the absolute URL. And that's when we define everything. We define the host Google.com, the protocol and then the path. So in this case, what we refer to is the file c.html, which is on Google.com and it's located in the folder A, B. So that's an absolute URL. And that means wherever you put this URL, it should find it in the same way. The other option is the so-called relative URL. And the relative URL is always going from where you are right now. And you have seen that with a picture. So if I just do test.jpg, it tries to find the file test.jpg in the same directory. So it goes from where your HTML file is located relative. And to go into subdirectories, you simply add stuff before. So if you do scripts slash my JavaScript, then instead of trying to find my js.js in the current directory, it goes first into the scripts sub directory. We can try this here. You remember the image? If I instead want to have all my images in a sub folder, I can, for example, do image slash. And now if I first reload my example, you see that now it doesn't find the image anymore because it's not anymore looking in the same directory, but it's actually looking in a sub directory that is called img. So if I now move my image over there, it should find it again. So this is how you structure URLs. And you will see this in many different ways. And of course, the relative URLs are important whenever you reference your own stuff within your own directories, your own images. But if you want to link to Google, to Mozilla, to Wikipedia, then of course you need to have these absolute URLs because you need to tell the browser, go away from my current stuff, from my current directory, go through to Google.com and then from there. So you will use this quite a lot later on. Fragments, as you have seen, they can be part of an absolute URL, but also a relative URL. So I can have this whole thing, envikipedia.org slash wiki slash url hash syntax. But if I just want to go to section one in my own document, I can just use the reference hash section one or something in between I can link to a file so I can link to index HTML in my current directory, hash section one. Okay, the last thing we're doing now in this part is special characters. Some characters require special formatting in HTML and that's simply because they're reserved. So for example, you have seen that the anchor symbols indicate a tag. So if you want to have this symbol in your code, in your display text, you have to use something else. And HTML uses special characters for that. It uses the ampersand character followed by LT colon or GT colon as basically stands for less than and greater than. So what these symbols mean mathematically. So if you put this in your HTML in your text, you'll get a less than symbol. If you want to have the ampersand sign again, that's reserved for special characters. You cannot just put it in your text. If you want to have that, you do the ampersand and amp colon. Similar things you might want to have are accents or unload characters. So if you want to use the special characters in Icelandic, you can use the following symbols. Nowadays, with all the different encodings and HTML5 and modern browsers, a lot of these things work out of the box. So you can also just write the for example and it will display correctly. But it's more correct strictly speaking to use these special characters formatted in HTML. So in the second example, you see that I'm using these. So here, for example, I use the less than and greater than to display the symbols in the browser. So if you go here, you see that here is actually the tag and for that I have to use a special character. And I believe that's it in here. So now we have actually covered the complete stuff that is in this second file. And as a last slide in this part, we want to talk about space and line breaks. In HTML, if you have multiple spaces in your text, they are simply ignored. So if you add five spaces, it will still only display one. And that means that if you really want to have more than one space, you need to use a special character. And that's the ampersand nbsp, which stands for non-breaking space and a cologne. And similar a line break in HTML text is ignored. If you want to have one, you use the br tag or you start a new paragraph. So it's important to keep this in mind. You can try this out very easily. So if you see that we just put line breaks in here and we add after HTML, we'll add lots of space. You'll see that in the browser is does not change at all. So it looks exactly the same. You can use this, of course, to somehow make your HTML document more readable. But in general, it's ignored. Now, one important thing is don't ever use spaces or line breaks for layout. So if you want to have more space under something, don't just add five line breaks. For this, you would use CSS and we'll get there. But HTML is really purely for content. So you add what you want to add. You do not lay out with HTML. Okay, so this is part two of this lecture and we'll continue them with a number of advanced things like tables or divs or forms.