Médiaforma

PHP MySQL – Exercice HTML CSS

Print Friendly

Je vous propose maintenant de faire un exercice afin de confirmer que tout ce qui a été dit jusqu’ici est bien acquis. Cela ne devrait pas vous prendre plus de dix minutes. Voici l’énoncé.

Définissez un document HTML qui fait référence à la feuille de styles externe styles.css.

Insérez un titre de niveau 1, un titre de niveau 2, une image trouvée dans les mémoires de masse de votre ordinateur et un peu de texte issu de la page http://fr.lipsum.com/.

Utilisez du code CSS pour modifier la police du document. Choisissez la police Comic Sans MS, italique, de corps 18px et de couleur SlateBlue.

Voici le résultat à obtenir.

Solution

Voici le document HTML :

<!DOCTYPE html>

<html>

<head>

<meta charset= »UTF-8″ />

<link rel= »stylesheet » href= »styles.css » />

<title>Un document mis en forme en CSS</title>

</head>

<body>

<h1>Lorem Ipsum</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<h2>Sous-titre</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

<img src= »elephant.jpg »>

</body>

</html>

Et le fichier styles.css :

* {

font-family: ‘Comic Sans MS’;

font-style: italic;

font-size: 18px;

color: SlateBlue;

}

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply