Linking to local html page

Question

I am trying to link to my own html page that I have created in CS50 IDE. The html code is below. I have included 8 variations on trying to find the file. All return error 404.

I have the file: "pct.html" saved under the "templates" sub-directory and in the root project directory.

The last link is to an external website and works fine.

Any help to allow the href to work - either as a straight link or within the button - is appreciated. (I was using the button because I preferred that look and feel of the page with the buttons.)

There is more html in this file which is patterned after the layout file from Pset8-Finance; however, the clicking on the link will not open the pct.html file.

        <a href="pct.html">Income needed in retirement</a>
        <a href="pct.html" class="button">Income needed in retirement</a>
        <br>
        <a href="/pct.html">Income needed in retirement</a>
        <a href="/pct.html" class="button">Income needed in retirement</a>
        <br>
        <a href="templates/pct.html">Income needed in retirement</a>
        <a href="templates/pct.html" class="button">Income needed in retirement</a>
        <br>
        <a href="/templates/pct.html">Income needed in retirement</a>
        <a href="/templates/pct.html" class="button">Income needed in retirement</a>
        <br>
        <a href="https://www.fidelity.com/viewpoints/retirement/spending-in-retirement" class="button">You need 50-80% of your income in retirement</a>
</form>

{% endblock %}

Answer 1

All static files, simply put files that does not encompass Jinja templates or any other template literals , should be placed under the folder static which then will be available via the default URL path /static/<file reference>.

In contrast, any file that utilises the Jinja or any other template library should be moved into the designated template folder and should have a corresponding route entry.

Moving the pct.html to folder static under root project directory should make the file accessible via /static/pct.html by default. Subsequently, the markup should be altered to something similar to below.

<a href="{{ url_for('static', filename='pct.html') }}">...</a>

<a href="/static/pct.html">...</a>

The Flask tutorial on Static Files should serve extensively useful for further clarifications.