3. lekce: TEXTOVÉ ELEMENTY

Úterý, 23. Září. 2008 | 3. Lekce - Textové elementy | Comments Off on 3. lekce: TEXTOVÉ ELEMENTY

Textové elementy jsou ty elementy, které ovliv�?ují vzhled nebo funkci textu.

Patří sem

• kontejnery, do kterých lze uzavřít libovolný text,
• řádkové elementy,
• blokové elementy.

Kontejnery

Mezi kontejnery se řadí elementy span, p a div. S využitím CSS lze s těmito elementy vytvořit nejvíce efektů a nahradit velkou většinu dalších elementů, používaných pro úpravu textu. Pravděpodobně při práci s těmito elementy použijete atributy id a class, které jsou využívány pro CSS, ale nepředbíhejme.

span

Je prvkem řádkovým (in-line prvek), což znamená, že má vliv na část textu, která je v něm uvedena – zvýraz�?uje, mění barvu, písmo, velikost, podtrhává, přeškrtává atd., ale nezalomuje řádky a jeho velikost se řídí podle obsahu. Nemá žádné odsazení a bez vlastností (atributů) nic nemění, takže je bez vlastností přidaných pomocí CSS zbytečný.

p

Znamená odstavec (paragraph). Blokový kontejner, protože označuje blok, ve kterém bývá text nebo obrázek. Můžeme do něj vložit jakýkoli řádkový element. Do tohoto elementu by měl být uzavřen každý odstavec textu, který vytvoříte. V prohlížeči se projeví vertikálním odsazením od okolního obsahu.

div

Asi nejčastěji používaný kontejner. Lze do něj vložit p i span, ale také jakýkoli jiný element (mimo html, head a body). Lze si jej představit jako blok o libovolných rozměrech, okrajích, barvě pozadí, barvě vnitřních prvků, odsazení obsahu atd. V příkladě jsou použity zatím nevysvětlené vlastnosti, ale s malou nápovědou snad bude jasné oč jde.

bude v prohlížeči zobrazen takto

�?ádkové elementy

�?ádkové elementy slouží především k formátování písma (velikost, typ, řez písma). Tyto elementy můžeme rozdělit do dvou skupin:

• sémantické – popisné, logické, zdůraz�?ují obsah textu, závislé na prohlížeči,
• formátovací – fyzické, formátování a prezentace písma, nezávislé na prohlížeči.

Ačkoli by měl kód v HTML obsahovat pouze strukturu stránky, nikoliv fyzické formátování písma (fyzické formátování můžeme realizovat pomocí kaskádových stylů), v dnešní době se velmi často používají značky formátovací. Je to především z toho důvodu, že značky formátovací jsou oproti značkám sémantickým nezávislé na prohlížeči. V nadcházejícím textu jsou popsány oba druhy značek.

Formátovací elementy

Formátovací elementy se používají k fyzickému formátování, tedy jak má daný text přesně vypadat v prohlížeči (jak má být formátován). Nezabývá se logickou rolí formátovaného textu.

<b> – tučné písmo

Element <b> pro tučné písmo vychází z angl. “bold”. Je velmi často používán pro zvýraznění (bohužel nesprávně). Tučné písmo není dobré používat příliš často. Hodí se především pro nadpisy a v textu pro velmi důrazné zvýraznění. Podle typografických zásad by mělo být běžné zvýraznění realizováno pomocí kurzívy.

<i> – kurzíva

Element <i> pro kurzívu vychází z angl. “italic”. Kurzíva je podle typografických zásad jediným správným způsobem pro běžné zvýraznění textu. Chceme-li mít tedy naše stránky vytvořeny podle určitých pravidel, mezi které typografické zásady určitě patří, používejme pro zvýraznění pojmů a slov výhradně kurzívu.

<u> – podtržené písmo

Element <u> pro podtržené písmo vychází z angl. “underline”. Používat tento typ zvýraznění na stránkách se vůbec nedoporučuje, protože podtržené písmo je používáno u odkazů (pokud autor stránky vzhled odkazů nezmění). Podtržený text návštěvníka stránky svádí ke kliknutí v domnění, že se jedná o odkaz.

<sup> a <sub> – horní a dolní index

Elementy <sup> a <sup> pro horní a dolní indexy vychází z angl. “superscript” a “subscript”. Tyto značky se používají zejména při zápise matematických vzorců.

U dalších značek je zápis obdobný, proto je v následující tabulce uveden stručný přehled nejčastěji používaných formátovacích značek.

• <b> – tučné písmo
• <i> – kurzíva
• <u> – podtržené písmo
• <small> – malé písmo
• <s> – přeškrtnuté písmo
• <sup> – ^{horní index}
• <sub> – _{dolní index}
• <tt> – psací stroj

Sémantické elementy

Jsou to elementy, které říkají něco o obsahu, který obklopují a umož�?ují tak i počítačům porozumět textu alespo�? na minimální úrovni. Vymezují význam elementu a přitom přesně nedefinují, jak má vymezený text vypadat. Původně mělo mít logické vymezení mnohem větší význam, než jaký mu přisoudil dnešní web, kde se používá zejména formátování fyzického. Dnes se logické (sémantické) elementy používají často s fyzickým významem.

<a> – odkaz

Velmi často používaný element. Označuje místo v dokumentu, díky kterému můžeme přejít na jiné místo na stránce nebo kdekoli na Internetu. Odkazem může být obyčejný text, ale také obrázek. Může odkazovat na jiný dokument, kterým nemusí být jen webová stránka, ale může jím být např. obrázek či textový nebo jiný soubor.

Element <a> má povinný obsah. Musí mít určen atribut href, který je nositelem umístění cíle odkazu. Doporučeným atributem je title, který při přejetí myší zobrazuje bublinkovou nápovědu se zadanou hodnotou.

Odkaz na www.seznam.cz v kódu vypadá takto:

Odkaz na www.seznam.cz

Speciální případem je tzv. kotva neboli odkaz na konkrétní místo ve stránce. Funguje tak, že někde v textu umístíme element a s atributem name tam, kam chceme odkazovat. Hodnotou atributu name bude nějaký jednoznačný identifikátor. Do atributu href funkčního odkazu napíšeme adresu dokumentu doplněnou o identifikátor uvedený v name.

<figure> – svázání obsahu

Svazuje mediální a textový obsah. Často se jedná o obrázek (video) a jeho popis (podobně i o další značky, ať již nový canvas nebo klasické embed a object).

<cite> – citace, prohlížeče interpretují kurzívou

Tento element označuje citovaný zdroj, odkaz na další zdroje nebo citaci. Poměrně se vžil zvyk uzavírat do něj jména osob, organizací apod., nazalamuje řádek.

<code> – neproporcionální písmo

Používá se k označení počítačového nebo programového kódu (strojopis). Obdoba formátovací značky <tt>.

<mark> – označený text

Používá se ke zvýraznění textu (výběr).

<em> – důraz, vykresleno kurzívou

Z angl. “emphasis”. Nejsprávnější znak pro zvýraz�?ování. Obdoba formátovací značky <i>.

<strong> – tučné písmo

Silné zvýraznění, vychází z angl. “strong” = silný. Prohlížeče pro něj používají tučné písmo. Obdoba formátovací značky <b>, z tohoto důvodu může někomu přijít použítí tohoto elementu zbytečné, proto je potřeba si uvědomit rozdíl. Element <b> říká, že je něco tučným písmem, zatímco element <strong> říká, že je něco důležité, zvýrazněné!!

Další sémantické elementy jako <spam>, <dfn>, <kbn>, <samp>, <abbr>, <del>, <acronym> se používají jen velmi zřídka. Je to z důvodu odlišné interpretace sémantických elementů v různých prohlížečích, proto se doporučuje používat především elementy formátovací, nebo ještě lépe elementy pro formátování textu nepoužívat vůbec, pro nastavení vzhledu používejte CSS.

Blokové elementy

Blokové elementy vytvářejí v dokumentu samostatný blok, který je oddělen od okolního obsahu přechodem na nový odstavec.

<h1> až <h6> – nadpisy

V HTML je definováno šest úrovní nadpisů, které se liší hlavně velikostí písma. Nadpisy by měly být využity všude tam, kde je to možné. Mají velký význam pro SEO.

<hr /> – vodorovná čára

Slouží pro vložení vodorovné čáry, jedná se o nepárový element. Podobně funguje i zalomení textu pomocí <br />

<pre> -předformátovaný text

Element <pre> slouží k zobrazení textu se zachovaným formátováním. Zachovává mezery a nové řádky ve zdrojovém textu. Obsah elementu je zobrazován standardně neproporciálním písmem. Důvodem je zarovnávání textu pod sebe.

<blockquote> – citace

Element <blockquote> slouží k zobrazení bloků citací. Zobrazuje se jako odstavec s větším levým a pravým odsazením.

<!–Komentář –>

Slouží pro zapisování komentářů. Vše mezi značkami <!– a –> je považováno za komentář.

Seznamy

Seznamy položek. Jestliže potřebujeme napsat nějaký seznam (barev, odkazů, hodnot, možností atd.), je výhodnější použít HTML seznamy, než je složitě a vlastnoručně tvořit. Základní typy seznamů jsou číslované a odrážkové. V CSS lze seznamy dále upravovat po stránce vzhledové.

Neuspořádané seznamy

Neuspořádaný neboli odrážkový seznam tvoří element ul (unordered list). Položka seznamu je definována v elementu li (list item). Položka může obsahovat i více odstavců. Před každou položkou se standardně vytváří odrážka.
Nastavit typ odrážky je možné pouze pomocí CSS (list-style-type).

• žirafa
• slon
• velbloud

Uspořádané seznamy

Uspořádaný neboli číslovaný seznam se značí tagem ol (ordered list). Položka seznamu je opět li. Před položku se automaticky vypisuje její pořadové číslo.
Nastavení typu řazení je možné pouze pomocí CSS (list-style-type).

• žirafa
• slon
• velbloud

Znakové entity

Pokud chcete v prohlížeči zobrazit text, prostě ho napíšete do kódu stránky. Ale některé znaky jsou chápány jako součást jazyka HTML, a tak by se normálně nezobrazily. Například ostré závorky < > by v textu nešly zobrazit. Pro tento účel vznikla speciální sekvence znaků, pomocí níž znak zobrazíme. Tato sekvence začíná znakem & a končí středníkem. Mezi nimi je krátký písmenkový zápis daného znaku.

Podrobný seznam znakových entit naleznete např. na http://www.utexas.edu/learn/html/spchar.html.