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 – služba počítačové sítě Internet je založena na principech:

• prezentace informací pomocí grafického rozhraní,

• uložení informací ve formátu textových dokumentů,

• zdrojové soubory 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, adalší)

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 používá se ve 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 webovýchstrá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

• HTML 2.0

– první formální specifikace - IETF (Internet Engineering TaskForce) návrh standardu - označován HTML 2.0, plně vyhovujenormě 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ší možnosti formátování dokumentu

• HTML 4.0 - 1997

– podpora kaskádových stylů, rámy

– skripty vložené do stránky, multimediální objekty

– rozšířené možnosti tabulek, formulářů

– i18n (podpora více jazyků, tok textu zleva doprava)

– 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

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, Netscape Navigator, Opera,Mozilla).

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),

• je lépe chyby opravovat „za pochoduÿ, než po dopsání celého doku-mentu,

• jedna stránka by neměla obsahovat příliš souvislého textu bez nadpisua obrázků, či jiných prvků pro členění textu,

• je lépe stránku nejprve připravit a pak na ni odkazovat, než vystavovatstrá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ředdvěmi lety),

• pro jednoduchou správu stránek je lépe se vyhnout prvkům, kterýmúplně nerozumíte.

Uložení WWW stránky

Jak uložit vlastní WWW stránky?

1. Použijeme program winscp, kde na vyžádání zadáme přihlašovacíjméno (login name) a heslo.

2. V případě, že adresář public html není na serveru vytvořen, vytvo-říme jej jako nový adresář.

3. Zkopírujeme náš soubor (vytvořený WWW dokument) do tohoto ad-resáře a přejmenujeme jej na index.html.

4. Zkontrolujeme, zda stránka je v prohlížeči správně zobrazena — uve-deme v něm patřičnou url adresu: http://homel.vsb.cz/~loginname.

Použití odkazů

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/durakova/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"

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/”

Základní struktura HTML stránky

Formátovací značky označovány také tag, zajistí textu určitý význam,který je interpretován použitým prohlížečem.

<!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>Name_of_page</title>

</head>

<body>

<H1>Nadpis první úrovně</H1>

<P>První odstavec obsahuje ...</P>

<P>V druhém odstavci se popisuje ...</P>

</body>

</html>

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>

Definice HTML(XML) stránky

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Moje první XHTML stránka</title>

</head>

<body>

<p>Tohle je jednoduchý XHTML stránka.</p>

</body>

</html>

Deklarace typu dokumentuProstřednictvím deklarace !DOCTYPE se odvoláváme na DTD (Dekla-

race 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á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ý, jazyk angličtina.

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átorelementu. Text mezi počátečním a koncovým tagem daného typutvoří 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. Nemusí hlásit žádnou chybu!

Ve Windows, znak „<ÿ je možné napsat (bez přepnutí klávesnice naanglickou) stiskem kláves pravý Alt + <, znak „>ÿ stiskem kláves pravýAlt + >.

Členění dokumentu

HTML dokument

HEAD

První HTML stránka

BODY

H1

Nadpis první úrovně

P

P

P

První odstavec obsahuje . . .

Druhý odstavec popisuje . . .

Poslední odstavec . . .

.

.

.

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.

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é)

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žaduje:

• Všechny atributy mají hodnoty v uvozovkách

• Zákaz křížení tagů

Rozdíly XHTML oproti HTML

Další rozdíly XHML oproti HTML:

• 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 musejí 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ál – 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číchrůzného typu, každý prohlížeč interpretuje jinak

• Rychlost natahování pomalé je způsobeno zejména

– mnoho obrázků

– text 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

Čeština / cestina

Diakritika na HTML stránkách. Každý znak (písmeno, číslice, . . .) jereprezentován jako číslo od 0 do 255 (jeden bajt), angličtina používá 128znaků, tzv. ASCII.Od 128 do 255 jsou vyhrazeny pro diakritizované znaky jiných jazyků

(např. kód Latin-1 - pro češtinu použitelné jen á a í).Kódování = přiřazení diakritizovaných znaků číslům od 128 do 255.

Problém: mnoho různých kódování.

• 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š, ž, ť, Š, Ž, Ť

Jak docílit patřičný typ kódování?

• automatické meta nastavení

<meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-2">

nebo:

<meta http-equiv="Content-Type"

content="text/html;

charset=windows-1250">

• vytvořit stránku několikrát, pokaždé v jiném kódování, čtenář si vy-bere kódování

• použít serverové programy na překódování (Saczech nebo ModCzech)

• použít český kód, (nejčastěji windows-1250)

• psát bez hacku a carek (čili v ASCII), špatně čitelné

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

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