HTML i CSS kurs

HTML odnosno HyperText Markup Language je opisni jezik pomoću koga se kreiraju sajtovi, tačnije funkcionalnost elemenata jedne web stranice. S druge strane, CSS (Cascading Style Sheets) predstavlja jezik koji se koristi za uređivanje samog izgleda i formatiranje svih elemenata koje vidimo na sajtu. Iako na prvi pogled možda deluje da HTML i CSS zapravo imaju istu funkciju, njihova namena je potpuno drugačija, što je doprinelo tome da se ova dva jezika idealno dopunjuju.

Jednostavno, HTML je zadužen za „nošenje” sadržaja sajta, a CSS taj isti sadržaj uređuje. Ukoliko bismo uporedili pomenute jezike sa IT profesijama, HTML bi dobio ulogu programera, dok bi CSS najbolje oslikavao zanimanje dizajnera. Dakle, svaki jezik ima posebnu namenu, ali za kreiranje web stranice koja će izgledati i funkcionisati tako da je svi razumeju, neophodna su vam znanja iz oblasti HTML-a i CSS-a.

Svi sajtovi koje poznajete kreirani su uz pomoć HTML-a i upravo zbog toga za ovaj opisni jezik se često govori da danas predstavlja osnovu kompletnog weba. HTML spada među najjednostavnije jezike, što je uticalo da se na njegovu osnovu nadovezuju mnogi drugi programski jezici koji omogućavaju interaktivnost i dinamički sadržaj. Najpopularniji programski jezici tog tipa su PHP, Python, Java, ASP.NET, JavaScript, AJAX, a njihovo učenje će vam biti znatno olakšano ukoliko prethodno vladate HTML-om.

Opis i cilj HTML i CSS kursa

Tokom ovog HTML i CSS kursa, koji možete pohađati kao online kurs ili tradicionalno – u učionici, a koji je deo pripadajućih programa, upoznaćete se sa svim potrebnim detaljima za rad u pomenutim jezicima, počevši od najosnovnijih pojmova koji će vam pomoći da steknete kompletnu sliku o HTML-u i CSS-u. Razumevanjem ovih jezika naučićete kako funkcioniše web i steći informatičku pismenost koja spada među najtraženija znanja 21. veka.

Bez obzira da li ste početnik ili već posedujete predznanje, HTML i CSS kurs će vam pružiti odličnu podlogu za učenje PHP-a, JavaScript-a i drugih naprednih programskih jezika koji se koriste na webu. Drugim rečima, upoznavanjem sa jezicima koji predstavljaju osnovu modernog weba, znatno ćete sebi olakšati svaki naredni korak ka usavršavanju IT znanja i otvaranju novih profesionalnih mogućnosti.

Kada ovladate HTML-om i CSS-om, bićete u mogućnosti da kreirate web aplikacije, ili da kroz kod prilagođavate i održavate sadržaj na već formiranim sajtovima. Pored toga, moći ćete da uređujete web stranice pravljene u WordPressu, da stilizujete marketinške mejlove i još mnogo toga.

Vaše veštine moći ćete da primenite i odmah naplatite u oblasti web dizajna ili ih iskoristite kao temelj za nadogradnju znanja koja će vas kvalifikovati kao stručnjaka za web programiranje. HTML i CSS su jezici uz koje ćete na najjednostavniji način postati deo digitalnog sveta i pripremiti se da menjate budućnost.

Na početku kursa naučićete kako se kreiraju HTML tagovi i stranice, kao i šta predstavljaju doctype i svi ostali elementi koji čine ovaj jezik. Nakon toga, saznaćete šta su CSS opisi, od čega se sastoje i na koji način se koriste.

S obzirom na to da se HTML i CSS najbolje usavršavaju u praksi, nakon sticanja osnovnih znanja, uz instrukcije predavača, radićete na kreiranju sopstvenih web stranica i njihovoj funkcionalnosti. Korak po korak, vaše prve web stranice sve više će ličiti na sajtove koje kreiraju profesionalci. Naučićete kako da stilizujete i raspoređujete sve elemente na sajtu i bićete spremni da radite sve što vam HTML i CSS omogućavaju.

Profesor Vuk Ninić o jezicima koji čine osnovu modernog weba

U ovom videu možete ukratko saznati šta vas to očekuje na HTML i CSS kursu. Profesor Vuk Ninić približiće vam dva pomenuta jezika i objasniti zbog čega je veoma važno da ih poznajete. Pored toga, čućete i čime se kurs bavi, kao i neka od pitanja na koje ćete dobiti odgovor tokom predavanja. 

Kurs HTML i CSS će vam odgovoriti na pitanja:

1. Da li je HTML programiranje?

Zapravo, ne. HTML nije programski jezik i ne možemo reći da je programiranje. Ovo je jedna od čestih zabluda koja se sreće kada se govori o HTML jeziku. HTML je opisni (eng. markup) jezik, koji koristimo za strukturiranje podataka i raznih elemenata naših sajtova. Drugim rečima, možemo reći da HTML jezik, zajedno sa svojim tagovima, čini osnovnu gradivnu strukturu svakog modernog sajta.

Ne može se smatrati programiranjem jer mu nedostaju neki osnovni elementi i pravila koji su obavezni u programskim jezicima, kao što su PHP, JavaScript, C# i drugi. Naravno, to ne znači da je HTML loš, niti nezavršen ili bilo šta slično. HTML ima svoju namenu i kao takvog ga treba posmatrati.

2. Šta je HTML?

HTML je akronim od Hyper Text Markup Language, i on je platformski neutralan jezik, koji koristimo za strukturiranje i opisivanje sadržaja raznih dokumenata, uključujući i web stranice. Ovo bi mogla da bude jedna od prostih definicija HTML jezika. Međutim, šta zapravo predstavlja HTML? Drugim rečima, pomenuti jezik je temelj današnjeg weba i stranica na njemu.

Njegovom upotrebom postavljamo specifično određene i definisane elemente, koje nazivamo tagovima (eng. tag), pomoću kojih definišemo strukturu stranica. Postoje razni tagovi za razne namene. Da nema HTML jezika, ne bismo mogli da definišemo i razdvojimo elemente rasporeda stranica, da postavimo tipografske odrednice i tako dalje.

3. Šta je CSS?

CSS je akronim od Cascading Style Sheets i jedna definicija kaže da je to opisni jezik koji se koristi za opis prezentacione semantike drugog dokumenta pisanog u opisnom jeziku, koji je najčešće HTML.

Sama definicija je prilično nezgrapna i ne govori mnogo. Ipak, mnogo bitnije od same definicije je to šta zapravo predstavlja CSS i za šta se koristi. CSS je, kao poseban jezik, nastao nešto nakon pojave HTML-a, iako njegovi koreni sežu u daleku IT prošlost.

CSS je potpuno nezavisan jezik, odvojen od HTML-a, ali praktično ne može bez njega. Zapravo, možemo reći da HTML i CSS ne mogu jedan bez drugoga. Dok HTML strukture dokumenta stvaraju elemente stranica, CSS te iste elemente stilizuje i uređuje kako bi dobili željeni oblik i, mogli bismo reći, funkciju. Često se može čuti da je CSS „dizajn” sajtova. To nije baš u potpunosti tačno, ali nije ni daleko od istine. Bez CSS-a, moderni sajtovi bi izgledali veoma jednostavno i ne bi se mogli koristiti na adekvatan način.

4. Koja su ograničenja HTML i CSS jezika?

Oba jezika, i HTML i CSS su, s jedne strane, veoma moćni jezici kojima možemo postići mnogo, dok su, s druge strane, veoma jednostavni u svojim pravilima pisanja i strukturi koju prate. Naravno, ta jednostavnost i preglednost nije njihova mana, već jedna od prednosti koja je i doprinela popularnosti i brzom prihvatanju od strane stručnjaka u vreme prvobitnog razvoja weba.

Uklapanjem jednostavnih elemenata i potpunim poštovanjem jasno definisanih pravila koja su utkana u osnovu HTML-a i CSS-a, postižemo sjajne rezultate. Ipak, ovi jezici imaju svoja ograničenja. Kao opisni jezici (a ne programski), oni nam ne mogu pomoći oko detalja koji zahtevaju programiranje. Zbog toga većina sajtova danas, pored HTML i CSS jezika, koristi JavaScript, PHP i razne druge programske jezike. Na mnogim sajtovima ćete naći HTML, CSS, JavaScript i PHP istovremeno u upotrebi, i to je sasvim u redu. Oni nisu konkurencija jedan drugome i idealno se dopunjuju. Možemo reći da svako radi svoj posao u tom idealno uklopljenom timu.

5. Da li je HTML obavezan?

Danas praktično ne možemo zamisliti moderan web sajt bez HTML i CSS jezika. Teoretski, možemo kreirati sajt koji bi bio funkcionalan bez njih, ali je takav pristup značajno teži i prilično ograničavajući.

Na primer, ranije smo često kreirali specifične, takozvane Flash sajtove, koristeći Adobe Flash tehnologiju (koja je danas prevaziđena). I kod takvih sajtova, kod kojih je sve definisano unutar Flash strukture, morali smo koristiti HTML kao osnovu, temelj, koji će pokrenuti pomenuti Flash sadržaj. Ili, možda ćemo rešiti da kreiramo stranicu samo od slika koje smo pripremili u Photoshopu ili sličnom alatu. Čak i u takvom primeru, HTML je potreban kako bismo uopšte prikazali te slike.

Možda će neko pomisliti: „Ali, ja ću programirati svoj sajt pomoću PHP jezika. Zašto bi mi i onda bio potreban HTML?”. Iako deluje logično, ovo je praktično nemoguće. PHP je veoma moćan programski jezik, veoma popularan na današnjem webu. Ali, uz sve to, on ne može prikazati rezultate svoga rada, da se tako izrazimo, bez HTML tagova. HTML će biti taj koji će strukturirati elemente generisane PHP skriptama. Na kraju krajeva, sve što PHP stvori pred sam prikaz korisniku, to postaje HTML.

6. Da li postoje verzije HTML i CSS jezika? Koja je aktuelna verzija?

Trenutno aktuelne verzije koje su preporučene za upotrebu su HTML5 i CSS3. One su nastale kao plod dugogodišnjeg razvoja i neretko turbulentnih dešavanja i previranja u IT zajednici.

Iako nije njegov direktan naslednik, HTML5 je zamenio vremešni xHTML1, koji se koristio do pre nekoliko godina. Sam način označavanja je prilično specifičan, ali to ima svojih razloga, o kojima se govori u kursu. CSS3 je naslednik ranijeg CSS2.1. Danas možemo reći da su HTML5 i CSS3 u potpunosti prihvaćeni i da sve nove web sajtove treba kreirati pomoću ovih verzija, dok je ranije bilo problema u prelaznom periodu, najviše zbog podrške u browserima.

7. Zašto moram da učim HTML i CSS?

Za web dizajnera i programera, ovo pitanje je sasvim izlišno, ali iako se možda nećete baviti web dizajnom, web programiranjem ili srodnim oblastima, poznavanje CSS, a pogotovo HTML jezika je veoma korisno u modernom svetu, u kome smo okruženi IT uređajima i gde je internet sastavni deo naših života.

U modernom dobu, došlo je do promene paradigme obrazovanja i definicije pismenosti. U prošlom veku pismenost je podrazumevala nešto sasvim drugo, dok se danas često ogleda u elementarnom poznavanju IT oblasti i adekvantoj, racionalnoj upotrebi interneta, weba i drugih aspekata informacionih tehnologija.

HTML i CSS možda nisu elementarna znanja, poput rada u tekstualnom programu, MS Word alata, ili poput rada u web browseru kojim pristupamo web sajtovima ili čitamo e-mail poruke, ali su itekako korisna radi shvatanja i razumevanja tzv. „šire slike”. HTML struktura se pojavljuje na mnogim mestima i u mnogim upotrebama, a ne samo na web sajtovima, svom primarnom okruženju. Zbog toga je korisno, čime god se bavili, posedovati određeno osnovno znanje HTML i CSS jezika.

Plan i program predavanja

1. Uvod u svet HTML i CSS jezika

• Upoznavanje s osnovnim pojmovima vezanim za HTML i CSS jezike, ali i za internet upošte.
• Upoznavanje sa strukturom HTML dokumenta, postavljanje i primenjivanje tagova kao osnove jezika.
• Kreiranje prve HTML stranice i upoznavanje sa doctype-om.

2. Tekstualni tagovi

• Detaljno upoznavanje sa najčešće korišćenim tagovima HTML jezika.
• Definisanje pojma liste i primena lista na webu.

3. Linkovi i slike

• Postavljanje linkova (hiperlinkova) u HTML dokumentima i upoznavanje sa pojmovima relativnih i apsolutnih putanja.
• Priprema fotografija i njihovo postavljanje na HTML stranice.

4. Tabele, forme i informacije na stranicama

• Upoznavanje sa načinom funkcionisanja tabela i njihovim specifičnostima.
• Upoznavanje sa offline i online HTML formama.
• Definisanje dodatnih informacija o HTML stranici, metatagovima, ID i CLASS atributima.

5. CSS osnove

• Upoznavanje sa CSS-om, njegovim osnovnim pravilima i stilizacijom elemenata.
• Upravljanje okvirima oko inline i block elemenata kroz CSS box model.
• Detaljno upoznavanje sa tokom dokumenta i primena float vrednosti.

6. CSS stilizacija

• Specifičnosti boja i njihovo definisanje na webu.
• Primena tipografije u HTML dokumentima.
• Tehnike CSS-a koje utiču na img tagove
• Detaljno bavljenje stilizacijom lista, tabela i formi.