HTML příručka

Popis HTML tagů a jejich atributů, jak jsou podporovány hlavními prohlížeči Internet Explorer, Mozilla, Opera aj. v roce 2011 (průběžně aktualizováno od 2005). Manuál nepíšu podle html reference nebo specifikace, ale ze zkušeností (odpovídá to HTML 4.01). Nezmiňuju zatím HTML 5, protože není (a dlouho ještě nebude) hlavními prohlížeči podporováno.

Jste úplní začátečníci? Napřed si přečtěte, jak si udělat stránky a jak stránky dostat na server. Příklady najdete v HTML taháku, nebo mrkněte na nejužitečnější tagy.

Přehled HTML značek (tagů)

Struktura - Text - Bloky - Seznamy - Odkazy - Obrázky - Tabulky - Rámy - Objekty - Formuláře - Hlavička - Skripty a styly - Rozšíření 

Jazyk HTML

Syntaxe - co se jak v HTML píše, uvozovky, mezery, tagy

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.

XHTML - rozdíly syntaxe HTML a XHTML

Verze HTML - nedůležité historické povídání

Rejstřík tagů - abecedně řazená tabulka HTML tagů

HTML tahák - příklad nejčastějších zápisů

Podmíněné komentáře - zvláštní poznámky pro Internet Explorer

HTML 5 - ještě s tím počkejte

zobrazit vysvětlení

Níže následuje podrobný rozpis HTML tagů spíše pro pokročilé:

Struktura dokumentu

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.

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

Úprava textu

Zastaralý způsob úpravy HTML 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é.

Fyzické formátování

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  
wbr volitelné rozdělení ne klidně

Logické formátování

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í

Bloky

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.

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

Seznamy

Říká se tomu také odrážky a číslování. HTML zná také definiční výčty, které se používají velmi málo.

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>

Odkazy

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ů.

tag Význam Párový Výskyt
a odkaz, hyperlink, záložka ano kdekoliv kromě <a>

Příklad: <a href="http://www.seznam.cz">Seznam</a>

Obrázky

tag Význam Párový Výskyt
img obrázek ne  
map klikací mapa ano  
area oblast v klikací mapě ne <map>

Tabulky

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>.

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

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 html stránku.

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  

Objekty

Vkládání videí, animací, her, zvuků, reklam a podobných blbostí.

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>

Formuláře

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.

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>, <datalist>
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>
datalist data našeptávače ano  

Hlavička

HTML hlavička (tag <head>) obsahuje tagy, jejichž obsah se na stránce nezobrazí, ale jsou důležité.

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 a styly

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 HTML dokumentů.

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í

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čů.

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  

Obecné atributy

Atributy použitelné u skoro každého HTML tagu.

Atribut Význam Platnost pro
class třída pro CSS selekci všechny HTML prvky
id identifikátor pro CSS a skripty všechny HTML prvky
style zápis CSS stylu zobrazované prvky
title titulek prvku, doplňující info v bublině všechny HTML prvky
lang jazyk prvku všechny HTML prvky
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 script, zastaralé
události uživatelské události spouštějící skripty zobrazované prvky

O HTML

HTML znamená Hypertext Markup Language, tedy hypertextový značkovací jazyk. Hypertext markup language se vyvinul ze SGML a stal se používaným jazykem pro tvorbu webových stránek. V historii se nejvíce používaly verze HTML 2.0, HTML 3.2 a HTML 4.01. Z HTML se vyvinulo také XHTML (extended hypertext markup language) jako aplikace XML, které osobně považuji za slepou vývojovou větev. V roce 2010 se začalo mluvit o používání HTML 5.

Normálnímu člověku i pokročilému programátorovi stačí k životu používat nějakou směs oblíbených HTML tagů, které jsou všemi moderními prohlížeči podporovány, bez ohledu na to, do které verze patří.

Prosím o odkaz

Přidejte, prosím, na své stránky odkaz

<a href="http://www.jakpsatweb.cz/html/">HTML příručka</a>

nebo ikonku:

HTML příručka<a href="http://www.jakpsatweb.cz/html/"><img src="http://www.jakpsatweb.cz/images/jpw_html.gif" border="0" alt="HTML příručka"></a>

Další ikonky. 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. Stále průběžně aktualizováno, takže těch dnů už byly desítky.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

 

 

 

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

HTML tagy Abecedně Příklady HTML tahák

 

Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 16. prosince 2014.