Le document présente un aperçu des normes HTML5 et CSS3, en soulignant l'évolution du HTML depuis XHTML vers HTML5 tout en conservant la séparation du contenu et de la mise en forme. Il aborde les nouvelles balises et les fonctionnalités améliorées de CSS3, telles que la transparence, les sélecteurs avancés, et les transformations géométriques. Enfin, il évoque l'importance de l'adaptation aux appareils mobiles et aux navigateurs modernes.

1. Un aperçu des nouvelles normes HTML 5 et CSS 3 Rencontres Mondiales des Logiciels Libres Bordeaux - mercredi 7 juillet 2010 Francis Draillard, auteur de "Premiers pas en CSS et XHTML" - éditions Eyrolles

2. Du XHTML au HTML 5 Rencontres Mondiales des Logiciels Libres Bordeaux - mercredi 7 juillet 2010 Francis Draillard auteur de "Premiers pas en CSS et XHTML" - éditions Eyrolles

3. L'évolution du HTML HTML 4 whatwg.org Web Hypertext Appplication Technology Working Group problème de "rétrocompatibilité" XHTML 1 puis 1.1 HTML 5 / XHTML 5 XHTML 2

4. Retour au HTML ? Sous cette appellation HTML 5 , les principes essentiels du XHTML sont conservés Séparation du contenu (code HTML 5) et de la mise en forme (feuille de style CSS)

5. Des balises qui donnent du sens au texte

6. Séparation du contenu et de la mise en forme <h1> Titre </h1> <h2> Premier sous-titre </h2> <p> Du texte... du texte... du texte... du texte... </p> <h2> Deuxième sous-titre </h2> <p> Du texte... du texte... du texte... du texte... </p> <style type=&quot;text/css&quot;> h1 { mise en forme des titres ... } h2 { mise en forme des sous-titres ... } p { mise en forme des paragraphes ... } </style>

7. HTML 5 ou XHTML 5 ? Ces deux langages sont très proches

8. Les balises sont identiques Sites web courants : HTML 5

9. XHTML 5 : pour liens avec XML Le plus important : Utiliser les balises de façon rationnelle

10. Orientations du HTML 5 Davantage de sens pour les balises

11. Délimitation des parties de la page par des sections (remplaçant certains <div>)

12. Simplification des contenus multimédias (audio, vidéo, animations)

13. Sections HTML 5 <section> délimite un bloc de la page (  <div>) <article> texte indépendant dans la page ou une section <aside> contenu différent (publicité, slogan, brèves, ...) <nav> menu de navigation

14. Sous-sections HTML 5 Délimitent les parties d'une page ou d'une section de la page <header> en-tête <hgroup> ensemble de titres et sous-titres <h1>, <h2>, ... <footer> pied de page ou de section

15. Exemple de sections interprétation en HTML 5 d'un extrait du site www.framasoft.net <header> <footer> <header> <header> <footer> <footer> <article> <article> <article>

16. Contenus multimédias, audios et vidéos Logiciel de lecture intégré au navigateur - plus besoin d'application complémentaire - balises simplifiées <audio> et <video> <audio src=&quot;piano-bar.mp3&quot;> texte alternatif </audio>

17. <video src=&quot;monclip.webm&quot;> texte alternatif </video> Insertion simplifiée des contenus Flash <embed src=&quot;pub.swf&quot; />

18. Formats vidéos Theora : format libre et ouvert

19. H264 : format propriétaire et soumis à une licence très coûteuse

20. WebM : format libre et ouvert (codec VP8 ) format récent et performant, très prometteur

21. projet soutenu par Mozilla, Google, Opera, ...

22. www.webmproject.org

23. Application Balises audio et video N'abusez pas du vin, même s'il est tiré à la clef USB ! Ce ne serait pas bon pour votre santé et pour la compréhension du HTML5 ! Affichage fourni par Chrome 5

24. Utilisation du HTML 5 En complément du XHTML, en attendant la généralisation des nouvelles versions de navigateurs

25. Dès à présent, si les destinataires sont équipés de navigateurs modernes  pour les tablettes et terminaux mobiles  dans le cadre d'un intranet ...

26. Principales nouveautés des CSS 3 Rencontres Mondiales des Logiciels Libres Bordeaux - mercredi 7 juillet 2010 Francis Draillard auteur de &quot;Premiers pas en CSS et XHTML&quot; - éditions Eyrolles

27. Nouveaux sélecteurs CSS3 Plus de possibilités dans les sélecteurs balises ayant le même parent