Webové techológie 1N

O predmete

Predmet Webové technológie je určený pre študentov Košickej akadémie softvérového vývoja, prvý ročník. Predmet poskytuje vedomosti a skúsenosti v práci s HTML5, CSS3 a Typescript-om.

Stretnutia

16. CSS - Zmena tried v DOM cez Javascript

Ukážeme si, ako cez Javascript meniť triedy elementom v DOM modeli. Spravíme si projekt s rotačnou stránou a projekt s prekrývajúcim tlačidlom nad obrázkom.

12. CSS - Špecifickosť selektorov, jednotky, obtekanie, pozadie

Vysvetlíme si ako funguje špecifickosť selektorov, teda, ktoré sa uplatňujú v prípade konfliktu, povieme si o základných jednotkách vzdialenosti, vysvetlíme si kedysi široko využívanú schopnosť obtekania a uzavrieme to témou o pozadiach ako obrázkových tak aj grandientných. Obrázky na hranie

11. CSS - Pseudotriedy, pseudoelementy

Spravíme si spolu projekt Vizitka, porozprávame si o súdoreneckých spojkách v selektoroch, atribútových selektoroch, pseudotriedach a pseudoelementoch a spolu začneme projekt Špagety 2, kde si nastavíme centrované menu.

10. CSS - Projekt Hrnčiar

Dnes dáme novým veciam na chvíľu pokoj. Budeme spoločne vytvárať trochu komplexnejšiu webstránku pre tvorcu keramiky.

9. CSS - Box model

Porozprávame asi najdôležitejšiu súčasť CSS a to je box model. Predstavíme si jeho hlavné súčasti content, padding, border a margin. Pri ich nastavovaní nemôžeme vynechať okrem absolútnych aj relatívne veľkosti týchto vlastností a ich kombináciu. Povieme si o tom, ako tieto vlastnosti fungujú pre inline, inline-block a block elementy aj ako medzi nimi prepínať cez vlastnosť display. Na záver si povieme o zaobľovaní rámčekov, tieňovaní a ako sa vysporiadať s obsahom, ktorý do bloku nevojde.

8. CSS - Texty, linky, zoznamy

Porozprávame si spôsoboch dekorovania textu a liniek - tiene, čiary; transofrmácie textu napr. na veľké písmená. Povieme si o využití atribútov id a class pri určení cieľov štýlovania. Predstavíme si spôsoby úpravy odrážok v číslovaných aj nečíslovaných zoznamoch.

7. CSS - farby a fonty

Porozprávame si o rôznych možnostiach nastavovania farieb, spomenieme ako funguje dedičnosť nastavení a potom sa budeme venovať nastavovaniu vlastností fontov - family, size, weight, style, align. Ukončíme to medzerami v písme, výškou písma a importom externých fontov z Google fonts.

4. HTML - Špeciálne znaky a tagy, tabuľky

Povieme si o tom, ako sa vkladajú do HTML špeciálne znaky cez HTML Entity. Z rýchlika si predstavíme niekoľko nesémantických elementov ako <meter>, <progress>, <details>, <dialog>, <pre>, <template>, <iframe>, <video> a podobne. V druhej polke sa zameriame na tabuľky v HTML.