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 elementit niin voi painaa sivulla hiiren oikealla napilla ja valita "inspect" tai "tarkastele", 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. Näin näet miten tämä sivu on luotu joka ehkä avaa selitystä enemmän. Eikä kannata jäädä jumiin jos ei ymmärrä ihan kaikkea, joka pientä yksityiskohtaa ei selitetä, mutta opitte ne kyllä kun ne tulee oleellisiski. Kysyäkkin saa.

Jos tutkit koodia ja mietit että mitä nämä &gt; ja &lt; on, ne on vaan tapa kirjoittaa Greater Than (>) ja Lesser Than (<) merkkejä ilman että selain tulkkaa niitä tagien osiksi. Oleellista lähinnä koodiesimerkeissä mutta harvemmin käytännössä.

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 sisäkkäisistä tageistä. HTML ei sitä vaadi, mutta yleensä 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.

Otsikko

Otsikot määritellään h-tageilla joissa on aina joku numero. 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</h1>

Otsikoita ei ole mikään pakko käyttää, mutta jos käyttää niin suositeltavaa että ei skippaa otsikoita. Joskus voi esimerkiksi tyylin takia haluta mennä suoraan h1->h5, mutta tämä on käyttäjillä joskus epämukavaa ja parempi tehdä tyylittelemällä CSS:llä

Muita yleisiä

• <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.
• <div> on Divider, todella hyödyllinen asettelemaan kamaa

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

Input

Input on monimuotoinen kenttä jonka "type" attribuutti määttää miltä se näyttää. Alla on muutamia esimerkkejä, mutta ei kaikkia mahdollisia. Täältä näkee listaa.

• type="text"
• type="password"
• type="button", not to be confused with <button />
• type="checkbox"
• type="radio"
• type="date"
• type="time"
• type="file"

Tiedostojen nimet ja kansiorakenne

Selain voi avata nimeltä minkä tahansa html tiedoston, mutta jos kansiossa on index.html, se on erikoinen. Tämä esimerkki sivu 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/

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 jutuille mitkä eivät suoraan näy sivulla, kuten vaikka 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.

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ä. (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 tagilla ei ole sisältöä, sen voi sulkea lisäämällä kauttaviivan ennen avaavan tagin >-merkkiä. Esim tämä on tyhjä kappale: <p />. 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.