Title: Slike na web stranicama
Course: Osnove HTML-a > Section: Slike na web stranicama

Kako postaviti sliku na stranicu i koje joj atribute možemo namjestiti.

O ovom poglavlju

O ovom poglavlju
Sada, kad imamo tekst, vrijeme je da naše stranice obogatimo i pokojom novom slikom.

Nakon sljedećih nekoliko lekcija zakoračit ćete u svijet multimedije na web stranicama, no i ti prvi koraci mogu vaše stranice učiniti vrlo privlačnima.

Ishodi učenja

Nakon ovog poglavlja ćete moći:

- umetnuti slike na web stranicu
- postaviti sliku na mjesto po želji: u odlomak, pokraj teksta
- namjestiti podatke o visini i širini slike, navesti primjere u kojima se vidi kako ih se može pogrešno odabrati, te pokazati što znači „promjena veličine slike” navođenjem visine i širine koje ne odgovaraju stvarnim vrijednostima
- namjestiti alternativni tekst i nabrojiti tri situacije u kojima se on upotrebljava.

U ovom poglavlju očekuju vas dvije bonus lekcije koje se bave sadržajima izvan HTML-a, ali su korisni u stvaranju web stranica. Nakon prve bonus lekcije ćete možda neki od programa s kojima ste se susretali prepoznati kao mogućeg pomoćnika u pripremi slika za vaše web stranice, a možda ćete se odlučiti za upotrebu nekog novog programa. Nakon druge bonus lekcije moći ćete odrediti koji bi grafički format bio prikladan za vaše ilustracije.

Aktivnosti u ovom poglavlju

Aktivnosti u ovom poglavlju slične su aktivnostima u prethodnom: malo teorije, puno primjera i vježbi. Predlažemo vam da primjere provjerite na svom računalu.

Nemojte zaboraviti i na izradu vježbi koje ćete naći u svakoj lekciji. Za predložene vježbe sve su vam slike na raspolaganju u tečaju, iako vjerujemo da ćete ipak najviše vremena provesti izabirući slike za primjere koje ćete sami željeti isprobati.

Glavna aktivnost vezana uz ovo poglavlje nalazi se izvan ovog tečaja i obuhvaća svladavanje barem osnova priprema slika za objavljivanje na webu. Za sada si samo isplanirajte vrijeme za tu aktivnost, ali nemojte skretati s teme ovog tečaja. Razlog je jednostavan: vježbe na ovom tečaju možete raditi i sa slikama preuzetim s weba, a osim toga vas u ovom tečaju čekaju još neka znanja nužna za dovršavanje vašeg prvog web sjedišta.

Dodavanje i smještavanje slika

Dodavanje i smještavanje slika
Slike definiramo oznakom <img> i neizostavnim atributom src, koji sadrži putanju i naziv datoteke slike. Zasad ćemo pretpostaviti da je slika u istoj mapi kao i stranica, pa će se u atributu src naći samo njezino ime.

<img src="slika.jpg">

Ako slika nije u istoj mapi kao i stranica, mora se upisati i put do nje ili čak potpuna adresa. Način pisanja atributa src potpuno odgovara načinu pisanja adresa stranica na koje vode linkovi, te će biti opisana u poglavlju Hiperveze (hiperlinkovi).

Ime datoteke u kojoj je slika treba napisati točno, uključujući i velika i mala slova. To možda neće biti važno na računalu na kojem trenutačno radite, ali može biti važno kad svoje web strance objavite na poslužitelju s drugim operacijskim sustavom.

Neki fotoaparati slikama daju proširenje .JPG umjesto .jpg, a možda vaše slike imaju proširenje .jpeg. Prije uključivanja slika dobro je provjeriti imena datoteka zajedno s proširenjem. Proširenja u popisima datoteka postaju vidljiva tako da u programu Windows Explorer (Moje računalo i sl.) namjestite Organiziraj > Mogućnosti mape i pretraživanja > kartica Prikaz > uklonite kvačicu s retka Sakrij datotečne nastavke za poznate vrste datoteka. Ne zaboravite gumb Primijeni, a možda će nakon toga koristiti i gumb Primijeni na (sve) mape.

Oznaku <img> mogu opisivati još neki atributi, od kojih su od danas aktualnih u strogoj definiciji HTML-a 4.01 najčešći:

width
Širina slike definirana u pikselima (npr. "100") ili postocima raspoloživog prostora za sliku (npr. "80%").
height
Visina slike definirana u pikselima ili postocima.
alt
Alternativni tekst (opis slike) koji se prikazuje u preglednicima koji ne podržavaju prikaz slika ili ako slika ne postoji. Isti tekst prikazuje se dok slika nije učitana, a mogu ga pročitati i čitači ekrana namijenjeni slijepim osobama. Obavezan atribut u strogom HTML 4.01.

<img border="0” src="images/phoebe.gif"
width="213” height="130” alt="Phoebe">Lorem ipsum dolor sit amet...

Otvorite datoteku zivotopis.htm. Na početak prvog odlomka dodajte sliku i definirajte joj alternativni tekst „Joey”. Zasad ne morate definirati širinu i visinu slike.

Spremite stranicu i pogledajte je u web pregledniku.

U nastavku ćemo premještati umetnutu sliku.

Spremite stranicu pod novim imenom, zivotopis-1.htm, u njemu prije naslova „Curriculum vitae” definirajte novi odlomak, te u njega, između oznaka <p> i </p> premjestite sliku. Spremite stranicu i pregledajte je.

Vratite se na uređivanje stranice, te odlomak sa slikom premjestite između naslova i prvog podnaslova, iza sadržaja i sl. Nakon svakog premještanja spremite stranicu i pregledajte je u web pregledniku.

Možete uzeti i dokument zivotopis.htm te u njemu također premještati sliku, ali tako da ostane u postojećim odlomcima, odnosno naslovima.

Opišite riječima dva položaja slika koje ste susreli u ovoj vježbi i usporedite ih sa svojim iskustvima u postavljanju slika u programu za pisanje (npr. Microsoft Word). Preostale mogućnosti na koje ste navikli, na primjer postavljanje slike lijevo i desno od teksta, preporuča se ostvariti pomoću stilova.

Ovu vježbu možete raditi s datotekom zivotopis.htm ili, još bolje, stvorite novu HTML datoteku u koju ćete uključiti sliku.

Vaš je zadatak napisati u atribut src ime datoteke koja ne postoji, spremiti dokument i pogledati ga iz svih preglednika koje imate na raspolaganju (može i s različitih računala).

Kako razni preglednici pokazuju nedostajuću sliku?

Širina i visina slike

Širina i visina slike
U prethodnoj smo lekciji spomenuli atribute width i height koji određuju dimenzije prikazane slike.

Ti atributi nisu obavezni, ali ih je dobro pisati, a još je važnije ispravno ih izabrati, Naime:

- Idealno je da atributi width i height sadrže vrijednosti koje odgovaraju širini i visini slike koju treba prikazati.
- Ako tih parametara nema, prvo će biti prikazana stranica bez mjesta rezerviranog za sliku, a tek će se po učitavanju slike preostali sadržaj razmjestiti na konačno mjesto – posjetitelju pred očima.
- Ako su parametri width i height veći od dimenzija slike, slika će biti rastegnuta i djelovat će mutno.
- Ako su navedeni parametri manji od dimenzija slike, prenosit će se velika slika te prikazati umanjeno. Dakle, vrijeme prijenosa će biti nepotrebno veliko.
- Ako je slika smanjena neproporcionalno (npr. ako je vrijednost parametra width polovina širine slike, a vrijednost parametra height trećina izvorne visine slike), slika će biti izobličena.

Zbog svega navedenoga pozivamo vas da naučite prilagođavati slike za prikaz na webu u nekom od odgovarajućih programa.

U operacijskom sustavu Windows 7 dimenzije pohranjene slike se mogu vidjeti, na primjer, držanjem miša iznad imena ili ikone datoteke ili smanjenog prikaza slike u bilo kojem popisu datoteka.

Ponovimo sad način pisanja oznake <img> te isprobajmo neke od navedenih problema u jednom zadatku.

<img border="0” src="images/phoebe.gif"
  width="213” height="130” alt="Phoebe">Lorem ipsum dolor sit amet...

Prvo odredite dimenzije slike koju ste uključili na svoju web stranicu u prethodnoj lekciji.

Otvorite u editoru datoteku zivotopis.htm te oznaci <img> dodajte ispravne atribute width i height.

Spremite i pregledajte stranicu.

Kopirajte datoteku zivotopis.htm i ovaj zadatak radite na kopiji.

Prvo povećajte vrijednosti atributa width i height tri puta, te pregledajte stranicu. Usporedite sa slikom u prethodnom zadatku.

Sad postavite širinu i visinu na 100 piksela. Što se dogodilo liku? Što bi se dogodilo da ste umjesto crteža imali fotografiju na kojoj se nalaze ljudi?

Možete li se složiti s natuknicama koje se nalaze na početku ove lekcije?

Ako upotrebljavate, na primjer, web preglednike Firefox ili Chrome, možete za slike kojima ste promijenili veličinu pogledati original desnim klikom i izborom funkcije za pregled slike (View picture, Pregledaj sliku). Tako ćete vidjeti zašto, kad upisujemo širinu i visinu slike govorimo o „promjeni veličine slike” pod navodnicima – mijenja se samo prikaz slike na stranici.

O važnosti smanjivanja slika govori i činjenica da većina web sjedišta koja nude postavljanje slika (na primjer samostalne galerije ili galerije u okviru društvenih servisa) automatski smanjuju slike.

Bonus: Programi za obradu slika

Bonus: Programi za obradu slika
Photoshop, Paint Shop Pro, GIMP i Paint.NET među najpopularnijim su programima za obradu grafike i pripremu grafičkih elemenata za web. Ukratko ćemo vam predstaviti ova četiri programa, ali ne zaboravite da postoji i mnoštvo drugih programa za obradu grafike. Na vama je da odaberete svog favorita.

Komercijalni programi

Program Adobe Photoshop je najpopularniji program ove vrste, svojevrsni standard u grafičkoj industriji. Nudi mnoštvo mogućnosti, no njegova izuzetno visoka cijena i složenost uporabe čine ga neprivlačnim većini kućnih korisnika.

Jednostavnija verzija programa Photoshop zove se Photoshop Elements i zadovoljava potrebe većine korisnika.

Ikone programa Photoshop i Photoshop Elements.

Među ostalim komercijalnim programima ističu se dva programa tvrtke Corel. Prvi je Corel PhotoPaint, dio paketa raznovrsnih programa Corel DRAW, a drugi je razvijen iz malog shareware programa i postao omiljen alat kućnih korisnika, ali i profesionalaca. To je PaintShop Pro koji sadrži mnoštvo mogućnosti i mnogo je jednostavniji za uporabu od Photoshopa i PhotoPainta, a odlikuje se i prihvatljivom cijenom.

Besplatni programi

GIMP je besplatan program vrlo dobrih mogućnosti, no do verzije 2.6 korisnicima operacijskog sustava Windows isprva poprilično kompliciranog sučelja.

Ikona programa The GIMP.

GIMP možete naučiti upotrebljavati na našem online tečaju „Obrada slike pomoću GIMP-a”.

Paint.NET jednostavan je program manjih mogućnosti od ranije navedenih, ali zato i potpunim početnicima jednostavniji za svladavanje.

Ikona programa Paint.NET.

Program Paint.NET je opisan u okviru materijala za rad s CARNetovim CMS-om.

Među ostalim programima za obradu slika ističu se Photoscape, te preglednici slika s mogućnošću jednostavne obrade (Picasa, IrfanView i drugi).

Provjerite imate li na svom računalu instaliran neki od grafičkih programa. Možda ste dobili neki program sa skenerom ili fotoaparatom?

Ako nemate, preporučamo da instalirate neki od besplatnih programa.

Bonus: Grafički formati

Bonus: Grafički formati
Brzina prijenosa podataka na Internetu čak i danas predstavlja problem. Kako bi se taj problem učinio što bezbolnijim, a naše se stranice što brže učitavale, za slike koje upotrebljavamo na našim web stranicama izabiremo grafički format koji smanjuje veličinu datoteke tako, da najviše smanji datoteku i najmanje uništi sliku koju želimo objaviti.

GIF

Ovaj se format preporuča upotrebljavati za grafike koje ne sadrže više od 256 boja. Kako gotovo svaka fotografija sadrži milijune boja, ovaj format pri spremanju fotografija najčešće izbjegavamo.

Tajna GIF formata je u tome što uz podatke o slici u sebi sadrži i posebnu paletu od najmanje dvije do najviše 256 boja. Zato je on pogodan za pohranjivanje slika s relativno malo boja.

Dijelove slike je moguće odrediti kao prozirne (engl. transparent), pa će kroz te dijelove slike biti vidljiva pozadina na kojoj se slika nalazi.

Uvećana slika crnog slova „A” s definiranom prozirnošću
na dvije različite podloge.

Po svim navedenim mogućnostima formata GIF postoji i bolji format, PNG. GIF se zadržao dijelom iz navike, a dijelom zbog mogućnosti da se u tom slikovnom formatu pohranjuju jednostavne animacije.

JPEG

JPEG je format koji koristimo za spremanje fotografija, koje sadrže više od 256 boja.

JPEG format nudi različite stupnjeve optimizacije, no svakim od njih se gubi na kvaliteti slike. Svejedno, stupanj optimizacije uvijek je moguće postaviti tako da gubitak kvalitete na fotografijama bude prihvatljiv, većini promatrača često i neprimjetan. Ipak, zbog gubitka kvalitete nije pogodan za slike s jednobojnim plohama.

GIF i JPEG optimizacija.

JPEG format ne podržava prozirnost.

PNG

Najmlađi je od spomenuta tri formata, ujedinjuje najbolje od prethodna dva. Omogućuje spremanje palete od 17 do 256 boja, ali i 8-bitne grayscale palete (paleta sivih tonova) i pune, 24-bitne, palete (16,7 milijuna boja). Podržava prozirnost, ali i alpha prozirnost, kojom se određuje stupanj prozirnosti, pa rubovi slika ostaju „meki”.

Uvećana slika crnog slova „A” s definiranom alpha prozirnošću
na dvije različite podloge.

Format PNG je manje raširen od ranije navedenih formata GIF i JPEG jer je do prije nekoliko godina većina korisnika upotrebljavala web preglednike koji nisu podržavali alpha prozirnost. Danas popularnost PNG formata raste.

Format PNG je osobito pogodan za slike s jednobojnim plohama i puno boja, koje često dolaze od kosih crta na prijelazima ploha, kao na prethodnoj slici. Upotrebljava se, na primjer, za grafikone, slike ekrana, logotipove i sl.

Uvjerite se u koje svrhe autori web stranica upotrebljavaju formate navedene u ovoj lekciji. Oni ne moraju biti uvijek u pravu, ali uvjereni smo da će vam ova vježba pomoći u razlikovanju formata.

Otvorite tražilicu slika i zamislite, na primjer, neku biljku ili životinju. Da biste dobili veći broj rezultata, predlažemo vam da zamislite naziv biljke ili životinje na nekom od jezika koji se u svijetu govori više nego hrvatski (engleski, njemački, španjolski,...).

Pretraživanje ćete provesti triput. Svaki put osim riječi koju ste zamislili dodajte u polje za pretraživanje još i jedan od sljedećih uvjeta na vrstu datoteke:

- filetype:jpg
- filetype:png
- filetype:gif

Uočavate li razlike u rezultatima? Slaže li se većina slika s napomenama o formatima iz ove lekcije?