Discover how to build dynamic web pages by rendering HTML templates and linking them seamlessly using Python routes. Challenge yourself to create interactive page navigation and enhance your web development skills.
Key Insights
- Create separate HTML templates (like
index01.htmlandabout01.html) to facilitate linked navigation between distinct web pages instead of raw text. - Clearly define and use Flask routes (e.g.,
/about) that render HTML templates, making sure to link directly to route URLs rather than HTML file names. - Ensure you import the required Flask functions, such as
render_template, to effectively render HTML pages within your Python server application.
Note: These materials offer prospective students a preview of how our classes are structured. Students enrolled in this course will receive access to the full set of materials, including video lectures, project-based assignments, and instructor feedback.
This is a lesson preview only. For the full lesson, purchase the course here.
Now we're on to lab 01. Now we are going to render an About page and link to it. So last lab, we made an About route with a link in the home route that just took you to the About route, but in both cases, it was just some raw text linking to another page of raw text.
Here, it’s webpage linking to another webpage. The steps are pretty clear, although you might find it a little too challenging—but I do encourage you to give it a go. Struggle with it a little bit.
You know, keep it fun. Don’t get frustrated—just give it a try. If you can get it to work, great.
If you can’t, that’s okay too—as long as you give it a try. And what I'd like you to do then is also pause the recording and then come back and you'll see me implement the solution. All right, time for the solution.
From the server 00 lab, do a Save As and call it server 01 lab. Yeah, we've done that. Now from index 01, do a Save As and call the new file about 01.
We're going to have an About page to link to. So that would be in your templates: index 01 > File > Save As. We're going to call it about 01.
Let’s call it an About page. Just say something like “About Me.” Hi, my name is—just put your name or something similar.
This is fine—just something to link to from the homepage. That's all. That's all we're looking for here.
We're going to have the home route render `index01.html`. We're not in the lab. We're in server 01.
So the homepage is rendering `index01.html`, and we're going to have the About page render `about01.html`. We need to write that. You could copy and paste, but again, at this stage of the game, you're way better off writing the code for `def about`.
We did this already, but it’s better to do it again. And return `render_template`. We're going to render the `about01.html` page.
The one that just says, "Hi, my name is…" In `index01.html`, add a link to the About page. Link to the route `/about`, not to the about HTML page.
You link to the routes. So the `href` value is `/about`, not `about.html` or `about01.html`. That's key.
It won't work otherwise. In `index01.html`, here you go. We'll say ``—no, excuse me—`/about`.
And now we need to close the quote, close the opening `` tag. Put the text and then close the `` tag like that. That is what you see.
That's what's going to render. This `` tag is going to render in the browser, and that's what you're going to click on to get to the `/about` route page to see the About message. So it's the same as last time again, except instead of linking from raw text to raw text, we're linking from webpage to webpage.
That's why we need to use `render_template` both times. We're not just returning text, right? We're returning a whole page courtesy of `render_template`. But that should be it.
Stop the currently running server and then start the next server, lab 01. Okay—oh snap.
Did I write that in the wrong spot? Yeah, I did. Okay. Yeah.
I did, I did. Okay. So this doesn't even exist in here.
Take that out. Yep, yep. Okay.
Take it from the top. We are going to render—you've got to be in the right file. I was in the server 00 file.
We need to be in the lab. `render_template`—we're going to render `index01.html`. Copy this, copy, paste.
And in the About route, we’re going to render `about01.html`. And it’s squiggling because we have not imported `render_template`, right? Into server 01. So up here, add `render_template` after the last import.
See, now it's happy. You have to import `render_template` if you're going to use it. And I guess we can leave the print statement.
That's fine. That should be it. In the browser, go back to that home URL and refresh.
And that should render `index01.html`. Just refresh the browser. Click the About Me link, which should hit the `/about` route where you will see `about01.html` render with the About Me message in there.
Check the browser URL. It should show `/about`, just like the route. Remember, the file name does not appear when you hit a route as discussed last time.
Refresh. About Me. Boom.
There you go. It works. Congrats.
There's your lab 01 done.