Navigatng between html pages is not working in Flask - html

Question

Firstly I am very new to Flask. I created a templates folder and moved all the html files there. Now i created a static folder and moved all my js files, images and css files there. Now in my index.html, I have navigation links as follows,
<div class="collapse navbar-collapse tm-nav" id="navbar-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link tm-nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="/services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="/about.html">About</a>
</li>
</ul>
</div>
Now in my app.py for page navigation I am doing something like below. When I open http://127.0.0.1:5000/ in browser, I can only see the index.html. But when I click on services or about it says "404 Not found. The requested URL was not found on the server." Please help what am I doing wrong.
from flask import Flask, render_template, Response, request, redirect, url_for
app = Flask(__name__)
#app.route("/")
def index():
return render_template('index.html')
#app.route("/services")
def services():
return render_template('services.html')
#app.route("/about")
def about():
return render_template('about.html')
I see the following in the command prompt.

Answer 1

You need to read about routing in flask here
You need to call the function attached to the URL with url_for or you can also put the direct URL there. For example /services.
<div class="collapse navbar-collapse tm-nav" id="navbar-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link tm-nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="{{url_for('services')}}">Services</a>
</li>
<li class="nav-item">
<a class="nav-link tm-nav-link" href="{{url_for('about')}}">About</a>
</li>
</ul>
</div>