26. Webové technologie

Opakování

• svg - vkládání grafiky do html
• převod HTML tabulky ze stránky do Excelu (viz souborové formáty - tabulky)
• VSC, PSPad - programátorské textové editory

Zápis (praxe.md):

---

26. Webové technologie
- internetová **služba www** (webový prohlížeč se dotazuje webového serveru)
- komunikace protokolem **http** nebo zabezpečeně **https**
- **webová stránka** = soubor v kódu značkovacího jazyka **html**
- **responzivní web design** - čitelné zobrazení stránek na všech zařízeních

---

Teorie

• www = hypertextové stránky na internetu dostupné pomocí webového prohlížeče
• do prohlížeče vkládáme adresu požadovaných stránek, příp. se odkazujeme na stránky v podobě URL = adresa webového serveru s číslem portu pro naslouchání:
  • protokol://server.doména2.doména1:port/cesta/název_dokumentu#kotva
• komunikace mezi serverem a prohlížečem probíhá pomocí protokolu HTTP (nešifrovaně - port 80) nebo HTTPS (šifrovaně - port 443) - obr.
• dokument webové stránky je zapsán
  • ve značkovacím jazyku HTML (přípony *.htm, *.html)
  • naformátován pomocí kaskádových stylů CSS (často se používají CSS knihovny pro jednotný a snadný design - např. bootstrap)
  • může obsahovat programový kód - skripty (pro interaktivní a dynamické stránky - např. pro hry)
    • skripty překládané prohlížečem - javascript
    • skripty překládané serverem - php, asp.net
• koncepce HTML - párové/nepárové značky v ostrých závorkách, hlavička a tělo dokumentu
  • DOM - objektový model HTML dokumentu (stromová struktura)
• Programy pro tvorbu HTML
  • programátorské textové editory (VSC, PSPad) - viz kapitola textové soubory dříve
  • WYSIWYG editory (Adobe Dreamweaver, dříve MS Web Expression), online (ckeditor, tinyMCE)
• Responzivní web design - čitelné zobrazení stránek na všech zařízeních (hl. mobilních)
• Redakční systémy (CMS) - WordPress, Joomla - stránky uložené v SQL databázi pro snadnou změnu stránek přes webové rozhraní bez znalosti kódování (např. přidávání aktualit)
  • ukázka správy stránek školy
• Webhosting - pronájem internetového úložiště web. stránek pro dostupnost 24/7
  • bezplatný - např. GitHub - navíc správa verzí pomocí softwaru git, servery se šablonami (placeno z reklam) - např. wix.com, webzdarma.cz
  • placený - např. Forpsi
    • ukázka Forpsi webhostingu pro 79401.cz
    • přenos souborů na webhosting pomocí ftp, lépe v šifrované podobě sftp, ftps: webftp.forpsi.com
    • databáze při webhostingu: webmysql.forpsi.com
• Výukové zdroje: w3schools, jakpsatweb

Web prohlížeč - Google Chrome, MS Edge, Mozilla Firefox, Opera, Safari

• Uložení stránky - Ctrl+s (pravé tl. - Uložit jako)
• Zdrojový kód stránky - Ctrl+u (pravé tl. - Zobrazit zdrojový kód)
• Analýza bezpečnosti stránek - klik na ikoně zámečku před adresou stránky
• prozkoumání prvku - pravé tl. - Prozkoumat
• Nástroje pro vývojáře (Chrome - Další nástroje) - ukazovat na 79401.cz
  • druhá ikona vlevo - režim desktop/mobil - test responzivního designu
  • Console - výpis chyb, varování při načtení stránky
  • Elements - ikona šipky vlevo a klik na prvek na stránce pro analýzu
    • přímá editace html prvku dvojklikem a potvrzení Enterem
    • vpravo záložky Styles, Computed - např. změna barvy colorpickerem
  • Application, Security

Kódování HTML, CSS (web design)

• úvod W3Schools HTML Introduction
• projít základy HTML na W3Schools Online tutorial
• dále CSS zde - udělat samostatnou další dvouhodinu? - viz také cvičení na animace na konci tohoto tématu
• sady cvičení - doplňování kódu - W3Schools exercises

Editace html kódu v VSC:

• podpora html - Intellisense, emmet abbreviations, colorpicker, validace kódu
• příprava - rozšíření Live Preview (po instalaci potvrdit Trust Window)
• editace existující stránky - použít úvodní stránku 79401.cz a uložit Ctrl+s, otevřít ve VSC
  • při špatném kódování - Reopen with encoding
  • ikona vpravo nahoře Show Preview
• vytvoření nové stránky
  • File - New file - zadat název stránky jprijmeni.html a vybrat složku pro uložení
  • napsat html a pak vybrat html:5 (načte se šablona) - také [Shift+!] a [Tab]
  • opravit <title>
  • vyzkoušet vkládání značek h1, p, br, a - napsat značku a Enter díky emmet abbreviations (ověřovat v okně Live Preview)
  • vícenásobné vygenerování značky např. 3 odstavce pomocí p*3
  • v příkazech (F1 nebo Ctrl+Shift+P) také např. emmet: wrap with abbreviation (předtím označit slova pro formátování), zadat např. i pro skloněné
• testování webové stránky
  • např. pomocí balíčku XAMPP - spustit Control Panel a webový server (Apache - porty 80 = http, zabezpečený 443 = https)
  • VSC - uložení webové stránky *.html do DocumentRootu (..\xampp\htdocs)
  • otevření webové stránky v prohlížeči zadáním adresy localhost/jprijmeni.html

Konverze zápisu zapis.md z jazyka Markdown do HTML (uložit jako zapis.html)

• např. pomocí markdowntohtml.com
• také pomocí extenze Markdown PDF ve VSC (pravé tl. Export to PDF, HTML)

Převod dokumentu z MS Wordu do HTML

• napsat ve Wordu jedno slovo
• Soubor - Uložit jako - Webová stránka - zjednodušený formát *.html
• otevřít ve VSC a analyzovat kód