Web-kehityksen Perusteet

HTML Kuvat

Helppo
15 min

HTML-kuvatagia käytetään kuvien lisäämiseen HTML-sivulle. Kuvan lisääminen tapahtuu <img> -tagilla (kuvatagi), joka sisältää useita erilaisia attribuutteja. Tässä on esimerkki kuvatagin käytöstä:

<img src="kissa.jpg" width="613" height="640" alt="Kuvateksti">

"src" (source) -attribuutti määrittää kuvan URL-osoitteen. Tämä attribuutti on pakollinen, koska selain ei tiedä, mistä kuva löytyy ilman sitä.

"alt" (alternative) -attribuutti määrittää vaihtoehtoisen tekstin, joka näytetään, jos kuva ei lataudu oikein tai käyttäjä käyttää tekstiselainta. Tämä attribuutti on myös tärkeä, koska se auttaa näkövammaisia käyttäjiä ymmärtämään kuvan sisällön.

"width" ja "height" -attribuutit määrittävät kuvan leveyden ja korkeuden pikseleinä. Nämä attribuutit ovat valinnaisia, mutta niitä suositellaan käytettäväksi, koska ne auttavat sivun latautumista nopeammin, kun selain tietää, kuinka paljon tilaa kuvan varalle on varattu.

Harjoittele

Kokeile itse!
hakatemia pro

Valmis ryhtymään eettiseksi hakkeriksi?
Aloita jo tänään.

Hakatemian jäsenenä saat rajoittamattoman pääsyn Hakatemian moduuleihin, harjoituksiin ja työkaluihin, sekä pääset discord-kanavalle jossa voit pyytää apua sekä ohjaajilta että muilta Hakatemian jäseniltä.