Vitajte v prvom dieli nášho seriálu o HTML! Ak ste úplný začiatočník a chcete sa naučiť vytvárať webové stránky, HTML je základným stavebným kameňom, s ktorým začnete. V tejto časti vám vysvetlím, čo je HTML, prečo je dôležité a ako vytvoriť základnú štruktúru HTML dokumentu. Zároveň si prakticky ukážeme, ako vytvoriť svoju prvú jednoduchú webovú stránku.
Čo je HTML?
HTML, čo je skratka pre Hypertext Markup Language, je základným značkovacím jazykom pre tvorbu webových stránok. Každá webová stránka na internete používa HTML na usporiadanie a zobrazenie obsahu, ktorý sa môže skladať z textu, obrázkov, odkazov, tabuliek a iných prvkov.
Značkovací jazyk znamená, že HTML neobsahuje logiku ako tradičné programovacie jazyky (napr. Python alebo JavaScript), ale používajú sa značky, ktoré určujú štruktúru a formátovanie obsahu. HTML teda hovorí prehliadaču, ako by mal prezentovať jednotlivé časti stránky.
HTML dokumenty sa skladajú zo špeciálnych značiek, nazývaných tagy, ktoré obklopujú rôzne časti obsahu a hovoria prehliadaču, čo má zobraziť a ako. Základné HTML stránky môžu obsahovať iba statický obsah, ale v kombinácii s inými technológiami, ako sú CSS (kaskádové štýly) a JavaScript, môžete vytvárať veľmi sofistikované a interaktívne webové stránky.
Prečo je HTML dôležité?
HTML je základom všetkých webových stránok. Bez HTML by neexistovala žiadna webová stránka, pretože je to základný jazyk, ktorý každý webový prehliadač (Chrome, Firefox, Edge, Safari) používa na zobrazovanie obsahu. Aj keď existujú pokročilejšie technológie na tvorbu webu (napr. rôzne frameworky alebo dynamické systémy), HTML je vždy základnou vrstvou.
HTML sa tiež ľahko učí, čo z neho robí ideálny jazyk pre začínajúcich vývojárov. Stačí len jednoduchý textový editor, prehliadač a trochu trpezlivosti na to, aby ste si vytvorili svoje prvé webové stránky.
Základná štruktúra HTML dokumentu
HTML dokument má veľmi jasne definovanú štruktúru, ktorú musíte dodržiavať, aby bol správne interpretovaný webovým prehliadačom. Každý HTML dokument sa skladá z troch základných častí: deklarácie, hlavičky a tela.
1. Deklarácia dokumentu
Na začiatku každého HTML dokumentu je dôležité uviesť deklaráciu typu dokumentu (DOCTYPE). Toto oznámi prehliadaču, že sa jedná o HTML5 dokument, čo je najnovšia verzia HTML:
<!DOCTYPE html>2. HTML elementy
HTML dokument je obklopený značkami <html></html>, ktoré hovoria prehliadaču, že sa jedná o HTML kód. Všetko, čo je medzi týmito dvoma značkami, je súčasťou webovej stránky:
<html>
... obsah dokumentu ...
</html>3. Hlavička dokumentu
Značka <head></head> obsahuje meta informácie o stránke, ktoré nie sú priamo zobrazené používateľovi, ale sú dôležité pre prehliadač. Tu sa definuje kódovanie znakovej sady (UTF-8), ktoré zabezpečuje správne zobrazenie znakov. Okrem toho hlavička obsahuje názov stránky (tag <title>) a môže obsahovať odkazy na externé súbory (napr. CSS alebo JavaScript).
<head>
<meta charset="UTF-8">
<title>Názov stránky</title>
</head><meta charset="UTF-8">: Zabezpečuje správne kódovanie stránky a umožňuje zobrazovať rôzne znaky (vrátane slovenských znakov).<title>: Určuje názov stránky, ktorý sa zobrazí v karte prehliadača.
4. Telo dokumentu
Značka <body></body> obsahuje všetko, čo sa používateľovi zobrazí na obrazovke. To zahŕňa text, obrázky, odkazy, tlačidlá, formuláre a ďalšie prvky.
<body>
<h1>Vitajte na mojej stránke!</h1>
<p>Toto je môj prvý HTML dokument. Som rád, že sa učím HTML.</p>
</body>V tomto príklade:
<h1>: Predstavuje najväčší nadpis na stránke. HTML podporuje nadpisy od<h1>(najväčší) po<h6>(najmenší).<p>: Definuje odstavec textu.
Tvorba prvého HTML dokumentu
Postup, ako vytvoriť svoj prvý HTML dokument:
- Vytvorte nový textový súbor: Otvorte si textový editor, napríklad Notepad alebo Visual Studio Code.
- Vložte základný HTML kód: Vložte nasledujúci kód do súboru.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Moja prvá HTML stránka</title>
</head>
<body>
<h1>Vitajte na mojej stránke!</h1>
<p>Toto je môj prvý HTML dokument. Som rád, že sa učím HTML.</p>
</body>
</html>- Uložte súbor ako
.html: Napríklad pod názvommoja_stranka.html. - Otvorte súbor v prehliadači: Ak dvojkliknete na uložený súbor, otvorí sa vo vašom predvolenom prehliadači.
Základné značky v HTML
Tu je krátky prehľad najbežnejších značiek v HTML, ktoré budete používať pri tvorbe webových stránok:
<h1>až<h6>: Nadpisy rôznych veľkostí.<p>: Odstavec textu.<a href="URL">: Odkaz na inú stránku alebo súbor.<img src="obrazok.jpg" alt="Popis obrázku">: Obrázok.<ul>a<ol>: Nečíslovaný a číslovaný zoznam.<li>: Položka v zozname.
Formátovanie textu v HTML
HTML umožňuje aj jednoduché formátovanie textu pomocou základných značiek, ako sú:
<b>: Tučný text.<i>: Kurzíva.<u>: Podčiarknutý text.
Tieto značky sa používajú na formátovanie textu pre lepšiu vizuálnu prezentáciu.
Úloha pre vás
Vytvorte svoju vlastnú HTML stránku s nasledujúcimi prvkami:
- Nadpis (
<h1>): Názov stránky, napríklad „O mne“. - Odstavec (
<p>): Napíšte niečo o sebe, napríklad vaše meno, záľuby a to, prečo sa učíte HTML. - Nadpis (
<h2>): Nadpis pre časť „Moje hobby“. - Nečíslovaný zoznam (
<ul>): Vytvorte zoznam svojich hobby alebo záľub. - Odkaz (
<a>): Vytvorte odkaz na váš obľúbený web alebo zdroj, ktorý používate na učenie HTML.
Príklad riešenia:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>O mne</title>
</head>
<body>
<h1>O mne</h1>
<p>Ahoj! Volám sa Janko a práve sa učím HTML. Rád programujem a učím sa nové veci.</p>
<h2>Moje hobby</h2>
<ul>
<li>Programovanie</li>
<li>Čítanie kníh</li>
<li>Športovanie</li>
</ul>
<p>Môj obľúbený web pre učenie sa programovania je:
<a href="https://www.example.com" target="_blank">Example.com</a>.
</p>
</body>
</html>V tomto príklade sme použili značky pre nadpisy, odstavce, zoznam a odkaz. Ak súbor uložíte a otvoríte v prehliadači, zobrazí sa jednoduchá stránka, ktorú ste vytvorili.
Tipy pre začiatočníkov
- Prehliadač ako nástroj na učenie: Váš prehliadač je vaším najlepším priateľom pri učení sa HTML. Každý prehliadač má nástroje na vývoj (napr. stlačením klávesy F12 v Google Chrome alebo Firefox), ktoré vám umožnia zobraziť HTML kód a sledovať, ako sa stránka mení na základe úprav v reálnom čase.
- Experimentovanie: HTML je o štruktúre, takže sa nebojte experimentovať s rôznymi značkami. Skúšajte rôzne možnosti a zistite, ako sa zobrazenie stránky mení.
- Zdrojové kódy stránok: Ak vidíte stránku, ktorá sa vám páči, môžete pravým tlačidlom myši kliknúť a vybrať možnosť „Zobraziť zdrojový kód stránky“. Takto môžete preskúmať, ako iní vývojári vytvárajú svoje stránky.
Čo bude nasledovať?
V tomto prvom dieli sme sa naučili, čo je HTML, prečo je dôležité a ako vytvoriť základný HTML dokument. Prešli sme štruktúrou HTML dokumentu, vytvorili sme jednoduchú stránku a ukázali si základné HTML značky, ktoré budete používať často. V ďalších dieloch sa budeme venovať viac detailom o tom, ako pracovať s textom, formátovaním, obrázkami a odkazmi, aby vaše stránky boli bohatšie a zaujímavejšie.
Záver
Týmto sme dokončili prvý diel nášho seriálu o HTML. Teraz by ste mali mať základné znalosti o štruktúre HTML a o tom, ako vytvoriť jednoduchú webovú stránku. Ak chcete pokračovať, neváhajte experimentovať s rôznymi značkami, skúste vytvárať svoje vlastné stránky a pripravte sa na ďalší krok, kde sa naučíte viac o práci s textom a formátovaním v HTML.
Učenie sa HTML je výborným spôsobom, ako začať s webovým vývojom, pretože to, čo sa naučíte, bude základom pre zložitejšie technológie, ako je CSS a JavaScript, ktoré neskôr pripojíme k vášmu rozvíjajúcemu sa repertoáru.
Pokračovanie: 2. diel: Práca s textom a základné formátovanie