HTML p°φruΦka

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.

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.

Rejst°φk tag∙ - abecedn∞ °azenß tabulka HTML tag∙


zobrazit vysv∞tlenφ

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φ 

Nßsleduje podrobn² rozpis HTML tag∙:

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.

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

┌prava textu

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

FyzickΘ formßtovßnφ

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  

LogickΘ formßtovßnφ

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φ

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.

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

Seznamy

╪φ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>

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

HTML tag V²znam Pßrov² V²skyt
a odkaz, hyperlink, zßlo╛ka ano kdekoliv krom∞ <a>

Obrßzky

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

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

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  

Objekty

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>

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.

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>

HlaviΦka

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

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  

ObecnΘ atributy

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

Ikonka

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

Nßvody HTML CSS JavaScript
Pφ╣e Yuh∙, dusan@pc-slany.cz

Hledßnφ:

HTML p°φruΦka na www.jakpsatweb.cz

Pφ╣e Yuh∙: http://dusan.pc-slany.cz, mail: dusan@pc-slany.cz

Poslednφ aktualizace 10.12.2003