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ä
- Ensimmäinen
- Toinen
- 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
Ensin yksinkertainen taulukko, jossa kuitenkin th
-otsikkoelementit:
nimi | sotu |
---|---|
Pekka | 120281-9211 |
Salla | 010779-813f |
Jarkko | 010690-0899 |
Sitten "oikeaoppinen" taulukko, joka on jaettu otsikkoon, runkoon, ja pohjaan:
Tuotteet | ||
---|---|---|
nimi | alv 0% | alv 22% |
Yhteensä | 10,37 | |
Makkara | 1,00 | 1,22 |
Kebab | 4,00 | 4,88 |
Falafel | 3,50 | 4,27 |