Placement du texte dans une page html
Zone de texte unique
Q5 / Avec l'éditeur « Notepad ++ » ou « Visual Studio Code », EFFECTUER la saisie des deux fichiers ci-dessous :
Q6 / MODIFIER la feuille de style pour avoir :
Couleur du fond d'écran : bleu
Couleur du texte : jaune
Couleur de la bordure : vert
Position de la balise h1 : top : 20px et left : 30px
Taille de la police : 30px
Validation professeur
Complément : Balise <div></div>
La balise <h1>< /h1> peut se révéler gênante si on a beaucoup de textes à gérer avec des propriétés très différentes.
La solution consiste à utiliser la balise <div></div> pour définir une zone de texte dans la page html.
Cette balise a comme attribut : id (identifiant).
En html, on écrit par exemple : <div id= "nomprenom"></div> où nomprenom est un repère pour css.
En css, on écrit alors : #nomprenom{}
Q7 / REPRENDRE les fichiers « 1_zone.html » et « 1_zone.css ». REMPLACER :
<h1>NOM PRENOM</h1> par <div id="nomprenom">< /div>
h1{} par #nomprenom{}
TESTER et VÉRIFIER que le rendu dans le navigateur n'a pas changé.
Gestion de plusieurs zones
On analyse la page suivante :
Q8 / A partir de la feuille de style Style_Turgot.css indiquée en Q10, INDIQUER, pour chaque zone de texte la taille des caractères.
Zone | 1 | 2 | 3 |
|---|---|---|---|
Taille des caractères (pixels) |
Q9 / INDIQUER l'espace pris par la zone de texte pour le nom du lycée en :
Hauteur (margin + border + height + padding) :
Largeur (margin + border + width + padding) :
Q10 / Avec l'éditeur « Notepad ++ », EFFECTUER la saisie fichiers html et css. TESTER.
Q11 / Dans la zone « presentation » CHANGER la valeur de top et left et PRENDRE 100px. CONCLURE sur cette div.