Webové technologie

Na dnešním cvičení se podíváme na základní webové technologie, které se používají pro tvorbu webových stránek. Ukážeme si, jak s nimi pracovat a jak si vytvořit vlastní webovou stránku.

Webová stránka je digitální dokument, který je přístupný přes webový prohlížeč a může obsahovat text, obrázky, videa, odkazy a různé interaktivní prvky. Webovou stránku lze vytvořit pomocí webových technologií, což je soubor nástrojů, standardů a programovacích jazyků, které umožňují její tvorbu, zobrazení a interakci na internetu. Mezi nejpoužívanější patří HTML, CSS a JavaScript. HTML určuje základní strukturu stránky, CSS slouží k jejímu vizuálnímu stylování a JavaScript dodává stránce interaktivitu a dynamické funkce.

Vytvoření webové stránky začíná návrhem její struktury a obsahu. Nejprve se definuje HTML, které určuje jednotlivé části stránky, jako jsou nadpisy, odstavce, obrázky nebo odkazy. Poté se pomocí CSS stránka styluje, aby měla požadovaný vzhled a uspořádání. Nakonec se do stránky může doplnit JavaScript pro interaktivitu, například animace, formuláře nebo dynamické načítání obsahu. Moderní weby často využívají i další technologie, jako jsou knihovny a frameworky, které usnadňují práci a zajišťují rychlejší a efektivnější fungování webu. My se dnes podíváme na základní principy.

HyperText Markup Language (HTML)

HTML (HyperText Markup Language) je značkovací jazyk, který definuje obsah a sémantiku webových stránek. HTML obsahuje značky, známé i jako tagy, pomocí kterých lze zapisovat HTML elementy. Ty se dělí na dvě skupiny: elementy a prázdné elementy (můžeme se setkat i s názvy párové a nepárové elementy). Připomeňme si syntaxi prázdného elementu:

<img src="obrazek.jpg" alt="Ukázkový obrázek" >

A syntaxi elementu:

<p>Toto je souvislý text.</p>

Některé HTML značky mohou mít atributy, což jsou dodatečné informace nebo vlastnosti elementu. Jazyk HTML také umožňuje vytvářet vlastní atributy, které jsou pojmenované prefixem data-. Ty mohou být užitečné především při tvorbě interaktivních webů.

Některé elementy mohou obsahovat jiné elementy. Tím vzniká vztah rodič–potomek. Tuto hierarchickou strukturu si lze velmi pěkně představit jako strom. Je důležité dávat pozor na správné uzavírání značek: značku, která byla otevřena jako poslední, uzavíráme jako první.

Každý HTML element má svůj vlastní význam a určuje sémantiku webové stránky. Je proto důležité vybírat správné elementy s ohledem na jejich význam. Člověk může často význam obsahu odhadnout z jeho vzhledu, ale stroj nikoli. Správná sémantika je zásadní například pro asistivní technologie, jako jsou čtečky pro nevidomé, které by jinak viděly stránku jen jako neuspořádaný text.

Základní struktura webové stránky

Základní struktura webové stránky vypadá následovně:

<!DOCTYPE html>
<html lang="cs">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

Jedná se prázdnou webovou stránku s prázdným elementem body. Tuto stránku lze v prostředí VS Code snadno vytvořit. Stačí vytvořit nový HTML soubor (soubor s příponou .html), napsat ! a zmáčknout tabulátor. Do této kostry můžeme nyní postupně doplňovat další HTML elementy a začít tak tvořit obsah webové stránky.

HTML elementy

Jak již bylo zmíněno, sémantika webu je určena vhodnými HTML elementy. Kostru stránky tvoříme strukturálními elementy, mezi které patří:

<header>
Hlavička stránky, kde se obvykle nachází logo, název stránky a hlavní navigační menu.
<nav>
Navigační blok, kde jsou odkazy na hlavní části webu, usnadňující pohyb uživatele mezi stránkami.
<footer>
Patička stránky, obsahující kontaktní informace, odkazy na právní upozornění nebo autorská práva.
<article>
Samostatný článek nebo příspěvek, například blogový příspěvek, tisková zpráva nebo novinka.
<section>
Sekce, která logicky rozděluje obsah do tematických bloků, například jednotlivé kapitoly nebo tematické části stránky.
<main>
Hlavní obsah stránky, kam se umisťuje primární text, obrázky a multimédia, tedy část, která je pro návštěvníka nejdůležitější.

Tyto strukturální elementy definují rámec stránky, a s jejich pomocí je možné stavět sémanticky správný web, který je přehledný a dobře čitelný jak pro lidi, tak pro vyhledávače a jiné nástroje.

Kromě strukturálních elementů existují i specifičtější obsahové elementy, které určují přesný typ obsahu a jeho význam na stránce. Mezi nejdůležitější elementy patří:

<h1> až <h6>
Nadpisy různé úrovně, které dávají stránce hierarchii a pomáhají uživatelům i vyhledávačům orientovat se v obsahu. h1 je nejvyšší úroveň, obvykle hlavní název stránky, a h6 nejnižší, pro menší podnadpisy.
<p>
Odstavec textu. Používá se k oddělení souvislých textových bloků tak, aby byl obsah přehledný a sémanticky správně strukturovaný.
<a>
Hypertextový odkaz. Pomocí atributu href určuje cílovou adresu, na kterou se uživatel po kliknutí přesměruje.
<img>
Obrázek na stránce, může mít více formátů. Cesta k obrázku je určena atributem src, alternativní popis obrázku pomocí atributu alt.
<ul>, <ol> a <li>
Jedná se o seznam s odrážkami a o číslovaný seznam. Jsou vhodné třeba pro výčet položek. HTML element li představuje jednotlivou položku seznamu.

Kromě těchto sémantických elementů existují generické kontejnery <div> a <span>, které nemají samy o sobě význam, ale používají se pro seskupování nebo stylování obsahu.

Cascading Style Sheets (CSS)

Přestože HTML elementy mají výchozí vizualizaci, která je popsána standardem, mohou se v různých prohlížečích zobrazovat různě. K vizualizaci webové stránky slouží technologie CSS. Je důležité uvědomit si oddělení funkcionality. Zatímto HTML určuje sémantiku a obsah stránky, CSS určuje barvy, fonty, rozložení a další vizuální vlastnosti.

Selektory

CSS se skládá ze sady pravidel. Každé pravidlo se skládá ze selektoru a deklaračního bloku. Pomocí selektoru vybíráme element jazyka HTML na webové stránce a v deklaračním bloku říkáme, co se má s tímto elementem stát. Deklarační blok se skládá z deklarací a každá deklarace se skládá z vlastnosti a hodnoty. Elementu tedy nastavíme vlastnosti na hodnoty, které jsou v deklaračním bloku uvedeny. Připomeňme si strukturu CSS pravidla:

h1 {
  color: blue;
}

Existuje několik typů selektorů. Postupně si ukážeme ty nejzákladnější.

Element selektor

Element selektor (můžete se také setkat s názvem tag name selector nebo type selector) vybírá HTML elementy podle jejich názvu. Pokud například napíšeme následující pravidlo, všechny elementy h1 na stránce budou červené.

h1 {
  color: red;
}

Class selektor

Class selektory vybírají HTML elementy podle atributu class. Tato pravidla začínají tečkou.

.subtitle {
  color: black;
}

Velmi podobně můžeme vybrat element na základě jejich atributu id. Místo tečky napíšeme #. Pamatujme ale na to, že konkrétní ID může být na stránce použito pouze jednou a že každý HTML element může mít nejvýše jedno ID.

Univerzální selektor

Jedná se o selektor, který vybere všechny HTML tagy. Je uvozen *.

* {
  margin: 0;
}

CSS box model

Když už známe CSS pravidla a jejich syntaxi, můžeme si představit CSS box model, bez kterého bychom vlastně stránku ani nemohli efektivně stylovat. CSS box model je základní stavební jednotka každého HTML elementu, který se zobrazuje v prohlížeči. Každý element totiž není jen samotný obsah – text, obrázek nebo odkaz – ale vždy tvoří obdélníkový box, který můžeme pomocí CSS ovlivňovat.

Box se skládá ze čtyř hlavních částí:

Content
Samotný obsah boxu, například text nebo obrázek.
Padding
Prostor mezi obsahem a hranicí boxu.
Border
Rámeček kolem boxu.
Margin
Prostor mezi tímto boxem a okolními elementy, který určuje jeho odstup od ostatních prvků na stránce.

Díky box modelu můžeme přesně určovat velikost, prostor a vzhled jednotlivých prvků, což je základem pro jejich umístění na stránce.

Pozicování a responzivní layout

Pro vizualizaci webové stránky nestačí určit pouze barvy a font písma, musíme také navrhnout správné rozvržení prvků na stránce. To, jak se elementy umisťují vůči sobě a stránce řeší pozicování. Díky různým typům pozice můžeme obsah přesně posunout, přichytit nebo vrstvit, což dává stránce jasnou strukturu.

Pro moderní weby je navíc zásadní responzivní layout, tedy schopnost stránky automaticky se přizpůsobit různým velikostem obrazovek. Pozicování se dá na webu řešit různými způsoby, těmi nejdůležitějšími jsou ale Flexbox a Grid. Jedná se o CSS layout systémy, které určují, jak se jednotlivé elementy na stránce rozmístí a zarovnají. Flexbox je vhodný pro jednorozměrné rozvržení, tedy pro řádky nebo sloupce. Grid nabízí dvourozměrný systém, kde můžeme přesně definovat řádky i sloupce a umisťovat prvky do složitějších mřížek. Díky těmto vlastnostem můžeme vytvářet přehledné, flexibilní a responzivní layouty, které dobře fungují na všech typech zařízení.

Propojení HTML a CSS

V zásadě máme tři možnosti, jak propojit HTML kód s CSS styly. Vhodnost použití závisí od dané situace.

Externí CSS

V tomto případě je CSS uloženo v samostatném souboru (nebo souborech) s příponou .css. K HTML kódu jej připojíme pomocí elementu link v hlavičce webové stránky. Tento způsob se hodí pro většinu webových stránek, jelikož jasně odděluje obsah a vizualizaci webové stránky.

<head>
    <meta charset="utf-8">
    <title>Ukázka vložení externího CSS</title>
    <link rel="stylesheet" href="style.css">
</head>

Vnořené CSS

V případě vnořeného CSS zapisujeme jednotlivá CSS pravidla přímo do webové stránky do elementu style. Ten je nutné umístit buď do elementu head nebo body. Tento způsob je vhodné použít pouze pro malé ukázky, jelikož se kód může velmi rychle stát nepřehledným.

<head>
    <meta charset="utf-8">
    <title>Ukázka vnořeného CSS</title>
    <style>
      h1 {
        color: blue;
      }
    </style>
</head>

Inline CSS

Jedná se o způsob, kdy obsah deklaračního bloku CSS pravidla zapisujeme do atributu style. Tento způsob je velmi nepřehledný a je lepší ho vůbec nepoužívat.

<h1 style="color: blue;">Nadpis</h1>

Úkoly k dnešnímu cvičení

Úkol číslo 1
Vytvořte si svou vlastní osobní stránku. Dbejte na správnou sémantiku HTML. Pro rozložení stránky použijte strukturální elementy.
Úkol číslo 2
Ke stránce připojte CSS soubor. Vytvořte základní layout stránky (pomocí flexboxu nebo gridu) a napište několik CSS pravidel.