Web Content Design
Advice and resources for online content providers
Technical issues

Every Web editor and writer should be familiar with these technical issues and how they affect content.

Absolute vs. relative links Frames Meta tags
Bandwidth HREF Redirect page
Cascading style sheets HTML Screen resolution
File formats Include file XML


Bandwidth  

Determines how quickly data travels to the user’s machine from the Internet server. The larger the bandwidth, the faster the speed and the bigger the Web page can be. A website should have a target bandwidth, which is the bandwidth that the majority of the target audience uses.


Screen resolution  

Refers to how many dots, or pixels, a computer screen uses to display images. The more pixels used, the higher the resolution and the more of a Web page appears “above the fold,” in a single screen view. A website should have a target resolution, which is the resolution that the majority of the target audience uses. Common PC resolutions are 640 X 480, 800 X 600, 1024 X 800.

To top


File formats

The most common type of Web page is in HTML format. However, many other file formats are used.

 
Format Use
ASP Enables developers to script code that can process data on the Internet server instead of the user’s machine. ASP files are used to display data from a database, among other things.
DOC, XLS Microsoft Word or Excel document. These can either be displayed in the browser, just like an HTML page (for intranets) or downloaded onto the user’s machine (for the Internet). When linking to a document, include the file format and file size in the link text; for example, “Examples (Word .DOC, 55K).
GIF Drawings, illustrations and other line images
HTM, HTML Web pages
JPEG Photographs
PDF Printed documents that have been “scanned” using Adobe Acrobat. A PDF reader is needed to view the documents

More information

To top


HTML

Acronym for "Hypertext Markup Language," which is a set of standard tags and conventions used to encode pages to display on the Web. Most tags come in pairs, with a starting code and an ending code (identical to the starting code except for a forward slash. Web editors and writers should know the basic HTML codes needed for editing, including:

<B> </B> bold
<I> </I> italic
<H1> </H1> <H2> </H2> headings
<P> </P> paragraph
&ldquo; left quote (“)
&rdquo; right quote (”)
&ndash; en dash (–)
&mdash; em dash (—)
&amp; ampersand (&)

More information

To top


HREF

The HTML tag used to create a hypertext link. You can link to another Web page or to a place on the same page, display a document, open a new email message, or execute some kind of action (which requires using a scripting language). By including optional parameters, you can make the new page open in a new window or specify the text to display when the mouse moves over the link. For example, this link:

<a href="http://www.msn.com" title="Link to MSN" target="_blank">MSN</a>

opens the MSN.com home page in a new window; when the mouse is moved over the link, the text “Link to MSN” is displayed.

To make it easier to fix broken links, consider adding a comment to the href tag telling you where the link is supposed to go. For example:

<!-- link goes to booklist for book club area of oprah.com -->
<a href="http://www.oprah.com/obc/omag/obc_omag_main.jhtml">
Recommended reading</a>

 

See also absolute vs. relative links.

To top


Cascading style sheets

A specification for how page elements appear on a Web page, including font name, size, style.  Commonly referred to as “CSS,” cascading style sheets give more control over the appearance of a Web page to the page creator than to the browser or the user. Not supported by all browsers, CSS is useful for large sites that are redesigned often, since look of a page can be changed easily by updating the style sheet and not having to modify the Web pages themselves.

More information

To top


Absolute vs. relative links

When you code a link in HTML to another page within your own site, you can specify either the complete URL (“http:/…”) or the path to the linked file relative to the location of the current file.

For example, you could link to the page "WashStats.htm" located in the subdirectory "NWStates" in two ways:

Absolute link: <A HREF="http://Guidebook/NWStates/Washstats.htm">Washington</A>

Relative link: <A HREF="/NWStates/WashStats.htm">Washington</A>

Relative links are more efficient and can make your pages more portable. For example, you can create several Web pages in a single folder on your local computer that link to one another using relative links, and then upload the entire folder to your Web server.

To top


Frames

A feature supported by most recent browsers that enables the author to divide the Web page into two or more sections, or “frames.” The contents of each frame are taken from a different Web page. Although they provide flexibility, frames also create serious usability problems and so should be used sparingly.

More information

To top


Meta tags

Meta tags are HTML tags that identify attributes of the page, such as author, keywords, and description. For editors, the most important META tags are those used by Search engines to accurately list the page in their indexes. For example, this tag:

<meta name="description" content="Paprika history, recipes, and links">

displays “Paprika history, recipes, and links” when the page is referred to in Search indexes.

More information

To top


Redirect page   

A blank page that immediately and invisibly links the user to another page. Redirect pages are used to track how many people go to a particular URL or as a forwarding device when the address of a Web page changes.

To top


Include file

A file containing code or text that is displayed on multiple pages of the site—for example, the copyright information that appears at the bottom of every page on a site (“© 1998-2000”). Include files are useful for information that is repeated on many pages and needs to be updated frequently.

To top


 XML

Acronym for "Extensible Markup Language." It can be used to create customized tags to identify the type of information being encoded (instead of how the text should appear on the page). For example, if you wanted to put a clothing catalog on the Web, you could create tags for “size,” “color,” and “fabric.”  

More information

To top


Copyright © 2005 Mazzba Productions. All rights reserved.