Aide Memoire HTML

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
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>
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>
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:maurice@franchouille.fr">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>
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>
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>
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" />
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

Aide Memoire HTML

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Aide Memoire HTML

Загружено:

Авторское право:

Доступные форматы

Aide-Mmoire HTML

Squelette XHTML Strict

Squelette HTML de transition

Squelette HTML Strict

Signature XHTML de transition.

Signature XHTML Strict.

Signature XHTML frameset.

Signature HTML de transition.

Signature HTML Strict.

Signature HTML frameset.

Affichage : [Tous] - [Aucun]

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

Encodage Encodage de la page en Windows.

Encodage de la page en UTF-8.

Description Description de la page.

Mots-cls Mots-cls de la page pour les moteurs de recherche.

Auteur Auteur de la page.

Description de l'outil Outil utilis pour la gnration de la page.

Indexation par Robot Pas d'indexation par les moteurs de recherche.

Pas d'indexation par les moteurs de recherche.

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.

Feuille de style de la page alternative.

Feuille de style pour impression.

Icone de page Rsolution 16x16 ou 32x32.

Appel d'un fichier Javascript

Affichage : [Tous] - [Aucun]

Mise en italique d'un texte

Saut de ligne ou trait

Lien Lien simple vers une adresse internet

Lien simple vers une identification sur la page

Attribut target, dconseill en XHTML

Image Image simple

Image avec zone clickable

Indice ou exposant Mise en indice

Code informatique Saisie clavier

<kbd>Texte mis en indice</kbd>

sortie de code informatique

Sigle, citation et abbrviation Abbrviation

Insertion ou suppression Texte supprim

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

Paragraphe Ecriture d'un Paragraphe

Bloc de prsentation Bloc neutre utilis pour la prsentation.

Adresse de l'auteur Bloc pour indiquer l'adresse de l'auteur de la page web.

Affichage : [Tous] - [Aucun]

Bloc gnral pour le tableau La balise "table" dfinit un tableau.

<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 :

Pour regrouper des cases d'une colonne :

Affichage : [Tous] - [Aucun]

<dt>deux</dt> <dd>Second des chiffres.</dd> </dl>

Affichage : [Tous] - [Aucun]

Formulaire de type POST avec une zone de regroupement.

Champ de mot de passe

Boite cocher Bouton coch

Bouton radio Trois boutons avec le deuxime coch.

Bouton Bouton envoi du formulaire.

Bouton Reset des valeurs.

Affichage : [Tous] - [Aucun]