2 - Technologies Du Web 1 CHAPITRE 1-1

UPB Technologies Web : HTML Introduction
Technologies du web
HTML: Introduction
2021-2022
au programme...
? HTML ?
? Un langage à balises ?
? Syntaxe ?
? Validation ?
? Sémantique ?
2/24
HTML ? (1/5)
HTML :
 Ca veut dire quoi « HTML » ?
3/24
HTML ? (2/5)
HTML :
HyperText Markup Language
= langage à balises pour hypertextes
4/24
HTML ? (3/11)
HTML:
HyperText Markup Language
langage à balises pour hypertextes
 un langage
 de description de documents web, il permet de structurer le contenu de ces documents
 a balises
 la structure des documents est organisée à l’aide de balises
 pour hypertextes
 les documents contiennent des hyperliens permettant un accès direct à une autre partie du
document
5/24
Exemple UPB
HTML ? (4/5)
HTML5:
version majeure actuelle du langage HTML
 ajout de balises par rapport aux versions précédentes
6/24
?
HTML ? (5/5)
XHTML:
 une « version » d’HTML conforme au langage XML
 XML : « eXtensible Meta Language »
 impose des règles d’écritures
XHTML5 :
 XHTML5
 mêmes balises
 une syntaxe plus rigoureuse
7/24
?
HTML (1/11)
au programme...
? HTML ?
? Syntaxe ?
? Validation ?
? Sémantique ?
8/24
Langage à balise (1/4)

langage:
? C’est quoi un langage ?
9/24
? ?

langage :
vocabulaire + syntaxe + sémantique
 syntaxe = grammaire
 sémantique = sens
Le vocabulaire permet de construire des textes qui respectent la syntaxe et qui

ont un sens.
10/24
? Navigateur ? Serveur web

vocabulaire :
prédéfinis, identifiés par des balises
éléments
 ouvrante/fermante : <element> / </element>
Ex: <h1> / </h1> 
 balises auto-fermantes : </element>

Ex: <img/>
 HTML insensible à la casse : <eLEmENt> = <elemENt>

mais XHTML => minuscules : <element>
11/24
? Liste balise HTML ? Liste balise HTML

Contenu d’un élément:
On appelle contenu d’un élément le code qui se trouve entre ses
balises ouvrante et fermante.
 contenu de l’élément p 
NB : les balises auto-fermantes ont un contenu vide.
12/24
? ?
HTML (1/11)
au programme...
? HTML ?
? Syntaxe ?
? Validation ?
? Sémantique ?
13/24
Syntaxe (1/5)
La syntaxe définit:
 la structure du document
 la structure du document
14/24
? ?
Syntaxe (2/5)
Structure minimale
<! DOCTYPE html> ← déclaration du DOCTYPE
< html > ← un élément racine
< head > ← l’entête du document

< title > Document HTML 5 minimal </title >
←un titre
< meta charset=‘’UTF-8’’ / >
← la déclaration de l’encodage de caractères utilisé
< /head >
< /body >

← le corps du document
< !– on place ici le contenu de la page -->
< /body >

15/15
< /html >
? Exemple minimal
Syntaxe (3/5) : règles d’écriture

Parenthésage
Un document html valide est bien parenthésé.
1. A toute balise ouvrante <element> doit être associée une balise fermante </element>
2. Les éléments ne doivent pas se chevaucher : premier ouvert, dernier fermé
Ex1: Début <code> emboité</code> suite  ← légal
Ex2: Début <code> emboité ? suite </code>

← ! illégal !
16/24
? ?

emboitement (1)
Le contenu d’un élément peut être constitué d’autres éléments « emboités ».

Début du contenu de p
<code>
début emboité 1

Contenu emboité 2

suite du contenu de p
</code>

17/24
? ?

emboitement (2)
Les emboitements obéissent à des règles
Tous les emboitements ne sont pas possibles.
Exemples:
 un élément 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
18/24
? ?
HTML (1/11)
au programme...
? HTML ?
? Syntaxe ?
? Validation ?
? Sémantique ?
19/24
Validation (1/2)
document valide
Un document (X)HTML est valide s’il respecte toutes ces règles.
Exemples:
20/24
? ?
Validation (2/2)
document valide
Les outils de validation permettent de vérifier la correction syntaxique d’un document.
http://validator.w3.org/nu (extension xhtml)
Exemple (nc)
Important
La validation d’un document produit doit être systématique
21/24
? ?
HTML (1/11)
au programme...
? HTML ?
? Syntaxe ?
? Validation ?
? Sémantique ?
22/24
Sémantique (1/1)
A chaque élément (balise) est associée une sémantique qui définit son usage.
Elle permet de savoir quand et pourquoi utiliser un élément.
MDN (p)
 L’élément sert à représenter un paragraphe
MDN (p)
 L’élément <time> sert à identifier une heure ou une date
MDN (p)
 L’élément <td> représente une « case » dans un tableau
 L’élément sert à donner de l’importance à un texte MDN (p)
 etc
23/24
? ?
À suivre :
HTML: les éléments
24/24
? ?

2 - Technologies Du Web 1 CHAPITRE 1-1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

2 - Technologies Du Web 1 CHAPITRE 1-1

Transféré par

Droits d'auteur :

Formats disponibles

UPB Technologies Web : HTML Introduction

= langage à balises pour hypertextes

Langage à balise (1/4)

Langage à balise (2/4)

Le vocabulaire permet de construire des textes qui respectent la syntaxe et qui

Langage à balise (3/4)

 balises auto-fermantes : </element>

 HTML insensible à la casse : <eLEmENt> = <elemENt>

Langage à balise (4/4)

<p> contenu de l’élément p </p>

NB : les balises auto-fermantes ont un contenu vide.

< head > ← l’entête du document

< /body >

< /body >

Syntaxe (3/5) : règles d’écriture

Ex1: <p> Début <code> emboité</code> suite </p>  ← légal

Ex2: <p> Début <code> emboité ? </p> suite </code>

Syntaxe (4/5) : règles d’écriture

Syntaxe (5/5) : règles d’écriture

http://validator.w3.org/nu (extension xhtml)

HTML: les éléments

Vous aimerez peut-être aussi