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 ("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> <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> + 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> + 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. + 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. + 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> <h3>Tables</h3> <p> - Here is a table ('table', 'tr', 'th', and 'td' elements): - </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> - <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 "gbsCenterText" 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 ("pre" and "code" 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 "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' lement. -To right-align the image add the 'gbsAlignRight' class. -The caption is a 'p' element, which is assigned the 'gbsCaption' class. +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" element. To right-align the image add the "gbsAlignRight" class. +The caption is a "p" element, which is assigned the "gbsCaption" 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 "gbsInlineImg" 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" -->