Nauči Web!

U ovom postu napokon počinjemo izradu sa našom prvom jako, jako jednostavnom web stranicom. Kod svakog učenja programskih i skriptnih jezika, običaj je započeti sa jedostavnom aplikacijom koja ispisuje "Hello World" na ekranu. Prateći taj običaj i mi ćemo napraviti isto. Kreiranje prve stranice Prvo trebamo otvoriti text editor i kreirati novi dokument. Pokazati ću primjer u Visual Studo Code-u. Postupak: Otvorimo Visual Studo Code U gornjem lijevom kutu u izborniku kliknemo na "File" Nakon toga odaberemo odmah ispod "New" Ako se ne možeš snaći, prikazano je na slici ispod. Još jednostavniji način je držanjem tipke ctrl na tipkovnici i klikom na slovo n (Ctrl+n). Nakon kreiranja novog dokumenta, vrijeme je da napišemo i objasnimo par linija koda. Napisati ćemo iduće u text editor: <!DOCTYPE html > <html lang = "hr" > <head> <meta charset = "UTF-8" > <meta http-equiv = "X-UA-Compatible"...

Što nam je potrebno za izradu web stranica?

U ovom postu ću objasniti koji alat je nam je potreban za razvoj web stranica. Trebaju nam samo dvije stvari da počnemo sa razvijanjem vlastitih jednostavnih web stranica, a to su text editor i web preglednik. Text editor Skoro svaki program je napisan od teksta koji ima posebnu svoju sintaksu i posebne riječi koje izvršavaju naredbe koje upišemo u tekstualnu datoteku i spremimo ju sa nekakvim nastavkom. Isto tako rade i HTML i CSS. Oni su pisani u nekakvom tekst editoru, ne u tekst procesoru (primjer Microsoft Word i slični). Za početak nam može poslužiti Notepad, Notepad++, Sublime Text, Brackets, Atom, Visual Studio Code ili bilo koji drugi tekst editor. Mora biti tekst editor. U ovom tečaju preporučam Visual Studio Code, jer se najčešće koristi za razvoj web aplikacija. Odličan je jer se mogu koristiti razne teme, dodaci i boja sintaksu prema riječima tog jezika, pa se je lakše snaći u kodu. Dostupan je za Windows, Linux i Mac. Možete ga preuzeti na stranici: ...

Kako web stranice rade?

Iz prijašnjeg posta, naučili smo što je HTML i CSS, no kako web stranice zapravo rade? Odgovor na to pitanje ću pokušati odgovoriti u ovom postu. Kada u web pregledniku posjetimo Google početnu stranicu, Google vraća web stranicu sa logom i formom gdje upisujemo pojam koji želimo pretražiti. To je što korisnik vidi, ali u pozadini se događa još nekoliko procesa. Za ovaj tečaj nam nije potrebno puno znanje kako i što točno serveri rade, pa ću ukratko opisati što nam je točno bitno da znamo. Prvo šaljemo zahtjev na Google server, on po potrebi obrađuje nekakve podatke i parametre, ako smo ih poslali sa zahtjevom. Nakon toga server vrati HTML datoteku sa kosturom stranice i sadržajem. Također vraća i CSS datoteku sa pravilima stiliranja stranice web pregledniku. Preglednik onda obrađuje HTML i CSS, te HTML-u dodaje izgled koji je definiran u CSS-u. Nakon odrade svih tih procesa, web preglednik nam vraća stranicu kako treba izgledati. U idućem postu ćemo vidjeti što nam je točno potrebno...

HTML? CSS? Što je to?

Svaka stranica na internetu koristi HTML i CSS. HTML je kratica za HyperText Markup Language i on služi kao kostur web aplikacije. CSS je kratica za Cascading Style Sheets i svrha mu je stilizirati postojeće HTML elemente, kao što su boja pozadine, boja teksta, veličina teksta i tako dalje. Kada radimo web stranicu, sa HTML-om napravimo recimo navigaciju u kojoj imamo nekoliko linkova koji služe za navigiranje kroz web stranicu. To je kostur i sam HTML ne dodaje nikakv izgled. Primjer čiste HTML navigacije bez CSS-a: Početna O nama Neki link Da HTML navigacija izgleda lijepše, moramo na njega primjeniti CSS: Početna O nama Neki link Ovo je kratki primjer kako zajedno koristimo HTML i CSS. Napravimo kostur web stranice sa HTML-om i nakon toga mu postavimo izgled sa CSS-om. U idućem koraku ćemo naučiti kada upišemo link od neke web stranice što se točno događa i kako web preglednik prikazuje našu web stranicu.

HTML - Linkovi (Poveznice)

Najvažniji dio svake web stranicu su linkovi, odnosno poveznice. Oni služe za navigaciju kroz web stranicu, navigaciju na druge web stranice, slike i ostalo. Napravit link je vrlo jednostavno. Za to nam služi <a> tag. Unutar <a> taga upisujemo sadržaj koji će služiti kao poveznica, a za odabir lokacije na koju će link upućivati koristimo atribut href . Ako želimo napraviti link koji upućuje na ovaj blog onda će link izgledati ovako: <a href="http://nauciweb.blogspot.hr/">Nauči Web!</a> Link će ispasti ovako: Nauči Web!

HTML - Line break (Novi red)

Možda se pitaš sada što će ti line break? HTML sam po sebi stavlja tekst u novi red kada tekst ne stane u jedan red. No što ako baš moraš napraviti novi red? Ako to napraviš u tekst editoru, tekst će ti staviti u novi red, ali na web stranici će ostati kako je i bilo. Zato se koristi <br> tag. Tag <br> se koristi na mjestu gdje želimo napraviti novi red. Primjer za novi red: <p>Mogu i znam<br>napraviti novi<br>red<br>na web<br>stranici!</p> To ispadne kao na slici ispod. Cijeli kod: <!DOCTYPE html> <html lang="hr"> <head> <meta charset="utf-8"/> <title>Novi red</title> </head> <body> <p>Mogu i znam<br>napraviti novi<br>red<br>na web<br>stranici!</p> ...

HTML - Paragraph (Paragrafi)

Paragrafi su tagovi u koje se stavlja neki tekst. Paragraf se piše kao tag <p> . U njega se može stavljati cijeli odlomak, rečenica ili riječ. Stavlja se unutar <body> taga, a sadržaj paragrafa se stavlja unutar <p></p> taga. Jednostavan primjer je: <p>Ovo je jednostavan paragraf!</p> Ako je sve dobro napravljeno, trebaš dobiti stranicu isto kao i na slici. Cijeli kod: <!DOCTYPE html> <html lang="hr"> <head> <meta charset="utf-8"/> <title>Paragrafi</title> </head> <body> <p>Ovo je jednostavan paragraf!</p> </body> </html>

HTML - Headeri (Zaglavlja)

Headeri su kao što i samo ime kaže, zaglavlja koja se koriste da bi istakla neki određeni tekst ili neko poglavlje, post ili nešto slično. U HTML-u imamo šest različitih headera. Oni se pišu ovako: <h1> , <h2> , <h3> , <h4> , <h5> i <h6> . Kada želiš koristiti header odnosno zaglavlje, jednostavno napišeš <h1>Tekst nekog zaglavlja</h1> . Na slici ispod, napravio sam u jednostavnom dokumentu sva šest zaglavlja, pa ih možeš proučiti i vidjeti razliku između njih. Cijeli HTML kod je: <!DOCTYPE html> <html lang="hr"> <head> <meta charset="utf-8"/> <title>Zaglavlja</title> </head> <body> <h1>Zaglavlje 1</h1> <h2>Zaglavlje 2</h2> ...

HTML - Title (Naslov)

U prijašnjem postu dao sam idući kod: <!DOCTYPE html> <html lang="hr"> <head> <meta charset="utf-8"/> </head> <body> </body> </html> Kopiraj taj kod i zaljepi ga u text editor. Nakon toga spremi dokument kao nekoime.html gdje god ti želiš. Napomena: dokument mora imati nastavak .html inače neće raditi. Sada u mapi gdje je spremljena stranica, dva puta brzo klikni ili desni klik i odaberi otvori sa nekim web preglednikom. Kada to napraviš otvorit će ti se web preglednik i stranica će izgledati kao na slici ispod. Sada ćemo prvu promjenu na stranici, koja nije nešto pretjerano vidljiva, ali služi za bolje snalaželje u pretraživaču. U <head> tagu ispod <meta> taga stavi još i ovaj kod: <title>Moja prva web stranica</title> Sada <head> tag mora izgledati ovako: <head> ...

HTML - Tagovi i atributi

veljače 04, 2016

Pogledaj kod ispod ovog teksta. <!DOCTYPE html> <html lang="hr"> <head> <meta charset="utf-8"/> </head> <body> </body> </html> Sigurno se pitaš što je sada ovo. To je osnovni kod za HTML. To je dio koda koji ćeš morati imati u svakom dokumentu. Tagovi Sve što je u šiljastim zagradama je zapravo tag (<html>, <head>, <body>, <meta>, itd.) . Uzmimo na primjer html tag . On izgleda ovako: <html> Neki kod između... </html> Kada se radi novi tag mi ga radimo da nešto stavimo u njega. Zato <html> služi za otvaranje, a </html> za zatvaranje html taga. Zašto se onda meta tag ne zatvara? Meta tag se zapravo zatvara, ali na drukčiji način. Pošto ne stavljamo ništa unutar taga , bilo bi glupo da tag onda izgleda ovako: <meta charset="utf-8"></meta> Radi jednostavnosti se onda piše: <meta c...

Početak

veljače 04, 2016

Ovo je uvodni post gdje ću pokušati objasniti što je to HTML i zašto on služi te što je potrebo imati da bi ga se počelo kodirati. Kratko o HTML-u i CSS-u Znam da većina ljudi ne voli dugačke uvode pa ću napisati jasno i kratko. HTML je jezik (nije programski) koji služi za stvaranje sadržaja i strukturiranje njega. HTML se sam po sebi ne može stilirati, odnosno, ne može sam mjenjati boju pozadine, veličinu fonta i slično. Zato nam dolazi još jedan jezik (isto nije programski) koji zove CSS . CSS jednostavno pretvara ružan HTML dokument u lijepi HTML dokument, odnosno lijepu web stranicu. Alat potreban za početak (programi) Od alata ti nije potreno ništa što već nemaš na računalu! Ako imaš web preglednik (Firefox, Chrome, Opera, Safari, itd.) i imaš nekakav text editor (Notepad, Wordpad, Notepad++, Gedit ili nešto drugo što nije Word, Libre Office Writer ili nešto slično tome jer to nije text editor nego je text processor . Za početak preporučujem N...