Uncategorized

epub secrets #2 Das Wichtigste von HTML

17. März 2014

Wie sehen die xhtml Dateien nun aus, die unser Buch enthalten. Sie liegen im Verzeichnis Text und heißen hier Cover.xhtml, Lovestory_00.xhtml, Lovestory_01.xhtml usw.

Blog_1_6

Letztendlich spielt es für das eBook keine Rolle, wie sie benannt sind. Ich habe mir angewöhnt die xhtml Darteien durchzunummerieren, und zwar so, dass sie mit der Kapitelnummerierung übereinstimmen. D.h das erste Kapitel heißt  xxx_01.xhtml, das zweite xxx_02.xhtml und so weiter. Falls ihr euren Kapiteln keine Zahlen, sondern Überschriften gebt, ist es aus meiner Erfahrung dennoch sinnvoll, die xhtml Dateien zu nummerieren, damit man sich schnell zurechtfindet. Denn wenn man noch einmal Änderungen im Text vornehmen will, ist es sehr hilfreich, wenn die Kapitel anhand der Beschriftung leicht aufzufinden sind. Außerdem kann man diese Nummerierung für jedes Buch wiederverwenden. Die Datei xxx_00.xhtml beinhaltet die sogenannte Titelei, die dem Buch vorangestellt ist. Also Titel, Autorenname, Impressum etc. Ich habe sie xxx_00 genannt, weil sie dann in der Liste der Dateien, auch immer vor dem ersten Kapitel steht. Natürlich kann euer Buch weniger oder auch viel mehr Kapitel haben. Wie zu sehen ist, bekommt jedes Kapitel eine eigene xhtml Datei. Das ist nicht nur für die eigene Übersicht sehr praktisch, sondern so erscheint jeder Abschnitt des Buches auch automatisch in dem logischen Inhaltsverzeichnis (toc.ncx) des Buches.

Öffnen wir jetzt mal die Titelseite, also unsere Lovestory_00.xhtml Datei in einem Browser (z.B. Safari), sehen wir folgendes:

Blog_2_1Das sieht doch schon in etwa so aus, wie die Titelseite eines Buchs.

Es gibt eine Zeile für den Namen des Autors, darunter etwas größer und fett der Titel, darunter ein Untertitel und ein paar Zeilen in noch kleinerer Schrift für die Impressumsangaben. Hier sogar mit einem Link zu einer externen Webseite. Z.B eurer Autorenseite.

 

 

Gehe ich jetzt in der Menüleiste des Browsers auf Darstellung und lasse mir den Quelltext dieser Seite anzeigen. Sieht es so aus:

Blog_2_2

<?xml version=“1.0″ encoding=“utf-8″?>

<!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>

<title>lovestory</title>

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

</head>

<body>

<p  class=“author“>Autor</p>

<p class=“title“>Titel</p>

<p class=“subtitle“>Untertitel</p>

<p class=“copyright“>&copy; copyright<br />Cover<br />Lektorat<br />ISBN:<br /><a href=“http://www.eigene website.com“>www.eigene website.com</a></p>

</body>

</html>

Zur ersten Übersicht, habe ich die einzelnen Bereiche der xhtml Datei einmal unterschiedlich farbig markiert. Genau wie im Quelltext von Webseiten gibt es eine Art Überschrift mit den Angaben zur verwendeten HTML-Version. Das sind hier die ersten drei Zeilen in der Abbildung. Die lassen wir unangetastet. Wer sich damit näher befassen will, findet hier Infos.

Danach folgt der head und der body des Dokuments, zwischen den Tags

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

Was man wissen muss ist, dass html-Seiten immer mit sogenannten Tags aufgebaut sind, die in spitzen Klammern stehen. Alles was an Inhalt und Information angegeben wird, steht zwischen diesen Tags. Es gibt immer einen Anfangstag z.B.:

<title> und den dazugehörigen Schlusstag </title>.

Im Kopf dieses Dokuments, also zwischen den Tags <head> und </head> steht hier der Titel des Dokuments <title>lovestory</title> und es gibt einen Verweis auf die CSS Datei, mit dem Namen lovestory.css im Ordner Styles.

Im Body befindet sich dann der eigentliche Inhalt des Buches.

Zwischen den Tags <body> und dem entsprechenden Schlusstag </body> steht also alles das, was auf den eReadern erscheinen soll. Sehen wir uns einmal eine Zeile an, dann steht da z.B.:

<p class=“subtitle“>Untertitel</p>

Mit den Tags <p> und </p> wird ein Abschnitt angegeben (engl: paragraph).

Wie man sieht sind die <p> Tags erweitert um die nähere Bezeichnung einer Klasse, hier z.B.: class=“subtitle“. Die sogenannten Klassen beziehen sich auf eine  Anzahl von Parametern, die in der CSS Datei angegeben werden können und die das Aussehen des Textes bestimmen, soweit man es auf einem eReader festlegen kann.

In unserem Beispiel kommen auf der Titelseite vier Klassen zur Anwendung class=“author“, class=“title“, class=“subtitle“, class=“copyright“.

Dabei bestimmt jede Klasse das Aussehen des damit formatierten Textes. (siehe Abb1). Die Namen der Klassen sind völlig frei festlegbar. Ich finde es, (abweichend von den üblichen html Tags, h1,h2….- h6 für die unterschiedlichen Headlines) zunächst einmal sinnvoller, Klassennamen zu vergeben, die mir sofort anzeigen, was ich damit formatieren will. Ich kann sie dann in der CSS leichter auffinden, wenn ich dort Änderungen vornehmen möchte.

Wie das funktioniert beschreibe ich in einem der nächsten Beiträge.

You Might Also Like

2 Comments

  • Reply Evy 6. Januar 2015 at 15:00

    Wann kommt denn der nächste Beitrag? Ich fand diesen interessant, aber…. es geht nich weiter :-(

    • Reply Randy 6. Januar 2015 at 16:59

      Tja, da werden wir Autor Uwe mal antupsen … Danke für die Rückmeldung.

    Leave a Reply