Webdesign Tutorial - Chapter 3: Basic Page Layout (XHTML)

In this webdesign tutorial I'm going to be tying together the skillsets from my XHTML tutorial and my CSS tutorial and take you through the process of how to build web sites from scratch. We're going to start by building a very basic page template. When we're finished, our page is going to end up looking like this (click to enlarge):



Doesn't look all too flashy does it? That's because it uses no images. Yes that's right, the page layout above was intentionally created purely with XHTML and CSS code.

Don't worry, we'll deal with images and flashier designs later as well, I'm just starting us off gently by choosing a design that only requires a text editor and a web browser to create. Let's start with the XHTML code, shall we?

If you want to follow along and build this layout yourself, start up a simple text editor like Notepad and create two blank files: one named "example.css" and one named "example.html" to save the code snippets into. For this chapter we'll only be needing the html file.



1. The document Head

Since our document is going to need the mandatory <head> and <body> sections at its core, let's start off with the head area. For now we will for simplicitys sake only be working with the default Latin-1 character encoding, so first we're going to include a <meta> tag that tells the web browser to decode our document using that character set:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>My page</title>
  </head>
</html>

As you noticed, I also snuck the <title> tag in there, setting the title of the page (and specifically the browser bar title) to "My page". The contents of the title tag is also the text that will show up as a clickable link on the result pages of most major search engines such as Google, etc.

OK, we don't really need to add anything else in the <head> area at this point in time, so let's just settle for the above for now and move on.



2. The document Body

In the body of the document we will place anything that will be a part of our web page, visible in the visitors web browsing window as they arrive at our page. Since HTML code follows a parent - child order, this will essentially mean we have to think of it as building our page from the outside in.

In practical terms, that means we first start off with the background area, then the area we'll set up to hold the contents of our site, then further into finer and finer detail until we hit the textual content as (in most cases, anyway) the very last stage.

The <body> tag is mandatory, so we'll write that out first. Then, inside that, we'll set up a <div> tag as a general container for the whole web site. Kind of like a big bag that everything else fits snugly inside. Let's name it "container", too:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>My page</title>
  </head>
  <body>
    <div id="container">
    </div>
  </body>
</html>

Allright, now to fill it with the rest of the page. Generally, you want to use a few more <div> elements to divide your page up into different sections, also making it more managable to update and change if needs be. We will structure our page up into the "logo" area on top, the "menu" area for page navigation under it, followed by the "content" area for our textual content and the "footer" at the very end for a short copyright notice and a quick contact link.



3. The Body Logo

Now that our main "container" is in place, we'll start our way down the page structure with the logo area on top of our page, a <div> element that we will call "logo". It only holds some simple text, but note that there is a difference in font size between the "My page" and the "v1.0".

We will handle this by first adding the "My page" bit by itself inside the "logo" <div> (which takes care of formatting that text) and then adding an additional <span> element with the "v1.0" text, connected to a class named "versionText" which will be used to change that font size.

This added in, our XHTML code now looks like this:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>My page</title>
  </head>
  <body>
    <div id="container">
      <div id="logo">
        My page
        <span class="versionText">v1.0</span>
      </div>
    </div>
  </body>
</html>

Time to proceed to the navigation, which will be the most advanced part of our little page.



4. The Body Menu

For our simple navigation menu, I have picked a few arbitrary words that seemed likely candidates for things you might want on your page, such as an "About" page, a "Blog", some frequently asked questions ("FAQ") and a "Contact" page. Obviously, we know that links are created by just placing anchor (<a>) tags around the words we want linked, so why then is this supposedly so advanced?

Well, it's not really, but it is a bit more complex than regular web links because of the CSS formatting we want to apply. This is best done by setting our menu links up as an unordered list (<ul>) object. Doing it this way has become an accepted norm in modern webdesign, not only because it's a handy way to structure things for formatting but also because it makes semantic sense. Our menu is after all just a list of links, so a list seems the most logical choice to store it in.

We will put our links list in a <div> called "menu", like so:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>My page</title>
  </head>
  <body>
    <div id="container">
      <div id="logo">
        My page
        <span class="versionText">v1.0</span>
      </div>
      <div id="menu">
        <ul>
          <li><a href="">About</a></li>
          <li><a href="">Blog</a></li>
          <li><a href="">FAQ</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

Since we will only be making a template and not a complete web site in this example, we won't bother entering anything in the href="" part of the links.



5. The Body Content

The content part is the easiest bit, all we need for my simple example above is a header and some paragraphs. Since the random "Lorem Ipsum" text I've used is a bit lengthy and our code is getting a bit long as well, I will only include five words to start each paragraph off and just snip it off with some periods.

We will also create a new <div> element for our content area, named "content".

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>My page</title>
  </head>
  <body>
    <div id="container">
      <div id="logo">
        My page
        <span class="versionText">v1.0</span>
      </div>
      <div id="menu">
        <ul>
          <li><a href="">About</a></li>
          <li><a href="">Blog</a></li>
          <li><a href="">FAQ</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </div>
      <div id="content">
        <h1>Welcome to my page</h1>
        <p>
          Lorem ipsum dolor sit amet ...
        </p>
        <p>
          Nullam diam ipsum, tincidunt ut ...
        </p>
        <p>
          Proin <a href="http://www.lipsum.com/">vulputate</a> semper velit ...
        </p>
      </div>
    </div>
  </body>
</html>

As you can see I've included a link to http://www.lipsum.com/ which is the page that generated the random "Lorem Ipsum" text that I used. I just wanted a link to format in the content area, too, in addition to the menu ones. The word "vulputate" was picked for its excessive weirdness.

Only thing left in the XHTML part now is the footer!



6. The Body Footer

At first glance there isn't much to the footer either - a notice on one side and a link on the other. But wait, how do we get them to align to the left and right on the same line at the same time?

Well as you might know already, that isn't really possible to do. What we instead have to rely on, is a method of creating two <div> elements and "floating" them - one left, the other right. Even if that doesn't make sense right now, it will in the next chapter with the CSS counterpart to our XHTML.

So, let's add in a "footer" <div> with our two notice <div>'s and call it a day on the XHTML:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>My page</title>
  </head>
  <body>
    <div id="container">
      <div id="logo">
        My page
        <span class="versionText">v1.0</span>
      </div>
      <div id="menu">
        <ul>
          <li><a href="">About</a></li>
          <li><a href="">Blog</a></li>
          <li><a href="">FAQ</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </div>
      <div id="content">
        <h1>Welcome to my page</h1>
        <p>
          Lorem ipsum dolor sit amet ...
        </p>
        <p>
          Nullam diam ipsum, tincidunt ut ...
        </p>
        <p>
          Proin <a href="http://www.lipsum.com/">vulputate</a> semper velit ...
        </p>
      </div>
      <div id="footer">
        <div id="lowerleft">Copyright ©2008 Myself</div>
        <div id="lowerright"><a href="mailto:myself@myowndomain">myself@myowndomain</a></div>
      </div>
    </div>
  </body>
</html>

I just called the floated <div>'s "lowerleft" and "lowerright" for now even though they could probably be given better more semantically correct names as well.



Allright, so now our XHTML code is complete. What if we tried opening it in the browser at this point? What would that look like? Well, depending on your browsers defaults, something like this (image has been cropped where the text just extends to the far right side):



Clearly, even though we got our message out there, not much fun without the CSS. So let's take a look at how to add that part in the next chapter!





< Previous: Introduction

robert@eagleowl.se     +46 (0)26-16 13 61     www.eagleowl.se
©2021 EagleOwl