Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Kuvien Lisääminen HTML:ään | Työskentely Median ja Taulukoiden Kanssa
HTML:n Perusteet

bookKuvien Lisääminen HTML:ään

Kuvat tekevät verkkosivuista kiinnostavampia. Kuvan voi lisätä käyttämällä <img>-tägiä.

index.html

index.html

copy

Tärkeimmät attribuutit:

  • src: pakollinen. Polku kuvatiedostoon (absoluuttinen tai suhteellinen);
  • alt: pakollinen. Teksti, joka näytetään, jos kuvaa ei voida ladata; käytetään myös ruudunlukijoissa;
  • width / height: koko pikseleinä. Ilman näitä kuva näytetään alkuperäisessä koossaan.

alt-attribuutti

alt-tekstin tulee kuvata kuvaa selkeästi ja antaa hyödyllistä kontekstia.

Kuvitellaan seuraava esimerkki. Sinulla on lähde, joka käsittelee hevoskilpailuja. Haluat näyttää, kuinka kilpailijat valmistautuvat kilpailuun.

Huono alt-teksti:

index.html

index.html

copy

Parempi alt-teksti:

index.html

index.html

copy

Parannettu versio tarjoaa todellisen kontekstin ja auttaa näkövammaisia käyttäjiä ymmärtämään, mitä kuva esittää.

src-attribuutti

src-attribuutti voi käyttää sekä absoluuttisia että suhteellisia polkuja kuvatiedoston sijainnin määrittämiseen.

Absoluuttinen polku

Täydellinen URL-osoite, joka osoittaa verkossa olevaan kuvaan.

index.html

index.html

copy

Kuka tahansa voi käyttää kuvaa tämän koko linkin kautta.

Tarkastele alla olevaa todellista esimerkkiä koodisandboxissa.

Note
Huomio

Tutkiaksesi tiedostokansiota, vedä liukusäädintä code sandbox -käyttöliittymän vasemmalla puolella. Vasemmasta yläkulmasta löydät hampurilaispainikkeen, jota kuvaavat kolme viivaa. Napsauttamalla tätä painiketta siirryt tiedostokansion rakenteeseen.

Suhteellinen polku

Viittaa kuvaan projektikansiosi sisällä.

index.html

index.html

copy

Tämä tarkoittaa, että image.jpg on tallennettu images-hakemistoon HTML-tiedostosi lähelle.

Tutustu alla olevaan todelliseen esimerkkiin koodisandboxissa. Löydät images-kansion, joka sisältää sun.png-tiedoston.

Note
Yhteenveto

Absoluuttiset polut: täydet URL-osoitteet, jotka toimivat mistä tahansa internetissä.

Suhteelliset polut: paikallisen projektin polut, joita käytetään oman kansiorakenteen sisällä.

1. Mitä elementtiä voidaan käyttää kuvan lisäämiseen verkkosivulle?

2. Mikä attribuutti on pakollinen määritettäväksi <img/>-elementissä?

question mark

Mitä elementtiä voidaan käyttää kuvan lisäämiseen verkkosivulle?

Select the correct answer

question mark

Mikä attribuutti on pakollinen määritettäväksi <img/>-elementissä?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 1

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

bookKuvien Lisääminen HTML:ään

Pyyhkäise näyttääksesi valikon

Kuvat tekevät verkkosivuista kiinnostavampia. Kuvan voi lisätä käyttämällä <img>-tägiä.

index.html

index.html

copy

Tärkeimmät attribuutit:

  • src: pakollinen. Polku kuvatiedostoon (absoluuttinen tai suhteellinen);
  • alt: pakollinen. Teksti, joka näytetään, jos kuvaa ei voida ladata; käytetään myös ruudunlukijoissa;
  • width / height: koko pikseleinä. Ilman näitä kuva näytetään alkuperäisessä koossaan.

alt-attribuutti

alt-tekstin tulee kuvata kuvaa selkeästi ja antaa hyödyllistä kontekstia.

Kuvitellaan seuraava esimerkki. Sinulla on lähde, joka käsittelee hevoskilpailuja. Haluat näyttää, kuinka kilpailijat valmistautuvat kilpailuun.

Huono alt-teksti:

index.html

index.html

copy

Parempi alt-teksti:

index.html

index.html

copy

Parannettu versio tarjoaa todellisen kontekstin ja auttaa näkövammaisia käyttäjiä ymmärtämään, mitä kuva esittää.

src-attribuutti

src-attribuutti voi käyttää sekä absoluuttisia että suhteellisia polkuja kuvatiedoston sijainnin määrittämiseen.

Absoluuttinen polku

Täydellinen URL-osoite, joka osoittaa verkossa olevaan kuvaan.

index.html

index.html

copy

Kuka tahansa voi käyttää kuvaa tämän koko linkin kautta.

Tarkastele alla olevaa todellista esimerkkiä koodisandboxissa.

Note
Huomio

Tutkiaksesi tiedostokansiota, vedä liukusäädintä code sandbox -käyttöliittymän vasemmalla puolella. Vasemmasta yläkulmasta löydät hampurilaispainikkeen, jota kuvaavat kolme viivaa. Napsauttamalla tätä painiketta siirryt tiedostokansion rakenteeseen.

Suhteellinen polku

Viittaa kuvaan projektikansiosi sisällä.

index.html

index.html

copy

Tämä tarkoittaa, että image.jpg on tallennettu images-hakemistoon HTML-tiedostosi lähelle.

Tutustu alla olevaan todelliseen esimerkkiin koodisandboxissa. Löydät images-kansion, joka sisältää sun.png-tiedoston.

Note
Yhteenveto

Absoluuttiset polut: täydet URL-osoitteet, jotka toimivat mistä tahansa internetissä.

Suhteelliset polut: paikallisen projektin polut, joita käytetään oman kansiorakenteen sisällä.

1. Mitä elementtiä voidaan käyttää kuvan lisäämiseen verkkosivulle?

2. Mikä attribuutti on pakollinen määritettäväksi <img/>-elementissä?

question mark

Mitä elementtiä voidaan käyttää kuvan lisäämiseen verkkosivulle?

Select the correct answer

question mark

Mikä attribuutti on pakollinen määritettäväksi <img/>-elementissä?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 1
some-alt