HaTMatiLka
Lekce 4
Lekce Odkazy

Web by nebyl webem, kdyby se skládal ze samostatných, nepropojených stránek. Ostatně, byla to právě myšlenka hypertextu, která jej postavila na osm pavoučích nohou a počala tkát neviditelnou pavučinu okolo celé zeměkoule.

Odkaz na URL

Celý princip hypertextu na Internetu je postaven na URL (viz první lekce), tedy na jedinečném pojmenování dokumentů v síti.

Odkazy jsou do HaTMatiLky vkládány tagem <a>…</a>, mezi nějž jest uzavřen aktivní text. Tento tag musí obsahovat adresu dokumentu, cíl, kam má vést. Ta se vkládá do tagu jako parametr HRef="URL". Místo URL je samozřejmě jméno dokumentu.

Takže například zápis <a HRef="HTML-idx.htm">vobsah</a> vytvoří zvýrazněné slovo „vobsah”, ukazující na stránku s obsahem tohoto kursu.

Odkazy mohou vést kamkoliv: do Internetu, na místní síť, na lokální počítač, dokonce i na jinou část jediné stránky (typicky: zpátky na začátek). V jejich používání je potřeba rozlišit asi dvě (a půl) základní kategorie.

Tou první jsou linky s „absolutní” adresou, tedy s plným URL. Mohou začínat protokolem (http:), ale většinou se tato část vynechává; s výjimkou adres souborů na místním počítači či síti, kde je zapotřebí zadávat protokol file:.

Tou druhou skupinou jsou odkazy „relativní”, vztažené k právě aktivnímu dokumentu. Většinou jde o linky na dokumenty ve stejném adresáři (DOSovsky chápáno) nebo v podadresářích. Vyznačují se tím, že URL je zkráceno — nepoužívá se jméno počítače ani jméno disku, nanejvýš jméno adresáře (jestli vůbec) a jméno souboru.

Skupina „dva–a–půltá” je částí předchozí skupiny. Mám na mysli případ, kdy je potřeba ukázat na dokument „v adresáři nade mnou”. Například v adresáři \HTML\test\ je dokument Index.htm a v adresáři \HTML\test\moje\ se nachází soubor Tento.htm (nyní aktivní). Je potřeba z dokumentu Tento.htm ukázat na dokument Index.htm. To se dá zařídit zápisem <a HRef="../Index.htm">Index.htm</a>. Ten však má jednu nevýhodu: na síti Novell bude fungovat jen tehdy, pokud je zapnuta volba SHOWDOTS=ON, což záleží výhradně na správci. Též na Internetu je fungování takové konstrukce nespolehlivé. Proto je záhodno se jí vyhnout.

Ještě připomínám, že se píší výhradně normální lomítka „/”, nikoliv DOSovská lomítka zpětná „\”. Žádný strach, bude to fungovat i na DOSovském počítači.

Odkaz sem

Kromě odkazů, vedoucích „tam”, někam, kamkoliv, používá se tagu <a>…</a> k definici jména nějaké oblasti. (Například nadpis nad tímto odstavcem se jmenuje „sem”.)

K čemu je to dobré? K tomu, aby se dalo snadno poskakovat i po jediné stránce.

Jméno je definováno parametrem Name="jmeno", takže například již zmíněný nadpis byl zapsán jako <a Name="sem">Odkaz sem</a>. Tím dostal jméno a nic mi nebrání, umístit na stránku link, vedoucí právě na onen nápis: <a HRef="sem">onen nápis</a>.

Z příkladu je patrný i způsob, jakým se na jména skáče: před název oblasti se napíše znak „#".

Samozřejmě, že je možné používat tento zápis i ke skokům doprostřed jiných dokumentů: <a HRef="HTML-tag.Htm#a">anchor</a> je odkazem na popis tohoto tagu v seznamu příkazů.

Odstavce

Text jest členěn do odstavců, to jest vcelku známo. Nejjednodušší metodou, jíž se vyrábí odstavec na stránce HaTMatiLky bývá vložení tagu <br>, tedy konce řádku. Protože text přetéká na více řádků a zpravidla se skládá z více vět, jde vlastně o konec odstavce.

Druhou, malinko náročnější metodou, je použití tagu <P>…</P>. Mezi tyto značky je uzavřen text jednoho odstavce a browser jej také jako jeden odstavec zobrazí.

Narozdíl od odstavce, vzniklého řádkovým zlomem (kdy další řádek následoval okamžitě za předcházejícím), vynechá prohlížeč okolo takovéhoto odstavce kousek místa — bude tak vždy jasné, kde začíná a kde končí.

Zarovnání odstavců

Tag <P>…</P> má jediný parametr: Align="left|center|right", kterým se definuje zarovnání textu. Zatímco Align="left" je zbytečné uvádět (normálně se zarovnává vlevo:-), a Align="center" má stejný efekt, jako centrování pomocí <center>…</center>, zarovnání vpravo jinak, než uvedením Align="right" docílit nelze.

Otázkou je, kdy vlastně využijeme text, zarovnaný vpravo? Přece u podpisu: <P align="right">Robert R. Šimek</P>.

Robert R. Šimek

Centrování

Pokud je potřeba zarovnat text doprostřed (vycentrovat), lze to udělat dvojím způsobem: buď použít odstavec, nebo využít tagu <center>…</center>. Obojí má stejný efekt.

Zatímco první způsob definuje centrování na celý odstavec, použití <center> se hodí všude tam, kde je potřeba vystředit část textu, obrázek, tabulku, prostě cokoliv, co není zrovna odstavec. Ostatně, tento odstavec byl také vystředěn tímto způsobem ;-)

Kurzíva, tučné, poztržené…

HaTMatiLka nabízí poměrně slušný výběr formátování textu. Jednak jde o předdefinované styly, jednak o různé manipulace s písmem. Styly není třeba příliš rozebírat, neboť jejich používání jest zřídkavé; nyní se věnujme různým písmům.

Text v HaTMatiLce může být psán kurzívou, tučně, podtrženě, subskriptem (dolní index), superskriptem (horní index), neproporcionálně (pevnou šířkou znaků), nebo třeba všechno dohromady.

Princip je vždy stejný: zvolený kus textu je uzavřen mezi párový tag, označující formát.

Příklad
                    
<i>Kurzíva, též italika jest písmo sklopené.</i><br>
<b>Tučné písmo jest široké.</b><br>
<u>Podtržené písmo? Bez potíží…</u><br>
E = m c<sup>2</sup> (Einstein)<br>
Máte radši H<sub>2</sub>O nebo C<sub>2</sub>H<sub>5</sub>OH?<br>
<tt>Telegram: Italská země se třese.</tt><br>
vokaž

Kurzívy se dosáhne pomocí tagu <i>…</i>. Tučné písmo zajistí dvojice <b>…</b>, podtržené <u>…</u>pevná šířka<TT>…</TT> (od slova Teletype).

Horní a dolní index mají tagy velmi podobné: <sub>…</sub> je subskript, zatímco <sup>…</sup> je superskript.

Písma čili fonty

Kromě různých úprav písma je možné definovat pro části textu též vlastnosti písma, jako takového, tedy jeho velikost, barvu (viz seznam barev v druhé lekci) a jeho řez (font). To vše umí párový tag <font>…</font>.

Mezi ním se nachází text, jehož vlastnosti jsou definovány parametry tagu. Asi nejpoužívanějším je změna velikosti písma a změna barvy. Nejlépe se to dá ukázat na příkladu:

<font color="FF0000">červeně</font> červeně
Takto se dají měnit barvy písma. Vždy je však mít na paměti, že příliš pestrý dokument je strakatý a nečitelný.

<font size="+2">velké</font> velké
Velikost se uvádí buď číslem z intervalu 1 až 7 (1=nejmenší, 7=největší) nebo relativně, -4 až +4 (neměnit velikost=+0). Rozdíl je v tom zanedbatelný, já osobně dávám přednost relativnímu zápisu, protože hned vidím, jestli zmenšuji či zvětšuji.

Kromě velikosti lze měnit i tvář písma. K tomu je určen parametr face="Font name", kam se doplní seznam jmen písem. Například <font face="Arial CE">písmo Arial CE</font> vypíše text „písmo Arial CE” bezpatkovým písmem Arial CE. Protože ne vždy je k dispozici právě to pravé písmo, je možné vypsat do úvozovek seznam fontů, které je možné pro tento účel použít, oddělený čárkami: <font face="Arial CE,Arial,Helvetica">bez patek</font>. Jestli nebude nalezeno žádné písmo ze seznamu, smůla — použije se normální.

Jestliže si nelze tak docela vybrat přesné písmo pro zobrazení textu, existuje alespoň možnost zvolit přibližný typ písma:

  • serif je patkové písmo (Times, Roman…).
  • sans-serif je bezpatkové písmo (Arial, Helvetica…).
  • monospaced je písmo s pevnou šířkou (Courier, Logic…).
  • cursive je ozdobné písmo (Zapf-Chancery…). Většinou není k dispozici či nefunguje.
  • fantasy je ozdobné písmo (Western…). Většinou není k dispozici či nefunguje.

Pozor: tag <font> není dobré vnořovat do sebe — ne každý prohlížeč si s tím poradí správně. O nečekané efekty pak není nouze.
Bohužel, jediným spolehlivým řešením je, před každou změnou písma ukončit předchozí nastavení tagem </font> a začít nový tag <font>.

Domácí úkol:
Upravit homepage z minulé lekce tak, aby byly nadpisy barevné, přezdívky psané kurzívou a na konci stránky (vpravo) pod čarou podpis.
Obsah
Lekce 1
Lekce 2
Lekce 3

odkazy
odstavce
centrování
kurzíva, tučné, podtržené
příklad
písma
úkol

Lekce 5
Lekce 6
Lekce 7
Lekce 8
Lekce 9
Lekce 10
Lekce 11
Lekce 12

 Lekce 5
© Robert R. Šimek, 1997