Quick and Dirty HTML/CSS in ePUB - handleiding voor...

22
Quick and Dirty HTML/CSS in ePUB - handleiding voor beginners Introductie Deze handleiding is voor zowel de beginnende als de gevorderde gebruikers. Je hoeft niets te weten van HTML, CSS of zelfs ePUB’s. Je hebt geen tijd om uitgebreide handleidingen door te nemen, maar je wilt wel boeken maken die lijken op de mooie versies die je tegenkomt. Dan is dit de handleiding voor jou. HTML in een paar stappen HTML (een afkorting voor Hypertext Markup Language) is het startpunt om een ePUB te maken. HTML is het bestandsformaar waarin webpagina’s zijn geschreven en zijn de bron van de ePUB. Dit klinkt ingewikkeld, maar is het niet. Eigenlijk gebruikt ePUB XHTML, maar het verschil met HTML is voor deze handleiding klein genoeg. In feite zijn HTML documenten gewoon tekst met zogenaamde tags om de opmaak vast te leggen. Het verschil tussen een tag en gewone tekst is eenvoudig te zien. Een tag staat tussen kromme haken, “<” en “>”. Zo is <p> bijvoorbeeld een tag die het begin van een nieuwe paragraaf aangeeft en is </p> de tag die het einde van een paragraaf aangeeft. In principe is er voor elke begintag ook een eindtag. De eindtag wordt altijd vooraf gegaan door een “/” slash. Hierop zijn uitzonderingen, maar daarover later meer. Je kunt nu beginnen met het schrijven van je eerste HTML document. We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor. Gebruik niet MS Word of Open Office, die zijn hier veel te zwaar voor. Open de editor en typ het volgende: <h1>Dit is een niveau 1 titel</h1> <h2>1 – Een niveau 2 titel</h2> <p>Eerste paragraaf.</p> <p>Tweede paragraaf.</p> <h2>2 – Nog een niveau 2 titel</h2> <p>Eerste paragraaf.</p> <p>etc...</p>

Transcript of Quick and Dirty HTML/CSS in ePUB - handleiding voor...

Page 1: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

Quick and Dirty HTML/CSS in ePUB - handleiding voor beginners

Introductie Deze handleiding is voor zowel de beginnende als de gevorderde gebruikers. Je hoeft niets te weten

van HTML, CSS of zelfs ePUB’s. Je hebt geen tijd om uitgebreide handleidingen door te nemen, maar

je wilt wel boeken maken die lijken op de mooie versies die je tegenkomt.

Dan is dit de handleiding voor jou.

HTML in een paar stappen HTML (een afkorting voor Hypertext Markup Language) is het startpunt om een ePUB te maken.

HTML is het bestandsformaar waarin webpagina’s zijn geschreven en zijn de bron van de ePUB. Dit

klinkt ingewikkeld, maar is het niet. Eigenlijk gebruikt ePUB XHTML, maar het verschil met HTML is

voor deze handleiding klein genoeg.

In feite zijn HTML documenten gewoon tekst met zogenaamde tags om de opmaak vast te leggen.

Het verschil tussen een tag en gewone tekst is eenvoudig te zien. Een tag staat tussen kromme

haken, “<” en “>”. Zo is <p> bijvoorbeeld een tag die het begin van een nieuwe paragraaf aangeeft en

is </p> de tag die het einde van een paragraaf aangeeft. In principe is er voor elke begintag ook een

eindtag. De eindtag wordt altijd vooraf gegaan door een “/” slash. Hierop zijn uitzonderingen, maar

daarover later meer.

Je kunt nu beginnen met het schrijven van je eerste HTML document. We zullen Notepad of een

andere simpele tekstverwerker gebruiken hiervoor. Gebruik niet MS Word of Open Office, die zijn

hier veel te zwaar voor. Open de editor en typ het volgende:

<h1>Dit is een niveau 1 titel</h1>

<h2>1 – Een niveau 2 titel</h2>

<p>Eerste paragraaf.</p>

<p>Tweede paragraaf.</p>

<h2>2 – Nog een niveau 2 titel</h2>

<p>Eerste paragraaf.</p>

<p>etc...</p>

Page 2: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

In rood zijn alle tags, de rest is standaard tekst. Er is te zien, dat de tekst als het ware opgesloten zit

tussen begin- en eindtags. De tags <h1></h1>, <h2></h2> geven niveau 1 of 2 titels of kopteksten en

subtitels. Er zijn maximaal zes niveau’s voor de titels, dus h1 t/m h6.

Sla het document op als ‘1.html’. Zorg ervoor dat de naam werkelijk 1.html is en niet ‘1.html.txt’. In

Notepad kan dit door de optie ‘save as’ te kiezen. Vul bij de naam in “1.html” (met

aanhalingstekens!) en bij type ‘All files’. Als je de optie ‘Encoding’ zie, kies dan voor UTF-8.

Als je het bestand ‘1.html’ nu opent in Internet Explorer of een andere browser, moet het er

ongeveer zo uitzien:

De opmaak van de tekst en de titels is de standaard van de browser. Deze kun je zelf aanpassen. Dat

komt later uitgebreid terug.

Laten we nu wat eenvoudige opmaak toevoegen. Pas je bestand aan naar de volgende tekst.

<h1>Dit is een niveau 1 titel</h1>

<h2>1 – Een niveau 2 titel</h2>

<p><i>Eerste</i> paragraaf.</p>

Page 3: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

<p><b>Tweede</b> paragraaf.</p>

<h2>2 – Nog een niveau 2 titel</h2>

<p><u>Eerste</u> paragraaf.</p>

<p>etc...</p>

De rode tags beteken het volgende. De <i></i> staat voor italic, oftewel schuinschrift. De <b></b>

voor vetgedrukt en <u></u> voor onderstrepen. Sla dit op als ‘2.html’ en open dit bestand. Het zou

er ongeveer als volgt uit moeten zien:

Nu moet eigenlijk een HTML document anders beginnen. De afspraak is, dat er wordt begonnen met

informatie over het bestand zelf. Ook deze informatie wordt gegeven door middel van tags. Pas

‘1.html’ aan zoals onderstaat staat aangegeven en sla dit op als ‘3.html’.

<html>

<head>

<meta name="Title" content="HTML micro tutorial" />

<meta name="Author" content="Toxaris" />

</head>

<body>

<h1>Dit is een niveau 1 titel</h1>

<h2>1 – Een niveau 2 titel</h2>

<p>Eerste paragraaf.</p>

Page 4: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

<p>Tweede paragraaf.</p>

<h2>2 – Nog een niveau 2 titel</h2>

<p>Eerste paragraaf.</p>

<p>etc...</p>

</body>

</html>

Als je deze nu opent in je browser, zal deze er als volgt uitzien:

Geen verschil met ‘1.html’. Dat komt doordat het informatie velden zijn. Toch zijn de toevoegingen

eigenlijk verplicht voor HTML. De meeste browsers ‘verzinnen’ zelf erbij wat ze niet vinden. Soms

goed, soms niet. Het is beter om het goed te doen, voor de programma’s die dit nodig hebben. Dit

geldt voor alle e-boek readers.

Als we verder kijken naar de rode tags die toegevoegd zijn, zie je dat de hoofdtekst nu tussen

<body></body> tags staat. Dit gedeelte wordt dan ook de ‘body’ van een document genoemd. Boven

de ‘body’ staat de ‘header’. Deze staat tussen de <head></head> tags. Binnen de header bevindt zich

onder andere de metadata. In de metadata wordt informatie over het document opgeslagen. Hierin

kunnen ook verwijzingen staan naar zogenaamde stylesheets, maar dat volgt later. Het document

staat zelf tussen <html></html> tags om aan te geven dat het een HTML document is.

Dit is slechts een hele summiere opsomming over het HTML formaat, maar voor nu is het genoeg.

Voor meer informatie in het Engels, kun je naar de W3Schools.com prima tutorial:

http://www.w3schools.com/html/default.asp.

Page 5: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

CSS Basisbeginselen CSS

CSS is een afkorting van Cascading Style Sheets, wat vertaald kan worden als een ‘geschakelde stijl

formulieren’. Dat klinkt nog complexer als HTML, maar dat valt mee. CSS is een methode om de

browser te vertellen hoe elk element, zoals een paragraaf of titel, eruit moet zien.

Er zijn twee mogelijkheden, interne en externe stylesheets. De interne zijn opgenomen in het HTML

bestand, de externe is een apart bestand waarnaar verwezen wordt in de HTML-bestanden. De

interne worden minder gebruikt, omdat deze niet geschikt zijn voor hergebruik in meerdere

bestanden. We zullen hoofdzakelijk externe stylesheets gebruiken.

Open je text-bewerker zoals Notepad en neem onderstaand over.

p {

text-indent: 1.2em;

text-align: justify;

font-size: 1em;

margin-top:0;

margin-bottom:0;

}

h1 {

font-size: 2.5em;

text-decoration: underline;

text-align: center;

font-weight: bold;

text-indent:0;

}

h2 {

font-size: 2em;

font-style: italic;

font-weight: normal;

text-align: left;

Page 6: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

text-indent:0;

}

Sla dit op als “style.css”. Let er wederom op, dat het niet “style.css.txt” wordt.

Maak een kopie van het ‘3.html’ bestand en hernoem dit naar ‘4.html’ en open dit in Notepad. Voeg

de rode regel toe.

<head>

<meta name="Title" content="HTML micro tutorial" />

<meta name="Author" content="Toxaris" />

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

</head>

<body>

<h1>Dit is een niveau 1 titel</h1>

<h2>1 – Een niveau 2 titel</h2>

<p>Eerste paragraaf. Nu moet hier wat meer tekst staan om te zien wat het

effect is van de style sheet op de opmaak van de paragraaf.</p>

De eerste toevoeging is de verwijzing naar de stylesheet. Zorg er wel voor, dat zowel “style.css” en

“4.html” in dezelfde map staan. Open het bestand ‘4.html’.

Page 7: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

Je kunt nu het volgende zien:

De niveau 1 titel is vetgedrukt, gecentreerd en onderstreept.

De niveau 2 titels zijn in schuinschrift

De paragrafen zijn uitgevuld (justify) en springen in. Ook is er geen witregel tussen de

paragrafen.

Ga nu terug naar het ‘style.css’ document en probeer te herleiden welke attributen behoren bij

welke opmaak. Over het algemeen is dit eenvoudig te zien, hoewel de basistaal engels is. Een

uitzondering is de eenheid ‘em’. Om dit te begrijpen, moet je 1em zien als 100%. Zo is de <h1> letter

grootte 250% en de <h2> is 200%. Dit is relatief en in verhouding met de lettergrootte van de

paragrafen van 100%. Het is beter om ‘em’ te gebruiken in plaats van andere mogelijkheden. Reden

is, dat ‘em’ evenredig vergroot en verkleint wordt met de vergrotingsmogelijkheden van de e-boek

readers.

Deze aanpassingen kunnen ook rechtstreeks in de HTML bestanden worden gedaan voor elk

element. Er zijn verschillende redenen om het op deze manier te doen:

1. Een aanpassing in de opmaak van een element in CSS wordt toegepast op alle elementen van

hetzelfde type in het document.

2. De bijbehorende HTML bestanden zien er schoner uit en zijn makkelijker te lezen

3. De stylesheets zijn herbruikbaar

4. Door het vervangen/veranderen van de stylesheet, is het mogelijk om snel het uiterlijk van

het boek aan te passen

De “class” selector De volgende stap is het gebruik van de “class” selector. In het eerste voorbeeld werd de opmaak van

het basiselement aangepast. Het is echter niet onvoorstelbaar dat er meerdere verschillende

opmaken nodig zijn voor bepaalde elementen. Dit kun je ondervangen met de “class” selector.

Open het “style.css” document en voeg onderstaan toe.

.center {

text-align: center;

text-indent: 0;

}

.left {

text-align: left;

Page 8: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

text-indent: 0;

}

.right {

text-align: right;

text-indent: 0;

}

Open nu het “4.html” bestand en pas het body gedeelte als volgt aan.

<h1>Dit is een niveau 1 titel</h1>

<h2>1 – Een niveau 2 titel</h2>

<p>Eerste paragraaf.. Nu moet hier wat meer tekst staan om te zien wat het effect is van de style

sheet op de opmaak van de paragraaf.</p>

<p>Tweede paragraaf.</p>

<h2>2 – Nog een niveau 2 titel</h2>

<p>Dit is een normale paragraaf met geen special opmaak met een class selector.</p>

<p class="center">Een gecentreerde paragraaf.</p>

<p class="left">Een links uitgelijnde paragraaf.</p>

<p class="right">Een rechts uitgelijne paragraaf.</p>

Na opslaan en openen in de browser, moet het ongeveer als onderstaand uitzien.

Page 9: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

Je kunt zien dat de eerste paragraaf van de 2e niveau 2 titel normaal is, dat wil zeggen uitgelijnd en

met inspring. De andere paragrafen zien eruit zoals beschreven voor die selector. De waarden van de

“class” selector overschrijven de attributen van de standaard waarden. Standaardwaarden die niet

overschreven worden, blijven actief.

De attributen van elke tag kunnen worden aangepast. Zo kunnen ook headers worden aangepast

met dezelfde selectors.

Als je meer wilt weten over CSS, kun je veel meer vinden op

http://www.w3schools.com/css/css_intro.asp

Pas wel op. Een foutje in je stylesheet kan ertoe leiden dat de gehele stylesheet genegeerd wordt. Je

kunt je stylesheet valideren via de site http://jigsaw.w3.org/css-validator/.

En nu? Een volledige presentatie van HTML en CSS vallen buiten de doelstellingen van dit document. Deze

basis is echter genoeg voor het begin. Het bekijken van goed opgemaakte boeken kunnen je helpen

om het beter te begrijpen. In de appendices staan meer voorbeelden.

Page 10: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

Het ePUB formaat

De basisbeginselen van het ePUB formaat Het ePUB formaat is beschreven door de IPDF, de beheerders van het formaat. De volledige

specifatie staat op hun site, http://idpf.org/epub.

Wat je weten moet van een ePUB document.

1. Een ePUB document is een gecomprimeerd (zip) bestand. De meeste compressie

programma’s (zoals Winzip of Winrar) kunnen dit zonder problemen openen. Je kunt het ook

hernoemen van ‘.epub’ naar ‘.zip’ om dit mogelijk te maken. Let op, het is wel op een

speciale manier gemaakt. Pas dus niet zomaar iets aan ,want dat kan ertoe leiden dat het

niet langer leesbaar is.

De structuur die je ziet kan verschillen per boek. De onderstaande structuur is de aanbevolen

structuur, maar is niet verplicht. De mappen zijn in blauw en de bestanden zijn groen.

eboek.epub

META-INF

container.xml

OEBPS

Fonts

Images

Styles

Text

content.opf

toc.ncx

mimetype

Aangezien we niet de ePUB’s handmatig gaan samenstellen, zijn we op zich niet zo

geïnteresseerd in de betekenis van elk bestand en map. Sigil, een programma wat we later

gaan gebruiken, maakt deze bestanden en structuur voor ons aan. Sommige liggen erg voor

de hand.

De Fonts map bevat eventuele lettertypes voor gebruik in het boek. Gebruik

spaarzaam!

De Images map bevat alle tekeningen en plaatjes in het boek

De Styles map bevat alle CSS stylesheets

De Text map bevat alle (x)html bestanden van het boek.

2. De inhoud van het boek is opgeslagen in een of meerdere “.html” of “.xhtml” bestanden in

de “Text” map. Het type xhtml is bijna hetzelfde als html voor onze doeleinden. Het is aan te

bevelen om het boek te splitsen in meerdere bestanden. Bijvoorbeeld een voor de kaft en

per hoofdstuk. Dit is niet verplicht, maar sommige e-boek readers hebben beperkingen op de

grootte van de bestanden en kunnen ze anders niet openen.

3. Je kunt een of meerdere CSS stylesheets gebruiken

4. Je kunt een een inhoudsopgave maken. Deze kan worden aangeroepen door de software van

de e-boek reader of lees applicatie. Het is niet nodig om een aparte inhoudsopgave in het

Page 11: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

boek zelf te maken. Dit wordt wel een ‘inline TOC’ genoemd. Sommige mensen doen dit wel,

maar nodig is het niet. Sommige mensen vinden het zelfs storend om dit erin te hebben.

5. Je kunt metadata in je ePUB opslaan. Voorbeelden van meta data zijn titel, auteur,

producent, omschrijving, uitgever, onderwerp, ISBN, etc. Overigens zijn titel en auteur

verplicht.

6. Je kunt links opnemen in je documenten voor makkelijke navigatie. Voorbeeld hiervan zijn

eindnoten.

7. Je kunt afbeeldingen overal in het document plaatsen.

8. Kop- en voetteksten zijn niet mogelijk. Dit staat wel in de specificaties, maar wordt eigenlijk

door elke reader genegeerd.

9. Voetnoten zijn niet mogelijk, eindnoten wel. Dit zijn in feite gewoon links.

10. Elke e-boek reader of applicatie gebruikt zijn eigen lettertypes. Hierdoor kunnen boeken er

soms iets anders uitzien. Je kunt fonts toevoegen aan je ePUB. Niet alle e-boek readers of

applicaties ondersteunen dit.

11. Kijk uit met het direct bewerken van de bestanden ‘content.opf’ en ‘toc.ncx’. Een fout hierin

zal er meestal toe leiden dat het boek niet meer leesbaar of zelfs te openen is.

Sigil Sigil is een programma wat gebruikt kan worden om ePUB boeken te maken. Het bevindt zich nog in

de ontwikkelfase, maar is zeer bruikbaar. Het is beschikbaar voor veel systemen (Windows, Apple en

Linux), open source en gratis te gebruiken.

Op dit moment importeert Sigil HTML, TXT en ePUB bestanden. De uitvoer is altijd ePUB. Je kunt aan

een bestaande ePUB altijd bestaande (x)html bestanden, stylesheets en andere bestanden

toevoegen. De laatste stabiele versie is momenteel 0.5.3. Hoewel het over het algemeen prima

werkt, is het aan te raden regelmatig je werk op te slaan, zeker voor grote zoek en vervang acties.

Het kan zijn dat het programma crasht.

Ons HTML werkbestand We zullen nu een groter HTML bestand gebruiken voor Sigil. Sla dit bestand op als “5.html”.

<html>

<head>

<meta name="Title" content="Boek Titel" />

<meta name="Author" content="Schrijver" />

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

</head>

<body>

<h1>Boek Titel</h1>

<h1>Schrijver</h1>

<h2>Deel 1</h2>

Page 12: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

<h3>Hoofdstuk 1</h3>

<p class="first">Eerste paragraaf van het eerste hoofdstuk van deel 1. Deze

paragraaf zou niet moeten inspringen.</p>

<p>Tweede paragraaf. Deze paragraaf moet wel inspringen om onderscheid te

maken met de vorige paragraaf. Als een alternatief zouden we een regel

tussen de paragrafen kunnen maken, maar dat zou veel ruimte verspillen op

het scherm en veel mensen vinden dit niet mooi.</p>

<p>Laatste paragraaf van dit deel. Een nieuw gedeelte volgt.</p>

<p class="scenechange">* * *</p>

<p class="first">Eerste paragraaf van een nieuw gedeelte binnen hetzelfde

hoofdstuk. Deze paragraaf heeft dan ook geen inspring. </p>

<p>Etc., etc.</p>

<h3>Hoofdstuk 2</h3>

<p class="first">Eerste paragraaf van het tweede hoofdstuk van deel 1. Deze

paragraaf zou niet moeten inspringen.</p>

<p> Tweede paragraaf. Deze paragraaf moet wel inspringen om onderscheid te

maken met de vorige paragraaf. Als een alternatief zouden we een regel

tussen de paragrafen kunnen maken, maar dat zou veel ruimte verspillen op

het scherm en veel mensen vinden dit niet mooi.</p>

<h3>Hoofdstuk 3</h3>

<p class="first">Eerste paragraaf van het derde hoofdstuk van deel 1. Deze

paragraaf zou niet moeten inspringen.</p>

<p> Tweede paragraaf. Deze paragraaf moet wel inspringen om onderscheid te

maken met de vorige paragraaf. Als een alternatief zouden we een regel

tussen de paragrafen kunnen maken, maar dat zou veel ruimte verspillen op

het scherm en veel mensen vinden dit niet mooi.</p>

<h3>Hoofdstuk 4</h3>

<p class="first">Eerste paragraaf van het vierde hoofdstuk van deel 1. Deze

paragraaf zou niet moeten inspringen.</p>

<p> Tweede paragraaf. Deze paragraaf moet wel inspringen om onderscheid te

maken met de vorige paragraaf. Als een alternatief zouden we een regel

tussen de paragrafen kunnen maken, maar dat zou veel ruimte verspillen op

het scherm en veel mensen vinden dit niet mooi.</p>

<h2>Deel 2</h2>

<h3>Hoofdstuk 1</h3>

<p class="first">Eerste paragraaf van het eerste hoofdstuk van deel 2. Deze

paragraaf zou niet moeten inspringen.</p>

<p> Tweede paragraaf. Deze paragraaf moet wel inspringen om onderscheid te

maken met de vorige paragraaf. Als een alternatief zouden we een regel

Page 13: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

tussen de paragrafen kunnen maken, maar dat zou veel ruimte verspillen op

het scherm en veel mensen vinden dit niet mooi.</p>

<h3>Hoofdstuk 2</h3>

<p class="first">Eerste paragraaf van het tweede hoofdstuk van deel 2. Deze

paragraaf zou niet moeten inspringen.</p>

<p> Tweede paragraaf. Deze paragraaf moet wel inspringen om onderscheid te

maken met de vorige paragraaf. Als een alternatief zouden we een regel

tussen de paragrafen kunnen maken, maar dat zou veel ruimte verspillen op

het scherm en veel mensen vinden dit niet mooi.</p>

</body>

</html>

Ons CSS bestand Sla onderstande code op als “style.css”.

p {

text-indent: 2em;

text-align: justify;

font-size: 1em;

margin-top:0;

margin-bottom:0;

}

h1 {

font-size: 2.5em;

text-align: center;

font-weight: bold;

text-indent:0;

}

h2 {

font-size: 2em;

text-align: center;

font-style: italic;

font-weight: normal;

}

Page 14: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

h3 {

font-size: 1.3em;

font-weight: bold;

text-align: center;

}

h4 {

text-align: center;

}

.first {

text-indent: 0;

}

.scenechange {

text-indent: 0;

text-align: center;

margin-top:1em;

margin-bottom: 1em;

}

Als je nu het bestand “5.html” opent, zou dit er ongeveer als volgt uit moeten zien.

Page 15: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

Open het bestand nu in Sigil (recht klikken en openen met Sigil). Dat ziet ongeveer als volgt uit:

Page 16: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

Dit is wat “Book view” genoemd. Dit is vergelijkbaar met wat te zien is in een internet browser. Deze

presentatie is geschikt voor kleine correcties zoals typfouten en dergelijke. Voor ander werk zoals

nieuwe paragrafen, hoofdstukken en titels, lege regels en opmaak kun je deze presentatie beter niet

gebruiken.

Druk op het ‘<>’ icoontje, ga in het menu naar ‘View Code View’ of druk op F11. Dan zie je

ongeveer onderstaand scherm.

Page 17: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

Dit is de veel krachtigere “code view” presentatie. Dit is onze orginele HTML code, een beetje

aangepast door Sigil. Sigil heeft ervoor gezorgt, dat het nu XHTML is geworden, wat nodig is voor een

ePUB. In deze presentatie maak je de meeste bewerkingen. De kleur coderingen maken het lezen van

de code een stuk makkelijker.

De map ‘Styles’ aan de linkerkant kun je uitklappen en daar zie je onze stylesheet terug. Als je er

dubbel op klikt, wordt deze geopend in een nieuw tabblad.

Page 18: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

Zoals je ziet, zijn hierin geen veranderingen aangebracht. Als je op ‘Tools Meta Editor’ op het

menu klikt (of F8), krijg je de meta data bewerkingstool.

Dit is een verplicht onderdeel van een ePUB. Zonder dit gedeelte is de ePUB niet correct. Doordat we

in ons HTML bestand dit reeds hadden opgenomen, wordt dit automatisch ingevuld. Indien dit niet in

de bron staat, moet dit handmatig worden ingevuld. De taal staat standaard op Engels. Deze kan

Page 19: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

zonder problemen op ‘Dutch’ worden gezet. Door middel van de knoppen ‘Add Basic’ en ‘Add Adv’

kan andere metadata worden toegevoegt zoals bijvoorbeeld omschrijving en ISBN. De metadata

wordt opgeslagen in het “content.opf” bestand.

Via ‘tools TOC Editor’ in het menu wordt de inhoudsopgave bewerker gestart. Hierin kan worden

aangegeven of hoofdstukken wel of niet worden opgenomen in de inhoudsopgave. In Sigil 0.4 is deze

optie niet meer beschikbaar, maar staat deze aan de rechterkant van het scherm.

Sigil gebruikt de kopteksten (h1 t/m h6) om de inhoudsopgave op te stellen. Deze inhoudsopgave

wordt opgeslagen in het “navmap” gedeelte van de “toc.ncx”.

Sla nu de epub op via ‘File Save As’ in het menu.

Een kaft toevoegen Je kunt een kaft toevoegen. De formaten “jpg”, “gif” en “png” zijn toegestaan. De meeste readers

hebben een scherm van ongeveer 590x750 pixels. Het kan op 2 manieren worden gedaan.

Je kunt de cursor in het begin zetten in de “Book View” presentatie. Selecteer nu “insert Image” in

het menu en selecteer het plaatje. Het plaatje wordt nu toegevoegd aan het boek. Het plaatje zelf

wordt geplaatst in de map “Images” aan de linkerkant.

Echter, het zou mooier zijn als plaatjes meeschalen met de schermgrootte. Dit kan door middel van

een zogenaamd plaatje. Het gaat wat ver om hier diep op in te gaan. Klik rechts op de map “Text”

aan de linkerkant en kies “Add new item”. Noem deze “cover.xhtml” en zorg dat deze bovenaan de

lijst staat. Dubbelklik hierop en ga naar de “codeview” presentatie. Neem onderstaande code over.

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title></title>

</head>

<body>

<div>

<svg xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink" height="100%"

preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 573 800"

width="100%">

<image height="800" width="573" xlink:href="../Images/cover.jpg"></image>

</svg>

</div>

</body>

</html>

Klik nu rechts op de map “Images” aan de linkerkant en kies “Add existing item” en kies je plaatje.

Hernoem deze tot ‘cover.jpg’. Pas de waarden in de ‘viewBox’ en tussen de <image></image> tags

aan naar de werkelijke resolutie.

Page 20: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

Splitsen van tekst Zoals eerder gezegt hebben nogal wat readers een beperking met betrekking tot de grootte van de

(x)HTML bestanden. Hierdoor is het beter, ook voor de snelheid, om het HTML bestand te splitsen.

Wat vaak wordt gebruikt is:

1. Kaft

2. Boek titel/Auteur

3. Een bestand voor elk hoofdstuk

Om dit te doen moet je naar de “Codeview” presentatie gaan. Ga naar de plek waar je wilt splitsen

en druk op het icoon of drukt op Ctrl+Enter. Als je klaar bent, zie je iets als onderstaand:

Een afgesplitst bestand wordt automisch “SectionXXXX.xhtml” genoemd. Dit kun je hernoemen als je

wilt. Als je op deze manier splitst, worden de verwijzingen naar bijvoorbeeld de CSS stylesheet

meegenomen.

Basis opmaak Je kunt de opmaak doen zoals je wilt. Er zijn echter een aantal stijlvormen die vaak terugkomen.

Paragrafen moeten een duidelijk eind en begin hebben. Hiervoor wordt vaak

inspringen gebruikt.

Volledig uitvullen is prettiger dan links uitvullen

Geen lege regels tussen paragrafen als er geen sceneovergang is

Hieronder volgt een tabel met veel gebruikte attributen in CSS met bijbehorende uitleg. Sommige

attributen hebben toevoegingen. Deze kunnen soms worden weggelaten.

Attribuut Uitleg

Margin lege ruimte, marge. De toevoeging kan weggelaten worden. Dan geldt de waarde voor alle marges. Als je deze op 0 zet, heb je geen ruimte tussen de paragrafen.

Page 21: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

margin-top marge boven de tekst

margin-bottom marge onder de tekst

margin-left marge links van de tekst

margin-right marge rechts van de tekst

text-indent Inspring van de tekst voor de eerste regel.

text-align kan verschillende waardes hebben zoals ‘justify’ (volledig uitvullen), ‘left’ of ‘right’ (respectievelijk link en rechts uitlijnen) of ‘center’ (centreren)

font-size Grootte van de letter. Zet deze standaard op 1em.

font-style Als deze gezet wordt op ‘italic’ wordt er schuinschrift aangezet.

font-weight Als deze wordt gezet op ‘bold’, wordt de tekst dik afgebeeld.

line-height Waarde is meestal ‘normal’. Hiermee kun je de afstand tussen de regels vergroten.

Voet- en eindnoten Voetnoten worden niet echt ondersteund. Eindnoten wel. Bij een eindnoot wordt er een link

gemaakt tussen een locatie en de noot zelf. Helaas heeft Sigil nog geen editor hiervoor en moet dit

met de hand. Dat gebeurt in de ‘Code View’ presentatie.

Een eindnoot is een verwijzing naar een verduidelijking. In tegenstelling tot voetnoten (die helaas

niet mogelijk zijn in ePUB’s), staan deze ergens anders. Je kunt ervoor kiezen om deze aan het eind

van een hoofdstuk te plaatsen of aan het eind van een boek. Voor dit voorbeeld, nemen we aan dat

we een apart bestand hebben, genaamd ‘eindnoten.xhtml’.

In principe is een eindnoote een link naar een ander document, een gewone hyperlink. Het is aan te

raden om ook een verwijzing/hyperlink terug te maken. Niet elke reader heeft een terug-knop.

Een link maakt gebruik van zogenaamde ‘anchors’. Deze moeten uniek zijn en mogen niet met een

nummer beginnen.

Laten we onderstaande code eens bekijken. In rood is de werkelijke verwijzing naar de eindnoot

opgenomen.

<p class="first">Eerste paragraaf van het eerste hoofdstuk van deel 1. Deze

paragraaf zou niet moeten inspringen.</p>

<p>Tweede paragraaf. Deze paragraaf moet wel inspringen<sup><a id="endref1"

href="../Text/eindnoten.xhtml#end1">1</a></sup> om onderscheid te maken met

de vorige paragraaf. Als een alternatief zouden we een regel tussen de

paragrafen kunnen maken, maar dat zou veel ruimte verspillen op het scherm

en veel mensen vinden dit niet mooi.</p>

Hierbij is wordt de verwijzing in te tekst iets kleiner en boven de tekst geplaats. De verwijzing zelf

krijgt als ‘anchor’ de naam ‘endref’ mee. De verwijzing verwijst naar het ‘eindnoten.xhtml’ bestand

en specifieker naar de ‘anchor’ met de naam ‘end1’.

In het ‘eindnoten.xhtml’ bestand zou dit er als volgt uitzien:

<p><a id="end1" href="../Text/eindnoten.xhtml#endref1">1</a> Inspringen

betekent wat witruimte voordat de zin begint.</p>

Page 22: Quick and Dirty HTML/CSS in ePUB - handleiding voor …toxaris.nl/wp-content/uploads/2013/05/Quick-and-Dirty...We zullen Notepad of een andere simpele tekstverwerker gebruiken hiervoor.

Hier zie je dat de eindnoot zelf als ‘anchor’ de naam ‘end1’ heeft en de link verwijst naar de ‘anchor’

met de naam ‘endref1’. Zo is een kruislink gemaakt.

Let op. In HTML gebruik je ‘name=’ in plaats van ‘id=’. In XHTML moet dit ‘id=’ zijn.