MB620 Bioinformatics at University of New Haven

MB620 Bioinformatics
University of New Haven
Instructor: Joel S. Bader
Class 4: HTML Forms

Agenda

Forms
Linking out: directories, files
Linking in: named anchors
Odds and ends: formatting, special characters

Homework Comments

The homework due last week was to perform analyses using a bioinformatics server (CuraTools).
Database searches for bioinformatics are like database searches for other info.
What do you do when a query returns too many results?
For future assignments, only keep information that you would reasonably use.

Forms, Part 1: URL input

Forms are used to provide input to server-side programs.
The simplest way to provide input is to pass it through the URL.
Think of a query you run often, save the URL, then make it an HREF
The format looks like this:

http://server/program?param1=value1&param2=value2

This type of URL is often the result of a GET form.
Add a URL query to your homepage. Here's an example.

Go to NASDAQ, www.nasdaq.com
Look up a stock, for example Amazon (AMZN). Hitting the button submits a GET form to the server. The input is encoded in the URL that is generated.

Grab the URL for the page that is generated:

http://www.nasdaq.com/asp/quotes_multi.asp?mode=Stock&symbol=AMZN

Parsing:
http://www.nasdaq.com/ is the server
asp/ is the directory where application services are provided
quotes_multi.asp is a program that looks up the quotes
? indicates that the input to the program follows
mode is the first parameter, Stock is its value
; separates parameters
symbol is the second parameter, AMZN is its value
What is the output of quotes_multi.asp?

Now use the URL as the HREF for a link and call on Nasdaq to generate a stock quote:
Amazon stock quote

Odds and Ends: Pop-Up Windows

What if you want to keep your window and pop-up a new window?
The A tag can take a TARGET attribute:

<A HREF="http://www.yahoo.com/" TARGET="new_window">Yahoo</A>

loads Yahoo in a new window named "new_window"
Yahoo
What happens if you make "new_window" the target of another link?
How would you get more windows?

Odds and Ends: Special Characters

You know that < starts a tag and > ends a tag.
But what would happen if you had a < in your document?
How does the browser know what to do?

Common Codes

< <
> >
[non-breaking space]  
& &

Changing fonts

<tt>Typewriter font</tt>

<pre> Pre-Formatted font  (exactly as typed)</pre>

Forms, Part 2: GET forms

As we've seen before, GET forms encode the user input as part of the URL
Here is an example from the search engine www.altavista.com
Go to altavista, view the page source, and copy the form into a web page.
Be careful: the form is contained in a table. We have to grab the table too.
Let's step through the form and see what each line does.
New tags:

FORM starts the form body and takes attributes name, method, action.
method is GET or POST
action is the program that takes the input
SELECT starts a selection list.
OPTION lists each selectable option. The VALUE is passed as input to the program. The text after the tag is displayed: irrelevant to the program, but essential for the user!
INPUT accepts user input and takes a TYPE attribute
TYPE=text is a text field
TYPE=checkbox is a checkbox
TYPE=radio are radio buttons
TYPE=submit is a button to click to submit the form

Ask AltaVista^TM a question. Or enter a few words in Help - Advanced

Example: What hotels are in Wilmington, DE?

It almost works, but not quite: we have to do some debugging!
Here's a working version that pops up the result in a new window:

Ask AltaVista^TM a question. Or enter a few words in Help - Advanced

Example: What hotels are in Wilmington, DE?

What happens in the GET URL when the query has spaces, semicolons, etc.?

Odds and Ends: More Special Characters

We've seen these special characters:
: / // # .
What happens if you want a space in a URL? Or another special character?
Solution: hex-code. %20 is a space. Don't have to worry about remembering, but do be aware that complicated URLs with lots of % characters are just encoding special characters.

Forms, Part 3: POST

What happens when you're passing a lot of text as a query?
The URL can run out of room, special characters can become a bother, etc.
POST forms are written just like GET forms.
But when you submit with a POST form, the input goes directly to the server. It does not get tacked onto the URL, it does not collect $200.

Here is an example from the International Movie Database:

Search for title/name:

Title Name

more search options

That's all for forms for now.

Directories

Directories = folders
Organization
Typical directories

img image files
cgi-bin executables (CGIs) to generate on-the-fly pages
home directory your top-level directory, where you go automatically, abbreviated as ~ or ~/.

Making a new directory

Log into your web page
Use the file manager to make a directory called "bioinf" or "bioinformatics" or whatever you like

If you point a web browser to this directory, what will you see and why?

Files

Make a link from one file to another file

Edit ~/index.html, add a link to "resume.html"
```
<A HREF="resume.html">My resume</A>
```
Point the browser to the link. What happens?
Go to the file manager, create ~/resume.html.
Try the link again. What happens?
Add some content to resume.html and include a link back to your homepage.
What should the link look like?

Fancy Links

Order of fanciness:

Text-only (what we've done so far)
Icons (we'll do this next)
Static image maps (you can read about this)
Active images (java)

Making an icon link

Open a drawing program
Make a picture of a house
Upload the picture to your home directory as "home.gif"
Go into "resume.html", add the home icon as a link
How should you do this?

Linking inside a document

Most useful: table of contents for a long document.
Example: link to separate parts of a tool list.
At top of document:

<A HREF="#education">Education</A>
<A HREF="#employment">Employment</A>
<A HREF="#references">References</A>

Then later in the document:

<H4> <A NAME="education">Education</A> </H4>
Spring 1999, University of New Haven, Bioinformatics (MB620)

Here is how it should look (and work!)

Education

Spring 1999, University of New Haven, Bioinformatics (MB620)

Does it matter that the NAME parameter and the heading are similar?

How would you link directly from your homepage to the education section of your resume? Try it.
Note the hash-mark in the URL. This always indicates a

Linking between directories

Go into your bioinformatics directory and create index.html (if it doesn't yet exist).
Link from your homepage to "bioinf/index.html"
Now edit index.html and add a link back to your homepage
A note on formatting. The DIV tag is useful for DIViding portions of your document. The tag takes an ALIGN attribute equal to LEFT, CENTER, or RIGHT. Here is an example using the DIV tag to create a right-justified navigation bar.
[Home]
See how nice that looks? Take a look at the source.
The P tag also can take an ALIGN attribute.
Now that you've looked at the source, what does ../index.html mean?
HREFs that start with http:// are absolute. HREFs that start with a filename are relative. What's the benefit of both?

Week 5 Homework

Add a bioinformatics folder to your homepage.
Add links between your homepage and your bioinformatics page.
Put three working forms into your pages. The one's shown here don't count!
Print out the pages showing the forms.

MB620 Bioinformatics University of New Haven Instructor: Joel S. Bader Class 4: HTML Forms