Simple, clean and easy to use "In-Post" linking...

in #hive-1012652 years ago

Welcome to a HTML-tutorial about linking to some points, titles or anything inside a post... which can help the readers of your post to jump directly on the subject they are looking for.

The idea to make this tuto came while surfing on all the multi-language articles i find often in the hive-link-promo-channel of the terminal. Some can be quite "messy" with all the different languages mixed up together. Which can make me dizzy at times. 🙃

IMHO, structuring a blog is most important, so the folks passing by have a easy reading, which stays in a comfortable flow.

All this can be done with some simple linking. I'm sure you know how to link to another website, so you got already the basics! It still will help when you know a little bit of HTML coding.



Version Français / Deutsche Version / Versión en Español



Let us jump right to it

This code in the box below shows you the base...

<center><sup>
<a href="#XONE" target="_self">TITLExONE</a> / <a href="#XTWO" target="_self">TITLExTWO</a> / <a href="#XTHREE" target="_self">TITLExTHREE</a>
</sup></center>

which will show on your blog like this


TITLExONE / TITLExTWO / TITLExTHREE

When you click on one of these links, it will bring you directly to the specific point in the document, where you have set an "id" like this...

<a id="XONE">TITLExONE</a>

...which will show like this

TITLExONE

Any word in your document you want to link needs this kind of reference, so the browser knows where to send you, if you click on the link. But beware: All this can become quite quickly complexe if you want the things go back and forth and so on...

Though my idea of showing you this was more, to keep a post structured in a simple way. You can try on my links i put on each another language. Hopefully the grammar is not too bad, since some are translated by deepl.com... 😁

If ever you want to start working like this, you can just copy the code here. Be sure to change the "href" to whatever word you want to use. I mostly take the word out of the title...

Probably if forgot to mention something, so if you have questions, just let me know in the comments and i'll get back to you ASAP...

Thanks for reading.



Version Français

Bienvenue dans un tutoriel HTML sur la création de liens vers des points, des titres ou tout autre élément d'un article... qui peuvent aider les lecteurs de votre article à accéder directement au sujet qu'ils recherchent.

L'idée de faire ce tuto est venue en surfant sur tous les articles multi-langues sur hive. Certains peuvent être assez désordonnés avec toutes les différentes langues mélangées ensemble. Cela peut parfois me donner le tournis.

A mon avis, la structuration d'un blog est la chose la plus importante, pour que les gens qui passent par là aient une lecture facile, qui reste dans un flux confortable.

Tout cela peut être fait avec quelques liens simples. Je suis sûr que vous savez déjà comment créer un lien vers un autre site Web, donc vous avez déjà les bases ! Cela aidera quand même si vous connaissez un peu le codage HTML.



version française / version allemande / versión en español.


Passons directement à l'action

Ce code dans l'encadré ci-dessous vous montre la base...

<center>
<sup>
<a href="#XONE" target="_self">TITLExONE</a> / <a href="#XTWO" target="_self">TITLExTWO</a> / <a href="#XTHREE" target="_self">TITLExTHREE</a>
</sup>
</center>

qui s'affichera sur votre blog comme ceci



TITLExONE / TITLExTWO / TITLExTHREE

Lorsque vous cliquez sur l'un de ces liens, il vous amènera directement au point spécifique du document, où vous avez défini un "id" comme ceci....

<a id="XONE">TITLExONE</a>

...qui s'affichera comme ceci

TITLExONE

Tout mot de votre document que vous voulez lier a besoin de ce type de référence, afin que le navigateur sache où vous envoyer, si vous cliquez sur le lien. Mais attention : Tout ceci peut devenir assez rapidement complexe si vous voulez que les choses aillent et viennent et ainsi de suite...

Bien que mon idée de vous montrer ceci était plus, pour garder un post structuré d'une manière simple. Vous pouvez essayer sur mes liens pour i mis sur une autre langue. J'espère que la grammaire n'est pas trop mauvaise, puisque certains sont traduits par deepl.com... 😁

Si jamais vous voulez commencer à travailler comme ça, vous pouvez simplement copier le code ici. Assurez-vous de changer le "href" par le mot que vous voulez utiliser. La plupart du temps, j'enlève le mot du titre...

J'ai probablement oublié de mentionner quelque chose, donc si vous avez des questions, faites-le moi savoir dans les commentaires et je vous répondrai dès que possible...

Merci de votre lecture.



Deutsche Version

Willkommen zu einem HTML-Tutorial über die Verlinkung zu gewissen Punkten, Titeln oder anderes innerhalb eines Beitrags... was den Lesern deines Beitrags helfen kann, direkt zum Thema zu springen, das er sucht.

Die Idee zu diesem Tutorial kam mir beim "surfen" in den vielen mehrsprachigen Artikeln auf Hive. Einige können ziemlich chaotisch sein mit all den verschiedenen Sprachen, die miteinander vermischt sind. Das kann manchmal schwindelig machen.

Für mich ist die Strukturierung eines Blogs das Wichtigste, damit die Leute die vorbeikommen, eine einfache Lektüre haben, die in einem angenehmen Lesefluss bleibt.

All dies kann mit ein paar einfachen Verlinkungen erreicht werden. Ich bin mir sicher, dass du bereits weisst, wie man auf eine andere Website verlinkt. Du hast also schon die Grundlagen! Trotzdem ist es hilfreich, wenn du schon ein wenig HTML-Codierung kennst.



version français / deutsche version / versión en español


Lass uns gleich loslegen

Dieser Code in der Box unten zeigt dir die Basis...

<center>
<sup>
<a href="#XONE" target="_self">TITLExONE</a> / <a href="#XTWO" target="_self">TITLExTWO</a> / <a href="#XTHREE" target="_self">TITLExTHREE</a>
</sup>
</center>

was in deinem Blog wie folgt angezeigt wird



TITLExONE / TITLExTWO / TITLExTHREE

Wenn du auf einen dieser Links klickst, bringt er dich direkt zu der bestimmten Stelle im Dokument, wo du eine "id" wie diese gesetzt hast...

<a id="XONE">TITELxONE</a>

...was dann so aussieht

TITELxONE

Jedes Wort in deinem Dokument, das du verlinken willst, braucht diese Art von Verweis, damit der Browser weiß, wohin er dich schicken soll, wenn du auf den Link klickst. Aber Vorsicht! Das Ganze kann recht schnell komplex werden, wenn du die Dinge hin und her verlinken willst und so weiter...

Allerdings war meine Idee mehr, aufzuzeigen, wie du einen Beitrag einfach strukturieren kannst. Du kannst mit meine Links in diesem Artikel versuchen, mit denen ich auf andere Sprachen verweise. Hoffentlich ist die Grammatik nicht zu schlecht, denn einige von deepl.com übersetzt sind... 😁

Wenn du jemals so arbeiten willst, kannst du den Code einfach hierher kopieren. Stelle sicher, dass du dem "href" das Wort eingibst, das du verwenden möchtest. Ich nehme meistens ein Wort aus dem Titel...

Wahrscheinlich habe ich etwas vergessen zu erwähnen, also wenn du noch Fragen hast, lasse es mich einfach in den Kommentaren wissen und ich werde mich so schnell wie möglich bei dir melden...

Danke fürs Lesen.



Versión en Español

Bienvenido a un tutorial HTML sobre cómo enlazar algunos puntos, títulos o cualquier cosa dentro de un post... que puede ayudar a los lectores de tu post a saltar directamente al tema que están buscando.

La idea de hacer este tuto vino mientras navegaba por todos los artículos en varios idiomas. Algunos pueden ser bastante desordenados con todos los diferentes idiomas mezclados. Esto puede marearme a veces.

En mi opinión, la estructuración de un blog es lo más importante, para que la gente que pase por allí tenga una lectura fácil, que se mantenga en un flujo cómodo.

Todo esto se puede hacer con unos simples enlaces. Estoy seguro de que ya sabes cómo enlazar a otro sitio web, así que ya tienes lo básico. Aún así, te ayudará saber un poco de codificación HTML.



Version Français / Deutsche Version / Versión en Español


Vayamos directamente al grano

Este código en el cuadro de abajo te muestra la base...

<center>
<sup>
<a href="#XONE" target="_self">TITLExONE</a> / <a href="#XTWO" target="_self">TITLExTWO</a> / <a href="#XTHREE" target="_self">TITLExTHREE</a>
</sup>
</center>

que se mostrará en tu blog de la siguiente manera



TITLExONE / TITLExTWO / TITLExTHREE

Cuando hagas clic en uno de estos enlaces, te llevará directamente al punto específico del documento, donde has puesto un "id" así...

<a id="XONE">TITLExONE</a>

...que se mostrará así

TITLExONE

Cualquier palabra de tu documento que quieras enlazar necesita este tipo de referencia, para que el navegador sepa a dónde enviarte, si haces clic en el enlace. Pero cuidado: Todo esto puede volverse rápidamente complejo si quieres que las cosas vayan de un lado a otro y así sucesivamente...

Aunque mi idea de mostrarte esto era más, para mantener un post estructurado de forma sencilla. Puedes probar en mis enlaces para poner en cada otro idioma. Espero que la gramática no sea tan mala, ya que algunos están traducidos por deepl.com... 😁

Si alguna vez quieres empezar a trabajar así, sólo tienes que copiar el código aquí. Asegúrate de cambiar el "href" por la palabra que quieras usar. Yo casi siempre quito la palabra del título...

Probablemente si olvidé mencionar algo, así que si tienes preguntas, sólo házmelo saber en los comentarios y te responderé lo antes posible...

Gracias por leer.



Thanks a lot to thekittygirl for offering so many awesome pictures to use... you helped me a lot for finding the post dividers i was looking for! 😁


Peace Love and Simplicity

BTW - i'm the Dude
i do what i want, when i want and how i want


A_zut_impeccable.JPG

All content is my own intellectual "property" otherwise you'll see a source indicated !

tDp_Wes.pngFYM_logo_200.pngpapillonCharity.pngSB_logo_hive_200.pngterminal_logo_200.png

- Get Your FREE ACCOUNT Today -

This Posts Rewards Go In Its Entirety to XXX !

noticeHive.jpg

Sort:  

Great post and in four languages none they less, I tip my hat to you!

untitled.gif

Hello @mondoshawan, that's interesting for me: when composing a post, it seemed that in the prview it still doesn't work to jump from one part of the post to another.
However, your post proves that it should work in peakd. Is it correct that one must first publish the post to be able to jump from one part of the post to another or should it normally already work in the preview (before publishing it)?

Is the target="self" part important? Will it otherwise open a new tab?
But anyway, for me it is importnat that the method works at all. I tried it myself some time ago, and it seemed in preview it wouldn't work.

Hi there Jaki.

Yep, in the preview it will not work yet... just when published. And you got that right with the target="self", important to keep it in the same browser window/tap.

Though i remember that something else made it not work in the beginnings. Going to think about it and find out what it was again. Keep you updated, when!

Thanks a lot for checking it out. Awesome. Let me know if you made it work.

Thanks for your helpful reply!

Yep, in the preview it will not work yet...

That prevented me from trying it our yet: I feared it wouldn't work in the end ...

Let me know if you made it work.

I will, but it might still last quite a while until then, because I plan to make an overview with table of contents over all my HIVE posts (to be able to find them fast if necessary).

Hmmm, why not make a collection on peakd for that. I'm actually thinking of making something similar with my "important" blogs...

Would definitely take less time, i guess... since not there yet neither 😁

I want to keep it simple: every 'chapter' just a table matrix of three columns containing post links without pics to be able to find everything as fast as possible.

Ah, yep that sounds easier... and one thing for sure. Avoid to mix markdown and html... that's a starter. hehehe

And btw... now i was testing it again here and it all still works fine, just my brave browser does not listen to the target attribute anymore. 😱 No idea why it started to open a new tab... definitely going to check that out laters.

Thanks for making me aware of this...