Exemple
voici un exemple de code. Vous pouvez, si vous le souhaitez, le copier et l’essayer. Pour cela, nommez le fichier HTML en index.html, le CSS en style.css et le JavaScript en script.js (respectivement dans l’ordre donné )
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page avec CSS et JavaScript</title>
<!-- Lien vers le fichier CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Explication de l'utilisation du CSS et JavaScript</h1>
<section id="html-section">
<h2>Explication du fichier HTML</h2>
<p>Voici un exemple simple de fichier HTML qui contient une structure de base avec des liens vers les fichiers CSS et JavaScript.</p>
<pre>
<code>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page avec CSS et JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Explication de l'utilisation du CSS et JavaScript</h1>
</body>
</html>
</code>
</pre>
</section>
<section id="css-section">
<h2>Explication du fichier CSS</h2>
<p>Le fichier CSS permet de définir le style de la page. Ici, nous modifions la couleur de fond, le texte, et la taille du titre.</p>
<pre>
<code>
body {
background-color: #f0f0f0; /* Couleur de fond gris clair */
font-family: Arial, sans-serif; /* Police de caractère */
color: #333; /* Couleur du texte */
text-align: center; /* Centrer le texte */
}
h1 {
color: #4CAF50; /* Couleur du titre */
}
p {
font-size: 16px; /* Taille de la police des paragraphes */
}
</code>
</pre>
</section>
<section id="js-section">
<h2>Explication du fichier JavaScript</h2>
<p>Le fichier JavaScript permet d'ajouter des interactions à la page. Ici, nous affichons une alerte lorsque l'utilisateur clique sur un bouton.</p>
<button id="alertButton">Cliquez ici pour une alerte</button>
<pre>
<code>
document.getElementById('alertButton').addEventListener('click', function() {
alert('Vous avez cliqué sur le bouton!');
});
</code>
</pre>
</section>
<!-- Lien vers le fichier JavaScript -->
<script src="script.js"></script>
</body>
</html>/* Le fichier CSS permet de définir l'apparence de la page */
/* Style global pour le body */
body {
background-color: #f0f0f0; /* Couleur de fond gris clair */
font-family: Arial, sans-serif; /* Police de caractère */
color: #333; /* Couleur du texte */
text-align: center; /* Centrer le texte */
}
/* Style spécifique pour le titre h1 */
h1 {
color: #4CAF50; /* Couleur du titre */
}
/* Style des paragraphes */
p {
font-size: 16px; /* Taille de la police des paragraphes */
}
/* Style du bouton */
button {
padding: 10px 20px; /* Taille du bouton */
font-size: 16px; /* Taille de la police du bouton */
background-color: #4CAF50; /* Couleur du fond du bouton */
color: white; /* Couleur du texte du bouton */
border: none; /* Supprimer la bordure */
border-radius: 5px; /* Coins arrondis */
cursor: pointer; /* Le curseur devient une main */
}
/* Style au survol du bouton */
button:hover {
background-color: #45a049; /* Couleur de fond plus foncée au survol */
}// Le fichier JavaScript permet d'ajouter des interactions avec l'utilisateur
// Ajout d'un écouteur d'événements sur le bouton
document.getElementById('alertButton').addEventListener('click', function() {
// Affichage d'une alerte lorsqu'on clique sur le bouton
alert('Vous avez cliqué sur le bouton!');
});voici ce que ca donne après exécution
Explication de l’utilisation du CSS et JavaScript
Explication du fichier HTML
Voici un exemple simple de fichier HTML qui contient une structure de base avec des liens vers les fichiers CSS et JavaScript.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page avec CSS et JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Explication de l'utilisation du CSS et JavaScript</h1>
</body>
</html>
Explication du fichier CSS
Le fichier CSS permet de définir le style de la page. Ici, nous modifions la couleur de fond, le texte, et la taille du titre.
body {
background-color: #f0f0f0; /* Couleur de fond gris clair */
font-family: Arial, sans-serif; /* Police de caractère */
color: #333; /* Couleur du texte */
text-align: center; /* Centrer le texte */
}
h1 {
color: #4CAF50; /* Couleur du titre */
}
p {
font-size: 16px; /* Taille de la police des paragraphes */
}
Explication du fichier JavaScript
Le fichier JavaScript permet d’ajouter des interactions à la page. Ici, nous affichons une alerte lorsque l’utilisateur clique sur un bouton.
document.getElementById('alertButton').addEventListener('click', function() {
alert('Vous avez cliqué sur le bouton!');
});
voici un exemple de PHP
<?php
// Vérification si le formulaire a été soumis
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Récupération des données du formulaire
$nom = $_POST['nom'];
$email = $_POST['email'];
// Affichage des données soumises
echo "<h2>Merci pour votre soumission !</h2>";
echo "<p>Nom : $nom</p>";
echo "<p>Email : $email</p>";
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulaire PHP Simple</title>
</head>
<body>
<h1>Formulaire de Contact</h1>
<!-- Formulaire HTML -->
<form method="post" action="">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required><br><br>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Envoyer">
</form>
</body>
</html>