XHTML-elementit - Luento 2

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-elementtien luokittelu

Elementtejä voi luokitella muun muassa seuraavan jaottelun mukaan:

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. 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.

<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

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

Viittaukset

Esimerkit

Muotoilut

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 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.

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

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/luento2/
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2011-01-18 14:50:17
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta