Ingénierie du Web Avancé (IWA)

Module 1 : Initiation web: HTML – CSS – PHP

CSS 5
▪ Personnalisation des liens
▪ Identification et le regroupement d'éléments
▪ Modèle des boîtes
▪ Balises structurantes de HTML5
2021/2022 - Faculté des Sciences - Tétouan - Maroc
 Personnalisation des liens

CSS permet de définir les propriétés du lien différemment, selon que le lien est visité, non
visité, activé, ou si le curseur le survole. Cela permet d'ajouter des effets plaisants et utiles
aux sites Web. Pour contrôler ces effets, on utilise ce qu'on appelle des pseudo-classes.

Une pseudo-classe permet de tenir compte de conditions et événements différents pour la

définition d'une propriété sur une balise HTML.
Exp: les liens sont définis en HTML avec des balises <a>. On peut donc utiliser a comme
sélecteur dans CSS :
a { color: blue; }

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Personnalisation des liens

Un lien est susceptible d'avoir plusieurs états.

Exp: il peut être visité ou non. On peut utiliser des pseudo-classes pour assigner des styles
différents aux liens visités et non visités.
a:link { color: blue; }
a:visited { color: red; }

On Utilise a:link et a:visited pour les liens non visités et pour ceux visités. Les liens actifs
ont pour pseudo-classe a:active, et la pseudo-classe a:hover intervient lorsque le curseur
survole le lien.

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Personnalisation des liens

La pseudo-classe :link
utilisée pour les liens menant aux pages que l'utilisateur n'a pas visitées.
Exp:
a:link { color: #6699CC; }
La pseudo-classe :visited
Utilisée pour les liens menant aux pages que l'utilisateur a visitées.
Exp:
a:visited { color: #660099; }
La pseudo-classe :active
La pseudo-classe :active est utilisée pour les liens qui sont activés.
Exp:
a:active { background-color: #FFFF00; }
La pseudo-classe :hover
Utilisée lorsque le pointeur de la souris survole un lien.
Exp:
a:hover { color: orange; font-style: italic; }

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Personnalisation des liens

Exp 1: l'espacement entre les lettres

On peut ajuster l'espacement entre les lettres avec la propriété letter-spacing.
Cela s'applique aux liens pour un effet spécial :
a:hover { letter-spacing: 10px;
font-weight:bold;
color:red; }
Exp2: MAJUSCULES et minuscules
La propriété text-transform permet de basculer entre des lettres majuscules
et minuscules. Elle peut aussi servir pour créer un effet sur les liens :
a:hover { text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow; }
Les deux exemples donnent un aperçu des possibilités de combinaison des
différentes propriétés presque illimitées.
Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Personnalisation des liens: Supprimer le trait sous les liens

a { text-decoration:none; }

On peut fixer la valeur de text-decoration en même temps que celles d'autres propriétés pour les
quatre pseudo-classes.

a:link { color: blue;

text-decoration:none; }
a:visited { color: purple;
text-decoration:none; }
a:active { background-color: yellow;
text-decoration:none; }
a:hover { color:red;
text-decoration:none; }

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Identification et le regroupement d'éléments (class et id)

Utilisation des attributs class et id.

Comment donner à un titre particulier une autre couleur que celle des autres titres du site Web ? Comment
regrouper les liens en différentes catégories et donner à chacune un style spécial ? Solution: Le
regroupement d'éléments dans une classe.
Exp :
<p>Pays africains:</p>
<ul>
<li><a href="ma.htm">Maroc</a></li>
<li><a href="al.htm">Algérie</a></li>
<li><a href="tu.htm">Tunisie</a></li>
</ul>
<p>Pays européens:</p>
<ul>
<li><a href="fr.htm">France</a></li>
<li><a href="es.htm">Espagne</a></li>
<li><a href="it.htm">Italie</a></li>
</ul>
Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Identification et le regroupement d'éléments : class
Nous voulons ensuite que les liens des pays africains soient jaune, que ceux des pays européens soient rouge, et
que les autres liens de la page Web restent bleu.
Pour y parvenir, nous répartissons les liens en deux catégories. On assigne une classe à chaque lien avec l'attribut
class.
<p>Pays africains:</p>
<ul>
<li><a href="ma.htm" class="af">Maroc</a></li>
<li><a href="al.htm" class="af">Algérie</a></li>
<li><a href="tu.htm" class="af">Tunisie</a></li>
</ul> a { color: blue; }
<p>Pays européens:</p> a.af { color: #FFBB00; }
<ul> a.eu { color: #800000; }
<li><a href="fr.htm" class="eu">France</a></li> Fichier CSS
<li><a href="es.htm" class="eu">Espagne</a></li>
<li><a href="it.htm" class="eu">Italie</a></li>
</ul>
Fichier HTML

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Identification d'un élément avec id
on utilise l'attribut id pour identifier un élément unique parmi plusieurs éléments
On ne peut pas avoir deux éléments avec le même id dans le document.
Exp : <h1>Chapitre 1</h1>
<h2>Chapitre 1.1</h2>
<h2>Chapitre 1.2</h2>
<h1>Chapitre 2</h1>
<h2>Chapitre 2.1</h2>
<h3>Chapitre 2.1.2</h3>
Il pourrait s'agir des titres d'un document partagé en chapitres ou en paragraphes. On assigne un id à chaque
chapitre comme ceci :
<h1 id="c1">Chapitre 1</h1>
<h2 id="c1-1">Chapitre 1.1</h2>
<h2 id="c1-2">Chapitre 1.2</h2>
<h1 id="c2">Chapitre 2</h1>
<h2 id="c2-1">Chapitre 2.1</h2>
<h3 id="c2-1-2">Chapitre 2.1.2</h3>
Le titre du chapitre 1.2 apparaît en rouge: #c1-2 { color: red; }
Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Regroupement d'éléments (span et div)

Les éléments <span> et <div> servent à regrouper et structurer un document et seront

souvent utilisés avec les attributs class et id.
Dans cette leçon, nous verrons de plus près l'utilisation des deux éléments <span>

Le regroupement avec <span>

L'élément <span> est un élément neutre, qui n'ajoute rien au document. Mais CSS peut
utiliser l'élément <span> pour ajouter des caractéristiques visuelles à des parties
spécifiques du texte des documents.
Exp:

<p>Tôt couché et tôt levé fortifie, enrichit et rend avisé.</p>

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Regroupement d'éléments <span>

Pour accentuer en rouge des parties de cette citation . Dans ce but, on utilise la
balise <span>. Chaque span reçoit un attribut class défini dans la feuille de style :

<p>Tôt couché et tôt levé

<span class="benefit">fortifie</span>, span.benefit { color:red; }
<span class="benefit">enrichit</span>
Fichier CSS
et <span class="benefit">rend avisé</span>.</p>
Fichier HTML

On peut utiliser l'attribut id pour ajouter du style aux éléments <span>, tant que
vous appliquez un id unique à chacun des trois éléments <span>.

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Regroupement d'éléments <div>
<span> s'utilise dans un élément de type bloc, <div> sert à regrouper un ou plusieurs
éléments de type bloc.
Le regroupement avec <div> fonctionne plus ou moins de la même façon.
Exp: Deux listes de présidents des États-Unis répartis selon leur affiliation politique :
<div id="democrats">
<ul> <li>Jimmy Carter</li>
<li>Bill Clinton</li>
<li>Barack Obama</li>
<li>Joe Biden</li> #democrats { background:blue; }
</ul> #republicans { background:red; }
</div>
<div id="republicans"> Fichier CSS
<ul> <li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
<li>Donald Trump</li>
</ul>
</div>
Fichier HTML
Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Modèle des boîtes

Le modèle des boîtes de CSS décrit les boîtes générées pour les éléments HTML. Il contient également des
options détaillées pour l'ajustement des marges, des bordures, des espacements et du contenu de chaque
élément.
Le modèle des boîtes dans CSS

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Margin et padding
Fixer la marge d'un élément
Un élément a quatre côtés : droit ("right"), gauche ("left"), supérieur ("top") et
inférieur ("bottom"). La marge est la distance entre chaque côté et l'élément
avoisinant (ou les bordures du document).
Exp: les marges de l'élément <body>.

body { margin-top: 100px;

margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px; }
Ou bien :
body { margin: 100px 40px 10px 70px; }

Exp2: Ajout de marges dans le paragraphe

body { margin: 100px 40px 10px 70px; }
p { margin: 5px 50px 5px 50px; }

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Fixer l'espacement dans un élément

L'espacement peut aussi être assimilé à un « remplissage ». Cela peut se comprendre dans la
mesure où l'espacement n'affecte pas la distance de l'élément aux autres éléments mais
définit seulement la distance interne entre la bordure et le contenu de l'élément.
Exp:
h1 { background: yellow; }
h2 { background: orange; }
En définissant l'espacement des titres, on change le remplissage autour du texte dans
chaque titre :
h1 { background: yellow;
padding: 20px 20px 20px 80px; }
h2 { background: orange;
padding-left:120px; }

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Types de bordures [border-style]

8 types de bordures sont possibles.

On peut utiliser les valeurs "none" ou "hidden" si on ne
veut aucune bordure.

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Couleur des bordures [border-color]

Définit la couleur d'une bordure.

Exemples:
"#123456"
"rgb(123,123,123)"
"yellow"

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Couleur des bordures [border-width]

Définie par la propriété border-width, dont les valeurs peuvent être thin, medium et thick, ou une
valeur numérique en pixels.

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Bordures [border]
Exp:
On définie les bordures différentes pour <h1>, <h2>, <ul> et <p>. Le résultant montre les
possibilités :
h1 { border-width: thick;
border-style: dotted;
border-color: gold; }
h2 { border-width: 20px;
border-style: outset;
border-color: red; }
p{ border-width: 1px;
border-style: dashed;
border-color: blue; }
ul { border-width: thin;
border-style: solid;
border-color: orange; }

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Bordures [border]
Exp: Déclaration des propriétés spéciales pour les bordures supérieures, inférieures,
gauches ou droites :
h1 { border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange; }

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Bordures [border]

Concision [border]
On peut concentrer plusieurs propriétés en une seule avec
border :
p{ border-width: 1px;
border-style: solid;
border-color: blue; }

Il peut se concentrer en :
p { border: 1px solid blue; }

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Hauteur et largeur des éléments

Il est possible de définir la hauteur et la largeur d'un élément.

Fixer la largeur [width]
La propriété width permet de définir la largeur d'un élément.
Exp :
div.box { width: 200px; <body>
border: 1px solid black; <div class="box">Il était une fois , … </div>
background: orange; } </body>
Fichier CSS Fichier HTML
Fixer la hauteur [height]
Dans l'exemple précédent, la hauteur de la boîte fixée par son contenu. On peut affecter
la hauteur d'un élément avec la propriété height.

div.box { height: 500px; width: 200px;

border: 1px solid black;
background: orange; }

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Eléments flottants

Un élément peut avoir une position flottante à droite ou à gauche avec la propriété float.
Exp:
<div id="picture">
<img src="image.jpg" alt="image">
</div>
<p>biographie ...</p>

Pour que l'image flotte à gauche et que le texte l'entoure, il suffit de définir la largeur de
la boîte entourant l'image puis de donner à la propriété float la valeur "left" :
#picture { float:left;
width: 100px; }

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Eléments flottants
Les flottants peuvent servir pour créer les colonnes d'un document.
Exp: <div id="column1">
<p>bla bla bla...</p>
</div>
<div id="column2">
<p>bla bla bla...</p>
</div>
<div id="column3">
<p>bla bla bla...</p>
</div>
Une fois fixée la largeur des colonnes (par exemple à 33%), on fait flotter chaque colonne à
gauche en définissant la propriété float :
#column1 { float:left; width: 33%; } La propriété float admet les
#column2 { float:left; width: 33%; } valeurs "left", "right" ou
#column3 { float:left; width: 33%; } "none".
Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Eléments flottants

La propriété clear
Sert à contrôler le comportement des éléments qui viennent après les éléments flottants dans le document.
Par défaut, les éléments à suivre remontent pour combler l'espace disponible libéré lorsqu'une boîte flotte
d'un côté.
La propriété clear admet les valeurs "left", "right", "both" ou "none". Le principe est tel que, par exemple,
si la valeur de clear d'une boîte est fixée à "both", la bordure supérieure de la marge de cette boîte se
trouvera toujours sous la bordure de la marge inférieure des boîtes flottantes éventuelles venant du dessus.

<div id="picture">
<img src="image.jpg" alt="image">
</div>
<h1>Said Youssef</h1>
<p class="floatstop">biographie ...</p>
Pour empêcher que le texte ne flotte à côté de l'image, nous pouvons ajouter le code CSS suivant :
#picture { float:left; width: 100px; }
.floatstop { clear:both; }
Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Balises structurantes de HTML5

Dans HTML5, des nouvelles balises sont introduites pour structurer les pages.
<header> : l'en-tête
La plupart des sites web possèdent un en-tête (header). On y trouve le plus souvent un logo,
une bannière, …
<header>
<!-- Placez ici le contenu de l'en-tête de votre page -->
</header>
<footer> : le pied de page
le pied de page (footer) se trouve en général tout en bas du document. On y trouve des
informations comme des liens de contact, le nom de l'auteur, les mentions légales, etc.
<footer>
<!-- Placez ici le contenu du pied de page -->
</footer>

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
Principaux liens de navigation <nav>

La balise <nav> doit regrouper tous les principaux liens de navigation du site. Vous y
placerez par exemple le menu principal de votre site.

Généralement, le menu est réalisé sous forme de liste à puces à l'intérieur de la balise

<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Article indépendant <article>

La balise <article> sert à englober une portion généralement autonome de la page.

C'est une partie de la page qui pourrait ainsi être reprise sur un autre site. C'est le cas
par exemple des actualités (articles de journaux ou de blogs).

<article>
<h1>Mon article</h1>
<p>Bla bla bla bla</p>
</article>

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Exemple d'organisation de la page

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Exemple d’utilisation des balises structurantes

<!DOCTYPE html> <section>

<html> <aside>
<head> <h1>Conférence sur les énergies renouvelables</h1>
<meta charset="utf-8" /> <p>Une conférence sur les énergies renouvelables est organisée en ligne</p>
<title>Fac Tetouan</title> </aside>
<link rel="stylesheet" href="style.css" /> <article>
</head> <h1>Ouverture d'une nouvelle formation</h1>
<body> <p>La faculté des Sciences de Tétouan a ouvert une nouvelle formation sur les
<header> technologies de pointe</p>
<h1>Université Abdelmalek Essaadi</h1> </article>
<h2>Faculté des Sciences</h2> </section>
</header> <footer>
<nav> <p>Copyright FS ‐ Tous droits réservés<br />
<ul> <a href="#">contacter nous</a></p>
<li><a href="#">Accueil</a></li> </footer>
<li><a href="#">Licences</a></li> </body>
<li><a href="#">DCESS</a></li> </html>
</ul>
</nav>

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz
 Exemple d’utilisation des balises structurantes

nav
{
float: left; width: 150px;
border: 1px solid black;
}
section
{
margin-left: 170px; border: 1px solid blue;
}
footer
{
text-align: center;
border: 1px solid blue;
}

Module 1 : Initiation web: HTML – CSS – PHP / par Prof. Youssef Zaz