TIL 16. Jan. 2023

How to move to another html by clicking an image

Problem

I was trying to make a separate html file from the main page and connect those two htmls by clicking an image in the main page.

I used a tag to make the image clickable, and also made a new page I wanted to show after clicking the image in the main page. But after typing codes, I couldn’t see the page successfully moves to the other page after clicking the image.

Main page

When clicking each image, the page that introduces the restaurant appears

Here were the codes I wrote.

index.html (html file for main page)

<div class="image-grid" id="recommend">
       <a img class="image-grid-col-2 image-grid-row-2" href="index1.html"><img src="https://img.siksinhot.com/place/1388034044161113.jpg"></a>
</div>

app.py (to connect html file to the server)

@app.route('/home1')
def home1():
    return render_template('index1.html')

What I tried & Solution

I tried to figure out which part was wrong. And I found I wrongly understood the definition of href attribute.

href = “url”

The href attribute specifies the URL of the page the link goes to.

But I wrote “index1.html”, which was the name of the html file, not the url.

So I declared the name of the url at app.py (/home1), then corrected the wrong part in index.html as well. (index1.html -> /home1)

index.html

<div class="image-grid" id="recommend">
       <a img class="image-grid-col-2 image-grid-row-2" href="/home1"><img src="https://img.siksinhot.com/place/1388034044161113.jpg"></a>
</div>

app.py

@app.route('/home1')
def home1():
    return render_template('index1.html')

What I learned

I should clearly understand the definition of each attribute, tag not to make this kind of mistake😂