Visoka škola strukovnih studija za
informacione i komunikacione tehnologije
Beograd
WEB DIZAJN
Osnove HTML-a
Osnove HTML-a
„
„
„
„
„
„
„
HyperText Markup Language
HTML predstavlja jezik za označavanje hiperteksta i
hipermedija (teksta, slike, zvuka, videa i drugih
međusobno povezanih objekata pomoću linkova)
HTML predstavlja tekstualnu datoteku
Bilo koji tekst editor je prihvatljiv za izradu HTML
dokumenata
Evolucijom tehnologija HTML se razvijao i proširivao
do verzije koja se trenutno koristi (HTML v4.01)
Razvojem dinamičkog HTML-a (DHTML-a), postaje
nezamislivo kreiranje stranica koje ne sadrže
dinamički sadržaj i napredne komponente kao što su
naredbe skript jezika
U njemu se implementiraju skoro svi script jezici,
kao i PHP i ASP
Osnove HTML-a
„
„
„
„
„
„
HTML dokument je sastavljen od tagova
• otvarajući tag: <IME_ELEMENTA>
• zatvarajući tag: </IME_ELEMENTA>
Osim imena HTML elementa, tag čini i određeni
broj atributa, čije su vrednosti uokvirene
navodnicima
Element govori browser-u šta da uradi, a atribut
kako da to uradi
Razlika između malih i velikih slova ne postoji
(title = Title = tiTLe)
Pri prikazivanju stranica browser-i se oslanjaju na
informacije date u tagovima
Html kod se realizuje redosledom kojim je i pisan
Kako sve ovo radi ?
„
„
„
„
„
HTML je univerzalan kôd za sve čitače
Web čitač prevodi HTML i kreira korisničku web
stranicu sa tekstom, slikom, video i audio
sadržajima u zavisnosti od html kôda
Da bi web čitač dobio html kôd mora da ga
zatraži od web lokacije
Web lokacija se smešta na web server
Web serveri i web browser-i komuniciraju
pomoću HTTP protokola (HiperText Transport
Protocol)
Kako sve ovo radi ?
„
„
„
Nakon upisa URL adrese u web čitač, čitač putem
HTTP protokola zahteva datoteku od web servera
Server šalje datoteku i čitač je analizira. Ako u
datoteci postoji bilo koji objekat osim teksta,
čitač se za svaki od njih pojedinačno obraća
serveru
Dobijanjem datoteka web čitač popunjava
stranicu onako kako je u HTML kôdu definisana
njena struktura
Komunikacija sa web serverom
U prvom trenutku traži se HTML za stranicu
koja je ukucana u čitač, dok nakon toga
naizmenično idu zahtevi i odgovori za svaki od
elemenata strane.
Sadržaj na serveru je uvek isti ali sadržaj koji se
vidi na ekranu zavisi od tipa i verzije čitača.
Šta prvo uraditi
„
„
Potrebno je kreirati stranicu koja će biti home stranica
sajta. Njeno ime treba da bude index.html
Ako postoji ova stranica, i ako je ona fizički smeštena
na web server, na lokaciji www.nesto.com, tada se
ona automatski učitava, kada se u browser-u ukuca
www.nesto.com
„
Ona se može tražiti i sa punim imenom stranice
www.nesto.com/index.html
„
Svaka druga stranica mora se adresirati pojedinačno
kao www.nesto.com/neka_druga.html
Index.html
„
„
„
Ova stranica sadrži sve ono što je vidljiv ali i
nevidljiv deo za korisnika
Deo koji ne vidi korisnik vidi web server i
pretraživači
Deo kojim treba da počne stranica je
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
„
Nakon ovog dela koda počinje korisnički sadržaj
pisan u HTML kodu (uz dodatak skript-a)
HTML
Oznake
„
„
„
Uparene oznake su naredbe kojima se u stranu
postavlja tekst ili neki drugi objekat
Upareni tagovi imaju početak i i kraj
Ove oznake moraju da imaju simbol kojim se neka
naredba počinje i simbol kojim se završava
(<tag></tag>)
„
Ceo tekst ili skup naredbi unutar ove dve oznake se
prevodi samo u svojstvu tipa tih oznaka
„
Uparene oznake su uvedene radi lakšeg praćenja i
čitanja koda
„
Oznake mogu biti i neuparene, kada se tag samo
otvara ili samo zatvara
(<br> ili <br/>)
Tagovi
Tagovi koji opisuju osnovnu strukturu HTML
dokumenta:
• HTML
• HEAD
• BODY
•Tag <HTML> je okvir u kome se nalaze svi ostali tagovi; HTML dokument
uvek počinje tagom <HTML>, a završava se tagom </HTML>
•Tag <HEAD> uokviruje zaglavlje u kome se nalaze informacije o samom
dokumentu (naslov, opis, ključne reči, ime autora, itd.); opcion je
•Sve ono što vidimo u prozoru browser-a, tj. sadržina stranice, nalazi se u telu
dokumenta koje uokviruje element <BODY>; u dokumentu sme da postoji
samo jedan par tagova <BODY> </BODY>
Primer
„
„
„
„
Početak i kraj HTML odeljka
<html> Ovde je cela strana </html>
Početak i kraj zaglavlja (odmah iza html-a)
<head> Ovde je zaglavlje (ne vidi) </head>
Početak i kraj tela stranice
<body> Ovde je telo stranice </body>
Početak i kraj naslova strane
<title> Ovde je tekst naslova (vrh) </title>
Primer
<HTML>
<HEAD>
<TITLE> Moja prva Web stranica
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Dobar dan!
<BR>
„
Prazne (ne uparene) oznake nemaju svoj kraj
„
Najčešćekorišćene su <br> i <hr>
„
„
Oznaka <br> prevodi se kao “skoči” na sledeći
red (u grafičkom okruženju)
Ova naredba je u nekim slučajevima isto što i
Enter
Postavljanje horizontalnih linija
„
Horizontalne linije za razdvajanje definišu se
simbolom <hr>
„
Dužina linije je procenat dužine celog ekrana
„
Primer
<hr width=“75%”>
<hr width=“25%”>
Atributi horizontalnih linija
„
„
„
„
Align – poravnanje linije uz levu ili desnu stranu
Noshade – puna linija (bez senčenja)
Size – debljina linije
Width – dužina linije
Primer
<hr align=“left” noshade size=“5” width=“25”>
„
Definisanje adrese u header-u
<html>
<head>
<title>Ovo je strana o adresama</title>
<ADDRESS>
Kojic Nenad<BR>
[email protected] <BR>
Visa ICT skola<BR>
Zdravka Celara 19<BR>
</ADDRESS>
</head><body>
<hr width=“75%”>
<br>Neki tekst
<hr width=“100%”>
</body>
</html>
Boja
„
„
„
Boja se definiše kao atribut color, ili bgcolor
Može biti definisana kao engleska reč (blue,
yellow, green, red)
Preciznija definicija je brojna vrednost
(heksadecimalna predstava boje)
Formati za tekst
„
„
„
„
„
„
Formati teksta za Bold, Italic i Underline
<b> tekst </b>
<i> tekst </i>
<u> tekst </u>
Početak i kraj pasusa
<p> Ovde je tekst pasusa </p>
Delovanje formata teksta i atributa, na veći deo
teksta, istovremeno, postiže se uparenom
oznakom <div> </div> uz dopunu CSS-om
Atributi za fontove
„
„
„
„
„
„
<font
<font
<font
color=“boja”>
size=“veličina”>
face=“ime fonta”>
Boja može biti ili engleska reč za boju ili heksadecimalni kod
neke boje npr. green, blue, #008000, #FFFF00 ...
Veličina može biti broj od -7 do 7
Ime fonta je neki od definisanih fontova Times New Roman,
Arial, Helvetica...
Primer
<html>
<head>
<title>Ovo je treci HTML dokument</title>
</head>
<body BGCOLOR="#FFFFAA" >
<FONT face="Bookman Old Style" color=#000000 size=5>
Ovo je tekst.
</FONT>
</body>
</html>
<html>
<head>
<title>Karakteristike teksta</title>
</head>
<body>
<p>Sledeci tekst ce prikazati upotrebu atributa za menjanje
karakteristika teksta:</p>
<p><b>Ovo je podebljan tekst.</b></p>
<p><i>Ovo je iskosen tekst.</i></p>
<p><u>Ovo je podvucen tekst.</u></p>
<p><basefont size="5">Ovo je font velicine 5.</basefont></p>
<p>Ovo su slova uobicajene velicine, <big>a ovo su slova za
jedan veca od uobicajenih.</big></p>
<p>Ovo su slova uobicajene velicine, <small>a ovo su slova za
jedan manja od uobicajenih.</small></p>
<p><font color="red" size="10">Ovo je tekst crvene boje, slova
su velicine 10.</font></p>
</body>
</html>
Primer
Primer
Obrada teksta
„
„
„
„
Naslovi se mogu istaći korišćenjem elemenata
H1, H2, H3, H4, H5 i H6
Element H1 daje najveću veličinu slova, a H6
najmanju
Svaki od ovih elemenata počinje u novom redu, a
browser-i dodaju još malo praznog mesta pre
zaglavlja
U okviru zaglavlja se može navesti atribut ALIGN,
koji određuje horizontalno poravnanje zaglavlja;
vrednost ovog atributa može biti jedna od
sledećih: LEFT, CENTER, RIGHT
Primer
<html>
<head>
<title>Velicina slova</title>
</head>
<body>
<h1>Ovo je velicina slova u zaglavlju
<h2>Ovo je velicina slova u zaglavlju
<h3>Ovo je velicina slova u zaglavlju
<h4>Ovo je velicina slova u zaglavlju
<h5>Ovo je velicina slova u zaglavlju
<h6>Ovo je velicina slova u zaglavlju
</body>
</html>
H1</h1>
H2</h2>
H3</h3>
H4</h4>
H5</h5>
H6</h6>
Obrada teksta
„
„
„
„
„
U okviru početnog taga <P> može se navesti atribut
ALIGN, koji određuje horizontalno poravnanje
paragrafa; vrednost ovog atributa može biti jedna od
sledećih: LEFT, CENTER, RIGHT
Ukoliko se navede samo početni tag <P>, podrazumeva
se da je sledeći element u novom redu
Za grubo razdvajanje teksta koristi se prazan tag <HR>
On dodaje jednu horizontalnu liniju visine 1 do 2 mm,
ispred i iza koje postoji prazan red
Moguće je podesiti visinu korišćenjem atributa SIZE="n"
(n je broj piksela), širinu pomoću atributa WIDTH="n" i
poravnanje pomoću atributa ALIGN (moguće vrednosti
su LEFT, RIGHT i CENTER)
Primer
<html>
<head>
<title>Pasusi</title>
</head>
<body>
<p>Ovo je prvi pasus.</p>
<p>Ovo je drugi pasus.</p>
<br>
<p>Ovo je treci pasus ispred kojeg je bio jedan prazan
red.</p>
<br>
<p align="right">Ovo je pasus koji je desno poravnat.</p>
<p align="center">Ovo je pasus koji je centriran.</p>
</body>
</html>
Primer
Obrada teksta
„
„
Element BLOCKQUOTE uvlači blok teksta u
odnosu na ostatak i koristi se za duže tekstove
Element CITE se koristi za citate i ispisuje tekst
italikom
Primer
<html>
<head>
<title>Naslov</title>
</head>
<body>
<p>Ovo je tekst koji je levo poravnat.</p>
<blockquote>Ovo je deo teksta koji ce biti uvucen u
odnosu na prethodni pasus.</blockquote>
<br>
<p>Ovo je treci pasus ispred kog je bio jedan prazan
red, a iza koga ce biti naveden citat.</p>
<br>
<cite>Ovo cemo posmatrati kao citat.</cite>
</body>
</html>
Formatiranje teksta
„
Ukoliko se između simbola kuca veliki tekst bez
posebnog formatiranja (upotrebom simbola za
kraj rečenice br, ili pasusa p) u zavisnosti od
širine čitača tekst će se različito lomiti.
Ukoliko su neke reči bitne da ostanu u grupi
koristi se simbol
&nbsp;
između tih reči
„
Npr: <p> ……… Kojic&nbsp;Nenad …..</p>
„
Takođe se koristi i kao Space
Specijalni znaci (entiteti)
„
„
„
„
„
„
„
„
„
space &nbsp;
< &lt;
> &gt;
€ &euro;
© &copy;
® &reg;
& &amp;
" &quot;
' &apos;
Simboli za tekst
„
<cite></cite> Istaknuti citati
„
<del></del> Precrtani tekst
„
<q></q> Znaci navoda
„
<sub></sub> Oznake indeksa
„
<sup></sup> Oznake eksponenta
„
<em></em> Slova u kurzivu
„
<strong></strong> Polucrni kurziv oko slova
„
„
Za specijalne simbole koriste se podaci iz ASCII
kod tabele. Npr. Simbol za copyright je &#169
<blockquote></blockquote> Citati
Komentari
„
„
„
„
Komentari su delovi web prezentacije koji se ne
prevode, a samim tim i ne prikazuju korisniku.
Uloga komentara je lakše snalaženje i navođenje
unutar prezentacije
Kometari su skoro obavezni kada više ljudi
uređuje sajt, ili kada se koristi PHP pristup
Oznaka komentara je
<! -- tekst komentara -->
Referenciranje objekata
„
„
„
Prostor na web serveru podeljen je kao i hard
disk u direktorijume i foldere. Da bi se zadržala
organizacija web strane napravljene na
personalnom računaru svi objekti se moraju
definisati relativnim ili apsolutnim putanjama.
Atribut src definiše tip putanje (source)
Primer za sliku – pera.jpg, koja je u folderu A,
unutar direktorijuma B gde je i kôd stranice koja
se kreira, a sve ovo je na C disku
Referenciranje objekata
„
„
Relativna putanja (fajl koji poziva je u istoj ravni gde i
folder B)
<img src=“B/pera.jpg”>
Apsolutna putanja (fajl koji poziva je bilo gde, pa se daje
puna putanja - izbegavati)
<img src=“C:A/B/pera.jpg”>
<img src=“www.sajt.com/slike/pera.jpg”>
„
„
U slučaju da je struktura foldera kompleksnija za apsolutnu
putanju mora da se piše svaki delić putanje, dok se
relativna ne menja
Problem promene lokacije i uređenja sajta
Dodavanje slike
Primer:
<img src=“pera.jpg” width=“400” height=“200”>
„
„
„
Slika ne mora da ima dimenzije, ali tada se skida
istovremeno sa tekstom što mnogo usporava rad
Sa dimenzijama, tekst se ceo učitava odmah, a slika
naknadno jer je definisan prostor za sliku
Okvirne linije se stavljaju na sliku ako slika predstavlja link
<img src=“pera.jpg” width=“400” height=“200” border=“1”>
Pozicioniranje slike
„
„
„
„
Pozicija slike u odnosu na stranu definiše se
uparenim simbolima neposredno pre i posle
oznaka za sliku (najbolje stil u tagu div)
Po pravilu, ako se ne naglasi slika se postavlja
skroz levo
Primer za centriranje
<center><img src=“pera.jpg” alt=“pera sa
druzinom”></center>
Atribut alt definiše ime koje će se pojaviti umesto
slike koja ne može da se učita, i to je opis kojim
će search mašina videti sliku.
Primer
<html>
<head>
<title>Ovo je treci HTML dokument</title>
</head>
<body BGCOLOR="#FFFFAA" >
<FONT face="Bookman Old Style" color=#000000 size=5>
Ovo je tekst.
<img src="pera.jpg" width="100" height="175">
<img src="pera.jpg" width="400" height="200"
border="1">
<center><img src="pera.jpg"></center>
</body>
</html>
Primer
Postavljanje slike kao pozadine
„
„
„
„
„
Definisanjem direktno u HTML kodu
<body background=“slika.gif">
Definisanjem direktno u HTML kodu sa alternativom boje
<body background=" slika.gif“ bgcolor="#333333">
Definisanje u stilu (poželjno)
body {
background-image: url("http://nekisajt.com/images/
slika.gif");
background-position: 50% 50%;
background-repeat: no-repeat; }
Hiperveze
„
„
Simboli za hiperveze su <a></a>
Atribut strane koja treba da se učita je href
Primer 1: Unutar iste web lokacije
<a href=“home.htm”>Ovde pritisnuti da bi videli
našu home stranu.</a>
„
Primer 2: Unutar druge web lokacije
<a href=“http://nesto.com/index.htm”>Ovde
pritisnuti da bi videli sajt nesto.com .</a>
„
Hiperveze
Primer 3: Link ka nekom fajlu
<a href=“http://www.nesto.com/web/mika.zip”>
Ovde pritisnuti da bi skinuli mika.zip sa sajta
www.nesto.com </a>
„
Formatiranje teksta linka
<html>
<head>
<title>Ovo je strana o linkovima</title>
</head>
<body BGCOLOR="#CCFFAA" TEXT="blue" LINK="red" VLINK="green"
ALINK="red">
<a href=“http://www.nesto.com/web/mika.zip”> Ovde pritisnuti da bi skinuli
mika.zip sa sajta www.nesto.com </a>
<br>Neki tekst
</body>
</html>
Atribut
Opis
Link
Boja linka pre nego što se aktivira
Alink
Boja linka u trenutku aktiviranja
Vlink
Boja linka nakon aktiviranja
Primer
<html>
<head>
<title>Ovo je strana o linkovima</title>
</head>
<hr width=“75%”>
<body BGCOLOR="#CCFFAA" TEXT="blue" LINK="red"
VLINK="green" ALINK="red">
<a href=“http://www.nesto.com/web/mika.zip”> Ovde pritisnuti da
bi skinuli mika.zip sa sajta www.nesto.com </a>
<hr align=“left” noshade size=“5” width=“25”>
<br>Neki tekst
<hr width=“100%”>
</body>
</html>
Link za mail
„
Pravljenje linka kojim se automatski otvara Outlook
Express je istog formata kao i klasičan link, ali je
adresa primaoca definisana sa
mailto:[email protected]
<a href="mailto:[email protected]">Kontakt</a>
„
Pored osnovne adrese mogu se dodati i ostali atributi.
Odvajaju se znakom ?, i nose fiksna imena
promenljivih
<a href="mailto:[email protected]?subject=Mail sa sajta
">Kontakt</a>
Dodavanje slike pored
URL adrese
<head>
<link rel="shortcut icon" href="ime.ico">
</head>
Liste
„
„
„
Simbol za definisanje liste je <ol></ol>, dok su
nabrajanja u listi <li></li>. Nesortirane liste mogu se
difinisati oznakom dir
Nabrajanja su po pravilu arapski brojevi, a za promenu
treba koristiti simbol <ol type”a”>, <ol type”A”>, <ol
type”i”>, <ol type”I”>, za mala i velika slova kao i
mala i velika rimska slova
Za počinjanje liste drugim brojem od 1 treba <ol
type”a” start=“5”>,
Simboli listi
„
„
„
Za označavanje elemenata liste simbolima treba
koristiti simbol <ul>
Primer:
<ul type=“disc”>
<ul type=“square”>
<ul type=“circle”>
za crnu tačku
crni kvadrat
crna kružnica
Ugneždene liste se definišu na isti način kao i
liste, ali unutar njih
Simboli listi 2
<UL>
<LI>XML
<LI>HTML
<LI>DTD
<LI>CSS
<LI>XSL
</UL>
Tag <UL> služi za neuređeno
nabrajanje u listi (unordederd list):
•XML
•HTML
•DTD
•CSS
•XSL
<OL>
<LI>JavaScript
<LI>VB Script
<LI>Java
<LI>PHP
<LI>C#
</OL>
Tag <OL> služi za uređeno
nabrajanje u listi (ordederd list):
1.JavaScript
2.VB Script
3.Java
4.PHP
5.C#
<DL>
<DT>PHP jezik
<DD>Sličan C jeziku a namenjen WEBu
ovaj programski jezik postao je izuzetno
popularan.
</DL>
Tag-ovi (DL, DT i DD) služe u
definicijskim listama za nabrajanje s
uvlakama:
PHP jezik
Sličan C jeziku a namenjen
WEB-u ovaj programski jezik
postao je izuzetno popularan.
Primer
<html>
<head>
<title>Liste</title>
</head>
<body>
<p>Ovo je primer
liste:</p>
<dir>
<li>Voce:
<dir>
<li>jabuka</li>
<li>kruska</li>
<li>jagoda</li>
</dir>
</li>
<li>Povrce:
<dir>
<li>paprika</li>
<li>kupus</li>
<li>paradajz</li>
</dir>
</li>
</dir>
</body>
</html>
Primer
<html>
<head>
<title>Uredjena lista</title>
</head>
<body>
<p>Ovo je primer uredjene
liste:</p>
<ol start="1">
<li>Voce:
<dir>
<li>jabuka</li>
<li>kruska</li>
<li>jagoda</li>
</dir>
</li>
<li>Povrce:
<dir>
<li>paprika</li>
<li>kupus</li>
<li>paradajz</li>
</dir>
</li>
</ol>
</body>
</html>
Primer
<html>
<head>
<title>Uredjena lista
(2)</title>
</head>
<body>
<p>Ovo je, takodje,
primer uredjene
liste:</p>
<ol start="1">
<li>Voce:
<ol>
<li>jabuka</li>
<li>kruska</li>
<li>jagoda</li>
</ol>
</li>
<li>Povrce:
<ol start="4">
<li>paprika</li>
<li>kupus</li>
<li>paradajz</li>
</ol>
</li>
</ol>
</body>
</html>
Definicione liste
„
„
„
„
„
„
Ove liste se koriste kod posebne vrste prikaza
teksta
Definišu se pomoću tagova <dl>, <dt> i <dd>
Tag <dl></dl> se koristi za otvaranje i
zatvaranje definicione liste
Tag <dt></dt> se koristi za kreiranje naslova
stavki koje se navode u listi
Tag <dd></dd> se koristi za definisanje sadržaja
svake od navedenih stavki
Ove liste mogu da se kreiraju i ako se tagovi
<dt> i <dd> ne upare
Sa uparenim tagovima
<DL>
<DT> Prvi trimestar
<DD> Traje od xxx do xxx</DD>
</DT>
<DT> Drugi trimestar
<DD> Traje od xxx do xxx </DD>
</DT>
<DT> Treći trimestar
<DD> Traje od xxx do xxx </DD>
</DT>
</DL>
Bez uparivanja
<DL>
<DT> Prvi trimestar
<DD> Traje od xxx do xxx
<DT> Drugi trimestar
<DD> Traje od xxx do xxx
<DT> Treći trimestar
<DD> Traje od xxx do xxx
</DL>
Pozadinski zvuk
<bgsound src=”imeaudiofajla.format” loop=”broj”>
„
Audio fajl se mora nalaziti u istom direktorijumu kao i
kod, inače se mora zadati putanja pre imena fajla.
„
Ovaj fajl se kao i slika zapisuje kao ime i format.
„
Formati koji su podržani u HTML-u su Wav, AU, MP3 i
MIDI
„
Broj koji se definiše u atributu LOOP određuje koliko
puta se sekvenca ponavlja. Upisivanjem broja 2, ide
dva puta i slično, dok stavljanjem -1 ili infinite
ponavlja se dok korisnik posmatra stranicu.
Zvuk
„
„
Koristi se <EMBED> tag.
Ovaj tag podržava uobičajene formate kao što su
.wav, .mid, .mp3, i .au.
Primer:
<embed src="filename.ext" width="x" height="x"
autoplay="x" hidden="x" loop="x" volume="x">
</embed>
„
Zvuk
SRC: URL (relativna ili apsolutna putanja) do audio fajla
CONTROLS: CONSOLE tj. SMALLCONSOLE.
CONSOLE definiše 144 piksela za širinu i 60 za visinu.
SMALLCONSOLE definiše 144 piksela za širinu i 15 za visinu.
HEIGHT i WIDTH: Definišu veličinu prostora za objekat embed
taga. Kod nekih browsera je obavezan
LOOP: Definiše koliko puta se sekvenca ponavlja. Ako se ništa ne
definiše, izvršava se samo jednom
AUTOSTART: Ako je True tada se zvuk aktivira po učitavanju
stranice, dok se za False vrednost mora postaviti taster kojim
korisnik upravlja
Zvuk
HIDDEN: Vrednost TRUE sakriva konzolu, dok je False prikazuje.
Upotreba HIDDEN i AUTOSTART kao TRUE postiže se efekat isti kao i
primenom BGSOUND.
VOLUME: Vrednost između 0 i 100 za definisanje nivoa zvuka.
ALIGN: LEFT i RIGHT.
HSPACE i VSPACE: horizontalni odnosno vertikalni prostor oko
konzole u pikselima.
Flash
„
Flash objekat se može uključiti u HTML kod korišćenjem taga
embed
„
Kao i kod drugih objekata treba definisati putanju do objekta
(sa src) dimenzije (width i heigth)
„
Poželjno je postaviti kvalitet koji se očekuje (quality), tip
(type) i putanju za plagin-ove (pluginspage)
Primer:
<embed src="http://pera.com/folder/1.swf" quality="high"
pluginspage="http://www.macromedia.com/go/
getflashplayer"
type="application/x-shockwave-flash"
width="568" height="32">
</embed>
Toliko za sada !!!
Visoka škola strukovnih studija za
informacione i komunikacione tehnologije
Beograd
WEB DIZAJN
Organizacija sajta
Organizacija sajta
„
„
„
„
Da bi sadržaj prikazan u stranici lakše
organizovao, ali i prikazivao isto u različitim
pretraživačim, potrebno je da se organizuje
Organizacija podrazumeva pravljanje strukture
sajta i definisanje koje deo stranice ja namenjen
za prikaz konkretnog sadržaja (slike, teksta,...)
Ovo treba da bude prva faza u kreiranju sajta
Na primer, šema
jedne strane
izgleda ovako
Organizacija web strane
„
„
Organizacija je može uraditi na tri načina:
• Pomoću frame-ova (starija tehnika)
• Pomoću tabela (Neki preraživači ne vole)
• Pomoću stilova tj. CSS-om (preporučljivo)
Upotreba frame-ova omogućava da se više različitih html stranica
nađe u jednoj. Ovo može da bude loše kod rangiranja u
pretraživačima, jer je nejasno koja stanica nosi glavnu informaciju,
i sta će biti sadržaji ostalih delova koji se naknadno učitavaju u
početnu stranu. Dobra strane je što su delovi stranice fizički
odvojeni i struktura stranice je vrlo stablna, ali ne uvek i estetski
efikasna.
FRAME -ovi
Navigacioni meni - frejmovi
„
Koristi se za nezavisni prikaz više stranica
istovremeno
Najprostiji primer je meni i deo za sadržaj
„ Primer:
<frameset cols=“100,400,*”>
<frame src=“meni.html” name=“left”>
<frame src=“telo.html” name=“right”>
</frameset>
„
Ovim se na prvih 100 piksela sa leve strane
učitava meni.html, a u narednih 400 telo.html.
Ime se definiše da bi se delovi raspoznavali, ali
se nigde ne vidi vrednost ovog atributa.
Atributi frejmova
„
„
„
„
„
„
„
„
„
„
„
„
„
„
„
„
„
SRC: definiše adresu dokumenta koji će se učitati u okviru frejma.
BORDERCOLOR: Definiše boju za ivicu frejma.
FRAMEBORDER: Vrednost '1' ili 'yes' ovog atributa prikazuje granicu
frejma, dok vrednost '0' ili 'no' ne prikazuje.
MARGINWIDTH: Definiše veličinu praznog prostor između leve i desne
strane frejma i njegovog sadržaja izražen u pikselima.
MARGINHEIGHT: Definiše veličinu praznog prostor između vrha i dna
frejma i njegovog sadržaja izražen u pikselima.
NAME: Specificira ime frejma koje se može koristiti u okviru drugih
programskih modula, kao što su JavaScript ili VBScipt.
NORESIZE: Aktivnom vrednošću ovog atributa se sprečava korisnik da
menja zadatu veličinu frejma. Ovaj atribut se samo navodi bez ikakve
vrednosti.
SCROLLING: Vrednosti ovog atributa su 'YES', 'NO' i 'AUTO'. Ako je
vrednost 'YES' scroll bar će se pojaviti bez obzira da li je potreban iline,
'NO' će sprečiti njegovu pojavu, a sa 'AUTO' če se pojaviti samo kada je
potreban
Linkovi navigacionog menija
„
Kada se koriste navigacioni meniji treba voditi
računa kod korišćenja linkova i definisanja u kom
delu treba da se učita strana
Primer:
<a href=“Kontakt.html” target=“right”> Pišite
nam</a>
„
Ovim se klikom na link Pisite nam, otvara strana
Kontakt.html, u delu koji se zove right
Primer
<html>
<head>
<title>Naslov</title>
<frameset cols="25%,75%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
</head>
</html>
Margine za frejmove
<html>
<head>
<title>Naslov</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso8859-1">
<style type="text/css">
<!-body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body>
<img src="LOGO.gif" width="296" height="110">
</body>
</html>
TABELE
Organizacija stane kroz tabelu
„
„
„
„
„
„
Tabela se vrlo često koristi kao alat da se stranica
organizuje
Ovo je nasleđe koje dolazi iz ne poznavanja CSS-a, ali i sa
analogije sa svim ostalim programima koji su u širokoj
upotrebi (Word, Excel, ...)
Organizacija sajta tabelom podrazumeva da je cela strana
jedna tabela, kojoj su ivice nevidljive
U svakoj od ćelija tabele nalaze se neki sadržaji sajta
(baneri, navigacija, tekstovi, slike ...), ali i cele manje
tabele da bi stuktura bila “čvršća” i lakša za rad
Za velike sajtove, ova struktura je vrlo komplikovana jer
postoji veliki broj ugnježdenih tabela, pa se ne preporučuje
Takođe se pokazuje kao loša za rangiranje u pretražvačima
Primer organizacije kroz tabelu
HTML tabele
„
„
„
„
„
Tabele se sastoje od vrsta i kolona
U HTML-u tabela se sastoji od redova koji su podeljeni
na polja, a prva polja svih redova čine prvu kolonu,
druga polja drugu kolonu, itd.
Upotreba tabela je istovremeno za prikaz tabelarnih
podataka i za generalno uređenje web strane
Za kreiranje tabele potrebna su tri elementa:
• TABLE - za tabelu,
• TR - za red,
• TD - za polje.
TH za zaglavlja vrsta ili kolona
HTML oznake tabela
<table> </table> Oznaka za prostor tabele
„ <tr> </tr> Podaci između su zasebni redovi
tabele
„ <td> </td> Podaci izmеđu pripadaju koloni
tabele
„ Primer:
<table>
<tr><td>A</td>
<td>B</td></tr>
<tr><td>1</td>
<td>2</td></tr>
</table>
„
A B
1 2
Ivice, zaglavlja i naslovi tabela
Atributi za tabele:
„
„
„
„
„
„
„
Border – definiše širinu linije u pix
<caption></caption> Tekst između je ispisan
izdvojen kao naslov
<th></th> Tekst između je zaglavlje
cellspan – za spajanje ćelija u koloni
rowspan - za spajanje ćelija u redu
Atribut CELLSPACING definiše rastojanje između
ćelija u tabeli
Atribut CELLPADDING definiše rastojanje od ivice
do sadržaja ćelije
Primer
<table border”1”>
<caption> Ime tabele</caption>
<tr><th>Prvi</th>
<th>Drugi</th></tr>
<tr><td>A</td>
<td>B</td></tr>
</table>
Ime tabele
Prvi
Drugi
A
B
Boja ivica i ćelija
Bojenje ivica:
<table bordercolor=“#00CC00”>
„ Ovakav zapis odnosi se na celu tabelu
„ Za bojenje vrste, kolone ili ćelije treba oznaku
staviti između naznaka za vrstu, kolonu ili ćeliju
„ Za crtanje u dve boje koriste se
Bordercolorlight – gornja i leva ivica
Bordercolordark – gornja i desna ivica
„ Za pojedinačna bojenja ivica je atribut
<stile=“border-top-color:#00CC30; ostale”>
Boja pozadine tabele
Popuna tabele bojom
<table bgcolor=“#000FF0”>
„
Popuna tabele slikom
<table background=“adresa foldera/pera.jpg”>
„
Ako se boji vrtsa, kolona ili ćelija sve ostaje isto
samo se ispred dodaje konkretan tag. Na primer za
bojenje pozadine kolone li popunu slikom
<td bgcolor=“#000FF0”>
<td background =“adresa foldera/pera.jpg”>
„
Primer
<html>
<head>
<title>Tabela</title>
</head>
<body>
<TABLE BORDER CELLPADDING="8"
CELLSPACING="4" BGCOLOR=yellow>
<TR>
<TH> English </TH>
<TH> Spanish </TH>
<TH> German </TH>
</TR>
<TR>
<TD> one </TD><TD> uno </TD> <TD> ein </TD>
</TR>
<TR>
<TD> two </TD><TD> dos </TD><TD> zwei </TD>
</TR>
<TR>
<TD> three </TD> <TD> tres </TD> <TD> drei </TD>
</TR>
<CAPTION ALIGN="BOTTOM"> <B>Tabela 1</B>: Brojanje na
raznim jezicima</CAPTION></TABLE>
</body>
</html>
Razmak između ivice i sadržaja
„
Razmak je definisan u pix!
„
Atributi su cellspacing i cellpadding
Primer
Razmak između ćelija u tabeli
„
<table border=“1” cellspacing=“3”>
„ Primer
Razmak između ivice ćelije i sadržaja
<table border=“1” cellpadding=“7”>
Dimenzije tabele i ćelija
„
„
Atributi width i height
Relativne veličine – u odnosu na dimenziju web
čitača
<table width=“90%” height=“30%”> /za tabelu
<td width=“90%” height=“30”> /za ćeliju
„
Apsolutne veličine – nezavisne od veličine web
čitača
<table width=“750” height=“250”> /za tabelu
<td width=“50” height=“20”> /za ćeliju
Primer
<table width="60%" border="3">
<tr>
<td rowspan=3 >A</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
Primer
<table width="60%" border="3">
<tr >
<td colspan=2>Spojene 2 kolone </td>
</tr>
<tr>
<td>b</td>
<td>2</td>
</tr>
<tr>
<td>c</td>
<td>3</td>
</tr>
</table>
Primer
<TABLE BORDER=3>
<TR>
<TD ROWSPAN=2>Pera</TD>
<TD COLSPAN=2>Mika</TD>
</TR>
<TR>
<TD>Laza</TD>
<TD>Đoka</TD>
</TR>
</TABLE>
Poravnanje sadržaja ćelija
„
„
Atributi: left, right, center za horizontalno: *align*
Atributi: top, middle, baseline, bottom za vertikalno:
*valign*
Primer
<table border=“2” width=“90%” height=“100%”>
<tr><td width=“20%” align=“center”> Centralni
tekst</td></tr>
<tr><td width=“25%” valign=“top”> Gornji
tekst</td></tr>
</table>
„
Odnos tabele i web strane
„
„
Poravnavanje cele tabele u odnosu na web čitač
je u atributu div pre tabele, jer se odnosi na celu
tabelu
Primer
<div align=“right”>
<table…..>
</table>
</div>
Deljenje slike u tabeli
„
„
„
„
Velike slike se prikazuju tek kada se cele učitaju
Da bi se transfer slika smanjio, slika se seče u
manje delove (simetrično)
Deljenjem u manje delova i spajanjem u tabeli
može se postići da konačna veličina slike bude
manja i do 30%
Ova ušteda je posledica kompresije po broju boja
u slici, pa postoji verovatnoća da deo slike ima
manje boja i da se može više sabiti.
Toliko o tabelama !!!
Visoka škola strukovnih studija za
informacione i komunikacione tehnologije
Beograd
WEB DIZAJN
CSS stilovi
Sajt kreiran CSS-om
Sajt kreiran CSS-om, ali bez njega
CSS stilovi
„
-
Cascading Style Sheets
Namena: razdvojiti sadržaj HTML dokumenta od
strukture (definisati na jednom mestu parametre
za elemente stranice: font, horizontalne linije i sl.)
-
CSS omogućava da se unapred odredi stil
-
Izbegava se ponavljanje istih parametara
-
-
CSS u zaglavlju HTML dokumenta u obliku
komentara
CSS file možemo povezati sa svim delovima
stranice i na taj način kontrolisati sadržaj cele
stranice
Definisanje CSS-a
CSS se definiše u zaglavlju HTML dokumenta u
obliku komentara
<style type=“text/css”>
ELEMENT
</style>
Style tag se stavlja unutar taga Head
<head>
<style type="text/css">
h1 {color:blue; font-size:20px ; font-family: verdana}
</style>
</head>
<body>
<h1>pera</h1>
</body>
CSS terminologija
„
„
„
„
Unutar dela za definisanje css-a prvo se definiše
ime stila koji će se kasnije pozivati. Npr. prvi.
Svi atributi stila pišu se u vitičastoj zagradi
Atributi su boja slova-color, boja pozadine slovabackground, veličina- font-size, font- font-family,
uvlačenje- text-indent ...
Posle svakog od atributa dolaze dve tačke iza kojih
ide vrednost tog atributa
prvi {color: blue; font-size: 20px ; font-family: verdana}
„
„
Između dva atributa stavlja se tačka-zarez da bi se
odvojili.
Svaki stil se poziva svojim imenom i završava istim
CSS u liniji taga
<html>
<head>
<meta http-equi="content-style-type" content="text/css">
</head>
<body>
Kreiranje CSS stilova u liniji.
<P style="font-size: 20pt">Kreiranje CSS stilova u liniji.</p>
<P style="font-size: 30pt; color:green">Kreiranje CSS stilova
u liniji. </p>
<P style="font-size: 40pt; color:red; background-color:
#FFFF00"> Kreiranje CSS
stilova u liniji. </p>
</body>
</html>
Interni CSS - Atributi teksta
<html>
<head>
<style type="text/css">
b {font-family:arial;
font-size:14px; color:red}
</style>
</head>
<body>
<b>Ovo je recenica sa atributima
dodeljenim u stilovima tagu B
</b>
</body>
</html>
Eksterni CSS - Atributi teksta
<html>
<head>
<link rel="stylesheet" type="text/css" href="pozadina.css">
</head>
<body> Dodela zute boje pozadini i plave boje tekstu !</body>
</html>
Kod “pozadina.css”
body { font-family: Verdana;
color: blue; background-color: yellow}
CSS atributi za pozadine
„
background-color
primer { background-color: yellow; }
„
background-image
primer { background-image: url(slika.jpg); }
„
background-repeat (horizontalno ponavljanje (repeat-x),
vertikalno (repeat-y), u oba pravca (repeat), ili bez
ponavljanja (no-repeat))
pera {
}
background-image: url(slika.jpg);
background-repeat: repeat-x;
Atributi za linije
line-height (normal, broj (1 vrednost single-spaced, 2
double-spaced, i 1.5 je vrednost između prve dve), mere su
(px ili pt), ili procenat)
Primer { line-height: 2; }
„
border-color (border-top-color, border-right-color, borderbottom-color i border-left-color)
Primer { border-color: blue; }
„
border-style (border-top-style, border-right-style, borderbottom-style i border-left-style)
Primer { border-style: ridge; }
„
border-width(border-top-width, border-right-width, borderbottom-width i border-left-width)
Primer { border-width: 3px; }
„
Atributi za tekst
font-family
Primer {font-family: Arial, Helvetica, sans-serif;}
„
font-size (xx-small, x-small, small, medium, large, xlarge, xx-large, larger, smaller, pikseli (px), tačke (pt),
procenat od veličine slova (%)
Primer { font-size: 8px; }
„
font-style (normal, italic)
Primer { font-style: italic }
„
font-weight (bold, bolder, lighter, normal, 100, 200,
300, 400, 500, 600, 700, 800, 900)
Primer { font-weight: bold; }
„
Atributi za tekst
letter-spacing (pt ili px)
Primer { letter-spacing: 2.0 px }
„
link
A:link { color: green; } A:visited { color: #FF0000; }
„
text-align(left, right, center)
Primer { text-align: right; }
„
text-decoration (underline, overline, line-through ili none)
A:link { text-decoration: overline; }
„
text-transform
H1 { text-transform: capitalize; }
„
text-indent : pozotivna vrednost uvlači prvi red, a negativna uvlači
ostatak teksta u odnosu na prvi red, vrednosti su px, pt i %
Primer { text-indent: 30 px; }
„
Atributi
list-style-type
Primer { list-style-type: square; }
„
list-style-image
Primer { list-style-image: url(slika.jpg); }
„
vertical-align(bottom, top, baseline, middle, sub,
super, text-bottom, ili text-top)
Primer { vertical-align: super; text-size: smaller }
„
Primer
<html>
<head>
<style type="text/css">
prvi {color: blue; font-size: 20px ; font-family: verdana}
drugi {color: white; background:green ; font-family:
helvetica; text-indent:2cm}
</style>
</head>
<body>
<prvi >Ovo je primer za CSS</prvi><br>
<drugi>Ovo je primer za CSS</drugi>
</body>
</html>
Primer
<html>
<head>
<title> CSS stilovi</title>
<style type="text/css">
<!-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
font-style: normal;
font-weight: normal;
font-variant: small-caps;
text-transform: uppercase;
color: green; }
-->
</style>
</head>
<body>
<font> Dobar dan! </font>
</body>
</html>
Primer
<style type="text/css">
<!-h1 {
color: #33FF00;
text-decoration: blink; }
-->
</style>
Učitava se slika sa
web-a preko koje
ide tekst definisan
stilom
<body background="http://www.pera.com/slika.jpg">
<p>
<h1> Tekst za ispisivanje< /h1 >
</p>
</body>
Primer
<head> <style type="text/css">
<!-font {
letter-spacing: 0.4cm;
word-spacing: 1cm;
font-family: "Times New Roman", Times, serif;
font-size: x-large;
color: #FFFF00;
background-repeat: no-repeat;
text-decoration: blink;
background-position: center;
background-color: #000000;
font-weight: bold;}
-->
</style>
</head>
Primer
<head>
<style type="text/css">
<!-a:link {
color: #000000; }
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
text-decoration: none; }
--> </style> </head>
<body>
<a href=“slika1.jpg" >dobar dan </a>
<p></p>
<a href=“slika2.jpg"> dobar dan 2 </a>
<p></p>
</body>
CSS - div
„
„
„
„
„
„
Svi primeri do sada bili su tzv. Preefinisani tagovi
To znači da su imena stilova bila imena tagova i sva
pravila koja smo definisali su se odnosila na postojeće
tagove
Ovo je vlo ograničavajuće, jer je broj tagova limitiran
Da bi se to izbeglo koristi se tag div ili spam
Tag div služi da odredi deo prostora na koji će se
primeniti neka pravila (prostor u proizvoljnom broju
redova)
Tag spam radi isto ali samo za jednoredne zapise
CSS - div
„
„
„
Sam tag div nema nikakvu grafičku ulogu, i može
se smatrati kao zagrada u matematici )odvajanje
nekih celina)
Celina koja je dodeljena jednom div-u se može
opisati nekim pravilima u CSS-u
Za to postoje dva načina:
•
•
Direktno u kodu posmatranog div-a
Kao ime klase stila u delu gde je CSS-u
CSS - div
„
„
„
„
Ako je organizacija sajta takva da pozicionira tag div i
njegov sadržaj, tada je CSS zadužen samo za estetiku
(boju, font, veličinu, margin, ...)
Primer za kod u liniji div-a
<div style="display:block;font-size:18px; color:red;fontfamily: Arial;">
Tekst na koji se primenjuje pravilo div-a
</div>
Primer za klasu stila
<div class=“ime”>
Tekst na koji se primenjuje pravilo div-a
</div>
U tagu <stile> se definiše klasa ime
.ime{display:block;font-size:18px; color:red;font-family:
Arial; }
Div za organizaciju
„
„
„
Ako se div tag nije nekom drugom tehnikom pozicioniran na
strani (tabele), tada se u njemu definišu atributi za
pozicioniranje
U tom slučaju dobro je koristiti više div tagova
Matični da definiše oblast delovanja, dok ugnježdeni da
definišu estetiku za sadržaje
<div style="display:block; float:right; clear:both;
width:50%;">
<div style="display:block;font-size:18px; color:red;font-family:
Arial;">
Tekst na koji se primenjuje pravilo div-a
</div>
</div>
Klase
„
„
Klase se koriste kada se pravi veliki broj stilova, koji
su na neki način povezani (više vrednosti za isti
atribut), ali imaju neke razlike koje se primenjuju na
određene delove teksta, tabele ....
Klasa se definiše tako što se iza imena stila doda
tačka pa ime klase u formatu
<head>
<style type="tekst/css">
h1.imeklase {color:blue; font-size:20px ; font-family: verdana}
</style>
„
Ako je prethodno definisan stil, dovoljno je u
definisanju klase pisati .ime_klase
Pozivanje klase
„
„
„
Klasa se poziva na deo teksta na koji se dati
skup pravila želi primeniti
Kada se poziva prvo se poziva ime stila, pa tek
onda ime klase, pri čemu se ime klase definiše
ispod znaka navoda
Kada se završava, završava se samo imenom
stila, a ne i klase
Primer:
<h1 class="imeklase"> Tekst na koji se primenjuje
dati skup pravila</h1>
Div - class / id
„
„
„
CSS sa taom div može da komunicia preko dva
njegova atributa: class i id
Ako se koristi atribut class tada važe do sada
prikazana pravila
Ako se koristi atribut id tada se u imenu stila
nalazi oznaka #
#centralni_tekst {color: green}
Primer klasa
primer.css
primer.html
pasus.desno
{
text-align: right;
font-size: small
}
<html>
<head>
<link rel="stylesheet" type="text/css"
href="primer3.css" />
</head>
<body>
<pasus class=“right ">
Tekst ispisan sa desnim poravnjanjem.
</pasus>
<pasus class="center">
Pasus koji je centriran.
</pasus >
<h2 class="left">
Sadrzaj unutar H2 koji je poravnat levo
</h2>
</body>
</html>
pasus.sredina
{
text-align: center;
font-style: bold
}
.levo{
text-align: left;
letter-spacing: 2px
}
CSS za skrivanje
<html>
<head>
<style type="text/css">
.skrivanje{
visibility:hidden;
}
</style>
</head>
<body>
nesto
<div class="skrivanje">
<table border="1" >
<tr>ddd</tr>
</table >
</div>
</body>
</html>
Bez CSS-a
Sa CSS-om
Imena klasa
„
„
Ako se ime klase poklapa saimenom taga, tada u
sintaksi nema .
Ako je ime klase nikatko onda se piše . ispred imena
kalse
<style type=“text/css”>
p {margin-left: 20px}
body {background-image:url("images/slika.gif")}
.novi{font-family: Arial;}
.centralni_deo{font-family: Arial;}
</style>
Organizacija web strane
„
„
„
Sadržaj na web stranici se generalno može urediti
pomoću frejmova i tabela, ali su ovi načini
nepopularni i “neprijateljski” orjentisani od strane
Googla
Mnogo bolji način za struktuiranje sadržaja
stranice je upotreba taga div
Pojedine celine na stranici treba dodeljivati div
tagovima(koji su najniži u hijerarhiji ugnježdenih
tagova), a njihov položaj i karakteristike
definisati u CSS-u
<html>
<head><link rel="stylesheet" type="text/css" href="divovi.css"></head>
<body>
<div id="osnova">
<div class="kolona">
<h1>Imena</h1>
<p>Pera</p>
<p>Mika</p>
</div>
<div class="kolona">
<h1>To je to !</h1>
</div>
</div>
</body>
</html>
divovi.css
#osnova {width: 300px; font: 12px arial, sans-serif; margin:
auto;}
.kolona { width: 150px; height: 140px; padding: 5px; border:
1px solid #000000; float: left;}
.kolona p { font: 12px arial, sans-serif;}
.kolona h1 { width: 350px; font: bold 14px arial, sans-serif;
color: blue; border-bottom: 1px solid yellow}
Primer organizacije strane
<html>
<head>
<link rel="
stylesheet"" type="text/css
primer.css">
">
rel="stylesheet
type="text/css"" href="
href="primer.css
</head>
<body>
<div id="strana
">
id="strana">
<div id="header">
<h1>Zaglavlje
<h1>Zaglavlje </h1>
</div>
<div id="horizontalni_meni
">
id="horizontalni_meni">
<div id="linkovi_u_horizontalnom_meniju
id="linkovi_u_horizontalnom_meniju ">
Pera Mika Laza
</div>
</div>
<div id="vertikalni_meni
">
id="vertikalni_meni">
<div class="blok_u_vertikalnom_meniju
">
class="blok_u_vertikalnom_meniju">
<h1>Menu</h1>
gg<
gg<br>
br>
gg<
gg<br>
br>
</div>
</div>
</div>
<div class="blok_u_vertikalnom_meniju
">
class="blok_u_vertikalnom_meniju">
<h1>Menu</h1>
hh<
hh<br>
br>
hh<
hh<br>
br>
</div>
<div id="vertikalni_meni_desni
">
id="vertikalni_meni_desni">
<div class="blok_u_vertikalnom_meniju_desni
">
class="blok_u_vertikalnom_meniju_desni">
<h1>Menu</h1>
gg<
gg<br>
br>
gg<
gg<br>
br>
<div class="blok_u_vertikalnom_meniju_desni
">
class="blok_u_vertikalnom_meniju_desni">
<h1>Menu</h1>
....
Mogućnosti CSS-a
„
„
„
„
CSS-om se mogu definisati najfiniji detalji na
prezentaciji
Najčešće se ovaj veliki skup pravila napiše
jednom, pa ga web master kopira na sve svoje
prezentacije koristeći ih po želji
Veličina teksta kojim se opisuju stilovi je toliko
minorna, da se ne vodi računa o tome da li se na
nekom sajtu koriste svi opisi u velikom skupu css
Pored standardnih karakteristika boje teksta,
pozadine, veličine, uvlačenja, razmaka, margina
mogu se postaviti i senke, preklapanja,
poravnanja, ivice, pasusi, plutajući tekst itd.
<html>
<body>
<input type="text" size="20"
style="background:yellow; color:red"
value="Inicijalno ispisan tekst !">
<br><br>
<input type="radio" style="background:blue">
Izbor <br><br>
<select size="1" style="background:#008000;
color:#FAF519">
<option selected>Prvi element </option>
<option>Drugi</option>
<option>Treci</option>
</select><br><br>
<input type="button"
style="background:#BFE2F9;
color:#E62B86; font-weight:
bold" value="Klikni ovde !">
</body>
</html>
Primer
Vizuelni efekti
<html>
<head>
<style>
p {height: 350px; width: 450px; font-size: 44pt;
filter: progid:DXImageTransform.Microsoft.Shadow
(color=’gray’, direction=120, strength=6)
}
</style>
</head>
<body>
<p>
Get a Drop Shadow Effect
</p>
</body>
</html>
Vizuelni efekti
filter:progid:DXImageTransform.Microsoft.dropshadow
(OffX=5, OffY=5, Color=’gray’, Positive=’true’)”
Vizuelni efekti
p {height: 350px; width: 450px; font-size: 44pt;
filter:progid:DXImageTransform.Microsoft.MotionBlur(
Strength=5,Direction=120);
}
Toliko o CSS stilovima !!!
Visoka škola strukovnih studija za
informacione i komunikacione tehnologije
Beograd
WEB DIZAJN
HTML forme (obrasci)
Forme
„
„
„
Forma predstavlja skup grafičkih elemenata koji
su definisani u HTML, sa ciljen da korisniku
omoguće da izvrši unos nekog podatka
Forma se najčešće sreće u formularima, gde se
očekuje da se izvrši registracija, ali i u obliku
samo dva tekstualna polja za registraciju
U formama se najčešće koriste : tekstualna polja,
radio tasteri, chech polja i tasteri
HTML obrasci
„
„
„
1.
2.
3.
4.
Primena obrazaca: kod prikupljanja različitih
podataka od korisnika
Oznaka obrasca je <form> </form>
Atributi ove oznake su :
Action – Web ili Url adresa kojoj čitač šalje
podatke nakon potvrde unosa Submit. Ako je to
mail treba staviti mailto:adresa.
Method – je način slanja. Može biti POST ili
GET. Post sakriva podatke koje prenosi dok Get
prikazuje u traci Addresse.
Title – je ime obrasca kome će se pristupiti
Enctype – tip kodiranja pri slanju
HTML forme
Forme su delovi prezentacije u koje će se upisivati
određeni podaci
„ Elementi forme mogu biti:
• text – tekstualno polje,
• radio – radio buttons,
• checkbox,
• select – padajući meni u kome se nalaze vrednosti
definisane u tagu option,
• submit – akcija koja treba da se izvrši
„ Tag za unos teksta je Input, pri čemu se mora
definisati tip, ime promenljive i dužina
„ Atributi:
Type, id, name, size, maxlength, disabled ...
„
Unos teksta
Unos u tekstualno polje:
<input type="text" name= "polje1" value="with an initial value">
Višeredno tekstualno polje:
<textarea name= "polje2" cols="24" rows="2">Hello</textarea>
Polja sa password-om:
<input type="password" name= "polje3" value="secret">
Tag label
„
„
„
„
„
„
Tag label se vrlo često koristi u strukturi formi, iako o
definiciji forme njoj striktno i ne pripada
Ovj tag služi da se kroz njegov sadržaj prikaže statički
tekst, koji korinik ne može da menja
Iz tog razloga ne spada striktno u elemente forme
Međutim, često se koristi da se statički deo forme
prikaže kroz ovaj tag, ili alternativno direktno u HTMLa
Label je u višim programskim jezicima postao
standard, naročito kada se radi o pozicioniranju
teksta, pa se preporučuje da s koristi
<label> Unesite ime: </label>
Tasteri
„
„
„
Taster Submit:
<input type="submit" name="ime1" value="Submit">
Taster Reset :
<input type="reset" name="ime2" value="Reset">
Taster:
<input type="button" name="ime3" value="Push Me">
„
„
„
Submit: šalje podatke
Reset: Vraća sve vrednosti polja na
inicijalne
Taster : izvršava neku akciju koja
je sakrivena iza Java Script kôda
Primer
„
Primer
<html>
<body>
<form name="proba" action=“pera.php" metod="POST“
enctype="application/x-www“>
<p> Ime:<input type="text" name= "Ime" size="12">
Prezime:<input type="text" name="Prezime" size="15">
<p>
<p> <input type=“submit” value=“submit”>
<input type=“reset”><p>
</form>
</body>
</html>
Taster file
„
„
Poseban tip tastera predstavlja taster tipa file, i
koristi se kod upload-a ili definisanja putanje
Sintaksa za ovaj taster je
<input type="file" name=“ime" id=“ime_id" />
„
„
Ovaj taster se u browser-u prikazuje kao tekstualno
polje i taster Browse (inicijalno)
Klikom na Browse, dobija se prikaz strukture
podaaka na lokalnom računaru
Kreiranje polja za čekiranje
„
„
Polja za čekiranje su drugi način popunjavanja
obrasca.
Definišu se oznakom checkbox
Atributi:
Type, id, name, value i checked
„
„
„
Value je oznaka koja se nakon submit šalje
serveru u formi ime/vrednost za taj check box.
Na taj način server za svaki box zna da li je
aktiviran ili ne
Checked govori čitaču da pre crtanja naznači
checkbox polje
Primer
„
Checkbox
Checkbox:
<input type="checkbox" name= " ne vidi se 1”
value= " ne vidi se 2" checked>
„
„
„
type: "checkbox"
name: Koristi se da bi se pozivao Java
script-om
value: oznaka koja se nakon submit šalje
serveru u formi ime/vrednost za taj check
box
Kreiranje radio dugmadi
„
„
„
„
„
Radio dugmad je modifikovani box u kome se
daje mogućnost izbora dva ili više parametra
Pošto je to modifikacija svi atributi ostaju isti,
samo se tip menja u radio
Za razliku od Checkbox, jednom označeno polje
postaje aktivno sve dok se drugo polje ne
aktivira. Deaktiviranje nije moguće ponovnim
klikom na isto mesto
Atributom checked neka od dve vrednosti
postavlja se u startu
I radio i box dugmad se kontrolišu script-om na
sličan način kao i tekst
Primer Radio buttons
Radio buttons:
<br>
<input type="radio" name="radiobutton“ value="myValue1">
male
<br>
<input type="radio" name="radiobutton" value="myValue2"
checked>
female
Padajuće liste
„
Padajuće liste su četvrti tip unosa u obrazac
Oznaka <select></select>
Podoznaka <option></option>
„
Atributi:
„
„
size (broj izabranih opcija), id, name,
multiple (izbor više opcija)
selected (početna vrednost),
value – ime/vrednost koja se vraća serveru
Primer Liste
„
Lista:
<select name=“pera">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>
„
Argumenti:
• size: broj vidljivih polja (default je "1")
• multiple: ako je "true", bilo koji broj
elemenata može biti selektovan (default
je "false")
Primer
<select size=“1” name=“predmeti”>
<option value=“M”> Matematika </option>
<option value=“E”> Engleski </option>
<option value=“R”> Racunari </option>
<option value=“MR”> Mreze </option>
</select>
Primer
<input type=“checkbox” name=“prvi” value=“ON”>
Prvi tekst boksa
<input type=“checkbox” name=“drugi”
value=“ON”> Drugi tekst boksa
…
<input type=“radio” value=“Yes” name=“treci” >
opcija1
<input type=“radio” value=“No”
checked name=“treci” > opcija2
Primer
<html>
<head>
<title>Get Identity</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action=“www.nesto.com">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<input type="radio" name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female</p>
</form>
</body>
</html>
<html>
<head><title>Prijavni formular</title></head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<body bgcolor="#FFFFFF" text="#000000">
<div align="left"><b>Kreiranje novog naloga</b> </div><br>
<form name="kreiranjemaila" method="post" action="">
<hr>
<div align="left"><b>Lični podaci</b> </div><br>
Ime: <input type="text" name="ime"> <br> <br>
Prezime: <input type="text" name="prezime"> <br> <br>
Pol:
Muški <input type="radio" name="pol" value="pol" checked>
Ženski <input type="radio" name="pol" value="pol" > <br> <br>
Adresa: <input type="text" name="adresa"> <br> <br>
Poštanski broj: <input type="text" name="postBroj" size="5"
maxlength="5"> <br>
Datum rođenja: <select name="mesec">
<option>Januar</option>
<option selected>Mesec</option>
<option>Februar</option>
<option>Mart</option>
<option>Novembar</option>
<option>Decembar</option>
</select>
<select name="dan">
<option>1</option>
<option selected>Dan</option>
<option>2</option>
<option>3</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<br> <br>
Način plaćanja:
Keš<input type="checkbox" name="kes" value="checkbox"
value="checkbox">
Elektronski<input type="checkbox" name="elektronski" ><br><br>
<div align="center">
<input type="submit" name="potvrdi" value="POTVRDI">
<input type="reset" name="odustani" value="ODUSTANI">
</div>
</form>
</body>
</html>
Dodavanje skrivenih informacija
„
„
„
„
Skrivene informacije se postavljaju na sajt na isti
način kao i klasične, ali ih korisnik ne vidi.
Skrivene informacije služe web masteru, da
pored informacija koje šalje korisnik dobije i
informacije od značaja
Najčešće su to oznake vezane za datum, vreme,
broj logovanja itd.
Kôd
<input type=“hidden” name=“…”>
Name: LoginAttemps – broj logovanja
LoginDataTime – datum i vreme logovanja
HTML obrasci – definisanje okvira
„
„
„
Tag <fieldset> omogućava da se oko fomulara
defiše okvir koji ima estetski karakter
Ovaj tag se otvara (i zatvara) neposredno nakon
otvaranja forme (<form>)
Tag <legend> služi da se u <fieldset> definiše ime
koje se nalazi u gornjem levom uglu.
Primer
<html>
<body>
<form name="formular" method="post" action="pera.php">
<fieldset>
<legend>Naziv forme</legend>
User name: <input type="text" name="user" /><br/>
Password: <input type="text" name="pass" /><br/>
<input type="submit" value="Log in" />
</fieldset>
</form>
</body>
</html>
Toliko o obrascima !!!
Download

HTML - Visoka ICT škola