EPUB est comme nous l'avons vu une encapsulation de divers types de fichiers. Les plus importants sont les fichiers HTML qui constituent les "pages" du livre.
HTML est le langage bien célèbre du web. Il est la base de toutes les pages web qui existent. C'est un peu grâce à lui que le réseau des réseaux s'est développé publiquement. Car HTML est un langage très simple qui permet à chacun, moyennant quelques petites heures d'apprentissage, de diffuser des documents au monde entier. On a pas encore trouvé plus simple, et les langages ressemblant à HTML se sont multipliés comme la peste, mais pour le bonheur de nombreuses personnes.
Pour le détail des relations et usages des formats XHTML (epub2) et HTML (epub3), que nous ne détaillerons pas ici, veuillez vous reporter à l'article Wikipedia français Hypertext Markup Language : http://fr.wikipedia.org/wiki/Hypertext_markup_language
Si HTML a pu sembler abscons à certains, il a montré de réelles capacités au fil du temps. Il a évolué jusqu'à aboutir à la version 5 qui fait actuellement beaucoup parler d'elle dans les milieux spécialisés. HTML a été complété par d'autres technologies comme CSS, qui permettent de gérer la présentation graphique de la page, ou encore SVG qui permet de définir des images vectorielles. HTML et CSS sont sans conteste les standards les plus utilisés par les personnes qui font de l'édition électronique, quelle qu'en soit la forme.
HTML est une abréviation de Hypertext Markup Language. Peu de choses à dire sur le mot "langage" si ce n'est que cela ne doit pas vous effrayer, hormis deux ou trois règles grammaticales, le reste du HTML consiste en un petit vocabulaire. Il vous suffira donc de comprendre son fonctionnement et de conserver sous les yeux le dictionnaire HTML, et le tour est joué (vous pouvez trouver la référence du langage HTML sur le site du W3C : http://www.w3.org/ ). Lorsque vous aurez assimilé la notion de balise "markup" et ce que cela implique, vous saurez en fait quasiment tout. Il ne vous restera plus qu'à comprendre pourquoi l'hypertexte est si important, et pourquoi sa place et son rôle inspire de nombreuses autres technologies. À ce stade, vous serez quasiment incollables.
HTML est basé sur une technologie nommée XML (extensible markup language) qui a défini les impératifs syntaxiques. Sur cette base, HTML rajoute quelques termes qui permettent de structurer le texte pour les titres, les paragraphes, les listes, etc.
Pour comprendre la logique sortant un peu de nos éditeurs epub pour voir le fonctionnement de HTML en propre.
Voilà une bonne base, mais nous sommes loin du compte. Il va falloir structurer le texte, modifier son aspect, positionner des images... bref travailler la mise en forme. Comment faire ?
Le terme balise définit un des concepts de base de HTML. La balise, c'est la structure même du langage. Heureusement, dans HTML cette structure est simple, ce qui a fait son succès. Voyons cela.
Mon premier <b>fichier HTML</b>
Après cette petite modification, votre texte s'affiche toujours, mais les mots "fichier HTML" apparaissent maintenant en gras. Comment cela se passe-t-il ? Dans un premier temps, le navigateur récupère votre page. Il va alors à l'intérieur du fichier pour voir ce qu'il contient. Il le lit de haut en bas, et l'affiche. Mais parfois, il rencontre le caractère < : il sait alors que quelque chose de nouveau se passe et que dans ce qui suit, il ne va pas tout afficher. Il récupère ce qui est écrit entre > et < et comprend que cela va lui servir de base pour modifier l'apparence de ce qu'il doit afficher. Les chevrons < et > servent donc à délimiter un ensemble de signification lié à la présentation des données. Passé ce premier cap, il affiche le texte. Avançant, le navigateur rencontre ensuite </b>, et comprend alors que le graissage (application du style "gras") se termine ici.
Comme une grande partie des mises en forme ont un début et une fin (ce que l'on fait dans un logiciel avec une sélection au moyen de la souris), nous représentons cela en HTML avec une balise double.
<element> contenu </element>
Les deux parties de la balise s'écrivent de la même façon, le second élément commence juste par un / placé immédiatement après le chevron d'ouverture. Cela fonctionne pour la grande majorité des balises disponibles. Ainsi, comme <b>Texte</b> affiche le texte en gras, <i>Texte</i> mettra en italique ou <h1>Texte</h1> définira un grand titre. On voit bien que le principe est le même, il s'agit seulement d'avoir en tête les quelques balises utiles. On peut avoir la liste complète sur cette page du W3C : http://dev.w3.org/html5/spec/single-page.html#elements-1, mais voici les principales :
Pour plus d'informations sur les balises de mise en forme, mais aussi sur la structuration du fichier, reportez-vous au manuel HTML5 : http://fr.flossmanuals.net/HTML5.
Comme des paragraphes seront inclus dans des articles et des articles dans des sections, voire dans des regroupements plus génériques, il sera important de respecter cette hiérarchie dans le code. Ainsi toute balise ouverte après une autre et devant y être incluse doit absolument être fermée avant de manière à éviter les erreurs de compréhension par les dispositifs de lecture.
<element1><element2> contenu </element2></element1>
À l'inverse, certains éléments de la page n'ont pas d'étendue à définir. C'est le cas des retours à la ligne ou encore même des images qui ont leur dimension en propre. Dans ce cas, il est possible d'utiliser une notation particulière :
<element />
dans les cas qui nous intéressent, nous aurons donc :
Si vous essayez ce dernier cas sur votre page HTML, vous verrez qu'aucune image ne s'affiche dans le navigateur. Alors comment allons-nous nous y prendre pour mettre une image ? Faudrait-il rajouter une balise supplémentaire ? Eh bien non. HTML n'aime pas trop fractionner les informations de mise en forme : chaque mise en forme a sa balise et il n'y a généralement pas de sous-balise (on verra qu'il y a une exception). En fait, lorsqu'il s'agit de donner une précision sur une mise en forme, on utilise des attributs. C'est notre cas ici avec l'image. La balise indique qu'il va falloir mettre une image et c'est l'attribut qui donnera le chemin de celle qui faut mettre.
Un attribut se met toujours à l'intérieur de la balise ouvrante, après l'élément, en laissant un espace entre eux de manière à ce qu'ils puissent être différenciés. Une balise peut contenir plusieurs attributs différents, mais chaque attributs doit être suivi du signe = puis d'une valeur encadrée par des guillemets droits.
<element attribut1="valeur" attribut2="valeur"> contenu </element>
Dans le cas de l'insertion de l'image nous obtiendrons le code suivant :
<img src="image.jpg" />
où image.jpg est le nom de fichier de votre image, éventuellement précédé de son chemin d'accès, normalisé en epub, et src son attribut. Un autre exemple très utile est la création de lien permettant d'accéder directement à d'autres ressources. Dans ce cas, la balise est a, une balise double, et son attribut href. Ce qui nous donne :
<a href="http://www.flossmanualsfr.net"/>Texte ou image cliquable</a>
Bien sûr, il y a une liste des attributs officiels en HTML. Retenez aussi que certains attributs seront utilisables avec certaines balises, mais pas avec d'autres. Il est cependant inutile de tous les connaître, à moins que vous n'ayez de réelles velléités de personnalisation et de contrôle pour plus de détail, reportez-vous à notre référence W3C : http://dev.w3.org/html5/spec/single-page.html#elements-1.
Le langage CSS (Cascading Style Sheets) permet de définir l'aspect du texte et de tout contenu, comme des feuilles de style dans un traitement de texte ou un logiciel de mise en page. De plus, la feuille de style pourra être automatiquement partagée dans tous les fichiers HTML composant l'epub, voire être réutilisée dans tous les epub d'une collection pour que tous les livres partagent automatiquement la même ligne graphique.
Pour bien utiliser le CSS, il faut savoir faire trois choses :
Pour créer une feuille de style, rien de très compliqué :
<link rel="stylesheet" href="styles.css" type="text/css" />
<html><head><link rel="stylesheet" href="style.css" type="text/css" /></head><body>puis en fin de fichier :
</body></html>
Maintenant que les ressources sont créées et associées, il est possible de définir le style de chacune des parties du texte qui doit être changé. Si le texte a été bien conçu en HTML, il n'est normalement pas nécessaire de le modifier, mais il peut être intéressant de garder le code de la page HTML sous les yeux, simultanément au fichier CSS pour être plus efficace et éviter les erreurs.
Le fonctionnement du CSS est très simple et de la forme :
element_HTML_de_reference { propriété_css : valeur_de_la_propriété }
Dans tous les cas, veillez à bien écrire les accolades pour encadrer les propriétés et les : entre la propriété et la valeur.
Un cas concret arriverait à ça :
body {background-color:yellow}; margin:100px
Pour définir plusieurs propriétés pour le même élément, il suffit de les mettre dans les mêmes accolades et de séparer chacune des propriétés par un point-virgule ;.
Vous pouvez tenter l'expérience sur h1 ou p avec des valeurs différentes. Vous verrez qu'automatiquement, tous les titres h1 ou tous les paragraphes de la page prendront les mêmes caractéristiques, ce qui permet d'aller très vite.
Les propriétés les plus utiles sont :
Ces quelques recommandations ont pour but d'assurer la qualité et la pérennité de votre catalogue epub à moyen terme. Les normes epub et les fonctionnalités des logiciels et supports de lecture changent rapidement. Il faut envisager d'intervenir au cours du temps dans vos fichiers afin de leur faire profiter de ces évolutions, ou de les corriger. Plutôt que d'avoir à les reproduire... Mais afin de limiter les interventions à l'avenir, il est important de le penser en amont de la production afin de le spécifier à vos "compositeurs epub".
Comme pour n'importe quel fichier électronique, le code d'un fichier epub peut être "propre" ou moins "propre". Il doit dans tous les cas respecter les spécifications définies par leurs instances officielles (W3C, IDPF). Si la validité du code, sa structure correcte, va être garantie lors de la validation des fichiers par les outils dédiés (voir chapitre Vérifier la validité du fichier dans la section Contrôler ses fichiers) rien ne garantit cependant son élégance. Malheureusement, ou heureusement, celle-ci est assez relative et rien ne permet ici d'en donner une définition précise. Certains éléments qui en relèvent peuvent cependant être décrits. Ils sont importants non pour des questions esthétiques, mais pour les questions pratiques évoquées ci-dessus.
Imaginez que vous avez fabriqué, ou fait fabriquer, un an plus tôt, un catalogue de 325 epub. Les nouveaux appareils de lecture supportent maintenant un paramètre de style qu'ils ne supportaient pas auparavant et qui faisait tout le sel graphique de votre collection.
Le changement de ce style dans vos 325 epub peut devenir (très) compliqué :
La problématique est la même s'il s'agit cette fois non pas d'un aspect graphique, mais d'une fonctionnalité ou d'un comportement que l'on peut affecter à un élément donné du texte : par exemple, l'affichage en popup des notes de bas de page au passage de la souris sur l'appel de note dans le texte. Ce type d'enrichissement commence à prendre forme, mais est actuellement peu supporté. On peut aisément envisager ce besoin de mise à jour à très court terme. Il est donc important de pouvoir identifier facilement, et si possible pour l'ensemble du catalogue, par exemple toutes les notes de bas de page, les appels de notes, les titres, etc. C'est-à-dire tous les éléments d'un même type.
Des normes de nommage explicites et uniformes d'un livre à l'autre sont donc un minimum à imposer à vos compositeurs afin de garantir une certaine évolutivité à moindre coût de votre catalogue epub.
On peut, schématiquement, coder son contenu HTML de deux façons différentes :
Ces balises sémantiques, telles que p, ul, h1, h2, cite, des classiques de HTML, indiquent nativement la place, la fonction, le sens logique au sein du texte, des contenus qu'elles encadrent. Elles donnent ainsi des repères indispensables par exemple pour l'extraction de données à destination d'une table des matières ou d'un logiciel de lecture pour handicapés.
L'édition numérique n'ayant pas pour unique objet d'offrir un joli affichage, mais aussi, et peut-être surtout, une exploitation raffinée et novatrice des savoirs, ces balises doivent donc être exploitées au maximum.
Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.
Vous devriez rafraîchir la page.