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 (valeur par défaut), 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 survolé 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

Ajoutez des liens hypertextes vers des ressources externes dans le fichier twitter.html.

Correction 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>WIRED</title>
  </head>
  <body>
    <h1>A BRIEF HISTORY OF THE EVER-EXPANDING TWEET</h1>
    <p>
      by Arielle Pardes
      <time datetime="2017-09-26T17:00-04:00">09.26.17 05:00 PM</time>
      (NYC)
    </p>

    <cite><a href="http://www.wired.com">WIRED.com</a></cite>

    <p>
      For as long as <a href="http://www.twitter.com">Twitter</a>
      has existed, it has been a place of brevity,
      if not levity. The 140 character limit - originally created so that
      tweets could fit into single
      <abbr title="Short Message Service">SMS</abbr>
      messages - is as much a part of the brand as the silhouetted bird.
      You want to yell about the
      <abbr title="National Football League"><a href="http://www.nfl.com">NFL</a></abbr>,
      hurl some insults at the president? Fine. Just make it quick.
    </p>

    <p>
      Starting <time datetime="2017-09-26">today</time>, the platform will
      let a small group of beta testers experiment with a 280 character limit,
      doubling what can fit into a single tweet.
    </p>

    <p>
      Twitter says it made the move primarily for parity in language.
      <q>
        Our research shows us that the character limit is a major cause of
        frustration for people tweeting in English, but it is not for those
        tweeting in Japanese
      </q> says Aliza Rosen, a product manager at Twitter.
    </p>

    <blockquote>
      <p>
        This is a small change, but a big move for us. 140 was an arbitrary
        choice based on the 160 character SMS limit. Proud of how thoughtful
        the team has been in solving a real problem people have when trying
        to tweet. And at the same time maintaining our brevity, speed,
        and essence!
      </p>
      <p>
        Jack Dorsey,
        Twitter <abbr title="Chief Executive Officer">CEO</abbr> -
        <time datetime="2017-09-26T11:00-07:00">11:00 AM - Sep 26, 2017</time>
        (San Fancisco)
      </p>
    </blockquote>

    <p>
      This will be the first time that Twitter directly increases the
      charactercount on tweets, but it follows a string of subtle changes
      to <em>maximize</em> the amount of content users can stuff
      inside a single tweet.
    </p>
  </body>
</html>

Exercice

Dans le fichier cartoon_physics.html, ajoutez un sommaire composé de liens vers chaque élément h2 sous la forme d'une liste à puces. Puis ajoutez un lien au niveau de chaque titre de niveau 2 permettant de revenir en haut de la page. 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Laws of Cartoon Physics</title>
  </head>
  <body>
    <h1>
      <cite>Laws of Cartoon Physics</cite>
      by Mark O'Donnell
    </h1>

    <ul>
    </ul>

    <h2>Law I</h2>
    <p>
      Any body suspended in space will remain in space until made aware
      of its situation. Then the regular laws of gravity take over.
    </p>

    <h2>Law II</h2>
    <p>
      Any body passing through solid matter (usually at high velocities)
      will leave a perforation conforming to its perimeter (the
      "silhouette of passage").
    </p>

    <h2>Law III</h2>
    <p>
      Certain bodies can pass through solid walls painted to resemble tunnel
      entrances; others cannot. Corollary: Portable holes work.
    </p>

    <h2>Law IV</h2>
    <p>
      All principles of gravity are negated by fear (i.e., scaring someone
      causes him to jump impossibly high in the air).
    </p>

    <h2>Law V</h2>
    <p>
      Any violent rearrangement of feline matter is impermanent. (In other
      words, cats heal fast and/or have an infinite number of lives.)
    </p>

    <h2>Law VI</h2>
    <p>
      Everything falls faster than an anvil. (A falling anvil will always
      land directly upon the character's head, regardless of the time
      gap between the body's and the anvil's respective drops.)
    </p>

    <h2>Law VII</h2>
    <p>
      Any vehicle on a path of travel is at a state of indeterminacy until
      an object enters a location in the path of travel. (Wolf looks both
      ways down the road, sees nothing, but gets run over by a bus as soon
      as he tries to cross.)
    </p>

    <h2>Law VIII</h2>
    <p>
      Anyone who was frozen is still alive after being thawed out.
    </p>
  </body>
</html>
Correction 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Laws of Cartoon Physics</title>
  </head>
  <body>
    <h1 id="top">
      <cite>Laws of Cartoon Physics</cite>
      by Mark O'Donnell
    </h1>

    <ul>
      <li><a href="#l1">Law I</a></li>
      <li><a href="#l2">Law II</a></li>
      <li><a href="#l3">Law III</a></li>
      <li><a href="#l4">Law IV</a></li>
      <li><a href="#l5">Law V</a></li>
      <li><a href="#l6">Law VI</a></li>
      <li><a href="#l7">Law VII</a></li>
      <li><a href="#l8">Law VIII</a></li>
    </ul>

    <h2 id="l1">Law I <a href="#top">&uparrow;</a></h2>
    <p>
      Any body suspended in space will remain in space until made aware
      of its situation. Then the regular laws of gravity take over.
    </p>

    <h2 id="l2">Law II <a href="#top">&uparrow;</a></h2>
    <p>
      Any body passing through solid matter (usually at high velocities)
      will leave a perforation conforming to its perimeter (the
      "silhouette of passage").
    </p>

    <h2 id="l3">Law III <a href="#top">&uparrow;</a></h2>
    <p>
      Certain bodies can pass through solid walls painted to resemble tunnel
      entrances; others cannot. Corollary: Portable holes work.
    </p>

    <h2 id="l4">Law IV <a href="#top">&uparrow;</a></h2>
    <p>
      All principles of gravity are negated by fear (i.e., scaring someone
      causes him to jump impossibly high in the air).
    </p>

    <h2 id="l5">Law V <a href="#top">&uparrow;</a></h2>
    <p>
      Any violent rearrangement of feline matter is impermanent. (In other
      words, cats heal fast and/or have an infinite number of lives.)
    </p>

    <h2 id="l6">Law VI <a href="#top">&uparrow;</a></h2>
    <p>
      Everything falls faster than an anvil. (A falling anvil will always
      land directly upon the character's head, regardless of the time
      gap between the body's and the anvil's respective drops.)
    </p>

    <h2 id="l7">Law VII <a href="#top">&uparrow;</a></h2>
    <p>
      Any vehicle on a path of travel is at a state of indeterminacy until
      an object enters a location in the path of travel. (Wolf looks both
      ways down the road, sees nothing, but gets run over by a bus as soon
      as he tries to cross.)
    </p>

    <h2 id="l8">Law VIII <a href="#top">&uparrow;</a></h2>
    <p>
      Anyone who was frozen is still alive after being thawed out.
    </p>
  </body>
</html>