Kadonneen koodin jäljillä

Kadonneen koodin jäljillä

Tämä postaus on kirjoitettu jo html:ää käyttäen!

Olen saanut valtavasti kannustusta ja tsemppausta tutuilta ja ventovierailta. Hirmukannustavaa! Olen tosi kiitollinen! Olen myös positiivisesti yllättynyt ystävieni pedagogisista taidoista, he ovat juurta jaksaen ja rautalangasta vääntäen kertoneet, miten homma toimii. Suosittelen kysymään apua rohkeasti, jokainen tuntee varmasti jonkun, joka osaa koodata! Ja jos kaikki ei mene ihan niinkuin Strömsössä, voi hakea inspiraatiota ja saada sparrausta tästä biisistä

Kyllä, koodaaminen on vielä loogisempaa kuin saksa!

Olen entistä ihastuneempi koodaamiseen – kävi nimittäin ilmi, että koodaaminen on loogisempaa kuin saksan kieli! On nimittäin olemassa tarkat standardit, miten hommaa tulisi tehdä. Joskus jos tekee standardeista poiketen, saattaa se toimia ja näyttää oikealta. Tuli mieleen kielet: ymmärretyksi tulee, vaikka puhuisi sinne päin, mutta on olemassa kielioppi, joka antaa raamit kielelle.

Opinto-ohjelmassa webbisivujen peruspilarit ja logiikkaa

Kaaos päässäni on jäsentynyt ja opinto-ohjelma on kirkastunut. Näillä liikkeelle! Aloitan opettelemalla nettisivuissa ja arjessa hyödyllisistä: HTML + CSS + Javascript. Logiikkaa meinaan harjoitella Scratchilla, jolla sainkin jo ensimmisen projektini (ikilikkuuvan limevihreän pallon) jo valmiiksi. Helmi homma!

Mihin sitä HTML:ää ja CSS:ää oikein tarvitaan?

Ystäväni Lauri summasi toiminnot selkeästi:

  • HTML:llä luodaan sivujen rakenne, eli erilaisia teksti-, kuva-, linkki- ja muita sisältöelementtejä. Esim. <p> Tekstiä </p> tarkoittaa tekstikappaletta, jonka sisältönä on ”Tekstiä” jne.
  • CSS sen sijaan on kieli, jolla tehdään sivun ulkoasu, eli se, minkä värinen kukin elementti on, missä se sijaitsee sivulla, minkä kokoista teksti on ja mitä fonttia käytetään. Esim. p { font-size: 12px; color: #000; } tarkoittaa, että kaikkien tekstikappaleiden (<p></p>) sisältö on tekstikokoa 12px ja väriltään mustaa.
  • Javascriptillä tehdään sitten toiminnallisuuksia nettisivuille.

HTML:än jalanjäljillä

HUOM! Jos haluaa blogiin kirjoittaa näitä HTML-merkintöjä ilman että postaus muuttuu koodin mukaiseksi (esim <strong> pulleaksi tekstiksi), täytyy koodin ympärille laittaa väkäset kirjoittamalla nämä kirjainyhdistelmät putkeen väksten tilalle: ”& l t ;” ja ”& g t ;” muuten koodi tekee taikojaan ja muuttuu määrätyn laiseksi. Näppärä tieto, kiitos Jannelle!

Aloittelijalle kaikki on hepreaa, joten ihmettelin, minne sitä koodia oikein kirjoitetaan. Opin, ettei mitään erikoista ohjelmaa tarvita alkuun pääsemiseksi! Windows-koneella voit aloittaa vaikka ohjelmalla nimeltä Notepad++ (ilmainen, lataa netistä). Sillä voi luoda suoraan .html-päätteisen tiedoston. Näppärää oli myös avata tämä tallentamani tiedosto nettiselaimessa, jolloin voin havainnoida, yrittää ja erehtyä, miten kirjoittamani väkäset oikein käyttäytyvät :)

Tässä lyhyesti, mitä olen oppinut HTML:stä sitten sunnuntain:

  • Jos haluaa nettisivulta kopioida koodin (on vaikkapa laiska kirjoittamaan tai ei muista miten alkaa), voi painaa ”crtl + u”, jolloin näkee kaiken, mitä sivu on syönyt. Näppärä kikka!
  • Kaikkea ei tarvitse muistaa ja jossei ole kirjautuneena codeacademyyn niin tällä sivustolla löytyy kaikki oleellinen: http://www.w3schools.com/html/default.asp
  • Elementtejä, joita kokeilin jo tehdä:
    <br> tekee rivin vaihdon (joskus vit haluta rivittää tekstin käsin)
    <p> tekee tekstikappaleen
    <strong>korostaa tekstiä HUOM! Ystäväni Markus kertoi, että <strong> tulisi käyttää <span> sijaan, jos haluaa, että korostettu tieto välittyy myös kuuroille nettisivujen lukijoille. Aika hieno ja tärkeä havainto! Mielenkiintoisia detaljeja koko koodimaailma täynnä! :)
    <div> oli elementti, joka ennakoi muuta sisältöä. Tätä piti käyttää esimerkiksi kun kerroin .html-tiedostolle, missä ”asui” .css-tiedosto, jota haluaisin nettisivun käyttävän.
    <link> vei tähän haluttuun .css tiedostoon ja eroaa siis seuraavasta
    <a> vie haluttuun linkkiin (normaaliin tyyliin, linkki kotisivuille tms)
    <img> tuo kuvat
    <ul> tekee listan
    <li> tekee yhden rivin listaan
    </strong> päättää pullean tekstin (muista aina sulkea avaamasi tagi!)

CSS on HTML:n kaveri

Onnistuin näillä eväillä tekemään tekstiä, jossa oli pieniä muotoiluja. Mietin silti, mistä saan värit vaihdettua! Kun olin kirjoitellut html-dokkariin, olikin aika tutustua CSS:ään, joka siis myös on oma tiedostotyyppinsä. HTML:stä poiketen CSS:ssä kirjoitetaan halutut elementit aaltosulkujen { sisään. Tässäkin täytyi muuten olla avaava ja sulkeva. CSS:ään ei päästy niin syvälle vielä, mutta kaikki oli tässäkin erittäin loogista ja standardin mukaista! Oleellisinta oli ehkä tajuta, että pikkujutuilla voi määritellä tosi paljon, esim että kaikki kappaleet isoll jne.

Next steps eli seuraavia askeleita

Aion jatkaa harjoittelua Codeacademyssä! Lisäksi Scratchin parissa työskentely jatkuu. Aion myös selvittää, miten GitHub toimii, sillä se on käsitääkseni kuin GoogleDocs mutta koodille! Siellä pääsisin myös töihini käsiksi milloin vain missä vain ja versionhallinta helpottuisi. Jännää!

Yritän saada julkaistua Scratch-projektini ja miksei .html ja .css tiedostojakin. Sitä odotellessa kuulisin mielelläni kommentteja ja palautetta, ideoita ja vinkkejä! Tiedonjano on suuri! :) Kuvassa hymyilee ystäväni Markus, joka iltateellä kävi selventämässä HTML:n ja CSS:n yhteyttä. Kiitos!

20131107-215620.jpg

About these ads

Yksi vastaus artikkeliin ”Kadonneen koodin jäljillä

  1. Kuurotkin osaavat lukea, ja ymmärtävät boldatun tekstin merkityksen kontekstissa. Sokeiden käyttämät puheselaimet taas eivät ymmärrä kontekstia ja siksi eivät tiedä miten korostaa boldattua sanaa mutta osaavat painottaa strong tagiä.
    Et ollut ensimmäinen etkä viimeinen joka suunnittelee kuuroille omia sivuja. Se on jopa häkellyttävän yleistä :)

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out / Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out / Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out / Muuta )

Google+ photo

Olet kommentoimassa Google+ -tilin nimissä. Log Out / Muuta )

Muodostetaan yhteyttä palveluun %s