1 Quick and Dirty HTML/CSS in epub - handleiding voor beginners Introductie Deze handleiding is voor zowel de beginnende als de gevorderde gebruikers...
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
bijvoorbeeld een tag die het begin van een nieuwe paragraaf aangeeft en is
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:
Dit is een niveau 1 titel
1 – Een niveau 2 titel
Eerste paragraaf.
Tweede paragraaf.
2 – Nog een niveau 2 titel
Eerste paragraaf.
etc...
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 , 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.
Dit is een niveau 1 titel
1 – Een niveau 2 titel
Eerste paragraaf.
Tweede paragraaf.
2 – Nog een niveau 2 titel
Eerste paragraaf.
etc...
De rode tags beteken het volgende. De staat voor italic, oftewel schuinschrift. De voor vetgedrukt en 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’.
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 tags staat. Dit gedeelte wordt dan ook de ‘body’ van een document genoemd. Boven de ‘body’ staat de ‘header’. Deze staat tussen de 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 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.
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.
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.
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.
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’.
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
letter grootte 250% en de
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;
text-indent: 0; }
.right { text-align: right; text-indent: 0; }
Open nu het “4.html” bestand en pas het body gedeelte als volgt aan.
Dit is een niveau 1 titel
1 – Een niveau 2 titel
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.
Tweede paragraaf.
2 – Nog een niveau 2 titel
Dit is een normale paragraaf met geen special opmaak met een class selector.
Een gecentreerde paragraaf.
Een links uitgelijnde paragraaf.
Een rechts uitgelijne paragraaf.
Na opslaan en openen in de browser, moet het ongeveer als onderstaand uitzien.
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.
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
5.
6. 7. 8. 9. 10.
11.
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. 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. Je kunt links opnemen in je documenten voor makkelijke navigatie. Voorbeeld hiervan zijn eindnoten. Je kunt afbeeldingen overal in het document plaatsen. Kop- en voetteksten zijn niet mogelijk. Dit staat wel in de specificaties, maar wordt eigenlijk door elke reader genegeerd. Voetnoten zijn niet mogelijk, eindnoten wel. Dit zijn in feite gewoon links. 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. 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”. <meta name="Title" content="Boek Titel" /> <meta name="Author" content="Schrijver" />
Boek Titel
Schrijver
Deel 1
Hoofdstuk 1
Eerste paragraaf van het eerste hoofdstuk van deel 1. Deze paragraaf zou niet moeten inspringen.
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.
Laatste paragraaf van dit deel. Een nieuw gedeelte volgt.
* * *
Eerste paragraaf van een nieuw gedeelte binnen hetzelfde hoofdstuk. Deze paragraaf heeft dan ook geen inspring.
Etc., etc.
Hoofdstuk 2
Eerste paragraaf van het tweede hoofdstuk van deel 1. Deze paragraaf zou niet moeten inspringen.
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.
Hoofdstuk 3
Eerste paragraaf van het derde hoofdstuk van deel 1. Deze paragraaf zou niet moeten inspringen.
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.
Hoofdstuk 4
Eerste paragraaf van het vierde hoofdstuk van deel 1. Deze paragraaf zou niet moeten inspringen.
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.
Deel 2
Hoofdstuk 1
Eerste paragraaf van het eerste hoofdstuk van deel 2. Deze paragraaf zou niet moeten inspringen.
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.
Hoofdstuk 2
Eerste paragraaf van het tweede hoofdstuk van deel 2. Deze paragraaf zou niet moeten inspringen.
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.
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; }
Als je nu het bestand “5.html” opent, zou dit er ongeveer als volgt uit moeten zien.
Open het bestand nu in Sigil (recht klikken en openen met Sigil). Dat ziet ongeveer als volgt uit:
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.
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.
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
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.
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 tags aan naar de werkelijke resolutie.
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 Margin
Uitleg 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.
marge boven de tekst marge onder de tekst marge links van de tekst marge rechts van de tekst Inspring van de tekst voor de eerste regel. kan verschillende waardes hebben zoals ‘justify’ (volledig uitvullen), ‘left’ of ‘right’ (respectievelijk link en rechts uitlijnen) of ‘center’ (centreren) Grootte van de letter. Zet deze standaard op 1em. Als deze gezet wordt op ‘italic’ wordt er schuinschrift aangezet. Als deze wordt gezet op ‘bold’, wordt de tekst dik afgebeeld. 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.
Eerste paragraaf van het eerste hoofdstuk van deel 1. Deze paragraaf zou niet moeten inspringen.
Tweede paragraaf. Deze paragraaf moet wel inspringen<sup>1 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.
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:
1 Inspringen betekent wat witruimte voordat de zin begint.
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.
