Pronikáme do hlubin HTML I

Pronikáme do hlubin HTML I.

Úvod

V této sérii několika článků nebo spíš příruček jsem se zaměřil na tu skupinu lidí, kteří by si rádi vytvořili své WWW stránky a nechtějí využívat žádný z programů, které to umožňují snadno a rychle, neboť tyto programy většinou neumožňují plnou kontrolu nad HTML kódem a někdy vytváří až zbytečně obsáhlý a nepřehledný HTML kód.

Pokud jste už zkušení znalci jazyka HTML, nezavrhujte hned ze začátku toto téma, protože i vám se může stát, že zde objevíte nový způsob, možnost, co použít při tvorbě stránek. Nikdo není vševědoucí a i mistr se může něco naučit. Tímto jsem chtěl naznačit, že i já nejsem mág, co se týče HTML, i přesto, že vytvářím tuto příručku. Pokud tedy u některých z kapitol budete znát jiné řešení, obměny či doplňky, neváhejte a podělte se s ostatními. Přeci jenom, příručku netvořím pro sebe, ale pro vás. Pouze berte v potaz to, že učit se zde budou i ti, kterým HTML moc neříká, tudíž nepoužívejte moc složité výrazy a zbytečné věci.

Jaká je koncepce příručky? Nemám zájem na tom, učit vás příkaz od příkazu. Zvolil jsem možnost, vést vás od začátku až do konce vytvoření stránek. Začneme od základů a budeme pokračovat až po jiné efektní způsoby, až na konec budete umět vytvořit kvalitní WWW stránky pouze pomocí textového editoru a své hlavy. Další poznatky, které zde nebudou použity, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

V čem vytvářet WWW stránky?

Existují tři možnosti, použít HTML editor, konvertor (převodník), nebo stránku napsat ručně.

HTML editor má tu výhodu, že vše vytvoříte snadno a rychle, navíc většinou obsahuje i náhled. Je dobré ho použít, pokud musíte v časové tísni vytvořit spousty stránek. I já sám ho v takových případech využívám. Jeho obrovskou nevýhodou je, že výsledný zdrojový kód HTML je pro vaše oko velice zmatený a často se stane, že díky tomuto se i sám program přestane ve stránce orientovat a začne dělat chyby, které občas už nemůže odstranit, spravit to můžete pouze vy, a to ručně, a dá to práci vyznat se v tom.

Konvertor. Nejsnadnější řešení, ale zároveň nejméně spolehlivé. Stačí vytvořit text, a konvertor už ho sám převede na WWW stránku. Problémem je zpětné editování, kdy začíná být obrovsky obtížné vyznat se ve struktuře dat. A je jasné, že konvertor přeci jenom nedokáže stránku podat tak, jak byste si přáli.

Poslední možností je stvořit si stránku sám, tj. napsat ji ručně. Je to nejspolehlivější metoda, kdy výsledný produkt vypadá úplně přesně tak, jak jsme si to představovali. Editace je také velice snadná, protože zdrojový kód jste si poskládali tak, jak vám to vyhovuje a bez problémů se v něm vyznáte.

V čem budeme tvořit my?

My budeme využívat třetího postupu. Potřebujete k tomu pouze nějaký textový editor, popřípadě program typu HomeSite a prohlížeč internetových stránek (Opera, Netscape Navigator, MS Internet Explorer atd.), který určitě máte. Z textových editorů používám obyčejný Poznámkový blok (Notepad), který je standardně ve Windows. Jinak k tvorbě HTML využívám programu 1^st Page 2000, který je velmi příjemný a profesionální. Při ukládání v Poznámkovém bloku stačí pouze použít příkazu „Uložit jako“, dále v poli „Uložit jako typ“ zvolit možnost „Všechny soubory (*.*)“ a do pole „Název souboru“ zadat název s koncovkou HTM nebo HTML (např. stranka.html). Nakonec stačí už jen uložit a spustit. Otevře se vám okno prohlížeče, a vy můžete psát zdrojový kód a na výslednou práci (nezapomeňte ukládat!!) se vždy podívat do prohlížeče.

Tipy:
Stránky raději ukládejte s koncovkou HTML, je to výhodnější.
Pokud vám prohlížeč neukazuje vámi provedené změny, přesvědčte se, že jste použili Obnovení (Refresh) stránky.

Poslední slovo

Nedoufejte v to, že se z vás po nastudování všech následujících kapitol okamžitě stane profesionální web-designér. K tomu potřebujete ještě mnoho praxe a hlavně zvládat další vymoženosti, jako jsou JavaScripty, ASP, PHP, CGI, grafické programy atd. Já se vám pouze snažím ulehčit cestu.

Kapitola 1. — Hlavní příkazy

Slov úvodem bylo dost a první díl by měl končit, ale ještě si dnes ukážeme několik hlavních příkazů.

Když chcete vytvořit WWW stránku, měli byste to dát vědět i prohlížeči. K tomuto kroku stačí použít dva příkazy (jinak řečeno tagy): <HTML> a </HTML>. Takto jste prohlížeči oznámili, že mezi těmito tagy je obsažen HTML kód, který on má zobrazit. Veškerý další text, který budete psát, pište mezi tyto dva uvedené příkazy. Ani ne nad ně, ani pod ně.

Dále můžete použít tzv. hlavičku. Zavádí se příkazy <HEAD> a </HEAD>. Její význam je jednoduchý. Určitě jste si všimli, že se v levém horním rohu zobrazují názvy stránek. Toho lze docílit tak, že mezi <HEAD> a </HEAD> vložíte ještě dva jiné příkazy: <TITLE> a </TITLE> a mezi tyto příkazy už můžete napsat libovolný text, který bude onen zmiňovaný název.

Příklad:

<HTML>

<HEAD>
<TITLE>Nový název stránky </TITLE>
</HEAD>

</HTML>

Tipy:
Všimněte si, že příkazy tvoří dvojice. Příkaz bez lomítka plus příkaz s lomítkem. Pamatujte si, že příkaz bez lomítka udává začátek kroku, který má prohlížeč vykonat, kdežto příkaz s lomítkem mu oznamuje, že vámi zadaný krok už skončil, tzn. ukončili jste příkaz. Používejte této metody, můžete se tak vyvarovat mnoha obtíží.
Zkoumavé tipy lidí přijdou na to, že není nutné zadávat příkazy <html> a </html> a používat příkazy pro hlavičku. Já ale říkám, že ne všechny prohlížeče dovedou udělat vše, tak jak má být, bez těchto příkazů, proto je lepší uvedené příkazy používat. Toto platí i pro všechny příkazy do budoucna.

Pro dnešek už končíme. Příště už rovnou bez úvodu přistoupíme k dalším kapitolám.

Pronikáme do hlubin HTML II.

Úvod

Dnešní úvod je pro ty, kteří ještě nečetli žádný z dílů této série. O co se tu jedná? Toto je příručka, jak celkem snadno pochopit HTML a naučit se ho užívat. Jaká je koncepce příručky? Nemám zájem na tom, abyste se učili příkaz od příkazu. Zvolil jsem možnost vést vás od začátku až do konce vytvoření stránek. Začneme od základů a budeme pokračovat až po jiné efektivní způsoby. A nakonec budete umět vytvořit kvalitní WWW stránky pouze pomocí textového editoru a své hlavy. Další poznatky, které zde nebudou použity, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

Kapitola 2. - META tag

V minulé kapitole jsme se dozvěděli, že existuje pojem tag. Také jsme si ukázali, jak lze zavést hlavičku WWW stránky a jakým způsobem ji pojmenovat. Dnes se budeme věnovat příkazu, na který bývá často zapomínáno, ale který je velmi důležitý a užitečný. My si ukážeme jeho nejčastější použití. Nezapomeňte, že tento příkaz musíte vložit někde mezi hlavičku, tj. tagy <HEAD> a </HEAD>. Jedině takto bude fungovat, při jiném způsobu umístění na něj nebude brát prohlížeč zřetel a bude ho ignorovat.

Příklad:

<HTML>

<HEAD>
<TITLE>Nový název stránky </TITLE>
<META>
</HEAD>

</HTML>

V příkladu jsme si ukázali umístění tagu, ale není to jeho pravá podoba. Nyní jsem zvolil tu variantu, že vám ukáži nejpoužívanější podoby tohoto tagu.

<META name='resource-type' content='document'>
Využívá se pro vyhledávací programy, pokud není uveden, je možné, že vyhledávací program se nerozhodne indexovat stránku, tzn. nepoužije ji jako hlavní, startovací stránku.

<META name='description' content='text popisující stránku'>
Takto můžete doplnit text, který bude popisovat vaši stránku, tj. zaměření, obsah atd. Je výhodné pro některé z vyhledávacích programů, které použijí uvedené informace pro určení popisu místa.

<META name='keywords' content='slova oddělujte čárkami'>
Zde můžete doplnit veškerá možná klíčová slova, která používají vyhledávací program k zařazení stránek do kategorií. Např. tvoříte stránky o počítačových hrách, tedy vypíšete slova: cheaty, cheats, číty, návody, recenze, preview, patche atd.

<META name='copyright' content='tady vložte text'>
Slovo copyright by vám mělo být známo, v češtině znamená něco jako 'práva vyhrazena' či 'zákaz kopírování'. Je na vás, jakým způsobem budete formulovat text. Může to být například: (C) Copyright 2000 by Jan Holý apod.

<META name='distribution' content='local nebo global'>
Tento tag má pouze dvě možnosti napsání content, a to local/global. Když použijete local, informujete vyhledávač, že stránka je pouze lokálního využití. Při použití global ho naopak informujete o tom, že stránka je globálním vstupním místem do vašich stránek.

<META name='author' content='jméno autora'>
Označíte toho, kdo je autorem stránky. Většinou tento tag využívají lidé, programy na vytváření stránek ho příliš často neuvádějí.

<META name='generator' content='název a verze generátora'>
Využívají vlastně jenom programy na vytváření stránek, jakým je např. FrontPage. Do content si dosadí název a verzi programu. Pro lidi, kteří si stránku napíší sami, nemá využití.

<META name='robots' content='příkazy'>
Uvedené informace mají význam pro vyhledávač. Content má vícero využití. ALL - zpracuje vše, FOLLOW - následuje odkazy, NOFOLLOW - nenásleduje odkazy, INDEX - indexuje stránku, NOINDEX - neindexuje stránku.

<META HTTP-EQUIV='Content-type' CONTENT='text/html; charset=windows-1250'>
Content umožňuje určit typ dat na stránce a kód. Typ dat je text/html, což je nejpoužívanější varianta a v našem případě ani nemusíme využívat jiný způsob. Až charset je nejdůležitější. Jedná se tu v podstatě o kódování stránky. Střední Evropa má nejpoužívanější dva způsoby, Windows-1250 a typy ISO, např. ISO8859-2. Jenže pro nás Čechy, kteří používají na stránkách fonty, které podporují české háčky, je nejlepší použít Windows-1250.

<META HTTP-EQUIV='Refresh' CONTENT='x; URL=adresa stránek'>
Umožňuje automatické obnovení stránky (refresh). Můžete buď obnovovat právě zobrazenou stránku, nebo příkaz použít k přechodu na stránku jinou, to záleží na tom, jakou napíšete adresu stránek. Čas obnovení se zadává v sekundách a doplňuje se místo x.

<META HTTP-EQUIV='Content-language' content='en-us'>
Další z funkcí, která je určena pro vyhledávače. Je to proto, že některé internetové vyhledávače mají řazení i podle použitého jazyka na stránce. Takto mu definujete jazyk (může být i čeština, slovenština) a on si už stránku zařadí do příslušné položky.

<META HTTP-EQUIV='Window-target' CONTENT='určení'>
Umožňuje určit, do kterého okna se zobrazí stránka. Využívá formát příkazu '_něco', stejně jako příkazy v běžném určení odkazů. Bohužel vám je tady nebudu zvlášť vypisovat, musíte si počkat, až budeme probírat kapitolu o odkazech, tam se vše dozvíte.

To by bylo pro dnešní vydání 'Pronikání' vše. Už umíme vytvořit základ WWW stránky a známe tag META. Příště se vrhneme přímo do úprav samotné stránky.

Pronikáme do hlubin HTML III.

Úvod

Tento úvod je pro ty, kteří ještě nečetli žádný z dílů této série. O co se v ní jedná? Toto je příručka, jak můžete celkem snadno pochopit HTML a naučit se ho užívat. Jaká je koncepce příručky? Nemám zájem na tom, abych vás učil příkaz od příkazu. Zvolil jsem možnost vést vás od začátku až do konce vytvoření stránek. Začneme od základů a budeme pokračovat přes jiné efektivní způsoby, až budete umět vytvořit kvalitní WWW stránky pouze pomocí textového editoru a vlastní hlavy. Další poznatky, které zde nebudou použity, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

Kapitola 3. - Vložení textu

Někteří by mi mohli vytknout, že jsem přeskočil ještě jeden důležitý příkaz, který tak trochu patří k pomyslné hlavičce HTML dokumentu. Já jsem se ale rozhodl ukázat vám ještě dříve alespoň možnosti textu, jeho vložení, vlastnosti atd. Je to způsobeno tím, že záměrně vynechaný příkaz ovlivňuje i obsah této kapitoly. A bude lepší, když jeho možnosti budete mít tu čest vidět pracovat (než něco psát a nevědět, zda nějakým způsobem funguje). Řekněme, že vám ukáži pouze jeho variantu bez nějakých bližších vysvětlení. Jedná se o tzv. tag <BODY> a </BODY>. Jeho umístění v HTML vidíte níže.

Příklad:

<HTML>

<HEAD>
<TITLE>Nový název stránky </TITLE>
</HEAD>

<BODY>

</BODY>
</HTML>

Text můžete vložit kamkoli do zdrojového kódu HTML, ale podmínkou je umístění mezi tagy <BODY> a </BODY>. Snad všechny webové prohlížeče vám text zobrazí i v případě, že nebude nijak označen. Stačí ho pouze vložit na výše uvedené místo. Takto text zobrazíte, ale nebudete ho moci přizpůsobit svým představám. Proto existují tagy <p> a </p>. Tyto označují text, se kterým už můžete pracovat.

Příklad:

<HTML>

<HEAD>
<TITLE>Nový název stránky </TITLE>
</HEAD>

<BODY>

<p>Toto je ukázka vložení textu na vaši WWW stránku.</p>

</BODY>
</HTML>

Tagů <p> a </p> můžeme ještě využít k zarovnání textu. <p align='left|center|right'>Toto je ukázka vložení textu na vaši WWW stránku.</p>. Jednotlivé příkazy znamenají:
left - zarovnání textu vlevo;
center - zarovnání textu na střed;
right - zarovnání textu vpravo.

Nyní přistoupíme k definování vlastností textu. Provedeme to tagy <font> a </font>. Ukázka by byla asi taková: <p><font>Toto je ukázka vložení textu na vaši WWW stránku.</font></p>. Ale nesmíme zapomínat, že i tento příkaz má další možnosti, kterými definuje vlastnosti a vzhled textu.

<p><font face='Arial CE, Verdana, sans-serif' size='1' color='#000000'>Toto je ukázka vložení textu na vaši WWW stránku.</font></p>

Face - určí prohlížeči, jaký druh fontu (písma) má použít. Většina tvůrců stránek počítá s tím, že lidé, kteří si stránky prohlížejí, vlastní operační systém Windows, proto používají fonty v něm obsažené. Značka CE, např. Arial CE, označuje středoevropskou verzi tohoto fontu, ale nezapomínejte na to, že ne všechny fonty jsou vyrobeny ve více jazycích. Já uvádím tři fonty za sebou. Není to nezbytností, mohli byste uvést třeba pouze Arial, text by pak byl psán arialem. Další se používají z toho důvodu, že koncový uživatel nemá udán font, proto prohlížeč použije druhý, popř. třetí v řadě. Např. takto: uživatel nemá font Arial CE, tudíž prohlížeč použije druhý uvedený, tj. Verdana. Pokud jste si někde na Internetu stáhli nějaký font, rozmyslete si jeho použití, protože ten, kdo si bude vaše stránky prohlížet, daný font nemusí mít. Proto se snažte využívat pouze standardních fontů, které jsou obsaženy ve Windows.

Size - udává velikost textu. Pokud tohoto příkazu nepoužijete, text se zobrazí ve své standartní velikosti. Jinak můžete používat čísel od jedné až (teoreticky) do nekonečna. Druhou možností je zadání velikosti pomocí např. size='12 pt' apod. Srovnání je zhruba takové:

1 - 8 pt
2 - 10 pt
3 - 12 pt
4 - 14 pt
5 - 18 pt
6 - 24 pt
7 - 36 pt a dále.

Color - určuje barvu zobrazovaného textu. Varianta #000000 je HTML kód barvy, tady se jedná o černou barvu. Takovéto využití je mnohem lepší, protože zajišťuje i použití vámi namíchaných odstínů. HTML kód jednotlivých barev a odstínů zobrazuje každý lepší grafický editor. Dalším použitím je napsání přímo názvu barvy, např. color='black', color='brown'. Tento způsob ale omezuje použití barev na pouze ty základní.

Další možností úpravy textu jsou speciální tagy, které se zadávají před a za napsaný text. Např. <p><font face='Arial CE, Verdana, sans-serif' size='1' color='#000000'><i><b>Toto je ukázka vložení textu na vaši WWW stránku.</b></i></font></p>. Je nepsaným pravidlem uzavírat tyto tagy v obráceném pořadí, než tomu bylo u zadávání, např. <i><b><small> se uzavřou takto: </small></b></i>. Výpis nejdůležitějších tagů:

<b> - udělá text tučným;
<strong> - totéž, ale v menší míře;
<i> - použije na text italiku, zkosení;
<sub> - dolní index;
<sup> - horní index;
<big> - velké písmo;
<small> - malé písmo;
<u> - podtržené písmo (nevyužívá se z toho důvodu, že odkazy bývají podtrženy, tudíž může dojít k záměně);
<strike> - přeškrtnuté písmo;
<tt> - neproporcionální písmo.

Dnešní příklad stránky:

<HTML>

<HEAD>
<TITLE>Zkušební stránka</TITLE>
<META name='description' content='zkušební stránka'>
<META HTTP-EQUIV='Content-type' CONTENT='text/html; charset=windows-1250'>
</HEAD>

<BODY>

<p><i><b><font face='Arial CE, Verdana, sans-serif' size='3' color='#2A7E7D'>Toto je ukázka vložení textu na vaši WWW stránku.</b></i></font></p>

</BODY>
</HTML>

Zobrazí toto:
Toto je ukázka vložení textu na vaši WWW stránku.

Dnes jsme se naučili vkládat a upravovat text. V příští kapitole se podíváme na možnosti odkazů. Později se vrátíme k již zmiňovanému tagu <BODY> a </BODY>.

Pronikáme do hlubin HTML IV.

Tento úvod je pro ty, kteří ještě nečetli žádný z dílů této série. O co se tu jedná? Toto je příručka, jak celkem snadno pochopit HTML a naučit se ho užívat. Jaká je koncepce příručky? Nemám zájem na tom, učit vás příkaz od příkazu. Zvolil jsem možnost vést vás od začátku až do konce vytvoření stránek. Začneme od základů a budeme pokračovat až po jiné efektní způsoby, až na konec budete umět vytvořit kvalitní WWW stránky pouze pomocí textového editoru a své hlavy. Další poznatky, které zde nebudou použity, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

Kapitola 4. — Odkazy

Snad nejdůležitější věcí, čím se odlišují HTML dokumenty od dokumentů normálních, jsou odkazy. Na principu odkazů funguje v podstatě celý Internet, který není nic jiného než hromada dat na určitých počítačích, spojených mezi sebou několika dráty a odkazujících na data jiná, v jiném počítači. Dnes si ukážeme, jak se odkazy vkládají, definují a jejich funkce. V pozdějších lekcích se k nim opět vrátíme a naučíme se i malý zbytek toho, co prozatím vědět nemusíte.

Odkaz, ale lépe nazýván hyperlink. Hyperlink definuje hypertextový odkaz na jiný WWW dokument nebo na jinou část téhož WWW dokumentu. Hypertextový odkaz se vkládá do WWW stránky pomocí tagu <a> a </a>, tzn. podobně, jako tomu bylo u textu.

Příklad:

<HTML>

<HEAD>
<TITLE>Nový název stránky</TITLE>
</HEAD>

<BODY>

<a>Odkaz</a>

</BODY>
</HTML>

Takto jsme si názorně ukázali, jak zavést odkaz do dokumentu. Pozor, takto uvedený odkaz ještě nic nedělá a prohlížeč ho zobrazuje jako text. Proto se zavádí atribut href a popř. target. Nyní si ukážeme možnosti jeho použití.

<a href='xxxxx' target='xxxxx'>Odkaz</a>

Možnosti použití href

Místo xxxxx dosadíte adresu dokumentu. Pokud máte nějaký dokument na vašem disku a stránky, které vytváříte, budou sloužit pouze pro lokální použití, zadejte adresu C:windowsplochaneco.html apod. Pozor, umístíte-li na Internet stránky, kde bude takto formulovaný odkaz, nic se nestane, prohlížeč ho nenalezne.

Pro Internet je toto použití. Adresa ve stylu https://www.novinky.cz, po kliknutí na odkaz se načtou Novinky.

Místo http může být použito ftp (jsou adresy serverů určených pro stahování), file (umožňuje stáhnutí zadaného souboru, popř. zobrazení souboru. Funguje jak pro lokální použití, tak i pro on line. Pokud ho nezadáte, prohlížeč udělá tuto funkci automaticky.), mailto: (otevře novou zprávu emailu s uvedenou email adresou. Zadává se ve tvaru mailto:neco@neco.cz. Pokud zadáte příkaz takto mailto:mpop@iol.cz?subject=Neco, v nově otevřené zprávě se doplní Předmět jako Neco.).

Nezapomeňte, že pokud si tvoříte stránky na vlastní web, vytvořte si na disku adresář, do kterého budete vše ukládat, vyvarujete se tak mnoha potíží a možných chyb v odkazech. Potom nemusíte zadávat adresu ve tvaru C:windows…, abyste si mohli stránky lokálně prohlédnout. V jednom adresáři stačí zadávat adresy použitelné rovnou pro Internet. Chcete-li skočit o adresář zpět, stačí zadat ../ (tímto jste skočili o adresář zpět, lze používat i vícekrát za sebou).

Možnosti použití target

_blank — zobrazí odkazovaný dokument do nového okna prohlížeče.
_self — zobrazí odkazovaný dokument v současném okně.
_parent — zobrazí odkazovaný dokument v rámu či okně, ve kterém je zobrazen nejbližší nadřazený.
_top — zobrazí odkazovaný dokument do celého okna prohlížeče (ruší rozdělení okna na rámy).

Pokud nepoužijete target, odkazovaný dokument se zobrazí v aktuálním okně.

Záložky

Ještě jedním použitím jsou tzv. záložky. Slouží k přemisťování se v aktuálně zobrazeném dokumentu a fungují na principu odkazů. Zadat se mohou kamkoli do dokumentu (ale mezi tagy <BODY> a </BODY>).

<a name='xxxxx'>text</a>

Text nemusíte doplňovat. Většinou mají záložky funkci u abecedních seznamů v dokumentu či přesun nahoru, dolů. Name, které dosadíte, musí být jedinečné, tzn. na stránce se už nesmí opakovat. Použití např. na stránce, která přesahuje přes viditelnou plochu monitoru (tj. vytvoří se šoupátko) zadejte záložku úplně nahoru celého dokumentu (text nevyplňujte, name zadejte např. nahore). Úplně dolů zadejte odkaz <a href='#nahore'>nahoru</a>. Pokud kliknete na odkaz, celá stránka se přesune nahoru (tj. k umístění záložky). Pokud byste chtěli odkazovat na jinou stránku a potom ještě na záložku v ní uvedenou, tak si postup můžete zkrátit příkazem

<a href='nazev_stranky.html#nazev_zalozky'> odkaz</a>

Tipy:
1. Pokud odkazy nefungují, pořádně si překontrolujte, zda jste odkaz zadali správně, popř. jestli ještě existuje odkazovaný dokument.
2. Vaši hlavní stránku si nazvěte index.html, protože většina serverů index zobrazuje automaticky, tzn. že ho nemusíte udávat do adresy. Je možné ještě použít index.htm, ale pozor, servery dávají vždy přednost verzi index.html.
3. Dávejte si velký pozor na to, jaké soubory umísťujete na váš volný prostor na Internetu. Snažte se, aby všechny soubory byly psány malými písmeny a taktéž do odkazů pište pouze malá písmena. To, že někteří lidé používají velká písmena, bývá většinou příčinou toho, že stránky nebo odkazy nefungují.
4. Odkazy můžete kombinovat s minulou lekcí, tj. s nastavením textu. Taktéž je můžete vkládat i do tabulek.
5. Dnešní příklad stránky si vytvořte u sebe na disku, ale použít ho musíte pouze, když budete připojeni k Internetu. Proč tomu tak je, byste po dnešní lekci už měli vědět. Odkaz, který uvádím, totiž není na vašem disku, ale na Internetu, a tudíž, logicky, nemůže se zobrazit (pokud se zobrazí, máte uvedenou stránky uloženou v TIF).

Dnešní příklad stránky:

<HTML>

<HEAD>
<TITLE>Zkušební stránka</TITLE>
<META name='description' content='zkušební stránka'>
<META HTTP-EQUIV='Content-type' CONTENT='text/html; charset=windows-1250'>
</HEAD>

<BODY>

<a href='https://www.seznam.cz' target='_blank'><font face='Verdana' size='2'>Odkaz</font></a>

</BODY>
</HTML>

Ukázka: Odkaz

Takže už umíte pracovat s textem a odkazy. Příště se už konečně dostaneme k tagu <BODY> a </BODY>.

Pronikáme do hlubin HTML V.

Tento úvod je pro ty, kteří ještě nečetli žádný z dílů této série. O co se tu jedná? Toto je příručka, s jejíž pomocí celkem snadno pochopíte HTML a naučíte se ho užívat. Jaká je koncepce příručky? Nemám zájem učit vás příkaz od příkazu. Zvolil jsem možnost vést vás od začátku až do konce vytvoření stránek. Začneme od základů a budeme pokračovat různými efektivními způsoby, až budete umět vytvořit kvalitní WWW stránky pouze pomocí textového editoru a své hlavy. Další poznatky, které zde nebudou použity, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

Kapitola 5. - Body

Konečně jsme se dostali až k tomuto příkazu, jehož probrání jsem sliboval už dvě lekce zpět. Důvod byl celkem pochopitelný a i vy byste po probrání dnešní lekce měli pochopit, proč tomu tak bylo. A snad, kdyby to někdo neodhalil, vězte, že BODY určuje použití barev textu a odkazů a já jsem vám nejdříve musel odhalit jejich použití. Potom jsem se teprve mohl vrátit k BODY. Vyznávám totiž styl názorného učení.

Každý si už musel všimnout, že v každém z příkladů používám tagy <BODY> a </BODY> a mezi ně píši zdrojový kód. V podstatě by to bylo zbytečné, protože když nedefinujete BODY (tj. 'tělo' dokumentu), je jeho psaní neužitečné. Ale já jsem chtěl, abyste si na něj zvykli a poté již zdlouhavě nepřemýšleli, kam ho máte umístit, co mezi něj vložit atd. Nezapomeňte, pokud chcete dosáhnout jeho funkčnosti na celé stránce, musíte všechen zdrojový kód napsat mezi <BODY> a </BODY>. Na druhou stranu je známo, že prohlížeč MS Internet Explorer zobrazí i neuzavřené tagy, ale např. v Netscape Navigatoru se vám to nepodaří, takže nezapomínejte tagy uzavírat.

<body bgcolor='barva' background='cesta' text='barva' link='barva' vlink='barva' alink='barva' topmargin='číslo' leftmargin='číslo'>

bgcolor - určuje barvu pozadí celé stránky. Místo 'barva' dosaďte barvu, kterou chcete použít.

background - pokud chcete použít na pozadí obrázek, použijte toto. Místo 'cesta' doplňte cestu, kde se daný obrázek nachází. Např. https://stranky.zde.cz/back.gif, nebo ../back.jpg apod. Ujistěte se, že obrázek na zadaném místě opravdu existuje, pokud ne, prohlížeč ho nezobrazí a použije pouze příkaz bgcolor, pokud je definován. Když ne, dosadí defaultní pozadí.

text - přiřadí veškerému textu na stránce barvu, kterou tady zadáte. Tzn.: když zvolíte bílou, všechen text bude bílý. Pokud budete chtít některé části textu zobrazit jinou barvou, stačí mu ji definovat přímo, tak jak jsme si to posali ve třetí kapitole.

link - všechny odkazy, které máte na stránce, se budou zobrazovat vámi vybranou barvou. Další možností odkazů se vytvářejí pomocí tzv. stylů, ale k tomu se dostaneme někdy později.

vlink - celým názvem VisitedLink, tj. už navštívené odkazy. Pokud se na stránce vyskytuje odkaz, který už jste někdy navštívili (a prohlížeč ho má stále v paměti), zobrazí se vámi zvolenou barvou. Je dobré, používat jinou barvu, než jste zadali u link, aby bylo zřejmé, co už návštěvník stránek viděl (a co ještě ne).

alink - ActiveLink. Jedná se o barvu aktivního odkazu. Ale skoro nikdo tento příkaz nepoužívá, protože prohlížeče nepřijdou na to, zda je odkaz aktivní, takže stejně použijí barvu definovanou v link.

topmargin - určí, jak daleko se bude zobrazovat obsah stránek od horního okraje prohlížeče. Pokud zadáte 0, bude hned u něho. Když ho nepoužijete, prohlížeč určí vzdálenost defaultně. Neplatí pro pozadí (background).

leftmargin - naprosto stejné, ale vzdálenost se určuje od levého okraje prohlížeče.

Dnešní příklad stránky:

<HTML>

<HEAD>
<TITLE>Zkušební stránka</TITLE>
<META name='description' content='zkušební stránka'>
<META HTTP-EQUIV='Content-type' CONTENT='text/html; charset=windows-1250'>
</HEAD>

<body bgcolor='#000000' text='#FFFFFF' link='#0000FF' vlink='#FF0000' topmargin='30' leftmargin='0'a>

<a href='https://www.seznam.cz' target='_blank'><font face='Verdana' size='2'>Odkaz</font></a>

<p><i><b><font face='Arial CE, Verdana, sans-serif' size='3' >Toto je ukázka vložení textu na vaši WWW stránku.</b></i></font></p>

</body>
</HTML>

Pokud jste vše dobře napsali, pak se vám zobrazí stránka, která bude mít černé pozadí, text bude kousek od horního okraje prohlížeče a těsně u levého. Barva textu bude bílá a ještě nenavštíveného odkazu modrá, pokud jste odkaz už někdy navštívili a prohlížeč ho má ještě v paměti, bude červená.

Kapitola 6. - doplnění META tagu

Pokud si vzpomínáte, META tag jsme již probírali. Říkali jsme si něco o použítí kódování a uvedli jsme si dva příklady, které se nejčastěji používají ve střední Evropě a hlavně v České republice. Rozhodl jsem se ukázat vám ještě několik dalších možností kódování, ale pamatujte si, že kódování, o kterém se bavíme, je pouze definicí pro prohlížeče, tzn. prohlížeč se automaticky přepne na uvedené kódování. Pro ty, kteří se někdy v budoucnu hodlají věnovat MySQL, musím uvést, že když píšete stránky v Notepadu (Poznámkový blok), stránka se vám uloží v kódování windows-1250. No, trošku jsem odbočil. Pokud tedy chcete na obyčejných HTML stránkách použít nějaké specifické znaky pro jiný jazyk, najděte si kódování onoho jazyka v následujícím přehledu:

evropské: windows-1250, iso-8859-2, x-mac-ce;
japonské: iso-2022-jp, x-sjis, x-euc-jp;
tradiční čínské: big5;
zjednodušené čínské: gb2312;
korejské: euc-kr;
řecké: windows-1253, iso-8859-7, x-mac-greek;
cyrilické: windows-1251, iso-8859-5, KOI8-R, x-mac-cyrillic.

Snažte se vždy jako první používat verzi windows-něco, potom ISO a až poté jiné možnosti. Pro češtinu zůstává nejlepší variantou kódování windows-1250. Nezapomeňte, že pro používání některých jazyků musíte mít nainstalovánu jejich podporu. Lze to udělat v Přidat nebo ubrat programy (v záložce Instalace Windows).

Pronikáme do hlubin HTML VII.

Tento úvod je pro ty, kteří ještě nečetli žádný z dílů této série. O co se tu jedná? Toto je příručka, která má pomoci celkem snadno pochopit HTML a naučit se ho užívat. Jaká je její koncepce? Nemám zájem učit vás příkaz od příkazu. Zvolil jsem možnost vést vás od začátku až do konce vytvoření stránek. Začneme od základů a budeme pokračovat přes různé efektivní způsoby, až budete umět vytvořit kvalitní WWW stránky pouze pomocí textového editoru a své hlavy. Další poznatky, které zde nebudou použity, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

Kapitola 7. - Obrázky

Dnes se dostáváme ke vkládání obrázků do vámi vytvořených WWW stránek. Nikdy nepodceňujte obrázky. Je to skoro to nejhlavnější, co utváří celkový vzhled vašich stránek, tedy design. Stránky, které na Internetu vypadají vkusně a jsou pěkně graficky zpracovány, vždy vzbuzují dojem profesionality a určité úrovně. Zapomeňte na typ stránek, kde je určeno pozadí a plácnuty obrázky, které vyvolávají odpudivý dojem, takový druh stránek je možné tvořit, když se člověk učí, ne když je vytváří.

Samozřejmě nemůžu pominout fakt, že člověk se učí stále. Tento fakt se plně ztotožňuje s principem tvorby stránek. I já jsem kdysi začínal oním zmiňovaným způsobem, který jsem před chvílí zatratil. Na druhou stranu musí říci, že jsem takto vzniklé stránky nikdy nezveřejnil a počkal jsem si, až dospěji k vyšším stupňům obratnosti. Nyní už obrázky na stránky pouze nevkládám, ale kombinuji je s pozadím, vyměřuji přesné velikosti - nakonec z toho vzniknout celkem vkusné stránky, ve kterých pozadí a obrázky přesně zapadají, a vytvářejí tak pěkný design.

Ještě než se dostaneme k tomu, jak obrázky vkládat, určím některá pravidla pro jejich používání. Vždy myslete na to, že obrázky se stahují, a proto se snažte vyvarovat používání obrázků, které jsou enormně veliké (co do počtu kilobajtů). Pokud máte obrázek velký, raději ho rozkouskujete na několik menších. Když kreslíte, ořezávejte obrázky tak, aby bezchybně zapadaly do pozadí stránek. Používejte formáty GIF (i neanimované) a JPG.

Vložení obrázku

<img src='cesta' width='číslo' height='číslo' alt='text' align='zarovnání'>

src - Zde zadejte cestu k místu, kde je umístěn příslušný obrázek. Funguje to na stejném principu jako u odkazů. Pozor! Pokud tam budete mít zadánu např. cestu C:slozkaobrazek.gif a umístíte stránky někam na web, obrázek se nepodaří načíst. Je to logické, z Internetu si nikdo neprohlédne obrázek, který máte pouze u vás na disku a odkazujete na něj právě sem.

width - Šířka obrázku v pixelech. Editory stránek typu Frontpage si obrázek změří sami a dosadí hodnotu automaticky. Pokud kreslíte obrázek, jehož délku máte zadánu v cm, musíte si přepnout do px (pixelů) a teprve tuto velikost dosadit. Tento příkaz nemusíte zadávat a prohlížeč obrázek zobrazí bezchybně, ale bude mu to déle trvat, protože si ho ještě musí změřit.

height - Výška obrázku v pixelech. Platí to samé jako u width.

alt - Alternativní text. Pokud ho zadáte, po najetí kurzorem myši na obrázek a chvilkové odmlce se zobrazí příslušný text. Rovněž nemusí být zadáno.

align - Jedná se o zarovnání obrázku na stránce. Když nezadáte, obrázek se umístí automaticky vlevo. Pokud chcete mít hned za obrázkem text, všimněte si, že se zobrazí u dolního rohu obrázku. Chcete, aby se text začal zobrazovat u horního rohu obrázku zleva nebo zprava apod.? Není problém, stačí použít některý z těchto příkazů:

.. left - Obrázek se zarovná vlevo vůči stránce, text bude u horního okraje.
.. right - Obrázek se zarovná vpravo vůči stránce, text bude u horního okraje.
.. top - Obrázek se zarovná nahoru vůči stránce.
.. texttop - Obrázek se zarovná nahoru vůči textu.
.. middle - Obrázek se zarovná doprostřed vůči lince textu.
.. bottom - Obrázek se zarovná dolů vůči textu.
.. absbottom - Obrázek se zarovná dolů vůči stránce.

Obrázek jako odkaz

Využití obrázku jako odkazu je velmi používáno (např. tlačítka) a také velmi jednoduché. Stačí k tomu využít znalosti odkazů a vše je hotovo. Takže pokud např. chceme, aby obrázek odkazoval na stránku www.novinky.cz, vše bude vypadat takto:

<a href='https://www.novinky.cz' target='_blank'><img src='zkouska.gif' width='105' height='50' alt='odkaz na Novinky' align='left' border='1'></a>

Takto vložený obrázek se stane odkazem - pokud na něj klikneme, načtou se nám Novinky. Všimněte si, že jsem použil příkazu, o kterém řeč nebyla, border='číslo'. Jeho využití připadá do úvahy pouze u obrázků, které jsou odkazem. Znamená to, že se kolem celého obrázku vytvoří okraj o tloušťce, kterou zadáte místo 'číslo'. Když zadáte nulu, okraj se neobjeví. Barvy okraje se použijí tak jako u odkazů, tj. ty, které jsou nastaveny v <BODY> (otázka minulé lekce).

Dnes zde neuvedu žádný příklad, protože nevidím důvod, proč bych měl. Vy si zkoušejte vytvářet stránky podle této i předcházejících lekcí. A hlavně kombinujte všechny příkazy a zkoušejte jejich možnosti. Příště bychom se měli (s největší pravděpodobností) naučit vytvářet tzv. seznamy.

Pronikáme do hlubin HTML VIII.

Tento úvod je pro ty, kteří ještě nečetli žádný z dílů této série. O co se tu jedná? Toto je příručka, jak celkem snadno pochopit HTML a naučit se ho užívat. Jaká je koncepce příručky? Nemám zájem na tom, učit vás příkaz od příkazu. Zvolil jsem možnost vést vás od začátku až do konce vytvoření stránek. Začneme od základů a budeme pokračovat až po jiné efektní způsoby, až na konec budete umět vytvořit kvalitní WWW stránky pouze pomocí textového editoru a své hlavy. Další poznatky, které zde nebudou použity, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

Seznamy 1.

Tyto seznamy (lists) by se daly přirovnat k odrážkám a číslování ve Wordu. Seznam vytvořený v textu působí vždy pěkným dojmem, nebojte se ho využívat. U textu, který budete chtít seřadit do několika bodů, je použití seznamu mnohem efektivnější. Hned na začátku si pamatujte, že tag <ol> představuje číslované seznamy a tag <ul> nečíslované.

Číslovaný seznam

<ol type='a,A,i,I,1' start='hodnota' continue compact></ol>

Musí obsahovat alespoň jeden prvek <li> (vysvětlím později).

type — způsob číslování položek seznamu, máme několik možností:
… a — malými písmeny abecedy.
… A — velkými písmeny abecedy.
… i — římskými číslicemi (použijí se malá písmena).
… I — římskými číslicemi (použijí se velká písmena).
… l — arabskými číslicemi (implicitní)

start — počáteční hodnota číslování položek seznamu. Pokud použijete např. seznam s arabskými čísly, ale chcete začít od 5, tak zadáte místo „hodnota“ „5“ apod.

continue — zajišťuje návaznost na předchozí seznam (browser si ponechává aktuální hodnotu).

compact — požadavek na úsporné provedení seznamu (záleží na typu browseru).

Příklad

<html>
<head>
<title>Seznamy (Kapitola VIII)</title>
</head>

<ol type='1' start='3' compact>
<li>Zkouška01</li>
<li>Zkouška02</li>
<li>Zkouška03</li>
<li>Zkouška04</li>
</ol>

</html>

Zobrazí se nám seznam, který se začne počítat od čísla 3, kvůli tomu, že hodnotu start jsme nastavili 3.

Nečíslovaný seznam

<ul type='disc,circle,square' compact></ul>

Musí obsahovat alespoň jeden prvek <li> (vysvětlím později).

type — vzhled grafických symbolů zahajujících položky seznamu, máme několik možností:
… disc — plné tečky (implicitní).
… circle — prázdná kolečka.
… square — čtverečky.

compact — požadavek na úsporné provedení seznamu (záleží na typu browseru).

Příklad

<html>
<head>
<title>Seznamy (Kapitola VIII)</title>
</head>

<ul type='circle' compact>
<li>Zkouška01</li>
<li>Zkouška02</li>
<li>Zkouška03</li>
<li>Zkouška04</li>
</ul>

</html>

Příště dokončíme vlastnosti a použití seznamů a navíc si řekneme, jak na stránky aplikovat běžící text.

Pronikáme do hlubin HTML IX.

Tento úvod je pro ty, kteří ještě nečetli žádný z dílů série. O co se tu jedná? Toto je příručka, jak celkem snadno pochopit HTML a naučit se ho užívat. Jaká je její koncepce? Nemám zájem na tom, abyste se učili příkaz od příkazu. Zvolil jsem možnost vést vás od začátku až do konce vytvoření stránek. Začneme od základů a budeme pokračovat přes různé efektivní způsoby, až budete umět vytvořit kvalitní WWW stránky pouze pomocí textového editoru a své hlavy. Další poznatky, které zde nebudou použity, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

Seznamy (2. díl)

Minule jsme si začali popisovat vlastnosti a použití seznamů. Aplikovali jsme prvek <li>. Obyčejně je standardně používán v číslovaných a nečíslovaných seznamech, ale lze ho použít i samostatně. Jeho vlastnosti při samostatném použití jsou stejné, jako tomu bylo u nečíslovaného seznamu. Jediným rozdílem je, že se zarovnává přímo k nastavenému levému okraji bez mezery, jak tomu bylo u číslovaných a nečíslovaných seznamů.

<li type='disc,circle,square' compact></li>

type - vzhled grafických symbolů, zahajujících položky seznamu, máme několik možností:
disc - plné tečky (implicitní)
circle - prázdná kolečka
square - čtverečky
compact - požadavek na úsporné provedení seznamu (záleží na typu browseru)

Příklad

<html>
<head>
<title>Seznamy (Kapitola IX.)</title>
</head>

<li type=circle compact>Zkouška01</li>
<li type=circle compact>Zkouška02</li>
<li type=circle compact>Zkouška03</li>
<li type=circle compact>Zkouška04</li>

</html>

Rejstříkový seznam

Používá se pomocí prvku <dl>. Ve svém použití odpovídá nečíslovanému seznamu a prvku <li>, ale liší se od nich tím, že sice funguje jako seznam, ale nepředchází mu žádná odrážka. Lze ho použít samostatně či ve spojitosti s číslovaným a nečíslovaným seznamem.

<dl title='název' compact></dl>

title - název prvku
compact - požadavek na úsporné provedení seznamu (záleží na typu browseru)

Příklad

<html>
<head>
<title>Seznamy (Kapitola IX.)</title>
</head>

<dl title='prvek01' compact>Zkouška01</li>
<dl title='prvek02' compact>Zkouška02</li>
<dl title='prvek03' compact>Zkouška03</li>
<dl title='prvek04' compact>Zkouška04</li>

</html>

Tipy:
Vyplňte vždy všechny hodnoty, ať ulehčíte práci prohlížeči a také svůj čas.
Nezapomeňte, že prvky <li> a <dl> lze používat samostatně nebo v kombinacích s jinými seznamy.
Pokud chcete vnořit další seznam do seznamu, stačí místo textu vložit další prvky.
Vlastnosti textu v seznamech můžete upravovat podle pravidel obyčejného textu.

Následující díl tohoto průvodce se bude týkat běžícího textu.

Pronikáme do hlubin HTML X.

Tento úvod je pro ty, kteří ještě nečetli žádný z dílů této série. O co se tu jedná? O příručku, s jejíž pomocí můžete celkem snadno pochopit HTML a naučit se ho užívat. Jaká je její koncepce? Nemám zájem učit vás příkaz od příkazu. Zvolil jsem možnost vést vás od začátku až do konce vytvoření stránek. Začneme od základů a budeme pokračovat přes různé efektivní způsoby, až budete umět vytvořit kvalitní WWW stránky pouze pomocí textového editoru a vlastní hlavy. Další poznatky, které zde nebudou použity, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

Běžící text

Kdysi byl běžící text hojně využíván. Pokud si dobře pamatuji, jeho možností lidé využívali k informacím o nové aktualizaci či alespoň oživení svých statických stránek. Dnes můžete varianty na tento styl najít na mnoha časopisech, které tak v řádku informují o 'žhavých' novinkách. Bohužel k tomu už nevyužívají běžícího textu. Nejčastěji používanou metodou tohoto zobrazení jsou scripty, ať už se jedná o ASP, či PHP, ale k tomu se možná dostaneme v jiném seriálu. Tato série je o kódu HTML, respektive o jeho základech, takže si dnes ukážeme, jak na své stránky aplikovat běžící text a jak ho následně upravit do odpovídající podoby. Běžící text zavedeme do stránek pomocí tagu <marquee>. Jako obvykle samozřejmě opakuji: nezapomeňte ho i uzavírat, tzn. na závěr uveďte </marquee>. Uzavírací tagy používáme z toho důvodu, že je tak kód HTML koncipován (pokud tag neuzavřete, Netscape Navigator ho nemusí zobrazit). Jiné je to s MS Internet Explorerem, který vám zobrazí snad všechno, ale pro pořádek si zvykněte tagy uzavírat. Nyní zpět k běžícímu textu.

<marquee bgcolor='' direction='' align='' width='' height='' behavior='' scrollamount='' scrolldelay='' loop='' title=''>TEXT</marquee>

bgcolor - udává barvu pozadí běžícího textu, tzn. barvu pole. Použít můžete klasické slovní označení barvy, tj. anglické výrazy pro barvy (blue, black apod.), nebo použijte lepší variantu, kód barvy (např. #00FF00 aj.). Kód barvy můžete zjistit v jakémkoli lepším grafickém programu či v některém z náhledových HTML editorů.

direction - směr, kterým se běžící text bude pohybovat. Na výběr máte ze dvou možností:
left - text se bude posunovat zprava doleva. Tento pohyb je implicitní, tzn. pokud direction nepoužijete, text bude automaticky vykonávat tento pohyb;
right - posun textu zleva doprava. Pokud chcete docílit tohoto druhu pohybu, direction už použít musíte.

align - tato možnost zarovná pole běžícího textu vůči stránce, ale je velice ošemetná. Až probereme tabulky, doporučuji využít zarovnávacích vlastností buňky a běžící text vložit do ní:
left - vodorovné umístění na levý okraj;
right - vodorovné umístění na pravý okraj;
top - horní okraj běžícího textu bude zarovnán s horním okrajem řádku;
middle - střed běžícího textu bude zarovnán na střed okolí;
bottom - dolní okraj běžícího textu bude zarovnán se spodním okrajem řádku;
texttop - horní okraj běžícího textu bude zarovnán s horním okrajem textu na řádku;
absmiddle - střed běžícího textu bude zarovnán na střed řádku;
baseline - dolní okraj běžícího textu bude zarovnán na účaří řádku;
absbottom - dolní okraj běžícího textu bude zarovnán se spodním okrajem řádku.

width - požadovaná šířka pole běžícího textu. Udává se v pixelech (např. když dosadíte číslo 80, bude to znamenat 80 pixelů - bodů obrazovky). Druhou variantou je udání velikosti v procentech , např. 80 % (obrazovka má 100 %).

height - viz width, ale pro výšku pole.

behavior - způsob pohybu běžícího textu:
scroll - pohyb začíná s prázdným polem. Dle zadané možnosti direction text vyjede buď vpravo, nebo vlevo. V okamžiku, kdy všechen zadaný text odjede z okna, pohyb se opakuje;
slide - jako scroll, pouze text dojede na konec, pohyb skončí na konci textu, zmizí z okna a vše se opakuje;
alternate - pohyb tam a zpět, směr podle direction.

scrollamount - číselné udání rychlosti pohybu běžícího textu.

scrolldelay - zpomalení rychlosti pohybu běžícího textu. Zároveň zpomalení při načítání.

loop - počet opakování pohybu textu. Zadává se číselně. Při zadání 'infinite' je cyklus opakování nekonečný.

title - název pole běžícího textu. Funguje stejně jako alternativní text (alt) u obrázku.

Příklad

<html>
<head>
<title>Běžící text (Kapitola X.)</title>
</head>

<marquee bgcolor='#c0c0c0' direction='right' width='400' height='25' behavior='scroll' scrollamount='10' loop='infinite'><font face='arial' size='3'><b>Zkušební text</b></font></marquee>

</html>

Tento příklad zobrazí pole běžícího textu o šířce 400 pixelů a výšce 25 pixelů. Text se objeví v prázdném poli, až celý zmizí, objeví se znovu. Počet opakování pohybu je nekonečný. Rychlost pohybu textu je 10 a text se bude pohybovat zleva doprava, protože je zadán údaj direction. Text uvnitř se řídí pravidly obyčejného textu, tzn. vše, co známe z kapitoly, kde jsme probírali text, zde můžeme použít. V příkladu je text psán fontem Arial při velikosti 3 a je tučný díky tagu <b>. Pozor, pokud zadáte velikost textu větší, než je výška pole, pole se automaticky zvětší.

Takže to by bylo k běžícímu textu vše. V příští kapitole začneme probírat tvorbu tabulek. Připravte si nervy.

Pronikáme do hlubin HTML XI.

Tento úvod je pro ty, kteří ještě nečetli žádný z dílů této série. O co se tu jedná? Toto je příručka, jak celkem snadno pochopit HTML a naučit se ho užívat. Jaká je koncepce příručky? Nemám zájem na tom, učit vás příkaz od příkazu. Zvolil jsem možnost, vést vás od začátku až do konce vytvoření stránek. Začneme od základů a budeme pokračovat až po jiné efektní způsoby, až na konec budete umět vytvořit kvalitní WWW stránky pouze pomocí zdrojového kódu. Další poznatky, které zde nebudou objasněny, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

Tabulky — 1. část

Hned zkraje by bylo záhodno říci, že tabulky se k nám dostaly až ve třetí verzi HTML. Nejsou tedy nijak zvlášť staré, ale vynahrazují si to tím, jak moc jsou využívané. Ano, pokud jimi dobře vládnete, jsou mocným nástrojem. Velmi rychle se jejich používání zažilo a dnešní tvůrci www stránek si bez nich pomalu nedokáží představit život.

Tabulky byly původně určeny k vkládání do textu. Lidé jich však začali používat právě naopak. Dnes se většinou celý obsah stránek vkládá do tabulek, které se takto používají jako formátovací nástroj. Používají se tak proto, že zajišťují největší možnosti úpravy textu i jiného obsahu. Onu pokročilejší formu úpravy zajišťuje uspořádání do sloupců a řádků, které se dají nastavit mnoha atributy. V praxi je zcela běžné vkládání do buněk buňky další, popřípadě i další tabulky.

Tedy, základním prvkem tabulky je buňka. Z nich jsou složeny řádky a z řádků pak celá tabulka. Struktura buněk se však neřídí žádnými výjimečnými pravidly, hlavně záleží na vás, jak je nastavíte a pokud je sestavíte podle dobrého „algoritmu“.

Vždy důrazně připomínám, abyste nezapomínali uzavírat tagy. Dnes to platí dvojnásob. Pokud neuzavřete tabulku či buňky, může se stát, že výsledný produkt bude velmi odlišný od toho, který jste čekali. Na závěr tohoto úvodu bych už jen dodal, že vytvořit kvalitní tabulku se vším všudy, tak aby byla použitelná a zajistila vám celkový design stránek i s jeho obsahem, stojí mnoho úsilí a nejlepším řešením je tabulku si napsat v čistém zdrojovém kódu. Zmiňuji se o tom proto, že mnoho náhledových editorů prostě nezvládne vytvořit složité tabulky tak, aby bezchybně fungovaly.

<table>

<table border='' cellpadding='' cellspacing='' cols='' width='' height='' align='' bgcolor='' bordercolor='' bordercolorlight='' bordercolordark='' background='' title=''> … Obsah … </table>

border — určuje tloušťku vnějšího obrysu (rámečku kolem tabulky). Velikost je implicitně v pixelech. Pokud vynecháte, tabulka bude „neviditelná“, zobrazí se bez čar. Stejného efektu docílíte, když zadáte 0.

cellpadding — nastavuje velikost mezi okrajem buňky tabulky a jejím obsahem.

cellspacing — nastavuje velikost mezery mezi jednotlivými buňkami tabulky.

cols — specifikuje celkový počet sloupců tabulky. Takto se usnadní práce browseru, který nemusí určovat počáteční zobrazení tabulky.

width — nastaví šířku tabulky v pixelech, absolutní zadání. Když použijete za číslem značku procenta %, je hodnota zadána relativně a tabulka se zobrazí procentuálně vzhledem k šířce okna prohlížeče. Nejvyšší možná hodnota relativního zadání je width='100%'. Pokud je buňka prázdná, může se stát, že browser bude nastavenou velikost ignorovat. Pro nápravu stačí vložit nějaký objekt, znak či mezeru (v html se mezera určí   ).

height — viz width, ale pro výšku.

align — zarovnání tabulky vůči okolí. Lze zadat LEFT (vlevo), RIGHT (vpravo) nebo CENTER (zarovnání na střed).

bgcolor — stanoví implicitní barvy pozadí na řádku. Zadává se buď anglickými výrazy pro barvy (není nejlepším řešením), nebo kódem barvy (např. #00ffbb).

bordercolor — barva rámu. Zadávání barev je stejné jako u bgcolor.

bordercolorlight — zjednodušeně řečeno, parametr nastaví barvu pro vrchní a levý okraj tabulky, spodní a pravý okraj buňky. Vyruší zadaný parametr bordercolor u těchto okrajů.

bordercolordark — parametr nastaví barvu pro spodní a pravý okraj tabulky, vrchní a levý okraj buňky. Vyruší zadaný parametr bordercolor u těchto okrajů.

background — pozadí tabulky. Zadejte odkaz na obrázek, který chcete použít jako pozadí.

title — nastaví název tabulky, podobně jako alternativní text.

<tr>

Tagem <tr> zahájíte řádek tabulky. Jeho nejčastější využití je hned pod tagem <table> a uzavření </tr> před uzavřením tabulky </table>. Mezi tyto tagy se vkládá obsah tabulky, tj. jednotlivé buňky.

<tr align='' valign='' bgcolor='' background='' bordercolor=''> … Obsah … </tr>

parametry — všechny parametry mají stejný význam a funkčnost, jako u <table>.

valign — definuje způsob vertikálního zarovnání obsahu (buňky).
… top — zarovnání k hornímu okraji buňky.
… middle — zarovnání doprostřed buňky (standardní hodnota).
… bottom — zarovnání k dolnímu okraji buňky.

Pokračování příště.

Pronikáme do hlubin HTML XII.

Tento úvod je pro ty, kteří ještě nečetli žádný z dílů této série. O co se jedná? Toto je příručka, jak lze celkem snadno pochopit jazyk HTML a naučit se ho užívat. Jaká je koncepce příručky? Nemám zájem učit vás příkaz od příkazu. Zvolil jsem možnost vést vás od začátku až do konce tvorby stránek. Začneme od základů a budeme pokračovat přes různé efektivní způsoby, až budete umět vytvořit kvalitní WWW stránky pouze pomocí zdrojového kódu. Další poznatky, které zde nebudou objasněny, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

Tabulky (část 2.)

V minulém dílu této série jsme začali téma tabulek, takže dnes si ho dokončíme.

<td>

Celou dobu se zde zmiňuji o buňkách, takže se k nim konečně dostáváme. Vězte, že vkládaný text či obrázky musíte vkládat do buněk, jen tak je zajištěna funkčnost.

<td align='' valign='' width='' height='' colspan='' rowspan='' bgcolor='' background='' bordercolor=''> Obsah </td>

parametry - všechny parametry mají stejný význam a funkčnost jako u <table> a <tr>

nowrap - zakáže automatické dělení řádků uvnitř buňky; v takové buňce budou konce řádků jen tam, kde je vyznačíte pomocí <br>

colspan - počet sloupců, přes které se buňka roztáhne směrem doprava; zadává se číselný údaj, kolik se v řádku (<tr>) vyskytuje sloupců, přes které chcete buňku roztáhnout

rowspan - stejná funkce jako u colspan, ale buňka se zobrazuje svisle shora dolů (přes řádky buněk); použijete-li rowspan, musíte na něj pamatovat i v následujících sloupcích; v nich je třeba vynechat buňku ve sloupci, do kterého zasahuje roztažená buňka z předchozího řádku

<th>

Některé buňky mohou nést nadpisy řádků nebo sloupců, pro ně použijeme místo <td> párovou značku <th>, která označuje hlavičku sloupce nebo řádku. Zpravidla je vzhledově odlišena od ostatních buňek HTML.

<th align='' valign='' width='' height='' colspan='' rowspan='' bgcolor='' background='' bordercolor=''> Obsah </th>

parametry - všechny parametry mají stejný význam a funkčnost jako u <table>, <tr> a <td>.

<caption>

Pro vytvoření nadpisu (titulku) celé tabulky použijeme párové značky <caption> (měla by se vyskytnout vždy uvnitř <table>); vhodné umístění je buď před zahájením prvního řádku, nebo za koncem posledního.

<caption align='' valign='' title=''> název </caption>

parametry - všechny parametry mají stejný význam a funkčnost jako u <table>, <tr> a <td>.

<Dnešní příklad>

<html>
<head>
<title>Tabulky</title>
</head>

<body> <table border='1' bordercolor='#000000' cellspacing='1' cellpadding='2' width='200' height='300' bgcolor='#8080ff' align='center'>

<caption align='center'>Titulek tabulky</caption>

<tr>
<td align='left'>01</td>
<td align='center'>06</td>
<td align='right'>11</td>
</tr>

<tr>
<td align='center'>02</td>
<td align='center'>07</td>
<td align='center'>12</td>
</tr>

<tr>
<td align='right'>03</td>
<td align='center'>08</td>
<td align='left'>13</td>
</tr>

<tr>
<td align='center'>04</td>
<td align='center'>09</td>
<td align='center'>14</td>
</tr>

<tr>
<td align='left'>05</td>
<td align='center'>10</td>
<td align='right'>15</td>
</tr>

</table>

</body>
</html>

Pozor - nezapomeňte všechny párové značky uzavírat. Pokud byste totiž neuzavřeli např. některou z buněk ve složitější tabulce, můžete se dočkat nemilého překvapení. Raději používejte všechny velikostní a zarovnávací parametry, ulehčíte práci browseru a stránka se rychleji načte.

Poznámka - pokud si dnešní důležitou lekci pozorně projdete i s příkladem, určitě pochopíte, podle čeho je příklad postaven a jak funguje. Lepší nápovědu pro vás bohužel nemám. Nejlepším řešením je zkoušet tvořit nové a nové tabulky - časem si zvyknete a naučíte se tvořit naprosto 'dokonalé' vlastní tabulky. Můžete si pomoci i některým z HTML editorů, které mají vestavěnou funkci tvorby tabulek (1st Page 2000, Homesite ). Alespoň tak rychleji přijdete na to, jak vše funguje.

V příští lekci začneme zase s novým tématem - s formuláři.

Pronikáme do hlubin HTML XIII.

Tento úvod je pro ty, kteří ještě nečetli žádný z dílů této série. O co se tu jedná? Toto je příručka, jak celkem snadno pochopit HTML a naučit se ho užívat. Jaká je koncepce příručky? Nemám zájem na tom, učit vás příkaz od příkazu. Zvolil jsem možnost vést vás od začátku až do konce vytvoření stránek. Začneme od základů a budeme pokračovat až po jiné efektní způsoby, až na konec budete umět vytvořit kvalitní WWW stránky pouze pomocí zdrojového kódu. Další poznatky, které zde nebudou objasněny, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

Znovu barvy

Dnes se opět vracíme k tématu barev. Jelikož jsem se už jednou okrajově o barvách zmínil, neměl by to být takový problém. Vracíme se k nim proto, že předešlá letmá zmínka mi nepřipadá jako dostačují, takže dnes podrobněji.

Pokud chceme zpestřit své stránky, můžeme použít barev. Vlastně, nejedná se jen o zpestřující element, ale můžete si všimnout, že barvy a jejich různé odstíny se používají snad na všech stránkách. Sice to není nezbytností, ale je to velmi používané. HTML dovoluje nastavit barvu pozadí stránky, textu a barvu odkazů. Než se však podíváme na to, jak změnit barvu jednotlivých částí stránky, řekneme si, jak se v HTML definují barvy.

Barvy můžeme aplikovat do HTML buď podle anglického názvu barvy, nebo její přesnou definicí v RGB (Red Green Blue). V HTML jsou předdefinována jména šestnácti barev: bílá (white), černá (black), šedá (gray), stříbrná (silver), červená (red), zelená (green), modrá (blue), žlutá (yellow), světlá modrozelená (aqua), tmavě modrozelená (teal), tmavá modrá (navy), purpurová (purple), odstín červeni (fuchsia), světlá zelená (lime), kaštanová (maroon) a olivová (olive).

Pokud chceme používat druhý způsob, musíme si uvědomit, že barvy v počítači se skládají kombinací tří základních barev, červené, zelené a modré barvy. To znamená, že když se rozhodneme např. pro hnědou barvu, musíme tyto základní barvy namíchat v určitém poměru. Většinou za vás tuto problematiku řeší grafické programy, které poměr barev určí samy. Funguje to tak, že vám program nabídne několik už nastavených barev a pole barev, kde se pohybujete myší a on sám dolů vypíše RGB kód barvy a její intenzitu. Postup funguje i naopak, tj. že zadáte RGB kód, a on vám vygeneruje barvu. Podíl barev se pohybuje v hodnotách od 0 do 255. Potom je tu intenzita, která se dosazuje automaticky při zadání hodnoty (zase tu platí opačné pravidlo, zadání intenzity má za následek změnu hodnoty podílu). Takže, hodnota 255 má maximální intenzitu, a čím blíže k 0, tím je intenzita menší. 0 je samozřejmě intenzita minimální.

Takže, HTML kód barvy můžeme vyjádřit jako trojici čísel, které odpovídají intenzitě základních tří barev. Zapisuje se jako #RRGGBB (RR — červená, GG — zelená a BB — modrá). Jedná se o hexadecimální zápis intenzity určité barvy. To znamená, že např. červenou barvu můžeme zapsat jako red nebo #ff0000, zelenou barvu green nebo #00ff00 apod. Pokud chcete používat jiné než předdefinované barvy a odstíny, nezbývá vám nic jiného, než použít typu zobrazení #RRGGBB. Kvalitní grafické programy vám tento kód vždy ve výběru barev zobrazí. Z vlastní zkušenosti vím, že např. Paint Shop od verze pro 5.0 tuto funkci má.

Celá stránka

Jak určit barevné pozadí stránky, jsme si už říkali. V těle dokumentu (<body>) musíte doplnit hodnotu bgcolor. To znamená, že výsledná úprava bude vypadat takto: <body bgcolor='#000000'> nebo také <body bgcolor='black'>. Tímto se mění pozadí stránky na černé. Taktéž jsme si ještě ukazovali, jak dosadit barvu použitého textu na stránce: <body bgcolor='#000000' text='#ff0000'> nebo také <body bgcolor='#000000' text='red'>. Stejně to funguje pro odkazy (LINK, VLINK a ALINK).

Část textu

Pokud máte v <body> definovanou barvu textu pro celou stránku a chcete, aby se určitá část zobrazila jinou barvou, říkali jsme si možnosti COLOR, kterou dosazujeme do tagu <font>. Ukázka: <font color='#00ff00'>TEXT</font>, také <font color='green'>TEXT</font>. Text uzavřený v tomto tagu bude zobrazen zeleně i přesto, že v těle dokumentu máte definovanou jinou barvu.

Pravidla pro www stránky

Jako příponu souborů svých HTML dokumentů používejte .html. Zaběhlým standardem na Internetu je tato přípona. Příponu .htm použil Microsoft, který tímto krokem ruší onen zaběhlý standard, který po mnoho let fungoval. Vycházejte také z toho, že většina serverů na Internetu i prohlížečů hledá nejprve soubory s příponou .html a až poté hledá jako alternativu soubory s příponou .htm.

Jako hlavní stránku, se kterou budete pracovat, si nazvěte index.html. Další názvy stránek jsou už podružné. Když nezadáte prohlížeči přesnou adresu i s názvem souboru, automaticky hledá soubor s názvem index.html.

Veškeré soubory, které se budou vašich stránek týkat, nazývejte vždy malými písmeny. Taktéž, když na ně budete v HTML dokumentu odkazovat, napište do uvedené cesty shodný název, co se velikosti písmen týče. Pokud by se tak nestalo a vy byste na serveru měli soubor názvu stranka.html a do odkazu v HTML dokumentu uvedli Stranka.html, STRANKA.HTML či nějak podobně, server může nahlásit chybu, že daný soubor nebyl nalezen, a nezobrazí ho. Pozor na to, když si dané soubory budete prohlížet u sebe na disku. Některé programy zobrazují všechna začáteční písmena souborů velkým, takže si to budete muset zkontrolovat někde, kde se toto nestává.

Co se týče kódování stránek pomocí <meta http-equiv='content-type' content='text/html; charset=windows-1250'> (o kterém už byla řeč v předešlých dílech) jsem byl několikrát nařčen za větu, že toto kódování máte upřednostňovat před typem ISO. Někteří chytří lidé mi dokonce několikrát řekli, že to je naprostý blábol. Je pravdou, že je i velmi používaná verze kódování ISO-8859-2 pro češtinu, která se doporučuje upřednostňovat před windows-1250, ale stejně, názory na používání obojího kódování jsou rozdílné a když to zlehčíme, žádné z nich není ideální. Přesto bych vypustil názory, že ISO-8859-2 má naprostou přednost před windows-1250. Nejlepším řešením bude, když si přečtete na stránkách https://www.cestina.cz/cestina/whyISO.html podrobnou zprávu o ISO-8859-2 a tam i s tématem související názory.

Při používání barev doporučuji používat dnes zmiňovaný formát hexadecimalního zápisu. Pokud použijete zápis názvem barvy, může nastat situace, že barva nebude správně interpretována.

Při používaní odkazů v HTML dokumentu je zapisujte celou adresou (https://www.odkaz.cz apod.). Pokud použijete pouze www.odkaz.cz bez http, prohlížeč začne hledat na adrese, kde se nacházíte, www.odkaz.cz. Např. takto: začne hledat https://www.adresa.cz/www.odkaz.cz, což je nesmysl.
Když odkazujete na soubory, které máte umístěny na jednom serveru a patří ke stránkám, adresujte pomocí relativních odkazů. Tzn. nacházíte se na lokálu stránek www.ssa.cz a soubor je v adresáři IMAGES, tak nezadáte https://www.ssa.cz/images/soubor, ale pouze ../soubor . Urychlíte tak svou práci a druhotnou věcí je, že takto můžete pracovat v jednom adresáři na vašem disku a potom jeho obsah jen zkopírovat na server bez toho, abyste museli předělávat odkazy.

V HTML dokumentu uvádějte úplně nahoru před veškerý obsah tuto specifikaci: <!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0 Transitional//EN'>. Takto jste prohlížeči natvrdo řekli, že se jedná o HTML dokument a on s ním bude podle toho nakládat. Vyhnete se tak možné nesprávné interpretaci dokumentu některými browsery. Číslo 4.0 zde znamená verzi používaného HTML. Ještě je možné doplnit 3.2 (a místo Transitional doplnit Final). Verze HTML 3.2 se ještě dnes pořád ve velkém měřítku používá a mnoho lidí píše své stránky kombinací 3.2 a 4.0 a nemůžou si to vynachválit. Samozřejmě, tento fakt nejde pod nos mnohým z rádoby profesionálů, co se HTML týče. Bohužel, nic s tím nenadělají, ale postupem času se to vykompenzuje samo. Už teď čekám reakce těchto „profesionálů“, takže díky.

Pronikáme do hlubin HTML XIV.

Tento úvod je pro ty, kteří ještě nečetli žádný z dílů této série. O co se tu jedná? Toto je příručka, jak celkem snadno pochopit HTML a naučit se ho užívat. Jaká je koncepce příručky? Nemám zájem na tom, učit vás příkaz od příkazu. Zvolil jsem možnost vést vás od začátku až do konce vytvoření stránek. Začneme od základů a budeme pokračovat až po jiné efektní způsoby, až na konec budete umět vytvořit kvalitní WWW stránky pouze pomocí zdrojového kódu. Další poznatky, které zde nebudou objasněny, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

Rámy (FRAMES)

Kdysi se lidem z Internetu zdálo, že HTML stránka, která zabírá celou plochu okna, je trochu na obtíž a snažili se přijít na nějaké řešení. Objevili, či zprovoznili rámy. Toto řešení jim pomohlo rozdělit jedno okno prohlížeče na několik oken, které jsou na sobě nezávislé, ale efektně spolu dokáží spolupracovat. Každé jednotlivé okno se odkazuje na obsah z jiného souboru, samozřejmě je možné odkazovat na stejný soubor co se týče obrázků apod., ale odkazovat na stejnou HTML stránku je poněkud nesmyslné a ruší se tím v podstatě význam rámů.

Zdrojový text hlavní stránky obsahuje pouze popis pro rozložení rámů na stránce a odkazuje na soubory, které se v nich mají zobrazit, nejčastěji HTML stránky. Tímto jsme si vlastně řekli, že hlavní stránka slouží jako jakýsi rozdělovač, a obsah je už na odkazovaných stránkách v rámech.

Co by měla obsahovat stránka, která slouží pro definici rámů? Bezpochyby uzavřena nahoře a dole <html> </html>. Taky nezapomeňme na záhlaví <head> </head>. Tělo celého HTML dokumentu (body) nemusí být uvedeno, je vcelku zbytečné. Použití by naskýtalo pouze pro použití v prohlížečích, které nepodpodrují rámy, ale jelikož je dnes opravdu na světě (tedy alespoň hlavně u nás) nejvíce rozšířen MS Internet Explorer a Netscape Navigator v novějších verzích, tak nezobrazení rámů nehrozí. No a tím velmi podstatným prvkem je párový tag <frameset> </frameset>, který prohlížeči oznamuje, že okno má být rozděleno na několik částí v zadaných směrech, vodorovně či svisle.

U tohoto tagu <frameset> se aplikují dva atributy, cols a rows. První zajišťuje rozdělení stránky na sloupce a druhý na řádky. Obsahují zadání velikostí, které se oddělují čárkami. Většinou stačí pro obyčejné potřeby využít pouze jeden z nich, nicméně to nevylučuje použití obou, potom se stránka rozděluje na mřížku, jejíž vzhled závisí na posloupnosti zadávání těchto atributů.

Možnosti zadání vymezující velikosti jednotlivých rámů mohou být zadány třemi způsoby. První možností je zadání velikosti v procentech plochy monitoru. Rámy se tak vždy upraví do přijatelné podoby, ale pořád ještě nemusíme vyhrát, protože se může stát, že odkazovaná stránka do rámu je prostě graficky větší, a proto se nám zobrazí šoupátko, abychom si mohli prohlédnout i zbytek (pokud šoupátka zakážeme, stránku jednoduše neuvidíme). Standardním a osvědčeným způsobem je zadání velikosti natvrdo v pixelech. Bohužel, musíte počítat i s tím, že ne každý používá stejné rozlišení monitoru jako vy a výsledná stránka s rámy nemusí naprosto odpovídat vaší představě. Proto je tu přijatelnější řešení. Zadání velikosti můžeme zkombinovat s *. Systém práce je potom takovýto: nejprve se přiřadí prostor vymezený zápisem v procentech či pixelech. Až je prostor přidělen, místo, které zbylo, je přiděleno rámu se zápisem velikosti *.

Příklady provedení rámů

Není nad názorné ukázky, a proto jen zběžně několik nejpoužívanějších kombinací.

<frameset cols='100,200,*'>
obsah tří rámů
</frameset>

<frameset cols='50%,50%'>
obsah dvou rámů
</frameset>

<frameset rows='20%,*'>
obsah jednoho rámu
<frameset cols='300,500'>
obsah dvou rámů
</frameset>
</frameset>

<frameset rows='100,150,*' cols='50%,50%'>
obsah šesti rámů
</frameset>

Vlastnosti jednotlivých atributů

<frameset rows='' cols=''></frameset>

atributy jsou už popsány nahoře, slouží k definování počtu a velikosti rámů.

<frame name='' src='' marginwidth='' marginheight='' noresize scrolling=''>

name — velice důležité, určíme jméno rámu, na který se potom budeme odkazovat. Lépe nepoužívat české výrazy (háčky a čárky).

src — adresa stránky, která má být obsahem rámu.

marginwidth — vzdálenost mezi textem a okrajem rámu ve vodorovném směru (v pixelech).

marginheight — vzdálenost mezi textem a okrajem rámu ve svislém směru (v pixelech)

noresize — zákaz měnit velikost rámu uživatelem.

scrolling — opatření rámu šoupátky. Pokud zadáme yes, budou zadána. no, nebudou v rámu zobrazena. auto, dosadí se automaticky, pokud budou potřeba (když např. návštěvník bude mít menší nastavení apod.).

Používat, či nepoužívat, toť otázka.

Chvíli po vzniku rámů se lidé začali hádat, zda je dobré rámy používat, nebo je to zbytečné. Někteří se rámů horlivě zastávají, někteří je odsuzují, a vlastně se nikdy na ničem neshodnou. Osobně se více přikláním k té straně, která tvrdí, že občas by se rámy používat měly, v některých případech opravdu usnadňují tvorbu stránek.

Nejčastěji se rámy používají k trvalému zobrazení neměnných nabídek, pomůcek, bannerů apod. V tom případě to opravdu usnadňuje jak práci tvořitelům stránek, tak i těm, kteří stránky navštěvují. Ale nezapomínejme na to, že hlavní je výsledný produkt! Pokud přijde návštěvník na stránku, kde je nějaké menu v rámu, a ono se mu nezobrazí celé, ale bude muset posouvat šoupátkem, efekt stránek se ruší a návštěvník se stává dezorientovaným. Raději než toto, tak rámy nepoužívat.

Pro dnešek zatím končíme, příště si ještě ukážeme několik dalších atributů a pár příkladů.

Pronikáme do hlubin HTML XV.

Tento úvod je pro ty, kteří ještě nečetli žádný z dílů této série. O co se tu jedná? Toto je příručka, jak lze celkem snadno pochopit HTML a naučit se ho užívat. Jaká je koncepce příručky? Nemám zájem učit vás příkaz od příkazu. Zvolil jsem možnost vést vás od začátku až do konce vytvoření stránek. Začneme od základů a budeme pokračovat přes různé efektivní způsoby, až budete umět vytvořit kvalitní WWW stránky pouze pomocí zdrojového kódu. Další poznatky, které zde nebudou objasněny, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

Rámy - pokračování

V minulém dílu této série jsme začali povídání o rámech. Vysvětlili jsme si, co je to rám, jak se rámy používají, zda je výhodné (či nevýhodné) je používat, a také jsme si popsali atributy, které můžeme použít. Dnes si ukážeme několik názorných příkladů.

Příklad:

<html>
<head>
<title>Rámy - 1. příklad</title>
</head>

<frameset rows='30%,*'>
  <frame src='01.html' name='prvni'>
<frameset cols='150,*'>
   <frame src='02.html' name='druhy'>
   <frame src='03.html' name='treti'>
</frameset>
</frameset>

</html>

Takže v příkladu se okno rozdělí na tři rámy, tak jak to vidíte na obrázku. Do každého rámu se má zobrazit odkazovaná stránka, ale aby se tam zobrazila, musí existovat a jmenovat se tak, jak na ni odkazujete. Tzn. v prvním rámu odkazujeme na 01.html, proto ve stejném adresáři musí existovat stránka s tímto názvem. Pokud neexistuje, rámy se sice vytvoří, ale uvnitř vám prohlížeč nahlásí, že stránku nelze zobrazit. Na příkladu si hlavně všimněte, že tag <frameset> lze kombinovat.

Atributy tagu <frame> jsme si uvedli v předešlém dílu. Nebylo by na škodu ještě zmínit, že každý rám se odděluje čarou. Pokud chcete docílit toho, že tyto čáry (okraje) nebudou vidět, musíte zadat frameborder='0'. Takto jste docílili toho, že okno je sice rozděleno na rámy, ale okraje nejsou vidět, takže jedna stránka se dotýká druhé. Pokud je v okně definovaných více rámů, musíte zadat tento atribut ke všem, které přiléhají, pokud ne, okraje tam budou stále.

Odkazování do rámu

Je zřejmé, že rámy vytváříme proto, abychom do nich pomocí odkazu otvírali jiné stránky. Vlastně celý princip a vznik rámů je na tomto založen. Pokud si vzpomenete, na začátku minulé lekce jsem říkal, že rámy lidem pomohly rozdělit okno prohlížeče na více oken, která jsou na sobě nezávislá, ale dokáží spolupracovat.

Hlavní věcí pro odkazování do rámu je atribut name, který (jak jsme si už řekli a popsali) bychom měli uvádět do tagu <frame>. Tímto atributem si rám pojmenujeme a (když na něho odkazujeme) odkazujeme na ono jméno. Dosáhneme toho pomocí atributu target, který musíme vložit do nějaké odkazu.

Např.
<a href='03.html' target='prvni'>odkaz</a>
- tímto jsme do nějaké stránky vložili odkaz, který otevře stránku 03.html do rámu, který má atribut name='prvni'.

Další možnosti target:
_top - odkazovaná stránka či objekt se zobrazí do současného celého okna, zruší všechny rámy.
_blank - otevře nové okno prohlížeče a zobrazí se v něm.
_self - zobrazí se v tom stejném rámu, kde se nalézá odkaz. Není nutné používat, protože když se target u odkazu v rámu nezadá, tak automaticky po kliknutí provede tuto možnost.
_parent - otevře se v nejbližším nadřazeném rámu, který je samozřejmě definován pomocí frameset.

Když na stránce v rámu budete mít několik odkazů a všechny by měly odkazovat do stejného rámu, nemusíte target dopisovat ke každému odkazu, ale můžete zadat do hlavičky (ohraničená pomocí <head></head>) parametr <base target=''>, do uvozovek dopíšete určení rámu a všechny odkazy se tam budou odkazovat. Ale pozor, když zadáte v takto určené stránce k některému odkazu zvlášť target, tento odkaz bude mít jako nadřazený tuto specifikaci, bude se odkazovat tam, kam mu zadáváte, a určení v hlavičce bude ignorovat.

Takže to by bylo, co se týče framů, z mé strany vše. Na vás zůstává otázka, zda rámy používat, či ne.

CSS - Cascading Style Sheets

V jazyku HTML jsme už probrali několik způsobů, jak textu přiřadit vámi vybranou barvu, jak změnit barvu pozadí, jak formátovat text apod. Výhodou těchto elementů je zefektivnění výsledné stránky. Jejich důrazný zápor spočívá v tom, že abychom mohli u několika prvků definovat zvláštní nastavení, musíme je opětovně zadávat. Jedno ulehčení je možno spatřit v atributu <body>, kde lze nastavit jednotnou barvu pro všechen text na stránce, barvu odkazů atd. Z minulých lekcí víme, že ho poté lze u jednotlivých atributů přebít tak, že vlastnost nastavíme přímo pro ten určitý atribut.

Lidé jsou vynalézaví, což je jedním z důvodů, proč přišly na svět kaskádové styly (dále jen CSS). Už odpadá problém opětovného zadávání, používání <body> a všeobecně získáváme více použitelných vlastností k jednotlivým atributům. Hlavní výhodou CSS je to, že vlastnosti stačí zadat pouze jednou a poté na ně jen odkazovat.

Pokusím se vám co nejjednodušší formou vysvětlit princip CSS a zároveň vám i ukázat několik příkladů. Pro začátek ukázka jednoduchého uvedení CSS.

p

Nyní si CSS popíšeme podle uvedeného vzoru. Styl se skládá ze dvou částí - selektoru a deklarace. V uvedeném příkladu je selektor p a deklarace je to, co je uzavřeno ve složených závorkách, tj. z vlastnosti color a hodnoty yellow. Selektorem označujeme daný styl, na který se poté můžeme odkazovat. Buďto použijeme nějakého výrazu, nebo např. p. Z předcházejících lekcí si pamatujeme, že p je atribut pro odstavec, takže, jakýkoli text uzavřený do odstavce se bude chovat podle přiřazených vlastností. Místo p lze použít všechny selektory HTML. Pokud bychom si měli popsat všechny existující vlastnosti, bylo by to na dlouho, proto se budeme muset spokojit jen s těmi nejdůležitějšími, kterým brzy budu věnovat prostor.

Jak dostat CSS na svou stránku?

Je krásné, že něco jako styly existuje, nicméně se musíme naučit zapojit styly do naší/vaší stránky. Existují tři nejběžnější způsoby. Uvedu je v pořadí četnosti jejich využívání.

<link rel='stylesheet' type='text/css' href='../styly.css' title='Styly pro stránku'>

Princip spočívá v tom, že si vytvoříte zvláštní soubor, který bude obsahovat pouze definice jednotlivých stylů, které chcete využívat, a pomocí tohoto řádku se na něj na stránce odkazujete. Soubor si můžete vytvořit buď ve speciálním programu na tvorbu stylu, či v obyčejném textovém editoru. Odkazovací řádek musí být umístěn nejlépe v hlavičce stránky (ohraničena atributy <head></head>.
Zde jsou pouze dvě vlastnosti, které budeme měnit. Jedná se o odkazovaní href, kam dopíšeme zadání místa, kde se daný soubor nachází, a samozřejmě název, title.

<style type='text/css'>
   p
  
</style>

Obdobný způsob jako předchozí, ovšem s tím rozdílem, že styl nedefinujete do zvláštního souboru, ale přímo do zdrojového kódu stránky (do hlavičky celého HTML dokumentu).

<p style='color: yellow'>Text</p>

Poslední využívaný způsob. Styl v tomto případě nedefinujeme do hlavičky dokumentu, ale zapisujeme přímo do atributu. Rozdíl je v tom, že v předchozích případech jsme definovali styl pro všechny atributy toho označení, které se vyskytuje v dokumentu.

Je možné, že bychom omylem narazili na prohlížeč, který nepodporuje styly, je proto lepší psát definici takto:

<style type='text/css'><!--
   p
  
--></style>

Pokud použijeme <!-- --> a narazíme na prohlížeč, který styly nepodporuje, díky těmto značkám bude kód ignorovat a nic nepokazí. Když se s tímto kódem setká prohlížeč, který styly zná, bez problémů je přeloží.

Příště pokračujeme dále v kaskádových stylech.

Pronikáme do hlubin HTML XVI.

Nezbytný úvod

CSS — pokračování

CSS a barvy

Barva pro text

Barva a obrázek na pozadí

CSS a text

Obecně k písmu

Rodina písma

Obecná rodina písma

Několik standardních rodin

Nezbytný úvod

Tento úvod je pro ty, kteří ještě nečetli žádný z dílů této série. O co se tu jedná? Toto je příručka, jak celkem snadno pochopit HTML a naučit se ho užívat. Jaká je koncepce příručky? Nemám zájem na tom, učit vás příkaz od příkazu. Zvolil jsem možnost, vést vás od začátku až do konce vytvořením své Home Page pomocí zdrojového kódu. Poznatky, které zde nebudou objasněny, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

CSS — pokračování

V minulém díle této série jsme začali povídání o kaskádových stylech. Vysvětlili jsme si, co jsou to styly, k čemu se používají, předvedli jsme si ukázku principu CSS, zjistili jsme, jak styly dostat do HTML dokumentu, a ukončili jsme to zmínkou o tom, jak se vyvarovat chybného překladu CSS ve starších prohlížečích. Dnes budeme v CSS pokračovat.

CSS a barvy

Barva pro text

Pomocí kaskádových stylů lze určit, jakou barvu bude využívat daný prvek implicitně. K tomu použijeme vlastnost color. Její hodnotu zadáme stejně, jako jsme ji zadávali normálně v HTML, tzn. buď anglickým názvem barvy, nebo hexadecimálním zápisem. Ve 13. kapitole této série jsou vlastnosti a možnosti barev dostatečně rozebrány.

Např.:

p
nebo
p

V obojím zadání dosáhneme toho, že všechen text uzavřen v HTML dokumentu do <p> bude zobrazen modrou barvou, pokud nezadáme jiný styl přímo u textu lokálně. To by znamenalo, že by se použila jiná barva, ta, která by byla definovaná přímo u <p>. Samozřejmě, všechen další text v ostatních <p> by se zobrazoval modře. Proč tomu tak je, jsem popisoval v minulém dílu.

Barva a obrázek na pozadí

Další zadání barev se týká pozadí celé stránky (potažmo i tabulky). Docílíme toho pomocí vlastnosti background-color. Pokud chceme zadat barvu pozadí stránky, musíme styl zapsat elementem body. (Je obdobou použití bgcolor v tagu <body>. Tímto už postupně zjišťujeme, že díky stylům se tag <body> ze zdrojového kódu HTML začíná postupně vytrácet.) Když už jsme u pozadí, je na místě říci, jak definovat obrázek na pozadí stránky pomocí stylů. Provedeme to vlastností background-image. Zadání hodnoty se už ale od HTML trochu liší: url(HTTP adresa obrázku). A najednou zde máme situaci, kdy se nám mohou vzájemně přebíjet dvě vlastnosti, tzn. zadání pozadí barvou s obrázkem na pozadí. V této situaci platí stejné pravidlo jako v HTML: Obrázek na pozadí má přednost před barvou, takže prohlížeč na pozadí dosadí obrázek. Ale pořád je lepší ve stylu zadat i vlastnost pro barevné pozadí. Pokud by obrázek z nějakého důvodu nebyl na zadané adrese dostupný, prohlížeč použije na pozadí definovanou barvu.

Např.:

body
body
nebo
body

Jak vidíte na příkladu, hodnoty, které chcete použít pro stejný element, se mohou psát do jednoho elementu, nemusí se pracně rozepisovat. Nezapomeňte, že takto zapsané hodnoty se svými vlastnostmi se od sebe oddělují středníkem.

CSS a text

Obecně k písmu

Z HTML si pamatujeme, že vlastnosti textu použitého na stránce se definovaly pomocí tagu <font>. Když prozatím pomineme nějaké nastavení velikosti apod., dostaneme se až k nastavení druhu písma, které se má použít. V HTML jsme si mohli zvykat na to, že jsme zadali jeden druh písma (např. Verdana), a tím to pro nás skončilo. Jenže ono je to trochu jinak. Uživatel, který si stránku prohlíží svým prohlížečem a se svým nastavením systému, nemusí dojít ke stejnému závěru co se vzhledu týče. Prohlížeč totiž zjistí, že zadané písmo (font) je Verdana, a tak začne (nejčastěji) ve Windows hledat tento font. Až ho najde, zobrazí text napsaný tímto písmem. Pokud ale zadané písmo nenalezne, zobrazí text dle obecného nastavení, které nastavuje uživatel prohlížeče, a výsledné zobrazení se vůbec nemusí podobat tomu vašemu.

Rodina písma

Abychom zabránili takové „kolizi“, je nutné si uvědomit, že existuje jakási rodina písma, jak v HTML, tak i v CSS. Nejlépe udělám, když vám to „názorně“ popíši. Do definice písma nezadáte pouze Verdana, ale celou rodinu písma. Zadáte např.: arial, tahoma, helvetica. Prohlížeč se pro zobrazení stránky pokusí použít písmo Arial. Pokud písmo s tímto názvem nebude k dispozici, použije se písmo Tahoma, no a když ani to nebude k dispozici, použije písmo Helvetica. Takto si vlastně zajišťujeme, že víme, jak bude stránka „opravdu“ vypadat u všech uživatelů. Rodiny písma sice můžete kombinovat dle vlastního uvážení, ale už existují sestavené „trojky“ vzájemně si podobných písem.

Obecná rodina písma

Nevěřím, že by snad někdy mohlo dojít k situaci, že by uživatelův systém nevlastnil ani jedno z uvedených písem, ale výjimka potvrzuje pravidlo, jak se říká. Proto existuje i tzv. obecná rodina písma.

mono — neproporcionální písmo.
serif — patkové písmo.
sans-serif — bezpatkové písmo.
fantasy — ozdobné písmo.
cursive — ozdobná kurzíva.

Zadává se nakonec, za uvedená písma. Zajistí to, že pokud se prohlížeči nepodaří nalézt určené druhy písma, použije se libovolné dostupné písmo, které spadá do definice. Takže pokud zadáváte patková písma, nakonec ještě zařaďte serif, aby bylo zajištěno, že po nenalezení všech vámi uvedených písem se alespoň použije libovolné existující patkové písmo, které parametry odpovídá obecnému písmu, a text bude vypadat zhruba tak, jak jste chtěli.

Několik standardních rodin

arial
tahoma
arial, tahoma
tahoma, arial
courier new, courier, mono
times new roman, times, serif
arial, helvetica, sans-serif
georgia, times new roman, times, serif

Pokračování textu a CSS v příští kapitole.

Pronikáme do hlubin HTML XVII.

Nezbytný úvod

Dnešní úvod

CSS a text - pokračování

Zadání písma

Další vlastnosti textu

Síla textu

Velikost textu

Styl textu

Varianta textu

Nezbytný úvod

Tento úvod je pro ty, kteří ještě nečetli žádný z dílů této série. O co se tu jedná? Toto je příručka, jak celkem snadno pochopit HTML a naučit se ho užívat. Jaká je koncepce příručky? Nemám zájem učit vás příkaz od příkazu. Zvolil jsem možnost provést vás od začátku až do konce vytvořením své 'home page' pomocí zdrojového kódu. Poznatky, které zde nebudou objasněny, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

Dnešní úvod

V minulých dvou dílech jsme probírali kaskádové styly (CSS). Už jsme si pověděli o zařazení CSS do vaší stránky a o barvách a textu. Když se vrátím právě k textu, tak jsme si jen pověděli o tzv. rodinách písma. Dnes, po krátké odmlce způsobené vánočními svátky, budeme pokračovat dále.

CSS a text - pokračování

Rodiny písma už znáte. Nyní už zbývá jen prozradit, jak bychom zmíněnou metodu aplikovali na stránku. Jednou z možností, která se nám naskýtá, je použití nastavení určitého písma pro celou stránku. Jak se dají nastavovat vlastnosti stránky pomocí CSS, jsme už nakousli.

Zadání písma

body

V tomto případě je to jednoduché. Víme, že když zadáváme v CSS vlastnosti pro body, funguje vše podle stejného principu, jako je tomu u HTML dokumentu, kde vlastnosti definujeme v <body>. Výraznou výhodou v CSS je, že je to mnohem efektivnější a máme více možností. Takže veškerý obsah, respektive veškerý text, který je v HTML dokumentu uzavřen v tagu <body> </body>, se bude chovat dle zadaného stylu. Znamená to, že bude zobrazen tímto zadaným fontem. Pokud jste nečetli minulý či předminulý díl, doporučuji přečíst.

Jednu možnost tedy máme za sebou, nazval bych to snad nějakou hromadnou definicí vlastnosti písma pro celý dokument. Další věcí je, že byste jistě rádi, aby se veškerý text, který bude na vaši stránkách v odstavci, tzn. uzavřen v tagu <p> </p>, choval jinak než ostatní text uvedený na stránce. Lehká věc, prostě to deklarujeme.

p

A hotovo. Od teď se veškerý text v dokumentu, který uzavřete do tagu <p> </p>, bude zobrazovat dle zadaného fontu.

Další možností je podobný způsob, jako tomu bude u poslední uvedené varianty, která uzavře kapitolu. Také zde platí stejné postupy zapsání stylu, jak byly rozebrány v kapitole první.

.pozdrav

Teď už stačí text v dokumentu uzavřít do bloku, který se bude chovat podle těchto vlastností. Uzavřeme ho takto:

<span class='pozdrav'>Ahoj čtenáři, jak se vede?</span>

CLASS je třída (jak vlastně zní i český překlad). My jsme si definovali pozdrav a použili jsme ho na text Ahoj čtenáři, jak se vede?. Je samozřejmé, že si jich můžete zavést 'nekonečně' mnoho a také se mohou jmenovat, jak chcete. Ovšem nepoužívejte českou diakritiku (tzn. žádné háčky, žádné čárky).

A teď ještě zmínit poslední vhodnou možnost. Představujte si zároveň se mnou Na svých stránkách máte opravdu hodně textu. Všechen je psán jedním druhem písma a vám to tak vyhovuje, ale rádi byste jeden řádek změnili tak, aby byl naprosto odlišný od toho ostatního. A už víte (respektive si to ještě dnes probereme), že CSS poskytuje mnoho dalších vlastností. Takže není nic lehčího, než vybrat si onen určitý úsek textu a aplikovat na něj styl.

<font style='font-family: tahoma, arial'>Onen text</font>

Nyní jsme tedy dosáhli změny pro určitý text. Já bych to nazval lokální úpravou. Všechny čtyři druhy aplikací kaskádových stylů, o nichž byla řeč, jsou vlastně ty, které se dnes používají (zejména první tři).

Další vlastnosti textu

Pokud bychom zůstali pouze u vlastností písma textu, pak byste si asi řekli, že kaskádové styly jsou k ničemu. Abych řekl pravdu, vlastností je mnoho, mně se nechce vám je tady všechny podrobně vypisovat. Spokojme se s tím, že uvedu ty důležitější a pokusím se na Internetu najít nějaký dobře zpracovaný seznam, kde byste je našli všechny pohromadě.

Síla textu

Další důležitou vlastností je tloušťka, tedy lépe řečeno síla písma. Zavádíme ji díky font-weight a má několik možností. Zůstaňme u těch důležitějších:

normal - text vzhledem k síle zůstane bez změn. Pokud sílu textu vůbec nedefinujete, stejně zůstane na normal, takže celkem zbytečné.
bold - naše staré známé obyčejné tučné písmo. Nutno říci, že ve většině případů se používá jen této možnosti.
bolder - trochu zvláštní možnost, která udělá písmo trochu tučnější než obyčejně. V podstatě nemá valného významu.
lighter - dle W3C má udělat písmo trochu světlejším, ale já jsem asi poloslepý (nebo je to opravdu jen nepatrná změna).

Příklad:
Použijeme už námi vytvořený pozdrav, jen ho trochu upravíme. Nezapomeňte, jednotlivé vlastnosti od sebe musíme oddělovat středníkem.

.pozdrav

Velikost textu

Ta je nám vlastně dobře známa, protože v kapitole, kde jsme probírali písmo, jsme mluvili i o velikosti, tedy size. V CSS se zapísuje pomocí font-size. A teď pozor. Standardně se používá absolutní zapsání velikosti a kaskádové styly obsahují trochu více možností. Já zase uvedu jenom ty používanější.

px - staré známe pixely, o kterých jsme si už dvakrát povídali. Tuším, že to bylo vždy v souvislosti s barvami. Jinak také řečeno body obrazovky.
pt - body. Existuje vzoreček, kterým lze jeho velikost přepočítat. Pokud byste vzali vaši obrazovku a porovnali bod, tak je to 1/72. Ach, ta matematika.
pc - ne moc se využívá, ale je to 12 pt.

Příklad:

.pozdrav

Teď jsme probírali absolutní zadání velikosti, ale jako vždy existuje i relativní způsob:

% - procentuálně zadáme velikost písma. Např. při zadání 50% bude písmo o polovinu menší než normálně, při 300% bude třikrát větší apod.
smaller - trošku menší písmo než normálně.
larger - trošku větší písmo než normálně.

Styl textu

Styl písma je vcelku jednoduchá záležitost. Zadává se pomocí font-style a možnosti jsou následující:

normal - normální písmo, nemusíme vůbec zadávat.
italic - tzv. kurzíva, kterou znáte např. z Wordu.
oblique - skloněné písmo. A pozor, můžete namítnout, že kurzíva je skloněné písmo. Já odpovídám, není to jedno a totéž. Kurzíva je typ písma, kdežto oblique vezme normální písmo a skloní ho.

Příklad:

.pozdrav

Varianta textu

Varianta textu obsahuje dvě možnosti a zadává se pomocí font-variant:

normal - jako vždy, když nezadáme, tedy nevadí.
small-caps - tzv. kapitálky.

Příklad:

.pozdrav

Tímto pro dnešek končíme a v příští kapitole už ukončíme i naše povídání o kaskádových stylech.

Pronikáme do hlubin HTML XVIII.

Nezbytný úvod

Dnešní úvod

Formátování textu

Zarovnání

Řádkování

Odstavce

Protáhnutí?

Okraje a rámy

Okraje

Rámy

Nezbytný úvod

Tento úvod je pro ty, kteří ještě nečetli žádný z dílů této série. O co se tu jedná? Toto je příručka, jak celkem snadno pochopit HTML a naučit se ho užívat. Jaká je koncepce příručky? Nemám zájem na tom, učit vás příkaz od příkazu. Zvolil jsem možnost vést vás od začátku až do konce vytvořením své Home Page pomocí zdrojového kódu. Poznatky, které zde nebudou objasněny, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

Dnešní úvod

Už delší dobu se věnujeme kaskádovým stylům, CSS v levelu 1. Pokud jste se dostali teprve k tomuto dílu a nebudete chápat, o čem je zde řeč, doporučuji přečíst předchozí dva články. Dnes, touto kapitolou, navážeme na ony předchozí díly.

Formátování textu

Zarovnání

Nám už velmi známý způsob z HTML, kde jsme ho docílili vlastností align. V kaskádových stylech pro to potřebujeme pouze vědět, že zarovnání zadáme pomocí text-align, a jinak je to stejné.

left — zarovnání textu na levý okraj stránky. Takto se zalamuje defaultně, takže není nutné zadávat.
right — zarovnání textu na pravý okraj stránky.
center — zarovná text na střed stránky.
justify — zarovnání do bloku. Pokud nevíte, jak vypadá, tak si to můžete vyzkoušet i ve Wordu, který toto zalamování textu taky obsahuje.

p

Dále je tu ještě jedna významná maličkost, a to, že lze ovlivnit i vertikální zarovnání. Tzn. přes CSS můžeme ovlivnit i zarovnání textu vůči okolí vertikálně. V HTML jsme používali valign a v CSS je to vertical-align.

top — text se zarovná nahoru vůči stránce či buňce tabulky.
bottom — text se zarovná dolů vůči stránce či buňce tabulky.
middle — text se zarovná doprostřed vůči stránce či buňce tabulky.
sub — zobrazí se jako dolní index.

super — zobrazí se jako horní index.

p

Řádkování

Ti z vás, kteří mají občas co do činění s psacími stroji, určitě vědí, o čem mluvím. Pro ty z vás, kteří ni netuší, se to dá laicky popsat jako mezery mezi řádky. Zadávají se vlastností line-height. Nejčastěji se zadává pomocí bodů pt, ale lze také zadat procentuálně vzhledem k velikosti písma.

p

Odstavce

I přesto, že je pravopisně uznána odlišná norma vzhledu textu psaného na počítači, tj. nemusí se dělat odrážka na prvním řádku nového odstavce, ale vynechává se řádek. Mnoho lidí stále zastává stanovisko, že první řádek v odstavci se má vždy oddělit a proto asi někdo vymyslel tuto vlastnost text-indent, která umožňuje odsazení prvního řádku odstavce. Velikost se zadává v procentech (většinou se to týká procent okna), nebo můžete použít délkové jednotky, o kterých byla řeč v minulém článku.

p

Protáhnutí?

Bohužel, nevím jak nazvat tuto vlastnost letter-spacing. Space je mezera, a pokud tuto vlastnost zadáme, tak se nám jednotlivá písmena od sebe oddělí v takové délce, jakou zadáme, tzn. udělá se mezi nimi mezera. Zadávání velikosti je stejné jako u předcházející vlastnosti.

p letter-spacing: 5px}

Okraje a rámy

Okraje

Ještě si možná pamatujete, že jsem se kdysi u tagu <body> zmiňoval o nastavení okrajů stránky. Jednalo se o horní a levý okraj a zadávaly se pomocí topmargin a leftmargin. U stylů je to trochu jiné. Vlastnosti se zadávají díky margin, to je vnější okraj, a jeho velikost se zadává jako obvykle, pomocí délkových jednotek či procentuálně.

margin-top — velikost horního okraje.
margin-bottom — velikost spodního okraje.
margin-left — velikost levého okraje.
margin-right — velikost pravého okraje.

body

Další možností je padding, nastavení vnitřního okraje. Všechny atributy a zadávání velikostí je totožné s margin.

Rámy

Jedná se hlavně o rám celé stránky nastavený pro BODY. Jeho velké využívání moc nevidím, lze říci, že jsem se s ním setkal snad u tří stránek za celé tři roky. Já sám ho vůbec nevyužívám, ale přesto, alespoň krátce k němu.

border-color — nastaví barvu rámu, lze zadávat tak, jak tomu bylo řečeno v lekci o barvách.

Další vlastností rámu je border-style
none — žádný rám.
solid — plný rám.
double — dvojitý rám.

body

Dále jde vše ještě specifikovat. Můžete zvolit horní, spodní, levý a pravý rám, jejich vlastnost, barvu a velikost. Začneme pozpátku. Velikost se zadává nejčastěji v pixelech. Barva se musí zadat v tomto tvaru rgb(255,255,255). Z povídání o barvách byste už měli vědět, o co jde. Jen na upřesnění, rozsah čísel je od 0 do 255 a typy barvy jsou takto: červená, zelená a modrá. Jinak taky lze zadat slovně. RGB jednotlivé barvy naleznete snad v každém grafickém editoru.

body
body
body
body

V příštím díle už konečně CSS dotáhneme do konce.

Pronikáme do hlubin HTML XIX.

Nezbytný úvod

Dnešní úvod

Formátování

FLOAT

CLEAR

Prvky

DISPLAY

SEZNAMY

Přehled CSS1

Nezbytný úvod

Tento úvod je pro ty, kteří ještě nečetli žádný z dílů této série. O co se tu jedná? Toto je příručka, jak celkem snadno pochopit HTML a naučit se ho užívat. Jaká je koncepce příručky? Nemám zájem na tom, učit vás příkaz od příkazu. Zvolil jsem možnost, vést vás od začátku až do konce vytvořením své Home Page pomocí zdrojového kódu. Poznatky, které zde nebudou objasněny, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

Dnešní úvod

Už ve třech dílech tohoto seriálu jsem věnoval pozornost kaskádovým stylům levelu 1 (CSS). Dnes zde naleznete jenom krátký dodatek a několik příkladů použití. Myslím, že po takto důkladném probrání CSS už je velmi pravděpodobné, že i netalentovaní lidé pochopili princip a nebude pro ně žádnou překážkou věnovat tomu svou další pozornost a pochopit i ten zbytek, který zde řečen nebyl.

Formátování

FLOAT

V kapitole, kde jsme se bavili o obrázcích jsem psal o tom, že danému obrázku (prvku), můžeme dosadit vlastnost align, díky níž jsme dosáhli toho, že text obrázek obtékal (buďto zleva nebo zprava). Je to velice výhodné, protože v čistém HTML nedosáhneme toho, aby byl obrázek obtékán, laicky řečeno, všude kolem prvku. Samozřejmě, když si dobře pohrajeme s tabulkou tak toho taky můžeme dosáhnout, ale proč něco dělat složitě, když to lze udělat jednoduše. No a float znamená to samé, jenže v použití pro CSS. Může nabývat hodnot left (prvek-obrázek se zarovná vlevo a text ho bude obtékat) a right (stejný princip, ale prvek se zarovná napravo).

Příklad:
img

CLEAR

Možná už z vás někteří viděli stránky, kde se vám načte pouze malá část (nebo vůbec nic), chvíli čekáte a najednou se stránky zobrazí úplně celé se vším všudy. Ve většině případů je to dobré řešení, protože nesledujete, jak se vám natahuje 'písmenko po písmenku', ale vidíte až hotový výsledek. Nebo druhá varianta, kde určitý prvek počká s načítáním, až jak bude mít zadáno. Vše je to díky JavaScriptu, ve kterém si s touto možností můžete celkem obstojně pohrát, navolit si spoustu možností. CSS obsahuje jednu trochu podobnou vlastnost, spíše podobnou té druhé zmiňované. Existuje vlastnost clear, která umožňuje, že se prvek zobrazí až po načtení plovoucích objektů. Může nabývat tří hodnot: both, left a right.

both - počká, až se načtou všechny objekty na stránce a poté se zobrazí.

left - počká, až se načtou objekty vlevo a poté se zobrazí.

both - počká, až se načtou objekty vpravo a poté se zobrazí.

Bylo řečeno, že se zobrazí až po načtení plovoucích objektů, tj. objektů typu float. Aby tedy clear fungovalo, musí být v dokumentu nějaký plovoucí objekt. V podstatě, clear bude fungovat vždy, ale pokud na stránkách nebude žádný plovoucí objekt, zobrazí se hned.

Příklad:
p

Prvky

DISPLAY

Existují prvky, tzv. elementy, které si kaskádové styly rozdělují na tři skupiny.

Blokové elementy - jednoduše řečeno, jedná se o elementy, za kterými se zalamuje automaticky řádka. Jako příklad můžu uvést p v použití pro odstavec, nebo třeba h1, h2 atd. pro typ nadpisu. Za těmito elementy se v HTML vždy odděluje řádka.

Nahrazované elementy - jsou to elementy, které jsou většinou nahrazeny pouze nějakým obsahem. Vůči stránce se jejich umístění definuje pouze rozměry, popřípadě odkazem. Může to být například obrázek, který se v HTML zavádí nepárovým tagem img a v kaskádových stylech rovněž tak.

Inline elementy - všichni, kdo se už trochu věnují HTML je znají. Jedná se o obyčejné elementy, které se používají v textu a nemají žádné zalomení řádky. Může to být b pro tučný text, i pro italiku apod.

Díky vlastnosti display můžeme hodnoty těchto elementů změnit. Z Inline (hodnota inline) do blokového elementu (hodnota block). Když jsem tak nad tím přemýšlel, dospěl jsem k názoru, že to není až tak zbytečná funkce a určitě se najde její využití.

p

A máme tu ještě jednu schopnost, kterou display dokáže. Sice na její možné využití mě žádný rozumný způsob nenapadl, ale budiž, když už jsem tuto vlastnost nakousl, tak ji i dokončím. Pokud zadáte hodnotu none, tak se daný element nebude zobrazovat.

h1

SEZNAMY

O seznamech (odrážkách) jsme se v HTML už bavili. V kaskádových stylech mysleli i na toto a ještě nám je trochu vylepšili.

list-style-type - nastaví vlastnosti a číslování odrážek. Hodnoty jsou stejné jako vlastnost type u seznamů v HTML.

list-style-image - to je onen zlepšovák. V obyčejném HTML jste si pouze mohli vybrat z několika možností vzhledu odrážek. Díky této vlastnosti můžete místo odrážky dosadit vlastní obrázek, na který se odkážete. Pokud nebude nalezen obrázek, odrážky se zobrazí tak, jak jste je zadali v list-style-type.

ul li

Přehled CSS1

V minulém díle jsem slíbil, že dnes uveřejním nějaké www adresy, kde by jste mohli nalézt další dokumentaci ke kaskádovým stylům v levelu 1.

https://www.kosek.cz/clanky/web/css-ref.html - první adresou je práce pana Jiřího Koska, který popis vlastností CSS1 sepsal do podrobné a hlavně české podoby. Velmi doporučuji.

https://www.w3.org/TR/REC-CSS1.html - někým vychvalováno, někým zatracováno, to je konsorcium W3C, kde naleznete kompletní informace o CSS1, ale celkem nepřehledně a anglicky.

Celá série se už pomalu blíží ke konci. Příště už trochu lehčí téma a dokonce i docela zábavné, klikací mapy.

Pronikáme do hlubin HTML XX.

Nezbytný úvod

Dnešní úvod

Klikací mapa

Obdélník

Kruh

Mnohoúhelník

Více klikacích map v jednom obrázku

Pár poznámek na konec

Slovo na závěr

Nezbytný úvod

Tento úvod je pro ty, kteří ještě nečetli žádný z dílů této série. O co se tu jedná? Toto je příručka, jak celkem snadno pochopit HTML a naučit se ho užívat. Jaká je koncepce příručky? Nemám zájem na tom, abyste se učili příkaz od příkazu. Zvolil jsem možnost vést vás od začátku až do konce vytvořením své Home Page pomocí zdrojového kódu. Poznatky, které zde nebudou objasněny, si brzy sami hravě osvojíte a budete nalézat další a další možnosti.

Dnešní úvod

Zprvu jsem téma, které dnes uvedu, nechtěl rozebírat. Říkal jsem si, že už je to spíše přežitek minulé doby, ale zřejmě jsem byl na omylu. Po delším brouzdání na Internetu jsem si všimnul, že metody klikací mapy využívá celkem mnoho stránek (a skoro vždy velmi účelně) a dá se říci, že 'vždy na svém místě'. Z tohoto důvodu jsem byl na pochybách. O zbytek se pak postaralo několik známých, kteří konstatovali, že možnost klikací mapy je velmi efektní a byla by chyba ji zde nezveřejnit. Nakonec jsem se tedy rozhodl, že náplň dnešního dílu budu věnovat klikací mapě.

Klikací mapa

Klikací mapa je, jednoduše řečeno, obrázek, jehož přesně vymezená část slouží jako obyčejný odkaz. Je samozřejmé, že v jednom obrázku můžeme mít i více takto vymezených oblastí. Vše, co k našemu pokusu potřebujeme, je obrázek, grafický program, který ukáže hodnoty bodů (umístění, šířka, výška) nebo dobrý odhad. Nakonec si zvolíme ještě odkaz, na který se daná oblast bude odkazovat.

Možnosti klikací mapy lze velmi dobře rozdělit na tři části: obdélník, mnohoúhelník a kruh. Hned si poznamenejte, že u obdélníku a mnohoúhelníku budeme pracovat se souřadnicemi vrcholů a u kruhu s jeho středem a poloměrem.

Klikací mapu v HTML dokumentu zavedeme pomocí párového tagu <map>. Musíme také uvést atribut name, který nám vytvořenou mapu označí a díky němuž ji můžeme aplikovat na obrázek.

Možný příklad:
<map name='První mapa'>

</map>

Jak už je na první pohled zřejmé, ony tři tečky jsou obsah, lépe řečeno, samotná definice. Takže si ji ukážeme.

<area href='' shape= coords='' alt=''>

href - pokud si pamatujete alespoň nějaké ty základy z odkazů, určitě víte, co tady doplnit. Jde vždy o URL adresu. My budeme dále jako příklad používat adresu https://www.novinky.cz .

shape - právě tímto atributem zadáváme, s jakým geometrickým útvarem budeme pracovat.
··· obdélník - rect
··· mnohoúhelník - poly
··· kruh - circle

coords - závisí na tom, jaký druh shape jste zadali (a podle toho se chová). Zde vymezujeme onu oblast klikací mapy. Jak už jsem uvedl, u obdélníku a mnohoúhelníku zadáváme souřadnice vrcholů (šířka, výška vrcholu v obrázku) a u kruhu jako pevný bod zadáváme souřadnice středu a délku poloměru.

alt - stejně jako u normálního odkazu. Dosazujeme alternativní text odkazu (nyní vymezené části), který se laicky řečeno, zobrazí po najetí kurzoru myší na onu oblast.

Nyní je už ta nejvhodnější doba přistoupit přímo k názorným příkladům.

Obdélník

Nejlepším způsobem, jak pochopit princip klikací mapy, je názorná cesta. Proto máme obrázek, který, je uložen například pod názvem 01.gif. Jako odkaz, na který bude klikací mapa odkazovat, si zvolíme https://www.novinky.cz. Jde o obdélník, takže potřebujeme znát souřadnice protilehlých vrcholů. Jinak řečeno, souřadnice levého horního a pravého spodního. V obrázku je máme schválně určeny čísly, to pro rychlejší orientaci. První část čísla před čárkou je souřadnicí vůči šířce, druhé číslo je souřadnice vůči výšce vrcholu v obrázku. Nezapomeňte, pracujeme jenom v obrázku. Takže nyní přistoupíme přímo k příkladu.

Příklad:

<html>

<head>
<title>Klikací mapa s obdélníkem</title>
</head>

<body>

<map name='obdelnik'>
<area href='https://www.novinky.cz' shape=rect coords='31,19,124,83' alt='Novinky.cz'>
</map>

<img src='01.gif' usemap='#obdelnik'>

</body>
</html>

Rect jsme zadali, protože pracujeme s obdélníkem. Všimněte si, že u vlastnosti coords jsme zadali souřadnice obou vrcholů, na prvním místě levý horní, na druhém pravý spodní. Mapu jsme si nazvali obdelnik. Musíme vložit onen obrázek, stejně jako vždy, když vkládáme obrázek, ale nesmíme zapomenout, že mu klikací mapu musíme přiřadit. Toho jsme dosáhli pomocí usemap a do této vlastnosti jsem vložili název mapy. Pozor, znak # musí být vždy před názvem.

Kruh

Vše je v podstatě stejné jako u obdélníku, až na to, že nepracujeme s vrcholy, ale se středem a poloměrem kruhu. Obrázek bude nyní uložen pod názvem 02.gif. Odkaz použijeme stejný.

Příklad:

<html>

<head>
<title>Klikací mapa s kruhem</title>
</head>

<body>

<map name='kruh'>
<area href='https://www.novinky.cz' shape=circle coords='74,50,43' alt='Novinky.cz'>
</map>

<img src='02.gif' usemap='#kruh'>

</body>
</html>

Circle jsme zadali, protože pracujeme s kruhem. Coords nyní trochu změnilo systém. Nejprve jsme zadali souřadnice středu, třetím číslem je onen poloměr.

Už je na místě zmínit se o tom, jak udělat např. kolo, tzn. mezikruží. Potřebujeme k tomu vykousnout kruh uvnitř kruhu. Takže klikací mapu upravíme takto:

Příklad:

<map name='mezikruzi'>
<area nohref shape=circle coords='74,50,20' alt='Novinky.cz'>
<area href='https://www.novinky.cz' shape=circle coords='74,50,43' alt='Novinky.cz'>
</map>

Z kruhu jsme tedy vykousli kruh o poloměru 20. Tato oblast se nyní nebude chovat jako odkaz. Pozor, část, kterou chceme takto vyříznout, musíme uvést vždy před definici části, která se má chovat jako klikací mapa (odkaz). Abychom dosáhli efektu kola, použili jsme stejné souřadnice středu.

Mnohoúhelník

Základy už známe z obdélníku, tady je jen ta změna, že musíme zadávat souřadnice všech vrcholů. Měli bychom začínat ve směru hodinových ručiček, tzn. jako první uvedeme souřadnice horního vrcholu, potom pravého a nakonec levého. Vrchol, jehož souřadnice jsme zadali jako první (je to vlastně začátek i konec mapy), nemusíme na konci zadávat znovu, mapa se spojí sama.

Příklad:

<html>

<head>
<title>Klikací mapa s mnohoúhelníkem</title>
</head>

<body>

<map name='mnohouhelnik'>
<area href='https://www.novinky.cz' shape=poly coords='77,7,126,93,26,93' alt='Novinky.cz'>
</map>

<img src='02.gif' usemap='#mnohouhelnik'>

</body>
</html>

Více klikacích map v jednom obrázku

Jak už jsem na začátku uvedl, v jednom obrázku si můžeme nadefinovat více klikacích map. Proto jsem zvolil obrázek, kde se nacházejí dva objekty, ze kterých budeme klikací mapu vytvářet.

Příklad:

<html>

<head>
<title>Klikací mapa s více prvky</title>
</head>

<body>

<map name='kmapa'>
<area href='https://www.novinky.cz' shape=rect coords='29,19,121,82' alt='Novinky.cz'>
<area href='https://www.seznam.cz' shape=poly coords='75,116,126,203,26,203' alt='Seznam.cz'>
</map>

<img src='02.gif' usemap='#kmapa'>

</body>
</html>

Pár poznámek na konec

Velmi často v tomto seriálu uveřejňuji HTML příklady. K tomu používám lomené závorky a podobně. Když se nad tím zamyslíte, zjistíte, že proto potřebuji nějaké speciální znaky, protože to nemůžu zadat obyčejně z klávesnice. Kdybych to tak udělal, ve výsledku byste lomenou závorku neviděli, protože browser to bere jakou součást HTML a ne jako text. Proto zde konečně uvedu ony zkratky, které mi v tom napomáhají.

&amp; - &
&lt; - <
&gt; - >
&nbsp; - když ve zdrojovém kódu uděláte mezeru mezerníkem, browser ji 'přeloží' jako mezeru. Když ale uděláte mezerníkem mezery dvě nebo více, stejně ve výsledku browser zobrazí pouze jednu. Když ale vložíte tento 'příkaz', provede se mezera, můžete ho tedy vkládat, jak je libo, provede se tolik mezer, kolikrát 'příkaz' vložíte.

Slovo na závěr

Tímto dílem už sérii Pronikáme do hlubin HTML uzavírám. Myslím, že jsem vás v předchozích dílech naučil vše potřebné (a i já jsem se mnohému přiučil). Pokud jste sledovali průběh celé série, pak jste už spoustu základních věcí pochopili. A hlavní není HTML ovládat nazpaměť, ale pochopit princip - když ho pochopíte, otevřou se před vámi dveře celého HTML a nic už vám nebude činit velké problémy. Přeji hodně zdaru při vytváření WWW stránek. A pamatujte, že člověk se pořád učí.