Da li ste ikada poželeli da napravite nešto što će ceo svet moći da vidi? Nešto što će biti samo vaše, kao vaša soba, ali digitalno? E pa, imam sjajnu vest: možete napraviti svoju veb-stranicu! To je kao da gradite svoju kuću na internetu, i to je mnogo lakše nego što mislite!
Zamislite da ste mali arhitekta i graditelj. Vaša veb-stranica je vaša digitalna kuća, a mi ćemo je sagraditi korak po korak. Ne trebaju nam čekić i ekseri, već samo računar, jednostavan program za pisanje i malo mašte! Spremni da postanete veb-graditelj? Hajde da počnemo!
1. Šta je veb-stranica? Tvoja digitalna kuća!
Pre nego što počnemo da gradimo, hajde da shvatimo šta je to veb-stranica.
Veb-stranica je kao jedna stranica u digitalnoj knjizi koja živi na internetu. Kada otvorite internet pretraživač (kao što je Google Chrome, Firefox ili Edge) i ukucate neku adresu (npr. https://www.google.com/search?q=google.com), vi zapravo otvarate jednu veb-stranicu.
Na veb-stranicama ima svega i svačega: tekstova, slika, video snimaka, dugmića na koje možeš da klikneš. Tvoja veb-stranica može biti o tebi, o tvojoj omiljenoj igrački, o tvom kućnom ljubimcu, ili čak o tvojim omiljenim crtanim filmovima! Ti biraš!
2. Šta nam je potrebno za gradnju? Tvoji digitalni alati!
Za pravljenje naše prve veb-stranice ne trebaju nam komplikovani alati. Potrebne su nam samo dve stvari:
A. Tekst Editor (Tvoja digitalna sveska):
Ovo je program u kojem ćemo pisati „tajni jezik“ naše veb-stranice. Kao kada pišete pismo, ali umesto reči pišemo kod.
- Za Windows računare: Najjednostavniji je Beležnica (Notepad). Naći ćeš ga tako što u pretragu u Windows-u ukucaš „notepad“.
- Za Mac računare: Koristi se TextEdit.
- Naprednija opcija (ako ti je Beležnica dosadna): Možeš koristiti besplatne programe kao što su VS Code (Visual Studio Code) ili Sublime Text. Oni su malo komplikovaniji, ali imaju super opcije koje olakšavaju pisanje koda (na primer, boje kod da lakše vidiš gde si pogrešio/la!). Ali za prvi put, Beležnica je savršena!
B. Veb-pretraživač (Tvoj digitalni prozor u svet):
Ovo je program koji „razume“ tajni jezik tvoje veb-stranice i pokazuje ti kako ona izgleda. Već ga imaš na računaru!
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Apple Safari
Sada kada imamo alate, hajde da naučimo tajni jezik!
3. Tajni jezik veb-stranica: HTML – kostur tvoje kuće!
Jezik koji računari razumeju za veb-stranice zove se HTML (čita se „Ha-Te-Em-El“). To je skraćenica za HyperText Markup Language. Zvuči komplikovano, ali nije!
Zamislite HTML kao kostur tvoje digitalne kuće. On govori pretraživaču gde je krov, gde su zidovi, gde su vrata. Ne govori kako će kuća izgledati (to radi CSS, ali o tome ćemo možda pričati drugi put!), već šta je šta.
HTML koristi nešto što se zove tagovi (čita se „teg-ovi“). Tagovi su kao male oznake koje govore pretraživaču šta je neki deo teksta. Većina tagova dolazi u parovima: jedan tag za početak i jedan za kraj.
- Početni tag:
<nešto>(npr.<p>za paragraf) - Završni tag:
</nešto>(npr.</p>za kraj paragrafa)
Znak < se zove „manje od“, a > „veće od“. Znak / se zove „kosa crta“.
Hajde da vidimo neke osnovne tagove koje ćemo koristiti za našu prvu veb-stranicu!
4. Gradimo kostur: Osnovni HTML tagovi za tvoju veb-stranicu!
Svaka veb-stranica ima nekoliko osnovnih delova. Evo kako ih pišemo:
A. Temelj tvoje veb-stranice:
Svaka HTML stranica počinje i završava ovim tagom:
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
<!DOCTYPE html>: Ovo govori pretraživaču da je ovo HTML dokument. Uvek ga pišemo na samom početku.<html>i</html>: Ovo je kao velika kutija koja sadrži celu tvoju veb-stranicu. Sve ostalo ide unutar ovih tagova.<head>i</head>: Ovo je kao glava tvoje veb-stranice. Ovde se nalaze informacije koje pretraživač koristi, ali koje se NE vide na samoj stranici.- Unutar
<head>taga obično ide<title>tag. <title>Moja prva veb-stranica</title>: Tekst koji staviš ovde biće prikazan u kartici (tabu) tvog pretraživača. Probaj da ovde staviš svoje ime ili nešto zanimljivo!
- Unutar
<body>i</body>: Ovo je telo tvoje veb-stranice. SVE ŠTO ŽELIŠ DA SE VIDI na tvojoj veb-stranici (tekst, slike, video) ide unutar ovih tagova.
B. Osnovni elementi tela stranice:
Sada kada imamo temelj i telo, možemo da dodajemo stvari unutra!
-
Naslovi (Headings):
- Kao naslovi u knjizi! Imamo ih šest vrsta, od najvećeg do najmanjeg:
<h1>do<h6>. <h1>Ovo je veliki naslov!</h1>(najveći i najvažniji)<h2>Ovo je malo manji naslov</h2>- Koristi
<h1>za glavni naslov tvoje stranice.
- Kao naslovi u knjizi! Imamo ih šest vrsta, od najvećeg do najmanjeg:
-
Paragrafi (Paragraphs):
- Za običan tekst. Kao kada pišeš priču u svesci.
<p>Ovo je jedan paragraf teksta. Ovde možeš da napišeš sve što želiš.</p>
-
Linkovi (Links):
- Ovo su „vrata“ koja te vode na druge veb-stranice ili na druge delove tvoje stranice.
<a href="https://www.google.com">Klikni ovde da odeš na Google!</a><a>je tag za link.href=""je kao adresa na koju te link vodi. Uvek stavi celu adresu (https://...).- Tekst između
<a>i</a>je ono što će se videti na stranici, i na šta ćeš kliknuti.
-
Slike (Images):
- Za dodavanje slika na tvoju stranicu!
<img src="slika_macke.jpg" alt="Moja slatka maca"><img>je tag za sliku (nema završni tag jer slika nema „sadržaj“ unutra, ona je sama po sebi sadržaj).src=""(izvor) je adresa gde se slika nalazi. Ako je slika u istoj fascikli kao i tvoja veb-stranica, samo napiši ime slike (npr.maca.jpg).alt=""(alternativni tekst) je tekst koji se pojavi ako se slika ne učita, ili ga koriste ljudi koji koriste posebne programe za čitanje veb-stranica (za slepe osobe). Uvek je dobro da ga staviš!
5. Hajde da napravimo prvu veb-stranicu – korak po korak!
Sada je vreme za praksu! Prati ove korake:
Korak 1: Otvori Beležnicu (Notepad) ili TextEdit.
- Na Windows-u: Ukucaj „notepad“ u Search (pretragu) i otvori.
- Na Mac-u: Otvori TextEdit, pa idi na Format -> Make Plain Text (Format -> Pretvorite u običan tekst). Ovo je važno da bi se kod pravilno sačuvao!
Korak 2: Napiši svoj prvi HTML kod.
Pažljivo prekopiraj (ili još bolje, prekucaj!) sledeći kod u svoju Beležnicu/TextEdit. Obrati pažnju na < i > i na /!
HTML
<!DOCTYPE html>
<html>
<head>
<title>Moja prva veb-stranica!</title>
</head>
<body>
<h1>Dobrodošli na moju kul veb-stranicu!</h1>
<p>Ćao svima! Moje ime je [Tvoje Ime] i ovo je moja prva veb-stranica koju sam sam/a napravio/la! Super, zar ne?</p>
<h2>Šta volim da radim:</h2>
<p>Volim da igram [ime omiljene igrice] i da crtam [nešto što voliš da crtaš].</p>
<h3>Moj omiljeni link:</h3>
<p>Posetite <a href="https://www.youtube.com">YouTube</a> za super video snimke!</p>
<h3>Moja omiljena životinja:</h3>
<img src="slika_macke.jpg" alt="Slika moje mačke" width="300">
<p>Ovo je moja maca Mici. Ona je jako umiljata i voli da se igra lopticama.</p>
</body>
</html>
Važno:
- Umesto
[Tvoje Ime],[ime omiljene igrice]i[nešto što voliš da crtaš]upiši svoje podatke! - Za sliku: Pre nego što sačuvaš HTML fajl, pronađi neku sliku na svom računaru (npr. sliku mačke, psa, tvoje igračke). Prebaci tu sliku u istu fasciklu gde ćeš sačuvati svoj HTML fajl. Zatim, umesto
slika_macke.jpgu kodu, napiši tačno ime te tvoje slike (npr.pas.pngilimojrobot.jpeg). Pazi na velika i mala slova! Deowidth="300"znači da će slika biti široka 300 piksela.
Korak 3: Sačuvaj svoj fajl!
Ovo je NAJVAŽNIJI korak! Moraš sačuvati fajl tako da pretraživač zna da je to veb-stranica.
- Idi na File (Datoteka) -> Save As (Sačuvaj kao…).
- Ime fajla: Daj mu ime
moja_stranica.html. Obavezno na kraju napiši.html! To je kao prezime koje govori računaru da je ovo HTML fajl. - Tip fajla (Save as type): Promeni sa „Text Documents (*.txt)“ na „All Files“ (Sve datoteke). Ovo je ključno!
- Mesto za čuvanje: Sačuvaj ga negde gde ćeš ga lako pronaći, na primer na Desktopu ili u fascikli „Dokumenti“.
Korak 4: Otvori svoju veb-stranicu u pretraživaču!
Sada sledi magija!
- Idi tamo gde si sačuvao/la fajl
moja_stranica.html. - Dupli klik na fajl
moja_stranica.html. - I… TADA! Tvoja prva veb-stranica će se otvoriti u tvom veb-pretraživaču!
Čestitam! Napravio/la si svoju prvu veb-stranicu!
6. Igraj se i eksperimentiši! Budi kreativan/na!
Sada kada znaš osnove, možeš da se igraš i da menjaš svoju veb-stranicu!
- Dodaj još paragrafova: Napravite još
<p>tagova i napiši o svojim hobijima, omiljenoj knjizi, ili šta si radio/la danas. - Dodaj još naslova: Koristi
<h2>i<h3>da organizuješ svoj tekst. - Novi linkovi: Dodaj linkove ka svojim omiljenim veb-sajtovima (uvek traži dozvolu roditelja ako nisi siguran/na!).
- Još slika: Pronađi još slika i dodaj ih na svoju stranicu. Zapamti da slika mora biti u istoj fascikli i da moraš tačno napisati njeno ime u
src="". - Boldovan tekst: Želiš da nešto istakneš? Koristi
<b>Ovo je boldovan tekst</b>(B kao „bold“). - Iskrivljen tekst (Italic): Za nagnut tekst koristi
<i>Ovo je iskrivljen tekst</i>(I kao „italic“). - Lista stvari: Želiš da napraviš spisak?
- Neuređena lista (sa tačkama):
HTML
<ul> <li>Moja omiljena hrana: pizza</li> <li>Moj omiljeni sport: fudbal</li> <li>Moj omiljeni predmet: informatika</li> </ul>(
<ul>je neuređena lista,<li>je stavka liste) - Uređena lista (sa brojevima):
HTML
<ol> <li>Prvi korak</li> <li>Drugi korak</li> <li>Treći korak</li> </ol>(
<ol>je uređena lista)
- Neuređena lista (sa tačkama):
Važno pravilo: Kada menjaš kod u Beležnici, uvek Sačuvaj (Save) fajl nakon svake promene, pa onda Osveži (Refresh) stranicu u veb-pretraživaču (dugme sa strelicom koja se okreće, ili F5 na tastaturi) da bi video/la promene!
7. Šta je sledeće? Još tajni jezika interneta!
Ovo je samo početak! Naučili ste osnove HTML-a, kostur veb-stranica. Ali veb-stranice mogu biti mnogo više od samo teksta i slika.
- CSS (Cascading Style Sheets): Setite se da je HTML kostur kuće? E pa, CSS je boja, tapete, nameštaj! On služi da tvoja veb-stranica izgleda lepo – da menjaš boje, fontove, raspored elemenata. To je sledeći korak kada želiš da tvoja stranica izgleda kao prave veb-stranice koje viđaš!
- JavaScript: Ovo je magija koja oživljava veb-stranice. Sa JavaScriptom možeš da napraviš dugmiće koji rade nešto kada klikneš na njih, galerije slika koje se automatski menjaju, igre, ili čak da menjaš stvari na stranici bez da je osvežavaš.
Tvoja veb-graditeljska avantura tek počinje!
Pravljenje veb-stranica je sjajan način da naučiš kako internet funkcioniše, da razviješ svoju kreativnost i da naučiš veštinu koja će ti biti veoma korisna u budućnosti. Ne brini ako nešto ne radi iz prvog puta – to je deo učenja! Važno je da se zabavljaš i da nastaviš da istražuješ!
Ko zna, možda će tvoja prva veb-stranica biti početak nečeg velikog! Srećno u gradnji!
