Seznam užitečných HTML tagů pro každodenní použití

9. listopadu 2000

•

Každý to už jednou zažil – vytváříte HTML stránku a náhle si nemůžete vzpomenout, jakým tagem nastavíte třeba horní index textu. Pro takové případy jsem vytvořil seznam užitečných HTML tagů, kde byste měli najít většinu dnes používaných tagů, seznam jejich parametrů a krátké vysvětlení, k čemu tag slouží. Věřím, že se to bude někdy hodit.

Seznam všech tagů a parametrů zde uvedených jistě není úplný, ale snažil jsem se, abych nezapomněl na ty nejvíce používané. Ke každé skupině tagů můžete použít níže uvedenou rychlou navigaci.

Tag BODY

Více viz podrobný článek.

<BODY>…</BODY>	Uvozuje začátek a konec HTML kódu, který se bude zobrazovat
<BODY leftmargin=“číslo“>	Velikost levého okraje stránky v pixelech (pro IE)
<BODY topmargin=“číslo“>	Velikost horního okraje stránky v pixelech (pro IE)
<BODY marginheight=“číslo“>	Velikost horního okraje stránky v pixelech (pro NN)
<BODY marginwidth=“číslo“>	Velikost levého okraje stránky v pixelech (pro NN)
<BODY bgcolor=“barva“>	Nastavení barvy pozadí stránky v hexadecimálním tvaru
<BODY background=“soubor.xxx“>	Nastavuje obrázek na pozadí stránky
<BODY text=“barva“>	Specifikuje barvu normálního textu v hexadecimálním tvaru
<BODY link=“barva“>	Specifikuje standardní barvu nenavštívených odkazů v hexadecimálním tvaru
<BODY alink=“barva“>	Specifikuje standardní barvu aktivních odkazů v hexadecimálním tvaru
<BODY vlink=“barva“>	Specifikuje standardní barvu navštívených odkazů v hexadecimálním tvaru

Formátování textu

Více viz podrobný článek.

<b>…</b>	Tučný text (bold)
<i>…</i>	Skloněný text (italic)
<u>…</u>	Podtržený text (underline)
<sub>…</sub>	Horní index písma
<sup>…</sup>	Dolní index písma
<strike>…</strike>	Přeškrtnuté písmo
<small>…</small>	Zmenší velikost textu o jeden stupeň
<big>…</big>	Zmenší velikost textu o jeden stupeň
<pre>…</pre>	Text je zobrazen přesně tak, jak je naformátován v HTML kódu.
<H1-H6>…</H1-H6>	Vytvoří nadpisy, H1 je největší velikost, H6 nejmenší
<BR>	Ukončení řádku textu.
<P>…</P>	Nový odstavec textu
<P align=“left/right/center/justify“>	Zarovnání textu v odstavci
	Vloží tvrdou mezeru

Písmo – tag FONT

Více viz podrobný článek.

<FONT>…</FONT>	Základní tag pro změnu písma
<FONT size=“value“>	Velikost písma od 1 do 7, hodota 1 je nejmenší, 7 je největší
<FONT face=“name“>	Druh písma na stránce (např. Arial)
<FONT color=“barva“>	Barva písma, v hexadecimálním tvaru

Odkazy – tag A (anchor)

Více viz podrobný článek.

<A>…</A>	Startovací a ukončovací tag odkazu
<A HREF=“URL“>	Vytvoří odkaz na zadanou adresu
<A HREF=“#NAME“>	Skok na definované místo v aktuální stránce
<A HREF=“URL#NAME“>	Odkaz na uvedenou stránku a skok na definované místo v ní
<A NAME=“NAME“>	Definice pojmenované části dokumentu (souvisí s dvěma předchozími parametry)
<A HREF=“mailto:email“>	Vytvoří odkaz, který otevře email s předefinovanou e-mailovou adresou
<A target=“_blank/_self/_parent/_top“>	Specifikuje, v jakém okně prohlížeče se má dokument zobrazit

Obrázky – tag IMG

Více viz podrobný článek.

<IMG>	Vložení obrázku do dokumentu
<IMG src=“url“ alt=“text“>	Vložení obrázku, který se má zobrazit a jeho popisek
<IMG align=“left/right/center/bottom/top“>	Určuje zarovnání obrázku
<IMG border=“číslo“>	Velikost orámování obrázku v pixelech
<IMG height=“číslo“>	Určuje výšku obrázku v pixelech
<IMG width=“číslo“>	Určuje šířku obrázku v pixelech
<IMG hspace=“číslo“>	Určuje velikost volného prostoru obrázku vlevo a vpravo v pixelech
<IMG vspace=“číslo“>	Určuje velikost volného prostoru nad a pod obrázkem v pixelech
<IMG usemap=“map-name“>	Definuje, že obrázek je „klikací mapa“

Tabulky – tag TABLE, TR, TD

Více viz podrobný článek.

<TABLE>…</TABLE>	Vytvoření tabulky
<TABLE border=“číslo“>	Nastavení orámování tabulky v pixelech
<TABLE cellspacing=“číslo“>	Určuje odsazení vnějšího prostoru mezi jednotlivými buňkami tabulek
<TABLE cellpadding=“číslo“>	Určuje velikost vnitřního osazení od okraje buňky tabulky
<TABLE height=“číslo“ nebo „%“>	Určuje výšku tabulky v pixelech nebo procentuální velikosti okna prohlížeče
<TABLE width=“číslo“ or „%“>	Určuje šířku tabulky v pixelech nebo procentuální velikosti okna prohlížeče
<TD>…</TD>	Definuje buňku tabulky
<TD bgcolor=“barva“>	Nastaví definovanou barvu pro buňku tabulky
<TD colspan=“číslo“>	Určuje počet sloupců, které má daná buňka spojovat
<TD rowspan=“číslo“>	Určuje počet řádků, které má daná buňka spojovat
<TD nowrap>	Určuje, že obsah buňky nebude zalomen
<TH>…</TH>	Definuje záhlaví tabulky, kde text bude zobrazen tučně a vycentrován na střed
<TR>…</TR>	Vytváří řádky tabulky
<TR bgcolor=“barva“>	Nastaví definovavou barvu pro celý řádek tabulky
<TR align=“left/right/center“>	Definuje horizontální zarovnání obsahu celého řádku
<TR valign=“top/middle/bottom“>	Definuje vertikální zarovnání obsahu celého řádku
<TD align=“left/right/center“>	Definuje horizontální zarovnání obsahu buňky tabulky
<TD valign=“top/middle/bottom“>	Definuje vertikální zarovnání obsahu buňky tabulky

Seznamy a definiční výčty

Více viz podrobný článek.

<UL>…</UL>	Start a konec nečíslovaného seznamu
<OL>…</OL>	Start a konec číslovaného seznamu
<OL type=“a/A/i/I/1″>	Druh číslování dokumentu
<LI>položka	Vytvoření položky pro číslovaný nebo nečíslovaný seznam
<LI type=“square/disc/circle“>	Typ odrážky v položce: square- čtverec, disk – prázdné kolečko, circle – plné kolečko
<DL>…</DL>	Start a konec definičního výčtu
<DT>	Definice pojmu
<DD>	Vysvětlení pojmu (<DL><DT>Pojem<DD>Vysvětlení </DL>)

Rámce – tag FRAMESET, FRAME, NOFRAME

Více viz podrobný článek.

<FRAMESET>…</FRAMESET>	Definice rámců ve stránce, musí být umístněna před BODY
<FRAMESET rows=“číslo,číslo“>	Určuje vzájemné rozměry řádku rámců, je možné zadat číselnou hodnotu, procentuální nebo *
<FRAMESET cols=“číslo,číslo“>	Určuje vzájemné rozměry sloupců rámců, je možné zadat číselnou hodnotu, procentuální nebo *
<NOFRAMES>…</NOFRAMES>	Alternativní obsah pro prohlížeče nepodporující rámy
<FRAME src=“?“>	Definuje obsah (HTML stránku) konkrétního rámce
<FRAME name=“name“>	Určení jména rámce, na který se pak lze odkazovat
<FRAME marginwidth=“číslo“>	Určení šířky okraje daného rámce
<FRAME marginheight=“číslo“>	Určení výšky okraje daného rámce
<FRAME scrolling=“auto/yes/no“>	Vytvoří, vyruší či zobrazí podle potřeby v rámci rolovací lištu
<FRAME noresize>	Zruší možnost změny velikost rámců čtenářem.

Formuláře – tag FORM, SELECT, INPUT

Více viz podrobný článek

<FORM>…</FORM>	Uvozuje začátek a konec samotného formuláře
<FORM action=“url“>	Definuje cestu ke skriptu, který bude data z formuláře zpracovávat
<FORM method=“get\|post“>	Druh odeslání dat serveru
<FORM accept=“media type“>	Definice MINE
<FORM accept-charset=“text“>	Definice znakové sady
<FORM enctype=“media type“>	Definuje formát odesílaných dat
<SELECT name=“jméno“>…</SELECT>	Vytvoří rolovací menu
<SELECT size=“číslo“>	Size určuje velikost roletového menu (kolik položek bude vidět současně)
<SELECT multiple>	Multiple – umožní vybrat kurzorem více položek současně
<OPTION>	Tag pro definici položky v Select
<INPUT align=“left/right/top/bottom/middle“>	Zarovnání prvku formuláře
<INPUT type=“text/password“ size=“číslo“>	Velikost formulářového pole ve znacích
<INPUT type=“text/password“ maxlength=“číslo“>	Maxlength – maximální počet znaků, které lze zadat do formulářového pole
<INPUT type=“text/password“ value=“text“>	Value – předem připravený text/heslo ve formulářovém poli
<INPUT type=“checkbox“>	Vytvoří zatržítko (checkbox)
<INPUT type=“checkbox“ checked>	Checked – automaticky toto zatržítko zatrhne (IE only)
<INPUT type=“hidden“ value=“hodnota“>	Neviditelné pole, používá se pro odeslání předem definovaných hodnot (určena pomocí value).
<INPUT type=“image“ src=“URL“>	Obrázek, který slouží jako odesílací tlačítko, URL určuje cestu k obrázku
<INPUT type=“password“>	Vytvoří pole pro zadávání hesla (hvězdičky)
<INPUT type=“radio“>	Vytvoří radio-button
<INPUT type=“radio“ name=“text“>	Name definuje text, který musí být stejný pro jednu sérii radio-buttonů (aby šlo vybrat pouze jednu položku)
<INPUT type=“radio“ value=“hodnota“>	Value definuje hodnotu, která se odešle serveru ke zpracování (server pak ví, jaký radio-button jste vybrali)
<INPUT type=“text“>	Vytvoří pole pro text
<INPUT type=“textarea“>	Vytvoří víceřádkové pole pro text
<INPUT type=“textarea“ rows=“číslo“ >	Rows – počet řádků v textarea – určuje „výšku“ textarea
<INPUT type=“textarea“ cols=“číslo“>	Cols – počet sloupců/znaků v textarea – určuje „šířku“ textarea
<INPUT type=“submit“>	Odešle obsah formuláře serveru
<INPUT type=“reset“>	Vymaže obsah formuláře a nastaví počáteční údaje
<INPUT type=“submit/reset“ value=“text“>	Text, který se zobrazí na odesílacím nebo vymazáváacím tlačítku

Tag META

Více viz podrobný článek

<META name=“typ informace“ CONTENT=“samotná informace“>	První druh META-tagu (umístňuje se do sekce HEAD)
<META http-equiv=“typ informace“ CONTENT=“samotná informace“>	Druhý druh META-tagu (umístňuje se do sekce HEAD)
<META http-equiv=“Content-Type“ content=“text/html; charset=windows-1250″>	Definice kódování stránky (windows-1250)
<META http-equiv=“Refresh“ content=“číslo; URL=adresa“>	META-tag pro přesměrování, číslo je počet sekund, než dojde k přesměrování, URL je adresa, kam bude prohlížeč přesměrován
<META name=“description“ content=“popisek_stránky“>	META-tag pro definici popisku stránky (pro vyhledávače)
<META name=“keywords“ content=“klíčová, slova“>	META-tag pro definici klíčových slov, oddělují se čárkou (pro vyhledávače)