Summary  
This chapter explains how to insert and configure images in HTML using the `<img>` tag and its attributes—`src`, `alt`, `width`, `height`, and `title`—to control image source, accessibility text, dimensions, and tooltips.

General domain of usage  
Web development

Kuvat parantavat verkkosivun visuaalista ilmettä 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.
```html
<img src="image.jpg" alt="Description of the image">
```




## Kuvan attribuutit
- `src`: kuvan polku tai URL (pakollinen);
- `alt`: varateksti ja saavutettavuuskuvaus;
- `width`: asettaa kuvan leveyden;
- `height`: asettaa kuvan korkeuden;
- `title`: näyttää työkaluvihjeen hiiren ollessa kuvan päällä.


PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkltYWdlczwvdGl0bGU+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8aW1nCiAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy8zOTJmMjRhYy0wMTI2LTRjMzQtYTI4YS1mMmYyNmQxMjE5NmIvc2VjdGlvbi0zL3N0YXJ0dXAucG5nIgogICAgICBhbHQ9IlRoZSByb2NrZXQgaXMgZ2FpbmluZyBhbHRpdHVkZSIKICAgICAgd2lkdGg9IjEyOCIKICAgICAgaGVpZ2h0PSIxMjgiCiAgICAgIHRpdGxlPSJSb2NrZXQgcHJlc2VydmluZyBzdGFydHVwIGxhdW5jaCIKICAgIC8+CiAgPC9ib2R5Pgo8L2h0bWw+

- `<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.

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

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

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

Rakenna jäsenneltyjä verkkosivuja HTML:n avulla. Luo tekstisisältöä, linkkejä, luetteloita, kuvia, taulukoita ja lomakkeita sekä järjestä kaikki semanttisilla elementeillä kokonaiseksi sivuksi.

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?