Geek tričko zdarma Geek tričko zdarma
Hledáme grafika na pohodovou brigádu v Blenderu nebo programátora na hry v PyGame. Máš zájem? Napiš nám na redakce [zavináč] itnetwork.cz!
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde

Lekce 1 - Úvod do HTML a váš první web

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Vítejte v první lekci on-line kurzu o tvorbě jednoduchých webových stránek. Jazyk HTML je základem pro tvorbu webů. Sám o sobě je velmi jednoduchý a všechny webové stránky ho využívají. Složitější weby HTML míchají s několika dalšími jazyky, některé z nich si v seriálu také ukážeme. Projdeme úplné základy HTML a vytvoříme své jednoduché první stránky, které umístíme na internet.

Editor

K psaní HTML kódu nebudeme používat poznámkový blok, jelikož mu chybí mnoho funkcí. Mezi ně patří zejména přehledné zvýrazňování kódu nebo podpora kódování češtiny a konců řádek. Stáhněme si tedy nějaký chytřejší editor. Na začátku si vystačíme s českým editorem PSPad, pokud ho nemáte, stáhněte si ho a nainstalujte. Pro vážnější projekty je potřeba tzv. IDE, což je pokročilejší editor, který navíc i napovídá tagy, kontroluje co píšete a podobně. Velmi doporučuji IDE od JetBrains, ve kterých programujeme ITnetwork. Pro HTML se hodí WebStorm nebo PhpStorm, pokud plánujete později pracovat i v PHP.

Spusťme si PSPad a v menu nahoře vyberme ve položce Formát hodnotu UTF-8.

Nastavení UTF-8 v PSPadu

Tím jsme nastavili způsob kódování (zejména) českých znaků. Kódování UTF-8 se využívá u všech správně napsaných webů. Windows bohužel UTF jako výchozí kódování nepoužívají, z toho důvodu není výchozí ani zde v PSPadu. Je velmi důležité, abyste své stránky editovali pouze v editorech co UTF-8 podporují, jinak dojde k rozbití diakritiky. Například je špatný nápad vytvořit stránky v PSPadu a poté do nich něco dopsat v Poznámkovém bloku.

První webová stránka

HTML stránku je velmi jednoduché vytvořit, je to vlastně jen textový dokument. Vytvořme nový soubor (Menu Soubor -> Nový) a jako typ souboru vybereme z nabídky HTML.

HTML editor

Tím jsme založili novou HTML stránku. PSPad nám již nějaký kód předpřipravil, ten ale nebudeme používat, proto všechen text smažte a napíšeme si ho znovu.

HTML se skládá ze značek (tzv. tagů). Samo o sobě umožňuje hlavně dodávat prvkům (dále elementům) na stránce určitý význam a to je i jeho hlavní úkol. Dříve se používal i na grafické stylování stránek, ale protože vzniklé weby byly nepřehledné, byl omezen pouze na webový obsah.

Tagy slouží k tomu, abychom jimi mohli obalovat text a tak mu dávat určitý význam (např. toto je důležitý text, toto nadpis, seznam, tabulka). Tagy se píší do špičatých závorek. Velmi specifickým tagem je odkaz, který umožňuje procházet mezi jednotlivými stránkami a tak je provázat. Od toho zkratka HTML (Hyper Text Mark Up Language = odkazovací a značkovací jazyk).

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

HTML soubor má určitou strukturu. Na začátek souboru vložíme tzv. doctype:

<!DOCTYPE html>

Tím definujeme, že textový soubor je HTML dokumentem. Vykřičníku si zatím nevšímejte, prostě se tam píše :) Dále definujeme samotný HTML dokument. Ten je rozdělen na 2 části - hlavičku a tělo. Hlavička obsahuje informace pro prohlížeč a vyhledávače, v těle nalezneme samotný obsah webové stránky.

Upravme náš soubor, aby vypadal takto:

<!DOCTYPE html>

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

        <body>
        </body>
</html>

Na dalším řádku otevíráme tag html, tím sdělujeme, zde odtud bude začínat naše HTML stránka.

Následuje hlavička, která je vložena v tagu <head>. Všimněte si, že konec hlavičky se od začátku liší lomítkem. Takto se píší tzv. párové tagy. Párové proto, že jsou dva (začátek a konec) a mezi nimi je vložen jejich obsah, zde obsah hlavičky. Stejně to máme i s tělem (tag body), kde definujeme jeho začátek a konec s lomítkem. Nakonec ukončíme i samotnou HTML stránku.

U začátku HTML si všimněte atributu lang, který definuje jazyk stránky. Atribut je nějaká rozšiřující informace k určitému HTML elementu. Zde říká, že HTML stránka je v češtině. Hodnoty atributů se píší do uvozovek, k atributům se ještě vrátíme.

Přesuňme se do hlavičky a mezi její začátek a konec vložme informaci o kódování. Dělá se to tagem meta s následující syntaxí (zápisem):

<meta charset="utf-8" />

Všimněte si lomítka na konci tagu, takto se ukončují nepárové tagy, tedy ty, které nemají 2 části (začátek a konec), ale píší se pouze jednou. Mezi ně tag meta patří. U každého tagu si během seriálu řekneme, jestli je párový nebo nepárový. Kódování jsme nastavili na UTF-8.

Jako další řádek přidejme do hlavičky titulek. Jedná se o párový tag s názvem title, dovnitř tagu napíšeme text titulku.

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

Celý váš HTML dokument by měl nyní vypadat 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 již máme prozatím vyplněnou, nyní se přesuňme do těla (body), což je ta část stránky, která je v prohlížeči vidět.

Do těla si vložíme dva odstavce textu. Využijeme k tomu párový tag <p> (jako paragraph = odstavec). V HTML je vše jako element, i text zde nemůžeme nechat jen tak plavat, ale musí být obalen na jednotlivé odstavce.

<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>

Vytvořte si na disku nějakou složku (např. První stránka), do které soubor nyní uložte. Při ukládání ho nazvěte index.html

Když soubor nyní otevřete ve webovém prohlížeči, měli byste vidět váš první web. Bude vypadat jako obrázek níže :) Pokud tak nevypadá, nezoufejte a stáhněte si soubor s hotovým webem na konci článku. Můžete se tak podívat, kde jste udělali chybu.

Moje první webová stránka
index.html

Poznámka: HTML stránku lze definovat i jinak a jistě se setkáte s odlišnými definicemi. Tato je však nejstručnější a nejmodernější. Náhled stránky dokáže zobrazit i PSPad, ten ale používá zastaralé jádro IE a moderní tagy v něm nefungují, proto ho nepoužívejte.

V příští lekci, Základní HTML tagy, si uvedeme další tagy, které budete pro váš web potřebovat.


 

Stáhnout

Staženo 2406x (299 B)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
167 hlasů
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 sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Všechny články v sekci
Webové stránky krok za krokem
Miniatura
Následující článek
Základní HTML tagy
Aktivity (8)

 

 

Komentáře
Zobrazit starší komentáře (176)

Avatar
Karel
Člen
Avatar
Karel:5. března 11:41

Ahoj, moc děkuji za tyto stránky a za komentáře pod jednotlivými lekcemi. S programováním začínám a s nadšením jsem se vrhl do PHP. Pak jsem si ale řekl, že mi nic neuteče a začal jsem od úplných základů a to teď se značkovacím jazykem HTML a vůbec toho nelituji, naopak. Článek je srozumitelně napsaný a další zajímavé věci se skrývají v komentářích. Dále oceňuji toliko probírané ukončování nepárových tagů a atribut "cs-cz". Pokud to tak má být, i jen pro pořádek, jsem moc rád, že je to zmíněno hned na začátku, aby mi to přešlo do krve. Měl bych ale jeden dotaz. V rámci PHP jsem si zakoupil Phpstorm, chci ale jít souběžně s lekcemi a tak nyní HTML cvakám v doporučeném PSPadu. V komentářích však často doporučují i jiné, např. Sublimetext 3, Visual studio atd. K PSPadu zde někdo psal, že je zastaralý. Jakožto naprostý začátečník bych se tedy rád ujistil, že PSPad zatím stačí a pokud bude zapotřebí přejít na něco "vyspělejšího" zřejmě na to autor v daném článku upozorní. Jinak díky moc, jak článek, tak komenty pod ním, mám pocit, že čas strávený tady nebude časem promarněným.

 
Odpovědět 5. března 11:41
Avatar
MiroslavP
Člen
Avatar
MiroslavP:7. července 21:42

Zdar,
je to dobrý ;-)

 
Odpovědět 7. července 21:42
Avatar
Jurajs
Člen
Avatar
Odpovídá na Karel
Jurajs:8. července 9:58

Ahoj, pokud cvakáš weby(HTML, CSS) tak doporučuji VSCode nebo Sublime3 jak si zmínil....Ja používám Brackets nebo VSCode...

 
Odpovědět 8. července 9:58
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Karel
Jaroslav Smrž:8. července 13:01

Ahoj, používání IDE nebo editoru nemá na naučení žádný vliv. Tvoř rovnou v PHP Stormu, i když budeš zatím jen kódit HTML a CSS. Je to nejlepší IDE pro tvorbu webů (při použití php, ne c#). Alespoň si zažiješ automatické doplňování párových tagu, uvozovek, závorek a spousty dalších věcí, které ti usnadní práci. Zvykneš si na prostředí a naučíš se jej efektivně používat. Já když bych měl něco psát v PSPadu, tak se z toho po****. Uvidíš, že ti už toto krásně umožní plynulý přechod na PHP a JS, kde se bez IntelliSense neobejdeš.

Odpovědět 8. července 13:01
I have no idea what it is doing but I´m scared to delete it... xD
Avatar
Karel
Člen
Avatar
Odpovídá na Jaroslav Smrž
Karel:24. července 13:38

Děkuji

 
Odpovědět 24. července 13:38
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Teurom
Člen
Avatar
Teurom:27. července 14:48

Ahojte tutorial je zatial super a zrozumitelny . Len tak dalej. Like

 
Odpovědět 27. července 14:48
Avatar
Adam Liška
Člen
Avatar
Adam Liška:14. srpna 16:36

Super návod, děkuji

 
Odpovědět 14. srpna 16:36
Avatar
Odpovídá na Teurom
Rico ThreeDmax:19. srpna 15:58

No jeste aby v 1.lekci nebyl :-X

 
Odpovědět 19. srpna 15:58
Avatar
Tony IR
Člen
Avatar
Tony IR:21. srpna 11:17

Výborně, jedem dál .o)

 
Odpovědět 21. srpna 11:17
Avatar
Vojta Opravil:30. srpna 21:01

Když tam napíšu něco s diakritikou tak to na webu napíše kosočtverec s otazníkem co mám dělat ?

 
Odpovědět 30. srpna 21:01
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 186. Zobrazit vše