I’ve decided to go back to the basics with this next series of tutorials and start from the very beginning. In this tutorial you will be learning how to use XHTML and CSS to build a simple web page.
The first thing is picking a text editor. I recommend Notepad++ as it is free and supports several different format options for various languages, including HTML/XHTML and CSS.
You might be thinking “why XHTML and not HTML if this is the basics”?
I feel that XHTML is a much cleaner way to build a website that will help with browser compatibility, layout readability, as well as reduce the risk of errors and help in spotting them.
This time around I won’t be showing you all the code in the beginning as I will be writing it out as I go through the different sections of the code. There are 2 sections that are needed to build a good website, the Header and the Body.
- The Header will contain all the information a browser and search engines will need to properly parse your code.
- The Body will contain the code that will be displayed visually as your website.
As this will be the first page of your website it must be labeled: index. As XHTML is a variation of HTML we will be using index.html, so create the file. If you’re using Notepad++ just click File > New and label the file index.html.
So lets get started with the head. There are a few things we’ll need to define:
- Document type.
- What code language we’ll be using.
- What character set we’ll be using.
- Link to the style sheet of the website.
- A Descriptive Title.
So now lets get started by defining the document type:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This needs to be the first line of code on your webpage so that browsers know what to treat the file as when they are displaying it. You’ll notice that it is being set to “XHTML 1.0 Strict” this leaves little room for error.
Lets move on to starting the HTML portion of the website now that we’ve described what the document type.
-
<html xmlns="http://www.w3.org/1999/xhtml">
Even further confirmation of the exact HTML language type.
Now lets start the head section by defining what character set our website will be using. This is important as it will definite what kind of characters/symbols will be used, it also tells browsers in other countries to use a different character set than the one they default to, this ensures your website will display correctly even in other countries.
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Now before we close the head section lets add a link to the css file we’ll be using as well as the title of the page.
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<link rel="stylesheet" href="css/style.css" type="text/css" />
-
<title>Cool Title Goes Here</title>
-
</head>
That about covers the basics of the head section of a website.
Oh and if you’re wondering why I am putting the css sheet in a folder called css, I feel it is good practice to be consistent with all your web designing folder structuring. It prevents you or others looking into the directory from getting confused.
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>Good Website Title Goes Here</title>
-
</head>
Now that we’ve finished the head lets move on to the body section. Before I get into the code I’m going to show you the simple layout I’ll be using to make the website. Keep in mind it is best to finalize the design of your website layout to prevent having to recode large parts of the website if you come up with something that doesn’t work with what you’ve coded.
There is a section for the header, a sidebar, the main content, and the footer. All typical parts of websites.
Now that we know the layout of the website lets break it up into divs.
In this image I’ve broken down the sections into:
- bodywrap – This holds the rest of the divs.
- header
- centerwrap – This holds the sidebar and the contentwrap.
- sidebar
- contentwrap
- footer
Now if you want you can break them down even further but for now we’ll keep it basic. So lets look at the body code.
-
<body>
-
<div id="bodywrap">
-
<div id="header"></div>
-
<div id="centerwrap">
-
<div id="sidebar"></div>
-
<div id="contentwrap"></div>
-
<div class="clearthis"></div>
-
</div>
-
<div id="footer"></div>
-
</div>
-
</body>
-
</html>
I indented the code to give you an idea of how it works each indent indicates it is a div inside of another div. Another thing you’ll notice is that the divs have ID tags that is needed to modify each one uniquely through CSS. I added a div with a class tag “clearthis” which will be explained in the CSS portion.
That’s it for the XHTML. Obviously if you were building a full website you’d fill up each respective section with content but for this tutorial we’re just focusing on the coding and not the content.
Create a new file and call it style.css.
Now lets move on to making this actually look like something visual by using some basic CSS. Lets double check our list of IDs and the 1 class I added, it should look like this:
IDs:
- bodywrap
- centerwrap
- sidebar
- contentwrap
- footer
Class:
- clearthis
Alright now that we have our list ready lets start by adding some styling, starting with the bodywrap:
-
#bodywrap {
-
width:960px;
-
margin:0 auto;
-
}
Note: the “#” is the CSS symbol for ID.
So this is doing 2 things:
- First it says that the bodywrap will be 960px wide, the current accepted standard desktop resolution is 1024×768. When taking into account window borders and vertical scroll bars I’ve found 960 pixels is the magic number that works without forcing a horizontal scroll bar.
- Second it is giving the div a vertical margin of 0 meaning bodywrap will go from the top of the browser to the bottom without allowing any empty space in between. This is also telling the browser to automatically adjust the horizontal margins so the wrap is in the center of the browser.
Now lets move on to give the header, centerwrap, and footer some heights and color so we can see what we’re dealing with in a web browser.
Note: As this is all being coded in XHTML you can view the file localing through your favorite browser.
Now lets add the CSS for these sections right below the bodywrap CSS:
-
#bodywrap {
-
width:960px;
-
margin:0 auto;
-
}
-
#header {
-
height:150px;
-
background:#f00;
-
}
-
#centerwrap {
-
height:350px;
-
background:#0f0;
-
}
-
#footer {
-
height:150px;
-
background:#00f;
-
}
I just picked these heights and colors as an example… feel free to change these as needed. If you’re wondering why I didn’t put a width on these that is because unless otherwise noted a div will inherit the width from the parent div which in all these 3 cases is the bodywrap.
Now lets add the some CSS for the sidebar and the content this will go in between the centerwrap and footer to keep with the order of how the website will display:
-
#bodywrap {
-
width:960px;
-
margin:0 auto;
-
}
-
#header {
-
height:150px;
-
background:#f00;
-
}
-
#centerwrap {
-
height:350px;
-
background:#0f0;
-
}
-
#sidebar {
-
width:200px;
-
background:#ff0;
-
float:left;
-
height:350px;
-
}
-
#contentwrap {
-
width:760px;
-
backgroun:#f0f;
-
float:right;
-
height:350px;
-
}
-
#footer {
-
height:150px;
-
background:#00f;
-
}
You’ll notice some things are a bit different now.
- First both have different widths this is because I want them to fit within the defined “960px”, since I want the sidebar to be skinnier I only gave it a width of 200px which left me 760px for the content area.
- Second you will notice I gave the sidebar “float:left” and contentwrap “float:right” what those are doing is telling the respective divs to go all the way to their respective sides. This way the sidebar will appear on the left and the content on the right just like in my simple design layout above.
- Third I gave them both the height of the contentwrap because unlike the width which can be inherited from the parent div the height is actually determined by the content inside of a div if it is not defined.
If you test your page now you’ll probably notice some issues that might have come up, this is because you’ve used “float” which can do cool and bad things to a website if the site isn’t coded wisely. This is where that “clearthis” class comes in. Since the “clearthis” will be a global rule that will not be changed we can define it at the top of the CSS.
-
.clearthis {
-
clear:both;
-
}
-
#bodywrap {
-
width:960px;
-
margin:0 auto;
-
}
-
#header {
-
height:150px;
-
background:#f00;
-
}
-
#centerwrap {
-
height:350px;
-
background:#0f0;
-
}
-
#sidebar {
-
width:200px;
-
background:#ff0;
-
float:left;
-
height:350px;
-
}
-
#contentwrap {
-
width:760px;
-
backgroun:#f0f;
-
float:right;
-
height:350px;
-
}
-
#footer {
-
height:150px;
-
background:#00f;
-
}
You’ll notice I used a period instead of the pound sign, that is because in CSS a period defines a class. I added “clear:both;” what this does is it removes any float left or right that might be above it in the code.
Your XHTML file (index.html) should look like this now:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<link rel="stylesheet" href="css/style.css" type="text/css" />
-
<title>Cool Title Goes Here</title>
-
</head>
-
<body>
-
<div id="bodywrap">
-
<div id="header"></div>
-
<div id="centerwrap">
-
<div id="sidebar"></div>
-
<div id="contentwrap"></div>
-
<div class="clearthis"></div>
-
</div>
-
<div id="footer"></div>
-
</div>
-
</body>
-
</html>
Your CSS file should look like this:
-
.clearthis {
-
clear:both;
-
}
-
#bodywrap {
-
width:960px;
-
margin:0 auto;
-
}
-
#header {
-
height:150px;
-
background:#f00;
-
}
-
#centerwrap {
-
height:350px;
-
background:#0f0;
-
}
-
#sidebar {
-
width:200px;
-
background:#ff0;
-
float:left;
-
height:350px;
-
}
-
#contentwrap {
-
width:760px;
-
backgroun:#f0f;
-
float:right;
-
height:350px;
-
}
-
#footer {
-
height:150px;
-
background:#00f;
-
}
And that covers the basics of building a website in XHTML and CSS. I hope you’ve found this tutorial helpful. Once you add content to the respective sections you can remove the “height” definitions in your CSS as the divs will used the height of the content by default.
