How to lay out Web pages

Congratulations. You've finally arrived at the stage where you build real, live HTML pages. Seeing as it's taken a while to get here, let's skip the awards ceremony and jump right in.

For this stage, you'll need three things: Your design sketch, your HTML text editor or layout editor, and your Web browser. With these items, you'll be able to build and preview Web pages.

The question is, which pages should you build first? The answer: Templates.

Templates

As your site grows you'll likely add all kinds of pages. If you're masochistic, you can build new pages from scratch each and every time. If you're smart, you'll use templates.

The benefits of templates extend to both you and the user. For you, templates put your focus on the content instead of the code. For users, templates guarantee that every page in your site will have the same navigation and structure. They'll know what to expect.

So how do you build these wondrous things? The key is your design sketch.

The sketch you assembled has four elements: Navigation, content area, logo and footer. These same elements are the foundation of your template. What you need to do now is take your sketch and turn it into an HTML document.

How you accomplish this depends on how much HTML you know. If you're comfortable using HTML tags, you can create a template with a text editor. If you're unfamiliar with the specifics of HTML, you should use a layout editor.

The building process is basically the same regardless of the editor you use. In both cases you should run through a cycle: Add an element, save your document, then preview the document in your browser (or through your layout editor's preview tool). You should continue with this cycle until you're done building your template.

With this template in hand, creating new pages is painless. Simply open the template file in your text/layout editor, add your content, then save the file with a different name. Your template will remain untouched and your new file will be ready for posting on your site.

Technically, you can get by with only one template, but to make things easier on yourself it's best to build templates for every section of your site. This way, if your navigation changes between sections, you don't have to make navigation alterations when you're adding new content.

Related links

Name	Type	Notes
Introduction to HTML	Tutorial	Webmonkey covers the basics of HTML.
HTML Cheatsheet	Resource	A list of commonly HTML tags from Webmonkey.
HTML Primer	Tutorial	This tutorial from HTML Goodies goes into significant depth on using tags, manipulating text and adding images.
Table Tips	Tutorial	Learn how to construct tables in HTML documents with this Webmonkey guide.
HTML & XHTML: The Definitive Guide	Book	This O'Reilly book is one of the most comprehensive HTML resources you'll find. It covers the basics and digs deep into advanced techniques.
XHTML Tutorial	Tutorial	XHTML, the next generation of Web markup, provides more usability and functionality than HTML. This W3Schools.com tutorial provides an introduction.
Got a recommendation? Send it to: editor@theindependentpublisher.com.