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.

Projekt a podklady ke stažení

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.

Další HTML značky

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.

Komentáře

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.

     <!-- toto je HTML komentář -->
     <!--
     Komentář může být i přes několik řádků a lze s ním deaktivovat části kódu
     <p>Tento odstavec se na výsledné stránce neukáže.</p>
     -->

Titulek stránky

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.

     <head>
      <title>Titulek stránky</title>
     </head>

Odkaz

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.

     <a href="http://www.google.com">Odkaz na Google</a>

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).

     <a href="https://www.czechitas.cz" target="_blank">Odkaz do nové záložky nebo okna</a>

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:.

     <a href="mailto:muj@email.cz">Odkaz na email</a>

Zalomení řádku

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>.

     <p>
     Adéla Maříková<br>
     Pouliční 1<br>
     Městečko nad Řekou<br>
     123 45
     </p>

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.

Zdůraznění textu tučným písmem a kurzívou

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.

     Toto je <strong>tučný</strong> text.
     A toto je <em>kurzíva</em>, neboli skloněný text.

Kontrolní otázky

  • K čemu je komentář?
  • Jak nastavím titulek stránky? Do jaké části stránky musím značku napsat?
  • Co je to atribut značky a do jaké části značky se píše?
  • Jaká je značka pro odkaz a jaký má povinný atribut?
  • Jaká je značka pro zalomení řádku a na co ji zásadně nepoužíváme?
  • Jak zdůrazníme text pomocí tučného textu nebo kurzívy?

Zaujal Tě tento online kurz?

Přihlásit k newsletteru

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.