Professional Documents
Culture Documents
Osnove HTML A
Osnove HTML A
1. UVOD U HTML
Osnovni jezik koji koristimo za izradu web stranica je HTML (eng. HyperText Mark-up Language). On naim preglednicima (eng. browser) govori sve o sadraju i izgledu neke web stranice, kako bi je preglednik mogao pravilno prikazati. HTML je jezik kojim stranice razgovaraju s naim web preglednicima, ali i jezik koji bi svaki webmaster, odnosno izraiva web stranica, trebao znati. Postoje mnogi alati koji nam omoguavaju izradu web stranica i bez najosnovnijeg poznavanja HTML koda. Ti alati automatski generiraju HTML kd, pratei pritom upute koje korisnik zadaje preko manje ili vie jednostavnog korisnikog suelja. Rije je o tzv. vizualnom ureivanju, gdje korisnik odabirom odreenih alata stvara, odnosno ureuje web stranicu koja mu se u realnom vremenu prikazuje onako kako e se kasnije prikazivati u nekom od preglednika. Za razliku od runog pisanja koda, koje zahtijeva tek program za ureivanje teksta (npr. Notepad), vizualno ureivanje ima nekoliko prednosti. Osim to korisnik odmah vidi sadraj svoje web stranice, program sm generira potreban kd, pa je mogua pojava greaka u pisanju koda svedena na minimum. Alati koji nude vizualno ureivanje web stranica najee nude i mogunost runog pisanja koda. Meu najpopularnijim alatima za vizualnu izradu web stranica su Microsoftov FrontPage i Macromedijin Dreamweaver. Runo pisanje koda u programu za obradu teksta prilino je neugodno, ve zbog same injenice da korisnik ne vidi to zapravo radi. Ono to zapravo radi jest kodira naslijepo. Nakon dopisivanja nekoliko novih linija koda korisnik bi trebao prekinuti rad i svoj uradak pregledati u web pregledniku. Taj proces nije samo zamoran, ve moe biti i prilino frustriraju, jer su greke u runom pisanju koda gotovo neizbjene.
S druge pak strane, poznavanje HTML-a neophodno je za svako imalo ozbiljnije izraivanje web stranica. ak i programi poput Dreamweavera i FrontPagea imaju svoje nedostatke. Tako ponekad dodaju nepotrebne linije koda, koje samo poveavaju vrijeme uitavanja naih stranica, a ponekad ono to elimo dodati jednostavno nije dostupno putem korisnikog suelja. Svoje stranice vjerojatno neete u cijelosti pisati runo, ali svakako ete doi do trenutka kada ete neto jednostavno morati sami dopisati ili ispraviti. Tada e vae znanje HTML-a biti od velikog znaaja.
1.1. to je HTML
HyperText Markup Language ili skraeno HTML, jezik je za, kako mu i samo ime kae, oznaavanje hipertekstualnih dokumenata. Definirao ga je 1993. Sir Timothy Berners-Lee, danas ravnatelj World Wide Web Konzorcija (W3C). W3C je organizacija koja brine o standardizaciji web tehnologija i razvoju Weba. Kao i svaki drugi jezik, i HTML je s vremenom mijenjan i obogaivan, pa je tako posljednja verzija (4.01) objavljena 24. prosinca 1999. Hipertekstualne dokumente danas najee susreemo na Internetu, prvenstveno na Webu. Oni se od obinih dokumenata razlikuju po tome to sadre hiperveze (hiperlinkove) kojima su povezani s drugim (hipertekstualnim) dokumentima. Svaku web stranicu koja sadri barem jednu hipervezu ubrajamo u skupinu hipertekstualnih dokumenata. Prethodno smo spomenuli da je HTML jezik kojim web preglednicima opisujemo izgled naih web stranica, kako bi ih oni mogli ispravno prikazati. HTML nije programski jezik niti su ljudi koji ga koriste programeri. Njime ne moemo izvriti nikakvu zadau, pa ak ni najjednostavniju operaciju zbrajanja ili oduzimanja dvaju cijelih brojeva. On slui samo za opis naih hipertekstualnih dokumenata i za nita vie od toga. O World Wide Webu i HTML standardima moete saznati vie na stranicama W3 Konzorcija! http://www.w3c.org/
Na ovom predavanju upoznat ete HTML 4.01. To je posljednja verzija ovoga jezika prije predstavljanja XHTML-a, o kojem moete vie saznati na stranicama W3 Konzorcija. Predstavit emo vam i neke oznake i atribute koji nisu dio HTML 4.01 standarda, ali su u irokoj uporabi i bit e vam od velike koristi, barem dok ne upoznate stilove (CSS). Iako se u poetku moe uiniti malo nejasnim, vidjet ete da je HTML zapravo vrlo jednostavan jezik. Potrebno je samo nauiti razmiljati na tom novom jeziku, kao to su nam uvijek profesori stranih jezika govorili. Isto pravilo vrijedi i ovdje, a nema padea, lanova, nepravilnih glagola i svega ostaloga to najee uenje stranog jezika ini kompliciranim.
Slika 1. Crveni tekst. U web pregledniku vidjet emo samo tekst koji se nalazi unutar poetnog i zavrnog dijela oznake <font>, dok sm kd koji opisuje izgled teksta nee biti prikazan.
VANO JE UPAMTITI: Sve to se nalazi unutar neke oznake poprima njezina svojstva. Veina oznaka ima svoj poetni dio, npr. <i>, i zavrni dio - </i>. Ova e oznaka, primjerice, ukositi sav tekst koji ona omeuje (italic). U zavrnom dijelu oznake ispred naziva oznake stoji znak /. Nije bitno piemo li kd velikim ili malim slovima, no preporuljivo je pisati sve malim slovima. Kd cijele stranice moemo pisati i u jednom jedinom retku, niui oznake jednu iza druge. No, bolje je pisati ih tako da kd bude to pregledniji, jer emo se sigurno kasnije morati na njega vratiti i poneto izmijeniti. Vrijednosti atributa uvijek stavljamo pod navodnike, npr. color="red" Ako neka oznaka sadri vie atributa, nije vano kojim redoslijedom su oni napisani. Atribute uvijek odvajamo razmakom. <font size="2" color="red"> Oznake omeuju sve elemente naeg dokumenta, pa tako i jedna drugu. Ako u kodu imamo dvije ili vie oznaka, jedna se mora nalaziti unutar druge. Na primjer:
Slika 2. Ukoeni tejst. I za kraj neto nevezano za sm HTML kao jezik - imena htm(l) dokumenata smiju sadravati iskljuivo znakove engleske abecede i ne smiju sadravati sistemske znakove (*, ?, /, : i sl.), a preporuljivo je izbjegavati i razmake u imenima dokumenata. Umjesto njih koristite - ili _. Na primjer moja_stranica.htm ili moja-stranica.htm.
Slika 3. Naslovna linija preglednika. Sve ostalo, sav sadraj koji se prikazuje na stranici, smjetamo u tijelo dokumenta. Osnovni HTML kd sastoji se od ukupno etiri razliite oznake: <html> Oznaava poetak i kraj HTML dokumenta, pa se tako nalazi na samom poetku i na samom kraju dokumenta. <head> Oznaava zaglavlje dokumenta. Sadraj zaglavlja nije vidljiv u pregledniku. <title> Nalazi se u zaglavlju dokumenta. Nema atributa, a tekst koji omeuje definira kao naslov dokumenta koji je vidljiv u naslovnoj liniji preglednika. <body> U tijelu dokumenta smjeten je sadraj koji se prikazuje u pregledniku.
Sve ove oznake imaju svoj poetni i zavrni dio, pa osnovni HTML kd izgleda ovako: <html> <head> <title>Naslov dokumenta</title> ZAGLAVLJE </head> <body> Ovo je minimalni HTML dokument </body> </html> Otvorite novi dokument u programu koji ste odabrali za pisanje koda i prepiite osnovni HTML kd. Spremite datoteku kao osnovni_kod.htm. TIJELO
2. TEKSTUALNI ELEMENTI
Gotovo bilo koje web sjedite teko je ili ak nemogue zamisliti bez tekstualnih elemenata. U ovom emo poglavlju pokazati kako se oblikuje tekst pomou HTML oznaka. Predstavit emo vam oznake za ureivanje teksta koje se danas najee koriste.
Vie o meta oznakama govorit emo u poglavlju meta oznake. Zasad je dovoljno da znate da meta oznake nemaju zavrni dio i da ih opisuju dva atributa. Meta oznaka kojom emo definirati nau kodnu stranicu izgledat e ovako: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> ili ovako: <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> Prvo, iso-8859-2, predstavlja meunarodni standard, dok je windows-1250 Microsoftov standard. Editor koji koristite za pisanje koda mora podravati izabranu kodnu stranicu. Ako koristite Simply HTML, kodnu stranicu definirajte kao windows-1250. Otvorite novu datoteku i uz osnovni HTML kd definirajte i kodnu stranicu. Pripazite da se meta oznaka nalazi u zaglavlju dokumenta. Spremite datoteku kao uredjivanje_teksta.htm.
Primijetit ete da se tekst koji ste napisali prikazuje napisan fontom Times New Roman (Windows korisnici) veliine dvanaest tipografskih toaka (12 pt) i to u crnoj boji. Tekst u kodu niste dodatno opisali, pa je u pregledniku poprimio ta unaprijed zadana obiljeja. elimo li promijeniti izgled naeg teksta, morat emo mu promijeniti svojstva oznaavajui ga odgovarajuim oznakama. Nain prikaza teksta mijenjamo oznakom <font>. Sav tekst koji omeimo oznakom <font> poprimit e atribute te oznake. elimo li, primjerice, promijeniti boju teksta, u oznaci <font> definirat emo vrijednost atributa color.
Veliina fonta (size) poprima vrijednosti od 1 do 7, gdje je jedan najmanja, a sedam najvea veliina. Ovo su standardne veliine koje odgovaraju sljedeim veliinama u tipografskim tokama: 1 = 8 pt 2 = 10 pt 3 = 12 pt 4 = 14 pt 5 = 18 pt 6 = 24 pt 7 = 36 pt Posebno moramo paziti pri definiranju vrste fonta (face), jer smijemo koristiti samo sistemske fontove, odnosno one fontove za koje smo sigurni da svaki posjetitelj ima instalirane na svom raunalu. To su (na operacijskom sustavu Windows):
Arial Courier / Courier New Comic Sans Georgia Tahoma Trebuchet Times New Roman Verdana Symbol Webdings Wingdings
Arial Courier / Courier New Comic Sans Georgia Tahoma Trebuchet Times New Roman Verdana
Definiramo li neki drugi font koji na posjetiteljevu raunalu moda nije instaliran, na tekst bit e prikazan kao da je pisan fontom Times New Roman. Prepiite gornji kd u datoteku uredjivanje_teksta.htm. Zatim promijenite font u "Tahoma", veliinu u "3", a boju teksta u zelenu. Primijetite da se oznake meusobno omeuju!
2.3. Naslovi
HTML 4.01 nam doputa definiranje naslova u est razina i to koritenjem oznake <hn>, gdje je n broj od 1 do 6. Tako emo, na primjer, glavni naslov definirati oznakom <h1>, a podnaslove oznakama od <h2> do <h6>.
Obratite panju na prikaz naslova. Naslovi se, ovisno o njihovoj vanosti koju definiramo brojem uz slovo "h" (eng. heading), prikazuju u razliitim veliinama. Naslovi s najmanjim brojem su najvei, a oni s najveim - najmanji. Takoer, naslovi se prikazuju masno otisnuti, iako to nismo posebno definirali oznakom <strong>. Primjetit ete i da se naslovi automatski vertikalno vizualno "odvajaju" od ostatka teksta. Atribut kojim se najee mijenjaju svojstva naslova je align, a moe poprimiti vrijednosti left, right i center. U skladu s tim, naslov e biti pozicioniran lijevo, desno ili u sredinu.
U dokumentu uredjivanje_teksta.htm definirajte est naslova razliitih veliina. Provjerite kako se naslovi prikazuju u web pregledniku.
Odlomak Nae tekstove moemo posloiti u odlomke ili paragrafe oznakom <p>. Oznaka kojom definiramo odlomak najee dolazi uz atribut align, kojim definiramo poloaj teksta unutar tog odlomka. Vrijednosti atributa mogu biti left, right, center i justify, ovisno o tome elimo li tekst poravnati ulijevo ili udesno, centrirati ga ili poravnati s obje strane.
Non-breaking Space Kako biste prisilili preglednik da prikae vie uzastopnih razmaka, umjesto razmaka unutar HTML koda moete napisati poseban znak, odnosno skup znakova, koji ga zamjenjuju - . Poredate li nekoliko na taj nain napisanih razmaka jedan iza drugoga, svaki od njih bit e vidljiv u web pregledniku. Koritenjem ove vrste razmaka moete izbjei i neeljeni prijelom teksta izmeu dviju ili vie rijei.
Predefinirani tekst Ponekad nam je potrebno da se tekst napisan unutar html koda jednostavno prikazuje onako kako je napisan - sa svim razmacima i prijelazima u novi red. To emo postii koritenjem oznake <pre>. Sve to omeimo ovom oznakom izgledat e upravo onako kako izgleda unutar samog koda. Ova oznaka takoer e promijeniti font u Courier.
U dokumentu uredjivanje_teksta.htm napiite nekoliko reenica o svome gradu. Oblikujte tekst kreirajui poglavlja i koristei prelazak u novi redak.
2.5. Liste
Numerirane liste Koristimo ih kada elimo nabrojiti pobrojane ili numerirane pojmove. Da bismo je definirali, bit e nam potrebne dvije oznake. Jedna kojom emo definirati poetak i kraj liste, a druga kojom emo definirati svaki element liste. Poetak i kraj numerirane liste definirat emo oznakom <ol> (eng. ordered list), dok emo elemente liste definirati oznakom <li> (eng. list item), koju koristimo za svaki novi element liste:
elimo li promijeniti nain numeriranja elemenata liste, koristit emo atribut type. Kod numerirane liste vrijednost atributa type moe biti: 1 - arapski brojevi I - rimski brojevi i - "mali" rimski brojevi A - slova a - mala slova
Atribut type moemo primijeniti na cijelu listu <ol> ili na svaki element liste zasebno <li>:
Kreirajte listu vaih pet omiljenih filmova. Definirajte prikaz numeracije elemenata liste rimskim brojevima. Spremite datoteku pod imenom liste.htm. Nenumerirane liste Nenumeriranu listu definirat emo na isti nain kao i numeriranu, samo emo umjesto oznake <ol> koristiti oznaku <ul> (eng. unordered list). Vrijednosti atributa kojima moemo izmijeniti izgled nae nenumerirane liste su: circle, disc i square. I ovdje atribut type moemo primijeniti i na cijelu listu i na svaki element liste zasebno.
U datoteku liste.htm dodajte listu omiljenih pjesama. Svakom elementu liste izmijenite nain prikaza atributom type.
Definicijske liste Definicijske liste malo su sloenije, pa je za njihovu definiciju potrebna i jedna oznaka vie. Poetak i kraj definicijske liste definirat emo oznakom <dl> (eng. definition list), pojam koji definiramo oznakom <dt> (eng. definition term), a samu definiciju oznakom <dd> (eng. definition data).
3. HIPERVERZE (HIPERLINKOVI)
Hiperveze ili hiperlinkovi (eng. hyperlink, link) elementi su koji ine obine tekstualne dokumente hipertekstualnima. Slue za povezivanje tekstualnih dokumenata (web stranica) s raznim sadrajima unutar ili izvan web sjedita. Hiperveze tako mogu voditi na bilo koju vrstu dokumenta neki drugi (hiper)tekstualni dokument (txt, doc, html...), sliku (jpg, gif, png...), slikovni zapis (wmv, rm, mov...), zvuni zapis (wav, mp3, ra...), komprimiranu (zip, rar...) ili izvrnu datoteku (exe) i slino. Takoer mogu voditi i na adresu elektronike pote (e-mail adresu), kao i na mjesto unutar stranice (knjika oznaka, eng. bookmark). Hipervezu oznaavamo oznakom <a>, to dolazi od engleske rijei anchor (sidro). Ona ima i svoj zavrni dio, </a>, i atribute kojima definiramo njezina svojstva. Najei atributi su href, name, target i title. href (eng. hyperlink reference) definira kamo hiperveza vodi - na neki dokument ili datoteku, adresu e-pote ili na mjesto unutar dokumenta.
Ne zavrava li adresa imenom neke odreene datoteke (npr. kontakt.htm), na kraj adrese uvijek dodajemo znak "/". U protivnom nepotrebno optereujemo posluitelj, koji ne zna odmah odnosi li se na zahtjev na datoteku ili mapu. href="http://www.carnet.hr" href="http://www.carnet.hr/"
name koristimo za definiranje knjike oznake (vie o njima u poglavlju Knjike oznake), mjesta unutar dokumenta (eng. anchor). Microsoft u FrontPage-u knjike oznake zove "bookmarks". <a name="vrh">Sadraj</a> target odreuje mjesto u kojem se hiperveza otvara. To moe biti jedan od okvira, novi prozor i slino.
title opisuje hipervezu, a on se u obliku savjeta (eng. tip) prikazuje kada pokaziva mia postavimo iznad hiperveze. Vrlo je koristan slijepim osobama, jer njihovi preglednici tada itaju i opis hiperveze (npr. kod slikovnih hiperveza).
U odnosu na trenutano otvorenu stranicu Korijenska mapa web sjedita je www.carnet.hr. U njoj se nalaze svi ostali dokumenti i mape. elimo li kreirati vezu koja sa stranice index.htm vodi na neku drugu stranicu unutar korijenske mape, uinit emo to ovako: <a href="kontakt.htm">Kontakt</a> Gornja veza vodit e na stranicu kontakt.htm, koja se nalazi u istoj mapi kao i stranica na kojoj se trenutano nalazimo (index.htm). Tekst koji omeuje ova oznaka, "Kontakt", postat e polazite hiperveze. elimo li, pak, kreirati vezu koja vodi na resurs unutar neke mape, moramo definirati putanju do tog resursa, navodei i mape u koje moramo "ui" kako bismo do njega doli. Tako emo, ako kreiramo vezu iz korijenske mape na stranicu pero.htm, definirati putanju na sljedei nain: <a href="zaposlenici/pero.htm">Pero Peri</a> Nalazimo se na stranici pero.htm u mapi "zaposlenici". Kako bismo "izali" iz te mape i vratili se u korijensku mapu, kreirajui pritom vezu na stranicu index.htm, koristit emo oznaku "../".
<a href="../index.htm">Pero Peri</a> Oznaku "../" koristimo svaki puta kada "izlazimo" iz trenutane mape. Da smo se u gornjem primjeru nalazili u mapi "stari", za povratak u korijensku mapu koristili bismo "../../" i naziv dokumenta na koji veza vodi. <a href="../../index.htm">Pero Peri</a> Postoji jo jedna mogunost - izlaz iz trenutane mape (npr. zaposlenici) i ulaz u neku drugu mapu (npr. suradnici). U tom sluaju koristit emo kombinaciju gore navedenih koraka: <a href="../suradnici/ivana.htm">Ivana Ivi</a> Hiperveze mogu voditi na bilo koju vrstu datoteke. Ako web preglednik nije u mogunosti prikazati datoteku unutar svog prozora, ponudit e posjetitelju njezino preuzimanje (eng. download). U odnosu na korijen web sjedita Odluimo li definirati hipervezu relativnu u odnosu na korijensku mapu web sjedita, u svim sluajevima emo je zapoeti znakom "/", a ostatak navesti kao da se nalazimo u korijenskoj mapi. Tako nikada neemo imati potrebu koristiti "../", jer iz korijenske mape ne moemo (niti trebamo) izai. Primjer veze sa stranice index.htm: <a href="/suradnici/ivana.htm">Ivana Ivi</a> Primjeri veza sa stranice ivana.htm: <a href="/index.htm">Naslovnica</a> <a href="/zaposlenici/pero.htm">Pero Peri</a> U novom dokumentu kojeg ete nazvati prvi_zadatak.htm kreirajte hiperveze na sve dosad napravljene vjebe.
Izostanak oznake protokola znai neispravnu hipervezu. Umjesto web stranice koja se nalazi na adresi www.carnet.hr preglednik e zatraiti nepostojei dokument www.carnet.hr unutar naeg web sjedita! Kada kreiramo vezu na neko drugo web sjedite, najee elimo posjetitelja zadrati na svojim stranicama, ali mu istovremeno omoguiti i dobavljanje informacija s tuih. Do sada su se sve hiperveze koje smo definirali otvarale u istom prozoru web preglednika, pa bi to naeg posjetitelja automatski otjeralo s naih stranica. Definirat emo zato hipervezu koja e se otvoriti u novom prozoru. Za otvaranje hiperveze u novom prozoru web preglednika, naoj definiciji hiperveze dodat emo atribut target, koji e nositi vrijednost "_blank" (prazan).
Atribut target moe poprimiti jo neke vrijednosti, no njih koristimo kada radimo s okvirima. U dokumentu prvi_zadatak.htm kreirajte dvije globalne hiperveze. Jedna od njih neka se otvara u novom prozoru. Spremite datoteku.
Ako stvorimo hipervezu koja vodi na nepostojeu knjiku oznaku, web preglednik nee prijaviti greku. Uitat e se stranica od vrha, kao da knjika oznaka u hipervezi i nije definirana.
Kao i kod ostalih hiperveza, i ovdje moemo definirati njihov opis dodavanjem atributa title. elimo li pak definirati predmet poruke (eng. subject), uinit emo to tako da iza definirane adrese e-pote dodamo ?subject=Predmet poruke.
U dokumentu prvi_zadatak.htm, ispod do sada kreiranih hiperveza, kreirajte hipervezu na svoju adresu elektronike pote.
Kao to vidimo u samom primjeru, oznaka kojom definiramo sliku na stranici je <img> (eng. image, slika). Atribut src (eng. source, izvor) je neizostavan, jer njime definiramo putanju i ime datoteke. U ovom primjeru naziv datoteke je logo.gif, a nalazi se u istoj mapi kao i stranica na kojoj se nalazi. Takoer vidimo i da naa slika ima rub u boji koji odgovara boji hiperveze. Neposjeena hiperveza imat e rub plave boje, posjeena ljubiaste, a aktivna crvene (ako nisu drugaije definirane). Da bismo izbjegli prikazivanje ruba oko slike koja predstavlja hipervezu, moramo joj definirati rub atributom border, te njegovu vrijednost postaviti na "0".
Vie o atributima oznake <img> govorit emo u poglavlju multimedijalni elementi Mogue je odrediti i jedan ili vie dijelova neke slike, pri emu je svaki taj dio polazite hiperveze. Tako moemo definirati vie razliitih hiperveza na jednoj slici, no o tome vie u sljedeoj lekciji.
Klikom na dio slike na kojem se nalazi plavi kvadrat otii ete na stranice CARNeta, crveni krug odvest e vas na stranice Edupointa, a uta zvijezda na slubene stranice Lijepe nae. Definicija ove slike sadri jedan novi atribut, a izgleda ovako: <img border="0" src="images/mape.png" width="356" height="88" usemap="#mapa"> Novi atribut je, naravno, usemap. Njime definiramo mapu u kojoj su opisana podruja slike koja su polazita hiperveza. Obratite pozornost na znak # ispred imena mape. Postoje tri vrste podruja koja moemo definirati: kvadrat, krug i poligon. Njihove koordinate opisane su u mapi, koju definiramo oznakom <map>: <map name="mapa"> <area shape="rect" coords="9, 37, 106, 66" target="_blank" alt="www.CARNet.hr" href="http://www.carnet.hr/"> <area shape="circle" coords="185, 48, 35" target="_blank" alt="Edupoint" href="http://edupoint.carnet.hr/"> <area shape="polygon" coords="291, 27, 303, 2, 316, 29, 346, 34, 324, 53, 329, 83, 304, 68, 277, 83, 283, 53, 263, 33" target="_blank" alt="www.hr" href="http://www.hr/"> </map>
Oznaka <map> dolazi uz atribut name kojim imenujemo svaku mapu na stranici. Unutar mape definiramo svako podruje na slici koje je polazite hiperveze. To inimo oznakom
<area> (eng. podruje). Ona nema svog zavrnog dijela, a uz atribute target i href, sadri i tri nova atributa: alt opisuje hipervezu, kao to je kod uobiajenih hiperveza opisuje atribut title. shape definira oblik podruja. Vrijednosti ovoga atributa mogu biti "rect" (pravokutnik), "circle" (krug) ili "polygon" (poligon). coords koordinate podruja na slici, koje definiramo na poseban nain za svaku vrstu podruja. Redoslijed definiranja podruja unutar mape nije bitan. No ako se definirana podruja preklapaju, prednost e imati ono podruje ije koordinate su u mapi prije definirane. Pri definiranju koordinata za sve vrste podruja vrijedi isto pravilo: ishodite koordinatnog sustava je gornji lijevi kut slike, gdje os x raste udesno, a os y prema dolje. Mjerna jedinica su, naravno, pikseli.
shape="rect" Koordinate kvadrata odreujemo tako da prvo definiramo gornju lijevu, a zatim donju desnu toku kvadrata. shape="circle" Krug e definirati koordinate sredita krunice, te njezin polumjer. shape="polygon" Izgled poligona definirat emo koordinatama svake njegove kljune toke. Koordinate toaka definiramo onim redoslijedom kojim njihovo spajanje ini na poligon.
Koordinate moete lako odrediti u mnogim programima za obradu grafike kao i pomou posebnih programa za odreivanje koordinata. I program Simply HTML vam omoguava vizualno kreiranje slikovnih mapa.
4. MULTIMEDIJALNI ELEMENTI
Sada kada imamo tekst, vrijeme je da nae stranice obogatimo i pokojom novom bojom, slikom ili ak zvukom. Nakon sljedeih nekoliko lekcija doista ete moi svoje web stranice uiniti multimedijalnima.
Oznaka <body> moe sadravati jo neke atribute, od kojih su najpopularniji: bgcolor definira boju pozadine stranice background definira sliku u pozadini stranice
topmargin definira gornju marginu stranice leftmargin definira lijevu marginu stranice Primjer vrijednosti koje poprimaju ovi atributi: <body bgcolor="#838744" background="slika.gif"
topmargin="0" leftmargin="20"> Atributi topmargin i leftmargin poprimaju vrijednosti koje oznaavaju broj piksela izmeu ruba stranice i sadraja. Atribut background sadri putanju do slike (ako postoji) i puni naziv datoteke. Izmijenite boju hiperveza i pozadine u datoteci prvi_zadatak.htm. Boja pozadine neka bude crna, boja veze #CC0000, aktivne veze #FF3300 a boja posjeene veze #330099.
vspace vertikalni razmak slike od teksta ili nekog drugog elementa na stranici iskazan u pikselima.
5. TABLICE
Jo uvijek jedan od najpopularnijih naina rasporeivanja sadraja na stranicama jest pomou tablica. Iako ta metoda ima svojih nedostataka, zbog svoje jednostavnosti i liavanja potrebe za poznavanjem CSS-a (stilova), tablice ete nai na veini stranica. tovie, teko ete pronai stranicu na kojoj sadraj nije rasporeen pomou tablica. Ljepota tablica je i u tome to zapravo uope ne moraju biti vidljive. Dovoljno je vrijednosti debljina rubova tablice staviti na "0". I tako, pametnim rasporedom elija tablice, moemo svoje tekstove, slike, navigaciju i sve ostalo to ini nau stranicu, rasporediti kako god elimo.
U ovom primjeru definirali smo debljinu rubova tablice atributom border, jer u protivnome tablica ne bi bila vidljiva i na tekst izgledao bi kao da se u kodu nalazi samo tekst (bez tablice). U novom dokumentu definirajte tablicu i vrijednost atributa border postavite na "0" ili u potpunosti uklonite taj atribut. Dokument spremite pod imenom tablice.htm. U datoteci prvi_zadatak.htm kreirajte vezu na tablice.htm.
cellspacing="5"
height Visina. Vrijednost atributa moe biti iskazana u pikselima (npr. "400") ili u postocima (npr. "80%"). Ovaj atribut mogue je pridodati i tablici i eliji. width irina. Vrijednost atributa moe biti iskazana u pikselima ili u postocima. Ovaj atribut mogue je pridodati i tablici i eliji. <table border="1" width="200" height="200" cellspacing="5" cellpadding="3" align="right"> <tr> <td>Ovo je sadraj elije</td> </tr> </table> bordercolor Boja ruba tablice (ako nije border="0"). Ovaj atribut mogue je pridodati tablici, retku i eliji. bordercolorlight Kod 3D ruba tablice definira svijetliju stranu. Ovaj atribut mogue je pridodati tablici, retku i eliji.
Tablica s definiranim 3D rubom bordercolordark Kod 3D ruba tablice definira tamniju stranu. Ovaj atribut mogue je pridodati tablici, retku i eliji. bgcolor Boja pozadine. Ovaj atribut mogue je pridodati tablici, retku i eliji. background Definira pozadinsku sliku tablice. Ovaj atribut mogue je pridodati i tablici i eliji.
bordercolor="#0099CC" background="images/uzorak1.jpg"> <tr> <td bgcolor="#FFFFFF" align="center"> Prva elija </td> <td background="images/uzorak2.jpg"></td> </tr> <tr> <td valign="bottom" align="right"> Druga elija </td> <td background="images/uzorak2.jpg"></td> </tr> <tr> <td valign="top"> Trea elija </td> <td background="images/uzorak2.jpg"></td> </tr> </table>
Ureivanje na razini elije align Definira horizontalno poravnavanje elemenata unutar elija. Moe poprimiti vrijednosti "left", "center", "right" i "justify". valign Definira vertikalno poravnavanje elemenata unutar elija. Moe poprimiti vrijednosti "top", "middle" i "bottom". Izmijenite tablicu iz prethodne vjebe tako da irinu tablice podesite na 50 %, a visinu na 100 piksela. Centrirajte tablicu. Definirajte 3D rub tablice i to tako da svijetla strana bude #666666 a tamna #333333. Obojite i pozadinu prvog retka u boju po izboru, a elemente u prvom retku centrirajte. Razmak unutar elije (cellpadding) podesite na 10 piksela.
Pretraga po jezicima na www.google.hr Kako bismo opisali jezik stranice, koristit emo atribute http-equiv i content. Vrijednost atributa http-equiv u tom e sluaju uvijek biti "Content-Language", a vrijednost atributa content odreujemo sami, ovisno o kojem se jeziku radi. Tako emo za hrvatski upisati "hr", za engleski "en" (za ameriki engleski "en-us") i slino. <meta http-equiv="Content-Language" content="hr">
Autor Sve sljedee meta oznake koje emo spomenuti koristit e atribute name i content. Jedan od tih atributa nosi ime (eng. name) Author, a sadraj (eng. content) nam govori o tome tko je autor stranice. Na taj se nain "nevidljivo" potpisujemo u samom kodu stranice.
Autorska prava Na isti nain kako potpisujemo autora stranice navodimo i vlasnika autorskih prava. Tako e atribut name poprimiti vrijednost "copyright", a atribut content podatke o vlasniku autorskih prava. <meta name="copyright" content=" 2006., Vladimir terle. Sva prava pridrana."> Kljune rijei Definiranje kljunih rijei koje opisuju sadraj stranice vrlo je vano, jer one pomau pretraivaima pri pretraivanju stranica. No, kako se ova mogunost esto zlorabi navoenjem kljunih rijei koje nemaju nikakve veze sa samom stranicom, mnogi pretraivai e ovu oznaku zanemariti i umjesto toga pretraivati rijei u tekstu koji se na stranici nalazi. Svejedno, svaka stranica iji autori ele to bolju poziciju na trailicama trebala bi imati definirane kljune rijei. Kljune rijei odvajamo zarezom.
<meta name="keywords" content="html, teaj, tecaj, carnet, online, osnove, webmastering"> Definiranje kljunih rijei moe biti i kontraproduktivno!
Vano je mudro odabrati kljune rijei koje najbolje opisuju sadraj vaih stranica. Odredite prioritete i navedite samo najvanije kljune rijei. Izbjegavajte openite izraze koji opisuju svaku drugu web stranicu na Internetu i nikako ne pretjerujte s brojem kljunih rijei.
Opis stranice Kao i kljune rijei, i opisom stranice se koriste neke trailice. To je onaj opis koji se nerijetko pojavljuje na stranici s rezultatima pretraivanja. <meta name="description" content="CARNet EduPoint, edukacijski centar Hrvatske akademske i istraivake mree - edupoint.CARNet.hr">
Opis stranice na www.altavista.com Ne zaboravite dodati meta oznake na sve stranice vaeg zavrnog zadatka!
6.2. Okviri
Okviri (eng. frames) nam pruaju mogunost istovremenog prikaza vie HTML dokumenata u prozoru preglednika. Svaki od tih dokumenata nalazi se u posebnom okviru, a raspored i veliinu okvira definiramo u posebnom dokumentu koji ih sve sjedinjuje.
Slika 6.1. Okvir. Ova metoda izrade web stranica ima nekoliko prednosti, ali i mnogo nedostataka. U vanije prednosti bismo mogli ubrojiti lake odravanje stranica i njihovo bre uitavanje. U nedostatke, pak, kompliciranije definiranje hiperveza meu stranicama (potrebno je npr. tono definirati u kojem se okviru otvara veza), vei broj dokumenata od kojih se svaka stranica sastoji, probleme s ispisom cijele stranice, probleme s pretraivaima (npr. ako pretraiva pronae samo jedan od nekoliko dokumenata koji ine stranicu i ponudi vezu samo na taj dokument, gubimo ostale dijelove stranice), probleme s adresama (u adresnoj liniji uvijek se nalazi adresa glavne stranice, a ne adresa skupa dokumenata koji ine trenutano otvorenu stranicu), mogue pojavljivanje neeljenog horizontalnog klizaa zbog prevelike irine sadraja unutar jednog ili vie okvira itd. Veinu, ako ne i sve ove nedostatke, mogue je ispraviti. No to zahtijeva mnogo vie vremena i truda nego "klasina" izrada web stranica.
Kod stranice koja definira poloaj i veliinu okvira vano je da NE koristimo oznaku <body>. Umjesto nje koristimo oznake <frameset> za definiranje seta okvira i <frame> za definiranje dokumenta koji se prikazuje u okviru. Stvorimo za poetak dokument koji definira poloaj i veliinu okvira.
Oznakom <frameset> i atributom rows ili cols definiramo broj i veliinu redaka ili stupaca okvira. Atributom rows definiramo broj i visinu okvira, a cols definira broj i irinu okvira. Vrijednosti ovih atributa moemo zadati u broju piksela ili postocima. Upiemo li za vrijednost atributa "*", visina/irina okvira bit e preostala irina/visina na stranici. Oznaka <frame> i njen atribut src definiraju dokument koji se u tom okviru prikazuje. Ova oznaka nema zavrni dio. Ostali vaniji atributi koji opisuju ovu oznaku su: frameborder poprima vrijednost 0 ili 1, ovisno o tome elimo li da okvir ima rubove ili ne. name imenuje okvir. Ime svakom okviru dodjeljujemo sami, a imenovanje okvira posebno je vano za kreiranje hiperlinkova.
noresize ne poprima vrijednosti, a onemoguava mijenjanje veliine okvira. Okvirima je u protivnom u pregledniku mogue promijeniti veliinu povlaenjem ruba okvira. scrolling moe poprimiti vrijednosti "yes", "no" ili "auto", to odreuje prikaz klizaa u okviru. Vrijednost "yes" ga prikazuje, "no" ne prikazuje, a "auto" kliza prikazuje po potrebi. U kodu stranice koja definira poloaj i veliinu okvira poeljno je definirati i sadraj koji se prikazuje ako posjetiteljev web preglednik ne podrava okvire. Taj sadraj unosimo unutar oznake <noframes>, a ondje definiramo i uobiajeno tijelo dokumenta <body>. <noframes> <body> <p>Ova stranica sadri okvire, no va ih web preglednik ne podrava.</p> </body> </noframes> Kada radimo stranicu s okvirima, hiperlinkove definiramo tako da uz atribut src, kojim odreujemo stranicu koja se otvara, koristimo i atribut target, koji sadri ime okvira u kojem se veza otvara. Umjesto imena okvira, kao vrijednost ovog atributa najee definiramo: _blank veza se otvara u novom prozoru preglednika. _self veza se otvara u istom okviru. _top veza se otvara u istom prozoru preglednika. Osim obinih okvira za ije koritenje je potrebno definirati njihov raspored na posebnoj stranici, moemo upotrijebiti i inline okvire. Njih dodajemo na stranicu poput bilo kojeg drugog elementa. Inline okvire definiramo oznakom <iframe> i opisujemo atributima: name imenuje inline okvir. Ime mu dodjeljujemo sami, kao i kod obinih okvira.
src definira dokument koji se prikazuje u inline okviru. height visina inline okvira definirana u pikselima ili postocima. width irina inline okvira definirana u pikselima ili postocima. align poloaj okvira na stranici. Vrijednosti koje ovaj atribut moe poprimiti su "left", "right" i "center". frameborder prikazuje ili skriva rubove okvira, ovisno o tome je li vrijednost atributa 1 ili 0. Tekst koji se prikazuje u preglednicima koji ne podravaju inline okvire definiramo unutar poetne i zavrne oznake inline okvira. <iframe name="ime" src="inline.htm" height="40%" width="778" align="center" frameborder="0"> Va web preglednik nije u mogunosti prikazati inline okvire. </iframe> Otvorite dokument prvi_zadatak.htm i na kraj dokumenta dodajte inline okvir unutar kojega e se otvarati zivotopis.htm. Visina okvira neka bude 300, a irina 500 piksela.
6.3. Slojevi
U poglavlju tablice spomenuli smo da su tablice jedan od najpopularnijih naina razmjetanja sadraja po stranici. Spomenuli smo i drugi nain, koji zahtijeva poznavanje stilova. Taj drugi nain je razmjetanje sadraja pomou slojeva. Slojevi, koje definiramo oznakom <div> (eng. division), logike su pregrade unutar dokumenta unutar kojih smjetamo razliite sadraje, a uporabom stilova (CSS) definiramo njihovu poziciju na stranici, izgled sadraja u njima i sl. Kako je za imalo ozbiljnije koritenje ovog elementa potrebno poznavanje stilova, mi emo spomenuti tek koritenje slojeva za poravnavanje elemenata na stranici. Atribut kojim opisujemo poloaj elemenata unutar sloja je align, a moe poprimiti vrijednosti "left", "right", "center" ili "justify".
6.4. Obrasci
Obrasce danas nerijetko susreemo ak i na osobnim web stranicama, i to najee kada vlasnici ne ele javno objaviti svoju e-mail adresu. Uz koliinu neeljene e-pote koju svakog dana primamo, takve odluke sasvim su razumljive. Za definiciju obrazaca koristimo oznaku <form>, a unutar njenog poetnog i zavrnog dijela dodajemo tekst obrasca i polja za unos podataka. Njih definiramo posebnim oznakama, koje emo kasnije upoznati. Zasad je samo vano znati da svakom elementu obrasca moramo dati ime, kako bi se unesena/odabrana vrijednost mogla pridodati varijabli istoga imena. To u praksi izgleda ovako: Imamo polje za unos teksta koje smo nazvali "posjetitelj". irinu polja podesili smo na 20 znakova. <input type="text" name="posjetitelj" size="20">
Posjetitelj u to polje unosi neku vrijednost, a klikom na gumb "poalji", ta vrijednost se pohranjuje u varijabli koja nosi ime "posjetitelj". Na primjer, ako u polje upiemo Hercule Poirot, varijabla "posjetitelj" dobit e vrijednost "Hercule Poirot": posjetitelj=Hercule Poirot
Podaci uneseni u obrazac alju se metodom GET ili POST. Metodu slanja podataka definiramo atributom method oznake <form>. Kako GET metoda zahtijeva poznavanje jezika kao to su ASP ili PHP, objasnit emo slanje podataka metodom POST, i to na adresu elektronike pote. Atribut action oznake <form> u tom e sluaju imati vrijednost poput hiperveze na adresu e-pote: <form method="POST" action="mailto:edupoint@carnet.hr" enctype="text/plain"> Kako bi podaci bili poslani u tijelu poruke e-pote, a ne kao privitak u poruci, dodali smo atribut enctype i njegovu vrijednost definirali kao "text/plain" (tekst/obian).
Obratite panju na to da ova metoda slanja podataka iz obrasca ne skriva adresu primatelja, jer poslana poruka nerijetko ostaje pohranjena u mapi Sent Items (Poslana pota) posjetiteljeva e-mail klijenta. Upoznajmo sada poblie polja za unos podataka, njihove oznake i atribute... Tekstualno polje Polje za unos teksta definiramo oznakom <input> i atributom type koji nosi vrijednost "text". Atribut size odreuje irinu polja iskazanu brojem znakova. Vrijednost polja zadajemo atributom value. U naem primjeru elimo da posjetitelj sm unese tekst u polje, pa smo ovaj atribut ostavili praznim, a mogli smo ga i izostaviti. <input type="text" name="ime" size="20" value="">
Polje lozinke Za polje lozinke vrijede ista pravila kao i za tekstualno polje. Jedina razlika je u vrijednosti atributa type, koja je u ovom sluaju "password" (lozinka). <input type="password" name="lozinka" size="20">
Tekstualno podruje Oznaka <textarea> definira tekstualno podruje. Atributom rows odreujemo broj redaka, a atributom cols irinu iskazanu brojem znakova. elimo li unaprijed zadati vrijednost ovog elementa, upisujemo je izmeu poetne i zavrne oznake. <textarea rows="2" name="poruka" cols="20"> </textarea>
Potvrdni okvir I potvrdni okvir definiramo oznakom <input>. Vrijednost atributa type ovaj puta je "checkbox", a atributom value zadajemo vrijednost potvrdnog okvira. <input type="checkbox" name="Prihvacam" value="Da">
Opcijski gumbi Opcijske gumbe takoer definiramo oznakom <input>. Atribut type poprima vrijednost "radio", a atributom value definiramo vrijednost odabranog opcijskog gumba. Unaprijed odabranu opciju moemo odrediti dodavanjem atributa checked, kojem ne pridodajemo vrijednost. Svi opcijski gumbi jedne skupine moraju imati isto ime definirano atributom name. To nam omoguuje odabir samo jedne vrijednosti iz niza ponuenih opcija te grupe. Ako elimo omoguiti odabir vie opcija unutar grupe, koristimo potvrdne okvire. <input type="radio" name="odgovor" value="da" checked>Da <input type="radio" name="odgovor" value="ne">Ne Da Izbornik Za definiciju izbornika potrebne su nam dvije oznake - <select> za definiranje poetka i kraja izbornika, te oznaka <option> kojom definiramo svaku ponuenu opciju u izborniku, ba kao to oznaka <li> definira elemente liste. Broj vidljivih opcija u izborniku odredit emo atributom size oznake <select>. Unaprijed odabranu opciju definiramo atributom selected oznake <option>, a ne pridodajemo mu vrijednost. <select size="1" name="titula"> <option selected>Gospoica</option> <option>Gospoa</option> <option>Gospodin</option> </select>
Gospodica
Ne
Gumb I za kraj, jo jedan element obrasca kojeg definiramo oznakom <input>. Ovisno o tome je li vrijednost atributa type "submit" ili "reset", definirat emo gumb za slanje, odnosno gumb za brisanje unesenih podataka. Atributom value odreujemo tekst koji pie na gumbu. <input type="submit" value="Poalji" name="gumb1"> <input type="reset" value="Obrii" name="gumb2">
Poalji Obrii
Danas je sve vei broj tvrtki koji se u svom poslovanju redovito okreu Internetu kao mediju koji znaajno smanjuje trokove poslovanja. Nisu samo smanjeni ili ak ukinuti trokovi distribucije proizvoda do prodajnih mjesta, ve je i sav prihod od prodaje proizvoda, od kojeg je dio redovito iao trgovcu, sada u rukama samog proizvoaa. Informatizacija uredskog poslovanja takoer doprinosi utedama i vremena i novca, to tvrtke ini profitabilnijima, a kako je posao ponekad mogue obavljati i iz vlastitog doma, one postaju i ugodnijim mjestima za rad.
odrediti kao prozirnu (eng. transparent). Tako e svaki piksel te boje na slici biti proziran, i kroz te dijelove slike bit e vidljiva pozadina na kojoj se slika nalazi.
Uveana slika s definiranom alpha prozirnou JPEG JPEG je format koji koristimo za spremanje fotografija i grafika koje sadre vie od 256 boja. Nudi razliite modele i stupnjeve optimizacije, no svakim od njih se gubi na kvaliteti slike. Svejedno, stupanj optimizacije uvijek je mogue podesiti tako da gubitak kvalitete bude prihvatljiv ili ak neprimjetan. Ne podrava prozirnost.
GIF i JPEG optimizacija PNG Najmlai od spomenuta tri formata, ujedinjuje najbolje od prethodna dva. Omoguuje spremanje palete od 17 do 256 boja, ali i 8-bitne greyscale palete (paleta sivih tonova) i pune, 24-bitne palete (16,7 milijuna boja). Podrava prozirnost, ali i alpha prozirnost, kojom rubovi slika ostaju "meki". No, veina web preglednika jo uvijek ne podrava alpha prozirnost.
Programi za obradu grafike Photoshop, Paint Shop Pro i GIMP meu najpopularnijim su programima za obradu grafike i pripremu grafikih elemenata za Web. Ukratko emo vam predstaviti ova tri, ali ne zaboravite da postoji i mnotvo drugih programa za obradu grafike. Na vama je da odaberete svog favorita. Adobe Photoshop Najpopularniji, svojevrsni standard u grafikoj industriji. Nudi mnotvo mogunosti, no njegova izuzetno visoka cijena i sloenost uporabe ine ga neprivlanim veini kunih korisnika. www.adobe.com
Corel Paint Shop Pro Paint Shop Pro zasigurno je najpopularniji shareware alat za obradu grafike. Uz mnotvo mogunosti i mnogo jednostavniju uporabu od Photoshopa, odlikuje se i prihvatljivom cijenom. Omiljen alat kunih korisnika, ali i profesionalaca. www.corel.com GIMP Besplatan program zadovoljavajuih mogunosti, no Windows korisnicima isprva poprilino kompliciranog suelja. Odluite li se za ovaj program, moi ete ga nauiti koristiti i na Edupointovu teaju "Obrada grafike pomou GIMP-a". www.gimp.org
Od slika glava ne boli... Krivo! Sve je u redu dok slike ne zavladaju vaim stranicama. Ako nije rije o fotogaleriji, ne pretjerujte sa slikama. Uinit e vae stranice nepreglednima i produit e njihovo uitavanje nekoliko puta. Uvijek optimizirajte slike prije objavljivanja na Webu. Dizajn Pripazite na kombinaciju boja koje koristite na stranicama. Ako nemate oko za boje, zatraite miljenje nekoga tko ima. Pazite na itljivost tekstova i izbjegavajte pozadinske slike na stranicama. Jezik I na kraju, pripazite na jezik. Vae web stranice publikacija su poput bilo koje druge. Nemojte ispasti nepismeni. ;)