HTML : Hypertext Markup Language
SIO – Programmation Web
Programme de formation
1ère Partie : HTML & CSS
BASE PRATIQUE
Des exercices
1 - Découverte HTML/CSS tout au long
2 - Bases HTML de la
3 - Bases CSS formation
4 – HTML/CSS Avancé pour préparer
le portfolio
HTML & CSS - Térence FERUT - SIO 2024-2025 2
1- Découverte HTML/CSS
Présentation de HTML
• HyperText Markup Language = "langage de balisage d’hypertexte"
• Hypertexte : texte enrichie par des "liens" permettant de naviguer d’une
information à une autre (de page en page)
• HTML = Langage de balisage conçu pour représenter les pages web
• Standardisé par le W3C (World Wide Web Consortium) depuis 1994
• 1ère version en 1993
• Version HTML5 depuis le 22 Juin 2012
• Langage permettant d’indiquer le fond (contenu) du site : texte, images, liens …
• Les fichiers HTML sont "interprétés" directement par les navigateurs
HTML & CSS - Térence FERUT - SIO 2024-2025 3
1- Découverte HTML/CSS
Présentation de CSS
• Cascading Style Sheets = "feuilles de style en cascade"
• CSS = Langage conçu pour mettre en forme les pages web
• 1ère version en 1996
• Version CSS3 depuis le 7 Juin 2011
• Standardisé par le W3C (World Wide Web Consortium)
• Permet d’indiquer la forme (design) du site : positions, design texte …
• Le CSS est toujours en complément d’un fichier HTML
• Le CSS, comme l’HTML est interprété directement par les navigateurs
HTML & CSS - Térence FERUT - SIO 2024-2025 4
1- Découverte HTML/CSS
Complémentarité
HTML JavaScript CSS
Squelette Muscles Peau
Structure Fonctions Style
HTML & CSS - Térence FERUT - SIO 2024-2025 5
1- Découverte HTML/CSS
Exemple de fichier HTML
HTML & CSS - Térence FERUT - SIO 2024-2025 6
1- Découverte HTML/CSS
Exemple de fichier CSS
HTML & CSS - Térence FERUT - SIO 2024-2025 7
1- Découverte HTML/CSS
Exemple de fichier HTML + CSS
HTML & CSS - Térence FERUT - SIO 2024-2025 8
1- Découverte HTML/CSS
HTML + CSS
➢ Les fichiers HTML mettent en place la structure d’une page
web
➢ Les fichiers CSS mettent en forme le style des éléments
d’une page web
➢ Les deux, correctement reliés, mixent forme et fond d’une
page web
HTML & CSS - Térence FERUT - SIO 2024-2025 9
1- Découverte HTML/CSS
HTML ouvert avec Bloc-Notes
HTML & CSS - Térence FERUT - SIO 2024-2025 10
1- Découverte HTML/CSS
HTML ouvert avec Sublime Text
HTML & CSS - Térence FERUT - SIO 2024-2025 11
2- Bases HTML
Fichier [Link]
➢ [Link] = Fichier qui représente la page d’accueil d’un site
➢ Il s’agit donc d’un fichier HTML nommé "index"
➢ Il est possible de changer le nom du fichier HTML qui représentera la
page d’accueil mais c’est inutile, peut poser des problèmes
➢ Les autres pages d’un même site seront donc constituées par d’autres
fichiers HTML, nommés selon le contenu de la page ([Link],
[Link], [Link] …)
HTML & CSS - Térence FERUT - SIO 2024-2025 12
Exercice 1
Pour vous familiariser avec HTML et commencer votre site :
1. Ouvrez votre logiciel éditeur de code (VS Code) dans le dossier
"portfolio" créé précédemment
2. Écrivez juste votre Prénom et Nom
3. Enregistrez le fichier "[Link]" (écrasez ou remplacez le fichier
précédemment créé lors de l'installation)
4. Ouvrez ce fichier avec un navigateur internet (Go Live Server) et appelez
le formateur pour contrôler
HTML & CSS - Térence FERUT - SIO 2024-2025 13
2- Bases HTML
Structure HTML
➢ Les fichiers HTML doivent respecter une certaine
structure
➢ Cette structure permet d’indiquer aux navigateurs web
la version de HTML utilisée, l’en-tête et corps de la page
internet, son encodage et sa sémantique
➢ Nous allons voir ensemble cette structure et utilité
HTML & CSS - Térence FERUT - SIO 2024-2025 14
2- Bases HTML
Structure HTML
HTML & CSS - Térence FERUT - SIO 2024-2025 15
2- Bases HTML
Structure HTML
Indique que ce fichier est une page HTML
Encodage
Informations générales
Titre Début
et fin
du
HTML
Contenu de la page
HTML & CSS - Térence FERUT - SIO 2024-2025 16
Exercice 2
Pour vous familiariser avec la structure de HTML :
1. Ouvrez votre fichier "[Link]" avec votre éditeur de code
2. Écrivez à la main la structure d’un fichier HTML, avec le cours
• Pas de copier-coller
3. Indiquez le titre de votre page web : "Portfolio de " suivi de votre
Nom et Prénom
4. Indiquez à nouveau votre Prénom + Nom dans le "body"
5. Enregistrez le fichier "[Link]", affichez la page web puis
appelez le formateur
HTML & CSS - Térence FERUT - SIO 2024-2025 17
2- Bases HTML
Balises : Définition
• Balises HTML = Éléments du code HTML, structure les contenus
• Ces balises servent à indiquer aux navigateurs internet et aux moteurs
de recherche la sémantique du contenu
• Exemple avec la balise <p> (paragraphe) :
• Code : <p>Ceci est un paragraphe</p>
• Affichage sur navigateur : Voici mon paragraphe
HTML & CSS - Térence FERUT - SIO 2024-2025 18
Structure d’une balise HTML
Elles sont construites sur ce schéma :
< balise >
La plupart des balises fonctionnent par paire, une balise ouvrante et une balise
fermante :
<balise>contenu</balise>
Pour les balises orphelines, il est possible d’ajouter un / en fin de balise, mais
ce n’est pas obligatoire :
<balise/>
HTML & CSS - Térence FERUT - SIO 2024-2025 19
Structure d’une balise HTML
Les balises peuvent avoir des attributs pour donner des indications
supplémentaires :
<balise attribut= "valeur de l’attribut">
Imbrication : les balises doivent être fermées dans le sens inverse de leur
ouverture :
<balise1><balise2></balise2></balise1>
HTML & CSS - Térence FERUT - SIO 2024-2025 20
Structure d’une balise HTML
Normale :
Ouverture Contenu Fermeture
Orpheline :
Ouverture + Contenu + Fermeture "automatique"
HTML & CSS - Térence FERUT - SIO 2024-2025 21
Les balises textuelles
Titres, sur 6 niveaux : h1>h2>h3>h4>h5>h6
Paragraphe
Paragraphe
Titres, sur 6 niveaux : h1>h2>h3>h4>h5>h6
Liste à puce
Paragraphe
Paragraphe
Liste à puce
Élément important
Élément important
HTML & CSS - Térence FERUT - SIO 2024-2025 22
Exercice 3
Pour vous familiariser avec les balises HTML :
• Contexte : Base de CV en ligne qui sera inclus dans le portfolio
1. Ouvrez votre "[Link]", dans la partie <body>, remplissez au moins :
• 1 titre <h1> | 2 titres <h2>
• 3 paragraphes <p>
• 1 liste à puce avec 4 éléments <li>
• 4 éléments importants <strong>
2. Sauvegardez votre fichier HTML et appelez le formateur
HTML & CSS - Térence FERUT - SIO 2024-2025 23
2- Bases HTML
Attributs : Définition
• Attributs HTML = Chaque balise HTML peut contenir un ou plusieurs attributs
• Ces attributs donnent des indications supplémentaires, permettant de
configurer ou d’adapter les éléments des balises
• Exemple avec la balise <img> (image)
• Code : <img src="[Link]"alt="logo brainyup">
• Attribut src : Indique le fichier image à afficher
• Attribut alt : Indique l’alternative textuelle de l’image
HTML & CSS - Térence FERUT - SIO 2024-2025 24
2- Bases HTML
Attributs : Exemples
Début de balise Fin de balise
Attribut + sa valeur Contenu
Début de balise Fin de balise
Attribut + sa valeur Attribut + sa valeur
W3Schools MDN
W3Schools MDN
HTML & CSS - Térence FERUT - SIO 2024-2025 25
2- Bases HTML
Commentaires
• Commentaires = Textes informatifs qui accompagnent le code source de notes
• Les commentaires n’apparaissent pas sur le site et n’impactent pas le code
• Ils servent à s’y retrouver dans son code, simplifier les mises à jour, rappels …
• Les commentaires doivent respecter une certaine structure :
<!-- Texte du commentaire -->
HTML & CSS - Térence FERUT - SIO 2024-2025 26
2- Bases HTML
Commentaires : Exemple
Commentaires
HTML & CSS - Térence FERUT - SIO 2024-2025 27
Exercice 4
Pour vous familiariser avec les commentaires HTML :
1. Ouvrez votre "[Link]", dans la partie <body>, ajoutez au moins :
• 2 commentaires liés aux titres
• 2 commentaires liés aux paragraphes
• 1 commentaire lié à autre chose
2. Sauvegardez votre fichier HTML et appelez le formateur
HTML & CSS - Térence FERUT - SIO 2024-2025 28
2- Bases HTML
Insérer une image
• L’insertion d’image est simple en HTML, on utilise la balise <img> (image)
• Il s’agit d’une balise orpheline, donc sans tag de fermeture
• Cette balise nécessite au moins 1 attribut pour fonctionner : src
• Il est possible d’ajouter d’autres attributs pour modifier l’image, informer les
navigateurs internet …
• Nous allons voir ensemble les possibilités de base de la balise <img>
HTML & CSS - Térence FERUT - SIO 2024-2025 29
2- Bases HTML
Image : Chemin de fichier
• Attribut src : Indique la source de l’image à afficher
• Cette source peut être absolue (URL d’image) ou relative (chemin de fichier)
• src absolue : src="[Link] Image sur un autre site
• src relative : src="[Link]" Image sur notre machine
En source relative, la structure dépend du chemin de fichier. Dans cet
exemple, le fichier image doit être dans le même dossier que la page HTML.
HTML & CSS - Térence FERUT - SIO 2024-2025 30
2- Bases HTML
Chemin de fichier
Racine
[Link]
Dossier
src="[Link]" [Link]
[Link]
[Link]
Sous-Dossier
HTML & CSS - Térence FERUT - SIO 2024-2025 31
2- Bases HTML
Insertion d’images
Pour vous familiariser avec l’insertion d’images en HTML :
1. Ouvrez votre "[Link]", dans la partie <body>, ajoutez au moins :
• Une image avec src absolue qui aura comme valeur :
[Link]
• 1 image de votre choix avec src relative au même niveau que l’[Link]
(même dossier)
• 1 image de votre choix avec src relative dans un sous-dossier "img"
2. Sauvegardez votre fichier HTML et visualisez le résultat
3. Vous devriez avoir 3 images affichées.
4. Appelez le formateur pour contrôler
HTML & CSS - Térence FERUT - SIO 2024-2025 32
2- Bases HTML
Insertion d’images
A votre avis, pouvons-nous changer les dimensions d’une image ?
Si oui, comment faire ?
HTML & CSS - Térence FERUT - SIO 2024-2025 33
2- Bases HTML
Image : alt
• Attribut alt : Indique le texte alternatif de l’image, doit décrire la situation
• Si l’image ne peut pas s’afficher, l’alt s’affichera à la place
• Octroie un meilleur confort de navigation aux malvoyants
• Impacte la SEO de la page web
HTML & CSS - Térence FERUT - SIO 2024-2025 34
2- Bases HTML
Image : title
• Attribut title : Indique des informations supplémentaires sur une image
• Infobulle lorsque l’on passe le curseur sur l’image
• Impacte la SEO de la page web
HTML & CSS - Térence FERUT - SIO 2024-2025 35
2- Bases HTML
Image : Dimensions
• Attribut width : Indique la largeur de l’image
• Attribut height : Indique la hauteur de l’image
• Attributs indispensables pour redimensionner une image, optimiser son
responsive design, utilisable sur d’autres balises
• Attention aux ratios et unités de mesure
Que se passe-t-il si on n'indique pas l’unité de mesure ?
HTML & CSS - Térence FERUT - SIO 2024-2025 36
2- Bases HTML
Image : Cumul d’attributs
• Comme nous l’avons vu, une balise peut contenir un ou plusieurs attributs
• Il est donc possible de cumuler tous les attributs de la balise <img> que nous
avons vus
• Dans ce cas, les propriétés des attributs s’additionnent
HTML & CSS - Térence FERUT - SIO 2024-2025 37
2- Bases HTML
Optimisation d’images
Pour vous familiariser avec les attributs d’images en HTML :
1. Ouvrez votre "[Link]", dans la partie <body> :
• Ajoutez des attributs alt et title à chaque image
• Insérez le logo de Google avec une largeur de 500px
2. Sauvegardez votre fichier HTML et montrez-le à votre formateur
HTML & CSS - Térence FERUT - SIO 2024-2025 38
2- Bases HTML
Liens hypertextes
• L’insertion de lien hypertexte utilise la balise <a> (ancre)
• Il s’agit d’une balise normale, donc avec tag de fermeture
• Cette balise nécessite au moins 1 attribut pour fonctionner : href
• Il est possible d’ajouter d’autres attributs pour ouvrir le lien dans un nouvel
onglet, indiquer la langue de la page de destination …
• Nous allons voir ensemble les possibilités de base de la balise <a>
HTML & CSS - Térence FERUT - SIO 2024-2025 39
2- Bases HTML
Liens hypertextes
Les liens hypertextes peuvent être très divers, nous allons voir au fur et à mesure :
• Vers une page web, un fichier, email, téléphone, id
• En relatif : Dans un dossier parent, au même niveau, ou sous-dossier
• Classiques ou optimisés SEO
HTML & CSS - Térence FERUT - SIO 2024-2025 40