Primjena HTML i CSS tehnologija u razvoju mrežnih stranica

Motivacijsko predavanje i uvod u jezike za obilježavanje. Budućnost weba. Internetsko poduzetništvo. Razvoj weba i jezika za web. Ovjeravanje. Osnove izgradnje mrežnih stranica. Tehnologije za izradu mrežnih stranica. Osnovna sintaksa. Apsolutne i relativne poveznice. Preuzimanja. Osnovni statistički pokazatelji o webu. Zaglavlje i metapodatci. Striktni, tranzicijski i okvirni način rada. Kraj retka. Poredak bajtova (BOM). Rad sa slikama. Usklađivanje teksta i slika. Vanjske poveznice (sidrišta). Okviri. Adresne sličice. Odlomci. Liste. Znakovna prikazba i podrška za hrvatske znakove. Preusmjeravanja. Unutarnji okviri. Sidrenje u različitim okvirima. Tablice i modifikacije. Obrasci HTML-a. Značajke semantičkoga weba, aspekt sadržaja (content) i izgleda (layout) i njihova međusobna veza. Uvod u CSS. Smještaj koda u CSS-u i odnos prema HTML-u. Klase. Identifikatori. Pozadinski, tekstni, fontni, poveznički i listni obilježivači. Rastuća i padajuća crta. Model kutije. Blokni i redačni elementi. div i span. Pokazivači. Obrubi, rubovi i popune. CSS Media Types. CSS prioriteti. Ispitivanje kvalitete mrežnih stranica: ACID, Pingdom, W3 Validator, Nibbler, GTmetrix. Neprelamajući razmak. Prebirnici. Jedinice i mjere u CSS-u. Dimenzioniranje. Klasificiranje. Relativno, apsolutno i fiksno pozicioniranje. Uvjetovani komentari za Internet Explorer. Raspored elemenata na mrežnoj stranici i osnovni dizajn. Izrada vodoravnih i okomitih izbornika. Stilizacija poveznica i roll-over efekti. Plutanje – osnovni i napredni aspekti. Tehnologija responzivnoga dizajna mrežnih stranica (RWD). Pseudoklase i pseudoelementi. Lorem ipsum. Dodatak Firebug za Mozillu Firefox. Slikovna navigacija i rad sa slikovnim isječcima. Tehnike zaobljivanja uglova. Sjene. Optimizacija koda i slika. Kombiniranje obilježivača. Centriranje. URI. Uvod u HTML5, podrška prebirnika i budućnost kodiranja strukture na webu. Videokodeci i videoformati. Audiokodeci i audioformati. Pretvorba Flasha u HTML5. Ubacivanje videoelemenata, audioelemenata i geolokacija. Uvod u CSS3, podrška prebirnika i budućnost kodiranja dizajna na webu. Prebirnički prefiksi. Sjenčanje, zaobljivanje uglova, prozirnost, tekstni efekti, prijelaznost. Izrada izbornika u CSS3. Pozicioniranje s pomoću rešetaka. Validacije mrežne stranice. Modernizr. Mrežni fontovi i formati. Tehnologije za daljnje učenje (JavaScript, Dart, Spark, serversko orijentirani programski jezici, SEO). Izrada strukture stranice pomoću tehnike flexbox

1. razlikovati jezike za oblikovanje mrežnih stranica (HTML 4.01, HTML5, XHTML 1.0, CSS 2.1 i CSS3), upoznati ih kroz njihovu teoretsku i praktičnu dimenziju te u širem kontekstu jezika za obilježavanje
2. napisati kod u HTML-u i CSS-u koji će zadovoljiti uvjete validacije W3C, suvremene kodne prikazbe znakova, osnovnog dizajna i funkcionalnosti te standarda semantičkoga weba
3. utvrditi zašto se u određenim slučajevima isti kod razlikuje u prikazu među prebirnicima te shvatiti kako prebirnik prikazuje mrežnu stranicu i kako izbjeći probleme
4. usporediti kriterije za određivanje kvalitete mrežnih stranica (testovi za ocjenjivanje i ovjeravanje)
5. valorizirati dostupne alate za razvoj mrežnih stranica (prebirnici, dodatci, uređivači koda, uredske aplikacije i paketi, grafička sučelja itd.)
6. kritički prosuđivati dostupne tehnologije za razvoj mrežnih stranica (videokodeci, audiokodeci, otvorenost softvera ili platforme, budućnost HTML-a i CSS-a itd.)
7. procijeniti u kojem se smjeru razvija tehnologija prikaza podataka na webu kroz jezike HTML5 i CSS3
8. identificirati tehnologije budućnosti na webu (operativni sustavi na internetu, sve tješnja veza aplikacijskoga softvera i mrežnih stranica, dizajn s višerazlučivim sučeljem itd.)
9. identificirati potrebu za općom informatičkom pismenošću
10. identificirati promjenjivost trenutačnih tehnologija na webu i potrebu za stalnim usavršavanjem
11. preporučiti studentima bogate izvore znanja (tiskana liretarura, mrežna vrela, tutorijali itd.)
12. planirati svoje daljnje usavršavanje prema JavaScriptu, serverskim jezicima i trećim tehnologijama
13. predložiti planiranje vlastite poslovne karijere preko vlastita startupa
14. integrirati više mrežnih stranica u mrežno središte te ih međusobno povezati apsolutnim i relativnim poveznicama
15. pripremiti i optimizirati slike i fotografije za mrežnu stranicu te odabrati prikladan format
16. formulirati ključne riječi i postaviti metapodatke mrežne stranice
17. dizajnirati vodoravni ili okomiti izbornik, prilagoditi ga sadržaju i znati ga iskodirati
18. stvoriti mrežnu stranicu prilagođenu potrebama različite prikazne širine u prebirniku ili prema različitome mediju
19. povezati multimedijske elemente u mrežnu stranicu (audio, video, mrežni zemljovidi itd.)
20. kreirati vizualne efekte za obogaćivanje korisničkog doživljaja mrežnih stranica

Obavezna literatura

• Recenzirana skripta iz kolegija.
  Prezentacijska skripta s predavanja objavljena na stranicama kolegija.
  Poglavlja W3Schoolsa s e-tutorijalima o HTML-u, XHTML-u i CSS-u (http://www.w3schools.com/).
  M. MacDonald, HTML5 – The Missing Manual, O'Reilly, 2014.; 2. D.S.McFarland, CSS3 – The Missing Manual, O'Reilly, 2013.
  (eng: Reviewed course textbook. Lecture presentation notes (PDF) downloadable on course webpage. W3Schools e-tutorial chapters about HTML, XHTML and CSS (http://www.w3schools.com/
  M. MacDonald, HTML5 – The Missing Manual, O'Reilly, 2014.
  D.S.McFarland, CSS3 – The Missing Manual, O'Reilly, 2013. ).
  (eng: Reviewed course textbook. Lecture presentation notes (PDF) downloadable on course webpage. W3Schools e-tutorial chapters about HTML, XHTML and CSS (http://www.w3schools.com/
  M. MacDonald, HTML5 – The Missing Manual, O'Reilly, 2014.
  D.S.McFarland, CSS3 – The Missing Manual, O'Reilly, 2013. ).