How to create an HTML link

Can someone please help me?
I want to know how to make it so that when one button is clicked, the website moves to a new screen, so I can make the project I am creating, a little more detailed.
Please may someone help me with this topic?

Is it possible or not?

Hi! You can use HTML links and create files on the Glitch editor!

<!-- add this to your HTML :) -->
<a href="/myfile.html">Link to myfile!</a>

Then, add a file called myfile.html on the editor!
Happy glitching,
Tiago

(I know its kinda necroposting but I could help anybody else opening this post)

There are plenty of ways to do this. Usually, you’re able to get away with adding an “href” to an element. HREF is “Hyperlink referral” and here is a newbie’s guide on all about this.

First of all you need your element. You’re using a button, so we’ll start with that.

Let’s add a button! With this easy 1 liner, we now have a button in our website.

<button>Hello World!</button>

Now, Let’s click the button.
Oh, no. It seems that our button doesn’t do anything. Let’s fix that, shall we?

Let’s add an anchor! We might as well format our code better so that it works better.

<a>
  <button>
    Hello World!
  </button>
</a>

Now that our button has an anchor, we can add properties to it that you usually couldn’t add!
Let’s refer our next page to our button, now. Type in the title of the html page you would like to be redirected to. If it’s in a folder, use the “/” symbol to change folders. Let’s use this example.

index.html is in the src folder, and inside the src folder is a folder called pages, and inside pages is coolstuff.html. Let’s get to coolstuff.html.

<a href="/pages/coolstuff.html">
  <button>
    Hello World!
  </button>
</a>

And now this button will bring us to that page. If the file is in the same folder:

<a href="coolstuff.html">
  <button>
    Hello World!
  </button>
</a>

And let’s say that index.html is in pages and coolstuff.html is in src. What do we do?

<a href="../coolstuff.html">
  <button>
    Hello World!
  </button>
</a>

If you put … as the folder, it will go to the child folder, or the previous folder. In this case, src is the child folder, so it goes down. You cannot type href="src/coolstuff.html" because it will look for a folder called “src” that is inside “pages”.

Alright! We have our button, but, what else can we do to change pages?

You can put an anchor on a lot of things. Our last demonstration will be with an image.
Here is all the code you need.

<a href="pages/coolstuff.html">
  <img src="your image link" alt="My cool image" style="width: 128px; height: 128px"/>
</a>

@ausome Really useful guide for beginners!

Thanks, I tried to keep it informative but not boring.

1 Like

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.