GTUTO
https://www.gtuto.com/html-notes/
Export date: Fri Apr 26 3:23:16 2024 / +0000 GMT

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

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 date: Fri Apr 26 3:23:16 2024 / +0000 GMT
This page was exported from GTUTO [ https://www.gtuto.com ]

Export of Post and Page has been powered by [ Universal Post Manager ] plugin from www.ProfProjects.com