73c5d1a5856c34c7d01f126fdc656d5f35084852 Merge parents b186692 47fe642 kate Mon Jan 23 12:08:13 2017 -0800 Merge branch 'staticPg-inc-rel' into staticPages diff --cc src/hg/htdocs/template.html index 807fd17,9f2ce31..e743481 --- src/hg/htdocs/template.html +++ src/hg/htdocs/template.html @@@ -1,172 -1,142 +1,183 @@@ - - + + + + + + + + -

Sample Genome Browser Static Page

+

Sample Genome Browser Static Page (h1)

-This is a standard paragraph ('p' element) of explanatory text. -The remainder of this text is just filler. - -Follow these citation guidelines when using applications from the Genome Browser -tool suite or data from the UCSC Genome Browser database in a research work that will -be published in a journal or on the Internet. -In addition to the relevant paper, please include a reference to the Genome Browser -website in your manuscript: http://genome.ucsc.edu/. -Be sure to mention the release date of the genome assembly used in your work to faciliate -the examination of your data by reviewers and the readers. -Please do not include references to our development servers -(such as genome-test.cse.ucsc.edu) in published links or URLs. +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

+

Page section (h2)

- This is one of two subsections, formatted as equal-sized columns via the grid layout feature of - bootstrap.css, a commonly used style sheet. - The 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. + 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)

- Here is some code: + 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:

-
sudo -i
 -bash browserSetup.sh install
+ +
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). To suppress the 'bullet' add the + class 'gbsNoBullet' to the 'ul' tag. +

+ + +

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

Another section

-

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

- - - +

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

+ +
sudo -i
 +bash browserSetup.sh install
+ +

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

- + + + + + +