mardi 25 septembre 2012

Les liens internes sur le blog [Hors Cours]

Je vais vous présenter ici la solution que j'ai mise au point pour créer des liens internes dans un article (exemple : le sommaire  de mon article sur les screenshots).

Voici ce que ça donne :







Bien sûr, pour la plupart d'entre vous, ce charabia ne veut rien dire... Un petit mot d'explication s'impose.

Tout ce qui se trouve en couleur se nomme HTML. Ce qui est en noir c'est le texte qui sera affiché par votre navigateur. 
Voici ce que vous voyez avec votre navigateur (Firefox, Chrome... le résultat sera le même) : 












⁈⎟ "Bon OK, mais le « HMTL » c'est quoi ? "


Et bien HTML ça veut dire : Hypertext Markup Language. 

En claire c'est un langage de description de documents qui a été créé pour encoder la mise en page de tous les sites sur lesquelles vous naviguez. Ce langage de programmation vous permet d'encoder tous les textes présents sur un site internet.

Le CSS quant à lui est un langage de mise en page de documentil va être utilisé pour créer la mise en page de votre site. Avec le HTML vous pouvez souligner, barrer... votre texte. Mais celui-ci ne vous permet pas de mettre des couleurs, de changer la taille du texte, de mettre un fond d'écran sur la page d'un site. C'est, entre autre, ce à quoi sert le CSS.

Ces deux langages travaillent donc en étroite collaboration pour vous permettre de voir les sites internet comme vous les voyez actuellement.


Si vous voulez plus d'information sur le HTML -> Wikipédia
Si vous voulez plus d'information sur le CSS -> Wikipédia
Si la programmation en HTML/CSS vous intéresse, apprenez à les dompter -> Le site du Zero






⎟ "OK j'ai compris. Et maintenant comment est-ce que je peux faire pour utiliser le code HTML pour créer mes propres liens internes ? "


Pour créer un sommaire comme le mien, tout ce que vous avez à faire c'est d'aller dans l'éditeur de votre article puis d'ouvrir l'éditeur en mode "HTML" et non en mode "rédiger"









Une fois l'éditeur passé en mode HTML, vous n'avez plus qu'à copier-coller le code que j'ai mis sur un fichier .txt -> ici



Je pense que vous avez compris la suite. Vous n'avez plus qu'à changer les titres Paragraphe Numero 1, Paragraphe Numero 2, Paragraphe Numero 3... Et de changer les intitulés de chaque lien dans le sommaire.




Pour plus de facilité ne changez pas les name="link01" et les href="#link01". Cela pourra éviter quelques problèmes.
Une fois les titres changés, insérez vos paragraphes là où c'est noté {MON INTRODUCTION} {MON PREMIER PARAGRAPHE}...



Vous pouvez également créer un retour en haut de page à la fin de votre article en introduisant ce code au fond de votre article.



->Fichier txt


‼ ⎜Attention à bien changer le lien qui est en rouge, par le lien de votre article !









Si vous avez des questions, n'hésitez pas à m'envoyer un mail ->Niamor96@gmail.com




Liens sources :

http://www.alsacreations.com/astuce/lire/5-lien-precis-page-ancre-anchor-diese.html
http://modifier-les-modeles-de-blogger.blogspot.be/2009/12/creer-un-lien-vers-une-autre-partie-d.html#lieninternemessage2
http://latarteauchips.free.fr/html/html-les-ancres.php#ancre2
http://zircon.mcli.dist.maricopa.edu/tut_fr/tut8d.html


______________________________
Article rédigé par Lafontaine Romain
Niamor96@gmail.com

Retourner en haut de l'article



3 commentaires:

  1. Bonjour, voici mes remarques.

    Au niveau du fond :
    * le HTML n'est pas un langage de programmation, mais un "langage de description de document"; pour faire un peu de programmation, il faut passer au Javascript par exemple,
    * de même, le "CSS" est un langage de "mise en page de document",
    * Mediafire "interprète" ton code HTML. Il faut vraiment le télécharger pour voir les balises,
    * ce serait sympa pour eux de mettre "l'article dont tu t'es inspiré" en lien quelque part. Toujours citer sa source. Dans ce cas-ci, c'est celle que je t'ai envoyée,
    * sinon, c'est très bien d'ajouter des choses pour les autres !

    Au niveau de la forme :
    * bons libellés et liens,
    * au niveau orthographe :
    + "[...] encoder la mise en page de tous les sites sur lesquelles vous navigueZ";
    + "[...] Avec le HTML vous pouvez souligner, barrER... votre texte [...]";
    + "[...] Pour plus de facilité ne changeZ pas les name="link01" et les [...]".

    Essaye de faire les corrections quand même,

    RépondreSupprimer
  2. Pour l'orthographe j'ai télécharger Antidote ... Donc ce n'est pas de ma faute :-o
    (Antidote n'est pas encore aussi performant que ça, il n'interprete pas le texte donc il ne sait pas dire si il faut EZ ou ER... et moi je n'ai pas fait attention, croyants qu'antidote étais un bon outil, bien chère et bien utile.)

    Et j'ai honteusement oublié les liens externes (ils étaient dans mon brouillon et j'ai oublier de le mettre dans mon article)

    Et effectivement ce n'est pas un langage de programmation. J'ai utilisé ce terme pour ne pas devoir rentrer dans les détails. Mais certe ça peut causer des amalgame puisque je n'ai pas utilisé le terme approprier... Je ferais donc la correction.

    RépondreSupprimer
  3. Le problème de l'héberger est OK... Maintenant c'est en direct download. Il suffit de cliquer sur le lien pour télécharger le fichier

    RépondreSupprimer