Cours 2 - HTML - Rappels

Université Saad Dahlab de Blida
Faculté des sciences

Département de mathématiques
BENAISSI Sellami
s.benaissi@univ-blida.dz
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
1 Historique
1. Historique
2. HTML 5
Historique
6. SVG en HTML 5
Tim Berners-Lee (MIT) et Robert Calliau (CERN) inventent

le World Wide Web .
En trois mois ils :
1990
 Définissent les Hypertextes, basés sur Dynatext SGML

(précurseur de HTML) ;
 Inventent le protocole HTTP ;
 Écrivent le premier serveur web, et le premier browser et éditeur
(appelé WorldWideWeb, puis Nexus).
ViolaWWW et Mosaic sont les premiers browsers graphiques
1992
populaires.
 ViolaWWW a été le premier navigateur publié en 9 mars 1992.
 Mosaic a été publié en 23 janvier 1993.
Fondation du World Wide Web Consortium (W3C) par
1994
Berners-Lee.
Programmation Avancée pour le Web HTTP 4

1. Historique
2. HTML 5
Historique
6. SVG en HTML 5
 Première release du serveur web Apache.

 Rasmus Ledorf crée PHP.
1995
 Le développement de Netscape (précurseur de Mozilla) commence.

 JavaScript est né.
 HTML 2.0 a été publiée
 Macromedia distribue Flash en décembre 1996

1996
 La spécification CSS1 finale est publiée le 17 décembre 1996
 Le 14 janvier 1997, le W3C publie la spécification HTML 3.2.

 Le 18 décembre, le W3C publie la spécification HTML 4.0 qui
standardise notamment le support les styles, les cadres (frames)
1997
et les objets (généralisation des images et des applets).

 Standardisation de JavaScript en ECMAScript. Les documents
deviennent dynamiques.

1. Historique
2. HTML 5
Historique
6. SVG en HTML 5
1998
 Publication du standard XML en 10 février 1998

 CSS2 devient recommandation officielle w3c en mai 1998
 Java popularise le terme Application Web.

1999
 Le 24 décembre 1999, le W3C publie la spécification HTML 4.01.

Elle n’apporte que des corrections mineures à la version 4.0.
 la spécification Xhtml 1.0, publiée le 26 janvier 2000. Il s'agit

2000
d'une reformulation de html 4.01 basée sur XML au lieu de

SGML.

1. Historique
2. HTML 5
Historique
6. SVG en HTML 5
 Des membres de Apple, Mozilla et Opera quittent le W3C pour

2004
fonder le WHATWG.
 Le travail sur HTML5 est amorcé.
 Jesse James Garret crée le mot AJAX, acronyme de

2005
“Asynchronous Javascript and XML”.
 HTML 5.0 devient une recommandation en 28 octobre 2014

2014

1. Historique
2. HTML 5
HTML 5
6. SVG en HTML 5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="design.css" />
<script type=”text/javascript” src=script.js"></script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="design.css" />
<script src="script.js"></script>
</head>
<body>
</body>
</html>

2 Introduction HTML
1. Historique
2. HTML 5
Definition HTML
6. SVG en HTML 5
HTML = HyperText Markup Language ?
Hyper : Non linéaire, liens entre nœuds

Text : Composé de texte
Markup : Marqué, balisé
Language : Langage
 Langage à balises de description de documents

hypertextes
1. Historique
2. HTML 5
Definition HTML
6. SVG en HTML 5

1. Historique
2. HTML 5
Qu’est-ce que HTML ?

6. SVG en HTML 5
 Langage de présentation de documents

 N’est PAS un langage de programmation
 Langage : syntaxe STRICTE
 Utilisé pour construire les pages Web
 Navigation hypertexte : ancres, liens
 Utilise des balises
 Documents exploités par des agents utilisateurs
 Navigateur pour « visualiser » le résultat
 Robots des moteurs de recherche pour indexer
 Automates divers pour traiter les données

1. Historique
2. HTML 5
Bref historique des normes

6. SVG en HTML 5
 WWW Project Proposal (mars 1989)

 HTML 1.0 (août 1994)
 HTML 2.0 (novembre 1995)
 HTML 3.2 (janvier 1997)
 HTML 4.0 (avril 1998)
 HTML 4.01 (décembre 1999)
 XHTML 1.0 (janvier 2000)
 HTML 5 depuis 2003, depuis 2007 au
W3C, standard prévu en 2014

1. Historique
2. HTML 5
Les outils de développement

6. SVG en HTML 5
Editeur de texte (ou de code) Navigateur (Browser, Fureter)

1. Historique
2. HTML 5
Balises HTML
6. SVG en HTML 5
Balises (tags, marqueurs) HTML

HTML est un langage à balises. Une balise est constituée par un mot-clé placé
entre deux chevrons "<" et ">".
<balise> ici votre texte </balise>

1. Historique
2. HTML 5
Balises HTML
6. SVG en HTML 5
Balises (tags, marqueurs) HTML

 Texte entouré par < et > (chevrons)
 Balise Ouvrante : <balise>
 Balise Fermante : </balise>
 <html> et </html>
 <p> et </p>
 <img>
 Certaines balises peuvent être ouvrantes et fermantes. On dit alors
qu’elles sont "autofermantes". Dans ce cas, le signe "/" est placé à la fin
de la balise, juste avant le ">".
 <br />
 <hr />
 <meta />
1. Historique
2. HTML 5
Balises HTML
6. SVG en HTML 5
Utilisation des balises
Utilisation CORRECTE
<p>Texte<i>Texte Texte</i></p>
Utilisation INCORRECTE
<p>Texte<i>Texte Texte</p></i>

1. Historique
2. HTML 5
Code minimal en HTML5

6. SVG en HTML 5
Voici le code minimal à utiliser pour une page HTML5 :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

1. Historique
2. HTML 5
Squelette standard HTML5

6. SVG en HTML 5
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Titre de la page</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

1. Historique
2. HTML 5
Squelette standard HTML5

6. SVG en HTML 5

1. Historique
2. HTML 5

6. SVG en HTML 5
Voici le code minimal à utiliser pour une page HTML5 :

• La balise <!DOCTYPE> indique qu’il s’agit d’une page développée
en HTML5.
• Les balises <html> et </html> délimitent le document HTML.
• Les balises <head> et </head> constituent l’en-tête du document.
Entre ces balises, vous définirez différents éléments tels que :
• le texte affiché dans la barre de titre du navigateur ;
• le jeu de caractères utilisé dans la page ;
• des informations de référencement à l’attention des moteurs de
recherche, etc.
• Les balises <body> et </body> délimitent le document. C’est ici que
vous insérerez le contenu (texte, images, etc.) qui doit être affiché
dans la page.

1. Historique
2. HTML 5

6. SVG en HTML 5
Enregistrer le document avec l'extension

.html ou .htm

1. Historique
2. HTML 5

6. SVG en HTML 5
<!DOCTYPE html >

<html>
<head>
<title>Ma première page Web</title>
</head>
<body>
Salut !
</body>
</html>

1. Historique
2. HTML 5
Les commentaires dans le code

6. SVG en HTML 5
Il est très important d’insérer des commentaires dans le code que

vous développez. Si vous devez y apporter des modifications, vous
saurez tout de suite quelle partie du code est concernée…
En HTML, vous utiliserez une balise un peu particulière :
<!–- Voici un commentaire HTML -->
<!–-
Voici un commentaire HTML qui
peut se placer sur plusieurs lignes
-->

Les principales balises HTML
3 standards
1. Historique
2. HTML 5
Titres et sous-titres
6. SVG en HTML 5
Titres (6 niveaux de hiérarchie) :

• <h1> … </h1>
• <h2> … </h2>
• <h3> … </h3>
• <h4> … </h4>
• <h5> … </h5>
• <h6> … </h6>

1. Historique
2. HTML 5
Titres et sous-titres
6. SVG en HTML 5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Titres h1 à h6</title>
</head>
<body>
<h1>Ceci est un titre h1</h1>
</body>
</html>

1. Historique
2. HTML 5
Paragraphes
6. SVG en HTML 5
Paragraphes
• <p> … [</p>]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Paragraphes </title>
</head>
<body>
<p> Bonjour tout le monde!</p>
</body>
</html>

1. Historique
2. HTML 5
Les Listes
6. SVG en HTML 5
1 - Liste de définitions
• Liste :
<dl> … </dl>
• Élément :
<dt> … [</dt>]
• Définition :
<dd> … [</dd>]

1. Historique
2. HTML 5
Les Listes
6. SVG en HTML 5
1 - Liste de définitions
<dl>
<dt>Ours</dt>
<dd>Les ours sont de grands mammifères plantigrades de
l'ordre des Carnivores, famille des Ursidés, sous-famille des
Ursinés.
</dd>
<dt>Chèvre
<dd>La chèvre est un mammifère herbivore et ruminant,
appartenant à la famille des bovidés, sous-famille des
caprinés ou caprins.
</dl> 

1. Historique
2. HTML 5
Les Listes
6. SVG en HTML 5
Liste de définitions

1. Historique
2. HTML 5
Les Listes
6. SVG en HTML 5
2 - Liste non numérotée
Liste :
<ul> … </ul>
Élément :
<li> … [</li>]

1. Historique
2. HTML 5
Les Listes
6. SVG en HTML 5
<p> Liste des courses :</p>

<ul>
<li>Beurre</li>
<li>Sucre</li>
<li>Farine</li>
<li>Oeufs</li>
<li>Confiture</li>
</ul>

1. Historique
2. HTML 5
Les Listes
6. SVG en HTML 5
3 - Liste numérotée
Liste :
<ol> … </ol>
Élément :
<li> … [</li>]

1. Historique
2. HTML 5
Les Listes
6. SVG en HTML 5
<p> Liste des courses :</p>

<ol>
<li>Beurre</li>
<li>Sucre</li>
<li>Farine</li>
<li>Oeufs</li>
<li>Confiture</li>
</ol>

1. Historique
2. HTML 5
Tableaux
6. SVG en HTML 5
Tableau : <table> … </table>

Ligne : <tr> … [</tr>]
Cellule : <td> … [</td>]
Cellule d’en-tête : <th> … [</th>]
Colonnes = nombre maxi de <td> par <tr>

1. Historique
2. HTML 5
Tableaux
6. SVG en HTML 5
<table border>
<tr>
<th>Titre colonne 1</th>
<th>Titre colonne 2</th>
</tr>
<tr>
<td>Cellule 1 ligne 1</td>
</tr>
<tr>
</tr>
</table>

1. Historique
2. HTML 5
Tableaux
6. SVG en HTML 5
Fusionner des cellules

Les cellules d’un tableau peuvent être fusionnées horizontalement et/ou
verticalement en utilisant respectivement les attributs colspan et
rowspan.
<td colspan="2">contenu</td>
<td rowspan="2">contenu</td>

<table border >
<tr> <td rowspan="2" ></td>
<td rowspan="2" ></td>
<td rowspan="2">Année</td>
<td colspan="2">Bilan</td> </tr>
<tr> <td>Recettes</td>
<td>Dépenses</td> </tr>
<tr> <td rowspan="4">Département</td>
<td rowspan=2>Informatique</td>
<td>2012</td><td>53</td><td>50</td> </tr>
<tr> <td>2013</td> <td>56</td><td>50</td> </tr>
<tr> <td rowspan="2">Mathématiques</td>
<td>2012</td><td>44</td><td>43</td> </tr>
<tr> <td>2013</td>
<td>48</td> <td>42</td> </tr>
</table>
1. Historique
2. HTML 5
Tableaux
6. SVG en HTML 5
Groupe de lignes d’en-tête

<thead> … [</thead>]
Groupe de lignes de corps

<tbody> … [</tbody>]
Groupe de lignes de bas de tableau

<tfoot> … [</tfoot>]

1. Historique
2. HTML 5
Tableaux
6. SVG en HTML 5
Ajouter une légende au tableau

La balise <caption> permet d’ajouter une légende à un tableau. Elle doit
être unique et insérée immédiatement après la balise <table>. Par défaut,
la légende est affichée au-dessus du tableau et centrée horizontalement.
<table border>
<caption>Titre du tableau</caption>
<tr>
<td>Elément 1 ligne 1</td>
</tr>
<tr>
</tr>
</table>

1. Historique
2. HTML 5
Liens et ancres
6. SVG en HTML 5
Un lien vous permet de passer d'une page à une autre, de lire des films et du son,
d'envoyer des e-mails, de télécharger des fichiers, etc.
Un lien comporte trois parties : une destination, une étiquette (label) et une cible
Pour créer un lien, utilisez la balise <a>
<a href="URL"> label </a>

1. Historique
2. HTML 5
Liens et ancres
6. SVG en HTML 5
Un lien vers une autre page

Pour faire un lien, on utilise la balise < a> < / a> .On doit ajouter l'attribut
href pour indiquer l'adresse de la page cible ( la page vers laquelle le lien
amène) :
<a href="index.html"> Cliquez ici </a>
Un lien pour envoyer un mail

Il suffit de faire commencer le lien par "mailto: " et d'écrire l'adresse e-
mail où on peut vous contacter .
<a href="mailto:sbenaissi@gmail.com"> Envoyer email </a>

1. Historique
2. HTML 5
Liens et ancres
6. SVG en HTML 5
Un lien vers une ancre

Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va
alors servir de repère. Ce peut être n'importe quelle balise.
<h2 id="mon_ancre"> Titre niveau2222 </h2>
Ensuite, il suffit de faire un lien comme d'habitude, mais cet te fois
l'attribut href contiendra un dièse (# ) suivi du nom de l'ancre.
Exemple :
<a href="#mon_ancre"> Aller vers l'ancre </a>
Lien vers une ancre située dans une autre page
<a href="index.html#mon_ancre"> Aller vers l'ancre </a>

1. Historique
2. HTML 5
Les Images
6. SVG en HTML 5
Pour insérer une image, on doit utiliser la balise < img / > (balise seule
de type inline) . Elle peut prendre plusieurs attributs
<img src="URL" alt="texte alternatif"

[width="w"][height="h"] [title="text1"] / >
src : URI permettant d’atteindre l’image, il permet d'indiquer où

se trouve l'image
alt : Texte alternatif si l’image est indisponible/corrompue
width et height : largeur et hauteur de l’image en pixels
title : info-bulle de l’image

1. Historique
2. HTML 5
inline, block elements

6. SVG en HTML 5
Les balises HTML sont utilisées pour afficher des données sur l’écran ou pour
encapsuler d’autres balises HTML. On peut classer ces balises en deux grands
groupes : inline et block
Les balises de type inline sont les suivantes :

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>,
<code>,<dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>,
<q>,<samp>, <script>, <select>, <small>, <span>, <strong>, <sub>,
<sup>,<textarea>, <tt> et <var>.
Les balises de type block sont les suivantes :
<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>,

<dd>,<div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>,
<h1> à <h6>, <header>, <hgroup>, <hr>, <noscript>, <ol>, <output>, <p>,
<pre>,<section>, <table>, <tfoot>, <ul>, <video>.
1. Historique
2. HTML 5
inline, block elements

6. SVG en HTML 5
Saut de ligne : <br/>

Ligne de séparation horizontale : <hr>
Groupe « mode en ligne » : <span> … </span>
Groupe « mode bloc » : <div> … </div>
Styles logiques
Citation :<cite> … </cite>
Code :<code> … </code>
Mise en valeur :<em> … </em>
Mise en valeur :<strong> … </strong>
Exemple :<samp> … </samp>

- HTML 5
1. Historique
2. HTML 5
HTML 5
6. SVG en HTML 5
HTML5 est la dernière évolution des standards qui définissent HTML.

HTML 5 est le successeur de HTML 4. Le travail sur HTML 5 a commencé fin 2004
grâce à un groupe de travail indépendant qui préconisait une approche
pragmatique, le WhatWG, contrairement au W3C qui misait tous ses efforts sur
XHTML 2. Ce n'est qu'en 2007 que le W3C accepte la vision HTML5 en intégrant en
son sein ce groupe de travail. Les principes de conception sont clairs :
 simplifier l'usage de HTML,

 officialiser les pratiques courantes,
 et assurer un maximum de rétro-compatibilité.
L’HTML5 est donc le fruit des travaux du W3C et du WHATWG.

1. Historique
2. HTML 5
HTML 5
6. SVG en HTML 5
HTML 5 28 October 2014.
HTML 5.1 2nd Edition 3 October 2017
HTML 5.2 14 December 2017

1. Historique
2. HTML 5
Les nouveautés en HTML 5

6. SVG en HTML 5
Beaucoup de changement ont été effectués. Même s'il y a beaucoup de

nouveautés, il y a des balises qui elles sont désormais dépréciées,
HTML5 a apporté plus de richesse fonctionnelle qu'on peut résumer
dans ces points :
 Un allégement du code: certaines balises ont été simplifiées afin d’alléger le
code :
Tels que : <!Doctype >, <html>, et <meta>.
 Nouveaux conteneurs : HTML5 a innové de nouvelles balises (conteneurs)

dites sémantiques :
Tels que : <header>, <footer>, <article>, <nav>, <section>…

1. Historique
2. HTML 5

6. SVG en HTML 5
 Prise en charge du flux multimédia : HTML5 permet d'intégrer

directement un contenu multimédia (audio, vidéo ou
animation) sans que le navigateur n'aie besoin de plugin:
Tels que : <audio> et <video>.
 De nouveaux champs de formulaire : HTML5 propose de nouveaux

champs de formulaire de la famille <input> qui s'avèrent
très utiles lors de leur saisie:
Tels que : datetime, datetime-local, date, month , week, time,

number, range, email, url, search, color

1. Historique
2. HTML 5

6. SVG en HTML 5
 Nouveaux attributs : Il existe d'autres nouveaux attributs HTML5

spécifiques à certains éléments uniquement
Tels que : ping sur <a>, charset sur <meta>

ou bien applicables à tous.
Tels que : contextmenu, hidden, data-*, etc.
 Elements supprimées : De nombreux éléments ont été supprimés en

raison d'être remplacés par d'autres éléments
Tels que : <acronym> remplacé par <abbr>
Ou utilisez CSS à la place

Tels que : <font>, <basefont>, <big>, <center>, <s>, <u>

1. Historique
2. HTML 5
Exemples de Structures en HTML 5

6. SVG en HTML 5

1. Historique
2. HTML 5
Exemples de Structures en HTML 5

6. SVG en HTML 5

1. Historique
2. HTML 5
Contenu multimedia en HTML 5

6. SVG en HTML 5
avant HTML5,
 pas de standard pour afficher des fichiers audio
ou vidéo sur une page web
 nécessitaient un plug-in comme flash
HTML5 : éléments <audio> et <video>
Exemple audio Exemple vidéo

<audio controls> <video width="320" height="240" controls>
<source src="horse.ogg" type="audio/ogg"> <source src="movie.mp4" type="video/mp4">
<source src="horse.mp3" type="audio/mpeg"> <source src="movie.ogg" type="video/ogg">
Your browser does not support the audio element. Your browser does not support the video tag.
</audio> </video>

1. Historique
2. HTML 5

6. SVG en HTML 5
L'élément <audio>
Exemple audio
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
 L'attribut controls ajoute des contrôles audio, comme play, pause, et volume
 L'élément <source> vous permet de spécifier des fichiers audio parmi lesquels le
navigateur peut choisir. Le navigateur utilisera le premier format reconnu.
 Le texte entre les balises <audio> et </ audio> ne sera affiché que dans les
navigateurs qui ne supportent pas l'élément <audio>
 il y a 3 formats audio sont supporté: MP3, WAV et OGG

1. Historique
2. HTML 5

6. SVG en HTML 5
L'élément <video >
Exemple vidéo
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
 il y a 3 formats audio sont supporté: MP4, WebM et OGG

 Il est préférable d'inclure toujours les attributs width et height. Si la hauteur et la
largeur ne sont pas définies, la page peut scintiller pendant le chargement de la
vidéo.
 Pour démarrer une vidéo automatiquement, utilisez l'attribut autoplay:
<video width="320" height="240" autoplay >

1. Historique
2. HTML 5

6. SVG en HTML 5
L'élément <object>
 La balise <object> définit un objet dans un document HTML. Utilisez cet
élément pour incorporer du multimédia (audio, vidéo, applets Java,
ActiveX, PDF et Flash) dans vos pages Web.
 Vous pouvez également utiliser la balise <object> pour incorporer une autre
page Web dans votre document HTML.
 Vous pouvez utiliser la balise <param> pour transmettre des paramètres

aux plug-ins incorporés à la balise <object>.
Exemple object
<object width="400" height="400" data="helloworld.swf"> </object>
<object width="100%" height="500px" data="snippet.html"></object>

1. Historique
2. HTML 5

6. SVG en HTML 5
YouTube Videos
Exemple iframe
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
 Pour lire votre vidéo YouTube sur une page Web, utilisez La balise <iframe >.
 Ajoutez tout autre paramètre à l'URL :
 Autoplay :
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1"
 Loop :
src="https://www.youtube.com/embed/tgbNymZ7vqY? Loop =0"
 Controls:
src="https://www.youtube.com/embed/tgbNymZ7vqY? Controls=1"
1. Historique
2. HTML 5
SVG en HTML 5
6. SVG en HTML 5
La balise <svg> Image Vectorielle

HTML5 introduit un nouvel élément afin d'embarquer du contenu SVG dans une page web.
Exemple svg
<svg width="400" height="410">
<rect width="100" height="300" x="0" y="10" fill=rgb(110,110,255)
stroke-width=3 stroke="red" />
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3"
fill="red" />
<circle cx="50" cy="50" r="20" stroke="black" stroke-width="3"
fill="white" />
<rect width="100" height="300" x="150" y="10" rx="20" ry="20"
fill=blue stroke-width=3 stroke=rgb(0,0,0) />
<polygon points="200,110 140,298 290,178 110,178 260,298" fill=lime
stroke=purple stroke-width=5 fill-rule=nonzero />
<text x="110" y="215" fill="white" transform="rotate(30 20,30)" >Here
is the SVG </text>
Sorry, your browser does not support inline SVG.
</svg>
SVG signifie Scalable Vector Graphics

1. Historique
2. HTML 5
SVG en HTML 5
6. SVG en HTML 5
<svg width="400" height="410">

<rect width="100" height="300" x="150" y="10" rx="20" ry="20" fill=blue stroke-width=5 stroke=red />
</svg>
svg width="400"
rect width=“100"
y="10"
x="150"
svg height="410"
rect height=“300"
rx="20" ry="20"

1. Historique
2. HTML 5
SVG en HTML 5
6. SVG en HTML 5
Les Formes SVG

SVG a des éléments de forme prédéfinis qui peuvent être utilisés :
 Rectangle <rect>
 Cercle < circle >
 Ellipse <ellipse>
 Ligne < line >
 Polyligne < polyline >
 Polygone < polygon >
 Chemin < path >
 Text < text>

Cours 2 - HTML - Rappels

Transféré par

Informations du document

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

Cours 2 - HTML - Rappels

Transféré par

Droits d'auteur :

Formats disponibles

Université Saad Dahlab de Blida

Faculté des sciences

3. Les nouveautés en HTML 5

4. Exemples de Structures en HTML 5

5. Contenu multimedia en HTML 5

Tim Berners-Lee (MIT) et Robert Calliau (CERN) inventent

 Définissent les Hypertextes, basés sur Dynatext SGML

Programmation Avancée pour le Web HTTP 4

 Première release du serveur web Apache.

 Le développement de Netscape (précurseur de Mozilla) commence.

 Macromedia distribue Flash en décembre 1996

 La spécification CSS1 finale est publiée le 17 décembre 1996

 Le 14 janvier 1997, le W3C publie la spécification HTML 3.2.

et les objets (généralisation des images et des applets).

Programmation Avancée pour le Web HTTP 5

 Publication du standard XML en 10 février 1998

 Java popularise le terme Application Web.

 Le 24 décembre 1999, le W3C publie la spécification HTML 4.01.

 la spécification Xhtml 1.0, publiée le 26 janvier 2000. Il s'agit

d'une reformulation de html 4.01 basée sur XML au lieu de

Programmation Avancée pour le Web HTTP 6

 Des membres de Apple, Mozilla et Opera quittent le W3C pour

 Jesse James Garret crée le mot AJAX, acronyme de

“Asynchronous Javascript and XML”.

 HTML 5.0 devient une recommandation en 28 octobre 2014

Programmation Avancée pour le Web HTTP 7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Programmation Avancée pour le Web HTTP 8

HTML = HyperText Markup Language ?

Hyper : Non linéaire, liens entre nœuds

 Langage à balises de description de documents

Programmation Avancée pour le Web HTTP 11

Qu’est-ce que HTML ?

 Langage de présentation de documents

Programmation Avancée pour le Web HTTP 12

Bref historique des normes

 WWW Project Proposal (mars 1989)

Programmation Avancée pour le Web HTTP 13

Les outils de développement

Editeur de texte (ou de code) Navigateur (Browser, Fureter)

Programmation Avancée pour le Web HTTP 14

Balises (tags, marqueurs) HTML

<balise> ici votre texte </balise>

Programmation Avancée pour le Web HTTP 15

Balises (tags, marqueurs) HTML

Utilisation des balises

Programmation Avancée pour le Web HTTP 17

Code minimal en HTML5

Voici le code minimal à utiliser pour une page HTML5 :

Programmation Avancée pour le Web HTTP 18

Squelette standard HTML5

Programmation Avancée pour le Web HTTP 19

Squelette standard HTML5

Programmation Avancée pour le Web HTTP 20

Code minimal en HTML5

Voici le code minimal à utiliser pour une page HTML5 :

Programmation Avancée pour le Web HTTP 21

Code minimal en HTML5

Enregistrer le document avec l'extension

Programmation Avancée pour le Web HTTP 22

Code minimal en HTML5

<!DOCTYPE html >

Programmation Avancée pour le Web HTTP 23

Les commentaires dans le code