Vytvoriť jednoduchú stránku s prvým článkom statického blogu (article1.html).
Vytvoriť stránky s ďalšími článkami (article2.html, article3.html, ...).
Vytvoriť úvodnú stránku (index.html) so zoznamom článkov a odkazmi na stránky s nimi.
Doplniť vytvorené stránky o CSS štýly.
Vyvarovať sa použitiu zastaraných prístupov pri tvorbe stránok.
Oboznámiť sa s vývojárskymi nástrojmi v prehliadači.
Validovať vytvorené HTML a CSS súbory.
Úvod
V tomto týždni už naplno pracujete na svojom prvom zadaní - statickom blogu.
Najprv vytvoríte HTML stránky pre jednotlivé články. Potom vytvoríte HTML stránku so
zoznamom článkov. Položky zoznamu budú hypertextové odkazy na
jednotlivé články. Stránky tiež doplníte o štýly v jazyku CSS. Použijete HTML elementy a CSS vlastnosti,
prebrané na prvých dvoch prednáškach [1], [2].
Postup
Úloha:
Vytvorte HTML stránku article1.html s článkom (príspevkom) blogu.
Poznámka:
Východziu podobu stránky article1.html už vo svojom projekte máte, v priečinku public.
Samotný súbor teda nie je potrebné pridávať, iba upraviť.
Obsah článku voľte podľa témy, ktorú ste si zvolili na prvom cvičení.
Poznámka:
Napríklad ak je téma "Smartfóny", názov článku môže byť napr. "Najlepšie mobily na trhu",
obrázok môže zobrazovať najlepšie zariadenie a text môže obsahovať popis stavu trhu, poradie miest
jednotlivých zariadení, atď. Môžete sa inšpirovať nejakým existujúcim článkom.
Nie je podstatné mať veľa textu, ale ako ste využili HTML elementy na zobrazenie článku.
aspoň raz aspoň jeden z atribútov
colspan a
rowspan.
Článok tiež musí obsahovať názov a to v elemente h1.
Všetky súbory s obrázkami (jpg, png, ...) umiestnite do priečinka public/fig.
Poznámka:
Príslušné HTML elementy boli prebrané na
prednáške 1 [1]
a prednáške 2 [2].
Úloha:
V článku (article1.html) použite responzívny obrázok, čiže element
img
s atribútmi srcset a sizes alebo elementy
picture
a
source
s atribútmi srcset a media
tak, aby boli pre rôzne veľkosti okna so stránkou (viewport) použité rôzne súbory s obrázkami.
Poznámka:
Responzívne obrázky boli v prednáške [2]
a ich použitie je ukázané aj v príklade [3].
Úloha:
Vytvorte aspoň dva ďalšie články ako samostatné stránky
(article2.html, article3.html, ...).
Obsah článkov nech je rôzny, no z tej istej tématiky (zvolenej na 1. cvičení).
Poznámka:
Východziu podobu stránok pre ďalšie dva články (article2.html, article3.html) už tiež vo svojom projekte máte.
hypertextový odkaz (a)
na hlavnú stránku blogu (index.html).
Úloha:
Vytvorte stránku index.html, ktorá bude slúžiť ako zoznam všetkých článkov blogovacieho systému.
Poznámka:
Aj východziu podobu index.html už máte v priečinku public, stačí ju len upraviť.
Každý názov článku v zozname bude odkazom
(element a)
na stránku s príslušným článkom, vytvorenú v predchádzajúcich krokoch.
Úvodná stránka má tiež obsahovať:
stručné predstavenie (popis) tematiky, ktorej sa váš blog venuje, v aspoň jednom odseku
(p) a
meno a email autora/rky, riešený ako hypertextový odkaz
(element a).
Úloha:
Nakreslite v rámci tela hlavnej stránky (index.html) postavičku, logo alebo iný obrázok vystihujúci vašu stránku. Použite
rastrovú resp. vektorovú grafiku - HTML element
canvas resp.
svg
(tiež v prednáške 2 [2]).
Úloha:
Do súbora screenStyle.css, ktorý je v priečinku public/css doplňte CSS štýly
pre všetky stránky vášho statického blogu.
Dizajn stránok, definovaný týmito štýlmi má byť responzívny.
CSS štýly musia minimálne obsahovať
nastavenie typu a veľkosti písma,
nastavenie ohraničení tabuliek a odrážok resp. číslovania v zoznamoch,
nastavenie pozadia, veľkosti a ohraničenia elementov (stačí pre niektoré).
Pri type písma vždy uveďte viac alternatív, jedna z nich musí byť všeobecná rodina písem (serif, sans-serif, monospace, ...)
Aby ste zabezpečili responzívnosť, použite pre písmo aj ostatné rozmery relatívne jednotky veľkosti.
Úloha:
Pomocou elementu link
použite screenStyle.css vo všetkých stránkach vášho blogu.
Poznámka:
Môžete vytvoriť aj iné súbory s CSS štýlmi a použiť ich na vašich stránkach.
Splnenie vyššie uvedených úloh spojených s CSS sa však bude kontrolovať iba v súbore screenStyle.css.
Aby bol vo vašom projekte poriadok, umiestňujte všetky CSS súbory do priečinka public/css.
Úloha:
Ak náhodou na stránkach používate niektoré z nasledujúcich vecí, nahraďte ich uvedenou vhodnejšou alternatívou.
Úmysel
Nevhodné riešenie
Vhodné riešenie
Horizontálna medzera
...
napr. CSS vlastnosť margin-left, margin-right, margin
Vertikálna medzera
<br><br><br><br>...
napr. CSS vlastnosť margin-top, margin-bottom, margin
Odseky v texte článku
Prvý odsek...<br><br> Druhý odsek...
<p>Prvý odsek...</p> <p>Druhý odsek...</p>
Rozvrhnutie (layout) stránky
použitím tabuliek
obsah sa umiestní napr. do div-ov, ktoré sa rozvrhnú použitím CSS; je možné použiť napr. flexbox - výhodou sú i väčšie možnosti ohľadom responzívnosti
Centrovanie
zastaralý (obsolete) element <center>
použitím CSS:
centrovanie textu: text-align: center;
centrovanie blokového elementu, napr. <div>, nastavením automatického pravého a ľavého okraju, skrátene: margin: <HODNOTA> auto;
Poznámka:
Pri rozhodovaní sa, ktorý HTML element použiť, berte do úvahy, čo element vyjadruje, aký úmysel zachytáva.
Ak je výsledný vzhľad nevyhovujúci, vždy je možné upraviť CSS štýly, nie je nutné kvôli tomu používať nesprávne HTML elementy.
Ďalšie tipy sú napr. tu.
Úloha:
Zoznámte sa s nástrojmi uľahčujúcimi vývoj webových aplikácii, dostupnými vo webovom prehliadači.
Poznámka:
Tieto vývojárske nástroje je možné vyvolať v prehliadači Firefox, Chrome a ďalších stlačením F12.
Všimnite si najmä panel Inspector.
Po výbere elementu v strome elementov bude tento vysvietený na stránke.
Naopak, po kliknutí na tlačidlo šípky v ľavom hornom rohu panelu (vedľa tlačidla Inspector) a
následnom kliknutí na element na stránke, bude tento zvýraznený v strome elementov v paneli Inspector.
Následne je možné element upravovať a "ladiť".
Poznámka:
Názov Inspector používa anglická verzia prehliadača Firefox, v slovenskej sa nazýva Prieskumník. V prehliadači Chrome je to panel Elements.
Úloha:
Validácia HTML
Každý z HTML súborov, ktorý ste vytvorili overte HTML validátorom [13].
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:
Validácia CSS
Každý z CSS súborov, ktorý se vytvorili overte CSS validátorom [14].
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í.
