XHTML:ää KompoZerilla

994 views
925 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
994
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

XHTML:ää KompoZerilla

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

×