Éditeur de Sites Internet Professionnel « Edelweiss » - Lot 2 v4.15 🟢 Vert

Application autonome en une seule page HTML : elle fonctionne en local, sur un ordinateur, sans dépendre d'aucun service extérieur ni d'aucun abonnement.

Ci-dessous, les 47 blocs de l'Éditeur de Sites Internet, qui servent à construire les pages HTML. Pour les voir tous en action, bloc par bloc, avec des exemples et des astuces, visitez la rubrique « Les 47 blocs » du Mini-Site. Un mémo des 47 blocs, à imprimer, se trouve aussi tout en bas de cette page.

📂 Reprendre ou commencer une page
Choisissez un fichier HTML créé avec ce générateur pour le modifier, ou videz le formulaire pour en commencer une nouvelle — le Plan du Site déjà chargé ci-dessous reste en mémoire dans les deux cas.
0. Menu & Rubriques du site

Le menu du haut de vos pages, et la liste des rubriques disponibles ci-dessous, viennent de votre « Plan du Site ». Vous pouvez le modifier librement — aucune ligne de code à toucher.

🪪 Identité du site

Utilisée quand la page n'a pas de photo. Sinon, c'est la première photo de la page qui sert d'aperçu.

Une image carrée de préférence (PNG, JPG, SVG…). Elle est réduite automatiquement et rangée dans votre Plan du Site : aucun fichier à déposer à part. Laissez vide pour ne pas mettre d'icône.

PNG avec fond transparent conseillé. Le logo s'affiche au-dessus du nom du site. Il est rangé dans votre Plan du Site, comme le favicon. Laissez vide pour ne pas afficher de logo.

C'est vous qui choisissez le média — tant qu'aucun n'est choisi, l'Accueil garde son bandeau actuel, inchangé.

Ces trois champs sont enregistrés dans votre plan-du-site.json (bouton « Enregistrer » ci-dessous). Pour un nouveau sous-domaine : changez-les ici, enregistrez le Plan, et déposez-le à la racine du nouveau site. Le nom et la devise des pages déjà publiées se mettent à jour automatiquement (comme le menu) ; seul le nom du copyright demande de régénérer les pages.

1. Informations de la page

0 caractère — idéal : entre 120 et 160.

Sert à l'adresse officielle de la page et à l'aperçu de partage. Il est retrouvé tout seul quand le titre figure dans le Plan du Site ; il sert aussi de nom au fichier téléchargé.

La liste se remplit selon la « Rubrique de navigation » choisie ci-dessous — plus de risque de faute de frappe, et l'Emplacement se règle alors avec certitude.

Si vous choisissez une rubrique, un rappel s'affichera pour vous inviter à ajouter cette page dans l'onglet « Menu / Rubriques / Sous-Rubriques » après téléchargement.

Suggéré automatiquement selon vos champs Rubrique de navigation et Sous-rubrique ci-dessus — vérifiez toujours qu'il correspond à l'endroit réel où vous allez déposer ce fichier, modifiable si besoin. Ce choix règle les liens de la page (menu, fil d'Ariane) et les chemins vers vos photos.

2. Contenu de la page

Ajoutez autant de blocs que vous voulez, dans l'ordre souhaité (flèches ↑↓ pour réordonner, ✕ pour supprimer).

Texte & encadrés

Mise en page

Murs médias

Médias

Accès protégé

Interaction

3. Voir le résultat

📝 Mémo — l'essentiel en quelques lignes

  1. Remplir le titre, puis ajouter vos blocs de contenu (paragraphes, photos, vidéos…).
  2. Mettre un mot en gras : entourez-le de deux astérisques. Exemple : un mot **important** deviendra « un mot important ».
  3. Mettre un mot en italique : entourez-le d'une seule étoile. Exemple : un mot *discret* deviendra « un mot discret ».
  4. Insérer un sous-titre au milieu d'un paragraphe : commencez une ligne par ## (avec un espace après) pour un titre qui apparaîtra aussi dans la table des matières, ou par ### pour un titre plus discret qui n'y apparaîtra pas.
  5. Rendre un mot cliquable (lien Internet) : sélectionnez le mot dans votre texte, cliquez sur le bouton 🔗 Insérer un lien, collez l'adresse — c'est tout. La formule [[mot => adresse]] s'écrit toute seule, et le lien s'ouvrira dans un nouvel onglet. Vous pouvez aussi taper la formule à la main si vous préférez.
  6. Ajouter une photo : ① réduisez son poids (voir le topo « blocs médias ») ; ② déposez le fichier dans le dossier medias/photos/ de votre site ; ③ dans le bloc Photo, écrivez seulement le nom du fichier (ex. ma-photo.jpg).
  7. Vidéo : déposez-la sur YouTube ou dans votre pCloud Public Folder (fichier .mp4), puis collez son adresse dans le bloc Vidéo.
  8. Page protégée : cochez « 🔒 Protéger cette page » (onglet « Information Page ») et choisissez un mot de passe de 12 caractères minimum. Le contenu est réellement chiffré : sans le mot de passe, impossible de le lire. Conservez-le précieusement — il n'est enregistré nulle part.
  9. Diaporama : une photo par ligne, format nom-fichier.jpg | Ma légende. Flèches, pastilles, clic pour agrandir — tout est automatique.
  10. Aperçu pour vérifier, puis Télécharger la page. Déposez le fichier HTML sur pCloud — c'est tout. Rien d'autre à faire, pas de style.css à gérer.
  11. La table des matières se fabrique toute seule dès qu'il y a au moins deux sous-titres.
  12. Code HTML (iFrame) : pour intégrer un formulaire Google, une vidéo Canva ou tout autre contenu d'un site de confiance. Sur ce site, cliquez sur son bouton « Intégrer » ou « Partager », copiez le code proposé, et collez-le tel quel dans ce bloc — sans le modifier. Ce bloc est le seul qui accepte du vrai code : tous les autres blocs protègent votre texte en l'affichant tel quel, celui-ci fait confiance à ce que vous collez, donc ne l'utilisez qu'avec du code venant d'un site que vous connaissez.

🧩 Mémo — les 47 blocs en un coup d'œil (v4.11)

Tous les blocs de l'Éditeur, rangés par famille, avec un petit mot pour chacun.

✍️ Textes (11 blocs)

  1. Sommaire Sticky — Le sommaire fixe sur le côté ; peut lister les vidéos (v4.09).
  2. Paragraphe — Le bloc de base : texte, gras, italique, couleurs, intertitres, listes, liens.
  3. Sous-titre — Un grand titre de partie ; il alimente le sommaire de la page.
  4. Citation — Un texte mis en valeur dans un encadré, en italique.
  5. Actualité datée — Une annonce précédée de sa date : événement, sortie, nouveauté.
  6. Liste de slogans — Des phrases courtes, une par ligne, mises en avant.
  7. Grille de réflexions — Des cartes « titre + texte » rangées en grille.
  8. Onglets — Plusieurs textes dans le même espace, un clic par onglet.
  9. Texte qui défile — Un bandeau de texte qui défile, comme une enseigne.
  10. 2 colonnes : texte fluide — Un seul texte réparti tout seul sur deux colonnes, comme un journal.
  11. Tableau — Lignes et colonnes ; en-tête fixe, fiches sur téléphone, format A4 (v4.08).

🧱 Mise en page (13 blocs)

  1. 2 colonnes : texte | photo — Le texte à gauche, la photo à droite.
  2. 2 colonnes : photo | texte — La photo à gauche, le texte à droite.
  3. 2 colonnes : texte | vidéo — Le texte à gauche, la vidéo à droite.
  4. 2 colonnes : vidéo | texte — La vidéo à gauche, le texte à droite.
  5. 2 colonnes : photo | vidéo — Une photo et une vidéo côte à côte.
  6. 2 colonnes : vidéo | photo — Une vidéo et une photo côte à côte.
  7. 1/3 Image | 2/3 Texte — Une petite image, un texte large et un bouton.
  8. 2/3 Texte | 1/3 Image — Un texte large, une petite image et un bouton.
  9. 1/3 Code | 2/3 Texte — Un contenu intégré (carte, agenda…) à côté d'un texte.
  10. 2/3 Texte | 1/3 Code — Un texte à côté d'un contenu intégré.
  11. Photo + Programme — Une photo et un programme horaire, pour une sortie ou une fête.
  12. Séparateur décoratif — Un trait entre deux parties : filet, vague, crête de montagne.
  13. Espaceur Horizontal — Un espace vide, petit ou grand, pour aérer la page.

📷 Photos (5 blocs)

  1. Photo — Une photo avec sa légende ; un clic l'agrandit.
  2. Galerie de photos — Plusieurs photos en grille, à agrandir une par une.
  3. Mosaïque Photos & Texte — Des cases mêlant photos et textes colorés.
  4. Diaporama — Photos, textes ou vidéos qui défilent, avec musique de fond possible.
  5. Section épinglée — Une image fixe pendant que des légendes défilent par-dessus.

🎬 Vidéo et son (6 blocs)

  1. Vidéo — Une vidéo YouTube ou un fichier .mp4 / .mov (pCloud…).
  2. Vidéo double — Deux vidéos côte à côte (l'une sous l'autre sur téléphone).
  3. Mur de Vidéo — Une vidéothèque sur deux colonnes ; signale les doublons (v4.10).
  4. Jukebox (pur audio) — Une grille de morceaux .mp3 à écouter.
  5. Jukebox YouTube — Morceaux audio et vidéos mélangés dans la même grille.
  6. Podcast — Un lecteur audio pour un enregistrement, avec son titre.

🔗 Liens et outils (8 blocs)

  1. Groupe de boutons ronds — Une rangée de boutons vers d'autres pages ou parties.
  2. Lien commenté — Des boutons vers des sites extérieurs, ouverts dans un nouvel onglet.
  3. Listing YouTube / Facebook / Sites Web — Une liste de liens triée, avec recherche et repérage des doublons.
  4. Document PDF — Un PDF affiché dans la page, avec un lien pour l'ouvrir.
  5. Code HTML — Un contenu fourni par un autre site, collé tel quel.
  6. Lien protégé par code — Un téléchargement réservé, ouvert avec un code à 6 chiffres.
  7. Formulaire — Messages, avis ou témoignages reçus par e-mail, sans adresse visible.
  8. Recherche sur le site — Une case pour chercher un mot dans toutes les pages.

⚙️ Automatiques (4 blocs)

  1. Plan du site — L'arbre complet des rubriques et des pages, tiré du Plan.
  2. Page d'Information — La liste des seules pages « En ligne ».
  3. Date de mise à jour du site — « Site mis à jour le… », à la date du téléchargement.
  4. Date de mise à jour de la page — « Page mise à jour le… », à la date du téléchargement.
Comment ça marche : ① choisissez la rubrique ; ② saisissez le titre et le nom de fichier de votre nouvelle page ; ③ cliquez sur « Générer ». L'outil vous livre les fichiers mis à jour, prêts à déposer sur pCloud.

📋 Votre Menu actuel — Rubriques et Sous-rubriques

➕ Créer une nouvelle Rubrique ou Sous-rubrique
Type

Toujours en minuscules, sans accent, sans espace — calculé pour vous à partir du titre, pour éviter toute erreur.

Étape 1 — Choisissez la rubrique

Rubrique du site
🖼️ Bandeau de cette rubrique (photo ou vidéo en fond)

C'est vous qui choisissez le média — tant qu'aucun n'est choisi, cette rubrique garde son bandeau actuel, inchangé. Toutes les pages de cette rubrique partagent le même bandeau ; les sous-rubriques reprennent automatiquement celui de leur rubrique parente. Pensez à « 💾 Enregistrer mon Plan du Site » après un changement.

Étape 2 — Pages déjà dans cette rubrique

Liste actuelle

Étape 3 — Ajoutez une nouvelle page

Nouvelle page

Sans accents ni espaces — utilisez des tirets.

Facultatif : pour regrouper vos pages sous des titres, comme « Éducation Populaire » ou « Économie Sociale et Solidaire ».

La rubrique et la sous-rubrique de cette page sont déjà prises en compte automatiquement — inutile de les répéter ici. Ce champ ne sert que si la page se trouve encore plus profond, dans un dossier créé exprès à l'intérieur de la sous-rubrique (ex. un classement par année). Dans le doute, laissez-le vide.

Étape 4 — Générer les fichiers mis à jour

✅ Fichiers prêts à télécharger

Téléchargez ces fichiers et déposez-les sur pCloud à la place des anciens, dans les mêmes dossiers.

📝 Mémo — l'essentiel

  1. Chargez votre Plan du Site à jour en tout début de session, si ce n'est pas déjà fait.
  2. Choisissez la rubrique dans laquelle vous avez créé votre page.
  3. Vérifiez la liste actuelle — supprimez si besoin.
  4. Ajoutez votre nouvelle page : titre + nom du fichier HTML (ex. ma-page.html).
  5. Cliquez sur « Générer les fichiers ».
  6. Téléchargez les fichiers livrés (dont le Plan du Site à jour) et déposez-les sur pCloud à la place des anciens.
  7. Le badge « En ligne » = page publiée. « En préparation » = à venir. « Nouveau » = récemment ajoutée.