Web dizajn : mala škola HTML-a, CSS-a, javascript-a… – uvodni čas

Ovde se neću baviti previše teorijom i gomilom nepoznatih, stranih reči, kao i objašnjenjima svih mogućih opcija koje nam za početak uopšte nisu potrebne.

Želeo bih da napravim mali uvod za sve koji hoće da uče, nauče i da se bave web dizajnom u životu.

Za naprednije stvari nemam nijedan drugi savet, osim da vežbate, radite proste primere, pa komplikovanije kad naučite te proste. Ako želite da zaradite mnogo novca, to ćete moći tek posle minimum godinu dana rada, jer ćete tek tada biti u stanju da uradite običan web sajt. Ne bih želeo da vam odmah sada ubijem želju za učenjem, ali ozbiljnije sajtove ipak sami nećete moći raditi. Pored smisla za dizajn, potreban vam je i smisao za programiranje, jer svaki ozbiljan sajt iza sebe ima i baze podataka. Verujte mi da je teško u jednoj osobi objediniti dobrog dizajnera i dobrog programera. Nemojte živeti u zabludi da ste vi baš takva osoba! Ehotim čine i programer i dizajner i jedno bez drugog ne bi mogli da urade skoro nijedan web sajt iz portfolia (koji možete videti na linku: Ehotim – web dizajn  i web programiranje portfolio)

Šta će vam biti potrebno za rad? Za početak vam je dovoljan bilo koji HTML editor. Ima mnogo besplatnih, kao i ne baš besplatnih. Dreamweaver je rešenje koje će vam mnogo olakšati posao, ali njegova cena nije baš najprihvatljivija za početnike. Ja ću vam ovde prikazati spartanski pristup izrade web sajtova. Koristićemo Notepad koji se nalazi na svakom računaru. Za uvodne stvari za HTML, CSS i javascript Notepad će vam odraditi sav posao.

Važno: da biste pravili web sajtove morate da znate da dobro koristite neki program za obradu slika i za vektorsku grafiku. Ovde neće biti akcenat na dizajnu nego na HTML i CSS-u, ali znajte da morate da vladate i takvim programima.

Da počnemo?

Otvorite bilo koji web sajt (možete i da ostanete na ovom) i u svom browseru nađite opciju View Source (u zavisnosti koji browser i jezik koristite, ta opcija će se zvati Page Source, Sorce, Prikaži izvor stranice, Izvor). Do te opcije možete doći tako što ćete na praznom delu strane kliknuti desnim klikom pa naći tu opciju, ili ako u gornjem meniju izaberete View, pa tu nađete tu opciju. Videćete svašta i ništa vam neće biti jasno. Ako se malo udubite, uspećete da prepoznate neke delove tog koda, jer se tu nalazi sadržaj web strane koju ste do malo pre gledali.

Ništa vam nije jasno? TO JE SASVIM NORMALNO, ali verujte da ćete vremenom razumeti sve veći i veći deo te „source“ stranice.

Ono što svaka web stranica ima u svom kodu je ovo

[sourcecode language=“html“]






[/sourcecode]

Tako izgleda kostur prazne strane. Teoretski vam ne treba ni to, ali ovde ćemo se truditi da pričamo samo o „validnom“ kodu.

Sve ove stvari između < i> se zovu tagovi (neke stvari se ne isplati prevoditi na srpski jezik) i skoro svi tagovi u HTML-u se sastoje od početnog i krajnjeg dela, tj skoro svaki tag morate da otvorite sa <tag> i zatvorite sa tag> gde je tag ime tog taga.

‘ajmo da napravimo našu prvu web stranicu.

[sourcecode language=“html“]




moja prva web stranica


[/sourcecode]

Gornji kod prepišite u Notepad (nemojte raditi copy-paste metodu u prvo vreme da biste savladali bolje kod) i snimite ga kao index.html.

Zlatni savet: nemojte da snimite index.html direktno u My Documents folder, nego napravite folder Moj-Prvi-Web-Sajt i snimite ga tu. Naravno folder Moj-Prvi-Web-Sajt možete snimiti u MyDocuments, ali bolje bi bilo da u My Documents napravite folder Moji-Web-Sajtovi, pa u njemu napravite folder Moj-Prvi-Web-Sajt i tu snimite ovaj fajl kao index.html.

Otvorite browser koji koji koristite za surfovanje internetom i idite na File -> Open i nađite upravo snimljeni index.html i otvorite ga.

Videćete praznu stranu sa tekstom „moja prva web stranica“. Kad uradite View Source videćete kod koji ste vi napravili, tako da je to dokaz da ste upravo otvorili vašu prvu, lično napravljenu web stranicu. Stavite je odmah u vaše omiljene strane, tj u bookmarks, da biste joj ubuduće brže pristupali.

Niste impresionirani vašim radom? Moja metoda učenja je na početku malo sporija, ali moja je teorija da je bolje naučiti malo, ali sa razumevanjem, nego odmah krenuti da unosite slike, skriptove, ali da nemate pojma kako to radi.

Nastavak sledi uskoro i u nastavku ćemo odmah krenuti da učimo šta je CSS i čemu služi…