Mettre en italique :

My flowers are beautiful

My flowers are beautiful

My flowers are beautiful

My flowers are beautiful

My flowers are beautiful

My flowers are beautiful

Quelques balises en vrac :

<small> en plus petit que normal

<big> en plus gros que normal Remarque :

Beaucoup de balises différentes comme entres autres <cite> (pour citer) sont disponibles, mais la plupart ne servent finalement pas à grand chose et s'avérent plus un luxe qu'autre chose.

Former un paragraphe :

Coucou ! My flowers are beautiful !

Un simple retour à la ligne :

Remarque :
target peut également servir pour cibler les frames en y indiquant le nom que vous leur aurez donné à l'aide de name . Nous en détaillerons leur utilisation dans un prochain chapitre.

Définir la couleur de fond :

Définir une image d'arrière plan :

Afficher une image :

Créer un tableaux :

Un tableaux est défini par la balise <table> . Ensuite vient une arborescence de balises qui vont jusqu'à créer une cellule proprement dîtes. Pour diviser <table> en lignes, on utilisera <tr> et pour diviser enfin en cellules (colonnes), on utilisera <td> . L'arborescence des trois et dans l'ordre donné est obligatoire.

Exemple :
<table>

<tr>
<td>Ligne 1</td>
</tr>

<tr>
<td>Ligne 2</td>
</tr>

</table>

Résultat :

Comme vous le constatez, les deux lignes sont présentes ; bien que le résultat soit pour l'instant le même que si l'on avait mis un <br> aprés Ligne 1. Remarque :
Il existe également la balise <th> qui permet de proposer un entête aux cellules ( <td> ). Les éléments placés dans celle-ci seront mis en valeur par le navigateur, souvent en passant le tout en gras. Cette option n'est pas indispensable, voir inutile et contraignante. Pour diviser une ligne en plusieurs colonnes, on considére que <tr> représente une ligne qui va contenir différentes colonnes. Celles-ci sont définies par <td> et sont lues de haut en bas pour les afficher de gauche à droite.

Exemple :
<table>

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>

Résultat :

Faire apparaitre les tableaux :

Pour cela, il suffira d'utiliser logiquement l'attribut border de la balise <table> en lui passant en valeur l'épaisseur de la bordure exprimée en pixels.

Exemple :
<table border="2">

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>

Résultat :

Comme vous pouvez le remarquer, le navigateur affiche les bordures comme un relief.

<cellspacing> permet de choisir l'espace entre la bordure externe et la bordure interne. Elle prend l'espace exprimé en pixel comme valeur.
Dans cet exemple, j'ai volontairement défini un espace (trop) important pour que vous puissiez vous rendre compte.

Exemple :
<table border="5" cellspacing="30">

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>

Résultat :

Dimensionner un tableau :

Pour donner les dimensions d'un tableau, ce sera par logique height (hauteur) et width (largeur) qui seront employés. Les tailles s'exprimeront en pixels ou en % par rapport à la fenêtre définie du client (visiteur). Le % étant interdit pour le height par le W3C.

Exemple :
<table border="2" height="80" width="270">

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>

Résultat :

Remarque :
Si les dimensions d'un tableau ne sont précisées, celui-ci prendra alors la forme de ce qu'il contient et collera donc à l'élément le plus long et à celui le plus haut. S'il ne contient que des éléments extrémements petits, il gardera toujours approximativement un peu moins d'un cm de hauteur. Remarque :
On peut également définir la taille d'une certaine cellule en utilisant width directement dans le <td> concerné. Attention toutes fois à rester cohérent et à bien surveiller que l'addition du width de la colonne 1 et de celui de la colonne 2 corresponde bien à la taille générale du tableau indiquée dans <table> , ceci en pixel ou en %. Si la taille d'une seule colonne est définie, l'autre prendra comme taille la soustraction logique de la colonne précisée à celle de la taille générale du tableau.

Mise en forme graphique d'un tableau :

Définir la couleur des bordures :

Cet attribut peut se deviner : nous souhaitons mettre une bordure en couleur. Ors, pour créer une bordure, nous avons vu border , et pour la couleur color . La fusion des deux donne donc l'attribut bordercolor .

Exemple :
<table border="2" bordercolor="#00FF00">

<tr>
<td>Ligne 1</td>
<td>Ligne 1 bis</td>
</tr>

<tr>
<td>Ligne 2</td>
<td>Ligne 2 bis</td>
</tr>

</table>

Résultat :

Remarque :
Tous les attributs de mise en forme vus sont aussi applicables sur une cellule en particulier. Ainsi, vous pourrez définir la couleur de fond d'une certaine ligne en précisant l'attribut bgcolor au <tr> correspondant. Si c'est à une cellule en particulier, une colonne, ce sera à son <td> .
Maintenant un dernier chapitre sur les formulaires, apprennez à les découvrir comme à les maitriser...

Un formulaire de base avec bouton :

Un formulaire est avant tout délimité par la balise <form> . Tous les champs qui seront inclus dans cette délimitation verront leur valeur envoyée lors de sa validation générale. Tout ceci est flou, voyons déjà un formulaire muni d'un simple bouton.

Comme dit, le tout sera donc délimité par <form> . Un formulaire sans bouton, c'est un formulaire qui ne sert à rien. Le bouton (submit) permet de valider le formulaire dans lequel il est contenu. C'est un <input> (on en retrouvera) et prend obligatoirement comme attribut type qui prendra à son tour différentes valeurs. Pour un bouton, ce sera submit . Un bouton n'est utile que si l'on sait à quoi il sert, il faudra donc préciser l'attribut value qui prendra comme valeur le nom choisi pour le bouton.

Exemple :
<form>
<input type="submit" value="I am a button !" name="Envoi">
</form>

Résultat :
Remarque :
Le bouton submit doit obligatoirement avoir un nom défini par name et il ne peut y avoir qu'un seul et unique bouton de validation par formulaire. Remarque :
Deux autres type de bouton existent. Affecter button à type donnera un bouton vide qui n'aura aucun ordre (pour submit , il aura l'ordre d'éxecuter le formulaire) et qui servira donc principalement pour des scripts. Affecter reset affichera un bouton qui aura ordre de rétablir le formulaire dans lequel il se trouve ; concrétement, vider tout ce qui a pus être rentré par le visiteur.

Créer un champs de texte :

Pour afficher ce que nous appellerons un champs de texte, nous resterons avec <input> dont sont attribut type prendra cette fois-ci comme valeur text .

Exemple :
<form>
<input type="text"> <br>
<input type="submit" value="Valider" name="Envoi">
</form>

Résultat :



Pour définir la largeur du champs, ce sera le nombre de caractère qu'il représentera qui sera utilisé avec l'attribut size qui prendra ce nombre en valeur. Toutes-fois, même si vous indiquez qu'il fera X caractères, le visiteur qui désirera en entrer plus le pourra. Pour bloquer le nombre de caractères, imposer un nombre maximal, utilisez maxlength qui prendra comme valeur ce nombre maximal.

Le code suivant affiche un champs de texte de largeur 40 caractères dans lequel on ne peut en écrire que 12.

Exemple :
<form>
<input type="text" size="40" maxlength="12"> <br>
<input type="submit" value="Valider" name="Envoi">
</form>

Résultat :


Remarque :
Il est courant pour les champs de texte destinés à l'accés de comptes ou de pages protégées de voir des champs de texte qui affichent des * (ronds) à la place des caractères entrés, ceci dans un but de sécurité. Pour cela, il vous suffit de remplacer text par password (littéralement mot de passe en anglais).
Ainsi, ce champs de texte réagira identiquement à un normal mais visuellement n'affichera pas les caractères entrés :

Créer un champs de texte multiligne :

Checkboxs / Boutons radio :

Créer une liste d'options :

Pour ce faire, nous utiliserons la balise <select> . Celle-ci renfermera les balises <option> qui contiendront les éléments de la liste.

Exemple :
<form>
<select>

<option>Element 1</option>
<option>Element 2</option>
<option>Element 3</option>

</select>
</form>

Résultat :
Element 1 Element 2 Element 3
Remarque :
Ajouter systèmatiquement l'attribut value à <option> est une bonne habitude à prendre. Dans celui-ci, vous indiquerez ce que représente chaque élément de la liste.

Aller plus loin :

En dehors des scripts, les listes d'options peuvent être converties en menu de reroutage. Celui-ci permettra d'amener le visiteur à une certaine page en le laissant choisir sa destination dans la liste d'option. Pour cela, JavaScript intervient exeptionnellement.

Dans le code suivant, il suffira juste de mettre la destination choisie en valeur de l'attribut value de la balise <option> de l'élément concerné.

Exemple :

<html>

<head>
<script language="JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
</head>

<body>
<select onChange="MM_jumpMenu('parent',this,0)">
<option value="http://www.jsand.net/Element_un.htm">Element1</option>
<option value="http://www.jsand.net/Element_deux.htm">Element2</option>
<option value="http://www.jsand.net/Element_trois.htm">Element3</option>
</select>
</body>

</html>

Utiliser mailto dans un formulaire :