9.6 Include intro: Head and header - Video Tutorials & Practice Problems

<v Michael>All right now we've factored our site</v> into this layout here that's being included in index.html, right here. And we've also factored the CSS into its own file. So now we're gonna start slicing up this default layout into more pieces; Things like the head, we're gonna add in some navigation links, and we're just gonna basically take this thing apart and make it more modular. And the method we're going to use for this is called includes. It's important for includes to be self-contained and reusable, right Lee? 'Cause there's something that includes, we can basically reuse them anywhere. <v Lee>Right.</v> I mean, they don't technically have to be self-contained, but it just helps. There's actually a situation later in the tutorial where we'll be changing the includes to be not self-contained, in that they'd be a little bit of broken HTML, and they have to be put into the page in a certain way. But it's always a good idea that you want content that is self-contained if you can help it. <v Michael>So what does self contain mean</v> in this context exactly? <v Lee>That just means you could drop it</v> anywhere on a website and not have it look weird, break or do weird stuff. <v Michael>Okay.</v> There's one note that I'd like to make with respect to this word, we're using the word include, which is actually not standard English, but it's standard in the world of static site generators. And it actually follows a pattern. So we're gonna use the Jekyll keyword include, which is a verb, and in this context include is a noun. And there're actually a whole bunch of examples of this. Here's a webpage that's linked in the footnote in the tutorial, that has some examples. But we rolled into this website and realized that it's actually pretty instructive because it's quite hard to read. Look at the text here, it's a little bit light. So before we look at some examples, I just wanna inspect this. <v Lee>This is a prime example</v> of you should always be making sure that your text has a high contrast with the background. <v Michael>Right.</v> <v ->So if the background is white,</v> you want things to be... You want text to be dark on a white background, and it doesn't necessarily need to be black, but- <v Michael>In fact,</v> in general, isn't it preferred not to use black? <v Lee>Yeah, it's preferred.</v> It's just black can sometimes look a little bit too harsh. <v Michael>Yeah.</v> <v Lee>But the real issue is contrast.</v> Like you want your text to contrast nicely with the background. So in this case they're using 777 gray, which I'm just gonna start referring to colors this way. But that's a pretty light gray 999, the last of the numbered hex colors in the gray scale is even lighter, and that's like the last number one and seven is pretty close to that. <v Michael>Yeah.</v> <v Lee>The way that I think about it</v> is you have the numbered ones which tend to be darker grays and then the lighter ones which are lighter grays. <v Michael>Right.</v> <v Lee>And once you get towards the end of the numbers,</v> like you're really having to decide that you want to have a light gray. But 777 is way too light for this weight of font. <v Michael>It's pretty thin.</v> <v Lee>Yeah, it's pretty thin.</v> So we're gonna change it to 000. If you had thicker- <v Michael>That's actually black, yeah.</v> <v Lee>Heavier fonts,</v> you might wanna use something like 222 or 333, but we'll change it real fast. It still looks a little bit too washed out at threes, and even two is... It's okay, but it's not great. So this is one of those things that is very subjective, it's based on what fonts you're using and how you're using them, but in this case I would just make this black 'cause it's way easier to read this way. <v Michael>Right.</v> And so now we can see some of these examples and it's amazing how many there are when you see them all lined up like this. So there's CONduct and conDUCT, ATTribute and attrIBute, COMbat and comBAT and so on. It's just so many different examples. OBject and obJECT, SUSpect and susPECT. So this is another application of that usage. The idea is we already have a verb called include, and now we have these things, these objects, these nouns called include. So we change the pronunciation according to this pattern here. And as you'll see, as I just alluded to, it's actually the keyword in Jekyll, we'll actually be using the word, include. So let's get started by making the directory that you use for includes. It's called the includes directory. And like a lot of the special directories in Jekyll it begins with an underscore, that's important. And we're gonna start by making an include for the head of the page. So this stuff here. So let's just make that file. So the idea is we're gonna factor this content into a separate file, and then as we make other files for our website, we'll be able to include that head so that it'll be the same on every page automatically. We don't have to copy and paste. So let's do this and then, you can paste it in. Oh that's right, Shift command V, there we go. That's the right indentation level, save it. And now we have to use some special liquid syntax. Is this liquid or is this... <v Lee>This is liquid.</v> <v Michael>This is Jekyll,</v> so this is part of liquid. So we're gonna use some liquid syntax to include that include, there we go with the pronunciation, and the syntax looks like this. It's the curly braces with percent, like this. And then we just say include, and then the name of the file. And Jekyll knows to look in the underscore includes directory. So actually I'm gonna do this. And do you happen to recall the way to comment out something in Jekyll or in Liquid? <v Lee>I think you just used the HTML comment.</v> I actually don't know. <v ->Or we could just do this.</v> All right, let's take a look at that. So if we do this it reverts because we're now not including the CSS file, 'cause that's right in here. So let's take a look, this should work now. Look at that. <v Lee>Now one thing that Michael did there</v> that I would think about changing though, depending on the site, is if you go back to the code. <v Michael>Yeah.</v> <v Lee>We included the head,</v> the opening and closing head tags in this include, and that's because this is a really simple site, and it's not something where we plan on having a bunch of different head sections for the HTML. But if you were doing something that was a bit more complicated, you might wanna leave the head in the default layout so that you could potentially have different includes that were dropping different stuff in there, and not have to repeat the head tags. But for this very simple site, we're just not doing that. <v Michael>Okay. Well, that's a good example</v> of the kind of flexibility that Jekyll gives us because if we decided to make that change later on, then it would be a little bit of work, but it wouldn't be too hard. <v Lee>Right.</v> <v Michael>And it's the kind of thing</v> where we could put in the head tag here, and then have a bunch of different includes. <v Lee>Exactly.</v> <v Michael>In here.</v> <v Lee>Yeah.</v> So sometimes the reason you'd wanna do that is you might have different CSS for different pages, or a different JavaScript or things like that, so that you don't have huge load times and stuff like that. But here, a simple, straightforward site, this is easier. <v Michael>Great.</v> All right, now the next thing to do in application of these includes is to look at the site header. So lemme take a look, I somehow lost my images folder. Here we go. So if you recall from our page here, that we've got a page header as the standard part of the design of a webpage. So there's like a logo here, navigation links and so on. So we're gonna add a header, not to be confused with the head, which is not visible to the user, and we'll design it so that it can be reused on multiple pages of the site. So this is an interesting case, Lee, 'cause I think you're the one who originally did this, but you did what I would've done too. Which is basically you said, all right, well I don't know what it's gonna be yet, but I'm just gonna put it in. <v Lee>Exactly.</v> <v Michael>Except I would say include, or include.</v> So I would say, okay, let's say include, header.html. Now this actually breaks things, right? What does it do? <v Lee>It'll print out.</v> Oh no, sorry. It doesn't break things yet. It's after you make a empty one that it'll break things. <v Michael>Okay.</v> There actually is a warning here, there's a little warning in the Jekyll server. It says that it can't locate that file. So let's create it. <v Lee>There you go, an empty thing.</v> <v Michael>Right.</v> So will it actually break the page or is it smart enough? It looks like it's smart enough, it's like robust. It says it's not there but it returns the previous version. Well, in any case, let's fill it in. Well I guess, I mean, it actually is there, right? It's just empty. <v Lee>Correct, yeah.</v> <v Michael>So it's not giving us an error anymore.</v> Okay. So one of the things that we're gonna do here is put in a division for the page. And so we've talked about how divs are the generic way of doing that, but there's a relatively new set of elements that have more transparent meaning. So Lee, this was a change that I remember happening. <v Lee>Yeah, it was a very slow change.</v> <v Michael>This isn't done many years ago.</v> <v Lee>No, but it was a very slow change</v> in that it's taken a while for it to catch on and it's not required. So that means that not everyone does this evenly across the internet. But the idea here is that you have a whole bunch of new elements that have names like header, that work just like a div. <v Michael>Right.</v> <v Lee>But the idea</v> is that this is gonna contain information that is a page header or a section header. And the idea behind all this is that you're making the site more machine readable, so that search engines and other contextual aware applications can better understand the content that's on your page. So within the header, we're actually gonna also put in a nav section, which also uses another semantic tag. And this is where like nav links would go. <v Michael>Right.</v> <v Lee>It's not any different</v> than using a div for these things, it's just a different name. Like they functionally are the same sort of thing. And actually in old browsers, these will default back to just being a div if it doesn't understand what they are. <v Michael>Yeah.</v> <v Lee>It's just a good idea</v> to start using these and, you know, start playing along with the ideal standards for webpages. <v Michael>Right.</v> But we are gonna do something a little bit sort of redundant in the sense that we're gonna add a class. <v Lee>Right.</v> <v Michael>Of header.</v> <v Lee>And this is for two reasons,</v> one it's for backwards compatibility. <v Michael>Yeah.</v> <v Lee>Because if you were to target just header</v> and someone tried to go to the site on a browser that doesn't support these new semantic elements, the browser would have no idea what HTML element header is. I mean, that's less and less of a problem over time, but then it's also a good idea to use classes for your styles instead of targeting willy-nilly HTML elements. <v Michael>Yeah.</v> <v Lee>Because you actually shouldn't just use header</v> for like a page header, it can also be like the header for an article. <v Michael>Hm-hmm.</v> <v Lee>Perfectly valid semantic use of the header tag.</v> <v Michael>So it could be header class equals article,</v> then maybe in that case. <v Lee>Exactly.</v> <v Michael>Got it.</v> <v Lee>It's always better to add a class</v> and target the class. <v Michael>All right.</v> And so for this nav menu, we talked a little bit about this in the context of these social links here. We're going to use an unordered list, you mentioned before that this has become pretty common convention. <v Lee>Exactly.</v> This is very common convention to use an unordered list to contain all your navigational links. The nice thing is that if for some reason your styles don't load, it just is a list of links which is what a navigation is. <v Michael>Right.</v> All right, well let's make some LIs here. We'll start off with a home link, and that will go to just the root part of the site, which is slash. And then the other ones we're just gonna stub out. So this is a common practice when you're not sure what they're going to look like, what they're gonna link to. We're just gonna give it an HREF of the hash symbol. So, like this. So that gives us a total of four nav links with one that will actually work. <v Lee>Hm-hmm.</v> <v Michael>And then we're gonna follow this convention here</v> with having the logo. And by the way you might be a little bit confused as I was actually, about why the logo is going at the bottom. We're gonna put it here after the nav, even though it comes logically first in terms of left to right across the page, we'll talk about why that is in just a moment. <v Lee>It doesn't always have to be this way,</v> it's just what's needed because of how we decided to style the menu for the navigation. If we did the menu in a different way, then it wouldn't have to be after. It's just, 'cause the way that we wanted to show it working, this is what we have to do. <v Michael>Yeah.</v> All right, so let's save that. And again, let's just move these around actually. So here's our layout and we're including the header, so it should appear. What will it look like? (Lee chuckles) There it is, look at that. It doesn't look great yet, but we've got our classes in there so we're ready to style it with CSS. <v Lee>Yep.</v> <v Michael>But this is big because it's actually appearing.</v> <v Lee>And it would be appearing on any page</v> that is also built onto this layout. <v Michael>Right.</v> As we'll see, when we start adding other pages. All right, speaking of styling it, it's there but it's not very appealing yet. So what are some of the considerations here? We wanna add a new section. Let's go to our CSS file. <v Lee>Yep.</v> And then in general what we're looking to do is we're gonna wanna make these links go horizontal instead of up and down, and then we're gonna move the links to the right hand side of the page, and leave the logo on the left hand side of the page. <v Michael>Where's a good place to put this?</v> 'Cause this is the kind of thing that's on multiple pages, so before we sort of organize this in terms of things that were maybe more specific to single pages. <v Lee>So I would put this after the global.</v> <v Michael>Right after global, okay.</v> <v Lee>My reasoning for this</v> is just that I like to think of the style sheet organization kind of the same way, or laid out in the same way that the page is. So the header would be up on top along with any other global things that are on every page. Which I think we mentioned before. <v Michael>Okay, so we've got header styles here,</v> and we've got our header class, header nav, and header logo. So we'll probably mainly be going with the... Are we styling the header? It looks like we're just styling the header nav for now. <v Lee>Just the header nav for now, correct.</v> <v ->Okay, so this is here just as kind of a placeholder</v> for the future, in case we need to style this globally. <v Lee>Yeah, and it's also a wrapper for us too.</v> <v Michael>Okay.</v> <v Lee>To contain all of this.</v> And we will be styling that one, so. <v Michael>Okay.</v> All right, we've talked about floats before. We've mainly talked about it in the context of images I guess, but we did it with the boxes too, is that right? <v Lee>Yes, we did a float test with that.</v> <v Michael>So let's float these to the right.</v> All right, and we refresh it and it goes all the way over here. And then style the LIs. All right, so we wanna target... Again, we did this before, right? <v Lee>Hm-hmm.</v> <v Michael>With the social list.</v> We actually don't technically need this right here, but what we really wanna style is just the first level of LIs. <v Lee>Exactly.</v> So that if we do decide to have a sub nav, it's not gonna affect those. <v Michael>Yeah, and this is probably even more important</v> because with these, it's pretty unlikely that we're gonna have like sub social links, but having a sub nav is really common. <v Lee>Exactly.</v> <v Michael>Right.</v> <v Lee>And we're gonna build a drop down menu later</v> just to highlight that. <v Michael>Right, okay.</v> So this is the child selector, is that right? <v Lee>That is correct.</v> <v Michael>Okay, and so we're gonna</v> make this display inline block. Let's see what that does. Look at that. Now, that got rid of the bullet points, is that right? <v Lee>It did.</v> <v Michael>Okay, I was surprised by that.</v> I was looking, it was like, I see bullet points, aren't we gonna tell it not to have bullet points? But it looks like we don't have to. It's cool. And we talked briefly about the order of the elements here in the header. <v Lee>And the reason that you were surprised about this</v> is that normally you'd think that, well, if something's on the left, in our left to right society, it would be at the top. <v Michael>Yeah.</v> <v Lee>But the problem is that</v> because we're floating the navigation to the right. <v Michael>Yeah, right here.</v> <v Lee>Yeah.</v> If the logo came first, the navigation gets pushed down below the logo. Whereas if we flip the positioning of those around in the HTML, when the float happens, that floated line takes up no space, so the logo stays up at the top. <v Michael>Okay, that's cool.</v> <v Lee>Just one of those random tricks.</v> <v Michael>Yeah.</v> I didn't know about that trick. All right, now we're gonna take a look at styling the navigation links a little bit more. Move this over here. And this is the kind of thing where you just kind of play with it, right? You look at it and say, well, it would be nice to have some padding. <v Lee>Yep, change the color,</v> get rid of the little line underneath. You can leave the line there, it's called a design affordance that gives people a hint that those links are clickable, but navigation tends to not have those little underlines. They tend to be used just in text itself. That's the kind of thing that you'd wanna get rid of. <v Michael>Okay.</v> <v Lee>Yeah, it's about positioning,</v> size, color and interaction. <v Michael>Right, and so this is top right, bottom left,</v> just to review. <v Lee>Hm-hmm.</v> <v Michael>And I see that when you were making this,</v> you decided to scale it based on the viewport height. <v Lee>Yes.</v> <v Michael>What's the motivation for that?</v> <v Lee>It was to use extra unit types,</v> but also it'll help later when we do a mobile styling for this. And it's nice to know what the whole height of the header is in terms that work well for mobile. And if everything is eventually set to a set view height, it's real easy to change things for mobile. <v Michael>Okay.</v> <v Michael>So you can say that, oh,</v> we're fitting everything into 10% of the view height, or whatever it is. <v Michael>Great.</v> So another thing we're gonna do is we're gonna make some extra space here. These are squished together, so we'll add margins. <v Lee>Yeah, we wanna separate those</v> so that they're a little easier to click on and easier to read. <v Michael>So that will be on each of the elements.</v> It's this here, so it's gonna be the left margin. And we'll make it, what is it? One em, is what looks good? We can do like, you know, three em, and look at it. <v Lee>Three em would be really big.</v> <v Michael>That's a little bit too much.</v> Let's try two em and see how that looks. Eh. <v Lee>It's okay,</v> but on a smaller screen, if you had a lot of navigation that would start to get pushed into other stuff, so. <v Michael>One em looks good.</v> <v Lee>Yeah.</v> <v Michael>But again, this is a subjective field.</v> And then we're gonna style these links, right? And to do this there's several styles for this. <v Lee>Yeah, like the color, the font size, the weight.</v> <v Michael>Right.</v> And if we look here these are anchor tags inside the header nav class. So we'll do that like this, and we don't have to do this because we're not gonna have like nested anchor tags, it's probably not even valid, right? <v Lee>No, it's not.</v> <v Michael>Yeah.</v> <v Lee>You cannot have a link within a link.</v> <v Michael>Right.</v> So here let's change the color to black. Again, it's important to be bilingual with the color names, and the hex, for something this common. And let's look at the font size. And I see that you chose to use rems here. <v Lee>Hm-hmm.</v> <v Michael>So this is absolute based</v> on the font size of the HTML. <v Lee>Of the entire page, correct.</v> <v Michael>So why not use ems instead of rems here?</v> <v Lee>It was just to make it</v> so that things would be more static for the navigation, so that if at some point we decided to change the header in general, the font sizes in the header, it wouldn't affect the links unless we really, really wanted the links to be affected. <v Michael>Right.</v> All right, so let's take a look at that couple changes. A little smaller, they're black now, and you can see that it's got that text decoration. Let's make that none. I see that very common in these sorts of links to get rid of the underline, for nav links. Not down here, right? We wanna keep them... <v Lee>Right, you wanna keep it in text.</v> <v Michael>Well, a lot of sites now</v> get rid of them everywhere, depending on the design possibly <v Lee>And it's kind of a frustrating exercise sometimes</v> if they're totally gone, it makes it real hard to know what is clickable and what isn't. <v Michael>Yeah.</v> <v Lee>But there are other sites like Learn Enough</v> that use a slightly custom version of it, just because the stock single pixel line doesn't always look very designed, yeah. <v Michael>So these are a little thin,</v> so let's make them bold. That's with font weight. Let's take a look here. It looks better. And now this is a cool one. We're going to make them all uppercase, which is fairly common in these sorts of navigation links. Now we could do that like this, we could go to the header and say home, all caps, see? And do the same thing for the nav links. But then if we decide, you know what? We actually don't want it all caps, then we have to go back and edit it. Now it's not that bad, 'cause it's just in one file, right? We've made our site nicely self-contained here with this header. But there is actually a way to do it in CSS, which is to do a text transform. In this case, upper case. And just remember that all of these things, like the font weight, text decoration, you can go online and look at the references. So you don't have to memorize all of the different possible values of these things. I'm sure that there are some pretty cool things you could do with text transform, for example. <v Lee>Yep.</v> It's just a handy way of dealing with modifying text so that your text stays nice underneath and you can always change it in one place instead of having to go back and edit text in a bunch of different places. <v Michael>Yep, so let's take a look.</v> And so now this will stay all caps and then these ones will be capitalized too. Here we go, all caps, I should say. There we go, look at that. So that's pretty cool. And this is the kind of thing you might use on say H1 one or H2, or something like that, some sites do that. <v Lee>Yeah, exactly.</v> <v Michael>And it's like an elegant way</v> to communicate that this is a design choice, it's not all caps because the word is all caps. It's all caps because we want it to look that way. <v Lee>Exactly.</v> And it's easy to change, like I said. <v Michael>Right, it's really convenient.</v> <v Lee>I can't reinforce this enough.</v> If you've ever made the mistake of going through and capitalizing things when you're writing it out and then wanted to change it, it's annoying. <v Michael>Yeah.</v> <v Lee>Yeah.</v> <v Michael>Great, all right.</v> Well it looks like we've made some good progress. This logo is looking a little questionable, but we'll take care of that. But this is nice, we've got some nice nav links here. <v Lee>Yep.</v> <v Michael>And as we'll see later in this chapter,</v> we're actually going reuse these nav links and we'll see the true power of includes in that case. <v Lee>Yes.</v>