You don't really need to know how to write your own web pages. You can always hire some dweeb to create your web pages for you, and then people will start e-mailing their friends to check out your page, and soon the whole world will think you're a dweeb. The speed of the Internet is truly amazing.

The web is a new medium with it's own rapidly evolving styles and conventions.  I has become the world's collective consciousness. It's mostly visual because human intelligence is mostly visual: more of your brain mass is devoted to vision than any other function.  It offers new ways of fusing text, graphics, sound, etc. to convey information efficiently..  The web is the world's synaesthetic conversation with itself.

This site summarizes the basics of HTML (HyperText Markup Language), digital images and standard web-authoring techniques.  It's objective is to get you writing your own web pages quickly and competently.  Beyond the basics of format tags and image editing for the web, it introduces tables, frames, forms and CGI, and style sheets--tools that will take you to a fairly high level of amateur web design.

HTML standards

HTML is the evolving set of formats used in creating web pages.  The World Wide Web Consortium (www.w3.org), directed by Tim Berners-Lee, is supposed to determine HTML standards, hardly any browsers are fully compliant with HTML 4, the current standard.  Mozilla Firefox and Microsoft Internet Explorer (IE) compete against each other by  introducing new non-standard features, supported by their browsers only.  These pages will focus on the standard features of HTML 4 that are supported by all browsers. 

Basic design principles

HTML tags are simply formatting instructions that tell a client browser how to display page contect subject to the client's display capabilities. The server transfers the HTML document to the client with a limited amount of format information, and the client browser does the work of assembling the page.  The server doesn't get slowed down doing all the formatting, and file transfer is faster because the network doesn't have to transmit so many formatting instructions along with the content.  But this means that you don't have strict control over how the client's browser manages the layout and display of your page.  (Web design is more difficult for anal-retentive control freaks.)

Your principal objective as a web author is to use the limited set of HTML tools to make pages that are effective on any browser, displayed in 8-bit, 16-bit or 24-bit color, at any resolution from 640 x 480 to 1600 x 1200.

It's tempting to incorporate lots of fancy new techniques into your web pages, but you should try to design pages that "degrade gracefully" when viewed with older browsers that don't support those techniques.  Similarly, it's best to design for lower-end monitors, since many people are still using older displays, and a lot of people with higher-resolution monitors aren't going to want to view your page in full-screen mode.  Monitor width is the most important constraint, since horizontal scrolling is more of a bother than vertical scrolling.  Try to design your pages so they'll look decent on a page as narrow as 600 pixels or so, and try to present your most important stuff in the first screenful, in a page height of 300 pixels.

A browser's default font sizes are usually 12-point for variable-width type and 10-point for fixed-width type, but many users will specify alternative default sizes in their browser preferences.  Note that Macs and Windows PC's handle font sizes quite differently: Macs display 12-point type at about the same size as it would appear on paper; Windows sizes 12-point type at a paper equivalent of  about 16 points. So keep your design strategy flexible. If you really need total control of your page layout, skip the HTML and save your document in Adobe Acrobat (PDF) format.

Learn HTML better using a plain text editor

HTML is plain text, and easily created with any basic text editor.  In fact, I strongly recommend that you take the time to create at least your first few pages with a plain text editor such as Pico or Textedit (UNIX) or Notepad (Windows).  This is the quickest way to learn how HTML really works. (Do not use MS Wordpad; it will add special characters that will confuse client browsers.) There are plenty of high-end HTML editors out there that will insulate you from having to learn HTML itself.  Even MS-WOrd will let you save your files as web pages, but you'll rarely get the exact page you want, and Word is notorious for injecting so unnecessary HTML code into web pages that they become difficult to edit.  If you do use a word-processing package to create your first web pages, be sure to save the files as plain (ASCII) text, not as HTML.

Most HTML formats are just start and stop tags enclosed in angled brackets like this: <tag> ..stuff being formatted.. </tag>.  You can nest most tags inside other tags like this:  <A> .. <B> .. </B> .. </A>, but if you overlap them like this <A> .. <B> .. </A> .. </B> you can get into trouble.

Note that HTML tags are not generally case sensitive, although we'll usually show them in caps for readability.   On the other hand, paths and filenames typically are case-sensitive, particularly in the UNIX world, so you should get in the habit of using lower-case filenames when creating files.

Server considerations

Mostly you will be dealing with UNIX servers, so you need to be aware of some basic UNIX conventions.  For security reasons, the web server daemon (the process that fields requests from client browsers) allows clients to access only a restricted portion of the server's disk system.  Many servers are configured to serve files from subdirectories names public_html located within users' home directories.  You must set your home directory to be executable to everyone (chmod 711 ~) and your public_html subdirectory and all its contents to be readable/executable (chmod -R 755 public_html).

UNIX filenames are case-sensitive, and the space character functions as a command-line separator, so I strongly recommend that you use only lower-case characters (letters, numbers and/or underscores) when naming your files.  Do not use special characters such as ?, % and # in your filenames.  Use underscore characters instead of spaces.

PC-based HTML editors will typically save your files with ".htm" extensions unless you actually specify ".html".  The server won't serve a page if the client request includes the wrong extension.  To avoid confusion, use the ".html" extension when naming your webpage files.

Browsers depend on filename extensions to identify file types and determine how to handle them, so you should stick with standard extensions: .gif for GIF images, .jpg or .jpeg for JPEG's, etc.

When FTP'ing an HTML file to a UNIX server, always use the ASCII transfer mode, so that Windows line terminations (CR+LF) or Mac line terminations (CR) are translated into UNIX line terminations (LF).

The basic tags

Okay, let's create a real web page. Open Notepad (Windows) and type in the basic framework tags for a web page.  Every HTML document has <HTML> .. </HTML> tags at the very top and very bottom, and tags defining head and body sections.

<HTML>
<HEAD> </HEAD>
<BODY>
Hi Mom!
</BODY>
</HTML>

Now save this file and open it locally with your browser. You should see your first web page:

If you want check it out for real over the network, FTP this HTML file to the public_html subdirectory under your UNIX (Copland) home directory. Set the file permissions so other browsers can read it.

<HEAD> elements

Now let's include some other basic elements.  The HEAD section should include a title (check the title bar at the very top of your browser window frame).  If you bookmark this page, the title is what goes in your bookmark list.  Also many search engines reference by page title.

<HEAD>
<TITLE>Mad Dog's HTML Reference</TITLE>
</HEAD>

The HEAD section may also include <META> tags holding keywords for search engines, cascading style sheet format specifications, and/or Javascript stuff, but we'll mess with these later.

<BODY> tag attributes

The BODY section contains everything you see on the browser page--text, images, links, etc.  The BODY start tag should include a tag attribute specifying the background color for the page.  Choose a background color that will contrast well with your text and in-line images.  If your page doesn't specify a background color, most client browsers will default to a white background. For example, the body tag for this page includes a BGCOLOR attribute

<BODY BGCOLOR="#FFFFFF">

Web colors are usually specified as Red-Green-Blue triples, with each primary color's intensity represented by a two-digit hexadecimal (base-16 with digits 0123456789ABCDEF) number ranging in value from 0 to 255.  This example specifies full-blast (FF = 15x16+15 = 255) brightness values for each primary, which makes white.  This provides maximum contrast with black text; 000000 is completely black--excellent for heavy-metal fan club sites, etc., especially when you use red text (FF0000, or maybe FF6666 with equal parts Green and Blue added to lighten the Red).

You can experiment with the numbers to see what colors you come up with.  If you don't want to mess with hexadecimal specification of colors, you can specify one of the pre-defined colors by name instead, e.g.: <BODY BGCOLOR="blue">

Here are hexadecimal recipes for some other standard color chips. These are all permutations of 00, 33, 66, 99, CC and FF, and are web-safe colors that display reliably even on 8-bit monitors:
 

You can also specify any of several other attributes for the BODY tag, such as:
 

BACKGROUND="ugly2.gif"	Specifies an image to be tiled over the entire page background like this.  Hopefully you'll pick an image that doesn't impair readability!  The image overrides any color specified with the BODY tag's BGCOLOR attribute.
LINK="blue"	Specifies the color of links the client has not yet visited.
VLINK="#0000CC"	Specifies the color of links the client has already visited.
ALINK="red"	Specifies the color of links when the user clicks on them.

Posting your page to a UD web server

Here are the steps to post your new web page on Copland, the University of Delaware's principal web server.

1. Log in to Copland. There already should be a subdirectory under your home directory called public_html; if not, type
   > mkdir public_html at the UNIX prompt to create one.
2. Set your home directory's permissions:
   > chmod 711 ~
   Set your web subdirectory's permissions:
   > chmod 755 public_html
3. Now transfer your web page and associated image files to this subdirectory,. Then change to public_html and make sure everything within it is world-readable:
   > cd public_html
   > chmod 755 *
4. The URL (web address) for yourlogin's web page called yourfile.html would be http://udel.edu/~yourlogin/yourfile.html
   (It's not www.udel.edu, and don't omit the ~).

For information on transfering files from one computer to another via FTP, check out the FTP summary.