Izrada Weba PDF

Sadraj
1. Upoznavanje s Internetom........................................... 3
5.2.6. Tag <font>................................................... 24
1.1. Kako je nastao Internet .......................................... 3
5.2.7.Oznake za formatiranje teksta...................... 31
1.2. to je i emu slui Internet? ................................... 3
5.3. Liste ......................................................................... 32
1.3. Nain rada Interneta ............................................... 4
5.3.1. Ureene liste.................................................. 32
1.3.1. Protokoli ........................................................ 4
5.3.2. Neureene liste.............................................. 34
1.3.2. Adresiranje raunala ..................................... 5
5.3.3.Ugnijeene liste ............................................ 36
1.4. to se sve moe raditi na Internetu? ...................... 6
5.4. Slike ......................................................................... 37
2. World Wide Web ........................................................... 8
5.4.1. Formati slika za Web ..................................... 37
3. HTML ............................................................................. 9
5.4.2.URL................................................................. 37
3.1. to je to HTML?................................................... 9
5.5.Linkovi (Hyperlink) .................................................... 41
3.2. Struktura HTML stranice......................................... 9
5.6. Naredba <body> ...................................................... 43
3.3. Kako emo izraivati web stranice ....................... 13
5.7. Naredba<hr>............................................................ 44
4. XHTML ......................................................................... 14
5.8. Tablice u HTML........................................................ 45
4.1. Osnovna pravila XHTML? .................................... 14
5.8.1. Definiranje irine ............................................ 45
5. Izrada web stranice .................................................... 17
5.8.2. Definiranje boje .............................................. 47
5.1. Najosnovniji elementi <head> taga ...................... 17
5.8.3. Definiranje debljine i boje ruba
5.1.1. Naslov stranice <title> tag ........................... 17
tablice i elije ............................................... 49
5.1.2. Meta tag character-encoding....................... 18
5.8.4. Razmak izmeu elija .................................... 50
5.2. Tagovi za opis teksta............................................ 18
5.8.5. Razmak izmeu ruba i sadraja elije............ 51
5.2.1. Odlomci ....................................................... 18
5.8.6. Ugnjedene tablice ........................................ 56
5.2.2. Naredba tag <br> ........................................ 20

5.2.3. Razmak izmeu rijei ( ).................... 21
5.2.4. Isti atribut na veem broju stranica.............. 22
5.2.5. Naslovi ........................................................ 23
U svijetu punom zvunih i razvikanih rijei,

trenutno postoji jedna koja je toliko buna da
izluuje ostatak rjenika Internet
Nepoznati mudrac
1. Upoznavanje s Internetom
1.1. Kako je nastao Internet
Korijeni Interneta seu jo iz kraja ezdesetih godina prolog stoljea, kada je ameriko Ministarstvo obrane pokrenulo
projekt raunalne mree ARPANET (Advanced Research Project Agency). Cilj ARPANETA bilo je povezivanje nekoliko
raunala u etiri sveuilita u dravama Kalifornija i Utah.
Kada meusobno povezujemo raunala kako bismo izmeu njih dijelili podatke i ostale resurse nazivamo to
raunalnom mreom.
ARPANET je bio zamiljen kao jedna takva raunalna mrea rasprostranjena po itavom teritoriju Amerike, no s
jednim posebnim zahtjevom koji se kasnije pokazao kao kljuni faktor za nastanak, uspjeh i popularizaciju Interneta.
Kako je svijetom vladao Hladni rat, ameriko Ministarstvo obrane trailo je nain da raunalna mrea i dalje radi, ak i
ako netko uniti dio raunalne mree. ARPANET je raunala mrea koje podatke prenosi kao male grupe podataka
(paketi) koji se do odredita kreu meusobno nezavisno. Ako bi dio komunikacijskih linija bio uniten, ti paketi
informacija bi mogli nastaviti traiti druge linije, a ako neki paket ne stigne do odredita, poiljalac bi ga mogao ponovno
poslati. Stoga je ARPANET bio prije svega vojna raunalna mrea. Krajem 1969 bila su umreena 4 raunala, tri godine
poslije 40 raunala.
Zahvaljujui otvorenoj arhitekturi ARPANET-a poetkom 70-ih mnoge akademske institucije su vidjele svoju ansu
za razmjenu informacija, rad na zajednikim projektima bez potrebe fizikog okupljanja znanstvenika na jednom mjestu,
sinkronizaciju podataka itd.
S vremenom je ARPANET postao prije svega sredstvo neposredne komunikacije meu raunarskim istraivaima u
SAD te je 1983. ARPANET rezerviran za civilnu upotrebu, a za vojnu je kreiran MILNET. Komunikacija izmeu te dvije
mree je bila mogua i ta je mrea postala poznata kao INTERNET.
Umreavanjem sveuilita i velikih raunalnih centara te povezivanjem manjih mrea na njih nastaje okosnica
amerikog interneta. Na ovaj nain je nastala mrea nad mreama, a pojam INTERNET sve vie udomauje. Krajem
osmdesetih pojam ARPANET je konano i odbaen, a naziv INTERNET zaivljava.
Ideja uvoenja Interneta u Republiku Hrvatsku nastala je 1991. godine, pa je Ministarstvo znanosti i tehnologije
pokrenulo projekt koji se zvao CARNet. Poetkom 1992. godine meunarodna organizacija IANA dodijelila je CARNetu
pravo za administriranjem itave Internet zajednice u Hrvatskoj, tj. sve to se nalazi iza Internet adresa koje zavravaju s
.hr kao oznake za resurse na Internetu smjetene u Hrvatskoj.
1.2. to je i emu slui Internet?

Jednom kada pristupite Internetu moete initi svata. Moete primati i slati poruke drugim korisnicima, pristupati
ogromnoj koliini informacija, sluiti se raznim uslugama i servisima, sudjelovati u diskusijama s nepoznatim ljudima iz
itavog svijeta, moete igrati igre, gledati fotografije, sluati glazbu, kupovati razne stvari, pronalaziti razne programe,
ulagati novac Internet obuhvaa previe toga da bi ga se moglo svesti u jednu definiciju.
Fiziki gledano Internet je jedan veliki skup meusobno umreenih raunala. Broj je tako velik da u svakom trenutku
postoje na tisue raunala unutar mree koja ne rade, a da nitko ne osjeti.
1.3. Nain rada Interneta

Kada se elimo spojiti na Internet, prvo moramo naini davatelja Internet usluga u Hrvatskoj ISP (Internet Service
Provider)
Kako je mogue samo tako dodati svoje raunalo u tu mreu i jednostavno se posluiti Internetom?
Tajna je u tome to se Internet temelji na programima koje zovemo klijenti i serveri(slika 1).
Slika 1
Serveri su softverski programi koji se nalaze na hostovima (raunalima) te koji permanentno oekuju upit i prua
uslugu za koju je namijenjen.
Klijenti su softverski programi kojise nalaze na raunalima te koji vre upit te potrauju od servera neki podatak,
tj.sadraj. Web browser je jedan takav klijent.
Internet funkcionira otprilike slino kao i telefonski sustav u koji su takoer spojeni milijuni telefona, a nama je
omogueno da sa svoje linije nazovemo bilo koji drugu liniju telefona u svijetu ako znam njezin broj. Na Internetu
meusobno ne komuniciraju ljudi, ve umjesto njih ine raunalni programi. Nauiti se koristiti Internetom svodi se na
uenje upravljanja klijentskim programima na raunalu.
1.3.1. Protokoli
U jednom trenutku na Internetu dogaa se na milijune prenoenja podataka s jednog umreenog raunala na drugu
umreeno raunalo. Kako bi takva komunikacija bila efikasna i pouzdana, na Internetu postoji sustav po kojem se podaci
alju i primaju u komadiima. Kada jedno raunalo mora poslati podatke drugom raunalu, ti se podaci najprije dijele
rasporeuju u elektronske pakete. Svi ti podaci su numerirani i oznaeni adresom raunala kojem se podaci alju.
Paketii ne putuju istim putem do raunala koje ih prima. Na drugom kraju veze raunalo sakuplja paketie i njihov
sadraj meusobno spaja u jednu cjelinu.
Ovakav sustav ima dvije vane karakteristike:
Efikasnost Internet je organiziran tako da prenese sve pakete na najbri mogui nain.
Pouzdanost odredino raunalo zna se sluiti metodama po kojima provjerava svaki pristigli paket kako bi se
uvjerilo da nije dolo ni do kakve greke tijekom prijenosa. Ako paket sadri neku greku, odredino e raunalo poslati
poruku raunalu poiljatelju te zatraiti taj i taj paket poalji ponovo.
4
Kako bi ovaj sustav mogao funkcionirati, klijentski i serverski programi na Internetu moraju potovati standardne
specifikacije o razmijeni podataka koji se nazivaju protokoli.
Na Internetu se koriste preko stotinu razliitih protokola. Svaki od tih protokola slui tono odreenoj radnji (slika 2).
Slika 2
Dva najvanija protokola koji omoguavaju temeljni prijenos podataka su:

IP koristi se za prijenos paketa s jednog mjesta na drugo mjesto tj. za adresiranje
TCP namijenjen je kontroli paketa i provjeravanju jesu li svi paketi pristigli do odredita bez greke.
Ta su dva protokola toliko vana da se na Internetu zove zajednikim imenom TCP/IP. Milijuni raunala na Internetu, a
na kojima su pokrenuti klijentski i serverski programi razmjenjuju pakete potujui TCP/IP protokol.
1.3.2. Adresiranje raunala

Kako je na Internetu spojeno ogroman broj raunala, svakom raunalu koje se spoji makar i na 5 minuta dodijeli se
jedinstvena brojana oznaka koju zovemo IP adresa. Svako raunalo na Internetu ima razliitu IP adresu.
Broj IP adrese moe izgleda ovako:
142. 165. 85. 43.
Kako IP adrese nisu pamtljive i da nam netko kae pogledajte stranicu
http://194.26.51.165,
teko bismo je zapamtili. Mnogo je lake pamtiti rijei kao npr.
http://www.gogss.hr
Ovakva adresa naziva se Fully Qualified Domain Name (FQDN) ili jednostavno reeno domena (gogss.hr). Oznaka hr
naziva se vrna domena i svaka drava ima svoju vrnu domenu.
hr = Hrvatska
au = Austrija
hu = Maarska
it = Italija
my = Malezija
com = komercijalna adresa
org = organizacija
net = mrene usluge
edu = amerike visokokolske ustanove
gov = amerike vladine ustanove
mil = amerike vojne ustanove
Registracija domena se plaa, a registriranjem neke domene ona se povezuje s IP adresom nekog raunala servera
na kojem se smjetaju web stranice. Uz jednu IP adresu raunala moe biti vezano vie FQDN naziva. Tako web serveri
tvrtki koji se bave iznajmljivanjem web-prostora istodobno posluuju vie razliitih stranica.
Kada smo upisali http://www. gogss.hr u svom web pregledniku, program e kontaktirati sa DNS
serverom (Domain Name Server) koji je zaduen za pretvaranje FQDN tekstualne adrese (domene) u
IP adresu. Kada se pronae traeni DNS server koji nam je pretvorio domenu u IP adresu, odlazimo
na web server s tom IP adresom. Na tom web serveru nalazi se naa traena web stranica.
Softverski program na serveru prua uslugu koja je traena od njega, podaci se najprije dijele i
rasporeuju u elektronske pakete. Svi ti podaci su numerirani i oznaeni IP adresom raunala
kojem se podaci alju. Paketii ne moraju putovati istim putem do raunala koje ih prima. Na
drugom kraju veze raunalo- klijent sakuplja paketie i njihov sadraj meusobno spaja u jednu
cjelinu i prikazuje u web pregledniku.
1.4. to se sve moe raditi na Internetu?

Kada se ovjek upozna s Internetom shvatit e koliko se toga nudi i to sve ljudska mata u stanju reproducirati. Na
Internetu djeluju mnogi servisi(usluge) kojima se moemo sluiti.
Kada je pokrenut projekt ARPANET bilo je zamiljeno da mrea nudi korisnicima samo jedan servis: pokretanje
programa na udaljenim raunalima. Nedugo nakon putanja mree u rad dodana su jo dva servisa: bilo je mogue
prebacivati datoteke s jednog raunala na drugo i mogle su se slati poruke s jednog raunala na drugo putem
elektronike pote.
Tijekom godina popularizacije Interneta servisi su se prilino nagomilali, tako da se na Internetu moe raditi na stotine
stvari, pa evo samo neke od njih:
Slanje i primanje elektronike pote
Igranje igara sam ili protiv drugih korisnika Interneta
Praenje dnevnih novosti
Sudjelovanje u diskusijama grupe korisnika Interneta
Istraivaki rad
Nabava softvera
Kupovina stvari
Rezervacije putnih karata
Sluanje glazbe
Gledanje videa
Uenje
Pronalaenje neijih adresa ili broja telefona

6
Pristupati informacijama o bilo kojoj temi koje se moemo sjetiti
Obavljanje bankarskih poslova bez odlaska u banku
Sve nabrojene radnje temelje se na svega nekoliko osnovnih servisa na Internetu. Servis koji je najzasluniji za
popularizaciju Interneta zove se World Wide Web ili jednostavnije Web.
2. World Wide Web

Radi se o sustavu za objavljivanje raznih tipova informacija i putem kojeg se opet moe pristupiti mnogim drugim
servisima na Internetu. esto se Web poistovjeuje s Internetom, tako da mnogi u poetku misle da su Web i Internet
jedno te isto, a nisu.
Web se temelji na konceptu hiperteksta, pisanog teksta koji sadri izravnu vezu s nekim drugim pisanim tekstom.
Naravno, taj tekst je obogaen i slikama, tablicama zvunim zapisima, videosekvencama, navigacijskim menijima
Svaki pojedini hipertekstualni dokument na Webu zovemo web-stranica. Na cijelom Internetu postoji ogroman broj
raunala koje nazivamo web-serverima. Na njima su smjetene sve web-stranice i dostupne su svakom korisniku
Interneta, u itavom svijetu. Da bismo pristupili Webu, odnosno web-stranicama potreban je program kojeg zovemo webbrowser ili u prijevodu web-preglednik.
2.1. Povijest World Wide Web

Povijest WWW-a je uprkos ogromnom uspjehu jako mlada. Poinje 1990. u enevi. Tim Berners-Lee,
britanski informatiar sa CERN instituta sa nekoliko svojih kolega pokrenuo je inicijativu za koritenje
Interneta u razmjeni informacija na nain da cijeli dokumenti budu vidljivi te uz mogunost prikazivanja
slika i jednostavne navigacije (skakanja s dokumenta na dokument) putem posebno oznaenih dijelova
teksta koji bi imali vezu link. Odluujue je bilo ovo posljednje, uvoenje hiperveza u dokument.
Stup cijelog projekta postaju dva elementa:
HTML (Hypertext Markup Language) - novi format podataka i
HTTP (Hypertext Transfer Protocol) - novi protokol koji omoguuje njegovo prenoenje
Novi softver za krajnjeg korisnika bi trebao omoguiti izvravanje ovih hiperveza i prikazivanje podataka sa bilo kojeg
raunala irom svijeta.
Posebno aktivan u programiranju bio je Marc Andreessen koji je razvio prvi web-browser sa
grafikim sueljem, Browser pod imenom Mosaic. Marc Andreessen, koji je zapoeo bum izaao je iz
Mosaic-Projekta i postao suosniva nove firme: Netscape.
U drugoj polovici 1993. utjecajni svjetski dnevnici poput New York Times-a pisali su o groznici internet
zajednice. Broj radoznalih je brzo rastao, kao i broj servera na kojima je bio instaliran software za http.
Tisue ljudi je poelo uiti HTML i pisati svoje vlastite stranice.
Velike tvrtke poput Microsofta i velikih telekomunikacijskih kompanija u svijetu ispoetka nisu obraali
panju na razvoj interneta, meutim kad su promijenili kurs i ukljuili se u igru Internet doivljava
strahovit uspon.
3. HTML
3.1. to je to HTML?
HTML je skraenica od HyperText Markup Language, a HTML je skriptirani (opisni) jezik za stvaranje web stranica.
HTML nije programski jezik, jer se njime samo opisuje izgled i sadraj web stranice.
Kako se HTML stranice sastoje od obinog tekstualnog koda, mogu se pisati i u najjednostavnijim tekstualnim
ureivaima kao to je Notepad.
Kad jednom nauite kako se pie i kad razumijemo HTML kod moemo nastaviti rad u jednom od programa s
grafikim sueljem kao to je npr. Dreamweaver. U takvim programima moi emo sebi olakati rad, a ujedno
ako neto elimo izmijeniti moi emo to napraviti u samom kodu jer ga razumijemo. Takoer biti emo u stanju
razumjeti tue web stranice i vidjeti kako su drugi rijeili probleme.
U HTML-u, koristimo tag-ove, naredbe, a to je zapravo slovo ili rije opasani uglatim zagradama.
Veina tagovi dolaze u parovima. Prvi aktivira naredbu, a drugi je deaktivira. Razlikuje ih kosa crta
na poetku drugog taga.
kosa crta
Primjer 1
<p>
</p>
Primjer 2
<body>
</body>
prvi dio taga
drugi dio taga
3.2. Struktura HTML stranice

Tri osnovna taga sainjavaju osnovnu strukturu HTML stranice. To su:
1.
HTML je glavni je tag unutar kojeg je nalaze dva taga HEAD i BODY.
2.
HEAD je tag unutar kojeg se stavljaju tagovi koji se ne prikazuju direktno na stranici, ali je opisuju.
3.
BODY je tag unutar kojeg se stavljaju tagovi koji e nam prikazati sadraj stranice. Svi tagovi koje stavljamo
unutar BODY taga bit e prikazani u web pregledniku i utjecati e na prikaz.
Primjer 1 - osnovna struktura web stranice

<html>
<head>
Izmeu dolaze tagovi koji opisuju stranicu
</head>
<body>
Izmeu dolaze tagovi koji e prikazivati sadraj stranice
</body>
</html>
Izgled web stranice i njezina struktura
10
Primjer 2 - struktura web stranice prikazane na gornjoj slici

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Apartmani Villa Haya | Otok Krk | Iznajmljivanje apartmana</title>
<meta name="description" content="Apartmani Villa Haya | Otok Krk | Iznajmljivanje apartmana">
<meta name="keywords" content="apartmani,apartman,Krk,otok Krk,Hrvatska,Villa Haya,Cimerman,privatni smjetaj,iznajmljivanje
apartmana,rezervacija,programi,ronjenje">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="GOOGLEBOT" content="INDEX, FOLLOW">
</head>
<body background="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje apartmana_files/poz-str0.gif" link="#000099" vlink="#000099" alink="#000099" leftmargin="0"
topmargin="0">
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="290" height="50"> </td>
<td width="450" height="50" align="right" valign="middle"><table width="288" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="36"><div align="right"><a href="http://www.cimerman.hr/villahaya/index.htm"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje
apartmana_files/gumb_jez.gif" alt="Hrvatski" name="Hrvatski" width="30" height="15" border="1" id="Hrvatski"></a></div></td>
<td width="36"><div align="right"><a href="http://www.cimerman.hr/villahaya/index_eng.htm"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje
apartmana_files/gumb_jf0.gif" alt="English" width="30" height="15" border="1"></a></div></td>
<td width="36"><div align="right"><a href="http://www.cimerman.hr/villahaya/index_deu.htm"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje
apartmana_files/gumb_jf1.gif" alt="Deutsch" width="30" height="15" border="1"></a></div></td>
<td width="36"><div align="right"><a href="http://www.cimerman.hr/villahaya/index_fra.htm"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje
apartmana_files/gumb_jf2.gif" alt="Franais" width="30" height="15" border="1"></a></div></td>
<td width="36"><div align="right"><a href="http://www.cimerman.hr/villahaya/index_ita.htm"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje
apartmana_files/gumb_jf3.gif" alt="ltaliano" width="30" height="15" border="1"></a></div></td>
<td width="36"><div align="right"><a href="http://www.cimerman.hr/villahaya/index_slo.htm"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje
apartmana_files/gumb_jf4.gif" alt="Slovenina" width="30" height="15" border="1"></a></div></td>
<td width="36"><div align="right"><a href="http://www.cimerman.hr/villahaya/index_mad.htm"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje
apartmana_files/gumb_jf5.gif" alt="Magyar" width="30" height="15" border="1"></a></div></td>
<td width="36"><div align="right"><a href="http://www.cimerman.hr/villahaya/index_ces.htm"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje
apartmana_files/gumb_jf6.gif" alt="etina" width="30" height="15" border="1"></a></div></td>
</tr>
</table> </td>
</tr>
<tr>
<td width="290" bgcolor="#CCCCFF"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje apartmana_files/logo_hr0.gif" width="290" height="100"></td>
<td colspan="2" valign="bottom"> <table width="460" border="0" cellspacing="0" cellpadding="0">
<tr>
</tr>
<tr>
<td height="25"><a href="http://www.cimerman.hr/villahaya/index.htm" >
<img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje apartmana_files/gumb_hr_.gif" name="Image8" width="92" height="25"
border="0"></a></td>
<td width="93" height="25"><a href="http://www.cimerman.hr/villahaya/apartmani/apartmani_hr.htm" ><img src="Apartmani Villa Haya _ Otok Krk _
Iznajmljivanje apartmana_files/gumb_hr0.gif" name="Image7" width="92" height="25" border="0"></a></td>
<td width="92" height="25"><a href="http://www.cimerman.hr/villahaya/programi/programi_hr.htm" ><img src="Apartmani Villa Haya _ Otok Krk _
Iznajmljivanje apartmana_files/gumb_hr1.gif" name="Image9" width="92" height="25" border="0"></a></td>
<td width="92" height="25"><a href="http://www.cimerman.hr/villahaya/cjenik/cjenik_hr.htm"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje
apartmana_files/gumb_hr2.gif" name="Image6" width="92" height="25" border="0"></a></td>
<td width="92" height="25"><a href="http://www.cimerman.hr/villahaya/kontakt/kontakt_hr.htm"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje
apartmana_files/gumb_hr3.gif" name="Image10" width="92" height="25" border="0"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td width="290" height="20" background="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje apartmana_files/poz-lije.gif" bgcolor="#FFCC66"> </td>
<td width="10" height="20"> </td> <td width="450" height="20"> </td>
</tr> <tr>
<td width="290" valign="top" background="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje apartmana_files/poz-lije.gif"> <div align="center">
<table width="290" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><table width="285" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20" height="20"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje apartmana_files/uvlaka10.gif" width="20" height="20"></td>
<td height="20"><div align="left"><font color="#000099" size="2" face="Arial, Helvetica, sans-serif"><a
href="http://www.cimerman.hr/villahaya/apartmani/apartmani_hr.htm" style="text-decoration:none;">slike
i opis naih apartmana</a></font></div></td>
</tr>
<tr>
href="http://www.cimerman.hr/villahaya/cjenik/cjenik_hr.htm" style="text-decoration:none;">raspored
rezervacija</a></font></div></td>
</tr>
<tr>
href="http://www.cimerman.hr/villahaya/kontakt/kontakt_hr.htm" style="text-decoration:none;">kako
do nas?</a></font></div></td>
</tr>
<tr>
11

href="http://www.cimerman.hr/villahaya/krk/krk_hr.htm" style="text-decoration:none;">o
otoku Krku</a></font></div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td><div align="center"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje apartmana_files/sl_krk-m.gif" width="280" height="76"></div></td>
</tr>
<tr>
<td><div align="center">
<table width="280" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="138"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje apartmana_files/sl_krk-k.gif" width="138" height="180"><img
src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje apartmana_files/sl_krk-l.gif" width="138" height="95"><img src="Apartmani Villa Haya _ Otok Krk _
Iznajmljivanje apartmana_files/sl_krk-s.gif" width="138" height="140"></td>
<td width="5"> </td>
<td width="137"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje apartmana_files/sl_krk-g.gif" width="137" height="95"><img
src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje apartmana_files/sl_krk-v.gif" width="137" height="130"><img src="Apartmani Villa Haya _ Otok Krk _
Iznajmljivanje apartmana_files/sl_krk-p.gif" width="137" height="190"></td>
</tr>
</table> </div></td>
</tr></table> </div></td>
<td width="450" valign="top"><div align="justify">
<p><a href="http://www.cimerman.hr/villahaya/apartmani/apartmani_hr.htm"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje
apartmana_files/sl_naslo.jpg" width="450" height="200" border="0"><br>
<img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje apartmana_files/ponuda00.gif" width="450" height="40" border="0">
</a><font color="#000066"
size="2" face="Arial, Helvetica, sans-serif"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje apartmana_files/uvlaka00.gif" width="30" height="5">Uz
potpunu i suvremenu opremljenost, sve nae jedinice su klimatizirane te je svaka obogaena pripadajuom, opremljenom terasom, s kojih se prua predivan pogled
na kvarnerske otoke Cres, Plavnik i Rab te na najljepi mediteranski ortdanski prolaz - izmeu otoka Cresa i Plavnika. </font></p>
<p align="justify"><font color="#000066" size="2" face="Arial, Helvetica, sans-serif"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje
apartmana_files/uvlaka00.gif" width="30" height="5">Nae smjetajne jedinice nude Vam mogunost samostalnog pripremanja hrane u pripadajuim kuhinjama i
vanjskim peenjarama. No, prema vlastitom izboru moete koristiti gastronomsku ponudu koju Vam nude ambijentarne konobe i restauranti u naoj blizini. Dakako
da okolni gradovi nude fascinantan izbor mediteranskih i drugih specijaliteta.</font></p>
<p><font color="#000066" size="2" face="Arial, Helvetica, sans-serif"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje apartmana_files/uvlaka00.gif"
width="30" height="5">Ljubazni sumjetani ponuditi e Vam na prodaju ovei broj lokalni gastro-specijaliteta: prut, ovje meso, mlijeko i sir, vie vrsta riba,
specifino povre, paruge i brokulu te najraznivrsnije voe. Uz to e Vam mnogi domaini ponuditi raznovrsno domae, crno i bijelo vino. </font></p>
<p align="justify"><font color="#000066" size="2" face="Arial, Helvetica, sans-serif"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje
apartmana_files/uvlaka00.gif" width="30" height="5"></font></p>
</div></td>
</tr>
<tr> <td height="20" colspan="3"><img src="Apartmani Villa Haya _ Otok Krk _ Iznajmljivanje apartmana_files/poz-hori.gif" width="750" height="20"></td>
</tr>
</table>
</body>
</html>
U gornjem primjeru vidimo tagove(naredbe) koji nam prikazuju sadraj stranice a nalaze se unutar taga
<body></body>.
Karakteristika HTML je da tagovi(naredbe) imaju svoje atribute. Naredbe i atributi piu se unutar
uglatih zagrada.
Atributi imaju svoje vrijednosti koje se stavljaju pod navodnike. Izmeu vrijednosti i atributa
nalazi se znak jednakosti.
<font color=red face=times>
HTML tag
(naredba)
Ime
atributa
Vrijednost
Vrijednost
Ime
atributa
12
3.3. Kako emo izraivati web stranice

Ove godine web stranice raditi emo u tri koraka, i to:
1.
Prvo emo emo otvoriti Notepad (Start Programs Accessories Notepad) i u njemu utipkati potreban
kod (tagove).
2.
Kako bi spremljeni dokument kasnije mogli testirati kao web stranicu potrebno je nakon zavretka pisanja
koda u Notepadu, spremiti dokument kao
ime_dokumenta.html
ili
ime_dokumenta.htm
Svejedno je, jer HTML stranice mogu imati dvije ekstenzije .html ili .htm. U naziva dokumenta ne stavljajte nikakve
znakove, hrvatska slova(,,,) ili prazna mjesta (space). Pokuajte tvoriti ime koritenjem slova i brojki i koristite
podcrtu (underscore), _, ako elite alternativu za prazno mjesto. Piite nazive malim slovima. Ako ih piete velikim
slovima postoji opasnost da preglednik ne prepozna traenu stranicu.
3.
Nakon to je dokument spremljen kao web stranica dovoljno je kliknuti miem na njega i otvorit e se web
stranica u defaultnom web pregledniku. Iako je Internet Explorer zastupljeniji od ostalih preglednika, potrebno
je testirati web stranice na svim ostalim preglednicima, jer postoji nekonzistentnost meu njima. Osim Internet
Explorer trebamo imati instalirane slijedee preglednike (koji su takoer besplatni):
Mozilla Firefox
Opera
Netscape
Kako biste provjerili izgleda li naa web stranica istovjetno i u drugim pretraivaima potrebno je desnom tipkom mia
na dokument izabrati opciju Open With i web preglednik koji elimo da nam otvori document.
13
4. XHTML
XHTML je skraenica od Extensible HyperText Markup Language. Povijest HTML-a duga je i komplicirana, proeta
raznim previranjima i pokuajima uvoenja novih standarda. 1992. godine pojavila se prva verzija HTML-a. Godine 1994
pojavila se prva beta verzija Netscape(koji se tada zvao Mozilla) koji je brzo postao vodei preglednik i koji je poeo
uvoditi mnoge svoje nestandardne tagove, te je tako nastala prava zbrka sa standardima.Napokon se 1996. godine
standardizira verzija HTML 3.2.
HTML je doao do verzije 4.01. XHTML je 26. sijenja 2000. postao na preporuku W3C(konzorcij koji se bavi
standardiziranjem HTML) novi jezik za izradu web stranica, a doao je kao zamjena za HTML.
U W3C su odluili kako jezik HTML treba biti prepisan u XML-u. Iz svega toga je proizaao XHTML 1.0. Ono
Extensible znaci proiriv ili bolje reeno prilagodljiv. To je potrebno jer se eli da se Internetu moe pristupiti sa svih
platformi i sa razliitih ureaja (npr. mobiteli, web-TV, razliita putna raunala i sl.).
U osnovnoj verziji on nije puno razliitiji od HTML-a 4.01, nego se moe reci da je to proiena verzija HTML-a. To
moemo rei jer su sada pravila dosta stroa. Do sada su preglednici odbacivali pogreke i uvijek pokuavali izvui
maksimum iz stranica punih greaka. To je i dozvoljavala sintaksa HTML-a. Zbog toga su preglednici s vremenom postali
jako glomazni (trebali su mnogo resursa, memorije i dosta snaan CPU). Parseri (programi koji razdvajaju tagove i
zapravo razumiju to treba napraviti) su postali komplicirani. Jasno je da takav komplicirani parser ne moe biti pohranjen
u memoriji mobilnog ureaja. Zbog toga se ide na pojednostavljenja, a ona mogu samo proizai iz stroih pravila.
4.1. Osnovna pravila XHTML

1. XHTML mora imati DOCTYPE najavu
<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
</body>
</html>
DOCTYPE najava definira tip dokumenta, kao na donjem primjeru
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
14
Postoje 3 tipa XHTML dokumenta:

DTD XHTML tono opisuje kakvu sintaksu i pravila koristiti kod XHTML
1.
STRICT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2.
TRANSITIONAL
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3.
FRAMESET
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

2. Dokument mora biti dobro formiran

<head> ... </head>
<body> ... </body>
</html>
3. Tagovi se piu malim slovima

Krivo
Ispravno
<BODY>
<body>
<P>This is a paragraph</P>
<p>This is a paragraph</p>
</BODY>
</body>
4. Atributi takoer moraju se slagati malim slovima

Krivo
<table WIDTH="100%">
Ispravno
<table width="100%">
5. Vrijednosti atributa moraju se stavljati pod navodnicima

Krivo
<table width=100%>
Ispravno
<table width="100%">
15
6. Tagovi se moraju se zatvoriti

Krivo
Ispravno
<p>This is a paragraph
<p>This is a paragraph</p>
<p>This is another paragraph
<p>This is another paragraph</p>
Krivo
Ispravno
This is a break<br>
This is a break<br />
Here comes a horizontal rule:<hr>
Here comes a horizontal rule:<hr />
Here's an image <img src="happy.gif" alt="Happy face">
Here's an image <img src="happy.gif" alt="Happy face" />
7. Tagovi moraju biti pravilno ugnijeeni

Krivo
Ispravno
<b><i>This text is bold and italic</b></i>
Krivo
<b><i>This text is bold and italic</i></b>
Ispravno
<ul>
<ul>
<li>Coffee</li>
<li>Coffee</li>
<li>Tea
<li>Tea
<ul>
<ul>
<li>Black tea</li>
<li>Black tea</li>
<li>Green tea</li>
</li>
</ul>
<li>Milk</li>
</ul>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
8. Id atribut zamjenjuje name atribut za tagove a, applet, frame, iframe, img, and map
Krivo
<img src="picture.gif" name="picture1" />
Ispravno
<img src="picture.gif" id="picture1" />
16
5. IZRADA WEB STRANICE

5.1. Najosnovniji elementi <head> taga
5.1.1.Naslov stranice <title> tag
Jedan od obaveznih tagova koji dolazi unutar <head> taga je tag <title>. Naslov stranice vidjeti emo na naslovnoj
liniji preglednika (slika 3) i on se ne izostavlja kod izrade web stranice. Naslovom stranice daje se ime i u nekoliko rijei
opisuje namjena te stranice. Unutar ovog elementa nije dozvoljeno koritenje znakova , /, :, -, ; jer operativni sistem moe
imati problema s takvim nazivima.
Primjer 1
<head>
<title>Moja prva web stranica</title>
</head>
<body>
Ovo je tekst moje prve web stranice
</body>
</html>
Naslov stranice
Slika 3
17
5.1.2. Meta tag character-encoding

Jedan od obaveznih tagova koji dolazi unutar <head> taga. Govori pregledniku koji skup znakova treba koristiti za
prikazivanje tekstualnih dijelova web stranice. Moemo koristiti razliite naine kodiranja za prikazivanje hrvatskih
znakova kao npr.:
1. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />,
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Primjer 2
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<title>Moja druga web stranica</title>
</head>
<body>
Ovo je tekst moje druge web stranice
</body>
</html>
5.2. Tagovi za opis teksta

5.2.1. Odlomci
U HTML-u je praksa da se odlomci oznae s tagom <P> i </P>. Preglednik e automatski dodati razmak izmeu
redaka kad poinjete novi paragraf.
Primjer 1
<head>
<title>Unoenje teksta u odlomcima</title>
</head>
<body>
<p>Uz potpunu i suvremenu opremljenost, sve nae jedinice su klimatizirane te je svaka obogaena pripadajuom, opremljenom terasom, s
kojih se prua predivan pogled na kvarnerske otoke Cres, Plavnik i Rab te na najljepi mediteranski ortdanski prolaz - izmeu otoka Cresa i
Plavnika.</p>
<p>Ljubazni sumjetani ponuditi e Vam na prodaju ovei broj lokalni gastro-specijaliteta: prut, ovje meso, mlijeko i sir, vie vrsta riba,
specifino povre, paroge i brokule te najraznovrsnije voe. Uz to e Vam mnogi domaini ponuditi raznovrsno domae, crno i bijelo
vino.</p>
</body>
</html>
18
<p> tag ima jedan glavni atribut: align

Atribut
Vrijednost
align
left
Opis
poravnanje teksta po zamiljenoj lijevoj margini defaultna vrijednost
right
poravnanje teksta po zamiljenoj desnoj margini
center
poravnanje teksta po zamiljenoj sredinjoj liniji
justify
poravnanje teksta po zamiljenoj lijevoj i desnoj liniji-obostrano
Kod knjina tipografije tekst u odlomcima poravnava se obostrano ili u lijevo.

Primjer 2
<head>
<title>Poravnavanje teksta </title>
</head>
<body>
<p align="justify">Za ugodno provedeno vrijeme aktivnog ili rekreativnog odmora sa razliitim sadrajima pozivamo Vas u nau oazu mira.
Nai apartmani jednako su atraktivni za romantine trenutke udvoje, obitelji sa djecom i veselice s prijateljima. Poloaj na kojem se
nalazimo omoguava Vam izlete u ak dva nacionalna parka (NP Sjeverni Velebit i NP Plitvika jezera), odlaske na more i posjet poznatom
Utoitu za medvjedie u Kuterevu. Osebujna priroda, osmiljeno i ispunjeno vrijeme, gostoljubivi i srdani domaini uiniti e Va boravak
kod nas nezaboravnim. </p>
</body>
</html>
HTML ignorira prelaske u novi red napisane u tekstu Notepad-a. Ako smo sav tekst napisali unutar jednog taga <p>
takav tekst je u biti napisan u jednom retku. U koliko e se redaka takav tekst prikazati u pregledniku ovisi o koliini
teksta i irini prikaza preglednika. Manja irina preglednika prikaz veeg broja redaka i obratno (slika4).
Slika 4
19
5.2.2.Naredba tag <br>

Line break omoguava premjetanje teksta u drugi red odmah ispod bez dodanog razmaka-praznog retka. To je
upotrebljivo u sluaju kad ne elite da preglednik umee prazan red.
<br> tag nema zavrni dio naredbe, i obino se koristi sam, bez ikakvih atributa. U XHTML naredba se pie na
slijedei nain
<br />
Vei broj naredbi <br /> jedna za drugom e rezultirati veim brojem praznih redaka.
Primjer 1
<head>
<title>Prelazak u novi red</title>
</head>
<body>
Nai apartmani jednako su atraktivni za romantine trenutke udvoje, obitelji sa djecom i veselice s prijateljima. <br /> Poloaj na kojem se
nalazimo omoguava Vam izlete u ak dva nacionalna parka (NP Sjeverni Velebit i NP Plitvika jezera) odlaske na more i posjet poznatom
Utoitu za medvjedie u Kuterevu. Osebujna priroda, osmiljeno i ispunjeno vrijeme, gostoljubivi i srdani domaini uiniti e Va boravak
kod nas nezaboravnim. </p>
</body>
</html>
Primjer 2
<head>
<title>Prelazak u novi red</title>
</head>
<body>
Nai apartmani jednako su atraktivni za romantine trenutke udvoje, obitelji sa djecom i veselice s prijateljima. <p />
<p align="justify">Poloaj na kojem se nalazimo omoguava Vam izlete u ak dva nacionalna parka (NP Sjeverni Velebit i NP Plitvika
jezera) odlaske na more i posjet poznatom Utoitu za medvjedie u Kuterevu. Osebujna priroda, osmiljeno i ispunjeno vrijeme,
gostoljubivi i srdani domaini uiniti e Va boravak kod nas nezaboravnim. </p>
</body>
</html>
20
5.2.3. Razmak izmeu rijei ( )

Takoer HTML ignorira vie od jednog razmake izmeu rijei napisane u tekstu Notepad-a. Ako elimo izmeu nekog
teksta ubaciti vie od jednog razmaka moramo upisati koji doslovce znai non-breaking space. Ako elimo imati tri
razmaka izmeu rijei moramo napisati slijedee:
rije rije
(space + 2 )
Openito specijalni znakovi poinju sa & i zavravaju sa ; , dok je izmeu njih odreeni kod eljenog znaka. Tih
znakova ima izuzetno mnogo, no neki najee koriteni su:
&
<
>
- &
- ©
- <
- >
- ½
- ®
- °
-
-
- ±
Primjer 1
<head>
<title>Naslovi</title>
</head>
<body>
<h1 align="center">DOBRO DOLI </h1>
<p>Vrti radi od ponedjeljka do petka od 5.30 do 16.30 sati. Nastojimo biti to otvoreniji i fleksibilniji pa o vaoj potrebi ovisi vrijeme dolaska
djeteta u vrti i odlaska djeteta iz vrtia. Svakodnevno su na raspolaganju vaem djetetu i vama nai struni suradnici.</p>
</body>
</html>
21
5.2.4. Isti atribut na veem broju elemenata stranice

Kada elimo na veem broju susjednih elemenata stranice dodijeliti isti atribut odjednom, stavimo atribut unutar taga
<div> koji zatim okruuje sve elemente na koje se treba primijeniti na stranici.
Primjer 1
<head>
<title>vie atributa na vie elemenata stranice</title>
</head>
<body>
<p align="justify">Uz rubove prozora sa slikom nalazi se horizontalno i vertikalno ravnalo (slika 10). Ako ravnalo nije prikazano moramo s
linije menija izabrati View Rulers. Desnim klikom mia na ravnalo pojavljuje se izbor mjernih jedinica kojima emo prikazivati dimenzije
slike.</p>
<p align="justify">Klikom na horizontalno ili vertikalno ravnalo, a zatim dranjem, povlaenjem i putanjem tipke mia na slici dobivamo
horizontalne ili vertikalne vodilice. U gornjem desnom kutu nalazi se ishodite koje se moe klikom, a zatim povlaenjem pomicati po slici.
Po postavci ishodite se nalazi na lijevom vrhu slike.</p>
<p align="justify">Broj vodilica nije ogranien, a njihovo premjetanje mogue je klikom miem na ikonu, a zatim klikom na vodilice,
dranjem i povlaenjem premjetamo vodilice po slici. Ako je oznaena neka druga alatka, pritiskom i dranje tipke CTRL na tastaturi
dobivamo kursor a zatim klikom na vodilice, dranjem i povlaenjem premjetamo vodilice po slici </p>
</body>
</html>
Primjer 2
<head>
<title>jedan atribut na vie elemenata stranice</title>
</head>
<body>
<div align="justify">
<p>Uz rubove prozora sa slikom nalazi se horizontalno i vertikalno ravnalo (slika 10). Ako ravnalo nije prikazano moramo s linije menija
izabrati View Rulers. Desnim klikom mia na ravnalo pojavljuje se izbor mjernih jedinica kojima emo prikazivati dimenzije slike.</p>
<p>Klikom na horizontalno ili vertikalno ravnalo, a zatim dranjem, povlaenjem i putanjem tipke mia na slici dobivamo horizontalne ili
vertikalne vodilice. U gornjem desnom kutu nalazi se ishodite koje se moe klikom, a zatim povlaenjem pomicati po slici. Po postavci
ishodite se nalazi na lijevom vrhu slike.</p>
<p>Broj vodilica nije ogranien, a njihovo premjetanje mogue je klikom miem na ikonu, a zatim klikom na vodilice, dranjem i
povlaenjem premjetamo vodilice po slici. Ako je oznaena neka druga alatka, pritiskom i dranje tipke CTRL na tastaturi dobivamo kursor
a zatim klikom na vodilice, dranjem i povlaenjem premjetamo vodilice po slici </p>
</div>
</body>
</html>
22
5.2.5. Naslovi
Postoji est tagova za naslove(heading), i svi su forme: <hn>, gdje je n broj od 1 do 6. Broj 1 naslova je najvei. Kod
ove je naredbe takoer potrebno zatvoriti tag.
<h1>veliinom najvei naslov</h1>
<h6> veliinom najmanji naslov </h6>
Primjer 1
<head>
</head>
<body>
<h1>naslov h1</h1>
<h2>naslov h2</h2>
<h3>naslov h3</h3>
<h4>naslov h4</h4>
<h5>naslov h5</h5>
<h6>naslov h6</h6>
</body>
</html>
Primjer 2
<head>
</head>
<body>
<h1 align="center">DOBRO DOLI U VRTI</h1>
<h2>Radno vrijeme vrtia </h2>
<p>Vrti radi od ponedjeljka do petka od 5.30 do 16.30 sati. Nastojimo biti to otvoreniji i fleksibilniji pa o vaoj potrebi ovisi vrijeme dolaska
djeteta u vrti i odlaska djeteta iz vrtia. Svakodnevno su na raspolaganju vaem djetetu i vama nai struni suradnici.</p>
<p>Pedagog: Marija Setko<br />
Psiholog: Dubravka Glavini<br />
Pedagoki voditelj: Branka Pogaj<br />
Zdravstveni voditelj: Adrijana Badanjak<br />
Ravnateljica: Snjeana Lonar<br /></p>
<h2>Nae dosadanje aktivnosti</h2>
<p >Tijekom godine u svakoj skupini organiziramo druenje djece i roditelja na kojima se zajedniki igramo ili neto izraujemo, slikamo
oblikujemo, stvaramo...</p>
<p>Snimamo tijekom godine razne situacije u skupini, a video zapise gledamo i komentiramo zajedno s roditeljima.Posjeujemo izlobe,
Muzej,kazalita, kino te odlazimo na razliite izlete i posjete. Aktivno se ukljuujemo u gradske manifestacije: Dani kruha, Fanik, Djeja
olimpijada, Dani porta, Cvjetni korzo.Krajem godine organiziramo zavrne susrete predkolaca koji se oprataju od prijatelja, odgojitelja i
vrtia.</p>
<h3>Dani kruha</h3>
</body>
</html>
23
<h1><h6> tagovi ima takoer jedan glavni atribut: align

Atribut
Opis
Vrijednost
left
align
poravnanje teksta po zamiljenoj lijevoj margini defaultna vrijednost
right
poravnanje teksta po zamiljenoj desnoj margini
center
poravnanje teksta po zamiljenoj sredinjoj liniji
justify
poravnanje teksta po zamiljenoj lijevoj i desnoj liniji-obostrano
5.2.6. Tag <font>

Karakteristike nekog teksta koje se mogu mijenjati tagom font su:
1. vrsta pisama font
2. veliina teksta
3. boja teksta
Ako se drugaije ne naznai u HTML-u, posjetitelj neke stranice tekst vidi u podrazumijevanom fontu, boji i veliini.
Podrazumijevana boja je crna, podrazumijevano pismo je Times, a podrazumijevana veliina je 16 piksela.
Atribut
Opis
Vrijednost
face
tekst
size
broj
Ovim atributom mijenjamo optiki izgled teksta.

Ovim atributom mijenjamo veliinu teksta Font moe imati veliinu od
1 do 7. to je vei broj i font je vei.
Takoer moete dodati plus ili minus ispred broja to e poveati ili
smanjiti veliinu fonta za taj iznos. Npr., size="+1" e poveati trenutnu
veliinu fonta za 1, dok e size="-2" smanjiti trenutnu veliinu fonta za 2.
color
tekst ili
heksadecimalni
oblik
Dodjeljuje se ime boje ili njen heksadecimalni oblik.
24
Atribut face
Ovim atributu moete dodijeliti jedan font:
<font face="Arial ">Tekst</font>,
ili cijelu listu fontova:
<font face face="Arial, Verdana, Helvetica, sans-serif">Tekst</font>
Problem kod definiranja fontova je koje fontove korisnik koji gleda nau stranicu ima instalirane na svom raunalu.
U prvom sluaju ako korisnik na raunalu nema instaliran Arial font, preglednik e za prikazivanje stranice koristiti
defaultni font (u veini sluajeva to je Times New Roman).
U drugom sluaju ako korisnik na raunalu nema instaliran Arial font, preglednik e traiti Verdana font, a ako nema
Verdanu, preglednik e traiti Helveticu, a ako nema ni Helvetice, preglednik e traiti bilo koji bez serifni font, a ako
nema ni njega preglednik e za prikazivanje stranice koristiti defaultni font (Times New Roman).
Na veini web stranica koriste se dvije skupine pisama:
1. Serifni fontovi kao to su Times, Garamond, Georgia,
TIMES
ABCDEFGHIJKLMN
abcdefghijklmn
GARMOND
ABCDEFGHIJKLMN
Abcdefghijklmn
GEORGIJA
ABCDEFGHIJKLMN
abcdefghijklmn
25
2. Bez serifa fontovi (sans serif)- kao to su Arial, Helvetika, Verdana
ARIAL
ABCDEFGHIJKLMN
abcdefghijklmn
VERDANA
ABCDEFGHIJKLMN
abcdefghijklmn
COMIC SANS MS
ABCDEFGHIJKLMN
abcdefghijklmn
Primjer 1
<head>
<title>vrsta pisma</title>
</head>
<body>
<h2 align="center"><font face="Comic Sans MS, Verdana, Arial, sans-serif">Djeji vrti - Labin</font></h2>
<p align="justify"><font face="Century Schoolbook, Garamond, Georgia, serif">Djeji vrti ostvaruje svoju djelatnost u centralnom vrtiu i
podrunim odjeljenjima: Jaslice, Vine, Stari grad, Rabac, Raa i Potpian. Djeji vrti svoju djelatnost ostvaruje i obavlja na podruju Grada
Labina i Opina Raa, Sveta Nedelja, Kran i Pian. Temeljem sporazuma o financiranju redovne djelatnosti Djejeg vrtia potpisanog 14.
srpnja 1999.g. Grad Labin i Opine Sveta Nedelja, Raa, Pian i Kran preuzele su obvezu financiranja redovne djelatnosti vrtia.</font></p>
</body>
</html>
26
Atribut size
Ovim atributu dodijeliti emo veliinu teksta:
<font size="5 ">Tekst</font>
Vrijednosti mogu biti od 1 do 7
<font size="1 ">Tekst</font> - najmanja veliina teksta

<font size="7 ">Tekst</font> - najvea veliina teksta
Ako nita ne mjenjamo vrijednost teksta upisanog u odlomcima je 3. Takoer moete dodati plus ili minus ispred broja
i to e poveati ili smanjiti veliinu fonta za taj iznos. Npr., size="+1" e poveati trenutnu veliinu fonta za 1, dok e
size="-2" smanjiti trenutnu veliinu fonta za 2.
Kada bi usporeivali veliine naslova i brojane vrijednosti oznake size postoje ekvivalenti:
veliina teksta
naslov
Boj piksela
<font size=7>
46
<font size=6>
<h1>
32
<font size=5>
<h2>
24
<font size=4>
<h3>
18
<font size=3>
<h4>
16
<font size=2>
<h5>
13
<font size=1>
<h6>
Primjer 1
<head>
<title>veliina teksta</title>
</head>
<body>
<h1>Adobe Photoshop</h1>
<p><font size="2">Adobe Photoshop je najpopularniji program za obradu slike na PC i Macintosh raunalima. Kao i svaki drugi program za
obradu slike, Photoshop vam omoguava izmjenu slika i drugih skeniranih likovnih radova. Programi za obradu slike spadaju u jednu iru
kategoriju pod nazivom programi za slikanje. Kada u tim programima povuete liniju, ona je sastavljena od siunih kvadratnih toaka koji
se nazivaju pikseli. Takva slika naziva se bitmapska slika.</font></p>
<h2><font size="+3">Adobe Photoshop</font></h2>
<p><font size="-1">Neki programi kao to su npr. CorelDRAW, Adobe Ilustrator, spadaju u drugu kategoriju programa pod nazivom
programi za crtanje. Kada u tim programima povuemo liniju koja je sastavljena od matematikih definiranih toaka koje se zovu Beizirove
toke.Neki programi kao to su npr. CorelDRAW, Adobe Ilustrator, spadaju u drugu kategoriju programa pod nazivom programi za crtanje.
Kada u tim programima povuemo liniju koja je sastavljena od matematikih definiranih toaka koje se zovu Beizirove toke.</font></p>
</body>
</html>
27
Primjer 2
<head>
<title>veliina teksta</title>
</head>
<body>
<p><font size="2">Formati slika predstavljaju razliite naine snimanja slika na disk. <font size="+1">Photoshop</font> podrava vie od 20
formata. Jedni formati imaju jedinstvene sisteme kompresija slike, koji omoguavaju snimanje na nain da takve slike zauzmu to manje
prostora. Drugi formati slika omoguavaju razmjenu slika s razliitim aplikacijama koji rade pod Windows ili nekim drugim operativnim
sistemom.</font></p>
</body>
</html>
Atribut color
Ovim atributom dodijeliti emo boju teksta. Vrijednost atributa moe biti ime neke boje
<font color="yellow">Tekst</font>
black
white
red
yellow
lime
cyan
blue
magenta
darkgray
silver
darkred
olive
darkgreen
teal
darkblue
purple
maroon
brown
orange
gold
forestgreen
royalblue
indigo
violet
pink
darkorange
seagreen
seablue
navy
skyblue
plum
tan
lightblue
scarlet
turquoise
lightgreen
lightyellow
chocolate
gray
green
ili to je ee boju definiramo u heksadecimalnim sustavom

<font color ="#23aeff">Tekst</font>
Boje na ekranu se definiraju s tri boje:crvenom, zelenom i plavom. Tako definirane boje nazivaju se RGB od red,
green i blue. Naziva se i aditivni sistem mijeanja boja, jer se boje zbrajaju i mijeanjem svih tri boja u punom intenzitetu
dobivamo bijelu boju.
Svaka od te tri boje moe imati 256 razliitih nijansi tj. tonova. Ukupno boja koje RGB model moe reproducirati je
256 x 256 x 256 = 16 777 216 nijansi. Ako neke boje nema njezina vrijednost je 0, ako je u punom tonu njezina vrijednost
je 255.
Bijelu boju dobijemo kada imamo sve tri boje u punom tonu.
(255 255 255)
red green blue
28
Crnu boju dobijemo kada nemamo sve tri boje.

(0
0)
red green blue

Da biste neku RGB vrijednost mogli koristiti na HTML stranicama , morat emo je pretvoriti u heksadecimalnu
vrijednost. Heksadecimalni brojevi za razliku od dekadskog sustava sa bazom 10 imaju bazu 16. Tako s jednom
znamenkom imamo od 0 do 15 i to:
0123456789abcdef
dekadski
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
heksadecimalni
10
11
12
13
14
15
16
17
18
dekadski
25
26
27
28
29
30
31
32
33
255
heksadecimalni
19
1a
1b
1c
1d
1e
1f
20
21
ff
Za sve heksadecimalne boje u HTML koristimo est znamenki s prefiksom # . Prve dvije znamenke su
heksadecimalna vrijednost crvene boje, druge dvije su za zelenu boju i zadnje dvije za plavu boju.
Bijelu boju dobijemo u heksadecimalnom sustavu
(ff
ff
ff)
red green blue

U HTML piemo je #ffffff
Crnu boju dobijemo u heksadecimalnom sustavu
(00
00
00)
red green blue

U HTML piemo je #000000
Primjer 1
<head>
<title>definiranje boje</title>
</head>
<body>
<h1><font color="#CC9900">Formati slika za Web i njihovo optimiziranje</font></h1>
<p><font color="tan">Formati slika predstavljaju razliite naine snimanja slika na disk. Photoshop podrava vie od 20 formata. Jedni
formati imaju jedinstvene sisteme kompresija slike, koji omoguavaju snimanje na nain da takve slike zauzmu to manje prostora. Drugi
formati slika omoguavaju razmjenu slika s razliitim aplikacijama koji rade pod Windows ili nekim drugim operativnim
sistemom.</font></p>
</body>
</html>
29
Primjer 2
<head>
<title>tag font</title>
</head>
<body>
<h1 align="center"><font face="Comic Sans MS, Verdana, Arial, sans-serif" color="#66CCCC" size="+2">Modeli boja (plutajua paleta
channels)</font></h1>
<font color="#003399" face="Century Schoolbook, Garamond, Georgia, serif" size="2"><p align="justify">Svakoj slici photoshop ne pristupa
kao jedinstvenom skupu piksela, ve je vidi u obliku tri ili etiri grupe piksela. Koliko grupa ima moemo vidjeti u plutajuoj paleti
Channels. Ove grupe su poznate pod imenom kanali. Smisao kanala je mogunost selektivne kontrole slike. </p>
<h2><font face="Comic Sans MS, Verdana, Arial, sans-serif">RGB</font> </h2>
<p>Obuhvaa tri osnovne boje: crvenu, zelenu i plavu. Svaka boja moe imati 28 = 256 razliitih nijansi tj. tonova. Ukupno boja koje RGB
model moe reproducirati je 16 777 216 nijansi. Naziva se i aditivni sistem mijeanja boja, jer se boje zbrajaju i mijeanjem svih boja u punom
intenzitetu dobivamo bijelu boju. Svi monitori, ureaji za projekciju, televizori, zasnivaju se na RGB sistemu mijeanja boja.</p></font>
</body>
</html>
Osnovna odlika HTML jezika je nasljeivanje svojstava. Svojstva nekog taga vrijede sve dok se on ne zatvori. Svim
HTML tagovima unutar njega moemo definirati drugaija svojstva i tako sadraj formatizirati na drugi nain. U donjem
primjeru naslov i dva odlomka imaju definiranu istu boju teksta unutar jednog taga <font>. Naslov ima drugu boju teksta
jer je unutar taga <font> definiran tag <font> za naslov.
Primjer 3
<head>
<title>nasljeivanje boje</title>
</head>
<body>
<font color="#cc9999"><p>Dok za sidrenje nalazi se u traci s opcijama, ali on vee na sebe plutajue palete(o njima neto kasnije). Kada paletu
usidrimo na traci opcija ostaje vidljiv samo jeziak palete. Pritiskom mia na jeziak palete otvaramo sadraj paletu, a pritiskom mia izvan
palete zatvaramo sadraj palete. </p>
<h2><font color="#aac366">Plutajue palete</font></h2>
<p>Ako elimo sakriti traku opcija i dok za sidrenje s radne povrine odaberemo s linije menija Window Options. Uz tekst Options s
lijeve strane nestati e znak za potvrdu . Ako elimo otkriti traku opcija i dok za sidrenje s radne povrine odaberemo ponovno s linije menija
Window Options i s lijeve strane pojaviti e se znak za potvrdu.</p></font>
</body>
</html>
Web-Sigurne Boje (Web-Safe Colors)

Boja je WEB-SIGURNA ako izgleda isto u svim pretraivaima. Web-sigurne boje sastoje se od Red-Green-Blue
(RGB) kombinacije brojeva 00, 33, 66, 99, CC i FF.
Dakle, trebalo bi biti 6 razliitih kombinacija to nam daje 216 web-sigurnih boja. Naravno da moete koristiti i druge
kombinacije boja ali postoji mogunost da e ta boja izgledati malo tamnije ili svjetlije kad se stranica gleda u razliitim
pretraivaima.
30
5.2.7.Oznake za formatiranje znakova

U HTML postoje oznake koje pomou kojih tekst moe biti prikazan polucrnim, kurzivnim ili precrtanim slovima. Ako
elimo da odreene rijei budu oznaene moramo ih ostaviti unutar odreenog taga.
<strong></strong> - polucrna slova
<b></b> - polucrna slova
<em></em> - kurzivna slova
<i></i> - kurzivna slova
<cite></cite> - kurzivna slova
<sub></sub> - oznake za tekst ispod pismovne linije
<sup></sup> - oznake za tekst iznad pismovne linije
Primjer 1
<head>
<title>oznake za tekst</title>
</head>
<body>
<p><b>Odnos</b> zumiranja od 100% zove se prikaz stvarnih <i>piksela.</i> <strong>Ovo je</strong> najtoniji prikaz jer vidimo
<em>sliku</em> kako stvarno izgleda. Umanjeni prikaz odbacuje piksele, a uveani prikaz ih rastee. Samo stvarni prikaz prikazuje piksele
bez i najmanjeg traga ekranskog izoblienja. Stvarni prikaz slike vidimo na slikama web stranica, tj. slike koje gledamo ekranski.</p>
<p><cite>Kada</cite> otvaramo novu sliku Photoshop otvara cijelu sliku. Ako se cijela slika moe prikazati u odnosu zumiranja od 100%,
Photoshop e na taj nain otvoriti sliku. Ako se cijela slika ne moe prikazati u zumiranju od 100%, slika e se otvoriti obavezno cijela, ali u
umanjenom prikazu.</p>
<p>H<sub>2</sub>O x SO<sup>2-</sup> </p>
</body>
</html>
31
5.3.Liste
Liste su veoma korisne jer pregledno prikazuju informacije kao na donjem primjeru
Ime datoteke (Vanishing Point)
Format datoteke (psd)
Trenutna veliina prikaza (66,7%)
Na kojem smo nivou(leyeru) slike (Background)
Modeli boja (RGB)
5.3.1.Ureene Liste
Ureene liste koriste se kad elite prikazati sadraj koji ima abecedni ili numeriki redoslijed. Tag (naredba) za
ureene liste je <ol> to ukljuuje i </ol>. Sav tekst izmeu taga <ol></ol> smatra se djelom liste.
OL ima dve atributa TYPE i START.

Atribut
Opis
Vrijednost
TYPE
1, I, i, A ili a.
To predstavlja tip ureivanja koji elite: brojevi, rimski

brojevi (veliki ili mali) i slova. TYPE je po defaultu namjeten
na brojeve.
START
BROJ
START je koristan ako elite nastaviti listu. U sklopu ovog

atributa potrebno je navesti broj kojim elite nastaviti listu. Ako
imate listu od 1 5, i elite nastaviti sa 6, potrebno je namjestiti
START=6 u estom stavku liste. Ako imate listu od A D, i
elite nastaviti listu sa E, namjetate START=5 zato jer je E
peto slovo abecede.
Elementi liste su okrueni <LI> </LI> tagovima. LI ima atribut VALUE.

Atribut
VALUE
Opis
Vrijednost
BROJ
VALUE je jednako kao i START atribut OL tag-a, i koristi

se za nastavljanje lista.
32
Primjer 1
<head>
<title>liste ureene</title>
</head>
<body>
<p>Svaka otvorena slika zauzima vlastiti prozor. Photoshop vam doputa otvaranje vie slika istovremeno. Svaka otvorena slika (slika 9) na
vrhu ima naslovnu liniju koja sadrava:</p>
<ol>
<li>Ime datoteke (Vanishing Point) </li>
<li>Format datoteke (psd)</li>
<li>Trenutna veliina prikaza (66,7%)</li>
<li>Na kojem smo nivou(leyeru) slike (Background)</li>
<li>Modeli boja (RGB)</li>
</ol>
</body>
</html>
Primjer 2
<head>
</head>
<body>
<ol type="I">
<li><i><strong>Hootie & The Blowfish</strong></i> - Cracked Rear View</li>
<li><i><strong>Leonard Cohen</strong></i> - Ten New Songs</li>
<li><i><strong>Mick Jagger</strong></i> - Goddess In The Doorway</li>
<li><i><strong>The Doobie Brothers</strong></i> - The Greatest Hits</li>
<li><i><strong>David Gray</strong></i> - White Ladder</li>
</ol>
</body>
</html>
33
Primjer 3
<head>
</head>
<body>
<font face="Verdana, Arial" color="#0000FF" size="2">
<p>Ovotjedni top 5 UK singlova:</p>
<ol>
<li><b>Robbie Williams feat. Nicole Kidman</b> - Somethin' Stupid</li>
<li><b>Daniel Bedingfield</b> - Gotta Get Thru This</li>
<li><b>Gordon Haskell</b> - How Wonderful You Are</li>
<li><b>Sophie Ellis Bextor</b> - Murder on the Dancefloor</li>
<li><b>Stereophonics</b> - Handbags and Gladrags</li>
</ol>
<p>Ostatak topa 10:</p>
<ol start="6">
<li><b>Ian Van Dahl</b> - Will I</li>
<li><b>S Club 7</b> - Don't stop</li>
<li><b>Samantha Mumba</b> - Lately</li>
<li><b>Kate Winslet</b> - What If</li>
<li><b>Hermes House Band</b> - Country Roads</li>
</ol>
<p>Redoslijed ostalih singlova:</p>
<ol>
<li value="16"><b>Kylie Minogue</b> - Can't Get You Out of My Head</li>
<li value="26"><b>Destiny's Child</b> - Survivor</li>
<li ><b>Jennifer Lopez ft. Ja Rule</b> - I'm Real</li>
<li ><b>David Gray</b> - This years love</li>
<li value="38"><b>Anastacia</b> - Paid My Dues</li>
</ol>
</font>
</body>
</html>
5.3.2.Neureene Liste
Neureene liste koriste se kad elite prikazati sadraj koji nema abecedni ili numeriki redoslijed, ve simbole. Ako
elite stvoriti neureenu listu, umjesto <ol> koristimo <ul>. Stavke u listi dodavaju se upotrebom <li> taga. Tagovi <ul> i
<li> imaju jedan atribut TYPE.
Atribut
TYPE
Opis
Vrijednost
disc, circle i square.
To utjee na izgled simbola koji oznaava listu koji je po

default-u namjetena na disc
34
Primjer 1
<head>
<title>liste neureene</title>
</head>
<body>
<p>Predmeti prvog semestra: </p>
<ul>
<li>Brojevi</li>
<li >Uvod u programiranje</li>
<li>Diferencijalne jednadbe</li>
<li>Analitika geometrija</li>
<li>Statistika</li>
</ul>
</body>
</html>
Primjer 2
<head>
</head>
<body>
<p>Predmeti drugog semestra:</p>
<ul type="square">
<li>Vektori</li>
<li >C++ programiranje</li>
<li>Matrice</li>
<li>Integrali</li>
<li>Statistika-drugi dio</li>
</ul>
</body>
</html>
Primjer 3
<head>
</head>
<body>
<p>Predmeti treeg semestra:</p>
<ul type="square">
<li>Vektori</li>
<li type="circle">C++ programiranje</li>
<li>Matrice</li>
</ul>
</body>
</html>
35
5.3.3.Ugnijeene liste
HTML dozvoljava da se stavi lista u listu.Takva lista se zove ugnijeena. Unutar elementi liste koji su okrueni <LI>
</LI> tagovima stavi nova lista.
Primjer 1
<head>
<title> ugnijeene liste </title>
</head>
<body >
<p>Prvi semestar:</p>
<ol>
<li>Brojevi</li>
<li>Uvod u programiranje
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>VB</li>
<li>Perl</li>
</ul>
</li>
<li>Diferencijalne jednadbe</li>
<li>Analiticka geometrija</li>
<li>Statistika</li>
</ol>
</body>
</html>
36
5.4. Slike
Web stranice bi izgledale prilino dosadne da nema slika na njima. Slike su te koje Webu daju vizualni izgled. Prije
nego ponemo eksperimentirati sa slikama, trebamo se upoznati sa osnovnim tipovima slika koji se koriste na web
stranicama.
Slike za Web trebaju biti male. Pod pojmom male ne misli se na dimenzije, ve na veliinu datoteke koja zauzima
prostor na disku i koja se uitava prilikom prijenosa podataka. Za prijenos podataka kroz telefonske ice potrebno je
vrijeme. Neka istraivanja govore da treina posjetitelja napuste neku web stranicu ako se ne otvori u roku od 15 sekundi.
Kada spremamo sliku za Web pred nama se postavljaju dva cilja i to:
a)
b)
to manja veliina datoteke (to manje kb)

to kvalitetnija fotografija
Veliina datoteke je bitna zbog brzine prijenosa podataka. to je manja datoteka, bre e nam se podaci uitati, i
obratno. Veliinu datoteke najee mjerimo u kb (kilobajtima) i Mb (megabajtima)
5.4.1. Formati slika za Web

Koristimo tri formata slika za Web:
1. JPEG (Graphics Interchange Format)- format koji podrava 16 milijuna boja, ne podrava prozirnost, komprimira
veliinu datoteke (smanjuje je), ali rtvuje kvalitetu (podatke) sa slike. Koristi se za spremanje kolor slika zbog toga to
podrava 16 milijuna boja.
2. GIF (Graphics Interchange Format) format koji podrava 256 boja, podrava prozirnost, komprimira veliinu
datoteke (smanjuje je), ali ne rtvuje kvalitetu (podatke) sa slike. Koristi se za slike kod koje nisu color fotografije,
logotipe (zatitni znak firme)
3. PNG (Portable Network Graphics) postoje dva formata:
1. PNG 8 format koji podrava 256 boja (potpuno identino kao i GIF) i
2. PNG 24 koji podrava 16 milijuna boja. PNG formati podravaju prozirnost, komprimiraju veliinu datoteke
(smanjuje je), ali ne rtvuje kvalitetu (podatke) sa slike, pa je PNG - 24 praktiki neupotrebljiv obzirom na veliinu
datoteke. Moemo ga koristiti za slike vrlo malih dimenzija kao to su dugmad jer fine detalje unakazi JPEG
kompresija s gubitkom. Meutim poveanjem brzine prijenosa podataka ovaj format e postati sve prihvatljiviji jer
emo eljeti to kvalitetnu fotografiju.
5.4.2. URL
Naredba (tag) koja se koristi za ubacivanje slika na web stranicu je <img>. Naredba <img> ne dolazi u paru. U
sluaju naredbe za sliku <img> taga, mora se u naredbu unijeti URL adresa slike(mjesto gdje se slika nalazi). URL
(Uniform Resource Locator) ili web adresa odreenog dokumenta ili objekta koji se nalazi negdje na Internetu, s danom
putanjom koja opisuje kako doi do tog dokumenta. .
<img src=slika.jpg />
URL- Putanja do dokumenta
37
Razlikujemo dvije vrste URL adresa (putanja):

Apsolutni URL je web adresa na Internetu koja sadri sve informacije koje su raunalu potrebne u vezi lokacije koja
se trai ( npr. ona ukljuuje dio http://).
Relativni URL je web adresa koja je povezana dokumentom u tom URL-u.
Primjer 1
Ako na web stranici grafika.htm elimo ubaciti sliku slika.jpg koja se nalazi u istoj mapi upisi slijedei URL e biti:
apsolutni URL <img src=http://www.gogss.hr/upisi/slika.jpg />
relativni URL <img src= "slika.jpg />
Primjer 2
Ako na web stranici grafika.htm elimo ubaciti sliku slika2.jpg koja se nalazi u mapi umjetnost koja je unutar mape
upisi slijedei URL e biti:
apsolutni URL <img src=http://www.gogss.hr/upisi/umjetnost/slika2.jpg />
relativni URL <img src= "umjetnost/slika.jpg />
Primjer 3
Ako na web stranici grafika.htm elimo ubaciti sliku slika1.jpg slijedei URL e biti:
apsolutni URL <img src=http://www.gogss.hr/slika2.jpg />
relativni URL <img src= "../slika.jpg />
Primjer 4
Ako na web stranici aranzeri.htm elimo ubaciti sliku slika2.jpg slijedei URL e biti:
apsolutni URL <img src=http://www.gogss.hr/upisi/umjetnost/slika2.jpg />
relativni URL <img src= "upisi/umjetnost/slika.jpg />
Primjer 5
Ako na web stranici index.htm elimo ubaciti sliku slika1.jpg slijedei URL e biti:
apsolutni URL <img src=http://www.gogss.hr/slika2.jpg />
relativni URL <img src= "../../slika.jpg />
Naredba <img> ima nekoliko atributa. Naredba <img> nema </img>, zavretak naredbe. U XHTML pie se <img
atributi />
38
Atribut
Opis
Vrijednost
SRC
URL
Trebalo bi unijeti WEB adresu/URL slike koja se

umee u dokument. Obavezan atribut
WIDTH
HEIGHT
BROJ
Ako namjestite WIDTH i HEIGHT atribute (u

pikselima), stranica e se otvarati znatno bre jer
preglednik nee morati voditi brigu o tome koliko je
slika velika, nego e imati tone dimenzije.
BORDER
BROJ
HSPACE
VSPACE
BROJ
ALIGN
LEFT, RIGHT
Okvir oko slike

HSPACE je broj praznih pixela koji se ostavlja s
lijeve i desne strane slike.
VSPACE se odnosi na broj praznih pixela s gornje i
donje strane slike.
- horizontalno poravnanje slike na stranici.
TOP, MIDDLE, BOTTOM, ABSBOTTOM,

- vertikalno poravnanje slike ako je smjetena
ABSMIDDLE, TEXTTOP, BASELINE
unutar paragrafa
ALT
TEXT
Ako slika nije pronaena od strane preglednika, ALT

tekst e biti prikazan na web stranici. Tekst e biti
prikazan ako ostavite cursor nekoliko sekundi na
odabranoj slici.
Primjer 1
<head>
<title> slike i tekst </title>
</head>
<body>
<img src="slike/slika1.JPG" alt="kola plivanja na bazen" width="200" height="145" align="left" />
<p align="justify">Uz potpunu i suvremenu opremljenost, sve nae jedinice su klimatizirane te je svaka obogaena pripadajuom,
opremljenom terasom, s kojih se prua predivan pogled na kvarnerske otoke Cres, Plavnik i Rab te na najljepi mediteranski ortdanski prolaz
- izmeu otoka Cresa i Plavnika.Ljubazni sumjetani ponuditi e Vam na prodaju ovei broj lokalni gastro-specijaliteta: prut, ovje meso,
mlijeko i sir, vie vrsta riba, specifino povre, paruge i brokulu te najraznivrsnije voe. Uz to e Vam mnogi domaini ponuditi raznovrsno
domae, crno i bijelo vino.</p>
</body>
</html>
39
Primijetili ste da center nije vrijednost align atributa. Da bismo centrirali sliku moete smjestiti <img> tag unutar <div>
tag-a sa align atributom namjetenim na center.
<div align="center"><img src="slike/slika1.jpg"></div>
Primjer 2
<head>
</head>
<body>
<div align=center>
<img src="slike/slika1.JPG" alt="kola plivanja na bazen" width="200" height="145" />
</div>
</body>
</html>
Slijedei primjer prikazuje sliku smjetenu unutar paragrafa <p>
Primjer 3
<head>
</head>
<body>
<p align="justify"><img src="slike/slika1.JPG" alt="kola plivanja na bazen" width="200" height="145" align="top" />Uz potpunu i suvremenu
opremljenost, sve nae jedinice su klimatizirane te je svaka obogaena pripadajuom, opremljenom terasom, s kojih se prua predivan pogled
na kvarnerske otoke Cres, Plavnik i Rab te na najljepi mediteranski ortdanski prolaz - izmeu otoka Cresa i Plavnika.Ljubazni sumjetani
ponuditi e Vam na prodaju ovei broj lokalni gastro-specijaliteta: prut, ovje meso, mlijeko i sir, vie vrsta riba, specifino povre, paruge i
brokulu te najraznivrsnije voe. Uz to e Vam mnogi domaini ponuditi raznovrsno domae, crno i bijelo vino.</p>
</body>
</html>
40
5.5.Linkovi (HYPERLINK)
HYPERLINK (esto se kae i link) je element web stranice na kojeg kad se klikne, pristupa drugoj web stranici, ili
generalno, drugoj web adresi. Linkovi su esto u formi teksta, ali su popularni i image(slike) linkovi.
Da bi kreirali link, potreban nam je otvoreni i zatvoreni <a></a> tag. Sav sadraj izmeu otvorenog i zatvorenog
taga smatra se linkom. U primjeru,
<a href="http://www.yahoo.com">YAHOO!</a>
link je: YAHOO!
U sluaju naredbe za link <a>, mora se u naredbu unijeti URL adresa druge web stranice(mjesto gdje se ta adresa
nalazi). To se unosi preko atributa href.
<a href="URL - adresa">Tekst</a>
Ovdje kao i kod slika moemo definirati apsolutnu ili relativnu URL adresu.
Primjer 1
<head>
<title> linkovi </title>
</head>
<body>
<h2 align="center"><a href="lista_neureena.html">Naslov</a></h2>
</body>
Atributi tag <a> su:

Atribut
href
target
Opis
Vrijednost
URL
_top,
_parent,
_self i
_blank
To je web adresa na koju je usmjeren link.

Ovime se odreuje kamo se uitava web stranica. Ako
koristimo _self dokument se otvara u istom prozoru u kome se
nalazi i link. Ako koristimo _blank dokument se otvara u novom
prozoru.(default)
41
Primjer 2
<head>
</head>
<body>
<h1 align="center">DOBRO DOLI U VRTI</h1>
<h2>Radno vrijeme vrtia </h2>
<p>Vrti radi od <a href="lista_ureena1.html" target="_self">ponedjeljka</a> do petka od 5.30 do 16.30 sati. Nastojimo biti to otvoreniji i
fleksibilniji pa o vaoj potrebi ovisi vrijeme dolaska djeteta u vrti i odlaska djeteta iz vrtia. Svakodnevno su na raspolaganju vaem djetetu i
vama nai struni suradnici.</p></body>
Tekst na kojem je postavljen link se u pretraivau prikazuje podvueno i obojen plavom bojom. Kada je link posjeen,
linkovi postaju obojeni purpurnom bojom.
Boje linkove moemo promijeniti ovisno o definiranim atributima link, alink i vlink u naredbi(tagu) body.
<body link="#00FF00" alink="#0000FF" vlink="#FF0000">
Primjer 3
<head>
</head>
<body link="#00FF00" alink="#0000FF" vlink="#FF0000">
<h2 align="center"><font color="#006666"><a href="lista_neureena.html">Naslov</a></font></h2>
<div align="center">
<a href="lista_ureena.html"><img src="slike/slika1.JPG" alt="kola plivanja na bazen" width="200" height="145" border="0" /></a></div>
</body>
</html>
42
5.6. Naredba tag <body>

Kao to samo ime kae, glavnina web stranice nalazi se unutar <body> i </body> elemanta. Tag sadri nekoliko
atributa koji utjeu na izgled web stranice.
Atributi tag <body> su:
Atribut
Vrijednost
Opis
background
URL
Trebalo bi se upisati web adresa/URL adresa slike koja bi bila

pozadinska slika cijelog dokumenta.
bgcolor
TEKST
Oznaava pozadinsku boju web stranice. Postavlja se ako niste
ILI
postavili pozadinsku sliku ili ako ne elimo bijelu pozadinu.
#HEKSADECIMALNA
VRIJEDNOST
link
TEKST
Oznaava boju linka prije nego to kliknemo miem na njega.
ILI
Default je BLUE .
#HEKSADECIMALNA
VRIJEDNOST
alink
TEKST
Boja aktivnog linka (kad kliknemo na njega). Default je RED na
ILI
veini pretraivaa.
#HEKSADECIMALNA
VRIJEDNOST
vlink
TEKST
Boja posjeenog linka (nakon to je linkana stranica posjeena).
ILI
Default je PURPLE.
#HEKSADECIMALNA
VRIJEDNOST
text
TEKST
Boja teksta. BLACK je po defaultu, a dobro ga je namjestiti na drugu
ILI
boju nego to je namjetena BGCOLOR (probajte ne stavljati uti tekst
#HEKSADECIMALNA na bijelu podlogu te sline kombinacije).
VRIJEDNOST
Primjer 1
<head>
<title> pozadina </title>
</head>
<body bgcolor="#000000" text="#99FFFF">
<h1> Siguran sam da ste shvatili sto Vam elim pokazati ovim primjerom </h1>
</body>
</html>
43
5.7. Naredba tag <hr>

Ovom naredbom dobiva se horizontala crta, koja se u veini sluajeva koristi za razdvajanje dijelove web stranice.
Evo to je rezultat upotrebe <hr> taga, po defaultu:
Horizontalno ravnalo se protee na 100% dostupne irine. Ovaj tag ili naredba nema zavrni dio i u XHTML-u pie se
na slijedei nain:
<hr />
<hr /> tag ima nekoliko moguih atributa:
Atribut
Opis
Vrijednost
ALIGN
LEFT, RIGHT
CENTER
WIDTH
BROJ,
%
Horizontalno poravnanje crte.Default je CENTER.

Ako namjestite irinu kao neki broj, <hr> e zauzeti toliko piksela zaslona
preglednika.
Isto se dogaa ako irinu namjestite pomou postotka. Dakle, <hr
width=50% /> e zauzeti pola dostupnog prostora:
SIZE
BROJ
To je visina <hr> u pikselima i kao vrijednost se moe koristiti samo broj

piksela, ne i postotak. Npr, <hr size=10 />.
Primjer 1
<head>
<title> pozadina </title>
</head>
<body>
<h1>Naslov </h1>
<hr align="left" width="200" size="5"/>
<p>Uz potpunu i suvremenu opremljenost, sve nae jedinice su klimatizirane te je svaka obogaena pripadajuom, opremljenom terasom, s
kojih se prua predivan pogled na kvarnerske otoke Cres, Plavnik i Rab te na najljepi mediteranski ortdanski prolaz - izmeu otoka Cresa i
Plavnika.
</p>
<body>
</html>
44
5.8. Tablice u HTML-u

Tablice su namijenjene prikazivanju tabelarnih podataka. Osnovne naredbe koje govore pregledniku da napravi
tablicu su :
o
o
o
<table> </table>
<tr> <tr> - definira broj redova tablice
<td> </td>- definira broj elija u retku (stupaca) tablice
Primjer1: Osnovna struktura tablice od 2 reda i 2 stupca

<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Primjer2: Osnovna struktura tablice od 3 reda i 4 stupca

<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
45
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
5.8.1. Definiranje irine

Za definiranje irine koristimo atribut width. Ovim atributom moemo zadati:
irinu tablice i
irinu pojedinog stupaca.
Vrijednosti se najee zadaju u pikselima.
width="500"
irina tablice
Kada zadajemo irinu tablice atribut width piemo unutar naredbe table.
<table width="500">
Primjer1: Osnovna struktura tablice od 2 reda i 2 stupca irine 500 piksela
<table width="500">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
46
irina stupaca
Kada zadajemo irinu stupaca atribut width piemo unutar naredbe td.
<td width="150">
Primjer1: Osnovna struktura tablice od 2 reda i 2 stupca irine 500 piksela i irine jednog stupca od 150 piksela, a
drugog od 350 piksela.
<table width="500">
<tr>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Kada zadajemo irinu pojedinog stupca tada najee trebamo paziti na dvije stvari:
1. Zbroj irina stupaca odgovara irini tablice
2. irine stupaca dovoljno je definirati na jedno mjesto u jednom retku
Definiranje debljine i boje ruba tablice i elija
Za definiranje debljine ruba koristimo atribut border. Ovim atributom moemo definirati rub oko tablice i oko svake
elije. Vrijednosti se zadaju u pikselima.
Kada zadajemo rub oko tablice i elija atribut border piemo unutar naredbe table.
<table border ="1">
47
Ako ne elimo rub oko tablice i elija atribut piemo:

<table border ="0">
Za definiranje boje ruba koristimo atribut bordercolor. Ovim atributom moemo definirati boju rub oko tablice i oko
svake elije.
Kada zadajemo boju ruba tablice i elija atribut bordercolor piemo unutar naredbe table.
<table bordercolor ="#993333">
Primjer1: Definiranje debljine i boje ruba tablice od 2 stupca i dva retka irine 600 piksela
<table width="600" border="1" bordercolor="#993333">
<tr>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
48
Razmak izmeu ruba i sadraja elije

To je prazan prostor izmeu ruba elije i sadraju unutar elije.
Za definiranje praznog prostora koristimo atribut cellpadding. Ovim atributom moemo definirati prazan prostor
izmeu ruba elija i sadraja unutar elija. Vrijednosti se zadaju u pikselima.
Kada zadajemo prazan prostor izmeu ruba elija i sadraja atribut cellpadding piemo unutar naredbe table.
<table cellpadding ="30">
Ako ne elimo prazan prostor izmeu ruba elija i sadraja obavezno postavljamo cellpadding u naredbu table i
piemo
<table cellpadding ="0">
Razmak izmeu elija
To je prazan prostor izmeu elija. Takoer, to je razmak izmeu ruba tablice i elije ako se elija nalazi uz rub
tablice.
Za definiranje praznog prostora koristimo atribut cellspacing. Ovim atributom moemo definirati prazan prostor
izmeu elija i izmeu ruba tablice i elije. Vrijednosti se zadaju u pikselima.
Kada zadajemo prazan prostor izmeu elija atribut cellspacing piemo unutar naredbe table.
<table cellspacing ="20">
Ako ne elimo prazan prostor izmeu elija obavezno postavljamo cellspacing u naredbu table i piemo
<table cellspacing ="0">
Definiranje boje
Za definiranje boje koristimo atribut bgcolor. Ovim atributom moemo zadati boju tablice, boju redaka tablice, boju
stupaca tablice i boju pojedine elije tablice.
Kada zadajemo boju tablice atribut bgcolor piemo unutar naredbe table.
<table bgcolor ="#ffff99">
49
Primjer1: Boja cijele tablice

<table width="500" bgcolor="#FFFF99">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Kada zadajemo boju redtka atribut bgcolor piemo unutar naredbe tr.
<tr bgcolor="#FF9900">
Primjer2: Boja jednog retka tablice
<tr bgcolor="#FF9900">
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Kada zadajemo boju stupca atribut bgcolor piemo unutar vie naredbi <td>. Ako na primjer elimo obojati prvi
stupac tablice tada emo svakom prvom <td> u naredbi <tr> dodati atribut bgcolor
Primjer3: Boja jednog stupca tablice
<tr>
<td bgcolor="#CC0000"> </td>
<td> </td>
</tr>
<tr>
50
<td> </td>
</tr>
</table>
Kada zadajemo boju elije atribut bgcolor piemo unutar jedne naredbi <td>.
<td bgcolor="#CC0000">
Primjer4: Boja jedne elije tablice
<tr>
<td > </td>
</tr>
<tr>
<td > </td>
<td> </td>
</tr>
</table>
51
Primjer1:
<table
width="600"
bgcolor="#FFFF99">
border="1"
cellpadding="0"
cellspacing="0"
bordercolor="#993333"
<tr bgcolor="#0099CC">
<td><p align="center"><font color="#00FF99"><strong><font size="2">Naredba</font></strong></font></p></td>
<td><p align="center"><font color="#00FF99"><strong><font size="2">Atributi</font></strong></font></p></td>
<td><p align="center"><font color="#00FF99"><strong><font size="2">Vrijednost</font></strong></font></p></td>
<td><p align="center"><font color="#00FF99"><strong><font size="2">Opis</font></strong></font></p></td>
</tr>
<tr>
<td
bgcolor="#FFCC99"><p
size="2"><strong>table</strong></font></p></td>
align="center"><font
color="#003366"
<td><p align="center"><font color="#339933" size="2">cellspacing</font></p></td>

<td><p align="center"><font color="#339933" size="2">pikseli</font></p></td>
<td><p align="center"><font color="#339933" size="2">razmak izmeu elija </font></p></td>
</tr>
<tr>
<td
bgcolor="#FFCC99">
<p
color="#003366"
<td>
<p align="center"><font color="#339933" size="2">cellpadding</font></p></td>
<td>
<p align="center"><font color="#339933" size="2">pikseli</font></p></td>
<td>
<p align="center"><font color="#339933" size="2">razmak izmeu elija i sadraja </font></p></td>
</tr>
<tr>
<td
color="#003366"
<td><p align="center"><font color="#339933" size="2">width</font></p></td>

<td><p align="center"><font color="#339933" size="2">irina</font></p></td>
</tr>
<tr>
<td bgcolor="#FFCC99"><p align="center"><font color="#003366" size="2"><strong>tr</strong></font></p></td>
</tr>
<tr>
52
<td bgcolor="#FFCC99"><p align="center"><font color="#003366" size="2"><strong>td</strong></font></p></td>

</tr>
</table>
53
Primjer2:
<table width="600" border="1" cellpadding="5" cellspacing="1" bordercolor="#993333" bgcolor="#FFFF99">
<tr bgcolor="#0099CC">
<td><p align="center"><font color="#00FF99"><strong><font size="2">Naredba</font></strong></font></p></td>
<td><p align="center"><font color="#00FF99"><strong><font size="2">Atributi</font></strong></font></p></td>
<td><p align="center"><font color="#00FF99"><strong><font size="2">Vrijednost</font></strong></font></p></td>
<td><p align="center"><font color="#00FF99"><strong><font size="2">Opis</font></strong></font></p></td>
</tr>
<tr>
<td
color="#003366"
<td bgcolor="#CCCC99"><p align="center"><font color="#339933" size="2">cellspacing</font></p></td>

<td bgcolor="#CCCC99"><p align="center"><font color="#339933" size="2">pikseli</font></p></td>
<td
bgcolor="#CCCC99"><p
</font></p></td>
color="#339933"
size="2">razmak
izmeu
elija
</tr>
<tr>
<td
bgcolor="#FFCC99">
<p
color="#003366"
<td bgcolor="#CCCC99">
<p align="center"><font color="#339933" size="2">cellpadding</font></p></td>
<p align="center"><font color="#339933" size="2">pikseli</font></p></td>
</font></p></td>
<p align="center"><font color="#339933" size="2">razmak izmeu elija i sadraja
</tr>
<tr>
<td
color="#003366"
<td bgcolor="#CCCC99"><p align="center"><font color="#339933" size="2">width</font></p></td>

<td bgcolor="#CCCC99"><p align="center"><font color="#339933" size="2">irina</font></p></td>
</tr>
<tr>
<td
bgcolor="#FFCC99">
size="2"><strong>tr</strong></font></p></td>
<p
color="#003366"

</tr>
<tr>
54
<td bgcolor="#FFCC99"><p align="center"><font color="#003366" size="2"><strong>td</strong></font></p></td>

</tr>
</table>
55

Izrada Weba PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Izrada Weba PDF

Uploaded by

Copyright:

Available Formats

Sadraj

5.2.6. Tag <font>................................................... 24

1.1. Kako je nastao Internet .......................................... 3

5.2.7.Oznake za formatiranje teksta...................... 31

1.2. to je i emu slui Internet? ................................... 3

5.3. Liste ......................................................................... 32

1.3. Nain rada Interneta ............................................... 4

5.3.1. Ureene liste.................................................. 32

1.3.1. Protokoli ........................................................ 4

5.3.2. Neureene liste.............................................. 34

1.3.2. Adresiranje raunala ..................................... 5

5.3.3.Ugnijeene liste ............................................ 36

1.4. to se sve moe raditi na Internetu? ...................... 6

5.4. Slike ......................................................................... 37

2. World Wide Web ........................................................... 8

5.4.1. Formati slika za Web ..................................... 37

5.5.Linkovi (Hyperlink) .................................................... 41

3.2. Struktura HTML stranice......................................... 9

5.6. Naredba <body> ...................................................... 43

3.3. Kako emo izraivati web stranice ....................... 13

5.8. Tablice u HTML........................................................ 45

4.1. Osnovna pravila XHTML? .................................... 14

5.8.1. Definiranje irine ............................................ 45

5. Izrada web stranice .................................................... 17

5.8.2. Definiranje boje .............................................. 47

5.1. Najosnovniji elementi <head> taga ...................... 17

5.8.3. Definiranje debljine i boje ruba

5.1.1. Naslov stranice <title> tag ........................... 17

tablice i elije ............................................... 49

5.1.2. Meta tag character-encoding....................... 18

5.8.4. Razmak izmeu elija .................................... 50

5.2. Tagovi za opis teksta............................................ 18

5.8.5. Razmak izmeu ruba i sadraja elije............ 51

5.2.1. Odlomci ....................................................... 18

5.8.6. Ugnjedene tablice ........................................ 56

5.2.2. Naredba tag <br> ........................................ 20

U svijetu punom zvunih i razvikanih rijei,

1.2. to je i emu slui Internet?

1.3. Nain rada Interneta

Dva najvanija protokola koji omoguavaju temeljni prijenos podataka su:

1.3.2. Adresiranje raunala

1.4. to se sve moe raditi na Internetu?

Slanje i primanje elektronike pote

Igranje igara sam ili protiv drugih korisnika Interneta

Praenje dnevnih novosti

Sudjelovanje u diskusijama grupe korisnika Interneta

Rezervacije putnih karata

Pronalaenje neijih adresa ili broja telefona

Pristupati informacijama o bilo kojoj temi koje se moemo sjetiti

Obavljanje bankarskih poslova bez odlaska u banku

2. World Wide Web

2.1. Povijest World Wide Web

prvi dio taga

drugi dio taga

3.2. Struktura HTML stranice

Primjer 1 - osnovna struktura web stranice

Izgled web stranice i njezina struktura

Primjer 2 - struktura web stranice prikazane na gornjoj slici

<td width="10" height="20">&nbsp;</td>

3.3. Kako emo izraivati web stranice

4.1. Osnovna pravila XHTML

DOCTYPE najava definira tip dokumenta, kao na donjem primjeru

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<td width="10" height="20"> </td>

5.2.3. Razmak izmeu rijei ( )