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, obsahujicí tagy - definice webových stránek
  • používají příponu .html

Index

  • speciální soubor
  • při přístupu do složky se zobrazí právě daný soubor
  • 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

Tag

  • značka HTML
  • určujíce 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 to lze přepsat, aby bylo zapsání platné?

Element

  • kompletní celek
  • počáteční tag, obsah a ukončující 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
&kódznaku;
&#číslo;
&copy; → ©

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, ...

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í stukturou.
  • Otestujte vývojové prostředí a HTML!

Povinný domácí úkol

  • Nainstalujte si nějaké vývojové prostředí do domacího počítače. Naučte se s vývojovým prostředím pracovat, jak vytvářet soubory a upravovat je.
  • Vytvořte HTML soubor s ukázkovou strukturou a zobrazte jej v prohlížeči.
  • Vyscreenshotujte celou obrazovku s vývojovým prostředím a prohlížečem.
  • Odevzdejte na webovém portálu.
  • Bodový základ: 1 body.

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/