Formation HTML, CSS, JavaScript et PHP
Objectif de la formation
À la fin de cette formation, les étudiants seront capables de créer un formulaire de connexion et
un formulaire d'inscription en utilisant HTML, CSS, et JavaScript. L'objectif est d'acquérir une
solide compréhension des bases de la programmation web.
1. Introduction aux technologies web
Cette formation couvre quatre technologies essentielles : HTML, CSS, JavaScript et PHP. Chacune
de ces technologies a un rôle distinct dans le développement web.
2. HTML (HyperText Markup Language)
1. Qu'est-ce que HTML ?
HTML est un langage de balisage utilisé pour structurer le contenu des pages web.
2.2. Les balises HTML importantes :
Voici45 balises essentielles en HTML:
1. <html>: Définit le document HTML.
2. <head>: Contient des métadonnées, le titre, et les liens vers les styles.
3. <title>: Définit le titre du document.
4. <body>: Contient le contenu visible de la page.
5. <h1> à <h6>: Définit les titres,<h1>étant le plus important.
6. <p>: Définit un paragraphe de texte.
7. <a>: Crée un lien hypertexte.
8. <img>: Insère une image.
o Exemple :<img src="[Link]" alt="Description de l'image" />
9. <ul>: Définit une liste non ordonnée.
10. <ol>: Définit une liste ordonnée.
11. <li>: Définit un élément de liste.
12. <table>: Crée un tableau.
13. <tr>: Définit une ligne dans un tableau.
14. <td>: Définit une cellule dans un tableau.
15. <th>: Définit une cellule d'en-tête dans un tableau.
16. <form>: Crée un formulaire pour recueillir des données des utilisateurs.
17. <input>: Définit un champ de saisie.
18. <button>: Définit un bouton cliquable.
19. <select>: Crée une liste déroulante.
20. <option>: Définit une option dans une liste déroulante.
21. <textarea>: Crée une zone de texte pour des entrées multilignes.
22. <br>: Insère un saut de ligne.
23. <hr>: Insère une ligne horizontale.
24. <div>: Définit une section de la page.
25. <span>: Définit une petite section de texte ou d'éléments.
26. <link>: Lien vers une ressource externe.
27. <meta>: Définit des métadonnées.
28. <audio>: Insère du contenu audio.
29. <video>: Insère du contenu vidéo.
30. <iframe>: Définit une cadre imbriquée dans une page.
31. <canvas>: Définit une zone pour dessiner des graphiques.
32. <script>: Inclut un script JavaScript.
33. <style>: Contient des styles CSS.
34. <blockquote>: Définit un extrait de texte citation.
35. <cite>: Définit une citation ou une référence.
36. <strong>: Indique un texte important (en gras).
37. <em>: Indique un texte accentué (en italique).
38. <small>: Définit du texte plus petit.
39. <mark>: Indique le texte surligné.
40. <time>: Définit une date ou une heure.
41. <data>: Relie la date à un format machine.
42. <details>: Fournit des informations supplémentaires pouvant être affichées ou masquées.
43. <summary>: Définit un résumé de contenu dans<details>.
44. <dialog>: Définit une boîte de dialogue.
45. <meta name="viewport">: Spécifie les paramètres pour le rendu sur les appareils
mobiles.
[Link] (Cascading Style Sheets)
1. Qu'est-ce que CSS ?
CSS est utilisé pour décrire la présentation d'un document HTML, y compris les styles, les
couleurs et les mises en page.
3.2. Sélecteurs et propriétés CSS importants :
Voici25 balises essentielles en CSS:
1. color: Définit la couleur du texte.
2. background-color: Définit la couleur de fond.
3. font-size: Définit la taille de la police.
4. font-family: Définit la police de caractères.
5. margin: Crée de l'espace autour d'un élément.
6. padding: Crée de l'espace à l'intérieur d'un élément.
7. border: Ajoute une bordure autour d'un élément.
8. display: Définit la méthode d'affichage d'un élément.
o block,inline,flex,grid
9. width: Définit la largeur d'un élément.
10. height: Définit la hauteur d'un élément.
11. text-align: Définit l'alignement du texte.
12. position: Définit le positionnement d'un élément (static, relative, absolute, fixed).
13. top,right,bottom,left: Définit la position des éléments.
14. overflow: Contrôle la gestion de l'écrasement du contenu.
15. background-image: Définit une image d'arrière-plan.
16. opacity: Définit la transparence d'un élément.
17. box-shadow: Ajoute une ombre autour d'un élément.
18. text-shadow: Ajoute une ombre au texte.
19. transition: Définit la transition entre les états de style.
20. animation: Définit les styles d'animation.
21. flex: Définit les propriétés du modèle flex.
22. grid-template-columns: Définit le nombre et la taille des colonnes dans une grille.
23. background-size: Contrôle la taille d'une image de fond.
24. cursor: Change le type de curseur lors du survol d'un élément.
25. filter: Applique des effets graphiques comme le flou.
4. JavaScript
1. Qu'est-ce que JavaScript ?
JavaScript est un langage de programmation utilisé pour ajouter de l'interactivité aux pages web.
4.2. Syntaxe de base :
Variable:let x = 5;
Fonction:function myFunction() { return x; }
Événements:[Link]("myButton").onclick = function() { ... };
Conditions: Utilisation deif,else, pour le contrôle du flux.
Exemple :
function showMessage()
{ alert("Bonjour,
bienvenue !");
}
if (x > 0) {
[Link]("x est positif");
}
4.3. Manipulation
du DOM
JavaScript permet de manipuler le Document Object Model (DOM), facilitant l'interaction avec les
éléments HTML.
Exemple :
[Link]("myElement").[Link] = "red";
5. PHP (Hypertext Preprocessor)
1. Qu'est-ce que PHP ?
PHP est un langage serveur utilisé pour générer du contenu dynamique, souvent utilisé pour les
formulaires et le traitement des données.
2. Tableaux en PHP :
Les tableaux en PHP permettent de stocker plusieurs valeurs dans une seule variable.
Tableaux indexés :
Exemple :$fruits = array("Pomme", "Banane", "Cerise");
Tableaux associatifs :
Exemple :$age = array("Pierre" => 35, "Marie" => 30);
5.3. Traitement de formulaires en PHP
Méthode POST :
Les données envoyées via la méthode POST ne sont pas visibles dans l'URL et sont
utilisées pour envoyer des informations sensibles.
Exemple :
if ($_SE𝑉["𝑈𝑆𝑂"] == "𝑂𝑆"){
$username = htmlspecialchars($_POST['username']);
// Traitement des données...
}
Méthode GET :
Les données envoyées via la méthode GET apparaissent dans l'URL et sont visibles pour
l'utilisateur.
Exemple :
if ($_SE𝑉["𝑈𝑆𝑂"] == ""){
$username = htmlspecialchars($_GET['username']);
// Traitement des données...
}
5.4. Gestion des Sessions
PHP permet de gérer des sessions pour authentifier les utilisateurs.
Exemple :
session_start();
$_SESSION['username'] = $username;
6. Création de Formulaires
1. Formulaire de Connexion
<form action="[Link]" method="post">
<label for="username">Nom d'utilisateur:</label>
<input type="text" id="username" name="username">
<label for="password">Mot de passe:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Se connecter">
</form>
6.2. Formulaire d'Inscription
<form action="[Link]" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="password">Mot de passe:</label>
<input type="password" id="password" name="password">
<input type="submit" value="S'inscrire">
</form>
6.3. Validation Client-Side avec JavaScript
JavaScript peut être utilisé pour valider les données des formulaires avant de les soumettre.
Exemple :
function validateForm() {
let x = [Link]["myForm"]["username"].value;
if == "" {
alert("Le nom d'utilisateur doit être rempli");
return false;
}
}
7. Concepts Avancés en JavaScript
1. Asynchronous JavaScript (AJAX)
L'utilisation d'AJAX permet de mettre à jour des pages web de manière asynchrone, sans
recharger la page.
Exemple :
let xhr = new XMLHttpRequest();
[Link]("GET", "[Link]", true);
[Link] = function() {
if ([Link] == 200)
{ [Link]([Link]([Link]));
}
};
[Link]();
7.2. Programmation Orientée Objet en JavaScript
JavaScript permet l'utilisation de la programmation orientée objet pour organiser le code.
Exemple :
class Person
{ constructor(name)
{ [Link] = name;
}
}
let person1 = new
Person("John");
8. Sécurité en PHP
1. Protéger les formulaires
Il est essentiel de valider et de nettoyer les entrées des utilisateurs pour éviter des attaques
comme l'injection SQL.
Exemple :
$username = htmlspecialchars($_POST['username']);
8.2. Interconnexion des pages web
L'interconnexion des pages web se fait généralement via des liens hypertextes. Les
balises<a>permettent de relier différentes pages pour une navigation fluide.
Exemple :
<a href="[Link]">Aller à la page 2</a>
Conclusion
Cette formation offre une introduction complète aux bases de HTML, CSS, JavaScript, et PHP.
Avec une pratique régulière, les étudiants seront en mesure de développer des pages web
interactives et réactives. Les connaissances acquises serviront de fondation pour une
compréhension plus approfondie des technologies web à l'avenir.