Vous êtes sur la page 1sur 6

Mme Hadhami Issaoui

Exercice 1:
Maintenant que vous savez structurer une page HTML, nous allons passer au style d’une page,
autrement dit le coté graphique du site. Vous imaginez un site avec seulement du HTML ? Autant
revenir au minitel !
Pour mettre du style dans une page web, il faut utiliser un nouveau langage que l’on appelle CSS
(Cascading Style Sheets) littéralement en français « les feuilles de style en cascade ».
Alors comment ça marche ? Il y a plusieurs méthodes pour coder du CSS dans une page. La
meilleure solution consiste à séparer le code CSS du code HTML dans un souci de clarté.
De ce fait, créez deux fichiers :
- Le premier contient la page index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Mes séries</h1>
</body>
</html>

- Le deuxième style.css sera la feuille de style contenant le code CSS

h1{
color : red;
}

Mais alors comment dire à notre page HTML qu'elle doit utiliser le style de notre page CSS ?! Sur
la page index.html vous pouvez remarquer une ligne de code

<link rel="stylesheet" href="style.css" />


Celle-ci se code entre les balises <head> </head> et permet de lier le code HTML à notre page CSS.

1
Mme Hadhami Issaoui

Étudions cette balise. L’attribut « rel » précise que le document en question est une feuille de style
externe. L’attribut « href » permet de spécifier le chemin du fichier CSS.

1- Créez les deux fichiers et observez le résultat.


2- Dans la feuille de style (style.css), ajoutez la ligne suivante :
text-align: center;

Vous aurez une feuille de style qui ressemble :

h1 {
color: red;
text-align: center;
}
3- Validez et observez !
4- Ajoutez le code suivant à la page accueil.html :

<p>
Une série télévisée (en abrégé série, ou familièrement série télé) est une œuvre de fiction
audiovisuelle, composée d'épisodes construits autour d'éléments communs (personnages, décors
et/ou thèmes récurrents), conçue pour être diffusée à la télévision.
</p>
5- Maintenant vous savez changer en CSS la couleur, et l’alignement de balises <h1> </h1>.
Pourquoi ne pas changer la police de celles-ci, voire d'un paragraphe ?
Pour ce faire c'est très simple. Voici l'instruction CSS :
p{
font-family: votre police;
}
Ci-dessus vous pouvez trouver :
- le selecteur "p" qui représente les paragraphes de votre page HTML,
- "font-family" est la propriété CSS des polices,
- "comic sans ms" est la police que vous allez affecter au paragraphe dans page1.html.

Ajoutez à la feuille de style style.css la ligne suivante :

p{
font-family: comic sans ms;
}

2
Mme Hadhami Issaoui

6- Maintenant, imaginons que nous ayons besoin de sélectionner seulement quelques mots à
l’intérieur d’un paragraphe et de les styliser… Comment faire ?... Il y a une solution pour
tout en HTML/CSS ! Il existe justement une paire de balises nommées <span>
</span> faites pour cela. Il suffit à l’intérieur de votre page HTML de mettre entre les
balises <span> </span> votre texte et de le sélectionner en CSS.
- Mettez le texte suivant dans le paragraphe entre les balises <span> et </span> : œuvre
de fiction audiovisuelle.
- la feuille de style style.css, codez la ligne suivante :

span {
font-weight: bold;
}
- Enregistrez et visualisez le résultat.
7- Dans style.css vous devez mettre le contenu des balises <span> </span> de couleur bleu et
d'une taille de 2em en utilisant les deux propriétés suivantes :

font-size: 2em;
color :blue ;

Exercice 2:
Dans un dossier nommé Exercice2 créez une image appelée « image.png » et les 2 pages suivantes:
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Les films par genre</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img src="image.png"/>
<ul>
<li>Action</li>
<li>Aventure</li>
<li>Comédie</li>
<li>Drame</li>
</ul>
</body>
</html>
Style.css
body {
background-color: #A5C8E6;
text-align: center;
}

3
Mme Hadhami Issaoui

Maintenant que vous commencez à vous familiariser avec le CSS, nous allons rentrer un peu plus
dans le détail avec la construction d'un menu !
Pour cela nous allons utiliser les listes, rappelez-vous les balises <ul> </ul> et <li> </li> !
- index.html possède déjà une liste
- style.css permet la mise en place d'un "arrière-plan" de couleur bleu (background-color) et
d'aligner le texte au centre de la page
Pour démarrer notre menu nous allons styler notre liste en lui ajoutant un arrière-plan "blanc", de ce
fait nous obtiendrons un contraste avec la page entière.
1- Sur la page style.css ajoutez le code suivant :
ul {
background-color: #FFFFFF;
}
2- Validez et observez le résultat
3- Avant de continuer sur les listes, voici un petit "truc et astuce". Pourquoi ne pas agrandir
l'image de notre page index.html ?
Nous avons une seule image sur notre page alors nous pouvons utiliser le "sélecteur CSS" img.
Deux attributs sont nécessaires pour redimensionner, width et height :
- width permet de spécifier la largeur de l'image
- height permet de spécifier la hauteur de l'image

Dans notre page style.css, ajoutez le code suivant:


img {
width: 400px;
height: 200px;
}

4- Maintenant que vous savez utiliser un arrière-plan (background-color), je vous propose de


rajouter celui-ci et une bordure afin de styliser notre liste toujours un peu plus...
Nous allons utiliser la "propriété CSS" border qui permet de spécifier une bordure. Celle-ci attend
une valeur composée de trois parties : la taille de la bordure, le type de bordure, et la couleur.
Imaginons que nous voulons une bordure de cinq pixels d'épaisseur, avec des pointillés et de
couleur bleu, alors nous allons coder :
ul {
border: 5px dotted blue;
}

4
Mme Hadhami Issaoui

Il existe une multitude de types de bordure, en voici une liste non exhaustive :
- dotted (pointillé)
- dashed (tirets)
- solid (solide)double (double)
- groove (rainurée)
- ridge (relief)
- inset (relief intérieur)
- outset (relief extérieur)
Sur notre page style.css au niveau de notre sélecteur ul, ajoutez la ligne de code suivante:

border: 5px solid #635D51;

Donc la page style.css devient:

body {
background-color: #A5C8E6;
text-align: center;
}

ul {
background-color: #FFFFFF;
font-family: verdana;
border: 5px solid #635D51;
}

img {
width: 400px;
height: 200px;
}

5- veuillez insérer les paragraphes suivants dans votre page index.html après votre menu:

<p>
<span> Le film d'action </span> est un type de film qui met en scène une succession de scènes
spectaculaires souvent stéréotypées construites autour d'un conflit résolu de manière violente,
généralement par la mort des ennemis du héros.
</p>
<p>
<span> Le film d'aventure </span> est un genre cinématographique caractérisé par la présence
d'un héros fictif ou non, tirant son statut du mythe qu'il inspire, l'action particulière qui s'y déroule,
l'emploi de décors particuliers également, parfois le décalage temporel par rapport au contemporain
ainsi que, parfois, les invraisemblances voulues caractérisant ainsi son excentricité, le tout véhiculant
une idée générale de dépaysement
</p>

5
Mme Hadhami Issaoui

<p>
Souvent <span>la comédie </span> part de situations tragiques ou traite des sujets extrêmement
sérieux, comme la religion (La vie de Brian) pour nous inviter à réfléchir et rire sur le monde et sur
nous-même.
</p>
<p>
Généralement, <span>un drame</span> repose sur un scénario abordant avec le moins d'humour
possible un thème grave (la mort, la misère, le viol, la toxicomanie…) qui peut être douloureux,
révoltant ; une injustice. Il peut s’inspirer de l'histoire (avec des thèmes comme la Shoah) ou de
l'actualité.
</p>
6- Pour mettre en avant notre menu, imaginons que nous voulons mettre en gras les mots
"Action" et "Aventure" qui se trouvent dans notre liste sur la page index.html ?
Vous pouvez constater que ceux-ci sont entourés des balises <span> </span>, de ce fait il suffirait
dans notre CSS d'ajouter :

span {
font-weight: bold;
}

Le problème c'est que notre page index.html contient d'autres balises <span> </span> dans des
paragraphes ! Et avec le code ci-dessus, toutes les balises <span> </span>seront en gras !

En CSS il existe une multitude de méthodes pour remédier à ce problème, ici nous allons vous
présenter "les sélecteurs imbriqués". Pas de panique, rien de compliqué ! Un exemple suffit. Nous
allons mettre en gras seulement les balises <span> </span> de notre liste.
Sur la page style.css, vous devez mettre en gras les balises <span> </span> de notre liste à
l'aide du code suivant :

li span{
font-weight: bold;
}
Avez-vous remarqué le changement ? le sélecteur li est suivi du sélecteur span. De ce fait nous
ciblons exactement les balises <span> </span> de notre liste (li) !