Html

2018-04-18T11:23:05+03:00

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

2018-04-18T11:12:37+03:00

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

2018-04-18T12:13:47+03:00

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-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>
- esim. Wikipediaan voi linkittää <a href="https://fi.wikipedia.org/wiki/HTML#HTML5 ">näin.</a>
  esim. Wikipediaan voi linkittää näin.

Listat, taulukot ja upotus

2018-04-19T12:26:22+03:00

Listat

Numeroimattomat listat
- pallukoilla merkityn listan saa tehtyä <ul> ja </ul> (unordered list) tagien väliin
- uusi pallukka tulee aina <li> tagien väliin

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