HTML 101: pt1 - Starting Out - HTML Forums

Horus_Kol · 06-20-2005, 11:36 AM

Okay, I'm going to start from the ground-up on this, because I think it is important to get things right from the start.

This tutorial will cover the basic skeleton, or shell, of a HTML script using the xHTML 1.1 standard from the World Web Consortium. You don’t need to read all of that for now – just know that it is there, and can be referred to. Besides, if you ever get problems you can always ask here at HTML Forums 

Now, there isn’t anything special about the xHTML in terms of what you have to write, except for a couple of rules about capitalisation and such like.

The biggest reason for using xHTML is that it has become the standard – nearly all modern browsers will accept xHTML and render it. However, as always, there is no guarantee that you will get exactly what you intend on all platforms, but working to a standard minimises cross-platform issues.

An xHTML Skeleton

Before I get to waffling any longer, here’s an xHTML skeleton:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title></title>
  </head>

  <body>

  </body>
</html>

I always start from the same skeleton throughout a site, and so I keep a html file with just the above code as a template to work from.

A simple page:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Page Title</title>
  </head>

  <body>
    <div>
      <p>
        All text should be enclosed in a paragraph tag.
      </p>
    </div>
  </body>
</html>

Okay, fair enough, but what on Earth does it all mean?

Declaration, Doctype and Encoding

Well, the first two lines inform the browser what version of the language you are using – the idea is that the browser will then display your HTML as you intended, by utilising the same standard of code which you have written the page in.

Code:

<?xml version="1.0" encoding="UTF-8"?>

This informs the browser of the XML version. The encoding attribute defines the character set you have used to code in. UTF-8 includes most alphabets around the world, including Hebrew, Cyrillic, Japanese, Chinese, and so on, making it the new standard.

Unfortunately, the most commonly used browser (Internet Explorer v6.x) can wig out when this line is in the page code. This may be fixed in IE7 when we get hold of it but, then again, maybe not.

It is always a good idea to check your pages in at least two or three different browsers (IE, Mozilla/Firefox and Opera are the top three PC browsers), and if you do find you're having trouble in IE, try taking this line out.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

The Doctype informs the browser of the ruleset it should follow for rendering you page’s code. Without this, the browser will revert to it’s default ruleset, and you may not get the results you were after.

More information on Doctypes

Again, IE could sometimes default to "debug mode" if you have the second line in the Doctype. As before, if you find you are having problems, try without:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">

The HTML Declaration

Code:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

It is a good idea to let the browser know what language is being used on the page. Some languages, such as Hebrew, do not flow from left-to-right, and so the browser needs to adapt to the requirements of the language. Also, if, for example, a blind user were using a speaking browser, it would need to know the correct way to pronounce the text being sent with the page.

Every language has been given a reference code, so there is “en” for English, “de” for German (Deutsch), and so on.

The Head Section

Code:

  <head>
    <title>Page Title</title>
  </head>

The basic purpose of the <head>..</head> section is to contain the information about the page.

This includes the <title>..</title>, or any other information element, like <script> or <style>. I won’t go into too much detail here, because these elements can take up a long description, and I wouldn’t help you by summarising. There are other tutorials for all of these bits.

The Body Section

Code:

  <body>
    <div>
      <p>
        All text should be enclosed in a paragraph tag.
      </p>
    </div>
  </body>

This is the place where your actual page design is done – all the text, images, tables and forms are put in between these two tags (<body>..</body>).

The <div> element is used to block out sections of the page, while the <p>..</p> tags are used to contain paragraphs of text.

There is a lot more that can be used to define position, colour, layout, borders, and so on – but that will take some time.

More tutorials will be written for styling and content layout.

Feel free to copy the skeleton for use on your own pages:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title></title>
  </head>

  <body>

  </body>
</html>

Onwards to Part 2: Simple Page Layout