Zßklady HTML

Tagy = znaΦky - Zobrazenφ zdroje - Nult² p°φklad - 1. p°φklad, struktura - PßrovΘ tagy - 2. p°φklad, formßtovßnφ - 3. p°φklad, pozadφ a odkazy - Obrßzky, Φßry, zarovnßnφ - Dal╣φ studium

Tento text pouze naznaΦuje zßklady HTML. Hodn∞ zjednodu╣uji. K dispozici je podrobnß reference HTML s p°ehledem tag∙. Pokud pou╛φvßte n∞jak² editor, nemusφte se o HTML starat. Ale jen do chvφle, ne╛ nastanou problΘmy.

V p°φkladech pou╛φvßm barevnΘ oznaΦenφ nov²ch tag∙, kterΘ se ov╣em nikde jinde nepou╛φvß (pouze didaktick² nßstroj).

Tagy = znaΦky

HTML soubor je obyΦejn² text obalen² znaΦkami, kterΘ se naz²vajφ tagy.

Co nenφ v ostr²ch zßvorkßch, je text, kter² se bude zobrazovat. Symbolicky: <tag>text

Zobrazenφ zdroje

Kdy╛ si chcete zdrojov² k≤d prohlΘdnout nebo upravit, zadejte z menu p°φkaz Zobrazit / zdroj. Otev°e se textov² editor (nejΦast∞ji Notepad). Zkuste si to, t°eba te∩ hned. (V anglick²ch prohlφ╛eΦφch je to "View source".)

Zobrazenφ zdroje v Internet Exploreru

Zdroj zobrazen² v tex╗ßku

P°episovßnφm zdroje se m∞nφ strßnka.

Musφte ale mφt tu strßnku u sebe na disku.

Pokud nevφte, jak na disku vytvo°it strßnku, p°eΦt∞te si postup pro zaΦßteΦnφky.

Nult² p°φklad

Kus zdroje

<b>TuΦn² text</b>, <i>text kurzφvou</i> nebo <big>trochu v∞t╣φ text</big>.

se zobrazφ takto: TuΦn² text, text kurzφvou nebo trochu v∞t╣φ text. HezkΘ, ne?

Tip: ostrΘ zßvorky se na ΦeskΘ klßvesnici d∞lajφ pomocφ pravΘho altu stisknutΘho s t∞mi klapkami nad nφm (nebo nap°. zavinßΦ je prav² alt + V, s prav²m altem se dß ud∞lat celß °ada dal╣φch klikyhßk∙), zkuste si to.

Prvnφ p°φklad -- struktura

<html>
  <head>
    <title>Mß prvnφ strßnka</title>
  </head>

  <body>
    Moje prvnφ html strßnka.
    A n∞jakΘ dal╣φ texty.
  </body>
</html>

 

Tento p°φklad si m∙╛ete zobrazit v prohlφ╛eΦi. Co znamenajφ jednotlivΘ tagy:

<html>
zaΦφnß dokument
</html>
konΦφ dokument
<head> a </head>
zaΦφnß a konΦφ hlaviΦku, kterß se sice nezobrazuje, ale obsahuje n∞kterΘ d∙le╛itΘ ·daje, nap°φklad
<title> a </title>,
vymezujφcφ nßzev dokumentu (m∙╛e se li╣it od jmΘna souboru)
<body>
je tag, kter² zaΦφnß vlastnφ t∞lo dokumentu. Co je mezi <body> a </body>, se bude zobrazovat.

Tφmto p°φkladem jsem popsal zßkladnφ strukturu dokumentu. V²╣e uvedenΘ tagy by m∞l obsahovat ka╛d² html soubor.

PßrovΘ tagy

Jak je z°ejmΘ z p°φkladu, vyskytujφ se tagy ve dvojicφch <n∞co> a </n∞co>, kde ten prvnφ tag n∞co zaΦφnß a druh² n∞co konΦφ. Lomφtko prost∞ znamenß, ╛e jde o uzavφracφ tag. Nap°φklad <head> je zaΦßtek hlaviΦky a </head> je jejφ konec. Krom∞ takto pßrov²ch tag∙ se vyskytujφ je╣t∞ tagy nepßrovΘ, kterΘ uzavφracφ tag nemajφ, ty ale nejsou ΦastΘ (nap°φklad obrßzky, o tom pozd∞ji).

Druh² p°φklad - formßtovßnφ

<html>
<head>
  <title>Mß druhß strßnka</title>
</head>
<body>
  <h1>Nadpis</h1>
  <p>Odstavec s <b>tuΦn²m textem</b>, s <i>kurzivou</i>. <font color="red">╚erven² text.</font></p>
  <h2>Nadpis druhΘ ·rovn∞</h2>
  <p>Odstavec s <i><b>tuΦnou kurzivou. </b></i><br>
  Text po zalomenφ °ßdku pat°φ do tΘho╛ odstavce.</p>
</body>
</html>

 

TakΘ tento p°φklad si m∙╛ete zobrazit v prohlφ╛eΦi. Jist∞ je vid∞t struktura, kterß je spoleΦnß s prvnφm p°φkladem. Vyskytujφ se tu ale novΘ tagy:

<h1>, </h1>
vymezenφ nadpisu prvnφ ·rovn∞.
<h2>, </h2>
nadpis druhΘ ·rovn∞ (mezinadpis, nadpis kapitoly). Dß se pou╛φt a╛ ╣est ·rovnφ nadpis∙ (tedy a╛ <h6>). Vykreslujφ se r∙zn∞ velkΘ podle d∙le╛itosti.
<p>, </p>
vymezenφ odstavce. Mo╛nß v∙bec nejpou╛φvan∞j╣φ tag. Po jeho konci prohlφ╛eΦ automaticky zalomφ °ßdek a ud∞lß vertikßlnφ mezeru.
<b>, </b>
text mezi t∞mito tagy bude tuΦn².
<i>, </i>
kurzφva
<font color="red">, </font>
dvojice tag∙ vymezujφcφ ΦervenΘ pφsmo. Prvnφ p°φklad tagu, kter² mß "atribut". Atributem je "color" a mß hodnotu "red" (angl. Φervenß). V praxi mß v∞t╣ina tag∙ n∞jak² atribut, zatφm jsem se tomu vyh²bal. Tag FONT m∙╛e mφt mnoho jin²ch atribut∙. (Je╣t∞ musφm zmφnit, ╛e tento tag FONT je pova╛ovßn za zastaral² a jeho pou╛φvßnφ se nedoporuΦuje.)
<br>
zalomenφ °ßdky, takzvan² m∞kk² enter. Text po tomto tagu bude v╛dy zaΦφnat na novΘm °ßdku, ale nenφ to nov² odstavec. Pozor, tento tag je nepßrov², to znamenß, ╛e ╛ßdnΘ </br> neexistuje!

Nynφ u╛ umφte v╣echny tagy nezbytnΘ pro prßci s textem.

T°etφ p°φklad - pozadφ a odkazy

V tomto p°φkladu se pokusφm nastφnit dv∞ nesouvisejφcφ v∞ci, u╛ pon∞kud t∞╛╣φ

<html>
<head>
<title>T°etφ p°φklad</title>
</head>


<body bgcolor="green" text="yellow">
<h1>Pozadφ a odkazy</h1>
<p>ObyΦejn² text.</p>
<p>Odkaz na <a href="http://www.seznam.cz">Seznam</a>. </p>
<p><a href="priklad2.htm">Odkaz na p°φklad 2.</a></p>
</body>
</html>

Zobrazte si p°φklad v prohlφ╛eΦi a zkuste funkΦnost odkaz∙. Mßme tady nov² tag <a> a n∞jakΘ dal╣φ atributy.

<a href="adresa">text odkazu </a>
text (nebo obrßzek) mezi t∞mito dv∞ma tagy se zobrazφ jako text odkazu ("a" jako angl. "anchor" = odkaz). Po kliknutφ na n∞j se prohlφ╛eΦ p°epne na adresu, kterß je zadanß atributem HREF.
href
atribut tagu "a" se rovnß cest∞ k odkazovanΘmu souboru. Pou╛φvß se zde bu∩ relativnφ, nebo absolutnφ adresa.
absolutnφ adresa
pou╛φvß se ve form∞ http://www.atakdßle.cz. V p°φkladu je takto pou╛ita adresa Seznamu.
relativnφ cesta
pokud se chci odkßzat na jin² sv∙j soubor, je zbyteΦnΘ vypisovat tam to http:// a celou cestu. Nejlep╣φ je, kdy╛ je odkazovan² soubor ve stejnΘm adresß°i jako ten aktußlnφ. Pak se na n∞j dß ukßzat relativn∞. StaΦφ zapsat jenom jmΘno souboru a prohlφ╛eΦ to pochopφ. (V p°φkladu je takto odkßzan² druh² soubor priklad2.htm.) Jestli╛e je ten cφlov² soubor v jinΘm blφzkΘm adresß°i, staΦφ napsat href="adresß°/soubor.htm". Pro nad°azen² adresß° se pou╛φvajφ konvenΦnφ dv∞ teΦky. Odkazy podrobn∞ji rozebφrßm jinde. P°φklady relativnφ cesty.
<body bgcolor="green" text="yellow">
zp∙sob, jak stanovit barvy celΘho t∞la dokumentu.
bgcolor
atribut tagu <body>, kter² urΦuje barvu pozadφ celΘho dokumentu.
text
atribut tagu <body>, kter² urΦuje zßkladnφ barvu pφsma celΘho dokumentu.
background
takΘ atribut tagu <body>. V tomto p°φklad∞ se nevyskytuje. Umo╛≥uje dßt do pozadφ obrßzek, kter² se bude pravideln∞ opakovat. Obrßzek se m∙╛e takΘ adresovat absolutn∞ nebo relativn∞, nap°φklad <body background="../pozadi.jpg" >, nebo absolutn∞. Vφce o pozadφ v samostatnΘm textu.

Obecnß syntaxe

HTML mß n∞kolik mßlo zßsad, kterΘ je dobrΘ zmφnit.

Obrßzky, Φßry, zarovnßnφ

Obrßzek se do dokumentu vlo╛φ nepßrov²m tagem 

<img src="obrßzek.gif">

Src (jako source = zdroj) se op∞t m∙╛e zadßvat relativn∞ nebo absolutn∞. Nap°ed je t°eba mφt obrßzek p°ipraven² jako soubor. Aby se obrßzek zobrazil ve v╣ech prohlφ╛eΦφch, musφ to b²t soubor typu gif nebo jpg. Tag <img> mß spoustu dal╣φch atribut∙, kterΘ nynφ opomφjφm, podrobn∞ v╣e v kapitole o obrßzcφch.

Horizontßlnφ Φßra se dß vlo╛it tagem <hr>. Mß to n∞jakΘ atributy, kterΘ nastavujφ ╣φ°ku, zarovnßnφ a barvu. 

V∞t╣ina objekt∙ (odstavce, tabulky, obrßzky) na strßnce se m∙╛e zarovnat vlevo, na st°ed nebo vpravo. D∞lß se to obecn²m atributem align, kter² mß hodnoty left, center nebo right. Nap°φklad tento odstavec je deklarovßn zßpisem
<p align="center" >
a je zarovnan² na st°ed.

Dal╣φ studium

Napsal jsem p°ehled HTML tag∙, co╛ je vlastn∞ vcelku obsßhlß reference jazyka. A╛ budete tßpat nad n∞jak²m tagem, tak tam mrkn∞te.

Dal╣φ:  Publikovßnφ hotov²ch soubor∙. P°edchozφ: Jak ud∞lat stßnky
Pom∙cka: P°ehled HTML
Vizte tΘ╛: Obrßzky, Odkazy, Zßlo╛ky, Tabulky, Zßkladnφ definice rßm∙, CSS styly, V╣e o pozadφ, Div a span, neutrßlnφ html tagy

o tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek

Pφ╣e Yuh∙, dusan@pc-slany.cz

Hledßnφ:
Jak psßt web: www.jakpsatweb.cz

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

Poslednφ aktualizace 10.12.2003