Professional Documents
Culture Documents
1
Spisak svih gTLD domena možete nači na http://en.wikipedia.org/wiki/List_of_Internet_top-
level_domains
Klaster akademija HTML5 + CSS3 za početnike|6
Kada počnete da tražite ime domena, napravite listu interesantnih domena i
sužavajte izbor dok ne dođete do pravog rešenja. Ukoliko pokrećete prodajni sajt, u
imenu je poželjno da postoji nešto vezano za elektronsku trgovinu, prodaju ili kupovinu –
pravi primer je sajt kupujemprodajem.com koji je prodajni sajt oglasnog tipa.
Ukoliko je ime jednostavno, kratko i jedinstveno, ostaje vam samo da bude efikasno
i u pogledu pisanja – izbegavajte slova "q," "z," "x," "c," i "p", ali u našem srpskom jeziku,
prinuđeni smo da izbegavamo i tzv. Vukova slova, osim kada je reč o .срб domenu.
Imena brendova, kompanija, zaštićenih robnih marki – savetujemo da izbegavate
prilikom zakupa domena jer ćete sebi doneti više štete nego koristi. Iako je kod nas
pravna država prespora, ukoliko Vas vlasnik tuži, gotovo sigurno ćete izgubiti spor.
Domen kao ime brenda je dobitna kombinacija koja se preporučuje u svim
slučajevima – brendirate svoj proizvod, a samim tim Vaš domen postaje moćna alatka u
celokupnom procesu brendiranja proizvoda.
Hosting
Hosting je servis ili usluga koju plaćate Vašem hosting provajderu, a za uzvrat
dobijate određeni prostor na njegovom kompjuteru (serveru). Da bi Vaš sajt bio na
internetu, kompjuter gde se vaš web sajt nalazi (server) mora biti stalno povezan sa
internetom. Hosting provajderi poseduju velike i moćne servere koji hostuju Vaš sajt i
obezbeđuju da on bude non stop online, odnosno vidljiv.
Prva stvar koju trebate da uradite kada imate plaćen domen i hosting jeste da
domen povežete sa hostingom. Ovo nije nešto što ćete morati sami ručno da radite, jer
za potrebne svojih klijenata sve firme koje se bave registracijom domena će odraditi taj
posao.
Prilikom odabira hostinga najbitnije je opredeliti se za pravi hosting paket. Najčešće
je tu reč o manjim hosting paketima na jednom zajedničkom serveru, gde se pored vašeg
nalazi još nekoliko stotina ili hiljada sajtova. U ovom slučaju Vi dobijate odredjeni prostor
na serveru sa ograničenim resursima koje delite sa ostalim korisnicima. Cene za ovakve
pakete se najčešće kreću od 20-50 evra pa naviše, na godišnjem nivou.
Za nešto ozbiljnije sajtove obično se koriste virtualni serveri (VPS). Ovo je jedan
odvojeni deo servera gde su Vam unapred definisani resursi kojima raspolažete
(procesor, memorija, prostor na disku, mesečni protok). Za najzahtevnije korisnike u
ponudi su root (dedicated) serveri, gde korisnik ima čitavu mašinu na raspolaganju samo
za svoje potrebe. Kod velikih portala neretko se srećemo i sa nekoliko povezanih servera
koji opslužuju jedan web sajt.
<p> predstavlja otvarajući tag paragrafa, dok je </p> zatvarajući tag istog paragrafa.
Otvarajući i zatvarajući tagovi se razlikuju po tome što zatvarajući imaju znak / ispred
imena taga. Primeri tagova su još i <div>...</div>, <h1>...</h1>, <span>...</span>...
HTML elementi mogu se “usađivati” jedan u drugi i pri tome se mora voditi računa
redosledu zatvaranja elemenata. Primer:
Pravilno:
<div><p>Ovo je paragraf unutar div elementa</p></div>
Nepravilno:
<div><p>Ovo je paragraf unutar div elementa</div></p>
Kao što vidite kada se jedan element nalazi unutar drugog, treba da bude upisan
unutar istog kompletno, zajedno sa zatvarajućim tagom. To znači da se elementi
zatvaraju suprotnim redosledom od redosleda otvaranja.
Otvarajući i zatvarajući tagovi ne moraju da stoje u istom redu i broj praznih
redova između tagova i unutar tagova nema nikakvog efekta na izgled web stranice. Na
primer:
Je isto što i:
<p>Ovo je paragraf</p>
Otvarajući i zatvarajući tagovi u sebi mogu da sadrže druge elemente ili sadržaj, dok
samozatvarajući tagovi to ne mogu, i definišu se atributima.
Komentari se pišu u okviru <!-- i --> oznaka:
<!--Ovo je komentar, a komentari neće biti prikazani u browser-u. -->
Osnovni tagovi
html - Kreira HTML dokument
head - Deo u kojem se nalaze naslov stranice i ostale informacije koje nisu vidljive
na samoj stranici
body - Glavni deo stranice, koji je vidljiv korisniku i u kome se nalazi sam sadržaj
h1, h2, h3, h4, h5, h6 - Tagovi za definisanje naslova, od najvećeg do najmanjeg
p - Paragraf teksta
div - Deli stranicu na različite sekcije/blokove
br - Pravi red razmaka u tekstualnom bloku
hr - Kreira horizontalnu liniju koja se najčešće koristi za vizuelno razdvajanje delova
sadržaja
blockquote - Koristi se za citiranje teksta, sa atributom za navođenje autora
Head tagovi
title - Definiše naslov stranice
meta - Sadrži osnovne informacije o stranici (ključne reči, opis i sl.)
link - Povezuje stranicu sa drugim dokumentima (CSS fajl, fav ikonica)
script - Sadrži (ili povezuje sa fajlom koji sadrži) skripte koje se izvršavaju na
klijentskoj strani
Klaster akademija HTML5 + CSS3 za početnike|12
style - Sadrži stilove koji opisuju izgled HTML elemenata. Ovo je ranije bio standard,
ali se sada stil definiše u zasebnom CSS fajlu.
Liste
ol - Uređena lista (lista sadrži numeričko ili alfabetsko obeležavanje elemenata liste)
ul - Neuređena lista (obeležavanje elemenata liste se vrši simbolima kao što je
tačka, kvadratić...)
li - Element liste
Elementi forme
form - Definiše formu, koja sadrži ulazne elemente i kontrole
fieldset - Grupiše elemente forme
legend - Definiše naslov elemenata grupisanih u fieldset
button - Definiše dugme (klikabilni element)
input - Definiše ulazni element u koji se unose informacije (tekst, email, šifra...)
textarea - Višelinijski ulazni element za unos teksta (npr. za unos komentara)
select - Lista za selektovanje stavki (jedne ili više)
option - Definiše stavku unutar select liste
label - Služi za opis elementa forme (npr. naziv pored email polja)
Elementi tabela
Tabele su se ranije koristile za pravljenje strukture same stranice, što je odavno
prevaziđeno i nije validno prema standardima HTML-a, ali se tabele još uvek koriste za
tabelarni prikaz nekog teksta (lager-liste i sl.).
table - Definiše blok tabelarnog prikaza, odnosno tabelu
tbody - Služi za logično grupisanje elemenata koji pripadaju glavnom delu (body)
thead - Služi za logično grupisanje elemenata koji pripadaju zaglavlju (header)
th - Definiše ćeliju zaglavlja (header-a) tabele
tr - Definiše red u okviru tabele
td - Definiše običnu ćeliju u okviru tabele
caption - Definiše naslov tabele
col - Definiše kolonu u okviru tabele
colgroup - Definiše grupu kolona u okviru tabele
tfoot - Služi za logično grupisanje elemenata koji pripadaju donjem delu (footer)
Atributi
Tagovi mogu imati atribute, koji im dodeljuju dodatne vrednosti, pišu se u prvom
delu, odnosno nakon što je tag otvoren i sastavljeni su iz dva dela - naziv="vrednost".
Lista nekoliko bitnih atributa:
id - Jedinstveni identifikator elementa
class - Dodeljuje elementu jednu ili više podklasa
title - Definiše naziv elementa
alt - Služi za definisanje alternativnog teksta (npr. ako se slika ne učita prikaže se alt)
href - Definiše sa kojim dokumentom je link povezan
src - Određuje izvor slike, tj. putanju do nje
style - Definiše umetnute (inline) stilove elementa
Spisak svih HTML tagova (HTML Element Reference) možete pronaći na adresi
http://www.w3schools.com/tags/default.asp
Klaster akademija HTML5 + CSS3 za početnike|14
Uvod u CSS
CSS (engl. Cascading Style Sheets) je jezik formatiranja
pomoću kog se definiše izgled elemenata web sajta, fontova,
boja razmaka između paragrafa, uređivanje tabela. Prvobitno,
HTML je služio da definiše kompletan izgled, strukturu i
sadržaj web sajta, ali je od verzije 4.0 HTML-a uveden CSS koji
bi definisao konkretan izgled, dok je HTML ostao u funkciji
definisanja strukture i sadržaja.
Svojim dolaskom CSS je izazvao pravu revoluciju na
internetu i to zahvaljujući nizu prednosti koje ima pred
tabličnim layoutom. Korištenjem CSS-a postalo je moguće odvojiti prezentaciju i podatke
na istoj, od samog dizajna. U ovom slučaju HTML kod postaje pregledniji i manji što znači
da ga je puno lakše kontrolisati, a takođe je moguće jednostavnom promenom
parametara u stilu promeniti izgled stranice bez izmene HTML koda.
Mogućnosti formatiranja HTML-a poprilično su ograničene. Kada dizajniramo web
sajt u HTML, ograničeni smo na tabele, kontrola fontova, i nekoliko stilova teksta poput
bold i italic. Sa CSS možemo:
• bolja kontrola layout-a
• razdvajanje sadržaja i formatiranja
• omogućava kreiranje “lakših” stranica – brže se učitavaju
• održavanje i ažuriranje više stranica istovremeno
• Daje browseru instrukcije za kontrolu izgleda stranice
Sintaksa u CSS se sastoji od opisa izgleda elemenata u dokumentu. Opis može da
definiše izgled više elemenata, i više opisa može da definiše jedan element. Na taj način
se opisi slažu jedan preko drugog da bi definisali konačni izgled određenog elementa
(otuda naziv Cascading (engl. cascade) da bi se dočaralo slaganje jednog stila preko
drugog u definisanju konačnog izgleda elementa)
Svaki opis se sastoji od tri elementa:
• Naziv ciljanog elenemta
• Svojstvo ciljanih elemenata
• Vrednosti ciljanih elemenata
Nakon što definišemo ciljne elemente, tj. elemente na koje će se trenutni opis
odnositi, nizom parova svojstvo-vrednost definišemo izgled svakog ciljnog elementa.
Sintaksa koja se pri tome definiše je sledećeg oblika:
Ciljni elementi
Ciljni elementi se definišu na tri načina:
• navodeći HTML tag ciljnih elemenata
• navodeći klasu elemenata
• navodeći identifikacionu vrednost (ID) elementa
Kada definišemo preko HTML taga, to znači da će opis uticati na sve elemente u
dokumentu koji imaju ovaj tag. Definicija ciljnih elemenata se tada vrši preko direktnog
upisa odgovarajućeg HTML taga:
body { background: #f5f5f5;font-size: 13px !important;... }
Klasa HTML elementa je reč koju stavimo kao vrednost argumenta CLASS pri
definiciji tog elementa. Definicija ciljnih elemenata (svih koji imaju određenu istu klasu) se
vrši tako što upišemo znak tačke (.) a zatim naziv klase:
.imeKlase { border: 1px solid #c5c5c5;box-sizing: border-box;... }
Ovaj opis će, dakle, imati uticaja na sve elemente u dokumentu koji su definisani na
sledeći način:
<p class="imeKlase">...</p>
<div class="imeKlase">...</p>
Ovaj će, dakle, opis uticati na sve elemente koji u svojoj HTML definiciji imaju
id="idVrednost".
Brojevne vrednosti
Brojevne vrednosti se mogu zadavati na nekoliko načina:
• zadajući samo brojevnu vrednost
• navodeći i jedinicu veličine skupa sa opisom
px – pikseli,
Poravnanje teksta
vertical-align (top, bottom, middle, ...)
text-align – poravnanje teksta (left, right, center, justify)
text-indent – koliko je prvi red paragrafa uvučen
line-height – vertikalna udaljenost između dvije linije
Svojstva teksta
word-spacing – razmak između riječi (normal ili konkretna vrednost),
letter-spacing – razmak između slova (normal ili konkretna vrednost),
white-space – kako da prikazuje više uzastopnih razmaka (normal, pre)
text-transform – transformacija teksta (none, capitalize (prvo slovo veliko),
uppercase, lowercase)
text-decoration – dekoracija teksta (none, underline, overline, line-through, blink)
Pozicioniranje elemenata
position – određuje poziciju elementa (static, absolute, relative, fixed)
static – element se iscrtava zajedno sa ostatkom HTML stranice i ne može da se
pomera
absolute – pozicionira se na fiksnu poziciju određenu atributima top i left
relative – relativna pozicija u odnosu na normalno sračunatu poziciju u odnosu na
ostatak HTML stranice
fixed – kao apsolutno pozicioniranje, samo što se sadržaj ne skroluje sa stranicom.
Pozicija/veličina elementa
margin-top, margin-bottom, margin-left, margin-right – podešavanja margina
elementa (konkretna vrednost ili procenat),
float – određuje sa koje strane će se tekst prelamati oko elementa (none, left, right)
clear – navodi se sa koje strane u odnosu na element su dozvoljeni floating
elementi (none, left, right, both)
Oni su ugrađeni (embedded) stilovi u samu HTML stranu. Koristi se tag style unutar
<head> sekcije. Tako definisan stil se odnosi na sve elemente koji su navedeni u stilu.
<head>
<style type=“text/css”>
h1, h2 {color:blue; text-align: center}
p {color:red}
</style>
</head>
Početna strana se uvek zove index, a pored .html može biti i neka druga
ekstenzija, npr .php, .htm, .xhtml...
Treba voditi računa o tagovima, i obavezno zatvoriti svaki tag
Sve što se nalazi unutar neke oznake poprima svojstva određena tom oznakom.
Nije bitno pišemo li HTML tagove i atribute velikim ili malim slovima, svakako je
preporučljivo je pisati sve malim slovima.
Vrednosti atributa poželjno je pisati pod navodnicima.
Kod cele stranice možemo pisati i u jednom jedinom redu, nižući oznake jednu
iza druge. No, bolje je pisati ih tako da kod bude što pregledniji, jer ćemo se
sigurno kasnije morati na njega vratiti i ponešto izmeniti.
Razmaci i prelomi reda (nov red) napisani u editoru ne vide se na web stranici
prikazanoj u pretraživaču. To važi i za tekst koji će biti prikazan na stranici
Nakon što završimo web sajt, predlažem da odradite i validaciju koda, kako bi
eventualno u slučaju neke greške u pisanju istu otklonili
I za kraj nešto nevezano za sam HTML – imena HTML dokumenata moraju
sadržati isključivo znakove engleske abecede i ne smeju u svom nazivu imati
sistemske znakove (*, ?, /, : i sl.), a preporučljivo je izbegavati i razmake u imenima
dokumenata. Umesto razmaka upotrebljavajte znakove – ili _ kao npr.
moja_stranica.html, o-nama.htm
Pre svega definišemo doctype, koji jasno govori o kojoj verziji HTML-a je reč, za
HTML5 to je <!DOCTYPE html>, a zatim toga i jezik na kome je sajt uradjen, <html
lang="sr">.
Sve ostalo, sav sadržaj koji se prikazuje na stranici, smeštamo u telo <body>
dokumenta.
Preporuka je da sve CSS stilove čuvate u zasebnom folderu, npr css, slike u images,
a sve skriptove u folder js, ili kako je Vama lakše da ih nazovete.
Web sajt, koji ćemo napraviti će imati podršku i za mobilne uredjaje, takozvani
responsive dizajn, pa će naš budući web izgledati kao na slici koja se nalazi na sledećoj
strani.
Kao što možete videti na slici, naš web sajt se sastoji od nekoliko ključnih celina:
top – sam vrh sajta, koji ćemo koristiti u mobilnim verzijama za prikaz menija
i logotipa. Na desktop verzijama je to samo jedna tamna linija na vrhu
header – sadrži logo web sajta, ikonice za socijalne mreže i navigaciju web
sajta. Na mobilnim verzijama, rezolucije ispod 960px, meni i logo se
prebacuju u top
main – centralni deo sajta, u kome se nalazi i kompletan sadržaj
footer – dno sajta sa Copyright informacijama, i linkom za povratak na
početak.
<!doctype html>
<html lang="sr">
<head>
<title>ICT-CS Klaster akademija</title>
<link rel="stylesheet" type="text/css" href="css/style.css" /></head>
<body>
<div id="top">
Ove ide sadržaj top dela
</div>
<header>
Ovde ide logo, ikone za socijalne mreže i navigacija
</header>
<div id="main">
Ovde unosimo sadržaj sajta, koji će se menjati od strane do strane
</div>
<footer>
Mesto za Copyright informacije
</footer>
</body>
</html>
<!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Normalize.css je HTML5 ready alternativa CSS reset fajlu, koji se ranije koristio.
Normalize.css Vam pomaže da browseri prikažu sve elemente u skladu sa savremenim
standardima, i da razlika izmedju browsera bude svedena na minimum, tako što cilja
samo stilove koje treba normalizuje.
Osnovne statistike
Odakle Vaši posetioci dolaze?
Koliko posetilaca se vratilo na sajt, a koliko ih je došlo po prvi put?
Koje stranice posetioci najčešće posećuju na Vašem sajtu?
Kretanje posetilaca kroz Vaš sajt
Praćenje poseta na sajtu u realnom vremenu
Da bi u potpunosti završili sa definisanjem <head> taga, ostaje nam još par stvari,
definisanje favicon ikone i meta tagova.
Ovde imamo 4 osnovna meta taga, koje svaka strana treba da sadrži, a to su:
description – Definiše opis web stranice. Dužina opisa bi trebalo da bude do 160
karakatera
keywords – Definiše ključne reči. Ne treba unostiti više od deset ključnih reči
Pisanje teksta u HTML-u slično je pisanju teksta u Wordu. Svaki napisani odlomak
morate definisati početnim tagom <p> i završnim tagom </p>
Tag <p> označava početak odlomka. Unutar odlomka možete koristiti ostale tagove
kao što su
Ako želite unutar odlomka prelomiti tekst koristite tag <br /> (break line). Ovaj tag
nema svoj završni tag već je samostalan. Kada koristite tag <br />, on ne opisuje tekst
zato i nema završni tag. Ako linija teksta dođe do kraja prozora u browseru, sledeća reč
automatski počinje u novoj liniji. No, ako želimo sami odrediti gde će linija biti prekinuta
potrebno je koristiti break line, tag <br />.
Razlika između break line i paragrafa je u tome što break line ne korist specijano
formatiranje koje možemo dodati na početak ili kraj paragrafa, poput:
Veoma važno!!!
Font će se videti samo ako posmatrač ima taj font instaliran na svom računaru!
Ukoliko to nije slučaj, tekst će biti predstavljen podrazumevanim fontom. Zato pažljivo sa
fontovima! Da bi se ovo delimično prevazišlo, možete navesti više od jednog fonta:
Objašnjenje: Browser prvo traži font ARIAL. Ako ga nađe, koristi ga. Ako ne, onda
traži sledeći navedeni font – HELVETICA. Ako ga ne nađe, tražiće VERDANA. Ako na kraju
ne nađe ni taj font, onda će koristiti podrazumevani font.
Takodje, možete koristiti i Google Fonts, a web sajtovi koji koriste ove fontove su
lepši, čitljiviji i pristupačaniji.
Google Fonts omogućava da brzo i lako da svako koristi web fontove, uključujući i
profesionalne dizajnere i programere. Oni omogućavaju da svako ima isti kvalitet
tipografije na njihovim web sajtovima i aplikacijama. Glavni cilj je bio da se stvori
direktorijum web fontova za sve. Goolge API servis olakšava da dodate Google fontove na
sajtu u sekundi. Google pruža ovu uslugu besplatno.
Naslovi (Headings)
Naslovi su jako bitni. Posebno su bitni kod indeksiranja web sajtova od strane
Google-a i ostalih web pretraživača. Ne treba ih koristiti za ostali tekst kako bi, recimo,
bio veći ili podebljan, već samo za naslove. Naslovi razbijaju dokument u celine. Naslovi:
<h1> naslov ima font najveće veličine koji se smanjunje na svakom sedećem (h2,
h3…), dok
<h6> ima najmanji font. Veličina fonta i njihovo formatiranje se definiše u CSS stilu.
Liste (Lists)
Liste služe za organizaciju sličnih elemenata. Omogućavaju korisniku lakši pregled
informacija.
Listu s brojevima koristimo kada želimo nabrojati neke informacije. Za kreiranje liste
koristimo dve vrste elemenata: <ol> i <li>
Kreiranje liste započinjemo tagom <ol> koji označava da se radi o listi s brojevima.
Informacije pišemo unutar početnog <li> i završnog </li> taga. Na kraju sve zatvaramo
završnim </ol> tagom.
Dva različita atributa kontrolišu prikaz liste s brojevima. Atribut start definiše
početni broj u listi, a atribut type definiše stil liste s brojevima.
1: decimalni brojevi
a: mala slova
A: velika slova
i: rimska numeracija malim slovima
Lista s oznakama sastoji se od jedne ili više stavki od kojih svaka počinje nekom
oznakom (najčešće tačkom). Ovakav tip liste koristi se ako redosled po kojem su izlistane
stavke nije neophodan za razumevanje informacija koje se prikazuju.
Možemo koristiti atribut type kako bi odredili vrstu oznake koju želimo da lista
koristi.
URL (eng. Uniform Resource Locator) je standardni način adresiranja. Svaka stranica
ili neka datoteka ima svoj jedinstveni URL. Svaki Internet resurs, bila to stranica ili slika,
ima svoj URL. Ako je samo jedan znak u URL-u pogrešan, to može rezultirati neispravnim
linkom. Neispravni linkovi vode na stranicu greške (HTTP error 404 File or directory not
found). Ako vam URL ne radi, pokušajte sledeće:
Proverite velika i mala slova (neki web serveri su case sensitive, što znači da
razlikuju velika i mala slova).
Proverite ekstenziju (ako URL vašeg linka koristi link.htm, a pravo ime datoteke je
link.html, link neće raditi).
Proverite ime datoteke.
Koristite copy-paste (izbegavajte pisanje URL-a ako ga možete direktno kopirati).
URL radi slično kao Vaša poštanska adresa, i sastoji se od sledećih elemenata:
Protokol http:// - Definiše protokol pomoću kojeg web browser Internet stranicu
Domen http://www.ict-cs.org - Pokazuje na Internet stranicu gde se nalazi
datoteka koju želimo naći
Putanja http://www.ict-cs.org/images - Imenuje putanju (listu foldera) kroz koje
morate proći kako bi došli do željene datoteke
Ime datoteke http://www.ict-cs.org/images/logo.png - ime datoteke kojoj web
browser treba pristupiti
apsolutni linkovi
relativni linkovi
Apsolutni likovi
Relativni linkovi
Word dokumenta
Excel dokumenta
PDF-ove
Arhive (zip, rar, 7zip...)
Multimediju (slike, klipove, mp3 fajlove)
Takvim datotekama možemo pristupiti preko interneta. One poseduju svoj URL. Bilo
koja datoteka na Internet stranici (bez obzira na tip datoteke) može se linkovati direktno
preko URL-a. Ako želimo omogućiti korisnicima da preuzmu PDF, DOC, ZIP datoteku to
ćemo uraditi sledećim kodom:
Link na e-mail adresu može automatski otvoriti novi e-mail upućen željenoj osobi.
Ovo je odličan način kako pomoći korisnicima da Vam pošalju e-mail s komentarima i
željama.
Slike
Slike se koriste kako bi korisnicima preneli korisne informacije, za navigaciju
stranice, kao i da bi poboljšali opšti izgled stranice. Kada se slike pažljivo i ispravno
koriste, one stranici daju vizuelno bolji izgled, no ako se ne koriste u skaldu sa pravilima,
mogu stranicu učiniti nečitljivom i teškom za učitavanje.
Slike se mogu kreirati i sačuvati u mnogo različitih formata, ali svega nekoliko njih je
stvarno prikladno za slike koje nameravamo staviti na Internet i koje su kompatibilne sa
svim browserima i operativnim sistemima:
Graphics Interchange Format (GIF) – gif slike manje su od slika ostalih formata,
podržavaju samo do 256 boja i pogodne su za jednostavnije slike, ili jednostavne
animacije
Joint Photographic Experts Group (JPEG) – jpeg slike podržavaju 24 bitne boje i
kompleksne slike, poput fotografija
Portable Network Graphics (PNG) – najnoviji format razvijen da donese najbolje iz
gif- i jpeg-a. PNG ima iste kompresijske mogućnosti kao i gif, ali podržava 24 bitne i
32 bitne boje. PNG slike mogu biti i transparentne.
Alternativni tekst opisuje sliku tako da oni koji je iz nekog razloga ne mogu videti,
vide tekst koji opisuje sliku. Ovaj atribut je koristan ukoliko se slika zbog spore veze nije
prikazala ili više ne postoji na serveru. Alt tag je takodje obavezan kako bi se uspešno
prošla validacija koda.
Kada je reč o veličini slike možemo koristiti atribute height i width u okviru <img>
taga ili u CSS stilu kako bi browser znao koliko je slika visoka i široka. Kada definišemo
visinu i širinu slike koja se razlikuje od stvarnih dimenzija slike, web browser ih sam
Tabele
Tabele služe kako bi podatke rasporedili u mrežu i učinili njihovu analizu
jednostavnijom. U HTML-u one mogu imati ulogu kontrole rasporeda podataka na
stranici, medjutim sada je standard da se sve to radi bez tabela, već preko <div> tagova.
U tabele se može staviti tekst, slika, link...
Granice: svaka osnovna tabela mora imati 4 granične linije (zida) koje čine
pravougaonik
Ćelije: prostor unutar 4 granične linije
Raspon ćelija: Unutar 4 linije koje okružuju ćeliju, možemo brisati ili dodavati
zidove ćelije
Tabela <table>
Red u tabeli: <tr>, koji je uvek unutar <table>
Ćelija tabele: <td>, koja je uvek unutar <tr>
Tag <table> i njegov kod nalaze se između <body> tagova u dokumentu. Medjutim
možemo ih koristiti izmedju većine blok elemenata, kao i između <td> i <th> tagova za
ugnježdenje tabela.
Ako u jednoj ćeliji želimo imati više redova ili kolona, treba dodati atribut koji će web
browseru govoriti u kojoj ćeliji će se granjanje događati. Broj u atributu odgovara broju
redova ili kolona koje želimo da ćelija prikazuje. To se zove premošćavanje. Za
premošćivanje ćelija koristimo sledeće atribute:
Entiteti
Tekst neke internet stranice ima svoje granice, a entiteti kao posebni ne ASCII
znakovi omogućavaju prikazivanje posebnih znakova. To su najčešće simboli. Svaki
entitet počinje sa (&) i završava se sa (;).
Svaki entitet može biti napisan uz pomoć svog naziva ili broja: &naziv_entiteta; ili
&#broj_entiteta; Npr za razmak izmedju dva karaktera koristimo „non braking space“, a
on se unosi kao
Basic American Standard Code for Information Interchange (ASCII) tekst definiše
relativno mali broj znakova. U svojoj definiciji ne uključuje posebne znakove, poput
recimo trademark simbola, razlomaka i sl.
Ako želimo napisati znakove koji nisu podržani (možemo ih pronaći u ASCII1 tabeli),
HTML mora koristiti entitete kako bi prikazao takve znakove. Web browser u tom slučaju
zameni entitet s odgovarajućim znakom na koji entitet pokazuje. Svaki entitet počine
znakom "&" i završava se znakom ";".
Osnovnu strukturu HTML dokumenta smo već definisali, ostaje nam da definišemo i
osnovu CSS-a, i da krenemo dalje sa radom na samom sajtu.
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext);
Na početku dokmenta pozivamo font Open Sans koji ćemo kasnije koristiti na sajtu.
Pored toga, definišemo body tag kome dodeljujemo pozadinu. Kako ne želimo da se
pozadino skroluje, već da sajt klizi preko nje dodajemo background-attachment: fixed;.
Pošto će nam veliki broj divova i slika na sajtu imati float, definišemo .clr, a zatim i
sam link, kome uklanjano donju liniju. Naravno, za linkove definišemo i tranziciju, kako bi
prelaz izmedju boja bio neprimentniji. Pored paragrafa i heading taogva, definišemo još i
sliku, kao i nekoliko pratećih klasa. U slučaju da je slika veća od div, odnosno elementa u
koji se pakuje neće se prikazati kako treba, pa zato ograničavamo maksimlanu veličinu na
100%, ali svakako visinu i širinu postavljamo na automatski, da ukoliko je slika manja
bude prikazana u originalnoj veličini, odnosno ako je širina veća od elementa u kome se
nalazi slika da se visina i širina smanje proporcionalno. Kako ćemo na sajtu više puta
koristi slike koje imaju poravnanje levo ili desno, ili su na sredini, kao i border, da bi
izbegli više definisanja u samom kodu, na početku definisemo i to.
#top
U našem divu koji ima id top kod desktop verzije nemamo praktično ništa. To je
samo jedna linija, koju ćemo ovde definisati kao border. Kasnije, kada budemo radili
mobilnu verziju u HMTL kodu ćemo dodati ono što je neophodno.
<div id="top">
<div class="container">
</div>
</div>
#header
U divu header se nalazi logotip, kao i ikonice za socijalne mreže. Za to ćemo koristiti
html 5 tag header. Naravno, možete sve spakovati i u div koji će imati id header, ali kako
već imamo html5 tag onda ćemo njega i koristiti. Pored toga, u istom divu nam se nalazi i
navigacija sajta, koju ćemo koristiti na svim desktop verzijama sajta.
S obzirom da imamo grid sistem, ovo možemo rešiti preko gridova, medjutim logo
ćemo smestiti u div koji se tako i zove, i kako bi on bio sa leve strane imaćemo float left.
Ikonice za socijalne mreže idu desno, i samim tim definišemo float right na pomenutnom
<header>
<div class="container">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="Klaster akademija"
width="200" height="69" /></a>
</div>
<div class="social">
<a href="#" class="face"></a>
<a href="#" class="tw"></a>
<a href="#" class="yt"></a>
<a href="#" class="rss"></a>
</div>
<div class="clr"></div>
<nav>
<ul>
<li class="active"><a href="#">Početna</a></li>
<li><a href="onama.html">O nama</a></li>
<li><a href="usluge.html">Usluge</a></li>
<li class="dropdown"><a href="ponuda.html">Ponuda</a>
<ul>
<li><a href="ponuda1.html">Ponuda 1</a></li>
<li><a href="ponuda2.html">Ponuda 2</a></li>
<li><a href="ponuda3.html">Ponuda 3</a></li>
</ul></li>
<li><a href="uslovi-placanja.html">Uslovi plaćanja</a></li>
<li><a href="blog.html">Blog</a></li>
<li class="dropdown"><a href="galerija.html">Galerija</a>
<ul>
<li><a href="galerija1.html">Galerija 1</a></li>
<li><a href="galerija2.html">Galerija 2</a></li>
<li><a href="galerija3.html">Galerija 3</a></li>
</ul></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<div class="clr"></div>
</nav>
</div>
</header>
Kako nam sama lista, koja se u ovom slučaju koristi kao navigacija ima float: left za
svaki list item, ispod zatvorenog ul taga pozivamo div koji ima klasu clr.
U samoj navigaciji imamo i nekoliko padajućih menija, pa ćemo ih najlakse kroz stil
definisati kada se prikazuju, a kada ne.
#main
<div id="main">
<div class="container">
</div>
</div>
Kao i sve do sada, kompletan sadržaj nam se nalazi u divu container. Sledeće što
definišemo je animacija. U ovom slučaju koristimo bxSlider - http://bxslider.com/. Prema
dokumentaciji proizvodjača sve slike koje koristimo u animaciji, odnosu slajdovi se nalaze
u listi koja ima klasu bxslider.
<div class="slider">
<ul class="bxslider">
<li><img src="images/animacija/01.jpg" alt="Klaster akademija" /></li>
<li><img src="images/animacija/02.jpg" alt="Klaster akademija" /></li>
<li><img src="images/animacija/03.jpg" alt="Klaster akademija" /></li>
</ul>
</div>
Takodje, uz bxSlider pozivamo i jQuerry biblioteku, kao i skript i css file koji smo
dobili u fajlu koji je preuzet sa zvaničnog sajta. Ovo sve kopiramo u <head> tag.
Ostaje nam još da pozovemo bxSlider, a to radimo preko skripta, koji kopiramo u
main.js file
$(document).ready(function(){
$('.bxslider').bxSlider();
});
Ispod animacije imamo slogan, a ispod slogana jednu vertikalnu liniju koju ćemo
definisani u divu sa klasom break.
Prema dizajnu koju smo dobili, ispod slogana imamo tekst koji je spakovan u 2 diva.
Levi div će biti grid-8, i u njemu se nalazi osnovni informativni tekst, dok se sa desne
strane u grid-4 nalazi ordered lista sa najčešće postavljenim pitanjima.
<div class="grid-8">
<div class="block">
<p>Klaster akademija je projekat Poslovnog udruženja IKT klaster centralne
Srbije Kragujevac sa ciljem stručnog osposobljavanja kako zaposlenih tako i kadra koji
nedostaje u preduzećima članica klastera.</p>
<p>Pokazatelj na osnovu statistike kaže da je potrebno 8 do 12 meseci za
obuku novo zaposlenog lica, pri čemu su ta lica neprofitabilna i isključivi trošak za
preduzeće prvih godinu dana. Logičnim razmišljanjem dolazimo do zaključka da je IKT
klaster akademija više nego potrebna svim našim članicama jer će kroz obuke dolaziti
znatno brže do obučenih kadrova.</p>
<p>Trenutno smo u fazi izgradnje koncepta IKT klaster akademije i u tome
nam je potrebna pomoć svih naših članica kako bi akademija bila korisna svima.</p>
<p>Potrebno je da odgovorite na sledeća pitanja i na osnovu vaših odgovora
dobićemo neophodne podatke za pripremu i organizovanje obuka, kurseva koji će se
sprovoditi u IKT klaster akademiji. </p>
</div>
</div>
<div class="grid-4">
<div class="block">
<h3>Pitanja</h3>
<ol>
<li>Koje tehnologije koristite u vašoj firmi?</li>
<li>Sa kojim znanjima su vam potrebni kadrovi?</li>
<li>Koliko osposobljenih kadrova bi ste zaposlili u prvih godinu dana,
a koliko u periodu od tri godine?</li>
<li>Da li ste spremni da učestvujete u obuci kandidata kroz klaster
akademiju i na koji način?</li>
<li>Da li bi klaster imao finansijsku obavezu prema vama?</li>
<li>Na koje kurseve bi slali svoje zaposlene radnike?</li>
</ol>
</div>
</div>
<div class="clr"></div>
Osnovne 4 usluge će biti spakovana u 4 diva podjednake širine, što znači da ćemo
ovde za to iskoristiti grid-3. U odnosu na sledeći element imamo jednu liniju koju
definišemo kao horizontal rule, odnosno hr.
Sledeća stvar su logotipi članica klastera. Njih ćemo spakovati grid-12 div, a sve to
kao slike koje imaju float: left.
Kao što smo već jednom definisali, ispod slogana, horizontalnu liniju smo definisali
kao break, pa ćemo je pozvati i ovde, ispod logotipa članica, a pre samog predfutera,
odnosno poslednjeg reda koji imamo u našem main divu.
Kako ponovo imamo 4 diva iste širine koristimo grid-3. Prvi div će nam biti Najnovije
vesti, i to ćemo rešiti preko liste. U drugom divu ćemo postaviti logotipe 12 tehnologije
koje koristimo u okviru klastera, što će takodje biti rešeno preko liste. Sledeći div je za
Faebook like box. Kod za tu stranu ćemo povući preko Facebook strane za developere.
Skript koji je koristi za ovo ćemo kasnije iskopirati u main.js file, gde ćemo čuvati sve
skripte.
I poslednji div nam je za kontakt formu, koja ima polja za unos imena, e-mail adrese,
kontakt telefona i polja za poruku.
Stil koji koristimo za ceo main div je dosta opširan, pa čemo krenuti redom. Opšti
deo stila je sledeći:
#main .slider {margin: 20px auto; overflow: hidden !important; width: 100%; max-width:
1200px;}
#main .break {background: url("../images/line-bg.png") bottom center repeat-x; margin-
bottom: 20px; width: 100%; height: 9px;}
#main .slogan h3 {font-size: 18px; letter-spacing: 2px; text-align: center; font-style:
italic; padding: 0px 50px 0px; margin: 0px; }
#main .grid-12 .block.clanice img {width: 19.2%; max-width: 240px; padding: 1%; margin:
0px 1% 0 0; box-sizing: border-box; float: left; border: 1px solid #BCBCBC;}
#main .grid-12 .block.clanice img:last-child {margin-right: 0;}
#main .grid-3 .block .tehnologije {list-style: none; margin: 0px; padding: 0px;}
#main .grid-3 .block .tehnologije li {width: 23.25%; margin: 2% 2% 2% 0px; padding: 0px;
float: left; box-sizing: border-box; }
#main .grid-3 .block .tehnologije li:nth-child(4n+4) {margin: 2% 0px 2% 0px;}
#main .grid-3 .block .tehnologije li img {border: 1px solid #BCBCBC; padding: 3px; margin:
0px; box-sizing: border-box; }
footer
Na kraju, ostaje nam samo da odradimo još futer. Futer ćemo definisati koristeći
html5 tag footer. Takodje, možemo ga definisati i u divu čiji će id biti footer, ali svakako mi
ovde koristimo html5 tag.
<footer>
<div class="container">
Copyright © 2015 ICT-CS klaster akademija Kragujevac. All rights reserved
<span><a class="top" href="#top"></a></span>
</div>
</footer>
Pored osnovnih informacija, imamo i link koji će nas voditi na početak strane, koji je
definisan u spanu. Ovo ćemo stilizovati kao strelicu, sliku već imamo spremnu, a kako bi
vizuelno lepše izgledalo u main.js file ćemo prekopirati skriptu po nazivu Smooth
scrolling, koja će animirati skrolovanje na vrh sajta.
Što se tiče stila, span će imati float:right, a sama klasa top pozadinsku sliku, koja je
zapravo strelica koja će voditi na vrh sajta.
footer .container {background: #fff; margin: 30px auto; padding: 20px 0px; box-sizing:
border-box; text-align: center; color: #000; border-width: 1px 1px 2px 1px; border-style:
solid; border-color: #BCBCBC; }
footer span {float: right;}
footer span .top {background: url("../images/back_to_top.png") center center no-repeat;
width: 20px; height: 20px; margin-right: 10px; display: block;}
Sada kada smo odradili početnu stranu, ostaje nam da odradimo i par unutrašnjih
strana.
Možemo iskoristiti ovo što smo radili kao osnovu za sve druge strane, kako bi dobili
na vremenu. Ono što je bitno, kada pravimo novu stranu je da odradimo sledeće:
Prilagodljiv dizajn web strane (eng. Responsive web design, RWD) predstavlja web
dizajn koji omogućava optimizovano prikazivanje, jednostavno korišćenje, čitanje, i
kretanje kroz web sajt koji će biti pregledan na različitim uređajima. Zapravo to je tehnika
koja nam omogućava da jednu web stranicu možemo pregledati na raznim uređajima
različitih rezolucija. Pregledanje web stranice koja nema responsive dizajn na uređajima
sa manjom rezolucijom može biti neugodno. Da bi korisnik došao do traženih informacija
deo svog vremena izgubiće kretajući se kroz samu stranu (skrolovanje, zumiranje,
pomeranje). Pri kreiranju responsive web strana sadržaj se prilagođava različitim
širinama uređaja korišćenjem fluidnog dizajna, fleksibilnih slika kao i CSS3 media queries
(tehnologija koja nam omogućava da na različitim širinama uređaja koristimo različita
CSS svojstva) i na taj način pruža korisnicima jednostavnije korišćenje.
CSS media queries dozvoljavaju strani da koristi različite CSS stilove na različitim
dimenzijama uređaja na kome se sadržaj prikazuje. Na taj način kreator sajta može
prilagoditi veličinu slova, margine i sve ostale elemente raznim uređajima kako bi strana
bila optimizovanija za korišćenje.
Uz Slidebars pozivamo skript i css koji smo dobili u fajlu koji je preuzet sa zvaničnog
sajta. Ovo sve kopiramo u <head> tag.
U body tagu imamo div koji ima klase left-side sb-slidebar sb-left, kako bi definisali
meni koji se pojavljuje sa leve strane. Takodje, imamo i data-sb-width="200px" koji nam
ograničava širinu slidebar-a na 200px, s obzirom da imamo neke starije modele telefona
koji imaju ekrane od svega 240px, pa smo se na taj način osigurali da će se dobro videti
slidebar i na tim uredjajima.
Ostaje nam još da stilizujemo meni sa leve strane, i to radimo preko sledećeg stila.
Kako će nam kod RWD svi divovi i gridovi ići jedan ispod drugog moramo da im
izmenimo širine, tako da svi imaju 100% širine, odnosno maksimalnu širinu do 480px,
U slučaju da želite da sakrijte bilo koji div ili element, da se ne prikazuje na mobilnim
uredjajima to možete odraditi preko display: none.
/*Smartphone*/
@media (max-width: 480px) {
.container {width: 100%; padding: 0px 1%; display: block; box-sizing: border-box;}
.grid-3, .grid-4, .grid-6, .grid-8, .grid-9, .grid-12 {width: 100%; display: block;
margin: 0px 0px 20px 0px;}
body {background: #f1f1f1;}
#top { height: 40px; display: block; background: #444444;}
#top .container {background: url("../images/logo-response.png") center center no-
repeat; height: 40px;}
header {margin: 0px;}
header .logo {display: none;}
header .social { margin: 10px; width: 100%; height: 16px; text-align: center;}
header nav {display: none;}
.bx-controls-direction {display: none;}
#main .grid-9 .block, #main .grid-8 .block { padding: 0px; }
#main .slogan h3 {font-size: 14px; padding: 0px 10px;}
.fb-page.fb_iframe_widget, #main .grid-3 iframe {width: 100% !important; max-width:
480px !important; text-align: center;}
footer span {display: block; margin: 0px auto; text-align: center; width: 100%; float:
none;}
footer span .top {background: url("../images/back_to_top.png") center center no-
repeat; width: 100%; height: 20px; margin: 20px 0px 0px; display: inline-block;}
}
Kao i prethodno slučaju, i ovde ćemo sve gridove i sam container definisati na 100%,
odnosno na 767px maksimalne širine.
Kada je reč o mobilnim uredjajima ostaje nam da definišemo još ovu rezoluciju, od
767px – 959px, što je rezolucija tableta. U poslednjih godinu dve dana na tržištu se
pojavio veliki broj tableta koji prikazuju desktop verzije sajtova, ali je svako i dalje ova
rezolucija jako važna. Prema potrebi, ovde gridove možemo definisati sa novim širinama,
jer najverovatnije neće svi biti kao u prethodna 2 slučaja 100%.
/* Tablets */
@media (min-width: 768px) and (max-width: 959px) {
.container {width: 100%; padding: 0px 1%; display: block; box-sizing: border-box;}
.grid-3 {width: 50%; min-height: 250px;}
body {background: #f1f1f1;}
#top { height: 40px; display: block; background: #444444;}
#top .container {background: url("../images/logo-response.png") center center no-
repeat; height: 40px;}
header {margin: 0px;}
header .logo {display: none;}
header .social { margin: 10px; width: 100%; height: 16px; text-align: center;}
header nav {display: none;}
.bx-controls-direction {display: none;}
I na kraju, ostaje nam da premostimo jaz od 960px - 1199px, što predstavlja desktop
rezoluciju, ali kod nekih starijih i manjih monitora. Takodje, ova rezolucija se puno
koristili na netbook računarima, ali je sve manje i manje ima, i uglavnom se podrazumeva
da je desktop rezolucija preko 1200px.
Kada smo sve ovo uneli na dno našeg CSS fajla, ostaje nam samo da proverimo
kako se vidi sajt na telefonu ili tabletu. Takodje, možete koristiti i neke od sajtova za ovo,
kao i opciju Responsive Design View u Mozili, koju dobijate kombinacijom tastera Ctrl +
Shift + M. U RDV možete sami odabrati rezolucija za testiranje, ali je svakako preporuka
da sajt pogledate i na nekom od mobilnih uredjaja, i na njima da instalirate više
browsera, jer su razlike primetne. Dešava se i da isti browser na 2 različite verzije OS vidi
različito site.
Grid Sistem?
Bootstrap 3 u stvarnosti ima grid sistem sa 4 nivoa „responsivnosti“. Na ilustraciji
možete videti ukupno 12 gridova. Na osnovu širine svakog elementa odredjuje se koliko
će odredjeni div imati širinu, tj da li će zauzeti 2, 3 ili više grida.
Primer koda:
<div class="container">
<div class="row">
<div class="col-md-4"><p>Box 1</p></div>
<div class="col-md-4"><p>Box 2</p></div>
<div class="col-md-4"><p>Box 3</p></div>
<div class="col-md-4"><p>Box 4</p></div>
<div class="col-md-4"><p>Box 5</p></div>
<div class="col-md-4"><p>Box 6</p></div>
<div class="col-md-4"><p>Box 7</p></div>
<div class="col-md-4"><p>Box 8</p></div>
<div class="col-md-4"><p>Box 9</p></div>
<div class="col-md-4"><p>Box 10</p></div>
<div class="col-md-4"><p>Box 11</p></div>
<div class="col-md-4"><p>Box 12</p></div>
</div>
</div>
Ukratko:
• BOOTSTRAP je početna tačka za izgradnju interfejsa.
• Ukoliko odlučite da koristite BOOTSTRAP, to ne znači da vam nije potreban UI
dizajner.
• Neizmenjen BOOTSTRAP je idealna alatka za MVP-ove, lične projekte, i servise
namenjene vrlo malom broju korisnika, hobi-sajtove.
• Interfejs dizajn nije slagalica oprobanih rešenja za prethodno definisane probleme,
već odabir adekvatnih rešenja (i put do njih) za specifične probleme, u specifičnim
okolnostima.
bxSlider - http://bxslider.com/
Slidebars - http://plugins.adchsm.me/slidebars
Colorbox - http://www.jacklmoore.com/colorbox/