HTML Upute

HTML KNJIGA UVOD U HTML

HTML je programski jezik koji se koristi za kreiranje dokumenata na World Wide Web-u. HTML se koristi za stvaranje hipertekstualnih datoteka (datoteka koje sadržavaju linkove).

HTML (HyperText Markup Language) je veoma jednostavan jezik čije osnove svatko može savladati za par dana, a kasnije je sve stvar prakse. Ovaj priručnik pokriva osnove HTML-a koje su dovoljne da se naprave sasvim zadovoljavajuće Web stranice. Kad savladamo osnove HTML-a možemo prijeći na proučavanje nekog naprednijeg tečaja HTML-a ili upoznavanje JavaScripta koji će doprinijeti da naša stranica malo živne. Kada "surfamo" Internetom i naiđemo na neku zanimljivu stranicu , a ne znamo kako je napravljena, njen izvorni HTML kod možemo pogledati ako u liniji menija odaberemo: View -> Source (ili View -> Page Source u Netscape Navigatoru). Ovo je najbolji način da naučimo neke nove stvari.

Sve što nam je potrebno da bi napravili jednu Web stranice praktično već imamo na računalu. To je prije svega jedan najobičniji tekst editor kao što je Notepad. Notepad potražimo u Start meniju pod Programs->Accessories. Slijedeća stvar koja nam je neophodna je Web Browser. I njega sigurno imamo jer čitamo ove tekstove. Bilo da imamo Internet Explorer ili Nescape Navigator poželjno je da nabavimo i onaj drugi browser kako bi izgled naših Web stranica provjerili u oba. To je neophodno iz tog razloga što različiti browseri različito tumače neke HTML tagove tako da su obično potrebne neke male korekcije kako bi naše Web stranice imale zadovoljavajući izgled u oba browsera. Na kraju bilo bi poželjno da imamo i neki program za obradu grafike (Corel Draw i Corel Photo Paint) da bi mogli kreirati i pregledati grafičke datoteke koje ćemo ugraditi u naše Web stranice. Inače na Internetu možemo pronaći mnogo Web grafike koju možemo slobodno da download-ujemo (usnimimo na hard disk na našem računalu) i ugrađujemo u naše Web stranice.

HTML komande se pišu u vidu tzv. tag - ova. Jedan tag je u komanda koja govori našem browseru što i kako napraviti tj. na koji način prikazati sadržaj naših stranice. HTML tagovi su "case insensitive" tj. svejedno je da li ih pišemo malim ili velikim slovima. Tagovi se pišu unutar oznaka "<" i ">" (bez znakova navoda) npr: <html>. Ovaj tag se nalazi na početku svakog HTML dokumenta i on govori našem browseru da je datoteka koju je upravo počeo učitavati baš HTML dokument i da kao takvog treba i prikazati. Na kraj HTML dokumenta se stavlja završni HTML tag:</html>. Ovaj tag govori browseru da je to kraj našeg HTML dokumenta. Većina tagova ima i početni i završni tag. Završni tag se dobiva dodavanjem znaka "/" i označava mjesto na kojem prestaje djelovanje početnog taga. Postoje i tagovi kod kojih ne moramo stavljati završni tag kao sto je recimo tag <br> koji služi za prelazak u novi red (o ovom tagu ćemo govoriti kasnije u dijelu o formatiranju teksta).

Svaki HTML dokument se sastoji od dva dijela: zaglavlja (engl. head) i tijela (engl. body). Zaglavlje se odvaja tagovima <head> i </head>, a tijelo dokumenta tagovima: <body> i </body>. Sve ono što napišemo u zaglavlju dokumenta neće se prikazati u prozoru browsera već obično služi samo da pruži neke informacije o našoj stranici.

Page 1 of 3UVOD U HTML

13.10.2010http://www.portalalfa.com/1/Html/uvod.htm

Tako ćemo u okviru našeg zaglavlja svakako staviti tagove: <title> i </title> između kojih ćemo staviti naslov naše stranice. To nije naslov koji će se pojaviti u tijelu naše stranice već onaj naslov koji se pojavljuje u naslovnoj liniji browsera. Pogledajmo naslovnu liniju našeg browsera - ispred imena browsera vidjećemo da piše: "Uvod u HTML". To je zato što smo u zaglavlju ovog dokumenta napisli:

<title>Uvod u HTML</title>

S druge strane sve ono što napišemo između tagova <body> i </body> predstavljat će tijelo našeg dokumenta i pojavit će se kao sadržaj naše web stranice u prozoru browsera (kao što je tekst koji upravo čitamo).

Dakle, svaki HTML dokument mora imati slijedeću strukturu:

<html> <head> <title>Ovdje stavimo naziv naše Web stranice</title> </head> <body> Ovdje unesimo sve ono što želimo da se vidi u stranici </body> </html>

Sad je vrijeme da napravimo prvu web stranicu. Otvorimo novi dokument u Notepad-u i upišimo gornju strukturu HTML dokumenta u kojem ćemo staviti naslov po želji (npr. naše osobno ime), a između body tagova stavimo neki tekst (npr. "Moj prva Web stranica"):

<html> <head> <title>Milan</title> </head> <body> Moj prva Web stranica </body> </html>

Sad snimimo ovaj dokument. U File - Save as dijalog prozoru prvo odaberemo folder u kojem ćemo usnimiti naš Web stranicu. U polje File name upišimo ime naše prve stranice, a kao ekstenziju otkucajmo .htm ili .html (npr. "prva.htm"). U padajućoj listi Save as type odaberimo All Files. Stisnite OK i naš prvi Home page je spreman da ga otvorimo u našem web browseru. Ako smo sve ispravno napravili u naslovnici našeg web browsera bi trebalo stajati: Milan, a u prozoru browsera bi trebali vidjeti tekst: Moja prva Web stranica.



Boje Uređivanje teksta Uređivanje teksta 2 Liste

Linkovi Grafika Tablice 1 Tablice 2 MarqueePočetak Home Zaključak



HTML KNJIGA

DODAVANJE BOJA

U prethodnom primjeru dobiti smo tekst ispisan crnim slovima na bijeloj pozadini. Međutim, kao što vrlo dobro znamo, na Web stranicama se pozadina i tekst mogu pojaviti u čitavom spektru boja. Da bi to postigli potrebno je dodati još neka objašnjenja u okviru našeg <body> taga. Dodatna objašnjenja HTML taga nazivaju se atributi. Atributi se unose u početni tag i služe da detaljnije opišu dati tag.

Na primjer, ako želimo promijeniti boju pozadine u žutu tada ćemo unutar <body> taga dodati:

<body bgcolor="#ffff00"> ili: <body bgcolor="yellow"> što daje isti krajnji efekat.

Dakle, vidimo da se boja pozadine određuje bgcolor atributom koji je dio <body>taga. Poslije svakog atributa se stavlja znak jednakosti koji služi za dodijelu vrijednosti datom atributu, a vrijednost atributa se obvezno stavlja između znakova navoda. Što se tiče označavanja boja, iz gornjeg primjera vidimo da se boje mogu definirati na dva načina: ili preko naziva boje (npr."yellow"), ili preko heksadecimalne RGB vrijednosti ispred koje obvezno treba staviti simbol # (npr. #ffff00). Možda će browser prikazati željenu boju i bez ovog simbola ali ga za svaki slučaj stavimo jer ga neki browseri striktno zahtijevaju.

Kod kreiranja Web stranica možemo se koristiti tablicom boja sa njihovim nazivima i heksadecimalnim kodom. Boje su poredane po abecednom redu, a kad nam se neka boja dopadne kopirajmo (copy) njen kod (rrggbb vrijednost) na našu Web stranicu.

Boja teksta se odredjuje text atributom. Ako želimo da naša stranica ima zelena slova na žutoj pozadini stavićemo:

<body bgcolor="#ffff00" text="#008000">

Ono što HTML čini izuzetnim, i što je uvjetovalo njegovu veliku popularnost jesu tzv. linkovi. Linkovi u HTML dokumentu su one riječi koje se pojavljuju u drugoj boji i podvučene su radi lakšeg uočavanja, a omogućavaju vam da se jednim klikom miša nađemo na nekom sasvim drugom sajtu koji se može nalaziti i na drugom kraju svijeta. Kad dovedemo pokazivač miša iznad linka desiće se dvije stvari: pokazivač miša će se pretvoriti u ruku sa ispruženim prstom (što simbolično govori da tu možete kliknuti), a sam link će promijeniti boju (obično u crvenu, ako drugačije ne definiramo). Osim toga boja linkova koje smo već posjetili biće drugačija od ostalih linkova, kako bi imali orijentaciju što smo već vidjeli, a što nam još ostaje da posjetimo.

Page 1 of 3DODAVANJE BOJA

13.10.2010http://www.portalalfa.com/1/Html/boje.htm

Boje linkova se mogu definirati pomoću tri atributa: link, vlink i alink. Na primjer, ako želimo da na našim Web stranicama linkovi budu plavi, posjećeni linkovi ljubičasti, a aktivni linkovi crveni stavimo:

<body link="#0000ff" vlink="#ee82ee" alink="#ff0000">

Sve ove atribute možemo i izostaviti ako želimo da browser koristi vrijednosti koje su definirane po default-u. U Internet Exploreru pozadina je po default-u bijela, tekst crn, linkovi plavi, posjećeni linkovi maslinasto-zeleni, a aktivni linkovi crveni. Ako nam se sviđa ova shema boja, nemojmo ništa mijenjati.

Međutim, šta ako nismo zadovoljni jednobojnom pozadinom, vec želimo imati bogato ukrašenu pozadinu kakve često srećemo na Web stranicama. U tom slučaju moramo staviti kao pozadinu neku sliku u JPEG ili GIF formatu. Ovo su obično male sličice koje se brzo učitavaju i "tajluju" (redaju poput pločica , eng. tile). Ove pozadine (eng. background) možemo pronaći u raznim kolekcijama WEB grafike širom Interneta, a možemo i "usnimiti" pozadinu sa Web stranica koja nam se dopadne. To se postiže na slijedeći način: kada na nekoj stranici ugledamo pozadinu koja nam se dopada i poželite je sačuvati na svom hard disku, kliknemo desnom tipkom miša na bilo koji dio pozadine te stranice i iz priručnog menija koji se pojavi odaberemo opciju Save Background As. Odaberemo folder u kojem ćemo čuvati odabrane pozadine i dajmo toj pozadini odgovarajuće ime (npr. pozadina1.jpg ili pozadina2.gif)

Kada ste odabrali pozadinu koju želimo staviti na našu Web stranicu, prvi korak je da taj fajl prekopiramo u folder u kom se nalazi i naša prezentacija. Slika i HTML dokument ne moraju obvezno biti u istom folderu ali tako je jednostavnije.) Sad još samo preostaje da u našem HTML dokumentu tj. njegovom body tagu upišemo odgovarajuci atribut. Atribut se u ovom slučaju zove background i bilo bi poželjno da ga ne pomiješate sa atributom bgcolor koji definira samo boju pozadine. Na primjjer, ako želimo da kao pozadinu stavite sliku "pozadina1.jpg" tada će body tag izgledati ovako:

<body background="pozadina1.jpg" bgcolor="#000000">

Kao što vidimo ubacili smo i background i bgcolor tag, i to ne slučajno. O čemu se radi? Pa mnogi ljudi sa sporijim modemima prilikom surfovanja Internetom isključuju u svojim browserima automatsko učitavanje grafike. To znaci da se neće učitati ni pozadina koju ste vi dodijelili toj stranici. Problem nastaje u slučajevima kada smo tekstu dodijelili neku svijetlu (ili bijelu boju), a browser ne učita pozadinu, već i pozadina ostane bijela. Blijeda (ili bijela) slova na bijeloj pozadini se jednostavno neće vidjeti. Zbog toga uvek dodijelimo i neku bojuj pozadini tako da u gore opisanoj situaciji slova i dalje budu čitljiva.

Uvod Uređivanje teksta Uređivanje teksta Liste



2Linkovi Grafika Tablica 1 Tablica 2 MarqueePočetak Home Kraj



HTML KNJIGA

UREĐIVANJE TEKSTA 1

Stavimo neki naslov na Web stranicu (npr. "PORTAL ALFA"). HTML razlikuje šest nivoa (veličina) naslova, a slijedeća tablica prikazuje svih 6 tagova i odgovarajuće naslove:

Po defaultu tekst je poravnat uz lijevu marginu. Ako želimo da naš naslov, ili bilo koji drugi element stranice, bude centriran, trebamo ga staviti između tagova <center> i </center>:

<center>OVO JE CENTRIRAN TEKST</center>

što će dati slijedeći rezultat:

OVO JE CENTRIRAN TEKST

Ukoliko posebno ne naglasimo kojim fontom želimo da bude ispisan tekst na našoj stranici, browser će koristiti default font (to je obično Times New Roman). Osnovni tag kojim možemo mijenjati font na HTML stranici je <font> tag, a on može imati tri atributa: face, size i color. Atributom face definiran je tip fonta kojim želimo da naš tekst bude ispisan. Na jednoj stranici možemo koristiti i više različitih fontova, ali vodimo računa da ne pretjeramo u "ukrašavanju". Osim toga, vodimo računa da korisnik koji učitava našu stranicu mora imati instaliran taj font na svom računlu. U suprotnom njegov browser će prikazati tekst u default fontu. Zato na svojim stranicama nemojmo koristiti neke egzotične fontove, već koristimo samo široko rasprostranjene fontove.

Ako želimo da naša stranica bude ispisana recimo "Ariel" fontom (kojim je ispisana i ova stranica koju upravo čitamo), onda trebamo napisati:

<font face="Ariel"> Ovdje staviti tekst. </font>

Ako koristimo neke egzotičnije fontove onda bi bilo dobro da navedemo i nekoliko alternativnih fontova, jedan za drugim, odvojenih zarezom. Ako posjetilac naše stranice na svom računalu nema instaliran prvi font sa liste, on će ga prikazati u slijedećem sa liste, i tako dalje. Na primjer:

<font face="Comic Sans MS,Arial,Courier">

Evo primjera nekoliko popularnih fontova koje možemo koristiti na svojim stranicama:

<h1>PORTAL ALFA</h1> PORTAL ALFA <h2>PORTAL ALFA</h2> PORTAL ALFA <h3>PORTAL ALFA</h3> PORTAL ALFA <h4>PORTAL ALFA</h4> PORTAL ALFA <h5>PORTAL ALFA</h5> PORTAL ALFA <h6>PORTAL ALFA</h6> PORTAL ALFA

Page 1 of 3UREĐIVANJE TEKSTA 1

13.10.2010http://www.portalalfa.com/1/Html/tekst1.htm

VerdanaArial

Courier Bedrock

Times New Roman Comic Sans MS

Slijedeća stvar koja se može mijenjati je veličina slova, a ona se definira preko size atributa. HTML razlikuje 7 veličina slova koje nose vrijednosti od 1 do 7. Podrazumijevana (default) veličina je 3. Ako su slova veličine 3 suviše mala možemo zadati veličinu fonta od recimo 5, na slijedeći način:

<font size="5">

Evo liste sa veličinama fonta od 1 do 7 pa odaberimo veličinu koja nam odgovara:

veličina 1, veličina 2, veličina 3, veličina 4, veličina 5, veličina 6,

veličina 7.

Atributom color kojim možemo mijenjati boju teksta (kao što je napravljeno u ovom odjeljku). Za ovaj atribut važi isto pravilo kao i kod definiranja boja <body> tagom. Dakle, ako želimo da u nekom dijelu teksta promijenimo boju fonta u crvenu stavit ćemo:

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

Toliko o korištenju <font> taga. Naravno mogućnosti uređivanja teksta se ne završavaju na ovom tagu. U HTML dokumentima postoji mogućnost pisanja podebljanim (bold ili strong) slovima i kurzivom (italic), kao i mogućnost podvlačenja (underline) i precrtavanja (strike) teksta. Slijedeća tablica prikazuje odgovarajuće tagove kao i rezultate njihove primjene:

Osim toga mogu se pisati i slova u indeksu ili eksponentu. Indeks se dodaje pomoću taga <sub>, a eksponent pomoću taga <sup>. Slijedeća tablica prikazuje primjer njihove primjene:

<b>bold</b> bold

<strong>strong</strong> strong

<i>italic</i> italic

<u>underline</u> underline

<strike>strike</strike> strike

H<sub>2</sub>O H2O

2<sup>2</sup>=4 22=4



Tekst se u browser-u automatski lomi na kraju reda. To može biti nezgodno ako želimo da neke fraze budu cijele u jednom redu. Ovo se može postići umetanjem tog dijela teksta izmedju tagova:

<nobr> Ovdje ide tekst koji se neće prelomiti na kraju reda </nobr> Ukoliko je tekst prevelik da stane u jedan red na monitoru, na dnu prozora će se pojaviti horizontalni "klizač" (scrollbar) i korisnik će morati skrolovati da bi ga pročitao. Budimo oprezni sa korištenjem ovog taga jer nije baš ugodno skrolovati kroz kilometarski dug red. Ukoliko želimo dozvoliti našem redu da se prelomi, ali na točno određenom mjestu, to možemo postići korištenjem <wbr> taga. Ovaj tag ne zahtijeva završni tag. Za razliku od <br> taga koji će obvezno prelomiti red, ovaj tag će prelomiti red samo ako je to neophodno tj. ako je tekst prije njega predugačak da bi stao u jedan red. Ovaj tag vam također omogućava da prelomite neku dugačku riječ na kraju reda. U HTML-u postoje još mnogi tagovi koji omogućavaju da uredimo tekst prema vlastitoj želji. O ovim mogućnostima govori slijedeća stranica ovog priručnika.

Uvod Boje Uređivanje teksta 2 Liste

Linkovi Grafika Tablice 1 Tablice 2 MarqueePočetak Home Kraj



HTML KNJIGA

UREĐIVANJE TEKSTA 2

U ovom nastavku HTML priručnika naučit ćemo još neke vještine oko uređivanja teksta. Kao prvo da vidimo kako možemo prijeći u novi red ili započeti novi odjeljak. Kad pišemo tekst u Notepad-u prelazak u novi red se postize pritiskom na taster ENTER (ili RETURN). Međutim ovo neće dovesti do prelaska u novi red i na našoj HTML stranici. Naime, da bi browser prešao u novi red, to mu moramo eksplicitno narediti odgovarajućim tagom. Tag za prelazak u novi red je <br> tag. On ne zahtijeva odgovarajući završni tag (što je i razumljivo).

Prelazak u novi odjeljak postiže se <p> tagom. On ima isti učinak kao i prijašnji tag s tom razlikom što će napraviti mali razmak između redova. Na kraju odjeljka možemo staviti i njegov završni tag, ali većina browsera ga ne zahtijeva, tako da ga slobodno možemo izostaviti. Tekst se po defaultu poravnava uz lijevu marginu. Centriranje odjeljka ili poravnanje odjeljka uz desnu marginu se postiže align atributom. Align atribut može imati tri vrijednosti:

left

center

right

Dakle, odgovarajući tagovi za svako od navedenih poravnanja trebaju izgledati ovako:

<p align="left"> <p align="center"> <p align="right">

Ako nam čak ni prelazak u novi odjeljak nije dovoljan da naglasimo prelazak na neku novu cjelinu unutar naše stranice, najbolje rješenje bi bilo da povučemo jednu horizontalnu liniju, poput linije iznad ovog odjeljka. Liniju možemo povući pomoću <hr> taga. Ovaj tag crta tanku sivu liniju preko cijele stranice. Ako nismo zadovoljni izgledom ove linije i za to ima rješenja. Naime i ovaj tag može sadržavati odgovarajuće atribute kojima možemo regulirati izgled vaše linije. Ako ne želimo da linija bude osjenčana već potpuno crna stavimo atribut noshade. Ako nismo zadovoljni dimenzijama linije, možemo ju promijeniti pomoću dva atributa: size i width. Atributom size određujemo debljinu linije u pikselima, a atributom width određujemo dužinu linije ili u pikselima ili u postocima širine stranice. Ovaj tag također može sadržavati align atribut kojem možemododijeliti iste vrijednosti kao i za odjeljak. Boju linije možemo regulirati pomoću color atributa na već opisani način za definiranje boja u HTML dokumentima. Tako naprimjer, ako želimo povući neosjenčanu crvenu liniju koja će biti centrirana i čija će debljina iznositi 6 piksela a protezat će se preko 50% širine stranice, trebamo napisati:

<hr noshade align="center" size="6" width="50%" color="#ff0000">

i dobit ćete slijedeću liniju:

Napomena:

Netscape Navigator ne podržava atribut color za horizontalne linije. U Navigatoru će ova linija biti siva.

Nemojmo zaboraviti staviti simbol za postotke (%) u width tagu, inače će browser misliti da smo mu zadali širinu linije u pikselima, a ne u postocima širine stranice. One ukrasne linije koje viđamo na nekim web stranicama nisu zadane ovim tagom, već predstavljaju slike ubačene pomoću jednog drugog taga, o kojem ćemo govoriti u dijelu o



ubacivanju grafičkih elemenata u web stranice.

U običnim editorima teksta tipka "TAB" služi za uvlačenje (engl. indent) teksta tj. za ostavljanje određenog broja praznih mjesta na početku reda (obično se uvlači prvi red pasusa). U Notepad-u također možemo uvući red pritiskanjem tipke "TAB" međutim ovo neće imati nikakvog efekta na tekst koji će biti prikazan u browser-u (baš kao što je bio slučaj i sa prelaskom u novi red). Međutim i u HTML dokumentu možemo uvući red za određeni broj mjesta korištenjem slijedeće oznake:

Ova oznaka ostavlja jedno prazno mjesto. Ako želimo ostaviti pet praznih mjesta jednostavno stavite pet ovakvih oznaka jednu za drugom:

U slijedećem primjeru stavili smo pet ovakvih oznaka na početak "odjeljka" :

xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxx xxxx xxxxx xxxx xxxxx x xxxxx x xxxxxx xxx xxxx xx xxxxx xx x xxxxx xxxxxxxx xxxxxxx x x xxxxxxxx xxxx xxxxxx xxxxx xxxx xxxxxx xxxxxxx xxxxxx xxx xxxx xx xxxxxxx x x xxxxxxxxxxxx xxxxx.

A odgovarajući HTML kod izgleda ovako:

<p> xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxxx xxxx xxxxx xxxx xxxxx x xxxxx x xxxxxx xxx xxxx xx xxxxx xx x xxxxx xxxxxx xx xxxxxxx x x xxxxxxxx xxxx xxxxxx xxxxx xxxx xxxxxx xxxxxxxxxxxxx xxx xxxx xx xxxxxxx x x xxxxxxxxxxxx xxxxx.

Uvod Boje Uređivanje teksta 1 ListeLinkovi Grafika Tablice 1 Tablice 2 MarqueePočetak Home Kraj



HTML KNJIGA LISTE

Slijedeća stvar koju možemo koristiti u web stranicama su brojevne i nebrojevne liste. Brojevne liste se ubacuju pomoću <ol> taga, a nebrojevne liste pomoću <ul> taga. Pojedine stavke liste se definiraju pomoću <li> taga (ovaj tag ne zahtijeva završni tag). Osnovna razlika između ove dvije vrste listi je ta što će u brojevnim listama ispred pojedinih stavki liste stajati redni brojevi, a u nebrojevnoj listi će stajati dugmad.

Primjer brojevne liste:

Godišnja doba su:

1. proljeće 2. ljeto 3. jesen 4. zima

koja se dobija slijedećim HTML kodom:

<p><font face="Arial">Godišnja doba su:</font> <ol> <li><font face="Arial">proljeće</font> <li><font face="Arial">ljeto</font> <li><font face="Arial">jesen</font> <li><font face="Arial">zima</font></li> </ol>

Kao što vidimo ne moramo sami unositi redne brojeve. Browser će ih sam staviti ispred svake stavke liste. Ako nismo zadovoljni arapskim brojevima koje ovaj tag koristi po default-u, možemo upotrijebiti atribut type. Ovaj atribut može imati slijedeće vijednosti:

A - velika slova a - mala slova I - rimski brojevi i - mali rimski brojevi

Evo kako izgleda gornja lista sa velikim rimskim brojevima:

I. proljeće II. ljeto

III. jesen IV. zima

a odgovarajući HTML kod:

<ol type="I"> <li>proljeće <li>ljeto <li>jesen <li>zima

Page 1 of 3LISTE

13.10.2010http://www.portalalfa.com/1/Html/liste.htm

</ol>

Evo sada primjera nebrojevne liste:

Godišnja doba su:

proljeće ljeto jesen zima

koja se dobija HTML kodom:

<br> <br> <XMP> <font color="#FF0000"><b>Godišnja doba su:

<ul> <li>proljeće <li>ljeto <li>jesen <li>zima </ul>

Kao što vidimo browser je sada umjesto rednih brojeva ispred svake stavke liste stavio okruglo dugme. Ako nismo zadovoljni sa okruglim dugmićima i to se može regulirati odgovarajućim atributom. Atribut je i ovaj put type samo što u ovom slučaju može uzimati vrijednosti:

circle - okruglo dugme disc - ispunjeno okruglo dugme square - kvadratno dugme

Evo iste liste i sa kvadratnim dugmićima:

proljeće ljeto jesen zima

a odgovarajući HTML kod je:

<ul type="square"> <li>proljeće <li>ljeto <li>jesen <li>zima </ul>

Page 2 of 3LISTE


Slijedeci oblik liste je tzv. "definicjska lista". Ovaj oblik liste dobijamo pomoću <dl>taga. Svaka stavka ovakve liste se sastoji iz dva dijela: termina kojeg želimo definirati i njegove definicije. Termini započinju <dt> tagom, a njihove definicije <dd> tagom. Termini se poravnavaju uz lijevu marginu, a njihove definicije se pojavljuju u novom redu i uvučene su za određen broj mjesta.

Evo primjera jedne definicijske liste:

Proljeće: najljepše godišnje doba koje traje od 21. ožujka do 21. lipnja.

Ljeto: najtoplije godišnje doba koje traje od 21. lipnja do 21. rujna.

Jesen: najkišovitije godišnje doba koje traje od 21. rujna do 21. prosinca.

Zima: najhladnije godišnje doba koje traje od 21. prosinca do 21. ožujka.

Njen HTML kod glasi:

<dl>

<dt>Proljeće: <dd>najljepše godišnje doba koje traje od 21. ožujka do 21. lipnja.

<dt>Ljeto: <dd>najtoplije godišnje doba koje traje od 21. lipnja do 21. rujna.

<dt>Jesen: <dd>najtužnije godišnje doba koje traje od 21. rujna do 21. prosinca.

<dt>Zima: <dd>najhladnije godišnje doba koje traje od 21. prosinca do 21. ožujka. </dl>

Uvod Boje Uređivanje teksta 1

Uređivanje teksta 2

Linkovi Grafika Tablice Tablice 2 MarqueePočetak Home Kraj

Page 3 of 3LISTE


HTML KNJIGA LINKOVI

Postoje tri vrste linkova u HTML dokumentu. Prvu vrstu bi činili linkovi kojima možemo skočiti do nekog drugog dijela iste stranice u kojoj se nalazi i link (npr. kad dođemo do kraja stranice možemo napraviti link koji će nas vratiti na vrh stranice). Drugu vrstu bi činili linkovi do neke druge stranice u okviru isog Web site-a (npr. linkovi naprijed i nazad na dnu ove stranice). Treću vrstu bi činili linkovi do stranica na nekomj sasvim drugom Web site-ui koje mogu biti postavljene na serveru koji se nalazi na drugoj strani svijeta. (Server je računalo na koji postavljamo naše Web stranice.)

Za sve ove linkove je zajedničko to da se dobiju istim parom tagova: <a> i </a>. Za prvu vrstu linkova moramo prvo napraviti oznaku na nekom mjestu u dokumentu na koje želimo prijeći kad kliknemo na odgovarajući link. Oznaka se dobija stavljanjem atributa name u <a> tag. Npr. na dno ove stranice postavimo oznaku:

<a name="kraj"></a>

Između početnog <a name="kraj"> i završnog </a> taga može stajati bilo koji element naše prezentacije (tekst, slika), a ne mora stajati ništa (kao sto je ovdje slučaj). Ovaj tag ne proizvodi nikakav vidljiv efekat u HTML dokumentu - on djeluje u pozadini vašeg dokumenta i služi našem browseru da se lakše orijentira.

Dobro, sada ćemo napravit "pravi" link (tj. onaj link kojeg vi vidite u HTML dokumentu) i koji nas jednim klikom miša dovodi do željenog mjesta (tj. do onog mjesta na koje smo postavili gore spomenutu oznaku). Ova vrsta linka se dobija dodavanjem atributa href u <a> tag. Pošto se dana oznaka nalazi unutar fajla sa nazivom linkovi.htm, a ime oznake je kraj stavimo:

<a href="linkovi.htm#kraj"> Klikni ovdje da skočiš na kraj </a>

i dobit ćemo slijedeći link koji vodi na kraj stranice: Klikni ovdje da skočiš na kraj

Ako želimo staviti link do neke druge stranice u okviru Web site-a, to ćemo postići stavljanjem taga <a> sa atributom href i nazivom HTML fajla do kojeg želimo napraviti link. Npr. ako želimo napraviti link do prethodne stranice ovog priručnika (fajl nosi naziv liste.htm) napisat ćemo:

<a href="liste.htm">Llink na prethodnu stranicu </a>

i dobit ćemo slijedeći link:Link na prethodnu stranicu

Obratimo pažnju da u ovom slučaju na prethodnu stranicu nismo morali postavljati nikakvu oznaku, a link nas jednostavno odvodi na vrh stranice čiju smo adresu stavili u href atribut. Ako bismo željeli da nas link odvede do nekog određenog mjesta u toj stranici onda bismo na to mjesto prvo morali postaviti oznaku sa name atributom kao što smo to napravili i u prethodnom slučaju.

Ukoliko se fajl do kojeg vodi link nalazi u nekom drugom folderu, tada kao vrijednost href atributa moramo staviti cijelu "stazu" koja vodi do tog fajla (npr. c:\My Documents\Home Page\index.html).

Page 1 of 2LINKOVI

13.10.2010http://www.portalalfa.com/1/Html/linkovi.htm

Ako želimo staviti link do nekih drugih Web stranica, koje se mogu nalaziti na nekom sasvim drugom serveru potrebno je napisati cijelu web adresu te prezentacije. Npr. ako želimo postaviti link do poznatog pretraživača Interneta "Yahoo", čija je adresa: http://www.yahoo.com/ treba napisati:

<a href="http://www.yahoo.com/"> Yahoo </a> i dobili smo slijedeći link:

Yahoo

Ovaj tag možemo iskoristiti kao link za pokretanje nove poruke u našem programu za elektronsku poštu (npr. Outlook Express ili Netscape Messenger) u kojem će već biti upisana željena adresa, a posjetiocima naših Web stranica preostaje samo da otkucaju tekst poruke i da je pošalju. Moja E-mail adresa je [email protected], napravimo slijedeći link:

Poruka Milanu

koji će u E-mail programu otvoriti novu poruku sa mojom adresom. Ovo sam postigao slijedećim tagom:

<a href="mailto:[email protected]"> Poruka Milanu </a>

Linkovi predstavljaju glavnu snagu HTML jezika, i najviše doprinose njegovoj popularnosti.

Uvod Boje Uređivanje teksta1

Uređivanje teksta 2 Liste

Grafika Tablica Tablica 2 MarqueePočetak Home Zaključak

Page 2 of 2LINKOVI

13.10.2010http://www.portalalfa.com/1/Html/linkovi.htm

HTML KNJIGA GRAFIKA

Slike na Internetu najčešće se nalaze u jednom od slijedeća dva formata:

JPEG (ili JPG)

GIF

U JPEG formatu se obično čuvaju kvalitetnije fotografije jer ovaj format podrzava 16 miliona boja, a fajlovi su dobro komprimirani, tako da se fotografije 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 (providnost) i da se može animirati.

Slike se u HTML dokument ubacuju pomoću <img> taga. Ovaj tag mora imati bar jedan atribut, a to je src atribut koji definira naziv (i eventualno lokaciju) grafičkog fajla koji želimo ubaciti u Web stranice. Ako smo grafički fajl usnimili u isti folder u kojoj se nalazi i odgovarajuci HTML fajl, dovojlno je da kao vrijednost src atributa stavimo samo naziv odgovarajućeg fajla. Npr. ako želimo staviti sliku "tigar.jpg" tada ce odgovarajući tag glasiti:

<img src="tigar.jpg">

čime se dobija slijedeci učinak:

Po default-u slike su poravnate sa tekstom na donju ivicu (kao što se vidi iz gornjeg primjera). Položaj slike u odnosu na tekst stranice se može definirati ubacivanjem align atributa u <img> tag. Vrijednosti ovog atributa i odgovarajuće efekte možemo vidjeti iz slijedećih primjera: left - postavlja sliku uz lijevu marginu:

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxx xxxxxx xxxxx xxxxx xxxxx xxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxx xxxxxxx xxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx x xxxxx xxxxxx x xxxxx

Page 1 of 8GRAFIKA

13.10.2010http://www.portalalfa.com/1/Html/grafika.htm

Odgovarajući tag glasi:

<img src="tigar.jpg" align="left">

right - postavlja sliku uz desnu marginu:


Odgovarajući tag glasi:

<img src="tigar.jpg" align="right">

top - poravnava sliku sa vrhom slova u tekućoj liniji (slijedeća linija teksta počinje ispod slike):

xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx x xxxx xxxxx

xxxxxx xxxxx xxxxx xxxxx xxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxx xxxxxxx xxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx x xxxxx xxxxxx x xxxxx Odgovarajući tag glasi:

<img src="tigar.jpg" align="top">

bottom - poravnava sliku sa donjom ivicom slova (default):

Page 2 of 8GRAFIKA



Odgovarajući tag glasi: <img src="tigar.jpg" align="bottom">

middle - postavlja sliku tako je donja ivica slova na sredini slike (slijedeća linija teksta počinje ispod slike):



<img src="tigar.jpg" align="middle">

absmiddle - postavlja sliku tako da se sredina slike i sredina slova poklapaju (slijedeća linija teksta počinje ispod slike):

Page 3 of 8GRAFIKA




<img src="tigar.jpg" align="absmiddle">

Ako želimo da slika bude centrirana koristimo center tag. Na primjer:

xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx xxxxxx xxxxxxxx xxxxxxxx

xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx xx xxxxxx xxxx xxxxx xxxx x

što se postiže slijedećim HTML kodom:

<center><img src="tigar.jpg"></center>

Veličinu slike možemo definirati pomoću dva atributa: width i height. Vrijednost širine i visine stranice se može zadati ili u piksekima ili u postocima. Gornje slika ima slijedeće vrijednosti atributa: width="119" i height="139". Ako želimo da slika iz prethodnih primjera bude proporcionalno četiri puta veća napisat ćemo:

<img src="tigar.jpg" width="476" height="556">

Page 4 of 8GRAFIKA


:

Ako zadamo samo height ili samo width atribut, druga dimenzija će biti uvećana proporcionalno sa zadanom tako da se slika neće deformirati.

Prazan prostor između slike i okolnog teksta (ili nekih drugih elemenata stranice) može se definirati pomoću dva atributa: hspace i vspace. Vrijednost ova dva atributa se zadaje u pikselima. Ako napišemo:

<img src="tigar.jpg" hspace="50" vspace="50">

dobit ćemo:

Page 5 of 8GRAFIKA


x xxxx xxxxx xxxxxx xxxxx xxxxx xxxxx xxxxxxxx xxxxxxxxx xxxxxxxx xxxxxxxxx xxxxxxx xxxxxxx xxx xxxxxxx xxxxx xxxxxxx xxxxxxx xxx xx xxxx xxxxxx xxxxxx xxx xxxxxx x xxxxxx xxxxxx xxxxx xxxxxxxx xxxxxxx xxxxxx xxxxxxx xxxx xxxxxxx x xxxxxxxx xxxx xxxxx xxxx xxxxxx xxxxxx xxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxx xxxx xxxxxxxx xxxxx xxxxxx x xxxxx xxxxxx x xxxxx

Vidimo da je širina margine oko slike 50 piksela.

Slika se može i "uokviriti" pomoću atributa border čija se vrijednost zadaje u pikselima. Ako zadamo debljinu okvira 5 piksela dobit ćemo slijedeću sliku:

što se postiže slijedećim tagom:

<img border="5" src="tigar.jpg">

Sliku možemo postaviti kao link na slijedeći način:

<a href="stranica1.htm"><img src="tigar.jpg"></a>

Page 6 of 8GRAFIKA


Browser ce automatski uokviriti sliku koja predstavlja link sa okvirom one boje koju ste zadali link i vlink atributima u našem <body> tagu. Ako ne želimo da naša slika bude uokvirena moramo joj zadati border="0" u okviru <img> taga.

Postoji još jedan koristan atribut <img> taga. To je alt atribut. Ovaj atribut će u slučaju da browser posjetioca naše stranice iz bilo kog razloga ne učita sliku, na onom mjestu gdje bi trebala stajati slika prikazati tekst koji napišemo kao vrijednost ovog atributa. Ovo je korisno naročito ako ste sliku postavili kao link, jer će onda i u slučaju neučitavanja slike posjetilac znati gdje vodi taj link. Upotrijebit ćemo uvijek ovaj atribut i da u njega upisujemo tekst koji ukratko opisuje danu sliku. Na primjer:

<img src="tigar.jpg" alt="Tigar">

Slika nije pronađena. Kada mišem stanemo na sliku pojavi se opis slike.

Slika je pronađena. Kada mišem stanemo na sliku pojavi se opis slike.

Tigar

Page 7 of 8GRAFIKA


Uvod Boje Uređivanje teksta1


Linkovi Tablice 1 Tablice 2 MarqueePočetak Home Zaključak

Page 8 of 8GRAFIKA


HTML KNJIGA TABLICE 1

Tablice predstavljaju veoma koristan alat za predstavljanje podataka na web stranici. Pored klasičnog načina upotrebe tablica, u HTML-u se tablice koriste i da bi se lakše kontrolirao razmeštaj teksta i slika na stranici. Ako ste već pokusali napraviti neku web prezentaciju, sigurno znate o čemu govorim. Ma koliko se trudili da poravnate tekst i slike na vašoj stranici one vam uvijek nekako izmiču kontroli, naročito kad pređete u neku drugu rezoluciju od one u kojoj ste prvobitno izradili vašu stranicu. Smještanje elemenata stranice u polje tablice predstavlja osnovni oslonac web dizajnera. U polje tablice možemo smjestiti tekst, slike, linkove, druge tablice itd.

Osnovni tag koji označava početak i kraj tablice je:

<table>Sadržaj tablice</table>

Sadržaj tablice stavlja se unutar taga kojim se definira jedno polje tablice:

<td> Sadržaj polja </td>

Tablica ne mora sadržavati <th> tag, ali mora sadržavatii bar jedan <td> tag, u koji ćemo staviti sadržaj tablice. Redovi tablice definiraju se pomoću taga:

<tr> <td> Sadržaj polja </td> <td> Sadržaj polja </td> ... </tr>

Unutar njega se umeću <td> ili <th> tagovi koji defeniraju polje tablice sa odgovarajućim sadržajem.

Napomena:

Ako smo tekstu van tablice upotrebom <font> taga dodijelili neki font različit od default fonta, u Internet Exploreru će se ovaj tag odnositi i na tekst u poljima tablice. U Netscape Navigatoru će tekst u tablici biti prikazan u default fontu. Da bi i Netscape Navigator tekst u tabeli prikazao u željenom fontu moramo u svako polje posebno ubaciti <font> tag.

Po default-u tablice nemaju graničnu liniju (border). Da bi dodijelili našoj tabeli graničnu liniju odgovarajuće debljine, u <table> tag se stavlja atribut border, a vrijednost debljine linije zadaje se u pikselima.

Primjer tablice:

Odgovarajući HTML kod glasi:

<table border="2"> <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">Nadimak :</font></th> </tr> <tr> <td><font face="Verdana" size="2">Petar</font></td> <td><font face="Verdana" size="2">Petrovic</font></td> <td><font face="Verdana" size="2">Pepe</font></td> </tr> </table>

Osnovna razlika između teksta koji se nalazi unutar <th> i <td> tagova je u tome što je tekst u prvom slučaju podebljan (bold) i centriran unutar polja, a u drugom slučaju tekst nije podebljan i poravnat je uz lijevu ivicu polja. Ivica tablice se priljubljuje uz sadržaj polja maksimalno koliko je moguće. Širina stupca određena je prvim poljem u svakom stupcu.

Ovim se ne iscrpljuje mogućnost formatiranja tablica. U tu svrhu koriste se razni atributi od kojih ćemo u

Ime : Prezime : Nadimak :

Petar Petrovic Pepe

Page 1 of 3TABLICA 1

13.10.2010http://www.portalalfa.com/1/Html/tablica1.htm

daljnjem tekstu neke obraditi. Treba spomenuti da tablica uopće ne mora biti jednako formatirana, tj. svakom se polju može dodijeliti neko drugo svojstvo pomoću atributa koji se umeću u njen <td> tag.

Prije svega, da bi tablici dodijelili odgovarajuće dimenzije koristit ćemo atribute width i height. Vrijednost ovih atributa se kao i kod <img> taga mođe zadati ili u pikselima ili u postocima veličine prozora HTML browser-a. Ovaj drugi način definiranja je preporučljiv jer onda ne moramo razmišljati o rezoluciji ekrana.

Slijedeći primjer predstavalja tablicu sa širinom od 80% i visinom od 300 piksela:

a odgovarajući HTML kod je:

<table border="2" width="80%" height="300" > <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">Nadimak :</font></th> </tr> <tr> <td><font face="Verdana" size="2">Petar</font></td> <td><font face="Verdana" size="2">Petrovic</font></td> <td><font face="Verdana" size="2">Pepe</font></td> </tr> </table>

Ako želimo da stupci budu jednake širine trebalo bi u odgovarajuće <th> ili <td> tagove ubaciti atribute widthsa željenom širiniom. U slučaju naše tabele to znači da treba u svaki <th> tag staviti atribut width sa vrijednošću 33%. Tako, na primjer, možemo napraviti tablicu koja će se protezati preko cijele širine stranice, a svaki stupac će zauzimati točno trećinu širine tablice:

a HTML kod ove tabele glasi:

<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">Nadimak :</font></th> </tr> </font> <tr> <td><font face="Verdana" size="2">Petar</font></td> <td><font face="Verdana" size="2">Petrovic</font></td> <font size="3"> <td><font face="Verdana" size="2">P</font></font><font face="Verdana" size="2">epe</font></td></tr> </table> <font size="3">

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


Petar Popovic Pepe



<th width="33%"><font face="Verdana" size="2">Nadimak :</font></th></tr> <tr> <td><font face="Verdana" size="2">Petar</font></td> <td><font face="Verdana" size="2">Petrovic</font></td> <td><font face="Verdana" size="2">Pepe</font></td> </tr> </table>

Slijedeća dva atributa također mogu biti veoma korisna: cellpadding i cellspacing. Pomoću cellpadding atributa možemo definirati rastojanje između sadržaja polja i njegove granične linije, vrijednost ovog atributa se zadaje u pikselima (po default-u je 1). Pomoću cellspacing atributa može se odrediti rastojanje između pojedinih polja tablice (tj. debljina linije između polja), također u pikselima (po default-u je 1). Ako u našoj tablici zadamo vrijednost cellpadding atributa od 30 piksela, a vrijednost cellspacing atributa od 10 piksela dobit ćemo slijedeću tablicu:

HTML kod ove tabele glasi: <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">Nadimak :</font></th> </tr> <tr> <td><font face="Verdana" size="2">Petar</font></td> <td><font face="Verdana" size="2">Petrovic</font></td> <td><font face="Verdana" size="2">Pepe</font></td> </tr> </table>


Petar Petrovic Pepe

Uvod Boje Uređivanje teksta 1 Uređivanje teksta 2 ListeLinkovi Grafika Tablice 2 MarqueePočetak Home Kraj



HTML BOOK TABLICE 2

Često je potrebno da se pojedina polja tablice protežu duž više redova ili stupaca tablice. Ovo se može postići pomoću atributa colspan i rowspan koji se ubacuju u <td> ili <th> tag onog polja koje želimo posebno formatirati. Vrijednost ovih atributa zadaje se brojem stupaca ili redova tablice duž kojih se treba prostirati dano polje. U slijedećem primjeru izrade rasporeda sati objašnjena je upotreba ovih atributa:

HTML kod rasporeda sati izgleda ovako (u kojem smo radi preglednosti izostavili tag <font>, a koji se mora staviti u svako polje tabele posebno kako bi i Netscape Navigator prikazao tekst u odgovarajućem fontu) :

<table border="2" width="100%"> <tr> <th rowspan="2" colspan="2"><img src="space.gif"></th> <th colspan="5"> Dani u nedjelji :</th> </tr> <tr> <th width="20%">ponedjeljak</th> <th width="20%">utorak</th> <th width="20%">srijeda</th> <th width="20%">četvrtak</th> <th width="20%">petak</th> </tr> <tr> <th rowspan="5"><br><br>s<p>a<p>t<p>i<p></th> <th>1.</th> <td>francuski</td> <td>programiranje</td> <td>tjelesni</td> <td>kemija</td> <td>francuski</td> </tr> <tr> <th>2.</th> <td>matematika</td> <td>francuski</td> <td>tjelesni</td> <td>kemija</td> <td>francuski</td> </tr> <tr> <th>3.</th> <td>tjelesni</td> <td>matematika</td> <td>programiranje</td> <td>biologija</td> <td>engleski</td> </tr> <tr> <th>4.</th> <td>tjelesni</td> <td>matematika</td> <td>fizika</td> <td>informatika</td>

Dani u nedjelji :

ponedjeljak utorak srijeda četvrtak petak

s

a

t

i

1. francuski programiranje tjelesni kemija francuski

2. matematika francuski tjelesni kemija francuski

3. tjelesni matematika programiranje biologija engleski

4. tjelesni matematika fizika informatika engleski

5. fizika razredni geografija informatika matematika



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

Napomena:

U prvo polje ove tablice stavljena je jednu providna gif slika pod nazivom space.gif. Ovo je potrebno jer svako polje tablice mora imati neki sadržaj, inače je browser neće prikazati.

Ovaj gif fajl kopirajmo na hard disk i kasnije ga možemo upotrebljavati na novim HTML stranicama. Desnim klikom na ovaj kvadrat:

dobijemo pop-up meni iz kojeg izabiremo Save Picture as:

Cijela tablica kao i svako polje posebno mogu imati različitu boju pozadine od ostatka stranice. Ovo se postiže umetanjem atributa bgcolor u slijedeće tagove: <table>, <td> ili <th>. Vrijednost se zadaje heksadecimalnim kodom boje ili njenim imenom, isto kao i kod boje pozadine stranice u <body> tagu.

U slijedećem primjeru pogledajmo "obojeni" raspored sati:

<table border="2" width="95%" bgcolor="#ffffff"> <tr> <th rowspan="2" colspan="2" bgcolor="#b0e0e6"><img src="space.gif" width="10" height="10"></th> <th colspan="5" bgcolor="#ffff00"> Dani u nedjelji :</th> </tr> <tr> <th width="20%" bgcolor="#9acd32">ponedjeljak</th> <th width="20%" bgcolor="#9acd32">utorak</th> <th width="20%" bgcolor="#9acd32">srijeda</th> <th width="20%" bgcolor="#9acd32">četvrtak</th> <th width="20%" bgcolor="#9acd32">petak</th> </tr> <tr> <th rowspan="5" bgcolor="#ffff00"> <p>s<p>a<p>t<p>i<p> </th> <th bgcolor="#9acd32">1.</th> <td bgcolor="#b0e0e6">francuski</td> <td bgcolor="#b0e0e6">programiranje</td> <td bgcolor="#b0e0e6">tjelesni</td> <td bgcolor="#b0e0e6">kemija</td> <td bgcolor="#b0e0e6">francuski</td> </tr> <tr> <th bgcolor="#9acd32">2.</th> <td bgcolor="#b0e0e6">matematika</td> <td bgcolor="#b0e0e6">francuski</td> <td bgcolor="#b0e0e6">tjelesni</td> <td bgcolor="#b0e0e6">kemija</td> <td bgcolor="#b0e0e6">francuski</td> </tr> <tr> <th bgcolor="#9acd32">3.</th> <td bgcolor="#b0e0e6">tjelesni</td> <td bgcolor="#b0e0e6">matematika</td> <td bgcolor="#b0e0e6">programiranje</td> <td bgcolor="#b0e0e6">biologija</td> <td bgcolor="#b0e0e6">engleski</td> </tr> <tr> <th bgcolor="#9acd32">4.</th> <td bgcolor="#b0e0e6">tjelesni</td> <td bgcolor="#b0e0e6">matematika</td> <td bgcolor="#b0e0e6">fizika</td> <td bgcolor="#b0e0e6">informatika</td> <td bgcolor="#b0e0e6">engleski</td> </tr>



<tr> <th bgcolor="#9acd32">5.</th> <td bgcolor="#b0e0e6">fizika</td> <td bgcolor="#b0e0e6">razredni</td> <td bgcolor="#b0e0e6">geografija</td> <td bgcolor="#b0e0e6">informatika</td> <td bgcolor="#b0e0e6">matematika</td> </tr> </table>

HTML kod ovog "obojenog" rasporeda sati izgleda ovako:

<table border="2" width="100%" bgcolor="#ffffff"> <tr> <th rowspan="2" colspan="2" bgcolor="#b0e0e6"><img src="space.gif"></th> <th colspan="5" bgcolor="#ffff00"> Dani u nedjelji :</th> </tr> <tr> <th width="20%" bgcolor="#9acd32">ponedjeljak</th> <th width="20%" bgcolor="#9acd32">utorak</th> <th width="20%" bgcolor="#9acd32">srijeda</th> <th width="20%" bgcolor="#9acd32">četvrtak</th> <th width="20%" bgcolor="#9acd32">petak</th> </tr> <tr> <th rowspan="5" bgcolor="#ffff00">s<p>a<p>t<p>i<p></th> <th bgcolor="#9acd32">1.</th> <td bgcolor="#b0e0e6">francuski</td> <td bgcolor="#b0e0e6">programiranje</td> <td bgcolor="#b0e0e6">tjelesni</td> <td bgcolor="#b0e0e6">kemija</td> <td bgcolor="#b0e0e6">francuski</td> </tr> <tr> <th bgcolor="#9acd32">2.</th> <td bgcolor="#b0e0e6">matematika</td> <td bgcolor="#b0e0e6">francuski</td> <td bgcolor="#b0e0e6">tjelesni</td> <td bgcolor="#b0e0e6">kemija</td> <td bgcolor="#b0e0e6">francuski</td> </tr> <tr> <th bgcolor="#9acd32">3.</th> <td bgcolor="#b0e0e6">tjelesni</td> <td bgcolor="#b0e0e6">matematika</td> <td bgcolor="#b0e0e6">programiranje</td> <td bgcolor="#b0e0e6">biologija</td> <td bgcolor="#b0e0e6">engleski</td> </tr> <tr> <th bgcolor="#9acd32">4.</th> <td bgcolor="#b0e0e6">tjelesni</td> <td bgcolor="#b0e0e6">matematika</td> <td bgcolor="#b0e0e6">fizika</td> <td bgcolor="#b0e0e6">informatika</td> <td bgcolor="#b0e0e6">engleski</td> </tr> <tr> <th bgcolor="#9acd32">5.</th> <td bgcolor="#b0e0e6">fizika</td> <td bgcolor="#b0e0e6">razredni</td> <td bgcolor="#b0e0e6">geografija</td> <td bgcolor="#b0e0e6">informatika</td> <td bgcolor="#b0e0e6">matematika</td> </tr> </table>

Kao što se iz ovog primjera vidi atribut bgcolor koji zadajemo u <th> ili <td> tagu "pregazit" će onu boju koju ste zadali u <table> tagu. U <table> tagu zadali smo bijelu boju pozadine koja se vidi samo na ivicama tabele



(ako koristimo Internet Explorer) jer smo u svakom pojedinačnom polju zadali posebnu boju pozadine bgcolor atributom.

Ako nismo zadovoljni sivim okvirom tabele njegovu boju možemo promijeniti pomoću bordercolor atributa u <table> tagu. U slijedećem primjeru raspored sati ima crni okvir:

što smo postigli na slijedeći način:

<table border="2" width="100%" bgcolor="#ffffff" bordercolor="#000000"> ...

Dani u nedjelji :

ponedjeljak utorak srijeda četvrtak petak

s

a

t

i

1. francuski programiranje tjelesni kemija francuski

2. matematika tjelesni kemija francuski francuski

3. tjelesni matematika programiranje biologija engleski

4. tjelesni matematika fizika informatika engleski

5. fizika razredni geografija informatika matematika

Uvod Boje Uređivanje teksta 1 Uređivanje teksta 2 ListeLinkovi Grafika Tablice 1 MarqueePočetak Home Kraj



HTML KNJIGA MARQUEE

Web stranicama možemo dodati dinamiku. Na stranicama se mogu vidjeti slova koja trepere ili kližu preko stranice. Ovo se može postići pomoću dva taga: <blink> i <marquee>. Netscape Navigator prepoznaje tag <blink>, a ne prepoznaje tag <marquee>, dok je kod Internet Explorera obrnuto. Međutim ova dva taga nemaju isti učinak. <blink> dovodi do treperenja teksta u jednom mjestu, dok <marquee> tag dovodi do klizanja teksta preko stranice. Iz tog razloga bi bilo dobro da istovremeno koristimo oba taga, umetnuta jedan u drugi, tako da će korisnici Explorera vidjeti tekst koji kliže, a korisnici Netscape Navigatora će vidjeti tekst koji treperi.

Evo kako izgleda učinak ova dva taga:

čiji je odgovarajaći HTML kod: <marquee><blink>INTERNET</blink></marquee>

Vidjet ćemo samo jedan od ova dva efekta u zavisnosti od toga kojim browserom surfamo. Ako ovu stranicu promatramo iz Internet Explorera onda vidimo da riječ "INTERNET" klizi preko cijele širine stranice sa desna na lijevo. Ako pak stranicu promatramo iz Netscape Navigatora trebali bi vidijeti kako se ova riječ pali i gasi (treperi) u jednom mjestu. Ako imamo i jedan i drugi browser pogledajmo ovu stranicu u oba, da bi uvidjeli razliku. Naravno da tekst unutar ovih tagova možemo formatirati pomoću <font> taga kako bi postigli što ljepši učinak.

Pogledajmo ovaj obojeni pozdrav:

HTML kod u ovom slučaju glasi:

<font face="Comic Sans MS" size="7"><marquee><blink> <font color="#0000ff">I</font> <font color="#ff0000">N</font> <font color="#00ff00">T</font> <font color="#00ffff">E</font> <font color="#ff1493">R</font> <font color="#ffff00">N</font> <font color="#ff00ff">E</font> <font color="#ff9300">T</font> </blink></marquee></font>

Za svako slovo posebno smo definirali boju, a sva slova imaju veličinu 7.

Internet Explorerov <marquee> tag mnogo je bogatiji u opcijama. Pomoću atributa width, čija se vrijednost zadaje u pikselima ili u postocima širine stranice, možemo

INTERNET

I N T E R N E T

Page 1 of 2MARQUEE

13.10.2010http://www.portalalfa.com/1/Html/marquee.htm

zadati da tekst klizi samo preko dijela stranice. Pomoću atributa bgcolor možemo zadati boju pozadine preko koje će tekst klizitii. U slijedećem primjeru bijeli tekst klizi samo preko 50% širine stranice i to po crnoj pozadini:

Ovaj efekat će vidjeti samo korisnici Internet Explorera.

Ako želimo promijeniti smjer klizanja na desnu stranu to možemo postići atributom: direction="right". Sad će tekst kliziti sa lijeva na desno:

HTML kod izgleda ovako

<center> <font size="7" color="#ffffff"> <marquee width="50%" bgcolor="#000000" direction="right"><blink> INTERNET </blink></marquee></font></center>

Pomoću atributa behavior="alternate" možemo zadati tekstu da klizi naprijed - nazad:

HTML kod izgleda ovako: <center> <font face="Arial" size="7" color="#ffffff"> <marquee width="50%" bgcolor="#000000" behavior="alternate"><blink> INTERNET </blink></marquee></font> </center>

INTERNET

INTERNET

INTERNET

POČETAK

Uvod Boje Uređivanje teksta 1


Linkovi Grafika Tablica1 Tablica2Početak Home Kraj

Page 2 of 2MARQUEE

13.10.2010http://www.portalalfa.com/1/Html/marquee.htm