Comment créer votre premier site Web avec HTML, CSS et JavaScript
Créer un site Web peut sembler une tâche difficile, mais c'est en fait un processus passionnant qui peut être facilement maîtrisé ! Dans cet article, nous allons vous montrer comment créer un site Web simple en utilisant trois technologies principales : HTML, CSS et JavaScript. Vous comprendrez à quoi sert chaque fichier et comment ces technologies fonctionnent ensemble. Commençons ! 🚀
Qu'est-ce que le HTML ?
HTML (HyperText Markup Language) est la base de tout site Web. Il crée la structure de la page, indiquant où le texte, les images, les liens et d'autres éléments seront situés. Imaginez que le HTML est comme le cadre d'un bâtiment qui définit la forme de votre site. Sans ce « cadre », le site n'existera tout simplement pas.
HTML ne se soucie pas de l'apparence de la page ou des actions qu'elle effectuera. Il organise simplement le contenu et fournit une structure pour tout le reste. HTML utilise diverses balises telles que <h1>, <p>, <div>, <a> pour aider à créer du contenu sur la page.
Examinons les éléments les plus importants dont vous aurez besoin lors de la création d'un site Web :
<html>: Cette balise indique qu'il s'agit d'un document HTML. Il englobe tout le contenu de la page.
<head>: Cette section spécifie les métadonnées de la page, telles que le titre de la page, les liens de style et les scripts.
<body>: C'est ici que se trouve le contenu principal de votre site, qui sera affiché aux utilisateurs.
<h1>, <h2>, <h3> et ainsi de suite : Balises de titre utilisées pour organiser le texte.
<p>: Cette balise est utilisée pour créer des paragraphes de texte.
<a>: Un lien qui permet à l'utilisateur d'accéder à une autre page ou ressource.
Exemple de code HTML simple :
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой первый сайт</title>
</head>
<body>
<header>
<h1>Добро пожаловать на мой сайт!</h1>
</header>
<main>
<p>Это мой первый веб-сайт, и я использую HTML, CSS и JavaScript!</p>
</main>
<footer>
<p>© 2025 Все права защищены</p>
</footer>
</body>
</html>Ce code crée une page simple avec un titre, un texte et un pied de page. Il s'agit de la structure de base qui crée le contenu de la page. En structurant votre site de cette manière, vous créez une base sur laquelle vous pouvez construire tout le reste.
Qu'est-ce que CSS ?
CSS (Cascading Style Sheets) est ce qui transforme votre site Web d'un simple ensemble de texte en une page belle et pratique. Si HTML est le cadre du bâtiment, alors CSS est la finition, les couleurs, les polices et les styles qui rendent votre site attrayant.
CSS vous permet de styliser les éléments que vous avez définis en HTML. Par exemple, vous pouvez modifier la couleur d'arrière-plan de la page, définir la police du texte ou ajouter des retraits entre les éléments. CSS aide également à rendre votre site réactif afin qu'il soit bien visible sur n'importe quel appareil, qu'il s'agisse d'un ordinateur, d'une tablette ou d'un smartphone.
Principales façons d'utiliser CSS :
Inline CSS: S'applique directement à l'élément HTML, en utilisant l'attribut
style.Internal CSS: Les styles sont placés à l'intérieur de la balise <style> dans la section <head> de votre fichier HTML.
External CSS: Les styles sont stockés dans un fichier séparé qui est connecté au document HTML via la balise <link>.
Exemple de CSS pour le style du site :
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}Ce code CSS modifie l'apparence de la page : il définit la police pour l'ensemble du site, définit les couleurs de l'arrière-plan et du texte, et fixe le pied de page en bas de la page.
Qu'est-ce que JavaScript ?
JavaScript est un langage de programmation qui ajoute de l'interactivité à votre site. Avec JavaScript, vous pouvez gérer les actions des utilisateurs, créer des animations, travailler avec des données et bien plus encore.
Si HTML définit la structure et CSS définit le style, JavaScript ajoute de la « vie » à votre site. Par exemple, avec JavaScript, vous pouvez faire changer la couleur d'un bouton lorsque vous passez la souris dessus ou ouvrir une nouvelle fenêtre lorsque vous cliquez dessus.
JavaScript permet au site de répondre aux actions de l'utilisateur : clics, saisie de texte, défilement de la page et autres événements.
Exemple de JavaScript pour l'interactivité :
document.getElementById("myButton").onclick = function() {
document.getElementById("message").innerText = "You pressed the button!";
};Ce code vous permet de modifier le texte de la page lorsque l'utilisateur clique sur le bouton. JavaScript gère cet événement et effectue l'action souhaitée, et vous permet également de modifier dynamiquement le contenu de la page.
Comment tout cela fonctionne-t-il ensemble ?
Maintenant que nous avons compris chaque composant, voyons comment HTML, CSS et JavaScript fonctionnent ensemble. Pour ce faire, créons trois fichiers :
index.html — c'est un fichier qui contient la structure du site.
styles.css est un fichier qui définit l'apparence du site.
script.js — c'est un fichier qui ajoute de l'interactivité et des actions au site.
Exemple de structure de projet :
Imaginez que nous avons les fichiers suivants :
index.html — le fichier principal qui sera chargé par notre site.
styles.css — fichier qui définit le style de la page.
script.js — fichier pour ajouter de l'interactivité.
1. index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой первый сайт</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Добро пожаловать на мой сайт!</h1>
</header>
<main>
<p>Это мой первый веб-сайт!</p>
<button id="myButton">Нажми меня!</button>
<p id="message"></p>
</main>
<footer>
<p>© 2025 Все права защищены</p>
</footer>
<script src="script.js"></script>
</body>
</html>2. styles.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}3. script.js
document.getElementById("myButton").onclick = function() {
document.getElementById("message").innerText = "You pressed the button!";
};Conclusion
Félicitations ! Vous venez de créer votre premier site Web. Vous comprenez maintenant comment HTML, CSS et JavaScript fonctionnent ensemble pour créer une page Web complète. Ce n'est que le début : avec ces connaissances, vous pourrez créer des projets plus complexes et interactifs ! 🚀
N'oubliez pas que la pratique est la clé du succès. Plus vous expérimentez et créez, plus vous devenez un développeur expérimenté. Bonne chance dans votre parcours de développement Web ! 😊