HTML

Takaisin

HTML tulee sanoista HyperText Markup Language. Se kuvaa millaisia elementtejä sivulla on ja karkeasti missä järjestyksessä ne ovat.

Suosittelen katsomaan lähdekoodia jos hämmentää. Jos haluaa nykyisen sivun elementit niin voi painaa sivulla hiiren oikealla napilla ja valita "inspect" tai "tarkastele". Voit myös painaa hiiren oikealla napilla ja katsoa sivun lähdekoodia tai view source code. Tarkka sanoitus vaihtelee selaimen ja kielen mukaan. Näin näet miten tämä sivu on luotu.

Jos tutkit koodia ja mietit että mitä nämä > ja < on, ne on vaan tapa kirjoittaa Greater Than (>) ja Lesser Than (<) merkkejä ilman että selain tulkkaa niitä tagien osiksi. Oleellista lähinnä koodiesimerkeissä. Hyvin harvoin oikeasti käytössä.

Tagit

HTML koodi koostuu tageista. Niitä on monia ja niiden ulkoa opettelu on vähän niin kuin opettelisi kieltä muistamalla sanakirjan ulkoa. 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 ja yleensä on muita tageja. HTML ei sitä vaadi, mutta on tyypillistä sisentää tagin sisältö koodissa, niin lukeminen on mukavampaa.

Kappale

Tekstiä on mukavampi lukea jos siinä on kappalejakoja. <p> tag määrittelee kappaleen. P tulee sanasta "paragraph". Tätä ei vaadita ja voit kirjoittaa leipätekstiä p-tagin ulkopuolelle. Se vaan ei silloin saa kappalejakoja.

Otsikko

Otsikot määritellään h-tageilla joissa on aina numero mukana. H tulee sanasta "heading". 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</h3>

Muita yleisiä

<div> on Divider, todella hyödyllinen asettelemaan kamaa.
<ul> on Unordered list, eli ranskalaisia viivoja
<ol> on Ordered list, eli numeroitu lista
<li> on List Item, eli yksittäinen ranskalainen viiva tai numero rivi listassa.

Attribuutit

Joskus tag saa vaatii tai voi ottaa muutakin määrittelyjä kuin sisältöä. Tätä varten on attribuutteja. Yleisesti joka tagille voi antaa esimerkiksi id ja class, esim näin:

<div class="foo" id="bar">
    Jotain tekstiä
  </div>

Class ja id voi käyttää kertomaan CSS ja JS koodille mihin elementtiin viitataan. Eivät 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ä:

Linkki googleen

Image

Kuvat on käyttävät src attribuuttia määrittämään mistä kuva löyty. Esimerkiksi näin (katso koodi selaimen työkaluilla):

Koska kuvan sisällä ei voi olla mitään muuta sisältöä, ei tarvita sulkevaa tagia. On muutama tag mitkä toimii näin.

Input

Input on monimuotoinen tag, jonka "type" attribuutti määttää millainen se on. Alla on muutamia esimerkkejä, mutta ei kaikkia mahdollisia. Täältä näkee lisää.

type="text"
type="password", testaa kirjoittaa jotain.
type="button"
type="checkbox"
type="radio"
type="date"
type="time"
type="file"

Tiedostojen nimet ja kansiorakenne

Selain voi avata minkä tahansa html tiedoston, mutta jos kansiossa on index.html, se on erikoinen. Tämä esimerkki käyttää ainoastaan index.html nimisiä tiedostoja eri kansioissa. Esimerkiksi luet paraikaa index.html tiedostoa joka on html kansiossa, jonka takia osoiterivillä url loppuu /html/. Valitettavasti tämä järjestlemä toimii hitusen eri tavalla jos selaimella on avannut suoraan omalla koneella olevan tiedoston. (Se ei yleensä toimi). Tämän voi korjata, mutten lähde siihen nyt.

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

"Search Engine Optimization" (SEO), on käytännössä termi jota käytetään siihen että saadaan yleensä google järjestämään oma sivu haussa ylemmäs. Googlen botit tykkää jos käyttää ns semanttisia tageja. Koko sivun voi kasata pelkillä div-tageillä, mutta SEO kannalta saattaa olla parempi käyttää kuvaavampia tageja kuten <article>, <main>, tai <footer>. Googlella löytää jostain listan semanttisia tageja. Tyypillisesti HTML on ehkä liiankin joustava, mutta SEO ja kanssakoodarien mielenterveyden kannalta on hyvä nähdä vähän lisää vaivaa. Eri selaimet voivat myös päätellä epäselvät tilanteet eri tavoin, joka johtaa tilanteisiin missä sivu näyttää ihan eriltä eri selaimessa.

Head ja body

Kuten ehkä jo huomattu jos katoit koodia, sivun koodeissa on head ja body tageja. Yleisesti, head on tarkoitettu jutuille, mitkä eivät suoraan näy sivulla. Esimerkiksi link tagit, jotka kertovat selaimelle että sivu käyttää kamaa jostain toisestakin tiedostosta. Body taas on tarkoitettu sivun sisällölle, kuten teksti mitä paraikaa luet. Hämmentävästi, näkymättömiä asioita voi laittaa bodyyn ja headiin voi laittaa näkyviä asioita. HTML itse ei vaadi kumpaakaan tagia. (Vahva suositus kuitenkin käyttää niitä).

Sulje tagisi

Sulje aina tagisi. Selain osaa joskus toimia oikein vaikka et sulje esimerkiksi <p> tageja, mutta joskus se möhlii. Vahva suositus sulkea tagit aina niin debugaaminen on helpompaa.

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