Stavím web,a cestu si píšu bokem.

Základy HTML, část první

Tohke je první stavební kámen každé webové stránky! HTML je zkratka pro HyperText Markup Language. Ale to zní hrozně složitě, takže si to řekneme lidsky. Co je vlastně to HTML? Představ si, že máš před sebou prázdný papír. Nejsou na něm žádná pravidla, žádné čáry, nic. A teď chceš někomu napsat dopis. Aby ten člověk pochopil, co čte, používáš písmena, slova, věty. Když chceš něco zdůraznit, napíšeš to velkým písmem. Když chceš oddělit myšlenky, uděláš odstavec. A úplně stejně funguje HTML. HTML je jazyk, kterým říkáš počítači (respektive prohlížeči), jak má zobrazit text na webové stránce. HTML se nepovažuje za programovací jazyk, tím myslím v komunitě ajťáků, ale je to hlavní kostra webové stránky. Tato kostra obsahuje určité specifické znaky, které internetový prohlížeč dokáže přečíst a podle toho je zobrazit právě pomocí webové stránky. Není to programování v pravém slova smyslu. HTML nic „nepočítá“. Jen popisuje. Čím teda začneme? Přirovnání ke znakům Zároveň si musím představit tebe čtenáři, jako třeba moji vlastní babičku, které je 86 let a budu se ti to snažit co nejlépe vysvětlit a nejvíce jednoduše, jako bych to vysvětloval právě moji babičce samotné. Rozhodli jste se napsat dopis, kde chcete nejspíš mít, jako každý mentálně zralý člověk nějaký normální text. Aby ten dopis po Vás vůbec mohl někdo přečíst, tak bude muset určitě: písmena → tvoří slova slova → tvoří věty věty → tvoří odstavce V HTML je to podobné, jen místo písmen používáš tzv. značky (tagy ). Akorát je to tak, ze jste se rozhodli vytvořit webovou stránku, ale ta taky bude muset obsahovat "něco", co tam chcete sdělit. Budete chtít napsat internetový článek a k tomu, aby to internetový prohlížeč po Vás mohl přečíst, tak musíte používat právě tyto HTML znaky. Ty značky říkají: „tohle je nadpis“ „tohle je odstavec“ „tohle je odkaz“ Jak to vypadá v praxi? Normální text v dopisu by vypadal takhle: Toto je nadpis. Tohle je standardní text. To myslím chápe zatím každý z Vas, ne? Pokud jste třeba mladšího věku a nevíte vlastně, co to vůbec ten dopis je a znamená, obzvlášť v dnešní moderní době, tak si představte, jak píšete kamarádovi SMS, nebo zprávu na WhatsApp. No a to samé bude chtít napsat na webovou stránku, kterou berte jako kus nepopsaného papíru. V HTML to sdělíme takhle: <h1> Toto je nadpis </h1> <p> Tohle je standardní text. </p> V hlavě teď určitě zazní otázka, co se tady vlastně děje? <h1> říká: „toto je hlavní nadpis“ <p> říká: „toto je odstavec“ </h1> a </p> říkají: „tady to končí“ Když začínáš s HTML, nemysli na to jako na „kód“. Je to jako ve Wordu, když píšeš na počítači a chceš označit myší určitý text silným písmem, tak misto toho kliknutí na B znak ve Wordu, tak to začátek určitého textu označíš, kde chceš aby to začínalo být tučný písmo, napíšeš předtím znak HTML a to <bold> a zde to začne být tučný, a tímhle se to zas uzavře </bold> a zde je to zase normální text. Proč je HTML důležité? Bez HTML by web neexistoval. Každá stránka, kterou otevřeš — ať už je to Google, YouTube nebo e-shop — má v základu HTML. Je to úplný základ! Ale opravdu přátelé, jakmile nepochopíme HTML, tak se vážně dál nepodaří vůbec webovou stránku vytvořit. Pojďme se na to podívat ještě o trochu víc. Když chci vytvořit webovou stránku, tak se nabízí to, že potřebujeme taky nějaký Word, který za nás bude psát to "něco" na internet a ke všemu tam můžeme přidat obrázek a barevný nadpis nad ten obrázek. Takový program se nazývá "vývojové prostředí" a také editor, to znamená že pokud v tom budete něco psát, tak budete vlastně tu stránku vyvíjet - tím pádem se můžete nazývat webový vývojář. Vytvoříme novou složku do které vložíme nový soubor s názvem index.html a ten otevřeme a začneme zde stavět základní stavební kameny. Jsou zde logická pravidla, které je potřeba pochopit, jinak je zbytečné se o něco dalšího upřímně snažit, pokud se začneme ztrácet už v tomto začátku. Nejdřív sdělím v tomto souboru to, co chci aby náš prohlížeč vyzobrazil. To právě pomocí znaků, které dáváme to těch ostrých závorek <začátek> , tohle má sdělit, že zde začíná část nazvana :začátek", ale jak zjistíme, kde ten začátek stránky končí? No tím, že použijete uzavření této části pomocí dalšího znaku, který definujeme to, že tady začátek končí a to znakem: </začátek> , vidíš v čem je jiný, než ten první znak? Tak dobrý, ale co s tím? Začneme první zprávou a to jaký druh kódu bude náš prohlížeč číst. To definujeme tím, že hned na začátku sdělíme znakem