4. Les éléments
Un élément est ce qu'on voit dans une page. On écrit son nom, puis son contenu entre guillemets.
Titre, sous-titre et texte
page "carte" :
titre "La carte"
soustitre "Les entrées"
texte "Soupe du jour, salade de saison."
soustitre "Les desserts" avec niveau 3
texte "Tarte aux pommes, glace vanille."soustitre ouvre une partie de la page (niveau 2 par défaut, jusqu'à 6). Garde l'ordre des niveaux, sans en sauter : les lecteurs d'écran s'en servent pour parcourir la page.
Dans un bloc placé sous un sous-titre, un soustitre descend d'un niveau tout seul : la carte d'une section devient un niveau 3. Dans une section, le premier sous-titre est le titre de la section, même rangé dans son propre bloc ; tous les autres sous-titres de la section descendent d'un niveau. avec niveau reste possible pour choisir soi-même.
page "accueil" :
titre "Accueil"
section :
soustitre "Nos pages"
grille :
bloc :
soustitre "Exemples"
texte "Six applications à essayer."Dans un titre, un soustitre ou un texte, {accent "…"} met quelques mots en valeur avec la couleur de marque. Le texte reste lisible normalement par les lecteurs d'écran et dans le titre de l'onglet.
page "offre" :
titre "Une offre {accent "simple"}"
texte "Prix : {accent "gratuit"} pour toujours"Listes
liste : crée des puces ; liste numerotee : numérote chaque élément. Chaque instruction du bloc devient une entrée.
page "guide" :
liste :
texte "Installer Node.js"
texte "Créer le projet"
liste numerotee :
texte "Écrire le fichier"
texte "Compiler"Code dans une phrase
Dans un texte, un morceau de code s'écrit entre accents graves, comme dans toutes les documentations : il s'affiche à chasse fixe, tel quel, guillemets et accolades compris. {code "…"} fait la même chose.
page "guide" :
texte "Écris `titre` pour donner un titre."
texte "Un texte : `texte "Bonjour {prenom}"`."Bloc de code
code langage : recopie les lignes indentées sans les interpréter ; le langage est facultatif.
page "guide" :
code humalis :
page "accueil" :
titre "Bienvenue"avec animation frappe écrit le code lettre par lettre, avec un curseur ; avec animation frappe au defilement attend que le bloc arrive à l'écran. Le vrai code reste en place pendant la frappe (lecteurs d'écran, bouton Copier), et il s'affiche tout de suite si la personne a demandé de réduire les animations. Sur le téléphone, le code s'affiche entier.
page "accueil" :
code humalis avec animation frappe :
page "boutique" :
titre "Nos produits"
bouton "Commander"Tableau
Un tableau a une légende, des colonnes et des rangées de même largeur. Une traduction peut suivre chaque cellule.
langues :
francais
anglais
page "guide" :
tableau "Les commandes" en anglais "Commands" :
colonnes "Commande", "Rôle" en anglais "Role"
rangee "humalis compile", "produit le projet" en anglais "builds the project"Image
page "profil" :
titre "Mon profil"
image "photo.png" avec description "Photo de profil"Chaque image a une description : c'est ce que lit un lecteur d'écran, et ce qui s'affiche si l'image ne charge pas. Une image purement décorative s'écrit avec decoratif.
Bouton et lien
page "accueil" :
titre "Accueil"
bouton "Commencer"
lien "En savoir plus" vers "a_propos"
page "a_propos" :
titre "À propos"Un lien mène à une page (vers "a_propos") ou à une adresse web (vers "https://exemple.fr"). Un bouton déclenche une action (voir les événements).
Champ
Un champ est une zone où la personne écrit. Sa sorte s'écrit juste après champ :
page "inscription" :
titre "Inscription"
formulaire "inscription" :
champ "Nom" avec obligatoire
champ email "Email" avec indice "toi@exemple.fr"
champ telephone "Téléphone"
champ nombre "Âge" avec minimum 0 et maximum 130
champ date "Naissance"
champ heure "Heure d'appel"
champ mot de passe "Mot de passe"
champ texte long "Présentation"
champ adresse web "Site"
bouton "S'inscrire"
quand le formulaire "inscription" est soumis :
afficher "Bienvenue"Chaque cible choisit la bonne saisie : le bon clavier sur un téléphone, le bon type de champ dans le navigateur. Les options : obligatoire, indice "…" (le texte gris d'un champ vide), et pour un nombre minimum et maximum.
Les choix
page "commande" :
titre "Commande"
variable pays = ["France", "Belgique", "Suisse"]
formulaire "commande" :
choix "Taille" parmi ["S", "M", "L"] avec obligatoire
liste deroulante "Pays" parmi pays avec indice "Choisis un pays"
case a cocher "J'accepte les conditions" avec obligatoire
bouton "Commander"
quand le formulaire "commande" est soumis :
si champ "Taille" est egal a "L" :
afficher "Grande taille"
afficher "Commande envoyée"