AWT - Cvičenie 4

Pokročilé HTML a CSS (Úloha 2)

Ciele

Štrukturovať HTML stránky pomocou elementov sekcií.
Vytvoriť responzívne CSS štýly pre rôzne typy obrazoviek.
Vytvoriť CSS štýl pre tlač.
Použiť CSS vlastnosti pre prechody, animácie a transformácie.
Validovať vytvorené HTML a CSS súbory.

Úvod

V rámci dnešného cvičenia doplníte stránky statického blogu, vytvorené na cvičení 2, o ďalšie HTML elementy a CSS vlastnosti. Sústrediť sa budete najmä na zabezpečenie responzivity vašich stránok.

Poznámka: Všetko potrebné na splnenie dnešných úloh ste sa dozvedeli na prvých štyroch prednáškach.

Postup

Úloha 1: Do stránky s prvým článkom (article1.html) pridajte HTML elementy sekcií (prebraté aj na prednáške 2). Použite aspoň 5 z nich.

Určite použite:

element header pre nadpis článku,
element nav pre odkaz na na hlavnú stránku blogu a
element main pre hlavnú časť článku.

Úloha 2: Zabezpečte, aby sa screenStyle.css použil iba pre zobrazenie stránok na obrazovke. Rozšírte ho tak, aby definoval plne responzívny dizajn vašich stránok.

Využite pritom

Relatívne jednotky dĺžky (pozrite [2], [5] a časť "Relative length units" na [8]) pre veľkosť písma a rozmery a umiestnenie elementov.
Nastavenie rozmerov a ohraničení elementov, vrátane minimálnych a maximálnych (pozrite [2], [6], [9], [10]).
Mediálne dopyty (media queries) (pozrite [3], [6], [11]).
Rozloženia stránky (display: flex, display: grid) (pozrite [3], [6], [12]).

Úloha 3: V screenStyle.css zabezpečte, aby vaše stránky optimálne využili obrazovky na ktorých sa zobrazujú.

Dbajte najmä na to, aby:

Na úzkych obrazovkách (smartfóny) nebolo nutné skrolovať vodorovne a hlavný obsah stránky zaberal celú šírku obrazovky.
Na širokých a veľkých obrazovkách nebol hlavný text od kraja po kraj (aby sa predišlo nutnosti hýbať hlavou vodorovne). Kraje obrazovky je potrebné využiť na doplnkový obsah (navigácia, odkazy, reklamy,...).

Poznámka: Ako to urobiť je ukázané napríklad v príklade [6]. Vaše CSS však má byť originálne, nie len kópia či mierna modifikácia štýlov z tohto príkladu.

Úloha 4: Vašim stránkam pridajte aj CSS štýl pre tlač a to v súbore printStyle.css, ktorý je v priečinku public/css.

Pri tlači by

sa nemalo zobrazovať pozadie, najmä ak je tvorené obrázkami (ideálne je použiť čisto biele pozadie),
sa nemali zobrazovať elementy s doplnkovým obsahom (navigácia, odkazy, reklamy,...),
malo byť použité pätkové písmo, aspoň na text v odsekoch a
sa malo myslieť na to, že tlač bude čiernobiela (ideálne je použiť čierny text).

Nezabudnite printStyle.css použiť vo všetkých vašich HTML stránkach.

Poznámka: Ako urobiť CSS štýl pre tlač je ukázané napríklad v príklade [6]. Vaše CSS však má byť originálne, nie len kópia či mierna modifikácia štýlov z tohto príkladu.

Úloha 5: Do CSS štýlov vašich stránok zakomponujte:

aspoň jednu 2D alebo 3D transformáciu,
aspoň jeden prechod a
aspoň jednu animáciu.

Poznámka: Použite zdroje [3], [5], [13], [14], [15], aby ste zistili ako to urobiť.

Úloha 6: Validácia HTML

Každý z HTML súborov, ktorý ste vytvorili overte HTML validátorom (https://validator.w3.org/nu/). Ak validátor nájde chyby alebo vypíše upozornenia, príslušné súbory opravte a znova validujte. Toto opakujte až kým validácia neskončí bez chýb a upozornení.

Úloha 7: Validácia CSS

Každý z CSS súborov, ktorý se vytvorili overte CSS validátorom (https://jigsaw.w3.org/css-validator/). Ak validátor nájde chyby alebo vypíše upozornenia, príslušné súbory opravte a znova validujte. Toto opakujte až kým validácia neskončí bez chýb a upozornení.

Zdroje

Prednáška 1.
Prednáška 2.
Prednáška 3.
Príklady využívajúce Bootstrap, https://hron.fei.tuke.sk/~korecko/WT/04bootstrap/.
CSS príklady k prednáškam, https://hron.fei.tuke.sk/~korecko/WT/03htmlCSS/.
Príklad responzívneho dizajn, vrátane CSS pre tlač, https://hron.fei.tuke.sk/~korecko/WT/03htmlCSS/33oblubeneStromy.html.
Domovská stránka Bootstrap, https://getbootstrap.com/.
CSS values and units at MDN web docs, https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units.
Introduction to the CSS basic box model at MDN web docs, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model.
Layout and the containing block at MDN web docs, https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block.
Using media queries at MDN web docs, https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries.
CSS layout at MDN web docs, https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout.
Using CSS transforms at MDN web docs, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms.
Using CSS transitions at MDN web docs, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions.
Using CSS animations at MDN web docs, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations.
HTML validátor od W3C, https://validator.w3.org/nu/
CSS validátor od W3C, https://jigsaw.w3.org/css-validator/.