Tvorba jednoduchých WWW stránek

Daniela Ďuráková

VŠB - Technická univerzita Ostrava Katedra informatiky

Vznik WWW technologie • Vznik - CERN 1989-90, vedoucí projektu Tim Berners-Lee • Cíl - infrastruktura pro sdílení výsledků vědeckých výzkumů • Vyvinutá technologie – protokol HTTP – adresování objektů pomocí URL adres – jazyk HTML

World Wide Web WWW – dnes služba počítačové sítě Internet, založena na principech: • prezentace informací pomocí grafického rozhraní, • uložení informací ve formátu textových dokumentů, čili zdrojové soubory obsahují ”čistý” text (příkazy, . . .), • odkazy na části dokumentů, jiné dokumenty, obrázky, zvukové sekvence, videosekvence ap. • nezávislost na platformě při zobrazování (Windows, UNIX (Linux), MAC OS a další).

World Wide Web • Tvorba pomocí speciálního jazyka — HyperText Markup Language (HTML), který umožňuje používání odkazů, značkovací jazyk založený na SGML pro popis struktury webových stránek • Pro prezentaci dokumentů se používají prohlížeče, které umožňují zobrazit WWW stránku v grafické podobě. • Vytvořené dokumenty jsou přístupné „celému světuÿ (na Internetu). • Anglické označení „webÿ charakterizuje právě propojení dokumentů pomocí odkazů. • Soubory vytvořené pomocí jazyka HTML mají typicky příponu .html, případně .htm.

HTTP - Hypertext Transfer Protocol • protokol pro přenos stránek mezi webovým serverem a prohlížečem • jednoduchý aplikační protokol vystavený nad protokolem TCP • několik verzí - HTTP 0.9, HTTP 1.1, HTTP 3.0 až HTTP 4.01 Průběh vyřízení požadavku 1. Navázání spojení. 2. Zaslání požadavku klientem. 3. Zaslání odpovědi serverem. 4. Uzavření spojení. V případě stránek s mnoha vloženými objekty (obrázky apod.) může být vyřízení požadavku pomalé. Novější verze HTTP umožňují během jednoho spojení vyřídit několik požadavků/odpovědí.

URL - Uniform Resource Locator • URL je adresa, jednoznačně identifikuje zdroj v rámci Internetu • URL se používá v různých službách: WWW, FTP, e-mail, telnet, . . . Struktura URL Jednoznačná adresa v rámci internetu identifikuje různé objekty – zdroje, ať se jedná o webové stánky, e-mailové adresy, soubory, . . . URL má (většinou) následující tvar: http://www.vsb.cz/cz/vitejte/areal.html kde význam jednotlivých částí je následující: • http — znamená typ protokolu, který zajišťuje přenos stránek umístěných na webovém serveru na počítač uživatele. Dnes se používá i protokol https, což je stejný protokol jako http, pouze přenášená data jsou kryptována (zabezpečená).

• www.vsb.cz — je jedinečné označení (zde jméno) serveru v rámci Internetu, které je tvořeno z částí: – www — název serveru v rámci VŠB, – vsb — v rámci české domény doména vsb (Vysoká škola báňská), – cz — označení národní či jinak světově registrované domény (v našem případě české) • /cz/vitejte/ — další část URL je cesta k patřičným dokumentům v adresářovém systému serveru, • areal.htm — název konkrétního dokumentu. / — oddělovače jednotlivých částí adresy.

HTML - Hypertext Markup Language • značkovací jazyk založený na SGML pro popis struktury web stránek • nezávislý na platformě Historie a vývoj HTML • HTML 0.9 - 1991 Tim Berners-Lee - členění textu do několika logických úrovní, použití několika druhů zvýraznění textu, lze zařadit odkazy a obrázky Screen shot web browseru z roku 1993, autor TBL: http://www.w3.org/History/1994/WWW/Journals/CACM/screensnap2 24c.gif

• HTML 2.0 – první formální specifikace, návrh standardu (HTML 2.0), plně vyhovuje normě SGML (ISO 8879 z roku 1986), – základní formátování a strukturování dokumentu, obrázky, formuláře.

• HTML 3.0 - 1995 návrh standardu Dave Raggett z laboratoří Hawlett-Packard formalizoval HTML+, vytvořil jeho deklaraci DTD (Document Type Declaration) v jazyku SGML (Standard Generalized Markup Language). • HTML 3.2 - 1996 – výrobci prohlížečů přidávají nestandardní rozšíření HTML, – konsorcium W3C proto vybírá společnou podmnožinu rozšíření a schvaluje HTML 3.2, – lepší formátování dokumentu, podpora tabulek, Java apletů • HTML 4.0 - 1997 – podpora kaskádových stylů, frames (rámy), – skripty vložené do stránky, multimediální objekty, – rozšířené možnosti tabulek, formulářů, – vícejazyčná podpora, – podporu HTML 4.0 mají prohlížeče (IE6, NN7, O7, M1.6).

• HTML 4.01 - 1999 opravy drobných chyb ve specifikaci HTML 4.0 HMTL 4.01 je definován v podobě tří DTD (Document Type Definiton) v jazyce SGML: – Strict DTD elementy, které nejsou ve standardu 4.0 označeny jako nedoporučované, – Transitional DTD obsahuje i nedoporučované elementy, včetně starších rozšířených elementů, – Frameset DTD je téměř totožná s Transitional, podporuje použití frames. Poznat lze podle uvedeného DTD na prvním řádku zdrojového dokumentu.

Verze XHTML X ve zkratce XHTML vzniklo ze slova eXtensible, což by mělo znamenat rozšíření. Skutečnost je opačná, počet použitelných prvků se snížil. Je produktem přetvoření HTML 4 a XML 1. Dnes se používá XHTML ve třech verzích: • XHTML 1.0 přechodové (transitional) • XHTML 1.0 striktní (strict) • XHTML 1.1 XHTML 1.0 strict je oproti trans pracnější, XHTML 1.1 je okleštěno proti HTML o nestandardní prvky.

Požadavky pro tvorbu a zpřístupnění WWW stránek Vytvoření vlastních WWW dokumentů znamená zvládnout techniku tvorby a rozumět jednotlivým aspektům, nutných k prezentaci WWW stránek. 1. Editor, který umí pracovat s čistým ASCII textem, (HTML dokumenty jsou textové soubory). V prostředí operačního systému Windows postačí notepad. 2. Znalost jazyka HTML - schopnost vytvořit zdrojový kód ve formátu HTML. 3. Prohlížeč pro kontrolu a zobrazení vytvořených WWW stránek (nejpoužívanější Microsoft Internet Explorer, Mozilla, Opera, Netscape Navigator). 4. Připojení k síti internet pro zpřístupnění WWW stránek ostatním uživatelům internetu.

Doporučení a zásady pro tvorbu WWW stránek • Kontrola zdrojového textu prohlížečem (lépe více prohlížečích), • oprava chyb „za pochoduÿ, než po dopsání celého dokumentu, • souvislý text členit pomocí nadpisu a obrázků, či jiných prvků pro členění textu, • stránku nejprve připravit a pak na ni odkazovat, než vystavovat stránky s informací, že se teprve se na ní pracuje, • stránky by měly obsahovat informace o poslední aktualizaci (některé informace ztrácejí po delším čase smysl - například konání akce před dvěmi lety), • pro následnou správu stránek je lépe použít bezpečně zvládnuté prvky HTML.

Uložení WWW stránky Jako studenti VŠB - TU Ostrava máte dvě možsnoti 1. Přes webové rozhraní školy na adrese http://uzivatel.vsb.cz/osobni-agenda v části Správce domovských stránek je možné spravovat své webové konto. 2. Použitím programu pro přenos souborů v heterogenním prostředí. • Použijeme program winscp, kde na vyžádání zadáme jméno serveru (homel.vsb.cz), přihlašovací jméno (login name) a heslo. • Zkopírujeme náš soubor (vytvořený WWW dokument) do adresáře public html se jménem index.html. V obou případech kontrolujeme, zda přenesená stránka je v prohlížeči správně zobrazena — uvedeme v něm patřičnou URL adresu: http://homel.vsb.cz/~loginname.

Syntaxe HTML • elementy, tagy • atributy • znakové entity • DTD, DOCTYPE Kontrola syntaxe Kontrola správné syntaxe HTML stránky pomocí – specializovaných programů a služeb, – nebo je možné použít SGML parser. Validační služby on-line: – W3C HTML Validation Service na adrese ”http://validator.w3.org/” – Dr. Watson na adrese ”http://watson.addy.com/”

Přehled HTML značek (tagů) • Struktura • Text • Bloky • Seznamy • Odkazy • Obrázky • Tabulky • Rámy • Objekty • Formuláře

• Hlavička • Skripty a styly (kaskádové)

Zásady při používání značek Tagy ve většině případů fungují jako závorky v matematice. • použití levého (počátečního) tagu ve tvaru <xxx> vyvolá nutnost použít i pravý (koncový) tag , v případě tzv. párového tagu. Nepárový levý tag se používá například při vkládání obrázků. • Konkrétní význam elementu je dán použitým tagem — identifikátorem elementu. Text mezi počátečním a koncovým tagem daného typu tvoří tělo elementu. • Identifikátory elementů mohou být psány malými i velkými písmeny. Zápisy ve tvaru <TITLE>, <TiTlE>,

Nadpis první úrovně

První odstavec obsahuje ...

V druhém odstavci se popisuje ...

Formátovací značky — tagy, zajistí textu význam, který je interpretován použitým prohlížečem. Význam je ovlivněn použitím konkrétní množiny tagů dle DTD.

Vliv DTD na vzhled HTML stránky <style type="text/css"> body { background-color: silver; } div { margin: auto 50px; width: 300px; border: 10px solid red; background-color: black; color: yellow; }

Jak uvedená ukázka vypadá po interpretaci prohlížeče lze najít na adrese http://homel.vsb.cz/~ dur30/ukazka.html.

Obsah deklarace typu dokumentu Prostřednictvím deklarace !DOCTYPE se odvoláváme na DTD (Deklarace typu dokumentu ) v dokumentech HTML (XML, XHTML). Tvar dodržuje ustálené pořadí s následujícím významem: •
Čeština nebo cestina? Problém diakritiky na HTML stránkách. Každý znak (písmeno, číslice, . . .) je reprezentován jako číslo od 0 do 255 (jeden bajt), angličtina používá 128 znaků, tzv. ASCII. Pozice 128 až do 255 jsou vyhrazeny pro diakritizované znaky jiných jazyků (např. kód Latin-1 - pro češtinu, použitelné jen pro á a í). Pro správnou interpretaci českých znaků je proto nutné v části uvést patřičné kódování češtiny. Kódováním rozumíme přiřazení diakritizovaných znaků na pozicích 128 až 255. Kódování češtiny má několik variant Nesprávné uvedení či vynechání parametru charset může vést k chybné interpretaci českých znaků. Jaký je výběr? V jakých případech volíme danou variantu?

• ASCII čeština bez háčků a čárek, tj. hacky a carky jsou odstraneny • ISO-8859-2 (ISO Latin 2) mezinárodní kódovací norma pro jazyky střední Evropy, standard na Unixu a na Linuxu, u Microsoftu označován ”Středoevropské jazyky (ISO)” • CP1250 (Windows-1250) základní kódování u firmy Microsoft, platforma Windows, označován ”Středoevropské jazyky”, vzniklo z ISO-8859-2, chybí plná kompatibilita • MAC (Macintosh) standard užívaný na počítačích Apple Macintosh • CP852 (PC Latin 2) původní český a slovenský DOS

• KEYBCS2 (Kamenici) kód bratří Kamenických, textový režimu MS-DOS • KOI8-CS (KOI-8 CS) kdysi standard pro státy střední a východní Evropy • Unicode, UTF-8 užití pro všechny světové jazyky, mezinárodní kódování znaků založené na tabulce 256 používaných znaků Rozdíly kódování - nejlépe zjistit v kódovacích tabulkách a ověřit na problematických znacích š, ž, ť, Š, Ž, Ť.

Jak docílit požadovaného kódování? Máme několik možností, jak daný problém řešit: • Užijeme automatické meta nastavení <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> kde je atribut charset vyplněn podle našeho užívaného kódování, • vytvoříme stránku několikrát, pokaždé v jiném kódování, a čtenář si sám vybere kódování, • použijeme serverové programy na překódování (Saczech nebo ModCzech), • píšeme bez hacku a carek (čili v ASCII), což může být špatně čitelné.

Použití odkazů – přenos mezi servery Odkazy, pomocí kterých jsou propojeny různé soubory, mohou být zapsány dvěmi odlišnými způsoby. Pomocí • relativního odkazu a • absolutního odkazu. Vlastní související stránky by měly používat relativní odkazy z důvodu přenositelnosti na jiný server. Odkazy na cizí zdroje a stránky by naopak měly být absolutní, aby byla zajištěna jejich funkčnost právě v případě jejich přenesení na jiný server. Tvar relativního odkazu se od absolutního liší neuvedením jména serveru — stačí pouze jméno dokumentu, případně uvedení patřičného adresáře ze stromové struktury adresářů na disku, kde jsou dokumenty umístěny.

Například: Absolutní odkaz na dokument "http://www.cs.vsb.cz/vyuka/zpp/projekt.html" a odpovídající relativní odkaz "projekt.html" Pokud je soubor umístěn o úroveň výš, stačí do odkazu přidat znak pro cestu na vyšší úroveň adresáře. "../projekt.html"

Editory 1. Strukturní editor • přímá úprava výsledného kódu, • nutná znalost jazyka HTML, • užívají profesionální tvůrci dynamických a jinak specifických stránek, z důvodu kontroly nad vytvářeným kódem, • text file • Notepad, HomeSite, UltraEdit, české EasyPad a PSPad. 2. Wysiwyg editor • zobrazuje při psaní přímo vzhled stránky v prohlížeči, • automatické generování kódu, (kód při ukládání i trochu mění!!!) • pohodlné zpracování, • neukazují to, co pak prohlížeč opravdu zobrazí • Microsoft FrontPage, Dreamweaver, Adobe GoLive, Mozilla Editor.

Proč XHTML Nástupce HTML využívá výhod XML a HTML. • Přísná, ale jednoduchá pravidla vedou ke snadnému automatizovanému zpracování. • Všechny aplikace XML mají stejný základ syntaktických pravidel. (Podpora univerzálních programů a knihoven funkcí pro každou novou aplikaci XML.) • Vyšší srozumitelnost pro počítače by měla vést k lepšímu zpracování u vyhledávačů, katalogů stránek a dalších automatizovaných služeb. • Připravenost na ukončení podpory HTML.

Rozdíly XHTML oproti HTML Striktně se vyžadují první dva body: • Všechny atributy mají hodnoty v uvozovkách • zákaz křížení tagů • tagy a atributy jsou pouze malými písmeny • nepárové tagy končí lomítkem • párové tagy jsou párové povinně • všechny atributy musí mít hodnotu • interní javascript a styly se zapisují jiným způsobem • dokument má mít XML prolog. • dokument požaduje správný doctype.

Působení stránek na čtenáře • grafický design - první uživatelův dojem, ohled na široký okruh lidí • struktura stránek, navigace na stránkách • syntakticky správný HTML kód - méně práce pro prohlížeč • vhodné metainformace - méně práce pro vyhledávací roboty Jednotlivé prvky je vhodné uvážlivě vyvážit, každý dle svého citu.

Obsah versus forma Ideálem, ke kterému se chceme přiblížit, je vyváženost obsahu a formy. (Internet a HTML jazyk) původně byly určeny jako médium zprostředkující obsah. • Formátování stránek - nese sebou chyby v zobrazování v prohlížečích různého typu, každý prohlížeč interpretuje jinak • V případě, že rychlost natahování stránky je nízká, může být způsobeno – mnoha obrázky, – textem s mnoha definicemi fontů, velikostí a barev písma. • Čitelnost písma – volba - individuální – patkové - písmo curier není vhodné – bezpatkové - Arial, Helvetica, Verdana

– pro dlouhé texty patková písma s rozdílnou tloušťkou tahů (takzvaný serif, například Times New Roman). – font nezadávat - prohlížeč použije defaultní font • Pozadí – zvýraznění příp. oživení - použití obrázku či barvy na pozadí je nevhodné, velký obrázek se dlouho natahuje – nečitelné písmo - dbát na kontrast barev • Jednotný vzhled stránek autor určuje styl - měl by se dodržet jednotný styl pro všechny stránky – jednotná úprava nenutí uživatele učit se na každé stránce jiné ovládání a rozmístění prvků – rychlejší natažení (sdílené soubory s formátovacími prvky) – rozlišuje daný web od ostatních stránek – pro tvůrce je i snažší práce (jednou pro všechny stránky)

Nevhodné!!! • Nadpisy z obrázků – dlouho se natahují – vyhledávací roboti nejsou schopni nadpis přečíst – při příštím natahování stránek se opakuje pomalost (není-li obr uložen) • Flashové prvky – ne všichni uživatelé mají flash – nemusí se zobrazit – psychologické bariéry

Problémy dnešního webu • informační zahlcení • nutnost lepšího vyhledávání • nestandardní rozšíření HTML jednotlivými výrobci prohlížečů Řešení problému? XML - eXtensible Markup Language • pomocí DTD můžeme vytvářet nové jazyky založené na XML • vhodně zvolené elementy přidají dokumentu informační hodnotu a usnadní prohledávání Webu • XML má striktnější syntaxi než HTML (neukončené tagy, ohraničení atributů uvozovkami apod.) ? snazší implementace

CMS — Content Management System Systémy pro správu obsahu umožňují uživatelům bez znalosti web technologie publikovat různé texty i obrazový materiál. Uživatel s nimi pracuje přes webové rozhraní, které je určeno pro správu obsahu, manipulaci zajišťují běžné webové prohlížeče. Hlavní funkce poskytované redakčními systémy • vytváření, editace a vlastní publikování textových dokumentů na webu • tvorba pomocí WYSIWYG editoru - generovaný HTML kódovšem bývá větší než při ruční tvorbě • správa obrazového materiálu, vytváření interních i veřejných galerií • možnost statistiky pomocí funkcí k tomu určených • správa diskusních fór • správa souborů • podpora funkcí na uživatelské a administrátorské úrovni.

CMS — Content Management System Hlavní představitelé • Wiki • PHP-Nuke (česká verze United-Nuke) • MAMBO CMS • Plone

Reference • www.jakpsatweb.cz/ • jm.vse.cz/html/hatmatilka/titul.html • www.kit.vslib.cz/ satrapa/www/ • www.kosek.cz/ • www.builder.cz • www.developer.sk • www.interval.cz • www.wdvl.com • msdn.microsoft.com/ie/ • developer.netscape.com