|
![]() | |
![]() | ||
Vývoj | ||
Apache a
IIS ASP a skripty HTML Průvodci Doporučené weby Výuka HTML English ![]() | ||
Živě | ||
Články za
týden Nové příspěvky Nejčtenější články Ankety Autoři Reklama na Živě Kontakt na redakci Živě pro váš server Hledáme autory! Volná místa v IT | ||
|
![]() |
Jak vytvářet www stránky -
16. díl
Vylepšené tlačítko (BUTTON)Protože tlačítko vytvořené pomocí elementu INPUT nenabízí příliš široké možnosti, objevil se v normě HTML 4.0 samostatný tag BUTTON (tlačítko, knoflík). Ten umožňuje mnohem lépe specifikovat vlastnosti tlačítka, do kterého lze nyní umísťovat objekty jako například obrázky, tabulky, formátovaný text atd.
![]() |
![]() |
| |||||||||
| ||||||||||||
![]() |
A takto vypadá výsledek: Které deníky čtete pravidelně? Kromě formátovaného textu můžete do tlačítka vkládat obrázky, tabulky a většinu prvků standardu HTML. Rámečky ve formulářích (FIELDSET a LEGEND)K lepší orientaci může pomoci rozčlenění jednotlivých prvků formuláře do několika částí. K tomu slouží párové tagy FIELDSET a LEGEND. FIELDSET ohraničí všechny formulářové prvky, které jsou umístěné mezi úvodním a zakončovacím tagem, tenkým rámečkem, čímž je opticky oddělí, LEGEND pak nabízí vytvoření popisku tohoto rámečku. Tag FIELDSET nemá žádné důležité parametry, u tagu LEGEND je podstatné pouze jeho zarovnání vzhledem k rámečku pomocí parametru align. Hodnoty jsou podobné jako u většiny prvků HTML, tedy top (zarovnání nahoru), bottom (zarovnání dolů), left (doleva) a right (doprava).Jak může vypadat takto vylepšený formulář vidíte opět na příkladě:
Jistě mi dáte za pravdu, že formulář je díky rámečkům s legendou mnohem přehlednější: Tipy, triky a vylepšeníAčkoli jsme se zatím pečlivě drželi normy HTML 4.0 dle doporučení W3C, nabídneme vám desítku tipů, které osvěží vaše www stránky, ovšem neručíme za to, že budou fungovat v úplně všech prohlížečích (v MS Internet Exploreru 4.0 a 5.0, který používá drtivá většina uživatelů však fungovat budou). Některé ukázky jsou zpracované pomocí JavaScriptu a CSS, takže budou fungovat pouze v prohlížečích, které JavaScript a CSS podporují.Tip č. 1: Návrat o stránku zpětChcete-li, aby se uživatel mohl vrátit na stránku, z níž přišel (bez ohledu na to, kde je tato stránka umístěna), použijte pro odkaz následující kód:
Kliknutí na takovýto odkaz má zcela stejný význam, jako stisk tlačítka Zpět (resp. Back) v horní liště browseru. Tip č. 2: Tlačítko místo odkazuJestliže chcete mít místo textového hyperlinkového odkazu tlačítko, můžete použít "prázdný formulář". Zdrojový kód takového objektu vypadá následovně:
Místo parametru adresa vepište adresu na odkazovaný server nebo dokument., místo popis tlačítka pak to, co uvidí návštěvník napsané na tlačítku. Tip č. 3: Jak vypsat uživateli jméno jeho browseruChcete-li, aby se návštěvníkovi vašich stránek v textu zobrazilo jméno prohlížeče, který používá, stačí do těla dokumentu vložit kraťoučký JavaScript.
Výsledek může vypadat například takto: Používáte Tip č. 4 - uzavření okna kliknutím na odkazChcete-li dát návštěvníkovi svých stránek možnost uzavřít aktuální okno prohlížeče kliknutím na hyperlinkový odkaz, stačí vložit do stránky následující kód:
Na vlastní kůži si tento efekt můžete vyzkoušet kliknutím sem. Jednoduché, ale efektní... Tip č. 5: Automatické přesměrování na jinou stránku - 1. způsobTento tip se vám bude hodit v případě, že přestěhujete své www stránky na jiný server. Návštěvník, který si pamatuje pouze starou adresu tak bude automaticky přesměrován na nové umístění, aniž by musel kamkoli kliknout.Stačí do kódu stránky vložit jednoduchoučký JavaScript, v němž proměnou kam presmerovat nahradíte novou adresou svých www stránek (např. http://www.zive.cz/):
Tip č. 6: Automatické přesměrování na jinou stránku - 2. způsobV předchozím tipu jsme si popsali přesměrování na jinou www stránku pomocí JavaScriptu. Dnes si popíšeme další způsob, kterým lze dosáhnout téhož.Stačí na libovolný řádek mezi tagy <HEAD> a </HEAD> umístit následující tag META:
Místo proměnné cas zadáte počet vteřin, po kterých má dojít k přesměrování, místo adresa pak vyplníte adresu stránky, na níž má dokument přesmerovávat. Dávejte pozor především na správný zápis uvozovek - celkem jsou v tomto elementu pouze čtyři! Tip č. 7: Přidání stránky k oblíbeným položkám kliknutím na odkazChcete-li, aby si uživatelé mohli přidat vaší stránku k oblíbeným položkám bez toho, aby museli v menu Oblíbené klikat na volbu Přidat k oblíbeným položkám a následně vše ještě potvrzovat stiskem tlačítka OK, můžete jim vytvořit odkaz, který se postará o jednodušší zařazení vaší stránky mezi oblíbené. Stačí na libovolné místo stránky umístit následující kód:
Poznámka: modře označený text musí být umístěn v jediném řádku Jak vypadá výsledek si můžete vyzkoušet kliknutím na odkaz Tip č. 8: Odeslání e-mailu na dvě adresy současněZcela jednoduchou úpravou odkazu můžete dosáhnout toho, že po kliknutí na tento odkaz se otevře okno mailovacího programu s vyplněnou adresou dvou různých příjemců. Pokud pak uživatel něco napíše a stiskne tlačítko Odeslat, bude příslušná zpráva odeslána současně na obě adresy. Zdrojový kód vypadá následovně:
Například si tak můžete nechat posílat zprávy na e-mail domů i do zaměstnání. Chcete-li si vyzkoušet, jak to celé funguje, zkuste kliknout sem. Tip č. 9: Jak zajistit, aby se vaše stránky zobrazovaly hezky českyNěkteré browsery mohou nesprávně zobrazovat češtinu na vašich stránkách, proto je dobré hned v záhlaví definovat kódovou stránku, v níž je dokument napsán. To provedete jednoduchým meta-tagem, který umístíte mezi tagy <HEAD> a </HEAD>. Zdrojový kód tohoto tagu vypadá takto:
Pokud browser zná kódovou stránku 1250 (což zná většina browserů), automaticky se přepne a vaše stránky budou zobrazeny s dokonalou češtinou. Tip č. 10: Odkaz, který se podtrhne až po aktivaci kurzoremPokud si na stránce vytvoříte hyperlinkový odkaz, bude ve většině prohlížečů zobrazen podtrženým písmem, což může v některých případech působit rušivým dojmem. Chcete-li, aby se odkaz podtrhnul až v okamžiku, kdy na něj uživatel ukáže kurzorem myši, můžete si pomoci kaskádovými styly. Stačí kamkoli do stránky (nejlépe však na její začátek hned po tagu BODY) umístit následující kód:
Tolik tedy dnešní dlouhý díl seriálu o HTML. Za týden se těším opět nashledanou. Související články:
![]() |
![]() |
![]() |
Copyright 1996-2000 Computer Press, a.s., realizační tým |