Siirry sisältöön. | Siirry navigointiin

Jyväskylän yliopiston Koppa

HUOM! Kopan käyttö päättyy 31.7.2024! Lue lisää.


Navigation

XHTML-kieli

tekijä: Tanja Tuulikki Välisalo Viimeisin muutos keskiviikko 05. marraskuuta 2014, 23.02

XHTML-elementit

Tässä materiaalissa esitellään yleisimmät xhtml-elementit, joita käytetään XHTML 1.0 Transitional -kielessä. Kattava lista HTML-elementeistä löytyy esimerkiksi W3 Schools -sivustolta.

Aloitus- ja lopetuselementit

HTML-dokumentissa tekstin rakenne merkitään erilaisilla elementeillä (tag). Jokaisella rakennemerkinnällä on aloituselementti (start tag) ja lopetuselementti (end tag). Elementit erotetaan muusta tekstistä <>-merkeillä ja lopetuselementissä on lisäksi kenoviiva /. Elementit ovat siis muotoa:

<aloituselementti>Tässä on tekstisisältö.</lopetuselementti>

Esimerkki. Tekstikappale merkitään seuraavasti:

<p>Tässä on tekstikappale. Sekä sen aloitus että lopetus merkitään omalla elementillään.</p>

Esimerkki. Otsikko, alaotsikko ja tekstikappale.

<h1>Johdanto</h1>
<h2>Tutkimuskysymys</h2>
<
p>Kiinnostuin sosiaalisen median ilmiöistä…</p>

Tyhjät elementit

On myös tyhjiä elementtejä eli elementtejä, joilla ei ole tekstisisältöä. Tyhjässä elementissä aloitus- ja lopetuselementit on yhdistetty.

Esimerkki. Rivinvaihto tapahtuu automaattisesti, mutta jos rivinvaihdon haluaa pakottaa tiettyyn kohtaan tekstiä, käytetään elementtiä br seuraavasti:

<p>Ossi Opiskelija<br />
ossi.opiskelija@jyu.fi</p>

Sisäkkäiset elementit

Elementit voivat sijaita myös sisäkkäin.

Esimerkki. Lista luodaan merkitsemällä ul-elementillä kaikki samaan listaan kuuluva teksti ja li-elementeillä jokainen listan kohta. Li-elementit ovat siis ul-elementin sisällä.

<p>Sivustotyyppejä ovat mm.:</p>
<ul>
<li>perinteiset verkkosivut</li>
<li>blogit </li>
<li>verkkoyhteisöpalvelut</li>
</ul>

Attribuutit

Elementeillä voi olla lisäominaisuuksia eli attribuutteja, jotka määrittävät tarkemmin elementin toimintaa. Attribuutit kirjoitetaan aina aloituselementin väkästen sisälle elementin nimen perään. Ne erotetaan elementin nimestä ja toisistaan välilyönneillä. Attribuutilla on aina myös arvo. Attribuutit merkitään siis aina muotoon:

<aloituselementti attribuutti="arvo">

Joillakin elementeillä on pakollisia attribuutteja, osa elementeistä ei edes toimi ilman attribuutteja.

Esimerkki. Hyperlinkki Jyväskylän yliopiston sivuille merkitään antamalla elementille a attribuutti href, jolla on arvo https://www.jyu.fi/.

<p>Materiaali on julkaistu <a href="http://www.jyu.fi>Jyväskylän yliopiston</a> WWW-sisällöntuotannon kurssilla.</p>

Samalla elementillä voi olla useita attribuutteja.

Esimerkki. Metatietoelementti ei toimi ilman attribuutteja. Attribuuteista name kertoo, millaisesta metatiedosta on kyse ja content on metatiedon varsinainen sisältö.

 <meta name="keywords" content="virustorjunta, tietoturva, mato" />

Elementtien ja attribuuttien kirjoitussääntöjä

1. Elementit ja attribuutit kirjoitetaan pienillä kirjaimilla.

2. Elementtejä voidaan sijoittaa sisäkkäin, jolloin on tärkeää muistaa merkintäjärjestys: Viimeksi aloitettu elementti suljetaan aina ensimmäisenä.

Esimerkki. Head-elementin sisällä on title-elementti, joka kertoo selaimen yläpalkissa näkyvän dokumentin otsikon.

VÄÄRIN

<head><title>Tietoturvasivusto</head></title>

OIKEIN

<head><title>Tietoturvasivusto</title></head>

3. Tyhjän elementin sulkevan />-merkinnän eteen on syytä jättää välilyönti, jotta vanhemmatkin selainversiot ymmärtävät sen. Ks. esimerkki tyhjästä elementistä.

4. Koodiin voi lisätä rivinvaihtoja ja tyhjiä rivejä ilman, että se vaikuttaa siihen, miltä verkkosivu näyttää selaimessa.

Esimerkki. Alun esimerkkien koodin voi merkitä myös näin:

<p>
Tässä on tekstikappale. Sekä sen aloitus että lopetus merkitään omalla elementillään.
</p>
<h1>Johdanto</h1>

<h2>Tutkimuskysymys</h2>

<
p>Kiinnostuin sosiaalisen median ilmiöistä…</p>

5. Attribuuttien keskinäisellä järjestyksellä ei ole merkitystä.

Esimerkki. Kumpikin merkintätapa kuvaelementin img attribuuttien merkinnässä on oikein:

<img src="kuvat/logo.gif" alt="Yritys Oy" />
<img title="Yritys Oy" src="kuvat/logo.gif" />

Materiaalin on laatinut Tanja Välisalo.