<a href="URL">destination du lien</a>Hypertexte dans HTML
Hypertexte
L’hypertexte [1] est un texte contenant des liens vers d’autres textes, par opposition à un unique flux linéaire comme dans un roman.
Le terme a été inventé par Ted Nelson aux alentours de 1965.
Quelques éléments supportant des liens hypertexte
<a href="URL">…</a>
<link href="URL">
<img src="URL>
<form>
<a> Ancre
Ancre[1] élément en ligne permettant de diriger l’utilisateur vers un emplacement dans la page courante ou vers une page extérieure
L’élément HTML <a> (ou élément d’ancre), avec son attribut href, crée un hyperlien vers des pages web, des fichiers, des adresses e-mail, des emplacements dans la même page ou toute autre ressource accessible par une URL.
Le contenu indique la destination du lien.
<a> - attributs
Attributs
href: adresse du lien hypertexte vers lequel l’ancre est dirigée (page web, fichier, adresse e-mail, emplacement dans la même page, ou autre ressource accessible par une URL)hreflang: permet de signifier la langue du lien cible
<p>Vous pouvez contacter Michaël :</p>
<ul>
<li><a href="https://exemple.fr">Site web</a></li>
<li><a href="mailto:m.bluth@exemple.fr">Courriel</a></li>
<li><a href="tel:+123456789">Téléphone</a></li>
</ul>Ancre de page
Lien vers un élément portant un attribut id dans la page courante
<a href="#nom_d_id">Vers mon ancre</a>
<h1>Titre</h1>
<p>Paragraphe</p>
<h2 id="nom_d_id">Titre avec mon ancre</h2>Eviter les caractères accentués, la ponctuation et les espaces dans vos noms de fichier vous évitera bien des soucis. |
Activité
|
Liens vers d’autres ressources
Quand le lien n’est pas un lien vers une ancre de page, le suivre naviguera vers un autre fichier (une autre ressource).
Le navigateur cherchera implicitement un fichier Ex. Sinon, il faut préciser le nom exact de la ressource: Ex. |
Lien externe
Envoie vers un site externe au site courant.
L’URL commence par http:// ou https:// .
<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/a">MDN - Référence sur l'élément Ancre</a>Lien interne
Commence par autre chose que http:// ou https://.
Pointe vers une page ou ressource du site courant.
- Lien absolu
Absolu depuis la racine du site
Commence par
/
Ex.
Si l’URL de base du site est https://monsite.fr
<a href="/">Accueil</a> <!-- https://monsite.fr/ -->
<a href="/about/">A propos</a> <!-- https://monsite.fr/about/index.html -->- Lien relatif
modificateurs pour se positionner dans l’arborescence des fichiers
../signifie qu’on remonte d’un niveau (dossier)./signifie qu’on se positionne au même niveau que le fichier courantnom_de_ressource
Relatif à la page courante du site (vers le meme nom de domaine)
Si on part de la page https://monsite.fr/articles/01-premier-article/index.html
<a href="../parent">vers une page dans un dossier parent</a> <!-- https://monsite.fr/foo/parent -->
<a href="../../parent">vers une page dans un dossier parent d'un dossier parent</a> <!-- https://monsite.fr/parent -->
<a href="voisin.html">Vers une page dans le même dossier que la page courante</a>Exemples - liens absolus / relatifs
Si la racine du site est https://monsite.fr
. ├── index.html ├── apropos.html ├── style.css ├── img │ └── logo.png └── recettes ├── index.html └── tarfilette └── index.html 4 directories, 6 files
Exemples de liens absolus / relatifs
En partant de la page /recettes/tartiflette/index.html
Si on part de l'URL `https://monsite.fr/foo/bar`href - quelques autres protocoles
mailto:+ adresse e-mailtel:+ numéro de téléphonesms:+ numéro de téléphone
<address>
<a href="mailto:addresse@email.com">addresse@email.com</a><br/>
<a href="tel:+33123456789">+33123456789</a><br/>
<a href="sms:+33123456789"> ou par SMS</a>
</address>target
L’attribut target
_self(par défaut) : affiche dans la fenêtre courante
_blankaffiche dans un nouvel onglet
Il existe d’autres cibles qui n’entrent pas dans le périmètre de ce cours.
<link>
Permet de charger des fichiers externes depuis le <head>
Le plus souvent des feuilles de style CSS, ou une icône de favoris.
href: lien hypertexte de la ressource à chargerrel: le type de ressource
<link rel="stylesheet" href="./styles.css"/>
<link rel="icon" href="favicon.ico" /><!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Carré - Wikipedia</title>
<link rel="stylesheet" href="./styles.css"/>
</head>
<body></body>
</html><script>
Permet d’exécuter des script Javascript
Le plus souvent dans l’entête (<head>)
src: URL du script
<script src="main.js"></script>Script exécuté directement dans la page.
<script>
console.log("hello world")
</script>Script dans l’entête
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Carré - Wikipedia</title>
<script src="main.js"></script>
</head>
<body></body>
</html>Eléments remplacés
Eléments [1] dont le contenu est remplacé par des ressources externes.
<img> : image
<video> : lecteur vidéo
<iframe> : embarquer une page externe
<embed> : embarquer un document qui sera lu par un outil externe (ex.pdf)
Attribut src : L’URL de la ressource
<img>
Images : élément vide.
Attribut
src: l’emplacement de cette imageAttribut
alt: alternative textuelleQuand l’image ne peut aps être affichée
Pour les technologies d’assisistance
Ex. élement img avec les attributs src et alt:
<img src="ketchup-du-prof-de-html.png"
alt="Un personnage cartoon en forme de bouteille de ketchup"
>Attribut href ou src ?
Eléments hypertexte avec attribut href
<a>
<link>
Avec un attribut src
<img>
<video>
<iframe>
<embed>
<script>