Cours HTML embarqué - · PDF file 2020-05-25 · traiter des données...

Click here to load reader

  • date post

    30-Jun-2020
  • Category

    Documents

  • view

    3
  • download

    0

Embed Size (px)

Transcript of Cours HTML embarqué - · PDF file 2020-05-25 · traiter des données...

  • C O U R S H T M L E M B A R Q U É

    Ce document est le support du cours “HTML embarqué” donné au Microclub en janvier et février 2018.

    Le but de ce cours est de donner les bases qui permettront aux participants de créer des applications web simples et suffisamment légères pour être embarquées dans des objets connectés.

    Nous aborderons les points suivants :

    • HTML • CSS • JavaScript

    Nous verrons lors du dernier cours comment appliquer pratiquement les point abordés en program- mant une carte à microcontrôleur ESP8266.

    Nicolas Jeanmonod

    https://microclub.ch/

  • H T M L

    Retour à l’accueil

    LES AGENTS UTILISATEURS

    Dans le cadre de ce cours, un agent utilisateur, ou user agent en anglais, est un logiciel qui peut traiter des données conformes aux normes HTML, XHTML, CSS, JavaScript et JSON. Cette liste n’est pas exhaustive et différents agents utilisateurs offrent des possibilités plus étendues ou au contraire plus restreintes. Pour la suite, nous nous focaliserons sur la partie du traitement des fichiers HTML, CSS et JavaScript.

    Dans la grande majorité des cas, l’agent utilisateur sera un navigateur web, ou web browser en anglais, mais il est intéressant de noter que d’autres possibilités existent :

    • Les appareils IoT (Internet of Things ou Internet des objets). • Les navigateurs braille pour les personnes malvoyantes. • Les logiciels de mise en page comme Prince XML. • Les logiciels qui ne sont pas des navigateurs mais qui utilisent des données distantes. Par

    exemple les applications météo ou les horaires de transports publics. • ...

    Pour en savoir plus

    • Agents utilisateurs (Wikipedia fr)

    LA STRUCTURE MINIMALE D’UNE PAGE HTML

    Voici la structure minimale pour qu’un document soit considéré comme un document HTML par tous les agents utilisateurs.

    Structure minimale

    On voit dans cet exemple que le code HTML est composé de balises. Les balises absolument obli- gatoires pour qu’un document soit considéré comme un document HTML sont :

    ATELIER HTML EMBARQUÉ JAN-FÉV 2018 2019-01-01 18:52:22 MICROCLUB — NICOLAS JEANMONOD

    https://github.com/NicHub/microclub-atelier-html-embarque/wiki https://www.princexml.com/ https://fr.wikipedia.org/wiki/User_agent

  • 1. 2. 3. 4. 5. 6.

    Nous aurons besoin d’autres balises pour étoffer nos documents HTML, mais les 6 ci-dessus doivent toujours être présentes.

    Sans entrer dans les détails, voici à quoi servent ces premiers éléments :

    1. Définit que le document suit la norme HTML 5.

    2. Tout le document (à l’exception du doctype) est entouré des balises .

    3. Le contenu de l’élément sert à donner des informations aux agents utilisateurs. Ces informa- tions ne sont donc pas visibles directement par l’utilisateur, à l’exception du contenu de l’élément et du favicon (pas déclaré dans cet exemple). Il est possible de générer dynamiquement ce contenu avec JavaScript.

    4. Cet élément indique au navigateur quel est l’encodage du fichier. Sans cette information, les navigateurs font des choix par défaut qui sont souvent différents de l’UTF-8 et donc les caractères ne s’afficheront pas correctement. Pour des raisons de performance, il est conseillé de placer cette balise en premier dans l’élément .

    5. Le contenu de l’élément sera affiché dans l’onglet de la page dans le navigateur.

    6. Et enfin, le contenu visible par l’utilisateur de la page est placé dans l’élément . Il est pos- sible de générer dynamiquement ce contenu avec JavaScript.

    LES ÉLÉMENTS ET LEURS BALISES

    Structure des éléments HTML

    Un élément HTML est formé de balises, ou tag en anglais. Par exemple :

    Pour la balise ouvrante, la structure est :

    2 HTML

    MICROCLUB — NICOLAS JEANMONOD 2019-01-01 18:52:22 ATELIER HTML EMBARQUÉ JAN-FÉV 2018

  • • chevron ouvrant ()

    Pour la balise fermante, la structure est :

    • chevron ouvrant ()

    Entre les balises, on peut inclure :

    • rien :

    • du texte sans balises :

    du texte

    • d’autres balises :

    du texte

    • d’autres balises imbriquées (nested en anglais) :

    du texte

    Éléments HTML vides

    Certains éléments HTML sont toujours vides, c’est-à-dire qu’ils n’ont jamais de contenu entre leur balise ouvrante et leur balise fermante. On les appelle “éléments vides” (empty elements ou void elements en anglais). Dans ce cas, il est obligatoire d’utiliser une notation compacte avec la barre oblique avant le chevron fermant, que l’on nomme “balise autofermante”.

    Donc ceci est valide :


    Alors que ceci n’est pas valide :


    Dans une balise autofermante, l’espace avant la barre oblique est optionnel.

    Voici une liste d’éléments vides : Éléments vides MDN, fr

    Éléments HTML non vides

    Si un élément peut avoir un contenu (non-void HTML element en anglais), mais que ce contenu est simplement vide dans un contexte donné, il n’est pas valide d’utiliser la notation compacte.

    HTML 3

    ATELIER HTML EMBARQUÉ JAN-FÉV 2018 2019-01-01 18:52:22 MICROCLUB — NICOLAS JEANMONOD

    https://developer.mozilla.org/fr/docs/Glossaire/Element_vide

  • Donc ceci est valide :

    Alors que ceci n’est pas valide :

    La grande majorité des éléments HTML sont non vides.

    Cas particulier de l’élément

    L’élément script est un peu spécial parce qu’il peut être utilisée de deux façons différentes :

    • Pour appeler un script externe au fichier HTML. • Pour définir un script interne au fichier HTML.

    Dans le cas de l’appel du script externe, cet élément est toujours vide. Il serait donc légitime de pen- ser qu’on peut utiliser la balise autofermante. Mais comme cet élément peut avoir un contenu dans sa deuxième utilisation, on doit toujours utiliser la notation avec une balise ouvrante et une balise fermante.

    console.log("Hello Microclub !")

    Notons au passage que les feuilles de style CSS peuvent aussi être internes ou externes au fichier HTML. Mais dans ce cas, les balises utilisées sont différentes :

    4 HTML

    MICROCLUB — NICOLAS JEANMONOD 2019-01-01 18:52:22 ATELIER HTML EMBARQUÉ JAN-FÉV 2018

  • /* commentaire CSS */

    Pour résumer :

    CSS externe : CSS interne : JS externe : JS interne :

    Imbrication d’éléments

    Lorsque les éléments sont imbriqués (nested en anglais), il est important de fermer les balises “enfants” avant les balises “parents”.

    Ceci est correct :

    ...

    Ceci ne l’est pas :

    ...

    Quelques éléments courants

    Voici une liste non exhaustive d’éléments courants :

    Ceci est un paragraphe. Les retours à la ligne doivent y être explicitement indiqués avec la balise

    La balise “p” est la plus utilisée pour afficher du texte.

    Texte en gras

    Texte en italique

    Texte en gras avec une partie italique

    Ceci est un texte préformaté dans lequel les passages à la ligne

    HTML 5

    ATELIER HTML EMBARQUÉ JAN-FÉV 2018 2019-01-01 18:52:22 MICROCLUB — NICOLAS JEANMONOD

  • et les espaces seront respectés

    Le est utilisé pour formater différemment une partie du texte.

    Le div sert à regrouper des balises.

    ...

    ...

    Liste des balises HTML

    La norme HTML définit environ 130 balises différentes que vous pouvez découvrir en suivant les liens ci-dessous.

    Éléments vs balises

    Comme nous l’avons vu ci-dessus, un élément HTML est composé de balises et d’un contenu. Dans le langage courant, on utilise souvent indifféremment les termes éléments et balises, même si à pro- prement parler il s’agit de deux choses distinctes.

    Pour en savoir plus

    • Les balises HTML et leur rôle (MDN fr) • Référence des éléments HTML (MDN fr) • HTML Element Reference (W3Schools en)

    LES ATTRIBUTS

    Toutes les balises acceptent des attributs, certains étant obligatoires d’autres optionnels.

    Par exemple, la balise qui sert à insérer une image a deux attributs obligatoires : src et alt. À noter que l’attribut alt est souvent omis dans les pages web que vous rencontrerez. Il est pourtant fortement conseillé, car il s’agit du texte qui remplacera l’image si celle-ci ne peut pas être affichée. Cet attribut est aussi utilisé par les systèmes de lecture pour les malvoyants.

    Voir les attributs possibles de la balise sur le site MDN.

    Les attributs peuvent être mis à ligne pour faciliter la lecture :

    6 HTML

    MICROCLUB — NICOLAS JEANMONOD 2019-01-01 18:52:22 ATELIER HTML EMBARQUÉ JAN-FÉV 2018

    https://developer.mozilla.org/fr/Apprendre/HTML/Balises_HTML https://developer.mozilla.org/fr/docs/Web/HTML/Element https://www.w3schools.com/tags/ https://developer.mozilla.org/fr/docs/Web/HTML/Element/Img

  • Les attributs personnalisés

    HTML5 permet à l’utilisateur de définir ses propres attributs ce qui peut être fort utile lorsqu’on désire rendre le document interactif avec JavaScript. Ces attributs personnalisés s’appellent “attri- buts de données” et doivent obligatoirement commencer par le préfix data-.

    ...

    Voir les at