Grognon <Qlam>

More is less

Documentation

Table des matières
Styles typographiques
Titres
Listes
Tables
Code
Liens
CSS
Javascript
Entête
Divers

Styles typographiques

Les styles de caractères disponibles sont

Italique
S'obtient avec '/italique/'
Résultat : italique
Gras
S'obtient avec '*gras*'
Résultat : gras
Souligné
S'obtient avec '_souligné_'
Résultat : souligné

Ces styles peuvent être imbriqués. Le code :

Normal '/italique '*gras et italique/' gras*' normal

donnera :

Normal italique gras et italique gras normal

Remarque : On peut modifier ces styles par des feuilles css.

Table des matières

Titres

En html il existe six niveaux de titres nommés <h1>, ..., <h6>. La balise Qlam pour les invoquer est du type #1, ..., #6. En plus Qlam crée une ancre de même nom. Exemple le titre de ce pargraphe a été codé ainsi :

#3 Titres

Ce code est un raccourci pour :

<a id="Titres"></a>
<h3>Titres</h3>

Comme pour tous les éléments de la page, on ajuste les styles de présentation à son goût dans la ou les feuilles css.

Table des matières

Listes

Listes à puces

Code :

- Ligne 1
- Ligne 2
- Ligne 3

Résultat :

Listes numérotées

Code :

+ Ligne 1
+ Ligne 2
+ Ligne 3

Résultat :

  1. Ligne 1
  2. Ligne 2
  3. Ligne 3

Listes imbriquées

On peut imbriquer des liste en plaçant des tabulation au début de la ligne : Une tabulation par profondeur d'imbrication.

Code:

- Ligne 1
	+ Ligne 11
	+ Ligne 12
- Ligne 2
- Ligne 3

Résultat :

Listes en définition

Code :

? Mot 1
	Définition de Mot 1
? Mot 2
	Définition de Mot 2

Résultat :

Mot 1
Définition de Mot 1
Mot 2
Définition de Mot 2

Table des matières

Tables

Code

#table
Décimal|Français|English
1      |un      |one
2      |deux    |two

L'alignement des caractères délimiteurs n'a aucune importance. Il peut ajouter au confort pour le rédacteur.

DécimalFrançaisEnglish
1 un one
2 deux two

La balise #table accepte des arguments comme

Table des matières

Code

Un style en ligne particulier est :

Code
S'obtient avec ‵<code>‵
Résultat : <code>

La balise qui encadre ce style est l'apostrophe inversée, obtenue par la touche [AltGr 7].

Ce style utilise une police à chasse fixe (monospace). Aucun style n'est interprété à l'intérieur. Exemple :

texte '/interprété/' <br> `code '/non interprété/' <br>`

donnera :

texte interprété
code '/non interprété/' <br>

La balise html <br> a été interprétée au début, mais pas à la fin.

Une variante de style sous forme de bloc de code (balise html <pre>) est la suivante. Elle commence par la ligne #code et se temine par une ligne vide.

Exemple ::

#code
#!/usr/bin/env python3
from math import sqrt # racine carrée
def diviseurs(a):
	L = []
	for n in range(1, int(sqrt(a)) + 1):
		if a % n == 0:
			if n == a//n: 
				L.append(n)
			else: 
				L.extend([n, a//n])
	L.sort()
	return L

va donner :

#!/usr/bin/env python3
from math import sqrt # racine carrée
def diviseurs(a):
	L = []
	for n in range(1, int(sqrt(a)) + 1):
		if a % n == 0:
			if n == a//n: 
				L.append(n)
			else: 
				L.extend([n, a//n])
	L.sort()
	return L

Remarque : On peut fournir à la balise #code un nom de classe, définie dans un fichier css. (Cf. Pages css

Table des matières

Liens

Ancre

Les liens de ce document vers le haut de la page sont codés ainsi :

[Table des matières->#top]

Liens

Liens internes au document
Syntaxe : [Table des matières->#top]
Résultat : Table des matières
Liens internes au site
Syntaxe : [Retourner à l'acceuil->index.html]
Résultat : Retourner à l'acceuil
Lien externe
Syntaxe : [Voir le site grognon->http://arad.free.fr]
Résultat : Voir le site grognon

Notes de bas de pages

Les notes de bas de page sont des liens particuliers dont la syntaxe a été simplifiée. Dans le texte on réalise un renvoi en bas de page avec le code #[1]. Essayez (1)

La note de bas de page proprement dite se fait avec une simple ancre.

#:1 (1) Note de page n°1 

Table des matières

CSS

On peut charger dans l'entête du document autant de feuilles css qu'on le souhaite. En cas de conflit la dernière recouvre les précédentes. La balise pour charger une feuille css est :

#style perso.css

Elle est un raccourci de la balise html :

<link rel="stylesheet" type="text/css" href="css/perso.css">

Les styles définis dans les pages css peuvent être utilisées soit pour surcharger les styles par défaut, soit pour définir des styles particuliers pour les balises bloc : #code, #div, #table.

On peut aussi écrire à tout moment du code html et faire appel au css.

Exemple :

<div class="truc">
... <span class="emph"> .. </span>
</div>

Table des matières

Javascript

On peut invoquer du javascript soit directement en place soit à partir d'un fichier externe.

Javascript en ligne

Exemple :

#js 
var now = new Date();
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
document.write('Il est ' + h + ':' + m + ':' + s); 

Ce petit javascript va afficher l'heure :

Inclure un script à partir d'un fichier

Une autre façon d'insérer un script à partir d'un fichier externe. Ici un fichier date.js a été préparé dans le dossier script. C'est le même script que ci-dessus. L'argument de la balise #js est le nom du fichier, sans indication de du dossier script.

#js date.js

Le résultat est ici :

Cette balise correspond à

<script src="script/date.js">

Cette balise peut être utilisée dans l'entête, généralement pour inclure une librairie javascript comme par exemple LaTeXMathML.js

Table des matières

Entête

L'entête est placée au début du fichier. Cette entête constitue le <head> du fichier html. Elle peut comprendre

Exemple d'entête :

#meta charset="utf-8"
#meta name="description" content="Blog "
#meta name="keywords" content="linux, c++, c, python, code, bash"
#meta name="author" content="Grognon"
#meta name="viewport" content="width=device-width, initial-scale=1"
#meta name="genrator" content="qlam"
#link rel="icon" type="image/png" href="favicon.png"
#style style.css
#style menu.css
#title Titre de la page

Table des matières

Divers

Inclure du html

Il existe deux balises d'inclusion de code html :

Inclure tout un fichier
#inchtml fichier.html

Va inclure dans le document à l'endroit où est placée la balise, le contenu d'un fichier. Peut-être utile pour inclure des bouts de code utiles à certaines pages du site.

Editorial
#editorial page.html

Cette fonctionnalité permet d'intégrer un article dans une page. Essentiellement elle permet de faire figurer un éditorial dans la page d'acceuil.

Table des matières

Utilisation pour rédiger son courrier

Il faut créer un dossier courrier avec au moins les sous-dossiers css et qlm. On prépare une feuille modèle lettre.qlm (2) avec l'entête, l'expéditeur, la date, etc. Cette feuille sera insérée dans chaque nouvelle lettre.

On rédige sa lettre comme pour un site. On compile le fichier

qlam -l "nouvelle lettre.qlm"

L'option -l évite d'imprimer le footer.

On obtient un fichier html qu'on transforme en pdf dans firefox ou avec une application comme wkhtmltopdf.

Table des matières


Notes
(1)

Exemple de note de fin de page.

Revenir à Notes de bas de pages

(2)

Exemples de lettre.qlm et de lettre.css.


Réalisé avec Qlam - LGPL