Previous Lesson: Lesson 13: Get the Keyword Density Using Django

Our website is great! But not that great because we have something missing. In this lesson, you’ll know how to add a link using the anchor tags (<a></a>) in HTML!

Before we jump to our lesson, just look at how amazing our website is right now:

But, I think there’s something missing here. What if we wanted to go back and start a new count? We can just do this:

I know that hitting the back button would still be great. But, it took me 10 seconds before I can have my word count here.

Another point, I don’t want to keep on re-selecting all my previous text and delete all of that to enter a new text. It’s annoying. So what can we do?

Create a New Link Using the Anchor Tags

Right, we should create a link here. Where do you want to place it?

I think I’ll have it below that There are ____ words in your text. and above the Your Text. So let’s do it! We’ll start here in our count.html. Remember where you’re going to put it:

Okay. Now, let’s put the anchor tags here on Line 2:

And then put the name of our button in between these tags. In my case, I’ll have START NEW COUNT:

Nice. You know, I think I want to have some spaces for this line:

That’s better. Let’s see:

There’s our link! But it’s non-clickable. Why is that? Because we don’t have any URL address here on our anchor tag. So let’s make it clickable.

Clickable Link!

Here on urls.py:

Let’s add a name for our homepage:

And then, we can do this on our count.html:

Note: This is one way to add a link using the anchor tags. In fact, it’s a little advanced. Basically, you can put this link inside the double-quotes of the href=””: https://www.w3schools.com/.

Now let’s click on that button!

START NEW COUNT:

We’ve done it! You know, I think it would be better if this is a button like that COUNT button, instead of being just a link. I’m not gonna show you how to do this. In short, this is your assignment.

But, I’ll give you a clue: See home.html. And your button should look and function simply like this:

Do your best!

Tip: Do not go to the other lesson without this finished first. The next lesson is harder than this. But here’s the next lesson:

Next Lesson: Lesson 15: Create a New Page in Django

2 Replies to “Lesson 14: Add Link Using the Anchor Tags”

Leave a Reply

Your email address will not be published.