Home » Školení » Tvorba WWW – HTML » Inline tagy

Inline tagy

Všechny tagy na formátování textu jsou in-line tagy, to znamená řádkové. Nezalamují za sebou řádek (narozdíl od blokových tagů).


Fyzické formátování

Fyzické formátování říká, jak má který text přesně vypadat (tedy jak má být formátován). Nezabývá se logickou rolí formátovaného textu (snad kromě sup a sub).

Typy písma

Typem písma vyznačujeme na stránce tu část textu, která buď má speciální obsah, který chceme od zbytku stránky nějak odlišit (např. zdrojový kód), nebo má obsah, pro který není značka, ale my tento text chceme nějak odlišit.

Tag Description
<b> tučný text
<big> větší text
<i> italika
<small> menší text
<sub> horní index
<sup> dolní index
<strike> přeškrtnutý text
<u> podtržený text

Obecně byste se měli vyvarovat používání tagu U. Podtržené písmo obvykle symbolizuje odkaz a pokud byste podtrhávali i jiný text, uživatele byste mohli dosti zmást. Pro zvýraznění textu na stránce radši použijte B či STRONG.

Font (písmo), barva a velikost

Do teď se text zobrazoval obyčejný černý. To se dá ovlivnit tagem <font>. Tento příklad vystihuje všechny jeho možnosti:

<font face=“arial“ size=“5″ color=“blue“> Tento text je psaný arialem, velikostí 5 a barvou modrou. </font>

Parametr face může obsahovat i více písem oddělených čárkou. Pokud uživatel dané písmo nemá v počítači, prohlížeč použije další za čárkou. Při volbě písem musíte být opatrní a pokud používáte nějaké exotičtější písmo, tak vždy nastavte nějakou známější alternativu. Mezi písma, která jsou rozšířena na naprostou většinu počítačů, patří Verdana, Tahoma, Arial, Garamond, Georgia a Times New Roman. Poslední jmenovaný je často použit webovými prohlížeči jako defaultní v případě, že písmo není stránkou definováno.Parametr size určuje velikost textu. Může nabývat hodnot 1 až 7, kdy 7 je největší.

Parametr color určuje barvu písma. Hodnotu můžeme psát pomocí názvů přednastavených barev (všechy jsou anglicky: black, white, red, blue, green, teal…otevřte prostě slovník) nebo pomocí RGB (hexadecimálně) následujícím způsobem:

<font color=“#3152a5″>

Takto získáte prakticky kteroukoliv barvu. Nebudu zde rozebírat, jakým způsobem RGB vyjádření barev funguje. K převodu lze použít různé tabulky válející se po internetu nebo programy jako Gimp či Adobe Photoshop.

V praxi se tag <font> příliš nepoužívá. Spojuje se s ním totiž mnoho nevýhod. Především jeho možnosti jsou dosti omezené, pak nastavovat písmo musíme pro každý html soubor zvlášť, což při změně vzhledu celého webu je dost na překážku, a taky přímo v kódu nám neustále se opakující tag <font> trochu překáží. Na reálném webu se písmo definuje pomocí stylů.

Logické formátování

Vymezuje význam elementu. Přitom vůbec neříká, 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ých značek používá velmi zřídka, navíc často s fyzickým významem.

span

Logické vymezení části textu, která bude jinak formátována nebo na ni bude vázán skript. Je příbuzný s tagem <div> s tím rozdílem, že <span> je in-line, tzn. nezalamuje před a po sobě řádku.U tagu span lze použít pouze obecné atributy. Ale mají zde velký význam, zejména atributy style, class a id.

strong

Silné zvýraznění (z angl. strong = silný, mocný). Prohlížeče pro něj používají tučné písmo, proto bývá zaměňován s tagem <b>. Je ale dobré uvědomit si rozdíl:

  • tagem <b> říkám, že je něco tučným písmem
  • tagem <strong> říkám, že je něco důležité, zvýrazněné

em

Zvýraznění (emphasis). Prohlížeče vykreslují kurzívou. Nejsprávnější tag pro zvýrazňování (a pro tento účel jen zřídka používaný).Totéž co u <strong>: <i> je kurzíva, <em> je zvýraznění, které se náhodou vykresluje kurzívou.

Další tagy logického formátování nejsou prakticky vůbec používané. Půlka protože je zastaralá, druhá půlka (od abbr níže) je zase relativně nová.

cite

Citace, která na rozdíl od blokové citace <blockquote> nezalamuje řádek (je in-line). Takřka neužívaný tag zobrazovaný kurzívou. Některé vyhledávače prý neindexují vnitřek tohoto tagu, protože se domnívají, že jde o externí citaci.

code

Výpis kódu, například programu. Prohlížeče používají neproporcionální písmo (strojopis). Velmi zřídka používaný tag, já jej používám na výpis kódových příkazů.

dfn

Definice nového výrazu. Prohlížeče to zobrazují kurzívou nebo tučnou kurzívou. Prakticky nepoužívaný tag.

samp

Vzorek, což znamená výstup programu. Zobrazováno strojopisem. Občas to používám, když chci naznačit, že se jedná o nějaký výstup nebo prostě něco odlišného od normálního textu.

Následující tagy přišly až v HTML 4.0

abbr

Něco jako vysvětlení zkratky. Zajímavým atributem je obecný atribut title, který by jako hodnotu měl obsahovat význam té zkratky. Často se používá v blozích. Internet Explorer nepodporuje (nerozezná tag). Nové v HTML 4.0.

<abbr title=“Cascading Style Sheets“>CSS</abbr>

acronym

Totéž, co <abbr>, rozdíl je v tom, že písmena se nehláskují, ale čtou dohromady (např. NATO). Internet Explorer tag acronym zná (narozdíl od abbr).

del

Odstraněný text. Prohlížeče jej zobrazují jako přeškrtnutý, staré prohlížeče jej zobrazí normálně. Novinka v HTML 4.0. Osobně raději odstraněný text mažu, ale jsou případy, kdy se vyplatí tag del používat — zejména ve zpravodajství při vyznačení opravy chyby.Tagy del a ins nejsou ani blokové, ani in-line. Mohou obsahovat další blokové tagy, aniž by zalamovaly řádek.

ins

Přidaný text. Zobrazováno podtržením. Atribut datetime vyjadřuje čas, kdy došlo k přidání. Datetime má formát rrrr-mm-ddThh:mm:ssTZD. Používá se zřídka, nejčastěji ve zpravodajství a na blozích — ani v těch případech se stejně většinou neuvádí čas. Podtržení lze samozřejmě zrušit CSS zápisem text-decoration: none.

q

Citace (angl. quote = citovat) podle definice HTML 4.0, svou funkcí velmi podobná tagu <cite> a <blockquote>. Liší se atributem cite, která obsahuje zdroj citace. Mozilla (Firefox), Webkig (Chrome) a Opera kolem obsahu tagu <q> dělají automaticky uvozovky. Internet Explorer (žádná verze snad kromě osmé) uvozovky nepřidává. Vzhled uvozovek lze ovlivnit CSS vlastností quote.

<q cite=“http://dusan.pc-slany.cz“>Bydlím ve Slaném, mám se dobře</q>

Tagy pro práci se zalamováním řádků

nobr

Zakázané zalomení řádku. Text se prostě nezalomí, i kdyby došel do konce místa, který řádek má. Používá se zejména v odkazových proužcích a sloupečcích, aby nebyly odkazy rozhozené přes dva řádky.V moderním webdesignu se používání tagu <nobr> nedoporučuje a nahrazuje se CSS stylem white-space: nowrap. Upřímně je však nutno přiznat, že ten styl ne vždy funguje spolehlivě, takže tag <nobr> rozhodně nepatří do starého železa.

wbr

Volitelné zalomení řádku. Je užitečné v situacích, kdy je v textu příliš dlouhé slovo, které by mohlo rozpadnout design stránky. V takovém případě se doprostřed slova může vložit tag <wbr>. Potom:

  • má-li slovo dost místa, zobrazí se pohromadě
  • nevešlo-li by se do svého prostoru, slovo se zalomí a rozdělí na dva řádky

Wbr je funkční ve všech prohlížečích. Býval to relikt z dob pravěkého HTML 1, ve verzích 3.2 a 4.01 byl zavrhnut, ale znovu se objevil ve specifikaci HTML 5.