HTML tulee sanoista HyperText Markup Language. Se kuvaa millaisia elementtejä sivulla on.
Suosittelen katsomaan lähdekoodia jos hämmentää. Jos haluaa nykyisen sivun lähdekoodin niin voi painaa sivulla hiiren oikealla napilla ja valita "inspect" tai "tarkatele", riippuen selaimen kielestä. Voit myös painaa hiiren oikealla napilla ja katsoa sivun lähdekoodia tai view source code. Tarkka sanoitus vaihtelee selaimen ja kielen mukaan.
Koodissa joutuu tekemään tiettyjä temppuja kun haluaa näyttää koodia sivulla ilman että selain käyttää sitä niin kuin normaalisti < on pienempi kuin merkki (<) ja > on suurempi kuin merkki (>).
HTML toimii niin sanoituilla tageilla. Niitä on monia ja niiden ulkoa
opettelu on vähän niin kuin opettelis sanakirjan ulkoa että osaa kieltä.
Tässä kappaleessa käydään läpi pari yleisintä tagia. Tageissä on yleensä
avaava ja sulkeva puoli ja ne kirjoitetaan muodossa
<esim>Sisältöä</esim>
. Esimerkissä on "esim" tag
jonka sisällä on jotain sisältöä. Jälkimmäinen esim on sulkeva tag. Huomaa
kauttaviiva. Tagien sisällä voi olla muita tageja. Nettisivut koostuvat
lähinnä sisäkkäisistä tageistä.
HTML ei sitä vaadi, mutta yleensä on tyypillistä sisentää tagin sisältö. Helpottaa lukemista
Tekstiä on mukavampi lukea jos siinä on kappalejakoja.
<p>
tag määrittelee kappaleen.
Otsikot määritellään h tageilla joissa on aina joku numero. Mitä pienempi numero sen isompi otsikko. Ensimmäisen otsikon pitäisi olla h1, jonka alaotsikon pitäisi olla h2 ja sen alaotsikko taas h3 ja niin päin pois. Esimerkiksi näin:
<h1>Pääotsikko</h1>
<h2>Alaotsikko</h2>
<h2>Toinen alaotsikko</h2>
<h3>Toisen alaotsikon alaotsikko</h1>
<ul>
on Unordered list, eli ranskalaisia viivoja<li>
on List Item, eli yksittäinen ranskalainen viiva
<div>
on Divider, todella hyödyllinen asettelemaan
kamaa
Joskus tag saa vaatii/haluaa/voi ottaa muutakin määrittelyjä kuin sisältöä.
Tätä varten on attribuutteja. Yleisesti joka tagille voi antaa esimerkiksi
id
ja class
attribuuteja, esim näin:
<p class="foo" id="bar">
Jotain tekstiä
</p>
Class ja id ovat oleellisia tunnistamaan elementtejä css ja js kanssa, mutteivat tee mitään itsekseen.
Kaduttavasti HTML keksijä käytti link sanaa muualla, joten linkit on
"ankkureita" ja ne tehdään näin
<a href="https://google.com">Linkin teksti</a>
href attribute kertoo minne linkki vie ja tagin sisältö kertoo mitä linkissä
lukee. Esimerkki näyttää tältä:
Kuvat on käyttävät attribuutteja määrittämään mistä haluttu kuva löyty.
<img src="../hypnotoad.gif" />
Edeltävä koodi näyttää tältä:
index.html
, se on erikoinen. Tämä esimerkki nojaa vahvasti tähän.
Esimerkiksi luet paraikaa index.html
tiedostoa joka on
html
kansiossa, jonka takia osoiterivillä url loppuu
/html/
Läheskään kaikki tagit eivät ole pakollisia, mutta yleisesti tulee vähemmän rasittavia ongelmia jos noudattaa hyviä tapoja. Jos ei noudata hyviä tapoja, selain tekee oletuksia ja on usein väärässä.
Kuten ehkä jo huomattu jos katoit koodia, sivun koodeissa on head ja body tageja. Yleisesti, head on tarkoitettu asioille mitkä eivät suoraan näy sivulla, kuten vaikka linkit fontteihin. Body taas on tarkoitettu sivun sisällölle.
HTML ei vaadi että head ja body tageja käytetään, mutta selviää helpommalla jos käyttää niitä kiltisti. Muut koodarit myös kiittävät jos head jutut on headissä ja body jutut bodyssä, sillä ne löytää helpommin. (Olet itse myös muu koodari jos kosket koodiin uudestaan parin kuukauden päästä ja et muista mitä se tekee)
Sulje aina tagisi. Selain osaa joskus toimia oikein vaikka et sulje
esimerkiksi <p>
tageja, mutta joskus se möhlii.
Jos meillä on tälläinen esimerkki koodi:
<div>
Kamaa
<div>
Lisää kamaa
Selain voi tulkkaa sen joko näin:
<div>
Kamaa
</div>
<div>
Lisää kamaa
</div>
Tai näin:
<div>
Kamaa
<div>
Lisää kamaa
</div>
</div>
Se kumpaan päätelmään selain päätyy riippuu tagista, selaimesta, ja kuun
asennosta. Jotkut tagit päätellään lähes aina väärin, esim jos johonkin
sivulle laittaa <b>
tagin ja sitä ei sulje, loppusivu on
boldattu.