| |
    
|
by Steve Gigl
So you want to make your own web page. Why? Have commercials or peer pressure led you to think that everyone needs a web site? Do you want to use it as a way to promote yourself or distribute your resume? Are there things that you want to say? Or, are you just curious about the possibilities that having a web site presents? All of these, with the possible exception of the first, are good reasons to start learning the art of web design.
There are, however, more important and noble-sounding reasons. The Internet is the largest and most unique library in the world, simply because of its accessibility and lack of discrimination. Everyone with access is allowed to contribute, and while that includes a lot of hacks, even very poor sites can be worth a visit if you find an interesting link there. By pointing visitors to pages you find interesting, you can become part of the most amazing index this planet has ever witnessed, a constantly changing set of cross-references that allows access to everything from good recipes for gumbo to the most recent pictures from Mars. A web page is also a place you can practice writing for an audience, as well as provide entertainment for your visitors (or at least attempt to do so).
Until a few years ago, the only way students could read their e-mail was through a terminal emulation program called Telnet, which allowed them to log into the UNIX environment in either maroon or gold and read e-mail with a Unix-based program called Pine. Unfortunately, this type of account results in heavy use of the server's resources, and slows down access for everyone involved. For this reason, the U now starts new students with a client/server account, which only allows students to use programs like PopMail and Netscape Mail which log on, download e-mail to the computers they are working on, then log off in a matter of seconds.
If you only have client/server privileges, then you will have to pay $10 every three months for the "interactive" e-mail option before you can create a web page. To check or change your e-mail account type, go to http://www.umn.edu/validate and click on the "Directory Update Form" link and look at the section titled "Account Options."
Once you have an interactive account, you will be able to access via Telnet or FTP (File Transfer Protocol) the directory called "web-docs," which was set up when your account was changed to an interactive one. For information and links relating to getting your web site ready for development, go to the Academic and Distributed Computer Services (ADCS) homepage at http://www.umn.edu/adcs/ and click on the "create web pages" link under the "e-mail/Internet accounts" heading. That link should be able to answer almost any question you might have.
Once you have a place to put your page, you need to find a way to create it. HTML (HyperText Markup Language) is the programming language that programs such as Netscape Navigator and MS Internet Explorer use to combine text, image files, and Java programming into web pages. It is a very simple language based on the idea of "tags," which are simply text markers. Tags are similar to the opening and closing quotation marks that indicate that someone is speaking in a story. For instance, if I wanted to put the phrase "These are the smiling liars" in italics, I would type the following lines in a simple text writing program (in a file with the extension *.html or *.htm):
The <html> tags (Each tag has an opening tag and a closing tag, which has the slash in it.) tell the web browser that the file is a HTML file. The <body> tags tell the browser where the normal content -- text and images, as opposed to page titles and background colors -- begins and ends, and the <i> tags indicate that the text between the tags is to be displayed in italics.
Because of the number of tags that have to be learned to create pages that are more than simply text with a background, few people still hand-program their HTML files. Besides the program that comes with any recent version of Netscape, there are hundreds of other software titles that allow you to simply create a word-processing-style document with images and convert those files to HTML files without ever learning a line of HTML. In fact, most recently-released word processing programs, such as MS Word and Corel WordPerfect, have the ability to convert documents to HTML files.
However, I would recommend that you consider buying or finding as freeware a program that allows you to see what you are doing as pictures and text and allows you to see the raw HTML code. Besides allowing you to see exactly how your pages work, a WYSIWYG ("What You See Is What You Get") editor that also lets you use raw code allows you to add newly developed tags that your HTML editor may not recognize. The program I use has a set of menus on the right that allow you to click on, for example, the <img> tag, which adds images to the page. The program then places the tag on the page and, if I double-click on the tag, displays a window that asks me for all the information about the image and lets me choose the options I want for it. When I click "OK," it puts all that information into the correct spot within the tags, and by clicking on another button I can preview how the page will look to a program like Netscape. However you want to create your pages, it is important that you consider your options and avoid spending money on software you will hate after a month.
The best way to begin designing a web page is simply to put your ideas on paper. Brainstorm for a while, writing down ideas that fit within the theme of your page. If your page has no theme, this is easy, but that may bother some readers. Once you have enough good content to fill the space you want to use, start making a flow chart of the way you want the individual pages to be linked. There are two opposite methods that beginners like to use when they create pages: putting everything on one page and putting every bit of information onto its own page. Both have their good points: if everything is on one page, you don't have to worry about links between pages, and the reader doesn't have to click so often; but if each little bit gets its own page, the reader isn't likely to get confused. Unfortunately, putting everything on one page tends to make the reader lose interest or get lost within the page, and splitting everything up tends to get the reader lost in a maze of pages that are so small they are hardly worth looking at. In general, it's best to limit each individual page to the size of a normal page of text, possibly up to two pages if you have graphics and enough well-placed white space to keep the reader from getting bogged down.
An example of a standard layout would be the one I used for my web page. The first page is an index with links to the rest of the pages, plus a small rant on a particular subject I wanted to write about (I made a web page mainly to keep my writing chops alive). It's a basic magazine style that a large number of pages use: a cover page with table of contents, connected to the "feature articles." Of course, a lot of those pages, including mine, also use frames, an advanced HTML feature, to keep the site menu with the reader at all times.
Text is the backbone of almost every site on the web. The main consideration when using text on a web page is readability, because all the images and sounds in the world won't help if you can't read the text that explains them. To that end, it is important to use a font that can be read clearly with almost any background. Most people find reading black text on a white background easy, so that is the combination most pages use. Black backgrounds with colored text is also popular, but the designer then needs to be very careful to make sure the text can be seen clearly. Fancy fonts and text art are also popular and can be visually appealing, but their use should generally be limited to headlines and other words to which you want to draw special attention. A whole page written in a visually impressive but hard-to-read font might cause a reader to just give up, rub his eyes, and move on.
Besides using readable fonts and colors, there is the issue of editing. Typos are a fact of life, and it is always a good policy to give a piece of writing a read-through to look for spelling and grammatical errors. Remember, you are making this page to be read by others, and it can be hard to communicate when the language you write with isn't quite the English people are used to reading. Using "netspeak" to shorten words and phrases is OK once in a while, but putting all the abbreviations (such as IMHO for "in my humble opinion") through a translation can get tiresome if a page is covered with them.
As a final note on text, due to the nature of some of the HTML tags, it is not always easy to integrate text and pictures on a web page exactly as you wish. One way to avoid these problems is to use HTML tables to arrange paragraphs of text and placement of pictures (one picture or paragraph per cell). Tables can be generated without borders so that the reader does not know they are being used, and allow the author to determine exactly the layout of the page. You may want to check out a book on web design to learn more about tables.
Another important tool for the web designer is an image editing program. These programs are generally used to crop, format, or alter photographs, and can be purchased for less than $50. More complete (and expensive) programs like Adobe Photoshop can be used to create very intricate and appealing graphics, from 3D fonts to background textures. Unfortunately, these programs tend to be stunningly expensive (Photoshop retails to students for roughly $270 at Williamson Bookstore.), and have many features that most people just won't use.
Scanners and digital cameras are also useful tools to help get images, but are very costly. Often it is easier to have photos digitized and put on CD by a photo developer or to use a public scanner at one of the computer labs or at Kinko's. Once you have some images to use, the first thing on your list of considerations will be the background of your page. You can choose to use a background image, which will be "tiled" to cover the entire area of the page, or to make the background a certain color. If you are going to use an image, try to make sure that it does not make reading the text on your page completely impossible to read. In my case, since I wanted to concentrate on writing, I used a basic white background and put images where they were needed, keeping with the magazine style theme I mentioned earlier.
A quick warning about background images: besides tiling up and down, browsers like Netscape Navigator tile them left and right. A pattern or band of color down one side of the page is a very popular way to add color without obscuring the text, but it is important that the image used to create the effect (usually a wide, thin bar that is tiled downwards by the browser) is wide enough that the bar of color does not repeat itself on ANY monitor, even the monster 21" ones. This means that background images that you don't want repeated right and left should be at least 1300 pixels wide. 1600 pixels is even better.
Next on the list is images. This is a very vague term that refers to pictures or text art, generally saved in one of two file formats: Compuserve GIFs (*.GIF), and JPEGs, (*.JPG). There are quite a few other image types including BMP, TIF, PCX, and PPM, but JPEGs and GIFs are used more often in web editing because the image files in those formats are more compressed so that more picture can be fit into a smaller file. Images can also be used as links to other pages, or as imagemaps. An imagemap is a picture that has certain areas defined as links to other pages, and can be created from any picture using most commercial web page design programs. Another frequently used (and often overused) type of image is an animated GIF, which is basically a collection of related pictures that browsers display in reasonably rapid succession, like frames in a movie. They can be nice to look at, but tend to take a long time to download; plus, a whole bunch of these on one page can be annoying.
A word of warning about image files: they're big. A little thumbnail picture of decent quality can be 10 kB, and a standard-sized graphic will be about 25-40 kB. Those are fairly decent sizes to use, because even older modems will download them fairly quickly.
Unfortunately, some people don't realize how long it takes to download images. I've visited pages with 150 kB images on slow servers that take forever to download with a 14.4 modem. If you feel the need to have a large image (anything over 50 kB), try to provide a warning about the size and content of the picture, so those with slower connections can decide whether it's worth waiting for.
Frames, which allow a browser to load more than one page into a browser window, are a popular way to provide a table of contents for the reader during his travels through a site. My page currently features such a table of contents, so that the reader doesn't have to keep returning to the front page to visit other portions of the site. Unfortunately, frames can be a nuisance if misused. Packing the window with five or six frames is unnecessary (especially if they are just displaying graphics) and can confuse the reader.
There are ways, by using Javascript or a background sound, to have a sound effect or MIDI song play automatically when a page is loaded. My advice? Don't do it. Rarely have I encountered a feature of a web site that annoyed me more than MIDI music blasting through my speakers without giving me a way to stop it, short of turning down my speakers. If you want to provide a sound effect, add a link to that sound so the reader can make the choice.
As I said before, linking other sites to your own is standard procedure for web page designers. Unfortunately, checking up on those links does not seem to be as standard. The "Not Found" message is getting to be far too common, and would almost be eliminated if people visited their own pages once in a while to check the links.
Lastly, a legal note: images and sounds are protected by copyright laws. So, do not steal graphics and sounds from other sites. Ask permission and credit the originator. And make sure that you put a copyright at the bottom of each of your pages.
Before other people can visit your site, you have to place your pages on the server of your Internet service provider and make the files accessible. Some web design programs will do this for you automatically, but you should get instructions for this procedure from your ISP before you try it. Remember, you have to put every file -- source pages, images, backgrounds, and sounds -- in the location you indicated when you referred to the file in your HTML file. The easiest way to be certain of this is to create a set of directories (one for graphics, one for HTML files, one for sounds, etc.) on both your home computer and the ISP directory that houses your web page. That way, you always know where to put the files and the locations listed in your HTML code should still be accurate. It's always good to check, though.
Once your page is ready for public consumption, you have to find a way to lead the public to your page. The best way to do this is to link to the various search engines people use to look for interesting pages, including Yahoo, Lycos, Alta Vista, WebCrawler, InfoSeek, Excite and others. Each search engine has a different method to link your site, so you have to spend a little time registering your site with each one. With the thousands of new sites per day being registered, it takes a long time for the search engines to link your site. Plan ahead and register a little early.
After your site is up and running smoothly, visit a few times yourself to determine what tweaks or changes you'd like to make for the next incarnation. Your site generally will not need to change on a daily basis. But rarely updated sites are rarely visited, so it's in your best interest to continually update and improve your site. After all, you wouldn't want the internet to become stagnant and boring, would you?
For further reading, see (January '96 Technolog), a look at First Amendment issues specific to the World Wide Web.
