This page was exported from GTUTO [ https://www.gtuto.com ] Export date:Tue Apr 16 13:02:26 2024 / +0000 GMT ___________________________________________________ Title: HTML aide mémoire --------------------------------------------------- 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 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 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" /> 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" /> --------------------------------------------------- Images: --------------------------------------------------- --------------------------------------------------- Post date: 2016-01-20 23:13:24 Post date GMT: 2016-01-20 23:13:24 Post modified date: 2016-01-24 23:44:41 Post modified date GMT: 2016-01-24 23:44:41 ____________________________________________________________________________________________ Export of Post and Page as text file has been powered by [ Universal Post Manager ] plugin from www.gconverters.com