How To Anchor Link

Back to BFE Vault, main page…

Achor Link: How To

The Examples

the bibberty examples

Click and see below for The Examples…

Both of the above links work but were done different. We explain:

This is a place for us to remember how to do this. For years we have needed the ability to click on a link that takes the viewer down the page. We knew how to link to other pages and other websites, but our pages can get long so we needed to help viewers get down a lengthy page to the specific content they are wanting.

<h2 style=”text-align: center;”><a href=”#BIGFOOT ERUPTION“><strong>BIGFOOT ERUPTION</strong></a></h2>

Let’s talk about <h2 h2>…

<h2 h2> is holding the content. Anything between the <h2 and the h2> are all the combined commands for that line, much like a math equation and all its parts being together, separate, and yet working together.

This Creates the MUCH BIGGER FONT.

If <p2 p2> is used, then the font if normal size. The problem is that we feel we need to h2 instead because it stands out as all other content in the code version of the page, starts with <p2 and ends with p2>.

Note: It fell to a smaller font when my mouse cursor was next to it and I hit “backspace” to move it back up a couple lines and it made it into the smaller font. Sadly, in the code it then looks like the beginning of all the other lines of code. The <h2 stands out and is easier to find later in those lines of code.

We have been copying the command from the code page, see the top right tabs called Visual and code. We paste it in the new page probably while still in the coded page.

This one will always go at the top: Above the place that is lower down the page where you will be linking to.

In the above example, the words #BIGFOOT ERUPTION can be replaced with whichever is the name of the new content to be linked. It is in the above line twice, so replace it twice.

#BIGFOOT ERUPTION implies that the second line, the line you are lining down to, has been created. So the first thing you need is that.

Here is the code for that part…

<h2 id=”BIGFOOT ERUPTION” style=”text-align: center;”>BIGFOOT ERUPTION</h2>

Learn to ignore the “text-align center,” parts of this code because that is normal. If you type it in without it it will put it in for you as the line has to be centered left, right, or center.

This code is saying that you will be directed to the linked wording, in this case, Bigfoot Eruption, and the second place it says Bigfoot Eruption in the code be anything but, in the code, it still will direct you down to this Bigfoot Eruption Section. Again, “Bigfoot Eruption” is just an example.

Also, if you choose any wording, type it in normal, and then hyperlink it with #Bigfoot Eruption, or whatever you chose as the wording, then it works. Basically, you can create the code in reverse by just doing it.

So, the second coding is actually more important.

You will learn by trying that is really the best way.

*****

The examples, ready to copy together for usage:

The Examples

 <h2 id=”BIGFOOT ERUPTION” style=”text-align: center;”>BIGFOOT ERUPTION</h2>

<h2 style=”text-align: center;”><a href=”#BIGFOOT ERUPTION”><strong>BIGFOOT ERUPTION</strong></a></h2>

Note: The second one is needed. The first one, if you just type Bigfoot Eruption, or The Examples, or even something different like the bibberty examples, but highlight it, and insert the link as #Bigfoot Eruption. Duh, we feel silly, but both ways work and look at the eye opening difference in the code:

<p style=”text-align: center;”><strong><a href=”#The Examples“>The bibberty Examples</a></strong></p>

So, the thing you called it at the top of the page does not have to be identical with the # designator below.

***** 

Anchor Link; image, by Image by schroederhund from Pixabay.