Vertebrate Zoology  - How to Create HTML Documents

  1. What is HTML?
  2. File types involved in web pages
  3. MCnet and the WWW
  4. Frontpage Express, Netscape Composer, and other software
  5. Elements of a web page
  6. Inserting Graphics
  7. Making Links
  8. Tables
  9. Saving your work
  10. Quirks and workarounds
  11. Design Considerations

Bottom of Document 01/18/99

What is HTML?

HTML stands for hypertext markup language.  Basically, it is a simple text file with commands embedded in it. The commands tell the web browser (such as Netscape) to perform a certain task, such as to display a word in italics, or present a picture. The commands are embedded in the file, for instance, to make a word bold, you type in <bold> word </bold>. The browser, when it encounters the command <bold> knows to make the letters that come after the bold command bold, until it reaches the second half of the command, </bold>, at which point the text returns to normal.  The creator of the web page has to put in all the commands; the web browser has the equally difficult job of interpreting them for the computer it is running on.  The beauty of the system is that there are web browsers for most types of computers, so a document you create in HTML on an IBM can be viewed on a Mac. You can see the HTML code that produces a page using the "View:HTML" option in Netscape.  Try it now.

Top of Document     Bottom of Document

File types involved in web pages

The HTML files are simple ASCII text files. ASCII is a set of computer standards, and an ASCII text file is one of the simplest types of files. By itself, ASCII does not support boldfacing, italics, tabs, and many of the other formatting options that we have become used to. That type of formatting requires a different, more elaborate file type.  Many word processors have their own, proprietary (owned by the company) file types to support formatting. This has led to a tower of Babel when it comes to word processing; sometimes one version of a company's software won't even be able to read a file created by an earlier version of the same software!  Just about any word processor, however, can read an ASCII file, and is thus able to read and create an HTML file (although it might not be able to interpret it and show the formatting correctly).

HTML files differ from, say Word documents that you create with Microsoft Word. Word files are an example of one of those proprietary word processor file formats; normally, they end with the extension DOC. Word can, however, read and write HTML files directly, and display them in the proper configuration on the screen.  You should know, however, that it is possible to use Word to convert existing Word documents into HTML files and preserve most of their formatting (Word does some things that cannot be reproduced in HTML, such as footnotes). And, of course, you can convert an HTML document into Word; this allows you to reformat the HTML document for printing.

Other files that are important in HTML are the image files. For our purposes, these include GIF and JPG files.  These images can be inserted into a HTML document.  If you have images in another format that you want to include in a HTML file, you must first convert them to GIF or JPG files using a program such as LviewPro or Paint Shop Pro.  The BMP files used in Windows cannot be used in a HTML file without being converted.  Both GIF and JPG files have the advantage of being highly compressed.  GIF files can have an interlaced format and/or a transparent background.  The interlaced feature allows the user to see a blurry image which becomes clearer as the image loads. The transparent background allows you to assign one color in the image to be "transparent" and thus the background will "show through". JPG files are often more highly compressed and therefore take up less room on the host computer.

Top of Document     Bottom of Document

MCNet and the WWW

WWW (World Wide Web) files can be accessed over the Internet, a system which interconnects computers around the world.  The same files can also be placed on an Intranet, which is the network which connects computers at a given site.  McNet is an example of an intranet; and you can access files on any of the servers in the various buildings around campus. McNet consists of 3 Unix computers (McNet, McDat, and McLib), a number of servers (BART, MILLS, IRVINE, THOMAS, etc.) and all the computers attached to them.  In addition, McNet is connected to the Internet, so a file placed on it can be read by anyone in the world with an internet connection (assuming the file was placed in a directory available to the public).  Each student has her or his own directory on McNet.  The directory can be further subdivided; for instance one subdirectory that each student has is for mail, and is understandably private. Another subdirectory is called public_HTML; any HTML, GIF or JPG file in that directory is available to anyone on the Internet (providing they know the address).  The address for a student's public_html directory is:

   www.mcnet.marietta.edu/~emailname/file.name

You would substitute your email name right after the ~ (tilde) and the file name you wanted to read for the file.name.  The address above is an example of an URL or Uniform Resource Locator.  The www in the URL is just a way of telling the browser (your end) and the server (McNet) that you are using the WWW. Mcnet is the name of the computer, marietta is the name of the organization, and edu is the domain. EDU stands for education; other domains include ORG (organization), GOV (government), MIL (military), NET (net), and COM (commercial). Everything before the first slash (/) simply directs the browser to the right computer (and big schools may have 4 or 5 computers "nested" before you get to the school's name).  Everything after the first / directs the browser through directories to a particular file. If the URL ends in a / without a file name, the browser will look for a file called INDEX.HTML.  For most of us at Marietta, that is our own "home page". For instance, the following two URL's will take you to my home page:

www.mcnet.marietta.edu/~mcshaffd/index.html

www.mcnet.marietta.edu/~mcshaffd/

If there is no INDEX.HTML file in the directory, a list of all the files in the directory is displayed.

To place a file on McNet for the world to view, you need to have a file transfer program such as WS_FTP (which is available on any of the lab computers on campus), and the password for the directory you want to place the files in.

Top of Document     Bottom of Document

Frontpage Express, Netscape Composer, and other software

As mentioned above, it is possible to create a HTML file using a simple editor, such as Windows' own Notepad.  Using a word processor (without direct HTML capabilities) is awkward, however, as you have to know the code and type it in.  Plus, you won't be able to see where the graphics are going to end up, or what the text formatting will look like.

For this class we will use Frontpage Express, for several reasons. First of all, it works much like a conventional Windows-based word processor. To boldface a word, you highlight the word and select bold from a menu; all using the mouse.  You don't have to know or type the command.  Second, to some extent, with Frontpage Express, what-you-see-is-close-to-what-someone-else-will get-with-Netscape (WYSICTWSEWGWN).  Differences will crop up due to hardware differences such as screen size; but it's close. The biggest reason for Frontpage Express, however, is that it's free. The good folks at Microsoft want you to use their web browser, and provide this software in return. So reward their generosity by trying them out.

To run FrontPage Express, go to the Start:Programs:Internet Explorer menu and select FrontPage Express.

Other software you will use includes LView Pro (to manipulate graphics), and NetScape (to test your pages).

Top of Document     Bottom of Document

Elements of a web page

This section will describe some of the things you can do on a web page. For each item, the menu sequence to get to that element will be given.

Title (toolbar under URL box): You can type the title for your page here; Netscape will display the page title in the title bar at the top of the screen.  Please choose a descriptive title (and spell it right!)

Background Color (Format-Page Attributes): You can select a color for the background; all of our files will use plain white to make them readable on as many computers as possible.

Text Color (Format-Page Attributes): You can also change the main text color here; however, for our purposes we will use black.  

Background (Format-Page Attributes):  A background image can be assigned. For our purposes, we will not use any background other than plain white.  For other projects, however, you could insert a GIF or JPG file to serve as background; the image would be tiled (repeated) in the background and the text and other graphics would appear "on top" of the background image.

There are other Page Attributes that can be adjusted, but they are beyond what we will be doing.

Horizontal Rule (Element-Horizontal Rule):  This is a divider which runs across the page:


I find it rather plain and tend to use a GIF of a color bar instead.

Links, Anchors and Images will be discussed separately.

Type Styles (Format-Type Style): The Following Type Styles can be selected:

Note: Not all of these are available in Frontpage Express

Type Styles in HTML

Plain

Bold

Italic

Underlined

Fixed Pitch

Deleted Text

New Text

Superscript

Subscript

Citation

Code

Definition

Emphasis

Keyboard

Strong

Sample

Variable

     

Type Size (Format-Type Size):  The size of the type can be varied, within limits.

Type Color (Format-Type Color): The color of the type can also be varied.  You might want to do this for emphasis.

Heading (Format-Heading):  A variety of heading sizes are automatically available: 

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph Formatting (Format-Paragraph):  Paragraphs can be formatted in a variety of ways:

This paragraph is formatted in BlockQuote style:

ababa dsjdsj dsjkfdsjds dsklewiew dsksmmsj s;; s;sl.slds saodslkfkd skewjd, dl;fj saldfli dfkfik dsksks fdskgfks, sdklfks kskjfkm, sklfms l slkfdklw l;ewklefm slaskldfs welsdkdsjk dsksjfds skfsjkf sfdksksks slsklsjk skskfs sfksksk skskwik slkskl;erot, sdl;f.s lsdfd;;tg tg''yltg re;dl; fdkrei fdkdfj rejkfdj fedjkrfejred ewjkfdj  dfjfu aja dsjwm saks wk dqakla  aldk a,akd kaka akmajd ajaj akaka akmakakm a  aklak akakd lamlweole elrl ,a w;,lewlew ;lw;w; wl;wl wlwlred ehsyds dsgdsbdsr dsgdsagdart sacgdgt asgdgat asgdgag agdg baba dsjdsj dsjkfdsjds dsklewiew dsksmmsj s;; s;sl.slds saodslkfkd skewjd, dl;fj saldfli dfkfik dsksks fdskgfks, sdklfks kskjfkm, sklfms l slkfdklw l;ewklefm slaskldfs welsdkdsjk dsksjfds skfsjkf sfdksksks slsklsjk skskfs sfksksk skskwik slkskl;erot, sdl;f.s lsdfd;;tg tg''yltg re;dl; fdkrei fdkdfj rejkfdj fedjkrfejred ewjkfdj  dfjfu aja dsjwm saks wk dqak

This paragraph is formatted in Preformatted Paragraph style:

ababa dsjdsj dsjkfdsjds dsklewiew dsksmmsj s;; s;sl.slds saodslkfkd skewjd, dl;fj saldfli dfkfik dsksks fdskgfks, sdklfks kskjfkm, sklfms l slkfdklw l;ewklefm slaskldfs welsdkdsjk dsjdsj dsjkfdsjds dsklewiew dsksmmsj s;; s;sl.slds saodslkfkd skewjd, dl;fj saldfli dfkfik dsksks fdskgfks, sdklfks kskjfkm, sklfms l slkfdklw l;ewklefm slaskldfs welsdkdsjkdsksjfds skfsjkf sfdksksks slsklsjk skskfs sfksksk skskwik slkskl;erot, sdl;f.s lsdfd;;tg tg''yltg re;dl; fdkrei fdkdfj rejkfdj fedjkrfejred ewjkfdj  dfjfu aja dsjwm saks wk dqakla  aldk a,akd kaka akmajd ajaj akaka akmakakm a   aklak akakd lamlweole elrl ,a w;,lewlew ;lw;w; wl;wl wlwlred ehsyds dsgdsbdsr dsgdsagdart sacgdgt asgdgat asgdgag agdg baba dsjdsj dsjkfdsjds dsklewiew dsksmmsj s;; s;sl.slds saodslkfkd skewjd, dl;fj saldfli dfkfik dsksks fdskgfks, sdklfks kskjfkm, sklfms l slkfdklw l;ewklefm slaskldfs welsdkdsjk dsksjfds skfsjkf sfdksksks slsklsjk skskfs sfksksk skskwik slkskl;erot, sdl;f.s lsdfd;;tg tg''yltg re;dl; fdkrei fdkdfj rejkfdj fedjkrfejred ewjkfdj  dfjfu aja dsjwm saks wk dqak

Paragraphs can be aligned flush to both margins:

ababa dsjdsj dsjkfdsjds dsklewiew dsksmmsj s;; s;sl.slds saodslkfkd skewjd, dl;fj saldfli dfkfik dsksks fdskgfks, sdklfks kskjfkm, sklfms l slkfdklw l;ewklefm slaskldfs welsdkdsjk dsksjfds skfsjkf sfdksksks slsklsjk skskfs sfksksk skskwik slkskl;erot, sdl;f.s lsdfd;;tg tg''yltg re;dl; fdkrei fdkdfj rejkfdj fedjkrfejred ewjkfdj  dfjfu aja dsjwm saks wk dqakla  aldk a,akd kaka akmajd ajaj

Or paragraphs can be aligned to the left or right margins, or they can be centered.

Lists (Format-List):

There are 3 types of lists, numbered, bulleted and definition:

  1. First item
  2. Second Item
  3. Third Item
Definition 1
what it means
Definition 2
what it means

You can exit a list or paragraph formatting, which means that what you type from that point on will be in the normal, default style. You can also remove the list or paragraph formatting, which means that the whole list or paragraph will be converted to the normal style. This is mildly confusing and may take some practice to get used to. Note that there is an UNDO choice under EDIT.

Top of Document     Bottom of Document

Inserting Graphics

Graphics can add a great deal to a web page; however, they do take a long time to load, and not everyone has a graphics-capable browser.

It is easy to add graphics to HTML documents with FrontPage Express. There is a button on the toolbar to do so, and you can also use the menu command Insert:Image to open up a dialog box.  In the dialog box, you are asked what image you want to bring in, what text to display on non-graphical browsers, how you want the image aligned, whether or not to add a border, etc.  To add an image, you answer all the questions.  Use the BROWSE button to list all the graphics files on your disk, and choose one of them.

This is probably a good time to discuss relative vs. absolute addressing. When adding items such as graphics, or when making links, you have the ability to make the reference to the other file either relative or absolute. In relative addressing, you tell where the other file (graphic or HTML page) is relative to the page that is currently in the browser. For instance, you can tell the browser to look in the parent directory, or in a subdirectory. In absolute addressing, you give an URL or a precise path to the other file. To keep things simple, we will use relative addressing and assume that all of the graphics and html files for our project are in one directory.  You will use absolute URL's for making links to remote sites only.

Once an image is loaded, you can click and drag on its border to change its size. This does not necessarily reduce the time it takes to load the graphic, but it can help your layout. Remember that the larger and more complex the graphic, the longer it will take to load, particularly for someone with a modem connection. You don't want to bore your readers too much by having them wait for unnecessarily large or extraneous graphics. The two graphics below are the same picture, but scaled to two different sizes:

Several other considerations about images.  Images stored in the GIF 87 "flavor" do not have transparent backgrounds; images saved in the GIF 89 "flavor" can have transparent backgrounds if a transparent background is set. The following documentation is from the LView Pro Help file:

GIF89a and Transparent Colors

  • LView Pro can save an image with transparent color information, using GIF89a format.
  • The steps are as follows:
  • 1. Open the image file, or create a new image by pasting other images together
  • 2. Make sure the image is palette based (not a true color image), you may use Retouch/Color Depth to reduce the number of colors.
  • 3. Execute the dialog Options/Background Color
  • 4. Select the palette entry that will hold the transparent color. You may use the (black and white) masks to help you decide what the palette entry is, or use the Dropper button to click on one of the pixels in the image, and select its corresponding palette entry.
  • 5. Use File/Save As to save the image, select GIF89a as the desired format
  • Note1: All files saved in GIF89a format will carry transparent color information.
  • If you want to create a GIF WITHOUT transparent color information, use the format GIF87a.
  • Note2: GIF files, either in GIF87a or GIF89a format, may be created with interlaced rows. Check (uncheck) the menu item Options/Save GIFs Interlaced to turn ON (OFF) that feature.
  • The following two images are identical except that the image on the right has transparent colors and the other doesn't. Both are interlaced:

    By the way, FrontPage Express does not always display transparent GIF's properly - you must use Netscape to see the difference in the figures above.

    Be sure the graphics you place on the web are not copyrighted by anyone else, or, if they are, that you have permission to use them. If you make an image yourself, you're OK. Likewise, if you create original artwork or photography and scan it in, you're safe. You cannot scan in a picture from  most books, or use a picture from most CD-ROMs without permission. Likewise, in many cases you cannot simply grab a picture from another web site without permission.  Many government images are in the public domain, and you can use them freely, but there are exceptions here and you need to check.  

    Top of Document     Bottom of Document

    Making Links

    Hypertext simply means the ability to jump from place to place in the text,  or even between documents (files). In HTML, this is done by links.  The browser is told where to jump to when the user clicks on a particular area of text (or on a graphic); the browser then searches out the new URL.

    There are two basic types of links, internal and external. Internal links are also called bookmarks, targets, or anchors; they move you from place to place within the same document. The "table of contents" at the beginning of this document, and the Top of Document     Bottom of Document  links at the end of each section are examples of the use of anchors.

    Bookmarks cannot be created in FrontPage Express, To create them you must open the file in Microsoft Word or in Netscape composer and follow the instructions from the help files in those programs. How to Create HTML Documents

    The other type of link goes to an external document. It could be another hypertext file in the same directory, or it could be a URL on a computer in New Zealand.  To make the link here, all you have to do is highlight the text (or graphic) that you want the user to click on to activate the jump. Then, use the Insert:Hyperlink menu item to open up the dialog.  Now, type the URL in the box.

    Remember that URL's can change, and you will have to monitor your links to external documents to ensure that they are current.   A "quick" way to get and make links is to use Netscape and Frontpage Express together. Start FrontPage Express and open your document.  Then, use the down triangle at the upper right corner of the FrontPage Express window to shrink FrontPage Express. Now, open Netscape, and use its search capabilities to find documents you want to link to yours.  Use the mouse to highlight the URL in the  Netscape window, and press the Ctrl and C keys simultaneously. This copies the URL to the Windows Clipboard. Now shrink Netscape using its down triangle, and restore FrontPage Express. Highlight the text where you want the link to be and open the link dialog through the Insert:Hypertext menu or the link button. Position the cursor in the top box of the dialog and press the Shift and Insert keys simultaneously. Exit the dialog and the link is made. Save your document (but don't close it); shrink FrontPage Express and restore Netscape to search for a new link.

    Top of Document     Bottom of Document

    Tables

    Tables are a great aid in maintaining a graphical layout on a page, or just as a means of displaying tabular data. A table can contain text or graphics or both.

    A table can be a quick way to display your text in a columnar fashion. Some people find columns easier to read, because the eyes don't have to travel back-and-forth as much.

    While you do have some control over the widths of the columns, don't worry about it too much because you have no control over the browser on the other end, or on the screen width that the reader is using, or over any number of other variables.

    Tables can have the borders shown, or not, at your discretion. This table does not have the  borders shown. You can also control how the text or graphics in each of the cells aligns with the other cells in the same row or column.

    All in all, tables are a powerful tool, and FrontPage Express gives you  an easy way to implement them.

    The material in the second column can be "sidebar" material, something that is interesting, but peripheral to the main thrust of your story. It is a great way to add additional information without destroying the flow of your main article.

    Top of Document     Bottom of Document

    Saving your work

    You should save your work periodically.  I would advise setting up a subdirectory on the hard drive (usually C) of the lab computer you are working on, and transferring all of your files to the hard drive (use the Windows File Manager to set up the directory and transfer the files). Then, start FrontPage Express and open your files on the hard drive - this will give you better performance than if you work from the floppy.  When you are done with an editing session, use the File Manager to copy all your files from the hard drive to the floppy (don't do it the other way around and copy the old files from your floppy over the new files on the hard drive!!).  Use a single floppy for your articles and attached graphics, do no t place any other material (such as stuff for other classes) on the floppy. In some classes, you will be directed to save your work on the server.

    Proper care and getting to work early on a project will help you avoid last minute problems.  Save all drafts of your articles, make multiple backups, and give yourself time to deal with the unexpected. I will be more lenient with students who can document the fact that they had been working steadily on a project, as opposed to those who started the night before and ran into problems.

    Top of Document     Bottom of Document

    Quirks and workarounds

    Be aware that FrontPage Express is a different browser than Netscape, so you may notice differences in the way Netscape displays your pages.  Also, Netscape has a quirk in that it doesn't always recognize new pages. If you make changes to a page, then view it in Netscape, Netscape may not recognize the fact that you have a new document, and will load the old version from "memory". Netscape retains caches of files it has accessed; if you access the file again, Netscape checks to see if it already has a copy in the cache. If it does, it retrieves the file from there to save time and improve response. But, for some reason, Netscape doesn't always recognize a recently revised file as "new".  To work around this, go to the Preferences:Network preferences  (in Netscape) and clear both the disk and memory caches.

    One disadvantage of FrontPage Express is that it does not allow you to run a spell check. There are two ways around this. One, write the document in Word, and check the spelling there. Then save it as an HTML document, and re-open it in FrontPage Express to do the final editing. Just be sure not to make any mistakes! The other workaround is to work on the document in FrontPage Express, save it, then open it in Word for the spell check.

    Why not just use Word from the start? Well, the HTML editor is clunky, and response is slow. In addition, the HTML doesn't appear in Word the way it will in most browsers.

    Top of Document     Bottom of Document

     

    Design considerations

    As you design your article, try to strike a balance between the various elements. Graphics are great, but they slow down loading your page, so use them only where needed (although I expect every article to have some graphical elements).  Columns can "dress up" a page, but if used carelessly they can make your article confusing. Rather than repeat what can be found elsewhere, you might want to use links to allow a reader to get more depth on a subject - that's the beauty of hypertext. Don't use colors and variable text sizes randomly - be consistent, and use these devices sparingly lest they lose their impact (or just look bad).

    Top of Document     Bottom of Document

    Zoology Home Page

    Syllabus

    How to Create HTML Documents

    Vertebrate Zoology Taxa

    Modified 1/18/99