Accueil 
Méthode expresse.
Méthode expresse
Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.
Faites simplement une copie/coller des éléments XHTML dont vous avez besoin.
La méthode expresse permet d'insérer facilement un élément XHTML dans votre éditeur, mais peut aussi servir d'aide-mémoire. Cliquez sur « Pour en savoir plus... » afin de suivre le tutoriel complet.
| Résumé de la matière | Description |
|---|---|
| Les titres | Les balises <h1> à <h6>... |
| Les paragraphes | Les balises <p>, <blocquote> et <q>... |
| Les liens | L'élément <a> pour créer un lien avec texte ou image. Créer une ancre... |
| Les listes | Les éléments <ul>,<ol> et <li> pour créer une liste... |
| Les tableaux | Les éléments <table>, <rowspan>, <colspan> pour créer un tableau... |
| Les images | L'élément <img> pour insérer une image... |
| Les vidéos | Insérez une vidéo valide W3C... |
Les titres
<h1>Valeur 1 à 6 = Plus grand au plus petit</h1>
<h1 class="classe">Titre avec une classe</h1>
<h1 id="identifiant">Titre avec un identifiant</h1>
|
Les paragraphes.
<p>paragraphe</p>
<p class="classe">Paragraphe avec une classe.</p>
<p id="identifiant">Paragraphe avec un identifiant.</p>
<p> <!--paragraphe vide--></p>
|
Une longue citation.
<blokquote>
<p>
Citation ici...
</p>
</blokquote>
|
Une courte citation.
<q>
Une courte citation.
</q>
|
Les liens
Pour en savoir plus...
<a href="destination.html" title="titre">Texte du lien</a>
<a href="http://www.lien_extérieur.html" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" title="Lien extérieur">Texte du lien.</a>
<a href="http://www.lien_extérieur.html" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" title="Lien extérieur" hreflang="en" >Page extérieur de langue anglaise.</a>
|
Lien avec ancre.
<a href="#" id="identifiant" name="Nom"></a>
<a href="destination.html#identifiant" title="titre">Aller vers l'ancre d'une autre page.</a>
<a href="#identifiant" title="titre">Aller vers l'ancre de la même page </a>
|
Lien avec une image.
<p><a href="destination.html"><img src="dossier-image/mon_image.png" alt="Texte alternatif" title="titre de l'image" /></a></p>
<p><a href="http://www.lien_extérieur.html" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" title="Lien extérieur"><img src="dossier-image/mon_image.png" alt="Texte alternatif" title="titre de l'image" /></a></p>
|
Lien de téléchargement.
<p class="telechargement"><a href="telechargement/exemple.rar" title="Télécharger l'archive Winrar."></a></p>
<p class="telechargement"><a href="telechargement/exemple.rar"><img src="images/icons/telecharge_on.png" alt="Icône de téléchargement" title="Télécharger l'archive Winrar." /></a></p>
|
Lien vers le haut de page.
<a onclick="window.scrollTo(0,0); return false" href="#">Retour en haut</a>
|
Les listes.
Liste non triée.
<ul>
<li>Iteme de la liste.</li>
<li>Iteme de la liste. </li>
<li>Iteme de la liste.</li>
<li>Iteme de la liste.</li>
<li>Iteme de la liste.</li>
</ul>
|
Liste triée.
<ol>
<li>Iteme de la liste.</li>
<li>Iteme de la liste.</li>
<li>Iteme de la liste.</li>
<li>Iteme de la liste.</li>
<li>Iteme de la liste.</li>
</ol>
|
Liste contenant une sous-liste.
<ul>
<li>Iteme de la liste.</li>
<li>Iteme de la liste.
<ul>
<li>Iteme de la liste.</li>
<li>Iteme de la liste.</li>
</ul>
</li>
<li>Iteme de la liste.</li>
</ul>
|
Les tableaux.
Tableau simple
<table class="table" border="1" cellpadding="5" cellspacing="0" summary="Sommaire."><caption>Une légende ici</caption>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
<td>Cellule 3</td>
</tr>
<tr>
<td>Cellule 4</td>
<td>Cellule 5</td>
<td>Cellule 6</td>
</tr>
</table>
|
Tableau simple avec colspan
<table class="table" border="1" cellpadding="5px" cellspacing="2px" summary="Sommaire."><caption>Une légende ici</caption>
<tr>
<td>Cellule 1</td>
<td colspan="2">Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
<td>Cellule 5</td>
</tr>
</table>
|
Tableau simple avec rowspan
<table class="table" border="1" cellpadding="5px" cellspacing="2px" summary="Sommaire."><caption>Une légende ici</caption>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<th rowspan="3">Cellule 3</th>
<td>Cellule 4</td>
</tr>
<tr>
<td>Cellule 5</td>
</tr>
<tr>
<td>Cellule 6</td>
</tr>
</table>
|
Tableau conforme (recommander).
<table class="table" border="1" cellpadding="0" cellspacing="0" summary="Sommaire."><caption>Une légende ici</caption>
<thead>
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
<th>Titre 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ligne 1 colonne 1</td>
<td>Ligne 1 colonne 2</td>
<td>Ligne 1 colonne 3</td>
</tr>
<tr>
<td>Ligne 2 colonne 1</td>
<td>Ligne 2 colonne 2</td>
<td>Ligne 2 colonne 3</td>
</tr>
<tr>
<td>Ligne 3 colonne 1</td>
<td>Ligne 3 colonne 2</td>
<td>Ligne 3 colonne 3</td>
</tr>
</tbody>
</table>
|
Tableau complet.
<table class="table" border="1" cellpadding="0" cellspacing="0" summary="Sommaire."><caption>Une légende ici</caption>
<thead>
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
<th>Titre 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Pied colonne 1</th>
<th>Pied colonne 2</th>
<th>Pied colonne 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Ligne 1 colonne 1</td>
<td>Ligne 1 colonne 2</td>
<td>Ligne 1 colonne 3</td>
</tr>
<tr>
<td>Ligne 2 colonne 1</td>
<td>Ligne 2 colonne 2</td>
<td>Ligne 2 colonne 3</td>
</tr>
<tr>
<td>Ligne 3 colonne 1</td>
<td>Ligne 3 colonne 2</td>
<td>Ligne 3 colonne 3</td>
</tr>
</tbody>
</table>
|
Les images.
Image simple.
<p><img src="dossier_images/mon-image.png" alt="Texte alternatif (60 caractères)" title="Texte descriptif" width="400" height="200" /></p>
|
Image avec l'utilisation d'une vignette (Thumbnails).
<p class="image"><a href="images/mon_image.png" onclick="window.open(this.href); return false;" ><img src="images/image_thum.png" alt="Mon modèle." title="Cliquez pour agrandir l'image d'origine" width="50" height="50" ></a>
|
Image avec une longue description.
<p class="image"><a href="images/mon_image.png" onclick="window.open(this.href); return false;" ><img src="images/image_thum.png" alt="Mon modèle." title="Cliquez pour agrandir l'image d'origine" width="50" height="50" ></a>
|
Une vidéo.
<div class="video">
<object type="application/x-shockwave-flash" data="Coller l'adresse ici" width="XXX" height="XXX">
<param name="movie" value="Coller la même adresse ici" >
<param name="allowFullScreen" value="true" >
</object>
</div>
|
Ajouter ce site à vos favoris
