Complément sur l’HTML
1
La gestion par blocsLes 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 longueurUne balise en ligne ne peut contenir que des
balises en ligne !
2
Les blocs DIVLa balise la plus adaptée pour le
positionnement est la balise DIVBalise neutre (invisible)Conteneur/délimiteurConfigurable à souhait (position, couleurs,
tailles,...)
Utilisation du CSSEn ligne : <div style="color:#123">Bla</div>Classes : <div class="monDiv">Bla</div>
3
Les classes CSSExemple de classe CSS :
.bloc {width: 100px;
height: 100px;
background-color: yellow;
margin-left: 15px;
margin-top: 200px;
}
4
Positionnement des blocsPar 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 margesChanger la taille du bloc
Le CSS permet d’utiliser différentes mesures :px : nombre de pixels% : pourcentage de la taille du contenantem : taille d’un caractère
5
Exemple (par marges)
6
Body
<div class="test">
.test{Margin-top:30px;Margin-left:10%;Width:100px;Height:50em;
}
Positionnement des blocsPositionnement 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>
7
Positionnement des blocsPositionnement absolu
Permet de donner un positionnement rigideSeul moyen de superposer deux blocsRetiré du « flux » HTML (n’interfèrera pas avec
les autre)Il est placé par rapport à son bloc conteneur
8
Exemple (position absolue)
9
Body
<div style="position:absolute;">
<div style="position:absolute;left:50px;top:50px;">
Les tableauxPour 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
10
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>
11
Alignementalign=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)
12
Fusionner des cellulesPour une ligne :
<td colspan=2>2 cellules fusionnées</td>Pour une colonne :
<td rowspan=2>2 cellules fusionnées</td>
13
Top Related