Université Saad Dahlab de Blida
Faculté des sciences
Département de mathématiques
BENAISSI Sellami
[Link]@[Link]
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
3. Les nouveautés en HTML 5
Historique
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
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
3. Les nouveautés en HTML 5
Historique
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
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.
Programmation Avancée pour le Web HTTP 5
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Historique
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
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.
Programmation Avancée pour le Web HTTP 6
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Historique
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
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
Programmation Avancée pour le Web HTTP 7
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
HTML 5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[Link]
<html xmlns="[Link] xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="[Link]" />
<script type=”text/javascript” src=[Link]"></script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="[Link]" />
<script src="[Link]"></script>
</head>
<body>
</body>
</html>
Programmation Avancée pour le Web HTTP 8
2 Introduction HTML
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Definition HTML
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
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
Programmation Avancée pour le Web HTTP 10
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Definition HTML
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
Programmation Avancée pour le Web HTTP 11
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Qu’est-ce que HTML ?
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
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
Programmation Avancée pour le Web HTTP 12
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Bref historique des normes
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
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
Programmation Avancée pour le Web HTTP 13
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Les outils de développement
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
Editeur de texte (ou de code) Navigateur (Browser, Fureter)
Programmation Avancée pour le Web HTTP 14
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Balises HTML
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
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>
Programmation Avancée pour le Web HTTP 15
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Balises HTML
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
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 />
Programmation Avancée pour le Web HTTP 16
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Balises HTML
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
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>
Programmation Avancée pour le Web HTTP 17
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Code minimal en HTML5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
Voici le code minimal à utiliser pour une page HTML5 :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Programmation Avancée pour le Web HTTP 18
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Squelette standard HTML5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
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>
Programmation Avancée pour le Web HTTP 19
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Squelette standard HTML5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
Programmation Avancée pour le Web HTTP 20
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Code minimal en HTML5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en 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.
Programmation Avancée pour le Web HTTP 21
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Code minimal en HTML5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
Enregistrer le document avec l'extension
.html ou .htm
Programmation Avancée pour le Web HTTP 22
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Code minimal en HTML5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
<!DOCTYPE html >
<html>
<head>
<title>Ma première page Web</title>
</head>
<body>
Salut !
</body>
</html>
Programmation Avancée pour le Web HTTP 23
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Les commentaires dans le code
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
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
-->
Programmation Avancée pour le Web HTTP 24
Les principales balises HTML
3 standards
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Titres et sous-titres
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
Titres (6 niveaux de hiérarchie) :
• <h1> … </h1>
• <h2> … </h2>
• <h3> … </h3>
• <h4> … </h4>
• <h5> … </h5>
• <h6> … </h6>
Programmation Avancée pour le Web HTTP 26
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Titres et sous-titres
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
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>
<h2>Ceci est un titre h2</h2>
<h3>Ceci est un titre h3</h3>
<h4>Ceci est un titre h4</h4>
<h5>Ceci est un titre h5</h5>
<h6>Ceci est un titre h6</h6>
</body>
</html>
Programmation Avancée pour le Web HTTP 27
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Paragraphes
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
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>
Programmation Avancée pour le Web HTTP 28
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Les Listes
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
1 - Liste de définitions
• Liste :
<dl> … </dl>
• Élément :
<dt> … [</dt>]
• Définition :
<dd> … [</dd>]
Programmation Avancée pour le Web HTTP 29
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Les Listes
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
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> <!-- source : [Link] -->
Programmation Avancée pour le Web HTTP 30
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Les Listes
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
Liste de définitions
Programmation Avancée pour le Web HTTP 31
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Les Listes
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
2 - Liste non numérotée
Liste :
<ul> … </ul>
Élément :
<li> … [</li>]
Programmation Avancée pour le Web HTTP 32
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Les Listes
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
2 - Liste non numérotée
<p> Liste des courses :</p>
<ul>
<li>Beurre</li>
<li>Sucre</li>
<li>Farine</li>
<li>Oeufs</li>
<li>Confiture</li>
</ul>
Programmation Avancée pour le Web HTTP 33
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Les Listes
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
3 - Liste numérotée
Liste :
<ol> … </ol>
Élément :
<li> … [</li>]
Programmation Avancée pour le Web HTTP 34
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Les Listes
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
2 - Liste non numérotée
<p> Liste des courses :</p>
<ol>
<li>Beurre</li>
<li>Sucre</li>
<li>Farine</li>
<li>Oeufs</li>
<li>Confiture</li>
</ol>
Programmation Avancée pour le Web HTTP 35
- HTML 5
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
HTML 5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en 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.
Programmation Avancée pour le Web HTTP 37
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
HTML 5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en 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
Programmation Avancée pour le Web HTTP 38
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Les nouveautés en HTML 5
4. Exemples de Structures en HTML 5
5. Contenu multimedia 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>…
Programmation Avancée pour le Web HTTP 39
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Les nouveautés en HTML 5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en 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
Programmation Avancée pour le Web HTTP 40
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Les nouveautés en HTML 5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en 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>
Programmation Avancée pour le Web HTTP 41
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Exemples de Structures en HTML 5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
Programmation Avancée pour le Web HTTP 42
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Exemples de Structures en HTML 5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
Programmation Avancée pour le Web HTTP 43
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Contenu multimedia en HTML 5
4. Exemples de Structures en HTML 5
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="[Link]" type="audio/ogg"> <source src="movie.mp4" type="video/mp4">
<source src="horse.mp3" type="audio/mpeg"> <source src="[Link]" type="video/ogg">
Your browser does not support the audio element. Your browser does not support the video tag.
</audio> </video>
Programmation Avancée pour le Web HTTP 44
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Contenu multimedia en HTML 5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
L'élément <audio>
Exemple audio
<audio controls>
<source src="[Link]" 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
Programmation Avancée pour le Web HTTP 45
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Contenu multimedia en HTML 5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en 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="[Link]" 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 >
Programmation Avancée pour le Web HTTP 46
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Contenu multimedia en HTML 5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en 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="[Link]"> </object>
<object width="100%" height="500px" data="[Link]"></object>
Programmation Avancée pour le Web HTTP 47
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
Contenu multimedia en HTML 5
4. Exemples de Structures en HTML 5
5. Contenu multimedia en HTML 5
6. SVG en HTML 5
YouTube Videos
Exemple iframe
<iframe width="420" height="315"
src="[Link]
</iframe>
Pour lire votre vidéo YouTube sur une page Web, utilisez La balise <iframe >.
Ajoutez tout autre paramètre à l'URL :
Autoplay :
src="[Link]
Loop :
src="[Link] Loop =0"
Controls:
src="[Link] Controls=1"
Programmation Avancée pour le Web HTTP 48
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
SVG en HTML 5
4. Exemples de Structures en HTML 5
5. Contenu multimedia 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
Programmation Avancée pour le Web HTTP 49
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
SVG en HTML 5
4. Exemples de Structures en HTML 5
5. Contenu multimedia 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"
Programmation Avancée pour le Web HTTP 50
1. Historique
2. HTML 5
3. Les nouveautés en HTML 5
SVG en HTML 5
4. Exemples de Structures en HTML 5
5. Contenu multimedia 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>
Programmation Avancée pour le Web HTTP 51