Tvorba jednoduchých WWW stránek

Daniela Ďuráková

VŠB - Technická univerzita OstravaKatedra 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é sou-bory obsahují ”čistý” text (příkazy, . . .),

• odkazy na části dokumentů, jiné dokumenty, obrázky, zvukové sek-vence, 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ýtvyřízení požadavku pomalé. Novější verze HTTP umožňují během jednohospojení 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 URLJednoznač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ís-těných na webovém serveru na počítač uživatele. Dnes se používá iprotokol 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ámciInternetu, 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ůmv 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, for-mulář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 jazykuSGML (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 Defi-niton) v jazyce SGML:

– Strict DTD

elementy, které nejsou ve standardu 4.0 označeny jako nedo-poručované,

– Transitional DTD

obsahuje i nedoporučované elementy, včetně starších rozšíře-ný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 doku-mentu.

Verze XHTML

X ve zkratce XHTML vzniklo ze slova eXtensible, což by mělo znamenatrozšíř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ěnoproti 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 tvorbya rozumět jednotlivým aspektům, nutných k prezentaci WWW stránek.

1. Editor, který umí pracovat s čistým ASCII textem, (HTML doku-menty jsou textové soubory). V prostředí operačního systému Win-dows postačí notepad.

2. Znalost jazyka HTML - schopnost vytvořit zdrojový kód ve formátuHTML.

3. Prohlížeč pro kontrolu a zobrazení vytvořených WWW stránek (nej-používanější Microsoft Internet Explorer, Mozilla, Opera, NetscapeNavigator).

4. Připojení k síti internet pro zpřístupnění WWW stránek ostatnímuž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ánkys 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ředdvěmi lety),

• pro následnou správu stránek je lépe použít bezpečně zvládnuté prvkyHTML.

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-agendav čá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énoserveru (homel.vsb.cz), přihlašovací jméno (login name) aheslo.

• Zkopírujeme náš soubor (vytvořený WWW dokument) do ad-resáře public html se jménem index.html.

V obou případech kontrolujeme, zda přenesená stránka je v prohlížečisprá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á nutnostpouží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éhotypu 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ýtmezera! Například < title> je špatně!

• Tagy, které prohlížeč nezná, ignoruje, přičemž nemusí hlásit žádnouchybu.

Poznámka: Ve Windows je možné znak „<ÿ napsat (při zapnuté české klá-vesnici) stiskem kláves pravý Alt + <, obdobně pro levou závorku „>ÿ.

Základní struktura HTML stránky

HTML dokument

HEAD

Moje první HTML stránka

BODY

H1

Nadpis první úrovně

P

P

P

První odstavec obsahuje . . .

Druhý odstavec popisuje . . .

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ánpouž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 adresehttp://homel.vsb.cz/~dur30/ukazka.html.

Obsah deklarace typu dokumentu

Prostřednictvím deklarace !DOCTYPE se odvoláváme na DTD (Deklaracetypu 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ánau XHTML

• 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á 128znaků, 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 <head>

uvést patřičné kódování češtiny. Kódováním rozumíme přiřazení diakritizo-vaný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 danouvariantu?

• 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 naUnixu 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á kompati-bilita

• 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 proble-matický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ář sisám vybere kódování,

• použijeme serverové programy na překódování (Saczech nebo Mod-Czech),

• 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 za-psá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ůvodupřenositelnosti na jiný server. Odkazy na cizí zdroje a stránky by naopakměly být absolutní, aby byla zajištěna jejich funkčnost právě v případě jejichpřenesení na jiný server.Tvar relativního odkazu se od absolutního liší neuvedením jména ser-

veru — stačí pouze jméno dokumentu, případně uvedení patřičného adresářeze 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 procestu 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ýchstrá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, MozillaEditor.

Proč XHTML

Nástupce HTML využívá výhod XML a HTML.

• Přísná, ale jednoduchá pravidla vedou ke snadnému automatizova-né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 no-vou 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. (In-ternet 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číchrů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ůso-beno

– 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ů (tak-zvaný 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í jenevhodné, 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 obrulož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 ausnadní 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 tech-nologie publikovat různé texty i obrazový materiál. Uživatel s nimi pracujepř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šembý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