Html Skripta 2

  • Uploaded by: Deniz Hoti
  • 0
  • 0
  • March 2021
  • PDF
Download

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA

Overview

Download & View Html Skripta 2 as PDF for free.

More details

  • Words: 23,266
  • Pages: 86
Loading documents preview...
SKRIPTA ZA VEŽBE IZ PREDMETA ELEKTRONSKO POSLOVANJE

HTML I CSS

Beograd 2009.

SADRŽAJ I DEO...........................................................................................................................................5 Uvod ...........................................................................................................................................5 Internet servisi.............................................................................................................................5 World Wide Web.....................................................................................................................6 1.1.1 Arhitektura WWW-a.....................................................................................................6 1.1.2 Statički i dinamički web...............................................................................................7 Priprema okruženja za izradu HTML sajtova...............................................................................9 Primer organizacije sajta po folderima..................................................................................12 II DEO........................................................................................................................................13 Uvod u HTML.............................................................................................................................13 1.2 Kreiranje HTML dokumenta.............................................................................................13 Zaglavlja u HTML-u (Headings).................................................................................................15 Razdvajanje Paragrafa..............................................................................................................16 Drugi tipovi break-ova...........................................................................................................16 Rad sa stilovima........................................................................................................................17 Rad sa listama...........................................................................................................................18 1.3 Neuređene liste................................................................................................................18 Uređene liste.........................................................................................................................19 Umetnute liste.......................................................................................................................19 HTML tagovi za ubacivanje slika................................................................................................21 Centriranje teksta i Inline grafike...........................................................................................22 1.4 Atributi Height (Visine) i Width (Širine) ............................................................................22 Linkovi.......................................................................................................................................23 Link za lokalne fajlove...........................................................................................................23 1.5 Link za grafiku.................................................................................................................24 Link ka drugim folderima ......................................................................................................24 Anchor linkovi ka folderima višeg nivoa ................................................................................25 Anchor link ka stranici na Internetu ......................................................................................26 1.6 Linkovi i adrese...............................................................................................................26 1.6.1 Kako rade linkovi u pretraživaču................................................................................26 1.6.2 Apsolutne ili relativne putanje....................................................................................26 1.6.3 Atribut target..............................................................................................................27 Heksadecimalne oznake i boje .................................................................................................28

Jednobojne pozadine (Solid Color Backgrounds)..................................................................29 Teksturne pozadine...............................................................................................................30 META tagovi..............................................................................................................................31 1.7 Meta tag za automatski prelazak na drugu web stranicu .................................................31 Meta tagovi za opis...............................................................................................................32 Kreiranje tabela..........................................................................................................................32 Redovi i Kolone.....................................................................................................................34 1.8 Tabela sa podacima.........................................................................................................35 HTML forme...............................................................................................................................37 Text Input Elementi (type="text")...........................................................................................37 Password Input Elementi (type="password").........................................................................38 1.9 Text Area Input Elementi (type="textarea")......................................................................39 Radio buttons (type="radio").................................................................................................39 1.10 Check Boxes (type="checkbox")....................................................................................40 Menu Select (type="select")..................................................................................................41 Submit and Reset (type="submit" and type="reset").............................................................41 III DEO.......................................................................................................................................45 CSS...........................................................................................................................................45 1.11 Šta je to CSS?...............................................................................................................45 Načini primene stilova...........................................................................................................46 1.11.1 CSS kao eksterni fajl...............................................................................................47 1.11.2 Interni stilovi............................................................................................................47 1.11.3 Inline......................................................................................................................48 1.11.4 Alternativne liste stilova..........................................................................................48 CSS Sintaksa.............................................................................................................................49 Iskazi - vrste..............................................................................................................................51 Selektori – Uvod........................................................................................................................51 Tipovi selektora....................................................................................................................51 Type selektori........................................................................................................................52 Tipovi HTML elemenata ......................................................................................................52 Class selektori.......................................................................................................................53 Opšti class selektori..........................................................................................................53 Class selektori...................................................................................................................54 ID selektori...........................................................................................................................54 Opšti ID selektori...............................................................................................................55 ID selektori........................................................................................................................55

Descendant (potomak) selektori............................................................................................55 Link pseudo class selectors..................................................................................................57 Svojstva (Properties)..................................................................................................................59 Text style svojstva.................................................................................................................60 1.12 Text layout svojstva.......................................................................................................63 1.13 Background svojstva.....................................................................................................67 1.14 Border svojstva..............................................................................................................69 1.15 Margin svojstva..............................................................................................................72 1.16 Padding svojstva............................................................................................................73 1.17 . Page layout svojstva....................................................................................................74 1.17.1 Uvod u pozicioniranje elemenata sa CSS-om.........................................................74 1.17.2 O slojevima (layers)................................................................................................75 1.17.3
......................................................................................................................75 1.17.4 Načini pozicioniranja..............................................................................................75 1.18 Element type svojstva...................................................................................................84

I DEO 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 računarski 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 koriste se sledeće tehnologije: • • •

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 Sadržaj i uslugama koje Internet nudi nazivaju se servisi 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 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.

World Wide Web 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.

1.1.1 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

1.1.2 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 4. Povratna informacija

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

Database server

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

Priprema okruženja za izradu HTML sajtova 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. Za instalaciju Wamp servera potrebno je pokrenuti instalacioni fajl 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

II DEO Uvod u HTML Kada web browser prikaže stranicu ona se učitava iz jednostavnog tekstualnog fajla i sastoji iz specijalnih kodova ili “tag-ova” koji su označeni sa < i > znakovima. Osnovni format za HTML tag je: string of text Na primer, naslov za sekciju može koristiti 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 se kosa crta izostavi, web browser će nastaviti tag na ostatku teksta u dokumentu, praveći neželjene rezultate. Ukoliko postoji štamparska greška u HTML-u, stanica će se prikazivati, ali ne onako kako je zamišljeno. Radni prostor za kreiranje HTML strana čine tekst editor (Notepad, Wordpad i sl.) i web browser u kome se stranice pregledaju. Za kreiranje HTML stranica mogu se koristiti i napredni HTML editori kao što su Dreamweaver ili Kompozer. Microsoft Word nije pogodan za kreiranje HTML stranica, iako postoji opcija za čuvanje fajla u html formatu.

1.2 Kreiranje HTML dokumenta Svaki HTML dokument mora početi tagom i završiti se tagom . HTML dokument sadrži uobičajeno dva različita dela, head i 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. Takođe, u primeru postoji i tag za komentar: . Tekst između tag-ova se ne pokazuje na web stranici ali taj tekst služi za informisanje pri pregledanju izvornog HTML koda. Slede koraci koji se koriste za kreiranje HTML fajla.

Korak 1

Ako već nije otvoren, pokrenite tekst editor.

Korak 2

Unesite sledeći 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.<br /> <br /> 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. Korak 4<br /> <br /> Vratite se u prozor web browser-a koji ste koristili kao vaš radni prostor “work<br /> <br /> space”.<br /> <br /> Korak 5<br /> <br /> Izaberite Open File... sa File menija i pronađite kreirani dokument.<br /> <br /> 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...” Ukoliko se promeni izvorni kod HTML dokumenta, u web browseru je potrebno osvežiti (refresh) stranu da bi se izmenjeni fajl učiotao.<br /> <br /> Zaglavlja u HTML-u (Headings) Zaglavlja se u HTML-u kreiraju tako što se delovi teksta okruže 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:<br /> <br /> Slika 9 Veličine zaglavlja<br /> <br /> Nivoi zaglavlja su rangirani od nivoa 1 (najvažniji) do nivoa 6 (najmanje važan). Smeštanje HTML zaglavlja u dokument:<br /> <br /> Korak 1<br /> <br /> Otvorite HTML tekst fajl kreiran u prethodnom primeru.<br /> <br /> Korak 2<br /> <br /> 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><br /> <br /> Korak 3<br /> <br /> 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><br /> <br /> Korak 4<br /> <br /> Sačuvajte promene u vašem tekst editoru.<br /> <br /> Korak 5<br /> <br /> Vratite se u web browser, osvežite stranicu.<br /> <br /> Razdvajanje Paragrafa HTML kod za paragraf break je <p> i </p>.<br /> <br /> Korak 1.<br /> <br /> Otvorite html iz prethodnog fajl u tekstualnom editoru.<br /> <br /> Korak 2.<br /> <br /> Pomerite rečenicu ( Fakultet...) tako da je ona iznad O fakultetu zaglavlja. Posle ovoga dodajte sledeći tekst iznad <h2> O fakultetu </h2> zaglavlja: Fakultet organizacionih nauka je visokoobrazovna institucija. Član je beogradskog univerziteta. Sedište fakuleta je u ulici Jove Ilića 154.<br /> <br /> Korak 3.<br /> <br /> Sačuvajte promene u text editoru.<br /> <br /> Korak 4.<br /> <br /> Vratite se u vaš web browser, osvežite stranicu i pogledajte promene.<br /> <br /> Korak 5.<br /> <br /> Vratite se u HTML dokument u text editor. Posle druge rečenice ispod unesemo <h2> O fakultetu </h2>, potom unesemo paragraph tagove <p> i </p> Ovaj deo bi trebao sada da izgleda ovako: <h2> O fakultetu </h2> Fakultet organizacionih nauka je visokoobrazovna institucija. Član je beogradskog univerziteta. <p> Sedište fakuleta je u ulici Jove Ilića 154. </p><br /> <br /> Korak 6.<br /> <br /> Sačuvajte promene u text editoru i pogledajte novi fajl u browseru.<br /> <br /> 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 <br> tag koji forsira tekst u novu liniju kao <p> tag, ali bez ubacivanje blank linije. Uporedimo različitosti između upotrebe <br> i <p> u sledeća dva primera u tabeli 1:<br /> <br /> Table 1 Mogućnosti paragraf tipova<br /> <br /> HTML kod U ovoj lekciji pokazacemo Vam razlicite mogucnosti paragraf tagova. <p> Takodje... <p> otkricete i razlicite izvanredne mogucosti i kombinacije tagova srodnih njemu.<br /> <br /> Rezultat u browser-u U ovoj lekciji pokazacemo Vam razlicite mogucnosti paragraf tagova.<br /> <br /> U ovoj lekciji pokazacemo Vam razlicite mogucnosti paragraf tagova. <p> Takodje... <br> otkricete i razlicite izvanredne mogucosti <br> i kombinacije tagova srodnih njemu.<br /> <br /> U ovoj lekciji pokazacemo Vam razlicite mogucnosti paragraf tagova.<br /> <br /> Takodje... otkricete i razlicite izvanredne mogucosti i kombinacije tagova srodnih njemu.<br /> <br /> Takodje... otkricete i razlicite izvanredne mogucosti i kombinacije tagova srodnih njemu.<br /> <br /> <br> tag može biti korišćen za različit raspored stila.<br /> <br /> 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 nudi nekoliko tag-ova za dodavanje stila vašem tekstu (tabela 2). Table 2 Tag-ovi za dodavanje stila<br /> <br /> HTML kod <b>Ovo je Bold...</b><br /> <br /> Rezultat u browser-u Ovo je Bold...<br /> <br /> <i> Ovo je Italic...</i><br /> <br /> Ovo je Italic... Ovo je Typewriter...<br /> <br /> <tt> Ovo je Typewriter...</tt> <i><b>Ovo je Bold AND Italic</b></i><br /> <br /> Ovo je Bold AND Italic<br /> <br /> <b><i>Ovo Je Takodje</i></b><br /> <br /> Ovo Je Takodje<br /> <br /> <h2><i>Novi</i> i<br /> <br /> <tt>Unapredjeni!</tt></h2><br /> <br /> Novi i Unapredjeni!<br /> <br /> Pratite sledeće korake da dodate style tag-ove u HTML dokument:<br /> <br /> Korak 1.<br /> <br /> Otvorite HTML dokument u text editoru.<br /> <br /> Korak 2.<br /> <br /> 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: <b>Fakultet</b><br /> <br /> Korak 3.<br /> <br /> Sada ćemo modifikovati drugi paragraf sa bold i italic tag-ovima da naglasimo reči. Unesite <b>...</b> i <i>...</i> tag-ove oko reči beogradskog univerziteta tako da ovaj deo izgleda ovako: <p> Fakultet organizacionih nauka je visokoobrazovna institucija. Član je <b><i> beogradskog univerziteta. </i></b> Sedište fakuleta je u ulici Jove Ilića 154.<br /> <br /> Korak 4.<br /> <br /> 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 ponovo je učitajte vaš web browser.<br /> <br /> Rad sa listama 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 teksta. Evo primera neuređene liste: Izgled u browser-u TIPOVI STUDIJA: • Dodiplomske • Postdiplomske A ovo je HTML format koji pravi ovakav izgled liste: <b>TIPOVI STUDIJA:</b><br /> <br /> <ul> <li> Dodiplomske <li> Postdiplomske </ul> <ul> tag označava početak i kraj liste, i <li> označava svaku stavku liste.<br /> <br /> 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. IT 2. MEN 3. UK 4. OM A ovo je HTML format: <b>SMEROVI:</b> <ol> <li>IT <li> MEN <li> UK <li> OM </ol><br /> <br /> Umetnute liste Uređene i neuređene liste mogu imati različite nivoe; svaka će biti ubačena skladno u vaš web browser. Ovde je dat primer jedne neuređene liste sa podnivoima drugih lista: Izgled u browser-u<br /> <br /> Neuredjena i umetnuta lista • •<br /> <br /> •<br /> <br /> 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<br /> <br /> Primetite kako se bullet oznaka menja sa svakom promenom nivoa liste. A ovako izgleda HTML format koji daje izgled gore navedene tabele: <b>Neuredjena i umetnuta lista</b> <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> Ne samo da možete mešati uređene liste unutar uređenih, 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 uređena lista sadrži umetnutu neuređenu listu:<br /> <br /> 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<br /> <br /> A ovako izgleda HTML dokument, kojim se postiže ovakav efekat: <b>Kombinovana lista</b> <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.<br /> <br /> HTML tagovi za ubacivanje slika «Inline» slika je ona slika koja se pojavljuje unutar Web stranice,<br /> <br /> kao što je recimo ova slika «logo» HTML format za inline image tag izgleda ovako: <img src="filename.gif"><br /> <br /> 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: <p> <img src="filename.gif"><br /> <br /> 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: • • •<br /> <br /> <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<br /> <br /> 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<br /> <br /> Korak 1<br /> <br /> Kreirajte folder pod nazivom HTML Vežbe<br /> <br /> Korak 2<br /> <br /> U ovom folderu sačuvajte sliku logo.jpg (desni klik, Save Picture As) i sliku<br /> <br /> fon.jpg<br /> <br /> Korak 3<br /> <br /> U istom folderu, kreirajte HTML fajl u unesite sledeći kod:<br /> <br /> <html> <h1 align="center"><strong>FAKULTET</strong></h1> <p align="center"><img src="logo.jpg"></p> <p align="center">Ovo je zvanični logo predmeta na fakultetu.</p> <p align="center"> Fakultet datira od 1969 godine. </p> <p align="center"><img src="fon.jpg"> </p> </html> Sačuvajte fajl i pogledajte kako izgeda u browser-u.<br /> <br /> 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.<br /> <br /> Č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"><strong>FAKULTET></h1> <p align="center"><img src="logo.jpg" width="20%" height="50%"></p> <p align="center"> Ovo je zvanični logo predmeta na fakultetu.</p> <p align="center">Fakultet datira od 1969 godine.p> <p align="center"><img src="fon.jpg" width="71" height="100"></p> </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.<br /> <br /> 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:<br /> <br /> Korak 1<br /> <br /> Otvoriti novi HTML document u text editor-u.<br /> <br /> Korak 2<br /> <br /> U ovaj dokument ubaciti sledeći kod:<br /> <br /> Korak 3<br /> <br /> <strong> Ovde ste došli jer ste kliknuli na link!</strong><br /> <br /> Korak 4<br /> <br /> Sačuvati dokument pod nazivom "drugi.html" u nekom folderu.<br /> <br /> Korak 5<br /> <br /> U istom folderu kreirati još jedan HTML fajl "prvi.html".<br /> <br /> Korak 6<br /> <br /> U tom fajlu otkucati sledeći kod:<br /> <br /> <p>Ovo je dokument sa linkom.</p> <p>Kliknite na link da predjete na drugu stranu. </p> <p><a href="drugi.html" rel="nofollow">Link na drugu stranu </a></p><br /> <br /> Korak 7<br /> <br /> Sačuvajte fajl i pogledajte u browser-u. Proverite da li link radi.<br /> <br /> 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:<br /> <br /> Korak 1<br /> <br /> Download-ujte sliku fon.jpg.<br /> <br /> Korak 2<br /> <br /> U istom folderu gde je slika, kreirati HTML fajl koji sadrži sledeći kod:<br /> <br /> <html> <p>Ovo je dokument sa linkom na sliku. </p> <p>Kliknite na link da biste videli sliku u browser-u. </p> <p><a href="fon.jpg" rel="nofollow">Link na sliku </a></p> </html><br /> <br /> Korak 3<br /> <br /> Sačuvati fajl i pogledati u browser-u.<br /> <br /> 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<br /> <br /> 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:<br /> <br /> Korak 1<br /> <br /> Kreirati folder Pictures na istoj lokaciji gde je sačuvan fajl iz prethodne vežbe.<br /> <br /> Korak 2<br /> <br /> Pomeriti fon.jpg fajl u novi folder.<br /> <br /> Korak 3<br /> <br /> Izmeniti kod html fajla tako da red za link izgleda ovako:<br /> <br /> <p><a href="pictures/fon.jpg" rel="nofollow">link na sliku</a></p>.<br /> <br /> Korak 4<br /> <br /> Pogledati fajl u browser-u.<br /> <br /> 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.<br /> <br /> 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!<br /> <br /> Anchor link ka stranici na Internetu Potpun<br /> <br /> HTML<br /> <br /> format<br /> <br /> za<br /> <br /> Anchor<br /> <br /> link<br /> <br /> ka<br /> <br /> stranici<br /> <br /> na<br /> <br /> Internetu<br /> <br /> :<br /> <br /> <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:<br /> <br /> Korak 1<br /> <br /> Promeniti fajl iz prethodne vežbe tako da kod izgleda ovako:<br /> <br /> <p>Ovo je dokument sa linkom na sajt. </p> <p>Kliknite na link da biste otvorili sajt Fon-a. </p> <p><a href=www.fon.bg.ac.yu rel="nofollow">Link na sajt fakulteta. </a></p><br /> <br /> Korak 2<br /> <br /> Sačuvati fajl i pogledati u browser-u.<br /> <br /> 1.6 Linkovi i adrese 1.6.1 Kako 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 reference, 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.<br /> <br /> 1.6.2 Apsolutne 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<br /> <br /> 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.<br /> <br /> 1.6.3 Atribut 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<br /> <br /> 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.<br /> <br /> 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<br /> <br /> Boja<br /> <br /> Heksadecimalno<br /> <br /> Boja<br /> <br /> Heksadecimalno<br /> <br /> FFCCCC<br /> <br /> 3300FF<br /> <br /> 33FF66<br /> <br /> AA0000<br /> <br /> 663300<br /> <br /> 9900FF<br /> <br /> 000077<br /> <br /> FFFF00<br /> <br /> EEEEEE<br /> <br /> 888888<br /> <br /> 444444<br /> <br /> 000000<br /> <br /> 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<br /> <br /> Ime boje<br /> <br /> Boja<br /> <br /> Ime boje<br /> <br /> aqua<br /> <br /> black<br /> <br /> blue<br /> <br /> fuchsia<br /> <br /> gray<br /> <br /> green<br /> <br /> lime<br /> <br /> maroon<br /> <br /> navy<br /> <br /> olive<br /> <br /> purple<br /> <br /> red<br /> <br /> silver<br /> <br /> teal<br /> <br /> white<br /> <br /> yellow<br /> <br /> 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.<br /> <br /> Korak 1<br /> <br /> Otvoriti fon.html fajl u text editor-u.<br /> <br /> Korak 2<br /> <br /> Pronaći <body> tag i promeniti ga u:<br /> <br /> <body bgcolor=#000000><br /> <br /> Korak 3<br /> <br /> Save i Load HTML file u web browser-u<br /> <br /> 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: • • • •<br /> <br /> 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)<br /> <br /> 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).<br /> <br /> 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: •<br /> <br /> Č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.<br /> <br /> •<br /> <br /> 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.<br /> <br /> 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).<br /> <br /> Slika 10 Izgled tekstualne pozadine<br /> <br /> 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. 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 stranicu

za

automatski

prelazak

na

drugu

web

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. 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.myelab.net "/> 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 < i zaključno sa poslednjim > 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">

Kreiranje tabela 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
Red 2 kolona 1 Red 2 kolona 2 Red 2 kolona 3
Red 3 kolona 1 Red 3 kolona 2 Red 3 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 centriranje) • tag-ovima (tabela 6)

Table 6 Korišćenje colspan i rowspan atributa

HTML kod
...... centrira sve elemente na levu stranu ćelije (ovo je default setting) • centrira sve elemente na desnu stranu ćelije •

 centrira sve elemente u centralnom delu ćelije

Vertical Alignment (Vertikalno centriranje) • •

•

 centrira sve elemente na vrh ćelije centrira sve elemente na dno ćelije centrira sve elemente na središnjem delu ćelije (ovo je po default setting)

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. Naprevite osnovnu konstrukciju za html stranicu kao do

sada.

Korak 2

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

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.

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 2 Red 3 kolona 3
Sada je prikazana ćelija koja obuhvata 2 reda.
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

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

Red 3 kolona 3

1.8 Tabela sa podacima Korak 1

Pokrenite tekst editor. Napravite osnovnu konstrukciju stranice za HTML.

Korak 2 Između body tagova unesite sledeći kod.
Odsek Prosecna ocena Broj studenata <sup>*
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 podržava
...
tag, onda samo okružiti tabelu sa ovim tag-ovima.

browser

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

HTML forme Text Input Elementi (type="text") Forme 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") Ovi elementi 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") Ovi elementi su tekst polja koja sadrže više od jedne linije za unos podataka i mogu se scrollovati 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.

Radio buttons (type="radio") Radio dugmići 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.10 Check Boxes (type="checkbox") Ovi elementi 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") 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. <select name="cheeses">

Submit and Reset (type="submit" and type="reset") Ovaj tip 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

Reset button

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. Posle HTML koda koji sadrži link informaciju za "Reference" frames web page, dodajte:

REPORT...
forma za slanje izvestaja

Korak 2

Save , tj. sačuvajte ovaj HTML file.

Korak 3 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. Korak 4 Da bi bolje razumeli ovaj dokument, prezentovaćemo jednu po jednu njegovu sekciju. Prvi deo fajla sadrži "normal" deo našeg HTML fajla. Ovo dodajte u vaš novi fajl:

IZVESTAJ



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

Korak 6 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 prvu sekciju "Informacije o studentu":

STATISTIKA tag-a; proveriti da li se nalazi unutar ...
tag-ova. Obojiti tekst
...
Odsek Prosecna ocena Broj studenata <sup>*
Odsek Prosecna ocena Broj studenata <sup>*
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 7

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 8 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 9

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 <select name="otype">


(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




navedite tri web sajta na kojima cete vrsiti pretragu za informacijama
Na kraju...


Korak 11 Uradite Save dokumenta proj.html i potom ga učitajte u web 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.

III DEO 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 <style> taga. • Direktno u određenom HTML tagu koji se želi formatirati tzv. Inline.

1.11.1

CSS kao eksterni fajl

Ovaj način pridruživanja stilova stranici je strogo preporučen s obzirom na to da omogućava veliku fleksibilnost prilikom promene stila stranice i primene jednog istog stila na više različitih stranica. Ovaj način zapravo predstavlja materijalizaciju osnovnog principa kojim se vodi CSS filozofija : razdvojiti sadržaj od izgleda stranice. Znači, ako se u eksternom CSS fajlu napiše da pozadina stranice bude bela, ona će biti bela na bilo kojoj stranici koja je sa ovim fajlom prethodno bila povezana, i ako nakon toga u istom CSS fajlu promenite boju pozadine u crnu ona će istovremeno postati crna u svim tim stranicama makar ih bilo i 1000. Sa druge strane, za ovu jednostavnu promenu boje pozadine, za svih tih 1000 stranica mora se izvršiti 1000 promena! Ovakva dinamičnost može se postići i kada su u pitanju fontovi, boje, linkovi, paragrafi, liste, tabele, hederi, pozicije, dimenzije... Da bi se fajl sa definisanim stilovima (koji ima ekstenziju .css) eksterno povezao sa HTML stranicom, potrebno je da se fajl linkuje sa te stranice koristeći tag u okviru taga HTML stranice. Pretpostavimo da imamo neki fajl u kome su definisana css pravila i da se taj fajl zove “stilovi.css” i nalazi u istom folderu kao i naša stranica. Povezivanje ovog fajla sa našom HTML stranicom obavlja se na sledeći način:

Ovime je svako pravilo koje je definisano u ovom fajlu primenjeno na odgovarajuće tagove koji se pojavljuju na našoj stranici.

1.11.2

Interni stilovi

Ovako primenjeni stilovi ne mogu se vezati za više stranica istovremeno već se pišu u zaglavlju same stranice i pripadaju samo njoj. Za ovako definisane stilove se kaže da su ugrađeni u stranicu (eng. embedded). Ovakav način definisanja i primene stilova treba izbegavati zbog toga što se umanjuje fleksibilnost i dinamičnost a takođe se narušava i pravilo odvajanja sadržaja stranice od definicije izgleda. Interni stil se postavlja u zaglavlje dokumenta pomoću <style> taga u okviru taga na sledeći način: <style type=”text/css”> body { background-color: #ffffff; } P { color: #000000; }

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: <style type="text/css"> @import url(http://style.com/basic);

Po HTML 4.0 specifikaciji ukjučen je i atribut media u okviru <style> taga za određivanje medija na koji se stil primenjuje. Ovaj atribut može uzimati sledeće vrednosti: • • • • •

sreen - Izlazni medij je ekran print - Izlazni medij je štampač projection - Izlazni mediji je projektor speech - Izlazni medij je uređaj za sintezu govora all - Koristi sve izlazne medije

Pomoću atributa type navodi se MIME tip za liste stilova. 1.11.3

Inline

Inline znači upisivanje stila u okviru samog taga u HTML stranici na koji se stil odnosi. Skoro svaki HTML element sadrži atribut style u kome se mogu navoditi CSS pravila kao vrednost atributa. Na primer:

Ovo je paragraf



Ovakav način primene stila se takođe ne može preporučiti jer sadržaj stranice i definicija stilova nisu odvojeni, što uzrokuje nefleksibilnost i neefikasnost pri izmeni stila.

1.11.4

Alternativne liste stilova

Jedan dokument ne mora imati samo jedan fajl sa stilovima koji je za njega zakačen. Moguće je definisati glavni stil i neograničen broj alternativnih lista stilova čime se korisniku pruža mogućnost da izabere onaj stil koji mu najviše odgovara. Kako korisnik bira željenu listu stilova zavisi od Web čitača. Svi Web čitači još uvek nemaju podršku za to ali oni koji imaju nude u meniju stavku “choose stylesheet” ili nešto tome slično. Da bi uključili više lista stilova potrebno je uključiti više tagova u zaglavlju HTML dokumenta, sa odgovarajućim title i rel atributima. Dat je primer definisanja alternativnih lista stilova: ...

Dakle, pri definisanju alternativnog stila, vrednost atributa rel je "alternate stylesheet".

CSS Sintaksa Svaka Kaskadna Lista Stilova predstavlja seriju instrukcija koje se zovu iskazi. Postoje različite vrste iskaza1, ali najvažnija vrsta je pravilo (eng. Rule). Pravilo radi dve stvari: 1. Identifikuje elemente u HTML dokumentu na koji se odnosi 2. Ukazuje Web čitaču na to kako da iscrta te elemente na stranici Pod elementima se podrazumevaju paragrafi, linkovi, liste itd. Deo pravila koji govori Web čitaču kako izabrani element treba da bude prikazan naziva se deklaracijom. Deklaracija može da sadrži određen broj svojstava kojima se postavljaju konkretne osobine elementa. Deo pravila koji govori o tome koji HTML element se opisuje naziva se selektor (eng. Selector).

Slika 11 Sintaksa za opis kaskadnih lista stilova

Dakle, jedan css fajl se sastoji iz niza iskaza (od kojih su većina pravila), a jedno pravilo ima tri elementa u sebi: 1. selektor (selector) 2. svojstvo (property) (najmanje jedno svojstvo) 3. vrednost svojstva (value) (najmanje jednu vrednost) Skup svojstava i njihovih vrednosti predstavljaju deklaraciju.

Primer:

Iz primera se može uočiti i anatomija pravila. Na početku je selektor, zatim u prostoru između dve vitičaste zagrade (koje označavaju početak i kraj deklaracije) nalaze se svojstva i njihove vrednosti koje su međusobno odvojene dvotačkom, dok su svojstva međudsobno razdvojena tačka – zarezom.

1

Za detalje pogledati u nastavku deo “iskazi – vrste”

Slika 12 Anatomija pravila

Evo nekoliko pravila koje treba poštovati pri pisanju lista stilova kako ne bi došlo do neočekivanih efekata u radu sa stilovima: 1. Svaki iskaz mora imati selektor i deklaraciju. Deklaracija dolazi odmah iza selektora i oivičena je vitičastim zagradama. 2. Deklaraciju čine jedan ili više svojstava odvojenih tačka-zarezom. 3. Svako svojstvo ima ime iza koga je dvotačka a zatim ide vrednost za to svojstvo. Postoji veliki broj različitih vrednosti za svojstva ali svako svojstvo može primiti samo vrednost koja mu je po specifikaciji propisana. 4. Nekada svojstvo može dobiti više vrednosti kao što je to slučaj sa font-family svojstvom. Višestruke vrednosti trebaju biti odvojene zarezom i praznim prostorom. 5. Vrednost koja se prikazuje sa više reči treba staviti pod navodnike 6. Između vrednosti svojstva i jedinice u kojoj se vrednost navodi ne sme da postoji prazan prostor. Primer: f 1 -e om n; t: e z i s v a r p 7. Kao i kod HTML-a, dodatni prazan prostor se ignoriše te se može koristiti kako bi se olakšalo citanje koda. 8. Kada za jedan element postoji više definisanih stilova onda će biti primenjeni stilovi po sledećem prioritetu, pri čemu poslednji način definisanja ima najveći prioritet jer je najbliži elementu: 1. 2. 3. 4.

Web čitač default stilovi Eksterna lista stilova Ugrađena lista stilova unutar zaglavlja stranice Inline definisan stil

9. Selektori se mogu grupisati tako što će se svaki selektor odvojiti zarezom. U primeru su grupisani svi elementi za naslove u HTML-u i svakom od njih dodeljena je osobina da su slova ispisana zelenom bojom. Primer: h1,h2,h3,h4,h5,h6 { color: green }

Iskazi - vrste Postoji nekoliko vrsta iskaza: •

• • •

@Rules (@pravila) o @import o @media o @page Komentari HTML komentari Rules (pravila)

Komentari Komentari prilikom pisanja kaskadnih lista stilova imaju sledeću formu: /* Ovako se pišu komentari */

Dakle forma komentara je ista kao kada se komentariše skript kod. HTML komentari Stariji Web čitači koji ne podržavaju CSS će prikazati sadržaj ugnježdene kaskadne liste kao tekst na stranici. Da bi se to izbeglo koriste se HTML tagovi za komentare kako bi se sadržaj taga <style> (koji je starijim Web čitačima neopoznat i koga će ignorisati) sakrio. Treba naglasiti da se eksterne liste stilova ne trebaju komentarisati na ovaj način i da ovo važi isključivo za ugnježdene liste stilova. Rules (pravila) Rule ili pravilo je vrsta iskaza koji Web čitaču govori kako određeni element treba da bude iscrtan na stranici.

Selektori – Uvod Može se reći da su selektori najvažniji deo kaskadnih lista stilova. Selektor identifikuje tag čiji se izgled podešava pomoću pravila. Web čitač koristi selektore da bi odredio koji tag treba da prikaže na način na koji je u pravilu definisano. Selektori mogu da identifikuju bilo koji HTML tag, ali mogu još mnogo toga da urade.

Tipovi selektora Specifikacija organizuje i grupiše selektore prema njihovim teoretskim karakteristikama. Ovde će oni biti organizovani prema načinu njihove upotrebe. Biće razmotreni sledeći tipovi selektora: Vrsta selektora

Sintaksa za definsanje

Type selektori Class selektori ID selektori

body { lista svojstava } p.zutiParagraf { lista svojstava } p#zutiParagraf { lista svojstava }

Descendant selektori Link pseudo class selektori Pseudo element selektori Grupni selektori Dinamički pseudo class selektori Jezički pseudo class selektori Child selektori First child selektori Adjacent selektori Attribute selektori

div p h1 { lista svojstava } a: hover { lista svojstava } p: first-line h1, h2, h3 { lista svojstava } p:hover { lista svojstava } p:lang(fr) { lista svojstava } div>p>strong { lista svojstava } p:first-child { lista svojstava } strong + em { lista svojstava } a[title=”kontakt”]{ lista svojstava }

Za svaki tip biće navedeno: • Šta taj tip selektora radi • Kako se formira – sintaksa • Zašto bi ga trebalo koristiti • Koliko su dobro podržani od strane Web čitača

Type selektori Jednom definisan, type selektor se odnosi na svaki tag na stranici čiji naziv odgovara nazivu selektora. Na primer, selektor b odnosi se na svaki tag koji se pojavi na stranici. Takođe p selektor se odnosi na svaki

tag koji se pojavi na stranici. To znači da ako se postavi type selektor p i kao vrednost atributa color postavi plava boja, tekst koji se pojavi na stranici u okviru

taga (bilo gde na stranici) biće plave boje.

Način formiranja Type selektor se veoma jednostavno formira. Navodi se kao bilo koji tag HTML-a ali bez oznaka “<” i “>”. Primer: • bselektor o se odnosti na … tag • lselektor se odnosi na

  • …
    • tag

    Korišćenje Koristeći type selektor, moguće je menjati izgled bilo kog taga na stranici ili svih tagova istovremeno. Ako se korektno ispiše kod HTML stranice, neće se osetiti potreba za menjanje tog koda ukoli se želi u budućnosti promeniti izgled. Dovoljno će biti da se izmeni opis stila za željeni tag. Početnici u CSS-u često misle da su ograničeni na ovaj tip selektora i da se CSS-om može uraditi samo ono što ovaj tip selektora nudi. Međutim to je greška, jer postoji veliki broj tipova selektora koji daju velike mogućnosti za kreativan rad.

    Tipovi HTML elemenata Svi elementi (HTML) koji se koriste pri kodiranju su podeljeni u tri tipa. Svaki od ovih tipova se na stranici prikazuje drugačije. Ovo je razlog što u CSS-u postoji svojstvo display. Sa ovim svojstvom može se u mogućnosti, teoretski, definisati prikaz elementa na stranici. U praksi Web čitači će možda ignorisati pokušaj izmene načina prikaza elementa. Umesto toga, prikazaće element po preporuci W3C-a. Tri osnovna tipa prikaza su:

    • block • inline • list item Block elementi su odvojeni od elemenata koji ih okružuju u toku HTML stranice. Web čitači generalno daju blok elementima standardne margine na vrhu i na dnu bloka. Sa CSS-om može se definisati veličina margina oko blok elementa. Primeri za blok elemente su

    ,

    itd. Inline elementi nisu odvojeni od okružujućih elemenata u toku HTML stranice vec se nastavljaju odmah po završetku prethodnog elementa i nakon njega se nastavlja tok HTML stranice. Primeri za inline elemente su i . List item elementi se prikazuju slično kao i blok elementi, s tom razlikom što je na početak elementa dodat znak ili redni broj i što je element uvučen za izvestan broj piksela u odnosu na element roditelj. Sa CSS-om se neka slika može definisati kao marker ispred item list elementa. Najočigledniji list item element je
  • element. Treba napomenuti da su