Webový prohlížeč

Webový prohlížeč

• software určený k prohlížení WWW — webů
• komunikace se servery pomocí protokolu HTTP a HTTPS
• vykreslovací (renderovavací) jádro

Jádra

• Gecko (Mozilla Firefox)
• WebKit (Google Chrome (Blink), Safari)
• Trident (Internet Explorer)

Chromium

• vykreslovací jádro Blink
• Google Chrome
• používá Vivaldi, Opera, MS Edge, Brave, ...
• lze využívat samotné Chromium

Hosting

Serverhosting

• pronájem celého serveru (počítače)
• zákazník má administrátorský přístup
• lze využívat i pro jiné účely než provozování webu

Webhosting

• prostor pro webové stránky na cizím serveru
• omezené místo na serveru
• server a web spravuje daná organizace

Další služby

• doména
• certifikáty
• databáze
• e-maily
• výpočetní služby

Hostingy

• Roští
• Heroku
• Wedos
• Endora
• Forpsi
• Stable
• Active24
• Web4U

Certifikáty

Co je to certifikát?

• určené pro jednoznačnou identifikaci entity (stránky, uživatele)
• podepsání
• certifikační autorita
• veřejný (encrypt) klíče
• soukromý (decrypt) klíč
• Let's Encrypt
• self-signed certifikáty
• IKDEA

Certifikát

• autorita, vydavatel, vystavení, podepsání
• platnost = expirace
• lze zneplatnit


• HTTPS, VPN, SFTP, SSH, ...

Ukázka certifikátů

Autorský zákon

• webové stránky (i backend) jsou chráněny autorským zákonem
• copyright v patičce
• absence licence
• zkontrolovat zdroj, lincenci a podmínky


• Creative Commons, licence
• fair use

HTML

HTML

• = Hyper Text Markup Language
• značkovací (tagovací) jazyk


• 1990 — vzniklo HTML
• 2012 — vzniklo HTML5

Soubory webových stránek

• HTML soubory
• index
• obrázky
• pravidla jmén souborů

HTML komentáře

• daný obsah se na stránce nevykreslí

<!-- komentář -->

Tag

• značka HTML
• určují obsah či chování
• vždy se zapisuje ve špičatých závorkách ( <tag> )

Párový tag

• pozice vymezuje odkud kam platí
• ukončuje se pomocí </tag>

Nepárový tag

• neobsahuje ukončovací značku
• málo využití

Základní tagy

tyto tagy je potřebné znát i v tomto předmětu

Párové tagy:

a, p, b, u, i, s, sup, sub, div, span

Nepárové tagy:

br, img, hr, link

Křížení tagů

PLATNÉ

NEPLATNÉ

Atribut

• tag má mnoho atributů
• speciální atributy pro určité tagy
• má svojí hodnotu
• určuje vlastnosti jeho i dětí

Ukázka

• vytvoření odkazu
• atribut href

Nejpoužívanější atributy

• id (identifikátor) — určuje JEDEN tag na celé stránce
• class (třída) — určuje jednu a více tříd, které mohou být na více prvcích
• používají se pro přesné určení

Struktura HTML

každá stránka by měla mít tyto základní elementy (tagy):

• DOCTYPE
• html
• head
• title
• body

CSS

CSS

• = Cascading Style Sheets
• = kaskádové styly
• definice stylů
• skládá se z pravidel (resp. selektoru, vlastností a jejich hodnot)

Používání CSS

• inline
• external
• embed
• import

Selektory

• dle tagu
• dle třídy
• dle identifikátoru
• všeho
• násobný
• vnořovací
• přímý dědic

Základní vlastnosti

• color, background-color
• font, font-weight
• font-style
• text-decoration
• text-align
• margin, padding
• width, height