230 likes | 317 Views
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.
E N D
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) CLT132 – kevät 2008 Sauli Nurmi
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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