Post on 03-Jun-2020
transcript
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