Python týden Jarní BF
100% homeoffice, 100% časově flexibilní fulltime programátor pro ITnetwork.cz. #bezdeadlinu Mám zájem!
Využij Jarní akci a získej od nás 50 % bodů navíc zdarma! Zároveň také probíhá Python týden se slevou na e-learning až 80 %

1. diel - Úvod do HTML a váš prvý web

Vitajte v prvej lekcii on-line kurzu o tvorbe jednoduchých webových stránok. Jazyk HTML je základom pre tvorbu webov. Sám o sebe je veľmi jednoduchý a všetky webové stránky ho využívajú. Zložitejšie weby HTML miešajú s niekoľkými ďalšími jazykmi, niektoré z nich si v seriáli tiež ukážeme. Prejdeme úplné základy HTML a vytvoríme svojej jednoduchej prvej stránky, ktoré umiestnime na internet.

Editor

K písania HTML kódu nebudeme používať poznámkový blok, pretože mu chýba mnoho funkcií. Medzi ne patrí najmä prehľadné zvýrazňovanie kódu alebo podpora kódovania češtiny a koncov riadok. Stiahnite si teda nejaký múdrejší editor. Na začiatku si vystačíme s českým editorom PSPad, ak ho nemáte, stiahnite si ho a nainštalujte. Pre vážnejšie projekty je potreba tzv. IDE, čo je pokročilejšie editor, ktorý navyše aj napovedá tagy, kontroluje čo píšete a podobne. Veľmi odporúčam IDE od JetBrains, v ktorých programujeme ITnetwork. Pre HTML sa hodia webstore alebo PhpStorm, ak plánujete neskôr pracovať aj v PHP.

Spustite si PSPad a v menu hore vyberme vo časti Formát hodnotu UTF-8.

Nastavenie UTF-8 v PSPadu

Tým sme nastavili spôsob kódovania (najmä) českých znakov. Kódovanie UTF-8 sa využíva u všetkých správne napísaných webov. Windows bohužiaľ UTF ako predvolené kódovanie nepoužívajú, z toho dôvodu nie je predvolený ani tu v PSPadu. Je veľmi dôležité, aby ste svoje stránky editovali iba v editoroch čo UTF-8 podporujú, inak dôjde k rozbitiu diakritiky. Napríklad je zlý nápad vytvoriť stránky v PSPadu a potom do nich niečo dopísať v Poznámkový blok.

Prvá webová stránka

HTML stránku je veľmi jednoduché vytvoriť, je to vlastne len textový dokument. Vytvorme nový súbor (Menu Súbor -> Nový) a ako typ súboru vyberieme z ponuky HTML.

HTML editor

Tým sme založili novú HTML stránku. PSPad nám už nejaký kód predpripravili, ten ale nebudeme používať, preto všetok text zmažte a napíšeme si ho znova.

HTML sa skladá zo značiek (tzv. Tagov). Samo o sebe umožňuje hlavne dodávať prvkom (ďalej elementom) na stránke určitý význam a to je aj jeho hlavná úloha. Predtým sa používal aj na grafické štýlovanie stránok, ale pretože vzniknuté weby boli neprehľadné, bol obmedzený len na webový obsah.

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

Tagy slúži na to, aby sme nimi mohli obaľovať text a tak mu dávať určitý význam (napr. Toto je dôležitý text, toto nadpis, zoznam, tabuľka). Tagy sa píšu do špicatých zátvoriek. Veľmi špecifickým tagom je odkaz, ktorý umožňuje prechádzať medzi jednotlivými stránkami a tak je previazať. Od toho skratka HTML (Hyper Text Mark Up Language = odkazové a značkovací jazyk).

HTML súbor má určitú štruktúru. Na začiatok súboru vložíme tzv. Doctype:

<!DOCTYPE html>

Tým definujeme, že textový súbor je HTML dokumentom. Výkričníka si zatiaľ nevšímajte, proste sa tam píše :) Ďalej definujeme samotný HTML dokument. Ten je rozdelený na 2 časti - hlavičku a telo. Hlavička obsahuje informácie pre prehliadač a vyhľadávače, v tele nájdeme samotný obsah webovej stránky.

Upravme náš súbor, aby vyzeral takto:

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
    </head>

    <body>
    </body>
</html>

Na ďalšom riadku otvárame tag html, tým oznamujeme, tu odtiaľ bude začínať naše HTML stránka.

Nasleduje hlavička, ktorá je vložená v tagu

U začiatku HTML si všimnite atribútu lang, ktorý definuje jazyk stránky. Atribút je nejaká rozširujúce informácie k určitému HTML elementu. Tu hovorí, že HTML stránka je v češtine. Hodnoty atribútov sa píšu do úvodzoviek, k atribútom sa ešte vrátime.

Presuňme sa do hlavičky a medzi jej začiatok a koniec vložme informáciu o kódovaní. Robí sa to tagom meta s nasledujúcou syntaxou (zápisom):

<meta charset="utf-8" />

Všimnite si lomítka na konci tagu, takto sa ukončujú nepárové tagy, teda tie, ktoré nemajú 2 časti (začiatok a koniec), ale píšu sa iba raz. Medzi ne tag meta patrí. Pri každom tagu si počas seriálu povieme, či je párový alebo nepárový. Kódovanie sme nastavili na UTF-8.

Ako ďalší riadok pridajme do hlavičky titulok. Jedná sa o párový tag s názvom title, dovnútra tagu napíšeme text titulku.

<title>Moje první webová stránka</title>

Celý váš HTML dokument by mal teraz vyzerať takto:

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <title>Moje první webová stránka</title>
    </head>

    <body>
    </body>
</html>

Hlavičku už máme zatiaľ vyplnenú, teraz sa presuňme do tela (body), čo je tá časť stránky, ktorá je v prehliadači vidieť.

Do tela si vložíme dva odseky textu. Využijeme na to párový tag

(ako paragraph = odsek). V HTML je všetko ako element, aj text tu nemôžeme nechať len tak plávať, ale musí byť obalený na jednotlivé odseky.

<p>Toto je moje první webová stránka, zatím na ní nic není, ale i tak jsem s ní spokojen</p>
<p>Toto je druhý odstavec</p>

Vytvorte si na disku nejakú zložku (napr. Prvá stránka), do ktorej súbor teraz uložte. Pri ukladaní ho nazvite index.html

Keď súbor teraz otvoríte vo webovom prehliadači, mali by ste vidieť váš prvý web. Bude vyzerať ako obrázok nižšie :) Ak tak nevyzerá, nezúfajte a stiahnite si súbor s hotovým webom na konci článku. Môžete sa tak pozrieť, kde ste urobili chybu.

Moje první webová stránka
index.html

Poznámka: HTML stránku možno definovať aj inak a určite sa stretnete s odlišnými definíciami. Táto je však najstručnejšie a najmodernejšie. Náhľad stránky dokáže zobraziť aj PSPad, ten ale používa zastarané jadro IE a moderné tagy v ňom nefungujú, preto ho nepoužívajte.

V budúcej lekcii, Základné HTML tagy , si uvedieme ďalšie tagy, ktoré budete pre váš web potrebovať.


 

Stiahnuť

Stiahnuté 2536x (299 B)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

 

Článok pre vás napísal David Čápka
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sa informačné technológie naučil na Unicorn College - prestížnej súkromnej vysokej škole IT a ekonómie.
Všetky články v sekcii
Webové stránky krok za krokom
Miniatúra
Nasledujúci článok
Základné HTML tagy
Aktivity (1)

 

 

Komentáre

Avatar
Milan Turyna
Redaktor
Avatar
Milan Turyna:16.10.2019 15:17

První bych zkontroloval kódování souboru jestli ho máš na UTF-8 (doporučené kódování) a můžeš ještě přidat

<meta charset="UTF-8">

ale to je spíš pro prohlížeče a vyhledávače.

 
Odpovedať
16.10.2019 15:17
Avatar
Pavel Raiter
Člen
Avatar
Pavel Raiter:13.11.2019 11:10

Ahoj, prosím vás, jaký editor si mohu stáhnout pro Macbook? Děkuji za typ.

 
Odpovedať
13.11.2019 11:10
Avatar
Jurajs
Člen
Avatar
Odpovedá na Pavel Raiter
Jurajs:13.11.2019 14:22

Ahoj, zkus Atom nebo Brackets ;)

 
Odpovedať
13.11.2019 14:22
Avatar
Adam Liška
Člen
Avatar
Adam Liška:23.11.2019 20:58

Nejspíše jsi tam nezadal kodování UTF-8. Pokuď používáš PSPad tak to tam jde dát jak to je na obrázku, pokuď něco jiného tak do hlavičky vlož kod <meta charset="UTF-8"> :)

 
Odpovedať
23.11.2019 20:58
Avatar
Tajny
Člen
Avatar
Tajny:20.12.2019 20:36

Super, jedeme dál :-)

Odpovedať
20.12.2019 20:36
Your time is limited, don't waste it living someone else's life.
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Alice
Člen
Avatar
Alice:20. januára 13:39

Ahoj, mám PSPad jenže v položce Formát nemám na výběr hodnotu UTF-8 ani jinou. Co s tím?
Díky

 
Odpovedať
20. januára 13:39
Avatar
Richard Tichý
Redaktor
Avatar
Odpovedá na Alice
Richard Tichý:20. januára 13:41

Pspad není možný na editaci souborů HTML. Pro začátek použij třeba notepad.

Odpovedať
20. januára 13:41
Když už něco rozděláš, měl bys to dokončit.
Avatar
Odpovedá na Alice
Václav Kortus:21. januára 17:42

Ahoj, jdi o záložku dál "kódová stránka" a tam označ unicode UTF-8 BOM (65001)

 
Odpovedať
21. januára 17:42
Avatar
Ladislav Guldan:21. marca 13:01

Hodnota UTF-8 sa nezadáva v položke formát,ale vo vedľajšej položke "kódová stránka"

Editované 21. marca 13:02
 
Odpovedať
21. marca 13:01
Avatar
Peter Machaj
Redaktor
Avatar
Peter Machaj:24. marca 15:49

Prajem pekný deň

Presne tejto problematike som sa dosť dlhú dobu venoval v svojom projekte, kým sa mi podarilo nájsť správny spôsob získavania korektného a správneho kódovania stránky. V svojej testovacej sade rôznych web stránok som narazil aj na absurdity ako napríklad http://stazie.webz.cz/ , kde je sú pod sebou bez problému rovno dva odlišné encodingy. Vo vačšine prípadov sa mi však osvedčil postup:

  1. encoding v hlavičke response z web servera, vačšinou zabalený v 'Content-Type'
  2. encoding v HTML ->> meta tag 'charset' v hlavičke
  3. encoding v HTML ->> meta tag 'content-type' v hlavičke [prvý nájdený]
 
Odpovedať
24. marca 15:49
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!