1

Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

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
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
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

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

Ce qui fait le 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 un 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
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

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
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

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
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

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
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

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
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

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
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

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
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

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.
 10
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

Chapitre 3. OGANISER SON TEXTE

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.
 11
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

Ex. NB Toujours avec l’en-tête html que vous connaissez.

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.

 12
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

3.4. La mise en valeur

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.
 13
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

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.

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>
 14
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

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 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.
 15
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

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-
->
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>
 16
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

Cette bulle sert à informer le visiteur avant même de

cliquer sur le lien.

- 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.
 17
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

- Insertion d’une image :

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
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

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
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

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
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

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 d'enregistrer le
message avec tous les autres dans une base de données.
 21
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

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 :
"Entrez votre pseudo"
 22
Notes de cours de programmation web, destinées aux étudiants de L3 LMD INFO/UNILOD

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".