5. La balise lien
Un lien sert à relier les différentes pages de votre site entre elles et permet à votre visiteur de naviguer aisément entre elles ,on parlera ici de lien relatif.
Ils servent aussi à relier des pages de différents sites entre eux, comme je viens de le faire en postant un lien dans l'exemple precedent, ceci s'appelle un lien absolue.
Nous avons ici 2 pages html, l'une nommée source et l'autre cible. Elles sont toutes les deux placées dans le même dossier nommé : "site" et qui se situe à la racine de mon disque dur.
Cela peut paraître complexe, mais vous verrez qu'en réalité c'est simple avec un minimum de pratique.
Cependant je conseille très fortement de mettre pour le moment tout vos fichiers dans le même dossier.
Pour créer un lien, il faut utiliser la balise <a> .
Nous allons pour la première fois utiliser la notion d'attribut.
L'attribut et un paramètre que l'on ajoute à une balise pour lui donner des précisions nous utiliserons ici celui nommé <href>.
Il permet de définir la position du fichier que l'on cherche à relier à la page
la balise s'écrit donc de la forme suivante, attention cela change d'habituellement:
Il suffit donc de mettre le texte du lien entre les balises <a> et </a>, et d'indiquer l'adresse de la page dans le href=" ".
Nous avons fais ici un lien absolu.
Voyons maintenant le principe du lien relatif.
Pour cela rien de plus simple, il faut tout d'abord 2 fichiers en html, appelons les toto.html et titi.hmtl par exemple, ils seront dans le même dossier pour plus de simplicité.
A present observé ce code, vous devriez pouvoir le comprendre.
Dans le fichier titi je met le code suivant:
Nous avons suivi ici exactement le même principe que pour le lien absolu sauf pour l'attribut href="".
Nous y avons mis le nom du fichier que nous souhaitions visiter, en sachant qu'ils sont situés dans le même dossier.
Voila! Vous savez maintenant utiliser des liens relatifs et absolu !Vous pouvez donc naviguer entre différents sites du web ou encore sur différentes pages de ton site !
Félicitations !
Cependant... une petite question, supposons que vous aiez une page remplie de texte, que vous ne veuilliez naviguer non pas sur une page différente
ma sur la même.
Que faire ?
Rien ne sert de dérouler frénetiquement votre souris à chaque fois, il existe une manière plus rapide et bien plus efficace :
Une ancre et un "mini lien" interne à la page.
Elle permet aux visiteurs de se déplacer à l'endroit exact qu'ils le souhaitent, les FAC sont faites de cette manière par exemple.
En effet, il faut mettre un # pour informer le navigateur de la présence d'une ancre.
Ensuite, il faut placer cette ancre dans le texte à l'endroit où l'on voudrait qu'il pointe.
Pour l'introduire, on utilise l'attribut "id"
Dans le code vous remarquerez l'ajout de la taille 2, cela aurait pu être n'importe quelle autre balise du body. S'il il ne se passe rien c'est certainement car vous n'avez pas mis assez de texte pour que la barre défilante soit nécessaire.
Maintenant un petit exercice assez subtile, seriez vous capable de créer une ancre dirigeant vers une autre page?
Il suffit donc de placer l'adresse de la page avant le # puis de preciser avec "ancreSurUnAutreSite" l'endroit precis où l'on veut emmener le visiteur
A présent nous allons voir l'insertion d'une image dans une page html.
Pour cela, je vais vous présenter la balise simple
6. Les Ancres.
Tout d'abord on crée un lien habituel à la différence près du href="" :
Faite donc des tests avec vos propres choix.
*
*
*
*
*
*
*
*
*
*
*
*
Alors??
Si vous avez réussi, félicitation!
Pour les autres voici la réponse!
Soit le fichier nommé page1.html et l'ancre nommé ancreSurUnAutreSite
7. la balise image
La présence d'une balise simple n'est pas surprenante.
En effet, placer une image dans une page est une insertion, d'où la présence d'une balise simple.
Cependant pour la balise image vous devez avoir deux attributs.
Pour afficher un fichier de type png, jpg, jpeeg, gif ,seuls ces types sont supportés, il faudra utiliser la racine de balise suivante:
Les deux attributs sont " src " et " alt".
Ici , le fichier "machin" se trouve dans le dossier "images".
L'attribut "alt" est trés utile pour le referencement du site.Je vous deconseille de l'oublier.
Elle sert essentiellement au logiciel pour mal voyant, elle agrandit le texte a cette endroit afin qu'ils soit capable de mieux percevoir le site. Il est possible de relier les balises lien et celle d'insertion d'image. Vous créez alors ainsi une image cliquable !
Vous devriez pouvoir le faire.
Je conseille même de faire un test avant de lire la solution en guise d'exercice.
*
*
*
*
*
*
Vous avez maintenant acquis les bases du HTML. Nous allons maintenant passer aux nouveautés du HTML.
1,
2,
3,
4,
5,
6,
7