16. 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. Projekt je iba ako štartovací. Domáca nebude.
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
15. CSS - box model 3
Porozprávame o ďalších vlastnostiach súvisiacich s box modelom - rámčekoch outline, flexibilných veľkostiach a ako sa vysporiadať s obsahom, ktorý do bloku nevojde. Ak ostane čas, povieme si ako importovať externé fonty do lokálnych súborov.
14. CSS - box model 2
Poviem si o alternatívnom box modeli a ako nám vedia pomôcť zabaľovania elementov. Pozrieme sa tiež na vlastnosť vertical-align.
13. 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.
12. CSS - fonty, texty
weby-css-02-fonty-texty.pdf
weby-css-03-fonty-linky-zoznamy.pdf
7. zadanie - Pán prsteňov
Zdrojáky z výučby
Nastavíme si medzery v písme, výšku písma. Povieme si ako použiť externé fonty z Google fonts.Porozprávame si spôsoboch dekorovania textu a liniek - tiene, čiary; transofrmácie textu napr. na veľké písmená. Predstavíme si spôsoby úpravy odrážok v číslovaných aj nečíslovaných zoznamoch. Ak stihneme, povieme si ako importovať externé fonty do lokálnych súborov.
11. CSS - fonty, texty
Povieme si o využití atribútov id a class pri určení cieľov štýlovania. Budeme sa venovať nastavovaniu vlastností fontov - family, size, weight, style, align.
10. CSS - Spôsoby zakomponovania CSS, farby
Predstavíme si 3 základné spôsoby, ako vkladať CSS do HTML, potom si porozprávame o rôznych možnostiach nastavovania farieb.
9. HTML - Microdata, spôsoby zakomponovania CSS
Ukážeme si modernú metódu pridávania sémantiky na stránku - Mikrodáta.
8. HTML - Sémantické elementy, mikroformáty
Dokončíme sémantické elementy a porozprávame si o pokročilých metódach pridávania sémantiky cez Mikroformáty. Dnes domáca nebude.
7. HTML - Funkčné elementy, tabuľky a základné sémantické elementy
weby-html-04.pdf
weby-html-05.pdf
4. zadanie - Tabuľky
5. zadanie - Sémantické HTML elementy
Zdrojáky z výučby
Porozprávane si o tabuľkách v HTML - domáce zadanie bude z nich. Začneme rozprávanie o sémantických elemetoch. Piate zadanie slúži iba ako štartovací projektík.
6. HTML - Špeciálne znaky a tagy, funkčné elementy
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. Dnes domáca nebude 😍.
5. HTML - div, span, formuláre
Prejdeme si formulárové elementy - textarea, select, radio, checkbox, range a fieldset.
4. HTML - div, span, formuláre
Prejdeme si základné formulárové elementy input (typu text), form a label.
3. HTML - linky, obrázky, div, span
Porozprávame si o linkách a obrázkoch.
2.Editovanie HTML, základné tagy
Ukážeme si základnú kostru HTML5 a ošaháme si niekoľko základných HTML elementov. Vyskúšame si stiahnuť zadanie a poslať riešenie cez commit a push do GitHubu.
1. Nastavenie prostredia
Formulár o GitHub kontáchRozbeháme si prostredie - nainštalujeme si Git, Visual Studio Code, vytvoríme si kontá na Githube a vytvoríme si svoje repozitáre a pozdieľame si ich.