Aide-Mémoire HTML
Squelette Base
- Squelette XHTML de transition
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>xxxx</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="xx" /> <meta name="keywords" content="xx,xx,xx" /> <meta name="author" content="James Kirk" /> <meta name="generator" content="BorakHTML - http://mfay.free.fr/BorakHTML" /> <link href="monstyle.css" type="text/css" rel="stylesheet" /> </head> <body> </body> </html>
- Squelette XHTML Strict
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>xxxx</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="xx" /> <meta name="keywords" content="xx,xx,xx" /> <meta name="author" content="James Kirk" /> <meta name="generator" content="BorakHTML - http://mfay.free.fr/BorakHTML" /> <link href="monstyle.css" type="text/css" rel="stylesheet" /> </head> <body> </body> </html>
- Squelette HTML de transition
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>xxxx</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="xx" /> <meta name="keywords" content="xx,xx,xx" /> <meta name="author" content="James Kirk" /> <meta name="generator" content="BorakHTML - http://mfay.free.fr/BorakHTML" /> <link href="monstyle.css" type="text/css" rel="stylesheet" /> </head> <body> </body> </html>
- Squelette HTML Strict
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>xxxx</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="xx" /> <meta name="keywords" content="xx,xx,xx" /> <meta name="author" content="James Kirk" /> <meta name="generator" content="BorakHTML - http://mfay.free.fr/BorakHTML" /> <link href="monstyle.css" type="text/css" rel="stylesheet" /> </head> <body> </body> </html>
- Signatures HTML
-
Signature XHTML de transition.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> ... </html>
Signature XHTML Strict.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> ... </html>
Signature XHTML frameset.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> ... </html>
Signature HTML de transition.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> ... </html>
Signature HTML Strict.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> ... </html>
Signature HTML frameset.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> ... </html>
En-tête HTML
- Titre
-
Titre de la page : Apparait comme le titre de la fenêtre.
<title>...</title>
- Encodage
-
Encodage de la page en Windows.
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
Encodage de la page en UTF-8.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- Description
-
Description de la page.
<meta name="description" content="Utile pour les robot de recherche" />
- Mots-clés
-
Mots-clés de la page pour les moteurs de recherche.
<meta name="keywords" content="xx,xx,xx"" />
- Auteur
-
Auteur de la page.
<meta name="author" content="James Kirk" />
- Description de l’outil
-
Outil utilisé pour la génération de la page.
<meta name="generator" content="BorakHTML - http://mfay.free.fr/BorakHTML" />
- Indexation par Robot
-
Pas d’indexation par les moteurs de recherche.
<meta name="robots" content="noindex" />
Pas d’indexation par les moteurs de recherche.
<meta name="robots" content="index" />
- Feuille de style
-
Feuille de style de la page.
<link href="monstyle.css" type="text/css" rel="stylesheet" />
Feuille de style de la page par défaut.
<link href="monstyleDefaut.css" title="Defaut" type="text/css" rel="stylesheet" />
Feuille de style de la page alternative.
<link href="alternate.css" title="Alternatif" type="text/css" rel="alternate stylesheet" />
Feuille de style pour impression.
<link href="monstyle.css" type="text/css" rel="stylesheet" media="print" />
- Icone de page
-
Résolution 16×16 ou 32×32.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link rel="shortcut icon" type="image/png" href="favicon.png" /> <link rel="icon" type="image/png" href="favicon.png" />
- Icone iPhone iPad iPod
-
Idéalement en résolution 128×128, par défaut le nom est « apple-touch-icon.png » mais on peut le changer.
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
- Appel d’un fichier Javascript
-
<script type="text/javascript" src="xxxxx.js"></script>
Présentation de texte
- Mise en gras, en italique
-
Mise en gras d’un texte
<strong>Texte mis en gras</strong>
Mise en italique d’un texte
<em>Texte mis en gras</em>
- Saut de ligne ou trait
-
Saut de ligne
<br />
Trait de séparation
<hr />
- Lien
-
Lien simple vers une adresse internet
<a href="http://mfay.free.fr">Exemple de lien</a>
Lien simple vers une identification sur la page
<a href="#idobjet">Exemple de lien sur un attribut id</a>
Attribut target, déconseillé en XHTML
<a href="#idobjet" target="_blank">Lien sur une nouvelle fenetre</a> <a href="#idobjet" target="_top">Lien sur la même fenetre</a> <a href="#idobjet" target="_self">Lien sur le même frame</a>
- Image
-
Image simple
<img src="adresseimage.jpg" alt="commentaire sur l'image" />
Image avec zone clickable
<map id="ZoneImage"> <area shape="rect" coords="10,10,30,30" href="http://www.google.fr" title="info-bulle"> </map> <img src="adresseimage.jpg" usemap="#ZoneImage" alt="commentaire sur l'image" />
- Indice ou exposant
-
Mise en indice
<sub>Texte mis en indice</sub>
Mise en exposant
<sup>Texte mis en exposant</sup>
- Code informatique
-
Saisie clavier
<kbd>Texte mis en indice</kbd>
code informatique
<code>Texte mis en exposant</code>
sortie de code informatique
<samp>Texte mis en exposant</samp>
variable informatique
<var>Texte mis en exposant</var>
- Sigle, citation et abbréviation
-
Abbréviation
<abbr title="Explication détaillée" lang="fr">abbrev.</abbr>
Acronyme
<acronym title="Explication détaillée" lang="fr">Accronyme.</acronym>
Citation
<cite lang="fr">Vindiou la belle église.</cite>
Citation courte
<q>To be or not to be.</q>
Définition de terme
<dfn>Ceci</dfn> est un terme que l'on décrit ici.
- Insertion ou suppression
-
Texte supprimé
<del>Texte supprimé</del>
Texte inséré
<ins>Texte inséré</ins>
- Formatage indéfini
-
Balise span
<span id="idobj" class="classobj">Texte présenté selon l'id ou la classe</span>
Balise de type Bloc
- Titre
-
Exemple de titres de différents niveaux d’importance
<h1>Titre de niveau 1 : Titre principal</h1> <h2>Titre de niveau 2</h2> <h2>Titre de niveau 3</h3>
- Paragraphe
-
Ecriture d’un Paragraphe
<p>Ecriture d'un Paragraphe</p>
- Bloc de codification informatique
-
Ecriture d’un Paragraphe de type langage informatique à chasse fixe.
<pre>Ecriture d'un code informatique</pre>
- Bloc de présentation
-
Bloc neutre utilisé pour la présentation.
<div>Bloc de type divers</div>
- Adresse de l’auteur
-
Bloc pour indiquer l’adresse de l’auteur de la page web.
<address><a href="mailto:maurice@franchouille.fr">Mon adresse à moi</a></address>
- Bloc de citation
-
Bloc de citation doit impérativement contenir d’autre Bloc (div, p).
<blockquote> <p>...</p> <p>...</p> </blockquote>
Tableaux
- Légende de tableau
-
La légende est en première position du tableau.
<table> <caption>Légende du tableau</caption> ... </table>
- Bloc général pour le tableau
-
La balise « table » définit un tableau.
<table> <tr><th>titre 1</th><th>titre 2</th></tr> <tr><td>Ligne 1 Case 1</td><td>Ligne 1 Case 2</td></tr> <tr><td>Ligne 2 Case 1</td><td>Ligne 2 Case 2</td></tr> </table>
- Organisation du Tableau
-
Dans l’ordre : THEAD (lignes d’entête) -> TFOOT (pied de tableau) -> TBODY (corp du tableau).
La balise « TR » encadre les lignes du tableau.
La balise « TH » décrit une case de titre.
La balise « TD » décrit une case de données.
La balise « COLGROUP » permet d’appliquer un formatage à un ensemble de colonnes du tableau.
La balise « COL » permet d’appliquer un formatage à une colonne du tableau.
<table> <colgroup class="colg"> <col class="col1" /> <col class="col2" /> </colgroup> <thead><tr><th>titre 1</th><th>titre 2</th></tr></thead> <tfoot><tr><td>total : 0</td><td>total : 0</td></tr></tfoot> <tbody> <tr><td>Ligne 1 Case 1</td><td>Ligne 1 Case 2</td></tr> <tr><td>Ligne 2 Case 1</td><td>Ligne 2 Case 2</td></tr> </tbody> </table>
- Fusion de cases
-
Pour regrouper des cases d’une ligne :
<td colspan="3">...</td>
Pour regrouper des cases d’une colonne :
<td rowspan="3">...</td>
Liste
- Liste simple
-
Liste simple.
« UL » est la balise de liste, « LI » est la balise d’élément de liste.
<ul> <li>Premier élément de la liste.</li> <li>Second élément de la liste.</li> </ul>
- Liste numérotée
-
Liste numérotée.
« OL » est la balise de liste, « LI » est la balise d’élément de liste.
<ol> <li>Premier élément de la liste.</li> <li>Second élément de la liste.</li> </ol>
- Liste à définitions
-
Liste à définitions.
« DL » est la balise de liste, « DT » est la balise de titre, « DD » est la balise de description.
<dl> <dt>un</dt> <dd>Premier des chiffres.</dd> <dt>deux</dt> <dd>Second des chiffres.</dd> </dl> - Liste déroulante
-
Liste déroulante.
« SELECT » est la balise de liste, « OPTGROUP » permet de regrouper des options, « OPTION » option de la liste déroulante.
<select name="fruits"> <option>fraise</option> <option>framboise</option> <option>cerise</option> </select>
Formulaire
- Formulaire
-
Formulaire minimaliste
<form id="forml"> ... </form>
Formulaire de type POST avec une zone de regroupement.
<form name="form1" id="forml" action="xxx.php" method="post"> <fieldset><legend>Serie de champ :</legend> ... </fieldset> </form>
Attention, un
<form>ne peut contenir que des tag de type BLOC ! - Champ d’édition
-
Champ d’édition
<label for="ch1">Libellé bouton 1 : </label> <input name="ch1" id="ch1" type="text" value="par defaut" maxlength="20" size="20" />
Champ de mot de passe
<label for="ch2">Libellé bouton 1 : </label> <input name="ch2" id="ch2" type="password" value="" maxlength="20" size="20" />
- Boite à cocher
-
Bouton coché
<input name="pt1" id="pt1" type="checkbox" checked="checked" /> <label for="pt1">Libellé bouton 1 : </label>
Bouton décoché
<input name="pt2" id="pt2" type="checkbox" /> <label for="pt2">Libellé bouton 2 : </label>
- Bouton radio
-
Trois boutons avec le deuxième coché.
<input name="rd1" id="rd1-1" value="1" type="radio" /> <label for="rd1-1">Libellé bouton 1 : </label> <input name="rd1" id="rd1-2" value="2" type="radio" checked="checked" /> <label for="rd1-2">Libellé bouton 2 : </label> <input name="rd1" id="rd1-3" value="3" type="radio" /> <label for="rd1-3">Libellé bouton 3 : </label>
- Champ fichier
-
<label for="Fich">Fichier à charger : </label> <input name="Fich" id="Fich" type="file"/>
- Liste déroulante
-
<select name="liste" id="liste"> <option value="T1">Test 1</option> <option value="T2" selected="selected">Test 2</option> <option value="T3">Test 3</option> </select>
- Champ multiligne
-
<label for="Chp1">Gros champ : </label> <textarea id="Chp1" cols="20" rows="4"> ... ... </textarea>
- Bouton
-
Bouton envoi du formulaire.
<label for="ev1">Envoi : </label> <input name="ev1" id="ev1" type="submit" value="Envoi" />
Bouton simple.
<label for="bt1">Bouton : </label> <input name="bt1" id="bt1" type="button" value="Click" />
Bouton Reset des valeurs.
<label for="rs1">Reset : </label> <input name="rs1" id="rs1" type="reset" value="Reset" />
