Čo sú HTML, CSS a JavaScript a prečo by ste mali poznať aspoň základy
📝Obsah
Základy fungovania webu
Toto nie je stránka pre vývojárov, ale aj keď chcete mať len blog, kde píšete články, je dobré vedieť, ako vaša stránka vlastne funguje. Nie je potrebné poznať každý detail alebo vedieť, čo to či ono v zdrojovom kóde znamená, ale mať aspoň nejakú predstavu o tom, z akých častí sa webstránka skladá, sa hodí pri ladení obsahu a vlastne pri celej SEO optimalizácii.
Sám nie som odborník na HTML, CSS ani JavaScript, ale aspoň základné znalosti mi umožňujú pomerne ľahko riešiť základné problémy, ktoré sa občas vyskytnú, bez toho, aby som musel niekoho hľadať alebo sa pýtať na fórach. Ak dokážete na niektoré veci na webe prísť sami, všetko je zvyčajne oveľa rýchlejšie, ako keby ste to riešili prostredníctvom niekoho iného, a hlavne môžete oveľa ľahšie testovať a ladiť, čo naozaj funguje.
Ako som už povedal, nie som odborník, takže aj niektoré moje vysvetlenia budú značne zjednodušené na účely pochopenia základov, ale na účely vytvorenia blogu a pochopenia, ako všetko funguje z trochu technickejšieho hľadiska, si myslím, že tento článok bude stačiť a predstaví vám, ako funguje kombinácia HTML/CSS/JS.
Ak sa zaujímate o tieto technickejšie veci alebo o samotný vývoj webových stránok, nájdete tu množstvo materiálov a príkladov. Osobne mám najradšej w3schools.com, kde je všetko s príkladmi, ktoré môžeme okamžite upraviť a vidieť výsledok našich úprav. Jediným menším problémom je, že stránka je kompletne v angličtine.
Ako webová stránka v skutočnosti vyzerá
Každá webová stránka, ktorú navštívite, je vytvorená pomocou série pokynov. Váš webový prehliadač (Chrome, Firefox, Safari atď.) prevezme tieto pokyny a preloží ich do podoby, ktorú následne vidíme na obrazovke pri otvorení webovej stránky. Na zobrazenej stránke potom môžeme čítať, prezerať, prípadne s ňou interagovať alebo do nej zadávať údaje.
Webová stránka bez prehliadača je však len textový súbor (alebo rad textových súborov). Práve prehliadač musí tento súbor správne interpretovať a zobraziť, aby bol pre používateľa prívetivý a stránka bola použiteľná. Pozrime sa, aké typy týchto textových súborov môžeme „odovzdať“ prehliadaču, aby ich interpretoval. Základné typy sú len HTML, CSS a JavaScript (JS), kde
- Jazyk HTML poskytuje základnú štruktúru stránky, ktorá je rozšírená a upravená ďalšími technológiami, ako sú CSS a JavaScript.
- CSS sa používa na úpravu vzhľadu jednotlivých prvkov, formátovania alebo umiestnenia prvkov na stránke
- JavaScript sa používa na ovládanie správania rôznych prvkov, ale aj na manipuláciu s HTML alebo CSS
HTML a CSS v skutočnosti nie sú technicky programovacie jazyky (hoci mnohí ľudia používajú výrazy ako „programovať v HTML“). HTML a CSS sú informácie o štruktúre a štýle stránky. JavaScript je naopak programovací jazyk, ale na jeho pochopenie potrebujete najprv poznať HTML a CSS.
HTML
Jazyk HTML je základom každej webovej stránky bez ohľadu na zložitosť stránky alebo použitú technológiu. Je to akýsi východiskový bod, bez ktorého sa jednoducho nezaobídete, najmä pokiaľ ide o samotný vývoj webových stránok. Na účely blogovania je však tiež veľmi dobré vedieť, ako HTML funguje a prečo by ste ho mali používať správne
Ako funguje jazyk HTML?
HTML je skratka pre HyperText Markup Language, značkovací jazyk, v ktorom sú jednotlivé stránky prepojené hypertextovými odkazmi (zvyčajne ide o odkazy v texte alebo obrázky, na ktoré môžeme kliknúť tradičným spôsobom, ale aj odkazy na umiestnenie prvkov alebo iných dokumentov, ktoré sa majú na stránke zobraziť alebo načítať).
„Značkovací jazyk“ znamená, že namiesto programovacieho jazyka na vykonávanie funkcií sa v jazyku HTML používajú značky na identifikáciu rôznych typov prvkov na webe. Tieto prvky slúžia na rôzne účely a práve značky hovoria o tom, čo je prvok a aká je jeho štruktúra. Môže to byť odsek, nadpis, obrázok, tabuľka atď.
Značkovací jazyk používa na označovanie kód, v tomto prípade konkrétne značky HTML, tagy a niekedy aj prvky.
Každá webová stránka sa skladá zo série týchto značiek HTML, ktoré označujú rôzne typy obsahu na stránke. Každý typ obsahu na stránke je „zabalený“ do značiek HTML.
Každý odsek v tomto článku je „zabalený“ do značky <p>
ktorý označuje odsek (p ako paragraph). Podobne má každý nadpis, obrázok a všetko ostatné svoje vlastné značky.
Po otvorení značky sa predpokladá, že všetok nasledujúci obsah je súčasťou tejto značky, až kým sa nezatvorí. Tieto úvodné a záverečné značky sa nazývajú párové značky. Na konci odseku by som vložil značku na ukončenie odseku </p>
. Všimnite si, že uzatváracie značky vyzerajú úplne rovnako ako otváracie značky s tým rozdielom, že uzatváracia značka má hneď za zátvorkou lomku, ktorá označuje, že je uzatváracia:
Príklady párových značiek:
<h1>Toto je nadpis<h1>
<p>Toto je odsek</p>
Značky môžu byť aj vnorené, takže v rámci jednej značky môžu byť ďalšie značky. Všimnite si, že ak je značka vnorená do inej značky, musí byť uzavretá aj v tejto značke:
Príklad vnorených značiek:
<p>Toto je normálny text. <strong>Toto je tučný text v rámci jedného odseku.</strong> Toto je normálny text.</p>
Takto by potom prehliadač zobrazil túto značku, keby sme ju umiestnili do zdrojového kódu:
Toto je normálny text. Toto je tučný text v rámci jedného odseku. Toto je normálny text.
Nesprávne vnorenie tagov – tag <strong> je otvorený v rámci tagu <p>, ale je uzavretý mimo tag <p>:<p>Toto je normálny text. <strong>Toto je tučný text v rámci toho istého odseku.</p></strong>
Niektoré značky nepotrebujú uzavretie, pretože v nich nie je žiadny obsah – tieto značky sa nazývajú nespárované značky. Môže ísť o značky <br> (lámanie riadkov), <img src=“obrazek.jpg“> (zobrazenie obrázka zo zdroja v definovanej adrese URL).
Prehliadače často dokážu spracovať aj značky, ktoré by mali byť zhodné, ale nie sú. Napríklad v prípade odseku pochopia z kontextu, kde má byť koniec odseku, a potom správne vykreslia stránku. Ak však má byť značka uzavretá, odporúčam ju jednoducho uzavrieť, aj keď sa tým nezmení vykreslená stránka.
Pomocou jazyka HTML môžete pridávať nadpisy, odseky, formátovať časti textu, ovládať zalomenie riadkov, vytvárať zoznamy, špeciálne znaky, vkladať obrázky, vytvárať odkazy, vytvárať tabuľky, ovládať niektoré štýly a mnoho ďalšieho.
Samozrejme, o správne umiestnenie značiek sa zvyčajne starajú redaktori v rámci nášho redakčného systému. Tieto editory pracujú podobne ako napríklad tradičný Word, ale text alebo obsah správne obalia značkami HTML. Ak teda chceme vytvoriť nový odsek, nemusíme ručne zatvárať značku odseku a vytvárať nový odsek, stačí stlačiť kláves Enter a tento nový odsek sa vytvorí sám. Takže vytvorenie kódu HTML napríklad článku je v podstate rovnaké ako vytvorenie dokumentu v textovom editore na počítači, alebo sa nemusíme starať o ručné zadávanie značiek, redakčné systémy to urobia za nás.
HTML a SEO
Pokiaľ ide o optimalizáciu pre vyhľadávače (SEO), správny kód HTML je absolútne nevyhnutný. Kód HTML je to, čo vyhľadávače čítajú predovšetkým, keď prídu na naše webové stránky. Je potrebné, aby použité značky boli správne a aby vyhľadávače pochopili štruktúru našej webovej stránky. Preto je správne používanie odsekov, nadpisov, obrázkov, tabuliek a všetkého ostatného kľúčom k tomu, aby bola naša stránka pre Google, Bing List a ďalšie služby atraktívna. Vyhľadávače potom pochopia, ktorá časť obsahu je dôležitá, aký je nadpis a aká je jeho úroveň, že časť obsahu je napríklad tabuľka atď.
Vyhľadávače dokonca dokážu stránky vykresliť a zobraziť, ako by vyzerali v prehliadači, vyhodnotiť kontrast farieb, blízkosť prvkov a celkový dizajn, ale stále platí, že ak chceme, aby sa naše stránky zobrazovali vo výsledkoch vyhľadávania vysoko, mali by sme dbať na správny a čitateľný kód HTML.
Technicky môžeme vytvoriť aj vlastné značky, ktoré prehliadače a vyhľadávače nepoznajú, ale práve preto to neodporúčam. Mali by sme sa držať tých značiek, ktoré sú definované a budú správne interpretované. Existuje dostatok definovaných značiek na ľubovoľné štruktúrovanie textu, takže nie je potrebné vytvárať nové značky.
CSS
CSS je skratka pre kaskádové štýly. Tieto štýly určujú, ako majú prvky na danej stránke vyzerať.
HTML vs. CSS
Zatiaľ čo HTML tvorí základnú štruktúru webovej stránky, CSS dodáva celej webovej stránke štýl a vzhľad. Farby, písma, tlačidlá a mnohé ďalšie sú zásluhou CSS na webe. Ak chcete zmeniť veľkosť písma, vytvoriť pekné tlačidlo s odkazom alebo niečo podobné, CSS je presne to, čo budete potrebovať.
Jednoducho povedané, CSS je zoznam pravidiel, ktoré môžu priradiť rôzne vlastnosti značkám HTML, a to buď konkrétnym značkám, viacerým značkám, celému dokumentu alebo viacerým dokumentom.
Ak by sme sa pozreli na zdrojový kód viacerých webových stránok a preskúmali články, zistili by sme, že kódy HTML sú takmer rovnaké a používajú rovnaké značky. Nadpisy, odseky, obrázky a všetko ostatné je v kóde HTML v podstate rovnaké, ale veľkosť písma, výber písma alebo farby sa na jednotlivých stránkach líšia. Je to vďaka CSS, zoznamu pravidiel, ktoré určujú, ako má obsah skutočne vyzerať. Tu si vyberáme, aké písmo sa má použiť, akú má mať veľkosť, alebo dokonca medzery medzi riadkami a odsekmi.
CSS používame aj na určenie umiestnenia prvku, buď v rámci dokumentu ako celku, alebo vzhľadom na iné prvky. CSS je veľmi mocný nástroj a dnes umožňuje základné štylizovanie aj pokročilejšie zobrazovanie obsahu vrátane rôznych animácií. Môžete si tiež vybrať rôzne štýly pre rôzne veľkosti obrazovky a asi milión ďalších vecí.
Ako vyzerajú kaskádové štýly
Zápis štýlov je pomerne jednoduchý, keď pod výberom pojmu vyberieme prvok HTML, ktorý chceme upraviť, a potom medzi zložené zátvorky napíšeme vlastnosti, t. j. čo chceme upraviť (napríklad, že chceme upraviť farbu písma) a hodnoty (napríklad, že písmo má byť zelené):
selektor {
vlastnosť: hodnota;
vlastnosť2: hodnota2;
}
Ak chcete upraviť napríklad farbu a písmo všetkých značiek
p {
font-family: Arial;
color: red;
}
Táto položka upraví písmo všetkých odsekov na Arial a zmení farbu na červenú.
Selektory CSS
Nebudeme tu zachádzať do prílišných podrobností, pretože o selektoroch existujú podrobnejšie články (opäť uvediem odkaz na w3schools.com). Selektor je spôsob, akým označujeme prvok alebo viacero prvkov na stránke. Napríklad v príklade vyššie sme vybrali všetky značky
K značkám v kóde HTML môžeme tiež pridávať rôzne atribúty, ktoré sa potom používajú na ich odlíšenie od ostatného obsahu a ktoré potom používame napríklad na štylizáciu v CSS. Napríklad:
<p>Toto je bežný odsek</p>
<p class="cervena">Toto je odsek s class cervena</p>
Ak by sme chceli upraviť úplne všetky odseky, použili by sme vyššie uvedený príklad. Ale čo ak chceme upraviť len niektoré odseky? Tu budú hrať úlohu rôzne atribúty, v tomto prípade atribút class s určitou hodnotou, v tomto prípade s hodnotou „cervena“.
V CSS potom môžeme túto triedu zachytiť a naštýlovať len tie prvky, ktoré majú tento atribút. V CSS potom tento atribút označíme ako selektor s bodkou na začiatku, aby sme naznačili, že zachytávame triedu:
.cervena {
color: red;
}
Selektory môžeme tiež rôznymi spôsobmi prepojiť, vyberať prvky, ktoré sú vnorené v iných prvkoch, a používať rôzne atribúty s rôznymi zápismi selektora. Medzi základné (a najčastejšie používané) selektory patria:
Selektor | Príklad | Popis |
---|---|---|
#id | #nejakeid | Element s atribútom id=“nekakeid“ |
.class | .nejakaclass | Všetky elementy s atribútom class=“nejakaclass“ |
element.class | p.nejakaclass | Iba elementy <p> s class=“nejakaclass“ |
element | p | Všetky elementy <p> |
element, element,.. | h1, p | Všetky elementy <h1> a <p> |
Nakoniecje kombinácia HTML a CSS takouto súhrou. V kóde HTML by sme mali prvky označovať tak, aby sme ich mohli v CSS jednoducho odoznačiť bez zložitých zložených selektorov (tabuľka vyššie je naozaj základná, existuje pomerne veľa rôznych selektorov a spôsobov, ako ich možno skladať a čo znamenajú, ale to nie je cieľom tohto článku)
Ak máte možnosť upravovať kód HTML stránky, je zvyčajne dobré označiť prvky, ktoré chcete naštýlovať, triedou a potom môžete túto triedu jednoducho naštýlovať podľa potreby.
Ak táto možnosť úprav HTML nie je k dispozícii napríklad pri práci vo WordPress, musíte využiť vopred pripravené atribúty, ktoré používa vaša šablóna, čo bohužiaľ často znamená aj použitie len zložených selektorov alebo hľadanie už napísaných štýlov a kopírovanie selektorov z nich.
Veľmi pekný návod v angličtine o tom, čo sú selektory, ako ich používať a ako si ich zostaviť, ako aj praktické príklady nájdete v tomto videu na YouTube (a odporúčam sledovať kanál, ak sa zaujímate o JavaScript alebo programovanie CSS):
Ako nájsť použité selektory pomocou webového prehliadača
V tomto prípade veľmi pomáhajú priamo prehliadače. Napríklad v prehliadači Google Chrome (a ostatné prehliadače sú veľmi podobné) kliknete pravým tlačidlom myši na prvok na webovej stránke a vyberiete možnosť „Preskúmať“.
Otvorí sa panel pre vývojárov vpravo. V hornej časti vidíme zdrojový kód, kde sa môžeme prekliknúť na jednotlivé prvky stránky. V spodnej časti sa potom zobrazia štýly, ktoré sa na prvok použijú, vrátane selektora. Takto môžeme nájsť štýly použité na jednotlivé prvky a v prípade potreby skopírovať selektory a použiť ich na vlastné štylizovanie:
Kam písať štýly
V podstate máme 3 možnosti:
1) Inline štýly – štýly zapisujeme priamo do prvkov. To je užitočné, ak chceme upraviť len jeden prvok a nechceme vytvárať novú triedu. Ide o veľmi rýchly spôsob zápisu štýlu, ktorý má zároveň vysokú špecifickosť (pozri článok nižšie). Inline štýl môže vyzerať napríklad takto:
<p style="color:red; font-size:20px;">Barva textu je červená a velikost písma je 20px</p>
Inline štýly sú v podstate užitočné len vtedy, keď potrebujete upraviť štýly prvku na jednej stránke. Môže byť užitočná, keď potrebujete upraviť napríklad jeden prvok v článku a nepredpokladáte, že to budete musieť robiť často. Inline štýly majú tiež výhodu nadradenej špecifickosti, kde jednoducho platí to, čo napíšete priamo do daného prvku, pokiaľ to niekde inde ešte viac nenadradíte pomocou !important.
2) Interné štýly – štýly zapisujete priamo do kódu HTML medzi značky . Túto značku možno umiestniť v podstate kdekoľvek v dokumente, a ak je na to dôvod, možno ju umiestniť viackrát. Selektory, vlastnosti a hodnoty zapisujeme len medzi značky. Napríklad:
<style>
p {
color:red;
}
h1 {
font-size: 25px;
}
</style>
3) Externé štýly (samostatný súbor ) – štýly zapisujeme rovnakým spôsobom ako medzi tag
<link rel="stylesheet" href="mojestyly.css">
Načítanie štýlov zo samostatného súboru je pravdepodobne najlepším riešením, keď sa štýly najlepšie spravujú z jedného miesta bez toho, aby ste ich museli upravovať na každej stránke
Všetky tieto tri možnosti štýlov načítania možno celkom voľne kombinovať. Niektoré štýly môžeme zapísať priamo do HTML a pokojne ich rozdeliť medzi viacero značiek , niektoré štýly môžeme načítať z jedného alebo viacerých externých súborov a iné môžeme zapísať inline priamo do prvkov. Prehliadač číta a používa všetky tieto štýly. Ak sa niektoré štýly prekrývajú, musíme sa zaoberať špecifickosťou.
Špecifickosť CSS
Často sa stáva, že sa niektoré štýly prekrývajú. Ak označíme všetky odseky čiernou farbou, ale do odseku pridáme triedu a potom ho zafarbíme na červeno, akú farbu bude mať odsek s pridanou triedou a naštýlovaný? Logicky by sme očakávali červenú a mali by sme pravdu, ale prečo?
Veľmi dôležitým faktorom je tzv. špecifickosť, ktorá určuje, aký štýl prehliadač použije vo výsledku, ak sa niektoré štýly prekrývajú. Čím špecifickejší selektor napíšeme, tým vyššiu váhu má tento štýl, a preto bude mať prednosť pred štýlmi s nižšou špecifickosťou.
Poradie špecifickosti podľa selektorov
Poradie atribútov je nasledovné, pričom čím nižšia je špecifickosť, tým vyššia je váha:
- Typ prvku a pseudoelement– napríklad selektor p alebo ::before
- Selektor triedy, atribútov a pseudotriedy – napríklad .nejakaclass – označuje všetky prvky s danou triedou, [type=“radio“]) a pseudotrieda napríklad :hover)
- Selektor ID – napríklad #nejakeid – označuje jeden element s atribútom id – pozor, hodnota daného ID môže byť na celej stránke len raz
V praxi sa budeme zaoberať najmä špecifickosťou pre typ prvku, triedu a ID. Prvky tiež dedia štýly z nadradených prvkov, v ktorých sú vnorené. To znamená, že ak vnoríme niektoré značky, aj keď ich nezadáme v CSS, tieto vnorené značky budú mať rovnaké štýly ako ich rodičia.
Vo všeobecnosti má prednosť štýl, ktorý je presnejšie zameraný na daný prvok.
Ak sú v CSS štýly s rovnakou špecifickosťou, prednosť má ten, ktorý je napísaný neskôr.
Pomerne dobrým postupom, ak máte možnosť, je spracovať všetko pomocou triedy, t. j. poskytnúť prvkom ich vlastné triedy a tie potom spracovať samostatne v CSS. Tým sa v podstate obchádzajú všetky špecifiká, pretože sa vždy zameriavate presne na tie prvky, ktoré majú danú triedu.
Riadkové štýly a !important
Štýly možno zapísať priamo do prvkov v kóde HTML, pozri vyššie v článku o písaní CSS.
Vidíme, že sme štýl zapísali priamo do prvku v rovnakom formáte, ako sme si ukázali v príkladoch. Tento zápis štýlov označujeme ako inline štýly. Keď zapíšeme štýl týmto spôsobom, nahradí všetky zápisy CSS s jednou dôležitou výnimkou
Touto výnimkou je napríklad !important, ktorú zapisujeme priamo do štýlu, ktorý upravujeme:
p {
color: red !important;
}
!important má prednosť pred všetkými ostatnými zápismi vrátane inline štýlov. Pozor, toto je posledná možnosť, ako zrušiť všetky ostatné štýly a vynútiť si ten, ktorý naozaj potrebujeme. Pred použitím !important by sme však mali vždy zvážiť zmenu kódu HTML (ak je to možné) alebo zameranie prvku pomocou selektora a nadradenie špecifík.
V podstate chceme používať !important len vtedy, keď potrebujeme prepísať inline štýly alebo už vysokú špecifickosť. Zaujímavé tipy, ako prípadne prepísať špecifickosť, nájdete priamo na stránkach pre vývojárov spoločnosti Mozilla.
JavaScript
JavaScript je jediný programovací jazyk z trojice HTML/CSS/JavaScript. JavaScript je podporovaný všetkými modernými webovými prehliadačmi a používa sa takmer na všetkých webových stránkach na výkonnejšie a komplexnejšie funkcie. Celkovo nie je JavaScript nijako zložitý a skvelou výhodou je, že vlastne nemusíme nič sťahovať. Skripty môžeme písať priamo v jazyku HTML a spúšťať ich v každom modernom prehliadači. Začiatky s JavaScriptom sú oveľa jednoduchšie ako s inými programovacími jazykmi, pretože nie je potrebné nič inštalovať ani nastavovať.
Na výučbu opäť odporúčam spomínaný portál w3schools.com, ktorý preberá všetko od základov, hoci ide väčšinou o praktické príklady a hotové funkcie, s ktorými sa môžete stretnúť na webe.
Na čo sa používa JavaScript?
JavaScript je programovací jazyk, ktorý sa používa na úpravu obsahu webových stránok. Tie sa môžu meniť na základe interakcie používateľa alebo rôznych iných podmienok. JavaScript v praxi umožňuje vytvárať interaktívne stránky so zložitejšími funkciami.
Všetky druhy kalkulačiek, vyskakovacích okien, animácií alebo dynamických prvkov sú na webe zvyčajne vďaka JavaScriptu. To umožňuje zachytiť rôzne akcie používateľa, ako je pohyb myšou, posúvanie, vybratie myši z okna prehliadača, kliknutie na tlačidlo a mnoho ďalších. Na základe týchto udalostí sa potom môžu uskutočniť rôzne ďalšie akcie, pričom JavaScript môže do kódu HTML pridať niektoré prvky, ktoré sa potom zobrazia napríklad vo forme vyskakovacieho okna, banneru alebo podobne.
Veľmi jednoduchý príklad JavaScriptu si môžete pozrieť tu:
V podstate sa po kliknutí na tlačidlo alebo po nabehnutí naň spustí funkcia, ktorá zmení obsah a štýly textu nad tlačidlami. Je to jednoduchá vec, ktorá nemá až také praktické využitie, ale môžete tu vidieť, ako JavaScript pravdepodobne funguje, t. j. dynamicky mení obsah alebo vzhľad stránky na základe typicky nejakej interakcie používateľa, v tomto prípade kliknutia, podržania alebo posunutia.
O JavaScripte nebudeme hovoriť do hĺbky (najmä preto, že nie som veľmi skúsený programátor) a vo všeobecnosti je to pravdepodobne niečo, čo využijete najmenej, ak sa programovaniu nechcete venovať. Na účely blogovania úplne postačí vedieť, čo je HTML a ako funguje v kombinácii s CSS, aby ste mohli upraviť obsah a optimalizovať svoje stránky.
Až keď poznáte HTML a CSS aspoň na základnej úrovni (poznáte základné značky a viete si naštýlovať čokoľvek podľa potreby), má zmysel začať s JavaScriptom. Ale ak nechcete, nemusíte sa JS nikdy zaoberať, pretože úprimne povedané, na účely blogu naozaj nemá zmysel sa tým zaoberať a trápiť.