Web design: writing your content

Creating a template

At this stage, you should have some understanding of how to write some HTML, what the basic tags are (you can check the quick-reference at any time if you need a refresher), and how to plan the structure of your site. That is, you know which pages your site needs, and how users will navigate between them.

Now it's time to create a template page for your site: consistency in visual appearance and navigation are very important parts of making a well-designed website. This method of site construction is aimed at getting some content up on your server as soon as possible (even while you're creating the site if you choose). You create a skeleton framework of pages so that you can test the navigation, and that you have no dead links during development.

Your template should be fairly straightforward. It will contain standard HTML document structure, plus your navigation. If your planned navigation structure is more than one level deep, you might want to make more than one template, but your starter site shouldn't really need to be that big. The following example template should hold no surprises, but it does include a <link> tag that includes a style-sheet, even though no stylesheet has been written yet. This is really for simplicity's sake - you'll have to add it sooner or later in this tutorial and better that you do so now than have to manually edit every document later.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Bob's Bits: template title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" media="screen, print" href="default.css"> </head> <body> <div id="skiplink"><a href="#menu">Skip to the menu</a></div> <div id="title"> <h1><img alt="" src="images/bblogo.png" width="100" height="92"> Bob's Bits: template title</h1> </div> <div id="maintext"> <p>Main content goes here</p> </div> <div id="menu"> <ul> <li><a href="index.html">Home/Front Page</a></li> <li><a href="about.html">About us</a></li> <li><a href="support.html">Support</a></li> <li><a href="sprockets.html">What are Sprockets?</a></li> <li><a href="products.html">Our products</a></li> <li><a href="wheretobuy.html">Where to buy</a></li> </ul> </div> </body> </html>

In the example template above, you should be able to see what the <div> tags are for: they group together sections of code. Here we have a "title" section, a "maintext" section, and a "menu" section, and it should be fairly clear to you what they mean. Right at the start is a "skiplink" section that contains an internal link to the menu at the bottom of the page, and the target of the internal link is the <div> section we called "menu". This allows visitors to your site to jump straight to the menu if they have a browser that doesn't support style-sheets, or if their browser speaks to them instead of displaying the page on-screen. Search engines and special-needs browsers prefer the content to be at the top of the page, which is why we put the navigation at the bottom. Because it's pretty useless for most desktop browsers (since we'll put the menu at the top of the page where it can be seen straight away) we'll use the style-sheet to hide the skiplink section.

The new tag inside the header section is the <link> tag. Header links declare relationships between the current document and other documents. In the advanced section you can learn how to use the link tag to add basic navigation, as well as information about copyright and author information, which many browsers (i.e., not Internet Explorer) can read to make using your site more pleasant for your visitors. Suffice to say that here, a relationship has been created that points to a style-sheet file called "default.css" in the same place as the current file. The media attribute tells the browser what medium (or media) the style-sheet is best suited for. You can specify "all" to always use that sheet, or include multiple <link> tags with different media attributes to load different stylesheets for viewing on-screen, for printing, etc. Again, this is an advanced technique, and for now you can simply copy the tag as it is.

Now all you need to do to get the site on its feet:

Copy the template file as many times as you have pages on your site.
Rename the copies so that each one is a page of your navigation (so in this case, index.html, about.html, support.html, sprockets.html, products.html, and wheretobuy.html. Read the template more closely if you don't know where those filenames came from; each one is a list item in the menu near the end).
Write your content. (The easy part!)

You can use any filenames you like, but bear in mind:

Filenames are usually case sensitive, so for convenience choose a convention and stick to it. The easiest one is to make every filename lower-case online. Index.html is not the same as index.html on a UNIX server, and over 60% of the web servers on the internet run a variety UNIX, so this is important.
Don't put spaces or special characters in your filenames. Stick to letters, numbers, hyphens, and the underscore character _. So "myFirstPage.html" is fine (if you remember to always capitalise the first letter of each word in a filename), and so is "myfirstpage.html" and "my_first_page.html", but "my first page.html" causes all kinds of hassle that can easily be avoided. URLs cannot contain spaces, so special characters like it have to be encoded, meaning that a single space comes out as %20 and you have to use this in all your URLs. Better to avoid using special characters at all in your filenames.

Armed with your skeleton site, you can try it out on your computer or upload it to your site and make sure it works and the navigation makes sense. This is the time to get the structure of your site right, while it's still easy to change.

Filling in the templates

The <h1>...</h1> tag will be the main title of each page, so update its content accordingly. It makes sense to put the name of your site inside as well as the title of the specific content of the current page, but don't feel forced. Make sure you keep the name of your site in the <title> tag in the header because this is the name of the link that shows up in most search engines. Use the header title to give the name of the site and the content of the page. Simply "Our products" isn't very specific, and neither is "Bob's Bits". A better choice is "Bob's Bits | Our products", or "Products from Bob's Bits". Don't make your title too long. <h1> usually has fairly large text, and <title> only has a little room to display in most web browsers. Remember, use the most appropriate tag for your HTML; never choose a tag just because of the way it looks on-screen, because you can change that later and some browsers arrange documents by structure, not by appearance.

Divide and conquer

Use <div> and <span> to mark up sections of text. For example, if you have a special offer and you want that to appear as large red text (and there's just one line of it), wrap the text with a <span class="specialoffer">...</span> tag, not in <big><b><font color="red">...</font></b></big> tags. If you have several special offers listed on a page and your client decides they want special offers to be blue, it's a pain in the neck to update your HTML (especially if you have offers on more than one page!), but if you create a "special offer" class, then you can tell your style-sheet just once how to display that kind of text and it will update all over your site.

Class or id?

A class is a "type" of section. You can have several sections of the same type. For example a journal entry, or a part number, or an update time. Instead of just choosing a style for them (like marking them up with teletype, or code tags), think of giving them a type. Part numbers don't really have a special tag for them.. they aren't code, or variables or samples, so a <span class="partnumber">...</span> makes more sense. You can define in your style-sheet how all part-numbers look after that.

An ID must be unique to the document (though not to your site, so you can use "title" on every page if you want it to look the same). Only have one item on your page can have that id. This can be useful though; name sections to describe the structure of your site, and then you can use your stylesheet to position those sections on the screen in any way you choose, and you don't have to worry about two sections of code overlapping each other.

Headers, sub headers, and sub sub headers

If you have a lot of content, consider splitting them into sections. Use the header tags to show their level and importance. On the page you are reading, for example, "Creating a template" and "Filling in the templates" are both level two headers, and "Web Design: Writing your content" is the level one header. You can split up your level two sections into level three sections too, if you're obsessive. However try not to have too much content on one page.

If you are maintaining a journal, figure out some sort of convention for your entries. Mark up the page section with a second-level header for each date, for example, and make the title of each journal entry a third-level header between dates (so you can have more than one entry per day). There's no hard and fast rule for this, just figure out the structure of your document and use headers accordingly. Headers make great anchors for internal links too, just add an id="" attribute to the <h2> (or <h3>, etc) tag to give it a name.

How much content?

The amount of content you should put on one page depends on your audience and on the subject of the content. Technical content can afford to be fairly long, like this page, but if you're writing for younger, or more excitable people then keep each page short. You can always add more pages to your navigation. You should already have some idea of how much you plan to write on each page from your planning stage, so try to keep within that. Rambling will bore your users unless they want a lot of detail (technical documents need example and deeper explanation, but if the visitors to Bob's Bits are tradesmen, they already know all about Sprockets and you can relegate that information to a separate page (About Sprockets) and keep your main content short so that the tradesmen can find what they want quickly. Striking the right balance between cigarette health warning and epic novel length is what distinguishes good writers from just writers, so don't worry if you get this a little wrong. You can always go back and update your site later once the content is written.

Use images sparingly

Never include layout images in your HTML - you can tell your style-sheet to load them and this will give your web-site consistency and maintainability. When you include an image, make sure it isn't too large; large as in the size on the screen, and large as in the amount of space it takes up on the computer's storage. Large images take time to download. A good upper size limit for an image is about 400 pixels wide, by 300 high (and even that is pretty big). If you want to show images larger than that, then make the image a link (by wrapping an <a href="">..</a> tag around it) and make the link point to the larger image:

<a href="images/sprocket3_large.gif"><img src="images/sprocket3_small.gif" alt="The third Sprocket" width="300" height="200"></a>

Remember that the more images you have on a page, the longer it will take to load. Check how much disk-space each page is taking up (HTML file plus the size of the images). 100k total is a reasonable upper limit for the total size of a page. Fortunately most browsers keep a copy of the style-sheet and only load it once, so you don't have to include that in the calculation. Many sites, like Amazon.com use such complicated HTML markup that the markup file on its own is over this limit. Remember that not everyone has a broadband internet connection. Try not to get your visitors too bored to hang around waiting for your site to download!

A more detailed example

Here is the Bob's Bits site so far. You've written its content, laid out your site structure, and made sure everything is ready for the next stage: designing how the document looks on screen. Click around, and remember you can view the HTML source code on your graphical browser by choosing "View source" from the "View" menu (this applies to Netscape, Internet Explorer and Opera. Your mileage may vary on other browsers, but nearly all allow you to see the HTML source code).

Lazycat.org | matt robinson