3ac9171ccdbaca5a487cf1d1610c1b99872770d6 kate Wed Dec 14 11:35:26 2016 -0800 Add bulleted list and table CSS. refs #18504 diff --git src/hg/htdocs/template.html src/hg/htdocs/template.html index b61bd33..2fd5ca5 100755 --- src/hg/htdocs/template.html +++ src/hg/htdocs/template.html @@ -1,58 +1,85 @@ <!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 4 (or 2 spaces) 5. Special characters: Don't use entity references (set editor to UTF-8), except < & --> <!--#include virtual="gbPageStart.html"--> <!-- Page header --> <h1>Sample Genome Browser Static Page</h1> <!-- Page content --> <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. </p> <!-- Subsections --> <!-- In this example, two of same size, so use 6 columns of 12 total in grid --> <div class="row"> <div class="col-md-6"> <h2>Page section</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. <em>The remainder of this text is just filler</em>. On June 22, 2000, UCSC and the other members of the International Human Genome Project consortium completed the first working draft of the human genome assembly, forever ensuring free public access to the genome and the information it contains. </p> </div> <div class="col-md-6"> <h2>Another section</h2> <p> + Here is a bulleted list ('ul' and 'li' elements): </p> + <ul> + <li>red</li> + <li>white</li> + <li>blue</li> + </ul> + <p> + Here is a table ('table', 'tr', 'th', and 'td' elements); + </p> + <table> + <tr> + <th>Type</th> + <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> <!--#include virtual="gbPageEnd.html"-->