XHTML Jazyk HTML – značkovací jazyk, speciálně vyvinutý pro popis Internetových dokumentů. HTML umožňuje popis: • struktury dokumentu; • obsahu dokumentu; • způsobu zobrazení obsahu prohlížečem na displeji.

Značkovací jazyky (mark-up): ■ Součastí prostředků je systém značek, ek které v informačním textu dokumentu označují strukturu dokumentu tak, že prohlížeč interpretuje tyto značky jako pokyn pro typografické formátování textu. ■ Umožňuje na označená místa vkládat: barevné efekty, animační efekty, i jiné netextové a multimediální informace jako obrázky, videosekvence, zvuky a také i programové sekvence-aplety. ■ Nejdůležitejším prvkem, který lze do web dokumentu vkládat jsou odkazy na jiné web dokumenty.

1

XHTML ■ Validní dokument – musi obsahovat určité prvky. Validace- technický proces, jehož pomocí testujeme shodu s pravidly, což umožňuje nalez chyby a opravit omyly.

Deklarace a označování dokumentu ■ Kód deklarujicí typ dokumentu a označujicí verzi jazyka: deklarace DOCTYPE musi být použita v každem dokumentu. Příklad
- vykřičnik znamena začatek deklarace

DOCTYPE - vyjadřuje, že kód deklaruje typ dokumentu html - definuje, že je dokument vytvořen v HTML PUBLIC - jde o veřejný dokument

2

XHTML Syntaxe: „ - //W3C//DTD XHTML 1.0 Transitional//EN “ • definuje hostitele druhu a verze jazyka documentu (konsorcium W3C) • určuje, že je dokument vytvářen podle definice XHTML 1.0 Transitional Document Type Definition (DTD) DTD – seznam povolených elementů a atributů pro jazyk (XHTML) a jeho verzi. Kompletní URL pro DTD: DTD „ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd “ ■ Při této deklaraci na začatku documentu budete mocí zkontrolovat dokument Validátorem. torem Validátor- použivá informace uvedené v deklaraci a porovnáva váš dokument s DTD, který jste deklarovali.

3

XHTML

4

Element html html – kořenový element (všechny dokumenty mají strom dokumentu) ■ strom dokumentů HTML – je důležitý pro nastavování stylů pomocí CSS (cascading style sheets = kaskádové styly). CSS – jazyk sloužící k nastavování vzhledu stránky: • rozvržení; • barev; • písem a všeho, co slouži k dekorativném účelům. Příklad. Kořenový element html ...

XHTML

5

■ V XHTML, musime přidat do počateční značky ještě jmenný prostor XML pro XHTML. (To je pouze jiný způsob zadání jazyka (XHTML), použivaného v dokumentu) Příklad. Kořenový element html s atributem jmenného prostoru XML a jeho hodnotou. . . . . Atribut xmlns znamená „ XML namespace “ a jeho hodnotou je URL

XHTML – je kombinaci HTML a XML

XHTML Element head head – umístúje všechny věci potřebné pro zobrazení a načitání dokumentu, ale nejsou zobrazovány v okně prohlížeče. Příklad. Přídaní sekce head < html xmlns=“. . . . . . . . . . . . . . . . .> < head> . . . . . Oblast záhlaví dokumentu ■ Element head nepotřebuje žádné atributy, jen počateční a koncovou značku.

6

XHTML Elementy, které lze umístit do záhlaví dokumentu

Element

K čemu slouži

title

Tento element umožňuje pojmenovat dokument. Název se zobrazuje v záhlaví okna prohlížeče. Tento element je povinný.

meta

Tento element se použivá k různým účelům, včetně zadání kličových slov a popisů, kódování znaků a autora dokumentu. Element je nepovinný a jeho použití se bude měnit podle konkretních potřeb.

script

Tento element umožňuje vkládat skripty přímo do dokumentu nebo jako odkaz ze stránky na skript, který chcete použivat. Použivá se podle potřeby.

style

Tento element umožňuje vkládat informace o kaskádových stylech prímo do stránky. Toto je známé jako vnořené styly. Použivá se podle potřeby.

7

XHTML

8

Element title title – jediný povinný element záhlaví dokumentu. Zobrazuje v záhlaví okna prohlížeče text,společné s názvem prohlížeče. Příklad. Nadpis s názvem webu a místem pro orientací uživatele. název webu sekce webu

podsekce

Element meta Kódování dokumentu: znamená nastavení znakové sady web stránky. ● UTF-8 (Unicode – univerzalní formát). Dokument v angličtině ● ISO (široký rozsah jazyků) Příklad. Použivání meta pro deklarací kódování v Unicode a ISO <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” /> <meta http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-5” />

■ Element meta může být použit k: - uvedení kličových slov; - popisu webu; - definování autora.

XHTML Element body Příklad. Umísténí elementu body. . . . . Obsah stránky zobrazený v okně prohlížeče Komentáře HTML Komentáře umožňuje: - dočasné skrývat obsah dokumentu; - popisovat sekce dokumentu; - poskytovat direktivy pro jiné lidi. Syntax:

9

XHTML Šablona (struktura dokumentu XHTML) <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="vase, klicova, slova" /> <meta name="description" content="popis vasi stranky" /> <meta name="author" content="vase jmeno" /> Pojmenujte tento kód – index.html Validátor: 1) http://validator.w3.org/ ( sekce – upload) 2) zadejte svůj soubor

10

XHTML Přidávání textu a odkazů Šest úrovní nadpisů: od

. .

po

. .

Přidávání odstavců

. . .

s textem umístěným mezi značkami Mezi odstavcí – prázdný řádek. Zalomení řádku Vynucený přechod na nový řádek (
)

Text-1
Text-2
Text-3

Číslovaný seznam - je seznam položek, které musí být uvedeny v konkretním pořadí. Povinné dva elementy:

. . .

a

. . .

1. Krok 1
2. Krok 2

11

XHTML

12

Nečíslovaný seznam - je seznam, v němž nemusí být položky uvedeny v přesném pořadí. Povinné dva elementy:

. . .

a

. . .

. . .

Značka umožňuje prohlížeči zobrazovat seznam položek s odzážkami místo čísel.

Web obsahuje sekce:

Web obsahuje sekce
• Knihy
♦ Knuhy
• CD a DVD
♦ CD a DVD
• Elektronika
♦ Elektronika

■ Styl odrážek můžete měnit pomocí CSS Vnořený seznam – je seznam v seznamu. Musite vložit seznam mezi počateční a koncovou značku položky seznamu. ■ Při vnořování můžete použivat různé kombinace seznamů: - Nečíslované seznamy uvnitř číslovaných; - Nečíslované seznamy uvnitř nečíslovaných; - Číslované seznamy uvnitř nečíslovaných; - Číslované seznamy uvnitř číslovaných;

XHTML

13

Vnořený seznam Příklad. Vnoření číslovaného seznamu do jiného číslovaného seznamu.

1. Text
2. Another text:
   1. Čokolada
   2. Bombony
3. Next text

1. Text 2. Another text: 1. Čokolada 2. Bombony 3. Next text

■ Pomocí CSS můžete měnit styly číslování i odzážek ve vnořených seznamech.

XHTML

14

Defiiniční seznamy Definiční seznamy se skládají ze tří elementů: - prvním elementem je definiční seznam

. . . . . . . .

- následuje element definovaného termínu

. . . . . . . .

- a element popisu termínu

. . . . . . . .

Příklad.

Termín 1

Popis termínu 1

Termín 2

Popis termínu 2

Termín 1 Popis termínu 1 Termín 2 Popis termínu 2

XHTML

15

Odkaz Druhy odkazů: 1) Absolutní 2) Relativní ■ V Absolutních odkazech se použivají přesné adresy souborů, na které chcete odkazovat. Absolutní adresa obsahují: - přenosový protokol; - doménu; - podadresáře; - název souboru. Příklad. http://www.someweb.com/products/conc.html ■ Relativní odkazy odkazují na soubory spojené se stejným serverem. Na jiný dokument můžete odkazovat zadáním názvu souboru (např. springboard.html), nebo přejít o úroveň výše a pak vstoupit do jiné složky (např. ../products/conc.html). ■ Odkazy jsou generovány pomocí elementu . . . . . Atribut href se použivá pro zadání adresy odkazu. Text mezi počáteční a koncovou značkou se objeví jako samotný odkaz.

XHTML Odkaz Příklad. Odkaz na absolutní adresu. HW a SW

Výsledek:

HW a SW

■ Atribut title, do néhož se vkladá podrobnější popis odkazu. Informace o HW a SW ■ Když je kurzor myši nad odkazem, objeví se nápověda s dalšími informacemi. Informace o HW a SW Informace o nové knize popisující HW a SW

16

XHTML Odkazy na e-mailové adresy ■ Odkaz je stejný jako standardní odkaz, avšak místo toho, aby vás přenesl na jinou stránku, otevře se přislušná poštovná aplikace a adresa příjemce se vloží do pole pro příjemce. V href – text mailto: následovaný e-mailovou adresou příjemce. napsat zprávu pro Kris

Vnitřní odkazy (#) ■ Vnitřní odkazy umožňují vytvořet v dokumentu odkazy na jínou oblast téhož dokumentu. Odkaz s mřižkou (#), následovanou odpovidajicím názvem a definováním místa pomocí elementu s atributem name, obsahujícím temto název.

17

XHTML

18

Vnitřní odkazy

Přejít na novinky

Vítejte

Tento odstavec vás vitá

Další text

Tento odstavec popisuje, kdo jsme

Novinky

Toto je sekce, do níž povede odkaz

Přejít na novinky

Vítejte Tento odstavec vás vitá

Tento odstavec popisuje, kdo jsme

Novinky Toto je sekce, do níž povede odkaz

XHTML Odkaz na konkretní místo v jiném dokumentu ■ Použivaní odkazu pro přechod na konkretní místo v jiném dokumentu:

Pomocí tohoto odkazu se můžete dozvědět o týmu Sparta

Nýní zadáte v cílovém dokumentu název místa:

Vše o týmu Sparta

První dokument pak obsahuje odkaz na konkretní místo v jiném dokumentu. V XTML1.1 byl atribut name zcela nahrazen atributem id.

19

XHTML Přidávání obsahu do šablony <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="vase, klicova, slova" /> <meta name="description" content="popis vasi stranky" /> <meta name="author" content="vase jmeno" />

Vítejte!

Zde jsou některé věci, které mám rád.

Computerworld

Nejnovější výsledky výzkumu využívání
videokonferencí v podnikové sfére v České republice
poukazují na skutečnost, že videokonference nyní aktivně
praktikuje více než jedna organizace z deseti.

Recept

Tento recept mám rád

20

XHTML Přidávání obsahu do šablony

Šlehaný kávový desert

1. List 1
2. List 2
3. List 3 :
   • Another list 1
   • Another list 2
4. List 4

Neobvyklé pojmy

Fuklid

Zviřatko, s nimž zachazeli jako s ditětem.

Letadlo

Fighter, Jetbox

21

XHTML Přidávání obsahu do šablony

Spojení

zprávu pro Alba

Vítejte! Zde jsou některé věci, které mám rád. Computerworld Nejnovější výsledky výzkumu využívání videokonferencí v podnikové sfére v České republice poukazují na skutečnost, že videokonference nyní aktivně praktikuje více než jedna organizace z deseti. Recept Tento recept mám rád

Šlehaný kávový desert 1. List 1 2. List 2 3. List 3 : • Another list 1 • Another list 2 4. List 4

Neobvyklé pojmy Fuklid Zviřatko, s nimž zachazeli jako s ditětem. Letadlo Fighter, Jetbox

Spojení zprávu pro Alba

22

XHTML Obrázky, multimedia a skripty

23

■ Grafické formáty: GIF, JPEG GIF – pro obrázky s malým počtem barev JPEG – pro obrázky s velkým počtem barec (např. fotografie) Multimedia – animované obrázky GIF, flashové animace, hudba, video a aplety jazyka Java. Skripty – JavaScript, efekty DHTML. Element img img – neobsahuje žádný text, nevyžaduje koncovou značku ( ) Atribut src – umístuje název grafického souboru i jeho připonu. S obrázky je možně provádet: - pomáhat prohlížečům je lépe zobrazit; - poskytovat informace tém, kdo nebudou mocí obrázky zobrazit; - vytvářet odkazy s obrázky.

XHTML Zadávání šířkya výšky (atributy width, height) 1) zjístit ---- v prohlížečí šířku a výšku 2) zadat do obrázku (HTML)

Zadávání alternativního textu (atribut alt) Podobně se objeví i při podržení kurzoru myši nad obrázkem.

Odkazy s obrázky Provádí se stejným spůsobem jako při vytvaření textových odkazů.

24

XHTML

25

Odkazy na zvukové soubory nebo na video ■ Uložtě multimediální soubory do nějaké podsložky (např. media). Příklad. Odkazy na hudební a video soubory. Odkaz na hudební soubor Velikost: 1,300 kb
Odkaz na soubor s videem Velikost: 29,000 kb ■ Je dobré uvést velikost souboru. ■ Popis souboru ---- pomocí atributu title.

XHTML

26

Vnoření souborů pomocí elementu Object ■ Jiným spůsobém použití hudebních souborů, video souborů, flashové animace, appletů jazyka Java je jejích přímé vložení do stránky. Vkládání multimediálních souborů použití elementu Object pro přímé vložení souboru: