8. Tvorba webových stránek
HTML a jeho prostředky
HTML = Hypertext Markup Language je značkovací jazyk používaný pro tvorbu webových stránek, které jsou propojeny hypertextovými odkazy. Umožňuje publikaci dokumentů na Internetu. Je charakterizován množinou značek (tagů) a jejich vlastností (atributů). Značky jsou obvykle párové, koncová značka má před názvem znak lomítko. Například <p> Text odstavce </p>. Některé značky jsou nepárové, například vykreslení vodorovné čáry: <hr>. Značky mohou obsahovat vlastnosti, například značka <a> pro odkaz udává, kam se uživatel po kliknutí na odkaz dostane. Například <a href="https://www.seznam.cz"> Seznam </a>. Ke značkám je však možno přiložit i více vlastností. Můžeme si tak například vytvořit odkaz, který se otevře v novém okně/panelu: <a href="https://www.seznam.cz" target="_blank"> Seznam </a>.
Struktura HTML dokumentu:
- Deklarace typu dokumentu – značka <!DOCTYPE html> sděluje prohlížeči, že otevřel HTML dokument (tzv. DTD direktiva začíná znakem <! a je určena prohlížeči)
- Kořenový element – mezi značkami <html> a </html> je celý dokument
- Hlavička dokumentu – mezi značkami <head> a </head> jsou metadata (data poskytující informaci o jiných datech), která se vztahují k celému dokumentu (kódování, název dokumentu, autor, popis, klíčová slova, titulek, kaskádové styly)
- Tělo dokumentu – mezi značkami <body> a </body>
Dokument může dále obsahovat komentáře (mezi značkami </-- a -->, prohlížeč je ignoruje, jsou pro programátora), kód skriptovacích jazyků nebo kaskádové styly (jazyk CSS pro popis způsobu zobrazení jednotlivých prvků na stránkách).
Vykreslení dokumentu na displej prohlížečem podle html kódu se nazývá parsování.
Ukázka jednoduchého kódu HTML kódu
Základní tagy a jejich rozdělení
Značky mohou být párové nebo nepárové.
Z hlediska významu je lze rozdělit na
- strukturální – rozvrhují strukturu dokumentu (odstavce <p> nebo nadpisy <h1>, <h2>)
- popisné (sémantické) – popisují povahu obsahu prvku (nadpis <title>)
- stylistické – určují vzhled prvku (tučné písmo <b>)
WYSIWYG editor
CCS základní popis
CCS (Kaskádové styly) je jazyk, který popisuje způsob zobrazení jednotlivých prvků na stránkách napsaných v HTML, XHTML nebo XML. Umožňuje definovat rozdílná zobrazení pro různá zařízení.
Definice kaskádových stylů se skládá z pravidel, každé pravidlo obsahuje selektor (vybírá prvky, ke kterým se nastavují styly – například tělo dokumentu = body) a blok deklarací (v závorkách {}). Příklad pravidla, které nastavuje barvu pozadí stránky na bílou, barvu textu na černou a okraj na 10 pixelů (important zvyšuje sílu deklarace, přepisuje všechna ostatní nastavení okraje):
body {
background-color: white;
color: black;
padding: 10px !important;
}
Výhody CSS:
- rozsáhlejší formátování oproti samotnému HTML
- jednodušší údržba webové prezentace
- oddělení struktury a stylu
- možnost dynamické změny pomocí JavaScriptu
- různé styly pro různá výstupní zařízení (pro mobil, nebo např. i pro čtečku Braillova písma)
- je možné zrychlit načtení stránky pomocí cachování.
Nevýhody: někdy nedostatečná podpora v prohlížečích.
Cachování je technika přednačítání dat do mezipaměti, poté se teprve zobrazí na webu, a při dalším zobrazení stránky se data načítají už pouze z mezipaměti, což je výrazně rychlejší.
PHP základní popis, JavaScript
PHP=Hyper Preprocessor je skriptovací programovací jazyk určený především pro programování dynamických internetových stránek a webových aplikací ve formátu HTML, XHTML a WML. Lze ho použít i k tvorbě konzolových a desktopových aplikací.
V případě použití pro dynamické stránky se skript provádí na straně serveru, k uživateli se přenáší výsledek jeho činnosti. PHP je nezávislý na platformě, podporuje mnoho knihoven, lze ho kombinovat například i s databázovými systémy (MySQL). V PHP je napsána například Wikipedie nebo Facebook.
PHP je dynamicky typovaný (datový typ proměnné je vázán na hodnotu), má různou úroveň viditelnosti proměnných, podporuje práci s ukazateli (u proměnných eviduje, kolik ukazatelů na ni směřuje a podle toho se rozhoduje, zda ji může zrušit).
JavaScript je multiplatformní, objektově orientovaný, událostmi řízený skriptovací jazyk. Jedna z možností jeho použití je tvorba webových stránek. Je vkládán přímo do HTML kódu. Interpretaci provádí webový prohlížeč návštěvníka stránky. JavaScript se používá pro ovládání různých interaktivních prvků GUI, pro tvoření animací a efektů obrázků. Program se spouští až po stažení webové stránky z Internetu, na rozdíl například od PHP.
Rysy objektově orientovaného programování v jazyce JavaScript:
- Dynamické (datové typy podle hodnot, objekty jako asociativní pole – klíčem může být číslo, řetězec nebo složená datová struktura, možnost změny atributů a jejich hodnot za běhu programu, atributy objektu lze zpracovávat i for cyklem)
- Funkcionální (funkce jsou také objekty, mají své atributy i své vnitřní funkce)
- Prototypové (náhrada klasického konceptu třída – instance, funkce mají význam jako konstruktory objektů, nerozlišuje funkce a metody při definici, dědičnost není, ale lze ji pomocí prototypů nasimulovat, zpracování výjimek)
Metoda je funkce, která je svázaná s určitým objektem nebo hodnotou – například metoda, která zobrazí v okně dialogové okno, se zapíše takto: window.prompt("Zadej hodnotu: ").
Dynamické html (scriptovací jazyky, programování)
DHTML = dynamické HTML, kombinace technologií HTML a například JavaScriptu.
Statické HTML stránky jsou takové, jejichž obsah se po načtení nemění. U dynamických se mění ve chvíli, kdy nastane nějaká událost. Např. vysunovací menu webové stránky při najetí myší nebo obarvení textu, na který myš najede. Jedná se o programování řízené událostmi – do HTML kódu se vloží kód v JavaScriptu (např. pokud myš je nad daným textem, zavolá se přenastavení barvy textu).
Skriptovací jazyk je programovací jazyk navržený k automatizaci úloh. Obvykle není třeba deklarovat proměnné, používá se dynamická typová kontrola, automatické nastavení hodnot u nedefinovaných proměnných a konstant, zotavení z chyb, podporuje práci se složitějšími datovými typy (např. seznamy) bez potřeby starat se o uvolňování paměti, obsahuje funkce pro zpracování textů. Například JavaScript, Python, PHP. Program zapsaný ve skriptovacím jazyce se nazývá skript. Skript není třeba překládat, často tvoří rozšiřitelnou část nějakého softwarového projektu, kterou lze měnit beze změny hlavního spustitelného souboru. Některé skripty nabízejí objektově orientované programování (Python, PHP).
Kompilovaný jazyk – zdrojový kód se musí přeložit do strojového kódu, aby bylo možné program spustit na procesoru. Překlad zdrojového kódu zajišťuje překladač (kompiler). Příklady: C, C++, Pascal, Delphi.
Výhody: rychlost, nepřístupnost kódu (bez zdrojového kódu není možné jej upravit), snadné odhalení některých typů chyb (kompilátor odhalí chyby při kompilaci)
Nevýhody: závislost na platformě (typu procesoru a operačním systému), nemožnost editace zkompilovaného programu, běhové chyby způsobené špatnou správou paměti kompilátor neodhalí
Interpretovaný jazyk – tzv. interpret nepřekládá celý program najednou, ale při běhu programu překládá pouze to, co je v danou chvíli potřeba. Příklady: Python, PHP.
Výhody: přenositelnost, jednodušší vývoj (správa paměti pomocí tzv. garbage collectoru, často není třeba zadávat datové typy), stabilita, jednoduchá editace (za běhu)
Nevýhody: je pomalejší, často se obtížně hledají chyby, které se objeví za běhu, zranitelnost (zdrojový kód je dostupný)
Webové formuláře, ukládání dat
Webový formulář slouží uživateli odeslat prostřednictvím webového prohlížeče data na webový server. Může obsahovat vstupní pole pro text, přepínače, vyskakovací menu, tlačítka a další (checkbox,, radio button, roletkový seznam, pole pro víceřádkový text). Používají se například pro vyplnění objednávky, zadání dodací adresy, vyhledání části textu na webové stránce.
Formuláře je možné vytvořit pomocí programovacích jazyků, jako je například HTML, PHP, Javascript. Propojením formuláře se skriptovacím jazykem (JavaScript, PHP, Pel, ASP) lze vytvořit dynamické formuláře. PHP může například zobrazit vložená data na jiné stránce, uložit data do databáze, vygenerovat e-mail na základě vložených dat, včetně připojení přílohy.
Pravidla pro tvorbu stránek HTML, webdesign
Na co se při tvorbě stránek zaměřit:
- pro koho stránky tvoříme, co je cílem, jak bude web vypadat, jaký bude jeho obsah
- přehlednost: viditelný titulek, stručné menu, hlavní stránka je rozcestník
- jednoduchost, čitelnost, nekombinovat mnoho barev, pozor na barvu pozadí
- obsah: aktuální, zajímavý (raději méně a dobře), publikace novinek, aktualizace staršího obsahu
- jasnost: návštěvníci musí zjistit, co mají udělat
- funkčnost, rychlost: nezdržovat hudbou nebo videem, pokud je zbytečné
- před spuštěním otestovat, někomu ukázat, zapracovat připomínky
POJMY: DOCX, open source, sociální síť
DOCX je přípona souborů vytvořený programem Microsoft Word nebo jiným programem pro zpracování textu, například Open Office Writer, Apple Pages. Obsahuje formátovaný text, může obsahovat i obrázky, nakreslené objekty a další prvky. Tato přípona se používá od verze MS Word 2016, na rozdíl od souborů .doc, které ukládají data dokumentu v jednom binárním souboru, .docx je uložen pomocí formátu Open XML (jedná se o soubor samostatných souborů a složek v komprimovaném balíčku zip).
Text dokumentu se ukládá jako prostý text, obrázky se ukládají zvlášť jako jednotlivé obrazové soubory apod. Soubor ve formátu .docx lze otevřít pomocí mnoha různých programů, například MS Word, MS WordPad, Adobe Acrobat, Google Drive, Corel Draw, Libre Office.
Open source = Otevřený software (OSS) je software dostupný bez licence a s přístupným zdrojovým kódem.
Jeho výhodou jsou nižší náklady, vyšší kvalita a bezpečnost, možnost vlastního zásahu.
Někdy pochází z projektů univerzitních studentů nebo z vědeckého výzkumu, může být nabízen i komerční firmou. V tom případě je sice dodáván zdarma, ale zákazník platí vývojářům za konkrétní úkony (odstraňování chyb, přidání nových funkcí, školení, instalace, technická podpora, přizpůsobení softwaru). Další možnost je k softwaru zdarma prodávat licence na doplňky, například datové knihovny, nebo prodávat specializovaný hardware, se kterým software spolupracuje. Společnosti nabízející open source software stanovují průmyslovou normu a podporují firemní image. Na vývoji open source se může podílet řada nezávislých programátorů, kteří hledají chyby v programech, a proto je tento typ software bezpečnější. Mix různých přístupů urychluje inovace systému, programátoři mohou přidávat vlastní nové funkce, a vývoj odpovídá technickým požadavkům (není vystaven komerčnímu tlaku, který často snižuje kvalitu softwaru).
Některé příklady open source softwaru: Operační systém Linux, internetový prohlížeč Mozilla Firefox, multimediální přehrávač VLC media, archivační a kompresní program 7-Zip
Sociální síť je služba na Internetu, která registrovaným členům umožňuje vytvářet si osobní nebo firemní veřejný (nebo částečně veřejný) profil, komunikovat spolu, sdílet informace, fotografie, videa, provozovat chat a další aktivity. Nejznámější sociální síť je Facebook (přes miliardu registrovaných uživatelů), dále například Twitter, LinkedIn, Instagram, TikTok, SnapChat.
Firmy mohou využívat sociální sítě různými způsoby:
- profil (základní informace) a novinky
- společenská odpovědnost – propagace charitativních aktivit
- hry – zábava a vzdělání zákazníků
- zákaznický servis – možnost pokládat dotazy a požadavky, odpovědi slouží i dalším zákazníkům
- monitoring a aktivní komunikace – sledování pozitivních a negativních komentářů
- prodej – např. eShop na Facebook