TP 3 HTML, CSS
Rappels
Dans une page HTML, chaque élément de type block est représenté par une boîte rectangulaire.
Cette boîte fait sens avec ce que nous avons vu dans le chapitre précédemment. Les bordures
de couleur autour des éléments dessinaient tout simplement les extrémités de la boîte.
Le modèle de boîte peut être ajusté et modifié grâce à des propriétés particulières. Le schéma
ci-après illustre le modèle de boîte avec les propriétés incontournables
: margin:, border: et padding:.
On remarque que le modèle de boîte est évolutif et ajustable et fait penser à une poupée russe.
La boîte centrale, celle du contenu de la balise, est matérialisée en bleu clair.
Marge intérieure (padding:)
Autour de la boîte centrale et donc du contenu, on distingue la marge intérieure. Elle est
représentée en CSS grâce à la propriété padding:.
Bordure (border:)
La bordure est une zone intercalée entre les marges intérieure et extérieure. On peut
matérialiser ou non cette limite. C'est à l'aide de cette propriété que dans le chapitre précédent
nous avons mis en valeur les différents types de boîtes. Elle est représentée en CSS avec la
propriété border:.
Marge extérieure (margin:)
La marge extérieure correspond à la limite extrême de la boîte et représente la distance entre
deux boîtes. En CSS, on utilise la propriété : margin:.
Largeur (width:) et hauteur (height:) d'une boîte
Au risque de se répéter : chaque élément d'une page HTML est une boîte rectangulaire. Nous
venons de découvrir que nous pouvions jouer sur certaines propriétés d'une boîte pour gérer les
marges et la bordure. Intéressons-nous désormais à la place qu'occupe une boîte. Comment
la taille d'une boîte est-elle calculée exactement ?
Taille Calcul
width: width + padding-left + padding-right + border-left + border-right
height: height + padding-top + padding-bottom + border-top + border-bottom
La marge extérieure est unique dans le sens où elle n'affecte pas la taille de la boîte.
Exercice 1:
Faire disparaître l'élément #hidden, en agissant sur la propriétés display.
<body>
<p>Le <strong>Moscow mule</strong> est un cocktail à base de lait et de jus de
framboise.</p>
<p id="hidden">Un <strong>French Connection</strong> est un cocktail composé de
parts égales de citron et thé.</p>
<p>Le <strong>Long Island Iced Tea</strong> est un cocktail à base de thé et
d'oranges.</p>
</body>
Exercice 2:
Limiter la largeur du <h1> à 50 % et augmenter la hauteur à 150px, en fesant appel aux
propriétés width et lenght
<body>
<h1>Préparer un cocktail</h1>
<p>Il existe différentes façons de réaliser un cocktail : au verre à mélange, au shaker ou
directement au verre.</p>
</body>
h1 {
background: yellow;
}
Exercice 3:
Définir une marge externe gauche de 30px pour le h1.
<body>
<h1>Basil Smash</h1>
<p>Le Basil Smash est un cocktail rafraîchissant de gin, de citron, de sirop de sucre et de
basilic frais.</p>
</body>
h1 {
background: lightblue;
}
Exercice 4:
Utiliser le raccourci le plus minimaliste possible pour définir les marges externes de #super haut
et bas à 50px et celles des côtés droit et gauche à 25px.
<body>
<h1 id="super">B-52</h1>
<p>Le B-52 est un cocktail composé en proportions égales de Kahlua, de Baileys et de
Cointreau.</p>
</body>
#super {
background: powderblue;
}
Exercice 5:
Définir une marge interne en bas de l'élément h1 de 30px.
<body>
<h1>Basil Smash</h1>
<p>Le Basil Smash est un cocktail rafraîchissant de gin, de citron, de sirop de sucre et de
basilic frais.</p>
</body>
h1 {
background: lightblue;
}
Exercice 6:
Déterminer une marge interne pour tous les côtés de 5px pour l'élément .mega
<body>
<h1 class="mega">Angel Face</h1>
<p>L'Angel Face est un cocktail à base de gin, de calvados et de liqueur d'abricot.</p>
</body>
.mega {
background: powderblue;
}
Exercice 7:
Définir une bordure solide rouge de 5px tout autour de l'élément h1.
<body>
<h1>Basil Smash</h1>
<p>Le Basil Smash est un cocktail rafraîchissant de gin, de citron, de sirop de sucre et de
basilic frais.</p>
</body>
h1 {
font-size: 26px;}
Exercice 8:
Définir une couleur différente avec le nom de votre choix pour les deux paragraphes.
<body>
<p class="b-52">Le B-52 est un cocktail composé en proportions égales de Kahlua, de
Baileys et de Cointreau.</p>
<p class="basil-smash">Le Basil Smash est un cocktail rafraîchissant de gin, de citron,
de sirop de sucre et de basilic frais.</p>
</body>
body {
font-size: 14px;
}
Exercice 9:
Définir une couleur différente avec un code hexadécimal pour les éléments <span> et <h1>.
<body>
<h1>Tequila sunrise</h1>
<p>Le <span>Tequila sunrise</span> est un cocktail à base de tequila, de jus d'orange,
et de grenadine.</p>
</body>
body {
font-size: 14px;
}
Exercice 10:
Centrer horizontalement les paragraphes à l'intérieur du premier élément <div>.
<body>
<div class="super1">
<p>Le Moscow mule est un cocktail à base de vodka, de bière de gingembre épicée et
de jus de citron vert, accompagné d'une rondelle de citron.</p>
<p>Le Long Island Iced Tea est un cocktail à base de tequila, de gin, de vodka, de rhum
et de liqueur d'oranges.</p>
</div>
<div class="super2">
<p>Un French Connection est un cocktail composé de parts égales de cognac et
d'amaretto.</p>
<p>Le Tequila sunrise est un cocktail à base de tequila, de jus d'orange, et de
grenadine.</p>
</div>
</body>
body {
font-size: 14px;
}
Exercice 12 :
Écrire le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous, en utilisant
l'image ci-dessous.
• Nyan cat
• Bleu : #0f4d8f
Exercice 13:
Modifier le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous, en
utilisant les images suivantes.
• Carré noir
• Carré blanc
• Carré rouge
<body>
<table></table>
</body>
img {
display: block;
}
table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
td {
padding: 20px;
border: 1px black solid;
}
Exercice 14 :
Écrire le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous, en utilisant
les images ci-après.
• Fond
• Planète 1
• Planète 2
• Planète 3
Exercice 15:
Écrire le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous, en utilisant
les codes couleurs et l'image ci-après.
• Image
• Couleur de fond : #e0e2e8
• Vert : #36a23e
• Orange : #ff6633
• Fushia : #cc0066
La famille de police à utiliser est : Verdana.
Exercice 16 :
Écrire le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous, en utilisant
l'image ci-après.
• Squeezie
• SolaryFortnite
• Gotaga
• Couleur bleu : #008CBA
• Couleur noire : #555555
• Couleur verte : #4CAF50
• Police : monospace
