La plupart des balises peuvent être ranger dans l’une des catégories suivantes :
Votre page web sera en fait constituée d'une série de blocs les uns à la suite des autres. Une balise de type block occupe toute la largeur disponible.
Avec la propriété Display, il est possible de transformer n'importe quel élément de votre page d'un type vers un autre. Cette propriété peut prendre une des valeurs suivantes :
Essayons de voir chaque valeur avec un exemple concret
Les liens vers les principaux points d’un cours de mathématiques
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
</head>
<body>
<a href="#LI" class="titre1">I. EQUATION DU PREMIER DEGRE A UNE INCONNUE </a>
<a href="#LI1" >I.1 Définitions </a>
<a href href="#LI11">I.1.1 Equation </a>
<a href href="#LI112">I..1.2 Equation à une inconnue </a>
<a hrefhref="#LI13" >I.1.3 Equation du premier degré </a>
<a href href="#LI14">I.1.4 Equation du premier degré à une inconnue </a>
<a href href="#LI2">I.2 Résolution </a>
<a hrefhref="#LI21" >I.2.1 1ere méthode </a>
<a href="#Ex1" >Exemple 1 </a>
<a href="#LI22" >I.2.2 2e méthode </a>
<a href="#Ex3" >Exemple 3 </a>
<a href="#LI3" >I.3 Equations particulières </a>
<a href="#Ex4" >Exemple 4 </a
</body>
</html>
Les liens s’affichent les uns à côté des autres :
Pour faire en sorte qu’ils (les liens) se placent les uns en dessous des autres, on peut utiliser <br/>, mais avec cette balise, les liens seront toujours de type inline et il n’y aura pas moyen de les redimensionner. La meilleure solution est de les transformer en type block : avec cette transformation, ils vont se placer les uns en dessous des autres et nous auront la possibilité de les redimensionnées.
a
{
display:block;
}
Résultat:
Essayez d’ajouter des bordures, vous verrez qu’elles occuperont toute la largeur car les liens sont maintenant de type block.
Deux paragraphes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation en HTML et CSS</title>
</head>
<body>
<p class="para1">C’est un groupe formé essentiellement de meilleurs étudiants de nos groupes d’étude et d’encadrement
qui se sont fixés plusieurs objectifs dont le premier est celui du partage de la connaissance en Informatique et en
mathématique. </p>
<p class="para2">
Albert Einstein a dit : « Il ne faut pas faire de l’intelligence un dieu,
car si celleci est douée de muscles puissants, elle n’a pas de personnalité » …<br/>
Parfois, il n’existe pas de gens plus intelligents que les autres, mais c’est le travail qui nous différencie.
Pour bâtir haut, il faut creuser profond et tu seras fort dans ce que tu te donnes. </p>
</body>
</html>
Comme vous le savez, les deux paragraphes vont se placer l’un en dessous de l’autre même si on modifie leurs largeurs :
Pour qu’ils se placent l’un à la suite de l’autre, il suffit de transformer leur type en inline.
Table de matières sous forme des liens
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation en HTML et CSS</title>
</head>
<body>
<a href="#LI">I. EQUATION DU PREMIER DEGRE A UNE INCONNUE</a> <br/>
<section class="sous">
<a href="#LI1" >I.1 Définitions </a> <br/>
<a href="#LI11">I.1.1 Equation </a> <br/>
<a href="#LI112">I..1.2 Equation à une inconnue</a> <br/>
<a href="#LI13" >I.1.3 Equation du premier degré</a> <br/>
<a href="#LI14">I.1.4 Equation du premier degré à une inconnue</a> <br/>
<a href="#LI2">I.2 Résolution </a> <br/>
<a href="#LI21" >I.2.1 1ere méthode</a> <br/>
<a href="#Ex1" >Exemple 1</a> <br/>
<a href="#LI22" >I.2.2 2e méthode</a> <br/>
<a href="#Ex3" >Exemple 3 </a> <br/>
<a href="#LI3" >I.3 Equations particulières</a> <br/>
<a href="#Ex4" >Exemple 4 </a> <br/>
</section>
<a href ="#LII">II. EQUATIONS REDUCTIBLES AU PREMIER DEGRE </a> <br/>
<section class="sous">
<a href="#LII1" >II.1 EQUATIONS PRODUITS A. B . C … = 0 </a> <br/>
<a href="#Ex5" >Exemple 5 </a> <br/>
<a href="#Ex6" >Exemple 6 </a> <br/>
<a href="#Ex7" >Exemple 7 </a> <br/>
<a href ="#LII2">II.2. EQUATIONS FRACTIONNAIRES </a> <br/>
<a href="#Ex8" >Exemple 8 </a> <br/>
<a href="#Ex9" >Exemple 9 </a> <br/>
<a href="#LII3" >II.3 EQUATIONS CONTENANT DES VALEURS ABSOLUES </a> <br/>
<a href="#Ex10" >Exemple 10 </a> <br/>
<a href="#Ex11" >Exemple 11 </a> <br/>
</section>
< a href="#LIII" >III. PROBLEMES DONT LA RESOLUTION CONDUIT A UNE EQUATION DU PREMIER DEGRE A UNE INCONNUE </a> <br/>
<section class="sous">
<a href="#Ex12" >Exemple 12 </a> <br/>
<a href="#Ex13" >Exemple 13 </a> <br/>
</section>
<a href ="#LIV">IV. EXERCICES RESOLUS </a> <br/>
</body>
</html>
J’aimerai afficher au départ seulement les quatre principaux points et cacher les sous points :
.sous
{
display: none;
}
Résultat:
Pour faire apparaître ces éléments (les sous points pour notre exemple) par la suite, on devra faire appel à JavaScript par exemple.
Même fichier html de l’exemple 2, on avait obtenu le résultat suivant :
Pour que les deux blocs se positionnent l’un à côté de l’autre et qu’on ait la possibilité de les redimensionner (leur donner des tailles précises), on doit les transformer en type inline-block.
.para1
{
display: inline-block;
border: 2px blue solid;
width: 40%;
}
.para2
{
display: inline-block;
border: 2px blue solid;
width: 40%;
}
Résultat:
Vous avez sans doute remarqué que les deux éléments se sont alignés sur une même ligne de base (appelée baseline). Lorsque les éléments sont transformés en inline-block, nous avons la possibilité de modifier leur alignement vertical grâce à la propriété vertical-align. Voici quelques-unes des valeurs possibles pour cette propriété :
.para1, .para2
{
display: inline-block;
vertical-align: top;
border: 2px blue solid;
width: 40%;
}
Résultat: