Assistance for Creating Web Pages
Introduction | Software | Text Formatting | Color and Background Images | Images, Sounds and Copyright | Style | Organization | Navigation | University Policies | What to do with Pages After you Write Them | Where to go for More Information
This document is meant to give you an idea what you can do with web pages and how to get started, not teach you how to do it. Find software you like, start creating pages, add color and graphics, create links among your pages and to other sites, and you're on your way!
A web page is a document, like one that you create with word processing software. Instead of print or emailing it, however, you publish it to a computer at Loyola that can then serve it to people who want to view it in their browser.
Some kind of software is needed in order to create web pages. Any word processor can be used as long as it can save files in plain text, sometimes called ASCII or DOS text. On Windows computers, the Notepad or Word Pad can be used. You will have to know about the underlying page instruction set, called HTML, for Hypertext Markup Language. This approach requires that HTML tags be entered entirely by hand. Although this means more learning at the outset, and more work along the way, it also provides a high degree of control over the final product. The underlying web page files are more readable. This makes editing them later easier.
There are also specialized software packages for creating and editing web pages. They fall into two main types:
- HTML editors
- What-you-see-is-what-you-get (WYSIWYG) or page creation software
HTML editors are specialized word processors with buttons for inserting HTML tags and other features to ease the work. WYSIWYG or page creation software shows you the appearance of the page you're creating or editing. HTML editors require more knowledge but allow more control. WYSIWYG software is easier to start with, but doesn't allow fine placement of page elements. The underlying files are written by the software; sometimes this causes problems with poor HTML that is difficult to use in any other software. There are also some hybrid products with page format and HTML editing, such as Macromedia Dreamweaver and Microsoft FrontPage.
You can find out more about which programs are available at Yahoo! Look under: Computers and Internet > Software > Reviews > Titles > Internet > Web Authoring Tools. It lists products, buyer's guides, and has a separate list of HTML editors. This list is not entirely accurate, as it includes Microsoft FrontPage, which is both WYWIWYG and editor. PC Magazine has published articles on Web Authoring Tools (v.17 #2, January 20, 1998, p152), and How to Create a Great Site (v.18, #11, June 8, 1999, p. 98ff [four articles on WYSIWYG authoring tools, finishing touches for small businesses, development tools, and server operating systems]).
Editors are specialized word processors with features to make web page writing and editing easier. The editor opens a web page as a file with text and HTML tags. Most use a button approach, where you click on a graphic icon in order to add formatting (bold, italic, underline, numbered lists, etc.), place an image, create a link and perform other functions. Editors take more understanding of HTML tags, their use and behavior, but provide better final results.
Some products are Web Media Publisher, HTML Assistant, HotDog Pro, HoTMetaL Pro, and World Wide Web Weaver. Yahoo! lists many under Computers and Internet > Software > Internet > World Wide Web > HTML Editors.
WYSIWYG or page creation software
WYSIWYG software starts with a blank page. You type in text, place images, make links and so on, seeing the page as many viewers will see it. (It is impossible to control the final appearance of a page to all viewers because individuals can set up their browser to display fonts and colors of their choosing, and because monitor sizes and resolutions vary.)
Some WYSIWYG products are CyberStudio II (Mac), Adobe PageMill, Dreamweaver, Home Page, NetObjects Fusion, and Visual Page. Microsoft's product is FrontPage. Besides being a WYSIWYG product, it can directly edit HTML. It also includes web server software, so your desktop computer can become a web server. Microsoft's Office suite can save documents in HTML form.
Arranging text is quite simple but limited with HTML. Text is grouped into paragraphs. Each paragraph has a blank line ahead of and behind it. Text is wrapped by the browser from one side of the screen to the other. There are no built-in margins. A line break can be inserted. Many authors are using tables to place text. With tables you can create margins and columns. HTML provides six levels of headings to organize text. Heading level one is the largest, going down to level six, which is smaller than normal text. Another text formatting tool is the horizontal rule, which is a horizontal line. HTML can create numbered and bulleted lists.
The best place to learn the details is the NCSA (at UIUC) A Beginner's Guide to HTML.
Text can also be part of graphics placed on pages. This allows many fancy effects like curved and vertical text. The graphics must be prepared separately by a different program. Graphical text behaves differently in pages than plain text. It cannot be copied and displays exactly as created.
Color and Background Images
Color can be used to make pages easier to read, to group information and to entertain. Many colors can be specified in Web pages. The entire background of a page, the color of text, of unvisited links, of active links (as they are being clicked on), and of visited links can all be specified. Some color combinations of background and text are virtually unreadable so use color with caution.
Netscape Navigator has a basic palette of 216 colors which it uses to display images on web pages. It can display more colors, but it mixes two of the basic 216 to produce a third color. This process, called dithering, takes longer, so pages with colors beyond the basic 216 load more slowly. This is a problem in pages using a lot of background colors. Where possible, stick to these: Color Table for HTML 3.0.
A graphic image can be made a background for a page. The image will be "tiled," or placed edge to edge to cover the page. Generally this is difficult to do successfully, as most images are dark or strong enough to overwhelm text and make it unreadable.
Images, Sounds and Copyright
Web pages can contain all kinds of graphic images: line drawings, photographs, paintings, and so on. If you create an image, you are free to place it on the page. If you do not create the image, you must have permission from the creator or you will be in violation of federal copyright law. Here are some places to go for information on copyright:
There are some sites on the Internet which give out free images for your use. Here are a few:
Also see Yahoo! Computers and Internet > Graphics > Clip Art for more sites. Some software comes with clip art. Clip art can also be bought on disk and CD-ROM at computer stores.
If you see an image that you like, to download the image to your system, right-click directly on the image and choose Save Picture As from the menu. Remember that you need permission of the creator unless the page or site grants you license to reuse the image.
The more images you put on a page, the longer it will take to load. This is especially significant for those using phone lines to get to the Internet. Only certain types of images can be used. The computer formats which are most widely readable by browsers are GIF (graphics interchange file), JPEG (Joint Photographic Experts Group) and PNG (portable network graphics). Other types, such as BMP (bitmapped) and TIFF (tagged inline file format) will have to be converted unless the browser has a plug-in to handle the image type. GIF is best for black and white art and JPEG for photographs.
Sound can be incorporated into web pages as samples to be played or as background sounds. MIDI files are often used as background music. They can be played directly by most browsers. Sound clips can also be stored so that when a user clicks on a link, it brings up a sound file. These can be in WAV, AU, and other formats. See Yahoo! Computers and Internet > Multimedia > Sound > Archives for places to find sounds.
This area is difficult to define and describe. It refers to the text used, but, since the web is a new communications medium, to layout, use of color, organization, and navigation. HTML started as a way to specify the logical content of a document. It has become a way to control the appearance of the document. There is no universal agreement on what constitutes good style. The graphic designers want lots of graphics and fancy layout. HTML has been pushed and pulled beyond its original limits to provide amazing results. For an example of the viewpoint that HTML can and should be twisted and pulled, see Creating Killer Web Sites (TK5105.888 .S53 1996).
Start here: Yale Web Style Guide. This is the best! It covers graphic and information design, page layout, site organization, navigation, and multimedia content.
For a list of web sites on web style, go to:Yahoo! Arts > Design Arts > Graphic Design > Web Page Design and Layout Here are some other suggestions:
- Graphic Design and other resources
- Resources and Assistants for Webmasters (advanced)
- Web Design Resource
- Web Design Tips
- Web Developer's Virtual Library
There are many ways to organize your content: alphabetically, chronologically, hierarchically, geographically, metaphorically and whatever else you can think of. Start by breaking up your information info manageable size chunks for each web page to create. Pages should be short and cover one main topic. Long pages require scrolling which is a barrier to users finding material towards the bottom of a page.
Users need to be able to find their way around your pages without getting lost. They will flee sites with little or no obvious way to move around. Navigational links are hyperlinks to other pages; they can be text, graphics, or both. Every page needs a link to the main or home page. Next and previous page links may be appropriate.
Navigation will reflect the organizational scheme. Up and down links are needed in a hierarchy. Well-done navigation is nearly invisible to the user. Navigational links should be easy to find at all times. Some are placed at the bottom of the page.
A table of contents is useful.
- Web Pages Created by Individuals
- Graphic and Editorial Standards
- What Types of Information Should not be Placed on Web Pages?
What to do with Pages After you Write Them
Everyone at the university has 10 megabytes of space for web pages. See How to Create and Publish Individual Web Pages for instructions.
There are several services on the Internet which host pages for free. The best known are GeoCities and Tripod, but there are many others. PC Magazine recently (Sept 1, 1998 v17 n15 p73) recommended Homestead because of its Java-based editor. However, it does not allow direct editing of HTML. GeoCities and Tripod do. More such sites are listed at Yahoo! Business and Economy > Companies > Internet Services > Web Services > Free Web Pages.
Where to go for More Information
Search the library's online catalog online catalog. Here are some subject headings to search:
- Electronic publishing--Programmed instruction
- HTML (Document markup language)
- Web sites--Design
Here are the items currently in our collection:
- QA76.76 .H94 L46 1995
Lemay, Laura. Teach yourself Web publishing with HTML in a week. Indianapolis, Ind. : Sams Publishing, c1995.
Though older, this book is still an excellent starting point.
- TK5105.888 .S53 1996
Siegel, David. Creating killer Web sites : the art of third-generation site design. Indianapolis, Ind. : Hayden Books, c1996.
The graphic designer's attempt to use every trick possible to control the appearance of web pages. Tough it has many useful techniques, take it with a grain of salt.
Enderton, Rich. Create your own Web pages [videorecording]: a guide to the basics. Wilton, CT : Educational Reform Group, c1995.
Search SearchBank under: HTML (Document markup language)--computer programs for reviews of software.
Take the library's class Creating Web Pages.
There are many tutorials and references available on the web. The best place to start is with the National Center for Supercomputing Application (NCSA) at UIUC's A Beginner's Guide to HTML. Others:
- Introduction to HTML from Case Western Reserve University. Start at the beginning and read to the end or jump around.
- Webmonkey - HTML Tutorial Good for reading up on a specific topic. Not a text with a beginning and end.
Bookstores have many, many books on creating web pages.
Other useful information sources:
- Bare Bones Guide to HTML a listing of tags.
- The English Department at the University of Virginia's Tools for Building Web Sites
- useit.com: Jakob Nielsen's Website especially The Alertbox: Current Issues in Web Usability Nielsen is former Head of Human Factors Research at Sun Microsystems
- Usableweb.com with over 700 links for web site and page usability