premiers pas
Editez cette page pour voir le code et jouez avec les boutons du navigateur « Précédent » et « Suivant » pour basculer rapidement du code au résultat, le texte balisé qu'il faut écrire et l'affichage correspondant. Evitez de cliquer sur « save » ...
En ayant compris le principe simple et fondamental du langage utilisé, vous pourrez immédiatement composer des pages simples et progressivement, à votre rythme, monter vers des compositions plus sophistiquées.
Notez bien comment le titre initial, les quelques paragraphes qui suivent et certains mots sont simplement encadrés de couples de balises - des caractères alphabétiques entourés de crochets < et > - qui vont définir la façon dont ces textes doivent être affichées. Quelques explications :
- un mot (ou une portion de texte) encadré par les balises u et /u sera souligné ; devinez ce qui se passera avec les balises b et i !
- une portion de texte encadrée par les balises p et /p devient un paragraphe, avec un retour à la ligne avant et après. C'est cette balise qui fixe la nature de la police utilisée, sa taille, sa graisse et divers autres effets de style comme la justification à gauche et droite. Il est parfois nécessaire d'introduire un retour à la ligne forcé à l'intérieur d'un paragraphe ; on utilise pour cela la balise br - break -.
- une portion de texte encadrée par les balises h1 et /h1 devient un titre de niveau 1, le niveau le plus haut, avec un retour à la ligne avant et après ; on peut de la même façon définir des titres de niveaux 2, 3, 4, 5 et 6.
- cette liste de définition sur les balises est elle-même construite sur l'emboitement de balises ul - unordered list ou liste à puces - et li - list item ou article de liste -. Devinez ce qu'on peut faire avec la balise ol - ordered list - !
un peu plus loin ...
Vous savez maintenant écrire du texte structuré, et vous vous demandez normalement pourquoi il faut retourner dans la préhistoire du traitement de texte, quand on connaît les outils modernes comme Word où tout ceci peut se faire sans problème à l'aide de simples boutons et de raccourcis clavier, avec un affichage immédiat des effets souhaités, mise en gras, paragraphes séparés, etc... La réponse est simple ! Dès qu'il s'agit dans Word ou autre logiciel de ce genre d'appliquer une règle de style à une portion de texte, d'insérer de façon contrôlée une image ou de créer un lien vers des données externes, il faut en passer par des dialogues qui ne sont pas complètement évidents. Bon nombre d'utilisateurs de Word ignorent même ces fonctionnalités (utilisez-vous les règles de style ?) ou les utilisent de façon hasardeuse (insérez-vous les images ou des liens sur les images ?). Alors :
- pour ce qui est d'appliquer des règles de styles, c'est fait, baliser des titres, paragraphes, des listes, ... c'est appliquer des règles de styles !
- pour qu'un texte comme PIXAR devienne un lien il suffit d'utiliser la balise a : PIXAR devient PIXAR et un clic sur ce lien conduit au site http://www.pixar.com
- pour les images, voici une image contrainte à la hauteur 100 et une infobulle qui affiche "bon chienchien ça !" au passage du curseur :
... et ensuite ?
... prenez maintenant le temps de lire l'aide.
trop compliqué tout ça !
Pas vraiment convaincu ? Pas le temps ? Bon, alors il y a plus simple ! Il suffit simplement d'encadrer le texte entre les balises < pre > et < /pre >. Regardez bien ce qui suit entre les lignes de séparation :
Ce texte est entré directement, sans balise, tel quel, avec des retours à la ligne sans problème, sans devoir encadrer tout ça de balises < p > ou < br />. Les listes sont entrées facilement : - article 1 - article 2 1) article 21 2) article 22 3) article 23 - article 3 ... et c'est à peu près tout ce dont on a besoin pour l'essentiel. Rien n'empêche de mélanger les genres : - de réintroduire des balises élémentaires pour mettre en gras, en italique, - créer destitres
- insérer des images
Convaincu maintenant ?