Verkkosivujen luominen

Mikä ihmeen HTML?

HTML tulee sanoista Hypertext Markup Language ja se on kieli sivun rakenteiden kuvaamista varten. Kieli koostuu elementeistä, joita voidaan laittaa peräkkäin tai toistensa sisään. Elementit ovat ohjeita selaimelle (esim. Internet Explorer, Firefox, Chrome) sivun esittämiseen.

Elementit erotellaan muusta sisällöstä pienempi kuin - ja suurempi kuin -merkeillä. Esimerkiksi aloittaa elementin, kun taas sulkee elementin. Kaikki teksti, mikä on näiden merkintöjen välissä, kuuluu elementin sisään.

HTML-dokumenttien (eli siis tiedostojen, jotka sisältävät html-sivuja) tiedostotyyppi on .html samaan tapaan kuin tekstitiedostojen tyyppi on .txt tai kuvatiedostojen vaikka .jpg.

Ensimmäinen oma sivu

  1. Tee uusi kansio koneelle projektiasi varten. Sen nimi voi olla vaikka html.
  2. Avaa ohjelma nimeltä Text Editor, löydät sen klikkaamalla vasemmassa valikossa ylimpänä olevaa ympyrää ja kirjoittamalla ohjelman nimen hakukenttään.
  3. Tallenna avautuva tyhjä tiedosto, esimerkiksi nimellä omanimi.html luomaasi uuteen kansioon. Älä käytä tiedoston nimessä ääkkösiä (eli ä- tai ö- kirjainta), välilyöntejä tai pilkkuja, huutomerkkejä tai muita erikoismerkkejä!
  4. Sitten jatketaan eteenpäin!

Katsotaan vähän tarkemmin, miltä verkkosivun runko voisi näyttää. 

<!DOCTYPE HTML>
<html>
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title>Minun ensimmäinen sivuni</title>
    </head>
    <body>
        <h1>Ensimmäisen sivuni ensimmäinen otsikko</h1>

    </body>
</html>

Voit kopioida ylläolevan ensimerkin omaan tiedostoosi ja tallentaa sen. Avaa sivu selaimessa etsimällä tiedosto vasemman valikon kansio-ikonin kautta. Kun näet tiedoston, klikkaa sitä hiiren oikealla napilla ja valitse Open With Firefox Web Browser.

Kasa uusia elementtejä

Nyt on aika lisätä sivuillesi lisää juttuja! Huomasit varmaan, että otsikon sai tehtyä elementillä nimeltä <h1>? Otsikot on numeroitu suuruusjärjestyksen mukaan, sivun ainoa suurin otsikko on nimeltään h1, sitä pienemmät nimeltään h2 ja niin edelleen.

Huomaa, että lisäykset tehdään ylläolevaan pohjaan otsikon jälkeen, mutta ennen </body> -riviä!

Seuraavaksi lisätään tekstiä. Elementti, johon voi laittaa tekstikappaleen on nimeltään p, eli <p>Jee, tässä tekstikappaleeni</p>

Laitetaan vielä kaksi listaa, numeroitu lista ja pallukkalista.

Numeroitu lista

Numeroitu lista syntyy näin: 

			<ol>
				<li>Eka juttu</li>
				<li>Toka juttu</li>
				<li>Kolmas juttu</li>
			</ol>
ja se näyttää tältä: 
			1.  Eka juttu
			2.  Toka juttu
			3.  Kolmas juttu

Pallukkalista

Pallukoitu lista syntyy näin: 

			<ul>
				<li>Eka juttu</li>
				<li>Toka juttu</li>
				<li>Kolmas juttu</li>
			</ul>
ja se näyttää tältä:

Linkki

Linkki on, paitsi keskuksemme nimi, tapa viitata verkkosivulta toiselle. Linkin tunnistaa yleensä muusta tekstistä joko alleviivauksen, eri värin tai muun tehokeinon avulla. Kun linkkiä painaa, voimme siirtyä sivulta toiselle kirjoittamatta käsin uuden sivun osoitetta ylös selaimen osoiteriville.

Ja nyt tehdään linkki. 
		<a href="toka.html">Teksti, jota painamalla siirrytään</a>
Kokeile miltä linkkisi näyttää. Toimiiko se?

HOKSPOKS: Kun teet linkin, joka osoittaa oman sivusi ulkopuolelle, esimerkiksi vaikka Googleen, pitää toka.html:n paikalla olla sivun koko osoite, mukaanlukien http:// -osuus. Eli http://www.google.fi.

Kuvan lisääminen sivulle

HOKSPOKS: muistathan, että muiden ihmisten tekemien tai ottamien kuvien käyttäminen omilla nettisivuilla on laitonta ilman kuvan omistajan lupaa! Siksi käytetään vain omia kuvia!

Nyt kansiossa on kuva nimeltä kuva.jpg. Sen saa näkyviin sivullensa seuraavalla komennuksella: 

<img src="kuva.jpg" />
Ja se näyttää tältä:

Sivun tyylit

On vähän mälsää, että sivun taustaväri on valkoinen. Myös linkin väri voisi olla muutakin kuin sininen. Se, minkä värisenä, kokoisena jne. eri elementtejä näytetään, riippuu sivulla käytettävistä tyyleistä. Tyylien kuvailuun on kehitetty oma kielensä nimeltä CSS, joka tulee sanoista Cascading Style Sheets. Seuraavaksi tutustumme CSS-tyyleihin ja teemme oman tyylitiedoston dokumentillemme!

Tyylitiedoston tiedostopääte on .css, samaan tapaan kuin verkkosivumme tiedostopääte on .html.

Katsotaanpa miltä CSS-määrittely näyttää: 

body {
	background: #FF458F;
}

Jotta pääset itse valitsemaan mieluisan värin, voit käyttää esimerkiksi Color Pickeriä. Saat sieltä oheisen 6 merkkiä pitkän värikoodin, joka esimerkissämme on FF458F. Tätä kutsutaan heksadesimaaliksi. Väri määritellään sen perusteella paljonko se sisältää punaista, vihreää ja sinistä. Määrä vaihtelee (heksadesimaalinumeroina) välillä 00 - FF.

Lisää tyylimääreitä!

Esimerkinomaisesti tässä lisää tyylimääreitä laitettavaksi tyyli.css -tiedostoon: 

h1 {
	text-shadow: 5px 5px 5px #FF0000;
}
Ja se näyttää tältä: 
		
Otsikko H1 -elementissä

		

body {
	color: blue;
}
puolestaan värittää kaiken dokumentin tekstin siniseksi, kas näin: 
		
Kaikki teksti on sinistä tässä kappaleessa.
HOKSPOKS: ei tarvitse toistaa monta kertaa body css-tiedostossa. Aiemman taustavärimääreen ja uuden tekstinvärimääreen voi laittaa peräkkäin kas näin: 
body {
	background: #FF458F;
	color: blue;
}