3.1 An HTML page about HTML - Video Tutorials & Practice Problems

<v ->Our first new page will be an HTML page about HTML itself.</v> In particular this will give us a chance to review the tags that we've covered so far. Let's call the new file tags.html line:15% There are a couple of ways to make this. line:15% One way is to do this, to do a new file and then save it and then put in the name. line:15% But probably my favorite way line:15% is to do this. To touch the file line:15% and then use the fuzzy opening like that. But other way works. The next step is to fill in the tags page with a skeleton and some content. Some start with this and see how terrible this is already. I'm having to copy and paste. This means if I wanted to add the meta tag here say I would have to add it here as well. So this is a duplication of effort that we'd like to avoid. We won't be able to avoid that effort in this tutorial but this will serve as a foundation for learning a templating system in learning SCSS and layout to be dangerous. This is the body of the page to save time, I'm just gonna paste it in. We'll review the structure here. Closing body tag, closing HTML tag. So what we've done here is we've added an h1. Actually, we'd like to have a new line here with the page header important HTML tags. Then we've got an image of a tagged Storm Trooper. And then, there's a paragraph that describes what this page is for. There's a second paragraph right here indicating that we're not actually showing all the html tags but we are gonna display many of those most important ones. Save that, you should be able to guess what's gonna happen with the line:15% this part of this image, especially. Oops I just refreshed the page. This is, this is an important lesson. This is the index page here but now we're working on the tags page. So let's see if it works. Ah, there we go. Yes and now we've got the alt text here in Chrome. Again if you're using a different browser that might not show but this is an indication that there's a broken image. So as before with the kitten image we're going to curl a copy of this tagged Storm Trooper from the learn enough CDN. As before we'll use the dash O option to download the file right to the images directory. And now I'm gonna put in a back slash just to show you how this works. This is what you might do in the written tutorial. You actually do put in the back slash but then, you can see here that an angle bracket appears you should not type that in that gets put in by the shell automatically. So this is just a way to continue onto the next line. line:15% And now I do dash OL cdn.learnenough.com/ and then just the name. I can copy it here. This is the I term when I highlight it it actually automatically puts it in the buffer. line:15% So if I paste in, it'll work but that's a shell dependent behavior or a terminal dependent behavior, I should say. See, here it is we've downloaded it successfully. line:15% And now go back, line:15% see if this worked. All right. That's great. There's one thing you might notice. If you look over this little paragraph here. We've got this link that we've seen before. We've got emphasized text here but we've also got this. This is different. This is new. You can see that it says, table in a mono space font. It says look, looks, it looks like typewriter text. That is the code tag. It's not one of the more commonly used tags but it is quite useful for exactly this context.