• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
XHTML:ää KompoZerilla
 

XHTML:ää KompoZerilla

on

  • 1,143 views

 

Statistics

Views

Total Views
1,143
Views on SlideShare
1,115
Embed Views
28

Actions

Likes
0
Downloads
3
Comments
0

2 Embeds 28

http://koutek-0910.wikispaces.com 26
http://edtech7.oulu.fi 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    XHTML:ää KompoZerilla XHTML:ää KompoZerilla Presentation Transcript

    • XHTML:ää KompoZerilla Digitaaliset portfoliot oppimisen tukena -taitotyöpajat 22.02.2010 Harto Pönkä Learning and Educational Technology Research Unit (LET)
    • Hypertekstin perusteet
      • Www-dokumentit kirjoitetaan HTML- tai XHTML-kuvauskielellä
      • (X)HTML-lähdekoodi koostuu tageista, esim. <p>, <b>, <h1> ja <img>, tekstistä ja siihen liitetyistä ja linkitetyistä tiedostoista
      • (X)HTML-koodissa määrätään dokumentin (semanttinen) rakenne
      • Ulkoasun tarkka määrittely tehdään CSS-tyyleillä
      • Linkit tekevät hypertekstistä hypertekstiä
      • Www-sivut voivat olla staattisia eli valmiiksi tehtyjä tai dynaamisia eli käytön aikana koostettujas
    • DOCTYPE eli dokumentin tyyppi
      • <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 //EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;>
      • <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional //EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;>
      • <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset //EN&quot; &quot;http://www.w3.org/TR/html4/frameset.dtd&quot;>
      • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict //EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>
      • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional //EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
        • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset //EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;>
      http://www.w3.org/QA/2002/04/valid-dtd-list.html
    • Www-dokumentin rakenne
      • <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN” &quot;http://www.w3.org/TR/html4/strict.dtd&quot;>
      • <html>
      • <head> <meta content=&quot;text/html; charset=ISO-8859-1&quot; http-equiv=&quot;content-type&quot;> <title>Sivun ulkoinen otsikko</title> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=”tyylit.css&quot;>
      • </head>
      • <body> <h1>Tämä on otsikko</h1> <p>Kaikki sisältö tulee body-tagin sisään. Tämä teksti on kappaetagin sisällä.</p>
      • <p>Tageja voi olla sisäkkäin. <a href=”toinensivu.html”>Tässä on linkki</a> kappaleen sisällä.</p>
      • <table>
      • <tr><td>Ylä vasen</td><td>Ylä oikea</td></tr>
      • <tr><td>Ala vasen</td><td>Ala oikea</td></tr>
      • </table>
      • <div id=”laatikko” class=”keskitetty”>Tämä on DIV-lohko, jolle on määrätty CSS-tyylejä.</div>
      • </body>
      • </html>
    • Tehtävä: tutki www-sivujen lähdekoodeja
      • Valitse File  Open Web Location...
      • Syötä haluamasi www-sivun osoite
      • Tutki dokumenttia:
        • Mikä DOCTYPE?
        • Mitä on head:in sisällä?
        • Mitä on bodyn sisällä?
        • Mitä tageja on sisällössä?
    • Vaihda alareunasta näkymää: - Normal - HTML Tags - Source - Preview 1. Vertaa miten tietyt kohdat www-sivusta näkyvät eri näkymissä. 2. Tee muutoksia lähdekoodiin (source) ja katso niitä esikatselussa.
    • XHTML:n perustagit
      • <p>...</p> Kappale
      • <strong>...</strong> Vahvennettu teksti
      • <h1>...</h1> Otsikko (numero 1-6)
      • <a href=”URL”>...</a> Linkki, URL=linkin osoite
      • <img href=”URL” /> Kuva, URL=kuvan osoite
      • <ul>...</ul> Järjestämätön lista aloitus-lopetus
      • <ol>...</ol> Järjestetty lista aloitus-lopetus
      • <li>...</li> Listaelementti, ul:n tai ol:n sisällä
      • <div>...</div> Lohko
      • <span>...</span> Inline-tason ”lohko”
      • class=”luokka” Tyyliluokka, CSS-viittaus: .luokka
      • id=”tunniste” Yksilöivä tunniste, CSS-viittaus: #tunniste
    • Tehtävä: luo oma kotisivu
      • Valitse File  New ja luo uusi XHTML-dokumentti
      • Luo oma kotisivusi, jossa on:
        • Otsikoita
        • Tekstiä
        • Kuvia
        • Linkkejä
        • Listoja
        • Muuta, mitä haluat kokeilla
    • Lisäohjeita
      • HTML 4.01 spesifikaatio: http ://www.w3.org/TR/1999/REC-html401-19991224/
      • CSS 1:n spesifikaatio: http ://www.w3.org/TR/2008/REC-CSS1-20080411/
      • Laaja suomenkielinen ohjesivusto: http ://www.sivut.org/html/
      • Toinen suom. ohje: http ://myy.helia.fi/~vanvu/html/
      • Kattava engl. ohjesivusto: http :// w3schools.com/