HTML - stručná reference

Transkript

1 1. základní tagy určující strukturu HTML dokumentu <!DOCTYPE>, <BODY>, <HEAD>, <HTML> 1.1 <!DOCTYPE> Specifikuje DTD (Data Type Definition) kterému odpovídá dokument HTML. Tento tag říká prohlížeči, v jaké verzi a typu HTML je dokument napsán. Nejnovější verze je HTML K dostání ve třech příchutích: strict (přísný), transitional (volnější) a frameset (určený pro definici rámců viz kapitola 2). Příklad 1.: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 3.2//EN > - dokument kompatibilní s HTML 3.2 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 strict//en > - striktně dodržující HTML <HTML> Tento párový tag ohraničuje HTML dokument. Následuje těsně za tagem <!DOCTYPE> a obsahuje tagy HEAD a BODY (viz příklad 2). Příklad 2.: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN > <HTML> <HEAD> Hlavička dokumentu </HEAD> <BODY> Tělo dokumentu </BODY> </HTML> 1.3 <HEAD> Párový tag HEAD uzavírá hlavičku dokumentu (viz příklad 2.) V hlavičce se vyskytují speciální tagy, které se vztahují k celému dokumentu (titulek, zvuk na pozadí, klíčová slova, ), ale nejsou považovány za obsah (viz 3. kapitola). 1.4 <BODY> Jak název napovídá, tento párový tag uzavírá tělo dokumentu (tj. tagy a text, které prohlížeč zobrazí uživateli). alink background bgcolor link text vlink barva aktivního hypertextového odkazu (zastaralý) URL obrázku na pozadí (zastaralý) barva pozadí výchozí barva hypertextových odkazů (zastaralý) výchozí barva textu v dokumentu (zastaralý) barva navštívených hypertextových odkazů (zastaralý) 2. rámce (frames) <FRAME>, <FRAMESET>, <IFRAME> Rámce umožňují rozdělit okno prohlížeče na více částí a do každé z nich načíst jiný HTML soubor. Tak je možné např. vyhradit levou část obrazovky pro menu nebo horní část obrazovky pro titulek s logem apd. Tímto způsobem lze snížit stahovaný objem dat (např. menu se stáhne pouze jednou na začátku a nemusí se stahovat pokaždé, když uživatel přejde na jinou stránku). Další výhodou je lepší přehled při vyvíjení dokumentu. Přes své výhody se v současné době od rámců upouští, protože zhoršují přehlednost webu. Na stránku umístěnou v rámci sice lze vytvořit odkaz, ale jen na stránku samotnou (bez rámce). Rámce také stěžují práci indexačním nástrojům a vyhledávačům. 2.1 <FRAME> a <FRAMESET> Tagy FRAME a FRAMESET definují standardní rámy. V DOCTYPE dokumentu musí být uveden DTD typu frameset. Tag FRAMESET nahrazuje tag BODY. Je párový a definuje počet a rozměry rámců, které jsou zapsány uvnitř a lze jej libovolně vnořovat. Tag FRAME pak definuje samotný rámec (obsah, okraje ) a musí být použit uvnitř tagu FRAMESET. Martin Kruliš pouze ke studijním účelům strana 1 z 17

2 Parametry <FRAMESET>: cols rows čárkami oddělený seznam rámců, které budou zarovnány jako sloupce vedle sebe v seznamu jsou uvedeny šířky sloupců v pixelech (px), procentech (%), nebo jako zbytek (*) čárkami oddělený seznam rámců, které budou zarovnány jako řádky pod sebe v seznamu jsou uvedeny výšky řádků v pixelech (px), procentech (%), nebo jako zbytek (*) Parametry <FRAME>: frameborder = 0 1 zapíná (resp. vypíná) zobrazení okraje rámce (pozn. 1 = zapnuto) marginheight velikost mezery (v pixelech) mezi horním (resp. spodním) okrajem rámu a dokumentem marginwth velikost mezery (v pixelech) mezi levým (resp. pravým) okrajem rámu a dokumentem name název rámu, který je použit při entifikaci rámce (např. u tagu A - viz 9.1) noresize přání noresize zamkne rám a uživatel nemůže měnit jeho velikost scrolling = AUTO YES NO zapíná (resp. vypíná) scrollovací boxy po stranách dokumentu (AUTO = prohlížeč sám rozhodne, jestli jsou potřeba tato možnost je výchozí) src URL dokumentu, který se načte do tohoto rámu Příklad 3: <!DOCTYPE HTML PUBLIC -//W3C/DTD HTML 4.01 Frameset//EN > <HTML> <HEAD> <TITLE>Ramce</TITLE> </HEAD> <FRAMESET rows= 10%, * > <FRAME src= nadpis.html noresize> <FRAMESET cols= 120, * > <FRAME src= menu.html scrolling=no> <FRAME src= index.html > </FRAMESET> </FRAMESET> </HTML> 120px 10% zbytek (90%) zbytek (bez 120px) 2.2 <IFRAME> Toto je zvláštní typ rámce, který bývá označován jako plovoucí rámec. Tento tag se na rozdíl od klasického FRAME nevyskytuje v hlavičce, ale přímo v těle dokumentu. Podle umístěni a zarovnání vytvoří v dokumentu obdélníkovou oblast, do které je možné načíst jiný HTML soubor. = ABSBOTTOM ABSMIDDLE BASELINE BOTTOM LEFT MIDDLE RIGHT TEXTTOP TOP frameborder = 0 1 zapíná (resp. vypíná) zobrazení okraje rámce (pozn. 1 = zapnuto) height nastavuje výšku objektu (v pixelech, nebo procentech) marginheight velikost mezery (v pixelech) mezi horním (resp. spodním) okrajem rámu a dokumentem marginwth velikost mezery (v pixelech) mezi levým (resp. pravým) okrajem rámu a dokumentem name název rámu, který je použit např. u tagu A (viz 9.1) noresize přání noresize zamkne rám a uživatel nemůže měnit jeho velikost scrolling = AUTO YES NO zapíná (resp. vypíná) scrollovací boxy po stranách dokumentu (AUTO = prohlížeč sám rozhodne, jestli jsou potřeba tato možnost je výchozí) src URL dokumentu, který se načte do tohoto rámu wth nastavuje šířku objektu (v pixelech, nebo procentech) 3. tagy v části <HEAD> <BASEFONT>, <BGSOUND>, <META>, <SCRIPT>, <STYLE>, <TITLE> Tagy umístěné v hlavičce (HEAD viz kapitola 1.3) určují parametry celého dokumentu. Martin Kruliš pouze ke studijním účelům strana 2 z 17

3 3.1 <BASEFONT> Určuje výchozí font pro celý dokument. Lokální změnu fontu lze provést použitím tagu FONT (viz 4.8). Tento tag je označen za zastaralý a k nastavování fontů se dnes bezvýhradně používají kaskádové styly. color face size barva písma název fontu, případně seznam fontů oddělený čárkami (prohlížeč se pokusí tyto fonty nalézt v zadaném pořadí) absolutní velikost písma v rozsahu 1 (nejmenší) 7 (největší) skutečnou velikost písma určí prohlížeč 3.2 <BGSOUND> Nastavuje zvuk, který je přehráván při prohlížení dokumentu. Tento tag je rozšířením standardního HTML, se kterým přišel prohlížeč Internet Explorer 3 (v jiných prohlížečích nemusí fungovat). Zde jej uvádím pouze na ukázku, jinak silně doporučuji tento tag nepoužívat. balance delay loop src volume rozdělení hlasitosti mezi levý a pravý kanál (hodnoty od do , 0 je rovnoměrné rozdělení) zpoždění začátku přehrávání (v sekundách) kolikrát se má zadaný zvuk přehrát (-1 = přehrávat stále dokola) URL zvukového souboru (soubory *.m a *.wav, podpora ostatních formátů závisí na prohlížeči) hlasitost zvuku (povolený rozsah = ztlumené 0 = max. hlasitost) 3.3 <META> Tento tag nastavuje tzv. meta informace o dokumentu. Tyto informace bývají použity internetovým prohlížečem, vyhledávacími servery, nebo dalšími aplikacemi. Tag meta musí mít nastaven atribut name, nebo http-equiv, ale ne oba současně, a atribut content. name http-equiv content název (typ) informace uložené v obsahu (atribut content) nesmí být použit s http-equiv přává doplňující informace o dokumentu ve formě http hlaviček nesmí být použit s name informace o dokumentu Příklad 4: <META name= Author content= Martin Kruliš > - nastaví jméno autora <META name= Keywords content= HTML, Reference > - nastaví klíčová slova, která charakterizují stránku <META name= Description content= Popis obsahu dokumentu > <META http-equiv= Refresh content= 60 > - stránka se každých 60 vteřin znovu načte <META http-equiv= Refresh content= 5; URL= > - stránka se za 5s přesměruje na Seznam <META http-equiv= Content-Type content= text/html; charset=windows-1250 > - nastaví znakovou sadu Uživatelské informace (jako např. Autor, Keywords nebo Description) slouží především vyhledávacím robotům k indexaci HTML dokumentu na webu. Informace typu http-equiv doplňují hlavičku http protokolu, který slouží ke stahování dokumentů z webu. Bližší informace naleznete na některém ze zdrojů, které jsou uvedeny v odkazech. 3.4 <SCRIPT> Tento párový tag lze použít ke vložení Java scriptu nebo Visual Basic skriptu do HTML dokumentu. Tag SCRIPT je možné použít i v těle dokumentu, ale je lepší ponechat skripty v hlavičce. Z důvodů kompatibility se staršími prohlížeči, které skript nepodporují, je dovoleno a doporučeno samotný kód skriptu ještě zakomentovat tagy  (viz příklad 5). Je silně doporučeno vložit kód skriptu do samostatného souboru a pomocí tagu SCRIPT se na něho pouze odkázat (viz parametr src). charset defer language src type znaková sada načítaného externího skriptu (URL skriptu je definováno v src) uvedení tohoto parametru říká prohlížeči, že v bloku SCRIPT jsou pouze funkce (žádný kód, který je potřeba spustit okamžitě); v případě vkládaní skriptů může tato možnost urychlit načtení stránky určuje jazyk skriptu (zastaralé) URL externího souboru skriptu MIME typ obsahu (např. text/javascript). Příklad 5: <SCRIPT defer type= text/javascript ></SCRIPT> Martin Kruliš pouze ke studijním účelům strana 3 z 17

4 3.5 <STYLE> Uvnitř párového tagu STYLE jsou uvedeny třídy kaskádových stylů. Z důvodů zpětné kompatibility se staršími prohlížeči je dovoleno a doporučeno třídy stylů ještě zakomentovat tagy  (viz příklad 6). media seznam typů médií oddělený čárkami (možné hodnoty jsou screen tty tv projection handheld print braille aural all); typ média určuje, při jaké příležitosti budou styly aplikovány (např. screen představuje vykreslení na obrazovku, printer bude použit při tisku na tiskárně atd.) type MIME typ obsahu (je nutné nastavit tento typ na text/css). Příklad 6: <STYLE media= SCREEN type= text/css ></STYLE> 3.6 <TITLE> TITLE je asi nejdůležitějším tagem v této kapitole a definuje titulek dokuementu. Jedná se o párový tag, uvnitř kterého je titulek stránky. Titulek dokumentu bývá zpravla zobrazen jako titulek okna prohlížeče. 4. jednoduché formátování textu <B>, <BIG>, <BR>, <CITE>, <CODE>, <FONT>, <I>, <KBD>, <NOBR>, <Q>, <S>, <STRIKE>, <SMALL>, <SPAN>, <SUB>, <SUP>, <U>, <WBR> Všechny značky v této kapitole se používají přímo v textu (tzv inline marking) a pokud není řečeno jinak (např. u BR) nezpůsobují zalomení řádku. 4.1 <BR> Jazyk HTML ignoruje vícenásobný výskyt bílých znaků (tedy i zalomení řádku), a proto je nutné vložit zalomení řádku jako tag BR (z angl. BRake). Lze ho použít i vícekrát za sebou k vertikálnímu odsazení (několika násobnému odřádkování). clear = ALL LEFT RIGHT ovlivňuje umístění dalšího textu (po zalomení) v případě, že se na některém z okrajů nachází plovoucí objekty (např. obrázek s nastaveným = right ) 4.2 Tučné <B>, kurzíva <I> Párové tagy B a I formátují text, který se nachází mezi počátečním a koncovým tagem na tučný (B - Bold) nebo kurzívu (I - Italic). Parametry (pro oba tagy): 4.3 Podtržené <U>, přeškrtnuté <S>, <STRIKE> Text uvnitř těchto tagů bude podtržený (U - Underline), resp. přeškrtnutý (S - Striked). Tag S a STRIKE jsou totožné. Tyto tagy jsou označeny za zastaralé a je lepší místo nich použít kaskádové styly. Parametry (pro oba tagy): 4.4 Zvětšené <BIG>, zmenšené <SMALL> Písmo uvnitř těchto tagů bude zobrazeno fontem relativně větším (resp. menším) než okolní písmo. Skutečnou velikost určí prohlížeč. Martin Kruliš pouze ke studijním účelům strana 4 z 17

5 Parametry (pro oba tagy): 4.5 Dolní index <SUB>, Horní index <SUP> Písmo uvnitř párových tagů SUB a SUP bude zobrazeno jako dolní (SUB) resp. horní (SUP) index. Parametry (pro oba tagy): 4.6 <CITE> Text uvnitř tohoto párového tagu je označen jako citace. Prohlížeč zpravla zobrazuje citace kurzívou. 4.7 <CODE> Text uvnitř tohoto párového tagu je chápán jako úryvek zdrojového kódu. Prohlížeč zpravla zobrazuje kód malým neproporcionálním písmem (např. Courier New). 4.8 <FONT> Text uvnitř tohoto párového tagu je zobrazen nastaveným fontem, barvou a velikostí. Tento tag je (stejně jako BASEFONT) označen ve specifikaci jako zastaralý. K nastavování fontů používejte raději kaskádové styly. color barva písma face název fontu, případně seznam fontů oddělený čárkami (prohlížeč se pokusí tyto fonty nalézt v zadaném pořadí) size absolutní velikost písma v rozsahu 1 (nejmenší) 7 (největší), nebo relativní velikost (např. +1 = o jedna větší písmo) skutečnou velikost písma určí prohlížeč 4.9 <KBD> Text uvnitř tohoto párového tagu je chápán jako ukázka vstupu z klávesnice. Prohlížeč tento text zpravla zobrazí tučným neproporcionálním písmem (např. Courier New) <NOBR>, <WBR> Text uvnitř párového tagu NOBR nebude zalomen (bez ohledu na to, v jak úzkém okně je zobrazen). Tag WBR lze použít uvnitř tagu NOBR a určuje místo, kde je možné text zalomit v případě potřeby (tzv. soft BRake). Martin Kruliš pouze ke studijním účelům strana 5 z 17

6 Parametry (pro oba tagy): 4.11 <Q> Text uvnitř tohoto párového tagu je chápán jako citace (z angl. Quotation). Prohlížeč může text zobrazit kurzívou, nebo uzavřený do uvozovek. cite URL dokumentu, ze kterého je citováno 4.12 <SPAN> Tento párový tag nehraje žádnou zásadní roli v HTML, protože text uvnitř tagu SPAN není z hlediska HTML speciálně formátován. Společně s tagem DIV nabízí uživateli definování obecné struktury v HTML dokumentu a přávání kaskádových stylů. 5. formátování textu blokové tagy <DIV>, <H1 6>, <P>, <PLAINTEXT>, <PRE> Na rozdíl od formátovacích tagů ve 4. kapitole tyto tagy neupravují jen font, barvu, velikost apd., ale také vytvářejí odsazení. Tzn. obsah bloku začíná vždy na novém řádku a obsah, který následuje za blokem, je rovněž odsazen. 5.1 Nadpisy <H1> <H6> Těchto šest párových tagů (H1, H2 H6) vytváří nadpisy 6ti různých úrovní (a velikostí). H1 je nadpis nejvyšší úrovně (tzn největší) a H6 nejnižší úrovně (nejmenší) Skutečnou velikost fontu definuje prohlížeč (nebo ji lze předefinovat pomocí kaskádových stylů). = CENTER LEFT RIGHT horizontální zarovnání (na střed, doleva, doprava) (zastaralý) 5.2 <P> Párový tag P (Paragraph) ohraničuje odstavec. Odstavec je odsazen nahoře i dole od ostatního textu. = CENTER LEFT RIGHT horizontální zarovnání (na střed, doleva, doprava) (zastaralý) 5.3 <DIV> Párový tag DIV vytváří blok textu. Na rozdíl od tagu P (viz 5.2) text pouze zalomí, ale neodsadí. V kombinaci s kaskádovými styly CSS se z DIV stává silný nástroj, protože jej lze použít k formátování vzhledu částí dokumentu. = CENTER LEFT RIGHT horizontální zarovnání (na střed, doleva, doprava) (zastaralý) Martin Kruliš pouze ke studijním účelům strana 6 z 17

7 5.4 <PRE> Text v tomto párovém tagu bude zobrazen neproporcionálním písmem a budou v něm zachovány všechny bílé znaky (včetně zalomení řádků a tabulátorů). 6. seznamy <DD>, <DL>, <DT>, <LI>, <DIR>, <MENU>, <OL>, <UL> Seznamem jsou v HTML myšleny číslované fráze nebo odrážkami uvozené části textu. Existují tři základní typy číslovaný seznam, seznam s odrážkami a seznam definic. 6.1 <UL> Text uvnitř tohoto párového tagu je formátován jako nečíslovaný seznam uvozený odrážkami. Jednotlivé položky seznamu jsou ohraničeny tagem LI (viz 6.3). start type value změní hodnotu číslování od této položky (včetně) dále (zastaralé) = disc circle square - změní formát odrážek (zastaralé) disc plné kolečko circle kružnice (prázdné kolečko) square čtvereček nastaví hodnotu číslování aktuální položky (zastaralé) 6.2 <OL> Text uvnitř tohoto párového tagu je formátován jako číslovaný seznam. Jednotlivé položky seznamu jsou ohraničeny tagem LI (viz 6.3). start type value změní hodnotu číslování od této položky (včetně) dále (zastaralé) = 1 a A i I - změní formát číslování (zastaralé) 1 dekadické a, A malá (velká) písmena i, I řecké číslování malými resp. velkými písmeny nastaví hodnotu číslování aktuální položky (zastaralé) 6.3 <LI> Tag LI ohraničuje jednotlivé položky v seznamech DIR, MENU, OL a UL. Tento tag je párový, avšak použití koncového tagu je nepovinné. start type value změní hodnotu číslování od této položky (včetně) dále (zastaralé) = 1 a A i I disc circle square - změní formát číslování/odrážek (zastaralé) 1 dekadické a, A malá (velká) písmena i, I řecké číslování malými resp. velkými písmeny disc plné kolečko circle kružnice (prázdné kolečko) square čtvereček nastaví hodnotu číslování aktuální položky (zastaralé) Martin Kruliš pouze ke studijním účelům strana 7 z 17

8 6.4 <DIR> Položky uvnitř tohoto párového tagu jsou chápány jako seznam adresářových záznamů. Jednotlivé prvky jsou ohraničeny tagem LI (viz 6.3). Prohlížeč zpravla zachází se seznamem DIR stejně, jako se seznamem UL. 6.5 <MENU> Položky uvnitř tohoto párového tagu jsou chápány jako seznam bodů v nabídce. Jednotlivé prvky jsou ohraničeny tagem LI (viz 6.3). Prohlížeč zpravla zachází se seznamem MENU stejně, jako se seznamem UL. 6.6 seznam definic <DL>, <DT>, <DD> Text je formátován jako seznam definic nalevo a jejich vysvětlení napravo. Párový tag DL ohraničuje celý seznam, DT uvozuje definici a DD její vysvětlení. Tagy DL a DT jsou rovněž párové, ale použití koncových tagů je volitelné (prohlížeč jinak určí konec na místě, kde začíná další definice, nebo kde seznam končí úplně). Parametry <DL>: compact Parametry <DT>: Parametry <DD>: přání tohoto parametru řekne prohlížeči, aby zobrazoval definici a vysvětlení na stejném řádku Příklad 7: <DL compact> <DT>Kočka</DT> <DD>Domestikovaný savec, který trhá závěsy a škrábe křeslo.</dd> <DT>Lumík</DT> <DD>Hlodavec se sebevražednými sklony.</dd> </DL> 7. tabulky <CAPTION>, <COL>, <COLGROUP>, <TABLE>, <TBODY>, <TD>, <TFOOT>, <TH>, <THEAD>, <TR> Tabulky jsou velice silným nástrojem HTML, kromě klasického využití, které napovídá již název, se dají použít i k lokálnímu formátování textu (tam kde klasické metody a kaskádové styly nestačí např. formátování víceřádkových vzorců). 7.1 <TABLE> Základní párový tag, který vytváří tabulku. Všechny následující tagy z této kapitoly ( ) jsou používány uvnitř tagu TABLE. Jako oddělovače řádků slouží tagy TR a na oddělování buněk v řádku se používá TD a TH. Ostatní tagy jsou volitelné. bgcolor border cellpadding cellspacing = CENTER LEFT RIGHT horizontální zarovnání (na střed, doleva, doprava) (zastaralé) barva pozadí šířka okrajů v pixelech vzdálenost (v pixelech) mezi okrajem buňky a obsahem buňky vzdálenost (v pixelech) mezi jednotlivými buňkami Martin Kruliš pouze ke studijním účelům strana 8 z 17

9 cols frame rules summary wth počet sloupců v tabulce = VOID ABOVE BELOW BORDER BOX HSIDES VSIDES LHS RHS nastavuje části vnějších okrajů, které se zobrazí: BORDER zobrazí vše (výchozí), VOID nezobrazí nic ABOVE zobrazí horní část okraje, BELOW zobrazí dolní část okraje HSIDES zobrazí horní a dolní část, VSIDES zobrazí levou a pravou část LHS zobrazí levou část okraje, RHS zobrazí pravou část okraje BOX zobrazí rám okolo tabulky = ALL COLS ROWS GROUPS NONE nastavuje části vnitřních okrajů, které se zobrazí: ALL zobrazí vše (výchozí), NONE nezobrazí nic COLS zobrazí vertikální okraje mezi sloupci GROUPS zobrazí okraje mezi skupinami sloupců (COLGROUP) a mezi THEAD, TBODY a TFOOT ROWS zobrazí horizontální okraje mezi řádky text popisující obsah tabulky (je použitu médií, která nedokáží reprezentovat tabulku - např. čtecím zařízení pro nevomé) nastavuje šířku objektu (v pixelech, nebo procentech) 7.2 <TR> Tento párový tag ohraničuje jeden řádek v tabulce. Jeho použití má smysl pouze uvnitř tagu TABLE (viz 7.1). Uvnitř tagu TR jsou platné pouze tagy TD a TH (viz 7.3). bgcolor v = CENTER LEFT RIGHT horizontální zarovnání (na střed, doleva, doprava) barva pozadí = BASELINE BOTTOM MIDDLE TOP určuje vertikální zarovnání BASELINE zarovnání na základní řádku podle velikosti fontu TOP zarovnání nahoru, MIDDLE zarovnání na střed (výchozí), BOTTOM zarovnání dolů Poznámka: Atributy a v nastavují zarovnání ve všech vnitřních buňkách řádku. 7.3 <TD> a <TH> Tyto párové tagy ohraničují jednu buňku tabulky a lze je použít pouze uvnitř tagu TR (viz 7.2). Tag TH ohraničuje buňku v hlavičce tabulky a TD ohraničuje datovou (běžnou) buňku tabulky. Prohlížeč zpravla obsah hlavičkových buňek TH zvýrazňuje. Parametry (pro oba tagy): bgcolor colspan nowrap rowspan v = CENTER LEFT RIGHT horizontální zarovnání (na střed, doleva, doprava) barva pozadí určuje do kolika sloupců tabulky tato buňka zasáhne přání nowrap říká prohlížeči, že obsah buňky nebude automaticky zalamován, ale místo toho se zvětší šířka této buňky (v závislosti na tom i celého sloupce) (zastaralý) určuje do kolika řádků tabulky tato buňka zasáhne = BASELINE BOTTOM MIDDLE TOP určuje vertikální zarovnání BASELINE zarovnání na základní řádku podle velikosti fontu TOP zarovnání nahoru, MIDDLE zarovnání na střed (výchozí), BOTTOM zarovnání dolů 7.4 části <THEAD>, <TBODY>, <TFOOT> Tyto tagy oddělují jednotlivé části tabulky hlavičku, tělo a patičku. Použití je nepovinné a pokud jsou vynechány, je obsah celé tabulky chápan jako tělo. Všechny tři tagy jsou párové, avšak použití koncových tagů je volitelné. Tagy THEAD i TFOOT musí byt uvedeny právě jednou před blokem TBODY. Tag TBODY se může opakovat. Každý blok musí obsahovat alespoň jeden řádek (viz tag TR 7.2). Martin Kruliš pouze ke studijním účelům strana 9 z 17

10 Parametry (pro všechny tagy): = CENTER LEFT RIGHT horizontální zarovnání (na střed, doleva, doprava) bgcolor barva pozadí v = BASELINE BOTTOM MIDDLE TOP určuje vertikální zarovnání BASELINE zarovnání na základní řádku podle velikosti fontu TOP zarovnání nahoru, MIDDLE zarovnání na střed, BOTTOM zarovnání dolů Poznámka: Atributy a v nastavují zarovnání ve všech vnitřních buňkách skupiny. 7.5 <COL> a <COLGROUP> Tyto tagy se používají k změně formátování sloupců v tabulce. Použití těchto tagů má smysl pouze uvnitř tagu TABLE (viz 7.1). COLGROUP je párový tag, který ohraničuje skupinu sloupců (použití koncového tagu je volitelné). Počet sloupců ve skupině lze nastavit atributem span, nebo vložením příslušného počtu tagů COL dovnitř COLGROUP. V případě zobrazení dělících čar mezi skupinami (rules= groups viz 7.1), budou také nakresleny čáry mezi skupinami sloupců. Tag COL nastavuje údaje o sloupci (nebo několika sloupcích viz atribut span). Může být použit samostatně, nebo uvnitř tagu COLGROUPS. Pro lepší představu je tu příklad 8. Parametry (pro oba tagy): span v = CENTER LEFT RIGHT horizontální zarovnání (na střed, doleva, doprava) počet sloupců ve skupině (resp. počet sloupců, kterých se týká nastavení) = BASELINE BOTTOM MIDDLE TOP určuje vertikální zarovnání BASELINE zarovnání na základní řádku podle velikosti fontu TOP zarovnání nahoru, MIDDLE zarovnání na střed, BOTTOM zarovnání dolů Příklad 8: <TABLE> <COLGROUP v= top span= 3 ></COLGROUP> <COLGROUP wth= 100 > <COL = left > <COL = right span= 3 > </COLGROUP> <COL = center span= 2 > <TR>... obsah tabulky...</tr> </TABLE> 7.6 <CAPTION> Tento párový tag nastavuje popisek tabulky. CAPTION (pokud je použit) musí být uveden těsně za otevírajícím tagem TABLE (viz 7.1). Popisek je přímo svázán s tabulkou, avšak zobrazuje se vně ohraničení tabulky. = BOTTOM LEFT RIGHT TOP zarovnání nadpisu: BOTTOM dolů na střed, TOP nahoru na střed, LEFT doleva, RIGHT doprava 8. formuláře <BUTTON>, <FORM>, <INPUT>, <LABEL>, <OPTION>, <SELECT>, <TEXTAREA> Formuláře a formulářové komponenty jsou prvky HTML, které umožňují jednoduchou interakci s uživatelem. Jedná se o tlačítka, vstupní textová pole, výběrová okénka, zaškrtávací boxy apd. Data z těchto formulářů mohou být zpracována skriptem na straně klienta (Java skript, VB skript), nebo mohou být odeslána na server do internetové aplikace (PHP, ASP, CGI, ), která je zpracuje a vygeneruje klientovi HTML stránku s výsledky. Odeslání dat způsobí např. kliknutí na tlačítko typu SUBMIT (viz 8.2). 8.1 <FORM> Tento párový tag ohraničuje formulářové HTML tagy, které logicky spadají do jednoho formuláře (data celého formuláře se odesílají najednou). Parametry tohoto tagu určují, kam se mají formulářová data poslat a v jakém formátu. Martin Kruliš pouze ke studijním účelům strana 10 z 17

11 action enctype method target URL souboru skriptu (PHP, ASP ), kterému mají být odeslána data MIME formát dat, která se posílají (pouze s metodou POST) výchozí hodnota je application/x-www-form-urlencoded, při uploadu souborů je vhodné nastavit na multipart/form-data = GET POST způsob odesílání dat: GET pasivní (data jsou přána do URL), POST aktivní (data jsou poslána v rámci HTTP protokolu) = název okna _blank _parent _self _top určuje okno (rámec), do kterého se má načíst stránka vrácená serverem po zpracování dat z formuláře: název okna název okna nebo rámu (určeno parametrem name viz kapitola 2.) _blank otevře nové okno prohlížeče _self aktuální okno (rámec), ve kterém se nachází i formulář (tato hodnota je výchozí) _parent okno (rámec) nadřazené aktuálnímu _top hlavní (nejvyšší) okno, ve kterém se nachází aktuální rámec 8.2 <INPUT> Tag INPUT představuje základní formulářovou komponentu. Pomocí parametru type lze tag INPUT použít jako celou řadu různých ovládacích prvků (viz dále). accesskey alt checked disabled maxlength name readonly size src tabindex type value přiřadí objektu horkou klávesu (po stisknutí ALT+klávesa se tento objekt stane aktivním) = CENTER LEFT RIGHT horizontální zarovnání (na střed, doleva, doprava) pouze pro typ IMAGE - alternativní textové vyjádření obsahu obrázku pouze pro typy CHECKBOX a RADIO nastavuje implicitní zaškrtnutí boxu přání tohoto parametru způsobí, že bude komponenta zablokovaná pro jakoukoli manipulaci pouze pro typy TEXT a PASSWORD - maximální počet znaků název položky - název je určen k entifikaci dat při zpracování (např. internetovou aplikací) přání tohoto parametru zabrání uživateli měnit obsah komponenty (text, přepínání ) nastavuje počet vitelných znaků u textových komponent (např. šířku vstupního pole TEXT) pouze pro typ IMAGE - URL obrázku nastavuje pořadí komponenty při přepínání tabulátorem = BUTTON CHECKBOX FILE HIDDEN IMAGE PASSWORD RADIO RESET SUBMIT TEXT BUTTON - tlačítko CHECKBOX - zaškrtávací box (umožňuje jednoduché předávání hodnot typu ANO-NE) FILE - cesta k souboru na lokálním počítači (soubory bude uploadován na server) HIDDEN - skrytá komponenta, která pouze k předává dodatečné informace - uživatel ji nemůže měnit IMAGE obrázek, na který lze kliknout - kliknutí způsobí odeslání formuláře na server (navíc se po klinkutí přají do formulářových dat i relativní souřadnice myši nad obrázkem v pixelech) PASSWORD - umožňuje uživateli zadat text, který je zobrazován hvězdičkami (tedy např. heslo) RADIO - přepínací boxík - těchto boxíků může být několik a nejvýše jeden z nich může být aktivní (do skupin se sdružují pomocí stejného jména - name) RESET - resetovací tlačítko, které nastaví všechny komponenty formuláře na výchozí hodnoty SUBMIT - tlačítko, které potvrdí formulář (odešle data na server) TEXT - jednořádkový textový vstup (toto je výchozí typ) výchozí hodnota (u typů které nelze měnit také jediná) dat, která je odeslána na server; entifikace se provádí parametrem name; u tlačítek je navíc tato hodnota zobrazena jako popisek 8.3 <SELECT> a <OPTION> Párový tag SELECT se používá k vytvoření nabídky ve vysouvacím boxu (jednořádkový text s vysouvací nabídkou). Tag OPTION lze použít pouze uvnitř tagu SELECT a slouží k definování jednotlivých položek ve vysouvací nabídce. Parametry <SELECT>: disabled multiple name size tabindex přání tohoto parametru způsobí, že bude komponenta zablokovaná přání tohoto parametru umožňuje uživateli vybrat víc položek z nabídky najednou název položky - název je určen k entifikaci dat při zpracování (např. internetovou aplikací) nastavuje velikost komponenty nastavuje pořadí komponenty při přepínání tabulátorem Martin Kruliš pouze ke studijním účelům strana 11 z 17

12 Parametry <OPTION>: label selected value třída CSS stylů zobrazovaný popisek (tento atribut má přednost před vnitřní obsahem, který jinak také definuje popisek) přání tohoto parametru určuje položku z nabídky, která je zobrazena jako výchozí hodnota, která je odeslána za komponentu SELECT v případě výběru této položky z nabídky 8.4 <TEXTAREA> Tento párový tag vytvoří obdélníkové textové pole, ve kterém může uživatel editovat rozsáhlejší texty na více řádcích (oproti např. tagu INPUT typ text viz 8.2). Výchozí text, který se objeví v textovém poli, lze zadat mezi počáteční a koncový tag TEXTAREA. accesskey cols disabled name readonly rows tabindex wrap přiřadí objektu horkou klávesu (po stisknutí ALT+klávesa se tento objekt stane aktivním) šířka pole (počet znaků neproporcionálního písma) přání tohoto parametru způsobí, že bude komponenta zablokovaná název položky - název je určen k entifikaci dat při zpracování (např. internetovou aplikací) přání tohot parametru zabrání uživateli měnit obsah komponenty (text, přepínání ) výška pole (počet řádků neproporcionálního písma) nastavuje pořadí komponenty při přepínání tabulátorem = OFF HARD SOFT - určuje, jak se budou zalamovat řádky: OFF - řádky se nebudou zalamovat a pole bude scrollovat (výchozí hodnota) HARD - řádky se budou zobrazovat zalomené a stejně tak se odešlou na server SOFT - řádky se budou zobrazovat zalomené, ale na server se text odešle tak, jak byl napsán 8.5 <BUTTON> Párový tag, který se používá k vytváření tlačítek. Tato tlačítka jsou lepší, než INPUT typ BUTTON (viz 8.2), protože na ně lze umístit kromě textu i tagy HTML (formátované písmo, obrázek apd.). Obsah tlačítka, který je zobrazen uživateli je umístěn mezi počátečním a koncovým tagem. accesskey disabled name tabindex type value přiřadí objektu horkou klávesu (po stisknutí ALT+klávesa se tento objekt stane aktivním) přání tohoto parametru způsobí, že bude komponenta zablokovaná název položky - název je určen k entifikaci dat při zpracování (např. internetovou aplikací) nastavuje pořadí komponenty při přepínání tabulátorem = BUTTON RESET SUBMIT - určuje typ tlačítka: BUTTON - obyčejné tlačítko, které nemá vliv na formulář, ale může být použito ke spouštění skriptů RESET - resetovací tlačítko (nastaví všechny komponenty na formuláři na výchozí hodnoty) SUBMIT - potvrzovací tlačítko (odešle data z formuláře) hodnota proměnné (entifikované atributem name), která je odeslána na server 8.6 <LABEL> Tento párový tag vkládá popisek k formulářové komponentě. O kterou komponentu se jedná určuje parametr for. accesskey for přiřadí objektu horkou klávesu (po stisknutí ALT+klávesa se tento objekt stane aktivním) ID komponenty, ke které je popisek připojen 9. ostatní tagy <A>, <AREA>, <CENTER>, <HR>, <IMG>, <MAP>, <MARQUEE>, <OBJECT> Zde je přehled tagů, které nelze zařadit do žádné z předešlých skupin. Martin Kruliš pouze ke studijním účelům strana 12 z 17

13 9.1 <A> Párový tag A (Anchor - kotva) se používá k vytváření hypertextových odkazů. Obsah tohoto tagu se na stránce zvýrazní a kliknutí uživatele způsobí, že prohlížeč načte internetovou stránku podle parametrů tagu A. Tomuto jevu se říká brouzdání (angl. browning) a jeho princip stojí za tajemstvím úspěchu webu (díky němu lze rychle přecházet mezi dokumenty a doklikat se až k hledanému obsahu). accesskey přiřadí objektu horkou klávesu (po stisknutí ALT+klávesa se tento objekt stane aktivním) href URL stránky, která se má načíst name název tagu, který lze použít ke skokům uvnitř jednoho dokumentu (viz příklad 9) tabindex nastavuje pořadí komponenty při přepínání tabulátorem target = název okna _blank _parent _self _top určuje okno (rámec) do kterého se má stránka načíst název okna název okna nebo rámu (určeno parametrem name viz kapitola 2.) _blank otevře nové okno prohlížeče _self aktuální okno (rámec), ve kterém se nachází i formulář (tato hodnota je výchozí) _parent okno (rámec) nadřazené aktuálnímu _top hlavní (nejvyšší) okno, ve kterém se nachází aktuální rámec Příklad 9: <A name= #strana1 ></A> - definuje záložku s názvem strana1 <A href= #strana1 >Zpět na 1. stránku</a> - odkaz na záložku strana1 uvnitř aktuálního dokumentu <A href= >Google</A> - odkaz na populární vyhledávač Google 9.2 <CENTER> Text i HTML uvnitř párového tagu CENTER bude zarovnán na střed. Tento tag má stejný efekt jako <DIV = center >. Obecně je považován za zastaralý a místo něho je lepší použít tag DIV v kombinaci s kaskádovými styly. 9.3 <HR> Zobrazí horizontální dělící čáru. V praxi se již příliš nepoužívá (lze nahradit pomocí kaskádových stylů viz border). noshade size wth = CENTER LEFT RIGHT horizontální zarovnání (na střed, doleva, doprava) (zastaralý) přání tohoto parametru vypne stín čáry (zastaralý) výška (tloušťka) čáry v pixelech (zastaralý) nastavuje šířku objektu (v pixelech, nebo procentech) (zastaralý) 9.4 <IMG> Tento tag vloží obrázek do HTML dokumentu. = BOTTOM LEFT MIDDLE RIGHT TOP (zastaralý) alt alternativní textové vyjádření obsahu obrázku border šířka okraje v pixelech (zastaralý) height nastavuje výšku objektu (v pixelech, nebo procentech) hspace horizontální odsazení (velikost odsazení nalevo a napravo v pixelech) (zastaralý) src URL obrázku usemap URL mapy, která se má použít (viz MAP 9.5) vspace vertikální odsazení (velikost odsazení nahoře a dole v pixelech) (zastaralý) wth nastavuje šířku objektu (v pixelech, nebo procentech) Martin Kruliš pouze ke studijním účelům strana 13 z 17

14 9.5 <MAP> a <AREA> Tagy MAP a AREA se používají k vytvoření oblastí na obrázku, které slouží jako odkazy na jiné stránky (podobně jako tag A - viz 9.1). Tag MAP je párový a vytváří obálku mapy. Tag AREA lze použít pouze uvnitř tagu MAP a definuje jednu oblast. Použití přehledně shrnuje příklad 10: Parametry <MAP>: name název mapy - tento název se použije u tagu IMG v parametru usemap Parametry <AREA>: alt coords href nohref shape tabindex target alternativní textové vyjádření třída CSS stylů souřadnice v pixelech oddělené čárkami (jejich počet závisí na zvoleném typu mapy - viz shape ) URL stránky, která se má načíst přání tohoto parametru říká prohlížeči, že kliknutí na tuto oblast nemá způsobit žádnou akci = CIRCLE POLY RECT DEFAULT - tvar oblasti DEFAULT celá oblast obrázku CIRCLE - elipsa zadaná souřadnicemi (střed_x, střed_y, poloměr_x, poloměr_y) POLYGON - mnohoúhelník zadaný souřadnicemi (x1, y1, x2, y2, x3, ) RECTANGLE - obdélník zadaný levým horním a pravým dolním bodem (x1, y1, x2, y2) nastavuje pořadí komponenty při přepínání tabulátorem = název okna _blank _parent _self _top určuje okno (rámec) do kterého se má stránka načíst název okna název okna nebo rámu (určeno parametrem name viz kapitola 2.) _blank otevře nové okno prohlížeče _self aktuální okno (rámec), ve kterém se nachází i formulář (tato hodnota je výchozí) _parent okno (rámec) nadřazené aktuálnímu _top hlavní (nejvyšší) okno, ve kterém se nachází aktuální rámec Příklad 10: <MAP name= mapa1 > <AREA shape= rect coords= 10, 20, 110, 60 href= novinky.html > <AREA shape= rect coords= 20, 70, 120, 110 href= kontakty.html > </MAP> <IMG usemap= #mapa1 > - hašítko (#) před názvem mapy říká, že se jedná o mapu ve stejném dokumentu jako je obrázek 9.6 <OBJECT> Vloží do dokumentu nestandardní objekt (Java Applet, ActiveX objekt, Flash animaci, veo, skript, vektorový obrázek apd.). Tento tag je párový a jeho obsah bude zobrazen v případě, že prohlížeč není schopen vložený objekt zobrazit. accesskey border code codebase codetype data height hspace name tabindex type vspace wth přiřadí objektu horkou klávesu (po stisknutí ALT+klávesa se tento objekt stane aktivním) = BOTTOM LEFT MIDDLE RIGHT TOP (zastaralý) šířka okraje v pixelech (zastaralý) entifikátor objektu (ve tvaru CLSID třídy objektu, nebo URL) název souboru, ve kterém jsou zkompilované třídy jazyka Java nepovinný parametr, který určuje základ URL adresy pro atributy, data a archive MIME typ objektu (pokud je vynechán, použije se atribut type) URL na data objektu nastavuje výšku objektu (v pixelech, nebo procentech) horizontální odsazení (velikost odsazení nalevo a napravo v pixelech) (zastaralý) název objektu nastavuje pořadí komponenty při přepínání tabulátorem MIME typ dat objektu vertikální odsazení (velikost odsazení nahoře a dole v pixelech) (zastaralý) nastavuje šířku objektu (v pixelech, nebo procentech) Martin Kruliš pouze ke studijním účelům strana 14 z 17

15 10. přílohy, vysvětlivky, odkazy 10.1 Zadávání hodnot barev Barvy se zadávají ve tvaru #RRGGBB, kde RR, GG a BB zastupují vždy dvojici hexadecimálních cifer, která určuje hodnotu dané složky - červené (Red), zelené (Green) a modré (Blue). Minimální hodnota je 00, maximální FF. Celkem tedy lze rozlišit až 256 různých hodnot pro každou složku barvy, což je celkem = 2 24 = barev. Z důvodu ohleduplnosti vůči uživatelům s méně kvalitním monitorem je doporučeno používat pouze tyto hodnoty (00, 33, 66, 99, CC a FF). Tedy pouze 6 hodnot, protože 6 3 = 216 a tedy ani uživatel s monitorem podporujícím jen 256 barev nebude mít potíže. Několik příkladů: černá = #000000, bílá = #FFFFFF, červená = #FF0000, žlutá = #FFFF00, apd Zadávání rozměrů Většinu rozměrů (není-li uvedeno jinak) lze zadat buď v pixelech (jako celé číslo bez koncovky), nebo v procentech, jako poměrnou velikost k rodičovskému objektu (např. 50%). Typickým příkladem je zadávání hodnot atributů height a wth Speciální znaky Do HTML dokumentů je možné zadávat speciální znaky ve tvaru &znak ;. Zde je několik nejdůležitějších znaků: " - horní uvozovka, & - ampersant (&), < - menšítko (<), > - většítko (>), - pevná mezera, - copyright 10.4 Rozšířené zarovnávání - parametr Parametr nastavuje způsob zarovnání objektu: BOTTOM dolní okraj objektu je zarovnán s dolní linkou textu TOP horní okraj objektu se zarovná s nejvyšším prvkem na řádku MIDDLE střed objektu se zarovná s dolní linkou textu LEFT objekt je umístěn vlevo a text jej obtéká zprava RIGHT objekt je umístěn vpravo a text jej obtéká zleva bez zarovnání BOTTOM TOP MIDDLE RIGHT ### LEFT #### ####### ####### 10.5 Odkazy na další informace poměrně kvalitní česky psané stránky o tvorbě webu (HTML, CSS ) - specifikace jazyka HTML od konsorcia W3C (v angličtině) - valátor konsorcia W3C zkontroluje chyby v HTML dokumentu Martin Kruliš pouze ke studijním účelům strana 15 z 17

16 OBSAH: 1. základní tagy určující strukturu HTML dokumentu <!DOCTYPE> <HTML> <HEAD> <BODY> 1 2. rámce (frames) <FRAME> a <FRAMESET> <IFRAME> 2 3. tagy v části <HEAD> <BASEFONT> <BGSOUND> <META> <SCRIPT> <STYLE> <TITLE> 4 4. jednoduché formátování textu <BR> Tučné <B>, kurzíva <I> Podtržené <U>, přeškrtnuté <S>, <STRIKE> Zvětšené <BIG>, zmenšené <SMALL> Dolní index <SUB>, Horní index <SUP> <CITE> <CODE> <FONT> <KBD> <NOBR>, <WBR> <Q> <SPAN> 6 5. formátování textu blokové tagy Nadpisy <H1> <H6> <P> <DIV> <PRE> 7 6. seznamy <UL> <OL> <LI> <DIR> <MENU> seznam definic <DL>, <DT>, <DD> 8 7. tabulky <TABLE> <TR> <TD> a <TH> části <THEAD>, <TBODY>, <TFOOT> <COL> a <COLGROUP> <CAPTION> formuláře <FORM> <INPUT> <SELECT> a <OPTION> <TEXTAREA> <BUTTON> <LABEL> 12 Martin Kruliš pouze ke studijním účelům strana 16 z 17

17 9. ostatní tagy <A> <CENTER> <HR> <IMG> <MAP> a <AREA> <OBJECT> přílohy Zadávání hodnot barev Zadávání rozměrů Speciální znaky Rozšířené zarovnávání - parametr Odkazy na další informace 15 Rejstřík tagů:!doctype 1 KBD 5 A 13 LABEL 12 AREA 14 LI 7 B 4 MAP 14 BASEFONT 3 MENU 8 BGSOUND 3 META 3 BIG 4 NOBR 5 BODY 1 OBJECT 14 BR 4 OL 7 BUTTON 12 OPTION 11 CAPTION 10 P 6 CENTER 13 PRE 7 CITE 5 Q 6 CODE 5 S, STRIKE 4 COL 10 SCRIPT 3 COLGROUP 10 SELECT 11 DD 8 SMALL 4 DIR 8 SPAN 6 DIV 6 STYLE 4 DL 8 SUB 5 DT 8 SUP 5 FONT 5 TABLE 8 FORM 10 TBODY 9 FRAME 1 TD 9 FRAMESET 1 TEXTAREA 12 HEAD 1 TFOOT 9 H1 H6 6 TH 9 HR 13 THEAD 9 HTML 1 TITLE 4 I 4 TR 9 IFRAME 2 U 4 IMG 13 UL 7 INPUT 11 WBR 5 Martin Kruliš pouze ke studijním účelům strana 17 z 17