Html

Html

HTML eli hypertext markup language on (erityisesti) internet-sivujen kirjoittamisessa käytetty kieli. HTML ei ole varsinaisesti ohjelmointikieli, vaan ohjeet siitä miten selaimen tulisi teksti muotoilla (markup). Monilla sivustoilla (blogit, wikit, pedanet) on nykyisin omat editorit sivujen kirjoittamiseen, mutta ne kaikki käännetään loppujen lopuksi html-kielelle.

Html-kieltä voi kirjoittaa millä tahansa tekstieditorilla (esim. notepad (valmiina Windowsissa), Notepad++, Atom). Windowsin notepadia voi käyttää, mutta kehittyneemmissä editoreissa on hyödyllisiä ominaisuuksia kuten tekstin väritys komentojen mukaan (helpompi lukea koodia) ja koodin täydennys (nopeampi kirjoittaa).

Kattavat suomenkieliset ohjeet löytyy esim. internetix:istä. Englanniksi hyviä ohjeita esim. W3Schools.com, Codecademy.com, Khanacademy.com

Ensimmäinen sivu

Avaa editori esim. Muistio (Notepad)
  • Pro-tip: paina näppäimistön windows-logoa ja ala kirjoittaa "note...", kun tietokone löytää muistion, paina enter
Html-sivussa on aina sama perusrakenne:
<!DOCTYPE html>
<html> 
<head>
<title>Page Title</title>
</head>

<body>
  <h1>tänne></h1>
  <p>sisältö</p>

</body>
</html>		 * Kerrotaan selaimelle, että tämä on html-sivu
* Kaikki komennot sisältävät avaus- ja sulkutagin
* <head>: käyttäjälle yleensä näkymätöntä tietoa,
"metadataa" sekä mahdollinen ikkunan yläosassa
näkyvä sivun otsikko <title>

* <body> -tagien väliin tulee kaikki sivun sisältö



* Lopuksi kaikki tagit pitää sulkea!

<body> ja </body> tagien väliin voi kirjoittaa erilaisia otsikoita <h1>,<h2>... ja tekstikappaleita <p>
  • muista sulkea myös nämä tagit!
    • esim. <h1>Tässä otsikko</h1>
Tallenna tiedosto .html -päättellä (esim. eka.html). Etsi tiedostokansio ja avaa tiedosto selaimessa.
  • Huom! Edge ei suostu avaamaan html-tiedostoja U-asemalta. Klikkaa tiedostoa hiiren oikealla napilla -> Avaa sovelluksessa -> Chrome

Kuvat ja linkit

Kuvat

  • Kuvan lisääminen html-sivulle onnistuu <img> -tagilla.
  • Kuva voi olla valmiiksi netissä tai sen voi tallentaa samaan kansioon html-tiedoston kanssa.
    • jos kuvia tulee paljon, kannattaa tehdä html-tiedoston kanssa samaan kansioon esim. "img"-niminen kansio
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
  • img-tagia ei tarvitse sulkea
  • src="nimi.gif" kertoo kuvan nimen/osoitteen netissä. huom! tiedostopääte (gif/jpg/png)
  • alt kertoo näytettävän tekstin jos kuvaa ei voida jostain syystä näyttää
  • height ja width kertoo kuvan koon pikseleinä
    • alt, height ja width eivät ole pakollisia, mutta suositeltavia
esim. seuraava käsky lataa sivulle googlen logon
<img src="https://www.google.fi/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png ">

  • Netissä olevan kuvan osoitteen saa selville hiiren oikealla napilla -> Kopioi kuvan osoite
  • Huom! kaikki sivustot eivät tykkää kuvin linkkaamisesta ("hotlinking")

Linkit

  • Tekstin sekaan saa lisättyä linkkejä <a> -tagilla

<a href="http://www.kotka.fi/asukkaalle ">Kotkan kaupungin internetsivut.</a>

Näyttää käyttäjälle tältä: Kotkan kaupungin internetsivut. Ja linkin jälkeen teksti voi jatkua normaalisti.
  • href="osoite" kertoo selaimelle mihin linkki johdattaa
  • <a> ja </a> tagien väliin tulee linkin teksti joka näkyy käyttäjälle
  • Attribuuteilla voi esim. pakottaa linkin aukeamaan uuteen ikkunaan (target="_blank")

Lisätietoa: Linkitys saman sivun sisällä

  • tagi <a> tarkoittaa oikeasti ankkuria (anchor).
  • tagilla <a name="ankkurin_nimi"> voidaan määrittää sivulla kohta johon voidaan linkittää suoraan
  • ankkuriin viitataan <a href="#ankkurin_nimi ">linkin teksti</a>
  • ankkuriin voi linkittää myös ulkopuoliselta sivulta <a href="http://www.sivusto.fi/sivu.html#ankkurin_nimi ">näin.</a>

Listat, taulukot ja upotus

Listat

  • Numeroimattomat listat
    • pallukoilla merkityn listan saa tehtyä <ul> ja </ul> (unordered list) tagien väliin
    • uusi pallukka tulee aina <li> tagien väliin
  1. Numeroidut listat
    • numeroitu lista tehdään samalla tavalla, mutta <ol> tageilla (ordered list)

Taulukot

  • Taulukon saa tehtyä <table> ja </table> tagien väliin
    • uusi vaakarivi alkaa tagilla <tr> (table row)
    • uusi solu alkaa tagilla <td> (table data)

    • esimerkki tulee joskus. Odotellessa klikkaa ylläolevasta <table> -linkistä w3schools-auki.

Upotus

  • Sivulle voi laittaa myös muuta sisältöä kuin tekstiä ja kuvia (esim. youtube-videoita). Tätä sanotaan upottamiseksi. Monelta sivustolta löytyy valmiit koodit sisältöjen upottamiseen.
  • esim. youtube: Klikkaa videon alta "Jaa" -> valitse "upota" -> kopioi koodi (<iframe...) sivullesi