Scribd
Importer
5 vues3 pages

TP CSS : Exercices HTML et Styles

Le document présente des exercices pratiques sur l'utilisation de HTML et CSS. Chaque exercice demande de créer des fichiers HTML et CSS, d'ajouter des styles et de lier les fichiers CSS aux documents HTML. Les exercices couvrent des éléments de base tels que les titres, les paragraphes et l'application de styles via des sélecteurs CSS.

Transféré par

chaabenmaram056
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 PDF, TXT ou lisez en ligne sur Scribd
5 vues3 pages

TP CSS : Exercices HTML et Styles

Le document présente des exercices pratiques sur l'utilisation de HTML et CSS. Chaque exercice demande de créer des fichiers HTML et CSS, d'ajouter des styles et de lier les fichiers CSS aux documents HTML. Les exercices couvrent des éléments de base tels que les titres, les paragraphes et l'application de styles via des sélecteurs CSS.

Transféré par

chaabenmaram056
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 PDF, TXT ou lisez en ligne sur Scribd

TP 5 CSS

Exercice 1

1) Saisir le code HTML suivant et l’enregistrer sous [Link] :

<h1>Ceci est un titre</h1>


<h2>Ceci est un sous titre</h2>
<p>Ceci est un <strong>paragraphe</strong>. </p>

2) Ajouter le code CSS suivant au fichier [Link]

<style>
h1
{
text-align: center;
background-color: red;
}
h2
{
font-family: Verdana;
font-style: italic;
color: green;
}
</style>

Exercice 2

1) Saisir le code HTML suivant et l’enregistrer sous [Link] :

<h1>Ceci est un titre</h1>


<h2>Ceci est un sous titre</h2>
<p>Ceci est un premier <strong>paragraphe</strong>. </p>
<p id="para_2">Ceci est un deuxième <strong>paragraphe</strong>.</p>
<p class="para_3">>Voici un troisième <strong>paragraphe</strong>.</p>

2) Saisir le code CSS suivant et l’enregistrer sous [Link]

#para_2
{
font-style: italic;
color: green;
}
.para_3
{
font-style: normal;
color: blue;
}

3) Associer le fichier CSS [Link] au fichier [Link] en utilisant :


<link rel="stylesheet" type="text/css" href="[Link]">
Exercice 3

1) Saisir le code HTML suivant et l’enregistrer sous [Link] :


<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Voici mon site</title>
</head>
<body>
<h1>Hello World! Ceci est un titre</h1>
<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>
</body>
</html>

2) Saisir le code CSS suivant et l’enregistrer dans un dossier « CSS » sous le nom [Link]
h1
{
text-align: center;
background-color: red;
}
p
{
font-family: Verdana;
font-style: italic;
color: green;
}

3) Associer le fichier CSS [Link] au fichier [Link]

Exercice 4

1) Saisir le code HTML suivant et l’enregistrer sous [Link] :

<!DOCTYPE html>
<html>
<head>
<title>Premiers pas CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Un essai en CSS</h1>
<p>
Ma première page avec du <strong>CSS</strong>.
</p>
</body>
</html>
2) Créer le fichier [Link] pour obtenir l'affichage suivant :

Exercice 5

1) En utilisant le HTML suivant.


<html>
<head>
<title>Premiers pas CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Un essai avec des styles</h1>
<h2>Titre de la 1ere section</h2>
<p>Titre 1</p>
<h2>Titre de la 2eme section</h2>
<p>Titre 2</p>
<h2>Titre de la 3eme section</h2>
<p>Titre 3</p>
<h2>Titre de la 4eme section</h2>
<p>Titre 4</p>
</body>
</html>

Créer le fichier [Link] pour obtenir l'affichage suivant :

Vous aimerez peut-être aussi