Scribd
Upload
259 views

Aide Memoire HTML

The document provides code examples for different types of HTML skeletons and signatures including XHTML transitional, XHTML strict, HTML transitional, and HTML strict. It also provides code snippets for common HTML elements like the document head, text formatting, links, images, lists, tables, and more.

Uploaded by

Farouk Blalou
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
259 views

Aide Memoire HTML

The document provides code examples for different types of HTML skeletons and signatures including XHTML transitional, XHTML strict, HTML transitional, and HTML strict. It also provides code snippets for common HTML elements like the document head, text formatting, links, images, lists, tables, and more.

Uploaded by

Farouk Blalou
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Aide-Mmoire HTML

Squelette Base
Affichage : [Tous] - [Aucun] 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=ISO8859-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=ISO8859-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=ISO8859-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=ISO8859-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>

Affichage : [Tous] - [Aucun]

En-tte HTML
Affichage : [Tous] - [Aucun]

Titre Titre de la page : Apparait comme le titre de la fentre.


<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-cls Mots-cls 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 gnration 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 dfaut.


<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 Rsolution 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" />

Icone iPhone iPad iPod Idalement en rsolution 128x128, par dfaut 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>

Affichage : [Tous] - [Aucun]

Prsentation de texte
Affichage : [Tous] - [Aucun] 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 sparation
<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, dconseill en XHTML


<a href="#idobjet" target="_blank">Lien sur une nouvelle fenetre</a> <a href="#idobjet" target="_top">Lien sur la mme fenetre</a> <a href="#idobjet" target="_self">Lien sur le mme 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 abbrviation Abbrviation


<abbr title="Explication dtaille" lang="fr">abbrev.</abbr>

Acronyme
<acronym title="Explication dtaille" lang="fr">Accronyme.</acronym>

Citation
<cite lang="fr">Vindiou la belle glise.</cite>

Citation courte
<q>To be or not to be.</q>

Dfinition de terme
<dfn>Ceci</dfn> est un terme que l'on dcrit ici.

Insertion ou suppression Texte supprim


<del>Texte supprim</del>

Texte insr
<ins>Texte insr</ins>

Formatage indfini Balise span

<span id="idobj" class="classobj">Texte prsent selon l'id ou la classe</span>

Affichage : [Tous] - [Aucun]

Balise de type Bloc


Affichage : [Tous] - [Aucun] Titre Exemple de titres de diffrents 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 prsentation Bloc neutre utilis pour la prsentation.


<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:[email protected]">Mon adresse moi</a></address>

Bloc de citation Bloc de citation doit imprativement contenir d'autre Bloc (div, p).
<blockquote> <p>...</p> <p>...</p> </blockquote>

Affichage : [Tous] - [Aucun]

Tableaux
Affichage : [Tous] - [Aucun] Lgende de tableau La lgende est en premire position du tableau.
<table> <caption>Lgende du tableau</caption> ... </table>

Bloc gnral pour le tableau La balise "table" dfinit 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'entte) -> TFOOT (pied de tableau) -> TBODY (corp du tableau). La balise "TR" encadre les lignes du tableau. La balise "TH" dcrit une case de titre. La balise "TD" dcrit une case de donnes. 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>

Affichage : [Tous] - [Aucun]

Liste
Affichage : [Tous] - [Aucun] Liste simple Liste simple. "UL" est la balise de liste, "LI" est la balise d'lment de liste.
<ul> <li>Premier lment de la liste.</li> <li>Second lment de la liste.</li> </ul>

Liste numrote Liste numrote. "OL" est la balise de liste, "LI" est la balise d'lment de liste.
<ol> <li>Premier lment de la liste.</li> <li>Second lment de la liste.</li> </ol>

Liste dfinitions Liste dfinitions. "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 droulante Liste droulante. "SELECT" est la balise de liste, "OPTGROUP" permet de regrouper des options, "OPTION" option de la liste droulante.
<select name="fruits"> <option>fraise</option> <option>framboise</option> <option>cerise</option> </select>

Affichage : [Tous] - [Aucun]

Formulaire
Affichage : [Tous] - [Aucun] 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 dcoch
<input name="pt2" id="pt2" type="checkbox" /> <label for="pt2">Libell bouton 2 : </label>

Bouton radio Trois boutons avec le deuxime coch.


<input name="rd1" id="rd1-1" value="1" <label for="rd1-1">Libell bouton 1 <input name="rd1" id="rd1-2" value="2" /> <label for="rd1-2">Libell bouton 2 <input name="rd1" id="rd1-3" value="3" <label for="rd1-3">Libell bouton 3 type="radio" /> : </label> type="radio" checked="checked" : </label> type="radio" /> : </label>

Champ fichier
<label for="Fich">Fichier charger : </label> <input name="Fich" id="Fich" type="file"/>

Liste droulante
<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" />

Affichage : [Tous] - [Aucun]

Liens HTML/CSS
Mes rfrences Mes sites

Aide-mmoire HTML Aide-mmoire PHP Aide-mmoire CSS Les trucs en CSS Aide-mmoire JavaScript Aide-mmoire jQuery Mini-cours XHTML Gnrateur de CSS Choix de caractres Tester le modle de boite de votre navigateur.

W3C les rgles World Wide Web. Le validateur HTML Le validateur CSS Alsacrations Openweb Vulgarisation Informatique ZoneCSS Le Jardin Zen Developez.com Le site du Zro Hierarchie XHTML Editeur Javascript Tout JavaScript SelfHTML Rfrence jQuery jQuery en Franais

You might also like