XHTML-elementit ja kurssin järjestelyt - Luento 1

Luennolla käydään läpi kurssin järjestelyihin liittyvät asiat ja käydään läpi XHTML-elementtejä. Muistellaan CSS:n perusteita.

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 kertauksena

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.

XHTML-dokumentin rakenne

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

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.

Erilaiset dokumenttityypit

Miksi XHTML?

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

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

XHTML 1.1

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" >
  <head>
    <title>Tähän sivun otsikko</title>
  </head>

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

</html>

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.

Sivuston julkaiseminen

Hakemistorakenne ja WWW-osoite

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.

Peruselementtien kertaus

Miten luon XHTML-dokumentin?

Esimerkkejä XHTML-elementeistä

Uusia lohkotason elementtejä

Lohkotason elementeillä merkitään tyypillisesti pidempiä tekstiosioita, kuten kappaleita, listoja ja taulukoita. Lohkotason elementin sisällä saa olla tai ei saa olla toisia lohkotason elementtejä riippuen elementistä.

Osoite - address

address-elementillä merkitään dokumentin tekijän yhteystiedot.

<address>
  <a href="http://www.iki.fi/hazor/">Tommi Lahtonen</a>
  (<a href="mailto:tommi.j.lahtonen@jyu.fi">tommi.j.lahtonen@jyu.fi</a>)
  &lt;URL:<a href="http://www.iki.fi/hazor/">http://www.iki.fi/hazor/</a>>

</address>

Kappalelainaus - blockquote

blockquote-elementillä merkitään isot useiden kappaleiden tai elementin kokoiset lainaukset. Seuraavassa esimerkki lohkotasoisesta lainauksesta:

Jakob Nielsen kirjoittaa artikkelissaan When Bad Design Elements Become the Standard

Web design is easy: 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>Jakob Nielsen kirjoittaa artikkelissaan

<cite><a href="http://www.useit.com/alertbox/991114.html">
When Bad Design Elements Become the Standard</a></cite></p>

<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>
<ul>
  <li>If <strong>90% or more</strong> of the big sites do things in a
  single way, then this is the <strong>de-facto standard</strong> and
  you <em>have</em> to comply. Only deviate from a design standard
  if your alternative design has at least 100% higher measured usability.</li>

  <li>If <strong>60-90%</strong> of the big sites do things in a
  single way, then this is a <strong>strong convention</strong> and
  you <em>should</em> comply unless
  your alternative design has at least 50% higher measured usability.</li>

  <li>If <strong>less than 60%</strong> of the big sites do things in a
  single way, then <strong>there are no dominant conventions yet</strong> and
  you are free to design in an alternative way. Even so, if there are a
  <strong>few options, each of which are used by at least 20% of big
  sites</strong>, you should limit yourself to choosing one of these
  reasonably well-known designs unless your alternative design has at least 25%
  higher measured usability than the best of the choices used by the big sites.</li>

</ul>
</blockquote>

Muotoilematon teksti - pre

pre-elementillä merkitään tekstilohkot, joissa on välttämätöntä säilyttää tekstin alkuperäinen kirjoitusasu. Elementtiä käytetään esimerkiksi ohjelmakoodilistauksissa.

<pre>
.navbar {
        border-style: solid;
        border-width: 1px;
        background-color: yellow;
        color: black;
        text-align: center;
        font-weight: bold;
        width: 100%;
        height: 2em;
        padding: 0.5em;
        position: fixed;
        top: 0%;
        left: 0%;
}
</pre>

Yleinen lohko - div

div-elementti on yleinen lohkotason elementti, jota käytetään merkitsemään erilaisia lohkoja. Esimerkiksi CSS-tyylejä käytettäessä div-elementtiä käytetään, jos ei löydetä vastaavaa kappaletason elementtiä. Seuraavassa esimerkissä on nähtävillä tällä sivulla oleva navigointipalkin lähdekoodi:

<div class="navbar">
  <ul>
    <li><a href="http://appro.mit.jyu.fi/">Appro</a></li>
    <li><a href="ilmoitukset/">Ilmoitukset</a></li>
    <li><a href="luennot/">Luennot</a></li>
    <li><a href="demot/">Demot</a></li>
    <li><a href="harkka/">Harjoitustyö</a></li>
    <li><a href="linkit/">Linkit</a></li>
    <li><a href="tentit/">Suoritukset</a></li>
    <li><a href="http://appro.mit.jyu.fi/palaute.html">Palaute</a></li>
  </ul>
</div>

Määritelmälista - dl


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

<dt>XHTML</dt>
<dd>eXtensible Hypertext Markup Language</dd>
</dl>

Uusia tekstitason elementtejä

Tekstitason elementeillä ilmaistaan lyhyiden tekstin osien rakennetta. Tekstitason elementit sijaitsevat lohkotason elementtien sisällä. Seuraavaan on kerätty listaksi tekstitason elementit.

Määritelmät

Viittaukset

Esimerkit

Muotoilut

Dokumentin otsikkotietoihin sijoitettavat elementit

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" />

Muita elementtejä

Seuraavat XHTML:n osat ja elementit jäävät myöhemmille luennoille

Linkkejä

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)<URL: http://www.iki.fi/jmantyla/>
2005-12-19 14:52:30