Introduction au HTML [3]

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.

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):

É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.

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.

Éléments HTML : saut de ligne et séparateur

Éléments HTML : les listes

Liste non ordonnée

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.

Liste ordonnée

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.

Liste de définitions

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

Liste imbriquée

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.

Éléments HTML : tableau de données

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.

Principaux éléments de tableau HTML

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é :

• Les éléments table (tableau) et tr (ligne du tableau) donnent la structure de base du tableau.
• Les élément th (cellule d'entête) et td (cellule normale) contiennent le contenu visible du tableau.
• Une cellule peut contenir tous les types de données pouvant être affichés dans un document.

Affichage de l'exemple précédent dans un navigateur Web

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

• Grâce aux éléments d'entê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.

• Lorsque le texte des cellules d'entê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 ».

Intégrer une vidéo dans un document HTML à l'aide de l'élément iframe

Voyons ici une première méthode pour intégrer une vidéo dans un document HTML.

Les sites de diffusion vidéo comme YouTube ou Vimeo présentent des options qui facilitent le partage d'une vidéo ou encore son imbrication dans un document HTML.

Le cas de Youtube

Pour intégrer une vidéo à partir du site Youtube, sélectionnez une vidéo, comme par exemple, cette vidéo: Mont Sainte-Anne en vélo de montagne : la GRISANTE 2.0 - Ep7, puis cliquez sur le bouton Partager

Cliquez sur le bouton Partager :

Dans la fenêtre de partage, cliquez sur le bouton Intégrer.

Copiez le code (cmd+c ou ctrl+c), et collez-le (cmd+v ou ctrl+v) dans une balise figure en ajoutant une légende avec un élément figcaption.

Résultat (essayez-le sur CodePen)

Insérer un favicon dans un document HTML

Le favicon est l'icône qui apparaît à la gauche du contenu de l'élément title dans l'entête de l'onglet d'un navigateur ainsi que dans la liste de favoris d'un utilisateur.

Pour le faire afficher, il suffit d'insérer une image carrée de 48 x 48px (ou un multiple, comme 96 x 96px ou 144 x 144px, etc.) à la racine de votre dossier de site web (car son url doit être stable) et de lier cette image par un élément link.

L'élément link doit être placé dans l'élément head et comporter les attributs suivants :

Code

Résultat

Activités d'évaluation

TP1 - Intro au HTML (3)

Le TP1 est le premier travail sommatif de la session: il vaut pour 5% de la note finale. Il fait la synthèse des apprentissages du premier bloc ayant pour thème l'utilisation du langage HTML pour structurer une page web. On ajoute cette semaine les éléments de tableau HTML et l'élément iframe qui sert à insérer une vidéo provenant d'un autre site web.

Documents fournis

Voir les documents fournis dans TEAMS/DEVOIRS: texte_tp1.txt, bras-du-nord_1000.jpg, favicon.png.

Documents à remettre

Un dossier compressé (.zip) nommé:

• gr1_nomprenom_tp1.zip (groupe du vendredi 12h)
• gr2_nomprenom_tp1.zip (groupe du vendredi 8h)

Ce dossier contient:

• trois fichiers HTML nommés monarticle.html, monformulaire.html et montableau.html
• un fichier png nommé favicon.png ;
• Un dossier nommé images, contenant six images.

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

Échéancier

Remettez le travail sur TEAMS/DEVOIR, dans l'espace prévu à cette fin, au plus tard le mercredi suivant le cours, à 9h (groupe du vendredi 8h) ou 12h (groupe du vendredi 12h).

Grille d'évaluation

Voir la grille d'évaluation complète sur Teams/Devoir.

Travail à faire

Dans le cadre du TP1, vous devez ajouter une page HTML, montableau.html, à vos deux pages créées précedemment.

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

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

1. Créez un dossier au nom de ou gr2_nomprenom_tp1 ;
2. Glissez dans ce dossier: le dossiers "images" et les fichiers monarticle.html et monformulaire.html ;
3. Télécharger les fichiers du tp1: texte_tp1.txt, bras-du-nord.jpg et favicon.png ;
4. Insérez le fichier bras-du-nord.jpg dans le dossier "images" ;
5. Insérez le fichier favicon.pmg à la racine du dossier de travail.

Deuxième étape: ouvrez ce dossier dans VSCode :

1. Ouvrez VSCode ;
2. Sélectionnez Fichier / Ouvrir un dossier... ;

Créez un nouveau document HTML :

1. Dans la colonne de gauche de VSCode, sous « GR1_NOMPRENOM_TP1 ou GR2_NOMPRENOM_TP1 », cliquez sur le bouton droit de la souris et choisissez "Nouveau fichier" pour créer un nouveau fichier; nommez ce fichier montableau.html
2. À partir de l'un des deux fichiers html déjà créés, copiez et collez le code de la structure de base de la page.
3. Mettez à jour le contenu des éléments title, h1, time, du paragraphe de la source et de l'image d'entête.
4. Ajoutez un hyperlien dans la liste de liens du haut de la page vers le document montableau.html.
5. Ajoutez également ce nouveau lien dans les deux autres pages de votre site (monarticle.html et monformulaire.html).
6. Ajoutez le code du favicon aux TROIS pages de votre site.
7. Dans montableau.html, mettez en place le contenu spécifique de la page (texte, tableau et vidéo) tout en ajoutant le balisage adéquat (à noter que le texte de la page se trouve dans le fichier texte_tp1.txt).