2- Bases HTML
Liens : Attribut href
• Attribut href : Indique la destination du lien hypertexte
• Comme pour l’attribut src de la balise <img>, la destination peut être absolue ou
relative
• href absolue : href="[Link] Lien vers un autre site
• href relative : href="[Link]" Lien vers une page du même site
HTML & CSS - Térence FERUT - SIO 2024-2025 41
2- Bases HTML
Liens : Attribut href
Début de balise Fin de balise
URL de destination Ancre du lien
Qu’est-ce que l’ancre ? Est-elle importante ? Forcément du texte ?
HTML & CSS - Térence FERUT - SIO 2024-2025 42
2- Bases HTML
Liens : Email et Tel
L’attribut href peut aussi rediriger vers un email ou numéro de téléphone :
• Email : href="[Link]
• Téléphone : href="[Link]
HTML & CSS - Térence FERUT - SIO 2024-2025 43
2- Bases HTML
Liens : Target
• Attribut target : Indique comment ouvrir la destination du lien
• Par défaut, sans attribut target, un lien hypertexte s’ouvre dans le même onglet
• On peut indiquer d’ouvrir l’URL dans un nouvel onglet, nouvelle fenêtre …
• Ouvrir un lien dans un nouvel onglet : target="_blank"
_blank Ouvre dans un nouvel onglet
_self Ouvre dans le même onglet (par défaut)
_parent Ouvre dans la frame parente (iframe)
_top Ouvre dans la frame originale
HTML & CSS - Térence FERUT - SIO 2024-2025 44
2- Bases HTML
Liens sur images
• Les liens hypertextes ne sont pas forcément appliqués à un texte (ancre)
• Il est possible d‘appliquer un lien à d’autres éléments, comme une image
• Pour cela, il suffit de remplacer l’ancre du lien par une balise image
Destination relative Image relative Largeur Hauteur
Destination relative Image relative Largeur Hauteur
HTML & CSS - Térence FERUT - SIO 2024-2025 45
2- Bases HTML
Liens dans paragraphe
• Les liens hypertextes peuvent être à l’intérieur d’autres balises
• Et on peut encore rajouter des balises dans la balise <a>
• C’est souvent le cas avec des paragraphes par exemple
Paragraphe Destination relative Ancre en élément important
Paragraphe Destination relative Ancre en élément important
HTML & CSS - Térence FERUT - SIO 2024-2025 46
2- Bases HTML
Liens hypertextes
Pour vous familiariser avec les liens hypertextes en HTML :
1. Ouvrez votre "[Link]", dans la partie <body> :
• Ajoutez 2 liens dans vos paragraphes vers des sites externes
• Ajoutez 1 lien vers [Link] sur le logo google
• Ajoutez 1 lien vers votre email et 1 lien vers votre téléphone (réel)
• Appliquez les attributs target les plus adaptés à chaque lien (vous
pouvez consulter une documentation !)
2. Sauvegardez votre fichier HTML et montrez-le à votre formateur
HTML & CSS - Térence FERUT - SIO 2024-2025 47
3- Bases CSS
Présentation de CSS
• Comme nous l’avons vu, le CSS permet d’indiquer la forme (design) du site :
positions, design texte …
• Il est possible mettre du CSS directement dans un fichier HTML (Inline CSS)
• Nous verrons plus tard pourquoi cela n’est pas recommandé
• Pour commencer, nous allons procéder comme cela, intégrer le CSS
directement dans le code HTML
HTML & CSS - Térence FERUT - SIO 2024-2025 48
3- Bases CSS
CSS : style
• style est un attribut universel HTML, avec la possibilité d’indiquer plusieurs
informations
• style peut se greffer à toutes les balises HTML comme <p> <h1> <img>
• Très utile, style permet notamment de choisir la police, taille et couleur
d’écriture, les marges …
Couleur Bleu Élément centré
Couleur Bleu Élément centré
Cette balise de paragraphe sera centrée, écrite en bleu
HTML & CSS - Térence FERUT - SIO 2024-2025 49
3- Bases CSS
CSS : Propriétés de style
Valeurs de style Interprétation du code
color: blue L’élément est de couleur bleu
text-align: center L’élément est centré horizontalement
background: #ffe7e8 L’élément a un fond de couleur #ffe7e8
border: 2px solid red L’élément a une bordure solide de 2px, rouge
margin: 15px L’élément a une marge de 15px
Toutes les propriétés CSS
Toutes les propriétés CSS
HTML & CSS - Térence FERUT - SIO 2024-2025 50
3- Bases CSS
CSS : Exemple de style
Devinons ensemble l’interprétation de chaque propriété
Plusieurs types de valeurs : couleurs, polices, tailles MDN & W3School
HTML & CSS - Térence FERUT - SIO 2024-2025 51
3- Bases CSS
Rendu de styles
HTML & CSS - Térence FERUT - SIO 2024-2025 52
3- Bases CSS
Propriétés CSS
Pour vous familiariser avec les propriétés CSS :
1. Téléchargez ce fichier zip avec HTML et images
2. A l’aide de la liste des propriétés CSS, faîtes les
modifications nécessaires pour arriver à ce résultat
HTML & CSS - Térence FERUT - SIO 2024-2025 53
3- Bases CSS
Fichier CSS
• CSS est un langage de style, il applique des styles que l’on définit, aux balises
HTML que l’on choisit
• Un fichier CSS regroupe les styles et leurs valeurs pour ne plus avoir à l’indiquer
dans le fichier HTML (feuille de style)
• Cela permet de gagner en productivité et surtout en qualité de code car
regrouper les styles et multiplier leurs applications réduit la quantité de code
HTML & CSS - Térence FERUT - SIO 2024-2025 54
3- Bases CSS
Fichier [Link]
• Nous avons vu qu’un site peut contenir 1 ou plusieurs fichiers CSS
• 1 page web = 1 fichier HTML
• Donc, plusieurs pages web peuvent utiliser le même fichier CSS
• Par défaut, on appelle le fichier CSS principal : [Link]
• Il est possible de créer d’autres fichiers CSS qui ne s’appliquent qu’à certaines
pages du site par exemple
HTML & CSS - Térence FERUT - SIO 2024-2025 55
3- Bases CSS
Structure de CSS
HTML & CSS - Térence FERUT - SIO 2024-2025 56
3- Bases CSS
Structure de CSS
Sélecteur Début
(d’élément)
Fin Déclarations
Propriété Valeur
HTML & CSS - Térence FERUT - SIO 2024-2025 57
3- Bases CSS
Structure de CSS
Inline CSS
HTML CSS
HTML & CSS - Térence FERUT - SIO 2024-2025 58
3- Bases CSS
Relier HTML et CSS
• Les fichiers [Link] et [Link] ne sont pas reliés par défaut
• Pour effectuer cette liaison, il faut rajouter une balise dans <head> de l’index
HTML & CSS - Térence FERUT - SIO 2024-2025 59
3- Bases CSS
Liaisons HTML et CSS
Logiquement :
• On peut indiquer plusieurs feuilles de style à 1 seul fichier HTML
• On peut indiquer certains fichiers CSS à une page HTML "A" et d’autres fichiers
CSS à une page HTML "B"
• Il peut y avoir des chemins de fichiers différents pour les CSS
Pourquoi avoir plusieurs fichiers CSS ?
HTML & CSS - Térence FERUT - SIO 2024-2025 60
3- Bases CSS
[Link]
Pour vous familiariser avec les bonnes pratiques en CSS :
1. Créez un fichier [Link]
2. Retranscrivez les styles de la correction du dernier exercice
• Un problème ? Faîtes en sorte d’avoir le moins de style possible dans
votre fichier [Link]
3. Pour le moment apprenez à travailler sans l'aide d'une IA !
HTML & CSS - Térence FERUT - SIO 2024-2025 61
3- Bases CSS
Sélecteurs : Types
Il existe plusieurs types de sélecteurs en CSS :
• Sélecteur de type : Élément, balise HTML
• Sélecteur de classe : Attribut HTML pour identifier plusieurs éléments
• Sélecteur d’ID : Attribut HTML pour identifier un élément unique
• Sélecteurs avec conditions
• Sélecteurs multiples
HTML & CSS - Térence FERUT - SIO 2024-2025 62
3- Bases CSS
Sélecteurs : Type
S’applique à tous les titres <h1>
HTML & CSS - Térence FERUT - SIO 2024-2025 S’applique à tous les paragraphes <p> 63
3- Bases CSS
Sélecteurs : Class
S’applique à tout élément avec la classe
intro
HTML & CSS - Térence FERUT - SIO 2024-2025 64
S’applique aux paragraphes <p>
3- Bases CSS
Sélecteurs : ID
S’applique à l’ID unique
S’applique à la classe intro
HTML & CSS - Térence FERUT - SIO 2024-2025 S’applique aux autres paragraphes <p> 65
3- Bases CSS
Sélecteurs avec conditions
Exemple Sélection d’éléments
h2 p Toutes les balises <p> dans un <h2>
h2 + p 1ères balises <p> directement après un <h2>
[Link] Balises <p> avec la class intro
.intro .cv Balises avec class cv dans balises avec la class intro
a:hover Liens hypertextes lors d’un survol de souris
a:visited Liens hypertextes déjà visités par l’utilisateur
HTML & CSS - Térence FERUT - SIO 2024-2025 66
3- Bases CSS
Sélecteurs multiples
Exemple Sélection d’éléments
* Tous les éléments
h1, h2, h3 Balises <h1>, <h2> et <h3>
.[Link] Balises avec la class intro et cv
TOUS LES SÉLECTEURS
TOUS LES SÉLECTEURS
HTML & CSS - Térence FERUT - SIO 2024-2025 67
3- Bases CSS
Commentaires
Tout comme pour le HTML, il est possible de commenter le CSS sans impacter
l’affichage du site en Front-End
/* Commentaire CSS */
HTML & CSS - Térence FERUT - SIO 2024-2025 68
3- Bases CSS
CSS Diner
Il existe de nombreux exercices et ressources particulièrement bien réalisées sur
internet pour se perfectionner en CSS.
• Rendez-vous sur le site [Link]
• Commencez par le premier exercice. Suivez les indications à l'écran. Quand
vous avez la solution, passez à l'exercice suivant (en haut à droite)
• Réalisez en classe les 16 premiers exercices
• Vous devrez terminer les exercices restants comme devoir pour demain
HTML & CSS - Térence FERUT - SIO 2024-2025 69
3- Bases CSS
[Link] v2
Pour vous familiariser avec les sélecteurs CSS :
1. Retranscrivez les styles de votre dernier exercice dans [Link]
• Avec un minimum de sélecteurs, class et id, faites en sorte de ne plus
avoir de style dans votre fichier [Link]
• Le résultat doit être identique, optimisé au mieux
• Commentez votre code, pour que vous et n’importe quel développeur
comprenne
HTML & CSS - Térence FERUT - SIO 2024-2025 70
3- Bases CSS
Alignement d’élément
Il est possible de choisir l’alignement des éléments en CSS :
• Nous avons vu comment aligner un texte avec
• Nous avons vu que cela ne fonctionne pas avec les images
• On peut vouloir aligner d’autres éléments, comme une liste à puce
• Plus tard, nous verrons d’autres méthodes d’alignement, plus performantes
HTML & CSS - Térence FERUT - SIO 2024-2025 71
3- Bases CSS
Alignement : Liste à puce
HTML & CSS - Térence FERUT - SIO 2024-2025 72
3- Bases CSS
Margin et Padding
• Les éléments CSS ont des marges de 2 types : interne et externe
• Margin : Marge externe, à l’extérieur de l’élément
• Padding : Marge interne, à l’intérieur de l’élément
Margin
Bordure
Padding
Élément HTML
HTML & CSS - Térence FERUT - SIO 2024-2025 73
3- Bases CSS
Margin et Padding
• Les éléments CSS ont des marges par défaut
• Il est possible de changer ces marges au cas par cas, en passant par la CSS
• Il est même possible d’indiquer des margin négatives (-1em)
• On peut indiquer une marge en haut à droite, en bas, à gauche
HTML & CSS - Térence FERUT - SIO 2024-2025 74
3- Bases CSS
Margin et Padding
margin-top
Bordure
padding-top
margin-left padding-left Élément padding-right margin-right
padding-bottom
margin-bottom
HTML & CSS - Térence FERUT - SIO 2024-2025 75
3- Bases CSS
Margin et Padding
Par défaut, mon paragraphe a une marge externe de 10px en haut et en bas
HTML & CSS - Térence FERUT - SIO 2024-2025 76
3- Bases CSS
Margin et Padding
OU
Plus de marge en haut
Marge en bas de 1em
MARGIN
HTML & CSS - Térence FERUT - SIO 2024-2025
MARGIN 77
3- Bases CSS
Margin et Padding
• Le padding fonctionne sur le même principe que la margin
• Contrairement à la margin, il ne peut pas avoir de valeur négative
• Les deux sont utiles pour la mise en forme, les alignements et espacements
• Combinés aux display, que nous verrons plus tard, ils suffisent à gérer la mise
en forme basique d’un site
PADDING
PADDING
HTML & CSS - Térence FERUT - SIO 2024-2025 78
3- Bases CSS
Margin et Padding
Pour vous familiariser avec les marges CSS :
1. Reprenez votre premier exercice de cours (votre présentation) et ajoutez des
styles en CSS comme nous venons de le voir
2. Aérez et espacez vos éléments (libre) avec les propriétés margin et padding
(comprenez bien la différence)
HTML & CSS - Térence FERUT - SIO 2024-2025 79
3- Bases CSS
Bordures
• Comme vu brièvement, les éléments ont des bordures que l’on peut afficher et
personnaliser :
• Style
• Largeur
• Couleur
• Pour cela, on utilise la propriété CSS border
BORDER
BORDER
HTML & CSS - Térence FERUT - SIO 2024-2025 80