In this section, we will learn what are Templates in Django and where to store templates or HTML pages in Django. Along with Templates, we will also see how to handle and store Static files in Django. Static files include Javascript, CSS, Images.

So in our previous Section, we have successfully created our views in the views.py file. Let's create templates for each view in this section.

Django Templates

Django makes it possible to separate python and HTML, the python goes in views and HTML goes in templates. To link the two, Django relies on the render function and the Django Template language.

Now create a template folder inside accounts/ folder and inside template folder create registration folder and inside registration folder create signup.html and an index.html file. This folder will store all of your HTML files. The directory structure should look like below:

account/
       templates/
              registration/
                 signup.html
                 index.html

Also, create another folder inside the account app named it static and create an account folder inside the static/ folder and create a css folder inside the account folder(inner) and download the style.css file from here and move inside /static/account/css/ folder.

Now open the signup.htmland put the following code inside it:

<!-- signup.html -->

<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/png" href="/static/logo.png"/>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

<link href="/static/account/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">

</head>
<body>
    <div class="main-w3layouts wrapper">
        <h1>SignUp</h1>
        <div class="main-agileinfo">
            <div class="agileits-top">
                <form method="post">

                    {% csrf_token %}
                    {{form.as_p}}
                    <div class="wthree-text">
                        <label class="anim">
                            <input type="checkbox" class="checkbox" required="">
                            <span>I Agree To The Terms & Conditions</span>
                        </label>
                        <div class="clear"> </div>
                    </div>
                    <input type="submit" value="SIGNUP">
                </form>
                <p>Already have an Account? <a href="#"> Login Now!</a></p>
            </div>
        </div>

        <div class="w3copyright-agile">
            <p>© 2020 TeachmeBro SignUp Form. All rights reserved | Design by Team TeachmeBro</p>
        </div>

        <ul class="w3lsg-bubbles">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!-- //main -->
</body>
</html>

Now open the index.html and put the following code inside it:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
</head>
<body>

    {% if user.is_authenticated %}
        <h1>Welcome, {{user.username}} You Successfully Logged In</h1>
    {% else %}
        <h1><p><a href="{% url 'signup' %}"> Signup</a></p></h1>
    {% endif %}
</body>
</html>

That's it! we have written our first templates. Next, we only need to create a URL mapping for each view function, so will see it in our next tutorial.

In this section, we have successfullywrittenTemplates in Django. So in the next section, we will see what are **URLs** in Django.

Understanding Templates In Django

Django Templates