<!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>
<!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>
<!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>
<!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>
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>
Titre de la page : Apparait comme le titre de la fenêtre.
<title>...</title>
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 de la page.
<meta name="description" content="Utile pour les robot de recherche" />
Mots-clés de la page pour les moteurs de recherche.
<meta name="keywords" content="xx,xx,xx"" />
Auteur de la page.
<meta name="author" content="James Kirk" />
Outil utilisé pour la génération de la page.
<meta name="generator" content="BorakHTML - http://mfay.free.fr/BorakHTML" />
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 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" />
Résolution 16x16 ou 32x32.
<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" />
Idéalement en résolution 128x128, 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" />
<script type="text/javascript" src="xxxxx.js"></script>
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
<br />
Trait de séparation
<hr />
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 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" />
Mise en indice
<sub>Texte mis en indice</sub>
Mise en exposant
<sup>Texte mis en exposant</sup>
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>
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.
Texte supprimé
<del>Texte supprimé</del>
Texte inséré
<ins>Texte inséré</ins>
Balise span
<span id="idobj" class="classobj">Texte présenté selon l'id ou la classe</span>
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>
Ecriture d'un Paragraphe
<p>Ecriture d'un Paragraphe</p>
Ecriture d'un Paragraphe de type langage informatique à chasse fixe.
<pre>Ecriture d'un code informatique</pre>
Bloc neutre utilisé pour la présentation.
<div>Bloc de type divers</div>
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 doit impérativement contenir d'autre Bloc (div, p).
<blockquote> <p>...</p> <p>...</p> </blockquote>
La légende est en première position du tableau.
<table> <caption>Légende du tableau</caption> ... </table>
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>
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>
Pour regrouper des cases d'une ligne :
<td colspan="3">...</td>
Pour regrouper des cases d'une colonne :
<td rowspan="3">...</td>
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.
"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.
"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.
"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 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
<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" />
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>
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>
<label for="Fich">Fichier à charger : </label> <input name="Fich" id="Fich" type="file"/>
<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>
<label for="Chp1">Gros champ : </label> <textarea id="Chp1" cols="20" rows="4"> ... ... </textarea>
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" />