Aide Memoire HTML

8/3/2019 Aide Memoire HTML

http://slidepdf.com/reader/full/aide-memoire-html 1/13

Aide-Mémoire 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=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">


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>

http://boraklerouge.free.fr/HTML-AideMemoire/














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

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

<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 surl'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 laclasse</span>


Balise de type BlocAffichage : [Tous] - [Aucun]

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:[email protected]">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" />


Liens HTML/CSS

Mes sites

Aide-mémoire HTML

Aide-mémoire PHP

Aide-mémoire CSS

Les trucs en CSS

Aide-mémoire JavaScript

Aide-mémoire jQuery

Mini-cours XHTML

Générateur de CSS

Choix de caractères

Tester le modèle de boite de votre navigateur.

Mes références

W3C les règles World Wide Web.

Le validateur HTML

Le validateur CSS

Alsacréations

Openweb

Vulgarisation Informatique ZoneCSS

Le Jardin Zen

Developez.com

Le site du Zéro

Hierarchie XHTML

Editeur Javascript

Tout JavaScript

SelfHTML

Référence jQuery

jQuery en Français







http://boraklerouge.free.fr/HTML-AideMemoire/index.html


http://boraklerouge.free.fr/PHP-AideMemoire/index.html


http://boraklerouge.free.fr/CSS-AideMemoire/index.html


http://boraklerouge.free.fr/CSS-Trucs/index.html


http://boraklerouge.free.fr/JAVASCRIPT-AideMemoire/index.html


http://boraklerouge.free.fr/JQUERY-AideMemoire/index.html


http://boraklerouge.free.fr/XHTML/index.html


http://boraklerouge.free.fr/CSS-Auto/index.html


http://boraklerouge.free.fr/CSS-Caract/index.html


http://boraklerouge.free.fr/ModeleBoiteCSS/index.html


http://www.w3.org/

http://www.w3.org/

http://validator.w3.org/


http://jigsaw.w3.org/css-validator/


http://www.alsacreations.com/


http://openweb.eu.org/index.php


http://www.vulgarisation-informatique.com/php.php


http://www.zonecss.fr/


http://www.csszengarden.com/tr/francais/


http://www.developpez.com/


http://www.siteduzero.com/


http://giminik.developpez.com/xhtml/


http://www.editeurjavascript.com/


http://www.toutjavascript.com/reference/


http://fr.selfhtml.org/


http://jquery.com/

http://jquery.com/

http://jquery.developpeur-web2.com/documentation.php



http://jquery.com/














http://www.w3.org/













Documents

Aide Memoire HTML