Mallipohja
Yksinkertaisin mahdollinen xhtml-sivu:
<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<title>Tähän tulee sivuston nimi</title>
</head>
<body>
<h1>Sivun otsikko</h1>
<p>Sivun sisältö</p>
</body>
</html>
Tehtävä:
1. Kopypastea tiedosto Notepad++ -editoriin
2. Tallenna se nimellä index.html
3. Avaa tiedosto selaimessa. Miltä se näyttää?
Otsikot
Otsikot merkitään elementeillä h1, h2, h3... seuraavasti:
<h1>Pääotsikko</h1>
<h2>Aliotsikko</h2>
<h3>Alialiotsikko</h3>
Tekee seuraavanlaisen tuloksen:
Pääotsikko
Aliotsikko
Alialiotsikko
Otsikkoelementit ovat lohkotasoisia elementtejä.
Normaali teksti
Normaali teksti sijoitetaan p-elementtiin.
<p>
Tekstikappale
</p>
<p>
Toinen kappale tekstiä
</p>
<p>
Kolmas tekstikappale tekstiä
</p>
Tekstikappale
Toinen kappale tekstiä
Kolmas tekstikappale tekstiä
Tekstikappale on lohkotasoinen elementti.
Vahvistaminen, kursivointi
Tekstiä voi myös korostaa ja vahvistaa. Yleensä korostettu teksti näkyy lihavoituna ja vahvistettu teksti kursivoituna.
Korostus tapahtuu <strong> -elementillä ja vahvistus <em> -elementillä.
<p>
Tekstikappale jossa <strong>vahvistettu</strong> tekstikohta.
</p>
Tekstikappale jossa vahvistettu kohta.
Rivinvaihdot
Pakotettuja rivinvaihtoja voit tehdä elementillä <br />.
<p>
Yhdelle riville tuleva teksti.<br />
Huom! tämän voi kirjoittaa
monelle
eri riville.<br />
Vasta br vaihtaa riviä.
</p>
Yhdelle riville tuleva teksti.
Huom! tämän voi kirjoittaa
monelle
eri riville.
Vasta br vaihtaa riviä.
HUOM! Koska rivinvaihtoelementillä ei ole "sisältöä", on sen alkuelementti sama kuin loppuelementti. Tällöin merkitään <elementinnimi /> eli /-merkki ennen elementin sulkevaa > -merkkiä.
Linkit
Linkkielementin href-ominaisuutena täytyy mainita, mihin linkin pitäisi viedä. Esimerkki linkkielementistä:
<p>
<a href="http://www.jao.fi/">Linkki JAO:n kotisivulle</a>
</p>
Kuvat
Kuvaelementille täytyy kertoa src-ominaisuutena, missä kuva sijaitsee. Lisäksi sille täytyy kertoa kuvan sijasta näytettävä vaihtoehtoinen teksti alt-ominaisuutena:
<p>
<img src="mallikuva.png" alt="Tässä on hymyilevä naama" />
</p>
HUOM! Kuvaelementilläkään ei ole tekstisisältöä, joten myös sen aloituselementti on sama kuin lopetuselementti. Tällöin merkitään <elementinnimi /> eli /-merkki ennen elementin sulkevaa > -merkkiä.
Toinen HUOM! Kuvaelementtien täytyy olla lohkotasoisten elementtien, esimerkiksi p tai h1 -elementin sisälle kirjoitettuna.
Sisäkkäiset elementit
Elementtejä voi toki kirjoittaa sisäkkäin. KS. seuraava esimerkki:
<p>
Tekstiä jossa sisällä <a href="http://www.jao.fi/">linkki</a>.
</p>
<a href="http://www.jyu.fi/"><img src="mallikuva.png" alt="Hymyilevän naaman kuva"></a>
Tekstiä jossa sisällä linkki.
Listat
Listoja voit tehdä ol- tai ul -elementeillä seuraavasti:
<p>
Tekstiä. Tämän jälkeen tulee järjestämätön lista:
</p>
<ul>
<li>Listan ensimmäinen alkio</li>
<li>Listan toinen alkio</li>
</ul>
<p>
Tekstiä. Tämän jälkeen tulee järjestetty lista:
</p>
<ol>
<li>Eka alkio</li>
<li>Toka alkio</li>
</ol>
Tekstiä. Tämän jälkeen tulee järjestämätön lista:
- Ensimmäinen alkio
- Toinen alkio
Tekstiä. Tämän jälkeen tulee järjestetty lista:
- Eka alkio
- Toka alkio