556 lines
19 KiB
HTML
556 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html class="no-js" dir="ltr" lang="fr">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1." />
|
|
<title>Flojo HTML - Kit de départ pour site web</title>
|
|
|
|
<script>
|
|
if (document.documentElement) {
|
|
document.documentElement.className = 'js';
|
|
}
|
|
</script>
|
|
|
|
<link
|
|
href="/base.css"
|
|
rel="stylesheet"
|
|
type="text/css" />
|
|
|
|
<meta name="robots" content="index, follow" />
|
|
<meta name="author" content="le Morse" />
|
|
<link href="/humans.txt" rel="author" type="text/plain" />
|
|
<link href="/favicon.ico" rel="icon" type="image/x-icon" />
|
|
</head>
|
|
|
|
<body>
|
|
<header id="h">
|
|
<h1>Flojo HTML</h1>
|
|
|
|
<p>Ceci est un petit kit de départ, pour avoir les bases d'un
|
|
site HTML dans les règles de l'art (sémantique, accessible,
|
|
frugale).</p>
|
|
</header>
|
|
|
|
<hr/>
|
|
|
|
<nav aria-label="Table des matières de cette page">
|
|
<ul role="list">
|
|
<li>
|
|
<a href="#text">Éléments textuels</a>
|
|
<ul>
|
|
<li><a href="#text__headings">Les titres</a></li>
|
|
<li><a href="#text__paragraphs">Paragraphes</a></li>
|
|
<li><a href="#text__lists">Les listes</a></li>
|
|
<li><a href="#text__blockquotes">Bloc de citation</a></li>
|
|
<li><a href="#text__details">Détails / Résumé</a></li>
|
|
<li><a href="#text__address">Bloc d'adresse</a></li>
|
|
<li><a href="#text__hr">Ligne horizontale</a></li>
|
|
<li><a href="#text__tables">Données tabulaires</a></li>
|
|
<li><a href="#text__code">Code</a></li>
|
|
<li><a href="#text__inline">Inline elements</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="#embedded">Embedded content</a>
|
|
<ul>
|
|
<li><a href="#embedded__images">Images</a></li>
|
|
<li><a href="#embedded__audio">Audio</a></li>
|
|
<li><a href="#embedded__video">Video</a></li>
|
|
<li><a href="#embedded__meter">Meter</a></li>
|
|
<li><a href="#embedded__progress">Progress</a></li>
|
|
<li><a href="#embedded__svg">Inline SVG</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="#forms">Form elements</a>
|
|
<ul>
|
|
<li><a href="#forms__input">Input fields</a></li>
|
|
<li><a href="#forms__select">Select menus</a></li>
|
|
<li><a href="#forms__checkbox">Checkboxes</a></li>
|
|
<li><a href="#forms__radio">Radio buttons</a></li>
|
|
<li><a href="#forms__textareas">Textareas</a></li>
|
|
<li><a href="#forms__html5">HTML5 inputs</a></li>
|
|
<li><a href="#forms__action">Action buttons</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<main>
|
|
<h2 id="text">Éléments textuels</h2>
|
|
<article id="text__headings">
|
|
<h3>Les titres</h3>
|
|
|
|
<h1>Heading 1</h1>
|
|
<h2>Heading 2</h2>
|
|
<h3>Heading 3</h3>
|
|
<h4>Heading 4</h4>
|
|
<h5>Heading 5</h5>
|
|
<h6>Heading 6</h6>
|
|
|
|
<p><a href="#h">[Haut]</a></p>
|
|
</article>
|
|
|
|
<article id="text__paragraphs">
|
|
<h3>Paragraphes</h3>
|
|
|
|
<p>A paragraph (from the Greek paragraphos, “to write beside”
|
|
or “written beside”) is a self-contained unit of a discourse
|
|
in writing dealing with a particular point or idea. A
|
|
paragraph consists of one or more sentences. Though not
|
|
required by the syntax of any language, paragraphs are usually
|
|
an expected part of formal writing, used to organize longer
|
|
prose.</p>
|
|
<p><a href="#h">[Haut]</a></p>
|
|
</article>
|
|
|
|
<article id="text__blockquotes">
|
|
<h3>Bloc de citation</h3>
|
|
<div>
|
|
<blockquote>
|
|
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
|
|
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
|
|
<cite><a href="#!">Said no one, ever.</a></cite>
|
|
</blockquote>
|
|
</div>
|
|
<p><a href="#h">[Haut]</a></p></footer>
|
|
</article>
|
|
|
|
<article id="text__lists">
|
|
<h3>Les listes</h3>
|
|
|
|
<h4>Liste de définition</h4>
|
|
|
|
<dl>
|
|
<dt>Definition List Title</dt>
|
|
<dd>This is a definition list division.</dd>
|
|
</dl>
|
|
|
|
<h4>Liste Ordonnée</h4>
|
|
|
|
<ol type="1">
|
|
<li>List Item 1</li>
|
|
<li>
|
|
List Item 2
|
|
<ol type="A">
|
|
<li>List Item 1</li>
|
|
<li>
|
|
List Item 2
|
|
<ol type="a">
|
|
<li>List Item 1</li>
|
|
<li>
|
|
List Item 2
|
|
<ol type="I">
|
|
<li>List Item 1</li>
|
|
<li>
|
|
List Item 2
|
|
<ol type="i">
|
|
<li>List Item 1</li>
|
|
<li>List Item 2</li>
|
|
<li>List Item 3</li>
|
|
</ol>
|
|
</li>
|
|
<li>List Item 3</li>
|
|
</ol>
|
|
</li>
|
|
<li>List Item 3</li>
|
|
</ol>
|
|
</li>
|
|
<li>List Item 3</li>
|
|
</ol>
|
|
</li>
|
|
<li>List Item 3</li>
|
|
</ol>
|
|
|
|
<h4>Liste à puces</h4>
|
|
|
|
<ul>
|
|
<li>List Item 1</li>
|
|
<li>
|
|
List Item 2
|
|
<ul>
|
|
<li>List Item 1</li>
|
|
<li>
|
|
List Item 2
|
|
<ul>
|
|
<li>List Item 1</li>
|
|
<li>
|
|
List Item 2
|
|
<ul>
|
|
<li>List Item 1</li>
|
|
<li>
|
|
List Item 2
|
|
<ul>
|
|
<li>List Item 1</li>
|
|
<li>List Item 2</li>
|
|
<li>List Item 3</li>
|
|
</ul>
|
|
</li>
|
|
<li>List Item 3</li>
|
|
</ul>
|
|
</li>
|
|
<li>List Item 3</li>
|
|
</ul>
|
|
</li>
|
|
<li>List Item 3</li>
|
|
</ul>
|
|
</li>
|
|
<li>List Item 3</li>
|
|
</ul>
|
|
|
|
<p><a href="#h">[Haut]</a></p></footer>
|
|
</article>
|
|
|
|
<article id="text__details">
|
|
<h3>Détails / Résumé</h3>
|
|
|
|
<details>
|
|
<summary>Expand for details</summary>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio! Odio natus ullam ad quaerat, eaque necessitatibus, aliquid distinctio similique voluptatibus dicta consequuntur animi. Quaerat facilis quidem unde eos! Ipsa.</p>
|
|
</details>
|
|
|
|
<p><a href="#h">[Haut]</a></p></footer>
|
|
</article>
|
|
|
|
<article id="text__address">
|
|
<h3>Bloc d'adresse</h3>
|
|
|
|
<address>
|
|
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
|
|
Visit us at:<br>
|
|
Example.com<br>
|
|
Box 564, Disneyland<br>
|
|
USA
|
|
</address>
|
|
|
|
<p><a href="#h">[Haut]</a></p></footer>
|
|
</article>
|
|
|
|
<article id="text__hr">
|
|
<h3>Ligne horizontale</h3>
|
|
<div>
|
|
<hr>
|
|
</div>
|
|
<p><a href="#h">[Haut]</a></p></footer>
|
|
</article>
|
|
|
|
<article id="text__tables">
|
|
<h3>Données tabulaires</h3>
|
|
|
|
<table>
|
|
<caption>Légende à propos de ce tableau</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>En-tête de tableau 1</th>
|
|
<th>En-tête de tableau 2</th>
|
|
<th>En-tête de tableau 3</th>
|
|
<th>En-tête de tableau 4</th>
|
|
<th>En-tête de tableau 5</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th>Pied de tableau 1</th>
|
|
<th>Pied de tableau 2</th>
|
|
<th>Pied de tableau 3</th>
|
|
<th>Pied de tableau 4</th>
|
|
<th>Pied de tableau 5</th>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<tr>
|
|
<td>Cellule 1</td>
|
|
<td>Cellule 2</td>
|
|
<td>Cellule 3</td>
|
|
<td>Cellule 4</td>
|
|
<td>Cellule 5</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cellule 1</td>
|
|
<td>Cellule 2</td>
|
|
<td>Cellule 3</td>
|
|
<td>Cellule 4</td>
|
|
<td>Cellule 5</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cellule 1</td>
|
|
<td>Cellule 2</td>
|
|
<td>Cellule 3</td>
|
|
<td>Cellule 4</td>
|
|
<td>Cellule 5</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cellule 1</td>
|
|
<td>Cellule 2</td>
|
|
<td>Cellule 3</td>
|
|
<td>Cellule 4</td>
|
|
<td>Cellule 5</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p><a href="#h">[Haut]</a></p></footer>
|
|
</article>
|
|
|
|
<article id="text__code">
|
|
<h3>Code</h3>
|
|
|
|
<p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
|
|
<p><strong>Inline code:</strong> <code><div>code</div></code></p>
|
|
<p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
|
|
|
|
<h4>Pre-formatted text</h4>
|
|
<pre>P R E F O R M A T T E D T E X T
|
|
! " # $ % & ' ( ) * + , - . /
|
|
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
|
|
@ A B C D E F G H I J K L M N O
|
|
P Q R S T U V W X Y Z [ \ ] ^ _
|
|
` a b c d e f g h i j k l m n o
|
|
p q r s t u v w x y z { | } ~ </pre>
|
|
|
|
<p><a href="#h">[Haut]</a></p></footer>
|
|
</article>
|
|
|
|
<article id="text__inline">
|
|
<h3>Inline elements</h3>
|
|
|
|
<p><a href="#!">This is a text link</a>.</p>
|
|
<p><strong>Strong is used to indicate strong importance.</strong></p>
|
|
<p><em>This text has added emphasis.</em></p>
|
|
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
|
|
<p>The <i>i element</i> is text that is offset from the normal text.</p>
|
|
<p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
|
|
<p><s>This text has a strikethrough</s>.</p>
|
|
<p>Superscript<sup>®</sup>.</p>
|
|
<p>Subscript for things like H<sub>2</sub>O.</p>
|
|
<p><small>This small text is small for fine print, etc.</small></p>
|
|
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
|
|
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
|
|
<p><cite>This is a citation.</cite></p>
|
|
<p>The <dfn>dfn element</dfn> indicates a definition.</p>
|
|
<p>The <mark>mark element</mark> indicates a highlight.</p>
|
|
<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
|
|
<p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
|
|
<p><a href="#h">[Haut]</a></p></footer>
|
|
</article>
|
|
|
|
<h2 id="embedded">Embedded content</h2>
|
|
|
|
<article id="embedded__images">
|
|
<h3>Images</h3>
|
|
|
|
<h4>Plain <code><img></code> element</h4>
|
|
<p><img src="https://placekitten.com/480/480" alt="Photo of a kitten"></p>
|
|
|
|
<h4><code><figure></code> element with <code><img></code> element</h4>
|
|
<figure><img src="https://placekitten.com/420/420" alt="Photo of a kitten"></figure>
|
|
|
|
<h4><code><figure></code> element with <code><img></code> and <code><figcaption></code> elements</h4>
|
|
|
|
<figure>
|
|
<img src="https://placekitten.com/420/420" alt="Photo of a kitten">
|
|
<figcaption>Here is a caption for this image.</figcaption>
|
|
</figure>
|
|
|
|
<h4><code><figure></code> element with a <code><picture></code> element</h4>
|
|
<figure>
|
|
<picture>
|
|
<source srcset="https://placekitten.com/800/800"
|
|
media="(min-width: 800px)">
|
|
<img src="https://placekitten.com/420/420" alt="Photo of a kitten" />
|
|
</picture>
|
|
</figure>
|
|
|
|
<p><a href="#h">[Haut]</a></p></footer>
|
|
</article>
|
|
|
|
<article id="embedded__audio">
|
|
<h3>Audio</h3>
|
|
<audio controls="">audio</audio>
|
|
<p><a href="#h">[Haut]</a></p></footer>
|
|
</article>
|
|
|
|
<article id="embedded__video">
|
|
<h3>Video</h3>
|
|
<video controls="">video</video>
|
|
<p><a href="#h">[Haut]</a></p></footer>
|
|
</article>
|
|
|
|
<article id="embedded__meter">
|
|
<h3>Meter</h3>
|
|
<meter value="2" min="0" max="10">2 out of 10</meter>
|
|
<p><a href="#h">[Haut]</a></p></footer>
|
|
</article>
|
|
|
|
<article id="embedded__progress">
|
|
<h3>Progress</h3>
|
|
<div><progress>progress</progress></div>
|
|
<p><a href="#h">[Haut]</a></p></footer>
|
|
</article>
|
|
|
|
<article id="embedded__svg">
|
|
<h3>Inline SVG</h3>
|
|
<div><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></div>
|
|
<p><a href="#h">[Haut]</a></p></footer>
|
|
</article>
|
|
|
|
<h2 id="forms">Form elements</h2>
|
|
|
|
<form>
|
|
<fieldset id="forms__input">
|
|
<legend>Input fields</legend>
|
|
<p>
|
|
<label for="input__text">Text Input</label>
|
|
<input id="input__text" type="text" placeholder="Text Input">
|
|
</p>
|
|
<p>
|
|
<label for="input__password">Password</label>
|
|
<input id="input__password" type="password" placeholder="Type your Password">
|
|
</p>
|
|
<p>
|
|
<label for="input__webaddress">Web Address</label>
|
|
<input id="input__webaddress" type="url" placeholder="https://yoursite.com">
|
|
</p>
|
|
<p>
|
|
<label for="input__emailaddress">Email Address</label>
|
|
<input id="input__emailaddress" type="email" placeholder="name@email.com">
|
|
</p>
|
|
<p>
|
|
<label for="input__phone">Phone Number</label>
|
|
<input id="input__phone" type="tel" placeholder="(999) 999-9999">
|
|
</p>
|
|
<p>
|
|
<label for="input__search">Search</label>
|
|
<input id="input__search" type="search" placeholder="Enter Search Term">
|
|
</p>
|
|
<p>
|
|
<label for="input__text2">Number Input</label>
|
|
<input id="input__text2" type="number" placeholder="Enter a Number">
|
|
</p>
|
|
<p>
|
|
<label for="input__file">File Input</label>
|
|
<input id="input__file" type="file">
|
|
</p>
|
|
</fieldset>
|
|
|
|
<p><a href="#h">[Haut]</a></p>
|
|
<fieldset id="forms__select">
|
|
<legend>Select menus</legend>
|
|
<p>
|
|
<label for="select">Select</label>
|
|
<select id="select">
|
|
<optgroup label="Option Group">
|
|
<option>Option One</option>
|
|
<option>Option Two</option>
|
|
<option>Option Three</option>
|
|
</optgroup>
|
|
</select>
|
|
</p>
|
|
<p>
|
|
<label for="select_multiple">Select (multiple)</label>
|
|
<select id="select_multiple" multiple="multiple">
|
|
<optgroup label="Option Group">
|
|
<option>Option One</option>
|
|
<option>Option Two</option>
|
|
<option>Option Three</option>
|
|
</optgroup>
|
|
</select>
|
|
</p>
|
|
</fieldset>
|
|
<p><a href="#h">[Haut]</a></p>
|
|
<fieldset id="forms__checkbox">
|
|
<legend>Checkboxes</legend>
|
|
<ul>
|
|
<li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
|
|
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
|
|
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
|
|
</ul>
|
|
</fieldset>
|
|
<p><a href="#h">[Haut]</a></p>
|
|
<fieldset id="forms__radio">
|
|
<legend>Radio buttons</legend>
|
|
<ul>
|
|
<li><label for="radio1"><input id="radio1" name="radio" type="radio" checked="checked"> Option 1</label></li>
|
|
<li><label for="radio2"><input id="radio2" name="radio" type="radio"> Option 2</label></li>
|
|
<li><label for="radio3"><input id="radio3" name="radio" type="radio"> Option 3</label></li>
|
|
</ul>
|
|
</fieldset>
|
|
<p><a href="#h">[Haut]</a></p>
|
|
<fieldset id="forms__textareas">
|
|
<legend>Textareas</legend>
|
|
<p>
|
|
<label for="textarea">Textarea</label>
|
|
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
|
|
</p>
|
|
</fieldset>
|
|
<p><a href="#h">[Haut]</a></p>
|
|
<fieldset id="forms__html5">
|
|
<legend>HTML5 inputs</legend>
|
|
<p>
|
|
<label for="ic">Color input</label>
|
|
<input type="color" id="ic" value="#000000">
|
|
</p>
|
|
<p>
|
|
<label for="in">Number input</label>
|
|
<input type="number" id="in" min="0" max="10" value="5">
|
|
</p>
|
|
<p>
|
|
<label for="ir">Range input</label>
|
|
<input type="range" id="ir" value="10">
|
|
</p>
|
|
<p>
|
|
<label for="idd">Date input</label>
|
|
<input type="date" id="idd" value="1970-01-01">
|
|
</p>
|
|
<p>
|
|
<label for="idm">Month input</label>
|
|
<input type="month" id="idm" value="1970-01">
|
|
</p>
|
|
<p>
|
|
<label for="idw">Week input</label>
|
|
<input type="week" id="idw" value="1970-W01">
|
|
</p>
|
|
<p>
|
|
<label for="idt">Datetime input</label>
|
|
<input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
|
|
</p>
|
|
<p>
|
|
<label for="idtl">Datetime-local input</label>
|
|
<input type="datetime-local" id="idtl" value="1970-01-01T00:00">
|
|
</p>
|
|
<p>
|
|
<label for="idl">Datalist</label>
|
|
<input type="text" id="idl" list="example-list">
|
|
<datalist id="example-list">
|
|
<option value="Example #1" />
|
|
<option value="Example #2" />
|
|
<option value="Example #3" />
|
|
</datalist>
|
|
</p>
|
|
</fieldset>
|
|
<p><a href="#h">[Haut]</a></p>
|
|
<fieldset id="forms__action">
|
|
<legend>Action buttons</legend>
|
|
<p>
|
|
<input type="submit" value="<input type=submit>">
|
|
<input type="button" value="<input type=button>">
|
|
<input type="reset" value="<input type=reset>">
|
|
<input type="submit" value="<input disabled>" disabled>
|
|
</p>
|
|
<p>
|
|
<button type="submit"><button type=submit></button>
|
|
<button type="button"><button type=button></button>
|
|
<button type="reset"><button type=reset></button>
|
|
<button type="button" disabled><button disabled></button>
|
|
</p>
|
|
</fieldset>
|
|
<p><a href="#h">[Haut]</a></p>
|
|
</form>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>Maintenu par <a href="http://lemorse.quebec" rel="external">le Morse</a>. Voir <a
|
|
href="https://codeberg.org/leMorse/Flojo-HTML" rel="external">le code source</a>.</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|