Následující HTML příkazy neměly být součástí testu. Pokud je po vás někdo bude chtít, zkuste to reklamovat. Mohou být ale užitečné.
Novinka: lokálně deklarované styly
Formuláře (pro spěchající: shrnutí)
Jistě jste se již setkali se stránkami, kde je možné něco vyplňovat, mačkat tlačítka a podobně. Všechny tyto prvky jsou nějak zpracovávány - zpravidla jsou součástí pole, které je označováno jako formulář (v současnosti se mohou vyskytovat i mimo, ale pak je musí obsluhovat program v javascriptu, napsaný přímo k tomuto prvku - to se po vás snad zatím chtít nebude). Každému formuláři je přiřazena akce, která se vykoná po stisknutí specifického tlačítka, označovaného jako odesílací - submit. Můžeme tedy na své stránce mít i více než jen jeden formulář, i když to asi moc nedává smysl.
Odesílací tlačítko obsahuje odkaz na program, který je zpracuje, například na stránku, napsanou v php tak, aby mohla přijímat data z tohoto formuláře. Po stisknutí odesílacího tlačítka se přejde na adresu, uvedenou u formuláře jako celku, a před jejím načtením se serveru předají zadaná data. Odkaz má tedy tvar URL (uniform resource locator).
Ukázka úseku html kódu, která představuje formulář:
| <form action="/search" name=f> <input name=hl type=hidden value=cs> <input maxlength=2048 name=q size=55 title="Vyhledat" value=""> <input name=btnG type=submit value="Vyhledat Googlem"> <input name=btnI type=submit value="Zkusím štěstí"> <input id=all type=radio name=lr value="" checked> <label for=all>Prohledat web</label> <input id=il type=radio name=lr value="lang_cs"> <label for=il>Stránky pouze česky</label> </form> |
Kód jsem vypreparoval ze stránky www.google.cz odstraněním značek a textů, které se mohou normálně vyskytnout na stránce. Tag "label" by se vlastně ani nemusel použít, text by šel napsat normálně za definici tlačítka - takto je ale ošetřeno, že se bude při změně rozměrů okna prohlížeče držet prvku, ke kterému je určen (parametr "for" má hodnotu parametru "id" prvku input, zde "radiobutton" - historická rádia měla ještě v sedmdesátých letech tlačítka, u kterých bylo mechanickou vazbou zajištěno, že zůstalo zmáčktnuté vždy jen jedno z nich).
Význam tagů v předchozí ukázce
| <form> | spolu s </form> označuje začátek a konec úseku, který tvoří formulář. | |
| action="/search" | adresa stránky (url), která se vyvolá, pokud dojde k stisku libovolného tlačítka "submit" | |
| name=f | je zvykem, že každý takový objekt se nějak jmenuje. | |
| <input> | veškeré vstupní prvky. To, zda se jedná o editační položku či tlačítko, určuje parametr "type" | |
| type=text | (nemusí se uvádět) - normální vstupní políčko | |
| type=hidden | nezobrazí se a hodnotu "value" nelze měnit, vrátí se ale formuláři. Tímto způsobem si můžete předávat mezivýsledky, pokud se vám dotaz nevejde na jeden formulář. | |
| type=radio | tzv. radiobutton - slouží k výběru jedné z několika možností, každá vypadá jako samostatné tlačítko. | |
| type=submit | odesílací tlačítko - tím se formulář odešle na adresu, uvedenou u tagu "form". | |
Rozmístění polí formuláře po okně prohlížeče obvykle provádíme pomocí tabulky bez okrajů (žádný parametr "border", popřípadě border="0").
Další podrobnosti o formulářích naleznete například na stránce Jak psát web.
Pro zpracování je třeba nějaký php soubor. Na serveru FSH by mělo php fungovat; umístěte následující text do nějaké stránky, umístěte jej sem, změňte příponu na ".php" a zkuste jej použít jako hodnotu parametru "action" u tagu "form":
<?php
foreach($_POST as $value)
{
echo $value."<br>";
}
?>
|
Samotný program nebudu komentovat. Kdo by měl zájem o výuku php, mohu doporučit volitelný předmět Aby to mohlo fungovat, musí být u tagu "form" uveden parametr "method" s hodnotou "post":
| <form action="/search" name=f method="post"> |
Pokud je otázka jednoduchá (krátké řetězce), může být použita metoda "get" místo "post" (stačí intuitivně zaměnit řetězce); zadané parametry se pak objeví v adrese stránky za otazníkem (viz google).
Můžete si také prohlédnout (zobrazit zdrojový kód, okopírovat a přizpůsobit):
Poznámka: na Linuxu, tedy i na serveru FSH, se před přechodem na nový řádek (LF) nesmí psát návrat vozíku (CR). Bohužel, všechny dostupné editory v MS Windows to dělají a při zpracování php pak server hlásí chyby. Opravit kód musíte po přihlášení do Linuxu. Na zkoušku raději doporučuji použít soubor na mé stránce (včetně jmen položek formuláře, jako tabulka), který je univerzální (dle následujícího příkladu):
| <form action="http://users.fs.cvut.cz/~hlavavla/post.php" method="POST" name="A"> |
Rámce umožňují rozdělit stránku na více částí tak, že každou lze prohlížet zvlášť (má i samostané posuvníky, scrollbars, atd.). Samotná stránka s rámy pak ale neobsahuje jejich obsah, ale jen seznam stránek (rozumějte adres, url), ze kterých se obsah rámů vytvoří - lze použít i jakoukoli cizí stránku na internetu. Když se tato možnost objevila, autoři takto používaných stránek protestovali, protože jde o zneužití autorského díla (autor rámů si jen přidal reklamu a stránku mohl vydávat za svou). Poznámka - stránka se seznamem rámů přeci jen něco obsahuje - text, který se zobrazí na prohlížečích, které neumí rámy.
Tag "Frameset" popisuje, jak se stránka rozdělí. Stránku lze rozděšlit na dva, tři či váce dílů, ale vždy buď jen vodorovně, nebo jen svisle. Pokud potřebujete kombinaci, musíte jako obsah rámu použít jinou stránku, která také obsahuje "Frameset". Popis například pro oddělení 311 bodů širokého sloupce vlevo, jeho naplnění stránkou "menu.htm" ve stejném adresáři, a zbytek naplněním "uvod.htm", se napíše takto:
<frameset framespacing="0" border="0" cols="311,*" frameborder="0"> <frame name="menu" target="main" src="menu.htm" scrolling="no"> <frame name="main" src="uvod.htm" scrolling="auto" target="_self"> <noframes> <body> <p>Tato stránka používá rámce, v nichž jsou dostupné následující odkazy:</p> <p><a href="kontakt.htm">kontakty</a></p> </body> </noframes> </frameset> |
Zeleně psaná část se nás netýká. Rámy musí být pojmenované, jen tak je možné, aby menu vlevo fungovalo. Pro přesměrování otevřeného okna kdekoli ve webovém prohlížeči se totiž nechá použít parametr "target" příkazu anchor ("a"), například pro naši ukázku by odkaz v menu mohl vypadat následovně:
| <a href="kontakt.htm" target="main"> |
Rekapitulace.
Pokud potřebujeme stránku dělenou ve dvou směrech (například odříznuté záhlaví a menu v levém sloupci), musíme stránku rozdělit nejprve jednou a pak tuto stránku použít jako obsah jednoho z políček další sady Frameset.
| <frameset> | spolu s </frameset> označuje začátek a konec úseku, který tvoří seznam rámů. | |
| cols | určuje počet rámů vyjmenováním jejich rozměrů (v počtu obrazových bodů, tedy pixelů). Místo jednoho z čísel může být hvězdička ( "*" ), což značí "celý zbytek". Také můžete použít procenta - například cols="30%,*" znamená, že první sloupec bude zabírat 30% šířky okna, ve kterém se zobrazuje, a druhý celý zbytek (hvězdička znamená dopočtení). | |
| rows | totéž pro dělení svisle na horní a dolní část, jen ta procenta tu nedávají smysl (každý prohlížeč by si to mohl vykládat různě, proto je nepoužívejte). Nesmí se objevit "rows" a "cols" u jednoho "frameset". | |
| <frame> | definice obsahu jednoho rámu. | |
| target | jméno podřízeného rámu v hierarchii - nepotřebujeme... | |
| src | adresa, kde je html soubor, obsahující popis definice obsahu jednotlivého rámu (html stránka) | |
| name | jméno rámu - s rámem, který se nejmenuje, nelze z ostatních manipulovat! | |
Další podrobnosti o rámech naleznete například na stránce Jak psát web.
Styl můžete kromě připojení z css souboru napsat i přímo tam, kde se použije. Výhodou je, že pak se nemusí nijak jmenovat. Dva příklady použití:
čára nad textem:
<p style="text-decoration : overline;">
Tady nad tím textem je pruh.
</p>
odstranění případného podtržení u hypertextového odkazu:
<a href="#styly" style="text-decoration : none;">
Tento odkaz není podtržen</a>
Pro obarvení několika písmenek musíme text k obarvení nějak označit. Na to nám slouží značka <span>, která jinak neznamená vůbec nic (používá se k pojmenování úseku textu, například kvůli programování v javascriptu, viz stránku předmětu Programování pro web). Změňme barvu textu:
Normální text, <span style="color : red">červený text</span>, normální text.
Barvu ovšem změní i <font color="red">. "Zvýraznění" textu:
Normální text, <span style="background-color: yellow">zvýrazněný text</span>.<br>
Ještě vyzkoušet:
Tady nad tím textem je pruh.
Normální text, červený text, normální text, zvýrazněný text.
Takže přidáme také ještě odkaz na Jak psát web.