Bienvenu au second niveau
Les balises qui se croisent
Alors si les balises sont croisées, votre navigateur risque de ne pas interpréter votre code. Et si c'est le cas il affichera autre chose que ce dont vous essayer de faire!
| Faux : | |
| Correct : |
Alignement
Alors nous allons commencer avec la paire de balises qui va permettre l'alignement du texte. C'est à nouveau la paire de balises
<div> et </div>. Tout comme <font> ils ne font rien sans leur fonction supplémentaire.
Alors la fonction qui les rends utile est la fonction align="" et entre les "" il faut écrire ou "left", ou "center" ou "right".
Petit cours d'anglais : left = gauche, center = centre et right = droite.
Votre texte sera aligné comme ceci : |
Je suis à gauche |
Votre texte sera aligné comme ceci : |
Je suis au centre |
Votre texte sera aligné comme ceci : |
Je suis à droite |
Note : Tout ce qui se trouve entre ces balises (tableaux, images...) sera aligné comme le texte...
Tableaux
Pour commencer un tableau il suffit des balises <table> et </table>, comme d'habitude une balise pour ouvrir et une balise pour fermer. Par contre c'est pas fini à l'intérieur des balises <table> et </table> vous avez encore des balises : les balises qui vont représenter une rangée: <tr> et </tr> et encore entre <tr> et </tr> les balises qui vont représenter une colonne: <td> et </td>.
Alors la logique veut que si vous souhaitez ajouter une rangée à votre tableau il faut ajoutée la paire de balises <tr>. Et si vous voulez ajouter une colonne à votre rangée il faut ajoutée la paire de balises <td>.
<tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> |
|
Attention! Même si vous ne voulez qu'une seule colonne dans votre rangée, il faut quand même ajouter la paire de <td> pour indiquer l'existence de la colonne.
Formats tableau
Votre tableaux ne s'affiche pas!!! C'est normal il manque quelque chose.
Maintenant que nous savons réalisé un tableau je vais vous montrer les différentes fonctionnalitées.
Sur la balise d'ouverture du tableau <table> vous pouvez ajouter des fonctions tout comme le
<div> ou le <font>. Les fonctions que nous allons voir sont:
Border va servir à définir la taille des bordures de votre tableau. Donc si vous ne mettez rien dans <table>, votre tableau existera mais il sera invisible car les bordures seront à 0. La taille de la bordure peut être choisie en mettant un chiffre; "0" qui signifie : pas de bordure.
Bordercolor va servir à définir la couleur de la bordure. Il suffit d'ajouter les couleurs entre les "" comme vu précédemment pour le texte.
Bgcolor va servir à définir la couleur de fond du tableau. Ca fonctionne pareille que le bordercolor. Vous pouvez aussi ajouter cette fonction aux <tr> et aux <td> de manière à ne que colorier une zone spécifique du tableau.
Width va servir à définir la largeur de votre tableau. Tout comme le <hr>, le % définit son étendu.
Note: width peut fonctionner avec le % pour définir une étendue spécifique.
Heigth va définir la hauteur de votre tableau. Contrairement au width, height ne fonctionne pas avec %, puisque la hauteur de la page est illimitée.
Listes
Alors vous avez deux types de listes, numérotées et non numérotées! La balise numérotée est <ol> et la balise pour une liste non numéroté est <ul>. Bien sur comme vous avez déjà appris, elles viennent avec leurs partenaires de fermeture </ol> et </ul>. Et pour chaque ligne de la liste vous aurez les balises </li> et </li>
| Liste numérotée | |
<li>Un</li> <li>Deux</li> <li>Trois</li> </ol> |
|
| Liste non numérotée | |
<li>Un</li> <li>Deux</li> <li>Trois</li> </ul> |
|
Fond
Vous pouvez ajouter une couleur unique comme fond en ajoutant cette fonction : bgcolor="" à votre balise <div> tout comme la balise <table>.
Tapez <div bgcolor="red"> et découvrez ce qui advient de votre page