razorBlog
Web Design Drives Me Nuts
Putting Your Templates to Use
Open your file browser, create a directory called test inside the websites folder, this is where we will play about and create a test website using our template. Copy the style folder to the test directory so we now have this kind of file structure.
websites
templates
xhtml.htm
xhtml_basic.htm
style
main_layout.css
test
style
main_layout.css
Open up your xhtml.htm template file in your raw text editor, file, save as and call it index.htm or default.htm, I use index. Either will direct people to this file before any other when viewing your website. This is called your Home page. Save the file as a non text document in the directory test.
websites
templates
xhtml.htm
xhtml_basic.htm
style
main_layout.css
test
index.htm
style
main_layout.css
The first thing we do is change anything that was copied over by the template that needs changing in the new index.htm file. In this case it is just the title of the site and the meta keywords. The title should represent the site we are creating so we can call it Test Website, and the keywords we’ll make them test, web, site, website. So make the index.htm file (your home page) alterations and you should end up with the following.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Page Title Please Change</title>
<link rel="stylesheet" type="text/css" href="style/main_layout.css" title="main layout" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="put, lots, of, words, describing, your, web, page, here," />
<meta name="description" content="This is a nice description of your site" />
<body>
</body>
</html>
That pretty much takes care of the core file, we are ready to start adding our content now, this is the part of the website people will actually see when they visit our website.
As a really simple example, I want you to add a top level heading, a sub level heading and a paragraph of text.
The tags you’ll need are, <h1></h1>, <h2></h2> and <p></p>. Now these need to go into the body of the file as this is where the content of our site goes, so we need to put everything in the body tags that we want people to see.
Call our top level heading, “Welcome to the Test Website”.
Call our sub heading, “introduction”.
And in the paragraph write the following
“This is a block of text to explain something about what we are creating, it will only be short but it will be used to show text outputted in paragraph fashion. Please insert this in between the paragraph tags in your home page file.”
Now you might be wondering how you go about this or you might have known from the previous part of this book. Anyway to help you out here is how it should look.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Page Title Please Change</title>
<link rel="stylesheet" type="text/css" href="style/main_layout.css" title="main layout" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="put, lots, of, words, describing, your, web, page, here," />
<meta name="description" content="This is a nice description of your site" />
<body>
<h1>This is the Test Website</h1>
<h2>Introduction</h2>
<p>This is a block of text to explain something about what we are creating, it will only be short but it will be used to show text outputted in paragraph fashion. Please insert this in between the paragraph tags in your home page file.</p>
</body>
</html>
Now do you self a big favour, save your work and go check out your result, when you double click on the index.htm file inside your file browser, you should see the following in your Internet browser.
This is the Test Website
Introduction
This is a block of text to explain something about what we are creating, it will only be short but it will be used to show text outputted in paragraph fashion. Please insert this in between the paragraph tags in your home page file.
If you get this then you have completed your steps correctly, don’t worry about the word wrapping on the paragraph, this is automatic, if you resize your browser window by clicking on the bottom right corner and dragging it in and out you will see the paragraph wrapping to the size of the window, this is normal. This will also happen inside your raw text editor when writing your code, or not if it is set not to.
A few tips, when writing your code, word wrapping doesn’t actually matter, you can open a tag on one line and close it on another.
<p>this is some text</p>
<p>this
is some
text</p>
both the above examples will act the same and will output the same.
<meta name="keywords" content="some, words, here " />
This is the same as,
<meta name="keywords" content="some,
words, here " />
Whenever you word wrap onto a new line however, it will always add a space between the line above and the line below. So look at the following.
<p>some te
xt goes here</p>
is actually the same as,
<p>some te xt goes here</p>
and will be displayed on the screen in a web browser as,
some te xt goes here
This can cause more problems when the word wrapping of tag details happens mid way trough an identifier.
<meta name="keywords" conte
nt="some, words, here " />
is actually,
<meta name="keywords" conte nt="some, words, here " />
this would error as the identifier content in the tag is broken, whilst new browsers may compensate for this and ignore the error, this is still badly formatted, and should throw an error.
So be careful where you place your carriage returns (enter) and be sure not to break the flow of your content or tags. When using some raw text editors, auto word wrapping happens as you run to the end of the window, this is fine as it will choose the right place to move to the next line, and in reality never did place a carriage return, resize your raw text editor window and you will see for yourself.
That’s enough of that though back to the task in hand. We should now have a working web page written in XHTML1.0 conforming to w3c standards that would render on most browsers on most operating systems in just about the same way. You will notice that even though we haven’t wrote any CSS code yet, the headings and paragraphs are different sizes and weights. This is as we stated earlier, they are pre-defined tags, meaning they have some hard wired settings for the tags, all we do in the CSS file is alter them to what we want. If we we’re using custom tags then the lines would have looked the same, that is until we added our settings to the custom tags in our CSS file.
So to finish off this exercise, we shall transform the index.htm file by adding some style to the CSS file for the pre-defined tags. As the CSS filed is already linked to the index.htm xhtml file, then all additions to the CSS file should automatically filter through the next time you view from cold (opening a new browser window), or refresh the current web page index.htm by pressing F5 on your keyboard when in your browser or clicking the refresh icon.
Open up the main_layout.css file from the websites/test/style directory in your raw text editor. You should be greeted with a blank page. We are now going to define all the tags within the index.htm file body section, including the body tags.
Note: some web browsers are more capable at viewing web pages than others, and things may appear in one browser differently from another. This is down to how browsers take on the standards, and how they implement them if at all. By far the worst of all is Internet explorer which struggles to cope between each version with standards compliance being sketchy at best, although they are improving albeit very slowly. On the other end of the scale at their best are firefox, opera, safari and chrome, these tend to only differ slightly between themselves with testing on chrome showing 100% compatibility. However the differences between IE and those more compliant are a world apart. When testing your site be sure to check the results several browsers AT LEAST IE6, IE7, IE8, FIREFOX and Chrome, if you can manage this you are 95% of the way there and are reaching near on 98% of the total people browsing websites, the rest can be achieved using such tools as browsershots.org who provide a server for checking sites against browsers to see how they shape up.
Some browsers will accept alteration of the <html></html> tags others won’t so general rule is do not do it. All others like <body></body> and any tags that go in the body tags can be altered using the CSS file. We are now going to change the heading font colour, the sub heading font colour as well as the paragraph font colour.
Note: case should be watched closely, programming is case sensitive, also spelling in programming that is English is normally the Americanised version of the English language, so don't get caught out by things like colour and color, the latter is correct in CSS and the eyes of America, but the former spelling of colour will error. Be on the look out for these minor points as well as z instead of an s which is also very frequent in the American version of words like standardized etc.
Lets first define the body tags in our CSS file with the following code.
Note: Squiggly brackets { and } (ok, I know there is a technical term like braces or something, but my names better) are used in declarations, NOT BRACKETS (parentheses). We start off with the element name (tag name) then open our squiggly brackets, make your declaration, close squiggly brackets. As follows
body {
}
We are not going to add any declarations for the body tag at this point just define it so we may add some later. Lets continue add the following to your file.
h1 {
color: #ff0000;
}
h2 {
color: #00ff00;
}
Lets explain this a bit more, we defined the element (tag) with it's name and open and closed our squiggly brackets. We state the colour of the text using the color attribute, and we follow with a colon(:), we add the attribute information for the type of colour after the colon as a html hexadecimal colour representation, i.e. # means hex value, and ff0000 is red, 00ff00 is green ending the whole statement with a semi-colon(;). It is possible to use other means to define the colour, like the word red, or green, but the html hexadecimal version gives you more control over the colour, so lets use it.
Note: hexadecimal is base 16, let me explain, decimal is base 10, meaning 10 characters as follows, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, (that is ten numbers, because the number 10 starts all over again)
Now hex is base 16 so there are 16 characters, now we now there are only 10 characters that represent numbers, so we have to move to letters after we use them all up as follows, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f, (that is 16 numbers).
So look at the following.
Twenty in decimal is 20
Twenty in hexadecimal is 14
Now that you are suitably confused I'll tell you that you don't really need to know this, just that the 0's in the hex colour value are zeros and not the letter o. Just remember that and you'll be fine. To find out the appropriate hex value for a given, use a search engine to look for ‘html color codes’, or use an image editor program, choose a colour and look at the html colour value and use this.
Next we will add the paragraph declaration to the file too,
p {
color: #0000ff;
}
now your CSS file main_layour.css should look like this
body {
}
h1 {
color: #ff0000;
}
h2 {
color: #00ff00;
}
p {
color: #0000ff;
}
save this file, go back to your web browser, and refresh the page using F5, or if you have close this down, simply double click on the index.htm file in the test directory to view the changes on the CSS file.
You should now see the text has changed colour, congrats you have created your first XHTML web page using CSS styling.