« edellinen seuraava »
Sivuja: [1]   Siirry alas

Kirjoittaja Aihe: HTML tutoriaali  (Luettu 8240 kertaa)

Athalon

  • Käyttäjä
  • Viestejä: 8
    • Profiili
HTML tutoriaali
« : 08.12.06 - klo:11.59 »
Mistä löytäisi HTML tutoriaalia. Ihan alusti asti kaikki koska en tiedä kielestä mitään, ja kiinnostus heräsi aiheeseen.
Suomenkielinen opas olisi paras vaihtoehto, mutta myös englanninkielinen kävisi.
Kirjattu

fly

  • Käyttäjä
  • Viestejä: 265
    • Profiili
    • o_O
Re: HTML tutoriaali
« Vastaus #1 : 08.12.06 - klo:12.53 »
niitä on niin älyttömästi että vaikea jotain yhtä sanoa, mutta esimerkiksi tämä on mielestäni aloittelijalle sopiva tutoriaali jolla pääsee kivasti alkuun: http://www.sivut.org/html/ 
kohdasta dokumentti eteenpäin päästään itse opetteluun  :)
Kirjattu

Thomas

  • Käyttäjä
  • Viestejä: 10
    • Profiili
Re: HTML tutoriaali
« Vastaus #2 : 08.12.06 - klo:12.56 »
No tässäpä olisi pari nopeasti mieleen tullutta suomenkielistä sivustoa:

Sivustokoodaajan vinkit, hieman vaiheessa, mutta näyttäisi tuolta alkeita löytyvän.

HTML - sivut.web, täältä sitten löytyykin vähän enemmän tietoa.

Näppituntumalla sanon että suunnilleen jokaisesta kirjastosta löytyy (usein tiiliskiven paksuisia, ei kannata säikähtää) kirjoja aiheesta ja suosittelen sellaisen lainaamaan. Kirjan etuna on se että vaikka kuinka laiskottaisi, kopioi-liitä ei toimi. Kaikki pitää kirjoittaa itse, joten tulee harjoitusta. Tietysti tällainen tiiliskiven kahlaaminen vaatii sisua, mutta sen olen kuitenkin parhaaksi opiskelumenetelmäksi todennut, oma itsehillintä kun ei silloin aikoinaan kovin hyvä ollut ;) Jos itsehillintää löytyy, niin internet on toki se helpoin ja nopein lähde.

Niin ja http://www.w3.org/ on myös hyvä englanninkielinen lähde.

E: Jos katsoit flyn tarjoaman linkin, niin toinen minun linkeistäni saattaa (tai ainakin pitäisi :D) näyttää tutulta... Pitää jatkossa yrittää vähän nopemmin kirjoittaa viesti.
« Viimeksi muokattu: 08.12.06 - klo:12.58 kirjoittanut Thomas »
Kirjattu

raimo

  • Käyttäjä
  • Viestejä: 4269
  • openSUSE Tumbleweed
    • Profiili
Re: HTML tutoriaali
« Vastaus #3 : 08.12.06 - klo:14.38 »
Hyviä oppaita aikanaan, mutta kehitys kehittyy kovaa vauhtia, ja esimerkiksi tuo sivut.web ohjeet ovat auttamattomasti vanhentuneita. Oikeastaan tuollaiset ohjeet pitäisi poistaa sotkemasta, jos niitä ei jakseta ylläpitää. vrt. neuvotaan taustaväri body-tagissa yms.

Sivustokoodaajan vinkit sivulla taas neuvotaan jo heti kättelyssä dokumenttityyppin määrittäminen väärin.
Korjataan se nyt tässä sitten edes, että ei jää väärää tapaa käyttöön heti aluksi.
Tässä ainoa oikea tapa määrittää HTML 4.01 Transitional dokumenttityyppi:
Koodia: [Valitse]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
Noin siksi että esim MSIE selain vaihtaa toimintatilaansa tuon dokumenttityypin mukaan.
Ja siksi se pitää AINA olla, ja se pitää AINA olla oikein = täydellisenä URL-osalla määritettynä.

Suosittelen kuitenkin tekemään sivut XHTML:nä, se on tulevaisuuden sivunkuvauskieli.

Perusperiaate on se että sivun runko tehdään (X)HTML kuvauskielellä.
Kaikki ulkoasuun vaikuttavat asiat tehdään aina vain CSS -tyylimäärittelyillä (mieluiten ulkoisessa tiedostossa).

Yllämainituista syistä ohjaan aloittelijat tuonne: http://www.w3schools.com/
Sieltä löytyy kutakuinkin ajantasaista tietoa oikeista tekniikoista yms.

Ja tältäkin foorumilta löytyy sitten tietotaitoa tarvittaessa vaikka kuinka. ;)

edit, Korpela meinasi taas unohtua: ;)
http://www.cs.tut.fi/~jkorpela/
http://www.cs.tut.fi/~jkorpela/webjulk/
http://www.cs.tut.fi/~jkorpela/wwwfi.html
Ja täältä lisää:
http://appro.mit.jyu.fi/doc/#www

Osuuskunta Sangen sivuilta löytyy hyvä perusohje, kannattaa lukea ihan ensimäiseksi tämä:
http://www.sange.fi/ohje-verkkosivujen-teko
« Viimeksi muokattu: 08.12.06 - klo:15.17 kirjoittanut raimo »
Kirjattu
Tietä käyden tien on vanki. Vapaa on vain umpihanki.
Aaro Hellaakoski

janne

  • Käyttäjä
  • Viestejä: 5150
    • Profiili
Re: HTML tutoriaali
« Vastaus #4 : 09.12.06 - klo:00.38 »
Lainaus käyttäjältä: raimo - 08.12.06 - klo:14.38
edit, Korpela meinasi taas unohtua: ;)

korpela on aika kova nimi tämän aiheen parissa, onpa hän kirjoittanut aiheesta pari kirjaakin (kannattaa tarkistaa vaikka kirjastosta).
Kirjattu
Janne

E.K.Virtanen

  • Käyttäjä
  • Viestejä: 736
    • Profiili
    • Sähköaivoilua
Re: HTML tutoriaali
« Vastaus #5 : 09.12.06 - klo:02.47 »
Voi voi kun tuo Korpela kummittelee joka puolella...eikö siitä per...olkoon.
http://cs.stadia.fi/~lehtk/html.html Kari Lehtosen mainio, joskin jo vuodelta 2001 peräisin oleva hötömölö opus.
Kirjattu

Athalon

  • Käyttäjä
  • Viestejä: 8
    • Profiili
Re: HTML tutoriaali
« Vastaus #6 : 09.12.06 - klo:12.33 »
Nuo korpelan ohjeet vaikutti mielenkiintoisilta. Pitääkin syventyä niiden lukemiseen tarkemmin :)
Kiitos kaikille vastanneille.
Kirjattu

Myrtti

  • Käyttäjä
  • Viestejä: 112
    • Profiili
    • http://myrtti.fi
Re: HTML tutoriaali
« Vastaus #7 : 09.12.06 - klo:13.40 »
Itse olen perinteisesti xHTML:ää opettaessani läväyttänyt täysin aloittelijoille ensin paperia ja kynän käteen ja sen jälkeen OpenOfficen tai Wordin päälle ja antanut ensin opetusta siinä. Paperin toiselle puolelle olen tulostanut jonkun suomalaisen asiakirjastandardin mukaisen dokumentin (paperi == <body>, ylätunniste == <head>, itse teksti == <body>, pääotsikko == <h1>, kappaleet == <p> jne). Sitten olen käskenyt suunnitella paperin toiselle puolelle sivuston ensimmäisen aloitussivun ajatuksella "Mitä laittaisit ylätunnisteeseen", "Mihin haluat kuvat" jne. Sitten otetaan OpenOffice tai Word käyttöön, tehdään "asiakirjapohja" ja tehdään otsikoilla, kappaleille jne omat tyylit.

Tämän jälkeen on pystynyt kohtuu helposti siirtymään suoraan tekstieditorin pariin vääntämään hötöä. Tuo tekstinkäsittelyohjelman käyttö suunnitteluvaiheessa helpottaa ymmärrystä siinä vaiheessa, kun tehdään ero html:n (merkintäkieli, joka perustuu vahvasti paperimedialle tehtävään sivuntaittoon tai tekstinkäsittelyyn) ja sen ulkonäön eli muotoilun kanssa, jonka opetan CSS2:lla.

Nettisivujen "koodeihin" on hirvittävä määrä oppaita. Itse käytän eniten W3Cn sivuja ja CSS:ään tätä.
Kirjattu
GCS/ED/FA/H/P/S/L/O d- s:+ a33 C++ UL+ P+ L+++ E W+++ N+ o K+ w+(---) !O M?>+ V? PS++>$ PE>$ Y+ PGP- t+ 5+++ X+ R tv- b+++ DI++++ D-- G e>+++ h- r x+

janne

  • Käyttäjä
  • Viestejä: 5150
    • Profiili
Re: HTML tutoriaali
« Vastaus #8 : 09.12.06 - klo:15.16 »
Lainaus käyttäjältä: Myrtti - 09.12.06 - klo:13.40
Itse olen perinteisesti xHTML:ää opettaessani läväyttänyt täysin aloittelijoille ensin paperia ja kynän käteen ja sen jälkeen OpenOfficen tai Wordin päälle ja antanut ensin opetusta siinä. Paperin toiselle puolelle olen tulostanut jonkun suomalaisen asiakirjastandardin mukaisen dokumentin (paperi == <body>, ylätunniste == <head>, itse teksti == <body>, pääotsikko == <h1>, kappaleet == <p> jne). Sitten olen käskenyt suunnitella paperin toiselle puolelle sivuston ensimmäisen aloitussivun ajatuksella "Mitä laittaisit ylätunnisteeseen", "Mihin haluat kuvat" jne. Sitten otetaan OpenOffice tai Word käyttöön, tehdään "asiakirjapohja" ja tehdään otsikoilla, kappaleille jne omat tyylit.

sinänänsä ihan hauska tyyli opettaa html:n 'tarkoitusta'. tosin valitettavan harva peruskäyttäjä tuntuu ymmärtävän edes tekstinkäsittelyssä sisällön rakenteen kuvaamista eri tyyleillä (siis harmillisen usein otsikko on sama kuin suurempi boldattu fontti). tuossahan sitä ehkä sitten oppii ymmärtämään molempia.

Lainaus käyttäjältä: Myrtti - 09.12.06 - klo:13.40
Tämän jälkeen on pystynyt kohtuu helposti siirtymään suoraan tekstieditorin pariin vääntämään hötöä.

sinällään en kyllä pidä tekstieditorin käyttöä välttämättä pakollisena. tai siis sikäli kyllä, että kun tagien merkityksen ymmärtää, niin sivut pystyy tekemään vaivatta vaikka sitten tekstieditorilla, mutta kyllä jotkut html (koodi) editorit helpottavat elämää ihan kivasti.

Lainaus käyttäjältä: Myrtti - 09.12.06 - klo:13.40
Tuo tekstinkäsittelyohjelman käyttö suunnitteluvaiheessa helpottaa ymmärrystä siinä vaiheessa, kun tehdään ero html:n (merkintäkieli, joka perustuu vahvasti paperimedialle tehtävään sivuntaittoon tai tekstinkäsittelyyn)

tästä ollaan hieman eri mieltä... minusta html ei nimenomaan perustu sivuntaittoon, koska se viittaa ulkoasuun. html:n tarkoituksena ei ole ottaa kantaa siihen miltä sivu näyttää, vaan ainoastaan kuvata dokumentin ja sen sisällön rakenne.

Lainaus käyttäjältä: Myrtti - 09.12.06 - klo:13.40
ja sen ulkonäön eli muotoilun kanssa, jonka opetan CSS2:lla.

...ja selvästi sinäkin olet jotakuinkin samoilla linjoilla, koska käytät CSS:ää liittämään tuolle rakenteelle halutun ulkoasun.

Lainaus käyttäjältä: Myrtti - 09.12.06 - klo:13.40
Nettisivujen "koodeihin" on hirvittävä määrä oppaita. Itse käytän eniten W3Cn sivuja ja CSS:ään tätä.

juu, koodilistauksia voi toki lukea mistä tahansa, mutta oppimista ja taitoja kasvattaa jos oikeasti oppii samalla ymmärtämään mitä mikäkin tagi tarkoittaa (ei siis sitä miltä joku tagi ehkä näyttää selaimessa, vaan millaista dataa sillä on tarkoitus kuvata ja missä tilanteessa sitä kannattaa/pitää käyttä).
Kirjattu
Janne

Myrtti

  • Käyttäjä
  • Viestejä: 112
    • Profiili
    • http://myrtti.fi
Re: HTML tutoriaali
« Vastaus #9 : 09.12.06 - klo:15.36 »
Lainaus käyttäjältä: janne - 09.12.06 - klo:15.16
juu, koodilistauksia voi toki lukea mistä tahansa, mutta oppimista ja taitoja kasvattaa jos oikeasti oppii samalla ymmärtämään mitä mikäkin tagi tarkoittaa (ei siis sitä miltä joku tagi ehkä näyttää selaimessa, vaan millaista dataa sillä on tarkoitus kuvata ja missä tilanteessa sitä kannattaa/pitää käyttä).
Juurikin näin. Kun OpenOfficessa on näyttänyt mikä merkitys on sillä, että otsikko tehdään otsikolla eikä pelkästään suurentamalla fonttia ja boldaamalla (esim. sisällysluettelot ja PDF-exporttaus), voidaan johtaa siihen että hX tarkoittaa otsikko X:ää, p tarkoittaa paragrafia eli kappaletta, blockquote sisennettyä lainausta ja niin päin pois.
Kirjattu
GCS/ED/FA/H/P/S/L/O d- s:+ a33 C++ UL+ P+ L+++ E W+++ N+ o K+ w+(---) !O M?>+ V? PS++>$ PE>$ Y+ PGP- t+ 5+++ X+ R tv- b+++ DI++++ D-- G e>+++ h- r x+

Athalon

  • Käyttäjä
  • Viestejä: 8
    • Profiili
Re: HTML tutoriaali
« Vastaus #10 : 09.12.06 - klo:18.47 »
Onko HTML:n kanssa työskennellessä väliä minkä käyttöliittymän omistaa jos vaan vetää gedit/notepadilla. :O
Kirjattu

raimo

  • Käyttäjä
  • Viestejä: 4269
  • openSUSE Tumbleweed
    • Profiili
Re: HTML tutoriaali
« Vastaus #11 : 09.12.06 - klo:19.10 »
Lainaus käyttäjältä: athalon - 09.12.06 - klo:18.47
Onko HTML:n kanssa työskennellessä väliä minkä käyttöliittymän omistaa jos vaan vetää gedit/notepadilla. :O

Eipä ole mitään väliä millä koodin kirjoittaa, mutta kunnollinen työkalu helpottaa kummasti.
Gedit on kohtuullinen itseasiassa. Notepad ei todellakaan ole, tosin harvempi sitä Linuxissa käyttääkään. :)

Bluefish Gnomelle ja Quanta+ KDE:lle. Molemmat löytyvät eiku: Bluefish löytyy Ubuntun universe-pakettivarastosta, ja Quanta on ihan peruskama-varastossa.

WYSIWYGkiä kaipaavalle on sitten NVU, ja miksipä ei sillä voi myös käsin kirjoittaa.
(hassua että NVU:ta ei ole vielä Feistyn varastoissa, olisin huvikseni kokeillut sitä tänään).
« Viimeksi muokattu: 09.12.06 - klo:19.14 kirjoittanut raimo »
Kirjattu
Tietä käyden tien on vanki. Vapaa on vain umpihanki.
Aaro Hellaakoski

Athalon

  • Käyttäjä
  • Viestejä: 8
    • Profiili
Re: HTML tutoriaali
« Vastaus #12 : 09.12.06 - klo:19.49 »
Nyt aloin sitten opettelemaan HTML:n käyttöä ja notepadilla aloin kirjoittelemaan, kun tällä hetkellä tässä on käyttiksenä windows.
Sen takia sen Notepadin heitin. Miten ne "kunnon" ohjelmat sitten helpottaa HTML:n kirjoittamista tavallisen tekstieditorin sijasta?

Kiitos Myrtille tuosta loistavasta linkistä: www.w3schools.com
Todella hyvin neuvotaan aloittamisessa. :)
Kirjattu

hopeatikari

  • Käyttäjä
  • Viestejä: 42
    • Profiili
Re: HTML tutoriaali
« Vastaus #13 : 09.12.06 - klo:21.02 »
Varmaan pää asiallinen apu on koodin värjäys, eli eri koodin/tekstin osat värjätään eriväreillä. Se helpottaa koodin jäsentämistä. Myös muita koodin jäsennys apuja niissä yleensä on. Joissakin on sisäinen tagi ohje, josta voi tarkistaa käytettävät tagit ja niiden optiot. Tärkein kuitenkin on mielestäni tuo värjäys. Lisäksi sitten voi olla kaikkea sisäisestä esikatselusta ftp clientteihin ja erinlaisiin projekti manageria härpäkkeisiin.
Kirjattu

Juha127

  • Käyttäjä
  • Viestejä: 132
    • Profiili
    • Gimp Suomi
Re: HTML tutoriaali
« Vastaus #14 : 09.12.06 - klo:23.50 »
Kun kerran käytät windowsia, niin voisin ehdottaa käytettäväksi Notepad++:aa.

Itse olen Kubuntu miehiä, niin kirjoittelen itse Kate:lla.

Kirjattu

Myrtti

  • Käyttäjä
  • Viestejä: 112
    • Profiili
    • http://myrtti.fi
Re: HTML tutoriaali
« Vastaus #15 : 10.12.06 - klo:09.44 »
Lainaus käyttäjältä: Juha127 - 09.12.06 - klo:23.50
Kun kerran käytät windowsia, niin voisin ehdottaa käytettäväksi Notepad++:aa.
Tähän on kyllä semiammattilaisena todeta, että siinä vaiheessa kun aikoinaan löysin HTML-kitin Windowsille, jäin siihen koukkuun. Yksi niistä ohjelmista, joita oikeasti kaipaan Linuxiin. Nyt olen yrittänyt totuttautua Screemin käyttöön, mutta hirvittävän paljon kamaa on sellaista joita Screemiin ei suoraan saa, ja se kenkuttaa.
Kirjattu
GCS/ED/FA/H/P/S/L/O d- s:+ a33 C++ UL+ P+ L+++ E W+++ N+ o K+ w+(---) !O M?>+ V? PS++>$ PE>$ Y+ PGP- t+ 5+++ X+ R tv- b+++ DI++++ D-- G e>+++ h- r x+

Athalon

  • Käyttäjä
  • Viestejä: 8
    • Profiili
Re: HTML tutoriaali
« Vastaus #16 : 10.12.06 - klo:11.46 »
Eikös tuota HTML-kittiä sitten saa winen kautta pelaamaan?
Kirjattu

Myrtti

  • Käyttäjä
  • Viestejä: 112
    • Profiili
    • http://myrtti.fi
Re: HTML tutoriaali
« Vastaus #17 : 10.12.06 - klo:12.26 »
voisi kai saadakin, viimeksi kun tarkistin tuolta sivulta niin kokemukset olivat kohtuuhuonoja käsittääkseni, enkä nyt muutenkaan tykkää winestä.
Kirjattu
GCS/ED/FA/H/P/S/L/O d- s:+ a33 C++ UL+ P+ L+++ E W+++ N+ o K+ w+(---) !O M?>+ V? PS++>$ PE>$ Y+ PGP- t+ 5+++ X+ R tv- b+++ DI++++ D-- G e>+++ h- r x+

ilkant

  • Käyttäjä
  • Viestejä: 1381
  • Kubuntu
    • Profiili
Re: HTML tutoriaali
« Vastaus #18 : 11.12.06 - klo:02.36 »
Lainaus käyttäjältä: Myrtti - 10.12.06 - klo:09.44
HTML-kitin Windowsille, jäin siihen koukkuun. Yksi niistä ohjelmista, joita oikeasti kaipaan Linuxiin.

Oletko kokeillut ikinä KDE:n Quanta Plussaa? Minusta se on aika hyvä. Mitä HTML-kitissä on sellaista, mitä ei ole linuxissa? Koodataan se nopeasti...  ;D
Kirjattu
Sivuja: [1]   Siirry ylös
« edellinen seuraava »