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 on Wikipedia Look under: HTML Editors.
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.
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 HTML(5) Tutorial.
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.
There is a basic palette of 216 colors used 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:
- Animation Factory
- Creative Commons Search (also video, music and other media)
- School Clip Art (Not just school related)
Also see Google search for clip art for more sites.
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 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: Web Style Guide. This guide covers process, universal usability, information architecture, site structure, page structure, page design, typography, editorial style, forms and applications, graphics, and multimedia.
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.
What to do with Pages After you Write Them
Everyone at Loyola University can publish pages that adhere to the policies above. See How to Create and Publish Individual Web Pages for instructions.
There are Internet services which host pages for free. Find them through this Google search on free web page hosting.
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
Bookstores have many, many books on creating websites.