You are on page 1of 72

Tehnika kola Vranje

Podruje rada: elektrotehnika

WEB DIZAJN
Upotreba HTML i CSS tehnologija pri izradi Web stranica

Autori:
Sneana Bencun
Dejan Trajkovi
Vranje, septembar 2013.
Primena raunara u elektrotehnici, Web dizajn

Sadraj
Pojam Weba .................................................................................................................................................................. 3

Podela Web sadraja na statiki i dinamiki, klijentske i serverske tehnologije........................................................... 5

Web dizajn .................................................................................................................................................................... 7

Priprema za vebe ......................................................................................................................................................... 8

Uvod u HTML i CSS ........................................................................................................................................................ 9

Elementi i tagovi........................................................................................................................................................ 9

Osnovna struktura HTML dokumenta..................................................................................................................... 10

Osnovna upotreba i sintaksa CSS-a ......................................................................................................................... 12

Tekst i formatiranje teksta .......................................................................................................................................... 21

[HTML deo vebe] ................................................................................................................................................... 21

[CSS deo vebe] ....................................................................................................................................................... 23

Upotreba linkova, slika i multimedijalnog sadraja .................................................................................................... 26

[HTML deo vebe] ................................................................................................................................................... 26

[CSS deo vebe] ....................................................................................................................................................... 29

Upotreba listi .............................................................................................................................................................. 32

[HTML deo vebe] ................................................................................................................................................... 32

[CSS deo vebe] ....................................................................................................................................................... 33

Upotreba tabela .......................................................................................................................................................... 36

[HTML deo vebe] ................................................................................................................................................... 36

[CSS deo vebe] ....................................................................................................................................................... 39

Dopunska veba, fajlovi "Vezba06_Dopunska.html" i "stil06_dopunski.css" ......................................................... 42

HTML forme ................................................................................................................................................................ 47

[HTML deo vebe] ................................................................................................................................................... 47

[CSS deo vebe] ....................................................................................................................................................... 54

Frejmovi u HTML-u...................................................................................................................................................... 58

1
Primena raunara u elektrotehnici, Web dizajn

[HTML deo vebe] ................................................................................................................................................... 58

[CSS deo vebe] ....................................................................................................................................................... 59

Upotreba WYSIWYG alata za izradu Web sajtova....................................................................................................... 61

Sistemi za upravljanje sadrajem - CMS...................................................................................................................... 62

Instalacija WordPressa ............................................................................................................................................ 62

Koriena literatura ..................................................................................................................................................... 71

2
Primena raunara u elektrotehnici, Web dizajn

Pojam Weba
World Wide Web ili skraeno samo Web predstavlja jedan deo globalne mree raunara poznatije kao
Internet. Njega ini veliki broj raunara i ureaja koji su meusobno povezani i koriste standardizovane naine za
komunikaciju i predstavljanje komunikacija. Internet je medij koji raste iz dana u dan, ima sve vei broj korisnika,
postaje sve obimniji i sveobuhvatniji, nudi ogroman broj usluga svojim korisnicima i nad internetom niko nema
potpunu kontrolu niti je u neijem vlasnitvu. Delovi interneta kao to su oprema koja je u vlasnitvu Internet
provajdera ili serveri preduzea i pojedinaca kao i linije za prenos podataka predstavljaju privatno vlasnitvo lica i
firmi koja ih koriste ali je Internet kao medij potpuno otvoren i dostupan svima. Povezivanje na Internet se vri tako
to Internet provajderi pruaju usluge povezivanja svojim klijentima u koje spadaju kako i kuni korisnici tako i velike
firme. Svaki ureaj koji je direktno povezan sa Internetom ima svoju jedinstvenu IP adresu. Trenutno su u upotrebi
IPv4 adrese (primer: 93.253.145.44 ili lokalne 192.168.1.1) ali je Internet toliko narastao da je taj opseg adresa
postao nedovoljan i uskoro e biti zamenjen IPv6 opsegom adresa koji omoguava daleko vei broj jedinstvenih
ureaja na Internetu. Na Internetu je, kako je on rastao, rastao i broj servisa koji su bili na raspolaganju korisnicima:
e-pota, WWW (World Wide Web), diskusione grupe, FTP, radio i TV prenos, onlajn kupovina i prodaja, oglaavanje,
e-poslovanje itd.

WWW je servis koji omoguava pretraivanje interneta korienjem grafikog korisnikog interfejsa. WWW
ili W3 je najvei informacioni servis na internetu koji omoguava stvaranje, manipulaciju, organizaciju i pretraivanje
multimedijalnih dokumenata. WWW je internet servis koji se najbre razvija. Pomou njega mogu da se pregledaju
tekst, slike, video sekvence, audio zapisi ili pronau informacije iz razliitih podruja. Slui za publikaciju, reklamu,
prodaju i distribuciju proizvoda, uenju na daljinu itd.

Pregledanje Weba se zasniva na uitavanju i pregledanju Web stranica kao i kretanju sa jedne na drugu Web
stranu. Web stranama i lokacijama se pristupa ukucavanjem adresa (URL - Uniform Resource Locator) u adresno
polje nekog od Internet pregledaa. U pregledae spadaju Internet Explorer, Mozilla Firefox, Google Chrome, Opera i
slini. Transfer Web strana i Web sadraja se vri pomou HTTP odnosno HyperText Transfer Protocol protokola. On
predstavlja prefiks adresa svih Web strana (na primer: http://www.google.com/). Pored pomenutog prefiksa adresa
se jo sastoji i od prefiksa www (oznaka za World Wide Web) koji uglavnom nije obavezan, i od imena domena na
kome se strana nalazi. Domen ne predstavlja nita drugo do simboliko ime servera na kome se Web strana nalazi.
Korienje ovih simbolikih adresa umesto runog ukucavanja IP adresa raunara na kojima se nalaze Web strane
omoguavaju DNS serveri o kojima emo kasnije priati. Nakon navigacije na neku Web lokaciju uglavnom se uitava
poetna strana koja korisniku omoguava laku dalju navigaciju kroz Web strane na lokaciji na kojoj se nalazi. Kretanje
kroz Web strane se vri hipervezama (linkovima) koje se nalaze na njima. Web strane su napisane u HTML-u
(HyperText Markup Language) koji predstavlja opisni jezik za kreiranje strukture i sadraja Web stranica.

Kako Internet predstavlja ogroman izvor informacija postoje Web lokacije koje su namenjene pretraivanju
Interneta. To su Web sajtovi kao to su Google, Yahoo i slini. Ti sajtovi imaju posebne servere na kojima se pokreu
automatizovani programi (botovi) koji krstare Internetom i indeksiraju sadraj u svojim bazama podataka kako bi
omoguili svojim korisnicima brzu i efikasnu pretragu Interneta sa jedne lokacije. Bitno je razlikovati pretraivae od
gore pomenutih pregledaa.
Pored ovih pretraivaa veina Web lokacija sadri integrisanu lokalnu pretragu koja omoguava da pretraite
informacije na sajtu na kome se trenutno nalazite.

3
Primena raunara u elektrotehnici, Web dizajn

Web stranice pored klasinih tekstualnih informacija od kojih je sve krenulo danas mogu da sadre i slike,
audio-vizuelne zapise, interaktivni sadraj pa ak i kompletne softverske alate i programe.

4
Primena raunara u elektrotehnici, Web dizajn

Podela Web sadraja na statiki i dinamiki, klijentske i


serverske tehnologije
Na modernom Webu se za kreiranje strana (sadraja i vizuelnog prikaza strane) koriste HTML i CSS
(Cascading Style Sheets). HTML sadri strukturu i sadraj koji se prikazuje a CSS slui da rasporedi i ulepa elemente
te strane.

Statike strane se sastoje iskljuivo od HTML-a ili HTML+CSS kombinacije. Sadraj ovakvih strana je potpuno
statian, sadraj ostaje isti sve dok dizajner strane ne unese novi ili izmeni postojei sadraj i izgled strane, nema
interaktivnog sadraja i uglavnom pruaju gole informacije i omoguavaju osnovni nivo interakcije korisnika sa Web
lokacijom i kreiranje nekih osnovnih servisa koje Web prua i to na veoma niskom nivou. Statike strane danas
takorei nisu u upotrebi i jako je teko pronai potpuno statine Web sajtove. Uglavnom ih izrauju amateri dizajneri
koji su u ranoj fazi prouavanja Web dizajna. Line prezentacije su esto statine ali i one danas uglavnom sadre
dobru dozu dinamikog sadraja.

Dinamike strane predstavljaju ono to danas ini Web sve popularnijim i monijim. Ovakve strane
omoguavaju kreiranje ogromnih i obimnih Web sajtova sa visokim nivoom interaktivnosti u realnom vremenu kao
to su drutvene mree (npr. Facebook), onlajn enciklopedije (Wikipedia), multimedijalni sajtovi kao to je YouTube,
moderni sajtovi iji se sadraj konstantno osveava i dopunjuje, webmail servisi kao to su Gmail, Yahoo mail i Live,
onlajn igre koje se pokreu direktno u pregledau, bezbedna trgovina, etovi, prenosi manifestacija u realnom
vremenu itd. Dinamiki Web pokree i podrava ogroman broj klijentskih i serverskih tehnologija koje omoguavaju
usklaen, stabilan i efikasan rad modernih Web sajtova i servisa.

Sa klijentske strane HTML i CSS se dopunjuju skripting jezicima koji omoguavaju dinamiku izmenu sadraja i
izgleda Web strane kao i pristup informacijama dostupnim na strani. Skripting jezik koji se koristi u ove svrhe jeste
opteprihvaeni JavaScript koji programerima omoguava visok nivo fleksibilnosti i pisanje kompleksnih programa i
aplikacija koje se izvravaju direktno u pregledau. Pored skriptinga mogunosti sa klijentske strane takoe proiruju
i tehnologije koje dopunjuju mogunosti pregledaa u vidu dodataka (plug-inova) za iste. Tako je mogue unutar bilo
kog od modernih browsera pokrenuti Java plug-in koji omoguava pokretanje programa napisanih u Javi ili
pokretanje Flash Playera koji omoguava interakciju sa sadrajem kreiranim u Flashu (igre, video -audio fajlovi,
aplikacije i slino). Moderni pregledai su dostigli visok nivo razvijenosti pa tako danas veina njih sama po sebi
omoguava reprodukciju audio i video fajlova, visok nivo performansi radi igranja igara i kreiranja kompleksnih
aplikacija koje se pokreu direktno u pregledau i sve u cilju oslobaanja Weba od potrebe za pomenutim plug-
inovima tako da svi klijenti mogu da bez problema koriste dostupne usluge na bilo kom ureaju i bilo kom
pregledau. Web po tom pitanju tei fleksibilnosti i univerzalnosti tako da svi servisi budu dostupni svim klijentima
bilo da je u pitanju jak desktop raunar ili smartfon.

to se serverske strane tie pria je malo drugaija. Serveri su raunari koji su posveeni hostovanju Web
sajtova, uvanju baza podataka, fajlova, itd. Pored uloge jednostavnog smetanja podataka oni takoe mogu
upravljati njima i predstavljaju posrednika izmeu zahteva klijenata i sirovih informacija koje se nalaze na njima. Oni
opsluuju jako veliki broj korisnika i omoguavaju brzo i efikasno deljenje resursa na mrei. Mogu imati razliite uloge
pa se tako neki serveri koriste iskljuivo za hosting statinog sadraja, neki samo za baze podataka, neki za e-mail,
dok neki mogu pruati i vie usluga istovremeno.
Na ovim serverima se pokreu programi koji vre svu interakciju izmeu klijenata i podataka na serveru i obrauju

5
Primena raunara u elektrotehnici, Web dizajn

podatke i zahteve za podacima. Najpoznatije serverske tehnologije koje su danas u upotrebi jesu PHP, MySQL, ASP,
ASP.NET, JSP itd. Ove tehnologije zapravo predstavljaju softverske alate koji se nalaze na serveru i prihvataju i
obrauju zahteve svojih klijenata i alju obraene informacije na uvid. Tako se PHP koristi za praktino sve mogue
svrhe od prostog dinamikog kreiranja HTML strane koja se dostavlja pregledau do kompleksnih interakcija sa
bazama podataka. MySQL predstavlja najpoznatiji sistem za menadment baza podataka koji esto radi u sprezi sa
PHP-om ili slinim skripting jezikom na serveru. Mo dinamikog Weba lei u mogunostima upravo ovih serverskih
tehnologija koje omoguavaju brzu i efikasnu manipulaciju velikim brojem podataka i efikasno opsluivanje zahteva
klijenata. One omoguavaju izradu i funkcionisanje apsolutno svih dinamikih sajtova danas, od jednostavnih foruma
i etova do velikih Web aplikacija i servisa za vesti.

Kako bismo mogli da objasnimo razliku izmeu statikog i dinamikog Weba na primeru?
Recimo da postoji sajt sa vestima. Kod statikog Weba postojale bi samo HTML i CSS datoteke koje bi server svaki put
dostavljao klijentu i iji bi sadraj bio isti sve dok Web dizajner runo ne izmeni sadraj HTML datoteka kako bi
klijentima dostavio najnovije vesti. Pored neophondne strunosti da tako neto uradi ovaj proces je i dugotrajan i
zahtevan, podloan grekama, problemima itd.
Dinamiki Web omoguava da ovakav sajt sadri uproen grafiki interfejs koji omoguava novinarima da se
jednostavno prijave na sajt sa svojim nalogom i kroz forme na HTML stranicama i jednostavne grafike obrasce unose
vesti i sadraj na svoj sajt bez ikakvog znanja o svim ovim tehnologijama. Server prihvata podatke, podatke obrauje
PHP i smeta ih u bazu podataka pomou MySQL-a. Kada klijent zahteva uitavanje strane sa najnovijim vestima isti
taj PHP vadi vesti iz baze podataka, kreira HTML stranu, dodaje sadraj, prilagoava je i takvu dostavlja klijentu. Na
ovaj nain je sajt unapred isprogramiran da bude samoodriv, maksimalno automatizovan i dostupan obinim
korisnicima. Naravno, sve je to potrebno unapred programirati u PHP-u, HTML-u, CSS-u i JavaScriptu i upravo zato
danas Web sajtovi predstavljaju kompleksne celine na ijoj izradi rade Web dizajneri i Web developeri. Dizajneri se
uglavnom bave samo HTML-om i CSS-om dok Web developeri piu klijentske i serverske skripte u JavaScriptu i PHP-u
koji u zavisnosti od kompleksnosti mogu varirati od malih i brzih skripti koje jednostavno itaju i piu podatke do
velikih programa koji vre obimne i dugake proraune.

6
Primena raunara u elektrotehnici, Web dizajn

Web dizajn
Web dizajn obuhvata sve radnje od trenutka kada dobijemo ideju da napravimo sajt pa do trenutka kad je
sajt potpuno zavren. Web dizajn obuhvata sledee: osmiljavanje sadraja sajta, odabir naziva sajta, registracija
domena i zakupljivanje hosta, grafiki web dizajn, programiranje sajta, optimizacija sajta za pretraivae, putanje
Web sajta u rad.

Sadraj sajta je najbitniji element web sajta koji mora biti jedinstven, zanimljiv i esto auriran aktuelnim i
sveim informacijama. U zavisnosti od sadraja sajta, mi definiemo kojoj grupi sajtova e on pripadati, a na osnovu
grupe odreujemo nain dizajniranja sajta. Ime sajta je veoma vana stavka u web dizajnu (ime koje se lako pamti i
esto koristi u svakodnevnom govoru i ima veze sa temom sajta). Svaki sajt mora imati jedinstven domen sa
ekstenzijom (com, net, org, sr itd.). U vezi imena sajta otvara se pitanje autorskih prava i zatita licenci. Postoje
pravila u pogledu registracije domena kada se radi o imenu nekog pravnog lica ili licenciranog brenda. Na kraju, kada
se zakupi domen, zakupljuje se i hosting. Prilikom grafikog dizajna, potrebno je izgled stranice pogledati u razliitim
okruenjima, i to u skoro svim internet pregledaima i u svim njihovim aktuelnim verzijama, u svim rezolucijama
ekrana, i isprobati na svim brzinama interneta. Kada se zavri sajt u smislu programiranja, grafikog dizajna, zakupa
domena i hosta, preostaje jo da se fajlovi sajta prebace na host server kako bi sajt bio vidljiv na internetu. To
prebacivanje fajlova sa kunog raunara na host obavlja se FTP konekcijom. FTP je protokol za prenos podataka
izmeu dva raunara na mrei. Nakon aploadovanja fajlova na hosting server esto je neophodno podesiti neke
dodatne stavke kao to su pristup bazi podataka, kreiranja baza podataka, podeavanje serverskog softvera a nekada
i instalacija i auriranje softvera na serveru ukoliko nam je tako neto dostupno. Takoe se esto vri i podeavanje
mail servera ukoliko ga na sajt koristi.

U toku izrade, odravanja i korienja Web sajta potrebno je potovati autorska prava. To znai da na naem
sajtu ne smemo upotrebljavati niti kaiti bilo kakav autorskim pravima zatieni sadraj bez prethodne dozvole
autora. To podrazumeva slike, audio i video fajlove, softver, delove HTML i CSS dokumenata, skripte na sajtu i tako
dalje. Sav sadraj na Internetu podlee autorskim pravima i to to ga na Internetu moete pronai ne znai da je
preuzimanje i upotreba takvog sadraja legalna. Trudite se da pri izradi sajta koristite besplatne fontove, grafiku i
slino i obratite panju na to kakva je upotreba dozvoljena licencom koja ide uz takav sadraj. Ukoliko vam je
upotreba nekog kopirajtovanog sadraja neophodna onda moete kontaktirati autore i zatraiti dozvolu za upotrebu
tog sadraja.

7
Primena raunara u elektrotehnici, Web dizajn

Priprema za vebe
Pre poetka vebe neophodno je imati instaliran program Notepad++ i neki od internet pregledaa. Kreirati jedan
folder na desktopu pod imenom "Web dizajn" u kome e se nalaziti svi fajlovi i sav sadraj i materijal koji ete
koristiti u toku ove vebe.
Sada pokrenite Notepad++, idite u Settings meni, Preferences, New document/Default directory kartica i sa leve
strane za Encoding odaberite UTF-8 da bi vam bila dostupna latinina i irilina slova (ali UTF-8, nikako UTF-8 without
BOM).

8
Primena raunara u elektrotehnici, Web dizajn

Uvod u HTML i CSS


HTML i CSS predstavljaju tehnologije koje se koriste pri dizajniranju web stranica.

HTML je skraenica za Hypertext Markup Language i koristi se za struktuiranje web strane, odnosno predstavlja
strukturni opis elemenata koji sainjavaju stranu kao i sam sadraj tih elemenata.
CSS (Cascading Style Sheets) se koristi za vizuelno stilizovanje HTML strana. Na primer, koristi se za poizicioniranje
elemenata, bojenje, formatiranje teksta, pozadine, ivica, izgleda tabela, slika itd. CSS kod se moe nalaziti unutar
samog HTML dokumenta ili u posebnom fajlu. Najee se CSS pie u odvojenom fajlu pa se na nain koji emo
kasnije objasniti povezuje sa HTML dokumentom da bi stilovi koji se nalaze u njemu bili primenjivi.

Elementi i tagovi
HTML dokument sadri obavezne elemente koji ine kostur strane. Elementi strane su opisani takozvanim tagovima
koji se nalaze unutar znakova za vee i manje. Postoje tagovi koje je potrebno otvoriti i zatvoriti a neki su
samozatvarajui. Primer taga koji se zatvara i nain na koji se to radi:

U datom primeru dat je tag koji oznaava element pasusa (eng. paragraph) a koji emo kasnije obraditi.
Primer samozatvarajueg taga je <br> (ili <br/>) koji slui kao line break odnosno koristi se za prelazak u novi red.
Samozatvarajue tagove je u HTML-u nepotrebno zatvarati pa su tako dozvoljeni i <br> i <br/> tag.

Elementi unutar svojih tagova takoe mogu sadrati i neke atribute od kojih su neki obavezni a neki opcioni. Atributi
blie opisuju elemente i mogu i da utiu na izgled i ponaanje elemenata. Primer atributa koji slui da dodeli
identifikator elementu pasusa je na slici (o identifikatorima emo kasnije):

Svi atributi imaju naziv i sadraj koji se nalazi u navodnicima. U konkretnom sluaju atribut ima naziv id a njegov
sadraj je prviPasus. Atributi se nalaze samo u poetnim oznakama elemenata.

Nain upotrebe tagova e postati mnogo jasniji kroz primere i vebe koji slede.

9
Primena raunara u elektrotehnici, Web dizajn

Osnovna struktura HTML dokumenta


Osnovna struktura jednog HTML dokumenta je data na slici ispod:

Otvorite Notepad i prekucajte kod sa slike a zatim sauvajte taj fajl u folderu "Web dizajn" pod imenom
"Vezba01.html". Notepad++ bi trebalo da detektuje da je u pitanju fajl pisan u jeziku HTML i shodno tome vizuleno
prilagodi i oboji tekst kao na slici iznad. Ukoliko se to ne desi, potrebno da je odaberete HTML jezik kao
podrazumevani jezik za ovaj dokument. To se radi kroz meni Language, H, HTML:

Ovo e omoguiti lake itanje dokumenta, detektovanje greaka i slino jer e Notepad++ sam obeleavati
elemente, atribute i njihove vrednosti odgovarajuim bojama. Mogunosti kao to je ova ga izdvajaju od prostih
tekst editora kao to je Windowsov Notepad.

Nakon to ste prekucali i sauvali dokument otvorite ga u nekom Web pregledau kao to je Internet Explorer,
Mozilla Firefox ili Google Chrome. Web strana e biti potpuno prazna jer je <body> element prazan ali e naslov biti
vidljiv u naslovnoj liniji pregledaa ili taba u kome je strana otvorena jer je prisutan element <title>.

U prvoj liniji dokumenta nalazi se definicija tipa dokumenta (Document Type Declaration DTD). DTD saoptava
pretraivau da oekuje HTML dokument.

10
Primena raunara u elektrotehnici, Web dizajn

Nakon DTD-a sledi html element. Svi ostali elementi HTML dokumenta nalaze se izmeu poetne <html> i krajnje
</html> oznake HTML elementa.

U sekciji (ili odeljku) zaglavlje strane, ija je poetna oznaka <head> a krajnja </head>, nalaze se informacije o Web
strani kao to su naslov strane koji se prikazuje u naslovnoj liniji Web pretraivaa ili na kartici Web pretraivaa.
Naslov se definie izmeu poetne oznake <title> i krajnje oznake </title>. Ostali podaci koji se nalaze u odeljku
zaglavlje strane, ne vide se u Web pretraivau.

U zaglavlju strane nalaze se i metapodaci (podaci o podacima). Za definisanje metapodataka koristi se meta oznaka
<meta>. Meta oznaka description daje detaljniji opis Web strane. Kada maine za indeksiranje (Google, Yahoo) vre
indeksiranje, one najpre potrauju rei za indeksiranje koje se nalaze u meta oznaci keywords (kljune rei). Zato, za
vrednost atributa content treba uzeti kljune rei koje su relevantne za ono to se nalazi na Web strani. Kljune rei
je poeljno razdvojiti zarezom. Indeksiranje je proces ubacivanja strana u bazu (indeks) maine za indeksiranje. Trea
<meta> oznaka upotrebljena je da bi se preko njenog atributa charset, ija je vrednost utf-8, definisala upotreba
Unicode standarda za snimanje i prikazivanje dokumenta u Web pretraivaima. Unicode standard omoguava
prikazivanje znakova svih svetskih pisama, ukljuujui i znakove naeg irilinog i latininog pisma.

U odeljku telo, ija je poetna oznaka <body> a krajnja </body>, nalazi se sadraj Web strane koji se prikazuje u Web
pretraivau.

Pored ovih obaveznih elemenata unutar body elementa se za struktuiranje koriste i neki od sledeih elemenata:

<section>...</section> izrauje odeljak u HTML dokumentu

deli sekciju ili deo strane na odeljke ili stavke, na primer moe da odvaja poruke na
<article>...</article>
forumu ili blogu

<nav>...</nav> omoguava kreiranje navigacije na sajtu

omoguava kreiranje zaglavlja na strani ili unutar elemenata kao to su section ili
<header>...</header>
article
omoguava kreiranje podnoja na strani ili unutar elemenata kao to su section ili
<footer>...</footer>
article
predstavlja generiki strukturni element koji moe da podeli stranu ili bilo koji drugi
<div>...</div>
element na delove ili sekcije
<h1>...</h1>
predstavljaju elemente koji se koriste za naslove i podnaslove; najvei je h1 a
<h2>...</h2>
najmanji h6, hijerarhijski, i ovu hijerarhiju treba potovati i prilikom stilizovanja
...
strane
<h6>...</h6>

<p>...</p> predstavlja obian tekstualni pasus

element koji se koristi za umetanje slike na putanji odreenoj atributom src; kao
<img src="putanja"/>
to se i vidi ovaj tag je samozatvarajui
anchor iliti sidro (hiperveza, link), koristi se za povezivanje Web strane sa nekom
<a href="URL">Tekst</a> drugom stranom, fajlom ili dokumentom ili sadrajem na istoj ili drugoj strani a koji
se nalazi na lokaciji definisanoj atributom href

11
Primena raunara u elektrotehnici, Web dizajn

<b>...</b>
<i>...</i>
mnogobrojni elementi koji se koriste prilikom formatiranja teksta, bie detaljno
<strong>...</strong>
objanjeni kasnije
<sub>...</sub>
...

Jako je bitno razumeti dva generika atributa koja se jako puno koriste pri stilizovanju Web strana ali i prilikom
pisanja skripti u jezicima kao to su JavaScript i slini. U naem sluaju je potrebno razumeti ih radi stilizovanja jer se
pisanjem skripti neemo baviti. Ovi atributi su id i class. Njih moe posedovati bilo koji element.

Atribut id predstavlja jedinstveni identifikator nekog elementa na strani. Slui za jednostavnu selekciju tog elementa
radi stilizovanja prilikom pisanja CSS-a. Samim tim to je jedinstven podrazumeva se da nijedan drugi element ne
sme imati atribut id koji ima istu vrednost.
Sa atributom class je situacija suprotna. Takoe se koristi za selekciju elemenata radi stilizovanja ali ne predstavlja
jedinstveni indentifikator ve klasu odnosno grupu elemenata na koje je primenjen odreeni stil. To nam omoguava
da primenimo istovetni CSS stil na vie elemenata odjednom. Kasnije ete na primerima videti kako se ova dva
atributa koriste i kada je koji efikasnije primeniti.

Primer: imamo tri bicikla razliitih boja: plavi, crveni i zeleni. Njihov id bi redom bio "plavi", "crveni" i "zeleni" a klasa
bi bila "bicikl". Reju "bicikl" koja predstavlja klasu se obraamo svim biciklima dok se korienjem boja kao
jedinstvenih identifikatora obraamo samo jednom biciklu. Kada budemo koristili CSS bie vam jasnije kada se
koriste klase a kada identifikatori.

Osnovna upotreba i sintaksa CSS-a


Za ovaj zadatak e nam biti potreban novi HTML dokument u koji emo unositi sadraj a potom ga i stilizovati.
Napravite kopiju fajla "Vezba01.html" i nazovite ga "Vezba02.html". Ovo smo uradili da ne bismo ponovo prekucavali
kostur strane. Sada otvorite fajl "Vezba02.html" u Notepadu++ kako bismo krenuli sa dodavanjem sadraja u
dokument.

O sintaksi CSS-a je jako teko diskutovati bez primene iste i zato emo u ovoj vebi pre svega izraditi jednostavnu
HTML stranu sa dva novinska lanka i potom stilizovati ta dva lanka korienjem CSS-a.
Novinski lanci e sadrati naslov, pasus teksta i jednu fotografiju. HTML kod neemo detaljno objanjavati kao ni CSS
stilove, kasnije emo se baviti time, cilj je da samo uoite strukturu i sintaksu oba jezika kao i nain njihove upotrebe.

12
Primena raunara u elektrotehnici, Web dizajn

Struktura tela bez vidljivog sadraja e izgledati ovako:

Prekucajte strukturu elementa sa slike iznad u otvoreni dokument "Vezba02.html".

Body dokumenta nakon umetanja sadraja izgleda ovako:

Sadraj za oba lanka moete kopirati odavde (naslov za element h1 i pasus za element p)

Misli globalno, sadi lokalno


Akciji ozelenjavanja zelenih povrina koje organizuje samorganizovana grupa "gerila batovana" prikljuili su se i
zaposleni u Infostudu koji su posadili 215 sadnica cvea na 7 lokacijia u Subotici i na taj nain dodatno ulepali i
uredili svoj grad.

Stie i novi Nexus 10 tablet


Google e opet ove godine imati pun mobilni portfolio jer nam poznati nalog @evleaks poruuje da je novi Nexus 10
tablet izraen od strane Asusa, blizu objave. Ovim e Google uz Nexus 7 tablet i Nexus 5 smartfon, upotpuniti itavu
paletu novih proizvoda za 2013.

Slike koje koriste elementi img u oba lanka nalaze se u folderu "Materijal" na desktopu i potrebno ih je kopirati u
folder "Web dizajn" u kome se nalazi i dokument "Vezba02.html" da bi pregleda mogao da ih pronae i uita.

13
Primena raunara u elektrotehnici, Web dizajn

Nakon to ste umetnuli sav sadraj sauvajte dokument i otvorite ga u pregledau, trebalo bi da izgleda ovako:

Dokument koji trenutno imamo je pravilno struktuiran, sadraj je ubaen ali kao to vidite sav sadraj se rea jedan
ispod drugog, tekst nije formatiran, slike su prevelike itd. Dakle, sada nam sledi stilizovanje, ovde emo videti kako
se biraju elementi koje elimo da stilizujemo i kako se pravilno primenjuju stilovi nad njima. Neemo zalaziti u
detaljna objanjenja jer je poenta ove vebe samo objasniti sintaksu i nain upotrebe CSS-a a ne njegove mogunosti,
o njima emo kasnije.

U Notepadu++ kreirajte novi fajl i sauvajte pod nazivom "stil02.css". U ovom fajlu e se nalaziti stilovi kojima emo
stilizovati elemente dokumenta "Vezba02.html".

CSS stilove je mogue pisati na tri naina:

unutar poetnog taga elementa kao vrednost atributa style (inline stilovi-redni)
unutar elementa head dokumenta (interni stilovi)
u posebnom fajlu koji se vezuje za neki HTML dokument (eksterni stilovi) - trenutno koristimo ovaj nain
pisanja stilova jer je najei i najlaki za upotrebu i odravanje

Redosled stilova u CSS dokumentu je proizvoljan.

14
Primena raunara u elektrotehnici, Web dizajn

Poto koristimo eksterni stil potrebno je dodati jednu liniju koda u head dokumenta koja e povezati na dokument
sa dokumentom koji sadri CSS stilove za tu stranu. Ta linija koda izgleda izgleda ovako:

Element link slui da vezuje druge dokumente kao to su CSS stilovi ili neke skripte sa HTML dokumentom. Atribut rel
elementa link slui da odredi tip veze (u konkretnom sluaju mi pregledau govorimo da je u pitanju CSS dokument
sa stilovima) a atribut href odreuje putanju do dokumenta koji vezujemo sa HTML dokumentom (u konkretnom
sluaju u pitanju je "stil02.css").

Dodati liniju koda sa slike u HTML dokument "Vezba02.html" da biste ga povezali sa prethodno kreiranim
dokumentom "stil02.css" i sauvati fajl.

Kada stilizujemo elemente strane prvo odabiramo element ili vie elemenata na koje primenjujemo neki stil a zatim
piemo stil. Recimo da imamo element h1 kojem bismo eleli da poveamo veliinu slova na 40 i promenimo boju
teksta u zelenu. CSS stil za ovakvu radnju bi izgledao ovako:

Kucanjem h1 smo selektovali element na koji e se primeniti stil, nakon toga otvaramo vitiaste zagrade. Unutar njih
se pie stil i to reanjem razliitih osobina koje elimo da promenimo. Sintaksa je ovakva:

Mi smo podesili dve osobine naslova h1: veliinu fonta na 40 piksela i boju slova na zelenu.

Poto smo objasnili nain na koji se pristupa elementima na strani radi stilizovanja, prei emo na stilizovanje HTML
strane koju imamo. Sada emo upotrebiti klase i identifikatore koje smo uneli u HTML kod da bismo odabrali
elemente koje elimo da stilizujemo.
Dakle, oba elementa article u dokumentu pripadaju klasi proizvoljno imenovanoj clanak. Kada budemo pristupili
stilizovanju klase clanak to e znaiti da se ovaj stil primenjuje i na prvi i na drugi lanak jer oba pripadaju istoj klasi.
Meutim, u naem sluaju pristupanjem klasi clanak mi ne pristupamo nijednom elementu koji moemo stilizovati
ve elementu article unutar koga su elementi h1, p i img (imajte na umu da se ovo opet odnosi na oba lanka!) koji
nas interesuju i koje elimo da stilizujemo. Njima ne pristupamo (odnosno ne selektujemo ih) direktno kao to smo

15
Primena raunara u elektrotehnici, Web dizajn

to inili u prethodnom primeru ve na sledei nain:

Sva tri stila su trenutno prazna.

Prekucajte sva tri stila u "stil02.css".

Dakle, klasu elemenata selektujemo kucanjem take a zatim naziva klase. Ukoliko pristupamo elementu koji se nalazi
unutar elementa te klase, odnosno na hijerarhijski i strukturno niem nivou u HTML dokumentu (u naem sluaju su
sva tri elementa unutar article elemenata koji su klase clanak), onda ih jednostavno navodimo jedan za drugim.
Primer: ukoliko imamo element article unutar koga se nalazi header a unutar koga su elementi p, h1 i h2 za selekciju
elementa p kucamo jednostavno:
article header p{....}
...dakle potreban je razmak izmeu svakog elementa.
Ukoliko elimo da selektujemo h1 i h2 istovremeno radi primenjivanja istovetnog stila na njih, onda izmeu njih
stavljamo zarez:
article header h1, article header h2 {....}.

Sada emo podesiti irinu oba lanka na 600 piksela. Svaki pasus e zauzimati 70% irine lanka dok e svaka slika
zauzimati preostalih 30% irine lanka i nalazie se desno od pasusa. Nakon izmena, kod izgleda ovako (dok
formatiranje h1 naslova jo neemo dirati):

16
Primena raunara u elektrotehnici, Web dizajn

Prekucajte stilove sa slike u CSS dokument. Nakon toga sauvajte i HTML i CSS dokument i otvorite HTML dokument
u pregledau da vidite efekte primenjenog stila.

Sada emo selektovati pojedinano naslove h1 u oba lanka da bismo objasnili kako funkcioniu identifikatori. Prvi
lanak ima identifikator prvi a drugi lanak ima identifikator drugi. Prvi naslov emo obojiti u zeleno a drugi u plavo.
Selekcija identifikatora se vri znakom "#". Takoe emo iskoristiti to to pripadaju istoj klasi koju smo ve koristili i
upotrebiti jedan isti stil nad njima da bismo promenili izgled fonta u kurziv. Evo kako izgleda kod nakon izmene:

Imajte na umu da su ostali stilovi koje smo prethodno napisali i dalje tu samo nisu prikazani na slici radi utede
prostora.

Prekucajte dodatne stilove. Sauvajte CSS dokument i osveite HTML dokument u browseru.

Nakon ovoga primenjujemo na oba p i img elementa dodatni stil koji omoguava da elementi sami "plutaju" ulevo i
reaju se jedan pored drugog. Slike e se same prilagoditi i smestiti u 30% prostora koji im je dodeljen od irine

17
Primena raunara u elektrotehnici, Web dizajn

lanka (koja je inae, podsetimo se, 600 piksela). Kompletan CSS kod nakon svih izmena izgleda ovako:

Prekucajte i proverite CSS kod, nakon toga sauvajte dokument i osveite HTML stranicu u browseru da biste videli
sve promene do kojih je dolo prilikom stilizovanja dokumenta: lanci su se podesili na irinu od 600 piksela od kojih
je 70% irine dodeljeno pasusima a 30% irine dodeljeno slikama koje su se same prilagodile dostupnom prostoru.
Promenjeni su naslovi, koristili smo klase i identifikatore kao i same nazive elemenata da bismo ih selektovali za
stilizovanje. Cilj ove vebe je bio da nauite kako da pravilno odaberete elemente na strani korienjem samih naziva
elemenata ili korienjem naziva klase kojoj pripadaju ili pak korienjem jedinstvenog identifikatora elementa.

18
Primena raunara u elektrotehnici, Web dizajn

Stranica bi nakon stilizovanja trebala da izgleda ovako:

Ukoliko bismo, na primer, eleli da u drugom pasusu slika bude levo od teksta onda bi ovo bile neophodne promene:

19
Primena raunara u elektrotehnici, Web dizajn

...nakon ega e strana izgledati ovako:

Domai zadatak za vebu: napraviti stranu identine strukture sa drugim tekstom i slikama i podesiti CSS kod tako da
obe slike budu levo od teksta a oba naslova ute boje (yellow).

20
Primena raunara u elektrotehnici, Web dizajn

Tekst i formatiranje teksta


Za poetak napravite jo jednu kopiju fajla "Veba01.html" i nazovite je "Veba03.html" kako ne biste morali da
iznova piete kostur HTML dokumenta za ovu vebu. Takoe kreirajte jedan prazan CSS dokument pod nazivom
"stil03.css" koji emo koristiti za stilizovanje dokumenta na kome budemo radili u ovoj vebi.

U ovoj vebi emo raditi sa tekstom i nauiti kako se formatira tekst u CSS-u.

[HTML deo vebe]


Za poetak, potrebno je poznavati osnovne elemente koji se koriste za rad sa tekstom u HTML-u. Osnovni elementi i
njihov opis slede u tabeli:

Element Opis
<p>...</p> element koji definie jedan pasus, podrazumeva se slobodan prostor pre i posle pasusa
<h1>...</h1>
... definie naslove i podnaslove
<h6>...</h6>
<em>...</em> definie sadraj koji e biti istaknut ili naglaen
<i>...</i> slui za pisanje teksta kurzivom
<b>...</b> slui za pisanje boldovanog teksta
<strong>...</strong> definie tekst koji znaajno utie na sadraj (snano naglaeni tekst)
<small>...</small> definie tekst koji e biti prikzan malim slovima u odnosu na okolni tekst
<sub>...</sub> definie tekst koji e biti prikazan u indeksu
<sup>...</sup> definie tekst koji e biti prikazan u eksponentu
<del>...</del> definie tekst koji e biti prikazan sa horizontalnom linijom preko njega (precrtan tekst)
<ins>...</ins> definie umetnuti sadraj
<code>...</code> definie sadraj kao raunarski kod
<br> (ili <br/>) prelom reda u tekstu (novi red)
&nbsp; obian Space karakter, funkcionie kao dugme Space u tekst editorima, pravi razmak
<span>...</span> element za opte izdvajanje sadraja iz linije teksta radi stilizovanja

21
Primena raunara u elektrotehnici, Web dizajn

Sada emo u HTML dokument uneti sadraj, ovako izgleda telo dokumenta nakon unoenja sadraja:

Ova HTML strana u browseru izgleda ovako:

Prekucajte tekst u HTML dokument i unesite sve potrebne elemente kao na slici a potom sauvajte i otvorite
dokument u pregledau. Evo sadraja:

ta je CSS?
Ovde emo priati o osnovama CSS-a.

Osnovno o CSS-u
CSS predstavlja veoma moan jezik pomou kojeg moete dodati stil naim vaim Web stranama, odnosno definisati
nain na koji e njihov sadraj biti prezentovan*u browseru.

Osnovna CSS sintaksa


CSS je predstavljen kao skup pravila koja se piu na sledei nain:

selektor
{
atribut1: vrednost1;

22
Primena raunara u elektrotehnici, Web dizajn

atribut2: vrednost2;
}

Kao to vidite, elementi kao to su <i> ili <b> ve unose neko podrazumevano formatiranje, dok elementi kao to je
<span> nemaju vidljivog uticaja na dokument sve dok ne upotrebimo CSS da stilizujemo taj deo teksta.

[CSS deo vebe]


Pre nego to krenemo sa stilizovanjem dokumenta bilo bi lepo da objasnimo RGB sistem boja koji se u CSS-u
esktenzivno koristi pored klasinih naziva boja kao to su blue, red, orange, yellow itd. RGB sistemom pisanja boja se
mogu napisati sve nijanse osnovnih boja koje ovaj sistem koristi: Red, Green i Blue. Boje se piu u heksadecimalnom
sistemu (svaka cifra je u rasponu od 0 do F) i sa tarabom ispred boje. Primer isto zelene boje:
#00FF00 - prve dve cifre odreuju intenzitet crvene, druge dve intenzitet zelene a trei par cifara odreuje intenzitet
plave boje.

Takoe, ne zaboravite da ubacite element link kojim emo povezati HTML dokument sa CSS dokumentom.

Linkujte HTML dokument sa CSS dokumentom na ranije objanjen nain odnosno dodavanjem ove linije u head
HTML dokumenta:
<link rel="stylesheet" href="stil03.css">

Sada emo stilizovati redom:


- telo HTML dokumenta body: pozadinu podeavamo na svetlo sivu korienjem RGB sistema
- naslov h1: podeavamo veliinu fonta na 32px i porodicu fonta na Verdana
- naslovi h2: podeavamo veliinu fonta na 20px i boju u plavu
- pasuse p: poravnanje teksta podeavamo na justify (poravnanje sa obe strane) i podeavamo veliinu fonta na 16px
- deo teksta izdvojen elementom span podvlaimo
- deo teksta izdvojen elementom del emo iskositi
- deo teksta izdvojen elementom code: podeavamo veliinu fonta na 12px

Izvriti stilizovanje sa liste iznad.

23
Primena raunara u elektrotehnici, Web dizajn

Kompletan CSS kod izgleda ovako:

Stilizovani dokument e izgledati ovako:

CSS atributi koji se najee koriste za formatiranje teksta (ali i jo nekih elemenata na stranama)kao i primer njihove
upotrebe su dati u tabeli:

Atribut Primeri upotrebe Opis atributa


font-family font-family: Verdana; definisanje tipa fonta

24
Primena raunara u elektrotehnici, Web dizajn

font-size font-size: 20px; definisanje veliine (visine) slova


font-style: italic;
font-style definisanje stila teksta
font-style: normal;
font-weight font-weight: bold; definisanje debljine teksta
color: blue;
color definisanje boje teksta ili nekog drugog elementa
color: #45DF4C
background-color isto kao za color definisanje boje pozadine elementa ili teksta
text-align: left;
text-align ravnanje teksta
text-align: justify;
text-decoration: underline;
text-decoration ukraavanje teksta
text-decoration: line-through;
text-indent text-indent: 18px; uvlaenje pasusa

25
Primena raunara u elektrotehnici, Web dizajn

Upotreba linkova, slika i multimedijalnog sadraja


Za poetak napravite jo tri kopije fajla "Vezba01.html" i nazovite ih redom "Vezba04.html", "Vezba041.html" i
"Vezba042.html" kako ne biste morali da iznova piete kostur HTML dokumenta za ovu vebu svaki put. Takoe
kreirajte jedan prazan CSS dokument pod nazivom "stil04.css" koji emo koristiti za stilizovanje dokumenta na kome
budemo radili u ovoj vebi. Kreirajte novi direktorijum pod imenom "folder" unutar foldera "Web design" i
premestite dokument "Vezba042.html" u taj folder. U sva tri dokumenta odmah dodajte link do stila koji ste
prethodno kreirali kako biste ih povezali. Jedan fajl e sluiti za stilizaciju sva tri dokumenta.

Valja odmah napomenuti da dokument "Vezba042.html" koji se nalazi u direktorijumu "folder" nije mogue linkovati
direktno jer se CSS dokument i HTML dokument u ovom sluaju ne nalaze u istom direktorijmu. Za sada prekopirajte
ovu liniju koda u head HTML dokumenta pa emo kasnije objasniti kako smo formirali ovakvu putanju do CSS
dokumenta:
<link rel="stylesheet" href="../stil04.css">

U ovoj vebi radiemo sa linkovima i multimedijalnim sadrajem na HTML stranama. Kreiraemo jednu glavnu stranu
i dve dodatne strane od kojih se jedna ne nalazi u istom direktorijumu kao glavna strana ve u zasebnom
poddirektorijumu.

[HTML deo vebe]


Linkovi u HTML dokumentima imaju viestruku ulogu:
- da poveu vie razliitih dokumenata i omogue navigaciju izmeu njih
- da omogue navigaciju kroz sam HTML dokument u kome se nalaze (korienjem drugih linkova ili identifikatora)
- da omogue povezivanje sa eksternim dokumentima, programima, omogue download fajlova itd.

Re "link" predstavlja opteprihvaen naziv koji se koristi za ovaj HTML element meutim pravi naziv ovog elementa
je anchor to u bukvalnom prevodu znai sidro a njegova oznaka (tj. tag) je <a>...</a>. Njegov najbitniji atribut je
href koji zapravo predstavlja putanju do dokumenta ili bilo koji drugi objekat do koga ovaj link vodi tj. za koji je vezan
(fajl, identifikator, identifikator u drugom fajlu, drugo sidro itd.).
Primer upotrebe:

Za uitavanje i prikazivanje slika u HTML dokumentima koristi se element <img>...</img> sa atributom src koji
predstavlja putanju do slike:
Primer upotrebe:

to se tie reprodukcije audio i video fajlova koriste se istoimeni elementi <audio controls>...</audio> i <video
controls>...</video> koji se koriste na praktino istovetan nain pa e u ovoj vebi biti dat primer upotrebe elementa
video.
Primer upotrebe:

26
Primena raunara u elektrotehnici, Web dizajn

Sada emo u HTML dokumentu "Vezba04.html" kreirati link koji vodi do strane "Vezba041.html" i link koji vodi do
strane "Vezba042.html" kao i dva linka od kojih jedan vodi do dna strane a drugi nas vraa na poetak strane. U
sluaju poslednja dva linka umesto putanje dokumenta jednostavno koristimo identifikator elementa na strani do
koga elimo da "skoimo". Podsetimo se, atributi id i class se mogu dodeliti bilo kom elementu HTML-a i ovo je
odlian primer jo jednog naina na koji se upotrebljavaju pored toga to se koriste kao selektori za stilizovanje u
CSS-u.
Nakon izmena telo HTML dokumenta izgleda ovako (mnogobrojni <br> elementi su tu da bi omoguili vetako
uveanje strane po vertikali):

...
...
...

Prekucajte HTML kod u dokument, sauvajte ga.

Zatim emo popuniti telo dokumenta "Vezba041.html":

...a zatim i telo dokumenta "Vezba042.html":

27
Primena raunara u elektrotehnici, Web dizajn

Prekucajte HTML kod u oba dokumenta i sauvajte ih.


Nakon toga iz foldera "Materijal" kopirajte fajl "slika.jpg" u folder "Web dizajn" i fajl "video.mp4" u folder "folder".
Sada moete da otvorite glavni HTML dokument i proverite da li funkcioniu svi linkovi, da li prva strana prikazuje
sliku i da li druga strana reprodukuje video fajl.

Kao to vidite, href atribut elementa a predstavlja putanju do fajla na koji link ukazuje ili predstavlja neki
identifikator na strani na kojoj se sam link nalazi i data su oba primera upotrebe. Meutim, kada pristupamo
fajlovima ili HTML dokumentima koji se ne nalaze u istom direktorijumu kao i HTML fajl sa kojim radimo, ne moemo
jednostavno upotrebiti nazive fajlova ve moramo upotrebiti relativnu putanju do fajla.
Kad smo ve kod toga: upotreba apsolutnih putanja je besmislena, na primer "C:/Users/Bencun/Desktop/Web
design/Vezba041.html" predstavlja apsolutnu putanju do dokumenta.
Primer pristupanja drugom dokumentu koji se nalazi u folderu ispod onog u kome smo trenutno dat je u HTML
dokumentu koji predstavlja glavnu stranu:

Kada je u pitanju pristupanje fajlovima i HTML dokumentima koji su hijerarhijski u folderu iznad onog u kome se
nalazi HTML dokument nain rada je drugaiji. Za pristup direktorijumu koji se nalazi jedan nivo iznad u hijerarhiji u
odnosu na onaj u kome je HTML dokument koriste se dve take "../". Ukoliko elimo da pristupimo direktorijumu koji
je dva nivoa iznad onda to piemo ovako: "../../"; isto ovo pravilo vai za sve naredne direktorijume iznad, samo
dodajemo dve take za svaki.
Primer upotrebe pristupa fajlu koji je u direktorijumu iznad dat je u dokumentu "Vezba042.html" kod linkovanja
dokumenta sa CSS stilom koji nije prisutan u istom folderu u kome se dokument nalazi i kod formiranja linka koji vodi
nazad na poetnu stranu a od kojih se oba nalaze u jednom direktorijumu iznad:

...

Radi lakeg shvatanja naina na koji funkcioniu relativne putanje evo vizuelizovanog primera:

SRC="chef.gif" znai da se slika nalazi u istom


folderu u kome je i HTML dokument, koji je
poziva.

SRC="images/chef.gif" znai da se slika nalazi u


folderu ispod HTML dokumenta koji je poziva.
Pitanje je: koliko nivoa ispod? Onoliko koliko je
potrebno (a u naem sluaju - jedan)!

SRC="../chef.gif" znai da je slika u folderu iznad


HTML dokumenta koji je poziva.

28
Primena raunara u elektrotehnici, Web dizajn

SRC="../../chef.gif" znai da je slika dva foldera


iznad HTML dokumenta koji je poziva.

SRC="../images/chef.gif" znai da je slika jedan


folder gore, pa jedan dole u odnosu na HTML
dokument.

SRC="../../../other/images/chef.gif"

Linkovi (sidra) se takoe mogu koristiti za slanje e-mail pote odnosno mogu izvriti pokretanje e-mail klijenta na
raunaru i automatsko popunjavanje adresnog polja. Primer linka koji bi otvorio e-mail klijent i kreirao novu poruku
koja e biti poslata na adresu ucenik@skola.com izgledao bi ovako:

Vredi i spomenuti opcioni atribut elementa a koji omoguava da definiemo da li e se link otvoriti u novom
tabu/prozoru, u prozoru svog roditeljskog dokumenta itd. Ovaj atribut se naziva target i vrednosti koje moe imati
su: "_blank", "_parent", "_self", "_top" od kojih emo spomenuti samo "_blank" koji dokument otvara u novom
tabu ili prozoru.

[CSS deo vebe]


Sada emo prei na stilizovanje dokumenta.

Za stilizaciju linkova koriste se pseudo klase koje definiu izgled linkova u


- normalnom stanju - a
- u stanju kada mi prelazi preko njih - a:hover
- kada je link aktivan (odnosno kada se na njega klikne) - a:active
- i kada je ve poseen - a:visited

Mi emo nae linkove stilizovati na sledei nain: linkovi e izgledati isto kada su neaktivni i kada su poseeni dok e
se njihov izgled menjati prilikom prelaska mia i klika na njih. Takoe emo izmeniti veliinu fotografije na prvoj

29
Primena raunara u elektrotehnici, Web dizajn

strani.
Pre uputanja u stilizovanje spomenuemo nekoliko osobina CSS-a koje ranije nismo koristili:

- width - koristi se za podeavanje irine elementa (u pikselima ili procentima)

- height - isto kao width samo za visinu

- max-height i max-width - ograniava visinu i irinu elementa bez obzira na ostala podeavanja irine i visine

- display - menja nain na koji su elementi prikazani na ekranu a samim tim moe uticati i na njihovo
ponaanje; mogue vrednosti koje se najee koriste su: inline - prikazuje element kao jednolinijski (kao
element <span>), block (prikazuje element kao <p>), inline-block (blok u jednoj liniji); u datom primeru
koristiemo display: block; kako bi kompletna oblast koju linkovi zauzimaju reagovala na kursor mia i klikove
a ne samo tekst linka

Evo kako izgleda CSS dokument nakon stilizovanja:

Prekucajte stilove u CSS dokument, sauvajte ga i sauvajte izmene u svim ostalim dokumentima ako ve niste i
nakon toga otvorite glavnu stranu i kreite se po ostalim dokumentima. Uoite manje dimenzije slike i izgled linkova.

30
Primena raunara u elektrotehnici, Web dizajn

Nakon primene stilova poetna strana bi trebalo da izgleda ovako:

Dok e prva strana na kojoj smo ograniili irinu slike sada izgledati ovako:

31
Primena raunara u elektrotehnici, Web dizajn

Upotreba listi
Kao i uvek pre svega napravite jo jednu kopiju fajla "Veba01.html" i nazovite je "Veba05.html" kako ne biste
morali da iznova piete kostur HTML dokumenta za ovu vebu. Takoe kreirajte jedan prazan CSS dokument pod
nazivom "stil05.css" koji emo koristiti za stilizovanje dokumenta na kome budemo radili u ovoj vebi. Odmah
linkujte dotini dokument sa HTML dokumentom korienjem elementa link.

[HTML deo vebe]


HTML podrava tri osnovna tipa listi:

Neureene liste - njihove stavke nemaju specifian redosled

o ovakva lista se nalazi u elementu <ul>...</ul> a njene stavke unutar <ul> taga u elementu <li>...</li>;
podrazumevani marker za stavke je popunjeni krui

Numerisane ili ureene liste - stavke imaju specifian redosled, mogu biti numerisane korienjem brojeva
ili ureene korienjem slova

o ove liste se nalaze u elementu <ol>...</ol> a njihove stavke unutar <ol> taga u elementu <li>...</li>;
podrazumevani marker za stavke su decimalne cifre

Definicione liste - sadre termine i po jednu ili vie definicija za svaki termin

o nalaze se u elementu <dl>...</dl> unutar kojeg se nalaze elementi <dt>...</dt> (koji oznaava termin
koji se definie) i <dd>...</dd> (kojeg moe biti jedan ili vie od jednog i koji definiu termin oznaen
sa <dt>)

Liste se takoe mogu ugneavati jedna u drugu i to na neogranien broj nivoa tako to se svaka nova pod-lista
stavlja unutar <li> elementa liste u kojoj treba da se nalazi.

U HTML dokumentu emo kreirati etiri liste koje slede, naravno u telu dokumenta (u okviru elementa body):

Neureena lista:

Ureena lista:

32
Primena raunara u elektrotehnici, Web dizajn

Definiciona lista:

Primer ugneenih listi:

Prepiite HTML kod sa slika u telo dokumenta, sauvajte ga i otvorite u browseru.


Primetite da odreene liste sadre identifikatore koji e nam kasnije omoguiti da primenimo odreeni stil samo na
njih a ne na sve liste u dokumentu.
Takoe primetite kako liste izgledaju u browseru: neureene liste podrazumevano imaju krui za marker a ureene
imaju decimalne brojeve.

[CSS deo vebe]


Pre nego to preemo na stilizovanje dokumenta spomenuemo CSS svojstvo koje emo koristiti prilikom stilizovanja
liste a to je list-style-type a koje moe imati veliki broj vrednosti pa emo mi spomenuti samo najkorienije:

Vrednost Opis markera


none bez markera
disc ispunjeni krui (podrazumevano za ul)
circle prazan krui
square kvadrati
decimal decimalni brojevi (podrazumevano za ol)
upper-alpha velika slova abecede
lower-alpha mala slova abecede

33
Primena raunara u elektrotehnici, Web dizajn

upper-roman veliki rimski brojevi


lower-roman mali rimski brojevi

Neureena lista sa identifikatorom istog imena e za marker ispred stavki imati kvadrati dok e ureena imati mala
slova abecede.

Dokument je stilizovan na ovaj nain:

Prepiite stilove u CSS dokument, sauvajte ga a onda otvorite HTML dokument u browseru i uoite nastale
promene.

34
Primena raunara u elektrotehnici, Web dizajn

Nakon stilizovanja stranica izgleda ovako:

35
Primena raunara u elektrotehnici, Web dizajn

Upotreba tabela
Kao i uvek pre svega napravite jo jednu kopiju fajla "Vezba01.html" i nazovite je "Vezba06.html" kako ne biste
morali da iznova piete kostur HTML dokumenta za ovu vebu. Takoe kreirajte jedan prazan CSS dokument pod
nazivom "stil06.css" koji emo koristiti za stilizovanje dokumenta na kome emo raditi u ovoj vebi. Odmah linkujte
dotini dokument sa HTML dokumentom korienjem elementa link.

Tabele se u HTML-u koriste za prikaz tabelarnih podataka. Ranije su mnogi Web dizajneri koristili tabele da bi njima
definisali vizuelni raspored elemenata na strani to je pogrean pristup reenju problema rasporeda elemenata - za
to se koristi CSS. Upamtite, HTML odreuje strukturu i sadraj, a CSS vizuelni izgled dokumenta.

[HTML deo vebe]


Kreiranje tabela u HTML-u je jako jednostavan proces. Za kreiranje tabele po standardima se koristi element
<table>...</table> unutar koga se nalaze elementi caption (naslov tabele), thead (zaglavlje tabele), tfoot (podnoje
tabele), i tbody (telo tabele, podaci), tim redosledom, s tim to element za podnoje nije obavezan. Za kreiranje
redova u zaglavlju, podnoju i telu tabele koristi se element <tr>...</tr> dok se za kreiranje polja odnosno elija sa
podacima unutar ovih redova koristi element <td>...</td> s tim to se u zaglavlju tabele umesto njega koristi
<th>...</th>. Kostur jedne tabele izgleda otprilike ovako:

Broj kolona tabele odreen je brojem kolona u prvom redu tabele odnosno u prvom redu zaglavlja tabele. Ukoliko u
narednim redovima u telu ili podnoju postoji kolona koja se nalazi van ovog opsega ona e trati iz tabele.

Podelu tabela moemo izvriti na simetrine i asimetrine. Simetrine tabele sadre isti broj elija u svakom redu dok
asimetrine imaju varijacije u svojoj strukturi a te varijacije zapravo predstavljaju formiranje veih elija
objedinjavanjem vie elija po kolonama ili redovima.

36
Primena raunara u elektrotehnici, Web dizajn

U ovoj vebi emo krenuti od jednostavne simetrine tabele koju emo postepeno dopunjavati elementima.

U ovoj vebi je potrebno da nakon svakog koraka i unoenja novog koda sauvate HTML dokument i otvorite ga u
browseru da biste uoili promene.

Prvo emo (naravno u telu dokumenta) kreirati osnovnu tabelu sa jednim redom i jednom elijom. Dodaemo atribut
border u okviru elementa table, ovaj metod se inae ne primenjuje ve se kreiranje ivica tabele vri u CSS-u ali emo
radi jednostavnije demonstracije upotrebiti atribut border da bi se videle ivice elija:

Zatim emo dodati jo dve elije u taj isti red koji smo ve napravili:

Zatim emo dodati jo jedan red koji e takoe sadrati tri elije:

Ova tabela predstavlja primer jednostavne simetrine tabele sa dva reda i tri kolone. Sada emo od ove tabele
nainiti asimetrinu tabelu. Objediniemo obe elije u prvoj koloni i zadnje dve elije u prvom redu.
Za proirenje elija koriste se atributi rowspan i colspan.
Atribut rowspan proiruje eliju za onoliko redova kolika je njegova vrednost. Primer: rowspan="6" znai da e se
elija protezati preko est redova a sadraj te elije e biti ono to se nalazi izmeu poetne i kranje oznake elementa
td.

37
Primena raunara u elektrotehnici, Web dizajn

Atribut colspan proiruje eliju za onoliko kolona kolika je njegova vrednost. Primer: colspan="3" znai da e se elija
protezati preko tri naredne kolone.

Sada emo prvo proiriti prvu eliju u prvom redu tako da se proiri i u drugi red, ali ovo znai da emo sada u
drugom redu imati jednu eliju viak koju moramo ukloniti inae e ona pokvariti izgled tabele.
Dodaemo atribut rowspan eliji C11 dok emo eliju C21 ukloniti jer e njeno mesto morati da zauzme elija C11:

Sada emo takoe proiriti drugu eliju prvog reda tako da zauzima dve kolone. Ovo e ponovo uslovljavati
uklanjanje suvine elije. Ovog puta C12 treba da se proiri za jednu kolonu i zauzme mesto elije C13 pa emo C13
ukloniti:

Da bi tabela bila kompletna i izraena po najnovjim HTML standardima neophodno je da ima ranije spomenute
elemente: naslov, zaglavlje, podnoje i telo.

Kod koji ve imamo predstavlja sadraj tabele to znai da on predstavlja njeno telo tbody i zato emo ga uokviriti
tim elementom:

38
Primena raunara u elektrotehnici, Web dizajn

Ova promena nema uticaja na izgled tabele samo utie na logiku strukturu dokumenta i same tabele.

Sada emo dodati elemente caption, thead i tfoot koji, po HTML standardima, moraju da se nalaze ispred tbody
elementa. Element tfoot nije obavezan ali emo ga dodati da bismo videli kako se upotrebljava:

Na izgled tabele utie samo dodavanje naslova a zaglavlje i podnoje su trenutno bez sadraja pa ne utiu na prikaz
tabele.

Sada emo dodati sadraj u zaglavlje i podnoje. Postoji samo jedna razlika u odnosu na uobiajen nain dodavanja
sadraja u tabelu a to je da se u elementu thead za kreiranje elija ne koristi element td ve th. Podesiemo colspan
atribut u zaglavlju i podnoju tako da oba elementa imaju samo po jednu eliju koja se protee preko sve tri kolone.

[CSS deo vebe]


Izvriemo prosto stilizovanje tabele:
1. Promeniemo stil teksta naslova u kurziv

39
Primena raunara u elektrotehnici, Web dizajn

2. Obojiemo pozadinu zaglavlja u svetlo sivu boju

3. Podesiemo ivice tabele tako da izmeu elija nema slobodnog prostora

Svojstvo border-collapse tabeli govori da li treba da ukloni razmak izmeu pojedinanih ivica njenih elija i njene
celokupne spoljanje ivice. Upotreba ovog svojstva izgleda ovako:
border-collapse: collapse;

4. Podesiemo sve elije tako da sadraj elija bude odvojen od ivica i tekst centriran

Svojstvo padding definie unutranje rastojanje izmeu sadraja (u naem sluaju teksta) i bordera (ivice).
Spomenuemo i svojstvo margin koje predstavlja prazan prostor izmeu bordera i okolnih elemenenata dokumenta.
Vrednost se daje takoe u pikselima. Ilustrovano to izgleda ovako:
HTML element

Padding
Border

Margin

5. Obojiemo slova u podnoju u crvenu boju

Ovim je stilizovanje zavreno. Meutim, moramo spomenuti jo jednu stvar. Mi smo u HTML dokument u elementu
table ukljuili atribut border da bi ivice elija bile vidljive. Ovo se inae radi u CSS-u i ukoliko bismo ivice
implementirali preko CSS-a onda bi bilo potrebno da obriemo atribut border iz HTML dokumenta a da u stil za th i
td dodamo border: 1px solid black; to znai da sintaksa za ovo svojstvo glasi ovako:
border: debljina_ivice izgled_linije boja_linije;
Za izgled linije moemo koristiti vrednosti: none, solid, dashed, dotted,itd.

40
Primena raunara u elektrotehnici, Web dizajn

Dovoljno je primeniti svojstvo border na th i td elemente da bismo dobili oiviene elije, meutim ukoliko elimo i
okvir oko cele tabele (npr. kada imamo elije koje tre i slino) potrebno je primeniti ovo svojstvo i na element table
odnosno na celu tabelu koju stilizujemo.

Za podeavanje irine i visine tabele i pojedinanih elija koriste se svojstva width i height (u pikselima, naravno) a za
centriranje tabele u okviru elementa u kome se nalazi (u naem sluaju u telu HTML dokumenta) je dovoljno podesiti
margine tabele na vrednost auto a sintaksno ta naredba izgleda ovako:
margin: auto;

Za domai zadatak pokuajte da oformite ovakvu tabelu u HTML-u koristei sve elemente: table, caption, thead,
tfoot, tbody, tr, th i td (imajte na umu da bez stilova tabela nema ivice!):

I da je zatim stilizujete da izgleda ovako (centrirana je na strani):

41
Primena raunara u elektrotehnici, Web dizajn

Dopunska veba, fajlovi "Vezba06_Dopunska.html" i "stil06_dopunski.css"


U ovoj vebi emo kreirati tabelu koja sadri sve pomenute elemente i potom emo je stilizovati. Prvo emo kreirati
element table a unutar njega element caption koji e sadrati naslov tabele "Naslov tabele".

Zatim kreirajte element thead koji e sadrati jedan red tr a koji e unutar sebe sadrati jednu praznu kolonu
zaglavlja i dve kolone od kojih jedna sadri re "Ime" a druga "Prezime". Ovim smo irinu ostatka tabele automatski
ograniili na 3 kolone.

Nakon zatvaranja elementa thead otvaramo element tfoot i u njemu kreiramo takoe jedan red tr u kome emo
kreirati samo jedan element td koji e initi podnoje tabele. Na cilj je da podnoje tabele ini samo jedna elija pa
stoga ovom elementu td dodeljujemo atribut colspan i vrednost atributa podeavamo na "3" ime smo ovoj eliji
rekli da se proiri tj. zauzme prostor od tri kolone.

Proirenje jedne elije tako da zauzima dva ili vie redova ili dve ili vie kolona postiemo korienjem atributa
rowspan i colspan kojima odreujemo koliko redova i kolona elija moe zauzeti u tabeli.

Nakon zatvaranja elementa tfoot otvaramo element tbody i zapoinjemo unos podataka. Kreirajte dva prazna reda.
Prvi red neka sadri tri elije sa sledeim vrednostima: 1. , Jovan, Jovanovi.
Drugi red neka sadri takoe tri elije sa sledeim vrednostima: 2. , Petar, Petrovi.
Drugom redu dodelite atribut class sa vrednou "parni".
Sada imate dva formirana reda sa rednim brojevima, imenima i prezimenima. Kopirajte ih i pejstujte u telo tabele
dva puta tako da imate ukupno est osoba na listi i u skladu sa time izmenite redne brojeve tih osoba, imena ne
morate menjati.
Zatvorite tbody tabele, sauvajte dokument i otvorite tabelu u pregledau. Tabela nema ivice ali bi trebalo da sadri
zaglavlje, est imena i prezimena sa rednim brojevima i podnoje.

Sada emo, radi demonstracije, dodati sedmi i osmi red u tabelu i pokazati kako funkcioniu atributi colspan i
rowspan.
Nakon to ste dodali dva reda koji slede iza imena i prezimena koje ve imate, u prvom kreirajte jednu eliju sa
atributima rowspan i colspan pri emu emo oba podesiti na vrednost "2", a to znai da e ta elija zauzimati prostor
od dva reda i dve kolone. Sada u ovaj red dodajte jo dve elije sa bilo kojim sadrajem.
U drugi dodatni red dodajte samo jednu eliju sa takoe proizvoljnim sadrajem.
Sauvajte i otvorite dokument u pregledau. Primetiete da suvina elija u sedmom redu tri jer je prva elija u tom
redu podeena da zauzme prostor od dve kolone. Takoe ete primetiti da je osmi red, iako sadri samo jednu eliju,
potpuno popunjen iz razloga to je elija iz prethodnog reda podeena da zauzme jo jedan red ispod sebe i dve
kolone u njemu.

42
Primena raunara u elektrotehnici, Web dizajn

Telo HTML dokumenta izgleda ovako:

43
Primena raunara u elektrotehnici, Web dizajn

Sada emo prei na stilizovanje tabele.

Prvo CSS svojstvo koje je jako bitno jeste border i ono definie izgled ivice tabele. Sintaksa glasi ovako:
border: debljina_ivice izgled_linije boja linije;
Za izgled linije moemo koristiti vrednosti: none, solid, dashed, dotted,itd.
Dovoljno je primeniti svojstvo border na th i td elemente da bismo dobili oiviene elije, meutim ukoliko elimo i
okvir oko tabele potrebno je primeniti ovo svojstvo i na element table odnosno na celu tabelu koju stilizujemo.

Sledee bitno svojstvo jeste border-collapse koje tabeli govori da li treba da ukloni razmak izmeu pojedinanih ivica
njenih elija i njene celokupne spoljanje ivice. Upotreba ovog svojstva izgleda ovako:
border-collapse: collapse;

U ovoj vebi takoe koristimo svojstvo padding koje definie unutranje rastojanje izmeu sadraja (u naem sluaju
teksta) i bordera (ivice). Spomenuemo i svojstvo margin koje predstavlja prazan prostor izmeu bordera i okolnih
elemenenata dokumenta. Vrednost se daje takoe u pikselima.

U ovoj vebi emo uraditi sledee:


- podesiti border-collapse: collapse; za ceo element table
- podesiti elementima table, th, i td ivicu na debljinu od jednog piksela, punu liniju i boju linije na crnu
- podesiti visinu svih elemenata tr na 30px;
- podesiti svojstvo text-align na left za sve th i td elemente (takorei sve elije u tabeli) i podesiti padding svojstvo na
4 piksela
- podesiti pozadinsku boju zaglavlja na sivu a boju slova na belu

44
Primena raunara u elektrotehnici, Web dizajn

- podesiti boju teksta podnoja na plavu


- svakom redu koji je klase "parni" emo pozadinsku boju podesiti na svetlo sivu: #CCCCCC.

Nakon editovanja CSS dokumenta isti izgleda ovako:

Sauvajte i HTML i CSS dokument i otvorite stranicu u pregledau kako biste videli efekte stilizovanja.
Menjajte neke vrednosti u CSS fajlu da biste videli kako utiu na izgled tabele.

45
Primena raunara u elektrotehnici, Web dizajn

Tabela koju biste trebali da dobijete na kraju vebe izgleda ovako:

46
Primena raunara u elektrotehnici, Web dizajn

HTML forme
Kao i uvek pre svega napravite jo jednu kopiju fajla "Vezba01.html" i nazovite je "Vezba07.html" kako ne biste
morali da iznova piete kostur HTML dokumenta za ovu vebu. Takoe kreirajte jedan prazan CSS dokument pod
nazivom "stil07.css" koji emo koristiti za stilizovanje dokumenta na kome budemo radili u ovoj vebi. Odmah
linkujte dotini dokument sa HTML dokumentom korienjem elementa link.

HTML forme predstavljaju obrasce za unos podataka. Sastoje se od polja za unos teksta, brojeva, datuma, dugmadi
itd, ije se vrednosti nakon popunjavanja forme alju na server na kome se nalazi Web sajt radi obrade podataka.

[HTML deo vebe]


Forma se kreira upotrebom elementa <form>...</form> koji unutar sebe sadri sve elemente forme. Najbitniji
atributi ovog elementa su:
- method - moe imati vrednosti POST ili GET i definie nain slanja podataka na server
- action - definie koja se akcija poziva kada se klikne na dugme za slanje podataka koje forma sadri
- enctype - definie tip enkripcije odnosno zaite podataka koji se alju sa forme

Grupisanje srodnih elemenata forme unutar same forme se vri upotrebom elementa <fieldset>...</fieldset> koji
unutar sebe sadri element <legend>...</legend> koji slui da opie fieldset u kome se nalazi i polja za unos
podataka. Element fieldset nije neophodan kod jednostavnih formi.

Element <label>...</label> slui da pojedinano opie svako polje za unos podataka i obino se u HTML dokumentu
nalazi uz element koji opisuje, neposredno pre ili posle njega u dokumentu. Ne predstavlja nita drugo do obian
tekst koji se ispisuje na ekranu.

Kreiranje osnovnih polja za unos podataka vri se pomou vie razliitih elemenata od kojih emo mi razmotriti samo
osnovne. Svaki od ovih elemenata mora sadrati atribut name koji definie ime ovog elementa pri slanju podataka na
server i atribut value koji definie vrednost koju element ima pri slanju.

Element <input> se koristi za kreiranje jednolinijskih tekstualnih polja, dugmadi, ekboksova, radio dugmadi itd.
Atributom type se odreuje koji e tip ulaznog polja biti kreiran na ekranu pa tako za vrednosti ovog atributa imamo
(nabrojaemo samo osnovne tipove polja za unos podataka):
- text - kreira klasino jednolinijsko tekstualno polje za unos kratkih tekstualnih podataka
- password - kreira polje za unos ifre, u ovakvom polju slovni karakteri nisu prikazani ve browser umesto njih
prikazuje kruie ili zvezdice ali ovo polje za vrednost atributa value ipak ima uneen tekst
- checkbox - kreira ekboks koji moe da se tiklira i omoguava biranje jedne ili vie ponuenih opcija odjednom, kao
i mogunost da se nijedna opcija ne izabere; kada koristimo ekboksove moemo koristiti atribut checked da ga
unapred tikliramo
- radio - kreira radio dugme; radio dugmad predstavljaju grupu dugmadi od kojih samo jedno moe biti odabrano u
jednom trenutku; grupu radio dugmadi kreiramo tako to im svima dodelimo isti atribut name i time postiemo to da
se dugmad te grupe meusobno iskljuuju; i nad ovom dugmadi vai upotreba atributa checked
- submit - kreira dugme koje alje podatke sa forme na server; atributom value odreujemo tekst koji je prikazan na
dugmetu
- reset - kreira dugme koje resetuje sve podatke na formi u poetno stanje
- button - kreira dugme za optu namenu

47
Primena raunara u elektrotehnici, Web dizajn

Element <select> se koristi za kreiranje padajuih listi, unutar sebe sadri elemente <option>...</option> od kojih
svaki sadri po jednu opciju koju ova padajua lista nudi a podrazumevani izbor moemo oznaiti korienjem
atributa selected unutar taga te opcije. Mogu se i kreirati grupe opcija korienjem taga <optgroup>...</optgroup>
kojim se neemo baviti u ovoj vebi.

Element <textarea>...</textarea> slui za kreiranje velikih tekstualnih polja koja omoguavaju unos velike koliine
tekstualnih podataka.

Vredi spomenuti i element <button>...</button> koji se koristi za kreiranje dugmadi ali za razliku od elementa input
sa atributom type="button" ovaj element nije samozatvarajui pa je tako mogue smestiti dodatne HTML elemente
unutar dugmeta. Neemo ga upotrebljavati u vebi.

Korienjem ovih elemenata kreiraemo stranicu koja sadri formu koja slui za prijavu rada. Forma e sadrati dva
fieldseta, prvi e sadrati polja koja se tiu linih podataka o ueniku a druga e se sastojati od polja koja se tiu
informacija o radu. Izvan fieldsetova nalazie se polje za unos ifre i dva dugmeta od kojih jedno alje podatke a
drugo resetuje formu u poetno stanje.

Prvo emo kreirati formu:

U browseru je strana prazna jer forma nema sadraj.

Nakon toga unutar forme dodajemo dva fieldseta, jedan e sluiti za polja koja se tiu linih podataka a drugi fieldset
za polja koja se tiu podataka o radu koji uenik dostavlja:

U browseru bi stranica sada trebala da izgleda ovako:

Zatim emo dodati tekstualna polja i labele koje ih opisuju u prvi fieldset koji se tie linih podataka. Labele neemo
objanjavati jer je njihova upotreba oigledna i jedostavna, dok emo za element input samo prikazati osnovnu

48
Primena raunara u elektrotehnici, Web dizajn

sintaksu:
<input type="tip_polja " name="ime_polja" value="vrednost_polja">
Atribut value kod tekstualnih polja nije obavezan jer tekst u polje ionako unosi korisnik osim ukoliko ne elimo da
polje ima predefinisanu vrednost.

Evo kako izgleda kreiranje tri labele i tri tekstualna polja za ime, prezime i temu rada:
Napomena: elementima smo unapred dodelili klase koje emo kasnije koristiti kod stilizovanja forme, klase moete
ukloniti u sluaju da ne radite stilizovanje dokumenta na ovaj nain. Pomeranje elemenata u novi red u tom sluaju
moete lako postii i dodavanjem elementa <br> nakon svakog polja za unos podataka (ovaj metod se inae ne
koristi jer se pozicioniranje elemenata uvek vri kroz CSS stilove).

U browseru dokument izgleda ovako nakon ove izmene:

Dalje emo dva radio dugmeta i naravno labele koje ih opisuju. Obratite panju na to da smo ih grupisali tako to
smo im dodelili isto ime (name) tako da se meusobno iskljuuju:

49
Primena raunara u elektrotehnici, Web dizajn

Dokument u browseru sada izgleda ovako:

Nakon toga prelazimo na drugi fieldset koji se tie podataka o radu. Prvo emo dodati tri ekboksa koji slue za izbor
oblika maturskog rada. Labelama i ekboksovima ponovo unapred dodeljujemo klase koje e se koristiti pri
stilizovanju dokumenta:

Dokument u browseru sada izgleda ovako:

50
Primena raunara u elektrotehnici, Web dizajn

Sada emo dodati padajuu listu koja omoguava izbor predmeta.

Dokument sada izgleda ovako:

Poslednja stavka u ovom fieldsetu je textarea. Ovaj element slui za unos dugakog vielinijskog teksta.

51
Primena raunara u elektrotehnici, Web dizajn

Dokument nakon ove izmene izgleda ovako:

Posle oba fieldseta dodaemo polje za lozinku i dva dugmeta od kojih jedno alje formu a drugo je resetuje. Atribut
action dugmeta Submit je podeen tako da kreira lani e-mail koji e nam omoguiti da pogledamo u kom se obliku
podaci nakon unosa alju na server. Evo poslednjeg dela koda:

...koji u browseru izgleda ovako:

52
Primena raunara u elektrotehnici, Web dizajn

Kompletan HTML kod tela dokumenta na kraju izgleda ovako:

Dok u browseru ceo dokument izgleda ovako:

53
Primena raunara u elektrotehnici, Web dizajn

[CSS deo vebe]


Prepiite stilove koji slede u CSS dokument i nakon svakog dodatog stila, sauvajte CSS fajl i osveite HTML dokument
u browseru da biste uoili nastale promene.

Prelazimo na stilizovanje dokumenta.

1. Bojimo pozadinu tela dokumenta u tamno-sivu boju

2. Podeavamo irinu cele forme na 300 piksela i margine na auto kako bismo centrirali formu unutar body
elementa

3. Fieldsetovima podeavamo pozadinsku boju na svetlo-sivu i iskljuujemo im ivice

4. Legendama podeavamo boju fonta na svetlo-sivu (skoro bela boja) i podeavamo padding donje strane na
20 piksela kako bismo odvojili legendu od samog fieldseta (podiemo je)

5. Labele koje su klase .ceored podeavamo tako plutaju ulevo i irinu podeavamo tako da zauzmu celu irinu
fieldseta u svom redu.

6. Polja za unos teksta koja su klase .tekst podeavamo tako da takoe plutaju ulevo, meutim, kako labele
zauzimaju kompletan prethodni red ova tekstualna polja su prisiljena da se smeste ispod svake labele
pojedinano jer za njih nema mesta u prethodnom redu.
irinu polja podeavamo na 80% irine fieldseta a desnu marginu podeavamo na 20% irine fieldseta kako

54
Primena raunara u elektrotehnici, Web dizajn

bismo postigli takav efekat da tekstualno polje zauzme ceo red ali smo prostor koji zauzima ovaj element
podelili na 80% prostora u korist samog tekstualng polja i 20% smo dodelili njegovoj desnoj margini koja je tu
samo da zauzme prostor do kraja fieldseta i ne dozvoli nekom drugom elementu da se smesti iza tekstualnog
polja ve da tu ostane prazan prostor.

7. Klasi .cek koja je dodeljena svim ekboksovima i njihovim labelama rekli smo da plutaju ulevo i dodelili desnu
marginu irine 10 piksela svima da bismo ih meusobno razdvojili.
Takoe smo svima dodelili i marginu na dnu irine 10 piksela kako bismo napravili malo prostora izmeu
ekboksova i elemenata koji slede posle njih.

8. Elementu select, odnosno padajuoj listi smo irinu podesili na kompletnu irinu fieldseta tako da ona
zauzima ceo red.
Njena labela se sama smeta u prostor izmeu ekboksova i padajue liste poto se u HTML dokumentu
strukturno nalazi pre padajue liste (odnosno iznad nje).

9. Elementu textarea podeavamo irinu na 100% irine fieldseta u kome se nalazi i visinu na 100 piksela.

10. Identifikatoru #labela koji pripada labeli koja stoji uz polje za unos ifre smo dodelili boju teksta #DDDDDD
(svetlo-siva).

55
Primena raunara u elektrotehnici, Web dizajn

11. Identifikatoru #lozinka koji je dodeljen polju za unos ifre smo podesili irinu na 118 piksela metodom
pokuaja i pogreaka kako bi se polje najbolje uklopilo u formu.

12. Dugmad sama okupiraju preostali prostor u redu u kome se nalaze.

Kompletan CSS dokument na kraju izgleda ovako:

56
Primena raunara u elektrotehnici, Web dizajn

Dokument nakon stilizovanja u browseru izgleda kao na slici (dokument je centriran, nalazi se na sredini tela
dokumenta tj. sredini strane):

Napomena: u pregledau Internet Exploreru e forma izgledati malo drugaije, smanjiti width na 100px za #lozinka
identifikator. Isto vai i za Mozilla Firefox.

57
Primena raunara u elektrotehnici, Web dizajn

Frejmovi u HTML-u
Kao i uvek pre svega napravite kopiju fajla "Vezba01.html" i nazovite ga "Vezba08.html" kako ne biste morali da
iznova piete kostur HTML dokumenta za ovu vebu. Takoe kreirajte jedan prazan CSS dokument pod nazivom
"stil08.css" koji emo koristiti za stilizovanje dokumenta na kome budemo radili u ovoj vebi. Odmah linkujte HTML
dokument sa CSS dokumentom korienjem elementa link.

[HTML deo vebe]


Frejmovi se u HTML-u koriste za uitavanje drugih HTML strana unutar postojee strane. Za kreiranje frejmova koristi
se element <iframe>...</iframe> pri emu se u atribut src smeta lokacija HTML dokumenta koji elimo da uitamo a
izmeu tagova se smeta alternativni sadraj koji se prikazuje u sluaju da element iframe nije podran od strane
browsera. Napraviemo jedan prost primer sa dva frejma od kojih jedan uitava stranu koju smo sami napravili u
prethodnoj vebi a drugi uitava (ukoliko je prisutna Internet konekcija) poetnu stranu sajta W3Schools.

HTML dokument izgleda ovako:

58
Primena raunara u elektrotehnici, Web dizajn

U browseru izgleda ovako:

[CSS deo vebe]


A CSS dokument kojim smo podesili irinu i visinu frejmova i uklonili ivice prvog frejma izgleda ovako:

59
Primena raunara u elektrotehnici, Web dizajn

U browseru dokument nakon stilizovanja izgleda ovako:

Prekucajte HTML dokument, sauvajte ga i otvorite u browseru da biste videli kako izgleda bez stilova.
Zatim prekucajte i CSS stilove, sauvajte dokument i ponovo uitajte HTML dokument u browser da vidite kako
izgleda sa stilovima.

60
Primena raunara u elektrotehnici, Web dizajn

Upotreba WYSIWYG alata za izradu Web sajtova


Za izradu Web sajtova se takoe jako esto upotrebljavaju WYSIWYG - What You See Is What You Get alati koji
omoguavaju vizuelno dizajniranje sajtova u grafikom okruenju bez pisanja koda gde program vri svo prevoenje
vizuelnog dizajna u HTML/CSS/JS kod. Dizajniranje sajta se vri ubacivanjem potrebnih elemenata na stranu kroz
intuitivni grafiki interfejs, a vizuelni dizajn i funkcionalni i vizuelni atributi su isto tako lako dostupni i menjaju se kroz
interfejs programa. Prednost kodiranja sajtova direktnom upotrebom HTML i CSS tehnologija je daleko vea kontrola
nad izgledom i sadrajem u odnosu na upotrebu WYSIWYG alata. ak i ako se dizajner odlui za upotrebu nekog od
ovih alata poznavanje spomenutih jezika je apsolutni imperativ jer je praktino uvek neophodno zaviriti u kod kada
doe do problema pri dizajniranju sajta.

NAPOMENA: Veba koja sledi preuzeta je sa sajta Elektronskog fakulteta u Niu (laboratorijska veba iz predmeta
Uvod u raunarstvo, autor Mr Bratislav Predi), i predviena je za rad kod kue. Ova veba nije predviena za
tampanje i mogue joj je pristupiti samo elektronski i to duplim klikom na ikonicu ispod ovog pasusa.

Adobe
Dreamweaver.doc

61
Primena raunara u elektrotehnici, Web dizajn

Sistemi za upravljanje sadrajem - CMS


CMS ili Content Managment System predstavlja softver koji omoguava lak razvoj, kreiranje i odravanje Web sajtova
bez poznavanja bilo koje od Web tehnologija koje se koriste u razvijanju sajtova i aplikacija. CMS-ovi su najee
pisani u nekom od popularnih skripting jezika kao to su PHP i Perl to automatski znai da se oni izvravaju na
serveru. Najpribliniji opis CMS-ova bi bio da su oni samoodrivi Web sajtovi za iju izradu i odravanje nije potreban
neki poseban nivo naprednog znanja.

to se tie popularnijih CMS-ova tu su Joomla, WordPress, Drupal, DotNetNuke, TinyCMS i mnogi drugi.

Kako ovi sistemi predstavljaju velike i kompleksne Web aplikacije mi emo se pozabaviti samo instalacijom i
osnovnom konfiguracijom jednog od njih a to je WordPress.

Instalacija WordPressa
WordPress je trenutno najpopularniji CMS na tritu, koristi open-source licencu, ima ogromnu zajednicu, veliki broj
tema i dodataka i konstantno napreduje. Pogodan je za kreiranje blogova i manjih do srednjih Web sajtova mada se
uz prilagoavanje moe koristiti za virtuelno bilo kakav Web sajt.

Za poetak poterbno je iznajmiti hosting prostor i domen. U ovoj vebi mi smo radi demonstracije kreirali sopstveni
Web server sa PHP-om kao skripting jezikom (u kome je WP napisan) i MySQL-om kao sistemom za upravljanje
bazama podataka. Kada zakupite hosting dobiete korisniko ime i ifru za pristup fajlovima na serveru preko FTP
protokola i korisniko ime i ifru za pristup vaoj bazi podataka kao i ime baze podataka. U datom primeru mi smo
sami kreirali bazu i korisniko ime i ifru za pristup istoj no to nije predmet ove vebe.

Pre svega je potrebno preuzeti najnoviji WordPress sa zvaninog Web sajta ovog CMS-a: http://wordpress.org/

Nakon to preuzmete arhivu potrebno je raspakovati i postaviti na Web server putem FTP transfera fajlova. Sajt se
na Web server (u ovom sluaju na sajt je WP a ne neto to smo sami napravili) postavlja u folder koji se najee
zove "public_html", "www" ili "htdocs". Ovi folderi su jedini dostupni javnosti odnosno to su jedini folderi kome
posetioci imaju pristup. Poetna strana sajta najee ima naziv "index.html" ili "index.php". Evo kako izgleda
raspakovana instalacija WP-a u folderu "htdocs" na naem serveru:

62
Primena raunara u elektrotehnici, Web dizajn

Nakon to smo postavili fajlove na server dovoljno je da pristupimo domenu naeg Web sajta sa bilo koje lokacije da
bismo zapoeli instalaciju. Nakon to pristupimo naem sajtu (u konkretnom primeru smo koristili IP adresu a ne
domen jer je ova veba raena u lokalnoj mrei a ne na Internetu) doekuje nas ovakva poetna strana koja nas
informie da konfiguracioni fajl WP-a nije pronaen i da moemo krenuti sa instalacijom:

63
Primena raunara u elektrotehnici, Web dizajn

Nakon klika na dugme "Create a configuration file" doekuje nas prvi ekran gde poinje instalacija WordPressa.
Dovoljno je kliknuti "Let's Go!" za nastavak instalacije:

Na sledeem ekranu potrebno je uneti ime baze podataka, korisniko ime za pristup istoj, ifru, server na kome se
nalazi baza (localhost je podrazumevano i najee podeavanje) dok zadnje polje ne treba dirati osim ako ne
instaliramo WP vie puta i sve instalacije koriste istu bazu podataka.

64
Primena raunara u elektrotehnici, Web dizajn

Sledei ekran nas obavetava da smo proli kroz osnovnu konfiguraciju i da je sada potrebno instalirati WordPress.
Kliknuemo na dugme "Run the install":

65
Primena raunara u elektrotehnici, Web dizajn

Ovde je potrebno uneti naziv Web sajta i korisniko ime i ifru koje elimo da dodelimo administratorskom nalogu
(ono nema veze sa korisnikim imenom za na hosting). Takoe treba uneti e-mail adresu za administratora. tiklirati
poslednje polje jer ono omoguava da pretraivai indeksiraju na Web sajt.

Sledei ekran predstavlja zavretak instalacije i dovoljno je kliknuti "Log in" kako bismo dobili pristup naem Web
sajtu i poeli da dodajemo sadraj.

66
Primena raunara u elektrotehnici, Web dizajn

67
Primena raunara u elektrotehnici, Web dizajn

Nakon logovanja doekuje nas interfejs administratorskog panela koji omoguava menadment Web sajta. Pored
ovog administratorskog naloga mogue je kreirati naloge za obine korisnike koji mogu da dodaju sadraj na sajt ali
ne mogu da menjaju formu i strukturu sajta.

Sledei skrinot predstavlja deo konfiguracionog panela koji omoguava modifikovanje vizuelnih elemenata sajta.

Sledei skrinot pokazuje mogunost promene vizuelne teme Web sajta.

68
Primena raunara u elektrotehnici, Web dizajn

Sledei skrinot prikazuje mogunost dodavanja i uklanjanja widgeta na Web sajtu:

69
Primena raunara u elektrotehnici, Web dizajn

Skrinot ispod prikazuje formu za unos sadraja na sajt odnosno kreiranje tzv. postova:

Evo kako izgleda na sajt nakon izmene teme u temu "Responsive" i dodavanja jednog posta na sajt:

70
Primena raunara u elektrotehnici, Web dizajn

Koriena literatura
1. Josh Hill, James A. Brannen: Briljantno HTML5 i CSS3, CET Computer Equipment and Trade, Beograd, 2011.

2. Web sajt: http://www.w3schools.com/

3. Razni izvori informacija irom Interneta

71

You might also like