Jak na úspěšný webWordPress

Jak fungují webové stránky (HTML, CSS, JavaScript i PHP)

Používání internetu se stalo běžnou součástí našich životů. Denně si na internetu čteme zprávy nebo používáme různé aplikace. Jak ale takové webové stránky vlastně fungují tak trochu zevnitř? Podíváme se na naprosto základní principy toho, jak vlastně webové stránky vypadají a co se to na našem počítači nebo mobilu děje, když si nějaký web prohlížíme.

Toto rozhodně není manuál pro pokročilé uživatele, nebo ty, kteří hledají podrobné návody. Jde o velmi zjednodušený a hlavně pouze principiální pohled na to, jak weby fungují od naprostých základů až po to, jakou roli ve tvorbě webu mají programovací jazyky.

Základem je HTML kód

Když otevřeme webovou stránku, tak vidíme, že se skládá z různých prvků, jako jsou obrázky, text, videa, ale třeba také různá pole pro zadávání textu. Když si nějakou stránku otevřeme, tak náš internetový prohlížeč by měl přesně vědět, jak má dané prvky poskládat a jak by měly dané prvky vypadat a kde by měly být umístěny.

Webové stránky jsou tvořeny takzvaným HTML (Hyper-Text Markup Language), což je značkovací jazyk (tedy ne programovací jazyk), který je používám právě pro tvorbu webových stránek. Značkovací jazyk je to proto, že každý prvek na stránce je nějakým způsobem označen takzvanými tagy. Značky jsou to, co pomáhá počítači, aby rozuměl, jak má daný web vypadat.

Tak může vypadat takto:

<h1>Toto je hlavní nadpis</h1>

Text “Toto je hlavní nadpis“ je označen začátečním tagem <h1> a ukončen </h1>, což je v HTML tag, kterým se ohraničuje nadpis 1. úrovně, tedy ten nejdůležitější.

Typů tagů je velké množství, některé ohraničuji odstavce, jiné obrázky, tučný text a tak podobně, a mají různá použití pro různé účely. Tagy mohou být i zanořeny do sebe, tedy když je nějaký prvek součástí jiného (třeba tag pro tučný text je součástí tagu pro odstavec).

V praxi by cokoliv, co se objeví na webu, mělo být označeno tagem. Nám pak internetový prohlížeč předkládá až samotný výsledek toho, jak si tagy přeloží, tedy tagy samotné ani nevidíme, pokud se nepodíváme do zdrojového kódu stránky.

Ve své podstatě je HTML pouze textový soubor, ve kterém jsou v nějakém pořadí popsány pomocí tagů prvky, které se na webu nachází.

Pozor, každý internetový prohlížeč může tyto tagy interpretovat i zobrazovat trochu jinak. Proto stejné stránky mohou vypadat v různých prohlížečích trochu rozdílně, přestože je HTML kód identický.

O vzhled prvků se stará CSS

Dostali jsme webové stránky, kde díky tagům víme, co je odstavec, co nadpis a co obrázek. Prvky ale musí ještě nějak vypadat a třeba barva nebo velikost textu, barva pozadí nebo vůbec to, jak je prvek široký, dlouhý nebo kde se vlastně přesně na výsledném webu nachází. A právě o tohle se starají kaskádové styly, neboli CSS (Cascading Style Sheet).

CSS jednoduše řečeno popisuje vzhled a umístění prvků. Když se vrátíme k našemu tagu <h1>, tedy nadpis 1. úrovně. Co kdybychom chtěli, aby tento nadpis byl červený?

Proto existuje další typ souboru CSS, ve kterém je napsáno, jak má který tag vypadat. V tomto případě bychom do tohoto souboru napsali:

h1 {color:red;}

Díky tomu budou všechny tagy <h1> mít červenou barvu. Můžeme si ovšem dopsat i další vlastnosti, jako velikost písma, barvu pozadí nebo prakticky cokoliv dalšího.

Proto se na různých webech nachází stejné tagy, které ale jinak vypadají. Weby používají stejné tagy, ale právě CSS je rozdílné. I o zobrazování správného vzhledu tagů a jejich obsahu se starají internetové prohlížeče.

Tagy si můžeme i „pojmenovávat“ a přiřazovat jim různé identifikační údaje, takže pak ve stylech upravujeme jen tyto pojmenované tagy. Pokud bychom třeba chtěli, aby jen určité typy h1 nadpisů byly červené, ale ne úplně všechny, tak bychom mohli tyto nadpisy nějak odlišit a pak v CSS upravovat jenom tyto odlišené. Stejně tak můžeme tyto styly psát přímo k jednotlivým tagům.

Praxe je taková, že některé tagy jsou nastylované přímo, ale k tomu ještě vedeme navíc soubor s příponou .css, ve kterém jsou popsány styly prvků a toho, jak mají vypadat.

Shrnutí HTML a CSS

HTML i CSS jsou ve své podstatě textové soubory. HTML je značkovací jazyk, kdy jsou jednotlivé prvky webu označeny takzvanými tagy. Ty mají různé použití a internetové prohlížeče díky nim rozeznají, jaké prvky se na webu nacházejí. HTML tedy dodává webovým stránkám strukturu.

CSS určuje, jak dané prvky vypadají a kde se přesně nacházejí, když se stránka zobrazí uživateli. Styly je možné zapisovat přímo k jednotlivým prvkům, nebo pak obecně, kdy budou tyto styly aplikovány podle toho, jak si prvky v HTML označíme a jak chceme, aby následně vypadaly. CSS tedy dodává vzhled a rozvržení stránek.

A do třetice JavaScript

JavaScript (JS) je programovací jazyk, kterým se na web přidávají komplexnější a složitější prvky. Může jít o interaktivní mapy, animovanou grafiku, ale také různá pěkně vypadající hejblátka. JavaScript se také používá k různým výpočtům nebo manipulaci s HTML kódem. Může jít třeba o různé kalkulačky, kdy my zadáme nějaké údaje a JavaScriptový program z těchto údajů něco vypočte a výsledek přidá do HTML kódu, který se nám zobrazí.

Může jít také o různé odesílání formulářů nebo detekci toho, co se na stránkách děje. Asi jste si všimli, že na nějakých webech se třeba objeví vyskakovací okno nebo reklama, když vyjedeme myší z prohlížeče. Případně se otevře nějaké okno po nějakém čase, co na webu strávíme. Tohle všechno jsou dynamické prvky, za kterými na 99 % stojí právě JavaScript, který podle nějakých podmínek upravuje, přidává nebo odebírá HTML kód nebo CSS.

Prakticky každou webovou stránku, kterou máme v počítači, bychom mohli popsat právě kombinací HTML, CSS a JavaScriptu + načtením potřebných souborů jako jsou třeba obrázky.

Webové stránky se vytváří dynamicky pomocí PHP

Co vidíme v internetovém prohlížeči je v zásadě vždy ona kombinace HTML+CSS+JS. Čistě teoreticky bychom mohli stránky ukládat jednu po druhé do souborů a ty pak jen pomocí prohlížeče otevírat. Bylo by to ovšem extrémně zdlouhavé a náročné na prostor. Stránky se dnes vytváří dynamicky, na což slouží dalčí programovací jazyk PHP, který ovšem my nevidíme. Jak to tedy funguje?

Webové stránky jsou vždy uloženy na nějakém vzdáleném počítači, kterému říkáme server. Když zadáme URL adresu nějakých stránek, tak náš počítač kontaktuje server, který zašle vše potřebné, tedy HTML+CSS+JS, abychom mohli stránku správně zobrazit. Před tím, než ovšem tuto trojkombinaci zašle, tak jí podle nějakých požadavků zcela vytvoří, a zašle až výsledek.

Pro toto vytvoření stránek je potřeba databáze, ve které jsou uloženy všechny potřebné informace a obsah stránek. Databázi si můžeme ve své podstatě představit jako excelovskou tabulku (respektive hodně tabulek), která je nějakým způsobem strukturovaná. Pomocí PHP se z této tabulky tahají data a vytváří se tak webové stránky.

 Zde si ukážeme VELMI primitivní náhled toho, jak by to mohlo vypadat.

Takhle by mohla vypadat naše primitivní databáze:

Číslo článku

Nadpis článku

Obsah článku

1

<h1>Jak uvařit kuře<h1> 

<p>Kuře koupíme, umyjeme a uvaříme</p>

2

<h1>Jak umýt auto<h1>

<p>Koupíme auto, namočíme houbu a myjeme</p>

Na serveru se pak nachází program napsaný právě v PHP, který z této databáze tahá informace a vyváří z nich HTML kód podle adresy, kterou chceme navštívit. PHP umí také dynamicky stránky měnit a je schopný plnit různí funkce a úkony, ale základem je právě ono dynamické vytváření webových stránek na základě nějakých požadavků.

Teď bude následovat něco, co doporučujeme programátorům prostě přeskočit, aby jim nepraskla žilka v hlavě. Následující řádky by se mohly nacházet v počítačovém programu, ale píšeme je zcela lidsky (tedy by to v reálu vypadalo o dost jinak, ale znovu, jde jen o princip). Tato by tedy onen „program“ vypadal:

Načti z databáze Nadpis článku podle Čísla článku X a zobraz ho

Načti z databáze Obsah článku podle Čísla článku X a zobraz ho

My teď navštívíme webové stránky například paradnisuperweb.cz/1/, kdy ono /1/ říká serveru, jaký článek chceme vidět, a podle toho server ví, jaké údaje chceme načítat. Pokud by místo 1 v URL adrese bylo 2, tak by stejný program načítal řádek číslo 2, a tak dál. Jde o extrémní zjednodušení, protože URL adresy vypadají o dost jinak, než aby to bylo pouze číslo, ale principielně to takto funguje.

Program na serveru teď udělá to, že se podívá do tabulky a načte z řádku s Číslem článku 1 vložený HTML kód a vloží ho na správná místa stránky. Tento výsledný HTML kód nám pak server zašle a my si ho my zobrazíme. Výsledek by vypadal:

Jak uvařit kuře

Kuře koupíme, umyjeme a uvaříme

V praxi za sebou onen náš “program” naskládal údaje z tabulky, jak jsme mu řekli. Znovu opakuji, že nejde o opravdový program, a jde pouze o lidské zadání instrukcí, kterým by počítač nerozuměl.

PHP umí také vytvářet stránky na míru

PHP umí vytvářet stránky zcela dynamicky na základě prakticky libovolných požadavků. Každý návštěvník tak může vidět zcela něco jiného. Velmi dobrý příklad jsou sociální sítě jako Facebook.

Když navštívíme Facebook.com, tak se dostaneme na přihlašovací stránku. Když se přihlásíme, tak uvidíme pod sebou naskládané příspěvky. Každý uživatel vidí tyto příspěvky zcela jiné. Dokonce i když znovu načteme tuto webovou stránku, tak se nám zobrazí něco jiného – příspěvky budou pravděpodobně velmi jiné, v jiné pořadí a tak dál. A to jsme pořád na stránce Facebook.com tedy bez nějakých přidaných informací v URL).

Proč se to děje? Když navštívíme Facebook a přihlásíme se, tak nám server podle toho, kdo jsme, zcela dynamicky vytvoří nové stránky, které se už asi nikdy nebudou opakovat. Tyto stránky pak zašle našemu prohlížeči, který je zobrazí, ale vytváří si je zcela sám podle toho, jak usoudí.

Facebook je samozřejmě extrémní případ neskutečně složitých algoritmů. Facebook dokonce ani nepoužívá pouze PHP, ale i různé další programovací jazyky, ale jde vidět, co to ta dynamičnost stránek opravdu je.

Co se tedy stane, když navštívíme nějaké webové stránky?

Navštívíme webové stránky s nějakou URL adresou. Podle té webový server pozná, jakou stránku chceme vidět a na jakou část databáze se má dívat. Pomocí PHP vytáhne z databáze potřebné údaje a vytvoří HTML kód, který server zašle našemu prohlížeči.

Internetový prohlížeč kombinací HTML+CSS+JavaScriptu pozná strukturu+vzhled a umístění prvků+dynamické prvky, a složí tak webové stránky, na které se díváme nebo je jinak používáme.

A toto všechno se typicky stane během sekundy nebo několika málo sekund.

Další články ze série o WordPressu:

  1. Jak si vytvořit webové stránky – postup, rady i tipy
  2. Jak fungují webové stránky (HTML, CSS, JavaScript i PHP)
  3. Co je WordPress a proč na něm postavit web
  4. Jak ručně nainstalovat WordPress krok za krokem
  5. Co je WordPressový plugin a jak ho nainstalovat
  6. Základní nastavení WordPressu krok za krokem
  7. Jak pravidelně a zdarma zálohovat WordPress
  8. Základy optimalizace WordPressu – cachování a zrychlení načítání
  9. Optimalizujme obrázky na WordPressu a zrychleme tak celý web
  10. Jak na zabezpečení WordPress webu, abyste mohli klidně spát
  11. Jak (nejen) ve WordPressu používat rubriky a štítky/tagy
  12. Jak ve WordPressu vytvořit menu
  13. WordPress Stránka (Page) vs. Příspěvek (Post) – jaký je v nich rozdíl?

Podobné články

0 Komentářů
Zpetná vazba ve článku
Podívat se na všechny komentáře
Back to top button