Sivulla esitellään lyhyesti rakenteelliset elementit. Tätä esimerkkisivua parannetaan seuraavilla luennoilla. Katso sivun lähdekoodi!
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.
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 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ä: " & ' < >.
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"; }
<img>
- Image: kuva<a>
- Anchor: ankkuritTä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: .
<ol>
- Ordered list: lista, jossa järjestyksellä on väliä<ul>
- Unordered list: lista, jossa järjestyksellä ei ole väliä<li>
- list item: lista-alkio<dl>
- Definition list: määritelmälista<dt>
- definition term: määritelty termi<dd>
- definition description: termin kuvausnimi | sotu |
---|---|
Pekka | 120281-9211 |
Salla | 010779-813f |
Jarkko | 010690-0899 |
Tuotteet | ||
---|---|---|
nimi | alv 0% | alv 22% |
Yhteensä | 10,37 | |
Makkara | 1,00 | 1,22 |
Kebab | 4,00 | 4,88 |
Falafel | 3,50 | 4,27 |