Html et xhtml

  • 1,160 views
Uploaded on

Module de formation d'apprentissage du XHTML

Module de formation d'apprentissage du XHTML

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,160
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
134
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide





































































































































































































































































































































































































































































Transcript

  • 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 : é = &eacute;) 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
  • 147. 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 ; • screen : moniteurs couleurs ; 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
  • 148. 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 ; • screen : moniteurs couleurs ; • projection : présentations en projection (ex : projecteurs ou impressions pour transparents) ; 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
  • 149. 2. Structure d’une page HTML 2. Le Head 8. Balise Javascript interne Syntaxe <script language=“ Javascript”> <!-- Code Javascript --> </script> 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
  • 150. 2. Structure d’une page HTML 2. Le Head 8. Balise Javascript interne Syntaxe <script language=“ Javascript”> <!-- Code Javascript --> </script> • Balise intégrant, dans le head, les scripts 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
  • 151. 2. Structure d’une page HTML 2. Le Head 8. Balise Javascript interne Syntaxe <script language=“ Javascript”> <!-- Code Javascript --> </script> • Balise intégrant, dans le head, les scripts Javascript • Commenter les scripts (<!-- -->) 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
  • 152. 2. Structure d’une page HTML 2. Le Head 8. Balise Javascript interne Syntaxe <script language=“ Javascript”> <!-- Code Javascript --> </script> • Balise intégrant, dans le head, les scripts Javascript • Commenter les scripts (<!-- -->) prévient les erreurs d’affichage (anciens navigateurs) • Pour du multi-pages : externalisez votre code 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
  • 153. 2. Structure d’une page HTML 2. Le Head 9. Balise Javascript externe Syntaxe <script type=“text/javascript” scr=“javascript.js”></ script> 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
  • 154. 2. Structure d’une page HTML 2. Le Head 9. Balise Javascript externe Syntaxe <script type=“text/javascript” scr=“javascript.js”></ script> • Balise appelant un fichier Javascript (type = 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
  • 155. 2. Structure d’une page HTML 2. Le Head 9. Balise Javascript externe Syntaxe <script type=“text/javascript” scr=“javascript.js”></ script> • Balise appelant un fichier Javascript (type = javascript) • Le fichier Javascript est externe (ici ‘javascript.js’) 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
  • 156. 2. Structure d’une page HTML 2. Le Head 9. Balise Javascript externe Syntaxe <script type=“text/javascript” scr=“javascript.js”></ script> • Balise appelant un fichier Javascript (type = javascript) • Le fichier Javascript est externe (ici ‘javascript.js’) • Plusieurs fichiers Javascript peuvent être appelé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
  • 157. 2. Structure d’une page HTML 3. Le Body 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
  • 158. 2. Structure d’une page HTML 3. Le Body 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
  • 159. 2. Structure d’une page HTML 3. Le Body 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
  • 160. 2. Structure d’une page HTML 3. Le Body 1. Localisation dans une page HTML 1.Le body apparaît toujours après le <html> head (corps de la page) <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
  • 161. 2. Structure d’une page HTML 3. Le Body 1. Localisation dans une page HTML 1.Le body apparaît toujours après le <html> head (corps de la page) <head> </head> 2.Il renferme le contenu <body> informationnel de la page </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
  • 162. 2. Structure d’une page HTML 3. Le Body 1. Localisation dans une page HTML 1.Le body apparaît toujours après le <html> head (corps de la page) <head> </head> 2.Il renferme le contenu <body> informationnel de la page </body> 3.Ce qui se trouve à l’intérieur de </html> body s’affiche à 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
  • 163. 2. Structure d’une page HTML 3. Le Body 2. Contenu du body (exemple) <body> <h1>Ceci est un titre de niveau 1</h1> <p>Voici un paragraphe</p> <img src=“smile.png” alt=“Voici une image” /> <a href=“http://www.c-group.be/”>Un lien</a> </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
  • 164. 2. Structure d’une page HTML 3. Le Body 3. Exception à l’affichage : les commentaires Syntaxe <!-- Contenu du commentaire (longueur illimité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
  • 165. 2. Structure d’une page HTML 3. Le Body 3. Exception à l’affichage : les commentaires Syntaxe <!-- Contenu du commentaire (longueur illimitée) --> • Le contenu entre <!-- --> n’apparaît pas à 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
  • 166. 2. Structure d’une page HTML 3. Le Body 3. Exception à l’affichage : les commentaires Syntaxe <!-- Contenu du commentaire (longueur illimitée) --> • Le contenu entre <!-- --> n’apparaît pas à l’écran • Il est toutefois visible dans le code source 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
  • 167. 2. Structure d’une page HTML 3. Le Body 3. Exception à l’affichage : les commentaires Syntaxe <!-- Contenu du commentaire (longueur illimitée) --> • Le contenu entre <!-- --> n’apparaît pas à l’écran • Il est toutefois visible dans le code source de la page • Les commentaires sont très utilisés par les développeurs 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
  • 168. 2. Structure d’une page HTML 3. Le Body 3. Exception à l’affichage : les commentaires Syntaxe <!-- Contenu du commentaire (longueur illimitée) --> • Le contenu entre <!-- --> n’apparaît pas à l’écran • Il est toutefois visible dans le code source de la page • Les commentaires sont très utilisés par les développeurs • Ils sont parfois le seul moyen de comprendre un code 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
  • 169. 2. Structure d’une page HTML 3. Le Body 4. Exception à l’affichage : le code Google Analytics Syntaxe <script type=quot;text/javascriptquot;> var gaJsHost = ((quot;https:quot; == document.location.protocol) ? quot;https://ssl.quot; : quot;http://www.quot;); document.write(unescape(quot;%3Cscript src='quot; + gaJsHost + quot;google-analytics.com/ ga.js' type='text/javascript'%3E%3C/script%3Equot;)); </script> <script type=quot;text/javascriptquot;> var pageTracker = _gat._getTracker(quot;UA-1744236-1quot;); pageTracker._initData(); pageTracker._trackPageview(); </script> 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
  • 170. 2. Structure d’une page HTML 3. Le Body 4. Exception à l’affichage : le code Google Analytics Syntaxe <script type=quot;text/javascriptquot;> var gaJsHost = ((quot;https:quot; == document.location.protocol) ? quot;https://ssl.quot; : quot;http://www.quot;); document.write(unescape(quot;%3Cscript src='quot; + gaJsHost + quot;google-analytics.com/ ga.js' type='text/javascript'%3E%3C/script%3Equot;)); </script> <script type=quot;text/javascriptquot;> var pageTracker = _gat._getTracker(quot;UA-1744236-1quot;); pageTracker._initData(); pageTracker._trackPageview(); </script> • Ce code est fourni par Google pour générer des statistiques 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
  • 171. 3. Balises textes 1. Divisions et paragraphes 2. Niveaux de titres 3. Mise en forme du contenu et balises obsolètes 4. Positionnement, espacements et mise en page (approche 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
  • 172. 3. Balises textes 1. Divisions et paragraphes 1. Balise div Syntaxe <div>Contenu</div> 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
  • 173. 3. Balises textes 1. Divisions et paragraphes 1. Balise div Syntaxe <div>Contenu</div> • <div> permet d’inclure tout type d’élément 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
  • 174. 3. Balises textes 1. Divisions et paragraphes 1. Balise div Syntaxe <div>Contenu</div> • <div> permet d’inclure tout type d’élément html • Induit des séparations entre les différents éléments inclus 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
  • 175. 3. Balises textes 1. Divisions et paragraphes 1. Balise div Syntaxe <div>Contenu</div> • <div> permet d’inclure tout type d’élément html • Induit des séparations entre les différents éléments inclus • <div> est surtout utilisée pour inclure des 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
  • 176. 3. Balises textes 1. Divisions et paragraphes 2. Balise p Syntaxe <p>Contenu du paragraphe</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
  • 177. 3. Balises textes 1. Divisions et paragraphes 2. Balise p Syntaxe <p>Contenu du paragraphe</p> • <p> est la balise de création de paragraphes 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
  • 178. 3. Balises textes 1. Divisions et paragraphes 2. Balise p Syntaxe <p>Contenu du paragraphe</p> • <p> est la balise de création de paragraphes • Génère un saut de ligne après la balise de fermeture </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
  • 179. 3. Balises textes 1. Divisions et paragraphes 2. Balise p Syntaxe <p>Contenu du paragraphe</p> • <p> est la balise de création de paragraphes • Génère un saut de ligne après la balise de fermeture </p> • <p> peut être doté d’attributs : 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
  • 180. 3. Balises textes 1. Divisions et paragraphes 2. Balise p Syntaxe <p>Contenu du paragraphe</p> • <p> est la balise de création de paragraphes • Génère un saut de ligne après la balise de fermeture </p> • <p> peut être doté d’attributs : • <p id=“single”> : p a un attribut unique (id) appelé first 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
  • 181. 3. Balises textes 1. Divisions et paragraphes 2. Balise p Syntaxe <p>Contenu du paragraphe</p> • <p> est la balise de création de paragraphes • Génère un saut de ligne après la balise de fermeture </p> • <p> peut être doté d’attributs : • <p id=“single”> : p a un attribut unique (id) appelé first • <p class=“style”> p a un attribut non unique (classe) 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
  • 182. 3. Balises textes 1. Divisions et paragraphes 2. Balise p Syntaxe <p>Contenu du paragraphe</p> • <p> est la balise de création de paragraphes • Génère un saut de ligne après la balise de fermeture </p> • <p> peut être doté d’attributs : • <p id=“single”> : p a un attribut unique (id) appelé first • <p class=“style”> p a un attribut non unique (classe) • Les attributs de présentation ont été dépréciés (html 4.01) puis proscrits (xhtml 1.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
  • 183. 3. Balises textes 2. Niveaux de titres Syntaxe générale <hn>Contenu du titre de niveau n</hn> n = nombre entier d’une valeur de 1 à 6 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
  • 184. 3. Balises textes 2. Niveaux de titres Syntaxe générale <hn>Contenu du titre de niveau n</hn> n = nombre entier d’une valeur de 1 à 6 • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 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
  • 185. 3. Balises textes 2. Niveaux de titres Syntaxe générale <hn>Contenu du titre de niveau n</hn> n = nombre entier d’une valeur de 1 à 6 • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> • <h1> est le niveau de titre le plus important 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
  • 186. 3. Balises textes 2. Niveaux de titres Syntaxe générale <hn>Contenu du titre de niveau n</hn> n = nombre entier d’une valeur de 1 à 6 • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> • <h1> est le niveau de titre le plus important • <h6> est le niveau de titre le moins important 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
  • 187. 3. Balises textes 2. Niveaux de titres Syntaxe générale <hn>Contenu du titre de niveau n</hn> n = nombre entier d’une valeur de 1 à 6 • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> • <h1> est le niveau de titre le plus important • <h6> est le niveau de titre le moins important • Les balises titres doivent toutes être fermé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
  • 188. 3. Balises textes 2. Niveaux de titres Syntaxe générale <hn>Contenu du titre de niveau n</hn> n = nombre entier d’une valeur de 1 à 6 • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> • <h1> est le niveau de titre le plus important • <h6> est le niveau de titre le moins important • Les balises titres doivent toutes être fermées • Un titre peut avoir des attributs 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
  • 189. 3. Balises textes 2. Niveaux de titres Syntaxe générale <hn>Contenu du titre de niveau n</hn> n = nombre entier d’une valeur de 1 à 6 • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> • <h1> est le niveau de titre le plus important • <h6> est le niveau de titre le moins important • Les balises titres doivent toutes être fermées • Un titre peut avoir des attributs • Ex : <h1 id=“important”>Titre</h1> 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
  • 190. 3. Balises textes 2. Niveaux de titres Syntaxe générale <hn>Contenu du titre de niveau n</hn> n = nombre entier d’une valeur de 1 à 6 • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> • <h1> est le niveau de titre le plus important • <h6> est le niveau de titre le moins important • Les balises titres doivent toutes être fermées • Un titre peut avoir des attributs • Ex : <h1 id=“important”>Titre</h1> 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
  • 191. 3. Balises textes 2. Niveaux de titres 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
  • 192. 3. Balises textes 2. Niveaux de titres • Un titre peut contenir des balises 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
  • 193. 3. Balises textes 2. Niveaux de titres • Un titre peut contenir des balises html • Ex : <h1><span class=“important”>Titre</span></h1> 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
  • 194. 3. Balises textes 2. Niveaux de titres • Un titre peut contenir des balises html • Ex : <h1><span class=“important”>Titre</span></h1> 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
  • 195. 3. Balises textes 2. Niveaux de titres • Un titre peut contenir des balises html • Ex : <h1><span class=“important”>Titre</span></h1> • Attention : pas toutes les balises quand même ! 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
  • 196. 3. Balises textes 2. Niveaux de titres • Un titre peut contenir des balises html • Ex : <h1><span class=“important”>Titre</span></h1> • Attention : pas toutes les balises quand même ! • Ex : <h1><p>Titre</p></h1> 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
  • 197. 3. Balises textes 2. Niveaux de titres • Un titre peut contenir des balises html • Ex : <h1><span class=“important”>Titre</span></h1> • Attention : pas toutes les balises quand même ! • Ex : <h1><p>Titre</p></h1> 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
  • 198. 3. Balises textes 2. Niveaux de titres • Un titre peut contenir des balises html • Ex : <h1><span class=“important”>Titre</span></h1> • Attention : pas toutes les balises quand même ! • Ex : <h1><p>Titre</p></h1> • Sémantiquement incorrect 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
  • 199. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes 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
  • 200. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • De nombreuses balises html mettent en forme le contenu : 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
  • 201. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • De nombreuses balises html mettent en forme le contenu : Balise <b> <i> <u> <center> <align> <border> <color> <size> <background> <bgcolor> <font> ... 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
  • 202. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • De nombreuses balises html mettent en forme le contenu : Effet sur le contenu balisé Balise <b> <i> <u> <center> <align> <border> <color> <size> <background> <bgcolor> <font> ... 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
  • 203. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • De nombreuses balises html mettent en forme le contenu : Effet sur le contenu balisé Balise <b> Mise en gras <i> <u> <center> <align> <border> <color> <size> <background> <bgcolor> <font> ... 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
  • 204. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • De nombreuses balises html mettent en forme le contenu : Effet sur le contenu balisé Balise <b> Mise en gras <i> Mise en italique <u> <center> <align> <border> <color> <size> <background> <bgcolor> <font> ... 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
  • 205. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • De nombreuses balises html mettent en forme le contenu : Effet sur le contenu balisé Balise <b> Mise en gras <i> Mise en italique <u> Soulignement <center> <align> <border> <color> <size> <background> <bgcolor> <font> ... 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
  • 206. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • De nombreuses balises html mettent en forme le contenu : Effet sur le contenu balisé Balise <b> Mise en gras <i> Mise en italique <u> Soulignement <center> Centrage <align> <border> <color> <size> <background> <bgcolor> <font> ... 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
  • 207. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • De nombreuses balises html mettent en forme le contenu : Effet sur le contenu balisé Balise <b> Mise en gras <i> Mise en italique <u> Soulignement <center> Centrage <align> Alignement (gauche, droite...) <border> <color> <size> <background> <bgcolor> <font> ... 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
  • 208. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • De nombreuses balises html mettent en forme le contenu : Effet sur le contenu balisé Balise <b> Mise en gras <i> Mise en italique <u> Soulignement <center> Centrage <align> Alignement (gauche, droite...) <border> Application d’une bordure autour de l’élément <color> <size> <background> <bgcolor> <font> ... 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
  • 209. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • De nombreuses balises html mettent en forme le contenu : Effet sur le contenu balisé Balise <b> Mise en gras <i> Mise en italique <u> Soulignement <center> Centrage <align> Alignement (gauche, droite...) <border> Application d’une bordure autour de l’élément <color> Application d’une couleur <size> <background> <bgcolor> <font> ... 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
  • 210. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • De nombreuses balises html mettent en forme le contenu : Effet sur le contenu balisé Balise <b> Mise en gras <i> Mise en italique <u> Soulignement <center> Centrage <align> Alignement (gauche, droite...) <border> Application d’une bordure autour de l’élément <color> Application d’une couleur Gestion de la taille <size> <background> <bgcolor> <font> ... 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
  • 211. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • De nombreuses balises html mettent en forme le contenu : Effet sur le contenu balisé Balise <b> Mise en gras <i> Mise en italique <u> Soulignement <center> Centrage <align> Alignement (gauche, droite...) <border> Application d’une bordure autour de l’élément <color> Application d’une couleur Gestion de la taille <size> Gestion de l’arrière-plan (image) <background> <bgcolor> <font> ... 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
  • 212. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • De nombreuses balises html mettent en forme le contenu : Effet sur le contenu balisé Balise <b> Mise en gras <i> Mise en italique <u> Soulignement <center> Centrage <align> Alignement (gauche, droite...) <border> Application d’une bordure autour de l’élément <color> Application d’une couleur Gestion de la taille <size> Gestion de l’arrière-plan (image) <background> Gestion de l’arrière-plan (couleur) <bgcolor> <font> ... 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
  • 213. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • De nombreuses balises html mettent en forme le contenu : Effet sur le contenu balisé Balise <b> Mise en gras <i> Mise en italique <u> Soulignement <center> Centrage <align> Alignement (gauche, droite...) <border> Application d’une bordure autour de l’élément <color> Application d’une couleur Gestion de la taille <size> Gestion de l’arrière-plan (image) <background> Gestion de l’arrière-plan (couleur) <bgcolor> Gestion de la police de caractère <font> ... 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
  • 214. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes 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
  • 215. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • L’arrivée des feuilles de style CSS a changé la donne : 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
  • 216. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • L’arrivée des feuilles de style CSS a changé la donne : • HTML organise sémantiquement le contenu 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
  • 217. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • L’arrivée des feuilles de style CSS a changé la donne : • HTML organise sémantiquement le contenu • CSS le met en forme séparément 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
  • 218. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • L’arrivée des feuilles de style CSS a changé la donne : • HTML organise sémantiquement le contenu • CSS le met en forme séparément • Toutes les balises html de mise en forme sont “déprécié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
  • 219. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • L’arrivée des feuilles de style CSS a changé la donne : • HTML organise sémantiquement le contenu • CSS le met en forme séparément • Toutes les balises html de mise en forme sont “dépréciées” • Il est fortement conseillé de ne plus les utiliser (obsolètes) 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
  • 220. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • L’arrivée des feuilles de style CSS a changé la donne : • HTML organise sémantiquement le contenu • CSS le met en forme séparément • Toutes les balises html de mise en forme sont “dépréciées” • Il est fortement conseillé de ne plus les utiliser (obsolètes) • Elles surchargent le code inutilement 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
  • 221. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • L’arrivée des feuilles de style CSS a changé la donne : • HTML organise sémantiquement le contenu • CSS le met en forme séparément • Toutes les balises html de mise en forme sont “dépréciées” • Il est fortement conseillé de ne plus les utiliser (obsolètes) • Elles surchargent le code inutilement • Elles compliquent sa lisibilité 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
  • 222. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • L’arrivée des feuilles de style CSS a changé la donne : • HTML organise sémantiquement le contenu • CSS le met en forme séparément • Toutes les balises html de mise en forme sont “dépréciées” • Il est fortement conseillé de ne plus les utiliser (obsolètes) • Elles surchargent le code inutilement • Elles compliquent sa lisibilité • Elles augmentent le temps de chargement 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
  • 223. 3. Balises textes 3. Mise en forme du contenu et balises obsolètes • L’arrivée des feuilles de style CSS a changé la donne : • HTML organise sémantiquement le contenu • CSS le met en forme séparément • Toutes les balises html de mise en forme sont “dépréciées” • Il est fortement conseillé de ne plus les utiliser (obsolètes) • Elles surchargent le code inutilement • Elles compliquent sa lisibilité • Elles augmentent le temps de chargement • Elles sont invalidées par la W3C 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
  • 224. 3. Balises textes 4. Approche CSS Syntaxe générale body { color:red; background:yellow; } qui est équivalent à : body {color:red; background:yellow;} 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
  • 225. 3. Balises textes 4. Approche CSS Syntaxe générale body { color:red; background:yellow; } qui est équivalent à : body {color:red; background:yellow;} • Un élément CSS est appelé une règle 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
  • 226. 3. Balises textes 4. Approche CSS Syntaxe générale body { color:red; background:yellow; } qui est équivalent à : body {color:red; background:yellow;} • Un élément CSS est appelé une règle • Chaque règle se compose de plusieurs parties 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
  • 227. 3. Balises textes 4. Approche CSS Syntaxe d’une règle CSS body {color : red; background: yellow;} 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
  • 228. 3. Balises textes 4. Approche CSS Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur 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
  • 229. 3. Balises textes 4. Approche CSS Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration 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
  • 230. 3. Balises textes 4. Approche CSS Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations 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
  • 231. 3. Balises textes 4. Approche CSS Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations {color : red;} 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
  • 232. 3. Balises textes 4. Approche CSS Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations {color : red;} Proprié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
  • 233. 3. Balises textes 4. Approche CSS Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations {color : red;} Propriété 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
  • 234. 3. Balises textes 4. Approche CSS Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations {color : red;} Propriété Valeur • Sélecteur : partie du document HTML qui sera affecté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
  • 235. 3. Balises textes 4. Approche CSS Syntaxe d’une règle CSS body {color : red; background: yellow;} Sélecteur Bloc de déclaration Déclarations {color : red;} Propriété Valeur • Sélecteur : partie du document HTML qui sera affectée • Souvent, un sélecteur est un élément HTML : html, body, h1, p, img, a... 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
  • 236. 3. Balises textes 4. Approche 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
  • 237. 3. Balises textes 4. Approche CSS • Exemple : 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
  • 238. 3. Balises textes 4. Approche CSS • Exemple : HTML <body> <p>Paragraphe 1</p> <ul> <li>élément 1</li> <li>élément 2</li> </ul> <p>Paragraphe 2</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
  • 239. 3. Balises textes 4. Approche CSS • Exemple : HTML CSS <body> body {color: white;} <p>Paragraphe 1</p> <ul> p {font-size: 12px;} <li>élément 1</li> <li>élément 2</li> ul {list-style: square;} </ul> <p>Paragraphe 2</p> li {margin-left: 10px;} </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
  • 240. 3. Balises textes 4. Approche 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
  • 241. 3. Balises textes 4. Approche CSS • Un sélecteur peut aussi faire référence à un identifiant (id=“valeur”) ou une classe (class=“ 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
  • 242. 3. Balises textes 4. Approche CSS • Un sélecteur peut aussi faire référence à un identifiant (id=“valeur”) ou une classe (class=“ valeur”) HTML <body> <ul class=“list”> <li>élément 1</li> </ul> <p id=“intro”>Texte</p> <ul class=“list”> <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
  • 243. 3. Balises textes 4. Approche CSS • Un sélecteur peut aussi faire référence à un identifiant (id=“valeur”) ou une classe (class=“ valeur”) HTML <body> <ul class=“list”> <li>élément 1</li> </ul> <p id=“intro”>Texte</p> <ul class=“list”> <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
  • 244. 3. Balises textes 4. Approche CSS • Un sélecteur peut aussi faire référence à un identifiant (id=“valeur”) ou une classe (class=“ valeur”) HTML CSS <body> p {font-size: 12px;} <ul class=“list”> <li>élément 1</li> #intro {font-weight: </ul> bold;} <p id=“intro”>Texte</p> <ul class=“list”> .list {margin-left: <li>élément 1</li> 20px;} <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
  • 245. 3. Balises textes 4. Approche CSS Exemples de 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
  • 246. 3. Balises textes 4. Approche CSS Exemples de propriétés CSS font-weight: bold; font-style: italic; text-decoration: underline; text-align: center; text-align: right; border: 1px solid black; color : red; font-size: 14px; background: url(fichier.jpg); background-color: #ffffff; font-family: Verdana; 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
  • 247. 3. Balises textes 4. Approche CSS Exemples de propriétés CSS <b> font-weight: bold; <i> font-style: italic; <u> text-decoration: underline; <center> text-align: center; <align> text-align: right; <border> border: 1px solid black; <color> color : red; <size> font-size: 14px; <background> background: url(fichier.jpg); <bgcolor> background-color: #ffffff; <font> font-family: Verdana; 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
  • 248. 3. Balises textes 4. Approche 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
  • 249. 3. Balises textes 4. Approche CSS Quelques règles 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
  • 250. 3. Balises textes 4. Approche CSS Quelques règles CSS : • Sur une même page, un identifiant (id) est toujours unique (pour les éléments qui se répètent : class) 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
  • 251. 3. Balises textes 4. Approche CSS Quelques règles CSS : • Sur une même page, un identifiant (id) est toujours unique (pour les éléments qui se répètent : class) • CSS repose sur la cascade : hiérarchiquement, les éléments inférieurs (enfants) héritent par défaut des propriétés des éléments supérieurs (parents) 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
  • 252. 3. Balises textes 4. Approche CSS Quelques règles CSS : • Sur une même page, un identifiant (id) est toujours unique (pour les éléments qui se répètent : class) • CSS repose sur la cascade : hiérarchiquement, les éléments inférieurs (enfants) héritent par défaut des propriétés des éléments supérieurs (parents) • Si une valeur CSS est erronée ou n’existe pas, la propriété est inopérante (aucun effet visible sur le sélecteur) Exemple : { color : ultraviolet; } ou {typo : verdana;} 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
  • 253. 3. Balises textes 4. Approche 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
  • 254. 3. Balises textes 4. Approche CSS Quelques règles 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
  • 255. 3. Balises textes 4. Approche CSS Quelques règles CSS : • Sur une même page, un identifiant (id) est toujours unique (pour les éléments qui se répètent : class) 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
  • 256. 3. Balises textes 4. Approche CSS Quelques règles CSS : • Sur une même page, un identifiant (id) est toujours unique (pour les éléments qui se répètent : class) • CSS repose sur la cascade : hiérarchiquement, les éléments inférieurs (enfants) héritent par défaut des propriétés des éléments supérieurs (parents) 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
  • 257. 3. Balises textes 4. Approche CSS Quelques règles CSS : • Sur une même page, un identifiant (id) est toujours unique (pour les éléments qui se répètent : class) • CSS repose sur la cascade : hiérarchiquement, les éléments inférieurs (enfants) héritent par défaut des propriétés des éléments supérieurs (parents) • Si une valeur CSS est erronée ou n’existe pas, la propriété est inopérante (aucun effet visible sur le sélecteur) Exemple : { color : ultraviolet; } ou {typo : verdana;} 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
  • 258. 3. Balises textes 4. Approche 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
  • 259. 3. Balises textes 4. Approche CSS Quelques avantages 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
  • 260. 3. Balises textes 4. Approche CSS Quelques avantages CSS : • Centralisation des balises : 1 balise peut définir les propriétés d’un élément pour tout un site 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
  • 261. 3. Balises textes 4. Approche CSS Quelques avantages CSS : • Centralisation des balises : 1 balise peut définir les propriétés d’un élément pour tout un site • Allégement des pages 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
  • 262. 3. Balises textes 4. Approche CSS Quelques avantages CSS : • Centralisation des balises : 1 balise peut définir les propriétés d’un élément pour tout un site • Allégement des pages html • Facilité de maintenance 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
  • 263. 3. Balises textes 4. Approche CSS Quelques avantages CSS : • Centralisation des balises : 1 balise peut définir les propriétés d’un élément pour tout un site • Allégement des pages html • Facilité de maintenance • Possibilités de multiplier les variantes 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
  • 264. 3. Balises textes 4. Approche CSS Quelques avantages CSS : • Centralisation des balises : 1 balise peut définir les propriétés d’un élément pour tout un site • Allégement des pages html • Facilité de maintenance • Possibilités de multiplier les variantes • Facilité du langage 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
  • 265. 4. Balises multimédias 1. Gestion des images 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
  • 266. 4. Balises multimédias 1. Gestion des images Syntaxe <img src=“smile.gif” alt=“texte de remplacement” title=“ titre de l’image”/> 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
  • 267. 4. Balises multimédias 1. Gestion des images Syntaxe <img src=“smile.gif” alt=“texte de remplacement” title=“ titre de l’image”/> • src a pour valeur le chemin du fichier image cible 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
  • 268. 4. Balises multimédias 1. Gestion des images Syntaxe <img src=“smile.gif” alt=“texte de remplacement” title=“ titre de l’image”/> • src a pour valeur le chemin du fichier image cible • src=“smile.gif” : image et page web dans le même dossier 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
  • 269. 4. Balises multimédias 1. Gestion des images Syntaxe <img src=“smile.gif” alt=“texte de remplacement” title=“ titre de l’image”/> • src a pour valeur le chemin du fichier image cible • src=“smile.gif” : image et page web dans le même dossier • src=“images/smile.gif” : l’image est dans le dossier images (au même niveau que la page 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
  • 270. 4. Balises multimédias 1. Gestion des images Syntaxe <img src=“smile.gif” alt=“texte de remplacement” title=“ titre de l’image”/> • src a pour valeur le chemin du fichier image cible • src=“smile.gif” : image et page web dans le même dossier • src=“images/smile.gif” : l’image est dans le dossier images (au même niveau que la page web) • src=“../smile.gif” : l’image est dans le dossier supérieur à celui de la page 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
  • 271. 4. Balises multimédias 1. Gestion des images Syntaxe <img src=“smile.gif” alt=“texte de remplacement” title=“ titre de l’image”/> • src a pour valeur le chemin du fichier image cible • src=“smile.gif” : image et page web dans le même dossier • src=“images/smile.gif” : l’image est dans le dossier images (au même niveau que la page web) • src=“../smile.gif” : l’image est dans le dossier supérieur à celui de la page web • src=“../images/smile.gif” : l’image est dans le dossier images (dans le dossier supérieur à celui de la page 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
  • 272. 4. Balises multimédias 1. Gestion des images Syntaxe <img src=“smile.gif” alt=“texte de remplacement” title=“ titre de l’image”/> 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
  • 273. 4. Balises multimédias 1. Gestion des images Syntaxe <img src=“smile.gif” alt=“texte de remplacement” title=“ titre de l’image”/> • alt a pour valeur le texte de remplacement de l’image 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
  • 274. 4. Balises multimédias 1. Gestion des images Syntaxe <img src=“smile.gif” alt=“texte de remplacement” title=“ titre de l’image”/> • alt a pour valeur le texte de remplacement de l’image • Utile en cas de chargement long ou d’image impossible à trouver 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
  • 275. 4. Balises multimédias 1. Gestion des images Syntaxe <img src=“smile.gif” alt=“texte de remplacement” title=“ titre de l’image”/> • alt a pour valeur le texte de remplacement de l’image • Utile en cas de chargement long ou d’image impossible à trouver • Utile pour les moins valides 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
  • 276. 4. Balises multimédias 1. Gestion des images Syntaxe <img src=“smile.gif” alt=“texte de remplacement” title=“ titre de l’image”/> • alt a pour valeur le texte de remplacement de l’image • Utile en cas de chargement long ou d’image impossible à trouver • Utile pour les moins valides • Utile pour le 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
  • 277. 4. Balises multimédias 1. Gestion des images Syntaxe <img src=“smile.gif” alt=“texte de remplacement” title=“ titre de l’image”/> 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
  • 278. 4. Balises multimédias 1. Gestion des images Syntaxe <img src=“smile.gif” alt=“texte de remplacement” title=“ titre de l’image”/> • title indique la valeur texte de l’info-bulle 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
  • 279. 4. Balises multimédias 1. Gestion des images Syntaxe <img src=“smile.gif” alt=“texte de remplacement” title=“ titre de l’image”/> • title indique la valeur texte de l’info-bulle • Firefox et IE7 respectent la nomenclature : 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
  • 280. 4. Balises multimédias 1. Gestion des images Syntaxe <img src=“smile.gif” alt=“texte de remplacement” title=“ titre de l’image”/> • title indique la valeur texte de l’info-bulle • Firefox et IE7 respectent la nomenclature : • alt pour le texte de remplacement 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
  • 281. 4. Balises multimédias 1. Gestion des images Syntaxe <img src=“smile.gif” alt=“texte de remplacement” title=“ titre de l’image”/> • title indique la valeur texte de l’info-bulle • Firefox et IE7 respectent la nomenclature : • alt pour le texte de remplacement • title pour l’info-bulle en survol 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
  • 282. 4. Balises multimédias 1. Gestion des images Syntaxe <img src=“smile.gif” alt=“texte de remplacement” title=“ titre de l’image”/> • title indique la valeur texte de l’info-bulle • Firefox et IE7 respectent la nomenclature : • alt pour le texte de remplacement • title pour l’info-bulle en survol • Les autres browsers utilisent alt pour l’info-bulle 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
  • 283. 5. Balises hypertextes 1. Règles de base 2. Liens URL et liens email 3. Liens efficaces et éléments déconseillé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
  • 284. 5. Balises hypertextes 1. Règles de base Syntaxe de base <a href=“http://www.c-group.be”> www.c-group.be</a> 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
  • 285. 5. Balises hypertextes 1. Règles de base Syntaxe de base <a href=“http://www.c-group.be”> www.c-group.be</a> • href indique la cible du lien à atteindre 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
  • 286. 5. Balises hypertextes 1. Règles de base Syntaxe de base <a href=“http://www.c-group.be”> www.c-group.be</a> • href indique la cible du lien à atteindre • La cible d’un lien peut être : 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
  • 287. 5. Balises hypertextes 1. Règles de base Syntaxe de base <a href=“http://www.c-group.be”> www.c-group.be</a> • href indique la cible du lien à atteindre • La cible d’un lien peut être : • un site web : 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
  • 288. 5. Balises hypertextes 1. Règles de base Syntaxe de base <a href=“http://www.c-group.be”> www.c-group.be</a> • href indique la cible du lien à atteindre • La cible d’un lien peut être : • un site web : http://www.c-group.be • un fichier : http://www.c-group.be/fichier.pdf 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
  • 289. 5. Balises hypertextes 1. Règles de base Syntaxe de base <a href=“http://www.c-group.be”> www.c-group.be</a> • href indique la cible du lien à atteindre • La cible d’un lien peut être : • un site web : http://www.c-group.be • un fichier : http://www.c-group.be/fichier.pdf • une image : http://www.c-group.be/image.png 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
  • 290. 5. Balises hypertextes 1. Règles de base Syntaxe de base <a href=“http://www.c-group.be”> www.c-group.be</a> • href indique la cible du lien à atteindre • La cible d’un lien peut être : • un site web : http://www.c-group.be • un fichier : http://www.c-group.be/fichier.pdf • une image : http://www.c-group.be/image.png • ou toute autre ressource accessible via un lien hypertexte 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
  • 291. 5. Balises hypertextes 1. Règles de base Syntaxe de base <a href=“http://www.c-group.be”> www.c-group.be</a> 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
  • 292. 5. Balises hypertextes 1. Règles de base Syntaxe de base <a href=“http://www.c-group.be”> www.c-group.be</a> • La cible d’un lien peut être : 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
  • 293. 5. Balises hypertextes 1. Règles de base Syntaxe de base <a href=“http://www.c-group.be”> www.c-group.be</a> • La cible d’un lien peut être : • interne : localisée dans un sous-répertoire du site 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
  • 294. 5. Balises hypertextes 1. Règles de base Syntaxe de base <a href=“http://www.c-group.be”> www.c-group.be</a> • La cible d’un lien peut être : • interne : localisée dans un sous-répertoire du site • externe : localisée ailleurs sur 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
  • 295. 5. Balises hypertextes 1. Règles de base Syntaxe de base <a href=“http://www.c-group.be”> www.c-group.be</a> • La cible d’un lien peut être : • interne : localisée dans un sous-répertoire du site • externe : localisée ailleurs sur le web • Le lien peut être : 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
  • 296. 5. Balises hypertextes 1. Règles de base Syntaxe de base <a href=“http://www.c-group.be”> www.c-group.be</a> • La cible d’un lien peut être : • interne : localisée dans un sous-répertoire du site • externe : localisée ailleurs sur le web • Le lien peut être : • relatif : <a href=“fichiers/intro.pdf”>fichier PDF</a> 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
  • 297. 5. Balises hypertextes 1. Règles de base Syntaxe de base <a href=“http://www.c-group.be”> www.c-group.be</a> • La cible d’un lien peut être : • interne : localisée dans un sous-répertoire du site • externe : localisée ailleurs sur le web • Le lien peut être : • relatif : <a href=“fichiers/intro.pdf”>fichier PDF</a> • absolu : <a href=“http://www.monsite.be/fichiers/ intro.pdf”>fichier PDF</a> 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
  • 298. 5. Balises hypertextes 2. Liens URL et liens email Syntaxe <a href=“http://www.c-group.be”> www.c-group.be</a> 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
  • 299. 5. Balises hypertextes 2. Liens URL et liens email Syntaxe <a href=“http://www.c-group.be”> www.c-group.be</a> • URL : Uniform Ressource Locator 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
  • 300. 5. Balises hypertextes 2. Liens URL et liens email Syntaxe <a href=“http://www.c-group.be”> www.c-group.be</a> • URL : Uniform Ressource Locator • Chaîne de caractères ASCII (= lettres accentué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
  • 301. 5. Balises hypertextes 2. Liens URL et liens email Syntaxe <a href=“http://www.c-group.be”> www.c-group.be</a> • URL : Uniform Ressource Locator • Chaîne de caractères ASCII (= lettres accentuées) • Commence par un protocole de communication 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
  • 302. 5. Balises hypertextes 2. Liens URL et liens email Syntaxe <a href=“http://www.c-group.be”> www.c-group.be</a> • URL : Uniform Ressource Locator • Chaîne de caractères ASCII (= lettres accentuées) • Commence par un protocole de communication • Si le protocole est oublié : grande probabilité d’erreur 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
  • 303. 5. Balises hypertextes 2. Liens URL et liens email Syntaxe <a href=“http://www.c-group.be”> www.c-group.be</a> • URL : Uniform Ressource Locator • Chaîne de caractères ASCII (= lettres accentuées) • Commence par un protocole de communication • Si le protocole est oublié : grande probabilité d’erreur • Ex : oubli http:// => www. est interprété comme sous- répertoire du site racine = erreur 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
  • 304. 5. Balises hypertextes 2. Liens URL et liens email Syntaxe <a href=“mailto:frederic@c-group.be” title=“Contactez- moi”> frederic@c-group.be</a> 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
  • 305. 5. Balises hypertextes 2. Liens URL et liens email Syntaxe <a href=“mailto:frederic@c-group.be” title=“Contactez- moi”> frederic@c-group.be</a> • mailto: indique que le lien est une adresse email 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
  • 306. 5. Balises hypertextes 2. Liens URL et liens email Syntaxe <a href=“mailto:frederic@c-group.be” title=“Contactez- moi”> frederic@c-group.be</a> • mailto: indique que le lien est une adresse email • Appelle le client de messagerie et prépare un nouveau mail à l’attention du destinataire cliqué 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
  • 307. 5. Balises hypertextes 3. Liens efficaces et éléments déconseillés Syntaxe <a href=“http://www.c-group.be” title=“ CGroup Communication, agence web, print et formation”> www.c- group.be</a> 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
  • 308. 5. Balises hypertextes 3. Liens efficaces et éléments déconseillés Syntaxe <a href=“http://www.c-group.be” title=“ CGroup Communication, agence web, print et formation”> www.c- group.be</a> • title renseigne le contenu de l’info-bulle visible en survol 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
  • 309. 5. Balises hypertextes 3. Liens efficaces et éléments déconseillés Syntaxe <a href=“http://www.c-group.be” title=“ CGroup Communication, agence web, print et formation”> www.c- group.be</a> • title renseigne le contenu de l’info-bulle visible en survol • Utile en cas de lien cassé 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
  • 310. 5. Balises hypertextes 3. Liens efficaces et éléments déconseillés Syntaxe <a href=“http://www.c-group.be” title=“ CGroup Communication, agence web, print et formation”> www.c- group.be</a> • title renseigne le contenu de l’info-bulle visible en survol • Utile en cas de lien cassé • Utile pour les moins valides 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
  • 311. 5. Balises hypertextes 3. Liens efficaces et éléments déconseillés Syntaxe <a href=“http://www.c-group.be” title=“ CGroup Communication, agence web, print et formation”> www.c- group.be</a> • title renseigne le contenu de l’info-bulle visible en survol • Utile en cas de lien cassé • Utile pour les moins valides • Utile pour le 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
  • 312. 5. Balises hypertextes 3. Liens efficaces et éléments déconseillés Syntaxe <a href=“http://www.c-group.be” target=“_blank”> www.c-group.be</a> 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
  • 313. 5. Balises hypertextes 3. Liens efficaces et éléments déconseillés Syntaxe <a href=“http://www.c-group.be” target=“_blank”> www.c-group.be</a> • target détermine le comportement 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
  • 314. 5. Balises hypertextes 3. Liens efficaces et éléments déconseillés Syntaxe <a href=“http://www.c-group.be” target=“_blank”> www.c-group.be</a> • target détermine le comportement du navigateur • _blank : ouvre la cible dans une nouvelle fenêtre 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
  • 315. 5. Balises hypertextes 3. Liens efficaces et éléments déconseillés Syntaxe <a href=“http://www.c-group.be” target=“_blank”> www.c-group.be</a> • target détermine le comportement du navigateur • _blank : ouvre la cible dans une nouvelle fenêtre • _self : ouvre la cible dans la même frame 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
  • 316. 5. Balises hypertextes 3. Liens efficaces et éléments déconseillés Syntaxe <a href=“http://www.c-group.be” target=“_blank”> www.c-group.be</a> • target détermine le comportement du navigateur • _blank : ouvre la cible dans une nouvelle fenêtre • _self : ouvre la cible dans la même frame • _parent : ouvre la cible dans la fenêtre parent des frames 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
  • 317. 5. Balises hypertextes 3. Liens efficaces et éléments déconseillés Syntaxe <a href=“http://www.c-group.be” target=“_blank”> www.c-group.be</a> • target détermine le comportement du navigateur • _blank : ouvre la cible dans une nouvelle fenêtre • _self : ouvre la cible dans la même frame • _parent : ouvre la cible dans la fenêtre parent des frames • _top : ouvre la cible dans la même fenêtre 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
  • 318. 5. Balises hypertextes 3. Liens efficaces et éléments déconseillés Syntaxe <a href=“http://www.c-group.be” target=“_blank”> www.c-group.be</a> • target détermine le comportement du navigateur • _blank : ouvre la cible dans une nouvelle fenêtre • _self : ouvre la cible dans la même frame • _parent : ouvre la cible dans la fenêtre parent des frames • _top : ouvre la cible dans la même fenêtre • Déconseillé pour des raisons d’ergonomie 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
  • 319. 5. Balises hypertextes 3. Liens efficaces et éléments déconseillés Syntaxe <a href=“http://www.c-group.be” target=“_blank”> www.c-group.be</a> • target détermine le comportement du navigateur • _blank : ouvre la cible dans une nouvelle fenêtre • _self : ouvre la cible dans la même frame • _parent : ouvre la cible dans la fenêtre parent des frames • _top : ouvre la cible dans la même fenêtre • Déconseillé pour des raisons d’ergonomie • Déconseillé pour les utilisateurs moins valides 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
  • 320. 6. Balises listes 1. Listes ordonnées 2. Listes non ordonnées 3. Imbrication de listes 4. Du bon usage des listes 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
  • 321. 6. Balises listes 1. Listes ordonnées Syntaxe Rendu 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
  • 322. 6. Balises listes 1. Listes ordonnées Syntaxe Rendu • ol est l’abréviation de ordered list (liste ordonné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
  • 323. 6. Balises listes 1. Listes ordonnées Syntaxe Rendu <ol> 1. Elément 1 <li>Elément 1</li> <li>Elément 2</li> 2. Elément 2 </ol> • ol est l’abréviation de ordered list (liste ordonnée) • Par défaut, la liste donne une suite de numéros (1, 2...) 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
  • 324. 6. Balises listes 1. Listes ordonnées 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
  • 325. 6. Balises listes 1. Listes ordonnées HTML CSS • decimal = 1.,2.,3.,4. etc... 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
  • 326. 6. Balises listes 1. Listes ordonnées HTML CSS • decimal = 1.,2.,3.,4. etc... • lower-roman = i.,ii.,iii.,iv. etc... 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
  • 327. 6. Balises listes 1. Listes ordonnées HTML CSS • decimal = 1.,2.,3.,4. etc... • lower-roman = i.,ii.,iii.,iv. etc... • upper-roman = I.,II.,III.,IV. etc... 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
  • 328. 6. Balises listes 1. Listes ordonnées HTML CSS • decimal = 1.,2.,3.,4. etc... • lower-roman = i.,ii.,iii.,iv. etc... • upper-roman = I.,II.,III.,IV. etc... • lower-alpha = a.,b.,c.,d. etc... 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
  • 329. 6. Balises listes 1. Listes ordonnées HTML CSS • decimal = 1.,2.,3.,4. etc... • lower-roman = i.,ii.,iii.,iv. etc... • upper-roman = I.,II.,III.,IV. etc... • lower-alpha = a.,b.,c.,d. etc... • upper-alpha = A.,B.,C.,D. etc... 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
  • 330. 6. Balises listes 1. Listes ordonnées HTML CSS • decimal = 1.,2.,3.,4. etc... • lower-roman = i.,ii.,iii.,iv. etc... • upper-roman = I.,II.,III.,IV. etc... • lower-alpha = a.,b.,c.,d. etc... • upper-alpha = A.,B.,C.,D. etc... • lower-latin = a.,b.,c.,d. etc... 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
  • 331. 6. Balises listes 1. Listes ordonnées HTML CSS • decimal = 1.,2.,3.,4. etc... • lower-roman = i.,ii.,iii.,iv. etc... • upper-roman = I.,II.,III.,IV. etc... • lower-alpha = a.,b.,c.,d. etc... • upper-alpha = A.,B.,C.,D. etc... • lower-latin = a.,b.,c.,d. etc... • upper-latin = A.,B.,C.,D. etc... 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
  • 332. 6. Balises listes 1. Listes ordonnées HTML CSS <ol> ol { <li>Elément 1</li> list-style-type: decimal; <li>Elément 2</li> } </ol> • decimal = 1.,2.,3.,4. etc... • lower-roman = i.,ii.,iii.,iv. etc... • upper-roman = I.,II.,III.,IV. etc... • lower-alpha = a.,b.,c.,d. etc... • upper-alpha = A.,B.,C.,D. etc... • lower-latin = a.,b.,c.,d. etc... • upper-latin = A.,B.,C.,D. etc... • none = pas de numérotation 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
  • 333. 6. Balises listes 2. Listes non ordonnées Syntaxe Rendu 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
  • 334. 6. Balises listes 2. Listes non ordonnées Syntaxe Rendu • ul est l’abréviation de unordered list (liste non ordonné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
  • 335. 6. Balises listes 2. Listes non ordonnées Syntaxe Rendu <ul> • Elément 1 <li>Elément 1</li> <li>Elément 2</li> • Elément 2 </ul> • ul est l’abréviation de unordered list (liste non ordonnée) • Par défaut, la liste donne une suite de puces : • 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
  • 336. 6. Balises listes 2. Listes non ordonnées 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
  • 337. 6. Balises listes 2. Listes non ordonnées HTML CSS • disc = ronds plein (•) 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
  • 338. 6. Balises listes 2. Listes non ordonnées HTML CSS • disc = ronds plein (•) • circle = cercles creux 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
  • 339. 6. Balises listes 2. Listes non ordonnées HTML CSS • disc = ronds plein (•) • circle = cercles creux • square = carré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
  • 340. 6. Balises listes 2. Listes non ordonnées HTML CSS <ul> ul { <li>Elément 1</li> list-style-type: disc; <li>Elément 2</li> } </ul> • disc = ronds plein (•) • circle = cercles creux • square = carrés • none = pas de puce 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
  • 341. 6. Balises listes 3. Imbrication de listes HTML Rendu Pas valide W3C ! 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
  • 342. 6. Balises listes 3. Imbrication de listes HTML Rendu <ol> <li>Elément 1</li> 1. Elément 1 <li>Elément 2</li> 2. Elément 2 <ol> 1. Sous-élément 1 <li>Sous-élément 1</li> <li>Sous-élément 1</li> 2. Sous-élément 2 </ol> 3. Elément 3 <li>Elément 3</li> </ol> Pas valide W3C ! 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
  • 343. 6. Balises listes 3. Imbrication de listes HTML Rendu Pas valide W3C ! 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
  • 344. 6. Balises listes 3. Imbrication de listes HTML Rendu <ul> <li>Elément 1</li> • Elément 1 <li>Elément 2</li> • Elément 2 <ul> • Sous-élément 1 <li>Sous-élément 1</li> <li>Sous-élément 1</li> • Sous-élément 2 </ul> • Elément 3 <li>Elément 3</li> </ul> Pas valide W3C ! 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
  • 345. 6. Balises listes 3. Imbrication de listes HTML Rendu Pas valide W3C ! 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
  • 346. 6. Balises listes 3. Imbrication de listes HTML Rendu <ol> <li>Elément 1</li> 1. Elément 1 <li>Elément 2</li> 2. Elément 2 <ul> • Sous-élément 1 <li>Sous-élément 1</li> <li>Sous-élément 1</li> • Sous-élément 2 </ul> 3. Elément 3 <li>Elément 3</li> </ol> Pas valide W3C ! 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
  • 347. 6. Balises listes 4. Du bon usage des listes Importance des listes 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
  • 348. 6. Balises listes 4. Du bon usage des listes Importance des listes • Le recensement français 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
  • 349. 6. Balises listes 4. Du bon usage des listes Importance des listes • Le recensement français • Le système solaire 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
  • 350. 6. Balises listes 4. Du bon usage des listes Importance des listes • Le recensement français • Le système solaire • Un arbre généalogique 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
  • 351. 6. Balises listes 4. Du bon usage des listes Importance des listes • Le recensement français • Le système solaire • Un arbre généalogique • le menu d’un restaurant 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
  • 352. 6. Balises listes 4. Du bon usage des listes Importance des listes “Dans un certain sens, tout ce qui n’est pas un texte narratif peut être vu comme une liste : • Le recensement français • Le système solaire • Un arbre généalogique • le menu d’un restaurant • tous vos amis” Eric A. MEYER, CSS - La Référence, O’Reilly, 2005, p.371 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
  • 353. 7. Balises formulaires 1. Aperçu 2. Form 3. Input 4. Textarea 5. Select 6. Label 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
  • 354. 7. Balises formulaires 1. Aperçu Syntaxe générale <form action=quot;newuser.phpquot; method=quot;postquot;> <p> <label for=quot;prenomquot;>Prénom: </label> <input type=quot;textquot; id=quot;prenomquot;><br> <label for=quot;nomquot;>Nom: </label> <input type=quot;textquot; id=quot;nomquot;><br> <label for=quot;emailquot;>email: </label> <input type=quot;textquot; id=quot;emailquot;><br> <input type=quot;radioquot; name=quot;sexquot; value=quot;malequot;> Homme<br> <input type=quot;radioquot; name=quot;sexquot; value=quot;femalequot;> Femme<br> <input type=quot;submitquot; value=quot;sendquot;> <input type=quot;resetquot;> </p> </form> 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
  • 355. 7. Balises formulaires 2. Form Syntaxe <form action=quot;newuser.phpquot; method=quot;postquot;></form> 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
  • 356. 7. Balises formulaires 2. Form Syntaxe <form action=quot;newuser.phpquot; method=quot;postquot;></form> • form regroupe les balises de gestion de formulaires 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
  • 357. 7. Balises formulaires 2. Form Syntaxe <form action=quot;newuser.phpquot; method=quot;postquot;></form> • form regroupe les balises de gestion de formulaires • Ses attributs obligatoires sont : 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
  • 358. 7. Balises formulaires 2. Form Syntaxe <form action=quot;newuser.phpquot; method=quot;postquot;></form> • form regroupe les balises de gestion de formulaires • Ses attributs obligatoires sont : • method : méthode d’envoi des informations : 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
  • 359. 7. Balises formulaires 2. Form Syntaxe <form action=quot;newuser.phpquot; method=quot;postquot;></form> • form regroupe les balises de gestion de formulaires • Ses attributs obligatoires sont : • method : méthode d’envoi des informations : • get : information intégrée à l’url spécifiée dans action (via des ? comme séparateurs) et cette url est envoyée pour traitement 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
  • 360. 7. Balises formulaires 2. Form Syntaxe <form action=quot;newuser.phpquot; method=quot;postquot;></form> • form regroupe les balises de gestion de formulaires • Ses attributs obligatoires sont : • method : méthode d’envoi des informations : • get : information intégrée à l’url spécifiée dans action (via des ? comme séparateurs) et cette url est envoyée pour traitement • post : information intégrée au corps du formulaire et envoyée en l’état pour traitement 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
  • 361. 7. Balises formulaires 2. Form Syntaxe <form action=quot;newuser.phpquot; method=quot;postquot;></form> • form regroupe les balises de gestion de formulaires • Ses attributs obligatoires sont : • method : méthode d’envoi des informations : • get : information intégrée à l’url spécifiée dans action (via des ? comme séparateurs) et cette url est envoyée pour traitement • post : information intégrée au corps du formulaire et envoyée en l’état pour traitement • action : indique la destination de l’envoi (une page web ou une adresse email) 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
  • 362. 7. Balises formulaires 3. Input Syntaxe <input type=quot;Nom du champquot; value=quot;Valeur par défautquot; name=quot;Nom de l'élémentquot;></input> 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
  • 363. 7. Balises formulaires 3. Input Syntaxe <input type=quot;Nom du champquot; value=quot;Valeur par défautquot; name=quot;Nom de l'élémentquot;></input> • input est LA balise qui gère les éléments interactifs 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
  • 364. 7. Balises formulaires 3. Input Syntaxe <input type=quot;Nom du champquot; value=quot;Valeur par défautquot; name=quot;Nom de l'élémentquot;></input> • input est LA balise qui gère les éléments interactifs • name : permet de récupérer le contenu entré par l’utilisateur 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
  • 365. 7. Balises formulaires 3. Input Syntaxe <input type=quot;Nom du champquot; value=quot;Valeur par défautquot; name=quot;Nom de l'élémentquot;></input> • input est LA balise qui gère les éléments interactifs • name : permet de récupérer le contenu entré par l’utilisateur • value : récupère la valeur par défaut (si name pas rempli) 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
  • 366. 7. Balises formulaires 3. Input Syntaxe <input type=quot;Nom du champquot; value=quot;Valeur par défautquot; name=quot;Nom de l'élémentquot;></input> • input est LA balise qui gère les éléments interactifs • name : permet de récupérer le contenu entré par l’utilisateur • value : récupère la valeur par défaut (si name pas rempli) • type : type d’élément que l’input représente 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
  • 367. 7. Balises formulaires 3. Input Syntaxe <input type=quot;Nom du champquot; value=quot;Valeur par défautquot; name=quot;Nom de l'élémentquot;></input> • input est LA balise qui gère les éléments interactifs • name : permet de récupérer le contenu entré par l’utilisateur • value : récupère la valeur par défaut (si name pas rempli) • type : type d’élément que l’input représente • Les valeurs sont les suivantes (transparents suivants) 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
  • 368. 7. Balises formulaires 3. Input 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
  • 369. 7. Balises formulaires 3. Input • checkbox : cases à cocher pouvant admettre deux états : checked (coché) et unchecked (non coché). Lorsque la case est cochée, la paire nom/valeur est envoyée au CGI 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
  • 370. 7. Balises formulaires 3. Input • checkbox : cases à cocher pouvant admettre deux états : checked (coché) et unchecked (non coché). Lorsque la case est cochée, la paire nom/valeur est envoyée au CGI • hidden : champ caché qui permet de préciser un paramètre fixe qui sera envoyé au CGI sous forme de paire nom/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
  • 371. 7. Balises formulaires 3. Input • checkbox : cases à cocher pouvant admettre deux états : checked (coché) et unchecked (non coché). Lorsque la case est cochée, la paire nom/valeur est envoyée au CGI • hidden : champ caché qui permet de préciser un paramètre fixe qui sera envoyé au CGI sous forme de paire nom/valeur • file : champ permettant à l'utilisateur de préciser l'emplacement d'un fichier qui sera envoyé avec le formulaire (dans ce cas, préciser le type de données pouvant être envoyées grâce à l'attribut ACCEPT de la balise FORM) 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
  • 372. 7. Balises formulaires 3. Input • checkbox : cases à cocher pouvant admettre deux états : checked (coché) et unchecked (non coché). Lorsque la case est cochée, la paire nom/valeur est envoyée au CGI • hidden : champ caché qui permet de préciser un paramètre fixe qui sera envoyé au CGI sous forme de paire nom/valeur • file : champ permettant à l'utilisateur de préciser l'emplacement d'un fichier qui sera envoyé avec le formulaire (dans ce cas, préciser le type de données pouvant être envoyées grâce à l'attribut ACCEPT de la balise FORM) • image : bouton de soumission personnalisé, dont l'apparence est l'image situé à l'emplacement précisé par son attribut SRC 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
  • 373. 7. Balises formulaires 3. Input 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
  • 374. 7. Balises formulaires 3. Input • password : champ de saisie dans lequel les caractères saisis sont remplacés par des **** (confidentialité) 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
  • 375. 7. Balises formulaires 3. Input • password : champ de saisie dans lequel les caractères saisis sont remplacés par des **** (confidentialité) • radio : bouton permettant un choix parmi plusieurs proposé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
  • 376. 7. Balises formulaires 3. Input • password : champ de saisie dans lequel les caractères saisis sont remplacés par des **** (confidentialité) • radio : bouton permettant un choix parmi plusieurs proposés • reset : bouton de remise à zéro (rétablit l'ensemble des éléments du formulaire à leur valeur par défaut) 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
  • 377. 7. Balises formulaires 3. Input • password : champ de saisie dans lequel les caractères saisis sont remplacés par des **** (confidentialité) • radio : bouton permettant un choix parmi plusieurs proposés • reset : bouton de remise à zéro (rétablit l'ensemble des éléments du formulaire à leur valeur par défaut) • submit : bouton de soumission permettant l'envoi du formulaire (le texte du bouton peut être précisé grâce à l'attribut value) 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
  • 378. 7. Balises formulaires 3. Input • password : champ de saisie dans lequel les caractères saisis sont remplacés par des **** (confidentialité) • radio : bouton permettant un choix parmi plusieurs proposés • reset : bouton de remise à zéro (rétablit l'ensemble des éléments du formulaire à leur valeur par défaut) • submit : bouton de soumission permettant l'envoi du formulaire (le texte du bouton peut être précisé grâce à l'attribut value) • text : champ de saisie permettant la saisie d'une ligne de texte. La taille du champ peut être définie à l'aide de l'attribut size et la taille maximale du texte saisi grâce à l'attribut maxlength 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
  • 379. 7. Balises formulaires 4. Textarea Syntaxe <textarea rows=“3” name=quot;Infosquot;> Tapez vos infos</ textarea> 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
  • 380. 7. Balises formulaires 4. Textarea Syntaxe <textarea rows=“3” name=quot;Infosquot;> Tapez vos infos</ textarea> • textarea: définit une zone de saisie de texte libre 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
  • 381. 7. Balises formulaires 4. Textarea Syntaxe <textarea rows=“3” name=quot;Infosquot;> Tapez vos infos</ textarea> • textarea: définit une zone de saisie de texte libre • cols: nombre de caractères que peut contenir une ligne 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
  • 382. 7. Balises formulaires 4. Textarea Syntaxe <textarea rows=“3” name=quot;Infosquot;> Tapez vos infos</ textarea> • textarea: définit une zone de saisie de texte libre • cols: nombre de caractères que peut contenir une ligne • rows: nombre de lignes 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
  • 383. 7. Balises formulaires 4. Textarea Syntaxe <textarea rows=“3” name=quot;Infosquot;> Tapez vos infos</ textarea> • textarea: définit une zone de saisie de texte libre • cols: nombre de caractères que peut contenir une ligne • rows: nombre de lignes • name: nom associé au champ (permettra d'identifier le champ dans la paire nom/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
  • 384. 7. Balises formulaires 4. Textarea Syntaxe <textarea rows=“3” name=quot;Infosquot;> Tapez vos infos</ textarea> • textarea: définit une zone de saisie de texte libre • cols: nombre de caractères que peut contenir une ligne • rows: nombre de lignes • name: nom associé au champ (permettra d'identifier le champ dans la paire nom/valeur) • readonly: permet d'empêcher l'utilisateur de modifier le texte entré par défaut dans le champ 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
  • 385. 7. Balises formulaires 4. Textarea Syntaxe <textarea rows=“3” name=quot;Infosquot;> Tapez vos infos</ textarea> • textarea: définit une zone de saisie de texte libre • cols: nombre de caractères que peut contenir une ligne • rows: nombre de lignes • name: nom associé au champ (permettra d'identifier le champ dans la paire nom/valeur) • readonly: permet d'empêcher l'utilisateur de modifier le texte entré par défaut dans le champ • value: valeur qui sera envoyée par défaut au script si le champ de saisie n'est pas modifié par une frappe de l'utilisateur 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
  • 386. 7. Balises formulaires 5. Select Syntaxe <select name=quot;dessertquot;> <option value=quot;gateauquot;> gâteau</option> <option value=quot;glacequot;> glace</option> <option value=quot;tartequot;> tarte</option> <option value=quot;autrequot;> autre </option> </select> 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
  • 387. 7. Balises formulaires 5. Select Syntaxe <select name=quot;dessertquot;> <option value=quot;gateauquot;> gâteau</option> <option value=quot;glacequot;> glace</option> <option value=quot;tartequot;> tarte</option> <option value=quot;autrequot;> autre </option> </select> • select crée une liste déroulante d’éléments 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
  • 388. 7. Balises formulaires 5. Select Syntaxe <select name=quot;dessertquot;> <option value=quot;gateauquot;> gâteau</option> <option value=quot;glacequot;> glace</option> <option value=quot;tartequot;> tarte</option> <option value=quot;autrequot;> autre </option> </select> • select crée une liste déroulante d’éléments • name : permet de récupérer le contenu entré par l’utilisateur 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
  • 389. 7. Balises formulaires 5. Select Syntaxe <select name=quot;dessertquot;> <option value=quot;gateauquot;> gâteau</option> <option value=quot;glacequot;> glace</option> <option value=quot;tartequot;> tarte</option> <option value=quot;autrequot;> autre </option> </select> • select crée une liste déroulante d’éléments • name : permet de récupérer le contenu entré par l’utilisateur • disabled : génère une liste désactivée (grisé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
  • 390. 7. Balises formulaires 5. Select Syntaxe <select name=quot;dessertquot;> <option value=quot;gateauquot;> gâteau</option> <option value=quot;glacequot;> glace</option> <option value=quot;tartequot;> tarte</option> <option value=quot;autrequot;> autre </option> </select> • select crée une liste déroulante d’éléments • name : permet de récupérer le contenu entré par l’utilisateur • disabled : génère une liste désactivée (grisée) • size : nombre d’éléments dans la liste 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
  • 391. 7. Balises formulaires 5. Select Syntaxe <select name=quot;dessertquot;> <option value=quot;gateauquot;> gâteau</option> <option value=quot;glacequot;> glace</option> <option value=quot;tartequot;> tarte</option> <option value=quot;autrequot;> autre </option> </select> • select crée une liste déroulante d’éléments • name : permet de récupérer le contenu entré par l’utilisateur • disabled : génère une liste désactivée (grisée) • size : nombre d’éléments dans la liste • multiple : l’utilisateur peut choisir plusieurs champs 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
  • 392. 7. Balises formulaires 6. Label Syntaxe <input type=quot;textquot; id=quot;prenomquot;> <label for=quot;prenomquot;>Prénom: </label> <input type=quot;radioquot; name=quot;testquot; value=quot;1quot; id=quot;essaiquot; /> <label for=quot;essaiquot;>Essai</label> 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
  • 393. 7. Balises formulaires 6. Label Syntaxe <input type=quot;textquot; id=quot;prenomquot;> <label for=quot;prenomquot;>Prénom: </label> <input type=quot;radioquot; name=quot;testquot; value=quot;1quot; id=quot;essaiquot; /> <label for=quot;essaiquot;>Essai</label> • associe un texte (généralement explicatif) à un formulaire 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
  • 394. 7. Balises formulaires 6. Label Syntaxe <input type=quot;textquot; id=quot;prenomquot;> <label for=quot;prenomquot;>Prénom: </label> <input type=quot;radioquot; name=quot;testquot; value=quot;1quot; id=quot;essaiquot; /> <label for=quot;essaiquot;>Essai</label> • associe un texte (généralement explicatif) à un formulaire • permet de cocher un élément radio ou checkbox en cliquant sur le texte qui y correspond 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
  • 395. 7. Balises formulaires 6. Label Syntaxe <input type=quot;textquot; id=quot;prenomquot;> <label for=quot;prenomquot;>Prénom: </label> <input type=quot;radioquot; name=quot;testquot; value=quot;1quot; id=quot;essaiquot; /> <label for=quot;essaiquot;>Essai</label> • associe un texte (généralement explicatif) à un formulaire • permet de cocher un élément radio ou checkbox en cliquant sur le texte qui y correspond • Pour ce faire : 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
  • 396. 7. Balises formulaires 6. Label Syntaxe <input type=quot;textquot; id=quot;prenomquot;> <label for=quot;prenomquot;>Prénom: </label> <input type=quot;radioquot; name=quot;testquot; value=quot;1quot; id=quot;essaiquot; /> <label for=quot;essaiquot;>Essai</label> • associe un texte (généralement explicatif) à un formulaire • permet de cocher un élément radio ou checkbox en cliquant sur le texte qui y correspond • Pour ce faire : • donner un id à l’élément radio ou checkbox 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
  • 397. 7. Balises formulaires 6. Label Syntaxe <input type=quot;textquot; id=quot;prenomquot;> <label for=quot;prenomquot;>Prénom: </label> <input type=quot;radioquot; name=quot;testquot; value=quot;1quot; id=quot;essaiquot; /> <label for=quot;essaiquot;>Essai</label> • associe un texte (généralement explicatif) à un formulaire • permet de cocher un élément radio ou checkbox en cliquant sur le texte qui y correspond • Pour ce faire : • donner un id à l’élément radio ou checkbox • entourer le texte correspondant de label avec l’id en paramètre 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
  • 398. 8. Balise DOCTYPE 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
  • 399. 8. Balise DOCTYPE • Contraction de “Document Type Declaration” 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
  • 400. 8. Balise DOCTYPE • Contraction de “Document Type Declaration” • Nécessaire pour valider une page (x)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
  • 401. 8. Balise DOCTYPE • Contraction de “Document Type Declaration” • Nécessaire pour valider une page (x)HTML • Informe le validateur de la version de (x)HTML utilisé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
  • 402. 8. Balise DOCTYPE • Contraction de “Document Type Declaration” • Nécessaire pour valider une page (x)HTML • Informe le validateur de la version de (x)HTML utilisé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
  • 403. 8. Balise DOCTYPE • Contraction de “Document Type Declaration” • Nécessaire pour valider une page (x)HTML • Informe le validateur de la version de (x)HTML utilisée • DOCTYPE incomplet = aucun DOCTYPE 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
  • 404. 8. Balise DOCTYPE • Contraction de “Document Type Declaration” • Nécessaire pour valider une page (x)HTML • Informe le validateur de la version de (x)HTML utilisée • DOCTYPE incomplet = aucun DOCTYPE • Dans ce cas, basculement du navigateur en “Quirks mode” 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
  • 405. 8. Balise DOCTYPE • Contraction de “Document Type Declaration” • Nécessaire pour valider une page (x)HTML • Informe le validateur de la version de (x)HTML utilisée • DOCTYPE incomplet = aucun DOCTYPE • Dans ce cas, basculement du navigateur en “Quirks mode” • Quirks mode = “comportements bizarres” 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
  • 406. 8. Balise DOCTYPE Syntaxes courantes et correctes de DOCTYPE <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Frameset//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtdquot;> 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
  • 407. 8. Balise DOCTYPE Syntaxes courantes et correctes de DOCTYPE <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Frameset//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtdquot;> • Strict : la version la plus exigeante de 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
  • 408. 8. Balise DOCTYPE Syntaxes courantes et correctes de DOCTYPE <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Frameset//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtdquot;> • Strict : la version la plus exigeante de XHTML • Transitional : version tolérante de 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
  • 409. 8. Balise DOCTYPE Syntaxes courantes et correctes de DOCTYPE <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Frameset//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtdquot;> • Strict : la version la plus exigeante de XHTML • Transitional : version tolérante de XHTML • Frameset : version gérant des frames (déconseillé) 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
  • 410. 8. Balise DOCTYPE Syntaxe additionnelle <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot; lang=quot;enquot;> 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
  • 411. 8. Balise DOCTYPE Syntaxe additionnelle <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot; lang=quot;enquot;> • Spécification xml + langue utilisé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
  • 412. 8. Balise DOCTYPE Syntaxe additionnelle <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot; lang=quot;enquot;> • Spécification xml + langue utilisée • Insertion dans la balise <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
  • 413. 8. Balise DOCTYPE Syntaxe complète pour un DOCTYPE XHTML Strict <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <!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; xml:lang=quot;enquot; lang=quot;enquot;> • Pour connaître la liste des DOCTYPE valides : http://www.w3.org/QA/2002/04/valid-dtd-list.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
  • 414. 9. HTML et référencement 3. Comportement d’un moteur de recherche 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
  • 415. 9. HTML et référencement 3. Comportement d’un moteur de recherche 1. Google fonctionne comme nous ! 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
  • 416. 9. HTML et référencement 3. Comportement d’un moteur de recherche 1. Google fonctionne comme nous ! Un site facile d’accès sera plus visité 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
  • 417. 9. HTML et référencement 3. Comportement d’un moteur de recherche 1. Google fonctionne comme nous ! Un site facile d’accès sera plus visité Un site bien construit et doté d’une bonne architecture sera exploré plus en détails 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
  • 418. 9. HTML et référencement 3. Comportement d’un moteur de recherche 1. Google fonctionne comme nous ! Un site facile d’accès sera plus visité Un site bien construit et doté d’une bonne architecture sera exploré plus en détails Et surtout : un site bien codé sera plus facile à indexer 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
  • 419. 9. HTML et référencement 3. Comportement d’un moteur de recherche 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
  • 420. 9. HTML et référencement 3. Comportement d’un moteur de recherche 2. Index d’un moteur de recherche 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
  • 421. 9. HTML et référencement 3. Comportement d’un moteur de recherche 2. Index d’un moteur de recherche Composé de références compilées par des recherches dans les 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
  • 422. 9. HTML et référencement 3. Comportement d’un moteur de recherche 2. Index d’un moteur de recherche Composé de références compilées par des recherches dans les pages web Enregistrement d’une liste de mots-clés et expressions trouvées en lien avec une 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
  • 423. 9. HTML et référencement 3. Comportement d’un moteur de recherche 2. Index d’un moteur de recherche Composé de références compilées par des recherches dans les pages web Enregistrement d’une liste de mots-clés et expressions trouvées en lien avec une page /! ≠ pages web elles-mêmes ! 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
  • 424. 9. HTML et référencement 3. Comportement d’un moteur de recherche 2. Index d’un moteur de recherche Composé de références compilées par des recherches dans les pages web Enregistrement d’une liste de mots-clés et expressions trouvées en lien avec une page /! ≠ pages web elles-mêmes ! Le moteur va puiser dans son index pour les résultats de recherche 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
  • 425. 9. HTML et référencement 3. Comportement d’un moteur de recherche 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
  • 426. 9. HTML et référencement 3. Comportement d’un moteur de recherche 3. Duplicate content 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
  • 427. 9. HTML et référencement 3. Comportement d’un moteur de recherche 3. Duplicate content Capacité récente des moteurs à analyser si le contenu d’un site est unique ou dupliqué sur plusieurs sites (duplicate content) 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
  • 428. 9. HTML et référencement 3. Comportement d’un moteur de recherche 3. Duplicate content Capacité récente des moteurs à analyser si le contenu d’un site est unique ou dupliqué sur plusieurs sites (duplicate content) Processus : 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
  • 429. 9. HTML et référencement 3. Comportement d’un moteur de recherche 3. Duplicate content Capacité récente des moteurs à analyser si le contenu d’un site est unique ou dupliqué sur plusieurs sites (duplicate content) Processus : 1. Découverte du site 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
  • 430. 9. HTML et référencement 3. Comportement d’un moteur de recherche 3. Duplicate content Capacité récente des moteurs à analyser si le contenu d’un site est unique ou dupliqué sur plusieurs sites (duplicate content) Processus : 1. Découverte du site 2. Vérification de la duplication ou non du contenu et sélection des sites les plus pertinents 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
  • 431. 9. HTML et référencement 3. Comportement d’un moteur de recherche 3. Duplicate content Capacité récente des moteurs à analyser si le contenu d’un site est unique ou dupliqué sur plusieurs sites (duplicate content) Processus : 1. Découverte du site 2. Vérification de la duplication ou non du contenu et sélection des sites les plus pertinents 3. Attribution de l’indice de pertinence 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
  • 432. 9. HTML et référencement 3. Comportement d’un moteur de recherche 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
  • 433. 9. HTML et référencement 3. Comportement d’un moteur de recherche 3. Duplicate content 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
  • 434. 9. HTML et référencement 3. Comportement d’un moteur de recherche 3. Duplicate content Illustration 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
  • 435. 9. HTML et référencement 3. Comportement d’un moteur de recherche 3. Duplicate content Illustration Source : http://www.lejournaldublog.com/duplicate-content/ 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
  • 436. 9. HTML et référencement 3. Comportement d’un moteur de recherche 3. Duplicate content Illustration Source : http://www.lejournaldublog.com/duplicate-content/ 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
  • 437. 9. HTML et référencement 3. Comportement d’un moteur de recherche 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
  • 438. 9. HTML et référencement 3. Comportement d’un moteur de recherche 4. Référencement et flash 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
  • 439. 9. HTML et référencement 3. Comportement d’un moteur de recherche 4. Référencement et flash Le Flash n’est pas du code => les textes sont convertis et non interprétables en tant que tel 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
  • 440. 9. HTML et référencement 3. Comportement d’un moteur de recherche 4. Référencement et flash Le Flash n’est pas du code => les textes sont convertis et non interprétables en tant que tel Le moteur ne perçoit donc pas de hiérachie ni de structuration 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
  • 441. 9. HTML et référencement 3. Comportement d’un moteur de recherche 4. Référencement et flash Le Flash n’est pas du code => les textes sont convertis et non interprétables en tant que tel Le moteur ne perçoit donc pas de hiérachie ni de structuration sémantique Le flash est donc souvent référencé de manière payante ou en contradiction avec les bonnes pratiques 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
  • 442. 9. HTML et référencement 3. Comportement d’un moteur de recherche 4. Référencement et flash Le Flash n’est pas du code => les textes sont convertis et non interprétables en tant que tel Le moteur ne perçoit donc pas de hiérachie ni de structuration sémantique Le flash est donc souvent référencé de manière payante ou en contradiction avec les bonnes pratiques Google a mis au point une technologie pour indexer le flash 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
  • 443. 9. HTML et référencement 5. Importance du balisage sémantique 1. Qu’est-ce que le balisage sémantique ? • Structuration d’un document • Approche structurelle uniquement (mise en page) • Utilisation de repères pour hiérarchiser l’information • Exemples : • Niveaux de titres • Paragraphes • Citations 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
  • 444. 9. HTML et référencement 5. Importance du balisage sémantique 2. Illustrations du balisage sémantique Rendu Titre 1 2 sous-sections 1. Titre 2 Contenu 2. Titre 2 Contenu 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
  • 445. 9. HTML et référencement 5. Importance du balisage sémantique 2. Illustrations du balisage sémantique XHTML balisé Rendu Titre 1 <h1>Titre 1</h1> 2 sous-sections <p>2 sous-sections</p> <h2>1. Titre 2</h2> 1. Titre 2 <p>Contenu</p> Contenu <h2>2. Titre 2</h2> 2. Titre 2 <p>Contenu</p> Contenu 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
  • 446. 9. HTML et référencement 5. Importance du balisage sémantique 2. Illustrations du balisage sémantique XHTML mal balisé Titre 1 <p id=“titre1”>Titre 1</p> 2 sous-sections <p>2 sous-sections</p> <p class=“titre2”>1. Titre 2</p> 1. Titre 2 <p>Contenu</p> Contenu <p class=“titre2”>2. Titre 2</p> 2. Titre 2 <p>Contenu</p> Contenu 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
  • 447. 9. HTML et référencement 5. Importance du balisage sémantique 2. Illustrations du balisage sémantique XHTML mal balisé Rendu Titre 1 <p id=“titre1”>Titre 1</p> 2 sous-sections <p>2 sous-sections</p> <p class=“titre2”>1. Titre 2</p> 1. Titre 2 <p>Contenu</p> Contenu <p class=“titre2”>2. Titre 2</p> 2. Titre 2 <p>Contenu</p> Contenu 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
  • 448. 9. HTML et référencement 6. Optimisation de balises Les balises à optimiser • <title> • <meta keywords> • <meta description> • <h1> => <h6> • <img> • <a> 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
  • 449. Des questions ? Contactez-moi 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
  • 450. Des questions ? Contactez-moi • Fred COLANTONIO 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
  • 451. Des questions ? Contactez-moi • Fred COLANTONIO Consultant et formateur 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
  • 452. Des questions ? Contactez-moi • Fred COLANTONIO Consultant et formateur • 0486 99 58 68 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
  • 453. Des questions ? Contactez-moi • Fred COLANTONIO Consultant et formateur • 0486 99 58 68 • frederic@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