HTML-tagit, -elementit ja -attribuutit ovat tärkeitä rakennuspalikoita verkkosivujen luomisessa.

HTML-dokumentin sisältö koostuu useista eri palasista, kuten kuvista, erilaisista teksteistä, tyyleistä, skripteistä, listoista, taulukoista, jne. Näitä palasia kutsutaan HTML-elementeiksi. Ja HTML-elementit luodaan HTML-koodissa HTML-tageilla.

HTML-tagi aloittaa ja lopettaa HTML-elementin. HTML-elementti voi sisältää tekstiä, muita HTML-tageja, tai muita elementtejä. Esimerkiksi, seuraava koodi luo otsikkoelementin käyttäen otsikkotagia,

HTML-attribuutit ovat avainsanoja, jotka määrittävät HTML-elementtien ominaisuuksia. Attribuutit määritellään HTML-elementtien sisällä ja niitä käytetään usein tarkentamaan elementin tietoja. Esimerkiksi, <img> -tagi käyttää src-attribuuttia määrittelemään kuvan URL:n. Seuraava koodi näyttää <img>-tagin, joka käyttää src-attribuuttia

HTML-elementit ja -attribuutit voidaan myös yhdistää, jotta voidaan tarkentaa elementin sisältöä ja ulkonäköä. Esimerkiksi, seuraava koodi sisältää 

-tagin, joka luo hyperlinkin URL-osoitteeseen ja käyttää 

-attribuuttia näyttämään hiiren kohdistimen päällä olevan tekstin:

HTML-tagit, -elementit ja -attribuutit ovat tärkeitä rakennuspalikoita verkkosivujen luomisessa.

## HTML-elementit

HTML-dokumentin sisältö koostuu useista eri palasista, kuten kuvista, erilaisista teksteistä, tyyleistä, skripteistä, listoista, taulukoista, jne. Näitä palasia kutsutaan HTML-elementeiksi. Ja HTML-elementit luodaan HTML-koodissa HTML-tageilla.

---

## HTML-tagit

HTML-tagi aloittaa ja lopettaa HTML-elementin. HTML-elementti voi sisältää tekstiä, muita HTML-tageja, tai muita elementtejä. Esimerkiksi, seuraava koodi luo otsikkoelementin käyttäen otsikkotagia,** <h1>**, joka aloittaa otsikon ja **</h1>** joka lopettaa sen:

```html
<h1>Tämä on otsikko</h1>
```

@embed d5bee6449de5

---

## HTML-attribuutit

HTML-attribuutit ovat avainsanoja, jotka määrittävät HTML-elementtien ominaisuuksia. Attribuutit määritellään HTML-elementtien sisällä ja niitä käytetään usein tarkentamaan elementin tietoja. Esimerkiksi, <img> -tagi käyttää src-attribuuttia määrittelemään kuvan URL:n. Seuraava koodi näyttää <img>-tagin, joka käyttää src-attribuuttia

```html
<img src="rocketship.gif" alt="Kuvateksti">
```

@embed 8f4ace0eba0c

---

## Molempi parempi!

HTML-elementit ja -attribuutit voidaan myös yhdistää, jotta voidaan tarkentaa elementin sisältöä ja ulkonäköä. Esimerkiksi, seuraava koodi sisältää **<a>**-tagin, joka luo hyperlinkin URL-osoitteeseen ja käyttää **title**-attribuuttia näyttämään hiiren kohdistimen päällä olevan tekstin:

```html
<a href="https://www.hakatemia.fi" title="Siirry Hakatemiaan">Hakatemia</a>
```

@embed 5b95cecdd9e3


HTML-Tagit, Elementit ja Attribuutit

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ä

HTML-Tagit, Elementit ja Attribuutit

HTML-elementit

Hakkeroinnin oppiminen alkaa tästä