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 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, you know, have fun with it. Don't get all frustrated or anything, but do give it a go. And when you, you know, if you can get it to work, great.
If you can't, also great, as long as you try a little bit. 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 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 say about page. Let's just say about me. Hi, my name is, just put your name or something.
This is fine, but 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 index HTML. We're not in the lab. We're in server 01.
So the homepage is rendering index HTML, and we're going to have the about page render about HTML. We need to write that. You could copy paste, but again, at this stage of the game, you're way better off writing the code def about.
We did this already, but way better to do it again. And return render template. We're going to render the about 01.html page.
The one that just says, hi, my name is. In index 01, add a link to the about page. Link to the route slash about not to the about HTML page.
You link to the routes. So the href value is slash about not about HTML or about 01 HTML. That's key.
It won't work otherwise. Index 01, here you go. We'll say a href about slash, no, excuse me, slash about.
And now we need to close the quote, close the opening a tag. Put the text slash a like that. That is what you see.
That's what's going to render. This a 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, I did. Okay. So this doesn't even exist in here.
Take that out. Yep, yep, yep, yep. Okay.
Take it from the top. We are going to render, you 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 index 01.html. Copy this, copy, paste.
And we're going to in the about, we're going to render about 01 index. And it's squiggling because we have not imported render template, right? Into server one. So up here, last comma render template.
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 index 01. Just refresh the browser. Click the about me link, which should hit the about route where you will see about HTML render with the about me message in there.
Check the browser URL. It should say the same as a home route slash about. 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.