3.5 A navigation menu - Video Tutorials & Practice Problems

<v ->We're almost ready to start styling this book report.</v> But first, I want to add a navigation menu. We're gonna start on the index page. Aw... and what we're gonna do is add a menu at the top of the page so that we don't have to keep typing in the URL. In this case, say, "tags," and instead can click on a menu. So, let's see how that goes. It'll be logically separated by a div at the top, like this. And then we're going to include some anchor tags. Now, we've seen so far how to use an anchor that links out to an external site like this: learnenough.com/email. Here, we're going to link to another page on the same site. And the way to do that is with relative links, like this. We can just leave off all of this stuff here. Just put in, say, "index.html" for this page. It's the homepage, we'll call it. Just copy this and paste it a couple times. And we'll say the next one will be-- Well, this is actually an exercise. I'm gonna put in "Moby-Dick," which logically should be the third one. That's the third one we made. And this is tags. You can see the order up here: Index, tags, Moby-Dick. But this is actually an object lesson. And tags... actually, "HTML tags" it is. Save that and take a look. Okay, we can see here: home, Moby Dick, HTML tags. So, if I wanna get to the tags page, I can go here, and then we notice, oops, we don't have a menu here, so we can copy it. Oops... I'm not pretty good at figuring out where the new lines are gonna be. Do this here and refresh. Now we can get to home, tags, Moby-Dick. Oops, it's not there. So, this is less as an exercise, but I might as well solve it. It's pretty simple. Actually, it's already in the buffer. At the top here and paste in... You can see here, refresh it. And there we go. Now we can get anywhere in our site using the navigation links. Of course, it doesn't look good. We'll style this a little bit in this tutorial, but you really want to use CSS to get the styling right. I'm gonna solve another exercise from the tutorial which really shows how inconvenient it is to write HTML by hand like this. When I was first learning HTML, I remember being really confused, because I'd been to a lot to websites where you could look at this sort of navigation menu, and it would be the same on every page, like this. But I thought, "what if you need to change one of the menu items?" So, for example, we wanna swap Moby-Dick and HTML tags to reflect the logical structure of our progression. So, do you really have to change it everywhere? And the answer is, yes, you do. But in real life, these sorts of layout items are never generated by hand. They're always generated by a program. So, the right solution to this problem, which also solves the problem of this skeleton reuse, is called a template. It's something that's covered in learning how CSS and layouts could be dangerous. It's also something that's covered in-depth in the Ruby on Rails tutorial. So for now, let's just change this here, that's on the Moby-Dick page. So we can see here, now it's updated: Home, HTML Tags, Moby-Dick. But if we click here, say, it reverts to the previous order. So, we actually have to go to each one, make the same change. It's easy enough here, but it's really cumbersome, and it's the kind of thing that's also error prone. You could easily make a change in one place, and forget to make it in another place. So, if there were typo for some reason... let's add an HTMLE here... Now we've broken a link. Where is that broken link? I don't even know. Oh, it's on this page. Oops. So, this is really not a good idea. And for an industrial grade web application, and even for a static website, it's a really good idea to use a templating system. As mentioned before, this tutorial with the basics of HTML is a necessary foundation, but to deploy a production website that can be updated and maintained over a long period of time, it's really important to learn how to use a template system, which is one of the subjects covered in the next tutorial in the sequence. But for a small website like this, programming by hand might be sufficient and also lets us experience the annoyance and pain of maintaining these sorts of links, so that in the future we'll be in a better position to appreciate just how great having a templating system is. This is a great start, though. So let's take a look at our system. We've got our page, we've got our menu links. I think it's time to make a commit and push up to production. We've got a new file here. In fact, several new files. Ready to go. Push it up... And we should be good to go. Let's check it out. Remember this is our production system here. Refresh. There we go. You can see here that our relative linking in the menu is working both locally and in production. And this way of indicating the location is the same as the source for images. So this is source, images directory, slash name of the file, and here we just have the name of the file because it's in the root directory of the site, like this.