243 lines
8.9 KiB
HTML
243 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="#theme/computhings/main.css" rel="stylesheet" type="text/css" />
|
|
<link href="theme/gnuragistes/main.css" rel="stylesheet" type="text/css" />
|
|
<link href="#theme/nomdedom/main.css" rel="stylesheet" type="text/css" />
|
|
<link rel="shortcut icon" href="" />
|
|
</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 & 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. <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> |