/ Czechitas / Digitální akademie Web / HTML a CSS

Opakování a pozicování

Opakování základních znalostí HTML a CSS a vlastnost position.

Nemá předchozí
lekci

Následujicí

Flexbox

HTML CSS Devtools Procvičení základů HTML a CSS CSS position Cvičení: CSS position

Vítejte na Digitální akademii! Na začátek si zopakujeme informace o HTML a CSS, které bychom měli znát z prerekvizit. Pokud nebyl čas si kurz HTML a CSS projít, tady je na něj odkaz. Správné základy nám umožní postupovat akademií bez panikaření a osvojovat si znalosti v přiměřeném tempu.

HTML

HTML (HyperText Markup Language), je značkovací jazyk, který nám umožňuje tvořit webové stránky. Můžeme vytvořit strukturu stránky, která obsahuje nadpisy, seznamy, odstavce, odkazy, a to pomocí značek (tags), prvků (elements) a atributů (attributes).

Struktura HTML souboru

HTML soubory jsou ty, které končí koncovkou .html. Základní struktura HTML souboru je značka html, která obaluje prvky head a body.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>A simple HTML document</title>
  </head>
  <body>
    <p>Hello World!</p>
    <p></p>
  </body>
</html>

V prvku head se nachází

informace o dokumentu, jako je například název,
metaznačky (metatags), které mimo jiné pomáhají vyhledávačům,
nebo linky na CSS a JS soubory.

Do obsahu prvku body potom píšeme samotný obsah naší webové stránky.

HTML element

Většina elementů má otevírací a zavírací značku, jako například body. Existují ale také tzv. self-closing tags, které mají pouze atributy a nemají obsah. To jsou například značky img nebo hr. Obsahem prvku může být i jiný prvek. V tom případě se obalový prvek stává jeho rodičem a prvek uvnitř dítětem.

Pojďme si společne projít základní HTML značky.

Nadpisy

h1 - h6

Text

Seznamy

ul
ol
li

Odkazy

Obrázky

img

Členění obsahu

div
span

Sémantické HTML

main
header
footer
section
article
nav