Ako vytvoriť jednoduchú webovú stránku pomocou HTML?

Po vytvorení webovej stránky ju môžete uložiť ako dokument HTML a zobraziť ju vo webovom prehliadači.

Táto príručka vás naučí, ako napísať jednoduchú webovú stránku v jazyku HTML (hypertextový značkovací jazyk). HTML je jednou zo základných súčastí World Wide Web, ktorá tvorí štruktúru webových stránok. Po vytvorení webovej stránky ju môžete uložiť ako dokument HTML a zobraziť ju vo webovom prehliadači. Vytvorenie stránky HTML je možné pomocou základných textových editorov, ktoré sa nachádzajú na počítačoch Windows aj Mac.

Časť 1 z 5: Pridanie hlavy do html

1
Otvorte textový editor. Na počítači so systémom s operačným systémom Windows, budete zvyčajne používať Poznámkový blok, alebo Notepad ++ vzhľadom k tomu, MacOS užívatelia budú používať TextEdit:
- Windows - Otvorte Štart, zadajte notepad alebo alebo notepad++ kliknite na položku Poznámkový blok alebo „Poznámkový blok ++ alebo vynikajúci“ v hornej časti okna.
- macOS - Kliknite na položku Spotlight, zadajte text textedit a dvakrát kliknite na položku Textedit v hornej časti výsledkov.
2

Napíšte <!doctype html> a stlačte ↵ enter. Webovému prehliadaču to hovorí, že sa jedná o dokument HTML.
3

Napíšte <html> a stlačte ↵ enter. Táto otváracia značka pre váš kód HTML.
4

Napíšte <head> a stlačte ↵ enter. Toto je značka, ktorá otvára vašu hlavičku HTML. Informácie o hlavičke HTML, ktoré sa zvyčajne na vašej webovej stránke nezobrazujú. Tieto informácie môžu zahŕňať názov, metaúdaje, šablóny štýlov CSS a ďalšie skriptovacie jazyky.
5

Zadajte <title>. Toto je značka na pridanie názvu na vašu stránku.
6

Zadajte názov svojej webovej stránky. Môže to byť ľubovoľný názov, ktorému chcete pomenovať webovú stránku.
7

Napíšte </title> a stlačte ↵ enter. Toto je značka na zatvorenie značky názvu.
8
Napíšte </head> a stlačte ↵ enter. Toto je značka, ktorá vám zavrie hlavu. Váš HTML kód by mal vyzerať asi takto.
```
<! DOCTYPE html> <html> <head> <title> Moja webová stránka </title> </head> 
```

Časť 2 z 5: Pridanie textu a textu do html

1

Napíšte <body> pod zatvorenú značku „hlava“. Táto značka otvára telo dokumentu HTML. Všetko, čo je súčasťou tela HTML, sa zobrazuje na webovej stránke.
2

Zadajte <h1>. Toto je značka, ktorá má do dokumentu HTML pridať nadpis. Nadpis je veľký tučný text, ktorý sa obvykle nachádza v hornej časti dokumentu HTML.
3

Zadajte nadpis pre svoju stránku. Môže to byť názov vašej stránky alebo pozdrav.
4
Zadajte </h1> text za nadpis a stlačte ↵ enter. Táto značka zatvára váš nadpis.
- Postupne pridajte ďalšie nadpisy. Pomocou <h1></h1> priechodných <h6></h6> značiek môžete vytvoriť šesť rôznych nadpisov. Vznikajú tak nadpisy rôznych veľkostí. Ak napríklad chcete vytvoriť postupne tri nadpisy rôznych veľkostí, môžete napísať toto:
  <h1> Vitajte na mojej stránke! </h1> <h2> Moje meno je Bob. </h2> <h3> Dúfam, že sa vám tu páči. </h3>
- Nadpisy ukazujú prioritu alebo dôležitosť textu. Ak však chcete použiť nižší nadpis, nie je potrebné používať vyšší nadpis. Jeden môže priamo použiť H3, aj keď vo vašom príspevku nie je žiadna H1.
5

Zadajte <p>. Toto je značka na otvorenie odseku. Odsek textu sa používa na zobrazenie textu normálnej veľkosti.
6

Napíšte nejaký text. Môže to byť popis vašej webovej stránky alebo akékoľvek iné informácie, ktoré chcete zdieľať.
7
Napíšte </p> za text a stlačte ↵ enter. Toto je značka na zatvorenie textu odseku. Nasleduje príklad odstavcového textu v HTML:
```
<p> Toto je môj odsek. </p> 
```
- Môžete pridať viac riadkov odsekov za sebou, aby ste vytvorili sériu odsekov pod jedným nadpisom.
- Farbu ľubovoľného textu môžete zmeniť tak, že text zarámujete pomocou značiek <font color="color"> a </font>. Uistite sa, že zadáte vami preferovanú farbu do sekcie „farba“ (úvodzovky si ponecháte). Pomocou tejto sady značiek môžete ľubovoľný text (napr. Hlavičky) zmeniť na inú farbu. Ak napríklad chcete zmeniť text odseku na modro, napíšte nasledujúci kód:<p><font color="blue">Whales are majestic creatures.</font></p>
- Pomocou HTML môžete pridávať tučné písmo, kurzívu a ďalšie textové formáty. Nasledujú príklady toho, ako môžete formátovať text pomocou značiek HTML:
  <b> Tučný text </b> <i> Kurzíva </i> <u> Podčiarknutý text </u> <sub> Text dolného indexu </sub> <sup> Horný index </sup>
- Ak používate tučný a kurzívu na zvýraznenie, nielen na úpravu štýlu, použite prvky <strong> a <em> namiesto <b> a <i>. To uľahčuje pochopenie vašej webovej stránky pri použití technológií, ako je čítačka obrazovky alebo režim čítačky poskytovaný v niektorých prehliadačoch.

Ako prepojím jednu stránku HTML s inou stránkou HTML?

Časť 3 z 5: Pridanie ďalších prvkov do html

1
Pridajte obrázok na svoju stránku. Do HTML môžete pridať obrázok pomocou nasledujúcich krokov:
- Napíšte <img src= a otvorte svoju značku obrázka.
- Skopírujte a prilepte adresu URL obrázku za úvodzovky „=“.
- Ak > chcete značku obrázka zavrieť, zadajte za webovú adresu obrázku. Ak je adresa URL obrázku napríklad „http://mypicture.com/lake“, napíšte nasledovné:
  <img src = "aHR0cDovL215cGljdHVyZS5jb20vbGFrZS5qcGc =">
2
Odkaz na inú stránku. Odkaz na svoj kód HTML môžete pridať pomocou týchto krokov:
- Zadajte <a href= značku odkazu.
- Skopírujte a prilepte webovú adresu za úvodzovky „=“.
- Zadaním > za adresu URL zavriete odkazovú časť HTML.
- Za koncovú zátvorku zadajte názov odkazu.
- Zadaním </a> za názvom odkazu zavriete odkaz HTML. Nasleduje príklad odkazu na Facebook.
  <a href="https://facebook.com"> Facebook </a>.
3

Pridajte do svojho HTML koniec riadka. Riadok môžete pridať zadaním <br> kódu HTML. Vytvorí sa tak vodorovná čiara, ktorú je možné použiť na rozdelenie rôznych častí stránky.

Prečítajte si tiež: Ako zistím, či niekto videl vašu pozvánku na udalosť na Facebooku v systéme Android?

Časť 4 z 5: Zatvorenie dokumentu HTML

1

Typ </body> zatvorte svoje telo. Po dokončení pridávania všetkého textu, obrázkov a ďalších prvkov do tela dokumentu HTML pridajte túto značku do spodnej časti dokumentu HTML, čím zavriete telo dokumentu HTML.

2

Zadaním </html> zavrite dokument HTML. Táto značka sa nachádza pod značkou, aby ste zavreli telo HTML na konci dokumentu HTML. Webovému prehliadaču to hovorí, že za touto značkou už nie je žiadny kód HTML. Celý váš dokument HTML by mal vyzerať takto:

<! DOCTYPE html> <html> <head> <title> sprievodca fanúšikovskou stránkou </title> </head> <body> <h1> vitajte na mojej stránke! </h1> <p> Toto je fanúšikovská stránka so sprievodcom. Buďte ako doma! </p> <h2> Dôležité dátumy </h2> <p> <i> 15. januára 2019 </i> - narodeniny sprievodcu </p> <h2> Odkazy </h2> <p> Tu je odkaz na sprievodcu: <a href="http://google.com"> sprievodca </a> </p> </body> </html>

Časť 5 z 5: Uloženie a otvorenie webovej stránky

1

Premeňte svoj dokument na obyčajný text (iba používatelia systému Mac). Kliknite na položku ponuky Formát v hornej časti obrazovky a potom vo výslednej rozbaľovacej ponuke kliknite na položku Vytvoriť obyčajný text.
2

Kliknite na položku Súbor. Nachádza sa na paneli s ponukami v hornej časti obrazovky.
3
Kliknite na položku Uložiť ako. Nachádza sa v rozbaľovacej ponuke pod položkou „Súbor“.
- Prípadne to môžete vykonať stlačením klávesu Ctrl+ S(Windows) alebo ⌘ Command+ S(Mac).
- Tento krok nie je v systéme Windows potrebný ani možný.
4

Zadajte názov dokumentu HTML. Do textového poľa „Názov súboru“ (Windows) alebo „Názov“ (Mac) zadajte ľubovoľný názov dokumentu.
5
Zmeňte typ súboru dokumentu. Dokument budete musieť zmeniť z textového súboru na súbor HTML. Na zmenu typu súboru použite nasledujúci postup:
- Windows - Kliknite na rozbaľovacie pole „Uložiť ako typ“, kliknite na položku Všetky súbory a potom zadajte text .html na konci názvu súboru.
- Mac - Nahraďte .txt na konci názvu súboru .html namiesto.
6
Kliknite na položku Uložiť. Je to v spodnej časti okna. Tým sa vytvorí súbor HTML.
- Súbory HTML sa zvyčajne otvárajú pomocou predvoleného webového prehliadača.
7

Zatvorte textový editor. V tomto okamihu ste pripravení otvoriť súbor HTML vo svojom prehliadači, aby ste si mohli pozrieť svoju webovú stránku.
8
Otvorte dokument HTML vo svojom prehliadači. Vo väčšine prípadov na to budete môcť dvakrát kliknúť na dokument HTML. Ak dvojité kliknutie na dokument spôsobí chybu, postupujte takto:
- Windows - Kliknite pravým tlačidlom myši na dokument, vyberte položku Otvoriť pomocou a kliknite na požadovaný prehliadač.
- Mac - Kliknite raz na dokument, kliknite na položku Súbor, vyberte položku Otvoriť pomocou a kliknite na požadovaný prehliadač.
9
V prípade potreby upravte dokument HTML. Na stránke HTML si môžete všimnúť chybu. Ak to chcete zmeniť, môžete upraviť text dokumentu HTML:
- V systéme Windows, môžete kliknúť pravým tlačidlom myši na dokument a kliknite na tlačidlo Upraviť vo výslednom drop-down menu (ak máte Notepad ++ nainštalovaný, bude to hovoriť Úpravy sa poznámok ++ miesto).
- Na počítačoch Mac budete chcieť kliknúť na dokument, aby ste ho vybrali, kliknite na položku Súbor, vyberte položku Otvoriť pomocou a potom na položku Textedit. Dokument môžete tiež presunúť do programu TextEdit.

Ako napísať jednoduchú webovú stránku v jazyku HTML (hypertextový značkovací jazyk) — Táto príručka vás naučí, ako napísať jednoduchú webovú stránku v jazyku HTML (hypertextový značkovací jazyk).

Tipy

Štítky by mali byť vždy zatvorené v zrkadlovom obraze svojich otvorených náprotivkov. Napríklad <tag1><tag2>by mali byť zatvorené ako </tag2></tag1>.
Pomocou značky môžete na svoj web pridať text s bočným posúvaním <marquee></marquee>, nezabúdajte však, že niektoré značky tento štítok nemusia rozpoznať.
Mnoho ľudí používa program Poznámkový blok ++ na písanie a zostavovanie svojho kódu.
Ak chcete na svoju stránku vycentrovať obrázok, môžete zadať <class="center">za názov obrázku do značky img (napríklad <img src="" class="center">).

Varovania

Najlepšie je hostovať svoje vlastné obrázky na serveri Imgur alebo podobnom, ak plánujete odosielanie obrázkov na svoju webovú stránku. Uverejňovanie fotografií iných osôb môže mať za následok porušenie autorských práv.

Ako vytvoriť jednoduchú webovú stránku pomocou HTML?

Kroky