Lekcija br. 5 – Slike

Do sada ste naučili dovoljno da napravite web prezentaciiju baziranu na tekstovima, ali na Vašoj stranici možete ubaciti i slike (images), takođe ćete naučiti kako da pomoću slike napravite link ka drugoj stranici.

Postavljanje slike na Vašu stranicu

Komanda za postavljanje slike je konstantna i uvek ćete koristiti isti format.

Sada je možda vreme da kažemo gde treba da budu smešteni svi fajlovi neophodni za pravilan prikaz prezentacije. Do sada ste na Vašoj stranici ubacivali samo tekstualne elemente, a sada ćete postaviti i sliku. Mislimo da je dobra ideja da za sada sve slike koje ćete koristiti smestite na isto mesto gde i HTML stranice koje ste do sada napisali. To znači da slike treba da iskopirate na istu flopi disketu ili u isti direktorijum gde se nalaze i Vaše HTML stranice. Više o tome ćemo reći u nekoj od narednih lekcija. Ali za sada sve fajlove smestite na isto mesto.

Ovo je kod za ubacivanje slike:

prvo postavite tag (<), zatim(img src=),pa onda stavite Vašu sliku („vasa slika“) i završite tagom(>).

U našem slučaju će se prikazati sledeće:

                                 

                                       

Evo šta se dešava:

   –   IMG je skraćenica od „image“(slika). IMG  Najavljuje browser-u da na tom mestu treba da se prikaže slika. Slika će se pojaviti tačno gde Vi napišete u oznaci za sliku.

   –   SRC je skraćenica od „source“(izvor). Ovo je opet atribut, komanda unutar komande i govori browser-u gde treba da nađe sliku. Ponovo napominjemo da je za sada najbolje da slike koje želite da postavite na prezentaciji budu u istom direktorijumu kao i stranice koje ste napravili. Na ovaj način možete pozvati sliku samo iskucavajući njen naziv. Ako slike budu raštrkane, moraćete da dodajete direktorijume i poddirektorijume SRC komandi, a u ovom trenutku to će Vas samo besptrebno zbuniti. Znači stavite sliku u isti direktorijum kao i stranicu na kojoj će se slika nalaziti. Kasnije kada malo bolje svaladate HTML možete staviti sliku u bilo koji direktorijum.

   –   slika.gif je naziv slike. Primećujete da je istog formata kao i Vaš HTML dokument. Sastoji se iz naziva (imena) slike, zatim ide tačka i na kraju je sufiks tj. ekstenzija „.gif“ dok je kod HTML stranice sufiks „.htm“ ili „html“.

 

Formati slika 

Postoje dva osnovna formata slika koje ćete naći na internetu. Sećate se da  smo o „ime.sufiks“ formatu govorili u Lekciji br. 1..

 –  .gif Je skraćenica od Graphic Interchange Format.

Slike sa ovom ekstenzijom su veoma popularne često se koriste najviše zato što je pomoću malih programčića moguće napraviti tzv. animirane gif-ove (sličice) koji se masovno koriste na web prezentacijama.

    –  .jpg ili jpeg je skraćenica od Joint Photographic Experts Group, organizacija koja je napravila format.

Slike sa ovom ekstenzijom se takođe često koriste na web-u zato što zauzimaju manje prostora na disku pa se zbog toga brže učitavaju što je za surfere veoma važno.

 

Gde da nađem slike za moju prezentaciju?

Slike koje možete besplatno preuzeti na internetu ima jako mnogo. Evo jedne adrese:  www.htmlgoodies.com/freeimages/na kojoj se nalazi preko 500 sličica, a postoje i drugi sajtovi sa besplatnim slikama. Plus, pošto znate da surfujete sigurno ste videli puno slika, zatražite dozvolu od vlasnika sajta da za svoju prezentaciju preuzmete sliku koja Vam se dopada.

Aktiviranje slika

U Lekciji br. 5  smo Vam pokazali kako da napravite tekstualni link. Napravili smo plavi tekst koji je funkcionisao tako što je posetilac posle klika na tekst odlazio na neku drugu web adresu. Znači, ovde ćemo namestiti da kada neko klikne na sliku ode na drugu stranicu ili sajt. I ovoga puta će to biti Yahoo pretraživač.

Ovo je kod:

Prvo stavite tag (<), pa onda(A HREF=), pa zatim adresu(„http://www.yahoo.com&#8220;) i zatvorite tagom(>)

Potom ponovo stavite tag(<), pa opet (IMG SRC=),pa onda („vasa slika“), i završite tagom (>); Ponovo otvorite tag(<) stavite znak (/A) i zatvorite tagom(>).

 

Pogledajte pažljivo. Postavili smo tag za sliku tamo gde smo u prethodnoj lekciji napisali tekst. Evo šta ćete dobiti ovim kodom. Postavite kursor iznad slike, ali nemojte kliknuti. Videćete da je cela slika aktivna: 

                                                      

Sigurno primećujete da se oko slike pojavila tamno-plava linija. To se događa kada aktivirate sliku tj. kada slika postane link ka nekom sajtu. Tamno-plavo okruženje slike se naziva „border“(ivica, granica) oko slike. Sećate se iz predhodne lekcije da je i tekstualni link koji smo napravili bio podvučen plavom linijom. Ako Vam se linija ne dopada možete je ukloniti tako što ćete ponovo upotrebiti stari dobri atribut  taga tj. komandu unutar komande.

Kod je isti kao i gore s’ tim što je dodato:

IMG BORDER=“0″

Pogledajte šta smo uradili. Dodali smo atribut koji je označio da border (ivica, granica) treba da bude 0 tj. da se uopšte ne vidi. Ako Vam se linije oko slike dopadaju mežete ih čak i podebljati tako što ćete upisati npr. BORDER=“55″. 

Primećujete da je broj 0 pod znacima navoda. To je zato što je broj 0 atribut a atribut se uvek stavlja pod znacima navoda.

Evo šta dobijate kada u kod ubacite BORDER=“0″:

                                                         

Sada ponovo stavite kursur miša na sliku. Videćete da je aktivna ali nema nikakvo plavo okruženje.

To bi bilo sve za danas. Pratite nas i dalje, sutra nova lekcija!

07.03.2014. 11:48
Autor. StefAdmin tim