Développement Front-End avec Flask : HTML et CSS

Ce guide aborde les bases du développement front-end en utilisant le framework web Flask. Il couvre la structure HTML pour la présentation du contenu et les styles CSS pour l'embellissement des pages web.

  1. Création rapide d'un site web avec Flask

Flask est un micro-framework WSGI léger qui permet de développer rapidement des applications web. Pour commencer, installez Flask à l'aide de pip :

pip install Flask

Voici un exemple de base d'application Flask :


from flask import Flask

app = Flask(__name__)

@app.route("/show/info")
def display_info():
   return "Bienvenue sur notre plateforme !"

if __name__ == '__main__':
   app.run(debug=True)

Pour rendre vos pages web plus attrayantes, vous pouvez utiliser les balises HTML. Flask facilite l'intégration de ces balises en permettant de renvoyer des fichiers HTML. Placez vos fichiers HTML dans un dossier nommé templates à la racine de votre projet.


from flask import Flask, render_template

app = Flask(__name__)

@app.route("/show/info")
def display_info():
   # Flask cherche le fichier 'index.html' dans le dossier 'templates'
   return render_template("index.html")

if __name__ == '__main__':
   app.run(debug=True)
  1. Les balises HTML fondamentales

2.1 En-tête de document

La section <head> contient des métadonnées sur le document HTML. Elle inclut le jeu de caractères et le titre de la page.


<head>
   <meta charset="UTF-8">
   <title>Ma Page Web</title>
</head>

2.2 Titres

Les balises <h1> à <h6> définissent les niveaux de titre, du plus important au moins important.


<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>

2.3 Conteneurs : div et span

  • <div> : Est un conteneur de bloc, occupant toute la largeur disponible et créant un saut de ligne.
  • <span> : Est un conteneur en ligne, occupant uniquement l'espace nécessaire à son contenu et ne créant pas de saut de ligne.

<div>Ceci est un conteneur de bloc.</div>
<span>Ceci est un conteneur en ligne.</span>

2.4 Liens hypertextes

La balise <a> permet de créer des liens vers d'autres pages ou ressources.


<!-- Lien vers un site externe -->
<a href="http://www.example.com">Visitez Example.com</a>

<!-- Lien vers une autre page de votre site -->
<a href="/contact">Contactez-nous</a>

<!-- Lien ouvrant dans un nouvel onglet -->
<a href="/about" target="_blank">À propos</a>

2.5 Images

La balise <img> est utilisée pour intégrer des images. L'attribut src spécifie le chemin de l'image, et alt fournit un texte alternatif.


<!-- Image depuis une URL externe -->
<img src="https://via.placeholder.com/150" alt="Placeholder image">

<!-- Image locale (dans le dossier 'static') -->
<img src="/static/my_image.png" alt="Mon image">

<!-- Définir la taille de l'image -->
<img src="/static/my_image.png" style="width: 100px; height: 100px;" alt="Mon image redimensionnée">

2.6 Listes

Les listes non ordonnées (<ul>) et ordonnées (<ol>) sont créées avec des éléments de liste (<li>).


<!-- Liste non ordonnée -->
<ul>
   <li>Élément 1</li>
   <li>Élément 2</li>
</ul>

<!-- Liste ordonnée -->
<ol>
   <li>Première étape</li>
   <li>Deuxième étape</li>
</ol>

2.7 Tableaux

Les tableaux sont structurés avec <table>, <thead> (en-tête), <tbody> (corps), <tr> (ligne) et <th> (cellule d'en-tête) ou <td> (cellule de données).


<table border="1">
   <thead>
       <tr>
           <th>Nom</th>
           <th>Âge</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>Alice</td>
           <td>30</td>
       </tr>
       <tr>
           <td>Bob</td>
           <td>25</td>
       </tr>
   </tbody>
</table>

2.8 Champs de formulaire

Les balises <input>, <select> et <textarea> sont utilisées pour collecter des données utilisateur.


<!-- Champs de saisie -->
<input type="text" name="username" placeholder="Nom d'utilisateur">
<input type="password" name="password">
<input type="email" name="email">
<input type="file" name="avatar">

<!-- Boutons radio (un seul choix possible par groupe) -->
<input type="radio" name="gender" value="male"> Homme
<input type="radio" name="gender" value="female"> Femme

<!-- Cases à cocher (multiples choix possibles) -->
<input type="checkbox" name="hobby" value="reading"> Lecture
<input type="checkbox" name="hobby" value="sports"> Sports

<!-- Boutons -->
<input type="button" value="Action">
<input type="submit" value="Envoyer">

<!-- Zone de texte multiligne -->
<textarea name="message" rows="4" cols="50"></textarea>

<!-- Liste déroulante -->
<select name="city">
   <option value="paris">Paris</option>
   <option value="lyon">Lyon</option>
</select>
  1. Styles CSS pour l'embellissement

CSS (Cascading Style Sheets) permet de contrôler l'apparence des éléments HTML. Il existe plusieurs façons d'appliquer des styles CSS :

3.1 Styles en ligne

Appliqués directement sur la balise HTML à l'aide de l'attribut style.


<p style="color: blue; font-size: 16px;">Texte stylisé en ligne.</p>

3.2 Styles dans l'en-tête

Utilisatino de la balise <style> dans la section <head> du document HTML.


<head>
   <meta charset="UTF-8">
   <title>Styles CSS</title>
   <style>
       .highlight {
           color: green;
           font-weight: bold;
       }
       p {
           margin-bottom: 10px;
       }
   </style>
</head>
<body>
   <p class="highlight">Texte mis en évidence.</p>
</body>

3.3 Fichiers CSS externes

Créer un fichier séparé (par exemple, style.css) et le lier dans la section <head> à l'aide de la balise <link>.


<!-- Dans le fichier 'style.css' -->
.important {
   font-size: 24px;
   color: red;
}

<!-- Dans le fichier HTML -->
<head>
   <meta charset="UTF-8">
   <title>Styles Externes</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="important">Contenu important.</div>
</body>

3.4 Sélecteurs CSS

Les sélecteurs permettent de cibler des éléments HTML spécifiques pour appliquer des styles.

  • Sélecteur d'ID : Cible un élément unique avec un ID spécifique (#myId).
  • Sélecteur de classe : Cible tous les éléments ayant une classe spécifique (.myClass).
  • Sélecteur d'élément : Cible tous les éléments d'un type donné (div, p, h1).
  • Sélecteur d'attribut : Cible les éléments basés sur leurs attributs (input[type="text"]).
  • Sélecteurs descendants : Cible des éléments imbriqués (.container p cible les paragraphes dans un conteneur).
  • Sélecteurs enfants : Cible les enfants directs (.parent > .child).

3.5 Propriétés CSS courantes

  • Dimensions : width, height.
  • Disposition : display (block, inline, inline-block, flex, grid), float, clear.
  • Typographie : color, font-size, font-weight, font-family, text-align, line-height.
  • Espacement : padding (intérieur), margin (extérieur).

Application avec Flask : Formulaire d'inscription

Pour gérer les soumissions de formulaires, Flask utilise les requêtes HTTP GET et POST. Vous pouvez récupérer les données soumises via request.form pour les requêtes POST.


from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/register', methods=['GET', 'POST'])
def register():
   if request.method == 'POST':
       # Récupérer les données du formulaire
       username = request.form.get('username')
       password = request.form.get('password')
       # ... autres champs ...

       print(f"Utilisateur: {username}, Mot de passe: {password}")
       # Traiter les données (stockage en base de données, etc.)
       return "Inscription réussie !"
   else:
       # Afficher le formulaire pour une requête GET
       return render_template('register.html')

if __name__ == '__main__':
   app.run(debug=True)
   


<!-- Fichier register.html -->
<html lang="fr">
<head>
   <meta charset="UTF-8">
   <title>Inscription</title>
   <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
   <h1>Formulaire d'inscription</h1>
   <form method="POST" action="/register">
       <div>
           Nom d'utilisateur: <input type="text" name="username" required>
       </div>
       <div>
           Mot de passe: <input type="password" name="password" required>
       </div>
       <!-- ... autres champs ... -->
       <div>
           <input type="submit" value="S'inscrire">
       </div>
   </form>
</body>
</html>

Le processus de développement front-end implique la création de la structure HTML et l'application de styles CSS pour améliorer l'expérience utilisateur.

Étiquettes: Flask HTML CSS web development frontend

Publié le 19 juillet à 07h37

Étiquettes Populaires

©2026 L'Atelier Monstre