eb6313f0c5045450d9e194cabe66980af417b787 Merge parents 0a3afeb e687878 kate Thu Feb 2 08:03:13 2017 -0800 Merge branch 'staticPages' of hgwdev.sdsc.edu:/data/git/kent into staticPages diff --cc src/hg/htdocs/template.html index a139029,bd2021d..8e576e4 --- src/hg/htdocs/template.html +++ src/hg/htdocs/template.html @@@ -1,184 -1,176 +1,176 @@@ - +

Sample Genome Browser Static Page (h1)

- This is a standard paragraph ('p' tag) of explanatory text. + 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. -

+ 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. -

+ 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). -

+ 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)

+

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: -

+ 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. -

+ 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. -
- -
+

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). To suppress the 'bullet' add the - class 'gbsNoBullet' to the 'ul' tag. -

+ Here is a bulleted list ("ul" and "li" elements). To suppress the bullet + add the class "gbsNoBullet" to the "ul" tag.

-

- Here is a numbered list ('ol' 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

+

Tables

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

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

Type Total
Chromosomes 261
Haplotypes 261
Unlocalized contigs 1270
-

- To horizontally center the text in each table cell, add the class 'gbsCenterText' to the table element. -

+ To horizontally center the text in each table cell, add the class "gbsCenterText" to + the table element.

-

Code

+

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. + 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" element. To right-align the image add the "gbsAlignRight" class. + The caption is a "p" element, which is assigned the "gbsCaption" class. In the special case where an image is used as a character/symbol embedded inline in - a paragraph, add the class 'gbsInlineImg' to the image tag, i.e. here's the wrench ( - - ). -

+ a paragraph, add the class "gbsInlineImg" to the image tag, i.e. here's the wrench + ().

- Genome Browser staff + Genome Browser staff

- Browser staff in native habitat. -

+ Browser staff in native habitat.