html ii godina skripta - university of...

Hadži-Đerina 2, tel.011 / 244 77 81 Cvijićeva 98, tel.011 / 275 42 23

www.systempro.rs e-mail: [email protected]

strana 2

SADRŽAJ

1. HTML - osnove ......................................................................... 5

1.1 Uvod ................................................................................. 5 1.2 Šta je HTML? ....................................................................... 5 1.3 Šta je sve potrebno da bismo napravili HTML stranicu? ..................... 6

2. HTML tagovi ............................................................................ 7

2.1 HEAD, TITLE i META tagovi ....................................................... 8 2.1 BODY tag ............................................................................ 9 2.2 Komentar ......................................................................... 10 2.3 Linkovi - A tag ................................................................... 11 2.4 IMG tag ............................................................................ 13 2.5 BR tag ............................................................................. 15 2.6 Specijalni znaci .................................................................. 16 2.7 Naslovi – tagovi H1-H6 .......................................................... 17 2.8 Paragraf (pasus) i odeljak – P i DIV tag ...................................... 17 2.9 Tag FONT ......................................................................... 18 2.10 B tag ............................................................................. 20 2.11 I tag .............................................................................. 20 2.12 U tag ............................................................................. 20 2.13 Sub i sup tag-ovi ............................................................... 20

3. Tabele ................................................................................ 22

3.1 TABLE tag ......................................................................... 23 3.2 TR tag ............................................................................. 24 3.3 TD tag ............................................................................. 24 3.4 TH tag ............................................................................. 25 3.5 Primeri tabela ................................................................... 25

4. Liste .................................................................................. 32

4.1 Ol tag ........................................................................... 32 4.2 Ul tag ........................................................................... 32 4.3 Li tag ............................................................................ 32 4.4 Primeri sortiranih i nesortiranih lista ...................................... 33

strana 3



strana 4

strana 5

1. HTML - osnove

1.1 Uvod Vrlo često smo u svakodnevnom životu u kontaktu sa Internetom, bilo da ga direktno koristimo ili posredno dobijamo informacije preko njega. Sa pojavom povezivanja računara u takozvane mreže pojavila se i potreba za prikazivanjem i razmenjivanjem raznih informacija. Sa razvojem Interneta došlo je do pojave nove vrste dokumenata - hiperteksta. To je tekst koji sadrži veze ili linkove ka drugim dokumentima ili na samog sebe. Preciznije, hipertekst je skup stranica u obliku datoteka, međusobno povezanih linkovima koje su umetnute u stranice. Na ove linkove se može kliknuti. Za razliku od običnog teksta, koji se čita linearno (sleva na desno, odozgo naniže), hipertekst se čita prateći hiper-veze u tekstu, dakle, ne nužno na linearan način. Pored hiperteksta, sa razvojem mreža pojavile su se potrebe za prenošenjem slike, zvuka i generalno multimedijalnih sadržaja.

Protokol koji obezbeđuje prenos stranica i sadržaja (slika i zvuka) je HTTP (HyperText Transfer Protocol) i najčešće koristi port 80 ili 8080 (mogu se koristiti i drugi portovi). Računari koji obezbeđuju dostupnost internet stranica se zovu serveri i oni su najčešće 24 časa povezani u internet mrežu. Na njima postoji program koji nama na zahtev čitača stranica (browser) prosleđuje traženi sadržaj. Taj program se zove Web Server.

1.2 Šta je HTML?

HTML (HyperText Markup Language) je jezik koji se koristi za izradu statičkih web stranica (dokumenata). Već decenijama se pri projektovanju rešenja za Web vrši oslanjanje na njega kao opštu podlogu jer je jednostavno koncipiran i vrlo praktičan, tako da svi browseri mogu da ga interpretiraju. HTML je jezik pomoću koga se kombinuju slike, tekst, veze između dokumenata i zvučni zapisi u lako dostupnu formu, a sadržaj internet stranica se uglavnom prenosi u kodu HTML-a. Dokumenti na web-u se pretežno nalaze u HTML obliku, ili u obliku PHP, ASP, JSP dinamičkih web stranica u kojima se takođe koristi HTML.

Uobičajeno je da se HTML datoteke završavaju sa dodatkom na ime datoteke ".htm" ili ".html". Najčešće ćete nailaziti na dadoteke sa upravo ovakvim dodatkom na ime. To se sve može drugačije podesiti na web serveru, ali najčešće se upotrebljava upravo ova konvencija za zadavanje dodatka imena datoteke. Slike koje se često koriste u okviru HTML dokumenata su sa dodacima na ime datoteke ".gif" i ".jpg", međutim, u poslednje vreme sve se više koristi format ".png", jer su dva predhodna formata zvanično licencirana, a png je još uvek besplatan. O samim formatima neće biti puno reči, ali bi



strana 6

trebalo napomenuti da konekcije korisnika ka internetu variraju po brzini, pa je veličina slika (mesto na disku koje zauzimaju) jako bitna stavka kod izrade HTML dokumenta.

Za razvoj HTML-a zadužen je W3C (World Wide Consortium), a u novijim varijantama HTML-a teži se razdvajanju sadržaja dokumenta od njegove prezentacije, i to kroz upotrebu CSS-a (Cascading Style Sheets).

HTML je pasivan jezik, bez mogućnosti programiranja. Međutim, u kombinaciji sa jezicima kao što su JavaScript, PHP, ASP i drugi, web stranica se može napraviti tako da nema formu običnog ili čak multimedijalnog dokumenta, već prave web aplikacije u kojoj se izvršavaju naredbe, čitaju podaci iz baze podataka, vrši interaktivna komunikacija sa korisnikom itd. Kod bilo kojeg od navedenih jezika može biti ugrađen u HTML stranicu, ili činiti posebnu celinu.

Za napredniji izgled teksta koristi se Cascading Style Sheets (CSS), čijom upotrebom je moguće potpuno razdvojiti sadržaj stranice (tekst, slike i ostalo) od načina njegovog prikazivanja (npr. raspored ili veličina pojedinih elemenata). Pomoću njega, moguća je promena izgleda dokumenta bez pristupa sadržaju, na izuzetno pregledan i jednostavan način. Dalje, za dodavanje živosti i funkcionalnosti internet stranici koriste se tzv. skriptni jezici od kojih je najčešće u upotrebi Java Script. Još veća interaktivnost sa korisnikom kao i atraktivnost u izgledu postiže se koriščenjem Flash-a. Flash je dodao animaciju i mogućnost pokretanja objekata na samoj stranici. Postoje i druge tehnike i jezici za prikazivanje internet stranica, ali mi ćemo se zadržati na HTML-u. Osnove internet programiranja, realno, sve više postaju “bukvar” za rad na računaru, a kad se jednom savladaju, njihovo poznavanje može doneti velike prednosti.

1.3 Šta je sve potrebno da bismo napravili HTML stranicu? Sve što je potrebno praktično već postoji na računaru:

– bilo koji tekst editor (npr. Notepad) – Web browser (npr. Internet Explorer, Firefox, Opera, Google

Chrome, Safari).

Poželjno je da nabavite više web browser-a kao biste izgled vaše prezentacije proverili u njima (različiti browser-i različito tumače neke HTML tagove).

strana 7

2. HTML tagovi HTML komande se pišu u vidu tzv. tag-ova. Verovatno ovu reč znate sa Facebook-a – kada označavate ljude na nekoj fotografiji, vi ih “tagujete” ☺ U HTML-u, tag nam služi da označi kako će nešto biti prikazano. Svaki tag govori čitaču stranica šta treba da uradi sa tekstom, slikom ili drugom vrstom sadržaja, odnosno na koji način da ih prikaže korisniku u browseru. Tagovi se pišu između znakova < i >. Sve što se ne nalazi između < i > prikazuje se onako kako je napisano. HTML tagovi su "case insensitive" tj. svejedno je da li ih pišete malim ili velikim slovima.

Postoje dva tipa tag-ova:

– početni tag – označava se sa <naziv_taga> – završni tag – označava se sa </naziv_taga>

Tagovi se uglavnom pojavljuju u paru (početni i završni tag). Dejstvo tag-a se proteže od početnog do završnog tag-a.Postoje tagovi kod kojih ne morate da stavljate zavrsni tag , npr. tag <br> koji služi za prelazak u novi red ili tag <img> koji služi za ubacivanje slike u HTML stranicu. U okviru taga se nalaze opcije koje preciznije određuju sam tag, tj. kako čitač stranica tu informaciju treba da predstavi na ekranu. Ova objašnjenja se nazivaju atributi i služe da detaljnije opišu dati tag. Posle svakog atributa se stavlja znak jednakosti koji služi za dodelu vrednosti datom atributu, dok se vrednost atributa obavezno stavlja između dvostrukih navodnika. Npr:

<center> Tekst </center> <br> <body bgcolor="yellow"> Neki tekst! </body> <font face="Comic Sans MS"> Vaš tekst </font>

Minimalna struktura HTML dokumenta obuhvata tagove:

<HTML>, </HTML> - zagrade HTML-teksta; <HEAD>, </HEAD> - zagrade zaglavlja, sadrži meta-definicije HTML-dokumenta; <TITLE>, </TITLE> - zagrade za naziv HTML-dokumenta i <BODY>, </BODY> - zagrade teksta obeleženog dokumenta. Svaki HTML dokument bi obavezno trebalo da sadrži dva dela: zaglavlje (engl. head) i telo (engl. body).



strana 8

2.1 HEAD, TITLE i META tagovi Zaglavlje se odvaja tagovima <head> i </head. Sve ono sto se napiše u zaglavlju dokumenta neće se prikazati u prozoru browsera već obično služi samo da pruži neke informacije o stranici kao što su naslov stranice, "meta" tag-ovi kao i stilovi i skripte.

Unutar TITLE taga upisujete naslov stranice, i on će se prikazati na naslovnoj liniji vašeg browsera kao i odgovarajućeg taba unutar browsera. <title>Moja prva stranica</title>

META tagovi služe da detaljnije opišu stranicu, da istaknu ključne reči (upotrebljava se od strane nekih pretraživača internet stranica), da daju informacije o autoru i slično. Oni se još koriste da bi korisnici mogli videti naša slova (š, č, ć, đ, ž) ili da bi videli ćirilicu. Primer:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> Ovo je veoma važan red zbog atributa charset. Vrlo često ćete imati prilike da radite u nekim programima za pravljenje sajtova, koji će vam inicijalno napraviti strukturu sa drugačijim meta tagom za prepoznavanje tastature. Ako želite da koristite naša slova morate taj red obrisati a ovaj dodati. Ukoliko želite da koristite ćirilicu, sve što treba je da u gornjem redu vrednost 1250 zamenite sa 1251. Naravno, u tom slučaju i tastaturu na računaru morate da prebacite na srpsku latiničnu (hrvatsku, slovenačku) odnosno na srpsku ćiriličnu. <meta name="Keywords" content=" skola, programiranje, kursevi, internet, html "> <meta name="Description" content="Prezentacija Racunskog centra System Pro"> <meta name="Author" content="SystemPro, [email protected]"> U ova tri reda smeštate dve takođe važne informacije: opis same stranice (description), ključne reči (keywords) i podatke o autoru stranice (author). Ono što napišete na ovom mestu se neće videti u samom browser-u, ali će olakšati pronalaženje vašeg sajta preko internet pretraživača i u nekoj meri doprineti njegovoj boljoj posećenosti.

strana 9

2.1 BODY tag Sve ono što je napisano između tagova <body> i </body> predstavlja telo dokumenta pojaviće se kao sadržaj prezentacije u prozoru browsera.

Izgled stranice: <html> <head> <title> ovde je naziv prezentacije </title> </head> <body> ovde se unosi sve ono sto zelite da se vidi u prezentaciji </body> </html> Body tag ima nekoliko atributa koje se mogu navesti unutar njega. To su:

• alink • text • vlink • link

Upotrebom ova četiri atributa moguće je podesiti boje aktivnog linka (link koji smo pozvali i čekamo da se učita), boju teksta u okviru tela HTML dokumenta, boju posećenog linka i boju linka pre njegovog pozivanja. U slučaju da ne stavimo nikakve vrednosti ovih atributa korisnik će videti boje koje su automatski podešene na njegovom browseru.

• background • bgcolor

Ova dva atibuta nam omogućavaju da definišemo pozadinu internet stranice. Prvi atribut nam omogućava da učitamo pozadinsku sliku. U tom slučaju navodimo putanju do slike (apsolutno ili relativno, pogledati detaljnije objašnjenje pod anchor tag-om). Pozadine (eng. background) se mogu pronaći u raznim kolekcijama WEB grafike širom interneta a mogu se i "ukrasti" sa neke web stranice(kliknite desnim dugmetom miša na bilo koji deo pozadine te stranice i iz priručnog menija koji se pojavi odaberite opciju Save Background As). Atribut bgcolor nam omogućava da postavimo određenu boju pozadine. Može se navesti jedno od ponuđenih imena boja, ili navesti tačna boja u hex-a zapisu.



strana 10

• bottommargin • leftmargin • marginheight • marginwidth • rightmargin • topmargin

Navedeni atributi služe za podešavanje margina dokumenta. Merenje se vrši od levog gornjeg ugla dela ekrana u kome se internet stranica prikazuje.

Vežbanje: Iako će to biti kasnije detaljno rađeno, probajte da podešavate pozadinsku boju ili pozadinsku sliku sajta, u okviru body taga. <BODY BGCOLOR="#FFFFFF"> neki kratak tekst </BODY> <BODY BACKGROUND="slicica.gif"> neki kratak tekst </BODY> ,gde se slika nalazi na istom mestu gde i sam sajt ili se ispred njenog imena nalazi putanja do nje. <BODY BGCOLOR="#A067FE"> Ovo <U> je </U> neki <I>kratak</I> i neobican<B>tekst</B> </BODY>

Očigledno je da tag <U> znači podvučen, tag <B> podebljan, a tag <I> iskošen tekst.

2.2 Komentar Komentar u HTML dokumentima se ne prikazije na samom dokumentu u korisničkom prozoru, ali olakšava snalaženje unutar HTML datoteke za dizajnere, programere i one koji će eventualno nešto menjati u samoj datoteci. Kod za komentar je:



U okviru komentara može se čak pisati i više redova. Jako je bitno stavljati komentare za lakše snalaženje u velikim kodovima.

strana 11

2.3 Linkovi - A tag Jedan od najbitnijih tag-ova svih HTML datoteka i internet stranica je link. Namena linka je da poveže dve internet stranice, tj da klikom na link posetilac sa trenutne stranice pređe na neku drugu stranicu. Ta druga stranica može biti u okviru istog sajta, a može biti i na nekom potpuno drugom sajtu. Osnovni izgled ovog tag-a je:

<a href="druga.html">Druga strana</a>

U navodnicima u okviru A taga navedeno je ime (kratak opis) stranice koja će se otvoriti ukoliko posetilac klikne na njega. U konkretno ovom primeru otvoriće se internet stranica pod nazivom druga.html. To bi otprilike izgledalo kao na sledećoj slici.

Kada se mišem dođe iznad teksta "druga strana" na samoj stranici kursor miša se menja – umesto uobičajene strelice prikazaće se ručica sa ispravljenim kažiprstom. Klikom na to mesto učitaće se druga stranica.

Najbitniji atributi koji se mogu dodati anchor tag-u su sledeći:

• href

Služi za zadavanje adrese na koju link vodi. Ovaj atribut je obavezan, tj. bez njega ceo tag nema smisla (zamislite putokaz bez ispisanih naziva gradova). Adresa se može zadati na dva načina: apsolutno i relativno. Apsolutna adresa se zadaje kompletnom putanjom do druge stranice, npr. "http://www.systempro.co.rs/druga.html". Ovime se služimo onda kada druga stranica nije na našem sajtu već na nekom drugom (tuđem) sajtu. Pisanje



strana 12

“http://” ispred “www” je obavezno, i ukoliko ovo izostavite dolazi do greške! Relativna adresa se koristi onda kada je stranica u okviru istog sajta pa nije potrebno navoditi celu adresu već samo jedan njen deo. Međutim, ovde se mora voditi računa o lokaciji same stranice u odnosu na lokaciju stranice iz koje se link poziva. Ukoliko se stranice “prva.html” i “druga.html” nalaze u istom folderu, u linku na prvoj stranici je za vrednost atributa href dovoljno napisati samo “druga.html”.

<a href="druga.html">Druga strana</a>

Naravno, ove dve stranice se ne moraju nalaziti u istom folderu, ali u tom slučaju moramo uneti i informaciju o tome jer vaš browser neće umeti sam da pronađe tu drugu stranicu. Za primer sa slike gde se u "www" direktorijumu nalazi "prva.html" internet stranica, a u direktorijumu "neki_dir" nalazi datoteka "druga.html" kod bi bio sledeći:

<a href="neki_dir/druga.html">Druga strana</a>

Ako bismo želeli da na drugoj stranici stavimo link na prvu, mogli bismo to uraditi sledećim kodom:

<a href="../prva.html">Prva strana</a>

Dakle, ako je druga stranica u folderu ispod trenutnog, navodimo ime foldera pa zatim znak "/" i naziv te druge stranice. U obrnutom slučaju, kada je stranica u folderu iznad, navodimo "../" pa onda i naziv te druge stranice.

• target

"Target" atribut se koristi onda kada hoćemo da preciziramo gde želimo da se pozvana stranica otvori. Pozvana stranica se može otvoriti u samom prozoru iz koga je pozvana ili u praznom (novom) prozoru. Pod apostrofima se u tim slučajevima piše: "_self" (da bi se link otvorio u istom prozoru) ili “_blank” (da bi se otvorio u novom prozoru, odnosno tab-u).

strana 13

2.4 IMG tag Slika koja se prikazuje u okviru HTML stranice može da se prikaže pomoću proizvoljnog grafičkog formata. Ipak najčešće se koriste formati JPEG (ili JPG) i GIF . Razlog je veličina slike kao dokumenta i teškoće pri učitavanju. Ova dva formata koriste efikasne metode kompresije i na taj način se povećava brzina učitavanja u browser-u korisnika.

U JPEG formatu se čuvaju kvalitetnije slike, jer ovaj format podržava 16 miliona boja, a fajlovi su efikasno komprimovani, tako da se slike relativno brzo učitavaju. Sa druge strane GIF format ima samo 256 boja, ali on ima tu prednost da mu se može zadati transparentnost i da se moze animirati. Za postavljanje slika na našu stranicu služi nam img tag. Kao što je već jednom pomenuto, mora se voditi računa o tome da se stranica ne zatrpa sa slikama da se ne bi korisnik koji pokušava da učita vašu stranicu posle desetina sekundi okrene i ode sa vaše prezentacije. Ako se želi na nekoj stranici prikazati više slika (npr. foto album) najbolje rešenje je da se naprave manje slike i da se klikom na manju sliku omogući učitavanje prave slike, ili u zasebnom ili u istom prozoru. Moguće je i napraviti od same slike vezu do drugog dokumenta. To se radi tako što se između a tag-a definiše slika sa img tag-om. U okviru img tag-a postoje sledeće opcije:

• src

Ovaj atribut je obavezan jer definiše koji je to fajl koji sadrži sliku. U navodnicima se navodi putanja do same. Najčešće početničke greške koje se javljaju kod imena slika je taj da web serveri su često na linux operativnom sistemu koji pravi razliku između malih i velikih slova. Zbog toga se mora voditi računa o pravom imenu i trebalo bi izbegavati prazan karakter u imenima slika. Npr: <img src="osam.gif">

• width • height



strana 14

Ovim atributima se postavljaju širina i visina slike na ekranu. Za slučaj da su prava širina ili visina slike različita od zadate može se desiti da se slika na ekranu deformiše i da ne izgleda kao što u stvarnosti izgleda. Jedinica mere u kojima se zadaje vrednost je pixel. To je veličina najmanje tačke koju može ekran da prikaže. Mora se voditi računa da slika koja je na nekom monitoru zauzima ceo ekran, na drugom monitoru može biti prikazana na delu ekrana, a na trećem se može videti samo deo slike.

• border

Veličina granice koja se iscrtava oko same slike. Najčešća vrednost je "0" jer najčešće ne želimo da oko slike postoji bilo kakva dodatna linija. U slučaju da želimo granicu oko naše slike možemo postaviti neku drugu vrednost. Jedinice mere su opet pixeli.

• alt

Tekst koji se navodi u ovoj opiciji služi da u slučaju ne mogućnosti prikaza slike (bilo da je korisnik podesio opciju da se slike ne učitavaju, bilo da njegov program ne podržava tu opciju, ili je slika sa našeg servera obrisana, ili je promenjeno ime slike) bude ispisan na ekran na mestu gde bi slika trebalo da bude. Npr: <img src="osam.gif" alt=“broj osam“> • align

Ova opcija podešava poravnanje slike u odnosu na sam tekst.

• hspace • vspace

Pomoću ove dve opcije može se podesiti rastojanje od teksta po horizontali odnosno vertikali. Jednica mere je i u ovom (kao i u većini slučajeva) slučaju pixel.

Primer HTML koda koji prikazuje jednu sliku i izgled stranice (slika 3.4.):

<html> <head> <title>Test</title> </head> <body> <img src="images/aponcom.gif" width="151" height="37" border="0" alt="apon"> </body> </html>

strana 15

Vežbanje: Pronađite neku sliku u Vašem kompjuteru, ubacite je u Vašu internet stranu, i pokušajte da joj menjate parametre width i height.

Podsećamo, oko slike-linka često možete dobiti ružnu plavu liniju. Oslobodićete je se ako podesite atribut border na vrednost 0.

2.5 BR tag Ako napišete neki tekst u HTML dokumentu, bez obzira što ste pritisnuli taster "enter", na ekranu nećete videti novi red. Da bi ste naterali HTML datoteku da prikaže novi red kada vi želite morate dodati br tag. Ovo je još jedan tag koji nema završni tag. Primer izgleda dela HTML koda u prvom i drugom slučaju možete videti na slici.

HTML primer koda 1 <body> Ovo je prvi red Ovo nije drugi red </body>

HTML primer koda 2 <body> Ovo je prvi red<br> Ovo je drugi red </body>



strana 16

2.6 Specijalni znaci Znaci kao što su razmak, znaci navoda, veće od, manje od, oznake valuta i drugi se takođe mogu koristiti u HTML kodu. Da bi ovi znaci bili prikazani na ekranu koristi se poseban način njihovog predstavljanja u kodu. Pregled neki specijalnih znakova je dat u sledećој tabeli: Ime karaktera Numerički kod HTML ime Znak Znak navoda " " " Znak “i” & & & Manje od < < < Veće od > > > Razmak Oznaka za euro € € € Oznaka za cent ¢ ¢ ¢ Oznaka za funtu £ £ £ Oznaka za jen ¥ ¥ ¥ Vertikalna crta ¦ ¦ | Trademark ™ ™ ™ Copyright © © © Left angle quote « « « Oznaka brenda ® ® ® Stepen (npr.Celzijusa) ° ° ° Plus/minus ± ± ± “Na kvadrat” ² ² ² “Na treći” ³ ³ ³ Mikro µ µ µ Tačka po sredini · · · Jedna četvrtina ¼ ¼ ¼ Jedna polovina ½ ½ ½ Tri četvrtine ¾ ¾ ¾

strana 17

2.7 Naslovi – tagovi H1-H6 Naslovi u nekom tekstu se razlikuju po važnosti, što se prikazuje nivoima na kojima se nalaze. U HTML-u, naslovi se mogu prikazati na 6 nivoa koji su označeni tagovima h1, h2, h3, h4, h5, h6. Svi ovi tagovi imaju početni i završni deo (npr <h2>Naslov</h2>) a pravilo za njihovu upotrebu je sledeće: što je naslov većeg nivoa (tj. što je manji broj pored slova h), to će naslov biti istaknutiji. Većina čitača prikazuje naslove na isti način: fontom Times New Roman, boldovano, sa veličinom teksta 24, 18, 14, 12, 10 i 8 piksela, respektivno. Takođe se svakom naslovu automatski dodeljuje prazan prostor iznad i ispod njega (margina), čija veličina zavisi od nivoa samog naslova. Naravno, sve ove osobine možete menjati po želji upotrebom odgovarajućih atributa.

2.8 Paragraf (pasus) i odeljak – P i DIV tag Paragraf (ili pasus) je osnovna logička celine u tekstu. Za kreiranje novog paragrafa koristi se tag P. I ovaj tag takođe ima i početni i završni deo.

Primer:

<p> HTML (HyperText Markup Language) je veoma jednostavan jezik koji služi za kreiranje Web stranica. Za oznacavanje izgleda teksta, slika i tabela u njemu se koriste tagovi i atributi.</p> <p> HTML stranice imaju ekstenziju .html ili .htm, a nalaze se u određenom direktorijumu servera vezanog na Internet, što ih čini dostupnim na web-u. </p>

Ono što razlikuje tekst koji se nalazi unutar <p></p> od nekog drugog teksta koji nije unutar ovog taga je to što se ispod njega automatski stvara prazan prostor u visini jednog reda teksta (donja margina), tj. isti efekat kao da ste sami na kraj dodali još dva BR taga. Iako razlika na prvi pogled i nije baš velika, jako je preporučljivo da svaki iole duži tekst na vašoj HTML stranici bude izdeljen u paragrafe.

Tag DIV je sličan tagu P, osim što se ispod njega ne stvara dodatni prazan prostor već se samo prelazi u novi red (isto kao da ste na kraju teksta dopisali jedan BT tag). Razlika je i ta što je unutar jednog DIV taga moguće definisati proizvoljan broj novih ugnježđenih DIV tagova, što ga čini mnogo zgodnijim za upotrebu u složenijim stranicama i zbog toga se u modernom web dizajnu koristi najčešće od svih tagova. Više o ovom tagu i njegovim atributima ćete učiti na časovima CSS-a.



strana 18

2.9 Tag FONT

Font tag je jedan od osnovnih tag-ova za rad sa tekstom. Koristi se onda kada neku osobinu teksta (boju, veličinu ili vrsta fonta) želimo da primenimo na samo nekoliko slova, reči ili rečenica u okviru neke šire celine, ali tako da se zbog te promene ne stvara prazan prostor iznad ili ispod tog dela teksta. Upotrebom atributa može se podesiti boja, veličina i font teksta, dok bez njih sam FONT tag nema nikakvog

efekta. Inače ovaj tag sve više izlazi iz upotrebe.

Ako se želi da neki tekst bude ispisan na primer "Comic Sans MS" fontom onda treba navesti sledeći kod:

<font face="Comic Sans MS"> Ovde dodje vas tekst. </font> i dobija se rezultat

Ovde dodje vas tekst. Ako se koriste fontovi koji nisu šire rasprostranjeni, bilo dobro navesti i nekoliko alternativnih fontova, jedan za drugim, odvojenih zarezom. Ako posetilac stranice na svom računaru nema instaliran prvi font sa liste, on će koristiti sledeći sa liste itd.

<font face="Comic Sans MS,Arial,Courier"> Evo primera nekoliko popularnih fontova koje možete koristiti na svojim stranicama:

Verdana Arial

Courier Times New Roman Comic Sans MS

Primer: <html> <head> <title>Test</title> </head> <body> <font face="Arial" color="Aqua" size="+1">Tekst sa definicijom</font> i tekst bez definicije </body> </html>

strana 19

Pored boje i načina ispisivanja teksta, u okviru stranice može se upravljati i veličinom slova. Za ove potrebe koristi se size atribut unutar FONT taga. HTML razlikuje 7 veličina slova koje nose vrednosti od 1 do 7. Podrazumevana veličina je 3. Razmera slova je data:

size 1, size 2, size 3, size 4, size 5, size 6, size 7 Primer HTML stranice:

Poslednja osobina koja se može menjati kod FONT taga je boja slova u okviru HTML stranice. Za te potrebe koristi se atribut color. Za ovaj atribut važi isto pravilo kao i kod definisanja boja <body> tagom. Dakle, ako se želi dobiti tekst ispisan crvenom bojom, kod je sledeći:



strana 20

<font color="#ff0000"> Ovde ide vas tekst. </font>

Boja slova se može definisati i pomoću HEX koda, na primer "#FCB137". Za ovaj kod je karakteristično da se prvo navodi znak # a zatim 6 znakova, od kojih svaki može biti cifra (0 – 9) ili slovo (A – F). Svaka kombinacija od šest ovakvih znakova precizno definiše jednu boju. Npr. #FFFFFF označava belu boju dok #000000 označava crnu. Bilo koji drugi znak koji se ponavlja šest puta definiše neku nijansu sive boje. Navešćemo još samo neke kombinacije kojima dobijate određene boje: #0000FF – crvena #00FF00 – zelena #0000FF – plava #FFFF00 – žuta #FF9900 – narandžasta #9900FF – ljubičasta #FF00CC – lila (pink) Ukoliko vam je potrebna neka specifična nijansa bilo koje boje, njen HEX kod ćete najlakše pronaći na internetu tako što ćete u pretraživač upisati “html color codes”. Mnoštvo sajtova nudi gotove spiskove u kojima su palete boja navedene zajedno sa odgovarajućim HEX kodom.

2.10 B tag Kada želimo da neki tekst podebljamo koristimo B tag.

2.11 I tag Za zakrivljenje teksta koristi se I tag.

2.12 U tag Ako želimo da posebno podesimo da meki tekst bude podvučen, koristimo U tag.

2.13 Sub i sup tag-ovi U slučaju da imamo potrebu da neki deo teksta pokažemo kao indeks ili kao nadtekst koristićemo tag-ove sub i sup. Isprobajte koji je efekat tagova koji su korišćeni u sledećem primeru.

strana 21

<b>Bold</b> tekst <i>Iskosen</i> tekst <u>Podvucen</u> tekst Hemijska oznaka za vodu je H<sub>2</sub>O<br> Idem u odeljenje V<sub>4</sub> x * x = x<sup>2</sup> 2.12 Center tag Ako se drugačije ne naglasi, tekst unutar HTML stranice je poravnat uz levu stranu. Ako se želi da naslov ili bilo koji drugi element stranice bude centriran, treba ga staviti između tagova <center> i </center> :

<center> OVO JE CENTRIRAN TEKST </center>

što će dati sledeći rezultat:

OVO JE CENTRIRAN TEKST



strana 22

3. Tabele Tabele u okviru HTML stranica se koriste vrlo često i u različite svrhe, najčešće radi pravljenja rang listi ili spiskova ali i radi definisanja različitih celina na stranici u okviru kojih se mogu naći različiti sadržaji (npr. zaglavlje, glavni meni, pomoćni meni sa strane, najnovije vesti itd.).Na skoro svakoj internet stranici možete videti bar jednu tabelu. Na slici možete videti nekoliko primera tabela.

Da bi ste mogli da napravite tabelu kakvu želite morate se pridržavati nekih osnovnih pravila. Tabele u HTML-u se formiraju na specifičan način:

1. prvo se definiše tabela 2. zatim se u okviru tabele definišu pojedinačni redovi tabele 3. unutar redova se definišu pojedinačne ćelije tabele

Svaki red mora sadržati barem jednu ćeliju, a svaka ćelija tabele, da bi se pravilno prikazala, mora sadržati makar jedno slovo ili sliku. Prećićemo na definisanje samih tabela i HTML tag-ova koji nam služe za definisanje.

strana 23

3.1 TABLE tag U okviru table tag-a se mogu definisati sledeći atributi za izgled cele tabele:

• background

Ovaj atribut služi za podešavanje pozadinske slike koja će biti prikazana ispod cele tabele. U slučaju slike koja je veća od tabele, slika će se automatski postaviti onoliko puta koliko je potrebno da se popuni cela tabela, i u isto toliko redova koliko je dugačka tabela. U slučaju da je slika pozadine veća od tabele, biće prikazan samo njen deo, koji tabela obuhvata.

• bgcolor

Pozadinska boja tabele se može definisati atributom bgcolor. Boja se može zadati imenom boje ili njenim hex-a kodom.

• border

Veličina granice tabele i granica između polja se može definisati ovom atributom. Veličina se zadaje u pixel-ima. Ako želite da se ne vide granice između polja postavite vrednost border-a na nulu.

• align

Za podešavanje poravnanja tabele u odnosu na celu internet stranu koristimo atribut align. Tabela se može postaviti sa leve, desne i u centar strane.

• cellspacing

Atribut cellspacing služi za podešavanje razmaka između polja tabele. Ako želite da nema razmaka između polja podesite i ovu opciju na nulu (za vežbanje pokušajte da menjate ove parametre.)

• bordercolor

Podešavanje boje granice između polja tabele i okvira same tabele se vrši sa ovim atributom. Boja se zadaje na već ranije opisan način.

• cellpading

Razmak između granice polja i samih podataka unutar polja se podešava atributom cellpadding. Za podešavanje nepostojanja razmaka između polja i granice ovaj atribut morate podesiti na nulu.

• height

Veličina koja se zadaje u ovom atributu je visina tabele. Zadaje se u pixelima. Ovaj atribut ne može definisati veličinu tabele u slučaju da je



strana 24

stvarna veličina informacija (slika ili veličina teksta) viša od definicije u okviru nekog polja u samoj tabeli.

• width

Širina tabele se može definisati ovim atributom, ali takođe važi isto pravilo kao i za visinu, ako je ukupan zbir polja širi od zadate širine tabela će se povećati.

3.2 TR tag Koristi se za definisanje jednog reda tabele. Svi redovi tabele započinju i završavaju se ovim tag-om. U okviru jednog reda mora se definisati barem jedno polje tabele. Dodatni atributi su sledeći:

• align • valign

Ova dva atributa koriste se za podešavanje poravnanja. U prvom slučaju podešava se poravnanje u odnosu na horizontalu, a u drugom slučaju u odnosu na vertikalu. Objekti koji se podešavaju su polja tabele u odnosu na samu tabelu.

3.3 TD tag Postavljanje ćelije tabele se radi sa TD tag-om. Sve informacije se dodaju u ćelije tabele. Informacije mogu biti slike, tekst, tabele ... Jako je bitno naučiti osnove korišćenja ovog tag-a, jer se u praksi jako često koriste upravo tabele i upravo način formatiranja tabela je u TD tag-u. Unutar TD tag-a mora postojati barem neka informacija da bi je korisnik video kako smo zamislili. Dodatni atributi koje služe za podešavanje samog TD tag-a su:

• align • valign

Ova dva atributa koriste se za podešavanje poravnanja. U prvom slučaju podešava se poravnjanje sadržaja ćelije u odnosu na horizontalu (levo -desno), a u drugom slučaju u odnosu na vertikalu (gore - dole). • width • height

Širina i visina ćelije se podešavaju ovim atributa, ali u slučaju da je sadržaj polja viši od definisanih vrednosti polje će se automatski povećati.

strana 25

• colspan • rowspan

Atributima colspan i rowspan se definišu spajanja susednih ćelija unutar tabele. Prvom se zadaje komanda da se ćelija tabele spaja sa još nekim ćelijama u svom redu (vodoravno), a druga da se ćelija spaja sa susednim ćelijama u svojoj koloni (uspravno).

• bgcolor • background

Za podešavanje pozadine samog polja koristi se atribut bgcolor, dok za podešavanje pozadinske slike postoji atribut background.

3.4 TH tag Ovaj tag predstavlja ćeliju tabele koja se nalazi u njenom prvom redu (zaglavlje) i možemo ga posmatrati kao blago izmenjeni TD tag. Razlika između taga TH i taga TD je u tome što je TH tag automatski podešen tako da njegov sadržaj bude poravnat vodoravno po sredini, kao i da je tekst podebljan (boldovan). Koristi se najčešće u slučajevima kada se tabelom prikazuje neki spisak, pa postoji potreba da u prvom redu budu ispisane oznake kolona (šta koja kolona predstavlja, npr “ime i prezime”, “razred”, “broj bodova”, “datum rođenja”).

3.5 Primeri tabela Na sledećim slikama su prikazani primeri tabela i njihovi HTML kodovi u kojima se koriste atributi koje smo do sada naveli. Tabela 2x2:

Ovo je prva celija prvog reda

Ovo je druga celija prvog reda

Ovo je prva celija drugog reda

Ovo je druga celija drugog reda

<table bordercolor="Aqua" cellspacing="2" cellpadding="2" border="1"> <tr> <td width="100" rowspan="2">Ovo je prva celija prvog reda</td> <td width="250" valign="top">Ovo je druga celija prvog reda</td> </tr> <tr>



strana 26

<td>Ovo je prva celija drugog reda</td> <td>Ovo je druga celija drugog reda</td> </tr> </table>

Tabela 2x2 u kojoj su donje dve ćelije spojene (atribut colspan):



Ovo je prvo polje drugog reda

<table bordercolor="Aqua" cellspacing="2" cellpadding="2" border="1"> <tr> <td width="100">Ovo je prva celija prvog reda</td> <td width="250" valign="top">Ovo je drugo celija prvog reda</td> </tr> <tr> <td width="100" colspan="2">Ovo je prva celija drugog reda</td> </tr> </table>

Tabela 2x2 u kojoj su dve ćelije u prvoj koloni spojene (atribut rowspan):



Ovo je druga celija drugog reda

<table bordercolor="Aqua" cellspacing="2" cellpadding="2" border="1"> <tr> <td width="100" rowspan="2">Ovo je prva celija prvog reda</td> <td width="250" valign="top">Ovo je druga celija prvog reda</td> </tr> <tr> <td width="250">Ovo je druga celija drugog reda</td> </tr> </table> Naravno mogu se praviti i znatno kompleksnije tabele, ali za sada u ovim osnovnim primerima mogu se videti način pravljenja tabela.

strana 27

Vežbanje: Napravite tabelu 3x3, u kojoj će svaka ćelija sadržati po 1 sliku i kratak tekst ispod slike (npr delovi računara ili zastave stranih zemalja). Vežbanje: Napravite tabelu 2x4 (2 vrste i 4 kolone). U gornjoj vrsti ubacite u svaku ćeliju po jednu sliku (logo): Google, Microsoft, Wikipedia, SystemPro. U donjoj vrsti ćelije popunite linkovima do ovih sajtova tako da ispod svake slike bude odgovarajući link. Slike bi trebalo da budu iste širine (upotreba atributa width u tagu IMG), dok i slike i linkovi treba da budu centrirani vodoravno unutar ćelije (atribut allign u tagu TD). Vežbanje: Sledeći primer predstavlja tabelu sa širinom od 80% i visinom od 30% u odnosu na površinu koju na ekranu zauzima browser:

Ime : Prezime : Zvanje : Milan Jankovic Predavac

Odgovarajući HTML kod je: <table border="2" height="30%" width="80%"> <tr> <th><font face="Verdana" size="2">Ime :</font></th> <th><font face="Verdana" size="2">Prezime :</font></th> <th><font face="Verdana" size="2">Zvanje :</font></th> </tr> <tr> <td><font face="Verdana" size="2">Milan</font></td> <td><font face="Verdana" size="2">Jankovic</font></td> <td><font face="Verdana" size="2">Predavac</font></td> </tr> </table>

Da bi kolone bile jednake širine trebalo bi da u odgovarajuće <th> ili <td> tagove ubaciti atribute width sa željenom širinom. U slučaju tabele iz prethodnih primera to znači da treba u svaki <th> tag definisati atribut width sa vrednošću 33%. Tako, na primer, se može realizovati tabela koja će se protezati preko cele širine stranice, a svaka kolona će zauzimati tačno trećinu širine tabele:



strana 28

Ime : Prezime : Zvanje : Milan Jankovic Predavac

HTML kod za prethodni primer je:

<table border="2" width="100%"> <tr> <th width="33%"><font face="Verdana" size="2">Ime :</font></th> <th width="33%"><font face="Verdana" size="2">Prezime :</font></th> <th width="33%"><font face="Verdana" size="2">Zvanje :</font></th> </tr> <tr> <td><font face="Verdana" size="2">Milan</font></td> <td><font face="Verdana" size="2">Jankovic</font></td> <td><font face="Verdana" size="2">Predavac</font></td> </tr> </table> Dva atributa koja imaju veliku primenu su i cellpadding i cellspacing. Pomoću cellpadding atributa definiše se rastojanje između sadržaja ćelije i njene granične linije. Vrednost ovog atributa se zadaje u pikselima, ako se ne navede nijedna vrednost podrazumeva se da 1. Pomoću cellspacing atributa se može odrediti rastojanje između pojedinih ćelija tabele, tj. debljina linije između ćelija. Vrednost ovog atributa se zadaje, takođe, u pikselima ako se ne navede nijedna vrednost podrazumeva se da 1. Ako se u prethodnoj tabeli definiše vrednost cellpadding atributa od 30 piksela, a vrednost cellspacing atributa od 10 piksela dobija se sledeća tabelu:

Ime : Prezime : Zvanje :

Milan Jankovic Predavac

HTML kod ove tabele glasi:

strana 29

<table border="2" cellpadding="30" cellspacing="10"> <tr> <th width="33%"><font face="Verdana" size="2">Ime :</font></th> <th width="33%"><font face="Verdana" size="2">Prezime :</font></th> <th width="33%"><font face="Verdana" size="2">Zvanje :</font></th> </tr> <tr> <td><font face="Verdana" size="2">Milan</font></td> <td><font face="Verdana" size="2">Jankovic</font></td> <td><font face="Verdana" size="2">Predavac</font></td> </tr> </table> Vežbanje: Želimo da u HTML-u napravimo tabelu kao na sledećoj slici:

Dani u nedelji :

ponedeljak utorak sreda četvrtak petak

č

a

s

o

v

i

1. srpski istorija fizicko hemija srpski

2. matematika srpski fizicko hemija srpski

3. fizicko matematika istorija biologija engleski

4. fizicko matematika fizika informatika engleski

5. fizika razredni geografija informatika matematika

HTML kod koji treba napisati je sledeći:

<table border="2" width="100%"> <tr> <th rowspan="2" colspan="2"> </th> <th colspan="5"> Dani u nedelji :</th> </tr> <tr> <th width="20%">ponedeljak</th> <th width="20%">utorak</th> <th width="20%">sreda</th> <th width="20%">cetvrtak</th> <th width="20%">petak</th>



strana 30

</tr> <tr> <th rowspan="5">c<p>a<p>s<p>o<p>v<p>i</th> <th>1.</th> <td>srpski</td> <td>istorija</td> <td>fizicko</td> <td>hemija</td> <td>srpski</td> </tr> <tr> <th>2.</th> <td>matematika</td> <td>srpski</td> <td>fizicko</td> <td>hemija</td> <td>srpski</td> </tr> <tr> <th>3.</th> <td>fizicko</td> <td>matematika</td> <td>istorija</td> <td>biologija</td> <td>engleski</td> </tr> <tr> <th>4.</th> <td>fizicko</td> <td>matematika</td> <td>fizika</td> <td>informatika</td> <td>engleski</td> </tr> <tr> <th>5.</th> <td>fizika</td> <td>razredni</td> <td>geografija</td> <td>informatika</td> <td>matematika</td> </tr> </table>

strana 31

HTML dozvoljava da cela tabela kao i svaka ćelija posebno može da ima različitu boju pozadine od ostatka stranice. Ovakav efekat se postiže umetanjem atributa bgcolor u sledeće tagove: <table>, <td> ili <th>. Vrednost se zadaje heksadecimalnim kodom boje ili njenim imenom, isto kao i kod boje pozadine stranice u <body> tagu.

Prepravite HTML kod tako da ćelije “Dani u nedelji” i “časovi” imaju žutu pozadinu, nazivi dana zelenu a predmeti plavu.

Vežbanje: Napisati HTML kod kojim se definiše tabela sa slike:



strana 32

4. Liste Liste u HTML dokumentima su relativno česta pojava, npr kada navodite neki spisak po stavkama. Lista kao i u ostalim programima može biti nesortirana ili sortirana lista.

Pod sortiranim listama se podrazumevaju one liste gde ispred svake stavke liste stoji broj, slovo ili rimski broj. Takođe se mogu birati mala ili velika slova i mala ili velika slova rimskih brojeva.

Kod nesortiranih lista ispred stavki lista se može postaviti određen simbol. Liste koje podržava HTML su i definicione liste. Te liste imaju naslov ispred stavke liste.

4.1 Ol tag Za postavljanje sortirane liste u HTML dokument koristi se ovaj tag. Dodatne opcije za ovaj tag su:

• type

Ovom opcijom podešavamo tip sortirane liste. Ona može biti sortirana brojevima (1), može biti sortirana abecedno sa velikom slovima (A), malim slovima (a), rimskim velikim brojevima (slovima) (I) ili rimskim malim brojevima (i).

4.2 Ul tag Nesortirane liste imaju skoro identične opcije kao i sortirane liste. One se postavljaju ul tag-om. Opcije su:

• type

Podešavanjem izgleda karaktera ispred stavke liste se izvršava ovom opcijom. Karakter može biti disk (pun krug), krug ili kocka.

4.3 Li tag Ovaj tag se koristi i kod sortiranih i kod nesortiranih lista za postavljanje stavke u listi. Postoji i mogućnost postavljanja različitog tipa kod nesortiranih lista za određenu stavku liste. Ona se postavlja između početnog i završnog tag-a sortirane ili nesortirane liste. Ovaj tag se može koristiti sa ili bez početnog tag-a. Postavljanje liste (sortirane ili nesortirane) u HTML dokumentu se automatski postavlja u novi red.

strana 33

4.4 Primeri sortiranih i nesortiranih lista Na sledeća dva primera videćete sortiranu i nesortiranu listu. Primer 1 Primer 2 <html> <head> <title>Primer 2</title> </head> <body> Godisnja doba su:<br> <ol> <li>prolece <li>leto <li>jesen <li>zima </ol> </body> </html>

<html> <head> <title>Primer 2</title> </head> <body> Kupiti <ul type="disc"> <li>Plazmu</li> <li>Eurokrem</li> <li type="circle">Fantu</li> </ol> </body> </html>

Osim ovakvih listi u upotrebi su (znatno ređe) i definicione liste, ali o njima se već raspitajte sami :)



strana 34

html ii godina skripta - university of...

Documents