I Introduction

It seems like just about every day around here, somebody asks "I made a layout in Photoshop. How do I make it into a website?" and somebody vaguely answers "You have to code it." Of course, rarely if ever does somebody ever give directions beyond those five simple words, and in all honesty, the limited directions given (such as slice it with ImageReady and learn HTML) are not the best ways to go about making the layout. I'm going to try to outline the basics of HTML and CSS in this tutorial and I'm going to walk you through the process of coding a website from scratch. You don't need any prior knowledge on either HTML or CSS to follow this tutorial (but it helps a lot). All you need is a lot of time. It would also be helpful to have a HTML editor handy. While TextEdit (Mac) or Notepad (Windows) work just fine, something slightly more powerful would be much better. Dreamweaver might be a little bit excessive; all you really need is something that will number your lines for you and allow you to quickly preview the site you're working on. If your on a Mac, I suggest Taco HTML Edit (because it's free and has both of those things). It's been 5 years since I last used a Windows, but I'm guessing somebody can give you suggestions on a program to download.

II Keys to Designing Your Layout

For obvious reasons, the layout I'm going to be pretty simple. This tutorial is going to be long as is, so there is no reason to make it even longer. You can follow along with the same layout I use, or you can make your own. If you choose to make your own, remember these keys to making it easier on yourself: 1. Design in a grid. If everything lines up and everything is evenly spaced, it's easier to replicate the layout online. Not all websites have to be set up on a grid, but when just beginning, it is very helpful. 2. Limit your use of "fancy" fonts. The standard web fonts are Times, Arial, Helvetica, Georgia, etc. Don't use some strange font for a large portion of your layout because for every font you can't replicate with code, you must have an image, and images take up space. The goal to designing a website this way is to take up as little space as possible and to have to page display as quickly as possible without sacrificing the design of your page. For that reason, I suggest only using those "fancy" fonts in the banner image or specific headers/titles, but not in the actual navigation or content of the page. 3. Going along with point 2, think small as in small file size. The more repeating patterns and images the better. I've made my template following these rules.



III The Basics of HTML

HTML has a steep learning curve. The beauty of CSS (which we'll get to later) is that you really only have to learn the basics right now in order to get the big picture. So I'm going to run over the bare minimum. For the full thing in detail, visit w3schools.com. The key to learning HTML is learning the format in which the language is written. HTML is intended to tell the web browser what each piece of information is, not how it should be displayed. It is coded in "tags." An opening tag looks like this:

After the opening tag is where you put your content:

After your content, you must close your tag. Otherwise, the web browser will think that everything after the opening tag falls under that opening tag. Here is how to close a tag:

Thats how to format the code. Now for the code itself. The most important HTML tags are explained in brief bellow. Once again, I urge you to follow up on w3schools.com to get the full picture.

<div></div> You can think of the div tag as standing for "divider." Each distinct division of the page is housed within a div tag. This will be explained in more detail later. Div tags (and many other tags) are essentially useless when coupled with CSS if you forget to name them. Make sure you give all div tags a name, or identification. Doing so is easy:

Remember: each div tag houses as distinct division of the web page and each div tag should have its own id.

<h1></h1> The are actually 6 of these tags in all (<h1> through <h6>). They stand for header. The number is the rank of the header. <h1> is the biggest and boldest. <h2> is the next biggest and boldest. etc. They are used exactly how they sound: as headers, or titles for your content:

You may also give these names, but because you have six of them to work with, you really shouldn't ever have to.
Remember: <h1> stands for header 1. Each successive numbered header is slightly smaller than the previous one. You do not need to name your headers.

<img> The img tag stands for image. It is one of the few tags that doesn't need a closing tag with it. Instead, it needs a src (source) for the image and an alt (alternate) in case the image can't be displayed (mainly for older browsers). It's used like this:

This will display the image housed at the address "http://www.urlofyourwebsite.com/image.jpg." In the even that the browser cannot display the image, it will instead display, in text, "My Image" so that the user does not lose the meaning of the image all together.
Remember: the img tag does not need to be closed. Instead, it needs a src and an alt.

<a></a> The a tag stands for an anchor. You can anchor to anything on the web. In more simple terms, the anchor is a link. Let's say you want to anchor to this page. Then you would do it in the following way:

What you would end up seeing on your browser is a hyperlink that reads "HTML and CSS Tutorial" and that, when clicked, will take you to this page. There is more to be done with the a tag, but it's not all relevant to the layout I'm going to code, so I'll let you learn it on your own.
Remember: the a tag stands for anchor or link.

<p></p>The p tag is for paragraphs. That's about all there is to this one.

<ul></ul> and <li></li> the ul or unordered list tag and the li or list item tag create bulleted lists. But with CSS, we can turn them into a very nice, clean set of navigable links.
Remember: the ul tag stands for unordered list and the li tag (list item) indicates each separate item in the list.



I always begin my layouts with the HTML code because, if you don't have the HTML code finished, you can't begin to work with the CSS code. To begin, I divide my layout into the seperate divisions and I name them appropriately:



If you're using a html editor, it should have set up the page for you with something that looks like this:

I add the code between <body> and </body>.

Time to put in some content.

That's essentially it for the HTML coding of the page. We'll make a few adjustments later that I'll explain at the appropriate time. Save this file as "index.html"


[color=red]IV Coding the Layout Part 2: CSS

Remember this?
If you're using a html editor, it should have set up the page for you with something that looks like this:

Now it's time to add the CSS. Between <head> and </head> (doesn't matter if it's before or after the <title></title> but I prefer to do it after) type <style></style>. All of the CSS code should be typed between the style tags.

CSS has tons of different words to use while coding, so it's always helpful, at least while beginning, to have something like w3schools.com open. I'm not going to take the time to explain every little piece of code I put in; that's up to you to read. Instead, I'm just going to show you how to use it to make your layout.

Begin by formatting the div tags. If you add a # before the name of one of your divs in the CSS code, it will alter only that div. So I'll begin with the header. (NOTE: you won't see any changes until you start adding content. Just follow the directions and if you make a mistake, you'll catch it when you add some content)

Now to alter that div, we need to define it's attributes between the two squiggly brackets. Let's start by adding a background image, a bottom border (to create that little blue line you see in the layout), and let's set a width and a height. Also, because I didn't make the banner the whole width of the layout (remember, less download time) I need to add a background color for where the banner does not stretch to.

Now for the other divs. I'm not going to walk you through all the code, but I will explain three important parts of it: float: right, float: left, and clear: both. You may float anything to the right or left. It just means that it aligns itself to as far left and as far right as possible. clear: both just means that the footer will clear or end both of the columns.

V Coding the Layout Part 3: Content

So the basis of the layout is set. Now it's time to add some content. I'm going to use some dummy text and links and such.

I'm going to start by adding a heading that will only be viewable to people who can't see the images (either really old browsers or simpler browsers found on mobile phones and PDAs won't show the images...they'll basically show the unformatted HTML. We want the banner images to be replaced with text for them so that they can still see what the page is about.) Since it's the first header, and thus, the most important, we'll use h1. Add the following inside the header div:

Your HTML should now look like this:

We might as well add all the content at once, so I'm just going to add in some text in the left column and an unordered list of links in the right as well as a line of credits in the footer.

Uh oh...the layout is all messed up. Don't worry, it's intentional, and easy to fix. I just had to show you the problem before I showed the solution. This is one of the times that we have to go back and edit the actual HTML code. Simply add a div to contain the entire layout. Call it container.

Now edit that div's attributes:

It's time to change how the content is displayed. First thing to do is to edit that "invisible" header.

And now to format that text I put in the left column. First, we're going to want to give it some padding and margin values so it doesn't run into the edges of the column. Then, we're going to want to make it look all fancy (change colors, change font families, etc.) Note that I set the text off in a paragraph tag. We'll create a CSS attribute for the paragraph tag. All paragraphs will receive that formatting, but since we only have one in this layout, you'll only see that text change. If you have many paragraphs with many different styles needed, then you can set up different attributes to affect different "classes." I'll show you that with the links because we have two kinds: the right column and the footer links.

It's time to change the links. We'll start with the ones in the right column. I'm going to get rid of the bullet and change the font. I'll also define it 4 times: once for the link, once for when the link is hovered over, once for when the link is clicked, and once for when the link has already been visited (link, hover, active, visited)

I know, it's long, but it's really very simple. You'll notice I put a.list on all of them. That is because we have two different kinds of links: the right column and the footer. A period denotes a class and you can have as many classes as you want. All you need to do is give each hyperlink a class in the actual html. I'm just going to show the part of the code I'm altering:

Find this:

and make it this:

There we go. Nothing fancy, but it navigates.

Almost done. Now we just have to change the footer. Simply edit the actual footer div.

Time for the footer link. Make sure you define the class:

Finally, let's add a background of some sort to the page. I'm just going to make it a solid color.

VI Conclusion

There you go. It's not the most beautiful layout, but it gets the job down, and it's just an example in order to teach you the basics. Go out there and make your own now. Visit sites like CSS Mania or CSS Zen Garden in order to begin to fully appreciate the power of CSS. Just to make sure you go to the end, your code should look something like this:

Anyway, hopefully this helps. If you see any errors in the tutorial, just let me know and I'll correct them. I find that one of the hardest things to do when starting is to decide how to divide up your layout into divs and such, so if you have any specific questions about that or anything else covered here, just let me know and I'll see if I can help.