Dynamické HTML (DHTML) je soubor technologií, které umožňují dynamické a interaktivní změny webových stránek po jejich načtení do prohlížeče. Před nástupem Microsoft Internet Exploreru 4.0 byly dynamické dokumenty jenom mýty, protože jediným okamžikem, kdy bylo možné stránku změnit, byla její vlastní příprava. Interaktivní dokumenty byly simulovány úplným novým zavedením stránky nebo objekty vkládanými do stránky.
Mnoho z takových appletů Java, ovládacích prvků ActiveX nebo dokonce i animovaných obrázků GIF bylo navrženo k tomu, aby prováděly jakoby manipulaci textu, což umožňovalo obejít přirozenou statičnost HTML. Potom, co vývojáři Internet Exploreru vyzkoušeli mnoho scénářů pro takové objekty a animované soubory GIF, si pro zpracování dokumentů uvědomili potřebu výkonnějšího API (Application Programming Interface - rozhraní aplikačních programů). Koncepce vytváření interaktivních stránek není nová - Microsoft i Netscape zpočátku definovali jednoduchý model objektu, který byl uváděn jako způsob vytváření interaktivních stránek. Při bližším zkoumání se ukázalo, že tento model objektu byl účinný pouze pro základní formu vyhodnocení. S modelem objektu nabízejícím úplný přístup k dokumentu mohou autoři využít výhod možností zpracování vzhledu, vestavěných v HTML, a CSS (Cascading Style Sheets - kaskádní nebo postupné styly).
Tento model objektu výrazně zvýšil výkon tím, že omezil potřebu zavádění velkých animovaných obrázků nebo appletů. Dynamické HTML nabízejí API, které je nezbytné pro celkovou kontrolu dokumentu HTML. Není již potřebné stránku při jejím zavádění definovat. Po zavedení může být kterákoliv část stránky dynamicky a okamžitě změněna. Například můžeme vytvořit aplikaci, která má rozšiřující se nebo naopak zmenšující se osnovu. Když uživatel osnovu rozšíří nebo zmenší, bude obsah okamžitě zobrazen nebo skryt. Jsou to možnosti přípravy stránek, které se automaticky mění nebo se sami upravují podle potřeb uživatele. Tohle všechno a mnohem více možností nabízí dynamické HTML.
Dynamické HTML je postaveno na modelu objektu, který rozšiřuje tradiční statické dokumenty HTML. K pochopení vytváření webových stránek plně vyžaduje porozumět architektuře IE 4.0. Většina aplikací jako je např. Microsoft Word, Microsoft Excel, Microsoft PowerPoint a Internet Explorer jsou složeny z objektů. Vlastnosti a metody realizují užitečnou funkci pro určitou část softwaru. Kolekci vlastností a metod, jež definují určitý objekt, se říká rozhraní (interface). Rozhraní je vyvoláváno uživatelem pomocí nástrojových panelů a nabídek, může je však volat přímo programátor prostřednictvím programového kódu. Vše, co může provádět uživatel v aplikaci, může dělat i programátor, jenž provádí volání k objektům. Objektové modely Microsoftu jsou založeny na technologii známé jako Component Object Model (COM), což je specifikace, v níž je definováno, jak objekty komunikují.
Základní komponenty HTML dokumentů a DHTML
HTML je aplikací SGML (Standart Generalized Markup Language - normalizovaný obecný jazyk strukturování a formátování dokumentu). V dokumentech SGML/HTML jsou tři významné momenty: struktura, styl a obsah. S pomocí dynamického HTML nyní HTML obsahuje čtvrtou komponentu: chování.
Čtěte také: Jak namontovat ukončovací lišty
- Struktura: Struktura je vystavěna v sadě sbírek prvků. Struktura nabízí kontext informací obsažených v dokumentu. Například prvky hlaviček H1 až H6 jsou míněny tak, aby definovaly různé hlavičky a jejich relativní důležitost. HTML rovněž definuje sadu pravidel pro správnou strukturu dokumentu. DTD (Document Type Definition - definice typu dokumentu) popisuje prvky, které mohou být obsaženy v jiných prvcích. Je důležité pochopit, že ne všechny prvky HTML mohou být v dokumentu libovolně umístěny. Když se v prohlížeči webová stránka špatně obnovuje, je to obvykle způsobeno HTML, které selhává při přizpůsobení se DTD. Naneštěstí mnoho stránek v síti WWW neodpovídá žádné HTML DTD, ale prohlížeče, místo aby uživatele nutily správně definovat dokumenty, obsahují neurčitou sadu pravidel pro analýzu dokumentu.
- Styl: Styl je vystavěn v každém prvku a ve sbírce stylů stránek. Jako odchylka od SGML byla uvedena stylistická označení. Do poloviny roku 1996 byly styly v HTML ovládány zcela jednoduše pomocí tagů a stylistických atributů, jako je ALIGN. Za těchto podmínek HTML nebyl skutečným jazykem SGML, ve kterém je struktura a styl definován odděleně. V pravém jazyce SGML může mít dokument připojený list stylu, který definuje, jak jsou prvky struktury obnovovány. V polovině roku 1996 byl pro specifikaci stylu v HTML představen nový jazyk, pojmenovaný Cascading Style Sheets, kaskádní styl. Charakteristika CSS byla společným dílem Berta Bose a Hakona Lie ze skupiny W3C mnoha příspěvky členů W3C a byla přijata jako hlavní implementace prohlížečů. V zásadě v CSS prvek Strong (a dokonce, pro tento příklad, ani prvek Bold) již neoznačují tučný text. Místo toho zůstává prvku Strong jeho původní účel, kterým je indikace důležitých slov.
- Obsah: Obsah je tvořen každým prvkem a objektem TextRange. Aby byla plně využita výhoda dynamického HTML, musí váš dokument správně oddělovat obsah a strukturu od prezentace.
- Chování: S pomocí dynamického HTML nyní HTML obsahuje čtvrtou komponentu: chování.
Jak však HTML rychle odvodilo, rozdíl mezi strukturou a prezentací byl často ignorován. Autoři používali označení HTML ne jako způsob nabídky struktury, ale jako způsob definování stylu. Prvek H1 byl často použit ve významu velký, tučný text místo toho, aby indukoval hlavičky nejvyšší úrovně.
Základní syntaxe HTML a tagy
Jazyk HTML je textového (ASCII) formátu a přímo v tomto formátu je požíván - není nikdy kompilován do binární či jakékoli jiné podoby. Znamená to, že jakmile vytvoříme stránku HTML v textovém editoru, vytvořili jsme její finální tvar, který přímo čte a interpretuje prohlížeč. Textové soubory HTML využívají celé osmibitové ASCII sady.
Tag = je chráněné slovo jazyka HTML, uzavřené do špičatých závorek (k českému výrazu je nejblíže slovo štítek, návěští či označení). Všechny příkazy jazyka HTML jsou tagy - vše, co je mimo špičaté závorky, je vlastní obsah stránky.
Typy tagů
- Párové tagy: Ty mezi sebe uzavírají vlastní obsah a přiřazují mu vlastní hodnotu. Tag na levé straně výrazu je stejný s jediným rozdílem. Uzavírací tag má za závorkou uzavírací lomítko.
- Nepárové tagy: Umísťují do stránky jediný element, který je svou podstatou nedělitelný. Jsou to např. elementy jako je pozadí, vodorovná linka nebo vložení obrázku.
Neznamená to, že už nejsou používané nebo podporované, ale měly by se používat co nejméně. Proč ale nepoužívat tak klasický tag <FONT>? Za úplně vypuštěné tagy můžete považovat následující: XMP, PLAINTEXT, LISTING.
Nové atributy v HTML 4.0
Dva nové argumenty s názvy lang a dir jsou použitelné téměř ve všech textových elementech. Jazykový kód se stává z povinného dvoupísmenného kódu podle ISO 439. Jsou to: CZ (pro češtinu), SK, DR, FR, ES, EN, DE. U kódu jazyka také může být subkód, který určuje o jaký typ jazyku jde. Například en-US = americká angličtina. dir : LTR nebo dir:RTL - určuje směr čtení textu, vlastní směr udává atribut dir.
Čtěte také: Nezbytný nástroj pro beton
S novou verzí jazyka HTML musí přibýt i nově označení. Těch označení je několik: <!DOCTYPE ....atd......>, který oznamuje prohlížeči, pro jaký typ prohlížeče je dokument napsán. Dokument je napsán jazykem HTML verze 4.0 a to ve finální, tedy končenou, verzi (podle slova Final). V obou dvou případech si všimněme, že na konci je označení také jazyka, ve kterém je dokument napsán.
Určující umístění jednoho nebo více datových profilů (metasouborů). Poznámka: W3C nahrazuje ve všech novějších doporučeních zkratku URL zkratkou URI (I=identifer), která je obecnější. Slouží pro vyhledávací stroje v síti Internetu. Udáme co naše stránka obsahuje a podle toho ji vyhledávače zařadí. U tohoto elementu by se již neměli používat tyto argumenty: BACKGROUND, TEXT, VLINK, ALINK, LINK. Jsou označovány jako zastaralé. HTML 4.0 dává přednost stylům pro formátování textu, odkazů, vlastností pozadí atd.
První příklad nám něco spustí po načtení stránky, druhý až když browser (prohlížeč) odstraní dokument z okna či rámu. Místo hodnoty "něco" můžeme použít například script. Tento tag dává prohlížeči najevo, že má spustit nějaký script, který je blíže definovaný ve stránce, ihned při načítání této stránky.
Pokud budeme používat styly, můžeme dokonce využívat i nastavení vlastností z externího souboru, kde jsou popsány tyto vlastnosti. Tyto soubory s vlastnostmi mají příponu class. Tím říkáme prohlížeči, aby styly načetl ze souboru main.css, který se nachází ve stejném adresáři jako náš dokument. Pokud pak něco změníme v tomto souboru, změny se projeví i ve všech stránkách, které používají styly definované v tomto dokumentu.
Nové tagy a atributy v HTML 4.0
Tato tabulka shrnuje některé nové a důležité tagy a atributy, které byly zavedeny v HTML 4.0 nebo získaly na významu s nástupem DHTML a CSS.
Čtěte také: Dilatační spáry v betonu
| Tag/Atribut | Popis | Příklad/Použití |
|---|---|---|
| <Q> | Nový tag pro krátké citace. Zjednodušuje syntaxi a obsahuje adresu zdrojového dokumentu. | <q cite="http://example.com/zdroj">Citovaný text</q> |
| <INS> | Označuje text, který byl přidán jako pozdější úprava dokumentu. Umožňuje specifikovat datum a čas. | <ins datetime="RRRR-MM-DDThh:mm:ssTZD">Přidaný text</ins> |
| <DEL> | Má stejné parametry jako tag <INS> a slouží k označení části textu, která byla z dokumentu vyjmuta. | <del datetime="RRRR-MM-DDThh:mm:ssTZD">Odstraněný text</del> |
| <ABBR> | Používá se pro vyhledávací a indexovací centrály, ale i pro popis zkratky. Zobrazuje bublinkovou nápovědu nebo ve stavové řádce vysvětlí pojem zkratky. | <abbr title="HyperText Markup Language">HTML</abbr> |
| <ACRONYM> | Určen k podobnému použití jako <ABBR>, tj. k uvedení zkratek jako HTTP, WWW atd. | <acronym title="World Wide Web">WWW</acronym> |
| <A> (anchor) | Základní tag odkazující na jiný element. Kotva může být typu HREF (hyperlink reference) nebo NAME (odkaz na pojmenované místo v dokumentu). | <a href="stranka.html">Odkaz</a>, <a name="sekce">Sekce</a> |
| ACCESSKEY | Atribut pro rychlý přístup k odkazu pomocí klávesové zkratky. | <a href="kontakt.html" accesskey="k">Kontakt</a> |
| <MAP> & <AREA> | Pro vytváření klikacích map, kde různé části obrázku vedou na různé odkazy. | <map name="mapa"><area shape="rect" coords="x1,y1,x2,y2" href="link.html"></map> |
| COORDS | Určuje souřadnice oblasti pro klikací mapu. Formát závisí na tvaru (shape). | coords="x1,y1,x2,y2" (obdélník), coords="střed_x,střed_y,poloměr" (kruh) |
| <INPUT> | Vytváří elementy, na které uživatel přímo reaguje (např. textová pole, tlačítka). Rozšířený element pro odesílání dat na server. | <input type="text" name="jmeno"> |
| TABINDEX | Určuje pořadí při přeskakování mezi formulářovými poli tabulátorem. | <input tabindex="1"> |
| <BUTTON> | Novinka ve verzi HTML 4.0, slouží k vytvoření tlačítka, které může být velmi rozsáhle formátováno. | <button type="submit" name="odeslat">Odeslat</button> |
| NAME | Jméno tlačítka, na které se odkazují řídící skripty. | name="tlacitko" |
| <LEGEND> | Vytvoří nadpis skupinky elementů (např. ve <FIELDSET>) a přeruší tenkou čáru tagu <FIELDSET>. | <legend>Osobní údaje</legend> |
| ISINDEX | Tento tag je označen v nové verzi jako zastaralý a jeho používání není doporučeno. | Zastaralé |
| BORDERCOLOR | Určuje barvu rámečku. | bordercolor="red" |
| CELLSPACING | Definuje volný prostor mezi buňkami v pixelech. | cellspacing="5" |
| RULES | Definuje viditelnost vnitřních rámečků tabulky (NONE, BASIC, ROWS, COLS, ALL). | rules="rows" |
| AXIS | Pojmenování obsahu konkrétní buňky (platí i pro <TH>). | axis="Cena" |
| <THEAD>, <TBODY>, <TFOOT> | Oficiálně uvedeny až ve verzi 4.0, vytvořeny za účelem sloučení více řad do tří skupin: hlavičky, těla a patičky tabulky. | <thead>...</thead><tbody>...</tbody><tfoot>...</tfoot> |
| <COLGROUP>, <COL> | Dokáže formátovat celé sloupce, můžeme tak zadat vlastnosti, které budou platit pro celý sloupec, nebo i více sloupců najednou. | <colgroup><col style="width: 100px"></colgroup> |
| char, charoff | Nové atributy pro zarovnávání textu v tabulkových buňkách na konkrétní znak (např. desetinnou čárku) a odsazení. | align="char" char="." charoff="5" |
| FRAMEBORDER | Definuje viditelnost (1) nebo neviditelnost (0) okrajů rámu. | frameborder="0" |
| ONLOAD, ONUNLOAD | Atributy pro spouštění akcí (skriptů) u tagu <FRAMESET>, jakmile jsou rámy načteny/zrušeny. | <frameset onload="nacteno()"> |
| <IFRAME> | Vytváří plovoucí rámy, které odstraňují některé nevýhody konvenčních rámů a rozšiřují možnosti jejich použití. | <iframe src="stranka.html" width="200" height="100"> |
| <NOFRAMES> | Pro prohlížeče, které nezvládají zobrazení rámů, tento párový tag skryje vše, co má být zobrazeno. | <noframes>Váš prohlížeč nepodporuje rámy.</noframes> |
| <EMBED> | Slouží pro vkládání a definování souborových objektů, velmi často to bývají ovladače v ActiveX nebo Javě do stránek. | <embed src="video.mp4" width="300" height="200"> |
| <OBJECT> | Složitější a flexibilnější tag pro vkládání multimédií a aplikací. | <object data="aplikace.exe" type="application/x-some-app"> |
| <PARAM> | Parametry předávané danému objektu (uvnitř <OBJECT> nebo <EMBED>). | <param name="autoplay" value="true"> |
| <MARQUEE> | Tag s efektem "rolující text", poprvé uvedený Internet Explorerem. | <marquee behavior="scroll">Rolující text</marquee> |
| BEHAVIOR | Určuje chování textu u tagu <MARQUEE> (např. SCROLL, SLIDE, ALTERNATE). | behavior="scroll" |
Časové pásmo je minus pět hodin od Greenwiche. Písmeno "T" odděluje datum od času.
tags: #lista #se #presunula #nahoru #vysvětlení