html

Web Design Philosophy

Basic Goals

Keep content and markup seperate when possible. Therefore, use css, as well as dynamic templates.
Make it easy to administer

Three types of content

Journal Content. This can be abstracts that point to new content elsewhere on the site, or a personal journal, or links to outside content, or a combination of the above. Ususally only the most recent n entries are displayed.
Static Content. For instance http://halcanary.org/?p=photos is a static page that contains links to each of my photo albums. Paradoxicaly, a static page is more likely to change than a journal type page.
Form based CGI's. Usually only used if the reader needs to send information back to the site.

additionally, dynamically generated search results, like this example. I'm not including this as one of the three, because I've never written a search engine.

Getting Started

Under most circumstances, a web page is an HTML Document. Here is an example of a valid HTML document:

a html document
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Title</title> <meta http-equiv="Content-type" content='text/html; charset="iso-8859-1"'> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Heading</h1> <p>content</p> </body> </html>

a html document

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Title</title>
    <meta http-equiv="Content-type" 
      content='text/html; charset="iso-8859-1"'>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Heading</h1>
    <p>content</p>
  </body>
</html>

Under most circumstances, you request a document, and the server feeds you back a stream of bytes that did not exist before that request. The server calls another script or program to output the HTML document on the fly. This is called a dynamically generated web page. Here is an example of a perl script that might genetate such a page:

index.pl
#/usr/bin/perl print <<"HERE"; <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Title</title> <meta http-equiv="Content-type" content='text/html; charset="iso-8859-1"'> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Heading</h1> HERE print ' <p>Current date and time: '.localtime().'.</p>'; print <<"HERE"; </body> </html> HERE

index.pl

#/usr/bin/perl

print <<"HERE";
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Title</title>
    <meta http-equiv="Content-type" 
      content='text/html; charset="iso-8859-1"'>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Heading</h1>
HERE

print '    <p>Current date and time: '.localtime().'.</p>';

print <<"HERE";
  </body>
</html>
HERE

Look And Layout

The next thing to do is design the look and layout of your page. I'm not going to tell you how to do it, but I will give suggestions:

First decide on layout. Try and keep it as simple as possible. Don't use frames, only a single large table.
Don't mess with the browser's default font. I hate that. Fonts are largely a matter of personal preference.
Put all your color and paragraph formatting information in a css file.
Use subtle color shades to differentiate between logical parts of a document.

file modification time: 2003-07-16 01:18:44 -04:00

Copyright 1997-2012 by Hal Canary.
mailto: halcanary at gmail dot com
http://halcanary.org