Další HTML příkazy
Tato stránka současně specifikuje rozsah příkazů html, jehož znalost je u absolventů tohoto předmětu očekávána - v úplném rozsahu samozřejmě jen pro klasifikaci "výborně".
Na předchozí stránce byly popsány příkazy:
| <html> | spolu s </html> označuje začátek a konec html dokumentu. Uvnitř této dvojice je celý zbytek dokumentu. |
| <head> | opět má charakter závorek (uzavírací je </head>). V hlavičce jsou informace o dokumentu, které se nezobrazí v těle dokumentu přímo. |
| <title> | může být jen mezi tagy <head> a </head>. Text mezi <title> a </title> se použije pro název okna, otevřeného v prohlížeči, popřípadě jej lze použít při tisku stránky jako záhlaví (zálaží na nastavení prohlížeče). |
| <body> | Vlastní tělo dokumentu. Rovněž má charakter závorek a označuje část textu, ze které se vytvoří dokument (obsahuje všechen ostatní obsah stránky). |
<body> může použít následující parametry k volbě barev:
| bgcolor | určuje barvu pozadí html stránky (background color) |
| text | určuje základní barvu textu na stránce |
| link | určuje barvu, kterou se budou zobrazovat odkazy |
| alink | určuje barvu, kterou bude mít aktivní odkaz (active) |
| vlink | určuje barvu odkazů na stránky, které uživatel již navštívil (visited) |
Význam kódu u barvy bude vysvětlen na konci tohoto textu. Dalším možným parametrem je obrázek, který se použije na pozadí. Příklad použití tagu <body>:
| <body background="lilek.jpg" text="#FFFFCC" link="#FFCC00"> |
Naši studenti by dále měli znát následující párové značky (tagy):
| značka | parametr | význam |
| <p> | označuje odstavec textu - před a za něj se umístí mezera mezi odstavci. | |
| align | "left", "right", "center" - formátování odstavce se zarovnáním zleva, zprava nebo na střed, jako ve Wordu | |
| <b> | budeme používat pro tučné písmo (i když správně by mělo být <strong>, což by se ale těžko pamatovalo - proto v dalším textu "správné" značky nebudu ani zmiňovat). | |
| <i> | kurzíva - skloněné písmo. | |
| <u> | podtržený text | |
| <pre> | předformátovaný text. Pokud máte text, který má v neproporcioálním fontu (všechna písmena stejně široká) provedené nějaké formátování (například zdrojový kód programu), můžete jej umístit mezi značky <pre> a </pre>. Každá mezera se pak zobrazí jako mezera a přechod na nový řádek jako přechod na nový řádek. Pevně zformátovaný text je možné libovolně kombinovat s ostatními značkami, jako <a>, <b>, <font ..> apod. | |
| <font> | slouží ke změně fontu, který je použit v daném místě stránky, popřípadě jeho vlastností | |
| color | umožňuje zadat barvu písma | |
| face="Symbol" | jméno fontu musí být přesně. Konkrétně "Symbol" obsahuje ve Windows řecká písmenka. Pozor - nezapomeňte, že značka je párová (na uzavírací tag). | |
| <h1> | oznnačuje text, který se použije jako nadpis. Místo "1" může být číslo do šesti, nadpis <h1> je největší, <h6> pak nejmenší. | |
| <a> | Odkaz. Vše, co je uvnitř této párové značky (zpravidla část textu, nebo obrázek), pak funguje jako odkaz (je na to možné kliknout). | |
| href="...." | URL, na které se přejde, pokud uživatel klikne na odkaz. | |
Vysvětlení tvarů URL uvádím na příkladech:
| mouse.gif | odkaz na soubor ve stejném adresáři (soubor s příponou .htm, .html, .txt, .gif či .jpg prohlížeč načte a zobrazí, u souborů s příponou .zip a .exe nabídne uložení na disk, u ostatních záleží na nastavení prohlížeče) |
| /img/mouse.gif | odkaz na soubor na stejném serveru, ale v uvedeném adresáři |
| img/mouse.gif | pokud nezačíná lomítkem, je adresa relativní k aktuální stránce |
| http://www.seznam.cz | odkaz na jiný server. Musí začínat označením protokolu ("http:"). |
| http://alik.misto.cz/alik/amundsen.gif | odkaz na dokument na jiném serveru |
| mailto:vladimir.hlavac@fs.cvut.cz | odkaz na e-mailovou adresu |
Nepárové značky:
| značka | parametr | popis |
| <img> | zobrazí obrázek dle odkazu | |
| src | URL požadovaného obrázku | |
| align | umístění obrázku na stránce - nabývá hodnot "top", "bottom", "left", "right" a "middle" | |
| with | šířka zobrazovaného obrázku (v procentech nebo v bodech - zde připouštíme použití bodů, protože u obrázků na rozdíl od tabulek je to často jediné rozumné řešení) | |
| height | výška (v bodech - viz výše) | |
| <hr> | bez parametrů vloží vodorovnou čáru přes skoro celoušířku stránky | |
| with | šířka vykreslovaného obdélníku (např. "60%") | |
| height | výška obdélníku (lze zadat jen v bodech) | |
| <br> | přechod na novou řádku (bez mezery mezi odstavci) | |
Z párových značek jsme vynechali ty nejdůležitější, tabulky. Podotýkám, že u značek <td> a <tr> lze uzavírací značku vynechat.
Tabulku poskládáme tak, že:
U tabulky můžeme použít stejné parametry, jako u <body>, takže můžeme měnit například barvu pozadí. Kromě toho je nejdůležitější parametr "border". Není-li uveden, postrádá tabulka okraje (používá se pak místo tabulátorů, nebo pro rozdělení textu či stránky do více sloupců - tabulky se v této roli chovají méně divoce a jsou snáze ovladatelné než modernější <div> ). Hodnota tohoto parametru určuje tlouštku okraje tabulky (je.li bez hodnoty, pak se vezme tlouštka=1). Barvy lze měnit i u každé jednotlivé buňky.
U značky <td> lze použít parametry align (zarovnání vodorovně, jako u odstavce) a valign (zarovnání textu v buňce svisle - nabývá hodnot "top", "bottom" a "center").
Slučovat buňky lze použitím parametrů colspan a rowspan u jednotlivých značek <td>. Vždy je třeba dbát, aby jedna značka <td> s parametrem colspan= nahradila tolik značek, kolik je zde uvedeno, jinak se tabulka zobrazí "rozhozeně". Rowspan slučuje buňky svisle; v následujícím řádku pak musí být uvedeno příslušně méně buněk. Například tabulka:
|
vznikla z tabulky : |
|
|||||||||||||||||||||
po úpravě kódu na následující text:
<table border="1">
<tr>
<td colspan="2">a1,b1</td>
<td rowspan="2" colspan="2">c1,d1,<br>c2,d2</td>
</tr>
<tr>
<td>a2</td>
<td rowspan="2">b2,<br>b3</td>
</tr>
<tr>
<td>a3</td>
<td>c3</td>
<td>d3</td>
</tr>
</table>
|
<br> znamená jen přechod na další
řádek - jinak by tabulka neměla tak názorný tvar.
Poznámka - ukázka použití tabulek: Šedá plocha s ukázkou o
dva řádky výše je tabulka s jedinou buňkou a bez okrajů.
Umístění dvou tabulek z předchozího příkladu je provedeno
rovněž tabulkou bez okrajů (o třech buňkách vedle sebe, v
prostřední je jen text).
Barvy
Barvy lze zadat buď slovně (red, blue, white), nebo číslem. Odstín se pak zadá za značku # jako šest hexadecimálních znaků; každé dva (jeden byte) pak označují jednu složku, postupně R-G-B (red, green, blue - červenou, zelenou, modrou). Čím více je které barvy (čím více svítí), tím větší ja dané číslo. 0 je nejmenší, F (15) je největší číslice. #000000 je tedy černá, #FFFFFF je bílá. Jednotlivé odstíny pak vznikají postupným mícháním barev. Například #FFFF00 je žlutá. Světlejší žlutá, tedy krémová, se získá přidáním modré (nebo, chcete-li, namícháním s bílou): #FFFF99. Ovšem ve skutečnosti je zelená složka RGB systému odporně jasná, takže lepší barvu dosáhneme, když zelenou složku poněkud ubereme, například o 20: #FFEB99.
Ukázky namíchaných barev
Představte si, že zafixujeme jednu z barev, například červenou, na nějaké hodnotě. Při změně ostatních pak získáme následující tabulky (modrá přibývá svisle, zelená vodorovně) :
Hodnota červené = 00:
| G -> | 00 | 10 | 20 | 40 | 80 | C0 | E0 | FF |
| 00 | #000000 | #001000 | #002000 | #004000 | #008000 | #00C000 | #00E000 | #00FF00 |
| 40 | #000040 | #001040 | #002040 | #004040 | #008040 | #00C040 | #00E040 | #00FF40 |
| 80 | #000080 | #001080 | #002080 | #004080 | #008080 | #00C080 | #00E080 | #00FF80 |
| C0 | #0000C0 | #0010C0 | #0020C0 | #0040C0 | #0080C0 | #00C0C0 | #00E0C0 | #00FFC0 |
| FF | #0000FF | #0010FF | #0020FF | #0040FF | #0080FF | #00C0FF | #00E0FF | #00FFFF |
Hodnota červené = 40:
| G -> | 00 | 10 | 20 | 40 | 80 | C0 | E0 | FF |
| 00 | #400000 | #401000 | #402000 | #404000 | #408000 | #40C000 | #40E000 | #40FF00 |
| 40 | #400040 | #401040 | #402040 | #404040 | #408040 | #40C040 | #40E040 | #40FF40 |
| 80 | #400080 | #401080 | #402080 | #404080 | #408080 | #40C080 | #40E080 | #40FF80 |
| C0 | #4000C0 | #4010C0 | #4020C0 | #4040C0 | #4080C0 | #40C0C0 | #40E0C0 | #40FFC0 |
| FF | #4000FF | #4010FF | #4020FF | #4040FF | #4080FF | #40C0FF | #40E0FF | #40FFFF |
Hodnota červené = 80:
| G -> | 00 | 10 | 20 | 40 | 80 | C0 | E0 | FF |
| 00 | #800000 | #801000 | #802000 | #804000 | #808000 | #80C000 | #80E000 | #80FF00 |
| 40 | #800040 | #801040 | #802040 | #804040 | #808040 | #80C040 | #80E040 | #80FF40 |
| 80 | #800080 | #801080 | #802080 | #804080 | #808080 | #80C080 | #80E080 | #80FF80 |
| C0 | #8000C0 | #8010C0 | #8020C0 | #8040C0 | #8080C0 | #80C0C0 | #80E0C0 | #80FFC0 |
| FF | #8000FF | #8010FF | #8020FF | #8040FF | #8080FF | #80C0FF | #80E0FF | #80FFFF |
Hodnota červené = C0:
| G -> | 00 | 10 | 20 | 40 | 80 | C0 | E0 | FF |
| 00 | #C00000 | #C01000 | #C02000 | #C04000 | #C08000 | #C0C000 | #C0E000 | #C0FF00 |
| 40 | #C00040 | #C01040 | #C02040 | #C04040 | #C08040 | #C0C040 | #C0E040 | #C0FF40 |
| 80 | #C00080 | #C01080 | #C02080 | #C04080 | #C08080 | #C0C080 | #C0E080 | #C0FF80 |
| C0 | #C000C0 | #C010C0 | #C020C0 | #C040C0 | #C080C0 | #C0C0C0 | #C0E0C0 | #C0FFC0 |
| FF | #C000FF | #C010FF | #C020FF | #C040FF | #C080FF | #C0C0FF | #C0E0FF | #C0FFFF |
Hodnota červené = FF:
| G -> | 00 | 10 | 20 | 40 | 80 | C0 | E0 | FF |
| 00 | #FF0000 | #FF1000 | #FF2000 | #FF4000 | #FF8000 | #FFC000 | #FFE000 | #FFFF00 |
| 40 | #FF0040 | #FF1040 | #FF2040 | #FF4040 | #FF8040 | #FFC040 | #FFE040 | #FFFF40 |
| 80 | #FF0080 | #FF1080 | #FF2080 | #FF4080 | #FF8080 | #FFC080 | #FFE080 | #FFFF80 |
| C0 | #FF00C0 | #FF10C0 | #FF20C0 | #FF40C0 | #FF80C0 | #FFC0C0 | #FFE0C0 | #FFFFC0 |
| FF | #FF00FF | #FF10FF | #FF20FF | #FF40FF | #FF80FF | #FFC0FF | #FFE0FF | #FFFFFF |
Přesnou barvu pozadí si můžete zkusit namíchat na adrese http://java.tatousek.cz/script_engine.asp?zobrazit=12 . (Změna barvy pozadí dle údaje z formuláře - odkaz může začít ukazovat na jiný script; viz archív skriptů.).
Od studentů nevyžadujeme přesný převod, ale alespoň představu, jakou barvu přibližně kód znamená, či jak přibližně by se asi mohla barva (např. žlutá, fialová) zadat.
Retro: zkuste <marquee> (stále funguje)