Intégration multimédia 1

582-125-HU

Semaine 3 - Liens et navigation et éléments sémantiques

La balise de lien

Afin de créer un lien vers une autre page, on utilise la balise <a>. L'attribut href est utilisé afin d'indiquer la destination du lien.

<p>Je suis étudiant au <a href="https://cegepoutaouais.qc.ca/">CÉGEP de l'Outaouais</a>.</p>

Liens externes

Afin de créer un lien externe, vers un autre site web, il faut absolument spécifier un URL complet, incluant le protocol tel que http:// ou https://.

Ouverture d'un lien dans une nouvelle fenêtre

Afin de provoquer l'ouverture d'un lien dans une nouvelle fenêtre ou un nouvel onglet, on peut ajouter l'attribut target="_blank" à notre balise <a>.

<p>Je suis étudiant au <a href="https://cegepoutaouais.qc.ca/" target="_blank">CÉGEP de l'Outaouais</a>.</p>

Lien courriel

On peut indiquer un lien vers une boîte de courriel spécifique à l'aide du préfixe mailto:.

<p>Si vous rencontrez des problèmes avec notre application, <a href="mailto:alex.turpin@gmail.com">envoyez-nous un courriel!</a></p>

Il est également possible d'indiquer d'autres détails pour le courriel tel le sujet. Plus de détails dans l'article de MDN.

Lien numéro de téléphone

On peut également indiquer un lien vers un numéro de téléphone. Ceci causera les navigateurs mobiles à proposer à l'utilisateur d'appeler le numéro en question.

<p>Si vous rencontrez des problèmes avec notre application, <a href="tel:15558675309">donnez-nous un coup de fil!</a></p>

Exercise 1

Créez une liste qui contiendra les éléments suivant:

Validez votre code HTML à l'aide du Validateur du W3C.

Liens dans une même page

Il est possible de créer un lien vers un autre endroit dans la même page. Le navigateur s'occupera de faire défiler la page au bon endroit pour nous. Cette fonctionalité n'est possible que lorsque la page est assez longue pour avoir une barre de défilement.

Premièrement, il faut identifier les éléments auxquels on voudra se rendre par lien à l'aide d'un attribut id:

<h1 id="haut">Mon site web</h1>

Ensuite, on peut créer un lien vers cet élément en utilisant un symbole carré # comme préfixe, suivi de la valeur de l'attribut id concerné:

<a href="#haut">Retour en haut</a>

Exercise 2

Créez une page web qui comporte les éléments suivants:

Validez votre code HTML à l'aide du Validateur du W3C.

Page d'accueil

La page d'accueil d'un site web est traditionellement appelée index.html.

Liens relatif

Les liens relatifs permettent de naviguer à travers les différentes pages d'un site web de façon relative, c'est à dire qu'ils agissent de façon différente selon l'emplacement de la page dans laquelle ils se trouvent.

Les exemples qui suivent utiliseront la même structure de dossier fictive:

Lien relatif dans un même dossier

On peut passer de index.html à contact.html avec le lien suivant:

<a href="contact.html">Nous contacter</a>

Lien relatif vers un sous-dossier

Si on désire passer vers une page qui se trouve dans un sous-dossier, il faut indiquer le nom du dossier suivi de la barre oblique et du nom du fichier. Par exemple, pour passer de index.html à ada_lovelace.html:

<a href="pionniers_informatique/ada_lovelace.html">Ada Lovelace</a>

On peut également nommer plusieurs sous-dossiers, toujours avec la barre oblique après chacun:

<a href="pionniers_informatique/decedes/femmes/ada_lovelace.html">Ada Lovelace</a>

Lien relatif vers un dossier parent

Si on désire "remonter" vers un dossier parent, on utilise la même technique qu'avec un sous-dossier mais on indique ../ pour chaque dossier parent qu'on souhaite "remonter".

Par exemple, pour passer de ada_lovelace.html à index.html:

<a href="../index.html">Revenir à l'accueil</a>

Liens absolus

Lorsque notre site est hébergé sur un serveur, soit en ligne sur le web ou localement, il est possible d'utiliser un lien absolu. Les liens absolus doivent commencer par la barre oblique / et permettent de naviguer vers n'importe qu'elle page d'un site, à partir de n'importe où, en utilisant la même formulation.

Quelques exemples de liens qui fonctionneront à partir de n'importe où sur le site web:

Malheureusement, ce type de lien ne pourra pas être utilisé sans serveur de développement local, mais ils seront utiles lors de cours de programmation côté serveur tel que le PHP ou l'ASP.NET.

Exercise 3

Créez un site web qui comportera les éléments suivants:

Validez votre code HTML à l'aide du Validateur du W3C.

Éléments sémantiques

Afin de structurer notre page et de permettre aux navigateurs et moteurs de recherche de la comprendre, il est important de structurer son site web à l'aide d'éléments dits "sémantiques".

Ces éléments n'offrent pas de mise en page ou de présentation visuelle, mais vont nous aider à structurer les éléments de notre page en "zones". Elles permettront aussi aux navigateurs, lecteurs d'écran et moteurs de recherche de mieux comprendre et interagir avec notre page.

Les éléments sont les suivants:

Le site OpenClassrooms offre un excellent résumé de ces éléments, ainsi qu'une image d'exemple de leur utilisation.

Exemple d'utilisations de balises sémantiques

À noter qu'il s'agit bien ici d'un exemple d'une structure de site; il n'est pas nécessaire que la navigation soit à gauche, ou bien que le site soit structuré de cette exacte façon.

Styles pour éléments sémantique

Afin de vous aider à visualiser les éléments sémantiques sur votre page web, vous pouvez inclure les styles suivants à l'intérieur de votre balise <head>.

<style>
    header, nav, section, main, article, aside, footer {
        border: 2px solid black;
        margin-bottom: 1em;
        padding: 1em;
    }

    header { background-color: #fbd7bb; }
    nav { background-color: #b7dde8; }
    section { background-color: #d8d8d8; }
    main { background-color: #AAAAAA; }
    article { background-color: #8db1e2; }
    aside { background-color: #d99690; }
    footer { background-color: #d3d3ab; }
</style>

Exercice 4

Créez le squelette d'une page. Celui-ci devrait contenir:

Une fois votre squelette finalisé, faites un copier coller afin de créer vos trois pages.

Assurez-vous que les liens de votre navigation fonctionnent bien dans vos 3 pages.

Ajoutez ensuite le contenu à chaque page, dans la bonne balise sémantique.

Validez le code HTML de toutes vos pages à l'aide du Validateur du W3C.