HTML & CSS Fundamentals kurs

Nastavne jedinice ovog kursa sadrže sve gradivne blokove potrebne za kreiranje ili modifikaciju HTML strana. HTML & CSS Fundamentals kurs objašnjava poreklo jezika HTML, način njegovog nastanka, razloge za njegovo postojanje, njegovu integraciju u različite sisteme, kao i načine njegove upotrebe.

Obrađena su osnovna, sintaksna pravila jezika HTML i njegove komponente (tabele, offline i online HTML forme, metatagovi, atributi). Šta su HTML tagovi, kako izgledaju i na koji način ih možemo koristiti, a na koji ne. Šta su elementi, a šta atributi, gde ih i pod kojim uslovima možemo koristiti i slično. 

Saznaje se kako funkcionišu HTML forme, na koji način se kreiraju u HTML-u i kako se ponašaju, kao i zbog čega su važne. Detaljno su objašnjeni svi koraci izrade web prezentacija pomoću ovog jezika, što omogućava polaznicima da nauče kako da samostalno proizvedu i isporuče kompletnu HTML prezentaciju.

Tokom kursa, detaljno se objašnjava i povezivanje strana postavljanjem hiperlinkova, kopiranje kreirane prezentacije na server, kao i pojmovi relativnih i apsolutnih putanja. Ukazuje se na problematiku distribucije prezentacije i konkurenciju uzrokovanu višekorisničkim pristupom sadržaju prezentacije. Osim HTML-a, kurs se takođe bavi i problematikom jezika CSS (osnovna pravila i stilizacija elemenata, boje i tipografija). Ovo je jezik specijalizovan za stilizaciju sadržaja, pa je neizostavan u izgradnji web strana, zbog čega se obično i proučava u kombinaciji sa HTML-om. Pomoću njega strana se grafički oživljava.

Opis i cilj HTML & CSS Fundamentals kursa

HTML & CSS Fundamentals kurs posvećen je osnovama kompjuterskih jezika HTML i CSS. Reč je o jezicima bez kojih se ne može zamisliti kreiranje modernih web sajtova i web aplikacija. Do ovih i mnogih drugih znanja polaznici će doći kroz 7 specifičnih modula. Svaki od ovih modula osmišljen je tako da svakog polaznika upoznaje sa najvažnijim veštinama, korak po korak. 

HTML je skraćenica koja predstavlja akronim pojma HyperText Markup Language, što je osnovni, opisni jezik za kreiranje HTML dokumenata. To praktično znači da se HTML koristi za obeležavanje, odnosno markiranje različitih podataka web sajtova. Stoga je prvih nekoliko poglavlja kursa HTML & CSS Fundamentals posvećeno upravo upoznavanju osnovnih sintaksnih pravila HTML jezika, kao i jezičkih elemenata koji se koriste za markiranje podataka. Tako će polaznici u prvom delu kursa imati prilike da se upoznaju sa različitim tehnikama za formatiranje teksta i kreiranje lista, tabela, linkova, formi...

Nakon osnovnih HTML elemenata, kurs HTML & CSS Fundamentals obrađuje i osnovne postulate CSS jezika. CSS, odnosno Cascading Style Sheets, jezik je koji se koristi za opis prezentacione semantike dokumenata pisanih jezikom oznaka (HTML). To praktično znači da se CSS koristi za stilizovanje stranica web sajtova. U kursu HTML & CSS Fundamentals predstavljena su osnovna sintaksna pravila ovoga jezika, a zatim su ilustrovani brojni pristupi korišćenja CSS jezika za definisanje izgleda web sajtova.

Pored definisanja izgleda web sajtova, CSS jezik se u kombinaciji sa specijalnim HTML elementima koristi i za definisanje rasporeda elemenata web sajtova. Jedan kompletan modul kursa HTML & CSS Fundamentals posvećen je upravo takvoj problematici, tako da će polaznici biti u prilici da nauče kako se kreira osnovni layout savremenih web sajtova.

Cilj HTML & CSS Fundamentals kursa je uvođenje polaznika u svet praktičnog kreiranja web sajtova izučavanjem jezika HTML i CSS. Polaznici stiču praktična znanja, koja im omogućavaju da kreiraju jednostavnije web sajtove sa nekoliko povezanih web stranica. Polaznici se osposobljavaju za kreiranje osnovnog rasporeda elemenata web sajtova, kao i njihovo stilizovanje.

Kurs HTML & CSS Fundamentals će vam odgovoriti na pitanja:

1. Šta je HTML?

Osnovni jezik weba svakako je HTML. Stoga je kreiranje web sajtova uslovljeno odličnim poznavanjem ovog jezika. HTML je skraćenica koja predstavlja akronim pojma HyperText Markup Language, što je osnovni, opisni jezik za kreiranje HTML dokumenata.

Pojam Hypertext odnosi se na način na koji su HTML stranice međusobno povezane korišćenjem linkova koji vode do drugih HTML dokumenata. Hypertext je pojam koji označava takav link, odnosno vezu.

HTML je jezik oznaka, odnosno takozvani markup jezik (engl. markup language), što znači da se HTML koristi kako bi se izvršilo markiranje tekstualnog dokumenta korišćenjem tagova, koji govore web browseru na koji način je potrebno da prikaže sadržaj.

2. Šta su HTML elementi?

HTML jezik se koristi kako bi se definisala struktura jednog HTML dokumenta. Za obavljanje takvog posla HTML jezik poseduje veliki broj različitih elemenata, koji se koriste za definisanje sekcija HTML dokumenta. Kombinacijom različitih elemenata gradi se struktura jednog HTML dokumenta, na osnovu čega browser zna na koji način je potrebno da prikaže stranicu. Upravo zbog toga, poznavanje HTML jezika zapravo podrazumeva poznavanje različitih HTML elemenata.

HTML jezik poseduje veliki broj elemenata različitog tipa. HTML elementi kreiraju se korišćenjem tagova. Tokom kursa HTML & CSS Fundamentals imaćete prilike da se upoznate sa elementima za predstavljanje teksta u različitim oblicima, sa elementima za kreiranje linkova i formi i prikaz multimedijalnih sadržaja.

3. Šta je CSS?

Pored HTML-a, osnovni jezik za kreiranje web sajtova je i CSS. CSS, odnosno Cascading Style Sheets, jezik je koji se koristi za opis prezentacione semantike dokumenata pisanih jezikom oznaka (HTML). CSS poseduje dva najznačajnija mesta primene:

• uređivanje izgleda i formatiranja svih elemenata u HTML dokumentu;
• definisanje rasporeda i veličine HTML elemenata unutar dokumenta.

CSS je nastao mnogo posle HTML-a. U početku, HTML stranice nisu bile stilizovane. Potom su se koristili HTML tagovi za stilizaciju, što je dodatno povećavalo kompleksnost HTML dokumenata i usložnjavalo održavanje. Upravo zbog toga je osmišljen CSS jezik, čija je primarna uloga da stilizuje HTML dokument, bez mešanja sadržaja i stilizacije. Tako se može reći da je jedna od osnovnih mogućnosti CSS-a definisanje stilizacije nezavisno od sadržaja dokumenta.

4. Šta su CSS selektori?

Osnovu CSS jezika čine CSS opisi (engl. CSS Rules). CSS opisi su sastavljeni iz dva dela:

• selektor – ukazuje na koji element (ili više njih) se odnosi CSS opis;
• deklaracija – postavlja stilizaciju za element(e) na koji se odnosi CSS opis.

Poznavanje različitih selektora koje CSS jezik poseduje presudno je za uspešno stilizovanje elemenata web sajtova. Uloga selektora jeste da odredi jedan ili više elemenata na koje će se primeniti stilizacija definisana unutar deklaracije. Stoga postoji veliki broj različitih CSS selektora koji omogućavaju da se na precizan način odaberu oni elementi na koje će se definisana stilizacija odnositi. Tokom trajanja kursa HTML & CSS Fundamentals imaćete prilike da se upoznate sa univerzalnim, tipskim, klasnim i ID selektorima, ali i sa nešto složenijim selektorima zasnovanim na relacijama.

5. Šta je CSS Box model?

Svi elementi koji se mogu videti na modernim web sajtovima iz ugla CSS-a tretiraju se kao kutije. Ovo u praksi znači da oko svakog HTML elementa postoji imaginarni okvir, koji može biti stilizovan korišćenjem CSS-a. Takav imaginarni okvir se drugačije naziva i Box Model, a sačinjen je iz 5 veoma bitnih delova, čijim stilizovanjem se može uticati na izgled svih elemenata web sajta:

• visina elementa;
• širina elementa;
• margine – spoljašnji razmak;
• padding – unutrašnji razmak;
• border – okviri.

U kursu HTML & CSS Fundamentals imaćete prilike da se na predavanjima detaljno upoznate sa svakim od ovih pomenutih elemenata od kojih je sačinjen CSS Box Model.

6. Kako se obavlja grupisanje i raspoređivanje elemenata web sajta?

Uticaj na vizuelnu komponentu HTML elementa nije jedini posao koji se obavlja korišćenjem CSS jezika. Tako se može reći da se CSS jezik koristi i za uticanje na raspored elemenata web sajta. Raspoređivanjem elemenata web sajta kreira se njegov layout.

Različiti pristupi za raspoređivanje elemenata koje obezbeđuje CSS jezik, posebno su efikasni u kombinaciji sa različitim HTML elementima za grupisanje. Tako posao kreiranja layouta jednog sajta podrazumeva poznavanje različitih CSS pristupa, ali i specifičnih HTML elemenata. Kurs HTML & CSS Fundamentals ilustruje različite CSS pristupe za raspoređivanje elemenata, što podrazumeva upoznavanje različitih tipova elemenata, različite tipove pozicioniranja, kao i brojna svojstva za uticanje na njihov raspored. Pored ovih CSS pristupa, HTML & CSS Fundamentals obrađuje i različite elemente za grupisanje, prevashodno div i span, kao i nekoliko elemenata koji poseduju posebno semantičko značenje.

7. Kako se stilizuju osnovni elementi web sajta?

Osnovu CSS jezika predstavljaju takozvani CSS opisi. Oni su sačinjeni iz selektora i deklaracija. Selektor određuje nad kojim elementom ili elementima će biti primenjena stilizacija. Sama stilizacija se definiše korišćenjem deklaracije. Deklaracija zapravo govori na koji način je potrebno stilizovati element. Deklaracija se sastoji iz svojstva i vrednosti. Poznavanje različitih CSS svojstava i vrednosti ključno je za uticanje na izgled elemenata web sajtova. Različiti HTML elementi mogu biti stilizovani različitim CSS svojstvima. Takođe, različita CSS svojstva mogu posedovati tačno utvrđen skup vrednosti. O svemu ovome detaljno se govori u kursu  HTML & CSS Fundamentals. Ilustrovano je stilizovanje teksta, lista, tabela, linkova, formi, slika...

Plan i program predavanja:

1. Osnove HTML-a

• Uvod u HTML
• Osnovna struktura HTML dokumenata

2. Tekst

• Osnove rada sa tekstom
• Liste
• Tabele

3. Linkovi i forme

• Linkovi
• Forme

4. Multimedija

• Slike
• Zvuk i video

5. Osnove CSS-a

• Uvod u CSS
• Osnovni CSS selektori
• CSS Box Model

6. Grupisanje i raspoređivanje elemenata

• Osnove raspoređivanja HTML elemenata
• Elementi za grupisanje i kreiranje prvog layouta
• Tok HTML dokumenta

7. Stilizovanje HTML elemenata

• Boje na webu
• Stilizovanje teksta
• Stilizovanje slika
• Stilizovanje lista i tabela