« Introduction à HTML5 » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 69 : Ligne 69 :
*: La balise <code><head></code> démarque le début d'une série d'autres balises qui sont destinées au navigateur web. En d'autres termes, ces balises ne fournissent pas du contenu à la page, mais informent le navigateur sur certaines caractéristiques de la page. Les deux balises <code><meta></code> dépassent le niveau introductif de cet article, mais c'est important de les utiliser dans vos pages. La balise <code><title></code> de la '''ligne 6''' détermine le titre de la page au niveau de la fenêtre/tab du navigateur. D'ailleurs, le contenu de cette balise détermine également le titre de la page lorsqu'elle apparaît dans les résultats des moteurs de recherche. Il s'agit donc d'une balise importante, pour laquelle il faut trouver un contenu saillant et en relation avec le contenu du document.
*: La balise <code><head></code> démarque le début d'une série d'autres balises qui sont destinées au navigateur web. En d'autres termes, ces balises ne fournissent pas du contenu à la page, mais informent le navigateur sur certaines caractéristiques de la page. Les deux balises <code><meta></code> dépassent le niveau introductif de cet article, mais c'est important de les utiliser dans vos pages. La balise <code><title></code> de la '''ligne 6''' détermine le titre de la page au niveau de la fenêtre/tab du navigateur. D'ailleurs, le contenu de cette balise détermine également le titre de la page lorsqu'elle apparaît dans les résultats des moteurs de recherche. Il s'agit donc d'une balise importante, pour laquelle il faut trouver un contenu saillant et en relation avec le contenu du document.
* '''Lignes 8 à 14'''
* '''Lignes 8 à 14'''
*: La balise <code><body></code> démarque le début du contenu ''visible'' de la page, avec un balise de type <code><h1></code> qui représente un titre de niveau 1, et d'une balise <code><nowiki><p></nowiki></code> qui représente un paragraphe.
*: La balise <code><body></code> démarque le début du contenu ''visible'' de la page, avec un balise de type <code><nowiki><h1></nowiki></code> qui représente un titre de niveau 1 ('''ligne 10'''), et d'une balise <code><nowiki><p></nowiki></code> qui représente un paragraphe ('''ligne 12''').


Le résultat de cette page dans un navigateur web est le suivant :
Le résultat de cette page dans un navigateur web est le suivant :

Version du 29 août 2020 à 16:48

Introduction

HTML5 est la cinquième version du langage de marquage HTML, acronyme de Hyper Text Markup Langage, utilisé pour structurer les pages et applications web. Cette page propose une introduction à HTML5 destinée à des personnes sans expérience préalable avec HTML ou un langage de marquage en général. Elle est principalement conçue en tant que complément de l'Atelier d'Initiation MINIT du Master MALTT de l'Université de Genève, mais son contenu peut s'adresser à toute personne désirant acquérir des notions de base sur la création de page web. La page est complété par l'Introduction à CSS qui aborde la définition des propriétés graphiques d'un document web. Pour une approche plus technique à HTML5 et une comparaison avec d'autres versions du langage (e.g. XHTML), se référer à la page principale HTML5.

Prérequis

Aucune connaissance préalable n'est nécessaire pour suivre le contenu de l'article. Pour répliquer ou adapter les exemples il peut être utile de disposer d'un éditeur de texte avec aide à la syntaxe comme Visual studio code ou Brackets.

Langage de marquage avec balises (tag)

Un langage de marquage consiste à utiliser une notation graphique pour structurer ou décorer un texte. Il existe différentes techniques de marquage qui peuvent être plus ou moins complexes selon les finalités et l'étendu du langage. HTML5 utilise une notation par balises, ou tags en anglais, qui consiste à contourner le contenu textuel avec des éléments qui en qualifie la nature. Par exemple, la notation suivante qualifie le contenu textuel en tant que paragraphe : 

<p>Ceci est le texte d'un paragraphe.</p>

Le contenu textuel est précédé par une balise d'ouverture <p> et suivi par la balise de clôture </p>. HTML5 prévoit environ une centaine de ces balises, mais dont seulement une trentaine sont utilisés fréquemment dans la plupart des pages web. De plus, les balises peuvent être mieux définies par des attributs, comme dans l'exemple suivant : 

<a href="https://edutechwiki.unige.ch">Lien vers EduTechWiki</a>

Ce code qualifie le contenu textuel "Lien vers EduTechWiki" en tant que lien hypertextuel à travers la balise <a>. Cette balise accepte plusieurs attributs qui permettent de mieux définir son utilité, parmi lesquels l'attribut href détermine vers quel URL doit pointer le lien hypertextuel.

Cet exemple introduit déjà plusieurs éléments qu'il est utile d'identifier pour introduire des termes utilisés dans la suite de la page, représentés également à l'image :

  • a est le nom de la balise
  • href est le nom de l'attribut
  • https://edutechwiki.unige.ch est la valeur de l'attribut
  • Lien vers EduTechWiki est le contenu de la balise

HTML5 est un langage de marquage combinatoire qui permet d'emboîter les balises. Par exemple, nous pouvons combiner les deux balises que nous venons de voir de la manière suivante : 

<p>Si vous êtes intéressé-e-s par la technologie éducative, vous devez absolument visiter <a href="https://edutechwiki.unige.ch">EduTechWiki</a> au plus vite !</p>

À travers cette syntaxe, nous avons inséré un lien hypertextuel à l'intérieur d'un paragraphe. Une page web se construit par extension de ce principe de base.

Anatomie d'un document HTML5

Dans la section précédente, nous avons introduit les balises p et a pour montrer, au niveau micro, le fonctionnement d'un langage de marquage. Dans cette section, nous proposons et analysons la structure type d'un simple document HTML5 pour illustrer comme ce principe de base s'applique à une page web entière. Voyons d'abord l'ensemble du code que nous allons expliquer par morceaux : 

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page visible dans le tab du navigateur</title>
</head>
<body>

    <h1>Voici une page web</h1>

    <p>Cette page est un exemple de document HTML5</p>
    
</body>
</html>

Nous avons ici le code source d'une page web en HTML5 qui présente ces éléments principaux :

  • Ligne 1
    La balise <!DOCTYPE html> est une entête qui informe le navigateur web qu'il s'agit d'un document HTML5, bien que la version n'apparaisse pas explicitement. Il s'agit d'un choix délibéré que nous aborderons plus bas dans la page.
  • Ligne 2
    La balise <html lang="fr"> représente la racine du document, car tous les autres balises sont contenues à l'intérieur de cette balise. La balise de clôture </html>, en effet, apparaît à la dernière ligne du code source. La balise dispose de l'attribut lang qui informe le navigateur web sur la langue de la page. Ceci est très utile dans une perspective d'accessibilité des pages web, car les screen-readers utilisés par les personnes avec des difficultés visuelles savent avec quel accent lire le contenu de la page.
  • Lignes 3 à 7
    La balise <head> démarque le début d'une série d'autres balises qui sont destinées au navigateur web. En d'autres termes, ces balises ne fournissent pas du contenu à la page, mais informent le navigateur sur certaines caractéristiques de la page. Les deux balises <meta> dépassent le niveau introductif de cet article, mais c'est important de les utiliser dans vos pages. La balise <title> de la ligne 6 détermine le titre de la page au niveau de la fenêtre/tab du navigateur. D'ailleurs, le contenu de cette balise détermine également le titre de la page lorsqu'elle apparaît dans les résultats des moteurs de recherche. Il s'agit donc d'une balise importante, pour laquelle il faut trouver un contenu saillant et en relation avec le contenu du document.
  • Lignes 8 à 14
    La balise <body> démarque le début du contenu visible de la page, avec un balise de type <h1> qui représente un titre de niveau 1 (ligne 10), et d'une balise <p> qui représente un paragraphe (ligne 12).

Le résultat de cette page dans un navigateur web est le suivant :

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Introduction_à_HTML5&oldid=135956 »