#100DaysOfWeb in Python Transcripts
Chapter: Days 1-4: Flask Intro
Lecture: Creating a basic index.html Flask Template
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
You're probably wondering when we're getting to the more interesting stuff because at the moment, your webpage looks like it
0:06
was made by a 15 year old in 1996, right. It's nothing flash. To get that, let's create what's called a template.
0:16
A template in Flask is pretty much the file, the HTML file that you will write, that links to each one of those URLs.
0:25
So at the moment in your code, your URL for index simply returns plain text, whereas the HTML. Well, rather than code HTML into
0:36
that routes.py file we're actually going to create an index.html file as you would with a traditional website.
0:44
And then you can throw all the flashy HTML and CSS you want in there but for now, let's just go ahead and set everything up.
0:52
Within our program directory, we're going to create a directly called templates, pretty obvious. And in our templates folder
1:05
we have nothing in there obviously let's create an index.html file. And, in this file let's just give it something basic let's say.
1:22
So we have our head and then we'll have our body, okay. Right, and in that body this would be where we usually punch in all of our information
1:36
all of our HTML code, all of the text that goes on your page, all of those things right. Let's actually just put in some test information here.
1:47
Alright, one thing at a time, right so let's make this say something like this is text, we've included in our HTML file.
2:02
That way we don't want to make it the same as the other one because then we won't know, right. So, let's go body and let's close this off, come on.
2:14
Alright, so there is our file. It's nothing special. Let's just write that, okay and we'll head back to our routes.py file to relate the two.
2:27
So, right there we have our return value of "Hello Pythonistas." Now, what we want to do is we want to return that HTML file instead.
2:38
And we do that using another feature of Flask. So, that means we're going to have to actually import something here.
2:45
So let's, delete that, let's head up to the top. And, let's throw in, actually we'll put it down here from flask import render_template.
3:02
So, what this going to do, this is allowing you to render a template, render an HTML template file. Now for the traditional term template
3:11
you would assume it's a template that is carried across all of your other files. We'll get to that in a minute.
3:16
Let's just work through this one at a time, okay. All we're doing now is we're returning that template so let's go return render template.
3:28
And in here, we specify the name of that template file that we're using. In our case, we called it index.html and that's it.
3:41
So, now what we've done is we've replaced that text return of "Hello Pythonistas." We've replaced that with the index.html file.
3:54
So, let's run the app and see if that works. We've got our environment variable set. We do flask run.
4:04
Alright, so there's the actual URL we're going off with the IP. Let's bring the browser across. There's our site from before.
4:14
We refresh it now and we get the title, this is our site. And, there is the paragraph tag that we've put in our HTML code
4:22
that says this is text we've included in our HTML file. That's how we create our webpages using an actual template
4:30
and we don't have to include all of that HTML code in that simple routes.py file. So, now that you know where you can put your HTML in
4:40
you can imagine, this is where you set up your CSS and your divs and all those sorts of things which we're not going to go
4:45
to in too much detail in this course but now you know, so that's a template. That's a very basic template. Let's move on.