2

LE LANGAGE HTML,
UN LANGAGE SÉMANTIQUE ET STRUCTUREL,
« CHEF D’ORCHESTRE »
DES INTERFACES GRAPHIQUES
HTML – syntaxe des balises – sémantique
1. PRESENTATION ET DEFINITIONS
Pas de HTML… pas de navigateur…
1. Présentation et définition du langage HTML

A l’origine du développement du WWW

Inventé par Tim Berners-Lee président du W3C : un organisme qui normalise le code HTML
et les technologies du web
Permet d’établir des liens entre les différentes pages (hyperliens)
Hypertext Markup Langage = « langage de balisage d’hypertexte »
HTML organise et structure le document avec des balises appelées « tags »
- Structurent l’interface graphique (la mise en page de vos contenus dans le navigateur)
- Définit la sémantique des contenus dans la page (qualifie les contenus)

<tag> le contenu </tag>

Un langage chef d’orchestre qui travaille avec 2 autres langages

- CSS qui gère l’aspect purement graphique du site
- JavaScript, un langage de programmation qui gère les interactions au sein de la page.
Ex : menu déroulant, contrôle des formulaires, « slider » …

NB : Dans le code ci-dessus <tag> est un nom utilisé pour l’exemple

3
Il s’agira par la suite de le remplacer par un nom de balise approprié
2. UN LANGAGE DE BALISES
STRUCTURELLES
Les balises HTML structurent la mise en page
2. Un langage de balises structurelles

BALISES OUVRANTES ET BALISES FERMANTES

Les balises agissent (sémantiquement et structurellement) sur le contenu qu’elles encadrent

2 balises : ouvrante et fermante :
<tag> le contenu </tag>

Exemple :

<b>ce texte sera écrit en gras</b>

<i>ce texte sera écrit en italique</i>

La balise fermante inclue toujours un « / » après « < »

NB : Développer en HTML c’est connaître les différentes balises, leurs sens

5
(sémantiques) pour les architecturer avec logique
2. Un langage de balises structurelles

BALISES AUTO FERMANTES

Souvent utilisées pour de la représentation graphique (traits de séparations, insertion

d’images, sauts de lignes)
1 seule balise qui s’ouvre et se ferme à l’intérieur d’elle même

<tag/>
Exemple :

<hr /> affiche un trait de séparation

<br /> effectue un saut de ligne

NB : La balise fermante inclue toujours un « / » avant « > »

NB : Afin de ne pas se tromper, toutes les balises HTML sont

6
systématiquement écrites en minuscule
2. Un langage de balises structurelles

BALISES IMBRIQUÉES
Pour créer des styles complexes, il est possible d’imbriquer ces balises les unes dans les autres.
<tag1><tag2>Bonjour !</tag2></tag1>

Exemple :
<b><i>Bonjour</i></b>
Affichera le mot « Bonjour » en italique

La balise qui s’ouvre en 1er doit systématiquement être celle qui se ferme en dernier

Organiser son code :

- Utiliser des sauts de ligne après chaque ouverture de balise pour rendre votre code plus lisible
- Utiliser des tabulations pour visualiser le niveau d’imbrication de la balise que vous utilisez
- Ajouter des commentaires : ils ne sont pas interprétés pas les navigateur et se placent
n’importe où dans votre code
Ils permettent de partager des informations entre les développeurs ou de tester des portions de
codes précises...
<!-- ceci est un commentaire -->

7
2. Un langage de balises structurelles

EXEMPLE D’ORGANISATION DU CODE

Exemple :

<div><p><u>Mon texte</u></p></div>
Devrait s’écrire plus lisiblement de cette manière

<!-- mon commentaire pour un autre développeur -->

<div>
<p>
<u>Bonjour</i></u>
</p>
</div>

- Les sauts de lignes permettent d’organiser graphiquement le code, ils ne sont pas interprétés
par le navigateur
- Les tabulations permettent de visualiser verticalement l’ouverture et la fermeture d’une
balise et de situer le niveau d’imbrication d’une balise.
Dans ce cas, il y a 3 niveaux de balises

8
2. Un langage de balises structurelles

BALISES ASSOCIATIVES

Balises qui fonctionnent par association de plusieurs balises :

Souvent utilisé pour les listes, les tableaux…
Exemple :
<ul> affiche une liste non ordonnée
<li>rubrique 1</li>
<li>rubrique 2</li>
<li>rubrique 3</li>
</ul>

Ces balises ne peuvent pas fonctionner séparément

NB : Sur le web, les listes sont largement employées pour construire des
9
menus, des sliders, des actualités chronologiques. Tout est liste…
2. Un langage de balises structurelles

FLUX DE BALISE ET INTERPRÉTATION GRAPHIQUE DU CODE

PAR LE NAVIGATEUR
Stratégie d’affichage des balises dans le navigateur : le DOM
Les navigateurs représentent les balises HTML dans leur ordre de lecture (de haut en bas)
- On appelle DOM (Domain Object Model), l’ensemble des balises qui constituent la page
HTML
- La représentation d’une balise dans le navigateur dépend des éléments qui l'entourent et
des éléments qui la précèdent

Rendu graphique spécifique à certaines balises

- Par défaut, les navigateurs prédéfinissent une représentation graphique pour certaines
balises. Cela permet de distinguer visuellement les balises les unes des autres.
(sinon tous les textes seraient de la même taille)

Par exemple, les niveaux de titre, balise <h1> seront affichés plus gros.
Cette représentation graphique varie d’un navigateur à l’autre

NB : Si les navigateurs n’avaient pas de style prédéfini pour les balises, alors
10
tous les textes apparaîtraient sur une même ligne, sans distinction
2. Un langage de balises structurelles

LES ATTRIBUTS DES BALISES

Ils permettent de rajouter des propriétés supplémentaires à nos balises.

<tag attribut="valeur">contenu</tag>

Balise d’ouverture Attribut Valeur : Taille, couleur… Balise de fermeture

Exemples :

affiche un lien vers la page « page.html »

<a href="page.html">lien vers la page HTML</a>

Définit l’emplacement de l’image à afficher « image1.jpg »

<img src="image1.jpg« />

NB1 : Il est possible de rajouter plusieurs attributs dans une même balise
NB1 : chaque balise a ses propres attributs, qui sont parfois mutualisés avec 11
d’autres balises
2. Un langage de balises structurelles

LES 2 TYPES DE BALISES

L’objectif est de comprendre la représentation graphique faite par le navigateur

Type « block », va graphiquement créer un block de contenu

- Principe d’empilement. Par défaut les blocks s’empilent les uns au dessus des autres
- Retour à la ligne. Un block occupe 100% de la largeur écran disponible. Le contenu positionné
après apparaît logiquement à la ligne
- Les blocks utilisent un système de marges intérieures / extérieures (padding / margin)
- Il est possible d’associer des dimensions (hauteur et largeur) a cette balise

Type « inline », va positionner les éléments les uns à la suite des autres
- Souvent utilisé pour du traitement graphique de texte (typographique)
- Pas de retour à la ligne, les éléments sont graphiquement représentés côte à côte
<b>texte 1</b><u>texte 2</u>
Sont 2 balises de type « inline ».
« texte 1 » et « texte 2 » seront affichés sur la même ligne

NB : Pour connaître le type d’une balise il faut simplement observer la façon

12
dont elle est représentée dans le navigateur
2. Un langage de balises structurelles

STRUCTURE DU DOCUMENT HTML

DTD / DOCTYPE : <!doctype html>

Version du langage de programmation utilisé. (toujours HTML5)

<html> </html>
Début et fin du document HTML

<head> </head>
- meta informations, balises <meta />
- encodage des caractères (UTF-8)
- titre du document:
- feuilles de styles (CSS)
- scripts (JavaSCripts)
<title> le titre de mon document</title>

<body> </body>
Le contenu du document visible à l’écran

13
2. Un langage de balises structurelles

STRUCTURE COMPLETE DU DOCUMENT HTML

<!doctype html>
<html lang="fr">
<head>
<meta name="description" content="description du site" />
<meta charset="UTF-8" />
<title>Le titre de ma page</title>
</head>
<body>
Mon contenu texte, mes images, visibles dans le navigateur
</body>
</html>

NB : L’intégralité des pages du web ont cette structure, c’est une convention 14
 3. UN LANGAGE DE BALISES
SÉMANTIQUES
Les balises HTML permettent de définir le sens du document en définissant
des catégories de contenus et leur role.
2. Un langage de balises structurelles

BALISES SEMANTIQUES / NON-SÉMANTIQUES

Est déterminée par le nom de la balise que l’on emploi. Strong, bold, i, sont autant de noms de
balises qui peuvent être sémantiques ou non sémantiques
Cette sémantique des balises a contribué à l’émergence du web et de sa pratique :
Moteur de recherche, IA...
La sémantique permet de qualifier les informations du document HTML.
A titre d’exemple, il est possible de deviner que cette séquence de chiffres (06 12 34 56 78) est
un numéro de téléphone. L’usage d’une balise HTML sémantique permet de l’indiquer dans le
code, et permet de qualifier cette information pour les moteurs de recherche.
Il existe 2 balises universelles, non sémantiques que l’on utilise pour nos besoins
de mise en page :
<div> est une balise de type « block », utilisée pour créer une architecture
<div>
<div>colonne de gauche</div>
<div>colonne de droite</div>
</div>

<span> est une balise de type « inline », utilisée pour traiter graphiquement des portions de
textes (ajouter du gras, de l’italique…)
<span>mon texte à traiter graphiquement</span> 16
 ?
OK, mais comment je fais pour utiliser
et savoir si une balise est sémantique ou non ?
Il faut le savoir, cela s’apprend à l’usage… 
La fondation Mozilla références les balises et leurs qualifications
https://developer.mozilla.org/fr/docs/Web/HTML/Element

Exemple d’utilisation. Je veux écrire un titre, je peux écrire.

<div>Mon titre</div>

Le titre s’affichera bien, mais l’usage de la balise <div>, générique, ne produira aucun sens
particulier
<h1>Mon titre</h1>
Au contraire, la balise <h1> va qualifier votre titre comme étant LE 1 er titre de votre document

Dans la mesure du possible, 17

il faut SYSTEMATIQUEMENT utiliser des balises sémantiques
2. Un langage de balises structurelles

HIÉRARCHIE DES CONTENUS

Un document HTML doit être structurer avec :

Des niveaux de titre

- Structure les informations de manière hiérarchique
- 6 niveaux de titres : <h1> le plus fort sémantiquement, <h6> le plus faible…
<h1>Titre</1>
<h6>Titre</h6>…
- Le texte courant peut être encadré avec un paragraphe
<p>Le texte de mon paragraphe</p>

Des sections qui définissent l’emplacement et la fonction du texte dans la page

- Ces balises découpent votre document en plusieurs parties.
Cela nous permet par exemple de savoir qu’il s’agit d’un pied de page, ou d’un élément de la
navigation…

18
2. Un langage de balises structurelles

Les balises de sections les plus connues sont les suivantes :

<header>
Définie l’entête du site
<nav>

Un élément de navigation et pas seulement la navigation principale

<footer>

Le pied de page dans notre document

<main>

Le contenu principal « original » de la page. Chaque page a des contenus récurrents, header,
navigation, footer. A l’inverse la balise <main> va qualifier le contenu qui ne se retrouve pas
dans les autres pages.
<section>

Une zone d’information. Par exemple toute la rubrique d’actualités.

<article>

Une portion de texte, un article ou une actualité. Il se situe généralement à l’intérieur

d’une section
19
20
2. Un langage de balises structurelles

RECAPITULATIF D’UNE BALISE HTML

Est une balise « ouvrante / fermante » ou « autofermante »

<tag>...</tag>
OU
<tag />

Est de type « block » ou « inline »

Influe sur la représentation graphique du navigateur
Avec un ou plusieurs attributs
<tag attribut="valeur" attribut="valeur">…</tag>

Est sémantique ou non sémantique

Correspond au nom de la balise que l’on emploie
- Non sémantique, l’information est non qualifiée et sera mal indexée
- Sémantique l’information est qualifiée, elle occupe un rôle et s’investie d’un sens dans notre
document HTML

21
 Merci pour votre attention.
Je suis disponible pour répondre à vos questions
 4. HTML ET CSS

Le CSS, le « vêtement » du langage HTML

 2. MÉTHODOLIE DE CRÉATION
ET PUBLICATION D’UNE «page web »
Créer une page HTML et la rendre publiquement accessible

24
2. Création et publication d’une page web

CRÉATION TRANSFERT STOCKAGE ACCES CLIENT

Programmation Des pages et des contenus Le serveur : Le navigateur (browser) L’internaute qui
au serveur stocke les fichiers du site - requête le serveur émet une requête :
(pages HTML, images…) - interprète le code HTML et Il souhaite accéder
Distribue ces fichiers le retranscrit graphiquement à une page web
Dépôt / envoie
de fichiers (upload)
https://
Récupération de fichiers

PAGE
Le navigateur propose :
HTML
LOGICIEL Un espace de stockage,
un ordinateur dédié Une représentation
(S)FTP graphique :
ou mutualisé
tests SSH UI : User Interface

Une expérience de Un client peut être,

Interroge la base de consultation un smartphone, un PC fixe
UX : User Experience une console de jeu,
Authentification : données une smart TV…
Adresse du serveur
SERVEUR Login
LOCAL Mot de passe

BDD
25
2. Création et publication d’une page web

DÉVELOPPEMENT DE PAGE WEB « LOCALE »

Le développeur web
Personne physique chargée de produire du code informatique (en l’occurrence des pages Web)
grâce à un « IDE » (integrated development environment), un logiciel d’aide à la production de
code

Page web
- Un fichier .html contenant du langage de programmation HTML
HTML = « Hypertext Markup Language »
- Les 3 langages pour concevoir des pages web sont HTML, CSS et JavaScript
HTML = architecture / CSS = design graphique / JavaScript = interactions
- Chacun de ces langages est versionné dans le temps
- Une page Web peut être statique (figée) OU dynamique (les données évoluent)
Ex: blogs / réseaux sociaux numériques / e-commerce / moteurs de recherches

NB : l’adjectif « locale » qualifie un travail effectué hors connexion,

26
sur la machine du développeur avant sa diffusion en ligne
2. Création et publication d’une page web

TESTS D’UNE PAGE WEB LOCALE

Les navigateurs (browsers) :

Interprètent graphiquement le code HTML. On parle d’UI : User Interface
Plusieurs navigateurs (Opera – Safari – Edge – Firefox – Chrome) qui fonctionnent
sur plusieurs OS (operating system), Windows, Mac OS, Android etc…

ATTENTION : l’interprétation du code HTML peut varier d’un navigateur à l’autre

et les fonctionnalités disponibles lorsque l’on code ne sont pas les mêmes
Tests en « local »
Tests d’interprétation du code HTML dans le navigateur du développeur (sur sa
machine) avant sa diffusion en ligne sur le serveur de « production »

NB : Dans une projet web, l’on distingue généralement 3 phases :

27
Le développement, les tests, la mise en production
2. Création et publication d’une page web

SERVEUR ET HEBERGEMENT

Hébergement

- Le Serveur est un ordinateur distant qui stocke

(héberge) les fichiers de notre site web pour les rendre
accessibles aux internautes connectés
- index.html
- page2.html - Consulter une page web = consulter un fichier HTML
IMAGES
- contact.html sur un serveur

- Un « hébergement » est une prestation que l’on

contractualise souvent auprès d’un hébergeur.
VIDEOS Cette prestation peut être mutualisée (plusieurs sites
sur la même machine) ou dédiée (l’intégralité des
ressources de la machine est à notre disposition)

- Un hébergement est également conditionné par les

capacités du serveur : mémoire, processeur etc…
28
Photo d’un « datacenter » 29
Un technicien intervient sur une « baie » de serveur 30
2. Création et publication d’une page web

TRANSFERT DES FICHIERS DU SITE LOCALE VERS LE SERVEUR

Logiciel (S)FTP : (Secured) File Transfer Protocol

- Sert à envoyer des fichiers sur le serveur distant depuis sa machine à l’aide d’une
connexion internet sécurisée. Il s’agit (à notre niveau) d’un logiciel, « FileZilla » par example.

Ordinateur local Serveur

- index.html
- index.html
- page2.html
- contact.html IMAGES Logiciel - page2.html
- contact.html IMAGES
FTP

VIDEOS
VIDEOS

SITE LOCAL SITE DISTANT

31
2. Création et publication d’une page web

ENVOIS / RECEPTION DE CONTENUS WEB COTE CLIENT

Le client = Internaute
La totalité des objets connectés au web peuvent interroger des serveurs.
Il peut s’agir de navigateurs, d’objets connectés (IOT Internet Of Things), d’applications
mobiles, de Smart TV et bien d’autres…

Accès aux contenus web et « URLs »

- Requête utilisateur = demande l’accès au contenu d’un serveur
- Une « URL » unique (visible dans la barre d’adresse), définit le contenu demandé
- Le serveur réceptionne la requête utilisateur et renvoie la page ou le contenu demandé
- Le navigateur interprète la réponse envoyé par le serveur : code HTML, images, feuilles de style…
- Le navigateur met « en cache » les contenus réceptionnés pour économiser les requêtes qui
referaient appelle au même contenu

NB : URL = « Unified Ressource Location » 32

 ?
Ok, mais comment notre navigateur fait-il
pour accéder au bon serveur
et trouver les fichiers
qui correspondent à notre requête ?
2. Création et publication d’une page web

DECRIPTER UNE URL

Les ordinateurs disposent d’un adresse IP sur le réseau
Composée de 4 séquences de chiffres (historiquement et à titre d'exemple)
Ex : 92.193.252.7

Les DNS (Domain Name System)

Permettent de faire correspondre un nom de domaine avec l’adresse IP d’un serveur dans un
dossier spécifique de notre hébergement
Ex : 92.193.252.7 <=> www.monsite.com
Cette correspondance s’établie via un « serveur DNS » souvent attaché à un FAI (Fournisseur
d’accès à Internet)
Une URL, unique défini l’emplacement de ressource à récupérer sur ce serveur
Protocole + Sous domaine + Nom de domaine + imbrication des dossiers + nom de la page / du fichier

La 1ère page d’un site OU d’un dossier s’intitule : « index »

l2.ecoledunet.com = l2.ecoledunet.com/index.html
34
2. Création et publication d’une page web

CLIENT NAVIGATEUR FAI SERVEUR

souhaite consulter le site :
www.ecoledunet.com
Effectue une requête Le fournisseur d’accès à Reçoit une demande de
pour consulter le site : Internet reçoit la demande consultation pour
www.ecoledunet.com de consultation pour le site. la page d’accueil…
Il va chercher
l’emplacement du serveur
afin de pouvoir y accéder

Je n’ai pas
trouvé J’ai trouvé !
https://
Je réponds
Option 1 ou 2
Le navigateur va se connecter à
OPTION 1 :
internet via son FAI :
Interroge un serveur de nom de domaines J’ai trouvé cette page, je
Fournisseur d’Accès à Internet :
pour trouver l’adresse l’IP et renvoie le fichier
Orange, Free, SFR…
l’emplacement du serveur qui correspond à correspondant
la demande du client :
www.ecoledunet.com OPTION 2 :
Je n’ai rien trouvé, j’informe
le client qu’elle n’existe pas
en renvoyant une page 404

Serveur
de DNS 35
 ?
Si je comprends bien… A chaque fois
que mon navigateur fait une requête au serveur,
ce dernier lui renvoie la page HTML correspondante.

Mais il doit y avoir

des millions de pages HTML sur le serveur alors ???
2. Création et publication d’une page web

PAGE STATIQUE ET DYNAMIQUE :

Interprétation du serveur, 2 types de pages web
Lorsque le serveur réceptionne une « requête »…

Pages et contenus statiques

Le serveur renvoie le contenu qui se trouve sur son disque dur tel quel… C’est le cas des
images par exemple…
Ex : https://www.univ-montp3.fr/sites/default/files/logo-upvm_4.jpg

Pages et contenus dynamiques

Le serveur effectue des opérations avant d’envoyer sa réponse :
Création de la page HTML sur mesure, affiche la date du jour dans la page HTML, envoie de
mails, accès à la base de donnée, copie de fichiers et bien d’autres opérations…

Ex : sur un site e-Commerce, il n’existe pas autant de pages HTML qu’il y a de produits,
MAIS 1 page produit que le serveur va adapter aux contenus de la base de donnée (titre du
produit, photos, description, prix).
On appelle cette page dont le contenu « s’adapte » un template

37