f1008424042a846350a8dc3d06063f48afe32ae1
donnak
  Thu Feb 2 00:38:02 2017 -0800
Made a few cosmetic changes to page format to show the coding style we want to use. HTML-encoded the quotes. Refs #18504

diff --git src/hg/htdocs/template.html src/hg/htdocs/template.html
index bcaec06..bd2021d 100755
--- src/hg/htdocs/template.html
+++ src/hg/htdocs/template.html
@@ -9,176 +9,168 @@
 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="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 (&quot;p&quot; 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 &quot;col-md-1&quot; through &quot;col-md-12&quot;. 
+    This example contains two divs, each assigned class &quot;col-md-6&quot;, within a 
+    &quot;row&quot; 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>
     <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 &quot;h3&quot; 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 &quot;h6&quot; 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>
+    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 &quot;strong&quot; and &quot;br&quot; 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>
+      Use the &quot;dl&quot; tag to enclose the full list, then &quot;dt&quot; for each item term, 
+      and &quot;dd&quot; 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.
+      Use the &quot;ul&quot; (unordered list tag) to enclose the full list, then &quot;li&quot; 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.
+      Use the &quot;ol&quot; (ordered list) tag to enclose the full list, then &quot;li&quot; 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 (&quot;ul&quot; and &quot;li&quot; elements). To suppress the bullet
+        add the class &quot;gbsNoBullet&quot; to the &quot;ul&quot; 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 (&quot;ol&quot; and &quot;li&quot; 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>
 
     <h3>Tables</h3>
     <p>
-    Here is a table ('table', 'tr', 'th', and 'td' elements):
-    </p>
+    Here is a table (&quot;table&quot;, &quot;tr&quot;, &quot;th&quot;, and &quot;td&quot; 
+    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>
-
     <p>
-    To horizontally center the text in each table cell, add the class 'gbsCenterText' to the table element.
-    </p>
+    To horizontally center the text in each table cell, add the class &quot;gbsCenterText&quot; to 
+    the table element.</p>
 
 <!-- Preformatted code example -->
     <h3>Code</h3>
     <p>
-    Here is some code in a preformatted section ('pre' and 'code' tags):
-    </p>
+    Here is some code in a preformatted section (&quot;pre&quot; and &quot;code&quot; tags):</p>
 
 <pre><code>sudo -i
 bash browserSetup.sh install</code></pre>
 
     <p>
-And here is some text with a <code>bit of code</code> embedded (just the 'code' tag)..
-</p>
+    And here is some text with a <code>bit of code</code> embedded (just the &quot;code&quot; 
+    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' lement.
-To right-align the image add the 'gbsAlignRight' class.
-The caption is a 'p' element, which is assigned the 'gbsCaption' class.
+Use the &quot;img&quot; tag to include the picture file, which is typically in .jpg or .png format.
+Images should normally have their &quot;width&quot; and &quot;height' attributes set in the
+&quot;img&quot; element. To right-align the image add the &quot;gbsAlignRight&quot; class.
+The caption is a &quot;p&quot; element, which is assigned the &quot;gbsCaption&quot; class.
 In the special case where an image is used as a character/symbol embedded inline in
-a paragraph, add the class 'gbsInlineImg' to the image tag, i.e. here's the wrench (
-<img class="gbsInlineImg" src="images/wrench.png">
-).
-</p>
+a paragraph, add the class &quot;gbsInlineImg&quot; to the image tag, i.e. here's the wrench 
+(<img class="gbsInlineImg" src="images/wrench.png">).</p>
 <div class="row">
   <div class="col-md-12">
-      <img src= "images/gbstaff16.jpg" width=499 height=299 alt="Genome Browser staff">
+    <img src="images/gbstaff16.jpg" alt="Genome Browser staff" width="499" height="299"> 
     <p class="gbsCaption">
-    Browser staff in native habitat.
-    </p>
+    Browser staff in native habitat.</p>
   </div>
 </div>
 
 <!--#include virtual="$ROOT/inc/gbPageEnd.html" -->