Previous Lesson: Lesson 57: Control Image Size In CSS
In this lesson, you’ll learn what autoescape is, why we need to use it in our code, and how to use autoescape. You’ll be amazed once we use this, I promise.
Now what if we have some headings and some paragraphs but it does not show the appropriate format like what we have now? For example:
This is not so cool. This blog post here entitled “Making My Home-Made Pizza” should have a format of a list. Because, as you can see, it has a list of ingredients and another list for the steps and procedures to bake this pizza.
But what do we do? We can’t hardcode the HTML tags here because as you can remember, we are using Python here to show each blog post’s contents:
To accomplish a uniform formatting of text, we’ll use something that’s called autoescape. At the very top, put this here on Line 1:
And then put this one at the very bottom:
We’re not do yet, no. In fact, if you try to reload the blog posts’s pages, nothing happens. How so?
HTML tags on admin
Let’s first go here on localhost:8000/admin so that I can tell you why:
Click on Blogs to see our blog posts:
Cool. Now, I’ll click on Making My Home-Made Pizza:
You’ll notice that I have the spacings (or ENTERs) here, the bullets(*) to indicate that these ingredients is a list. But it still doesn’t make our essays on the Blog page look like it. Here, we’re gonna do some HTML tags first.
So here’s the mechanics:
- h1 tags (or h2, or h4, whatever) for the headings;
- p tags will be for the paragraphs;
- ul tags for an “unordered list”, which means that the items are just bullets(*);
- ol tags for an “ordered list”, which means that the items are going to use numbers(1, 2, 3, etc.) and;
- li tags for the list items.
Making My Home-Made Pizza
So, do your thing; I’ll do mine:
Cool! This should work. But since we’re already here, I’ll do the same with the other blog posts of mine. You should, too.
My Third Blog!
Here on this blog post:
I’ve just applied the p tags here since these are just paragraphs.
Currently Learning Django!
And then here on this blog post:
I’ll just apply some p tags, too.
The AutoEscape’s Power
Remember that we can’t do anything to give our blog posts the format we want if we have no autoescape or any HTML tags? Well, let’s see now the power of what we did:
Nice! But you might notice that the copyrights in these pages are not at the center. We should do something about that.
Copyright Centered
Do this on the blogs.html:
And then, we can go ahead and copy this block of code and paste it here on our home.html:
We’ll do the same in our projects.html:
You all good? Nice. Now, let’s commit these changes to GitHub:
I tell you, this will be the last commit because our portfolio website is now complete! On the next lesson, I’ll give you a tour in my portfolio website! No tickets needed and you can enter for free! See you there!