Ce cours a pour but d' apprendre à faire des liens en langage html afin de vous permettre de créer vous-même votre page Index à placer sur votre hébergeur de type Voilà.



Pour ce cours, j' ai seulement créer une page avec une tuile de fond.

Nous avons déjà vu comment insérer une tuile en fond de page.

Il suffit de remplacer la permière balise BODY notée ainsi <body> par cette ligne
<body background="tuile.jpg">

Et de changer si besoin, le nom de votre tuile.


Cette flèche pour marquer votre ligne

Clic gauche pour la déplacer

On commence

1 - Créer des liens

Nous allons voir les différentes manières de faire des liens en langage html.

Si vous suivez les Cours de Frontpage avec Maitouny, vous apprendrez une manière différente et plus facile sans passer par la source de la page.

* Lien n° 1 : Lien qui affiche l'url directement sur la page

Un lien est compris entre ces deux balises  <a href> et </a>

<a href="http://site.voila.fr/nomdevotresite/nomdevotredossier/nomdevotrepage.htm">
http://site.voila.fr/nomdevotresite/nomdevotredossier/nomdevotrepage.htm</a>

Modifier l'url de votre page.

Attention : la page qui sera ouverte par ce lien est notée comme cela 

a href="http://site.voila.fr/nomdevotresite/nomdevotredossier/nomdevotrepage.htm

Si vous souhaiter que le lien soit centré, inséréz le entre ces deux balises

<p align="center">     </p>

Voici mon lien pour mon exemple qui va etre centré sur la page

<p align="center"><a href="http://site.voila.fr/nomdevotresite/nomdevotredossier/nomdevotrepage.htm">
http://site.voila.fr/nomdevotresite/nomdevotredossier/nomdevotrepage.htm</a></p>

Dans Script Edit, placer le après entre les deux balises BODY 

Pour cet exemple; voici comment va s'afficher mon lien

Mon lien est centré sur la page grâce et il affiche directement l'url.

* Lien n° 2 : Lien qui affiche un texte

Pour afficher un texte à la place de l'url, le lien sera sous cette forme

<a href="http://site.voila.fr/nomdusite/nomdossier/nompage.htm">Mon Cours 1</a>

Si vous voulez le centrer, placer le entre les balises  <p align="center">  et    </p>

Voici  mon lien dans Script Edit

Et voici comment il est sur la page

* Lien n° 3 : Lien sur une image

Sur une page html; les liens sont toujours soulignés.

Ici comme le lien va se faire sur une image, nous allons éviter que notre image soit encadrée.

Voici le code à mettre et à modifier

                        <a href="http://site.voila.fr/NomSite/NomDossier/NomPage.htm">
<img border="0" src="NomImage.jpg" width="Largeur" height="Hauteur"></a>

Quelques explications

a href="http://site.voila.fr/NomSite/NomDossier/NomPage.htm  ===> Lien vers votre page

img border="0" ===> Comme le lien est sur l'image, celle ci devrait etre encadrée comme les liens sont automatiquement soulignés. C'est pourquoi, ici, nous précisons la bordure à 0.

Essayez en mettant ceci à la place  img border="1" et vous pourrez voir la différence

src="NomImage.jpg" ===> Ici, on insère une image comme nous l' avons déjà vu

width="Largeur" height="Hauteur" ===> On note les dimmensions de notre image


Voici ce que cela donne dans Script Edit Pour mon exemple



Et voici ce que j'obtiens pour mon exemple.

Le lien est fait sur le petit coeur en gif.

* Note

Les liens que nous venons de voir sont des liens directs.

C'est à dire que lorsque vous cliquez sur ce genre de lien, la page va s' afficher à la place de votre page.

Vous pouvez, si vous le souhaitez faire en sorte que le lien ouvre sur une nouvelle page.

Voici comment va se presenter votre lien
<a target="_blank" href="Votre URL">Votre texte</a>

Il suffit simplement de rajouter ceci "_blank"




2 - Créer une page Index

Comme vous le savez, Voilà supprime les sites "fantomes" qui n'ont pas de page Index.

Qu ' est - ce qu'une page INDEX ??

C'est la page d'ouverture de votre site. Celle qui le présente et qui éventuellement mène aux pages suivantes.

Pour mon exemple, j' ai créé une page toute simple avec une tuile de fond, vous pouvez aussi utiliser une page faite en cours de scripts.

( Dans les cours de Frontpage avec Maitouny, vous apprendrez à créer de jolies pages qui peuvent aussi servir pour une page index)

Cette page INDEX doit comporter des liens.

Je vous laisse le soin de la préparer à votre gout, en insérant les liens vers vos différentes pages.

Voici comment procéder.

Connectez vous à votre "Espace Membre" sur Voilà

Indiquer votre nom d'utilisateur et votre mot de passe



Puis Cliquer sur "Heberger"



Cliquer sur " Je veux gérer mes fichiers"



Puis Cliquer sur le nom de votre site



Repérer la page Index par défaut sur voilà, et cocher la case de droite comme ceci



Sur la gauche dans la "Gestion des Dossiers", cliquer sur "supprimer"



Sur la droite de votre page, cette fenètre va apparaitre.

Cliquez sur "Valider"



Une fois cette page INDEX supprimée, cliquer sur "importer des fichiers" , sans créer de répertoire.



Envoyer la page Index que vous avez créé avec si besoin les tuiles et musiques


Voici ce que j' ai envoyé : Une page htm, une tuile et un titre en format png



Cliquer sur la page index.htm

Ceci va apparaitre sur la droite



Maintenant , modifier le nom de cette page.

La nommer index.html comme ceci



Puis cliquer sur "Valider"



Voici ce que vous obtenez



Vérifier si votre page index fonctionne.

Cliquer sur " Retour à l' accueil"



Sur cette page, cliquer sur le nom de votre site.



Et vous devez arriver sur votre page Index.

Voici la mienne ICI

Et voici ce que je vois



Vous avez réussi.

Pensez à mettre cette page Index à jour lorque vous rajouterez des pages sur votre site; en insérant de nouveaux liens