Přeskočit na hlavní obsah

Struktura XHTML + základní tagy

Struktura XHTML dokumentu má základní rozdělení na dvě části - hlavička dokumentu (head) a tělo (body) dokumentu.

V hlavičce jsou informace o stránce, kódování, odkazy na css styly či titulek. V těle je pak zobrazovaný obsah, který se skládá z několika dílčích částí (nadpisy, odstavce, tabulky a další). Dokument XHTML může mít následující skladbu:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="../Styles/styl.css" rel="stylesheet" type="text/css">
<title>Titulek stránky</title>
</head>
<body>
<h1>Nadpis</h1>
<p>První odstavec</p>
<p>Druhý odstavec...
<ul>
<li>1. položka seznamu</li>
<li>2. položka seznamu</li>
</ul>
<span>...text s odlišnými vlastnostmi</span>
</p>
</body>

Tagy pro EPUB 2

Zde je přehled základních tagů:

Hlavička

<head>

Na začátku každého dokumentu bývají specifikace, které informují o tom, v jakém jazyku je dokument sepsaný, jaké používá kódování a podle jakých pravidel se řídí. běžně jsou první řádky například takovéto:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">

Title

<title>

Tag pro titulek stránky. Pro e-knihy není, narozdíl od webů, nikterak zásadní. Zobrazuje se jen na některých zařízeních.

Linky

<link>

Tento tag definuje vztah mezi dvěma dokumenty. Pro EPUB2 je nejčastější využití připojení externího kaskádového stylu, kde pomocí atributu rel="slylesheet" definujeme, že se jedná o soubor css. Například:

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

Tělo dokumentu

<body>

Tento tag definuje tělo dokumentu a je tak prarodičem všech vnořených elementů. Mezi tyto značky se píše vše to, co má být zobrazeno.

Oddíly, charaktery

<div><span>

Tyto elemety ohraničují části dokumentu, které je možné následně pomocí css upravit na odlišný vzhled. Zatímco <div> se používá pro vytvoření blokového oddílu (sekce), <span> je element řádkový. Zjednodušeně řečeno to znamená, že <div> před sebou a za sebou udělá konec řádku, <span> se může vyskytovat v jednom řádku a může tak ohraničovat částu s rozdílným stylem.

Oddílů lze na stránce vytvořit libovolný počet a každý může mít jiné vlastnosti.

Odstavce

<p>

Označení pochází z anglického paragraph (odstavec). Text nového odstavce vždy začíná nový řádek a konec odstavce končí řádek. Každý odstavec je automaticky odsazen mezerou, která lze upravit v css.

Nadpisy

<h1>, <h2>,... <h6>

Tag pro vytvoření nadpisů uvedených úrovní. Existuje 6 úrovní nadpisů, kde h1 je největší a h6 je nejmenší.

Tabulky

<table>, <caption>, <tbody>, <tr>, <th>, <td>

Všechny tyto elementy souvisí se zobrazením tabulek. <table> ohraničuje celou tabulku, <caption> se používá pro nadpis tabulky a <tbody> pro tělo tabulky. Další elementy již specifikují řádky a jednotlivé buňky tabulky. <tr> se používá pro vytvoření jednotliveho řádku tabulky. Každý takový řádek pak musí obsahovat minimálně jeden další tag a to buď <th> (buňky záhlaví tabulky), nebo <td> (běžné buňky tabulky). Data se pak zapisují tyto mezi tagy buněk.

Atributy pro slučování buněk - <td>:
  • colspan - definuje kolik sloupců má buňka přesahovat (sloučené buňky)
  • rowspan - definuje kolik řádků má buňka přesahovat (sloučené buňky)

Seznamy

<ul>, <ol>, <li>

Seznam je několik oddělených položek. Tyto položky mohou být číslované nebo mohou mít odrážky. Jako ohraničující element pro číslovaný seznam slouží <ol> a pro odrážkový seznam pak <ul>. Element <li> pak tvoří jednotlivé odrážky seznamu.

Pro zadání stylů odrážek se používá atribut type. možnosti jsou následující :

  • nečíslovaný seznam:
    • disc - puntík
    • square - čtvereček
    • circle - kolečko
  • číslovaný seznam:
    • 1
    • A
    • a
    • i
    • I

Type odrážek lze použít pro celý seznam nebo i na jednotlivé položky. Správné zobrazení je však závislé na konktrétním zařízení.

Definiční seznamy

<dl>, <dt>, <dd>

Definiční seznam slouží k formátování struktur slovníkového typu. Celý seznam je ohraničen elementem <dl>, jednotlivé definované pojmy jsou zapsané elementy <dt> a jejich definice pak <dd>.

Fyzické formátování

Fyzické formátování se používá pro odlišení části textu. Všechny tyto tagy jsou řádkové a používají se párově.

Přehled tagů pro fyzické formátování
  • b - tučné písmo (pro cizí termíny, klíčová slova)
  • strong - tučné písmo (zvýraznění textu)
  • i - kurzíva (pro cizí termíny, klíčová slova)
  • em - kurzíva (zvýraznění textu)
  • u - podtržení textu
  • sub - dolní index
  • sup - horní index
  • small - zmenšení textu
  • big - zvětšení textu
  • s - přeškrtnutý text

Obrázky

<img>

Obrázky se do e-knihy pomocí tagu img. obrázků se více věnuji v kapitole Obrázky a grafika.

Povinné atributy obrázků
  • src - definuje cestu k obrázku
  • alt - název obrázku

Hypertextové odkazy

<a>

Odkazy mohou být buď na jiné části knihy (relativní) nebo na internetovou stránku či soubor (globální). Odkazy bývají zpravidla zvýrazněny (nejčastěji podtržením).

Povinný atribut
  • href - cesta k odkazované stránce či souboru

Další elementy

<hr />, <br />

Tag <hr /> vloží vodorovnou čáru a tag <br /> ukončí řádek.

Neviditelná poznámka

<!--

Přímo do zdrojového XHTML dokumentu si lze psát poznmky, které se nebudou při čtení zobrazovat. Taková poznámka začíná zápisem <!-- a konec poznámky je ukončen -->. Například, pokud bude ve zdrojovém kódu níže uvedený zápis, při čtení e-knihy nebude vidět.

<!--
Tak tohle jsem čerpal z www.elektronickeknihy.eu, ale nikomu to neřeknu
-->

Klíčové atributy

Jsou dva atributy, které lze použít téměř u všech tagů XHTML a které jsou klíčové pro provázání se zápisy vlastností:

  • class (jmeno_tridy)
  • class (#jmeno)

Komentáře

Populární příspěvky z tohoto blogu

Jak číst e-knihy

Už jsme si probrali, co je e-kniha, jaké mohou být formáty i jaké jsou  výhody elektronického čtení . V tomto textu projdeme možnosti čtení e-knih. Čtečka Čtečka je specializované zařízení pro čtení e-knih. Největší rozmach čteček byl současně s techlogií e-ink (též e-papír, digitální inkoust). Díky této technologii je čtení e-knih velmi podobné čtení knihám papírovým. Ač je čtečka díky e-ink většinou s černobílým displejem, má v porovnání oproti tabletům určité čtenářské výhody - malá hmotnost, dlouhá výdrž baterie i lepší čitelnost na slunci. Pro náročnější čtenáře je čtečka nadále ideální variantou. Na světovém trhu jsou však tyto zařízení na pomalém ústupu - přesto, že se vyvíjí nové modely s dalšími funkcemi, nemají uživatelé tendenci své zařízení často obnovovat. I přes dotykový displej, wi-fi, internetový prohlížeč, hry a další funkce, stále jde o zařízení specializované a mnoho čtenářů dává dnes přednost zařízením multifunkčním. Tablet, mobil Právě rozvoj tabletů a chytrých tel

Historie e-knih

Myšlenka elektronických knih se objevila v roce 1971, kdy Michael S. Hart založil Projekt Gutenberg ( www.gutenberg.org ). Počátek vývoje byl velmi roztříštěný a většinou souvisel s počítačovými obory, kde se e-kniha uchytila například pro různé příručky a návody. Určitý přelom nastal konce 20. století, kdy se e-knihy dostaly do zájmu širšího množství čtenářů a vydavatelé díky tomu podnikali první nesmělé kroky do světa elektronické literatury. Ač se jednalo o určité hledání cesty a narážení do slepých uliček, bylo objeveno několik fungujících řešení. Na trhu však nebyl žádný velký hráč, který by určil nějaký standard a tak se současně vyvíjelo nepřeberné množství formátů.

Specifika XHTML

Pokud máte základní znalosti HTML jazyka, dovolím upozornit na nejdůležitělší rozdíly: Uvozovky pro atributy Oproti HTML musí být všechny hodnoty atributů v uvozovkách. Uvozovky je vhodné používat i v HTML, ale jejich nepoužití není chyba. Například HTML kód pro obrázek může být zapsán takto: <img src=tojsemja.png width=150 height=400> V XHTML musí být vždy použity uvozovky (eventuálně apostrofy): <img src="tojsemja.png" width="150" height="400" /> nebo také: <img src='tojsemja.png' width='150' height='400' /> Zákaz křížení tagů Toto vlastně není změna, křížení tagů se nesmí ani v HTML. Zatímco ale většina internetových prohlížečů křížený zápis HTML přečtou a poradí si s ním, v XHTML je to striktně zakázáno a validátory epub souborů zahlásí chybu. špatně: <b><i>tučná kurzíva</b></i> správně: <