First off, you should begin by making an overview of what your page should be about, how it should look like etc. I always begin by making some mind maps. Then I draw some logos and headers on paper and pick out the one I think looks best and is best related to the topic my page will be about.. Well, enough about that. When you've done all the graphics in Illustrator and Photoshop, you should start putting them together in Photoshop and see how it looks with a content box and navigation box. In this tutorial we will be making a simple 2 column layout with a navigation box on the left and a content box in the middle with a header on top. Really simple.
It's time to begin coding, then!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
The doctype will show your browser what language the website is coded in, in this example, we will use XHTML 1.1, which is my favourite. I'm a perfectionist, and I love perfect code, so I always check if my code is perfect in
the validator at w3. The doctype will help the validator to see what language the site is coded in, also.
Now,
<html>
<head>
<title>Your page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<link rel="shortcut icon" href="favicon.png" />
</head>
This is the header information, here we have the title, the link to the CSS-stylesheet (We'll come back to that later), the language the content is in(<meta> tag) and also the link to the favicon(if you have any).
Here comes the fun part.
<body>
The body tag is just there so the web explorer knows that the page it self is begining.
<div id="wrapper">
The code above is useless without the
id="wrapper" part. It makes the browser go into the style.css and dig up the ID named "wrapper" so it can form the <div>. ID's can only be used once in a page, while classes can be used several times. Since we only need one wrapper, we will be using ID. Now, let's dig into the CSS part.
* {
padding: 0;
margin: 0;
}
This part of the code just makes sure that the padding is 0 and the margin is 0 on the whole page unless stated otherwise in any classes or IDs.
We should also make sure that the wrapper and page really are 100%.
body, html {
height: 100%;
min-height: 100%;
}
body {
width: 927px;
margin: 0 auto;
text-align: left;
color: #000;
font-family: Tahoma, "Times New Roman", Verdana, Arial, Sans-serif;
font-size: small;
text-decoration: none;
font-weight: normal;
line-height: 1.6em;
background: #dbb9db;
}
Now, we've come to the body part. If you're not completely retarded, you will understand that width mean how wide the page will be. In this case, it's 927 pixels wide. Margin: 0 auto; will make the page in the middle. Text-align: left; will make sure that the text begins from the left. color: #000; will make the color of the text black, #000000. You might wonder why I use three zeros instead of six, which is normal. With black(#000000) and white(#FFFFFF) you only need to use three zeros, since all the numbers and letters are the same. You use font-family so the browser knows what text you are using, I highly recommend using Tahoma, since it's so delioucsly good, or Verdana. I just love them. You should not use fonts you've downloaded from some random site, not all members visiting your site have that font. font-size, this shouldn't be too hard. In this example we will be using small. text-decoration is used to have some decoration on the text, hence text-decoration. I use none. I simply don't find anything beautiful about text having decoration, however. You can use overline, underline and line-through. Font-weight is used to to make the text bold, or not. We will be using none. line-height <-- says it all.
Well, that was the basics in CSS, now for the ID wrapper.
#wrapper {
width: 927px;
background: #FFF;
color: #000;
min-height: 100%;
height: 100%;
}
The width is the same as in body. The background color has been changed, to make some difference from the rest of the page. That was simple, no? I've used min-height and height twice now, to make sure that the wrapper really is 100% lon.
Now for the rest of the HTML coding.
<h1 title="header">Your page and motto</h1>
This will be your header/logo. The reason why I'm writing "Your page and motto" is because blind people browse the internet too, and then a computer will read up what says, since they can not see logos etc. they will hear what is being said. But do not worry, the text will not alter with an ordinary browser, since they will read the CSS file, and blind peoples browsers will not. CSS now!
h1 {
text-indent: -10000px;
height: 150px;
width: 927px;
background: url(path/to/file.jpg) no-repeat;
border: 0;
padding: 0;
margin: 0;
}
text-indent: -10000px; is to make sure that the text in your logo/header region will not be shown. Height and width is for the height and width of your logo. Background: url(path/to/file.jpg) no-repeat; Is the url to your background. No-repeat is to make sure that the image will not be repeated. Border is so your logo will not have a border. Padding is how many pixel/pt or whatever the text will be altered to which ever side from the inside, whilst margin is from the outside. Margin will alter the whole thing, the div and such. Woo!
Now, we will be making the navigation box.
<div id="navigation">
<ul>
<li><a href="#">Your link here</a></li>
<li><a href="#">Your link here</a></li>
<li><a href="#">Your link here</a></li>
</ul>
</div>
The ID in div should explain it all, if you don't understand, read what I wrote about classes and IDs in the start and what I wrote about the wrapper ID. <ul> is the code to make a list. Now, you don't need to do it with lists, but I always do. I just think it's more tidy. <li> will make a list item. <a href="#"> is the code to make a link. # brings you to the page you're currently at. Let med demonstrate:
Click Here - See? You should understand the closing attributes to some tags by now. There are, however some that do not need to be closed in another tag. Example: <img> will not be closed by another tag, it will be closed in it's own tag, like this: <img src="path/to/imagefile.jpg" />. Same with br, hr and such.
CSS!
#navigation {
width: 100px;
float: left;
padding: 0 5px 0 5px;
margin: 0 2px 0 2px;
font-family: Tahoma, verdana, arial, sans-serif;
font-size: 1.0em;
color: #000;
}
You should be known with width, font-family, color and font-size by now. Unless you're a retard. Anyways, float: left; will make the navigation box float to the left. Ergo; it will be placed on the left side of the page. Not in the browser, but in the page, wrapper.. Whatever. Here you see what the padding is used to. You might wonder why I don't use padding-left, padding-right, padding-top etc. like some sites do. You don't need to do that. Padding: 0 5px 0 5px; will have 0 padding on the top, 5px on the right, 0 on the bottom, and 5px on the left. They go with the clock. Simple, no? Same with margin. No we will alter the listing menu, if you tried this without altering the list style of the menu you will get round dots in front of your links.
#navigation ul {
margin: 0;
padding: 0;
border: 0;
}
#navigation li {
margin: 0;
padding: 0 5px 0 5px;
border: 0;
list-style-type: none;
font-family: Tahoma, verdana, arial, sans-serif;
font-size: 1.0em;
color: #000;
display: block;
width: 100%;
}
Most of the code above have been used before. Except list-style-type and display. list-style-type is used to define what kind your list will be, you can use: none, disc, circle, square and
more. Now then, display! Display sets how/if an element will be shown. You can use
plenty. I use block. You can read more about it in the link to w3schools. Now we will make the link specifications as you choose.
#navigation li a {
margin: 0;
padding: 0 0 0 7px;
border: 0;
font-family: Tahoma, verdana, arial, sans-serif;
font-size: 1.0em;
color: #dac9da;
display: block;
width: 100%;
height: 1.2em;
}
#navigation li a:link, a:visited {
margin: 0;
padding: 0 0 0 7px;
border: 0;
font-family: Tahoma, verdana, arial, sans-serif;
font-size: 1.0em;
color: #dac9da;
display: block;
width: 100%;
}
#navigation li a:hover, a:active, a.active {
margin: 0;
padding: 0 0 0 7px;
border: 0 0 0 5px;
border-color: #86578e;
font-family: Tahoma, verdana, arial, sans-serif;
font-size: 1.0em;
color: #b788c8;
display: block;
width: 100%;
background: #f6dff6;
}
Now then, the first piece of code, a, is just to make sure that all a: tags will follow that style. a:link and a:visited are simply, the links, and visited links. a:hover and a:active/a.active determine what will come up on the screen when you hover over a link, and active links, the page you are on and what links to it. You might notice that I'm using background color and a border. This is why we have display: block;. The background color will come under the link, and the border will come on the
left side of the link. Just to spice things up.
Now we will make the content box. HTML:
<div id="content">
<h3>Your header here</h3>
<p>Some useful information here.</p>
</div>
This is the ID for the content, as you migt now. h3 will make a headline. The p tag will make a paragraph. I prefer p before br(which is like the enter button on your keyboard. Jump one line, etc.) just because I think it looks more tidy in the code. We will alter that one in the CSS.
CSS:
#content {
width: 783px;
margin: 0 0 0 20px;
padding: 0 5px 0 5px;
border: 0;
background: #f6dff6;
float: left;
font-family: Tahoma, verdana, arial, sans-serif;
font-size: 1.0em;
color: #000;
}
This is for the content box, you should notice that I've put up a lot of margin and padding, just so the text will be more tidy and won't be altered by any other elements on the page. float: left; will NOT make the content box come left of the navigation box. It's there so the content doesn't go under the navigation box and such. Instead it will be be next to the navigation box. Simple. The background color will be #f6dff6, just to make sure that the page has more colors.
Now we will just make some basic CSS codes. Like links for general things, and for the paragraph.
a:link, a:visited {
font-family: Tahoma, verdana, arial, sans-serif;
font-size: 1.0em;
color: #b788c8;
}
a:hover, a:active {
font-family: Tahoma, verdana, arial, sans-serif;
font-size: 1.0em;
color: #f6dff6;
background: #dac9da;
}
p {
font-family: Tahoma, Verdana, Arial, Sans-serif;
font-size: 1.0em;
color: #000;
margin: 0;
padding: 0;
}
Now we'll just close the html and body tags.
</body>
</html>
We're done!
This is my
result using this tutorial. Please post your results.