Ing. Igor Kopetschke Oddělení aplikované informatiky Ústav nových technologií a aplikované informatiky Fakulta mechatroniky a mezioborových inženýrských studií Technická univerzita v Liberci Email : igor.kopetschke@tul.cz WWW : http://www.nti.tul.cz/wiki/wikiuser:igor.kopetschke Přednášky : Pondělí 12:30 16:00 Úterý - Čtvrtek 9:00 12:00 Cvičení : Úterý Čtvrtek 12:30 16:00 Závěrečná zkouška : Pátek 9:00 12:00
Anotace: Předmět poskytuje základní seznámení s problematikou vytváření WWW stránek. Zahrnuje jak techniky pro stanovení struktury stránek (jazyk XHTML a jeho konstrukce), tak tak pro řízení jejich vzhledu (CSS). Seznamuje studenty i s obecnými principy a metodikami vytváření WWW prezentací. Osnova předmětu: Základní pojmy, XHTML, kostra dokumentu, výchozí prvky pro text Formátování dokumentu, entity, seznamy Grafika pro web, odkazy, adresy a lokátory Základy CSS, selektory Barva a pozadí prvků Písmo a úprava textu Rámy a jejich vlastnosti Tabulky Obtékání, umisťování a pokročilé formátování Stanovené hodnoty v CSS, design stránek Úprava seznamů, formuláře Přístupnost a použitelnost stránek, strukturování prezentace
Doporučená literatura: Cederholm D.: Webdesign s webovými standardy, Zoner Press, 2004 Staníček P.: CSS kaskádové styly, Computer Press, 2003 Staníček P.: CSS hotová řešení, Computer Press, 2006 Krug S.: Webdesign: Nenuťte uživatele přemýšlet, Computer Press, 2003 Nielsen J.: Použitelnost domovských stránek, Zoner Press, 2005 Špinar D.: Tvoříme přístupné webové stránky, Zoner Press, 2004 Online materiály: Tyto přednášky na serveru TUL http://www.nti.tul.cz/wiki/wwwmu Vytváření informačních služeb (Doc. RNDr. Pavel Satrapa Ph.D.) http://www.nti.tul.cz/~satrapa/vyuka/vis/ HTML (Doc. RNDr. Pavel Satrapa Ph.D.) http://www.nti.tul.cz/~satrapa/vyuka/html/ Seriál na téma XHTML (Interval.cz) http://interval.cz/clanky/xhtml-vyvoj-x-html-a-jeho-moznosti/
Základní pojmy, XHTML, kostra dokumentu, výchozí prvky pro text Formátování dokumentu, entity, seznamy Grafika pro web, odkazy, adresy a lokátory Základy CSS, selektory Barva a pozadí prvků Písmo a úprava textu Rámy a jejich vlastnosti Tabulky Obtékání, umisťování a pokročilé formátování Stanovené hodnoty v CSS, design stránek Úprava seznamů, formuláře Přístupnost a použitelnost stránek, strukturování prezentace
Základní pojmy SGML HTML XML XHTML Standard Generalized Markup Language je univerzální značkovací metajazyk, který umožňuje definovat značkovací jazyky jako své vlastní podmnožiny. HyperText Markup Language je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému Word Wide Web, který umožňuje publikaci dokumentů na Internetu. Jazyk je aplikací dříve vyvinutého rozsáhlého univerzálního značkovacího jazyka SGML extensible Markup Language je obecný značkovací jazyk a je primárně určen pro výměnu dat mezi aplikacemi a pro publikování dokumentů. Samotný XML nijak neřeší vizuální prezentaci dat. extensible HyperText Markup Language je moderní značkovací jazyk pro hypertext, nahrazující zastaralý HTML. Dá se říci, že je kombinací HTML a XML a klade mnohem větší důraz na strojovou čitelnost. Podrobnosti viz dále. WWW klient prohlížeč, browser. Aplikace na uživatelově počítači, která dokáže vizuálně interpretovat obsah HTML, resp. XHTML dokumentu WWW server pro uživatele neviditelný, vyřizuje požadavky WWW klientů a zasílá jim požadované dokumenty ve formátu HTML, resp. XHTML, XML atd.
Co obsahuje WWW stránka 1. Zdrojový text dokumentu v jazyce HTML (XHTML) 2. HTML kód zapouzdřuje základní definice obsahu stránky 3. Může obsahovat odkazy na případný další materiál: Obrázky a další multimédia Definice vzhledu stránky pomocí CSS Prvky poskytujíćí dynamiku (JavaScript, Java applety, Flash aj..)
Zobrazení požadované WWW stránky Uživatel v prohlížeči zvolí požadovanou stránku (klepne na odkaz, vloží adresu stránky, vybere ze záložek ) Klient kontaktuje server a odešle požadavek na stránku formou dotazu V případě, že dokument na serveru existuje, zašle zpět požadovaná data ve formě HTML. V opačném případě vrátí chybovou stránku Klient analyzuje a parsuje vrácený HTML dokument, získá ze serveru případné další zdroje (obrázky aj.), výsledek zformátuje a zobrazí
Vzhled získané WWW stránky Stránku formátuje klient výsledek zobrazení závisí výhradně na jeho schopnostech a podpoře standardů. Výsledek závisí na vlastnostech uživatelova počítače (grafická obrazovka s různým rozlišením versus textový terminál versus hmatový terminál pro nevidomé) Výsledek závisí na nastavení klienta (velikost okna, velikost písma) Výsledná podoba není nikdy jistá každý prohlížeč má odchylky v zobrazení jednotlivých prvků stránky
Vývoj HTML 1. HyperText Markup Language 2. Vzniklo v roce 1991 jako nástroj pro spojování dokumentů z různých zdrojů 3. Vývoj zajišťuje World-Wide Web Consorcium (www.w3c.org) 4. Prošlo jistým vývojem, poslední verzí je HTML 4.01 (W3C nehodlá dále rozvíjet) 5. XHTML (extensible HTML) HTML přepsané podle pravidel XML
XHTML 1.0 1. W3C doporučení z 26. ledna 2000 revidovaný 1. srpna 2002. 2. První specifikace, jejíž cílem bylo převedení staršího jazyka HTML tak, aby vyhovoval podmínkám tvorby XML dokumentů a přitom byla zachována zpětná kompatibilita. 3. Existuje ve třech verzích: Strict, Transitional a Frameset. XHTML 1.0 Strict se používá pro strukturovaný dokument osvobozený od formátovacích značek souvisejících s rozvržením stránky. Předpokládá se užití společně s CSS pro potřebné grafické efekty. Nicméně i tato verze obsahuje formátovací elementy, například <b> nebo <i> a naopak zavrhuje některé sémantické elementy, například <menu>. XHTML 1.0 Transitional je přechodným DTD pro webové stránky, který umožní používat překonané tagy. Je vhodný pro formátování stránek vytvářených pro staré prohlížeče, které nerozumí kaskádovým stylům CSS nebo chcete-li používat ve svých dokumentech některé zavržené, ale sémantické elementy, například již zmíněné <menu>. XHTML 1.0 Frameset umožňuje používat zastaralé značky jako XHTML 1.0 Transitional a přidává podporu pro rámce. V dnešní době by se mělo rámům vyhýbat použitím CSS, AJAXu nebo serverových skriptů jako například PHP.
XHTML 1.0 rozdíly oproti HTML Jak bylo řečeno, XHTML lze chápat jako kombinaci HTML a XML a z toho vyplývají některá omezení Současný trend tvorby WWW dokumentů doporučuje nejdříve vytvořit obsah pomocí HTML tagů a až poté jednotlivým značkám přiřazovat CSS vlastnosti (vlastnosti vzhledu) Každá XHTML stránka musí obsahovat validní přesně definovanou strukturu včetně hlavičky viz dále V XHTML není povoleno křížení značek (HTML tagů) I nepárové tagy musí být ukončeny : <br/> nebo <br></br> <img/> nebo <img></img> Hodnoty atributů musí být v uvozovkách špatně : <p class=dark> správně: <p class="dark" > Veškeré tagy jsou psány malými písmeny XHTML rozlišuje velikost písmen
XHTML 1.0 kostra dokumentu Každý validní XHTML dokument má následující strukturu : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>titulek stránky (nadpis okna)</title> </head> <body> vlastní obsah (tělo) stránky... </body> </html>
XHTML 1.0 základní prvky 1. HTML kód dokumentu se skládá z jednotlivých elementů (značek, tagů) 2. Jednotlivé elementy v sobě definují typ a obsah 3. Každý element má otevírací a uzavírací část 4. Otevírací část elementu je vždy tvořena znakem <, jménem elementu (např. form), případnými atributy a znakem >. 5. Uzavírací část je vždy tvořena znakem <, /, jménem elementu a znakem >. Zde již nejsou povoleny žádné atributy, tato část slouží pouze k vymezení působnosti elementu. 6. Pokud do sebe vnořujeme více elementů, není je možné křížit mezi sebou. 7. Atributy elementu někdy též vlastnosti nebo parametry - se nachází v otevírací části elementu, oddělené alespoň jednou mezerou jak od jména elementu, tak od ostatních atributů. Slouží k upřesnění významu elementu nebo k přiřazení různých vlastností elementu (například u elementu sloužícího k vyznačení odkazu mohu pomocí atributu definovat, kam má odkaz vést). Každý atribut je tvořen jménem atributu, dále následuje znak = a hodnota atributu, obklopená uvozovkami (") nebo apostrofy (') - tedy jmenoatributu="hodnotaatributu" nebo jmenoatributu='hodnotaatributu'. Kolem znaku = se navíc může nacházet libovolný počet mezer.