HTML

Takaisin

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 &lt; on pienempi kuin merkki (<) ja &gt; on suurempi kuin merkki (>).

Tagit

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

Kappale

Tekstiä on mukavampi lukea jos siinä on kappalejakoja. <p> tag määrittelee kappaleen.

Otsikko

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>

Muita yleisiä

Attribuutit

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.

Linkki

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

Linkin teksti

Image

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

Koska kuvan sisällä ei voi olla mitään muuta sisältöä, tag pitää sulkea heti laittamalla kauttaviiva ennen > merkkiä.

Tiedostojen nimet ja kansiorakenne

Selain voi avata nimeltä minkä tahansa html tiedoston, mutta jos kansiossa on 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/

Hyvät tavat

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

Head ja body

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 tagisi

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.