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