HTML-kuvatagia käytetään kuvien lisäämiseen HTML-sivulle. Kuvan lisääminen tapahtuu 

-tagilla (kuvatagi), joka sisältää useita erilaisia attribuutteja. Tässä on esimerkki kuvatagin käytöstä:

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

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

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

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ä:

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

@embed 71cfbdf4c44f


HTML Kuvat

Tämä kurssi on johdatus web-kehitykseen ja se keskittyy HTML:n, CSS:n, JavaScriptin ja taustajärjestelmien perusteisiin. Kurssin tavoitteena on antaa opiskelijoille tarvittavat taidot ja tietämys, jotta he voivat suunnitella ja kehittää ja ymmärtää yksinkertaisia web-sovelluksia.

Tämä kurssi on johdatus web-kehitykseen ja se keskittyy verkkosivustojen peruspalikoiden, eli HTML:n, CSS:n ja JavaScriptin sekä taustajärjestelmien perusteisiin. Kurssin tavoitteena on antaa sinulle tarvittavat taidot ja tietämys, jotta voit suunnitella ja kehittää yksinkertaisia full-stack web-sovelluksia, sekä ymmärtää muiden tekemiä web-sovelluksia.

Ensimmäisessä osassa opiskellaa HTML:ää joka on verkkosivustojen rakentamisessa käytetty merkintäkieli.


Toisessa osassa opiskellaan CSS:n perusteita, kuten tyylitiedoston käyttöä, sääntöjä, selektoreita ja muotoilua. Käsitellään myös CSS:n edistyneitä ominaisuuksia, kuten animaatioita ja responsiivista suunnittelua.


Kolmannessa osassa opiskellaan JavaScriptia joka on nykyisin valtavan tärkeä työkalu sekä frontend että backend -kehityksessä ja sitä kautta myös tietoturvassa ja eettisessä hakkeroinnissa.

Viimeisessä osassa opiskellaan rakentamaan taustajärjestelmiä Python Flask sovelluskehyksellä. Opit taustajärjestelmien perusteet, kuten tietokantojen käytön, autentikoinnin, istunnonhallinnan sekä pääsynhallinnan.

Voit tehdä kurssin tehtäviä omalla koneellasi jos haluat, mutta jokaisessa koodiesimerkissä on nappi jolla voit suoraan selaimessa ajaa kyseisen koodin ja nähdä miltä sivu näyttää, tai mitä skripti tulostaa. Sinun ei siis tarvitse asentaa mitään, mutta voit jos haluat.

On suositeltavaa mutta vapaaehtoista tehdä tili replit.com palvelussa, tällöin voit vain klikata "Fork" koodiesimerkeissä niin saat niistä kopion itsellesi jolla voit leikkiä

Mikä on HTML?

HTML-Tagit, Elementit ja Attribuutit

HTML-Dokumentin Rakenne

HTML ja Tekstin Muotoilu

HTML Linkit

HTML Taulukot

HTML-perusteet

Mikä on CSS?

CSS Tyylitiedoston Käyttö

CSS Luokat

CSS Valitsimet

CSS Fontit

HTML Kuvat

Harjoittele

Hakkeroinnin oppiminen alkaa tästä