Welcome to my tutorial!

Today we are going to make a simple web page, that will look something like this.



It will help if you have a basic knowledge of HTML and CSS, though if not and you have a short attention span then you may find this is a little difficult. Also I will assume you're familiar with using GIMP.

We'll start with the graphics!

Step 1

Open GIMP and create a new image with a transparent background that is 133px in width and 23px high. I will assume this is simple enough not to require a screenshot.

Step 2

This first image will be a button, so we will want to make it rounded.

Select all (hold "Ctrl"+"A"), then go to Select -> "Rounded Rectangle" and change the radius (%) to 70 and press ok. I am using GIMP 2.2.11, though if you do not have this feature available then you could use the elliptical tool (though your button may be more oval). Otherwise, you may want to consider upgrading GIMP to use this feature. Or your other option could be to zoom in then delete bits around the corners to make them rounded.

Next, you want to fill the selection with a colour of your choice. I have chosen to use a blue (3388ee) though you can use any you like.

What you have so far should look like something like this (note that I've zoomed in by 200%).



Step 3

I think some scanlines would look good.

You may either use some of your own or download fencepost's scanline pattern here (be sure to thank him).

(Before asking how to install scanlines click here)

Or you could follow Get Firefox's tutorial.

Make a new layer and name it "Scanlines" then fill the layer with your scanline pattern.

I want to make the scanlines white, so go to "Layer" -> "Transparency" -> "Alpha to Selection", then fill the selection with white. Once you've done this, change the mode to "Overlay" then change the opacity to 40.

It should now look something like this.



Step 4

To make it look more buttonish, I think it could use a highlight. Add a new layer and name it "Highlight". Next, activate the elliptical tool (press "E" on your keyboard).

IMO, feathering the edges of the elliptical selection will give the button a more natural transition between the highlight and the rest of the button. Feather the edges by 10 like so.



While using GIMP, you may have noticed numbers on the bottom right hand side of the image you're working on, that show the current position of your mouse cursor.



Zoom in at about 400% then position your mouse cursor at the coordinates "-20, 15", then click and drag your mouse cursor to the coordinates "153, -6" and release. Fill the selection with white, then change the mode to "Overlay" and change the layer opacity to "50".

Your order of layers so far should be like so

1. highlight
2. scanlines
3. background

Now you're finished!

What you have should look something like this.



Step 4

Create a new folder somewhere you can easily find it, then save a copy of the image as "off.png". You can save the file with the .gif extension if you want to cater for people that use IE6 or earlier, (Microsoft Internet Explorer browsers have only recently started to support transparent PNG's), though I say get a decent browser.

Saying that though, there probably are other browsers that can't handle transparent PNG's, though if you really want to you could just make the background colour of the button the same as the background colour you'll be using on your web page.

Step 5

Change the background colour to a lighter colour then the original. I've used 33aaee.

Save the image as "over.png" (or "over.gif")

You should now have this.



Step 6

We'll now be creating the header background!

Crate a new image 23px high and 15px wide.

Fill the image with your desired colour (I used 3388dd).

Step 7

Now repeat step 3 to add some scanlines.

Save the image in your folder as "tile.png."

You should now have this



Step 8

Now I understand people reading this have varying levels of knowledge with HTML, so this next bit may get a bit more complicated for some, though just take your time with it.

Here is an example of how your layout would eventually be structured when you click on "HTML Tags" of the edit mode toolbar in NVU.



So now we add the HTML.

Open a text editor such as Notepad, Kate or whatever you use. You may use NVU if you want, though remember that we're going to be working with source XHTML code.

If you're unfamiliar with XHTML then don't panic, it's pretty much the same as HTML except for a few differences.

What makes a valid XHTML document is the DTD tag, plus you have to consider the following tags.

You have to close each tag entity with a / slash. What I mean by tag entity's, are for example



.... anyway, onto your basic XHTML structure

Copy and paste this as your basic structure for the blank document.



Step 9

Basically, there's nothing on your page so far. So lets add your template for the content.

This will go between your "body" tags.



So if you are able to preview what you have so far, how it would look is something like this.



Doesn't look much so far eh? Well don't worry, we're about to fix that!

Step 10

Time to add the CSS information to improve the look.

Copy and paste the following. It should go in between the "head" section of your document.



Hopefully that didn't confuse the pants off you :

If you didn't understand any of it, then it's probably best if you just experiment and figure it out. You can't expect all of it to make sense in a couple of days (though it is possible), but just stick to what you know and gradually experiment with little bits you can play around with.

This is how it would look once you've added what's technically known as all that CSS stuff.



When you hover your mouse over an item in the navigation, the background image should change.

That's what this bit of code is for



What it does, is once you hover your mouse over the list item it changes to the class with the lighter background image (li.navigation_hover), then once you move your mouse away it changes back to the original class name (li.navigation).

And tutorial is now finished!

You can easily add box's on the left or right side, though

Unfortunately, I can't explain how all of it works or I'll be sitting here all week ...

You can download the full tutorial in a PDF format, along with all the files used here.

A few more notes ...

I'm guilty of producing a biased design, as this particular example has been designed for a screen resolution of 1024*768 or above. Saying that though, most of us probably use a screen resolution of 1024*768 or higher, though if you change the size of the "main_content" div to 400px (i.e.: div.main_content { ...) then I think the page should comfortably fit a screen size of 800*600 or above.

That's just something to take into consideration, though remember to experiment and consider your target audience.

Edit: CSS has been edited, so the page will now scale to fit the size of your screen. Also deleted a section of CSS that was not needed.

Example web template has been tested for and passed W3C compliance regarding the XHTML and CSS.

CQS? (Comments? Questions? Suggestions?)

CQS? I've just invented it (I think?)

If it's about this tutorial then post here. Questions concerning the use of the web template provided with the download should be PM'd to me or sent to nospamingdenegibson@gmail.com (but remove the "nospaming" bit).

Thanks man! Any tutorials on HTML are very helpful for me :l:

No probs thanks for reading :h:

I messed up on the bb code a moment ago so don't be supprised if the tut has suddenly got longer :

Wow, that's great, thank you for posting it! I knew most of it already, but there were parts that were new to me, too (XHTML). I'll probably try it when I have time.........

I'm pleased to know you got something out of it :h:

Well if anyone does try this then I'd be interested to see their outcomes :w:

I'm gonna have to try this. I'll make sure to show it to you if I ever get a chance.

@ Flying Penguin

Great I'll look forward to it :w:

You know I love this tut, its awesome btw. If I do try it I will be using it for my site

Cool! Thanks man :l:

Note that I've just fixed a few mistakes I made with the tut.

If downloading my tut or any files associated with it, then please remember that they haven't been updated yet.

Update:

You can now download the tutorial in a PDF format, along with all code and the images used for the website here

I'm wondering what metas do????

I'm not exactly sure, but I'm pretty sure that they can be used to put keywords in, and that way your website will be more likely to come up on a search.

Meta tags do various things, though this bit



basically tells search engines or your web browser the content of the web page is text/html and the character encoding of the content on your page. There's various different types for different languages, such as Russian, Japanese, etc. If I'm correct then that's one of the most common values (i.e.: ISO-8859-1) for the English language.

And this bit



again tells a search engine or a web browser there is text/css on a page.

Meta tags can also tell you about the author like so



keywords (though I'm unsure about other search engines, I know google doesn't pick up on them)



or the descripton of your website



You can find out more about meta tags by visisting W3C.org or using google.

Ok so they're basically like tags that people create for search engines????

@ Man of Valor

Though I think there's slightly more to it that's pretty much what they do.

i will most deffitly do this when i have time

Cool! If you feel like showing your result afterwards it'll be great to see :w:

Thanks for looking at my tut!

I'll try it very shortly. I do have to code a template.

woh, very great tutorial, excellent job mate. :w:

Man of Valor:

Great! I'll look forward to seen your outcome if you wish to post it :w:

Mercenary:

Thank you for your kind words :]

AMAZING DENE AMAZING
check out my result

http://www.shadesofdesign.atspace.org

Thank you niteflite, it's great to see you've appreciated my tutorial ^_^

Your link doesn't seem to work at the moment. Site temporarily down?

Well I'll try again later, thanks for following!

Nice one Deno, i am hoping to make a website one day, but it all looks to complex for a guy like me

- Del :h:

lol well keep practicing and one day you might even end up as a web developer who's good enough to work with things like C++ and SQL databases :w:

Thanks Del, nice to see you around here :h:

Ah yeh sorry dene heres da working link

http://shadesofdesign.atspace.org/

Thank you niteflite, your attempt looks pretty good :h:

How much of the coding did you understand?

If you could use a hand with it then I'd be happy to help :w: