Maturitní otázky

18. Tvorba webových stránek

11 min read

Tvorba webových stránek

Web, internet, HTTP, domény, hosting

Internet a web patří mezi nejzásadnější technologie současnosti. Zatímco internet je samotná globální síť propojující zařízení, web je služba, která nad touto sítí funguje – umožňuje zobrazovat webové stránky, komunikovat, sdílet informace a vytvářet aplikace.

Internet

  • Je to celosvětová síť zařízení, která spolu komunikují pomocí protokolů TCP/IP.
  • Fyzicky jej tvoří optické kabely, routery, servery, poskytovatelé připojení (ISP) atd.
  • Slouží jako základ pro další služby: web, e-mail, streamování, online hry apod.

Internet = „silnice“, po kterých jezdí data. Web = auta a informace, které po těchto silnicích jezdí.

Web (World Wide Web – WWW)

  • Web je služba běžící nad internetem, založená na systému propojených dokumentů (webových stránek).
  • Tyto dokumenty jsou napsány v jazyce HTML, stylizovány pomocí CSS a mohou být interaktivní díky JavaScriptu.
  • Uživatelé k webu přistupují přes webový prohlížeč (např. Chrome, Firefox, Edge).

HTTP (Hypertext Transfer Protocol)

  • Protokol, který definuje, jak se přenáší webové stránky mezi klientem a serverem.
  • Funguje na principu požadavek–odpověď:
    • Klient (např. prohlížeč) odešle požadavek na webovou stránku.
    • Server odpoví HTML kódem, který se zobrazí uživateli.
  • HTTP přenáší data nešifrovaně (port 80), zatímco HTTPS přidává šifrování pomocí SSL/TLS (port 443), čímž zajišťuje bezpečnost dat, např. při přihlašování.

Domény

  • Doménové jméno je textová adresa webu, např. seznam.cz, kterou si člověk snadno zapamatuje.
  • Doména se skládá z několika částí:
    • www – subdoména (volitelná)
    • seznam – název domény (druhá úroveň)
    • cz – doména nejvyšší úrovně (TLD – Top Level Domain)
  • Aby prohlížeč našel správný server, doménové jméno se překládá na IP adresu pomocí systému DNS (Domain Name System).

Hosting

Aby byla webová stránka dostupná komukoli na internetu, musí být uložena na serveru, který běží nepřetržitě a má přístup k síti – tuto službu zajišťuje webhosting.

  • Webhosting = pronájem prostoru na serveru, kde jsou uložené soubory webu (HTML, obrázky, databáze…)
  • Hostingové firmy zajišťují:
    • Úložiště a připojení k internetu
    • Zálohování a bezpečnost
    • Správu domény, databází, e-mailů
  • Typy hostingu:
    • Sdílený hosting – levný, ale méně výkonný, vhodný pro menší weby
    • VPS (Virtual Private Server) – vyhrazený virtuální prostor, více možností nastavení
    • Dedkovaný server – celý fyzický server pro jednoho zákazníka
    • Cloud hosting – moderní forma, flexibilní výkon, vysoká dostupnost

HTML – struktura

HTML (HyperText Markup Language) je základní jazyk pro tvorbu webových stránek. Neřídí jejich vzhled, ale určuje, jaký obsah na stránce je a jak je uspořádán – tedy strukturu.

Základní struktura HTML dokumentu

Každý HTML dokument by měl mít základní kostru. Níže je příklad minimální stránky:

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>Moje první stránka</title>
  </head>
  <body>
    <h1>Vítejte na mém webu!</h1>
    <p>Toto je první odstavec textu.</p>
  </body>
</html>

Vysvětlení

  • <!DOCTYPE html> – říká prohlížeči, že jde o HTML5
  • <html> – kořen dokumentu
  • <head> – hlavička (neviditelná část): kódování, název, stylování, skripty
  • <body> – tělo stránky, vše, co uživatel skutečně vidí

Text a obsah

Nadpisy

Používají se značky <h1> až <h6>, kde <h1> je nejdůležitější.

<h1>Hlavní nadpis</h1>
<h2>Podnadpis</h2>

Odstavce

Každý odstavec textu patří do značky <p>.

<p>Toto je samostatný odstavec textu.</p>

Odkazy

Pro hypertextové odkazy použijeme <a>:

<a href="https://www.seznam.cz">Jdi na Seznam</a>

Obrázky

Obrázky se vkládají pomocí <img> (samouzavírací tag):

<img src="obrazek.jpg" alt="Popis obrázku">

Seznamy

Nečíslovaný seznam:

<ul>
  <li>První položka</li>
  <li>Druhá položka</li>
</ul>

Číslovaný seznam:

<ol>
  <li>První krok</li>
  <li>Druhý krok</li>
</ol>

Tabulky

HTML tabulka se skládá z řádků a buněk:

<table border="1">
  <tr>
    <th>Jméno</th>
    <th>Věk</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>25</td>
  </tr>
</table>

Formuláře

Formuláře slouží pro zadávání dat (např. přihlašování):

<form action="/odeslat" method="post">
  <label for="jmeno">Jméno:</label>
  <input type="text" id="jmeno" name="jmeno">
  
  <br><br>
  
  <label for="heslo">Heslo:</label>
  <input type="password" id="heslo" name="heslo">
  
  <br><br>
  
  <button type="submit">Odeslat</button>
</form>

Sémantické značky

Moderní HTML používá sémantické prvky, které lépe popisují účel části stránky:

<header>
  <h1>Nadpis webu</h1>
</header>
 
<nav>
  <a href="#">Domů</a>
  <a href="#">O nás</a>
</nav>
 
<main>
  <article>
    <h2>Nový článek</h2>
    <p>Obsah článku…</p>
  </article>
</main>
 
<footer>
  <p>&copy; 2025 Moje firma</p>
</footer>
  • <header> – horní část webu (logo, název)
  • <nav> – navigační menu
  • <main> – hlavní obsah
  • <article> – samostatný obsahový blok (např. blogový článek)
  • <footer> – patička webu

CSS – vzhled

CSS (Cascading Style Sheets) je jazyk pro popis vzhledu HTML prvků. Umožňuje měnit barvy, velikosti, rozložení, písma a celkový design webu. Zatímco HTML řeší obsah, CSS určuje, jak tento obsah vypadá.

Způsoby připojení CSS k HTML

  1. Externí styl – nejlepší a nejčistší způsob: samostatný .css soubor:
<link rel="stylesheet" href="styl.css">
  1. Interní styl – přímo v <head> HTML stránky:
<style>
  body {
    background-color: lightblue;
  }
</style>
  1. Inline styl – přímo v HTML tagu (nevhodné pro větší projekty):
<p style="color: red;">Tento odstavec je červený.</p>

Základní vlastnosti a příklady

Barvy

body {
  background-color: #f0f0f0;
  color: #333333;
}

  • background-color – barva pozadí

  • color – barva textu (písmo)

Text

h1 {
  font-family: Arial, sans-serif;
  font-size: 32px;
  text-align: center;
  font-weight: bold;
}

  • font-family – druh písma

  • font-size – velikost

  • text-align – zarovnání (left, center, right)

  • font-weight – tloušťka písma

Okraje a výplně

p {
  margin: 20px;
  padding: 10px;
}

  • margin – vnější okraj prvku

  • padding – vnitřní mezera uvnitř prvku

Selektory

CSS vybírá HTML prvky pomocí tzv. selektorů:

  • Podle značky: p { }
  • Podle třídy: .cerveny { color: red; }
  • Podle ID: #hlavni-nadpis { font-size: 40px; }
<p class="cerveny">Tento odstavec bude červený.</p>
<h1 id="hlavni-nadpis">Toto je hlavní nadpis</h1>

Box model

Každý HTML prvek je obalen tzv. box-modelem, který tvoří:

  • content – samotný obsah

  • padding – mezera kolem obsahu

  • border – rámeček

  • margin – mezera okolo rámečku

div {
  padding: 20px;
  border: 2px solid black;
  margin: 30px;
}

Rozložení stránky

Flexbox – moderní způsob zarovnávání prvků

.kontejner {
  display: flex;
  justify-content: center;
  align-items: center;
}

  • justify-content – horizontální zarovnání

  • align-items – vertikální zarovnání

Grid – síťové uspořádání prvků

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
  • Umožňuje snadno tvořit sloupce a řádky (např. 2 sloupce vedle sebe)

Přechody a efekty

button {
  transition: background-color 0.3s;
}
 
button:hover {
  background-color: green;
}
  • transition – plynulý přechod
  • :hover – styl při najetí myší

JavaScript – interaktivita

JavaScript (JS) je programovací jazyk, který umožňuje interaktivitu na webových stránkách – tedy to, co HTML ani CSS neumí: reagovat na kliknutí, načítat data, měnit obsah stránky bez znovunačtení, validovat formuláře atd.

JavaScript běží v prohlížeči na straně klienta (uživatele), takže je rychlý a interaktivní.

Základní použití JavaScriptu v HTML

1. Interní skript (v <script> v HTML souboru):

<script>
  alert("Vítejte na stránce!");
</script>

2. Externí skript (lepší způsob – zvlášť JS soubor):

<script src="skript.js"></script>

Základní příkazy a syntaxe JavaScriptu

Výpis textu do stránky:

document.write("Toto je výpis do stránky");

Zobrazení okna (např. upozornění):

alert("Pozor! Něco se děje.");

Výpis do konzole (pro vývojáře):

console.log("Něco se vypisuje do konzole");

Proměnné a datové typy

let jmeno = "Anna";        // text (string)
let vek = 25;              // číslo
let aktivni = true;        // logická hodnota (boolean)

  • let – proměnná (moderní způsob)

  • const – neměnná proměnná

  • var – starší způsob (už se moc nepoužívá)

Události – co se má stát po kliknutí

<button onclick="zobrazZpravu()">Klikni mě</button>
 
<script>
  function zobrazZpravu() {
    alert("Tlačítko bylo stisknuto!");
  }
</script>

Funkce zobrazZpravu se spustí po kliknutí na tlačítko – interaktivita!

Změna obsahu stránky pomocí JavaScriptu

<p id="text">Původní text</p>
<button onclick="zmenText()">Změnit text</button>
 
<script>
  function zmenText() {
    document.getElementById("text").innerHTML = "Text byl změněn!";
  }
</script>
  • Pomocí getElementById() vybereme HTML prvek a změníme jeho obsah.

Podmínky a cykly

Podmínka:

let vek = 18;
 
if (vek >= 18) {
  alert("Jsi plnoletý.");
} else {
  alert("Je ti méně než 18.");
}

Cyklus:

for (let i = 0; i < 5; i++) {
  console.log("Číslo: " + i);
}

Validace formuláře (příklad)

<form onsubmit="return zkontrolujFormular()">
  <input type="text" id="jmeno">
  <input type="submit" value="Odeslat">
</form>
 
<script>
  function zkontrolujFormular() {
    let jmeno = document.getElementById("jmeno").value;
    if (jmeno === "") {
      alert("Zadej své jméno!");
      return false; // zabrání odeslání formuláře
    }
    return true;
  }
</script>

Editory (VS Code)

Editor kódu je speciální program určený pro psaní a úpravu zdrojového kódu. Na rozdíl od běžných textových editorů nabízí funkce, které vývojáři usnadňují práci a zvyšují produktivitu.

  • Studio Code (VS Code) je jeden z nejoblíbenějších editorů mezi vývojáři webových stránek. Je dostupný zdarma, funguje na různých operačních systémech a umožňuje efektivní práci díky mnoha užitečným funkcím.

  • Mezi hlavní výhody editorů jako VS Code patří zvýrazňování syntaxe, které pomáhá snadněji číst a rozumět kódu, automatické doplňování, které urychluje psaní, a integrovaný terminál, který umožňuje spouštět příkazy přímo z editoru. Důležitou roli hrají také rozšíření, která umožňují přidávat nové funkce, například automatické formátování kódu nebo rychlé náhledy změn ve webovém prohlížeči.

  • Existují i jiné editory, například Sublime Text, který je známý svou rychlostí, nebo Notepad++, který je vhodný pro začátečníky díky jednoduchému rozhraní.

  • Používání specializovaných editorů je velmi důležité, protože výrazně usnadňuje vývoj webových aplikací a zlepšuje kvalitu výsledného kódu.

Jasně, přidám k jednotlivým pojmům ještě pár doplňujících bodů, aby to bylo ještě komplexnější:

Frameworky (Bootstrap, React)

Framework je sada nástrojů, knihoven a pravidel, které usnadňují a urychlují vývoj webových aplikací. Frameworky obsahují předpřipravené komponenty a funkce, které lze použít místo psaní všeho od začátku.

Bootstrap je framework pro tvorbu vzhledu webu (CSS framework). Umožňuje rychle vytvořit responsivní a moderní design díky hotovým stylům, tlačítkům, formulářům a dalším prvkům. Bootstrap také obsahuje nástroje pro rozložení stránky, které fungují dobře na různých zařízeních.

  • Podporuje mobilní první přístup („mobile-first“), tedy design začíná optimalizací pro mobilní zařízení.

  • Nabízí mnoho předpřipravených komponent, jako jsou navigační lišty, modální okna, karty nebo tlačítka.

  • Usnadňuje práci s grid systémem (mřížkou), což je základ pro responzivní rozložení.

React je framework (spíše knihovna) pro tvorbu uživatelských rozhraní v JavaScriptu. Umožňuje vytvářet webové aplikace z opakovaně použitelných komponent, které se dynamicky aktualizují podle změn dat. React pomáhá tvořit interaktivní a rychlé weby.

  • Využívá tzv. virtuální DOM pro efektivní aktualizaci stránky.

  • Umožňuje rozdělit webovou aplikaci na menší části, což zjednodušuje vývoj i údržbu.

  • Velká komunita a množství knihoven umožňují rychlý vývoj i složitějších aplikací.

CMS (Content Management System)

CMS je systém pro správu obsahu webových stránek bez nutnosti hlubokých znalostí programování. Uživatelé mohou snadno vytvářet, upravovat a publikovat obsah pomocí uživatelského rozhraní.

WordPress je nejrozšířenější CMS na světě. Nabízí mnoho šablon a pluginů, které umožňují rychle vytvořit web, blog nebo e-shop.

  • CMS často nabízí rozhraní pro správu uživatelů a jejich oprávnění.

  • Podporuje integraci různých nástrojů pro SEO, analytiku i zabezpečení.

  • Umožňuje práci vícero lidí najednou díky redakčním workflow.

Responzivní design

Responzivní design je způsob tvorby webových stránek tak, aby se automaticky přizpůsobily různým velikostem obrazovek – od mobilních telefonů, přes tablety až po desktopové monitory.

Používá se k tomu především CSS technika media queries, která umožňuje změnit rozložení a styl podle velikosti zařízení.

  • Důležitou součástí jsou flexibilní obrázky a fonty, které se mění podle velikosti obrazovky.

  • Pomáhá zvýšit použitelnost webu a zlepšit pozice ve vyhledávačích.

  • Umožňuje jednou vytvořit web, který je přístupný všem uživatelům bez nutnosti zvláštní verze pro mobily.

SEO (Search Engine Optimization)

SEO znamená optimalizaci webu pro vyhledávače. Jde o soubor technik a postupů, které pomáhají webovým stránkám dosahovat lepších pozic ve výsledcích vyhledávání (například na Googlu).

Mezi základní SEO patří správné používání nadpisů, klíčových slov, optimalizace rychlosti načítání stránky a vytváření kvalitního obsahu.

  • SEO také zahrnuje budování kvalitních zpětných odkazů (link building).

  • Vyhledávače hodnotí i bezpečnost webu (například použití SSL).

  • SEO vyžaduje pravidelnou aktualizaci obsahu a technickou údržbu.

Hosting

Hosting je služba, která umožňuje umístit webové stránky na server připojený k internetu, aby byly dostupné pro uživatele 24 hodin denně.

Existují různé typy hostingu – sdílený, VPS nebo dedikovaný server – podle náročnosti a velikosti webu.

  • Výběr hostingu ovlivňuje rychlost načítání webu, což je důležité i pro SEO.

  • Kvalitní hosting často nabízí zálohování dat a bezpečnostní opatření.

  • Některé hostingy poskytují i snadnou instalaci CMS a dalších nástrojů.

Zabezpečení (SSL)

SSL (Secure Sockets Layer) je technologie, která zabezpečuje komunikaci mezi webovým serverem a prohlížečem šifrováním dat.

Použití SSL certifikátu zajistí, že citlivé informace (například hesla nebo čísla platebních karet) jsou přenášeny bezpečně a není možné je odposlechnout.

  • Weby s SSL mají adresu začínající na https:// a zobrazují se s ikonou zámku v prohlížeči, což zvyšuje důvěru uživatelů.

  • SSL je dnes považováno za standard pro všechny weby, nejen pro e-shopy či banky.

  • Existují různé typy certifikátů, od základních po rozšířené s potvrzením identity.

Budoucnost – PWA, AI ve webu

PWA (Progressive Web Apps) jsou moderní webové aplikace, které kombinují výhody webu a mobilních aplikací. Lze je instalovat na zařízení, fungují offline a poskytují rychlý a plynulý uživatelský zážitek.

  • PWA mohou posílat push notifikace jako běžné aplikace.

  • Umožňují offline režim díky ukládání dat do cache.

  • Jsou nezávislé na platformě – fungují na všech zařízeních s moderním prohlížečem.

AI (Umělá inteligence) ve webu znamená využití technologií strojového učení a automatizace pro personalizaci obsahu, chatovací roboty nebo analýzu dat, což pomáhá zlepšit interakci s uživateli a efektivitu webových služeb.

  • AI se používá například pro doporučování produktů, rozpoznávání hlasu nebo automatické odpovědi.

  • Pomáhá také s optimalizací obsahu a automatickou tvorbou webových prvků.

  • S rozvojem AI se očekává stále větší automatizace a zlepšení uživatelských zážitků.

Graph View

Backlinks