Managing Files Design Principles Images HTML
| Creating Web Pages: Tips for Getting Started | |||
| Managing Files Design Principles Images HTML |
File Extensions and Folders: When creating web pages, it is very important to to be aware of how and where you are saving files. Although Bill Gates assumes that users don't want to know this information, you should set your computer so that you can see the full path of your files, including the file extensions—the three or four letters that appear after the period at the end of the file name. File extensions are important when working with web pages because browsers can read only certain types of files, specifically those ending in .htm or .html for documents and those ending in .jpg or .gif for images.
To view the file extensions in Windows, open Windows Explorer, either by launching it from the Start menu or by right-clicking on the My Computer icon and selecting Explore. Then click on View and select Folder Options from the drop-down menu. From the Folder Options window, select View:
Uncheck the box next to “Hide file extensions for known file types” and check the box next to “Display the full path in title bar.” Then click OK. Now, no matter how you view your files, you should be able to determine their exact location and file type.
Browsers construct web pages by putting together related files, and this process is much less complicated if all the files the browser needs are located in the same folder. Thus it is a good idea to create a folder on your hard drive specifically for all your web files. To do this in Windows, open Explorer and click on the icon for your hard drive (usually named C) in the left-hand window. Then click on File in the toolbar, select New from the drop-down menu, and click on Folder. A folder icon saying “New Folder” will appear in the right-hand window. Click on this and replace “New Folder” with the name you want to give this folder (e.g., Web Files, Server, or some other descriptive title). Make sure to save all the files for your web pages in this folder. If you are saving files on a floppy disk, label this Web Files and keep all the files for a given web page on the same floppy.
Whenever you work with your web files, always make sure you save document files with .htm or .html extensions and image files with .jpg or .gif extensions. It is best to stay away from word processing programs and work either with ASCII text editing programs (such as Notepad and Wordpad in Windows and SimpleText in Mac) or with programs designed for HTML editing (such as Netscape Composer, HoTMetal Pro, Dreamweaver, Home Page, Allaire Homesite, BBEdit, etc.). For more information, see the HTML and Web Page Editing Guides section of the WWW Primer posted by the Associated Colleges of the South (return to top).
Design Principles: The following are a few of my personal principles for designing attractive informational web pages. You may also be interested in looking at Ancient Rhetoric Online, a series of web pages created at the University of Texas employing traditional rhetorical concepts to explain how to write for the Internet.
 |
Keep your home page relatively simple, with a well-chosen graphic that meaningfully illustrates your basic theme. Use a clean, uncluttered layout, and don't include a lot of text; instead, set up clearly marked links to the pages containing more in-depth content. |
|
Avoid using images as backgrounds, especially if you have much text; it is extremely difficult to read text superimposed on a busy background. Also, if you use a colored background, make sure your text stands out sufficiently so that it can be easily read. I personally prefer a light background and darker text; although a very dark background with light text may look striking, it can be hard on the eyes when reading for any period of time, and often one cannot print out the page. |
|
Be careful when choosing colors; your color scheme may look wonderful on your own screen but dreadful on a different platform or a screen with a different resolution and color setting. For more information, see the various links posted on Colors and Color Palettes, especially Lynda Weinman's Browser-Safe Colors Organized by Value (unfortunately, this palette tends toward dark, stark colors rather than soft, subtle ones). |
|
Avoid text-only or text-heavy pages; solid text or outlines may be fine for handouts but are hard to read on a screen and don't capitalize on the strengths of the web. Judicious use of space, colors, images, icons, and hypertext links can make all the difference in creating attractive and inviting web pages. |
(return to top)
Images: At this time web browsers can only display JPEG or GIF images (saved with the extension .jpg or .gif). As a general rule of thumb, complex images with many colors and shadings such as color photographs should be saved in JPEG format, and line drawings or images with a good deal of text should be saved in GIF format. For more detailed information about these two formats, see Web Graphics Formats.
Images used on the web should be under your own copyright or copyright free. Do not copy and use images from other sites unless the site states that you may do this or you have obtained permission from the siteowner. You may, however, set up a link to an image on another site if this image is on a page of its own rather than embedded in an HTML file. There are a number of web sites that offer free icons, banners, and clipart; some of my personal favorites are Icon Bazaar, Zena's Clipart Collection, and Architectural Ornament. The VRoma Image Archive is a searchable collection of photos relating to ancient art, civilization and culture made available free for educational uses. The HTML School Collection offers a number of small icons with an academic theme, while the HTML Books and Documentation Collection features several pages of icons depicting books, folders, etc. See the following web sites for collections of free web images, especially icons, banners, and buttons:
(return to top)
HyperText Markup Language (HTML): All web pages must be saved with the extension .htm or .html. They are written in ASCII text with the addition of markup tags that tell the browser how to format the document on the screen. Because browsers are designed to display documents on any platform with any size and resolution screen, using whatever fonts are available on the local computer, the markup must be much more flexible than that used by a typical word processing program. Instead of specifying every detail of the formatting, therefore, HTML typically works with blocks of text that are contained in elements that specify their function in the document—heading, paragraph, list, link, etc. Most elements are marked with tags enclosed in angle brackets; typically each element has a start tag (for example, <H1> marks the beginning of the largest heading) and an end tag, indicated by a forward slash (</H1> marks the ending of the heading text). This tells the browser to display all the text between these two tags as a very large heading, on a line of its own, with a blank line both above and below it. Compare the following code with the heading that it produces in the browser:
<CENTER><H1>Creating Web Pages</H1></CENTER>
As you can see from this example, the tags need to be nested in logical order; the start and end tags for CENTER must enclose the start and end tags for HEADING 1 in order to center the entire heading (and if you forget to add an end tag for the CENTER command, the browser will keep centering everything that follows until it encounters </CENTER>). When creating web pages, it is very important to keep in mind that you are working with blocks contained within start and end tags that tell the browser how to display the block contents and that your ability to specify formatting details within the block is often very limited. Paragraphs, for example (contained within <P> and </P>), will always have a blank line above and below the paragraph and cannot have an indented first line. If you want to indent, you must indent the whole paragraph, in which case the tags will say <BLOCKQUOTE> and </BLOCKQUOTE>. Tables, therefore, are very important formatting tools in HTML; each table cell is its own block, and the overall structure of the table enables you to line up the contents of each block in orderly columns and rows. Once you understand this basic principle, you will be able to design web pages that look good on any browser even if you never write a line of HTML code yourself and simply use a WYSIWYG editor such as Netscape Composer (WYSIWYG stands for “What You See Is What You Get” but that is not always the case if you do not understand how HTML works).
A basic HTML document has the following elements:
<HTML>
<HEAD><TITLE>This is the text that appears in the blue
bar at the top of the Netscape Navigator window.</TITLE></HEAD>
<BODY>
Everything that the viewer sees in the web page will appear here, between the
BODY start and end tags.
<ADDRESS>This section, though not
required, usually contains the author of the web page, his/her e-mail address,
and the date of the latest revision.</ADDRESS>
</BODY>
</HTML>
Elements can have various attributes that specify the properties of the block. For example, within the BODY element you can specify the background color or image of the web page, plus the colors of the normal text, the link text, the visited link text, and the active link text. These attributes will be contained within the angle brackets of the element's start tag. Here is the BODY start tag for this web page; the numbers are hexadecimal codes telling the browser what colors to use:
<BODY BGCOLOR=“#FEF8E0” TEXT=“#000000” LINK=“#008080” VLINK=“#004080” ALINK=“#008080”>
This code will enable you to create a simple Home Page with Notepad or SimpleText; if you save the file as index.html and open it in Netscape, the web page will look like this sample. To make the page more attractive, add a little color and formatting (click on View then Source to see how the code has changed). See also this more detailed explanation of some basic HTML tags.
There are many excellent web sites that provide information on all aspects of HTML; here are a few links to good introductory sites:
(return to top)