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

Postup

1. Úloha: Do stránky s prvým článkom (article1.html) pridajte HTML elementy sekcií (prebraté aj na prednáške 2 [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.
2. Úloha: 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]).
3. Úloha: 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.

4. Úloha: 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.

5. Úloha: 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ť.

6. Úloha: Validácia HTML

   Každý z vašich HTML súborov overte HTML validátorom [16]. 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í.
7. Úloha: Validácia CSS

   Každý z vašich CSS súborov overte CSS validátorom [17]. 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í.