html-explorations/gnuragistes/index.html

242 lines
8.9 KiB
HTML

<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de la page de travail | Labo html</title>
<meta name="keywords" content="">
<meta name="description" content="" />
<meta name="robots" content="archive,index,follow" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="../dependances/fork-awesome/css/fork-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/zebras-favicon.png" />
</head>
<body>
<section id=head>
<h1>Titre principal de ma page (setction head, h1)</h1>
<h2>Titre secondaire de ma page - (section head, h2)</h2>
<h3>Titre ternaire de ma page - (section head, h3)</h3>
</section><!-- end #head -->
<hr class=title>
<nav id=menu>
<a href="#" class="button"><i class="fa fa-info"></i>Une entrée du menu avec icone</a>
<a href="#" class="button"><i class="fa fa-gnu"></i>Une entrée du menu avec icone</a>
<a href="#" class="button"><i class="fa fa-info"></i>Une entrée du menu avec icone</a>
</nav>
<nav id="menu-secondaire">
<ul>
<li>
<h3>Pages ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
<li>
<h3>Catégories ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
<li>
<h3>Blogroll ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
<li>
<h3>Social ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
<li>
<h3>Tags ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
</ul>
<section class="content">
<h1>An h1 header</h1>
<p>Paragraphs are separated by a blank line.</p>
<p>2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and <code>monospace</code>. Itemized lists
look like:</p>
<ul>
<li>this one</li>
<li>that one</li>
<li>the other one</li>
</ul>
<p>Note that --- not considering the asterisk --- the actual text
content starts at 4-columns in.</p>
<blockquote>
<p>Block quotes are
written like so.</p>
<p>They can span multiple paragraphs,
if you like.</p>
</blockquote>
<p>Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
in chapters 12--14"). Three dots ... will be converted to an ellipsis.
Unicode is supported. ☺</p>
<h2>An h2 header</h2>
<p>Here's a numbered list:</p>
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
<p>Note again how the actual text starts at 4 columns in (4 characters
from the left side). Here's a code sample:</p>
<div class="highlight"><pre><span></span><span class="err"># Let me re-iterate ...</span>
<span class="err">for i in 1 .. 10 { do-something(i) }</span>
</pre></div>
<p>As you probably guessed, indented 4 spaces. By the way, instead of
indenting the block, you can use delimited blocks, if you like:</p>
<div class="highlight"><pre><span></span><span class="err">define foobar() {</span>
<span class="err"> print "Welcome to flavor country!";</span>
<span class="err">}</span>
</pre></div>
<p>(which makes copying &amp; pasting easier). You can optionally mark the
delimited block for Pandoc to syntax highlight it:</p>
<div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">time</span>
<span class="c1"># Quick, count to ten!</span>
<span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">10</span><span class="p">):</span>
<span class="c1"># (but not *too* quick)</span>
<span class="n">time</span><span class="o">.</span><span class="n">sleep</span><span class="p">(</span><span class="mf">0.5</span><span class="p">)</span>
<span class="nb">print</span> <span class="n">i</span>
</pre></div>
<h3>An h3 header</h3>
<p>Now a nested list:</p>
<ol>
<li>
<p>First, get these ingredients:</p>
<ul>
<li>carrots</li>
<li>celery</li>
<li>lentils</li>
</ul>
</li>
<li>
<p>Boil some water.</p>
</li>
<li>
<p>Dump everything in the pot and follow
this algorithm:</p>
<div class="highlight"><pre><span></span><span class="err">find wooden spoon</span>
<span class="err">uncover pot</span>
<span class="err">stir</span>
<span class="err">cover pot</span>
<span class="err">balance wooden spoon precariously on pot handle</span>
<span class="err">wait 10 minutes</span>
<span class="err">goto first step (or shut off burner when done)</span>
</pre></div>
<p>Do not bump wooden spoon or it will fall.</p>
</li>
</ol>
<p>Notice again how text always lines up on 4-space indents (including
that last line which continues item 3 above).</p>
<p>Here's a link to <a href="http://foo.bar">a website</a>, to a <a href="local-doc.html">local
doc</a>, and to a <a href="#an-h2-header">section heading in the current
doc</a>. Here's a footnote <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup>.</p>
<p>Tables can look like this:</p>
<p>size material color</p>
<hr>
<p>9 leather brown
10 hemp canvas natural
11 glass transparent</p>
<p>Table: Shoes, their sizes, and what they're made of</p>
<p>(The above is the caption for the table.) Pandoc also supports
multi-line tables:</p>
<hr>
<p>keyword text</p>
<hr>
<p>red Sunsets, apples, and
other red or reddish
things.</p>
<p>green Leaves, grass, frogs
and other things it's
not easy being.</p>
<hr>
<p>A horizontal rule follows.</p>
<hr>
<p>Here's a definition list:</p>
<dl>
<dt>apples</dt>
<dd>
<dl>
<dt>Good for making applesauce.</dt>
<dt>oranges</dt>
<dd>
<dl>
<dt>Citrus!</dt>
<dt>tomatoes</dt>
<dd>There's no "e" in tomatoe.</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
<p>Again, text is indented 4 spaces. (Put a blank line between each
term/definition pair to spread things out more.)</p>
<p>Here's a "line block":</p>
<p>| Line one
| Line too
| Line tree</p>
<p>and images can be specified like so:</p>
<p><img alt="example image" src="example-image.jpg" title="An exemplary image"></p>
<p>Inline math equations go in like so: $\omega = d\phi / dt$. Display
math should get its own line and be put in in double-dollarsigns:</p>
<p>$$I = \int \rho R^{2} dV$$</p>
<p>And note that you can backslash-escape any punctuation characters
which you wish to be displayed literally, ex.: `foo`, *bar*, etc.</p>
<div class="footnote">
<hr>
<ol>
<li id="fn:1">
<p>Footnote text goes here.&nbsp;<a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text"></a>
</section><!-- end #content -->
<section id="footer">
<p>Proudly powered by <a href="#">rien du tout</a>, avec la participation de <a href="#">python</a>.
</section><!-- end #footer -->
</body>
</html>