Základy WWW publikování

Základy WWW publikování 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 : [email protected] WWW : http://www.nti.tul.cz/wiki/WikiUser:Igor.Kopetschke Přednášky : Pondělí Úterý - Čtvrtek

12:30 – 16:00 9:00 – 12:00

Cvičení : Úterý – Čtvrtek

12:30 – 16:00

Závěrečná zkouška : Pátek 9:00 – 12:00

Část textů přednášek byla použita s laskavým svolením Doc. RNDr. Pavla Satrapy, Ph.D.

Základy WWW publikování 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

Část textů přednášek byla použita s laskavým svolením Doc. RNDr. Pavla Satrapy, Ph.D.

Základy WWW publikování 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/

Část textů přednášek byla použita s laskavým svolením Doc. RNDr. Pavla Satrapy, Ph.D.

Základy WWW publikování • • • • • • • • • • • •

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

Část textů přednášek byla použita s laskavým svolením Doc. RNDr. Pavla Satrapy, Ph.D.

Základy WWW publikování Základní pojmy SGML

Standard Generalized Markup Language je univerzální značkovací metajazyk, který umožňuje definovat značkovací jazyky jako své vlastní podmnožiny .

HTML

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

XML

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.

XHTML

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.

Část textů přednášek byla použita s laskavým svolením Doc. RNDr. Pavla Satrapy, Ph.D.

Základy WWW publikování 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..)

Část textů přednášek byla použita s laskavým svolením Doc. RNDr. Pavla Satrapy, Ph.D.

Základy WWW publikování 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í

Část textů přednášek byla použita s laskavým svolením Doc. RNDr. Pavla Satrapy, Ph.D.

Základy WWW publikování 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

Část textů přednášek byla použita s laskavým svolením Doc. RNDr. Pavla Satrapy, Ph.D.

Základy WWW publikování 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

Část textů přednášek byla použita s laskavým svolením Doc. RNDr. Pavla Satrapy, Ph.D.

Základy WWW publikování 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 nebo 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. Část textů přednášek byla použita s laskavým svolením Doc. RNDr. Pavla Satrapy, Ph.D.

Základy WWW publikování 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 :
nebo

nebo Hodnoty atributů musí být v uvozovkách špatně :

správně:

Veškeré tagy jsou psány malými písmeny – XHTML rozlišuje velikost písmen

• •

Část textů přednášek byla použita s laskavým svolením Doc. RNDr. Pavla Satrapy, Ph.D.

Základy WWW publikování XHTML 1.0 – kostra dokumentu Každý validní XHTML dokument má následující strukturu : … vlastní obsah (tělo) stránky ...

Část textů přednášek byla použita s laskavým svolením Doc. RNDr. Pavla Satrapy, Ph.D.

Základy WWW publikování XHTML 1.0 – základní prvky 1. 2. 3. 4.

HTML kód dokumentu se skládá z jednotlivých elementů (značek, tagů) Jednotlivé elementy v sobě definují typ a obsah Každý element má otevírací a uzavírací část 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. Část textů přednášek byla použita s laskavým svolením Doc. RNDr. Pavla Satrapy, Ph.D.