Summary  
This chapter explains how to embed images in HTML using the `<img>` tag and configure key attributes such as `src`, `alt`, `width`, `height`, and `title`.

General domain of usage  
Web development

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


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?

Hallitse HTML:n perusteet rakentaaksesi hyvin jäsenneltyä ja saavutettavaa verkkosisältöä. Opi jäsentämään dokumentteja käyttämällä tageja, elementtejä ja attribuutteja. Käsittele sujuvasti tekstiä, listoja, kuvia, ääntä ja videota rikastuttaaksesi verkkosivuja. Luo taulukoita järjestetyn datan esittämiseen ja lomakkeita käyttäjän syötteiden ja vuorovaikutuksen mahdollistamiseen. Tutustu semanttiseen HTML:ään saavutettavuuden parantamiseksi ja rakenna kokonaisia, toiminnallisia verkkosivustorakenteita alusta alkaen.

Master the essentials of HTML to build well-structured and accessible web content. Learn how to structure documents using tags, elements, and attributes. Work confidently with text, lists, images, audio, and video to enrich web pages. Create tables for organized data and forms for user input and interaction. Discover semantic HTML to enhance accessibility and build complete, functional website structures from the ground up.

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?