Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.

Transkript

1 Bloky Tu se popisuji blokové tagy, což jsou všechny, za kterými se zalamuje řádka. Jde o různé oddíly textu a odstavce. Opakem blokových tagů jsou řádkové (in-line) tagy na značkování textu. Tag Význam Párový p odstavec nepovinně br řádkový zlom ne div oddíl ano center vycentrování ano h1 nadpis 1. úrovně ano h2 nadpis 2 úrovně ano h3 nadpis 3. úrovně ano h4 nadpis 4. úrovně ano h5 nadpis 5. úrovně ano h6 nadpis 6. úrovně ano blockquote citace, odsazení ano address adresa ano pre předformátovaný text ano hr vodorovná čára ne Tok textu Pokud se text nevejde na řádek, automaticky se zalomí. Slovo, které by se tam nevešlo, se prostě zobrazí na začátku dalšího řádku. Proto není v HTML nutné ukončovat řádky. Stačí pouze vymezit odstavce a jiné bloky textu.

2 p Odstavec (angl. paragraph). Základní formátovací tag. Značka <p> se nachází na začátku každého odstavce. Původně šlo o tag nepárový, ale postupně se začala používat i značka </p>, která tag ukončila. Novější specifikace vyžadují ukončovací tag. Text nového odstavce vždy začíná nový řádek a konec odstavce končí řádek. Klasický odstavec v HTML má před sebou a za sebou navíc vertikální mezeru, která většinou přesně odpovídá výšce jednoho řádku, což odpovídá anglosaské normě. (Této mezery se lze zbavit pomocí CSS stylu margin, například <p style="margin-top: 0px; marginbottom: 0px">.) Pokud se vyskytnou za sebou dva odstavce nebo jiné elementy s vertikální mezerou, výška mezery se nesčítá. Podobná mezera se dělá i u jiných blokových prvků, nejčastěji u nadpisů. Tag <p> je velmi často používán HTML editory jako základní prvek dokumentu. Texty, které mají odstavce značené pomocí tagu <p>, jsou dobře transformovatelné do jiných formátů a dobře se s nimi pracuje pomocí CSS. Nejen proto používání tagu <p> velmi doporučuji. Atribut tagu <p> Atribut Význam Hodnoty align zarovnání odstavce left right center justify Atribut align u tagů <p>, <div> a u nadpisů align= význam poznámky left zarovnání doleva výchozí hodnota, nemusí se nastavovat right zarovnání doprava pravý okraj textu bude zarovnaný center zarovnání na střed justify zarovnání do bloku budou zarovnány oba okraje textu, poslední řádek bude zarovnán doleva velmi staré prohlížeče justify nepodporují, často vznikají nehezky velké mezislovní mezery Příklad: <p align="right">odstavec zarovnaný doprava.</p> Atribut align u odstavce i u jiných blokových prvků se považuje za zastaralý (ačkoli funguje výborně). Doporučuji jej nahrazovat CSS stylem text-align. br Řádkový zlom (angl. break). Způsobuje okamžité ukončení řádku. Případný další text pokračuje na nové řádce. Je důležité pochopit rozdíl mezi <p> a <br>. V zobrazení je jediný rozdíl: <br> kolem sebe nedělá vertikální mezery.

3 Z typografického hlediska odpovídá <br> "měkkému entru" aneb "vynucenému zalomení řádku". Pokud je tag <br> použit uprostřed odstavce, další text se považuje za pokračování toho odstavce, nikoli za nový. Takže kupříkladu pokračuje nastavení zarovnání. V některých wysiwyg editorech se měkký enter vytváří kombinací Shift + Enter nebo Ctrl + Shift + Enter. Clear Jako jediný HTML tag má <br> atributy reagující na plovoucí (obtékané) objekty. Obtékanými objekty jsou nejčastěji obrázky nebo tabulky zarovnané k jedné straně. Vložením <br> s atributem clear se dá nastavit, aby se další text zobrazil až tam, kde zobrazení řádků nebude ovlivňováno případnými obtékanými objekty. Tag <br>, atribut clear clear= right left význam Text čeká na ukončení objektů u pravého okraje Text čeká na ukončení objektů u levého okraje all Text čeká na ukončení objektů u obou okrajů Příklad: <img align="right" alt="obrázek zarovnaný vpravo"><br clear="right">text začíná až pod obtékaným obrázkem. Atribut clear u tagu <br> se považuje za zastaralý a doporučuje se nahradit jej CSS vlastností clear. Clear přes CSS má tu podstatnou výhodu, že se dá nastavit libovolnému prvku (ne pouze tagu <br>). Pozor, v CSS není hodnota all, ale both. div Div se nejčastěji překládá jako oddíl. Zahrnuje v sobě libovolně velkou oblast textu včetně nadpisů, obrázků a tabulek. Nezřídka se celá stránka vyskytuje uvnitř jednoho elementu <div>. Před a za oddílem se zalomí řádek. V tomto smyslu je <div> velmi podobný odstavci (<p>). Narozdíl od odstavce ale <div> nedělá před a za sebou vizuální mezery (aneb má nulový výchozí margin). Tag <div> byl do HTML přidán zejména kvůli kaskádovým stylům. V tom se zase podobá tagu <span>, který také přibyl kvůli stylům. Rozdíl mezi <div> a <span> je v tom, že <div> je blokový element (způsobuje zalomení řádku před a po), kdežto <span> je in-line element (řádkový). Na toto téma vizte též pojednání div a span, neutrální tagy. Kromě obecných atributů (v případě <div> velmi důležitých) lze použít atribut align (zarovnání), které má stejné hodnoty jako v případě tagu <p> (odstavce). Atributy tagu <div> Atribut Význam Hodnoty

4 align zarovnání textu, zastaralý atribut left right center justify obecné atributy center Vycentrování libovolně velkého obsahu. Dosahuje stejného efektu jako <div align="center">. Nedoporučuji jeho používání. Smysl měl pouze v dobách, kdy některé prohlížeče nepodporovaly <div>. Dnes jej doporučuji nahradit divem s CSS stylem text-align: center. Avšak tag center je v prohlížečích stále plně funkční. Centrování se dědí do vnořených elementů (např. odstavců <p>). Výjimkou je vnořená tabulka. Ta se sice vystředí, ale její obsah se zarovnává normálně (zpravidla vlevo). h1 až h6 Nadpisy (angl. heading) jsou vlastně zvláštním druhem odstavců (tag <p>). Je rozlišováno šest stupňů nadpisů. Nadpisy se automaticky zobrazují tučně, různým stupněm písma (odpovídá stupni u tagu <font>) a mají kolem sebe vertikální mezery. Není tedy třeba je formátovat ručně. V tabulce uvádím též velikost písma ve výchozím nastavení prohlížečů (může se měnit): Výchozí formátování nadpisů Tag Stupeň písma Výchozí velikost Využití h1 6 24px Hlavní nadpis stránky h px Podnadpisy, názvy kapitol h3 4 16px Mezinadpisy h4 3 13px Důležitější odstavce h5 2 10px Žádné rozumné použití h6 1 9px Nejde ani pořádně přečíst Tagy <h1> až <h6> mají jediný atribut (kromě obecných): align se stejnými hodnotami, jako má odstavec. Mnozí autoři pro nadpisy nepoužívají tyto tagy <hx>, ale normální odstavce (tag <p>), kterým nastaví velikost a řez (pomocí tagů <font>, <b> a <i>). To je vcelku chyba, zejména protože si tak přidělávají spoustu práce. Vzhled nadpisů lze snadno předefinovat pomocí CSS. Text se správně nadefinovanými nadpisy se snáze převádí do jiných formátů (rtp, pdf, doc). Většina HTML editorů umožňuje snadné zadávání nadpisových tagů. Některé programy na základě nadpisů dokáží automaticky vytvářet obsah dokumentu. Některé vyhledávače si také všímají tagů nadpisů a přikládají jejich textu větší váhu.

5 blockquote Bloková citace, která se původně používala pro delší kusy citací (na rozdíl od krátkých, které realizoval tag <cite>). Moderní specifikace doporučují pro citaci použít tagu <q>. <blockquote> se zobrazuje jako odstavec s větším levým a pravým odsazením (odsazení znamená, že je po okrajích odstavce prázdné místo). Díky odsazení se tag <blockquote> v praxi používá ani ne tak pro citaci, jako spíše pro odsazení. V dnešních prohlížečích je odsazení <blockquote> zpravidla 40 pixelů. Odsazení se zvětší, pokud se tag použije vícekrát za sebou. Tag <blockquote> má kromě obecných atributů ještě atribut cite, který udává url dokumentu, z nějž je citováno. Atribut cite se v dokumentu nijak neprojeví (nejde např. prokliknout), takže se moc nepoužívá. Příklad použití cite: <blockquote cite=" tam, co neznám</blockquote> Před příchodem CSS byl tag <blockquote> jediným způsobem, jak odsadit odstavec. Dnes doporučuji raději použití normálního odstavce <p> nebo oddílu <div> s deklarací stylu margin nebo margin-left. Následující dva elementy se zobrazí stejně: <blockquote>odsazení blokovou citací </blockquote> <p style="margin-left: 40px; margin-right: 40px">Odsazení pomocí stylu</p> address Vymezení adresy. Další tag, který se časem ukázal být zbytečným. Zobrazuje se stejně jako odstavec, akorát že kurzívou. Nemá žádné atributy. pre Předformátovaný text. Tento tag umožňuje rychlé publikování textových souborů, které už jsou formátované pomocí mezer a konců řádek. Uvnitř tagu <pre> totiž neplatí základní pravidlo HTML syntaxe, které konec řádku bere jako mezeru a skupinu mezer chápe jako mezeru jednu. Takže případné násobné mezery a konce řádků se v prohlížeči zobrazí stejně jako ve zdroji. Případný konec řádku bezprostředně po značce <pre> a před značkou </pre> je zanedbáván, aby nevznikaly nežádoucí vertikální mezery. Aby se písmenka zarovnávala pod sebe, zobrazují prohlížeče předformátovaný text neproporcionálním písmem (nejčastěji Courier), které má všechny znaky stejně široké. Zobrazení fontu se dá předefinovat pomocí CSS. V některých zdrojích se uvádí atribut width, který by měl stanovovat maximální počet znaků na řádek. Nefunguje v Exploreru, v nejnovější Mozille (aktualizace 2005) to funguje. xmp Obdobou tabu <pre> je tag <xmp>, což znamená "example", angl. příklad. Nejenže zachovává mezery a řádkové zlomy, ale dokonce (narozdíl od <pre>) neinterpretuje

6 ani další HTML tagy. Hodí se tedy zejména pro snadný zápis příkladů jazyka html. Funguje ve všech prohlížečích, ale specifikacemi je ostře nedoporučován, ba zavrhován. Více informací o XMP. hr Vodorovná čára (angl. horizontal rule). Bez atributů se zobrazí stínovaně šedá přes celou šířku stránky. Atributy ale mohou její vzhled ovlivnit. Atributy tagu <hr> Atribut Význam Možné hodnoty width šířka (horizontálně) délka nebo procento size šířka ve smyslu tloušťky délka v pixelech align zarovnání čáry s nastavenou šířkou left, center, right color barva (pouze v IE) barva noshade čára bude bez stínu bez hodnoty Příklad: <hr width="50" size="50" color="red" align="center" noshade> zobrazí vycentrovaný červený čtverec. Starší verze Mozilly a Opera neumějí změnit barvu, vykreslují vždy tmavě šedou. Novější Firefox barvu zadanou přes atribut color umí, ale nezvládá obarvení stylem. Vertikální čára se v čistém HTML udělat nedá, resp. neexistuje na to tag. V praxi se vertikální čára dělá tak, že se nějakému tagu, nejčastěji tagu <div>, přidá pravý nebo levý okraj pomocí CSS stylu border (resp. jeho variant border-left, border-right apod.).