Internet, WWW & základy HTML

2. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

Náplň prvních hodin

  • rychle zopakovat látku WBA
  • zopakovat HTML tagy
  • zopakovat CSS příkazy
  • upozornit na časté chyby
  • ukázat to nejdůležitější
  • prezentace z 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/?vek=4&jmeno=matej

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
Jaké typy Malware znáte?

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 slavného SSPŠ © 2021
  • 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

Textové tagy

Nadpisy

Rozložení

Vizuální tagy

Listy

Tabulky

Základní tabulky

Rozpětí

Formuláře

Formuláře

CSS

Linkování

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/