usage of css, javascript, images in django

In the last post we have seen how to use html template in django view. In this tutorial we will learn about usage of static files in django.

Before we are going to use CSS and JavaScript, we have to know why we use them. Let's start with HTML

HTML - Hyper Text Markup Language

HTML is the basic language of the web. It describes the how a web page should look. When a browser loads the web page it reads the HTML instructions line by line and follows it to present the web page.
Once the HTML instructions in the are completed then the browser stops working, because the HTML program is over.

CSS - Cascading Style Sheets

You may arise a question that we have HTML why we need CSS.

In above picture we are comparing the HTML and HTML + CSS.
HTML just provides us basic structure of a web page, If we apply styles(CSS) to it we can make awesome web pages. 

JavaScript

By using HTML + CSS can only provide then best presentation, but user can't able to interact with the web page. Here comes our superman JavaScript.

JavaScript allows a user to interact with the web page.
For example,
mouse over me
If you mouse over the above box, it will say thanks.
By using JavaScript we can make web page more lively.
We can make animations, games, etc. by using HTML + CSS + JavaScript
Best Websites using JavaScript
http://www.filippobello.com/portfolio
http://www.legworkstudio.com/

Now, It's time to use the static files in our django application.
If you don't setup static settings yet, setup static settings in settings.py

static/img/books_back.jpg
It is the background image used in the template.
static/css/main.css
html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 85%;

  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  margin-bottom: -50px;
  background: #ece4e4;
  background-image: url("/static/img/books_back.jpg");
  background-repeat: no-repeat;
}
.footer,
.push {
  height: 50px;
}
.header{
    height: 50px;
    background: #d4d0d0;
    line-height: 2.5;
    text-align: center;
    font-size: 17pt;
    color: green;
    font-weight: 600;
}
.footer{
    line-height: 3.5;
    background: #d4d0d0;
    text-align: center;
    vertical-align: text-bottom;
}

static/js/main.js
alert("Javascript Test");
console.log("Javascript is working");

templates/home.html

{% load  static %}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
<head>
 <title> Library Management </title>
</head>
<body>
 <div class="header">Library Management</div>
    <div class="wrapper">
     <div class="container"> 
       <h2><a href="#" class="btn btn-primary">Login</a></h2>
       <h2><a href="#" class="btn btn-primary">Register</a></h2>
      </div>
     </div>
    </div>
    <div class="push"></div>
  </div>
  <footer class="footer">copyrights &copy; 2017</footer>
</body>
<script type="text/javascript" src="{% static 'js/main.js' %}"></script>
</html>


  • {% load  static %}  will load the built-in template tags from the static library.
  • static is a built-in template tag that will return the static path.
  • {% static 'css/main.css' %} is equivalent to static/css/main.css
  • If it works fine you will get an alert message.