src/hg/htdocs/template.html 1ebbf871037cba92f5b5d2d1dbd91957c07ea76e

1ebbf871037cba92f5b5d2d1dbd91957c07ea76e
donnak
  Fri Dec 30 01:00:55 2016 -0800
Changed a few of the style guidelines (primarily whitespace).

diff --git src/hg/htdocs/template.html src/hg/htdocs/template.html
index 7540c2e..b1f1c83 100755
--- src/hg/htdocs/template.html
+++ src/hg/htdocs/template.html
@@ -1,134 +1,131 @@
-<!DOCTYPE html>
+<!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)
+4. Indentation: Indent every child element 2 spaces
 5. Special characters: Don't use entity references (set editor to UTF-8), except < &
 -->
 
 <!-- Page header -->
 <!--#set var="TITLE" value="GB Static Page Template" -->
 <!--#include virtual="/gbPageStart.html"-->
 
 <!-- Page content -->
 <h1>Sample Genome Browser Static Page</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.
 </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>
     <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.
+    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.
     </p>
 
 <!-- Preformatted code example -->
     <p>
     Here is some code:
     </p>
 <pre><code>sudo -i
 bash browserSetup.sh install</code></pre>
 
 <!-- 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>
+      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>
+      <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>
+      as <em>chromStart=0, chromEnd=100</em>, and span the bases numbered 0-99.</li>
     </ol>
   </div>
 
 <!-- Right column -->
   <div class="col-md-6">
     <h2>Another section</h2>
     <p>
     Here is a bulleted list ('ul' and 'li' elements):
     </p>
 
 <!-- Bulleted list example -->
     <ul>
       <li>red</li>
       <li>white</li>
       <li>blue</li>
     </ul>
 
     <p>
     Here is a table ('table', 'tr', 'th', and 'td' elements):
     </p>
 
 <!-- Table example -->
     <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>
 
 <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.
 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"-->