It is used to provide the extendibility of parent template or base template to child template.
If we want to create a master-child template in the Django application then we use extends operation in Django.
Child pages inherit the complete functionality of the base template.
Syntax of base template or master template
<html>
<head>
</head>
<body>
<div id="container">
<header>
</header>
<section>
{% block blockame %}
Content Place Holder
{% endblock %}
</section>
<footer>
</footer>
</div>
</body>
</html>
Syntax of child page:-
{% extends 'appname/parentpage.html' %}
{% block blockname %}
hello
{% endblock %}
Now I am providing the code of the base.html or master.html file:-
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/static/style.css">
</head>
<body>
<header>
<ul>
<li><a href="/userapp">Home</a></li>
<li><a href="about">About us</a></li>
<li><a href="contact">Contact us</a></li>
<li><a href="services">Services</a></li>
<li><a href="gallery">Gallery</a></li>
</ul>
<marquee><h1>We provide django training </h1></marquee>
</header>
<section>
{% block blockname %}
{% endblock %}
</section>
<footer>
</footer>
</body>
</html>
Code of index.html file:-
{% extends 'userapp/master.html' %}
{% block blockname %}
<h1>Welcome in Home page</h1>
{% endblock %}
Code of about.html:-
{% extends 'userapp/master.html' %}
{% block blockname %}
<style type="text/css">
.part1
{
width:40%;
height: 100%;
float: left;
border:1px solid red;
}
.part2
{
width: 59%;
height: 100%;
float: right;
border:1px solid red;
}
</style>
<div class="part1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="part2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
{% endblock %}
code of contact.html
{% extends 'userapp/master.html' %}
{% block blockname %}
<h1>Welcome in Contact us page</h1>
{% endblock %}
{% extends 'userapp/master.html' %}
{% block blockname %}
<h1>Welcome in Services page</h1>
{% endblock %}
POST Answer of Questions and ASK to Doubt