Směrování & odkazy

9. hodina WBA


Matěj Cajthaml — SSPŠ

©

Opakování

Jak zapisujeme HTML komentář?
Co je to CSS?
Jakými způsoby můžeme napsat barvy v CSS?
Jak nastavíme barvu pozadí?
Jaké známe selektory?

Směrování

Odkaz

  • tvoříme pomocí tagu a
  • povinný atribut href
  • href značí cíl přenesení
  • při kliku se přesměruje stránka

Návěstí

  • fragment
  • záchytný bod stránek
  • základní použití odkazů
  • neomezený počet
  • návěstí se definuje pomocí identifikátorů

Návěstí v odkazech

  • návěstí / kotvu již známe z URL
  • do odkazu můžeme právě tuto část nastavit
  • po kliknutí se přesune uživatelův pohled na návěstí
  • kotva se poté přidá do URL a lze ji sdílet

! br nepoužíváme jako rozdělovač !

Odkazování

Odkazování na stejnou stránku

  • každá webová stránka má několik .html souborů
  • přístup pomocí URL adresy
  • funguje souborový systém
  • chceme-li zobrazit jiný HTML dokument, jeho cestu dáme do href
  • index.html
  • ssps.html
  • test/pomoc.html
  • ./../index.html
  • ../ssps.html
  • ./pomoc.html

Na co ukazují:

  • ./test/aa/b.html
  • ../../../a.css
  • /test/test.html

Při odkazování můžeme využívat všechny možné části URL.

Odkazování na jinou stránku

  • ukazujeme stejně jako na aktuální stránku
  • používáme však celou URL adresu
  • všechny povinné části

Speciální odkazy

Speciální odkazy

  • slouží ke speciálním akcím
  • stále atribut href

Mailto

Tel

Zobrazování

Blokové

  • = block
  • např. div, p
  • zabere celé místo rodiče, další řádek

Řádkové

  • = inline
  • např. b, i, span
  • zabere místo, které potřebuje a žádné na víc
  • nezalamuje

Další tagy

Již známe:

doctype, html, head, title, body, style, meta, p, b, h1 — h6, i, br, hr, sup, sub, s, a, link

span

  • nemá žádné formátování a ani význam
  • používá se k vlastnímu stylování a označení celků
  • řádkové zobrazení

div

  • nemá žádné formátování a ani význam
  • používá se k označení celků
  • blokové zobrazení

pre

  • podobný paragrafu — určení textového bloku
  • nevymazává mezery, tabulátory a nové řádky
  • monospaced písmo

Děkuji za pozornost!

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