Langage de Programmation Web Ir.

Peter KABUBA

FICHE MATIERE

Unité d’enseignement : Programmation Web

Public ciblé : Etudiants(es) en informatique de gestion
Promotion : L2 LMD
Nombre des crédits : 3
Moyens pédagogiques :
Support de cours (sur papiers)
Exposé du cours avec :
Indication des notes sur tableau
Tests d’attention et d’assimilation

OBJECTIFS PEDAGOGIQUES

À la fin de cette U.E, vous saurez...

 Maîtriser les langages HTML et CSS
 Créer des pages web en HTML et CSS
 Structurer une page web
 Transformer une maquette en page web
 Envoyer un site en ligne
 Aucun pré-requis.

PLAN DU COURS

PREMIERE PARTIE : APPRENTISSAGE EN HTML

Chapitre 1 : Fonctionnement du site web
Chapitre 2 : html et CSS
Chapitre 3 : Les navigateurs
Chapitre 4 : Votre première page web en html
Chapitre 5 : organiser son texte
1
Page
Langage de Programmation Web Ir. Peter KABUBA

INTRODUCTION GENERALE

La programmation est ainsi une technique et une méthode qui

consiste à partir d’un problème posé par les utilisateurs, de trouver des
instructions élément nécessaires respectant une logique donnée en vue de
produire le résultat demandé.
Les travaux répétitifs et de fort volume nécessitant ainsi des
traitements complexes pour arriver aux résultats ont posé l’homme à écrire des
programmes qui pour être exécutés très rapidement par l’ordinateur en vue
d’obtenir de ce dernier des résultats plus fiables et exacts
On appelle « langage informatique » un langage destiné à décrire
l’ensemble des actions consécutives qu’un ordinateur doit exécuter. Les langages
naturels (par exemple l’anglais ou le français) représentent l’ensemble des
possibilités d’expression partagé par un groupe d’individus. Les langages servant
aux ordinateurs à communiquer n’ont rien à voir avec des langages informatiques.
On parle dans ce cas de protocoles de communication. Ce sont deux notions
totalement différentes. Un langage informatique est une façon pratique pour nous
(humains) de donner des instructions à un ordinateur.

1. HISTORIQUE DE LANGAGE DE PROGRAMMATION

Depuis leur création, les langages de programmation ont évolué et ce
sont diversifiées hiérarchiquement, il est possible de les classer en deux
catégories : La programmation orienté objet (pour la mise en place des
applications de gestion pour les entreprise au niveau local : Exemple : VB, JAVA,
C++, etc.) et la programmation orienté web (qui s’occupe de la création des Site
web : Exemple : HTML, PHP, JAVASCRIPT, etc.)

2. Choix de Langage de programmation

Concernant cette unité d’enseignement, nous allons apprendre la

Programmation Web en commençant par l’apprentissage de HTML et de CSS qui
sont deux langages dites de balisages, dédiés aux débutants de la programmation
Web.

2
Page
Langage de Programmation Web Ir. Peter KABUBA

INTRODUCTION SPESIFIQUE
Vous souhaitez créer vos propres sites web ? Vous êtes au bon endroit ! Dans
ce cours, vous apprendrez comment utiliser HTML5 et CSS3, les deux langages de
programmation à la base de tous les sites web. Et en suite la maitrise de HTML et CSS
vous amènera de développer vos pages web dynamiques en PHP dans la suite de votre
parcours universitaire.

Vous pensez peut-être que vous n'êtes pas fait pour apprendre un langage
informatique, mais ne vous inquiétez pas : HTML et CSS sont des langages simples, que
nous allons découvrir pas à pas, au cours de nombreux exercices. Vous serez bientôt
capable d'ajouter du texte à votre site, de construire un menu de navigation, d'insérer des
images ... Et bien plus encore !

Alors prêt à réaliser un site web de A à Z ?

3
Page
Langage de Programmation Web Ir. Peter KABUBA

PREMIERE PARTIE : APPRENTISSAGE EN HTML

Chapitre I : FONCTIONNEMENT DU SITE WEB

Nous commencerons par présenter comment les sites web fonctionnent, puis
nous téléchargerons tous les programmes (gratuits) nécessaires pour bien travailler.
A la fin de cette partie, vous saurez déjà insérer du texte, des liens et des images !

Comment fait-on pour créer des sites web ?

Voici donc le premier chapitre de ce cours pour débutants, qui va vous apprendre
à créer votre site web !

Nous allons passer un certain temps ensemble, tout dépendra de la vitesse à

laquelle vous apprendrez. Si vous lisez ce cours régulièrement et à une bonne vitesse, vous
l'aurez terminé en une à deux semaines. Mais si vous avez besoin d'un peu plus de temps,
ne vous inquiétez pas : le principal est que vous y alliez à votre rythme, de préférence en
prenant du bon temps.

Je vous propose de commencer par la question la plus simple mais aussi la plus importante
: comment fonctionnent les sites web ?

Comment fonctionnent les sites web ?

Non, n'ayez pas peur de poser des questions même si vous pensez qu'elles sont «
bêtes ». Il est très important que nous en parlions un peu avant de nous lancer à fond dans la
création de sites !
Je suis certain que vous consultez des sites web tous les jours. Pour cela, vous
lancez un programme appelé le navigateur web en cliquant sur l'une des icônes
représentées à la figure suivante.

4
Page
Langage de Programmation Web Ir. Peter KABUBA

Les icônes des navigateurs web les plus répandus

Avec le navigateur, vous pouvez consulter n'importe quel site web. Voici par
exemple un navigateur affichant le célèbre site web Wikipédia :

Le site web Wikipédia

Je suis sûr que vous avez l'habitude d'utiliser un navigateur web ! Aujourd'hui,
tout le monde sait aller sur le Web… mais qui sait vraiment comment le Web fonctionne
? Comment créer des sites web comme celui-ci
J'ai entendu parler de HTML, de CSS, est-ce que cela a un rapport avec le fonctionnement des sites
web ?
Tout à fait !
Il s'agit de langages informatiques qui permettent de créer des sites web.
Tous les sites web sont basés sur ces langages, ils sont incontournables et universels
aujourd'hui. Ils sont à la base même du Web. Le langage HTML a été inventé par un certain
Tim Berners-Lee en 1991…
5
Page
Langage de Programmation Web Ir. Peter KABUBA

Tim Berners-Lee suit encore aujourd'hui avec attention l'évolution du

Web. Il a créé le World Wide Web Consortium (W3C) qui définit les nouvelles
versions des langages liés au Web. Il a par ailleurs créé plus récemment la World
Wide Web Foundation qui analyse et suit l'évolution du Web.

De nombreuses personnes confondent (à tort) Internet et le Web. Il faut savoir que le Web
fait partie
d'Internet.
Internet est un grand ensemble qui comprend, entre autres : le Web, les e-mails, la messagerie
instantanée, etc.
Tim Berners-Lee n'est donc pas l'inventeur d'Internet, c'est « seulement » l'inventeur du Web.

Les langages HTML et CSS sont à la base du fonctionnement de tous les sites
web. Quand vous consultez un site avec votre navigateur, il faut savoir que, en coulisses,
des rouages s'activent pour permettre au site web de s'afficher. L'ordinateur se base sur ce
qu'on lui a expliqué en HTML et CSS pour savoir ce qu'il doit afficher, comme le montre
la figure suivante.

6
Page
Langage de Programmation Web Ir. Peter KABUBA

Du HTML à l'écran

HTML et CSS sont deux « langues » qu'il faut savoir parler pour créer des sites
web. C'est le navigateur web qui fera la traduction entre ces langages informatiques et ce
que vous verrez s'afficher à l'écran.
Vous vous demandez sûrement pourquoi il faut connaître deux langages pour créer des
sites web ? Je vous réponds sans plus tarder !
7
Page
Langage de Programmation Web Ir. Peter KABUBA

Chapitre II : HTML et CSS

Pour créer un site web, on doit donner des instructions à l'ordinateur. Il ne suffit
pas simplement de taper le texte qui devra figurer dans le site (comme on le ferait dans un
traitement de texte Word, par exemple), il faut aussi indiquer où placer ce texte, insérer des
images, faire des liens entre les pages, etc.

II.1. Les rôles de HTML et CSS

Pour expliquer à l'ordinateur ce que vous voulez faire, il va falloir utiliser un

langage qu'il comprend. Et c'est là que les choses se corsent, parce qu'il va falloir
apprendre deux langages !

Pourquoi avoir créé deux langages ? Un seul aurait suffi, non ?

Vous devez vous dire que manipuler deux langages va être deux fois plus
complexe et deux fois plus long à apprendre… mais ce n'est pas le cas ! Je vous rassure,
s'il y a deux langages c'est, au contraire, pour faciliter les choses. Nous allons avoir affaire
à deux langages qui se complètent car ils ont des rôles différents :

 HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du
lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en
HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des
images… Vous direz par exemple : « Ceci est mon titre, ceci est mon menu, voici
le texte principal de la page, voici une image à afficher, etc. ».
 CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du CSS est
de gérer l'apparence de la page web (agencement, positionnement, décoration,
couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996.

Vous avez peut-être aussi entendu parler du langage XHTML. Il s'agit d'une variante du HTML qui
se veut plus rigoureuse et qui est donc un peu plus délicate à manipuler. Elle n'est plus vraiment
utilisée aujourd'hui.

Dans ce cours, nous allons travailler sur la dernière version de HTML

(HTML5) qui est aujourd'hui le langage d'avenir que tout le monde est incité à utiliser.

Vous pouvez très bien créer un site web uniquement en HTML, mais celui-ci ne
sera pas très beau : l'information apparaîtra « brute ». C'est pour cela que le langage CSS vient
toujours le compléter.

Pour vous donner une idée, la figure suivante montre ce que donne la même page
sans CSS puis avec le CSS.
8
Page
Langage de Programmation Web Ir. Peter KABUBA

Avec et sans CSS

Le HTML définit le contenu (comme vous pouvez le voir, c'est brut de

décoffrage !). Le CSS permet, lui, d'arranger le contenu et de définir la présentation
: couleurs, image de fond, marges, taille du texte…

Comme vous vous en doutez, le CSS a besoin d'une page HTML pour
fonctionner. C'est pour cela que nous allons d'abord apprendre les bases du HTML
avant de nous occuper de la décoration en CSS.
Vos premières pages ne seront donc pas les plus esthétiques, mais qu'importe ! Cela ne durera
pas longtemps.

II.2. Les différentes versions de HTML et CSS

Au fil du temps, les langages HTML et CSS ont beaucoup évolué. Dans la
toute première version de HTML (HTML 1.0) il n'était même pas possible d'afficher des
images !

Voici un très bref historique de ces langages pour votre culture générale.

II.2.1. Les versions de HTML


9

HTML 1 : c'est la toute première version créée par Tim Berners-Lee en 1991.
Page

 HTML 2 : la deuxième version du HTML apparaît en 1994 et prend fin en 1996

Langage de Programmation Web Ir. Peter KABUBA

avec l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases des
versions suivantes du HTML. Les règles et le fonctionnement de cette version sont
donnés par le W3C (tandis que la première version avait été créée par un seul
homme).

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

nombreuses possibilités au langage comme les tableaux, les applets, les scripts, le
positionnement du texte autour des images, etc.
 HTML 4 : cette version aura été utilisée un long moment durant les années 2000.
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 d'exploiter des feuilles de style, notre fameux CSS !
 HTML 5 : c'est LA dernière version. De plus en plus répandue, elle fait beaucoup
parler d'elle car elle apporte de nombreuses améliorations comme la possibilité
d'inclure facilement des vidéos, un meilleur agencement du contenu, de nouvelles
fonctionnalités pour les formulaires, etc. C'est cette version que nous allons
découvrir ensemble.

II.2.2. Les versions de CSS

 CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les
bases de ce langage qui permet de présenter sa page web, comme les couleurs,
les marges, les polices de caractères, etc.
 CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette nouvelle version de
CSS rajoute de nombreuses options. On peut désormais utiliser des techniques
de positionnement très précises, qui nous permettent d'afficher des éléments où
on le souhaite sur la page.
 CSS 3 : c'est la dernière version, qui apporte des fonctionnalités particulièrement
attendues comme les bordures arrondies, les dégradés, les ombres, etc.
Notez que HTML5 et CSS3 ne sont pas encore des versions "officiellement" finalisées
par le W3C. Cependant, même s'il peut y avoir des changements mineurs dans ces
langages, je vous recommande chaudement de commencer dès aujourd'hui avec ces
nouvelles versions. Leurs apports sont nombreux et valent vraiment le coup. La
plupart des sites web professionnels se construisent aujourd'hui sur ces dernières
versions.

II.3. L'éditeur de texte

De quel logiciel vais-je avoir besoin pour créer mon site web ?
Vais-je devoir casser ma tirelire pour acheter un logiciel très complexe que je vais mettre des mois
à comprendre ?
Il existe effectivement de nombreux logiciels dédiés à la création de sites web.
Mais, je vous rassure, vous n'aurez pas à débourser un seul centime. Pourquoi aller
chercher un logiciel payant et compliqué, alors que vous avez déjà tout ce qu'il faut chez
vous ?

Eh oui, accrochez-vous bien parce qu'il suffit de… Bloc-Notes.

10
Page
Langage de Programmation Web Ir. Peter KABUBA

Le logiciel Bloc-notes de Windows

Incroyable mais vrai : on peut tout à fait créer un site web uniquement avec
Bloc-Notes, le logiciel d'édition de texte intégré par défaut à Windows. D'ailleurs, j'avoue,
c'est comme cela que j'ai commencé moi-même il y a quelques années.

Il y a cependant des logiciels plus puissants aujourd'hui et personne n'utilise

vraiment Bloc-Notes. On peut classer ces logiciels de création de site web en deux
catégories :

 Les WYSIWYG (What You See Is What You Get - Ce Que Vous Voyez Est Ce Que
Vous Obtenez) : ce sont des programmes qui se veulent très faciles d'emploi, ils
permettent de créer des sites web sans apprendre de langage particulier. Parmi les
plus connus d'entre eux : Mozilla Composer, Microsoft Expression Web,
Dreamweaver… et même Word ! Leur principal défaut est la qualité souvent assez
mauvaise du code HTML et CSS qui est automatiquement généré par ces outils. Un
bon créateur de site web doit tôt ou tard connaître HTML et CSS, c'est pourquoi je
ne recommande pas l'usage de ces outils.
 Les éditeurs de texte : ce sont des programmes dédiés à l'écriture de code. On peut
en général les utiliser pour de multiples langages, pas seulement HTML et CSS.
Ils se révèlent être de puissants alliés pour les créateurs de sites web !

Vous l'aurez compris, je vais vous inviter à utiliser un éditeur de texte dans ce
cours.
De nombreux éditeurs de texte fonctionnent que vous soyez sous Windows,
Mac OS X ou Linux (ils sont disponibles partout). Je vais vous en proposer plusieurs pour
que vous ayez le choix, mais, comme je sais que vous allez me demander celui que j'utilise,
11

je vais commencer par vous présenter... Sublime Text ou Dreamweaver!

Page
Langage de Programmation Web Ir. Peter KABUBA

Chapitre III : LES NAVIGATEURS

III.1. L’importance du navigateur

Le navigateur est le programme qui nous permet de voir les sites web. Comme
je vous l'ai expliqué plus tôt, le travail du navigateur est de lire le code HTML et CSS pour
afficher un résultat visuel à l'écran. Si votre code CSS dit « Les titres sont en rouge », alors
le navigateur affichera les titres en rouge. Le rôle du navigateur est donc essentiel !
On ne dirait pas, mais un navigateur est un programme extrêmement complexe.
En effet, comprendre le code HTML et CSS n'est pas une mince affaire. Le principal
problème, vous vous en rendrez vite compte, c'est que les différents navigateurs n'affichent
pas le même site exactement de la même façon ! Il faudra vous y faire et prendre l'habitude
de vérifier régulièrement que votre site fonctionne correctement sur la plupart des
navigateurs.

12
Page
Langage de Programmation Web Ir. Peter KABUBA

III.2. Les navigateurs sur ordinateur

Télécharger les navigateurs

Il existe de nombreux navigateurs différents. Voici les principaux à connaître :

Navigateur OS Téléchargement Commentaires

Google
Chrome Windows Le navigateur de Google, simple d'emploi et très rapide.
Mac Téléchargement C'est le navigateur que j'utilise au quotidien.
Linux

Mozilla
Firefox Windows Le navigateur de la fondation Mozilla, célèbre et
Mac Téléchargement réputé. Je l'utilise fréquemment pour tester mes sites
Linux web.

Internet
Explorer
(Déjà installé sur Le navigateur de Microsoft, qui équipe tous les PC
Windows Windows) Windows jusqu'à Windows 10.

Le nouveau navigateur de Microsoft, qui équipe tous les PC

à partir de Windows 10.
Il ressemble à Internet Explorer (les logos sont proches !)
mais c'est une toute nouvelle version bien plus à jour. Edge
est le remplaçant d'Internet Explorer.

Edge

Windows (Déjà installé sur

Windows 10)

Internet Explorer est remplacé par Edge

Safari
Téléchargement
Windows (Déjà installé sur Le navigateur d'Apple, qui équipe tous les Mac.
Mac Mac OS X)

Opera
Windows L'éternel outsider.
Mac Téléchargement Il est moins utilisé mais propose de
Linux nombreuses fonctionnalités.
13
Page
Langage de Programmation Web Ir. Peter KABUBA

Il est conseillé d'installer plusieurs navigateurs sur son ordinateur pour s'assurer que
son site fonctionne correctement sur chacun d'eux. De manière générale, je conseille de
tester son site web régulièrement au moins sur Google Chrome, Mozilla Firefox et
Internet Explorer/Edge.
Notez que Safari et Google Chrome affichent les sites web quasiment de la même
façon. Il n'est pas forcément nécessaire de tester son site sur Safari et Google
Chrome, même si c'est toujours plus sûr.

14
Page
Langage de Programmation Web Ir. Peter KABUBA

La figure suivante vous montre un aperçu du résultat produit par quelques-uns de ces
principaux navigateurs sur la page d'accueil de Google.

Aperçu de quelques navigateurs

III.2.1. Comprendre les différences entre navigateurs

A vue de nez, ces navigateurs se ressemblent beaucoup. Mais comme je vous

le disais plus tôt, les navigateurs n'affichent pas toujours un même site web exactement de
la même façon. Pourquoi ? Cela est dû au fait que les navigateurs ne connaissent pas
toujours les dernières fonctionnalités de HTML et CSS. Par exemple, Internet Explorer a
longtemps été en retard sur certaines fonctionnalités CSS (et paradoxalement, il a aussi
été en avance sur quelques autres).
Pour compliquer les choses, plusieurs versions des navigateurs co-existent.
Aujourd'hui, un navigateur comme Chrome sort une nouvelle version presque tous les mois.
Les mises à jour sont (heureusement) de plus en plus fréquentes.

Chaque version prend en charge de nouvelles fonctionnalités mais, si les utilisateurs ne

mettent pas à jour leur(s) navigateur(s), cela devient un problème pour les webmasters comme
vous qui créent des sites web.

Chrome a résolu en grande partie le problème en mettant en place des mises à jour
automatiques, sans intervention de l'utilisateur. Firefox a semble-t-il décidé de suivre le
rythme lui aussi. Internet Explorer est de plus en plus à jour, et son remplaçant Edge n'a
pas à rougir des autres navigateurs.

Bref, j'ai un peu le sentiment de parler comme un ancêtre du web en disant ça,
mais on a beaucoup de chance aujourd'hui : les navigateurs supportent un grand nombre
de fonctionnalités. La compatibilité reste toujours un problème malgré tout, mais ce n'est
pas aussi grave qu'à une époque.
15
Page
Langage de Programmation Web Ir. Peter KABUBA

III.3. Les navigateurs sur mobile

En plus des navigateurs que je vous ai présentés, il faut savoir qu'il existe
des variantes de ces navigateurs conçues pour les téléphones portables, en particulier
pour les smartphones.

De plus en plus de personnes consultent aujourd'hui des sites web sur leur
portable, il faut donc connaître un minimum le fonctionnement des navigateurs des
téléphones.

En fait, vous n'allez pas être dépaysés : la plupart des navigateurs sur
smartphones sont les mêmes que sur ordinateur, dans une version plus légère adaptée
aux mobiles. Tout dépend du type de téléphone.

 iPhone : sur l'iPhone d'Apple, le navigateur utilisé est Safari Mobile. Il s'agit
d'une version light et néanmoins très complète de Safari pour ordinateur.
 Android : les portables sous Android bénéficient du navigateur Chrome Mobile.
Là encore, il s'agit d'une version adaptée aux mobiles.
 Windows Phone : sous Windows Phone, on retrouve… Internet Explorer/Edge
Mobile ! Le principe est le même que pour les précédents navigateurs : il s'agit d'une
version dédiée aux mobiles.
 Blackberry : les Blackberry font exception car ils ont leur propre navigateur (il
n'existe pas d'équivalent sur ordinateur). Néanmoins, les versions les plus récentes
de ce navigateur se basent sur un noyau commun à Safari et Chrome (il s'agit du
moteur de rendu Webkit). Par conséquent, l'affichage est en général proche de celui
proposé par Safari et Chrome. Enfin, il faut reconnaître que les Blackberry sont de
moins en moins utilisés.

Les navigateurs pour mobiles prennent en charge la plupart des dernières

fonctionnalités de HTML et CSS. De plus, le système de mise à jour automatisé des
mobiles nous garantit que les utilisateurs auront le plus souvent les dernières versions.

Sachez néanmoins que des différences existent entre ces différents navigateurs mobiles
et qu'il est conseillé de tester son site sur ces appareils aussi ! En particulier, l'écran étant
beaucoup moins large, il faudra vérifier que votre site s'affiche correctement.
Les tablettes tactiles sont équipées des mêmes navigateurs, l'écran est simplement plus
large. Ainsi, l'iPad est fourni avec Safari Mobile.
En résumé

 Le Web a été inventé par Tim Berners-Lee au début des années 1990.
 Pour créer des sites web, on utilise deux langages informatiques :
o HTML : permet d'écrire et organiser le contenu de la page (paragraphes,
titres…) ;
o CSS : permet de mettre en forme la page (couleur, taille…).
 Il y a eu plusieurs versions des langages HTML et CSS. Les dernières versions sont
HTML5 et CSS3.
 Le navigateur web est un programme qui permet d'afficher des sites web. Il lit
16

les langages HTML et CSS pour savoir ce qu'il doit afficher.

Page

 Il existe de nombreux navigateurs web différents : Google Chrome, Mozilla

Langage de Programmation Web Ir. Peter KABUBA

Firefox, Internet Explorer, Safari, Opera… Chacun affiche un site web de manière
légèrement différente des autres navigateurs.
 Dans ce cours, nous allons apprendre à utiliser les langages HTML et CSS. Nous
travaillerons dans un programme appelé « éditeur de texte » (Sublime Text,
Notepad++, jEdit, vim…).

17
Page
Langage de Programmation Web Ir. Peter KABUBA

Chapitre IV : VOTRE PREMIERE PAGE WEB EN HTML

Ça y est, vous avez installé tous les logiciels ? Vous devriez maintenant avoir
un éditeur de texte pour créer votre site (comme Sublime Text, Dreavweaver, etc.) et
plusieurs navigateurs pour le tester (Mozilla Firefox, Google Chrome…).

Dans ce chapitre, nous allons commencer à pratiquer ! Nous allons découvrir

les bases du langage HTML et enregistrer notre toute première page web !
Alors oui, bien sûr, ne vous attendez pas encore à réaliser une page web exceptionnelle
dès ce quatrième chapitre, mais patience… cela viendra !

IV.1. Créer une page web avec l'éditeur

Allez, mettons-nous en situation ! Comme je vous l'ai dit, nous allons créer
notre site dans un éditeur de texte. Vous avez dû en installer, suite à mes conseils dans le
deuxième chapitre : qu'il s'appelle Sublime Text, Notepad++, Brackets, jEdit, vim,
TextWrangler, Dreamweaver, … peu importe. Ces logiciels ont un but très simple : vous
permettre d'écrire du texte !

Dans la suite de ce cours, je travaillerai avec Dreamwever, le choix d’un autre

éditeur pourra bien changer par rapport à sa disponibilité.

4.2. Les balises et leurs attributs

Bon, tout cela était trop facile. Évidemment, il a fallu que ces satanés
informaticiens s'en mêlent et compliquent les choses. Il ne suffit pas d'écrire « simplement
» du texte dans l'éditeur, il faut aussi donner des instructions à l'ordinateur. En HTML, on
utilise pour cela des balises.

4.2.1. Les balises

Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont
invisibles à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre
ce qu'il doit afficher.
Les balises se repèrent facilement. Elles sont entourées de « chevrons », c'est-à-dire des
symboles < et >, comme ceci : <balise>

À quoi est-ce qu'elles servent ? Elles indiquent la nature du texte qu'elles

encadrent. Elles veulent dire par exemple : « Ceci est le titre de la page », « Ceci est une
image », « Ceci est un paragraphe de texte », etc.

On distingue deux types de balises : les balises en paires et les balises orphelines.
18
Page
Langage de Programmation Web Ir. Peter KABUBA

[Link]. Les balises en paires

Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent :

<titre> Ceci est un titre</titre>

On distingue une balise ouvrante (<titre>) et une balise fermante (</titre>) qui
indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre
ces deux balises… n'est pas un titre.

Ceci n'est pas un titre <titre>Ceci est un titre</titre> Ceci n'est pas un
titre

[Link]. Les balises orphelines

Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit
précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de
l'image, on veut juste dire à l'ordinateur « Insère une image ici ».

Une balise orpheline s'écrit comme ceci :

<image />

Notez que le / de fin n'est pas obligatoire. On pourrait écrire seulement <image>. Néanmoins,
pour ne pas les confondre avec le premier type de balise, les webmasters recommandent de rajouter
ce / (slash) à la fin des balises orphelines. Vous me verrez donc mettre un / aux balises orphelines
et je vous recommande de faire de même, c'est une bonne pratique.

4.2.2. Les attributs

Les attributs sont un peu les options des balises. Ils viennent les compléter
pour donner des informations supplémentaires. L'attribut se place après le nom de la balise
ouvrante et a le plus souvent une valeur, comme ceci :

<balise attribut="valeur">

À quoi cela sert-il ? Prenons la balise <image /> que nous venons de voir. Seule, elle ne
sert pas à grand chose. On pourrait rajouter un attribut qui indique le nom de l'image à
afficher :

<image nom="[Link]" />

L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le fichier [Link].

Dans le cas d'une balise fonctionnant « par paire », on ne met les attributs que dans la balise
ouvrante et pas dans la balise fermante. Par exemple, ce code indique que la citation est de
Neil Armstrong et qu'elle date du 21 Juillet 1969 :
19

<citation auteur="Neil Armstrong" date="21/07/1969">

C'est un petit pas pour l'homme, mais un bond de géant pour l'humanité.
Page

</citation>
Langage de Programmation Web Ir. Peter KABUBA

Toutes les balises que nous venons de voir sont fictives. Les vraies balises ont des noms en
anglais (eh oui
!), nous allons les découvrir dans la suite de ce cours.

4.3. Structure de base d'une page HTML5

Voici la structure de HTML :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>

<body>

</body>
</html>

Vous noterez que les balises s'ouvrent et se ferment dans un ordre précis. Par
exemple, la balise <html> est la première que l'on ouvre et c'est aussi la dernière que l'on
ferme (tout à la fin du code, avec </html>).
Les balises doivent être fermées dans le sens inverse de leur ouverture. Un exemple :

 <html><body></body></html> : correct. Une balise qui est ouverte à

l'intérieur d'une autre doit aussi être fermée à l'intérieur.
 <html><body></html></body> : incorrect, les balises s'entremêlent.
Voici ce que signifient les balises présentées dans la structure ci-haut :

 Le doctype

<!DOCTYPE html>
La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle
qui indique qu'il s'agit bien d'une page web HTML.
Ce n'est pas vraiment une balise comme les autres (elle commence par un point
d'exclamation). Vous pouvez considérer que c'est un peu l'exception qui confirme la
règle.
Cette ligne du doctype était autrefois incroyablement complexe. Il était impossible de la retenir de
tête. Pour XHTML 1.0, il fallait écrire :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "[Link]
[Link]">.
Dans le cadre de HTML5, il a été décidé de la simplifier, pour le plus grand bonheur des
webmasters. Quand vous voyez une balise doctype courte (<!DOCTYPE html>), cela signifie que
la page est écrite en HTML5.
20
Page
Langage de Programmation Web Ir. Peter KABUBA

 La balise </html>
<html>

</html>

C'est la balise principale du code. Elle englobe tout le contenu de votre

page. Comme vous pouvez le voir, la balise fermante </html> se trouve tout à la fin du
code !

 L'en-tête <head> </head> et le corps <body> </body>

Une page web est constituée de deux parties :

 L'en-tête <head> : cette section donne quelques informations générales sur la page
comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette
section est généralement assez courte. Les informations que contient l'en-tête ne
sont pas affichées sur la page, ce sont simplement des informations générales à
destination de l'ordinateur. Elles sont cependant très importantes !
 Le corps <body> : c'est là que se trouve la partie principale de la page. Tout ce
que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps que nous
écrirons la majeure partie de notre code.

Pour le moment, le corps est vide (nous y reviendrons plus loin). Intéressons-nous par
contre aux deux balises contenues dans l'en-tête…

L'encodage (charset)

<meta charset="utf-8" />

Cette balise indique l'encodage utilisé dans votre fichier .html.

Sans rentrer dans les détails, car cela pourrait vite devenir compliqué,
l'encodage indique la façon dont le fichier est enregistré. C'est lui qui détermine comment
les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais,
caractères arabes, etc.).

Il y a plusieurs techniques d'encodage portant des noms bizarres et utilisées en

fonction des langues : ISO-8859- 1, OEM 775, Windows-1253… Une seule cependant
devrait être utilisée aujourd'hui autant que possible : UTF-
8. Cette méthode d'encodage permet d'afficher sans aucun problème pratiquement tous les
symboles de toutes les langues de notre planète ! C'est pour cela que j'ai indiqué utf-8 dans
cette balise.
Il ne suffit pas de dire que votre fichier est en UTF-8. Il faut aussi que votre fichier
soit bien enregistré en UTF-8
C'est heureusement le cas désormais par défaut dans la plupart des éditeurs de texte.
21
Page
Langage de Programmation Web Ir. Peter KABUBA

Le titre principal de la page

<title>
</title>

C'est le titre de votre page, probablement l'élément le plus important ! Toute

page doit avoir un titre qui décrit ce qu'elle contient.
Il est conseillé de garder le titre assez court (moins de 100 caractères en général).

Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du
navigateur). Enregistrez votre page web et ouvrez-la dans votre navigateur. Vous verrez
que le titre s'affiche dans l'onglet, comme sur la figure suivante.

Le titre de la page apparaît en haut du navigateur

Il faut savoir que le titre apparaît aussi dans les résultats de recherche, comme sur Google
(figure suivante).

Le titre de la page apparaît dans les recherches Google

Autant vous dire que bien choisir son titre est important !

4.4. Les commentaires

Nous avons appris à créer notre première vraie page HTML dans ce chapitre.
Avant de terminer, j'aimerais vous présenter le principe des commentaires.
22
Page
Langage de Programmation Web Ir. Peter KABUBA

Un commentaire en HTML est un texte qui sert simplement de mémo. Il n'est pas affiché,
il n'est pas lu par l'ordinateur, cela ne change rien à l'affichage de la page.

Bref, cela ne sert à rien ?

Eh bien si !
Cela sert à vous et aux personnes qui liront le code source de votre page. Vous
pouvez utiliser les commentaires pour laisser des indications sur le fonctionnement de
votre page.

Quel intérêt ? Cela vous permettra de vous rappeler comment fonctionne votre
page si vous revenez sur votre code source après un long moment d'absence. Ne rigolez
pas, cela arrive à tous les webmasters.

4.4.1. Insérer un commentaire

Un commentaire est une balise HTML avec une forme bien spéciale :

<!-- Ceci est un commentaire -->

Vous pouvez le mettre où vous voulez au sein de votre code source : il n'a aucun impact
sur votre page, mais vous pouvez vous en servir pour vous aider à vous repérer dans votre
code source (surtout s'il est long).
<!DOCTYPE html>
<html>
<head>
<!-- en-tête de la page -->

<meta charset="utf-8" />

<title>Titre</title>
</head>
<body>

<!-- Ceci est le corps -->

</body>
</html>

Tout le monde peut voir vos commentaires… et tout votre code HTML !

Terminons par une remarque importante : tout le monde peut voir le code
HTML de votre page une fois celle-ci mise en ligne sur le Web. Il suffit de faire un clic
droit sur la page et de sélectionner « Afficher le code source de la page » (l'intitulé peut
changer selon votre navigateur), comme le montre la figure suivante.
23
Page
Langage de Programmation Web Ir. Peter KABUBA

Menu afficher le code source

Le code source s'affiche alors (figure suivante).

Affichage du code source

Vous pouvez tester cette manipulation sur n'importe quel site web, cela
marche ! Garanti à 100%. Cela s'explique assez facilement : le navigateur doit obtenir le
code HTML pour savoir ce qu'il faut afficher. Le code HTML de tous les sites est donc
public.
La morale de l'histoire ? Tout le monde pourra voir votre code HTML et
vous ne pouvez pas l'empêcher. Par conséquent, ne mettez pas d'informations sensibles
24

comme des mots de passe dans les commentaires… et soignez votre code source, car
je pourrai venir vérifier si vous avez bien suivi mon cours à la lettre !
Page
Langage de Programmation Web Ir. Peter KABUBA

Lorsque vous regarderez le code de certains sites web, ne prenez pas peur s'il vous paraît
long ou ne pas respecter les mêmes règles que celles que je vous présente dans ce cours.
Tous les sites ne sont pas écrits en HTML5 (loin de là) et, parfois, certains webmasters
rédigent très mal leur code, ce ne sont pas toujours des exemples à suivre !

En résumé

 On utilise l'éditeur de texte (Sublime Text, Notepad++, Dreamweaver, jEdit,

vim,…) pour créer un fichier ayant l'extension .html (par exemple :
[Link]). Ce sera notre page web.
 Ce fichier peut être ouvert dans le navigateur web simplement en faisant un double-
clic dessus.
 À l'intérieur du fichier, nous écrirons le contenu de notre page, accompagné de balises
HTML.
 Les balises peuvent avoir plusieurs formes :
o <balise> </balise> : elles s'ouvrent et se ferment pour délimiter le
contenu (début et fin d'un titre, par exemple).
o <balise /> : balises orphelines (on ne les insère qu'en un seul exemplaire),
elles permettent d'insérer un élément à un endroit précis (par exemple une
image).
 Les balises sont parfois accompagnées d'attributs pour donner des indications
supplémentaires (exemple
: <image nom="[Link]" />).
 Une page web est constituée de deux sections principales : un en-tête (<head>) et un
corps (<body>).
 On peut afficher le code source de n'importe quelle page web en faisant
un clic droit puis en sélectionnant Afficher le code source de
la page.

25
Page
Langage de Programmation Web Ir. Peter KABUBA

Chapitre V : ORGANISER SON TEXTE

Bon, la page blanche c'est bien joli, mais votre site web risque d'avoir un
succès mitigé si vous le laissez comme cela.

Nous allons découvrir de nombreuses balises HTML dans ce chapitre. Certaines

existent depuis la toute première version de HTML, d'autres ont été introduites plus
récemment dans HTML5.

Nous allons voir successivement dans ce chapitre :

 comment rédiger des paragraphes ;

 comment structurer sa page avec les titres ;
 comment donner de l'importance à certains mots de son texte ;
 comment organiser les informations sous forme de listes.

Motivés ? Allez, vous allez voir, ce n'est pas compliqué.

5.1. Les paragraphes

La plupart du temps, lorsqu'on écrit du texte dans une page web, on le fait
à l'intérieur de paragraphes. Le langage HTML propose justement la balise <p> pour
délimiter les paragraphes.

<p> Bonjour et bienvenue sur mon site ! </p>

 <p> signifie « Début du paragraphe » ;

 </p> signifie « Fin du paragraphe ».

Comme je vous l'ai dit au chapitre précédent, on écrit le contenu du site web entre les balises
<body></body>. Il nous suffit donc de mettre notre paragraphe entre ces deux balises
et nous aurons enfin notre première vraie page web avec du texte !

Je reprends donc exactement le même code qu'au chapitre précédent et j'y ajoute mon
paragraphe :
OCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Paragraphes</title>
</head>

<body>
<p>Bonjour et bienvenue sur mon site !</p>
</body>
</html>
26
Page
Langage de Programmation Web Ir. Peter KABUBA

Essayez, vous allez voir le résultat !

Bon, ok, ce n'est pas encore le nirvana mais c'est un bon début.

Mais ne nous arrêtons pas en si bon chemin. Nous allons voir maintenant quelque chose
d'un peu particulier en HTML : le saut de ligne. Cela paraît simple et pourtant, cela ne
fonctionne pas vraiment comme dans un traitement de texte habituel…

5.2. Sauter une ligne

En HTML, si vous appuyez sur la touche Entrée, cela ne crée pas une
nouvelle ligne comme vous en avez l'habitude. Essayez donc ce code :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Essais de sauts de ligne</title>
</head>

<body>
<p>Bonjour et bienvenue sur mon site !
Ceci est mon premier test alors soyez indulgents s'il vous plaît,
j'apprends petit à petit comment cela marche.
Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours
quand j'aurai appris un peu plus de choses, je vous assure que vous allez
être surpris !</p>
</body>
</html>

Tout le texte s'affiche sur la même ligne alors qu'on est bien allé à la ligne dans le code !
Taper frénétiquement sur la touche Entrée dans l'éditeur de texte ne sert donc strictement
à rien.

Comme vous devez vous en douter, il y a pourtant bien un moyen de faire des sauts de ligne
en HTML.

En fait, si vous voulez écrire un deuxième paragraphe, il vous suffit d'utiliser une
deuxième balise <p>. Votre code HTML devrait donc être au final rempli de balises
de paragraphe !
27
Page
Langage de Programmation Web Ir. Peter KABUBA

Un exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Paragraphes</title>
</head>

<body>
<p>Bonjour et bienvenue sur mon site !
Ceci est mon premier test alors soyez indulgents s'il vous plaît,
j'apprends petit à petit comment cela marche. </p>

<p>Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand
j'aurai appris un peu plus de choses, je vous assure que vous allez être surpris
! </p>
</body>
</html>

Le résultat se trouve à la figure suivante.

Deux paragraphes avec 2 balises <p>

Oui, mais si je veux juste aller à la ligne dans un paragraphe et non pas sauter une ligne ?

Eh bien devinez quoi : il existe une balise « Aller à la ligne » !

C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne : <br />.
Vous devez obligatoirement la mettre à l'intérieur d'un paragraphe.
28
Page
Langage de Programmation Web Ir. Peter KABUBA

Voici comment l'utiliser dans un code :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sauts de ligne</title>
</head>

<body>
<p>Bonjour et bienvenue sur mon site !<br />
Ceci est mon premier test alors soyez indulgents s'il vous plaît,
j'apprends petit à petit comment cela marche. </p>

<p>Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand
j'aurai appris un peu plus de choses, je vous assure que vous allez être
surpris ! </p>
</body>
</html>

Donc c'est compris ?

 <p> </p> : pour organiser son texte en paragraphes ;

 <br /> : pour aller à la ligne.

Maintenant qu'on sait écrire des paragraphes, voyons voir comment on crée des titres.

5.3. Les titres

Lorsque le contenu de votre page va s'étoffer avec de nombreux paragraphes, il va devenir

difficile pour vos visiteurs de se repérer. C'est là que les titres deviennent utiles.

En HTML, on est verni, on a le droit d'utiliser six niveaux de titres différents. Je veux dire par
là qu'on peut dire

Vous pouvez théoriquement mettre plusieurs balises <br /> d'affilée pour faire plusieurs
sauts de lignes, mais on considère que c'est une mauvaise pratique qui rend le code délicat à
maintenir. Pour décaler un texte avec plus de précision, on utilisera le CSS, ce langage qui
vient compléter le HTML et dont je vous parlerai un peu plus loin.

« Ceci est un titre très important », « Ceci est un titre un peu moins important », « Ceci
est un titre encore moins important », etc. On a donc six balises de titres différentes :

 <h1> </h1> : signifie « titre très important ». En général, on s'en sert pour afficher
le titre de la page au début de celle-ci.
 <h2> </h2> : signifie « titre important ».
 <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un «
sous-titre » si vous voulez).
 <h4> </h4> : titre encore moins important.
 <h5> </h5> : titre pas important.
 <h6> </h6> : titre vraiment, mais alors là vraiment pas important du tout.
29

Attention : ne confondez pas avec la balise <title> ! La balise <title> affiche le titre de la page
dans la barre de titre du navigateur comme nous l'avons vu. Les titres <h1> et compagnie, eux, servent
Page

à créer des titres qui seront affichés dans la page web.

Langage de Programmation Web Ir. Peter KABUBA

Ne vous laissez pas impressionner par toutes ces balises. En fait, six niveaux de titres,
c'est beaucoup. Dans la pratique, personnellement, je n'utilise que les balises <h1>, <h2>
et <h3>, et très rarement les autres (je n'ai pas souvent besoin de six niveaux de titres
différents). Votre navigateur affiche le titre très important en très gros, le titre un peu
moins important en un peu moins gros, etc.

Ne choisissez pas votre balise de titre en fonction de la taille qu'elle applique au texte ! Il faut
impérativement bien structurer sa page en commençant par un titre de niveau 1 (<h1>), puis un titre de
niveau 2 (<h2>), etc. Il ne devrait pas y avoir de sous-titre sans titre principal !
Si vous voulez modifier la taille du texte, sachez que nous apprendrons à faire cela en CSS un peu plus tard.

Essayez de créer une page web avec des titres pour voir ce que cela donne :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Niveaux de titres</title>
</head>

<body>
<h1>Titre super important</h1>
<h2>Titre important</h2>
<h3>Titre un peu moins important (sous-titre)</h3>

<h4>Titre pas trop important</h4>

<h5>Titre pas important</h5>
<h6>Titre vraiment pas important du tout</h6>
</body>
</html>

Allez, je vous donne un exemple d'utilisation des titres dans une page web (vous allez voir
que je ne me sers pas de toutes les balises) :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Présentation d'OpenClassrooms</title>
</head>

<body>
<h1>Bienvenue sur OpenClassrooms !</h1>

<p>Bonjour et bienvenue sur mon site : OpenClassrooms.<br />

OpenClassrooms, qu'est-ce que c'est ? </p>

<h2>Des cours pour débutants</h2>

<p>OpenClassrooms vous propose des cours (tutoriels) destinés aux débutants

: aucune connaissance n'est requise pour lire ces cours !</p>

<p>Vous pourrez ainsi apprendre, sans rien y connaître auparavant, à créer un

site web, à programmer, à construire des mondes en 3D !</p>

<h2>Une communauté active</h2>

<p>Vous avez un problème, un élément du cours que vous ne comprenez pas

? Vous avez besoin d'aide pour créer votre site ?<br />
Rendez-vous sur les forums ! Vous y découvrirez que vous n'êtes pas le seul
30

dans ce cas et vous trouverez très certainement quelqu'un qui vous aidera
aimablement à résoudre votre problème.</p>
Page

</body>
</html>
Langage de Programmation Web Ir. Peter KABUBA

Voilà une page web qui prend forme !

Oui, mais moi je veux centrer mon titre, l'écrire en rouge et le souligner !

Nous ferons tout cela lorsque nous apprendrons le CSS (dès la deuxième partie du cours). Il
faut savoir que
<h1> ne signifie pas « Times New Roman, taille 16 pt », mais « Titre important ».

Grâce au langage CSS, vous pourrez dire « Je veux que mes titres importants soient centrés,
rouges et soulignés
». Pour le moment, en HTML, nous ne faisons que structurer notre page. Nous rédigeons
le contenu avant de nous amuser à le mettre en forme.

5.4. La mise en valeur

Au sein de vos paragraphes, certains mots sont parfois plus importants que
d'autres et vous aimeriez les faire ressortir. HTML vous propose différents moyens de
mettre en valeur le texte de votre page.

5.4.1. Mettre un peu en valeur

Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em>
</em>.
Son utilisation est très simple : encadrez les mots à mettre en valeur avec ces balises et c'est
bon ! Je reprends un peu l'exemple de tout à l'heure et j'y mets quelques mots en évidence
:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Emphase</title>
</head>

<body>
<p>Bonjour et bienvenue sur mon site !<br />
Ceci est mon premier test alors <em>soyez indulgents</em> s'il vous plaît,
j'apprends petit à petit comment cela marche.</p>
</body>
</html>

Comme vous pouvez le voir, utiliser la balise <em> a pour conséquence de mettre le texte
en italique. En fait, c'est le navigateur qui choisit comment afficher les mots. On lui dit
que les mots sont assez importants et, pour faire ressortir cette information, il change
l'apparence du texte en utilisant l'italique.

5.4.2. Mettre bien en valeur

31

Pour mettre un texte bien en valeur, on utilise la balise <strong> qui signifie
Page

« fort », ou « important » si vous préférez. Elle s'utilise exactement de la même manière que
Langage de Programmation Web Ir. Peter KABUBA

<em> :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Forte emphase</title>
</head>

<body>
<p>Bonjour et bienvenue sur mon site !<br />
Ceci est mon premier test alors <strong>soyez indulgents</strong> s'il
vous plaît, j'apprends petit à petit comment cela marche.</p>
</body>
</html>

Vous voyez sûrement le texte s'afficher en gras. Là encore, le gras n'est qu'une
conséquence. Le navigateur a choisi d'afficher en gras les mots importants pour les faire
ressortir davantage.

La balise <strong> ne signifie pas « mettre en gras » mais « important ». On pourra décider
plus tard, en CSS, d'afficher les mots « importants » d'une autre façon que le gras si on le
souhaite.

5.4.4. Les listes

Les listes nous permettent souvent de mieux structurer notre texte et

d'ordonner nos informations. Nous allons découvrir ici trois types de listes :
 les listes non ordonnées ou listes à puces ;
 les listes ordonnées ou listes numérotées.
 Les listes imbriquées

5.4.1. Liste non ordonnée

Une liste non ordonnée ressemble à ceci :

 Ibalayam Emmanuel
 Kikau Landry
 Kabuba Peter

C'est un système qui nous permet de créer une liste d'éléments sans notion
d'ordre (il n'y a pas de « premier » ni de « dernier »). Créer une liste non ordonnée est très
simple. Il suffit d'utiliser la balise <ul> que l'on referme un peu plus loin avec </ul>.
Commencez donc à taper ceci :
<ul> </ul>.

Et maintenant, voilà ce qu'on va faire : on va écrire chacun des éléments de la liste entre deux
balises
<li></li>. Chacune de ces balises doit se trouver entre <ul> et </ul>. Vous allez
comprendre de suite avec cet exemple :
<ul>
<li>Ibalaya Emma</li>
32

<li>Kikau Landry</li>
<li>Kabuba Peter</li>
Page

</ul>
Langage de Programmation Web Ir. Peter KABUBA

Le résultat se trouve à la figure suivante.

Une liste non ordonnée

Notez que la liste doit être placée à l'intérieur de <body></body>. À partir de maintenant, je ne mets pas
tout le code de la page pour rester lisible.

Retenez donc ces deux balises :

 <ul></ul> délimite toute la liste ;

 <li></li> délimite un élément de la liste (une puce).

Vous pouvez mettre autant d'éléments que vous voulez dans la liste à puces, vous n'êtes
pas limités à trois éléments.

Et voilà, vous savez créer une liste à puces ! Pas si dur une fois qu'on a compris comment
imbriquer les balises.

5.4.2. Liste ordonnée

Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut
remplacer <ul></ul> par <ol></ol>.
À l'intérieur de la liste, on ne change rien : on utilise toujours des balises <li></li> pour
délimiter les éléments.

L'ordre dans lequel vous placez les éléments de la liste est important. Le premier <li></li> sera l'élément
n° 1, le second sera le n°2 etc…

Comme c'est particulièrement intuitif, je vous laisse admirer la simplicité de cet exemple
(résultat à la figure suivante) :
<h1>Ma journée</h1>

<ol>
<li>Je me lève.</li>
<li>Je mange et je bois.</li>
<li>Je retourne me coucher.</li>
</ol>

Une liste ordonnée

Par rapport à l'exemple précédent, tout ce qu'on a eu à changer est donc la balise <ol>.
33
Page
Langage de Programmation Web Ir. Peter KABUBA

5.4.3. Liste imbriquées

Pour ceux qui ont besoin de faire des listes complexes, sachez que vous pouvez
imbriquer des listes à puces (créer une liste à puces dans une liste à puces). Si vous voulez
faire ça, ouvrez une seconde balise <ul>à l'intérieur d'un élément <li></li> de
l’exemple au point 5.4.1.
Si vous fermez les balises dans le bon ordre, vous n'aurez pas de problème. Attention
néanmoins, cette technique est un peu compliquée à maîtriser.

En résumé

 Le HTML comporte de nombreuses balises qui nous permettent d'organiser le

texte de notre page. Ces balises donnent des indications comme « Ceci est un
paragraphe », « Ceci est un titre », etc.
 Les paragraphes sont définis par la balise <p> </p> et les sauts de ligne par la balise
<br />.
 Il existe six niveaux de titre, de <h1> </h1> à <h6> </h6>, à utiliser selon
l'importance du titre.
 On peut mettre en valeur certains mots avec les balises <strong>, <em> et <mark>.
 Pour créer des listes, on doit utiliser la balise <ul> (liste à puces, non
ordonnée) ou <ol> (liste ordonnée). À l'intérieur, on insère les éléments avec
une balise <li> pour chaque item.
34
Page