a2692a7799de04e9bbb9cbb9802661be9eb9cfd1 kate Thu Jan 19 11:34:38 2017 -0800 Reorg template page. refs #18504 diff --git src/hg/htdocs/template.html src/hg/htdocs/template.html index 1183c08..132ee91 100755 --- src/hg/htdocs/template.html +++ src/hg/htdocs/template.html @@ -1,94 +1,104 @@ <!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="GB Static Page Template" --> <!--#include virtual="/gbPageStart.html"--> <!-- Page content --> -<h1>Sample Genome Browser Static Page</h1> +<h1>Sample Genome Browser Static Page (h1)</h1> <p> -This is a standard paragraph ('p' element) of explanatory text. -<em>The remainder of this text is just filler</em>. - -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: <a href="index.html" target=_blank>http://genome.ucsc.edu/</a>. -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 <strong>not</strong> 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. </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>Page section (h2)</h2> <p> - 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. </p> <p> - NOTE: The two columns will only appear on wider screens. On small screens, the sections will be + 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> -<!-- Preformatted code example --> + + <h3>Subsection (h3)</h3> <p> - 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: </p> -<pre><code>sudo -i -bash browserSetup.sh install</code></pre> + <h6>Titled paragraph</h6> <p> -And <span>here</span> is some text with a <code>bit of code</code> embedded. + 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> </div> <!-- Right column --> <div class="col-md-6"> <h2>Another section</h2> <!-- Subsections --> - <p> - Here are two subsections. - </p> - <h3>Lists</h3> + <h3>List Examples</h3> <p> Here is a bulleted list ('ul' and 'li' elements): </p> <!-- Bulleted list example --> - <ul> + <ul class="gbsNoBullet"> <li>red</li> <li>white</li> <li>blue</li> </ul> <!-- Numbered list example --> <p> 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 @@ -112,35 +122,47 @@ <th>Total</th> </tr> <tr> <td>Chromosomes</td> <td>261</td> </tr> <tr> <td>Haplotypes</td> <td>261</td> </tr> <tr> <td>Unlocalized contigs</td> <td>1270</td> </tr> </table> - </div> -</div> + +<!-- Preformatted code example --> + <h3>Code</h3> + <p> + Here is some code in a preformatted section ('pre' and 'code' tags); + </p> +<pre><code>sudo -i +bash browserSetup.sh install</code></pre> + +<p> +And <span>here</span> is some text with a <code>bit of code</code> embedded (just the 'code' tag).. +</p> + </div> <!-- end column --> +</div> <!-- end row --> <h2>Section with a picture and caption</h2> <p> 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. </p> <div class="row"> <div class="col-md-12"> <img src= "images/gbstaff16.jpg" width=499 height=299 alt="Genome Browser staff"> <p class="gbsCaption"> Browser staff in native habitat. </p> </div> </div> <!--#include virtual="/gbPageEnd.html"-->