Pojď se s námi naučit vytvářet webové stránky. Online kurz Tě provede základy HTML a CSS.
Ukážeme si, co je HTML a CSS. Vyzkoušíme si tvorbu jednoduché textové webové stránky a na ní si vysvětlíme, jak vypadají a jak se zapisují základní HTML značky. Prohlédni si níže první video z celého online kurzu, který má 10 lekcí.
Co je HTML a CSS
HTML a CSS jsou základní stavební kameny webu. To, co vidíš na každé webové stránce nebo uvnitř webové aplikace je tvořeno právě pomocí nich.
HTML (Hypertext Markup Language) je značkovací jazyk, kterým vytváříme obsah a strukturu stránky. Říkáme, který kus textu je nadpis, co je obyčejný odstavec, že tento kousek textu je odkaz a kam vede a že zde bude na stránce obrázek.
CSS (Cascading Style Sheet) je stylovací jazyk, kterým HTML stránce dodáváme vzhled. Pomocí CSS nastavujeme, jak naše nadpisy vypadají, jakou mají barvu, jakým jsou písmem, jakou velikostí. Můžeme nastavit kolem bloku textu rámeček, přidat barvu pozadí a například i vytvářet efekty při najetí kurzorem myši. Přes CSS nastavíme třeba i to, že web má text ve dvou sloupcích nebo že obrázková galerie má fotky ve čtyřech řadách po pěti. CSS umí z obyčejné textové stránky udělat pastvu pro oči.
Jak vypadá HTML značka
<h1>Nadpis první úrovně</h1> <h2>Nadpis druhé úrovně</h2> <h3>Nadpis třetí úrovně</h3> <p>Odstavec textu.</p>
Většina HTML značek je takzvaně párových, tj. mají otevírací polovinu (např. <p>) a uzavírací polovinu (např. </p>). Mezi otevírací a uzavírací polovinou značky je text, který touto značkou chceme označit.
Existují i značky nepárové, které mají pouze první, otevírací polovinu, ale o těch si povíme až ve druhé lekci.
HTML značky jsou do sebe i vnořovat. Příkladem vnořených značek je například odrážkový seznam:
<ul> <li>První odrážka</li> <li>Druhá odrážka</li> <li>Třetí odrážka</li> </ul>
V kódu vidíme značku <ul> pro samotný seznam. Uvnitř jsou pak vnořené značky <li> pro jednotlivé položky seznamu.
Pokud jsou do sebe prvky takto vnořené, říkáme tomu vnějšímu rodič (parent) a těm vnořeným potomci (children). Značky <li> jsou k sobě navzájem sourozenci (sibling).
Editor HTML
HTML stránka je obyčejný prázdný soubor, do kterého píšeme prostý text, tedy text bez formátování. Pro psaní HTML stránek nepoužíváme Word a podobné programy, ale stáhneme si programátorský editor jako je např. VisualStudio Code.
Struktura HTML dokumentu
Editor spustíme, založíme nový HTML soubor a můžeme začít psát naše značky. Ale správný HTML dokument (říkáme, že je validní) má nějakou strukturu. Nelze jen začít psát značky tak, jak jsme si je ukázali nahoře.
Základní struktura dokumentu vypadá takto:
<!DOCTYPE html> <html lang="cs"> <head> <meta charset="UTF-8"> <title>Titulek stránky</title> </head> <body> <h1>Obsah stránky</h1> <p>Teprve uvnitř značek body píšeme náš kód.</p> </body> </html>
Není potřeba se děsit a učit se tuto strukturu nazpaměť. Časem si ji zapamatujete a všechny programátorské editory s podporou HTML vám jsou ji schopné vytvořit automaticky.
Na první řádku je <!DOCTYPE html>. tato značka nastavuje, o jaký typ dokumentu se jedná. V tomto případě to znamená, že dokument používá nejmodernější HTML verze 5.
Důležité je, že celý dokument je zabalený do značky <html>. Uvnitř této značky jsou pak dvě sekce. Hlavička stránky <head> a tělo stránky <body>.
Do hlavičky stránky píšeme metadata stránky, nastavení pro prohlížeč, jak má stránku zobrazovat.
Do těla stránky pak píšeme vlastní obsah stránky. Veškerý náš kód tedy budeme psát vždy mezi značky <body> a </body>.
Kontrolní otázky
Jak se jmenuje technologie pro tvorbu obsahu a struktury webové stránky?
- Pomocí čeho nastavujeme vzhled stránky?
- Jak vypadá základní značka pro nadpis a odstavec?
- Umíš vytvořit odrážkový seznam?
- Do jaké části HTML dokumentu píšeme náš kód, který bude tvořit obsah stránky.
Zaujal Tě online kurz? Pro postup do další lekce prosím vyplň následující registrační formulář. Děkujeme!
Projekt online vzdělávání byl realizován v rámci Stipendia Czechitas v projektu: „Ženy do IT“ (reg.č. CZ.03.1.51/0.0/0.0/16_061/0003268), který je financován z prostředků Evropského sociálního fondu prostřednictvím Operačního programu Zaměstnanost.
