Úvod do tvorby WWW stránek

1. LVA Úvod do tvorby WWW stránek Ing. Zdeněk Votruba

2. HTTP – World Wide Web LVA WAN Je pro každého jistě důvěrně známou službou. Ve svém principu se jedná o distribuovanou databázi www stránek (dat), které jsou navzájem propojeny vazbou (odkazy) a fyzické umístění stránek je zcela irelevantní (stejně jako komponent stránek). V zásadě rozdělujeme www stránky na statické, statické se skripty a na dynamicky generované. Podle toho používáme různé programovací nástroje (jazyky) pro tvorbu těchto stránek. Prakticky vždy vycházíme z jazyka HTML a v případně potřeby jej doplňujeme skriptovacími jazyky ať již vykonávanými na straně klienta (v prohlížeči), či na straně serveru (ASP, PHP).

3. Klienti pro přístup ke službě LVA WAN • Internet Explorer: součást Windows 95 a výše, v současné době jednoznačně nejpoužívanější browser. Podporuje všechny obvyklé skriptovací jazyky včetně objektů OCX. Nižší zabezpečení přenášených dat. • Netscape Comunicator: jediný reálný konkurent předchozího produktu, nepodporuje skriptování v jazyce VB script, mívá problémy s OCX objekty. Oproti IE je o něco rychlejší a především bezpečnější. Lépe podporuje Javu a java script

4. Klienti pro přístup ke službě LVA WAN • Mosaic:dnes již téměř nepoužívaný browser vycházející z koncepce Netscape Navigatoru. Nepodporuje skripty kromě Java a JavaScript • Opera:browser vycházející z IE, ke svému běhu jej potřebuje mít nainstalován. • Arachne:v současné době jediný používaný DOSovský browser, podporuje Cookies, nepodporuje Javu • FireFox:Nová generace webového prohlížeče od fy. Mozilla. Nabízí možnost současného prohlížení více stránek v panelech v rámci jednoho okna prohlížeče, vyšší úroveň zabezpečení, blokování popup reklam, vylepšen je správce záložek, integrovaný vyhledávač

5. Platformy pro realizaci WWW serverů LVA WAN • OS UNIX: pravděpodobně nejpoužívanější a nejstabilnější OS pro WEBy, převažuje aplikace APACHE. Problémy s podporou ASP skriptů • Windows NT: co do počtu instalací konkurující Unixu, vlastní realizace stránek zajišťuje „Internet Information Server“. Podpora všech běžných skriptů včetně PHP a ASP • Novell Netware: vhodný pro menší a středně zatížené www servery, podporuje všechny běžné skripty, zvlášť vhodné řešení pro webové servery intranetu s vysokým zabezpečením, podporuje ASP, PHP, NSP

6. Platformy pro realizaci WWW serverů LVA WAN • Windows 98/2000: pro málo zatížené a málo navštěvované stránky lze použít „Personal WEB Server“, kde je max. počet současných připojení zpravidla 10, podporuje všechny běžné skripty. PWS je součástí distribuce Windows 98, lze doinstalovat z adresáře ADD IN či stáhnout od Microsoftů.

7. Typy WWW stránek LVA WAN Statické stránky: stránky jsou vytvořeny čistě v kódu HTML, obsah ani grafická podoba stránek se nemění v závislosti na době, připojeném uživateli, zobrazovaných datech atd. Statické stránky se skripty na straně klienta: stránky nemění svůj obsah, mohou se graficky modifikovat podle různých událostí ze strany klienta.

8. Typy WWW stránek LVA WAN Dynamicky generované stránky: mění obsah svého kódu podle událostí na straně serveru (čas, typ přihlášení, stav serveru, změna databáze) Stránky se skripty na straně serveru: stránky mění svůj obsah, mohou se graficky modifikovat podle různých událostí ze strany klienta i serveru. Používané především na internetové a intranetové informační systémy. Vytvářeny zpravidla jako kombinace PHP/ASP + HTML + skripty na straně klienta.

9. Princip činnosti WWW stránek LVA WAN WWW server browser na straně klienta HTML kód včetně klientských skriptů Zde se zpracovávají PHP a ASP skripty Vykonání klientských skriptů + HTML kódu Klientské PC Uložení všech komponent stránky

10. Nástroje pro tvorbu WWW stránek LVA WAN Principiálně platí, že pro vytvoření stránky postačí jakýkoli textový editor (Poznámkový blok, Norton Commander, FAR), který do uloženého kódu NEVKLÁDÁ své formátovací znaky. To pak v praxi znamená, že je třeba detailně znát příkazy HTML, které potřebuje autor v kódu použít. Proto se ve většině případů (kromě profesionálních programátorů stránek) používají nástroje, které základní grafickou a obsahovou interpretaci stránek vygenerují podle grafické předlohy sami do HTML kódu a detailní zpracování se pak provede ručně.

11. Nástroje pro tvorbu WWW stránek LVA WAN Tyto editory tedy usnadní mnoho času a práce při rutinních operacích, na druhou stranu automaticky vygenerovaný HTML kód je zpravidla nepříliš optimální a ne vždy vystihuje přesnou podobu požadované stránky. Prakticky vždy je nezbytné provést ruční „dotvoření“ stránky a redukci redundantního “balastu“ vzniklého automatickou generací HTML kódu stránky.

12. Nástroje pro tvorbu WWW stránek LVA WAN Word / Excel:je zřejmě nejjednodušší a nejméně efektivní nástroj pomocí kterého se dá HTML stránka vygenerovat. Věrnost obrazové předloze je velice nízká, HTML kód je silně neefektivní. Použít lze pouze pro triviální stránky – doporučuji NEPOUŽÍVAT ! PowerPoint: obdobné vlastnosti jako Word s tím, že dokáže vygenerovat soustavu navzájem propojených stránek – doporučuji NEPOUŽÍVAT ! Ve verzích 2000 negeneruje HTML stránky ale XLM !

13. Nástroje pro tvorbu WWW stránek LVA WAN FrontPage98:je relativně použitelný nástroj pro první seznámení s tvorbou stránek. Zpravidla je nutná manuální verifikace HTML kódu. Pozor na skripty ! Velice dobrá implementace OCX objektů. FrontPage2000(XP):obdobné jako v předchozím případě. Lépe generuje zdrojový kód, má chyby při práci s OCX objekty. Raději doporučuji přehlednější FP98. Umí zpracovávat XLM stránky.

14. Nástroje pro tvorbu WWW stránek LVA WAN HomeSite:je nástroj, kde autor již musí sám vytvářet celý HTML kód (není WYSYG). Vhodný pro pokročilé programátory stránek 1StPage:viz výše, obdobně celá řada dalších editorů, v tomto případě je skutečně velice obtížné zvolit jeden konkrétní. Doporučuji si několik vyzkoušet a zjistit, který Vám osobně vyhovuje.

15. Struktura statické WWW stránky LVA WAN <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <title> Název stránky </title> </head> <body> <a href="http://www.euroshop.cz/">http://www.euroshop.cz/</a> </body> </html>

16. Základní doporučení pro prezentaci a tvorbu stránek LVA WAN • Vytvářejte větší počet kratších stránek • Nepřehánějte to s grafikou na stránkách • Jména souborů s HTML kódem doporučuji klasicky 8 znakové – NE dlouhá jména souborů s diakritikou • Vše, co je součásti stránky musí být fyzicky umístěno na publikovaných místech – nikoli odkazy typu: file://C:\stranka\ja.gif • Používejte tabulky!

17. Programování WWWstránek LVA WAN V předchozí prezentaci jsme si stanovili základní principy pro tvorbu stránek, ukázali jsme si dva základní postupy při jejich tvorbě (přímý zápis zdrojového kódu – využití automatických generátorů kódu) a především jsme si vysvětlili základní typy www stránek (statická, dynamická, skriptovaná na straně klienta, skriptovaná na straně serveru). Nyní k několika základním postupům, které se při tvorbě www stránek pravidelně využívají. Tato přednáška však v žádném případě nemůže nahradit samostatnou práci a procvičení tohoto tématu na PC – NEZBYTNÉ !!!

18. Práce s textem LVA Pro práci s textem platí prostá zásada – text, který chcete zobrazit se do HTML kódu pouze napíše bez jakýchkoliv dalších příkazů (tagů). WAN Tímto způsobem však nelze provést další formátovací operace s textem, v tomto případě je již nutné použít např. následující příkazy jazyka HTML: <BR> Jeden z mála nepárových tagů, provádí odřádkování, v případě použití Front Page stačí stisknou Enter <p align="center">Toto je pokusný text</p> Uvedený text vycentruje na střed stránky <p align="justify">Toto je pokusný text</p> Uvedený text zarovná do bloku (oba okraje), ve Front Page není standardně ikona ! <p align="justify"><font face="Comic Sans MS" size="3"> <b>Toto je pokusný text</b></font></p> Uvedený text zarovná do bloku (oba okraje), text bude uvedeným fontem, velikostí 3, tučně

19. Práce s odkazem LVA Možnost vzájemného propojování stránek je vlastně principem služby WWW, proto je znalost jejího vytvoření klíčová. WAN <a href="http://seznam.cz">Na Seznam</a> Základní syntaxe je triviální, v tomto případě je text „Na Seznam“ odkazem na adresu seznam.cz. V případě, že pracujete např. ve FrontPage,je postup následující: • Napíšete text, který má být odkazem („Na Seznam“) • Označíte jej jako blok • Kliknete na ikonku „Create or edit hyperlink“ • Do řádku URL uvedete adresu stránky („seznam.cz“)

20. Práce s odkazem LVA Ve výše uvedeném příkladu se nová stránka otevře v tom samém okně jako předchozí. Pokud toto chcete změnit, povšimněte si v okně definice odkazu (viz. výše) specifikátoru Target frame. Ten (po stisku tlačítka „Change Target Frame“ otevře dialog pro definici, kde se má nové okno otevřít WAN Pokud tedy chceme, aby se odkaz otevřel v novém okně, vygeneruje se kód: <a href="http://seznam.cz" target="_blank">Na Seznam</a>

21. Práce s obrázkem LVA Obrázek na WWW stránku lze vložit jinak jako prostý obrázek, jako pozadí stránky, jako obrázek do tabulky, jako pozadí tabulky či jako pozadí buňky tabulky. Ve většině případů doporučuji obrázek vkládat do buňky tabulky (různá rozlišení, formátování stránky,…). Pokud však přesto chceme vložit obrázek čistě na stránku, je situace jednoduchá: WAN <img border="0" src="Mraky.bmp"> Vytváříme-li stránku ve FrontPage, stačí mít kurzor na místě, kam chcete vložit obrázek a stisknou tlačítko „Insert Picture From File“ V dialogu pro výběr souboru pak běžným způsobem vybereme umístění a jméno obrazového souboru. Je ale zřejmé, s že tímto způsobem vložení obrázku budeme mít problém s přesným umístěním obrázku na stránce, zvláště při různých rozlišeních. Proto je vždy vhodnější umístit obrázek (zvláště je-li jich na stránce více) do buněk tabulky.

22. Práce s obrázkem LVA V případě, že požadujeme vložení obrázku do pozadí stránky, měníme vlastnost stránky. Takže zdrojový kód bude vypadat takto: WAN <body background="pozadi.jpg"> Vytváříme-li stránku ve FrontPage, klikneme kdekoliv na stránce pravým tlačítkem myši a v menu vybereme položku „Page Propertis“.V záložce „Background“ zvolíme příslušný soubor – viz. obr.: Vždy když vkládáte obrázek, zkontrolujte si, že cesta k obr. souboru je definovaná relativněk souboru ze kterého se na něj odkazujete !!! NELZE připustit syntaxi např.: „file:\\c:/pokus/pozadi.jpg” !!!!

23. Práce s tabulkou LVA Jak jsem si již několikrát zdůraznili, je tabulka základním formátovacím nástrojem při tvorbě WWW stránek. Umožňuje „udržet“ grafickou podobu stránky při různých rozlišení, na různých prohlížečích a monitorech. Vlastní definice tabulky je jednoduchá – definujete začátek tabulky, buňky v první řádce, konec řádky tabulky a tak dále až do konce tabulky. WAN <table border="1" cellspacing="1" width="100%"> <tr> <td width="33%">1.buňka 1. řádku</td> <td width="33%">2.buňka 1. řádku</td> <td width="34%">3.buňka 1. řádku</td> </tr> <tr> <td width="33%">1.buňka 2. řádku</td> <td width="33%">2.buňka 2. řádku</td> <td width="34%">3.buňka 2. řádku</td> </tr> </table> Pokud tedy potřebujeme např. tabulku 2 řádky na 3 sloupce, bude zdrojový kód následující:

24. Práce s tabulkou LVA Pracujeme-li ve FrontPage, je tvorba tabulky obdobná tvorbě tabulky ve Wordu: stiskneme ikonu „Insert Table“ a myší vybereme počet řádků a sloupců: WAN V našem případě je výsledek následující : I další práce s tabulkou (buňkou) je obdobná práci s tabulkou (buňkou) ve Wordu. Nezapomeňte, že každá buňka tabulky se vlastně chová jako samostatný odstavec textu (zarovnávání, fonty, barva, pozadí, obrázek,…)

25. Práce s rámci (frame) LVA Velice často se při tvorbě stánek setkáváme s problémem, že požadujeme, aby se měnila pouze část stánky a část se neměnila. Pro tento účel se používají rámce, což jsou vlastně samostatné html stránky, které se spojí pomocí další html stánky do jedné. Tím lze dosáhnout toho, že odkaz z jedné části stránky (jednoho frame) provede změnu jiné části stránky (druhého frame). Graficky lze situaci znázornit např. takto: WAN Index.htm 1.htm frame1 2.htm frame2 3.htm frame3

26. Práce s rámci (frame) LVA V tomto případě tedy budeme mít celkem 4 html soubory. Soubory 1.htm, 2.htm a 3.htm jsou běžné html soubory, zajímavý je soubor Index.htm, který je vlastně spojuje do jedné stránky. Příklad takového souboru může být v našem případě například tento zdrojový kód: WAN <frameset cols="150,*"> <frame name="frame1" target="rtop" src=„1.htm"> <frameset rows="20%,*"> <frame name="frame2" target="rbottom" src=„2.htm"> <frame name="frame3" src=„3.htm"> </frameset> <noframes> <body> <p> Tato stránka používá frame, ale Váš browser je nepodporuje. </p> </body> </noframes> </frameset>

27. Práce s rámci (frame) Právě v tomto případě je užitečný parametr „Target Frame“ při vytvoření odkazu – můžete definovat, kde se nová stránka (na které pozici framu) má zobrazit. LVA WAN V případě, že pracujete s FrontPage, je vytvoření rámců celkem jednoduché. V nabídce File – New – Page vyberte záložku „Frames Pages“. Zde je několik předdefinovaných základních struktur. V náhledu je vidět celková grafická podoba rozdělení rámců. Nezapomenout uložit VŠECHNY soubory !

28. Děkuji pro dnešek za pozornost a těším se zase příště … LVA WAN … příští týden se budeme věnovat webové grafice a videu ... Do příště umět základní operace při tvorbě WWW stránek !