🧪 TP : Créer une page web avec HTML, CSS et JavaScript

🎯 Objectifs

🧬 Contexte

Une page web n’est pas seulement du texte : elle peut être stylée, animée et interactive. Dans ce TP, vous allez créer une page contenant un titre, des paragraphes, une image et une animation de neige réalisée en JavaScript.

Vous apprendrez ainsi le rôle de chaque langage :

🌐 Outil utilisé

Capytale : pour écrire et afficher votre code HTML.

🔧 Consignes pour utiliser Capytale

  1. Ouvrir Capytale depuis l'adresse https://capytale2.ac-paris.fr/web/c/0cab-8823341
  2. Compléter le fichier nommé index.html.
  3. Copier-coller le programme ci-dessous dans votre fichier.
  4. Cliquer sur Afficher / Exécuter pour visualiser votre page web.

Vous pouvez modifier le texte pour personnaliser votre page.

💻 Code HTML à copier


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Découverte du CSS</title>

    <style>
        body {
            background-color: lightyellow;
            font-family: Arial;
        }
        h1 {
            color: darkblue;
            text-align: center;
        }
        p {
            color: darkgreen;
            font-size: 18px;
        }
        img {
            width: 180px;
            border: 4px solid blue;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            display: block;
            margin: 20px auto;
        }

        /* ❄️ Canvas pour la neige */
        #snow {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
        }
    </style>
</head>

<body>
    <canvas id="snow"></canvas>

    <h1>🧪 TP : Découvrir le langage JavaScript</h1>

    <p>Ce texte est stylé grâce au CSS.</p>
    <p>Modifiez les couleurs, la taille, l’alignement...</p>

    <h2>Image à styliser</h2>

    <img src="https://www.planetephysique.fr/2015/SNT2021/turtle.jpg"
         alt="image générée par Turle">

    <script>
        const canvas = document.getElementById('snow');
        const ctx = canvas.getContext('2d');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const flakes = [];

        for (let i = 0; i < 150; i++) {
            flakes.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                r: Math.random() * 3 + 1,
                d: Math.random() + 1
            });
        }

        function drawFlakes() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = "white";
            ctx.beginPath();
            for (let f of flakes) {
                ctx.moveTo(f.x, f.y);
                ctx.arc(f.x, f.y, f.r, 0, Math.PI * 2);
            }
            ctx.fill();
            moveFlakes();
        }

        function moveFlakes() {
            for (let f of flakes) {
                f.y += Math.pow(f.d, 2) + 1;
                f.x += Math.sin(f.y / 20);

                if (f.y > canvas.height) {
                    f.y = -10;
                    f.x = Math.random() * canvas.width;
                }
            }
        }

        setInterval(drawFlakes, 25);

        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
    </script>

</body>
</html>

❓ Questions

🧪 Questionnaire interactif JavaScript

Les questions suivantes vous permettent de tester vos connaissances en JavaScript. Certaines questions permettent d’exécuter votre code directement.

1) À quoi sert JavaScript dans une page web ?




2) Comment afficher un message dans une alerte ?

4) Que fait le code suivant ?

let x = 5;
let y = 3;
let z = x + y;
alert(z);



📁 Enregistrement du fichier

Nom du fichier : TP_javascript
Dossier : SNT sur le bureau de votre ordinateur