Pour aller plus loin
Sommaire
Généralités
Balises HTML
Structure d’un document HTML
HTML
GUINKO Tonguim Ferdinand
31 janvier 2023
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
1/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire
Généralités
Balises HTML
Structure d’un document HTML
1 Pour aller plus loin
2 Généralités
3 Balises HTML
4 Structure d’un document HTML
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
2/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire
Généralités
Balises HTML
Structure d’un document HTML
Pour aller plus loin
Pour aller plus loin :
[Link]
[Link]
http:
//[Link]/apprendre-le-html5-tutoriel-complet
http:
//[Link]/wiki/Hypertext_Markup_Language
[Link]
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
2/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire
Généralités
Balises HTML
Structure d’un document HTML
Sommaire
1 Pour aller plus loin
2 Généralités
3 Balises HTML
4 Structure d’un document HTML
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
3/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire
Généralités Généralités
Balises HTML
Structure d’un document HTML
1 Pour aller plus loin
2 Généralités
3 Balises HTML
4 Structure d’un document HTML
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
4/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire
Généralités Généralités
Balises HTML
Structure d’un document HTML
Définition
Hyper Text Markup Language ;
Langage de balises servant à décrire les documents ;
Langage de description des pages web.
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
4/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire
Généralités Généralités
Balises HTML
Structure d’un document HTML
Généralités
CanIsee
Vous ne pouvez choisir pour l’utilisateur le navigateur qu’il utilisera pour visualiser vos pages web. Il faut
donc tester vos pages web avec plusieurs navigateurs.
Le navigateur web utilise un moteur de rendu pour interpréter et afficher la page web.
Exemple de moteur de rendu (Layout engine) :
Gecko (Mozilla Firefox, ...)
WebKit (Safari Apple, Android, ...)
Trident (Internet Explorer, Windows Mobile, Netscape, ...)
Presto (Opéra 13, Opéra Mini, Opéra Mobile)
Blink (Google Chrome, Opéra 14+, Android 4.4)
Un même moteur peut être utilisé par plusieurs types de navigateurs.
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
5/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire
Généralités Généralités
Balises HTML
Structure d’un document HTML
Exemples de moteurs de rendu
Figure – Exemples de moteurs de rendu
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
6/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire
Généralités Généralités
Balises HTML
Structure d’un document HTML
Exemple d’un moteur de rendu : Webkit
Figure – Moteur de rendu Webkit
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
7/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire
Généralités Généralités
Balises HTML
Structure d’un document HTML
Navigateurs web
Figure – Exemples de navigateurs web
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
8/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire
Généralités
Balises HTML
Structure d’un document HTML
1 Pour aller plus loin
2 Généralités
3 Balises HTML
4 Structure d’un document HTML
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
9/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire
Généralités
Balises HTML
Structure d’un document HTML
Balises HTML
Une balise commence par «<» et se termine par «>» ;
Mots clés entourés de crochets : <html> ;
balise simple : <img src=”[Link]”>
balise double : <b>Mon texte</b>. Dans ce cas les balises
sont à insérer par paires <b> et </b> : le premier élément
de la paire est la balise ouvrante et le second la balise
fermante.
Une balise marque une action à effectuer par le navigateur
Les attributs précisent les modalités de cette action (comment
doit-il le faire ?)
Les balises sont invisibles pour le visiteur de la page web
Une balise peut avoir plusieurs attributs.
La balise a un sens sémantique que doit interpréter le navigateur.
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
9/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire Balises HTML
Généralités Niveaux de texte (heading)
Balises HTML HTML 5
Structure d’un document HTML
1 Pour aller plus loin
2 Généralités
3 Balises HTML
4 Structure d’un document HTML
1 Pour aller plus loin
2 Généralités
3 Balises HTML
. . . . . . . . . . . . . . . . . . . .
4 Structure d’un document HTML . . . . . . . . . . . . . . . . . . . .
10/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire Balises HTML
Généralités Niveaux de texte (heading)
Balises HTML HTML 5
Structure d’un document HTML
Balises HTML
Balise <head> : <head> ... </head>. Contient les balises qui expliquent au navigateur comment traiter
le contenu de la page. <head> ... </head> Peut contenir des feuilles de style et des scripts JavaScripts.
Balise <title> ... </title> : permet de donner un titre à la page web. Sera affiché dans la barre des titres
du navigateur.
Explique au navigateur le type de contenu et le jeu de caractères à utiliser pour afficher la page.
Balise <body> : <body> ... </body>. Contient la partie visible de la page. Contient tous les textes,
images, liens hypertextes, ..., de la page.
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
10/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire Balises HTML
Généralités Niveaux de texte (heading)
Balises HTML HTML 5
Structure d’un document HTML
Structure d’un document HTML
Figure – Page web de base
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
11/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire Balises HTML
Généralités Niveaux de texte (heading)
Balises HTML HTML 5
Structure d’un document HTML
Structure d’un document HTML (... suite)
Figure – Page web de base
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
12/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire Balises HTML
Généralités Niveaux de texte (heading)
Balises HTML HTML 5
Structure d’un document HTML
Structure d’un document HTML (... suite)
Figure – Page web de base
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
13/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire Balises HTML
Généralités Niveaux de texte (heading)
Balises HTML HTML 5
Structure d’un document HTML
Niveaux de texte (heading)
Figure – Page web de base
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
14/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire Balises HTML
Généralités Niveaux de texte (heading)
Balises HTML HTML 5
Structure d’un document HTML
Page web de base
Figure – Page web de base
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
15/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire Balises HTML
Généralités Niveaux de texte (heading)
Balises HTML HTML 5
Structure d’un document HTML
Les versions de HTML
Table – Versions de HTML
Année Version Déclaration
1999 HTML Non normalisé.
1993 HTML+ Non normalisé.
1995 HTML < !DOCTYPE HTML PUBLIC ”-//IETF//DTD Ne supportait pas les
2.0 HTML//EN”> tables ni les attributs
ALIGN
1997 HTML < !DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 3.2 Fi- Supporte les tableaux,
3.2 nal//EN”> les attributs ALIGN. Ne
supporte pas les éle-
ments FRAME, EM-
BED, APPLET.
1999 HTML < !DOCTYPE HTML PUBLIC ”- Supporte les CSS, la
4.01 //W3C//DTD HTML 4.01 Transitional//EN” balise FORM, et des
”http ://[Link]/TR/html4/[Link]”> fonctions avancées de
JavaScript.
2000 XHTML < !DOCTYPE html PUBLIC ”-
1.0 //W3C//DTD XHTML 1.0 Transitional//EN”
”http ://[Link]/TR/xhtml1/DTD/xhtml1-
[Link]”>
2012 HTML5 < !DOCTYPE html>
2013 XHTML5
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
16/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire Balises HTML
Généralités Niveaux de texte (heading)
Balises HTML HTML 5
Structure d’un document HTML
Le type de document : Doctype
1 La déclaration DOCTYPE (Document Type Declaration)
Doit apparaître à la première ligne du fichier source html ;
Est une instruction au navigateur lui permettant d’identifier la
version du langage HTML utilisé pour l’écriture de la page.
2 La mention html indique au navigateur quel élément est
attendu sur la ligne suivante ;
3 La mention PUBLIC informe le navigateur que le DTD est un
document à accès public ; certains programmeurs peuvent
décider de créer leur propre DTD ; ils mentionneront alors
SYSTEM en lieu et place de PUBLIC ;
4 La section suivante renseigne sur le propriétaire de la DTD ;
5 La dernière section est une URL indiquant l’emplacement de
la DTD ;
6 La mention EN indique la langue dans lequel
. . . .la
. . DTD
. . . . . est
. . .écrit.
. . . . . .
. . . . . . . . . . . . . . . . . . . .
17/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire Balises HTML
Généralités Niveaux de texte (heading)
Balises HTML HTML 5
Structure d’un document HTML
Le type de document : Doctype html 4.01
Figure – Page web de base avec DTD/HTML 4.01
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
18/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire Balises HTML
Généralités Niveaux de texte (heading)
Balises HTML HTML 5
Structure d’un document HTML
Le type de document : Doctype html5
Figure – Page web de base avec DTD/HTML
. . . . . . . 5. . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
19/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire Balises HTML
Généralités Niveaux de texte (heading)
Balises HTML HTML 5
Structure d’un document HTML
HTML 5
Nouveau standard du HTML
Nouveaux Elements
Nouveaux Attributs
Supporte pleinement le CSS3
Video et audio
Graphiques 2D/3D
Stockage local
Base de données SQL locale
Applications web
De nouvelles balises :
la balise <canvas> pour l’insertion de figure 2D
Les balises <video> et <audio>
, <footer>, <header>, <nav>, <section>
Nouveaux éléments de contrôle de formulaires : like calendar, date, time, email, url, search.
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
20/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire Balises HTML
Généralités Niveaux de texte (heading)
Balises HTML HTML 5
Structure d’un document HTML
HTML 5 : page web minimale
Nouveau standard du HTML
<!DOCTYPE html >
<html >
<head >
<title >Titre du document </title >
</head >
<body >
Contenu du document ......
</body >
</html >
Exemple :
<!DOCTYPE HTML >
<html >
<body >
<video width="400" height="222" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="[Link]" type="video/webm" />
<source src="[Link]" type="video/ogg" />
Votre navigateur ne supporte pas la balise <video >.
</video >
</body >
</html >
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
21/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire Balises HTML
Généralités Niveaux de texte (heading)
Balises HTML HTML 5
Structure d’un document HTML
Exemple (suite 1 ...)
Dans l’exemple précédent, l’attribut :
controls : donne accès aux contrôles de lecture (boutons de navigation, volume, etc, selon les possibilités
du navigateur), ou les masque s’il est omis.
preload=”auto” : permet de de spécifier au navigateur de débuter immédiatement le téléchargement de la
vidéo. Dans les versions antérieures à HTML5, cet attribut équivaut à l’attribut autobuffer ;
autoplay=”true” : permet de lancer la lecture automatiquement ;
poster=”[Link]” : permet d’indiquer une image à afficher par défaut dans l’espace réservé par la vidéo,
avant que la lecture de celle-ci ne soit lancée ;
loop : indique que la lecture doit s’effectuer en boucle.
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
22/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire Balises HTML
Généralités Niveaux de texte (heading)
Balises HTML HTML 5
Structure d’un document HTML
Exemple (Suite 2 ...)
A ajouter dans un fichier .htaccess
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
23/24 GUINKO Tonguim Ferdinand HTML
Pour aller plus loin
Sommaire Balises HTML
Généralités Niveaux de texte (heading)
Balises HTML HTML 5
Structure d’un document HTML
Les balises Méta
Informations aux fins d’analyse et d’indexation des pages, utilisées par :
les navigateurs web ;
les moteurs de recherche.
A insérer entre les balises <head> et </head>
< metaname = ”description”content = ””/ >
< metaname = ”description”content = ””/ >
< metaname = ”generator”content =
”Nomdel′ outil(version)”/ >
< metaname = ”author”content = ”[Link]”/ >
< metaname = ”copyright”content = ”©UQAR”/ >
< metaname = ”keywords”content =
”HTML, CSS, XML, JavaScript” >
< metacharset = ”utf − 8” >
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
24/24 GUINKO Tonguim Ferdinand HTML