HTML Skripta

SADRŽAJ Uvod ................................................................................................................. ............................................................................................................................. ...................... ..............4 ....4 Internet servisi.............................................................................................................................4 WWW................................................................. WWW............................................................................................................ .....................................................................5 ..........................5 Arhitektura WWW-a......................................................................... WWW-a.................................................................................................. ......................... ..............5 .......... ....5 Statički i dinamički web........................................................................................................ web........................................................................................................ ...6 WAMP server....................................................................... server.................................................................................................................. ........................................................8 .............8 Instalacija WAMP servera..................................................................................................... servera..................................................................................................... ..9 Primer organizacije sajta po folderima..................................................................................11 Šta su HTML tag-ovi?............................................................................................................ tag-ovi?............................................................................................................ ....12 Otvaranje vašeg radnog prostora...............................................................................................12 prostora...............................................................................................12 Kreiranje HTML dokumenta..................................................................................................... dokumenta..................................................................................................... ..13 Prikazivanje dokumenta u Web Browser-u................................................................................14 Modifikovanje HTML Dokumenta........................................................................................... Dokumenta........................................................................................... ....14 Reload-ovanje dokumenta u Web Browser.............................................................................. Browser................................................................................15 ..15 Zaglavlja (Headings).............................. (Headings)......................................................................... ................................................................................... ........................................ .15 1.1 HTML zaglavlja...................................... ................................................................................ ............................................................ ............................ .............. .... 15 Smeštanje HTML zaglavlja u vaš dokument.........................................................................16 Razdvajanje Paragrafa..............................................................................................................17 1.2 HTML Paragraf Break-ovi................................................................................................. Break-ovi................................................................................................. 17 Unošenje Paragraf Break-ova........................... Break-ova..................................................................... .................................................................. ........................ ..17 Drugi tipovi break-ova......................................................................................................... break-ova......................................................................................................... ..18 Rad sa stilovima........................................................................................................................19 HTML Style Tag-ovi..............................................................................................................19 Unošenje Stilizovanog teksta u HTML dokument............................................................. dokument..................................................................20 .....20 Rad sa listama............................. listama........................................................................ ............................................................................................. .................................................. .20 1.3 Neuređene liste.................................... ............................................................................... ............................................................................ ................................. 21 Uređene liste.......................................................................... liste.........................................................................................................................21 ...............................................21 Umetnute liste....................................................................... liste.......................................................................................................................22 ................................................22 Umetnute liste .......................................... .................................................................................... ......................................................................... ............................... ...23 HTML tagovi za ubacivanje slika.................................................................... slika................................................................................................24 ............................24 Centriranje teksta i Inline grafike......................................................................................... grafike......................................................................................... ..24 1.4 Atributi Height (Visine) i Width (Širine) ............................................................................ 25 Linkovi.......................................................................................................................................26

Link za lokalne fajlove...................................................................... fajlove.......................................................................................................... .................................... .26 1.5 Link za grafiku..................................... ............................................................................... ............................................................................. ................................... 26 Link ka drugim folderima .................................................................................................. .................................................................................................. ....27 Anchor linkovi ka folderima višeg nivoa ................................................................................27 ................................................................................27 Anchor link ka stranici na Internetu ......................................................................................28 1.6 Linkovi i adrese....................................... .................................................................................. ................................................................ ............................. ........ 29 1.6.1 Kako rade linkovi u pretraživaču......................................... ................................................................................ ....................................... 29 1.6.2 Apsolutne ili relativne putanje ......................................... .................................................................................... ........................................... 29 1.6.3 Atribut target.............................................................................................................. target .............................................................................................................. 30 Heksadecimalne oznake i boje .................................................................................................30 Jednobojne pozadine (Solid Color Backgrounds)..................................................................31 Backgrounds)..................................................................31 Teksturne pozadine.................................. pozadine............................................................................. .............................................................................32 ..................................32 META tagovi................................................................................................... tagovi................................................................................................................. ........................ .............33 ...33 1.7 Meta tag za automatski prelazak na drugu web stranicu ................................................. 33 Meta tagovi za opis........................................................................... opis......................................................................................................... .............................. ......34 Basic Table Tag-ovi – Osnovni HTML table tag-ovi...................................................................35 Redovi i Kolone............................... Kolone.......................................................................... ......................................................................................36 ...........................................36 1.8 A Data Table – Tabela (sa podacima).......................................... ............................................................................. ................................... 37 Oblikovanje formi................................................................ formi.................................................................................................................... .................................................... ...40 Text Input Elementi (type="text").................................................................................. (type="text")...........................................................................................40 .........40 Password Input Elementi (type="password").........................................................................41 (type="password").........................................................................41 1.9 Text Area Input Elementi (type="textarea")..................................... .......................................................... ................................ ............. 41 Radio buttons (dugmici) (type="radio")..................................................................................42 (type="radio")..................................................................................42 1.10 Check Boxes (type="checkbox")...................................... ........................................................................... ..................................... ......... 43 Menu Select (type="select")..................... (type="select")................................................................ ......................................................................... .............................. ....44 Submit and Reset (type="submit" and type="reset").............................................................45 CSS...........................................................................................................................................49 1.11 Šta je to CSS?.......................................... ................................................................................................. ....................................................... .......... .............. .... 49 Načini primene stilova...................................................................... stilova.......................................................................................................... .................................... .50 1.11.1 CSS kao eksterni fajl............................................................................................... fajl ............................................................................................... 50 1.11.2 Interni stilovi............................................................................................................ stilovi ............................................................................................................ 51 1.11.3 Inline......................................... .................................................................................... ........................................................ ....................... .................... ............ 51 1.11.4 Alternativne liste stilova ....................................... .......................................................................................... ................................................... 52 Sintaksa.....................................................................................................................................52 Iskazi - vrste................................................................. vrste............................................................................................................ .............................................................54 ..................54 Komentari.............................................................................. Komentari................................... ...................................................................................... ...............................................54 ....54

HTML komentari.......................... komentari.................................................................... .....................................................................................54 ...........................................54 Rules (pravila)........................... (pravila)...................................................................... ........................................................................................55 .............................................55 Selektori – Uvod........................................................................................................................55 Tipovi selektora.............................. selektora......................................................................... ......................................................................................55 ...........................................55 Type selektori........................... selektori..................................................................... ..................................................................................... ...................................................55 ........55 Tipovi HTML elemenata ................................................................................................ ................................................................................................ ......56 Class selektori........................... selektori...................................................................... ...................................................................................... .................................................56 ......56 Opšti class selektori........................................................................ selektori.............................................................................................. ...................... ............57 .......... ..57 Class selektori.............................. selektori......................................................................... .....................................................................................57 ..........................................57 ID selektori............................. selektori........................................................................ ..............................................................................................58 ...................................................58 Opšti ID selektori................................................................. selektori...............................................................................................................58 ..............................................58 ID selektori..................................................................... selektori....................................................................................................................... .................................................. .59 Descendant (potomak) selektori................................................................... selektori............................................................................................59 .........................59 Link pseudo class selectors..................................................................................................61 Svojstva (Properties)............................. (Properties)........................................................................ .....................................................................................63 ..........................................63 Text style svojstva.............................................................. svojstva......................................................................................................... ...................................................63 ........63 Text layout svojstva................................................................... svojstva.................................................................................................... ................................. ..............67 .......... ....67 Background svojstva............................................................ svojstva....................................................................................................... .................................................... ..........71 .71 Border svojstva........................................................... svojstva..................................................................................................... ..................................................... .....................74 ..........74 Margin svojstva.............................................................. svojstva........................................................................................................ ......................................................... ..................76 ...76 Padding svojstva............................................................... svojstva......................................................................................................... .........................................................78 ...............78 . Page layout svojstva................................................................................ svojstva............................................................................................................ ............................ ....79 1.12 Uvod u pozicioniranje elemenata sa CSS-om......................................... ..................................................... ...................... ............ 79 1.13 Slovo o slojevima (layers).......................................... ................................................................................. ....................................... .......... ............ .. 79 1.14
......................................... ................................................................................... ............................................................................... ..................................... ..... 80 Načini pozicioniranja.................................... pozicioniranja............................................................................... .......................................................................... ............................... ...80 1.15 Statičko pozicioniranje........................................ .................................................................................. .......................................... ........... ................ ..... 80 1.16 Apsolutno pozicioniranje........................................... ...................................................................................... ........................................... .......... 81 1.17 Relativno pozicioniranje........................................... ...................................................................................... ........................................... .......... 82 Element type svojstva................................................................ svojstva.............................................................................................................. .............................................. .89

Uvod HTML, HyperText Markup Language, je standarizovani jezik koji se koristi pri strukturiranju tekstova, medija i ugrađenih objekata u web stranice i elektronsku poštu. Kao modifikovanu i pojednostavljenu verziju SGML jezika, HTML standarizuje i održava World Wide Web Consortium (W3C). Originalnu verziju HTML-a kreirao je Tim Berners-Lee, a prva zvanična verzija je izašla juna 1993 godine. HTMl jezik je sačinjen od običnog teksta i tagova. Iako se HTML znakovi (tags) često nazivaju kodom, tehnički HTML nije kod jer kompjuterski kod su instrukcije koje od računara traže da izvrši određenu operaciju. Svrha HTML znakova je da se se struktura dokumenta "označi" tako da bi korisnikov agent (user agent), tj. internet pretraživač mogao da prepozna strukturu dokumenta i ispravno je prikaže u prozoru internet pretraževača kojeg korisnik koristi. Za dodatno modifikovanje web stranica, do sada su izašli neki dodaci: • •

•

CSS ili Cascading Style Sheets za izgled i položaj prezentacije Skriptni jezici (Javascript, VBScript) za omogućavanje dinamičnosti i interaktivnosti na web prezentacijama, DOM ili Document Object Model, koji označava vezu između skripte i elementa na stranici

Gornji dodaci, u paketu sa HTML jezikom, ponekad se nazivaju DHTML ili Dinamični HTML.

Internet servisi Kada se govori o sadržaju i uslugama koje Internet nudi tada se u stvari misli na servise Interneta. Svi servisi Interneta rade po klijent-server konceptu. Suština tog koncepta je da se pomoću programa koji se nalazi na računaru korisnika mreže-klijenta pristupa željenim podacima koji su smešteni na serveru na nekoj lokaciji svetske mreže. Servisi Interneta se obično dele na: • •

•

Osnovne – servisi koji postoje na svakom računaru koji je na mreži; Javne – servisi koji se instaliraju na značajnije servere na mreži obezbeđujući lak pristup podacima; Posebne – servisi namenjeni zadovoljenju specifičnih želja korisnika.

Glavni predstavnik osnovnog servisa je e-mail (elektronska pošta). Najznačajniji javni servis je WWW. U posebne servise spadaju servisi za pretraživanje, sigurnosni servisi, servisi namenjeni administratorima servera i mreža, i brojni drugi servisi.

WWW Najpopularniji Internet servis je World Wide Web (WWW). Nastao je 1989. godine kao rezultat ideje Tim Berners Li-a i njegovih saradnika u okviru Centra za nuklearna istraživanja u Švajcarskoj (CERN). U početku veb prezentacije su bile tekstualnog tipa. Godine 1993. Mark Andersen sa saradnicima u Nacionalnom centru za superkompjuterske aplikacije na Ilinois univerzitetu napravio je veb brauzer sa grafičkim korisničkim interfejsom koji je prikazivao boju, sliku i animaciju. Godinu dana kasnije, Andersen i Džim Klark su osnovali Netscape, koji je kreirao prvi komercijalni veb brauzer - Internet explorer, koji je postao dominantan na tržištu. WWW je sistem sa univerzalno prihvaćenim standardima za skladištenje, pronalaženje, formiranje i prezentaciju informacija u klijent-server konceptu. Veb stranice se zasnivaju na standardnom HTML (Hypertext Markup Language) jeziku koji formatira dokumente i pravi dinamičke linkove ka drugim dokumentima i slikama smeštenim na istim ili drugim računarima. HTTP (Hypertext Transfer Protocol) je komunikacioni protokol koji omogućava saobraćaj veb stranica u mreži. Kompletna putanja do zahtevanih veb stranica naziva se URL (Uniform Resource Locator). Za realizaciju WWW servisa važan je veb server. Veb server je softver za lociranje i skladištenje veb stranica. On locira veb stranice koje korisnik računara zahteva i dostavlja ih.

Arhitektura WWW-a WWW predstavlja mrežu dokumenata koji su međusobno povezani; skup protokola koji definišu kako sistem radi i prenosi podatke i softver koji omogućuje rad ove koncepcije. Ono po čemu se WWW razlikuje od drugih servisa na Internetu je njegovo jednostavno korišćenje. WWW omogućava pretraživanje dokumenata i “kretanje“, kako po različitim dokumentima jednog računara tako i po dokumentima različitih računara, po Internetu, korišćenjem jednostavnih komandi. Svakim pritiskom na taster miša pristupa se novoj stranici koja se nalazi na istom ili drugom serveru. Navigacija kroz veb je jednostavna, jer se za prelazak sa jedne stranice na drugu koriste hipertekst veze. Dovoljno je pritisnuti podvučenu reč ili frazu i korisniku će biti prikazan linkovani dokument. WWW je jedan od najvažnijih servisa Interneta čija upotreba omogućuje: • • • • •

pretraživanje, pronalaženje i čitanje dokumenata na različitim računarima; korišćenje Internet servisa kao što su : Telnet, FTP, Gopher; pretragu baza podataka; prikupljanje podataka i informacija; prezentacija i čuvanje multimedijalnih podataka.

WWW koristi dokumente koji su kreirani na osnovu HTML-a (Hyper Text Markup Language). HTML omogućuje, putem linkova koje nudi, prelaz sa jednog na drugi dokument, koji može biti lociran na istom ili udaljenom računaru. Pozicioniranjem na izabrani link i jednostavnim pritiskom na taster miša prelazi se na drugi sajt, pomoću HTTP-a (Hyper Text Transfer

Protocol). Pretraga je omogućena softverom zvanim veb brauzer. Klijent postavlja zahtev, šalje ga veb serveru koji pomoću CGI-a (Common Gateway Interface), preuzima različite aplikacije. Arhitekturu WWW-a čine tri velika segmenta: •

•

•

veb klijent – veb brauzer, tj. aplikacija instalirana na računaru-klijentu koja se koristi za pristup stranicama na vebu (Internet explorer, Mozzila, Opera, Safari, i dr.) veb server – softver instaliran na serverskom računaru (Apache, Microsoft Internet Information Services, i dr.) skup dostupnih servisa.

Brauzer klijenta je u interakciji sa serverom, koji u stvari predstavlja posrednika u interakciji klijenta sa dostupnim servisima. KLIJENT

SERVER

Lokalni podaci

Prikupljanje informacija

DOSTUPNI SERVISI

Digitalna biblioteka

Veb čitač

Upravljanje transferom podataka

Alati za prenos informacija

Dodaci veb čitača (Add-ins)

Sigurnost transakcija

Slika 1 Opšti koncept arhitekture veba

Statički i dinamički web Web je u početku svoga razvoja postojao isključivo kao statički, tj. nisu postojale tehnologije koje bi uzele u obzir informacije koje su pristigle od korisnika i na osnovu njih generisale odgovor. Mogućnosti statičkog Weba očigledno nisu bile naročito velike: HTML stranice jesu nosilac informacija, ali onih koje se ne menjaju zavisno od konteksta – te informacije su uvek iste. Očigledno je bilo neophodno da se dođe do određenog stepena programibilnosti na vebu, tj. da se razviju tehnologije koje će omogućiti veći stepen interaktivnosti od statičkog veba. Pristup statičkim stranicama na veb teče po sledećem redosledu ( Error: Reference source not found):

1. Autor veb sajta kreira statičku veb stranicu i čuva je u određenom folderu na serveru 2. Klijent – veb brauzer – daje HTTP zahtev za datom stranicom. Zahtev se zadaje kada korisnik računara unese odgovarajući URL u veb brauzer. 3. Veb server prihvata zahtev klijenta i locira traženu html stranicu 4. Tražena stranica se vraća veb čitaču koji je prikazuje korisniku. Izmena statičkih veb sajtova podrazumeva izmenu pojedinačnih stranica veb sajta, što nije ekonomično ukoliko je potrbno često ažurirati veb sajt. U tom slučaju, mnogo je efikasnije primeniti neku od dinamičkih tehnologija za kreiranje veb sajtova. 3. Web server locira.htm datoteku

Web server

4. HTML tok se vraća čitaču

1. Autor piše HTML i pohranjuje ga na disku servera

2. Klijent daje HTTP zahtev za stranicu Korisnik

Slika 2 Statičke veb stranice i način pristupa

Dinamičke Web stranice se zasnivaju na principu da se HTML kod ne stvara sve dok korisnik ne poželi da vidi Web stranicu. To dinamičko stvaranje stranica omogućuje da one budu prilagođene korisnikovim zahtevima, da zavise od prethodnih akcija korisnika, od vremena i mesta kad je pristupio lokaciji, od njegovog identiteta i specifičnih potreba. Pristup dinamičkim veb stranicama teče po sledećem redosledu ( Error: Reference source not found): 1. Veb čitač šalje HTTP zahtev veb serveru. HTTP zahtev sadrži URL sa traženom stranicom. 2. Veb server prihvata klijentski zahtev i aktivira aplikativni server. Aplikativni server je softver koji može i ne mora biti instaliran na istom računaru kao i veb server. 3. Na osnovu informacija primljenih u klijentskom zahtevu, aplikativni server prosleđuje upit ka serveru baze podataka. 4. Na osnovu dobijenog zahteva, na serveru baze podataka izvršava se odgovarajući upit. Rezultat obrade šalje se nazad do aplikativnog servera

5. Aplikativni server formira HTML stranicu u koju ugrađuje informacije dobijene iz baze podataka. HTML stranica prosleđuje se veb serveru. 6. Veb server šalje HTML stranicu do klijentskog računara.

1. Pretraživač šalje HTTP zahtev koji sadrži URL

Korisnik

6. Web server stranu šalje do pretraživača

2. Web serveraktivira aplikacioni server

5. HTML strana sa traženiminformacijama Web server

Aplikacioni server

4. Povratna informacija

3. Aplikacioni server šalje zahteve i instrukcije do database servera

Database server

Slika 3 Dinamičke veb stranice i način pristupa

WAMP server WAMP je paket nezavisno kreiranih programa instaliranih na računaru koji koriste Microsoft Windows operativni sistem. Interakcija ovih programa omogućava korišćenje dinamičkih web strana. "WAMP" je akronim formiran od inicijala operativnog sistema (Windows) i glavnih komponenti paketa: Apache, MySQL i PHP (ili Perl ili Python). Apache je web server, koji omogućava korisnicima da web browser-ima, kao što su Internet Explorer ili Firefox pristupe sadržaju na web serveru. MySQL je sistem za upravljanje bazama podataka. PHP je skript jezika serverske strane koji može da manipuliše informacijama koje su sadržane u bazi i generiše web strane iznova svaki put kada se element sadržaja zahteva iz browser-a. Ostali programi mogu takođe biti uključeni u

pakete, kao što je phpMyAdmin koji omogućava grafički interfejs za pristup MySQL-u, ili neke druge skript jezike, kao štu su Python ili Perl.

Instalacija WAMP servera Pokrenite ikonicu WampServer2.0c.exe i klikom na next i I accept the agreement lako se instalira WAMP server. Klikom na Start/All Programs/WampServer/Start WampServer ćete pokrenuti WAMP server, kao što je prikazano na slici 4

Slika 4 Pokretanje WAMP servera

U donjem desnom uglu ekrana (na Taskbar-u) pojaviće se ikonica koja predstavlja WAMP server. Kada kliknete na tu ikonicu pojaviće se meni sa slike 5.

Slika 5 Opcije koje nudi WAMP server

Levim klikom na nju može se pristupiti localhost-u, PHP MyAdmin-u, SQLite Manager-u. Uz pomoć www directory može se brzo pristupiti www folderu u kome se prave projekti koji predstavljaju sajtove. Postoje i opcije za starovanje Apache i MySQL servera i modula i moguće je dobiti informaciju o verziji koja se koristi. Quick Admin omogućava pokretanje, stopiranje i ponovno startovanje svih servisa. Klikom na localhost (127.0.0.1) dobiće se ekran sa slike 6 koji predtavlja Wamp Homepage. Ovde se mogu videti konfiguracije servera, alati i projekti koji se kreiraju u www folderu. Svi sajtovi se čuvaju u C:/WAMP/WWW. Ovde sačuvani sajtovi će biti vidljivi kao folderi u odeljku Your Projects.

Slika 6 Wamp Homepage

Klikom na phpMyAdmin prikazaće se slika 7. Ovo nam omogućava pristup MySQL bazi podataka.

Slika 7 Prikaz phpMyAdmin-a

Primer organizacije sajta po folderima Ukoliko ste sajt nazvali mojsajt njemu se može pristupiti preko C:WAMP/WWW/mojsajt/. Sajt je folder koji je najčešće organizovan po folderima koji su slike, download, template, index.html i druge stranice. Root folder zavisi od servera, pošto je kod nas to WAMP server onda je root folder c://wamp/www. URL adresa preko koje se može pristupiti sajtu je http://localhost/mojsajt. Index.php je stranica koja je podešena da se otvara pri pokretanju sajta. Na slici 8 je prikazano kako se najčešće organizuje sajt po folderima.

Slika 8 Organizacija foldera

Šta su HTML tag-ovi? Kada web browser prikaže stranicu kao što je ova koju upravo čitate, ona se učitava sa jednostavnog text fajla i traži iz specijalnih kodova ili “tag-ova” koji su označeni sa znakovima. Osnovni format za HTML tag je: string of text Kao na primer, naslov za ovu sekciju koristi header tag:
Sta su HTML tagovi ?
Ovaj tag govori web browser-u da prikaže tekst Sta su HTML tagovi ? u stilu header-a level 3. Važno je napomenuti da krajnji ending tag, sadrži “/” znak kose crte. Ova kosa crta “/” govori web browser-u da stopira tag-ovanje teksta. Ako ste zaboravili kosu crtu, web browser će nastaviti tag (citat, izreku) na ostatku teksta u vašem dokumentu, praveći neželjene rezultate Web browser ne mari da li koristite velika ili mala slova. Suprotno kompjuter programiranju, ako napravite štamparsku grešku u HTML-u neće vam se desiti “bomba” ili “rušenje” sistema; prosto će vaša web strana izgledati pogrešno.

Otvaranje vašeg radnog prostora Da bi završili ovu lekciju, trebalo bi da kreirate drugi web prozor (ovo vam dopušta da sačuvate ovaj prozor sa instrukcijama iz lekcije i jedan prozor kao vaš “radni prostor”, tj “workspace”), i da pored toga otvorite text editor aplikaciju u trećem prozoru. U nekim web browser-ima (recimo Internet Explorer-u), novi browser prozor se otvara i pored već otvorene stranice koju gledate ili vaše home page stranice. Ovo su koraci za podešavanje vašeg radnog prostora “workspace”: •

•

•

Iz File menija vešeg web browser-a, selektujte New Window ili New Web Browser ( Tačan naziv može biti različit u zavisnosti od web browser-a koji koristite). Drugi web window prozor bi trebalo da se pojavi. Posmatrajte prvi prozor kao “textbook”, i drugi kao na vaš “workspace” da kompletirate HTML lekcije. Sledeće što treba da uradite je da iskočite iz web browser-a i odete na vaš desktop i otvorite tekst editor program. Ukoliko koristite word procesor program da kreirate vaš HTML, proverite da li ste sačuvali dokument u običnom text formatu ili ASCII formatu.

Takođe, korisno je i pomoćiće i vama u daljem radu ako prvo kreirate novi directory/folder na vašem kompjuteru koji će biti vaš radni prostor. Možete je zvati work area ili my space ili kako god vi to želite; samo proverite da li ste sačuvali sve fajlove koje kreirate na njemu.

Kreiranje HTML dokumenta HTML dokument sadrži dva različita dela, glavu (head) I telo (body). Head sadrži informacije o dokumentu koje se ne prikazuju na ekranu. Body sadrži sve ostalo što se prikazuje kao deo web stranice. Osnovna struktura svake HTML stranice je: : : : : : : Linija na samom vrhu: nije tehnički zahtevana, ali je kod koji govori browser-u koja je verzija HTML tekuće stranica koja se piše. Potrebno je okruži ceo HTML sadržaj sa ... tagovima. Unesi prvo tvoj ... a potom ... sekcije. Takođe primećujete comment tag-ove okružene sa . Tekst između tag-ova se ne pokazuje na web stranici ali taj tekst služi za informisanje koje će te možda vi koristiti ili neko drugi ko može pogledati HTML kod iza web stranice. Slede koraci koji se koriste za kreiranje prvog HTML fajla.

Korak 1

Ako već nije otvoren, pokrenite vaš text editor program.

Korak 2 Unesite sledeći tekst (ne morate da pritiskate RETURN na kraju svake linije; web browser će obraditi ceo tekst): FON Web

U ovoj lekciji koristićete Internet da prikupljate informacije o FON-u, a potom ćete napisati izveštaj na osnovu vaših rezultata. tag je korišćen da jedinstveno identifikuje svaki dokument i takođe prikaže naslov na title bar-u prozora browser-a. Takođe, primećujete da smo uneli komment tag koji može da prikazuje ime autora i datum kada je dokument kreiran. Vi možete pisati bilo šta između comment tag-ova , ali je to vidljivo jedino kada vi pogledate izvor HTML-a za web stranicu. Korak 3 Sačuvajte dokument kao fajl koga će te nazvati “fon.html” i sačuvajte ga na radnoj površiniu folderu/direktorijumu koji ste već podesili. Takođe, ako koristite word program za kreiranje HTML-a, proverite da li čuvate kao plain text (ili ASCII) format. Napomena : Za Windows 3.1 korisnike, morate sačuvati sve vaše HTML-ove fajlove sa imenima koja na kraju imaju oznaku .HTM, tako da bi u vom slučaju vaš fajl bio fon.htm. Prikazivanje dokumenta u Web Browser-u Korak 1 Vratite se u prozor web browser-a koji ste koristili kao vaš radni prostor “work space”. ( Ako još nemate drugi browser prozor otvoren, izaberite New Window ili New Browser iz File window.) Korak 2 Izaberite Open File... sa File menija. (Za korisnike Ineternet Eksplorer-a, kliknite na Browse dugme da selektujete fajl) Trebalo bi da sada vidite u title bar-u radne površine prozora tekst “FON Web” i u web stranici ispod, jedna rečenica od <body> teksta koji ste napisali, “ U ovoj lekciji...” Modifikovanje HTML Dokumenta Da bi pratili ovu lekciju, morate da kreirate drugi web browser window, tj. prozor i ponovo otvorite text editor prozor koji ste koristili u prvoj lekciji. Ovde su dati koraci koji se koriste kod ponovnog otvaranja radnog prostora: Korak 1. Ako nije otvoren, kreirajte novi web browser prozor tako što izaberete New Window iz File meni-ja. Korak 2. Koristite Open File... komandu sa File meni-ja da pronađete i otvorite HTML fajl koji ste kreirali u prethodnoj lekciji. Korak 3. Ponovo otvorite vaš text editor program. Korak 4. U text editoru, otvorite fajl (“fon.html”) koji ste kreirali u prethodnoj lekciji. Izmene u vašem HTML dokumentu Korak 1. Ispod teksta koji ste napisali u prethodnoj lekciji, pritisnite RETURN nekoliko puta i unesite sledeći tekst Fakultet organizacionih nauka je visokoobrazovna institucija, član je beogradskog univerziteta sa sedištem u ulici Jove Ilića 154. Korak 2. Izaberite Save iz File meni-ja da sačuvate izmene u vašem HTML fajlu. Reload-ovanje dokumenta u Web Browser Vratite se na radnu površinu web browser-a gde se prethodna verzija vašeg fajla prikazala. Primetiće te da se novi tekst koji ste uneli kroz prethodne korake možda još ne prikazuje. Da bi videli izmene i promene, koristite Reload dugme ili meni u vašem web browser-u. Sada bi već trebalo da vidite tekst koji ste maločas uneli. Primetićete da web browser ignoriše sve blank linije i velike razmake koje ste uneli u HTML fajl Zaglavlja (Headings) 1.1 HTML zaglavlja Kreirate zaglavlja u HTML-u tako što tag-ujete određene delove teksta sa heading tag-ovima, tj. tag-ovima za zaglavlje.Format za HTML zaglavlje tag je: <hN>Tekst koji se pojavljuje u zaglavlju</hN> gde je N broj od 1 do 6 i označava veličinu zaglavlja. Evo i nekih primera sa različitim veličinama zaglavlja (slika 1): Slika 9 Veličine zaglavlja Nivoi zaglavlja su rangirani od nivoa 1 (najvažniji) do nivoa 6 (najmanje važan). Smeštanje HTML zaglavlja u vaš dokument Korak 1 Ponovo otvorite vaš radni prostor, tj. workspace.Idite na text editor prozor. Korak 2 Otvorite HTML tekst fajl koji ste kreirali «fon.html». Korak 3 Prvo ćemo koristiti tag da prikažemo na ekranu naslov kao najveće zaglavlje, <H1>. Unesite sledeće iznad postojećeg body teksta tj. posle </head><body> tag-va: <h1>FON Web</h1> Korak 4 Ispod teksta koji ste upravo uneli, kreirajte drugo zaglavlje za buduće delove vaše FON Web stranice. Unesite sledeća zaglavja unutar body-ja vaše web stranice: <h2>O fakultetu</h2> <h2>Delatnost fakulteta</h2> <h2>Smerofi na FON-u</h2> <h3>informacioni sistemi i tehnologije</h3> <h3>menadžmet</h3> <h3>upravljanje kvalitetom</h3> <h3>industrijsko inženjerstvo</h3> <h4>Vesti</h4> Korak 5 Sačuvajte promene u vašem tekst editoru. Korak 6 Vratite se u vaš web browser, Open i Reload HTML fajl. Razdvajanje Paragrafa 1.2 HTML Paragraf Break-ovi Videli smo ranije da web browser ignoriše sve CARRIAGE RETURNS ukucane u vaš text editor. HTML kod za paragraf break je: Vidite da je ovaj tag poseban i da ne zahteva ending tag; Za sada nema potrebe da koristite . Takođe, <h> tag-ovi se mogu napraviti kao break ali je neophodno staviti tag pre header tag-a: <h2>Fakultet organizacionih nauka</h2> Unošenje Paragraf Break-ova Pratite sledeće korake kako bi uneli i videli paragraf break u vašem HTML dokumentu. Korak 1. Ponovo otvorite vaš workspace.Idite na text editor prozor. Korak 2. Otvorite vaš radni dokument, fon.html, u teks editoru. Korak 3. Kao prvo želimo da pomerimo rečenicu ( Fakultet...) tako da je ona iznad O fakultetu zaglavlja. Upotrebite miš da presečete (cut) i paste, tj.zalepite ovaj tekst na zadatu lokaciju. Korak 4. Posle ovog, želimo da dodamo više teksta. Ali bolje nego da ponovo unosimo , sa ove stranice mišem selektujte i kopirajte rečenice: Fakultet organizacionih nauka je visokoobrazovna institucija, član je beogradskog univerziteta sa sedištem u ulici Jove Ilića 154. Korak 5. Sada, vratite se u vaš HTML dokument u text editor, i zalepite ovaj tekst posle već postojećih rečenica iznad <h2> O fakultetu </h2> zaglavlja. Korak 6. Sačuvajte promene u text editoru. Korak 7. Vratite se u vaš web browser. Korak 8. Ako se ne vidi ovo što se upravo uradili, idite na Open Local... komanda sa File meni-ja za otvaranje dokumenata. Korak 9. Selektujte Reload iz File menija. Sada bi trebalo da vidite dve rečenice iz Uputsva. Mi sada želimo da stavimo break između ovih rečenica. Korak 10. Opet, vratimo se u HTML dokument u text editor. Korak 11. Posle druge rečenice ispod unesemo <h2> O fakultetu </h2>, pritisnemo RETURN, i potom unesemo paragraph tag: Korak 12. Ovaj deo bi trebao sada da izgleda ovako: <h2> O fakultetu </h2> Fakultet organizacionih nauka je visokoobrazovna institucija, član je beogradskog univerziteta sa sedištem u ulici Jove Ilića 154. Fakultet organizacionih nauka je visokoobrazovna institucija, član je beogradskog univerziteta sa sedištem u ulici Jove Ilića 154. Korak 13. Sačuvajte promene u text editoru. Korak 14. Vratite se u vaš web browser i Reload-ujte dokument. Dve rečenice uputstva bi sada trebalo da su razdvojeni paragrafi. Drugi tipovi break-ova Da razdvojite glavne delove web stranice, koristi se horizontal rule ili hr tag. On unosi horizontalnu liniju. HTML format za horizontal rule tag je: <hr> Stavite hr tag ispod O fakultetu zaglavlja. Ovo će pomoći da razdvojimo otvorene rečenice lekcije sa drugih delova koji slede. I na kraju konačno, sledi tag koji forsira tekst u novu liniju kao tag, ali bez ubacivanje blank linije. Uporedimo različitosti između upotrebe i u sledeća dva primera u tabeli 1: Table 1 Mogućnosti paragraf tipova HTML kod U ovoj lekciji pokazacemo Vam razlicite mogucnosti paragraf tagova. Takodje... otkricete i razlicite izvanredne mogucosti i kombinacije tagova srodnih njemu. Rezultat u browser-u U ovoj lekciji pokazacemo Vam razlicite mogucnosti paragraf tagova. Takodje... otkricete i razlicite izvanredne mogucosti i kombinacije tagova srodnih njemu. U ovoj lekciji pokazacemo Vam razlicite mogucnosti paragraf tagova. Takodje... otkricete i razlicite izvanredne mogucosti i kombinacije tagova srodnih njemu. U ovoj lekciji pokazacemo Vam razlicite mogucnosti paragraf tagova. Takodje... otkricete i razlicite izvanredne mogucosti i kombinacije tagova srodnih njemu. tag može biti korišćen za različit raspored stila. Rad sa stilovima Baš kao word procesor, HTML može preneti web browser-u da prikaže neke delove teksta u Italic ili Bold stilu ili čak u kombinaciji. HTML Style Tag-ovi HTML nudi nekoliko tag-ova za dodavanje stila vašem tekstu (tabela 2). Table 2 Tag-ovi za dodavanje stila HTML kod Ovo je Bold... Rezultat u browser-u Ovo je Bold... Ovo je Italic... Ovo je Italic... <tt> Ovo je Typewriter...</tt> Ovo je Bold AND Italic Ovo je Bold AND Italic Ovo Je Takodje Ovo Je Takodje <h2>Novi i <tt>Unapredjeni!</tt></h2> Ovo je Typewriter... Novi i Unapredjeni! Primećujete li da možete kombinovati stil tag-ova sve dok u potpunosti ne budete zadovoljni, italic tag-ovi su oba unutar bold tag-ova. Takodje, red nije važan. Osim toga, možete dodati stil i na tekst koji se pojavljuje u zaglavlju tag-ova. Primetite kako su različiti stilovi tag-ova otvoreni i zatvoreni okolo reči njihovog stila i kako heading tag-ovi okružuju ceo tekst za zaglavlje. Unošenje Stilizovanog teksta u HTML dokument Pratite sledeće korake da potvrdite style tag-ove u vašem HTML dokumentu: Korak 1. Ponovo otvrorite vaš workspace. Korak 2. Vratite se na vaš HTML dokument, fon.html , u text editor. Korak 3. Pronađite reč “Fakultet” u prvoj rečenici. Promenićemo je u bold-u da je naznačimo kao važnu reč. Unesite tag-ove da bi se ova reč pojavila kao bold tekst: Fakultet Korak 4. Sada ćemo modifikovati drugi paragraf sa bold i italic tag-ovima da naglasimo reči. Unesite ... i ... tag-ove oko reči beogradskog univerziteta tako da ovaj deo izgleda ovako: Fakultet organizacionih nauka je visokoobrazovna institucija, član je beogradskog univerziteta sa sedištem u ulici Jove Ilića 154. Korak 5. Konačno, koristili smo typewriter tag koji označava posebnu reč. Iznad Delatnost fakulteta zaglavlja, unesite sledeće: Delatnost fakulteta, je <tt>obazovno-naučni rad</tt> uključujući i srodne delatnosti. Sačuvajte u text editoru i Realod-ujte u vaš web browser. Rad sa listama Liste mogu označavati podatke ili informacije u formatu koji je lak i jednostavan za čitanje. HTML kod možemo kucati u nekom tekst editoru (NotePad, TextPad, i dr.), kao i u prethodnim lekcijama. Korak 1 Pokrenite tekst editor. Korak 2 Kod koji želite da unesete kucate u <body> sekciji. Korak 3 Da biste pogledali izgled fajla u browser-u potrebno je da ga prvo sačuvate (File/Save), a zatim izaberete konkretan browser u kome želite da pogledate fajl. 1.3 Neuređene liste Neuređene liste ili <ul> .. </ul> tag-ovi, su one koje se pojavljuju kao podaci sa “bulet” oznakom ili oznakama na početku. Bullet oznaka zavisi od posebne verzije vašeg web browser-a i fonta specifikovanog za prikazivanje normalnog WWW teksta. Evo primera neuređene liste: Izgled u browser-u TIPOVI STUDIJA: • • Dodiplomske Postdiplomske A ovo je HTML format koji pravi ovakav izgled liste: TIPOVI STUDIJA: <ul> <li> Dodiplomske <li> Postdiplomske </ul> <ul> tag označava početak i kraj liste, i <li> označava svaku stavku liste. Uređene liste Uređene liste su one gde browser numeriše svaku sukcesivnu listu podataka tako što počinje sa “1”. Primetite jedinu promenu ul tag-a u ol tag. Evo jednog primer Izgled u browser-u SMEROVI: 1. 2. 3. 4. A ovo je HTML format: SMEROVI: <ol> <li>IT <li> MEN IT MEN UK OM <li> UK <li> OM </ol> Umetnute liste Uredjene i Neuredjene liste mogu imati različite nivoe, tj level-e; svaka će biti ubačena skladno u vaš web browser. Vaša glavna briga bi bila da proverite da li je svaka lista pravilno određena i da je umetnuta lista ispravna. Možete početi da pravite složene sa svim ovim <ol> <li> </ul> <li> tag-ovima koji se nalaze okolo, ali se potrudite da zapamtite osnovnu strukturu: <ul> <li> <li> </ul> <ol> <li> <li> </ol> Ovde je dat primer jedne neuredjene liste sa podnivoima drugih lista: Izgled u browser-u Neuredjena i umetnuta lista • • Ovo je prva stavka Ovo je druga stavka o Ovo je prva stavka druge podstavke Ovo je prva podstavka Ovo je druga podstavka o Ovo je druga stavka druge podstavke o Ovo je treca stavka druge podstavke Ovo je treca stavka   • Primetite kako se bullet oznaka menja sa svakom promenom nivoa liste. A ovako izgleda HTML format koji daje izgled gore navedene tabele: Neuredjena i umetnuta lista <ul> <li>Ovo je prva stavka <li>Ovo je druga stavka <ul> <li> Ovo je prva stavka druge podstavke <ul> <li> Ovo je prva podstavka <li> Ovo je druga podstavka </ul> <li> Ovo je druga stavka druge podstavke <li> Ovo je treca stavka druge podstavke </ul> <li>Ovo je treca stavka </ul> Umetnute liste Ne samo da možete mešati uredjene liste unutar uredjenih, već možete takođe da mešate i unosite različite tipove listi. Recimo, HTML počinje da izgleda veoma ružno, ali gledajte kako liste u potpunosti sadrže druge liste. Npr., ova uredjena lista sadrži umetnutu neuređenu listu: Izgled u browser-u Kombinovana lista 1. Ovo je prva stavka 2. Ovo je druga stavka o Ovo je prva stavka druge podstavke 1. Ovo je prva podstavka 2. Ovo je druga podstavka o Ovo je druga stavka druge podstavke o Ovo je treca stavka druge podstavke 3. Ovo je treca stavka A ovako izgleda HTML dokument, kojim se postiže ovakav efekat: Kombinovana lista <ol> <li>Ovo je prva stavka <li>Ovo je druga stavka <ul> <li> Ovo je prva stavka druge podstavke <ol> <li> Ovo je prva podstavka <li> Ovo je druga podstavka </ol> <li> Ovo je druga stavka druge podstavke <li> Ovo je treca stavka druge podstavke </ul> <li>Ovo je treca stavka </ol> Pogledajte fajl u browser-u. HTML tagovi za ubacivanje slika «Inline» slika je ona slika koja se pojavljuje unutar Web stranice, kao što je recimo ova slika «logo» HTML format za inline image tag izgleda ovako: <img src="filename.gif"> gde je filename.gif ime GIF fajl-a koji je smešten u istom direktorijumu/fajl-u gde je smešten i HTML dokument. “Inline” znači da će web browser prikazati sliku između teksta. Tekst se odmah nastavlja iza «logo» slike. Da bi se slika pojavila u posebnom redu, prosto unesite paragraf tag ispred image tag-a: <img src="filename.gif"> Centriranje teksta i Inline grafike Sa atributom u <img...> tag-u, takođe se može regulisati poravnavanje susednog teksta sa linijom slike. Atribut “align” dodat ispred <img> tag-a može proizvesti sledeće efekte: • • • <img align="top" src="filename.gif"> - poravanava tekst sa gornjom ivicom slike <img align="middle" src="filename.gif"> - poravnava tekst sa sredinom slike <img align="bottom" src="filename.gif"> - poravnava tekst sa donjom ivicom slike Tekst se poravnava samo za jednu liniju... ( skupiti ili razvući WWW browser window i videti šta se dešava). Postavljanje “Inline” Image u HTML Dokument Korak 1 Kreirajte folder pod nazivom HTML Vežbe Korak 2 U ovom folderu sačuvajte sliku logo.jpg (desni klik, Save Picture As) i sliku fon.jpg Korak 3 U istom folderu, kreirajte HTML fajl u unesite sledeći kod: <html> <h1 align="center">FAKULTET</h1> <img src="logo.jpg"> Ovo je zvanični logo predmeta na fakultetu. Fakultet datira od 1969 godine. <img src="fon.jpg"> </html> Sačuvajte fajl i pogledajte kako izgeda u browser-u. 1.4 Atributi Height (Visine) i Width (Širine) Druga opcija koju mogu sadržati <img...> tag-ovi su dva atributa koja daju dimenzije slike u pikselima. Standardno, web browser će utvrditi ove dimenzije na osnovu slike koju učitava; učitavanje slike može biti brže ukoliko se naznače ove veličine u HTML-u. Format koji sadrži ovu opciju izgleda upravo ovako: <img src="filename.gif" width=X height=Y > gde x označava širinu, a y visinu slike u pikselima. Napomena: Poredak atributa unutar <img> tag-a nije bitan. Često se zapitamo da li možemo da promenimo dimenzije slike unošenjem drugih veličina od trenutne u kojoj se slika nalazi? Odgovor na ovo pitanje je pozitivan, ali rezultati mogu biti neželjeni. Uneti veće brojeve (da bi slika bila veća) rezultat bi bio "blocky" picture. Ponekad ovo može biti koristan efekat na slikama sa velikim površinama obojenim punom bojom. Ukoliko se pak unesu manji brojevi ( da bi slika bila manja ) rezultat bi mogao biti u vidu iskrivljene slike. Takođe, puna veličina slike mora biti download-ovana, tako da nema prave uštede u vremenu potrebnom za download slike. Svaki re-sizing slike zahteva extra "work" web browsera da bi rekalkulisao page layout, tj. izgled, plan stranice. Za pripremu slika koje će biti sastavni deo web strane, može se koristiti Photoshop. Takođe se može naznačiti i veličina Inline Image-a u dimenzijama koje su procentni deo trenutne veličine prozora browser-a, tj. prozora, tako da će se slika sama resize-ovati sa promenom, tj. proširivanjem i smanjivanjem veličine browser prozora od strane korisnika. U prethodnom primeru, izmenite kod, tako da izgleda na sledeći način: <html> <h1 align="center">FAKULTET></h1> <img src="logo.jpg" width="20%" height="50%"> Ovo je zvanični logo predmeta na fakultetu. Fakultet datira od 1969 godine.p> <img src="fon.jpg" width="71" height="100"> </html> U browser-u pogledajte rezultate promene. Pokušajte da menjate veličinu prozora browser-a i primetite kako se veličina prve slike menja proporcionalno veličini prozora, dok je veličina druge slike fiksna, tj. ne menja se sa promenom veličine browser-a. Linkovi Link za lokalne fajlove Najprostiji link je onaj koji otvara još jedan HTML fajl u direktorijumu. HTML format koji ovo radi je: <a href="filename.html" rel="nofollow">tekst koji odgovara linku</a> Gde je «a» oznaka za link (anchor) i « href » za " hypertext reference". Filename mora biti drugi HTML fajl. Bilo koji tekst da dolazi posle prvog i pre zavšnog </a> biće "hypertext" koji se pojavljuje kao podvučen i predstvalja hiperlink. Sledeći koraci grade link u HTML dokumentu na lokalni fajl: Korak 1 Otvoriti novi HTML document u text editor-u. Korak 2 U ovaj dokument ubaciti sledeći kod: Korak 3 Ovde ste došli jer ste kliknuli na link! Korak 4 Sačuvati dokument pod nazivom "drugi.html" u nekom folderu. Korak 5 U istom folderu kreirati još jedan HTML fajl "prvi.html". Korak 6 U tom fajlu otkucati sledeći kod: Ovo je dokument sa linkom. Kliknite na link da predjete na drugu stranu. <a href="drugi.html" rel="nofollow">Link na drugu stranu </a> Korak 7 Sačuvajte fajl i pogledajte u browser-u. Proverite da li link radi. 1.5 Link za grafiku U prethodnoj lekciji govori se o načinu prikazivanje "inline" grafike na web stranici. Sa anchor tagom takođe se može formirati link koji prikazuje grafičke fajlove. Kada je anchor link selektovan, on će sam download-ovati image fajl i prikazati sliku (image) u web browser-u. Napomena : Većina browser-a će, kao link, prikazati image fajl u web browser-u. U zavisnosti od web browser-a, i preferences/settings na kompjuteru, može biti ponuđeno ili da sačuva fajl ili da se selektuje aplikacija da prikaže fajl. Bez obzira na izbor, ako se ode tako daleko, link image fajla je uspešan. Najprostiji anchor link je fajl u istom folderu kao i dokument koji se tako zove. Format za kreiranje hypertext link za grafiku je isti kao i gornji za linkovanje na drugi HTML dokument: <a href="filename.gif" rel="nofollow">tekst koji predstavlja link</a> gde je filename.gif ime GIF image file-a. Sada treba pratiti sledeće korake kako bi se dodao link za grafiku HTML dokumentu: Korak 1 Download-ujte sliku fon.jpg (Desni klik, Save Picture As). Korak 2 U istom folderu gde je slika, kreirati HTML fajl koji sadrži sledeći kod: <html> Ovo je dokument sa linkom na sliku. Kliknite na link da biste videli sliku u browser-u. <a href="fon.jpg" rel="nofollow">Link na sliku </a> </html> Korak 3 Sačuvati fajl i pogledati u browser-u. Link ka drugim folderima Anchor tagovi takođe mogu da linkuju HTML dokument ili grafički fajl u drugi folder u odnosu na dokument koji sadrži anchor. Npr. u ovoj lekciji može se sačuvati sva grafika u odvojenom folderu zvanom Pictures. Dok se kreira sve više i više HTML fajlova, čuvanje image fajlova na ovim HTML-ovima će učiniti stvar manje više organizovanijom za korisnika: Korak 1 Kreirati folder Pictures na istoj lokaciji gde je sačuvan fajl iz prethodne vežbe. Korak 2 Pomeriti fon.jpg fajl u novi folder. Korak 3 Izmeniti kod html fajla tako da red za link izgleda ovako: <a href="pictures/fon.jpg" rel="nofollow">link na sliku</a>. Korak 4 Pogledati fajl u browser-u. Napomena : Sa HTML-om se može narediti web browseru da otvori bilo koji dokument/grafiku koji se nalazi u folderu na nižem nivou (npr. u sub-directoriju ili folderu unutar directorija/foldera koji sadrži HTML fajl) korišćenjem "/" karaktera da se naznači promena u folderu Pictures. Ako je sve urađeno kako treba, link u rečenici link na sliku bi trebalo da pozove fajl sačuvan u folderu Pictures. Anchor linkovi ka folderima višeg nivoa Linkovi koji su gore prethodno konstruisani poznati su kao "relative" linkovi, sa značenjem da web browser može konstruisati ceo URL koji se odnosi na trenutnu lokaciju HTML stranice i linkovati informaciju u <a href=... rel="nofollow"> tagovima. Ovo je jako korisno, jer se mogu izgraditi čitave web stranice na jednom kompjuteru, testirati, a potom i pomeriti na drugi kompjuter i svi relative linkovi će ostati netaknuti. U ovoj lekciji će se konstruisati hyperlink ka dokumentu koji je sačuvan u folderu nižeg (lower) nivoa od working HTML stranice. Takođe se može konstruisati link koji je povezan sa (higher) višim nivoom foldera: <a href="../../home.html" rel="nofollow">return to home</a> Svaki primer "../" URL-a na anchor linku govori web browser-u da ide na folder višeg nivoa u odnosu na tekuću stranicu; u ovom slučaju da ide dva nivo iznad i traži fajl koji se zove home.html. Recimo da folder Pictures nije bio u istom folderu kao i prvi.html fajl već jedan nivo iznad. U prethodnoj sekciji je konstruisan link iz prvi.html fajla u fon.jpg fajl u folderu Pictures: <img src="pictures/fon.jpg"> Sada, treba reorganizovati ovu web strukturu tako da folder Pictures bude na višem nivou: <img src="../pictures/fon.jpg"> Prednost ove strukture je u tome da će biti lakše sačuvati veliki broj slika u gornjem folderu koji može da se deli sa drugim web stranicama. Pokušajte samostalno da kreirajte odgovarajuću strukturu foldera i da napravite link! Anchor link ka stranici na Internetu Potpun HTML format za Anchor link ka stranici na Internetu : <a href="URL" rel="nofollow">Text to Activate Link</a> gde je URL skraćeno od Uniform Resource Locator, adresa Internet sajta gde korisnik treba da ode. Niz Text to Activate Link označava šta će se pojaviti kao hypertext u web browser-u (obično ne uvek) podvučeno i u plavoj boji. Kada korisnik klikne na hypertext, web browser će ga linkovati na Internet site određen sa URL. Treba zapamtiti da URL može biti link za drugi World Wide Web (WWW) server, Gopher server, FTP site, ili bilo koji text, grafiku, muziku, video fajl na ovim serverima. Sada, će se dodati hypertext link na sajt koji sadrži podatke o fakultetu.Treba pratiti sledeće korake kako bi se dodali anchor linkovi na HTML dokument: Korak 1 Promeniti fajl iz prethodne vežbe tako da kod izgleda ovako: Ovo je dokument sa linkom na sajt. Kliknite na link da biste otvorili sajt Fon-a. <a href=www.fon.bg.ac.yu rel="nofollow">Link na sajt fakulteta. </a> Korak 2 Sačuvati fajl i pogledati u browser-u. 1.6 Linkovi i adrese 1.6.1Kako rade linkovi u pretraživaču Hiprelinkovi se prave tako što se neki element na strani okruži kotvom, odnosno oznakom a. Atribut href, što je skraćenica za hypretext r eference, definiše odredište linka. Tekst na kome je postavljen link se u pretraživaču označava tako da se može jasno razlikovati od okolnog teksta. Obično je link podvučen i obojen plavom bojom. Nakon što ste posetili adresu na koju taj link upućuje, linkovi obično postaju purpurne boje. Podrazumevano je da se slike na kojima je postavljen link prikazuju sa okvirom u istim bojama, premda mnogi web dizajneri definišu svoje boje. Kada prelazi preko linka, kursor menja oblik u šaku sa kažiprstom upretim u nešto, člme se ukazuje da se taj link može kliknuti. 1.6.2Apsolutne ili relativne putanje URL je skraćenica za universal resource locator. URL ili web adresa je u suštini pokazivač na određeni dokument ili objekat koji se nalazi negde na Internetu, sa datom putanjom koja opisuje kako se dolazi do tog dokumenta. URL putanja može biti apsolutna, relativna u odnosu na dokument, ili relativna u odnose na koren. Apsolutna adresa je adresa na Internetu koja sadrži sve informacije koje su računaru potrebne u vezi lokacije koja se traži. Tu spadaju informacije o tome kako se vraćaju informacije, uključujući protokol, domen, fasciklu i ime datoteke. http://www.mfa.org/exhibitions/upcoming.htm Zašto je protokol tako bitan? Svim vrstama web adresa se može pristupiti preko apsolutnog URL-a, uključujući i web strane, adrese elektronske pošte, FTP sajtove, itd. Protokol ukazuje na to koja vrsta resursa se traži. Relativna putanja je skraćeni oblik adrese kod koje se razlčiti delovi adrese, kao što je protokol, adresa sajta ili fascikla, mogu predvideti na osnovu ostalih informacija koje stoje na raspolaganju. Putanje relativne u odnosu na dokument daju samo informacije koje su potrebne da iz tekućeg dokumenta se ode na željenu stranu. Ako se želi povezati dve strane koje se nalaze u istoj fascikli, potrebno je da zadate samo ime datoteke, na primer (sa strane mojastrana.html) :mojadrugastrana.html. Ako se želi postaviti link na neku stranu koja je dublje u strukturi fascikle, u odnosu na stranu sa koje se link poziva, onda treba da se navede i ime fascikle i ime datoteke (ako je link na strani mojastrana.html) mojafascikla/mojastrana.html. Ako se želi da link ukazuje na drugu stranu koja je u fascikli, koja je iznad fascikle u kojoj se trenutno nalazi, onda preko ../ ukazuje se na to da treba da se popne jedan nivo naviše. Iza ovog sledi ime datoteke (linka sa strane mojastrana.html) : ../index.html. Ako se želi da se u hijrearhiji fascikli kreće naviše ili naniže za više nivoa, onda treba navesti sva imena fascikli ili indikatore ../ više puta, po jednom za svaki nivo. pages/myfolder/mythirdpage.html ../../index.html Putanja relativna u odnosu na koren uspostavlja vezu između datoteke i korena celog sajta. Koren sajta je ono što se smatra generalnim imenom sajta, kao što je na primer www.macromedia.com ili www.mfa.org: /index.html /pages/mypage.html /pages/myfolder/mythirdpage.html Putanje koje se zadaju relativno u odnosu na koren uvek ispred same putanje imaju kosu crtu (/), što možete videti i u primerima koje smo dali. Zašto biste koristili putanje relativne u odnosu na koren sajta? Ove putanje kasnije mogu da uštede vreme, ako je potrebno da promenite organizaciju dokumenata na svom sajtu. Ako imate vesti u nekom preduzeću, koje ste postavili onlajn i ako mesečne članke prebacujete u fasciklu Archive, kada započne novi mesec onda putanje koje se zadaju relativno u odnosu na koren sajta mogu da uštede vreme koje biste proveli u prepravljanju linkova koji sada treba da budu u skladu sa novom strukturom. 1.6.3Atribut target Kada se klikne na link, podrazumeva se da se novi dokument otvara u istom prozoru pretraživača u kome je prethodno bio otvoren tekući dokument. Sa druge strane, HTML omogućava da zadate gde link treba da se otvori u novom prozoru pretraživača, ili ako se radi o frejmovima, onda u određenom frejmu. Ovo se zadaje putem opcionalnog atributa oznake anchor <a>, a to je target. Ako želite da se novi dokument otvori u posebnom prozoru pretraživača, onda atribut target treba da podesite na _blank. Heksadecimalne oznake i boje U vašem web browseru na raspolaganju vam je pregršt boja kojima možete da obojite tekst i pozadine. Svaka boja se identifikuje kroz tri njene Red-Green-Blue (RGB) vrednosti, koje su zadate brojem u rasponu od 0 do 255, pri čemu svaka predstavlja intenzitet crvene, zelene i plave. Maksimalne vrednosti (R=255, G=255, B=255) daće belu a minimalne vrednosti (R=0, G=0, B=0) prikazaće crnu boju. Sve ostale boje su zadate uređenom trojkom (tripletom) RGB vrednosti. “Tricky” deo je da se vrednosti za boje zadaju u heksadecimalnom umesto u dekadnom sistemu (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F), a sve zbog toga što je kompjuterima lakše da njima barataju. Pa recimo u primeru "6699FF", "66" označava vrednost crvene, "99" vrednost zelene, a "FF" vrednost plave. Evo nekoliko primera (tabela 3): Table 3 Boje u heksadecimalnom sistemu Boja Heksadecimalno Boja Heksadecimalno FFCCCC 3300FF 33FF66 AA0000 663300 9900FF 000077 FFFF00 EEEEEE 888888 444444 000000 U svakom slučaju se ne sekirajte zbog numeričkih konverzija iz dekadnog u heksadecimalni sistem, jer postoji mnoštvo alatki koje vam omogućavaju da samo klikom na željenu boju, dobijete ispisanu njenu heksadecimalnu reprezentaciju. A i sami web browseri su dovoljno pametni da prepoznaju skraćenice za sledećih 16 boja. Boja Ime boje Boja Ime boje aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow Jednobojne pozadine (Solid Color Backgrounds) Za FON Web, prva stvar koja je rađena je dodavanje color background-a na index.html fajl. HTML format za dodavanje solid color background-a modifikuje <body> tag-a na sledeći način: <body bgcolor=#XXXXXX> gde je XXXXXX heksadecimalna reprezentacija (označena sa # znakom ispred) željene boje. Korak 1 Otvoriti fon.html fajl u text editor-u. Korak 2 Pronaći <body> tag i promeniti ga u: <body bgcolor=#000000> Korak 3 Save i Load HTML file u web browser-u Ako je sve urađeno kako treba, browser bi trebalo da promeni pozadinu u jednobojnu crnu boju. Ali, možda sada ne možete da vidite tekst! Zašto? Zbog toga što je default color za text je takođe crna, tako da sada imamo crni tekst na crnoj pozadini! Na sreću, dodatnim komandama, body tagu možemo dodati boju za tekst i hypertext: <BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX> gde XXXXXX vrednosti označavaju sledeće: • • • • BGCOLOR = boju background-a,tj. pozadine (default je grey (siva)) TEXT = boju stvarnog body teksta (default je black, tj crna) LINK = boju hypertext link-a (default je blue, tj plava) VLINK = boju hypertext-a koja označava da je već pregledan (default je purple) Izmenom vrednosti ovih vrednosti u body tagu, možemo dobiti: <BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666> NAPOMENA: redosled oznaka u <BODY> tagu nije relevantan Sada treba modifikovati <body> tag-ove u svim HTML fajlovima (što možete učiniti lako koristeći copy i paste malopređašnjeg primera, na novi <body> tag). Teksturne pozadine Boje osvežavaju izgled web stranica, ali dodavanjem tekstura, koristeći male (GIF ili JPEG) sličice, možete napraviti i lepši efekat. Njih će web browser kopiranjem razvući na celu pozadinu. Obratite pažnju na: • • Čitljivost: mnoge pozadinske teksture će više odmoći nego pomoći čitaocu. Pokušajte da postavite teksture koje su svetlije (uz taman tekst) ili tamne (uz svetao tekst), olakšavajući čitanje na taj način jačim kontrastom. • Veličinu: Ne postavljajte slike velikih veličina, jer su konekcije kod nas još uvek spore, pa će drugima biti potrebno dosta vremena da stranice uopšte i otvore. HTML format za dodavanje pozadine kroz sličicu je: <body background="paper.gif"> gde paper.gif predstavlja naziv samog fajla slike. Potom u tag dodajte i <body background="../pictures/paper.gif" text=#CC0000> dobićete crveni tekst na sličici koja će biti iskopirana na celom backgroundu web stranice (slika 3). Slika 10 Izgled tekstualne pozadine Primer: Korak 1 Iz materijala sa sajta skinite fajl paper.gif i iskopirajte je u folder boja koji ste predhodno napravili. Korak 2 U tekst editoru kreirajte primer web stranice u folderu boja, unošenjem koda, željenog teksta i odgovarajućeg linka do slike <HTML> <HEAD> <TITLE>Primer
UNESITE ZELJENI TEKST

KOJI CE BITI PRIKAZAN

NA MULTIPLIKOVANOJ POZADINSKOJ SLICI

Korak 3

Fajl snimite sa html ekstenzijom.

Korak 4

Sada kreiranu web stranicu otvorite u browseru i pogledajte da li ste zadovoljni

rezultatom.

META tagovi Sintaksa HTML-a dozvoljava korišćenje meta informacija unutar web stranice i to u onom delu web stranice koji browser ne prikazuje. Postoje različiti tipovi meta tagova, ali u okviru ovih lekcija razmotrićemo samo neke od najkorisnijih. Meta tagovi se u HTML dokumentu smeštaju u zaglavlje dokumenta, tj. između tagova i .

1.7 Meta tag za automatski prelazak na drugu web stranicu Prvi tip meta tagova omogućava kreiranje HTML web stranice koja će ukoliko ne bude učitana posle tačno određenog vremenskog perioda automatski preći na neku drugu web stranicu. Ovo se koristi iz više razloga: U slučaju pomeranja stranice. Ukoliko dođe do pomeranja stranice zbog redizajna sajta ili promene servera, kao i u slučaju ukidanja stranice, potrebno je preusmeriti poziv stranice na novi URL. Evo nekoliko primera:

Swiss Web Knife M2C Math Software Evaluations U slučaju kreiranja serije web stranica koje treba sa se menjaju u određenim vremenskim intervalima (kao Slide Show). U slučaju web sajtova koji imaju uvodnu stranicu (intro) Sintaksa ovog tipa meta tagova izgleda na sledeći način: My page title <META HTTP-EQUIV="REFRESH" CONTENT="X; URL=newpage_or_URL.html"> gde x predstavlja vreme koliko će ova stranica biti prikazana (izraženo u sekundama), a URL je adresa na koju će se izvršiti preusmeravanje posle isteka tog vremena. Primer :

Korak 1

Pokrenite tekst editor i kreirajte novi HTML fajl. Napravite sledeće zaglavlje sa odgovarajućim meta tagovima.

Korak 2

Prepravite fajl tako da ima sledeći kod:

<meta http-equiv="REFRESH" content="5; URL=http://www.elab.fon.bg.ac.yu "/> Untitled Document Čekaj!!!

Korak 3

Sačuvajte stranicu i pogledajte u browser-u kako izgleda.

Meta tagovi za opis Meta tagovi vam omogućavaju da postavite dodatne informacije na vašu web stranicu koje će omogućiti da se ona lakše pronađe na Internetu. Krajnje pojednostavljeno, web pretraživači (Google, Altavista, Yahoo, itd.) rade po sledećem principu: svaki od pretraživača sadrži bazu podataka u kojoj su podaci o web stranicama. Na osnovu kriterijuma pretrage zadatog od strane korisnika, pretražuje se baza podataka i prikazju rezultati. Rezultat pretrage su web stranice koje sadrže traženi kriterijum. Na većini ovih web stranica traženi kriterijum se nalazi na početku

sadržaja stranice, tako da osim ako je sam početak stranice veoma deskriptivan, korisnik neće dobiti pravu sliku onoga što je na stranci. Sintaksa meta taga za dodavanje opisa stranici izgleda ovako: <META name="description" content="Ovaj tekst predstavlja odličan opis web stranice. "> Maksimalna dužina meta tagova iznosi 1024 karaktera, počev od prvog u meta tagu, što znači da uneti opisi treba da budu kratki i precizni. Još jedan koristan meta tag koji će olakšati pronalaženje web stranice preko pretraživača je omogućava dodavanje ključnih reči (keywords) koje opisuju stranicu. Sintaksa ovog taga izgleda ovako: <META name="keywords" content="HTML, tutorial, learn, make, create, design, web page, home page, education, form, tables, frames, javascript">

Basic Table Tag-ovi – Osnovni HTML table tag-ovi HTML za basic table strukturu je prikazan ispod u tabeli 4 Table 4 HTML kod za prikaz tabele

HTML kod

Izgled u browser-u

Red 1 kolona 1 Red 1 kolona 2 Red 1 kolona 3



border=1 atribut u tag-u daje instrukcije browser-u da iscrta liniju oko tabele debljine od 1 pixela. Svaki red je definisan sa Table Row tag-ovima ... i svaka ćelija u svakom redu je definisana sa Table Data tag-ovima. Svaki tag može sadržati bilo koji tip HTML tag-a -- headers, styled text, hypertext links, inline graphics itd. U ovom tag-u može se koristiti nekoliko atributa kojima se podešava,( Alignment )tj. centrira ili reguliše svaki podatak koji se unosi u ćelije (tabela 5):

Table 5 Atributi za regulisanje svakog podatka iz ćelije

Horizontal Alignment (Horizontalno Vertical Alignment (Vertikalno centriranje) centriranje) tag-ovima (tabela

Table 6 Korišćenje colspan i rowspan atributa

HTML kod
... ... centrira sve centrira sve elemente na levu stranu ćelije elemente na vrh ćelije (ovo je default setting) centrira sve centrira sve elemente na dno ćelije elemente na desnu stranu ćelije centrira sve elemente na središnjem delu ćelije centrira sve (ovo je po default setting) elemente u centralnom delu ćelije •

•

•

•

•

•

Ovi atributi se mogu koristiti i kombinovano: Ovaj HTMLće prikazati ćeliju sa podacima smeštenim u levom donjem uglu ćelije. Da bi ste odradili ovu vezbu sledite sledeće korake: HTML kod možemo kucati u nekom tekst editoru (NotePad, TextPad, i dr.), kao i u prethodnim lekcijama.

Korak 1

Pokrenite tekst editor.

Korak 2

Naprevite osnovnu konstrukciju za html stranicu kao do sada.

Korak 3

Kod koji želite da unesete kucate u sekciji koda kao u Tabeli 1.

Korak 4

Da biste pogledali izgled fajla u browser-u potrebno je da ga prvo sačuvate (File/Save), a zatim izaberete konkretan browser u kome želite da pogledate fajl.

Redovi i Kolone Tabela koja je ispod prikazana je prosta i u obliku kocke – tri reda sa tri kolone. Šta se sve može dobiti ukoliko se koriste colspan i rowspan atributi u ...

Rezultat u browser-u ** Obratiti pažnju na atribut druge ćelije u prvom redu – (obuhvata) spans 2 kolone. Tekst je podešen tako da se nalazi u centru ćelije.

Red 1 kolona 1 Red 1 kolona 2-3 Red 2 kolona 1 Red 2 kolona 2 Red 2 kolona 3 Red 3 kolona 1 Red 3 kolona 3

Red 1 kolona 1 Red 1 kolona 2-3



Sada je prikazana ćelija koja obuhvata 2 reda.

Red 1 kolona 1 Red 1 kolona 2-3


Red 3 kolona 1 Red 3 kolona 3

I ovaj primer možete da odradite na isti način kao i prethodni ili samo da modifikujete određene tagove iz prethodnog primera.

1.8 A Data Table – Tabela (sa podacima) Sada ćemo odraditi primer za DataTable.

Korak 1

Pokrenite tekst editor.

Korak 2

Napravite osnovnu konstrukciju stranice za HTML.

Korak 3

Između body tagova unesite sledeci kod.

Odsek Prosecna ocena Broj studenata ^*

Informacioni sistemi i tehnologije 7.68 302

Menadžment 7.9 284

Upravljanje kvalitetom 8.62 54

Operacioni menadžment 8.32 >18 & <47

Tabela koju ćete dobiti na stranici u Internet Exploreru posle unosa gore navedenog koda treba da ima sledeci izgled (tabela 7): Table 7 Izgled tabele na stranici u Internet Explorer-u

Odsek Prosecna ocena Broj studenata Informacioni sistemi i tehnologije 7.68 302 Menadžment 7.9 284 Upravljanje kvalitetom 8.62 54 Operacioni menadžment 8.32 >18 & <47

*

Pogledajte HTML kod za prvi red. Table Header tag-ovi ... funkcionišu isto kao i ... tag-ovi izuzev toga da se svaki tekst automatski podešava na bold i da su svi podaci smešteni u centru ćelije. Takođe, u ćeliji za “Operacioni menadžment” mora se samo koristiti HTML za specijalne karaktere da bi se prikazali simboli kao što su "<", ">", i "&". Sada treba još po nešto dodati u tabelu.

Neki browser-i dopustaju korisniku da specificira i druga podešavanja za linije koje grade tabelu. Ovo su atributi za table tag: gde X označava širinu (u pixelima) od spoljašnje ivice tabele. Atribut cellpadding specificira koliko praznog prostora "space" postoji između podataka u ćeliji i zidova ćelije – veličina koja označava visinu Y učiniće ćeliju većom ("povećavanje" ćelije). Atribut cellspacing specifikuje (u pixelima) širinu između unutrašnjih linija koje dele ćeliju. Izmeniti
tag tako da sada piše:
tag postavlja niz teksta (centriran širinom tabele) kao naslov/poglavlje u tabeli. Izmeniti linije tabele, tako da sada piše:

Može se i dodati HTML unutar tag-ovima u narandžastu boju. Izmeniti HTML za prvi red tako da izgleda ovako:

Pomeriti tabelu tako da se sada nalazi na sredini stranice. Ako web browser podržava... tag, onda samo okružiti tabelu sa ovim tag-ovima. Konačno, treba dodati kolonu sa leve strane – prikazati u grupama sve smerove. Sada treba dodati praznu ćeliju dodavanjem na prvi red HTML tabele (jednu sa column headings, tj. zaglavljem kolone).

Zatim otići na drugi red HTML tabele (sadrže podatke za odseke), i dodati u prvu ćeliju koja obuhvata 4 reda (prve četiri linije sa podacima o nazivu odseka):

Napomena: Veličine tabele pokušavaju da se same prilagode u skladu sa širinom sadržaja koji se unosi u tabelu. Mogu se dodati neki
tag-ovi , tako da ova prva kolona ne bude preširoka. Tabela koju ćete dobiti na stranici u Internet Exploreru posle unosa gore navedenog koda treba da ima sledeći izgled kao tabela 8: Table 8 Izgled tabele

STATISTIKA Odsek

Prosecna ocena

Broj studenata

Popularni smerovi

Informacioni sistemi i tehnologije

7.68

302

Menadžment

7.9

284

Manje popularni smerovi

Upravljanje kvalitetom

8.62

54

Operacioni menadžment

8.32

>18 & <47

*

Oblikovanje formi Text Input Elementi (type="text") ... se koriste za kreiranje jednolinijskih polja u koja korisnici unose tekst. Default širina je 20 karaktera, a mogu se kreirati i polja sa drugim veličinama unošenjem vrednosti u size option. Može se ograničiti i broj unosa karaktera podešavanjem vrednosti u MAXLENGTH option. Text input polja će biti prazna kada se stranica učita, osim ako korisnik ne zada početni tekst kroz VALUE opciju (tabela 9). Table 9 Tabela za unos teksta

Polje za unos teksta "text1" je 30 karaktera široko.

þÿ

Polje za unos teksta "text2" je 30 karaktera široko, ali prihvata samo 20 karaktera. þÿ

Polje za unos teksta "text3" je 40 karaktera široko, što je podrazumevana (default) vrednost. þÿ

Password Input Elementi (type="password") ... su identični text input elementima, osim kada korisnik unosi podatke u njih, videće "bullet" karaktere, tj. Zvezdice, a ne slova koja unosi kao šifru (password). Password tekst je šifrovan kroz prenos i potom na kraju dešifrovan kada je podatak polja učitan na server. Videti razliku između unošenja podataka u polja u tabeli 7 ispod ovog teksta i u prethodnoj tabeli 10. Table 10 Tabela za unos šifre

Polje za lozinku "pass1" je 30 karaktera široko.

Polje za lozinku "pass2" je 30 karaktera široko, ali prihvata samo 20 karaktera.

Polje za lozinku "pass3" je široko 40 karaktera, što je default vrednost.

1.9 Text Area Input Elementi (type="textarea") ... su tekst polja koja sadrže više od jedne linije za unos podataka i mogu se scroll-ovati tako da korisnik moze da unese više teksta. Tag opcije definišu veličinu polja brojem karaktera u redu i koloni. Dodavanjem opcije WRAP=VIRTUAL, tekst koji je prethodno unet će se automatski

smestiti sa desne strane polja. Takođe se može zadati i default tekst koji će se prikazati u polju (tabela 11). Table 11 Tabela za unos polja za upis teksta

Oblast za unos teksta "comments" je 45 karaktera široko i 6 linija visoko. The first time I ever saw a web page, I thought.... (continue) The f irst time I ever s aw a w eb page, I tho

Radio buttons (dugmici) (type="radio") ... su kontrole koje su povezane tako da samo jedno radio dugme, tj. button može da se selektuje u jednom trenutku; ako se selektuje jedno radio dugme, sva ostala automatski postaju desektovana. Set radio buttons-a je je definisan pod istim zajedničkim imenom. Vrednost koja se šalje u web formu je vrednost radio button-a koji je prethodno selektovan. Dodavanjem opcije CHECKED jednom od button-a u setu ponuđenih, posebno će se istaći taj button tako da izgleda osvetljeno, kada se stranica učitava (tabela 12). Table 12 Izgled tabele sa radio dugmetom

4 radio buttons se default vrednostima. hotdogs are my favorite food
i like hamburgers
steak is tasty
beans are for veggie-lovers

hotdogs are my favorite food i like hamburgers steak is tasty

beans are for veggie-lovers 3 radio buttons bez predefinisanih vrednosti. ketsup
mustard
mayonnaise

ketsup mustard mayonnaise

NAPOMENA: Videti kako dva seta radio buttons-a, jedan nazvan "food" i drugi "spread" funkcionišu nazavisno jedan od drugog.

1.10Check Boxes (type="checkbox") ...su slični prethodnim radio buttonsima, ali nisu zavisni od drugih buttons-a, tako da može biti selektovano više njih u isto vreme. Svaki checkbox ima jedinstveno ime ili naziv. Ukoliko polje nije štiklirano, običnim klikom na njega pojavice se X ili check mark znak na tom mestu. Ukoliko je box označen, još jedan klik će ukloniti check mark iz polja. Vrednost poslata u web formi je vrednost checkbox-a koji je selektovan; u suprotnom ta vrednost ne postoji. Dodavanjem opcije CHECKED u checkbox će posebno istaći taj checkbox dok se strana učitava (tabela 13).

Table 13 Izgled tabele sa tipom "checkbox"

4 check boxes sa predefinisanim vrednostima. hotdogs are my favorite food
i like hamburgers
steak is tasty
beans are for veggie-lovers

hotdogs are my favorite food i like hamburgers steak is tasty

beans are for veggie-lovers 3 check boxes bez predefinisanih vrednosti. ketsup
mustard
mayonnaise

ketsup mustard mayonnaise

Menu Select (type="select") ... daje padajući menije koji omogućavaju korisniku da izabere jednu od ponuđenih stavki u listi. tag definiše tekst koji se pojavljuje u meniju. Vrednost poslednje selektovane opcije je vraćena kada je prenesen podatak iz polja. Dodavanjem SELECTED opcije pokazuje koji element se prikazuje kada se stranica učitava; u suprotnom, prva stavka je selektovana kao default (tabela 14).

Table 14 Tabela sa opcijama

Meni sa 4 opcije, gde je 3 stavljena kao predefinisana. þÿ

Submit and Reset (type="submit" and type="reset") ... kreira buttons (dugmiće) na formi. Submit button govori web browser-u da sakupi sve selekcije, vrednosti, i uneti tekst iz polja i smesti ga na mesto definisano u ACTION delu form tag-a. Reset button vraća formu na default stanje, onako kako je izgledao i prvi put kada je korisnik posetio web stranicu. VALUE opcija definise tekst koji se nalazi na buttonsima (tabela 15). Table 15 Tabela sa submit i reset dugmićima

Submit button Send this f orm data now !

Reset button Clear the w eb form

NAPOMENA: Za ovu lekciju, kreiran je prosti JavaScript alert message koji se pojavljuje kada se koristi Submit button. Ukoliko je unet neki tekst, ili promenjen neki button meni selekcija, Reset button iznad, će sve vratiti na početno stanje. Sada ćemo kreirati web page formu koja će sadržati sve gore navedene elemente. Treba kreirati novu web stranicu u kojoj će se forma prikazati u main display polju, a potom izmeniti levu stranu frejma koja sadrzi meni izbora da bi dodali link za našu novu stranicu. Korak 1 Otvorite proj_menu.html fajl u vašem text editoru.

Korak 2

Posle HTML koda koji sadrži link informaciju za "Reference" frames web page,

dodajte:
REPORT...
forma za slanje izvestaja

Korak 3 Korak 4

Save , tj. sačuvajte ovaj HTML file.

Zatim ćemo kreirati novu web stranicu koja će sadržati formu. Kreirajte novi fajl u text editor-u i snimite ga kao fajl proj_report.html u istom direktorijumu/folderu kao i druga HTML dokumenta.

Da bi bolje razumeli ovaj dokument, prezentovaćemo jednu po jednu Korak 5 njegovu sekciju. Prvi deo fajla sadrži "normal" deo našeg HTML fajla. Ovo dodajte u vaš novi fajl:

IZVESTAJ

Sada unesite kod, kojim ćete označiti početak forme. Do sledeće lekcije, Korak 6 nećemo pisati ACTION=... deo.

Korak 7 Report forma će se prikazati kroz HTML tabele, koje su korisne za web forme jer dozvoljavaju korisniku da podešava tekst kao i elemente forme. Kreirajte tabelu koja sadrži 4 osnovna dela vaše forme: Informacije o studentu Izveštaj o odsecima Izvori koji su korišćeni za dobijanje informacija Pošalji i Poništi sve • • • •

Svaka od ovih sekcija će biti označena velikim poljem tabele koja definiše tu sekciju vaše forme. Dodajte sledeće da biste formirali tabelu i pr vu sekciju "Informacije o studentu":
STATISTIKA tag-a; proveriti da li se nalazi unutar ...
tag-ova. I zabave radi, obojiti tekst
...


Popularni
smerovi

Manje
popularni
smerovi

Napomena: Kreirali ste ćeliju sa 2 kolene za tekst " Informacije o studentu " zajedno sa tri reda tabele koji sadrže tekst input polja. Stavljene su oznake za polja u prvoj koloni svakog reda, poravnate udesno. Takođe su smeštene kratke instrukcije u malom , plavom tekstu pored svakog elementa. Primetite da svaki element forme ima jedinstveno ime. Treće polje forme je u stavri password type da bi sakrilo ime koda koji će korisnik uneti.

Korak 8 Sada ćemo uraditi drugu sekciju gde se koristi ova web forma koja prikazuje Izveštaj o odsecima - koristićete text input, menu selections, radio buttons, i checkboxes:

Napomena: Uporediti format radio button-sa u odnosu na check boxes; svaki radio button set ima isto ime dok svi check boxes imaju razlicita imena.

Korak 9 Treća sekcija forme web stranice se koristi za prikazivanje izvora koji su korišćeni u tri unosna polja. Posto su uneti podaci u stvari web site adrese, može se podesiti default VALUE za "http://" u text input tagovima:

Korak 10 Poslednja sekcija ove tabele/forme sadrži button koji će prikupiti sadržaj izveštaja u formi i drugi button koji se može koristiti da resetuje formu na početno, prazno stanje. To je takođe i kraj tabele, forme i ostatka HTML dokumenta.

Informacije o studentu

Ime i prezime
unesite Vase ime i prezime

e-mail
unesite Vas e-mail

lozinka
unesite lozinku

Naziv odseka
unesite naziv odseka ciji podaci Vas interesuju

Najpopularniji odsek je
(opsirnije o odsecima na sajtu fakulteta)

status redovan vanredan
/
unesite broj dosijea

prednosti odabranog odseka po Vama su dobar sadrzaj kurseva na odseku
nastavni kadar
duzina studiranja
lakse zaposlenje nakon zavrsetka
nista posebno
(broj cekiranih opcija je proizvoljan)

dodatne informacije
napisite sta smatrate da je potrebno, a vezano je za predjasnji izbor

Izvori

reference

n >nav aved editite e tr trii we web b sa sajtjta a na ko kojijima ma ce cete te vr vrsi sititi pre pretr trag agu u za informacijama
Na kraju...

Korak 11 Uradite Save dokumenta proj.html i potom ga učitajte u w eb browser. Leva strana ove web stranice sa frejmovima bi sada trebalo da sadrži link koji ste dodali u drugom koraku, i koji će učitati formu web stranice koju ste kreirali u

prethodnim koracima. Forma još uvek neće raditi ništa, ali buttons, meniji i polja bi trebalo da budu osposobljeni za editovanje.

CSS 1.11Šta je to CSS? CSS je tehnologija koja omogućuje razdvajanje strukture stranice od njenog izgleda, što predstavlja osnovni princip ove tehnologije. To konkretno znači da informacije koje se žele prezentirati na stranici treba da budu sadržane u HTML fajlu, a opis izgleda stranice i načina predstavljanja informacije treba da se nalazi u drugom fajlu – css fajlu. Odrednica CSS (Cascading Style Sheets) u prevodu znači “Kaskadne Liste Stilova”. CSS je preporuka konzorcijuma W3C (World Wide Web Consortium). W3C konzorcijum čine univerziteti, kompanije kao što su Microsoft, Netscape i Macromedia, i eksperti iz mnogih oblasti koje su vezane za web. Osnovan je od strane Tim Berners Lee-a i zadatak mu je da unapređuje i promoviše web. Jedna od njegovih uloga je da publikuje preporuke (eng, recommendations) . Na te preporuke treba gledati kao na standarde. Preporuke W3C-a pokrivaju mnoge aspekte web-a kao na primer HTML, CSS, skript jezike, XML i jos mnogo toga što je vezano za web. Kaskadne liste stilova su formalno opisane u dve specifikacije koje je izdao W3C. To su CSS1 i CSS2 specifikacije. CSS2 Specifikacija je sada ažurirana u specifikaciju CSS2.1. gde broj 1 označava broj revizije. Ovom revizijom izbačene su pojedine komponente iz CSS2 specifikacije za koje se vremenom utvrdilo da nema izgleda da u skorije vreme budu implementirane u Web čitačima. Na primer, jedno svojstvo koje je izbačeno je text-shadow jer dugo vremena nije dobilo podršku ni od jednog Web čitača. Naravno, tom revizijom nije stavljena tačka na razvoj i unapređenje CSS-a, pa se možda u budućnosti ovo svojstvo ponovo pojavi i uđe na velika vrata, a do tada ne treba očajavati zbog njega. CSS1 specifikacija je publikovana u decembru 1996. godine i opisuje jednostavan model za formatiranje, najčešće korišćen za prikaz na ekranu. CSS1 specifikacija sadrži oko 50 svojstava ( na primer color ili font-size ). CSS2 specifikacija je finalizirana u maju 1998. godine i zasnovana je na CSS1 specifikaciji. Ona obuhvata sva svojstva CSS1 specifikacije i dodaje oko 70 svojih svojstava, kao što su svojstva za opisivanje zvučnih prezentacija i slično. Linkovi koji vode ka ove dve specifikacije dati su u nastavku: Specifikacija CSS1 http://www.w3.org/TR/REC-CSS1 Specifikacija CSS2 http://www.w3.org/TR/REC-CSS2

definišete izgled vaše stranice na jednom mestu kako bi izbegli ponavljanje koda na stranici. jednostavno menjate izgled stranice čak i nakon što ste je kreirali. Pošto su stilovi definisani na jednom mestu, možete da promenite izlged vaše stranice odjednom.

definišete veličinu fonta sa istom preciznošću koju vam pruža word procesor, bez ograničenja na sedam veličina fonta koje su definisane u HTML-u. pozicionirate sadržaj stranice sa preciznošću na nivou piksela. redefinišete izgled postojećih tagova u HTML-u . Na primer, ako želite da se tag koji inicajlno prikazuje tekst podebljanim slovima, prikaže u crvenoj boji sa veličinom fonta od 16 piksela, to sa CSS-om vrlo lako možete da uradite. podesite stil za linkove na način koji vama odgovara – na primer želite da se linkovi prikazuju nadvučeni.

Načini primene stilova Stilovi se mogu primeniti na neku stranicu na tri načina: Povezivanjem HTML stranice i eksternog fajla sa ekstenzijom . css (u kome su definisana pravila) koji se čuva na nekom serveru (na istom serveru na kome se nalazi i HTML fajl ili na nekom drugom) Unutar stranice u head delu HTML koda u okviru

Ovde treba pomenuti još jedan način linkovanja fajla sa stilovima koji se može koristiti u kombinaciji sa ovim načinom ili zasebno. To se ostvaruje korišćenjem komande @import kojom se css fajl “uvozi” u dokument a sintaksa je sledeća:

Po HTML 4.0 specifikaciji ukjučen je i atribut media u okviru

Red 1 kolona 1	Red 1 kolona 2	Red 1 kolona 3
Red 2 kolona 1	Red 2 kolona 2	Red 2 kolona 3
Red 3 kolona 1	Red 3 kolona 2	Red 3 kolona 3

Red 1 kolona 1	Red 1 kolona 2-3
Red 2 kolona 1	Red 2 kolona 2	Red 2 kolona 3
Red 3 kolona 1	Red 3 kolona 2	Red 3 kolona 3

Odsek	Prosecna ocena	Broj studenata ^*
Informacioni sistemi i tehnologije	7.68	302
Menadžment	7.9	284
Upravljanje kvalitetom	8.62	54
Operacioni menadžment	8.32	>18 & <47

HTML Skripta

Recommend Documents

Sta su HTML tagovi ?

UNESITE ZELJENI TEKST

KOJI CE BITI PRIKAZAN

NA MULTIPLIKOVANOJ POZADINSKOJ SLICI

IZVESTAJ