Co je webová stránka a jak funguje? Jednoduché vysvětlení

Publikováno: Autor:

Webové stránky jsou dnes běžnou součástí internetu, ale víte, co se skutečně skrývá za jejich fungováním? Co se stane ve chvíli, kdy do prohlížeče zadáte webovou adresu a stisknete Enter? Vysvětlíme si, co je webová stránka, z čeho se skládá, jak komunikuje s webovým serverem a jakou roli při jejím načítání hrají doména, DNS, webhosting, HTML, CSS, JavaScript a databáze.

Co je to webová stránka a jak funguje?
Webové stránky dnes používáme prakticky každý den – čteme články, nakupujeme v e-shopech, sledujeme videa, používáme internetové bankovnictví nebo hledáme informace ve vyhledávačích. Co se ale skutečně skrývá za webovou stránkou a co se stane ve chvíli, kdy do prohlížeče zadáte její adresu?

Webová stránka je dokument nebo soubor dokumentů dostupný prostřednictvím internetu. Většinou je vytvořena pomocí technologií jako HTML, CSS a JavaScript a je uložena na webovém serveru. Prohlížeč si od serveru vyžádá potřebná data a následně je zobrazí uživateli.

Co je webová stránka?
Webová stránka je obsah dostupný na konkrétní internetové adrese, tedy URL. Může obsahovat například text, obrázky, fotografie, videa, odkazy, formuláře, tabulky, animace nebo interaktivní prvky.

Jedna webová stránka může být například:

  • článek na internetovém magazínu,
  • kontaktní stránka firmy,
  • produktová stránka e-shopu,
  • přihlašovací stránka,
  • stránka s fotografiemi,
  • jednoduchá osobní prezentace.

Je důležité rozlišovat webovou stránku a web. Webová stránka je konkrétní část webu. Web neboli webový serverový obsah může tvořit velké množství jednotlivých stránek propojených odkazy.

Například internetový obchod může mít tisíce produktových stránek, ale všechny společně tvoří jeden web.

Jak webová stránka funguje?
Zjednodušeně lze celý proces popsat takto:

uživatel → webový prohlížeč → DNS → webový server → webová stránka → prohlížeč

Když například zadáte do prohlížeče adresu webu, prohlížeč musí nejprve zjistit, kde se daný web nachází. K tomu se používá systém DNS.

DNS převede název domény, například example.cz, na IP adresu serveru. Prohlížeč se následně spojí se serverem a požádá ho o požadovanou stránku.

Server požadavek zpracuje a odešle zpět potřebná data. Prohlížeč je následně interpretuje a zobrazí výslednou webovou stránku.

Co je URL?
URL je internetová adresa, pomocí které lze určit konkrétní zdroj na internetu.

Například:

https://www.example.cz/clanek

URL může obsahovat několik částí:

  • https – komunikační protokol,
  • www.example.cz – doména,
  • /clanek – konkrétní cesta ke stránce.

Díky URL může prohlížeč zjistit, jaký zdroj má požadovat.

Co je doména?
Doména je snadno zapamatovatelný název webu. Lidé si například lépe zapamatují název domény než číselnou IP adresu serveru.

Doména může vypadat například takto:

example.cz

Doména se skládá z názvu a doménové koncovky. U českých webů se často používá .cz, ale existují také například .com, .net, .org a stovky dalších doménových koncovek.

Doména sama o sobě ještě není webová stránka. Aby se na ní zobrazoval web, musí být správně nastaven DNS systém a web musí být umístěn na serveru.

Co je webhosting?
Webhosting je služba, která umožňuje uložit webové stránky na server a zpřístupnit je prostřednictvím internetu.

Na webhostingovém serveru mohou být uloženy například:

  • HTML soubory,
  • CSS soubory,
  • JavaScript,
  • obrázky,
  • videa,
  • PHP skripty,
  • databáze,
  • další soubory potřebné pro fungování webu.

Pokud si tedy vytvoříte vlastní web, obvykle potřebujete doménu a webhosting.

Doména určuje, kde se web nachází z pohledu uživatele, zatímco hosting poskytuje prostor a technické prostředí, ve kterém web funguje.

Z čeho se webová stránka skládá?
Moderní webové stránky obvykle využívají několik technologií.

HTML
HTML určuje strukturu stránky. Pomocí HTML se definují například nadpisy, odstavce, odkazy, obrázky, tabulky nebo formuláře.

HTML si lze představit jako základní konstrukci webové stránky.

CSS
CSS se stará především o vzhled stránky. Určuje například barvy, velikosti textu, rozložení jednotlivých prvků, okraje, mezery nebo vzhled tlačítek.

Bez CSS by mnoho moderních webů působilo velmi jednoduše.

JavaScript
JavaScript umožňuje na stránce vytvářet interaktivní prvky. Může například reagovat na kliknutí uživatele, měnit obsah stránky, zobrazovat nabídky nebo komunikovat se serverem.

PHP a další serverové technologie
Některé weby nejsou tvořeny pouze statickými HTML soubory. Na serveru může běžet například PHP nebo jiný programovací jazyk.

Serverový program může podle požadavku uživatele vytvořit výsledný HTML dokument.

To je běžné například u redakčních systémů, internetových obchodů nebo členských webů.

Statická a dynamická webová stránka
Webové stránky lze zjednodušeně rozdělit na statické a dynamické.

Statická stránka má předem připravený obsah. Server obvykle odešle uložený soubor prohlížeči.

Dynamická stránka se může vytvářet až v okamžiku požadavku uživatele. Server například načte informace z databáze, zpracuje je pomocí programu a vytvoří výslednou stránku.

Dynamické stránky umožňují například:

  • uživatelské účty,
  • komentáře,
  • e-shopy,
  • objednávky,
  • vyhledávání,
  • administrační systémy,
  • personalizovaný obsah.

Jak funguje webová stránka ve WordPressu?
WordPress je jedním z nejrozšířenějších redakčních systémů. Uživatel obvykle nemusí ručně vytvářet každou stránku v HTML.

WordPress pracuje například s:

  • PHP,
  • databází MySQL nebo MariaDB,
  • HTML,
  • CSS,
  • JavaScriptem.

Když návštěvník otevře stránku WordPressu, server může zpracovat požadavek, načíst potřebná data z databáze a vytvořit výsledný obsah, který následně odešle prohlížeči.

WordPress proto není pouze sada HTML souborů. Jde o komplexní systém, který pracuje se serverem, databází, šablonou a často také pluginy.

Co se stane po zadání webové adresy?
Představme si, že do prohlížeče zadáte:

https://www.example.cz

Nejprve se řeší překlad domény pomocí DNS. Zařízení zjistí IP adresu serveru, ke kterému se má připojit.

Následně prohlížeč naváže spojení se serverem. Pokud web používá HTTPS, komunikace je zabezpečena pomocí šifrovaného spojení.

Prohlížeč odešle požadavek na server.

Server požadavek zpracuje a odešle odpověď. Ta může obsahovat HTML dokument a odkazy na další potřebné soubory, například CSS, JavaScript nebo obrázky.

Prohlížeč tyto soubory načte a sestaví výsledný vzhled stránky.

Celý proces může proběhnout během zlomku sekundy.

Co je webový server?
Webový server je systém, který přijímá požadavky od webových prohlížečů a poskytuje jim požadovaný obsah.

Mezi známé webové serverové technologie patří například:

  • Apache,
  • Nginx,
  • LiteSpeed,
  • Microsoft IIS.

Webový server může poskytovat statické soubory, ale může také spolupracovat s programovacím jazykem, databází a dalšími službami.

Jak souvisí webová stránka s databází?
Moderní webové stránky často používají databázi.

Databáze může obsahovat například:

  • články,
  • uživatelské účty,
  • produkty,
  • ceny,
  • objednávky,
  • komentáře,
  • nastavení webu.

Když například otevřete produkt v e-shopu, informace o produktu nemusí být přímo uložené v samostatném HTML souboru. Server může informace načíst z databáze a následně vytvořit stránku produktu.

Proč se některé webové stránky načítají pomalu?
Rychlost webu ovlivňuje celá řada faktorů.

Patří mezi ně například:

  • výkon webového serveru,
  • kvalita webhostingu,
  • velikost obrázků,
  • množství JavaScriptu,
  • počet načítaných souborů,
  • databázové dotazy,
  • používané pluginy,
  • špatně napsaný kód,
  • absence cache,
  • vzdálenost serveru,
  • kvalita internetového připojení.

U pomalého webu proto nemusí být problém pouze v internetovém připojení návštěvníka. Příčinou může být také samotný web nebo jeho hosting.

Co je HTTPS?
HTTPS zabezpečuje komunikaci mezi prohlížečem a webovým serverem pomocí šifrování.

U zabezpečeného webu se v adresním řádku prohlížeče používá například:

https://example.cz

HTTPS je dnes standardem a je důležitý zejména u webů, kde uživatelé zadávají přihlašovací údaje, osobní informace nebo jiné citlivější údaje.

Jaký je rozdíl mezi webovou stránkou a webovou aplikací?

Webová stránka může být především informační. Typickým příkladem je článek, stránka firmy nebo jednoduchá prezentace.

Webová aplikace bývá výrazně interaktivnější. Uživatel v ní může například vytvářet dokumenty, spravovat účet, objednávat zboží nebo pracovat s různými daty.

Hranice mezi webovou stránkou a webovou aplikací ale není vždy jednoznačná. Moderní web může kombinovat informační obsah s velmi pokročilými funkcemi.

Je webová stránka uložena na internetu?
Přesnější je říci, že webová stránka je uložena na serveru připojeném k internetu.

Server může být umístěný například v datovém centru. Návštěvník k němu přistupuje prostřednictvím internetového připojení.

U velkých webů může být obsah distribuován také prostřednictvím CDN, která umožňuje poskytovat soubory z geograficky vhodnějších serverů.

Jak vytvořit vlastní webovou stránku?
Vytvoření jednoduché webové stránky je dnes poměrně snadné. Existuje několik možností.

Můžete ji vytvořit ručně pomocí HTML, CSS a JavaScriptu. To je vhodné zejména pro pochopení principů fungování webu.

Další možností je použít redakční systém, například WordPress. Ten umožňuje vytvářet a spravovat obsah bez nutnosti ručně programovat každou stránku.

Existují také online nástroje pro tvorbu webů, které umožňují vytvořit stránku pomocí vizuálního editoru.

Pro vlastní profesionální web budete obvykle potřebovat minimálně:

  • doménu,
  • webhosting,
  • vhodný systém nebo vlastní webový kód,
  • HTTPS,
  • kvalitní obsah.

Webová stránka není totéž co doména
Jednou z nejčastějších chyb začátečníků je zaměňování pojmů doména, webhosting a webová stránka.

Doména je adresa, například example.cz.

Webhosting poskytuje prostor a prostředí pro provoz webu.

Webová stránka je samotný obsah, který návštěvník vidí v prohlížeči.

Pro fungující web musí tyto části správně spolupracovat.

Shrnutí
Webová stránka je obsah dostupný prostřednictvím internetu. Může jít o jednoduchý HTML dokument, ale také o velmi složitý systém využívající databáze, serverové programování a JavaScript.

Když návštěvník zadá webovou adresu, prohlížeč pomocí DNS zjistí, kam se má připojit. Následně odešle požadavek na webový server. Server požadavek zpracuje a odešle potřebná data zpět. Prohlížeč je následně zpracuje a zobrazí výslednou stránku.

Za obyčejným otevřením jedné webové stránky tak ve skutečnosti stojí spolupráce domény, DNS, webového serveru, webhostingu, internetového připojení, HTML, CSS, JavaScriptu a případně databáze a serverových aplikací.

Právě tato spolupráce umožňuje, aby se po zadání několika znaků do prohlížeče během okamžiku zobrazil požadovaný obsah.