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,117 -1,114 +1,114 @@@ <!DOCTYPE html> <!-- template.html: Example HTML for a Genome Browser static page --> <!-- Style recommendations 1. Capitalization: use only lowercase for HTML element names, attributes and values 2. Quotes: Use double quotes for attribute values 3. Whitespace: Use a new line for every block list or table element 4. Indentation: Indent every child element 2 spaces 5. Special characters: Don't use entity references (set editor to UTF-8), except < & 6. Limit lines to a maximum of 100 characters --> <!-- Page header --> -<!--#set var="TITLE" value="UCSC Genome Browser: Citing Us" --> +<!--#set var="TITLE" value="UCSC Genome Browser: Document Styles" --> <!--#set var="ROOT" value="." --> <!-- Relative paths to support mirror sites with non-standard GB docs install --> <!--#include virtual="$ROOT/inc/gbPageStart.html" --> <!-- Page content --> <h1>Sample Genome Browser Static Page (h1)</h1> <p> - 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. - </p> + included in the browser static pages.</p> <!-- Sections --> <!-- In this example, two of same size, so use 6 columns of 12 total in grid --> <div class="row"> <!-- Left column --> <div class="col-md-6"> <h2>Page section (h2)</h2> <p> 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. - </p> + classes "col-md-1" through "col-md-12". + This example contains two divs, each assigned class "col-md-6", within a + "row" div.</p> <p> - 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). - </p> + 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).</p> - <h3>Subsection (h3)</h3> + <h3>Subsection (h3)</h3> <p> - 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: - </p> + 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:</p> <h6>Titled paragraph</h6> <p> - Use the 'h6' tag at any level in the section hierarchy to precede a paragraph with a bolded title. - </p> + Use the "h6" tag at any level in the section hierarchy to precede a paragraph with a + bolded title.</p> - <h3>Lists</h3> - <p> - 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). - </p> - <dl> - <dt>Definition list</dt> - <dd> - Use the 'dl' tag to enclose the full list, then 'dt' for each item term, and 'dd' for each item definition. - </dd> - <dt>Bulleted list</dt> - Use the 'ul' (unordered list tag) to enclose the full list, then 'li' for each list item. - <dd> - <dd> - <dt>Numbered list</dt> - <dd> - Use the 'ol' (ordered list) tag to enclose the full list, then 'li' for each list item. - </dd> - - </dl> + <h3>Lists</h3> + <p> + 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).</p> + <dl> + <dt>Definition list</dt> + <dd> + Use the "dl" tag to enclose the full list, then "dt" for each item term, + and "dd" for each item definition.</dd> + <dt>Bulleted list</dt> + Use the "ul" (unordered list tag) to enclose the full list, then "li" for + each list item. + <dd> + <dd> + <dt>Numbered list</dt> + <dd> + Use the "ol" (ordered list) tag to enclose the full list, then "li" for + each list item. + </dd> + </dl> </div> <!-- Right column --> <div class="col-md-6"> <h2>Another section</h2> <!-- Subsections --> <h3>List Examples</h3> <p> - Here is a bulleted list ('ul' and 'li' elements). To suppress the 'bullet' add the - class 'gbsNoBullet' to the 'ul' tag. - </p> + Here is a bulleted list ("ul" and "li" elements). To suppress the bullet + add the class "gbsNoBullet" to the "ul" tag.</p> <!-- Bulleted list example --> <ul> <li>red</li> <li>white</li> <li>blue</li> </ul> - <p> <!-- Numbered list example --> <p> - Here is a numbered list ('ol' and 'li' elements): + Here is a numbered list ("ol" and "li" elements): </p> <ol> <li> <strong>chrom</strong> - The name of the chromosome (e.g. chr3, chrY, chr2_random) or scaffold (e.g. scaffold10671).</li> <li> <strong>chromStart</strong> - The starting position of the feature in the chromosome or scaffold. The first base in a chromosome is numbered 0.</li> <li> <strong>chromEnd</strong> - The ending position of the feature in the chromosome or scaffold. The <em>chromEnd</em> base is not included in the display of the feature. For example, the first 100 bases of a chromosome are defined as <em>chromStart=0, chromEnd=100</em>, and span the bases numbered 0-99.</li> </ol>