Module HEADER

Définition de l'en-tête de la page

L'en-tête de page <head> est une section essentielle d'un document HTML. Elle contient des informations non visibles directement par l'utilisateur, mais indispensables au bon fonctionnement et à l'affichage de la page.

Cette section regroupe notamment les métadonnées, les liens vers les fichiers CSS, les scripts JavaScript, ainsi que les paramètres nécessaires au responsive et au référencement.

Structure HTML du <head>

Ce bloc initialise la page HTML avec les métadonnées essentielles, telle que l'encodage, la langue par défaut de la page et la partie responsive à privilégier.


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta id="viewport-meta" name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Définit les bases HTML et assure la compatibilité navigateur et responsive.
Métadonnées dynamiques

Ces balises utilisent PHP pour injecter dynamiquement des informations comme la description, les mots-clés et le titre de la page.


<meta name="description" content="<?php echo $description; ?>">
<meta name="keywords" content="<?php echo $tags; ?>">
<title><?php echo $title; ?></title>
Permet d'adapter le SEO et le contenu de chaque page dynamiquement.
Feuilles de style et polices

Chargement des styles principaux et de la police Google Fonts utilisée dans l'interface.


<link href="css/app.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
Définit le design global et la typographie de l'application.
Librairies & utilitaires

Plusieurs bibliotheques sont chargées pour enrichir les fonctionnalités de l'interface utilisateur.


<!-- JQuery -->
<script src="./librairies/jquery/dist/jquery.min.js"></script>

<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/151156fb11.js"></script>

<!-- Select2 -->
<link href="./librairies/select2/select2.min.css" rel="stylesheet" />
<script src="./librairies/select2/select2.min.js"></script>

<!-- Chart.js -->
<script src="./librairies/chartjs/dist/chart.js"></script>

<!-- CKEditor 5 -->
<script src="./librairies/ckeditor5/build/ckeditor.js"></script>

<!-- Full Calendar -->
<script src="./librairies/fullcalendar-6.1.20/dist/index.global.min.js"></script>

<!-- LC Emoji Picker -->
<script src="./librairies/LC-emoji-picker-1.1.1/lc_emoji_picker.js"></script>
  • jQuery : manipulation DOM simplifiée
  • Font Awesome : icônes
  • Select2 : selects améliorés
  • Chart.js : graphiques
  • CKEditor : éditeur de texte riche
  • Full Calendar : application JS pour mettre en place un calendrier/agenda intéractif
  • LC Emoji Picker : pour gérer les emojis dans les input et textarea
Ajoute des fonctionnalités avancées à l'interface utilisateur.
Highlight.js (style)

Charge le thème de coloration syntaxique pour afficher du code de manière lisible.


<link rel="stylesheet" href="./librairies/highlightjs/styles/atom-one-dark.min.css">