previous  page PLNT4610/PLNT7690 Bioinformatics
Lecture 2, part 2 of 3
next page

B. Making a Web site: HTML

1. Web browsers render text and graphics specified by HTML tags.

A web browser is simply a program that reads a file in HTML (Hypertext Markup Language) and renders HTML code as text and graphics. It can also display pages referred to in hypertext links. Thus, pages displayed in a browser can be from files that are on your local computer, or files on some remote host anywhere on the Internet.

HTML is very simple. Here is the HTML code for a simple web page:
<html>
<head>
<title>A simple web page</title>
</head>
<body>
<i>The link below will take you to the U. of M. Home Page:</i><br>
<a href="http://www.umanitoba.ca">Click here</a>
</body>

</html>

Click here to see the page generated by the above HTML code.

green - HTML tags
black - text that appears on the web page
blue - text displayed for a hypertext link
red - URL that the browser goes to when you click on the hyperlink.

HTML consists of sections of text, enclosed in tags. With a few exceptions such as <br>, every section is enclosed between a begin tag and an end tag. For example, <i> tells the browser to begin using italics, and </i> tells the browser to stop using italics.

Try it out:

Type in the HTML code above using a text editor such as nedit or gedit and save with the name 'simplepage.html'. You can see this page in your web browser by choosing File --> Open. and choosing 'simplepage.html'.


A good place to learn HTML is at [http://www.w3schools.com/html/default.asp]

2. Web pages can be created using

3. Web servers send HTML and graphics files requested by remote browsers.

So far, we have only only dealt with details necessary to make a Web page. However, Web servers are necessary to make Web pages accessible to the world. As illustrated in the figure, hypertext links hold a URL (Universal Resource Locator), the address of a web page somewhere on the Internet. Clicking on a link causes the Web browser to send a request to the remote server specified in the URL. On the remote server, a program called an http daemon runs continuously, waiting for requests, and sending back  the requested HTML file, along with any graphics files specified in the HTML file. When the browser receives these files, it displays the text and graphics specified by the HTML it receives.

One point to make is that when you view a Web page, there is no persistant connection to the remote server. The page is temporarily stored on your local computer while you view it. All the remote server does is to send files when requested. This feature of the Web keeps it reliable and saves network bandwidth.

3. URLs - Universal Resource Locators

Most URLs are addresses to a file located on a web server. The URL for this page is

http://home.cc.umanitoba.ca/~frist/PLNT7690/lec02/lec02.2.html

The components of the URL are explained in the table below:

http:// Tells the browser to send a request to the web server using the http protocol.
home.cc.umanitoba.ca The name of the remote server
~frist The web directory (folder) for user 'frist'. On most Linux/Unix systems, this is a directory called 'public_html'.
PLNT7690/lec02/ The sub-directory (folder) in which to search
lec02.2.html The file to be displayed in the web browser

http vs. https - Toward  a more secure Web

For many years, standard protocols such as Secure Sockets have been used to encrypt traffic between web browsers and web servers. Sites meant to be publicly viewable, with no transfer of sensitive information, will have URLs beginning with "http". Where encryption is needed, such as with banking sites, URLs will begin with "https", which instructs browsers and servers to send information in encrypted form.

An increasing number of web service providers, governments, businesses, and institutions are migrating toward an "https"-only web. The goal is that ALL web sites and web browsers will require identification of web sites using a trusted certificate, and that all web traffic will be encrypted. The rationale is that these steps will make the Internet more secure, and make it more difficult for malicious web sites to trick users into giving out sensitive information.

As of this writing, a number of important players relevant to bioinformatics are aggressively pushing for the change to https. In particular, the National Center for Biotechnology Information (NCBI) shifted to using https only on September 30, 2016, as part of a larger US federal government initiative. As well, the developers of the Mozilla Firefox browser are gradually implementing an increasingly strict enforcement of the use of https, with each new release.

Practical consequences:
  • Some web browsers, particularly Firefox and Seamonkey, may prevent you from visiting certain web sites whose identities cannot be verified. These sites may be perfectly legitimate, but will not have been upgraded for secure verification.
  • In some cases, if you type in an http URL, you wil be redirected to an https URL eg. http://www.mozilla.org.
  • If you try to navigate from a secure page to an insecure page, your browser may not permit you to do so. In those cases, you might be able to get to the insecure page simply by removing the "s" from https in the location bar of the browser, and reloading the page.
  • Some web services may not work. Scientific software often retrieves data from web-based sources. If these sources require https, the software will not work until it is revised to utilize https.



C. Tutorial: Creating a personal Web site

The goal is to create a set of web pages to organize your course materials, including your assignments. That is done by creating a set of directories (folders), and html files to put into them. To illustrate, let's take a look at the directory structure for PLNT7690 students:

Your public_html directory contains the files index.html and UMlogo.gif, plus the PLNT7690 directory. UMLogo.gif is displayed in index.html, so it is placed in this directory. index.html has a link to PLNT7690/PLNT7690.html, so all files related to PLNT7690.html are kept in the PLNT7690 directory. PLNT7690.html has links to each assignment and to the presentation. There is a separate directory for each assignment (eg. as1 for assignment 1) and for the presentation.

 Important: All files for a given web page in the same directory.

Note: The right slash (/) is used to indicate a directory.
public_html/
   index.html
   PLNT7690/
     as1/
     as2/
     as3/
     as4/

 PLNT7690.html
          UMlogo.gif


We'll go through the next steps as a demonstration first, and then people can try it for themselves.



IF YOU ALREADY HAVE A PERSONAL WEB PAGE ON THE U. OF M. SYSTEM (http://home.cc.umanitoba.ca/~userid) skip steps 1-3. Instead make a link in your public_html/index.html file to 'PLNT7690/PLNT7690.html', and then do steps 4 and 5.

1. Make your home directory world searchable


cd
{make sure you're in your $HOME directory}
chmod a+x ~ {make your $HOME directory world-searchable}

2.  Create a directory for your personal Web site:

mkdir public_html      {create new directory}
chmod a+rx public_html {make it world readable/searchable}
ls -l {verify file permissions}
drwxr-xr-x 11 frist drr 1024 Jan 8 22:22 public_html/

3. Personalize your template page using Seamonkey Composer

For this tutorial, we will be using the Seamonkey Web Browser. Choose Applications --> Internet --> Seamonkey, and then click on the following link.

Open up the template Home page

File --> Edit Page

Seamonkey will bring up the current page in a Composer window.

File --> Save As:     public_html/index.html

In a terminal window, do the following:

cd public_html   {move into public_html}
chmod a+r * {make all files world-readable}
ls -l {verify file permissions}
-rw-r--r-- 1 frist drr 1261 Jan 10 15:00 index.html
-rw-r--r-- 1 frist drr 2150 Jan 12 2002 UMlogo.gif

Now, you can edit your home page, index.html. Composer works exactly like a word processor.

Fill in personal information. This includes changing the title of the Web page, shown in the header bar at the top of the Composer Window, using Format --> Page Title and Properties

For the email address, backspace over 'userid' and type your Unix userid. Also, change the link by clicking the right mouse button over the email address and choosing Link Properties. Again, change 'userid' to your Unix userid.

Fill in your department, and look through the U. of M. Web site to find the correct URL for your departmental site. Fill in that URL by clicking the right mouse button over this link and choosing Link Properties.

If you are registered in PLNT4610:

  1. Delete the link that says PLNT7690 Bioinformatics - Course materials
  2. Make sure the link that reads "PLNT4610 - Course materials" is set correctly. Highlight the link, and hold down the right mouse button and choose Link Properties. The white box that says "Link to" should contain "PLNT4610/PLNT4610.html". If it does not, replace whatever was there.

If you are registered in PLNT7690:

  1. Delete the link that says PLNT4610 Bioinformatics - Course materials
  2. Make sure the link that reads "PLNT7690 Bioinformatics/ - Course materials" is set correctly. Highlight the link, and hold down the right mouse button and choose Link Properties. The white box that says "Link to" should contain "PLNT7690/PLNT7690.html". If it does not, replace whatever was there.

File --> Save
File --> Close

Test your HOME page

Point your web browser to http://home.cc.umanitoba.ca/~userid

where userid is your Unix user name. If it doesn't appear, there are several possible reasons:

4. Make a page for course materials
This page will be a place for posting finished course assignments and other materials to your web site.
You should still be in $HOME/public_html.

If you are registered in PLNT4610:

mkdir PLNT4610        {create directory}
chmod a+rx PLNT4610 {make it world readable/searchable}
ls -l {verify file permissions}
drwxr-xr-x 2 frist drr 512 Jan 10 12:46 PLNT4610/

In Seamonkey,

Open up the template Web page

File --> Edit Page

File --> Save As:     public_html/PLNT4610/PLNT4610.html

In a terminal window, do the following:

cd PLNT4610    {move into PLNT4610}
chmod a+r * {make all files in this directory world-readable}
ls -l {verify file permissions}
-rw-r--r-- 1 frist drr 734 Jan 10 12:46 PLNT4610.html
Fill in personal information. This includes changing the title of the Web page, shown in the header bar at the top of the Composer Window, using Format --> Page Title and Properties

If you are registered in PLNT7690:

mkdir PLNT7690        {create directory}
chmod a+rx PLNT7690 {make it world readable/searchable}
ls -l {verify file permissions}
drwxr-xr-x 2 frist drr 512 Jan 10 12:46 PLNT7690/

In Seamonkey,

Open up the template Web page

File --> Edit Page

File --> Save As:     public_html/PLNT7690/PLNT7690.html

In a terminal window, do the following:

cd PLNT7690    {move into PLNT7690}
chmod a+r * {make all files in this directory world-readable}
ls -l {verify file permissions}
-rw-r--r-- 1 frist drr 734 Jan 10 12:46 PLNT7690.html

Fill in personal information. This includes changing the title of the Web page, shown in the header bar at the top of the Composer Window, using Format --> Page Title and Properties

IMPORTANT

For all further work on your web site, do NOT use File --> Edit Page to open web pages. This often creates problems with links to graphics or other pages.

Instead, use Window --> Composer to open a Composer Window, and then Open or File --> Open to open the file for editing.


5. Check all the links

Test all the links on each web page to make sure you can open each Web page.

The three most common errors:

You should now be able to access your Home page by searching for your name on the
U. of M. Web site  [http://home.cc.umanitoba.ca ]   under Search UMinfo Students or Staff.

The URL for your web site is http://home.cc.umanitoba.ca/~userid

Note: It would be just as correct to list your URL as http://home.cc.umanitoba.ca/~userid/index.html. The web server defaults to the public_html directory in the home directory for userid. Any user's home directory in Unix can be abbreviated as ~userid. (The tilda ( '~' ) is found on the upper left hand corner of your keyboard, usually below the ESC key. ) Also, if no file is given, httpd searches for a file called index.html. 

6. Viewing your changes: remember to press "Reload"

When you make changes in an HTML file, you can't see those changes until you press the Reload button in your web browser. So as you edit a page, it is usually a good idea to have the page open in both the Composer and the web browser, so that you can keep seeing the new content as you edit.

Caching can sometimes prevent changes from being seen. To speed up web browsing, web browsers typically store text and graphics from pages you have recently visited in a directory referred to as a cache. In some cases, the next time you start your browser and visit a page, you will be seeing the page as it was the last time you visited. This usually makes no difference, but if you have recently edited a page (say, an assignment), you may need to press Reload to see the current version. If that doesn't work, you may need to clear the cache. In Firefox, this is done by going to Preferences --> Advanced, Cached Web Content, and clicking on the Clear Now button.


Unless otherwise cited or referenced, all content on this page is licensed under the Creative Commons License Attribution Share-Alike 2.5 Canada

 
previous  page PLNT4610/PLNT7690 Bioinformatics
Lecture 2, part 2 of 3
next page