Opi koodaamaan

Jep, tässä ovat ne ohjeet, joilla olen ennen opettanut maksusta teitä koodaamaan. Nykyään howrsessa ei saa tehdä mitään maksusta (paitsi jotakin itse howrsen sisäisiä juttuja; hevosten ostoa yms), joten mitä minä näitä ohjeita alan panttaamaan. Toki saa pistää jotakin kiitoksia, mutta nyt se on vapaaehtoista.

Lue ohjeet tarkoin läpi. Kokeile erilaisia säätöjä, koodauksen oppii vain kokeilemalla ja ihmettelemällä. Minulla ei ole aikaa erikseen kertoa miksi jokin on mennyt pieleen, olen pahoillani.


Jos löydät ohjeista jotakin vikaa, ilmoitathan? Lisään tänne sitten lisää ohjeita, kunhan kerkeän:

OHJEET:

<div style="background-image: url(TÄHÄN TULEE KUVAN LINKKI); width: 555px; height: 660px; font-size: 12px; font-family: tahoma, geneva, 'sans serif';">

Tuo on se koodi, jolla saa sen kuvan siihen taustaksi. Pistät sen kuvan linkin osoittamaani paikkaan, eli ''TÄHÄN TULEE KUVAN LINKKI''. Ota huomioon, että jos poistat sulut, koodi ei toimi. Eli jätä sulut.
Jos sinulla ei ole ulkoasupohjaa, voit käyttää tätä:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRGyhp-0cM99UAUvqgGCu9pVaZMiBbe8yTGUq5rdW88lioqfz_mD9_PIAqI6L6nT_lzcipYbgZC4BtrDTiBXh-P_N-46eGANRuspivv-JHlwB5J2OaLRqjs5Cc44hsIbhAyoX-hdpBqEc/s1600/4.png

Oletko hyvä enkussa?

width = leveys, se, miten leveä se kuva on, tällä siis saa rajattua kuvan kapeammaksi, tai sitten leveämmäksi. (kuvan suhteet pysyvät samana.

height = korkeus, näyttää kuinka paljon kuvan korkeutta näkyy

tuo px tuossa on se, mitä pitää katsoa. Tarkoittaa pikseliä, että montako pikseliä leveä tai korkea, riippuen siitä ''käskystä. mitä isompi luku siinä px:n edellä on, niin sitä leveämpi/korkeampi/ tai fonteissa isompi on se määrä..

Kysyttävää? Jatkuu tekstien koodaamisella:

<div style="margin-top: 200px; width: 150px; float: left; height: 135px; margin-left: 125px; overflow: auto;">
TEKSTI TÄHÄN
</div>

Tuossa on tuo.
Margin-top = kuinka korkealta alkaa se tekstiloota

width ja height samat kuin aikaisemmassa (siis siinä toisessa koodissa) Eli näillä määritellään korkeus ja leveys tekstilootalle. Kannattaa teksti loota pistää täyteen tekstiä, niin on helpompi koodata.

margin-left = kuinka kaukana on tekstilaatikon reuna reunasta

Kannattaa sitten aika paljon pistää tekstiä siihen lootaan, niin näet sen rajat Esim
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text ...
jne

Sitten koodatessa kannattaa ravata normaali- ja html tilan välillä, niin ei tarvitse erikseen aina tallennella välissä :) Mutta ota huomioon, että jos pistät ensin vain tuon kuvakoodin, ja käyt vaikka katsomassa sitä normaalissa tilassa, howrse lisää sen perään käskyn </div>. Joten, kun pistät laatikkokoodin, katso, ettei kuvakoodin ja laatikkokoodin välissä ole </div>, muuten laatikko menee kuvan alle, eikä mene sen päälle.
 Jos haluat enemmänkin laatikoita, katso ettei niiden väliin tule kahta </div>. Yksi pitää olla tai se uusi laatikko menee edellisen sisälle.

Vinkkinä, että kannattaa pistää koodien väliin väliä. SIlloin sinun on helpompi hahmottaa, missä mikäkin koodi menee. Esim.

koodi 1

koodi 2

koodi 3

jne.

Ja hei, jos tulee kysyttävää, kysy kommentissa :) Eiköhän joku muu sitten kerkeä kirjoittamaan apua, jos minä en kerkeä ^^ 

11 kommenttia:

  1. Millä ohjelmalla saan tietää kuvan linkin/osoitteen yms, olen nimittäin unohtanut mitä olen aijemmin käyttänyt (parin vuoden tauko) ja en löydö sitä mistään :(

    VastaaPoista
    Vastaukset
    1. Moikka! En ole varma mitä tarkoitit tuolla, mutta kuva täytyy ensin ladata nettiin, ja sitä kautta voit vaikka avata sen uuteen välilehteen, jonka kautta voit sitten kopioida sen osoitteen (:
      - omena123 (aka omppu~)

      Poista
  2. Voiko noihin tekstilootien koodeihin muuttamaan tuon kirjaintyylin?

    VastaaPoista
    Vastaukset
    1. Katso kohta font-family ja kirjoita haluamasi fontin nimi.

      Howrsessa Andr0meda

      Poista
  3. http://htmledit.squarefree.com/ on hyvä ulkoasun koodaukseen, ei tarvitse erikseen ravata edes takaisin html-tilan ja normaalin tilan välillä, kun tuolla näkee mitä tapahtuu kun muuttaa jotakin kohtaa koodissa.

    VastaaPoista
    Vastaukset
    1. Tuolla siis näkee ulkoasun sellaisena kuin se näkyy esittelyssä (alempi laatikko) ja samalla voi muokata koodia joten reaaliaikaisesti näkee miten esimerkiksi laatikko siirtyy.

      Lisäisin muuten tuohon ohjeeseen float-kohdan merkityksen (ja sen että margin-left tai margin-right riippuu myös siitä). Esim:
      float-arvolla valitset laatikon sijainnin. Voit laittaa kohtaan arvoksi left (eli vasen) tai right (eli oikea). Jos laitat arvoksi float: left; muista laittaa myös margin-left. Jos arvo on float: right; valitse margin-right. Tämä määrittelee sen kummasta reunasta laatikko alkaa liikkua haluamasi pikselimäärän keskelle päin.

      Howrsessa Pehmolammas

      Poista
  4. Moikka! Mulla olis yks okjelma. Muuten toi koodaus sujuu ihan mutkitta mutta kun aina hyvä pohjakuva on liian iso :/ Tietäisikkö jotain ohjelmaa jolla voi pienentää kuvan kokoa että sopisi esittelyyn?
    -hevosesi

    VastaaPoista
    Vastaukset
    1. picmonkey ja befunky ainakin toimivat hyvin

      Poista
    2. GIMP on ilmainen, laillinen ja hyvä.:) Se pitää ladata koneelle ja käyttö voi vaatia vähän opettelemista, mutta se on ihan oikea kuvankäsittelyohjelma.

      Poista
  5. Tietääkö joku mistä johtuu, että saan kyllä koodattua ja se näyttää hyvältä profiilissa. Kuitenkin sitten kun se on jonkin aikaa ollut profiilissa, kuva häviää ja vain teksti jää jäljelle.

    VastaaPoista
    Vastaukset
    1. Oletan, että vika on sen palvelun säännöissä, minne olet kuvan ladannut. Eli siellä on rajoitukset miten paljon mitäkin kuvaa voi ladata netissä. Kun jokainen katselukerta profiilissasi merkitsee, että kuva latautuu. Ainakin Photobucketin kanssa olen nähnyt tätä tapahtuvan, ja silloin tulee kuvan paikalle "exceeded bandwidth limit, upgrade your account, jne." Mikä tarkoittaa, että pitäisi hankkia maksullinen tili, jos haluaa jatkaa kuvan jakamista.

      Jos et ole tallentanut kuvaa omalle koneellesi ja ladannut omaan tilaasi, vaan käyttänyt sitä jonkun toisen tilasta suoraan, se toinen henkilö on voinut ottaa kuvan pois tai muuttaa sen nimen.

      Poista

Pidäthän kommenttisi asiallisena, muutoin se poistetaan. Ilmoita myös nimimerkkisi, millä pelaat Howrsessa.