1

Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

INTRODUCTION

Voilà plus de vingt ans que le web existe. Un âge

respectable dans l’univers de l’informatique. Le web n’a
pourtant jamais été utilisé comme aujourd’hui, tout le monde a
pris l’habitude de naviguer sur des sites un peu comme si
c’était une seconde nature.

C’est même devenu une activité principale sur un

ordinateur, à tel point qu’on arrive à oublier que celui-ci peut
servir à autres choses qu’à naviguer sur le web.

Même n’étant pas devant son ordinateur, nous

avons pris l’habitude de regarder compulsivement nos
téléphones portables pour consulter les dernières nouvelles.
Bref, le web nous suit partout.

C’est pourquoi, dans le cadre de notre cours, nous

allons parler de quelques langages web d’autant plus qu’il s’est
autant démocratisé aussi parce qu’il est facile de créer un site
web. Mais attention, cela ne s’improvise pas, il faut de la
méthode, de l’organisation et quelques connaissances sur les
langages web.

Objectif du cours

Ce cours permettra aux étudiants d’avoir des

connaissances de base sur la création des sites web.

Objectifs spécifiques

Tout étudiant qui aura bien suivi ce cours sera

capable de :
 Comprendre les bases de HTML : Quel programme à
installer, comment tester le résultat de son site, comment
afficher du texte, des images, et comment créer des liens.
 Comprendre les joies de la mise en forme avec le CSS :
Choix de la couleur de votre site, modification de la taille
du texte, la police, etc.
 2
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

Chapitre 1. Généralités sur le Site Web

Ce qui fait succès du web aujourd’hui c’est à la fois

sa simplicité et sa facilité d’accès. Un internaute n’a pas besoin
de savoir comment fonctionne le site derrière. Un apprenti
webmaster tel que nous, doit, avant toute chose, connaitre les
bases du fonctionnement d’un site web.

On considère qu’il existe deux types de sites web :

le site statique et le site dynamique :

 Le site statique : c’est site réalisé uniquement à l’aide des

langages HTML et CSS (cascading style sheet). Il fonctionne très
bien mais son contenu ne peut pas être mis à jour
automatiquement, il faut que le propriétaire du site (Le
webmaster) modifie le code source pour y ajouter des
nouveautés. Ce n’est pas vraiment pratique quand on veut
mettre son site à jour plusieurs fois dans la même journée.

 Le site dynamique : Plus complexe et utilise d’autres

langages en plus de HTML et CSS tels que PHP et MySQL. Le
contenu de ce site est dit dynamique parce qu’il peut changer
sans l’intervention du webmaster. La plupart des sites web que
nous visitons aujourd’hui, sont des sites dynamiques. Le seul
prérequis pour apprendre à créer son site est savoir réaliser des
sites statiques en HTML et CSS.

1. Fonctionnement d’un site web : Les informations

échangées sur internet sont essentiellement contenues dans
des documents appelés Site Web, reliés par des liens dits «
Liens hypertextes »
Chaque site web est identifié à l’internet par une adresse
appelée URL (Uniform Ressource Locator). Ceci étant, lorsqu’on
veut visiter un quelconque site, on tape son adresse dans le
navigateur web, comme Mozilla Firefox, Internet Explorer, Safari
ou un autre.

Les ordinateurs qui composent l’internet sont

classés en deux catégories : le client et le serveur.
 3
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

Le Client : c’est l’ordinateur de l’internaute comme nous.

Chaque client représente un visiteur d’un site web.

Le Serveur : C’est l’ordinateur puissant qui stocke et délivre

des sites web aux internautes, c’est-à-dire aux clients. La
plupart des internautes n’ont jamais vu un serveur, pourtant le
serveur est indispensable au fonctionnement du web.

2. Communication entre client et serveur

a. Cas d’un site statique : Pour ce cas, le schéma est trop

simple car il se passe en deux temps : - le client demande au
serveur à voir une page web;
- Le serveur lui répond en lui envoyant la page demandée.
b. Cas d’un site dynamique : - le client demande au serveur
de voir une page web;
- Le serveur prépare la page spécialement pour le client
(générer la page);
- Le serveur lui envoie la page qu’il vient de générer.
La page web est générée à chaque fois que le client la réclame.
C’est ce qui rend le site dynamique vivant : le contenu d’une
même page peut changer d’un instant à un autre.

3. Les langages web

Lorsqu’on crée un site web, on est appelé à

manipuler plusieurs langages. En tant que webmaster, on est
impérativement appelé à les connaitre. Certains programmes,
appelés WYSIWYG (What You See Is What You Get) permettent
d’aider la plupart des novices à créer un site statique sans
connaitre les langages informatiques qui se cachent derrière.

Parmi ces langages nous pouvons citer

Dreamweaver. D’autres langages utilisés par les webmasters
professionnels demandent d’écrire des codes. Ce sont eux qui
feront l’objet de ce cours.
 4
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

Pour un site statique : HTML et CSS (cascading style sheet)

Ces deux langages constituent une base

incontournable pour tous les webmasters.

Pour un site dynamique : Ajouter PHP et MySQL

a. PHP (Personnal Home Page); Crée en 1994 par Rasmus
Lerdorf pour les besoins des pages web personnelles (Livre d’or,
compteurs, etc) A l’époque, PHP signifiait Personnal Home Page.
C’est un langage HTML et interprété (PHP3) ou compilé (PHP4)
coté serveur. Il dérive du C et du Perl dont il reprend la syntaxe.

Il est très facile à la conception grâce à de

nombreux modules et son code source est ouvert. Comme il
supporte tous les standards du web et qu’il est gratuit, il s’est
rapidement répandu sur la toile (web).

En 1997, PHP devient un projet collectif et son

interpréteur est réécrit par Zeev Suraski et Andi Gutmans pour
donner la version 3 qui s’appelle désormais PHP : HyperText
Préprocesseur (acronyme récursif à l’exemple du système Open
Source Linux : Is Not Unix). C’est un langage que seul le serveur
comprend et qui permet de rendre votre site dynamique. Ce
PHP qui génère la page web comme on l’a dit ci-haut.

Le PHP ne prend vraiment pas de l’intérêt que s’il

est combiné à u outil tel que MySQL.

b. MySQL : C'est ce qu'on appelle un SGBD (Système de

Gestion de Base de Données). Pour faire simple, son rôle est
d'enregistrer des données de manière organisée afin de vous
aider à les retrouver facilement plus tard. C'est grâce à MySQL
que vous pourrez enregistrer la liste des membres de votre site,
les messages postés sur le forum, etc. Le langage qui permet
de communiquer avec la base de données s'appelle le SQL.
 5
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

Chapitre 2 : HTML et CSS

Vous avez entendu parler de XHTML (Extended

HyperText Make up Langage), Il s’agit d’une variante de HTML
qui se veut plus rigoureuse et qui est donc un peu plus délicate
à manipuler. Pour faire simple, le HTML est apparu le premier
en 1991, début 2000, le W3C (www consortium) a lancé le
XHTML en indiquant que ce serait l’avenir.

Mais le XHTML n’a pas percé comme on l’espérait.

Retour aux sources en 2009 : le W3C abandonne le XHTML et
décide revenir au HTML pour le faire évoluer. 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.

1. Editeur de texte

Il existe de nombreux logiciels dédiés à la création

de site web. Toutefois, on peut créer un site web avec Bloc
Note, le logiciel d’édition de texte intégré par défaut à
Windows. Il ya cependant des logiciels plus puissants et
personne n’utilise Bloc note.
Tout au long de notre cours, nous allons devoir
utiliser un éditeur le plus rependu sous Windows qui s’appelle
Notepad++ sous Linux on peut utiliser VIM et tous sont
freeware(Gratuit),

2. Les navigateurs

C’est un programme qui nous permet de voir le site

web. Son rôle est de lire le Code HTML et CSS en vue de nous
afficher le résultat visuel à l’écran. Si votre code CSS dit que les
titres sont en rouges, alors le navigateur les affichera en rouge.
Les différents navigateurs sont : Google chrome, Mozilla Fire
fox, Internet Explorer, etc.
 6
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

3. Comment programmer en HTML?

Etant donné que tous les logiciels sont disponibles,

il est question d’avoir un éditeur de texte comme bloc note ou
Note pad++ et plusieurs navigateurs pour le test, après le
lancement de l’éditeur de texte, on l’enregistre comme dans
tous les programmes, sous l’extension .html.
Ex. [Link], [Link]…

Ce nouveau dossier doit être créé dans mes

documents. Lorsqu’on essaie de saisir un texte, on se rend
compte qu’il s’affiche sur une même ligne, d’où, il ne suffit pas
de taper simplement le texte, mais il faut écrire ce qu’on
appelle « des balises » qui donneront des instructions à
l’ordinateur comme « aller à la ligne », « afficher une image », «
mettez en gras » …
4. Les balises et leurs attributs
4.1. Les balises

En HTML, on utilise des balises en vue de donner

des instructions à l’ordinateur. Les balises sont entourées des
chevrons, c’est-à-dire des symboles < et > et voilà sa
présentation : <balise>. 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 du
texte » etc.

On distingue deux types des balises : Les balises en

paires et la balise orpheline.

a. Les balises en paires : Elles s’ouvrent au début du texte et

se ferment plus loin.

Voici à quoi elles ressemblent :

<Titre> ceci est un titre </Titre> : ce qui signifie qu’on a une
balise ouvrante et une balise fermante. Dans ce cas,
l’ordinateur comprend que tout ce qui est écrit entre ces balises
constitue un titre.
 7
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

b. La balise orpheline : Elle sert le plus souvent à insérer un

élément à un endroit précis, exemple une image. La
détermination du début et de la fin de l’image n’est pas
nécessaire, c’est juste dire à la machine d’insérer une image.
Cette balise s’écrit de la manière suivante : <image/>. Elle n’a
pas d’ouverture ni moins de fermeture.

4.2. Les attributs : Ce sont des options des balises. Ils

viennent les compléter pour donner des informations
supplémentaires. L’attribut se place toujours après le nom de la
balise ouvrante et a plus souvent une valeur.

Syntaxe :< balise attribut= « valeur »>

ex1. <image nom= « [Link] » /> : ce qui signifie, on indique

le nom de l’image à afficher et l‘ordinateur comprend qu’il doit
afficher l’image contenue dans le fichier [Link].

ex2. <Citation auteur= « Neil Armstrong » date = « 21/7/1969

»>
C’est un petit pas pour l’homme, mais un bon de géant pour
l’humanité
</Citation>

Ceci veut signifier que la citation est de Neil

Armstrong et qu’elle date du 21/7/1969.

NB. Les vraies balises ont des noms en anglais.

5. Structure de base d’une page HTML

Voici la structure du code correspondant à la base
d’une page web en HTML5 :
<! DOCTYPE html>
<html>
<head>
<meta charset= « utf-8/>
<title> Titre </titre>
</head>
<body>
</body>
</html>
 8
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

Vous noterez que les balises se ferment dans le

sens inverse de leur ouverture.
Ex : <html><body></body></html> : correct, mais
<html><body></html></body> est incorrect.

Rôles des différentes balises

 Le doctype : Elle indispensable car c’est elle qui indique qu’il

s’agit d’une page web html. Elle commence par un point
d’exclamation et n’est pas comme les autres.

 La balise < html> : Elle est la balise principale du code et

elle englobe tout le contenu de votre page. Comme vous
pouvez le constater, la balise fermante est à la fin du code.

 L’en-tête < head> et le corps <body> : Une page web

est constitué de deux parties :

a. L’en-tête< head> : Elle 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.

b. Le corps <body> : C’est là que se trouve la partie

principale de la page. Tout ce que nous écrivons ici sera affiché
à l’écran. C’est à l’intérieur du corps que nous écrirons la
majeure partie de notre code.

 Le titre principal de la page : <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).
 9
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

Le titre ne s’affiche pas dans la page mais en haut

de celle-ci (souvent dans l’onglet du navigateur). Il faut savoir
que le titre apparait aussi dans les résultats de recherche,
comme sur Google, c’est pourquoi il faut toujours cultiver cet
art de les écrire.

 L’encodage charset :< meta charset = « utf-8 »> : Il

détermine comment les caractères spéciaux vont s’afficher
(accent, idéogrammes chinois et japonais, caractères arabes,
etc.)

NB. Il y a d’autres techniques d’encodage entre autres : iso-

8859-1, oem775, windows-1255… mais utf-8 qui est préféré
permet d’afficher sans problème tous les symboles de toutes
les langues de notre planète.

Il faut que votre fichier soit bien enregistré en utf-8

dès le début. Sous linux, il est par défaut, mais sous Windows, il
faut il faut le dire au logiciel.

Avec l’éditeur Notepad++, allez dans le menue

Encodage, encoder en utf-8 sans BOM afin que le fichier soit
enregistré dès le début.

Ceci ne s’applique qu’au fichier actuellement

ouvert. Pour ne pas le faire pour chaque nouveau fichier, allez
dans le menu préférence, onglet nouveau document/dossier,
sélectionnez utf-8san BOM dans la liste qui s’affiche.

Les commentaires : En HTML les commentaires sont les

textes qui servent de memo. Ils ne sont ni affichés ni lus par
l’ordinateur et ne peuvent rien changer à l’affichage de la page.

Les commentaires permettent de rappeler

comment fonctionne le site.

Formule d’insertion d’un commentaire : < !-- ceci

est un commentaire -->, il peut se mettre où on veut.

Chapitre 3. OGANISER SON TEXTE

 10
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

Il sied de signaler que ce chapitre s’inscrit dans le

cadre de :
 Comment rédiger des paragraphes;
 Comment structurer sa page avec des titres;
 Comment donner de l’importance à certains mots de son
texte;
 Comment organiser les informations sous forme de listes.

3.1 Les paragraphes

HTML propose la balise <p></p> pour délimiter le

paragraphe.

Formalisme : <p> Bonjour et bienvenu dans notre

site! </p>

Comme annoncer ci-haut, le contenu du site web

s’écrit entre la balise <body>….</body>, alors notre
paragraphe sera mis entre ces deux balises.

Ex.

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset= « utf-8 »/>
5 <title>Paragraphe</title>
6 </head>
7 <body>
8 <p> Bonjour et bienvenu dans notre site! </p>
9 </body>
10 </html>

3.2 Saut de ligne

La touche Entrée ne sert à rien, en effet, si l’on veut

aller à la ligne dans un paragraphe et non pas sauter une ligne,
html prévoit la balise orpheline <br/> qui se place
obligatoirement à l’intérieur d’un paragraphe.
Ex. NB Toujours avec l’en-tête html que vous connaissez.
 11
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

1 <body>
2 <p> Bonjour et bien venu dans notre site ! <br/>
3 Ceci est notre première expérience alors soyez indulgent
envers nous, nous apprenons
4 lentement comment cela marche. </p>
5 <p> Pour l’instant, c’est un peu difficile, mais revenez dans
deux, trois jours, nous
6 aurons appris un peu plus de chose, et vous serez surpris
</p>
7 </body>

3.3 Le titre

Plusieurs paragraphes qui étoffent le contenu d’une

page web ne permettent pas aux visiteurs de se repérer, d’où la
notion de titre devient utile.

Html prévoit six niveaux de titres différents :

- <h1></h1> : Titre très important,
- <h2></h2> : Titre important,
- <h3></h3> : Titre un peu moins important,
- <h4></h4> : Titre encore moins important,
- <h5></h5> : Titre pas important,
- <h6></h6> : Titre pas important du tout.

N.B : Ce n’est pas à confondre avec la balise <titre> qui affiche

le titre de la page dans la balise de titre de navigateur, alors
que <h1> et ses compagnies servent à créer des titres qui
seront affichés dans la page web.

Dans la pratique : h1, h2, h3 sont plus utilisés et

très rarement les autres.

Ex. Au choix avec le concours des étudiants.

3.4. La mise en valeur

 12
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

On voudrait bien faire ressortir certains mots plus

importants que d’autres au sein des paragraphes. Html propose
différents moyens de mettre en valeur des mots d’une page par
usage des balises suivantes :<strong>…..</strong> qui
specifie « fort »ou « important » et le texte s’affiche en gras,
<em>…</em> : pour afficher les mots en italique, <mark>…
</mark> : pour souligner un mot.

N.B : Il n’est pas question de la mise en forme mais plutôt

indiquer le sens du texte, car la mise en forme sera gérée par
CSS.

3.5. Les listes

Deux sortes de listes sont prise en compte : liste

non ordonnée ou liste en puce et la liste ordonnée.

Ainsi, pour la liste non ordonnée, on utilise la

balise :<ul>…</ul> et pour une liste ordonnée, on utilise la
balise :<ol>…</ol>. A l’intérieur de ces deux balises, on
introduit les éléments de la liste avec la balise <li>… </li> pour
chaque item (élément).

Ex : <body>
<h1> Ma journée</h1>
<ul>
<li> Je me lève</li>
<li> Je mange et je bois</li>
<li> Je retourne me coucher</li>
</ul>
</body>

Pour que cette liste devienne ordonnée, il suffit

seulement de changer <ul> par <ol> et
</ul> par </ol> et les éléments de la liste ne connaitront
aucune modification.
NB. : Il convient de signaler qu’il y a lieu d’imbriquer une liste
dans une liste quelle que soit sa nature, il importe seulement de
respecter l’ordre d’ouverture et fermeture de vos balises.
 13
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

Ex : au choix avec le concours des étudiants.

3.6. Création des liens

Comme nous le savons bien, un site web est

composé de plusieurs pages. Comment aller d’une page vers
une autre sans fermer la première?
On se sert de liens dits « Pardi ».
On appelle lien, un texte sur lequel on peut cliquer
pour se rendre sur une autre page. Le lien peut exister entre
deux pages d’un même site mais aussi entre deux sites.

a. Lien vers une autre page de son site :

Etant donné que nous travaillons encore sur nos

ordinateurs et nous n’avons pas d’adresse web qui commence
par [Link] cela ne va pas nous empêcher de travailler.

Pour deux pages d’un même site, par exemple :

[Link] et [Link], la balise suivante nous permet de
créer le lien :

<body>
<p> Bonjour. Souhaitez-vous visiter <a href= « [Link] » la
page 2 de notre site</a>?
</p>
</body>

Ce code est écrit dans la [Link]

Dans la [Link], on écrit le code suivant :
<h1> Bienvenu dans la page2! </h1>

b. Un lien vers un autre site :

Il est facile de connaitre les liens sur une page, ils

sont écrit d’une façon différente (par défaut, en bleu et
 14
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

soulignés) et un curseur en forme de main apparait lorsqu’on

pointe dessus. La balise utilisée est <a> tout en ajoutant
l’attribut href pour indiquer vers quelle page le lien doit
conduire.

Ex. ce code envoi vers le site de zero qui pour adresse :

[Link] :

<body>
<p> Bonjour, voulez-vous visiter le <a href= [Link]
[Link]>site du zéro</a>? <br/> c’est un bon site pour le
débutant </p>
</body>.

Notons que lorsqu’on veut établir un lien vers un

autre site, il suffit de copier son adresse (on parle de l’URL) en
[Link]

Il convient de noter aussi que certains sites

commencent par : https:// ou ftp:// et on les appelle les sites
sécurisés. Ici, il s’agit de lien relatif.

c. Un lien vers deux dossiers différents :

Imaginons que [Link] se trouve dans un sous

dossier nommé « Contenu », le formalisme de lien se présente
comme suit :
<a href= « contenu/[Link] »>.

d. Un lien vers une ancre :

Une ancre un est élément du langage HTML servant

à définir un lien hypertexte.

Lorsqu’elle est trop longue. D’où, on peut créer un

lien amenant plus bas dans la même page.

Pour créer une ancre, on se sert de l’attribut « id »

à la balise qui servira de repère (n’importe laquelle).
Ex : <h2 id= « mon_ancre »> Titre </h2> <! —on a créé une
ancre-->
 15
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

Après avoir créé une ancre, on passe à la création

d’un lien tout en précédant le nom de l’ancre par le signe dièse
#:<a href= « #mon_ancre »> allez vers l’ancre</a>

[Link]
[Link]
Pages
Contenu
Même dossier
Sous dossier
Dossier parent

Ex :<body>
<h1>Ma grande page</h1>
<p>Allez directement à la partie traitant de<br/><a href= «
#cuisine »>la cuisine</a><br/><a href= « #arc »> le tir à
l’arc</a>
</p>
<h2 id= « cuisine »> la cuisine</h2>
<p>…(bcp de textes)…</p>
<h2 id= « arc » > le tir à l’arc </h2>
<p>…(bcp de textes)…</p>.

NB : S’il n’y a aucune réaction ce qu’il n’y a pas assez de

textes, d’où, on peut ajouter du n’importe quoi ou réduire la
fenêtre du navigateur pour apparaitre les barres de défilement
sur les côtés.

e. Cas pratiques d’utilisation des liens

- Un lien qui affiche une infobulle (élément d’interface

graphique) L’attribut utilisé est « Title »
Formalisme :
<p> Bonjour, souhaitez-vous visiter le <a href =«
[Link] du [Link] »
title= « Réservé aux débutants »> site du zéro</a>
</p>
Cette bulle sert à informer le visiteur avant même
de cliquer sur le lien.
 16
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

- Lien qui ouvre une nouvelle fenêtre :

Il est possible de forcer l’ouverture d’une nouvelle fenêtre. Pour
cela, on ajoute l’attribut « Target »

Ex. <p>…………..<a href= [Link] du [Link] target= «

_blank »> site du zero</a>.

NB. : Le navigateur lui-même décidera s’il veut ouvrir le lien

dans une nouvelle fenêtre, il fera Maj+clic sur le lien et sur un
nouvel onglet, il fera CTRL+clic.

- Lien pour envoyer un e-mail

Si vous voulez que vos visiteurs puissent vous

envoyez des e-mails, vous pouvez utiliser le lien « mail to ». La
balise ne change pas, mais la valeur de l’attribut href sera
modifié comme ceci : <a href= « mail to » : votre adresse
svp>Envoyer-moi un e-mail!</a>

- Un lien pour télécharger un fichier :

Beaucoup d’entre vous se demandent comment

cela se passe pour le téléchargement d’un fichier…En fait, il
faut procéder exactement comme si vous faisiez un lien vers
une page web, mais en indiquant cette fois le nom du fichier à
télécharger.
Par exemple supposons que vous vouliez télécharger mon
[Link]. Placez simplement ce fichier dans le même dossier
que votre page web(ou dans un sous dossier) et faites un lien
vers ce fichier :

<p><a href= « [Link] »>Télécharger le

fichier</a></p>.
C’est tout! Le navigateur voyant qu’il ne s’agit pas d’une page
web à afficher, va lancer la procédure de téléchargement
lorsqu’on cliquera sur le lien.

- Insertion d’une image :

 17
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

La balise qui nous permet d’insérer une image est

la balise<img/>.Elle est une balise dutype orpheline (comme
<br/>). Ce qui veut dire nous voulons insérer une image à
endroit précis et comme si on avait besoin de délimiter une
portion de texte.
Cette balise est obligatoirement accompagnée de
deux attributs :
- Src : il permet d’indiquer où se trouve l’image que l’on veut
insérer.
Vous pouvez soit mettre un chemin absolu (ex :
[Link] soit un chemin en relatif (ce
qu’on fait le plus souvent).Ainsi si votre image est dans un sous
dossier images, vous devrez taper : src= « images/[Link] »

- Alt : Cela signifie texte alternatif. On doit toujours indiquer un

texte alternatif à l’image, c’est `dire un court texte qui décrit ce
que contient l’image. Ce texte sera affiché à la place de l’image
si celle-ci ne peut pas être téléchargée (cela arrive), ou dans les
navigateurs de personnes handicapées (non voyant) qui ne
peuvent pas l’image.

Ce la aide aussi les robots des moteurs de

recherche pour les recherches des images. Pour la fleur, on
mettrait par exemple :

alt= « une fleur ». Les images doivent se trouver

obligatoirement à l’intérieur d’un paragraphe (<p></p>)

Voici un exemple :
<p> Voici une photo que j’ai prise lors de mes dernières
vacances à la montagne :<br/>
<img src = « images/[Link] » alt= « Photo de montagne
»/>
</p>.
f. Les tableaux

La première balise à connaitre

est<table></table>, c’est cette balise qui indique le début et
la fin du tableau.
 18
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

Etant donné que c’est une balise du type bloc, elle

ne se place jamais dans un paragraphe.

Exemple :
<p> ceci est un paragraphe avant le tableau</p>
<table>
<!—Ici on écrit le contenu du tableau-- >
</table>
<p>Ceci est un paragraphe après le tableau. </p>

Pour commencer en douceur, voici deux nouvelles

balises très importantes :
- <tr></tr> : Indique le début et la fin d’une ligne du tableau;
- <td></td> : indique le début et la fin du contenu d’une
cellule.
En html, le tableau se construit ligne par ligne. Dans chaque
ligne (tr), on indique le contenu des différentes cellules (td).
Schématiquement, un tableau se construit comme à la figure
suivante :

Nom Age Pays

Jotham 4ans RDC
Ocheing 45 ans Kenya
Michel 26 ans Burundi
Tr : ligne Td : Cellules

Exemple : Quel est le code html nous permettant d’écrire le

tableau ci-haut?

Nous donnerons le code avec le concours des étudiants.

NB. Si nous exécutons ce code, le tableau n’aura pas de

bordure et donc pour y ajouter une bordure doit être définie soit
dans Html , soit dans CSS ( c’est plus préférable) < table border
= « 2 »> par exemple car elle peut prendre :1,2,3 etc. selon la
grandeur de la bordure que vous voulez.
Titre du tableau :
 19
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

Normalement, tout tableau doit avoir un titre qui

permet de renseigner rapidement le contenu du tableau. Pour y
arriver, on se sert de la balise <caption></caption>

Ex :
<table border= « 2 »>
<caption> La liste de étudiants de L1 IGE</caption>
<tr>
<th>Nom</>
<th>Postnom</th>
<th>Sexe</th>
</tr>
………
</table>

Les données seront données par les étudiants

Créer un formulaire

Lorsqu'il vous prend subitement l'envie d'insérer un

formulaire dans votre page HTML, vous devez obligatoirement
créer une balise <form></form>. C'est la balise principale du
formulaire, elle permet d'en indiquer le début et la fin.

Code : HTML
<p>Texte avant le formulaire</p>
<form><p>Texte à l'intérieur du formulaire</p></form>
<p>Texte après le formulaire</p>
Notez qu'il faut obligatoirement mettre des balises de type
block (comme <p></p>) à l'intérieur de votre formulaire si
vous avez besoin d'écrire du texte dedans.

Donc ça, c'était la structure de base. Maintenant

restez attentifs, parce que ce que j'ai à vous dire n'est pas
évident vu qu'on est à la limite du HTML.

Il faut savoir qu'un formulaire est fait pour être

envoyé. On va prendre un exemple pour que les choses soient
claires.
 20
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

Supposons que votre visiteur vienne de taper un

commentaire dans votre formulaire, Ce message doit être
envoyé pour que vous puissiez le recevoir (logique non ?), et
afin que vous sachiez ce que le visiteur pense de votre site.

Eh bien c'est là le problème, ou plutôt les

problèmes que l'on va se poser :

􀀀 Problème n°1 : comment envoyer le texte entré par le visiteur

? Par quel moyen ?

􀀀 Problème n°2 : une fois que les données ont été envoyées,
comment les traiter ?

Souhaitez-vous recevoir le message automatiquement par mail,

ou préférez-vous qu'un programme se charge de l'enregistrer
quelque part, puis de l'afficher sur une page visible par tout le
monde ? Cela revient d'ailleurs à faire un livre d'or pour votre
site si vous avez bien suivi.

Vous devez indiquer 2 attributs à la balise <form>

afin de donner les réponses à ces 2 problèmes :
1. method : cet attribut indique par quel moyen les données
vont être envoyées
(problème n°1). Il existe 2 moyens pour envoyer des données
sur le web :
- method="get" : c'est une méthode en général assez peu
adaptée, car elle est limitée à 255 caractères. La particularité
vient du fait que les informations seront envoyées dans
l'adresse de la page ([Link] mais ce détail ne nous intéresse
pas vraiment pour le moment.
- method="post" : c'est la méthode la plus utilisée pour les
formulaires car on peut rentrer un grand nombre d'informations
grâce à elle.
2. action : c'est l'adresse de la page ou du programme qui va
traiter les informations (problème n°2).
Cette page se chargera de vous envoyer un mail
avec le message si c'est ce que vous voulez, ou bien
 21
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

d'enregistrer le message avec tous les autres dans une base de

données.
Cela ne peut pas se faire en HTML / CSS, on utilisera
en général un autre langage dont vous avez peut-être entendu
parler : le PHP. On aura l'occasion d'y revenir par la suite, ne
vous en faites pas.

On va donc maintenant compléter la balise <form>

avec les 2 attributs qu'on vient de voir.

Pour method, vous l'aurez deviné je vais mettre la

valeur "post". Pour action, je vais taper le nom d'une page
spéciale en PHP ("[Link]"). C'est cette page qui sera
appelée lorsque le visiteur cliquera sur le bouton "Envoyer le
formulaire".

Code : HTML
<p>Texte avant le formulaire</p>
<form method="post" action="[Link]"><p>Texte à
l'intérieur du formulaire</p></form>
<p>Texte après le formulaire</p>

Pour le moment, on ne sait pas ce qui se passe à

l'intérieur de la page "[Link]" : je vous demande de me
faire confiance et d'imaginer que cette page existe et
fonctionne. Nous verrons par la suite comment cette page PHP
fait pour analyser les données du formulaire, mais ce n'est pas
notre priorité.
Notre priorité là, c'est de voir comment en HTML /
CSS on fait pour insérer des zones de texte, des boutons et des
cases à cocher dans votre page web. C'est ce qu'on va
apprendre maintenant.

Nous allons voir quelles sont les balises XHTML qui

nous permettent d’entrer du texte dans un formulaire. Pour
commencer, il faut savoir qu'il y a 2 zones de texte différentes :
1. La zone de texte à une ligne : comme son nom l'indique, on
ne peut écrire qu'une seule ligne à l'intérieur : p. Elle sert pour
rentrer des textes courts, comme par exemple :
 22
Ass Patrice NGONGA DIOWO, G2 INFO-FUS, 2020-2021. Notes du cours de HTML

"Entrez votre pseudo"

2. La zone de texte multi ligne : cette zone de texte permet
d'écrire une quantité importante de texte sur plusieurs lignes,
comme par exemple : "Faites une dissertation sur l'utilité du
HTML dans le développement des pays d'Asie du Sud-Est".