MCCS Foundation
Community
Search Tools
Site Map
E-Mail Accounts

Browsers and the Web

The information you receive from the server is described using a code called HTML -- HyperText Markup Language -- that is, it uses simple, explicit codes to describe the structure of a document, by "tagging" text, graphics and other elements. Codes, or tags, are placed before and after the element being described. The user's browser then determines how to "render," or display, the elements. This allows the same information to be displayed on different screens, using different browsers, and to people with different preferences (e.g. visually impaired students might need to use bigger fonts).

HTML is a "standard-in-progress." It is simple, transportable across platforms, and widely accepted and available. Because HTML is designed to be usable on a variety of platforms, it gives the user, not the Web page designer, control over how pages are rendered. However, the Web page designer can include rendering "hints" in order to provide browsers with guidance on how a page should be rendered.

HTML Concepts

Programmers are uncomfortable with this analogy because word processing codes are "appearance" commands while HTML coding describes document "structure." Appearance in word processing or desk-top publishing is controlled by the designer, from type face and size, through color, to the position of type and graphic elements. HTML documents allow the designer to suggest how the page should be "rendered" or displayed, but final control of appearance lies with the receiving browser.

Formatting Text: To designers familiar with creating documents with word processors and desktop publishing tools, HTML might seem to have few features with which to control such features as font size. However, these are features of "rendering" and are controlled by the user through the browser. This allows your information to be displayed on multiple platforms, and even multiple media (e.g. a voice browser that reads to blind students). You can provide rendering hints, inside tags, to which browsers will default.

HTML Pages: It's best to have pages that don't contain more than 10K of text and 100K of images -- and less is better. Information about the size of a file is available in the disk directory -- use the Mac or Windows file utility or dir in DOS. Long pages and large image files may not load or display properly in some browsers which run out of memory or crash the system before displaying the entire document.

URL's: The URL -- Uniform Resource Locator -- provides the standard way to point to a specific file or location on the Internet. URL's may point to http:// on the Web, ftp:// -- File Transfer Protocol -- gopher://, telnet:// or wais:// on the Internet, or even file:// on a floppy or your hard disc.

Links and Anchors: The hypertext link is a key feature of the Web and HTML. Click on something highlighted or underlined (usually in blue) and subjectively you are taken somewhere else -- within the document, to another page, around the world.

The concept is simple. In the HTML code, you surround some text with a "hypertext reference anchor," or the hypertext link. This code contains the URL of where you want the user to be taken when the link is clicked. The code may point to other Web pages or to any other resource -- like a file resource or a Gopher server. For example, this link

<A HREF="http://www.yahoo.com/"> The Yahoo Search Utilities</A>

Lists and Tables: HTML includes tags for several kinds of lists, such as descriptive lists which have a header and left-indented copy; numbered or ordered lists which get sequentially numbered automatically; and unnumbered lists which use bullets or squares to identify each item. More recent browsers accept tags for "tables" -- collections of data or text organized like a spreadsheet, either with or without borders around the cells.

Finding More Information

Resources for getting into HTML in depth abound today. Within the near future, new programs for Web authoring and site management will be readily available as part of word processor and desktop publishing applications. Many of the browsing applications will include utilities that enable Web developers to convert straight text into HTML-tagged pages. These programs will allow the developer to track links and anchors across multiple pages. Currently, there are freeware/shareware applications for both PC and Macintosh platforms which replace hand-coding with drag-and-click convenience.

However, and because a little understanding of how HTML works will improve even your drag-and-click Web designs, it is helpful to have access to information and instructions about color, text, and image elements in HTML development. The main online resource is at Yahoo:

http://www.yahoo.com/Computers/World_Wide_Web/HTML/.

Resources are also available at bookstores and computer shops: A helpful overviews is Tim Evans's 10 Minute Guide to HTML from Que. Adam and Tonya Engst's Create Your Own Home Page from Hayden and Laura LeMay's two books, Teach Yourself Web Publishing with HTML in 14 Days and Teach Yourself More Web Publishing with HTML in a Week, from SAMS are highly recommended and more detailed. Even more advanced is Mary E. S. Morris's HTML for Fun and Profit from Prentice-Hall which covers some of the real intricacies of HTML versions and "extensions" which work in only the latest browser versions.

One of the most complete, least expensive, and easiest to understand is Elizabeth Castro's HTML for the World Wide Web, 2nd Edition, published by Peachpit Press. This book features comparisons of what HTML tags and attributes work in which browsers, hexidecimal color and special character charts, and tips about working with the variety of publishing tools.

The issue of the variety of browser versions is most critical when dealing with images, media, and fancy text elements in Web design. Lynda Weinman's <designing web graphics> from New Riders in Indianapolis is one of the simplest, yet comprehensive, examination of images, artwork, graphics, tables, colors, typography, alignment, other media, and style. Her comparisons of a sampling of the most common browsers in use -- from the many versions of the ubiquitous Netscape and Mosaic to the proprietary applications offered by the commercial online services -- offer valuable insights into the difficulties Web designers face when deciding between simple text pages and complicated, but more attractive, pages with images and tables.

Images: GIFs and JPGs

GIF was chosen by the National Center for Supercomputing Applications (NCSA) which developed the first standards for the Web. GIF has built-in compression so image files are relatively small. It only stores information about 256 colors, thus improving compression and reducing file size. It's easy to decompress and display on many different machines and platforms.

GIF was for a long time the only image file format that would display as part of an HTML page in every graphical browser currently available. The growing movement, led by Netscape, to support JPEG/JPG "inline" (that is, from within the browser), has apparently been successful.

Other image formats -- such as TIFF from Adobe (Aldus) and BMP from Microsoft -- may be displayed but not inline. The Web browser has to launch an external application (such as Windows Paint Brush for BMP files) to display those formats.

Smaller is better: For bandwidth and display reasons, the smaller the image, the faster the image can be displayed on a browser. Most users are dialling in on a telephone modem which could be as slow as 9600 bps through one of the Internet service providers or as fast as 28.8 Kbps through some local services. Schools and university dial-in services commonly connect at 14.4 Kbps. Large image files can slow any of these modem connections to a crawl.

Link smaller to larger: If a larger image is necessary to convey the information or illustrate the "feel" of the image, use a small, preview image on the main page and link it to a larger image which the user has the option to view or not. This second file could be a JPEG version which will display in Netscape or which will launch a separate JPEG application.

Fewer colors are better: Because of the compression built into GIF, using only a few colors will radically reduce the size of the file and practically ensure that the image will be displayed correctly on older 8-bit screens.

The 16-colors in the figure to the right display attractively.

Line art translates well: Line art with a little color achieves a nice effect. It compresses easily, displays rapidly, and -- because of so many bad design efforts -- stands out from the pack.

Transparent Images and Interlacing

The design solution is to concentrate on contrast rather than specific colors: Create or use images that silhouette against lighter shades of almost any color -- and then "mask" out the image background by using a GIF feature called "transparency." Masking is not as difficult as it sounds, nor as confusing as some desktop publishing applications have made it seem. A recent GIF feature allows the designer to "spec" the background of the image as transparent or clear. Thus, no matter what the specified color of the image background, it will "clear" and go transparent against the page background on the user's browser.

The GIF spec that supports the transparency option is called "89a." An earlier spec -- 87a -- does not support transparent colors. If you have a GIF image that does not have a transparent background, or created an image with an application that does not support 89a, there are three options available: Live with the rectangle; change both the image and page background colors to gray; or use a Macintosh or PC freeware/ shareware application that allows you to open the GIF 87a file and save it as a GIF 89a with a transparent background.

A home page which features transparency information and pointers to freeware and shareware tools can be found at

http://dragon.jpl.nasa.gov/~adam/transparent.html

Imagemaps

http://www.yahoo.com/Computers/World_Wide_Web/Programming/Imagemaps/

The regions in a map include

• shape descriptions (rectangle, circle, polygon, or background)
• numeric data -- coordinates -- defining the coverage of the regions within the image, and
• address (URL) links.

Visit the HTML Details tutorial for more information and directions.

Testing Web Pages

1. Check the appearance of the text and image elements as they relate to each other and to the overall appearance of the page;
   
2. check the behavior of any relative links or anchors; and finally,
   
3. check the behavior of any absolute links.
   

There are three ways to test a Web site:

1. Install the pages on a local fixed or floppy disk: Collect all the files you have created -- the page you're testing and any other document or image files that are linked to it. Use the "Open File" menu option in your browser to point to the test file.
   
2. Use a "validation checker:" There are programs which check out HTML pages by reading through the page and pointing out typographical or syntactical errors -- codes that don't conform to HTML specifications. There are validation checkers at Yahoo:

   http://www.yahoo.com/Computers/World_Wide_Web/HTML/

   
   
3. Test the page on a server: You can install the pages on the server where they will reside. Web servers have read-access areas which contain the pages available to the users on the Internet. These areas have password protection for write-access so that only the developer of the page can make changes and additions. Test the pages exactly as an outside user would access the page on the Web. Installation on the Web server generally either requires creating the HTML file with a text editor on the server or using a file transfer program (FTP) to move the file from your computer to the server. For more information specific to the MCCSC-Monon process, visit http://www.mccsc.edu/~czager/pages/webpages.html -- Creating Web Pages on Monon.
   

If you have any doubt that the codes or commands in your Web page will work across many browsers, it is best to check your work against the current HTML 3.2 standards.

Surfin' the Web

The Web is an exciting medium with few defined rules or boundaries -- yet. Web site developers are limited only by the current scope of HTML and the way the Web and Web browsers work. Not a day goes by that some group doesn't announce new developments to make the Web more accessible or interactive. As individuals get faster modems, high-capacity ISDN lines, or even high bandwidth direct connections, and as more and more businesses, schools, and agencies move onto the Web, the task of the Web-site developer will be to keep the pages lively, dynamic, and interesting 24 hours a day.