Tutoriel : Créer une page web en HTML/CSS
Introduction
Ce tutoriel vous apprendra à créer une page web simple en utilisant HTML et CSS. Vous découvrirez comment structurer votre document HTML, appliquer des styles avec CSS et visualiser votre page dans un navigateur. Ce guide est destiné aux débutants et vous servira de point de départ pour explorer davantage le développement web.
Prérequis
- Un éditeur de code (par exemple, Visual Studio Code, Sublime Text ou Atom).
- Un navigateur web moderne (Chrome, Firefox, Edge, etc.).
- Une connexion Internet pour télécharger les outils si nécessaire.
Étape 1 : Créer la structure HTML
1.1. Créer le fichier HTML
Créez un fichier nommé index.html et ajoutez-y la structure de base suivante :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma première page web</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Bienvenue sur ma page web</h1>
<p>Ceci est un tutoriel HTML/CSS</p>
</header>
<main>
<section>
<h2>Introduction</h2>
<p>Ce tutoriel vous guide dans la création d'une page web en utilisant HTML pour la structure et CSS pour la présentation.</p>
</section>
</main>
<footer>
<p>© 2025 Mon Site Web</p>
</footer>
</body>
</html>1.2. Explication
<!DOCTYPE html>: Indique au navigateur que le document est en HTML5.<head>: Contient les métadonnées, le titre de la page et le lien vers la feuille de style CSS.<body>: Contient le contenu visible de la page, structuré avec des balises<header>,<main>et<footer>.
Étape 2 : Ajouter du style avec CSS
2.1. Créer le fichier CSS
Créez un fichier nommé styles.css dans le même dossier que votre index.html. Ajoutez-y le code suivant :
/* Styles de base pour la page */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
/* Styles pour l'en-tête */
header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
/* Styles pour le contenu principal */
main {
padding: 20px;
}
/* Styles pour le pied de page */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}2.2. Explication
- Sélecteur
body: Définit la police, les marges, le remplissage, le fond et la couleur du texte pour l’ensemble de la page. - Sélecteur
header: Ajoute un fond coloré, du padding et centre le texte pour l’en-tête. - Sélecteur
main: Applique un padding pour séparer le contenu des bords de la page. - Sélecteur
footer: Définit un pied de page fixe en bas de la page, avec un fond sombre et du texte blanc.
Étape 3 : Visualiser la page dans un navigateur
- Ouvrez le dossier contenant vos fichiers
index.htmletstyles.css. - Double-cliquez sur le fichier
index.htmlpour l’ouvrir dans votre navigateur par défaut. - Vérifiez que le contenu HTML s’affiche correctement et que les styles CSS sont appliqués.
Conclusion
Vous avez maintenant créé une page web de base en utilisant HTML pour la structure et CSS pour la mise en forme. Ce tutoriel vous a permis de comprendre comment organiser vos fichiers, écrire du code HTML/CSS et visualiser votre travail dans un navigateur. À partir de là, vous pouvez explorer d’autres balises HTML, ajouter des interactions avec JavaScript ou approfondir vos compétences en design avec CSS.
