Izrada web stranica | HTML

Nakon dužeg vremenskog perioda od dana kada je objavljena najava za serijal, vrijeme je za prvi tutorijal koji će vas uvesti u svijet HTMLa i CSSa. Prije nego što krenemo dalje, uputio bih riječi izvinjenja svima onima koji su htjeli da nastave učiti web programiranje na ovoj stranici, a nisu mogli zato što nisam mogao pronaći vremena zbog silnih obaveza koje su me snašle.

Morate znati da ne postoji ekspert u HTML-u i CSS-u. Na primjer odete na razgovor za posao (web dizajnera naravno, ne mislim na komunalije) i neko vam postavi pitanje: „Da li poznajete CSS i HTML?“ – taj scenario sigurno nećete doživjeti. HTML je jako jednostavan, a kada vam sa praksom u memoriju uđe nešto od CSS sintakse, onda ćete bez problema baratati sa izradom jednostavnih web stranica koje će vam na početku izgledati super, a kasnije ćete vidjeti da je to bezveze i da niste u fazonu.

Nakon što se ukratko upoznate sa osnovama, ja ću vam konkretno dati web lokacije pomoću kojih možete proširiti svoje znanje o programskom jeziku kojeg obrađujemo. Ne znam kakav mi je auditorij, ali oni koji se do sada nisu susretali sa programskim jezicima trebali bi znati da oni zaista imaju obilnu sintaksu i da ćete jednostavno morati koristiti Google da se podsjetite sl.

Lično poznajem dosta profesionalnih developera ispred kojih su stalno knjige. Ako ne znate da koristite Google i da tražite literaturu koja se tiče vaše oblasti, vjerujte, džaba vam svi tutorijali jer oni od vas nikada neće napraviti profesionalca.

I da … zašto ne znam kakav mi je auditorij?! Zato što su komentari na prošlom članku bili nevezani za njega, ali ono baš – totalno. Nadam se da će ovaj put komentari sadržavati vaša iskustva, probleme, primjedbe itd. a ne vaša neispravna tumačenja stihova/ajeta iz tamo neke svete knjige. Čast izuzecima kojima se ovim putem zahvaljujem. Mir vama! (ovo nema veze sa papom Franjom)

HTML

Koga interesuje historija HTMLa ili možda od čega je ovo akronim itd. neka ukuca samo „HTML history“ ili eventualno „kursevi engleskog“ ako se sa prethodnim upitom teško snalazi. U osnovi, HTML je kostur stranice koji sadrži sve podatke. Ono što radite sa CSSom jeste da samo te podatke oblikujete.

U HTMLu vi definišete da će na vašoj web stranici pisati BANANA, ali putem CSSa vi dajete toj riječi boju (žuta, crna, zelena; kakvu već jedete), a zatim povećate font itd. Razumjeli? Ako niste, evo još bolji i slikovitiji primjer od banane. Zamislite da je Darko ovaj blog napravio samo u HTMLu. Kako bi stranica izgledala?

TRENUTNO: http://i.imgur.com/DTkeFRv.png

BEZ STILOVA (samo HTML): http://i.imgur.com/wrIFduz.png

TAGOVI

Vrijeme je da se fokusiramo na kod i napravimo kostur za stranicu koju ćemo oblikovati putem CSSa u narednom tutorijalu.

Ono što čini osnovu HTML koda su tagovi, a u tagovima se piše određeni tekst. Kako uočiti tag? Jednostavno – on se sastoji od < i >. Banalni tag za boldiranje teksta je <b>, odnosno <b> i </b>. Svaki ovaj tag se sastoji od 3 dijela. Prvi dio taga je samo njegovo otvaranje npr. <b>, zatim drugi dio taga je tekst što je konkretno u našem slučaju tekst kojeg želimo boldirati, a zatim nakon što sve završimo napišemo </b> gdje ova kosa crta označava završetak taga. Kada ne bi nju stavili onda bi se taj tag prenio na cijeli ostatak koda.

KOD PRIKAZ UŽIVO
Želio bih ovo podebljati Želio bih ovo podebljati
Želio bih <b> ovo podebljati Želio bih ovo podebljati
Želio bih <b> ovo </b> podebljati Želio bih ovo podebljati
Imaju izuzeci, npr. <hr> tag koji služi da prikaže horizontalnu liniju. Ima logike? Gore imate tag koji se otvori, pa se potom zatvori jer u sebi obuhvata dio teksta na koji se odnosi. Da li vam je potrebno isto to i za linije? Ne! Linija je linija, dovoljno je napisati <hr> i pojavit ce se, nema potrebe za </hr> pa da u nju ide neki tekst. Isto važi za <br> tag koji će učiniti da se tekst prebaci u red ispod.

Kasnije ćemo spomenuti ove tagove + tagove kojima se mogu dodijeliti određena svojstva (atributi).

IZRADA PRVE WEB STRANICE

Vi možete napisati u vašem text editoru kod iz gore navedene tabele i on će funkcionisati kada ga spremite kao .html datoteku. Ali, ako ja želim da promijenim naziv stranice koji će se prikazivati u tabu browsera ili ako želim da uključim neku datoteku u sami index.html, eh tu već nastaje problem. Preciznije rečeno, mi moramo koristiti kod koji će browseru reći koji dio da prikaže korisniku, a koji dio da vrti ‘ispod haube’.

Kada otvorimo naš text editor (ko nema instaliran neka koristi http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic) prvo što ćemo uraditi jeste da napisati HTML tag na način da ga otvorimo i zatvorimo. Na ovaj način mi smo počeli našu stranicu, a ujedno je i završili sa </html> tagom.

Unutar <html> i </html> tagova idu sada svi drugi tagovi jer smo rekli da se HTML sastoji od tagova i teksta. Konkretno, stavićemo <head> i </head> unutar <html> i </html>.

Trebalo bi ovako izgledati:

Da li mora biti baš ovako napisano? Što se tiče sintakse – DA, ali što se tiče odvajanja u redove itd. – NE. Jednostavno vi možete čitav kod napisati u jednoj liniji:

Ali to nije pregledno, teško se snalazi u ovome kodu pa zato se koristi indentacija, odnosno uvlačenje redova tako da tvore logičku cjelinu. Dovoljno je da u editoru selektirate tekst i stisnete tipku TAB.

Da detaljno analiziramo prije nego što pređemo dalje: HTML je osnovni tag koji sadržava čitavu stranicu. Sa unošenjem <html> mi započinjemo stranicu, a sa </html> mi je završavamo. Jednostavno! Sada želimo da ubacimo <head> u kojem će biti informacije koje browser neće prikazivati korisniku, ali taj <head> je sastavni dio stranice, a rekli smo da čitava stranica mora ići u <html> tagove pa ga jednostavno ubacimo unutar <html>, odnosno otvorimo ga, a zatim zatvorimo.

I napokon, zadnji tag kojeg ćemo uključiti u osnovu naše web stranice je <body>. Pogodite čemu on služi! Samo ime govori da on čini tijelo stranice, odnosno sve tagove, a samim tim i slike, tekstove, forme, tabele itd. – sve to ide u body. Sve što se nađe između <body> i </body> će biti vidljivo korisniku, a sve ono unutar <head> i </head> će slati browseru informacije koje se neće rezultirati na <body> (osim u slučaju kada uključite .CSS koji će davati oblik podacima u bodyu, ali to se ponovo ne tiče samog mijenjanja sadržaja bodya nego njegovog oblikovanja).

Možete li već sada pretpostaviti gdje će se nalaziti <body> i </body>? Nalazit će se unutar HTML taga, ali van HEAD taga.

Ako ovo pokrenete – neće se ništa dešavati jer unutar ovih tagova koji se otvaraju i zatvaraju ne stoji ništa. Ove tagove nazivamo STRUKTURNIM TAGOVIMA. Unutar ovih strukturnih tagova će biti ostali tekustalni tagovi i sl.

Spomenuli smo gore naslov stranice u tabu browsera. Za to koristimo <title> i </title> (u daljnjem tekstu: title tag). S obzirom da se to ne prikazuje na našoj stranici odnosno u tom ‘bijelom prostoru’ onda ćemo title tag smjestiti unutar head taga. Kao što smo gore rekli, unutar taga ide neki tekst na koji će taj tag biti primijenjen pa ćemo u ovom slučaju unutar title taga napisati naziv naše stranice.

Unutar body taga napisat ćemo par rečenica koje želimo da prikažemo.

Sada je samo poenta stavljati što više tagova i na taj način prilagođavati strukturu web stranice.

S obzirom da već pretpostavljam da ste sve ovo lijepo usvojili, odmah ćemo nabacati par tagova i rasporediti ih na stranici bez objašnjavanja kako-zašto jer smo to već par puta objasnili. Sve tagove koje budem navodio odnosiće se na BODY, odnosno tijelo stranice.

<hX> Naslov/podnaslov </hX> gdje X označava broj od 1 do 6. Kod ovog taga, broj 1 označava najveću vrijednost, dok broj 6 označava najmanju.

<p> Paragraf </p> označava paragraf. Jednostavno, ako želite vaš tekst da podijelite u cjeline – koristite za svaki paragraf <p> i </p>. Za oni koji ne znaju šta je paragraf, ovo se može predstaviti kao tekst koji će za 2 linije biti odvojen od ostalog teksta.

Postavlja se sada pitanje, kako rasporediti tagove unutar tagova? Npr. Ako imate paragraf, a u paragrafu želite da boldirate tekst. Nekima je to jako jednostavno za shvatiti, a neki imaju problem. Upravo zbog toga trebaju se igrati kodom i stalno nešto novo pokušavati. U ovom našem slučaju, p tag će stvoriti paragraf, a bolidranje dijela paragrafa je ponovo unutar paragrafa, sto znaci da je paragraf prioritet nad <b>. Koristeći sve tagove koje smo do sada naučiči, napisaću kod neke jednostavne web stranice i s tim završiti ovaj tutorijal.

JOŠ NEKE SITNICE

Nekad se često početnici zapitaju: „Zašto koristim H1 tag ako mogu napisati normalno tekst kojeg ću povećati i boldirati u CSSu?“. Odgovor će sam doći kada krenete raditi veće web stranice koristeći samo HTML i CSS. Kada vaša stranica bude imala podstranice (npr. NASLOVNA, O NAMA – na to mislim) i kada na svakoj toj stranici bude bio naslov, a vi hoćete da promijenite naslov u crvenu boju – onda ćete shvatiti da ćete korištenjem h1 taga moći preko samo jedne linije odrediti da svi naslovi budu crveni, ali i da kasnije u 2 sekunde promijenite tu boju u neku drugu umjesto da idete mijenjati svaki dio koda posebno itd. Učite se od početka sve lijepo slagati u cjeline. Kada budemo obradili klase i Idove puno toga će biti jasnije i moći ćete ući u srž HTMLa.

KRAJ!

To je to! Nadam se da je tutorijal bio jasan, praktičan i zanimljiv. Volio bih da me sve što vas interesuje upitate u komentarima pa makar pitanje bilo „Kako si izvukao HTML sa Darkove stranice?“ itd. Sa vašim prijedlozima možete samo poboljšati kvalitet tutorijala.

16 komentara na tekst Izrada web stranica | HTML

  • Crna Kutija

    Ovo je u redu i odlično i razumljivo napisano kad su u pitanju početnici, ali molim te daj sledeći put nešto komplikovanije, naprimer PHP/CSS, povezivanje HTML-a sa bazom podataka za nas ostale 🙂
    Puno pozdrava tebi Aleme, Draži i raji u Bosni

    • Alem

      Napisao sam u tutorijalu da ne znam kakav mi je auditorij tako da sam se drzao one ideje koju sam izlozio u uvodnom tekstu na ovome blogu.

      Potrudicu se da napravim nesto u HTMLu, a sto ce se doticati MySQLa (jer jedino njega poznajem sto se tice SQLa) a ujedno i PHPa jer ce on biti ta kljucna spona. Vjerovatno ce biti neki pratkican tutorijal. Korisnik dolazi na vasu stranicu i pravi npr. narudzbu ili prijavljuje se na neki event itd.

      Hvala na lijepim rijecima i ocekuj ubrzo ovakav tutorijal. Nadam se da ima jos takvih kao ti, a ja vjerujem te da ce svi imati koristi od ovih tutorijala, kako i pocetnici tako i ovi malo napredniji. Svako dobro.

    • Crna Kutija

      U principu, nekako naterati ljude da počnu da krenu programirati neka svoja rešenja umesto postojeće trojke WordPress|Joomla|Drupal jer je odličan osećaj kad napraviš od nule nešto što je 100% tvoj kod pa imaš uvide u sve njegove exploite i tuninge.
      Još je jedna stvar bitna, kad su ovakvi tekstovi u pitanju, ne znam da li ste u toku ali ovi tekstovi se preporučuju u školama kao dodatno štivo za omladinu koja zaista zanima da nešto nauče jer pišete razumljivim jezikom tako da iako je recimo baš ovaj tekst poprilično za početnike, zlata vredan.

    • Darko Dražović

      Pozdrav Crna Kutijo 😀
      Ovo za škole jeste tačno a znam jer mi je baš jedan autor sa ovog bloga, Bojan Kezele, to preneo preko chata, doduše ne za školu nego za fakultet, prvenstveno vezano za tekstove vezane za Linux (ako on mene loži – ložim i ja vas).
      Super je da se tekstovi odavde koriste za edukaciju jer to i jeste poenta rada ovde i mene i Alema i Bojana i svih ostalih koji pišu na ovom blogu.

  • elementhttp

    Daj nesto kvalitetnije! Ovaj clanak je za one koje nikad nisu videli internet 😀
    npr: -GitHub,Fluidni dizajn, Paralaks efekat,SOAP REST,node.js, three.js,sass…

    • Alem

      Znam kako vi sa znanjem o ovim stvarima gledate na ove tutorijale, ali ne mozemo zanemariti pocetnike.

      U jednom od prethodnih komentara vec sam najavio jedan napredni tutorijal u vezi MySQLa (+ PHP, HTML), a GitHub, Sass i fluidni dizajn ce biti spomenuti cak i u ovim pocetnickim tutorijalima (pretpostavljam da znas zasto).

      Node.js je vrlo moguć u skorije vrijeme, mada bih više volio Flask ili Django jer Python se vec poceo uciti u skolama.

    • Darko Dražović

      Čitam šta vas dvoje pričate pa kontam koliko ja nemam pojma šta to uopšte zborite i na kom li je jeziku
      Neki Node.js neki Đangu neko ludilo 😀

  • Aspartam

    Lijepo je vidjeti ovakve tekstove, jako su korisni. Iako je poznavanje htmla iz dana u dan sve nebitnije predispozicija za izradu web stranica, to je u najmanju ruku moralno moranje. Web design preko WordPressa i slicnih alata jednostavno nema tu car ako se ne poznaje osnova a to je html.

  • Ispravitelj

    Proveri svoju rečenicu u delu IZRADAPRVE WEB STRANICE, ispod druge slike gde objašnjavaš o kodu u jednoj liniji i preglednosti:

    „Dovoljno je da u editoru selektirate tekst i stisnete tipku TAB.“

    Ako ovo uradiš OBRISAĆEŠ TEKST koji si selektovao!

    Pozdrav!

    • Alem

      U prvom tutorijalu sam napisao da ću kroz tutorijale koristiti Brackets te sam preporučio svima da ga instaliraju. Ako ga i sam instaliraš vidjećeš da će doći do indentacije nakon što selektiraš kod. Možemo u jednu ruku reći da se sve sitnice tog tipa odnose konkretno na Brackets jer jedino njemu dajem podršku kroz tekstove.

      Greška nije na globalnom nivou, ali svakako vrijedi napomene za one koji koriste Notepad ili editor koji briše selektirani kod nakon TABa. Zahvaljujem!

    • Ovo dosta zavisi od toga koji tekstualni editor izabereš.

      Možeš da edituješ u svakom, ali postoji nekoliko njih koji su specijalno dizajnirani za pisanje web stranica (između ostalog), tipa Atom, Sublime Text, Brackets, Notepad++…

      Dakle u onima specifičnim za ovo područje tekst se neće izbrisati, dok će se u onima koji ne uzimaju u obzir koji tekst edituješ (tipa Notepad), tekst izbrisati.

      Naravno, pošto postoji toliko njih specifičnih za HTML, suludo je preporučiti neki i reći da preko njega „moraš“ da edituješ tekst da bi pratio tutorijal i napravio web stranicu. Svaki od njih je dobar za sebe i stvar je odabira. Moj lični izbor je Atom (https://atom.io).

  • mihajlo

    Ovo je odlicno sto se clanka tice. Savjet onima koji pocinju da uce ovo nije jedini sajt sa tutorijalom nasao sam ih gomilu html je jednostavan css mnogo laksi od ocekivanog madjutim php tutorijal za pocetnike nisam nasao a da je bas za pocetnike.  Svi koji su pravili totorijal vec nekako ocekuju da od tog vec znate nesto i tu onda nastaju problemi kada neke stvari treba da uradite a ne razumijete ih. Uopseno ako ste krenuli s ovim nastavite do kraja od programa do svih mogucih savjeta do kraja pravljenja stranice jer tog na internetu na jednom mjestu nema a to svima manje vise treba. Jomla Wp sve ubacite i imacete na tim clanicima nemogucu citanost. Ja npr wp znam ko svoj dzep dok jomlu nekako ne smijem ni dirnut vec ocekujem da cu nesto razvaliti 😀

    • Darko Dražović

      Može, sad ću Alema da kloniram u jedno 50 primeraka kako bi okrpio sve web tehnologije 🙂

      Aleme izvrši ovo:
      for i in {1..50}
      do
      cp ALEM_TATAREVIC ALEM_TATAREVIC_${i}
      sh ./ALEM_TATAREVIC_${i}
      done

    • Alem

      Zamisao i jeste da se krene od najosnovnijeg te da se zavrsi na naprednom + neki YouTube klipovi sa savjetima i sl. ali za to treba vremena i vremena. Imam velike planove, ali problem je vrijeme i manjak dobrovoljaca kao ja da pisu. Trudicu se da svake sedmice bude neki tutorijal i nadam se da će ovo jednog dana postati mjesto gdje će ljudi dolaziti s namjerom da nauče HTML, CSS, PHP, Python, Javascript, Java, MySQL, WP itd.

      @Darko Moze neki kod da dobijem koji milion €? 😛

    • Darko Dražović

      Naravno, što ne reče odma’:

      while true
      do
      echo „€“ >> /mnt/novcanik.0
      done

    • Možda bih ti mogao pomoći oko ovoga. Palo mi je na pamet da napišem jedan članak koji bi se taman uklopio u ovu seriju prije nego što se krene dalje, koji bi obuhvatio osnove Git-a i (besplatno) hostovanje te web stranice korišćenjem GitHub-a.

      Ukoliko si zainteresovan, kontaktiraj me na aleksandar.todorovic@mail.ru da se ne dogovaramo preko komentara. 🙂

Komentarišite

Email neće biti javno objavljen. Sajt je neobavezan podatak, svi ostali su obavezni.