Opakování WBA

Internet

• celosvětový systém propojených PC sítí
• PC síť = sdružení technických prostředků, realizující spojení a výměnu informací
• peer to peer & client-server

World Wide Web

• soustava propojených hypertextových dokumentů
• hypertext dokument
• hyperlinky
• nelineárnost

Doména

• jednoznačný identifikátor serveru na internetu
• několik částí oddělené tečkami
• ASCII, case-insensitive
• 1. řád vs. x. řád
• IDN

URL

• uniform resource locator
• řetězec znaků
• definovaná struktura
• case-sensitive (vyjma domén a protokolu)

Určete části URL

Více parametrů

https://ssps.cz/?page=4&filter=kokos

Webový vyhledávač

• automatický systém
• vyhledává na WWW
• webový katalog
• hluboký vs. temný web

Protokoly

• nespočet protokolů
• definice struktury, syntaxe a synchronizace


• HTTP(S)
• IP
• DNS
• FTP

Nebezpečí internetu

• různé hrozby
• phishing
• malware

Digitální stopa

• záznamy, které zanecháváme, když používáme internet
• (ne)vědomě
• osobní zařízení nebo server
• cenné informace

Webový prohlížeč

• software určený k prohlížení WWW
• komunikace pomocí HTTP(S)
• vykreslovací jádro
• nutnost přizpůsobivosti

Hosting

• pronájem místa na serveru
• různé důvody
• webové stránky, aplikace, databáze, ...
• GitHub, Wedos, Endora, ...

Certifikát

• jednoznačná identifikaci entity
• podepsání
• certifikační autorita
• veřejný (encrypt) a soukromý (decrypt) klíč
• Let's Encrypt
• uložené informace
• platnost
• HTTPS, VPN, SFTP, SSH, ...

Autorský zákon

• webové stránky jsou chráněny autorským zákonem
• i bez SSPŠ © 2024
• vždy kontrolovat licenci
• Creative Commons
• (ne)placené služby

HTML

• Hyper Text Markup Language
• značkovací jazyk

HTML úvod

• tag—nepárový a párový
• křížení tagů
• element
• atribut
• id & class
• HTML entita
• komentáře

Soubory webů

• HTML (*.html)
• index (index.*)
• obrázky (*.jpg, *.png, *.webp, *.svg)
• CSS (*.css)
• JS (*.js)

Pravidla

• malé písmena
• bez diakritiky
• hierarchie
• výstižné a krátké názvy

Klasické sestavení webu

• index.html
• robots.txt
• css/
• css/styles.css
• css/scss/
• img/
• js/

Linkování

• / — absolutní (od domény)
• ./ — aktuální složka
• ../ — předcházející složka

./img/cat.png
../../../js/navigation.js
/css/styles.css

Struktura HTML

HTML značky

Tabulky

Formuláře

Cascading Style Sheets

Cascading Style Sheets

• = CSS
• = kaskádové styly
• definice designu stránky
• nezávislé na HTML
• třetí verze

Pravidla

• obsahuje selektor a blok deklarací
• deklarace = vlastnosti
• vlastnosti rozdělujeme ;
• jméno vlastnosti a hodnotu rozdělujeme :

Připojení CSS

Separátní soubor

• zmenšení velikosti HTML
• lze použít opakovaně
• přehlednost

V hlavičce

• zvětšeno HTML
• nelze používat opakovaně

Inline

• postrádá smysl kaskády
• vhodný jen málokdy
• největší priorita

Základní vlastnosti

Další barvy

Selektory

Pokročilejší selektory

Jednotky

Absolutní

• cm, mm
• in — palec, 1in ≐ 2.54cm
• px — pixel
• pt — bod, 1pt = 1/72in
• pc — pica, 1pc = 12pt

relativní

• % — procentní hodnota rodiče
• em — velikost textu, 1em = aktuální velikost fontu
• rem — velikost textu hlavního prvku stránky
• ch — šířka znaku nuly pro aktuální písmo
• vw — 1vw = 1% šířky zařízení
• vh — 1vh = 1% výšky zařízení

Textové styly

Blokové styly

Zkrácení zápisu

platí i pro margin

Zkrácení zápisu

platí i pro left, bottom a right

Pozadí

Různé styly

Typy transformací

Typy filtrů

display — inline

• nelze nastavit výška či šířka
• zabírají místo, které je jim dáno

display — block

• lze nastavit výška či šířka
• vždy začínají na dalším řádku a zabírají celou šířku

display — inline-block

• lze nastavit výška či šířka
• zabírají místo na řádku

display — none

• vůbec se nezobrazí
• nezabírá místo

display — další

https://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=list-item

Flex

Úvod

• flex = moderní způsob tvorby rozložení
• velmi důležité pro moderní weby
• podporované všude
• jednoduchá responzivita

Kontejner

• = obal okolo prvků
• = container
• určuje jak se prvky budou zarovnávat
• prvky se vždy zobrazují jako blok

Předměty

• = jednotlivý prvek
• = dítě, child, item, prvek

Hlavní osa

Sekundární osa

Zarovnání na hlavní ose

justify-content

Zarovnání na sekundární ose

align-items

Zalomení

flex-wrap

Prohození os

flex-direction

Vlastnosti předmětů

Zmenšení / stažení

flex-shrink

Grid

Úvod

• grid = moderní způsob rozložení
• prakticky náhrada tabulek
• rozdílný oproti flexu
• podporovaný všude

Kontejner

• = obal okolo prvků
• = container
• určuje jak se prvky budou zarovnávat
• prvky se vždy zobrazují jako blok

Předměty

• = jednotlivý prvek
• = dítě, child, item, prvek

Sloupce / řádky

sloupce = cols či columns, řádky = rows

Jednotka fr

• fr = zlomek místa
• místa, které lze zabrat ve gridu

Zarovnání

Pozicování

• vlastnost position
• statické, relativní, absolutní, fixované, lepivé
• vlastnosti top, bottom, left, right

Statické pozicování

• static
• klasické pozicování, které známe
• podle místa na stránce
• nefungují: top, bottom, left, right

Relativní pozicování

• relative
• velmi podobné statickému pozicování
• prvek je umístěn na stejném místě jako při statickém
• fungují vlastnosti top, bottom, left, right

Fixované pozicování

• fixed
• prvek se při pohybu na stránce nehýbe — je vázán na velikost obrazovky
• prvek se umisťuje nad ostatní prvky — neovlivňuje jiné prvky
• fungují vlastnosti top, bottom, left, right

Absolutní pozicování

• absolute
• prvek se zachytí na nejbližší prvek, na kterém je nějaké pozicování přesně nastavené (relative, absolute, ...)
• popř. na body
• jiná vrstva

"Lepící" pozicování

• sticky
• mění se mezi stavy relative a fixed
• podle scrollovánína stránce — dokud nenalezne dané odsazení
• potom se přilepí a hýbe se během skrolování

Vrstva

• vlastnost z-index
• číslo určující vrstvu
• čím vyšší číslo, tím bude vykresleno navrch
• i záporné hodnoty

Pseudotřídy

Pseudotřída

• speciální selektor
• ukazuje na stav tagu
• můžeme měnit vlastnosti
• např. při najetí myši, zda je n-tý prvek, ...
• zapisujeme pomoci :
• můžeme navazovat

Navigační pseudotřídy

• selektování tagů na základě jejich položení v HTML


• :nth-child(4)
• :nth-child(2n)
• :first-child
• :only-child
• :first-of-type

Aktivovatelné pseudotřídy

• aktivace pomocí uživatelských aktivit


• :hover
• :active
• :focus

Negace

• zneguje daný selektor
• :not


• :not(.sad)
• :not(:first-child)

Seznam

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Pseudoelementy

Pseudoelement

• selektor
• umožní stylovat speciální část tagu
• např. první písmeno, první řádek, ...
• používáme ::
• můžeme navazovat


• ::selection
• ::first-line
• ::first-letter
• ::after a ::before

Seznam

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Další selektory

Selektování dle atributů

• [attr]
• [attr="value"]
• [attr*="ssps"]
• [attr^="https://"]
• [attr$=".org"]
• [attr~="link"] (separator mezera)

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Responzivita

Responzivita

• funkčnost stránky se zobrazovat na různých zařízeních
• desktop, handheldy, tablety, hodinky, ...
• různé šířky zařízení

Historie

• prostě to nešlo
• vytvoření separátní stránky
• absence technologií

Současnost

• stránky jsou tekuté
• vlévají se do různých typů kontejnerů
• jednotky jako %, vh, vw, ...
• flexbox, grid
• DevTools

Zapnutí funkčnosti

Definice

Media queries

• způsob změny vlastností za určitých podmínek
• podmínka může být např. šířka či výška zařízení
• vkládáme pravidla
• zápis až na konci

Způsoby návrhu

Způsoby návrhu

• z malého do velkého zařízení
• z velkého do malého zařízení


• určení breakpointů