XHTML-elementit ja kurssin järjestelyt - Luento 1

Luennolla käydään läpi kurssin järjestelyihin liittyvät asiat ja opiskellaan perus-XHTML-elementit.

Luentotaltiointi

Ongelmia videon katselussa?

Kurssin käytännön järjestelyt

Kts. WWW-sovellukset-kurssin etusivu.

Rakenneajatus kertauksena

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

Osat muodostavat dokumentin rakenteen. Rakenteella ei määritä ulkoasua, mutta ulkoasu on järkevä määritellä suhteessa rakenneosasiin.

Miksi ei graafisia editoreja?

Miksi en käyttäisi WWW-sivujen tekemiseen esim. Frontpagea tai Dreamweaveria?

Mitä editoria sitten voi käyttää?

Miksi XHTML?

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

XHTML-dokumentin runko

<?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>
  <title>Tähän sivun otsikko</title>
  <link href="tahan_tyylintiedoston_nimi.css" rel="StyleSheet" type="text/css" />
</head>

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

</html>

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.

Dokumentin voi validoida W3C:n validaattoripalvelulla. Firefoxin Web Developer Toolbarista löytyy suoraan valinta tällä.

XHTML-elementtien luokittelu

Elementtejä voi luokitella muunmuassa seuraavan jaottelun mukaan:

Sivulla olevat erityyppiset elementit saat näkyviin esimerkiksi asentamalla Firefoxiin Web developer-pluginin tai käyttämällä Mozillan DOM Inspectoria.

Dokumentin rakenne

Hyvä rakenne - otsikkotasot löytyvätHuono rakenne - ei otsikkotasoja ja liian syvä Xetor-ohjelman rakennenäkymä

XHTML-elementit

Seuraavassa on lueteltuna XHTML:n peruselementit, joita tarvitaan WWW-dokumenttien kirjoittamisessa.

Elementtejä on käytetty luentoesimerkkisivulla.

Yleisimmät elementit

http://appro.mit.jyu.fi/doc/www/xhtml/

Muita elementtejä

Määritelmät
ElementtiSeliteEngl.Esimerkki
dlMääritelmälistadefinition list

<dl>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>

<dt>XHTML</dt>
<dd>eXtensible Hypertext Markup Language</dd>
</dl>
dtMääriteltävä termidefinition term
ddTermin määrittelydefinition description
dfnTermien määritelmät tekstissädefinition 
Dian otsikoissa voi käyttää <dfn
title="Kirjaisin, jossa kirjaimien avoimien
käyrien päät on päätetty lyhyellä kohtisuoralla
viivalla">päätteellistä</dfn> kirjasinta.
Lyhenteitä
abbrKirjain kerrallaan lausuttavat lyhenteetabbreviation<abbr title="Cascading Style Sheets">CSS</abbr>
acronymSanana käytettävä lyhenne<acronym title="North Atlantic Treaty Organization">NATO</acronym>
Viittauksia
qViittausquotecite="osoite"
blockquoteLohkolainaus 
<blockquote
 cite="http://www.useit.com/alertbox/991114.html">
<p>
<em>Web design is easy:</em> If you are
thinking about how to design a certain page element,
all you have to do is to look at the twenty most-
visited sites on the Internet and see how they do it.
</p>
</blockquote>
Esimerkit
codeTietokonekoodi<code>System.out.println("Muuli")</code>
kbdKäyttäjän syötekeyboard<kbd>[testi@kaarna www]$ ls -la</kbd>
sampOhjelman vastesample<samp>Null pointer exception.</samp>
varMuuttujavariable<var>$_SERVER['PHP_SELF']</var>

Otsikkotiedot

Metatieto - meta

meta-elementillä määritellään dokumenttiin liittyvää metatietoa

<meta name="description"
  content="Tietoverkot työvälineenä - Tietotekniikan approbatur-kurssi Jyväskylän
	   yliopistossa tietotekniikan laitoksen ja avoimen yliopiston yhteisopetuksena " />
<meta name="keywords"
  content="tietotekniikka, jyväskylän yliopisto, avoin yliopisto,
	   tietotekniikan laitos, informaatioteknologia, opetus, kurssi" />

<meta name="author" content="Tommi Lahtonen" />

Linkkielementti - link

<link title="Oletustyyli" rel="StyleSheet" href="/appro2003.css" type="text/css" media="all" />
<link rel="icon" href="/favicon.ico" type="image/ico" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rev="Made" href="http://www.iki.fi/hazor/" title="Tommi Lahtonen" />

<link rel="Copyright" href="/copyright.html" title="Copyright Notice" />
<link rel="Prev" href="../luento1/" title="Edellinen" />
<link rel="Next" href="../luento3/" title="Seuraava" />
<link rel="Start" href="../../" title="Tietoverkot työvälineenä" />
<link rel="Contents" href="../" title="Sisällys" />
<link rel="Parent" href="../" title="Edellinen taso" />
<link rel="First" href="../luento1/" title="Ensimmäinen" />
<link rel="Last" href="../luento10/" title="Viimeinen" />
<link rel="Search" href="/haku/" title="Haku" />

Sivuston julkaiseminen

Hakemistorakenne ja WWW-osoite

Linkkejä

Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/sovellukset/luennot/luento1/
© Jukka Mäntylä (jmantyla@mit.jyu.fi)< http://www.iki.fi/jmantyla/>
2006-02-28 16:56:48