HTML značky a jejich použití I

Dreamweaver Obsah lekce:

(X)HTML kód
Elementy
Parametry
Hodnoty
Blokové vs řádkové elementy
Rodiče a jejich potomci
Odkazy, obrázky a netextový obsah
Názvy souborů
Adresa URL (Uniform Resource Locator)
Relativní vs absolutní URL

(X)HTML kód

Zdrojový kód (X)HTML obsahuje formátovací instrukce + detaily o vztahu mezi částmi dokumentu (webové stránky). (X)HTML tedy obsahuje:

Elementy
Parametry
Hodnoty
Deklarace
Entity

Elementy

Identifikují a strukturují různé části webové stránky (hlavička, odstavec, pojem,...).
Mohou mít jeden nebo více parametrů
Neprázdné (párové) elementy - Otevírací značka (název elementu a jeho parametry), obsah a uzavírací značka. Například to budeme ilustrovat na značce , která vyznačuje text (zpravidla se pak zobrazuje jako kurzíva): Tento pojem je důležitý.
Prázdné (nepárové) elementy - Neobklopují žádný textový obsah. Například to budeme ilustrovat na značce <img> pro vložení obrázku: <img src=“jmenoobrazku.jpg” width=“300” />. Všimněme si zde poslední dvojice znaků "/>" - jedná se vlastně o uzavření značky podobně jako u párového elementu, ale lomítko je ještě součástí zápisu značky.

Parametry

Obsahují informaci o datech aniž by byly daty samotnými.
Hodnota parametru musí být v (X)HTML vždy v uvozovkách. Například parametry značky img jsou nejčastěji: zdroj obrázku (parametr src) a šířka obrázku (parametr width): <img src=“jmenoobrazku.jpg” width=“300” />.
Parametry ke všem elementům můžeme nalézt ve specifikaci HTML na adrese http://www.w3.org/TR/html4/cover.html#minitoc.

Hodnoty

Obsahují údaj pro atribut. Například u předchozí ukázky HTML kódu obrázku je hodnotou číslo 300 u atributu width značky img.

Blokové vs řádkové elementy

Element může mít podobu bloku (vždy se zobrazí na novém řádku – např. odstavec) nebo řádkovou (slovo v odstavci - libovolná posloupnost znaků - nemusí to být celý odstavec).

Ještě poznámka k HTML: v HTML kódu je jedno, kolik uděláme mezer - bude tam vždy jen jedna. Stejnětak platí, že je jedno, kolik uděláme stisků klávesy enter - pro HTML je zásadní odstavec, nikoliv prázdný odstavec.

Ukázka HTML kódu stránky:

Ukázka HTML kódu


              <h2>ZÁSADA</h2>

              <p><em>Zásada</em>, slovo tajemné a mocné. Vy ze zásady se procházíte před večeří; vaše teta ze zásady nechodí do divadla; váš moudrý bratranec ze zásady se vyhýbá davům, zatímco váš nebožtík dědeček pil ze zásady pivo ohřívané. Kdybyste se procházel ze zvyku a dyspepsie, kdyby vaše teta trávila večery doma z pohodlnosti a lakoty, kdyby váš bratránek se davů prostě bál a váš nebožtík dědeček si ohříval pivo z něžného ohledu k svým katarům, byl by svět nepochybně pestřejší a jazyk bohatší, ale život by patrně ztrácel na mravní závaznosti. Procházíte-li se ze zásady, plníte tím důležitě a věrně svou mravní povinnost; důležitější je ze zásady se vyvětrat než bez zásady navštívit nemocného přítele. Vykládá-li si vaše teta večer doma karty, jelikož zásadně neholduje světské marnosti hudby a jeviště, je to důstojný akt mravní vůle. Z každého zvyku, z každé lenosti, slabosti a setrvačnosti můžete udělat věc zásady; svět tím sice pranic nezíská, vy však ano; vyhovíte sami sobě a nádavkem se budete cítit charaktery.</p>

              <p>Karla Čapka Kritika slov (dostupná online <a href="http://www.mlp.cz/karelcapek">www.mlp.cz/karelcapek</a>)</p>

Ukázka zobrazení předchozího HTML kódu

ZÁSADA

Zásada, slovo tajemné a mocné. Vy ze zásady se procházíte před večeří; vaše teta ze zásady nechodí do divadla; váš moudrý bratranec ze zásady se vyhýbá davům, zatímco váš nebožtík dědeček pil ze zásady pivo ohřívané. Kdybyste se procházel ze zvyku a dyspepsie, kdyby vaše teta trávila večery doma z pohodlnosti a lakoty, kdyby váš bratránek se davů prostě bál a váš nebožtík dědeček si ohříval pivo z něžného ohledu k svým katarům, byl by svět nepochybně pestřejší a jazyk bohatší, ale život by patrně ztrácel na mravní závaznosti. Procházíte-li se ze zásady, plníte tím důležitě a věrně svou mravní povinnost; důležitější je ze zásady se vyvětrat než bez zásady navštívit nemocného přítele. Vykládá-li si vaše teta večer doma karty, jelikož zásadně neholduje světské marnosti hudby a jeviště, je to důstojný akt mravní vůle. Z každého zvyku, z každé lenosti, slabosti a setrvačnosti můžete udělat věc zásady; svět tím sice pranic nezíská, vy však ano; vyhovíte sami sobě a nádavkem se budete cítit charaktery.

Karla Čapka Kritika slov (dostupná online www.mlp.cz/karelcapek)

Pokuste se v předchozí ukázce identifikovat elementy, atributy, hodnoty a rolišit řádkové a blokové elementy.

Rodiče a jejich potomci

Jestliže jeden element obsahuje jiný element, pak je považován za rodiče elementu, který uzavírá (potomek). Takováto struktura je klíčová vlastnost kódu (X)HTML a umožňuje přidělovat elementům css styly. Pokud elementy obsahují jiné elementy, pak musí být každý element řádně vnořen – plně jej musí obsahovat jeho rodič.

Ukažme si to nyní na příkladu situace, kdy je v odstavci zvýrazněný text. Element p je tedy rodičem elementu . Ukažme si řádné vnoření elementu em do odstavce (elementu ) a naopak špatné:

Odkazy, obrázky a netextový obsah

Z předchozích lekcí víme, že HTML je výhradně tvořeno textem (univerzálnost). Soubor s HTML stránkou tedy neobsahuje žádné obrázky, videa, zvuky apod. Jak tedy do stránky vložit netextový obsah?

Stránky se propojují mezi sebou nebo odkazují na obrázky, flashové animace, QuickTime, MP3,...
Tyto soubory se ukládají zvlášť a ze stránky se na ně odkazuje (odkazy jsou prostým textem a zachová se tedy univerzálnost).
S většinou souborů se prohlížeče vypořádají bez problémů, ale nemohou znát každý typ souboru. Co pak? Prohlížeč se pokusí vyhledat patřičný plugin nebo se pokusí nalézt pomocnou aplikaci v operačním systému nebo soubor uloží na disk či se jej pokusí neúspěšně otevřít.

Ukázka vložení netextového obsahu v HTML kód

Názvy souborů

Při tovrbě HTML stránek používejme pro pojmenování html souborů a ostatně i všech ostatních souborů (obrázky, videa, zvuk,...) malá písmena (webservery často case-sensitive(co to je?)). Používejme korektní přípony (htm, html, php, asp, apod.).

Adresa URL (Uniform Resource Locator)

Umístění zdroje (souboru - stránky, obrázku,...) – název pro adresu.
Informace o tom, kde se soubor vyskytuje a co by s ním měl prohlížeč udělat.
První část je použitý protokol – jak se se souborem vypořádat (nejčastěji http).
Druhá část je názvem serveru, na němž se soubor vyskytuje a název souboru samotného.
Někdy URL končí lomítkem bez názvu souboru (index.html, index.php, default.asp).

Ukázky dalších příkladů cest

http://www.gjszlin.cz/gztgm/
ftp://ftp.stranky.cz/pub/program.exe
mailto:administrator@nejake.stranky.cz
File:///c|/cesta/stranka.htm

Relativní vs absolutní URL

Absolutní cesta k souboru obsahuje kompletní cestu k souboru (protokol, název serveru, kompletní cesta a názvu souboru) – např. odkaz na soubor na jiném serveru.

Relativní používat vždy pro soubory na stejném serveru, snadnost přesunu na jiný server (stránky mohu nakopírovat na jiný server, jinou doménu a stále budou fungovat, protože se na soubory odkazujeme vždy v rámci soustavy složek webu a nikoliv přes celou adresu webu včetně domény).

Úkol

Vytvořte na disku složku pro vaši internetovou stránku, v ní soubor moje-prvni-html-stranka.html. Do něj se pokuste vložit hlavičku html stránky, nadpis a odstavec textu.

Otázky

Popište na příkladu html kódu co jsou entity, parametry a hodnoty.
Charaktrizujte elementy html stránky.
Charakterizujte blokové a řádkové elementy. Jaký je mezi nimi rozdíl? Uveďte příklady.
Vysvětlete princip řádného vnoření html elementu potomka do html elementu rodiče.
Vysvětlete princip vložení netextového obsahu do html souboru. Proč nelze například obrázek vložit přímo do souboru s html kódem?
Jaká pravidla bychom měli dodržovat při pojmenovávání souborů pro náš web?
Co je to URL? Uveďte příklad a popište jednotlivé části.
Jaký je rozdíl mezi absolutním a relativním url? Kdy se které používá?

webdesign, xhtml, css, php - Mgr. Michal Mikláš