Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

Výukový modul TWS_03aIng. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE TVORBA WEBOVÝCH STRÁNEK.

Podobné prezentace


Prezentace na téma: "Výukový modul TWS_03aIng. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE TVORBA WEBOVÝCH STRÁNEK."— Transkript prezentace:

1 Výukový modul TWS_03aIng. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE TVORBA WEBOVÝCH STRÁNEK

2 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

3 STRUKTURA WEBOVÉ STRÁNKY

4 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.

5 Soubory webové stránky Přípona souboru: Statické webové stránky:*.htm *.html Dynamické webové stránky:*.php *.asp (dle skriptovacího jazyka) Definice kaskádových stylů:*.css Úvodní (počáteční) soubor webové prezentace, který se zobrazuje po zadání adresy webové prezentace (např. se jmenuje index (např. index.htm, index.html, index.php, atd.)

6 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 *.png) videa (*.mpg *.avi *.flv) audio (*.mp3 *.wav *.ogg) dokumenty (*.pdf *.doc *.xls *.pps)

7 Organizace souborů webové prezentace Pro snadnou správu webové prezentace je vhodné soubory dle obsahu (typu) rozdělit do jednotlivých podadresářů: www Kořenová složka - obsahuje soubory webové stránky (složka přístupná po přihlášení na webový server). css obr video audio dokumenty

8 Užitečný tip: Soubory, které tvoří webovou prezentaci, optimalizujeme na co nejmenší velikost: RYCHLÉ NAČÍTÁNÍ Z WEBOVÉHO SERVERU!

9 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í!

10 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.

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

12 Struktura HTML webové stránky Název stránky Nadpis Nějaký text v odstavci Typ dokumentu - verze použitého jazyka HTML Zobrazí se v záhlaví okna prohlížeče 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

13 Struktura XHTML webové stránky Název stránky Zde bude obsah webové stránky…

14 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.

15 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.)

16 Deklarace 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)

17 Deklarace 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

18 DOCTYPE dokumentu HTML 4.01 HTML 4.01 TRANSITIONAL HTML 4.01 STRICT

19 DOCTYPE dokumentu XHTML 1.0 a 1.1 XHTML 1.0 TRANSITIONAL XHTML 1.0 STRICT XHTML 1.1

20 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…

21 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.

22 Hlavička 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

23 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 !

24 Hlavička stránky Nastavení kódování češtiny pro webový dokument: Standardní kódování operačního systému Windows: Standardní kódování operačního systému Unix, Linux a v ech: Vhodné pro kódování mezinárodních dokumentů:

25 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

26 Ukázka konkrétní hlavičky stránky Rustikální nábytek

27 ZNAČKY XHTML JAZYKA

28 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.

29 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

30 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čkaKoncová 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

31 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 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í.

32 Užitečný tip: Název značky (tagu) i atributů píšeme VŽDY MALÝMI PÍSMENY!

33 HTML element HTML element = HTML značka + atributy s hodnotou

34 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 nesmí křížit! Správný zápis vnořených HTML elementů HTML elementy se nesmí křížit!

35 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 & #934 ;řecké písmeno „velké fí“ …výpustka „tři tečky“

36 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:

37 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!!!

38 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.

39 Textový element – Odstavce Blok textu bude chápán jako 1. odstavec Blok textu bude chápán jako 2. odstavec

40 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

41 Textový element – Tučný a důležitý text Značka vymezuje text, který má být tučný, Značka vymezuje důležitý či silně zvýrazněný text. Každý návštěvník má 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ě.

42 Textový element – Kurzíva a důležitý text Značka vymezuje text psaný kurzívou, Značka vymezuje důležitý text, menší důraz než Každý návštěvník má vstup zdarma! Elektrické napětí má jednotku volt.

43 Textový element – Horní a dolní index Vymezený text se stává horním, resp. dolním indexem: Horní index: Dolní index: Teplota T 1 = 100 o C

44 Textový element – Citace Jednořádkový citovaný text: Blokový citovaný text (odstavce): Značka přidává uvozovky ohraničující citovaný text. Značka 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ů.

45 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?

46 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ě“.

47 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ě!!!

48 Textový element – Programový kód program TypeText; var t: text; s: string; begin while not eof(t) do begin readln(t,s); writeln(s); end; end. Obsah vypíše neproporcionálním písmem Zachová bílé mezery (např. odsazení kódu)

49 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. title hodnotou je textový popisek odkazu.

50 Hypertextový odkaz Toto je odkaz 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

51 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 Hodnotou atributu href je adresa cílového dokumentu (v tomto případě Zobrazovaný a „klikatelný“ text bude odkaz na firmu

52 Hypertextový odkaz RELATIVNÍ ADRESA Kontakty na firmu Cení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)

53 zdroj:

54 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

55 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.

56 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. Záložka je ve stejné webové stránce: Odkaz na záložku Záložka je umístěna v jiné webové stránce: Odkaz na záložku

57 Užitečný tip: Název záložky by měl obsahovat pouze písmena bez diakritiky, čísla, pomlčku nebo podtržítko.

58 Seznamy 1. Nečíslovaný (neuspořádaný) seznam máta heřmánek černý bez 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. Unordered List vymezení položek nečíslovaného seznamu List Items Položky nečíslovaného seznamu

59 Seznamy 2. Číslovaný seznam máta heřmánek č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!!!) Ordered List vymezení položek číslovaného seznamu List Items Položky číslovaného seznamu

60 Seznamy 3. Seznam definic CD Compact Disc 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. Definition List – ohraničení seznamu Definition Term – ohraničení pojmu Definition – definice pojmu

61 Seznamy Kombinace seznamů Ovoce jablko hruška švestka Zelenina

62 Užitečný tip: Seznam zajišťuje návštěvníkovi webu dobrou orientaci v textu a čitelnost.

63 Tabulka Jméno Příjmení Zkratka Pavel Chmiel CHM Řádek tabulky Hlavičková buňka tabulky Buňka tabulky Tabulka

64 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 …

65 Tabulka Slučování buněk tabulky Student Pohlaví muž žena colspan Sloučí několik buněk v jednom řádku rowspan Sloučí několik buněk v jednom sloupci

66 Užitečný tip: Tabulky používáme pouze pro prezentaci tabulkových údajů, nikoliv pro pozicování prvků a obsahu webové stránky !

67 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:

68 Vkládání obrázku Pod tímto odstavcem bude obrázek: Místo nenačteného obrázku se zobrazí alternativní text.

69 Vkládání flash videa Validní kód jazyka XHTML pro vložení videa (formát swf, flv):

70 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:

71 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.

72 Formuláře

73 Vložení formuláře... HTML značky pro vložení formulářových prvků … … Lze zde umístit také normální (formátovaný) text … ATRIBUTVÝZNAMHODNOTA action skript, který bude zpracovávat data odkaz na obslužný skript (soubor) methodzpůsob předávání datPOST, GET enctypeZpůsob zakódování dat a) Neuvádí se (textový formulář) b) application/x-www-form-urlencoded c) multipart/form-data (soubory)

74 Formulářové prvky Univerzální formulářový prvek - vstupní pole. ATRIBUTVÝZNAMHODNOTA typedruh vstupního pole text, password, submit, reset, checkbox, radio, file, hidden namejméno prvku libovolná, unikátní, doporučení bez diakritiky valuepočáteční hodnota libovolný text, diakritika povolena disabled prvek je „zašedlý“, nelze měnit hodnoty bez hodnoty Další atributy formulářového prvku budou přístupné dle atributu TYPE !

75 Textové jednořádkové pole ATRIBUTVÝZNAMHODNOTA typejednořádkové textové poletext sizešířka pole ve znacíchcelé číslo (např. 30) maxlengthnejvyšší možný počet zadaných znakůcelé číslo (např. 30)

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

77 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:

78 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.

79 Pole přepínačů Chci zasílat novinky … týdně měsíčně nikdy 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).

80 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é.

81 Další podoby prvku 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.

82 Víceřádkové textové pole … Nějaký text … ATRIBUTVÝZNAMHODNOTA rowspočet viditelných řádkůcelé číslo (např. 5) colsviditelná šířka prvku ve znacíchcelé číslo (např. 30)

83 Rozbalovací menu Základní škola Střední škola Vysoká škola 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ý).

84 Seskupení formulářových prvků Přihlašovací formulář Login: Heslo:

85 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.

86 HTML elementy bez významu 2. Řádkový párový element 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.

87 Užitečný tip: HTML elementy SPAN i DIV nejsou sémantické (nenesou žádnou informaci) Nestavíme web pouze na těchto elementech !!!

88 Konec modulu TWS_03a Děkuji Vám za pozornost.


Stáhnout ppt "Výukový modul TWS_03aIng. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE TVORBA WEBOVÝCH STRÁNEK."

Podobné prezentace


Reklamy Google