Fiche Synthèse : Créer une page Web

Niveau : Seconde SNT

1. Structure de base d'un fichier HTML

C'est le "squelette" indispensable de toute page web. Le Head contient les réglages invisibles, le Body contient ce qui s'affiche à l'écran.

<!DOCTYPE html> <!-- Indique que c'est du HTML5 -->
<html lang="fr">
<head>
    <meta charset="UTF-8"> <!-- Gère les accents -->
    <title>Titre de mon onglet</title>

    <!-- C'est ici que l'on lie le fichier CSS -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Bienvenue sur mon site</h1>
    <p>Ceci est un paragraphe.</p>
</body>
</html>

2. Les balises HTML de base

Balise Rôle Exemple de syntaxe
<h1> à <h6> Titres (h1 est le plus gros) <h1>Titre Principal</h1>
<p> Paragraphe de texte <p>Mon texte ici.</p>
<img> Insertion d'une image <img src="image.jpg" alt="description">
<a> Lien hypertexte <a href="https://google.fr">Lien</a>
<ul> et <li> Liste à puces <ul><li>Élément</li></ul>

3. Le fichier CSS : Commandes de base

Le CSS (style.css) sert à mettre en forme les éléments HTML. On cible une balise et on change ses propriétés.

/* On cible le corps de la page */
body {
    background-color: #f0f0f0; /* Couleur de fond */
    font-family: Arial, sans-serif; /* Police de texte */
}

/* On cible tous les titres h1 */
h1 {
    color: darkblue; /* Couleur du texte */
    text-align: center; /* Alignement au centre */
    font-size: 40px; /* Taille du texte */
}

/* On cible les images */
img {
    width: 300px; /* Largeur de l'image */
    border-radius: 10px; /* Coins arrondis */
}