7ec21e55141ddd7e82dd28eaae5e34b214edfef8 kate Thu Jan 19 11:59:20 2017 -0800 Fix syntax err. diff --git src/hg/htdocs/template.html src/hg/htdocs/template.html index 132ee91..fed7418 100755 --- src/hg/htdocs/template.html +++ src/hg/htdocs/template.html @@ -1,168 +1,170 @@

Sample Genome Browser Static Page (h1)

This is a standard paragraph ('p' tag) of explanatory text. The next part of the page demonstrates how to create a multi-column layout using the grid layout feature of bootstrap.css, a widely used stylesheet which is now included in the browser static pages.

Page section (h2)

This is one of two subsections, formatted as equal-sized columns. The bootstrap grid contains 12 columns; column widths are specified using classes 'col-md-1' through 'col-md-12'. This example contains two divs, each assigned class 'col-md-6', within a 'row' div.

NOTE: The two columns are displayed only on wide screens. On small screens, the sections will be stacked vertically (a feature of bootstrap responsive layout).

Subsection (h3)

This is the next level, a subsection. Use an 'h3' tag for this. To structure content below this level use a list, table, or titled paragraph:

Titled paragraph

Use the 'h6' tag at any level in the section hierarchy to precede a paragraph with a bolded title.

Lists

The description of lists below is formatted as an HTML definition list. Use this format when defining terms or phrases. (You will not see this much in our current pages -- instead, this type of text was usually styled ad-hoc using 'strong' and 'br' tags).

Definition list
Use the 'dl' tag to enclose the full list, then 'dt' for each item term, and 'dd' for each item definition.
Bulleted list
Use the 'ul' (unordered list tag) to enclose the full list, then 'li' for each list item.
Numbered list
Use the 'ol' (ordered list) tag to enclose the full list, then 'li' for each list item.

Another section

List Examples

Here is a bulleted list ('ul' and 'li' elements):

Here is a numbered list ('ol' and 'li' elements):

  1. chrom - The name of the chromosome (e.g. chr3, chrY, chr2_random) or scaffold (e.g. scaffold10671).
  2. chromStart - The starting position of the feature in the chromosome or scaffold. The first base in a chromosome is numbered 0.
  3. chromEnd - The ending position of the feature in the chromosome or scaffold. The chromEnd base is not included in the display of the feature. For example, the first 100 bases of a chromosome are defined as chromStart=0, chromEnd=100, and span the bases numbered 0-99.

Tables

Here is a table ('table', 'tr', 'th', and 'td' elements):

Type Total
Chromosomes 261
Haplotypes 261
Unlocalized contigs 1270

Code

- Here is some code in a preformatted section ('pre' and 'code' tags); + Here is some code in a preformatted section ('pre' and 'code' tags):

+ 
sudo -i
 bash browserSetup.sh install

-And here is some text with a bit of code embedded (just the 'code' tag).. +And here is some text with a bit of code embedded (just the 'code' tag)..

+

Section with a picture and caption

Use the 'img' tag to include the picture file, which is typically in .jpg or .png format. Images should normally have their 'width' and 'height' attributes set in the 'img' lement. To right-align the image add the 'gbsAlignRight' class. The caption is a 'p' element, which is assigned the 'gbsCaption' class.

Genome Browser staff

Browser staff in native habitat.