Programmation Web
- HTML -
Filière de la Licence - TC Informatique Appliquée - S3
2024/2025
Préparé par Dr. EL GHAZOUANI Mohamed
[email protected] HTML
2
3
Le doctype
Un document HTML doit toujours débuter par un doctype
– Il s'agit d'une déclaration permettant de renseigner le navigateur sur le
type de document HTML délivré.
Jusqu'à HTML5
– le doctype mentionnait l'utilisation d'un document de référence, la DTD
(Document Type Definition), grammaire résumant la syntaxe HTML et ses
attributs.
• Exemple HTML 4.01 Strict :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
4
Le doctype
Depuis HTML5
– le doctype a été considérablement simplifié
• aucune DTD n'est précisée.
– Exemple de doctype HTML5 :
• <! DOCTYPE html>
5
Structure d'une page
Structure 1/2
o un document HTML est en réalité un document XML avec des balises
prédéfinies
<!DOCTYPE html>
o la balise html marque le début du document <html>
o la balise head contient des informations relatives à la page : le type
d'encodage du texte, le titre, . . .
<head lang="fr">
<meta charset="UTF-8">
<title> Document HTML5 minimal </title>
</head> 6
Structure d'une page
Structure 2/2
o la balise body contient le corps de la page (les éléments visuels de la page ; dans
l'exemple, un texte mis en style h1)
<body>
<h1> Hello world ! </h1>
o le document se termine par la fermeture des balises body et html
</body>
</html>
7
Validation du code HTML
À la différence de langages de programmation, un non-respect de la
syntaxe de HTML n'empêchera pas l'affichage sur le navigateur.
Plus généralement, le navigateur affichera quelque chose (de non spécifié)
ou n'affichera rien, mais n'affichera jamais d'erreur.
La validation permet de vérifier la correction syntaxique.
– Il faut impérativement valider son code HTML avant de le publier.
8
Validation du code HTML
Un outil indispensable :
le validateur du W3C
http://validator.w3.org
9
Tests de portabilité
Même pour un document validé, les navigateurs n’ont pas tous la même
implémentation du moteur d’analyse et de rendu du document
Pour cette raison, il est indispensable avant de publier un site web, de
le tester sur le plus possible de plateformes et de navigateurs.
10
Tests de portabilité
l’affichage de la page est
testé simultanément avec
Internet Explorer et Safari sous
Windows, Firefox, Chrome et
Opera sous linux et Chrome
sous tablette et smartphone
Android.
11
Un langage à base de balises
HTML repose sur la notion de balises
Deux types de balises :
– Les balises qui sont ouvertes puis fermées, et encadrent du contenu
• ex : <p> contenu du paragraphe </p>
– Les balises qui s'ouvrent et se ferment en même temps
• ex : <br />
12
Un langage à base de balises
<div> : l'élément de division du contenu
• L'élément HTML <div> (ou division) est le conteneur générique du contenu
du flux.
• Il n'a aucun effet sur le contenu ou la mise en page tant qu'il n'est pas mis
en forme d'une manière quelconque à l'aide de CSS.
13
Exemple
<!DOCTYPE HTML>
<html>
<head lang="fr">
<meta charset="UTF-8">
<title> LP-IMA </title>
</head>
<body>
<h1>Informatique et Mathématiques Appliquées</h1>
<hr />
< div>
<p>Du texte <b>gras</b>,
puis<em> italique</em>,
puis <b><em>gras et italique</em></b>.
</p>
<img src="FP-Sidi-Bennour.jpg" alt="Une image" />
</div>
</body>
</html> 14
Exemple
15
Règles d’écriture: Imbrication
Le contenu d’un élément peut contenir d’autres éléments « imbriqués ».
<p>
début
<code>
texte1
<strong>
texte2
</strong>
emboité1
</code>
suite
</p>
16
Règles d’écriture: Imbrication
Exemples :
• un élément <p> ne peut pas contenir un élément <h1>
• un élément <ul> contient nécessairement au moins un élément <li>
• un élément <li> est nécessairement emboité dans un élément <ul>
• etc.
17
Règles d’écriture: Imbrication
Les éléments ne doivent pas se chevaucher : premier ouvert, dernier fermé.
Ceci est interdit :
<p> début <code> Texte</p> suite </code>
18
Balises et hiérarchie
Les balises sont structurées de façon hiérarchique
Chaque balise hérite des propriétés de la balise de niveau supérieur à moins
qu'elles ne les redéfinissent.
• <p>Ce texte est <b>seulement en gras</b>.</p>
• <p>Ce texte est <b>seulement en gras <i>et cette partie est en gras et
en italique</i></b>.</p>
19
Balises et attributs
Certaines balises peuvent posséder des attributs.
Exemples :
• <meta charset="utf-8" />
• <img src="mon_image.png" alt="Une image" />
• <p style="text-align : right"> Du texte aligné à droite </p>
20
Attributs
définit une propriété pour un élément
se note dans la balise ouvrante de l'élément, en minuscules et sa valeur est
entre guillemets " "
certains sont communs à tous les éléments
– title information textuelle sur le contenu de l'élément
– class associe une ou plusieurs classes à l'élément, une classe peut être
partagée par plusieurs éléments
– id nomme un élément de manière unique dans le document
21
Attributs
d'autres sont spécifiques à un élément
– src pour l'élément <img> désigne la source de l'image
<img src="images/HTML5_Logo.png“ class="gauche encadree“ id="logo"
alt="le logo HTML 5" />
22
Commentaires
Les commentaires sont du code HTML qui n'est pas exécuté (affiché)
Syntaxe : <!-- Commentaires -->
<h1>Un titre (qui va s'afficher)</h1>
<p>Cette phrase va s'afficher sur le navigateur.
<!-- En revanche, cette phrase ne s'affichera pas --></p>
23
Balises pour le texte
Paragraphes
– Balise <p> : paragraphe
– Balise <br> : saut de ligne
Exemple :
<body>
<p>Un premier paragraphe.</p>
<p>Un second paragraphe.</p>
</body>
Bonne pratique
Il est d'usage de créer un second paragraphe (<p>) plutôt qu'un saut de
ligne (<br>).
24
Balises pour le texte
Mise en forme
o Balise <b> (bold) : gras
o Balise <i> (italic) : italique
o Balise <u> (underline) : souligné
o Balise <em> (emphasis) : emphase (s'affiche en général comme
italique)
o Balise <strong> : mise en évidence plus forte (en général gras)
Bonne pratique
Le soulignage ne devrait jamais être utilisé en informatique, à l'exception
(éventuelle) des liens hypertextes (qui tend elle même à disparaître).
25
Balises pour le texte
Espaces
Les espaces affichées en HTML s'affichent également sur le navigateur.
En revanche, les sauts de ligne en HTML deviennent des espaces sur le
navigateur.
Pour afficher un saut de ligne, utiliser <br />
<p>Cette phrase va s‘afficher
sur une seule ligne.<br />Cette phrase sera dessous .</p>
26
Balises pour le texte
Les caractères spéciaux
En HTML, tous les caractères spéciaux peuvent être remplacés par un code
commençant par &
27
Balises pour le texte
Les titres
les titres sont dénis par la balise <hx>
où x désigne un niveau
il existe 6 niveaux : 1 étant associé à la taille de caractères la plus
grande et 6 la plus petite
28
Balises pour le texte
Les titres
Exemple :
<h1>Premier chapitre</h1>
<h2>Première partie</h2>
<h3>Premier paragraphe</h3>
<h4>Premier chapitre</h4>
<h5>Première partie</h5>
<h6>Premier paragraphe</h6>
29
Les listes
Il existe plusieurs types de listes : ordonnées ou non ou de définitions
Une liste peut contenir d'autres listes
– les listes ordonnées contiennent une séquence d'éléments dont la
position est importante
Exemple de liste ordonnée
<ol>
<li>premier élément</li>
<li>deuxième élément</li>
<li>troisième élément </li>
</ol>
30
Les listes
– les listes non ordonnées contiennent des éléments dont l'ordre n'a pas
d'importance
Exemple de liste non ordonnée
<ul>
<li>premier élément</li>
<li>deuxième élément </li>
<li>troisième élément </li>
</ul>
31
Les listes
– une liste de définition contient des termes et leurs définitions
Exemple de liste de définition
<dl>
<dt>HTML</dt>
<dd>Langage de description de pages Web</dd>
<dt>CSS</dt>
<dd>Langage décrivant la présentation
de pages HTML</dd>
</dl>
32
TD1 : Création de pages web statiques
Objectif
L'objectif de ce TD est de réaliser des pages web statiques simples (entièrement en
HTML).
Ce TD aborde les bases du développement web avec la création et la validation de
pages HTML.
33
TD1 : Création de pages web statiques
34
