HTML

Web o webu

Jazyk HTML

Syntaxe HTML značek

HTML značky (tagy) jsou uzavřeny ve špičatých závorkách < >

Každá značka má přesnou syntaxi. Zapíšeme-li značku chybně (neexistující značku), bude ji prohlížeč ignorovat (nedetekuje chybu). Text v ní umístěný se pak může ocitnout v jiném místě stránky či být jinak formátovaný, neboť není ohraničen správnou značkou. Některé chyby prohlížeče sami opraví. Nemůžeme však spoléhat, že všechny prohlížeče doplní chybějící kód stejně.

Základem spolehlivého webu je tedy dodržování správné syntaxe.

Zda je náš html kód správný (validní) si můžeme ověřit na stránkách validator.w3.org

Párové a nepárové tagy

  • Párové tagy - určují začátek a konec nadpisu, odkazu, odstavce apod.
    <h1>Sedm divů světa</h1>
    <a href="http://cs.wikipedia.org">Encyklopedie Wikipedia</a>
    <p>
    Starověké civilizace vybudovaly celou řadu nádherných staveb,
    ale jen sedm z nich ohromilo antické spisovatele natolik,
    že je prohlásili za zázrak.
    </p>

    Počáteční a koncová značka může být umístěna před a za textem, nebo nad a pod textem, podle toho, co je pro nás přehlednější. Celý odstavec může být v editoru na jednom řádku, dlouhý odstavec můžeme rozdělit na víc řádků, na výsledné zobrazení v internetovém prohlížeči to nebude mít žádný vliv, odstavec se bude automaticky zalamovat podle velikosti okna prohlížeče.

    Návod pro PSPad

    Html kód stránky je přehlednější, píšeme-li html tagy na jednom řádku:

    Kód odstavce

    Chceme-li pak vidět celý text dlouhých odstavců, provedeme jejich zalomení pomocí tlačítka Tlačítko Zalomit text
    (Pozici zalamování nastavíme kliknutím myší na pravítko)

    Kód odstavce - zalomený

    Tagy se mohou vnořovat do jiných tagů, např. obrázek do odkazu, odkaz do odstavce. Při vnořování se párové tagy nesmí křížit, tzn., že začátek i konec vnořeného tagu musí být uvnitř vnějšího tagu.

    Ukázka

    Odkaz uvnitř položky seznamu s odrážkami - správně:

    <p>Čerpáno z <a href="http://cs.wikipedia.org">Wikipedie</a></p>

    Špatně:

    <p>Čerpáno z <a href="http://cs.wikipedia.org">Wikipedie</p></a>
  • Nepárové tagy - určují např. obrázek:
    <img src="obrazky/mapa.gif" width="450" height="320" alt="Mapa divů">
    nebo zalomení řádku:
    <br>

    Nepárové tagy nemají ukončovací značku, neuzavírají žádný text.

Přehled základních tagů

h1
hlavní nadpis
h2
podnadpisy
h3
podnadpisy další úrovně
p
odstavec
strong
tučné písmo (zdůrazněná část textu)
b
tučné písmo
em
kurzíva (zvýrazněná část textu, fráze)
i
kurzíva
br
zalomení řádku
ol
číslovaný seznam
li
položka seznamu
ul
seznam s odrážkami
li
položka seznamu
a
odkaz
img
obrázek
table
tabulka
tr
řádek tabulky
td
buňka tabulky
th
buňka záhlaví tabulky
div
blok

Nové tagy HTML5

Rozvržení webové stránky

header
záhlaví webové stránky, záhlaví článku
nav
navigační menu
article
článek
section
část webové stránky obsahující články určitého zaměření, nebo části článku
asside
postranní panel obsahojící informace okrajově související s hlavní částí
footer
zápatí webové stránky, zápatí článku

Multimediální obsah

video
video
audio
zvuk
canvas
kreslící plátno