3- Bases CSS
Bordures
HTML & CSS - Térence FERUT - SIO 2024-2025 81
3- Bases CSS
Bordures avancées
• Il existe une infinité de combinaisons graphiques pour les bordures
• Comme pour les marges, il est possible de choisir les côtés de bordure
• Il est également possible de créer des bordures arrondies
La propriété border-radius ne fonctionne que s’il y a une propriété border
HTML & CSS - Térence FERUT - SIO 2024-2025 82
3- Bases CSS
Bordures avancées
HTML & CSS - Térence FERUT - SIO 2024-2025 83
3- Bases CSS
Bordures
Pour vous familiariser avec les bordures CSS :
1. Reprenez vos derniers fichiers HTML et CSS
• Ajoutez des bordures sur les éléments importants (titres)
• Faites des tests : Bordures arrondies, design, générateur
2. Montrez votre résultat à votre formateur
HTML & CSS - Térence FERUT - SIO 2024-2025 84
3- Bases CSS
Background
• Nous avons vu qu’il était possible de mettre une couleur de fond grâce à la
propriété background
• Cette propriété permet également de mettre des images en fond, les
superposer, les répéter, et y ajouter des effets
BACKGROUND
BACKGROUND
HTML & CSS - Térence FERUT - SIO 2024-2025 85
3- Bases CSS
Background : Propriétés
• background-color : Propriété pour définir une couleur d’arrière-plan
• background-image : Propriété pour définir une image d’arrière-plan
• background : Propriété pour définir un arrière-plan (plusieurs valeurs)
COLOR
COLOR
IMAGE
IMAGE
HTML & CSS - Térence FERUT - SIO 2024-2025 86
3- Bases CSS
background-color
HTML & CSS - Térence FERUT - SIO 2024-2025 87
3- Bases CSS
background-color
URL IMAGE
URL IMAGE
HTML & CSS - Térence FERUT - SIO 2024-2025 88
3- Bases CSS
Background : Propriétés
• background-attachment : Propriété pour définir la position de l’image si scroll
• background-repeat : Propriété pour définir les répétitions d’images
• background-postion : Propriété pour définir la position des images
• background-size : Propriété pour définir la taille des images
• Etc…
HTML & CSS - Térence FERUT - SIO 2024-2025 89
3- Bases CSS
background
HTML & CSS - Térence FERUT - SIO 2024-2025 90
3- Bases CSS
Background
Pour vous familiariser avec les arrière-plans en CSS :
1. Reprenez vos derniers fichiers HTML et CSS
• Mettez une couleur de fond au <body>
• Ajoutez une image en fond des titres
• Faites des tests sur les valeurs de la propriété background
2. Montrez votre résultat à votre formateur
HTML & CSS - Térence FERUT - SIO 2024-2025 91
3- Bases CSS
Apparences dynamiques
• Il est possible d’attribuer des apparences dynamiques aux éléments via CSS
• Exemple : Attribuer une apparence différente à une image que l’on survole
• Pour cela, on utilise des pseudo-classes qui se greffent à un sélecteur :
• :hover : Élément survolé
• :active : Élément actif (lien ou bouton cliqué)
• :link : Élément non visité (lien jamais cliqué)
• :visited : Élément déjà visité (lien déjà cliqué)
• Etc …
HTML & CSS - Térence FERUT - SIO 2024-2025 92
3- Bases CSS
Apparences : hover
Au survol, les images mesurent
200px de largeur
Au survol, les paragraphes auront
un fond couleur doré
HTML & CSS - Térence FERUT - SIO 2024-2025 93
3- Bases CSS
Apparences de liens
CSS COLORS
CSS COLORS
HTML & CSS - Térence FERUT - SIO 2024-2025 94
3- Bases CSS
Apparences dynamiques
Pour vous familiariser avec les apparences dynamiques en CSS :
1. Reprenez vos derniers fichiers HTML et CSS
• 3 liens hypertextes : Changez leur apparence au survol + active
• Lisez la liste des propriétés CSS
• 3 images : Changez leurs propriétés au survol
2. Montrez votre résultat à votre formateur
HTML & CSS - Térence FERUT - SIO 2024-2025 95
4- HTML/CSS Avancé
Liens hypertextes
• L’insertion de lien hypertexte utilise la balise <a> (ancre)
• Nous avons vu comment faire des liens vers URL absolues
• Il est possible de faire des liens vers URL relatives, via un chemin de fichier
sous le même principe que pour les images
• Il est également possible de faire des liens un endroit précis d’une page web
HTML & CSS - Térence FERUT - SIO 2024-2025 96
4- HTML/CSS Avancé
Chemin de fichier
Racine
[Link]
Dossier
href="[Link]" [Link]
[Link]
[Link]
Sous-Dossier
HTML & CSS - Térence FERUT - SIO 2024-2025 97
4- HTML/CSS Avancé
Liens hypertextes
HTML & CSS - Térence FERUT - SIO 2024-2025 98
3- Bases CSS
CV en ligne 1
Repartons de 0 et créons les bases de votre portfolio en ligne codé main :
1. Créez des fichiers [Link], [Link], [Link], [Link] et
[Link] ainsi qu'un fichier [Link], et commentez votre code au fur et à
mesure que vous l'écrivez
2. Vous remplirez chaque page au fur et à mesure, nous commencerons par la
page [Link] qui servira à vous présenter
• Ajoutez la structure HTML, 1 titre <h1>, 3 titres <h2>, plusieurs <p>
• Ajoutez une photo de vous
• Utilisez class et id pour personnaliser les mises en forme, couleurs,
polices, tailles, alignements, marges, bordures, background …
• Créez un menu de navigation, à l'aide de balises <ul> et <li> pointant vers
les autres pages HTML du site (contact, projets, formation, …)
Commencez à travailler sur les autres pages HTML
HTML & CSS - Térence FERUT - SIO 2024-2025 99
4- HTML/CSS Avancé
Fragment d’URL
• On utilise un fragment d’URL pour faire un lien vers un endroit précis d’une page
web
• Ce fragment peut être défini en URL absolue ou relative
• Il permet de rediriger vers un id car c’est un élément unique
• Il ne permet pas de rediriger vers une class car ce n’est un élément unique
HTML & CSS - Térence FERUT - SIO 2024-2025 100
4- HTML/CSS Avancé
Liens hypertextes
HTML & CSS - Térence FERUT - SIO 2024-2025 101
4- HTML/CSS Avancé
Liens hypertextes
Lien qui redirige vers l’ID "portfolio"
de la page d’accueil ([Link])
Lien qui redirige vers le haut de page
HTML & CSS - Térence FERUT - SIO 2024-2025 102
4- HTML/CSS Avancé
Éléments de section
• Nous avons vu qu’un document HTML doit respecter une certaine structure
• A l’intérieur du <body> on doit indiquer quels sont les éléments qui composent
la page web, et à quoi ils servent (éléments sémantiques)
• En plus de ces éléments de section précis, il y en a des génériques :
• <span> : Conteneur rectangulaire sur 1 ligne
• <div> : Conteneur rectangulaire sur 1 ou plusieurs lignes
HTML & CSS - Térence FERUT - SIO 2024-2025 103
4- HTML/CSS Avancé
Élément <span>
Les deux paragraphes sont centrés
Car ils sont tous les deux dans un conteneur (<span>)
HTML & CSS - Térence FERUT - SIO 2024-2025 104
4- HTML/CSS Avancé
Élément <div>
Les deux paragraphes sont centrés
Car ils sont tous les deux dans un conteneur (<div>)
HTML & CSS - Térence FERUT - SIO 2024-2025 105
4- HTML/CSS Avancé
Éléments <div> et <span>
• Dans les exemples vus, <div> et <span> produisent le même résultat
• Il y a cependant des différences :
• <div> : Sert à agencer le contenu de page, sélectionner plusieurs éléments
• <span> : Sert à associer un style CSS, concerne une partie d’élément
• Ces éléments n’ont pas vraiment d’impact sur le contenu, ils servent surtout à
regrouper plusieurs éléments, et à les modifier grâce à des class
HTML & CSS - Térence FERUT - SIO 2024-2025 106
4- HTML/CSS Avancé
Exemple <div> et <span>
HTML & CSS - Térence FERUT - SIO 2024-2025 107
4- HTML/CSS Avancé
Éléments sémantiques
A l’intérieur du <body> on doit indiquer la sémantique du site :
• <header> : En-tête du site aidant à la navigation
• <nav> : Menu de navigation (menu principal, footer, fil d’ariane …)
• <section> : Section générique
• <article> : Contenu autonome (article de blog, widget, commentaire …)
• <aside> : Contenu connexe, sans rapport direct avec le contenu principal
• <footer> : Pied de page du site (infos auteur, copyright, menu secondaire)
ÉLÉMENTS HTML
ÉLÉMENTS HTML
HTML & CSS - Térence FERUT - SIO 2024-2025 108
4- HTML/CSS Avancé
Exemples sémantiques
<header> <header> <nav>
<nav> <section>
<article>
<section>
<article> <aside>
<aside>
<article> <article>
<footer> <footer> <nav>
HTML & CSS - Térence FERUT - SIO 2024-2025 109
4- HTML/CSS Avancé
Exemple sémantique
HTML & CSS - Térence FERUT - SIO 2024-2025 110
4- HTML/CSS Avancé
Exemples sémantiques
<header>
<nav>
<section>
<article>
<footer>
<nav>
HTML & CSS - Térence FERUT - SIO 2024-2025 111
4- HTML/CSS Avancé
Balises Inline et Block
On distingue 2 types de balises :
• Inline : Ne fait pas de retour à la ligne
• <span> est une balise inline
• Block : Fait un retour à la ligne
• <div> est une balise block
HTML & CSS - Térence FERUT - SIO 2024-2025 112
4- HTML/CSS Avancé
Inline et Block
Pas de retour à la ligne
Retour à la ligne
Espacement du à <br>
HTML & CSS - Térence FERUT - SIO 2024-2025 113
4- HTML/CSS Avancé
Display Inline et Block
• Chaque balise est définie comme étant inline ou block
• Il est cependant possible de changer cette propriété, pour changer l’affichage
• C’est assez courant pour pouvoir modifier la disposition des éléments
• L’exemple le plus courant est de transformer une liste à puce, balise block à la
base, en balise inline, afin que les éléments ne reviennent plus à la ligne
HTML & CSS - Térence FERUT - SIO 2024-2025 114
4- HTML/CSS Avancé
Display Inline et Block
• Chaque balise est définie comme étant inline ou block
• Il est cependant possible de changer cette valeur de base grâce à la propriété
display
HTML & CSS - Térence FERUT - SIO 2024-2025 115
4- HTML/CSS Avancé
Display Inline et Block
HTML & CSS - Térence FERUT - SIO 2024-2025 116
4- HTML/CSS Avancé
Display Inline et Block
• L’exemple vu est très courant
• Une liste à puce peut devenir un menu horizontal
• Bien d’autres méthodes pour créer un menu de liens sont possibles
• Si l’on procède comme cela, c’est pour une question de SEO
HTML & CSS - Térence FERUT - SIO 2024-2025 117
4- HTML/CSS Avancé
Balises Inline par défaut
Balise Utilité
<a>
<a> Lien hypertexte
<br>
<br> Saut de ligne
<button>
<button> Créer un bouton interactif
<iframe>
<iframe> Intégrer le contenu d’une autre page web
<img>
<img> Image
<span>
<span> Conteneur générique
<strong>
<strong> Texte important
Balises Inline
HTML & CSS - Térence FERUT - SIO 2024-2025
Balises Inline 118
4- HTML/CSS Avancé
Balises Block par défaut
Balise Utilité
<div>
<figcaption>
<div> Conteneur générique
<figure>
<figcaption> Indiquer une légende à une image
<form>
<figure> Grouper image et légende
<h1> à <h6>
<form> Formulaire
<hr>
<h1> à <h6> Titres de niveau 1 à 6
<hr> Ligne horizontale
<li>
<ol> et <ul> Liste ordonnée et Liste non ordonnée
<p>
<li> Élément de liste (ordonnée ou non)
<p> Paragraphes
Éléments sémantiques : <article> <aside> <footer> <header> …
Balises Block
HTML & CSS - Térence FERUT - SIO 2024-2025
Balises Block 119
4- HTML/CSS Avancé
Display inline-block
• Les valeurs CSS inline et block sont très utiles pour gérer la disposition des
éléments HTML
• La propriété display, qui gère le type d’affichage d’un élément, peut également
prendre la valeur inline-block
• Permet de redimensionner l’élément (block)
• Permet d’aligner l’élément avec marges (inline)
• N’ajoute pas un saut de ligne après l’élément
HTML & CSS - Térence FERUT - SIO 2024-2025 120