9. Webové stránky – HTML a CSS

Web – obecné pojmy

 Web a internet

Internet, často označován jako „síť sítí“ je globální systém, který pomocí protokolů rodiny TCP/IP umožňuje komunikaci mezi lidmi, resp. mezi jejich počítači či jinými zařízeními. Jedná se o velmi praktický nástroj, který lidem šetří čas, úsilí i peníze, a bez něhož by nemohl existovat svět, jak ho známe dnes. Web je poté označení pro systém práce se soubory, které jsou zde uloženy a které jsou zároveň předmětem této komunikace.

 

Klient x server

Data (patřičné soubory) nejsou ale fyzicky uložena „doslova na internetu“, ale na serverech, které jsou poté díky internetu vzájemně propojeny. Koncový uživatel (zařízení) se poté prostřednictvím webového prohlížeče na daný server připojí a posílá mu požadavky, na které očekává odpověď.

 

Webové technologie

HTML (HyperText Markup Language) je značkovací jazyk umožňující publikování souborů na internet. Soubor, který jej obsahuje má koncovku .html. Tyto soubory jsou navzájem propojeny hypertextovými odkazy a tvoří základ webu. V podstatě se jedná o to, co koncový uživatel vidí na monitoru. Pomocí dalších technologií lze např. dynamicky pracovat právě se soubory HTML či je stylovat. Poslední verze je označována jako HTML5.

CSS (Cascading Style Sheets) slouží ke stylování souborů HTML. Je to velmi užitečný (a v poslední době také mocný) nástroj. Aktuální verze CSS3 již umí mj. animace či jiné události, díky čemuž lze pomocí CSS alespoň částečně nahradit např. Javascript.

Serverové technologie jsou technologie používané na internetových serverech. To znamená, že vše, co programátor napíše v serverovém jazyku (může např. vytvářet HTML obsah dokumentů) se vyhotoví dříve, než je hotový soubor poslán zpět uživateli, který si o něj požádal. Příkladem takové technologie může být PHP. S tím také úzce souvisí technologie používané pro tvorbu databází (taktéž na serveru, např. MySql a prostředí PhpMyAdmin), kde jsou obsaženy samotná data. Na žádost serverového jazyka mu jsou patřičná data předána a dále zpracovávána.

Webové technologie na straně klienta se od serverových technologií liší tím, že pokud uživatel provede akci, která vyvolá odpověď od takovéto technologie, není potřeba odesílat žádný požadavek na server. Vše se děje na straně klienta. Jako v současné době hojně používanou klientskou webovou technologií lze uvést např. Javascript. Programátor by však měl vždy myslet na to, že javascript je určen zejména ke grafickému stylování webu. Pomocí javascriptu lze provádět také úkony jako práce s databází, jedná se však o velkou bezpečnostní trhlinu. Tím, že se javascript spouští u uživatele, může si ho případný útočník upravit podle svých potřeb (např. prohlížeč Mozilla Firefox má na úpravu HTML, CSS a js přímo vestavěný nástroj – zkratka f12). Další problém je, že se javascript dá v prohlížeči vypnout. I přesto, že javascript nesmí kvůli bezpečnosti nahrazovat serverový jazyk a zároveň lze zčásti nahradit pomocí CSS, patří neodmyslitelně k modernímu webu. Některé věci přeci jen v CSS udělat nelze (a pravděpodobně ani nebude moci – např. Zjistit polohu kurzoru) či jen velmi složitě.

 

Jak tedy funguje web

Koncový uživatel má zapnutý počítač s připojením k internetu. Otevře si webový prohlížeč a zadá URL adresu stránky, na kterou se chce připojit. Server mu odpoví a uživateli se zobrazí patřičný web. Na tomto webu poté uživatel provádí úkony, které uzná za vhodné. Přitom může využít klientské technologie (např. rolovat menu) nebo podat požadavek na server (kliknutí na odkaz, aktualizace webu aj.). Server (pokud je to potřeba) sáhne do databáze pro patřičné údaje, vygeneruje HTML soubor a odešle jej zpět klientovi.

 

Webová stránka VS. webová aplikace

Podle použitých technologií rozlišujeme webové stránky a webové aplikace. Webovou stránkou je myšlen zpravidla informační web neobsahující žádný nebo skoro žádný javascriptový kód. Oproti tomu webové aplikace jsou postaveny zejména na javascriptu či jeho alternativě. Sem se řadí např. Google dokumenty. V poslední době je však hranice mezi webovou stránkou a aplikací čím dál menší. I weby, které jsou považovány jako statické většinou obsahují alespoň malou část javascriptu (např. vysouvací menu či jiné drobné grafické úpravy). Dalším faktorem ovlivňující tuto hranici je již zmiňované CSS3, které již umí animace, časování, lze využít události jako „mouse hover“ a s trochou práce lze i improvizovat událost kliknutí.

 

Architektura webu

V domovském adresáři souborů tvořících web se vždy musí nacházet soubor index.html, popř. Index.php. Toto je soubor, který se bere jako výchozí. Pokud uživatel nezadá do URL přesnou adresu podstránky, kterou potřebuje, ale zadá pouze adresu samotného serveru, načte se mu právě tento výchozí soubor. V části „head“ tohoto souboru se poté nachází odkazy na další soubory jako je soubor .css, javascriptové soubory, obrázky a mnoho dalšího. Tyto soubory umísťujeme do domovského adresáře webu tak, aby odpovídaly nějaké logické posloupnosti (např. složka s obrázky, v ní podsložka s určitou částí galerie…, jiná složka s js soubory atd.).

 

HTML

 HTML je základní jazyk pro tvorbu webů. Nejedná se však o klasický programovací jazyk, ale o jazyk tzv. značkovací – to proto, že není tvořen klasickými programátorskými strukturami ale tzv. tagy.

 

Základní syntax HTML

Tagy dělíme na párové a nepárové. Zde je jejich syntax:

Párový tag: <div class=’modry‘>Modrý div</div>

Nepárový tag: <img alt=‘Balón‘ src=‘image/balon.png‘>

Syntax párového a nepárového tagu se mírně liší. Párový tag začíná hranatými závorkami <>, v nichž je název a atributy tagu. Poté následuje obsah tagu a následně ukončení. Oproti tomu nepárový tag nemá ono ukončení ani obsah, skládá se pouze z jedné části ohraničené hranatými závorkami.

 

CSS

Cascading Style Sheets – slouží ke stylování souborů HTML. CSS bývá zpravila samostatný soubor oddělený od HTML souborů, což je též jeidná správná možnost. Ostatní způsoby jsou nejenže nepřehledné, ale také nelogické.

 

 

[Celkem: 0 Průměr: 0]

 

Napsat komentář