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