Rungon elementit

by Tanja Tuulikki Välisalo — last modified Nov 06, 2014 10:08 AM

Runko on välttämätön osa jokaista html-dokumenttia. Rungon elementtien seuraavassa näkyvä keskinäinen järjestys on aina sama. Alla olevan kaltainen runko on nyt jokaisen HTML-Kit-ohjelmalla luodun dokumentin pohjana, jos teit ohjelman käyttöönoton ohjeissa esitellyt vaiheet.

<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
  <head>
    <title>Untitled</title>
  </head>
  <body>
  </body>
</html>

Seuraavassa taulukossa on selitetty jokaisen rungon elementin nimi, käyttötarkoitus ja käytössä mahdollisest huomioitavat seikat.

Elementti	Nimitys	Käyttö	Huomioitavaa
<?xml?>	xml-standardi	Määrittelee mitä versiota XML-standardista käytetään	Poikkeus: Ei lopetuselementtiä tai kenoviivaa!
<!DOCTYPE>	Dokumenttityyppi (doctype declaration, dtd)	Määrittelee käytetyn dokumenttityypin (tässä XHTML 1.0 Transitional)	Poikkeus: Ei lopetuselementtiä tai kenoviivaa! Kirjoitetaan isoilla kirjaimilla.
<html>		Sisältää dokumentin varsinaisen sisällön	Attribuuteilla määritellään dokumentin kieli.
<head>		Sisältää dokumentin metatiedot
<title>	Dokumentin otsikko	Määrittelee dokumentin otsikon, joka näkyy www-selaimen yläreunassa	Kuvaava otsikko Esim. Matti Meikäläisen portfolio – Koulutus, EI sivu2
<meta>	Metatieto	Määrittelee erilaisia metatietoja	Esim. sivun tekijätiedot, uudelleenohjaus toiseen WWW-osoitteeseen jne.
<link>		Viittaa ulkoiseen tiedostoon sen sisältämän tyylin käyttämiseksi dokumentissa	Esim. CSS-tyylitiedoston linkittäminen html-tiedostoon <link href="tiedostonimi.css" rel="stylesheet" />
<body>		Sisältää dokumentin selaimessa näkyvän sisällön
<!-- -->	Kommentti	Mahdollistaa kommenttien kirjoittamisen koodin joukkoon; eivät näy selaimessa	<!--Tässä on pääotsikko--> <h1>Pääotsikko/h1>

Dokumentin otsikko

Dokumentin otsikko eli title-elementin sisältö näkyy WWW-selaimen yläpalkissa. Sen on syytä kertoa ytimekkäästi sivun sisällöstä. Usein esim. yrityksen joka sivulla on sekä yrityksen nimi, että kyseisen sivun aihe.

Anna äsken tallentamallesi dokumentille index.html otsikko, joka tulee näkymään selaimen yläreunassa. Otsikkona (title) on nyt Untitled. Anna uudeksi otsikoksi esim. Tietoturvasivusto.

Metatietoelementit

Metatietoelementti sisältää yleensä name-attribuutin, joka kertoo sisällön tyypin, ja content-attribuutin, jossa on varsinainen tietosisältö. Metatietoelementti on siis yleensä muotoa:

<meta name="sisällön tyyppi" content="sisältö" />

Name-attribuutin mahdollisia arvoja meta-elementin kanssa käytettäessä ovat mm. author (sivun tekijä), description (sivun kuvaus), keywords (hakusanat).

Sivun tekijä on aina hyvä nimetä.

Esimerkki.

<meta name="author" content="Kalle Koodari" />

Sivun kuvaus ilmestyy hakukoneiden tuloksissa sivuston nimen perään.

Esimerkki. Kukkakaupan sivuilla se voisi olla jotain tällaista:

<meta name="description" content="Kukkapalvelua yli 30 vuoden kokemuksella. 
Monipuolinen valikoimamme kattaa leikko- ja ruukkukukat, hoito-ohjeet ja –tarvikkeet." />

Hakusanat auttavat hakukoneita löytämään sivuston. Hakusanojen valintaan vaikuttaa se, millaisilla hakusanoilla sivun tekijä arvelee aiheesta kiinnostuneiden hakevan tietoa.

Esimerkki. Kasvisruokaravintolan sivuilla lista voisi olla hyvinkin pitkä alkaen vaikka näin:

<meta name="keywords" content="ravintola, kasvisravintola, kasvisruoka, vegetaristi, vegaani" />

HUOM! Meta-elementti pitää kirjoittaa erikseen jokaista ominaisuutta varten.

Esimerkki.

<meta name="author" content="Kalle Koodari" />
<meta name="description" content="Kukkapalvelua yli 30 vuoden kokemuksella" />

Anna nyt laatimallesi sivulle index.html metatietoelementtien avulla tekijän tiedot ja hakusanat tietokonevirus, mato ja tuholainen.

Metatiedot on syytä lisätä verkkosivuston jokaiselle sivulle, ei vain etusivulle.

Esimerkiksi W3Schools-sivustolla voit tutustua myös muihin metatietoelementteihin.

Kommentti

Kommenttielementti on yksi runkoelementeistä. Sen avulla voidaan html-dokumenttiin tehdä merkintöjä siitä, mitä eri koodin osat tarkoittavatkaan. Tämä ominaisuus hyödyttää edistynyttäkin verkkosivujen laatijaa, kun dokumentit ovat pitkiä ja rakenteeltaan monimutkaisia. Se myös auttaa muita ymmärtämään laatimaasi dokumenttia.Merkitse dokumentin eri osiot kommenttielementillä.

Näin muistat jatkossakin, mitä eri koodin osat tarkoittivat.

Esimerkki.

<!--Tämä näkyy selaimessa-->
<title>Tietoturvasivusto</title>

Tehtävät

Lisää verkkosivullesi metatietoelementit author, description ja keywords.
Lisää verkkosivullesi kommentteja.

Materiaalin on laatinut Tanja Välisalo.