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: &copy; on © (samoin on &#x00A9; © ja &#169; ©). 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

Yliopiston logo

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: Yliopiston logo.

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ä

<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

nimisotu
Pekka120281-9211
Salla010779-813f
Jarkko010690-0899
Täysi esimerkki
Tuotteet
nimi alv 0% alv 22%
Yhteensä 10,37
Makkara1,001,22
Kebab4,004,88
Falafel3,504,27