Pourquoi apprendre à créer un site web en SNT ?
En Sciences Numériques et Technologie (SNT), l'un des thèmes au programme est "Internet". Et quoi de mieux pour comprendre comment fonctionne le web que de créer toi-même une page ? Contrairement à ce que tu pourrais penser, tu n'as pas besoin d'être un génie de l'informatique pour démarrer. Avec juste un éditeur de texte (comme Notepad++, VS Code ou même le Bloc-notes) et un navigateur, tu peux déjà faire des choses impressionnantes. HTML et CSS sont les langages fondamentaux du web : le premier structure le contenu (titres, paragraphes, images), le second le met en forme (couleurs, polices, mise en page). Maîtriser ces bases, c'est acquérir un super-pouvoir numérique !
Les bases indispensables du HTML
Le HTML (HyperText Markup Language) est le squelette de ta page. Il utilise des balises, placées entre chevrons < >, pour définir les éléments.
La structure minimale d'une page
Chaque document HTML commence par cette structure de base :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon titre</title>
</head>
<body>
<!-- Le contenu visible de la page va ici -->
</body>
</html>
Explications :
<!DOCTYPE html>: Indique au navigateur qu'il s'agit d'un document HTML5.<html lang="fr">: Balise racine, avec l'attribut pour préciser la langue.<head>: En-tête invisible qui contient des métadonnées (encodage, titre de l'onglet).<body>: Corps de la page, où tout le contenu visible est placé.
Les balises principales à connaître
Voici les balises HTML les plus utiles pour débuter :
- Titres :
<h1>(le plus important) à<h6>. - Paragraphe :
<p>Texte de mon paragraphe.</p> - Liste à puces :
<ul>(liste non ordonnée) avec des éléments<li>. - Lien :
<a href="https://exemple.com">Clique ici</a> - Image :
<img src="mon-image.jpg" alt="Description"> - Division :
<div>est un conteneur générique pour grouper des éléments.
Donner du style avec le CSS
Si le HTML est le squelette, le CSS (Cascading Style Sheets) est l'habillage. Il permet de définir l'apparence des éléments HTML. On peut l'écrire dans un fichier séparé (recommandé), dans une balise <style> dans le <head>, ou directement sur une balise avec l'attribut style.
La syntaxe CSS
Une règle CSS se compose d'un sélecteur (qui cible l'élément HTML) et d'une déclaration (propriété:valeur).
sélecteur {
propriété: valeur;
}
Exemple : h1 { color: blue; font-size: 2em; } rendra tous les titres <h1> en bleu et plus grands.
Propriétés CSS essentielles
Pour styliser ton premier site, concentre-toi sur ces propriétés :
- Couleur du texte :
color: red;oucolor: #FF0000; - Couleur de fond :
background-color: lightblue; - Police :
font-family: Arial, sans-serif; - Alignement du texte :
text-align: center; - Marge extérieure :
margin: 20px; - Marge intérieure :
padding: 10px; - Bordure :
border: 1px solid black;
Projet pas à pas : créer une page de présentation
Appliquons tout ça dans un mini-projet concret : une page personnelle simple.
Étape 1 : Structurer le contenu (HTML)
Crée un fichier index.html et écris ce code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma Présentation SNT</title>
</head>
<body>
<h1>Bienvenue sur ma page</h1>
<div id="presentation">
<h2>À propos de moi</h2>
<p>Je m'appelle [Ton Prénom] et je suis en classe de SNT.</p>
<ul>
<li>Passionné(e) par le numérique</li>
<li>J'aime apprendre à coder</li>
<li>Objectif : créer mon propre site</li>
</ul>
</div>
</body>
</html>
Étape 2 : Ajouter du style (CSS)
Crée un second fichier style.css. Dans le <head> de ton HTML, ajoute cette ligne pour lier les fichiers : <link rel="stylesheet" href="style.css">. Puis, dans style.css :
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f4;
margin: 40px;
}
h1 {
color: #2c3e50;
text-align: center;
}
#presentation {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
ul {
color: #34495e;
}
Ouvre ton fichier index.html dans ton navigateur. Bravo, tu viens de créer ta première page web stylisée !
Aller plus loin et bonnes pratiques
Tu maîtrises les bases ? Voici quelques pistes pour améliorer ton site et tes compétences :
- Organisation : Garde ton code propre et indenté (utilise la touche Tab).
- Commentaires : Ajoute des notes dans ton code avec
<!-- commentaire HTML -->et/* commentaire CSS */pour t'y retrouver. - Validation : Utilise des outils en ligne comme le W3C Validator pour vérifier la syntaxe de ton HTML et CSS.
- Responsive Design : Pense à ajouter
<meta name="viewport" content="width=device-width, initial-scale=1.0">dans le<head>pour que ton site s'affiche bien sur mobile. - Inspiration : Regarde le code source des sites web que tu aimes (clic droit > "Afficher le code source"). C'est un excellent moyen d'apprendre.
