Before CSS we will fix head section, namely title must be custom for every individual html page, which is also nice introduction to work with CSS code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %} DEFAULT TITLE {% endblock %}</title>
</head>
<body>
{% block content%}
<a href="{% url 'home' %}">Home</a> | <a href="{% url 'about' %}">About</a> | <a href="{% url 'contact' %}">Contact</a> |
{% block head %}
<h1>DEFAULT H1 That Can Be Substituted in Custom Pages, if you need that.</h1>
{% endblock %}
{% endblock %}
</body>
</html>
Now, let's create custom title section in, for example, home.html:
{% extends 'base.html' %}
{% block title %}
Custom Title On Home Page
{% endblock %}
{% block head %}
<h1>Custom H1 Heading from home.html</h1>
<p>Custom paragraph from home.html</p>
<p>Navigation is still provided by base template, base.html</p>
{% endblock %}
Ok, let's also have a little bit of text in custom pages, which means there must be paragraph section in base.html, too:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %} DEFAULT TITLE {% endblock %}</title>
</head>
<body>
{% block content%}
<a href="{% url 'home' %}">Home</a> | <a href="{% url 'about' %}">About</a> | <a href="{% url 'contact' %}">Contact</a> |
{% block head %}
<h1>DEFAULT H1 That Can Be Substituted in Custom Pages, if you need that.</h1>
{% endblock %}
{% block para %}
<p>Lorem ipsum dolor sit amet, bla bla bla...</p>
{% endblock %}
{% endblock %}
</body>
</html>
Which means that we can use it in home.html for numerous custom paragraphs:
{% extends 'base.html' %}
{% block title %}
Custom Title On Home Page
{% endblock %}
{% block head %}
<h1>Custom H1 Heading from home.html</h1>
{% endblock %}
{% block para %}
<p>Custom Lorem Ipsum - First One....</p>
<p>Custom Lorem Ipsum - Second One....</p>
{% endblock %}
Nice, let's bring internal CSS in, and we will improve navigation in base.html too:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %} DEFAULT TITLE {% endblock %}</title>
<style>
body {
margin: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
p {
background: lightyellow;
width: 800px;
border: 2px solid black;
padding: 8px;
margin: 2px;
margin-bottom: 10px;
}
</style>
</head>
<body>
{% block content%}
<ul>
<li><a href="{% url 'home' %}">Home</a></li>
<li><a href="{% url 'about' %}">About</a></li>
<li><a href="{% url 'contact' %}">Contact</a></li>
</ul>
{% block head %}
<h1>DEFAULT H1 That Can Be Substituted in Custom Pages, if you need that.</h1>
{% endblock %}
{% block para %}
<p>Lorem ipsum dolor sit amet, bla bla bla...</p>
{% endblock %}
{% endblock %}
</body>
</html>
No comments:
Post a Comment