Articles

Fun with HTML5

HTML 5 offers an easy start to creating interesting web pages. All it takes is:

A computer.
A web browser. I use Chrome.
A simple text editor. I use Notepad++.

HTML 5 pages start with a doctype declaration (so the browser knows how to interpret it) and includes two main sections:

Head. The head usually includes the page title and supporting information.
Body. The body usually includes the interesting content to display in the page.

Simple HTML 5 Page

To make a very simple page, just type - or copy - the text below into a file and save it as index.html.

<!DOCTYPE html>

<html>

<head>

<title>My Page Title</title>

</head>

<body>

<h3>This is a third-level heading.</h3>

Try adding more headings
or see what happens with h1 or h2 instead.

</body>

</html>

Open your browser and instead of a website, enter the path to your new index.html. For example: C:\fun_with_html5\simple\index.html:

When you hit enter, the page should appear in your browser. The title appears on the tab and the content (from the body) shows in the page.

Less Simple HTML 5 Page

There's a more interesting single page here: d3slider.html.

The page references the D3.js library which provides some nice animations. The code is available on GitHub. View the contents of the html file.

Can you find the head section?
Can you see where the page finds the D3.js code it needs?
The page uses a custom icon. Can you see where the page gets the name of the icon file?
Opening tags are usually paired with a closing tag that is the exact same except the closing tag has one extra character. What is it?

The page includes some JavaScript code that uses the D3 library.

Can you find the body section?
Can you see where the YouTube video gets included?
Can you see where the JavaScript code is written?
What tags surround the code?

Embedding Videos

YouTube makes it easy to embed a video in your web page. Just go to the video you want and select "Share", then "Embed", then copy and paste the text into your document and surround it with div tags. Don't forget to use a slash in the closing tag, e.g. </div>. :)

Learn More

A list of all HTML 5 tags is available at: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list.

If you find an interesting page, you can often right-click on the page and select "View page source" to see the code behind it.

More information on HTML 5 is available at HTML5 Rocks.

The pages you make are visible from your own computer. If you want to share, you can put the file in Dropbox and share the Dropbox folder - or you can find a place to "host" your web pages.

How To Install Blast On Windows

BLAST, the Basic Local Alignment Search Tool, one of the most widely used bioinformatics programs, provides a way for researchers to quickly search huge databases of protein and amino acid sequences.

BLAST enables access to the wealth of genetic information hosted at the National Center for Biotechnology Information (NCBI), part of the U.S. National Institutes of Health (NIH).

In addition to searching at the publicly available website, researchers can download the BLAST program and run it locally. Many free, publicly available databases can be downloaded, or researchers can create custom databases for searching and comparing local alignments.

The following steps may be helpful for installing the BLAST program locally on a Windows machine.

1. Open a browser window and go to http://ftp.ncbi.nlm.nih.gov/blast/executables/blast+/LATEST/.

2. In some browsers, you may not be able to see the full name. Click on the first file that ends in w, or right-click and select download. This should be ncbi-blast-2.2.29+-win32.exe, the 32-bit version, which should work on most Windows systems. If you know you have a 64-bit machine, you can select the one below it.

3. Save it to your Downloads folder. In Chrome, the file shows up in the lower corner of the browser window.

4. Click on the file in Chrome to run it, or use the Windows File Explorer to go to your downloads folder and click (or double-click) on the file to run it.

5. If you see the "Windows protected your PC" notice, click on "More info".

6. Then click "Run Anyway".

7. The install box will open. Click "I Agree".

8. Click "Install".

9. When installation is completed, click "Close".

10. Hold down the Windows key and hit X (Win-X) to call up the Windows menu. Hit E or select the "File Explorer" menu option, and go to:

C:\Program Files\NCBI\blast-2.2.29+\bin

11. You should see blastp, blastn, and other executable files. These are the programs that can be run "from the command line".

12. Back up to the following folder, so you can see the bin folder:

C:\Program Files\NCBI\blast-2.2.29+

13. Right-click on the bin folder and click "Open Command Window as Administrator".

14. If you don't have that option, hold down the Windows key and hit X (Win-X) and then click "Command Prompt Admin".

15. If the path shown is not the desired bin folder, type the two commands below. Hit the Enter key after each command to execute it.

cd\
cd Program Files\NCBI\blast-2.2.29+\bin

"cd" is short for "change directory" .

"cd\" takes you to the root folder of the C:\ drive.

16. Type dir and hit the Enter key to see the BLAST executable files. "dir" is short for "show directory contents".

17. From the bin folder, type the following command to make a new directory called "db" under the bin folder. This can be used to hold database and query files when working. Mkdir is short for "make directory".

mkdir db

18. More instructions on running BLAST are available in the Blast User Manual available at: http://www.ncbi.nlm.nih.gov/books/NBK1734.

Additional Genomics and Bioinformatics Links:

Bioinformatics at Kansas State University

BeetleBase (Tribolium castaneum)

International Cancer Genome Consortium (ICGC) Data Portal

document.write(ssyby);