Zorcraft Learning Docs

Cours complet en francais pour apprendre le code rapidement et proprement.

HTML CSS JavaScript Bash Linux (.sh) Batch Windows (.bat) Securite Web

Introduction

  • Objectif : apprendre comme avec un prof, mais en doc.
  • Niveau : debutant jusqu a avance.
  • Approche : simple, claire, utile, orientee pratique.
  • Base theorique : bonnes pratiques inspirees de la documentation MDN, simplifiees.

Regle d or: lire, tester, casser, corriger, recommencer. C est la maniere la plus rapide pour apprendre.

1) Methode A a Z

Plan intelligent pour progresser vite

  1. Comprendre la structure d une page HTML.
  2. Apprendre les balises les plus importantes et leur role exact.
  3. Habiller la page avec CSS (base puis avance).
  4. Ajouter l interactivite avec JavaScript.
  5. Automatiser des taches avec Bash et Batch.
  6. Securiser le code et verifier les entrees utilisateur.
  7. Se tester avec un quiz et refaire les parties faibles.

2) HTML base explique ligne par ligne

Exemple de base, puis explication de chaque ligne comme en cours.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ma premiere page</title>
</head>
<body>
    <header>
        <h1>Bienvenue</h1>
        <nav>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <main>
        <p>Salut, ceci est mon premier paragraphe.</p>
    </main>

    <footer id="contact">
        <p>Email: [email protected]</p>
    </footer>
</body>
</html>

Explication simple de chaque ligne

  1. <!DOCTYPE html> : indique au navigateur que la page utilise HTML5.
  2. <html lang="fr"> : racine du document + langue francaise pour accessibilite et SEO.
  3. <head> : zone technique (meta, titre, CSS).
  4. <meta charset="utf-8"> : support des accents et caracteres speciaux.
  5. <meta name="viewport" ...> : affichage correct sur mobile.
  6. <title> : titre de l onglet navigateur.
  7. <body> : contenu visible de la page.
  8. <header> : en-tete de la page ou d une section.
  9. <h1> : titre principal, unique idealement par page.
  10. <nav> : zone de navigation (menu).
  11. <a> : lien cliquable vers une autre zone/page.
  12. <main> : contenu principal de la page.
  13. <p> : paragraphe de texte. Oui, la balise p sert a ecrire des paragraphes lisibles et structures.
  14. <footer> : pied de page (contact, copyright, liens utiles).

3) Balises HTML a connaitre (maximum utile)

Voici un catalogue pratique des balises les plus utiles, avec leur role.

Structure et semantique

  • <html> : racine du document.
  • <head> : metadonnees techniques.
  • <body> : contenu affiche.
  • <header> : en-tete.
  • <main> : contenu principal.
  • <section> : section thematique.
  • <article> : bloc autonome (post, news).
  • <aside> : contenu secondaire.
  • <footer> : pied de page.
  • <nav> : menu de navigation.

Texte

  • <h1>...<h6> : titres hierarchiques.
  • <p> : paragraphe.
  • <span> : petit conteneur inline.
  • <strong> : importance forte (pas juste visuel).
  • <em> : emphase.
  • <mark> : surlignage.
  • <br> : saut de ligne ponctuel.
  • <hr> : separation thematique.
  • <blockquote> : citation longue.
  • <code>, <pre>, <kbd>, <samp> : contenus techniques.

Listes

  • <ul> : liste a puces.
  • <ol> : liste numerotee.
  • <li> : element de liste.
  • <dl>, <dt>, <dd> : liste de definitions.

Media

  • <img> : image (toujours avec alt).
  • <figure> + <figcaption> : media + legende.
  • <audio>, <video>, <source>, <track> : media riches.

Liens et integration

  • <a> : lien hypertexte.
  • <iframe> : integration d une page externe (a utiliser avec prudence).

Tableaux

  • <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, <caption>.

Formulaires

  • <form> : formulaire.
  • <label> : etiquette de champ.
  • <input>, <textarea>, <select>, <option>, <button>.
  • <fieldset> + <legend> : groupe logique de champs.
  • <datalist>, <output>, <progress>, <meter>.

Balises interactives modernes

  • <details> + <summary> : panneau ouvrable.
  • <dialog> : boite de dialogue native.
  • <template> : modele HTML non rendu.
  • <canvas> et <svg> : dessin 2D/vectoriel.

Metadonnees et ressources

  • <meta> : informations techniques (charset, viewport, SEO).
  • <link> : liaison vers CSS, icones, preconnect.
  • <base> : URL de base pour les liens relatifs.
  • <style> : CSS embarque dans la page.
  • <script> et <noscript> : comportement JS + fallback.

Tableaux et colonnes avances

  • <colgroup> et <col> : style/largeur de colonnes.
  • scope sur <th> : meilleure accessibilite des en-tetes.

Media et integration avances

  • <picture> : image responsive avec plusieurs sources.
  • <map> et <area> : zones cliquables sur image.
  • <embed> et <object> : integration de contenus externes.
  • <portal> : navigation embarquee (support limite).

Formulaires encore plus complets

  • <optgroup> : regroupe les options d un select.
  • <input type="file">, type="range", type="color".
  • autocomplete, placeholder, required, pattern : aide + validation.

4) HTML avance (accessibilite + SEO + performance)

Exemple complet moderne avec bonnes pratiques reelles.

<article aria-labelledby="post-title">
    <header>
        <h2 id="post-title">Guide accessibilite</h2>
        <p><time datetime="2026-07-17">17 juillet 2026</time></p>
    </header>

    <figure>
        <img src="schema.webp" alt="Schema du flux de navigation" loading="lazy" width="960" height="540">
        <figcaption>Navigation claire et accessible</figcaption>
    </figure>

    <details>
        <summary>Afficher les points cles</summary>
        <ul>
            <li>Un seul h1 par page</li>
            <li>Alt descriptif pour les images</li>
            <li>Labels relies aux inputs</li>
        </ul>
    </details>
</article>

Explication ligne par ligne (HTML avance)

  1. <article aria-labelledby="post-title"> : bloc autonome lie au titre via un attribut ARIA pour l accessibilite.
  2. <header> : en-tete de l article.
  3. <h2 id="post-title"> : titre secondaire, cible par aria-labelledby.
  4. <time datetime="2026-07-17"> : date lisible humain + format machine pour SEO/outils.
  5. <figure> : regroupe le media avec son contexte.
  6. <img ... alt ... loading="lazy" width height> : image accessible, performante et stable visuellement.
  7. <figcaption> : legende semantique de l image.
  8. <details> : contenu repliable natif sans JavaScript.
  9. <summary> : bouton/titre cliquable du panneau.
  10. <ul> / <li> : liste des bonnes pratiques de la section.

5) CSS base (fondations)

:root {
  --bg: #0a0a0a;
  --text: #f5f5f5;
  --accent: #e0a3ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.card {
  border: 1px solid rgba(224, 163, 255, .35);
  padding: 16px;
  border-radius: 12px;
}

Tu apprends ici: variables CSS, box-sizing, typographie, couleurs, espacements.

Syntaxe et ecriture

  • selecteur { propriete: valeur; } : forme de base d une regle CSS.
  • /* commentaire */ : commentaire lisible par humain, ignore par le navigateur.
  • @import, @media, @supports, @keyframes : regles speciales.

Selecteurs essentiels

  • * : selecteur universel.
  • h1, p, section : selecteurs de type (balise).
  • .classe : cible les elements ayant une classe.
  • #id : cible un element unique par identifiant.
  • [type="email"] : selecteur d attribut.
  • :hover, :focus, :nth-child() : pseudo-classes.
  • ::before, ::after : pseudo-elements.

Priorite et heritage

  • cascade : derniere regle pertinente gagne si meme priorite.
  • specificite : ID > classe/attribut/pseudo-classe > balise.
  • heritage : certaines proprietes (ex: color) se transmettent aux enfants.

Box model et dimensions

  • width, height, min/max-width : tailles.
  • margin, border, padding, content : box model.
  • box-sizing: border-box : inclut padding/border dans la largeur calculee.

Mise en page moderne

  • display: block/inline/inline-block : comportement de base.
  • display: flex + justify-content + align-items : alignements 1D.
  • display: grid + grid-template-columns + gap : layouts 2D.
  • position (relative, absolute, fixed, sticky) : positionnement.
  • z-index : ordre d empilement visuel.

Responsive et adaptation

  • @media (max-width: ...) : adaptation aux tailles d ecran.
  • clamp(), min(), max() : valeurs fluides.
  • rem, em, %, vw, vh : unites relatives.

Couleurs, effets, animation

  • color, background, linear-gradient() : rendu couleur.
  • border-radius, box-shadow, filter : effets visuels.
  • transition : animation douce entre 2 etats.
  • animation + @keyframes : animation complete.

Exemple concret relie au cours HTML

header {
    padding: 20px;
    background: #171717;
}

h1 {
    margin: 0;
    color: #f4d7ff;
}

p {
    font-size: 16px;
    color: #d8d8d8;
}

Ici, on applique directement du style sur les balises vues dans le cours: header, h1 et p.

6) CSS avance (layout + animation)

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.glass {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  animation: fadeUp .55s ease-out both;
}

Explication ligne par ligne (CSS avance)

  1. .grid { display: grid; } : active une grille 2D moderne.
  2. grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); : colonnes fluides qui s adaptent automatiquement a la largeur ecran.
  3. gap: 18px; : espace propre entre les cartes.
  4. .glass { background: rgba(...); border: ...; } : effet "verre" semi-transparent.
  5. backdrop-filter: blur(14px); : floute l arriere-plan pour renforcer l effet glassmorphism.
  6. @keyframes fadeUp : definit l animation (depart discret, arrivee visible).
  7. from { opacity: 0; transform: translateY(10px); } : depart en bas et transparent.
  8. to { opacity: 1; transform: translateY(0); } : fin a sa place et totalement visible.
  9. .reveal { animation: fadeUp .55s ease-out both; } : applique l animation avec une vitesse et une courbe douces.

7) JavaScript base (essentiel)

const btn = document.querySelector("#helloBtn");
const result = document.querySelector("#result");

function saluer(prenom) {
  return `Salut ${prenom}, tu progresses bien !`;
}

if (btn && result) {
  btn.addEventListener("click", function () {
    result.textContent = saluer("Hippolyte");
  });
}

Tu manipules ici: variables, fonctions, conditions, evenements, DOM.

Bases du langage

  • let, const, var : declaration de variables.
  • number, string, boolean, null, undefined, object, symbol, bigint.
  • == vs === : comparaison faible vs stricte.
  • template literals (`texte ${valeur}`) : chaines dynamiques lisibles.

Structures de controle

  • if / else, switch : logique conditionnelle.
  • for, while, for...of, forEach : boucles.
  • try / catch / finally : gestion des erreurs.

Fonctions et portee

  • function et () => {} : fonctions classiques et flechees.
  • return : renvoi de resultat.
  • scope (global, bloc, fonction) : ou la variable est accessible.
  • closure : fonction qui garde acces a son contexte parent.

Tableaux et objets

  • Array : map, filter, find, reduce, slice.
  • Object : paires cle/valeur, destructuration, spread ....
  • JSON.parse et JSON.stringify : conversion objet <-> texte JSON.

DOM et interactions page

  • document.querySelector / querySelectorAll : selection d elements.
  • textContent, innerHTML, classList, setAttribute : modifications DOM.
  • createElement, appendChild, remove : creation/suppression de noeuds.
  • addEventListener : reaction aux clics, saisies, scroll, clavier.

Asynchrone et reseau

  • Promise : operation differree.
  • async/await : syntaxe simple pour code asynchrone.
  • fetch : appels HTTP (API).
  • setTimeout / setInterval : execution dans le temps.

Stockage, modules et bonnes pratiques

  • localStorage, sessionStorage : stockage local navigateur.
  • import / export : modularisation du code.
  • defer sur les scripts : chargement sans bloquer le rendu.
  • eviter eval() et valider les entrees : base securite cote client.

Exemple concret relie aux balises HTML

const title = document.querySelector("h1");
const paragraph = document.querySelector("p");

if (title && paragraph) {
    title.textContent = "Bienvenue sur la doc interactive";
    paragraph.style.borderLeft = "3px solid #e0a3ff";
    paragraph.style.paddingLeft = "12px";
}

Ce script manipule les vraies balises du cours (h1, p), pas un exemple abstrait.

8) JavaScript avance (asynchrone + validation)

async function chargerProfil() {
  try {
    const response = await fetch("https://api.github.com/users/Hippolyte59");
    if (!response.ok) throw new Error("Requete invalide");

    const data = await response.json();
    return {
      login: String(data.login || "inconnu"),
      repos: Number(data.public_repos || 0)
    };
  } catch (error) {
    console.error(error.message);
    return { login: "offline", repos: 0 };
  }
}

Explication ligne par ligne (JavaScript avance)

  1. async function chargerProfil() : fonction asynchrone qui peut attendre une requete reseau.
  2. try { ... } : bloc principal si tout se passe bien.
  3. await fetch(...) : envoie une requete HTTP et attend la reponse.
  4. if (!response.ok) throw new Error(...) : valide le statut HTTP avant de continuer.
  5. await response.json() : convertit le JSON distant en objet JavaScript.
  6. String(...) et Number(...) : force des types propres et previsibles.
  7. catch (error) : capture les erreurs reseau, JSON ou statut invalide.
  8. console.error(error.message) : journalise l erreur pour le debug.
  9. return { login: "offline", repos: 0 } : fallback stable pour eviter de casser l interface.

9) Bash Linux + Batch Windows

Linux (.sh)

#!/usr/bin/env bash
set -euo pipefail

LOG_FILE="/var/log/backup_site.log"
SRC_DIR="/var/www/zorcraft.ovh"
DEST_DIR="$HOME/backup/zorcraft"

mkdir -p "$DEST_DIR"
rsync -av --delete "$SRC_DIR/" "$DEST_DIR/" | tee -a "$LOG_FILE"
echo "Backup termine: $(date +"%F %T")" | tee -a "$LOG_FILE"

Explication ligne par ligne (.sh)

  1. #!/usr/bin/env bash : shebang qui lance le script avec Bash.
  2. set -euo pipefail : mode strict pour stopper sur erreur et eviter les variables non definies.
  3. LOG_FILE, SRC_DIR, DEST_DIR : variables de configuration (journal, source, destination).
  4. mkdir -p "$DEST_DIR" : cree le dossier de sauvegarde si necessaire.
  5. rsync -av --delete ... : synchronise proprement et supprime les fichiers obsoletes en destination.
  6. | tee -a "$LOG_FILE" : affiche et ecrit en meme temps dans le journal.
  7. echo "Backup termine: $(date ...)" : ajoute un horodatage de fin de traitement.

Windows (.bat)

@echo off
setlocal

set SRC=C:\inetpub\wwwroot
set DEST=C:\backup\zorcraft
set LOG=C:\logs\backup_site.log

if not exist %DEST% mkdir %DEST%
robocopy %SRC% %DEST% /MIR /R:2 /W:2 >> %LOG%
if errorlevel 8 (
  echo Backup KO %date% %time% >> %LOG%
  exit /b 1
)

echo Backup OK %date% %time% >> %LOG%
exit /b 0

Explication ligne par ligne (.bat)

  1. @echo off : masque l echo des commandes pour une sortie plus propre.
  2. setlocal : limite les variables a la duree du script.
  3. set SRC / DEST / LOG : definit les chemins utilises pendant le backup.
  4. if not exist %DEST% mkdir %DEST% : cree le dossier cible s il n existe pas.
  5. robocopy ... /MIR /R:2 /W:2 : copie miroir avec 2 tentatives et attente courte.
  6. >>> %LOG% : ajoute les traces de commande dans le fichier log.
  7. if errorlevel 8 (...) : considere certaines valeurs comme echec et sort avec code 1.
  8. echo Backup OK ... : journalise le succes.
  9. exit /b 0 : fin normale du script avec code de retour 0.

10) Securite renforcee de ta doc

Ce qui a ete renforce dans cette page

  • Politique CSP restrictive (scripts/styles/images limites a la source locale).
  • Protection anti iframe avec frame-ancestors none + X-Frame-Options DENY.
  • Reduction des permissions navigateur inutiles (camera, micro, geoloc...).
  • Referrer Policy stricte pour limiter les fuites d URL.
  • Aucune execution de script inline dangereuse par attribut HTML.

Checklist a appliquer partout sur ton site

  1. Valider et nettoyer toute entree utilisateur cote serveur.
  2. Echapper la sortie HTML pour eviter XSS.
  3. Utiliser HTTPS partout + HSTS cote serveur.
  4. Mettre a jour dependances et corriger les CVE rapidement.
  5. Journaliser les erreurs sans afficher les details sensibles au visiteur.

11) Reference HTML etendue (inspiree MDN)

Bloc de reference rapide pour avoir plus de matiere comme une vraie doc complete.

Elements de sectionnement

  • <header> : en-tete d une page/section.
  • <main> : contenu principal unique.
  • <section> : regroupement thematique.
  • <article> : contenu autonome.
  • <aside> : contenu annexe.
  • <footer> : pied de page.

Elements de texte avances

  • <abbr>, <cite>, <dfn>, <time>, <small>.
  • <sub> et <sup> : indices/exposants.
  • <ins> et <del> : ajout/suppression de texte.

Formulaires avances

  • <input type="email"|"url"|"date"|"number">.
  • <input required pattern minlength maxlength> pour validation native.
  • <select multiple>, <optgroup>, <datalist>.
  • <progress>, <meter>, <output>.

Balises de structure supplementaires

  • <address> : informations de contact de l auteur/site.
  • <search> : zone semantique de recherche (support variable).
  • <div> : conteneur generique sans sens semantique fort.
  • <span> : conteneur inline generique.

Balises techniques utiles

  • <script defer> : charge le JS sans bloquer le parsing HTML.
  • <link rel="preload"> : precharge une ressource critique.
  • <meta name="description"> : resume SEO de la page.
  • <meta property="og:*"> : partage social (Open Graph).

Exemple formulaire riche et accessible

<form action="/contact" method="post" autocomplete="on">
    <fieldset>
        <legend>Contact rapide</legend>

        <label for="email">Email</label>
        <input id="email" name="email" type="email" required placeholder="[email protected]">

        <label for="topic">Sujet</label>
        <select id="topic" name="topic">
            <optgroup label="Assistance">
                <option>Technique</option>
                <option>Facturation</option>
            </optgroup>
        </select>

        <label for="prio">Priorite</label>
        <input id="prio" name="prio" type="range" min="1" max="5" value="3">

        <button type="submit">Envoyer</button>
    </fieldset>
</form>

Exemple riche multi-balises

<article>
    <header>
        <h3>Mini fiche produit</h3>
        <p><time datetime="2026-07-17">17/07/2026</time></p>
    </header>

    <figure>
        <img src="produit.webp" alt="Photo du produit" loading="lazy">
        <figcaption>Vue principale</figcaption>
    </figure>

    <details>
        <summary>Caracteristiques</summary>
        <ul>
            <li>Poids: <strong>1.2kg</strong></li>
            <li>Stock: <meter min="0" max="100" value="64">64%</meter></li>
        </ul>
    </details>
</article>

12) Quiz HTML (note /10)

13) Quiz CSS (note /10)

14) Quiz JavaScript (note /10)

15) Quiz Bash (.sh/.bat) (note /10)

16) Atelier pratique complet (A a Z)

Projet mini-portfolio (workflow complet)

  1. Creer une page HTML semantique avec header, main, section, footer.
  2. Ajouter un formulaire de contact avec labels et validation native.
  3. Styliser avec variables CSS + layout responsive en grid/flex.
  4. Ajouter du JavaScript: menu mobile, validation personnalisee, interactions.
  5. Ecrire un script Bash (.sh) pour backup du dossier de projet.
  6. Ecrire un script Batch (.bat) equivalent pour Windows.
  7. Appliquer les headers de securite et verifier les points XSS basiques.
  8. Refaire les quiz HTML/CSS/JS/Bash jusqu a obtenir 8/10 minimum.

Exemple de structure de projet

mon-projet/
  index.html
  style.css
  app.js
  scripts/
    backup.sh
    backup.bat
  assets/
    images/
    icons/