HTML Skripta

SADRAJUvod ...........................................................................................................................................4 Internet servisi.............................................................................................................................4 WWW......................................................................................................................................5 Arhitektura WWW-a................................................................................................................5 Statiki i dinamiki web...........................................................................................................6 WAMP server...............................................................................................................................8 Instalacija WAMP servera.......................................................................................................9 Primer organizacije sajta po folderima..................................................................................11 ta su HTML tag-ovi?................................................................................................................12 Otvaranje vaeg radnog prostora...............................................................................................12 Kreiranje HTML dokumenta.......................................................................................................13 Prikazivanje dokumenta u Web Browser-u................................................................................14 Modifikovanje HTML Dokumenta...............................................................................................14 Reload-ovanje dokumenta u Web Browser................................................................................15 Zaglavlja (Headings)..................................................................................................................15 1.1 HTML zaglavlja................................................................................................................15 Smetanje HTML zaglavlja u va dokument.........................................................................16 Razdvajanje Paragrafa..............................................................................................................17 1.2 HTML Paragraf Break-ovi.................................................................................................17 Unoenje Paragraf Break-ova...............................................................................................17 Drugi tipovi break-ova...........................................................................................................18 Rad sa stilovima........................................................................................................................19 HTML Style Tag-ovi..............................................................................................................19 Unoenje Stilizovanog teksta u HTML dokument..................................................................20 Rad sa listama...........................................................................................................................20 1.3 Neureene liste................................................................................................................21 Ureene liste.........................................................................................................................21 Umetnute liste.......................................................................................................................22 Umetnute liste ......................................................................................................................23 HTML tagovi za ubacivanje slika................................................................................................24 Centriranje teksta i Inline grafike...........................................................................................24 1.4 Atributi Height (Visine) i Width (irine) ............................................................................25 Linkovi.......................................................................................................................................26

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

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

UvodHTML, HyperText Markup Language, je standarizovani jezik koji se koristi pri strukturiranju tekstova, medija i ugraenih objekata u web stranice i elektronsku potu. Kao modifikovanu i pojednostavljenu verziju SGML jezika, HTML standarizuje i odrava World Wide Web Consortium (W3C). Originalnu verziju HTML-a kreirao je Tim Berners-Lee, a prva zvanina verzija je izala juna 1993 godine. HTMl jezik je sainjen od obinog teksta i tagova. Iako se HTML znakovi (tags) esto nazivaju kodom, tehniki HTML nije kod jer kompjuterski kod su instrukcije koje od raunara trae da izvri odreenu operaciju. Svrha HTML znakova je da se se struktura dokumenta "oznai" tako da bi korisnikov agent (user agent), tj. internet pretraiva mogao da prepozna strukturu dokumenta i ispravno je prikae u prozoru internet pretraevaa kojeg korisnik koristi. Za dodatno modifikovanje web stranica, do sada su izali neki dodaci: CSS ili Cascading Style Sheets za izgled i poloaj prezentacije Skriptni jezici (Javascript, VBScript) za omoguavanje dinaminosti i interaktivnosti na web prezentacijama, DOM ili Document Object Model, koji oznaava vezu izmeu skripte i elementa na stranici

Gornji dodaci, u paketu sa HTML jezikom, ponekad se nazivaju DHTML ili Dinamini HTML.

Internet servisiKada se govori o sadraju i uslugama koje Internet nudi tada se u stvari misli na servise Interneta. Svi servisi Interneta rade po klijent-server konceptu. Sutina tog koncepta je da se pomou programa koji se nalazi na raunaru korisnika mree-klijenta pristupa eljenim podacima koji su smeteni na serveru na nekoj lokaciji svetske mree. Servisi Interneta se obino dele na: Osnovne servisi koji postoje na svakom raunaru koji je na mrei; Javne servisi koji se instaliraju na znaajnije servere na mrei obezbeujui lak pristup podacima; Posebne servisi namenjeni zadovoljenju specifinih elja korisnika.

Glavni predstavnik osnovnog servisa je e-mail (elektronska pota). Najznaajniji javni servis je WWW. U posebne servise spadaju servisi za pretraivanje, sigurnosni servisi, servisi namenjeni administratorima servera i mrea, i brojni drugi servisi.

WWWNajpopularniji 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 istraivanja u vajcarskoj (CERN). U poetku 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 grafikim korisnikim interfejsom koji je prikazivao boju, sliku i animaciju. Godinu dana kasnije, Andersen i Dim Klark su osnovali Netscape, koji je kreirao prvi komercijalni veb brauzer - Internet explorer, koji je postao dominantan na tritu. WWW je sistem sa univerzalno prihvaenim standardima za skladitenje, pronalaenje, formiranje i prezentaciju informacija u klijent-server konceptu. Veb stranice se zasnivaju na standardnom HTML (Hypertext Markup Language) jeziku koji formatira dokumente i pravi dinamike linkove ka drugim dokumentima i slikama smetenim na istim ili drugim raunarima. HTTP (Hypertext Transfer Protocol) je komunikacioni protokol koji omoguava saobraaj veb stranica u mrei. Kompletna putanja do zahtevanih veb stranica naziva se URL (Uniform Resource Locator). Za realizaciju WWW servisa vaan je veb server. Veb server je softver za lociranje i skladitenje veb stranica. On locira veb stranice koje korisnik raunara zahteva i dostavlja ih.

Arhitektura WWW-aWWW predstavlja mreu dokumenata koji su meusobno povezani; skup protokola koji definiu kako sistem radi i prenosi podatke i softver koji omoguuje rad ove koncepcije. Ono po emu se WWW razlikuje od drugih servisa na Internetu je njegovo jednostavno korienje. WWW omoguava pretraivanje dokumenata i kretanje, kako po razliitim dokumentima jednog raunara tako i po dokumentima razliitih raunara, po Internetu, korienjem jednostavnih komandi. Svakim pritiskom na taster mia 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 podvuenu re ili frazu i korisniku e biti prikazan linkovani dokument. WWW je jedan od najvanijih servisa Interneta ija upotreba omoguuje: pretraivanje, pronalaenje i itanje dokumenata na razliitim raunarima; korienje 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 omoguuje, putem linkova koje nudi, prelaz sa jednog na drugi dokument, koji moe biti lociran na istom ili udaljenom raunaru. Pozicioniranjem na izabrani link i jednostavnim pritiskom na taster mia prelazi se na drugi sajt, pomou HTTP-a (Hyper Text Transfer

Protocol). Pretraga je omoguena softverom zvanim veb brauzer. Klijent postavlja zahtev, alje ga veb serveru koji pomou CGI-a (Common Gateway Interface), preuzima razliite aplikacije. Arhitekturu WWW-a ine tri velika segmenta: veb klijent veb brauzer, tj. aplikacija instalirana na raunaru-klijentu koja se koristi za pristup stranicama na vebu (Internet explorer, Mozzila, Opera, Safari, i dr.) veb server softver instaliran na serverskom raunaru (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 DOSTUPNI SERVISI

Lokalni podaci

Prikupljanje informacija

Digitalna biblioteka

Veb ita

Upravljanje transferom podataka Alati za prenos informacija

Dodaci veb itaa (Add-ins)

Sigurnost transakcija

Slika 1 Opti koncept arhitekture veba

Statiki i dinamiki webWeb je u poetku svoga razvoja postojao iskljuivo kao statiki, tj. nisu postojale tehnologije koje bi uzele u obzir informacije koje su pristigle od korisnika i na osnovu njih generisale odgovor. Mogunosti statikog Weba oigledno nisu bile naroito velike: HTML stranice jesu nosilac informacija, ali onih koje se ne menjaju zavisno od konteksta te informacije su uvek iste. Oigledno je bilo neophodno da se doe do odreenog stepena programibilnosti na vebu, tj. da se razviju tehnologije koje e omoguiti vei stepen interaktivnosti od statikog veba. Pristup statikim stranicama na veb tee po sledeem redosledu (Error: Reference source not found):

1. Autor veb sajta kreira statiku veb stranicu i uva je u odreenom folderu na serveru 2. Klijent veb brauzer daje HTTP zahtev za datom stranicom. Zahtev se zadaje kada korisnik raunara unese odgovarajui URL u veb brauzer. 3. Veb server prihvata zahtev klijenta i locira traenu html stranicu 4. Traena stranica se vraa veb itau koji je prikazuje korisniku. Izmena statikih veb sajtova podrazumeva izmenu pojedinanih stranica veb sajta, to nije ekonomino ukoliko je potrbno esto aurirati veb sajt. U tom sluaju, mnogo je efikasnije primeniti neku od dinamikih tehnologija za kreiranje veb sajtova.3. Web server locira.htm datoteku

Web server 1. Autor pie HTML i pohranjuje ga na disku servera 4. HTML tok se vraa itau

2. Klijent daje HTTP zahtev za stranicu Korisnik

Slika 2 Statike veb stranice i nain pristupa

Dinamike Web stranice se zasnivaju na principu da se HTML kod ne stvara sve dok korisnik ne poeli da vidi Web stranicu. To dinamiko stvaranje stranica omoguuje da one budu prilagoene korisnikovim zahtevima, da zavise od prethodnih akcija korisnika, od vremena i mesta kad je pristupio lokaciji, od njegovog identiteta i specifinih potreba. Pristup dinamikim veb stranicama tee po sledeem redosledu (Error: Reference source not found): 1. Veb ita alje HTTP zahtev veb serveru. HTTP zahtev sadri URL sa traenom stranicom. 2. Veb server prihvata klijentski zahtev i aktivira aplikativni server. Aplikativni server je softver koji moe i ne mora biti instaliran na istom raunaru kao i veb server. 3. Na osnovu informacija primljenih u klijentskom zahtevu, aplikativni server prosleuje upit ka serveru baze podataka. 4. Na osnovu dobijenog zahteva, na serveru baze podataka izvrava se odgovarajui upit. Rezultat obrade alje se nazad do aplikativnog servera

5. Aplikativni server formira HTML stranicu u koju ugrauje informacije dobijene iz baze podataka. HTML stranica prosleuje se veb serveru. 6. Veb server alje HTML stranicu do klijentskog raunara.

1. Pretraiva alje HTTP zahtev koji sadri URL

Korisnik 6. Web server stranu alje do pretraivaa 2. Web server aktivira aplikacioni server

5. HTML strana sa traeniminformacijama Web server 4. Povratna informacija

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

Database server

Slika 3 Dinamike veb stranice i nain pristupa

WAMP serverWAMP je paket nezavisno kreiranih programa instaliranih na raunaru koji koriste Microsoft Windows operativni sistem. Interakcija ovih programa omoguava korienje dinamikih 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 omoguava korisnicima da web browser-ima, kao to su Internet Explorer ili Firefox pristupe sadraju na web serveru. MySQL je sistem za upravljanje bazama podataka. PHP je skript jezika serverske strane koji moe da manipulie informacijama koje su sadrane u bazi i generie web strane iznova svaki put kada se element sadraja zahteva iz browser-a. Ostali programi mogu takoe biti ukljueni u

pakete, kao to je phpMyAdmin koji omoguava grafiki interfejs za pristup MySQL-u, ili neke druge skript jezike, kao tu su Python ili Perl.

Instalacija WAMP serveraPokrenite 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) pojavie se ikonica koja predstavlja WAMP server. Kada kliknete na tu ikonicu pojavie se meni sa slike 5.

Slika 5 Opcije koje nudi WAMP server

Levim klikom na nju moe se pristupiti localhost-u, PHP MyAdmin-u, SQLite Manager-u. Uz pomo www directory moe 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 mogue je dobiti informaciju o verziji koja se koristi. Quick Admin omoguava pokretanje, stopiranje i ponovno startovanje svih servisa. Klikom na localhost (127.0.0.1) dobie 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 sauvani sajtovi e biti vidljivi kao folderi u odeljku Your Projects.

Slika 6 Wamp Homepage

Klikom na phpMyAdmin prikazae se slika 7. Ovo nam omoguava pristup MySQL bazi podataka.

Slika 7 Prikaz phpMyAdmin-a

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

Slika 8 Organizacija foldera

ta su HTML tag-ovi?Kada web browser prikae stranicu kao to je ova koju upravo itate, ona se uitava sa jednostavnog text fajla i trai iz specijalnih kodova ili tag-ova koji su oznaeni 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 prikae tekst Sta su HTML tagovi ? u stilu header-a level 3. Vano je napomenuti da krajnji ending tag, sadri / 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 vaem dokumentu, pravei neeljene rezultate Web browser ne mari da li koristite velika ili mala slova. Suprotno kompjuter programiranju, ako napravite tamparsku greku u HTML-u nee vam se desiti bomba ili ruenje sistema; prosto e vaa web strana izgledati pogreno.

Otvaranje vaeg radnog prostoraDa bi zavrili ovu lekciju, trebalo bi da kreirate drugi web prozor (ovo vam doputa da sauvate ovaj prozor sa instrukcijama iz lekcije i jedan prozor kao va radni prostor, tj workspace), i da pored toga otvorite text editor aplikaciju u treem prozoru. U nekim web browser-ima (recimo Internet Explorer-u), novi browser prozor se otvara i pored ve otvorene stranice koju gledate ili vae home page stranice. Ovo su koraci za podeavanje vaeg radnog prostora workspace: Iz File menija veeg web browser-a, selektujte New Window ili New Web Browser ( Taan naziv moe biti razliit 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. Sledee to treba da uradite je da iskoite 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 sauvali dokument u obinom text formatu ili ASCII formatu.

Takoe, korisno je i pomoie i vama u daljem radu ako prvo kreirate novi directory/folder na vaem kompjuteru koji e biti va radni prostor. Moete je zvati work area ili my space ili kako god vi to elite; samo proverite da li ste sauvali sve fajlove koje kreirate na njemu.

Kreiranje HTML dokumentaHTML dokument sadri dva razliita dela, glavu (head) I telo (body). Head sadri informacije o dokumentu koje se ne prikazuju na ekranu. Body sadri sve ostalo to se prikazuje kao deo web stranice. Osnovna struktura svake HTML stranice je: : : : : : : Linija na samom vrhu: nije tehniki zahtevana, ali je kod koji govori browser-u koja je verzija HTML tekue stranica koja se pie. Potrebno je okrui ceo HTML sadraj sa ... tagovima. Unesi prvo tvoj ... a potom ... sekcije. Takoe primeujete comment tag-ove okruene sa . Tekst izmeu tag-ova se ne pokazuje na web stranici ali taj tekst slui za informisanje koje e te moda vi koristiti ili neko drugi ko moe pogledati HTML kod iza web stranice. Slede koraci koji se koriste za kreiranje prvog HTML fajla.

Korak 1 Korak 2

Ako ve nije otvoren, pokrenite va text editor program.

Unesite sledei tekst (ne morate da pritiskate RETURN na kraju svake linije; web browser e obraditi ceo tekst): FON Web

U ovoj lekciji koristiete Internet da prikupljate informacije o FON-u, a potom ete napisati izvetaj na osnovu vaih rezultata. tag je korien da jedinstveno identifikuje svaki dokument i takoe prikae naslov na title bar-u prozora browser-a. Takoe, primeujete da smo uneli komment tag koji moe da prikazuje ime autora i datum kada je dokument kreiran. Vi moete pisati bilo ta izmeu comment tag-ova , ali je to vidljivo jedino kada vi pogledate izvor HTML-a za web stranicu.

Korak 3 Sauvajte dokument kao fajl koga e te nazvati fon.html i sauvajte ga na radnoj povriniu folderu/direktorijumu koji ste ve podesili. Takoe, 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 sauvati sve vae HTML-ove fajlove sa imenima koja na kraju imaju oznaku .HTM, tako da bi u vom sluaju va fajl bio fon.htm.

Prikazivanje dokumenta u Web Browser-uKorak 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 povrine prozora tekst FON Web i u web stranici ispod, jedna reenica od teksta koji ste napisali, U ovoj lekciji...

Modifikovanje HTML DokumentaDa 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. Korak 2.

Ako nije otvoren, kreirajte novi web browser prozor tako to izaberete New Window iz File meni-ja. Koristite Open File... komandu sa File meni-ja da pronaete i otvorite HTML fajl koji ste kreirali u prethodnoj lekciji.

Korak 3. Korak 4.

Ponovo otvorite va text editor program. U text editoru, otvorite fajl (fon.html) koji ste kreirali u prethodnoj lekciji.

Izmene u vaem HTML dokumentu

Korak 1.

Ispod teksta koji ste napisali u prethodnoj lekciji, pritisnite RETURN nekoliko puta i unesite sledei tekst Fakultet organizacionih nauka je visokoobrazovna institucija, lan je beogradskog univerziteta sa seditem u ulici Jove Ilia 154.

Korak 2.

Izaberite Save iz File meni-ja da sauvate izmene u vaem HTML fajlu.

Reload-ovanje dokumenta u Web BrowserVratite se na radnu povrinu web browser-a gde se prethodna verzija vaeg fajla prikazala. Primetie te da se novi tekst koji ste uneli kroz prethodne korake moda jo ne prikazuje. Da bi videli izmene i promene, koristite Reload dugme ili meni u vaem web browser-u. Sada bi ve trebalo da vidite tekst koji ste maloas uneli. Primetiete da web browser ignorie sve blank linije i velike razmake koje ste uneli u HTML fajl

Zaglavlja (Headings)1.1 HTML zaglavljaKreirate zaglavlja u HTML-u tako to tag-ujete odreene delove teksta sa heading tag-ovima, tj. tag-ovima za zaglavlje.Format za HTML zaglavlje tag je: Tekst koji se pojavljuje u zaglavlju gde je N broj od 1 do 6 i oznaava veliinu zaglavlja. Evo i nekih primera sa razliitim veliinama zaglavlja (slika 1):

Slika 9 Veliine zaglavlja

Nivoi zaglavlja su rangirani od nivoa 1 (najvaniji) do nivoa 6 (najmanje vaan).

Smetanje HTML zaglavlja u va dokumentKorak 1 Korak 2 Korak 3Ponovo otvorite va radni prostor, tj. workspace.Idite na text editor prozor. Otvorite HTML tekst fajl koji ste kreirali fon.html.

Prvo emo koristiti tag da prikaemo na ekranu naslov kao najvee zaglavlje, . Unesite sledee iznad postojeeg body teksta tj. posle tag-va: FON Web

Korak 4

Ispod teksta koji ste upravo uneli, kreirajte drugo zaglavlje za budue delove vae FON Web stranice. Unesite sledea zaglavja unutar body-ja vae web stranice: O fakultetu Delatnost fakulteta Smerofi na FON-u informacioni sistemi i tehnologije menadmet upravljanje kvalitetom industrijsko inenjerstvo Vesti

Korak 5 Korak 6

Sauvajte promene u vaem tekst editoru. Vratite se u va web browser, Open i Reload HTML fajl.

Razdvajanje Paragrafa1.2 HTML Paragraf Break-oviVideli smo ranije da web browser ignorie 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 . Takoe, tag-ovi se mogu napraviti kao break ali je neophodno staviti tag pre header tag-a: Fakultet organizacionih nauka

Unoenje Paragraf Break-ovaPratite sledee korake kako bi uneli i videli paragraf break u vaem HTML dokumentu.

Korak 1. Korak 2. Korak 3.

Ponovo otvorite va workspace.Idite na text editor prozor. Otvorite va radni dokument, fon.html, u teks editoru.

Kao prvo elimo da pomerimo reenicu ( Fakultet...) tako da je ona iznad O fakultetu zaglavlja. Upotrebite mi da preseete (cut) i paste, tj.zalepite ovaj tekst na zadatu lokaciju.

Korak 4.

Posle ovog, elimo da dodamo vie teksta. Ali bolje nego da ponovo unosimo , sa ove stranice miem selektujte i kopirajte reenice: Fakultet organizacionih nauka je visokoobrazovna institucija, lan je beogradskog univerziteta sa seditem u ulici Jove Ilia 154.

Korak 5. Korak 6. Korak 7. Korak 8. Korak 9.

Sada, vratite se u va HTML dokument u text editor, i zalepite ovaj tekst posle ve postojeih reenica iznad O fakultetu zaglavlja. Sauvajte promene u text editoru. Vratite se u va web browser.

Ako se ne vidi ovo to se upravo uradili, idite na Open Local... komanda sa File meni-ja za otvaranje dokumenata. Selektujte Reload iz File menija. Sada bi trebalo da vidite dve reenice iz Uputsva. Mi sada elimo da stavimo break izmeu ovih reenica.

Korak 10.

Opet, vratimo se u HTML dokument u text editor.

Korak 11. Korak 12.

Posle druge reenice ispod unesemo O fakultetu , pritisnemo RETURN, i potom unesemo paragraph tag:

Ovaj deo bi trebao sada da izgleda ovako: O fakultetu Fakultet organizacionih nauka je visokoobrazovna institucija, lan je beogradskog univerziteta sa seditem u ulici Jove Ilia 154. Fakultet organizacionih nauka je visokoobrazovna institucija, lan je beogradskog univerziteta sa seditem u ulici Jove Ilia 154.

Korak 13. Korak 14.

Sauvajte promene u text editoru.

Vratite se u va web browser i Reload-ujte dokument. Dve reenice uputstva bi sada trebalo da su razdvojeni paragrafi.

Drugi tipovi break-ovaDa razdvojite glavne delove web stranice, koristi se horizontal rule ili hr tag. On unosi horizontalnu liniju. HTML format za horizontal rule tag je: Stavite hr tag ispod O fakultetu zaglavlja. Ovo e pomoi da razdvojimo otvorene reenice lekcije sa drugih delova koji slede. I na kraju konano, sledi
tag koji forsira tekst u novu liniju kao tag, ali bez ubacivanje blank linije. Uporedimo razliitosti izmeu upotrebe
i u sledea dva primera u tabeli 1:Table 1 Mogunosti 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 moe biti korien za razliit raspored stila.

Rad sa stilovimaBa kao word procesor, HTML moe preneti web browser-u da prikae neke delove teksta u Italic ili Bold stilu ili ak u kombinaciji.

HTML Style Tag-oviHTML nudi nekoliko tag-ova za dodavanje stila vaem tekstu (tabela 2).Table 2 Tag-ovi za dodavanje stila

HTML kod Ovo je Bold... Ovo je Italic... Ovo je Typewriter... Ovo je Bold AND Italic Ovo Je Takodje Novi i Unapredjeni!

Rezultat u browser-u Ovo je Bold... Ovo je Italic...Ovo je Typewriter...

Ovo je Bold AND Italic Ovo Je Takodje

Novi i Unapredjeni!

Primeujete li da moete kombinovati stil tag-ova sve dok u potpunosti ne budete zadovoljni, italic tag-ovi su oba unutar bold tag-ova. Takodje, red nije vaan. Osim toga, moete dodati stil i na tekst koji se pojavljuje u zaglavlju tag-ova. Primetite kako su razliiti stilovi tag-ova otvoreni i zatvoreni okolo rei njihovog stila i kako heading tag-ovi okruuju ceo tekst za zaglavlje.

Unoenje Stilizovanog teksta u HTML dokumentPratite sledee korake da potvrdite style tag-ove u vaem HTML dokumentu:

Korak 1. Korak 2. Korak 3.

Ponovo otvrorite va workspace. Vratite se na va HTML dokument, fon.html , u text editor.

Pronaite re Fakultet u prvoj reenici. Promeniemo je u bold-u da je naznaimo kao vanu 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 rei. Unesite ... i ... tag-ove oko rei beogradskog univerziteta tako da ovaj deo izgleda ovako: Fakultet organizacionih nauka je visokoobrazovna institucija, lan je beogradskog univerziteta sa seditem u ulici Jove Ilia 154.

Korak 5.

Konano, koristili smo typewriter tag koji oznaava posebnu re. Iznad Delatnost fakulteta zaglavlja, unesite sledee: Delatnost fakulteta, je obazovno-nauni rad ukljuujui i srodne delatnosti. Sauvajte u text editoru i Realod-ujte u va web browser.

Rad sa listamaListe mogu oznaavati podatke ili informacije u formatu koji je lak i jednostavan za itanje. HTML kod moemo kucati u nekom tekst editoru (NotePad, TextPad, i dr.), kao i u prethodnim lekcijama.

Korak 1 Korak 2

Pokrenite tekst editor. Kod koji elite da unesete kucate u sekciji.

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

1.3 Neureene listeNeureene liste ili

tag-ovi, su one koje se pojavljuju kao podaci sa bulet oznakom ili oznakama na poetku. Bullet oznaka zavisi od posebne verzije vaeg web browser-a i fonta specifikovanog za prikazivanje normalnog WWW teksta. Evo primera neureene liste: Izgled u browser-u TIPOVI STUDIJA:

Dodiplomske Postdiplomske

A ovo je HTML format koji pravi ovakav izgled liste: TIPOVI STUDIJA:

Dodiplomske

Postdiplomske

tag oznaava poetak i kraj liste, i

oznaava svaku stavku liste.

Ureene listeUreene liste su one gde browser numerie svaku sukcesivnu listu podataka tako to poinje sa 1. Primetite jedinu promenu ul tag-a u ol tag. Evo jednog primer Izgled u browser-u SMEROVI: 1. 2. 3. 4. IT MEN UK OM

A ovo je HTML format: SMEROVI:

OM

Umetnute listeUredjene i Neuredjene liste mogu imati razliite nivoe, tj level-e; svaka e biti ubaena skladno u va web browser. Vaa glavna briga bi bila da proverite da li je svaka lista pravilno odreena i da je umetnuta lista ispravna. Moete poeti da pravite sloene sa svim ovim

tag-ovima koji se nalaze okolo, ali se potrudite da zapamtite osnovnu strukturu:

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

Ovo je prva stavka

Ovo je druga stavka

Ovo je prva stavka druge podstavke

Ovo je prva podstavka

Ovo je druga podstavka

Ovo je druga stavka druge podstavke

Ovo je treca stavka druge podstavke

Ovo je treca stavka

Umetnute listeNe samo da moete meati uredjene liste unutar uredjenih, ve moete takoe da meate i unosite razliite tipove listi. Recimo, HTML poinje da izgleda veoma runo, ali gledajte kako liste u potpunosti sadre druge liste. Npr., ova uredjena lista sadri umetnutu neureenu 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 postie ovakav efekat: Kombinovana lista

Ovo je prva stavka Ovo je druga stavka

Ovo je prva stavka druge podstavke

Ovo je prva podstavka

Ovo je druga podstavka

Ovo je druga stavka druge podstavke

Ovo je treca stavka druge podstavke

Ovo je treca stavka Pogledajte fajl u browser-u.

HTML tagovi za ubacivanje slikaInline 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: gde je filename.gif ime GIF fajl-a koji je smeten u istom direktorijumu/fajl-u gde je smeten i HTML dokument. Inline znai da e web browser prikazati sliku izmeu teksta. Tekst se odmah nastavlja iza logo slike. Da bi se slika pojavila u posebnom redu, prosto unesite paragraf tag ispred image tag-a:

Centriranje teksta i Inline grafikeSa atributom u tag-u, takoe se moe regulisati poravnavanje susednog teksta sa linijom slike. Atribut align dodat ispred tag-a moe proizvesti sledee efekte: - poravanava tekst sa gornjom ivicom slike - poravnava tekst sa sredinom slike - poravnava tekst sa donjom ivicom slike

Tekst se poravnava samo za jednu liniju... ( skupiti ili razvui WWW browser window i videti ta se deava). Postavljanje Inline Image u HTML Dokument

Korak 1 Korak 2fon.jpg

Kreirajte folder pod nazivom HTML Vebe U ovom folderu sauvajte sliku logo.jpg (desni klik, Save Picture As) i sliku U istom folderu, kreirajte HTML fajl u unesite sledei kod:

Korak 3

FAKULTET Ovo je zvanini logo predmeta na fakultetu. Fakultet datira od 1969 godine. Sauvajte fajl i pogledajte kako izgeda u browser-u.

1.4 Atributi Height (Visine) i Width (irine)Druga opcija koju mogu sadrati tag-ovi su dva atributa koja daju dimenzije slike u pikselima. Standardno, web browser e utvrditi ove dimenzije na osnovu slike koju uitava; uitavanje slike moe biti bre ukoliko se naznae ove veliine u HTML-u. Format koji sadri ovu opciju izgleda upravo ovako: gde x oznaava irinu, a y visinu slike u pikselima. Napomena: Poredak atributa unutar tag-a nije bitan. esto se zapitamo da li moemo da promenimo dimenzije slike unoenjem drugih veliina od trenutne u kojoj se slika nalazi? Odgovor na ovo pitanje je pozitivan, ali rezultati mogu biti neeljeni. Uneti vee brojeve (da bi slika bila vea) rezultat bi bio "blocky" picture. Ponekad ovo moe biti koristan efekat na slikama sa velikim povrinama obojenim punom bojom. Ukoliko se pak unesu manji brojevi ( da bi slika bila manja ) rezultat bi mogao biti u vidu iskrivljene slike. Takoe, puna veliina slike mora biti download-ovana, tako da nema prave utede 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, moe se koristiti Photoshop. Takoe se moe naznaiti i veliina Inline Image-a u dimenzijama koje su procentni deo trenutne veliine prozora browser-a, tj. prozora, tako da e se slika sama resize-ovati sa promenom, tj. proirivanjem i smanjivanjem veliine browser prozora od strane korisnika. U prethodnom primeru, izmenite kod, tako da izgleda na sledei nain: FAKULTET> Ovo je zvanini logo predmeta na fakultetu. Fakultet datira od 1969 godine.p> U browser-u pogledajte rezultate promene. Pokuajte da menjate veliinu prozora browser-a i primetite kako se veliina prve slike menja proporcionalno veliini prozora, dok je veliina druge slike fiksna, tj. ne menja se sa promenom veliine browser-a.

LinkoviLink za lokalne fajloveNajprostiji link je onaj koji otvara jo jedan HTML fajl u direktorijumu. HTML format koji ovo radi je: tekst koji odgovara linku 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 zavnog bie "hypertext" koji se pojavljuje kao podvuen i predstvalja hiperlink. Sledei koraci grade link u HTML dokumentu na lokalni fajl:

Korak 1 Korak 2 Korak 3 Korak 4 Korak 5 Korak 6

Otvoriti novi HTML document u text editor-u. U ovaj dokument ubaciti sledei kod: Ovde ste doli jer ste kliknuli na link! Sauvati dokument pod nazivom "drugi.html" u nekom folderu. U istom folderu kreirati jo jedan HTML fajl "prvi.html". U tom fajlu otkucati sledei kod:

Ovo je dokument sa linkom. Kliknite na link da predjete na drugu stranu. Link na drugu stranu

Korak 7

Sauvajte fajl i pogledajte u browser-u. Proverite da li link radi.

1.5 Link za grafikuU prethodnoj lekciji govori se o nainu prikazivanje "inline" grafike na web stranici. Sa anchor tagom takoe se moe formirati link koji prikazuje grafike fajlove. Kada je anchor link selektovan, on e sam download-ovati image fajl i prikazati sliku (image) u web browser-u. Napomena: Veina browser-a e, kao link, prikazati image fajl u web browser-u. U zavisnosti od web browser-a, i preferences/settings na kompjuteru, moe biti ponueno ili da sauva fajl ili da se selektuje aplikacija da prikae fajl. Bez obzira na izbor, ako se ode tako daleko, link image fajla je uspean. 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: tekst koji predstavlja link

gde je filename.gif ime GIF image file-a. Sada treba pratiti sledee korake kako bi se dodao link za grafiku HTML dokumentu:

Korak 1 Korak 2

Download-ujte sliku fon.jpg (Desni klik, Save Picture As). U istom folderu gde je slika, kreirati HTML fajl koji sadri sledei kod:

Ovo je dokument sa linkom na sliku. Kliknite na link da biste videli sliku u browser-u. Link na sliku

Korak 3

Sauvati fajl i pogledati u browser-u.

Link ka drugim folderimaAnchor tagovi takoe mogu da linkuju HTML dokument ili grafiki fajl u drugi folder u odnosu na dokument koji sadri anchor. Npr. u ovoj lekciji moe se sauvati sva grafika u odvojenom folderu zvanom Pictures. Dok se kreira sve vie i vie HTML fajlova, uvanje image fajlova na ovim HTML-ovima e uiniti stvar manje vie organizovanijom za korisnika:

Korak 1 Korak 2 Korak 3

Kreirati folder Pictures na istoj lokaciji gde je sauvan fajl iz prethodne vebe. Pomeriti fon.jpg fajl u novi folder. Izmeniti kod html fajla tako da red za link izgleda ovako:

link na sliku.

Korak 4

Pogledati fajl u browser-u.

Napomena: Sa HTML-om se moe narediti web browseru da otvori bilo koji dokument/grafiku koji se nalazi u folderu na niem nivou (npr. u sub-directoriju ili folderu unutar directorija/foldera koji sadri HTML fajl) korienjem "/" karaktera da se naznai promena u folderu Pictures. Ako je sve uraeno kako treba, link u reenici link na sliku bi trebalo da pozove fajl sauvan u folderu Pictures.

Anchor linkovi ka folderima vieg nivoaLinkovi koji su gore prethodno konstruisani poznati su kao "relative" linkovi, sa znaenjem da web browser moe konstruisati ceo URL koji se odnosi na trenutnu lokaciju HTML stranice i linkovati informaciju u 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 sauvan u folderu nieg (lower) nivoa od working HTML stranice. Takoe se moe konstruisati link koji je povezan sa (higher) viim nivoom foldera: return to home Svaki primer "../" URL-a na anchor linku govori web browser-u da ide na folder vieg nivoa u odnosu na tekuu stranicu; u ovom sluaju da ide dva nivo iznad i trai 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: Sada, treba reorganizovati ovu web strukturu tako da folder Pictures bude na viem nivou: Prednost ove strukture je u tome da e biti lake sauvati veliki broj slika u gornjem folderu koji moe da se deli sa drugim web stranicama. Pokuajte samostalno da kreirajte odgovarajuu strukturu foldera i da napravite link!

Anchor link ka stranici na InternetuPotpun HTML format za Anchor link ka stranici na Internetu :

Text to Activate Link gde je URL skraeno od Uniform Resource Locator, adresa Internet sajta gde korisnik treba da ode. Niz Text to Activate Link oznaava ta e se pojaviti kao hypertext u web browser-u (obino ne uvek) podvueno i u plavoj boji. Kada korisnik klikne na hypertext, web browser e ga linkovati na Internet site odreen sa URL. Treba zapamtiti da URL moe 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 sadri podatke o fakultetu.Treba pratiti sledee korake kako bi se dodali anchor linkovi na HTML dokument:

Korak 1

Promeniti fajl iz prethodne vebe tako da kod izgleda ovako:

Ovo je dokument sa linkom na sajt. Kliknite na link da biste otvorili sajt Fon-a. Link na sajt fakulteta.

Korak 2

Sauvati fajl i pogledati u browser-u.

1.6 Linkovi i adrese1.6.1 Kako rade linkovi u pretraivauHiprelinkovi se prave tako to se neki element na strani okrui kotvom, odnosno oznakom a. Atribut href, to je skraenica za hypretext reference, definie odredite linka. Tekst na kome je postavljen link se u pretraivau oznaava tako da se moe jasno razlikovati od okolnog teksta. Obino je link podvuen i obojen plavom bojom. Nakon to ste posetili adresu na koju taj link upuuje, linkovi obino postaju purpurne boje. Podrazumevano je da se slike na kojima je postavljen link prikazuju sa okvirom u istim bojama, premda mnogi web dizajneri definiu svoje boje. Kada prelazi preko linka, kursor menja oblik u aku sa kaiprstom upretim u neto, lme se ukazuje da se taj link moe kliknuti.

1.6.2 Apsolutne ili relativne putanjeURL je skraenica za universal resource locator. URL ili web adresa je u sutini pokaziva na odreeni dokument ili objekat koji se nalazi negde na Internetu, sa datom putanjom koja opisuje kako se dolazi do tog dokumenta. URL putanja moe biti apsolutna, relativna u odnosu na dokument, ili relativna u odnose na koren. Apsolutna adresa je adresa na Internetu koja sadri sve informacije koje su raunaru potrebne u vezi lokacije koja se trai. Tu spadaju informacije o tome kako se vraaju informacije, ukljuujui protokol, domen, fasciklu i ime datoteke. http://www.mfa.org/exhibitions/upcoming.htm Zato je protokol tako bitan? Svim vrstama web adresa se moe pristupiti preko apsolutnog URL-a, ukljuujui i web strane, adrese elektronske pote, FTP sajtove, itd. Protokol ukazuje na to koja vrsta resursa se trai. Relativna putanja je skraeni oblik adrese kod koje se razliti 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 tekueg 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 navie. Iza ovog sledi ime datoteke (linka sa strane mojastrana.html) : ../index.html. Ako se eli da se u hijrearhiji fascikli kree navie ili nanie za vie nivoa, onda treba navesti sva imena fascikli ili indikatore ../ vie puta, po jednom za svaki nivo.

pages/myfolder/mythirdpage.html ../../index.html Putanja relativna u odnosu na koren uspostavlja vezu izmeu 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 moete videti i u primerima koje smo dali. Zato biste koristili putanje relativne u odnosu na koren sajta? Ove putanje kasnije mogu da utede vreme, ako je potrebno da promenite organizaciju dokumenata na svom sajtu. Ako imate vesti u nekom preduzeu, koje ste postavili onlajn i ako mesene lanke prebacujete u fasciklu Archive, kada zapone novi mesec onda putanje koje se zadaju relativno u odnosu na koren sajta mogu da utede vreme koje biste proveli u prepravljanju linkova koji sada treba da budu u skladu sa novom strukturom.

1.6.3 Atribut targetKada se klikne na link, podrazumeva se da se novi dokument otvara u istom prozoru pretraivaa u kome je prethodno bio otvoren tekui dokument. Sa druge strane, HTML omoguava da zadate gde link treba da se otvori u novom prozoru pretraivaa, ili ako se radi o frejmovima, onda u odreenom frejmu. Ovo se zadaje putem opcionalnog atributa oznake anchor , a to je target. Ako elite da se novi dokument otvori u posebnom prozoru pretraivaa, onda atribut target treba da podesite na _blank.

Heksadecimalne oznake i bojeU vaem web browseru na raspolaganju vam je pregrt boja kojima moete 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) dae belu a minimalne vrednosti (R=0, G=0, B=0) prikazae crnu boju. Sve ostale boje su zadate ureenom 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 lake da njima barataju. Pa recimo u primeru "6699FF", "66" oznaava vrednost crvene, "99" vrednost zelene, a "FF" vrednost plave. Evo nekoliko primera (tabela 3):

Table 3 Boje u heksadecimalnom sistemu

Heksadecimalno FFCCCC 33FF66 663300 000077 EEEEEE 444444

Heksadecimalno 3300FF AA0000 9900FF FFFF00 888888 000000

U svakom sluaju se ne sekirajte zbog numerikih konverzija iz dekadnog u heksadecimalni sistem, jer postoji mnotvo alatki koje vam omoguavaju da samo klikom na eljenu boju, dobijete ispisanu njenu heksadecimalnu reprezentaciju. A i sami web browseri su dovoljno pametni da prepoznaju skraenice za sledeih 16 boja. Boja Ime boje aqua blue gray lime navy purple silver white Boja Ime boje black fuchsia green maroon olive red teal yellow

Jednobojne pozadine (Solid Color Backgrounds)Za FON Web, prva stvar koja je raena je dodavanje color background-a na index.html fajl. HTML format za dodavanje solid color background-a modifikuje tag-a na sledei nain: gde je XXXXXX heksadecimalna reprezentacija (oznaena sa # znakom ispred) eljene boje.

Korak 1 Korak 2

Otvoriti fon.html fajl u text editor-u. Pronai tag i promeniti ga u:

Korak 3

Save i Load HTML file u web browser-u

Ako je sve uraeno kako treba, browser bi trebalo da promeni pozadinu u jednobojnu crnu boju. Ali, moda sada ne moete da vidite tekst! Zato? Zbog toga to je default color za text je takoe crna, tako da sada imamo crni tekst na crnoj pozadini! Na sreu, dodatnim komandama, body tagu moemo dodati boju za tekst i hypertext: gde XXXXXX vrednosti oznaavaju sledee: 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 oznaava da je ve pregledan (default je purple)

Izmenom vrednosti ovih vrednosti u body tagu, moemo dobiti: NAPOMENA: redosled oznaka u tagu nije relevantan Sada treba modifikovati tag-ove u svim HTML fajlovima (to moete uiniti lako koristei copy i paste malopreanjeg primera, na novi tag).

Teksturne pozadineBoje osveavaju izgled web stranica, ali dodavanjem tekstura, koristei male (GIF ili JPEG) sliice, moete napraviti i lepi efekat. Njih e web browser kopiranjem razvui na celu pozadinu. Obratite panju na: itljivost: mnoge pozadinske teksture e vie odmoi nego pomoi itaocu. Pokuajte da postavite teksture koje su svetlije (uz taman tekst) ili tamne (uz svetao tekst), olakavajui itanje na taj nain jaim kontrastom. Veliinu: Ne postavljajte slike velikih veliina, jer su konekcije kod nas jo uvek spore, pa e drugima biti potrebno dosta vremena da stranice uopte i otvore.

HTML format za dodavanje pozadine kroz sliicu je: gde paper.gif predstavlja naziv samog fajla slike. Potom u tag dodajte i dobiete crveni tekst na sliici koja e biti iskopirana na celom backgroundu web stranice (slika 3).

Slika 10 Izgled tekstualne pozadine

Primer: Iz materijala sa sajta skinite fajl paper.gif i iskopirajte je u folder boja koji ste predhodno napravili.

Korak 1

Korak 2 U tekst editoru kreirajte primer web stranice u folderu boja, unoenjem koda, eljenog teksta i odgovarajueg linka do slike Primer UNESITE ZELJENI TEKST KOJI CE BITI PRIKAZAN NA MULTIPLIKOVANOJ POZADINSKOJ SLICI

Korak 3 Korak 4rezultatom.

Fajl snimite sa html ekstenzijom. Sada kreiranu web stranicu otvorite u browseru i pogledajte da li ste zadovoljni

META tagoviSintaksa HTML-a dozvoljava korienje meta informacija unutar web stranice i to u onom delu web stranice koji browser ne prikazuje. Postoje razliiti tipovi meta tagova, ali u okviru ovih lekcija razmotriemo samo neke od najkorisnijih. Meta tagovi se u HTML dokumentu smetaju u zaglavlje dokumenta, tj. izmeu tagova i .

1.7 Meta tag stranicu

automatski

prelazak

Prvi tip meta tagova omoguava kreiranje HTML web stranice koja e ukoliko ne bude uitana posle tano odreenog vremenskog perioda automatski prei na neku drugu web stranicu. Ovo se koristi iz vie razloga:

U sluaju pomeranja stranice. Ukoliko doe do pomeranja stranice zbog redizajna sajta ili promene servera, kao i u sluaju ukidanja stranice, potrebno je preusmeriti poziv stranice na novi URL. Evo nekoliko primera:

Swiss Web Knife M2C Math Software Evaluations

U sluaju kreiranja serije web stranica koje treba sa se menjaju u odreenim vremenskim intervalima (kao Slide Show). U sluaju web sajtova koji imaju uvodnu stranicu (intro)

Sintaksa ovog tipa meta tagova izgleda na sledei nain: My page title gde x predstavlja vreme koliko e ova stranica biti prikazana (izraeno u sekundama), a URL je adresa na koju e se izvriti preusmeravanje posle isteka tog vremena. Primer :

Korak 1 Pokrenite tekst editor i kreirajte novi HTML fajl. Napravite sledee zaglavlje sa odgovarajuim meta tagovima. Korak 2Prepravite fajl tako da ima sledei kod:

Untitled Document ekaj!!!

Korak 3

Sauvajte stranicu i pogledajte u browser-u kako izgleda.

Meta tagovi za opisMeta tagovi vam omoguavaju da postavite dodatne informacije na vau web stranicu koje e omoguiti da se ona lake pronae na Internetu. Krajnje pojednostavljeno, web pretraivai (Google, Altavista, Yahoo, itd.) rade po sledeem principu: svaki od pretraivaa sadri bazu podataka u kojoj su podaci o web stranicama. Na osnovu kriterijuma pretrage zadatog od strane korisnika, pretrauje se baza podataka i prikazju rezultati. Rezultat pretrage su web stranice koje sadre traeni kriterijum. Na veini ovih web stranica traeni kriterijum se nalazi na poetku

sadraja stranice, tako da osim ako je sam poetak stranice veoma deskriptivan, korisnik nee dobiti pravu sliku onoga to je na stranci. Sintaksa meta taga za dodavanje opisa stranici izgleda ovako: Maksimalna duina meta tagova iznosi 1024 karaktera, poev od prvog < i zakljuno sa poslednjim > u meta tagu, to znai da uneti opisi treba da budu kratki i precizni. Jo jedan koristan meta tag koji e olakati pronalaenje web stranice preko pretraivaa je omoguava dodavanje kljunih rei (keywords) koje opisuju stranicu. Sintaksa ovog taga izgleda ovako:

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

HTML kod

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

Izgled u browser-u

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 moe sadrati bilo koji tip HTML tag-a -- headers, styled text, hypertext links, inline graphics itd. U ovom tag-u moe se koristiti nekoliko atributa kojima se podeava,( Alignment )tj. centrira ili regulie 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) 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 sredinjem delu elije centrira sve (ovo je po default setting) elemente u centralnom delu elijeOvi atributi se mogu koristiti i kombinovano: Ovaj HTMLe prikazati eliju sa podacima smetenim u levom donjem uglu elije. Da bi ste odradili ovu vezbu sledite sledee korake: HTML kod moemo kucati u nekom tekst editoru (NotePad, TextPad, i dr.), kao i u prethodnim lekcijama.

Korak 1 Korak 2 Korak 3 Korak 4

Pokrenite tekst editor. Naprevite osnovnu konstrukciju za html stranicu kao do sada. Kod koji elite da unesete kucate u sekciji koda kao u Tabeli 1.

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

Redovi i KoloneTabela koja je ispod prikazana je prosta i u obliku kocke tri reda sa tri kolone. ta se sve moe dobiti ukoliko se koriste colspan i rowspan atributi u ... tag-ovima (tabela

Table 6 Korienje colspan i rowspan atributa

HTML kod Red 1 kolona 1 Red 1 kolona 2-3

Rezultat u browser-u ** Obratiti panju na atribut druge elije u prvom redu (obuhvata) spans 2 kolone. Tekst je podeen tako da se nalazi u centru elije.

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 I ovaj primer moete da odradite na isti nain kao i prethodni ili samo da modifikujete odreene tagove iz prethodnog primera. Red 1 kolona 1 Red 3 kolona 1 Red 1 kolona 2-3 Red 3 kolona 3 Red 2 kolona 1 Red 2 kolona 2 Red 2 kolona 3

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

Korak 1 Korak 2 Korak 3

Pokrenite tekst editor. Napravite osnovnu konstrukciju stranice za HTML. Izmeu body tagova unesite sledeci kod.

Odsek Prosecna ocena Broj studenata * Informacioni sistemi i tehnologije 7.68 302 Menadment 7.9 284 Upravljanje kvalitetom 8.62 54 Operacioni menadment 8.32 >18 & 18 & 18 &

Documents

HTML Skripta