| Les balises de mise en forme du texe |
| <h1>texte</h1> |
Sous-titres de h1 à h6 |
| <p>Texte</p> |
Paragraphe |
| <em>Texte</em> |
Italique |
| <br /> |
??? |
| <blockquote> |
??? |
| <cite>Texte</cite> |
Citations |
| <code>Ici votre code</code> |
Code |
| <sup>Texte</sup> |
Exposant |
| <sub>Texte</sub> |
Indices |
|
| Les balises de liens |
| <a href="http://www.exemple.ch/page.html"> Texte</a> |
Liens absolus |
<a href="page.html">texte</a> |
Liens relatifs |
| <a href="dossier/plan.html">Plan du site</a> |
Liens relatifs dossier |
| <a href="../index.html">Accueil du site</a> |
Liens relatifs accueil |
| <a href="../../index.html">Accueil du site</a> |
Liens relatifs accueil dossier |
<h1 id="sous_titre">texte</h1>
|
Ancre sous titre |
| <a href="#sous_titre">Aller au sous-titre</a> |
Ancre Liens même page |
| <a href="index.html#sous_titre">Text</a> |
Ancre Liens autre page |
| <a href="plan.html" title="Texte Info bull">Texte</a> |
Liens Info bull |
| <a href="mailto:info@exemple.ch">Texte</a> |
Liens mails |
| <a href="page.php?x=valeur1&y=valeur2">Texte</a> |
??? Url & |
| <img src="img/img.jpg" alt="txt alternatif" title="info bull" /> |
Image xhtml |
|
| Les balise de Bloc et conteneur |
| <p>Ceci est un premier bloc.</p><p>Ceci un deuxième.</p> |
Ceci est un premier bloc.
Ceci un deuxième. |
<div>
<p>Ceci est un premier bloc.</p>
<p>Ceci un deuxième.</p>
</div>
<div>
<p>Ceci est un troisième bloc.</p>
<p>Ceci un quatrième.</p>
</div> |
Ceci est un premier bloc.
Ceci un deuxième.
Ceci est un troisième bloc.
Ceci un quatrième.
|
|
|
| Les balises de liste à puce non ordonné (non numérique) |
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul> |
|
| Les balise de liste à puce ordonné (Numérique) |
<p>Montage d'une carte graphique :</p>
<ol>
<li>On ouvre le boîtier</li>
<li>On enlève l'ancienne carte graphique</li>
<li>On referme le boîtier et on démarre le PC</li>
<li>On installe les pilotes</li>
</ol> |
| Les balise de définitions |
<dl>
<dt>Boîtier</dt>
<dd>Définition 1</dd>
<dd>Définition 2</dd>
<dt>Vulgarisation informatique</dt>
<dd>Rendre l'informatique accessible au plus grand nombre</dd>
</dl> |
|
| Les balises de tableau |
| <table></table> |
Le tableau |
| <tr></tr> |
La ligne |
| <td></td> |
La Cellule |
<table>
<caption>Dépenses</caption>
<tr>
<td>Cinéma</td>
</tr>
</table> |
Le titre du tableau |
<table>
<caption>Dépenses</caption>
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
</tr>
<tr>
<td>Cinéma</td>
</tr>
<tr>
<td>Restaurant</td>
</tr>
</table> |
Titre tableau plusieur colonnes |
<td rowspan="2">100 €</td>
|
Fusion de 2 cellulues linéaires |
<td colspan="2">100 €</td>
|
Fusion de 2 celules en collones |
|
|
| les balises de Formulaires |
| <form action="mailto:info@exemple.ch"> |
recupération formulaire email |
| <form action="page.php" method="post"> |
?? envoi formulaire en php |
| <form action="page.php" method="get"> |
?? recupére un formulaire en php |
| <form action="page.php" method="post"><p><input type="texte" name="prenom" value="Joel" size="20" maxlenght="25" readonly="readonly"/></p> |
Zone de texte simple |
|
|
| Les balises de formulaires avec un type |
<p><label>Votre prénom : <input type="text" name="prenom" /></label></p>
|
Info zone de texte |
| <input type="password" name="mot_de_passe" /> |
zone Password |
<form action="page.php" method="post">
<p><label>Votre message : <textarea name="message" rows="3" cols="50" />Tapez ici votre message</textarea></label></p>
</form> |
Zone de texte multiligne |
<form action="page.php" method="post">
<p><label>Abonnement à la newsletter : <input type="checkbox" name="abonnement" checked="checked" /></label></p>
</form> |
Case à coché |
<form action="page.php" method="post">
<p>S'abonner ?</p>
<p><label>Oui : <input type="radio" name="confirmation" checked="checked" value="oui" /></label></p>
<p><label>Non : <input type="radio" name="confirmation" value="non" /></label></p>
</form> |
Bouton Select |
<form action="page.php" method="post">
<label>Votre couleur préférée :
<select name="couleur">
<option value="rouge">Rouge</option>
<option value="vert">Vert</option>
<option value="bleu" selected="selected">Bleu</option>
</select>
</label>
</form> |
Liste déroulante |
<form action="page.php" method="post">
<p><label>Votre prénom : <input type="text" name="prenom" /></label></p>
<p><input type="submit" value="Envoyer le formulaire" /></p>
</form> |
Envoyer formulaire |
