Web lokacije se razlikuju od bilo kojeg komunikacionog medija koji je došao pred njima. Jedna od glavnih stvari koje su postavile veb stranice izvan prethodnih medijskih formata poput štampanja, radija i čak televizije je koncept " hiperlink ".
Hiperlinki, takođe poznati pod nazivom "linkovi", čine Veb tako dinamičan. Za razliku od štampane publikacije koja može da se odnosi na drugi članak ili drugi resurs, veb stranice mogu koristiti ove veze da zapravo posalju posetioce na te druge stranice i resurse. Nijedan drugi emitovani medij ne može to da uradi. Možete čuti oglas na radiju ili gledati na TV-u, ali nema nikakvih hiperlinkova koje mogu da vas odvedu u kompanije u tim oglasima onako kako to sajt može lako učiniti. Linkovi su zaista neverovatan alat za komunikaciju i interakciju!
Često, linkovi koji se nalaze na veb lokaciji su tekstualni sadržaji koji usmeravaju posjetitelje na druge stranice istog sajta. Navigacija sajta predstavlja jedan primer tekstualnih veza u praksi, ali linkovi ne moraju biti bazirani na tekstu. Takođe možete lako povezati slike na vašoj web stranici. Hajde da pogledamo kako je to učinjeno, nakon čega sledi nekoliko slučajeva gde biste želeli da koristite hiperveze zasnovane na slikama.
Kako povezati sliku
Prva stvar koju ćete morati da uradite je da postavite samu sliku u svoj HTML dokument. Uobičajena upotreba veze zasnovane na slici je grafička karta sajta, koja se zatim povezuje sa početnom stranicom sajta. U našem primeru koda ispod, fajl koji koristimo je SVG za naš logotip. Ovo je dobar izbor jer će omogućiti da naša slika skali za različite rezolucije, sve dok održava kvalitet slike i malu ukupnu veličinu datoteke.
Evo kako biste postavili sliku u HTML dokument:
Oko oznake slike, sada biste dodali sidreni link, otvarajući sidreni element prije slike i zatvaranje sidra nakon slike. Ovo je slično onom kako biste povezali tekst, samo umjesto navijanja riječi koje želite biti veza s sidrenim oznakama, prebacite sliku. U našem primeru dolje, povezujemo se sa početnom stranicom našeg sajta, što je "index.html".
Kada dodate ovaj HTML na svoju stranicu, ne postavljajte razmake između sidrenog i oznake slike. Ako to učinite, neki pregledači će dodati malo krpelja pored slike, što će izgledati čudno.
Slika sa logotipom sada bi takođe delovala kao dugme za početnu stranicu, što je danas dosta web standard. Obratite pažnju da u našem HTML oznaku ne uključujemo vizuelne stilove, kao što su širina i visina slike. Ovi vizuelni stilovi ćemo ostaviti CSS-u i održati čistu separaciju HTML strukture i CSS stilova.
Jednom kada dođete do CSS-a, stilovi koje pišete da biste ciljali na ovu grafičku grafiku mogu uključivati veličinu slike, uključujući odgovarajuće stilove za prijateljske slike sa više uređaja, kao i sve slike koje želite dodati na sliku / link, kao što su granice ili CSS padne senke. Takođe možete dati vašu sliku ili povezati atribut klase ako su vam potrebne dodatne "kuke" koje biste koristili s CSS stilovima.
Koristite slučajeve za linkove slika
Dakle, dodavanje linka za slike je prilično jednostavno. Kao što smo upravo videli, sve što treba učiniti je da obmotate sliku odgovarajućim oznakama sidra. Vaše sledeće pitanje može biti "kada biste zapravo to učinili u praksi pored gore pomenutog primera linka / početne stranice?"
Evo nekoliko razmišljanja:
- Thumbnail slike u galeriji koja se povezuju na veće verzije tih slika.
- Slike koje se koriste samo za predstavljanje sadržaja, kao što su fotografije proizvoda za veb lokaciju e-trgovine.
- Teaser slike koje su deo drugog sadržaja, kao članak o blogu ili saopštenje za štampu, koje podstiču ljude da primete da taj sadržaj daje ciljnom području da dodirne ili klikne za čitanje čitavog članka.
- Slike ikona koje se koriste kao dugmići za povezivanje sa određenim funkcionalnostima ili stranicama unutar sajta.
- Linkovi društvenih mreža koji koriste prepoznatljive logotipe različitih društvenih medija koji su važni za tu lokaciju ili kompaniju.
- Slike koje se koriste kao dugmad za određene funkcionalnosti, kao što su podnesci formata (primjer dobre prakse - iz perspektive performansi web stranice, taster koji je stvoren isključivo CSS su bolji izbor od dugmadi za slike).
Podsetnik prilikom korišćenja slika
Slike mogu igrati važnu ulogu u uspjehu web stranice. Jedan od primjera datih gore je pomenuto korištenjem slika zajedno sa drugim sadržajem kako bi privukli pažnju na taj sadržaj i naveli ljude da ga pročitaju.
Kada koristite slike, morate biti svjesni izbora odgovarajuće slike za vaše potrebe , to uključuje ispravnu temu predmeta slike, format, a takođe i osigurati da sve slike koje koristite na vašoj web lokaciji ispravno su optimizovane za isporuku web stranice . Ovo može izgledati kao puno posla samo za dodavanje slika, ali isplatu je vredno toga! Slike stvarno mogu mnogo dodati uspehu sajta.
Ne oklevajte da koristite odgovarajuće slike na vašoj web lokaciji, i povežite te slike kada je potrebno da biste dodali neke interaktivne sadržaje, ali i obratite pažnju na ove najbolje prakse i pravilno i odgovorno koristite ove grafike / linkove u svom web dizajnerskom radu.