Skip to content

Kuinka lisätä kuvia verkkosivuillesi

20 de maaliskuu de 2021

Kaikki kuvat, jotka haluat linkittää verkkosivustosi HTML-koodiin, on ensin ladattava samaan paikkaan, johon lähetät verkkosivun HTML-koodin, riippumatta siitä, onko sivusto isännöity verkkopalvelimelle, johon pääset FTP: n kautta, vai käytätkö verkkopalvelua. Jos käytät verkkopalvelua, käytät todennäköisesti palvelun tarjoamaa latauslomaketta. Nämä lomakkeet ovat yleensä isännöintitilisi hallinto-osiossa.

Kuvasi lataaminen isännöintipalveluun on vasta ensimmäinen askel. Sitten sinun on lisättävä tunniste HTML-koodiin sen tunnistamiseksi.

Kuvien lataaminen samaan hakemistoon kuin HTML

Valokuvat voivat sijaita samassa hakemistossa kuin HTML. Jos näin on:

  1. Lähetä kuva verkkosivustosi juuriin.
  2. Lisää kuvalappu HTML-koodiin osoittamaan kuvaan.
  3. Lataa HTML-tiedosto verkkosivustosi juuriin.
  4. Testaa tiedosto avaamalla sivu selaimessasi.

Kuvalappu on seuraavan muotoinen:

<img src=”image url” height=”xxx” width=”yyy” alt=”text”/>

Olettaen, että lataat valokuvan kuusta nimellä ”lunar.jpg”, kuvalappu on seuraavanlainen:

<img src=”images/lunar.jpg” height=”500″ width=”500″ alt=”moon”/>

Korkeus ja leveys ovat valinnaisia, mutta suositeltavia. Nämä oletusarvot ovat pikseleinä, mutta ne voidaan ilmaista myös prosentteina:

<img src=”images/lunar.jpg” height=”50%” alt=”moon”/>

Kuvalappu ei vaadi sulkemistunnistetta.

Jos linkität kuvan toisessa asiakirjassa, käytä ankkuritunnisteita ja sijoita kuvalappu sen sisälle.

<a href=”link url”><img src=”image url” height=”xxx” width=”yyy” alt=”text”/></a>

Kuvien lataaminen alihakemistoon

On tavallista tallentaa kuvia alihakemistoon, jota yleensä kutsutaan Kuvat. Jotta voit osoittaa kyseisessä hakemistossa oleviin kuviin, sinun on tiedettävä, missä se on verkkosivustosi juuressa.

Verkkosivustosi juuressa URL-osoite näkyy ilman hakemistoja lopussa. Esimerkiksi ”MyWebpage.com” -nimisen verkkosivuston juuri noudattaa tätä muotoa: http://MyWebpage.com/. Huomaa kauttaviiva lopussa. Näin hakemiston juuri ilmoitetaan yleensä. Alihakemistot sisältävät kyseisen kauttaviivan osoittamaan, missä he istuvat hakemistorakenteessa. MyWebpage-esimerkkisivustolla voi olla rakenne:

http://MyWebpage.com/ — the root directory

http://MyWebpage.com/products/ — the products directory
http://MyWebpage.com/products/documentation/ — the documentation directory under the products directory
http://MyWebpage.com/images/ — the images directory

Tässä tapauksessa, kun osoitat kuvaan kuvahakemistossa, kirjoitat:

 <img src=”http://MyWebpage.com/images/lunar.jpg” height=”500″ alt=”moon”/>

Tätä kutsutaan kuvan absoluuttiseksi poluksi.

Yleisiä ongelmia kuvissa, joita ei näytetä

Kuvien näyttäminen verkkosivullasi voi olla aluksi haastavaa. Kaksi yleisintä syytä on, että kuvaa ei lähetetty kohtaan, johon HTML osoittaa, tai HTML on kirjoitettu väärin.

Ensimmäinen asia on nähdä, löydätkö kuvasi verkosta. Suurimmalla osalla palveluntarjoajia on jonkinlainen hallintatyökalu, jonka avulla voit nähdä, mihin olet ladannut kuvasi. Kun luulet, että sinulla on oikea URL-osoite kuvallesi, kirjoita se selaimeesi. Jos kuva näkyy, sinulla on oikea sijainti.

Tarkista sitten, että HTML-koodi osoittaa kyseiseen kuvaan. Helpoin tapa tehdä se on liittää juuri testaamasi kuvan URL-osoite SRC-määritteeseen. Lataa sivu uudelleen ja testaa.

Kuvalappusi SRC-määritteen ei pitäisi koskaan alkaa C: tai tiedosto: Nämä näyttävät toimivan, kun testaat verkkosivua omalla tietokoneellasi, mutta kaikki sivustollasi vierailevat näkevät rikki kuvan. Tämä johtuu siitä, että C: osoittaa sijainnin sinun kovalevy. Koska kuva on kiintolevylläsi, se näkyy, kun katsot sitä, mutta se ei ole kenellekään muulle.