Základná štruktúra webovej stránky

Keď už vieš, ako by mal tvoj web vyzerať, môžeš sa pustiť do tvorby HTML štruktúry, kde využijeme doteraz získané vedomosti a poznatky.

V praxi je dobré webstránky si rozdeliť na čo najmenšie súvisiace bloky, ktoré programátori často zvyknú označovať ako wrapper.

Úloha

  1. Rozdeľ webstránku z wireframu na jednotlivé sekcie

Túto úlohu budeme riešiť spoločne na hodine, ak však čítaš tutoriál sám/sama doma, rozdelili sme web nasledovne.

  1. Menu webstránky
  2. Slider webstránky
  3. Sekcia "Čomu sa venujem"
  4. Sekcia "Pridaj sa"
  5. Sekcia "Aktualita týždňa"
  6. Kontaktný formulár
  7. Päta webstránky

Vytvorenie HTML DOM štruktúry

Stránku sme si rozdelili na jednotlivé sekcie. Teraz je potrebné sekcie naprogramovať pomocou HTML. Konečne ideme na to :).

  1. Naviguj sa do priečinka htmlkurz2016, ak sa v ňom práve nenachádzaš.
  2. V editore (Atom alebo Sublime Text 3) si otvor celý priečinok htmlkurz2016. (Naviguj sa do File -> Open -> Vyber celý priečinok htmlkurz2016 a potvrď Open).
  3. Otvor v editore súbor index.html.

HTML5 doctype

V súbore index.html začneme písať náš prvý kód. Každá webstránka obsahuje na začiatok definíciu HTML5 doctype, čím dáme vedieť prehliadaču, že vytvárame HTML5 webovú stránku.

HTML5 doctype definujeme pomocou <!DOCTYPE html>.

<!DOCTYPE html>

Jazyk webstránky

Jazyk webstránky definujeme na najvyššej úrovni v tagu html lang a následne označenie jazyka (pre český jazyk vyberieme cs).

<html lang="cs">
....
</html>

Vytvorenie hlavičky stránky

Hlavička stránky sa definuje v tagu <head></head>. Do hlavičky dávame informácie o autorovi webstránky, názov webstránky, odkazy na CSS alebo JavaScript súbory, písmo a prípadne iné potrebné informácie.

V našom príklade si vytvor hlavičku, ktorá bude obsahovať:

  1. Názov webstránky pomocou tagu <title></title>.
  2. Definuj znakovú sadu utf-8 (aby nám fungovali aj naše české a slovenské znaky) pomocou tagu <meta charset="utf-8">.
  3. Definuj responzívnosť stránky pomocou tagu <meta name="viewport" content="width=device-width, initial-scale=1">. Ak daný tag nepridáme, stránka nebude optimalizované pre tabletové a mobilné zariadenia.

Ako vyzerá hlavička našej webstránky v tejto chvíli?

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tvoje meno</title>
</head>

Vloženie Bootstrapu do webstránky

Aby sme mohli využívať Twitter Bootstrap framework je potrebné ho vložiť do nášho index.html súboru. Existuje viacero spôsobov, ako to urobiť, ktoré sú detailne opísané na oficiánych stránkach.

  1. Do hlavičky o riadok nižšie pridaj nasledujúci kód.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Týmto sme načítali CSS štýl pre Twitter Bootstrap a môžeme s ním na našom webe veselo pracovať :)

Náš index.html súbor by mal v tejto chvíli vyzerať takto.

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sveťa Margetová</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  </head>
 </html>

Vytvorenie tela stránky

Telo a teda celý viditeľný obsah webovej stránky dáme do HTML elementu medzi tagy <body></body>.

Vloženie Bootstrapu do tela stránky

Keďže Twitter Bootstrap aj webstránky samy o sebe potrebujú pre svoju funkcionalitu a dynamickosť javascript (ak v tejto chvíli nevieš, čo to je, netráp sa tým). Aby nám náš web fungoval pred finálny </body> tag nakopíruj 2 súbory.

jQuery

jQuery je potrebnou súčasťou každého webu (takmer každého) a v našom prípade ho potrebujeme pre podporu funkcionality Twitter Bootstrapu. jQuery je možné stiahnuť z oficiálnej webstránky alebo z Google knižnice, z ktorej ho získame teraz my.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

Twitter Bootstrap javascript

Javascript je dostupný na rovnakej stránke ako CSS súbor Twitter Bootstrapu.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Ak v tejto chvíli vyzerá tvoj index.html súbor rovnako ako nižšie, môžeš pokračovať na nasledujúcu lekciu.

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sveťa Margetová</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">
    </script>
  </body>
 </html>