Cégep de Sainte-Foy | Techniques d'intégration multimédia

582-104-SF Intégration 1

Leçon 2

Introduction au HTML [2]

Un bon balisage, qu'est-ce que c'est ?

L'écriture de documents HTML bien structurés est la clé du web actuel et conforme aux standards.

Vous devriez suivre les quatre recommandations suivantes lors de la création de contenu publié sur le web.

Écrire des documents conformes et valides, respectant les standards du web

  • Les balises et les attributs HTML doivent être utilisés conformément aux règles établies par les recommandations du W3C, le World Wide Web Consortium.
  • En respectant les standards, vos documents sont compatibles avec les technologies web en développement et les plus récentes fonctionnalités des navigateurs.
  • Il existe des outils en ligne pour la validation du balisage : nous les utiliserons au cours de la session.

Utiliser un balisage sémantique

Le balisage sémantique consiste à utiliser les balises pour donner du sens au contenu d'une page web.

>>> Les éléments du document web doivent être sémantiques...

... c'est-à-dire, signifiants et descriptifs.

>>> Le balisage sémantique met l'accent...

... sur le choix d'éléments décrivant le contenu de manière adéquate et non sur leur présentation dans le navigateur :

  • Par exemple, l'utilisation d'un élément blockquote dans le seul but de créer un retrait sur la gauche est à proscrire. Il ne doit être utilisé que pour baliser une citation longue ;
  • L'usage d'un élément «citation longue» pour autre chose qu'une citation longue enlève du sens au document. Cela rend l'interprétation du document aléatoire.

>>> Le balisage sémantique n'est pas qu'une simple conformité aux standards...

...car un document peut être considéré valide quant aux standards de l'écriture, mais déficient sur le plan de la signification du contenu.

Autrement dit, si vous utilisez un élément de paragraphe générique p plutôt qu'un élément h1 ou h2 pour baliser un titre, votre document sera valide, mais pauvre en sens.

>>>Un balisage sémantique garantit une compatibilité...

...avec un grand nombre d'environnements de navigation, des postes de travail de table aux appareils mobiles.

>>>Un balisage sémantique permet aux agents utilisateurs non humains...

...d'analyser correctement le contenu et de décider comment le traiter (exemple: la fonction d'indexation d'un moteur de recherche ou la lecture vocale du contenu à l'écran).

Un web sémantique

Le web sémantique est une notion importante. C'est ce qui permet aux différents programmes de comprendre le sens des informations qu'ils traitent. Qu'il s'agisse d'un moteur de recherche ou d'une technologie d'assistance, ces programmes ont besoin de pouvoir identifier la nature des données qu'ils parcourent, que ce soit pour les référencer ou pour les restituer correctement.

C'est Tim Berners-Lee, l'inventeur du World Wide Web qui, le premier, évoqua le web sémantique:

« J'ai fait un rêve pour le Web [dans lequel les ordinateurs] deviennent capables d'analyser toutes les données sur le Web — le contenu, les liens, et les transactions entre les personnes et les ordinateurs. Un « Web Sémantique », qui devrait rendre cela possible, n'a pas encore émergé, mais quand ce sera fait, les mécanismes d'échange au jour le jour, de bureaucratie et de nos vies quotidiennes seront traités par des machines dialoguant avec d'autres machines. Les « agents intelligents » qu'on nous promet depuis longtemps vont enfin se concrétiser. »

— Tim Berners-Lee, Weaving the Web

Structurer logiquement les documents

>>> La lecture de la source du document devrait être logique

Le contenu doit être ordonné et hiérarchisé. Les titres et les sous-titres doivent suivre une hiérarchie claire et signifiante.

>>> La structure logique ne doit pas être subordonnée à la structure graphique

On ne doit pas sacrifier le sens et la structure du contenu balisé pour des considérations graphiques.

Ce qui ne veut pas dire à l'inverse de sacrifier la qualité de la présentation graphique pour le contenu : des règles de style bien conçues s'occupent de l'aspect graphique.

Jetez un coup d'oeil sur le site CSS Zen Garden pour vous en convaincre: une même structure HTML simple, logique et linéaire sur le plan de la hiérarchie des éléments, peut donner un rendu graphique riche et varié, selon la grille de mise en forme choisie par le designer.

Séparer la présentation de la structure

Un bon balisage consiste à utiliser des balises dont la sémantique est adéquate tout en les liant à des règles de style répertoriées dans une feuille de style distincte du HTML.

Sauf exception, les informations de mise en forme ne doivent pas se retrouvées dans le HTML.

Informations ignorées par les navigateurs

Certaines informations d'un document HTML sont ignorées ou ont peu d'impact sur la présentation du document lorsque ce dernier est affiché par un navigateur graphique.

Voici quelques exemples d'informations ignorées par les navigateurs.

Retour à la ligne

Dans un document HTML, les retours à la ligne sont traités comme des espaces.

Le texte et les éléments se suivent jusqu'à l'arrivée d'un éléments de type bloc comme p ou h2 dans le flux du texte.

See the Pen c02-html04 by Sylvain Lamoureux (@slamoureux) on CodePen.

Tabulations et espaces multiples

Lorsque qu'un navigateur rencontre plusieurs espaces blancs consécutifs dans un document HTML, il les affiche comme un seul espace. L'exemple suivant montre que les espaces multiples ajoutés entre les lettres dans le HTML (à gauche) ne sont pas reproduite à l'affichage (à droite):

See the Pen c02-html01 by Sylvain Lamoureux (@slamoureux) on CodePen.

Éléments p vides

Les éléments de paragraphes vides (<p></p> ou <p> seul), qui ne contiennent pas de texte, sont considérés comme redondants par tous les navigateurs et sont ignorés à l'affichage. Par exemple, ce paragraphe que vous lisez est suivi d'un paragraphe vide qui ne s'affiche pas dans le navigateur.

Vous constaterez parfois l'utilisation d'une astuce pour créer des espaces entre les paragraphes, soit l'insertion d'un paragraphe contenant une espace insécable, comme ceci: <p>&nbsp;</p>. Il s'agit d'une pratique à proscrire, car un élément p annonce du contenu, d'une part, et, d'autre part, les règles de style permettent de faire ce travail de manière plus efficace et systématique.

See the Pen c02-html05 by Sylvain Lamoureux (@slamoureux) on CodePen.

Éléments non reconnus

Un navigateur ignore tout simplement les éléments qu'il ne comprend pas ou dont la spécification est incorrecte.

Si l'encodage est défectueux, il arrive que le navigateur l'affiche tel quel, balises et contenu compris, comme du texte normal. C'est le cas de la balise suivante: <1em> où la barre oblique de la balise fermante em est remplacée par le chiffre «1», la touche clavier voisine de la barre oblique.

See the Pen c02-html02 by Sylvain Lamoureux (@slamoureux)on CodePen.

Texte en commentaire dans le HTML

Les navigateurs n'affichent pas le texte placé entre les balises spéciales suivantes:

<!-- et -->

Ces balises servent à inscrire un commentaire dans le code HTML, par exemple :

<!-- Le menu principal débute ici. SL -->

Une espace doit être placée après l'élément initial et avant l'élément final.

See the Pen c02-html03 by Sylvain Lamoureux (@slamoureux) on CodePen.

On peut utiliser les balises de commentaire HTML pour masquer temporairement du contenu afin d'éviter de le retirer définitivement du document, et cela pour des fins de test ou de restructuration.

Structure du document

Avant de créer le contenu réel, il est nécessaire de donner une structure globale valide au document HTML lui-même. Revenons sur la structure du document que nous avons vue en partie lors du premier cours.

Nous avons vu que le document HTML comporte un élément <html> incluant un élément <head> et un élément <body>.

Pour être valide et pleinement fonctionnel, il doit débuter par une « déclaration de type de document » (ou DOCTYPE en anglais) qui spécifie la version du code HTML utilisée.

Un document HTML complet comporte trois parties

  • une déclaration de la version HTML
  • un en-tête
  • un corps

Les éléments HTML qui permettent de constituer cette structure sont...

  • <!doctype html>
  • <html>
  • <head>
  • <meta>
  • <title>
  • <body>

Voici la structure minimale exigée pour vos pages HTML :

Structure minimale d'une page HTML5.

Déclaration de type de document (DTD: Document Type Definition)

Pour être valide, un document HTML doit commencer par une déclaration de type de document qui identifie la version HTML utilisée dans le document :

<!doctype html>

La déclaration permet notamment au validateur de déterminer la version de HTML à valider.

L'absence de déclaration de type de document - ou encore une déclaration de type de document erronnée - peut engendrer un comportement d'affichage erratique de la part des navigateurs.

En-tête du document (élément head)

L'en-tête contient des informations essentielles sur le document (mais qui ne font pas partie de son contenu graphique).

On y trouve au minimum :

  • un élément title dont le contenu textuel doit être descriptif pour qu'il soit valide ;
  • un élément meta précisant le mode d'encodage de caractères.

<title>Titre de la page - Nom du site</title>
Dans un navigateur, le contenu de l'élément title est affiché dans l'onglet de la page. Il est typiquement composé du titre de la page courante et du nom du site web auquel cette page appartient.

<meta charset="UTF-8">
L'encodage UTF-8 permet d'interpréter correctement les caractères spéciaux de la langue française que vous utilisez dans le corps (body) de vos pages HTML.

UTF-8 sur Wikipedia

Outre l'encodage du texte, nous verrons d'autres types de contenus destinés à l'élément meta lors des prochains cours.

Les données fournies dans les éléments meta sont utilisées par les serveurs, les navigateurs web et les moteurs de recherche mais restent invisibles à l'affichage dans un navigateur graphique.

Corps du document (élément body)

Le corps du document contient tout le contenu du document, soit la partie affichée dans la fenêtre d'un navigateur graphique ou encore dictée par un lecteur d'écran.

Travaux formatifs

Voici un texte de recette tiré d'un site de cuisine:

Exemple de balisage non sémantique.

Son affichage dans Chrome :

Affichage du tf dans Chrome.

Son affichage dans Firefox :

Affichage du tf dans Firefox.

D'après ce que nous venons de voir à propos du balisage sémantique et de la structure d'un document :

  1. Téléchargez le document source HTML et ouvrez-le dans le logiciel Brackets;
  2. Ajoutez les éléments manquants pour que cette page HTML respecte la structure minimale vue plus haut (type de document ou « doctype »; éléments html, head, meta, title et body...);
  3. Corrigez le balisage en fonction des bonnes pratiques énoncées au début du cours et du balisage sémantique;
  4. Ajoutez de l'indentation au balisage afin de mettre en évidence l'imbrication du code et afin qu'il soit plus lisible.

Éléments HTML pour le texte

Tableau 2.1 Éléments de type bloc
Élément Description
h1-h6 Titres
Essayez-le!
p Paragraphe
Essayez-le!
pre Texte préformaté
Essayez-le!
address Information de contact pour un document
Essayez-le!
blockquote Citation longue. Elle apparaît en retrait et peut être accompagnée de sa source par l'intermédiaire de l'attribut cite (voir le lien suivant pour un exemple).
Essayez-le!
Tableau 2.2 Éléments en ligne pour le texte
Élément Description
abbr Abbréviation ou acronyme
Essayez-le!
cite Titre d'une oeuvre (livre, article, poème...)
Essayez-le!
code Fragment de code
Essayez-le!
dfn Définition d'un terme
Essayez-le!
em Texte avec une emphase particulière dont la prononciation peut changer l'interprétation d'une expression
Essayez-le!
i Texte à prononcer d'une façon particulière / jargon / langue étrangère
Essayez-le!
q Courte citation au fil du texte
Essayez-le!
strong Texte de grande importance
Essayez-le!
b Texte stylé différemment du corps de texte principal (mots clés d'une communication par exemple, nom d'un personnage connu); ne confère pas d'importance particulière au texte
Essayez-le!
samp Exemple de sortie (output) informatique
Essayez-le!
kbd Échantillon d'entrée (input) informatique
Essayez-le!
var Variable ou argument dans une expression mathématique ou un programme
Essayez-le!
sub Indice
Essayez-le!
sup Exposant
Essayez-le!
time Indique des informations relatives au temps, telles que la durée, l'heure ou la date
Essayez-le!
ins Indique des parties de texte nouvellement insérées
Essayez-le!
del Indique des parties de texte nouvellement supprimées
Essayez-le!
s Indique qu'un contenu n'est plus exact ou pertinent, mais qu'il ne doit pas être supprimé
Essayez-le!
Tableau 2.3 Saut de ligne et séparateur
Élément Description
<br> Saut de ligne : pour forcer un changement de ligne, par exemple entre les vers d'un poème ou d'une chanson. On ne doit pas utiliser cet élément pour créer des paragraphes ou des espaces entre les parapgraphes.
Essayez-le!
<hr> Séparateur : pour créer une séparation entre deux blocs de contenu distincts. Par exemple, pour souligner un changement de sujet dans un long texte (comme des chapitres) ou un changement de scène dans un scénario.
Essayez-le!

Éléments pour les listes

Tableau 2.4 Les listes
Élément Description
ul Liste non ordonnée (utilisée lorsqu'il n'y a pas de notion d'ordre entre les éléments de liste. Exemple: boutons de navigation.)
Essayez-le!
ol Liste ordonnée (utilisée lorsqu'il y a un ordre explicite entre les éléments de liste; exemple: les étapes de réalisation d'une recette)
Essayez-le!
li Élément de liste
Essayez-le!
dl Liste de définitions (utilisée lorsque les éléments de liste se déclinent en deux éléments: terme et définition)
Essayez-le!
dt Terme d'une liste de définition
Essayez-le!
dd Définition d'une liste de définition
Essayez-le!

Listes ordonnées

Chaque élément d'une liste ordonnée possède un numéro. La liste peut représenter par exemple les étapes d'une procédure qui doivent être effectuées dans l'ordre.

See the Pen c02-liste02 by Sylvain Lamoureux (@slamoureux) on CodePen.

Listes non ordonnées

Les éléments d'une liste non ordonnée sont marqués par une puce. La liste représente une série d'éléments qui n'ont pas d'ordre particuliers, comme les ingrédients d'une recette par exemple.

See the Pen c02-liste01 by Sylvain Lamoureux (@slamoureux) on CodePen.

Listes de définitions

Ces listes sont constituées d'un ensemble de termes accompagnés de leurs définition.

See the Pen c02-liste03 by Sylvain Lamoureux (@slamoureux) on CodePen.

Listes imbriquées

Il est possible d'imbriquer une liste dans une autre. Remarquez bien la syntaxe: la liste imbriquée se trouve à l'intérieur de l'élément de liste auquelle elle est reliée.

See the Pen c02-liste04 by Sylvain Lamoureux (@slamoureux) on CodePen.

Éléments de tableau HTML

Les éléments de tableau HTML, introduits pour la première fois dans le navigateur Netscape 1.1, ont été créés pour organiser des données en lignes et en colonnes.

Ils servent à présenter des statistiques, des données de tout ordre, des calendriers et d'autres types d'informations qu'il est avantageux de présenter sous forme de lignes et de colonnes.

Les tableaux ne doivent pas servir au contrôle de la mise en pages des sites web. L'organisation graphique des pages Web est plutôt contrôlée par les règles de style.

Principaux éléments de tableau HTML

Tableau 2.5 Quelques éléments de tableau HTML
Élément Description Certains attributs
table Déclare un tableau
Essayez-le!
 
caption Titre d'un tableau (lorqu'un élément <table> est son parent)
Essayez-le!
 
tr Ligne d'un tableau
Essayez-le!
 
th Cellule d'en-tête d'un tableau
Essayez-le!
abbr, colspan
td Cellule d'un tableau
Essayez-le!
colspan, rowspan
thead Identifie l'en-tête d'un tableau
Essayez-le!
 
tbody Identifie le corps d'un tableau
Essayez-le!
 
tfoot Identifie le pied d'un tableau; se place après <thead>
Essayez-le!
 
colgroup Identifie un groupe de colonnes lorsque enfant de <table>
Essayez-le!
span
col Identifie une ou des colonnes à l'intérieur d'un groupe de colonnes (colgroup)
Essayez-le!
span

Structure simplifiée d'un tableau (incomplet)

Les tableaux web sont constitués de cellules organisées en lignes.

Il est de mise de dire qu'un tableau HTML est orienté « lignes » car les lignes sont identifiées explicitement dans la structure du document, tandis que les colonnes sont implicites (c'est-à-dire qu'elles sont suggérées par le nombre de cellules de chaque ligne).

Exemple simple d'un tableau de données.
Exemple de tableau simple, sans entête.
  • Les éléments table (tableau) et tr (ligne du tableau) donnent la structure de base du tableau.
  • L'élément td (cellule du tableau) présente le contenu visible du tableau.
  • Une cellule peut contenir tous les types de données pouvant être affichés dans un document (texte, images, éléments multimédias,...).
  • L'attribut border est utilisé ici pour ajouter des bordure au tableau pour plus de clarté. Plus tard dans le cours nous aurons recourt aux CSS pour mettre en forme le tableau.

Dans un tableau HTML de base, le nombre de colonnes est déduit à partir du nombre de cellules de la plus longue ligne.

Structure d'un tableau respectant les standards du web et les règles d'accessibilité

Voici un exemple présentant un tableau plus complet, respectant les standards du Web et les règles d'accessibilité :

Exemple de tableau complet.
Exemple de balisage d'un tableau complet.

Affichage de l'exemple précédent dans Firefox

Exemple d'un tableau de données respectant les standards du web.

Notes à propos de l'exemple précédent

  • Grâce aux éléments d'en-tête des colonnes (th), un lecteur d'écran peut lire chaque ligne de données de cette manière: « Planète : Mercure, Diamètre par rapport à la Terre : 0,38, Durée de révolution en années : 0,24, Lunes : 0 », et ainsi de suite.

Les cellules d'en-tête (th) sont essentielles afin d'associer une signification aux données de chaque cellule. Sans en-tête, les cellules sont lues à la queue leu leu, de la première à la dernière, ce qui rend le tableau difficile à déchiffrer.

  • Lorsque le texte des cellules d'en-tête (th) est long, l'ajout de l'attribut abbr permet de suggérer une version plus courte de ces textes. Dans l'exemple ci-haut, lors des répétitions, le lecteur retiendra donc « Diamètre » plutôt que « Diamètre par rapport à la Terre ».
  • Il peut paraître curieux d'insérer le pied du tableau (tfoot) juste après l'en-tête (thead) et avant le corps (tbody), comme le montre l'exemple plus haut, mais il s'agit d'une pratique recommandée dans les bonnes pratiques du web. Dans le cas de tableaux contenant beaucoup de données, le pied pourra s'afficher avant même que l'ensemble du contenu du corps ne soit téléchargé sur l'écran de l'usager. De même, dans un tableau trop long pour être affiché au complet sur un écran, les éléments thead et tfoot portent le potentiel d'être affichés en permanence alors que les lignes du tableau défilent (mais cette fonctionnalité n'est pas encore implantée dans les navigateurs actuels). Notez que, malgré sa position dans le HTML, le pied s'affiche bel et bien tout en bas du tableau.
  • L'attribut colspan inséré dans une cellule permet d'étendre cette dernière sur un nombre déterminé de colonnes, comme c'est le cas de la cellule (td) du pied de tableau (tfoot) qui s'étend sur quatre colonnes grâce à sa valeur « 4 ».

Activité d'évaluation

Contrôle de lecture 1

Le contrôle de lecture 1 aura lieu au cours 4.

Il concerne le contenu des pages Web des cours 1 à 3.

Questions de révision pour le contrôle de lecture

  1. Qu'est-ce que le balisage sémantique?
  2. Nommez un avantage que procure le balisage sémantique.
  3. Créez un tableau simple comprenant deux lignes de trois cellules, dont une ligne de cellules d'en-tête.
  4. Écrivez la déclaration du type de document que l'on doit inscrire au début d'une page HTML5.
  5. Écrivez un élément <title> incluant un exemple complet de contenu.

TP2 - Intro au HTML (2)

Le TP2 est la suite de l'introduction à l'utilisation du langage HTML pour structurer une page web. On y ajoute cette semaine les éléments de tableau HTML ainsi que quelques éléments de structure du HTML.

Documents fournis

Les images du TP2 , le texte duTP2

Documents à remettre

Un dossier compressé (.zip) nommé:

  • grx_nominitialeprenom_tp2.zip

Ce dossier contient:

  • un fichier HTML nommé:the.html
  • Un dossier nommé images, contenant les trois images de la page (javaco.gif, theiere.jpg, yunnan.jpg).

Modèle d'arborescence de fichiers pour la remise:

Nomenclature du dossier de remise

Échéancier

Remettez le travail sur LÉA, dans l'espace prévu à cette fin, au plus tard le vendredi suivant le cours, 9h.

Grille d'évaluation (pondération: X% de la session)

  • La structure et le nom des fichiers respectent l'énoncé: /1
  • Le doctype et encodage du texte sont précisés et fonctionnels: /2
  • Les hyperliens sont bien formés: /2
  • L'élément <title> est présent et contient Titre de la page + Titre du site: /2
  • Les éléments HTML de base de la page (html, head, body) son présents et bien formés: /2
  • Les règles de syntaxe et l'imbrication des éléments sont respectés: /2
  • L'indentation est bien faite: /2
  • Les images sont balisées, elles s'affichent et comportent les attributs obligatoires: /2
  • Le tableau de données est correctement balisé: /2
  • Le tableau du calendrier est correctement balisé: /2
  • Total: /20

Travail à faire

Dans le cadre du TPX, vous devez monter un fichier HTML selon le modèle présenté ci-dessous:

Votre travail doit être validé à l'aide du navigateur Chrome (c'est-à-dire que l'affichage doit être satisfisant sur Chrome).

Première étape: créez votre structure de fichiers :

  1. Créez un dossier au nom de grX_nomprenom_tp2 ;
  2. Insérez-y le dossier images fourni ;
  3. Insérez-y le fichier the.html fourni ;

Deuxième étape: ouvrez le dossier de travail dans Brackets :

  1. Ouvrez Brackets ;
  2. Sélectionnez Fichier / Ouvrir un dossier... ;
  3. Dans la colonne de gauche de Brackets, sous « grX_nomprenom_tp2 », cliquez sur le fichier the.html pour le faire afficher.

Créez votre document HTML en vous inspirant du document modèle et des consignes données en classe :

  1. Créez la structure de base de la page HTML telle que vue plus haut dans les notes de cours; notez que l'élément title doit comporter le titre de la page ET le titre du site ;
  2. Au tout début de l'élément body, avant tout autre contenu, insérez l'image de l'en-tête à l'aide d'un élément img et des attributs pertinents (src et alt);
  3. Section de la navigation: créez des hyperliens pour les cinq éléments de navigation; créez une liste et des éléments de liste en y insérant les liens dont les adresses (valeurs des attributs href) sont respectivement: qui.html, the.html, infusion.html, boire.html, produits.html, contact.html ;
  4. Balisez les titres et les sous-titres en fonction de leur niveau de hiérarchie, tel que l'exemple le montre ;
  5. Date: insérez la date d'aujourd'hui dans un élément time (voir en classe pour un exemple);
  6. Section Les origines légendaires du thé:
    1. créez les éléments p de cette section ;
    2. insérez l'image de la théière simplement au fil texte dans le premier paragraphe;
    3. ajoutez des éléments pour caractériser des portions de texte lorsque le besoin s'en fait sentir (voir les éléments du texte dans les notes du cours 2);
  7. Section Le saviez-vous? :
    1. à la suite du paragraphe situé sous le titre "La théanine", insérez l'image associée ainsi que sa légende à l'aide des éléments figure, img et figcaption (voir en classe pour un exemple) ;
    2. créez le tableau de données associé à cette section en incluant tous les éléments du tableau « Le système solaire » présenté en exemple dans les notes du cours 2 ;
  8. Section Archives: un tableau doit présenter le mois d'août 2018, ce qui exige une certaine réorganisation par rapport à l'exemple fourni, et doit être rédigé selon les règles d'accessibilité, c'est-à-dire qu'il doit comporter tous les éléments du tableau « Le système solaire » présenté en exemple dans les notes du cours 2 sauf l'élément tfoot qui est superflu dans ce cas.