Mais conteúdo relacionado
Semelhante a Html et xhtml (17)
Mais de Fred Colantonio (20)
Html et xhtml
- 1. HTML
Apprendre le langage le plus utilisé sur le web
Module de cours
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 2. Plan
1. Aperçu
2. Structure d’une page HTML
3. Balises textes
4. Balises multimédias
5. Balises hypertextes
6. Balises listes
7. Balises formulaires
8. HTML et référencement
9. HTML et Web 2.0
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 3. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
2. Squelette d’une page HTML
3. HTML et les autres langages
1. Imbrication HTML et CSS
2. Imbrication HTML et PHP
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 4. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 5. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
1. HTML : un langage qui marque le web !
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 6. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
1. HTML : un langage qui marque le web !
• HTML ? HyperText Markup Language
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 7. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
1. HTML : un langage qui marque le web !
• HTML ? HyperText Markup Language
• Quoi ? Un format de données
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 8. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
1. HTML : un langage qui marque le web !
• HTML ? HyperText Markup Language
• Quoi ? Un format de données
• Pour ? Modéliser des pages web
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 9. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
1. HTML : un langage qui marque le web !
• HTML ? HyperText Markup Language
• Quoi ? Un format de données
• Pour ? Modéliser des pages web
• But ? Traitement, manipulation et rendu d’information
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 10. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
1. HTML : un langage qui marque le web !
• HTML ? HyperText Markup Language
• Quoi ? Un format de données
• Pour ? Modéliser des pages web
• But ? Traitement, manipulation et rendu d’information
• Comment ? Grâce au <balisage>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 11. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 12. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
2. La famille : HTML, le patriarche
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 13. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
2. La famille : HTML, le patriarche
• Historiquement le plus ancien (1992)
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 14. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
2. La famille : HTML, le patriarche
• Historiquement le plus ancien (1992)
• Socle du langage de présentation de pages web
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 15. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
2. La famille : HTML, le patriarche
• Historiquement le plus ancien (1992)
• Socle du langage de présentation de pages web
• Encadré par le W3C (World Wide Web Consortium)
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 16. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
2. La famille : HTML, le patriarche
• Historiquement le plus ancien (1992)
• Socle du langage de présentation de pages web
• Encadré par le W3C (World Wide Web Consortium)
• Père de tous les dérivés : htm, dhtml, xhtml...
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 17. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
2. La famille : HTML, le patriarche
• Historiquement le plus ancien (1992)
• Socle du langage de présentation de pages web
• Encadré par le W3C (World Wide Web Consortium)
• Père de tous les dérivés : htm, dhtml, xhtml...
• Marié à SGML (Standard Generalized Markup Language)
langage normalisé de balisage généralisé = langage de
description utilisant des balises
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 18. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 19. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
3. La famille : DHTML, le cousin qu’on ne voit jamais
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 20. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
3. La famille : DHTML, le cousin qu’on ne voit jamais
• DHTML n’existe pas (normes, langages)
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 21. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
3. La famille : DHTML, le cousin qu’on ne voit jamais
• DHTML n’existe pas (normes, langages)
• Dynamisation du contenu par des interactions une fois
la page chargée
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 22. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
3. La famille : DHTML, le cousin qu’on ne voit jamais
• DHTML n’existe pas (normes, langages)
• Dynamisation du contenu par des interactions une fois
la page chargée
• Ensemble de technologies web
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 23. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
3. La famille : DHTML, le cousin qu’on ne voit jamais
• DHTML n’existe pas (normes, langages)
• Dynamisation du contenu par des interactions une fois
la page chargée
• Ensemble de technologies web
• HTML
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 24. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
3. La famille : DHTML, le cousin qu’on ne voit jamais
• DHTML n’existe pas (normes, langages)
• Dynamisation du contenu par des interactions une fois
la page chargée
• Ensemble de technologies web
• HTML
• CSS
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 25. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
3. La famille : DHTML, le cousin qu’on ne voit jamais
• DHTML n’existe pas (normes, langages)
• Dynamisation du contenu par des interactions une fois
la page chargée
• Ensemble de technologies web
• HTML
• CSS
• JavaScript
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 26. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 27. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
4. La famille : HTM, le vieil oncle malade
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 28. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
4. La famille : HTM, le vieil oncle malade
• Simple réduction de HTML
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 29. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
4. La famille : HTM, le vieil oncle malade
• Simple réduction de HTML
• Format utilisé par Microsoft à une époque
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 30. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
4. La famille : HTM, le vieil oncle malade
• Simple réduction de HTML
• Format utilisé par Microsoft à une époque
• En fin de vie
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 31. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 32. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
5. La famille : XHTML, l’héritier nouveau roi
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 33. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
5. La famille : XHTML, l’héritier nouveau roi
• eXtensible HyperText Markup Language
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 34. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
5. La famille : XHTML, l’héritier nouveau roi
• eXtensible HyperText Markup Language
• Marié à XML (eXtensible Markup Language) : plus
actuel et plus simple que SGML
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 35. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
5. La famille : XHTML, l’héritier nouveau roi
• eXtensible HyperText Markup Language
• Marié à XML (eXtensible Markup Language) : plus
actuel et plus simple que SGML
• XHTML 1.0 : simple reformulation du HTML 4.01
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 36. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
5. La famille : XHTML, l’héritier nouveau roi
• eXtensible HyperText Markup Language
• Marié à XML (eXtensible Markup Language) : plus
actuel et plus simple que SGML
• XHTML 1.0 : simple reformulation du HTML 4.01
• XHTML 1.1 : ajout de nouveaux éléments syntaxiques
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 37. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
5. La famille : XHTML, l’héritier nouveau roi
• eXtensible HyperText Markup Language
• Marié à XML (eXtensible Markup Language) : plus
actuel et plus simple que SGML
• XHTML 1.0 : simple reformulation du HTML 4.01
• XHTML 1.1 : ajout de nouveaux éléments syntaxiques
• XHTML BASIC : version simplifiée pour clients légers
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 38. 1. Aperçu
1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
5. La famille : XHTML, l’héritier nouveau roi
• eXtensible HyperText Markup Language
• Marié à XML (eXtensible Markup Language) : plus
actuel et plus simple que SGML
• XHTML 1.0 : simple reformulation du HTML 4.01
• XHTML 1.1 : ajout de nouveaux éléments syntaxiques
• XHTML BASIC : version simplifiée pour clients légers
• En préparation : XHTML 2.0
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 39. 1. Aperçu
2. Squelette d’une page HTML classique
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 40. 1. Aperçu
2. Squelette d’une page HTML classique
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;>
<title>Titre de la page</title>
<body>
<p>Un paragraphe</p>
</body>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 41. 1. Aperçu
2. Squelette d’une page XHTML
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;>
<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;>
<head>
<title>Titre de la page</title> partie invisible
</head> à l’écran
<body>
<p>Un paragraphe</p> partie visible
</body> à l’écran
</html>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 42. 1. Aperçu
2. Squelette d’une page XHTML
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;>
<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;>
<head>
<title>Titre de la page</title> partie invisible
</head> à l’écran
<body>
<p>Un paragraphe</p> partie visible
</body> à l’écran
</html>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 43. 1. Aperçu
2. Squelette d’une page XHTML
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;>
<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;>
<head>
<title>Titre de la page</title> partie invisible
</head> à l’écran
<body>
<p>Un paragraphe</p> partie visible
</body> à l’écran
</html>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 44. 1. Aperçu
2. Squelette d’une page XHTML
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;>
<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;>
<head>
<title>Titre de la page</title> partie invisible
</head> à l’écran
<body>
<p>Un paragraphe</p> partie visible
</body> à l’écran
</html>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 45. 1. Aperçu
3. HTML et les autres langages
1. HTML et CSS
• Cascading Style Sheet
• Langage de description des documents HTML et XML
• Gère la présentation (mise en page, rendu)
• Encadré par le W3C (World Wide Web Consortium)
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 46. 1. Aperçu
3. HTML et les autres langages
1. HTML et CSS : imbrication interne
<body style=“color:white”>
<p style=“font-size:12px;”>Texte</p>
<ul style= “list-style=square”>
<li style=“margin-left:10px;”>élément 1</li>
<li>élément 2</li>
</ul>
</body>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 47. 1. Aperçu
3. HTML et les autres langages
1. HTML et CSS : imbrication interne
<body style=“color:white”>
<p style=“font-size:12px;”>Texte</p>
<ul style= “list-style=square”>
<li style=“margin-left:10px;”>élément 1</li>
<li>élément 2</li>
</ul>
</body>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 48. 1. Aperçu
3. HTML et les autres langages
1. HTML et CSS : imbrication externe (ou head)
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 49. 1. Aperçu
3. HTML et les autres langages
1. HTML et CSS : imbrication externe (ou head)
HTML
<body>
<p>Texte</p>
<ul>
<li>élément 1</li>
<li>élément 2</li>
</ul>
</body>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 50. 1. Aperçu
3. HTML et les autres langages
1. HTML et CSS : imbrication externe (ou head)
HTML CSS
<body> body {color: white;}
<p>Texte</p>
<ul> p {font-size: 12px;}
<li>élément 1</li>
<li>élément 2</li> ul {list-style: square;}
</ul>
</body> li {margin-left: 10px;}
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 51. 1. Aperçu
3. HTML et les autres langages
2. HTML et PHP
• PHP : Hypertext Preprocessor
• Langage de scripts côté serveur
• Mouvance libre
• Utilisé pour créer des pages web dynamiques
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 52. 2. Structure d’une page HTML
1. Balises et attributs
2. Le Head
3. Le Body
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 53. 2. Structure d’une page HTML
1. Balises et attributs
1. Quelques balises
<!doctype> <img>
<h1> <p>
<html> <form>
<h2> <br>
<head> <input>
<h3> <hr>
<body> <textarea>
<h4> <ul>
<meta> <embed>
<h5> <ol>
<title> <object>
<h6> <li>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 54. 2. Structure d’une page HTML
1. Balises et attributs
2. Attributs
• Elément présent dans la balise d’ouverture
• Définit des propriétés supplémentaires
• Forme : clé=valeur
• Exemples :
• <a href=“http://www.c-group.be”>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 55. 2. Structure d’une page HTML
1. Balises et attributs
2. Attributs
• Elément présent dans la balise d’ouverture
• Définit des propriétés supplémentaires
• Forme : clé=valeur
• Exemples :
• <a href=“http://www.c-group.be”>
balise
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 56. 2. Structure d’une page HTML
1. Balises et attributs
2. Attributs
• Elément présent dans la balise d’ouverture
• Définit des propriétés supplémentaires
• Forme : clé=valeur
• Exemples :
• <a href=“http://www.c-group.be”>
balise attribut
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 57. 2. Structure d’une page HTML
1. Balises et attributs
2. Attributs
• Elément présent dans la balise d’ouverture
• Définit des propriétés supplémentaires
• Forme : clé=valeur
• Exemples :
• <a href=“http://www.c-group.be”>
balise attribut
clé
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 58. 2. Structure d’une page HTML
1. Balises et attributs
2. Attributs
• Elément présent dans la balise d’ouverture
• Définit des propriétés supplémentaires
• Forme : clé=valeur
• Exemples :
• <a href=“http://www.c-group.be”>
balise attribut
clé valeur
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 59. 2. Structure d’une page HTML
1. Balises et attributs
2. Attributs
• <img src=“smile.png” />
• <p align=“left”>Déconseillé (*)</p>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 60. 2. Structure d’une page HTML
1. Balises et attributs
2. Attributs
• <img src=“smile.png” />
balise
• <p align=“left”>Déconseillé (*)</p>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 61. 2. Structure d’une page HTML
1. Balises et attributs
2. Attributs
• <img src=“smile.png” />
balise attribut
• <p align=“left”>Déconseillé (*)</p>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 62. 2. Structure d’une page HTML
1. Balises et attributs
2. Attributs
• <img src=“smile.png” />
balise attribut
clé
• <p align=“left”>Déconseillé (*)</p>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 63. 2. Structure d’une page HTML
1. Balises et attributs
2. Attributs
• <img src=“smile.png” />
balise attribut
clé valeur
• <p align=“left”>Déconseillé (*)</p>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 64. 2. Structure d’une page HTML
1. Balises et attributs
2. Attributs
• <img src=“smile.png” />
balise attribut
clé valeur
• <p align=“left”>Déconseillé (*)</p>
balise
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 65. 2. Structure d’une page HTML
1. Balises et attributs
2. Attributs
• <img src=“smile.png” />
balise attribut
clé valeur
• <p align=“left”>Déconseillé (*)</p>
balise attribut
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 66. 2. Structure d’une page HTML
1. Balises et attributs
2. Attributs
• <img src=“smile.png” />
balise attribut
clé valeur
• <p align=“left”>Déconseillé (*)</p>
balise attribut
clé
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 67. 2. Structure d’une page HTML
1. Balises et attributs
2. Attributs
• <img src=“smile.png” />
balise attribut
clé valeur
• <p align=“left”>Déconseillé (*)</p>
balise attribut
clé valeur
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 68. 2. Structure d’une page HTML
1. Balises et attributs
2. Attributs
• <img src=“smile.png” />
balise attribut
clé valeur
• <p align=“left”>Déconseillé (*)</p>
balise attribut
clé valeur
(*) Les propriétés de mise en page peuvent être assignées
simplement par CSS !
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 69. 2. Structure d’une page HTML
1. Balises et attributs
3. Exemple de balises imbriquées dans une page
<body>
<p>Texte</p>
<ul>
<li>élément 1</li>
<li>élément 2</li>
</ul>
</body>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 70. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
1. Une balise ouverte doit être fermée
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 71. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
1. Une balise ouverte doit être fermée
<body>
</body>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 72. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
1. Une balise ouverte doit être fermée
<body>
<p>
Texte
</p>
</body>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 73. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
1. Une balise ouverte doit être fermée
<body>
<p>
Texte
</p>
<ul>
</ul>
</body>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 74. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
1. Une balise ouverte doit être fermée
<body>
<p>
Texte
</p>
<ul>
<li>
Elément 1
</li>
</ul>
</body>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 75. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
1. Une balise ouverte doit être fermée
Balise d’ouverture : <balise>
<body>
<p>
Texte
</p>
<ul>
<li>
Elément 1
</li>
</ul>
</body>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 76. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
1. Une balise ouverte doit être fermée
Balise d’ouverture : <balise>
<body>
<p>
Texte
</p>
<ul>
<li>
Elément 1
</li>
</ul>
Balise de fermeture : </balise>
</body>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 77. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
2. ... même pour les balises uniques
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 78. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
2. ... même pour les balises uniques
<br> devient <br />
<hr> devient <hr />
<img> devient <img />
Exemple concret :
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 79. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
2. ... même pour les balises uniques
<br> devient <br />
<hr> devient <hr />
<img> devient <img />
Exemple concret :
<img src=“smile.jpg” /> affichera :
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 80. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
2. ... même pour les balises uniques
<br> devient <br />
<hr> devient <hr />
<img> devient <img />
Exemple concret :
<img src=“smile.jpg” /> affichera :
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 81. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
2. ... même pour les balises uniques
<br> devient <br />
<hr> devient <hr />
<img> devient <img />
Exemple concret :
<img src=“smile.jpg” /> affichera :
Note : fermer les balises est une bonne pratique XHTML
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 82. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbrication des balises
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 83. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbrication des balises
Bonne imbrication
<p>
Texte
</p>
<ul>
<li>
Elément 1
</li>
</ul>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 84. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbrication des balises
Bonne imbrication
<p>
Texte
</p>
<ul>
<li>
Elément 1
</li>
</ul>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 85. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbrication des balises
Bonne imbrication Mauvaise imbrication
<p> <p>
Texte Texte
</p> <ul>
<ul> </p>
<li> <li>
Elément 1 Elément 1
</li> </ul>
</ul> </li>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 86. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbrication des balises
Bonne imbrication Mauvaise imbrication
<p> <p>
Texte Texte
</p> <ul>
<ul> </p>
<li> <li>
Elément 1 Elément 1
</li> </ul>
</ul> </li>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 87. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbrication des balises
Bonne imbrication Mauvaise imbrication
<p> <p>
Texte Texte
</p> <ul>
<ul> </p>
<li> <li>
Elément 1 Elément 1
</li> </ul>
</ul> </li>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 88. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbrication des balises
Bonne imbrication Mauvaise imbrication
<p> <p>
Texte Texte
</p> <ul>
<ul> </p>
<li> <li>
Elément 1 Elément 1
</li> </ul>
</ul> </li>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 89. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbrication des balises
Bonne imbrication Mauvaise imbrication
<p> <p>
Texte Texte
</p> <ul>
<ul> </p>
<li> <li>
Elément 1 Elément 1
</li> </ul>
</ul> </li>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 90. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbrication des balises
Bonne imbrication Mauvaise imbrication
<p> <p>
Texte Texte
</p> <ul>
<ul> </p>
<li> <li>
Elément 1 Elément 1
</li> </ul>
</ul> </li>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 91. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbrication des balises
Bonne imbrication Mauvaise imbrication
<p> <p>
Texte Texte
</p> <ul>
<ul> </p>
<li> <li>
Elément 1 Elément 1
</li> </ul>
</ul> </li>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 92. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
3. Bien gérer l’imbrication des balises
Bonne imbrication Mauvaise imbrication
<p> <p>
Texte Texte
</p> <ul>
<ul> </p>
<li> <li>
Elément 1 Elément 1
</li> </ul>
</ul> </li>
Moralité : Il faut toujours fermer pour pouvoir rouvrir...
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 93. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
4. Proscrire les balises de mise en forme
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 94. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
4. Proscrire les balises de mise en forme
Balises HTML
<b> : mise en gras
<i> : mise en italique
<u> : soulignement
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 95. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
4. Proscrire les balises de mise en forme
Balises HTML
<b> : mise en gras
<i> : mise en italique
<u> : soulignement
Ces propriétés peuvent être assignées simplement par CSS !
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 96. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
4. Proscrire les balises de mise en forme
Balises HTML Propriétés CSS
<b> : mise en gras = {font-weight: bold;}
<i> : mise en italique = {font-style: italic;}
<u> : soulignement = {text-decoration: underline;}
Ces propriétés peuvent être assignées simplement par CSS !
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 97. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage sémantique
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 98. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage sémantique
Bien hiérarchiser l’information
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 99. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage sémantique
Bien hiérarchiser l’information
principal</h1>
<h1>Titre
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 100. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage sémantique
Bien hiérarchiser l’information
<h1>Titre principal</h1>
<p>Voici 2 sous-titres :</p>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 101. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage sémantique
Bien hiérarchiser l’information
<h1>Titre principal</h1>
<p>Voici 2 sous-titres :</p>
<h2>Sous-titre 1</h2>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 102. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage sémantique
Bien hiérarchiser l’information
<h1>Titre principal</h1>
<p>Voici 2 sous-titres :</p>
<h2>Sous-titre 1</h2>
<p>Son contenu</p>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 103. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage sémantique
Bien hiérarchiser l’information
<h1>Titre principal</h1>
<p>Voici 2 sous-titres :</p>
<h2>Sous-titre 1</h2>
<p>Son contenu</p>
<h2>Sous-titre 2</h2>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 104. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage sémantique
Bien hiérarchiser l’information
<h1>Titre principal</h1>
<p>Voici 2 sous-titres :</p>
<h2>Sous-titre 1</h2>
<p>Son contenu</p>
<h2>Sous-titre 2</h2>
<p>Son contenu</p>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 105. 2. Structure d’une page HTML
1. Balises et attributs
4. Règles pour un bon balisage (x)HTML
5. Utiliser le balisage sémantique
Bien hiérarchiser l’information
<h1>Titre principal</h1>
<p>Voici 2 sous-titres :</p>
<h2>Sous-titre 1</h2>
<p>Son contenu</p>
<h2>Sous-titre 2</h2>
<p>Son contenu</p>
Hiérarchiser l’information clarifie les choses
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 106. 2. Structure d’une page HTML
2. Le Head
1. Localisation dans une page HTML
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 107. 2. Structure d’une page HTML
2. Le Head
1. Localisation dans une page HTML
<html>
<head>
</head>
<body>
</body>
</html>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 108. 2. Structure d’une page HTML
2. Le Head
1. Localisation dans une page HTML
<html>
<head>
</head>
<body>
</body>
</html>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 109. 2. Structure d’une page HTML
2. Le Head
1. Localisation dans une page HTML
1.Le header apparaît toujours avant
<html>
le body (en entête)
<head>
</head>
<body>
</body>
</html>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 110. 2. Structure d’une page HTML
2. Le Head
1. Localisation dans une page HTML
1.Le header apparaît toujours avant
<html>
le body (en entête)
<head>
2.Il renferme des informations qui
</head>
influencent le rendu de la page...
<body>
</body>
</html>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 111. 2. Structure d’une page HTML
2. Le Head
1. Localisation dans une page HTML
1.Le header apparaît toujours avant
<html>
le body (en entête)
<head>
2.Il renferme des informations qui
</head>
influencent le rendu de la page...
<body>
</body>
3.... mais sans que les données
</html>
mêmes qu’il renferme apparaissent
à l’écran
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 112. 2. Structure d’une page HTML
2. Le Head
2. Contenu du head (aperçu)
<head>
<title></title>
<meta name=“description” content=“”/>
<meta name=“keywords” content=“”/>
<link rel=“stylesheet” href=”style.css” type=text/css media=“all” />
<script type=“text/javascript” src=”javs.js”></script>
</head>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 113. 2. Structure d’une page HTML
2. Le Head
3. Balise title
Syntaxe
<title>Titre de la page</title>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 114. 2. Structure d’une page HTML
2. Le Head
3. Balise title
Syntaxe
<title>Titre de la page</title>
• Confère un titre à la page HTML
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 115. 2. Structure d’une page HTML
2. Le Head
3. Balise title
Syntaxe
<title>Titre de la page</title>
• Confère un titre à la page HTML
• Le titre apparaît en haut du navigateur
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 116. 2. Structure d’une page HTML
2. Le Head
3. Balise title
Syntaxe
<title>Titre de la page</title>
• Confère un titre à la page HTML
• Le titre apparaît en haut du navigateur
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 117. 2. Structure d’une page HTML
2. Le Head
3. Balise title
Syntaxe
<title>Titre de la page</title>
• Confère un titre à la page HTML
• Le titre apparaît en haut du navigateur
• Balise essentielle pour un bon
référencement
• +/- 10 mots recommandés
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 118. 2. Structure d’une page HTML
2. Le Head
4. Balise meta description
Syntaxe
<meta name=“description” content=“description du contenu
de la page” />
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 119. 2. Structure d’une page HTML
2. Le Head
4. Balise meta description
Syntaxe
<meta name=“description” content=“description du contenu
de la page” />
• Balise de description sommaire du contenu de la page
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 120. 2. Structure d’une page HTML
2. Le Head
4. Balise meta description
Syntaxe
<meta name=“description” content=“description du contenu
de la page” />
• Balise de description sommaire du contenu de la page
• +/- 140-160 caractères recommandés (200 max)
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 121. 2. Structure d’une page HTML
2. Le Head
4. Balise meta description
Syntaxe
<meta name=“description” content=“description du contenu
de la page” />
• Balise de description sommaire du contenu de la page
• +/- 140-160 caractères recommandés (200 max)
• Conserve une utilité informative + de référencement
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 122. 2. Structure d’une page HTML
2. Le Head
4. Balise meta keywords
Syntaxe
<meta name=“keywords” content=“mot, clé, clef, mots, clés,
clefs, mot clé, mot clef, mots clés, mots clefs” />
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 123. 2. Structure d’une page HTML
2. Le Head
4. Balise meta keywords
Syntaxe
<meta name=“keywords” content=“mot, clé, clef, mots, clés,
clefs, mot clé, mot clef, mots clés, mots clefs” />
• Balise de mots clés par rapport au contenu de la page
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 124. 2. Structure d’une page HTML
2. Le Head
4. Balise meta keywords
Syntaxe
<meta name=“keywords” content=“mot, clé, clef, mots, clés,
clefs, mot clé, mot clef, mots clés, mots clefs” />
• Balise de mots clés par rapport au contenu de la page
• +/- 10 items (éléments séparés par espace) recommandés
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 125. 2. Structure d’une page HTML
2. Le Head
4. Balise meta keywords
Syntaxe
<meta name=“keywords” content=“mot, clé, clef, mots, clés,
clefs, mot clé, mot clef, mots clés, mots clefs” />
• Balise de mots clés par rapport au contenu de la page
• +/- 10 items (éléments séparés par espace) recommandés
• Conserve une utilité informative + de référencement
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 126. 2. Structure d’une page HTML
2. Le Head
5. Balise charset
Syntaxe
<meta http-equiv=“Content-Type” content=“text/html;
charset=utf-8” />
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 127. 2. Structure d’une page HTML
2. Le Head
5. Balise charset
Syntaxe
<meta http-equiv=“Content-Type” content=“text/html;
charset=utf-8” />
• Balise indiquant au navigateur l’encodage des caractères
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 128. 2. Structure d’une page HTML
2. Le Head
5. Balise charset
Syntaxe
<meta http-equiv=“Content-Type” content=“text/html;
charset=utf-8” />
• Balise indiquant au navigateur l’encodage des caractères
• Les plus répandus : iso-8859-1 ou utf-8
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 129. 2. Structure d’une page HTML
2. Le Head
5. Balise charset
Syntaxe
<meta http-equiv=“Content-Type” content=“text/html;
charset=utf-8” />
• Balise indiquant au navigateur l’encodage des caractères
• Les plus répandus : iso-8859-1 ou utf-8
• Permet de gérer l’affichage correct des accents + éviter
d’encoder leur équivalent html (ex : é = é)
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 130. 2. Structure d’une page HTML
2. Le Head
6. Balise CSS interne
Syntaxe
<style type=“text/css”>
<!-- styles CSS -->
</style>
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 131. 2. Structure d’une page HTML
2. Le Head
6. Balise CSS interne
Syntaxe
<style type=“text/css”>
<!-- styles CSS -->
</style>
• Balise intégrant, dans le head, les propriétés CSS
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 132. 2. Structure d’une page HTML
2. Le Head
6. Balise CSS interne
Syntaxe
<style type=“text/css”>
<!-- styles CSS -->
</style>
• Balise intégrant, dans le head, les propriétés CSS
• Commenter les CSS (<!-- -->) prévient les erreurs
d’affichage (anciens navigateurs)
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 133. 2. Structure d’une page HTML
2. Le Head
6. Balise CSS interne
Syntaxe
<style type=“text/css”>
<!-- styles CSS -->
</style>
• Balise intégrant, dans le head, les propriétés CSS
• Commenter les CSS (<!-- -->) prévient les erreurs
d’affichage (anciens navigateurs)
• Déconseillé pour du multi-pages (CSS perd de son intérêt)
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 134. 2. Structure d’une page HTML
2. Le Head
6. Balise CSS interne
Syntaxe
<style type=“text/css”>
<!-- styles CSS -->
</style>
• Balise intégrant, dans le head, les propriétés CSS
• Commenter les CSS (<!-- -->) prévient les erreurs
d’affichage (anciens navigateurs)
• Déconseillé pour du multi-pages (CSS perd de son intérêt)
• Plusieurs feuilles de styles peuvent être appelées
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 135. 2. Structure d’une page HTML
2. Le Head
7. Balise CSS externe
Syntaxe
<link rel=“stylesheet” href=”style.css” type=text/
css media=“all” />
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 136. 2. Structure d’une page HTML
2. Le Head
7. Balise CSS externe
Syntaxe
<link rel=“stylesheet” href=”style.css” type=text/
css media=“all” />
• Balise appelant une feuille de style CSS (rel = stylesheet)
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 137. 2. Structure d’une page HTML
2. Le Head
7. Balise CSS externe
Syntaxe
<link rel=“stylesheet” href=”style.css” type=text/
css media=“all” />
• Balise appelant une feuille de style CSS (rel = stylesheet)
• La CSS est un fichier externe (ici ‘style.css’)
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 138. 2. Structure d’une page HTML
2. Le Head
7. Balise CSS externe
Syntaxe
<link rel=“stylesheet” href=”style.css” type=text/
css media=“all” />
• Balise appelant une feuille de style CSS (rel = stylesheet)
• La CSS est un fichier externe (ici ‘style.css’)
• Le média de destination est général (all)
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 139. 2. Structure d’une page HTML
2. Le Head
7. Balise CSS externe
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 140. 2. Structure d’une page HTML
2. Le Head
7. Balise CSS externe
• Types de médias :
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 141. 2. Structure d’une page HTML
2. Le Head
7. Balise CSS externe
• Types de médias :
• all : tous les appareils ;
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 142. 2. Structure d’une page HTML
2. Le Head
7. Balise CSS externe
• Types de médias :
• all : tous les appareils ;
• aural : synthétiseurs de parole ;
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 143. 2. Structure d’une page HTML
2. Le Head
7. Balise CSS externe
• Types de médias :
• all : tous les appareils ;
• aural : synthétiseurs de parole ;
• braille : appareils braille à retour tactile ;
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 144. 2. Structure d’une page HTML
2. Le Head
7. Balise CSS externe
• Types de médias :
• all : tous les appareils ;
• aural : synthétiseurs de parole ;
• braille : appareils braille à retour tactile ;
• embossed : appareils à impression braille ;
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 145. 2. Structure d’une page HTML
2. Le Head
7. Balise CSS externe
• Types de médias :
• all : tous les appareils ;
• aural : synthétiseurs de parole ;
• braille : appareils braille à retour tactile ;
• embossed : appareils à impression braille ;
• handled : appareils portatifs ;
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be
- 146. 2. Structure d’une page HTML
2. Le Head
7. Balise CSS externe
• Types de médias :
• all : tous les appareils ;
• aural : synthétiseurs de parole ;
• braille : appareils braille à retour tactile ;
• embossed : appareils à impression braille ;
• handled : appareils portatifs ;
• print : support paginé et mode aperçu avant impression ;
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be