Začíname vytvárať webové stránky

Čo k tomu potrebujeme?

Potrebujeme k tomu vhodný počítač, vhodné programy (aplikácie) a pripojenie na internet. Čo sa týka softvéru, tak potrebujeme tieto programy:

  1.  Program na správu súborov (súborový manažér)
  2.  Program na prenos súborov medzi počítačmi v sieti (FTP klient)
  3.  Program na prehliadanie webových stránok (Webový prehliadač)
  4.  Program na editovanie kódu HTML a CSS (HTML a CSS editor)
  5.  Program na úpravu obrázkov (Grafický program)

Súborových manažérov, ftp klientov, webových prehliadačov, html editorov a grafických programov je veľké množstvo. Pre účely výuky na stránkach tohto webového sídla budeme používať operačný systém Windows a tieto bezplatné programy:

  • Program na správu súborov a ftp klient: Total Commander
  • Webový prehliadač: Opera, Chrome, Firefox, Edge
  • Program na editovanie kódu HTML a CSS: Notepad ++
  • Program na úpravu obrázkov: Gimp

Ak niektoré programy potrebné na prácu ešte nemáte vo vašom počítači nainštalované a budú vám vyhovovať vyššie uvedené, stiahnuť si ich môžte na týchto stránkach:

Total Commander – https://www.ghisler.com/download.htm
Opera – https://www.opera.com/download
Chrome – https://www.google.com/intl/sk_sk/chrome/
Firefox – https://www.mozilla.org/sk/firefox/new/
Notepad++ – https://notepad-plus-plus.org/downloads/
Gimp – https://www.gimp.org/downloads/

V prípade, že máte iný operačný systém, či iné programy, postup uvádzaný na stránkach bude rovnaký, avšak niektoré kroky postupov budete musieť urobiť iným spôsobom, napríklad vám nebudú sedieť klávesové skratky a pod.

Prvé kroky pri tvorbe prvej webovej stránky

Po osvojení si základných informácií z oblasti tvorby webových stránok, ktoré sú popísané na stránke Úvod do tvorby webových stránok, môžeme pristúpiť k samotnej tvorbe kódu.

V programe na správu súborov vytvorte adresár s pracovným názvom napríklad:
moje-prve-webove-sidlo (adresár je priečinok, zložka, folder). Tento adresár si môžete vytvoriť na ploche alebo niekde inde.

V adresári moje-prve-webove-sidlo vytvorte adresár s názvom css a adresár s názvom img, tak ako je to na obrázku:

Adresárová štruktúra

Názvy súborov a adresárov budeme písať malými písmenami, bez diakritiky a bez nepovolených znakov (napríklad bez znaku medzera). Prečo? Aby to fungovalo na webovom serveri a aj kvôli poriadku.

Otvorte program na editáciu kódu HTML (v našom prípade Notepad++). Vytvorte nový dokument príkazom Súbor > Nový alebo klávesovou skratkou Ctrl+N. Vypíšte do nového dokumentu tento kód:

Základný kód HTML

Zadajte príkaz Súbor > Uložiť ako… alebo klávesovou skratkou Ctrl+Alt+S. Vyberte priečinok moje-prve-webove-sidlo a súbor doň uložte pod názvom index a formátom súboru Hyper Text Markup Language (index.html).

Vytvorte ďalší nový dokument príkazom Súbor > Nový alebo klávesovou skratkou Ctrl+N.

Zadajte príkaz Súbor > Uložiť ako… alebo klávesovou skratkou Ctrl+Alt+S. Vyberte priečinok moje-prve-webove-sidlo a potom priečinok css. Súbor doň uložte pod názvom styly a formátom súboru Cascade Style Sheets (styly.css). Adresár img zostane zatiaľ prázdny, no neskôr uložíme do neho obrázky.

Máme vytvorené nevyhnutné súbory na tvorbu prvej webovej stránky.

Máme otvorený dokument (súbor) index.html a ideme si vysvetliť čo tento kód znamená. V hypertextovom značkovacom jazyku HTML sa používajú značky (od toho názov značkovací jazyk). Každá značka v tomto jazyku začína znakom < (otvárajúca špicatá zátvorka) a končí znakom > (uzatvárajúca špicatá zátvorka). Poznáme párové a nepárové značky.

Príklad párovej značky: <title></title>
Príklad nepárovej značky: <meta>

Z týchto príkladov vidno, že párová značka má svoju otvárajúcu časť <title> a svoju uzatvárajúcu časť </title>. Uzatvárajúca časť značky má v sebe lomku pred názvom značky. Nepárová značka nemá uzatvárajúcu časť.

Na to, aby sme mohli vytvoriť prvú webovú stránku, potrebujeme, čo sa týka technológie HTML, poznať aspoň týchto trinásť vybraných značiek:

13 vybraných značiek jazyka HTML

<!doctype html> – definuje typ dokumentu

<html></html> – definuje začiatok a koniec HTML dokumentu

<head></head> – definuje začiatok a koniec hlavy HTML dokumentu

<body></body> – definuje začiatok a koniec tela HTML dokumentu

<title></title> – definuje názov stránky

<meta> – definuje metadáta (metainformácie, ktoré sa vzťahujú na stránku)

<link> – definuje prepojenie HTML dokumentu s externým súborom

<div><div> – definuje oddiel (všeobecný kontajner pre obsah)

<article></article> – definuje článok

<h1></h1> – definuje nadpis prvej úrovne

<h2></h2> – definuje nadpis druhej úrovne (podnadpis)

<p></p> – definuje odsek

<img> – definuje obrázok

Okrem delenia značiek na párové a nepárové, značky sa delia aj na blokové a riadkové. Výraz bloková značka je ale nevystihujúci. Ide o doslovný preklad z anglického jazyka, kde slovo block znamená v slovenskom jazyku blok, kocka, kváder, klát, balvan, podložka, popravisko, rad domov, prekážka, zábrana, škripec, kladka, štočok, forma atď..

Avšak ani jedno slovo z tohto prekladu nevystihuje funkciu týchto značiek. V tomto manuály budeme preto používať výraz obdĺžnikové značky, pretože v skutočnosti tieto značky vytvárajú obdĺžnik ako bude vysvetlené ďalej. Riadkové značky sa používajú pri značkovaní textu a obrázkov.

Pravidlá zápisu znakov pri kódovaní

V Netepade++ otvoríme súbor index.html. Máme tam zatiaľ nasledovný kód:

Základný kód HTML

Čo znamenajú všetky zatiaľ použité značky v tomto kóde sme uviedli vyššie. Ale čo znamená zápis <meta charset="utf-8">?

Je na rade vysvetliť, čo znamená syntax jazyka HTML. Pod pojmom syntax jazyka HTML budeme rozumieť pravidlá zápisu kódu HTML. Takže najskôr si vysvetlíme pravidlá zápisu kódu v HTML dokumente. Kompletné pravidlá zápisu budú uvedené neskôr, pretože začíname a dostať to všetko naraz bez príkladov, by nebolo jednoduché.

Zo začiatku bude stačiť, keď si osvojíte zatiaľ tieto pravidlá zápisu:

Názov značky sa píše medzi otvárajúcu a uzatvárajúcu špicatú zátvorku

Príklad: <meta>
Každá značka uvedená v kóde html môže (ale aj nemusí) obsahovať atribút alebo viaceré atribúty.

Vysvetlenie pojmu atribút
Atribút je v počítačovej terminológii špecifikácia, ktorá definuje vlastnosť objektu, prvku alebo súboru. Atribút objektu sa zvyčajne skladá z mena a hodnoty, atribút prvku z typu alebo mena triedy, atribút súboru z mena a prípony.
zdroj: Wikipedia
https://sk.wikipedia.org/wiki/Atribút_(informatika)

Tieto atribúty môžu (ale niektoré aj nemusia) mať priradené hodnoty.

Príklad:

<meta charset="utf-8">

Popis príkladu (pravidlá zápisu kódu):
Najskôr sa píše otvárajúca špicatá zátvorka (<), potom nasleduje názov značky (meta), potom nasleduje medzera ( ), za medzerou nasleduje názov atribútu (charset), potom nasleduje znak rovnosti (=), potom nasleduje horná (americká) úvodzovka ("), potom nasleduje hodnota atribútu charset (utf-8), potom nasleduje horná (americká) úvodzovka (") a nakoniec nasleduje uzatváracia špicatá zátvorka (>).

Poznámka: hodnota atribútu charset (utf-8) udáva znakovú sadu (táto znaková sada umožňuje písať texty s diakritikou ďťňľžčšä…, keby sme stránku písali napríklad v azbuke alebo čínskymi znakmi a pod. bola by táto znaková sada iná).

Všeobecný zápis syntaxe pre nepárovú značku:
<názovznačky atribút="hodnota" atribút="hodnota"...>

Všeobecný zápis syntaxe pre párovú značku:
<názovznačky atribút="hodnota" atribút="hodnota"...></názovznačky>

Z uvedeného vyplýva, že v kóde HTML sa atribúty píšu len v otvárajúcej časti značky, nie v uzatvárajúcej časti značky (ak je párová). Dôležité je písať znaky podľa vyššie uvedeného príkladu, ináč by to nemuselo fungovať. Áno, asi začínate tomu rozumieť. Nejde o nič iné ako o písanie určitých znakov v určitom poradí. Celý dokument HTML neobsahuje nič iné ako znaky písané v určitom poradí, kde treba dodržiavať pravidlá zápisu týchto znakov.

To isté platí aj pri dokumente CSS. Aj tu platí, že celý dokument CSS neobsahuje nič iné ako znaky písané v určitom poradí, pri ktorom treba dodržiavať pravidlá zápisu týchto znakov. Pravidlá zápisu, čiže syntax jazyka kaskádových štýlov (CSS) je však iná ako syntax hypertextového značkovacieho jazyka HTML.

Základné pravidlá zápisu CSS - všeobecný zápis:

selektor {
pravidlo1
pravidlo2
pravidlo3
… atď.
}

Každý selektor v súbore kaskádových štýlov môže mať jedno a viac pravidiel. Všetky pravidlá vzťahujúce sa na príslušný selektor sa nachádzajú medzi zloženými zátvorkami. Každé pravidlo sa skladá z vlastnosti a jej hodnoty:

selektor {
vlastnosť: hodnotavlastnosti;
vlastnosť: hodnotavlastnosti;
vlastnosť: hodnotavlastnosti;
… atď.
}

Vo vyššie uvedenom príklade sú uvedené tri pravidlá. Každé pravidlo v súbore štýlov sa skladá z vlastnosti, za ktorou nasleduje dvojbodka, potom môže, ale aj nemusí byť medzera (ale pre kódera je prehľadnejší zápis, keď tam medzera je), nasleduje hodnota priradená k vlastnosti a nakoniec znak bodkočiarka. Hodnota vlastnosti môže aj nemusí obsahovať merné jednotky.

{ - otvárajúca zložená zátvorka (klávesová skratka Alt Gr+B) } - uzatvárajúca zložená zátvorka (klávesová skratka Alt Gr+N)

Poznámka:
Alt Gr je klávesa vedľa klávesy medzerník po pravej strane
Alt je klávesa vedľa klávesy medzerník po ľavej strane

Ako súvisí dokument CSS s dokumentom HTML?

V dokumente CSS sa pred otvárajúcu zloženú zátvorku píše selektor. Tento selektor (výber) slúži na to, aby sme vybrali z HTML kódu nejakú konkrétnu značku/y, ktorú/é budeme v CSS-ku formátovať. Pod formátovaním tohto selektora (vybranej značky/čiek z HTML) budeme rozumieť priraďovanie vlastností. Vlastnosti môžu nadobúdať hodnoty. Hodnoty môžu mať jednotky.

Pre lepšie pochopenie - príklad z reálneho sveta:

prázdny papier formátu A4 {
šírka: 210mm;
výška: 297mm;
farba: biela;

}

Vysvetlenie zápisu:
prázdny papier formátu A4 – selektor
šírka – prvá vlastnosť (prázdneho papiera formátu A4)
210 – priradená hodnota vlastnosti šírka
mm – jednotka vzťahujúca sa na hodnotu 210 (mm – milimetre)
výška – druhá vlastnosť (prázdneho papiera formátu A4)
297 – priradená hodnota vlastnosti výška
mm – jednotka vzťahujúca sa na hodnotu 297 (mm - milimetre)
farba – tretia vlastnosť (prázdneho papiera formátu A4)
biela – priradená hodnota vlastnosti farba

Čo z toho vyplýva:
Prázdny papier formátu A4 má šírku 210mm, výšku 297mm a má bielu farbu.

Všimli ste si, že za názvom vlastnosti sa vždy píše znak dvojbodka a za hodnotou vlastnosti sa vždy píše znak bodkočiarka? Nezabúdajte na to. Toto sú časté chyby, ktoré robia začiatočníci.

Prepojenie medzi HTML a CSS dokumentom

Je dôležité si uvedomiť, že dokument CSS je absolútne viazaný (prepojený) na dokument HTML. Bez dokumentu HTML by dokument CSS nemal žiadny zmysel. V dokumente CSS určujeme ako a kde sa má zobraziť na webovej stránke to, čo je napísané v HTML dokumente.

Ako ale tieto dva dokumenty prepojíme?
Prepojenie urobíme v HTML dokumente pomocou nepárovej značky <link>, ktorú umiestnime do hlavy dokumentu medzi párovú značku <head></head>.

Kód HTML bude vyzerať nasledovne:

Vysvetlenie kódu:
<link> – definuje prepojenie HTML dokumentu s externým súborom (najčastejšie k súboru kaskádových štýlov CSS)
href – atribút, ktorý udáva adresu (URL) k súboru, s ktorým bude HTML dokument prepojený
css/styly.css – hodnota atribútu href (ktorú tvorí relatívna adresa od súboru index.html, cez priečinok css až k súboru styly.css)
rel – atribút, ktorý udáva vzťah medzi HTML dokumentom a dokumentom, na ktorý HTML dokument odkazuje (v našom prípade odkazuje na súbor štýlov, preto je hodnota tohto atribútu stylesheet)
stylesheet – hodnota atribútu rel udávajúca typ súboru, na ktorý HTML dokument odkazuje

Poznámka:
Webový prehliadač pre zobrazenie stránky ako prvé načíta súbor index.html, v ktorom sú informácie čo má na stránke zobraziť. V HTML kóde nájde aj informáciu, že má načítať súbor styly.css, tak ho následne načíta. V súbore štýlov je kód, ktorý určuje, kde a ako má prehliadač to čo na webovej stránke zobraziť.

Body – telo HTML dokumentu

Aby sme už konečne niečo videli na našej prvej webovej stránke, poďme si najskôr naformátovať telo HTML dokumentu. Čo predstavuje telo HTML dokumentu uvidíte, keď mu priradíme farbu pozadia:

Kód CSS bude vyzerať takto:

Vysvetlenie kódu:
body – selektor (vyselektovali sme značku <body></body> z HTML dokumentu) background-color – vlastnosť určujúca farbu pozadia elementu #0099ff – znak mriežka a za ním hexadecimálne číslo vybranej farby (o farbách bude napísané neskôr)

Klávesová skratka pre napísanie znaku mriežka je Alt Gr+X

Telo dokumentu HTML reprezentované párovou značkou <body></body> vidíme teraz v prehliadači ako modrý obdĺžnik.

Ohraničenie, v ktorom sa bude nachádzať obsah webovej stránky

Keďže už máme dokumenty HTML a CSS prepojené, poďme ako prvé vytvoriť ohraničenie obsahu našej prvej webovej stránky. Toto ohraničenie (prípadne to môžeme nazvať aj obal, obálka, hranice, rámček…) bude slúžiť okrem iného na to, aby sme svoju prvú stránku vycentrovali na stred plochy karty prehliadača vo vodorovnom smere.

Na vytvorenie takéhoto obalu stránky použijeme párovú značku <div></div>.

<div></div> – definuje oddiel (významovo neutrálny obdĺžnik)

Kód HTML bude vyzerať nasledovne:

Všimli ste si, že tentokrát sme vložili párovú značku <div></div> do tela HTML dokumentu? To znamená medzi otvárajúcu a uzatvátajúcu časť značky <body></body>. Do tela HTML dokumentu vkladáme to, čo sa má zobraziť na webovej stránke.

Vysvetlenie zápisu <div id="obal"></div>: id – atribút značky div, ktorý určuje identifikátor značky HTML (jeho hodnota musí byť v celom dokumente HTML jedinečná – nesmie sa vyskytovať viackrát) obal – hodnota atribútu id (mohli sme dať aj napríklad ohranicenie, ale to by bolo dlhšie a muselo by sa to písať bez diakritiky)

Prečo sme museli dať nejaký identifikátor tejto značke? Pretože takýchto značiek býva v celom dokumente HTML zvyčajne viac. Preto, aby sme toto „divko“ mohli nejako odlíšiť od iných „diviek” v dokumente, tak sme ho museli nejako označiť.

Poďme si teraz naformátovať toto „divko”, ktoré má „ídéčko“ obal.

Poznámka: „divko” a „ídéčko” sú slangové výrazy pre div a id, ktoré používajú niektorí kóderi.

Kód CSS bude vyzerať takto:

Vysvetlenie kódu:
div#obal – selektor, kde jeho časť div znamená prepojenie so značkou <div></div> v HTML kóde, časť # znamená, že ide o identifikátor (zodpovedá mu id v HTML kóde) a časť obal je názov identifikátora značky <div></div> z HTML kódu. Tento selektor „vyselektoval“ vybral z kódu HTML len tú značku <div></div>, ktorá má identifikátor s názvom obal. Žiadnej inej značky <div></div> v kóde HTML sa to teda netýka.

Poznámka:
Znak # sa po slovensky nazýva mriežka. Schomolenina z anglického jazyka hashtag sa u nás vyslovuje hešteg. V ďalšom texte budeme používať slovenský názov mriežka, nie schomoleninu alebo anglický názov.

max-width – vlastnosť udávajúca maximálnu šírku elementu
px – jednotka pixel (obrazový bod), 680px = 680 pixlov (obrazových bodov)
height – vlastnosť udávajúca výšku elementu
margin-left – vlastnosť určujúca ľavý okraj elementu
auto – táto hodnota vlastnosti umožňuje automatické nastavenie okrajov tak, aby protiľahlé okraje mali rovnakú veľkosť
margin-right – vlastnosť určujúca pravý okraj elementu
background-color – vlastnosť určujúca farbu pozadia elementu
#ffff99 – znak mriežka a za ním hexadecimálne číslo vybranej farby (o farbách bude napísané neskôr)

Na to, aby sme mohli vytvoriť prvú webovú stránku, potrebujeme, čo sa týka technológie CSS poznať aspoň tieto vlastnosti:

Prehľad 27 vybraných vlastností CSS

font-family – výber fontu / rodina písiem / definuje font / typ písma
font-size – veľkosť fontu / veľkosť písma / výška písma
color – farba písma
font-weight – hrúbka písma
text-align – zarovnanie textu
text-decoration – dekorácia textu
line-height – výška riadku
background-color – farba pozadia
background-image – obrázok na pozadí / vloženie obrázka na pozadie
width – šírka / šírka obdĺžnika
height – výška / výška obdĺžnika
max-width – maximálna šírka
margin – okraj
margin-top – horný okraj
margin-right – pravý okraj
margin-bottom – dolný okraj
margin-left – ľavý okraj
border – rámček
border-top – horný rámček
border-right – pravý rámček
border-bottom – dolný rámček
border-left – ľavý rámček
padding – odsadenie
padding-top – horné odsadenie
padding-right – pravé odsadenie
padding-bottom – dolné odsadenie
padding-left – ľavé odsadenie

Text ako najdôležitejší obsah webových stránok

Dá sa povedať, že to najdôležitejšie na webovej stránke je práve text. Tvorbou kvalitných textov pre webové stránky sa zaoberajú copywriteri. Nám však teraz nejde o samotné napísanie (vytvorenie) textu, ale o jeho nakódovanie. Prvú webovú stránku vytvoríme s textom, ktorý bude mať podobu článku.

Pokračovanie v ďalšom článku:
Kódovanie textu článku webovej stránky krok za krokom