Verkkosivustot ovat toisin kuin kaikki heidän edessään olevat viestintävälineet. Yksi tärkeimmistä asioista, jotka asettavat verkkosivustoja aiempien mediaformaattien, kuten painatus-, radio- ja jopa televisiolähetysten ulkopuolelle, on " hyperlinkin " käsite.
Hyperlinkit, joita yleisesti kutsutaan myös "linkkeiksi", tekevät Webistä niin dynaamisen. Toisin kuin painettu julkaisu, joka voi viitata toiseen artikkeliin tai muuhun resurssiin, verkkosivustot voivat käyttää näitä linkkejä, jotta ne todella lähettävät vierailijat muihin sivuihin ja resursseihin. Mikään muu lähetysväline ei voi tehdä tätä. Voit kuulla mainoksen radiossa tai katsella televisiossa, mutta ei ole hyperlinkkejä, jotka voivat viedä sinut kyseisiin mainoksiin yrityksille, joilla verkkosivusto voi helposti tehdä. Linkit ovat todella hämmästyttävä viestintä- ja vuorovaikutustyökalu!
Usein verkkosivustossa olevat linkit ovat tekstisisältöä, joka ohjaa kävijöitä saman sivuston muille sivuille. Sivuston navigointi on esimerkki käytetyistä tekstilinkkeistä, mutta linkkien ei tarvitse olla tekstipohjaisia. Voit myös helposti linkittää kuvia verkkosivustoosi. Katsotaanpa, miten tämä tehdään, ja seuraa muutamia tapauksia, joissa haluat käyttää kuvapohjaisia hyperlinkkejä.
Kuinka linkittää kuvan
Ensimmäinen asia, jonka tarvitsee tehdä, on sijoittaa kuva itse HTML- dokumenttiin. Kuvapohjaisen linkin yleinen käyttö on sivuston logo, joka linkitetään sitten sivuston kotisivulle. Alla olevassa esimerkkikoodissamme käytetty tiedosto on SVG- logo. Tämä on hyvä valinta, koska se sallii kuvan skaalautumisen eri resoluutiot, samalla kun ylläpitää kuvanlaatua ja pieni koko tiedostokoko.
Näin voit sijoittaa kuvan HTML-dokumenttiin:
Kuvan tunnuksen ympärillä lisäät nyt ankkuriliitän, ankkurielementin avaaminen ennen kuvaa ja sulkemisen ankkuri kuvan jälkeen. Tämä on samanlainen kuin haluat linkittää tekstiä, mutta vain käärittämällä sanat, jotka haluat olla linkkinä ankkurintunnisteiden kanssa, käärittele kuva. Alla olevassa esimerkissämme linkitämme takaisin sivustomme etusivulle, joka on "index.html".
Kun lisäät tämän HTML-sivun, älä aseta välilyöntejä ankkurimallin ja kuvamerkin väliin. Jos käytät, jotkut selaimet lisäävät pieniä punkkeja kuvan vieressä, mikä näyttää outoa.
Logon kuva toimii nyt myös etusivupainikkeena, joka on melko paljon verkkotunnusta näinä päivinä. Huomaa, että HTML-merkintään ei sisälly mitään visuaalisia tyylejä, kuten kuvan leveyttä ja korkeutta. Jätämme nämä visuaaliset tyylit CSS: ään ja ylläpidämme puhtaan HTML-rakenteen ja CSS-tyylien erottamista.
Kun olet saanut CSS: n, tyylit, joita kirjoitat tämän logo-graafin kohdistamiseksi, voivat sisältää kuvan koon, mukaan lukien herkät tyylit monilaitteille sopivien kuvien ja kaikkien kuvien / linkkien, kuten rajojen tai CSS: n pudota varjoja. Voit myös antaa kuvan tai linkittää luokan määritteen, jos tarvitset lisää "koukkuja" käytettäväksi CSS-tyyliesi kanssa.
Käytä tapauksia kuvaprojekteihin
Joten kuvan linkin lisääminen on melko helppoa. Kuten olemme juuri nähneet, sinun tarvitsee vain kääriä kuva asianmukaisilla ankkurintunnisteilla. Seuraava kysymyksesi voisi olla "milloin tekisit tämän käytännössä edellä mainitun logon / kotisivun linkin esimerkin lisäksi?"
Seuraavassa on muutamia ajatuksia:
- Pikkukuvat galleriassa, jotka linkittävät suurempien versioiden näihin kuviin.
- Kuvat, joita käytetään yksin edustamaan sisältöä, kuten tuotekuvia sähköisen kaupankäynnin verkkosivustolle.
- Teaser-kuvat, jotka ovat osa muuta sisältöä, kuten blogikirjoitusta tai lehdistötiedotteita, jotka houkuttelevat ihmisiä huomaan, että kyseinen sisältö antaa heille kohdeväliä koskettamalla tai klikkaamalla lukea koko artikkeli.
- Kuvakuvakkeet, joita käytetään painikkeina yhteyden muodostamiseen tiettyihin sivuston toimintoihin tai sivuihin.
- Sosiaalisen median linkit, jotka käyttävät tunnistettavia logoja sosiaalisen median sivustoille, jotka ovat tärkeitä kyseiselle sivustolle tai yritykselle.
- Kuvat käyttävät painikkeita tiettyihin toimintoihin, kuten lomakkeiden lähettämiseen (parhaat käytännöt huomaavat - sivuston suorituskyvyn näkökulmasta, painikkeet, jotka on suunniteltu puhtaasti CSS: ään, ovat parempia valintoja kuin kuvapainikkeet).
Muistutus kuvattaessa
Kuvat voivat olla tärkeässä roolissa sivuston menestyksestä. Yksi edellä mainituista esimerkeistä mainitaan kuvien avulla muiden sisältöjen rinnalla kiinnittää huomiota kyseiseen sisältöön ja saada ihmiset lukemaan sen.
Kun käytät kuvia, sinun on huomioitava oikean kuvan tarpeidesi mukaan. Tämä sisältää oikean kuvan sisällön, muodon ja myös varmista, että sivustossasi käyttämäsi kuvat on optimoitu verkkosivustojen toimittamiseen . Tämä voi tuntua paljon työtä vain lisätä kuvia, mutta voitto on sen arvoista! Kuvat todella voivat lisätä niin paljon sivuston menestykseen.
Älä epäröi käyttää sivustoosi sopivia kuvia ja liittää ne tarvittaessa, jotta voit lisätä sisältöäsi vuorovaikutteisesti. Muista myös kuvata parhaita käytäntöjä ja käyttää näitä grafiikkaa / linkkejä oikein ja vastuullisesti web-suunnittelutyössäsi.