Kako nastaje prvi veb-sajt – vodič za početnike

Otvoriš telefon.

Klikneš na neki link.

Pojavi se sajt.

Naslov.

Fotografija.

Meni.

Dugme.

Možda video.

Možda formular.

Možda prodavnica.

Sve izgleda kao jedna gotova stvar.

Ali iza svakog sajta koji svakodnevno koristiš neko je morao da odluči:

Šta će biti na početku stranice?

Gde će stajati fotografija?

Koji tekst će biti najveći?

Šta će se dogoditi kada klikneš na dugme?

Kako će sajt izgledati na telefonu?

I ono najzanimljivije:

Sve je jednom počelo od praznog ekrana.

Možda ti programiranje i kod deluju kao nešto komplikovano što rade ljudi koji znaju stotine komandi napamet.

Ali prvi veb-sajt uopšte ne mora da bude komplikovan.

Može imati samo naslov.

Nekoliko rečenica.

Jednu fotografiju.

Jedan link.

I možeš da ga napraviš ti.

Prvo ne razmišljaj o kodu

Pre nego što napišeš bilo šta, odgovori na jedno pitanje:

Šta želim da napravim?

Možda voliš muziku.

Napravi stranicu:

„Pet albuma koje najviše slušam.“

Možda voliš fudbal.

Napravi:

„Moj omiljeni tim.“

Voliš fotografiju?

Napravi malu galeriju svog grada.

Imaš psa ili mačku?

Napravi stranicu o svom ljubimcu.

Igraš igrice?

Napravi listu svojih pet favorita.

Za prvi sajt nije važno da tema bude „ozbiljna“.

Važno je da ti bude zanimljiva.

Jer mnogo je lakše učiti kada praviš nešto što stvarno želiš da napraviš.

Od čega je veb-sajt napravljen?

Vrlo brzo ćeš upoznati tri pojma:

HTML

CSS

JavaScript

Na početku možda zvuče kao tri nova školska predmeta.

Ali možemo mnogo jednostavnije.

Zamisli kuću.

HTML je njena konstrukcija.

Govori gde je naslov.

Gde je tekst.

Gde je fotografija.

Gde je link.

CSS određuje kako ta kuća izgleda.

Boje.

Veličine.

Razmaci.

Fontovi.

Raspored elemenata.

A JavaScript omogućava da se nešto dogodi.

Klikneš na dugme.

Otvori se meni.

Promeni se sadržaj.

Pojavi se poruka.

Za prvi korak ti ne trebaju sva tri.

Krenućemo od HTML-a.

Napravi svoj prvi HTML fajl

Otvori editor teksta ili neki editor za kod.

Napravi novi fajl.

Nazovi ga:

index.html

I napiši:

<h1>Zdravo! Ovo je moj prvi sajt.</h1>

<p>Zovem se Ana i volim fotografiju.</p>

<p>Ovde ću objavljivati fotografije svog grada.</p>

Sačuvaj fajl.

Otvori ga u internet pregledaču.

I eto ga.

Napravio si svoju prvu veb-stranicu.

Nema animaciju.

Nema veliki meni.

Nema spektakularan dizajn.

Ali postoji nešto mnogo važnije.

Pre nekoliko minuta ova stranica nije postojala.

Sada postoji.

I napravio si je ti.

Šta zapravo znače ove oznake?

<h1> označava glavni naslov.

<p> označava pasus.

HTML koristi takve oznake, odnosno tagove, da pregledaču kaže kakvu ulogu određeni sadržaj ima.

Ako promeniš tekst između <h1> i </h1>, sačuvaš fajl i osvežiš stranicu — promeniće se i ono što vidiš u pregledaču.

Probaj.

Promeni naslov.

Dodaj još jedan pasus.

Pogreši.

Ispravi.

Ovo je važan deo učenja:

promeniš nešto → vidiš rezultat → razumeš malo više → probaš ponovo.

Ako želiš detaljnije da razumeš kako HTML funkcioniše, možeš da pročitaš i dodatnu lekciju HTML – Web dizajn kurs na Websites Workshopu, gde su objašnjeni osnovna struktura, tagovi, naslovi, paragrafi, linkovi, slike, liste i drugi elementi koji grade stranicu.

Dodaj fotografiju

Sajt sa samo nekoliko rečenica brzo postane dosadan.

Hajde da dodamo fotografiju.

Ako se fotografija nalazi u istom folderu kao tvoj HTML fajl i zove se:

moja-fotografija.jpg

u HTML možemo dodati:

<img src="moja-fotografija.jpg" alt="Fotografija mog grada">

Sačuvaj.

Osveži stranicu.

Fotografija bi trebalo da se pojavi.

Ali obrati pažnju na ovaj deo:

alt="Fotografija mog grada"

Alt tekst nije tu samo reda radi.

On opisuje fotografiju i pomaže da sadržaj bude pristupačniji, između ostalog i ljudima koji koriste čitače ekrana.

Dobar web dizajn nije samo pitanje toga da nešto lepo izgleda.

Važno je i da različiti ljudi mogu da ga koriste.

Sada neka stranica izgleda malo više kao tvoja

HTML nam je dao sadržaj i strukturu.

Ali stranica verovatno još izgleda prilično jednostavno.

Tu upoznajemo CSS.

Probaj da u isti HTML fajl dodaš:

<style>
h1 {
 font-size: 40px;
 text-align: center;
}

p {
 font-size: 18px;
}
</style>

Sačuvaj.

Osveži stranicu.

Naslov je veći.

Tekst izgleda drugačije.

Sada promeni 40px u 60px.

Šta se dogodilo?

Vrati na 30px.

Promeni poravnanje.

Eksperimentiši.

CSS je upravo ono što nam omogućava da od obične HTML strukture počnemo da pravimo dizajn.

U dodatnoj lekciji CSS – Web dizajn kurs možeš detaljnije da istražiš selektore, boje, fontove, pozadine, veličine elemenata, pozicioniranje i druge stvari kojima kontrolišemo izgled stranice.

„A šta ako nešto pokvarim?“

Hoćeš.

Sigurno. 🙂

Napisaćeš nešto pogrešno.

Zaboravićeš znak.

Fotografija se neće pojaviti.

CSS neće raditi.

Promenićeš jednu sitnicu, a rezultat će izgledati potpuno drugačije nego što si očekivao.

Dobro došao u web development.

Greška ne znači:

„Nisam za ovo.“

Greška samo znači:

„Ovde postoji nešto što još nisam razumeo.“

Pogledaj šta si poslednje promenio.

Vrati korak unazad.

Uporedi kod sa primerom.

Potraži objašnjenje.

Probaj ponovo.

To ne rade samo početnici.

To rade i ljudi koji godinama prave sajtove.

Ne moraš sve da pamtiš

Programer nije osoba koja zna napamet svaku HTML oznaku i svako CSS pravilo.

Programeri stalno proveravaju dokumentaciju.

Pretražuju.

Gledaju stare projekte.

Testiraju.

Pitaju kolege.

Danas često koriste i AI alate.

Mnogo je važnije da počneš da razumeš:

šta želiš da napraviš,

kako da veliki problem podeliš na male,

gde da pronađeš informaciju koja ti nedostaje

i

kako da otkriješ zašto nešto ne radi.

To su veštine koje postaju sve bolje što više vežbaš.

A može li AI da napravi sajt umesto mene?

Može.

Danas možeš opisati kakvu stranicu želiš i AI će ti često za nekoliko sekundi napisati HTML i CSS.

Ali tu postoji zamka.

Ako napišeš:

„Napravi mi sajt.“

možda ćeš dobiti gotov sajt.

Ali možda nećeš znati šta se u njemu dogodilo.

Bolje pokušaj ovako:

„Pravim svoj prvi HTML sajt. Nemoj da ga napraviš umesto mene. Vodi me korak po korak i daj mi mali nagoveštaj kada zapnem.“

Sada AI više nije neko ko radi umesto tebe.

Postaje pomoćnik.

Ti i dalje praviš.

To je velika razlika.

Kada elementi krenu da „beže“ po stranici

Posle nekog vremena poželećeš nešto malo ozbiljnije.

Možda hoćeš fotografiju levo, a tekst desno.

Tri kartice jednu pored druge.

Meni čiji su elementi lepo raspoređeni.

Tu ćeš upoznati stvari kao što je Flexbox.

Ne moraš ga učiti prvog dana.

Ali kada savladaš osnovni HTML i CSS, biće jedan od veoma korisnih sledećih koraka.

Na Websites Workshopu postoji i posebna lekcija CSS Flexbox – Web dizajn kurs, koja objašnjava kako Flexbox pomaže u organizovanju i raspoređivanju elemenata na stranici.

Ne počinji društvenom mrežom

Ovo je česta početnička zamka.

Napišeš prvi naslov.

Dodaš jednu sliku.

I onda pomisliš:

„Napraviću novu društvenu mrežu.“

Polako. 🙂

Prvo napravi jednu dobru stranicu.

Onda dodaj link.

Drugu stranicu.

Meni.

Još nekoliko elemenata.

Pokušaj da izgleda lepo i na telefonu.

Dodaj nešto novo svaki put kada naučiš novu stvar.

Tako nastaju ozbiljniji projekti.

Ne jednim ogromnim skokom.

Nego gomilom malih koraka.

Tvoj prvi sajt ne mora da bude lep

Stvarno ne mora.

Prva fotografija koju napraviš verovatno neće biti najbolja fotografija u tvom životu.

Prvi video neće biti najbolji.

Prvi program neće biti najbolji.

Zašto bi prvi sajt morao da bude savršen?

Njegov posao nije da osvoji nagradu za dizajn.

Njegov posao je da ti pokaže:

„Ja ovo mogu da napravim.“

Drugi će biti bolji.

Peti još bolji.

A jednog dana možda ćeš pogledati neku staru stranicu i pomisliti:

„Kako sam ovo mogao ovako da napravim?“ 🙂

To je dobar znak.

Znači da si napredovao.

Mali izazov: napravi svoju prvu stranicu

Evo zadatka.

Izaberi temu koja ti se dopada.

Na stranici treba da imaš:

• jedan glavni naslov;
• najmanje dva pasusa;
• jednu fotografiju;
• jedan link;
• najmanje jednu stvar koju si promenio pomoću CSS-a.

To je sve.

Ako želiš malo ozbiljniji početni projekat, možeš pogledati i dodatnu lekciju Web dizajn kurs – Uvodni projekat (HTML i CSS), gde se HTML i CSS odmah koriste zajedno kroz konkretan projekat.

Nemoj samo kopirati.

Promeni tekst.

Promeni slike.

Menjaj stvari.

Napravi svoju verziju.

Tek tada projekat stvarno postaje tvoj.

Ako ti je ovo bilo zanimljivo, nastavi na IT Kutku

Možda si stigao do ovog dela i pomislio:

„Čekaj, ovo mi je zapravo zanimljivo.“

Odlično.

Ne moraš sada sam da tražiš desetine različitih tutorijala i razmišljaš šta treba da učiš prvo, a šta posle.

Na IT Kutak platformi sadržaje iz web dizajna prolazimo postepeno i praktično.

Ideja nije samo da gledaš video.

Gledaj lekciju.

Otvori editor.

Otkucaj ono što vidiš.

Promeni nešto.

Pogreši.

Vrati se.

Probaj ponovo.

Napravi svoju verziju.

Na IT Kutku želimo da mladi internet ne posmatraju samo kao mesto na kojem gledaju tuđe sadržaje, već i kao prostor u kojem mogu sami nešto da naprave. Upravo zato su HTML i CSS deo edukativnih sadržaja platforme.

Tekstovi sa Websites Workshopa koje smo pomenuli u ovom članku mogu da ti posluže kao dodatna objašnjenja kada želiš neku temu da istražiš malo dublje.

Ali glavno mesto za učenje i prolazak kroz program ostaje IT Kutak.

Tu nastavljamo dalje.

Korak po korak.

A gde sve ovo može da te odvede?

Možda ćeš napraviti jednu stranicu i zaključiti:

„Zanimljivo, ali ovo ipak nije za mene.“

I to je sasvim dobar rezultat.

Probao si nešto novo.

Možda ćeš napraviti drugu.

Pa treću.

Možda ćeš uskoro početi drugačije da gledaš sajtove koje svakodnevno koristiš.

Zašto je meni baš ovde?

Kako su postavili tekst pored fotografije?

Zašto ovo dugme promeni izgled kada pređem mišem preko njega?

Kako su napravili da stranica izgleda dobro i na telefonu?

A onda će se možda dogoditi nešto zanimljivo.

Umesto:

„Kako su oni ovo napravili?“

počećeš da razmišljaš:

„Kako bih ja ovo napravio?“

Tu se nešto menja.

Više nisi samo korisnik interneta.

Počinješ da budeš neko ko na internetu stvara.

Možda ćeš jednog dana praviti sajtove.

Možda aplikacije.

Možda ćeš postati dizajner.

Možda programer.

A možda ćeš se baviti nečim potpuno drugim.

To sada nije ni važno.

Za danas je dovoljan jedan prazan fajl.

Jedna ideja.

I nekoliko znakova:

<h1>Zdravo!</h1>

Otvori stranicu u pregledaču.

Pogledaj ono što si napravio.

Tako počinje prvi veb-sajt.