Web stranice su za razliku od bilo kojeg komunikacijskog medija koji je došao prije njih. Jedna od glavnih stvari koje postavljaju web stranice osim prethodnih medijskih formata kao što su tisak, radio, pa čak i televizija je koncept " hiperveze ".
Poveznice, također obično poznate kao "veze", čine ono web tako dinamično. Za razliku od tiskane publikacije koja može upućivati na neki drugi članak ili drugi resurs, web stranice mogu koristiti te veze kako bi zapravo poslali posjetitelje na te druge stranice i resurse. Nijedan drugi medij ne može to učiniti. Možete čuti oglas na radiju ili gledati na TV-u, ali nema hiperveza koje vas mogu odvesti tvrtkama u tim oglasima na način na koji ta web stranica može lako raditi. Linkovi su doista nevjerojatna komunikacija i interakcija!
Često, veze koje se nalaze na web-lokaciji su tekstualni sadržaj koji usmjerava posjetitelje na druge stranice iste web lokacije. Navigacija web stranice jedan je od primjera tekstualnih veza u praksi, ali veze ne moraju biti tekstualne. Također možete jednostavno povezati slike na svojoj web stranici. Pogledajmo kako je to učinjeno, a slijedili su i slučajevi u kojima biste željeli upotrebljavati hiperveze na temelju slike.
Kako povezati sliku
Prva stvar koju trebate učiniti jest postaviti samu sliku u HTML dokument. Uobičajena upotreba veze na temelju slike grafički je logotip web lokacije koji se zatim povezuje na početnu stranicu web mjesta. Kod našeg primjernog koda u nastavku, datoteka koju koristimo je SVG za naš logotip. Ovo je dobar izbor jer će omogućiti našoj slici skaliranje za različite rezolucije, sve dok zadržavamo kvalitetu slike i malu ukupnu veličinu datoteke.
Evo kako biste svoju sliku postavili u HTML dokument:
Oko oznake slike sada biste dodali sidrenu vezu, otvarajući sidro prije slike i zatvarajući sidro nakon slike. To je slično tome kako biste povezali tekst, umjesto da zamotate riječi koje želite povezati s sidrenim oznakama, zamotate sliku. U našem primjeru u nastavku vraćamo se na početnu stranicu naše web stranice, koja je "index.html".
Prilikom dodavanja HTML-a na svoju stranicu ne stavljajte razmake između sidrene oznake i oznake slike. Ako to učinite, neki će preglednici dodati malo krpelja pored slike, što će izgledati čudno.
Slika logotipa sada bi također djelovala kao gumb početne stranice, koji je ovih dana prilično web standard. Primijetit ćemo da u HTML oznaku ne ukljućujemo vizualne stilove, kao što su širina i visina slike. Izdvojit ćemo ove vizualne stilove u CSS i održati čistu odvojenost HTML strukture i CSS stilova.
Kada dođete do CSS, stilovi koje pišete za ciljanje ovog logotipa logotipa mogu uključivati veličinu slike, uključujući responzivne stilove za slike prilagođene više uređaja, kao i sve slike koje želite dodati na sliku / vezu, poput granica ili CSS ispusti sjene. Također biste mogli dati svoju sliku ili povezati atribut klase ako trebate dodatne "kuke" za korištenje s CSS stilovima.
Koristite slučajeve za veze slika
Zato je dodavanje veze slike prilično jednostavno. Kao što smo upravo vidjeli, sve što morate učiniti je zamotati sliku s odgovarajućim oznakama sidra. Sljedeće pitanje bi moglo biti "kada biste zapravo to učinili u praksi, osim navedenog povezivanja logotipa / početne stranice?"
Evo nekoliko misli:
- Minijature u galeriji koje povezuju veće verzije tih slika.
- Slike koje se koriste sami za predstavljanje sadržaja, poput fotografija proizvoda za web-lokaciju e-trgovine.
- Zadivljujuće slike koje su dio drugog sadržaja, primjerice, članak na blogu ili priopćenje za tisak, koje privlače ljude da primijetiti taj sadržaj daju im ciljano područje koje dodirne ili klikne za čitanje cijelog članka.
- Ikone slike koje se koriste kao gumbi za povezivanje s određenim funkcijama ili stranicama unutar web mjesta.
- Veze društvenih medija koji upotrebljavaju prepoznatljive logove različitih web mjesta društvenih medija važnih za tu web-lokaciju ili tvrtku.
- Slike koje se upotrebljavaju kao gumbi za određene funkcije, primjerice slanja obrasca (najbolje primjere iz prakse - iz perspektive izvedbe web mjesta, tipke sa stilom isključivo s CSS-om su bolji izbor od gumba za sliku).
Podsjetnik prilikom korištenja slika
Slike mogu igrati važnu ulogu u uspjehu web stranice. Jedan od gore navedenih primjera upotrebljava slike uz drugi sadržaj da bi privukao pozornost na taj sadržaj i da ga ljudi pročitaju.
Prilikom korištenja slika morate imati na umu odabir odgovarajuće slike za vaše potrebe , uključujući točnu sliku predmeta, oblik i također provjeru jesu li slike koje upotrebljavate na web-lokaciji ispravno optimizirane za dostavu web stranica . Ovaj svibanj činiti se kao puno posla samo za dodavanje slika, ali isplata je vrijedan Internet! Fotografije stvarno mogu dodati toliko na uspjeh web mjesta.
Ne ustručavajte se koristiti odgovarajućim slikama na vašoj web-lokaciji te ih povezati kada je to potrebno za interaktivno dodavanje vašeg sadržaja, ali isto tako imajte na umu najbolje slikovne postupke te ispravno i odgovorno upotrijebite ove grafike / odgovore u svom radu za web dizajn.