Základy HTML

6. hodina WBA


Matěj Cajthaml — SSPŠ

©

HTML

HTML

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

  • 1990 — vzniklo HTML
  • 2012 — vzniklo HTML5

Soubory webových stránek

HTML

  • samotné soubory, obsahující tagy — definice webových stránek
  • používají příponu .html

Index

  • speciální soubor
  • přístup do složky v URL
  • soubor index.*

Obrázky

  • zobrazitelná grafika
  • vektorové obrázky
  • přípony: .jpg, .png, .gif, .svg, ...

Pravidla souborů na webu

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

Proč takové názvy?

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í

Ukázka tagů

Párové tagy:

a, p, b, u, i


Nepárové tagy:

br, img, hr, link

Křížení tagů

PLATNÉ


NEPLATNÉ

Jak lze kód přepsat tak, aby byl platný? Proč to tak to nejde?

Element

  • kompletní celek
  • počáteční tag, obsah a ukončovací tag
  • pouze párové tagy
  • obsah může být cokoliv

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í

HTML entita

  • zkratka pro znaky, které se těžko v prohlížeči zobrazují
  • jedná se například o: <, >
  • seznam entit
  • &copy; → ©
&kódznaku;
&#číslo;

HTML komentáře

  • daný obsah se na stránce nevykreslí
<!-- komentář -->

Struktura HTML

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

  • DOCTYPE
  • html
  • head
  • title
  • body

Základní struktura
DOCTYPE

  • určuje verzi HTML, ve které se webová stránka má vykreslit
  • používáme pouze definici pro HTML5
<!DOCTYPE html>

Základní struktura
html

  • ohraničení celého kódu webové stránky
  • určují, kde začínají a končí příkazy HTML
  • pomocí atributu lang určuje jazyk stránky

Základní struktura
HEAD

  • obsahuje definice stránky
  • vnitřní tagy určují její vzhled a chování
  • neobsahuje nic, co se vykresluje v prohlížeči
  • nadpis stránky, styly, metatagy, ...

Co jsou to metatagy?

Základní struktura
TITLE

  • pouze v tagu head
  • uvádí titulek stránky, který se zobrazuje v kartě

Základní struktura
META

  • určuje specifické vlastnosti stránky
  • kódování textu, šířku pro různá zařízení, ...

Základní struktura
BODY

  • obsahuje vše, co se vykresluje na stránce

Vývojové prostředí

Vývojové prostředí

  • program, ve kterém se píše kód
  • někdy i webová stránka
  • napovídání, označením chyb, správa souborů, ...
  • kompiluje či spouští kód

Nejpoužívanější prostředí

  • Visual Studio Code
  • WebStorm
  • Atom
  • Sublime
  • online služby: codesandbox.io, codepen.io

Ve škole: Visual Studio Code

Vývojové prostředí ve škole

PRÁCE

  • Připravte si na svém disku místo pro ukládání projektů z WBA.
  • Založte si první projekt — složku. Můžete pojmenovat podle čísla hodiny: 6
  • Otevřete VSCode, otevřete složku a vytvořte si soubor index.html se základní strukturou.
  • Otestujte vývojové prostředí a HTML!

Shrnutí

Co je to HTML entita?
Proč se nesmí křížit tagy?
Jaký je rozdíl mezi tagem a elementem?
Jaký je rozdíl mezi identifikátorem a třídou?
Jakým tagem se určuje nadpis stránky?

Shrnutí

Jaké části struktury musí webová stránka vždy obsahovat?
Co je to vývojové prostředí?
Co je to soubor index?
Jaký je rozdíl mezi vektorovým a obyčejným obrázkem?
Jakým tagem se určuje tlusté písmo?

Děkuji za pozornost!

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