Skip to content

Latest commit

 

History

History
94 lines (70 loc) · 2.82 KB

02-html-struktura.md

File metadata and controls

94 lines (70 loc) · 2.82 KB

HTML

  • První, co si prohlížeč stahuje, je HTML soubor, který obsahuje informace o stránce.
  • Je to textový soubor, takže ho můžete upravovat v jakémkoli textovém editoru jako je Poznámkový blok (Notepad) apod., my budeme používat Repl.it
  • Oblíbené editory: VS Code, Sublime Text, Atom

Značkovací jazyk

  • HTML => mark-up language = značkovací
  • Značkovací, protože význam a strukturu dokumentu popisuje pomocí značek, anglicky tagů.

Tag/značka

<jmenotagu>
    Obsah tagu
</jmenotagu>
  • Tag se skládá ze špičatých závorek, názvu tagu mezi nimi.
  • Mluvíme o párovém tagu: první je otevírací a druhý je zavírací.
  • Uzavírá se lomítkem za první špičatou závorkou.
  • Mezi tagy je jeho obsah, tedy to co obaluje. To může být obyčejný text nebo další tag nebo tagy.
  • Existují i nepárové tagy (těch je pár), upozorním, až se k nim dostaneme.
  • Tagy vytvářejí v prostředí webové stránky tzv. elementy/prvky, z nichž se skládá každá stránka.

Klávesnice

  • Protože je pro psaní HTML potřeba některé méně časté znaky, máte na stole pomůcku pro nalezení znaků.
  • Kouzelná je klávesa AltGr s kterou napíšete většinu znaků.
  • Někdo může mít trochu jiné rozložení.
  • Kdo má Mac to má jednodušší - platí to co je vytištěné na klávesnici.

Tagy

<h1>Hlavní nadpis</h1>

<p>odstavec</p>

<strong>důležitý text</strong>
  • jak používají web nevidomí?
  • Jména tagů jsou většinou zkratky anglických slov. Např.:
  • h = heading
  • p = paragraph

Základní struktura HTML

<!DOCTYPE HTML>
<html>
    <head>
        <!-- vlastnosti stránky -->
    </head>
    <body>
        <!-- samotný obsah stránky -->
    </body>
</html>
  • HTML dokument má mít tuto strukturu.
  • Úplně první je tzv. doctype. Říká prohlížeči jaký typ HTML má čekat. Není potřeba se jím nyní zabývat, jen ho tam vždy mějte.
  • Všechno ostatní je uvnitř elementu html => je obaleno obaleno tagem <html>.
  • V hlavičce (<head>) jsou definovány vlastnosti pro celou stránku. Většinou „nejsou vidět“. O hlavičce později.
  • V těle stránky (<body>) je vlastní text stránky, obrázky atd. Většinou „je vidět“. Zde budeme nyní pracovat.
  • Všimněte si odsazení. A dbejte na něj ve svém kódu.
  • Všimněte si komentářů. Všimněte si jak tagy obalují jiné tagy.
  • Přestávka?