CREATION D'UN SITE WEB AVEC HTML ET CSS

I.8.LES LIENS

Nous avons vu qu’un site web est un ensemble de pages web interconnectés, nous allons voir comment créer des liens entre les pages d’un site web.
Un lien, en HTML, va généralement servir à transporter un utilisateur d’un endroit vers un autre après que celui-ci ait cliqué dessus.

I.8.1. Lien vers une autre page du site

On va examiner deux cas :

Les deux pages se trouvent dans le même dossier
Les deux pages sont dans des dossiers différents

a) Les deux pages sont situées dans le même dossier

Nous allons créer deux pages que nous enregistrerons dans le même dossier.
Dans chaque page j’ai juste écrit un peu de texte pour indiquer le numéro de la page.
Pour simplifier les choses, je crée une première page que j'appelle index;html et une deuxième page que je vais appeler cours.html

Code index.html




<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title> Page 1</title>

    </head>

    <body>

       <p> Bonjour, ici c'est la première page </p>

    </body>

</html>

Code cours.html




<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title> Page 2</title>

    </head>

    <body>

       <p> Bonjour, ici c'est la deuxième page </p>

    </body>

</html>

Rassurez-vous avoir enregistré les deux fichiers dans le même dossier (Pour moi, c’est dans le dossier TUTOS) :

Notre souci est d’atteindre la page cours.html à partir de la page index.html.
C’est la balise <a> </a> qui permet de faire des liens, elle demande l’attribut href (initiales d’Hypertexte Reference) pour indiquer le nom ou l’adresse de la page ciblée. Il suffit d’ajouter cette ligne dans le code de index.html

Le texte entre la balise ouvrante et fermante est ce qui va s’afficher (ce que l’utilisateur verra) comme le montre la figure suivante :

Il suffit de cliquer sur ce lien (Voir page2) pour se rendre à la page2.

Par défaut, le lien s'affiche en bleu souligné. Si vous avez déjà ouvert la page, le lien s'affiche en violet. Mais, on peut changer ça avec CSS.

On peut ajouter une infobulle comme on l’a vu avec les images :

b)Les deux pages sont situées dans deux dossiers différents

Examinons tous les cas possibles :

1er cas

Utilisons toujours nos deux pages, mais cette fois ci enregistrons cours.html dans un sous-dossier du dossier contenant page1.html comme le montre la figure suivante :

cours.html est située dans le dossier COURS qui est un sous-dossier du dossier contenant index.html (dans mon cas, c’est le dossier TUTOS).

Pour créer un lien, il suffit d’écrire NomDuSousDossier/nom_de_la_page_ciblée

2e cas

Supposons que cours.html se situe dans un sous-sous dossier du dossier COURS

La page index.html est située dans TUTOS et cours.html se situe dans INFO. Pour créer le lien à partir de index.html vers cours.html, on écrira :

3e cas : si la page cible se trouve dans un dossier parent :

Prenons un exemple simple : nous disposons de deux pages : index.html et page2.html, la première est située dans le sous-dossier et la deuxième se trouve dans le dossier parent :

Nous voulons créer un lien de page1 vers cours.html qui se situe dans le dossier parent par rapport à page1 (origine du lien). Dans ce cas, on écrira :

Nous voulons créer un lien de index.html (qui se situe dans INFO) vers cours.html (située dans TUTOS) :

En bref, pour ce qui concerne les liens vers une page située dans un autre dossier : on utilise le nom du dossier ou sous dossier pour descendre dans l’arborescence et on utilise ../ pour faire un pas vers l'arrière

I.8.2 Lien vers un autre site

Pour créer le lien vers un autre site, il suffit d’indiquer l’adresse du site dans l’attribut href comme le montre l’exemple suivant :

I.8.3 Lien vers une ancre (point de repère)

Une ancre est un point de repère, il est parfois intéressant d’atteindre un point précis de la page ou du site.
Par exemple, si la page est longue, on peut créer un lien permettant au visiteur d’atteindre directement le haut de la page en un clic.

Prenons l’exemple de cette page :
Copier-coller ce code dans votre éditeur de texte :




<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title> Formation en HTML et CSS</title>

    </head>

    <body>

       <h1>A propos du concepteur</h1>

       <h2>MON SITE </h2>       

       <p>C’est un groupe formé essentiellement de meilleurs étudiants de nos groupes d’étude et d’encadrement qui se sont fixés plusieurs objectifs dont le premier est celui du partage de la connaissance en Informatique et en mathématique.  </p>

       

        <p>

        Albert Einstein a dit : « Il ne faut pas faire de l’intelligence un dieu, car si celle-ci est douée de muscles puissants, elle n’a pas de personnalité » …<br/>

        Parfois, il n’existe pas de gens plus intelligents que les autres, mais c’est le travail qui nous différencie.  <br/> 

        Pour bâtir haut, il faut creuser profond et tu seras fort dans ce que tu te donnes.  </p>        

        <p>Il y a une naissance en toute connaissance, Thucydide a dit : « Avoir des connaissances sans les partager, c’est se mettre au niveau de celui qui n’a pas d’idées ». Wissen Corporation est là pour assurer votre formation, votre encadrement suivant vos désirs. </p> 

        

        <h1> LES BASES DU LANGAGE ET MODE CONSOLE </h1>

        

        <p>Wikipédia présente Visual basic comme un langage de programmation événementielle de troisième génération ainsi qu’un 

        environnement de développement intégré, créé par Microsoft pour son modèle COM. <br/>Visual basic est directement dérivé du

        BASIC (acronyme pour Beginner’s All purpose Symbolic Instruction Code ) et permet le développement rapide d’applications, la 

        création d’interfaces utilisateur graphiques, l’accès aux bases de données en utilisant les technologies DAO, 

        ADO et RDO, ainsi que la création de contrôle ou objets Active X. </p>    

        

        <p>Pour coder dans un langage de programmation, il faut des outils adaptés : un éditeur de texte, un compilateur ainsi qu’un

        débogueur.<br/> Il y a des programmes qui combinent les trois outils et ces programmes sont appelés Environnement de

        développement intégré (EDI) ou IDE en anglais, pour Integrated development Environment. </p>        

        <p>L’éditeur de texte nous permet d’écrire le code source du programme. 

        Le compilateur (Interpréteur) pour transformer le code source en binaire qui est le seul langage compréhensible par la machine. <br/> 

        Le débogueur permet de traquer les erreurs dans le programme. 

        Pour Visual basic, nous pouvons utiliser : Visual studio, Visual studio 

        Express, SharpDevelop, MonoDevelop etc. </p>

        

        <h2>I.  LES VARIABLES </h2>

        <p>Visual Basic, comme la plupart des langages de programmation, utilise des variables pour stocker des valeurs.<br/>

         Elles servent à conserver momentanément des données en mémoire.  </p>        

        <p>Pratiquement, nous pouvons supposer que déclarer des variables : c’est comme réserver des cases mémoires dans l’ordinateur 

        et dans ces cases mémoires seront stockés momentanément les valeurs saisies par les utilisateurs ou les résultats de calculs de nos

        programmes. </p>  

        

        <p>Une variable a un nom (le mot que vous utilisez pour faire référence à la valeur que la variable contient).<br/> 

        Elle a également un type de données (lequel détermine le genre des données que la variable peut stocker) et peut contenir à un 

        instant donné une valeur. </p> 

        

        <p>Vous pouvez nommer vos variables comme vous le voulez, mais il y a des règles et conseils à suivre, notamment : </p> 

        

        <ul>

            <li>Vous pouvez mettre des chiffres et des lettres dans les noms de variables mais le premier caractère doit être un 

            caractère ou le trait de soulignement (_) </li>

            <li>  N’utilisez pas d’espaces ou des symboles </li>

            <li> N’utilisez pas les mots clés de Visual basic comme noms de variables, par exemple Dim, integer, date, select etc. 

            </li>

            <li> Choisissez des noms explicites, significatifs et évocateurs qui rappellent ce que contient la variable. Par exemple 

            nombre__de_vie est explicite et ce n’est pas le cas pour ndv </li>

            <li> Evitez les abréviations </li>

       </ul>        

       

       <p> Lorsqu’Option Explicit est On c’est-à-dire activé (réglage par défaut), vous devez déclarer explicitement les variables 

       avant leurs utilisations, mais lorsqu’il est Off vous pouvez déclarer implicitement une variable en l’utilisant dans votre 

       programme. Mais il est vivement conseillé de déclarer explicitement vos variables avant de les utiliser. </p> 



    </body>

</html>

La page est assez longue, on peut donner au visiteur la possibilité de rentrer directement en haut de la page s’il est en bas.

Le lien vers une ancre se fait en deux étapes :

D’abord utiliser l’attribut id pour donner un nom à la balise (ou le point) qui va servir de repère.

Pour notre exemple, si on veut que lien puisse l’amener sur AVANT PROPOS, on doit ajouter l’attribut id pour identifier ce point de repère :

Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre.

Pour notre exemple, ajoute cette ligne avant la balise fermante de body

Et voici le résultat :

Il suffit de cliquer sur le lien et on remonte en haut de la page.

Pour créer un lien vers une ancre située dans une autre page, on écrit :

Nom_de_la_page étant le nom de la page contenant l’ancre ciblée et repère le nom de l’ancre.

I.8.4 Lien pour télécharger un fichier

I.8.4 Lien pour télécharger un fichier

Le lien se crée de la même façon que les autres liens, sauf qu’il faut juste mettre le nom du fichier à télécharger comme valeur à l’attribut href.

Supposons que le fichier à télécharger est : trigonometrie.pdf, il suffit d’écrire :

Le navigateur lancera le processus de téléchargement dès que le visiteur cliquera sur le lien.

I.8.5 Lien pour envoyer un email

I.8.5 Lien pour envoyer un email

On utilise le lien de type mailto comme le montre l’exemple ci-après :

Il suffit donc de faire commencer le lien par mailto : et d'écrire l'adresse e-mail où on peut vous contacter. Si vous cliquez sur le lien, un nouveau message vide s'ouvre, prêt à être envoyé à votre adresse e-mail.

Précédent

Suivant