1. Cvčenie

Základné pojmy, úvod do predmetu

  1. Spojením typu SFTP sa pripojte na počítač sigma.tuke.sk..
  2. Vo Vašom adresári public_html vytvorte adresár tep a pod ním cvic1.
  3. Na PC pri ktorom sa nachádzate vytvorte v zložke Dokumenty adresár tep a v ňom adresár s Vašim nickom: nick. Skopírujte doňho adresár cvic1 .
  4. Otvorte v editore PSPad nový súbor a uložte ho do aktuálneho adresára (cvic1) pod názvom pom.x. Vpíšte doňho jednu vetu o dnešnom počasí. Uložte ho a prekopírujte na omega.tuke.sk.
  5. V editore PSPad nastavte zobrazenie číslovania riadkov, pravítka, zobrazenie tabuľky ASCII, zobrazenie farieb na výber.
  6. Nastavte formát súboru pom.x na UTF-8 a uložte (aj na sigmu). Obsah súboru si prezrite cez webový prehliadač.
  7. V programe Winscp nastavte, aby bol editor PSPad predvolený editor.
  8. V editore PSPad vytvorte súbor index1.htm, nastavte jeho kódovanie na formát UTF-8.
  9. Vyplňte titulok a do tela súboru zadajte jeden nadpis a jeden odstavec textu s diakritikou a uložte ho (aj na omegu).
  10. Obsah adresára tep (aj cvic1) si pozrite cez webový prehliadač.
  11. Stránku s cvičeniami a Váš adresár zadajte do záložiek.
  12. Odhláste sa z práce na počítači sigma.tuke.sk.

Kritériá hodnotenia

Semestrálne zadanie SZ 30b
Priebežné kontroly, súlad práce s termínom cvičení 50b
Predbežné hodnotenie zadania 20b
Spolu zápočet 100b

2. cvičenie - HTML5

Úvod do HTML

  1. Vo svojom adresári na "sigma.tuke.sk" vytvorte adresár cvic2 a v ňom stránku index1.htm, ktorá obsahuje nadpis (typ <H1>) a odkazy na stránku TUKE a na stránky uvod.htm, tabulka.htm, zoznam.htm (a form.htm).
  2. V tom istom adresári vytvorte aj stránky na ktoré odkazuje index1.htm. Stránky budú obsahovať:
    • uvod.htm: nadpisy prvej, druhej a tretej úrovne, 6 odstavcov textu a odkaz na stránku index1.htm,
    • tabulka.htm: nadpis, tabuľku s titulkom a hlavičkou pre stĺpce - 5 stĺpcov z toho sú 2 číselné hodnoty (vyplniť 3 riadky)) a odkaz na stránku index1.htm,
    • zoznam.htm: číslovaný zoznam, nečíslovaný zoznam a zoznam definícií pre údaje z tabuľky a odkaz na stránku index1.htm.
  3. Na záver všetky súbory (stránky) zvalidujte a opravte podľa http://validator.w3.org/. Po úspešnej validácii umiestnite na spodok stránky ikonu a súbory si prezrite cez prehliadač.

3. cvičenie - HTML - text, zoznamy, tabuľky, obrázky, odkazy

História internetu

  1. Prihláste sa na počítač sigma.tuke.sk, vytvorte v adresári html adresár Cvic3 .
  2. Spustite PSPad editor a vytvorte a uložte do svojho počítača súbor index.html .
  3. Upravte údaje v hlavičke súboru, zadajte titulok, popis, kódovanie UTF-8 a uložte vo formáte UTF-8. Súbor index.html uložte a prekopírujte do adresára Cvic3 (na omega. tuke.sk).
  4. V súbore index.html vytvorte bootstrap menu, ktoré bude pozostávať z dvoch odkazov, na stránky form.html a stránku kontakt.html. Menu potom umiestnite do každej stránky ( form.html aj kontakt.html)
  5. Vytvorte formulár na zaujímavú anketu s použitím legendy, formulárových vstupov typu text, select, radio, checkbox a pomenujte ho form.html.
  6. Vytvorte stránku kontakt.html, do ktorej pomocou prvku adress zadáte kontakt na seba a e-mail. podľa:
    Written by W3Schools.com
    Email us
    Address: Box 564, Disneyland
    Phone: +12 34 56 78
  7. Všetky súbory zvalidujte http://validator.w3.org/.
  8. Všetky potrebné súbory prekopírujte do adresára Cvic3 na sigma.tuke.sk

4. cvičenie - HTML formulár v HTML5

  1. Vytvorte na počítači sigma.tuke.sk adresár Cvic4 v adresári html.
  2. Súbory z minulého cvičenia index.html a form.html v editore upravte nasledujúcim spôsobom:
    • Formulár doplňte o popis vstupných polí s použitím prvku <label for>, zmeňte tlačítko na odoslanie na <button> a upravte jeho vzhľad.
    • Formulár doplňte o nové vstupné políčka HTML5 podľa ukážky form.html.
  3. Všetky súbory zvalidujte http://validator.w3.org/.
  4. Všetky potrebné súbory prekopírujte do adresára Cvic4 na sigma.tuke.sk

5. cvičenie Kaskádové štýly

  1. Prihláste sa na počítač sigma.tuke.sk, vytvorte v adresári html adresár Cvic5 .
  2. Z cvičenia 2 prekopírujte obsah súboru  index.html  a uložte ho pod názvom  prvky.html , z cvičenia 3 prekopírujte súbory index.html, form.html a kontakt.html .
  3. Do súboru  index.html  doplňte link na súbor  prvky.html .
  4. Pre jednotlivé súbory zadefinujte grafickú úpravu pomocou kaskádového štýlu, ktorého ukážka je umiestnená v súbore subor.css .
  5. Vami vytvorený subor.css pripojte do html súborov pomocou značky link, ktorú umiestnite do hlavičky dokumentu:  <link rel="stylesheet" href="subor.css" type="text/css" >.
  6. Ukážka súborov kaskádového štýlu je   kaskádový štýl 1 a  kaskádový štýl 2 a  kaskádový štýl 3 Príkazy zo súborov modifikujte tak, aby ste zlepšili vzhľad stránok.
  7. Všetky súbory  index.html   a  subor.css, form.html , kontakt.html a  prvky.html  zvalidujte http://validator.w3.org/ a prekopírujte do adresára Cvic5 na sigma.tuke.sk

6. cvičenie - Kontrola formulárových polí v HTML5

  1. Vytvorte na počítači sigma.tuke.sk adresár Cvic6 v adresári html.
  2. Súbory z minulého cvičenia index.html a form.html a subor.css v editore upravte nasledujúcim spôsobom:
    • V kaskádovom súbore pridajte príkazy na formátovanie formulárových polí, použite pseudo-selektory focus, invalid a required.
    • Pole na odoslanie upravte na na <button> a upravte jeho vzhľad s použitím atribútov podľa w3c W3Schools.
    • Môžete použiť atribúty podľa ukážky form.html.
  3. Všetky súbory zvalidujte http://validator.w3.org/.
  4. Všetky potrebné súbory prekopírujte do adresára Cvic6 na sigma.tuke.sk

7. cvičenie - Interaktivita, úvod do PHP - echo, for, if, date

  1. Prihláste sa na počítač sigma.tuke.sk, vytvorte v adresári html adresár Cvic7 .
  2. Vyskúšajte si jednoduché príkazy php, vytvorte súbor  prvy.php  s rôznymi príkazmi.
  3. Do súboru  pocet.php  zapíšte funkčný skript na počítanie prístupov na stránku. Ukážka php pre počet prístupov je   pocet.php.

8. cvičenie - PHP - riadiace štruktúry, formuláre

  1. Vytvorte na počítači sigma.tuke.sk adresár Cvic8 v adresári html.
  2. Súbory z minulého cvičenia index.html a form.html a subor.css prekopírujte do adresára Cvic8:
  3. Vytvorte súbor spracuj.php, ktorý bude čítať a vypisovať údaje zadané do formulára, komunikovať s používateľom na základe zadaných údajov. Komunikáciu vytvárajte postupne pre premenné, a zakaždým dolaďujte spúšťaním cez omega.tuke.sk podľa súborov ukážka si pozrite komunikáciu medzi formulároma súborom spracuj.php. Pozrite si kaskádový súbor, ktorý slúži na formátovanie. Všetky súbory sú vo formáte pdf, aby ste z nich mohli použiť zdrojový kód pre vlastnú prácu.
  4. Podľa ukážky môžete pre komunikáciu s formulárom použiť výpočty, porovnanie if a else.
  5. Všetky súbory zvalidujte http://validator.w3.org/.
  6. Všetky potrebné súbory prekopírujte do adresára Cvic8 na sigma.tuke.sk

9. cvičenie Šablóna zadania

Prednáška: Kaskádové štýly

    1. Vytvorte na počítači sigma.tuke.sk adresár Cvic9 v adresári html.
    2. Vyhľadajte, alebo si vytvorte s použitím technológie bootstrap a css šablónu pre zadanie z predmetu a upravte ju podľa témy Vášho zadania.
    3. Všetky súbory zvalidujte http://validator.w3.org/.
    4. Výsledok práce prekopírujte do adresára Cvic9 na sigma.tuke.sk

10. cvičenie - Semestrálne zadanie

  1. Vytvorte na počítači sigma.tuke.sk adresár zadanie v adresári html.
  2. Semestrálne zadanie má mať nasledujúce atribúty:
    • Všetky stránky sú naformátované jednotne, zobrazujú sa s diakritikou.
    • Všetky súbory v zadaní sú validné, aj kaskádový súbor http://validator.w3.org/.
    • Zadanie obsahuje hlavnú stránku, vstupný formulár- stránku s anketou a stránku kde sú uvedené kontaktné údaje, stránku spracuj.php.
    • Na hlavnej stránke bude výpis počtu prístupov na stránku, výpočet počtu dní od nejakého pevného dátumu.
    • Formulár má obsahovať rôzne typy vstupných polí, aspoň dve číselné hodnoty, vstup typu checkbox, povinné polia...
    • Po odoslaní formulára sa zavolá súbor spracuj, ktorý bude opisovať údaje z formulára, spočíta jednoduché príklady, použije porovnávanie if -else, alebo case, Prekontroluje správnosť údajov vložených do formulára. Bude vhodne komunikovať s používateľom, ktorý anketu - formulár vyplnil.
    • V súbore spracuj.php sa bude nachádzať vygenerovaná tabuľka, alebo zoznam.
  3. Všetky potrebné súbory sa budú nachádzať v adresári zadanie na sigma.tuke.sk