So you want to start putting together a website. Where do you start? Well, at the top, of course. The first thing anyone ever sees on your website is your header – so you want it to be great.
What goes into a good header? A good design, for one thing. A great logo, some nice fonts… a header that sets the tone for the rest of your website. But that’s not what I’m here for (believe me, you don’t want me designing your site!). The other important part of your header is the code – what makes your header actually work. And if you want to talk code… you know I’m your gal.
Head… Header… There’s a Difference, You Know
We’ve already discussed what goes in the <head> section of your website. And you know by now, that the <head> is not the same thing as the header. However, when you’re putting together your php files for your website, 99.99% of the time you’ll find the <head> of the website inside of the header.php file. It makes sense, right? The header.php file displays what’s at the top of every webpage, the <head> section is at the top of every webpage… so you might as well throw them together.
So you’ve got the doctype declaration up top, then the entire <head> section… and after that </head> closing tag, the <body> section of your website begins. This is where your header code starts.
Body First
So what comprises a header? Well, before it even starts, you have the opening <body> tag. Everything you see on your website is going to be inside of the body tag. So if there are CSS styles that you want on the entire website, then you can set them in your style.css file on the body tag, like this:body { background-color: #c0c0c0; } This just sets the background color of the body tag to #c0c0c0 (that’s the hexadecimal code for grey – more often than not, you will see hexadecimal codes used to refer to different colors on websites). Similar to how it is in PHP, you always need that semicolon at the end of each attribute, as well as the colon after the attribute name. Here the attribute name is 'background-color', and the attribute value is '#c0c0c0'. And since the <body> tag encompasses everything in your website, then the entire background will be set to gray. Think of it like your first coat of paint – you can add more paint on top of it, but the bottom layer will always be that color.
Backgrounds Are Important Too, You Know
Once you’re inside your <body> tag, what’s next? Well, let’s take a look at the header here on SushiCodes. If you look up top, you see that the first thing you see is the logo. There are a few things to take note of, regarding our logo. First of all, it’s really damn gorgeous. nods Yep. Heh… but we’re supposed to be talking about code here, aren’t we, instead of Son’s beautiful designs. shameless grin
First thing to note is that the logo is a link. That’s right, the entire logo. You can click anywhere on it, and it’ll take you to SushiCode‘s homepage. (Wait! Come back! There’s still more to talk about!) Second thing to look at is the image itself – no matter how big you make your browser, even if it spans the entire Vegas strip, the image will still go across the entire page – without getting all stretched out of shape. (Er, not that I’ve ever tried this. But it sounds nice. And hypothetically, it should work…)
But how do you get the image there in the first place? More often than not, especially if you have a fancy header like ours, you’re going to want to use a <div> element, and put an id on it. (Need a quick refresher course? Go back and check out my post all about ids and classes.) Let’s call this id “header”. So it ends up looking like this:
<div id="header"></div>
Now that’s great and all, but how do you use it to put in a header image? Why, CSS, of course. Yup, we use a background attribute again. But this time we’re referencing the id, not the tag name – it would be silly to reference ‘div’, because we’re going to end up with so many <div> elements in our code that our CSS isn’t going to have the faintest idea which one we meant, and therefore put the style on all of them. Which is certainly not something we want, at least not in this case. Nope, instead we use the id name, like this:
#header { background: transparent url(images/header.jpg) no-repeat 0 0; }Hm. That looks kind of similar to the background that we put on the body… but there are a lot of differences.
First off, it just says background, not background-color. This is because we’re setting more than just the color. Where it says transparent… that’s the color. We could very well have put #c0c0c0 in there, or whatever color we’d like. But if we want the possibility of the layers of paint beneath the background to shine through (which certainly does happen, sometimes), then it’s better to just make it ‘transparent’. And sometimes you do want a different color on the background, and want to set it there instead of writing ‘transparent’… and that’s fine too.
Then it says url(images/header.jpg). It’s still part of the background attribute, because we haven’t seen a semicolon yet. This tells your browser where to find the image that you want to use for your background. Usually in most WordPress themes, there’s going to be a folder inside of your theme called ‘images’, which is where every image you use in your theme should go. That way you can always use the path images/imageName to tell the browser where your image is. (And don’t forget the extension! ‘.jpg’, ‘.png’, ‘.gif’… there are different situations for each, but you’ll probably see at least ‘.jpg’ and ‘.png’ images in your theme.)
Next, you tell the browser how that image should repeat. I used ‘no-repeat’, since I don’t want a tile that says “SushiCodes” repeating itself across the page. (I only want that logo image once, you see.) But if you do want it to repeat, you can use repeat-x, repeat-y, or repeat. Remember in high school math class, where the x-axis was the horizontal one, and the y-axis was the vertical one? It’s the same here. If you want an image to repeat horizontally you say repeat-x, and if you want it to repeat vertically then you set it to repeat-y. And if you want it to repeat both horizontally and vertically, then you just say repeat.
The last part of the background has to do with positioning. For my background, you see that I wrote 0 0. Think about graphs once again, and you remember that (0, 0) was the origin. This is the same, except 0 0 is the top left-hand corner of your div. (For you math nerds, that would put us in the fourth quadrant, if I remember correctly.) Sometimes you’ll see values like center center, or left top… these do the same thing, except aren’t quite as exact. If you needed your background to be a little lower than how it started out, for example, then you could write 0 10px (Don’t forget the px! Otherwise it won’t work right.), or if you wanted it slightly to the right, then do 5px 0. Or any combination of the two.
When you’re setting the background attribute in CSS, remember that it always must go in this order: color, image url, repeat, position. If you mix things up, it’s very possible that your browser will get confused.
Little By Little
I think that’s enough for one day, wouldn’t you agree? It doesn’t seem like much – after all, we only really talked about backgrounds. But it’s quite important, and very useful. I use backgrounds all the time, and sometimes even for uses that you might not even think to use them for! They’re very, very handy.
So now that I’ve given you a little taste of what goes into a header – an appetizer, if you will – next week, we start in on the main course. After all, you don’t really think that I’m so mean that I would tell you about how our entire header is a link, or how it spans the entire page no matter how big, and not tell you how to do it yourself, do you?
No, of course not. But you’re still going to have to come back next week if you want to find out.
3 Comments
Pingback: HTML: Navigation – SushiCodes
Pingback: HTML: Header Accessibility – SushiCodes
Pingback: HTML: Footer - SushiCodes