LIENS ET IMAGES
Le chapitre précédent couvrait certains éléments HTML très importants, mais nous ne faisions que traiter une seule page Web. Les liens et les images sont fondamentalement différents de ces éléments dans la mesure où ils traitent des ressources externes. Les liens pointent l’utilisateur vers un document HTML différent, et les images proviennent d’un autre endroit sur le serveur.
Pour utiliser des liens et des images, nous devrons également vous renseigner sur un autre composant de la syntaxe HTML: les attributs. Les attributs ouvriront un nouveau monde de possibilités pour nos pages Web.
Dans ce chapitre, nous créerons un site Web simple composé de plusieurs documents HTML et fichiers image. Il peut s’agir de liens et d’images , mais le thème central de ce chapitre concerne l’organisation des fichiers et des dossiers. Lorsque nous commencerons à travailler avec plusieurs fichiers, vous découvrirez l’importance d’être organisé.
Mise en place
Ce chapitre vise à relier des pages Web entre elles, pour ce faire nous devons créer de nouveaux fichiers HTML avant de coder quoi que ce soit. Nous allons travailler avec trois pages Web distinctes, ainsi que quelques fichiers image de différents formats:
Pour commencer, créez un nouveau dossier appelé links-and-images pour stocker tous nos fichiers.
Page Links
Ensuite, ajoutez un nouveau fichier à ce dossier appelé links.html et insérez le modèle HTML suivant. Cela devrait vous paraître familier.
<!DOCTYPE html>
<html>
<head>
<title>Links</title>
</head>
<body>
<h1>Links</h1>
</body>
</html>Page Images
Dans le même dossier, créez un autre fichier appelé images.html:
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<h1>Images</h1>
</body>
</html>Page Extras
Notre dernière page nous aidera à démontrer des liens relatifs. Créez un nouveau dossier dans le dossier links-and-images appelés misc , puis ajoutez un nouveau fichier appelé extras.html :
<!DOCTYPE html>
<html>
<head>
<title>Extras</title>
</head>
<body>
<h1>Extras</h1>
</body>
</html>Dossier images
Votre projet devrait maintenant ressembler à ceci:
Les ancres
Les liens sont créés avec l’élément <a>, qui signifie « ancrage ». Cela fonctionne comme tous les éléments du chapitre précédent: lorsque vous enveloppez du texte dans les balises <a>, cela modifie la signification de ce contenu. Voyons ce que cela donne en ajoutant le paragraphe suivant à l’élément <body> de links.html:
<!DOCTYPE html>
<html>
<head>
<title>Links</title>
</head>
<body>
<h1>Links</h1>
<p>Cet exemple traite des liens et des <a>images</a>.</p>
</body>
</html>Les liens
De la même manière qu’un élément ajoute du sens au contenu qu’il contient, un «attribut» HTML ajoute de la signification à l’élément auquel il est rattaché.
Différents éléments acceptent différents attributs, et vous pouvez vous référer à MDN pour plus de détails sur quels éléments acceptent quels attributs. À l’heure actuelle, nous nous intéressons à l’attribut href car il détermine l’endroit où va l’utilisateur quand il clique sur un élément <a>. Mettez à jour votre lien pour le faire correspondre ce qui suit:
<!DOCTYPE html>
<html>
<head>
<title>Links</title>
</head>
<body>
<h1>Links</h1>
<p>Cet exemple traite des liens et des <a href="images.html">images</a>.</p>
</body>
</html>Notez comment les attributs vivent à l’intérieur de la balise d’ ouverture. Le nom de l’attribut vient en premier, puis un signe égal, puis la « valeur » de l’attribut en guillemets simples ou doubles. Cette syntaxe distingue les attributs du contenu (qui va entre les balises).
L’informations supplémentaire fournie par l’attribut href indique au navigateur que cet élément <a> est en fait un lien, et il doit rendre le contenu dans une couleur bleu par défaut.
Lien Relatif, Lien Absolu, Lien Racine
Maintenant que nous travaillons avec des liens, nous devons comprendre comment un site Web est structuré. Un site web est une collection de fichiers HTML organisés dans des dossiers. Pour se référer à ces fichiers à partir d’un autre fichier, Internet utilise des «localisateurs de ressources uniformes» (uniform resource locators, URL en anglais). Les URL peuvent prendre différentes formes. Les trois types d’URL avec lesquels nous travaillerons sont mis en évidence dans ce diagramme:
Les liens absolus, relatifs et racine se rapportent à la valeur de l’attribut href. Les prochaines sections expliqueront comment et quand utiliser chacune d’entre elles. Mais d’abord, ajoutons le contenu suivant à notre fichir links.html:
<!DOCTYPE html>
<html>
<head>
<title>Links</title>
</head>
<body>
<h1>Links</h1>
<p>Cet exemple traite des liens et des <a>images</a>.</p>
<p>Cette page traite des liens! Il y a 3 types de lien:</p>
<ul>
<!-- Ajouter les éléments <li> ici -->
</ul>
</body>
</html>Lien absolu
Par exemple, essayez de créer un lien vers la référence Mozilla Developer Network:
<!DOCTYPE html>
<html>
<head>
<title>Links</title>
</head>
<body>
<h1>Links</h1>
<p>Cet exemple traite des liens et des <a>images</a>.</p>
<p>Cette page traite des liens! Il y a 3 types de lien:</p>
<ul>
<li>Lien absolu, comme celui la <a href='https://developer.mozilla.org/en-US/docs/Web/HTML'>Mozilla Developer Network</a>, qui est une très bonne source d'information.
</li>
</ul>
</body>
</html>Il est possible d’utiliser des liens absolus pour se référer à des pages interne de votre site, mais coder en dur votre nom de domaine partout, peut vous mettre dans des situations difficiles. Il est généralement préférable de réserver des liens absolus uniquement pour diriger les utilisateurs vers un site Web différent.
Liens relatifs
Les liens « Relatifs » cible un autre fichier dans votre site Web à partir du point de vue du fichier que vous éditez. Il est implicite que le schéma et le nom de domaine sont identiques à ceux de la page actuelle, donc la seule chose que vous devez fournir est le chemin.
<!DOCTYPE html>
<html>
<head>
<title>Links</title>
</head>
<body>
<h1>Links</h1>
<p>Cet exemple traite des liens et des <a>images</a>.</p>
<p>Cette page traite des liens! Il y a 3 types de lien:</p>
<ul>
<li>Lien absolu, comme celui la <a href='https://developer.mozilla.org/en-US/docs/Web/HTML'>Mozilla Developer Network</a>, qui est une très bonne source d'information.
</li>
<li>
Lien Relatif, <a href='misc/extras.html'></a>.
</li>
</ul>
</body>
</html>Dans ce cas, l’attribut href représente le chemin du fichier extras.html à partir du fichier links.html. Comme extras.html ne se trouve pas dans le même dossier que links.html, nous devons inclure le dossier misc dans l’URL.
Chaque dossier et fichier dans un chemin est séparé par une barre oblique (/). Donc, si nous essayions d’accéder à un fichier qui est deux dossiers en dessous, nous aurions besoin d’une URL comme celle-ci:
misc/other-folder/extras.html
Dossier parent
Cela fonctionne pour des liens qui ciblent des fichiers qui se trouvent dans le même dossier ou dans un dossier plus profond. Qu’en est-il de la liaison vers des pages qui se trouvent dans un répertoire au dessus du fichier actuel ? Essayons de créer des liens relatifs vers links.html et à images.html à partir de notre fichier extras.html. Ajoutez ceci à extras.html:
<!DOCTYPE html>
<html>
<head>
<title>Extras</title>
</head>
<body>
<h1>Extras</h1>
<p>Cette page parle de HTML mais vous pouvez vous interesser aux <a href='links.html'>links</a> ou aux <a href='images.html'>images</a>.</p>
</body>
</html>Lorsque vous cliquez sur l’un ou l’autre de ces liens dans un navigateur Web, il indique que la page n’existe pas. En examinant la barre d’adresse, vous découvrirez que le navigateur essaie de charger misc/links.html et misc/images.html et donc que vous cherchez dans le mauvais dossier! C’est parce que nos liens sont relatifs à l’emplacement de extras.html, qui est dans le dossier misc.
Pour résoudre ce problème, nous avons besoin de la syntaxe (..). Deux points consécutifs dans un chemin de fichier représentent un pointeur vers le répertoire parent:
<!DOCTYPE html>
<html>
<head>
<title>Extras</title>
</head>
<body>
<h1>Extras</h1>
<p>Cette page parle de HTML mais vous pouvez vous interesser aux <a href='../links.html'>links</a> ou aux <a href='../images.html'>images</a>.</p>
</body>
</html>C’est comme dire: «Je sais que extras.html est dans le dossier misc. Monte d’un dossier et cherche links.html et images.html.
Pour naviguer dans plusieurs répertoires, utilisez plusieurs .., de la manière suivante:
../../elsewhere.html
Les liens relatifs sont pratiques car ils vous permettent de ce déplacer dans des dossiers entiers sans avoir à mettre à jour tous les href sur vos éléments a, mais ils peuvent être un peu déroutants lorsque tous vos liens commencent par un tas de points.
Par exemple, toutes les images de ce cours sont chargées via des URL relatives (nous allons nous intéresser aux images prochainement). Cela nous permet de renommer l’un de nos chapitres sans avoir à mettre à jour tous nos chemins d’image.
Lien racine
Les liens «Racine» sont semblables à ceux de la section précédente, mais plutôt que relatifs à la page actuelle, ils sont relatifs à la «racine» de l’ensemble du site. Par exemple, si votre site Web est hébergé our-site.com, toutes les URL relatives à la racine seront relatives our-site.com..
Malheureusement, tout ce cours utilise des fichiers HTML locaux au lieu d’un site hébergé sur un serveur Web. Cela signifie que nous ne pourrons pas expérimenter les liens racines. Mais, si nous avions un serveur réel, le lien vers notre page d’accueil ressemblerait à ceci:
<!DOCTYPE html>
<html>
<head>
<title>Links</title>
</head>
<body>
<h1>Links</h1>
<p>Cet exemple traite des liens et des <a>images</a>.</p>
<p>Cette page traite des liens! Il y a 3 types de lien:</p>
<ul>
<li>Lien absolu, comme celui la <a href='https://developer.mozilla.org/en-US/docs/Web/HTML'>Mozilla Developer Network</a>, qui est une très bonne source d'information.
</li>
<li>
Lien Relatif, <a href='misc/extras.html'></a>.
</li>
<li>Lien racine, comme pour aller à la
<a href='/'>home page</a> de notre site
</li>
</ul>
</body>
</html>La seule différence entre un lien racine et un lien relatif est que le premier commence par une barre oblique. Cette barre oblique initiale représente la racine de votre site. Vous pouvez ajouter plus de dossiers et de fichiers au chemin après cette barre oblique initiale, tout comme les liens relatifs. Le chemin suivant fonctionnera correctement, peu importe où se trouve la page actuelle (même en misc/extras.html):
Les liens racines font partis des types de liens les plus utiles. Ils sont assez explicites pour éviter la confusion potentielle des liens relatifs, mais ils ne sont pas trop explicites comme les liens absolus.
Cible du lien
Les attributs modifient la signification des éléments HTML, et parfois vous devez modifier plus d’un aspect d’un élément. Par exemple, les éléments <a> acceptent également un attribut target qui définit l’endroit où afficher la page lorsque l’utilisateur clique sur le lien. Par défaut, la plupart des navigateurs remplacent la page actuelle par la nouvelle. Nous pouvons utiliser target pour demander au navigateur d’ouvrir un lien dans une nouvelle fenêtre.
Essayez de modifier notre lien absolu dans links.html pour le faire faire correspondre au code suivants. Notez comment le second attribut ressemble au premier, mais ils sont séparés les uns des autres par un espace (ou une nouvelle ligne):
<!DOCTYPE html>
<html>
<head>
<title>Links</title>
</head>
<body>
<h1>Links</h1>
<p>Cet exemple traite des liens et des <a>images</a>.</p>
<p>Cette page traite des liens! Il y a 3 types de lien:</p>
<ul>
<li>Lien absolu, comme celui la
<a href='https://developer.mozilla.org/en-US/docs/Web/HTML' target="_blank">Mozilla Developer Network</a>
, qui est une très bonne source d'information.
</li>
<li>
Lien Relatif, <a href='misc/extras.html'></a>.
</li>
<li>Lien racine, comme pour aller à la
<a href='/'>home page</a> de notre site
</li>
</ul>
</body>
</html>L’attribut target peut prendre plusieurs valeurs prédéfinies ayant une signification particulière pour les navigateurs Web, mais la plus commune est _blank qui spécifie un nouvel onglet ou une fenêtre. Vous pouvez lire le reste des valeurs possible pour target sur MDN.
Conventions de nommage
Vous remarquerez qu’aucun de nos fichiers ou dossiers n’a d’espaces dans leur nom. C’est à dessein. Les espaces dans les URL nécessitent une gestion particulière et doivent être évités à tout prix. Pour voir ce dont nous parlons, essayez de créer un nouveau fichier dans notre projet links-and-images nommé spaces are bad.html. Ajoutez un peu de texte, puis ouvrez-le dans Google Chrome ou Safari (Firefox triche et préserve les espaces).
Dans la barre d’adresse, vous verrez que tous nos espaces ont été remplacés par %20, comme indiqué ci-dessus. Les espaces ne sont pas autorisés dans les URL, et c’est l’encodage spécial utilisé pour les représenter. Au lieu d’un espace, vous devriez toujours utiliser un trait d’union, comme nous l’avons fait tout au long de ce cours. C’est aussi une bonne idée d’utiliser les caractères minuscules pour la cohérence.
Notez comment il existe une connexion directe entre nos noms de fichiers / dossiers et l’URL de la page Web qu’ils représentent. Les noms de nos dossiers et fichiers déterminent les « slugs » de nos pages Web. Ils sont visibles pour l’utilisateur, ce qui signifie que vous devriez mettre autant d’attention dans le nom de vos fichiers que pour créez le contenu des pages Web qu’ils contiennent.
Ces conventions de dénomination s’appliquent à tous les fichiers de votre site, et pas seulement aux fichiers HTML. Les fichiers CSS, les fichiers JavaScript et les images devraient également éviter les espaces.
Les images
Contrairement à tous les éléments HTML que nous avons rencontrés jusqu’ici, le contenu d’image est défini en dehors de la page Web qui ou elles apparaissent. Heureusement pour nous, nous avons déjà un moyen de faire référence aux ressources externes en HTML: les URL absolues, relatives et les URL racines.
Les images sont incluses dans les pages Web avec la balise <img/> et son attribut src, qui indique le chemin vers le fichier image que vous souhaitez afficher. Remarquez comment il s’agit d’un élément vide comme <br/> et <hr/> du chapitre précédent. (Ne l’ajoutez pas encore à notre projet. Nous traiterons des exemples concrets dans la section suivante.)
<img src='some-photo.jpg'/>Les écrans Retina et les appareils mobiles rendent la gestion de l’image un peu plus compliquée qu’une simple balise <img/>. Nous allons laisser ces complexités pour le chapitre sur les Images réactives de ce cours. Nous nous interesserons également aux éléments figure et figcaption dans le chapitre HTML sémantique.
Pour l’instant, concentrons-nous sur les nombreux formats d’image présent sur Internet.
Formats d’image
Il existe quatre formats d’image principaux utilisés sur le Web, et ils ont tous été conçus pour faire différentes choses. La compréhension de leurs objectifs est un long chemin vers l’amélioration de la qualité de vos pages Web.
Les prochaines sections traiterons des différent cas d’utilisation de chacun de ces formats d’image. Assurez-vous d’avoir décompressé ces images dans votre projet links-and-images avant de passer à autre chose .
Les images JPG
Les images JPG sont conçues pour gérer de grandes palettes de couleurs sans augmenter de façon exorbitante la taille du fichier. Cela les rend géniaux pour les photos et les images avec beaucoup de gradients. D’autre part, les JPG ne permettent pas de pixels transparents. Vous pouvez vous en apercevoir si vous regardez de plus près l’image ci-dessous:
Intégrez cette image mochi.jpg dans notre page images.html avec l’extrait de code suivant (cela inclut également un peu de navigation vers nos autres pages):
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<h1>Images</h1>
<p>Cette page concerne les différents formats d'image mais vous pouvez etre interesse par les
<a href='links.html'>liens</a> et les <a href='misc/extras.html'>extras</a>.</p>
<h2>JPGs</h2>
<p>Les images JPG sont bonnes pour les photos.</p>
<img src='images/mochi.jpg'/>
</body>
</html>Les images GIF
Les GIF sont l’option la plus simple pour les animations simples, mais ce format est assez limitées en termes de palette de couleurs, ne les utilisez donc jamais pour les photos. Les pixels transparents sont une option binaire pour les GIF, ce qui signifie que vous ne pouvez pas avoir de pixels semi-opaques. Cela peut rendre difficile l’obtention d’un niveaux élevés de détail sur un fond transparent. Pour cette raison, il est généralement préférable d’utiliser des images PNG si vous n’avez pas besoin d’animation.
Vous pouvez ajouter ce petit gars à notre fichier images.html avec ce qui suit:
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<h1>Images</h1>
<p>Cette page concerne les différents formats d'image mais vous pouvez etre interesse par les
<a href='links.html'>liens</a> et les <a href='misc/extras.html'>extras</a>.</p>
<h2>JPGs</h2>
<p>Les images JPG sont bonnes pour les photos.</p>
<img src='images/mochi.jpg'/>
<h2>GIFs</h2>
<p>Les GIFs sont bon pour les animations</p>
<img src='images/mochi.gif'/>
</body>
</html>Les images PNG
Les PNG sont parfaits pour tout ce qui n’est pas une photo ou une animation. Pour les photos, un fichier PNG de même qualité (tel que perçu l’œil humain) serait généralement plus grand qu’un fichier JPG équivalent. Par contre, les PNGs traitent très bien l’opacité, et ils n’ont pas de limites de palette de couleurs. Cela les rend parfaitement adaptés aux icônes, aux diagrammes techniques, aux logos, etc.
Ajoutons ce PNG à notre projet:
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<h1>Images</h1>
<p>Cette page concerne les différents formats d'image mais vous pouvez etre interesse par les
<a href='links.html'>liens</a> et les <a href='misc/extras.html'>extras</a>.</p>
<h2>JPGs</h2>
<p>Les images JPG sont bonnes pour les photos.</p>
<img src='images/mochi.jpg'/>
<h2>GIFs</h2>
<p>Les GIFs sont bon pour les animations</p>
<img src='images/mochi.gif'/>
<h2>PNGs</h2>
<p>Les PNGs sont bons pour les diagrammes les icones.</p>
<img src='images/mochi.png'/>
</body>
</html>Les images SVG
Contrairement aux formats d’image basés sur les pixels précédents, SVG est un format graphique vectoriel, ce qui signifie qu’on peut augmenter ou diminuer sa taille jusqu’à n’importe quelle dimension sans perte de qualité. Cette propriété rend les images SVG un outil merveilleux pour le « Responsive Design » . Ils sont bons pour presque tous les mêmes cas d’utilisation que les PNG, et vous devriez les utiliser chaque fois que vous le pouvez.
Ces images de 300 × 300 pixels étaient à l’origine de 100 × 100 pixels, on voit clairement la différence que produit l’agrandissement sur chacune d’entre elles. Notez les lignes nettes sur l’image SVG à gauche, tandis que l’image PNG à droite est maintenant très pixelisée.
En dépit d’être un format vectoriel, les SVG peuvent être utilisés exactement comme leurs équivalents « traditionnels ». Allez-y et ajoutez-le mochi.svg à notre page images.html:
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<h1>Images</h1>
<p>Cette page concerne les différents formats d'image mais vous pouvez etre interesse par les
<a href='links.html'>liens</a> et les <a href='misc/extras.html'>extras</a>.</p>
<h2>JPGs</h2>
<p>Les images JPG sont bonnes pour les photos.</p>
<img src='images/mochi.jpg'/>
<h2>GIFs</h2>
<p>Les GIFs sont bon pour les animations</p>
<img src='images/mochi.gif'/>
<h2>PNGs</h2>
<p>Les PNGs sont bons pour les diagrammes les icones.</p>
<img src='images/mochi.png'/>
<h2>SVGs</h2>
<p>Les SVGs C'est <em>de la balle !</em>. Utiliser les quand vous voulez.</p>
<img src='images/mochi.svg'/>
</body>
</html>Il existe un problème potentiel avec les SVG: pour qu’ils s’affichent correctement dans les navigateurs, vous devez convertir tous les champs de texte en « contours vectoriels » à l’aide de votre éditeur d’image (Abode Illustrator ou Sketch etc… ). Si vos images contiennent beaucoup de texte (comme les captures d’écran dans ce cours), cela peut avoir un impact important sur la taille du fichier. Pour cette raison, j’utilise dans ce cours le format PNG au lieu de SVG.
Dimensions des images
Par défaut, l’élément <img/> utilise les dimensions héritées de son fichier image. Nos images JPG, GIF et PNG ont une taille de 150 × 150 pixels, tandis que notre SVG a une taille de seulement 75 × 75 pixels.
Comme nous en discuterons plus en détail dans le chapitre sur les images réactives, les formats d’image à base de pixels doivent être deux fois plus grands si vous souhaitez qu’ils s’affichent correctement sur les écrans Retina. Pour que nos images basées sur les pixels s’affichent à la la taille souhaitée (75 × 75), nous pouvons utiliser l’ attribut de l’élément <img/> intitulé width. Dans notre fichier images.html, mettez à jour toutes nos images basées sur des pixels pour correspondre à ce qui suit:
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<h1>Images</h1>
<p>Cette page concerne les différents formats d'image mais vous pouvez etre interesse par les
<a href='links.html'>liens</a> et les <a href='misc/extras.html'>extras</a>.</p>
<h2>JPGs</h2>
<p>Les images JPG sont bonnes pour les photos.</p>
<img src='images/mochi.jpg' width='75'/>
<h2>GIFs</h2>
<p>Les GIFs sont bon pour les animations</p>
<img src='images/mochi.gif' width='75'/>
<h2>PNGs</h2>
<p>Les PNGs sont bons pour les diagrammes les icones.</p>
<img src='images/mochi.png' width='75'/>
<h2>SVGs</h2>
<p>Les SVGs C'est <em>de la balle !</em>. Utiliser les quand vous voulez.</p>
<img src='images/mochi.svg' width='75'/>
</body>
</html>L’attribut width définit une dimension explicite pour l’image. Il existe un attribut height correspondant. Le réglage d’un seul des deux entraînera une agrandissement proportionnel de l’image. Les valeurs de dimension sont spécifiées en pixels, et il n’est pas nécessaire d’inclure une unité (par exemple, width='75px').
Les attributs width et height peuvent être utiles, mais il est généralement préférable de définir les dimensions des images via CSS afin que de pouvoir les modifier avec des requêtes multimédias (« media queries »). Nous en discuterons plus en détail une fois que nous aurons une page « Responsive ».
Textes alternatifs
L’ajout de l’attributs alt à votre balise <img/> est une bonne pratique. Il définit un « texte alternatif » à l’image affichée. Cela a un impact sur les moteurs de recherche et les utilisateurs avec des navigateurs spécieux (p. Ex., Les personnes qui souffrent d’une altération de la vision).
Mettre à jour toutes nos images en incluant un texte alternatif dans des attributs alt:
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<h1>Images</h1>
<p>Cette page concerne les différents formats d'image mais vous pouvez etre interesse par les
<a href='links.html'>liens</a> et les <a href='misc/extras.html'>extras</a>.</p>
<h2>JPGs</h2>
<p>Les images JPG sont bonnes pour les photos.</p>
<img src='images/mochi.jpg' width='75' alt='Une balle mochi dans une bulle'/>
<h2>GIFs</h2>
<p>Les GIFs sont bon pour les animations</p>
<img src='images/mochi.gif' width='75' alt='Une balle mochi qui danse'/>
<h2>PNGs</h2>
<p>Les PNGs sont bons pour les diagrammes les icones.</p>
<img src='images/mochi.png' width='75' alt='Une balle mochi'/>
<h2>SVGs</h2>
<p>Les SVGs C'est <em>de la balle !</em>. Utiliser les quand vous voulez.</p>
<img src='images/mochi.svg' alt='Une balle mochi avec des courbes de beziers'/>
</body>
</html>Pour plus d’exemples d’utilisation de l’attribut alt, reportez-vous à la spécification officielle.
Plus d’attributs html
La langue par défaut d’une page Web est définie par l’attribut lang sur l’élément <html> de niveau supérieur. Notre document est en français, donc nous utiliserons l’encodage de ce pays comme valeur d’attribut (faites ceci pour toutes les pages que nous avons créées):
<html lang='fr'>Un «jeu de caractères» est un peu comme un alphabet numérique pour votre navigateur. C’est différent de la langue de votre document car elle affecte uniquement la façon dont les lettres elles-mêmes sont rendues, et non la langue du contenu. Copions et collons quelques caractères internationaux dans notre page misc/extras.html et voyons ce qui se passe.
<!DOCTYPE html>
<html lang='fr'>
<head>
<title>Extras</title>
</head>
<body>
<h1>Extras</h1>
<p>Cette page parle de HTML mais vous pouvez vous interesser aux <a href='../links.html'>links</a> ou aux <a href='../images.html'>images</a>.</p>
<h2>Jeux de caractère</h2>
<p>On peut utiliser l' UTF-8</p>
<ol>
<li>bir</li>
<li>iki</li>
<li>üç</li>
<li>dört</li>
<li>beş</li>
</ol>
</body>
</html>Lorsque vous affichez cela dans un navigateur, vous verrez des trucs bizarres où ü, ç, ö, et ş s’affichent comme cela:
C’est parce que le jeu de caractères par défaut pour la plupart des navigateurs ne correspond pas à ces caractères «spéciaux». Pour résoudre ce problème, spécifiez un encodage de caractères UTF-8 en ajoutant un élément <meta> avec un attribut charset dans la balise <head> de notre fichier misc/extras.html:
<!DOCTYPE html>
<html lang='fr'>
<head>
<title>Extras</title>
<meta charset='UTF-8'/>
</head>
<body>
<h1>Extras</h1>
<p>Cette page parle de HTML mais vous pouvez vous interesser aux <a href='../links.html'>links</a> ou aux <a href='../images.html'>images</a>.</p>
<h2>Jeux de caractère</h2>
<p>On peut utiliser l' UTF-8</p>
<ol>
<li>bir</li>
<li>iki</li>
<li>üç</li>
<li>dört</li>
<li>beş</li>
</ol>
</body>
</html>Les caractères spéciaux devraient maintenant être affichés correctement. l’UTF-8 est comme un alphabet universel pour Internet. Chaque page Web que vous créez devrait avoir cette ligne dans son <head>.
Entités html
D’accord, cette dernière section n’a, en réalité, rien à voir avec les liens ou les images, mais nous devons encore discuter d’une chose de plus avant de changer de vitesse et de passer au CSS. Une «entité HTML» est un caractère spécial qui ne peut pas être représenté en texte brut dans un document HTML. Cela signifie généralement que c’est un caractère réservé en HTML ou que vous n’avez pas de touche pour lui sur votre clavier.
Caractères réservés
Les caractères <, > et & sont appelés « caractères réservés » , car ils ne sont pas autorisés à être insérer dans un document HTML sans être codé. C’est parce qu’ils signifient quelque chose dans la syntaxe HTML: < ouvre les balises, et > les ferment. Comme nous sommes sur le point de l’apprendre, & précéde une entité HTML.
Dans notre fichier misc/extras.html, ajoutez ce qui suit:
<!DOCTYPE html>
<html lang='fr'>
<head>
<title>Extras</title>
<meta charset='UTF-8'/>
</head>
<body>
<h1>Extras</h1>
<p>Cette page parle de HTML mais vous pouvez vous interesser aux <a href='../links.html'>links</a> ou aux <a href='../images.html'>images</a>.</p>
<h2>Jeux de caractère</h2>
<p>On peut utiliser l' UTF-8</p>
<ol>
<li>bir</li>
<li>iki</li>
<li>üç</li>
<li>dört</li>
<li>beş</li>
</ol>
<h2>Entités html/h2>
<p>Il ya 3 caractère réservés en HTML: < > and &. Vous pouvez toujours utiliser les entités HTML entities pour ces 3 caractères.</p>
</body>
</html>Les entités commencent toujours par (&) et finissent par un point-virgule (;). Dans l’intervalle, vous mettez un code spécial que votre navigateur interprètera comme un symbole. Dans ce cas, il interprète lt, gt, et amp comme « inférieurs à », « plus grand que » et le symbole amperse, respectivement.
Il y a une bonne quantité d’entités HTML. Nous allons vous laisser explorer seul la plupart d’entre eux.
UTF-8 et entités html
Dans les temps anciens du Web, les fichiers HTML n’avaient pas de caractères spéciaux, ce qui rendait les entités beaucoup plus utiles. Mais, puisque nous utilisons maintenant un jeu de caractères UTF-8, nous devrions pouvoir insérer n’importe quel caractère directement dans le document HTML.
Résumé
Un site Web est fondamentalement juste un tas de balise HTML, d’image et (comme nous en apprendrons bientôt) des fichiers CSS liés ensemble. Vous devriez commencer à penser à un site Web comme une façon pratique pour les utilisateurs de naviguer dans les dossiers et les fichiers que nous créons dans le cadre du processus de développement Web. Avec cette perspective, il devrait être clair que maintenir un système de fichiers bien organisé est un aspect essentiel de la création d’un site web.
Nous avons également appris quelques attributs importants ( lang et charset) et cela nous donne un modèle de base que vous devriez utiliser comme base de création de vos pages Web:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Une page Web</title>
</head>
<body>
<h1>Une page Web</h1>
<!-- Le reste du contenu de la page -->
</body>
</html>Dans le prochain chapitre, nous découvrirons plus d’éléments et d’attributs HTML qui nous permettront de lier des feuilles de styles CSS à l’ensemble de notre site Web. La capacité de travailler avec plusieurs fichiers et de les relier de manière intelligente deviendra encore plus importante que dans ce chapitre.