Djangoframework~30 mins

Static files in templates in Django - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Static files in templates

📖 Scenario: You are building a simple Django web page that needs to show a logo image and apply some styling using CSS.Static files like images and CSS must be properly linked in your HTML templates to display correctly.

🎯 Goal: Create a Django template that correctly loads static files and uses them to display a logo image and apply a CSS style.

📋 What You'll Learn

Create a Django template file named index.html.

Load the static template tag library at the top of the template.

Use the {% static %} tag to link to a CSS file named styles.css located in the static folder.

Use the {% static %} tag to display an image named logo.png located in the static folder.

Add a link tag to include the CSS file in the template's <head> section.

Add an <img> tag to show the logo image in the <body>.

💡 Why This Matters

🌍 Real World

Websites often need to include images, stylesheets, and scripts. Django's static files system helps organize and serve these files efficiently.

💼 Career

Knowing how to properly include and manage static files in Django templates is essential for web developers working with Django to build professional websites.

Progress0 / 4 steps

Create the basic HTML template

Create a Django template file named index.html with a basic HTML5 structure including <html>, <head>, and <body> tags.

Django




    
    
    Static Files Example

Need a hint?

Start with a simple HTML5 page structure with <html>, <head>, and <body> tags.

Load static template tag and link CSS file

At the very top of index.html, add the Django template tag to load static files using {% load static %}. Then inside the <head> section, add a <link> tag to include the CSS file located at static/styles.css using the {% static 'styles.css' %} tag.

Django

{% load static %}



    
    
    Static Files Example

Need a hint?

Use {% load static %} at the top to enable static file usage. Then add a <link> tag with href="{% static 'styles.css' %}" inside the <head>.

Add the logo image using static tag

Inside the <body> tag, add an <img> tag to display the image logo.png from the static folder. Use the {% static 'logo.png' %} tag for the src attribute. Add an alt attribute with the text Company Logo for accessibility.

Django

{% load static %}



    
    
    Static Files Example

Need a hint?

Use <img src="{% static 'logo.png' %}" alt="Company Logo"> inside the <body> to show the image.

Add a CSS class to the image for styling

Add a CSS class named logo to the <img> tag you created. This will allow the CSS file to style the logo image.

Django

{% load static %}



    
    
    Static Files Example

Need a hint?

Add class="logo" inside the <img> tag to connect it with CSS styling.