PLPTH 613
Bioinformatics Applications
Spring 2009


Schedule
Research project
 K-State Online

Lab 1. Setting up your course WWW page

Summary

In this lab you will
  1. create personal WWW pages
  2. send copies of them to a host computer, which will display them on the WWW..

In lab
  1. On your lab computer (desktop or C drive; it doesn't matter), create a directory (folder) for WWW pages and name it www. You will save your .html files into this folder. Create a subdirectory inside it, named images. Note: these directories and files won't be here next time you log in, so never expect your lab machine to save anything until the next lab session!
  2. NOTE: Although the instructions are written for Composer, any HTML editor will work for this exercise. If you have your own preferred editor, you may use it. But do not generate documents in Microsoft Word and save them as HTML.
  3. Your computer may not have Composer. If not, visit this page and download and install the SeaMonkey browser.
  4. Open Composer by opening the SeaMonkey WWW browser and choosing menu File/New/Composer page.
  5. You now have an editor window into which you can type text. Before adding any content, save your document as index.html in directory www. You'll be prompted for a title for your page -- you can call it My first page, or anything else you like. This name won't be used by the file system -- it will just appear in the title bar of your page when viewed.
  6. Now add content to the document. Add examples of the following elements. You should be able to work out how to do it by examining the menus -- if not, just ask someone for help.
    • Set the text style to Heading 1 by selecting this style from the dropdown button at top left, with default value Body text). Enter heading Personal data. Notice that after you press the Enter key, the style reverts to Body text.
    • In work you submit, you'll be using these standard heading styles to separate and organize your material, just as I've used them on this page.
    • Enter some information about yourself, studies, research, etc. Try bold, italic, and underline styles, selected from menu Format/Text Style.
    • Add an image. A good way to find an image is to point your WWW browser at Google, type a word describing the image you want, and click the Images button to search for an image containing it. When you find one, open the page containing it, right-click on the image, choose Save image..., and save it into your images subdirectory. Now return to Composer and choose Insert/Image..., browse to the picture file, and choose OK. See if you can work out how to place the image so that text flows around it to the right or left (double-click on the image to see layout choices).
    • NOTE: Never paste an image directly into Composer, even if it appears to work. Images are not stored "inside" an HTML document as they are inside a Word document. Your image will disappear from the page as soon as you have moved the page to the WWW host. To insert images, always use the method described above.
    • Add a table. Format some rows with background color.
    • Add lists (one bulleted, one numbered)
    • Add a link (also called a hyperlink) to the course home page on the WWW. (Select the text from which you wish to link and choose Insert/Link.... Then type or paste the URL of the page -- you can find it via the Home button at the top of this page) . Below, we discuss how to create links that are sure to work.
    • Another link to a different page, called work.html, that you create in your www directory. To make this link, again choose Insert/Link..., but this time use the Choose file... button to find work.html.
  1. View these pages as "source" to see the HTML that you've generated (View/HTML source menu, or click on the Source tab at bottom left of page). Can you find the hyperlinks? They look like <A HREF .... /A>.
  2. If you're already familiar with making WWW pages, feel free to add the features you like. This page is only for your practice; we will not use it for the course.

Publishing your pages

Now you'll move both pages to your directory on the class WWW host. When you point your browser at http://www-personal.ksu.edu/~eID/ (where eID is your eID at K-State), your home page will be loaded. Today we'll use an FTP (File Transfer Protocol) client called WinSCP to move our HTML files over the network to the remote computer that will host them. So, navigate here and follow the instructions.

That's the end of the instructions for Lab 1. You should read the material below, which will help you solve or avoid problems in WWW page construction! If you like, you can proceed to the first week's problem set.

Hyperlinks and how (to make sure) they work

Hyperlinks are the mechanism that lets you navigate around pages or retrieve documents or images by clicking on highlighted text. In Composer, you can link from a word or phrase by selecting it, then choosing menu item Insert/Link... In the dialog, you can use the Choose file button to find the file you wish to link to, or you can paste an external URL into the box.

A big problem for beginning WWW-page writers is creating hyperlinks that keep working when the pages are moved to the WWW host computer.

If you are able to publish your pages directly to the host, as some HTML editors allow you to do, this is less of a problem. But when you can't use this direct method, you need to understand how hyperlinks work.

Addressing, absolute and relative

WWW browsers like SeaMonkey or Mozilla Firefox tell a software program called a Web server to send the contents of a file so that the browser can use them to create a "page" on the screen. (If you're viewing a file on your own computer rather than a remote one, the browser serves pages to itself).

When you click on a hyperlink in this page, the server tries to find, on the computer that is running the server, the file named in the HTML code of the hyperlink. This requires it to know the file's address. There are two ways to supply this address:

Relative (local) addressing

The address of the file is given relative to the page containing the hyperlink. For example:
  • work.html refers to a file called "work.html" in the same directory as the current page.
  • Labs/Lab_1.html refers to a file called Lab_1.html in directory Labs in the same directory as this page.
  • ../2003_course/Labs/firstLab.html refers to a file in directory Labs in directory 2003_course in the directory containing the directory containing this page.
If a file is not found at the specified address, the browser posts an error message such as: 404 File not found.

Absolute (global) addressing

An absolute address consists of the full URL of a file server somewhere on the WWW, along with a file path to be used by that server to provide the requested file. For example:
http://coding.plantpath.ksu.edu/~anyStudent/www/anyPage.html
or
http://www.ncbi.nlm.nih.gov/

Which kind of addressing to use

Use absolute addressing only for files outside your WWW directory, whether on the same or different computer. Your site should be a self-contained set of pages (also called a web) that works without any changes no matter what machine is hosting it, and where on that machine's file system they are located. These pages are hyperlinked with one another with relative links. For an analogy: to get to the water fountain from my office, you turn right in the hallway and then take the first left turn. To get a drink of water, you don't need to know that Throckmorton Hall is located in Manhattan, Kansas. If Throckmorton were suddenly moved to Siberia, the directions from my office to the fountain would still work.

The directory structure with respect to all pages interconnected with relative links must be identical on both your local machine (where you develop your pages) and the host machine where the server will display them. Thus if you wish to insert an image into page www/index.html via a link to file images/anyImage.gif, and your site is to work identically on your local machine and on the remote host, you must have, on both machines, a subdirectory called images in directory www and the images subdirectory must contain a file named anyImage.gif. This may seem simple. It is! But it still seems to be the hardest thing for novice WWW publishers to understand: why their links don't work, and why their pages have things like this.
Because half of the class always has trouble with this notion of addresses, I've created these step-by-step instructions for inserting images.