MB620 Bioinformatics
University of New Haven
Instructor: Joel S. Bader
Class 3: HTML Basics

Introduction

This week we start to look into the info in bioinformatics: HTML and cgi's.
We'll have the following goals:

• Learn a short history of HTML and the web.
• Understand the basics of HTML.
• Write static HTML pages.
• Incorporate links and images into your pages.
• Use forms to generate dynamic HTML pages.
• Establish your own homepage.

If you want to learn more, the following are good sources:

• Database Backed Web Sites, a.k.a. How to be a Web Whore Just Like Me, by Philip Greenspun. The book is available on-line at his web site.
• HTML: The Definitive Guide and CGI Programming on the World Wide Web from O'Reilly and Associates, the best publishers of computer books.
• How to Set Up and Maintain a Web Site by Lincoln Stein.

History of the Internet

• 1960's: DOD ARPAnet (Advanced Research Projects Agency network). Information infrastructure that would survive nuclear war.
• 1970's: Xerox PARC (Palo Alto Research Center). Creators of graphical user interfaces. Significant contributions to ethernet, object-oriented programming.
• 1980's: HTML and Internet. Invented by Tim Berners-Lee while at CERN (European Center for Particle Physics), now at MIT and director of W3 Consortium. Global hypertext space. URLs (Universal Resource Locators). Standard formats: HTML (HyperText Markup Language), HTTP (HyperText Transfer Protocol).
• Early 1990s: Diffusion to other sciences. Lynx (text-based browser) and Mosaic (National Center for Supercomputer Applications). Mosaic programmers incorporate as Netscape.
• Late 1990s: Enough money to interest Bill Gates. Start of the browser wars. Web becomes part of media. Advertisement-driven. Start-ups take over the IPO market. E-commerce.

Nomenclature

• Server: computer that stores web pages, or a program that runs on a server computer and makes pages available.
• Client/Browser: computer that displays contents of pages from a server. The browser is the computer program that displays the pages.
• HTML: hypertext markup language, a standard language for pages provided over the web.
• Tags: Markup languages use tags to define how a browser should display text. Key philosophical point: document display will depend on the user's browser. Can't preformat because different browsers have different sizes, resolutions, etc. Provide information (in the form of tags) for the browser to do page layout. Advantage: HTML is great for web publishing. Disadvantage: HTML is not so great for paper publishing.
• URL: the location of a page. URLs give the name of the server and of the page. The URL shows up in the location field of a browser.
• Link or Hyperlink: point-and-click loading of a new web page. You could accomplish the same thing by typing the URL in the location field, but clicking is much faster and easier.
• Static HTML page: an HTML page that stays the same every time it is loaded. Examples are MB620 class notes, search forms.
• Dynamic HTML page: an HTML page that changes each time it is loaded, usually because it is generated by a program that accepts user input. Examples are search requests, stock quotes, web-based bioinformatics programs.
• Forms/CGI's: Forms are part of an HTML page that can accept user input. They usually have a button that passes the input to a CGI (common gateway interface). The CGI accepts the input, generates a page, and sends the dynamically generated page back to the browser.

Hello World

• Use a text-only editor. DO NOT USE A WYSIWYG EDITOR!!! (what you see is what you get) Real programmers use emacs. You can use Notepad, Wordpad, or MSWord, as long as you save as Text-Only or Text-Only with Line Breaks. DO NOT SAVE AS A WORD DOCUMENT OR AS MS-DOS TEXT!!!
• Open a new file, name it hello.html
• Contents of the file:
  hello world
• Save it and open it with a browser.
• Now write a few paragraphs and see what happens.

Tags

• Tags modify how the browser displays text.
• Tags look like this:
  

  <TAG> ... any text here ... </TAG>
  

  TAG refers to any of the tags we'll be discussing: H1-6, HR, P, TABLE, FORM, .... For readability, I'm writing tags in upper case. They are recognized by the browser whether they're upper or lower.
• Tags usually come in pairs, <TAG> and </TAG>, that enclose the text they modify.
• Sometimes the browser can understand when you omit the closing tag, sometimes it can't.

Content Tags

• Headings

  <H2> foo <\H2> 

  makes a level-2 heading.
  Headings go from 1 (largest) to 6 (smallest).
  Add a heading to your file.
• Horizontal rule
  

  <HR>

  makes a horizontal rule to separate sections.
  Don't use too many or your page will look cluttered.
  It's nice to have a heading, then a horizontal rule, then your text, then another horizontal rule.
• Paragraph breaks

  <P>

  signals the start of a new paragraph.
  It creates a line break and then extra space.
• Line breaks

  <BR>

  signals a line break.
  Unlike a paragraph, no extra space is inserted.
• Address

  <ADDRESS> foo@bar.org <\ADDRESS> 

  formats the text between the tags (here "foo@bar.org") as an address.
  Good style: always include your address at the bottom of your page.
  NB: Address gives italic text; it does NOT generate a mailto hyperlink.
  
• Here you can see how the browser displays these tags:

  <H5>Example Summarizing Content Tags</H5>
  <HR>
  I went shopping and here is what I bought:<br>
  chips<br>
  
  salsa<br>
  jalapenos.
  <p>
  I should really eat better.  Maybe I'll have a vitamin.
  <HR>
  <ADDRESS>jsbader@curagen.com</ADDRESS>
  

  Example Summarizing Content Tags

  ---

  I went shopping and here is what I bought:
  chips
  salsa
  jalapenos.

  I should really eat better. Maybe I'll have a vitamin.

  ---

  jsbader@curagen.com

More Text Markup Tags

• Bold text

  Use bold <B>sparingly</B>.

  Use bold sparingly.
• Italic text

  "Italics are used for citations." <I> J. S. Bader </I>

  "Italics are used for citations." J. S. Bader
• Typewriter font

  Typewriter font shows <TT>user input or code</TT>.

  Typewriter font shows user input or code.
• Preformated text

  <PRE> Preformatted text is displayed   (almost)   exactly as typed.</PRE>

  Preformatted text is displayed   (almost)   exactly as typed.

Formatted Lists

• The example above has a list forced by BR tags.
• HTML has several types of lists. The most basic is the unordered list.
• Unordered List

  <UL>
  <LI> First item in the list.
  <LI> Second item in the list.
  <LI> ...
  <LI> Last item in the list.
  </UL>
  

• <UL> opens the list and </UL> closes it.
• Each list item is introduced by <LI>
• Here is the example again, this time as a list.
  First the HTML:

  <A NAME=dinner>My Dinner</A><BR>
  I went shopping and here is what I bought:
  <UL>
  <LI> chips
  <LI> salsa
  <LI> jalapenos
  </UL>
  

  And now the result:

  My Dinner
  I went shopping and here is what I bought:

  • chips
  • salsa
  • jalapenos
• Note that the bullet depends on nesting.
• We'll get to the <A> tag and the NAME attribute later.

Tables

• Here is how to lay out a table:

  <TABLE>
  <TR> <TH ALIGN=LEFT> Food <TH> Rating
  <TR> <TD> Chips <TD> Good
  <TR> <TD> Chips and Salsa <TD> Better
  <TR> <TD> Chips, Salsa, and Jalapenos <TD> Best
  </TABLE>
  

  Food	Rating
  Chips	Good
  Chips and Salsa	Better
  Chips, Salsa, and Jalapenos	Best

• <TABLE> and </TABLE> enclose the table.
• <TR> starts each new row.
• <TH> gives bold table headings.
• <TD> gives table data.
• ALIGN=LEFT is an attribute. Most tags can have attributes. This particular attribute tells the browser to align the heading text to the left.

Images

• GIF and JPEG (JPG) are common image formats.
• GIF is for computer-generated images.
• JPEG is for scanned photographs.
• To download an image, right-click on it.
• Here's an example:

  <TABLE>
  <TD><IMG SRC="pig-racing.jpg" ALT="Pig Racing Image">
  <TD> Pig racing at the New Jersey State Fair 1995.  
             Flemington, New Jersey.<BR>
             <CITE>Photo courtesy of Philip Greenspun.</CITE>
  </TABLE>
  

  Here's the result:

  Pig racing at the New Jersey State Fair 1995. Flemington, New Jersey. Photo courtesy of Philip Greenspun.

• The <IMG> tag tells the browser to download an image from the server.
• The server must be able to find the image file. In this case, pig-racing.jpg must be saved in the same directory as the HTML file. It's also possible to give a complete path, even to an image on another server.
• The ALT attribute provides alternate text if the image isn't available.

Skeleton

• We've been discussing the body so far. This is the content, which is most important. But there are other tags for the skeleton.
• Here is the skeleton of an HTML page:

  <HTML>
  <TITLE> Text here appears in the browser's title bar </TITLE>
  <BODY>
  All of the body goes here.
  </BODY>
  </HTML>
  

Hyperlinks

• URL Anchors

  Now that you've learned HTML,
  you can have an 
  <A HREF="http://photo.net/philg/careers.html"> exciting career</A>
  in bioinformatics.
  

  Produces this text:
  Now that you've learned HTML, you can have an exciting career in bioinformatics.
• <A HREF=... > and </A> enclose the link.
• The HREF attribute gives the URL for another HTML page.
• The browser knows to display the link with an underline.

Hyperlinks with Relative Addresses

• Hyperlinks can refer to an address within the same page.

  Here's what I eat for <A HREF="#dinner">dinner</A>.

  Here's what I eat for dinner.
• The anchor within the page is named using the NAME attribute.
• When you put the mouse over the link, you'll see the internal URL. It should look something like
  http://www.curagen.com/mb620/class10/class10.html#dinner
  which tells you that you're in the page class10.html at the anchor named dinner.
• Hyperlinks can also refer to an address on the same server.

  Here is the <A HREF="../index.html">homepage</A> for this class.

  Here is the homepage for this class.
• The path ../ tells the browser to request a page in the directory one above the current director.
• If we want to link to a file in the same directory, the attribute is HREF="newfile.html".
• If we want to link to a file in a subdirectory, the attribute is HREF="subdirectory/newfile.html".

EMail

• Anchors can also spawn email.

  I am lonely. <A HREF="mailto:jsbader@curagen.com"> Write me.</A>
  
  

  Generates an automatic email link
  I am lonely. Write me.
• It's often good to provide an email link to yourself at the bottom of your page.

So you don't have email?

• Free email is available from a number of providers.
• Go to Yahoo and sign up for free email.
• You'll need an email account that you can reach from class in order to start setting up your own homepage today.

How to borrow gracefully

• You can always link your page to anyone else's page.
• You can always looking at someone else's page to see their formatting.
• You can sometimes borrow someone else's content. Always ask permission and give credit.
• If you see a page you like you can view and download the HTML:
  File -> Save As... to save to your computer
  View -> Page Source to see the page source in a window
  Right-click -> View Source to see the page source in a window
  
• If you want to include someone else's source, you might have to do some hacking.
  • Look for IMG tags and remove references to images that have to be loaded.
  • Look for HREF tags and change any relative links to full paths that start with http://.
  • Look for ACTION tags and change any relative links to full paths that start with http://.
  • If you're not sure how to change a relative link to a full path, click on the working link and see the URL where you land.
• Always test out links before you publish!
• Example: Search the web using AltaVista. The only real change from the form at AltaVista is to change the action URL from /cgi-bin/query to http://www.altavista.digital.com/cgi-bin/query

  <FORM name=mfrm method=GET action="http://www.altavista.digital.com/cgi-bin/query">
  <INPUT NAME=q size=38 maxlength=800 VALUE="">
  <input type=submit name=search value="Search"> using AltaVista
  </FORM>
  

  using AltaVista

Homework from Class 3 due on April 27, 1999

Your assignment is to make your own homepage.

• Go to Tripod and use their homepage center.
• Click on "Build Homepages"
• Click on the "Advanced" link
• Click on the "Click here" link to get to the sign-up page
• Sign up! You'll need a valid e-mail address. This is so they can send you junk mail.
• Click on the "free-form editor".
• Edit the home page text.
• Save as "index.html"
• To see your page, either preview or go to http://members.tripod.com/XXX, where XXX is your login name
• Build yourself a homepage.
• Your homepage must have at least ten links, one image, and one form.
• Email me the URL by class next week.

Here is the process for adding an image:

1. Get an image you like.
2. Go to tripod, log in, and go to the file manager.
3. Upload the image into your directory. I, for example, have loaded the image pig-racing.jpg into my directory.
4. Edit your homepage adding an IMG tag as follows:
   <IMG SRC="pig-racing.jpg">
   
5. Be sure to cite the source of your image!