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.
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 © 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.
