<a
href="http://www.jakpsatweb.cz/html/default.htm"><img src="http://www.jakpsatweb.cz/images/jpw_html.gif"
border="0" alt="Jak psát web"></a>Popis HTML tagů a jejich atributů, jak jsou podporovány hlavními prohlížeči v roce 2003, (aktualizováno od roku 2001). Nepíšu podle specifikace, ale ze zkušeností. Přesto se snažím o úplnost.
Jste úplní začátečníci? Přečtěte si napřed jak si udělat stránky a jak stránky dostat na server.
Terminologie - čemu se jak v HTML říká
URL - zápis webových adres, příklad, rozbor
Barvy - základní zápis barev v HTML
Délky - HTML zná pouze pixely, procenta a stupně písma
Znakové entity - značky, které mají v HTML speciální význam, nebo speciální znaky se píšou &entitami;
Nejdůležitější tagy - vhodné pro začátečníky, kteří nepotřebují umět všechno
Obecné atributy - bublinové nápovědy, označení jazyka apod.
Rejstřík tagů - abecedně řazená tabulka HTML tagů
zobrazit vysvětlení
Struktura - Text - Bloky - Seznamy - Odkazy - Obrázky - Tabulky - Rámy - Objekty - Formuláře - Hlavička - Skripty a styly - Rozšíření
Následuje podrobný rozpis HTML tagů:
Každý HTML soubor by měl obsahovat několik základních tagů hlavičky a těla. Tím se zaručí, že všichni klienti (zejm. prohlížeče) pochopí, o co v dokumentu vlastně jde.
| HTML tag | Význam | Párový | Výskyt |
|---|---|---|---|
| html | začátek HTML dokumentu | ano | na začátku souboru |
| head | hlavička stránky | ano | na začátku souboru |
| body | tělo stránky + definice pozadí | ano | za <head> |
| <!-- --> | poznámka | ano | kdekoliv |
| !doctype | specifikace DTD | ne | úplně na začátku souboru |
Zastaralý způsob úpravy textu se orientuje podle vzhledu, tomu říkám fyzické formátování. Fyzické formátování říká například textu, že bude tučný, namísto aby řekl, že je to důležitý text. Vyznačení smyslu HTML textu je naopak formátování logické.
| HTML tag | Význam | Párový | Používat? |
|---|---|---|---|
| b | tučné písmo | ano | ano |
| i | kurzíva | ano | ano |
| u | podtržení textu | ano | ne |
| sub | dolní index | ano | ano |
| sup | horní index | ano | ano |
| small | zmenšení textu | ano | |
| big | zvětšení písma | ano | |
| s | přeškrtnutý text | ano | ne |
| strike | přeškrtnutý text | ano | |
| font | písmo | ano | ne |
| basefont | základní font | ne | ne |
| blink | blikání písma | ano | ne |
| nobr | nezalamovat obsah | ano |
| HTML tag | Význam | Párový | Obvyklý vzhled |
|---|---|---|---|
| span | úsek textu | ano | normální |
| strong | zvýraznění (tučně) | ano | tučné |
| em | zvýraznění (kurzíva) | ano | kurzíva |
| cite | citace | ano | kurzíva |
| code | výpis kódu | ano | strojopis |
| dfn | nově použitý termín | ano | kurzíva |
| kbd | vstup z klávesnice | ano | strojopis |
| samp | ukázka | ano | strojopis |
| tt | teletype | ano | strojopis |
| var | formátování proměnné | ano | kurzíva |
| abbr | ustálený výraz | ano | normální |
| acronym | zkratka | ano | normální |
| del | smazaný obsah | ano | přeškrtnuto |
| ins | přidaný text | ano | podtrženo |
| q | citace | ano | normální |
Do přehledu bloků jsem kromě blokových prvků zahrnul všechny HTML tagy, které způsobí zalomení řádky (kromě tabulek a seznamů). Tato skupina tagů je tím pádem poněkud umělá, ale HTML tagy <br> a <hr> se mi prostě jinam nevešly.
| HTML tag | Význam | Párový |
|---|---|---|
| p | odstavec | nepovinně |
| br | řádkový zlom | ne |
| div | oddíl | ano |
| center | vycentrování | ano |
| h1 | nadpis 1. úrovně | ano |
| h2 | nadpis 2 úrovně | ano |
| h3 | nadpis 3. úrovně | ano |
| h4 | nadpis 4. úrovně | ano |
| h5 | nadpis 5. úrovně | ano |
| h6 | nadpis 6. úrovně | ano |
| blockquote | citace, odsazení | ano |
| address | adresa | ano |
| pre | předformátovaný text | ano |
| hr | vodorovná čára | ne |
Říká se tomu také odrážky a číslování. HTML zná také definiční výčty, které se používají velmi málo.
| HTML tag | Význam | Párový | Výskyt |
|---|---|---|---|
| li | položka seznamu | nepovinně | <ul>,<ol> <menu> nebo <dir> |
| ol | číslovaný seznam | ano | |
| ul | odrážkový seznam | ano | |
| dir | zvláštní druh seznamu | ano | |
| menu | typ seznamu | ano | |
| dl | seznam definic | ano | |
| dt | definovaný termín | ano | <dl> |
| dd | definice termínu | ano | <dl> |
Odkaz se v HTML dělá tagem <a>. Mohly by sem patřit také HTML značky <map> a <area>, které jsou raději zařazené u obrázků.
| HTML tag | Význam | Párový | Výskyt |
|---|---|---|---|
| a | odkaz, hyperlink, záložka | ano | kdekoliv kromě <a> |
| HTML tag | Význam | Párový | Výskyt |
|---|---|---|---|
| img | obrázek | ne | |
| map | klikací mapa | ano | |
| area | oblast v klikací mapě | ne | <map> |
Tabulky jsou v HTML na strukturované zobrazování dat, používají se ale i na celkové rozvržení stránky (což je zastaralé). Podstatné jsou pouze tagy <table>, <tr> a <td>.
| HTML tag | Význam | Párový | Výskyt |
|---|---|---|---|
| table | tabulka | ano | |
| tr | řádek tabulky | nepovinně | <table>, <tbody>, <thead>, <tfoot> |
| td | buňka tabulky | nepovinně | <tr> |
| th | hlavičková buňka tabulky | nepovinně | <tr> |
| caption | hlavička tabulky | ano | <table> |
| col | ovlivnění sloupce tabulky | ne | <table> |
| colgroup | skupina sloupců tabulky | ne | <table> |
| tbody | tělo tabulky | ano | <table> |
| thead | hlavička tabulky | ano | <table> |
| tfoot | patička tabulky | ano | <table> |
Rámy dokážou rozdělit okno prohlížeče na několik obdélníkových částí (rámů) a v každém z nich zobrazit jinou stránku.
| HTML tag | Význam | Párový | Výskyt |
|---|---|---|---|
| frameset | skupina rámů | ano | za <head> |
| frame | rám | ne | <frameset> |
| noframes | alternativa rámů | ano | <frameset> |
| iframe | vložený rám | ano |
Vkládání videí, animací, her, zvuků, reklam a podobných blbostí.
| HTML tag | Význam | Párový | Výskyt |
|---|---|---|---|
| applet | Java aplet | ano | |
| object | objekt | ano | |
| param | parametry objektu | ne | <object>, <applet> |
| embed | objekt s plužinou | asi | |
| noembed | alternativa k embed | ano | <embed> |
HTML dokáže na stránce vykreslit krásné formuláře. Na zpracování vyplněných dat ale HTML žádný nástroj nemá, musejí se použít serverové skripty.
| HTML tag | Význam | Párový | Výskyt |
|---|---|---|---|
| form | formulář | ano | |
| input | vstupní pole | ne | <form> |
| select | výběrové pole | ano | <form> |
| option | volba | ne | <select> |
| textarea | velké vstupní pole | ano | <form> |
| label | popis pole | ano | <form> |
| fieldset | skupina polí | ano | <form> |
| optgroup | skupina voleb | ano | <select> |
| legend | popis pole | ano | <fieldset> |
| button | tlačítko | ano | <form> |
HTML hlavička (tag <head>) obsahuje tagy, jejichž obsah se na stránce nezobrazí, ale jsou důležité.
| HTML tag | Význam | Párový | Výskyt |
|---|---|---|---|
| title | titulek stránky | ano | <head> |
| base | základ odkazů | ne | <head> |
| link | nezobrazovaný odkaz | ano | <head> |
| meta | informace o dokumentu | ne | <head> |
Skripty myslím zejm. javascript, který umožňuje ve stránkách provádět jednoduché programy. Styly jsou CSS styly, klíčový jazyk pro ovlivnění vzhledu dokumentů.
| HTML tag | Význam | Párový | Výskyt |
|---|---|---|---|
| script | skript, program | ano | kdekoliv |
| noscript | alternativa ke skriptu | ano | vně skriptu |
| style | zápis CSS stylu | ano | <head> |
Rozšíření HTML by se stejně dobře mohlo jmenovat "zkažení". Patří sem tagy, které jsou podporovány jenom jedním výrobcem webových prohlížečů.
| HTML tag | Význam | Párový | Podpora | Výskyt |
|---|---|---|---|---|
| bgsound | zvuk na pozadí | ano | Internet Explorer | <head> |
| marquee | běžící text | ano | Internet Explorer | |
| layer | hladina, vrstva | ano | Netscape 4 | |
| multicol | sloupcová úprava | ano | Netscape | |
| spacer | prázdné místo | ne | Netscape |
Atributy použitelné u skoro každého tagu.
| Atribut | Význam | Platnost pro |
|---|---|---|
| class | třída pro CSS selekci | všechny elementy |
| id | identifikátor pro CSS a skripty | všechny elementy |
| style | zápis CSS stylu | zobrazované elementy |
| title | titulek elementu, doplňující info v bublině | všechny elementy |
| lang | jazyk elementu | všechny elementy |
| name | jméno pro spolupráci s dalšími prvky | různá použitelnost |
| accesskey | funkční klávesa | odkazy a formulářová pole |
| tabindex | pořadí aktivizace tabulátorem | odkazy a formulářová pole |
| language | jazyk skriptu | všechny elementy |
| události | uživatelské události spouštějící skripty | zobrazované elementy |
Přidejte, prosím, na své stránky odkaz
<a href="http://www.jakpsatweb.cz/html/default.htm">HTML
příručka</a>
nebo ikonku.
<a
href="http://www.jakpsatweb.cz/html/default.htm"><img src="http://www.jakpsatweb.cz/images/jpw_html.gif"
border="0" alt="Jak psát web"></a>
Díky!
Tak to bychom měli. Možná budou někde chyby, dělal jsem to narychlo. I tak
jsem na tom nechal šest dnů ... :-(
Dokončeno 1. června 2001.
Poslední aktualizace 10. prosince 2003.
o tvorbě, údržbě a zlepšování internetových stránek