Les bases du développement web : HTML, CSS et JavaScript

Le développement web repose sur trois piliers fondamentaux : HTML, CSS et JavaScript. Ces technologies permettent de créer des sites web interactifs et esthétiques. Que vous soyez débutant ou que vous souhaitiez approfondir vos connaissances, cet article vous guidera à travers les bases essentielles du développement web.

1. HTML : La structure de la page web

HTML (HyperText Markup Language) est le langage de base qui définit la structure d’une page web. Il utilise des balises pour organiser le contenu.

Principales balises HTML

<html> : Définit le début du document HTML.
<head> : Contient les métadonnées et les liens vers les fichiers CSS.
<body> : Contient le contenu visible de la page.
<h1> à <h6> : Titres de différentes tailles.
<p> : Paragraphe de texte.
<a href=""> : Lien hypertexte.
<img src="" alt=""> : Image.
<ul> et <ol> : Listes non ordonnées et ordonnées.

Exemple de base en HTML :

<!DOCTYPE html>
<html>
<head>
    <title>Ma Première Page</title>
</head>
<body>
    <h1>Bienvenue sur mon site</h1>
    <p>Ceci est un paragraphe de texte.</p>
    <a href="https://www.example.com">Cliquez ici</a>
</body>
</html>

2. CSS : La mise en forme du site

CSS (Cascading Style Sheets) est utilisé pour styliser les pages HTML et améliorer leur apparence.

Propriétés CSS essentielles

color : Définit la couleur du texte.
background-color : Change la couleur de fond.
font-size : Ajuste la taille du texte.
margin et padding : Gèrent les espacements externes et internes.
display : Définit le type d’affichage (block, inline, flex, grid…).

Exemple de CSS appliqué à une page HTML :

body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}
h1 {
    color: #333;
    text-align: center;
}
p {
    font-size: 18px;
    margin: 20px;
}

3. JavaScript : L’interactivité du site

JavaScript est un langage de programmation qui permet d’ajouter de l’interactivité à un site web.

Quelques fonctionnalités JavaScript

Manipuler le DOM (Document Object Model).
Réagir aux événements (clics, mouvements de souris, saisie clavier…).
Effectuer des requêtes asynchrones avec AJAX.

Exemple simple en JavaScript :

<button onclick="afficherMessage()">Cliquez-moi</button>
<script>
    function afficherMessage() {
        alert("Bonjour ! Vous avez cliqué sur le bouton.");
    }
</script>

4. Comment ces technologies fonctionnent ensemble ?

Un site web moderne utilise HTML pour structurer, CSS pour styliser, et JavaScript pour dynamiser. Voici un exemple combiné :

<!DOCTYPE html>
<html>
<head>
    <title>Exemple Complet</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        .btn { padding: 10px 20px; background: blue; color: white; border: none; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Bienvenue</h1>
    <p>Cliquez sur le bouton pour une alerte</p>
    <button class="btn" onclick="afficherMessage()">Cliquez-moi</button>
    <script>
        function afficherMessage() {
            alert("Bravo, vous avez combiné HTML, CSS et JavaScript !");
        }
    </script>
</body>
</html>

Conclusion

HTML, CSS et JavaScript sont les bases du développement web. En maîtrisant ces langages, vous pourrez créer des sites web modernes, interactifs et attrayants. La pratique est essentielle pour progresser, alors n’hésitez pas à expérimenter et à coder vos propres projets !

Les bases du développement web : HTML, CSS et JavaScript