Site Web: fonctionnement, structure et programmation
Navigation
Liens et images
Résumé de la section
La liste suivante répertorie les éléments importants à retenir de cette section:
A retenir !
Il existe trois types de liens hypertextes: les liens internes, externes et les signets.
La création d'un lien se fait à l'aide de l'élément <a>.
La valeur de l'attribut href de l'élément <a> donne la destination du lien.
Le contenu de l'élément <a> est le nom du lien, c'est-à-dire ce que vous voyez sur la page web. Il est souligné par défaut pour montrer qu'il est cliquable.
Un lien peut être représenté par du texte ou par une image.
Un lien interne est un lien qui pointe sur d'autres fichiers de votre site web. Le chemin relatif du lien indique alors la destination du lien par rapport à la page sur laquelle se situe le lien.
Utiliser «..» pour pointer sur un fichier qui se trouve dans le dossier parent du dossier dans lequel se trouve le lien.
Les différentes parties d'un chemin d'accès sont séparées à l'aide du caractère «/».
Lorsque le chemin vers une image n'est pas correct, la page web affiche une image cassée.
N'utilisez jamais d'espace, ni d'accent, ni d'apostrophe dans les noms de dossiers ou de fichiers de votre site web.
Organisez les fichiers de votre site web dès que vous commencerez à y travailler, ce qui vous épargnera de changer les chemins par la suite.
Un lien externe est un lien qui pointe sur un fichier situé sur une autre machine que celle qui héberge la page en cours. L'URL complète de la ressource pointée est alors nécessaire comme valeur de l'attribut href.
Un signet est un lien vers un emplacement particulier d'un document. Utilisez # suivi de l'identifiant de l'ancre de destination pour le lien vers un endroit particulier du document.
L'attribut id crée une ancre de destination.
Pour l'accessibilité, servez-vous de l'attribut title qui donne une description du lien dans les éléments <a>
L'attribut target ouvre un lien dans une nouvelle fenêtre du navigateur en lui associant la valeur _blank.
Les formats JPEG, GIF et PNG sont les formats d'images supportés par les navigateurs web. JPEG convient mieux aux photos et aux images complexes alors que GIF convient aux logos et aux images simples avec quelques couleurs, des traits et du texte.
Les images JPEG peuvent subir plusieurs niveaux de compression ce qui vous permet de choisir le meilleur rapport qualité/taille selon vos besoins. GIF permet de définir un fond transparent.
L'élément <img> sert à placer des images dans une page web. Il s'agit d'un élément en-ligne, ce qui veut dire que le navigateur n'insère aucun saut de ligne avant ou après une image.
L'attribut src indique où se trouve l'image. On peut inclure des images en provenance de son propre site en mettant un chemin relatif dans cet attribut ou des images venues d'ailleurs avec une URL.
L'attribut alt d'un élément <img> permet de donner une description de l'image. Celui-ci s'affiche dans certains navigateurs quand l'image est introuvable et sert aux lecteurs vocaux d'écrans pour décrire l'image aux mal-voyants.
Le navigateur traite cet élément différemment des autres éléments HTML: après avoir lu la page, il récupère chaque image sur le serveur web avant de l'afficher.
Les images peuvent servir de lien vers d'autres pages. Pour créer un tel lien, utilisez l'élément <img> comme contenu d'un élément <a> et mettez le lien dans l'attribut href de l'élément <a>.