# Understanding Templates In Django

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](https://blog.teachmebro.com/what-are-django-views), 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](https://raw.githubusercontent.com/altaf99/TeachmeBroStaticFiles/master/Django/css/style.css) and move inside `/static/account/css/` folder.

Now open the `signup.html `and 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 successfully `written` Templates in Django. So in the next section, we will see what are **URLs** in Django.`
