Ecole Supérieure de Technologie de Meknès(ESTM)
Département Génie Informatique
Prof. Samia NASIRI
TP N°3
EXERCICE 1:
Quelle est l’exécution de ce code html ?
Voici un tableau:
<TABLE BORDER="1">
<TR STYLE="background-color:red">
<TD STYLE="background-color:green">
<P STYLE="background-color:lime">puis un paragraphe sur
lequel est appliqué background-color:lime
ligne 1<br/>
ligne 2<br/>
ligne 3<br/>
ligne 4
</P>
<P>puis un paragraphe normal en green</P></td>
</TR>
<TR><TD>deuxième ligne</TD></TR></TABLE>
A noter : Le style le plus proche qui est appliqué
EXERCICE 2:
Quelle est l’exécution de ce code html ?
<!doctype html> <html> <body> <header>
<h1 style= "text-align:center; text-decoration:underline">
Margin et padding </h1></header>
<section>
<P STYLE="background-color:lime">
Ceci est un bloc sur lequel n'est appliqué que background-color:lime texte
texte texte texte texte texte </P> <P>Ceci est un bloc normal</P>
<P STYLE="margin: 15pt ; background-color:lime">
Ceci est un bloc sur lequel est appliqué margin: 15pt texte texte
texte texte texte texte texte </P>
<P>Ceci est un bloc normal</P>
<P STYLE="padding: 30pt ; background-color:lime">
Ceci est un bloc sur lequel est appliqué padding: 30pt texte texte
texte texte texte texte texte </P>
</section>
<footer style="position:absolute;bottom:0pt;left:60pt;color:red;">
<p> Remarque : padding est la marge intérieure <br/>
<span style="margin-left:60pt;">
margin est la marge extérieure. </span> </p> </footer> </body> </html>
EXERCICE 3:
1. Créer une section contenant un article contenant du texte,
2. Ajouter un titre de niveau 3 à l’élément « section »,
3. Attribuer une image de fond à l'élément body qui va remplir
tout l'espace de la page,
4. Attribuer une image de fond à l'élément article qui remplira
la zone centrale de celui-ci
(cette image sera fixe par rapport au défilement et non répétée),
5. Appliquer une couleur de fond jaune à la balise « section ».
6. Centrer le contenu de la balise « section » par rapport à la page ;
sachant que la largeur est: 40%.
EXERCICE 4:
Créez deux fichiers pour représenter la structure ci-dessous:
1. le premier en html5 pour le contenu
(utilisez les balises de strucure : nav, aside, section, et article),
2. et le deuxième « [Link] » pour la mise en forme.