HTML 5
Introduction
Activité 3 et 4
Document étudiant
v1.1
Cours de conception Web - Graphic Designer
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
1
Sommaire
Éditeur de code 3
Définition de HTML 5 4
Le squelette HTML 5 5
Les balises HTML 5 6
Les attributs HTML5 7
Niveau de titre HTML de H1 à H6 8
Liens HTML 10
Liens HTML 5 vers une adresse e-mail 11
Les encres HTML 5 12
Les images HTML 14
Image en tant que lien 14
Définir des légendes à vos images 15
Les listes HTML 15
Les éléments de bloc HTML 17
Mise en page HTML 18
Exercice 20
Ressources en ligne 21
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
2
1. Éditeur de code
Pour coder en HTML / CSS, il est nécessaire d’utiliser un éditeur de texte prenant en
charge le langage HTML / CSS. Nous allons utiliser un utilitaire puissant et gratuit :
ATOM.
Installer ATOM (éditeur de code HTML)
[Link]
Éditeur en ligne gratuit W3School :
Choisissez HTML ou CSS :
[Link]
Lire le CSS sur Atom : Installer le plugin ide-css
[Link]
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
3
2. Définition de HTML 5
HTML est la dernière version de HTML, il a été formalisé par le W3C.
Le W3C (World Wide Web Consortium) est une communauté internationale dont le but
est de développer les normes du Web.
Les navigateurs Web doivent suivre les recommandations et les normes du W3C. Lors
du développement d’un site ou d’une application Web, il vous faudra suivre les règles
du W3C. Il est possible de tester votre site à l’aide d’un validateur W3C.
Validateur W3C
[Link]
W3C School (référence de toutes les balises HTML et CSS)
[Link]
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
4
A. Le squelette HTML 5
Pour comprendre le fonctionnement d’une page HTML, prenons un exemple basique :
Les différentes balises utilisées dans cette page HTML sont :
● la déclaration <!DOCTYPE html> qui définit que le document est du HTML5. Elle
est obligatoire et doit toujours se situer au début du document ;
● l’élément <html> est l’élément racine de la page HTML. La balise fermante
<html> se situe à la fin du document ;
● l'élément <head> contient les méta informations du document comme le titre, le
type d’encodage, [Link] se situe au début du document, juste après la balise
<html> ;
● L’élément <title> spécifie le titre du document et se trouve à l’intérieur de
l'élément <head>. Ce titre n’est pas visible dans la page Web, mais dans l’onglet
du navigateur et représente la première ligne visible des résultats de recherche
Google ;
● l’élément <body> contient le contenu visible de la page Web ;
● l’élément <p> définit un paragraphe.
Quelle que soit la page Web créée, le squelette de base sera toujours le même.
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
5
B. Les balises HTML 5
Une balise HTML se compose du nom de la balise entre chevrons et est utilisée le plus
souvent par paire. La balise d’ouverture est constituée du nom, suivi éventuellement
d’un ou plusieurs attributs, tandis que la balise de fermeture est composée du même
nom, précédé d’une barre oblige <x/>. Par exemple, la balise <p> commence un
paragraphe, tandis que la balise </p> finit un paragraphe. Quelques balises HTML
n’ont pas de balise de fermeture, par exemple les balises <br /> et <hr /> sont
auto-fermantes.
Notes :
● Techniquement, p est appelé un élément et entre chevrons, on l’appelle balise.
Veillez à respecter cette distinction.
● Pour les balises fonctionnant par paire, faites toujours attention à ne pas
oublier la balise fermante. Si une balise est mal fermée, la page HTML ne
s'affiche pas correctement et entraîne des erreurs d'analyse.
● Lors d’imbrication de balises, il est nécessaire de d’abord fermer la balise
ouverte intérieure avant de tenter de fermer la balise ouverte extérieure.
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
6
Exemple d’imbrication de balises HTML :
C. Les attributs HTML5
Les attributs sont appliqués aux éléments HTML, ils fournissent des informations
supplémentaires. Ils viennent en paire nom / valeur. La syntaxe est la suivante :
name=”value”.
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
7
Dans l’image ci-dessus, le nom de l’attribut est head et sa valeur est l’url
[Link] Par convention, il est nécessaire de toujours mettre des guillemets
simple ou double autour de la valeur de l’attribut.
D. Niveau de titre HTML de H1 à H6
Les niveaux de titre h1 à h6 sont utilisés pour rendre les titres sur vos pages Web, du
plus grand au plus petit. Les titres sont utiles pour définir une hiérarchie spécifique de
titre dans un document HTML.
Exemple des niveaux Hx
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
8
Vérifiez le rendu dans votre navigateur Web
Les niveaux de titre sont très importants pour les moteurs de recherche, qui les
prennent en compte pour le référencement. Un niveau de titre 1 est considéré comme
étant plus important qu’un niveau de titre 2 ou 3. Si vous avez des mots-clés
importants, vous devez essayer de les inclure dans les titres de niveau 1.
Les niveaux de titre sont utilisés uniquement pour structurer votre page.
E. Liens HTML
Les liens permettent de naviguer sur une page Web, il existe plusieurs statuts, par
exemple, quand vous passez la souris sur un lien (hover), quand celui-ci est actif
(active) etc.
Note :
Un lien est généralement placé sur un texte, mais il est tout à fait possible de le placer
sur n’importe quel autre élément HTML.
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
9
Syntaxe d’un lien HTML :
Dans cet exemple, l'utilisateur va cliquer sur le texte Mon premier lien HTML et sera
redirigé vers le site [Link]
Dans cet exemple, le lien est dit absolu, c’est-à-dire qu’on indique l’adresse intégrale
(URL). Si vous faites un lien interne ou local, on parlera d’un lien relatif, exemple :
Dans ce cas de figure, mon lien pointe vers le dossier racine ou se trouve ma page
HTML contenant mon lien, puis ouvre la page [Link]
La syntaxe / permet de naviguer dans un dossier d’un niveau inférieur (enfant)
La syntaxe ../ permet de naviguer dans un dossier d’un niveau supérieur (parent ou
autre hiérarchie).
Dans le cas ou votre lien pointe vers une page externe à votre site, il est bon de l’ouvrir
dans un nouvel onglet afin de ne pas perdre le visiteur sur votre site Internet, il s’agir
de l’attribut target=”_blank”
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
10
Il existe de nombreux attributs que je vous invite à découvrir sur le site du W3C
Schools : [Link]
F. Liens HTML 5 vers une adresse e-mail
Pour créer un lien vers une adresse e-mail, il suffit d’utiliser le préfixe mailto:
La syntaxe est la suivante :
Au click sur le lien, cela aura pour effet d’ouvrir automatiquement le logiciel mail
installé sur la machine de l'utilisateur avec l’adresse e-mail pré rempli.
Il est possible d’ajouter d'autres paramètres comme le sujet, une copie carbone ou le
corps de message pré rempli.
La syntaxe est la suivante :
G. Les encres HTML 5
Il est possible de créer un lien vers une ancre, c’est une sorte de point de référence
que vous pouvez mettre à l’intérieur d'une page HTML assez longue. Les ancres sont
principalement utilisées pour retourner en haut d’une très longue page Web.
Pour créer une ancre, il suffit d’ajouter l’attribut “id” à une balise, peu importe le type
de balise et d'y ajouter une valeur (un nom) à votre id. C’est cette valeur qui sera
utilisée à l’intérieur d'un lien pour pointer dessus précédée de #, exemple :
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
11
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
12
H. Les images HTML
En HTML, les images sont définies par la balise <img>. Cette balise est autofermante,
Il est nécessaire d’y ajouter des attributs tels que “src” pour spécifier l’url ou se trouve
l’image, exemple :
● L’attribut alt est essentiel pour les moteurs de recherche afin d’indexer
correctement une image, il permet également d’afficher le nom de l’image si
celle-ci est inaccessible, cette attribut sert à décrire votre image, cet attribut
est également obligatoire pour une validation W3C ;
● l’attribut title permet d’ajouter le nom de l’image quand la souris passe
par-dessus ;
● l’attribut width (largeur) et height (hauteur) permettent de définir la taille de
l’image. Il va de soi que ses valeurs ne doivent jamais modifier le ratio de l’image
sinon, celle-ci sera déformée. Privilégiez le recadrage d'images via un logiciel
photo pour obtenir une photo optimisée pour la taille du fichier, plus vos
fichiers sont volumineux, plus ils prendront de la place sur votre serveur et plus
lent votre site sera à l’ouverture / chargement. Il est est préférable de spécifier
les dimensions de l’image en CSS, ce que ne vous verrons un peu plus tard.
I. Image en tant que lien
Il est possible de créer un lien vers une image, ce qui signifie que lorsque l'utilisateur
clique sur le lien, il est redirigé vers l’image, la syntaxe est la suivante :
Cette technique est souvent utilisée pour l'affichage de galeries photo, ou affiche
souvent des miniatures qui ouvrent la photo en plus grand format via un script type
popup ou lightbox.
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
13
J. Définir des légendes à vos images
Vous pouvez définir des légendes à vos images, pour se faire, il est nécessaire
d’encapsuler l’image dans une balise <figure>. La légende elle-même est insérée dans
une balise <figcaption> à la suite de la division, exemple :
K. Les listes HTML
Il est possible de créer des listes ordonnées, à puces ou de définitions.
● Listes ordonnées :
○ une liste ordonnée commence par une balise . A l’intérieur, chaque
élément de liste commence par la balise . Exemple :
○ Vous pouvez définir le type de marqueur d’élément de liste en utilisant
l’attribut type de l'élément.
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
14
● Listes à puce :
○ une liste à puce commence avec la balise <ul>. Chaque élément de liste
commence avec la balise <li>, exemple :
○ la propriété CSS list-style-type permet de choisir une autre forme qu’un
petit rond
● Listes de description :
○ Une liste de description est une liste de termes, avec une description
pour chaque terme. La balise <dl> définit la liste de description, la balise
<dr> définit le terme lui-meme et la lia balise <dd> encapsule la définition
du terme, exemple :
● Listes imbriquées :
○ Les listes imbriquées sont particulièrement utile pour créer des menus
à plusieurs niveaux, exemple :
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
15
L. Les éléments de bloc HTML
Les éléments HTML peuvent être classées en deux catégories :
1. les éléments de bloc
2. les éléments de ligne
Les éléments de bloc (block) peuvent apparaître uniquement dans un élément <body>,
ces éléments commencent toujours sur une nouvelle ligne et occupent toute la place
possible. Les éléments de niveau bloc créent des structures plus grandes que les
éléments de niveau en ligne (inline). Les éléments bloc peuvent contenir des éléments
en ligne.
Exemple d’affichage d’un élément bloc et en ligne :
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
16
Les éléments en ligne n’occupent que l’espace délimité par les balises définissant
l’élément.
Exemples :
M. Mise en page HTML
HTML propose des éléments sémantiques spécialement conçus pour créer des parties
d’une page Web, vous pouvez toujours utiliser ces balises spécifiques :
<header> Définit l'en tête d’un document ou d’une section
<nav> Définit le conteneur des liens de navigation
<section> Définit une section
<article> Définit un article
<main> Définit le contenu principal du document
<aside> Définit un contenu secondaire (ex: barre latérale)
<footer> Définit le pied de page
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
17
<détails> Définit des détails additionnels
<summary> Définit l'en tête pour l'élément détails
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
18
Pour créer des mises en pages HTML sur plusieurs colonnes, il existe différentes
techniques :
1. les propriétés CSS float (obsolète car limitées)
2. les propriétés CSS flexbox (ce que nous allons voir durant ce module)
3. les propriétés CSS grille ou grid
N. Exercice
Avec tous les éléments HTML vus durant ce cours, nous allons créer notre premier
template HTML, voici les directives :
1. créer 3 pages HTML : Accueil / Services / Contact
2. toutes vos pages doit avoir un titre unique correspondant à la page
3. créer un menu présent sur toutes les pages qui : Accueil, Service et Contact
4. Accueil :
a. Créer une bannière (photo avec un lien par-dessus)
b. le contenu que vous souhaitez avec au moins un titre H1 et un
paragraphe
5. Service :
a. Créer une liste ordonnée à 3 niveaux (contenu que vous voulez)
6. Contact :
a. Insérer un numéro de téléphone cliquable via un téléphone,
b. insérer une adresse e-mail cliquable
Notes :
Il existe d’autres balises très souvent utilisées par le passé telles que les tableaux
<table> que ne nous verrons pas dans ce module, les tableaux sont rarement utilisés et
ont un usage très spécifique.
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
19
O. Ressources en ligne
● [Link]
● [Link]
Cours de conception Web - Graphic Designer - IFAPME. - Olivier Warmon
20
