Scribd
Importer
14 vues4 pages

Création d'une page HTML sur les cupcakes

cours html* cours css sti exercice

Transféré par

fradj hedi
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats RTF, PDF, TXT ou lisez en ligne sur Scribd
14 vues4 pages

Création d'une page HTML sur les cupcakes

cours html* cours css sti exercice

Transféré par

fradj hedi
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats RTF, PDF, TXT ou lisez en ligne sur Scribd

TP2 : HTML5 & CSS3

Questions :
1. Ecrire le code HTML suivant :
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" />
<title>Les cupcakes</title>
</head>
<body>
<h1>Vive les cupcakes</h1>
<p>J'ai découvert les cupcakes lors d'un voyage à New York et depuis c'est une
véritable passion. Sur mon site, vous saurez <strong>tout</strong> sur les
cupcakes !</p>
<p>Un cupcake ? C'est ça :</p>
<figure>
<img src="[Link]" alt="Cupcake" />
<figcaption>Un cupcake</figcaption>
</figure>
<p>Délicieux non ? Sur mon site, je vous présenterai :</p>
<ul>
<li>Les différentes variétés de cupcakes</li>
<li>Leur histoire</li>
<li>Leurs recettes</li>
</ul> </body></html>
2. Créez une feuille de style dans un fichier externe [Link].
La feuille de style décrira les différents éléments de la page web de la
manière suivante :
Style recommandé Code CSS
1. Corps du document :
 Couleur de fond : jaune background-color : yellow ;
 Marge gauche : 8 pixels margin-left : 8px ;
 Marge droite : 8 pixels margin-right : 8px ;
 Marge bas : 10 pixels margin-bottom : 10px ;
 Marge haut : 15 pixels margin-top : 15px ;
2. Titre de premier niveau
 Police : Verdana font-family : verdana ;
 Taille : 180% font-size : 180% ;
 Alignement : centré text-align : center ;
 Couleur de police : noir color : black ;
 Couleur d'arrière-plan : vert background-color : green ;
 un bord solide de 5 pixels et de couleur gris border : 5px solid grey ;
 première lettre de chaque mot en text-transform : capitalize ;
majuscule,
3. 1er paragraphe :
 Police : Georgia font-family :georgia ;
 Taille : 120% font-size :120% ;
 Indentation : 8 pixels text-indent: 8px;
 Alignement : justifié text-align : justify ;
 Couleur de police : bleu color : blue ;
 Couleur d'arri�re plan : transparent background-color : transparent ;
 Marge gauche : 8 pixels margin-left : 8px ;
 Marge droite : 16 pixels margin-right : 16px ;
ème
2 Paragraphe :
 Police : Georgia font-family : georgia ;
 Taille : 80% font-size : 80% ;
 Indentation : 10 pixels text-indent: 10px;
 Alignement : justifié text-align : justify ;
 Couleur de police : marin color : navy ;
 Couleur d'arrière-plan : transparent background-color : transparent ;
 Marge gauche : 8 pixels margin-left : 8px ;
 Marge droite : 16 pixels margin-right : 16px ;
4. Listes :
 Police : Verdana font-family : verdana ;
 Taille : 80% font-size : 80% ;
 Alignement : justifié text-align : justify ;
 Couleur de police : Vert foncé color : #003300 ;
(#003300)
 Couleur d'arrière-plan : transparent background-color : transparent ;
 Marge gauche : 10 pixels margin-left :10px ;
 Marge droite : 0 pixel margin-right :0px ;
5. Image
 Hauteur : 300 pixels height : 300px ;
 Largeur : 300 pixels width : 300px ;
 des bords arrondis de 120 px border-radius : 120px ;
6. Titres :
 Titres de deuxi�me niveau
o Police : Arial
o Taille : 100%
o Alignement : gauche
o Couleur de police : noir
o Couleur d'arri�re plan : transparent
 Titres de troisi�me niveau
o Police : Comic Sans MS
o Taille : 80%
o Alignement : gauche
o Couleur de police : bleu marine (navy)
o Couleur d'arri�re plan : transparent
7. Paragraphes :
 Police : Georgia
 Taille : 80%
 Indentation : 8 pixels
 Alignement : justifi�
 Couleur de police : bleu
 Couleur d'arri�re plan : transparent
 Marge gauche : 8 pixels
 Marge droite : 16 pixels
8. Listes :
 Police : Verdana
 Taille : 80%
 Alignement : justifi�
 Couleur de police : Vert fonc� (#003300)
 Couleur d'arri�re plan : transparent
 Marge gauche : 10 pixels
 Marge droite : 0 pixel
9. Liens :
 Non visit�s
o Couleur : rouge
o Couleur d'arri�re plan : transparent
o D�coration : soulign�
 Visit�s
o Couleur : noir
o Couleur d'arri�re plan : transparent
o D�coration : surlign�
 Survol�s
o Couleur : rouge
o Couleur d'arri�re plan : transparent
o D�coration : surlign�
[Link] :
 Police : Comic Sans MS
 Taille : 80%
 Alignement : centr�
 Couleur : gris fonc� (#696969)
 Couleur d'arri�re plan : blanc
 Bordures du tableau
o Couleur : bleu ciel (#00bfff)
o Style : ligne double
o Epaisseur : 2 pixels
 Bordures des cellules
o Couleur : bleu
o Style : ligne en trait plein
o Epaisseur : 1 pixel

Vous aimerez peut-être aussi