Web Dizajn Uvod

ANIMACIJA U INENJERSTVU
Fakultet Tehnikih Nauka

Novi Sad
Igor Kekeljevi
UVOD U VEB DIZAJN

HTML, CSS, JavaScript, JQuery, Bootstrap, Less
2016.
HTML 2
TAGOVI 2
ATRIBUTI TAGOVA 3
PRIMER 5
CSS 9
CSS SELEKTORI 10
EKSTERNI CSS 12
PRIMER 14
JAVASCRIPT 20
FUNKCIJE I PROMENJIVE 21
EKSTERNI JAVASCRIPT 23
JQUERY 24
JQUERY SELEKTORI 25
DODATNI SKRIPTOVI 28
BOOTSTRAP 32
12 KOLONA 32
KOMPONENTE 35
LESS 39
VARIJABLE 40
MIKSINI 41
OPERACIJE 41
IMPORTOVANJE 42
1
HTML
HTML je skraenica od HyperText Markup Language. Ovaj programski jezik i njegov naziv su
delo fiziara Tima Bernersa Lija (Tim Berners-Lee), koji je bio zaposlen u CERN laboratoriji. On je
1980. godine napravio prototip sistema za deljenje dokumentacije elektronskim putem, baziran na
tekstualnim linkovima koji vode korisnika ka novim sadrajima, ime je uspostavio paradigmu
hiperteksta. Jedan od primera koje je naveo za upotrebu hiperteksta su enciklopedijski sadraji.
Fajlovi sa HTML kodom oznaavaju se ekstenzijom *.html. U kombinaciji sa CSS

(Cascading Style Sheets) i javaskriptom (JavaScript), HTML predstavlja temeljno trojstvo veb
dizajna. HTML slui za naznaavanje (markup) elemenata na stranici, odnosno definiciju strukture
sadraja na stranici, ta i gde se nalazi na stranici. Za elementarnu funkcionalnost jedne veb
stranice, dovoljno je koristiti samo HTML, ali se bogatije korisniko iskustvo ostvaruje vizuelnim
stilizovanjem sadraja preko CSS-a i naknadnim izmenama sadraja stranice kroz interakciju sa
korisnikom pomou javaskripta.
HTML kod se sastoji od tagova, koji obino obuhvataju odreeni sadraj. Tagovi se
dodatno konfiguriu preko atributa tagova.
TAGOVI
Struktura jednostavnog HTML koda izgleda kao na sledeem primeru:
<html>
<head>
<title>Naslov stranice</title>
</head>
<body>
<h1>Glavni naslov u tekstu</h1>
<p>Sadrzaj paragrafa</p>
</body>
</html>
Rezultat:
2
Elementi stranice definiu se pomou tagova, koji se piu uglastim zagradama:
<nazivTaga>
Poto tagovi obino imaju unutar sebe neki sadraj ili druge tagove, koriste se otvarajui i
zatvarajui tagovi da bi se obuhvatio pripadajui sadraj. Zatvarajui tagovi se po pravilu piu sa
uzlaznom kosom crticom (/) na poetku taga:
<nazivTaga>Sadraj unutar taga</nazivTaga>
Ukoliko na stranicu elimo da dodamo glavni naslov, da bi internet pretraivaima dali

instrukciju da sadraj unutar navedenog taga interpretiraju kao glavni naslov (heading 1), eljeni
sadraj obuhvatamo otvarajuim i zatvarajuim <h1>...</h1> tagovima. Po istom principu sadraj
za paragraf obuhvatamo <p>...</p> tagovima, kao na primeru:

<p>Sadrzaj paragrafa</p>
Pojedini tagovi ne mogu imati sadraj ili druge tagove unutar sebe, pa se ne piu sa
otvarajuim i zatvarajuim tagovima, kao do sada navedeni primeri. Primer ovakvih tagova je
<br>, skraeno od break line, a slui za postavljanje oznake koja prelama tekst u novi red. Ovi
tagovi se po pravilu piu sa uzlaznom kosom crticom (/) na kraju taga:
<br />
ATRIBUTI TAGOVA
Kao to je u prethodnim primerima navedeno, sadraj stranice se definie obuhvatanjem sadraja

otvarajuim i zatvarajuim tagovima. Za svaki od tagova se mogu definisati i dodatne opcije preko
atributa tagova. Na primer, da bi definisali poravnavanje teksta unutar paragrafa po desnoj strani
koristi se atribut align=right, kao u sledeem primeru:
<p align=right>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dolor lectus, dictum eget orci
non, tristique dictum erat. Aliquam ac massa a neque condimentum elementum. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut non justo at augue
tincidunt lobortis vel at ligula.
</p>
Rezultat:
non, tristique dictum erat. Aliquam ac massa a neque condimentum elementum. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut non justo at augue
tincidunt lobortis vel at ligula.
3
Iako je kod veine tagova opciono da li e se koristiti atributi, postoje tagovi kod kojih su
atributi neophodni, kao to su tagovi za linkove i za slike. Da bi napravili da tekst Raunarska
grafika bude link do sajta na adresi http://www.racunarska-grafika.com, potrebno je koristiti
<a>...</a> tag sa href atributom:
<a href=http://www.racunarska-grafika.com>Raunarska grafika</a>
Kao to se vidi u prikazanom primeru, atributi se najee piu kao string promenjive:
imeAtributa=vrednost atributa
4
PRIMER
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h2>Podnaslov u tekstu</h2>
<p>
<img src="http://www.racunarska-grafika.com/images/IA-background.gif" />
<br />
Obian, neformatiran tekst, <b>deo teksta koji je boldovan</b>, i <i>deo teksta
koji je u italiku.</i>
</p>
<p>
Primer kada unutar teksta postoji <a href="http://www.racunarska-grafika.com">link
do neke druge internet stranice</a>.
</p>
<hr />
<h2>Probna tabela</h2>

<table border="1" width="100%">
<thead>
<tr>
<th>BROJ INDEKSA</th>
<th width="45%">IME</th>
<th width="45%">PREZIME</th>
</tr>
</thead>
<tbody>
<tr>
<td align="right">AI 1/2016</td>
<td>Petar</td>
<td>Petrovi</td>
</tr>
<tr>
<td>Jovan</td>
<td>Jovanovi</td>
</tr>
</tbody>
</table>
</body>
</html>
5
Rezultat:
Objanjenje:
<html>...</html> - Da bi internet pretraiva znao da sadraj skripta treba da interpretira
kao HTML kod, kompletan sadraj se obuhvata <html> tagom. Ovaj tag je obavezan
roditeljski tag svake HTML skripte.
<head>...</head> - Ovaj tag nije obavezan, ali se moe koristiti ukoliko elimo da izvrimo
neke instrukcije pre prikazivanja sadraja stranice. Najee se koristi da se uitaju
neophodni CSS stilovi i javaskript skriptovi za pravilno prikazivanje i fukcionisanje
stranice.
<title>...</title> - Naslov internet stranice. Ovaj tag se upisuje unutar head taga. Naslov
internet stranice se prikazuje u vrhu pojedinih internet pretraivaa, na tabovima, koristi se i
u listama rezultata prilikom pretraivanja interneta.
6
Primer primene <title>...</title> taga.
<meta /> - Ovaj tag se upisuje unutar head taga. Ovaj tag nema otvarajue i zatvarajue
tagove. Tag moe imati razne funkcije, u zavisnosti od korienih atributa. Na primeru su
koriena dva atributa: http-equiv="content-type" content="text/html; charset=utf-8", da bi
se prilikom uitavanja stranice koristio UTF-8 set karaktera, koji sadri latinine slovne
karaktere specifine za srpski jezik: ,, , , .
<body>...</body> - Svi sadraji koje elimo da korisnik vidi na stranici: naslovi, paragrafi,
linkovi, slike, se smetaju unutar navedenog taga.
<h1>...</h1> - Header 1. Glavni naslov u tekstu.
<h2>...</h2> - Header 2. Podnaslov u tekstu.
<p>...</p> - Paragraph. Paragraf teksta. Posle paragrafa se obino automatski dodaje jedan
red razmaka. Paragraf podrava atribut za ravnanje teksta po levom, centralnom, desnom
bloku ili po oba bloka (left, right, center, justify)
7
<img /> - Image. Slika na stranici. Ovaj tag nema otvarajue i zatvarajue tagove, ve se
putanja do slike postavlja preko atributa src=putanjaDoSlike.
<b>...</b> - Bold. Boldovanje testa.
<i>...</i> - Italic. Iskoavanje teksta.
<a>...</a> - Anchor (en. vor). Link na stranici. Putanja do novog sadraja koji se otvara
preko linka se definie preko atributa href=putanjaKojuLinkOtvara.
<hr /> - Horizontal Rule. Horizontalna linija.

</div>
</nav>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Osoblje</a></li>
<li class="active">Marko Markovi</li>
</ol>
<div class="row">
<img src="imgs/no-picture.jpg" class="img-thumbnail
img-responsive" />
</div>
<h1>
Marko Markovi<br />
<small>Asistent</small>
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
dolor lectus, dictum eget orci non, tristique dictum erat. Aliquam ac massa a neque condimentum
elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Ut non justo at augue tincidunt lobortis vel at ligula.
</p>
36
<button type="button" class="btn btn-block"><span
class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span> Phone: 063 1111
111</button>
class="glyphicon glyphicon-envelope" aria-hidden="true"></span> E-mail:
marko.markovic@gmail.com</button>
class="glyphicon glyphicon-home" aria-hidden="true"></span> Kancelarija: Kabinet
111</button>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Objanjenje:
<nav class="navbar navbar-inverse navbar-fixed-top">...</nav> - Definie sadraj kao
navigacionu traku. Konfigurisanje elemenata interfejsa se radi preko klasa:
navbar oblikuje osnovni izgled navigacione trake,
navbar-inverse koristi koloristiki negativ, u ovom sluaju boji navigacionu traku u
crnu boju sa svetlim slovima,
navbar-fixed-top fiksira navigacionu traku na gornju ivicu pretraivaa, bez obzira
da li korisnik skroluje stranicu.
<div class="container-fluid">...</div> - iri sadraj na celu irinu stranice.
<div class="navbar-header">...</div> - Skupljena forma navigacione trake.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar" aria-expanded="false" aria-controls="navbar">...</button> -
Dugme za otvaranje dropliste kad prikaza skupljene forme navigacione trake. Posebno
obratiti panju na data-target atribut jer on mora da sadri identifikator liste sa linkovima u
navigacionoj traci.
<span class="icon-bar"></span> - Formatira span u kratku horizontalnu liniju. Tri ovakve
linije ine ikonicu na dugmetu za otvaranje dropliste.
<a class="navbar-brand" href="#">...</a> - Logo ili labela u navigacionoj traci.
<div id="navbar" class="collapse navbar-collapse">...</div> - Obuhvata listu sa
linkovima u navigacionoj traci. Definie sadraj koji se ne prikazuje kod prikaza skupljene
forme navigacione trake, ve se premeta u skrivenu padajuu listu.
<ol class="breadcrumb">...</ol> - Formatira listu u formu breadcrumb-a, prikaza pozicije
otvorene stranice u odnosu na strukturu sajta.
<img src="imgs/no-picture.jpg" class="img-thumbnail img-responsive" /> - Izgled
slike je stilizovan sa 2 klase:
img-thumbnail - Iscrtava dekorativnu borduru oko slike,
img-responsive - Prilagoava maksimalnu irinu slike roditeljskom elementu.
37
<button type="button" class="btn btn-block">...</button> - U ovom primeru su
korienje 2 klase:
btn - osnovni stil dugmeta,
btn-block - proiruje dugme na irinu roditeljskog elementa.
<span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span> - Ikonica
telefona u vektorskom formatu, kao slovni karakter, ime se moe lako definisati njena
veliina i boja preko CSS stilova. Biblioteka dostupnih ikonica moe se videti na stranici:
http://getbootstrap.com/components/#glyphicons.
38
LESS
Nedostatak CSS koda je to nema standardno podrane promenjive, funkcije i razne druge alate za
lake programiranje. Take je na primer, neke osnovne boje vizuelnog identiteta na sajtu potrebno
ponavljati na vie mesta u kodu, kao i sve potencijalne varijacije te boje, dok je zahvaljujui Less
kompajleru CSS koda to vrlo lako kontrolisati. Isto je i sa dimenzijama slova, meuslovnog
razmaka, elemenata interfejsa, sve se moe prebaciti na promenjive i lako kontrolisati pomou
Less-a.
Less se koristi iz Command Prompt-a kod operativnog sistema Vindovs, odnosno Terminala
u Linuksu. Da bi mogli da koristimo ovaj kompajler, potrebno ga je prvo instalirati preko npm
programa (Node Package Manager), koji je sastavni deo programskog paketa node.js:
1. Instalirati node.js
2. Otvoriti Command Prompt i izvriti podeavanje parametara, ako je neophodno, kao to je
instalacija proksija:
npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080
3. Instalirati Less: npm install -g less
Less se koristi iz Command Prompta sa:

lessc styles.less styles.min.css
Prvo adresiramo putanju i ime do izvornog fajla u *.less formatu, a drugo je adresa i naziv izlaznog
fajla u *.css formatu. Jedan od dodatnih parametara koje moemo koristiti je parametar --clean-css
koji kompresuje CSS fajl na najmanju moguu veliinu, uklanjajui sve nepotrebne karaktere, kao
to su razmaci i redovi. Less kompajler je mogue i povezati sa editorima koda, kao to je Sublime
Text.
39
VARIJABLE
Fajl u *.less formatu:

@base: #f938ab;
@images: "../img";
.box {
color: @base;
background: url("@{images}/white-sand.png");
}
Kompajlirani rezultat u *.css formatu:

.box {
color: #f938ab;
background: url("../img/white-sand.png");
}
Less ima slinu sintaksu kao CSS, ali je ona proirena i sa promenjivama, koje se definiu sa
karakterom @ iza koje piemo naziv promenjive. U primeru je kreirana promenjiva base ija je
vrednost #f938ab. Kada pozivamo vrednost promenjive ponovo je potrebno napisati prvo karakter
ispred naziva @ promenjive, dakle @base. Ukoliko umeemo promenjivu u string, potrebno je
koristiti i vitiaste zagrade {}, kao na primeru sa adresom slike za pozadinu.
40
MIKSINI
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}

.bordered {
}
#menu a {
color: #111;
}
Miksini (mixins) omoguavaju da lako kombinujemo CSS klase, prostim pozivanjem imena klase
na eljeno mesto unutar neke druge klase.
OPERACIJE

#menu {
width: 5% * 2;
background-color: #112244 + #111;
}

#menu {
width: 10;
background-color: #223355;
}
Less podrava sve matematike operacije, sa svim jedinicama mere koje su validne u CSS-u, pa ak
i matematike operacije sa bojama, sa heksadecimalnim vrednostima.
41
IMPORTOVANJE

@import "typo.less";
Mogue je kombinovati vie Less fajlova u jedan. Tada e biti dostupne i sve promenjive koje
eksterni fajl koristi, kao da smo kompletan sadraj eksternog fajla ubacili na to mesto.
42

Web Dizajn Uvod

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Dizajn Uvod

Uploaded by

Copyright:

Available Formats

ANIMACIJA U INENJERSTVU

Fakultet Tehnikih Nauka

UVOD U VEB DIZAJN

Fajlovi sa HTML kodom oznaavaju se ekstenzijom *.html. U kombinaciji sa CSS

Struktura jednostavnog HTML koda izgleda kao na sledeem primeru:

<nazivTaga>Sadraj unutar taga</nazivTaga>

Ukoliko na stranicu elimo da dodamo glavni naslov, da bi internet pretraivaima dali

<h1>Glavni naslov u tekstu</h1>

Kao to je u prethodnim primerima navedeno, sadraj stranice se definie obuhvatanjem sadraja

<a href=http://www.racunarska-grafika.com>Raunarska grafika</a>

Sadraj fajla myStyle.css:

HTML stranica bez CSS stila:

Ista HTML stranica sa CSS stilom:

/* simple style reset */

Najjednostavnija primena je direktan unos javaskripta u HTML elemente, korienjem

U sluajevima kada je potrebno isti javaskript primeniti na vie elemenata na stranici,

Sadraj fajla myJS.js:

Sadraj HTML fajla:

Jedan od aduta jQuery biblioteke je korienje mehanizama za selektovanje elemenata na stranici,

Bootstrap biblioteku je razvila kompanija Tweeter, da bi reila upravo ove probleme sa

Instalacija biblioteke je vrlo jednostavna. Sa sajta projekta se preuzme arhiva sa fontovima,

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<link href="css/bootstrap.min.css" rel="stylesheet">

Prednost Bootstrap-a je u velikom broju predefinisanih komponenti interfejsa: tipografskih stilova,

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<link href="css/bootstrap.min.css" rel="stylesheet">

<nav class="navbar navbar-inverse navbar-fixed-top">

</div>

Less se koristi iz Command Prompta sa:

Fajl u *.less formatu:

Kompajlirani rezultat u *.css formatu:

Kompajlirani rezultat u *.css formatu:

Fajl u *.less formatu:

Kompajlirani rezultat u *.css formatu:

Fajl u *.less formatu:

You might also like