Tvorba web stránok - pre začiatočníkov - HTML

Autor: Anton Šutiak | 9.8.2016 o 12:22 | (upravené 12.8.2016 o 14:13) Karma článku: 3,25 | Prečítané:  436x

Vysvetlenie značkovacie jazyka HTML a jeho najdôležitejšie pojmy. Oboznámenie sa so stránkou jsfiddle.net, kde je možné testovať svoj kód.

Čo ti vysvetlím v tomto článku?

  1. Čo je HTML
  2. Čo sú to HTML tagy a ako sa rozdeľujú
  3. Ignorovanie medzier v HTML
  4. Čo sú to atribúty HTML tagov
  5. Najviac používané HTML tagy
  6. Vnáranie viacerých HTML tagov do seba

Na testovanie budem používať zatiaľ stránku www.jsfiddle.net, ktorá vyzerá následovne:

Napíšeš kód do prvéj časti HTML, klikneš na RUN a výsledok uvidíš v časti RESULT.

Vyskúšaj si to s hocijakou jednoduchou vetou napr.:
Som najlepší programátor na svete.

Teraz túto vetu zaobaľ alebo teda daj ju do takýchto značiek: 
<h1>Som najlepší programátor na svete.</h1>

Mal by si vidieť teraz takéto niečo keď klikneš na RUN:

Značky, do ktorých si dal svoju vetu sa nazývajú HTML tagy a preto sa aj HTML voláznačkovací jazyk. Týchto značiek je viacero a dobrá správa je, že sa ich nemusíš učiť na spamäť. Vždy si ich môžeš dohľadať na internete a súpis tých najdôležitejších som spísal tu: http://www.akonaweb.sk/najviac-pouzivane-html-tagy

Nie je to kompletný zoznam, ale zoznam, s ktorými sa určite stretneš a mal by si si ich otestovať ako fungujú.

HTML tagy sa delia na:

  • párové
  • nepárové

Párové HTML tagy:
Jeden si už použil. H1 tag. Vychádza z anglického nazvu ako aj všetky ostatné tagy, teda "heading", čo je v preklade nadpis a párový preto, lebo ma začiatočný tag, ktorý je v zobáčikových zátvorkach a ukončovací tag je na konci za vetou, ktorý vyzerá rovnako, len ma pre písmeno H ešte lomítko /.
POZOR na klávesnici sú 2 typy lomítiek / a \. Vždy používaj toto lomítko: /

Nepárové HTML tagy:
Skús do jsfiddle vložiť toto: <hr /> alebo skrátený tvar bez medzery a lomítka <hr>
Napísal som tu oba tvary, lebo sa ešte stále používa ten prvý a ten druhý je zjednodušený tvar HTML 5 verzie. Je jedno, ktorý z nich použiješ. Nepárový preto, lebo sa nezaobaľuje žiaden text, či iný objekt a tým pádom nie je potrebný uzatvárací tag. Tento kokrétny znamená "horizontal row" a vloží ti do stránky horizontálnu čiaru.

Nepárových tagov, nie je až tak veľa ako párových. A v zozname na mojej stránke je pri každom tagu popis či je párový alebo nepárový. Záleží od toho, či medzi tagy dávaš nejaký obsah napr. text alebo iba vkladáš nejaký objekt ako napr. čiaru, obrázok a podobne.

Ignorovanie medzier v HTML:
V HTML sa ignorujú medzery a to ti umožní formátovať si kód web stránky podľa ľubosti.

Skús napríklad vložiť takýto kód do HTML časti jsfiddle.net stránky a daj RUN:
<h1>
                        
Som najlepší
     programátor na
svete
      </h1>

Stále ti bude zobrazovať vetu na jednom riadku:

Kebyže chceš vytvoriť medzery teda resp. entery-odriadkovanie, tak by si musel použiť nepárové tagy "br" takto:
<h1>
                        Som najlepší <br>
     programátor na <br>
svete
      </h1>

Takže už vieš ako sa vytvárajú aj nové riadky ale ako dáš viac medzier v riadku?
Viac medzier dosiahneš pomocou špeciálneho zápisu:  

Vyskúšaj si napr. toto:
<h1> Som  &nbsp;&nbsp;&nbsp; najlepší </h1>

Ďalšia dôležitá téma v HTML sú atribúty tagov:
Atribúty sú dodatočné vlastnosti tagov a vždy sa píšu pri otváracom tagu. Pokiaľ je tag nepárový tak nie je iný na výber.

Skús si napr. toto:
<hr width="300align="centersize="30">

Výsledkom bude čiara, ktorá bude 300px široká, vycentrovaná na stred a jej výška bude 30px. Takže vidíš, že atribútmi môžeš upresniť HTML tagy. Nedá sa s nimi riadiť absolútne všetko, napr. neexistuje atribút na zmenu farby tejto čiary. Ale neboj, neskôr keď budeme preberať CSS jazyk, tak ním to dosiahneš.

Pri súpise tagov na mojej stránke, po rozkliknutí konkrétneho tagu, je výpis aj atribútov k danému tagu.
Podstatné je to, že nie každý atribút môžeš dať ku hocijakému HTML tagu. Je presne špecifikované, ktorý atribút je možné dať ku konkrétnemu HTML tagu.

Najpoužívanejšie HTML tagy:
Tu len poznamenám, že to je môj súpis najviac používaných tagov, lebo už vidím komentáre a čo tento tag a čo tamten tag. Tiež HTML 5 tagy tu nie sú spomenuté, kôli jednoduchosti vysvetlenia. Vynechal som naschvál aj tagy <span> a <div>, ktoré bez použitia CSS nemajú prakticky žiaden význam. Neskôr pri riešení reálnej web stránky, ak narazíme na ďalší HTML tag, tak si ho hneď aj vysvetlíme. 

  • <strong> / párový - tučné písmo
  • <i> / párový - kurzivá
  • <u>/ párový - podčiarknuté písmo
  • <br>/ nepárový - enter, odriadkovanie
  • <hr>/ nepárový - horizontálna čiara
  • <h1><h6> / párové - nadpis v 6 rôznych úrovňach 
  • <p>/ párový - odstavec
  • <a>/ párový - klikateľný odkaz
  • <img>/ nepárový - obrázok
  • <ul>, <ol>, <li> / párové - odrážkové a číslované zoznamy
  • <form>, <input>/ párový, nepárový - formulár a jej vstupné polia
  • <table>, <tr>, <td> / párové - tabuľka

Na mojej stránke je väčší súpis týchto tagov aj s príkladmi, ale na tomto odkaze môžeš vidieť použitie hore spomenutých: https://jsfiddle.net/akonawebsk/wf366mmr/

Na odkaze hore môžeš vidieť, že som použil aj kombinácie viacerých tagov a vnáranie jednotlivých tagov je ako matrioška: https://en.wikipedia.org/wiki/Matryoshka_doll

Musíš najskôr najvnútornejší HTML tag uzavrieť, aby si mohol zavrieť HTML tag vyššej úrovne. Pozri si to na tomto príklade:
<u>
  <i>
    <strong>
      Podčiarknuté, kurzivé a tučné písmo zároveň    
    </strong>
  </i>
</u>

Na veľkosti písmen v názve HTML tagov nezáleží, ale zvyknú sa dávať malé písmena. Tiež môžeš vidieť, že taký HTML tag <ul>, <form> alebo <table> sa používa s kombináciou iných tagov, pretože sám o sebe nemá význam.

Asi najkomplexnejší je tag <table>, kde <tr> znamenajú riadky a <td> konkrétne bunky. V <table> sa používajú ešte aj iné tagy, ale opäť momentálne sa tým nemusíš trápiť.

Podstatné je, aby si si vyskúšal tieto tagy. Ich atribúty, skúšal ich kombinovať, vnárať a tým si ich vlastne aj zapamätáš.

Nezabudni na to, že ani muzikant sa nenaučí hrať na hudobný nástroj tým, že sleduje ako hrá jeho učiteľ ;)

HAPPY CODING.

Páčil sa Vám tento článok? Pridajte si blogera medzi obľúbených a my Vám pošleme email keď napíše ďalší článok
Pridaj k obľúbeným

Hlavné správy

SVET

Výbuchy po futbalovom zápase v Istanbule zabili 29 ľudí

K explóziám došlo hodinu po zápase medzi Besiktasom a Bursasporom.

EKONOMIKA

Technic sa nedá naučiť. Ako sa učiteľ stal dizajnérom Lega

Rád si z lega skladal veci, na ktoré nemal návod.

DOMOV

Smer chce byť politicky nekorektný aj robiť poriadky v osadách

Novými podpredsedami sú Blanár a Žiga.


Už ste čítali?