Skripta OVI

HTML elementy

HTML elementy:
HTML elementy jsou základní stavební bloky HTML dokumentu. Tvoří strukturu a obsah webových stránek. Jednotlivé elementy jsou tvořené značkami, neboli tagy.
Tagy jsou vždy ohraniřené špičatými závorkami <>. Pojem tagy a elementy může být za určitých situacích zaměňován.

Rozdělení html podle zápisu:

1. nepárové elementy / tagy
Skládají se jen z jednoho elementu <element> a nemají uzavírací část.

  • Používají se například pro vkládání externího obsahu, znakových sad, obrázků nebo zalamování řádků.
  • Nepárové tagy končí samotným <element>. Také ho můžeme psát jako <element />.
  • Příklady: <img>, <meta>, <link>, <br>.

2. párové elementy / tagy
Tyto elementy se skládají z počáteční značky <element> a ukončovací značky </element>.

  • Příklady: <html>, <body>, <p>, <a>.
  • Používají se pro úpravy obsahu, jeho strukturování nebo stylizaci.

Rozdělení html podle zobrazení:

  1. blokové elementy
    • Zobrazují se jako bloky, které vyplňují svou šířkou celý dostupný prostor a automaticky mají mezeru před a za elementem.
    • Používají se ke strukturování stránky.
    • Např. p, div, header, h1
  2. řádkové (inline) elementy
    • Vkládají se do řádku za další objekty, zaplňují jen takové místo, jaké má jejich vnitřní obsah.
    • Používají se pro drobné úpravy textu nebo vkládání menších prvků do řádku.
    • Např. img, button, object, br, b, a

HTML elementy upravující text

1. Stylistické úpravy textu

  • <b></b> bold, tučné písmo
  • <i></i> italika
  • <u></u> podtržení (underlined)
  • <span></span> Výběr části textu pro aplikaci specifického stylu.
    • Například: <span style="color:red;">Tento text je červený.</span>.

2. úprava struktury textu

  • <p></p> paragraf, zalomení odstavce
    • vždycky mezera mezi paragrafem a jiným obsahem, vždy má kolem sebe vnější okraj (margin)
  • <br> break. zalomení řádku bez marginu, neukončuje odstavec
  • <h1></h1> – nadpis (headline)
    … až
    <h6></h6>
    Nadpisy různé úrovně. <h1> je největší a <h6> nejmenší.
  • <img> obrázek
    • Například: <img src="obrazek.jpg" alt="Popis obrázku">
  • <a></a> – odkaz (anchor)
    <a href=“sem se napíše kam odkazujeme(adresa“> Co je odkaz (text, obrázek, banner) </a>

Atributy HTML elementů

atribut = vlastnost

Atributy přidávají elementům specifické vlastnosti nebo chování. Každý atribut je definován uvnitř počáteční značky elementu.

vlastnost – předpřipravené nastavení daného elementu

Všechny html elementy mohou mít vlastnosti (např. style). Některé vlastnosti ale fungují jen pro určité elementy.
Některé vlastnosti jsou v daném elementu povinné (např. href nebo src) a bez nich by element „nefungoval“, jiné vlastnosti můžeme přidávat navíc jako rozšíření nastavení, nebo úpravu vzhledu.

Příklad zápisu atributu:
<tag atribut="hodnota">Obsah</tag>

Příklady vlastností

  • href Definuje hypertextový odkaz. Např. v odkazu, v audiu nebo videu
    Příklad: <a href="https://example.com">Odkaz</a>.
  • src Definuje zdroj. Např. zdroj obrázku
    Příklad: <img src="obrazek.jpg">
  • alt Alternativní text pokud se element nedokáže zobrazit. Např u obrázku
    Příklad: <img src="obrazek.jpg" alt="Popis obrázku">
  • style Styl objektu. Využívá kaskádové styly CSS.
    Příklad: <p style="color:blue;">Modrý text</p>
  • title Název objektu. Zobrazí se po najetí myši na objekt.
    Příklad: <a title="Informace">Text odkazu</a>
  • lang Jazyk stránky. Uvádí se u tagu html.
    Příklad: <html lang="cs">.

admin

, ,