CREEZDESEBOOKSAVEC

SIGIL

BENOITHUOT

Tabledesmatières

1/Quelquesdéfinitions2/Paroùcommencer3/CréermonpremierePub4/Pages,titresettablesdesmatières

a.InsérerdespagesdansSigilb.Titresc.Tabledesmatières

5/Avantdepoursuivre6/L'interfacedeSigil7/LesbasesduHTML

a.Lesprincipesdesaisieb.LesbalisesHTML

8/LesCSSa.Oùsecachentlesfeuillesdestyle?b.LasyntaxeCSSc.LespropriétésCSS

9/Quelquesconsidérationspourfinir10/Lemotdelafin

Crédits

Bonjouràtous,Vous avez sous les yeux un tutoriel qui vous expliquera pas à pas comment

réaliserunfichierePub,àpartird’outilsgratuitset,nousl’espérons,simples.Dansleslignesquisuivent,nousallonstâcherdevousprésenterlesfonctionsprincipalesnécessairesàlaréalisationdelamajoritédesePub.Sid’aventurevoussouhaitiezessayerquelquechosequinefigurepasdanscelivre,n’hésitezpasàmecontacter(esteriane626ATgmail.com) ou à vous tourner vers les tutoriels présentés en find’ouvrage.

Surce,bienvenueàbord!

BenoitHuot

AvertissementderigueurIl existe de nombreux logiciels vous permettant de créer des ePub

rapidement, soit en enregistrant directement votre fichier dans ceformat-là soit en convertissant un fichier déjà existant. S’ils fontgénéralement correctement leur travail, ces outils automatiques onttendanceàsurchargerlefichierd’instructionsinutilesetdoncàlerendremoinsefficace(letextepourraitparexempleêtrepluslentàafficher).Lebut étant de vous montrer comment optimiser votre fichier ePub, cetutoriel abordera de légères notions de programmation et vous aurezprobablement àmodifier du code. Néanmoins, il n’y aura rien de biensorcier.Surce,commençons!

RetourauSommaire

Quelquesdéfinitions

Avant d’aller plus avant dans le tutoriel, quelques petitesdéfinitionspouréviterdevousperdreetclarifiercertainstermes.Sivousêtes déjà familiarisé avec eux, nous vous conseillons de passerdirectementàlasectionsuivante.Maisunpeuderévisionn’ajamaisfaitdemalàpersonne.

EPubEPub (abréviation d’electronic publication) est un format de fichiers

utilisé pour les livres numériques. Les fichiers au format ePub portentdonc l’extension .epubà la finde leurnom.De lamêmemanièrequ’un.html indique à l’ordinateurd’utiliserunnavigateur Internet et un .docd’utiliseruntraitementdetexte(généralementWord),un.ePubindiqueàl’ordinateur d’utiliser un logiciel conçu pour lire les .epub. Parmi ceslogiciels,onpeutciter:

DesextensionspournavigateurinternettelsEpubreaderetGrabmybookspourFirefoxDesapplicationsdel’AndroidMarkettelsGooglePlay,SamsungReader,AldikoouMoon+ReaderDesapplicationspouriPhoneetiPadtellesiBooks,StanzaouBluefireReaderLeslogicielsinstalléssurlesliseusestellesqueleKobobyFnacouleCybookOdyssey

La particularité du format ePub est d’être un format ouvert, i.e.utilisable par tous ceux qui le souhaitent, et non lié à unemachine enparticulier. Pour les possesseurs de liseuse, assurez-vous que votremachine peut le lire car, si le format ePub est bien ouvert, certainsfabricants (dont Amazon et son Kindle) ont opté pour des formatspropriétairesetnepeuventdoncpaslesexploiter(ilexistenéanmoinsdessolutions de conversion, comme l’excellent Calibre [http://calibre-ebook.com/]).

Signalonsenfinqueleformatactueldel’ePubtelqu’ilestcrééparSigilestl’ePub2.C’estceformatquenousabordonsdanscetutoriel.

L’ePub3estencoursdedéveloppementetseradavantagetournéversdesfonctionsmultimédias.Iln’empêchedoncpaslapublicationd’ePub2etnenousconcernepasdanslecadredulivrenumériquenonenrichi.

Lesdeuxtypesd’ePubIl existe deux grandes catégories d’ePub : les “fixed layout” et les

“reflowable”.Les “fixed layout” imposent que la lecturedu fichier, quel que soit le

support, conservera lamaquettedéfiniepar le créateurdu fichier.C’estun peu comme si vous transposiez directement la maquette complèted’unlivresansvouspréoccuperdusupportsurlequellefichierseralu.Ceformat est à privilégier pour les ebooks artistiques et/ou graphiques

(commedelaBD)maisc’esttout.Eneffet,enfigeantlamaquette,cetypede fichier ne permet pas de s’adapter correctement à la diversité dessupports(ordinateurs,portables,tablettes,smartphones,liseuses…)etdesécrans.Imaginezparexemplequevoussouhaitiez lireuneBDsurvotresmartphone.Silespagessontenfixedlayout,votretéléphoneafficheralapageentièresurl’écran,etlestextes,devenustroppetits,serontillisibles.Ilvousfaudraalorszoomeretvousdéplaceràlamaindanschaquepagepour pouvoir suivre votre histoire. Pas vraiment agréable en termesd’expériencedelecture.

À l’inverse, les “reflowable” s’adaptent au support sur lequel ilss’ouvrent. À l’instar d’une page internet, le logiciel de lecture faitcorrespondre le fichierau formatde l’objet.Le texteestdonc lisible surn’importe quel écran, sans avoir besoin de zoomer ou d’opérer deschangementsrébarbatifs.Leseulélémentquichangedansunreflowableestlapagination:commecettedernières’adapteàlatailledel’écran,vousn’aurez pas la même pagination sur un écran de smartphone ou uneliseuse. Par exemple, l’ebook L’IncroyableGuide de l’autopublication ennumériquecompte141pagessurliseusealorsqu’ilenfautprèsde594suriPhone. Le texte est lemêmemais, pour tout lire il faut juste parcourirbeaucoupplusd’écrans.

Commevouslevoyez,lesePubreflowablesontlespluspertinentscaràmêmedeconvenirà tous lessupports.C’estdoncdece typed’ePubquenousallonsparlerci-dessous.

Note : Si vous souhaitez plus d’informations sur ces deux types defichier, vous pouvez consulter ce billet de Jiminy Panoz[http://jiminypanoz.com/2012/03/08/reflowable-text-et-fixed-layout/].

Qu’ya-t-ildansunePub?Sansrentrerdanslesdétails,sachezqu’unfichierePubestunesortede

fichiercompressétype.zip,danslequelsontregroupéstousleséléments

nécessaires au fichier (polices, textes, images, indications pour leslogicielsdelecture).Sivousêtescurieux,vouspouvezregardercequ’ilyaàl’intérieursimplement:ilvoussuffitderenommerle.epuben.zippuisde décompresser le fichier, comme vous le feriez avec n’importe quelfichiercompressé.

UnePubcontienttroiséléments:

unfichiernommémimetype,quiindiqueaulogicielquelefichierestunePubunrépertoirenommémeta-inf,disposantdufichiercontainer.xml.Cefichierindiqueaulogicieloùallerchercherlesdifférentesinfosdontilabesoin(texte,polices,nomd’auteur…).Vousn’aureznormalementpasbesoind’intervenirsurcefichier.unrépertoirenomméOEBPSquicontienttouslesélémentsnécessairesaucontenudel’ePub.Cedernierdisposegénéralementdetroisrépertoires(Imagespourles…images,Stylepourles…feuillesdestyle,Textpourles…textes)etdedeuxfichiers.Lefichiercontent.opfrecensetouteslesmétadonnéesdufichier(nomdel’auteur,titredel’œuvre,datedepublication…)etlefichiertoc.ncxestutilisépourlatabledesmatières(tocétantl’abréviationdetableofcontents,soittabledesmatièresenanglais).

Sauf grosse exception, vous n’aurez normalement pas à intervenirdirectementdanscesfichiers.Lesprogrammesquenousallonsutiliserlefontànotreplaceetd’unemanièreplusintuitive.

Remarque:Sivousvousamusezàrecompresserledossieren.zipetàlerenommeren.epub,vousconstaterezqu’ilneserapasreconnulorsdeson ouverture. En réalité, un ePub n’a pas l’ensemble de ses fichierscompressés car,pourque l’ePubsoit lu, le fichiermimetypenedoitpasêtrecompressé.Sivoussouhaitezle lire, ilvousfautdonccompresser ledossierenprécisantquemimetypenedoitpasl’être,ouplussimplementutiliser des logiciels dédiés à la recompression d’ePubs tels que ePubPackager.

CSSLorsquevouslisezuntexte,vousappréciezqu’ilsoitcorrectementmis

en page. Par exemple, les pensées peuvent être en italiques, le titre dechapitre centré, et le paragraphe commencer par un alinéa. Toutes cesmisesenformessontpréciséesauseindesCSS(CascadeStyleSheet,soitfeuilledestyleencascadeenanglais).LesfeuillesCSSsontincluesdansl’ePubetrépertorienttouteslesmisesenformeutilisées.

Vous n’êtes pas obligé de définir des CSS pour votre ePub, chaquesupport pouvant appliquer sa mise en forme par défaut. Néanmoins,l’utilisation des CSS vous permettra de personnaliser votre livre, derendre samise en page plus professionnelle, et donc plus lisible. Nousaborderons donc dans ce tutoriel lamanière d’utiliser les CSS. Commesouvent, vous ne trouverez rien de bien sorcier ici et devriez vous ensortiravecunminimumd’organisation.

HTMLSivousregardezà l’intérieurd’unfichierePub,enparticulierdans le

dossierOEBPS/Text, vous constaterez que les textes sont en réalité despages xhtml (oui, lesmêmes que celles utilisées sur Internet).Un ePubutilisedonclagrammaireduhtml(lexhtmlestjusteuntypeunpeuplusabouti que le html classique) pour ses textes et un minimum deconnaissancede ce langagepeut êtrenécessaire.Néanmoins, comme lehtmlestextrêmementsimpleàutiliserpourdutexte,vousnedevriezpasavoirdedifficultés.

À l’instar des CSS ci-dessus, nous aborderons les notions de htmlnécessairesàl’ePubplusloindanscetutoriel.

Remarque:Enréalité,Sigilpeuttoutàfaitgérerlespageshtmletxml.

Remarque:Enréalité,Sigilpeuttoutàfaitgérerlespageshtmletxml.Néanmoins, dans le cadre de ce tutoriel, nous considérerons que vousmanipulezdespagesxhtml.Ce langageesteneffet idéalpour l'ePub : ilestpluscarréetlogiquequelehtmlpur,sanspourautantserévéleraussiétenduquelexml.

RetourauSommaire

Paroùcommencer

Pour réaliser votre fichier ePub, vous allez avoir besoin de quatreéléments:

votretexteàproprementparlerSigil[http://code.google.com/p/sigil/]Notepad++[http://notepad-plus-plus.org/fr/]Gimp[http://www.gimp.org]

Remarque:Normalement,Notepad++n’estmêmepasnécessaire.Jelementionne pour mémoire car je l’ai utilisé lors de la création de monpremier ePub de démo [http://ptgptb.free.fr/ebooks/Ebook_PTGPTB_1-le_plaisir_de_jouer.epub] dans la mesure où je travaillais à la fois sousLinuxetsousWindowsetoùilmefallaitunoutilpourfairelepasse-plat.Notepad++constitueeneffetunesortedesuperbloc-notes,bienpratiquepour ouvrir les fichiers créés etmodifier directement le code (pour lesCSSetlehtmldonc).Néanmoins,Sigilsechargetrèsbiendelamajoritédestâches.

RetourauSommaire

VotretexteNous n’allons pas vous expliquer comment écrire votre texte, vouspouvez très probablement le faire vous-même.Néanmoins, sachez que,avantdevous lancerdansvotreePub, il vautmieuxquevotre texte soitfinalisé. Ainsi, vous ne vous concentrerez que sur une seule chose : lamanièredecréervotreePub.

Il faut toutefois savoir queSigil ne supporte pas tous les formats detexte. Par exemple, les .doc et .docx propres à Word ne sont pascompatibles avec Sigil. D’unemanière générale, vous pourrez importersansproblèmeunfichierhtml(dansvotretraitementdetexte,vousdevezl’enregistrer au format Page web, filtrée) ou un fichier txt (dans votretraitementdetexte,vousdevezl’enregistrerauformattexte).Nousvousrecommandonstoutefoisleformattxtcar,mêmesiceformatneconservepaslamiseenforme,ilfournitunfichiertrèspropre.Àl’inverse,lespageshtml enregistrées depuis un traitement de texte rajoutent tout un tasd’informationssuperfluesquisurchargentvotredocumentetralentissentsonexploitation.

UntrucpournepasperdretotalementvosmisesenformeSivotredocumentestlong,vousapprécierezsansdoutemodérément

dedevoir relire tout votre texte attentivementpour lebaliserdansSigil(mettrel’italique,legras,lestitresaubonformat…).Pourcela,nousavonsunpetittrucquivousferaprobablementgagnerdutemps:détournerla

fonctionRechercher/Remplacerpouratteindredirectementlesélémentsquidoiventêtremodifiés.

Il faut au préalable que vous balisiez quelque peu votre documentavantdel’enregistrerauformattexte.Ici,riendebiencompliqué:ilsuffitdemettredevantchaquegroupedemotsnécessitantunemiseenformeparticulièreunebalisequevousêtessûrdenepasretrouverdanslecorpsdu texte. Par exemple, pour chaque ensemble de mots devant être enitalique, vous pouvez mettre au début du groupe le texte xxxi. Vouspouvezmettrexxxgpourtoutcequiconcernelegras.Pourlestitres,vouspouvezmettre du t1, t2, etc. ou xxxt1, xxxt2, etc. L’essentiel est que lesbalisesretenuesneseretrouventdansvotretextequepourlesbalisesetnonaucœurdutexte(siparexemple,vousavezdécidédebaliseruntexteavecletermetitre,ilyadeschancesque,quandvousrecherchiezlemot“titre”dansvotrefichiertexte,ilnevousrenvoiepasquevosbalisesmaiségalementtouslesmots“titre”présentsdansvotretexte).

Une fois que vous avez intégré ces balises, vous pouvez enregistrervotrefichierauformattexte.QuandvousserezdansSigil,vousutiliserezleRechercher/Remplaceret luidemanderez,parexemple,derecherchertouslesxxxi.Ilvoussuffiraalors,àlamain(oui,ilfautquandmêmeunpeudemanipulation à l’ancienne), demettre le texte correspondant enitalique, puis de supprimer le xxxi. Vous ferez la même manipulationpourlesautresxxxi,puispourlesautresbalisesquevousavezprécisées.

Certes,ceprocessusn’estpasaussirapidequelesimpleimportd’une

Certes,ceprocessusn’estpasaussirapidequelesimpleimportd’unepagehtmlcrééeavecvotretraitementdetextemaisilprésentel’avantagede fournir un fichier propre et donc plus efficace. Et, croyez-nous, enprocédantde lasorte,vousgagnerezplusdetempsquesivouspréférezenregistrer la page au format html puis effacer toutes les scoriessuperfluesdansSigil.

SigilSigilestun logicielopensource(i.e.enrichipar lesutilisateursqui le

souhaitent et gratuit) pour créer et éditer des ePub. Il a la particularitéd’êtreenWYSIWYG(whatyouseeiswhatyouget).End’autrestermes,ceque vous voyez dans Sigil apparaîtra de la même manière dans votrelecteurePub.

VouspouveztéléchargerSigilici[http://code.google.com/p/sigil/].

Notepad++Comme expliqué plus haut, ce logiciel est une sorte de bloc-notes

avancé. Vous n’en aurez normalement pas besoinmais, si jamais voussouhaitez travailler sur le codede l’ePubendehorsdeSigil, il vous seratrèscertainementutile.

GimpGimp est un logiciel de retouche d’images très puissant qui vous

permet d’appliquer des effets à vos fichiers images. Nous ne nous

appesantironspas icisursonutilisationmaissachezqu’ilvousseratrèsutilepourconvertirvosimages(Enregistrersous),modifier leurtailleetréaliservotrecouverture.

VouspouveztéléchargerGimpici[http://www.gimp.org].

RetourauSommaire

CréermonpremierePub

PourcepremierePub,nouspartonsduprincipequevoussouhaitezsimplementconvertiruntexteenePub,justepourpouvoirleliredansceformat, sansconserver lamiseen forme.Pourcela, suivez lesétapesci-dessous.

Letexte1. OuvrezSigil2. Aubesoin,créezunnouveaudocument(Fichier>Nouveau)3. Danslafenêtrededroite,tapezvotretexte.

Sigilestrépartientroisgrandesfenêtres:

lafenêtresupérieurecontientlesmenusetlesraccourcispourlesfonctionsprincipales,

lafenêtredegauchelistelecontenudel'ePub.Nousavonsvuplushautqu'unePubétaitunesortedegroszip.Lesdifférentsélémentsprésentsdanscezipsetrouventdanscettefenêtredegauche.

Lafenêtrededroiteestcelledutexteproprementdit.

Remarque : Vous pouvez faire aussi un copier/coller de votredocumentoriginaldansSigil.

LesmétadonnéesPourqu’unfichierePubsoitvalide,ildoitcontenirauminimumtrois

éléments:

letexteproprementditlenomdel’auteurletitredel’œuvre

Ces deux derniers éléments font partie de ce que l’on appelle desmétadonnées, i.e. un ensemble d’informations qui gravitent autour dutextemaisquineluisontpasliéesdirectement.Onpeutnotammentfairefigurer dans lesmétadonnées le nomdu traducteur, de l’illustrateur, ladate de publication, le numéro ISBN (identifiant propre au livre etéquivalant au code barre)… Seuls les noms d’auteur et d’œuvre sontnécessaires à la validation de l’ePub mais de bonnes métadonnées,précisesetexhaustives,faciliterontletravaildesmoteursderechercheetauront un impact sur les téléchargements de votre ebook. Nous allonsvoirci-dessouscommentrenseignerfacilementcesélémentssousSigil.

1. DanslemenuÉdition,sélectionnezÉditeurdemétadonnées2. Renseignezleschampsindiqués(TitreetAuteur,auminimum)3. PrécisezlalanguedevotreePub.Pardéfaut,elleestenanglais,

aussisélectionnezFrench(outouteautrelanguecorrespondantàlalanguedevotretexte).

Remarque:Strictosensu,laprécisiondelalanguen’estpasobligatoirepour le bon fonctionnement de l’ePub. Néanmoins, elle permettra auxappareilsdelecturedemieuxseconformeràlalanguedéfinie,entermesdecésureetdedictionnairenotamment.

VérificationderoutineNormalement,votreePubdevraitêtreopérationnel.Néanmoins,pour

enêtresûr,deuxpetitesmanipulationss’imposent :vérifier le fichieretl’enregistrer.

1. Pourvérifierlefichier,cliquersurl’icôneValiderl’ePubtoutàdroite(lacocheverte).Normalement,unmessages’affichevousindiquantquetoutestok.SiSigilrelèvedeserreurs,ilvousl’indique.

2. EnregistrezvotrefichierviaFichier\Enregistrersous.

Voilà,vousvenezderéaliservotrepremierePub.Certes,celui-ciestunpeu brut de décoffrage, sans textes ni images, sansmêmeunemise enformeparticulière.Vouspouveznéanmoinsle liresansproblèmesurlesdifférentssupportsconcernés.

Nous allons désormais aborder lamanière demieux organiser votreePub.

RetourauSommaire

Pages,titresettabledesmatières

LalogiquedespagesdansunePubCommenousl’avonsvuplushaut,lefichierePubadopteunemiseenpage“reflowable”,i.e.oùlapaginationliéeautextes’adapteàl’écranquil’affiche.Néanmoins, il est important de savoir qu’un ePub contient luiaussidespagesmême si celles-cine sontpas tout à fait lesmêmesquecellesauxquellesvousêteshabitué.

SivousexplorezunfichierePubdansSigil,vousconstaterezque,dansle dossier Textes, il y a parfois plusieurs fichiers xhtml. Ce sont cesfichiersxhtmlquiconstituent les“pages”de l’ePub.Cenesontdoncpasdes pages au sens où on l’entend habituellement, mais l’équivalent depagesweb.

Schématiquement, considérez qu’une page xhtml correspond à unesectionbiendéfiniedevotre texte (chapitre,partie, sous-partie, lexique,remerciements…). Supposons par exemple que vous ayez écrit unenouvellequisecomposedetroischapitres.Vouspouveztoutàfaitmettreles trois chapitres au sein d’une même page xhtml. Néanmoins, celaimpliquera que la machine (liseuse, smartphone, tablette, ordinateur)chargeradanssamémoirel’ensembledutexteenuneseulefoisalorsquevous n’avez pas besoin de tout. À l’inverse, si vous décidez de faire unfichierxhtmlparchapitre,votresupportnechargeraquelapagexhtmlencoursdelecture,cequiseraplusrapideetmoinsgourmandenénergie.

Quiplusest, lefaitdetravaillersurplusieurspagesxhtmlclairement

Quiplusest, lefaitdetravaillersurplusieurspagesxhtmlclairementdéfiniesvousaideraàvousorganiseretàmieuxvousrepérerdansl’ePub.Supposons par exemple que votre texte soit une sélection d’articles devotreblogetque,pouruneraisonquelconque,vousdécidiezdemodifierl’un des billets. Vous pouvez faire un rechercher/remplacer dans votregrosse page xhtml qui contient tous vos textes ou bien vous rendredirectement sur la page incriminée si vous avez eu la bonne idée deréaliserplusieurspagesdistinctesdansvotreePub.

Commevouslevoyez,lefaitderéaliserplusieurspagesdansunePubestpréférablecarcelafacilitelechargementdespages(etleslogicielsdelecture des liseuses ne sont pas des foudres de guerre comme lesordinateurs)etpermetdemieuxorganisersontravail.Celaconstitueenquelquesortelapreuved’untravailsoignéetprofessionnel.

RetourauSommaire

CommentinsérerdespagesdansSigilLaprocédureestrelativementsimple, àpartirdumomentoùvousvoustrouvezdansSigil.Vousavez,auchoix,deuxméthodes: l’insertiondepagesàproprementparleretl’insertiondesautsdechapitres.

Insérerdespagesàproprementparler1. Danslenavigateurdulivre(lafenêtredegauche),positionnez-

voussurTextes2. FaitesunclicdroitetsélectionnezAjoutersectionvierge.3. Réitérezl’opérationautantdefoisquenécessaire.

Voilà,vousavezdésormaisvospagessupplémentaires.

Insérerdespagesgrâceauxsautsdechapitre

Lorsque vous lisez un livre, àmoins qu’il ne s’agisse d’un très vieuxlivre de poche, lorsque vous attaquez un nouveau chapitre, vouscommencezvotrelecturesurunenouvellepage.Cechangementdepagefacilite votre lecture enmarquantunenettedifférence entre la find’untexte(lechapitreprécédent)etledébutd’unautre(lechapitresuivant).

Sigilconservecette logiqueliéeauchangementdepagedesorteque,pour chaque changement de chapitre que vous souhaitez, il crée unenouvellepage.Voicilaprocédureàsuivre:

1. SélectionnezlapageSection0001.xhtml2. Sijamaiscettepagedisposedéjàd’untexte,assurez-vousdeplacer

lecurseuràl’endroitprécisoùvoussouhaitezeffectuerlechangementdechapitre.Sigilgénéreraeneffetlesautdepageà

l’endroitoùsesituevotrecurseur.3. Appuyezsurl’icôneChapterBreaksituéedanslemenusupérieur

(ouutilisezleraccourciclavierctrl+EntréeouencoreÉdition\Sautdechapitre)

4. Sibesoin,replacezlecurseuràl’endroitdevotretexteoùvoussouhaitezinsérerunsautdechapitre

5. Réitérezlesétapes3et4jusqu’àobtenirlenombredepagesdésirées.

Remarque : Vous pouvez aussi insérer des sauts de chapitre enutilisantleraccourcictrl+EntréeouenpassantparlemenuÉdition\Sautdechapitre.

Toutl’intérêtdecetteméthodeestquechaquepagecrééeestunesorte

de clonede lapage référente.Ainsi, si vousavezdécidéd’appliquerdesstyles particuliers à votre texte, ceux-ci pourront également êtredirectement appliqués aux autres pages, sans que vous ayez besoin depréciseràchaquefoisoùallerchercherlesstylesàutiliser(voir lapartiesurlesCSSplusbas).

Renommerlespagesxhtml

Sivous lesouhaitez,vouspouvezrenommerlespagesxhtmldevotreePubpourmieuxvousyretrouver.Parexemple,plutôtqued’avoirquatrefichiers classiques (Section1.xhtml, Section2.xhtml, Section3.xhtml,Section4.html), vous pouvez les renommer pour qu’ils s’appellentChapitre1.xhtml, Chapitre2.xhtml, Chapitre3.xhtml etRemerciements.xhtml.

Làencore,laprocédureestsimple:

1. Sélectionnezlapagequevoussouhaitezrenommer2. FaitesunclicdroitetsélectionnezRenommer.3. Renommezvotrepage,enn’oubliantpasdebienmettrel’extension

.xhtml

Pour un traitement correct de votre fichier, quelques précautionsd’usagesontàrespecterdanslenomdevotrefichier.Ainsi,n’utilisezpasde lettres accentuées, de caractères spéciaux (comme les pointsd’interrogationoud’exclamation)etnemettezpasd’espace.

Remarque : Vous pouvez également renommer votre page en lasélectionnantetenappuyantsurF2.

RetourauSommaire

TitresBien. Nous avons donc vu comment organiser votre ePub enplusieurspagesxhtmlpourluidonneruneprésentationcohérente.Ilesttempsdésormaisdes’intéresserauxtitresetàlahiérarchisationdevotretexte.

Sivotretexteestlong,ilseracertainementdiviséenplusieursparties,voire en sous-parties. S’il s’agit d’uneœuvrede fiction, vous aurez sansdoute des chapitres. Si votre ouvrage est un essai, vous aurezvraisemblablementdeschapitres,dessous-chapitres,voiredessous-sous-parties.Et,sivousvousêtesdonnélapeined’organiservospropos,vousaimeriezégalementquevotrelecteurpuisses’yretrouverfacilement.

Lestitressontlàpourça.Ils interviennentdansvotre fichierdedeuxmanières.D’unepart,en

tantquetitres,ilsdisposentd’unemiseenformespécifiquequilesmetenavant.Celapermetderythmerlalectureetdeserepérerplusfacilementdans le texte. D’autre part, comme ils sont définis comme titres dansSigil, vous allez pouvoir créer une table des matières automatiquerapidementetsansproblème.Voslecteurspourrontainsinaviguerdansl’ePubdirectementàpartirdecettetabledesmatières.

Remarque:DansunePub,latabledesmatièresestautomatiséeetsetrouve en dehors du texte proprement dit (vous savez, c’est le fichiertoc.ncxauquelonn’apasbesoindetoucher).Iln’estdoncpasforcémentnécessaire de faire figurer, en début ou en fin d’ouvrage, une table desmatières ou un sommaire similaire à celui que vous trouvez dans lesversionspapier.Seuleexceptionnotableàlarègle:sivousdestinezvotrefichierauformatKindle.LeformatdefichierpropreauKindleimpliqueeneffetlaprésenced’unetabledesmatièresphysique.Sivousenvisagez

ce support, il vous faudra donc rajouter votre table des matièresmanuellement dans votre ePub, liant chaque section de votre livre aufichier xhtml concerné en lien hypertexte. Elle fera doublon avec letoc.ncxmais c’est une contrainte avec laquelle il fautmalheureusementcomposer…

LahiérarchiedestitresL’intérêt de mettre des titres est de hiérarchiser l’information. Les

titresserontdoncdestitresdeniveau1,2,3…Untitredeniveau1correspondgénéralementàuntitredechapitreou

degrandepartie.Untitredeniveau2estunesous-partied’untitredeniveau1.Ilsépare

le contenu de votre texte en plusieurs grands ensembles clairementidentifiables.Parexemple,sivousavezuntextequiapourtitredeniveau1“Lesêtresvivants”,vousaurezprobablement,entitresdeniveau2,“Lesvertébrés”et“Lesinvertébrés”.

Untitredeniveau3constitue lui-mêmeunesous-partied’untitredeniveau2.Pourreprendrel’exempleci-dessus,vouspourriezavoir,entitredeniveau3“Lesanimauxmarins”,“Lesanimauxvolants”et“Lesanimauxterrestes”.

Untitredeniveau4estunesous-partied’untitredeniveau3.Etainsidesuite.Sachez que vous pouvez aller jusqu’à 6 niveaux de titres, ce qui est

normalementamplementsuffisant.Àtitreindicatif,cetutorieldisposede5niveauxdetitresetcelafaitdéjàunearborescencebiendéveloppée.

Lebalisagedestitres

Normalement,sivousavezbienpréparévotretexteaupréalable,vous

Normalement,sivousavezbienpréparévotretexteaupréalable,voussavezdéjàqueltexteconstitueuntitre,queltexteconstitueunsous-titre,quel texte constitue un sous-sous-titre et ainsi de suite. Le balisage estalorsextrêmementsimple.

1. Sélectionnezlaportiondetexteàlaquellevousvoulezappliquerunemiseenformedetitre

2. Cliquezsurlaboîtededialogue“Normal”etsélectionnezleniveaudetitrequevoussouhaitez(Heading1pourtitredeniveau1,Heading2pourtitredeniveau2…).Sigilappliqueraunemiseenformespécifiquepourchaqueniveaudetitre.Nousverronsplusloincommentmodifier(oucréer!)cesmisesenformepourlespersonnaliseràl’envi.

3. Répétezl’opérationpourtouslestitresdevotredocument

RetourauSommaire

TabledesmatièresNousavonsvuplushautquel’intérêtd’unetabledesmatièresauseind’un ePub était son automatisation. Pour faire simple, votre table desmatièresestunesortedegrossepagewebqui reprendvos titresetqui,lorsque vous cliquez sur l’un d’eux, vous amène directement à la pageconcernée. Donc, si vous avez correctement balisé votre fichier, vouspourrez générer automatiquement une table des matières propre etefficace.

CommentgénérerunetabledesmatièresCommecettecréationesttotalementgéréeparSigil,vousn’avezqu’à

suivre lesquelquesétapesci-dessous.Maintenantquevousavezcréé les

titres,iln’yapresqueplusrienàfaire.

1. Toutd’abord,affichezlafenêtredeTabledesmatièresviaVue\Tabledesmatièresouenappuyantsuralt+F3

2. Cliquezsurlebouton“GénérerTDMdepuislestitres”3. UnenouvellefenêtreintituléeSélecteurdetitresapparaît,vous

présentantlatabledesmatières.Sicertainstitresn’apparaissentpasàcestade,c’estparcequ’ilsn’ontpasétécorrectementbalisés.Refermezdonccesélecteuretvérifiezlebalisage.Puisreprenezàl’étape2.

4. Lesélecteurvouspermetdechoisirlestitresquevoussouhaitezvoirapparaîtredansvotretabledesmatières.Sivousvoulezenfairedisparaîtrecertains(parexemple,sivoussouhaitezvouscantonnerauxtitresdeniveau1et2),ilsuffitderetirerlacochedescasescorrespondantes.

5. CliquezsurOK.Votrenouvelletabledesmatièresestopérationnelleetapparaîtdanssafenêtre.

6. Paracquisdeconscience,cliquezsurl’icôneValiderl’ePubtoutàdroite(lacocheverte).Normalement,unmessages’affichevousindiquantquetoutestok.SiSigilrelèvedeserreurs,ilvousl’indique.

Remarque:Pourgénérerlatabledesmatières,Sigilbalisevotretexteavecdesid,desmarqueursd’identitéquiluipermettentdes’yretrouver.Pardéfaut, il leurdonnedesnomsabscons (comme id_heading_1)maisvous pourrez les modifier si besoin dans le code html. Sigil remettraautomatiquementàjourlatabledesmatières.

Comme vous le voyez, le fait de bien structurer son texte en amontpermetensuitedegagnerenefficacité.

RetourauSommaire

Avantdepoursuivre

Nous venons de voir comment réaliser un ePub très facilement.Histoiredebienfixerleséléments,voiciunrapiderésumédesélémentsàprendreencompte.

1. Importezoutapezvotretexte.2. Aubesoin,organisez-leenajoutantdespagespouréviterquetout

nesetrouveenunseulbloc.3. Balisezcorrectementvotretexteentermesdetitresetdesous-

titres.4. Générezvotretabledesmatières.5. RenseignezlesmétadonnéesAuteuretTitre,ainsiquecellesque

vousestimezutiles.6. Lancezlavérificationdel’ePub.7. Sitoutestok,enregistrezlefichierenn’oubliantpasdepréciser

l’extension.epub.Vouspourrezdèslorsleliresurtouslessupportsàmêmed’ouvrircetypedefichier.

Nousallonsmaintenantnouspenchersurlamanièredepersonnaliseretd’optimiservotrefichier.Pourcela,nousvousprésenteronsd’abordlesdifférentes icônes de Sigil, pour que vous soyez en terrain deconnaissance.PuisnousaborderonslesfeuillesdestyleCSS.

RetourauSommaire

L’interfacedeSigil

Vousêtesdéjàfamiliariséaveccertainsélémentsdel’interfacedeSigil.Voyonsmaintenantàquoicorrespondentlesdifférentesbarresd’outils.

Remarque : La présentation ci-dessous est extraite de L'IncroyableGuide de l'autopublication en numérique de Jiminy Panoz. S’il aborde lacréationd’unePub,salectureserévèlesurtoutinstructiveconcernantlesdifférentesplates-formesd’auto-éditionetlamanièredepromouvoirsontitre(unélémentànesurtoutpasnégligersionveutsortirdulot!).Vouspouvez même télécharger la version révisée et augmentée,L'Autopublication by Walrus, de Jiminy Panoz (http://www.walrus-books.com/2012/10/autopublication/).

RetourauSommaire

LarangéesupérieureLe premier bloc vous sert à Créer un nouveau fichier, Ouvrir unfichier,EnregistreretEnregistrersous.

LedeuxièmeblocestconstituédesélémentsAnnuleretRefaire.

Letroisièmefournitlesoutilscouper/copier/coller.

Le quatrième vous sert à Rechercher dans le texte et Rechercher +remplacer(trèsutilepourbiencoordonnerlesCSS).

Le cinquième permet de régler l’affichage du texte et de sonformatage:vuenormale,vuenormale+vueencodeHTML,vueencodeHTML.Vousutiliserezcesicôneslorsquenousattaqueronsl’optimisationducodeetlesCSS.

Lesixièmeetdernierblocvouspermetd’insérerunnouveauchapitre(donc insèreun sautdepagenumérique) ouune image.Cettedernièredoitêtreauformatjpg,gifoupng.

LarangéeinférieureLe premier bloc est un sélecteur qui vous permet d’organiser votre

table desmatières par arborescence (headings). Vous l’avez déjà utilisépourfairevotretabledesmatièresautomatique.

Ledeuxièmeblocvouspermetdemettreengras,italique,soulignerourayerlapartiedetextequevousavezsélectionnée.

Letroisièmevouspermetd’aligneràdroiteouàgauche,decentreretde justifier votre texte. Vous n’aurez normalement pas besoin de cesoutilssivousutilisezlesCSS.

Lequatrièmepermetd’insérerdeslistesàpucesounumérotées.

Le cinquième bloc vous permet de faire un don pour aider audéveloppementdel’application.

Le sixième vous permet de régler l’indentation de votre texte. Làencore,recourirauxCSSpermetdesepasserdecesoutils.

LeseptièmeetdernierblocvouspermetdenettoyerlecodeHTMLdevotree-booketdevalidervotrefichierpourvousassurerqu’ilestcorrect.VousavezdéjàutilisélacochevertepourvousassurerquevotrepremierePubfonctionnaitconvenablement.

Pourquoidesoutilsquineserventàrien?Vous avez probablement remarqué qu’une bonne partie des outils

proposésparSigilnenousservirontpasdanslecadredecetutoriel.Lesutilisern’empêcheracertespasvotreePubdefonctionnermais,commelebut de ce tutoriel est de vous apprendre à réaliser un fichier optimisé,utiliser ces outils risque de plus vous gêner qu’autre chose : vousappliqueriezuneffetqu’il vous faudrait ensuite retravaillerproprementdanslecodedufichier.Nouspréféronsdeloinpasserdirectementparlecode pour configurer dès le départ les bons éléments, sans passer parl’étape utilisation d’outil + retouche. Cela sera peut-être un peu pluslaborieux(etencore,vousverrezquelehtmletlesCSSsontglobalementsimples pour les ePub)mais, au final, vous aurez la satisfaction d’avoirréalisé un ePub dont vous n’aurez absolument pas à rougir auprès desprofessionnels.UnePubqui,enoutre,seracalibrépouréviterlesbugsetfacilitersalecture.

RetourauSommaire

LesbasesduHTML

Bien.Nous entrons désormais dans la partie cambouis de l’ePub.Pourpouvoirréalisercequevoussouhaitezproprement,ilvavousfalloirpataugerunpeudanslecodehtmletlesCSS.Pasdepanique!Lehtmlestun langage simple, surtout lorsqu’il s’applique à du texte. Nous allonsdoncvoirdansunpremier tempscommentsecomposeun fichierhtml(ouxhtml),histoiredecomprendrelalogiquedeprésentation,puisnousaborderonslesbalisesutilesenePub.

Remarqueimportante:Toutes les informationsquisuiventontpourbut de vous familiariser avec le langage html. Mais vous n’aureznullementàtoutsaisiràlamain,Sigils’enchargetrèsbien.Seulement,lehtml,c’estcommelamécanique:sivousvoulezcommenceràbidouillerdans le moteur, il vaut mieux que vous compreniez comment çafonctionnepouréviterleserreurs.

LesprincipesdesaisieLe html est un langage de programmation dérivé de l’anglais. Par

conséquent, pour tout ce qui concerne ses éléments, n’utilisez PAS determesavecaccent.

Demême,celangageinformatiquegèremallesespacesauseindesespropres balises. Si vous devez créer des identités ou des classes (nousverronsplus loindequoi ils’agit), lesnomsquevouschoisissezdevrontêtre attachés et sans caractère spécifique. D’une manière générale,

cantonnez-vousà l’alphabet,auxchiffresetauxtirets,vousserezsûrdenepasvoustromper.

Lecoded’unepagewebUne page web telle qu’affichée par votre navigateur Internet est en

réalité une page de texte pur, contenant tout un tas d’instructionsd’affichage (tel élément enhaut, tel bloc à gauche…) et de liens vers lesobjets présents sur la page (une image, une vidéo, une adressemail…).C’est votre navigateur qui interprète les différentes instructions pouraffichercorrectementlapage.

Sous Sigil, imaginons une bête page xhtml qui contient le textesuivant:

Ceciestunepagetestd’ePub.Ellecomportetroisparagraphes.Ceciestunepagetestd’ePub.Ellecomportetroisparagraphes.Ceciestunepagetestd’ePub.Ellecomportetroisparagraphes.

SivouscopiezetcollezcestroisparagraphesdansunepageviergedeSigiletquevousbasculezensuiteenvuehtml(vialabarred’outilsouenapppuyantsurF11),vousaurezletextesuivant:

<?xmlversion="1.0"encoding="utf-8"standalone="no"?><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><head><title></title></head>

<body><p>Ceciestunepagetestd’ePub.Ellecomportetroisparagraphes.</p><p>Ceciestunepagetestd’ePub.Ellecomportetroisparagraphes.</p><p>Ceciestunepagetestd’ePub.Ellecomportetroisparagraphes.</p></body></html>

Présenté comme cela, l’ensembleparaît très absconsmaisne l’est enréalitépastantquecela.Nousallonsdécortiquerensemblelesdifférentespartiesdececodepourquevousencompreniezbienlalogique.

Leblocdedéclaration

<?xmlversion="1.0"encoding="utf-8"standalone="no"?><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Cepremierparagrapheindiqueaunavigateurdequoiestcomposélefichierqu’ilestentraindelire.Ilrépondàunesyntaxetrèsprécisedontilne fautpasdévier. Fortheureusement, Sigil génère tout seul ceblocdedéclaration.

Leblochtml

<html>

Cette ligne indique au navigateur que le reste du texte qu’il va lireutiliselelangagehtml.C’estdansceblocquevouspréciserezlalanguedevotre page, pour aider le logiciel à effectuer les bonnes césures. Il vousfaudrapourcelarajouterletextexml:lang="fr",pouravoir:

<htmlxml:lang="fr">

Remarque : Il vousparaît sansdoute étrangededevoir ajouter cettementionalorsque,danslesmétadonnéesdevotrefichier,vousavezdéjàprécisé la langue.Sachezquecerajoutpermetsurtoutauxmachinesdegérercorrectementlescésureset lesdictionnairesintégrés.Iln’estdoncpasnécessaireaubonfonctionnementdel’ePubmaisconstitueunejoliecerisesurlegâteau.

Leblocen-tête

<head><title></title></head>

C’estdansceblocquevousdéclarezcertainesinformationspropresaufichiertelletitredelapage(voussavez,cequiapparaîtenhautdevotrenavigateurInternet)oul’endroitoùallerchercherlesfeuillesdestyle.

Leblocbody

<body><p>Ceciestunepagetestd’ePub.Ellecomportetroisparagraphes.</p><p>Ceciestunepagetestd’ePub.Ellecomportetroisparagraphes.</p><p>Ceciestunepagetestd’ePub.Ellecomportetroisparagraphes.</p></body>

C’est dans ce bloc que vous allez avoir tout votre texte. Ce bloc peutdoncserévélertrèslongmaisilneprésenteguèrededifficultés.

Leblochtml,retour

</html>

Cettebalise clôt le fichierhtmletnouspermetd’aborder l’élément leplusimportantduhtml:l’utilisationdesbalises.

RetourauSommaire

LesbaliseshtmlIl faut savoir que le langage html utilise des balises, qui agissentcommedesmarqueursdanslefichier.Ainsi,ilexistedesbalisespourlestitres,lesparagraphes,lesimages…Pourfairesimple,imaginezlesbalisescomme des guillemets de dialogue. Quand vous lisez un texte, unguillemetaudébutvousprécisequeledialoguecommence.Et,enfindedialogue, un second guillemet, légèrement différent du premier, vousindique que le dialogue est terminé. Si vous n’avez que le guillemet dedépart, la lecturevousgênecarvoussentezqu’ilmanquequelquechoseenfindetexte.

Eh bien, pour les balises, c’est pareil : si vous voulez que toutfonctionne, il faut une balise au début et une autre balise, légèrementdifférente,àlafin.Etaumilieu,letexteauquels’appliquentlesbalises.

Touteslesbaliseshtmlprennentlaforme<XXX>et</XXX>.Labalise<XXX>figureaudébut,etla</XXX>figureenfin.

Sivousreprenezlecodeci-dessus,vousverrezquelesbalisessuiventexactementcette logique.Ainsi,vousavezenhautun<html>et toutenbasun</html>.Ouencore<p>et</p>.

Certaines balises sont également plus longues que d’autres. Parexemple, <html xmlns="http://www.w3.org/1999/xhtml"> est légèrementplus complexe qu’un simple <html>. C’est tout simplement parce que,pour certaines balises, vous pouvez rajouter des informationscomplémentaires à l’intérieur. Nous verrons plus bas les infoscomplémentairesqu’onpeut rajouter, l’essentiel étant icide se souvenirqu’ellessemettentdanslapremièrebalise.

LalogiquedescumulsdebaliseVous avez de la chance, le langage html est un langage relativement

simpleettrèslogique.Sivousl’abordezcalmement,vousverrezqu’iln’estguère sorcier pour peu que l’on garde en mémoire quelques grandsprincipes.

Nousavonsdéjàabordélepremierprincipe,celuidesbalisesouvranteset fermantes. Nous allons désormais aborder la question des balisesmultiples.

Imaginonsquevoussouhaitiezqu’unmotd’unparagraphese trouveenitaliquealorsqueleresteduparagraphenel’estpas.Votreparagraphenormalsetrouveraencadréparlesbalises<p>et</p>(lesbalisespourlesparagraphes)alorsquevotremotseraencadrépar lesbalises<i>et</i>(lesbalisespourl’italique).Supposonsquedanslaphrase“Jesuisicimaispaslà”,voussouhaitiezmettreenitaliquele“ici”.Onauraitalorslecodesuivant:

<p>Jesuis<i>ici</i>maispaslà.</p>

Comme vous le voyez, le code pour l’italique (<i> et </i>) se trouveimbriqué dans le code du paragraphe (<p> et </p>). L’imbrication desbalises est aussi simple que ça : la dernière balise ouverte doit être lapremière fermée. Comme dans un jeu de poupées russes, vous vousassurezquelapluspetite(icilaplusimbriquée)estcomplète(i.e.ouverteetfermée)puisvouspassezà lapoupéerusseunpeuplusgrandepuisàcelleencoreplusgrandeetainsidesuite.

Cela vous semble compliqué ? La bonne nouvelle, c’est que Sigil estéquipéd’unoutilpuissantpournettoyervotrecodehtml(c’estl’icônedupinceau à côté de la coche verte) et qu’il peut rattraper vos erreursd’inattention.L’autrebonnenouvelleestque,pourunfichiertexte,vousaurezrelativementpeudebalisesimbriquéeslesunsdanslesautres.

LesbalisesdehiérarchisationIlestmaintenant tempsdevousprésenter lesprincipalesbalisesque

vous pourrez utiliser. Plutôt que de toutes vous les lister abruptement,nousavonspréférélesregrouperparcatégories.Cescatégoriesnesontenrien officielles, elles nous ont simplement paru plus pratiques pour lacompréhensiondesdifférentesbalises.

Nousallonscommencerparlesbalisesdehiérarchisation,i.e.cellesquivouspermettentd’organiser votredocument.Elles sontdedeuxgrandstypes:lesbalisesdetitreetlesbalisesdeparagraphe.

Lesbalisesdetitre

Selon le niveau que vous souhaitez pour votre titre, ces balisesprendront la forme d’un h (heading en anglais, pour titre) suivi d’unnuméro.Ainsivousavez:

<h1></h1>pourlestitresdeniveau1<h2></h2>pourlestitresdeniveau2<h3></h3>pourlestitresdeniveau3<h4></h4>pourlestitresdeniveau4<h5></h5>pourlestitresdeniveau5Et<h6></h6>pourlestitresdeniveau6

Remarquezqu’iln’existepasdebalisespourdes titresdeniveau7etinférieurs.Sixniveauxdetitresont largementsuffisantspourcouvrir lahiérarchisationdevotre textemais, sivoussouhaitezallerau-delà,vouspouvez encore ruser en ajoutant des listes à puces, pour distinguer lesdifférentséléments.

Lorsquevousavezappliquélesstylesàvostitrespourpréparerlatabledes matières, Sigil a attribué ces balises aux textes concernés (vouspouvez le vérifier en basculant en vue html, via la barre d’outils ou enappuyantsurF11).

Labalisedeparagraphe

Elle est toute simple : <p> et </p>. Tout paragraphe de la pagecommencerapar<p>etseterminerapar</p>.

LesbalisesdemiseenformeAux commencements d’Internet, les CSS et leur mise en forme

n’existaient pas. Néanmoins, les concepteurs avaient pris soin de créerquelquesbalisesdemiseen formeapplicablesdirectementdans le codehtml.Cesdernièressonttoujoursutiliséesetvouspermettentd’allégerlecodedevosCSS(doncderendrevosfichiersplusefficaces).

Italique

Vous pouvez utiliser indifféremment <i> </i> et <em> </em>,interprétés de la même manière par les logiciels. Néanmoins, si voustenezàêtrelepluslogiqueparrapportaucodehtml,privilégiezle<em></em>.

GrasVous pouvez utiliser indifféremment <b> </b> (b comme bold, soit

gras en anglais) et <strong> </strong> interprétés de lamêmemanièrepar les logiciels. Néanmoins, si vous tenez à être le plus logique parrapportaucodehtml,privilégiezle<strong></strong>.

Souligné

Lehtmlutiliselesbalises<u></u>(upourunderlined,soitsoulignéenanglais)pourlesoulignement.Nousnelesmentionnonsiciqueparsoucid’exhaustivitécarcesbalisessontàbannirdansunePub:ellessonttout

simplementune sourced’erreur.Quiplus est, le soulignement sertdéjàpour les liens hypertextes. L’utiliser pour une autre fonction sera doncplussourcedeconfusionqu’autrechose.

Exposant

Si vous utilisez des abréviations, vous aurez peut-être recours à des“1er”,“2e”,“3e”etainsidesuite(notezaupassagequel’abréviationcorrecteutiliseseulement leeetnon leèmecommeon levoit tropsouventavec2ème,3ème,etc.).Leedecesabréviationsestenexposant,i.e.pluspetitetsurélevépar rapportà la lignedebasedevotre texte.Pour lemettre enexposant,ilfaudrautiliserlesbalises^et.

Par exemple, pour le texte “1er prix : une tablette tactile”, votre codeauralaformesuivante:

<p>1^erprix:unetablettetactile</p>

Remarque : L’utilisation de la balise <sup> permet effectivement derelever votre texte par rapport à la ligne de base. Néanmoins, elle nediminue pas la taille de la lettre. Pour que la mise en forme soitharmonieuseparrapportauresteduparagraphe,ilfaudradoncveilleràdéfinirunstylepourcettebalise,cequenousverronsplusloin.

Quelquesbalisessupplémentaires

Retouràlaligne

Parfois, vous voudrez que votre texte retourne à la ligne sansforcément générer un nouveau paragraphe (par exemple, vous voulezfaireuneénumérationavecdestiretsetnevoulezpasd’interligneaccru

entrechaqueligne).Danscecas-là,vouspouvezforcerlerenvoiàlaligneen utilisant <br />. Notez que, exceptionnellement, cette balise n’a pasbesoind’unebalisefermante.

Exemple

<p>Lesclassesdulycéesont:<br/>-seconde<br/>-première<br/>-terminale</p>

Lienshypertexteexternes

Voussouhaiterezpeut-êtreinsérerdansvotrefichierdesliensversdespagesweb.Danscecas-là,vousleferezavecl’instruction<ahref="XXX"></a> (a est l’abréviation de anchor, soit ancre en anglais), où vousremplacerezXXXparl’adressewebquevousdésirez.

Il est préférable que vos liens hypertextes soient clicables depuis untexte, et non une image. En effet, les liseuses ne traitent pas les lienshypertextes sur les images. Donc, si vous les mettez, sachez qu’ils neserontpastoujoursactifsetquetoutdépendradusupportdelecture.

ExempleSupposonsque,dansletexte“Plusd’infossurGoogle”,voussouhaitiez

que“Google”soitcliquableetvousamèneàlapaged’accueildumoteurderecherche.

Lecodehtmlseraalors:

<p>Plusd’infossur<ahref="http://www.google.com">Google</a>.</p>

Lienshypertexteauseindel’ePub

Parfois, notamment si votre texte est long, vous aurez envie depermettreàvotrelecteurd’allerdirectementàunesectiondevotrepagexhtmloudevotredocument.Ilnes’agitdoncpasicideliensexternesquirenvoient vers une adresse extérieuremais de liens internes propres àvotre fichier. On distinguera deux types de liens internes : ceux quirenvoientàuneautrepagexhtmldevotreePubetceuxquirenvoientàlamêmepage xhtml de votre ePubmais à un autre endroit (commepourunenotedebasdepage).

Dans le premier cas, le code reste le même que ci-dessus (soit <ahref="XXX"></a>),àceciprèsque,enlieuetplaceduXXXmentionnéci-dessus,vousindiquezlenomdelapagexhtmlquevoussouhaitez.

Normalement, l’ensemble des documents xhtml se trouvent dans lemêmesous-dossierde l’ePub(généralementText).Vousn’avezdoncpasbesoindepréciser l’emplacementdu fichier.Cependant, s’il s’avèreque,pour une raison ouune autre, les textes liés ne se trouvent pas dans lemêmesous-dossier,ilfaudraalorspréciserlecheminàsuivre.

ExempleVousavezuntextequidit“Vouspouvezensavoirplussurl’auteurici”,

où“ici”renvoieàunenoticebibliographiquedel’auteurprésenteenfindefichier.Cettenoticesetrouvedansunepagexhtmlintituléenotice.xhtml.Lecodeestalorslesuivant:

<p>Vouspouvezensavoirplussurl’auteur<ahref="notice.xhtml">ici</a>.</p>

Supposons maintenant que cette notice se trouve ailleurs, dans unrépertoireintituléText.Lecodeseraitalors:

<p>Vouspouvezensavoirplussurl’auteur<ahref="../Text/notice.xhtml">ici</a>.</p>

Les .. indiquent qu’il faut remonter d’un dossier dans l’arborescence(i.e. passer du dossier où se trouve le xhtml au dossier racine) puis serendredansledossierTextpourytrouverlabonnepage.

Lienshypertexteauseind’unemêmepage

Si vous souhaitez qu’au sein d’une même page xhtml, un renvois’effectue (commepourun appel denotede basdepage, par exemple),vousallezavoirbesoindedeuxélémentssupplémentaires:idet#.

Id(pouridentification)estunmarqueurquiagitcommeunesortededrapeau. Vous l’intégrez au sein d’une balise déjà existante, vous luiattribuezunnomet, lorsquevousvous référerezàcenom, le logiciel leretrouveraautomatiquement.Commeils’agitd’unmarqueurquipermetaulogicieldeserepérer,lesiddechaquepagedoiventêtreuniquespourempêchertouteconfusion.Lenomattribuéàuneidnepeutdoncpasêtrereprispouruneautreiddelamêmepage.

Remarque:Vouspouvezenrevancheattribuerlemêmenomàdesidqui se trouventdansdespagesdifférentes.Eneffet, lorsquevous faitesun lien vers une autre page, vous précisez le nom de la page, ce quiempêchelaconfusionavecuneautreid.

#estpoursapartunmarqueurquiindiqueaulogicielderesterdanslamêmepagexhtml.Lorsquevoussaisissezlelien,enlieuetplaceduXXX,vousprécisez#suividunomdel’idquevousaurezdéfinie.Lelogicielsechargeradevousemmenerdirectementautextecorrespondant.

ExempleVous souhaitez que, dans votre texte, le terme “Calembour” soit

cliquable et vous amène en bas de fichier pour une note explicativementionnant “Définition de Calembour : jeu de mots”. Pour cela, vous

allezdevoirindiquer,pour“Calembour”,qu’ilyaunlienàsuivreet,pour“DéfinitiondeCalembour : jeudemots”,qu’il y aundrapeauauquel serendre.Cedrapeaudoitavoirunnom,quenousappellerons“note1”.

Lecodeseralesuivant:

<p><ahref="#note1">Calembour</a></p><pid="note1">DéfinitiondeCalembour:jeudemots</p>

Le#note1indiqueaunavigateurderechercherl’idnote1danslamêmepagexhtmlqueletexte.Lenavigateurserenddoncauparagraphedéfiniparid="note1"etl’affiche.

Remarque :Nousnesaurions tropvousconseiller, si vousmultipliezlesrenvois,deresterlogiquedanslesnomsquevousdonnezàvosid.Celaseracertesunpeupluslaborieuxmaisvouspermettraaufinaldemieuxvousyretrouver.

Lienshypertexteversunpointprécisdel’ePub

Vous aurez parfois besoin d’insérer un lien vers un endroit précisd’une autre page xhtml. Supposons par exemple que, dans un ePub derecettes de cuisine, une page liste tous les ingrédients nécessaires et lamanièrede lespréparer etque vous souhaitiez insérerun lien,nonpasvers lapagedesingrédientsmaisversuningrédientenparticulier.Ilvavousfalloirindiqueraulogicieldansquellepageallerchercher,etàquelleancres’attacher.

Le code est ici un mélange de deux codes que nous avons vus ci-dessus:lelienversuneautrepageetlelienauseind’unemêmepage.Ilprendralaformesuivante:

<ahref="nomdelapage#nomdelabalise"></a>

N’oubliezpasdanslenomdelapage,debienpréciserlenomcomplet,avecl’extension(xhtmlouhtmllaplupartdutemps).

ExempleReprenons l’idée de la recette de cuisine. Vous souhaitez que votre

texte“1kgdepommesdeterre”renvoieverslapageingredients.html,àlabalisepommesdeterre.Vousaurezalors:

Danslapageoùvousinsérezlelien:

<p><ahref="ingredients.xhtml#pommesdeterre>1kgdepommesdeterre</a></p>

Et dans votre page d’ingrédients, pour le paragraphe pommes deterre:

<pid="pommesdeterre">Lespommesdeterrepeuventseconserverplusieursjoursavantd’êtreconsommées.</p>

Renvoismultiples

Gardezenfinàl’espritquevotretexteestuntextevivant,danslequellelecteur doit pouvoir naviguer facilement et reprendre sa lecture aprèsavoirluvotrerenvoi.Delamêmemanièrequevousavezdéfinidesliensdutexteversvotrerenvoi, il vous faudradoncdéfinirdes liensdevotrerenvoiversletexte,toujoursavec<ahref="XXX"></a>.

ExempleReprenonslecasdelanoterelativeauxcalembours.Conformémentà

nosrecommandations,vousavezdécidédemettreunrenvoià la findevosnotespourretourneraucorpsdutexte.Vousavezdeuxidàdéfinir:cellepourleparagraphecontenantl’appeldenote,pourpouvoiryrevenir

parlasuiteetcellepourlanote.Nousappelleronscesdeuxid“Onote1”(opour origine) et “note1”. Enfin, nous insérerons en fin de note le texte“[Retour]”,cliquablepourrevenirautexte.

Lecodeseraalorslesuivant:

Pourl’appeldenote:<pid="Onote1><ahref="#note1">Calembour</a></p>

Pourlanoteàproprementparler:

<pid="note1">DéfinitiondeCalembour:jeudemots.<ahref="#Onote1">[Retour]</a></p>

Liensmail

Vous pouvez également vouloir que le lien n’ouvre pas une pageInternetmaisunmaildanslequelilsoitpossibled’écrire.Danscecas-là,la balise est juste un peu plus précise : <a href="mailto:XXX"> où vousremplacerezXXXparuneadressemailvalide.

ExempleDansvotrepagedeprésentation, vous souhaitez laisser lapossibilité

au lecteur de vous contacter et indiquez donc lamention suivante : “Sivousavezdesremarquesoudessuggestions,n’hésitezpasàmecontacteràesteriane626@gmail.com.”.

Lecodehtmlseralesuivant:

<p>Sivousavezdesremarquesoudessuggestions,n’hésitezpasàmecontacterà<a

href="mailto:esteriane626@gmail.com">esteriane626@gmail.com</a>.</p>

Remarque : Dans le code html, l’adresse mail de cet exemple estrépétéedeux fois.Lapremière indiqueenréalitéaunavigateur le lienàsuivrepourenvoyer lemessage tandisque lasecondeaffiche l’adresseàl’écran.Maisvouspouveztoutàfaitavoircommetexte“Sivousavezdesremarquesoudessuggestions,n’hésitezpasàmecontacter ici”avecun“ici”cliquablequiouvrelamessagerie.Lecodeseraalors:

<p>Sivousavezdesremarquesoudessuggestions,n’hésitezpasàmecontacter<ahref="mailto:esteriane626@gmail.com">ici</a>.</p>

Insertiond’image

LescritèrespourinséreruneimageVous souhaiterez très probablement insérer des images dans votre

texte, qu’il s’agisse d’un logo ou de votre couverture. Sigil vous permetd’insérer très facilementde telles images viaÉdition\Insérerune imageou le bouton de la barre d’outils. Cependant, vous devez connaîtrequelquesélémentspourprocédercorrectement.

En premier lieu, le format de fichier. Il existe de multiples formatsd’affichaged’imagemaislesePubn’engèrentquetrois:les.jpg,les.gifetles.png.Lechoixd’unformatoud’unautrepourvotreePubaassezpeud’incidence sur laqualitéd’affichagedonc il vous suffitde vousassurerquevosimagessontaubonformat.

Endeuxième lieu la tailledevotre fichier image.Nousavonsvuplushaut qu’un ePub était un fichier compressé type zip qui contenaitdifférentséléments,dontdesimages.Donc,pluslefichierdevotreimagesera lourd etplus l’ePub le sera. Si vous avezpeud’images, cen’est pas

forcémentgênant.Néanmoins,sivotreePubcontientbeaucoupd’images,il peut être intéressant que vous réduisiez en amont le poids de vosfichiers pour éviter de vous retrouver avec un ebook de plusieursmegaoctets.

Pour réduire le poids de vos fichiers, vous avez deux solutions (quevouspouvezcombiner):réduirelenombredepixelsquicomposentvotreimageetprivilégierleformatjpg.Eneffet,leformatjpginclut,àlabase,unecompressiond’imagesibienqu’uneimageenjpgneferapaslemêmepoidsqu’uneimageen.gif.

Pour réduire le nombre de pixels de votre fichier, il va vous falloirpasserparunlogicielderetouched’image.Gimp[http://www.gimp.org]estgratuitetpermettrèsbiencela:

1. OuvrezvotreimagedansGimp2. AllezdansImage\Échelleettailledel’image3. Assurez-vousdevoirlesymboled’unechaînereliée,entrela

largeuretlahauteurdevotreimage.Celasignifiequevotreimageseramodifiéedefaçonproportionnelle.Aubesoin,cliquezsurlachaînebriséepourqu’ellesoitànouveaureliée.

4. Modifiezlalargeuroulahauteurdevotreimage.5. Enregistrezvotreimage.6. Réitérezsibesoinlesétapes1à5.

Labalisehtmlpourl’insertiond’imageSivousfouillezdanslecodehtmldevotreePub,ilestbondesavoirà

quoicorrespondlabalisepourinsérerdesimages.Cettedernièreprendralaformesuivante:

<imgalt=""src="XXX"/>

Le alt indique sommairement à quoi ressemble l’image et est utilisépour lessites internet.Si l’imagevientàmanquer,vouspassez lasouris

dessuset letextes’affiche.BienévidemmentdansunePub,votreimagesetrouvedanslefichierdoncvousn’avezpasbesoindemettreuntexteencasd’absence.

Le src indique le chemin et le nom de l’image à utiliser. Il prendgénéralementlaformesuivante:src="../Images/XXX"oùXXXestlenomdevotreimage.Commevuplushaut,les..indiquentqu’ilfautremonterd’undossierdansl’arborescence(i.e.passerdudossierTexteoùsetrouvelexhtmlaudossierracine)puisserendredans ledossierImagespourytrouverlabonneimage.

Enfin,n’oubliezpasdemettrelenomcompletdevotreimage,avecsonextension(jpg,gifoupngdanslecadred’unePub)etenrespectantbienlesmajusculesetlesminuscules.

Lesbalisesd’organisationNousentronsicidansdesbalisesunpeupluscomplexesetspécifiques,

qui vont vous permettre d’affiner la présentation de votre fichier. EllesserontutiliséesconjointementaveclesCSS.

SpanNousavonsvuqu’ilexistaitdesbalisespourlesparagraphes,lestitres,

etc. Curieusement, il ne semble pas en exister pour des mots ou deslettres seuls. En réalité, c’est la balise <span> </span> qui remplit cetoffice.

Utilisée seule, <span> </span> n’ajoute rien au code html, il s’agitsimplementd’unélémentneutre.Néanmoins,toutl’intérêtdecettebaliseestqu’ellepeutêtrerenseignée(parunid,parexemple),cequiluipermetdepouvoirgrandementinteragiraveclesCSS.

Exemple

Vousrédigezuntextesurlesfilmsd’actionetfaitesréférenceàPiègede

Vousrédigezuntextesurlesfilmsd’actionetfaitesréférenceàPiègedecristal, lepremierfilmdelatrilogieDieHard,avecBruceWillis.Vousnesouhaitezpassurchargervotretexteavectropd’informationsfilmiquesetdécidezdelesfairefigurerennotedebasdepage.

Votretexteseralesuivant:

<p>Àbiendeségards,<i>Piègedecristal</i><spanid="Onote1"><ahref="#note1">⁽¹⁾</a></span>constitueunincontournabledesfilmsd’action.</p>

IciPiège de cristal est suivi d’une note en exposant (1) et, en cliquantdessus,vousarrivezàvotrenote.Lesbalisespermettentdegénérerl’exposant.Les<ahref="#note1"></a>précisentlerenvoiàsuivre.Enfin, les <span id="Onote1"></span> définissent le marqueur quipermettraaulecteurdereprendresalectureaprèsavoirlulanote.

Votrenotedebasdepageauraquantàellelecodesuivant:

<pid="note1">⁽¹⁾<i>Piègedecristal</i>estunfilmdeJohnMcTiernanquilançavéritablementlacarrièredeBruceWillis.<ahref="#Onote1">[Retour]</a></p>

Ici,nous appliquons l’id à labalise<p> carnous avonsbesoinque lelecteurcommencelanoteaudébutduparagraphe.

Div

Nous venons de voir que la balise <span> s’applique à des élémentstextuels.SivoussouhaitezpouvoirappliquerdesCSSàdesblocsdetexteet non à des éléments disparates, vous aurez besoin de la balise <div></div>(divpourdivisionenanglais).L’utilisationdecettebaliseindique

aunavigateurdeconsidérer l’ensembledu texte inclusdanscettebalisecommeungrosblocsurlequelagir.

NousverronsauchapitreCSScomment l’utiliserconjointementaveclesfeuillesdestyle.

RetourauSommaire

LesCSS

NousabordonsàprésentlamanièrederéaliserdesfeuillesdestyleencascadeetdelesappliquerauxpagesxhtmldevotreePub.Pourcela,nousallonsprocéderenplusieurstemps.Toutd’abord,nousvousindiqueronsl’endroitoùmettrevotrefeuilledestyleainsiquelemoyend’yfaireappeldepuis vos pages xhtml. Nous aborderons ensuite la manière dont seprésente un style CSS avant de détailler les propriétés les plus souventutiliséesdansunePub.Noustermineronsenfinparquelquestrucsauquelilfautfaireattentionpouravoirunfichiervraimentnickel.

Comme souvent, il n’y a rien de vraiment sorcier dans les outils àmaîtriser,ilsuffitjusted’unpeudelogiqueetd’organisation.

RetourauSommaire

Oùsecachentlesfeuillesdestyleetlesstyles

QuelquesdéfinitionsToutd’abord,précisonsladifférenceentrelesstylesetlesfeuillesdestyle.

Un style est un ensemble de paramètres graphiques (espacement,police,tailledutexte…)quis’appliqueàunepartiedonnéedutexteoudel’image.

Une feuille de style est pour sa part le fichier dans lequel sontenregistrés tous les styles.Vousn’avezdoncpas besoind’une feuille destyleparstyle.Nousvousrecommandons,pourdesraisonsdesimplicité,den’avoirqu’uneseulefeuilledestyledansvotreePub.

OùtrouverlafeuilledestyleFortlogiquement,lafeuilledestylesetrouvedansledossierStylesde

l’ePub. Néanmoins, il faut savoir que les feuilles de style sont une“coquetterie” de présentation et ne sont nullement nécessaires au bonfonctionnementdel’ePub.Siaucunstylen’estdéfini,lelogicielutilisesamiseenpagepardéfaut,toutsimplement.Donc,sivousouvrezunePubquevousaveztéléchargé,nevousétonnezpassivousnetrouvezaucunefeuilledestyle.

InsérerunefeuilledestyleviergedansvotreePubesttrèsfacile.Nous

InsérerunefeuilledestyleviergedansvotreePubesttrèsfacile.NousallonsvoircommentprocéderavecSigil.

1. SélectionnezledossierStyle.2. FaitesunclicdroitetsélectionnezAjouterfeuilledestylevierge3. UnfichiernomméStyle0001.cssapparaît.Vouspouvezsibesoinle

renommer.Danscecas,n’utilisezpasd’accentsetn’oubliezpasdeconserverl’extensiondefin.css.

Remarque:LesfichiersquiconstituentletextedevotreePubsontauformat xhtml. Le document qui regroupe vos styles est dans un autreformat (CSS)etdoitdoncporter l’extension .csspourque lenavigateursachedequoiils’agit.

IndiqueràSigilqu’ilfaututiliserlafeuilledestyleMaintenantquevousavezcréévotre feuillede style, il estnécessaire

queSigil sachequ’il doit l’utiliser et pourquelles pages. Pour cela, vousdevezinsérerunliendanschaquefichierxhtmloùvoussouhaitezutiliserles CSS. Nous vous conseillons d’insérer ce lien dans tous vos fichiersxhtml,pourquevotreePubsoithomogèneentermesdemiseenforme.

Rappel : Ce lien peut être automatiquement intégré dans vos pagesxhtml si vous utilisez le saut de chapitre pour insérer des pages (voirInsérerdespages).Pourchaquepageainsicréée,vousdevrezcependantnettoyerlabalisebody,enremplaçant<bodystyle="">par<body>.Fautedequoilelienversvotrefeuilledestylenes’appliquerapas.

Leliensemetdansleblocen-têtedevotrepagexhtml,i.e.lapartiedufichierquicommencepar<head>etse terminepar</head>.Nousvousconseillons de mettre le lien directement à la suite des balises <title></title>.

Lelienprendralaformesuivante:

<linkhref="../Styles/XXX.css"rel="stylesheet"type="text/css"/>

OùXXX.cssestlenomdevotrefeuilledestyleCSS.Sivousn’avezpasrenommévotrefeuilledestyle,letexteàinsérerseradonc:

<linkhref="../Styles/Style0001.css"rel="stylesheet"type="text/css"/>

Àl’instardesimages,letexte“../Styles/Style0001.css”préciselecheminàsuivrepourlelogiciel,depuislefichierxhtmljusqu’àlafeuilledestyle.Les.. indiquentqu’ilfautremonterd’undossierdansl’arborescence(i.e.passerdudossierTexteoù se trouve le xhtmlaudossier racine)puis serendredansledossierStylespourytrouverlafeuilledestyle.

Le texte rel="stylesheet" précise que le lien est une feuille de style.Quantautextetype="text/css",ilprécisequecettefeuilledestyleseraenCSSetcomposéedetexte.

Point important : les liens au sein de l’ePub sont particulièrementsensibles à l’usage desmajuscules et desminuscules dans les noms defichier. Si votre feuille de style se nomme STYLE.css et que vous faitesappel,danslelien,aufichierstyle.css,lelogicielnetrouverapaslafeuillecorrespondanteetSigilrenverrauneerreurlorsdelavérification.Veillezdoncàbienrespecterl’usagedesmajusculesetdesminuscules.Pourunemeilleure facilité, nous vous conseillons, soit de tout mettre enminuscules (styles.css), soit de ne mettre la majuscule qu’au premiercaractèredunomdevotrefichier(Styles.css).

Rappel:LesnomsdefichieretletextedesCSSnedoiventpasutiliserde lettreaccentuée.Lesaccentssontautorisésuniquementdans letextedevospagesxhtml.

Exemple

Vous avez un fichier ePub constitué de quatre pages xhtml,respectivement intitulées couverture.xhtml, chapitre1.xhtml,chapitre2.xhtmletchapitre3.xhtml.Vousdisposezd’unefeuilledestylesintituléeStyleePub.css,quisetrouvedansledossierStylesdel’ePub.

Lesblocsen-têtedesquatrepagesxhtmlserontlessuivants:Pourlefichiercouverture.xhtml:

<head><title></title><linkhref="../Styles/StyleePub.css"rel="stylesheet"type="text/css"/></head>

Pourlefichierchapitre1.xhtml:

<head><title></title><linkhref="../Styles/StyleePub.css"rel="stylesheet"type="text/css"/></head>

Pourlefichierchapitre2.xhtml:

<head><title></title><linkhref="../Styles/StyleePub.css"rel="stylesheet"type="text/css"/></head>

Etpourlefichierchapitre3.xhtml:

<head><title></title><linkhref="../Styles/StyleePub.css"rel="stylesheet"type="text/css"/></head>

Remarque:Letexteestàchaquefoisrigoureusementlemême,vuquevousvousréférerezàchaquefoisàlamêmefeuille.Nousl’avonsindiquéiciparsoucid’exhaustivité,pourquevouscompreniezbienlanécessitédedéclarerlafeuilledestyledanstouteslespagesdevotreePub.

Remarque : Généralement, les balises <title> et </title> encadrent letitredelapagehtmlquiapparaîtausommetdelapagelorsdelalecture.Nous ne l’avons pas indiqué ici pour ne pas surcharger le code de

l’exemple. Néanmoins, vous pourriez tout à fait avoir<title>Couverture</title>, <title>Chapitre 1</title>, <title>Chapitre2</title>et<title>Chapitre3</title>

RetourauSommaire

LasyntaxeCSS

LastructuredesfeuillesCSSÀ la différence des pages xhtml de votre ePub, vous n’avez pasbesoindeprécisertoutuntasd’élémentsaudébutdevotrepageCSS.Lesimplefaitquelenomdufichierseterminepar.cssindiqueaulogicieldequoi il s’agit. Votre feuille de style CSS sera donc une simple liste desstylesCSSutilisésetdeleursparamètres.

LesclassesNousavonsvuque lesprincipalesbalises liéesautextesont les titres

(h1, h2, h3…), le paragraphe (p) et la balise neutre <span>. Seulement,votre texte risque fort d’avoir des mises en forme supplémentaires,commelesappelsdenote,lesnotesdebasdepage,lestextesenexposant(1er,2e,3e…),etc.Ilpeutmêmeyavoirdesparagraphesoùvoussouhaitezappliquer un style autre que celui normalement défini pour lesparagraphes.

Pourtousceséléments,onnepassepaspardesbalisesmaisparcequel’on appelle des classes.Une classe est une catégorie pour laquelle vousdéfinissez un style particulier. Vous pourrez donc avoir une classenotedebasdepage,uneclasseappeldenote,uneclasse signature, etc.Cesclasses peuvent, au choix, s’appliquer à toutes les balises ou à un typeprécisdebalises.

Faireappelàuneclasseestrelativementsimple:ilsuffitdelepréciser

Faireappelàuneclasseestrelativementsimple:ilsuffitdelepréciserdanslabaliseouvranteconcernéeenajoutantclass="XXX"oùXXXestlenomque vous aurez attribué à votre classe.Notez la syntaxe anglaise :class s’écrit sans le e en html. Et, comme d’habitude, rappelez-vous den’utiliserni lettresaccentuées,ni caractères spéciauxdansvosnomsdeclassessouspeinedeproblèmed’affichage.

Exemple

Vousdisposezderemerciementsquevoussouhaitezmettreàlafindevotre texte.Au seinde votre feuillede style, vousavezdéfiniune classe“remerciements”aveclamiseenformeadéquate(nousverronscommentunpeuplusloin)etsouhaitezl’appliquer.Votreparagrapheauraalorslaformesuivante:

<pclass="remerciements">Jevoudraisremerciertousceuxquiontcontribuéàlamiseenœuvredeceprojet.</p>

LasyntaxeCSSAu seind’une feuilleCSSbasique, un styleCSSpeut se présenterde

troismanières:

XXX{YYY:ZZZ;}.XXX{YYY:ZZZ;}AAA.XXX{YYY:ZZZ;}

Lepremiers’appliqueauxbalisesetleXXXestremplacéparlenomdelabalisecorrespondante(p,h1,sup,etc.).

Ledeuxièmes’appliqueauxclassesetleXXXestremplacéparlenomdelaclasseprécédéd’unpoint.

Le troisième s’applique aux classes liées àunebalise spécifique.AAA

Le troisième s’applique aux classes liées àunebalise spécifique.AAAest remplacépar labaliseetXXXpar lenomde laclasse,avecunpointpourlesrelier.

YYY désigne pour sa part une propriété CSS (espacement, couleur,taille,alignement…)etZZZ lavaleurde lapropriété (espacede2points,couleur rouge, taille de 12 points, alignement justifié…). Pour cettedernière,lorsqu’elleestchiffrée,ilimportedepréciserquelleunitéutiliser(lepoint,lepixel,lepourcentage…).Nousdétailleronsplusloincesunités.

Lorsquevous tapez vosCSS, faitesbienattentionà laprésencede laponctuation: lepointendébuts’ils’agitd’uneclasse, lesaccoladespourouvrir et fermer les propriétés du style, et le point virgule à la fin dechaquepropriété (il n’est pas obligatoire sur la dernière lignemais celaéviteradesoublisfâcheux!).

Exemple

Noussouhaitonsquetouslesparagraphessoientjustifiés(i.e.alignésàgaucheetàdroite)et,enparallèle,quecertainstextesaientunetailledecaractères un peu plus grande. Nous allons donc définir deux stylesdifférents.Lepremiers’appliqueraauxparagraphesetlesecondserauneclasse qui ne s’appliquera que si on fait appel à elle. Nous appelleronscetteclasse“big”.Lapropriétépour letexte justifiéesttext-alignetcellepourlatailledelapoliceestfont-size.LesdeuxCSSaurontdonclaformesuivante:

p{text-align:justify;font-size:1em;}.big{font-size:1.2em;}

Etlecodedevotretexteseprésenteracommesuit:

<p>Ceciestunparagraphenormalquiutiliseuniquementlamiseenformedustylep.</p><pclass="big">Ceciestunparagraphequi,enplusdustylep,utiliselestyledéfiniparlaclass“big”.</p>

Cequi,enversiongraphique,donneralachosesuivante:Ceciestunparagraphequi,enplusdustylep,utiliselestyle

définiparlaclass“big”.Remarque : Vous pouvez attribuer plusieurs class enmême temps à

unebalise.Ilsuffit justedelesséparerparunespace.Parexemple,vouspourrieztoutàfaitavoirun<pclass="bigtextegras">oùs’appliqueraientàlafoislaclassbigetlaclasstextegras.Sijamaisilyadesconflitsentrelesclass,c’estladernièrequiapréséance.

Si nous souhaitons que le corps de 1.2em ne s’applique qu’à desparagraphesetpasàdestitres,laCSSprendalorslaformesuivante:

p.big{font-size:1.2em;}

Remarque : Les CSS étant des feuilles de style en cascade, ellesdépendentlesunesdesautres.Pourlestylep.big,laclassebigdécouledustylep.Vousn’avezdoncpasbesoindereprécisertoutelamiseenformedustylep.Enprécisantp.big,laCSSsaitqu’elledoitappliquerd’abordlesstyles du paragraphe puis ceux de la classe. Comme pour ci-dessus, sijamais il yades informationscontradictoires, c’est ladernière indiquéequiapréséance(bigdanslecadredenotreexemple).

LesCSS“enrichies”L’exemple ci-dessus est relativement simple car chaque stylen’utilise

qu’une propriété. Néanmoins, tout l’intérêt des CSS est de pouvoircombiner ces dernières en fonction de ses besoins. Pour cela, il suffitsimplement demettre les propriétés CSS et leurs valeurs les unes à lasuitedes autres, séparéespar le point virgule.Ànoter que vouspouveztout à fait, pour plus de lisibilité, insérer des sauts de ligne et/ou desespacesaprèschaquepointvirgule.Lesespacesetsautsdelignen’onteneffet pas grande signification en CSS, les éléments les plus importantsétantlesaccolades,lespointsvirgulesetlepointpourlaclasse.

Exemple

Noussouhaitonsdésormaisquenotreparagraphesoit justifiéetavecuncorpsde1.2em.Danscecas,laCSSestlasuivante:

p{text-align:justify;font-size:1.2em;}

Ou,sivouspréférez:

p{text-align:justify;font-size:1.2em;}

LesunitésdemesureNousavonsvuplushautqu’unepropriétéCSSétaitsuivied’unevaleur

après ses “:”. Avant de détailler les propriétés les plus communes, il est

utiledepréciserquellesmesurespeuventêtreutiliséesetcommentbienlesemployer.

Lesvaleursabsolues

Ilexistedeuxgrandstypesdevaleurs:lesabsoluesetlesrelatives.Lesvaleurs absolues ne changent pas quel que soit le support utilisé. Parexemple,sivousdéfinissezqu’uneimagefait300pixelsdelarge,elleferatoujours300pixelsdelarge,quecesoitsurunsmartphone,uneliseuse,une tabletteouunécrand’ordinateur.Danscecas-là, il yadeschancesque l’image soit trop grande sur un smartphone et trop petite sur unécran d’ordinateur. Cela ne signifie cependant pas que vous ne devezutiliseraucunevaleurabsolue,simplementqu’ilfautgarderentêtecettecontrainte.

Vous aurez principalement deux types de valeurs absolues : le pixel(px)etlepoint(pt).Lepixelestuneunitépourlesimagesetlamaquetteengénéral.Ilprécisecombiendepointsdel’écranutiliser.Parexemple,sivotreécrand’ordinateuraunerésolutionde1024x768pixels,celasignifieque, si vous demandez à votre image de faire 2000 pixels de long, elledéborderasurladroitedel’écran.

Le point définit quant à lui la hauteur de la police que vous utilisez(théoriquement,unpointcorrespondà1/72edepoucesoit0,352mm)ets’utilise doncpour le texte. Si vous êtes habitué au traitementde texte,vousutilisezdéjàlepointcommeunitédemesurepourlatailledevotrepolice.

LesvaleursrelativesÀl’inversedesvaleursabsolues, lesvaleursrelativessontdéfiniespar

rapport à d’autres. Par exemple, elles prennent en compte la taille del’écranou lahauteurde la ligne.Ellespermettentdoncdes’adapterauxdifférents supports sur lesquels apparaîtra le fichier, afin d’obtenir un

affichageharmonieux.Ilexistedeuxgrandstypesd’unitésrelatives:le%etleem.

Le%est,commesonnoml’indique,unpourcentage.Pardéfaut,100%correspond à la valeurmaximale de la propriété, généralement définiepar l’écran. Ainsi, une hauteur de 100 % correspondra à la hauteur devotreécran,unelargeurde100%àlalargeurdel’écranetainsidesuite.Sivous demandez donc à une propriété de ne faire que 50 % de la tailleinitiale,elleprendralamoitiédelahauteuroudelalargeurdel’écran.

LatailledespolicesEnmatièrededimension,onpeututiliserplusieursunitésdemesure:

le point (pt), le nombre de pixels (px) et la largeur de m (em). Ce em(différentduemutilisépourl’italique)correspondàlalargeurdelalettremdanslapolicedecaractèreutiliséeetsataillepardéfautestde1em.Lalargeur de la lettrem sert ici de référence pour étalonner la totalité devotredocument, et permetd’utiliser votrepolicede caractère à sa taillenaturelle.

Ainsi, même s’il est en général admis qu’une police de caractèrestandard présente un corps d’une taille de 12px, il est recommandéd’utiliserlamesuredebaseenem,àsavoir1em.Commelamesureenemestproportionnelle,contrairementauxmesuresenptetenpx,lelecteurpourraainsimodifierlatailledutextedemanièreproportionnelle.

Ainsi, si les <p>de votre corps de textemesurent 1em, vous pourrezattribuerauxtitresunevaleurde2em,ou3em,parexemple.Attention,lesvirgulesn’existentpasdanslanotationem:ilfautlesremplacerpardespoints. Ainsi, si vous souhaitez que votre classe big soit 1,2 fois plusgrande (20%de plus) que votre texte courant, il faudra indiquer 1.2em.Inversement, unenotede basdepage serapluspetite et pourrait avoirunetaillede0.8emvoire0.5.

Ces différences entre notations de taille peuvent paraîtreinsignifiantes mais elle sont en réalité extrêmement importantes. Eneffet,enfonctiondesappareilsdelecture,delatailledeleurécranetdeleurrésolution,avoirunetailledecaractèrebloquéeempêcheralelecteurde régler la taille du texte comme il l’entend, le privant ainsi d’uneexpériencedelectureoptimale.

C’est pourquoi nous vous conseillons, pour le texte courant <p>,d’utiliserlataille1em,etd’adapterensuitevostitresetautressectionsenfonction de cette taille de référence, à l’aide d’em proportionnels. Vouspouvez également utiliser le pourcentage % comme référencetypographique.Danscecas,laCSSpour<p>sera:p{font-size:100%;}

Une dernière remarque concernant les unités absolues et relatives :vousverrezquecertainespropriétésCSSdemanderontplusieursvaleurs.Danscecas-là,évitezdemélangervaleursabsoluesetvaleursrelatives,oumêmedesunitésdifférentes.Celacomplexifie le travaild’interprétationdulogicieletpeutcréerdesconfusions.

RetourauSommaire

LespropriétésCSSBien,maintenantquenousavonsdébroussaillélamanièred’utiliserlesCSS,abordonslesdifférentespropriétéspossibles.

LesbalisesauxquellesappliquerlesfeuillesdestyleNous avons vu plus haut que vous pouviez appliquer les CSS à

certaines balises html. Nous mentionnons les principales ici à titre derappel.

BodyAu sein de cette classe, vous préciserez la mise en forme que vous

souhaitezappliqueràl’ensembledudocument.Cettemiseenformeseraen effet utilisée pour tous les éléments qui figurent entre les balises<body>et</body>devotrepagexhtml,soittoutvotretexte.

Généralement, les styles body précisent lesmarges extérieures (pouréviterqueletextecolleauborddel’écran)et,plusrarement,lesretraitsdepremièreligne,latailledelapoliceouencorelapoliceàutiliser.

Cependant, il faut malheureusement rappeler que les liseusesn’interprètent pas les instructions de la même façon. Les Kobo parexemple (dont la Kobo by Fnac) ne prennent ainsi pas compte despropriétéspréciséesdansbody.Donc,même si c’est laborieux etmoinspertinententermesd’architectureCSS,nousvousconseillonsdenepasutiliser de styles pour cette balisemais de détailler davantage les styles

desautrespropriétés(lesparagraphesetlestitres,principalement).Ainsi,mêmesi cela semble redondant, il vautmieux rappeler lesmargespourles <p> et les <h1>, <h2>, <h3>… pour être sûr qu’elles seront prises encomptecorrectementsurtouslessupports.

p

Vouspréciserezdanscetteclassetoutcequevoussouhaitezappliquerà un paragraphe lambda de votre texte : taille du texte, italique, gras,retraitdepremièreligne,justification…

Gardezjusteàl’espritque,commenoussommesenCSS,lesstylesdel’objetbodys’appliquentdéjàdoncvousn’avezpasbesoindelesremettre,àmoinsdevouloirspécifiquementlesmodifier.

h1,h2,h3…Ici, vous mentionnerez la mise en forme spécifique à chaque titre

(taille,graisse,italique,majuscules,espacesavant,espacesaprès,etc.).Làencore,pasbesoinderemettrelesstylesdel’objetbody.

Lorsquevousétablissezvosmisesenformespourvosstyles,neperdezpasde vuequ’ils donnentunedimension légèrement graphique à votrefichierdoncsoignez-les.Vérifieznotammentleurrendudanslapage,enfaisantsesuccéderdestitresdedifférentsniveauxetdesparagraphes.

sup

Commeindiquéplushaut,cettebaliseestutiliséepourmettreletexteen exposant (commedans 2e, 3e, etc.). Le problème avec cette balise estque, utilisée telle quelle en html, elle se contente de relever les lettresindiquées, sans les réduire. Du coup, vous avez au sein de votreparagraphe un espace blanc disgracieux au-dessus de votre ligne car lelogiciellaisselaplacepourlalettresurélevée.

Pour éviter cet impair, nous vous conseillons de définir votre balise

Pour éviter cet impair, nous vous conseillons de définir votre balisesupcommesuit:

sup{font-size:67%;vertical-align:33%;}

Cela réduira la taille de votre exposant (elle ne fera que 67 % de sataille)etlasurélèvera(des33%restants),sanscréerdeblancimpromptu.

Div

Comme indiqué plus haut, div est une manière d’organiser lesélémentsdevotre texteenengroupantcertainsauseind’unbloc.Vouspouvezdonctoutàfaitappliquerunemiseenformeàvosblocs.

Lesdivsontparticulièrementutilespourlesimagescar,correctementparamétrés,ilspermettentdecentrerlesimagesdanslapage.

LespropriétésCSSdemiseenpageNousallonsdansunpremiertempsaborderlespropriétésCSSquine

s’appliquentpasautexteproprementditmaisquipermettentdedéfinirvotremiseenpagedefaçonharmonieuse.

Lesmarges

Pouréviterquevotretextenecolleà l’écran,vousaurezàdéfinirdesmarges. Ces dernières n’ont pas forcément besoin d’être grandesmaiselles doivent exister pour faire respirer la lecture. Il n’y a rien de pirequ’un textequicourtd’unboutà l’autrede l’écran, sans laisserd’espacevideoùl’œilpuissesereposer.

IlexistequatrepropriétésCSSpourdéfinirlesmarges:margegauche(margin-left), marge droite (margin-right), marge supérieure (margin-

top)etmargeinférieure(margin-bottom).Vouspouveztoutàfaitnepasattribuerlesmêmesvaleursàvosmarges,enfonctiondurendusouhaité.

Signalons enfin qu’il existe une propriété regroupant les quatrepropriétésci-dessus:margin.Vousyindiquezvosvaleursdemargindansl’ordresuivant:haut,droite,bas,gauche;chaquevaleurétantséparéedesautresparunespace.

Remarque:Vouspouveztoutàfaitdéfinirunmarginpourlebodyetunmarginpourlesparagraphes.Danscecas-là,lesdeuxmisesenformesse cumuleront pour les paragraphes. Cela est notamment utile si vousvoulez faire respirer vos paragraphes : insérer de légers margin-top etmargin-bottom,quiséparerontchaqueparagraphepourmieuxlesmettreenvaleur.

ExempleVous souhaitez que l’ensemble de votre texte dispose de marges

régulières tout autour de l’écran. Vous ne voulez pas que ces margessoient trop importantes, sans pour autant nuire à la lecture. Un boncompromis est unemarge située entre 3 et 5%de la taille de l’écran etvousoptezdansunpremiertempspourunemargede3%enhautetenbas,etde5%àgaucheetàdroite.

Comme vous souhaitez que cette marge concerne l’ensemble dudocument, lemieux estde lepréciserpour le stylede la balisebody. LecodeCSSseradonclesuivant:

body{margin-left:5%;margin-right:5%;margin-top:3%;margin-bottom:3%;}

Oubien

body{margin:3%5%3%5%;}

Enoutre,enplusdecesmargesquis’appliquentà tout ledocument,vous souhaitez que chaque paragraphe dispose d’un léger espace au-dessusdelui(0.2em)eten-dessous(0.5em).VotrecodeCSSseraalors:

p{margin-top:0.2em;margin-bottom:0.5em;}

Lesinterlignes

Ilpeutaussiarriverque,pourdesraisonstypograhiquesquivoussontpropres,voussouhaitiezquevotretexteaituninterligneplusgrandqued’habitude.De la sorte, vousdisposerezd’un espaceblanc entre chaquelignequipourrafairerespirervotretexte.

Lapropriétépourdéfinirvotreinterligneestline-height.

ExempleReprenonsnotrestyledeparagraphe.Enplusdesmargesendébutet

enfindeparagraphe,vousvousditesqu’unlégerinterlignepourraitêtreunebonnechose.Iln’estpasnécessairequecelui-cisoitélevéaussivousdécidez-vouspourun interlignede 1.05em.Celasignifiequevotre texteprendra1emdehauteurmaisqu’ilyauraunblancde0.05emenpluspourchaqueligne.Lecodepourvosparagraphesseralesuivant:

p.special{padding-top:0.2em;padding-bottom:0.5em;line-height:1.05em;}

Remarque:Sivous jouezavec les interlignes,assurez-vousquevotreline-height soit supérieur ou égal à votre taille de police. Sans quoi enfonctiondevotrepolicedecaractères,voslignesdetexterisquerontdesechevaucherlesunesaveclesautres.

Lessautsdepage

Sur certains textes mal maquettés, il peut arriver qu’un titre seretrouveenbasdepagetoutseul,sanstextecourantpourlesuivre.Celadonneuneimpressionbizarrecarlelecteuralesentimentqueletitreenquestionauraitdûapparaîtresurl’écransuivantpourfaireblocavecsontexte.Pourévitercegenrededésagrément,ilfautdonclierlesdeuxblocstexte (ici le titre et sonparagraphequi le suit)pourqu’ilsne soientpasséparés.

Pour cela, vous aurez besoin des propriétés CSS page-break-before(sautdepageavant)etpage-break-after(sautdepageaprès).Lesvaleursdecesdeuxpropriétéssontlessuivantes:

avoidéviteraautantquepossibledeséparerlesblocs.Maislorsqueceneserapaspossible,lesdeuxblocsserontséparés.alwaysindiquedetoujoursinsérerunsautdepage.Onutiliseparexemplecettevaleursionveutqu’untitredébutetoujourssurunnouvelécran.autolaisselenavigateurafficherlapagecommeill’entend,sanscontraintesparticulières.Cettevaleurestpeuutilisée.inheritappliqueausautdepagelesmêmesparamètresquelafeuilledestyleparentedontelledécoule(généralementbody,pouh).Cettevaleurestpeuutilisée.

Commeonlevoit,cesontsurtoutlesvaleursavoidetalwaysquiserontutiliséespourgérerlessautsdepages.

Remarque : Les titres qui sont au début d’une nouvelle page htmlcommencentpardéfautsurunnouvelécran.Vousn’êtesdoncpasobligé

decréerunstylerienquepoureuxpourgérerlessautsdepage.

ExempleVoussouhaitezquevotretitredeniveau2soittoujourssurunnouvel

écran.Lestyleseradonclesuivant:

h2{page-break-before:always;}

L’alignementdevotretexte

Note : Les deux propriétés qui suivent (text-align et text-indent)s’appliquent à des éléments de votre textemais, comme leur utilisationrésulte principalement de la mise en page, nous avons préféré lesmentionnerdanscettepartie.

Untextepeutseprésenterdedifférentesformesauseind’unepage.Ilpeutêtrealignéàgauche (lemodepardéfautdes traitementsde texte),aligné à droite (comme pour une signature), centré ou justifié (i.e. quevotre texte remplit harmonieusement l’espace en une sorte de grosrectangle).TouscesélémentsdejustificationpeuventêtredéfinisenCSS.

Onutilise pour cela la propriété text-align, en lui précisant la valeurque l’on souhaite (left pour un alignement à gauche, right pour unalignementàdroite,centerpourunalignementaucentreetjustifypouruntextejustifié).

Remarque : Il est préférable de définir l’alignement pour lesdifférentesbalisesdevotretexte,enparticulierlestitres.Eneffet,mêmesionpeutconsidérerqu’un titre,parnaturecourt, seraalignéàgauchemêmesiletexteestjustifié,l’expérienceprouvequelerésultatpeutêtredésastreux,enparticuliersur lespetitsécrans.Donc,mêmesicelavoussembleinutile,définissezbienuntext-align:leftpourvostitres.

Exemple

Reprenons le cas de notre corps de texte. Nous souhaitons que, par

Reprenons le cas de notre corps de texte. Nous souhaitons que, pardéfaut,enplusdes5%et3%demarge,letextesoitjustifié.Lecodeseraalorslesuivant:

body{margin:3%5%3%5%;text-align:justify;}

Lesretraitsdepremièreligne

En littérature notamment, chaque paragraphe commence par unalinéa,i.e.unepremièrelignelégèrementenretraitdurestedutexte.Entypographie, on appelle cela une indentation et si vous souhaitezappliquer une telle indentation, vous devrez utiliser la propriété text-indent.

ExempleReprenons notre style de paragraphe défini plus haut. En plus des

margesendébutetenfindeparagrapheetdel’interligne,voussouhaitezunretraitdepremièreligneéquivalantàunelettre.Lecodeseraalorslesuivant:

p{padding-top:0.2em;padding-bottom:0.5em;line-height:1.05em;}text-indent:1em;}

LespropriétésCSSàappliquerautexte

Latailledetexte

Pourdéfinir la tailledevotrepolice,vousutiliserez lapropriété font-size. Pour rappel, il vaut mieux définir la taille par défaut de vosparagraphesavecunevaleurde1emetdéfinirlesvaleursdesautresstylesenfonctiondecelle-ci.

ExempleSachantquevosparagraphesaurontunetaillede1em,vousdécidezde

définir les styles de vos titres de niveau 1. Après plusieurs essais, vousestimezqu’unetaillede1.7emseraitunebonnechoseetqu’ilfaudraitqueletextesoitcentré.Lecodeseraalorslesuivant:

h1{font-size:1.7em;text-align:center;text-indent:0em;}

Remarque:Nousprécisonsuneindentationde0em(text-indent)pourlecasoùlesstylesprécédents(commebody)aientprévuuneindentationpardéfaut.

L’italique

Si vous désirez utiliser l’italique (ou indiquer au CSS que vous nevoulezPASd’italique),ilvousfaudrautiliserlapropriétéfont-style.Cettedernièreadeuxvaleurs:normal(i.e.nonitalique)etitalic.

ExempleVousdésirezquevotretitredeniveau1soitégalementenitaliquepour

mieuxressortir.Sil’onreprendlestyleci-dessus,lecodeseraitalors:

h1{

font-size:1.7em;text-align:center;text-indent:0em;font-style:italic;}

Remarque : Si vous utilisez une police par défaut (i.e. vousn’incorporezpasdepoliceàvotreePub),vousn’avezpasbesoindedéfinirun style uniquement pour l’italique. Si vous utilisez des policesspécifiques(cf.plusbassurlamanièredeprocéder),ilvousfaudracréerlestylei{font-style:italic;}.

Legras

De la même manière que pour l’italique, la propriété font-weightdétermineralagraissedevotretexte.Cedernierserasoitnormal(sivousnevoulezPASdegras)soitbold(gras).

ExemplePourdonner encoreplusd’impact à votre titre, vous souhaitezqu’en

plusde l’italique, le texte enquestion soit engras.Le styleauradonc lecodesuivant:

h1{font-size:1.7em;text-align:center;text-indent:0em;font-style:italic;font-weight:bold;}

Remarque:Àl’instardel’italique,vousn’avezpasbesoindedéfinirun

Remarque:Àl’instardel’italique,vousn’avezpasbesoindedéfinirunstylepourlegrassivousn’incorporezpasdepolicesàvotreePub.Danslecascontraire,vousdevrezdéfinirlestyleb{font-weight:bold;}.

Gérerlesmajusculesetlesminuscules

Vouspourrezvouloir,indépendammentdelasaisiedevotretexte,luiappliquerunemiseenformeparticulièreauniveaudesmajuscules.Peut-êtrevoulez-vousquevotretitresoit totalementenmajuscules,ouque lapremière lettre de chaque mot soit en majuscules. Dans ce cas-là, lapropriétéàutiliseresttext-transform.

Cettepropriétépeutprendrequatrevaleurs:

uppercase,quimettoutletexteenmajusculescapitalize,quimetunemajusculeaudébutdechaquemot(lerésultatestengénéralassezdisgracieuxmaissachezquecetteoptionexiste)lowercase,quimettoutenminusculesnone,quiindiquejustedenerienchangerautexte

ExempleFinalement,vousdécidezquevotretitredeniveau1nedoitpasêtreen

italique mais totalement en majuscules. Vous allez donc supprimerl’italiquedustyleetyajouterlesmajuscules.Lestyleseraalorslesuivant:

h1{font-size:1.7em;text-align:center;text-indent:0em;font-weight:bold;text-transform:uppercase;}

Remarque : La propriété text-transform étant assez particulière, elle

Remarque : La propriété text-transform étant assez particulière, ellen’estpascomprisepartouslesmoteursdelecture.Nevousétonnezdoncpas si elle ne fonctionne pas sur votre liseuse,même si iBooks l’affichecorrectement.Leplussimpleestencored’écriredirectementvotretitreenmajuscules.

Lespetitescapitales

Enplusdesmajusculesetdesminuscules,ilexistecequel’onappelledes petites capitales. Elles ont la forme des lettres majuscules mais lahauteurdeslettresminuscules.Ons’ensertrelativementpeumaisilfautsavoirque,typographiquementparlant,lesnomsdesièclessecomposentenpetitesmajuscules.Ilestdonctoujoursutiledeprévoirsonutilisation,enparticuliersivousutilisezlesnomsdesiècles.

Si vous souhaitez utiliser ce genre de mise en forme, vous devrezrecouriràlapropriétéfont-variant.Cettepropriétévouspermetd’utiliserla varianteSmall capsd’unepolice, si cette variante existeau seinde lapolice.SicettevarianteSmallcapsn’existepasdanslapolice,lapropriétéseralaplupartdutempsignoréesurlessupportsdelecture.

Font-variantpeutprendredeuxvaleurs:normaletsmall-caps.Remarque:Ilestassezpeuprobablequevousayezbesoindelavaleur

normal,àmoinsquevotretexteaitététapéenpetitecapitalesetquevoussouhaitiezleremettredansunemiseenformenormale.

ExempleVousavezdéfini lespropriétésdevotretitredeniveau1plushaut. Il

est temps de vous charger de celles de niveau 2. Pour ceux-ci, vous nesouhaitez pas de mise en avant particulière mais vous dites qu’unedifférenciationducorpsdetexteseraitunebonnechose.Vousoptezdoncpour lespetites capitales.Vous reprenezdonc votre styleh2défini plushautetlemodifiezcommesuit:

h2{page-break-before:always;font-variant:small-caps;}

LespropriétésCSScomplexesLespropriétésquenousallonsaborder icinesontenréalitépas trop

compliquées.Toutefois,commeleurusageestassezparticulier(puisqu’iltraitedesimagesetdesajoutsdepolices),nousavonspréféré lestraiterdansunesectionàpart.

Largeurethauteurd’uneimageSivous insérezune image, vous souhaiterezprobablementqu’ellene

dépasse pas de votre écran ou qu’elle soitmême plus petite. Pour cela,vouspourrezjouersurlahauteuretlalargeurdel’affichagedel’image.

Il existe quatre propriétés que vous pouvez utiliser : width, height,max-width et max-height. Width et height vous permettent,respectivement,dedéfinirlalargeuretlahauteurdevotreimage,tandisquemax-widthetmax-heightvouspermettentdedéfinir la largeuret lahauteur maximales de votre image. La nuance entre les deux types depropriétésestassezfineetc’estsurtoutlerendufinalquivousferachoisircellequevouspréférez.Nousavonscependantconstatéquelespropriétésmax-width et max-height étaient plus facilement interprétées par leslogicielsquewidthetheight.

Àl’instardespolices,lavaleurquevousallezdonneràvotreimageseraunevaleurchiffrée,généralementenpixels(px)ouenpourcentage(%).Àmoins de vouloir un rendu déformé, vous n’aurez besoin de définirqu’une seulepropriétépour votre image.Eneffet, si vousmodifiezuneseule caractéristique sans forcer les autres, l’ensemble de l’image sera

modifiéde façonproportionnelle. Il vous fautdoncagir sur le critère leplus encombrant (la hauteur ou la largeur) pour que, par ricochet, lesecondsoitcorrectementproportionné.

Dernierpoint:ilestplusquepréférablequel’imagequivousserviradepagedetitreprennetoutelatailledel’écran.Nousvousconseillonsdoncdeluimettreunheightde100%.

Remarque : Si votre image fait plus de 600 pixels de large, il estprimordialdespécifierunwidthde600pxoumoins(danslecadred'uneCSSàvaleurfixe).Eneffet,touteimagedépassantles600pixelsdelargen'est tout simplementpas affichéeparAdobeDigitalEditions.Or,ADEestlelecteurprincipald'ebookssurPC.

ExempleVous disposez d’une image plutôt verticale (enmode portrait, si on

suitlaterminologiedestraitementsdetexte)intituléecouverture.jpg,quise trouvedans ledossier Imagesde l’ePub.Vous souhaitez lamettreenpremièrepagedevotrefichiermais,commecetteimageesttropgrosse,vousallezdevoir l’adapter à la taillede l’écran.Deplus,pour éviterquel’imageneprennetoutl’écran(questiondegoût),vousdécidezquecettedernièreneprendraque90%del’écran.

LafeuilledestyleCSSprendralaformesuivante:

.img90{max-height:90%;}

Dansvotrepagexhtml,vousappliquerezensuitelaclasseimg90delafaçonsuivante:

<imgalt=""src="../Images/couverture.jpg"class="img90"/>

Centreruneimage

Il n’existe pas de propriété CSS pour centrer spécifiquement uneimage. Néanmoins, cela est tout à fait possible, et de deux manièresdifférentes : en utilisant les div ou en jouant avec lesmarges. Les deuxméthodes étant interprétées de la mêmemanière par les lecteurs, leurutilisation est plus une question de préférence de votre part qu’autrechose.

CentreruneimageaveclesdivNousavonsvuplushautque lesbalises<div></div>permettaientde

regrouperdesélémentsensemblepourleurappliquerunemiseenformecommune. Ici, l’astuce consiste à insérer l’image au sein d’un div etensuite à justifier ce div. On utilisera pour cela la propriété text-align:center.Lecodeseraalorslesuivant:

Danslapagexhtml:

<divclass="imagecentree"><imgsrc="../Images/monimage.jpg"alt=""/></div>

Etdanslafeuilledestyle:

div.imagecentree{text-indent:0em;text-align:center;}

Remarque:Nousprécisonsuneindentationde0em(text-indent)pourlecasoùlesstylesprécédents(commebody)aientprévuuneindentationpardéfaut.

Centreruneimageaveclesmarges

Sivousn’êtespasàl’aiseaveclesdiv,vouspouvezutiliserdesvaleurs

Sivousn’êtespasàl’aiseaveclesdiv,vouspouvezutiliserdesvaleursrelatives.Leprocessusestassezsimple.

Supposonsquenotreimageoccupe90%del’écran.Celasignifiequ’ilreste 10 % pour les marges. Si vous souhaitez centrer votre image enhauteur,ilvoussuffitdoncdepréciserquevosmargeshauteetbassefontchacune5%(puisque90%del’image+5%demargebasse+5%demargehaute=100%,soitlatailledel’écran).Lecodedevotrestyleseraalorslesuivant:

Danslapagexhtml:

<p><imgsrc="../Images/monimage.jpg"alt=""class="vertical90"/></p>

Etdanslafeuilledestyle:

.vertical90{max-height:90%;margin-top:5%margin-bottom:5%}

Remarque : À l’instar de <br/>, la balise <img /> n’a pas besoin debalisefermante.Et,toutcomme<br/>,ellenepeutsetrouverdirectementdans lecodehtml.Elledoitdoncêtreencadréeavecdesbalises tels<p></p>ou<div></div>.

Si vous souhaitez centrer votre image horizontalement, le processus

estlemême,maisendéfinissantmax-width,margin-leftetmargin-right.Terminons enfin par une petite astuce si vous êtes amené à utiliser

plusieurs images dans votre ePub. Comme ces dernières n’aurontprobablementpaslamêmetailleinitialeetquevousnevoudrezpasleur

appliquer la même augmentation ou diminution en fonction de leurutilisation,nousvousconseillonsdecréerplusieursclassesd’image.

Vous pouvez par exemple créer horizontal90 (avec max-width:90%;margin-left:5%;margin-right:5%;) et le décliner enhorizontal80 (max-width:80%;margin-left:10%;margin-right:10%;),horizontal70 (max-width:70%;margin-left:15%;margin-right:15%;) et ainsidesuite.

Delasorte,vousaureztouteunegrilledeclassesàutiliserenfonctiondevos images.Ainsi, si jamais vousdevez changer la tailled’une imagequinevousconvientpas,vousavezjusteàmodifierlaréférenceàlaclassede votre image (en remplaçant par exemple class="horizontal90" parclass="horizontal70").

Inséreretutiliserdespolicesspécifiques

Vouspourrezvouloirutiliserdespolicesparticulièrespourdonneruncertaincachetàvotretexte(commeparexempleunepolicefuturistepourvos titres, s’il s’agitd’unehistoiredescience-fiction).Vous trouverezci-dessouslamarcheàsuivrepourincorporerdetellespolices.

QuellespolicesutiliserVouspouvezutiliserdesfontsauformatOTFouTTF,ensachantque

les typos TTF peuvent parfois poser quelques problèmes. Si besoin, deslogiciels comme FontForge (http://fontforge.sourceforge.net/)permettentdeconvertirdesTTFenOTF.

N’oubliezpasnonplusque,commelespolicessontdescréations,ellessont légalement protégées et que leur auteur a défini quel usage étaitpossibleounon(parexemple,unetypopeutêtregratuitepourunusagenoncommercial).Vérifiezdoncbienquel’usagequevousallezfairedelapolicecorrespondàl’autorisationdel’auteur.

Aubesoin,n’hésitezpasàcontacterl’auteurdelapolice.Cesderniersne rechignent généralement pas à ce que vous sortiez du cadre défini

pourpeuqu’ilsensoientinformésetsoientcréditésquelquepartdanslefichier.

ImporterlesfontesEnpremierlieu,vousdevezfaireensortequevotreePubcontienneles

policesquevousutiliserez.Ilfautdonclesimporterdanslefichier.Pourcela:

1. SélectionnezledossierPolices(ouFontssivousavezuneversionanglaisedeSigil),situésousledossierImages.

2. FaitesunclicdroitetchoisissezAjouterdesfichiers.3. Sélectionnezlespolicesàinsérer.4. Validez.

Voilà,vostyposfontdésormaispartiedel’ePub.Ilrestemaintenantàpréciserleurutilisationdansvotrefeuilledestyle.

ImporterlespolicesdanslafeuilledestylePour exploiter correctement vos polices, nous allons utiliser une

propriétéparticulière:@font-face.Cettepropriétéindiqueaulecteuroùse trouvent les polices à utiliser et comment s’en servir. Comme cespolices s’appliqueront à l’ensemble du fichier, vous devez mettre cettepropriétéenpremierdanslafeuilledestyle.

Lapropriété@font-facesedéfinitcommesuit:

@font-face{font-family:"nom";src:url('../Fonts/’nomdufichier');font-weight:normal/bold;font-style:normal/italic;}

font-familypermetd’attribuerunnomàlapoliceutilisée.Notezque

cenomnecorrespondpasforcémentaunomdelatypoutilisée.Sivoustrouvezpluspratiquedel’appeler"paragraphe"ou"titre1"pouryfaireappeldanslesautresCSS,c’esttoutàfaitpossible.src:urlindiquelecheminàsuivrepourchargerlapolice.Commevouspouvezleconstater,lasyntaxeestlamêmequepourlesimages.Pourlenomdufichier,reprenezscrupuleusementceluiquiapparaîtdansledossierPolices,enrespectantlesmajusculesetlesminuscules,etenmentionnatbienl’extension(otfouttf,selonlefichier)font-weightestlamêmepropriétéCSSquenousavonsvueplushaut.Ellepermetdeprécisersilapoliceserautiliséepourlegrasounon.font-stylefonctionnedelamêmemanièremaispourl’italique.

Par ailleurs, il faut savoir que les styles de chaque police (comme legras ou l’italique) sont des fichiers distincts. Vous devez donc utiliser@font-facepourchacundesfichiersimportésetpréciserdanslafeuilledestyle quelle typo correspondra à quel usage. De plus, comme il estprobablequevoussoyezamenéàutiliservotrepoliceengras+ italique,vous devrez également définir @font-face pour la combinaison gras +italique.

Au final, vous devriez déclarer la propriété @font-face quatre fois(normal,gras,italique,gras+italique),pourchaquetypoincorporée.Lesfichiersboldetitalicserontdéclarésavantbold+italic(quidoitdoncêtreledernierimportépourunefamille).

Pourcesquatrepropriétés,vousprendrezégalementsoindedonnerlemêmenomà la valeur font-family.En effet, cela indique aunavigateurque toutes ces déclinaisons appartiennent à une même famille etpermettrad’appliquercorrectementlesvariationsdésirées(voirplusbas).

Remarque : Ces quatre déclarations ne sont obligatoires que si vousutilisez toutes les variations de police. Si par exemple, vous n’exploitez

unetypoquepourdestitresengras,vousavezjustebesoindedéclarerlapropriété@font-facepourlegras.

ExempleVous souhaitez utiliser la police Noticia-text dans votre ebook, qu’il

s’agissedelaversionnormale(regular),grasse,italiqueougrasseitalique.Comme l’indique votre dossier Fonts, les typos respectives s’intitulentNoticiaText-Regular.otf, NoticiaText-Italic.otf, NoticiaText-Bold.otf etNoticiaText-Bolditalic.otf. Vous préciserez donc les propriétés CSScommesuit:

@font-face{font-family:"Noticia";src:url('../Fonts/NoticiaText-Regular.otf');font-style:normal;font-weight:normal;}@font-face{font-family:"Noticia";src:url('../Fonts/NoticiaText-Italic.otf');font-style:italic;font-weight:normal;}@font-face{font-family:"Noticia";src:url('../Fonts/NoticiaText-Bold.otf');font-style:normal;font-weight:bold;}@font-face{

font-family:"Noticia";src:url('../Fonts/NoticiaText-BoldItalic.otf');font-style:italic;font-weight:bold;}

Remarque : Le premier@font-face définit la typographie de base. Iln’est donc pas forcément besoin de préciser que le texte n’est ni enitaliqueniengrascarc’estlaconfigurationpardéfaut.

AppliquerlespolicesdanslesstylesCSSUnefoisquevousavezincorporélestyposàvotrefeuilledestyle,ilne

vous reste plus qu’à y faire appel dans les styles concernés. Si la typointervientdans tout le fichier, déclarez-lapour la balisebody.Si elleneconcernequelestitresdeniveau1,c’estdanslabaliseh1.Siellen’apparaîtquepourcertainesclasses,déclarez-ladanslaclasseenquestionetainsidesuite.

Pourfaireappelàvotrepolice,vousutiliserezlapropriétéfont-familyvueplushaut,delamanièresuivante:

font-family:"nom",alternative,fontegénérique

nomcorrespondaunomquevousavezdéfiniplushaut,dans@font-face.Sivousl’aviezappelée"paragraphe"ou"titre1",c’estcetermequ’ilfautreprendre.Notezl’usagedesguillemetspourcenom,trèsimportant.alternativedésigneunefamilledepolicesalternatives,quipourrontêtreutiliséesdemanière…alternative,sipouruneraisonquelconque,lapolicequevousavezchoisienefonctionnepas.Cettetypodoitsetrouversurlaplupartdesmachinesetilvautmieuxopterpourunepolicealternativeassezprochedelatypoquevousavezchoisie,pouréviterdesmauvaisessurprisesliéesàvosCSS(marges,interlignes,etc.).Danslesfamillesdepolicesalternatives,ona,entreautres,Times,Helvetica,Courier,etc.C’estl’undecesnomsgénériquesquevousindiquerezàlaplacedualternativementionnéci-dessus.Notezque,ducoup,vousn’aurezpasbesoindesguillemets.fontegénériqueestpoursapartencoreplusgénériquequelapolicealternative.Ilfauteneffetsavoirquelespolicessontclasséesengrandsensembles,selonleurrendu.Onaainsilespolicesserif(i.e.quiontunelégèrelignehorizontaleaubasdelalettre(commeleTimesNewRoman),cequiguideinconsciemmentl’œiletfacilitelalecture),lessans-serif,quin’ontpascettelignehorizontale(commel’Arialettouteslestypos“bâtons”),lescursive,quiserapprochentdesécrituresmanuscrites,lesfantasy,quisontdestyposplutôtdécorativesetlesmonospace,quiontlaparticularitéd’avoirleurslettresaussilargeslesunesquelesautres(commelapoliceCourier).Làencore,vousindiquerezl’unedecescinqvaleurs(serif,sans-serif,fantasy,cursive,monospace),égalementsansguillemets.

Exemple

Vous souhaitez utiliser votre policeNoticia dans l’ensemble de votre

Vous souhaitez utiliser votre policeNoticia dans l’ensemble de votretexte.Lemieuxestdoncquevousladéclariezpourlabalisebody.Commeil s’agitd’unepolice assez classique, vousdécidezque, si jamais elle estmalinterprétée,lelogicielutiliseraunepolicedetypeTimesàlaplace.Lapolice Times étant une police serif, vous précisez également ce type detypo,pourlecasoùleTimesnemarcheraitpasnonplus.

Ilvousfautdonccompléter lestylebodydéfiniplushaut.Aufinal, lerésultatseralesuivant:

body{margin-left:5%;margin-right:5%;margin-top:3%;margin-bottom:3%;}font-family:"Noticia",Times,serif;}

Remarque:Commevousappliquez lapolicedesorteàcequ’ellesoitutiliséepartouslesélémentsdulivre,n’oubliezpasdedéfinirlesstylesi{font-style:italic;}(ouem{font-style:italic;}sivousutilisezlabalise<em></em> pour l’italique) et b {font-weight:bold;} (ou strong {font-weight:bold;} si vous utilisez la balise <strong></strong> pour le gras)pourexploitercorrectementlegrasetl’italiquedecettetypo.

RetourauSommaire

PetitrésumépourbienexploiterlesCSS

NousvenonsdevoircommentfonctionnaientlesCSSetcommentles appliquer à votre ePub. Histoire de bien fixer les choses, voici unrapiderésumédesélémentsàprendreencompte.

1. Créezvotrefeuilledestyle2. Insérezlelienverscettefeuilledestyledanstouteslesbalises

<head></head>devospagesxhtml3. Dansvotrefeuilledestyle,déclarezenprioritélespolicesquevous

allezutiliser(pourl’usagenormal,gras,italique,gras+italique).4. Définissezvosstylespropresauxbalisesclassiques(body,h1,h2,

h3,p,etc.)5. Définissezlesstylesspéciauxcommelesappelsdenoteàl’aidedes

classes(.XXX)6. Dansvospagesxhtml,attribuezlesmisesenformeliéesàvos

classesgrâceàlabaliseneutre<spanclass="XXX"></span>

Enfin,petitrappeldesrèglesàrespecterpourlasaisiedesCSSdanslafeuilledestyle:

1. Touteslespropriétésd’unstylesontenferméesauseind’accolades({et})

2. Touteslespropriétésd’unstyleseterminentparunpoint-virgule(;)

3. N’utiliseznilettresaccentuéesnicaractèresspéciaux.4. Quandvousutilisezdesunités,conservezlesmêmespourtoutle

styleafind’évitertouteerreurd'interprétation.

5. Lavirgulen’existepaspourlesunités.Ilfaututiliserlepointàlaplace.

6. VouspouvezutiliserlesespacesetlesretoursàlalignepourrendrevosCSSmoinstouffues.

RetourauSommaire

Quelquesconsidérationspourfinir

AstucestypographiquesLorsquevous aurez finidedéfinir et d’appliquer vos styles, il resteencorequelquespetitesmanipulations typographiquesàeffectuer,pourêtresûrquevotrefichiersoitbienpropre.Ceschangementss’effectuentassez rapidement grâce à la fonction Rechercher/Remplacer. Nous lesfaisons intervenir en toute fin de création d’ePub pour que toutes lesmodificationss’appliquentd’uncoup.Sivouseffectuezceschangementsau début et qu’ensuite vous modifiez votre fichier, il vous faudra ànouveau répéter l’opération en fin de course. Donc autant ne la fairequ’uneseulefois.

EspacesinsécablesIl vous est peut-être arrivé de voir des points d’exclamation ou des

points-virgules en début de ligne et de vous dire qu’ils n’avaient rien àfairelà.Entypographie,cessignessontprécédésd’unespacemais,pouréviter les renvois à la lignemalheureux, il s’agit en réalité d’un espaceinsécable (i.e.qu’onnepeutpascouper).Malheureusement, cesespacesinsécablessontrarementconservésquandvousimportezvotretextedansSigilet ilssontencoremoinsinsérablesviaunraccourciclavier.Mais, ilexisteunmoyenrelativementfaciledelesintégrersansdevoirvousreliretoutvotretexte:aveclafonctionRechercher/Remplacer.

Voici la méthode à suivre (nous indiquons entre balises le texte à

Voici la méthode à suivre (nous indiquons entre balises le texte àmettredanslaboîtededialogue).

1. Sélectionnezvotrepageetbasculezenvuehtml(vialabarred’outilsouenapppuyantsurF11)

2. LancezleRechercher/Remplacer(menuÉdition/Rechercherouctrl+h)

3. Remplacez<espace><espace>par<espace>[Celavouspermetd’éliminerlesespacessuperflus]

4. Remplacez<espace><!>par<&nbsp;><!>[&nbsp;estlesiglepourl’espaceinsécableetsignifienon-breakablespace]

5. Remplacez<espace><?>par<&nbsp;><?>6. Remplacez<espace><;>par<&nbsp;><;>7. Remplacez<espace><:>par<&nbsp;><:>8. Sibesoin,sélectionnezunenouvellepageetréitérezlesétapes2à

7.

De la sorte, vousnedevriezplus avoir de soucis avecdes sigles typomalheureuxendébutdeligne.

Guillemets

Il existe deux types de guillemets : les guillemets français, quiressemblentàdes<<etdes>>;etlesguillemetsanglaisquiressemblentàdes doubles apostrophes ouvrantes et fermantes (“ et ”). Vous pouvezutiliserceuxquevoussouhaitezmais,outrelefaitqu’ilestpréférableden’avoirqu’unseultypedeguillemetsdansvotrefichier(questionderenduprofessionnel),ilfautsavoirquelesespacesnesontpasgérésdelamêmefaçon.

LesguillemetsfrançaisSivousutilisezlesguillemetsfrançais,vousaurezàutiliserdesespaces

insécables. En effet, un guillemet français ouvrant («) est suivi d’un

espaceinsécableetunguillemetfrançaisfermantestprécédéd’unespaceinsécable.

L’expérience prouve qu’en utilisant le Rechercher/Remplacer et enfaisantunRemplacer tout, le résultatn’estpascorrect : iln’estpas rarequevousvousretrouviezavecplusdeguillemetsouvrantsquefermants,cequin’estnormalementpaslecas.

Pourpurgervotretexte,iln’yadoncpastrente-sixsolutions:effectuezunerecherchemanuelle.Voicicommentprocéder:

1. Sélectionnezvotrepageetbasculezenvuehtml(vialabarred’outilsouenapppuyantsurF11)

2. Lancezlarecherche(menuÉdition/Rechercherouctrl+h)surleguillemet

3. Lorsquevousentrouvezun,quittezlarechercheetvérifiezsileguillemetenquestionalabonnemiseenforme(s’agit-ilbiend’unguillemetfrançais?)

4. Sil’espacen’estpasunespaceinsécable,remplacez-lepar&nbsp;5. Relancezlarecherchepourunautreguillemetetréitérezlesétapes

3à5

Remarque : Lorsque vous tombez sur un guillemet français ouvrant,vous pouvez aussi, visuellement, rechercher son guillemet fermantcorrespondantpourvérifiersamiseenformeetsonespace.Eneffet,lesdialogues ne sont généralement pas très longs dans un texte donc uncoupd’œilpermetsouventdesauterunerecherche.

Évidemment,cettemanièredeprocéderestunpeuartisanalemaisdela sorte, vous serez assuréd’avoir autantdeguillemets ouvrantsquedeguillemetsfermantsetqu’ilsonttousleurespaceinsécableàproximité.

LesguillemetsanglaisLesguillemetsanglaisobéissentàuneautreproblématique.Eneffet,il

est assez fréquent, lorsque vous tapez votre texte, que ces guillemetssoient remplacés par des “faux” guillemets anglais, i.e. des guillemets

ouvrantsetfermantsidentiques("aulieude“et”),similairesàceuxquisont utilisés en code CSS. Votre tâche ici sera donc de remplacer cesguillemetspourqu’ilssoienttouscorrects.

Attention cependant ! Les guillemets que vous devez remplacer sontceuxdevotretexteetnonceuxducodehtml.Assurez-vousdonc,quandvous remplacez vos guillemets, qu’ils ne se trouvent pas au sein d’unebalisehtmlmaisbeletbiendanslecorpsdevotretexte.

Concernant les espaces, les guillemets anglais ne sont passuivis/précédésd’unespacedoncilfaudrasupprimerceuxentrop.

Pour cela, nous allonsune fois encoreutiliser leRecherchermanuel.Voicilamarcheàsuivre:

1. Copiezaupréalabledanslepresse-papierledoublet“”2. Sélectionnezvotrepageetbasculezenvuehtml(vialabarre

d’outilsouenapppuyantsurF11)3. Lancezlarecherche(menuÉdition/Rechercherouctrl+h)surle

guillemet4. Lorsquevousentrouvezun,quittezlarechercheetvérifiezsile

guillemetenquestionalabonnemiseenforme(s’agit-ilbiend’unguillemetanglais?).S’iln’estpascorrect,remplacez-leparledoublet(“”)etsupprimezdudoubletleguillemetsuperflu

5. Sibesoin,supprimezl’espaceliéauguillemet6. Relancezlarecherchepourunautreguillemetetréitérezlesétapes

4à6

Remarque : Une autre méthode consiste à remplacer correctementtous lesguillemetspuisàremplacer<“><espace>par<“>et<espace><”>par<”>.

Pointsdesuspensionetapostrophes

Il existe enfindes sigles qui ont la fâcheuse tendancedenepas êtrecorrects lorsquevous les saisissezmanuellement.C’est le casdespoints

de suspension et des apostrophes. En effet, les points de suspensionpeuventn’êtrequ’unesuccessiondetroispoints(etnonunseulsignedepointsdesuspension).Quantauxapostrophes,ellespeuventêtrevictimesde fausses apostrophes, un peu à la manière des “faux” guillemets :l’apostropheenquestionest justeuntraitverticalsuspenduenhauteur,etnonl’équivalentd’unevirgule.

La bonne nouvelle pour ces deux sigles est que, en utilisant leRemplacertoutduRechercher/Remplacer,vouspurgezd’uncouptouteslesmauvaisesoccurrences.

VousdevezdoncprendresoindeRemplacer tous les<...>par<…>et<'>par<’>.

Lestiretsd’incise

Parfoisdansvotretexte,vousaurezdestiretsd’incise.Cestirets,assezproches du trait d’union, sont un peu l’équivalent de parenthèses,permettant à l’auteur de glisser des informations supplémentaires sansbouleverserlastructuredesaphrase.

Seulement, en termes typographiques, les tirets d’incise ne sont pasdestraitsd’union.Ilssontlégèrementpluslongsets’appellentenréalitédes tirets demi-cadratins. Ces tirets demi-cadratins ont la particularitéd’êtreprécédésetsuivisd’unespace. Ilsnecollentdoncpas lesmotsdevotretexte.

À l’instardesguillemetsanglais, lemieuxestdecollerdans lepressepapier letiretdemi-cadratin(–)puisd’effectuerunerecherchemanuelleetderemplacerles<->pardes<espace><–><espace>.

Note:Ilexisteégalementunautretypedetiret,pluslong,appelétiretcadratin. Ces tirets sont généralement utilisés pour les dialogues, soitlorsquevousutilisezlesguillemetsanglaissoitlorsquevousn’utilisezquedestirets.Ilfaudraalorségalementveilleràremplacerlestiretsdansvosdialogues.

Lebalisagedespagesdel’ePubNous avons vu plus haut comment définir lesmétadonnées (auteur,

titre, traducteur, etc.) de votre fichier. Il existe cependant des donnéesinternesàl’ePubquipermettentauxlogicielsdemieuxs’yretrouver.Cesdonnées internes s’appellent notions (ou semantics en anglais) etindiquentsiunepagehtmlestvotretexteàproprementparler,lapagedecouverture,lapagedecrédits,deremerciements,etc.

La notion de couverture est primordiale pour votre ePub car c’estl’image de cette page qui apparaîtra en miniature pour représenter lefichier.Ilvousfautdoncimpérativementdéfinircettenotion.Lesautressontlaisséesàvotrediscrétion:àl’instarducodexml:lang="fr"dansvotrebalisehtml, lesmettre seraunebelle cerise sur legâteaumaisn’estpasnécessaireaubonfonctionnementdel’ePub.

Laprocédurepourdéfinircesnotionsestextrêmementsimple:

1. SélectionnezlapagexhtmldevotreePubàlaquellevoussouhaitezappliquerunenotion

2. FaitesunclicdroitetsélectionnezAjouternotions(ouAddsemantics)

3. Sélectionnezlanotioncorrespondantàvotrepage4. Aubesoin,réitérezlesétapes1à3aveclesautrespagesxhtml.

Lacouverture

Comme indiqué plus haut, la couverture constitue un élément trèsimportant pour la visibilité de votre ePub. C’est en effet cette page quiintervientenminiaturepourreprésentervotretexte.Elleestutiliséeàlafois dans les étagères virtuelles des bibliothèques (comme pour iBooksparexemple)etcommevisuelchezleslibrairesenligne.Elleconstituelepremier accès du lecteur à votre titre et, à ce titre, il est important deconnaîtrequelquesgrandsprincipespouroptimisersonutilisation.

LedesignEntantquepremieraccèsdulecteuràvotretitre, ilest importantde

soignerlamaquettedevotrecouverture.Sicettedernièreesthideuse,lelecteur potentiel sera rebuté et ne fera pas l’effort d’en savoir plus. Àl’inverse, une couverture harmonieuse témoigne d’un travailprofessionnel soigné qui met davantage le lecteur en confiance. Enlibrairie, une belle couverture compte pour plus de 50 % dans l’acted’achatdulecteur.C’estdiresonimportance.

LalisibilitéNousavonsvuquevotrecouvertureapparaissaitenminiaturedansles

librairiesenligneetsurlesétagèresdesbibliothèques.Celasignifiedoncque la première taille qu’elle aura (celle de laminiature) ne sera pas sataillenormalemaisunetailleréduite.Parconséquent, tous lesélémentsquifigurentdessusserontpluspetitsqueleurtailleréelle.

Comme cetteminiature est le premier contact du lecteur avec votreœuvre,ilestimportantquevotrecouverturesoitlisible,mêmeàunetailleréduite. Sans quoi, son design global risque de passer pour del’amateurismeaveclesconséquencesdécritesci-dessus.

Pourréglerceproblèmede lisibilité, tâchezd’appliquer troisgrandesrègles : toutd’abord,nesurchargezpasvotrecouvertured’informations(le titre et lenomde l’auteur suffisent).Ensuite, optezpourdespolicesqui, même réduites, restent lisibles. Enfin, mettez votre texte enlégèrement plus gros que ce que vous avez prévu, de sorte que, mêmeréduit,ilsoitbienlisible.

Et,bienentendu,n’hésitezpasàfaireplusieursessaisetàdemanderl’avisdevotreentourage.

D’unpointdevuetechniqueMaintenant que nous avons abordé les questions théoriques de

maquetteetdelisibilité,ilesttempsdenouspenchersurcettecouvertured’unpointdevuetechnique.Ici,l’impératifestsimple:votrecouverturecomplète doit être une image, un point c’est tout. En effet, si votre

couverture est, par exemple, un texte suivi d’une image, seule l’imageapparaîtra en miniature. Il vous faut donc réaliser votre couverturecommes’ils’agissaitd’uneimage.

Pour cela, vous pourrez encore recourir à Gimp[http://www.gimp.org].NousnenousétendronscependantpasicisurlesdifférentespossibilitésdeGimptantellespeuventvarierenfonctiondesutilisateurs.

Une fois que vous aurez défini votre couverture, il reste quelquespointsàvérifier,justementauniveautechnique.

Commençonsparunrappelsur leformatdevotreimage.Ilexistedemultiples formats d’affichage pour les imagesmais l’ePub n’en accepteque trois : gif, png et jpg. Assurez-vous donc que votre image decouvertureestbiendansceformat-là.

Vientensuitelatailledevotreimage.Celle-cis’exprimeennombredepixels. Plus précisément, une image dispose d’une hauteur et d’unelargeuretlamultiplicationdel’unparl’autre(oui,oui,commevoscoursde géométrie où, pour calculer l’aire d’un rectangle, vousmultipliiez lalargeur par la hauteur) donne la taille de votre image. Si par exemple,vousavezuneimagequifait800pixelsdehautpour600pixelsdelarge,elleauraunetaillede480000pixels.

Celapeutparaîtrebeaucoupmaisestenréalitéassezpeu:iln’estpasrare que les images aient des tailles de plusieursmillions de pixels.Onparleraalorsdemegapixels.Si,parexemple,votreimagefait1200pixelsde haut par 1000 pixels de large, elle fera 1 200 000 pixels, soit 1,2megapixels.

Vous trouverez généralement les informations relatives à la taille devotre image dans votre logiciel de retouche, dans un menu typeÉdition\Tailledel’image.

Bien,maintenantquevousconnaissezlatailledevotreimage,voyonsquels sont les impératifs à respecter. Ils sont aunombrede deux : toutd’abord, votre image ne doit pas faire plus de 2 megapixels en tout etensuite,sahauteurdoitêtresupérieureouégaleà1400pixels.Pourquoi

cesvaleurssiprécises?Simplementparcequ’ils’agitdescritèresd’Applepour apparaître dans iBooks. Or, iBooks est l’un des fournisseursprincipaux en ePub donc autant se conformer à ses directives si voussouhaiteztoucherleplusdelecteurspossible.

Remarque : La taille de l’image abordée ici n’a rien à voir avecl’affichagequevousaurezdéfinidanslesCSS.UneimagepeuttoutàfaitêtretrèslourdeetapparaîtreentoutpetitdansvotreePubou,àl’inverse,trèslégère,etêtreagrandie(maisdanscecas-là,lerésultatserasouventdésastreux). C’est un peu comme si, pour une recette, vous aviez unequantitédonnéedefarine.Quellequesoitlaquantitéd’eauoudelaitquevousrajouterez,vousaureztoujourslamêmedosedefarine.Etseullefaitd’en ajouter ou d’en retirer permettra demodifier la quantité présentedansvotrerecette.

RetoursurlesmétadonnéesNous avons vu plus haut que les deux métadonnées vraiment

importantesétaientletitreetlenomd’auteur.C’esteffectivementlecaspour assurer la validité de votre ePub. Néanmoins, si vous voulez vousassurer que votre fichier ne soit pas perdu dans les tréfonds descataloguesenligne,ilvavousfalloiraiderlelecteuràletrouver.Etpourcela,lasolutionestsimple:fournirdesmétadonnéesexhaustives.

Ce travail risque probablement de vous sembler fastidieux.Malheureusement,c’estassezsouventlecasdesélémentsd’optimisation.Aussi, afin de gagner du temps, nous allons détailler ci-dessous lesmétadonnées les plus pertinentes pour faire remonter votre fichier desabyssesdescataloguesenligne.

Oùrenseignerlesmétadonnées

Lamiseà jourdesmétadonnéess’obtientparunmenudédié.Ellese

Lamiseà jourdesmétadonnéess’obtientparunmenudédié.Ellesefait généralement via le menu Édition\Éditeur de métadonnées(raccourci F8) ou Quick settings\Metadata editor (également raccourciF8).

Dans cet éditeur, vous distinguez trois champs, normalement déjàremplis:letitre,l’auteuretlalangue.

Sivoussouhaitezcompléterlesmétadonnées,appuyezsurPlus.Vousvoyez alors apparaître une sorte de grosse boîte blanche avec troisboutonssurlecôté.

Ajouterbasique(Addbasicsenanglais)vouspermetderenseignerlesmétadonnéeslespluscourantes.

Ajouter avancées (Add advanced) vous permet d’ajouter desmétadonnées moins fréquentes, mais qui peuvent néanmoins êtrepertinentes.

Enfin, Supprimer vous permet de corriger l’ajout impromptu demétadonnéessuperflues.

Lesmétadonnéesbasiquesimportantes

Nous allonsmaintenant aborder lesmétadonnées qui constituent leminimumvitalpourexisterauseind’uncatalogueenligne.

Mais avant, une toute petite précision : si besoin, vous pouvezdémultipliercesmétadonnées.Parexemple,siplusieursillustrateursontœuvré sur votre titre, il vous faudra les créditer tous.VousdevrezalorssélectionnerlamétadonnéeIllustratorpourchaquepersonneàcréditer.

DateofpublicationRenseignezcechamppourindiquerauxmoteursderechercherladate

desortiedevotrefichier.Celapermetnotammentdevoirsivotrefichierestrécentouancien,cequiconstitueuncritèredechoixnonnégligeable,notammentpourlescontenustechniqueset/ouspécifiques.

DescriptionTrèsimportant,cechampindiqueàvoslecteursdequoiretournevotre

texte.Ils’agitdel’équivalentnumériquedela4edecouvertured’unlivrepapieret,entantquetel,vouspouvezymettreplusieursparagraphes.

D’une manière générale, il vaut mieux que cette description soitcourte,pourpermettreaulecteurdesefaireuneidéesanstoutluirévéler.La tonalité de votre texte doit être neutre bienveillante : vous devezinformer et rassurer votre lecteur potentiel sur le sérieux de votrepublication.Neluipromettezpasmontsetmerveillescariln’yariendepirequ’unlecteurdéçu.Debonnessurprisesvalenttoujoursmieuxquedegrandesdéceptions.

ISBNCet identifiant est une sorte de numéro de série de votre titre. Pour

chaqueformatetchaquelivre,ilexisteunISBNunique.Ainsi,lesœuvrescomplètes de Shakespeare en ePub ont un ISBN tandis que lesmêmesœuvrescomplètesdeShakespeareenformatkindleontunautreISBN.

Sivoussouhaitezfairepartiedescataloguesenligne,ilyadegrandes

Sivoussouhaitezfairepartiedescataloguesenligne,ilyadegrandeschancesqu’unISBNsoitnécessaire.Enrevanche,sivousvouscontentezdemettrevosePubsimplementsurvotreblogouvotresitepersonnel,cen’estpasnécessaire.

Vous pouvez obtenir une liste d’ISBN dédiés auprès de l’Afnil(www.afnil.org).

PublisherVous faitesnormalement figurer ici l’éditeurde votre ebook. Si vous

réalisezvotreebookdanslecadred’uneentrepriseoud’uneassociation,ilpeutêtreutiledelamentionnerici,pouraccroîtresavisibilité.

RightsLe droit français reconnaît que toute création est protégée dès lors

qu’elle a fait l’objet d’une conceptualisation. Vous n’avez donc pas, auregarddelaloi,àpréciserquevotretexteestprotégé.Néanmoins,commecettenotionest relativement intangible, ilpeutêtreutiledepréciser lesdroitsdansvotrefichieretvous le ferezavec lamétadonnéeRights.Parexemple,vouspouveztoutàfaitindiquer“©2012,Moi-même.Tousdroitsréservés.”

SourceSivotrefichiern’estpasunecréation100%originalemaisdérived’une

autre, vous pouvez mentionner la source ici. De la sorte, ceux quis’intéressentautextemèrepourrontletrouveret,inversement,ceuxquiontaccèsautextemèretrouverontplusfacilementvotretexte.

SubjectCette métadonnée est autant, sinon plus, importante que la

description.Ellepermet en effetde renseigner lesmots-clésprincipauxquipermettrontdetrouvervotreebook.Pourfaciliterlesrecherches,vouspouvez (c’est même fortement conseillé) définir plusieurs Subject, quiserontautantd’hameçonsquiguiderontversvotrelivre.

Deuxélémentssontcependantànoter.

D’unepart, il estdéconseilléd’avoirplusde5Subjectpourunmêmetitre.Laraisonenestsimple:onestimequ’au-delà,lesmots-cléschoisisneserontpassuffisammentpertinentspourquevotretitrecorrespondeàl’objet de la recherche. Priorisez donc vos mots-clés pour que les cinqpremierssoientlesplusàmêmedemeneràvotretitre.

D’autrepart,ayezàl’espritquecen’estpasvousquiferezlarecherchemaisvoslecteurs.Quandvouschoisissezvosmots-clés,mettez-vousdoncdans l’espritdevos lecteursetdemandez-vousquel(s)mot(s)pourraientconduireàvotrerecherche.Aubesoin,demandezàvotreentourage.Vousserezsurprisdedécouvrirdesvoiesd’accèsauxquellesvousn’auriezpaspensé.

TypeAvec Type, vous pourrez préciser le domaine auquel s’applique votre

titre(bien-être,science-fiction,documentaire,essai, littératuregénérale,etc.).

Cependant,leséditeursnumériquesontencorebiensouventtendanceàconfondreSubjectetType,cequibrouilleunpeulescartes.Lasolutionestdoncdecombiner lesdeuxetde faireensorteque legenredevotreouvrageapparaisseà la foiscommeTypeetcommeundesmots-clésdeSubject. De la sorte, vous référencez correctement votre titre etl’utilisation du genre commemot-clé vous permet de toucher peut-êtred’autrespersonnes.

Lesmétadonnéesavancéesutiles

AuteurVousavezcertesrenseignél’auteurdanslesmétadonnéesdebasemais

ilpeutarriverqu’enréalité,iln’yaitpasunmaisplusieursauteurs.Danscecas-là, lechampinitialnesuffitbiensouventpas.Vouspourrezalorsrecouriràcechamppourfairefigurerlesautresauteurs.

Bookdesigner

Si votre ebook a été réalisé par un prestataire extérieur (ce qui n’estnormalement pas le cas si vous lisez ce guide), vous renseignerez sescoordonnées ici. Il s’agit plus ici d’une courtoisie que d’un réel besoinmaisautantnepass’enpriver.

CollaboratoretContributorParfois, vous serez plusieurs à avoir travaillé sur un titremais à des

degrés divers. Tous ne pourront se prévaloir comme auteurs, leurparticipationétantplusfaiblequelesautres.Danscecas-là,vouspouvezrenseigner les intervenants dans Contributor (s’ils ont apporté unegrandepartdetravail)ouCollaborator(sileurapportaétéplusléger).

Gardezcependantàl’espritqu’iln’existepasdeloid’airaindéfinissantlesdifférences entreunauteur,un contributeur etun collaborateur.Cesera donc à vous d’opter pour la bonne dénomination, en vous étantassuré au préalable que la ou les personnes concernées souhaitentapparaîtredansvotrefichier.

CorrectorSivousavezfaitappelàuncorrecteurpourlesfautesd’orthographeet

degrammaire,vouspouvezmentionnersonnomici.

CoverdesignerCettemétadonnéeestlependantdubookdesignermaisappliquéàla

couverture.Siunepersonneouunprestataires’estchargédudesigndevotrecouverture,ilestdebontondelementionnerici.

DedicateeSi,commelespersonnescélèbres,voussouhaitezdédiervotretexteà

quelqu’unenparticulier,vouspouvezlefaireici.

IllustratorAumoinsaussiimportantquel’auteur,l’illustrateuratoutautantdroit

decréditquelui.Sivotretitreutilisedesillustrations,pensezdoncàbiencréditerlesdifférentsillustrateursaveccettemétadonnée.

MetadatacontactPeut-êtreplusanecdotique,cetélémentvouspermetderenseigner la

personneenchargedesmétadonnées.Utilesivousmettezrégulièrementàjourvosmétadonnéesousivoussouhaitezpouvoirêtrecontactésurcepointprécis.

TranslatorEnfin, si votre texte est une traduction, vous devrez mentionner le

traducteuretleferezaveclechampTranslator.

Nousavonsabordé ici lesmétadonnées lesplus courantesmais vousn'êtes pas obligé d'utiliser toutes celles mentionnées ci-dessus. De lamême manière, il en existe encore de nombreuses autres, que vouspouvezdécouvrirdansl'éditeurdemétadonnéesdeSigil.N'hésitezdoncpasàvousplongerdedanssivousestimezqu'ilmanqueunemétadonnéeàvotreebook.Chacuned'ellesesteneffetassortied'unedescription(enanglais)quivouspermettradevousfaireuneidéedesonutilisation.

Etencasdeproblème?Jusqu’àprésent,nousvousavonsexpliquécommentréaliserunePub

correctement.Sivoussuiveznosconseilsetnosinstructions,iln’yapasde raisons que la validation de votre ePub renvoie des erreurs.Néanmoins,commetoutnesepassepastoujourscommeonlesouhaite,nousallonsabordericilescasd’erreurslesplusfréquents.

ÉlémentmanquantLetexte :This resource is reachable butnotpresent in theOPF<manifest>.

"Reachable"meansthatareferenceofsomekindthatpointstothisresourceexistsintheepub.

L’explication : Votre ePub utilise un élément qui n’est plus présent

L’explication : Votre ePub utilise un élément qui n’est plus présentdans le fichier (généralementune imageouunepolice).Vousavez sansdoute supprimé l’élément de son dossier en pensant ne plus vous enservir.Saufquevousn’avezpassupprimélaréférenceàcetélémentdansvos pages xhtml. Dans la mesure où Sigil vous indique le nom de laréférence manquante, vous devriez savoir quelle(s) page(s) sontconcernées.Ouvrez-lesenvuehtml(f11)etcherchezlecodequiseréfèreàl’élémentsupprimé.Puis,effacez-le.

Élémentinutilisé

Letexte:ThisresourceispresentintheOPF<manifest>,butit’snotreachable(it’sunused).

L’explication : C’est l’inverse du cas ci-dessus. Vous avez laissé deséléments dans votre ePub alors qu’ils ne sont plus utilisés. C’est parexemplelecassivousavezimportédenombreusesimagesetnelesavezpas toutes intégrées à vos pages xhtml. Ou alors si vous avez crééplusieursfeuillesdestyles(cellesquiseterminenten .css)etne lesavezpas toutes utilisées. Là encore, comme Sigil vous indique la référencemanquante,allez jusqu’à l’élémentenquestionetsupprimez-le (oubienfaites-y appel s’il s’avère que vous l’avez intégré à votre ePub pour uneraisonbienprécise).

ProblèmedetitreLetexte:The<title>elementismissing.L’explication : Vous n’avez pas rempli le titre de votre ePub dans les

métadonnéesetcetitrevousestindiquécommemanquant.Renseignez-ledoncdanslesmétadonnées.

Remarque:L’absencedenomd’auteurnerenvoiepasdecoded’erreurde la part de Sigil. Il est cependant vital que cette métadonnée soitrenseignée. Faute de quoi les lecteurs ne pourront pas effectuer derecherchesurvotrenomdanslesdifférentsmoteursderecherche.

Autresproblèmes

D’autresproblèmespeuvent intervenirdansvotreePubmais,commecescassonttrèsspécifiquesetdépendentdevotrefichier,nousn’allonspaslesaborderici.Gardezjusteàl’espritque,sil’explicationdeSigilpeutparaître absconse, elle contient cependant tous les éléments pour vousaider à résoudre le problème : nature de l’incident, endroit où celui-ciapparaît et éventuelle piste pour le résoudre. Le logiciel se référeraégalement aux différents fichiers qui constituent l’ePub (le manifest,toc.ncx,etc.).N’hésitezdoncpasàvousreplongerdanslesexplicationsaudébutdecetebookpouryvoirplusclair.

Enfin, si vous ne parvenez toujours pas à régler votre problème,n’hésitezpasàarpenterlenet,àposervosquestionssurdesforumsvoireàdesblogueurs spécialisés.Lesgens serontgénéralement ravisde vousapporterleuraideetdevousaideràprogresser.

RetourauSommaire

LemotdelafinVoilà, vous savezdésormais ce qu’il faut faire pour créer votre ePuboptimisé. Nous avons tâché de vous présenter les principales fonctionsdontvouspourriezavoirbesoinmaisilenexisteencoredenombreuses.Nous n’avons pas voulu ici trop vous surcharger d’informations sur lesCSS:celles-ciferontl’objetd’unguideWalrusdédié.

Vousdevezcependantgarderquelquesélémentsàl’esprit.En premier lieu, un ePub classique, s’il reprend de nombreuses

particularitésdespagesweb,n’estpasunsite internet.Vousnepourrezdoncreprendretelsquelstousleseffetsouparticularitésgraphiquesquivousplaisent.Certainespropriétésserontmal interprétéesouneseronttoutsimplementpasreconnues.

En second lieu, les différents supports ne gèrent pas tous lespropriétés CSS de la même manière. Sur iPad et iPhone, l’immensemajorité des éléments sont correctement interprétés mais ce n’est pasforcémentlecasdesliseusesetdecertainesapplis.Nevousétonnezdoncpas qu’un rendu que vous pensiez génial ne soit pas correctementretranscritd’unsupportàl’autre.

Pourrésumer,lasimplicitéetl’efficacitédevrontêtrevosguidesdansvotredéfrichage.Avecl’ePub,vouspourrezfairebeaucoup,maisvousnepourrezdetoutefaçonpasenfairetrop.

RetourauSommaire

Quelquessitespourallerplusloin

Sivousdésirezapprofondirvotreconnaissancede l’ePub,desCSSetdu HTML, vous trouverez ci-dessous quelques sites par lesquelscommencer.Ilnes’agiticiqued’unepoignéeparmiunemyriademaiscesontceuxquim’ontpermisdemeforgersur lacréationdesePub.Vouspouvezdonccommencervosrecherchesparlàsivousledésirez.

html.nethttp://fr.html.net/Voilàuneadresseparfaitepourdébuter.Sestutorielssurlehtmletles

CSS constituent une excellente base et une grande partie des élémentsmentionnésdanscetutorielprovientdeleursiteetdemesexpériences.

Zonecsshttp://www.zonecss.fr/index.phpZonecssestuntrèsboncomplémentsivoussouhaitezuneexplication

clairedesdifférentespropriétésCSS.

Danslamêmecollection

Crédits

Unlivrenumériqueréalisépar

www.walrus-books.comWalrus est un studio de création et d'édition de livres numériques

d'exception. Sa vocation est de proposer des ebooks innovants etimmersifs, à l'aspect typographique soigné, où le texte s'enrichit decontenusmultimédiaetinteractifs.Encréantdenouvellesexpériencesdelecture,plusenadéquationaveclespratiquesnumériquesd'aujourd'hui,Walruslancel'éditionsurdespistesinédites.