Download
1 / 13
130 likes | 232 Views
Création de site internet. Complément sur l’HTML. La gestion par blocs. Les balises HTML se divisent en 2 catégories : En blocs : les uns en dessous des autres <p>, <ul>, <li>, <div>, <h1>...<h6>,... En ligne : les un à la suite des autres <a>, <strong>, <em>, <span>, <img>,...
E N D
Création de site internet Complément sur l’HTML
La gestion par blocs • Les balises HTML se divisent en 2 catégories : • En blocs : les uns en dessous des autres • <p>, <ul>, <li>, <div>, <h1>...<h6>,... • En ligne : les un à la suite des autres • <a>, <strong>, <em>, <span>, <img>,... • Il est possible d’imbriquer des blocs : • Une balise bloc peut contenir tout type de balise et avoir une largeur et une longueur • Une balise en ligne ne peut contenir que des balises en ligne !
Les blocs DIV • La balise la plus adaptée pour le positionnement est la balise DIV • Balise neutre (invisible) • Conteneur/délimiteur • Configurable à souhait (position, couleurs, tailles,...) • Utilisation du CSS • En ligne : <div style="color:#123">Bla</div> • Classes : <div class="monDiv">Bla</div>
Les classes CSS • Exemple de classe CSS : .bloc { width: 100px; height: 100px; background-color: yellow; margin-left: 15px; margin-top: 200px; }
Positionnement des blocs • Par défaut : • Se place en haut à gauche de son conteneur. • Prend toute la largeur de ce conteneur. • Grâce au CSS : • Modifier la position relative grâce aux marges • Changer la taille du bloc • Le CSS permet d’utiliser différentes mesures : • px : nombre de pixels • % : pourcentage de la taille du contenant • em : taille d’un caractère
Exemple (par marges) Body <div class="test"> • .test{ • Margin-top:30px; • Margin-left:10%; • Width:100px; • Height:50em; • }
Positionnement des blocs • Positionnement flottant • permet de positionner un bloc à gauche ou à droite dans un conteneur • Le reste du conteneur occupera alors l’espace laissé libre. • Permet par exemple de placer des images à droite : <div class="conteneur"> texte bla bla bla .... <img style="float:right;" .../> </div>
Positionnement des blocs • Positionnement absolu • Permet de donner un positionnement rigide • Seul moyen de superposer deux blocs • Retiré du « flux » HTML (n’interfèrera pas avec les autre) • Il est placé par rapport à son bloc conteneur
Exemple (position absolue) Body <div style="position:absolute;"> <div style="position:absolute; left:50px;top:50px;">
Les tableaux • Pour simplifier la mise en page • <table> : pour commencer un tableau • <caption> : pour le titre du tableau • <th> : Définit l'en-tête de chaque colonne • <tr> : Définit une ligne • <td> : Définit une cellule • Possible de spécifier un style pour chaque balise
Exemple <table border=1> <caption>Légende du tableau</caption> <tr> <th>Colonne 1</th> <th>Colonne 2</th> </tr> <tr> <td>Cellule 1</td> <td>Cellule 2</td> </tr> </table>
Alignement • align=left : (par défaut) Les données sont alignées à gauche de la cellule (pour td) ou de toutes les cellules (pour th ou tr) • align=right : Les données sont alignées à droite de la cellule (pour td) ou de toutes les cellules (pour th ou tr) • align=center : Les données sont centrées à l'intérieur de la cellule (pour td) ou de toutes les cellules (pour th ou tr) • valign=middle : (défaut) Les données sont centrées verticalement à l'intérieur de la cellule (pour td) ou de toutes les cellules (pour th ou tr) • valign=top : Les données sont en haut de la cellule (pour td) ou de toutes les cellules (pour th ou tr) • valign=bottom : Les données sont en bas de la cellule (pour td) ou de toutes les cellules (pour th ou tr) • valign=baseline : Toutes les données des cellules sont alignées sur une ligne commune (uniquement pour th ou tr)
Fusionner des cellules • Pour une ligne : • <td colspan=2>2 cellules fusionnées</td> • Pour une colonne : • <td rowspan=2>2 cellules fusionnées</td>
