V HTML se rozlišuje mezi šesti různými úrovněmi nadpisů. Ty jsou definovány prvkem h1 až h6.
<h1>Úroveň nadpisu 1</h1> <h2>Úroveň nadpisu 2</h2> <h3>Úroveň nadpisu 3</h3> <h4>Úroveň nadpisu 4</h4> <h5>Úroveň nadpisu 5</h5> <h6>Úroveň nadpisu 6</h6>
h1 představuje největší a h6 nejmenší nadpis. S HTML5 byly navíc představeny další možnosti definice nadpisů, které budou ukázány později.
Různé úrovně nadpisů vám pomáhají při strukturování textů. Inspirujte se například knihami. Tam je knižní název, který lze srovnat s obsahem prvku h1. Na každou stránku HTML by tedy měl být vložen pouze jeden prvek h1. Zbývající text je pak strukturován prostřednictvím dalších úrovní. Po hlavním nadpisu následuje h2. Podkapitoly h2 jsou pak zase označeny prvkem h3.
Mimochodem: Velikost úrovní nadpisů je ze začátku stanovena prohlížeči. Sami je však můžete explicitně určit pomocí CSS. K tomu později více.
Nastavení úrovní nadpisů je velmi jednoduché. Použijete počáteční písmeno h a za něj zvolené číslo úrovně.
<h1>PSD-Tutorials.de</h1>
Za takto definovaným nadpisem se automaticky vloží zalomení řádku a mezera ke následujícím prvkům.
Nezapomeňte, že čísla v počátečním a koncovém značkovaní musí být shodná.
Definování odstavců
V textech jsou kromě nadpisů samozřejmě i odstavce. Tyto odstavce lze v HTML rovněž velmi jednoduše vytvořit. Používá se pro to prvek p. Takto označený odstavec má automaticky mezeru k následujícím prvkům. Jak velký bude tento odstavec nakonec, můžete opět ovlivnit pomocí CSS.
Zde je příklad dvou definic odstavců:
<p>Toto je odstavec</p> <p>Toto je také odstavec</p>
Pohled do prohlížeče poskytuje následující obraz:
V HTML5 není nutné, aby otevřené odstavce přes </p> byly opět uzavřeny. Pro přehlednost bych však skutečně doporučoval uzavírající </p>.
Manuální zalomení řádků
Běžný text v rámci odstavců, seznamů atd. je prohlížečem automaticky zalomen, pokud je širší než okno prohlížeče. To je praktické, koneckonců tak lze zabránit zbytečnému horizontálnímu posouvání. Nicméně sem můžete umístit zalomení textu kdekoli jinde. K tomu slouží prvek <br />. Mějte na paměti, že se jedná o samostatný tag, který nemá uzavírací tag, uzavírá se sám.
<p>Yeh, this one's for the workers who toil night and day<br /> By hand and by brain to earn your pay<br /> Who for centuries long past for no more than your bread<br /> Have bled for your countries and counted your dead</p>
Při použití <br /> není důležité, zda je na konci řádku nebo vlastním řádku. V obou případech bude výsledek vypadat takto:
Opět se vraťme ke vloženým zalomením řádků, která jsou vkládána prohlížeči. Často bývají problémová, protože není možné kontrolovat, kde se zalomení nakonec provede. To může vést k nechtěným výsledkům. Typickým příkladem jsou číselné verze.
iPhone 5
To by normálně mělo být na jednom řádku. Zde by zalomení řádku nemělo proběhnout mezi iPhone a číslem 5.
iPhone 5
Něco takového lze zamezit pomocí tzv. chráněných mezer. Příklad:
Tímto řetězcem se definuje tato chráněná mezera. V prohlížeči se zobrazí jako běžná mezera: 
Aby to fungovalo podle představ, nesmíte do zdrojového textu vložit žádné mezery. Něco takového by nefungovalo:
Formátovaný text
Mohou existovat situace, kdy chcete zobrazit text přesně tak, jak je uspořádán v kódu. Typickým příkladem jsou zdrojové kódy programů, jak je často možno nalézt i zde na PSD-Tutorials.de.
Pro tyto účely umožňuje HTML definovat předformátované úseky textu. Prohlížeč pak bude brát v úvahu odsazení definované v kódu. Následující příklad ukazuje, jak toto může být provedeno:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>"Ahoj, světe!" v PHP</h1> <pre> <?php echo "Ahoj, světe\\n"; ?> </pre> </body> </html>
Text, který má být zobrazen jako předformátovaný, se definuje uvnitř prvku pre. Vkládejte odsazení atd. přesně tak, jak by mělo být zobrazeno prohlížečem.
Při prohlížení ukázkového kódu by vás mohly zaujmout zvláštní znaky <?php a ?>. V prohlížeči jsou tyto zobrazeny jako <?php a ?>. Použití těchto znaků se v kódu nazývá maskování znaků. Je to nezbytné, pokud chcete, aby prohlížeč neinterpretoval vlastní HTML znaky. Pokud byste do kódu přímo napsali <?php, prohlížeč by myslel, že se jedná o zahájení PHP části. Proto se znaky maskují.
• Nahraďte znak & řetězcem &
• Nahraďte znak < řetězcem <
• Nahraďte znak > řetězcem >
• Nahraďte uvozovky znakem "
Navíc, prvek pre není určen pouze pro zobrazení zdrojových kódů. Také tabulková data lze takto velmi snadno zobrazit. Následující příklad ukazuje typickou tabulku, která byla vytvořena pouze pomocí mezer uvnitř prvku pre.
<pre> Cíl Odjezd Příjezd Nástupiště ---------------------------------------------------------------- Berlín 10:23 14:30 2 Hamburg 11:09 13:20 13 Mnichov 12:04 15:45 1a </pre>
Výsledek v prohlížeči bude vypadat následovně:
Prohlížeče skutečně bere v úvahu mezery, které jste definovali v kódu. Uvedený způsob tabulky funguje docela dobře. Pro menší tabulky to považuji za praktické. Jakmile jsou však data rozsáhlejší, měli byste se vrátit ke klasickým HTML tabulkám. Jak se tyto definují, se dozvíte také v této řadě.
