Writing@CSU

Writing Guides

Writing for the Web

 

Design Page Elements

An important part of the overall look and feel of your Web site is the appearance and placement of specific elements on your pages. Some of the most common elements that are displayed on Web pages include:

  • Headings display titles and subtitles on a page and are typically fairly brief. Typically, sans serif fonts (such as Arial, Helvetica, or Verdana) are used to display headings. Using Cascading Style Sheets, you can control the font face, font style, font effects, alignment, size, and color of your headings. You can also control the appearance of headings using the <FONT> tag. However, it is more efficient to use CSS than to code each heading using <FONT> tag – and much easier to change.

  • Body Text is used to display ordinary text, such as the text found in paragraphs. Typically, serif fonts (such as Schoolbook, New York, or Times New Roman) is used to display body text. You can control the appearance of paragraph text using CSS or the <FONT> tag.

  • Images and other Multimedia Elements are commonly found on Web sites and include icons, buttons, images, animations, audio files, and video files. The appearance and behavior of these items can often be controlled by the HTML tags used to display them. For instance, images can have borders, descriptive titles (informational flags), and various horizontal and vertical alignments.

  • Page Backgrounds can range from a simple white background to a repeating (tiled) image to a single image that acts as a watermark. Your design decisions should take into account the impact of a background color or image on text legibility and the emotional tones that the color or image conveys. You can control the background of pages using the <BODY> tag or using CSS.

  • Links to other Web sites, to other parts of a document, and to other Internet resources should be clearly distinguishable from other text on the page. You can control the appearance of links on your pages using the <BODY> tag, the <FONT> tag, or CSS.

  • Navigation Aids should be displayed on your pages in a consistent manner. Avoid changing the background color or shifting the location, for instance, of a navigation menu. Consistently displaying navigation aids will make it easier for your readers to locate these tools.

See Also
Links Page: Learn more about Web design on the Web Style Guidelines links page.

Links Page: Learn more about Web graphics in Web Graphics.

Coding Primer: Learn how to format text in Formatting and Laying Out Text.

Coding Primer:Learn more about creating Web graphics in Displaying Images.

Coding Primer: Learn how to create links in Creating Links.

BackPrevious Step . . . . . . . . . . . . . . . . . . . Next Step Next

Copyright © 1993-2009 Colorado State University and/or this site's authors, developers, and contributors. Some material displayed on this site is used with permission.