HTML (HyperText Markup Language) est la base de tout site web. Il définit la structure du contenu, comme les titres, les paragraphes, les images, et les liens. Voici un modèle de base pour commencer un site web moderne.
1.1 Création du fichier HTML
Crée un fichier index.html dans ton répertoire de projet. Voici le code HTML de base pour démarrer :
htmlCopierModifier<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mon Site Web Moderne</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#about">À propos</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="home">
<h1>Bienvenue sur mon site web moderne !</h1>
<p>Ceci est un exemple de site utilisant HTML, CSS et JavaScript.</p>
</section>
<section id="about">
<h2>À propos de moi</h2>
<p>Je suis un développeur web passionné par la création de sites modernes et interactifs.</p>
</section>
<section id="services">
<h2>Mes services</h2>
<ul>
<li>Développement web</li>
<li>Design UI/UX</li>
<li>Consultation technique</li>
</ul>
</section>
<section id="contact">
<h2>Contactez-moi</h2>
<form>
<label for="name">Nom :</label>
<input type="text" id="name" name="name" required>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<textarea name="message" id="message" placeholder="Votre message" required></textarea>
<button type="submit">Envoyer</button>
</form>
</section>
<footer>
<p>© 2025 Mon Site Web Moderne</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Ce code HTML crée la structure de base du site, incluant un en-tête avec une barre de navigation, plusieurs sections (accueil, à propos, services, contact) et un pied de page. Le fichier styles.css est lié pour le style, et un fichier script.js est inclus pour ajouter de l’interactivité avec JavaScript.
Étape 2 : Stylisation avec CSS
CSS (Cascading Style Sheets) permet de personnaliser l’apparence de ton site, notamment les couleurs, les polices, les espacements, et la disposition des éléments. Crée un fichier styles.css et ajoute le code suivant pour un design moderne et réactif.
2.1 Style de base
cssCopierModifier/* Réinitialiser les marges et les paddings */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Mise en page générale */
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}
/* Style de l'en-tête */
header {
background-color: #333;
color: white;
padding: 20px;
}
header nav ul {
list-style: none;
display: flex;
justify-content: center;
}
header nav ul li {
margin: 0 15px;
}
header nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}
header nav ul li a:hover {
text-decoration: underline;
}
/* Sections */
section {
padding: 40px 20px;
margin: 20px 0;
}
section#home {
background-color: #00aaff;
color: white;
text-align: center;
}
section#about {
background-color: #fff;
}
section#services {
background-color: #f9f9f9;
}
section#contact {
background-color: #eeeeee;
}
/* Formulaire de contact */
form {
display: flex;
flex-direction: column;
}
form input,
form textarea {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
}
form button {
padding: 10px;
background-color: #333;
color: white;
border: none;
cursor: pointer;
}
form button:hover {
background-color: #555;
}
/* Pied de page */
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: white;
}
2.2 Explication des styles
- Réinitialisation : La règle
* { margin: 0; padding: 0; }permet de supprimer les marges et les espacements par défaut des éléments HTML. - Navigation : Le menu de navigation est centré avec un fond sombre, et les liens deviennent soulignés au survol.
- Sections : Chaque section est stylisée avec des couleurs de fond distinctes et des espacements appropriés.
- Formulaire de contact : Le formulaire a des champs avec des marges et un bouton stylisé pour faciliter la saisie.
- Pied de page : Le pied de page est simple, avec du texte centré et un fond sombre.
Étape 3 : Interactivité avec JavaScript
JavaScript est utilisé pour ajouter des fonctionnalités interactives à ton site. Par exemple, tu peux valider le formulaire de contact ou ajouter des animations.
3.1 Création du fichier script.js
Voici un exemple de code JavaScript qui valide un formulaire avant de l’envoyer.
javascriptCopierModifier// Fonction de validation du formulaire
document.querySelector('form').addEventListener('submit', function(event) {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
// Vérifier que tous les champs sont remplis
if (name === "" || email === "" || message === "") {
alert("Tous les champs doivent être remplis !");
event.preventDefault(); // Empêche l'envoi du formulaire
} else {
alert("Merci de nous avoir contactés !");
}
});
3.2 Explication du JavaScript
- Écouteur d’événement : Le code utilise
addEventListenerpour écouter l’événement de soumission du formulaire. - Validation : Avant de soumettre le formulaire, il vérifie que les champs sont remplis. Si ce n’est pas le cas, un message d’alerte apparaît et l’envoi est empêché avec
event.preventDefault().
Étape 4 : Rendre le site responsive
Un site moderne doit être responsive, c’est-à-dire qu’il doit s’adapter à toutes les tailles d’écran. Utilise les media queries CSS pour ajuster la mise en page en fonction de la largeur de l’écran.
4.1 Exemple de media queries
cssCopierModifier/* Styles pour les écrans petits (mobiles) */
@media (max-width: 768px) {
header nav ul {
flex-direction: column;
text-align: center;
}
section {
padding: 20px 10px;
}
form input,
form textarea {
padding: 8px;
}
form button {
padding: 8px;
}
}
Les styles définis dans @media (max-width: 768px) s’appliqueront uniquement lorsque la largeur de l’écran est inférieure à 768 pixels (par exemple, sur des téléphones ou des tablettes).
Conclusion
En suivant ces étapes, tu peux créer un site web moderne, structuré avec HTML, stylisé avec CSS, et dynamique avec JavaScript. Ce projet de base peut être étendu avec des fonctionnalités plus avancées comme des animations, des effets de défilement, et des intégrations avec des API externes. Le plus important est d’assurer une bonne expérience utilisateur et une accessibilité sur tous les appareils.
