Basic Coding Setup - tutorial
Since peope said my first tutorial was a bit hard to follow, and I've learned a lot more in the last two years...
I've decided to write new tutorial, one that is very basic.
Please read the whole tutorial before starting!! I'm making a point later on about the backgrounds, PLUS this is as background information, it's not using a nice layout. I hope to make one like that soon
There are a few things that are good to know before you start:
If you start coding in html/css then it's handy to do this in Firefox.
Even though the mayority of your viewers will be viewing your site in IE ... 6, still the coding will be purest if you create your site for Firefox, and from there add overrides for IE7 and 6.
Building your site cross browser is a bitch... This is because the older browsers are far far from the standards that are nowadays stated by w3c.org.
Opera comes closest, but that browser is used by a very very small amount of people.
Firefox is a very good second, and has a bigger market.
Microsoft has made a good step with IE7, but is still relying on their own way of defining margins and all kinds of rules. However with IE7 it's not nearly as dramatical as with IE6.
And that's the main difference for me in coding these days. 2 years ago, I build my site for IE6 and would then adjust it to Firefox (and Safari...).
Now I start with Firefox and will then include different stylesheets with overrides for IE 7 and IE6.
However you will see that if you keep your coding as clean as possible, you won't need many overrides for IE.
Getting Started
So, if you haven't installed Firefox yet, then go download it here.
Then get yourself a few really cool plugins for Firefox:
- Firebug - Extremely handy tool to see your coding and edit it in the browser!!!
- CSS Viewer - Wanna see what the exact CSS is for a specific part... right click
- ColorZilla - Grab colors from the site, so you dont have to search for the code
- Web Developer - Has everything you need for serious web developing
Then get the web developer toolbar for IE 7 too and install it for IE
Basic links for resource and testing:
- Ultra Edit A very nice text-editor with color sync recognation
- MSDN Library - For all documentation. If you need some code like what is possible with a DIV layer? then this is the place to find it.
- W3.org Important to test your site on possible problems.
- Multiple IE Handy to download to test in IE 6 (since many people still use that...)
Basic Setup
Doctype
Okay, in this tutorial I'm not going to build a difficult layout. It's going to be a basic setup for your layout. To understand how coding works and what your options are.
The site is going to be coded in DIV layers with xHTML and CSS.
And thus the first thing we do is to open the document and give it the right encoding by stating the doctype.
A doctype will tell the browser how it has to interpretate the code you're writing.
There are all kinds types of Doctypes (Document Types), like: Strict, Transitional and Frameset
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
The one I use at work is Strict, which might be a bit too strict for you guys ;) One of the downers of strict I find that you are not allowed to use a "target='_blank'" for your links...
They find that users can decide for themselves if they want the links opened in new windows or tabs or not... but for us, that's annoying ;)
So let's go with Transitional!
xHTML
Start your xHTML document with claiming the code language and the content language:
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
The first lang="en" means that the content you write on your site is english. The second means that the code is english.
The Head
In your head you will state the title of your site, the meta keywords for search engines and the links to css and javascript files.
Like this:
You might have noticed that there are two lines under the CSS includes, with IF statements.
These are if statements for the IE browsers. The first one lte IE7 means:
If Lower then or Equal to IE7 then read this document.
The second one means:
If Lower Then IE7 then read this document.
So what you do, is first you use the stylesheets for Firefox and IE, it will all read the first CSS includes.
Then, when you notice that stuff doesn't work well in IE 7 and / or IE6, you'll put the overrides in one of those files.
In the rare occasion that something needs a fix for IE 7, and not 6, you can put the IE7 declaration in the IE7 & 6 file. And override it for IE6 in the IE6 file.
Or use a hack ;) if you put a _ before a declaration, IE7 won't read it, but IE 6 will.
So you could say: width: 500px; _width: 480px; and IE 7 will use the first, and IE6 the second.
ALWAYS write the override als last declaration of the two, cause all browsers will just take the declaation that is read last.
Hence why the IF statements with extra CSS files will always have to come behind the original ones.
The Layout
Creating
Okay, I'm not going to build anything fancy now. It's just going to be a basic head with menu and content.
It's only to understand the basic stuff with DIV layers and the differences between floating and absolutes.
I start with a container DIV that will include all other DIVs.
This container DIV will set the width for the entire site. Which I'll set to 990px, cause that makes a site easy vieable for all most resolutions.
So this means I need to create a CSS file as well, as otherwise I won't see anything. The styling of a DIV is completely done in the CSS file.
I create a new file, and will call it layout.css, and in this file I declare that container will be 990px width.
I've also given it a grey background colour, so I will see the content.
I save the css file in the folder static/css
html files are dynamic, while css and background images are static. Hence they are in a static folder, and the html and content images of the page will be outside that folder.
I create: static, with:
css, img and js as folders.
Fonts
Default you can see that the font is set to Times New Roman. A font that I don't really like... so I'll set it to Verdana.
I start a declaration for the whole site, with an asterix: *, and will set all margins to 0 as well, so that later on, I can declare my own margins where I need them.
I've set a font-family, this means that the first font a browser will take is now Verdana. But if a browser doesn't have verdana, it will take Arial, and otherwise Sans Serif.
This is not really needed for this type of fonts. But let's say you want Myriad, a font that isn't always installed. You could set a font-family to:
"myriad", verdana, arial;
With Myriad between "", cause it's not a pre installed font.
And I've set the font-size on the body to 62,5%. This is a tricky thing. I do it cause then I can set all my fonts to 'em' which is rezisable. Now 1em will equal 10pixels in size. The tricky thing about this is that it's cumulative, so if you set a font to 1.1em and under it (in that element) one that is 1.1em again, it will be 1.1 oposite to the original, and thus bigger... Decide for yourself if you want to try, or just use pixels. (Which I would do if you're not building a prof site ;))
Now, you can see that the index.php looks different in your browser:
The margins are gone, and the font is smaller and different.
The Layout - going on
Building DIVs inside
Okay, we wanted to create a head, and two layers for the content and a navigation.
So let's code them:
This will result in these simple lines:
And thus, we want to make them bigger and give them a place to be, we need to defign them in the css file.
The top I want to be 850px width, and have an image as background. I'll use one of my recent walls for this, it's not going to be anything great, just to have an example.
I've saved it in the static/img folder. and now I'll defign it in the css file.
Resulting in this online:
You can see that the grey background layer is around it all, cause I've defigned the top 850px and the container is 990px. Leaving 140px on the side.
Now a DIV layer is a block level element. This means that the other layers are under the first one, as you can see by the lines.
However, I want the navigation to be on the right of the top image. And this I'm going to have it floating.
Now if I let the id top float left, and the id navigation float right, then we'll see one of the pretty problems of floating DIV layers (in Firefox, IE ignores it):
For the fun, I'll give a screenshot of how it looks in IE as well:
Overflow: hidden;
The solution to this problem (you can see it often with borders as well, when you want the border to go around the whole site, not only sticking at the top ;)) is the combination with a defigned width and overflow hidden:
And now it looks like this:
A DIV on the side
Coding the floating DIVs
I want the navigation on the right of my header image.
So, I'll put some content in, and will make a fake menu.
With this as result:
Now this doesn't look all that great now does it ;)
I've put the links in a link-list. So inside <ul> and <li> tags.
As you can see, it's directly attached to the header image, which means I need to set different coloring and margins to make this link list a bit more attractive.
So, in the CSS file, I'm going to set different properties:
With this as result:
Now.. what have I done?
If you take a look at the CSS file, you'll see that I've first set the properties for the navigation DIV itself. I've given it a width, it's own background color, a float right, and a padding, so that the list isn't connected to the image like before.
Then I've given the <ul> a margin bottom, so that the seperate parts of the link lists are seperated
And you'll see that I've used the id navigation to point out the links in the list like this:
#navigation li a{
Given it properties like font color and size. Plus "text-decoration: none" so that it won't have underlines... As I don't like those in a navigation.
There are, of course, many more possibilities, but for now, this is enough ;)
The content div under it
Setting the content DIV
If you look at that last screenshot, you'll see that line with "this is the content layer" somewhere under the navigation DIV. Not styled yet.
I want the content DIV, to stay on the left and have the same width as the header image.
I'll give it a background colour, to illustrate how the DIV layer goes. And I'll put some fake text in it. Plus give it that same width as the top.
Oh, first a screenshot of what happens now with content in it.
And I'm adding a border around the whole site, cause I wanted to do that, but forgot ;)
The border will go all around the whole content, because of the pretty 'overflow: hidden'.
Okay, so now I'm going to give properties to the content DIV.
I'll give it a background color, a padding of 10 pixels and a width of 830px (this because the 10px on the left and right will add up to the 830 and make it 850px in total > in IE7 and Firefox. Older browsers have a different box model).
clear
Notice the 'clear: left' among the css properties.
This is needed because we are working with floating DIVs. And with these floating DIVs, the content id will start from the top, because the 'top' id is empty, it is only a declaration to contain that image.
Now, I do want some space between that image and my text, and I don't want to do that with breaks. I want it done with padding, but that would start from the top, unless I use that clear.
Now, with that clear, my content DIV simply starts under the image.
Semantic Menu's and styling
headers
If you want your site accessible for searchengines and maybe even blind people with screenreaders, you could take into consideration how the HTML is read by engines.
The most important content is displayed in a H1 tag.
This could be the title of your site, or the title of the page.
Officially, there's always only 1 H1 tag. Then a lesser important title would be in a H2, and then H3, up to H6.
You can style your headers in your CSS code very simple by just doing this:
h2{
font-size: 1.5em;
color: #170187;
margin: 10px;
}
But you can also specify a header for a certain part of the site, for example by doing this:
#navigation h2{
font-size: 1.3em;
color: #870f01;
margin: 5px 0;
}
That way, only the h2 in the id navigation, will have that style. And a h2 in the content, you could style different.
Now the best way is to specify the general style first, and then specify it after that.
A stylesheet isn't called a 'Cascading StyleSheet' for nothing ;)
It works cascading... so if you would write the same thing twice, like 2 headers, it would take the last style it reads.
So if you want all h2's to be blue, but the one in the navigation div red and smaller, you'd style the general first, and the specific under that.
So the CSS looks like this:
Without it the headers I put in looked like this:
But now with that styling it looks like this:
I've made the title of the page a H1, the navigation and the subtitle are h2, and the small headers in the navigation are h3.
You can nicely see how that navigation header and the subheader in the content are differently styled, but both are h2.
Here a small look at what the code looks like at the moment:
Backgrounds
Big images or not?
If you've designed your site with impressive arts and backgrounds, then that's nice, but try not to make a big background image for your background.
This should not be too hard when you've just got colors as backgrounds. The best way would be to just use background colours as CSS setting, however there are some perks to that.
Take my layout for instant. Now you can see that the navigation div is shorter then the content and this results in the background ending there and thus the background is not the same.
In this case it's best to use an image as background for the whole container div that is only one pixel high.