XHTML-tiedostot koostuvat elementeistä ja niiden sisällöistä. Tämä tiedosto valottaa hieman abstraktimpien merkintäelementtien käyttöä. Lisäksi tarkastelemme nopeasti sivujen ulkoasujen muokkaamista.
HTML-tiedoston elementeistä voidaan erottaa lohkotasoiset elementit joita ovat
esimerkiksi div,p ja h1.
Lohkotasoinen elementti on ikäänkuin XHTML-dokumentin yksi kappale samalla tapaa kuin kirjoitetussa tekstissä on kappalejako. Ks. seuraava esimerkki (merkittyjen lohkojen taustaväri on selvyyden vuoksi väritetty:
Lohko nro 1
Lohko nro 2
Huom! Tässä kohdassa käsitellyt punainen- ja sininen -attribuutit on määritelty tiedostossa tyyli.css. Puhumme lisää tästä asiasta kohdassa sivujen tyylitiedostot.
Elementeille voidaan antaa attribuutteja eli ominaisuuksia. Niistä tärkeimpiä ovat class ja id -ominaisuudet.
class määrittelee sen, mitä luokkaa elementti on. Tämä on tärkeää, kun sivujen ulkoasua opetellaan määrittämään.
id puolestaan määrittelee elementille yksilöllisen tunnisteen. Se ei voi olla sama kahdella eri elementillä.
Tässä on tekstiä sinisellä pohjalla
Tässä on tekstiä punaisella pohjalla
Tässä on lisää tekstiä sinisellä pohjalla
div-elementti on yleinen lohkotasoinen elementti: Sillä voidaan
merkata mitä tahansa lohkoa. Sillä ei ole mitään näkyviä tunnusmerkkejä ja se on tarkoitettu dokumentin sisällön eri osien merkitsemiseen. Se on
tärkeä elementti kun ensi viikolla tutustutaan sivujen ulkoasun määrittämiseen
CSS:ää käyttäen.
span-elementti on yleinen merkkitasoinen elementti: Sillä voidaan
merkata lohkon sisällä olevaa tekstinpätkää.
Mielestäni tämä XHTML on ihan mukavaa ja helppoa.
XHTML-sivujen ulkoasun merkitsemisessä käytetään CSS-tyylitiedostoja. Tyylitiedoston URL-osoite kerrotaan sivun head-osiossa seuraavasti:
<?xml version="1.0" encoding="UTF-8"?>
<!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>Lisää XHTML-elementtejä</title>
<link href="tyyli.css" title="Perustyyli" rel="stylesheet" type="text/css" media="all" />
</head>
Katso esimerkiksi, miltä tämän sivun tyylitiedosto näyttää. Tarkemmin asiaan paneudutaan ensi viikolla.