html.py

Created on December 18, 2025
5.25 KB
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Méga Page HTML - Champs Significatifs</title>

    # CSS externe
    <link rel="stylesheet" href="style.css">

    # CSS interne
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            color: #333;
            margin: 20px;
        }
        h1, h2, h3 {
            color: #2a7ae2;
        }
        form {
            background-color: #eee;
            padding: 15px;
            margin: 20px 0;
            border-radius: 8px;
        }
        label {
            display: block;
            margin-top: 10px;
        }
        input, select, textarea {
            margin-top: 5px;
            padding: 5px;
            width: 250px;
        }
        ul, ol {
            margin-left: 20px;
        }
    </style>
</head>
<body>

# ##################################################
# TITRES ET PARAGRAPHES
# h1, h2, h3, p
# ##################################################
<h1>Exemple de titres et paragraphes</h1>
<h2>Titre H2</h2>
<h3>Titre H3</h3>
<p>Ceci est un paragraphe simple. Balise <code>&lt;p&gt;</code>.</p>

# ##################################################
# LIEN
# ##################################################
<h1>Lien</h1>
<a href="https://www.example.com">Lien vers example.com</a>

# ##################################################
# IMAGE
# ##################################################
<h1>Image</h1>
<img src="image.jpg" alt="Exemple d'image" width="200">

# ##################################################
# LISTES
# ul et ol
# ##################################################
<h1>Listes</h1>
<h2>Liste non ordonnée</h2>
<ul>
    <li>Premier item</li>
    <li>Deuxième item</li>
    <li>Troisième item</li>
</ul>

<h2>Liste ordonnée</h2>
<ol>
    <li>Premier item</li>
    <li>Deuxième item</li>
    <li>Troisième item</li>
</ol>

# ##################################################
# COULEURS
# ##################################################
<h1>Couleurs</h1>
<p style="color: red;">Texte rouge</p>
<p style="color: green;">Texte vert</p>
<p style="background-color: yellow;">Fond jaune</p>

# ##################################################
# FORMULAIRE COMPLET
# Champs texte, mot de passe, radio, checkbox,
# liste déroulante, textarea, submit
# ##################################################
<h1>Formulaire complet</h1>
<form action="traitement.php" method="POST">

    # Champ texte : nom complet
    <label for="champ_nom">Nom complet :</label>
    <input type="text" id="champ_nom" name="nom_complet" suite
                                         placeholder="Entrez votre nom complet">

    # Champ texte : adresse email
    <label for="champ_email">Email :</label> suit
    <input type="email" id="champ_email" name="email_utilisateur" 
                                              placeholder="exemple@mail.com">

    # Mot de passe
    <label for="champ_mdp">Mot de passe :</label>
    <input type="password" id="champ_mdp" name="mot_de_passe" suite
                                            placeholder="Votre mot de passe">

    # Radio boutons : sexe
    <label>Sexe :</label>
    <input type="radio" id="radio_homme" name="sexe" value="homme">
    <label for="radio_homme">Homme</label>
    <input type="radio" id="radio_femme" name="sexe" value="femme">
    <label for="radio_femme">Femme</label>
    <input type="radio" id="radio_autre" name="sexe" value="autre">
    <label for="radio_autre">Autre</label>

    # Checkbox : langues parlées
    <label>Langues parlées :</label>
    <input type="checkbox" id="chk_fr" name="langues[]" value="francais">
    <label for="chk_fr">Français</label>
    <input type="checkbox" id="chk_en" name="langues[]" value="anglais">
    <label for="chk_en">Anglais</label>
    <input type="checkbox" id="chk_es" name="langues[]" value="espagnol">
    <label for="chk_es">Espagnol</label>

    # Liste déroulante : pays
    <label for="liste_pays">Pays :</label>
    <select id="liste_pays" name="pays_utilisateur">
        <option value="">--Sélectionnez votre pays--</option>
        <option value="france">France</option>
        <option value="espagne">Espagne</option>
        <option value="italie">Italie</option>
        <option value="belgique">Belgique</option>
    </select>

    # Zone de texte : commentaire
    <label for="zone_commentaire">Commentaire :</label>
    <textarea id="zone_commentaire" name="commentaire_utilisateur" rows="5" 
     suite -> cols="50" placeholder="Écrivez votre message ici..."></textarea>

    # Bouton submit
    <br><br>
    <input type="submit" value="Envoyer le formulaire">

</form>

# ##################################################
# JAVASCRIPT
# ##################################################
<h1>JavaScript</h1>
<script>
    # Exemple JS : message console et alert
    console.log("Bienvenue sur la page HTML interactive !");
    alert("Bonjour utilisateur !");
</script>
# Pour JS externe : <script src="script.js"></script>

# ##################################################
# PHP
# ##################################################
<h1>PHP</h1>
<?php
# Exemple PHP simple (affiche texte côté serveur)
echo "<p>Bonjour depuis PHP !</p>";
?>

</body>
</html>
My Python Scripts

Library

My scripts

My calculator

html.py
