Création d'une Application Web Guidée
Introduction au développement web
Les fondations : le HTML
Chaque site web que vous visitez est construit sur une structure de base, un peu comme le squelette d'un corps humain. Cette structure est définie par un langage appelé HTML, qui signifie HyperText Markup Language. Le HTML n'est pas un langage de programmation ; c'est un langage de balisage. Il utilise des balises pour décrire les différentes parties d'une page, comme les titres, les paragraphes, les liens et les images.
Imaginez que vous construisez une maison. Le HTML serait le plan qui indique où placer les murs, les portes et les fenêtres. Il ne se soucie pas de la couleur de la peinture ou du style des meubles, seulement de la structure fondamentale.
<!DOCTYPE html>
<html>
<head>
<title>Ma Première Page</title>
</head>
<body>
<h1>Ceci est un titre principal</h1>
<p>Ceci est un paragraphe de texte.</p>
</body>
</html>
Dans cet exemple, <h1> définit un titre principal et <p> définit un paragraphe. Chaque balise ouvrante (comme <p>) a une balise fermante correspondante (</p>). Tout le contenu visible de votre page se trouve à l'intérieur des balises <body>.
Mettre du style avec le CSS
Une fois que votre page a une structure HTML, vous pouvez la rendre plus attrayante avec le CSS (Cascading Style Sheets). Le CSS est le langage que nous utilisons pour styliser les éléments HTML. Si le HTML est le squelette, le CSS est l'ensemble des vêtements, des couleurs et des styles qui donnent à la page son apparence unique.
Avec le CSS, vous pouvez contrôler les polices, les couleurs, les marges, les arrière-plans et bien plus encore. Vous pouvez cibler des balises HTML spécifiques et leur appliquer des règles de style. Par exemple, vous pourriez décider que tous vos titres principaux doivent être bleus et que tous vos paragraphes doivent avoir une certaine taille de police.
/* Ce code va dans un fichier séparé, souvent appelé style.css */
body {
background-color: #f0f0f0; /* Un gris très clair */
font-family: Arial, sans-serif;
}
h1 {
color: #005a9c; /* Un bleu foncé */
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}
Ce code CSS indique au navigateur de donner à l'arrière-plan de la page une couleur gris clair, de centrer le titre <h1> et de le colorer en bleu, et de définir la taille de la police pour les paragraphes <p>. En séparant le style (CSS) de la structure (HTML), le code devient beaucoup plus facile à gérer.
Ajouter de l'interactivité avec JavaScript
Le HTML et le CSS sont parfaits pour créer des pages statiques, c'est-à-dire des pages qui affichent des informations sans changer. Mais que se passe-t-il si vous voulez que votre page réagisse aux actions de l'utilisateur, comme cliquer sur un bouton ou remplir un formulaire ? C'est là qu'intervient JavaScript.
JavaScript est un langage de programmation qui s'exécute dans le navigateur de l'utilisateur. Il permet de manipuler le HTML et le CSS d'une page pour créer des expériences dynamiques. Pour reprendre notre analogie de la maison, JavaScript serait le système électrique qui permet d'allumer les lumières, les appareils électroménagers qui fonctionnent et les portes qui s'ouvrent automatiquement.
Le HTML fournit la structure, le CSS gère la présentation et JavaScript ajoute l'interactivité. Ces trois technologies sont les piliers du développement web moderne.
Par exemple, vous pourriez utiliser JavaScript pour afficher un message de bienvenue lorsqu'un utilisateur clique sur un bouton.
// Ce code peut être placé dans un fichier .js ou dans une balise <script>
// Trouve le bouton dans le HTML
const monBouton = document.getElementById('boutonSalutation');
// Ajoute un écouteur d'événement qui se déclenche au clic
monBouton.addEventListener('click', function() {
alert('Bonjour et bienvenue !');
});
Ce petit script attend qu'un utilisateur clique sur un bouton avec l'ID boutonSalutation, puis il affiche une petite fenêtre contextuelle avec un message. C'est un exemple simple, mais il illustre la puissance de JavaScript pour rendre les pages web vivantes et réactives.
Maintenant que vous connaissez les rôles du HTML, du CSS et du JavaScript, testons vos connaissances.
Quel est le rôle principal du HTML dans la création d'un site web ?
En utilisant l'analogie de la construction d'une maison, si le HTML est le plan ou le squelette, qu'est-ce que le CSS représente ?
Comprendre ces trois piliers est la première étape pour créer n'importe quelle application web, de la plus simple à la plus complexe.