Jak jsem slíbil minule, dnes se Vás budu snažit trochu seznámit s možnostmi formátování textu, které na 100% využijete při své tvorbě. K tomu bych ještě přidal, že je velmi dobré se podívat sem, jsou tam tagy hojně využívané při tvorbě webových stránek. Výborným pomocníkem může být i server interval.cz na který píšou zkušení autoři o různých problematikách internetových stránek, to už ale jsou trochu více odborně zaměřené stránky.
<a> – Odkazy
Jeden z nejdůležitějších tagů je určitě odkaz. Je to párový tag, a má plno atributů a použití. Používá se jako odkaz (když je vyplněn atribut href=““), jako určení kotvy na kterou můžete odkazovat (atr. name=““), pro práci s Javascriptem (onClick=““, onPress=““…), k zobrazení textu u myši (alt=“text“), v internetové reklamě atp. Klasický zápis je
<a href=“URL(víme co to je)“ [+-další atributy…] >Klikatelný obsah</a>
<a onclick=“return funkce();“>fungujeto?</a><script type=“text/javascript“>function funkce(){alert(“Funguje!! :)“)};</script>
ale jak už jsem řekl výše, pomocí atributů se dá přidat mnoho dalších informací, které můžou změnit chování tohoto tagu. Tento tag lze celkem pohodlně stylovat s CSS. Můžeme jej stylovat i s použitím prakticky všech tzv. pseudotříd, ale o tom ještě budeme mluvit o kousek později.
Hlavním významem je navigace webovými stránkami a orientace v nich. Pokud nebudete používat styly CSS pro stylování odkazů, tak by měly být podtržené a v modré barvě, navštívený odkaz ve fialovo-růžové barvě, a při přejetí myší asi jen zmizí podtržení. Pokud se pletu, prosím omluvte to, už dlouho jsem neviděl nestylovaný odkaz.
Odkazování (Links)
Odkazy jsou hojně využívány právě v navigaci po webu, a je to asi nejdůležitější součást tohoto tagu. Odkazuje se buďto na dokumenty (popř. jejich části) vlastního webu, nebo na jiné webové stránky, pomocí “ Relativních“ a “ Absolutních“ (nebudu vysvětlovat, bylo to v minulém díle) odkazů. K odkazování je nutný minimálně jeden atribut, a to je atribut “href“. Zapisuje se většinou jako první atribut v celém počátečním tagu, ale je mu to v podstatě jedno, kde bude zapsán, podobně jako i jiným atributům. Dokáže také v adrese předávat parametry, které potom mohou komunikovat s nějakým “serverovým scriptem“ nebo jinými.
<a href=http://sjiaphoto.euweb.cz/>Nějaký text</a> <a href=“./neco/kun.html“></a><a href=“#kotva“></a>
Kotvy (Anchor)
V překladu se používá slovo “kotva“, ale dalo by se asi použít slovo “záložka“. Jde o to že do tagu <a> přidáte atribut “ name“ který zajistí že po zadání názvu kotvy do adresy za křížek, posune se stránka na určité místo dokumentu, které je označeno tagem “ <a name=“nazevkotvy“> vybraný text</a>“. V tomto případě stačí zapsat “ <a href=“#nazevkotvy“>sem klikněte</a>“ a pomocí jednoduchého odkazu se dostanete zrovna k textu vybraný text mezi tagy <a> s vyplněným atributem “name“.
<a href=“#kotva“>odkaznakotvu</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<a name=“kotva“>Kotva</a>
Spolupráce s JS (JavaScriptem)
Spolupráci s JS zařizují tzv. události (Events). Umožňují sledovat určité události a pokyny, které uživatel udělá. Dokáže na uživatelův pokyn provést funkci, kterou si sami zvolíte. Nejpoužívanější jsou “ onClick“, “ onSubmit“, “ onLoad“ a plno dalších.
<h1>- <h6>
Tyto tagy (<h1>,<h2>,<h3>…<h6>) formátují text jako nadpisy. Můžete je stylovat, jako ostatní texty, ale musíte počítat s tím, že nadpisy v těchto značkách mají nějakou prioritu při vyhledávání ve vyhledávačích. Text mezi tagy <h1…6> totiž vyhledávače ukládají do databází jako nadpisy, a podle nich se hledá. Nemůžete je tudíž, použít kde chcete, jen na dobře cíleném místě a obsahu. Jsou párové, a číslo uvedené za písmenem h znamená prioritu nadpisu (nejvýznamnější 1, potom se význam a důležitost ubírá s vyšším číslem až do 6). Doporučuju používat.
<h1>Hlavní nadpis</h1><h2>Další nadpis</h2><h3>a tak by to mohlo jít dál…</h3>
<b>/<strong> – Tučný text
Párový tag, zajišťuje vypsání textu jako tučný (Tlustějši čáry). Při jeho používání můžeme použít dvě různé značky, které vypadají skoro stejně.
<strong>toto</strong> je skoro stejné jako <b>toto</b>
<i> – Kurzíva (italic)
Párový tag, formátuje text do mírného zešikmení a ztenčení čar textu. Používá se hlavně pro citace.
<i>Klasická kurzíva</i>
<u> – Podtržení
Podtrhne text mezi počátečním a koncovým tagem. Využívá se ke zvýraznění nově přidaného textu.
<u>Podtrženo, sečteno</u>
<s>/<strike> – Přeškrtnutí
Přeškrtne text který je mezi počáteční a koncovou značkou. Má dva zápisy, jeden doslovný a jeden zkrácený. Využívá se ke zvýraznění starého textu který je nahrazen novým.
<s>Je to blbě</s> tak to <strike>přeškrtneme</strike>
<sub>- Dolní index
Další párový tag, udělá z textu dolní index (malým písmem dole). Využijete jej při psaní chemických vzorců a dalších aktivitách podle potřeby.
<sup> – Horní index
Taktéž párový, má skoro stejný efekt jako dolní index, jen se umístí nahoru. Využívá se v matematice pro umocňování.
H<sub>2</sub><sup>I</sup>S<sup>I</sup>O<sub>4</sub><sup>-II</sup> je Kyselina 😉
<font> – Písmo
Párový tag umožňuje zvolit písmo, velikost, barvu textu mezi počáteční a koncovou značkou. Editory typu TinyMCE (z vlastní zkušenosti) místo něj používají tag <span> s vyplněným atributem style, ale můžete použít tento původně používaný tag.
<font family=“Times new Roman“>Toto je font Times new Roman</font>
<nobr> – Zakázané zalomení
Určitě je Vám známo že prohlížeč zalomí řádek tam, kde nemá dostatek prostoru. Tento tag zakáže zalomení řádku, a místo zalomení zobrazí vodorovný posuvník. Nedoporučuji, pokud si nechcete zkazit vzhled stránek, jen se mrkněte, co to udělá tady…
<nobr>Prostě se nezalomí, ani kdyby… d d d dd d d d dd d d d dd d d d dd d d d dd d d d dd d d d dd d d d dd d d d dd d d d dd d d d dd d d d dd d d d dd d d d dd d d d dd …se měl zbláznit</nobr>
<br/> – Zalomení řádku
Tento tag naopak zalomí řádek v místě jeho umístění. Není párový a na konec se píše lomítko. Nemá žádné povinné atributy, jestli vůbec nějaké má 😀 .
To byly formátovací tagy. Teď se pustíme do tagů blokových (alespoň já jim tak říkam). Formátovací tagy měnily vzhled textu volitelných částí textu. Blokové tagy rozdělují obsah do bloků, které se dají formátovat hromadně.
Text je sice krátký <br/>ale já si jej můžu za<br/>la<br/>mo<br/>vat<br/> jak chci.
<p> – Odstavec (paragraph)
Tag formátuje text mezi počátečním a koncovým tagem do odstavce. Odstavec je většinu oddělený od dalšího volným řádkem (resp. Mezerou) Může dobře pomocí CSS stylů změnit vzhled písma, pozadí prvku, zalamování řádků atp…
<p>odstavec</p><p> a další</p><p>je to tak ;)</p>
<div>
Tag umožňuje formátování bloku textu. Já jej využívám k rozdělení obsahu do bloků které potom styluji s CSS styly, hlavně pozadí a styl písma. Dělá za sebou a před sebou prázdný prostor.
<div>další takový</div><div>div světa v blocích</div>
<span>
Span je podobný jako div, s tím rozdílem že span můžete umístit vícekrát v jednom řádku, aniž by vzhled stránky nějak utrpěl. Já protože využívám editor TinyMCE, automaticky používám i tento tag k formátování změn textu jako změna barvy nebo fontu, pomocí atributu style.
<span style=“color: red;“> Toto je červená barva</span><span style=“color: blue;“>a modrá</span> <span style=“line-height: 60%;“>a můžu dělat mnohem víc…</span>
Tagů je plno, ale myslím, že jestli chcete znát i další, na internetu je mnoho návodů a stručnějších seznamů na toto téma. Já osobně jsem samouk, a všechno co umím jsem se naučil na webu. Zkuste strýčka Googla, ten to najde 😉