Päta stránky

Poslednou sekciou nášho webu je päta stránky. Päta stránky obsahuje základné kontaktné informácie a možnosť vrátiť sa späť na vrch webu.

Vytvorenie päty

Pätu stránky vytvoríme pomocou elementu <footer></footer>. 

<footer>
...
</footer>

Úloha

  1. Vytvor div element s triedou .container
  2. Priraď do ďalšieho elementu div triedu .row
  3. Vytvor HTML element s rozložením na 12 stĺpcov

Ľavá časť päty stránky

Ľavá časť päty stránky obsahuje naše kontaktné informácie a odkazy na sociálne siete.

Zoznam položiek vytvoríme pomocou <ul></ul>, ktorý v sebe obsahuje <li></li> tagy, s konkrétnymi položkami.

<ul>
  <li>&copy; Svetlana Margetová - 2016 </li>
  <li>[email protected]</li>
  <li>Tu bude facebook</li>
  <li>Tu bude twitter</li>
  <li>Tu bude linkedin</li>
</ul>

Zarovnanie položiek zoznamu do riadku

Keď si otvoríš web v prehliadači, vidíš, že položky sú zarovnané pod sebou. Aby sme ich umiestnili do jedného riadku pridáme boostrapovú triedu .list-inline k elementu <ul></ul>.

<ul class="list-inline">
  <li>&copy; Svetlana Margetová - 2016 </li>
  <li>[email protected]</li>
  <li>Tu bude facebook</li>
  <li>Tu bude twitter</li>
  <li>Tu bude linkedin</li>
</ul>

Zarovnanie päty ako celku doľava

Tak ako sme na začiatku tutoriálu používali na zarovanenie menu stránky napravo alebo naľavo triedy .navbar-right alebo .navbar-left, môžeme použiť na zarovnanie päty doľava (a nielen tej) triedu .pull-left na úrovni elemenentu <ul></ul>.

<ul class="list-inline pull-left">
  <li>&copy; Svetlana Margetová  - 2016</li>
  <li>[email protected]</li>
  <li>Tu bude facebook</li>
  <li>Tu bude twitter</li>
  <li>Tu bude linkedin</li>
</ul>

Pridanie ikoniek pre sociálne siete

Poďme spolu vložiť napríklad ikonku pre sociálnu sieť Facebook.

  1. Pôjdeme na stránku Font-awesome
  2. Do vyhľadávača zadáme Facebook
  3. Vyberieme si jednu z Facebook ikoniek, ktorá sa nám páči
  4. Skopírujeme vygenerovaný kód <i class="fa fa-facebook-official" aria-hidden="true"></i>
  5. Otvoríme súbor index.html
  6. Do päty v <li></li> elemente nahradíme slovo "Tu bude facebook" nakopírovaným kódom
  7. Súbor index.html uložíme
  8. Pozri si ako vyzerá tvoj web v prehliadači
<ul class="list-inline pull-left">
  <li>&copy; Svetlana Margetová - 2016</li>
  <li>[email protected]</li>
  <li><i class="fa fa-facebook-official" aria-hidden="true"></i></li>
  <li>Tu bude twitter</li>
  <li>Tu bude linkedin</li>
</ul>

Úloha

  1. Zopakuj rovnaký postup pre ostatné sociálne siete, ktoré chceš na webstránke zobraziť
<ul class="list-inline pull-left">
  <li>&copy; Svetlana Margetová - 2016</li>
  <li>[email protected]</li>
  <li><i class="fa fa-facebook-official" aria-hidden="true"></i></li>
  <li><i class="fa fa-twitter-square" aria-hidden="true"></i></li>
  <li><i class="fa fa-linkedin-square" aria-hidden="true"></i></li>
</ul>

Pridanie odkazov

Aby nás mohol používateľ kontaktovať alebo otvoriť našu sociálnu sieť musíme pridať ešte odkazy. Na odkazy používateme <a></a> tag.

<a href="url adresa odkazu" target="_blank">Text odkazu</a>

Úloha

  1. Pridaj odkazy na všetky sociálne siete, ktoré máš v päte stránky
<ul class="list-inline pull-left">
  <li>&copy; Svetlana Margetová - 2016</li>
  <li>[email protected]</li>
  <li><a href="https://www.facebook.com/sveta.margetova" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
  </li>
  <li><a href="https://twitter.com/Mandragora258" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
  </li>
  <li><a href="https://cz.linkedin.com/in/msvetlana" target="_blank"<i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
  </li>
</ul>

Odkaz na email

Pridanie odkazu na email sa robí podobným spôsobom, iba namiesto url adresy zadáme do href elementu mailto:

<a href="mailto:tvoj email">Email</a>

Úloha

  1. Pridaj do päty stránky odkaz na tvoj email
<ul class="list-inline pull-left">
  <li>&copy; Svetlana Margetová - 2016</li>
  <li><a href="mailto:[email protected]">[email protected]</a>
  </li>
  <li><a href="https://www.facebook.com/sveta.margetova" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
  </li>
  <li><a href="https://twitter.com/Mandragora258" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
  </li>
  <li><a href="https://cz.linkedin.com/in/msvetlana" target="_blank"<i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
  </li>
</ul>

Pravá časť päty stránky

Napravo sa nachádza odkaz, ktorý vráti používateľa späť na vrch stránky. Keďže chceme odkaz umiestniť napravo použijeme triedu .pull-right.

<p class="pull-right">
  <a href="#">Späť navrch</a>
</p>

Päta stránky

Finálne náš kód pre pätu stránky vyzerá nasledovne:

<footer class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <ul class="list-inline pull-left">
            <li>&copy; Svetlana Margetová - 2016</li>
            <li><a href="mailto:[email protected]">[email protected]</a></li>
            <li><a href="https://www.facebook.com/sveta.margetova" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
            <li><a href="https://twitter.com/Mandragora258" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
            <li><a href="https://cz.linkedin.com/in/msvetlana" target="_blank"<i class="fa fa-linkedin-square" aria-hidden="true"></i></a></li>
          </ul>
          <p class="pull-right"><a href="#">Späť navrch</a></p>
    </div>
  </div>
</footer>