Introduction au HTML 5

Dimension: px

Commencer à balayer dès la page:

Download "Introduction au HTML 5"

Juliette Ruel
il y a 7 ans
Total affichages :

1 Introduction au HTML 5 Les balises structurantes de HTML5 Plusieurs balises ont été introduites avec HTML5 pour délimiter les différentes zones qui constituent la page web : <header> : en-tête; <footer> : pied de page; <nav> : liens principaux de navigation; <section> : section de page; <aside> : informations complémentaires; <article> : article indépendant. L'en-tête <header> La plupart des sites web possèdent en général un en-tête, appelé header en anglais. On y trouve le plus souvent un logo, une bannière, le slogan de votre site Vous devrez placer ces informations à l'intérieur de la balise <header> : <header>  </header> 1/5

2 Le pied de page <footer> À l'inverse de l'en-tête, le pied de page se trouve en général tout en bas du document. On y trouve des informations comme des liens de contact, le nom de l'auteur, les mentions légales, etc. <footer>  </footer> Principaux liens de navigation <nav> La balise <nav> doit regrouper tous les principaux liens de navigation du site. Vous y placerez par exemple le menu principal de votre site. <nav> <ul> <li><a href="index.html">accueil</a></li> <li><a href="forum.html">forum</a></li> <li><a href="contact.html">contact</a></li> </ul> </nav> Une section de page <section> La balise <section> sert à regrouper des contenus en fonction de leur thématique. Elle englobe généralement une portion du contenu au centre de la page. <section> <h1>ma section de page</h1> <p>bla bla bla bla</p> </section> Informations complémentaires <aside> La balise <aside> est conçue pour contenir des informations complémentaires au document que l'on visualise. Ces informations sont généralement placées sur le côté (bien que ce ne soit pas une obligation). <aside>  </aside> Un article indépendant <article> La balise <article> sert à englober une portion généralement autonome de la page. C'est une partie de la page qui pourrait ainsi être reprise sur un autre site. C'est le cas par exemple des actualités (articles de journaux ou de blogs). <article> <h1>mon article</h1> <p>bla bla bla bla</p> </article> 2/5

3 Les différences entre XHTML et HTML5 Remarque : en HTML5, il n'est plus nécessaire de mettre les attributs entre guillemets ou apostrophes. Mais c'est quand même accepté. Pour ma part, je vous conseille de les utiliser. <!DOCTYPE html> <html lang="fr"> <meta charset="utf-8" /> simplifié simplifié, précise la langue aux lecteurs vocaux encodage simplifié Transformation de quelques div en utilisant un système plus sémantique : <header>, <nav>, <section>, <article>, <aside>, <footer> De plus, HTML5 est plus permissif certains éléments ne nécessitent pas de balise fermante pour être valides. Une balise autofermante (vide) s'écrit comme ceci : <image /> ou <image> Notez que le / de fin n'est pas obligatoire. On pourrait écrire seulement <image>. Néanmoins, pour ne pas les confondre avec le premier type de balise, les webmasters recommandent de rajouter ce / (slash) à la fin des balises autofermantes (vides). Vous me verrez donc mettre un / aux balises vides et je vous recommande de faire de même, c'est une bonne pratique. Les notons que l attribut type (rencontré principalement au sein des balises <script> et <style>) devient superflu. Il y a de nouveaux éléments de périphériques tel que <audio>, <video> et <canvas> destinés à gérer les aspects visuels, sonores et graphiques, mais que nous ne verrons malheureusement pas dans ce cours. Diverses balises (éléments) et attributs HTML 5 <figure> et <figcaption> Utilisez l'élément <figure> pour marquer une photo dans un document. L'élément <figure> contient aussi une légende utilisez <figcaption> pour la légende. Exemple : Le <figcaption> définit une légende pour un élément <figure>. L'élément <figcaption> peut être placé comme le premier ou le dernier enfant de l'élément <figure> <figure> <img src="img_pulpit.jpg" alt="the Pulpit Rock" width="304" height="228"> <figcaption>fig1. - A view of the pulpit rock in Norway.</figcaption> </figure> <hgroup> : Retiré du HTML 5 obsolète ne pas utiliser C'était pour regrouper titre et sous-titres. 3/5

4 L'élément <time> L élément <time> représente un avantage non seulement pour la sémantique, mais aussi pour l indexation automatisée par les moteurs de recherche, ou encore pour l importation de données dans un agenda personnel. Son but est de lever toute ambiguïté sur la syntaxe à utiliser pour baliser une date ou une heure. <p>le party débutera à <time>14:00</time>.</p> L'attribut : datetime Si l attribut datetime n est pas spécifié, alors le contenu texte de l élément doit se conformer au format de date. En revanche, s il est présent, le contenu de l élément est totalement libre entre les balises de début et de fin. <p>le party 2013 est programmé le <time datetime=" " pubdate> 1 er avril 2013</time>.</p> <p>le Party 2013 multimédia va avoir lieu le <time datetime=" T14:00-05:00" pubdate>1 er mai 2013 à 14 h</time>.</p> Format de date autorisé : Une date : YYYY-MM-DD, par exemple pour le 1er avril Une heure : HH:MM, par exemple 13:37 pour 13 h 37. Une date et une heure : YYYY-MM-DDTHH:MMZ pour une date UTC ou YYYY-MMDDTHH: MM+HH:MM pour la précision d un décalage de fuseau horaire (UTC/GMT). Explications des notations : UTC Le temps universel coordonné UTC (Coordinated Universal Time) sert de référence. Il succède à l ancienne appellation GMT (Greenwich Mean Time). T un séparateur obligatoire si l'heure est aussi spécifié. Z est équivalente à un temps UTC+0 pour lequel on ne précise pas de décalage, donc à +00:00 + ou - (positif ou négatif) indique un décalage horaire. +HH:MM précise un décalage en heures et minutes / +02:00 ou UTC+2 pour Paris / -05:00 est équivalent à UTC-5 (Rimouski). L'attribut pubdate Si l attribut pubdate est présent, il confère un rôle sémantique particulier à l élément qui devient de facto un repère de temps pour l élément <article> qui le contient, ou à défaut le document entier s il n est pas enfant d un article. En bref, date de publication d'un élément article. Assurer la compatibilité avec Internet Explorer Les nouvelles balises que nous venons de voir ne sont pas reconnues par Internet Explorer que depuis sa version 9 (IE9). Pour que IE applique le CSS à HTML5, vous devez utiliser : Dans le fichier html, mettre un commentaire conditionnel :  4/5

5 Dans le fichier html5-ie.js document.createelement('header'); // pour IE8 et moins document.createelement('nav'); document.createelement("section"); document.createelement('aside'); document.createelement('article'); document.createelement("figure"); document.createelement("figcaption"); document.createelement("hgroup"); document.createelement("time"); document.createelement('footer'); Dans le fichier style.css : header, footer, aside, nav, article, p { display:block; } Une autre alternative consiste à se référer au document JavaScript dédié et optimisé que l on peut lier depuis les serveurs de Google : <!DOCTYPE html> <html> <head> <title>titre du document</title> <meta charset="utf-8" />  </head> <body> </body> </html> 5/5

Documents pareils

Initiation à html et à la création d'un site web

Initiation à html et à la création d'un site web Introduction : Concevoir un site web consiste à définir : - l'emplacement où ce site sera hébergé - à qui ce site s'adresse - le design des pages qui le