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

Adresse IP publique de votre navigateur	[insert_php] echo $_SERVER[« REMOTE_ADDR »]; [/insert_php]
user_agent de votre navigateur	[insert_php] echo $_SERVER[« HTTP_USER_AGENT »]; [/insert_php]

L	M	M	J	V	S	D
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

GTUTO

Bloc note techno

Monthly Archives: janvier 2016

Info sur votre navigateur

VI editeur Linux

PHP aide mémoire

HTML aide mémoire