HTML a CSS po lopate

26/02/2019 #how-to #po-lopate #html #frontend

V tejto sérií článkov sa zoznámime so základmi HTML a CSS. Možno ste na tento článok narazili náhodou a chcete vôbec vedieť načo nám sú tieto srandy?

Predpokladám, že ste videli tie akčné “hackerské” scény s filmov, kde sa niekto niekam nabúrava a pred sebou má nejaký tvrdý kód, zvyčajne ide len nejaký HTML kód, a aby toho nebolo málo, HTML nie je ani programovací jazyk…

Tak čo to vlastne potom je?

HTML je značkovací jazyk, teda obsahuje nejaké značky po anglicky, tagy. Tieto tagy môžu byť do seba kľudne zanorené a naberajú typickú štruktúru pre HTML. Hlavička a telo, (nie neviem, kde nechali krk, ¯\_(ツ)_/¯). Tento značkovací jazyk vedia, čítať webové prehliadače Chrome, Firefox, … Teda, ak chcete robiť webové stránky HTML a CSS jednoducho nevyhnete.

Jednotlivé časti HTML sú dôležité, napríklad hlavička obsahuje tie najpodstatnešie informácie, zvyčajne nadpis, značky pre sociálne siete alebo aj načítania ostatných súborov ako napríklad: CSS. Potom máme telo, kde patrí obsah stránky a väčšinou na konci tela aj načítanie scriptov. Poďme sa pozrieť na ukážku kódu HTML:

<!doctype html>
<html lang="sk">
  <head>
    <meta charset="utf-8">

    <!-- Toto je spracovanie pre telefóny -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Vhodné pre SEO, optimalizácia pre vyhľadávače -->
    <meta name="description" content="Nástroj na písanie shopping listu">
    <meta name="keywords" content="todo, shopping list, to-do">
    <meta name="author" content="Jožko Mrkvička">

    <!-- Komentarik -->
    <link rel="stylesheet" href="/assets/css/main.css">

    <title>Todo list!</title>
  </head>
  <body>
    <p class="text-muted">Textik</p>
    <a href="https://www.google.sk">Textik</a>
  </body>
</html>

Skúste si uložiť tento kód cez textový editor ako index.html. Následne ho otvorte v prehliadači ideálne v Chrome. A stlačte klávesu F12 alebo dajte pravý klik na stránku a potom kliknite na Inspect/Preskúmať a nebojte sa pohrať s tým čo uvidíte.

Každý tag má nejakú svoju definíciu, aké atribúty môže poberať a aké má ukončenie.

Ukončenia

Poznáme 2 typy ukončenia, to aké má daný tag ukončenie vám väčšinou napovie IDE, väčšina je prvého typu, je pár, ktoré sa končia bez kamaráta, ktorý má </.

<html></html>
<hr>

Atribúty

Značky majú svoje atribúty, kde napríklad môžete povedať, aby vstup akceptoval len čísla, alebo toto tlačítko má odoslať formulár a podobne. Medzi tie najviac používané, ktoré sa dajú aplikovať na všetky značky patria id, class.

Všeobecne platí: značiek s rovnakou triedou môže byť viac, ale rovnaké id nemôžu mať, príklad:

<p class="text-muted">Textik</p>
<p class="text-muted">Textik</p>
<p class="text-muted" id="important-paragraph">Som dôležitý</p>

html

Na prvom riadku hovorím, že chcem použiť najnovšiu definíciu tohto značkovacieho jazyka, a to HTML5. Potom začínam definovať hlavnú značku html, zvyčajne tam nájdete definíciu jazyka alebo tried.

html > head

Tu si môžeme všimnúť meta tagy, ktoré pomáhajú vyhľadávačom, sociálnym sieťam a podobne.

html > body

A toto je práve tá časť, kde sa môžete vyriadiť, tu ide váš obsah, všetko čo vidí užívateľ

Selectory

Všimli ste si ako som označoval nadpisy? html > body, to sú selectory, pretože potrebujeme identifikovať kliknutie na niektoré elementy alebo určiť ako majú vyzerať. Napríklad pre výber elementu s určitým id použijeme # a pre triedy .

Aby sme mohli pokračovať ďalej odporúčam pohrať sa na stránke: https://flukeout.github.io/

Nabudúce si prejdeme fasádu alebo lepšie povedané make-up pre HTML, teda CSS, prehliadače majú základné štýly pre každý element, no nechceme, aby naša stránka vyzerala ako z 2005 :)