Introduction :
Le développement web est un domaine passionnant qui vous permet de créer des sites web interactifs et dynamiques. Trois langages essentiels pour le développement web sont HTML (HyperText Markup Language), CSS (Cascading Style Sheets) et JavaScript. Dans ce tutoriel, nous allons vous guider étape par étape pour comprendre les bases de HTML, CSS et JavaScript, et comment les utiliser ensemble pour créer une page web simple.
Étape 1 : Comprendre HTML
HTML est la base de toute page web. Il permet de structurer le contenu de la page en utilisant des balises. Voici les étapes pour créer une page HTML simple :
Créez un nouveau fichier texte avec une extension ".html" (par exemple, "index.html").
Ouvrez le fichier avec un éditeur de texte ou un éditeur de code.
Commencez par la balise <!DOCTYPE html>. Cela indique au navigateur que vous utilisez la dernière version de HTML.
La balise <!DOCTYPE html> est la première ligne d'un document HTML et définit la version de HTML utilisée. Dans ce cas, nous utilisons la dernière version, HTML5.
Ensuite, ajoutez la balise <html> qui enveloppe tout le contenu de la page.
La balise <html> définit le début et la fin du document HTML. Tout le contenu de la page doit être inclus à l'intérieur de cette balise.
À l'intérieur de la balise <html>, ajoutez les balises <head> et <body>.
Explication : La balise <head> contient des informations sur la page, telles que le titre et les liens vers des fichiers CSS et JavaScript. La balise <body> contient le contenu visible de la page.
Voici un exemple de code HTML de base :
<!DOCTYPE html>
<html>
<head>
<title>Mon premier site web</title>
<link rel="stylesheet" href="style.css"> <!-- fichier css -->
<script src="script.js"></script> <!-- fichier Javascript -->
</head>
<body>
<h1>Bienvenue sur mon site web !</h1>
<p>Ceci est ma première page HTML.</p>
<button onclick="changeColor()">Cliquez ici</button>
</body>
</html>
Dans cet exemple, nous avons inclus un titre pour notre page avec la balise <title>. Nous avons également ajouté un lien vers un fichier CSS avec la balise <link>. Le fichier CSS est appelé "style.css" et se trouve dans le même répertoire que notre fichier HTML. De plus, nous avons ajouté un lien vers un fichier JavaScript avec la balise <script>. Le fichier JavaScript est appelé "script.js" et se trouve également dans le même répertoire. Enfin, nous avons ajouté un bouton avec l'attribut onclick pour appeler une fonction JavaScript nommée changeColor() lorsque le bouton est cliqué.
Enregistrez le fichier et ouvrez-le dans un navigateur pour voir le résultat. Pour ouvrir le fichier, vous pouvez faire un double clique dessus, ou utiliser l'extension Live server de Visual studio code.
Étape 2 : Ajouter du style avec CSS
Maintenant que vous avez une structure de base avec HTML, vous pouvez utiliser CSS pour styliser votre page. Voici comment procéder :
Créez un nouveau fichier texte avec une extension ".css" (par exemple, "style.css").
Ouvrez le fichier avec un éditeur de texte ou un éditeur de code.
Appliquez du style à un élément HTML en utilisant une règle CSS. Par exemple, pour changer la couleur du texte, vous pouvez utiliser la propriété color.
Les règles CSS sont utilisées pour définir le style des éléments HTML. Vous pouvez sélectionner les éléments à styliser en utilisant leur nom de balise, leur ID (attribut id) ou leur classe (attribut class).
Enregistrez le fichier CSS et liez-le à votre fichier HTML en ajoutant la balise <link> dans la section <head> de votre fichier HTML.
La balise <link> est utilisée pour relier un fichier CSS externe à votre fichier HTML. L'attribut rel avec la valeur "stylesheet" indique que le fichier est une feuille de style CSS.
Voici un exemple de balise <link> :
<link rel="stylesheet" href="style.css">
Enregistrez et actualisez votre page HTML dans le navigateur pour voir les modifications de style appliquées.
Étape 3 : Ajouter de l'interactivité avec JavaScript
JavaScript est un langage de programmation utilisé pour ajouter de l'interactivité et de la dynamique aux pages web. Voici comment l'utiliser :
Créez un nouveau fichier texte avec une extension ".js" (par exemple, "script.js").
Ouvrez le fichier avec un éditeur de texte ou un éditeur de code.
Ajoutez des fonctions JavaScript pour manipuler les éléments de la page et réagir aux événements.
Vous pouvez utiliser JavaScript pour manipuler les éléments HTML, modifier le contenu, changer le style, ajouter ou supprimer des éléments, etc. Vous pouvez également réagir à des événements tels que des clics de souris, des pressions de touches, des survols de souris, etc.
Voici un exemple de code JavaScript pour changer la couleur du texte lorsque le bouton est cliqué :
function changeColor() {
var element = document.getElementsByTagName("h1")[0];
element.style.color = "red";
}
Enregistrez le fichier JavaScript et liez-le à votre fichier HTML en ajoutant la balise <script> dans la section <head> de votre fichier HTML.
La balise <script> est utilisée pour inclure du code JavaScript dans votre fichier HTML. Vous pouvez spécifier le chemin vers votre fichier JavaScript à l'aide de l'attribut src.
Voici un exemple de balise <script> :
<script src="script.js"></script>
Enregistrez et actualisez votre page HTML dans le navigateur. Lorsque vous cliquez sur le bouton, la fonction JavaScript changeColor() sera appelée et changera la couleur du texte en rouge.
Conclusion :
Félicitations ! Vous avez appris les bases de HTML, CSS et JavaScript. Maintenant, vous pouvez continuer à explorer et expérimenter avec d'autres balises HTML, propriétés CSS et fonctionnalités JavaScript pour créer des pages web plus avancées et interactives. N'hésitez pas à consulter des ressources supplémentaires et à pratiquer régulièrement pour améliorer vos compétences en développement web.
