XHTML-elementit ja kurssin järjestelyt - Luento 1

Luennolla käydään läpi kurssin järjestelyihin liittyvät asiat. Kerrataan XHTML-elementtejä ja käsitellään hakemistorakenteen merkitys.

Luentotaltiointi

Ongelmia videon katselussa?

Esittely

Käydään läpi kurssin sisällöt ja käytännönjärjestelyt.

Toteutettuja harjoitustöitä

Kurssin aiheita

Esitiedot

Yleisesittely

Kurssin suorittaminen?

Luentojen sisällöt ja aloitusajat?

Demojen sisältö ja aikataulu?

Kommunikointi

Etäopiskelu

Rakenneajatus

Tekstidokumentissa on erilaisia sisältöä jäsentäviä osia:

Osat muodostavat dokumentin rakenteen. Rakenne ei määritä ulkoasua, mutta ulkoasu on järkevä määritellä suhteessa rakenneosasiin. Näin saavutetaan helposti ylläpidettävä ja yhtenäinen ulkoasu koko sivustolla.

Miksi XHTML?

Miksi WWW-dokumentit kannattaa tehdä XHTML-kielellä mieluummin kuin HTML-kielellä?

Miksi en käyttäsi graafisia editoreja, kuten Frontpage ja Dreamweaver?

Graafisten editorien uusimmat versiot osaavat kuitenkin tehdä myös järkevää XHTML-lähdekoodia, mutta tällöin on oltava kuitenkin tarkkana ja ymmärrettävä mitä on tekemässä. Graafisten editorien käyttö on ulkoasuorientoitunutta, jolloin rakenteellinen ajattelu voi jäädä huomiotta.

XHTML-dokumentin rakenne

XHTML-dokumentti on tekstiä, jossa merkitään dokumentin rakenne elementeillä, jotka kirjoitetaan <>-merkkien väliin. Esim. <title>.

XHTML 1.0

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
  <link href="malli.css" rel="StyleSheet" type="text/css" />
  <title>Sivustoa kuvaava otsikko</title>
</head>
<body>

  <h1>Dokumentin pääotsikko</h1>
  <p>Tähän tekstiä...</p>
</body>
</html>

Erilaiset dokumenttityypit

XHTML-elementit

Elementeillä on aina aloitus ja lopetus joiden välissä on varsinainen elementin sisältö. esim.

<title>Tietokone ja tietoverkot työvälineenä</title>

<title> on aloituselementti.

</title> on lopetuselementti. Lopetuselementissä on aina /-merkki

Jos elementillä ei ole sisältöä niin lopetuselementti voidaan lyhentää suoraan aloituselementtiin: <br />

Elementtien välillä ja tekstin keskellä saa olla vapaasti välilyöntejä tai rivinvaihtoja.

Ominaisuudet eli attribuutit

Elementeillä voi olla ominaisuuksia eli attribuutteja, jotka määrittelevät jotakin elementtiin liittyviä asioita. Esim. hyperlinkin kohde määritellään a-elementtiin tulevalla href-attribuutilla:

<a href="http://www.jyu.fi/">Jyväskylän yliopisto</a>

Dokumentin on oltava hyvin muodostettu

Tuotetun dokumentin pitää olla hyvin muodostettu (engl. well-formed), ettei selaimien tarvitse tehdä tulkitsemisessa arvailuja. Eri elementit eivät siis saa mennä keskenään ristiin eikä lopetusosia saa unohtaa.

Väärin

<p>Tuotetun <strong>dokumentin pitää olla
 hyvin muodostettu 
 (<em>engl. well-formed</em>).</p></strong>

Oikein

<p>Tuotetun <strong>dokumentin pitää olla
 hyvin muodostettu 
 (<em>engl. well-formed</em>)</strong>.</p>

Dokumentin pitää olla validi

Dokumentin pitää olla myös validi (engl. valid) eli sen rakenne pitää olla jonkin dokumenttityypin mukainen. Dokumenttityyppi määrää mitä elementtejä voi käyttää, mitkä elementit saavat sijaita minkäkin elementtien sisällä ja mitä attribuutteja kuuluu millekin elementille jne.

Sivuston julkaiseminen

Kts. Tietokone ja tietoverkot työvälineenä luento 9 julkaisuohjeet.

Peruselementtien kertaus

Miten luon XHTML-dokumentin?

Hakemistorakenne

Esimerkkihakemistorakenne demoista 1

Miten voidaan luoda kokonainen sivusto?

Hyperlinkit - a

a-elementillä voidaan toteuttaa hypertekstilinkki joko toiseen dokumenttiin tai sitten saman dokumentin toiseen kohtaan. a-elementti pitää sijoittaa jonkun lohkotason elementit sisälle.

Linkkejä

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/www/luennot/luento1/
© Jukka Mäntylä (jmantyla@mit.jyu.fi) <http://www.iki.fi/jmantyla/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
2007-02-08 08:11:12