032.3 Leçon 1

Certification :

Web Development Essentials

Version :

1.0

Thème :

032 Balisage de documents HTML

Objectif :

032.3 Références HTML et ressources intégrées

Leçon :

1 sur 1

Introduction

Une page web moderne est rarement constituée uniquement de texte. Elle comprend de nombreux autres types de contenus, tels que des images, du son, de la vidéo et même d’autres documents HTML. Outre le contenu externe, les documents HTML peuvent contenir des liens vers d’autres documents, ce qui simplifie considérablement la navigation sur Internet.

Contenu Intégré

L’échange de fichiers est possible sur l’internet sans pages web écrites en HTML, alors pourquoi le HTML est-il le format choisi pour les documents web et non le PDF ou tout autre format de traitement de texte ? Une raison importante est que le HTML conserve ses ressources multimédia dans des fichiers séparés. Dans un environnement tel que l’internet, où les informations sont souvent redondantes et distribuées à différents endroits, il est important d’éviter les transferts de données inutiles. La plupart du temps, les nouvelles versions d’une page web contiennent les mêmes images et autres fichiers de support que les versions précédentes, de sorte que le navigateur web peut utiliser les fichiers précédemment récupérés au lieu de tout recopier. En outre, la séparation des fichiers facilite la personnalisation du contenu multimédia en fonction des caractéristiques du client, telles que sa localisation, la taille de son écran et sa vitesse de connexion.

Images

Le type le plus courant de contenu intégré est constitué par les images qui accompagnent le texte. Les images sont conservées séparément et sont référencées à l’intérieur du fichier HTML avec la balise <img> :

<img src="logo.png">

La balise <img> ne nécessite pas de balise de fermeture. La propriété src indique l’emplacement de la source du fichier image. Dans cet exemple, le fichier image logo.png doit être situé dans le même répertoire que le fichier HTML, sinon le navigateur ne pourra pas l’afficher. La propriété d’emplacement source accepte les chemins relatifs, de sorte que la notation par points peut être utilisée pour indiquer le chemin d’accès à l’image :

<img src="../logo.png">

Les deux points indiquent que l’image est située dans le répertoire parent par rapport au répertoire où se trouve le fichier HTML. Si le nom de fichier ../logo.png est utilisé dans un fichier HTML dont l’URL est http://example.com/library/periodicals/index.html, le navigateur demandera le fichier image à l’adresse http://example.com/library/logo.png.

La notation par points s’applique également si le fichier HTML n’est pas un fichier réel dans le système de fichiers ; le navigateur HTML interprète l’URL comme s’il s’agissait d’un chemin d’accès à un fichier, mais c’est au serveur HTTP de décider si ce chemin d’accès fait référence à un fichier ou à un contenu généré dynamiquement. Le domaine et le chemin d’accès approprié sont automatiquement ajoutés à toutes les demandes adressées au serveur, au cas où le fichier HTML proviendrait d’une demande HTTP. De même, le navigateur ouvrira l’image appropriée si le fichier HTML a été ouvert directement à partir du système de fichiers local.

Les emplacements de source commençant par une barre oblique / sont traités comme des chemins absolus. Les chemins absolus contiennent des informations complètes sur l’emplacement de l’image, de sorte qu’ils fonctionnent indépendamment de l’emplacement du document HTML. Si le fichier image est situé sur un autre serveur, ce qui sera le cas lorsqu’un réseau de diffusion de contenu (CDN : Content Diffusion Network) est utilisé, le nom de domaine doit également être inclus.

Note	Les réseaux de diffusion de contenu sont composés de serveurs répartis géographiquement qui stockent du contenu statique pour d’autres sites web. Ils permettent d’améliorer les performances et la disponibilité des sites très fréquentés.

Si l’image ne peut pas être chargée, le navigateur HTML affichera le texte fourni par l’attribut alt à la place de l’image. Par exemple :

<img src="logo.png" alt="The Company logo">

L’attribut alt est également important pour l’accessibilité. Les navigateurs en mode texte et les lecteurs d’écran l’utilisent comme description de l’image correspondante.

Types d’images

Les navigateurs web peuvent afficher tous les types d’images les plus courants, tels que JPEG, PNG, GIF et SVG. Les dimensions des images sont détectées dès que les images sont chargées, mais elles peuvent être prédéfinies avec les attributs width et height :

<img src="logo.png" alt="The Company logo" width="300" height="100">

La seule raison d’inclure des attributs de dimension à la balise <img> est d’éviter de casser la mise en page lorsque l’image prend trop de temps à se charger ou lorsqu’elle ne peut pas être chargée du tout. L’utilisation des attributs width et height pour modifier les dimensions originales de l’image peut donner des résultats indésirables :

Les images seront déformées lorsque la taille originale est inférieure aux nouvelles dimensions ou lorsque le nouveau rapport de proportion diffère de l’original.
La réduction de la taille des grandes images utilise une bande passante supplémentaire, ce qui allonge les délais de chargement.

SVG est le seul format qui ne souffre pas de ces effets, car toutes ses informations graphiques sont stockées dans des coordonnées numériques bien adaptées à la mise à l’échelle et ses dimensions n’affectent pas la taille du fichier (d’où le nom graphique vectoriel adaptable, en anglais Scalable Vector Graphics). Par exemple, seules les informations relatives à la position, aux dimensions latérales et à la couleur sont nécessaires pour dessiner un rectangle en SVG. La valeur particulière de chaque pixel sera ensuite rendue de manière dynamique. En fait, les images SVG sont similaires aux fichiers HTML, dans le sens où leurs éléments graphiques sont également définis par des balises dans un fichier texte. Les fichiers SVG sont destinés à représenter des dessins aux contours nets, tels que des graphiques ou des diagrammes.

Les images qui ne répondent pas à ces critères doivent être stockées sous forme d’image matricielle bitmaps. Contrairement aux formats d’images vectorielles, les images matricielles stockent au préalable les informations de couleur pour chaque pixel de l’image. Le stockage de la valeur de la couleur pour chaque pixel de l’image génère une très grande quantité de données, c’est pourquoi les images matricielles sont généralement stockés dans des formats compressés, tels que JPEG, PNG ou GIF.

Le format JPEG est recommandé pour les photographies, car son algorithme de compression donne de bons résultats pour les ombres et les arrière-plans flous. Pour les images où les couleurs unies prédominent, le format PNG est plus approprié. Par conséquent, le format PNG doit être choisi lorsqu’il est nécessaire de convertir une image vectorielle en image matricielle.

Le format GIF offre la qualité d’image la plus faible de tous les formats d’images matricielles populaires. Néanmoins, il est encore largement utilisé en raison de sa prise en charge des animations. En effet, de nombreux sites web utilisent des fichiers GIF pour afficher de courtes vidéos, mais il existe de meilleures façons d’afficher du contenu vidéo.

Audio et vidéo

Les contenus audio et vidéo peuvent être ajoutés à un document HTML plus ou moins de la même manière que les images. Sans surprise, la balise permettant d’ajouter de l’audio est <audio> et celle permettant d’ajouter de la vidéo est <video>. De toute évidence, les navigateurs textuels ne sont pas en mesure de lire les contenus multimédias, c’est pourquoi les balises <audio> et <video> utilisent la balise de fermeture pour contenir le texte utilisé comme solution de rechange pour l’élément qui ne peut être affiché. Par exemple :

<audio controls src="/media/recording.mp3">
<p>Unable to play <em>recording.mp3</em></p>
</audio>

Si le navigateur ne prend pas en charge la balise <audio>, la ligne “Unable to play recording.mp3” s’affiche à la place. L’utilisation des balises de fermeture </audio> ou </video> permet à une page web d’inclure un contenu alternatif plus élaboré que la simple ligne de texte autorisée par l’attribut alt de la balise <img>.

L’attribut src des balises <audio> et <video> fonctionne de la même manière que pour la balise <img>, mais accepte également les URL pointant vers un flux en direct. Le navigateur se charge de la mise en mémoire tampon, du décodage et de l’affichage du contenu au fur et à mesure de sa réception. L’attribut controls affiche les commandes de lecture. Sans cet attribut, le visiteur ne pourra pas mettre en pause, revenir en arrière ou contrôler la lecture.

Contenu générique

Un document HTML peut être imbriqué dans un autre document HTML, de la même manière que l’insertion d’une image dans un document HTML, mais en utilisant la balise <iframe> :

<iframe name="viewer" src="gallery.html">
<p>Unsupported browser</p>
</iframe>

Les navigateurs textuels, plus simples, ne prennent pas en charge la balise <iframe> et affichent le texte inclus à la place. Comme pour les balises multimédia, l’attribut src définit l’emplacement de la source du document imbriqué. Les attributs width et height peuvent être ajoutés pour modifier les dimensions par défaut de l’élément iframe.

L’attribut name permet de faire référence à l’iframe et de modifier le document imbriqué. Sans cet attribut, le document imbriqué ne peut pas être modifié. Un élément d’ancrage (anchor) peut être utilisé pour charger un document à partir d’un autre emplacement à l’intérieur d’un iframe au lieu de la fenêtre actuelle du navigateur.

Liens

L’élément de page communément appelé lien web est également connu sous le terme technique ancre (anchor), d’où l’utilisation de la balise <a>. L’ancre conduit à un autre emplacement, qui peut être n’importe quelle adresse prise en charge par le navigateur. L’emplacement est indiqué par l’attribut href (hyperling reference) :

<a href="contact.html">Contact Information</a>

L’emplacement peut être écrit sous la forme d’un chemin d’accès relatif ou absolu, comme dans le cas du contenu intégré évoqué précédemment. Seul le contenu textuel inclus (par exemple, les informations de contact) est visible pour le visiteur, généralement sous forme de texte bleu souligné cliquable par défaut, mais l’élément affiché au-dessus du lien peut également être tout autre contenu visible, comme des images :

<a href="contact.html"><img src="contact.png" alt="Contact Information"></a>

Des préfixes spéciaux peuvent être ajoutés à l’emplacement pour indiquer au navigateur comment l’ouvrir. Si l’ancre pointe vers une adresse électronique, par exemple, son attribut href doit inclure le préfixe mailto: :

<a href="mailto:info@lpi.org">Contact by email</a>

Le préfixe tel: indique un numéro de téléphone. Il est particulièrement utile pour les visiteurs qui consultent la page sur des appareils mobiles :

<a href="tel:+123456789">Contact by phone</a>

Lorsque le lien est cliqué, le navigateur ouvre le contenu de l’emplacement avec l’application associée.

L’utilisation la plus courante des ancres consiste à charger d’autres documents web. Par défaut, le navigateur remplace le document HTML actuel par le contenu du nouvel emplacement. Ce comportement peut être modifié en utilisant l’attribut target (cible). La cible _blank, par exemple, indique au navigateur d’ouvrir l’emplacement donné dans une nouvelle fenêtre ou un nouvel onglet du navigateur, selon les préférences du visiteur :

<a href="contact.html" target="_blank">Contact Information</a>

La cible _self est la cible par défaut lorsque l’attribut target n’est pas fourni. Elle fait en sorte que le document référencé remplace le document actuel.

D’autres types de cibles sont liés à l’élément <iframe>. Pour charger un document référencé à l’intérieur d’un élément <iframe>, l’attribut target doit pointer vers le nom de l’élément iframe :

<p><a href="gallery.html" target="viewer">Photo Gallery</a></p>

<iframe name="viewer" width="800" height="600">
<p>Unsupported browser</p>
</iframe>

L’élément iframe fonctionne comme une fenêtre de navigateur distincte, de sorte que tout lien chargé à partir du document situé dans l’iframe ne remplacera que le contenu de l’iframe. Pour modifier ce comportement, les éléments d’ancrage à l’intérieur du document d’iframe peuvent également utiliser l’attribut target. La cible _parent, lorsqu’elle est utilisée à l’intérieur d’un document d’iframe, fait en sorte que l’emplacement référencé remplace le document parent contenant la balise <iframe>. Par exemple, le document gallery.html incorporé pourrait contenir une ancre qui se charge elle-même tout en remplaçant le document parent :

<p><a href="gallery.html" target="_parent">Open as parent document</a></p>

Les documents HTML prennent en charge plusieurs niveaux d’imbrication avec la balise <iframe>. La cible _top, lorsqu’elle est utilisée dans une ancre à l’intérieur d’un document d’iframe, fait en sorte que l’emplacement référencé remplace le document principal dans la fenêtre du navigateur, qu’il s’agisse du parent immédiat de la <iframe> correspondante ou d’un ancêtre plus éloigné dans la chaîne.

Emplacements à l’intérieur des documents

L’adresse d’un document HTML peut éventuellement contenir un fragment qui peut être utilisé pour identifier une ressource à l’intérieur du document. Ce fragment, également connu sous le nom ancre URL, est une chaîne de caractères qui suit le signe dièse # à la fin de l’URL. Par exemple, le mot History est l’ancre de l’URL https://en.wikipedia.org/wiki/Internet#History.

Lorsque l’URL comporte une ancre, le navigateur se rendra à l’élément correspondant dans le document, c’est-à-dire l’élément dont l’attribut id est égal à l’ancre dans l’URL. Dans le cas de l’URL donnée, https://en.wikipedia.org/wiki/Internet#History, le navigateur se rendra directement à la section “History”. En examinant le code HTML de la page, nous constatons que le titre de la section possède l’attribut id correspondant :

<span class="mw-headline" id="History">History</span>

Les ancres URL peuvent être utilisées dans l’attribut href de la balise <a>, soit lorsqu’elles pointent vers des pages externes, soit lorsqu’elles pointent vers des emplacements à l’intérieur de la page actuelle. Dans ce dernier cas, il suffit de commencer par le signe dièse avec le fragment d’URL, comme dans <a href="#History">History</a>.

Warning

L’attribut id ne doit pas contenir de caractères blancs (espaces, tabulations, etc.) et doit être unique dans le document.

Il existe des moyens de personnaliser la façon dont le navigateur réagit aux ancres URL. Il est possible, par exemple, d’écrire une fonction JavaScript qui écoute l’événement de fenêtre _ hashchange _ et déclenche une action personnalisée, comme une animation ou une requête HTTP. Il convient toutefois de noter que le fragment d’URL n’est jamais envoyé au serveur avec l’URL et qu’il ne peut donc pas être utilisé comme identifiant par le serveur HTTP.

Exercices guidés

Le document HTML situé à l’adresse http://www.lpi.org/articles/linux/index.html comporte une balise <img> dont l’attribut src pointe vers ../logo.png. Quel est le chemin absolu complet de cette image ?
Citez deux raisons pour lesquelles l’attribut alt est important dans les balises <img>.
Quel format d’image donne une bonne qualité d’image et maintient une petite taille de fichier lorsqu’il est utilisé pour des photos avec des points flous et avec de nombreuses couleurs et nuances ?
Au lieu d’utiliser un fournisseur tiers tel que Youtube, quelle balise HTML vous permet d’intégrer un fichier vidéo dans un document HTML en utilisant uniquement les fonctionnalités HTML standard ?

Exercices d’exploration

Supposons qu’un document HTML comporte le lien hypertexte <a href="pic1.jpeg">First picture</a> et l’élément iframe <iframe name="gallery"></iframe>. Comment pourriez-vous modifier la balise hyperlien pour que l’image vers laquelle elle pointe se charge à l’intérieur de l’élément iframe donné après que l’utilisateur ait cliqué sur le lien ?
Que se passe-t-il lorsque le visiteur clique sur un lien hypertexte dans un document situé à l’intérieur d’un iframe et que l’attribut cible du lien hypertexte est défini sur _self ?
Vous remarquez que l’ancre URL de la deuxième section de votre page HTML ne fonctionne pas. Quelle est la cause probable de cette erreur ?

Résumé

Cette leçon explique comment ajouter des images et d’autres contenus multimédias à l’aide des balises HTML appropriées. En outre, le lecteur apprend les différentes façons d’utiliser les liens hypertextes pour charger d’autres documents et pointer vers des emplacements spécifiques dans une page. La leçon aborde les concepts et procédures suivants :

La balise <img> et ses principaux attributs : src et alt.
Chemins URL relatifs et absolus.
Formats d’image populaires pour le web et leurs caractéristiques.
Les balises multimédia <audio> et <video>.
Comment insérer des documents imbriqués avec la balise <iframe>.
La balise de lien hypertexte <a>, son attribut href, et les cibles spéciales.
Comment utiliser les fragments d’URL, également connus sous le nom d’ancres de hachage.

Réponses aux exercices guidés

Le document HTML situé à l’adresse http://www.lpi.org/articles/linux/index.html comporte une balise <img> dont l’attribut src pointe vers ../logo.png. Quel est le chemin absolu complet de cette image ?

http://www.lpi.org/articles/logo.png
Citez deux raisons pour lesquelles l’attribut alt est important dans les balises <img>.

Les navigateurs en mode texte pourront afficher une description de l’image manquante. Les lecteurs d’écran utilisent l’attribut alt pour décrire l’image.
Quel format d’image donne une bonne qualité d’image et maintient une petite taille de fichier lorsqu’il est utilisé pour des photos avec des points flous et avec de nombreuses couleurs et nuances ?

Le format JPEG.
Au lieu d’utiliser un fournisseur tiers tel que Youtube, quelle balise HTML vous permet d’intégrer un fichier vidéo dans un document HTML en utilisant uniquement les fonctionnalités HTML standard ?

La balise <video>.

Réponses aux exercices d’exploration

Supposons qu’un document HTML comporte le lien hypertexte <a href="pic1.jpeg">Première image</a> et l’élément iframe <iframe name="gallery"></iframe>. Comment pourriez-vous modifier la balise hyperlien pour que l’image vers laquelle elle pointe se charge à l’intérieur de l’élément iframe donné après que l’utilisateur ait cliqué sur le lien ?

En utilisant l’attribut target de la balise a : <a href="pic1.jpeg" target="gallery">Première image</a>.
Que se passe-t-il lorsque le visiteur clique sur un lien hypertexte dans un document situé à l’intérieur d’un iframe et que l’attribut cible du lien hypertexte est défini sur _self ?

Le document sera chargé dans la même iframe, ce qui est le comportement par défaut.
Vous remarquez que l’ancre URL de la deuxième section de votre page HTML ne fonctionne pas. Quelle est la cause probable de cette erreur ?

Le fragment d’URL après le signe dièse ne correspond pas à l’attribut id dans l’élément correspondant à la deuxième section, ou l’attribut id de l’élément n’est pas présent.