CLT132

CLT132

Yleistä sivusuunnittelustaHTML + XHTML perusasiat(viikko 2)

CLT132 – kevät 2008 Sauli Nurmi

HTML + XHTML

HyperText Markup LanguageExtensible HyperText Markup Language

Näillä WWW pyörii… (ainakin ulosnäkyvä osa, suurimmilta osin)


Lyhyesti sivusuunnittelusta

Hyvin suunniteltu on aina (vähintään) puoliksi tehtySivuston 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


Nimeämiskäytännöt

Tiedostoille selvät ja kuvaavat nimet8+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


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.


Tiedostoihin viittaaminen

Lyhyt viittaus:”kuva.jpg”

Viittaus alihakemistoon:

”kuvat/kuva.jpg”

Pitkä viittaus:“http://www.helsinki.fi/~omasivu/kuvat/

kuva.jpg”


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


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ä


Pohdintaa esimerkin kautta

Fakta om FartygLä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?


Tiivistetysti, siis

Ennen kuin tekee yhtään mitään, pitää miettiä mitä tekeeKannattaa 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


Sitten itse asiaan, HTML

Historia todella pitkä, alkaa jostain 60-luvultaIBM Generalized Markup Language (GML)Standard Generalized Markup Language (SGML)HTML:t, XML:t sun muut pohjautuvat näihin


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)


XHTML, seuraava askel

Vuodesta 2001Voidaan 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!


Yhteistä kummallekin

Merkitään sivunkuvausta tageillä, ts. on olemassa elementtejä, joita rajaavat alku- ja loppumerkinnätTuttua wiki-esimerkeistä, mutta notaatio toinenhttp://en.wikipedia.org/wiki/HTML_element


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>


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)


Eroja, jatkoa

XHTML vaatii elementtien sulkemiset!!!Käytännössä siis rivinvaihto HTML vs. XHTML: vs. 

Periaatteessa on , mutta kukaan ei kirjoita näin… vaikka se on täysin standardin mukainen tapa, joka menee validaattoreista läpi


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)


HTML:ää käsityönä

Työtapa helppo, mutta joillekin ihmisille (syystä tai toisesta) vaikea mieltää:Editoidaan tekstieditorilla, tallennetaan *.htm(l) päätteellä ja avataan selaimeenMuutokset tehdään tekstitiedostoon, päivitetään selaimen näkymää, jotta nähdään mitä tulikaan tehtyä


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


Identtiset sivut!

Hyvin muotoiltu

<html> <head> <title>Testisivu</title> </head> <body> Tässä on pieni testisivu,

 ja <a href="http://www.

helsinki.fi/">testilinkki</a>. </body></html>

Sekavasti muotoiltu

<html><head><title>Testisivu</title></head>

<body>Tässä on pieni

testisivu, ja

<a href="http://www.ling.helsinki.fi/">testilinkki</a>.</body></html>


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


Lisää aiheesta

Vapaavalintaisissa oppikirjoissa, aiheena HTML (versio 4) ja XHTMLVerkossa, mm.

http://www.w3schools.com/html/(Basic-materiaali alusta linkkeihin (links)

asti)http://www.w3schools.com/xhtml/(alusta syntaksiin (syntax) asti)

Documents

CLT132