HTML-merkintäkieli
HTML (HyperText Markup Language) -merkintäkieli on kieli, jolla verkkosivut on visuaalisesti rakennettu. Toisin kuin ohjelmointikielet, HTML:län avulla selaimelle kerrotaan verkkosivun struktuuri ja sisältö, mutta sillä ei itsessään suoriteta koodia. HTML on yksi verkkosivukehityksen (sekä testaamisen) peruspilareita ja onkin tämän kurssin osalta erittäin tärkeä ymmärtää.
HTML siis kertoo selaimelle, mitä ja miten tämän kuuluu näyttää haluttua sisältöä visuaalisesti ja tämä tehdään käyttämällä HTML-elementtejä. HTML-elementtiä voit ajatella vaikka lego-palana, joita yhdistelemällä voit rakentaa mitä vain.
Esimerkiksi, voimme kertoa selaimelle, että haluamme ison tekstin, jonka alle kuvan ja tämän alle linkin Hakatemian sivuille.
1<html>
2
3<h1>
4Iso teksti
5</h1>
6
7
8
9<img width=200 height=200 src="https://cdn.pixabay.com/photo/2013/07/13/11/43/tux-158547_960_720.png"></img>
10
11
12
13<a href="https://www.hakatemia.fi/">Tästä Hakatemiaan!</a>
14
15</html>
16Voit kopioida yllä esitetyn HTML-koodin *testi.html-*nimiseen tiedostoon ja avata tämän selaimessa. Tulet näkemään jotain vastaavan näköistä.
Voit myös katsoa sekä muokata muiden sivujen HTML-koodia omassa selaimessasi. Esimerkiksi, Google Chromella voit navigoida haluamallesi sivulle, klikata hiiren oikealla napilla ja valita *Inspect. *
CSS
CSS (Cascading Style Sheets) on tyylikieli, jonka tarkoitus on tukea HTML-kielellä määritettyä sisältöä. Sekä HTML- että CSS-kielen tarkoitus on siis määrittää verkkosivun visuaalinen ulkonäkö, missä HTML määrittää verkkosivun struktuurin sekä sisällön, kun taas CSS kertoo selaimelle miltä kyseinen sisältö kuuluu näyttää.
Voit esimerkiksi CSS:n avulla määrittää verkkosivulle taustakuvan.
1<html>
2 <head>
3
4 <style>
5 body { background-image: url("https://cdn.pixabay.com/photo/2013/07/13/11/43/tux-158547_960_720.png"); }
6 </style>
7 </head>
8 <body>
9 <h1>Iso teksti</h1>
10 <a href="https://www.hakatemia.fi/">Hakatemiaan!</a>
11 </body>
12</html>
13
Moduulissa annetaan vain peruskäsitys siitä, mitä HTML on ja miten se toimii. Lisää HTML-aiheista materiaalia löydät esimerkiksi täältä. Alla myös HTML-leikkikenttä, jossa voit vapaasti tutkia HTML-kielen saloja.
Kokeile itse!
Interaktiivinen leikkikenttä
<h1>Hei vaan kaikki.</h1>
Hakkeroinnin oppiminen alkaa tästä
Sadat interaktiiviset kurssit, virtuaalilabrat ja CTF-haasteet selaimessasi. Aloita ilmainen kokeilu ilman korttitietoja.