We know that ,HTML is the user interface of any webpage. User interface will help the user to use the service of the website .Even though Django is a python based framework,we can configure the HTML and beautify the pages using CSS within the framework.As Django is a structured framework,All the Html pages of an app should be created under a folder(usually the folder will be named as templates) and the folder will be added to the BASE_DIR(base directory) so that the framework can locate the specific HTML and render the specific html page whenever the link is triggered.Now,This article discuss about the templates and static file management of the django framework and we are gonna create a sample webpage using django with html and css configaration.

First of all,a template folder should be created which acts as a container for all html pages.After create the folder,we have to add the templates folder to the base directory.In settings.py,you can find the templates setting,there will be a empty list with the key ‘DIRS’.There,we have to join the base directory with the templates.That can be done by the following code

DIRS:[os.path.join(BASE_DIR,’templates’)],

You have to import os library to join them.

RENDERING HTML PAGE

Next step,we must have a view function to render a html page.We can come with a simple view function and render a html page.To do that,we wanna create a html page inside the templates with the extension .html to make the framework know that the file is html file.

Now ,write a simple view function and render our html page.Here,render function will help us to load a html page.

The rendered html page will be

HTML INHERITANCE

A special feature in django enables HTML inheritance in Django.First of all,why HTML inheritance?Suppose we wanna create a website in a single style for all html pages,It is a sick process to write the same div tags and styles in all html pages.Instead of writing the same html code in multiple html pages,we can create a html file with the common code and inherit it .We can write the html tags which are unique for the certain page inside the block content to have a neat and maintainable html code.Let’s practically apply it.

Create a base html page for Inheritance.Base file will act as the parent file for all the other html files.Then inherit it using jinja code.(refer my Django-MVT architecture blog for jinja notation examples).Use {% include “base.html”%} as a header in the child html file to inherit the html page inside the current page.

use{%block content%} “specific content of the page”{%endblock content%} to write the specific html code of the block.This concept is exampled below with images

create a base.html file(parent file) inside the templates folder

This is a sample base html and the content outside the block content will be inherited by all the child html pages.Here.”inherited code lines ” will be passed on.

create a child html page which inherits base.html

First line in the image is used to inherit the base html file and the file specific codes which are unique to the particular html page are written inside the block content tags.The resultant html page will be

By comparing the code and output,we can differentiate the base.html and home.html files and can understand the inheritance concept.This method is simplified in the above example and it will be very handy when we are writing complex code.

STATIC FILES

Now,how can we add images and css into the html?Why fear when Django is here?Handling static files is also structured in Django.To include the static files,we must have a folder to store all static files and also,we should let the framework know about the folder.Django has a in-built static file handling architecture.Here,our job is only to add the static files to the base directory and acknowlegde the framework.

ADDING IMAGES

First of all,create a static folder inside the app ,then add few images to the folder,

Just create a folder and drag and drop a image.Now,go to settings.py file .Scroll down to the last and you can find static file variable,add the following lines of code to acknowledge the framework and add the static files with the base directory.To make the framework locate the static files,add the static folder to the base directory

Now,we go to the html page and add the image to the html page

To load the static files,use {% load static%} jinja notation.Now,we can use <img> tag to display the image.The only thing we have to look into is ,we should give the image location in jinja format.See the image to get better understanding.

Load static is used to load the static files.In the image tag,we give the source location in the jinja format — static keyword,file name.Here,static keyword is used to indicate the file is static and django-basics.png is the file name.The output willl be

CONFIGURING CSS FILES

Yeah,We have successfully inserted a static image into the html page.Now,as a final step we try to add css styling to the hml page.To add css file,we have to use link tag in the html page.CSS file will also fall under the static file category.Here we can either add the css styling in the same html page with the <style> tag.But while working in big projects,maintaining separate files is preferred.Thus,we create a separate css file and try to add some styling.

Create css file with .css extension.Link the css with html with the help of link tag.

Here,I have created a sub folder inside the static folder to separate css files from other files.To link the css file,we use link tag,Once again the reference link should be in jinja notation.{%static ‘location of the file’%}.To check whether the css is linked or not,let us change the background color in home.css file and test it.

Here,the body color is changed to aqua.As this file is linked to home.html,the styling will be reflected in the home.html file.The output will be

Yeah,we have configured the css with html.This is just for testing and you can style any number of html blocks in a html page using the above instructions.

Now,we have successfully configured html and css with our backend,In the upcoming blogs,we use this to create wonderful webapps

SUMMARY:

Rendering the html page

Inheriting a html Page

Loading static images

Linking CSS files