Create Accessible Web Sites
Students With Disabilities and the Web
Study Plans Home

Creating Web Pages

A school's Web site creates a first impression. It represents the school district and presents a huge opportunity to provide information and interact with the public.

Navigability - If you want people to hang out at your websites, one of the most important features you could add is easy navigation. There is no faster way on Earth to drive away viewers than to frustrate them by hiding what they are looking for.
There are several keys to designing a site that is easily navigable. Probably the most important is not considering yourself as the norm. Simply put, most designers have a tendency to design the navigation
of their sites according to what is intuitive to them. However, what is intuitive to you, the designer, may not end up being intuitive to the majority of your site's visitors. Designing for yourself and not your audience is probably the single most common mistake.
A good practice, if feasible, is to put your navigation design down on paper or in the form of a mock-up website. This will allow you to share your design with colleagues or better yet people in your target audience. For example, let's say you were designing a resource site for a national realtor's association. The people you need to get feedback from concerning your navigation plans would be a local realtor's association or maybe even the realtor's office that sold you your house.
Another important key to making a site that is easy to navigate is not building too many levels to your site. Now that's not to say you should organize your site on a single level, but keeping the number of levels a visitor has to transcend is definitely a plus. Obviously, the more content you add to a site, the more there becomes a need to add additional levels. While adding multiple tiers to your site may be inevitable, try to keep them to a minimum.
You should also always try to make your sites searchable by adding a search engine. Many web design packages like FrontPage and DreamWeaver have their own built in search engines which can make the process very easy. If you are designing a database driven site with something like ASP or PHP you will be in for a bit more work to add a search engine. You will have to either write your own engine or possibly find some shareware or free code. However you accomplish it, a search option will become an invaluable tool on your websites.
Along the same line as a search engine would be a site map. Site maps are also very useful tools for visitors who are trying to find their way to a specific location on the site. Like the site itself, the organization of your site map is also very important. Generally, a site map will include almost all of the pages (if not all) on your site and be organized in a fashion similar to the site itself.
Finally, in addition to analyzing how your site will be organized you also need to consider how you will display that organization. You actually have several different choices available to you. One of the most popular choices today is the pop-out menu. Pop-out menus such as are found on many major retail sites like Eddie Bauer and Best Buy are a very effective way to hide and organize multiple levels of your web site. Other more simple solutions could include the logical use of the hover buttons or hyperlinks in a table.
In addition to the how is the where. For the user's convenience you might want to also consider having links to the major sections of your sites on both the top and the bottom of each page.
As a web designer, it is your responsibility to make the user's experience as easy and enjoyable as possible. While most users will never really understand all of the thought and effort that you put into improving their experience, it will keep them coming back for more.

Consistency - Don't confuse your viewers by radically changing your design from page to page. Consistency of design lets the user get familiar with the features of your site and "burns" the look of your site into their minds. There is a lot to be said for "branding".
Consistency in web designs is often an overlooked element. The more creative you are the easier it is to overlook its importance. What I mean by consistency is a design that flows from page to page with little change in the overall design. This doesn't mean that you have to have the exact same design on each page with only the content changing but rather that your designs should maintain a consistency in all of the key elements.
For example, let's assume you are one of those overly creative types that should have been a painter but who's hand just won't cooperate with your imagination (which is why you opted for the computer as your canvas). You are designing a site for your local florist. You started by creating a home page with a wonderful floral border, their logo on the top and the navigation on the left. One of the links on the home page goes to a page about roses. Since you were in a clever mood you designed this page with a giant watermark rose in the middle and you moved the navigation to the top of the page with the
logo and decided to split this page into two frames, top and bottom.
While both pages that you designed are each quite wonderful in their own right there are some definite problems. After implementing the site you notice that most of your visitors tend to bail out after going only a page or two. The most likely reason is that your design confuses the heck out of them. The only consistency that you have provided for your visitors is keeping the logo in the same place. If it weren't for the logo they wouldn't even be sure that they were still on the same site.
My first rule of consistent design is to keep all of your key elements in the same place on every page. Here are some of my most important key elements:
Navigation - This is the most important key element in your design. If you move and/or change your navigation from page to page your visitors will become quite weary of chasing the navigation around the page as they move through your site and most likely give up.
Logos - Whether you are designing a site for personal or business use be sure to have a unique and easily recognizable logo displayed prominently on the site. In business, the logo is one of the important tools for building recognition. In web design it works much the same way by burning the image of the logo into the visitor's mind through repetition while at the \same time giving the visitor a sense of comfort in knowing they haven't been whisked off to some other place.
Colors - A consistent color scheme is a must. A good example of using a color change would be in a site like the florist example above where you might have two basic color elements and change a third element each time the visitor moved from one major section of the site to another, that is from roses to planters to balloons.
Frames - Never mix framed and non-framed pages. This will confuse your visitors faster than anything. If you decide to include frames in your designs keep the frame structure the same throughout. Don't rearrange your frame structure or pop back and forth between framed and non-framed pages.
The best way to learn about good website design is to visit some of the sites that make you feel the most at home and analyze them very carefully to see what it is that makes you comfortable. Odds are the things that make you comfortable with those sites were carefully considered when designing the sites and probably include some of the elements listed above.

Speed - Since broadband is becoming more prevalent you might think that download size is not really a concern anymore. Not true ... yet. With about 80% of all users still using a 56K or slower connection, download speed is still a very real concern. Keep your graphics optimized and don't go overboard with your imagery. File size is still important.
Speed is all about how patient your visitors are. Unfortunately, the trend is towards less patience rather than more patience.
Graphics and Images - Quite often your graphics and images will constitute a larger percentage of your total download than the actual code of the page. Because of this it is critical that you keep in mind that while using more graphics may make your page more beautiful, it is often at the expense of download time.
Graphics/Image Software - Choose your graphics and image software carefully. The better your software the more control you will have over the graphics and images that you create. You will usually find that a change in quality from high to medium is almost indiscernible at 72 dpi (video level quality) but will reduce your overall file size from 30% to 50%.
Know your File Types - Be sure to save your graphics and images in the file type that is most suited for the occasion. If your graphics are straight text or some simple solid color graphics then the .gif format is probably going to be your best bet. If you have a photograph or other complex image then .jpg will probably be your best choice. Other file types such as .png or .bmp, for better or worse, are not commonly accepted in the web development world, so you are best to stick with .gif and/or .jpg. If keeping track of different file types sounds like too much of a pain to you though, then saving
everything as a .jpg will probably be the best option.
Combine Graphics with HTML Elements - Try combining elements that can be simply created in HTML with custom graphics. For example, let's say you want a blue box at the top of your web page. Simple enough, just change the background color of a cell in a table at the top of the page. But what if you wanted rounded corners on that box? Instead of creating one big fixed-sized graphic
for the top of the page, you would just create a couple of rounded "end caps" to place in your table on either side of your blue cell. Now the only graphics that have to be downloaded are two very small .gifs instead of one much larger graphic. It also gives you a much more flexible solution that is more adaptable to different browser resolutions.
Optimize your Code -
HTML - Try to limit your code to only what is necessary. If you are using development software such as FrontPage or DreamWeaver you may want to take a look at the code that gets spit out. Often times packages like these will use a great deal of unnecessary or inefficient code that needs a bit of cleaning up. Also, try using Cascading Style Sheets whenever possible. Style Sheets will keep you from having to declare the same font types, sizes, etc. over and over again unnecessarily.
JavaScript - Keep in mind that it can often take several lines of JavaScript to do even a very simple task which can cause your page to grow out of control before you know it.
Beware of Animations - While animations are very necessary in today's web they can easily become huge resource hogs. If you are going to use animations on your pages then keep the frame rates to a minimum. If you want to use more complex animated effects then carefully consider what format will be best suited for your needs like Shockwave or an animated GIF. Also, keep in mind that too many different animations running simultaneously on a page can make the page itself and the animations of the page run sluggish.

Lots of people, organizations, and companies publish to the Web. At first, only a few individuals had that knowledge necessary to publish Web pages. Now almost anyone can publish on the Web because the technology is not too formidable. Basically, anyone with a computer, an Internet connection, and something to say can have a Web site. On the World Wide Web, there are corporate image sites, small businesses, government agencies, universities, schools, political organizations, charities, clubs, special interest groups, and thousands of individuals. Some individual’s sites are devoted to hobbies, special interests, family albums, and personal newsletters.

Creating Web pages is the easy part. What you really need in order to publish on the Web is access to a Web server. Many service providers offer Web site hosting as part of the package of services they include with basic Internet access accounts. An alternative to publishing on the Web is to publish on an intranet. It uses the same technology as the World Wide Web, it is just available to a different audience. Intranets are available only to those connected to the same local area network. The same tools, Composer and Navigator, are used to create and view HTML documents on an intranet that you use to create an view Web pages on the Internet.

Elated: http://www.elated.com/
"Helping people make websites since 1997"

Planning a Web Site

First, set a goal. A Web site should have a purpose, a mission, and a reason for existence. This goal should be the guiding principal as a site is designed. Everything about the site should support the goal. It is often helpful to write out a sentence or two articulating the purpose of the Web site. The purpose of having a written goal for the Web site is to help keep the work focused. As the Web site is developed, looking at the goal from time to time is a good idea. If some aspect of the site doesn’t match up to the stated goal, then something needs to change—either the content or the goal. After the goal is decided, selecting and developing content can begin. Text can be written, graphics can be found or drawn, and other sites to link to can be located.

Second, define the audience. Who will be viewing the Web site needs to be determined. The viewers’ background and previous experience, their interests, their tastes, and why thy might be visiting the site all need to be considered. Part of the goal is to reach the target audience as effectively as possible. All Web site design decisions should be based on the needs and wants of the viewers who have been determined to be the target audience. The keys to successfully communicating with the audience is to first identify the audience, and then to anticipate that audience’s reaction to the various elements of the Web site design. The Web site can then be tailored to the intended audience, from the way the information is organized to the kind and number of images to the colors and fonts used.

Next, organize the information. The best way to start developing content for the Web site is to organize the things you have and know about—existing documents and images, samples of publications in other media, information on Web sites you admire, samples of Web sites you hate (and why you hate them), clip art collections and information on sources of Web art, media, and special effects.

Make sure you have the legal right to use any material you plan to include in your Web site. For more information on copyright law, visit the law page published by Cornell University at: http://topics.law.cornell.edu/wex/Copyrightl.

The Fair Use Guidelines for Educational Multimedia will have you SAYING "YES" INSTEAD OF "NO" http://www.infotoday.com/MMSchools/may00/bakker.htm despite your copyright concerns. Thanks to these guidelines, copyright compliance has become a much easier goal to achieve.

For more about copyright, visit my page on this site: Copyright Laws

Then, create a storyboard. With the materials and information you want to work with, sit down and plot the site out. A storyboard is a sketch of the home page and each page it will link to. Include all the elements being considered—text, images, buttons, and hyperlinks. As you plan the Web site, you need to work on two different levels. First, you need to plan the flow of the information and the appearance of the page.

Second, you need to design a map of the site as whole so you can visualize how all the pages relate to each other and how they work together to create a whole site. Remember that users don’t expect to read an entire Web site. They want to jump quickly to an item that interest them and then move on to something else.

Make site navigation easy for viewers. Users need to be able to move around a Web site quickly and easily to locate and access information. The most important factor in making your Web site easy to navigate is organization. Designing a well-organized site allows you to present information in such a way that it is easy for viewers to see and understand where things are located and how to find what they need. That’s one of the reasons why storyboarding is so important. Besides good organization, for ease of use, incorporate navigation aids that provide easy one-click access to key locations and sections of your Web site. You can use text links, buttons, graphic icons, or image maps (clickable images) to identify and link to important destinations, such as the home page, next page, or starting points for key topics. It is essential to make the navigational elements obvious, simple to use, consistent throughout the site, and to place them where they are readily available to help viewers find their way around the site. Users need to be able to move around a Web site quickly and easily to locate and access information. The most important factor in making your Web site easy to navigate is organization. Designing a well-organized site allows you to present information in such a way that it is easy for viewers to see and understand where things are located and how to find what they need. That’s one of the reasons why storyboarding is so important. Besides good organization, for ease of use, incorporate navigation aids that provide easy one-click access to key locations and sections of your Web site. You can use text links, buttons, graphic icons, or image maps (clickable images) to identify and link to important destinations, such as the home page, next page, or starting points for key topics. It is essential to make the navigational elements obvious, simple to use, consistent throughout the site, and to place them where they are readily available to help viewers find their way around the site.
The site should also be accessible to people with disabilities. For specific information on how to acheive this, visit my page on this site: Create Accessible Web Sites

A Browser-Friendly Site

Different brands and versions of Web browsers have different capabilities. Older versions of browsers may not be able to view all of the latest changes in Web design.

Another factor to consider when designing a site is the size of the files that make up your Web pages. HTML files are generally quite small, even when they contain large quantities of text. Images and multimedia files can be very large. The biggest problem with large files is the time it takes for the page to appear in the visitor’s Web browser window. Some studies suggest that a Web surfer will wait only about 12 seconds for a page to download. This may be a little short but a page should certainly download in less than 30 seconds so viewers will stay at your site.

Maintain Your Web Site

A good Web site needs to be updated on a regular basis. As a result, you can’t consider your job finished when you complete the process of planning, producing, and posting a Web site. You must devote time to the continued care of your Web site. From time to time, you need to add new information and cut out outdated material, particularly broken hyperlinks. A Web site is an ongoing commitment that can be a very rewarding experience.

Using composer to create or edit Web pages and other HTML documents is like using a word processor. You work in a WYSIWYG (What You See Is What You Get) environment that provides a reasonable approximation of what your page will look like when viewed in a browser. In Composer, you type your text on a screen that looks and acts like most word processing programs. You can select text and format it using menu commands and familiar toolbar buttons.

As you create a page in Composer, you are actually building a text file that contains, in addition to any text on your page, HTML markup codes for text formatting, layout, graphics, and hypertext links. You don’t need to know the code however. Not HTML codes appear in Composer’s normal view of your page, and you enter your formatting choices by choosing menu commands, clicking toolbar buttons, and setting options in dialog boxes, instead of by typing markup codes.

Giving the Page a Title

One detail of Web page design you’ll want to think about is what title to choose for your Web page. This will be the name of the Web page and will appear in the browser’s title bar when you view the page. The title also shows up as the name of your page when a reader creates a bookmark or shortcut to the page.

Choosing Background Colors

The box design with bold black outlines is a great vehicle for keeping information clear, readable, and consistent.  The structure provided by the bold lines creates a strong site, and the black lines play well against the bold colors. 

A minor but important part of designing for the Web is ensuring that as you link pages, you display images at consistent heights. When a user clicks through a site, the layout should remain in exactly the same position, as pages in a book remain within the same template. As the bandwidth on the Web increases, the pages of a Web sites will turn as easily as the pages in a book. Keeping the edges aligned within a template structure will create a clean and professional design.

Use of Color in Background Design

The default colors for a Web page are black text on a white or light gray background. Color on your Web page can make the page more interesting, but color must be used very carefully. The right combination of colors can make the page appealing and easy-to-read. The wrong combination of colors can produce a page that is unattractive and illegible. Colors also have a strong emotional and psychological effect that must be considered. In general warm tones—red, orange, yellow—seem to advance toward the viewer. They tend to convey excitement and energy. Cool colors—blues and greens—seem to recede away from the viewer. They tend to evoke feelings of tranquillity. The number and kind of colors you choose for you Web pages can influence a visitor’s perception of you site even before they read a single word. You can set a quiet, conservative tone by sticking with basic black and white and adding a few accents of navy blue or hunter green. You can create a feeling of festive excitement with the liberal use of bright, high intensity colors, especially reds and yellows.

One of the best ways to learn how to use color is to observe how other designers have used color. Studying magazines, brochures, annual reports, TV, and other Web pages to look at the colors used and how they affect your perception of the publication.

Your choice of color also determines the legibility of the text on your Web page. It is critical that your page be easy to read.

Text Colors

Along with the background color, you can also specify default colors for text. This is a way to develop a color scheme for your page. You can specify colors for regular text, hyperlink text, active hyperlinks (ones that have already been clicked), and visited hyperlinks (hyperlinks that have already been activated).

After you develop an acceptable color scheme, you can make it the default for all new pages you create with Composer by checking the Save These Settings For New Pages checkbox. Click OK to close the

For more about color, visit my page on this site: Create Accessible Web Sites

Headings

After you enter some text, you many want to designate some of that text as headings. Headings are usually (but not always) larger and bolder than the body text of your page.

Text Attributes

Formatting details such as bold, italic, and underline, which change the appearance of text and differentiate certain text from the rest, are known as attributes in a word processor. The types of attributes you can specify using HTML are broken down into two classes: Physical attributes and Logical attributes.

The physical attributes specify how text characters will look: italic or bold, for instance. They will be italic or bold no matter which Web browser is used for viewing. The logical attributes specify the amount of emphasis you want to give important text and leave it up to the Web browser software to determine what physical attributes to use to make the text stand out from the normal body text. You can choose to make text big, small, emphasized, or strongly emphasized. Different Web browsers will have different ways of displaying logical attributes. Some may show strongly emphasized text as bold, others may show it as red or in a slightly larger size, for instance.

Unfortunately, when a visitor to your Web site views your page, their Web browser displays the page using the fonts installed on the viewer’s system. That means the visitor will see the text of your page in the font you specified only if they have the same font installed on their system. If you use a font on your Web page that the visitor doesn’t have, the text you formatted will appear in a default font. If you want to be confident that the font you choose for some text and the font the viewer sees will be the same, you must choose one of the standard fonts that are found in some form on nearly every computer: Times Roman, Courier, Ariel or Helvetica.

A group of companies headed by Microsoft have proposed establishing a list of core fonts and encourage all Web users to install these fonts on their systems for displaying Web pages. Microsoft makes a selection of TrueType fonts available on its Web site for free downloading at: http://www.microsoft.com/truetype/  

You can set the font size for your Web page. HTML documents traditionally have supported seven different font sizes. A user defines a default text size for their Web browser, then the browser displays text in the default size and in six other sizes, two smaller and four larger, based on variations of the default size. These are called relative font sizes.

  • Relative sizes such as –2, –1, 0, +1.+2 +3, +4. These are seven standard font sizes recognized by all Web browsers. Size0 is the default text size.
  • Relative sizes shown as point sizes. Just remember that you’re really selecting relative sizes and that visitors viewing your Web page may see the fonts displayed in different sizes, relative to the default size setting in their browser.
  • A combination list of font sizes listing both relative sizes and absolute font sizes. This option gives you the most versatility.

The initial cap effect is one good example of a way to use font size adjustments in your Web page. You can select the first letter of a word, then select a larger size from the Font Size drop-down list in the format toolbar. You might even repeat the process on each word of a title. The title below has a larger font size and bold on the first letter of each word:

INITIAL CAPS

Changing the font color is another way to change the appearance of the text on your page. Like the text attributes and font size settings, you can apply a color to a single character, a word, a line of text, or an entire paragraph.

Alignment of Text

When you enter paragraphs of text, they will show up as left-justified like most often seen in print. However, you can change the alignment of a paragraph to make it either centered or right-justified instead of left-justified.

Paragraph Styles

Bulleted lists, sometimes called unnumbered or unordered lists, are the most often used type of list. In a bulleted list, each paragraph is indented and preceded by a bullet or another symbol:

  • Memorial Day
  • Independence Day
  • Labor Day

Creating a numbered list, sometimes called an ordered list, is basically the same as a bulleted list, but with numbers in place of the bullets. Actually, the number can be a numeral, a letter, or a Roman numeral.

The standard numbering style for numbered lists is numbers such as 1, 2, and 3. If you prefer, you can specify another numbering style such as letters or Roman numerals. You can also define a starting point for the numbering scheme. This is useful when a numbered list is interrupted by other text. You can create one list, add some normal text, and then create another list that picks up where the first list left off so that the numbering continues instead of staring over.

A description list in a Web document is a special element designed to make it easy to format related items like terms and definitions. In fact, description lists are sometimes called glossary lists because glossaries are the most common application of description lists.

A description list consists of two components: a description title paragraph style (commonly used for a glossary term) and a description text paragraph style (commonly used for glossary definitions). Basically, the description list paragraph styles are just slight variations on the normal text style. The difference between the two paragraph styles is that the Description Title style is not indented and the first line of the Description Text style is indented one step. You can use the description list styles to create a glossary or other, similar list, or you can simply use the styles to create paragraphs of text with and without indents.

Working with (Un)Formatted Paragraphs

Typically, the text on a Web page appears in a proportional or variable-width font such as Times New Roman. Also, Web browsers follow certain rules such as ignoring multiple spaces and automatically wrapping long lines of text to fit in the browser window. The combination of these features enables Web browsers to display text in a way that is attractive and easy to read, despite significant differences in the size of the browser window and the characteristics of different users’ computer systems.

Generally, this is a good thing. However, the developers of the HTML standard envisioned some circumstances in which users might miss the formatting capabilities of a plain text document using a fixed-width font. For example, you might want to simulate the appearance of a text-mode computer screen or create a crude table by using multiple spaces to separate lines of text into columns. The Formatted (sometimes called Preformatted) paragraph style addresses this need.

Adding Images

You must always investigate the copyright status of any ClipArt you use for a commercial purpose and only use it LEGALLY. Making a sales presentation is definitely commercial use.

The images on your Web page can be anything. You can use charts, graphs, and diagrams to illustrate a point. You can use logos and graphic symbols to establish a visual identity for your page. You can use scanned photos and drawings to set a mood or show details. Background images can provide a backdrop as subtle as fine silk or rich as polished marble.

Most images that are part of a Web page are called inline images. These images typically appear over, under, or beside the text on a Web page. Each image is stored in a separate file. Normally, the images used on Web pages will be in one of two file formats – GIF or JPEG – designed to store graphic information in an efficient, compressed form.

You can’t position an image at just any random location on the page – it must be positioned in reference to some surrounding text. The image tag can be imbedded in the middle of a paragraph of text, placed at the beginning or end of a paragraph, or, ore often, placed in a paragraph of its own. The image tag anchors the image in the text. As the text flows from the top of the page to the bottom, the image will appear in its place within the text – moving with the text as it wraps to fit the browser window.

Dealing with Image File Formats

There are many different file formats in use for recording graphics data. It seems like every major graphics program has its own file format. Then there's an assortment of different standard formats used by scanner software, clip art collections, and the like. Dealing with the alphabet soup of file name extensions and abbreviations for file format names is a constant source of confusion and frustration for graphics professionals who must work with multiple file formats.

Fortunately, the World Wide Web community  has settled on a short list of file formats that are the supported de fact standards for images.

Creating Textures with Background Images

The HTML standard makes special provisions for using an image to create a background for your Web page. The background image appears in the background with the text and inline images appearing in the foreground.

You can use any GIF or JPEG graphic file as your background image. For example, many companies like to use dimmed versions of their logos as background graphics – kind of like a watermark in expensive stationery. Another popular technique is to use a background image to simulate a texture such as paper, wood, stone, feather, or fabric.

You might expect that an image large enough to fill the entire background of a Web page would require a very large image file (and you would be right). When creating your background, consider your audience’s attention span because an image large enough to fill even a moderately sized browser window would probably require more time to download than most viewers are willing to invest to view your page. Another problem to be aware of is how big to make the background image because there’s no way to predict the exact size of the viewer’s browser window.

What makes background images practical is that the browser tiles the image you specify as a background to fill up the entire window. That is, it will repeat the image in its original size until it covers the page’s viewing area. As a result, you can specify a small, compact image file that will download quickly, even over a dial-up connection. The background image gets downloaded only once. The browser automatically displays as many multiple copies of the background image as needed to fill the background of the page without using the download time or memory resources required by a larger image.

Since the background image is tiled, only a small sample (less than an inch square) is required to create a texture such as paper, cloth, or stone. Textures such as wood grains and veined marble need slightly larger images to create attractive backgrounds. An image of a logo is likely to be even larger, but it’s still much smaller than a single page-sized image.

Images can be an incredibly powerful and versatile Web page design tool. You can achieve a tremendous range of effects with images – largely because an image in a Web page can be virtually anything. An image can contain a photograph, drawing, diagram, chart, graph, illustration, logo, symbol, or even text in a special typeface color or arrangement that would be difficult to reproduce with HTML commands.

In addition to all the things you can do with regular images, there are a few special effects that can add even more pizzazz to your Web page. Some effects are subtle and others can be quite dramatic. What all the special effects have in common is that they are built into the image file when it is created. The Web browser may need the capability to recognize and display the special effect properly.

Getting Linked Up

It’s the Hypertext links that are the defining characteristic of the World Wide Web. Hypertext links enable you to build relationships between Web pages. You can create links from a location in one Web page to different parts of the same Web page, to other files on your Web site, or to other files on the Internet or an intranet. When a visitor to your Web site views a Web page and clicks a hyperlink, they are transported to another Web address for supplemental information, a continuation of the same topic, or anything else you choose to link to.

A minor but important part of designing for the Web is ensuring that as you link pages, you display images at consistent heights. When a user clicks through a site, the layout should remain in exactly the same position, as pages in a book remain within the same template. As the bandwidth on the Web increases, the pages of a Web sites will turn as easily as the pages in a book. Keeping the edges aligned within a template structure will create a clean and professional design.

Creating Links

The appearance of a hyperlink when it shows up in a Web browser window will differ depending on the browser being used, but usually it will appear as underlined text in a special color. However, there’s much more to a hyperlink than an underline and a distinctive color. When you click the hyperlink, the browser loads the Web page with which the hyperlink is associated (the other end of the link, if you will) and displays it onscreen.

Creating Hyperlinks to Other Files

The most common hyperlink is probably one that links a word or phrase of text to another Web page – either a Web page stored in another file on your Web site or a file located elsewhere on the Internet.

Creating Hyperlinks within a Web Page

In addition to hyperlinks to other Web pages, you can create hyperlinks to locations within the same Web page. You can use this kind of hyperlink to cross-reference two bits of text, or you can create a table of contents for a long Web page document by adding at the top of the page a list of headings that are each linked to the corresponding portion of the document.

The Truth About Web Design Or "How to Build a Web Page in 25 Steps"
1. Download a piece of Web authoring software - 20 minutes.
2. Think about what you want to write on your Web page - 6 weeks.
3. Download the same piece of Web authoring software, because they have released 3 new versions since the first time you downloaded it - 20 minutes.
4. Decide to just steal some images and awards to put on your site - 1 minute.
5. Visit sites to find images and awards, find 5 of them that you like - 4 days.
6. Run setup of your Web authoring software. After it fails, download it again - 25 minutes.
7. Run setup again, boot the software, click all toolbar buttons to see what they do - 15 minutes.
8. View the source of others' pages, steal some, change a few words here and there - 4 hours.
9. Preview your Web page using the Web Authoring software - 1 minute.
10. Try to horizontally line up two related images - 6 hours.
11. Remove one of the images - 10 seconds.
12. Set the text's font color to the same color as your background, wonder why all your text is gone - 4 hours.
13. Download a counter from your ISP - 4 minutes.
14. Try to figure out why your counter reads "You are visitor number -16.3E10" - 3 hours.
15. Put 4 blank lines between two lines of text - 8 hours.
16. Fine-tune the text, then prepare to load your Web page on your ISP - 40 minutes.
17. Accidentally delete your complete web page - 1 second.
18. Recreate your web page - 2 days.
19. Try to figure out how to load your Web page onto your ISP's server - 3 weeks.
20. Call a patient friend to find out about FTP - 30 minutes.
21. Download FTP software - 10 minutes.
22. Call your friend again - 15 minutes.
23. Upload your web page to your ISP's server - 10 minutes.
24. Connect to your site on the web - 1 minute.
25. Repeat any and all of the previous steps - eternity.

This site began in March 1998 and was created by Janet Luch.  This page was last updated on October 16, 2011 .
Email questions and comments to: studyplans@yahoo.com