Luento 2: XHTML - rakenteellisia esimerkkejä

Sivulla esitellään lyhyesti rakenteelliset elementit. Tätä esimerkkisivua parannetaan seuraavilla luennoilla. Katso sivun lähdekoodi!

Otsikot ja teksti

Aloitamme tekstin tutkimisen otsikoista. Sivun aloitti h1-otsikko, joka on tärkein, eli ylimmän tason otsikko. Yllä toiseksi ylimmän tason h2-otsikko, eli ylimmän tason otsikon alaotsikko.

"Tieteellinen kirjoitelma" -ohje

Otsikkoa tulee aina seurata jokin muu elementti kuin uusi otsikko (yleensä tekstikappale).

<p> - Paragraph: kappale tekstiä

Kappale muodostaa yhden loogisen kokonaisuuden tekstiä.

Toinen kappale. Ihan kuin peruskoulussa!

Entiteetit

Entiteetit ovat (yksinkertaistaen) merkkiviittauksia.

Esimerkiksi: © on © (samoin on © © ja © ©). Unicode-merkistökoodasta (UTF-8) käytettäessä ei tarvitse käyttää muita kuin XML-standardin määrittelemiä entiteettejä: " & ' < >.

Tekstin korostus

Oikea tarve ei rakenteellisessa korostuksessa ole lihavointi, vaan tärkeä tai korostettu asia ja todella tärkeä asia.

Tämä
on
pakotettu
usealle
riville.

Mutta: valmiiksi muotoillun (ohjelmakoodi tms.) esittämiseen <pre>!

function moikkaa() {
	// PRE osaa tabulaattorit!
	// PRE ei poista entiteettipakkoa:
	Testi << "moi";
}

Kuvat

<img> - Image: kuva

Linkit

<a> - Anchor: ankkurit

Tässä osoitamme tekstilinkillä tämän dokumentin kohtaan "taulukot".

Seuraavaksi osoitamme toiseen dokumenttiin, tämän kurssin kantasivuun.

Yhdistämme ulkopuolisen sivun ja kohdan osoittamisen linkitettyyn kuva-elementtiin: .

Listat

<ol> - Ordered list: lista, jossa järjestyksellä on väliä

1. Ensimmäinen
2. Toinen
3. Kolmas

<ul> - Unordered list: lista, jossa järjestyksellä ei ole väliä

• <li> - list item: lista-alkio
• "Ensimmäinen"
• "Toinen"
• "Kolmas"

<dl> - Definition list: määritelmälista

<dt> - definition term: määritelty termi

<dd> - definition description: termin kuvaus

XHTML

The Extensible Hypertext Markup Language, or XHTML, is a markup language that has the same depth of expression as HTML, but also conforms to XML

eXtensible HyperText Markup Language; a partial merge of XML and HTML standards

DIMEn esitiedot

Tiedosto-oikeudet

Työväline-kurssin HTML-asiat

Teknisiä termejä ei tarvii osata!

Taulukot