Un site web sans CSS, c'est triste. Un site sans images, c'est vide. Ce type de fichiers (qui ne changent pas dynamiquement) s'appellent des fichiers statiques.
Où les ranger ?
Dans le dossier static, au même niveau que app.py et templates.
/mon_projet
app.py
/templates
base.html
/static
/css
style.css
/js
script.js
/img
logo.png
Comment les lier dans le HTML ?
⚠️ NE JAMAIS écrire le chemin en dur comme <link href="/images-data/css/style.css">.
Pourquoi ? Parce que si un jour tu déplaces ton app dans un sous-dossier, tout casse.
On utilise toujours url_for('static', filename='...').
Dans templates/base.html :
<head>
<!-- Lien vers le CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<!-- Afficher une image -->
<img src="{{ url_for('static', filename='img/logo.png') }}" alt="Mon Logo">
<!-- Lien vers le JS (souvent à la fin du body) -->
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
C'est tout ! Flask va générer automatiquement la bonne URL, peu importe où ton site est hébergé.
Bravo ! Tu maîtrises maintenant la présentation. Ton site est beau et dynamique. Mais pour l'instant, tes formulaires ne marchent pas vraiment... On va corriger ça au prochain module !
Laisser un commentaire