HTML

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