Title: XHTML/CSS 1
Class: Coding
Date: 03.03.2007
Introduction to XHTML / CSS
Web pages are written using a script known as HTML. Notice that we use the term scripting rather than programming. The Hyper Text Markup Language, or HTML, has evolved over the years into a number of different forms but basically the original concepts remain the same. The HTML tags are instructions to the browser, showing how to format the page. HTML has nothing to do with the actual text or images shown on a page. XHTML is simply a more modern form of HTML. As a simple demonstration, the following sequence of HTML tags produces a valid web page that will open up your browser. However, you wont see anything since it doesn't contain any content. It does prove that the browser "likes" this format and no error message should be produced.
Type the following using a text editor such as Notepad in Windows, or kedit/gedit in Linux. (Or copy and paste.) Save it as "test.html".
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Does it work in your browser? You don't really know because there isn't anything to see yet. Now add a very short message between the title tags, and type something between the body tags. Try it again in your browser.
From this, you should have realised that HTML tags come in pairs - an opening tag and a closing tag. The closing tag is the same as the opening tag but with a slash. If you type a lot of words in the body, you will find that there is no carriage return and the browser shows everything in one continuous line. The HTML tag to simulate a carriage return is <br> and it should have a matching closing tag in theory, but in practice a closing tag is not necessary. Try it!
Other common text tags are paragraph <p></p>, bold <b></b>, underline <u></u> and itallic <i></i>.
You must use these tags in a logical order - when using multiple tags, the closing order is the reverse of the opening order. This is known as "nesting tags". For example:
<b><u><i>Bold, underlined, itallic text</i></u></b>
What I have described so far is the simplest form of HTML and although it works well enough on your own computer, we need a little more for use on the internet. From this point onwards, HTML will be in XHTML form. First of all, I must point out an error that needs to be corrected for XHTML. The <br> tag needs to be closed. In XHTML, this type of tag (those that don't have any content between opening and closing tags) have a new form. It is written as <br />. The "space slash" shows that it is a combined opening/closing tag.
We need to let the browser know that we are using XHTML and which variation of this we are using. We also include some Meta data which is used primarily by search engines but also gives useful information to others. Thus our empty page (or template) that we started this article with becomes:
<?xml version="1.0"?>
<!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>
<title>Introduction to XHTML / CSS</title>
<link rev="made" href="mailto:ceo@krelay.com" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="NoteTab Light 4.9" />
<meta name="author" content="Peter Sumner" />
<meta name="description" content="First page in a series of XHTML/CSS scripting articles." />
<meta name="keywords" content="XHTML, CSS, scripting, browser" />
</head>
<body>
</body>
</html>
I have left the "content" to illustrate the typical usage. To use this as a template, replace the email address with your own, and remove or modify the content from the meta tags. Note, the generator refers to the software used to write the page. It could be "Notepad" or even "My own fair hand".
Now prepare to write some content
So far I haven't mentioned CSS. This is the "style" content. The pages that we will now make are a combined form using both XHTML (the tags) and CSS (the style).
It would be nice if we could make a page that appears the same in all browsers and on all computers. Unfortunately, this isn't possible! We will look at why this is so later in this series. We are using a standard language but a lot of browsers don't comply with the published standards. Then, computers aren't the same either! We have to make a compromise solution that will satisfy most hardware and software setups. For this purpose, we design a page of a set size that should display correctly on a monitor set to 800 x 600 resolution. Sounds easy doesn't it? It is not quite so simple though.
The width of 800 pixels may not be available. For example, Opera browser has been foolishly designed with borders to the left and right of the main window. It is not the only one with this problem.
All browsers display a scrollbar when the page exceeds the window height. As most pages will definitely contain a reasonable amount of content, we have to presume that the scrollbar will be present. Thus our page width is actually 780 pixels. Readable content doesn't look nice immediately next to the screen edge so some padding of at least 5 pixels each side should be provided. This way, even Opera will display correctly.
What happens if the user's monitor is set to 1024x768 resolution, or greater? (Linux generally has a default of 1024x768) Often, we see the content up against the left side of the screen. This really doesn't look nice, so we will center it!
Readers familiar with HTML may be aware of tables. XHTML doesn't use tables, it uses Div's and Span's instead. Here we will jump straight in with a set of Div's.
The main problem is that the designer has no way of knowing what width the user's screen is set to. But we know one important fact - it is 100% wide! Therefore, we will first make a container div which is 100% wide, and then place a second container div inside which is 780 pixels wide. Then a third plain div corrects the alignment. It is easier to do it than to explain it, so here goes:
Put this between the body tags!
<div align="center" id="container" style="position:absolute;left:0px;top:0px;width:100%;background-color:gray;border:none;overflow:visible">
<div id="main" style="position:relative;width:780px;height:1000px;background-color:white;border:none">
<div align="left">
Content will go here
</div>
</div>
</div>
OK, that seems to work doesn't it? Well, yes it does, but there is one important fact to be aware of. It works only if there are no borders on these div's. Put a border on and everything changes with different results in each browser - so don't do it!
The examples given are formatted to make them easily readable. XHTML doesn't need to be written this way because all extra white space and carriage returns are ignored. You could save a few bytes by placing everything on one line, but it would be very difficult to read!
A note is needed here concerning the DOCTYPE declaration. The example given has the word Strict in two places, but if we add content which doesn't fully comply with the 'Strict' definitions, it will change to 'Transitional'. We will look at this more closely later on in the validation section.
We now have a page template almost ready. The only thing to adjust later is the 'height' in the second div. Of course, you can change the colours as you wish. In the next section we will study Embedded style for our default template, and then add some real content.