Chapter 6 - Creating a website
bring your hammer because now you're going to forge a website. Come up with a theme for your website like frogs or science. I'll base this chapter on the theme "Klingons".
I will go through how to make a website with a logo/topic, a menu with links to different parts of your website and of course the content section. My example will have three different pages:
Home - Welcome text and something about your site's purpose.
About "theme" - Information and images related to your theme. In my case, Klingons.
About me - Presentation of your self and perhaps a photos.
In the previous chapter I went through layers with a menu and a content section. This one will have a header section as well. You can either just put some big text there as your site's name or you can make a logo.
Look at this site. I have a header with my banner/logo which explains the site's purpose and I have a menu to the left with all the chapters for easy navigation. If you click the "Dashboard Tutorial" button, you will come to the dashboard part of my site, you will notice that the colors changed with would contradict a previous statement. All though I have two color themes and possibly more when I add other tutorials to my site, you do of course see that this tutorial have six pages, all are following the same color scheme and if you look at my dashboard tutorial you will notice that the font color, size and theme are the same.
But why the two different colors? Dashboard's color is black but black is not a good color for a XHTML/CSS tutorial. At least, that's what I think. When I think of a website with information about XHTML, web or CSS, I think blue or gray.
Why do I ramble on about this color thing? Because colors like fonts are very important, colors need to mirror the content of your site to the best of your abilities. This is not an easy task.
Well enough of this, let's start with your site. Every page of your website will be it's own html document, the best way to do this easy is to build a complete startpage then copy it, rename the copies and change the content. It's as simple as that.
You know how to create a website with a menu and a content section with the css property: float; but how do you make a header? Well it's quite easy you see a browser interprets your code like it's a book. Starts from the top and ends at the bottom. to create a header you simply make a layer with the combined with of both the menu and the content section and place it before them. since it's only one layer you will not need a float property, neither a clear property. You only need clear to clear a row from the float property. In other words, you clear beneath layers with float, not over them.
code example:
<html>
<head>
<title>My Klingon site!</title>
<style type='text/css'>
.header {
width: 760px;
}
.menu {
float: left; <!-- The float property. -->
width: 120px;
background-color: #dddddd;
.content {
float: left; <!-- The float property. -->
width: 640px;
}
h1 {
font-family: helvetica, arial;
font-size: 18px;
color: #333333;
}
p {
font-family: lucida grande, verdana;
font-size: 12px;
color: #333333;
}
.header_text { <!-- A class meant for text in the header section. -->
font-size: 26px;
}
</style>
</head>
<body>
<div class='header'>
<h1 class='header_text'> <!-- This connects this h1 tag to the class .header_text. -->
<!-- This site's header section -->
My website about Klingons!
</h1>
</div>
<div class='menu'>
<!-- This site's menu section. -->
<a href='start.html'<Start>/a>
<a href='aboutme.html'<About Klingons>/a>
<a href='links.html'<About Me>/a>
</div>
<div class='content'>
<!-- This site's content section. This is the only part you'll need to change when you create different pages since the header, menu and footer should be the same. -->
<h1>
Welcome to this Website about Klingons!
</h1>
</div>
<div class='footer'>
<!-- This site's footer section. -->
<p class='footer_text'>
Lutz (Tobias Wallin) - name@domain.topdomain <!-- Change this into your own name and e-mail address-->
</p>
</div>
</body>
</html>
Well, there it is. Some repetition now. Here is 4 regular CSS classes and 2 global CSS classes. The first three defines the size and color of the site's three different sections: header, menu and content. The two classes h1 and p is of course global classes which all h1 and p tags apply to. the last one is meant to increase the font size in the header section. Since I used the h1 tag the header text gains properties from the global h1 class and the regular class I have manually applied it to. The regular CSS class font-size property does as I have stated earlier overrule the global class.
The XHTML part is really quite simple. There are 4 layers, one for each section and inside the layers are the correct content. There is not much more to say, the structure is built with XHTML but the CSS code controls it all.
If you do not have a folder for this site, create one now. Then duplicate this page into three documents (Or into the number of pages you had in mind), then name each of them to the correct names written in the href attribute to provide the correct path. In my case the documents will be named: index.html, aboutme.html and lnks.html.
Why did I name the start page to "index.html"? Because as standard the web servers search for this name in a folder to load your site. for example, if the start document on this site would be named start.html instead of index.html the address would be dashdev.djupet.se/start.html instead of dashdev.djupet.se because the webserver loads the file named "index" or no file at all.
Well when you have made all your XHTML documents, test your site by changing the text in the content section in every document to something unique then click on the links. Either it works or you've done something wrong. it's not easy to search for errors when you don't know the code to well but I can help you with some tips. Check if the filename and the link path are the same. (href='the path is here, in this case just the name because all the documents are in the same folder').
Now that you have serval XHTML documents with the same css code you should make a separate CSS file with the CSS code and include the file on every page. Start by creating a new document and put all your CSS classes in it, then save it as stylesheet.css in the same folder as you html documents.
To include the CSS on every page you write this in your stylesheet section instead of the CSS code.
@import "stylesheet.css";
like this:
<style type='text/css'>
@import "stylesheet.css";
</style>
This is the same principe as creating a link, the name links to the file. Put this on every page to include the CSS code from your stylesheet.css document. If you need to change something on your site like font size or color, you just have to do it in one place now instead of changing the CSS on every page.
Doctypes
What is a doctype? The doctypes helps the webbrowser identifying which type of coding you use and renders the page correctly. If you don't have a doctype your site may not work correctly in all the big browsers. You only need to know that the following code should be on top on every html document. (To be clear, CSS documents do have doctypes.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- And the rest... -->
There is no need for you to learn more about doctypes at this moment. But if you are curious, just Google it :).
You must learn all the syntax to master webcoding, my best rekomendation to do this is on www.w3schools.com.
And remember, CSS is the key to a good website :).