Mise en place de l'environnement de développement
- Pour démarrer, créez un nouveau projet web intitulé "projetDemo" à la racine du lecteur D. Dans votre IDE, accédez à "Fichier" > "Nouveau projet", sélectionnez "Projet web", saisissez "projetDemo" comme nom, et choisissez le lecteur D comme répertoire de destination.
- Dans le dossier du projet, générez un fichier de feuille de style nommé "styles.css" dans le sous-dossier "css". Ce fichier servira à centraliser les règles de design.
Structuration du contenu HTML
Intégrez des éléments d'en-tête et un bloc de texte dans votre page d'accueil. Voici un exemple de sturcture :
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Accueil</title>
</head>
<body>
<h1>En-tête principal</h1>
<h2>Sous-titre</h2>
<p>Texte de contenu ici.</p>
</body>
</html>
Application des styles de base
Définissez une couleur de fond pour la page en modifiant le fichier CSS :
/* Définir une couleur d'arrière-plan claire */
body {
background-color: #e6f7ff;
}
Liez cette feuille de style en ajoutant une balise lien dans la section <head> du HTML :
<link rel="stylesheet" href="css/styles.css" />
Pour personnnaliser les couleurs des textes, utilisez des sélecteurs dans le CSS :
h1, h2 {
color: #ff8c00;
}
p {
color: #0066cc;
}
Création d'une page secondaire
Générez une sous-page appelée "details.html" dans le projet, et référencez le même fichier CSS pour assurer une apparence uniforme :
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Détails</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<p>Contenu spécifique à cette page.</p>
</body>
</html>
Ajout de liens et gestion des sélecteurs
Insérez un lien hypertexte dans la page d'accueil et appliquez une couleur via CSS :
<a href="details.html">Voir les détails</a>
Dans le fichier CSS, ajoutez :
a {
color: #cc0000;
}
Pour cibler des éléments spécifiques, utilisez des sélecteurs d'attributs. Par exemple, si vous avez :
<h1 data-role="principal">Titre avec rôle</h1>
<h1 data-role="secondaire">Autre titre</h1>
Vous pouvez appliquer un style uniquement au premier en utilisant :
h1[data-role="principal"] {
color: #336699;
}