XHTML-elementit - Luento 2
- Luentotaltiointi
- Kurssin yleiset asiat
- Hyödyllisiä laajennuksia
- XHTML-elementtien luokittelu
- Esimerkkejä XHTML-elementeistä
- Uusia lohkotason elementtejä
- Uusia tekstitason elementtejä
- Dokumentin otsikkotietoihin sijoitettavat elementit
- Muita elementtejä
- HTML-Kit-editorin vinkit
Luennolla käydään läpi nopeasti kertauksena kurssin järjestelyihin liittyvät asiat. Kyseiset asiat käytiin tarkemmin läpi luennolla 1. Varsinaisena luennon aiheena käydään läpi XHTML-elementtejä. Tämän lisäksi, jos aika riittää, käydään läpi hiukan HTML-Kit-editorin toimintaa.
Luentotaltiointi
Ongelmia videon katselussa?Kurssin yleiset asiat
Kerrataan ensin lyhyesti kurssin yleisiä asioita.
Hyödyllisiä laajennuksia
Sivulla olevat erityyppiset elementit saat näkyviin esimerkiksi asentamalla Firefoxiin seuraavat laajennukset:
Asennusohjeita löytyy ensimmäisen demon materiaaleista.
Laajennoksien lisäksi kannattaa muistaa hyödyntää seuraavia W3C:n aputyökaluja:
- XHTML-validaattori
- CSS-validaattori
- Linkkien tarkistaja
- Semantic Data Extractor - näyttää kätevästi mm. sivulla olevia erikoiselementtejä, puurakenteen, tekijätiedot ja otsikkotiedot.
XHTML-elementtien luokittelu
Elementtejä voi luokitella muun muassa seuraavan jaottelun mukaan:
- Lohkotason elementit (block level)
- Esimerkiksi kappaleet, otsikot ja listat
- Tekstitason elementit (inline level)
- Esimerkiksi tärkeäksi merkityt tekstipätkät
- Korvattavat elementit (replaced)
- Esimerkiksi kuvat ja muut objektit
Esimerkkejä XHTML-elementeistä
- Esimerkkidokumentti perinteisistä XHTML-elementeistä
- Tutki sivuston lähdekoodia View | Page Source.
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. Elementillä ei siis merkitä muita kuin dokumentin tekijän yhteystietoja.
Esimerkkikoodi:
<address>
<a href="http://www.ekonoja.net">Antti Ekonoja</a>
(<a href="mailto:antti.j.ekonoja@jyu.fi">antti.j.ekonoja@jyu.fi</a>)
<URL: <a href="http://www.ekonoja.net">http://www.ekonoja.net</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.
- If 90% or more of the big sites do things in a single way, then this is the de-facto standard and you have to comply. Only deviate from a design standard if your alternative design has at least 100% higher measured usability.
- If 60-90% of the big sites do things in a single way, then this is a strong convention and you should comply unless your alternative design has at least 50% higher measured usability.
- If less than 60% of the big sites do things in a single way, then there are no dominant conventions yet and you are free to design in an alternative way. Even so, if there are a few options, each of which are used by at least 20% of big sites, 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.
<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.
Esimerkkikoodi (CSS-koodi) tietystä navigointipalkista:
<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 olevan navigointipalkin lähdekoodi:
<div id="navbartop" class="navbartop"> <ul> <li><a accesskey="l" title="Luennot (ALT-l)" href="../../luennot/">Luennot</a></li> <li><a accesskey="d" title="Demot (ALT-d)" href="../../demot/">Demot</a></li> <li><a accesskey="h" title="Harjoitustyöohje (ALT-h)" href="../../harkka/">Harjoitustyö</a></li> <li><a accesskey="m" title="Kurssimoniste (ALT-m)" href="/doc/#www">Moniste</a></li> <li><a accesskey="c" title="Chat (ALT-c)" href="/chat.html">Chat</a></li> <li><a accesskey="f" title="FAQ-palsta (ALT-f)" href="/faq/www.html">FAQ</a></li> <li><a accesskey="a" title="Linkkisivu (ALT-i)" href="../../linkit/">Linkit</a></li> <li><a accesskey="o" title="Palautelomake (ALT-o)" href="/palaute.html">Palaute</a></li> <li><a accesskey="e" title="Ohje etäopiskelijoille (ALT-e)" href="/www/ohje.html">Etäopiskelu</a></li> </ul> </div>
Määritelmälista - dl
- dl-elementti määrittelee varsinaisen listan.
- dt-elementti määrittelee määriteltävän termin.
- dd-elementti sisältää termin määrittelyn.
Esimerkki määritelmälistasta:
- CSS
- Cascading Style Sheets
- XHTML
- eXtensible Hypertext Markup Language
<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
- abbr - lyhenteet (lausutaan kirjain kerrallaan)
Esimerkkejä: CSS HTML
<p> <abbr title="Cascading Style Sheets">CSS</abbr> <abbr title="Hypertext Markup Language">HTML</abbr> </p>
- acronym - alkukirjaimista muodostettu lyhenne, jota käytetään sanana (lausutaan kuten kirjoitetaan)
Esimerkkejä: ANSI CORBA
<p> <acronym title="American National Standards Institute">ANSI</acronym> <acronym title="Common Object Request Broker Architecture">CORBA</acronym> </p>
acronym-elementtiä ei tule olemaan enää HTML 5:ssa, vaan sen tilalla suositellaan käytettäväksi abbr-elementtiä.
- dfn - merkitään termien määritelmät
Päätteetön (esim. Arial tai Verdana) kirjasin sopii normaaleihin listoihin. Dian otsikoissa voi käyttää päätteellistä kirjasinta.
<p><dfn title="Kirjasin, jossa kirjaimien käyrien päitä EI ole päätetty kohtisuoralla viivalla">Päätteetön</dfn> (esim. Arial tai Verdana) kirjasin sopii normaaleihin listoihin. Dian otsikoissa voi käyttää <dfn title="Kirjasin, jossa kirjaimien avoimien käyrien päät on päätetty lyhyellä kohtisuoralla viivalla">päätteellistä</dfn> kirjasinta.</p>
Viittaukset
- cite - kappaleen sisällä olevat lainaukset ja viittaukset lähteisiin (lähteen nimi tai otsikko)
- Nielsen, Jakob: Designing Web Usability: The Practice of Simplicity
- Schengili-Roberts: Core CSS - Cascading Style Sheets
<ul> <li>Nielsen, Jakob: <cite><a href="http://www.useit.com/jakob/webusability/"> Designing Web Usability: The Practice of Simplicity</a></cite></li> <li>Schengili-Roberts: <cite>Core CSS - Cascading Style Sheets</cite></li> </ul>
- q - kappaleen sisällä oleva lainaus
Kuten Jukka Korpelan nyysiopas sanoo:
Meilispämmiä vastaan ei kannata yrittää taistella ns. nospam-osoitteilla
.<p> Kuten Jukka Korpelan <cite>nyysiopas</cite> sanoo: <q cite="http://www.cs.tut.fi/~jkorpela/nyysit/4.4.html#spamspam"> Meilispämmiä vastaan ei kannata yrittää taistella ns. nospam-osoitteilla</q>. </p>
Esimerkit
- code - merkitään ohjelmakoodit
Esimerkkikoodi:
<code> <acronym title="American National Standards Institute">ANSI</acronym> <acronym title="Common Object Request Broker Architecture">CORBA</acronym> </code>
- kbd - merkitään käyttäjän syötteenä antamat tekstit
Esimerkki:
Syötä tunnus-kenttään anjoekon.
<p>Syötä tunnus-kenttään <kbd>anjoekon</kbd>.</p>
- samp - ohjelmien esimerkkitulosteet
[tjlahton@eppi syksy]$ ls -al total 30 drwxrwxr-x 4 tjlahton tt-opet 352 Oct 24 15:47 . drwxrwxr-x 6 tjlahton tt-opet 152 Aug 12 10:35 .. -rw-rw-r-- 1 tjlahton tt-opet 85 Aug 5 13:20 .wmlrc -rw-rw-r-- 1 tjlahton tt-opet 935 Oct 5 13:12 Makefile -rw-rw-r-- 1 tjlahton tt-opet 0 Aug 10 17:53 index.html -rw-rw-r-- 1 tjlahton tt-opet 3200 Oct 16 14:08 index.wmltmpl -rw-rw-r-- 1 tjlahton tt-opet 836 Sep 10 14:32 linkit.wml -rw-rw-r-- 1 tjlahton tt-opet 655 Sep 10 14:32 linkitetu.wml -rwxr-xr-x 1 tjlahton users2 63 Oct 9 13:06 mp3 drwsrwsr-x 6 tjlahton tt-opet 264 Oct 18 09:00 opiskeluymparisto -rw-rw-r-- 1 tjlahton tt-opet 2932 Oct 16 14:07 pohja.wmltmpl drwxrwxr-x 8 tjlahton tt-opet 456 Oct 22 09:32 tietoverkot
Esimerkin koodi:
<pre><samp> [tjlahton@eppi syksy]$ ls -al total 30 drwxrwxr-x 4 tjlahton tt-opet 352 Oct 24 15:47 . drwxrwxr-x 6 tjlahton tt-opet 152 Aug 12 10:35 .. -rw-rw-r-- 1 tjlahton tt-opet 85 Aug 5 13:20 .wmlrc -rw-rw-r-- 1 tjlahton tt-opet 935 Oct 5 13:12 Makefile -rw-rw-r-- 1 tjlahton tt-opet 0 Aug 10 17:53 index.html -rw-rw-r-- 1 tjlahton tt-opet 3200 Oct 16 14:08 index.wmltmpl -rw-rw-r-- 1 tjlahton tt-opet 836 Sep 10 14:32 linkit.wml -rw-rw-r-- 1 tjlahton tt-opet 655 Sep 10 14:32 linkitetu.wml -rwxr-xr-x 1 tjlahton users2 63 Oct 9 13:06 mp3 drwsrwsr-x 6 tjlahton tt-opet 264 Oct 18 09:00 opiskeluymparisto -rw-rw-r-- 1 tjlahton tt-opet 2932 Oct 16 14:07 pohja.wmltmpl drwxrwxr-x 8 tjlahton tt-opet 456 Oct 22 09:32 tietoverkot </samp></pre>
- var - merkitään muuttujat ja ohjelman parametrit
Esimerkki:
ls-komennon parametrilla al saa tulostuksen muistuttamaan DOS:ista tuttua DIR-komentoa.
<p> ls-komennon parametrilla <var>al</var> saa tulostuksen muistuttamaan DOS:ista tuttua DIR-komentoa. </p>
Muotoilut
- br - pakotettu rivinvaihto
Pakotettua rivinvaihtoa EI SAA käyttää tyhjän tilan tekemiseen! Ei siis kahta br-elementtiä peräkkäin.
Esimerkkikoodi:
<address> yliopistonopettaja <a href="mailto:antti.j.ekonoja@jyu.fi">Antti Ekonoja</a><br /> Sähköposti: <strong><a href="mailto:antti.j.ekonoja@jyu.fi"> antti.j.ekonoja@jyu.fi</a></strong><br /> Kotisivu: <URL: <a class="url" href="http://www.ekonoja.net"> http://www.ekonoja.net</a>><br /> Työhuone: <abbr title="Agora C522.3">Ag C522.3</abbr><br /> Puhelin: <em>(014) 260 2746</em><br /> Fax: <em>(014) 260 2731</em> </address>
- span - yleinen merkkitason elementti, vrt.
div
.Käytetään vain paikoissa, joihin ei ole muuten sopivampaa elementtejä. Esim. vain ulkoasuun liittyvät määritykset.
Esimerkkikoodi:
<p>Tässä esimerkissä on <span class="erikois">erikoismuotoiltu osa</span>.</p>
Dokumentin otsikkotietoihin sijoitettavat elementit
Metatieto - meta
meta-elementillä määritellään dokumenttiin liittyvää metatietoa.
<meta name="description"
content="WWW-julkaiseminen - Tietotekniikan yleisopintokurssi Jyväskylän
yliopiston tietotekniikan laitoksella" />
<meta name="keywords"
content="tietotekniikka, jyväskylän yliopisto, tietotekniikan laitos,
informaatioteknologia, opetus, kurssi" />
<meta name="author" content="Antti Ekonoja" />
Linkkielementti - link
- link-elementti saa esiintyä vain head-elementin sisällä.
- link-elementille määritellään dokumentin suhde muihin dokumentteihin.
<link title="Oletustyyli" rel="StyleSheet" href="/malli.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.ekonoja.net" title="Antti Ekonoja" />
<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="WWW-julkaiseminen" />
<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="../luento12/" title="Viimeinen" />
<link rel="Search" href="/haku/" title="Haku" />
Muita elementtejä
Seuraavat XHTML:n osat ja elementit jäävät myöhemmille luennoille.
- Lomakkeet (form yms.)
- object
- map ja area
- script
HTML-Kit-editorin vinkit
Näytetään pikaisesti joitakin keskeisiä HTML-Kit-editorin käyttövinkkejä. HTML-Kitiin voi asettaa myös pikanäppäimiä.
Käyttäjien kommentit