Vítej v druhé lekci online kurzu na HTML a CSS.
Ve druhé lekci začneme pracovat na projektu, kterému se budeme věnovat po zbytek kurzu. Jde o jednoduchý, ale na pohled hezký jednostránkový web "Adéla na cestách", na kterém si postupně představíme všechny principy. V této lekci vytvoříme prázdnou stránku, kam přidáme celý obsah budoucího webu, a naučíme se nové HTML značky.
V dnešní lekci začneme pracovat na projektu, který budeme vylepšovat po celý zbytek kurzu. Postupně se naučíme vše potřebné a na konci budeme mít hezkou webovou stránku, kterou si budete moci přizpůsobit pro svoje potřeby.
Mám pro vás připravené obrázky a text, který budeme v projektu používat. Prosím stáhněte si podklady pro dnešní lekci z adresy:
https://czchts.cz/htmlcss02
Objeví se rozhraní Google Disku, kde bude buď velké modré tlačítko pro stažení nebo vpravo nahoře ikonka Stáhnout (ikona se šipkou dolů). Podklady si stáhni, rozbal do složky u sebe na počítači a dál postupuj podle videa.
V první lekci jsme si ukázali pouze úplně základní značky pro nadpis, odstavec a seznam. Dnes k nim přidáme další značky.
Nejde přímo o značku jako takovou, ale komentář může být velmi užitečný. Používáme v případě, že si chceme do kódu udělat vlastní poznámku. Komentář můžeme také použít pro dočasné "vypnutí" části kódu. Vše, co je uvnitř komentáře totiž prohlížeč ignoruje.
Značka <title> je se na rozdíl od ostatních značek nepíše do sekce <body>, ale do sekce <head> stránky. Pomocí značky <title> nastavíme titulek stránky, který se ukáže v oušku záložky prohlížeče, na titulkové liště ve Windows, použije se při vytváření oblíbeného odkazu v prohlížeči, ale hlavně také jako název stránky ve výsledcích vyhledávání např. na Googlu.
Slouží pro vytváření odkazů vedoucích na další stránky. Může se jednat o stránku v rámci našeho webu nebo na úplně cizí stránku kdekoliv v internetu.
U odkazu (značka <a>) poprvé vidíme něco, čemu se říká atribut. Jde o jakýsi "parametr" značky, který pro značku poskytuje doplňkové informace. V případě odkazu to dává perfektní smysl - nechceme z textu udělat jenom odkaz, ale potřebujeme také říci, kam ten odkaz má vést. U odkazu tedy do atributu href uvedeme cílovou adresu odkazu. Po kliknutí na odkaz prohlížeč přesměruje zákazníka právě tam.
Atributy se vždy uvádí do otevírací poloviny značky a vždy jsou ve formátu atribut="hodnota". Hodnota atributu je vždy v uvozovkách.
Konkrétně odkaz může mít i další atributy. Například když do atributu target dáme hodnotu "_blank", bude to znamenat, že se cílová stránka v prohlížeči otevře v nové záložce (nebo v novém okně, pokud prohlížeč záložky nepodporuje).
Můžeme vytvářet i odkazy na e-mailové adresy. Po kliknutí na takový odkaz se otevře poštovní program, vytvoří se v něm nová zpráva a do pole komu se předepíše e-mailová adresa uvedená v našem odkazu. Formát odkazu je stejný, jen do atributu href musíme uvést e-mailovou adresu uvozenou slovíčkem mailto:.
Text na webové stránce se standardně zalamuje na konci řádku. Někdy ale potřebujeme text zalomit předčasně nebo na přesně daném místě. Představme si například, že chceme na stránce napsat poštovní adresu a každý údaj chceme na samostatném řádku, stejně jako bychom to napsali na obálku dopisu. Pro zalomení řádku použijeme nepárovou značku <br>.
Značky <br> používáme pouze pro zalomení řádku uvnitř odstavce. Nepoužíváme je jako nástroj pro odsazení dvou bloků textu od sebe.
Pro zdůraznění části textu (např. slova ve větě) můžeme použít značky <strong> a <em>. Obě značky znamenají zdůrazněný text, ale je mezi nimi drobný rozdíl.
Značka <strong> dělá označený text tučný a používá se pro silný důraz. Používáme např. slova, která jsou ve větě důležitá.
Značka <em> změní označený kus textu na kurzívu (skloněné písmo). Většinou se používá ve chvíli, kdybychom např. při čtení věty nahlas chtěli dané slovo zdůraznit jinou intonací hlasu.
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.
