Page |I

PLAN DU COURS DE PROGRAMMATION WEB

I. TITRE
 Intitulé : PROGRAMMATION WEB
 Titulaire : Cédric KALENGA LUBANGE
Licencié en Sciences Informatiques, Option Conception des Systèmes
d’Information
 Année Académique : 2021 – 2022.

II. INFORMATIONS GÉNÉRALES DU COURS

 Département : Informatique / ISP/USJ
 Auditeurs visés : L1/Bac 1 Informatique de Gestion
 Nombre d’heures : 60 heures
 Heures théoriques : 30 heures
 Heures pratiques : 30 heures
 Langue : Français

III. INFORMATIONS GÉNÉRALES DE L’ENSEIGNANT

 Modalités de contact :
• Téléphone : +243 995 504 660 / +243 817 621 375
• E-mail :

[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

IV. OBJECTIFS DU COURS

 OBJECTIF GENERAL

Ce cours de langage de programmation a pour objectif général de donner

une formation et des compétences aux étudiants de la Première Licence
Informatique dans la programmation web en utilisant le Langage de
balisage HTML 5.

 OBJECTIFS SPÉCIFIQUES

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | II

À la fin de ce cours l’étudiant de L1 Informatique sera capable :

• De décrire le contenu d’une page web ;
• De manipuler aisément les balises du HTML 5 ;
• De mettre en forme le contenu d’une page web ;
V. CONTENU DU COURS

CHAP I : GÉNÉRALITÉS SUR LE WEB

I.1. L’histoire de la naissance du web
I.2. Définitions des concepts et notions
I.3. Le développement web
I.4. Les technologies du web
I.5. Les acteurs du web
I.6. Les outils de développement web

CHAP II : LE LANGAGE HTML

II.1. Introduction
II.2. Structure d’un document HTML 5
II.3. Les éléments de texte
II.4. Navigation hypertexte
II.5. Insertion d’objets multimédias
II.6. Tableaux des données
II.7. Formulaires web

CHAP III : LE LANGAGE CSS 3

III.1. Introduction
III.2. Mise en place d'une feuille de style
III.3. Mise en forme
III.4. Mise en page

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 Page |1

CHAP I : GÉNÉRALITÉS SUR LE WEB

I.1. L’histoire de la naissance du web

Ce qui fait le succès du Web aujourd'hui, c'est à la fois sa simplicité et sa facilité

d'accès. Il suffit de savoir utiliser un ordinateur et de disposer d'un navigateur comme
Firefox, Opera ou Chrome. Même le néophyte n'éprouverait pas de difficulté à surfer
sur le Web, parce qu'il n'a pas besoin de savoir tout ce qui se passe derrière le
navigateur pour s'en sortir.

Par contre, l'étudiant en sciences informatiques que vous êtes doit connaître
les bases du fonctionnement d'un site web. Où se trouve l'application qui génère tout
ce qu'affiche le navigateur ? Et le navigateur lui-même, comment fait-il ? Quelles sont
les technologies mises en œuvre pour réaliser ce genre d'application ? Comment
combiner toutes ces technologies ? Voilà autant de questions auxquelles vous devez
pouvoir répondre.

Le Web est la notion centrale de ce cours et le mot le plus cité dans ces notes,
raison pour laquelle il est important de commencer par le définir avant d'aborder des
notions plus avancées.

I.2. Définitions des concepts et notions

Le World Wide Web, communément appelé le Web, parfois la Toile,

littéralement traduit en français par la toile d'araignée mondiale, est un
système hypertexte public fonctionnant sur Internet et qui permet de consulter, avec
un logiciel approprié appelé navigateur web ou butineur, des documents
multimédias, appelés pages web.

Par document multimédia, il faut entendre un document qui contient ou

susceptible toute sorte de données : du texte, des images, de l'audio et de la vidéo et
qui organise toutes ces données de manière cohérente. On dit aussi que le multimédia,
c'est l'intégration de données numériques de différentes natures.

Le Web comme système hypertexte signifie que les documents qui le

constituent sont liés les uns aux autres par le mécanisme de liens hypertextes appelés
aussi hyperliens. Les hyperliens sont des éléments de texte insérés dans des pages web
pour assurer la navigation entre pages. Si une page contient un lien vers une autre
page, alors on peut passer (dans le jargon on dit : naviguer, surfer) de la première page
à la deuxième. On dit alors que la première page pointe vers la deuxième.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 Page |2

La représentation du Web comme une toile vient des hyperliens qui lient les
pages web entre elles pour former ainsi un gigantesque réseau semblable à la toile
d'araignée.

Le mot « web » (w minuscule) est utilisé comme adjectif qualificatif et désigne

tout ce qui se rapporte au web. Par exemple, dans les expressions « page web », «
document web », « site web », etc.

Le Web, est-ce la même chose qu'Internet ?

Le Web est l'application d'Internet la plus populaire. Le Web a été inventé des
années après Internet, mais c'est le Web qui a favorisé l'utilisation d'Internet par le
grand public. Depuis, le Web est fréquemment confondu avec Internet dans le langage
vulgaire. Cependant, il faut toujours se rappeler qu'Internet représente un réseau
informatique, alors que le Web est une application qui fonctionne sur ce réseau, aux
côtés d'autres applications telles que la messagerie électronique, la messagerie
instantanée, etc.

Ressource web, URI et URL

Une ressource web est une entité informatique (fichier, dossier, boîte email)
accessible indépendamment d'autres ressources. Une ressource est dite locale si elle est
présente sur l'ordinateur de l'utilisateur, par opposition à une ressource distante (ou en
ligne, online), accessible à travers un réseau. Une ressource est dite en accès public si elle
est librement accessible depuis Internet.

URI signifie « Uniform Resource Identifier », traduit en français en «

Identificateur uniforme de ressource ». C'est un mécanisme permettant d'identifier les
ressources informatiques de manière unique sur Internet.

Un URI est essentiellement composé des 5 parties suivantes et parmi lesquelles

deux seuls sont obligatoires :

• Scheme (le schéma) : indique le protocole utilisé.

• Authority (l’autorité) : identifie le domaine.
• Path (le chemin) : indique le chemin d’accès à la ressource.
• Query (la requête) : représente une action de requête.
• Fragment (le fragment) : désigne un aspect partiel d’une ressource.

Seuls le schéma et le chemin doivent nécessairement apparaître dans chaque

identifiant. Dans la syntaxe commune aux URI, toutes les parties apparaissent les
unes derrière les autres et sont séparées par des signes bien précis.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 Page |3

Prenons l’exemple d’une adresse Web classique :

"https://example.org/test/test1?search=test-question#part2"

• Scheme : https
• Authority : example.org
• Path : test/test1
• Query : search=test-question
• Fragment : part2

URL signifie « Uniform Resource Locator », « Localisateur uniforme de

ressource ». L'URL est un cas particulier d'URI utilisée pour localiser les pages web sur
Internet. Dans le langage courant, on parle d'Adresse Internet ou Adresse web pour
désigner respectivement une URI et une URL. L'URL d'une ressource ou d'une page
web est donc son adresse sur le Web. Elle permet de localiser la ressource ou la page
sans ambiguïté.

Une URL est composée de quatre éléments principaux suivants :

1) http ou https :

HyperText Transfert Protocol ou HyperText Transfert Protocol Secure sont

ce qu’on appelle les protocoles. Ils permettent de recevoir et d’envoyer des
informations au serveur d’un site web. Pour éviter tout risque de
détournement ou de falsification des données lors des échanges entre les
utilisateurs et le site internet, il existe un chiffrement dit SSL (Secure Socket
Layer) qui pallie les défauts en matière de sécurité du protocole http.

2) www. :

Le www. est de plus en plus rare, mais est toujours usité. Acronyme de
World Wide Web, il n’est pas rigoureusement nécessaire de l’inclure à son
adresse internet lorsqu’on crée son site. Cependant, si une adresse internet
est “enregistrée” avec un www., vous devez obligatoirement l’écrire lors
de votre recherche. Toutefois il est relativement aisé, via l’interface de
l’hébergeur ou depuis le fichier htaccess de votre site, de rediriger
l’adresse https://www.ispkamina.org vers l’adresse https://ispkamina.org,
ou l’inverse. Il faut en tout cas privilégier une adresse unique, avec ou sans
www (et rediriger l’autre sur cette adresse) pour ne conserver qu’une
version d’url sur le site, sans quoi on duplique les pages.

3) Le nom du domaine :

Le nom de domaine est le nom, l’identité de votre site. Par exemple,

ispkamina, dans l’adresse web https://ispkamina.org est le nom de

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 Page |4

l’institution dont vous consultez le site internet. C’est l’identité du site, la

vôtre sur le web, et c’est grâce à ce(s) terme(s) que les internautes vous
retrouveront sur la toile.

4) L’extension :

Que ce soit .fr, .com, .net ou .org, entre autres, toute adresse internet se doit
de posséder une extension. Deux types d’extension d’URL existent :

• Les extensions géographiques (.fr pour la France, .ca pour le Canada,

.be pour la Belgique etc…) ;
• Les extensions génériques, qui qualifient l’activité du site en question,
telles que .biz, pour le business, .net pour une entité définie comme un
réseau (net = network ou réseau en anglais), ou .com pour les activités
commerciales. À noter que le .com est utilisé pour à peu près tous les
domaines (excepté pour les entités à but non commercial comme les
associations, on préfère alors le .org).

Exemple : https://www.google.com, https://ispkamina.org,

https://gadschool.org, https://www.termitiere.org sont toutes des URL

Page web et site web

Définitions

Une page web (ou page tout court) est un document destiné à être consulté
avec un navigateur web. Une page web est toujours constituée d'une ressource centrale
(généralement un document HTML) et d'éventuelles ressources liées
automatiquement accessibles (feuilles de style, scripts javascript, images, animations,
fichiers audios, vidéos, ...).

Un site web (ou site tout court) est un ensemble de pages web et d'éventuelles
autres ressources, liées dans une structure cohérente, publiés sous l'autorité d'une
entreprise, une administration, une association, ou un particulier et hébergée sur un
ou plusieurs serveurs web sur Internet.

Site web statique, site web dynamique, application web

Une page web statique est une page réalisée uniquement à l’aide du HTML et
du CSS. Son contenu ne peut pas être mis à jour automatiquement : il faut que le
créateur du site (le webmaster) modifie le code source pour y ajouter des nouveautés.
Ce n’est pas très pratique quand on doit mettre à jour la page plusieurs fois dans la

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 Page |5

même journée par exemple ! Un site web dont toutes les pages sont statiques est appelé
site web statique. Les sites statiques sont bien adaptés pour réaliser des vitrines, pour
présenter par exemple son entreprise, mais sans aller plus loin. Ce type de sites se fait
de plus en plus rare aujourd’hui, car dès que l’on rajoute un élément d’interaction
(comme un formulaire de contact ou de connexion), on ne parle plus de site statique
mais de site dynamique.

Une page web conçue entièrement en HTML est totalement statique et n’offre
aucune possibilité d’interagir avec le visiteur (l’internaute). Son contenu
informationnel ne peut se modifier automatiquement sans l’intervention du
Webmaster ; c’est-à-dire que ce dernier doit retirer la page du serveur, mettre à jour
son contenu, avec un éditeur de texte par exemple, et la recharger sur le serveur.

Cette absence de dynamisme dans le HTML est sa plus grande faiblesse. En

effet, certaines catégories de sites web sont doivent actualiser leur contenu à une
fréquence qu’un être humain (le Webmaster) ne peut pas suivre. Il faut coupler le
HTML à plusieurs autres langages tant du côté du client que du serveur, lesquels
langages se chargeront alors d’actualiser automatiquement l’information offerte par le
site web.

Une page web dont le contenu est régénéré (actualisé) automatiquement est
dite page web dynamique. Un site web ayant de pages dynamiques est appelé site web
dynamique ou application web.

Quand la page web demandée est dynamique, le schéma de communication

entre le client et le serveur HTTP décrit ci-haut change légèrement, parce que ladite
page n’existe pas et doit être générée automatiquement ou elle existe physiquement
mais son contenu doit être produit dynamiquement :

Le client demande une page web ;

Le serveur prépare la page spécialement pour le client ;

Le serveur retourne au client la page qu’il a préparée à l’étape précédente.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 Page |6

Dans ce scénario, la page web est générée dynamiquement à chaque fois

qu’elle est demandée ; c’est précisément ce qui fait la particularité des sites web
dynamiques. C’est comme cela que certains sites affichent, par exemple, le nombre
approximatif des personnes connectées.

Types d'applications web

Il existe plusieurs types d'applications web selon les usages qu'on en fait. On
trouvera : les sites web institutionnels, les sites web marchants, les réseaux sociaux, les
forums, les salons de chat, les moteurs de recherche, les sites de Webmail, les blogs,
etc.

I.3. Le développement web

Le développement web est l’activité consistant à créer des applications web.

En pratique, c’est un mélange d’édition de contenu (publication web), de création
artistique (conception web ou design web) et de programmation informatique
(programmation web) permettant à la fois de préparer le contenu informationnel des
sites web, de soigner leur de présentation et d’ajouter des fonctionnalités utilisateur
avancées.

On appelle Développeur web la personne dont le développement web est la

profession.

I.4. Les technologies du web

Un standard ou une norme désigne un élément de référence, une règle fixée

ou adoptée par l'usage, à laquelle tout le monde doit ou devrait se conformer pour être
en accord avec les autres membres de son domaine.

Une technologie est toute réalisation humaine faite par application de théories
et connaissances tirées des sciences mathématiques et des sciences naturelles dans les
domaines techniques. Les technologies permettent de résoudre des problèmes et de
réaliser des tâches au quotidien. Par exemple : les technologies de l'information et de
la communication, les appareils ménagers, les nos vêtements, nos bijoux, sont des
technologies.

Les standards du Web est une expression désignant différentes technologies et

protocoles utilisés sur le Web (intervenant dans le fonctionnement du Web) et en
particulier ceux définis par le W3C sous forme de recommandations. Elle se réfère
principalement aux technologies formant le socle principal d’un document web : le
HTML et le XHTML, les feuilles de style en cascade (CSS) et le DOM (Document Object
Model). Cependant, elle peut également, selon les contextes, s’étendre à un ensemble
plus vaste. On pourra alors regrouper ces technologies en quelques catégories :

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 Page |7

Les protocoles du Web : HTTP : HyperText Transfer Protocol et les autres

protocoles de la pile TCP/IP ;

Les langages du Web : HTML, XHTML, CSS, Javascript, PHP, etc. ;

Les formats de données : XML : eXtensible Markup Language, PNG : Portable

Network Graphics, SVG : Scalable Vector Graphics, etc. ;

Les serveurs : Apache : Serveur HTTP, MySQL : Serveur de base de données,

etc.

Autres technologies : URI : Uniform Resource Identificator, URL : Uniform

Resource Locator, etc.

Le protocole de communication HTTP

Le Web est basé sur le protocole HTTP et, comme la majorité des applications
Internet, il est architecturé en Client / Serveur.

Notions

Le HTTP, HyperText Transfer Protocol, est le protocole de communication

grâce auquel il est possible de consulter des pages web. Il met en jeu, d’un côté, un
serveur qui héberge les ressources du site Web (pages + autres types de fichiers) et de
l’autre, le client, votre navigateur, qui sollicite ces ressources. En termes techniques,
nous disons que le Web fonctionne sur le HTTP.

Lorsque vous souhaitez visiter un site web, vous démarrez votre navigateur
préféré et tapez l’adresse dudit site dans la zone réservée à cette fin. À ce niveau, vous
vous êtes déjà probablement demandé ce qu’il se passe réellement pour que la page
recherchée vous parvienne.

D’abord, cette transaction d’information met en scène deux participants : votre

navigateur, que nous désignerons plus globalement par « client HTTP », et le « serveur
HTTP ».

Il existe une variante sécurisée du protocole HTTP, appelé HTTPS. HTTPS est
destiné à acheminer les requêtes et les réponses HTTP sur une base sécurisée de telle
manière qu'il est pratiquement impossible pour toute personne malveillante qui
intercepte les données de les exploiter. On l'utilise particulièrement lors du processus
d'identification sur un site, pendant la procédure de paiement en ligne et dans
beaucoup d'autres cas.

Client et serveur HTTP

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 Page |8

Un serveur HTTP est un logiciel servant les requêtes conformes au protocole

de communication HTTP. En de termes plus simples, c’est le logiciel servant les pages
web et autres ressources proches quand le navigateur du visiteur le demande.
L’ordinateur sur lequel est installé le serveur HTTP est appelé serveur web ; mais le
terme serveur Web peut indifféremment être utilisé pour désigner le serveur HTTP.
En de termes terre à terre, un serveur web est un puissant ordinateur sur lequel est
hébergé (enregistré et géré) votre site Web, grâce au logiciel serveur HTTP.

Les serveurs HTTP (logiciels) les plus populaires sont Apache HTTP Server
(plus de 60% de sites Web), Internet Information Services (IIS), Sun Java Web Server,
lighttpd, etc.

Un client HTTP est un logiciel permettant à un utilisateur d’accéder aux

ressources hébergées par un serveur web. Le type de client HTTP le plus connu est,
sans doute, le navigateur web.

Fonctionnement du HTTP

Le schéma de communication entre un client et un serveur HTTP est simple :

Le client demande au serveur la page : la demande du client est ce qu’on

appelle « requête HTTP » ; comme décrit ci-haut.

Le serveur renvoie la page demandée, si elle existe, si non un message d’erreur

à la place. Cette réponse du serveur est ce qu’on appelle « réponse HTTP ».

Les langages de contenu (X)HTML et CSS

(X)HTML (eXtensible Hypertext Markup Language) est un langage de

balisage (dit aussi langage de marquage) qui permet de structurer le contenu des pages
Web dans différents éléments. Le XHTML (ex HTML) a été spécialement conçu pour
la création des pages Web.

En 1991, un certain Tim Berners-Lee invente le World Wide Web (abrégez

WWW). Pour créer les premières pages Web, Tim Berners-Lee crée le langage HTML
qui s’inspire un peu du SGML. À peine 2 ans plus tard, un des premiers navigateurs
gratuits apparaît : il s’appelle Mozaïc qui fonctionne aussi bien sur Mac que sur PC.
L’histoire complète est consultable sur le Web ; beaucoup de ressources sont
disponibles.

Brièvement, les évolutions qu’a connues le HTML jusqu’à ce jour :

HTML 1.0 : c’est la toute première version créée par Tim Berners-Lee,
l’inventeur du Web, en 1991.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 Page |9

HTML 2.0 : la deuxième version du HTML apparaît en 1994 et se finira en 1996

avec l’appa- rition du HTML 3.0.

HTML 3.0 : apparue en 1996, cette nouvelle version du HTML rajoute de

nombreuses possibi- lités au langage comme les tableaux, les applets, les scripts, le
positionnement du texte autour des images, etc.

HTML 4.x : la version 4.0 est l’avant-dernière version du HTML avant le

XHTML, la toute dernière étant une version légèrement modifiée, le HTML 4.01). Elle
apparaît pour la première fois en 1998, et propose l’utilisation de frames (qui
découpent une page Web en plusieurs parties), des tableaux plus complexes, des
améliorations sur les formulaires, etc. Mais surtout, cette version permet pour la
première fois l’utilisation de feuilles de style (CSS).

XHTML 1.0 : On décide d’arrêter le développement du langage HTML et d’en

créer un nouveau, le XHTML (eXtensible HyperText Markup Language) qui devient
alors le standard : ce langage doit fonctionner de la même manière sur tous les
navigateurs. Concrètement, par rapport au HTML il y a assez peu de différences, mais
le langage est plus « Strict » et « conforme au XML ».

HTML 5 : C’est une révolution logique du HTML 4.1 reposant sur les
technologies contemporaines éprouvées du courant Web 2.0. La spécification du
HTML 5 a commencé en 2003 grâce à un groupe de travail indépendant, mais ce n’est
qu’en 2007 que le W3C l’a officialisé en intégrant en son sein le groupe de travail
[Goetter, 2011]. Cette nouvelle version offre une large panoplie de nouveautés
permettant réellement d’entrer de plein pied dans la nouvelle ère du Web. Bien qu’elle
soit encore instable, mal prise en charge par bon nombre de navigateurs,
l’enseignement du HTML proposé dans ce cours sera basé sur cette version !

L’histoire du CSS débute, elle, en 1996 suite à l’idée lancée par William
Tunnicliffe : « il faut séparer le contenu de la mise en page ». Cela apporte de nombreux
avantages : l’apparence du site Web pourra être plus facilement mise à jour, les pages
seront plus rapides à charger, on pourra proposer plusieurs designs aisément, etc.

Les versions majeures de CSS sont :

CSS 1.0 devenu opérationnel depuis le début des années 1996 ;

CSS 2.0 apparu 1998 ;

CSS 2.1 est la version révisée de CSS 2 qui est apparu en 2004 ;

CSS 3 actuellement en vogue, le développement a commencé depuis 1999.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 10

Une page Web conforme aux standards doit être créée en distinguant au
minimum deux parties :

Un contenu, structuré au moyen des éléments HTML (grandes divisions,

titres, paragraphes, tableaux, images, objets audio, objets vidéos, animations, liens,
etc.) ;

Une ou plusieurs feuilles de style CSS, définissant la mise en page de ces

éléments en fonction du média (écran, imprimante, PDA, ...) qui va opérer le rendu du
contenu (polices et tailles des caractères, bordures, marges, couleurs, positionnements
dans la page, etc.).

Les standards HTML et CSS sont aujourd’hui incontournables pour tous ceux
qui veulent concevoir un site Web de manière professionnelle et, tous les étudiants en
sciences informatiques et les professionnels du Web se doivent d’acquérir ou de mettre
à jour leurs connaissances sur ces tech- niques.

Les langages de programmation web PHP et Javascript

Dans son état classique, un serveur Web est incapable de générer

dynamiquement des pages entières ou une partie de leur contenu, car son rôle est tout
simplement de servir les pages qu’il héberge à ses clients, et non de les fabriquer pour
eux. Ce qui permet ce dynamisme, ce sont juste- ment les langages de scripts Web
ajoutés au serveur. En ce qui nous concerne, nous parlerons du langage PHP.

PHP est le sigle récursif de « PHP : HyperText Préprocesseur ». C’est un

langage de scripts servant à produire des pages Web via un serveur HTTP dans le
cadre d’un site Web dynamique. En tant que langage de programmation impératif, il
est semblable à tous les autres langages de programmation étudiés en Première année
de Graduat, comme nous le verrons dans les pages qui suivent. PHP peut fonctionner
seul et suffit à créer un site dynamique, mais les choses deviennent réellement
intéressantes lorsqu’on le combine à un système de gestion de bases de données tel
que MySQL ; parce qu’en ce moment-là, la gestion de données du site sera améliorée.
En plus de la possibilité de communication avec un système de gestion de bases de
données, PHP peut permet d’envoyer automatiquement des mails, consulter des
annuaires, et bien d’autres choses encore. La dernière version de PHP à ce jour est 8.1.

Malheureusement pour les clients du serveur web (les navigateurs), ils sont
incapables de comprendre autre chose que du XHTML, du CSS et du Javascript. Seul
le serveur peut communiquer avec l’interpréteur PHP. Avant de retourner la réponse
au client, il faut donc que le serveur demande à PHP d’interpréter le script et de
générer le XHTML correspondant, tout en actualisant les parties dynamiques du
contenu, ce qui sera finalement retourné au client.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 11

I.5. Les acteurs du web

Il existe de nombreux organismes, d’importances diverses, qui participent à la

création et à la normalisation des technologies du web. Parmi les plus notables se
trouvent l’IETF (protocole HTTP et autres protocoles d'Internet), le W3C (langages de
balisage, langages de présentation, accessibilité, respect de la vie privée, ...), l’ISO et le
Consortium Unicode (codages de caractères, ...), l’ECMA (JavaScript, ...), l’IANA
(noms de domaine, types MIME, ...).

Le W3C, World Wide Web Consortium, est un organisme dont la mission va

être de « surveiller » l’évolution du Web. Il a aussi la tâche de proposer au fur et à
mesure de nouvelles versions du HTML, justement afin que le Web évolue. Tim
Berners-Lee, celui qui a inventé le Web, est également celui qui a créé le W3C en 1994.
Il en est le directeur depuis la création.

À côté de ces organismes, il existe d'autres acteurs importants qui participent

au quotidien aux activités du Web :

• Les Fournisseurs d'Accès Internet : en permettant aux entreprises et aux

particuliers d'accéder à Internet, ils leur permettent même d'avoir accès au
Web.
• Les webmasters (webmestres en français) : un webmaster est toute
personne chargée de la gestion quotidienne d'un site web. C'est
l'administrateur d'un site web.
• Les utilisateurs : à l'ère du Web 2.0, les utilisateurs du Web jouent un rôle
fondamental en contribuant à la création des informations disponibles sur
le Web.

I.6. Les outils de développement web

Outils

Dans le processus de développement d’un site Web, vous avez besoin de

certains logiciels, soit pour saisir le code source de vos pages HTML, soit pour saisir
les scripts PHP ou Javascript, soit encore pour tester le résultat final. En bref, la réussite
d’un projet de développement informatique passe également par le choix des bons
outils.

En fait, sur le marché, il existe un nombre important de tous ces outils de

travail, allant des plus simples aux professionnels. Le choix de tel ou tel autre logiciel
est une question de goût plutôt que de qualité. Même armé des outils les plus
rudimentaires qui soient, vous pourriez réaliser un site Web digne de ce nom.
Toutefois, vous constaterez que plus vos outils sont sophistiqués, plus facile sera le
travail.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 12

Les outils les plus utilisés sont : l'éditeur de texte, le navigateur web, les
environnements intégrés de développement web et les environnements serveurs
d'hébergement web.

Éditeur de texte

Un éditeur de texte est logiciel destiné à la création des fichiers textes. Chaque
OS fournit, par défaut, un éditeur, tant son usage est pratiquement indispensable pour
certaines tâches d’administration du système. Un éditeur de texte se distingue d’un
traitement de texte comme MS Word, par le fait qu’il est orienté lignes de code plutôt
que paragraphes, et que les fichiers textes ne contiennent pas de mise en forme (police,
interligne, alignement, ...).

Sous Windows, on a, par défaut, Bloc-notes. Mais, dans la pratique, il est

avantageux d’utiliser un éditeur plus avancé comme Notepad++, PHP Edit, Maguma
Open Studio, Sublime Text ou encore le fameux VS Code, etc. Dans la suite du cours,
nous utiliserons VS Code pour saisir nos scripts Web.

Environnement intégré de développement web

Un environnement intégré de développement web est un logiciel regroupant

plusieurs outils de développement web en un seul paquet. Ces outils sont intégrés tels
qu'ils peuvent interagir les uns avec les autres. Par exemple, l'environnement inclut un
éditeur de texte et un visualisateur de pages web. Quand vous terminez la saisie du
code source de votre page web, vous pouvez simplement la lancer dans le
visualisateur, sans nécessiter un navigateur web externe.

Sous Windows, l'environnement intégré de développement web le plus

populaire est Dreamwevear.

Navigateur web

Il permet de tester nos codes sources, immédiatement sur notre ordinateur de

travail. Les plus populaires des navigateurs sont Mozilla Firefox, Internet Explorer
(par défaut installé sous Windows), Google Chrome, Apple Safari, Opera, Microsoft
Edge, etc. Nous vous conseillerons d’installer plusieurs navigateurs, Internet Explorer,
Firefox et Chrome par exemple, pour vous assurer que votre site fonctionnera
correctement et affichera les mêmes résultats partout.

Environnement serveur d'hébergement web

Normalement, il faut disposer d’une machine serveur pour faire fonctionner

un site web dynamique. Mais, qu’à cela ne tienne, vous pouvez transformer
temporairement votre ordinateur personnel en serveur web dans la phase de

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 13

réalisation de votre site. Pour cela, vous devez installer un environnement serveur
contenant un serveur HTTP configuré avec PHP. Pour un débutant, la tâche pourra
s’avérer difficile.

Sur le marché, on trouve beaucoup d’environnements serveur web

préfabriqués : ils contiennent un serveur Web, un préprocesseur XHTML et un serveur
de bases de données configurés par défaut. Nous pouvons citer EasyPHP et Wamp
Server, Laragon, etc.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 14

CHAP II : LE LANGAGE HTML

II.1. Introduction

Le langage HTML (HyperText Markup Language) est au Web ce que la portée

musicale est à l’orchestre. L’un ne pourrait exister sans l’autre. Les musiciens, quelle
que soit leur nationalité, ne pourraient interpréter l’œuvre du compositeur sans cette
notation commune, pour jouer de « concert », sans fausses notes et en rythme.
Tout le monde a déjà entendu parler de HTML. Tous les internautes ont déjà vu
cette extension dans la barre d’adresses de leur navigateur. Pourtant, très peu savent
ce qui se cache réellement derrière ces quatre lettres mystérieuses qui leur permettent
d’accéder à leurs sites et services favoris.

Au commencement, la Darpa (agence du département de la Défense des États-

Unis) crée Arpanet. Il s’agit, au début des années 1970, de relier des universités en
réseau pour permettre les échanges de données. Par la même occasion, le protocole
TCP/IP est inventé pour uniformiser le transit des informations entre les machines. Il
est encore utilisé de nos jours. Toute machine ou terminal ayant accès à Internet
possède une adresse IP.Dans les années 1980, le réseau est scindé en deux, d’un côté
Milnet (à vocation militaire, ex-DDN) et d’un autre côté NSFnet (à vocation
universitaire, ex-Internet). Les applications sont diverses, mais très austères : échange
de fichiers (FTP), e-mails, avec des serveurs reliés entre eux à une vitesse fulgurante
de 56 kbit/s.

Le système des DNS (Domain Name System) est inventé à son tour pour
permettre de nommer les machines plutôt que d’avoir à mémoriser leur adresse IP.
En 1984, le Cern (Organisation européenne pour la recherche nucléaire) adopte le
même type de réseau pour ses échanges internes, puis l’étend et le relie à un laboratoire
américain via Internet. C’est en son sein que l’équipe de Tim Berners-Lee,
chargée de réorganiser l’information, invente un nouveau protocole, simple et
abordable, destiné à la mise en ligne de pages possédant des liens hypertextes. Dès
lors, l’usage devient public et l’on baptise toutes ces pages reliées entre elles, telle une
grande toile mondiale : « World Wide Web ». Il s’agit d’ailleurs du nom du premier
navigateur dont la paternité revient à Tim Berners-Lee.

Les premières versions de HTML voient le jour dans les années 1990, dérivées
de la grande famille des langages SGML (Standard Generalized Markup Language). Il
ne s’agit cependant pas de normes (il n’y a aucune spécification HTML 1.0), car le
langage reste en pleine évolution, principalement motivée par les développements des
navigateurs. Les pages utilisent le protocole HTTP (HyperText Transfer Protocol) pour
transiter sur le réseau et établir le dialogue entre le navigateur et le serveur. L’IETF
(Internet Engineering Task Force) héberge les premiers groupes de travail HTML.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 15

En 1993, le navigateur Mosaic de NCSA (National Center for Super computer

Applications) développé pour Sun remporte un franc succès sous Unix. Il inaugure
l’élément img pour l’incorporation d’images et les formulaires pour la saisie de
données. L’année suivante, une partie de son équipe prend son envol et fonde
Netscape. Le navigateur phare Netscape Navigator ajoute de nombreux éléments de
présentation (polices des textes, alignement, clignotement) allant totalement à
l’encontre du but premier de HTML.

À partir de là, les perspectives d’évolution divergent durant de nombreuses

années, chaque navigateur introduisant des balises propriétaires pour satisfaire les
besoins de présentation des documents. L’usage de certains éléments (ou tags) est
détourné de son but initial, notamment l’élément table pour la structuration en
colonnes et la découpe de la page en zones distinctes. On commence à redouter ce que
l’on nomme la soupe de tags. Tim quitte le Cern en 1994 pour rejoindre le MIT
(Massachusetts Institute of Technology) et fonde le W3C (World Wide Web
Consortium) pour promouvoir la standardisation des langages du Web.

En 1995, le W3C publie HTML 2.0 (sans les ajouts spécifiques à Netscape
Navigator 2) et débute le brouillon HTML 3.0 qui ne débouchera pas directement sur
des implémentations concrètes. JavaScript, langage de programmation créé pour
ajouter de l’interactivité aux pages web, est inventé pour le compte de Netscape par
Brendan Eich. Microsoft s’aperçoit à son tour de l’existence d’Internet, crée la première
version d’Internet Explorer pour Windows (basée sur Mosaic), suivie de près par sa
version 2.0 supportant entre autres une variante de JavaScript nommée JScript, les
frames et les cookies. En 1996, un nouveau standard nommé CSS (Cascading Style
Sheets – feuilles de style en cascade) est officialisé pour régir tout ce qui concerne la
présentation des documents et séparer la forme du contenu. Il mettra un peu moins de
dix années à s’imposer. Internet Explorer passe en version 3.0 en intégrant déjà
quelques fonctionnalités des CSS.

En 1997, le W3C publie HTML 3.2, officialisant certaines des inventions

propriétaires des navigateurs. Internet Explorer 4.0 installé par défaut avec Windows
98 supplante Netscape. Il fait appel malheureusement à des nouveautés dont Microsoft
est propriétaire (JScript, VBScript, ActiveX). Le travail continue immédiatement sur
HTML 4.0 avec la standardisation de nombreuses fonctionnalités avancées (support
des styles, des scripts, des frames et des objets) et des améliorations relatives à
l’accessibilité. Après la publication de HTML 4.0 en décembre 1997, le premier groupe
de travail (HTML Working Group) cesse son activité. Le second, qui sera en réalité le
groupe de travail XHTML (Extensible HyperText Markup Language), est chargé de
redéfinir HTML comme une application de XML, avec un rôle limité de maintenance
pour HTML 4.0 puis 4.01. Ce groupe est à l’origine de XHTML 1.0, mais ne produit
aucune avancée concrète pour le langage HTML.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 16

La spécification XHTML 1.0 reprend les balises HTML 4.01 à l’identique, il

s’agit juste d’adopter une syntaxe plus stricte suivant les règles du XML que l’on
promettait à un bel avenir. Cette syntaxe définissant un cadre avec des règles plus
structurées et combinées à CSS, conquiert de nombreux auteurs web qui y voient un
ensemble de bonnes pratiques à favoriser. En 1998, CSS 2 est publié en
recommandation, mais sa complexité d’implémentation amènera plus tard le W3C à
produire une révision (2.1) avec une approche plus réaliste.

En parallèle, le développement de CSS 3 commence, découpé en modules

pour pouvoir bénéficier de degrés d’avancement divers.
On entre alors dans une période de stagnation apparente du côté du W3C, dont le
fonctionnement trop fermé est critiqué par une partie des développeurs web. Pourtant,
quelques avancées voient le jour du côté des navigateurs, par exemple
XMLHttpRequest en 1999 avec Internet Explorer 5 pour les prémices de l’Ajax.
Les animations Flash (promues successivement par FutureWave, Macromedia, et
Adobe) remportent un succès indéniable, car il est désormais possible, via l’installation
d’une petite extension au navigateur, d’embarquer dans les pages web moult
animations, dessins vectoriels, sons, vidéos, éléments d’interaction, le tout complété
avec un langage de programmation nommé ActionScript.

En 2000, AOL rachète Netscape, signant par là son déclin progressif. Le

navigateur en version 4 est renommé « Communicator » mais affiche de faibles
performances et souffre des pratiques commerciales de Microsoft. Le code source de
ce qui était espéré devenir la version 5.0 de Netscape passe sous licence libre en 1998
avec la création de l’organisation Mozilla, qui s’aperçoit que ce dernier est
irrécupérable et débute l’écriture du moteur Gecko.
Microsoft lance Internet Explorer 6.0 en 2001 et n’y touche plus durant 6 ans,
considérant la suprématie établie (jusqu’à 95 % de parts de marché). Pourtant, la
tendance s’infléchit grâce à la concurrence insistante des navigateurs alternatifs qui
proposent un bien meilleur support des standards du Web, et quelques inventions
bien pratiques en termes de confort de navigation et d’interface utilisateur.
Dans l’élan, le W3C publie XHTML 1.1 qui se révèle complexe à mettre en place,
compte tenu des contraintes imposées par la spécification et des moteurs des
navigateurs utilisés par les internautes. En effet, un document créé en XHTML et servi
avec le type MIME adéquat, ne pouvait même pas être compris par le navigateur le
plus répandu à ce moment-là, Internet Explorer.
En 2002, la fondation Mozilla lance sur les (quelques) restes de Netscape Navigator/
Communicator et de la branche principale de Mozilla un nouveau projet de navigateur
Open Source nommé successivement Phoenix, Firebird puis Firefox, dont les
innovations séduisent un public averti, puis de plus en plus large. Son extensibilité et
son respect des standards font sa force.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 17

Opera Software défend le navigateur du même nom, initialement payant puis

devenu gratuit en 2005. Celui-ci fédère une communauté d’utilisateurs convaincus par
sa réactivité et ses innovations. On le retrouve également sur consoles et plates-formes
mobiles. Les soucis commencent lorsque le W3C décide d’évoluer à terme vers
XHTML 2.0 dont le premier brouillon est dévoilé le 5 août 2002. Cette nouvelle version,
qui se veut un nouveau départ, allégée de son lourd héritage, est incompatible avec les
précédentes. Certaines balises très courantes ne sont plus valides, telles que img pour
les images. Comment faire alors ? Fournir une version du site en HTML pour les
navigateurs actuels et maintenir en parallèle une version XHTML 2.0 pour
d’éventuelles implémentations dans de futurs navigateurs ? C’est une catastrophe tant
auprès des éditeurs de navigateurs qui veulent se concentrer
sur les applications concrètes répondant aux besoins des développeurs, que du public
qui ne comprend pas ce revirement de situation, et tarde à s’intéresser au sujet.
Suite à cette période trouble et à la décision du W3C d’abandonner HTML en faveur
de langages basés sur XML, la mailing-list WhatWG est créée le 4 juin 2004.
À l’initiative du groupe, Ian Hickson d’Opera travaille sur Web Forms 2.0 pour étendre
les possibilités des formulaires HTML – spécification qui sera intégrée à HTML 5 par
la suite. Le W3C tente de persévérer sur la voie du XML.
Le WhatWG (Web Hypertext Application Technology Working Group) est constitué
par des passionnés souhaitant améliorer HTML, issus d’équipes de la fondation
Mozilla, d’Apple et d’Opera. Leur but est de faire évoluer le langage pour répondre
aux besoins concrets de l’explosion du Web, tout en maintenant sa simplicité et sa
rétrocompatibilité.

Le WhatWG débute son travail en juin 2004 sous la dénomination de Web

Applications 1.0. Ian Hickson, éditeur officiel du document HTML 5, rejoint
finalement Google (membre du W3C). La spécification HTML 5, soutenue en avril 2007
devant le World Wide Web Consortium par la fondation Mozilla, Apple et Opera, est
acceptée comme point de départ du nouveau groupe de travail HTML. Ce dernier
publie le premier brouillon (Working Draft) le 22 janvier 2008 et admet que XHTML
2.0 est trop ambitieux.

Le processus est alors assez inhabituel puisque les deux entités, W3C et
WhatWG collaborent sur le projet HTML 5 avec des approches différentes, parfois
quelques accrochages sur la méthode, mais avec un pragmatisme certain grâce à la
constitution très forte des équipes par des membres d’éditeurs de navigateurs.
Entre-temps, Apple a lancé Safari pour Mac (2003) puis Windows (2009) pour
fournir un navigateur de qualité à sa base d’utilisateurs grandissante, en déclinant le
moteur KHTML en WebCore/WebKit. Google, devenu le plus célèbre moteur de
recherche et acteur majeur du Web, développe son propre navigateur Google Chrome
à partir de septembre 2008 sur la base d’un projet libre nommé Chromium, à un rythme
extrêmement soutenu. Google souhaite privilégier la simplicité de navigation et les
performances à l’exécution. Ces navigateurs alternatifs s’approprient petit à petit la

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 18

plus grande part du marché. Mozilla Firefox dans sa version 3.0 devance peu à peu
Internet Explorer dans certaines régions du monde et s’affirme comme une alternative
de prédilection avec de nombreux projets gravitant autour du moteur Gecko.
Les navigateurs mobiles, versions dérivées de leurs grands frères, confèrent aux
smartphones et tablettes tactiles la possibilité d’accéder au Web depuis que les
capacités des réseaux sans fil permettent un débit d’accès acceptable et que la mobilité
entre dans les mœurs. Ils font alors appel à des comportements de navigation
différents découlant des temps de chargement et de la navigabilité au doigt.
Microsoft sort finalement de sa léthargie et reprend un rythme de développement
honorable avec Internet Explorer 7 en 2006 pour l’occasion de la sortie de Windows
Vista.

Internet Explorer 8 pointe le bout de son nez en mars 2009. En juillet, le W3C
annonce le non-renouvellement du groupe de travail XHTML 2.0 pour réunir les forces
autour du groupe de travail HTML et clarifier sa position. Tandis que CSS 3 voit ses
modules complétés progressivement, la spécification HTML 5 est désormais adoptée
formellement comme langage de prédilection pour le Web par le W3C et le WhatWG.
Dès lors, tous les navigateurs s’y mettent et dopent chacune des versions publiées.
Début 2011, Microsoft publie Internet Explorer 9, précédé de peu par Opera 11.
Mozilla décide d’adopter un nouveau modèle de développement basé sur plusieurs
canaux (Aurora, version Bêta, version Finale) pour diffuser les nouveautés plus
rapidement. La numérotation des versions s’emballe à la façon de Chrome.
À la rentrée 2011, Microsoft surprend tout le monde en confirmant son intérêt pour les
standards du web, et sa volonté de les exploiter à un haut niveau via le moteur
d’Internet Explorer 10. Windows 8 est dévoilé avec une nouvelle interface baptisée
Metro, qui interprète directement HTML 5, CSS 3 et JavaScript pour créer des
applications.

II.2. Structure d’un document HTML 5

Pourquoi HTML 5 ?

HTML 5, encore à l’état de brouillon – est-il utile de le préciser ? –, est une

évolution logique du langage HTML, reposant sur les technologies contemporaines
éprouvées (HTML, XHTML, JavaScript, géolocalisation) ou plus nébuleuses telles que
le « Web 2.0 » ou encore la gestion des supports audio et vidéo. Le tout se construit sur
les vestiges de l’antique mise en page via tableaux et au travers d’une période trouble,
durant laquelle le Consortium W3C tentait de faire avancer d’imposants travaux sur
des langages aussi déterminants que HTML et XHTML.
Le chantier HTML 5 a commencé fin 2003 grâce à un groupe de travail indépendant,
mais ce n’est qu’en 2007 que le W3C officialise véritablement ce langage en intégrant
en son sein ce groupe de travail. À partir de là s’est fait un gros effort afin de permettre
à HTML 5 d’être rétro compatible avec ses ancêtres, ce qui a quelque peu ralenti son

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 19

développement. HTML 5 offre nativement une large panoplie de nouveautés et de

technologies :

• Une grammaire entièrement revue et simplifiée ;

• De nouveaux éléments sémantiques et de nouveaux attributs ;
• La reconnaissance de vidéos ou de sons sans plug-ins ;
• Une gestion étendue des formulaires ;
• La possibilité de se localiser géographiquement et de profiter de cette
information ;
• La création de dessins ou de graphiques à l’aide de l’élément <canvas> ;
• Le stockage de données sur son ordinateur pour les exploiter hors ligne ;
• La possibilité d’intervenir sur les éléments en les modifiant à la volée ou en
les déplaçant (drag and drop), etc.

Ci-dessous est la structure d’une page web sous HTML 5 :

Avant d’aller un peu plus loin, voyons ce qu’est une balise

Une balise HTML est un élément que l'on va ajouter au texte de départ pour
dire au navigateur de quelle manière l'afficher. Elle n'est pas affichée telle quelle
dans le navigateur, elle est interprétée par celui-ci. Elle est toujours délimitée par
les signes < et > (ou chevron).

La structure de base d’une balise en HTML :

Balise ouvrante et balise fermante

<> </>

Une balise peut en plus comporter de zéro à plusieurs attributs. Les attributs
sont des informations complémentaires qui la caractérisent. Ils se présentent sous
la forme nom attribut="valeur". Attention à ne pas confondre un attribut HTML et
une propriété CSS !

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 20

Un document HTML doit toujours débuter par un doctype, avant même la

première balise <html>. Il s’agit d’une déclaration permettant de renseigner le
navigateur sur le type de document HTML délivré. Il ne s’agit pas d’un tag HTML à
part entière, mais bien d’un préambule.

L’élément <html> constitue la racine de tout document HTML. Il suit en

général le doctype et clôt l’ensemble en fin de page par une balise fermante </html>.
Il ne peut contenir qu’un seul élément <head> suivi immédiatement par un <body>.
Parmi les attributs globaux (voir fin de ce chapitre) qui sont applicables à l’ensemble
des éléments HTML, il faut noter que lang est très fortement recommandé pour
l’élément racine <html>. Un attribut lang vide correspond à un langage inconnu.
Dans un écosystème XHTML, il est préconisé de l’épauler par un attribut xml:lang
possédant la même valeur. En cas d’absence totale de lang, le navigateur se réfère à
l’en-tête HTTP Content-Language. Si ce dernier est également absent, alors le
document est de langue inconnue.

L’en-tête du document exerce un rôle crucial, car il fournit de multiples

renseignements sur le document lui-même, que le contenu n’indique pas.
Dans cette optique, il recueille plusieurs autres balises aux rôles précis. Parmi celles-
ci, seule <title> est obligatoire. Le titre du document détenu par <title> est affiché par
le navigateur dans le titre de la fenêtre et/ou dans l’onglet actif. Il est aussi choisi, à
juste titre, comme intitulé du lien dans les résultats des moteurs de recherche.

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Ma Première page HTML</title>
</head>
<body>

</body>
</html>

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 21

L’élément <html> constitue la racine de tout document HTML. Il suit en

général le doctype et clôt l’ensemble en fin de page par une balise fermante </html>.
Il ne peut contenir qu’un seul élément <head> suivi immédiatement par un <body>. Le
titre du document détenu par <title> est affiché par le navigateur dans le titre de
la fenêtre et/ou dans l’onglet actif. Il est aussi choisi, à juste titre, comme intitulé du
lien dans les résultats des moteurs de recherche.

NB : Il ne faut pas confondre cet élément dont le contenu ne figure pas dans la
zone de rendu, et la balise <h1> qui relève d’un titre de premier niveau et qui n’est pas
obligatoirement liée au véritable titre du document.

En complément du titre, les balises <meta> comblent le besoin de véhiculer

plus de méta-informations au sujet du document. Il s’agit là aussi de renseignements
qui ne sont pas affichés dans le corps de la page, mais qui sont importants pour son
interprétation ou son référencement par les moteurs de recherche. Après tous les
éléments susceptibles d’être contenus dans l’en-tête du document, ce
dernier prend fin avec une balise fermante </head>, et l’on passe au corps proprement
dit de la page HTML.

Exemple d’utilisation de body dans un document HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Ceci est au fait mon tout premier exemple avec le HTML</p>
</body>
</html>

Éléments de type bloc, éléments de type en ligne

Il existe en HTML deux types d'éléments : les éléments en ligne et les éléments
de type bloc. Chaque balise ouverte doit être fermée, cependant il existe des
exceptions.

• Les éléments en ligne (balises simples) sont destinés à être placés au fil du
texte. Il s'agit par exemple des éléments d'emphase (em), des images (img),
des liens (a)... Normalement, ces éléments n'ont pas vocation à être placés
sur une page, mais à être affichés dans le contexte de l'élément parent qui les encadre.
Un élément en ligne ne peut contenir que des éléments en ligne
ou du texte.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 22

• Les éléments de type bloc (balises doubles) sont ceux qui, par défaut, ont un
rendu visuel « en bloc » sur un navigateur graphique : c'est le cas par
exemple des titres (h1...6), des paragraphes (p), des tableaux (table)... Ils
peuvent être positionnés sur une page. À l'écran, ces éléments sont précédés
et suivis d'un retour à la ligne. Les éléments de type bloc peuvent contenir
des éléments en ligne. Tous les éléments de type bloc, sauf les paragraphes
et les titres, peuvent de plus contenir d'autres éléments de type bloc.

Les balises simples

Ce sont des balises qui sont dites "vides", c'est-à-dire qu'elles ne vont contenir
aucune autre balise HTML. Ces balises n'ont pas besoin d'être fermées.

<img src="adresse_de_votre_image">

Les balises doubles

Les balises doubles sont dites ouvrantes/fermantes, c'est-à-dire qu'elles

nécessitent deux balises, une ouvrante et une fermante dans lesquelles on va
pouvoir mettre d'autres balises ou du texte. La balise fermante est identique à la
balise ouvrante, à la différence qu'elle contient un "/" pour indiquer à quel endroit
on la ferme.

<p>Ici du texte ou toute autre balise. </p>

Imbrication des balises

Lorsque l'on cumule l'écriture de plusieurs balises ouvrantes (forcément

inévitable), il est impératif de respecter la hiérarchie des balises, c'est-à-dire que
la première ouverte sera la dernière à être fermée. Le chevauchement des balises
est une grave erreur.

<b><u>Ici les balises sont correctement imbriquées.</u></b>

Mauvaise imbrication

<b><u>Ici les balises ne sont</b> pas correctement imbriquées, c'est une erreur.
</u>

Les éléments peuvent donc se succéder – par exemple plusieurs paragraphes

–, mais aussi s’imbriquer pour conférer une hiérarchie au document – par exemple
plusieurs paragraphes dans une section. On obtient alors un arbre « généalogique » de
balises, chacune pouvant être parent ou enfant d’une autre. Ces possibilités
d’imbrications doivent répondre à des critères stricts qui définissent quels éléments

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 23

peuvent en contenir d’autres, et quelles sont les conséquences en termes d’affichage

ou de sémantique.

Les attributs

Les attributs modifient les propriétés des balises HTML. Un élément peut
comporter zéro ou plusieurs attributs, choisis parmi un ensemble spécifique à cet
élément ou un ensemble commun à tous les éléments HTML.
Dans certains cas de figure, ils sont essentiels, tels que l’attribut src pour img, précisant
le nom du fichier image à afficher dans la page.

<img src=photographie.jpg>

Dans d’autres cas, ils peuvent être facultatifs, tels que class ou id, qui
permettent de nommer les éléments pour interagir avec ceux-ci, ou pour leur affecter
des propriétés de style.

<p id=introduction>

Ils font partie intégrante de la balise ouvrante, avec une syntaxe très simple :

• S’il s’agit d’un attribut booléen, la présence seule de l’attribut suffit à lui
donner du sens, quelle que soit sa valeur. Notons dans cette catégorie checked, qui
définit l’état par défaut d’une case à cocher. Sa présence coche la case (par exemple
avec checked, checked=true, checked=1, checked=checked,
checked=icanhascheezburger). Son absence la laisse « vide ».

Les commentaires

À l’instar des autres langages, HTML comprend la possibilité d’annoter le

document par des commentaires. Ceux-ci ne seront pas affichés par le navigateur. Ils
pourront vous servir d’aide-mémoire, ou d’indications pour suivre l’imbrication de
balises lorsque le document devient plus conséquent. Un commentaire débute par
<!—et finit par -->.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--Ceci est un premier commentaire sur une seule ligne-->

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 24

</body>
</html>

Outre ce qui précède, les commentaires permettent de laisser des informations

ou des descriptions du code et sont utilisables à n'importe quel endroit de votre
document. Cependant, ce ne sont pas ces commentaires-là qu'il faudra utiliser pour les
langages JavaScript et CSS qui possèdent leur propre système de commentaires. Ces
commentaires ne seront pas affichés dans le navigateur mais ils resteront présents dans
le code source, donc il faut à tout prix éviter de mettre des informations confidentielles
dedans.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--Ceci est un premier commentaire sur une seule ligne-->
<!--
Vous allez comprendre ici que HTML

vous donne
une
possibilité
de

mettre un commentaire sur plusieurs lignes

-->
</body>
</html>

<h1> à </h6>

Les éléments de type <hX> où X représente un chiffre entre 1 et 6

correspondent à des titres (heading en anglais) de niveaux différents. <h1> est un titre
de premier niveau, <h2> un titre de deuxième niveau, et ainsi de suite jusqu’au petit
dernier <h6>. Ils possèdent une forte valeur sémantique et doivent être utilisés là où
un titre de document ou de section est nécessaire, car il ne suffit pas d’affecter des
propriétés de style telles qu’une police énorme à un paragraphe <p> pour lui conférer
la vocation d’un titre.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 25

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Ceci est un titre de niveau 1</h1>
<h2>Ceci est un titre de niveau 2</h2>
<h3>Ceci est un titre de niveau 3</h3>
<h4>Ceci est un titre de niveau 4</h4>
<h5>Ceci est un titre de niveau 5</h5>
<h6>Ceci est un titre de niveau 6</h6>
</body>
</html>

Bien qu’il ne soit pas invalide de sauter des niveaux (par exemple passer de
<h2> à <h5>), cette pratique est fortement déconseillée par la spécification HTML, car
la conversion vers d’autres types de contenu ou la constitution d’une liste cohérente
de la hiérarchie du document peuvent devenir problématiques.

Les paragraphes de texte

Les éléments Heading, Paragraph et Break

Le HTML, je vous l’ai dit, sert à différencier d’un point de vue sémantique les
différents objets que l’on peut rencontrer et dont on peut avoir besoin (titre,
paragraphe, espace, image, etc.).

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 26

Pour faire cela, le HTML va utiliser des éléments. Et le moment est arrivé pour
nous d’apprendre à créer des paragraphes, des titres, et à faire des retours à la lignes
en HTML. Pour créer des paragraphes, tout d’abord, on va utiliser l’élément p. On
peut créer autant de paragraphes que l’on souhaite dans une page. Pour chaque
nouveau paragraphe, il faut rouvrir une balise <p>. A chaque nouveau paragraphe, un
retour à la ligne est automatiquement effectué.
Si maintenant vous désirez créer un retour à la ligne à l’intérieur même d’un
paragraphe, il faudra utiliser l’élément br (diminutif de break). Cet élément est
constitué d’une seule balise orpheline, qu’on notera donc <br/>.

Les éléments Strong, Emphasis et Mark

Continuons à apprendre à « parler » en HTML et donc dans la découverte de

nos éléments avec trois nouveaux éléments : les éléments strong, em (diminutif de
emphasis) et mark. L’élément strong, tout d’abord, est utilisé pour indiquer aux
moteurs de recherche qu’un contenu est particulièrement important, afin que celui-ci
soit traité avec plus d’importance. Le résultat visuel est une mise en forme automatique
en gras. Mais encore une fois, on n’utilise pas l’élément strong pour mettre un texte en
gras ! L’élément em, pour emphasis (« emphase » en français) est proche de l’élément
strong. Il sert lui aussi à signifier qu’un contenu est important, mais moins important
tout de même qu’un contenu entre des balises strong.

Encore une fois, si vous vous demandez l’intérêt de ces éléments, il est avant
tout dans l’optimisation du référencement de votre site. En effet, normalement, vous
devriez avoir ciblé des mots clefs et essayer d’être bien référencé sur ces mots là. Les
balises strong et em vous aident à atteindre ce but, entre autres.

Enfin, l’élément mark est utilisé pour faire ressortir du contenu. Ce contenu ne
sera pas forcément considéré comme important, mais cette balise peut servir dans le
cas de l’affichage de résultats suite à une recherche d’un de vos visiteurs par exemple.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 27

Voilà donc pour les éléments dits de base, il est maintenant tant de s’attaquer
à des éléments relativement plus complexes, et nous allons commencer avec les listes.

Les listes ordonnées et les listes non ordonnées

Les listes HTML sont prévues pour dresser des énumérations possédant une
valeur sémantique. Les structures disponibles pour une liste ordonnée (liste
numérotée) et non ordonnée (liste à puces) sont constituées par les éléments <ol> et
<ul> au sein desquels chaque élément individuel est un <li>. Elles sont couramment
employées pour la conception de menus de navigation, qui ne sont en réalité que des
énumérations de liens. Lorsqu’il s’agit de rédiger une liste de définitions, l’élément
<dl> peut être utilisé en conjonction avec <dt> et <dd>.

En HTML, les listes vont avoir deux grands intérêts pour nous : on va pouvoir
les utiliser pour créer des menus ou, dans leur forme brute, pour mieux présenter du
contenu pour un blog par exemple. Il existe trois grands types de listes en HTML : les
listes ordonnées, les listes non-ordonnées et un dernier type un peu particulier : les
listes de définition. Nous allons commencer avec les listes ordonnées et non-
ordonnées.La différence entre les listes ordonnées et non-ordonnées est que les listes
ordonnées possèdent un aspect de subordination, d’ordre logique, de classement
tandis que ce n’est pas le cas pour les listes non-ordonnées.

1. Les listes ordonnées (numérotées) <ol>

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 28

Une liste ordonnée (ordered list en anglais) est équipée de puces numérotées
automatiquement par le navigateur. Le conteneur <ol> est toujours parent de zéro ou
plusieurs éléments de liste <li>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Aujourd'hui nous allons parler des listes ordonnées</h1>
<ol>
<li>Orange</li>
<li>Mandarine</li>
<li>Citron</li>

</ol>
</body>
</html>

Tableau 4–32 Attributs spécifiques à <ol>

Attribut Valeurs Rôle
Valeur de départ pour la numérotation. Peut être
start nombre entier
négatif.
reversed ou "" ou sans
reversed Indique que la numérotation est descendante.
valeur
Type de numérotation (numérique classique,
type 1 ou a ou A ou i ou I lettrée, chiffres
romains).

<ol start="2" type="A">

<li>Orange</li>
<li>Mandarine</li>
<li>Citron</li>

</ol>

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 29

<ol start="3" type="I">

<li>Orange</li>
<li>Mandarine</li>
<li>Citron</li>
</ol>

2. Les listes non ordonnées

La liste non ordonnée (unordered list en anglais) <ul> partage le podium avec
<ol> bien qu’elle soit plus fréquemment utilisée. Comme son nom l’indique, son
contenu n’est pas spécialement trié et son ordre peut être changé sans altérer
significativement son sens.

<ul>
<li>Orange</li>
<li>Mandarine</li>
<li>Citron</li>
</ul>

3. Les listes non ordonnées

Si vous avez bien suivi les précédentes explications, vous savez déjà que <li>
est un élément (list item en anglais) de liste ordonnée <ol> ou non ordonnée <ul>. Il
remplit cette même fonction pour l’élément <menu> (voir du côté des éléments
interactifs).

4. <!DOCTYPE html>
5. <html lang="en">
6. <head>
7. <meta charset="UTF-8">
8. <meta http-equiv="X-UA-Compatible" content="IE=edge">
9. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
10. <title>Document</title>
11. </head>
12. <body>
13. <h1>Aujourd'hui nous allons parler des listes ordonnées</h1>
14. <ol>

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 30

15. <li>Orange</li>
16. <li>Mandarine</li>
17. <li>Citron</li>
18.
19. </ol>
20. </body>
21. </html>

Ça commence à devenir vraiment intéressant ! En effet, le HTML nous offre la

possibilité d’imbriquer les listes les unes dans les autres très simplement. Pour
imbriquer des listes, il suffit de commencer une liste, puis d’en ouvrir une seconde à
l’intérieur d’un élément de la première (on peut évidemment imbriquer plus de deux
listes en répétant le même processus). Voici une illustration, en imbriquant par
exemple une liste non ordonnée à l’intérieur d’une liste ordonnée :

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 31

Comme vous le voyez, si on n’oublie pas d’élément, les listes restent très
simples à utiliser et à manipuler. J’espère que vous comprenez mieux désormais
l’importance de bien indenter son code ! C’est tout pour les listes, n’hésitez pas à vous
entraîner afin d’être certain de bien maitriser tout ce que l’on a vu jusqu’ici car le
prochain chapitre est capital : nous allons apprendre à créer des liens.

Liens internes et Liens externes

Tout d’abord, il faut savoir qu’il existe différents types de liens. Pour l’instant,
nous allons nous concentrer sur les eux types les plus « classiques » : les liens internes
et les liens externes. Quelle différence entre ces deux types de liens ? Un lien interne
est un lien créé entre deux pages d’un même site web tandis qu’un lien externe est un
lien menant d’un site web vers un autre site web. Dans tous les cas, pour créer un lien,
nous allons utiliser l’élément « a » accompagné de son attribut href (pour Hypertext
Reference) qui sert à indiquer la cible (c’est à dire la destination) du lien.

Quel que soit le type de liens créés, la seule chose qui va changer va être ce que
l’on va indiquer en valeur pour l’attribut href. Commençons donc avec les liens
internes. Nous avons trois cas à distinguer :

• 1er cas : La page à partir de laquelle on fait un lien et celle vers laquelle on fait
un lien se trouvent dans le même dossier. Dans ce premier cas, il suffit de
préciser le nom de la page dans l’attribut href.
• 2ème cas : La page vers laquelle on souhaite faire un lien se trouve dans un
sous-dossier. Dans ce cas, il faudra en tenir compte et inclure le nom du sous-
dossier dans la valeur de l’attribut href.
• 3ème cas : La page vers laquelle on veut faire un lien se trouve dans un dossier
parent. Dans ce cas, nous devrons rajouter
« ../ » dans la valeur de l’attribut href.

Voilà donc en images comment cela fonctionne :

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 32

J’ai donc créé quatre pages en HTML (j’ai simplement écrit la structure
minimale pour chacune d’entre elles afin de les rendre valide). J’ai placé les pages
page1.html et page2.html dans le même dossier, la page page3.html dans un sous-
dossier relativement à ma page page1.html et la page page4.html dans un dossier
parent par rapport à ma page page1.html.

Je vais donc maintenant créer des liens de ma page page1.html vers mes pages
page2.html, page3.html et page4.html grâce à l’élément a et à l’attribut href :

Et voilà, c’est fini ! Si vous ouvrez votre page page1.html, celle-ci doit
maintenant ressembler à cela :

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 33

Lorsque vous ou vos visiteurs cliquerez sur « page 2 », « page 3 » ou « page 4 », vous
serez redirigés vers la page en question. Pour créer des liens externes, maintenant,
vous allez voir que c’est beaucoup plus simple : il suffit d’indiquer l’URL complète de
la page vers laquelle on veut faire un lien en valeur de l’attribut href. En pratique,
pour faire un lien vers la page d’accueil de Wikipédia par exemple, on écrira :

Et voilà, c’est tout pour les liens externes. Simple, non ? À noter qu’il existe
pour les liens internes et externes des attributs facultatifs qui peuvent modifier le
comportement par défaut de ces liens. C’est par exemple le cas de l’attribut target qui

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 34

est selon moi indispensable à connaître. L’attribut target va vous permettre de choisir
si vous voulez que la cible de votre lien s’ouvre dans une nouvelle fenêtre / nouvel
onglet ou pas. Pour que la cible de votre lien s’ouvre dans une nouvelle fenêtre ou un
nouvel onglet, on attribuera la valeur _blank à l’attribut target. Un exemple
immédiatement en image :

Attribut à retenir donc, car celui-ci peut s’avérer très utile dans de nombreux
cas (lorsque vous ne voulez pas que vos visiteurs quittent votre site par exemple).
Notez en revanche que vous ne pouvez pas choisir si le lien va s’ouvrir dans un nouvel
onglet ou dans une nouvelle fenêtre.

Les autres types courants de liens

Les liens internes et externes sont très certainement les types de liens les plus
courants, mais c’est loin d’être les seuls ! En effet, on peut utiliser les liens pour faire
bien d’autres choses. Dans ce nouveau chapitre, nous allons nous concentrer sur les
liens de type « ancre », les liens pour envoyer un mail et les liens pour télécharger un
fichier. Commençons avec les liens de type ancre. Les liens de type ancre sont des liens
menant à un autre endroit d’une même page web. Ils peuvent être utile dans le cas
d’une page web très longue pour donner à vos visiteurs un accès rapide à une section
en particulier par exemple.

Vous comprendrez qu’il va donc tout d’abord nous falloir rajouter quelques
lignes de textes dans notre page HTML pour pouvoir tester les ancres (sinon, on n’en
verra pas l’effet). Attention, soyez attentif, ça se complique un peu à partir de là ! Pour
créer une ancre, on commence par rajouter un attribut id à une balise ouvrante HTML
à l’endroit où l’on veut envoyer le visiteur. On peut attribuer n’importe quelle valeur
à cet attribut, le mieux étant de choisir une valeur qui fasse sens.

Ensuite, on crée le lien cliquable en soi qui va amener à notre id. Pour cela, on
utilise toujours notre élément a avec son attribut href (on ne réinvente pas la roue à
chaque fois), mais cette fois ci on va devoir placer un dièse avant d’écrire la valeur de

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 35

l’attribut href. La valeur inscrite pour l’attribut href doit être strictement la même que
celle donnée à notre id. Comme rien ne vaut un bon dessin, voici l’illustration en image
:

Faites attention à bien choisir des valeurs différentes pour chaque id sinon
votre lien ne saura pas où ramener ! Pour envoyer un mail, maintenant, on donne tout
simplement une valeur de type « mailto : » à notre attribut href comme ceci :

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 36

Enfin, voyons les liens permettant à vos visiteurs de télécharger un fichier.

Pour cela, il va tout d’abord falloir nous armer d’un fichier (au format zip, pdf, xls ou
autre) que l’on va placer dans le même dossier que la page web à partir de laquelle on
crée le lien.

Ensuite, il ne reste plus qu’à créer un lien comme on en a l’habitude en utilisant

un chemin relatif. Comme notre fichier et notre page web sont dans le même dossier,
nous n’avons donc que le nom du fichier à renseigner en valeur de l’attribut href. Par
exemple, si mon fichier est un pdf qui s’appelle « fichier », on aura :

Notez que si vous cliquez sur le lien, rien ne devrait se passer (tout au moins,
sur Mac, rien ne se passe) tout simplement car vous possédez déjà le fichier.
Cependant, vos visiteurs pourront tout à fait télécharger votre fichier une fois votre
page hébergée sur serveur. Ça y est, on en a enfin fini (pour le moment tout au moins)
avec les liens ! N’hésitez pas à prendre une petite pause et à revoir cette partie à tête
reposée car c’est vraiment très important et, si vous comprenez la mécanique des liens,
vous n’aurez aucun mal à comprendre le reste.

Les tableaux

Création d’un tableau simple

Les tableaux en HTML ne servent et ne doivent être utilisés que pour organiser des
données. Pour créer un tableau, il va nous falloir utiliser au minimum trois éléments
: les éléments table, tr et td. L’élément table définit le tableau en soi. A l’intérieur de
cet élément table, on va utiliser l’élément tr (table raw) pour ajouter des lignes à notre
tableau.

Tout tableau en HTML sera construit ligne par ligne.

Enfin, on utilise l’élément td (table data) pour ajouter des cellules dans nos lignes.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 37

Si l’on insert plusieurs éléments td à l’intérieur d’un élément tr, des colonnes vont se
créer automatiquement à l’intérieur de notre ligne. Voyons un premier exemple
ensemble :

Voilà, nous venons de créer notre premier tableau ! Cependant, celuici ne ressemble
pas vraiment à l’image que vous vous faisiez d’un tableau je suppose… Et c’est normal
: nous ne l’avons pas encore mis en forme !

Mise en forme d’un tableau

Tout d’abord, nous allons commencer par ajouter des bordures à notre tableau. Pour
cela, nous allons utiliser les propriété CSS border, et border-collapse. On connaît déjà
la propriété border qui va nous permettre de créer des bordures autour de chaque
cellule de notre tableau. Ensuite, pour « coller » ces différentes bordures entre elles,
nous allons utiliser la propriété border-collapse.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 38

Cette propriété accepte trois valeurs : collapse (les bordures des cellules se collent),
separate (valeur par défaut) et inherit. Cela ressemble déjà beaucoup plus à un tableau
!

Faites bien attention à appliquer la propriété border-collape à l’élément table et la

propriété border à vos éléments td, sinon ça ne marchera pas ! Généralement, les
tableaux possèdent une ligne d’en-tête. Pour créer cette ligne, on va cette fois-ci utiliser
l’élément th (table head) à la place du ou des éléments td de notre première ligne. D’un
point de vue sémantique, l’élément th est à td ce que l’élément h1 est à p. Si l’on veut
créer une ligne d’en-tête en colonne, il suffit de remplacer le premier élément td de
chaque élément tr par des éléments th.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 39

Evidemment, on n’oubliera pas d’appliquer notre propriété border à nos éléments th

également.

Construire un tableau structuré

Si vous créez un tableau long, il sera certainement préférable de commencer à

l’organiser en le divisant en plusieurs sous-parties. C’est ce que nous allons apprendre
à faire tout de suite ! On peut diviser un tableau en trois sous-parties : une partie d’en-
tête (header), un corps de tableau (body) et un pied (footer). Ces trois parties sont
matérialisées en HTML par les éléments thead, tbody et tfoot. L’élément thead va
entourer la ou les lignes d’en-tête. L’élément tfoot va comporter des données
récapitulatives de notre tableau, comme des totaux par exemple. Enfin, l’élément
tbody va contenir notre tableau à proprement parler.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 40

Combiner des cellules

Maintenant, apprenons à combiner des cellules. Pour combiner des cellules, on va

utiliser les attributs HTML colspan et rowspan. L’attribut colspan va nous permettre
de combiner des cellules appartenant à différentes colonnes dans une même colonne
tandis que l’attribut rowspan va nous permettre de combiner des cellules provenant
de différentes lignes. Chacun de ces deux attributs accepte un nombre entier en valeur
qui indique le nombre de cellules qui doivent être collées entre elles.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 41

Ici, nous avons fusionné les cellules des deux colonnes « Nom » et « Prénom » en une
pour « Dupont Martin » et les cellules de deux lignes pour « 24 ans ».

Les formulaires

L’apparence graphique de tous ces contrôles dépend bien souvent du système

d’exploitation et du navigateur. Ils sont généralement carrés et plus gris sur les anciens
systèmes ; plus arrondis et sympathiques avec les programmes récents. Rien
n’empêche cependant de leur affecter des propriétés CSS. De nouveaux types pour
<input> ont vu le jour ainsi que quelques nouveaux éléments à part entière :

• <input> avec les types tel, url, email, search, date, time, datetime,
datetimelocal, month, week, number, range, color ;
• <output> ;
• <keygen> ;
• <meter> ;

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 42

• <progress> ;
• <datalist>.
Tout aussi importants, de nouveaux attributs ont été introduits, applicables à
l’ensemble des contrôles de formulaire ou à certains seulement.

<input> et ses variantes

L’élément <input> est particulier, car il revêt de multiples apparences et
fonctionnalités, uniquement caractérisées par l’attribut type. Son but est de recueillir
les informations d’une entrée effectuée par l’utilisateur, éventuellement en lui
fournissant toutes les indications nécessaires pour structurer son entrée ou son choix.
Afin de pouvoir enrichir les éléments de formulaire en HTML, des nouveaux types ont
été ajoutés pour <input> en HTML 5. Voici un récapitulatif des types pratiqués depuis
les précédentes versions de HTML ainsi que ceux inaugurés récemment.

Tableau Récapitulatif des valeurs possibles pour l’attribut type de la balise <input>
Type Rôle HTML
5
text Champ de texte

password Champ mot de passe

hidden Champ caché (invisible)

radio Bouton radio (un seul choix)

checkbox Case à cocher (choix multiples)

button Bouton

reset Remise à zéro du formulaire

submit Bouton de validation du formulaire

image Image cliquable

file Fichier

tel Numéro de téléphone Nouveau

url Adresse URL/URI Nouveau
email Adresse e-mail Nouveau
search Champ de recherche Nouveau
date Date Nouveau

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 43

time Heure Nouveau

datetime Date et heure Nouveau
datetime-local Date et heure (locales) Nouveau
month Mois Nouveau
week Semaine Nouveau
number Valeur numérique Nouveau
range Valeur numérique d’un intervalle, Nouveau
sans grande précision
color Une couleur RVB (3 composantes de Nouveau
8 bits)
Un élément sans attribut type est considéré par défaut comme <input type="text">. La
description de l’élément <label> présent dans les exemples se fera ultérieurement (il
s’agit d’une étiquette qui est liée par son attribut for à l’identifiant id du champ <input>
qui lui correspond). Dans tous les cas de figure, l’attribut value détermine la valeur du
champ transmise à la validation du formulaire, et l’attribut name son nom afin de
retrouver quel champ correspond à quelle valeur lors du traitement des données après
leur envoi via HTTP.

Exemple de formulaire minimaliste

<form method="post>
Identifiant : <input type="text" name="login">
Mot de passe : <input type="password" name="mdp">
<input type="submit" value="Valider">
</form>

text
Le type text est le champ de formulaire le plus classique qui soit. Comme son
nom le suggère, il permet la saisie d’un texte (relativement court pour des raisons de
lisibilité, car visuellement le contrôle est monoligne et d’une largeur déterminée).

<input type="text" name="prenom">

Champ d’entrée texte

password
Confrère de text, un champ d’entrée de mot de passe password est un
équivalent dont les caractères sont remplacés visuellement par des astérisques
ou des points.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 44

Mot de passe : <input type="password" name="motdepasse">

Champ de mot de passe

Son comportement est semblable en tous points à celui d’un champ texte
classique, à l’exception de la désactivation par défaut du copier sur son contenu.
Néanmoins, il est très facile de lire sa valeur en JavaScript ou via un inspecteur DOM,
ce n’est donc pas un champ dont le contenu est sécurisé. À la validation du formulaire,
il est également transmis en clair sur le réseau – hors utilisation d’un protocole de
cryptage avec HTTPS.

tel
Premier parmi la série des nouveaux types inaugurés par HTML 5, tel est une
déclinaison d’un champ texte par défaut indiquant au navigateur que l’on
s’attend à saisir un numéro de téléphone.

Téléphone : <input type="tel" name="telephone">

Safari Mobile pour iOS reconnaît très bien cette spécificité en affichant un
clavier approprié pour faciliter l’entrée d’une série de chiffres.

Champ de téléphone

url
Dans la même famille, le Working Group HTML en a profité pour prévoir un
champ texte destiné à recevoir une adresse de type URL absolue.

URL : <input type="url" name="adresseweb">

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 45

De manière équivalente, Safari Mobile déploie un clavier personnalisé

comportant quelques touches virtuelles plus appropriées à la saisie d’une
adresse Internet.

Champ d’adresse
URI/URL

À partir d’Opera 11, ce champ est automatiquement préfixé par http:// à la fin
de son édition, si l’on oublie de préciser le protocole. Il est cependant tout à fait autorisé
d’en indiquer d’autres, tels que ftp:// ou mailto: puisque ces familles de protocoles
correspondent aussi à des URL.

email
Un champ de type email est un autre champ texte spécialisé, destiné à recevoir
une adresse e-mail.

Champ d’adresse e-mail

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 46

Le navigateur est libre de lui affecter une apparence spécifique lorsqu’il

constate que la syntaxe n’est pas respectée.

<p>E-mail : <input type="email" name="adressemail"></p>

Champ d’adresse e-mail

hidden
Un élément <input> de type hidden est un champ caché pour l’utilisateur, mais
dont la valeur est validée avec le formulaire. Il s’agit généralement d’une valeur issue
d’un script exécuté côté serveur (par exemple PHP) ou côté client (JavaScript).

<input type="hidden" name="action" value="inscription">

Bien qu’il soit masqué à l’affichage, on peut tout à fait prendre connaissance
de son existence (nom et valeur) en consultant le code source de la page HTML. Ce
n’est donc pas un champ totalement secret, ni totalement fiable puisque sa valeur peut
être modifiée aisément par l’utilisateur en JavaScript ou avec une extension appropriée
intervenant sur le DOM (par exemple Firebug sous Mozilla Firefox). Son contenu doit
toujours être validé côté serveur après la validation du formulaire.

radio
Un bouton radio est un contrôle de formulaire, faisant partie d’un groupe
d’autres boutons radio. Ils possèdent tous le même attribut name en tant que
lien : un seul bouton radio peut être coché parmi leur ensemble, à un moment
donné.
<p>
<input type="radio" name="genre" value="masculin" id="m">
<label for="m">Je suis un homme</label>
<input type="radio" name="genre" value="feminin" id="f">
<label for="f">Je suis une femme</label>
</p>

<p>
Souhaitez-vous recevoir la newsletter ?
<input type="radio" name="newsletter" value="oui" id="newsletter-oui"
checked>
<label for="newsletter-oui">Oui</label>
<input type="radio" name="newsletter" value="non" id="newsletter-non">

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 47

<label for="newsletter-non">Non</label>
</p>

Un ensemble de boutons radio peut disposer de l’un d’entre eux coché par
défaut, en lui adjoignant l’attribut checked. Les formulations associées peuvent
différer, mais il est en général toujours possible d’utiliser <label> pour bien
marquer le texte lié à chacun des choix.

checkbox
Cousines éloignées des boutons radio, les cases à cocher sont des éléments de
formulaire qui ne sont pas peu fières d’être totalement indépendantes les unes
des autres.
<p>
<input type="checkbox" name="anonyme" value="1" id="ano">
<label for="ano">Je souhaite rester anonyme</label>
</p> <p>
<input type="checkbox" name="enquete" value="moutarde-chandelier"
id="hypothese" checked="checked">
<label for="hypothese">Je pense que le colonel Moutarde a utilisé le
chandelier
</label>
</p>

Figure 5–11
Cases à cocher

button
Un bouton classique peut être créé avec un élément <input> de type button. Il
est possible de lui adjoindre un gestionnaire d’événement JavaScript pour déclencher
une action. Ce type de bouton ne valide pas le formulaire.

<input type="button" value="Annuler" onclick="history.go(-1);">

Bouton quelconque

reset
Un contrôle de type reset est un simple bouton réinitialisant tous les champs
du formulaire à leur état initial.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 48

<input type="reset" value="Remettre à zéro">

Bouton de remise à zéro

submit
La variante de bouton de type submit est la plus utile, car elle permet de
valider le formulaire. Bien entendu, il existe des fonctions JavaScript pour produire un
résultat équivalent, mais ce bouton est nativement prévu à cet usage. Il déclenche la
validation complète du formulaire qui le contient, et son envoi à l’adresse spécifiée
dans l’attribut action de ce formulaire.
<form method="post" action="identification.php">
<label for="login">Identifiant :</label>
<input type="email" id="login">
<input type="submit" value="Valider">
</form>

Bouton de validation

Le texte figurant sur ce bouton est défini par son attribut value.

image
Les formulaires ne comprennent pas uniquement des champs texte et des
boutons. Une image cliquable est parfaitement intégrable à l’aide du type
image. En revanche, elle peut couvrir deux types d’usage :
• soit pour la sélection de coordonnées (x,y) sur cette image ;
• soit pour jouer le rôle de « bouton graphique » pour valider le formulaire.

<input type="image" src="carte.png" alt="" name="map">

file
Un élément de sélection de fichier local peut être créé avec un type file. C’est
un contrôle fortement dépendant du système d’exploitation, puisqu’il fait appel à une
fenêtre de dialogue pour la sélection d’un ou plusieurs fichiers. Il est la plupart du
temps représenté par un champ texte listant ces fichiers, associé à un bouton
Parcourir... ou Choisissez un fichier.

<input type="file" name="monfichier">

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 49

Champ de sélection de fichier sous Chrome

date
Avec le type date, débute une liste de plusieurs contrôles pour l’entrée de
données temporelles. La syntaxe des dates et heures est définie par la RFC 3339.

<input type="date" name="naissance">

Champ de sélection de date sous

Opera

month
Ce champ permet de sélectionner un mois et une année. Il ne peut s’agir d’une
simple sélection de mois parmi un ensemble de douze choix uniques (de janvier à
décembre), mais bien d’un mois du calendrier relié à une année précise. La valeur texte
est composée de l’année sur quatre chiffres, séparée par un tiret du mois sur deux
chiffres, entre 01 (janvier) et 12 (décembre).

<input type="month" name="mois">

Champ de sélection de
mois sous Chrome

number
Un champ de type number consacre son existence aux valeurs numériques,
éventuellement situées dans un intervalle spécifié par les attributs min et max.

Nombre : <input type="number" name="age">

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 50

Champ de sélection de
valeur numérique

color
Grâce au type color, l’élément <input> devient un contrôle pour la sélection
d’une couleur, ou plutôt d’un code couleur stocké dans son attribut value. Le
format est sous la forme hexadécimale que l’on retrouve déjà au sein de HTML
et CSS, débutant par un dièse suivi de 6 caractères alphanumériques entre 0 et
9, A et F.
<!-- blanc -->
<input type="color" name="couleur1" value="#FFFFFF">

<!-- bleu royal -->

<input type="color" name="couleur2" value="#4169E1">

Attention: les codes couleur HTML (tels que white, lime, chocolate) ne sont pas
autorisés.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 51

CHAP III : LE CSS

Vous allez enfin pouvoir modifier l’apparence de vos textes, rajouter des bordures ou
changer la disposition des éléments sur votre page. Mais avant tout, il nous faut
commencer avec quelques éléments de vocabulaire comme on l’avait fait pour le
HTML.

Principe général

L’application d’une feuille de style CSS s’effectue lorsque celle-ci est liée au document
par la balise <link>, présente dans la section <head>. Plusieurs feuilles de style peuvent
être chargées de la sorte pour un seul document.
Il est aussi envisageable de déclarer directement des instructions CSS entre les balises
<style> et </style>, situées également dans <head> ou dans une portion du document,
mais cette façon de faire ne facilite pas la maintenance ni la mise en cache.
Dans le fichier de la feuille de style, on retrouve une ou plusieurs déclarations CSS.
Elles comprennent un sélecteur dont le rôle est de cibler les éléments concernés par
chaque déclaration, suivi d’un bloc entre accolades regroupant les propriétés à
appliquer.

Sélecteurs, propriétés et valeurs

Dans ce premier chapitre, nous allons voir ensemble ce que sont les sélecteurs, les
propriétés et les valeurs en CSS. Pour rappel, le CSS sert à modifier l’apparence de nos
pages web en appliquant des styles au contenu en HTML. Un sélecteur, tout d’abord,
va servir à déterminer à quel(s) élément(s) HTML ou à quel type d’éléments on
souhaite appliquer un style particulier. Si l’on souhaite appliquer un style particulier
à tous nos paragraphes, par exemple, on utilisera le sélecteur « p ».

Une propriété va nous servir à modifier le style d’un élément en ciblant un critère bien
particulier comme la taille d’un texte, sa police ou sa couleur par exemple. Une valeur,
enfin, va venir compléter une propriété et va en déterminer le comportement. Pour la
propriété servant à changer la couleur d’un texte par exemple, la valeur va être la
nouvelle couleur à appliquer. Voici ci-dessous une illustration concrète de ce que l’on
vient de dire :

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 52

Dans cet exemple, nous utilisons le sélecteur simple « p », ce qui signifie que nous
souhaitons appliquer un style particulier à tous les paragraphes de nos pages. Nous
utilisons les propriétés « color » (qui sert à modifier la couleur d’un texte) et « font-size
» (pour changer la taille d’un texte). Cela signifie donc que nous travaillerons sur la
couleur et la taille de nos paragraphes. Enfin, nous indiquons que nous voulons que
tous nos paragraphes s’affichent en bleu grâce à la valeur « blue » et que notre texte ait
une taille de 16px avec la valeur « 16px ».

Notez d’ores-et-déjà la syntaxe de notre première déclaration en CSS. On entoure les

propriétés et les valeurs avec des accolades et on place un point virgule après avoir
spécifié une valeur pour chacune de nos propriétés. Chaque propriété est séparée de
sa valeur par un deux-points. Faîtes l’effort de bien retenir cette écriture, car nous
allons sans cesse nous en resservir à partir de maintenant.

Où écrire le CSS ?

Nous avons trois possibilités pour écrire notre CSS. L’une d’elles est préférable aux
deux autres et nous allons immédiatement voire pourquoi. Nous pouvons écrire le
CSS :

• A l’intérieur de l’élément head de notre document HTML ; • Dans la balise

ouvrante des éléments de notre fichier HTML ;
• Dans un fichier portant l’extension .css séparé.

Pour des raisons de performances de votre code, de clarté et d’économie de temps, je

vous recommande vivement d’utiliser la dernière méthode dès que cela est possible.
Voyons ensemble comment cela se passe en pratique pour chacune de ces trois
méthodes, puis je vous expliquerai pourquoi la dernière est la meilleure. Commençons
avec la première façon : écrire son code CSS dans l’élément head de notre page HTML.
Pour faire cela, il suffit d’insérer un élément style dans notre élément head et de placer
nos déclarations CSS à l’intérieur de cet élément style comme ceci :

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 53

Deuxième méthode maintenant : écrire du CSS dans la balise ouvrante d’un élément
HTML. Pour faire cela, nous allons devoir utiliser un attribut style et lui affecter en
valeur nos propriétés CSS :

Vous remarquerez que l’on respecte la syntaxe du CSS à l’intérieur de l’attribut style
en utilisant les deux points et les points virgules. Attention cependant : dans notre
premier cas, on utilisait l’élément style tandis que dans le cas présent, style est un
attribut.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 54

Troisième et dernière méthode enfin (la méthode recommandée) : écrire le code CSS
dans un fichier séparé. Pour faire cela, nous allons déjà devoir ouvrir un nouveau
fichier dans notre éditeur de texte et l’enregistrer au format « .css ». Vous pouvez le
nommer « style.css ». Pensez bien à enregistrer ce fichier dans le même dossier que
votre fichier HTML dont vous souhaitez modifier le style, sinon vous risquez d’avoir
des problèmes (nous expliquerons plus tard dans ce cours pourquoi). Une fois que
vous avez fait cela, retournez sur votre page HTML. Nous allons maintenant devoir
lier nos deux fichiers HTML et CSS. On va faire cela à l’aide d’un élément link que
nous allons placer dans l’élément head de cette manière :

L’élément link est représenté sous forme de balise orpheline et doit être accompagné
de ses deux attributs « rel » et « href ». L’attribut rel sert à préciser le style du fichier
lié (dans notre cas c’est une feuille de style, donc « stylesheet » en anglais). L’attribut
href, que vous connaissez déjà, sert à faire le lien en soi. Si notre fichier avait été placé
dans un dossier parent ou dans un sous-dossier par rapport à notre fichier HTML, il
aurait fallu refléter cela dans la valeur de notre attribut href (rappelez vous de la leçon
sur les liens relatifs !). Finalement, nous n’avons plus qu’à écrire notre code CSS dans
le fichier style.css :

Si vous désirez voir le résultat immédiatement et pouvoir travailler avec vos différents
fichiers sur une même page, je vous conseille une nouvelle d’utiliser JsBin.com (ce que
je ferai très souvent dans la suite de ce cours).

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 55

Ce site permet en effet d’écrire du code en HTML, en CSS et en JavaScript et d’avoir

un aperçu du résultat immédiatement comme ceci :

Les commentaires en CSS

Enchaînons avec les commentaires en CSS. On a déjà vu que l’on pouvait commenter
en HTML. Cela est également possible en CSS. Plus qu’une possibilité, c’est même une
obligation selon moi. En effet, les fichiers CSS deviennent rapidement très long
(beaucoup plus que les fichiers HTML par exemple) donc si vous ne commentez pas
efficacement vous risquez d’être très vite perdu. De plus, si vous distribuez votre code,
je pense que la personne sera contente d’avoir quelques lignes de commentaires pour
l’aider à trouver ce qu’elle cherche au milieu de 2000 lignes de code !

En CSS, on écrit les commentaires de cette manière :

Sélecteurs simples et limitations

Retournons maintenant à nos sélecteurs. Jusqu’à présent, nous n’avons manipulé que
des sélecteurs que l’on appelle « simple », car ils correspondent à des éléments HTML
seuls et sans attributs (par exemple le sélecteur p).

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 56

Ce type de sélecteur doit être préféré tant que possible pour des raisons d’optimisation
et de performance du code. En effet, ils requièrent moins de code et sont donc moins
gourmands en énergie que des sélecteurs plus complexes. Votre page mettra ainsi
moins de temps à charger. Le problème reste qu’on est quand même très limité avec
des sélecteurs simples : comment faire pour appliquer un style différent à deux
éléments de même type, deux paragraphes par exemple ? Ce n’est tout simplement
pas possible. Et c’est pour cela que l’on a créé les attributs class et id.

Les attributs class et id

Class et Id sont deux attributs HTML qui ont été créés pour pouvoir appliquer
différents styles à des éléments de même type. Class permet également de faire
l’inverse et d’appliquer le même style à différents éléments choisis. Voyons tout de
suite comment ils fonctionnent. Premièrement on se place dans la balise ouvrante d’un
élément HTML, on écrit le nom de notre attribut (class ou id), et on lui donne une
valeur cohérente. Cette valeur ne devrait contenir ni de caractères spéciaux (accents
et autres) ni d’espace. Par exemple :

Ensuite, on retourne sur notre fichier CSS. On va devoir commencer notre déclaration
par un point là où on a utilisé un attribut class et par un dièse si l’on a utilisé l’attribut
id. Après le point ou le dièse, on écrit la valeur de l’attribut en question pour former
notre sélecteur. Enfin, on écrit le code CSS voulu. Voilà ce que ça donne en pratique :

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 57

Vous le voyez, nous pouvons maintenant appliquer un style différent à chaque

élément HTML grâce aux attributs class et id. Pratique, non ? Pourquoi avoir créé deux
attributs pour faire la même chose ? En fait, il existe une différence notable entre class
et id : un attribut id avec une valeur précise ne peut être utilisé qu’une fois dans une
page, au contraire de class. Id sera donc utilisé pour des éléments uniques dans une
page web, comme le logo de votre site par exemple.

En revanche, on peut utiliser plusieurs attributs class identiques (c’est à dire ayant la
même valeur) par page. C’est d’ailleurs une des méthodes que nous utiliserons pour
appliquer un même style à différents éléments.

Notez que, dans l’exemple précédent, utiliser deux attributs class n’est pas la meilleure
solution (nous verrons mieux lorsque nous étudierons les sélecteurs avancés). J’ai écrit
cela seulement pour vous montrer que ça fonctionne. Nous voilà déjà un peu moins

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 58

limités. Cependant, nous ne pouvons pour le moment appliquer un style qu’à un

contenu entre balises. Effectivement, on ne pourrait pas appliquer de style particulier
au mot « attributs » de notre titre dans l’exemple précédent. Pour remédier à cela, on
a inventé les deux éléments HTML div et span, que nous allons étudier tout de suite.

Les éléments div et span

Pour commencer, vous devez bien comprendre que les éléments div et span ne
possèdent aucune valeur sémantique, ce qui va à l’encontre même du rôle du HTML.
Ainsi, vous ne devez les utiliser que lorsque vous n’avez pas d’autre choix. Les
éléments div et span vont nous servir de containers. Nous allons nous en servir pour
entourer des blocs de code et ainsi pouvoir attribuer des styles particuliers à ces blocs.

L’utilisation des éléments div et span est très simple : il suffit d’entourer le bloc de code
voulu avec une paire de balises ouvrante et fermante div ou span comme cela :

Généralement, on attribuera une class ou un id à div et span afin de pouvoir

différencier nos différents div et span dans notre page. Ainsi, on peut désormais
appliquer un style particulier à n’importe quel bout de code dans notre page HTML.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 59

Tout comme pour class et id, il existe une différence entre div et span : div est un
élément de type block tandis que span est un élément de type inline.

Block ? Inline ? Nous allons voir immédiatement ce que cela signifie.

Les éléments de type block et inline

En HTML, tout élément est soit de type block, soit de type inline. Par exemple, div est
un élément de type block tandis que span est un élément de type inline. Les éléments
de type block sont fondamentalement différents des éléments de type inline en HTML
et il est essentiel de bien comprendre les différences entre ces deux types si vous voulez
un jour créer un site Internet, ne serait-ce que pour des raisons de mise en page.
Voyons immédiatement ces différences ensemble :

Les éléments de type block… Les éléments de type inline…

Commencent sur une nouvelle ligne S’insèrent dans une ligne

Occupent toute la largeur Occupent seulement la largeur nécessaire

disponible
Peuvent être imbriqués les uns dans les Peuvent être imbriqués les uns dans les
autres et contenir des éléments de type autres mais ne peuvent pas contenir
inline d’éléments de type block

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 60

Afin que vous compreniez bien la différence entre les deux types d’éléments, voyons
ensemble quelques exemples d’éléments de type inline ou block pour que vous
puissiez observer leur comportement.

Eléments de type block Eléments de type inline

p em
h1, h2, h3, h4, h5, h6 strong
ol, ul,dl mark
li a
table img

Illustrons ce que nous venons de dire en regardant par exemple de plus près le
comportement des éléments p et em :

On voit bien dans l’exemple ci-dessus les différences citées dans cette partie entre les
éléments de type block et inline. J’ai mis des bordures autour des paragraphes afin que
vous soyez bien convaincu qu’un élément de type block occupe toujours toute la
largeur disponible.

Les sélecteurs avancés

Maintenant que nous avons fait un premier tour d’horizons des possibilités offertes
par le CSS et que nous savons comment appliquer un style à n’importe que bloc de
code HTML, je peux vous parler des sélecteurs avancés. Les sélecteurs avancés sont
l’une des grandes forces du CSS. En effet, grâce à eux, nous allons pouvoir cibler du
contenu très précisément et assez simplement.

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 61

Il faut savoir qu’il existe de très nombreux sélecteurs avancés en CSS et que je ne vous
présenterai dans ce cours que les plus utiles selon moi et les plus utilisés. N’hésitez pas
à vous renseigner davantage si cela vous intéresse !

Ce sélecteur sert à… Et il s’écrit comme cela…

Sélectionner tous les éléments *
(sélecteur universel)
Sélectionner deux éléments A et B A, B

Sélectionner un élément B contenu dans un A B

élément A
Sélectionner le premier élément B suivant un A + B
élément A
Sélectionner tous les éléments A A[nom de l’attribut]
possédant un attribut particulier
Sélectionner tous les éléments A possédant un A[nom de l’attribut* =
attribut particulier avec une valeur « valeur »]

Sélectionner tous les éléments A possédant un A[nom de l’attribut «=

attribut particulier avec une valeur précise valeur »]

N’hésitez pas à faire quelques tests par vous même et à vous entraîner un peu pour
bien maîtriser ces quelques sélecteurs avancés, cela pourra vous être très utile par la
suite.

La notion d’héritage en CSS

L’héritage est une notion centrale et fondamentale du CSS. L’héritage signifie que tout
élément HTML va hériter des styles de ses parents (c’est le fameux « cascading »). En
HTML, si un élément A est inclus dans un élément B ; l’élément A s’appellera l’enfant
et l’élément B sera le parent de l’élément A. Ainsi, si l’on applique un style à l’élément
B, l’élément A en héritera automatiquement. Voici un exemple de ce que j’avance ci-
dessous :

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375
 P a g e | 62

Ici, l’élément body est le parent des éléments h1 et p, puisque les éléments h1 et p sont
bien contenus dans l’élément body. Ainsi, lorsqu’on applique un style à l’élément body
(ici, mettre le texte en rouge), les éléments p et h1 héritent automatiquement de ce style.
Cela laisse une question en suspens : que se passe-t-il lorsque l’on donne deux ordres
contradictoires à un élément parent et à son enfant en CSS (par exemple, donner une
couleur rouge au parent et bleue à l’enfant) ?

Le CSS possède ici sa logique et le style appliqué sera celui le plus proche de l’élément
en question. Cela signifie que si on applique un style à un élément enfant, c’est bien ce
style qui lui sera appliqué.

Cette notion d’héritage est assez simple à comprendre mais est très puissante et est à
la base du CSS, retenez la donc bien !

Dispensé par Ir. Cédric KALENGA LUBANGE : +243 995 504 660 / +243 817 621 375