Oppiskele Kuvien Käsittely HTML:ssä

Kuvat parantavat verkkosivun visuaalista vetovoimaa ja auttavat tiedon välittämisessä. HTML:ssä kuvat lisätään käyttämällä <img>-tägiä.

Kuvien lisääminen

<img>-tägi on itsestään sulkeutuva ja vaatii vähintään kaksi attribuuttia:

src: kuvatiedoston sijainti;
alt: vaihtoehtoinen teksti saavutettavuutta varten tai kun kuvaa ei voida ladata.

<img src="image.jpg" alt="Description of the image">

Kuvan attribuutit

src: kuvan polku tai URL (pakollinen);
alt: varateksti ja saavutettavuuskuvaus;
width: määrittää kuvan leveyden;
height: määrittää kuvan korkeuden;
title: näyttää työkaluvihjeen hiiren ollessa kuvan päällä.

index.html

<img>-elementti lisää kuvan verkkosivulle;
src-attribuutti määrittää kuvatiedoston lähdeosoitteen;
alt-attribuutti asettaa vaihtoehtoisen tekstin kuvalle;
width-attribuutti määrittää kuvan leveyden;
height-attribuutti määrittää kuvan korkeuden;
title-attribuutti antaa lisätietoa kuvasta.

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 3. Luku 1

Kysy tekoälyä

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

Suggested prompts:

Can you explain more about the difference between using local and online images?

What happens if I don't include the alt attribute in my image tag?

How do I make sure my images are responsive on different devices?

Pyyhkäise näyttääksesi valikon

Kuvat parantavat verkkosivun visuaalista vetovoimaa ja auttavat tiedon välittämisessä. HTML:ssä kuvat lisätään käyttämällä <img>-tägiä.

Kuvien lisääminen

<img>-tägi on itsestään sulkeutuva ja vaatii vähintään kaksi attribuuttia:

src: kuvatiedoston sijainti;
alt: vaihtoehtoinen teksti saavutettavuutta varten tai kun kuvaa ei voida ladata.

<img src="image.jpg" alt="Description of the image">

Kuvan attribuutit

src: kuvan polku tai URL (pakollinen);
alt: varateksti ja saavutettavuuskuvaus;
width: määrittää kuvan leveyden;
height: määrittää kuvan korkeuden;
title: näyttää työkaluvihjeen hiiren ollessa kuvan päällä.

index.html

<img>-elementti lisää kuvan verkkosivulle;
src-attribuutti määrittää kuvatiedoston lähdeosoitteen;
alt-attribuutti asettaa vaihtoehtoisen tekstin kuvalle;
width-attribuutti määrittää kuvan leveyden;
height-attribuutti määrittää kuvan korkeuden;
title-attribuutti antaa lisätietoa kuvasta.

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 3. Luku 1

Kuvien Käsittely HTML:ssä

Kuvien lisääminen

Kuvan attribuutit

1. Mitä elementtiä käytetään kuvien lisäämiseen HTML-dokumenttiin?

2. Mikä attribuutti on pakollinen, jotta `<img>`-elementti näyttää kuvan?

3. Mitä `alt`-attribuutti tarjoaa kuvalle?

4. Mitä tapahtuu, jos `src`-attribuutissa määriteltyä kuvaa ei voida ladata?

Kuvien Käsittely HTML:ssä

Kuvien lisääminen

Kuvan attribuutit

1. Mitä elementtiä käytetään kuvien lisäämiseen HTML-dokumenttiin?

2. Mikä attribuutti on pakollinen, jotta `<img>`-elementti näyttää kuvan?

3. Mitä `alt`-attribuutti tarjoaa kuvalle?

4. Mitä tapahtuu, jos `src`-attribuutissa määriteltyä kuvaa ei voida ladata?

Kuvien Käsittely HTML:ssä

Kuvien lisääminen

Kuvan attribuutit

1. Mitä elementtiä käytetään kuvien lisäämiseen HTML-dokumenttiin?

2. Mikä attribuutti on pakollinen, jotta <img>-elementti näyttää kuvan?

3. Mitä alt-attribuutti tarjoaa kuvalle?

4. Mitä tapahtuu, jos src-attribuutissa määriteltyä kuvaa ei voida ladata?

Kuvien Käsittely HTML:ssä

Kuvien lisääminen

Kuvan attribuutit

1. Mitä elementtiä käytetään kuvien lisäämiseen HTML-dokumenttiin?

2. Mikä attribuutti on pakollinen, jotta <img>-elementti näyttää kuvan?

3. Mitä alt-attribuutti tarjoaa kuvalle?

4. Mitä tapahtuu, jos src-attribuutissa määriteltyä kuvaa ei voida ladata?

2. Mikä attribuutti on pakollinen, jotta `<img>`-elementti näyttää kuvan?

3. Mitä `alt`-attribuutti tarjoaa kuvalle?

4. Mitä tapahtuu, jos `src`-attribuutissa määriteltyä kuvaa ei voida ladata?

2. Mikä attribuutti on pakollinen, jotta `<img>`-elementti näyttää kuvan?

3. Mitä `alt`-attribuutti tarjoaa kuvalle?

4. Mitä tapahtuu, jos `src`-attribuutissa määriteltyä kuvaa ei voida ladata?