Website Construction for Visual Artists

Webpage templates

Here is a basic template for an HTML document:

template.htm

When you download this file and open it in a text-editor, you will see the following tags included:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
These are nothing to worry about. They are here because I wanted to make this template a proper HTML document, reasonably conforming to W3C specifications. You could erase these lines and they would have no effect on how a browser renders your webpage.

In the <head> of this document, there are ***'s that can be erased and filled with proper information. For the following line:
<meta name="description" content="***">
the content="" can offer a short description for search engine results. This is optional, though.

I named the stylesheet link stylesheet.css. There isn't a skeletal framework for a proper external CSS document -- these files contain only selectors and declarations. Nevertheless, I'll give you an optional stylesheet document to get started with:

stylesheet.css

Any of the selectors (with empty declaration brackets for properties & values) can be used or erased or even ignored. Naturally, many more selectors can be added onto this document.


A very skeletal template for a portfolio site

This may be more useful as a study-guide than as a usable template, but since I had offered these files in an earlier version of this tutorial, I'll offer them again:
default.htm   (the home page)
resume.htm
works.htm
stylesheet.css
You click to preview each of these pages, but there isn't much to see with the 3 HTML files just yet. If you click the navigational links, however, you'll notice that they are already functional.

These files can be downloaded and viewed in a text-editor (remember: don't use a word processing application). You should keep them together in a single folder:



Notice an extra folder in there called "media". I do recommend that you keep image files (and other media files) separated from your webpage documents, just to keep things organized. When you create links to images in such a folder, this needs to be accounted for in the link pathway. For example:
<a href="media/image3.jpg">
  <img src="image3_thumbnail.jpg" width="100" height="75" border="1">
</a>

Top