Liens & ancres

C'est une des rubriques que j'ai eu le plus de mal à construire
et je pense que j'ai encore des modifications à y apporter pour la rendre plus lisible

Indispensables pour naviguer sur le ouaibe les balises "A"
ouverture <a> et fermeture </a>

  "a" comme ancre la forme la plus courante étant <a href="" ce qui donne:

En général
<a href="url ">nom du lien</a> pour le lien d'appel
url est une adresse web commençant par http:// ou par ftp://

Si le lien et l'ancre sont dans une même page
<a href=#lien> pour le lien d' appel
<a name="lien" ou <a id="lien" pour le lien d'ancrage

Lien et ancre dans une même page Voici un lien vers une ancre, lien vers un simple mot ou comme ici, une phrase contenu(s) dans un autre paragraphe de cette même page. En fait, il faut un lien d'appel ou lien dynamique et une ancre réceptrice ou lien d'ancrage code de cet ancre d'appel: <a href=#A>lien vers une ancre</a>

Pour aller sur un autre site <a href="http://www.machin.com/">machin</a>  . Dans votre page on ne verra que machin en souligné et souvent d'une autre couleur que le texte courant. Quand vous cliquerez sur ce machin vous arriverez à la page http://www.machin.com/ qui appartient à un site existant (je ne l'ai pas fait exprès)

Pour aller à une adresse e-mail Ce lien appelle le logiciel de messagerie installé par défaut de l' OS de l'internaute Je m'appelle Toto Larico et mon adresse e-mail est: toto.larico@mailpost (le nom et l'adresse e-mail sont fictifs) et je vous demande d'envoyer un courrier à mon adresse personnelle : Le code que je devrai employer pour faire ceci sera donc <a href="mailto:toto.larico@mailpost">écrivez-moi ici</a> et vous ne verrez sur la page que le lien écrivez-moi ici . Mais le nom et l'adresse sont bien fictifs cette fois-ci enfin je l'espère, autrement Toto Larico a un risque de spam dans sa messagerie Mais de plus en plus les internautes utilisent une mailbox sur le ouaibe comme Gmail ou windows live. Alors Il faut appeler une page PHP et c'est très différent

Agencer ses liens quand on programme avec un éditeur pur code

Pour aller d'une autre page à l'autre de mon propre site C'est là qu' intervient la nécessité de respecter les chemins (path en anglais) . le path qui se fait à l'aide des slash / chez Unix ou contre-slash \ (Alt Gr+8) chez Windows . Cela dépend du fait que certaines de vos pages html peuvent être enfermées ou non dans un dossier c'est-à-dire

Les pages ne sont pas renfermées dans un dossier spécifique Cela est possible pour des petits sites où tout est plus simple Vous n'avez pas à vous occuper du path (le chemin) . Comme toutes nos rubriques sont en HTML nous avons obligatoirement une qui est index.html et les autres pages se terminent aussi par l' extension .html exemple page1.html , page2.html , page3.html Pour aller de la page index.html que vous avez nommée "Accueil" par exemple à la page 3 que vous avez nommée "Mes loisirs" par exemple vous faites <a href="page3.hlml">Mes loisirs</a> ce qui donnera: Mes loisirs comme lien sur votre page d'index qui vous enverra dans la rubrique "Mes loisirs" . Pour aller de la page 2 que j'ai nommée "Mon travail" à la page d'index nommée "Accueil" je ferai <a href="index.html">Accueil</a> qui marquera comme lien dans la rubrique "Mon travail": Accueil qui bizzarrement ici me ramène en haut de page car toutes les rubriques de mon site Lauyan TOWeb (qui n'est pas un éditeur pur code) se terminent par index.html  .

Les pages HTML sont à l'intérieur d' un dossier "rubriques" par exemple Sauf index.html qui doit toujours rester à la racine du site. D'ailleurs il vaut mieux dès le début rassembler dans un même dossier général tout ce qui vous servira à construire votre site . Ce sera plus facile car vous n'aurez plus de chemin absolu à faire c-a-dire home/toto/Documents/votre_fichier ou C:\toto\Documents\votre_fichier  à chaque fois . Ce sera un chemin relatif bien plus simple pour tester chaque fichier en local avec votre navigateur ouaibe . Ce qui change dans les liens c'est d'aller de index.html vers une page dans "rubriques" et vice-versa . De la page index vers la page3: <a href="rubriques/page3.html">page 3</a> De la page 3 vers la page d'index: <a href="/index.html">Accueil</a> autrement rien ne change quand c'est un lien d'une page "rubriques" vers une autre page"rubriques" par exemple: pour aller de la page 2 à la page 3 <a href="page3.html">Mes loisirs</a>

Ranger les différents fichiers d'un site à transférer Liens coté serveur

Annonce Google

Liens vers une ancre à l'intérieur d'une même page    je suis l'autre ancre Pour aller du lien d'appel à l'ancre réceptrice dans cette même page . Dans le paragraphe d'entête j'ai fait <a href=#A>lien vers une ancre</a> Ce qui m'a inscrit:dans le paragraphe d'en haut:   lien vers une ancre et dans ce paragraphe j'ai fait <a name=A>je suis l'autre ancre</a>  avec une petite astuce pour faire disparaître le soulignement de la phrase: simplement ajouter après A "/"style=text-decoration:none . Ici, j'ai choisi comme "nom du lien", la phrase: "je suis l'autre ancre" Et comme "lien" doit être le même en haut qu'en bas, c'est ici la lettre "A". Mais avec un dièse devant, pour le lien d'appel Le "lien" peut être n'importe quelle lettre ou chiffre, minuscule ou majuscule retourner en haut de la page

Pour arriver pile-poil au titre du paragraphe d'une autre page de son site D'abord l'ancre réceptrice: <h2 id="ancre">titre de ce paragraphe</h2> Se fait aussi avec <div id= Le lien d'appel pour y arriver: <a href="http://www.machin.com/page.html#ancre">titre de ce paragraphe</a> Voici ci-dessous un lien vers le titre d'un paragraphe d'une autre rubrique de mon site Mais certains sites contiennent des centaines de fichiers

Insérer un lien dans une image Insérer un lien dans une image: Si vous savez vous servir d'outils graphiques et de dessin vous pouvez créer vous-même vos boutons . Cela pourra vous servir pour personnaliser vraiment votre site si vous vous lancez dans le Web design. Ces boutons seront souvent dans le dossier "images" et il faudra rajouter le lien vers lequel il doit pointer . Ce qui doit donner <a href="lien"> <img border="0" src="chemin/vers/l'image"></a>. En fait il est possible d'insérer n'importe quel lien dans une image-bouton du moment que le chemin vers l'image soit correct , que le lien soit valide et que le tout soit placé entre les balises <a href= et </a> .  Pour retourner en haut de cette page cliquer l'image avec une flèche code: <a href=# title="haut de page"><img border=0 src="url de l'image" alt=up ></a>

Insérer un lien dans un bloc SPAN C'est exactement le même procédé que pour une image. Les blocs SPAN sont des blocs très graphiques. Souvent les navigateurs web les assimilent à des images PNG. Je vais donc créer un rectangle de 250px de largeur, y entrer du texte et l'entourer avec les balises A. Pour faire un lien hypertexte vers une autre rubrique de mon site avec mon éditeur WySiWyG, je suis obligé (en HTML) de faire un chemin absolu c-a-dire <a href="http://www.monsite/marubrique" tandis que avec un éditeur de site pur code j'aurais pu faire le chemin relatif: <a href="marubrique.html" Ce qui va bien sur rallonger mon code: <a href="http://www.wubijacq.com/style" title="lien vers la rubrique Style design CSS"><span style="display:block;width:250px;background:#D16813;text-align:center;color:white"><br>Avez-vous du style ?<br>&nbsp;</span></a> Avez-vous du style ?       Vous pouvez vérifier en passant la souris dessus que le lien se trouve bien dans le bloc SPAN et non seulement dans le texte. D'ailleurs, il n'y a même pas de texte dans le second bloc SPAN: Comment se fait-il? Un bloc SPAN se comporte comme une image. Mais il ne peut pas être vide, il faut des caractères à l' intérieur. Si vous y mettez des <br> pour la hauteur ou des nbsp; pour la largeur le tour est joué, le bloc semble vide

retour en haut de page

statistiques who's.amung.us  Partager