V.Pavlicová: IKT 2.ročník


Říjen 2019

Struktura html dokumentu

Strukturu html dokumentu zjistím tak, že si prohlédnu zdrojový html text jednoduché stránky.

Význam některých zkratek

Význam html značek + tabulka

značka P/Nvýznam
<html> P ohraničuje html dokument
<h1> P nadpis nejvyšší úrovně
<p> P odstavec
<br> N tvrdé odřádkování
<hr> N oddělení odstavce linkou
<table>P tabulka
<tr> P řádek tabulky
<td> P sloupec tabulky
<tr> P řádek tabulky

Listopad 2019

Odkazy na webové stránce

toto je odkaz na html stránku, která je ve stejném adresáři jako tato aktuální

toto je odkaz na html stránku, která je v jiném adresáři než tato aktuální

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

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

toto je odkaz na úvodní stránku jiného webového servru

toto je odkaz na stránku v nějakém webovém servru

toto je odkaz na libovolnou webovou stránku

toto je odkaz na libovolnou webovou stránku uvnitř jiné webové stránky

záplavy v Benátkách

Obrázky na webové stránce

Tady je slibovaný obrázek: Huráááá!!!

Prosinec 2019

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

Kaskádové styly definují vzhled dokumentu.

Bloky a formátování textu

Blok je obdélníková část stránky s libovolným obsahem. Blok má rámeček (border), který není implicitně zobrazen. Od okolí blok odděluje okraj (margin). Obsah bloku je od rámečku odsazen (padding).
Bloky si ještě jednou procvičíme na pokusném souboru

Blokovému prvku lze nastavit rozměry vlastnostmi width, height. Opakem je prvek řádkový (a, em, srtong, b, u). Blokový prvek lze převést na řádkový a naopak - změnou vlastnosti display.

Leden 2020

Css a obrázky

Ke správnému zařazení obrázku do html stránky je nejvhodnější upravit vlastnost float. Obrázek se stane plovoucím, tj. vyřadí se z normálního toku dokumentu a umístí k levému nebo pravému okraji rodičovského bloku - podle hodnoty vlastnosti float. Viz příklad

Únor 2020

Třídy prvků, pseudotřídy a pseudoprvky

Třída umožňuje navzájem od sebe odlišit stejné prvky. Viz příklad.

Některé pseudopříklady:
:first-child :visited :hover :link :before :after :first-line :first-letter atd.

Obecný blokový/řádkový prvek

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

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