Hypertexte

Introduction

Les liens hypertextes constituent l'élément central du World Wide Web en permettant à l'internaute de naviguer de documents en documents. L'adresse d'un document Web est représentée par une URL.

URL

En règle générale, une URL est composée :

http://www.lemonde.fr/technologies/article/2013/09/18/ios7.html

Dans l'exemple ci-dessus, HTTP correspond au protocole utilisé pour accéder à la ressource ios7.html hébergée sur un serveur Web de nom de domaine www.lemonde.fr dans le sous-répertoire technologies/article/2013/09/18/

Chemins absolus vs. chemins relatifs

Si la ressource demandée est hébergée sur le même serveur Web que le document HTML, il est inutile de préciser le protocole et le nom de domaine. Le chemin d'accès, quant à lui, peut être :

absolu
Le chemin est constitué de la liste de tous les répertoires à traverser à partir de la racine du site web (le répertoire public_html dans le cas du serveur Web du département Informatique de l'IUT). Le chemin doit impérativement commencer par le caractère / symbolisant la racine du site.
relatif
Le chemin est constitué de la liste de tous les répertoires à traverser à partir du répertoire de travail (i.e. le répertoire du document courant), le symbole .. désignant le répertoire parent.
public_html/
  css/			
    style.css
    backgrounds/
      orange-bricks.jpg
  html/
    book/
      chapter1.html

Dans l'exemple ci-dessus, il existe deux manières de spécifier l'emplacement du fichier orange-bricks.jpg :

Chemin absolu
/css/backgrounds/orange-bricks.jpg
Chemin relatif depuis le sous-répertoire book
../../css/backgrounds/orange-bricks.jpg

Élément HTML

a

Délimite un lien hypertexte.

href
Attribut permettant de préciser la destination du lien hypertexte, représentée par son URL. Si la valeur de l'attribut est précédée du caractère #, le lien fait référence à un élément HTML du document courant dont l'attribut identifiant id correspond à la valeur de l'attribut href.
target
Attribut indiquant où s'affichera la page pointée par le lien hypertexte. Avec la valeur _self, le document s'affiche dans la fenêtre courante. Avec la valeur _blank, le document s'affiche dans un nouvel onglet.
<p>
  Un lien vers <a href="http://www.google.fr" target="_blank">Google</a>.
  Un autre lien vers le <a href="#ch1">chapitre 1</a>.
</p>

<h1 id="ch1">Chapitre 1</h1>

Un lien vers Google. Un autre lien vers le chapitre 1.

Chapitre 1

Propriétés CSS

À un sélecteur CSS, on peut ajouter une pseudo-classe qui permet de styliser un élément HTML selon un contexte donné. Par exemple, la pseudo-classe :hover est associée au survol du lien avec le pointeur de la souris.

a:link

Sélecteur par défaut appliqué à un lien.

a:visited

Sélecteur appliqué à un lien déjà visité.

a:hover

Sélecteur appliqué à un lien suvolé par le pointeur de la souris.

a:active

Sélecteur appliqué à un lien sélectionné. Un lien est sélectionné lorsqu'il est cliqué.

a:link {
  text-decoration: none;
  color: green;
}

a:visited {
  color: blue;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: none;
  font-weight: bold;
  color: red;
}
<ul>
  <li><a href="https://www.google.com/chrome/browser/">Chrome</a></li>
  <li><a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a></li>
  <li><a href="http://www.opera.com/fr">Opera</a></li>
  <li><a href="https://www.apple.com/safari/">Safari</a></li>
  <li><a href="http://windows.microsoft.com/internet-explorer/">IE</a></li>
</ul>

Exercice 11

Ajoutez des liens hypertextes (vers Wikipedia ?) au niveau des trois termes du lexique du fichier risotto.txt.

Correction

Exercice 12

Ajoutez un menu de navigation permettant d'accéder directement à tous les titres et sous-titres du fichier conditions_generales_itunes.txt . Puis ajoutez un lien au niveau de chaque titre permettant de revenir au menu de navigation.

Correction