HTML - přehled nejvýznamnějších tagů a jejich atributy a vlastnosti

atributy tagu <body>
atributvlastnosthodnota
bgcolorbarva pozadíbarva
backgroundobrázek na pozadíurl
textbarva textubarva
linkbarva odkazůbarva
vlinkbarva navštívených odkazůbarva
alinkbarva odkazů při kliknutíbarva
bgpropertiesposouvání obrázkového pozadíscroll | fixed
scrollrolování tělayes | no
leftmarginlevý okrajvzdálenost
topmarginhorní okrajvzdálenost
rightmarginpravý okrajvzdálenost
bottommarginspodní okrajvzdálenost

Příklad: <body background="image.gif" bgcolor="blue" text="#111111" link="#b35k58" vlink="#d16f03" alink="#ef7d00">

bloky
tagvýznamdruh
<p>odstavecpárový
<br>zalomení řádkunepárový
<div>kontejnerpárový
<center>vycentrovánípárový
<h1> až <h6>nadpisy 1. až 6. úrovněpárový
<blockquote>citace, odsazenípárový
<address>adresapárový
<pre>předformátovaný textpárový
<hr>vodorovná čáranepárový

Příklad: <p>Tady je odstavec<br></p>

seznamy, výčty
tagvýznamdruh
<ul>odrážkový seznampárový
<ol>číslovaný seznampárový
<li>položka seznamupárový

Příklad:
<ul>
  <li>První položka seznamu</li>
  <li>Druhá položka seznamu</li>
  <li>Třetí položka seznamu</li>
</ul>

atributy tagu <a> (odkaz)
atributvlastnosthodnota
hrefcíl odkazuURL
namejméno záložkyzvolené
targetcílový rám nebo oknojméno rámu nebo virtuální okno

Příklad: <a href="index.html" target="_blank">Odkaz se otevře v novém okně</a>

atributy tagu <img> (image)
atributvlastnosthodnota
srcfyzické umístění obrázku (souboru)URL
altalternativní popistext
lowsrcnáhradní obrázek pro malé displejeURL
widthšířkavzdálenost nebo %
heightvýškavzdálenost nebo %
bordertloušťka rámečkuvzdálenost
vspacevertikální okraj (odsazení)vzdálenost
hspacehorizontální okraj (odsazení)vzdálenost
alignzarovnání obrázkuleft, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom

Příklad: <img src="./images/image.jpg" width="100" alt="Pěkný obrázek">

tabulka (table)
tagvýznamdruh
<table>tabulkapárový
<tr>řádek tabulkypárový
<th>buňka záhlaví tabulkypárový
<td>buňka tabulkypárový
<caption>nadpis tabulkypárový
<col>úprava slouce tabulkynepárový
<colgroup>skupina slouců tabulkynepárový
<tbody>tělo tabulkypárový
<thead>hlavička tabulkypárový
<tfoot>patička tabulkypárový

Příklad:
<table>
  <tr><th>sloupec 1</th><th>sloupec 2</th></tr>
  <tr><td>buňka 1/1</td><td>buňka 1/2</td></tr>
  <tr><td>buňka 2/1</td><td>buňka 2/2</td></tr>
</table>

atributy tagu <table>
atributvlastnosthodnota
alignobtékání tabulky okolním textemleft, right, center
cellpaddingvnitřní okraj buněkvzdálenost
cellspacingvnější okraj buněkvzdálenost
widthminimální šířka tabulkyvzdálenost nebo %
height minimální výškavzdálenost nebo %
backgroundobrázek na pozadíURL
bgcolorbarva pozadíbarva
bordercolorbarva rámečkubarva
framevykreslení rámečku okolovoid, border, box, hsides, vsides, above, below, lhs, rhs
rulesvykreslení mřížkynone, all, rows, cols, groups

Příklad: <table align="left" width="200" bgcolor="#abcabd">

formulář (form)
tagvýznamdruh
<form>formulářpárový
<input>pole, volba nebo tlačítkonepárový
<select>roletka pro výběrpárový
<option>položka v selectunepárový
<textarea>velké textové polepárový
<label>popis polepárový
<fieldset>ohraničení skupiny polípárový
<legend>popis skupiny polí fieldsetpárový
<optgroup>ohraničení skupiny volebpárový
<button>tlačítkopárový
atributy tagu <form>
atributvlastnosthodnota
actionskript, který bude zpracovávat dataURL
methodzpůsob přenosu datget | post
enctypezpůsob zakódování datapplication/x-www-form-urlencoded | multipart/form-data | libovolná mime deklarace
targetcílové okno nebo rám_self, _blank, _top, _parent, nebo jméno rámu nebo okna
atributy tagu <input>
atributvlastnosthodnota
typedruh vstupního poletext | password | hidden | radio | checkbox | submit | reset | image | file | button
namejméno vstupního polevolitelné
valuedefaultní hodnota pole nebo text zobrazovaný na tlačítkuvolitelné
alignzarovnánístandardní hodnoty pro zarovnání
atributy tagu <input type="atribut">
atributvlastnostvlastnosti
texttextové polesize= šířka ve znacích, maxlength = nejvyšší možný počet zadaných znaků, autocomplete = doplňování známých hodnot
passwordtextové pole s hvězdičkamisize= šířka ve znacích, maxlength- maximum znaků
hiddenskryté polepřenos ostatních proměnných
radiotéž radiobutton - přepínačchecked - defaultně označené
checkboxzatrhávací boxchecked - defaultně označené
submittlačítko pro odeslání
resettlačítko pro vyčištění polí
imagepotvrzující tlačítko odesílající navíc souřadnice kliknutí (name.x a name.y)src = URL obrázku
fileumožní vložit a odeslat souboraccept = MIME typ nabízených souborů

Příklad:
<form method="get" action="./input_form.php">
  <input type="text" name="telefon" value="000 000 000"
  size="18">
  <input type="checkbox" name="souhlas"
  checked="checked">
  <input type="radio" name="vyber"
  value="1" checked="checked">
  <input type="radio" name="vyber" value="2">
  <select name="barva">
  <option value="red" selected="selected">červená</option>
  <option value="blue">modrá</option>
  </select>
  <textarea name="clanek" cols="30" rows="5">
  Vlož článek
  </textarea>
  <input type="submit" value="odeslat">
</form>


Výsledek:
(Výše uvedený kód je bez popisu polí.)

Telefon:

Souhlasím s podmínkami:

Zaslat pokyny:
ano:
ne:   

Barva:



Odeslat

HyperText Markup Language

V roce 1989 spolupracovali Tim Berners-Lee a Robert Caillau na propojeném informačním systému pro CERN, výzkumné centrum fyziky poblíž Ženevy ve Švýcarsku. V té době se pro tvorbu dokumentů obvykle používaly jazyky TeX, PostScript a také SGML. Berners-Lee si uvědomoval, že potřebují něco jednoduššího a v roce 1990 byl tedy navržen jazyk HTML a protokol pro jeho přenos v počítačové síti – HTTP (HyperText Transfer Protocol – přenosový protokol hypertextu). Zároveň také Tim Berners-Lee napsal první webový prohlížeč, který nazval WorldWideWeb.

V roce 1991 CERN zprovoznil svůj web. Současně organizace NCSA (National Center for Supercomputer Applications) vybídla Marca Andreessena a Erica Binu k vytvoření prohlížeče Mosaic; ten vznikl v roce 1993 ve verzích pro počítače IBM PC a Macintosh a měl obrovský úspěch. Byl to první prohlížeč s grafickým uživatelským rozhraním.

Následoval rychlý rozvoj webu, takže bylo nutné pro HTML definovat standardy.

Verze jazyka

Verze 0.9

Byla vydána zhruba v roce 1991. Nepodporuje grafický režim (verze, kterou vytvořil Tim Berners-Lee).

Verze 2.0

Zachycuje stav jazyka v polovině roku 1994. Standard vydala roku 1995 komunita IETF (Internet Engineering Task Force). Je to první verze, která odpovídá syntaxi SGML. Přidává k původní specifikaci interaktivní formuláře a podporu grafiky.

Verze 3.2

Byla vydána 14. ledna 1997 a zachycuje stav jazyka v roce 1996. Připravovaná verze HTML 3.0 nebyla nikdy přijata jako standard, protože byla příliš složitá a žádná firma nebyla schopna naprogramovat její podporu. Standard už vydalo W3C, stejně jako následující verze. Přidává k jazyku tabulky, zarovnávání textu a stylové elementy pro ovlivňování vzhledu.

Verze 4.0

Byla vydána 18. prosince 1997. Do specifikace jazyka přibyly nové prvky pro tvorbu tabulek, formulářů a nově byly standardizovány rámy (frames). Tato verze se snaží dosáhnout původního účelu - prvky by měly vyznačovat význam (sémantiku) jednotlivých částí dokumentu, vzhled má být ovlivňován připojovanými styly. Některé prezentační elementy byly zavrženy.

Verze 4.01

Byla vydána 24. prosince 1999. Tato verze opravuje některé chyby verze předchozí. Podle původního předpokladu se mělo jednat o poslední verzi, po které by se přešlo na XHTML.

Verze 5

7. března 2007 byla založena nová pracovní skupina HTML, jejíž cílem je vývoj nové verze HTML. V květnu 2007 bylo odhlasováno, že základem nové specifikace se stanou Web Applications 1.0 a Web Forms 2.0 ze specifikace WHATWG. Jako název nové specifikace bylo odhlasováno HTML 5. Specifikace by měla být hotova v letech 2010-2012 (odkdy ji začnou vývojáři webových aplikací používat), ukončení vývoje specifikace po vyřešení problémů a opravení všech chyb se odhaduje až na rok 2022.

Zdroj: Wikipedia (2012)