Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Cours 2 – Principales balises HTML5 3INOC – 2013-14 B. Emery 1 Principales bali

Cours 2 – Principales balises HTML5 3INOC – 2013-14 B. Emery 1 Principales balises HTML5 RAPPEL : Tout document HTML commence par le DOCTYPE suivi de la balise <html>, et s’achève avec la balise </html>. DOCTYPE et HTML : Le DOCTYPE : <!DOCTYPE html> La déclaration du doctype se fait toujours au début du fichier et est (théoriquement) indispensable. Elle indique au navigateur le langage informatique utilisé dans le fichier. Pour HTML5, le doctype est très simple, contrairement aux versions précédentes. La balise HTML : <html> Les balises <html> et </html> délimitent le contenu du fichier. On ajoute fréquemment l’attribut lang à cette balise, pour spécifier la langue utilisée dans le document. Vos documents devraient donc commencer (après le doctype) par la balise <html lang="fr">. Cette balise possède un attribut spécifique facultatif, manifest, que nous n’utiliserons pas. Il permet de définir l’url (adresse internet) du fichier de mise en cache, utile pour les WebApp. Balises d’entêtes : L’entête est délimitée par les balises <head> et </head> et se situe toujours en première partie. Elle contient des éléments utiles mais non affichés du fichier. La balise de titre : <title> Cette balise permet de donner un titre complet à la page. Celui-ci n’est pas affiché dans la fenêtre du navigateur mais dans sa barre de titre et est utilisé par les moteurs de recherches pour nommer la page. La balise de métadonnées : <meta /> Cette balise orpheline permet de définir des métadonnées (données connexes du fichier). Il en existe 3 types : qui définit le jeu de caractères utilisé <meta charset="jeu_de_caractères" /> (le plus souvent utf-8), qui définit des métadonnées par un couple nom/contenu <meta name="nom" content="valeur" />, qui définissent des directives pragma (destinées au serveur ou au navigateur) <meta http-equiv="nom" content="valeur" />. Pour le type nom/contenu, on trouve notamment les noms suivantes : author (auteur du fichier), description (brève description du contenu), keywords (liste séparée par des virgules de mots-clés du contenu du fichier). La balise de style : <style> Les balises <style> </style> encadrent les instructions d’affichage (en langage CSS) de la page. Nous les utiliserons au premier semestre, avant de leur préférer une feuille de style externe. Cours 2 – Principales balises HTML5 3INOC – 2013-14 B. Emery 2 Balises de section du corps (catégories Flow, Sectionning) : Ces balises sont incluses dans le corps (<body>…</body>) et permettent de structurer de manière globale la page. La balise d’entête : <header> Cette balise sémantique définit un bloc d’entête qui contient habituellement un titre. Un bloc d’entête peut être contenu dans un autre bloc (comme article, section ou aside). La balise section : <section> Cette balise sémantique définit une zone contenant des éléments différents mais liés par une même thématique. Attention, il est facile de confondre le sens de cette balise avec <article>. Une section peut être contenue dans d’autres blocs. Cette balise est l’équivalent de la balise <div>, la sémantique en plus. La balise de pied-de-page : <footer> Cette balise sémantique définit un pied-de-page qui contient habituellement les mentions légales. Comme l’entête, ce bloc peut être contenu dans d’autres blocs. La balise de navigation : <nav> Cette balise sémantique définit une zone de navigation principale, contenant les liens vers les différentes pages du site. La balise « à côté » : <aside> Cette balise sémantique définit habituellement une zone connexe à la partie principale qui contient des éléments complémentaires mais pas nécessaires comme p.ex. la description de l’auteur d’un texte, dans un bloc <article>. La balise de section autonome : <article> Cette balise sémantique définit une zone autonome (pouvant être syndiquée) de la page et contient généralement à son tour d’autres blocs. Comme un article de presse, composé d’un titre, d’un chapeau d’une illustration et d’un texte, il pourrait être découpé et placé dans un autre contexte. La balise bloc générique : <div> Lorsqu’on souhaite créer un bloc pour des raisons de mise en page, sans lui adjoindre un sens, on utilise cette balise générique. Attention à ne pas en abuser cependant. Balises de bloc du corps (catégorie flow) : Les balises de titres : <h1>, <h2>,…, <h6> Ces balises définissent un titre ou un sous-titre. Il existe 6 niveaux de titre allant de <h1> à <h6>. Lorsque plusieurs titres/sous-titres se suivent, on peut les regrouper au sein d’un bloc <hgroup>. La balise de trait horizontal : <hr /> Cette balise crée une ligne de séparation horizontale. Cours 2 – Principales balises HTML5 3INOC – 2013-14 B. Emery 3 La balise de paragraphe : <p> Ce bloc générique contient du texte accompagné éventuellement d’éléments en ligne / phrasing plus sémantiques (<em>, <q>) ou fonctionnel (lien, image, etc.), mais (théoriquement) pas d’autres blocs / flow. La balise de citation : <blockquote> Ce bloc désigne une citation constituée de plusieurs blocs. Son équivalent en ligne est la balise <q>. Ces balises possèdent l’attribut facultatif spécifique cite, qui permet d’indiquer l’url de la source (et non l’auteur comme on pourrait le supposer). La balise de contenu pré-formaté : <pre> Ce bloc est destiné à contenir un texte pré-formaté, habituellement un (extrait de) code informatique. Pour indiquer le langage cité, il est recommandé d’utiliser l’attribut class. Entre ces balises, les retours chariots sont pris en considération, contrairement au contenu situé en dehors de ce bloc (il faut alors recourir à la balise <br /> pour insérer un retour à la ligne). La balise de contact de l’auteur : <address> Cette balise sémantique contient les informations pour contacter l’auteur de la page. Elle ne doit pas être utilisée pour indiquer une adresse postale ! La balise de figure : <figure> Cette balise sémantique indique une illustration (image, tableau, etc.) pertinente du texte. Il est possible d’y inclure une légende, définie par la balise <figcaption>. La balise <figure> n’appelle pas directement l’image, il faut recourir pour ça à la balise <img> pour le faire. Les balises de listes (catégorie flow) Les balises définissant le type de liste : <ol>, <ul>, <dl> Il existe trois types de liste, les listes ordonnées (<ol>), les listes non-ordonnées (<ul>) et les listes de définitions (<dl>). Les éléments d’une liste ordonnée (ou numérotée) sont précédés d’un n° ou d’une lettre, contrairement aux éléments d’une liste non-ordonnées (ou à puces). Les éléments de ces listes sont inclus entre des balises <li> et </li>. Ces listes peuvent être imbriquées l’une dans l’autre pour créer plusieurs niveaux. Les listes de définitions impliquent des termes à définir <dt> et leur définition <dd>. Les balises définissant un élément d’une liste : <li>, <dd>, <dt> Pour les listes <ul> et <ol>, chaque élément est encadré par un couple de balises <li> et </li>. Dans une liste de définitions, chaque terme à définir est encadré par les balises <dt> et </dt>, directement suivis par sa définition (encadré par les balises <dd> et </dd>). Cours 2 – Principales balises HTML5 3INOC – 2013-14 B. Emery 4 Balises en ligne du corps (catégorie phrasing) : Balise du retour à la ligne : <br /> Dans les fichiers HTML, en dehors des blocs <pre>, les retours à la ligne ne sont pas pris en considération dans l’affichage de la page par le navigateur. Pour forcer une mise à la ligne, on utilise la balise orpheline <br />. Celle-ci ne doit (théoriquement) pas être utilisée pour créer des espaces vides verticaux (cela étant réservé à la CSS) Balise de temps : <time> Les dates et les heures ne sont pas aisément interprétables par les moteurs de recherches, en raison des différents formats existants. Une date devrait donc être spécifiquement repérée par la balise <time>. L’attribut datetime permet de spécifier la date selon le format aaaa-mm-jj (a=année, m=mois, j=jour ) et/ou une heure selon le format Thh:mm:ssZ (h=heure, m=minute, s=seconde, Z=décalage par rapport au temps universel). L’attribut pubdate indique que la date indiquée correspond à celle de publication de la page (ou de l’article). Exemple : <time datetime="2012-08-10T17:23+02:00">Le 10 août 2012 à 17h23, heure de Genève</time> Balise de citation courte : <q> Lorsqu’une citation est incluse dans une phrase, elle est repérée par les balises <q> et </q>. L’attribut facultatif cite permet d’indiquer l’url de la source. Attention à ne pas confondre avec la balise <cite> qui indique (exclusivement) le titre d’un ouvrage ou la balise <blockquote> qui délimite une citation plus grande. Balise de définition : <dfn> Permet de repérer le terme que le reste du texte défini ou qui est défini dans son attribut title. La définition sera alors affichée au survol de l’élément par la souris Balise d’abréviation : <abbr> Permet de repérer une abréviation ou un acronyme. Il est possible d’indiquer dans l’attribut title, la version non-abrégée, qui sera affichée au survol de l’élément par la souris. Balise de surlignement : <mark> Permet d’attirer l’attention sur une partie du texte, généralement en le surlignant. Balises générique de soulignement, d’italique ou de mise en gras : <u>, <i>, <b> Permet de souligner, mettre en italique ou en gras, du texte sans lui attribuer de valeur sémantique. Balise d’emphase modérée et forte : <em>, <strong> Ces balises sémantiques permettent uploads/Litterature/ principales-baliseshtml.pdf