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 jazykhtml
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), MACOSadalší).
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édokumentyjsoupřístupné celémusvětu (nainternetu). Anglickéoznačení web charakterizujeprá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ěkolikverzí-http0.9,http1.1,http3.0ažhttp4.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 URLsepoužívávrůznýchslužbách:WWW,FTP,e-mail,telnet,... Struktura URL Jednoznačná adresa v rámci internetu identifikuje různé objekty zdroje, aťsejednáowebové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ázevserveruvrámcivšb, vsb vrámcičeskédoménydoménavsb(vysokáškolabáň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 HTML0.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 Screenshotwebbrowseruzroku1993,autorTBL: 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). HTML3.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ů HTML4.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).
HTML4.01-1999 opravy drobných chyb ve specifikaci HTML 4.0 HMTL4.01jedefinovánvpodobětříDTD(DocumentTypeDefiniton) v jazyce SGML: StrictDTD 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. JeproduktempřetvořeníHTML4aXML1. 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), opravachyb zapochodu,nežpodopsáníceléhodokumentu, 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 sinformací,žeseteprvesenaní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 JakostudentiVŠB-TUOstravamátedvě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, nebojemožnépoužítsgmlparser. 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 </xxx>, 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>, <title> i <title> prohlížeč chápe a interpretuje stejně. POZOR! Na začátku tagu nesmí být mezera! Například < title> je špatně! Tagy, které prohlížeč nezná, ignoruje, přičemž nemusí hlásit žádnou chybu. Poznámka:VeWindowsjemožnéznak < napsat(přizapnutéčeskéklávesnici)stiskemklávespravýalt + <,obdobněprolevouzávorku >.
Základní struktura HTML stránky HTML dokument HEAD Moje první HTML stránka BODY H1 Nadpis první úrovně P Prvníodstavecobsahuje... P Druhýodstavecpopisuje.... P Posledníodstavec...
Základní struktura HTML dokumentu Na předchozím obrázku byl vykreslen tento zdrojový kód: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <title>moje první HTML stránka</title> </head> <body> <H1>Nadpis první úrovně</h1> <P>První odstavec obsahuje...</p> <P>V druhém odstavci se popisuje...</p> </body> </html> 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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>ukázka práce s DTD</title> <style type="text/css"> body { background-color: silver; } div { margin: auto 50px; width: 300px; border: 10px solid red; background-color: black; color: yellow; } </style> </head>
<body> <div>ukázka práce s DTD</div> </body> </html> 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: <!DOCTYPE html za mezerou je značka dokumentu, malá písmena jsou vyžadována uxhtml PUBLIC veřejná deklarace typu dokumentu jako je HTML, XHTML, WML, NewsML, MathML "-//W3C//DTD HTML 4.01 Transitional//EN" jaký standard je použit, zde přechodový, jazykem DTD je angličtina.
Č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ódlatin-1-pročeštinu,použitelnéjenproáaí). Pro správnou interpretaci českých znaků je proto nutné v části <head> uvést patřičné kódování češtiny. Kódováním rozumíme přiřazení diakritizovanýchznakůnapozicích128až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štinabezháčkůačárek,tj.hackyacarkyjsouodstraneny 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ýchznací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 Mod- Czech), píšemebezhackuacarek(čilivascii),cožmůžebý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" Pokudjesouborumístěnoúroveňvýš,stačídoodkazupřidatznakpro 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ísmocuriernenívhodné bezpatkové- Arial, Helvetica, Verdana
Pozadí 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 zvýrazněnípříp.oživení-použitíobrázkučibarvynapozadíje nevhodné, velký obrázek se dlouho natahuje nečitelnépísmo-dbátnakontrastbarev 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 protvůrcejeisnažšípráce(jednouprovšechnystrá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