Institut Supérieur Des études Technologiques De Kairouan

Support de Cours
Programmation Web 1

Mr Allani Abderrahim

Année Universitaire 2022-2023 0

 Objectif
L’objectif de ce cours est de se familiariser avec
certaines notions, technologies et langages de
création de sites Web :

1
LE LANGAGE HTML
HyperText Markup Language

2
Objectifs

Apprendre les balises HTML5

Apprendre à insérer différents objets dans
une page HTML5
Paramétrer les différents objets

3
INTRODUCTION

1.Qu’est –ce que HTML ?

2.Les versions du HTML
3.Qu’est-ce qu’une page HTML ?
4.Exemple de page HTML
5.Architecture d’une application Web
6.Logo du HTML5
7.En quoi consiste réellement HTML5 ?

4
 Qu’est –ce que HTML ?
HTML HyperText Markup Language
HyperText = texte+liens vers d’autres pages ou d’autres objets

Il s’agit d’un langage de balises issu de SGML (Structured Generalized Markup

Language) qui est lui même un langage standard (norme ISO 8779 :1986)
utilisé aujourd’hui par de nombreuses grandes sociétés et institutions pour
l’échange international de documents et de données. SGML est très complet
mais il est très lourd à gérer. HTML est une version allégée de ce langage.

HTML permet la gestion des contenus l’insertion de différents types d'objets

multimédia (images, son, vidéo) et donc la création d'une page Web.

5
 Qu’est –ce que HTML ?

Ce n'est pas un langage de programmation proprement parlé (puisqu’il ne

permet pas de créer des programmes), mais un langage qui se veut multi-
systèmes (PC, Unix, Linux, Mac...) et multi-plateformes (tout type de taille et
de résolution d'écran, tout type de navigateur : Microsoft Internet Explorer,
Netscape Navigator, Mozilla Firefox, Goole Chrome, Opera...).

Un document HTML est interprété par le navigateur. D'où des différences si on

visualise une page sur un même système avec différents navigateurs, voire
différentes versions d'un même navigateur. D'où la nécessité de tester les
pages sur différents navigateurs pour avoir le même rendu.

6
 Les versions de HTML
 HTML 1 : c'est la toute première version créée par Tim Berners-Lee en 1991.
 HTML 2 : la deuxième version du HTML apparaît en 1994 et prend fin en 1996 avec l'apparition
du HTML 3.0. C'est cette version qui posera en fait les bases des versions suivantes du HTML.
Les règles et le fonctionnement de cette version sont donnés par le W3C (tandis que la
première version a été créée par un seul homme).
 HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses possibilités
au langage comme les tableaux, les applets, les scripts, le positionnement du texte autour
des images, etc.
 HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de HTML
4.01). Elle apparaît pour la première fois en 1998 et propose l'utilisation de frames (qui
découpent une page web en plusieurs parties), des tableaux plus complexes, des
améliorations sur les formulaires, etc. Mais surtout, cette version permet pour la première fois
d'exploiter des feuilles de style CSS.
 HTML5 : c'est la dernière version. Elle fait beaucoup parler d'elle car elle apporte de
nombreuses améliorations comme la possibilité d'inclure facilement des vidéos, un meilleur
agencement du contenu, de nouvelles fonctionnalités pour les formulaires, etc. La
spécification HTML5, soutenue en avril 2007 devant le World Wide Web Consortium par la
fondation Mozilla, Apple et Opera, est acceptée comme point de départ du nouveau
groupe de travail HTML. Ce dernier publie le premier brouillon (Working Draft) le 22 janvier
2008. 7
QU’EST-CE QU’UNE PAGE HTML ?

Une page Web est constituée de plusieurs éléments ou fichiers :

• Un fichier HTML, également appelé "fichier source". Son extension est
typiquement ".htm" (pour tenir compte des anciens systèmes
d’exploitation qui ne permettent pas plus de 3 caractères pour
l’extension du fichier, DOS par exemple) ou ".html". Par exemple,
"index.html" pour la page d'accueil de votre site. Il s'agit d'un fichier
en texte brut que ce chapitre est destiné à créer.
• De photos ou d'images, au format JPEG ".jpg" ou ".jpeg" (optimisé
pour les photos), au format GIF ".gif" (optimisé pour les images,
logos, utilisation de la transparence, etc..).
• Du son (WAVE ".wav"), des vidéos (MPEG ".mpeg" ou ".mpg", AVI
".avi"), des animations Flash ou QuickTime, des codes JavaScript ou
XML, ASP, PHP, JSP, Perl, etc...

8
EXEMPLE DE PAGE HTML

9
ARCHITECTURE D’UNE APPLICATION WEB
Client Communication Serveur
Scripts
Client
Site
Complet
Page HTML
Cookies Scripts
Texte,
Serveurs Base de
Images, Sons,
données
Scripts clients,…

 Scripts serveur : Perl, PHP, ASP, ….

 Images : JPEG, GIF, PNG
 Sons : WAV, MIDI, MP3, …
 Scripts clients : JavaScript , VBScript,…

10
Logo HTML5
 Début 2011, un logo officiel a été dévoilé pour faire la promotion de
HTML 5.
 Page du W3C dédiée au logo et autres déclinaisons
http://www.w3.org/html/logo/
En quoi consiste réellement HTML5 ?
 HTML5 inaugure de nouveaux éléments permettant par exp.
 d’ajouter une valeur sémantique aux blocs génériques définis par div et
span: article, aside, footer, header, section et nav.
 d’apporter de nouvelles fonctionnalités aux pages web, c’est le cas
notamment de audio et video.
 d’introduire des API (Application Programming Interfaces) pour étendre
les possibilités dynamiques du langage et d’interaction avec le DOM
(Document Object Model), entre autres pour :
la lecture de médias (audio, vidéo),
le glisser-déposer (drag & drop),
l’introduction de l’élément canvas (dessin 2D et 3D),
la géolocalisation, http://www.danielacton.com/Mashups/HTML5-
Location-WebStorage/
… 12
SYNTAXE HTML
1.Balises HTML
2.Commentaires
3.Adresses de fichiers

13
Balises HTML
 Les instructions HTML sont exprimées dans des balises (ou
"tags"), délimitées par les signes < et >.
 Les balises doivent être ouvertes et fermées.
 La balise de fermeture est toujours identique à la balise
d'ouverture à la différence qu'elle comporte une barre
oblique (caractère slash /) après le signe <.
<balise> texte affecté par la balise </balise>
 Les espaces et les sauts de lignes ne sont pas interprétés
comme tels.
 Les balises comportent éventuellement des attributs (les
valeurs figurent entre guillemets) :
<a href="http://ent.uvt.rnu.tn">ENT</a>
Recommandation: Ecrire les balises HTML en miniscules
14
 Balises HTML
Les balises de type block et inline

 En HTML, la plupart des balises peuvent se ranger dans l'une ou

l'autre de deux catégories :
Les balises block : une balise de type block crée
automatiquement un retour à la ligne avant et après. C'est le
cas par exemple des paragraphes <p></p>.
Les balises inline : une balise de type inline se trouve à l'intérieur
d'une balise block. Une balise inline ne crée pas de retour à la
ligne, le texte qui se trouve à l'intérieur s'écrit donc à la suite du
texte précédent, sur la même ligne (c'est pour cela que l'on
parle de balise « en ligne ». c'est le cas par exemple des liens
hypertexte <a></a>.

15
COMMENTAIRES <!-- -->

Les balises <!-- et --> indiquent un

commentaire
Un commentaire n’est visible que dans le
code source
 <!-- ceci est un commentaire -->

16
Adresses de fichiers du site
Les fichiers sont adressés en indiquant le
chemin relatif par rapport à la page
courante :
 Le chemin est indiqué entre barres
obliques (/)
 Un point indique le répertoire courant
 Deux points représentent le répertoire
parent
Exemple: on est dans contents.html
 fiche.html
- "fiche.html" ou "./fiche.html"
 tips.html
- "ressources/tips.html" ou
"./ressources/tips.html"
 index.html
- "../index.html"
 catalog.html
- "../produits/catalog.html" 17
LE WEB ET LES STANDARDS

1.Pourquoi des standards pour le Web ?

2.Le rôle du World Wide Web Consortium
W3C
3.La validation
4.Compatibilité des navigateurs Web
5.Editeurs
6.Notepad++
7.Affichage du code source d’une page

18
Pourquoi des standards pour le Web ?

 Les standards web sont gages d’interopérabilité et de

pérennité.
 Ils permettent de définir une manière universelle de
créer les pages web sans les écrire à destination d’un
logiciel en particulier.
 L’adhésion à des normes reconnues mondialement
facilite la structuration et le balisage des documents,
réduit les coûts associés à la production de sites.

19
Le rôle du World Wide Web Consortium W3C

 La mission du W3C est de développer et promouvoir des

standards pour le Web afin d’en assurer la croissance et
l’universalité.
 Le W3C est administré par trois entités :
• leMIT (Massachusetts Institute of Technology) aux
États-Unis ;
• l’université Keio au Japon ;
• l’Ercim (European Research Consortium for
Informatics and Mathematics) en Europe,
remplaçant de l’INRIA français.

20
La validation

 Tous les documents HTML5 peuvent être validés grâce à

un analyseur syntaxique en ligne.
 Il est très fortement recommandé de procéder à une
vérification systématique pour garantir un code de
qualité, interprété au mieux sur les différents
navigateurs.
 C’est un moyen idéal de se prémunir d’erreurs de
syntaxe, d’imbrication de balises ou encore d’oubli de
balises fermantes.

21
Validation d’un document HTML5

http://validator.w3.org/
Validation by direct input 22
Compatibilité des navigateurs Web
 Pour juger de l'état de la prise en charge par les navigateurs,
consulter http://caniuse.com qui dresse des tableaux de
support complets (Compatibility tables for support of HTML5,
CSS3, SVG and more in desktop and mobile browsers).
 Pour tester votre navigateur http://html5test.com
 La compatibilité des navigateurs web, A lire http://www.e-
learning.fr/la-compatibilite-des-navigateurs-web/
 Il est conseillé de tester son site web régulièrement au moins
sur:
 Google Chrome,
 Mozilla Firefox,
 Internet Explorer.

23
Editeurs

 Bloc-notes

 Notepad++ http://notepad-plus-plus.org/

 Dreamweaver

24
Notepad++
Langage, type de fichier et enregistrement

25
Notepad++
Saisie, encodage et affichage

Encodage: UTF-8

L'icône qui représente le

fichier dépend de votre
navigateur web par
défaut. Ici, l'icône est celle Le texte s'affiche sur la même ligne alors qu‘il a été
d’Opera. saisi sur deux lignes différentes!!!=> Codage en HTML 26
Notepad++
La coloration

27
Affichage du code source d’une page

28
UN DOCUMENT HTML5

1.Un document HTML5 minimal

2.Les caractères accentués
3.Les caractères spéciaux
4.En résumé

29
Un document HTML5 minimal

Les bases d'un code HTML5 ressemblent à celles des

précédentes versions HTML 4 et XHTML 1.x..
Il y a donc un DOCTYPE suivi des éléments les plus
courants :
<html>, <head>,
<title>, <meta>, <link>, <script> et <body>.
La structure du document est simplifiée

30
Un document HTML5 minimal

31
Un document HTML5 minimal
Le DOCTYPE
 <!DOCTYPE html> permet de préciser le type de document, afin
de permettre au navigateur de savoir quel langage de la vaste
famille SGML, il devra interpréter.
 Ecriture simplifiée par rapport aux précédentes versions.
 HTML 4.01 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

32
Un document HTML5 minimal

L'élément racine <html>

 C'est lui qui va recueillir les deux principaux éléments de
la hiérarchie : <head> et<body>.

<! DOCTYPE html>

<html>
<head>
</head>

<body>
</body>

</html>
33
Un document HTML5 minimal

L'élément <head>
 L'en-tête est située entre les balises <head> et </head>
 Elle regroupe toutes les méta-informations, c'est-à-dire les
données qui ne sont pas représentées directement dans
la page.
 Exemples:
 le titre dans <title> Le titre de la page</title>
 Autres méta-informations : mots-clés, description de la page,…
 <link />
 <script> </script>
…

34
Un document HTML5 minimal

L'élément <body>
 Le contenu de la page Web, structuré grâce à
différentes balises est présenté entre <body> et </body>
 L'apparence du contenu est gérée par les styles CSS
figurant dans <link /> (ou <style></style>, non
recommandée dans ce cours)

35
Un document HTML5 minimal
L'attribut charset (dans <meta>)
 <meta charset="utf-8" />
 Précise l'encodage des caractères
 Ne pas se retrouver avec les caractères spéciaux ou accentués, mal présentés et
incompréhensibles.
 Le choix de l'UTF-8 est désormais préconisé par le W3C pour tous les protocoles
échangeant du texte sur Internet (dont HTML).
 L'éditeur doit permettre d’enregistrer le fichier avec le bon encodage.
 Placer cette déclaration d'encodage avant toutes les autres balises contenues
dans la section <head>.
 En HTML4 : <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 En XHTML : <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 A lire: http://www.alsacreations.com/astuce/lire/34-charset-iso-8859-1-iso-8859-15-utf-8-lequel-
choisir.html
36
Déclarer l'encodage des caractères
d'un document HTML

http://www.alsacreations.com/astuce/lire/69-declarer-encodage-des-caracteres.html

37
Un document HTML5 minimal

L'élément <title>
 <title>Titre de la page</title>
 <title> permet de donner un titre à une page, qui sera affiché
dans la barre de titre, les favoris, l’historique et éventuellement
dans les résultats des moteurs de recherche.
 Il ne peut contenir des mises en forme.

38
Un document HTML5 minimal
L'élément <meta>
 The meta element with a name attribute represents document
metadata in the form of name/value pairs.
 A defined metadata name is any of the following:
Description
author
Keywords
Source: http://www.w3.org/TR/html-markup/meta.name.html
Exemples:
 <meta name=" keywords" content="web, conception sites, html, css,
internet, webdesigner " />
 <meta name="author" content="Prénom Nom“ />
39
Un document HTML5 minimal

L'élément <link />

 Permet de mettre en relation la page avec d'autres documents
externes.
 La plupart du temps, les feuilles de style CSS externes avec une
relation du type stylesheet.
 <link rel="stylesheet" href="../styles/style.css" />
 En HTML5, il n'est plus obligatoire de spécifier l'attribut type.
 Pour inclure directement des instructions CSS dans le document
HTML sans passer par un fichier externe, la balise <style> </style>
peut être est utilisée. Cependant, il vaut mieux utiliser un fichier
CSS indépendant : il n'y aura qu'un seul code à maintenir pour
toutes les pages.
40
Un document HTML5 minimal

L'élément <script>
 Cet élément permet d'ajouter des scripts (JavaScript) qui vont
s'éxécuter côté client dans le navigateur dès leur chargement.
 <script src="../JS/script.js"></script>
 En HTML5, il n'est plus obligatoire de spécifier l'attribut type.

41
Les caractères accentués
Les caractères accentués s'affichent de la même manière quel que soit le
poste client, lorsque le code ci-dessous est utilisé dans le fichier source :

Caractère Code HTML Caractère Code HTML

Á &Aacute; à &agrave;
À &Agrave; ä &auml;
à &Atilde; é &eacute;
É &Eacute; ê &ecirc;
È &Egrave; ú &uacute;
Î &Icirc; ü &uuml;
Ö &Ouml; ï &iuml;
 &Acirc; ç &ccedil;
Å &Aring; â &acirc;
Ä &Auml; æ &aelig;
Ê &Ecirc; è &egrave;
Ë &Euml; ë &euml;
Ô &Ocirc; û &ucirc;
Æ &AElig; ö &ouml;
Ç &Ccedil; î &icirc;
ù &ugrave;

Attention: Les codes HTML sont case sensitive(distinction entre majuscules et

minuscules)
&Eacute; É n'a pas la même signification que &eacute; é 42
 Les caractères spéciaux
Les caractères spéciaux sont également rendus par un code HTML
Caractère Code HTML
Caractère Code HTML
& &amp ;
> &gt;
¶ &para;
< &lt;
œ &#156;
Espace insécable &nbsp;
(non-breaking space)
" &quot;
® &reg; © &copy;
™ &#153; ± &plusmn;
» &#187; ¹ &#185;
« &#171; ³ &#179;
° &#176; ¼ &frac14;
² &#178; ¾ &frac34;
§ &sect; · &#183;
½ &frac12; ‰ &#137;

Si dans votre texte des caractères qui ont une signification particulière en HTML sont employés vous
devez masquer ces caractères. Les caractères suivants doivent être masqués de la façon suivante:
Remplacez le caractère < par la suite de caractères &lt;
Remplacez le caractère > par la suite de caractères &gt;
Remplacez le caractère & par la suite de caractères &amp;
Remplacez le caractère " par la suite de caractères &quot;
Remplacez les caractères « et » par les suites de caractères &laquo; et &raquo;
43
En résumé

 L'éditeur de texte Notepad++ sera utilisé pour créer un fichier ayant

l'extension .html (par exemple : test.html). Ce sera notre page web.
 À l'intérieur du fichier, nous écrirons le contenu de notre page,
accompagné de balises HTML, écrites en minuscules, sauf DOCTYPE
 Les balises peuvent avoir plusieurs formes :
 <balise> </balise> : elles s'ouvrent et se ferment pour délimiter le contenu (début
et fin d'un titre, par exemple).
 <balise /> : balises orphelines (on ne les insère qu'en un seul exemplaire), elles
permettent d'insérer un élément à un endroit précis (par exemple une image).
 Les balises sont parfois accompagnées d'attributs pour donner des
indications supplémentaires.
 On peut afficher le code source de n'importe quelle page web en
faisant un clic droit puis en
sélectionnant Afficher le code source de la page. 44
Structurer un document HTML5

1.Les autres éléments HTML5

2.Le paragraphe
3.Le saut de ligne
4.Les titres
5.Les balises <span></span> et
<div></div>
6.Indentation <blockquote> </blockquote>
7.Mise en valeur des textes: indiquer
le sens du texte

45
Structurer un document HTML5
Les autres éléments HTML5
 Une fois la structure de base préparée, il est temps de
commencer à y placer d'autres éléments HTML pour
insérer le contenu de la page Web: paragraphes, listes,
liens, images, vidéos, tableaux, formulaires,… entre
<body> et </body>.
 La majorité des éléments HTML sont toujours présents
dans HTML5, avec quelques nouveautés. Par exemple :
<section>, <article>, <header>, <footer>, <nav> et<as
ide>
Éléments <figure> & <figcaption>
Éléments média <audio> et <video>
Élément <canvas>
46
Le paragraphe

 La plupart du temps, lorsqu'on écrit du texte, il figure à

l'intérieur de paragraphes.
 Le langage HTML propose la balise <p> </p> pour
délimiter les paragraphes.
 <p> signifie « Début du paragraphe », permet d'introduire un
nouveau paragraphe: retour à la ligne + ligne vierge.
 </p> signifie « Fin du paragraphe ».
 Exemple:
<p>Bonjour, bienvenue sur mon site !</p>
 Résultat:

47
Le saut de ligne
 En HTML, si vous appuyez sur la touche Entrée, cela ne
crée pas une nouvelle ligne.
 <br /> est une balise orpheline qui sert à retourner à la
ligne.
 A mettre à l'intérieur d'un paragraphe.
 Exemple:
<p>Bonjour, <br /> bienvenue sur mon site !</p>
 Résultat:

48
Les titres
 En HTML, six niveaux de titres différents sont disponibles (gras et grand).
 Exemple:  Résultat:
<h1>Titre très important</h1>
<h2>Titre important</h2>
<h3>Titre un peu moins important (sous-titre)</h3>
<h4>Titre pas trop important</h4>
<h5>Titre pas important</h5>
<h6>Titre pas vraiment important</h6>

Attention :
• Ne les confondez pas avec la balise <title> !
• La balise <title> affiche le titre de la page dans la barre de titre du navigateur.
• Les titres <hi> servent à créer des titres qui seront affichés dans la page web.
• Ne choisissez pas votre balise de titre en fonction de la taille qu'elle applique au texte !
• Il faut impérativement bien structurer sa page en commençant par un titre de niveau 1
(<h1>), puis un titre de niveau 2 (<h2>), etc.
49
Les balises <span></span> et <div></div>
 <span> </span> : c'est une balise de type inline, c'est-à-
dire une balise que l'on place au sein d’un texte, pour
sélectionner certains mots uniquement.
 <div> </div> : c'est une balise de type block, qui
entoure un bloc de texte. Elles crée un nouveau « bloc »
dans la page et provoque un retour à la ligne.
 <div> est une balise fréquemment utilisée dans la
construction d'un design.

50
Les balises <span></span> et <div></div>

 Code HTML:
<div class="centre">
<h1>Présentation de div et span</h1>
<p>Bonjour, <br /> Bienvenue sur mon site !</p>
<p>Bonjour et <span class="salutations">bienvenue</span> sur mon site
!</p>
</div>
 Code CSS:
.centre {color: blue; text-align : center; }
.salutations {color: red;} 51
Indentation <blockquote> </blockquote>
La balise <blockquote> sert à mettre du texte en retrait : Décalage vers la droite

<blockquote>Ce texte est en retrait.

<blockquote> Ce texte est en double retrait.</blockquote>
</blockquote>

52
Mise en valeur des textes: indiquer le sens du texte
HTML vous propose différents moyens pour mettre en valeur le texte de votre page.
 Mettre un peu en valeur
Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em> </em>
(le texte sera présenté en italique).
 Mettre bien en valeur
Pour mettre un texte bien en valeur, vous devez utiliser la balise <strong>
</strong> qui signifie « fort », ou « important » (le texte sera présenté en gras).
 Marquer le texte
 La balise <mark> </mark> permet de faire ressortir visuellement une portion de
texte (surligner le texte)
 Exemple:
<p><strong>HTML </strong>est très important, <em>CSS</em> est aussi
important, <mark>JavaScript</mark> est intéressant. </p>
 Résultat:

53