Vous savez qu'il faut écrire un paragraphe (une ou plusieurs phrases) entre le couple de balises p et que la zone body peut contenir plusieurs zones p.

Dans cette partie, nous allons apprendre à créer une zone cliquable.

Afficher un lien

Les deux premières lettres de "HTML" sont "HT", l'abréviation de Hyper Text ...

Le fichier HTML est un fichier texte "hyper" [puissant], car il peut contenir un lien vers n'importe quel autre fichier situé n'importe où.

On a déjà vu, avec la balise "magique", que le fichier HTML peut être lié à un fichier CSS. Mais, on peut aussi lier un fichier HTML à un autre fichier HTML, lier une page web à une page web (pour pouvoir surfer).

Le nom de la balise qui délimite une zone cliquable est a (comme "ancre", comme l'ancre au bout de la chaîne d'un bateau). Comme, la balise <p>, la balise <a> n'est pas obligatoire, mais est toujours utilisée ! ... Puisqu'une page web normale permet d'appeler une autre page web ...

Il faut donc donner l'adresse du fichier qu'on veut voir à la balise <a>.

Quand on donne une information à une balise, il faut dire à qui on donne l'information . Dans une balise, celui qui reçoit une information s'appelle : attribut.

Les attributs sont toujours écrits dans la balise qui ouvre la zone. Une balise peut avoir plusieurs attributs (car une balise peut recevoir plusieurs informations). L'ordre des attributs au sein de la balise est sans importance.

Quasi toutes les balises disposent de l'attribut title qui permet de donner un titre à une zone. Ce titre s'affiche lorsque la souris s'arrête sur cette zone. Cet attribut n'est pas obligatoire.

Comme le nom des balises, le nom des attributs s'écrit en minuscules.

Dans la balise <a>, l'attribut obligatoire qui reçoit l'adresse d'un fichier s'appelle : href

Quand on passe une valeur (une information) à un attribut, on écrit toujours :

attribut="valeur"

Entre le nom de la balise et les couples attribut-valeur, il existe un espace.

Vous avez maintenant toutes les informations pour comprendre le code ci-dessous :

Lire une balise

<a href="page3.htm" title="Page avec un caractère chinois !">lien</a>

Analysons le code comme le fait le navigateur, caractère par caractère.

• Il sait qu'une balise est entourée des caractères "<" et ">".
• Dès qu'il lit le caractère "<", il se dit "attention", ici commence probablement une balise.
• Il lit ensuite le caractère "a".
• Il lit ensuite le caractère " " (un espace) qui est le caractère de séparation entre le nom d'une balise et le nom d'un attribut de balise.
• Il sait déjà que c'est probablement la balise "a" (avec un ou plusieurs attributs).
• Pour confirmer son impression, il attend le caractère ">" qui est le caractère qui finit la balise.
• Il sait que les informations dans une balise se donne de la façon : attribut="valeur".
• Il attend le caractère "=" et sait qu'il ne faut tenir compte des éventuels espaces avec ce signe.
• Il lit (href=), il sait que href est un nom d'attribut autorisé et obligatoire pour la balise a
  Son impression se confirme ...
• Le nom de l'attribut n'est jamais entre guillemets.
• Le nom de l'attribut est toujours un seul mot (donc sans espace).
• À chaque attribut doit correspondre une valeur.
• Il lit ("page3.htm"), il sait que page3.htm est la valeur de cet attribut (l'adresse de l'autre fichier).
• La valeur est toujours entre guillemets. Elle peut être vide = "".
• La valeur elle-même ne peut pas contenir un seul guillemet ...
• Entre le nom de l'attribut et la valeur (mise entre guillemets) existe toujours le signe "=".
• Il lit ensuite le caractère " " (un espace) qui est le caractère de séparation entre deux attributs de balise.
• Il lit (title=), il sait que title est un nom d'attribut autorisé et facultatif pour la balise a.
• Il lit ("Page avec un caractère chinois !"), il sait que Page avec un caractère chinois ! est la valeur de cet attribut (le titre de la zone cliquable)
• Il lit ensuite le caractère ">" qui est le caractère qui finit une balise.
• Il est maintenant certain qu'il a trouvé une balise a avec deux attributs.
• Il sait alors qu'il s'agit de la balise de début d'une zone cliquable.
• Il sait qu'à une balise de début doit correspondre une balise de fin.
• Puisque la balise de début est "<a>", il sait que la balise de fin sera "</a>".
• Il recherche cette balise de fin.
• Il lit "lien".
• Puis, il lit le caractère "<", il se dit "attention", ici commence probablement une balise.
• Il lit ensuite "/a".
• Il lit ensuite le caractère ">" qui est le caractère qui finit la balise.
• Il constate que la balise trouvée est "</a>".
• Il sait qu'il s'agit une balise de fin d'une zone cliquable.

• Il est maintenant certain qu'entre ces deux balises se trouve la zone cliquable.

  Ce qui est entre deux balises est le contenu des balises.
  Ce contenu peut contenir d'autres couples de balises ...
  

• Il sait qu'il doit afficher à l'écran le texte qui se trouve entre ces deux balises.

  Pour éviter un avertissement (warning) lors d'une analyse du code par un logiciel dédié (autre qu'un navigateur web), ce texte doit être différent si la valeur de l'attribut "href" est différente.

• Il sait que ce texte est "lien".
• Pour distinguer le lien (la zone cliquable) du reste du texte, il faut la distinguer.
• Par défaut, un lien est mis en bleu et est souligné.
• Si le lien a déjà été cliqué, par défaut, la couleur du lien est violet !
• Si le lien est cliqué, le navigateur affichera le fichier "page3.htm" (= le fichier appelé) situé dans le même dossier que le fichier appelant (qui contient le lien cliqué)

Voici le lien vers la page 1 (= page appelante) qui contient un lien vers la "page 2" (= page appelée) dans le second paragraphe.

Et la "page 2" contient deux liens. Ces deux autres pages contiennent aussi des liens ... Passer de page en page, en cliquant sur des liens, s'appelle "surfer".

Exercice : Regardez la "page 1" et

• Modifiez la taille de la fenêtre du navigateur
  Et constatez que le texte s'adapte à la fenêtre
• Trouvez le titre de la "page 1"
  = "Page avec liens"
• Laissez la souris un instant sur le premier lien et trouver le titre du lien
  = "Lien vers la page 2"
• Regardez attentivement le code-source de la "page 1"
  Vous devriez comprendre tout le contenu.
• Cliquez sur le second lien de la "page 1" (= ici) et modifiez la taille de la fenêtre
  Et constatez que le texte ne s'adapte pas à la fenêtre.
• Regardez attentivement le code-source de la page.
  Et, constatez qu'il n'y a aucune balise. Ce n'est pas du code HTML. C'est un simple texte !

Un navigateur peut afficher les fichiers texte ayant le format TXT ou HTML.

Il est important de comprendre la différence entre un fichier HTML et un fichier TXT.

Le fichier TXT ne s'adapte pas à la taille de la fenêtre du navigateur et ne contient aucune balise (et donc aucun lien). Avec un fichier TXT, on sait aller nulle part !

Le fichier HTML s'adapte à la taille de la fenêtre du navigateur et il contient des balises (et souvent des liens). Grâce aux liens, on peut afficher une autre page par un simple clic. On peut surfer.

L'adresse de l'autre fichier est donné à l'attribut src de la balise img.

Ce qui s'affiche toujours se trouve en haut à gauche. C'est donc l'endroit idéal pour placer un lien vers le fichier index.htm.

Vous connaissez 8 balises : html, head, meta, title, body, link, p, a

Les 25 balises différentes, utilisées sur cette page, sont : ['html', 'head', 'meta', 'link', 'title', 'body', 'div', 'header', 'p', 'a', 'article', 'em', 'strong', 'h1', 'mark', 'br', 'h2', 'pre', 'ul', 'li', 'i', 'span', 'aside', 'footer', 'script']