Strukturu html dokumentu snadno zjistíme zobrazením zdrojového kódu nějaké jednoduché html stránky.
značka | P/N | význam |
---|---|---|
<html> | P | vymezuje celý html dokument |
<h1> | P | nadpis nejvyšší úrovně |
<br> | N | tvrdý konec řádku |
<p> | P | odstavec textu |
<hr> | N | horizontální čára |
toto je odkaz na soubor ve stejném adresáři
toto je odkaz na soubor ve jiném adresáři
toto je odkaz na úvodní stránku webového serveru
toto je odkaz na úvodní stránku mého spolužáka
toto je odkaz na mimoškolní webový server
toto je odkaz na mimoškolní webový server
Tady je obrázek: A je to!!!
Pomocí kaskádových stylů se definuje vzhled html dokumentu.
Blok je obdélníková část stránky s nějakým obsahem.
Blok je ohraničen rámečkem (border), obsah bloku je od rámečku
odsazen (padding), blok je od rodičovského bloku oddělen
okrajem (margin).
Rozměry bloku lze určit vlastnostmi width(šířka) a height(výška).
Řádkové prvky (a,strong,em,b,u) vlastnosti width a height nemají. Jejich rozměry jsou určeny velikostí písma. Lze převést řádkový prvek na blokový a naopak - vlastností display (=block,=inline)
U textových bloků můžeme nastavit typ a velikost písma,
odsazení, zarovnání a rozestupy řádků.
Procvičíme si na pokusném souboru.
Klíčem ke správnému zobrazení obrázků je nastavení css vlastnosti float. Ta vytvoří plovoucí blok, který se vyjme z normálního toku dokumentu a umístí k okraji rodičovského bloku (levému či pravému - podle hodnoty vlastnosti float). Plovoucí blok je pak obtékán.
Někdy je potřeba ukončit obtékání. To zajistí vlastnost clear nastavená u bloku, který již obtékat nemá. Vyzkoušíme v dalším pokusném souboru.
Třída umožňuje odlišit od sebe stejné prvky
na webové stránce. Viz. příklad
Některé pseudopříklady:
:first-child :link :visited :hover
:before :after :first-line :first-letter atd...
obecný blokový prvek = div - příklad použití - pozicování
obecný řádkový prvek = span - příklad použití