Documentation WEB
Nom : BENNOUI Prénom : Romeissa Matricule : 202031062680
HTML
1- Structure de base d'un document HTML <a href="https://www.example.com">Visitez
<!DOCTYPE html> Example</a>
<html lang="fr"> <img src="image.jpg" alt="Description"
<head> width="300" height="200">
<meta name="viewport" content="width=device- <a
width, initial-scale=1.0"> href="mailto:[email protected]">[email protected]
<title>Exemple de page</title> z</a>
</head> - Liste :
<body> Liste ordonnée :
<header> <ol>
<h1>Bienvenue sur mon site</h1> <li>Premier élément</li>
</header> <li>Deuxième élément</li>
<main> </ol>
<p>Contenu principal ici.</p> Liste non ordonnée :
</main> <ul>
<footer> <li>Item 1</li>
<p>Contactez-nous : [email protected]</p> <li>Item 2</li>
</footer> </ul>
</body> - Tableau :
</html> <table>
2- Balises principales et exemples <tr>
- Titre et Paragraphes <th>Nom</th>
<h1>Titre Principal</h1> <th>Âge</th>
<h2>Sous-titre</h2> </tr>
<p>Ceci est un paragraphe.</p> <tr>
- Liens et Images : <td>Jean</td>
Documentation WEB
Nom : BENNOUI Prénom : Romeissa Matricule : 202031062680
<td>25</td> CSS
</tr>
</table> - Méthodes pour inclure CSS :
- <nav> : <p style="color: red;">Texte rouge</p>
Peut être utilisé pour les menus de dans <head> :
navigation. <style>
Idéalement intégré dans <header> pour body { background-color: lightblue; } Définit la
structurer un site web. couleur d'arrière-plan en bleu clair pour tout le
<header> document
<h1>Mon Site Web</h1> <!-- Titre </style>
principal du site --> dans <head> : <link rel="stylesheet" href="style.css">
<nav> Selecteurs CSS :
<ul> Élément : p { color: blue; }
<li><a Classe : .className { margin: 10px; }
href="index.html">Accueil</a></li> ID : #idName { padding: 5px; }
<li class="actif"><a href="#">À h1 {
propos</a></li> color: navy; Définit la couleur du texte en bleu
<li><a marine
href="contact.html">Contact</a></li> text-align: center; Centre le texte horizontalement
</ul> }
</nav> p{
</header> font-family: Arial, sans-serif; <!-- Utilise la police Arial
- <div> : Utilisé comme conteneur générique avec une alternative sans-serif -->
pour structurer le contenu. font-size: 14px; <!-- Définit la taille de la police à
<div class="section"> 14px -->
<h2>Section générique</h2> font-weight: bold; <!-- Rend le texte en gras -->
<p>Ce contenu est organisé dans un text-decoration: underline; <!-- Souligne le texte -->
conteneur `<div>`.</p> }
</div> header {
Documentation WEB
Nom : BENNOUI Prénom : Romeissa Matricule : 202031062680
background: linear-gradient(to right, red, yellow); gap: 10px; <!-- Ajoute un espacement de 10px entre
Applique un dégradé du rouge au jaune en arrière-plan les éléments de la grille -->
} }
div { nav ul {
padding: 20px; <!-- Ajoute un espacement interne de list-style: none; <!-- Supprime les puces des éléments
20px --> de la liste -->
margin: 10px; <!-- Ajoute un espacement externe de display: flex; <!-- Aligne les éléments
10px --> horizontalement -->
} background-color: #333; <!-- Ajoute un arrière-plan
.box { gris foncé -->
border: 2px solid black; <!-- Ajoute une bordure }
noire solide de 2px --> nav li {
border-radius: 10px; <!-- Arrondit les coins de 10px -- margin: 0 10px; <!-- Ajoute un espacement
> horizontal entre les éléments -->
} }
.container { nav a {
display: flex; <!-- Active le modèle de disposition color: white; <!-- Définit la couleur du texte des liens
Flexbox --> en blanc -->
justify-content: center; <!-- Aligne les éléments text-decoration: none; <!-- Supprime le
horizontalement au centre --> soulignement des liens -->
align-items: center; <!-- Aligne les éléments }
verticalement au centre --> nav a:hover {
} color: yellow; <!-- Change la couleur du texte en
.grid { jaune au survol -->
display: grid; <!-- Active le modèle de disposition }
Grid --> table {
grid-template-columns: 1fr 2fr; <!-- Définit deux width: 100%; <!-- Définit la largeur du tableau à
colonnes avec des proportions de 1 et 2 --> 100% de son conteneur -->
Documentation WEB
Nom : BENNOUI Prénom : Romeissa Matricule : 202031062680
border-collapse: collapse; <!-- Fusionne les bordures <img src="img/image1.jpg" alt="Image
des cellules --> 1">
} </div>
th, td { <div class="slide">
padding: 10px; <!-- Ajoute un espacement interne de <img src="img/image2.jpg" alt="Image
10px dans chaque cellule --> 2">
text-align: left; <!-- Aligne le contenu à gauche --> </div>
border: 1px solid #ddd; <!-- Ajoute une bordure grise <div class="slide">
claire autour des cellules --> <img src="img/image3.jpg" alt="Image
} 3">
th { </div>
background-color: #f4f4f4; <!-- Définit un arrière- </div>
plan gris clair pour les en-têtes -->
} </div>
nav ul li.actif a { - #slideshow {
background-color: #88306b; /* Couleur différente width: 50%; /* La largeur du diaporama */
pour l'élément actif */ height: 300px; /* Hauteur fixe du diaporama */
} overflow: hidden; /* Cache le contenu qui dépasse */
nav ul li a:hover { margin: 0 auto; /* Centre le diaporama */
background-color: #88306b; /* Couleur de fond position: relative; /* Nécessaire pour le
différente au survol */ positionnement du wrapper interne */
} border-radius: 20px; /* Coins arrondis */
nav ul li.actif a:hover { }
transition: none; /* Pas de transition pour l'élément - .slide-wrapper {
déjà sélectionné */ display: flex; /* Utilisation de flexbox pour aligner les
<div id="slideshow"> images horizontalement */
<div class="slide-wrapper"> width: 300%; /* Largeur égale à 3 images (100% * 3)
<div class="slide"> */
Documentation WEB
Nom : BENNOUI Prénom : Romeissa Matricule : 202031062680
position: absolute; /* Nécessaire pour animer le 50% { left: -100%; }
déplacement */ 100% { left: -200%; }
animation: slideshow 15s infinite alternate; /* }
Animation en va-et-vient */
}
JavaScript
- .slide { - S'intègre dans HTML via :
position: relative; /* Position pour le déplacement <script>
des images */ // Code JavaScript ici
width: 100%; /* Chaque image prend 100% de la </script>
largeur du conteneur */ Ou : <script src="script.js"></script> <!-- Lien vers un fichier
margin: 0; /* Pas de marge externe */ JavaScript externe -->
border-radius: 10px; /* Coins arrondis pour chaque - Variables
image */ let x = 10; // Déclare une variable modifiable
} const pi = 3.14; // Déclare une constante immuable
- .slide img { var y = 20; // Ancienne méthode de déclaration
width: 100%; /* L'image prend toute la largeur du
conteneur */ let num = 42; // Nombre
height: 100%; /* Maintient la hauteur du conteneur let str = "Bonjour"; // Chaîne de caractères
*/ let isTrue = true; // Booléen
object-fit: cover; /* L'image couvre l'espace sans - Opérateurs mathématiques : +, -, *, /, %
déformation */ let sum = 5 + 3; // Addition
object-position: center; /* Centre l'image dans son let product = 4 * 2; // Multiplication
conteneur */
border-radius: 10px; /* Coins arrondis sur les images == : Compare la valeur uniquement, sans tenir compte du
*/ type.
} === : Compare la valeur et le type strictement.
- /* Animation pour faire défiler les images */ != : Compare l'inégalité de valeur uniquement.
@keyframes slideshow { !== : Compare l'inégalité de valeur et de type.
0% { left: 0; }
Documentation WEB
Nom : BENNOUI Prénom : Romeissa Matricule : 202031062680
<, >, <=, >= : Comparent des valeurs numériques ou titre.innerHTML = "<strong>Titre Important</strong>"; //
alphabétiques. Change le contenu HTML
console.log(5 == "5"); // true (valeur identique, type ignoré) - Gestion des Événements :
console.log(5 === "5"); // false (type différent) bouton.addEventListener("click", () => {
console.log(5 != "5"); // false (valeur identique) alert("Bouton cliqué");
console.log(5 !== "5"); // true (valeur identique mais type });
différent) - Expressions Régulières et Validation
- function saluer(nom) { const prenom = document.f.prenom.value;
return "Bonjour, " + nom; const nom = document.f.nom.value;
} const tel = document.f.tel.value;
console.log(saluer("Alice")); // Affiche "Bonjour, Alice" const email = document.f.email.value;
- const multiplier = (a, b) => a * b; const nomValide = /^[A-Z][a-zA-Z]+$/.test(nom);
console.log(multiplier(3, 4)); // 12 const prenomValide = /^[A-Z][a-zA-Z]+$/.test(prenom);
- Sélection d'Éléments : const telValide = /^00213[0-9]{9}$/.test(tel);
let titre = document.getElementById("titre"); // Récupère const mailValide = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-
l'élément avec l'ID "titre" Z]{2,}$/.test(email);
let items = document.getElementsByClassName("item"); // const ipValide = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.
Récupère tous les éléments avec la classe "item" (25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|
let paragraphes = [01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$|
document.getElementsByTagName("p"); // Récupère tous ^non assigné$/.test(ip);
les paragraphes 25[0-5] : Correspond aux nombres entre 250 et 255.
let bouton = document.querySelector("button"); // 2[0-4][0-9] : Correspond aux nombres entre 200 et
Sélectionne le premier bouton 249.
let listes = document.querySelectorAll("ul li"); // [01]?[0-9][0-9]? : Correspond aux nombres entre 0
Sélectionne tous les <li> dans un <ul> et 199.
- Modification de Contenu : \. : Séparateur pour les segments de l'adresse IP.
titre.textContent = "Nouveau Titre"; // Change le texte de $|^non assigné$ : Valide "non assigné" comme une
l'élément titre adresse alternative
?: caractère de 0 à 1 fois
Documentation WEB
Nom : BENNOUI Prénom : Romeissa Matricule : 202031062680
+ : caractère précédent de 1 à X fois
* : caractère précédent de 0 à X fois
{n} : caractère précédent exactement n fois
{n,} : caractère précédent au moins n fois.
{n,m} : caratère précédent entre n et m fois.
- Tests :
const nomValide = /^[A-Z][A-Za-z0-9]
{1,9}$/.test(nom); // Vérifie si le nom respecte les
critères
const typeValide = /^[A-Z][a-z]+$/.test(type); //
Vérifie si le type est valide (ex. "Admin")
const constructeurValide = /^(Cisco|Juniper|
Huawei)$/.test(constructeur); // Valide si le
constructeur est parmi les choix
