Aktuality:
1.11.2009 - spuštěna nová verze webu.

Kompletní přehled HTML příkazů

Seznam příkazů jazyka HTML

nova online

Zde najdete veškeré důležité tagy jazyka HTML i s jejich atributy a vysvětlením použití. Tagy jsou logicky rozčleněny do skupin podle funkcí.

Příkazy pro strukturování dokumentu

Tag	Párový	Význam	Atributy	Poznámky
<html>	Párový	Ohraničuje celý html dokument		Je na samém začátku dokumentu a je povinný
<head>	Párový	Vymezuje hlavičku stránky		Následuje po <html> a je povinný
<body>	Párový	Vymezuje vlastní obsah stránky	background="url" bgcolor=" barva" text="barva" link=" barva" alink="barva" vlink=" barva"	Následuje za <head> </head> a je povinný
<!-- Text poznámky -->	Začíná <!-- a končí -->	Poznámka		Používá se pro lepší srozumitelnost a přehlednost kódu. Doporučuji používat
<!doctype>	Nepárový	Specifikace typu dokumentu

<html>

Párový tag, do nějž je uzavřena celá stránka. Pokud ho zapomenete, prohlížeče si ho sami domyslí, ale v dokumentu by rozhodně chybět neměl. Nemá žádné atributy.

<head>

Párový tag, ohraničující hlavičku dokumentu. Zde jsou nepovinně použity další tagy (title, meta, style, link, skript...). Pokud zde použijete text, neuzavřený do těchto tagů, může se stát, že se zobrazí na začátku dokumentu! Tag <head> nemá žádné atributy.

<body>

Párový tag, ohraničující veškerý zobrazovaný obsah dokumentu. Jsou pro něj použitelné tyto atributy (postupem času se však přestávají používat a místo nich se používají CSS vlastnosti, které také uvádím)

Atribut	Význam	Hodnota	Vlastnost CSS	Poznámka
background	Obrázek na pozadí	URL obrázku	background image: url ('')
bgcolor	Barva pozadí	Barva	background-color: #hexadecimální kód barvy
text	Barva textu	Barva	color: #hexadecimální kód barvy
link	Barva (nenavštívených) odkazů	Barva	a:link {color: #hexadecimální kód barvy}
vlink	Barva navštívených odkazů	Barva	a:visited {color: #hexadecimální kód barvy}
alink	Barva aktivních odkazů (na které bylo právě kliknuto)	Barva	a:active {color: #hexadecimální kód barvy}
scroll	Posuvník	yes \| no	overflow	Nedoporučuji měnit. Uživatel by si v případě delšího textu příliš nepočetl
bgproperties	Posouvání obrázků na pozadí spolu se stránkou	scroll \| fixed (posouvat \| neposouvat= fixovat)	background-attachment
topmargin	Horní okraj	Pixely	margin-top: počet px
rightmargin	Pravý okraj	Pixely	margin-top: počet px
bottommargin	Spodní okraj	Pixely	margin-top: počet px
leftmargin	Levý okraj	Pixely	margin-top: počet px

Nic, co je napsáno mezi znaky  se nezobrazí. Bude to zobrazeno pouze ve zdrojovém kódu. Pomocí poznámek lze nastavit jiné styly css pro internet explorer a pro ostatní prohlížeče. Více v textu o kaskádových stylech. Je třeba zmínit, že poznámky nelze vnořovat, protože jakmile prohlížeč narazí na -->, poznámku ukončí a vnější poznámka již bude zobrazena.

<!DOCTYPE>

Prvek pro definici typu souboru- píše se na začátek ještě před <html>. Určuje verzi jazyka HTML nebo XHTML, v níž je dokument napsán. Obecná syntaxe vypadá takto:
<!DOCTYPE KořenovýPrvek DOSTUPNOST "(+/-)//ORGANIZACE// TYP IDENTIFIKÁTOR//JAZYK" "URL">
Konkrétním a nejpoužívanějším příkladem je <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/strict.dtd">

KořenovýPrvek

Je to prvek, v němž jsou obsaženy všechny ostatní prvky. V HTML i XHTML se vždy jedná o prvek html.

DOSTUPNOST

Definuje míru dostupnosti souboru. Hodnotou je buď PUBLIC (veřejný) či SYSTEM (přístupný jen v určitém prostředí). Specifikace (X)HTML jsou vždy veřejné.

+/-

Rozlišuje, jestli je ORGANIZACE registrovaným subjektem ISO. Pokud ano, používá se +, pokud ne, použije se -. W3C není registrovaná a proto se většinou používá -.

ORGANIZACE

Identifikační název organizace. W3C má identifikační název stejný jako oficiální.

TYP

Určuje, co vlastně DOCTYPE pro dokument představuje. Pro (X)HTML je to vždy DTD (definice typu).

IDENTIFIKATOR

Unikátní název odkazovaného předpisu. V (X)HTML obsahuje typ dokumentu (XHTML), verzi (1.0) a variantu (Strict)

JAZYK

Dvoupísmenná mezinárodní značka jazyka, v němž byl předpis vytvořen. Pro XHTML je to EN.

URL

URL adresa (absolutní nebo relativní) souboru s předpisem. V (X)HTML soubor obsahuje seznam povolených prvků, jejich atributů a vztahů mezi nimi.

Příkazy pro formátování textu

Tag	Párový	Význam	Atributy	Poznámky
<b>	Párový	Tučný text
<i>	Párový	Kurzíva (italika)
<tt>	Párový	`Pevná šířka znaku`
<code>	Párový	`Výpisy kódů`
<strong>	Párový	Silně (důležitý pojem apod.)
<sup>	Párový	^{Horní index}
<sub>	Párový	_{Spodní index}
<small>	Párový	Malé písmo
<big>	Párový	Velké písmo
<u>	Párový	Podtržený text		Doporučuji nepoužívat kvůli horší čitelnosti
<nobr>	Párový	Obsah se nezalamuje- pokračuje jen v jednom řádku
<cite>	Párový	Citace
<dfn>	Párový	Nový termín, definice
<kbd>	Párový	`Formátování vstupů z klávesnice`
<samp>	Párový	`Delší citace, ukázka`
<q>	Párový	Citace
<font>	Párový	Vymezuje vlastnosti písma	color, size, face

Seznamy- odrážky a číslování

Tag	Párový	Význam	Poznámky
ul	Párový	Nečíslovaný seznam (odrážky)
menu	Párový	Nečíslovaný seznam
dir	Párový	Nečíslovaný seznam
ol	Párový	Číslovaný seznam
li	Párový	Položka seznamu	Lze jej zapsat pouze mezi tagy <ul>, <ol>, <menu> nebo <dir>
dl	Párový	Seznam definic
dt	Párový	Pojem	Zařazuje se mezi <dl> a </dl>. Na přeskáčku se střídá s tagem <dd>
dd	Párový	Definice pojmu	Zařazuje se mezi <dl> a </dl>. Na přeskáčku se střídá s tagem <dt>

ul

Tento tag vymezuje nečíslovaný seznam (unordered list) a uvnitř něj mohou být pouze tagy <li>. Odrážky vypadají jako vyplněné kolečko, ale vzhled lze změnit atributem type (hodnoty viz níže). Další úrovně odkazů se vytvoří zanořením <ul> do tagu <li>. Odrážky druhé úrovně jsou prázdná kolečka a třetí úrovně čtverečky.

menu, dir

Tyto seznamy se používají pro tvorbu nabídek apod. Jejich použití je však zbytečné, protože vypadají stejně jako ul.

ol

Vymezuje číslovaný seznam (ordered list) a obsahuje pouze tagy <li> (ty mohou dále obsahovat další úrovně seznamu- ul i ol). Tag <ol> má atributy start a type (stejné druhy hodnot jako u li- viz níže).

li

Obsahuje jednu položku seznamu. Smí se vyskytovat pouze mezi tagy <ol>, <ul>, <menu> nebo <dir>. Zobrazuje se vždy na novém řádku za číslem nebo odrážkou.

Atributy tagu <li>
Atribut	Význam	Hodnoty	Význam hodnot
type	typ odrážky	disc circle square	puntík kolečko čtvereček
type	způsob číslování	1 A a I i	normální číslování číslování velkými písmeny latinky číslování malými písmeny latinky římské číslice malé římské číslice
value	změna čísla	číslo	číslo položky (převede se samo podle typu číslování)

dl

Vymezuje seznam definic, který na překáčku obsahuje tagy <dt> a <dd> (pojem a jeho vysvětlení).

<dl>
<dt>kabát</dt>
<dd>Část oděvu</dd>
<dt>Kabát</dt>
<dd>Česká rocková skupina</dd>
</dl>

dt

Definovaný pojem. Zobrazí se vlevo na začátku řádku a smí se vyskytovat pouze mezi tagy <dl> a </dl>.

dd

Definice pojmu. Zobrazí se s levým odsazením na stejné řádce jako pojem. Smí se vyskytovat pouze mezi tagy <dl> a </dl>.

Příkazy pro blokové prvky

Tag	Párový	Význam	Atributy	Poznámky
<p>	Párový	Vymezuje odstavec
<br>	Nepárový	Zalomí text (přejde na další řádek)
<div>	Párový	Neutrální tag- pouze vymezí určitou oblast textu.	align, style, width, height, id, class, title, lang	Jeho největší význam je ve spojení s kaskádovými styly (css), ale v html se dá přirovnat k odstavci
<h1>	Párový	Nadpis o velikosti 24px		Použití jako hlavní nadpis stránky
<h2>	Párový	Nadpis o velikosti 18px-19px	Podnadpisy (názvy kapitol)
<h3>	Párový	Nadpis o velikosti 16px
<h4>	Párový	Nadpis o velikosti 13px		Používá se i pro celé odstavce většího významu
<h5>	Párový	Nadpis o velikosti 10px
<h6>	Párový	Nadpis o velikosti 9 px		Téměř nejde přečíst
<pre>	Párový	Předformátovaný text		Mezery a konce řádků zobrazí stejně v prohlížeči jako ve zdrojovém kódu. Vypisuje se neproporcionálním strojovým písmem (Courier New)
<blockquote>	Párový	Delší citace		Vzhled je stejný jako u odstavce s tím rozdílem, že <blockquote> je zprava i zleva odsazeno o d okraje asi o 40px.
<address>	Párový	Adresa		V podstatě odstavec, zobrazený kurzívou
<hr>	Nepárový	Vloží vodorovnou čáru	width, size, align

p

Vymezuje odstavec textu (paragraph). Nový odstavec vždy začne na novém řádku, před nímž se navíc utvoří mezera o výšce přibližně dalšího jednoho řádku. Jediným atributem tagu <p> je align, který má hodnoty left, right, center a justify (zarovnání textu nalevo, doprava, na střed nebo do bloku).

br

Tento nepárový tag ukončí řádek a text pokračuje na začátku řádku následujícího. Rozdíl mezi <p> a <br> je ten, že <br> okolo sebe nedělá vertikální mezery a za ním se pokračuje ve stále stejném odstavci (se stejným zarovnáním textu).

div

Tag div v podstatě vyznačuje oddíl- nějakou část dokumentu, která získává umístění a vzhled většinou až pomocí kaskádových stylů. Může v sobě zahrnovat další divy, text, obrázky, odkazy, tabulky nebo formuláře. Div vždy začíná na novém řádku a za sebou řádek ukončuje. Narozdíl od odstavce ale okolo sebe nedělá žádné mezery. Lze použít všechny obecné atributy a atribut align se stejnými hodnotami jako u tagu p.

h1-h6

Nadpisy (headings) se podobají odstavcům v tom, že před a za sebou zanechávají vertikální mezery a začínají a končí řádek. Mají stejné atributy jako div (obecné a align). Vyhledávače text nadpisů vyhodnocují jako (někdy mnohem) důležitější než obyčejný text.

Výchozí formátování nadpisů
Tag	Stupeň velikosti písma	Výchozí velikost	Využití
h1	6	24px	Hlavní nadpis dokumentu
h2	5	18 -19px	Podnadpisy, názvy větších kapitol
h3	4	16px	Mezinadpisy
h4	3	13px	Celé důležitější odstavce
h5	2	10px	Prakticky nepoužitelné
h6	1	9px	Prakticky nepoužitelné

pre

Obsahuje předformátovaný text. Používá se, pokud už máte k dispozici text s konci řádků a odstavci. Takže případné vícenásobné mezery a konce řádků jsou v prohlížeči zobrazeny stejně jako ve zdrojovém kódu. Celý obsah mezi tagy <pre> a </pre> se vypisuje neproporcionálním fontem (nejčastěji Courier New)- všechny znaky jsou stejně široké

(w,j,i,l,m, ,.)

blockquote

Citace, která se používá pro delší citované oddíly. Zobrazí se jako odstavec s větším odsazením zleva i zprava. Lze u něj použít obecné atributy a atribut cite. Jeho hodnotou je zdroj (nejčastěji URL dokumentu), z něhož citujeme. Ačkoli se v prohlížeči nezobrazí, je slušností ho zadávat.

cite

Používá se pro krátké citace. Nezalamuje řádek a je zobrazena kurzívou.

address

Vymezuje adresu. Dnes se příliš nepoužívá, protože jde opět v podstatě pouze o text, psaný kurzívou.

hr

Párový tag, vkládající vodorovnou čáru. Pokud u ní neužijete žádné atributy, zobrazí se šedě přes celou šířku nadřazeného bloku (stránky).

Atributy tagu <hr>
Atribut	Význam	Hodnoty
width	šířka (délka čáry)	pixely nebo procenta
size	šířka (výška neboli tloušťka čáry)	pixely
align	zarovnání čáry s nastavenou šířkou	left, center, right
color	barva (některé prohlížeče neumí)	barva

Odkazy

Tag	Párový	Význam	Atributy	Poznámky
<a>	Párový	Odkaz na jinou stránku nebo na jiné místo v té samé stránce	href, name, target

a

Vše, co je mezi tagy <a> a </a> slouží jako odkaz a lze na to kliknout. Neměly by se tam vyskytovat složitější tagy (table, ul), formuláře, blokové prvky (p, div) ani další vnořený odkaz. Tag a má tři základní atributy - href, name a target.

href

Znamená cíl odkazu (kam se uživatel kliknutím dostane). Jeho hodnotou je URL adresa.

name

Tag <a> může také sloužit jako záložka, na níž se uživatel přenese kliknutím na jiný odkaz ve stejném dokumentu. Pokud tomu tak je, u tohoto tagu nezadáváme atribut href. Obsah tagu může být prázdný.

Více o odkazech a záložkách

target

Tento atribut udává, kde se má nový dokument otevřít. Může se otevřít v novém okně, ve stejném okně, a pokud na stránce používáme rámce, hodnotou může být i jméno konkrétního rámu.

Hodnoty atributu target
target=	Otevře se v
_blank	novém okně
_top	nejvyšším okně hierarchie rámů
_parent	nadřazeném rámu
_self	stejném rámu nebo okně
levyramec	v rámu s názvem "levyramec"

Obrázky a grafika

Tag	Párový	Význam	Atributy	Poznámky
<img>	Nepárový	Vloží obrázek	src, width, height, alt, title

img

Tento tag slouží k vložení obrázku a má mnohem více atributů než většina jiných tagů.

Atributy tagu <img>
Atribut	Význam	Hodnoty	Možné nahrazení pomocí CSS
src	umístění obrázku	URL
alt	alternativní popis	libovolný text
width	šířka	pixely nebo procenta	width
height	výška	pixely nebo procenta	height
border	tloušťka rámečku	pixely	border
vspace	okraj vpravo a vlevo	pixely	margin
hspace	horizontální okraj	pixely	margin
align	zarovnání obrázku	left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom	float (left, right) vertical-align (ostatní hodnoty)

src

Cesta k obrázku (source), udávaná jako absolutní nebo relativní URL adresa. Název souboru je nutno zadat i s příponou. Povolené přípony jsou .jpg, .gif, .png a .bmp. Pokud soubor nebude nalezen, měl by se v prohlížeči zobrazit alternativní text, definovaný atributem alt a malý bílý čtvereček s červeným křížkem. Pokud se Vám obrázek nezobrazuje, možných příčin může být víc:

Je špatně zapsaná URL adresa. Zkopírujte ji ze zdrojového kódu a vložte do adresní řádky. Pokud se obrázek nezobrazí, je buď adresa špatně zapsaná nebo jste zapomněli nahrát obrázek na server.
Zkontrolujte si, jestli máte obrázek opravdu ve složce, uvedené ve zdrojovém kódu
Můžete mít změněná práva pro prohlížení obrázků. Ve většině FTP klientů práva nastavíte kliknutím pravého myšítka na soubor a nabídkou atributy nebo vlastnosti souboru. Všichni musí mít práva pro čtení, vlastník by měl mít i pro zápis a spouštění.
V adrese obrázku musí souhlasit velikost písmen. Nahráváním na server se často změní velikost písmen vpříponě, to je třeba také zkontrolovat (obrazek.jpg není obrazek.JPG)
Příliš velký obrázek se načítá dlouho a vypadá to, že tam vůbec není. Doporučuji ho v nějakém programu zkomprimovat pod 100 kB.

alt

Hodnotou tohoto atributu je text, který se zobrazí v případě, že se nepodaří načíst obrázek. Doporučuji používat (v XHTML strict je to už atribut povinný), protože spousta uživatelů má vypnuté zobrazování grafiky kvůli menším obrazovkám (mobil, PDA) nebo pomalému připojení a protože existují i nevidomí uživatelé, jimž je text předčítán.

height, width

Tyto dva atributy udávají výšku a šířku obrázku a jsou implicitně v pixelech. Lze je však zadat i procentuálně. Pokud atributy nezadáte, obrázek se zobrazí v původní velikosti. Pokud změníte jen jeden rozměr, druhý si prohlížeč upraví tak, aby nedošlo k deformaci.

border

Hodnotou tohoto atributu je tloušťka rámečku v pixelech. Doporučuji ji zadávat, protože každý prohlížeč okolo obrázků vykresluje jiné ráměčky. Důležité je to třeba u obrázku, použitého jako odkaz, protože tlustý modrý rámeček okolo obrázku není příliš estetický.

Vypnutí rámečku:
<img src="images/obrazek.png" alt="Obrázek" border="0">

hspace a vspace

Prázdné místo mezi obrázkem a okolím. Zadává se bez hodnoty (pixely) nebo v procentech. Procenta jsou počítána z velikosti obrázku. Je lepší tyto hodnoty nahradit CSS stylem (margin).

align

Tento atribut udává umístění obrázku vůči okolí (většinou řádku a odstavci).

	align=	Umístění
Vůči odstavci (obtékání)	left	Obrázek je umístěn k levému okraji a text ho obtéká zprava
Vůči odstavci (obtékání)	right	Obrázek je umístěn k pravému okraji a text ho obtéká zleva
Vůči řádku	top	Vršek obrázku je zarovnán s nejvyšším bodem na řádku
	texttop	Vršek obrázku je zarovnán s nejvyšším bodem textu (většinou je to totéž, co top).
	middle	Střed obrázku je zarovnán se spodním účařím písma řádku.
	absmiddle	Střed obrázku je zarovnán se středem řádku.
	baseline	Spodek obrázku je zarovnán na účaří řádku.
	bottom	Spodek obrázku je zarovnán na spodek písma
	absbottom	Spodek obrázku je zarovnán na nejnižší místo řádku.

Tabulky

Tag	Párový	Význam	Atributy	Poznámky
<table>	Párový	Vymezuje tabulku	align, cellpadding, cellspacing, border, width, height, background, bgcolor, frame, rules
<tr>	Párový	Vymezuje jeden řádek tabulky	height, background, bgcolor	Smí obsahovat pouze tagy <th> a <td>
<th>	Párový	Vymezuje buňku v prvním řádku tabulky	Stejné jako u <td>	Je to běžná buňka <td>, ale text je tučný a zarovnaný na střed
<td>	Párový	Vymezuje buňku tabulky	align, valign, width, height, background, bgcolor, rowspan, colspan
<caption>	Párový	Nadpis tabulky		Následuje mezi tagem <table> a prvním tagem <tr>

Table

Definuje celou oblast tabulky- řádky a buňky.

Atributy tagu <table>
atribut	význam	hodnoty
align	obtékání tabulky okolním textem	left, center, right
cellpadding	vzdálenost mezi textem v buňce a jejím okrajem	pixely
cellspacing	vzdálenost mezi buňkami	pixely
border	šířka rámečku buněk	pixely
width	minimální šířka tabulky	délka nebo procento
height	minimální výška tabulky	délka nebo procento
background	obrázek na pozadí	URL obrázku
bgcolor	barva pozadí	barva
bordercolor	barva rámečku	barva
frame	rámeček okolo	void, border, box, hsides, vsides, above, below, lhs, rhs
rules	vykreslení mřížky mezi buňkami	none, all, rows, cols
summary	stručné shrnutí obsahu	text pro slepce

Většina atributů je nahraditelná modernějšími kaskádovými styly (CSS).

atribut align

left
Tabulka je na levém okraji a text ji obtéká zprava: center
Tabulka je vycentrovaná a text ji neobtéká. Funguje jen v IE.: right
Tabulka je na pravém okraji a text ji obtéká zleva

atribut frame

frame=	význam
void	tabulka nebude mít žádný rámeček
border (standardní hodnota)	rámeček bude okolo celé tabulky
box	rámeček bude okolo celé tabulky
hsides	bude zobrazen horní a spodní okraj
vsides	bude zobrazen levý a pravý okraj
above	bude zobrazen horní okraj
below	pouze spodní okraj
lhs	levá strana tabulky
rhs	pravá strana tabulky

atribut rules

rules=	význam
none	Nezobrazí se žádná mřížka
all (přednastavená hodnota)	mřížka bude mezi všemi buňkami tabulky
rows	mřížka bude pouze mezi řádky
cols	mřížka bude pouze mezi sloupci

Většinu těchto atributů je lepší nahrazovat kaskádovými styly (CSS).

tr

Definuje řádek tabulky. Obsahuje pouze obyčejné a nadpisové buňky (td a th). Použitelnými atributy jsou height (výška), bgcolor (barva pozadí) a background (URL obrázku na pozadí).

td

Definuje buňku tabulky a musí být uzavřena mezi tagy <tr> a </tr>.

Atributy
atribut	význam	hodnoty	nahrazení v jazyce CSS
align	zarovnání obsahu	left, center, right, justify	text-align
valign	vertikální zarovnání obsahu	top, middle, bottom	vertical-align
width	šířka buňky	délka nebo procento	width
height	(minimální) výška řádku	délka	height
background	obrázek na pozadí	URL adresa obrázku	background-image
bgcolor	barva pozadí buňky	barva	background-color
bordercolor	barva rámečku	barva	border-color
rowspan	sloučení několika řádků do jednoho	celkový počet sloučených řádků
colspan	sloučení buňky s dalšími sloupci	počet sloučených sloupců

atribut align

align=	význam
left	zarovnání obsahu doleva (není nutno nastavovat)
right	zarovnání obsahu buňky vpravo
center	zarovnání textu či obsahu buňky na střed
justify	zarovnání do bloku

valign

valign=	význam
middle	vertikální zarovnání obsahu buňky na střed (přednastavená hodnota)
top	vertikální zarovnání obsahu buňky nahoru
bottom	vertikální zarovnání obsahu buňky dolů

atribut width

To, jak bude buňka široká je přesně počítáno složitým algoritmem. Závisí to na:

atributu width
obsahu buňky
šířce tabulky
šířce ostatních buněk

U výšky se tento algoritmus nepočítá, protože výška není omezená (šířka je omezená šířkou okna).

atributy rowspan a colspan

Jejich přesné použití a syntaxi najdete v učebním textu o tabulkách.

th

Definuje buňku tabulky. Jediný rozdíl oproti <td> je ten, že text je tučný a zarovnaný na střed. Tato buňka tak téměř vždy tvoří nadpisy sloupců.

caption

Tento párový tag následuje za tagem <table> a před prvním tagem <tr>. Obsah tagu <caption> se zobrazí jako vycentrovaný nadpis nad tabulkou. Jediným atributem tohoto tagu je align. Pokud tomuto atributu zadáte hodnotu bottom, nadpis se zobrazí pod tabulkou.

Rámce (rámy)

Tag	Párový	Význam	Atributy	Poznámky
<frameset>	Párový	Slouží k rozdělení okna a ohraničuje více rámců	cols, rows, border, frameborder	Vyskytuje se za hlavičkou místo tagu <body>. Tagy <frameset> lze vnořovat jeden do druhého
<frame>	Nepárový	Vymezuje jeden rám, atributem src se do něj načítá jiný (html) dokument	src, name, scrolling, noresize, marginheight, marginwidth, frameborder
<noframes>	Párový	Dokument, který se zobrazí v prohlížeči, pokud prohlížeč není schopen rámy zobrazit	class, id, style, lang, title
<iframe>	Párový	Vložený plovoucí rám	src, name, width, height, align, marginheight, marginwidth, frameborder, bordercolor, hspace, vspace, scrolling

frameset

Tento párový tag slouží k vymezení skupiny rámců, které potom rozdělují okno na několik částí. Vyskytuje se za hlavičkou místo tagu body. Pokud byste uvedli příkaz body i příkaz frameset v jednom dokumentu, rámy byste znefunkčnili.

Použitelné atributy u tagu <frameset>
Atribut	Význam	Možné hodnoty
cols	rozdělení stránky do sloupců	délky, procenta nebo * určující šířku rámů- odděluje se čárkami
rows	rozdělení stránky vodorovně	délky, procenta nebo * určující výšku rámů - odděluje se čárkami
border	šířka rámečku mezi jednotlivými rámci	pixely
frameborder	zobrazení rámečku okolo rámců	yes \| no

cols a rows

U jednoho tagu frameset může být jen jeden z těchto atributů. Vymezují prostor pro následující rámc<frame>. Jednotlivé způsoby zadávání velikostí můžete smíchat.

Tři sloupce vedle sebe (nabídka široká 25%; reklamy 100px a prostřední text vyplňuje zbytek šířky stránky):
<frameset cols="25%,*,100">
<frame name="nabidka" src="nabidka.html">
<frame name="text" src="uvod.html">
<frame name="reklamy" src="reklamy.html">
</frameset>

frame

Tento nepárový tag slouží pro definování jednoho rámu. Jeho velikost a poloha (svisle x vodorovně) jsou definovány u tagu <frameset>.

Atributy, použitelné u tagu <frame>
Atribut	Význam	Hodnoty
src	dokument, který se zobrazí v rámu	URL
name	jméno rámu (podle tohoto jména sem jsou směřovány odkazy)	jméno rámu - doporučuji malá písmena a bez diakritiky
scrolling	umožnění posouvání s textem v rámu	auto \| no \| yes - doporučuji neměnit
noresize	zákaz měnit velikost rámu	noresize="noresize"
marginheight	vzdálenost mezi levým a pravým okrajem rámu a textem	pixely
marginwidth	vzdálenost mezi horním a spodním okrajem rámu a textem	pixely
frameborder	zobrazení rámečku	yes \| no
bordercolor	barva rámečku	barva

Pokud nechápete syntaxi, podívejte se na text o rámech nebo na příklad u tagu <frameset>.

noframes

Párový tag, v němž je obsažen alternativní text pro prohlížeče, které nepodporují rámce. Nejlepším řešením je napsat sem stručný obsah stránky a odkaz na stažení prohlížeče, který podporuje rámce.

<frameset rows="25%,*,30">
<frame name="hlavicka" src="hlavicka.html">
<frame name="text" src="uvod.html">
<frame name="paticka" src="paticka.html">
</frameset>
<noframes>Tato stránka pojednává o tvorbě webu v jazyce HTML. Pokud si stáhnete <a href="http://www.czilla.cz">prohlížeč s podporou rámců</a>, budete si moci prohlédnout plnou verzi.</noframes>

iframe

Tento párový tag je vlastně jakýsi obdélník, který plove někde ve Vašich stránkách a je v něm zobrazen jiný dokument. Text uvedený mezi tagy <iframe> a </iframe> se zobrazí v prohlížeči, který tento tag nepodporuje (jen mizivé procento některých prehistorických).

Atributy, použitelné u tagu <iframe>
Atribut	Význam	Hodnota
src	adresa dokumentu, zobrazeného v iframe	URL
name	jméno (používá se, pokud do iframe směřujete odkazy)	libovolná
width	šířka iframe	délka nebo procento
height	výška iframe	délka nebo procento
align	zarovnání rámu s okolím	jako u obrázku
marginheight	vnější okraj nahoře a dole	pixely
marginwidth	vnější okraj vlevo a vpravo	pixely
frameborder	šířka rámečku	pixely
bordercolor	barva rámečku	barva
hspace	vnitřní okraj nahoře a dole	pixely
vspace	vnitřní okraj vlevo a vpravo	pixely
scrolling	zobrazení posuvníku	auto \| yes \| no

Formuláře

Tag	Párový	Význam	Atributy	Poznámky
<form>	Párový	Vymezuje formulář	action, method
<input>	Nepárový	Vkládá vstupní pole formuláře	type, name, value, disabled, align (dále podle hodnoty type ještě: size, maxlength, checked a src)	Výskyt pouze mezi <form> a </form>
<select>	Párový	Výběr z několika možností	name, multiple, size, disabled	Výskyt pouze mezi <form> a </form>
<option>	Nepárový	Položka výběru	value, selected	Výskyt pouze mezi <select> a </select>
<textarea>	Párový	Větší vstupní pole pro delší text	name, cols, rows, disabled	Výskyt pouze mezi <form> a </form>
<fieldset>	Párový	Skupina polí	Výskyt pouze mezi <form> a </form>. Sdruží několik prvků formuláře avykreslí okolo nich rámeček.
<legend>	Párový	Popisek polí tagu <fieldset>	align	Výskyt pouze mezi <fieldset> a </fieldset>
<button>	Párový	Tlačítko	type, name, value	Výskyt pouze mezi <form> a </form>. Do buttonu (oproti inputu) se dá vložit libovolný HTML kód, který se na tlačítku zobrazí. Takže mezi <button> a </button> se dají vkládat obrázky, nadpisy...

form

Párový tag, který vymezuje formulář. V podstatě uzavírá všechna vstupní pole do jednoho celku, který potom zasílá na server.

Atributy, použitelné u tagu <form>
Atribut	Význam	Hodnoty
action	skript jemuž formulář odešleme ke zpracování uvedených dat a údajů	URL
method	způsob předání dat	get \| post
target	cílové okno nebo rám	_self, _blank, _top, _parent, nebo jméno rámu nebo okna

To, že použijete na svých stránkách formulář předpokládá, že ovládáte jazyk PHP, C, C++ nebo ASP. Bez znalosti těchto programovacích jazyků (nebo nějakého jim podobného) data z formuláře nebudete schopni zpracovat. Jedinou výjimkou je to, když atributu action zadáte svou emailovou adresu. Na ni Vám přijdou data z formuláře, ale v těžko rozluštitelné podobě.

Metoda GET předává skriptu data v adresní řádce a proto si je může kdokoli přečíst. Pokud použijete metodu POST, k datům se jen tak někdo nedostane. POST je také vhodnější pro větší objem dat (návštěvní kniha), GET pro menší (anketa s jednou otázkou).

Vstupní pole

Mezi vstupní pole patří tagy <input>, <select> a <textarea>. Musejí být umístěny ve formuláři, ale jejich zarovnání je možno upravovat třeba tabulkou. Popisky vstupních polí tvoří obyčejný text, umístěný před nimi nebo za nimi.

input

Nepárový tag, vkládající jedno vstupní pole formuláře.

Atributy, použitelné u tagu <input>
Atribut	Význam	Hodnoty
type	druh vstupního pole	text \| password \| hidden \| radio \| checkbox \| submit \| reset \| image \| file \| button
name	jméno pole, které se odesílá serveru	Libovolné jméno (doporučuji malá písmena a bez diakritiky), které nesmí začínat číslicí.
value	hodnota pole (přednastavená hodnota pole nebo text zobrazovaný na tlačítku)	libovolná hodnota
disabled	políčko bude šedé a nepůjde měnit (jen v některých prohlížečích)	disabled="disabled"
align	zarovnání	jako u obrázku
Další atributy jsou použitelné podle atributu type. Mohou to být size, maxlength, checked, autocomplete, src a accept (vizte níže).

Atribut type

Tento atribut tagu input určuje o jaký druh vstupního pole se jedná. Input se díky tomuto tagu může vykreslit jako zaškrtávací políčko, přepínací tlačítko, políčko pro psaní textu nebo zadávání hesla, tlačítko pro odeslání nebo třeba jako obrázek.

type=	Druh vstupního pole	Další použitelné atributy
text	pole pro psaní textu	size= šířka, udávaná v počtu znaků maxlength = nejvyšší možný počet zadaných znaků
password	pole pro psaní textu - zobrazují se ale jen hvězdičky	size= šířka, udávaná v počtu znaků maxlength = nejvyšší možný počet zadaných znaků
hidden	skryté pole, používá se kvůli zpracování formuláře
radio	kulatá přepínací tlačítka (několik tagů <input type="radio">, které mají stejné jméno (name), ale různé hodnoty (value) tvoří jednu skupinu možností)	checked="checked" - nastaví, že tento puntík bude zaškrtnutý zpočátku
checkbox	čtverečková zaškrtávací tlačítka	checked="checked" - atribut nastaví počáteční zaškrtnutí políčka
submit	tlačítko, které odešle celý formulář serveru
reset	tlačítko, které vymaže všechen obsah polí
image	tlačítko, které odešle formulář i se souřadnicemi kliknutí	src= URL obrázku
file	umožní zadání souboru	accept = typ povolených souborů
button	tlačítko, jehož chování a funkce jsou ovládané skripty

Pole pro text:
<input type="text" name="jmeno">
Pole pro text o šířce odpovídající 10 znakům:
<input type="text" size="10" name="jmeno">
Textové pole s předvyplněnou hodnotou www.kekel.tym.cz:
<input type="text" name="web" value="www.kekel.tym.cz">
Pole pro zadání hesla:
<input type="password" name="heslo">
Skryté pole pro předávání nějakých hodnot:
<input type="hidden" name="skryte" value="odeslano">
Čtyři přepínací políčka (radio). Vybrané bude první:
<input type="radio" name="fotbalovy_tym" value="slovan" checked="checked">
<input type="radio" name="fotbalovy_tym" value="sparta">
<input type="radio" name="fotbalovy_tym" value="slavia">
<input type="radio" name="fotbalovy_tym" value="boleslav">
Zaškrtávací čtvereček (zaškrtnutý):
<input type="checkbox" name="ctverecek" checked="checked">
Tlačítko pro odeslání formuláře
<input type="submit" value="Odeslat formulář">

Atribut type="reset" nedoporučuji používat. Vypadá stejně jako type="submit" a stačí jeden překlik a pracně vyplněný formulář můžete vyplňovat znovu :-) .

select

Párový tag, který zobrazí vyjížděcí nabídku nebo obdélníček s možnostmi. Obsahuje tagy <option>, které definují jednu položku výběru.

Atributy, použitelné u tagu <select>
Atribut	Význam	Hodnoty
name	jméno pole odesílatné serveru	libovolné jméno
multiple	umožní vybrat víc možností najednou (při stisknutí Ctrl)	hodnotou je multiple="multiple"
size	počet zobrazených řádků	číslo
disabled	políčko nepůjde měnit (jen v některých prohlížečích)	disabled="disabled"

<select name="zaliby" multiple="3" size="3">
<option value="web">Tvorba webu</option>
<option value="fotbal">Fotbal</option>
<option value="hra">Hra na hudební nástroj</option>
<option value="pivo">Pití piva</option>
<option value="zvirata">Domácí zvířena</option>
<option value="spani">Spánek</option>
</select>

option

Párový tag, definující jednu položku výběru (lze zadávat i jako nepárový). Použití vizte výše.

textarea

Párový tag, definující velké vstupní pole pro delší text (emaily, návštěvní knihy...). Přednastavená hodnota, která se zobrazí je text, uzavřený mezi značky <textarea> a </textarea>.

Atributy, použitelné u tagu <textarea>
Atribut	Význam	Hodnoty
name	jméno odesílané serveru	libovolné jméno
cols	šířka pole v počtu znaků	počet znaků
rows	výška pole v počtu řádků	počet
disabled	políčko nepůjde měnit (jen v některých prohlížečích)	disabled="disabled"
wrap	zalamování slov a řádků	soft: Řádky se mohou zalamovat jenom v místě mezery nebo uprostřed slova, přesahuje-li slovo celý řádek. off: Řádek se nezalamuje vůbec (IE), popř. jen na konci slov (Mozilla). Objevuje se vodorovný posuvník. hard: Řádky se zalamují v místě mezery nebo kdekoliv v příliš dlouhém slově. Pokud se ale zalomí, je tento zlom odeslán serveru jako konec řádku (/n).

button

Párový tag, do nějž lze vložit libovolný html kód (tabulku, obrázky). Má však různé chyby ve zpracování a proto se příliš nepoužívá. Navíc je k definici jeho chování třeba používat klientský skriptovací jazyk (JavaSkript). Poznámka: Další tagy slouží k rozdělení formuláře do ucelených částí, kterým lze pomocí CSS nastavovat vzhled.

fieldset

Párový tag, který opticky sdruží několik polí formuláře do jednoho celku. Jeho vzhled, rámeček, polohu a velikost lze definovat kaskádovými styly. Prehistorické prohlížeče tento tag neznají.

legend

Popisek tagu fieldset. Zobrazí se nad ním v malém obdélníčku a přeruší horní rámeček okolo fieldsetu. Jeho jediným atributem (kromě obecných) je align (left, center, right).

optgroup

Tag, který asi zatím nemá příliš smysl používat (psáno 06/2007). Vyskytuje se v prvku select a vkládají se do něj tagy option, které jsou pak sdružené do uceleného celku. Jeho jediným atributem je label. Hodnotou tohoto atributu je nadpis sdružených tagů <option>.

Tagy, které se používají v hlavičce dokumentu (mezi <head> a </head>)

Tag	Párový	Význam	Atributy	Poznámky
<title>	Párový	Titulek stránky		Obsahem je pouze obyčejný text. Délka by neměla přesáhnout 250 znaků. Zobrazí se v titulkovém pruhu a je důležitý pro vyhledávače.
<link>	Nepárový	Udává propojení s jiným souborem- např. s kaskádovými styly	rel, href, type, media
<meta>	Párový	Definují různé informace o dokumentu	name, http-equiv, content	Meta tagů může mít každý dokument spoustu. Udávají třeba jméno autora, vlastníka, copyright, obsah stránky, informace pro vyhledávače a další údaje.

title

Párový tag, který definuje titulek stránky (zobrazí se nahoře- v titulkovém pruhu). Obsahem je pouze obyčejný text. Často se zobrazuje jako nadpis nebo odkaz ve vyhledávačích.

link

Nejčastěji se používá pro propojení dokumentu se souborem kaskádových stylů CSS.

Atributy, použitelné u tagu <link>
Atribut	Význam	Hodnoty
rel	vztah k připojovanému souboru	prakticky pouze stylesheet
href	cesta k připojovanému souboru	URL adres
type	typ připojovaného souboru	Nejčastěji text/css
media	tag platí jen pro některá zařízení	all \| screen \| print \| tv...

name=	Význam	content=
keywords	klíčová slova pro vyhledávače stroje, dnes však prakticky bezvýznamné	klíčové slovo,klíčové slovo,klíčové slovo
description	popis stránky (pro vyhledávače)	text, podobný titulku stránky
author	informace o autorovi	většinou jméno autora
robots	zakázání nebo povolení vyhledávačům indexovat obsah nebo se proklikávat odkazy odkazy	[index \| noindex ], [ follow \| nofolow]

http-equiv=	Význam	content=
content-type	MIME specifikace a informace o kódování stránky	dnes nejčatěji text/html; charset=windows-1250 v budoucnu pravděpodobně text/html; charset=UTF-8
content-language	Jazyk, použitý v dokumentu	cs \| sk \| de \| en-us \| en-gb \|...
refresh	přesměrování na jinou stránku po několika sekundách	sekundy;URL= např. 6;http://www.kekel.tym.cz
cache-control	způsob kešování (ukládání obsahu stránky v prohlížeči na straně uživatele)	no-cache \| cache (ukládat= příště rychlejší načtení, ale změny, udělané ve zdrojovém kódu, se projeví až za delší dobu \| neukládat)

Vkládání skriptů a css stylů

Tag	Párový	Význam	Atributy	Poznámky
<script>	Párový	Zápis skriptu, většinou v jazyce Javaskript [džavaskript]	type, language, src, charset, event
<style>	Párový	Obsahuje zápis kaskádových stylů (css)	type, media	Vyskytuje se pouze v hlavičce

script

Párový tag, obsahující zápis skriptu. Skript není psán v jazyce HTML, ale v tzv. skriptovacím jazyce (nejčastěji JavaSkript).

Atributy, použitelné u tagu <script>
Atribut	Význam	Hodnoty	Poznámka
type	MIME-typ obsahu skriptu	nejčastěji text/javascript
language	jazyk skriptu	Javascript \| Jscript \| VbsScript \| a další	Tento atribut v poslední době hodně zastaral. V budoucnu ho již prohlížeče nejspíš nebudou chápat.
src	cesta ke skriptu, zapsanému v jiném souboru	URL,	nejčastěji se jedná o soubor s příponou .js
charset	kódování skriptu, připojeného atributem src	iso-8859-2 \| windows-1250 \| UTF-8	funguje pouze v modernějších prohlížečích

style

Párový tag, obsahující zápis kaskádových stylů k definici vzhledu dokumentu. Měl by se vyskytovat pouze v hlavičce.

Atributy, použitelné u tagu <style>
Atribut	Význam	Hodnoty
type	druh stylu	text/css
media	typ výstupního zařízení, pro něž bude styl platit	all \| print \| screen \| braille \| handheld \| projection \| tv

Více o zápisu stylů najdete v textu o CSS.

Atributy, použitelné u téměř všech tagů (obecné atributy)

Atribut	Význam	Lze použít u	Poznámky
class	Název css třídy. V CSS se názvu předřadí tečka.	Všech prvků
id	Identifikátor pro css a pro skripty. V CSS se názvu předřadí # (pravý alt+X).	Všech prvků	Identifikuje prvek a tím mu pomocí kaskádových stylů či skriptů přiřazuje různé vlastnosti- velikost, rámeček...
style	Zápis css stylu, který platí pro tag, u nějž je tento atribut použit	Všech zobrazovaných prvků
title	Titulek, který se zobrazí ve žluté nebo bílé bublině po najetí myší	Všech prvků	Délka by neměla přesáhnout 80 znaků
lang	Jazyk elementu	Všech prvků	Dnes ještě nelze příliš využít. V budoucnu pravděpodobně pro lepší zobrazení národních znaků.
name	Jméno prvku	Různá použitelnost	Využitelné především u formulářů. V poslední době jeho význam přebírá atribut id (především v DHTML).

Jak se dělá web? Jazyk HTML Vytváříme první webovou stránku Základy jazyka HTML Strukturování textů Formátování textu Tvorba seznamů Tvorba odkazů Grafika stránek Barvy na webu Tvorba tabulek Tvorba rámců Tvorba formulářů Neutrální tagy Vývoj HTML- XHTML Kompletní přehled HTML tagů CSS kaskádové styly Rady a tipy Užitečné nástroje Problém? Poradíme! Reference a odkazy O autorovi

Chat:
Přidat příspěvek!

Janis - 23.01.2010, 18:23:07

Páčí sa mi vela

Admin - 30.10.2009, 17:51:49

Tak jak se vám páčí nový vzhled, chat a další věcičky?