celkem alespoň
pět funkčních odkazů, odkaz na soubor
ve stejném adresáři (ke stažení a podobně), odkaz na stránku
na jiném serveru odkaz na e-mail
adresu obrázek barevné písmo
nebo pozadí nadpisÚkol:
Vytvořit vlastní html stránku, která bude obsahovat
celkem alespoň
pět funkčních odkazů,
odkaz na soubor
ve stejném adresáři (ke stažení a podobně),
odkaz na stránku
na jiném serveru
odkaz na e-mail
adresu
obrázek
barevné písmo
nebo pozadí
nadpis
Poznámka: stránka musí prokazatelně patřit konkrétnímu studentovi. Pokud není na školním serveru, je třeba ji jednoznačně označit. Protože zde nemůže být uvedeno rodné číslo, zbývá již jen přihlašovací jméno do školní sítě s uvedením serveru, nebo e-mailová adresa do školy ve formátu xxx@student.fsid.cvut.cz; tato adresa nemusí být zobrazena, například může být v poznámce (tag <!-- ..., viz dále). U stránek mimo školní server se předpokládá větší rozsah, než jen splňující výše uvedená kritéria.
Další požadavky pro rok 2002 a pozdější:
úsek dokumentu formátován pomocí
tabulky (bez okrajů) do dvou sloupců
v pravém sloupci
vložena tabulka (včetně okrajů, vhodně vyplněná)
alespoň dvě
buňky tabulky sloučeny (colspan nebo rowspan)
zkontrolujte, zda
stránka obsahuje všechny povinné tags (zejména <html>,
<head> a <body>).
Stránku ke kontrole předvádějte v programu MS Internet Explorer a přes internet (nikoli ze souboru).
(Poznámka: V roce 2002 začal být používán program Frontpage, umožňující intuitivní vytváření stránek)
Pro základní umístění dostačuje server FSICD1 (z Internetu přístupný jako student.fsid.cvut.cz). Adresář zde získáte snadno - vytvoříte si ve svém domovském adresáři (který je namapován jako N:) adresář se jménem PUBLIC.WWW (jméno nutno dodržet - pozor na překlepy!; v MS Windows lze použít pravé tlačítko myši, adresáře se zde jmenují "složka"). Do tohoto adresáře umístíte soubor se jménem INDEX.HTM . Vhodným přeeditováním si následně vytvoříte domovské stránky, které by měl http deamon na serveru zpřístupnit veřejně. Například uživatel s přihlašovacím jménem NovakJ7 by měl domovský adresář HOME:NovakJ7 namapován jako N: a pokud by vytvořil (např. v DOSu příkazem "md N:\PUBLIC.WWW") výše zmíněný adresář a soubor, byla by jeho domovská stránka přístupná jako http://student.fsid.cvut.cz/~novakj7 . Stránka ovšem nemusí být dostupná vždy, protože ne vždy je příslušný server a program na něm v provozu. Také vám zabírá místo ve vašem adresáři - po dobu výuky předmětu ZPP to musíte přetrpět, ale jinak je to další důvod k jejímu přemístění jinam.
Poznámka - česká klávesnice. V učebnách se klávesnice přepíná současným stiskem levého Shiftu a klávesy Ctrl. Pokud nemůžete klávesnici přepnout, zkuste podržet levý Alt a na numerické klávesnici "vyklepat" kód znaku. Vlnovka (tilda, ~) má kód 126, zavináč (@) má kód 64.
Na Internetu je řada serverů, které nabízejí bezplatně svůj diskový prostor - zpravidla si pak k vašim stránkám připojí svou reklamu buď vložením reklamního proužku přímo do stránky, vyvoláním samostatného okna s reklamou, nebo s použitím rámů (frameset). Poslední varianta je nežádoucí, protože při přechodu na jinou stránku může rámec s reklamou v prohlížeči zůstat (nutno zkontrolovat). Pro výběr místa se můžete inspirovat na Pinknetu. Osobně jsem vyzkoušel vytvořit stránku na serveru reflektor (pod názvem alik.misto.cz) a jsem zatím vcelku spokojen. Nejznámější server www.volny.cz po mě vyžadoval konfiguraci modemem (firma Video on Line se zabývá především bezplatným připojením k Internetu).
Pokud si požádáte o konto na některém ze serverů, zpravidla vyplníte on-line dotazník a bude vám přiděleno uživatelské jméno, heslo, a také jméno serveru a způsob, jakým na něm máte umístit své stránky (zpravidla adresa ftp serveru, popřípadě jméno adresáře). Informace si někde uložte, mohou se později hodit. Zdůrazňuji, že tvorba domovských stránek mimo školního serveru není předmětem výuky v tomto předmětu.
Stránky na www serverech jsou psány zpravidla v "hyper text mark-up language" (jazyku). Ten byl vytvořen tak, aby je bylo možné psát bez jakýchkoli dalších prostředků. Stránky obsahují tzv. "tag", které buď poskytují informaci pro celý zbytek stránky, nebo častěji obklopují úsek textu jako závorky. Samotné tagy jsou uzavřeny mezi ostré závorky (znaky "menší než" a "větší než", < a >), aby se odlišily od ostatního textu. Pokud jsou dva (počáteční a uzavírací), obsahují stejné slovo, ale druhý začíná znakem "/" (lomítko), viz příklady dále. Tagy i jejich parametry lze psát malými i velkými písmeny, jak uznáte za vhodné.
Celý soubor ve formátu HTML musí být uzavřen do takovýchto závorek se slovem html. Takový soubor zpravidla obsahuje hlavičku, označenou tagem "head", a za ní tělo stránky, označené "body". V hlavičce bývá název stránky, označený "title". Nejkratší rozumná stránka může mít tedy tvar:
| <html> <head><title>Pokusná stránka</title></head> <body>Na stránce se pracuje </body></html> |
Některé html příkazy (tag) mohou mít parametry. Například u příkazu "body" by člověk čekal zadání barvy pozadí stránky nebo barvy textu. To se provede vložením parametru, který následuje rovnítko a hodnota (podle normy jazyka má být v úvozovkách, ale zpravidla neškodí jejich vynechání).
| <html> <head><title>Pokusná stránka</title></head> <body bgcolor="#FFF5C1" text="#800000">Na stránce se pracuje </body></html> |
Čísla u barev jsou v hexu, vždy dva hexa znaky pro červenou, zelenou i modrou složku. Pokud prohlížeč www stránek neumí příslušnou barvu zobrazit, nahradí ji nejbližší dostupnou (u textu) nebo vzorkem (u pozadí).
Za zmínku stojí, že v html jazyku není při zobrazování činěn rozdíl mezi mezerou a přechodem na nový řádek - obojí je zobrazováno jako mezera. Pokud chceme, aby text obsahoval odřádkování, musíme vložit značku <BR> (break). V tomto textu je používáno odřádkování s vynecháním půlřádku, tedy odstavec (značka <p>). Tato značka jako jedna z mála změnila od původní definice jazyka význam - zpočátku znamenala konec odstavce, dnes jeho začátek. Ovšem dodnes z tohoto důvodu není třeba psát uzavírací značku </p>. Tento text je ale vytvořen programem Frontpag Express, který předpokládám obdobné značky (</p>) dělá. Musím konstatovat, že tento program zadání některých parametrů neumožňuje (například i na této stránce použitá barva pozadí jednotlivé buňky v tabulce) a je třeba je doplnit přímo do html kódu.
Další vysvětlení je na zvláštní stránce.
Omezení jazyka html
Nelze nastavit ani používat tabulátory. Místo tabulátorů je nutno používat tabulku. Aby se to kompenzovalo, je možné do jednotlivé buňky tabulky umístit opět tabulku (až 3-násobné vnoření dle standardu html 1.2, ale viděl jsem stránky se šestinásobným). Tabulka se používá i pro rozvržení textu do sloupců. Ve všech těchto případech je tabulka bez okrajů, proto pokud chceme tabulku s okraji (méně časté), musíme je zadat.
Více mezer je zobrazeno jako jedna mezera. Pokud má být v textu více mezer, musíme použít nedělitelné mezery (v html editorech se vytvoří obdobně, jako ve Wordu - držíme klávesy Ctrl a Shift a mačkáme mezeru). Za mezeru se přitom považuje i konec řádku ve zdrojovém textu.
Zadávání pevných rozměrů tabulek a podobně, jak to dělají některé verze MS Office, je nežádoucí. Je-li to třeba, je vhodné zadávat šířku v procentech. HTML text se má přizpůsobit při zobrazení dle možností prohlížeče.
Tento program je dostupný po namapování disku L: (dávkou) v adresáři L:\STUDIUM\U210\FPEXPRESS, nebo jej lze získat současně se stažením programu MS Internet Explorer 5.0 ze serveru www.microsoft.com (z toho usuzuji, že jej lze legálně stáhnout odkudkoli). Možná by jste si jej mohli nahrát do svého adresáře a pak by snad šel spustit. Kopie, která je k dispozici na Citrix Metaframe Serveru, je ovšem nefunkční (neumožňuje zadávat přímo html kód). Tento program doporučuji zapakovat (pak se vejde na disketu) a použít, pokud budete vytvářet požadovanou stránku na svém domácím počítači. Vyžaduje MS Windows 95 a nebo vyšší, dodržuje standard HTML 2.0. Pro zájemce je stručný úvod k tomuto programu na samostatné stránce.
Pokud upřednostníte program MS Frontpage, dostupný v učebnách počítačového centra, můžete stránku vytvářet podobně, jako v MS Wordu. Na záložkách vlevo dole si pak můžete občas kliknout na list, označný "HTML", a zkontrolovat, co program vlastně vytvořil, popřípadě provést nutné úpravy. MS Frontpage umožňuje řadu dalších vylepšení stránek, které jsou v MS Frontpage Express možné jen přímým zapsáním html kódu. Na druhé straně je mnohem agresivnější a nenechá si vnutit kód, který nezná (například právě dále popisovaný Java Script). Někdy vnucuje svou představu o vzhledu stránky. Nevýhodou zůstává, že tento program firma Microsoft dodává jen v rámci programů Open a Select - což není na závadu u našich studentů, kteří se do praxe dostanou až za pět let, kdy bude situace jistě zcela odlišná (a možná se budou používat zcela odlišné programy)..
Obrázky se typicky vkládají ve dvou formátech, jpeg a gif. Oba jsou pakované, liší se ale způsobem pakování a počtem přenášených barev. Starší gif v základní formě přenáší 256 barev (definovaných tabulkou palety, která je součástí souboru). Pakování zde spočívá v tom, že pokud je více stejných bodů za sebou, zaznamenají se společně. Tento typ záznamů je tedy vhodný pro okopírované výřezy oken z Windows, grafy, různá schemata a podobně. Vzhledem k menšímu počtu barev se hodí i pro velmi malé fotografie (do velikosti několika kilobyte). Gif lze také použít tam, kde se mají obrázky pohybovat (sekvence nesmí překročit několik málo snímků).
Grafika jpeg (v DOSu používají obrázky zkratku jpg) je zaznamenána jako významné body, mezi kterými se zbytek dopočte. Výsledný obrázek proto trpí jistou ztrátou dat; při jeho generování se zadává, jaká ztráta je přípustná. Například obrázek, kde jsou body v průměru ze 75% správné, vypadá ještě velmi dobře. U obrázků v html dokumentu můžeme velikost zadat a prohlížeč si je přizpůsobí; u tohoto typu kódování je jisté zvětšení či zmenšení bez viditelných deformací (např. gif při zvětšení o 10% zkazí některé čáry). Jpeg je určen pro fotografie, jeho použití pro schemata či dokonce sejmuté úseky textu se projevuje rozmazáním okrajů písmen (i když stejně velká fotografie o stejné kvalitě vypadá naprosto ostře).
V programu MS Frontpage (i Express) lze vložit obrázek i v jiném formátu, který jsou schopna používat Windows na daném počítači. Nesmíte ale zapomenout kliknout pravým tlačítkem myši na příslušný obrázek a zvolit, v kterém ze dvou příslušných formátů bude obrázek uložen. To se týká i obrázků vložených přes schránku (clipboard).
Pokud máte textový soubor, který je připraven ke zobrazení na textové obrazovce (například sloupečky čísel, uspořádané pomocí mezer), můžete jej umístit přímo do textu pomocí tagu <pre> a ukončovacího</pre>. Text mezi těmito tagy se zobrazí neproporcionálním fontem (všechna písmena stejně široká) a pokud je více mezer pohromadě, zobrazí se všechny. Taktéž se zobrazí přechody na nový řádek. Mezi těmito značkami předformátovaného textu se mohou vyskytnout jiné tagy, které se samozřejmě provedou, nikoli zobrazí.
Základní návod pro naše studenty je na zvláštní stránce, která také upřesňuje, které značky (tagy) se mají studenti naučit.
Řada návodů na tvorbu html dokumentů je na Seznamu. Nejlepší metoda pro začátečníky je hledat hezké stránky a dívat se na jejich zdrojový kód, což každý prohlížeč umožňuje (u MS Internet Exploreru zkuste pravé tlačítko na zobrazovanou stránku a volbu "Zobrazit zdrojový kód").
Stránky se mohou podle svého obsahu, či podle použitého prohlížeče dynamicky měnit. Typicky je to umožněno použitím Javascriptu. Krátký návod napsal například pan Václav Bunc v rámci své diplomové práce. Spoustu skriptů lze také najít v různých archivech, například na adrese java.Tatoušek.cz, odkaz "Archiv skriptů" (nespouštět žádnou ukázku skriptu z kategorie "žertíky", pokud se ještě chystáte něco dělat). Řadu dobrých návodů naleznete na stránkách ing. Jiřího Koska. Stránky s funkčními skripty na straně serveru možná budete vytvářet, pokud si ve čtvrtém ročníku zvolíte povinně volitelný směrový předmět Inženýrská informatika. Při zkoušení skriptů je třeba dodat, že počítače v učebnách zdaleka neumožňují spouštět vše, co lze napsat.
I když budou stránky interaktivní, nemohou autorovi stránek nic sdělit zpět. Na to je třeba podpora serveru, na kterém se pak vytvářejí místo stránek programy. Základním vzorem jsou cgi scripty (common gateway interface), které generují stránku na základě dat, vyplněných zpravidla do formuláře. CGI script může být napsán v jakémkoli jazyce, nejoblíbenější je php, často stačí i scriptový jazyk bash, obvyklý na Linuxu (obdoba, byť nesrovnatelně výkonnější, dávkových souborů v DOSu). Vzhledem k tomu, že většina uživatelů nemá právo psát vlastní cgi programy, nabízí řada serverů předpřipravené vlastní. Zpravidla požadují registraci. Kdysi jsem zprovoznil cgi script, který vracel vyplněný formulář e-mailem na zadanou adresu a registraci nepožadoval. V důsledku toho ale například vrací nevhodonou stránku. Více informací je na příslušné stránce. (momentálně mimo provoz).
