Basic Concepts for the Web


The World Wide Web (the Web) is an increasingly popular medium for electronically distributing and viewing information in the form of pages of text, graphics, movies, and other media. This artical will introduce the concepts, terms, and procedures you use to create a Web page.



About the World Wide Web

The Web is a collection of electronically linked documents (called pages) that are stored on the Internet. Established in the 1960s, the Internet was developed so that government agencies and universities could link research centers. The Internet is a network of networks that communi-cate with each other using a common computer language, called a protocol. Many services comprise the Internet, such as e-mail and mailing lists, Usenet newsgroups, FTP file transfer-ring, Telnet for logging in to remote services, and Gopher for menu-based Internet searches. Probably the best known and fastest growing of these services is the Web.

Understanding these common terms will help you as you create your Web pages:

· A document and a page in the Web world both refer to a single file. (In printed materials, a document is a single body of work that contains individual pages.) You move through and between these pages using hypertext links-similar to clicking a topic in an online help system.

· A Web server is a computer on any platform, such as Macintosh, UNIX, or Windows, that stores and manages Web documents. The server accepts requests from other computers and then delivers the documents back to the requester.

· A browser (sometimes called a Web client) lets you look at documents sent by a server. Many browsers are available, including Netscape Navigator®, Microsoft® Internet Explorer, National Center for Supercomputing Applications (NCSA) Mosaic, and so on.

· An Internet Service Provider (ISP) maintains the server where you send requests as well as space for storing your own Web pages. (If you work in a company or educational institution, your organization probably provides the services you use to get to the Web server.) Most ISPs include a browser in their software or tell you where to go on the Web to download a browser.

Note: Your own computer can be a Web server if it has the proper software and a direct connection to the Internet, but running a Web server involves extensive technical and administrative overhead. Most people and small companies avoid this labor-intensive option and have someone else provide them with Web access.

· A site is a group of related pages on a Web server. You usually enter a Web site via a home page.

· A home page is the Web page that loads when you start a browser. Each browser application has its own home page, which is typically the page of the company that created the browser. The home page also is the entry point to your Web site when you publish information on the Web. A home page usually displays general information about the Web site, and links to the Web pages in this site and to pages in other sites. The home page usually is named www.mysite.com/index.html.

· Publishing on the Web uploads or stores a copy of the document on a Web server where the rest of the world can access it. Most ISPs offer customers a few megabytes of space on their servers to store their electronic documents.



Using Web addresses

To go somewhere on the Web, you enter an Internet address called a URL (Uniform Resource Locator) in your browser. The URL is the pathname to the page or object you're looking for.

A URL is made up of several parts, for example:

· PROTOCOL is the set of rules that describes how you want the information transferred. The system used by the Web to transfer data is called HTTP (HyperText Transfer Protocol). Most browsers now also support file transfers, gophering (browsing for resources using menus and the appropriate application such as telnet or ftp), sending mail, and so on.

· DOMAIN describes the host name and namespace on the Internet.

· DIRECTORY PATH is the location within the machine's file structure of the Web site.

· PAGENAME is the filename of the page you're requesting.

PROTOCOL / DOMAIN / DIRECTORYPATH / PAGENAME
http://www.company.com/department/sales/western.html

Layout considerations HTML is primarily a set of tags for a sequence of text, graphics, and other media with hypertext links. An HTML page is one column of continuous text with graphics that flow along with the text, as if they were text characters themselves. This text-stream model limits control over page layout; for example, it controls how you can set up layouts that use multiple columns, layered text and graphics, or rotated text. The text-stream model means that page proportions and line breaks will vary depending on the size of the monitor or window in which the page is viewed, and the preferences set in a Web browser. However, as a rough guideline, you might design for the line length produced by a Web browser using a default font on a 640-by-480-pixel screen.

Resizing a browser window changes line endings

You cannot specify a precise horizontal and vertical position for a graphic. For example, if you position a graphic at the bottom right of a page as it appears on your monitor and a reader decides to make the window narrower, the graphic probably will move to the next line down and may end up on the left side of the page.


Typographical considerations
You cannot control the typographical appearance of your Web page using HTML, because the Web browser's window size and font settings determine line breaks, letter spacing, and word spacing. In addition, you cannot specify the following type characteristics because the Web browser either completely controls them or does not support them:

· Font and leading

· Font width

· Tracking and kerning

· Outline, shadow, and reverse type styles

· Tab positions

· Spacing before or after a paragraph

To preserve the typography in a short passage of text, such as a company logo, create the text in an image-processing program and import it as an image.


Graphics considerations
When you're considering what images to include in a Web page, keep in mind that images take longer to download than text. Some browsers don't display graphics at all, and some readers turn off graphics to speed up their browsing. Here are additional considerations for working with images that you'll display on the Web:

Keep the file size as small as possible by reducing the image size and the number of colors (the color palette) of the images.
Because you want a home page to load very quickly, no graphic should be larger than about 10K. The entire home page (all the graphics on the page plus the text) should not be larger than 50K (which takes about 20 seconds to download using a standard modem connection). To transfer a megabyte of data (1024K), a 14.4 bbs modem takes 10 minutes, and a 28.8 bbs modem takes 5 minutes.

Limit the image width to 480 pixels or less.
This width lets most readers view the image easily since 480 pixels is the default width of a Netscape window (when displayed on a 13-inch monitor). When you must use larger images, consider placing a thumbnail (a small version of the image) on the main page and linking it to the larger or higher resolution image. Then readers can decide if they want to spend the time downloading the bigger file.

Resample or reduce the image resolution in an image-editing application such as Adobe Photoshop.

Scaling an image does not change its file size and won't speed downloading. You can use an image-editing application such as Adobe Photoshop to resize or resample high-resolution images. A resolution of 72 pixels per inch (for Macintosh) or 96 ppi (for Win-dows) is high enough for most images because it is the resolution of most readers' monitors. See your graphics program documentation for more information on reducing image dimen-sions and image resolution.

Save the file in GIF or JPEG format.

To decrease the file size of an image without dramatically changing how it looks, save the image in the Graphics Interchange Format (GIF). GIF uses an indexed color palette with no more than 256 (8-bit) colors and is useful for most graphics, line art, and text. When an image requires more color information or precise color fidelity (for example, when the image is a photograph or contains a gradient) save the file in JPEG format. JPEG compresses the file to save space while still providing millions (24-bit) of color.

Use a dither-free Web palette in your image-editing application.
Work in RGB color mode rather than in CMYK mode when preparing images in an image-editing application to help prevent the undesired pointillist look of dithered-mixed- colors. RGB files are smaller, and use the same color model as that used by most monitors. Monitors can show only one palette per screen. If multiple images will appear on the same page, use your image-editing program to find the best adaptive color palette for all the images on a page. (An adaptive palette creates a color table by sampling colors from the more commonly used areas of the color spectrum that appear in the image.) To avoid dithering colors in flat color or limited color images, use a color palette with the lowest common denominator (limited color palettes don't work well with photographs). The Windows and Mac browser palettes differ slightly and share only 216 of 256 possible colors. Nondithering, 216-color palettes are available on the Web.

Create the image using anti-aliasing.
Low-resolution images often appear with jagged edges where colors change. In an image-editing application such as Adobe Photoshop™ or using Adobe ScreenReady™ for the Macintosh, you can apply anti-aliasing to blur slightly the edges where colors change and create a smoother transition between adjacent colors. (Don't anti-alias a graphic if you're making the rectangular background around the image transparent or you'll get a halo or fringe around the edges.)

Use the same image in different places in your site.
Typically, a browser has to download an image only once when it's repeated in a site. This lets duplicated elements, such as navigation bars and logos, appear very quickly.

Keep your target audience in mind.
If you want modem users to access your page, the total graphics content of a single page should not exceed 100K.


Using HTML formats
The constraints of HTML may seem like limitations from a printed-page designer's point of view, but they are advantages for online delivery. Tagging text by content, not appearance, makes Web pages readable on a wide variety of computer systems and monitor sizes. HTML structures information using named formats. You apply formats based on the function of a particular piece of text, such as a heading, a regular paragraph, or a list. HTML formats resemble the named styles in many word-processing programs in that you change the appear-ance of text by applying different formats. However, the appearance of a format can also be changed within the browser by the person reading a Web page-something a reader of a printed page cannot do. The formats in HTML preserve the functional organization of a page even if a reader changes a format's appearance.


Preserving a page layout
If preserving the graphic identity or page layout is important, consider creating some of your Web pages as Adobe Acrobat® Portable Document Format (PDF) files. PDF files preserve the layout and typographical characteristics that HTML does not, and can include hypertext links between pages and to the World Wide Web. PDF files are useful, for example, if you have extensive layouts made in Adobe PageMaker ™ . You can import PDF files from any version of Adobe Acrobat. To be read, you must have the correct plug-in installed in the Browser Plug-ins folder. When you place a PDF file, only the first page of the imported PDF file appears in PageMill. You can then link the image of the first page to the actual PDF file to view the entire document. If you include PDF files, also include a link to the free Adobe Acrobat Reader application, which is required to view PDF files. You can configure Acrobat Reader as a helper application for browsers, to interpret the PDF format for browsers that don't support it using plug-ins. Acrobat Reader runs on Macintosh, Windows, MS-DOS, and some UNIX systems.


Using Web links
The most significant difference between a printed page and a Web page is a link, which lets you arrange pages in a Web site nonsequentially. When you click a link, the Web browser jumps you to the page set as the link's destination. Links appear as specially marked text or images on a page. Each page can have several links, with each link leading directly to another page within your site or to pages on any other Web server in the world.

03/06/00

1