B7 – Kuviteltu nettisivu
Saavut nettisivulleni joka käsittelee UKUV0118-kurssia.
Keskellä ylhäällä sivua on suurikokoinen värikäs otsikko banneri, joka on
piirretty IPadilla, ja siinä lukee kurssin nimi, koodi ja Meerin Blogi.
Bannerin alapuolella kerrotaan sama asia vielä ihan tekstinä. Tämän otsikon alla
on tekstit H1-H6 ja Lopputyö, jota klikkailemalla avautuu uusia sivuja.
Varsinainen blogin runko on H1-H6 ja Lopputyö- tekstien
alapuolella. Se jakaantuu kolmeen sarakkeeseen, joista keskimmäinen on kaikkein
levein. Vasemman puoleisessa sarakkeessa ihan alhaalta löytyy pieni otsikko
Blogiarkisto, josta voi selata blogin tuotoksia taaksepäin aikajanalla. Keskimmäinen
sarake on blogin ”pihvi” eli teksti ja kuvatila, josta löytyvät minun
harjoitustyöt tälle kurssille. Etusivulla ei ole vielä harjoitustöitä tai
kuvia, vain pelkkä teksti jossa toivotellaan tervetulleeksi upeaan
blogiini. Oikean puoleinen sarake on
värikäs, ja siinä on linkkejä muille sivuilleni. Linkit ylhäältä alas: ensimmäisenä
on teksti ja kuva, jotka vievät minun kuvataideopettajan portfolioon, joka
tehtiin viime keväänä. Seuraavana alhaalla on teksti ja kuvat, jotka vievät
minun kuvitusporfolioon, jonka olen laatinut työnhakuja varten. Sitä pitäisikin
päivittää… Lopuksi on vielä alimpana Google profiilini, jossa on pikkuinen
kuvake ja etunimeni, ja pikkuinen statement-teksti kuvakkeen oikealla puolella.
Sellainen on blogini etusivu.
B8 – HTML järjestääHarjoitustyö
Huh. Olen kirjoitellut blogeja Bloggerissa säännöllisen epäsäännöllisesti, ja olen aina ollut vähän tyytymätön siihen, miltä sivu näyttää. Code.orgissa pääsi ihan alkeista koodaamaan nettisivuja, ja tämä oli todella opettavaista, koukuttavaa ja hyödyllistä!!
Muistisääntöjä itselle omista koodailukokeiluista Code.orgissa opitun mukaan:
<body> <body> Noiden kahden väliin kaikki sivun roina!
Perusmuotoilut pystyy tekemään otsikkotyyleillä <h1> TÄHÄN OTSIKKO </h1>
Kappaleiden teksti kirjoitetaan taas näin: <p> Plaah, plaah, plääh. </p>
Kuvia tuodaan tällä <img src="Sieppaa.PNG alt="Meeri teki kuvan" /> HUOM! Kuvatiedoston nimi pitää olla täysin oikein linkattu, muuten se ei näy!
Luetteloita tehdään komennoilla <ol> </ol> numeroitu luettelo, jokaisen luetteloon tulevan asia merkitään näin <li> JAUHOA </li>. Bulletin pointsilla tehdyt listat saa aikaan, kun käytetään komentoa <ul> </ul>. Listattavat asiat samaan tyyliin <li> ja </li> merkkien väliin.
Tässä kuvakaappaus index.html-sivustani:
B9 – CSS muotoilee
Koska nettisivut ilman muotoilua näyttävät jokseenkin valjulta ja kaurismäkeläiseltä, muotoilut sille tarjoaa CSS-"tiedosto" jossa määritellään miltä h1 otsikko näyttää. Eli muotoilut sun muut. Jotta html ymmärtää tuota muotoilutiedostoa, se pitää linkittää tuonne index.html:ään komentojen <head> ja </head> väliin.
<link rel="stylesheet" href="new-1.css">
CSS:ssä minulle mullistavinta oli se, että sillä pystyy säätämään vaikka mitä ominaisuuksia kuvista! Esim. Bloggerissa kuvien kokoa on aika vaikea säätää, mutta jos osaisin tehdä CSS:n joka määrittelee että kaikkien kuvien leveys on 400 px, blogi olisi kovin yhtenäinen. Tämä edellyttää, että lisäämäni kuvat olisivat aina leveydeltään vähintään 400 px, jotta laatu pysyisi hyvänä. Kokeilin läpällä tätä CSS:ää bloggeriin, mutta se aiheutti sen, että myös kaikki blogin sivupalkkien ja bannerien koko skaalautui - tämä oli harmillista, enkä voinut siten käyttää tätä CSS:ää blogissani.
Tässä kuvakaappaus CSS:stä jonka tein Code.orgin harjoituksessa:
Varsinainen ongelma siis mikä minulla oli, että miten luodaan poikkeus sääntöön? Sehän onnistuu tietenkin seuraavilla käskyillä.
Erottelen index.html:ssä ne, jotka haluan olevan erilaiset "poikkeukset" siitä normista muotoilusta, mitä CSS määrittää.
<!-- Erilainen-->
Erottelen index.html:ssä ne, jotka haluan olevan erilaiset "poikkeukset" siitä normista muotoilusta, mitä CSS määrittää.
<!-- Erilainen-->
Teen CSS:ään oman muotoilun:
.erilainen {
color: rgb(195,230,255);
font-family: sans-serif
}
Viittaan html:ssä niihin asioihin, joihin haluan .erilainen - muotuilun seuraavasti:
<h2 class="erilainen">Winter</h2>
Tämän seurauksena saisin tehtyä poikkeavia muotoiluja, esim. CSS:n, joka antaisi bannerin ja muiden elementtien olla sivuilla ennallaan, mutta muuttaisi kaikki kuvat vaikka ympyrän muotoisiksi!
Tässä testasin pyöristystä:
Tässä kuvan leveys oli max 400 px -> vaikutti myös banneriin ja kaikkiin pikkukuvakkeisiin. Bloggerin CSS oli satoja rivejä pitkä, enkä bongannut sieltä sitten oikeita kohtia, joten en jaksanut alkaa säätämään koodia niin, että bloggausten kuvat olisivat aina saman levyisiä.
Code.orgille suuret kiitokset hienosta nettikurssista! Tein lopulta kurssista oppitunnit 3-14. Kivoja tehtäviä oli! Nopeasti vilkaistuna myös Khan Academyn tehtävät vaikuttivat kivoilta ja järkeen käyviltä.
Mukava huomio Code.orgissa oli se, että siinä oli tehtäviä, jossa piti korjata olevaa koodia - näin oppi löytämään virheitä, ja huomaamaan sen että koodi pitää olla jossain kohdissa täysin oikein, jotta se toimii. HTML kuitenkin on sellainen systeemi, että se voi olla myös vähän "sinne päin" jotta se toimii. Sekin on hyvä asia. Code.orgin tehtävistä vain 1 jäi pahasti hampaankoloon, koska en ymmärtänyt logiikkaa, millä sienitehtävässä tekemäni bulletin-merkintä olikin erilainen kuin kaikki muut. Tätä en saanut ratkottua ja jää mysteeriksi.
Ei kommentteja:
Lähetä kommentti
Huomaa: vain tämän blogin jäsen voi lisätä kommentin.