web viewpostoje elementi html-a koji se sastoje samo od jednog taga, ali postoji i veliki broj...
TRANSCRIPT
HTMLHTML je skraćenica od HyperText Markup Language. HyperText (u prevodu hipertekst) je tekst koji sadrži isprepletene hiperveze izmedju relevantnih reči, a postupak pravljenja hiperteksta se naziva hipertekstovanje. Kad se pojavio HTML jezik on je bio upravo takav da je sadržao samo hipertekst. Znači mogli ste da kliknete na pojedine reči i one bi vas poslale na neku drugu internet stranu ili pak unutar te iste strane ali u nekom njenom drugom delu. Medjutim kasnije se HTML razvijao i dodavane su nove mogućnosti manipulacije sa slikama, tabelama i tako dalje.
HTML je opisni skriptni jezik namenjen izradi web stranica. HTML ima elemente kojima se upravlja tekstom, paragrafima, citatima, linkovima, slikama i slično. Takodje postoje i elementi koji opisuju samu internet stranu brauzeru i pretraživačima u smislu kratkog opisa dokumenta, ključne reči koje su prisutne na stranici, podaci o autoru i slično. Ovi HTML elementi su poznati kao meta podaci i vidljivi su samo ako se pogleda izvorni HTML kod a ne i internet strana u brauzeru. Meta podaci se smeštaju umeta tagove. Kasnije će mo detaljnije videti o čemu se radi.
U principu možete napisati tekst u najobičnijem tekst editoru (na primer u notepad-u), snimiti taj tekstualni fajl sa ekstenzijom .html, ili samo .htm i pogledati ga u svom brauzeru. Videćete da će vaš brauzer prikazati vaš tekst. Ako taj fajl stavite i na host i linkujete adresu iz brauzera opet će vaš tekst biti vidljiv.
Medjutim ako želimo da nam stranica sadrži linkove, tabele, slike, i dizajnerske elemente koji su standard za internet strane, kao što su navigacijski dugmići i slično, onda moramo savladati HTML jezik kako bi smo sve to napravili.
TekstSkoro svaka internet stranica koristi običan tekst za prikazivanje većeg dela sadržaja. Normalno sadržaj može biti i u video formatu, zvučnom formatu, slikovnom itd., ali ipak tekstualni sadržaj najviše dominira internetom.
Kao što sam već u glavnom uvodu napisao vi možete tekst napisati i u notepad i da taj tekst fajl prebacite na host. Normalno tekst će biti prikazan kad linkujemo iz brauzera taj tekst dokument. Medjutim ako želimo da nam tekst bude u nekom fontu, ili neki pasusi da se razlikuju u fontu slova, bilo u smislu tipa slova, ili veličine (na primer naslov da bude napisan većim slovima), itd. onda moramo koristiti HTML elemente za izradu takve stranice. U ovom delu bavićemo se HTML elementima za manipulaciju tekstom.
TekstSvaka HTML internet stranica se u globalu sastoji od tagova. Početak taga je logički znak manje "< " a kraj taga je logički znak veće " > ". Izmedju ta dva znaka, ili tačnije rečeno unutar taga se smešta ime taga i atributi taga. Ime taga definiše o kom tagu se radi, a atributi definišu ponašanje i način prikaza označenog dela teksta ili dokumenta. Znači pomoću tagova se određeni deo teksta ili dokumenta odvaja od ostatka i na njega se primenjuju pravila definisana samim tagom.
Postoje elementi HTML-a koji se sastoje samo od jednog taga, ali postoji i veliki broj elemenata koji se sastoji od dva taga. Oni koji se sastoje od dva taga imaju početni i krajnji tag. Početni i krajnji tag se razlikuju po tome što krajnji ima kosu crtu " / " ispred imena taga a početni nema. Izmedju početnog i krajnjeg taga se nalazi tekst ili dokument na koji se primenjuju pravila koja definiše taj tag i njegovi atributi.
Sve ovo verovatno deluje apstraktno zato hajde sa konkretnim primerima i sve će se razjasniti. Otvorite NOTEPAD i krenite sa pisanjem.
Svaka HTML internet strana mora početi sa tagom <HTML>. Taj tag ima i krajnji tag i on je </HTML>. Sve izmedju ta dva taga je HTML dokument, i svaki brauzer zna pomoću tih tagova granicu HTML dokumenta.
Dalje u svakom HTML dokumentu mora se naći i par HEAD tagova. Naravno ne treba više napominjati da svi naredni tagovi, i sve što budemo učili se smešta izmedju <HTML> i </HTML> tagova. Znači imamo:
<HTML><HEAD></HEAD></HTML>
Ono što se smešta unutar HEAD tagova nije direktno vidljivo posetiocima stranice preko brauzera. Tu se smeštaju META tagovi koji opisuju dokument, govori ko je autor, koje su ključne reči na stranici, opis stranice za pretraživače i tako dalje. Ali tu se smešta i naslov web stranice koji je vidljiv u jezičku brauzera kad se strana otvori. Postoji jedan problem sa našim srpskim slovima kao što su šŠđĐčČćĆžŽ. Naime dok ih pišemo pri izradi HTML stranice oni su lepo vidljivi jer su definisani unutar našeg operativnog sistema. Ali kad tu HTML stranicu prebacimo na host i preuzme je brauzer on nezna za naša slova! Da bi mu definisali naša slova unutar HTML dokumenta unutar HEAD taga kao meta tag moramo staviti jedan od ova dva:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
Ukoliko želite da koristite ćirilicu, sve što treba je da u gornjem redu vrednost 1250 zamenite sa 1251. Za latinično pismo sa našim slovima postoji još jedna varijanta:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
I nakon svega ovoga naš HTML kod će izgledati:
<HEAD><META http-equiv="Content-Type" content="text/html; charset=windows-1250"><TITLE>Moja prva HTML web strana</TITLE></HEAD></HTML>
Glavni deo HTML dokumenta koji je vidljiv posetiocima stranice u brauzeru se nalazi između BODYtagova:
<HEAD><META http-equiv="Content-Type" content="text/html; charset=windows-1250"><TITLE>Moja prva HTML web strana</TITLE>
</HEAD><BODY>Ovo je tekst moje prve web stranice</BODY></HTML>
Sada treba dokument snimiti, na primer kao strana1.htm u neki folder, i pogledati tu stranicu u brauzer. Videćete ispisano pri vrhu u levom uglu naš tekst "Ovo je tekst moje prve web stranice".
U nastavku tutorijala pisaćemo samo BODY delove zbog sažetosti, a Vi kad pravite HTML stranice naravno nemojte izostavljati sve potrebne HTML elemente.
PozadinaOtvorite ponovo u notepad našu stranicu strana1.htm . I BODY tag zamenite sa sledećim:
<BODY BGCOLOR="#FFFF00">Ovo je tekst moje prve web stranice</BODY>
Dakle isečak stranice kad se pokrene u brauzer bi izgledala ovako:
Znači pozadina cele strane je u žuta. Primetite sad jednu novu stvar, da unutar početnog taga BODY izmedju oznaka za početak i kraj taga"< >"figutišepored imena i BGCOLOR atribut. Taj atribut gde god se pojavi definiše boju pozadine polja dokumenta
kojeg zahvata i definiše tag u kome je smešten. U ovom našem slučaju naš tag je BODY a on zahvata čitavu stranicu, što znači da će se definisati boja pozadine cele stranice. Drugi deo atributa BGCOLOR je heksadecimalni skup brojeva "#FFFF00" koji definiše u koju boju će biti pozadina. Hajdemo sad nešto malo više o heksadecimalnim oznakama za boje.
U HTML se oznake za boju definišu heksadecimalnim brojevima. Heksadecimalni brojevi imaju 16 cifre i to: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Tako na primer decimalni broj 255 će u heksadecimalnom broju biti FF. Oznaka taraba " # " ispred naše oznake kaže da je u pitanju heksadecimalni broj. HTML kodovi boja imaju 6 heksadecimalne cifre. Osnovne ekranske boje su crvena, zelena i plava i njihove nijanse. Sve ostale boje se definišu mešanjem te tri osnovne boje i njihovih nijansi. To mešanje poznato je kao RGB definicija (engleski R-red, G-green i B-blue). Ostali programi tipa Photoshop, Photopaint i slični koriste decimalne brojeve za označavanje RGB boja, ali HTML koristi heksadecimalne. E sad da vidimo kako se to dobija boja mešanjem osnovnih. Na primer iamamo #FF8C67 boju. Prva dva heksadecimalna broja FF govore vrednost, ili nivo, ili nijansu crvene boje. Druga dva broja 8C odredjuju nijansu zelene boje a zadnja dva heksadecimalna broja 67 odredjuju nijansu plave boje. Dakle boja se dobija mešanjem ovih nijansi osnovnih boja. Kako mešanjem? Pa evo tabelarno:
FF + 8C + 67 = FF8C67
Naravno znak plus ne treba shvatiti kao da se sabiraju ti heksadecimalni brojevi već figurativno kao da se mešaju. Znači sve nijanse osnovnih boja se kreću u opsegu od 0 do 255. To sve znači da kompjuter može izmešati ukupno 256 * 256 * 256 = 16 777 216 boja u RGB definiciji. Medjutim treba znati da kompjuter (ili bolje rečeno grafička kartica) generiše samo te 256 nijanse u sve tri osnovne boje ali kompjuter ne meša boje već naše oko. Znači kompjuter tako oboji susedne sub-piksele da se napravi šahovnica od tri boje u blizini i tako cela površina. A pošto su sub-pikseli jako mali naše oko u stvari izmeša te osnovne boje i dobijemo te nijanse.
Medjutim za neke osnovne boje ne moramo pisati heksadecimalne brojeve. Na primer ako želimo žutu boju možemo pisati i ovako: bgcolor="yellow". Yellow na engleskom znači žuta. Pa tako ako želimo crvenu pišemo red, zelenu pišemo green, plavu pišemo blue, crnu - black, belu - white, i tako dalje. Evo tabele:
Black Yellow Red MaroonGray Lime Green OliveSilver Aqua Blue NavyWhite Fuchsia Purple Teal
Za pozadinu možemo pored boja izabrati i neke slike. U tom slučaju pišemo:
<BODY BGCOLOR="pozadina.gif">Ovo je tekst moje prve web stranice</BODY>
A rezultat isečka stranice koja se prikazuje u brauzeru:
Da bi se slika prikazala, brauzer mora da je nađe. Za sada, sliku stavimo u istom folderu u kome se nalazi i HTML web stranica strana1.htm. Naravno, slika ne mora da stoji u istom folderu kao i web strana ali za sad neka bude tako a kasnije ćemo objasniti detaljno.
Možete izabrati za pozadinu veličinu slike nezavisno od veličine stranice ili prostora gde planirate tu pozadinu, jer ukoliko je slika manja onda će se ponavljati sve dok ne popuni prostor a ako je veća onda će se videti samo onaj deo koliki je prostor počevši od gornjeg levog ugla.
Još malo oko pozadine. Na primer imamo sliku pozadina2.jpg koja nije animacija. E sad na primer izradili smo stranu veću po vertikali i/ili po horizontali nego što je ekran brauzera. U tom slučaju da bi brauzer mogo da prikaže sve šta piše na toj stranici mora da napravi klizač koji kad pomeramo spustamo se niže na stranici i vidimo ostatak strane. E sad ako imamo pozadinu onda kako mi pomeramo klizač tako će se i slika pomerati i iscrtavati. Medjutim to može da se promeni da iako mi klizačem idemo naniže pozadina ostaje fiksna, i samo se kreće sadržaj stranice. To se postiže atributom: bgproperties="fixed". Evo primera:
<BODY BGCOLOR="pozadina2.jpg" bgproperties="fixed">Ovo je tekst moje prve web stranice</BODY>
Fiksiranje pozadine ne podržavaju svi brauzeri. Na primer firefox ne podržava a podržavaju: noviji internet explorer, novija opera, google chrome itd. Oni koji ne podržavaju ponašaju se kao da nije napisan atribut bgproperties.
Tekst format
Tekst pomoću raznih HTML tagova može biti napisan u raznim formatima i sa raznim efektima. Tekstu možemo menjati boju, veličinu slova, način ispisivanja teksta i tako dalje Ovo sve je lako shvatiti, te ću dati tabelarno.
HTNL formati tekstova Rezultat u brauzeru Objašnjenje
Neki <b>text</b> napisan Neki text napisanPodebljava tekst izmedju tagova
(bold)
Neki <i>text</i> napisan Neki text napisan Iskošava tekst (italic)
Neki <u>text</u> napisan Neki text napisan Podvlači (underline)
Masa <sub>text</sub> = Masa text =
Smanjuje i snižava tekst.
Pogodno u matematičkim
formulama
Neki <sup>text</sup> napisan Neki text napisan
Smanjuje i podiže tekst. Pogodno
za stepenovanje u matematici
Neki <strong>text<strong> napisan Neki text napisan Podebljava tekst a i u nastavku
Neki <em>text</em> napisan Neki text napisan Iskošava tekst
Neki <pre>text je</pre> napisan Neki
text jenapisan
Tekst unutar taga izvlači u novi pasus u odnosu
na tekst pre i posle njega
Neki <tt>text</tt> napisan Neki text napisan
Piše tekst kao kucaćom
mašinom - znači tekst je fiksne
dužine.Neki <strike>text veliki</strike>
napisan Neki text
velikinapisan Stavlja crtu po sredini rečenica
Neki <blink>text</blink> napisan Neki text napisan Tekst se pojavlja i gubi
naizmenično. Opera i firefox
podržavaju, ostali ne.
Neki <big>tekst</big> napisan Neki tekst napisanPovećava tekst
za jedan
Neki <small>tekst</small> napisan Neki tekst napisan Smanjuje takst za jedan
Neki <h1>tekst</h1> napisan
Neki
tekstnapisan
Pravi naslov od teksta i to sa
najvećim slovima.
Neki <h6>tekst</h6> napisan
Neki
tekst
napisan
Pravi naslov od teksta i to sa najmanjim
slovima. Postoje od h1 do h6
Mislim da posebna neka objašnjenja za sve ovo nije potrebno, ali mora se reći da se svi ovi tagovi mogu medjusobno kombinovati u neograničenom broju. Znači možete pustiti mašti na volju. Jedino što je poželjno da se tagovi ne preklapaju, već da se ugnježđuju jedan u drugi. Evo primera:
<strike><u><i><b>neki veeeeliki text u mnogim formatima</b></i></u></strike>
A rezultat bi bio:
neki veeeeliki text u mnogim formatima
Verovatno ste shvatili ali da ipak kažem. Ne odnose se ovi tagovi za formatiranje teksta samo za jednu reč ili rečenicu nego na primer i za čitave pasuse, pa i za čitav tekst. Znači koliko god pišete unutar početka i kraja taga na taj tekst će se i odnositi.
Primetite da svi ovi tagovi u tabeli su jednostavni u smislu da nemaju atribute. Znači početni tag ima ime i ništa više.
Postoji jedan tag za formatiranje teksta pod nazivom FONT koji ima atribute za veličinu slova, vrstu slova (vrstu fonta teksta), i za boju teksta. E sad da bi se primenio tag FONT treba da postoji potreba bar za jedan od ovih nabrojanih atributa, a može da sadrži i sve atribute. Moguće su sve kombinacije ako su potrebna dva atributa. Ajde sad da vidimo na primerima:
<BODY>neki kratak <FONT SIZE=6>tekst</FONT> <FONT SIZE=1>i mali</FONT></BODY>
Rezulat bi bio:
Znači veličina slova se definiše atributom SIZE, koji može imati vrednost od 1 do 7. Vrednost 7 piše najveće tekstove a vrednost 1 najmanje.
Podešavanje boje teksta se vrši na sledeći način:<BODY>neki kratak <FONT COLOR="#0000FF">tekst</FONT></BODY>
Rezultata bi bio:
Atribut za definisanje boje teksta je COLOR, a definicija boje je isto zapisana u 6 heksadecimalna broja kao kad smo objašnjavali pozadinu HTML stranice. I ovde što se tiče
boje sve isto važi kao i tamo.
Treći atribut FONT taga služi, kao što smo napisali za definisanje fonta slova. Znamo da postoje razni fontovi, na primer Arial, Helvetica, Verdana, Times New Roman, i tako dalje. Atribut za fontove je FACE i iszgleda ovako:
<BODY>neki kratak <FONT FACE="Verdana">tekst</FONT></BODY>
Rezultat bi bio:
Font će se videti samo ako posetilac web strane ima instaliran taj font na svom računaru! Ukoliko to nije slučaj, tekst će biti predstavljen podrazumevanim (default) fontom. Uz Windows, veoma su česti fontovi Arial i Verdana, Impact i tako dalje. Da bi se ovo delimično prevazišlo, možete navesti više od jednog fonta ovako:
<FONT FACE="ARIAL, HELVETICA, VERDANA">Zdravo</FONT>
Znači brauzer traži prvo ARIAL pa ako ga nađe, koristi ga, a ako ne, onda traži sledeći navedeni font HELVETICA. Ako ga ne nađe, tražiće VERDANA, i ako ne nađe i taj font, onda će koristiti podrazumevani (default) font.
I na kraju ovog dela kao što smo napisali moguća je bilo koja kombinacija atributa unutar FONT taga. Evo primera:
<BODY>neki kratak <FONT FACE="Verdana" COLOR="#0000FF" SIZE=6>tekst</FONT></BODY>
Svaki brauzer ima podešene podrazumevan font face=Times New Roman, veličinu slova size=3 i boju teksta crnu.
Uredjenje tekstaU prethodnom naslovu videli smo kako se može formatirati tekst u smislu njegove boje, veličine, fontovi, iskošenje itd. Ovde ćemo videti kako možemo uredjivati tekst u smislu novih redova, pasusa, uredjivati u prostoru i tako dalje.
<BODY>brzoshvatamHTML </BODY>
Znači u samom kodu hteli smo da svaka reč bude u novom redu, medjutim brauzer to nije ispoštovao i sve je ispisao u jednom redu. Dakle, da bi brauzer razumeo da hoćemo nešto napisati u novom redu moramo mu to "objasniti" tagom. Tag za novi red je <br>, pa da vidimo:
<BODY>brzo<br>shvatam<br>HTML</BODY>
Do istog rezultata u brauzeru bi smo došli da smo napisali kod i ovako:
<BODY>brzo<br>shvatam<br>HTML</BODY>
A možemo ako je potrebno i više puta zaredom stavljati oznaku za novi red, na primer A<br><br><br>B. U ovom slučaju ispisaće se slovo A pa tek nakon tri reda ispod i slovo B.
Ako želimo novi red, i pri tome da uredimo i tekst u smislu da bude poravnjan i u desnu stranu (kao tekst u novinama), ili da tekst bude centriran, ili na levoj strani ili desnoj onda koristimo tag DIV:
<BODY>brzo<div>shvatam HTML jer nije nimalo tezak</div></BODY>
Znači kad je tag DIV bez atributa imamo isti efekat kao da smo koristili i tag <br>. Medjutim poenta korišćenja DIV taga je u njegovim atributima, pa da vidimo:
<BODY>brzo<div align=center>shvatam HTML jer nije nimalo tezak</div><div align=left>shvatam HTML jer nije nimalo tezak</div><div align=right>shvatam HTML jer nije nimalo tezak</div></BODY>
Atribut ALIGN=CENTER centrira tekst na sredinu prostora, ALIGN=LEFT pomera tekst krajnje levo (to imamo i bez atributa), i ALIGN=RIGHT pomera tekst krajnje desno.
Postoji još jedan vrlo zanimljiv atribut koji se zapisujeALIGN=JUSTIFY. Kada pogledate primer sve će biti jasno:
<BODY>Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to.<div align=justify>Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to.</div></BODY>
Kao što vidimo prvi tekst je napisan bez ikakvih tagova a drugi sa DIV tagom u kome je napisan i atribut. Primećujete kako je tekst sa atributom na desnoj strani lepo poravnjan kao neki profesionalan novinarski članak.
Korišćenjem <br> i <div> taga tekst pisan nakon tih tagova se premešta u novi red. Postoji još jedan tag<p></p> koji tekst spusta direktno dva reda niže, i tako pravi novi pasus. Naravno takav efekat imamo ako stavimo <br><br>, ali <p> tag može da sadrži i sve atribute kao i <div> tag. Da ne bi se ponavljao uzeću za objašnjenje zadnji primer <div> taga samo ću zameniti umesto<div align=justify></div> staviću<p align=justify></p>. Naravno i ostali primeri su isti stim što se rezultat razlikuje jer pomera dva reda niže <p> tag.
<BODY>Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to.<p align=justify>Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to.</p></BODY>
Vidite kako je <p> tag napravio novi pasus, preskočio jedan red. Ovde treba napomenuti da svi ovi tagovi <br>, <div> i <p> mogu se koristiti, i imaju iste efekte, i na HTML objekte kao što su tabele, multimedija, slike i tako dalje, a ne samo na tekst. To isto važi i za naredne tagove koje ćemo do kraja ovog naslova videti. I još nešto, ako želimo da centriramo neki tekst na sredini prostora možemo koristiti i tag <center></center>. Ostali kao što su left, right i justify nemaju takav tag.
Da bi bio siguran da vam je sve jasno daću prethodni primer sa dodatkom tagova iz prethodnog naslova, kako bi ste videli da možete pustiti mašti na volju u kombinovanju HTML tagova pri izgradnji web stranica.
<BODY>Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta.<FONT SIZE=5 color=#CC33FF> Nas tekst sa tim etributom izgleda jako profesionalno i lepo</font>. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to.<p align=justify>Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo <font color=#FF0000 face="verdana" SIZE=1><b>zanimljivog atributa za uredjivanje teksta</b></font>. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to.</p></BODY>
Idemo dalje. Hajde sad da napišemo rečenicu u kojoj su reči prilično razmaknute izmedju sebe:
<BODY>brzo shvatam HTML</BODY>
Rezultat biće:
Dakle iako smo mi u kodu napisali tekst sa više razmaka brauzer je ipak sve prikazao sa jednim razmakom. Znači i ovde moramo nekako reći brauzeru kroz kod da piše više od jedne razmaknice. Za pisanje razmaknice se ne koristi nikakav tag već šifra
<BODY>brzo shvatam HTML</BODY>
Znak " &" označava početak šifre, a znak " ; " kraj.Pored ove šifre za razmaknicu postoje šifre za sve moguće znakove i slova. Za razmaknicu je neophodno uvek koristiti šifru, a za neke znakove je po nekad potrebno koristiti njihovu šifru. Na primer svaki tag počinje znakom " < " a završava se " > ". I sad kad bi se ti znakovi koristili unutar koda i za njihovo prikazivanje u brauzer, tada bi u nekim slučajevima došlo do greške jer bi ih brauzer razumeo u nekim slučajevima kao sintaksu za pisanje tagova. Da do toga ne bi došlo ti znakovi ( a i ostali kao što je na primer znak dvostruki navodnici " " " ) moraju se po nekad napisati u obliku šifre. Takodje ne moramo koristiti one meta tagove za definisanje srpskih slova koji smo na početku napisali, već i naša slova imaju šifre. I jedna vrlo bitna napomena. Za pisanje šifri obavezno koristite samo mala slova. Evo tabele interesantnih HTML šifri:
Šifra1 Znak1 Šifra2 Znak2 Šifra3 Znak3 Šifra4 Znak4č č ± ± ² ˛ ¼ ĽČ Č & & ³ ł ½ ˝ć ć < < ˆ � ¾ ľĆ Ć ® ® µ µ ­ đ đ > > ¶ ¶ ÷ ÷Ð Đ " " Ø Ř ß ßš š € € × × ™ ™Š Š ‰ ‰ ¹ ą • •ž ž © © § § ¢ ˘Ž Ž £ Ł ¥ Ą ƒ �
Postoje preko 40 000 šifri (ASCII-HEX vrednosi) za raznorazne znakove. Kliknite na sledeće dugme da vifite većinu interesantnih šifri:
Da nastavimo sa novim stvarima. Primetili ste da tekst koji pišete u HTML kodu i tekst koji prikazuje brauzer se dosta razlikuje. Na primer vi možete u kod-u pisati tekst u jednom redu jako dugo, a kad brauzer prikaže taj tekst on ga saseče u nekoliko redova tako da se smesti baš u prostor po horizontali kolika je horizontalna dužina ekrana. Medjutim postoji tag koji nedozvoljava da brauzer saseče vaš tekst bez obzira koliko je dug. Naime, neće smeti da ga iseče već će napraviti horizontalni klizač tako da se ceo tekst može isčitati. Tag koji radi to
je <nobr></nobr> a izmedju početnog i krajnjeg taga NOBR smeštate tekst koji ne želite da sečete u više redova.
Tag <BLOCKQUOTE></BLOCKQUOTE> pravi margine sa leve strane čitavom tekstu koji je u njemu (sve redove pomera par razmaka udesno). Evo primera:
<BODY><BLOCKQUOTE>Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to.</BLOCKQUOTE></BODY>
A rezultat:
Već nekoliko puta smo pisali u ovom delu kako brauzer ne prikazuje tekst onako kako ga mi napišemo u kod-u ako ne primenjujemo tagove. Medjutim postoji tag koji omogućava da brauzer prikaže naš tekst baš onako kako ga mi napišemo u kod-u. Taj tag je <pre></pre>. Evo primera koji jasno dočarava sve:
<BODY> _ _ (o)--(o) /.______. ________/ ./ . ( . , ) _\//_/ / ~~ ~~ ~~<BODY>
Ako samo ovako napišemo brauzer će dati sledeći prikaz:
A ako napišemo ovako:
<BODY><PRE> _ _ (o)--(o) /.______. ________/ ./ . ( . , ) _\//_/ / ~~ ~~ ~~</PRE><BODY>
Rezultat će sad biti:
I na kraju ovog dela možemo opisati tag koji služi za komentar unutar HTML kod-a. Kada pišete neki HTML kod koji je jako veliki potrebno prokomentarisati neke njegove delove, kako bi se kasnije lakše snašli kad trebate nešto da dodate ili ispravite. Tag za komentar počinje <!-- a završava se sa -->. Sve unutar tog taga brauzer preskače i ignoriše. Znači tu možete da pišete šta god želite, čak i bilo koje tagove itd, sve će biti ignorisano.
ListaListe su potrebne u tekstu kad nešto nabrajamo. HTML grafičke liste se prave na sledeći način:
<body>Ovo je moja prva lista<ul> <li>text</li> <li>text</li> <li>text</li></ul></body>
Znači stavi crnu tačku ispred teksta i pomeri ga nekoliko razmaknica u desno. E sad postoje par varijanti oko te tačke.
Ako u UL tag stavimo atribut TYPE=CIRCLE imaćemo tačku koja nije ispunjena. Pa da vidimo primer:
<body>Moja druga lista<ul type="circle"> <li>text</li> <li>text</li> <li>text</li></ul></body>
Takodje ne mora da bude krug, već ispunjen kvadrat, ako se stavi atribut type="square" u UL tagu:
<body>Moja treca lista<ul type="square"> <li>text</li> <li>text</li> <li>text</li></ul></body>
Postoje i numeričke oznake. U tom slučaju umesto taga UL pišemo tag OL. Pa da vidimo:
<body>Moja lista sa rednim brojevima<ol> <li>text</li> <li>text</li> <li>text</li></ol></body>
Ne mora uvek početi sa jedinicom. Na primer ajde da pošnemo sa peticom:
<body>Jos jedan primer liste<ol start=5> <li>text</li> <li>text</li> <li>text</li></ol></body>
Postoje mnoge varijante atributa OL taga pa je naj ekonomičnije da ih vidimo tabelarno. Napomena da atribut START važi u kombinaciji sa svakim atributom u tabeli.
Atribut OL taga Izgled i objašnjenje
<ol type="A">
Za obeležavanje se koriste velika slova. A. text B. text C. text
<ol type="a">
Za obeležavanje se koriste mala slova. a. text b. text c. text
<ol type="I" start="7">
Za obeležavanje se koriste rimski brojevi. VII. text VIII. text IX. text
<ol type="i">
Za obeležavanje se koriste mali rimski brojevi. i. text ii. text iii. text
Postoji i treća vrsta liste a to je definiciona lista. Evo primera i sve će biti jasno:
<BODY><DL> <DT><B>Grafičke liste</B> <DD>Grafičke liste su one kod kojih imamo popunjene i prazne krugove. <DT><b>Numeričke liste</b> <DD>Numeričke liste su one kod kojih imamo brojeve, slova mala i velika,
i rimski brojevi. <DT><b>Definicione liste</b> <DD>Definicione liste su one kod kojih je u odnosu na podnaslov uvučen tekst ispod naslova.</DL></BODY>
LinijePo nekad je potrebno u nekom redu iscrtati neku horizontalnu liniju. Na primer da odvoji neke pasuse, ali može da se linija iscrtava i u drugim slučajevima, zbog estetike itd. HTML tag za iscrtavanje horizontalne linije ima naziv HR, i on nema zatvarajući tag. Kao primer daću kod sa svim varijantama HR taga a posle ću objasniti.
<BODY><HR><HR WIDTH=35%><HR WIDTH=100><HR WIDTH=50% ALIGN=LEFT><HR WIDTH=50% ALIGN=RIGHT><HR WIDTH=60% SIZE=1><HR WIDTH=60% SIZE=10><HR WIDTH=60% SIZE=3 COLOR="blue"><HR WIDTH=60% SIZE=8 NOSHADE></BODY>
Objašnjavaću red po red kod-a. Ako je napisano samo <hr> onda se iscrtava horizontalna linija od kraja do kraja prostora kojeg definiše tag u kome je ugnježđen HR tag. U našem slučaju HR tag je ugnježđen u BODY tagu tako da će se horizontalna linija iscrtavati horizontalno duž celog ekrana. Kada se napiše samo <hr> onda je debljina linije po defoltu 3, a boja crna.
U drugom redu smo ubacili u HR tag i atribut WIDTH = 35%. Taj atribut definiše dužinu linije, i to u procentima. Mi smo stavili 35%, što znači da bez obzira na rezoluciju ekrana dužina linije će uvek biti 35% od rezolucije ekrana po horizontali. Uočite i još jednu stvar, da se po defoltu horizontalne linije iscrtavaju centrirane ako se drugačije ne naglasi. U sledećem redu koda nisu procenti u WIDTH atributu već pikseli. To znači da se dužina ne
definiše u zavisnosti od rezolucije ekrana, već će uvek biti fiksno u našem slučaju 100 piksela. To znači da će na ekranima manjih rezolucija linija biti veća od ekrana sa većim rezolucijama.
U četvrtom redu koda ispod BODY taga imamo HR tag sa novim atributom ALIGN. Rekli smo da se po defoltu linije iscrtavaju centrirane. Ako želimo to da promenimo onda se koristi ovaj ALIGN atribut i to tako da ako želimo ulevo da pomerimo pišemo ALIGN = left, a ako želimo udesno onda ALIGN = right.
U šestom redu koda definišemo i debljinu linije. Debljina ide od SIZE = 1 do mislim SIZE = 100. Debljina se definiše samo u pikselima.
U osmom redu imamo atribut COLOR koji definiše boju linije. Napomena, da ukoliko se ne definiše atributom, ako je linija prilično debela ona se iscrtava linijama koje oivičuju površinu linije a unutrašnjost linije je u boji pozadine. Medjutim i to se može promeniti da se popuni i unutrašnjost linije bojom koju definiše atribut COLOR. U tu svrhu koristi se atribut NOSHADE.
I na kraju treba reći da svi atributi u HR tagu koje smo u ovom naslovu naveli mogu se koristiti u isto vreme, ili razne njihove kombinacije po potrebi.
Slika i linkLinkovi su upravo ono što daje glavnu karakteristiku interneta. Naime u bilo kom delu sajta možete postaviti neki tekst i linkovati ga ka nekoj drugoj strani na istom sajtu, ili pak na nekom drugom sajtu. Linkovi mogu biti tekstualni ili slikovni. Slikovni u smislu da kliknete na neku sliku i da vas to odvede ka nekoj drugoj strani.
Zamislite internet biz slika. To bi bilo monotono, dosadno, daleko manje estetski, ali što je najbitnije sa mnogo mnogo manje informacija. Ne kaže se đaba da slika govori hiljadu reči.
Naravno i HTML ima mnoge tagove koji omogćavaju veliki broj operacija sa slikama. U narednim tekstovima će mo uptavo o tome govoriti.
SlikaZa ubacivanje slika u HTML stranicu koristi se tag <IMG>. Ovaj tag nema zatvarajući tag. Obavezan atribut IMG taga je SRC koji definiše odakle brauyer da uzme sliku. Evo osnovnog kod-a za slike:
<body><img src="slika.jpg"></body>
A rezultat je:
Pre nego krenemo na sledeće atribute da objasnimo detaljnije o pisanju putanja do slika da bi ih brauzer nalazio:
Putanja Objašnjenje
SRC="slika.gif" Slika je u istom folderu u kome je i HTML dokument koji je poziva.
SRC="images/slika.gif"Slika je u folderu koji je unutar foldera u kome je HTML dokument koji je poziva. Koliko unutra ispod? U našem slučaju jedan jer imamo jednu
kosu crtu.
SRC="../slika.gif" Slika je u folderu jednom izvan u kome se nalazi folder koji sadrži HTML dokument koji je poziva.
SRC="../../slika.gif" Slika je izvan dva foldera.
SRC="../images/slika.gif" Slika je jedan folder izvan, pa jedan unutar u odnosu na HTML dokument.
SRC="../../../other/images/slika.gif" Slika je tri foldera izvan, pa u dva foldera unutra u odnosu na HTML dokument koji poziva sliku
Obratite pažnju da uvek se pišu dve tačke a ne tri ili četri, itd. U tabelama su objašnjene relativne putanje. Medjutim putanju slike (ali i bilo kog fajla) možete da definišete i korišćenjem kompletne adrese gde se nalazi. Na primer http://www.nekisajt.com/skladiste/slike/pozadina.gif. I još nešto oko pisanja imena fajlova ili slika. Na primer imate na kućnom računaru windows i na njemu napravite sajt sa slikama. Prebacite sve to na host i primetite da vam slike ne rade. Razlog tome je da je host na unix / linux. Windows ne razlikuje mala i velika slova u nazivima fajlova, dok unix / linux razlikuje. Zato uvek pišite nazive fajlova malim slovima i nikad neće doći do greške. Takodje u nazivu fajlova ne koristite razmaknicu, već za razdvajanje reči u nazivu koristite donju crtu ili znak minus.
Ako napišemo IMG tag samo sa obaveznim SRC atributom brauzeru će trebati dodatno vreme pri otvaranju stranice kako bi definisao širinu i visinu slike. Da bi smo skratili vreme poželjno jedefinisati atributima širinu i visinu slike u pikselima. Širina se definiše WIDTH a visina HEIGHT atributom. Evo primera:
<body><img src="pozadina.gif" width=200 height=100></body>
Ovde treba napomenuti da mi možemo definisati visinu i širinu slike koja će se prikazati kako nam je volja nezavisno od stvarne širine i visine slike. Drugim rečima možemo da je skupljamo, ili širimo i po visini i po širini. Medjutim treba napomenuti da je mi na taj način ne smanjujemo u smislu bajtova. Znači bez obzira koliko je vizuelno smanjimo brauzer da bi je prikazao mora da isčita celu veličinu slike.
Može se desiti nekad da sliku slučajno izbrišemo, ili brauzer posetioca ne čita slike jer je on tako podesio, pa onda na mestu gde se treba pojaviti slika stoji samo prazan oivičen prostor. Da bi takav posetilac znao koja slika tu treba da stoji onda možemo u tom prostoru namenjen slici ispisati tekst koji imenuje sliku ili pak ispisuje neki kraći tekst objašnjenja. Medjutim ako je ta slika koja se ne vidi u stvarim link, onda je itekako bitno da ljudi znaju
našta klikću ukoliko se slika ne pojavi iz raznoraznih razloga. U tu svrku koristi se tag ALT. Na primer ajde da stavimo sliku koja ne postoji:
<body><img src="grad-nis.gif" width=200 height=100 alt="Grad Nis"></body>
Takodje možete i oivičavati sliku. Evo primer sa oivičenom slikom, ali i sa umanjenjem slike:
<body><img src="pozadina.gif" width=200 height=100 alt="Slika pozadine" border=10></body>
Ovde vidimo da pomoću atributa BORDER se iscrtava okvir slike neposredno po obodu slike. Možemo napraviti da se prostor oko slike koji je nedodirljiv na rastojanju od slike kojeg mi definišemo u pikselima. Za tu shvrhu se koriste atributi Hspace i Vspace. Evo primera:
<body><img src="pozadina.gif" width=200 height=100 alt="Slika pozadine" border=1 Hspace="30" Vspace="10">hhhhhh</body>
Primećujete kako je slika pomerena za 30 piksela od vertikalne ivice, i 10 piksela od horizontalne sa svih strana kada uporedjujemo sa slikom iz recimo prvog primera.
E sad možemo pokazati kako se slika može umetati unutar teksta. Za tu shvrhu se koristi atribut ALIGN pa da vidimo:
<body><BLOCKQUOTE><p align="justify">Ovde treba napomenuti da mi možemo definisati visinu i širinu slike koja će se prikazati kako nam je volja nezavisno od stvarne širine i visine slike. Drugim rečima možemo da je skupljamo, ili širimo i po visini i po širini.<img src="pozadina.gif" width=171 height=90 alt="Slika pozadine" border=1 Hspace="30" Vspace="10" align=left>Medjutim treba napomenuti da mi na taj način ne smanjujemo u smislu bajtova. Znači bez obzira koliko je vizuelno smanjimo brauzer da bi je prikazao mora da isčita celu veličinu slike.</p><p align="justify">Ovde treba napomenuti da mi možemo definisati visinu i širinu slike koja će se prikazati kako nam je volja nezavisno od stvarne širine i visine slike. Drugim rečima možemo da je skupljamo, ili širimo i po visini i po širini.<img src="pozadina.gif" width=100 height=50 alt="Slika pozadine" border=1 Hspace="30" Vspace="10" align=right>Medjutim treba napomenuti da mi na taj način ne smanjujemo u smislu bajtova.
Znači bez obzira koliko je vizuelno smanjimo brauzer da bi je prikazao mora da isčita celu veličinu slike.</p></BLOCKQUOTE></body>
Vidite da sa malo HTML koda možemo napraviti vizuelno mnogo dobre tekst stvari. Na primer mnogi će reći da znaju HTML. I oni bi mogli napraviti efekte teksta i slika iz prethodnog primera ali bi večina koristila tabele. Tako da bi na kraju više bilo teksta HTML koda nego samog efektivnog teksta kojeg želimo da vide posetioci. E sad da je samo jedna strana u pitanju nije bitno ali zamislite sajt sa 100 HTML strana i u svakoj 50% i više viška
koda. Znači kad se dobro poznaje HTML to doprinosi u mnogome uštedi resursa, ali što je najbitnije i vreme učitavanja stranica.
LinkLinkovi su upravo ono što čini internet tako dinamičnim. Link može biti tekst, slika ili bilo kakav objekat, na koji kad se klikne odvede te na neku drugu internet stranu, ili pak na neki drugi deo iste stranice. Ovde će mo objasniti tekstualne i slikovne linkove. Krenimo najpre sa tekstualnim. Kako od jedne reči ili rečenice (a može i od čitavog teksta ili stranice) da se napravi link? Odgovor je uz pomoć ANCHOR taga. Taj tag se tako zove ali u praksi se tag imenuje samo sa malim ili velikim slovom " a ".Taj tag ima i početni i krajnji, znači <a></a>. Ali ajde da vidimo primer i sve će biti jasnije:
<body>Posetite google na <a href="http://www.google.com">LINK</a></body>
To bi izgledalo ovako kad brauzer otvori:
Atribut koji definiše web adresu na koju vodi link kad se klikne se naziva HREF. Verovatno i sami zaključujete da je obavezan HREF atribut, jer u suprotno je besmisleno. Kada linkujemo neku stranicu sa nekog drugog sajta onda se mora pisati puna adresa stranice, znači sa http i sve ostalo. Medjutim ako linkujemo neku stranicu unutar našeg sajta, onda ne moramo (ali i možemo) pisati punu adresu, već samo relativnu putanju do strane. Relativna putanja je ok, na primer pravimo sajt na svom računaru, i kad prebacimo fajlove na host ako su fajlovi linkovani relativnim putanjama sve će raditi kako treba.
Mada se u zadnje vreme ne linkuju mejlovi iz raznoraznih razloga, medjutim moguće je i to na sledeći način:
<body>Pošalji na <a href="mailto:[email protected]">MEJL</a></body>
Čak možemo i unapred definisati poruku u mejlu, na primer:
<body>Pošalji na <a href="mailto:[email protected]?subject=Pera Peric&body=Zdravo. Kakosi, šta radiš?">MEJL</a></body>
Medjutim imajte na umu da neki brauzeri ne podržavaju subject i body funkcije unutar mejla.
Dalje, kao što smo rekli mogu se praviti linkovi koji će voditi na pojedine delove unutar same stranice. Takav link se zove sidro. Evo primer:
<body>Klikni na <a href="#unutra">LINK</a> da odeš na naslov ispod<p><a name="unutra">NASLOV</a></p></body>
Znači prave se dva ANCHOR-a. Jedan na koji se klikće a drugi na deo strane gde se odvodi posetilac. Prvi gde se klikće se pravi sa HREF atributom, stim čto se za link piše obavezno taraba " # " pa bez razmaka tekst koji je isti sa tekstom koji je vrednost atributa NAME u drugom ANCHOR-u (u našem slučaju to je tekst "unutra"). E sad, drugi anchor ima atribut NAME kao što smo napisali, a tekst u njemu mora biti isti kao i u prvom ANCHOR-u u atributu HREF, samo bez tarabe. U našem slučaju taj tekst je "unutra". Tekstovi za NASLOV i za LINK su obično medjusobno različiti (ali i ne mora) kao što je kod nas slučaj, i mogu se razlikovati od teksta "unutra", kao što je opet slučaj kod nas. Medjutim ako imate mnoge linkove koji vode unutar stranice onda je preporučljivo da je tekst za NASLOV i za"unutra" isti kako bi lakše pratili izradjivanje stranice.
Primećujete u dosadašnjim primerima da iako smo izmedju početka i kraja anchor taga pisali samo tekst, brauzer automatski tekst farba u plavo. Ako želite da promenite tu boju u crnu, crvenu ili u kakvu god želite onda to može ovako:
<body>Posetite google na <a href="http://www.google.com"><font color=black>LINK</font></a></body>
Ali postoji bolji način u vezi boje teksta linka. Na primer možda ste primetili da je tekstualni link recimo plav, a kad kliknete na taj link on dobije drugu boju, a kad se opet vratite na tu stranicu link je u trećoj boji. Isto se dešava i sa našim primerima iako mi nismo ništa čačkali sa bojama, izuzev ovaj zadnji primer. Znači brauzer po defoltu daje obično plavu boju linku kojeg nismo kliknuli a teget boju linku koga smo kliknuli. Medjutim to se može promeniti na sledeći način:
<body link="#0080A0" alink="#40FF00" vlink="#999900">Posetite google na <a href="http://www.google.com">LINK</a></body>
Znači ti atributi se stavljaju u BODY tagu i važe za sve tekstualne linkove unutar te stranice (ali i za okvire oko slika i objekekata ukoliko su linkovi, ako ne uklonimo okvire. Atribut LINK definiše boju linka kojeg nismo nikad kliknuli, ALINK boju dok držimo klik na linku i VLINK boja linka kad se vratimo na stranicu ako smo nekad kliknuli na link. Sve ovo u vezi ovih tagova je dobra ideja jer zamislite neku stranicu koja nabraja nešto sa linkovima, i ovako kad se menjaju boje linkova znate šta ste već kliknuli a šta ne.
Kod tekstualnih linkova možemo primenjivati sve tagove vezani za tekst. Samo sav tekst i sve tagove treba pisati ugnježđeno unutar anchor tagova kako bi sve to bio link. Mi smo za objašnjenje tekstualnih linkova koristili po jednu reč, ali naravno možemo koristiti čitave rečenice, pa i pasuse i na njima primenjivati sve moguće tagove za tekst, samo kao što sam napomenuo, a nije na odmet opet, svi ti tagovi moraju biti ugnježđeni unutar anchor tagova za početak i kraj.
I slike mogu biti linkovi. Evo primera i sve će biti jasno:
<body><a href="http://www.google.com"><img src="pozadina.gif" width=200 height=100></a></body>
Znači sve je isto kao i sa tekstom samo umesto teksta ubacimo tag za sliku. Brauzer automatski daje plavi okvir oko slike čak i ako ne stavimo atribut BORDER u IMG tagu. Medjutim ako želite da nema slika taj plavi okvir onda samo stavite u tagu IMG atribut BORDER=0. Ali ako želite da još više naglasite okvir i da ga podebljate stavite umesto nule neki veći broj. Po defoltu brauzer stavlja broj 3. E sad sve atribute koje smo naučili u vezi IMG taga možemo i ovde pisati i primenjivati. Znači vezano za veličinu slike, onda onaj ALT tag je ovde za link jako bitan, pa onda onaj tag ALIGN itd, znači sve. Treba napomenuti da ne mora samo jedna slika da bude kao link. Znači možemo staviti više IMG tagova unutar ANCHOR taga i sve te slike će linkovati ka toj adresi. Takodje može i kombinacija više slika i teksta, itd itd. To se jako retko realno koristi ali čisto da kažem da uočite kako se tagovi mogu mešati u milion kombinacija, i kako nam mašta nalaže, jedino je preporučljivo da tagovi budu lepougnježdeni a ne da se preklapaju.
E sad stvar vezana za sve linkove bilo da su tekstualni ili slikovni. Verovatno ste primetili da kad kliknete na neki link u brauzeru on nekad otvori nov jezičak (kartica ili engleski New Tab) i u njemu otvori web stranu. Najčešće otvori web stranu u isti jezičak (u istu karticu ili engleski Tab) u kojoj je bila web strana na kojoj ste i kliknuli. Po defoltu svaki brauzer otvara u isti jezičak. Naravno to može da se isprogramira kako nama najviše odgovara. Sledeći ANCHOR otvara kliknutu adresu u novom jezičku (kartici ili engleski New Tab):
<body>Posetite google na <a href="http://www.google.com" target=_blank>LINK</a></body>
Kao što vidimo tag za to je TARGET a njegova vrednost je _blank. Target tag ima još i _self vrednost ali ona se slabije koristi jer kad se ona upiše stranica se otvara u istom jezičku, što je i po defoltu brauzera. Postoje još i vrednosti _parent, _top, i _search ali oni se gotovo nikad ne koriste.
Skrolovanje slike i tekstaSkrolovanje je glatko pomeranje slike, teksta ili bilo kakvog HTML sadržaja ili grupu sadržaja preko ekrana. U HTML-u postoji TAG za skrolovanje i zapisuje se <marquee></marquee>. Naravno on sadrži niz atributa koje će mo u nastavku obvjasniti. Ovaj TAG omogućava dakle skrolovanje slike, grupe slika, teksta, linka, grupu linkova, ili bilo kakav sadržaj sa leva na desno, sa desna na levo, odozdo na gore, od gore na dole, a takodje može definisati i brzinu skrolovanja.
Mi će mo razmatrati skrolovanje linkovanih slika ali sve što važi za linkovane slike važi i za tekst ili bilo kakav drugi sadržaj, samo umesto tagova za linkovane slike pišete tagove za tekst ili bilo kakav sadržaj.
<MARQUEE scrolldelay="115" WIDTH=100% HEIGHT=90 BEHAVIOR="scroll" SCROLLAMOUNT="10" DIRECTION="left" BGColor="transparent"> <a href="http://bubaj.com"><img src="http://bubaj.com/jsslikeplanete/marquee.png" width=125 height=95></a> <a href="http://bubaj.com"><img src="http://bubaj.com/jsslikeplanete/marquee.png" width=125 height=95></a> <a href="http://bubaj.com"><img src="http://bubaj.com/jsslikeplanete/marquee.png" width=125 height=95></a> <a href="http://bubaj.com"><img src="http://bubaj.com/jsslikeplanete/marquee.png" width=125 height=95></a></MARQUEE>
Efekat je sledeći:
Sve atribute daću tabelarno sa njihovim objašnjenjima jer nije teško skapirati njihovu upotrebu i efekte:
Atribut Efekat Atribut Efekat
width Širina marquee polja scrollamount Odredjuje brzinu skrolovanja i kreće se od 1, 2,..., 10,... itd.
height Visina marquee polja loopOdredjuje koliko puta će se
izvršiti skrolovanje a vrednosti su 1, 2, ...,10,... itd
direction
Pravac skrolovanja a vrednosti su UP (kretanje sadržaja odozdo nagore),
DOWN (odozgo nadole), RIGHT (sa desna na levo), LEFT (sa leva na
desno),
bgcolor
Postavlja boju pozadine MARQUE polja. Ako je
vrednost "TRANSPARENT" onda je pozadina kao i pozadina
ostalog dela stranice.
behavior
Da li će da skroluje ili samo levo-desno. Vrednosti su SCROLL - skroluje,
ALTERNATE - pomera samo levo desno
hspaceOdredjuje horizontalne margine oko sadržaja unutar MARQUEE
polja
scrolldelayKoliko dugo treba da se čeka nakon
sledećeg "frejma" skrolovanja a kreće se od 0 do 1000 i više u milisekundama.
vspaceOdredjuje vertikalne margine
oko sadržaja unutar MARQUEE polja
Tabela
Tabele se obično koriste iz dva razloga u HTML-u. Prvi je uredjenje podataka tabelarno. Drugi je manje uočljiv ali u HTML-u mnogo više korišćen, a to je dizajniranje web stranica korišćenjem nevidljivih tabela.
Gotovo svi sajtovi koriste nevidljive tabele u dizajnu. Dizajniranje web stranice tabelama znači podeliti stranicu na različite delove i u njima smeštati pojedine njene elemente. Obično ti delovi su zaglavlje, deo za dugmiće koji povezuju stranice web sajta, polje za pretragu weba ili sajta, polje za glavni deo strane, itd.
Prilikom dizajniranja stranica tabelama mora se voditi računa o brzini učitavanja stranice. Naime, sadržaj tabela brauzeri ne prikazuju sve dok ne učitaju celu tabelu zajedno sa podacima u njoj. To drugim rečima znači, ako je tabela velika sa mnogo podataka posetioci će dugo čekati dok se nešto ne pojavi na stranici. Taj problem se rešava tako što se naprave više nezavisnih tabela koje dele stranicu na više delova, i onda se učitava jedna po jedna tabela. Znači učita se prva tabela pri vrhu strane brzo i posetilac dok gleda taj deo brauzer nastavlja sa učitavanjem ostalih tabela.
Simetrične HTML tabeleSvaku tabelu, kao što znamo, sačinjavaju veći broj polja. Medjutim HTML tabela ima malo drugačiju logiku. Naime, osnovni tag tabele shvatite kao jedan pravougaonik. U tom pravougaoniku stavljamo jedan ili više horizontalnih polja, a u horizontalna polja stavljamo jednu ili više ćelija. E sad ovako napisano hajde i da objasnimo u HTML jeziku.
Osnovni tag tabele je TABLE, koji ima početni i krajnji tag. Taj tag je u stvari onaj naš pravougaonik. U tabelu stavljamo jedan ili više horizontalnih polja. Tag horizontalnog polja je TR, i ono ima takođe početni i krajnji tag. U horizontalno polje stavljamo jednu ili više ćelija. Ćelija ima tag TD, a i ona ima početni i krajnji tag. E sad sve to pretočimo i u HTML kod, ali i sa nekim podatkom u tabeli kao i sa linijama koje oivičuju tabelu. Linije se prave tako što se stavi atribut BORDER unutar TABLE taga. Evo kako sve izgleda::
<table border=4> <tr> <td>DEJAN</td> </tr></table>
Uočite da se horizontalne linije ugnježđuju u TABLE, a ćelije u horizontalne linije. Ovo je osnovna struktura bilo koje tabele. Ako izostavimo bilo koja od ova tri taga tabela neće funkcionisati. Takodje svi podaci koje upisujemo unutar tabele uvek, ali uvek i jedino se pišu unutar taga za ćelije, to jest izmedju početnog i krajnjeg taga TD. Napravimo sada složeniju tabelu sa dva reda koji sadrže po tri ćelije:
<table border=4> <tr> <td>DEJAN</td> <td>PERA</td> <td>VERA</td> </tr> <tr> <td>MILAN</td> <td>SAŠA</td> <td>ĐURA</td> </tr></table>
Ovako možete praviti koliko god želite horizontalnih linija, samo dodajete TR tagove. Takodj i ćelija, ali da bi bila simetrična tabela moraju u svim horizontalnim linijama da bude isti broj ćelija. Ovim objašnjenjenjima do sada stekli ste logiku pravljenja običnih HTML tabela koje imaju simetrične kolone i redove. Simetrične tabele se koriste uglavnom za nabrajanje podataka tabelarno. Takve tabele ste uglavnom do sada sretali i koristili.
Asimetrične HTML tabeleHTML može praviti takoreći sve varijante asimetričnih tabela. Ta osobina daje mogućnost izmedju ostalog i dizajniranju stranica i obradi slika u smislu deljenje stranica i slika na sve moguće načine. Asimetrične tabela se izrađuju korišćenjem TD atributa ROWSPAN i COLSPAN. Na primer ajde da napravimo tabelu sličnu iz prethodnog naslova zadnji primer, ali da PERINO polje zauzme i VERINO polje:
<table border=4> <tr> <td>DEJAN</td> <td colspan=2>PERA</td> </tr> <tr> <td>MILAN</td> <td>SAŠA</td> <td>ĐURA</td> </tr></table>
Izbacili smo VERINO polje a u PERINU ćeliju stavili smo atribut COLSPAN = 2. A sad ajde da PERINA ćelija zauzme i DEJANOVU:
<table border=4> <tr> <td colspan=3>PERA</td> </tr> <tr> <td>MILAN</td> <td>SAŠA</td>
<td>ĐURA</td> </tr></table>
Izbacili smo DEJANOVU ćeliju i u atribut COLSPAN stavili smo broj 3 jer sad ta PERINA ćelija zauzima tri ćelije. Da rezimiramo, COLSPAN atribut manipuliše samo sa horizontalnim ćelijama. Hajde sad da vidimo efekte sa ROWSPAN atributom. Na primer promenimo našu tabelu iz primera sa 6 ćelija tako da izbacimo DEJANA a MILANOVA ćelija da se proširi po vertikali:
<table border=4> <tr> <td rowspan=2>MILAN</td> <td>PERA</td> <td>VERA</td> </tr> <tr> <td>SAŠA</td> <td>ĐURA</td> </tr></table>
Eto dobili smo efekat. Medjutim ovde treba nešto jako bitno uočiti. Ako pogledate kod koji daje 6 ćelija videćete da je MILANOVA ćelija u kodu u drugoj horizontalnoj liniji na prvom mestu, a sad u ovom kodu smo izbrisali tekst DEJAN i napisali MILAN, a izbrisali u drugoj liniji ćeliju u kojoj je bio tekst MILAN. Znači poenta je ta da ako želimo proširivati ćelije po vertikali moramo brisati ćelije ispod a tekstove pisati kako nam odgovara. E sad ajde da vidimo kombinaciju oba parametra. Na primer neka u gornjem primeru ĐURA zauzme i SAŠINU ćeliju:
<table border=4> <tr> <td rowspan=2>MILAN</td> <td>PERA</td> <td>VERA</td> </tr> <tr> <td colspan=2>ĐURA</td> </tr></table>
Ajde još složeniju tabelu da napravimo. U gornjem primeru ćeliju MILAN podelimo na primer po horizontali na 3 dela i ubacimo neka nova imena u tako dobijene nove ćelije:
<table border="4"> <tr> <td>DEJAN</td> <td rowspan="2">PERA</td> <td rowspan="2">VERA</td> </tr> <tr> <td rowspan="2">MILAN</td> </tr> <tr> <td colspan="2" rowspan="2">SAŠA</td> </tr> <tr> <td>ĐURA</td></tr></table>
Primećujete da smo ubacili još jednu horizontalnu liniju, a takodje vidite da neki TD tagovi mogu imati i oba atributa. Sve kombinacije asimetričnih tabela je moguće izraditi ovim atributima. Moguće je korišćenje i tabele u tabeli, ali takav pristup nije ekonomičan jer mnogo natrpava kod. Nije poenta samo napraviti efekat, nego trebamo i ekonomično koristiti HTML tagove. A ekonomičnost je moguća ukoliko dobro poznajemo sve mogućnosti HTML jezika.
Mi smo za podatke u gornjim tabelama koristili samo imena, ali tu mogu da stoje i čitavi pasusi teksta, sa svim mogućim tagovima za formatiranje i uredjivanje teksta koje smo naučil. Mogu da stoje i slike, linkovi i svi mogući tagovi za slike i linkove itd itd. Naravno linije tabela mogu biti vidljive ali i nevidljive, ili pak da budu vidljive samo neke linije a neke ne itd itd. U nastavku slede objašnjenja tih dekorativnih atributa.
Table tagSve atribute TABLE taga daću tabelarno:
Atribut Kod Prikaz Objašnjenje
border=n
<table border=14> <tr> <td>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
Definiše debljinu linija koje oivičavaju spoljni deo tabele u pikselima.
Po defoltu vrednost atribute je nula. Uočite
da je defoltna boja linija siva i to svetlija
siva gornja linija i leva, a desna i donja je
tamnija.
bordercolor=#rrggbb
<table border=10 bordercolor=#3333FF> <tr> <td>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
Atribut koji uvek ide sa border. Definiše boju svih linija koje
uokviruju spoljni deo tabele. Ne podržavaju
svi brauzeri.
bordercolordark=#rrggbb
<table border=10 bordercolordark=#3333FF> <tr> <td>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
Atribut daje boju desnoj i donjoj ivici tabele. Atribut koji
uvek ide sa border, ali vrlo često i sa
bordercolor. Ne podržavaju svi
brauzeri.
bgcolor=#rrggbb
<table bgcolor=#B0D8FF> <tr> <td>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
Daje boju čitavoj pozadini tabele.
bacground=<img>
<table background="pozadina.gif"> <tr> <td>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
Definiše sliku pozadine čitave tabele
cellpadding=n <table border=2 cellpadding=10> <tr> <td>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td>
ACA IKA
ICA ERA
Definiše udaljenost izmedju podatka i ivice ćelija u svim
pravcima simetrično u pikselima. Ne mora da ide zajedno sa border
ali ovde zbog demonstracije
</tr></table>
cellspacing=n
<table border=2 cellspacing=10> <tr> <td>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
Definiše udaljenost izmedju ćelija, i
izmedju ćelija i linija koje oivičavaju spoljni deo tabele. Ne mora da ide zajedno sa border
ali ovde zbog demonstracije.
width=n ili n%
<table border=1 width=130> <tr> <td>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
Definiše horizontalnu veličinu tabele. Kad
nije dat widthširina je tolika da se smeste svi podaci. Može se dati u
procentima ili pikselima. Ne mora da
ide uz border.
height=n ili n%
<table border=1 height=200> <tr> <td>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
Definiše vertikalnu veličinu tabele. Kad
nije datheight širina je tolika da se smeste svi podaci. Može se dati u
procentima ili pikselima. Ne mora da
ide uz border.
align=right ili center ili left
<table align=right> <tr> <td>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
Smešta tabelu uz desnu ivicu prostora u kojem se nalazi tabela ako je vrednostright,
levo ako jeleft i u sredinu horizontale ako jecenter. Ako
nema align po defoltu je left.
frame = above ili below ili lhs ili rhs ili hsides ili vsides ili box ili void
<table frame=above> <tr> <td>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td>
ACA IKAICA ERA
Kad je vrednostabove iscrtava sve gornje vodoravne linije koje poseduje
tabela. Kad je below crta sve donje vodoravne, lhscrta sve leve uspravne, rhs crta
</tr></table>
sve desne uspravne, hsidescrta i
sve gornje i donje vodoravne
linije, vsides sve leve i desne
uspravne, box crta sve moguće, voidne
iscrtava ni jednu liniju. Box vam je isto kao da ste stavili border=1, a void vam je isto kao
kad i ne koristite frame a ni border.Frame i
border nikad ne idu zajedno.
TR tagOvde ću dati tabelu atributa koji se koriste u TR tagu. Napomena: da bi lakše shvatili u jednoj horizontalnoj liniji tabele biće ubacivani atributi a u drugoj ne.
Atribut Kod Prikaz Objašnjenje
bordercolor=#rrggbb
<table border=7> <tr bordercolor=#3333FF> <td>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
definiše boju linija ćelija koje poseduje taj TR tag u kome je bordercolor atribut.
Uvek mora u TABLE tagu da stoji
border atribut. Ne podržavaju svi
brauzeri
bordercolordark=#rrggbb
<table border=7 > <tr bordercolordark=#3333FF> <td>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
Daje boju gornjoj i levoj liniji svim
ćelijama po horizontali. Taj
atribut uvek ide sa border u TABLE
tagu, ali vrlo često i sa bordercolor u
istom TR tagu. Ne podržavaju svi
brauzeribgcolor=#rrggbb <table>
<tr bgcolor=#B0D8FF> <td>ACA</td> <td>IKA</td>
ACA IKAICA ERA
Daje boju pozadini svih ćelija koje
sadrži taj TR. Ako se ne koristi bgcolor
</tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
defoltna vrednost je pozadina tabele a ako
nema ni tabela pozadinu onda je pozadina strane.
align=right ili center ili left
<table border=3 width="124"> <tr align=right> <td>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
Smešta sadržaj ćelija uz desnu ivicu ćelija
ako je vrednost atributaright koje se
nalaze u tom tagu TR. Ako je
vrednost left onda se smešta u levu stranu (to je i po defoltu), ako jecenter onda u
centar.
valign=top ili bottom ili middle
<table border=3 height=130> <tr valign=top> <td>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
Sadržaj ćelija smešta uz gornju ivicu
ćelija, i to onih ćelija koje se nalaze u tom
TR tagu. Ako jebottom onda smešta uz donju
ivicu a ako jemiddle onda u
sredinu. Middle je po defoltu ako se i ne
koristi valign atribut
TD tagI ovde ću dati tabelu atributa koji se koriste u TD tagu. Kao primer menjaću samo prvoj ćeliji atribute a ostale će biti po defoltu.
Atribut Kod Prikaz Objašnjenje
bordercolor=#rrggbb
<table border=7> <tr > <td bordercolor =#3333FF>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
definiše boju linija ćelije u kome je
bordercolor atribut. Uvek mora u TABLE tagu da stoji border
atribut. Nije podržan od svih brauzera
bordercolordark=#rrggbb
<table border=7 > <tr> <td bordercolordark =#3333FF>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
Daje boju gornjoj i levoj liniji ćeliji koja ima taj atribut. Uvek
ide sa border u TABLE tagu, ali vrlo često i sa bordercolor u istom TR tagu. Nije
podržan od svih brauzra.
bgcolor=#rrggbb
<table> <tr> <td bgcolor =#B0D8FF>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
Daje boju pozadini ćelije koja sadrži atribut. Ako se ne
koristi bgcolor defoltna vrednost je
pozadina tabele a ako nema ni tabela
pozadinu onda je pozadina strane.
align=right ili center ili left
<table border=3 width="124"> <tr> <td align=right>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
Smešta sadržaj ćelije uz desnu ivicu ćelije ako jeright. Ako je
vrednost left onda se smešta u levu stranu
(to je i defoltna vrednost ako se ne koristi align), ako jecenter onda u
centar.
colspan i rowspanObjašnjeno je ranije a
služe za izradu asimetričnih tabela.
valign=top ili bottom ili middle
<table border=3 height=130> <tr> <td valign=top>ACA</td> <td>IKA</td> </tr> <tr> <td>ICA</td> <td>ERA</td> </tr></table>
ACA IKAICA ERA
Sadržaj ćelije smešta uz gornju ivicu ćelije
ako jetop Ako je bottomonda uz donju ivicu a ako je middleonda u
sredinu. Middle je po defoltu ako se i ne
koristi valign
Dekorativne HTML tabele
Videli smo skoro sve atribute TABLE, TR i TD tagova. Mi smo uglavnom koristili po jedan do dva atributa, ali mogu se koristiti razne kombinacije stributa kako bi smo dobili estetski razne efekte. Evo jedan primer tabele koja služi da rasporedi elemente jedne web stranice:
<table border="1" cellpadding="0" cellspacing="0" width="600" height="426"><tr><td valign="top" colspan="3" height="75">Vrh stranice</td></tr><tr><td valign="top" width="155">Navigacija 1</td><td valign="top" width="398">Sadržaj stranice</td><td valign="top" height="278" width="164">Navigacija 2</td></tr><tr><td valign="top" colspan="3" height="71">Dno stranice</td></tr></table>
To bi izgledalo ovako:
Praktično mi smo pomoću tabele web stranicu podelili na nekoliko delova u kojima smeštamo njene elemente. U "Vrh stranice" se obično može smestiti na primer neka flash animacija ili gif, ili samo neka lepa slika. Tu se takodje smešta i naziv sajta, naziv firme, logo firme itd. U "Navigacija 1" se najčešće smešta navigacija web stranice. U "Navigacija 2" se smešta na primer pomoćna neka navigacija, a mogu i reklame, baneri itd. U "Sadržaj stranice" se smešta sam sadržaj stranice. U "Dno stranice" se obično smešta ime firme, vlasnik sajta, mogu i baneri, reklamne, kontakt podaci i slično.
Evo recimo kad bi dodali odgovarajuće te neke elemente, odnosno kad bi ubacili odgovarajuće pozadine, menije, i sadržaj kako bi mogla da izgleda web stranica:
Možete jasno primetiti kako su ispunjene ćelije tabele iz našeg primera. E sad naravno linije tabele se ne vide jer nije estetski, a to se postiže ako u TABLE tagu stavimo BORDER = 0.
FrejmSvaki frejm je jedan kompletan HTML fajl. Ako delite stranu na dva frejma, onda će u jednom frejmu biti jedan kompletan HTML dokument (npr. frejm1.htm), u drugom frejmu biće drugi kompletan HTML dokument (npr. frejm2.htm). Ali, glavna stvar je zapravo treći HTML fajl. Treći HTML fajl je u stvari GLAVNA STRANA koja isključivo sadrži <FRAMESET> tagove, koji definišu kako će se rasporediti frejmovi (FRAME tagovi). Glavna strana se stručno naziva frejm stranica ili frameset stranica. Frejm strana je HTML dokument koji nema <BODY> tag jer neće prikazivati nikakav sadržaj. Na ovaj način u web čitaču moguće je prikazati više stranica odjednom.
Na kraju uvoda ipak treba reći da strana ne treba imati previše frejmova. Otprilike ne bi trebalo da bude više od tri frejma na web strani. Medjutim moj vam je savet ukoliko možete izbeći potpuno frejmove, to bi bilo najbolje. Razlog tome je da sadržaj stranica koje su u frejmovima mnogo teže dospeva na pretraživače od običnih strana. Najprihvatljivije korišćenje frejmova je da se u njima smeštaju na primer neki reklamni baneri. Baneri se stavljaju na većini strana sajta tako što se svi ubace u jednu stranicu, koja se kao frejm
ubaci na sve stranice sajta. Pa recimo nekad ako želimo da izbrišemo neki reklamni baner ne moramo ga brisati na svim stranama već samo na tu jednu.
FrejmoviKao što znamo svaka HTML strana mora imati BODY tag u kome se smešta kod strane za prikaz sadržaja u brauzer. Medjutim frejm stranica ne mora sadržati BODY tag, i umesto njega se stavlja FRAMESET tag. Frameset tag ima i početni i krajnji tag. FRAMESET tag se može naći više puta na stranici.
Napravimo stranicu strana1.htm koja ispisuje samo tekst "STRANA1", i stranicu strana2.htm koja samo ispisuje "STRANA2". E sad ako želimo da te dve strane prikažemo na jednoj strani koristimo treću stranu u kojoj se nalazi FRAMESET, koji definiše na koji način će se podeliti strana kako bi se prikazale strane strana1.htm i strana2.htm. Na primer ako želimo stranu da podelimo na pola po vertikali onda pišemo:
<HTML><HEAD><TITLE>Frejm strana</TITLE></HEAD><FRAMESET cols=50%, 50%> <FRAME SRC="strana1.htm"> <FRAME SRC="strana2.htm"></FRAMESET></HTML>
Tag FRAME definiše uz pomoć atributa SRC stranicu koja će biti prikazana u odgovarajućem prostoru na stranici.
Atribut COLS u FRAMESET tagu definiše u kom odnosu će strana1.htm i strana2.htm deliti po vertikali frejm stranu. U našem slučaju na pola jer je 50%. Znači bez obzira kolika je rezolucija ekrana stranica će biti izdeljena po vertikali tačno po sredini. Kad imamo više frejmova i ako svima dajemo vrednost u procentima uvek se mora vodito računa da zbir svih procenata iznosi 100%, jer u suprotno dolazi do greške.
Doduše redje ali takodje za definisanje veličine polja frejma umesto procenata mogu se koristiti i pikseli. Na primer COLS=300, 500. Ali u ovom slučaju stranica sa frejmovima različito će se prikazivati na različitim rezolucijama ekrana. Na primer ako je rezolucija ekrana 1280 u širini naši prozori frejma biće jako uski i zauzimaće mali prostor uz levu ivicu strane a ostatak strane će biti prazan. Tu nelagodnost možete izbeći ako napišemo COLS= 300,*. Zvezdica u prevodu znači " sve što je ostalo ".
Frejm stranicu možemo deliti i po horizontali. U tu svrhu se koristi atribut ROWS u FRAMESET tagu. Sve što smo pisali za COLS važi i za ROWS samo što se sve odnosi na horizontalnu podelu stranice.
Podela prostora frejm strane po vertikali ili horizontali se može izvršiti i ovako: COLS="50,*,2*". To znači da će prvi frejm zauzeti 50 piksela a druga dva ostatak ekrana, stim što će treći frejm biti duplo veći od drugog.
Deljenje strane može se vršiti koliko god želimo i kako god želimo. Hajde na primer u našem gornjem kodu da frejm koji zauzima strana2.htm podelimo takodje na pola, ali u ovom
slučaju igre radi po horizontali, i u novom trećem polju da prikažemo neku novu stranicu, na primer strana3.htm koja ispisuje tekst "STRANA3":
<HTML><HEAD><TITLE>Frejm strana</TITLE></HEAD><FRAMESET cols=50%, 50%> <FRAME SRC="strana1.htm"> <FRAMESET rows=50%, 50%> <FRAME SRC="strana2.htm"> <FRAME SRC="strana3.htm"> </FRAMESET></FRAMESET></HTML>
Primećujete da kad god se vrši neka nova podela uvek se mora koristiti FRAMESET tag jer on definiše na koji način će se deliti prostor. U ovom našem slučaju podeliće se 50% po horizontali. A sve to bi brauzer prikazao ovako:
E sad možemo nastaviti sa deljenjem koliko nam je volja i kako god želimo, ili po vertikali ili horizontali. Samo ako delimo u procentima moramo voditi računa da zbir svih horizontalnih delova mora biti 100% ali i vertikalnih. Ako želimo neko polje da podelimo, na primer polje gde jestrana3.htm, onda izbrišemo FRAME tag koji sadrži adresu strana3.htm i na tom
mestu stavimo <FRAMESET></FRAMESET>, i definišemo atributima deljenje tog prostora, i u njemu stavimo koliko god želimo FRAME tagova.
Ranije su postojali neki brauzeri koji nisu podržavali frejmove. Kako danas internet posećuju milijarde ljudi dnevno moguće je da i danas neko koristi takav brauzer, koji onda otvori samo praznu stranicu. Da se ta nelagodnost ne bi desila tag NOFRAMES omogućava da takvim posetiocima napišete nešto. Evo primera koji će sve razjasniti:
<HTML><HEAD><TITLE>Frejm strana</TITLE></HEAD><FRAMESET cols=50%, 50%> <FRAME SRC="strana1.htm"> <FRAMESET rows=50%, 50%> <FRAME SRC="strana2.htm"> <FRAME SRC="strana3.htm"> </FRAMESET></FRAMESET><NOFRAMES><BODY><!-- Ovde pišete HTML tagove sve normalno kao kad pišete obične HTML stranice --> </BODY></NOFRAMES></HTML>
Scrollbar, margin i ivične linijeNaše stranice strana1.htm, strana2.htm i strana3.htm iz prethodnog naslova imaju samo po jednu reč. U tom slučaju sve će biti prikazano. Medjutim ako stranice imaju mnogo teksta, tada će po defoltu brauzer u frejmovima napraviti scrollbar - ove, to jest vertikalne i / ili horizontalne klizače kako bi mogli da vidite sve sadržaje u frejmovima. E sad ako želimo možemo definisati da li uvek prikazati scrollbar - ove, ili ih prikazati po potrebi (što je i po defoltu), ili pak nikad ih ne prikazati bez obzira što se možda neki deo stranice nikad neće videti. Atribut koji sve to definiše je SCROLLING a smešta se unutar FRAME taga. E sad na nekoj frejm stranici možemo frejmovima različito podesiti SCROLLING atribute. Evo primera:
<HTML><HEAD><TITLE>Frejm strana</TITLE></HEAD><FRAMESET cols=50%, 50%> <FRAME SRC="strana1.htm" scrolling=yes> <FRAME SRC="strana2.htm" scrolling=no> <FRAME SRC="strana2.htm" scrolling=auto></FRAMESET></HTML>
Dakle, kad je vrednost SCROLLING atributa YES onda se uvek pojavljuje scrollbar čak i ako nema potrebe za to. Ako je vrednost atributa NO onda se scrollbar nikad ne pojavljuje, ali ako je vrednost AUTO onda se pojavljuje po potrebi. Medjutim ako želimo AUTO onda i ne moramo pisati SCROLLING atribut jer je i po defoltu tako. Budite obazrivi ako nekad koristite NO vrednost jer nisu sve rezolucije ekrana iste, tako da nešto što lepo izgleda na vašoj
rezoluciji ne mora da znači da će izgledati tako na svim. Zato uvek pogledajte kako vam stranice ozgledaju na svim rezolucijama.
Verovatno ste primetili da brauzer uvek ostavi malo slobodnog prostora oko sadržaja svakog frejma u svim pravcima. Ova pojava postoji zbog estetike. Međutim, i veličina margin - a se može kontrolisati pomoću atributa MARGINWIDTH (margine po horizontali) i MARGINHEIGHT (po vertikali). Na primer podešavanje margin - a u svim pravcima na 1 piksel (što je minimalna vrednost) u nekom frejmu bi izgledalo ovako:
<HTML><HEAD><TITLE>Frejm strana</TITLE></HEAD><FRAMESET cols=50%, 50%> <FRAME SRC="strana1.htm" MARGINWIDTH=1 MARGINHEIGHT=1> <FRAME SRC="strana2.htm"></FRAMESET></HTML>
Defoltna vrednost margin - a u svim pravcima je 6 piksela. Medjutim mnogi se muče kad na primer postavljaju slike pa nikako ne mogu da uklope da se frejm prikaže baš po obodu slike. Ili po nekad neznatno frejmovi iseku sliku, ili ostave mali prazan prostor oko nje. Znajte da se širina frejma ne meri od kraja do kraja već 4 piksela je kao neka rezerva. Što znači ako želite tačno da uklopite sliku uvek kad definišete širinu i visinu frejma na osnovu širine i visine slike dodajte 8 piksela !
Primećujete da su svi frejmovi medjusobno ograničeni tanjim ili debljim linijama medjusobno. Po nekad je potrebno ukloniti sve te linije, ili ih pak podebljati, ali u svakom slučaju koriste se za to atributi BORDER, SPACING, FRAMEBORDER i FRAMESPACING a smeštaju se svi po potrebi u FRAMESET tagu. Evo primera ako želimo da uklonimo sve linije:
<HTML><HEAD><TITLE>Frejm strana</TITLE></HEAD><FRAMESET cols=50%, 50% BORDER=0 SPACING=0 FRAMEBORDER=0 FRAMESPACING=0 MARGINWIDTH=0 MARGINHEIGHT=0> <FRAME SRC="strana1.htm"> <FRAME SRC="strana2.htm"></FRAMESET></HTML>
Vrednost atributa BORDER definiše debljinu granice između frejmova u pikselima. FRAMEBORDER može imati vrednost 1 (ili YES), i tad se prikazuje granica između dva frejma, dok vrednost 0 (ili NO) ne prikazuje. FRAMESPACING definiše razmak između granica frejma i sadržaja frejma izraženog u pikselima.
U FRAMESET tagu može da se nadje i BORDERCOLOR atribut koji definiše boju granice između frejmova. Ovaj atribut se primenjuje jedino pod uslovom da je atribut FRAMEBORDER postavljen na aktivnu vrednost.
Postoji i atribut NORESIZE koji sprečava da posetilac stranice menja zadatu veličinu frejma. Ovaj atribut se samo navodi bez ikakve vrednosti. Važi samo za FRAME tag ! Postoje još neki atributi ali su manje važni.
FormaNa internetu gotovo svi sajtovi imaju formulare koji od nas traže popunjavanje. Ti formulari mogu biti raznovrsni i u smislu podataka koje zahtevaju, ali i po svojoj strukturi. U formularima možemo pisati jednu reč, ili jednu do dve rečenice, ali i čitave pasuse. Od nas se po nekad zahteva da izaberemo neke opcije od unapred pripremljenih, ili da ih čekiramo. Takodje preko tih formulara možemo na sajtovima ubacivati i naše fotografije, neke video klipove, i slično.
Da nema tih formulara na sajtovima bi smo nalazili samo ono što webmasteri pripreme, ili vlasnici tih sajtova. Dok ovako i sami posetioci mogu doprinositi sadržaju sajta. Neki sajtovi se i zasnivaju na tim formularima. Primeri takvih sajtova su forumi, blogovi, youtube, myspace, facebook i tako dalje. Jednom rečju formulari su ti koji čine sajtove dinamičnim.
Izrađivanje formulara omogućavaju HTML FORME. One dakle služe za prikupljane raznih podataka od posetilaca sajta, i te podatke šalju drugim skriptama na dalju automatsku obradu. Skripte koje preuzimaju podatke od HTML formi su PHP, ASP, CGI, JavaScript, i tako dalje.
Postoji glavni tag za forme koji ima naziv FORM. On ima početni i krajnji tag <form></form>. Normalno FORM tag ima nekoliko atributa ali o njima malo kasnije. FORM tag shvatite kao jednu kutiju u koju se smeštaju elementi forme, a upravo preko tih elemenata forme se unose raznorazni podaci. Skoro svi elementi forme moraju isključivo da se nadju samo unutar forme a ne i samostalno izvan nje. Izmedju početnog i krajnjeg FORM taga se ubacuju elementi forme. Elementi forme mogu biti u raznim kombinacijama. Na primer može da postoji samo jedan element forme, mogu dva različita, mogu dva ili više ista, ili više ista sa drugim elementima, itd.
Elementi forme su:
1. Text box - Polje u kome unosimo tekst od jedne reči do jedne rečenice.2. Password field - Polje u koje upisujemo šifre.3. Hidden field - Sakriveno polje. Prosledjuje podatke koje posetioci nisu upisali i koji im
nisu vidljivi ali su bitni su za dalju obradu unetih podataka.4. Text area - Područje u kome unosimo tekst od jedne reči do čitavih nekoliko pasusa5. Check box - Potvrdni okvir. Omogućava posetiocima da čekiranjem izaberu jednu ili
više opcija od ponudjenih.6. Radio button - Radijsko dugme. Slično kao i Check box ali posetioci čekiranjem biraju
isključivo samo jednu opciju od više ponudjenih.7. Drop-down menu - Spuštajući izbornik. Smisao je isti kao i kod Check box-a, ali se
koristi ako se nude veliki broj opcija, na primer desetak ili stotinak. Kad bi smo 100 opcija pisali Check box-om trebala bi nam metar strana, a ovako se pravi padajući izbornik sa klizačem i sve je elegantnije i lepše.
8. File upload - Polje za unošenje fajlova. Na primer slika, tekst fajlova video klipova, i drugih fajlova.
9. Submit button - Dugme na koje kliknemo kad popunimo formular. Kad se klikne na to dugme onda forma prosledjuje te naše podatke drugim skriptama na obradu, na primer PHP skripti.
10. Reset button - Reset dugme briše sve što smo popunili u formi da bi opet krenuli sa novim popunjavanjem jer smo recimo napravili mnoge greške.
11. Image button - Slikovno dugme. To je dugme koje može imati istu upotrebu kao Submit dugme ali se Image button može i slikovno dekorisati. Submit dugme ne može jer ga definiše sam brauzer po defaultu.
U nastavku će FORM tagFORM tag izmedju ostalog pokazuje brauzeru gde počinje i gde se završava formular. Unutar početnog i krajnjeg taga se smeštaju elementi za unos podataka, ali mogu i svi drugi mogući HTML tagovi. Na primer možemo uneti tekst koji objašnjava šta pisati u poljima, mogu i slike, linkovi itd. Takodje vrlo često se elementi forme rasporedjuju tabelarno, što znači da se i tabele mogu smeštati u formama, itd. Minimalni izgled forme je:
<body><form> <!-- Ovde se smeštaju jedan ili više elemenata
mo objasniti sve ove elemente.
Text box, Password field, Submit, Reset, Image buttonTaxt boxText box je HTML FORM element za unos teksta u jednom redu. Znači zamišljen je da se unese tekst od jedne reči do eventualno jedne rečenice. Evo koda minimalne forme sa TEXBOX elementom:
<form name="forma2"> <input type="text" name="tekst1" value="Upisi ime"><br> <input type="submit" value="Posalji" name="submitdugme"><br> <input type="reset" value="Ponisti"></form>
Brauzer bi prikazao sledeće:
Tag TEX BOX elementa forme kao što vidimo u kodu je <input type="text">. Brauzer kad naidje na taj tag odma iscrtava polje za popunjavanje.
Atribut NAME u TEXT BOX-u je obavezan i njegovu vrednost dajemo po želji.
Upisi ime
Posalji
Ponisti sve
Atribut VALUE nije neophodan. Ukoliko se ne ubaci a mi napišemo nešto u polje i kad kliknemo na submit dugme forma automatski to što smo napisali dodeljuje u vrednost VALUE. Medjutim ako ipak želimo da mu damo vrednost (kao što smo mi dali) onda je to defoltna vrednost koja će se proslediti kada kliknemo na submit dugme iako ništa nismo upisali. Ako nismo napisali VALUE vrednost a i ne napišemo ništa a kliknemo submit dugme onda će se u value dodeliti prazan string i tako poslati na dalju obradu.
E sada slede atributi textbox-a koji nisu obavezni ali su zanimljivi naravno.
SIZE je numerički atribut koji definiše širinu polja po horizontali mereno u tekstualnim znacima. Na primer SIZE = 10 definiše da će 10 znaka biti veličina prozorčića u kome će se pisati. Drugim rečima ovim atributom definišemo veličinu prozorčića.
MAXLANGTH je isto numerički atribut.koji definiše maksimum slova koliko možemo da pišemo u prozoče. Na primer MAXLANGTH = 8 znači da možemo maksimalno 8 slova pisati u prozorče, a kad ispišemo 8 slova više nemožemo jer iako mi i dalje kucamo slova na tastaturi slova se više ne ispisuju. Obično ide zajedno sa SIZE atributom, ali tako da vrednost u size atributu uvek bude za dva ili tri veća od MAXLANGTH vrednost. Naravno MAXLANGTH nemojte nikad shvatiti kao sigurnu zaštitu. Već smo pisali da se na klijentskoj strani svaka zaštita može izigrati. Ali pošto ima daleko više običnih korisnika od militantnih sve ovo ipak ima smisla jer se rasterećuje server tako što se još na klijentskoj strani definiše veličina teksta.
Submit buttonSubmit button (submit dugme) je obavezno u svim formama jer se na njega klikne kad je sve popunjeno da bi forma poslala podatke. Zato sam ja dao vrednost POSALJI. Submit button je isto element forme. Njegov tag je <input type="submit"> koji uvek sadrži atribut VALUE osim ukoliko želite da vam se na dugmetu ispiše Submit Query. Vrednost VALUE atributa je znači tekst koji će se prikazivati na dugmetu. SUBMIT tag mora da sadrži atribut NAME ukoliko forma šalje podatke nekoj skripti za obradu podataka, na primer PHP skripti. Vrednost atributa NAME se naravno ne vidi u brauzeru, ali se vrednost imena šalje skriptama kao što su PHP kojima je to neophodno. Ako koristimo formu samo u JavaScript-ovima onda nije neophodno imenovati submit dugme.
Image buttonImage button može da zameni submit dugme i besmisleno je da se zajedno nadju u istoj formi jer vrše istu funkciju. Naime priča je vrlo slična kao i za submit, samo što IMAGE dugme nema VALUE atribut a ima atribute koji su vezani za slike. Evo jednog IMAGE BUTTON taga pa će sve biti jasnije:
<input type="image" src="dugme.gif" name="submitSlikovno" width="60" height="60" ALT="POŠALJI">
Znači kad se klikne na IMAGE dugme forma šalje podatke. E sad kao što vidimo postoji i SRC argument a on kao što znamo daje kratko objašnjenje slike ako se ona iz nekog razloga ne pojavi. Znači važe svi argumenti koje smo naučili u vezi slika da se ne ponavljamo. Jedino treba naglasiti da je poželjno uvek koristiti ALT argument obzirom da nekad može se desiti da se ne pojavi slika pa da ljudi znaju gde je submit dugme. Takodje NAME argument uvek mora da se koristi ako forma šalje na primer PHP skriptama podatke, a ako šalje JavaScript-u onda nije neophodno.
ResetReset dugme nije obavezno ali se u ogromnoj većini formi koristi. Reset dugme se klikće kad želimo da izbrišemo sve šta smo uneli u polja forme, na primer zato što smo pogrešili na više mesta pa se više isplati da sve ponovo popunimo. Reset dugme ima tag <input type="reset"> koji uvek sadrži atribut VALUE osim ukoliko želite da vam se na dugmetu ispiše Reset. Vrednost VALUE atributa je tekst koji će se prikazivati na dugmetu u brauzeru.
Password FieldPassword field je apsolutno u svemu isti kao i TEXTBOX samo što se ovde pojavljuju tačkice dok pišemo u prozorče a u texbox-u se pojavljuju slova koja pišemo. Znači ovde se isto pamte u VALUE atributu ono što zapišemo ali vizuelno vidimo tačkice kao zaštita šifre da neko ko posmatra sa strane ne vidi šifru. Tag ovog atributa je <input type="password">. Ponavljam još jednom, sve ostalo je apsolutno isto kao kod textbox-a.
Hidden FieldU nekim slučajevima forma mora pored podataka koje unose posetioci da pošalje i odredjene podatke koje ne unose posetioci i nisu im vidljivi. Na primer neki sajt ima englesku i srpsku verziju. I recimo iz obe verzije forme šalju podatke istoj skripti na obradu. E sad da bi ta skripta znala iz koje verzije su podaci, možemo kroz HIDDEN polje da prosledimo na primer vrednost engleski, ili srpski. Ali nemojte zaboraviti da je taj podatak sakriven u smislu da se ne vidi u direktno u displeju brauzera, ali ako neko želi može ga videti. Na primer pogleda Source code vaše stranice pomoću brauzera.
HIDDEN tag je <input type="hidden">. A kompletan FORM tag bi izgledao ovako:
<form name="forma3"> <input type="hidden" name="jezik" value="srpski"> Upisi svoje ime: <input type="text" name="tekst1" value="Upisi ime"><br> <input type="submit" value="Posalji" name="submitdugme"><br> <input type="reset" value="Ponisti"></form>
Upisi svoje ime:
Iz primera jasno uočavate da se TEXT BOX vidi a HIDDEN polje ne. Kad se unese ime u našem primeru i klikne na POSALJI forma šalje ime, ali šalje i vrednost iz HIDDEN atributa iako ga posetioc nije uneo a ni video. HIDDEN tag uvek mora da sadrži VALUE i NAME atribute i da im bude dodeljena vrednost. HIDDEN tag ima samo NAME I VALUE atribute.
Upisi ime
Posalji
Ponisti
Hidden FieldU nekim slučajevima forma mora pored podataka koje unose posetioci da pošalje i odredjene podatke koje ne unose posetioci i nisu im vidljivi. Na primer neki sajt ima englesku i srpsku verziju. I recimo iz obe verzije forme šalju podatke istoj skripti na obradu. E sad da bi ta skripta znala iz koje verzije su podaci, možemo kroz HIDDEN polje da prosledimo na primer vrednost engleski, ili srpski. Ali nemojte zaboraviti da je taj podatak sakriven u smislu da se ne vidi u direktno u displeju brauzera, ali ako neko želi može ga videti. Na primer pogleda Source code vaše stranice pomoću brauzera.
HIDDEN tag je <input type="hidden">. A kompletan FORM tag bi izgledao ovako:
<form name="forma3"> <input type="hidden" name="jezik" value="srpski"> Upisi svoje ime: <input type="text" name="tekst1" value="Upisi ime"><br> <input type="submit" value="Posalji" name="submitdugme"><br> <input type="reset" value="Ponisti"></form>
Upisi svoje ime:
Iz primera jasno uočavate da se TEXT BOX vidi a HIDDEN polje ne. Kad se unese ime u našem primeru i klikne na POSALJI forma šalje ime, ali šalje i vrednost iz HIDDEN atributa iako ga posetioc nije uneo a ni video. HIDDEN tag uvek mora da sadrži VALUE i NAME atribute i da im bude dodeljena vrednost. HIDDEN tag ima samo NAME I VALUE atribute.
Radio ButtonRADIO BUTTON služi da posetilac izabere čekiranjem samo jednu od nekoliko ponudjenih opcija. Evo kompletnog koda i sve će biti jasnije:
<form name="forma5"> <table border="0" cellpadding="0" cellspacing="0" width="315" height="93"> <tr> <td valign="top" align="center"> <!-- POČETAK prvog tipa opcija --> <b>Ko ti je najbolji drug?</b><br> <input type=radio name="drug" value="pera" CHECKED> PERA<br> <input type=radio name="drug" value="mika"> MIKA<br> <input type=radio name="drug" value="aca"> ACA<br> <!-- KRAJ prvog tipa opcija --> </td> <td valign="top" align="center">
Upisi ime
Posalji
Ponisti
<b>Koja ti je boja kose?</b><br> <!-- POČETAK drugog tipa opcija --> <input type=radio name="kosa" value="bela"> BELA<br> <input type=radio name="kosa" value="crna" CHECKED> CRNA<br> <input type=radio name="kosa" value="plava"> PLAVA<br> <!-- KRAJ drugog tipa opcija --> </td> </tr> </table> <input type="submit" value="Submit" name="B1"> <input type="reset" value="Reset" name="B2"></form>
Ko ti je najbolji drug?
PERA
MIKA
ACA
Koja ti je boja kose?
BELA
CRNA
PLAVA
Osnovni tag je kao što vidimo <input type=radio>. Takodje vidimo u kodu da svaka ponudjena opcija ima svoj RADIO tag. Svaki RADIO tag obavezno mora sadržati NAME i VALUE atribute. U istoj formi u primeru su ponudjena dva tipa opcija. Prvi tip opcija je koje najbolji drug, a drugi tip opcija je koju boju kose ima posetilac. U svaka od ta dva tipa opcija bira se čekiranjem jedna opcija od ponudjenih tri. Na primer po defaultu smo stavili da je PERA najbolji drug, ali ako čekiramo MIKA onda se automatski briše čekiranje PERE.
U NAME atributu svih RADIO tagova koji se odnose na jedan tip opcija pišete obavezno istu vrednost. Za opcije na pitanje koje najbolji drug za NAME atribut svih RADIO tagova izabrali smo za vrednostdrug. A za opcije na pitanje koja je boja kose za NAME atribut svih RADIO tagova izabrali smo vrednost kosa.
Vrednosti VALUE atributa svih RADIO tagova unutar istog tipa opcija mora da se naravno medjusobno razlikuju kako bi se opcije programski razlikovale..
CHECKED je atribut RADIO taga bez vrednosti, a definiše defaultno čekiranje koja se automatski pojavi. Naravno CHECKED ako ga već imamo onda u jednom tipu opcija može da postoji najviše jedan CHECKED. Ako pogrešimo i stavimo na više mesta u jednom tipu opcija onda će brauzer konstatovati onaj CHECKED kojeg zadnjeg primeti. A ako želimo da ne bude automatskog čekiranja onda svuda izbacimo CHECKED.
A vezano za forme u ovom primeru možete primetiti da smo koristili tabelu za grafičko organizovanje pojedinih elemenata forme. Znači to je ono što sam pisao da unutar forme možete pisati po potrebi sve moguće tagove koje smo naučili. Jedino ne može se umetati forma unutar druge forme !! Na primer tabela u tabeli može ali ne i forma u formi.
Submit Reset
Check BoxCHECK BOX ima cilj odabiranja ponudjenih opcija čekiranjem slično kao i RADIO BUTTON ali stom razlikom da omogućava čekiranje jedne ili više, pa i svih ponudjenih opcija. Osnovni tag je <input type="checkbox">. A evo forme koja dočarava korišćenje ovog elementa forme:
<form name="forma6"> <b>Koje sve mlečne proizvode voliš?</b><br> <input type="checkbox" name="opcija1" value="mleko" CHECKED> MLEKO<br> <input type="checkbox" name="opcija2" value="maslac"> MASLAC<br> <input type="checkbox" name="opcija3" value="sir"CHECKED> SIR<br> <input type="submit" value="Posalji" name="submitdugme"><br> <input type="reset" value="Ponisti"></form>
Koje sve mlečne proizvode voliš? MLEKO MASLAC SIR
Takodje i ovde vidimo u kodu da svaka ponudjena opcija ima svoj CHECKBOX tag. Svaki CHECKBOX tagobavezno mora sadržati NAME i VALUE atribute.
Svi NAME atributi u svim CHECKBOX tagovima moraju imati različitu vrednost. Zato i nema smisla postojanja više tipova opcija kao u slučaju RADIO taga jer svaki CHECKBOX tag ima drugačiju vrednost u NAME tagu. Da pogrešno ne shvatite, možete vi praviti više tipova opcija što se tiče posetilaca ali programski postoji jedan tip opcija za jednu formu.
Vrednosti VALUE atributa svih CHECKBOX tagova se naravno moraju medjusobno razlikovati kako bi se opcije i programski razlikovale.
CHECKED je atribut i CHECKBOX taga kao i kod RADIO taga ali za razliku od RADIO taga gde se stavlja samo jedan CHECKED atribut u jednom tipu opcija, ovde možete stavljati koliko god hoćete, pa i sve opcije ako želita mogu biti po defaultu čekirane.
Drop down menuDROP-DOWN element forme ima istu funkciju izbora jedne opcije od ponudjenih kao što to omogućava RADIO BUTTON. Medjutim razlika je u broju ponudjenih opcija. Radio button elementom možemo ponuditi nekoliko opcija, dok drop-down menu elementom možemo ponuditi veliki broj opcija, na primer dvadeset ili čak i preko sto. Mi možemo preko RADIO
Posalji
Ponisti
tag ponuditi i trideset opcija ali zamislite tu situaciju, to bi bilo jako ružno na stranici. Daću sad kod a zatim objasniti:
<form name="forma8"> <b>Ko je najbolji tvoj drug?</b><br> <select size="1" name="drug"> <option value="sasa" selected>SASA</option> <option value="pera">PERA</option> <option value="drago">DRAGO</option> <option value="tuta">TUTA</option> <option value="giga">GIGA</option> <option value="mika">MIKA</option> </select><br> <input type="submit" value="Posalji" name="submitdugme"><br> <input type="reset" value="Ponisti"></form>
Ko je najbolji tvoj drug?
Osnovni tag je <select></select>. Kao što vidimo SELECT tag ima početni i krajnji tag, a izmedju se nalaze opcije koje se definišu pomoću OPTION taga, koji takodje ima početni i krajnji tag:<option></option>.
Imenovanje drop-down menija je obavezno a NAME atribut se nalazi u SELECT tagu.
Takodje je i VALUE obavezan argument ali on se nalazi u OPTION tagu. Naravno vrednosti u VALUE atributu se medjusobno razlikuju.
U OPTION tagu može se naći i SELECTED atribut (koji nema vrednost) koji odredjuje koja opcija će biti na prvom mestu. Ako selected nije postavljen u ni jednom OPTION tagu onda je na prvom mestu ona opcija koja je na prvom mestu i u kodu. Ako ne izaberemo prilikom popunjavanja forme ništa onda forma šalje onu vrednost iz taga OPTION u kome se nalazi atribut SELECTED. Ako nigde ne figuriše SELECTED onda forma šalje vrednost iz prvog taga u kodu. Znači u ovom slučaju nije moguće poslati prazan string kao što može to RADIO BUTTON ukoliko nigde nije postavljen CHECKED atribut. Medjutim ako imamo potrebe za praznim stringom u slučaju da posetilac ništa ne izabere možemo napraviti jedan ovakav OPTION tag: <option value=""></option> i staviti ga na prvom mestu u kodu, stim da nakon toga nigde nesme da se nadje SELECTED argument.
E sad postoje dva argumenta koji se mogu naći u SELECTED tagu koji su čisto grafičke prirode. Naime po defaultu svi brauzeri iscrtavaju prozorče u kome se ispisuje (vidi) samo jedna opcija a sa desne strane se nalazi strelica (tačnije trouglić koji je okrenut na dole). E sad ako hoćemo na primer da se vide dve, tri ili koliko god želimo opcije a ne samo jedna onda SELECT tag stavimo SIZE atribut ovako:<select SIZE="3" name="drug"> . U ovom
SASA
Posalji
Ponisti
slučaju će se videti SASA, ali i PERA i DRAGO iz prve. Naravno ako kliknemo na strelicu onda će se otvoriti neposredno ispod ili iznad prozorče sa ostalim opcijama. A ukoliko imamo mnogo opcija onda će se u prozorče pojaviti sa desne strane i klizač kojim možemo videti sve opcije. E sad ukoliko želimo da nam se odma pojavi to prozorče sa eventualnim klizačem bez prethodnog kliktanja strelice onda pišemo atribut MULTIPLE (koji nema vrednost).
File uploadFile upload je element forme koji se koristi za ubacivanje fajlova, na primer slika, video klipova, tekst fajlova, i ostalih tipova fajlova. Daću kod pa ću onda objasniti:
<form method="POST" action="obrada.php" enctype="multipart/form-data" accept="image/gif, image/jpeg"> <input type="hidden" name="MAX_FILE_SIZE" value="20480"> UBACI SLIKU: <input type="file" size="25" name="slika"><br> <input type="submit" value="Posalji" name="submitdugme"><br> <input type="reset" value="Ponisti"></form>
UBACI SLIKU:
Form tag što se tiče ubacivanja fajlova UVEK mora sadržati method="POST", enctype="multipart/form-data" i action sa adresom fajla u kome se obradjuje uneti fajl. ACCEPT atribut može ali i ne mora da se ubacuje, i nećemo ga objašnjavati jer smo to već uradili kad smo objašnjavali FORM tag.
Uvek ali uvek u formi za upload fajlova morate staviti HIDDEN tag ako prosledjujete podatke PHP skripti. U hidden tag obavezno moramo staviti atribut name="MAX_FILE_SIZE" i value="20480".Value atribut odredjuje maksimalnu veličinu fajla koji može da se ubaci. Naravno to je da se server ne opterećuje ali nikako to ne shvatite kao zaštitu od prevelikog unosa. Zažtitu morate napraviti na strani servera u skripti za obradu podataka. U ovom našem slučaju maksimalna veličina fajla je 20 Kb a dobija se 20 * 1024 = 2048. Naravno ako želimo veću sliku u bajtima pišemo kako nam odgovara, ili manju.
E sad konačno o FILE UPLOAD tagu. Znači osnovni tag se piše <input type="file">. FILE tag nema VALUE atribut jer je vrednost u stvari sam fajl koji se ubacuje, a NAME vrednost odredjujemo kako nama odgovara. U FILE UPLOAD tag možemo ubaciti i SIZE atribut koji definiše veličinu prozorčića.
Posalji
Ponisti