Now the first thing I want to show you
is how to render HTML files.
Go ahead and create a new PyCharm project.
I've called mine "my-personal-site",
but you can call yours anything you like.
And, in the project, we're going to create a new file,
which is going to be our Python server.
So I'll call it "server.py".
And then inside our server.py,
we're going to go through all the stages
of building up a simple Flask server.
This might be a good time to revise how to do that.
So, go ahead, pause the video
and see if you can set up a simple Flask application
which just serves up "Hello World" to the homepage.
All right, so let's start from the beginning.
We'll import the Flask class from the flask application
and as usual,
I'm going to use my red light bulb
to install the Flask package.
Now, once I've done that,
I'm going to create my Flask application
by saying, app = Flask,
and then inside the initialization for my Flask application,
I'm going to put in the (__name__) of my current directory.
Next, we're going to use the route decorator
to target the home route.
And when the user hits up the home route,
we're going to render the home page.
So, inside this definition,
we're simply just going to return "Hello World".
And finally, we're ready to go ahead and check
to see if the __name__ is equal to "__main__",
then, in that case, we're going to run our app.
That's it.
That's all there is to it.
Let's go ahead and run this application,
which is our server.py.
And if we head over to this URL,
we can see "Hello World"
when we go to our homepage.
The next step is to figure out
how can we render an HTML webpage,
which is crafted inside an HTML file,
rather than simply just returning strings
or small bits of HTML elements?
Let's go into our file
and go ahead and create a new HTML file.
Now, the reason why we're creating it like this
is because it's going to add in all
of the boilerplate code that is required
to an HTML website.
So, let's go ahead and call our webpage "index.html".
And you can see, as soon as I create it,
it's added in the DOCTYPE,
it's added in the html,
the head, and the body.
Now, if this is unfamiliar to you,
be sure to check out the lessons where we covered HTML
and CSS in detail,
but I'm going to assume that all of this
is pretty straightforward by now.
Now, the first thing we're going to change
in our new website is the title.
So, I'm going to go ahead and give this a title.
You can put anything you want,
but I'm just going to put my own name here.
Now, inside the body,
I'm going to create a h1
and you can see that the HTML files
on PyCharm has that tag completion that we see here.
In my h1,
I'm just going to write "I'm Angela" (chuckles).
Pretty straightforward.
This is a complete HTML file, now.
Now, if I want to render this
instead of just "Hello World",
how would I do that?
Well, how do we find out?
As always, it's to the documentation.
In the documentation of the Quickstart for Flask,
there's a section on Rendering Templates
and this allows us to render an HTML file as a template.
There's a couple of requirements though.
The first thing is that remember that Flask is a framework
and not a library,
so it will put certain restrictions
and requirements on your code so that it will actually work.
And in this case, our HTML files,
which is known as our templates,
must be inside a folder called "templates".
That's where Flask is going to look
for it when we try to render it.
So, let's first do that.
Let's create a new directory,
which we'll call "templates", all lowercase.
And let's move our index.html into that new folder.
So, there it is.
The next thing we have to do is we have
to import this method called "render_template"
from the Flask module.
So, let's go back to our server.py.
And in addition to importing the Flask class,
let's go ahead and import the render_template method
as well.
The next thing we have to do is to,
instead of returning a string or a string
that contains HTML,
we have to call this method "render_template"
and pass in the file name that we have
and then that is going to be rendered into our website.
So, let's go ahead and do this.
Let's delete that "Hello World"
and instead, let's return the output
from this render_template method.
And inside here,
we're going to put the name of our HTML file,
which lives inside our templates folder.
That's going to be "index.html"
because that's what we called it.
Now, let's go ahead and run our code.
Alternatively, let's switch on the debug mode
so that it will refresh
and rerun our server every time we make a change.
So, let's rerun and now let's go to our website,
refresh the main page,
and you can see it's now got an h1 in here.
And in the head,
there is now the title, which is Angela,
which is the title of the tab as well.
Imagine if you had to type all of this HTML
into this return as a string.
It's pretty painful.
It doesn't have any of the assistance
that you get from your editor.
Now, here's a challenge for you.
Back on the days 41 and 42,
we learned about HTML and created some simple websites.
Now, what I want you to do
is either use one of your own HTML websites
or download my very basic CV website
from this lessons resources.
And then go to the link either on your GitHub page
or find the original HTML file
and I want you to go ahead and get hold of it.
So, if it's on GitHub,
then you can go ahead and simply save as
and save this webpage into your downloads.
Now, if it's saved as an HTML file somewhere on your system,
that's also fine.
But essentially,
what we want to do is we want to take this file,
which is an HTML file,
and we want to move it into our templates.
Now, one of the things that you'll notice
is if you downloaded this file off the internet,
then you might have to rename it,
because firstly, it's really long
and we don't want to have to type that into our code.
So, I'm going to shorten the name to "Angela".
And then, at the very end,
you can see the file extension,
at least when it comes off GitHub,
is dot htm,
and the reason for this is because some servers
don't accept four-lettered file extensions.
But it's exactly the same as .html.
So, we're going to change it to .html
and then we're going to refactor that.
So, now that we've got hold of this HTML page,
we're going to try and render it
instead of the index.html.
Pause the video and see if you can complete this
as a challenge.
All right, that's pretty simple.
All we have to do is just replace the "index.html"
to the new file, which is "angela.html",
and if that file happened to be inside a folder,
for example,
if we had a sub folder inside templates,
which we called, I don't know, "cv",
and we had this inside here,
then we would have to specify that in the file path.
If we just have it in the top level of our templates folder,
then it's as simple as what we did
with the "index.html".
So now, while our server is running in debug mode,
we can go ahead and hit "Save" on this website
and it should restart it, our server.
And now, if we go back to our main homepage
and reload the website,
you can see it's now rendering our personal CV site.
With only one exception,
what has happened to this profile picture?
It looks pretty broken.
Now, in order to be able to render static images,
we're going to have to learn how to render static files,
such as images like this.
That's what we're going do in the next lesson.