1 TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03a Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03a 1. Úvod do značkovacích jazyků...
Osnova výukového modulu TWS_03a 1. Úvod do značkovacích jazyků HTML a XHTML 2. Struktura webové stránky, popis částí 3. Základní značky jazyka HTML a XHTML
1
STRUKTURA WEBOVÉ STRÁNKY
Soubory webové stránky Soubory webové stránky jsou textové soubory, jejichž název a přípona se řídí především těmito pravidly: Název souboru: doporučují se používat malá písmena, písmena bez diakritiky, název může obsahovat písmena, číslice, podtržítka a pomlčky, nepoužívat komplikované, dlouhé názvy, název souboru by měl vystihovat obsah (určení) webové stránky.
2
Soubory webové stránky Přípona souboru: *.htm *.html
Úvodní (počáteční) soubor webové prezentace, který se zobrazuje po zadání adresy webové prezentace (např. www.mojestranky.cz), se jmenuje index (např. index.htm,
index.html,
index.php, atd.)
Organizace souborů webové prezentace Webová prezentace může obsahovat typicky tyto soubory: soubory webové stránky (*.htm *.html
*.php
*.asp)
externí definice kaskádových stylů (*.css) obrázky (*.jpg
*.gif
videa (*.mpg
*.avi
audio (*.mp3
*.wav
dokumenty (*.pdf
*.png) *.flv) *.ogg)
*.doc
*.xls
*.pps)
3
Organizace souborů webové prezentace Pro snadnou správu webové prezentace je vhodné soubory dle obsahu (typu) rozdělit do jednotlivých podadresářů: Kořenová složka - obsahuje soubory webové stránky
www
(složka přístupná po přihlášení na webový server).
css obr video audio dokumenty
Užitečný tip: Soubory, které tvoří webovou prezentaci, optimalizujeme na co nejmenší velikost: RYCHLÉ NAČÍTÁNÍ Z WEBOVÉHO SERVERU!
4
Značkovací jazyk HTML a XHTML HTML (HyperText Markup Language) Hypertextový značkovací jazyk. Označuje obsah webové stránky a určuje prohlížeči co bude nadpis, odstavec, odkaz, seznam, blok textu, apod. Označuje, kde bude vložena tabulka, obrázek, formulář, apod. Existují HTML značky, které nejsou sémanticky správné (např. úprava fontu, blikající a jezdící text, podtržení, zarovnání, atd.). Určují pouze vzhled, neurčují smysl textu. U striktních verzí (X)HTML je nelze použít, obecně se nedoporučují!
Značkovací jazyk HTML a XHTML XHTML (eXtensible HyperText Markup Language) Novější a přísnější verze značkovacího jazyka HTML. Striktní verze (neplatí pro Transitional) eliminuje použití HTML značek pro úpravu obsahu (využití kaskádových stylů). Myšlenka přísnějšího značkovacího jazyka XHTML: - oddělení obsahu od formy webové stránky, - vzhled stránky většinou shodný u všech známých prohlížečů, - jasnější pravidla pro prohlížeč, zobrazující obsah stránky, - „čistší“ a přehlednější kód webového dokumentu.
5
Užitečný tip: Pro formátování (úpravu) a pozicování obsahu webové stránky se doporučuje používat jazyk CSS (kaskádové styly)
Kódování národního jazyka (češtiny) Tělo stránky - vlastní obsah, který se zobrazí v hlavním okně (ploše) prohlížeče
6
Struktura XHTML webové stránky <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
Název stránky Zde bude obsah webové stránky…
1. Zvolit menu Soubor 2. Položka Nový… 3. Záložka Podle Šablony 4. Rozbalit HTML/XHTML 5. Vybrat typ dokumentu
Pspad vytvoří nový webový dokument s již vloženou strukturou webové stránky dle zvoleného standardu.
7
Užitečný tip: Většina editorů webových stránek vytvoří v novém souboru základní strukturu sama ! (např. Pspad, Dreamweaver, atd.)
Deklarace Informace pro prohlížeč o verzi HTML/XHTML a použitém DTD. DTD (Document Type Definition, česky Definice typu dokumentu) Předpis (norma), který prohlížeči „říká“, jaké HTML značky a jejich atributy jsou povoleny v dokumentu webové stránky používat a jak s nimi má zacházet. Deklarace má komplikovaný zápis, editor webových stránek (např. Pspad, Dreamweaver, apod.) ji vytvoří automaticky při zakládání nového souboru dle typu webové stránky (HTML, XHTML)
8
Deklarace Typy deklarací HTML (4.01) / XHTML (1.0) dokumentu TRANSITIONAL povoluje použití nestandardních značek (především pro formátování vzhledu obsahu). STRICT povoluje pouze značky pro tvorbu struktury webu (nadpisy, odstavce, seznamy, obrázky, formuláře, tabulka, apod.). Formátování a pozicování obsahu se provádí pouze pomocí kaskádových stylů. (důsledné oddělení obsahu od formy webové stránky) Pozn.: Typ dokumentu XHTML 1.1 se podobá XHTML 1.0 Strict
DOCTYPE dokumentu HTML 4.01 HTML 4.01 TRANSITIONAL HTML 4.01 STRICT
Ohraničení webového dokumentu Celý HTML / XHTML dokument webové stránky (kromě DOCTYPE) je vymezen párovou značkou HTML dokumenty mají většinou značku bez dalších atributů: …Obsah webového dokumentu… XHTML dokumenty značku s atributy xmlns, xml:lang, lang:
…Obsah webového dokumentu…
10
Hlavička stránky Vymezuje se párovou značkou Hlavička by měla obsahovat obsahovat: - název dokumentu (title) - povinné - meta značky (minimálně kódování čestiny - povinné) - programový kód skriptovacího jazyka javascript - definice kaskádových stylů (CSS) - odkaz na soubor ikony webové stránky (favicon.ico)
Poznámka: Kaskádové styly a programový kód javascriptu jsou častěji definovány v externím souboru, v hlavičce je vytvořen pouze odkaz na tento soubor.
Hlavička stránky Název webové stránky Název webové stránky zobrazuje titulek webové stránky v záhlaví okna prohlížeče definuje název záložky, pokud je stránka uložena do oblíbených zobrazuje titulek stránky ve vyhledávačích
11
Hlavička stránky META značky Jedná se o informace, které definují např. kódování znakové sady (nezbytné pro webový prohlížeč), klíčová slova a popis dokumentu pro vyhledávače, autora, atd. Vhodné vždy v hlavičce uvést ! <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" /> <meta name="author" content="jméno autora webových stránek" /> <meta name="description" content="Výstižný popis zaměření webové stránky" /> <meta name="keywords" content="klíčová slova oddělená čárkou" />
Hlavička stránky Nastavení kódování češtiny pro webový dokument:
Standardní kódování operačního systému Windows: <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
Standardní kódování operačního systému Unix, Linux a v emailech: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
Vhodné pro kódování mezinárodních dokumentů: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
12
Hlavička stránky Připojení externích souborů Soubor s definicí kaskádových stylů
Soubor představující ikonku webové stránky
Soubor s definicí skriptů jazyka JAVASCRIPT <script type="text/javascript" src="skripty.js">
HTML značka (tag) HTML značky neboli TAGy vymezují (označují) určitý obsah webové stránky a určují, co představuje (nadpis, odstavec, odkaz, seznam, apod.), jaký objekt se má na dané místo vložit (obrázek, formulář, tabulka, horizontální čára, apod.), popřípadě které objekty budou upravovány pomocí kaskádových stylů. Obsah a HTML značky vkládáme mezi párovou značku: Tato značka vymezuje tzv. tělo webové stránky.
14
HTML značka (tag) Jména HTML značek jsou uzavřena v ostrých závorkách < >
Mezi nimi se nachází název značky (malými písmeny). Existují dva typy HTML značek: 1. párové značky 2. nepárové značky
HTML značka (tag) 1. Párové značky Příklad: odstavce, odkazy, nadpisy, bloky, formulář, seznamy, atd.
objekty nebo jejich části, které má značka ovlivnit Počáteční značka
Koncová značka
2. Nepárové značky Příklad: vložení obrázku, horizontální čáry, odřádkování, atd.
Značka v HTML dokumentu
Značka v XHTML dokumentu
15
HTML značka (tag) Atributy HTML značky Atributy přiřazují značce vlastnosti. Píší se do počáteční značky. Příklad: nějaký odkaz nějaký odkaz Atributy mají své hodnoty, které se zapisují do uvozovek za rovnítko. Značka může obsahovat více atributů – oddělujeme je mezerou. Atributy zapisujeme v libovolném pořadí.
Užitečný tip: Název značky (tagu) i atributů píšeme VŽDY MALÝMI PÍSMENY!
16
HTML element HTML element = HTML značka + atributy s hodnotou
Pravidla vnořování HTML elementů HTML element může obsahovat další vnořené elementy. Žádné se však nesmí křížit !
Chybný zápis vnořených HTML elementů
HTML elementy se <strong> nesmí křížit!
Správný zápis vnořených HTML elementů
HTML elementy se <strong> nesmí křížit!
17
HTML entity Jedná se o speciální kódy, které nahrazují některé znaky: mají v jazyce HTML speciální význam (např. znaky <, >, “, ‘), nenacházející se běžně na CZ / ENG klávesnici, typografické entity (např. nedělitelná mezera, výpustka, atd.). Entita začíná znakem & a končí středníkem ; Mezi nimi je množina znaků (písmena nebo #čísla), reprezentující daný znak, např.:
nedělitelná mezera
Φ
řecké písmeno „velké fí“
…
výpustka „tři tečky“
HTML entity Editor webových stránek Pspad nabízí vkládání HTML entit pomocí nástroje „ASCII tabulka“. Nástroj lze zobrazit: Menu Nástroje, položka ASCII tabulka (ALT + A) Nástroj nabízí dvě záložky: ASCII a SYMBOL. Výčet entit naleznete například zde: http://www.jakpsatweb.cz/html/entity-vsechny.html http://www.webtvorba.cz/xhtml/html-entity.html
18
HTML elementy pro textový obsah HTML elementy jednoznačně specifikující textový obsah, který obklopují (tzv. sémanticky správný kód). Umožňují technickým prostředkům a jejich programům porozumět textu alespoň na základní úrovni a správně jej interpretovat. Příklad: (X)HTML jazyk obsahuje značky pro určení nadpisů, odstavce, klíčových slov (důležitý text), číslované a nečíslované seznamy, zkratky, indexy, citace, atd. Poznámka: Některé značky jsou dnes již prakticky nepoužívané, popřípadě jsou zakázané – neuvádím je zde!!!
Textový element – Nadpisy Šest úrovní nadpisů:
1. úroveň
2. úroveň
3. úroveň
4. úroveň
5. úroveň
6. úroveň
Všechny nadpisy jsou implicitně zarovnány vlevo.
19
Textový element – Odstavce
Blok textu bude chápán jako 1. odstavec
Blok textu bude chápán jako 2. odstavec
Textový element – Odřádkování Značka se vkládá v místě zalomení textu na další řádek: Značka HTML jazyka:
Značka XHTML jazyka:
Tento text bude na 1. řádku a tento na 2. řádku
20
Textový element – Tučný a důležitý text Značka vymezuje text, který má být tučný, Značka <strong> vymezuje důležitý či silně zvýrazněný text.
Každý návštěvník má <strong>vstup zdarma!
Vektor intenzity el. pole E určuje směr působící el. síly.
„vstup zdarma“ je důležité sdělení.
„E“ je vektor, značíme jej tučně.
Textový element – Kurzíva a důležitý text Značka vymezuje text psaný kurzívou, Značka <em> vymezuje důležitý text, menší důraz než <strong>
Každý návštěvník má <em>vstup zdarma!
Elektrické napětí má jednotku volt.
21
Textový element – Horní a dolní index Vymezený text se stává horním, resp. dolním indexem: Horní index:
<sup>
Dolní index:
<sub>
Teplota T<sub>1 = 100 <sup>oC
Textový element – Citace Jednořádkový citovaný text:
způsobí odsazení citace od okolního textu. Značky mohou obsahovat nepovinný atribut cite, jehož hodnotou je URL adresa, ze které je citovaný text. V praxi není příliš využitelný, neboť URL není přímo vidět v okně prohlížeče (pouze zdrojový kód).
Citovaný blok textu. Může se jednat o jeden i více odstavců.
22
Textový element – Citace
Albert Einstein řekl:
Jak vzniká vynález? To všichni vědí, že je něco nemožné, a pak se objeví nějaký blázen, který neví, že je to nemožné, a udělá vynález.
Paní učitelka řekla: Děti, víte co je to vynález?
Textový element – Zkratky Značka vymezující zkratku. Vysvětlení je řešeno pomocí atributu title:
SSD se stále více používají u přenosných počítačů.
Zkratka se vždy vypíše s tečkovaným podtržením (vyjma Internet Exploreru !). Po najetí kurzorem myši se objeví vysvětlující text v „bublině“.
23
Textový element – Zkratková slova Značka vymezující akronym (zkratkové slovo). Speciální zkratka, která se nehláskuje po písmenech, ale čte se jako jedno slovo, dá se i skloňovat. Příklad: NATO, BESIP, URNA, MODEM, MOSFET, atd.
Značky a vytvářejí vizuálně stejný výsledek. Význam mají především pro nevidomé, hlasový výstup čtečky tato slova přečte rozdílně!!!
Textový element – Programový kód <pre>
Zachová bílé mezery (např. odsazení kódu)
Obsah vypíše neproporcionálním písmem
program TypeText; var t: text; s: string; begin while not eof(t) do begin readln(t,s); writeln(s); end; end.
24
Hypertextový odkaz Kliknutím na textový či obrázkový odkaz dojde k přesměrování. objekt odkazu Mezi párovou značkou může být text nebo obrázek. Značka hypertextového odkazu má dva povinné atributy:
href hodnotou je adresa (absolutní nebo relativní) cílového dokumentu.
Dalším (nepovinným) atributem je target. Je-li hodnota _blank, otevře se cílový dokument v novém okně. Atribut není povolen u dokumentů typu XHTML 1.0 Strict a XHTML 1.1
25
Hypertextový odkaz ABSOLUTNÍ ADRESA odkaz na firmu Odkaz na dokument (např. webovou stránku), který se nachází na jiném serveru. Odkaz na jinou stránku musí vždy obsahovat část http:// Hodnotou atributu href je adresa cílového dokumentu (v tomto případě http://www.firma.cz). Zobrazovaný a „klikatelný“ text bude odkaz na firmu
Hypertextový odkaz RELATIVNÍ ADRESA Kontakty na firmuCeník služeb Odkaz na dokument v rámci jedné webové prezentace (stejný server). Tvorba relativních odkazů (href): slozka/podstranka.htm (odkazuje na dokument ve složce o úroveň níže) ../podstranka.htm (odkazuje na dokument ve složce o úroveň výše)
26
zdroj: http://polopate.jakpsatweb.cz
Hypertextový odkaz ZÁLOŽKA – odkaz na konkrétní místo v dokumentu Vhodné např. u rozsáhlých dokumentů (mnoho textu a obrázků) Pro funkční záložku je potřeba: 1. Definice samotné záložky (pojmenování objektu) 2. Tvorba odkazu, který odkazuje na záložku
27
Hypertextový odkaz ZÁLOŽKA – odkaz na konkrétní místo v dokumentu 1. Pojmenování a vložení záložky Do určitého místa v dokumentu (cíl odkazu) vložíme následující kód: Lze také použít atribut id příslušného (X)HTML elementu, například:
text odstavce…
Nadpis
Jedná se o moderní a doporučený způsob tvorby záložky.
Hypertextový odkaz ZÁLOŽKA – odkaz na konkrétní místo v dokumentu 2. Tvorba odkazu na záložku Hodnota atributu href začíná mřížkou neboli hash-markem
#
(pravý ALT + X), na níž přímo (bez mezery) navazuje jméno záložky.
Užitečný tip: Název záložky by měl obsahovat pouze písmena bez diakritiky, čísla, pomlčku nebo podtržítko.
Seznamy 1. Nečíslovaný (neuspořádaný) seznam
máta
Unordered List vymezení položek nečíslovaného seznamu
heřmánek
černý bez
List Items Položky nečíslovaného seznamu
Atribut type (nepovinný) určuje typ odrážky. Možné hodnoty jsou: circle, disc, square. Seznamy s obrázkovou odrážkou lze vytvořit pomocí kaskádových stylů a vlastnosti list-style-image.
29
Seznamy 2. Číslovaný seznam
Ordered List vymezení položek číslovaného seznamu
máta
heřmánek
List Items Položky číslovaného seznamu
černý bez
Atribut type (nepovinný) určuje typ odrážky. Možné hodnoty jsou: 1 (číslice), A, a (písmena), i ,I (římské číslice). Číselná hodnota atributu start určuje počáteční hodnotu (závisí na typu odrážky!!!)
Seznamy 3. Seznam definic Definition List – ohraničení seznamu
CD
Definition Term – ohraničení pojmu
Compact Disc
Definition – definice pojmu
DVD
Digital Video Disc
Používá se v případě, kdy potřebujeme vypsat např. nějaké termíny a k nim jejich definice nebo popisy.
30
Seznamy Kombinace seznamů
Ovoce
jablko
hruška
švestka
Zelenina
Užitečný tip: Seznam zajišťuje návštěvníkovi webu dobrou orientaci v textu a čitelnost.
31
Tabulka
Tabulka
Řádek tabulky
Jméno
Příjmení
Zkratka
Hlavičková buňka tabulky
Buňka tabulky
Pavel
Chmiel
CHM
Tabulka Nadpis tabulky Pro nadpis tabulky se používá párová značka:
Nadpis tabulky
Značka se vkládá bezprostředně za značku
Jména učitelů
… Zbývající struktura tabulky …
32
Tabulka Slučování buněk tabulky
Student
Pohlaví
muž
colspan
Sloučí několik buněk v jednom řádku
žena
rowspan Sloučí několik buněk v jednom sloupci
Užitečný tip: Tabulky používáme pouze pro prezentaci tabulkových údajů, nikoliv pro pozicování prvků a obsahu webové stránky !
33
Vkládání obrázku Obrázek je uložen jako samostatný soubor na webovém serveru. Ve webové prezentaci se zobrazí vložením nepárové značky: Jazyk HTML:
Jazyk XHTML:
Alternativní popisek (alt) je povinný atribut, který se zobrazí při nenačtení obrázku. Nezbytný je pro nevidomé (hlasový výstup čtečky). Preferované formáty obrázků pro web jsou JPG, GIF, PNG. Vhodné je zadat šířku (width) a výšku (height) obrázku v pixelech:
Vkládání obrázku
Pod tímto odstavcem bude obrázek:
Místo nenačteného obrázku se zobrazí alternativní text.
34
Vkládání flash videa Validní kód jazyka XHTML pro vložení videa (formát swf, flv):
Horizontální čára Značka se vkládá v místě vložení horizontální čáry: Značka HTML jazyka:
Značka XHTML jazyka:
Pod tímto odstavcem bude vložena horizontální čára:
35
Formuláře Umožňují uživateli vyplňovat na stránce údaje, které se následně zpracují pomocí skriptu (nejčastěji PHP, ASP nebo javascript). Výsledkem může být: modifikace obsahu webové stránky dle zadaných hodnot, uložení zadaných hodnot do databáze, odeslání mailu uživateli se zadanými hodnotami, autorizovaný přístup do zabezpečené části webové prezentace, atd.
Formuláře
36
Vložení formuláře
ATRIBUT VÝZNAM
HODNOTA
action
skript, který bude zpracovávat data
odkaz na obslužný skript (soubor)
method
způsob předávání dat
POST, GET
enctype
Způsob zakódování dat
a) Neuvádí se (textový formulář) b) application/x-www-form-urlencoded c) multipart/form-data (soubory)
Formulářové prvky Univerzální formulářový prvek - vstupní pole.
Další atributy formulářového prvku budou přístupné dle atributu TYPE !
37
Textové jednořádkové pole ATRIBUT
VÝZNAM
HODNOTA
type
jednořádkové textové pole
text
size
šířka pole ve znacích
celé číslo (např. 30)
maxlength
nejvyšší možný počet zadaných znaků celé číslo (např. 30)
Pole pro zadání hesla Atributy a hodnoty jsou stejné jako u textového pole. Při zadávání hesla se objevují tečky nebo hvězdičky (dle prohlížeče). Bez zadaného hesla (shodné s textovým polem) Vložení hesla (znaky nahrazeny tečkami)
38
Tlačítko pro odeslání dat z formuláře Data z formuláře jsou odeslána obslužnému skriptu:
Tlačítko nelze stisknout = data nelze odeslat:
Zaškrtávací políčko Zaškrtávací políčko bez volby. V případě volby (zaškrtnutí) se odesílá hodnota ano.
Zaškrtávací políčko s přednastavenou volbou. Pokud uživatel volbu zruší, z formuláře se neodesílá hodnota ano.
39
Pole přepínačů Soubor přepínacích polí, kdy zatrženo může být vždy pouze jedno. Z formuláře se odesílá hodnota pole, které je vybráno (checked). Chci zasílat novinky …
týdně měsíčně nikdy
Skrytý (neviditelný) prvek Neviditelný formulářový prvek pro odesílání skrytých hodnot z formuláře. Většinou bývá za hodnotu atributu value dosazena hodnota proměnné.
40
Další podoby prvku Tlačítko pro vymazání (defaultní nastavení) hodnot formuláře. Prvek pro odeslání souboru na vzdálený server. Formulář musí být odeslán metodou (method) POST a používat kódování (enctype) multipart/form-data.
Obecné tlačítko, bez obslužného skriptu nedělá nic.
Víceřádkové textové pole
ATRIBUT
VÝZNAM
HODNOTA
rows
počet viditelných řádků
celé číslo (např. 5)
cols
viditelná šířka prvku ve znacích
celé číslo (např. 30)
41
Rozbalovací menu <select name="vzdelani">
Skriptu se posílá hodnota atributu value (zde např. zs, ss, nebo vs). Atribut selected provede předvýběr položky ze seznamu (není povinný).
Seskupení formulářových prvků
42
HTML elementy bez významu HTML elementy, které samy o sobě nenesou žádnou informaci. Používají se ve spojitosti s kaskádovými styly pro formátování či pozicování obsahu a struktury webové stránky 1. Blokový párový element DIV
…obsah DIVu…
dochází k zalomení před i za elementem DIV. ohraničuje libovolný řádkový i blokový obsah (text, obrázky, atd.). Používá se hlavně k vytvoření kostry vzhledu webové stránky.
HTML elementy bez významu 2. Řádkový párový element SPAN <span>…obsah SPANu… nedochází k zalomení před ani za elementem SPAN. ohraničuje pouze řádkový obsah (řádkové HTML elementy). Používá se k formátování textového obsahu pomocí kaskádových stylů. Elementy DIV i SPAN mají obvykle definovány atributy id nebo class, jejichž hodnotou je název identifikátoru (id) nebo třídy (class) kaskádového stylu. Praktické ukázky použití budou prezentovány v modulu TWS_3b.
43
Užitečný tip: HTML elementy SPAN i DIV nejsou sémantické (nenesou žádnou informaci) Nestavíme web pouze na těchto elementech !!!
Alternativní popisek (alt) je povinný atribut, který se zobrazí při nenačtení obrázku. Nezbytný je pro nevidomé (hlasový výstup čtečky). Preferované formáty obrázků pro web jsou JPG, GIF, PNG. Vhodné je zadat šířku (width) a výšku (height) obrázku v pixelech:
