Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

DESCRIPTEUR
I. Introduction
1.1. Objectif du cours
L’apprenant ayant suivi l’unité d’enseignement web doit être capable de :
- Se familiariser avec les termes liés à la programmation web
- Programmer ou concevoir sa première page web à l’aide du langage HTML
(Hyper text Markup Language)

CHAPITRE. I : INTRODUCTION A LA PROGRAMMATION WEB

I.1. Programmeur

I.2. Programme informatique

I.3. Langage de programmation Informatique

I.4. Editeur de code

I.5. Navigateur

I.6. Hébergeur de site

I.7. Webmaster

I.8. Balise

CHAPITRE. II. LA PROGRAMMATION WEB (HTML)

II.1. Définition
II.2. Historique (but du HTML)
II.3. Balise et ses attributs de balises
II.4. Structure de la page (hyper text Markup language)
II.4.1. L’entête de la page
II.4.2. Le corps de la page
II.4.2.1. Paragraphe
II.4.2.2. Mise en forme de texte
II.4.2.3. Niveau des titres
II.4.2.4. Tableau

1
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

II.4.2.5. Listes
II.4.2.6. Les images
II.4.2.7. Le formulaire
II.4.2.8. Lien hypertexte
II.5. Index des balises HTML
II.6. Index des attributs HTML
II.7. Le CSS (cascading style cheets)

2
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

CHAPITRE. I : INTRODUCTION A LA PROGRAMMATION WEB

I.1. Programmeur

Un programmeur est un informaticien qui réalise des logiciels (programme) et met

en œuvre à l’aide d’un langage de programmation. Un programmeur
(développeur) est un spécialiste chargé à la préparation de la solution de
problèmes sur ordinateur. Il est chargé à l’écriture des codes sources en utilisant
un langage de programmation. De nos jours, on parle plus des développeurs que
des programmeurs. Un programmeur, développeur est un informaticien qui réalise
du logiciel en créant des algorithmes et en le mettant en œuvre dans un langage
de programmation. La notion de développement inclut :

 Un travail d’équipe : les projets sont en collaboration entre plusieurs

développeurs sous la responsabilité d'un chef de projet, qui traite chacun une
partie du programme ;
 La conception (design) : à partir d'un cahier de charges, définir les
spécifications techniques ;
 Les tests qui servent à détecter les non conformités et les erreurs (bogues) ;
 Transformé en code compréhensible par une machine virtuelle, donc compilé
aussi ou être exécuté tel que par un interpréteur. Le code peut être public ou
privé (voir le logiciel libre et logiciel propriétaire). On peut classer les normes
de rédaction du code source en plusieurs sous catégories :
- Règle de nommage : elles définissent comment donner un nom explicite et
facile à retenir pour les éléments du langage utilisé, par la spécification
d'espaces de nommage ;
- Présentation et formatage des sources : comment documenter les sources (par
exemple des commentaires ou des outils d’extraction de documentation
logiciels) ;
- Normes syntaxiques : comment éviter les structures syntaxiques complexes
réduisent la faculté de compréhension du code et accroissent les risques de
dysfonctionnement. Le code s’écrit en utilisant d'une par un langage de
programmation et d'autre part une langue humaine (Français, Anglais,
Allemand) pour les commentaires. Plusieurs problématiques concernent la
langue : la langes utilisée dans les spécifications et conception, la langue
utilisée dans les commentaires, la langue utilisée lors de l’exécution dans
l'interface homme machine (interface utilisateur), langue utilisée pour
nommer les concepts (identificateurs), la langue dans les bibliothèques
logicielles utilisées ;
3
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

- La maintenance : la correction des erreurs après la sortie du logiciel et

l’amélioration pour faire évoluer le produit.
I.2. Programme informatique

Un programme informatique et est une liste d'ordres indiquant à un ordinateur ce

qu'il doit faire. Il se présente sous la forme d'une ou plusieurs séquences
d'instructions, comportant souvent des données de base, devant être exécutées
dans un certain ordre par un processeur ou par processus informatique (cas des
systèmes multitâches). Un ordinateur sans programme ne fait absolument rien, il
attend des instructions. En fait, la capacité à suivre un programme enregistré sert
même souvent, d'un point de vue historique, à distinguer un ordinateur d'une
simple machine à calculer. À l'origine d'un programme, il y a un code source écrit
par un programmeur compréhensible par ledit programmeur. Selon le langage
utilisé, ce code est ensuite soit :

 Traduit avec un jeu d'instructions spécifique à un processeur par

un compilateur, ensuite le programme obtenu peut alors être exécuté
directement par l'ordinateur.
 Ou bien est pris en charge par un interpréteur (autre programme), qui décode
à la volée les instructions du langage évolué en instructions spécifiques au
processeur et qui les lui transmet directement pour exécution.

Parfois le langage de programmation se réduit à un ensemble de symboles

correspondant aux instructions en code machine. C'est le langage assembleur et,
dans ce cas, un programme appelé assembleur est utilisé pour faire la traduction
en langage machine. Le terme " programme informatique " est souvent
improprement utilisé comme synonyme de logiciel, les logiciels actuels étant
souvent composés de plusieurs programmes. Les logiciels incluent souvent, en
plus, des fichiers de ressources contenant des données de toutes sortes, celles-ci
ne font pas à proprement parler partie du programme. Par exemple, Microsoft
Internet Explorer, Mozilla Firefox, etc. sont des logiciels plutôt que
des programmes, car il sont le fruit de la concaténation de multiples programmes
exécutant différentes actions et fonctions.

Le code source (ou les sources) est un ensemble d'instructions écrites dans un
langage de programmation informatique de haut niveau, compréhensible par un
être humain entraîné, permettant d'obtenir un programme pour un ordinateur.

4
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

Les systèmes d'exploitation ne peuvent pas directement exploiter le code source ;

ils ne peuvent que lancer des exécutables. Le code source doit donc être :

 Transformé en code compréhensible par la machine par l'opération de

compilation ;
 Transformé en code compréhensible par une machine virtuelle, donc compilé
aussi ou être exécuté tel quel par un interpréteur.
I.3. Langage de programmation Informatique

Un langage de programmation est une notation conventionnelle destinée à

formuler des algorithmes et produire des programmes informatiques qui les
appliquent. Un langage de programmation offre un cadre pour élaborer des
algorithmes et exprimer des diagrammes de flux. Il permet en particulier de
décrire les structures des données qui seront manipulées par l'appareil
informatique et quelles seront les manipulations.

1.3.1. Brève historique de la programmation

La première machine programmable c’est-à-dire machine dont les possibilités

changent quand on modifie son programme est probablement le « Métier à tisser
» de Jacquard, qui a été réalisé en 1801. La machine utilisait une suite de cartons
mettons perforés. Les trous indiquaient le motif que le métier suivait pour réaliser
un tissage, avec des cartes, le métier produisait des tissages différents. Cette
innovation a été ensuite améliorée par Herman Hollerith de l'IBM pour le
développement de cette carte perforée. Les premiers programmes d'ordinateurs
étaient réalisés ave u. Fer à souder et un grand nombre de tube à vide. Les
programmes devenant presque impossible, par ce qu’une seule erreur rendait le
programme entier inutilisable avec les progrès de support de données, il devint
possible de changer le programme à partir de cartes perforées, contenant de la liste
des instructions en code binaire spécifique à un type d'ordinateur particulier. La
puissance des ordinateurs augmentant, on les utilisa pour faire les programmes,
les programmeurs préférant rédiger du texte plutôt que des suites de 0 et de 1, à
charge pour ordinateur d’en faire la traduction lui-même. Avec le temps, de
nouveaux langages de programmation si t apparu, faisant de plus d’abstraction
du matériel sur lequel devraient tourner les programmes. Ceci apporte plusieurs
facteurs de gains : ces langages sont plus faciles à apprendre,
un programmeur peut produire du code plus rapidement, et les programmes
produits peuvent tourner sur différents types de machines.

5
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

1.3.1. Phases de la programmation

1. Conception
La phase de conception définit le but du programme. Si on fait une rapide analyse
fonctionnelle d'un programme, on détermine essentiellement les données qu'il va
traiter (données d'entrée), la méthode employée (appelée l'algorithme), et le
résultat (données de sortie). Les données d'entrée et de sortie peuvent être de
nature très diverse. On peut décrire la méthode employée pour accomplir le but
d'un programme à l'aide d'un algorithme. La programmation procédurale et
fonctionnelle est basée sur l'algorithmique. On retrouve en général les mêmes
fonctionnalités de base.

2. Implémentation
Une fois l'algorithme défini, l'étape suivante est de coder le programme. Le
codage dépend de l'architecture sur laquelle va s'exécuter le programme,
de compromis temps-mémoire, et d'autres contraintes. Ces contraintes vont
déterminer quel langage de programmation utiliser pour « convertir » l'algorithme
en code source.

3. Transformation du code source

Le code source n'est (presque) jamais utilisable tel quel. Il est généralement écrit
dans un langage "de haut niveau", compréhensible pour l'homme, mais pas pour
la machine.

4. Compilation
Certains langages sont ce qu'on appelle des langages compilés. En toute
généralité, la compilation est l'opération qui consiste à transformer un langage
source en un langage cible. Dans le cas d'un programme, le compilateur va
transformer tout le texte représentant le code source du programme, en code
compréhensible pour la machine, appelé code machine.
Dans le cas de langages dits compilés, ce qui est exécuté est le résultat de la
compilation. Une fois effectuée, l'exécutable obtenu peut être utilisé sans le code
source. Il faut également noter que le résultat de la compilation n'est pas forcément
du code machine correspondant à la machine réelle, mais peut être du code
compris par une machine virtuelle (c'est-à-dire un programme simulant une
machine), auquel cas on parlera de byte code. C'est par exemple le cas en Java.
L'avantage est que, de cette façon, un programme peut fonctionner sur n'importe
quelle machine réelle, du moment que la machine virtuelle existe pour celle-ci.
6
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

Dans le cas d'une requête SQL, la requête est compilée en une expression utilisant
les opérateurs de l'algèbre relationnelle. C'est cette expression qui est évaluée par
le système de gestion de bases de données.
5. Interprétation
D'autres langages ne nécessitent pas de phase spéciale de compilation. La
méthode employée pour exécuter le programme est alors différente. La phase de
compilation est la plupart du temps incluse dans celle d’exécution. On dit de ce
programme qu'il interprète le code source. Par exemple, Python ou Perl sont des
langages interprétés.

Avantages et inconvénients

Les avantages généralement retenus pour l'utilisation de langages « compilés »,

est qu'ils sont plus rapides à l'exécution que des langages interprétés, car
l'interprète doit être lancé à chaque exécution du programme, ce qui mobilise
systématiquement les ressources.

Traditionnellement, les langages interprétés offrent en revanche une certaine

portabilité (la capacité à utiliser le code source sur différentes plates-formes), ainsi
qu'une facilité pour l'écriture du code. En effet, il n'est pas nécessaire de passer
par la phase de compilation pour tester le code source. Il n'est pas non plus
nécessaire de disposer d'un autre programme afin d’ôter les bugs du programme,
c'est l’interpréteur qui permet d'afficher directement le contenu des variables du
programme.
6. Test du programme
C'est l'une des étapes les plus importantes de la création d'un programme. En
principe, tout programmeur se doit de vérifier chaque partie d'un programme, de
le tester. Il existe différents types de test. On peut citer en particulier :

 Le test unitaire

 Test d’interrogation

 Test de performance

Il convient de noter qu'il est parfois possible de vérifier un programme

informatique, c'est-à-dire prouvé, de manière plus ou moins automatique, qu'il
assure certaines propriétés.

7
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

I.4. Editeur de code

Un éditeur de code source est un programme d'édition de textes spécialement

conçu pour l'édition du code source d'un programme informatique . Il peut s'agir
d'une application autonome ou intégrée à un environnement de développement
intégré (IDE) ou à un navigateur Web. Un éditeur de code source est un outil de
programmation fondamental, car le travail fondamental des programmeurs est
d'écrire et de modifier le code source. Il comporte des fonctionnalités
spécialement conçues pour simplifier et accélérer la saisie du code source, telles
que la coloration syntaxique, l'indentation, la saisie semi-automatique et la
correspondance d'accolades . Un tel éditeur fournit souvent un moyen pratique
d'exécuter un compilateur, un interpréteur, un débogueur ou tout autre
programme pertinent dans le processus de développement d'un logiciel. De
nombreux éditeurs de texte comme le Bloc-notes peuvent être utilisés pour
éditer le code source, mais s'ils n'améliorent pas, n'automatisent pas ou ne
facilitent pas l'édition de ce code, ils ne sont pas des éditeurs de code source. Un
éditeur de structure est une forme différente d'éditeur de code source où, au
lieu d'éditer du texte brut, on manipule la structure du code, généralement
l'arborescence de syntaxe abstraite. Dans ce cas, des fonctionnalités telles que
la coloration syntaxique, la validation et le formatage du code sont facilement et
efficacement implémentées à partir de l’arbre de syntaxe concret ou de l'arbre
de syntaxe abstraite, mais l'édition est souvent plus rigide que le texte de forme
libre. Un éditeur de structure nécessite également une prise en charge étendue
pour chaque langage de programmation et est donc plus difficile à étendre à de
nouveaux langages que les éditeurs de texte où la prise en charge de base ne
nécessite que la prise en charge de la coloration syntaxique ou de l'indentation.
Pour cette raison, les éditeurs de structure stricts ne sont pas populaires pour
l'édition de code source, bien que certains IDE fournissent des fonctionnalités
similaires. Il existe plusieurs éditeurs de code HTML dont nous citons :
Notepad++, WordPress, visual studio code, CoffeeCup Free Editor, Brackets,
Komodo Editor et Sublime Texte.

I.5. Navigateur

Un navigateur est un logiciel principalement gratuit qui permet de consulter les

pages Internet. À l’aide d’un navigateur Web, des textes, des images, des vidéos,
mais aussi des liens et d’autres fonctions d’un site Internet sont affichés. Le terme
8
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

anglais Browser est dérivé du verbe « to browse » et signifie regarder, feuilleter

ou naviguer. Avec l’introduction de l’hypertexte, des références à la navigation
ont été ajoutées, appelées hyperliens. Entre-temps, l’éventail des fonctionnalités
des navigateurs s’est considérablement élargi : outre les images et les vidéos, des
graphiques interactifs, des fichiers audio, des PDF et d’autres ressources peuvent
être désormais intégrés et dotés de fonctions. Lorsque vous entrez une URL dans
votre navigateur, celui-ci demande alors la page au serveur cible. Le serveur
répond en renvoyant le contenu sous forme de code HTML, d’images et d’autres
ressources. Chaque ressource est identifiée de manière unique par un URI
(Uniform Resource Identifier). À l’aide de certaines spécifications contenues dans
les fichiers HTML et CSS, le navigateur interprète tout le contenu et veille à ce
que nous puissions visualiser et utiliser le site Web comme d’habitude sur notre
écran. Le navigateur sert d’intermédiaire entre l’appareil final et le contenu du site
web.

Tous les navigateurs sont dotés d’un équipement de base comprenant les éléments
suivants :

 Barre d’adresse pour la saisie de l’URL

 Boutons pour naviguer en avant et en arrière, pour rafraîchir ou recharger et
arrêter un processus de chargement
 Bouton d’accès à la page d’accueil du navigateur Web
 Fonction de création de signets

Les autres fonctions varient d’un navigateur à l’autre ou peuvent être ajoutées
selon les besoins.

Étant donné que tous les navigateurs fonctionnent fondamentalement de la même

manière, il n’est pas vraiment possible de dire quel navigateur est le meilleur. Cela
dépend beaucoup plus de vos propres exigences et des habitudes des utilisateurs.
Parmi les navigateurs les plus répandus en France, on trouve :

 Mozilla Firefox : l’un des navigateurs Web les plus populaires en Europe.
 Microsoft Internet Explorer & Edge : fait partie intégrante des systèmes
d’exploitation Microsoft depuis Windows 95.
 Google Chrome : sur le marché depuis 2008. C’est la référence en matière de
synchronisation entre les appareils.
 Safari : le pendant d’Apple pour Internet Explorer et Edge de Microsoft
 Opera : aussi et surtout populaire pour les appareils mobiles.
9
Le monde accorde sa faveur aux esprits avertis
 Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

I.6. Hébergeur de site

Un hébergeur est une entité ayant pour vocation de mettre à disposition

des internautes des sites web conçus et gérés par des tiers.
Il donne ainsi accès à tous les internautes au contenu déposé dans leurs comptes
par les webmestres souvent via un logiciel FTP (file Transfer Protocol)ou un
gestionnaire de fichiers. La principale activité de l'hébergeur web consiste à
installer ses serveurs, à les sécuriser (par une alimentation électrique ondulée,
secourue par un groupe électrogène, une salle climatisée équipée de dispositifs
anti-incendie), à les tenir à jour en installant les mises à jour de sécurité pour éviter
les attaques malveillantes, à les réparer en cas de panne, à y installer les
technologies logicielles souhaitées par les clients ou qu'il souhaite leur offrir
(comme les langages de programmation internet et les modules supplémentaires
de ces langages).
L'hébergement Internet trouve sa justification par diverses raisons parmi
lesquelles :
 La nécessité de sécuriser le service hébergé,

 La mise à disposition par le prestataire de ressources conséquentes (bande

passante en téléchargement...),
 Le conseil et les services de support associés.

Lorsqu'un visiteur demande une page à son navigateur web, celui-ci interroge des
serveurs DNS (Domain Name Syste) pour connaître l'adresse
IP du serveur hébergeant ce site. Dès qu'il obtient la réponse, le navigateur va
interroger ce serveur et lui demander cette page. Le serveur web va alors chercher
la page sur son ou ses disques durs (s'il s'agit d'une page statique), ou la fabriquer
à l'aide d'un script (s'il s'agit d'une page dynamique), puis l'envoyer au navigateur,
qui l'affiche sur l'écran du visiteur. La plupart des offres d'hébergement sont
regroupées en grandes catégories :

 Les hébergements partagés ou mutualisés : Chaque serveur héberge plusieurs

sites, jusqu'à plusieurs milliers, et ce dans le but de mutualiser les coûts. Le
principal avantage est le prix, le principal inconvénient est que le client mutualisé
n'est pas l'administrateur du serveur, il est donc souvent tributaire du bon vouloir
de l'hébergeur s'il souhaite une technologie particulière.
Dans certaines configurations d'hébergement mutualisé, l'utilisateur peut être
administrateur d'un serveur virtuel sur lequel son site est déployé. Il continue
cependant à partager les ressources système avec les autres clients mutualisés.
10
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

 Les hébergements dédiés : Le client dispose alors de son propre serveur, et

peut en général l'administrer comme il le souhaite, ce qui est le principal
avantage de ce type d'offre. Le fournisseur du serveur reste cependant
propriétaire du serveur. Les inconvénients sont : le prix beaucoup plus élevé
que les hébergements mutualisés, et le besoin de compétences pour
administrer la machine correctement.
 L'hébergement virtuel dédié via un hyperviseur qui offre au client la souplesse
d'un dédié (le client administre sa machine à sa convenance) en lui fournissant
une machine virtuelle qui utilise une partie des ressources d'un serveur
(physique) par des techniques de virtualisation (informatique).
 Les hébergements dédiés dits « managés », avec « serveur dédié infogéré » ou
« clés en main » : Le client dispose de son propre serveur mais les techniciens
de l'hébergeur s'occupent de sa gestion système. Cette solution est parfaite si
vous n'avez aucune connaissance technique sur son administration. Il suffit de
déposer son site. Ce type d'hébergement cherche à s'adapter aux besoins.
 La colocation : L'hébergeur met, dans son centre de traitement de données, un
espace à disposition du client, de sorte qu'il puisse placer son propre serveur
à l'intérieur (La plupart du temps dans des armoires spéciales
nommées racks ou « baies »). L'hébergeur met également à disposition du
client un câble d'alimentation électrique et un câble ethernet pour qu'il puisse
alimenter et connecter son serveur à Internet. Ce système est censé coûter
moins cher, puisque la location du serveur n'est pas comprise, mais les
systèmes de sécurité et des badges dans les centres de traitement de données
peuvent coûter plus cher que la location.

I.7. Webmestre

Un webmestre, webmaster ou administrateur de site est une personne responsable

d’un site web, de sa conception à sa maintenance. Autrement dit, un professionnel
des métiers de l’internet. Le terme administrer site, désigne communément celui
qui est chargé d’un site. Il gère tout, ou une partie, des domaines de la conception
est comprise dans sa fonction. Il gère au jour le jour la technique et met à jour le
contenue du site. Il prend en charge l’analyse de la fréquentation avec des outils
de mesure d’audience. Il développe l’audience du site en l’optimisant pour
favoriser un meilleur référencement des monteurs de recherche.

11
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

I.8. Balise
La balise, tag en anglais, désigne dans le monde de l'informatique et de la
programmation une série de caractères destinée à déclencher, de façon automatique,
l'exécution d'une action par un programme informatique. À la lecture d'une balise, un
programme informatique exécute ainsi instantanément une commande spécifique.
C'est dans le langage HTML, celui qui codifie le Web, que l'on retrouve
principalement l'utilisation de balises (on parle alors de balises HTML). Celles-ci sont
utilisées pour mettre en forme du texte, structurer et hiérarchiser le contenu d'une page
Web, etc. Par exemple, un texte encadré par les balises et apparaîtra automatiquement
sur la page Web en gras, sans autre opération nécessaire que la rédaction de ces balises.
Au-delà du langage HTML, d'autres langages fonctionnent également avec un système
de balisage. C'est le cas par exemple des langages TeX et LaTeX utilisés pour
composer des documents, ou du langage XML qui pousse à l'extrême la description
sémantique d'un document.

12
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

CHAPITRE. II. LA PROGRAMMATION WEB

II.1. Introduction

Un langage de programmation est un langage informatique, permettant à un être

humain d'écrire un code source qui sera analysé par une machine, généralement
un ordinateur. Le code source subit ensuite une transformation ou une évaluation
dans une forme exploitable par la machine, ce qui permet d'obtenir un programme.
Les langages permettent souvent de faire abstraction des mécanismes de bas
niveau de la machine, de sorte que le code source représentant une solution puisse
être écrit et compris par un être humain.

II.2. Langage de programmation web (balise)

La programmation web est la programmation informatique qui permet d'éditer
des sites web. Elle permet la création d'applications, destinées à être déployées
sur Internet ou en Intranet. Ces applications web sont constituées de pages web
pouvant prendre différentes formes, telles que :
 pages « statiques » : son contenu n'est pas influencé par l'internaute qui la
demande et évolue avec une intervention manuelle sur son code source.
 pages « dynamiques » : son contenu évolue sans que le code du site web ne
soit modifié manuellement, mais par l'interaction des utilisateurs,
par génération automatique de pages ou par du calcul. C'est le cas de la très
large majorité des sites web depuis le début des années 2000.
 Pour un internaute qui fait appel à une URL, la page web correspondante,
qu'elle soit statique ou dynamique, consiste en du code « côté client »
(HTML, CSS, Java script, ...) qui est interprété par son navigateur (Google
Chrome, Firefox, ...) produisant une interface utilisateur. Ce code, qui est
renvoyé par un serveur web, peut ou non avoir été généré par du calcul « côté
serveur », via des langages de programmation particuliers, pouvant faire appel
à des bases de données, des API...
 Il existe différentes technologies et différents langages permettant de
construire des sites web par l'intermédiaire de serveurs web, que l'on peut donc
classer selon deux principes : des langages de programmation côté client, ou
côté serveur. Cette distinction est faite pour séparer les langages « côté
serveur » dont le code est exécuté sur le serveur web avant d'arriver sur le
navigateur de l'utilisateur, des langages « côté client » dont l'exécution ne
nécessite pas de calcul sur le serveur web mais, seulement après le
téléchargement de la page, une interprétation par le navigateur de l'utilisateur.

13
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

II.2.1. Programmation web côté client

Lorsqu'un visiteur demande une page en tapant une adresse ou URL, le serveur
web lui renvoie le contenu de la page demandée, le plus souvent
en HTML, Javascript ou XML.
C'est ensuite le navigateur web qui interprète le contenu retourné, en utilisant ou
non des plug-ins qui interprètent certains objets.
La programmation "côté client" (ou développement web frontal) consiste à
produire du code (HTML, CSS, Javascript, ...) qui sera interprété par un
navigateur web (ou une fenêtre, pour les logiciels de bureau ou applications
mobiles) et produira un rendu visuel : une interface utilisateur (UI), et dont
certains éléments permettront une navigation, des liens, avec les autres pages
(UX).
Initialement, c'est un langage qui permet de créer des hyperliens, à savoir des liens
d'un document à un autre ou d'un endroit d'un document à un autre endroit du
même document (identificateur de fragment).
Ce langage ne définissait au départ que la structure de la page, mais très vite se
sont rajoutées des balises (ou tags) qui s'occupaient de spécifier les
caractéristiques de la page web (hiérarchisation du contenu, attributs donnés aux
balises...).
Depuis sa version 4, le langage HTML s'accompagne des CSS qui sont des styles
se chargeant de la mise en forme et de l'animation de la page.
Le XHTML est une évolution du HTML basée sur XML.
Pour rendre une page web plus dynamique en HTML, il est possible d'y insérer
des objets, grâce aux tags <object>, <img>, <applet> ou <script> par exemple.
Portabilité : pour autant qu'on se limite aux formats de fichiers standards pour le
web (.gif, .jpg ou .jpeg et .png), les images sont sans doute un des objets les plus
multiplateforme du web : la majorité des navigateurs web savent afficher les
images.

Performance : les fichiers multimédias sont souvent lourds et donc longs à

télécharger. Ils peuvent réduire les performances (temps de chargement) de la
page web. Cependant il existe des technologies permettant la lecture en flux
(streaming).

Animation Flash : flash (de Adobe Systems - Macromedia) est un programme

qui permet de créer des animations dans un format vectoriel propriétaire
relativement léger. Le programme génère un fichier avec l'extension .fla qui est le
fichier de travail et qui sera 'compilé' en un fichier avec l'extension .swf. Swift est
un autre programme générant des fichiers swf hors de la sphère Macromedia.

14
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

Dans une page web, une animation Flash (fichier avec extension .swf) peut être
intégrée comme partie de la page (une publicité, un menu, ...) ou l'ensemble de la
page peut être en flash mais il y aura toujours un squelette HTML.

Flash permet de créer des animations de qualité, permet une certaine interaction
avec l'utilisateur grâce au langage de programmation ActionScript (dérivé
de ECMAScript comme JavaScript). Les dernières versions de Flash permettent
également l'interfaçage avec une base de données.
Adobe Flash Player sera officiellement abandonné en décembre 2020, ainsi que
son support dans les navigateurs web.
Limites du HTML
Une page web créée en HTML est totalement statique et n'offre qu'une faible
possibilité d'interaction avec le visiteur. Chaque page doit être créée au préalable
et doit être manuellement mise à jour.
Le langage HTML est multiplateforme. Tous les navigateurs web reconnaissent
le langage HTML de base, seuls certaines balises ou attributs sont propres à
certains navigateurs. Les CSS, même s'ils sont standardisés par le W3C, ne sont
pas toujours reconnus de la même manière par les différents navigateurs web.
Mise en place
Les images numériques deviennent un média très "grand public" et sont assez
aisées à implémenter dans un site web au travers de la balise img. L'intégration
de documents multimédia (son ou vidéo). Une fois le fichier son ou vidéo
produit, le placement dans la page HTML peut se faire, en HTML5, via des balises
<audio> ou <video>.

Le langage HTML a l'avantage d'être facile à mettre en place, et ne demande pas

de compétences techniques très poussées. Ses pages sont d'un traitement très léger
et rapide par le serveur.
XML (eXtended Markup Language)
Le langage de balisage XML peut également servir de base à une page web. Le
fichier XML contiendra le contenu de la page web.
Ce fichier peut être lié à un fichier XSL (Feuilles de style XML) qui mettra en
forme les données du fichier XML.
Langages de mise en forme (CSS)
Le CSS (cascading style sheets) est un langage de programmation permettant la
mise en forme d'une page web. L'HTML et le CSS sont complémentaires.

Langages de Script
La programmation côté client utilise des langages de scripts. À la différence des
langages de programmation côté serveur, ces langages ne sont pas compilés. Ils
sont interprétés par le navigateur web du visiteur.
15
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

Les langages de script sont utilisés au départ dans le cas de validation de

formulaires (champs obligatoires, petits calculs, ...) et dans la création
d'animations sur le navigateur de l'utilisateur (menus déroulants, rafraîchissement
du contenu sans rechargement de la page, …). Ils permettent toutefois aujourd'hui
de faire beaucoup plus, tel que la création de jeux vidéo (API Canvas), la création
d’environnements sonores (API Web Audio), la communication en temps réel
(API RTC), etc.

II.2.2. Programmation web côté serveur

1. Principe
Lorsqu'un visiteur demande (ou requête) le chargement d'une URL sur son
navigateur, un appel (le plus souvent via HTTP ou HTTPS) est effectué sur
le serveur web qui héberge le site correspondant. Le serveur web va ensuite
identifier le ou les scripts (écrits dans un langage « côté serveur ») correspondant
à cette URL, et demander leur exécution. L'exécution va alors résulter en un
contenu HTML, qui va ensuite être expédié en réponse au visiteur, lisible par son
navigateur.
La programmation "côté serveur" consiste donc à produire du code dont
l'exécution, du calcul et de la récupération de données externes (bases de
données, API, ...), va résulter en un contenu qui sera envoyé au client. Ce contenu
peut être du code "côté client".
.
2. Différents langages et technologies
Javascript
Il est possible de mettre en place un serveur web en utilisant le
programme [Link], exposant des URL, via notamment [Link], à un projet de
code développé en Javascript.
PHP
PHP (PHP: Hypertext Preprocessor) est un langage de script interprété côté
serveur. Le code PHP est lu par le serveur et interprété pour produire une page
HTML (ou d'autres types de fichier comme des images ou des documents PDF) à
chaque fois que la page sera demandée. Ce langage a été créé initialement dans le
cadre des logiciels Open Source. De nombreux développeurs ont ensuite profité
de l'Open Source pour développer de nombreux modules prêts à l'usage et
paramétrables à volonté. Les modules serveurs de PHP sont implémentés sur les
serveurs Apache et Unix mais PHP peut être implémenté sur d'autres plates-
formes via des CGI.
La syntaxe, relativement simple, part d'une base de C.
Frameworks notables : Symfony, Laravel
Python
Django : Framework open-source largement répandu pour construire et déployer
une application côté serveur en Python.

16
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

Ruby
Ruby on Rails : Framework open-source largement répandu pour construire et
déployer une application côté serveur en Ruby.
Java
 JSP (Java Server Pages) : Technologie développée par Sun Microsystems
dans le but de créer des pages dynamiques avec le langage Java. Les JSP
permettent d'ajouter du code Java dans la page HTML qui sera interprété par
le serveur. On peut distinguer trois ensembles d'instructions JSP :
o Les instructions de programmation permettent d’insérer des bouts de code
Java directement dans la page web, et donnent accès à une grande partie de
la bibliothèque de programmation de la version standard de Java
(composants JavaBeans, accès aux bases de données via JDBC etc.)
o Les directives qui permettent de spécifier certaines propriétés de la page,
l’inclusion du contenu d’autres fichiers et l’utilisation d’autres classes et
bibliothèques de balises personnalisées.
o Les actions permettent essentiellement d’utiliser des composants
JavaBeans existants.
o Portabilité : Très grande portabilité grâce à Java : serveurs Apache mais
aussi IIS, etc.
o Mise en place : Utilisation de Java comme langage de programmation.
o Performance : Très variable en fonction de l'implémentation utilisée.
o Utilisation : Tout type de fonctionnalités.

 Servlets : Le nom vient d'une analogie possible à faire avec les applets. Il s'agit
donc de programmes créés en Java et tournant sur le serveur web. L'exécution
du programme génère les pages web renvoyées au client.
o Langages utilisés : Java.
o Portabilité : Très grande portabilité grâce à Java : serveurs Apache mais
aussi IIS, etc.
o Mise en place : Utilisation de Java comme langage de programmation.
o Performance : Très variable en fonction de l'implémentation utilisée.
o Utilisation : Tout type de fonctionnalités.

C++
Il est possible de développer un site web « côté serveur » en C++, notamment avec
des framework tels que Wt, ou CppCMS par exemple.
Technologies Microsoft
 ASP (Active Server Pages) : Technologie développée par Microsoft à partir
de 1996 dans le but de créer des pages dynamiques. ASP permet d'ajouter du
code dans la page HTML qui sera interprété par le serveur. La

17
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

partie ADO (ActiveX Data Object) de ASP permet de se connecter à une base
de données.
o Langages utilisés : VBScript(langage par défaut) ou JScript.
o Portabilité : La technologie est implémentée sur les serveurs web de
Microsoft (IIS et PWS).
o Mise en place : Utilisation de langage de Script donc d'accès relativement
aisé (mais se complexifie vite).
o Performance : Bonne performance surtout si l'on utilise du code compilé
(dll).
o Utilisation : Tout site web dynamique peut être créé en ASP.
o Dernière version : ASP 3.0.

 [Link] : Technologie développée par Microsoft sur base

du [Link]. L'évolution est importante par rapport à ASP et les
possibilités deviennent quasi infinies. [Link] a le gros avantage, par
rapport à d'autres technologies, de bien séparer le contenu de la page web, sa
mise en forme et la programmation des aspects dynamiques (travail en Code
Behind).
o Langages utilisés : C#, [Link], [Link]... et de nombreux autres
langages partageant le Common Runtime Language du [Link].
o Portabilité : La technologie est implémentée sur les serveurs web de
Microsoft (IIS 2003).
o Mise en place : Utilisation de langage de programmation et nécessite donc
de bonnes bases en programmation mais le langage importe peu (plusieurs
langages possibles). Avec la version 2 ([Link] 2.0) et un outil de
développement comme Visual Studio, le développement d'applications
peut déjà aller très loin sans programmation : beaucoup de contrôles sont
gérés par leurs propriétés.
o Performance : Excellentes performances car tout le code est compilé (soit
précompilé, soit compiléà la volée).
o Utilisation : Tout type d'application web peut être créé avec [Link].

ColdFusion
ColdFusion est une technologie de création de pages dynamiques développée
par Macromedia. Les pages d’application sont des pages web contenant des
instructions de programmation écrite à l’aide d’un langage propriétaire, le CFML
(ColdFusion Markup Language). Le CFML est un langage simple basé sur des
balises dont la syntaxe est similaire à celles du langage HTML mais interprétées
par le serveur.

18
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

Base de données
Chacun de ces langages, pour permettre de construire des pages dont le contenu
et les données sont construits dynamiquement en fonction de l'usage des
utilisateurs ou d'autres paramètres externes, peut faire appel à une ou
plusieurs bases de données.
Il en existe de nombreuses sortes : dBase, filePro, Firebird/InterBase, FrontBase,
IBM DB2, Cloudscape, Informix, Ingres, EDBC, Enterprise Access,
Mssql, MySQL, PostgreSQL, SQLite, SQLite3, SQLSRV, Sybase.

Technologie Ajax : Communication sans rechargement entre « serveur » et

« client »
Ajax (Asynchronous JavaScript And XML) est une technologie, avec ses
avantages et inconvénients, qui combinent plusieurs éléments :
 du XHTML pour la structure de la page,
 les CSS pour la mise en forme de la page,
 du JavaScript et le DOM pour la partie dynamique,
 XML, XSLT et XML Http Request pour la manipulation des données (ou
d'autres formats de fichiers de données).

Cette technologie permet d'effectuer une requête HTTP asynchrone (en parallèle)
depuis un client au serveur web (effectuer une action, mettre à jour une
information...). Le serveur renvoie la ressource demandée, celle-ci pouvant
contenir des informations ou du code pour mettre à jour la page HTML.

19
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

CHAPITRE. II. LA PROGRAMMATION WEB (HTML)

II.1. Définition
La programmation web est le paradigme qui permet d’éditer des sites Internet en
utilisant obligatoirement un éditeur de code source et un navigateur.
II .2. Historique et but du HTML
Le HTML est né en même temps que le Web, en 1989. C'est Tim Berners-Lee
qui l'a écrit pour répondre aux besoins du système qu'il venait d'inventer avec
Robert Caillau au Cern : le World Wide Web.
Ce langage a été conçu pour fonctionner de paire avec le protocole HTTP. HTML
et HTTP constituent le coeur de l'invention de Berners-Lee : un moyen simple et
efficace d'accéder sur un réseau à des documents liés entre eux par des hyperliens.
Les documents s'enchaînent désormais les uns les autres par un simple clic de
souris : écrits en HTML, ils sont transportés jusqu'au lecteur grâce au protocole
HTTP.
Le HTML n'est cependant pas le premier langage gérant les hyperliens. En effet,
dès 1987, HyperCard permettait de "surfer" à travers des documents en utilisant
des images. Par ailleurs, on peut faire remonter aux années 40 les premiers travaux
en rapport avec les hyperliens.
Au moment où le Web a été inventé, la majorité des gens utilisaient TeX et
PostScript, et plus rarement SGML, pour écrire leurs documents. Tim Berners-
Lee réalisa en fait que ces langages ne répondaient pas tout à fait aux besoins de
son système. Il a donc inventé le HTML.
Le HTML est un langage simple, permettant de mettre en page simplement des
documents texte destinés à être affichés avant tout sur un écran. C'est la première
vocation du HTML. Le HTML n'a pas vraiment été écrit pour gérer le rendu des
documents à l'impression ; ce n'est qu'au fur et à mesure des versions du HTML
qu'on lui a apporté des possibilités supplémentaires, comme par exemple des
directives permettant de gérer le rendu audio, et c'est finalement le XML qui va
rendre le HTML quasi universel.
Contrairement au XML, dont le but est de séparer clairement contenu et contenant
(la mise en page) des documents, le HTML (complété ensuite par les feuilles de
style) met directement en forme le contenu du document. Le document texte
contient des éléments HTML qui vont diriger sa mise en page.
HTML, SGML et XML
Il est vrai que le HTML est de loin le langage balisé (utilisant des balises) le plus
connu car c'est celui qui est le plus répandu. Mais les langages balisés sont plus
anciens. Par exemple, HTML est un sous-ensemble de SGML (Standard
Generalized Markup Language). SGML est le langage balisé le plus général. De
la même façon, XML (eXtensible Markup Language) est également un sous-
ensemble de SGML. XML se répand car il permet d'écrire des documents
"universels" en séparant le contenu et le contenant. C'est une sorte de métalangage
permettant de définir d'autres balises et d'autres langages. HTML est au contraire
20
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

un langage figé dans la mesure où la signification de ses balises est définie à

l'avance. Les balises XML ne sont pas spécifiées (elles ont juste un format bien
défini), et sont par ailleurs différentes des balises HTML. Finalement, HTML et
XML n'ont pratiquement rien à voir l'un avec l'autre, et il est impossible de passer
de décrire le HTML tel qu'il est avec le XML.
Etant donné la puissance du XML et la grande popularité du HTML, la volonté
est grande pour faire en sorte que HTML puisse être décrit avec XML. Aussi, a-
t-on développé le XHTML (eXtensible HTML), le langage HTML extensible.
C'est tout simplement la réécriture du HTML mais en se conformant au standard
XML. Cela permet d'orienter les futurs travaux sur le HTML : désormais, HTML
peut être vu comme un sous-ensemble du XML, et il va bénéficier de toute la
puissance du XML, et permettre notamment la transcription de toutes ses pages
en pages parfaitement imprimables, ou calibrées pour les ordinateurs de poche.
II.3. Les balises HTML
La mise en page est gérée par ce qu'on appelle des balises, ou tags en anglais. Les
balises sont des séquences de caractères ASCII qui ont sens particulier et qui sont
sujet à interprétation par les navigateurs Web. Lorsque l'on regarde le contenu
d'une page HTML, on repère assez facilement les balises HTML : ce sont les
portions de texte semblables à celle-ci :
<B>ceci est un <A href="URI">lien</A> en gras</B>
Une balise HTML commence par un < et se termine par un >. Certaines balises
doivent être fermées (dans notre exemple, <B>...</B>), d'autres non (par exemple
<BR> qui permet de sauter une ligne). Dans les dernières versions du HTML, il
existe environ 90 balises HTML, la majorité servant à la mise en page (texte en
gras, les tableaux...), mais toutes ne sont pas dédiées à la mise en page des
documents. En effet, le HTML permet par exemple de donner des informations
sur le document lui-même (informations qui ne seront pas affichées), d'insérer des
images, des animations Flash, du code JavaScript...
II.4. Structure de la page (hyper text Markup language)
Introduction
La structure des pages HTML a évolué avec les versions du HTML. Au début, les
pages étaient bien simples, et au fur et à mesure que le HTML s'est complété, les
pages ont pris une structure certes toujours simple, mais plus subtile. Ce qui suit
va s'intéresser aux dernières recommandations HTML 4.
Point important : depuis le début, les spécifications HTML précisent qu'un
navigateur qui ne reconnaît pas une balise doit tout simplement l'ignorer (et non
pas afficher un message d'erreur). Ceci assure un minimum de compatibilité entre
les versions. Il ne faut donc pas avoir "peur" de rajouter les metas tags et la balise
<!DOCTYPE> de début (voir ci-après).

21
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

Structure élémentaire
Quel que soit la page HTML 4, la structure du code doit toujours être la même :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<P>Hello world!
</BODY>
</HTML>
Description
La page HTML classique s'articule autour de 2 parties principales : la première
ligne (!!) et le reste du document (limité par les balises <HTML>et </HTML>)
qui est lui-même découpé en 2 autres parties très importantes : l'en-tête et le corps
de page.
<!DOCTYPE...>
La première ligne (<!DOCTYPE>) dit au navigateur à quelle version de HTML
est utilisé dans ce document. Cette version est décrite de manière formelle par des
DTD (Document Type Declaration). Cette première ligne ne fait que pointer vers
un endroit où on est sûr de trouver ces descriptions (en l'occurrence, elles se
trouvent sur le serveur de la W3C).
Il y a 3 DTDs :
 HTML 4.01 Strict DTD : contient tous les éléments HTML purement
conformes aux spécifications HTML 4 et qui ne figurent pas dans la Frameset
DTD. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
 HTML 4.01 Transitional DTD : contient tous les éléments de la Strict DTD
plus ceux déclarés caducs. Cette DTD est la plus générale et permet d'utiliser
toutes les balises, y compris celles définies dans les anciennes versions de
HTML. C'est certainement la DTD la plus simple à utiliser et qui posera le
moins de problèmes. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "[Link]
 HTML 4.01 Frameset DTD : contient tous les éléments de la Transitional
DTD plus ceux permettant d'utiliser les frames. <!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"[Link] Dans tous les cas, cette balise
doit être la première. Par défaut, en cas de doute, il vaut mieux utiliser la
HTML 4.01 Transitional DTD pour les pages conventionnelles, et la HTML
4.01 Frameset DTD pour les pages décrivant des frames.

22
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

Les versions de HTML antérieures à la version 3 n'utilisaient cette première ligne.

La page HTML était alors limité à la partie définie par <HTML>...</HTML>. Il
est toujours possible d'omettre cette ligne et d'utiliser les balises de HTML 4 (les
navigateurs sont transigeants) mais dans ce cas, la page n'est plus conforme aux
spécifications de la W3C.

II.4.1. L’entête de la page

L'en-tête de la page HTML, située juste après la balise <!DOCTYPE...>, est
limitée par les balises <HEAD> et </HEAD>. Cette partie contient
principalement ce qu'on appelle des métas informations : ce sont des informations
sur les informations contenues plus loin dans la page. On y indique par exemple
l'auteur de la page, la date d'écriture, des mots-clés ou une description de la page
(utile pour le référencement dans les moteurs de recherche), mais on peut aussi y
mettre des directives HTTP qui seront utilisées lors de l'acheminement de la page.
Cette partie contient également le titre de la page, et éventuellement d'autres
éléments comme les feuilles de style ou du code JavaScript.
Cette partie est en fait une sorte de fourre-tout où on place tout ce qui n'est pas
directement du contenu à afficher.
La balise <HEAD> comme la balise <HTML> n'acceptent pas d'attributs.
II.4.2. Le corps de la page
Cette partie est limitée par les balises <BODY> et </BODY>. Elle contient le
contenu de la page HTML, c'est-à-dir ce qui doit être affiché par le navigateur. A
quelques exceptions (balises <HEAD>, <HTML> et <META> entre autres), c'est
dans cette partie que l'on utilise les balises HTML pour formater le document.
On peut toutefois y définir du code JavaScript mais ce n'est pas la meilleure place
pour le faire (certains navigateurs peuvent ne pas exécuter correctement le code).
Cette balise, dans les versions précédentes utilisait un certain nombre d'attributs
(background, text...). Ces attributs ont été déclarés caducs et ont été remplacés par
les feuilles de style.
Rappel des éléments vitaux
Nom Description
<!DOCTYPE...> dit quelle version de HTML est utilisée dans la page
<HTML> ... </HTML> limite le contenu décrit en HTML
<HEAD>... </HEAD> limite l'en-tête de la page (pour les métas tags, le titre...)
<BODY> ... </BODY> limite le corps de page. Contient toute la partie
information de la page.
II.4.2.1. Paragraphe
a) Balise
La balise <p>…< /p> permet la segmentation du texte en paragraphes. < /p>
précise où commence un paragraphe et où il se termine.
23
Le monde accorde sa faveur aux esprits avertis
 Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

b) Exemple

Résultat:

II.4.2.2. Mise en forme de texte

<!--...--> Commentaire ignoré par le navigateur
<BR> Retour à la ligne
<BLOCKQUOTE></BLOCKQUOTE> Bloc en retrait - Décalage
<CENTER>...</CENTER> Centre tout élément compris dans le tag
<DIV align=center> ...</DIV Centre l'élément encadré par le tag
<DIV align=left> ...</DIV ligne l'élément à gauche
<DIV align=right > ...</DIV ligne l'élément à droite
<P align=center>...</P> Paragraphe centré
<P align=left>...</P> Paragraphe aligné à gauche
<P align=right>...</P> Paragraphe aligné à droite
<b>… </b> Texte en gras
<i> … </i> Texte en italique
<u> … </u> Texte souligné
<s> … </s> Texte barré
^… Texte en exposant
_… Texte en indice

24
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

b) Exemple
 Exempe1

Exempe2
˂Font˃…˂/Font˃

25
Le monde accorde sa faveur aux esprits avertis
 Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

II.4.2.3. Niveau des titres

a) Balise
˂Hn˃…˂/Hn˃ permet de représenter le niveau de titre où n représente le
niveau. Il existe différents niveaux de titres ( 1 à 6 ) (tous importants)
b) Attribut
<Hn align=center>...</Hn> Titre centré
<Hn align=left>...</Hn> Titre aligné à gauche
<Hn align=right>...</Hn> Titre aligné à droite

c) Exemple
CODE RESULTAT

II.4.2.4. Tableau
b) Balise
<Table>…< / Table > sert à l’insertion d’un tableau
c) Stucture de base
<TABLE> </TABLE> : indique au navigateur le début et la fin d'une table
Pour décrire le tableau, on utilise ensuite les balises :
<TR> </TR> (Table Row): Définit une ligne du tableau. Pour ajouter une ligne
au tableau.
26
Le monde accorde sa faveur aux esprits avertis
 Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

<TD> </TD> (Table Data): Définit une série de cellules de données (qui pourront
contenir du texte, des images, une table...).
<TH> </TH> (Table Head): Définit une cellule contenant un titre (intitulé) de
colonne ou de ligne. Le résultat à l'affichage est un texte mis en évidence (gras
par exemple).
<caption> </caption> : Définition du titre du tableau
d) Attributs

WIDTH="x" largeur du tableau (nombre ou % par rapport à la largeur de la

fenêtre)
HEIGHT="x" hauteur du tableau (nombre en pixels ou %)
BORDER="x" taille de la bordure ou épaisseur de l’ombrage
(1 par défaut)
BGCOLOR=couleur couleur de fond des cellules
BACKGROUND pour utiliser une image comme fond pour la table
CELLSPACING="x" largeur des bordures = espace entre deux cellules du tableau
CELLPADDING="x" espace libre (pixels) entre le texte et le bord de la espace
libre (pixels) entre le texte et le bord de la cellule qui le contient
ALIGN alignement: left, right, center
COLLSPAN="n" fusion de colonnes sur une même ligne (td et th)
ROWSPAN="n" fusion de colonnes sur une même ligne (td et th)
e) Exemple

Résultat

27
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

II.4.2.5. Listes
HTML permet de définir 3 types de listes à l'aide des balises simples ou paires :
1. Liste à puce
a) Balise
<UL ><LI ></LI ></UL>
b) Attribut
c) TYPE="disc|circle|square"
d) Exemple

28
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

II.4.2.6. Les images et zones réactives

a) Balise
Pour insérer une image à un document HTML, nous utilisons la balise simple
<img>
Insérer une image locale
<img src="chemin de l’image" alt=" texte alternative">
Insérer une image en distance<img src="URL" alt=" texte alternative">
b) Attributs de la balise <img>
- src : donne le chemin de l'image.
- alt : affiche un texte alternatif à la place de l'image si celle-ci ne peut pas être
chargée
- align : left, right, middle, bottom, top
- width=n ou n% height=m : pour redimensionner une image
- border=n : pour tracer un cadre autour de l'image avec un trait de n pixels de
large
- vspace=n hspace=m : espace vertical entre l’image et le texte en pixels (vspace),
espace horizontal image-texte (hspace)
II.4.2.7. Les formulaire
a) Balise
Les formulaires interactifs permettent de doter les pages web d'éléments
interactifs permettant par exemple la saisie de données, un dialogue avec les
internautes. Il est une fiche que l'utilisateur peut remplir, ces informations ainsi
saisies sont traitées par le serveur de l’hébergeur de site web. Un formulaire
commence et finit par: FORM
<FORM ACTION METHOD> </FORM>
Les attributs METHOD et ACTION sont obligatoires
ACTION = " adresse du script qui va recevoir les données saisies dans le
formulaire "
METHOD="méthode d’envoi des données" (il en existe deux, GET et POST)
 POST: valeur qui correspond à un envoi de données stockées dans le corps
de la requête. Elle est la méthode la plus utilisée.
29
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

 GET : passe les informations d'un formulaire par l’intermédiaire des URL.
Elles sont placées, directement à la suite de l'adresse URL de la page
appelée. Elle rend visibles les données dans la barre d’adresse du navigateur
donc modifiable par l’internaute. La longueur totale est limitée à 255
caractères, ce qui rend impossible la transmission d’un volume de donné
important.

b) Méthode des formulaires

Les formulaires HTML permettent de retourner des informations Les formulaires
HTML permettent de retourner des informations saisies par un utilisateur vers une
application serveur saisies par un utilisateur vers une application serveur.
Les formulaires utilisent des balises particulières:
<form action= " " method= " " > … </form>
<input type = "text" name ="nom" value="chaîne"> zone de saisie
<input type="submit " value="Envoyer"> bouton d’envoi
<input type="reset" name="efface" value="Effacer"> bouton effacer
<input type="checkbox" name="case1" value="valeur_case"> case à cocher
<input type="radio" name="radio1" value="valeur_radio"> bouton radio
<select name ="select" size="1"> Combobox
<option value="el1">choix1</option>Premier élément
<option value="el2"> choix2 </option>deuxième élément
</select>
<textarea name="" cols="" rows=""></textarea> zone de texte déroulante

<INPUT TYPE NAME VALUE SIZE> </INPUT> avec :

 TYPE = TEXT pour faire saisir une ligne de texte
 TYPE = PASSWORD les caractères saisis apparaissent sous forme d’ '*'
 NAME = "un nom" identifie le champ texte
 VALUE valeur par défaut de la zone de texte
 SIZE largeur de la zone de texte
 Maxlength nombre maximal de caractères

30
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

c) Exemple

31
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

< INPUT NAME TYPE VALUE CHECKED > … </INPUT>

TYPE = RADIO pour les boutons multiples CHECKBOX pour les cases à
cocher SUBMIT pour envoyer le formulaire une fois rempli
RESET pour effacer le contenu du formulaire
NAME = "un nom" identifie le bouton
VALUE= "valeur" donnée au bouton lorsqu'il est sélectionné
CHECKED signale un bouton par défaut (RADIO) ou une case cochée avant
saisie (CHECKBOX)
Exemple voir formulaire1
32
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

II.4.2.8. Liens hypertexte

HTML donne la possibilité de créer des liens vers d'autres documents :
- Documents HTML
- des images
- du son
- des films
- des serveurs ...
Le logiciel client www présente ce lien sous forme de motssoulignés ou d'image
encadrée que l'on appelle ancre ou lien. Ce lien est soit un fichier local, soit une
URL. Liens vers un document complet distant :
Syntaxe :
<A HREF="URL"> ancre </A>
Exemple :
Soit deux pages, la première [Link] et la seconde [Link]
<A HREF="C:\Users\HP-PC\Desktop\L1\[Link]">
historique</A>
IV.4. Index des balises HTML
Voici rassemblé par ordre alphabétique dans une seule page l'ensemble des balises
HTML 4.
Le logo signifie qu'il est conseillé de ne plus utiliser cette balise.
Par défaut, toutes les balises doivent avoir une balise de fin, i.e. la balise <A> doit
être fermée par une balise </A>.

<A> Définit un lien (anchor en anglais)

<ABBR> Balise de mise en forme. Indique une abréviation.
<ACRONYM> Balise de mise en forme. Indique un acronyme.
<ADDRESS> Balise de mise en forme. Utilisé pour mettre en
relief des informations sur l'auteur (son adresse, un
contact...).
Insère une applet Java. Balise déconseillée, utiliser
<APPLET> <OBJECT> à la place.
Permet de définir des zones sensibles pour une
<><AREA> image. Utilisée dans un groupe <map>.

33
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

<B> Balise de mise en forme. Met le texte en gras.

<><BASE> Définit le chemin absolu à partir duquel toutes les
URI relatives du document vont être calculées.
Doit être placé dans l'en-tête du document HTML.
Définit la taille de base pour les polices utilisées
avec <FONT> (attribut size). Tout comme
<><BASEFONT <FONT>, cette balise est déconseillée.
>
Permet d'outrepasser l'ordre de lecture et
d'affichage des mots (utilisée lorsque des pages
<BDO> contiennent du texte qui doit se lire de la droite
vers la gauche, par exemple)
<BIG> Balise de mise en forme. Ecrit du texte plus gros.
<BLOCKQUOT Balise de mise en forme. Ecrit du texte dans un
E> format spécial (police et tabulation). Utilisée pour
des citations.
(</...>)<BODY> Délimite le corps de la page HTML
 <BR Insère un saut de ligne simple
>
<BUTTON> Affiche un bouton dans un formulaire, mais avec
plus de possibilités que <INPUT type="button">

Permet de donner une description à un tableau.

<CAPTION> Cette balise doit suivre immédiatement la balise
<table> et il ne peut y en avoir qu'une
Centre un élément au milieu de la page HTML
<CENTER> ou d'une cellule de tableau. Déconseillé, utiliser
<DIV align="center"> à la place.
Balise de mise en forme. Utilisée lorsque l'on
<CITE> cite un nom, une référence (nom d'auteur, titre
de livre...)
<CODE> Balise de mise en forme. Affiche le texte dans
une police spéciale. Utilisé pour afficher du
code source.
Permet de donner des attributs à une colonne de
<><COL> tableau
(</...>)<COLGROU Permet de rassembler plusieurs éléments
P>
<COL> Voir les tableaux.

34
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

<DD> Indique le corps de la définition d'un mot que

l'on définit dans une séquence<DL>
<DEL> Balise de mise en forme. Utilisée pour signaler
un changement, qu'un élément a été supprimé ou
n'est plus valable (par exemple un prix).
Concrètement, le texte est barré. A utiliser avec
<ins>
<DFN> Balise de mise en forme. Désigne une instance
d'objet.
Etait utilisé au début du HTML pour définir des
<DIR> sommaires, des listes... N'est (pratiquement)
plus utilisée
<DIV> Permet d'appliquer un style, des
comportements... A des éléments quelconques.
Cette balise donne tout son sens au dhtml.
<DL> Indique une liste de définitions
(</...>)<DT> Annonce le mot défini dans une liste de
définitions <DL>

Balise de mise en forme. Utilisée pour mettre

<EM> quelque chose en relief (emphasis en anglais).

Permet de regrouper des éléments d'une zone

<FIELDSET> <FORM> ensemble de manière thématique

Balise de mise en forme. Permet de changer

<FONT> les attributs de couleur, de taille et de police
d'une portion de texte. Son utilisation devient
obsolète avec les feuilles de style

<FORM> Balise de formulaire

Définit un frame dans une zone

<><FRAME> <FRAMESET>. Voir les frames

<FRAMESET> Conteneur principal pour les frames. Organise

les frames

<H1> Définit un titre de niveau 1

<H2> Définit un titre de niveau 2

35
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

<H3> Définit un titre de niveau 3

<H4> Définit un titre de niveau 4

H5> Définit un titre de niveau 5

<H6> Définit un titre de niveau 6

(</...>) <HEAD> Définit la zone d'en-tête d'une page HTML

<><HR> Affiche une ligne horizontale

(</...>) <HTML> Balise délimitant une page HTML. Permet de

reconnaitre une page HTML.
<I> Balise de mise en forme. Affiche du texte en
italique
<IFRAME> Permet d'insérer une frame ou fenêtre dans le
corps d'une page HTML
<><IMG> Insère une image
<><INPUT> Elément définissant un contrôle dans un
formulaire. Cela peut être un bouton poussoir,
un bouton radio, une case à cocher, une zone
de texte...
<INS> Balise de mise en forme. Contrairement
à<del>, permet de mettre en relief ce qui est
nouveau. Le texte peut par exemple apparaître
souligné. A utiliser avec <del>.

Insère une zone de texte. Déconseillée, utiliser

<> <ISINDEX> <input> à la place.

<KBD> Balise de mise en forme. Indique un texte à rentrer

par l'utilisateur ("tapez ceci dans la zone de texte ci-
dessous").

<LABEL> Défini une "étiquette" associée à un contrôle de

formulaire
<LEGEND> Permet de donner une légende à une zone
<FIELDSET>. Ne peut pas être utilisée sans et suit
immédiatement un
<FIELDSET>
36
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

(</...>) <LI> Elément d'une liste (numérotée ou à puces)

Permet de définir des relations entre pages HTML.
<><LINK> Cette balise ne peut apparaître que dans l'en-tête de
la page HTML. Voir la page associée à cette balise
pour plus d'informations sur les relations possibles.

<MAP> Définit une zone sensible pour différents éléments

(<img>, <object> ou <input>)
Etait utilisée au début du html pour définir un menu
<MENU>
Définit des méta inforamtions sur la pageHTML
<><META> (situées dans la zone en-tête de la page)
<NOFRAMES> Utilisée pour indiquer un message à afficher lorsque
client ne supporte pas les FRAMES
<NOSCRIPT> Utilisée pour indiquer un message à afficher lorsque
client ne peut pas exéter les scripts de la page
<OBJECT> Utilisée pour définir un objet non "conventionnel"
<OL> Définit une liste numérotée. Utilisée au même titre
que <ul>.
<OPTGROUP> Permet de regrouper des balises <OPTION> en
leur ajoutant un préfixe commun
(</...>) <OPTION> Définit un élément à ajouter dans la liste déroulante.
Voir <select>.
(</...>) <P> Délimite un paragraphe
<><PARAM> Définit un paramètre pour un <OBJECT> ou une
<APPLET>
Délimite une zone de texte préformaté ; le texte va
<PRE> s'afficher tel qu'il a été tapé dans la page HTML.
<Q> Balise de mise en forme. Comme
<BLOCKQUOTE>, définit une citation, mais plus
courte.
<S> Balise de mise en forme. Barre du texte.
<SAMP> Balise de mise en forme. Utilisée pour représenter
des extraits de code de programmes, scripts...
<SCRIPT> Permet d'insérer un script (javascript, vbscript) dans
la page HTML
<SELECT> Liste déroulante
<SMALL> Balise de mise en forme. Ecrit du texte plus petit.
<SPAN> Comme <DIV>, permet d'appliquer un style et des
propriétés, mais seulement à du texte
<STRIKE> Balise de mise en forme. Barre du texte.
<STRONG> Balise de mise en forme. Comme <em>, permet de
mettre du texte en relief, mais en plus renforcé.
37
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

<STYLE> Définit des styles "in line"

<SUB> Balise de mise en forme. Passe du texte en indice.
<SUP> Balise de mise en forme. Passe du texte en
exposant.
<TABLE> Définit un tableau
(</...>) <TBODY> Rassemble plusieurs lignes d'un tableau pour en
constituer le corps principal (comme des
paragraphes). Il peut y avoir plusieurs <tbody>
dans un même tableau.
(</...>) <TD> Délimite une cellule d'un tableau
(</...>) Définit une zone de texte dans un formulaire
<TEXTAREA>
(</...>) <TFOOT> Définit une ligne d'un tableau comme étant le pied
du tableau (dernière ligne). Doit apparaître avant
un <tbody>.
(</...>) <TH> Définit une cellule au format en-tête dans un
tableau
(</...>) <THEAD> Définit une ligne d'un tableau comme étant une
ligne d'en-tête (première ligne). Doit apparaître
avant un <tbody>.
(</...>) <TR> Définit une ligne dans un tableau
<TT> Balise de mise en forme. Affiche le texte à la façon
machine à écrire (texte en teletype)
<U> balise de mise en forme. Sousligne du texte.
<UL> délimite une zone de liste à puces
<VAR> balise de mise en forme. Désigne une variable ou un
argument de programme

IV.5. Index des attributs HTML

Voici la liste complète des attributs utilisés avec les balises de HTML 4.
Le logo signifie que cet attribut est obligatoire avec les balises indiquées.
Le logo signifie que l'utilisation de cet attribut est déconseillée.
CDATA est une séquence de caractères provenant du jeu de caractères du
document et d'entités de caractères (&egrave; par exemple).
Pixel est un entier représentant le nombre de pixels du support de restitution de la
page (écran, papier).
Length (longueur) est soit des pixels, soit un pourcentage de l'espace vertical ou
horizontal disponible.
MultiLength est soit une longueur, soit une longueur relative ("relative length").
Une longueur relative à la forme "i*", avec i un entier.
38
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

Datetime est une date/heure représentée au format légal : YYYY-MM-

DDThh:mm:ssTZD (voir la définition complète du type Datetime).
FrameTarget est soit le nom d’un frame, soit l'un des mots réservés suivants :
_blank (nouvelle fenêtre sans nom), _self (fenêtre courante), _parent
(FRAMESET parent immédiat), _top (fenêtre principale).
MediaDesc est un descripteur de média. Voici une liste de médias reconnus :
screen, tty, tv, projection, handheld, print, braille, aural. Voir
[Link]
Une plus longue description de ces types peut être obtenue sur cette page :
[Link]
N.B. : l'attribut bordercolor très souvent utilisé pour les tableaux, n'a jamais été
officiellement défini en HTML. Il s'agit en fait d'une extension que Microsoft et
Netscape ont apportée au HTML pour pouvoir changer la couleur de bordure des
tables. Officiellement, cela se fait avec les feuilles de style (voir les tables)
nom balises format/val Commentaires
eurs
abbr TD, TH texte Abréviation pour les cellules d'en-
tête

accept-charset FORM jeux de Liste des jeux de caractères

caractères supportés
accept FORM, INPUT content Liste des types MIME pour l'uploa
types
accesskey A, AREA, caractère Touche d'accessibilité
BUTTON, INPUT,
LABEL, LEGEND,
TEXTAREA
action FORM URI Resource serveur qui traitera le
formulaire
align CAPTION top, bottom, Alignement par rapport à la table
left, right
align APPLET, bottom, Alignement vertical ou horizontal
IFRAME, IMG, middle, top,
INPUT, OBJECT left, right
align LEGEND top, bottom, Alignement par rapport au
left, right FIELDSET
align TABLE left, center, Position de la table par rapport à la
right fenêtre
align HR left, center, Alignement horizontal de la ligne
right
align DIV, H1, H2, H3, left, center, Alignement du texte
H4, H5, H6, P right,
justify
align COL, COLGROUP, left, center, Alignement des données et
TBODY, TD, right, justification du texte dans la cellule
TFOOT, TH, justify, char
THEAD, TR
39
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

alink BODY couleur Couleur pour les liens sélectionnés

alt APPLET texte Description courte
alt AREA, IMG texte Description courte
alt INPUT CDATA Description courte
archive APPLET CDATA Liste d'archives séparées par des
archive OBJECT CDATA Liste d'uris séparés par des espaces
axis TD, TH CDATA Liste d'en-têtes apparentés séparés
background BODY URI Image d'arrière-plan du document
bgcolor TABLE couleur Couleur d'arrière-plan des cellules
bgcolor TR couleur Couleur d'arrière-plan pour la ligne
bgcolor TD, TH couleur Couleur d'arrière-plan pour la
cellule
bgcolor BODY couleur Couleur d'arrière-plan du document
border TABLE pixels Epaisseur de la bordure de la table
border IMG, OBJECT pixels Epaisseur de la bordure lorsqu'un
lien est éblit sur la balise
cellpadding TABLE Length Marge intérieure des cellules
cellspacing TABLE Length Espacement entre les cellules
char COL, COLGROUP, caractère Caractère d'alignement, par exemple
TBODY, TD, char=":"
TFOOT, TH,
THEAD, TR
charoff COL, COLGROUP, Length Décalage pour le caractère
TBODY, TD, d'alignement
TFOOT, TH,
THEAD, TR
charset A, LINK, SCRIPT jeu de Jeu de caractères de la ressource
caractères pointée
checked INPUT sans valeur Coche les cases à cocher (checkbox)
ou les boutons radio
cite BLOCKQUOTE, Q URI URI du document ou du message
source
cite DEL, INS URI Raison pour laquelle on a changé
class toutes les balises CDATA Liste de classes séparées par des
sauf BASE, espaces
BASEFONT,
HEAD, HTML,
META, PARAM,
SCRIPT, STYLE,
TITLE
classid OBJECT URI Identifie une implémentation
clear BR left, all, Saut de ligne. La valeur par défaut
right, none est none.
code APPLET CDATA Fichier .class de l'applet
codebase OBJECT URI URI servant de base pour le calcul
des URI des attributs classid, data,
archive
codebase APPLET URI URI facultative de base pour l'applet
codetype OBJECT content Content type du code de l'objet
type
color BASEFONT, FONT couleur Couleur du texte
cols FRAMESET MultiLengt Liste de longueurs. Valeur par
hs défaut : 100% (1 col)
40
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

cols TEXTAREA nombreLargeur visible en largeurs

moyennes caractères
colspan TD, TH nombre Nombre de colonnes couvertes par
la cellule. La valeur par défaut est 1.
compact DIR, DL, MENU, sans valeur Réduit l'espace entre les items
OL, UL
content META CDATA Information associée
coords AREA Lengths Liste de longueurs séparées par des
virgules
coords A Lengths Utilisé pour les zones d'image
cliquables
data OBJECT URI URI des données de l'objet
datetime DEL, INS Datetime Date et heure du changement
declare OBJECT sans valeur Déclare mais n'instancie pas le flag
defer SCRIPT sans valeur Pour différer l'exécution d'un script
(on peut attendre la fin de la
génération du document)
dir toutes les balises ltr, rtl Sens de lecture d'un texte neutre
sauf APPLET,
BASE,
BASEFONT, BDO,
BR, FRAME,
FRAMESET,
IFRAME, PARAM,
SCRIPT
dir BDO ltr, rtl Sens de lecture du texte
disabled BUTTON, INPUT, sans valeur Rend un contrôle non disponible
OPTGROUP,
OPTION, SELECT,
TEXTAREA
enctype FORM content Content type utilisé pour envoyer le
type formulaire au serveur. La valeur par
défaut est "application/x-www-
form-urlencoded".
face BASEFONT, FONT CDATA Liste de noms de polices (fonts)
séparés par des virgules
for LABEL ID Associe ce LABEL au contrôle
indiqué
frame TABLE void, Quelle partie du cadre doit être
above, affiché
below,
hsides, lhs,
rhs, vsides,
box, border
frameborder FRAME, IFRAME 1, 0 Doit-on afficher une bordure entre
les frames ? La valeur par défaut est
1.
headers TD, TH IDs Liste d'id de cellules d'en-tête
height IFRAME Length Hauteur de la frame
height TD, TH Length Hauteur de la cellule
height IMG, OBJECT Length Force la hauteur de l'objet
height APPLET Length Hauteur initiale
href A, AREA, LINK URI URI de la ressource pointée
41
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

href BASE URI URI servant de base pour le calcul

des
hreflang A, LINK code de la Code de la langue
langue
hspace APPLET, IMG, pixels Marge horizontale autour de l'objet
OBJECT
http-equiv META nom Nom de l'en-tête HTTP de la
réponse
id toutes les balises ID Identifiant unique de la balise
sauf BASE, HEAD,
HTML, META,
SCRIPT, STYLE,
TITLE
ismap IMG, INPUT sans valeur Sur une image cliquable, permet
d'envoyer les coordonnées du point
cliqué
label OPTION texte Etiquette de l'élément de la liste
déroulante
label OPTGROUP texte Etiquette à utiliser pour l'optgroup
lang toutes les balises code de la Code de la langue
sauf APPLET, langue
BASE,
BASEFONT, BR,
FRAME,
FRAMESET,
IFRAME, PARAM,
SCRIPT
language SCRIPT CDATA Langage de programmation utilisé
pour le script
link BODY couleur Couleur des liens
longdesc IMG URI Lien vers une description longue
(complément de alt)
longdesc FRAME, IFRAME URI Lien vers une description longue
(complément de alt)
marginheight FRAME, IFRAME pixels Hauteur de la marge en pixels
marginwidth FRAME, IFRAME pixels Largeur de la marge en pixels
maxlength INPUT nombre Nombre maxi de caractères que peut
contenir un champ texte
media STYLE MediaDesc Cette feuille de style est prévue pour
tel média
media LINK MediaDesc Cette page est prévue pour ces
média
method FORM GET, Méthode HTTP à utiliser pour
POST envoyer le formulaire. La valeur par
défaut est GET.
multiple SELECT sans valeur Liste à sélection multiple. Par
défaut, c'est une sélection simple.
name BUTTON, CDATA Nom du contrôle
TEXTAREA
name APPLET CDATA Nom de l'applet. Permet aux autres
applets de la trouver.
name SELECT CDATA Nom de la liste
name FORM CDATA Nom du formulaire. Utilisé pour les
scripts.
42
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

name FRAME, IFRAME CDATA Nom du frame. Utilisé avec l'attribut

target.
name IMG CDATA Nom de l'image. Utilisé pour les
scripts.
name A CDATA Nom de l'ancrage
name INPUT, OBJECT CDATA Nom envoyé dans un formulaire
name MAP CDATA Nom utilisé avec usemap
name PARAM CDATA Nom du paramètre
name META nom Nom de la métainformation
nohref AREA sans valeur Cette région n'a pas d'action
noresize FRAME sans valeur L'utilisateur peut-il changer la taille
du frame ?
noshade HR sans valeur La ligne est dessinée
Avec une seule couleur, plutôt
qu'avec un effet d'ombre

nowrap TD, TH sans valeur Supprime les sauts de ligne

automatiques
object APPLET CDATA Fichier d'applet sérialisée
onblur A, AREA, script L'élément perd le focus
BUTTON, INPUT,
LABEL, SELECT,
TEXTAREA
onchange INPUT, SELECT, script La valeur de l'élément a changé
TEXTAREA
onclick toutes les balises script On vient de cliquer sur un bouton de
sauf APPLET, la souris
BASE,
BASEFONT, BDO,
BR, FONT,
FRAME,
FRAMESET,
HEAD, HTML,
IFRAME,
ISINDEX,
FONT, FRAME,
FRAMESET,
HEAD, HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
META, PARAM,
SCRIPT, STYLE,
TITLE
ondblclick toutes les balises script On vient de double-cliquer sur un
sauf APPLET, bouton de la souris
BASE,
BASEFONT, BDO,
BR, FONT,
FRAME,
FRAMESET,
HEAD, HTML,

43
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE

onfocus A, AREA, script L'élément gagne le focus

BUTTON, INPUT,
LABEL, SELECT,
TEXTAREA
onkeydown toutes les balises script Une touche a été enfoncée
sauf APPLET,
BASE,
BASEFONT, BDO,
BR, FONT,
FRAME,
FRAMESET,
HEAD, HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
onkeypress toutes les balises script Une touche a été enfoncée puis
sauf APPLET, relâchée
BASE,
BASEFONT, BDO,
BR,
onkeyup toutes les balises script Une touche a été relâchée
sauf APPLET,
BASE,
BASEFONT, BDO,
BR, FONT,
FRAME,
FRAMESET,
HEAD, HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
onload FRAMESET script Tous les frames viennent d'être
chargés
onload BODY script Le document vient d'être chargé
onmousedown toutes les balises script Un bouton de la souris a été enfoncé
sauf APPLET,
BASE,
BASEFONT, BDO,
BR, FONT,
FRAME,
FRAMESET,
HEAD, HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE

44
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

onmousemove toutes les balises script La souris vient de bouger au dessus

sauf APPLET, de l'élément
BASE,
BASEFONT, BDO,
BR, FONT,
FRAME,
FRAMESET,
HEAD, HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
onmouseout toutes les balises script La souris quitte la zone graphique de
sauf APPLET, l'élément
BASE,
BASEFONT, BDO,
BR, FONT,
FRAME,
FRAMESET,
HEAD, HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
onmouseover toutes les balises script La souris vient d'arriver au-dessus
sauf APPLET, de l'élément
BASE,
BASEFONT, BDO,
BR, FONT,
FRAME,
FRAMESET,
HEAD, HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
onmouseup toutes les balises script Un bouton de la souris vient d'être
sauf APPLET, relâché
BASE,
BASEFONT, BDO,
BR, FONT,
FRAME,
FRAMESET,
HEAD, HTML,
IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
onreset FORM script Le formulaire vient d'être réinitialisé
onselect INPUT, script Du texte a été sélectionné
TEXTAREA
onsubmit FORM script On vient d'envoyer le formulaire
onunload FRAMESET script Tous les frames viennent d'être
enlevés
onunload BODY script Le document vient d'être enlevé
45
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

profile HEAD URI Liste de fichiers contenant des

metainformations
prompt ISINDEX texte Message de prompt
readonly TEXTAREA sans valeur Empêche de changer le contrôle
readonly INPUT sans valeur Ne fonctionne que pour text et
passwd
rel A, LINK types de Liste de types de liens identifiant la
liens ressource pointée dans href
rev A, LINK types de Liste de types de liens identifiant la
liens ressource ayant
Amenée à la page courante

rows FRAMESET MultiLengt Définit le découpage horizontal des

hs frames. Liste de longueurs. Valeur
par défaut : 100% (1 ligne)
rows TEXTAREA nombre Nombre de lignes à afficher
rowspan TD, TH nombre Nombre de lignes couvertes par la
cellule. La valeur par défaut est 1.
rules TABLE none, Gère l'affichage de lignes entre les
groups, colonnes et les lignes. La valeur par
rows, cols, défaut est none.
all
scheme META CDATA Désigne un procédé pour
l'interprétation de la balise META
scope TD, TH row, col, Domaine couvert les cellules d'en-
rowgroup, tête
colgroup
scrolling FRAME, IFRAME yes, no, Ajoute une barre de défilement ou
auto non. La valeur par défaut est auto.
selected OPTION sans valeur Sélectionne l'option en question
dans la liste SELECT
shape AREA rect, circle, Contrôle l'interprétation des
poly, coordonnées. La valeur par défaut
default est rect.
shape A rect, circle, Forme et position de la zone
poly, cliquable. La valeur par défaut est
default rect.
size HR pixels Hauteur de la ligne
size FONT [+|-]nn (ex. Taille de la police (font)
size="+1",
size="4")
size INPUT CDATA Largeur du contrôle. En pixels, sauf
pour les inputs de type text et
password (nombre de caractères).
size BASEFONT CDATA Taille de base pour les éléments
FONT
size SELECT nombre Nombre de lignes visibles
span COL nombre Nombre de colonnes couvertes par
l'élément COL. La valeur par défaut
est 1.
span COLGROUP nombre Nombre par défaut de colonnes du
groupe. La valeur par défaut est 1.
src SCRIPT URI URI pointant vers un script externe

46
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

src INPUT URI URI où trouver l'image pour le

contrôle
src FRAME, IFRAME URI Source du contenu du frame
src IMG URI URI de l'image à inclure dans le
document
standby OBJECT texte Message à afficher pendant que
l'object se charge
start OL nombre Numéro qui démarre la section OL
style toutes les balises feuille de Feuille de style associée à l'élément
sauf BASE, style
BASEFONT,
HEAD, HTML,
META, PARAM,
SCRIPT, STYLE,
TITLE

summary TABLE texte Résumé du contenu de la table pour

le rendu audio
tabindex A, AREA, nombre Position dans la séquence de la
BUTTON, SELECT, touche tab
TEXTAREA
INPUT, OBJECT,
target A, AREA, BASE, FrameTar Le résultat de l'action sera affiché
FORM, LINK get dans le frame désigné par target

text BODY couleur Couleur du texte du document

title toutes les balises texte Titre indicatif

sauf BASE,
BASEFONT,
HEAD, HTML,
META, PARAM,
SCRIPT, TITLE

type A, LINK contenttyp Content type indicatif

e
type OBJECT content Content type des données
type spécifiées par data

type PARAM tent type Con

Content type de l'attributvalue
quand valuetype="ref"

type SCRIPT content Content type du langage de script

type

type STYLE content Content type du langage de la

type feuille de style

type INPUT text,

password, Type de contrôle. La valeur par
checkbox, défaut est text.

47
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

radio,
submit,
reset, file,
hidden,
image,
button
type LI disc, Liste de styles pour les puces et
square, numéros
circle (for
UL), 1, A,
a, I, i (for
OL)

type OL 1, A, a, I, i Style de numérotation

type UL disc, Style de puce
square,
circle

type BUTTON button, Type de bouton. La valeur par

submit, défaut est submit.
reset

usemap IMG, INPUT, URI "image map" à utiliser avec

OBJECT l'object
valign COL, COLGROUP, top, Alignement vertical dans les
TBODY, TD, middle, cellules
TFOOT, TH, bottom,
THEAD, TR baseline

value INPUT CDATA Specify for radio buttons and

checkboxes
value OPTION CDATA Valeur de l'élément OPTION
value PARAM CDATA Valeur du paramètre
value BUTTON CDATA Valeur renvoyée au serveur avec
le formulaire
value LI nombre Réinitialise la séquence de nombre

valuetype PARAM data, ref, Comment interpréter la valeur.

object La valeur par défaut est data.

version HTML CDATA La version de HTML utilisé dans

ce document
vlink BODY couleur Couleur pour les liens visités

vspace APPLET, IMG, pixels Marge verticale autour de l'object

OBJECT
width HR Length Largeur de la ligne
width IFRAME Length Largeur de la frame
Length largeur de la table
width IFRAME Length Largeur de la frame
width IMG, OBJECT Length Force la largeur de l'object

width TABLE Length Largeur de la table

width TD, TH Length Largeur de la cellule
48
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

width APPLET Length Largeur initiale

Width COL MultiLeng Largeur de la colonne
th
Width COLGROUP MultiLeng Largeur par défaut des colonnes
th rassemblées dans COLGROUP
Width PRE nombre largeur Suggérée en nombre de caractères
pour l'affichage de la zone PRE
5

IV.6. Les balises dédiées à la mise en forme du texte

HTML propose diverses balises pour mettre le texte en forme. En voici les
principales.
Les balises <ABBR> Abréviation
<ACRONYM> Acronyme
<ADDRESS> Coordonnées de l'auteur de la page
<B> Gras
<BIG> Texte plus gros
<BLOCKQUOTE> Citation longue
<CITE> Référence
<CODE> Code (programme)
<DEL> Ancien élément
<DFN> Définition ou déclaration d'instance
<EM> Mise en relief simple
<I> Italique
<INS> Elément nouveau
<KBD> Ce que doit écrire l'utilisateur
<Q> Citation courte (en ligne)
<S> Texte barré
<SAMP> Extrait de code
<SMALL> Texte plus petit
<STRIKE> Texte barré
<STRONG> Texte mis fortement en relief
<SUB> Indice
<SUP> Exposant
<TT> Texte en teletype (machine à écrire)
<U> Souligné
<VAR> Variable d'une fonction
Pour toutes ces balises, l'usage est le même : <BALISE>mots à
formater</BALISE>.
<ABBR>
Permet de repérer les abréviations. Exemple : WWW ou HTTP

49
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

Certains navigateurs (voire tous) ne repèrent rien. Toutefois, cette balise est utile
avec les feuilles de styles : il est possible de redéfinir son format comme c'est le
cas ici (les mots doivent être en gras et jaune...). Cette balise est fort peu usitée.
<ACRONYM>
Permet de repérer les acronymes, à savoir les mots qui sont en fait composés
d'initiales (comme les abréviations, mais ça se prononce). Exemple : LASER,
Light Amplification by Stimulated Emission of Radiation. Comme pour
<ABBR>, les acronymes de cette page doivent apparaître en jaune, mais il se peut
très bien que ça ne marche pas du tout (cela dépend de votre navigateur)...
<Address>
Met en relief les coordonnées de l'auteur. Le navigateur saute généralement une
ligne. Exemple :
Sylvain BAUDOIN, [Link]@[Link]
<B>
Permet de mettre du texte en gras. Exemple : Texte en gras.
<BIG> et <SMALL>
<BIG> permet d'afficher du texte en plus gros que la taille normale. A l'inverse,
<SMALL> permet d'afficher le texte en plus petit. Exemple : taille avec SMALL,
taille normale et taille avec BIG.
<BLOCKQUOTE> et <Q>
Ces balises doivent a priori être utilisées pour les citations. <BLOCKQUOTE>
sert pour les longues citations où il faut mettre le texte à la ligne (avec des marges),
et <Q> sert pour les citations courtes en ligne. A priori, <Q> rajoute des
guillemets. Exemples :
avec <BLOCKQUOTE> :
Y a pas d'grand, y a pas d'petits, la bonne longueur pour les jambes, c'est quand
les pieds touchent bien parterre. (Coluche)
avec <Q> : Jo Privat et son accordéon a dit : Vive la musette ! Et vous ?
<CITE>
Cette balise doit également être utilisée pour mettre en relief le nom d'un auteur,
une référence. Exemple : Les Misérables, Victor Hugo
<CODE>
Cette balise doit a priori être utilisée lorsque l'on met du code (ligne de
programmes) dans une page HTML. Le résultat est le suivant :
shared-network FOO-BAR {
filename "boot";
subnet [Link] netmask [Link] {
26
range [Link] [Link];
}
subnet [Link] netmask [Link] {
range [Link] [Link];

50
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

}
}
Cette balise peut astucieusement être utilisée avec <PRE> simplement pour
pouvoir faire du copier-coller dans le code HTML et en même temps conserver
sa mise en page.
<DEL> et <INS>
Ces balises permettent de mettre en relief des nouveautés, non pas des
modifications du code HTML, mais par exemple une mise à jour de prix : les clous
qui passent de 5 à 10 Francs le kilo :
Les clous sont à 10 F/Kg.
<DFN>
Cette balise est utilisée par exemple quand on met du code dans un page pour
mettre en avant les définitions ou déclarations d'instances...
int max(int, int);
void main() {
int i;
printf("bonjour\n");
...
}
<EM>
Simplement utilisée pour mettre en relief un bout de texte quelconque : bla bla bla
bla ceci est important bla bla bla bla bla bla bla.
<I>
Met du texte en italique.
<KBD>
Indique le texte que l'utilisateur doit rentrer. Exemple : à l'invite, tapez "dir" pour
obtenir la liste des fichiers présents dans le répertoire.
<S> et <STRIKE>
27
Barrent toutes les deux du texte.
ATTENTION ! Ces deux balises sont déconseillées. Il vaut mieux utiliser <SPAN
STYLE="text-decoration: line-through;">texte </SPAN> à la place (merci les
feuilles de style).
<SAMP>
Est utilisée lorsque l'on met un extrait de code dans la page : printf("c'est sympa
le C");...
<STRONG>
Comme <EM>, met le texte en relief, mais de façon plus prononcée. Exemple :
avec <EM>, avec <STRONG>.
<SUB> et <SUP>
Permet respectivement de passer du texte en indice et en exposant.
<TT>

51
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

Affiche le texte comme tapé à la machine à écrire.

<U>
Cette balise permet de souligner du texte.
ATTENTION ! Cette balise est déconseillée. Il vaut mieux utiliser <SPAN
STYLE="text-decoration: underline;">texte</SPAN> à la place (merci les
feuilles de style).
<VAR>
Doit être utilisée lorsque l'on site une variable ou un paramètre d'une fonction.
Exemple : Dans cette fonction, foo désigne un machin.
Attributs supplémentaires
Toutes ces balises fonctionnent normalement sans attributs particuliers. HTML 4
a toutefois défini les suivants :
 Id ;
 Class ;
 Lang ;
 title ;
 style.
Ainsi que les événements suivants :

 Onclick ;
 Ondbclick ;
 Onmouseove ;
 Onmouseup ;
 Onmousedown ;
 Onmousemove ;
 Onmouseout ;
 Onkeypress ;
 Onkeydown ;
 onkeyup.
IV.7. Comment faire des liens en HTML
Utilité
La balise <A> permet de créer des hyper-liens. C'est une des balises les plus
importantes du HTML : sans elle, hors de question de "surfer" sur le net.
Un hyper-lien est une association entre un ou plusieurs éléments (des mots
généralement) et une référence. Le cas idéal de l'hyper-lien, c'est le dictionnaire
dans lequel tous les mots d'une définition pointent vers leur propre définition.
Utilisation
Cette balise nécessite des attributs pour fonctionner correctement.
Avec cette balise, il est possible de faire deux choses : créer un lien vers une
ressource (page web, ancrage ou tout autre objet accessible par HTTP, FTP...),
ou créer un ancrage. On appelle ancrage un endroit d'une page web auquel on va
52
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

donner un nom pour le rendre accessible par un hyper-lien. Par exemple, en

cliquant ici, vous allez atteindre un ancrage appelé "utilisation" placé à côté du
titre "Utilisation" de cette page.
<A href="objet">permet de créer un lien (ou pointeur) vers "objet"
<A name="ancrage">permet de créer un ancrage ayant pour nom "ancrage"
Le texte ou les objets enfermés entre le <A...> et le </A> devient la zone active
pour le lien (avec l'attribut href, ces objets seront clickables et le navigateur tentera
d'accéder à la ressource pointée, et avec name, ces objets seront ceux accessibles
avec le nom indiqué). Pour créer un ancrage, on peut cependant ne pas enfermer
de texte (c'est même ce qu'on fait généralement, même si certains navigateurs
reconnaissent pas les ancrages "vides").
Les ancrages
C'est l'utilisation la plus simple pour cette balise. La seule contrainte en nommant
les ancrages, c'est que ce nom doit être unique, même si la casse diffère entre
deux noms. Pour créer un lien vers un ancrage, on utilise un <A href="..."> en
mettant le nom de l'ancrage précédé d'un # : On crée un ancrage "ancrage" : <A
name="ancrage"></A>On crée ensuite un pointeur dessus : <A
href="#ancrage">texte ou objets pour le lien</A>
Les ancrages sont a priori sensibles à la casse.
Il existe une manière dérivée de faire des ancrages en utilisant l'attribut ID des
balises : <H2 ID="titre2">Titre 2 bla bla</H2>aura le même effet que <A
name="titre2"><H2>Titre 2 bla bla</H2></A>
Les liens
C'est un peut plus technique que les ancrages car on peut faire des liens sur à peu
près tout ce qu'on veut (une autre page HTML, un ancrage, un ancrage sur une
autre page, un fichier binaire...).
Pour créer un lien, il faut connaître l'emplacement exact de l'objet (son URL). Le
lien est créé en donnant cet URL comme valeur de l'attribut href=... de la balise
<A>. Voici une succession de liens différents :
<A href="html_tags.php">va pointer vers la page html_tags.php du
répertoire courant (en URL relative)
<A href="html_tags.php#aa">va pointer vers l'ancrage "aa" de la page
html_tags.php (en URL relative)
<A href="[Link] pointer vers le site de [Link]
<A href="[Link] pointer vers un répertoire
accessible par FTP
<A href="/dhcp-dns/[Link]">va pointer vers une
archive compressée (fichier binaire) se trouvant dans le répertoire /dhcp-dns/
(URL absolue par rapport au site courant).
L'attribut target
Cet attribut est assez souvent utilisé. Il permet de dire au navigateur où ouvrir le
lien (nouvelle fenêtre, fenêtre principale, fenêtre nommée...). Les 5 valeurs
possibles de cet attribut sont les suivantes :
53
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

_top ouvre le lien dans la fenêtre principale du navigateur

_self ouvre le lien dans la fenêtre courante
_blank ouvre le lien dans une nouvelle fenêtre sans nom
_parent ouvre le lien dans la frame parent
30
nom ouvre le lien dans la frame de nom "nom"
Voir les frames pour plus d'informations.
Les attributs spéciaux
Les attributs name et href suffisent à faire fonctionner des liens correctement, et
on n'utilise que ceux-là dans 95% des cas. Pourtant, HTML 4 définit des attributs
supplémentaires dont voici la liste :
Attribut Description

accesskey caractère qui donne accès à la ressource pointée (raccourci

clavier)
charset la page de code de la ressource pointée (par exemple ISO-
8859-1)
class pour attribuer la balise à une classe (utilisé pour les feuilles
de style)
coords permet de spécifier l'emplacement où la zone shape sera
active
hreflang le code du langage pour la page HTML pointée (à n'utiliser
qu'avec href=...)
id pour identifier la balise

onblur script à exécuter lorsque le lien ne devient plus actif ("perd

le focus")
onfocus script à exécuter lorsque le lien devient actif ("attrape le
focus")
rel définit la relation entre la page actuelle et la ressource pointé.
Voir <LINK>
rev définit la relation entre la page actuelle et la ressource pointé.
Voir <LINK>
shape lorsque l'on crée un lien depuis une image, permet de
spécifier la forme de la zone active sur l'image
tabindex position de l'objet dans la liste des objets accessible par la
touche tab
Type le type MIME de la ressource pointée (par exemple text/css)

54
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

IV.9. Le CSS (cascading style cheets)

Les feuilles de style en cascade, généralement appelées CSS de
l'anglaisCascading Style Sheets, forment un langage informatique qui décrit la
présentation des documents HTML et XML. Les standards définissant CSS sont
publiés par le World Wide Web Consortium (W3C). Introduit au milieu
des années 1990, CSS devient couramment utilisé dans la conception de sites
web et bien pris en charge par les navigateurs web dans les années 2000.

L'un des objectifs majeurs des CSS est de permettre la mise en forme hors des
documents. Il est par exemple possible de ne décrire que la structure d'un
document en HTML, et de décrire toute la présentation dans une feuille de style
CSS séparée. Les styles sont appliqués au dernier moment, dans le navigateur web
des visiteurs qui consultent le document. Cette séparation fournit un certain
nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus
facilement de présentation, et de réduire la complexité de l'architecture d'un
document.
Ainsi, les avantages des feuilles de style sont multiples :

 La structure du document et la présentation peuvent être gérées dans des

fichiers séparés ;
 La conception d'un document se fait dans un premier temps sans se soucier
de la présentation, ce qui permet d'être plus efficace ;
 Dans le cas d'un site web, la présentation est uniformisée : les documents
(pages HTML) font référence aux mêmes feuilles de styles. Cette
caractéristique permet de plus une remise en forme rapide de l'aspect
visuel ;
 Un même document peut donner le choix entre plusieurs feuilles de style,
par exemple une pour l'impression et une pour la lecture à l'écran.
Certains navigateurs web permettent au visiteur de choisir un style parmi
plusieurs ;
 Le code HTML est considérablement réduit en taille et en complexité,
puisqu'il ne contient plus de balises ni d'attributs de présentation.

55
Le monde accorde sa faveur aux esprits avertis
Kamenga izana agnès /Programmation web I/ L/année académique 2021-2022

CONCLUSION

Pour développer une application en ligne, il faut avoir des notions préliminaires,
raison pour laquelle, nous avons fait appel aux définitions et explications des
concepts de base liés à la programmation Web au premier chapitre, le second a
abordé la programmation web en soit en empruntant, le HTML comme langage
de manipulation des donnés en ligne, d’où nous avons parlé de différents éléments
pouvant s’afficher sur une page éditer en Notepad++ et afficher sur un navigateur.

Notes de référence

[Link]

[Link]

[Link]

[Link]

[Link]

Agnès Kamenga Izana « mise en place d’un système

d’information informatisé pour la gestion des projets de
construction » cas de GETRACO, année académique 202-
2013, inédit

56
Le monde accorde sa faveur aux esprits avertis