📌 Introduction
In Django templates, we use:
👉 {% url %} → for navigation (dynamic links)
👉 {% static %} → for static files (CSS, JS, images)
🎯 Program Statement
👉 Use {% url %} and {% static %} template tags for navigation and static resources.
🧠 Why These Tags Are Important
| Tag | Purpose |
|---|---|
{% url %} | Avoid hardcoding URLs |
{% static %} | Load static files correctly |
⚙️ Step 1: Create Views
📁 File: views.py
🔹 Path:
myproject/myapp/views.py
🔹 Code:
from django.shortcuts import render
def home(request):
return render(request, 'home.html')
def about(request):
return render(request, 'about.html')
⚙️ Step 2: URL Mapping
📁 File: urls.py
🔹 Path:
myproject/myproject/urls.py
🔹 Code:
from django.contrib import admin
from django.urls import path
from myapp import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.home, name='home'),
path('about/', views.about, name='about'),
]
👉 Naming URLs:
name='home'
Used inside {% url %}
⚙️ Step 3: Configure Static Files
📁 File: settings.py
🔹 Path:
myproject/myproject/settings.py
🔹 Add:
STATIC_URL = '/static/'
⚙️ Step 4: Create Static Folder
📁 Structure:
myproject/
static/
css/
style.css
📁 File: style.css
🔹 Path:
myproject/static/css/style.css
🔹 Code:
body {
background-color: #f2f2f2;
font-family: Arial;
}
h1 {
color: blue;
}
⚙️ Step 5: Create Template (Home Page)
📁 File: home.html
🔹 Path:
myproject/templates/home.html
🔹 Code:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<!-- Static CSS -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<h1>Home Page</h1>
<!-- Navigation using URL tag -->
<a href="{% url 'about' %}">Go to About Page</a>
</body>
</html>
⚙️ Step 6: Create About Page
📁 File: about.html
🔹 Path:
myproject/templates/about.html
🔹 Code:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>About</title>
</head>
<body>
<h1>About Page</h1>
<a href="{% url 'home' %}">Back to Home</a>
</body>
</html>
⚙️ Step 7: Run Server
python manage.py runserver
🌐 Step 8: Output
✅ Output Features:
- Styled page (CSS applied)
- Navigation using
{% url %}
🧠 How It Works
{% url %}
<a href="{% url 'about' %}">
👉 Converts to:
/about/
{% static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
👉 Loads CSS file
URL Tag
{% url 'name' %}
Static Tag
{% load static %}
{% static 'path/file' %}
⚠️ Common Errors
❌ Forgot {% load static %}
👉 Must include:
{% load static %}
❌ URL name missing
👉 Ensure:
name='home'
❌ Wrong static path
👉 Correct:
{% static 'css/style.css' %}
❌ Hardcoding URL
❌ Wrong:
<a href="/about/">
✅ Correct:
<a href="{% url 'about' %}">
🧪 Practice Questions
- Add contact page using
{% url %} - Add image using
{% static %} - Create navigation menu
- Add multiple CSS files
🎤 Viva Questions & Answers
1. What is {% url %} tag?
It is used to generate dynamic URLs using URL names instead of hardcoding paths.
2. What is {% static %} tag?
It is used to load static files like CSS, JS, and images.
3. Why avoid hardcoding URLs?
Because URLs may change. Using {% url %} ensures flexibility.
4. What is static file?
Files like CSS, JavaScript, images that do not change dynamically.
5. Why use {% load static %}?
To enable static tag inside template.
6. What is URL naming?
Assigning name to URL patterns for easy reference.
7. What happens if static file is missing?
CSS or image will not load.
8. Can we use multiple static files?
Yes, multiple CSS and JS files can be used.
9. What is dynamic navigation?
Navigation generated using URL names instead of fixed paths.
10. Why is this important in projects?
It ensures scalable, maintainable, and dynamic web applications.
👉 Next Post: Configure Static Files and Apply CSS
👉 Back to List: Django Programs (60 Questions with Solutions)
Further Reading
Introduction to Django Framework and its Features
Examples of Array Functions in PHP
Registration Form Using PDO in PHP
Inserting Information from Multiple CheckBox Selection in a Database Table in PHP
- Angular
- ASP.NET
- C
- C#
- C++
- CSS
- Dot Net Framework
- HTML
- IoT
- Java
- JavaScript
- Kotlin
- PHP
- Power Bi
- Python
- Scratch 3.0
- TypeScript
- VB.NET