13. L’histoire (passionnante) du HTML
• 1990 - 1992 : URL, HTTP et HTML
• 1993 : Premier navigateur (Mosaic)
• 1995 : Création du W3C, HTML 2.0
14. L’histoire (passionnante) du HTML
• 1990 - 1992 : URL, HTTP et HTML
• 1993 : Premier navigateur (Mosaic)
• 1995 : Création du W3C, HTML 2.0
• 1997 : HTML 3.2
15. L’histoire (passionnante) du HTML
• 1990 - 1992 : URL, HTTP et HTML
• 1993 : Premier navigateur (Mosaic)
• 1995 : Création du W3C, HTML 2.0
• 1997 : HTML 3.2
• 1998 - 1999 : HTML 4.01
16. L’histoire (passionnante) du HTML
• 1990 - 1992 : URL, HTTP et HTML
• 1993 : Premier navigateur (Mosaic)
• 1995 : Création du W3C, HTML 2.0
• 1997 : HTML 3.2
• 1998 - 1999 : HTML 4.01
• 2000 : XHTML 1.0
17. L’histoire (passionnante) du HTML
• 1990 - 1992 : URL, HTTP et HTML
• 1993 : Premier navigateur (Mosaic)
• 1995 : Création du W3C, HTML 2.0
• 1997 : HTML 3.2
• 1998 - 1999 : HTML 4.01
• 2000 : XHTML 1.0
• Bientôt : (X)HTML5
20. HTML ?
• Langage
(sémantique + syntaxe = communication)
• Structurer un document
21. HTML ?
• Langage
(sémantique + syntaxe = communication)
• Structurer un document
• Pour les navigateurs…
22. HTML ?
• Langage
(sémantique + syntaxe = communication)
• Structurer un document
• Pour les navigateurs…
• … et les lecteurs d’écrans, et d’autres…
(User-Agents)
23. HTML ?
• Langage
(sémantique + syntaxe = communication)
• Structurer un document
• Pour les navigateurs…
• … et les lecteurs d’écrans, et d’autres…
(User-Agents)
• Pour tous le monde !
45. Doctype
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
46. Doctype
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
50. Tête
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css"
media="screen" href="style.css" />
<title>Ma première page</title>
</head>
51. Tête
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
Meta : Information sur le document
On explique au user-agent comment utiliser le fichier
<link rel="stylesheet" type="text/css"
media="screen" href="style.css" />
<title>Ma première page</title>
</head>
52. Tête
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
Meta : Information sur le document
On explique au user-agent comment utiliser le fichier
<link rel="stylesheet" type="text/css"
media="screen" href="style.css" />
Link : Lien entre documents
On charge une feuille de style CSS
<title>Ma première page</title>
</head>
53. Tête
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
Meta : Information sur le document
On explique au user-agent comment utiliser le fichier
<link rel="stylesheet" type="text/css"
media="screen" href="style.css" />
Link : Lien entre documents
On charge une feuille de style CSS
<title>Ma première page</title>
Title : Titre de la page
</head>
61. Corps
<ul>
<li>Un item de la liste</li>
<li>Un autre item de la liste</li>
<li>Encore un item de la liste</li>
</ul>
Unordered list : Liste d’éléments sans
ordre particulier
62. Corps
<ul>
<li>Un item de la liste</li>
<li>Un autre item de la liste</li>
<li>Encore un item de la liste</li>
</ul>
Unordered list : Liste d’éléments sans
ordre particulier
<p>Ma voiture est sur le <span lang="en">parking</span>.</p>
63. Corps
<ul>
<li>Un item de la liste</li>
<li>Un autre item de la liste</li>
<li>Encore un item de la liste</li>
</ul>
Unordered list : Liste d’éléments sans
ordre particulier
<p>Ma voiture est sur le <span lang="en">parking</span>.</p>
<div id="menu">…</div>
64. Corps
<ul>
<li>Un item de la liste</li>
<li>Un autre item de la liste</li>
<li>Encore un item de la liste</li>
</ul>
Unordered list : Liste d’éléments sans
ordre particulier
<p>Ma voiture est sur le <span lang="en">parking</span>.</p>
<div id="menu">…</div>
Les balises <div> et <span> sont des éléments de
stucturation générique, sans valeur sémantique.
