Holub: IKT 2.ročník

říjen 2019

struktura html dokumentu

Strukturu html dokumentu zjistíme prohlídkou html kódu jednoduché webové stránky.


význam některých zkratek


význam HTML tagů

<html>  P  vymezuje celý HTML dokument
<h1>  P  nadpis nejvyšší úrovně
<hr>  P  horizontální čára

tag P/Nvýznam
<html> P vymezuje celý HTML dokument
<h1> P nadpis nejvyšší úrovně
<hr> N horizontální čára
<br> N tvrdý konec řádku
<ol> P číslovaný seznam (ordered list)

odkazy na webové stránce

toto je odkaz na stránku, která je ve stejném adresáři

toto je odkaz na stránku, která je ve jiném adresáři

toto je odkaz na úvodní stránku aktuálního webového serveru

toto je odkaz na úvodní stránku mého spolužáka

Odkaz na Wikipedii, jen tak pro zajímavost.


listopad 2019

obrázky na webové stránce

Tohle je Daenerys Targaryen Za bouře zrozená z Rodu Targaryen, První Svého Jména, Nespálená, Královna Meereenu, Královna Andalsu, Rhoynaru a Prvních lidí, Khaleesi Velkého Moře Trávy, Ničitelka řetězů a Matka Draků.


prosinec 2019

úvod do kaskádových stylů (CSS)

Kaskádové styly slouží k definování vzhledu html dokumentu.


bloky a formátování textu

Blok je obdélníková část dokumentu s nějakým obsahem. Blok má rámeček (border), který se implicitně nezobrazuje, od sousedního bloku je oddělen okrajem (margin), a obsah bloku je od rámečku odsazen (padding).
Procvičíme ještě na pokusném souboru.

Blokovému prvku můžeme nastavit rozměry vlastnostmi width, height. Rozměry řádkových prvků (a, em, strong, b, u) jsou dány velikostí a typem písma. Blokový prvek lze převést na řádkový a naopak - vlastností display.


leden 2020

css a obrázky

Pro správné uložení obrázku do dokumentu je nejlépe upravit vlastnost float. Opět vyzkoušíme na cvičném souboru.


únor 2020

třídy prvků, pseudotřídy, pseudoprvky

Třída umožňuje od sebe odlišit stejné prvky - viz. příklad.
Některé pseudopříklady:
:first-line :first-letter :first-child :hover :before :after

obecný blokový/řádkový prvek, pozicování

obecný řádkový prvek = <span> - příklad použití

obecný blokový prvek = <div> - příklad použití