1 UNIVERZITA PARDUBICE DOPRAVNÍ FAKULTA JANA PERNERA WEBOVÉ STRÁNKY DLOUHODOBÉ HRY SEMESTRÁLNÍ PRÁCE Z PŘEDMĚTU ÚVOD DO INFORMAČNÍCH TECHNOLOGIÍ DATU...
UNIVERZITA PARDUBICE DOPRAVNÍ FAKULTA JANA PERNERA
WEBOVÉ STRÁNKY DLOUHODOBÉ HRY HTTP://PERPETUUM.WZ.CZ SEMESTRÁLNÍ PRÁCE Z PŘEDMĚTU ÚVOD DO INFORMAČNÍCH TECHNOLOGIÍ
DATUM ODEVZDÁNÍ 7.2.2007
JIŘÍ KALINA, STUDENT OBORU TŘD
JIŘÍ KALINA
WEBOVÉ STRÁNKY HTTP://PERPETUUM.WZ.CZ
1. OBSAH: 1. Obsah
2
2. Úvod
3
3. Základy jazyka HTML
4
3.1. Jazyk HTML
4
3.2. Základní struktura stránky
4
3.3. Použití rámců
5
3.4. Využití kaskádových stylů
5
4. Struktura původních stránek v jazyku HTML
6
4.1. Rozvržení stránek na rámce
6
4.2. Formátování jednotlivých stránek
7
5. Využití skriptu PHP pro inovaci stránek
8
5.1. Úvod do problematiky PHP skriptu
8
5.2. Užití PHP skriptu na stránkách Perpetua
8
5.3. Výsledná podoba stránek
10
6. Další internetové služby
12
6.1. Statistika návštěvnosti www.navrcholu.cz
12
6.2. Pořadí odkazu na vyhledávači Google.com
12
6.3. Konsorcium W3C
13
7. Prameny
14
2
JIŘÍ KALINA
WEBOVÉ STRÁNKY HTTP://PERPETUUM.WZ.CZ
2. ÚVOD: Tato práce se zabývá vznikem, strukturou a vývojem internetových stránek dlouhodobé hry pro veřejnost Perpetuum na adrese http://perpetuum.wz.cz. Stránky plní funkci média, přinášejícího aktuální informace účastníkům korespondenční hry, navíc jsou prostorem pro vyvěšování souborů určených ke stažení a plní také nezanedbatelnou propagační funkci. Protože nebyla žádoucí přílišná dynamičnost stránek, které by tak mohly konkurovat »mateřskému« serveru http://iklubovna.cz, byla zvolena jednoduchá forma s využitím prostého jazyka html, později rozšířená na elementární prvky skriptu PHP. Díky poměrně malé návštěvnosti stránek bylo možné výhodně využít zdarma nabízeného hostingu na serveru http://webzdarma.cz, který současně podporuje PHP skript a poskytuje dostatečný prostor pro požadované účely, zejména pro ukládání souborů ke stažení (elektronické verze časopisu a komiksu ke hře). Pozornost při vývoji stránek byla věnována také propojenosti s jinými stránkami a zanechání maximálního množství odkazů v internetu, což se projevilo na postupném zvýšení počtu návštěv a kladném vývoji hodnocení pořadí stránek po zadání klíčových slov vyhledávačem http://google.com. Ke sledování návštěvnosti a řady s ní souvisejících parametrů bylo využito služby serveru http://navrcholu.cz, která je v nejjednodušší formě tarifu Lite poskytována zdarma.
3
JIŘÍ KALINA
WEBOVÉ STRÁNKY HTTP://PERPETUUM.WZ.CZ
3. ZÁKLADY JAZYKA HTML 3.1. JAZYK HTML HTML (Hyper Text Markup Language) je podle zjednodušené definice jazyk pro tvorbu a formátování internetových stránek, zároveň je podmnožinou obecnějšího značkovacího jazyka SGML. Původně byl jazyk HTML vyvinut (kolem roku 1989) jako prostředek pro komunikaci mezi fyziky v centru jaderného výzkumu CERN; pro svoji jednoduchost a účelnost se však časem rozšířil jako prostředek tvorby internetových stránek na internetu v rámci služby WWW (World Wide Web). Hypertext lze definovat jako text neomezený linearitou, tedy text, který v sobě obsahuje odkazy na jiné své části, což umožňuje libovolně »přeskakovat« mezi více částmi jednoho textu nebo více texty bez nutnosti pročítat celý text lineárně od začátku do konce, tak jak to odpovídá způsobu lidského myšlení. Služba WWW je v současnosti nejrozšířenější službou internetu. Její podstatou je právě prohlížení stránek psaných v jazyce HTML, které tvoří základní jednotku služby WWW. Stránky jsou přenášeny k uživateli (klientu) od poskytovatele (serveru) pomocí protokolu HTTP (Hyper Text Transfer Protocol). Základem jazyka HTML je formátování textu pomocí tzv. tagů, zapisovaných do špičatých závorek <>, což jsou vlastně příkazy pro interpret jazyka (prohlížeč), který tagy převede na značky, s jejichž pomocí tvoří výslednou grafickou podobu stránky tak, jak ji spatří uživatel.
3.2. ZÁKLADNÍ STRUKTURA HTML STRÁNKY Vlastní stránka je představována souborem s příponou htm nebo html, který obsahuje text (kód lze tedy vytvořit v libovolném textovém editoru) sestávající výhradně z tagů a formátovaného obsahu stránky (případně poznámek, které prohlížeč záměrně ignoruje). Tagy lze rozdělit na dvě základní skupiny – tagy párové a nepárové. Párové tagy jsou uspořádané dvojice příkazů stejného znění, kdy příkaz uzavřený v závorkách <> označuje začátek formátované oblasti a příkaz uzavřený v závorkách s lomítkem > označuje její konec. Nepárové tagy jsou samostatné příkazy, jejichž provedení vykoná prohlížeč právě tam, kde se tag nachází. Příkladem párového tagu může být podtržený text (označen je začátek a konec podtrženého textu), příkladem nepárového tagu obrázek vložený v textu. Nejdůležitějším tagem každé HTML stránky je tag , uvedený zcela na počátku zdrojového kódu stránky, který prohlížeči oznamuje, že uvedený text je zápisem stránky v jazyce HTML. Tag je tag párový, tudíž konec stránky musí být kódován tagem . Stránku v jazyce HTML lze rozdělit na dvě základní části, označené párovými tagy a – tedy na hlavičku a tělo. Hlavička obsahuje esenciální i doplňkové informace, platné v rámci celé stránky – např. nadpis, jazyk, ve kterém je stránka napsána, kódování textu na stránce, odkazy na další soubory, potřebné ke správnému zobrazení stránky, informace pro vyhledávače apod. Tělo stránky pak představuje vlastní obsah, který se zobrazí v prohlížeči HTML stránek, tedy texty, tabulky, odkazy, obrázky a další prvky. Není v možnostech tohoto textu a ani jeho účelem zmínit větší množství tagů, nutné k úplnému pochopení problematiky psaní HTML stránek, proto se omezíme na konstatování, že existují desítky možností, jak formátovat text změnou velikosti, barvy a řezu písma, barvy pozadí a odkazů, vkládáním obrázků na pozadí, do textu a mnoha způsoby jejich obtékání, užitím jednoduchých grafických prvků typu čar a prostých geometrických obrazců, vkládáním tabulek, seznamů, citací a dělením textu na odstavce a bloky. Veškeré formátovací příkazy jsou zadávány pomocí definovaných tagů, které lze navzájem vnořovat a jejich upřesňujících parametrů, zva4
JIŘÍ KALINA
WEBOVÉ STRÁNKY HTTP://PERPETUUM.WZ.CZ
ných atributy, které se vepisují mezi závorky prvního tagu. Hodnoty atributů se vpisují mezi americké uvozovky, jak ukazuje následující příklad podtrženého textu zelené barvy velikosti 10: Zelený text velikosti 10.
3.3. POUŽITÍ RÁMCŮ Jedním z pozdějších rozšíření jazyka HTML je možnost využít při rozvržení výsledku zobrazeného v prohlížeči takzvaných rámců, definovaných užitím tagů a . Rámce umožňují rozvrhnout okno prohlížeče na obdélníkové oblasti tak, že se v každé oblasti zobrazuje jiná stránka, přičemž mezi rámci se lze na stránky libovolně odkazovat pomocí atributu target, udávajícího název cílového rámu odkazu (vizte ukázku zdrojového kódu v části 4.1.). Užitím rámců je tak možné dosáhnout např. stálého zobrazení grafické hlavičky stránky (nikoliv hlavičky ve smyslu kódu HTML), zobrazení »rozcestníku« s odkazy, kterým je možno přepínat mezi obsahem jednotlivých stránek apod. V současnosti se rozvržení okna prohlížeče na rámce téměř nevyužívá z důvodu nehomogennosti stránky jako celku (každý rámec má např. vlastní posuvník) a přednost je dávána generování stránky podle potřeb užitím některého ze skriptů (vizte např. PHP skript v části 5.2.).
3.4. VYUŽITÍ KASKÁDOVÝCH STYLŮ Pro rychlejší a jednodušší úpravu textu a grafiky pomocí předdefinovaných stylů (např. jeli třeba na stránce využít dva texty různé velikosti a barvy pro nadpisy, poznámky pod čarou, odkazy apod.) lze využít tzv. kaskádových stylů CSS (Cascading Style Sheets), tj. předem nadefinovaných hodnot jednotlivých atributů příslušných tagů. Kaskádové styly lze vložit buď přímo k příslušnému tagu, do hlavičky stránky a nebo do externího souboru, obvykle s koncovkou css. Zápis kaskádového stylu může pak vypadat například následovně: a
4. STRUKTURA PŮVODNÍCH STRÁNEK V JAZYKU HTML 4.1. ROZVRŽENÍ STRÁNEK NA RÁMCE Původní struktura stránek předpokládala jednotný vzhled se stále viditelnou hlavičkou v podobě loga hry; rozcestníku, umožňujícího zobrazovat ve třetí části plochy okna různý obsah a této největší části, ve které by se jednotlivé stránky zobrazovaly. K dosažení tohoto záměru byl použit nejjednodušší způsob využitím rámců (frames), jakožto jedné z možností rozšíření jazyka HTML. Důležitým požadavkem se záhy ukázalo také stejné zobrazení při prohlížení stránek v různých internetových prohlížečích (zejména Mozilla Firefox a Microsoft Internet explorer) a především při různém rozlišení monitoru. Proto byla stanovena pevná šířka zobrazovaných oblastí a proměnlivá šířka dalších oblastí, sloužících pro výplň na zobrazovacích jednotkách s šířkou vyšší než 800 obrazových bodů. Rozvržení rámců užitím tagu