Description des balises :
Balise pour l'image (<img />) :
On utilise cette balise pour mettre une image sur un site web. On l'utilise de cette facon :
Code:
<img src="http://www.monsite.com/images/truc.gif" alt="Voici un exemple" /> |
Et oui ! Rien de plus ! Allez, on analyse le tout :
1) Ouverture de la balise.
2) Le src, qui indique où se trouve l'image à afficher. On peut soit mettre un lien complet, soit relatif (ex : src="images/truc.gif").
3) Le alt, qui permet de donner une description à l'image pour ceux qui ne peuvent pas l'afficher (ou les mal-voyants aussi). Le alt est OBLIGATOIRE !
Balise pour les formulaires (<input />) :
Il existe différent types de formulaires : les zones de textes, les boutons radios, les boutons cases à cocher, les listes déroulantes etc...
Pour identifier l'une d'entres-elles, voici la methode :
Ce champ signifie que c'est une zone de texte. Vous avez pu remarquer que sur d'autres sites, les zones de texte pour mot de passe sont cachées par des ***. Pour ce faire, il suffit de changer la balise comme ceci :
Code:
<input type="password" /> |
Pour avoir un bouton radio, on utilise :
etc.. selon le type voulu.
La balise input utilise de nombreux attributs, comme "name" et "value". "name" permet de donner un nom à notre zone de texte pour pouvoir exploiter son résultat en PHP ou ASP par exemple. "value" permet de mettre une valeur directement dans la zone de texte pour le visiteur.
Voici un autre exemple :
Code:
<input type="text" name="pseudo" value="Nostrah" /> |
On y verrait afficher une zone de texte avec mon pseudo dedand !
Balise pour les tableaux <table></table> :
On utilise les tableaux dans le html ! Sisi c'est possible ! Pour créer un tableau, on utilise <table></table>. Pour créer une ligne dans ce tableau, on utilise <tr></tr> et pour faire une colonne, on prend <td></td>.
Un petit exemple : Je veux faire un tableau à 2 lignes et 1 colonne. La première ligne sera l'en-tete du tableau, la seconde contiendra mon pseudo :
Code:
<table>
<tr>
<td>Pseudo:</td>
</tr>
<tr>
<td>Nostrah</td>
</tr>
</table> |
Essayez chez vous, ca marche (même si c'est pas beau !)
Voila à peu près comment on fait des tableaux en html.
Balise pour les listes à puces (<ul></ul>) :
On peut aussi faire des listes dans le genre :
- xxx
- x
- xx
Comment ? En utilisant <ul></ul> et <li></li>. Les balises <ul></ul> permettent d'encadrer la liste à puces, et <li></li> controle chaque item de cette liste. Exemple :
Code:
<ul>
<li>xxx</li>
<li>x</li>
<li>xx</li>
</ul>
|
En combinant <ul></ul> et <li></li>, on peut gérer les listes à puces.
Gérer correctement un formulaire <form></form> :
Et oui, après avoir vu comment marchait une zone de texte, autant voir comment fonctionne un formulaire au grand jour.
Donc, pour définir une zone ou l'utilisateur pourra écrire, on utilise quelque chose comme :
Code:
<form action="mapage.html" type="POST" >
...
...
...
</form> |
Explication:
Le "action" indique vers quelle page se tourner une fois que votre visiteur aura cliquer sur le bouton d'envoi.
Le "type" indique si les variables transmises devront l'être via la barre de navigation (en haut de l'écran) ou non. GET le fait, mais pas POST (il cache les valeurs des variables, pratique pour éviter de voir le mot de passe de quelqu'un !).
Ensuite, on associe plusieurs champs <input /> et on fini par un
Code:
<input type="submit" value="Envoyer" /> |
pour que le visiteur clique dessus une fois qu'il a fini.
Catégorie : 
Rédaction : 
Re : [Tuto] xHTML 
mais l'idée est là.
