1 / 23

CLT132

CLT132. Yleistä sivusuunnittelusta HTML + XHTML perusasiat (viikko 2). HTML + XHTML. HyperText Markup Language Extensible HyperText Markup Language Näillä WWW pyörii… (ainakin ulosnäkyvä osa, suurimmilta osin). Lyhyesti sivusuunnittelusta.

adonica
Download Presentation

CLT132

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CLT132 Yleistä sivusuunnittelusta HTML + XHTML perusasiat (viikko 2)

  2. HTML + XHTML • HyperText Markup Language • Extensible HyperText Markup Language • Näillä WWW pyörii… (ainakin ulosnäkyvä osa, suurimmilta osin) CLT132 – kevät 2008 Sauli Nurmi

  3. Lyhyesti sivusuunnittelusta • Hyvin suunniteltu on aina (vähintään) puoliksi tehty • Sivuston nimeämiskäytäntö, hakemistorakenne, navigaatio yms. eivät saa olla satunnaisia • …tai kukaan ei tietysti kiellä, mutta lopulta päädytään ongelmiin, jos ei ole johdonmukainen CLT132 – kevät 2008 Sauli Nurmi

  4. Nimeämiskäytännöt • Tiedostoille selvät ja kuvaavat nimet • 8+3 merkkiä vanha perinteinen pituus • Nykyään voi olla tietysti pitempiäkin • Kuitenkin kohtuus kaikessa, satojen merkkien pituiset nimet (pääsääntöisesti) huono ratkaisu • Historiallisesti: Windowsissa tiedostopääte *.htm, muualla *.html CLT132 – kevät 2008 Sauli Nurmi

  5. Sivuston rakenne • Ensimmäinen kysymys: mikä on järkevää, mikä on tarpeellista? • Miten tiedostot jaotellaan vai jaotellaanko ollenkaan? • Esim. alipolut kielten mukaan /fin, /en, jne. • Kuvat: /images, /pictures, /photos tjsp. CLT132 – kevät 2008 Sauli Nurmi

  6. Lyhyt viittaus: ”kuva.jpg” Viittaus alihakemistoon: ”kuvat/kuva.jpg” Pitkä viittaus: “http://www.helsinki.fi/ ~omasivu/kuvat/kuva.jpg” Tiedostoihin viittaaminen CLT132 – kevät 2008 Sauli Nurmi

  7. Tied. viittaaminen, jatkoa • Lyhyt, suhteellinen viittaus hyvä silloin, kun kaikki tiedostot ovat samalla palvelimella • Koko paketti voidaan siirtää toiseen paikkaan, ei tarvita muutoksia • Pitkä, absoluuttinen viittaus hyvä silloin, kun viitataan toisella palvelimella sijaitsevaan tiedostoon • Tässäkin tapauksessa etuna on linkkien toimivuus ja muuttumattomuus, jos viittaavat tiedostot siirretään toiseen paikkaan • Muut käyttötavat (mahdollisesti) ongelmallisia CLT132 – kevät 2008 Sauli Nurmi

  8. Suunnittelija on kingi!!! • Pääsääntöisesti sivuston rakenteen pitää olla selvä ja toimiva suunnittelijan ja sivujen luojan näkökulmasta • Ansiotyössä kuitenkin: kenen leipää syöt, sen lauluja laulat ja sivustoja laadit… • Ulkopuoliselle epälooginen ja sekava rakennekin voi olla perustellusti hyvä • Ideaalitapauksessa kaikki tyytyväisiä CLT132 – kevät 2008 Sauli Nurmi

  9. Pohdintaa esimerkin kautta • Fakta om Fartyg Lähde: http://www.faktaomfartyg.se/ • Todella informatiivinen ja rakkaudella tehty sivusto... • Mutta: kaikki tiedostot yhdessä hakemistossa! • 91276 tiedostoa!!! • Mitattu tammikuun alussa (Offline Explorer Pro) • Onko tämä perusteltua? • Voi ollakin, mutta onko oikeasti? CLT132 – kevät 2008 Sauli Nurmi

  10. Tiivistetysti, siis • Ennen kuin tekee yhtään mitään, pitää miettiä mitä tekee • Kannattaa ajatella proaktiivisesti • On pienempi vaiva luoda muutama turhakin hakemisto tulevaisuutta ajatellen kuin myöhemmässä vaiheessa siirtää tiedostoja edestakaisin… • …ja muuttaa näiden keskinäiset linkitykset pahimmassa tapauksessa CLT132 – kevät 2008 Sauli Nurmi

  11. Sitten itse asiaan, HTML • Historia todella pitkä, alkaa jostain 60-luvulta • IBM Generalized Markup Language (GML) • Standard Generalized Markup Language (SGML) • HTML:t, XML:t sun muut pohjautuvat näihin CLT132 – kevät 2008 Sauli Nurmi

  12. HTML-historia • Tällä kurssilla ei aikaa eikä mielenkiintoa paneutua sen syvällisemmin historiaan (kuitenkin oleellinen osa myös kieliteknologian historiaa) • HTML:n historia vuodesta 1993 (draft) • Viimeisin standardiversio: 4.01 (2001) CLT132 – kevät 2008 Sauli Nurmi

  13. XHTML, seuraava askel • Vuodesta 2001 • Voidaan ajatella: • HTML + XML = XHTML • Tiukasti rajattu sivunkuvauskieli, siinä missä HTML on (ainakin käytännössä) jossain määrin löyhä • Elementtien määrittelyt ja sulkemiset! CLT132 – kevät 2008 Sauli Nurmi

  14. Yhteistä kummallekin • Merkitään sivunkuvausta tageillä, ts. on olemassa elementtejä, joita rajaavat alku- ja loppumerkinnät • Tuttua wiki-esimerkeistä, mutta notaatio toinen • http://en.wikipedia.org/wiki/HTML_element CLT132 – kevät 2008 Sauli Nurmi

  15. Yhteistä kummallekin, jatkoa • Aluksi määritellään dokumentti HTML:ksi <html> [sivun sisältö tähän väliin] </html> • Sen jälkeen pää ja ruumis <head> [metadataa] </head> <body> [varsinainen näkyvä osuus] </body> CLT132 – kevät 2008 Sauli Nurmi

  16. Eroja • HTML:ssä periaatteessa isot kirjaimet <HTML>, <HEAD>, <BODY>, jne. • XHTML:ssä periaatteessa pienet kirjaimet <html>, <head>, <body>, jne. • Käytännössä selaimet näyttävät (lähes) mitä tahansa (minkä takia vaikea löytää tyylipuhtaita sivuja... mistään) CLT132 – kevät 2008 Sauli Nurmi

  17. Eroja, jatkoa • XHTML vaatii elementtien sulkemiset!!! • Käytännössä siis rivinvaihto HTML vs. XHTML: • <BR> vs. <br /> • Periaatteessa <br /> on <br></br>, mutta kukaan ei kirjoita näin… vaikka se on täysin standardin mukainen tapa, joka menee validaattoreista läpi CLT132 – kevät 2008 Sauli Nurmi

  18. Eksperimentoimaan! • Näillä perustiedoilla päästäänkin jo alkuun (katso myös tagien apumoniste) • Tekemällä oppii, etenkin virheitä tekemällä... • Periaatteellisella tasolla tässä on kaikki mitä HTML:stä on kerrottavaa... loppu on teknisiä detaljeja (tai HTML:n ulkopuolisia tekniikoita) CLT132 – kevät 2008 Sauli Nurmi

  19. HTML:ää käsityönä • Työtapa helppo, mutta joillekin ihmisille (syystä tai toisesta) vaikea mieltää: • Editoidaan tekstieditorilla, tallennetaan *.htm(l) päätteellä ja avataan selaimeen • Muutokset tehdään tekstitiedostoon, päivitetään selaimen näkymää, jotta nähdään mitä tulikaan tehtyä CLT132 – kevät 2008 Sauli Nurmi

  20. Koodi versus lopputulos • On oleellista huomata, että kirjoitettaessa HTML-koodia luodaan itse asiassa kahta asiaa: • Sivunkuvauskielistä koodia • Sivua, jonka koodi määrittää • Kuitenkin: koodin muotoilu ei vielä vaikuta mitään sivun muotoiluun! • Esim. rivinvaihto koodissa ei luo rivinvaihtoa syntyvälle sivulle!! CLT132 – kevät 2008 Sauli Nurmi

  21. Hyvin muotoiltu <html> <head> <title>Testisivu</title> </head> <body> <p>Tässä on pieni <u>testi</u>sivu, <br /> ja <a href="http://www. helsinki.fi/">testilinkki</a>.</p> </body> </html> Sekavasti muotoiltu <html><head><title>Testisivu</title></head> <body><p>Tässä on pieni <u>testi</u>sivu, <br /> ja <a href="http://www.ling.helsinki.fi/">testilinkki</a>.</p></body></html> Identtiset sivut! CLT132 – kevät 2008 Sauli Nurmi

  22. Viikon oleellisin asia • Sisäistää HTML-dokumenttien rakenne pääpiirteissään (HTML, HEAD, BODY) • Tiedostaa periaatteellisia eroavuuksia HTML:n ja XHTML:n välillä • Maailma on täynnä manuaaleja, ulkoa opettelu ei (välttämättä) mielekästä • Oppia kirjoittamaan koodia käsityönä, pienessä mittakaavassa CLT132 – kevät 2008 Sauli Nurmi

  23. Lisää aiheesta • Vapaavalintaisissa oppikirjoissa, aiheena HTML (versio 4) ja XHTML • Verkossa, mm. http://www.w3schools.com/html/ (Basic-materiaali alusta linkkeihin (links) asti) http://www.w3schools.com/xhtml/ (alusta syntaksiin (syntax) asti) CLT132 – kevät 2008 Sauli Nurmi

More Related