HTML (část 5) – Narsil 41

Tak, máme tu poslední část seriálu o vytváření html stránek. Přináší několik nových příkazů, které však lze většinou použít zatím jen MSIE 5, a dále pár rozšířeních již známých příkazů a něco obecnější teorie. Navíc jsem ke konci přidal několik informací o dalších prostředcích, kterými lze vylepšovat web. Tak tedy do toho, dnes již skutečně naposledy (ale od nového roku budeme ještě chvíli pokračovat tvorbou moderního webu).

PLOVOUCÍ RÁMY:

Anglicky floating frames, jsou speciální rámy, které odstraňují některé z nevýhod pevných rámů (<frameset> a <frame>). Plovoucí rámy se chovají částečně jako obrázky a částečně jako běžné rámy - definují se v těle dokumentu (<body>) a tam kde se nacházejí, tam se také zobrazí. Lze je zarovnávat na řádce, nastavit jejich velikost, okraje atp. Nepotřebují tedy další extra html dokument ani příkaz <frameset> jako obyčejné rámy. Bohužel na Atari nejsou zatím podporovány.

<IFRAME atribut1="..." atribut2="..."></IFRAME> (IE)

Přípustné atributy:

ALIGN="..." - specifikuje zarovnání plovousího rámu a okolního textu. Možné hodnoty jsou TOP, MIDDLE, BOTTOM, LEFT a RIGHT

FRAMEBORDER="..." - udává, zda budou okraje 3-D či nikoliv (0 = ne, 1 = ano - default)

HEIGHT="..." - nastavuje výšku plovoucího rámu

MARGINHEIGHT="..." - nastavuje horní a dolní okraje plovoucího rámu v pixelech

MARGINWIDTH="..." - jako výše, ale udává levé a pravé okraje

NAME="..." - název rámu (pro <target>)

NORESIZE - je-li udáno NORESIZE=NORESIZE, uživatel nebude moci měnit rozměry rámu, bude-li NORESIZE=RESIZE, pak to půjde

SCROLLING="..." - zda budou zobrazeny slidery pro možnost scrollingu či nikoliv. Hodnoty jsou "yes" a "no"

SRC="..." - udává soubor, jenž má být umístěn v rámu

WIDTH="..." - nastavuje šířku plovoucího rámu

FRAMESPACING="..." - prostor mezi rámy, který není ničím vyplněn

BORDER="..." - nastavuje šířku ohraničení okolo rámu

BORDERCOLOR="..." - je-li definováno ohraničení rámu, zde je možné přiřadit okrajům barvu.

Všechno mezi těmito příkazy bude zobrazováno pouze browsery, které nepodporují rámy (frames). Pokud browser rámy podporuje, celý příkaz a vše v něm bude ignorováno. Do tohoto příkazu je možno vložit i příkaz BODY a do něj teprve vlastní text.

RELATIVNÍ CESTY

Kromě absolutních cest, kdy zadáváme celou a přesnou adresu, lze využívat i relativní adresace podle následujících pravidel:

"../stranka.htm" - soubor je v nadřazeném adresáři

"/stranka.htm" - soubor se nachází v kořenovém adresáři

"../../stranka.htm" - soubor je o dva adresáře výše než aktuální

"../archiv/stranka.htm" - soubor se nachází v adresáři ARCHIV o 1 úroveň výš než aktuální soubor. Atp.

KOMENTÁŕ (IE)

Tzv. bublinkovou nápovědu lze v tomto případě použít i jako vysvětlující komentář pro odkazy. Jakmile umístíte na daný odkaz myš, objeví se text v rámečku informující o odkazu. Komentář se umisťuje jako parametr k příkazu <A> a má formu TITLE="komentář", tedy:

<A HREF="stranka.htm" TITLE="Vysvětlující komentář k odkazu">Toto je odkaz</A>

Tento komentář lze použít i u odkazu, jenž je reprezentován obrázkem. V takovém případě však u obrázku nesmí být parametr ALT="...", který má před TITLE="..." přednost a TITLE by pak byl ignorován.

Ještě pár slov ke ZVLÁŠTNÍM ZNAKŮM. Ve třetím díle jsem se zapomněl přímo zmínit o tom, že se v tomto případě vždy rozlišují velká a malá písmena. Např.   je pevná mezera, ale &Nbsp; již není nic. Stejně tak např. ä (= přehlasované a) není to samé jako Ä (= přehlasované velké A), atp.

A téměř nakonec - velká většina hodnot se může zadávat buď do uvozovek, ale také bez nich, nejlépe je to vidět na příkladech:

<font color="$208800"> je (pro browser) to samé jako

<font color=$208800> atp. Většinou se však tam kde je to možné uvozovky používají.

DALŠÍ ROZŠÍŕENÍ HTML (IE)

Nyní následuje několik "fajnovostí", kterými můžete též vylepšovat své www stránky. Bohužel to, o čem se nyní budeme bavit, není na Atari zatím až na výjimky v různém stádiu vývoje, podporováno. Pro řádné využití bude tedy třeba MSIExploder (nebo Netskejp Navigator) nějaké vyšší verze.

KASKÁDOVÉ STYLY

V současnosti jsou poměrně hojně využívány. Jde o to, že si uživatel předem nadefinuje různé styly pro různé nadpisy nebo odstavce a pak je již pouze jednoduše přiděluje. Znamená to úsporu - definici provedete pouze jednou a poté ji již pouze přidělujete dle potřeby. Pokud nepoužíváte tyto styly, jakoukoliv změnu písma, velikosti či barvy fontu musíte definovat vždy znovu. Zdrojový kód pak přetéká značkami <FONT>. Definicí stylů CSS (Cascading Style Sheets, kaskádové styly) si nejen ušetříte práci, ale zdrojový text se možná stane i přehlednějším. Bohužel jak jsem se zmínil, na Atari nejsou zatím CSS podporovány, takže vše skončí bez efektu. Na druhé straně tedy stojí problémy s kompatibilitou různých browserů a platforem.

Základní definice syntaxe stylů je následující:

<!--

.nazevstylu

{parametr: hodnota;

parametr2: hodnota;

parametr3: hodnota;}

.nazevstylu2

{parametr: hodnota;

parametr2: hodnota;}

-->

</STYLE>

Konkrétní příklad následuje zde:

<!--

.nadpis1

{font-family: Baskerville;

font-weight: bold;

font-size: 20pt;

color: Red;

background: Grey;}

-->

</STYLE>

Toto nadefinuje styl s názvem Nadpis1, který bude psán tučným písmem Baskerville o velikosti 20 bodů, červeně na šedém pozadí. Kdykoliv pak budete chtít takto nadefinovaný styl použít, stačí zadat:

Toto je nadpis definován jako Nadpis1

</SPAN>

Sama tato značka nijak text neformátuje ani na něj nemá žádný vliv. Pouze textu uvnitř sebe přiřazuje určitý styl.

Kaskádové styly se definují v hlavičce <HEAD>. V samotném dokumentu se pak pro přiřazení stylu používá příkaz <SPAN>. Pozor také na tečku před názvem stylu - ta se používá v případě, že definujete nový styl. Upravujete-li styl již existující, tečka před názvem stylu bude chybět. Můžete tak např. i změnit nadpis H1, H2, atp., pak jej ovšem budete definovat bez tečky.

Pro vlastní přiřazení stylů můžete kromě příkazu SPAN použít i následující příkazy:

Teoreticky lze nadefinovaný styl užít kdekoliv. Pokud použijete tuto formu:

<H3 CLASS="MůjNadpis"> zde bude nějaký nadpis </H3>

bude na celý tento nadpis použit styl "MůjNadpis", který jste si již dříve nadefinovali. Standardní značka <H3> pak bude přebita novým stylem.

Styly však mohou být nadefinovány i ve zcela samostatném souboru s koncovkou .css, a z různých html souborů na ně lze pouze odkazovat. To je výhodné zejména pokud máte více různých html souborů a používáte v nich několik stejných vámi nadefinovaných stylů. Pak je třeba do hlavičky <HEAD> každého takového html souboru umístit příkaz

který ukazuje, kde se soubor stylů nachází (a jak se jmenuje). Samotný css soubor je klasický ASCII text, v němž si nadefinujete veškeré styly.

Stylům (a trochu i Java scriptu) se budeme věnovat v novém seriálu Narsilu od příštího roku.

JAVA

Java je programovací jazyk velice podobný jazyku C++. Jeho základní vlastností je hardwarová a platformová nezávislost - program napsaný v Javě poběží na jakémkoliv počítači (pokud umí s Javou pracovat, viz dále). Je to dáno zvláštním přístupem ke kompilaci. Zatímco programy napsané v jiných jazycích musíte před použitím zkompilovat do strojového kódu, což omezuje použití pouze na danou platformu, program napsaný v Javě se zkompiluje do zvláštního kódu, tzv. Java Byte Code, který je pak následně kompilován za běhu. Jinak řečeno, program je interpretován a prováděn současně. Takový kód je pak použitelný pro všechny platformy. Jedna podmínka tady však existuje - je třeba mít v počítači interpret Javy - Java Virtual Machine, JVM. Ten je implementován do PC browserů jako MSIE a Netscape Navigator. Program napsaný v Javě tak může být lehce součástí www stránek.

Na druhou stranu je silnou nevýhodou Javy potřeba opravdu výkonného stroje, který zvládá interpretovat a provádět současně a dosti rychle. I současné stroje nejsou většinou na Javu dosti rychlé a tak se zatím používají jen jednodušší aplikace.

SCRIPTY

Zjednodušeně: script = scénář. Velice podobný Javě je tzv. Java script, který není na rozdíl od Javy předkompilován do žádného kódu, ale je v html souboru umístěn ve své zdrojové podobě. Javě se však silně podobá, má i spoustu podobných vlastností, je ale jednodušší a optimalizován pro použití na webu. Java script je v současnosti velice oblíbený pro vytváření jednodušších programů v html, na něž klasické příkazy html nestačí. Lze jím vytvořit např. různé formuláře či jednodušší aplikace. Podporují jej opět MSIE i Netscape Navigator, na Atari zatím pouze Light of Adamas 1.7x PRO, nevím ale do jaké míry.

Kromě Java scriptu existuje ještě jeden skriptovací jazyk - Visual Basic Script. Ten je ale již záležitostí pouze pro MSIE a navíc není tak rozšířený jako Java script.

<SCRIPT atributy> ...příkazy scriptu... </SCRIPT>

Uzavírá vše příkazy skriptovacího jazyka, jež budou vykonány browserem. Pro zajištění kompatibility směrem dolů (vzhledem k browserům, které scripty nezvládají) se příkazy scriptu uzavírají do komentáře:

()

Atributy:

LANGUAGE="..." - specifikuje použitý scriptovací jazyk, tedy "VBScript" nebo "JavaScript".

SRC="..." - udává, kde se nachází soubor obsahující script. Lze použít tehdy, nechcete-li mít kód ve stejném (vlastním) html dokumentu, ale v samostatném ASCII souboru.

Script se může definovat jak v hlavičce (HEAD), tak i v telě (BODY) dokumentu. Definuje-li se v těle, provádí se na místě, kde je umsítěn.

Malý příklad jednoduchého scriptu:

<HEAD> <TITLE> Java skript </TITLE>

<!--

alert("Výstražný alert by JavaScript");

-->

</SCRIPT>

</HEAD>

Ihned po načtení stránky (tento skript jsme definovali v hlavičce) se objeví alert box s nápisem "Výstražný alert by JavaScript" a bude čekat na odklinutí tlačítka (OK). Poté bude pokračovat dále podle příkazů v html dokumentu.

Vše uvnitř tohoto příkazu bude zobrazeno pouze browsery nepodporujícími skripty. Příkaz se umisťuje většinou do příkazu SCRIPT (podobně jako u rámů příkaz NOFRAMES), ale lze i za něj.

DHTML

DHTML znamená Dynamické HTML. Vznikl z potřeby rozhýbat poněkud statické stránky vytvořené základním jazykem html. Nabízí např. přesné umístění objektů na pixelové úrovni, překrývání objektů, interaktivní stránky, jejichž obsah se dynamicky mění podle chování uživatele, řízené animace a další pomůcky. Bohužel, na Atari jej nikde neuplatníme.

Základem DHTML jsou kaskádové styly CSS a Java script (obecně skriptovací jazyk). DHTML je tedy vlastně kombinací objektů vytvořených pomocí CSS a skriptovacího jazyka, který řídí jejich chování na obrazovce.

Tvořit takovéto stránky je však již daleko obtížnější, než běžné html prezentace. Vyžaduje to jednak znalost CSS a skrtiptovací jazyka, ale také grafické představivosti apod. Je skutečně nelehké vytvořit stránky pomocí DHTML, aby nejen dobře fungovaly, ale hlavně aby dobře vypadaly. Udělat z původně pěkné stránky nepřehlednou změť čehosi je mnohokrát snažší. Zde už se pozná, kdo je opravdu dobrým návrhářem a tvůrcem moderních www stránek (ani já to zatím nejsem) ;-)

Není však problém nastudovat všechny potřebné příkazy a pak již jen zkoumat, zkoušet a po mnoha pokusech ukázat konečný výtvor světu. Existují různé publikace pojednávající o DHTML, Java scriptu i CSS.

A NA KONEC

Krom uvedeného existuje mnoho dalších vymožeností, keré vám mohou pomoci ovládnou web. Jsou to např. programy běžící na straně serveru, které prohlížeč pouze informují o své činnosti - tzv. CGI scripty - a kumulují z něj data zadaná uživatelem (např. formuláře). Nebo např. databázově generované stránky (ASP), kdy jsou na serveru uložena data v databázi a server vygeneruje právě platnou html stránku až v okamžiku, kdy o ní někdo požádá. Toto se nejčastěji využívá u elektronických obchodů.

Náš seriál o HTML tímto končí. Doufám že se vám alespoň trošku líbil a že alespoň některým z vás pomohl. I kdyby ne, tak i já sám jsem se při něm naučil pár nových věcí. Seriál neobsáhl všechny možnosti, které jazyk HTML nabízí, ale podal myslím si (až na výjimky) poměrně vyčerpávající přehled o příkazech a možnostech tohoto hojně využívaného jazyka. Tento přehled vám bohatě postačí k vytvoření poloprofesionálních stránek a pokud se někdo chce HTML věnovat více, může začít studovat stránky na internetu, kde lze krom množství informací stahovat i již hotové stránky a poté si je rozebírat. Navíc se nyní s příchodem HTML verze 4 objevily i nové příkazy či formy, ty lze ale využít zatím pouze na PC a jejich MSIE 5 nebo Netscape verze nevím kolik, a to také hlavně díky podpoře CSS a Java scriptu, který zatím (zdá se) udává směr.

Hodně fungujících www stránek příp. pěkných html manuálů vám přeje

Neznámý vojín