Summary  
This chapter explains how to embed images in HTML using the `<img>` tag and its key attributes (`src`, `alt`, `width`, `height`), including best practices for accessible alt text and using absolute versus relative paths.  

General domain of usage  
Web page content design

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

PGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL21vdW50YWlucy5hdmlmIgogIGFsdD0iTW91bnRhaW5zIGluIHNub3cgYW5kIGNsZWFuIHNreSIKICB3aWR0aD0iNTAwIgogIGhlaWdodD0iMzMzIgovPg==

### 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 tulisi kuvata kuvaa selkeästi ja antaa hyödyllistä kontekstia.

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

PGltZyAKICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9tYW4raG9yc2UuYXZpZiIKICBhbHQ9IkEgaHVtYW4gb24gYSBob3JzZSIKLz4=

PGltZyAKICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9tYW4raG9yc2UuYXZpZiIKICBhbHQ9IkEgam9ja2V5IHJpZGVzIGEgaG9yc2UgdGhyb3VnaCBhIHRyYWluaW5nIGFyZWEgc3Vycm91bmRlZCBieSB0cmVlcyIKLz4=

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äysi URL-osoite, joka osoittaa verkossa olevaan kuvaan.

PGltZyBzcmM9Imh0dHBzOi8vZXhhbXBsZS5jb20vaW1hZ2VzL2ltYWdlLmpwZyIgYWx0PSJJbWFnZSBEZXNjcmlwdGlvbiIgLz4=

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

Tarkastele seuraavaa oikeaa esimerkkiä.
- [View the Code](https://github.com/olreyplay/adding-images-in-html/blob/main/index.html)
- [Open the Live Page](https://olreyplay.github.io/adding-images-in-html/)

### Suhteellinen polku
Viittaa kuvaan projektikansiosi sisällä.

PGltZyBzcmM9Ii4vaW1hZ2VzL2ltYWdlLmpwZyIgYWx0PSJJbWFnZSBEZXNjcmlwdGlvbiIgLz4=

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

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

- [View the Code](https://github.com/olreyplay/adding-images-in-html-v2/blob/main/index.html)
- [Open the Live Page](https://olreyplay.github.io/adding-images-in-html-v2/)

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

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

Yhteenveto

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

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

Opi HTML:n (HyperText Markup Language) perusteet, joka on verkkokehityksen perusta. Tämä aloittelijaystävällinen kurssi kattaa tunnisteet, attribuutit, elementit ja verkkosivujen rakenteen. Hanki käytännön taitoja otsikoiden, kappaleiden, listojen, kuvien, linkkien, lomakkeiden ja taulukoiden luomisessa. Tutustu parhaisiin käytäntöihin, optimointiin ja verkkosivustojen saavutettavuuteen. Aloita verkkokehityksen matkasi HTML:n avulla.

Tutki verkon sisäistä toimintaa. Opi, miten data kulkee verkkojen läpi, tutustu protokollien rooliin ja selvitä IP-osoitteiden ja verkkotunnusten mysteerit. Saa korkeatasoinen ymmärrys siitä, miten verkkoselaimet ja palvelimet kommunikoivat toimittaakseen verkkosisältöä.

Tutustu tunnisteiden voimaan sisällön jäsentämisessä, otsikoista ja kappaleista listoihin ja taulukoihin. Opi, kuinka voit parantaa elementtejä attribuuteilla.

HTML-dokumentin rakenteen ydin. Opi HTML-dokumentin osat, mukaan lukien doctype-ilmoitus, head ja body. Ymmärrä kunkin elementin tarkoitus ja miten ne vaikuttavat verkkosivun kokonaisrakenteeseen.

Tee verkkosivusta houkuttelevampi median, kuten kuvien, äänen ja videon avulla. Työskentele jäsennellyn taulukkomuotoisen datan kanssa taulukoiden muodossa.

Tutustu HTML-lomakkeiden monipuolisuuteen. Opi suunnittelemaan intuitiivisia ja käyttäjäystävällisiä lomakkeita hyödyntämällä keskeisiä käsitteitä ja tekniikoita. Selvitä, kuinka lomakkeet mahdollistavat käyttäjän vuorovaikutuksen ja tietojen lähettämisen verkkosivustoilla.

Kuvien Lisääminen HTML:ssä

Tärkeimmät attribuutit:

alt-attribuutti

src-attribuutti

Absoluuttinen polku

Suhteellinen polku

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

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