TP4 Solution

Lycée Aïn Draham HTML5 CSS3 Chedi Zaghdoudi
Soit la page TP4.htm suivante :
On veut Appliquer des modifications de style pour obtenir l’aperçu suivant :
Classe : 3SI Matière : STI

1
1. Lancer Sublim Text 3 et créer un fichier intitulé TP4.html.

2. Le titre de la page est « TP4 »
3. Mettre les métadonnées nécessaires pour que la page puisse être indexée
par un moteur de recherche et affichée par les appareils mobiles :
a. Meta name = "description" …
b. Meta name="keywords" …
c. Meta name="author" …
d. Meta name="viewport" …
4. Créer le titre de niveau 1 « Travaux pratiques N°4 » dans la zone entête de
la page web.
5. Créer la première section contenante :
a. Un titre de niveau 3 (Titre 1 : Lorem ipsum dolor)
b. Une image représentant le logo de HTML5 ayant l’identificateur "i1".
c. Une zone indépendante (aside) contenant du texte brut.
d. Deux paragraphes ayant comme identificateurs p1 et p2.
6. Créer la deuxième section contenante :
a. Un titre de niveau 3 (Titre 2: Pellentesque habitant)
b. Une image représentant le logo de CSS3 ayant l’identificateur "i2".
c. Un paragraphe ayant comme identificateur p3.
d. Une liste ordonnée :
e. Un paragraphe ayant comme identificateur p4.

7. Créer un pied de page contenant les renseignements d’usage : le nom de
l’auteur, son mail et le copyright 2021-3SI-STI-TP4.
8. Créer un fichier CSS externe et renommer-le par tp4.css.
9. Mettre en forme le titre <h1> au centre de la page avec une taille de 4em
ayant une ombre rouge de 4 pixels située au-dessus et à droite avec un flou
de 2 pixels.

2
10. Mettre les titres <h3> à gauche avec une taille de 2em ayant une ombre grise
de 5 pixels située au-dessus et à droite avec un flou de 4 pixels. Le style
étant en italique.
11. Créer une lettrine pour chaque paragraphe de la page de taille 40 pixels,
de style italique et de couleur « magenta ».
12. Ajouter une classe « para » ayant les règles CSS ci-dessous et l’appliquer à
tous les paragraphes de la page :
13. Personnaliser la présentation de la liste ordonnée <ol> et fixer l’indentation

à la valeur de 15ex et appliquer un style de position "inside".
14. L’image ayant comme identificateur "i1" doit être positionnée flottante à
gauche avec des marges de 20 pixels et dimensionnée avec une largeur et
une hauteur de 10%.
15. L’image ayant comme identificateur "i2" doit être positionnée flottante à
droite avec des marges de 10 pixels et dimensionnée avec une largeur et
une hauteur de 8%.
16. La zone indépendante <aside> est flottante à droite, dimensionnée avec une
largeur de 200 pixels, munie d’une bordure en rouge de taille 2 pixels
solide et des marges de 10 pixels. Le texte de la zone est en italique et
l’arrière-plan est de couleur ayant pour code hexadécimal #CCC.
17. Le pied de la page doit être au centre et de couleur d’arrière-plan orange.

3
<!DOCTYPE html>
<html>
<head>
<title>TP4 </title>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Chedi ZAGHDOUDI">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" type="text/css" href="Style04.css">
<body>
<header>
<h1>Travaux Pratiques N°4</h1>
</header>
<section>
<h3> Titre 1 : Lorem ipsum dolor</h3>
<img id="i1" alt="HTML5 et CSS3" src="../TP4
CSS3/logohtml5.png">
<aside>
Proin euismod pretium lorem, a pellentesque magna
vestibulum sit amet. Cras at semper justo, vel bibendum ipsum. Nam nec
dui fermentum sem mattis pretium. Aenean et mi gravida risus lacinia
lacinia non in nisl. Nunc dapibus leo est, vel finibus leo ultrices nec. In
fringilla, eros a tincidunt imperdiet, massa libero scelerisque libero, vitae
pretium felis tellus eget elit. Nunc et accumsan ex. Nam dapibus felis sed

4
ante venenatis volutpat. Duis eget erat sollicitudin, hendrerit turpis eget,
molestie tortor. Nullam id orci et nunc dignissim accumsan non eu ipsum.
Vivamus eu augue convallis, facilisis ligula in, gravida lorem. Proin
vulputate urna a ipsum aliquet, facilisis iaculis ligula ultricies.
</aside>
<p id="p1" class="para">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer tempor luctus turpis, quis
condimentum eros aliquet non. Mauris metus magna, aliquam tincidunt
nulla ut, pretium elementum leo. Duis ultricies finibus diam, vitae
venenatis elit imperdiet eget. Integer ut leo nec magna elementum
convallis sit amet nec eros. </p>
<p id="p2" class="para"> Quisque et ante libero. Fusce
bibendum dignissim pharetra. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi id leo in metus hendrerit dictum a eget nunc.
Suspendisse in ante venenatis tortor lobortis pulvinar. Etiam nisl enim,
consectetur ut tortor ut, lacinia vestibulum nisi. Suspendisse a tortor eget
metus commodo sollicitudin. Cras a nulla tortor. Mauris nibh nisi, tempor
in dui sit amet, volutpat tempor enim. Sed vehicula nunc vel velit sodales,
semper commodo nulla porttitor.</p>
</section>
<section>
<h3> Titre 2: Pellentesque habitant</h3>
<img id="i2" alt="HTML5 et CSS3" src="../TP4
CSS3/logocss3.png">
<p id="p3" class="para"> Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. In quis tempor
ante, eu euismod ex. Aliquam quam turpis, elementum in bibendum non,
auctor quis quam. Integer placerat eu neque vel sagittis. Proin varius
gravida justo eget auctor. Pellentesque egestas efficitur elit. Mauris ornare

5
elit dui, sed eleifend nisi pharetra et. Maecenas at risus vitae magna
ullamcorper pretium at dignissim augue. Donec laoreet est non interdum
condimentum.</p>
<ol type="1">
<li>Cras a nulla</li>
<li>Mauris nibh</li>
<li>Suspendisse a tortor</li>
</ol>
<p id="p4" class="para"> Fusce venenatis libero dui, vitae

rhoncus massa mattis ut. Sed consectetur lacus ante, id rhoncus justo
pulvinar ut. Integer dictum nisi in nisl vehicula condimentum.Maecenas
dignissim, nisl vitae scelerisque elementum, sem erat finibus turpis, sit
amet tempor enim nisl quis lorem. Suspendisse sagittis auctor est, ut
laoreet lorem aliquet quis.</p>
</section>
<footer>
Contact avec l'auteur : <a id="auteur"
href="mailto:chedi.zaghdoudi@gmail.com">
chedi.zaghdoudi@gmail.com</a>
</footer>
</body>
</html>

6
header h1 {
font-size: 2em;
text-shadow: 4px -4px 2px #F00;
text-align: center; }
h3{ font-size: 1em;
text-shadow: 5px -5px 4px gray;
text-align: left;
font-style: italic; }
p:first-letter{
font-size: 40px;
font-style: italic;
color: magenta;
}
.para{
text-align: justify;
background-color: #CCC;
text-indent: 5%;
}
ol{
text-indent: 15ex;
/*background-color: #CFF;*/
list-style-position:inside;
}
#i1{
float: left;
margin:10px;
width: 10%;
height: 10%; }

7
#i2{
float: right;
margin:10px;
width: 8%;
height: 8%;
}
aside{
float:right;
border : 2px solid red;
width: 200px;
margin:10px;
font-style: italic;
background-color: #CCC;
}
footer{
float: center;
background-color: orange;
}

8

TP4 Solution

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

TP4 Solution

Transféré par

Droits d'auteur :

Formats disponibles

Lycée Aïn Draham HTML5 CSS3 Chedi Zaghdoudi

Soit la page TP4.htm suivante :

On veut Appliquer des modifications de style pour obtenir l’aperçu suivant :

Classe : 3SI Matière : STI

1. Lancer Sublim Text 3 et créer un fichier intitulé TP4.html.

e. Un paragraphe ayant comme identificateur p4.

Classe : 3SI Matière : STI

13. Personnaliser la présentation de la liste ordonnée <ol> et fixer l’indentation

Classe : 3SI Matière : STI

Classe : 3SI Matière : STI

Classe : 3SI Matière : STI

<p id="p4" class="para"> Fusce venenatis libero dui, vitae

Classe : 3SI Matière : STI

Classe : 3SI Matière : STI

Classe : 3SI Matière : STI

Vous aimerez peut-être aussi