Paris, photo, humeurs, un peu de HTML/CSS pour faire sérieux. Feinte innocence et vraie naïveté (ou vice-versa). Encore un blog qui agite ses petits bras en couinant "Viens me lire !"
Note de novembre 2008 : cet article, relu calmement, est aussi énervant que le reste de la série. En attendant de casser et refaire les cinq articles, je les laisse en ligne uniquement parce qu'ils contiennent quelques tuyaux utiles, mais noyés dans un fatras innommable. Lisez plutôt le tutoriel du Site du Zéro.
J'aurais bien voulu que ce soit le dernier article de la série, mais si vous ne maîtrisez guère que les bases de Word ou le bloc-notes de Windows, ce qui suit vous rendra service pour la suite.
Si vous êtes déjà familier du maniement d'un éditeur de texte lisez tout de même ce papier – ne serait-ce que pour m'en signaler les bourdes éventuelles.
Réfléchissons un peu…
S'occuper d'un blog OverBlog, ça se ramène à quoi ? À saisir des bouts de HTML (articles, haut et bas de page, des parties de modules) venant s'insérer dans un "squelette" fourni par OverBlog. À ceci vient s'ajouter le contrôle intégral de la présentation et même de la disposition de ce "squelette" par l'intermédiaire du fichier CSS et des options de configuration de l'admin OB.
Quel est le fil directeur de toute cette série d'articles ? Trouver le moyen de préparer aussi tranquillement que possible une modification de chacun de ces éléments sur son propre PC (autrement dit, en local) pour, ensuite, intervenir à coup sûr sur son blog plutôt que de stresser comme un malade en expérimentant à même la bête.
Les deux premiers articles préparaient le terrain, le troisième parlait des deux gros morceaux que sont les articles et le CSS. Restent maintenant les "petits bouts" qui, curieusement, demandent plus de réflexion et une meilleure connaissance de l'éditeur que le reste.
Et pourquoi donc ? Les pages HTML qui constituent votre blog sont produites automatiquement par l'assemblage des morceaux de texte dont nous avons parlé. Ce code HTML, s'il est syntaxiquement correct (encore heureux !) ne peut pas être aussi proprement disposé que du code écrit à la main, avec une belle disposition hiérarchique (indentation), peut-être quelques commentaires explicatifs, etc.
Et alors ? Puisque ça marche très bien comme ça, pourquoi chercher plus loin ?
Alors : pour travailler en local, vous allez évidemment taper du code (module, haut et bas de page) directement dans votre fichier HTML local. Mais, évidemment toujours, pas n'importe où : seulement aux endroits où, sur le "vrai" blog, l'administration d'Over-Blog permet d'intervenir. Aucun espoir, par exemple, d'agir sur l'en-tête <head> de vos "vraies" pages comme nous l'avons fait dans les précédents articles pour redéfinir le titre ou permettre de changer de CSS. D'accord ? Pour réduire le risque d'erreur, il faut donc que ces points d'intervention autorisés soient bien visibles. Première raison de remettre en forme le code des fichiers locaux.
En outre, pour intervenir en connaissance de cause, il est utile que la structure de la page HTML ressorte clairement, avec tous ses emboîtements de <div>, de <ul>, ses classes et ses identifiants disséminés un peu partout, et tout le reste. Conviction personnelle : il est toujours utile de comprendre ce qu'on fait (j'aurais été un très mauvais bidasse), et voilà une deuxième raison de remettre le code en forme.
Ce code est, euh… plantureux et il serait très imprudent de s'y attaquer sans en savoir un peu plus sur les possibilités de l'éditeur de texte. Voilà pourquoi je vous inflige aujourd'hui un (petit) cours sur Notepad++.
Le prochain papier utilisera ce cours pour remettre le HTML en ordre – encore des copies d'écran en perspective.
Le suivant (et ultime, promis !) sera enfin concret : organiser le travail sur les modules, le haut et le bas de page.
Après quoi, je pense parler d'autre chose pendant quelque temps…
Nous allons nous faire la main sur du travail déjà réalisé dans le deuxième article, à savoir la remise en forme de l'en-tête. Voilà ce à quoi nous étions parvenus :
Ouvrez donc ce fichier avec Notepad++.
Remarque : les CR LF sur fond noir (=les retours à la ligne) s'affichent ou se masquent grâce à l'option "Afficher tous les caractères" du menu "Affichage" ou avec le bouton en "P" inversé de la barre d'outils. Affichez-les donc, ça sert toujours.
Ce nouveau texte est plus agréable à l'œil (non ?) mais surtout la hiérarchie des marges de gauche correspond à la hiérarchie du code.
Clarifions : les éléments meta, title et link sont à l'intérieur de l'élément head, on ( = vous !) les a donc décalés par rapport à lui. Ils sont tous à la même "profondeur" par rapport à lui (un seul étage d'inclusion), ils sont donc tous décalés de la même manière. Le repère </head> qui, lui, "fait écho" au repère <head> puisqu'à eux deux ils délimitent l'élément head, est disposé avec la même marge que lui.
Au passage, vous avez noté la nuance subtile entre "repère" (encore appelé "balise") et "élément" ? Le repère, c'est une notion purement typographique et syntactique : c'est ce qui va de "<" à ">", c'est un signe, comme les panneaux routiers à l'entrée et la sortie d'une ville. L'élément, c'est une notion plus "sémantique", c'est ce que désigne le repère, qu'il soit unique (<meta>, <link>, <br> par exemple), ou en paire ouverture/fermeture – c'est l'information que véhicule votre page – c'est, en somme, la ville. Expirez un coup, fermez les yeux : c'est plus long à expliquer qu'à comprendre, il suffit d'y faire attention une fois dans sa vie pour tout piger.
Et alors ? Qu'est-ce que ça nous apporte ? Regardez la copie d'écran : vous voyez les petites "touches" carrées, juste à côté des numéros de ligne ? Cliquez sur celle qui est à côté du repère <head> (nan, pas sur l'image de l'article mais dans Notepad++ !) et observez le changement :
Tout l'élément head a disparu, "replié" en une seule ligne, et le "-" est devenu un "+". Vous avez déjà utilisé le mode "Plan" de Word ? C'est le même principe : si vous appuyez sur le "+", le texte se "dépliera" de nouveau.
Repliez-le de nouveau, et fermez l'élément body :
Illustration directe du fait qu'une page HTML se compose en tout et pour tout d'un en-tête et d'un corps.
Poussons la logique jusqu'au bout et fermons l'élément html :
Ça peut presque servir à faire une présentation animée ! "Une page HTML commence par une ligne DOCTYPE pour préciser la version du langage utilisée ; cette ligne est suivie d'un élément html. Celui-ci se décompose à son tour en un élément head suivi d'un élement body".
Autrement dit : non seulement Notepad++ connaît la liste des mots-clés de HTML (et fait sa peinturlure en conséquence), mais il "comprend" aussi la hiérarchie d'éléments que décrivent ces mots-clés et vous permet de moduler l'affichage à votre guise.
Relisez ce qui précède, expérimentez avec l'éditeur jusqu'à être sûr d'avoir bien compris, ça n'a pas fini de vous rendre service.
Si vous regardez bien, vous verrez que nous avons procédé à la suppression de quelques lignes et à deux sortes de changements dans la mise en page du texte :
Ne blêmissez pas trop vite, il existe un moyen simple et élégant de s'en sortir. Démonstration avec les deux lignes qui indiquent où sont les feuilles de style :
Elles sont sélectionnées (=le fond gris). En appuyant sur Maj+Tab, elles "glissent" d'un cran vers la gauche (la taille de ce cran se règle dans le menu Paramétrage/Préférence, onglet MISC, champ Paramétrage de Tab). Résultat :
Si on répète l'opération, Notepad++ n'est pas "brutal" : si le texte d'une ligne atteint le bord gauche, elle y reste et rien n'est effacé alors que les autres lignes du bloc continuent de glisser vers le bord gauche. Démonstration :
Toutes les lignes sont désormais cadrées à gauche. Pour les déplacer d'un ou plusieurs crans vers la droite, il suffit d'appuyer une ou plusieurs fois sur Tab :
Plus commode et, surtout, plus sûr que de jouer bestialement avec la barre d'espace et la touche "Delete". Faites l'essai vous-même.
Pour ce qui suit je me servirai du fichier CSS – il vous est sans doute plus familier que le HTML broussailleux de votre blog. Tout ce qui précède et tout ce que je vais expliquer ici est bien sûr applicable à tout type de fichier ouvert avec Notepad++.
Le gros problème du fichier CSS, c'est qu'il est LONG. Et même avec des commentaires intelligents et bien placés, il n'est pas facile de s'y repérer. Par ailleurs, il est beaucoup moins hiérarchisé que du HTML : les règles se rédigent indépendamment les unes des autres, pas moyen de définir de beaux blocs à plier et déplier comme on veut.
Par exemple, comment "naviguer" rapidement du début des règles applicables à un module au début des règles applicables à un autre ?
On peut déjà mettre un commentaire avec le mot "MODULE" et le nom du module au début de chaque groupe de règles (d'ailleurs OB l'a déjà fait !), puis se servir de la recherche de caractères pour passer d'une section à l'autre. C'est mieux que rien, mais reste assez lourd.
Notepad++ fournit un moyen simple et pratique de se repérer dans un fichier. Allez au début du module "Calendrier" :
Cliquez juste à droite du numéro de la ligne (141) : il apparaît une jolie pastille jaune.
Maintenant allez au début de, par exemple, le module "Albums photo" et posez une autre pastille :
Si vous voulez en poser d'autres ailleurs dans le fichier ne vous gênez pas, leur nombre n'est pas limité. Pour supprimer une pastille, il suffit de cliquer à nouveau dessus – n'allez surtout pas supprimer la ligne !
Dès lors, une pression sur F2 vous promène d'une pastille à la suivante. Confort supplémentaire, on boucle automatiquement de la dernière pastille à la première. Très pratique.
Ce marquage n'est pas ajouté au fichier, il est donc perdu quand on ferme le fichier. Ce n'est pas plus mal : les commentaires (qui font partie du fichier) constituent un "balisage" permanent (de la documentation, en somme), les pastilles ne sont que des signets utiles pour une séance de travail.
Vous avez vu que Notepad++ permet d'ouvrir plusieurs fichiers (mettons dix) à la fois, chacun dans son onglet, et vous avez trouvé ça pratique. Peut-être que, soigneux, vous avez fermé un à un ces dix onglets à la fin de la séance ? Et que, la fois suivante, vous avez pesté pour retrouver chacun de ces dix fichiers ? Puis, l'ayant retrouvé, vous avez encore pesté pour savoir où vous en étiez resté ?
Dommage, il y a plus simple : fermez tout bonnement la fenêtre de Notepad++, avec tous ses onglets (évidemment, il vous demandera de sauvegarder les fichiers avant de les fermer). Quand vous rouvrirez l'éditeur avec, par exemple, le raccourci "Notepad++" présent sur le bureau, il ne vous proposera pas un fichier vierge : il repartira gentiment avec tous les onglets que vous aviez laissés ouverts. Par-dessus le marché, chaque fichier sera placé au point où vous l'aviez quitté, même si ce n'était pas le début ou la fin. Gros gain de temps et d'énervement.
Et nous voilà parés pour la dernière ligne droite.
Je vous laisse, j'ai du travail (voir ici)
![[CSS] Marges courbes : derniers mots](https://image.over-blog.com/gw19mp5r7T7XCQ6rM02-5bERbWE=/400x260/smart/filters:no_upscale()/idata%2F0386897%2Fpharma%2Fmargescourbes%2FPoireArtyRogneG.png)
![[CSS] Marges courbes : solution](https://image.over-blog.com/MLk_D_jQ873MGK1i62mvfECzz_Q=/400x260/smart/filters:no_upscale()/idata%2F0386897%2Fpharma%2Fmargescourbes%2FPoireMini.png)