HTML-koodit ja kuvanmuokkaus part. 1

mulle on tullu niin helvetisti kysymyksiä HTML-koodia ja kuvanmuokkausta koskien, joten nyt alotan tekee pienin väliajoin tämmösiä opastuspostauksia. Ekaks tulee html sönkkäys ja sit pari niksii kuvanmuokkauksee, laitan näihi postauksii jonkinnökösen linkin tohon sivupalkkiin että nää on sitte helppo löytää :--) en siis suinkaa oo mikää ekspertti ja suurin osa mun ''taidoista'' perustuu sille et ku olin kerran kipeenä viikon nii mä yksinkertasesti perehdyin kokeilemalla tohon koodi juttuun, oon oppinu nää kaikki omasta takaa ja en osaa sanoo et onks nää mitenkää teknisesti oikee tai mitää muuta shaibaa mut ite oon ainaki pärjänny. Kertokaa ihmees jos musta on jotai apua.

HTML-koodit
perusasioita

1. Tää on aika näppärä neuvo: testaamalla oppii. Ja mitä enemmän muokkaa htmlää, sitä enemmän siitä alkaa jotain perusjuttuja tajuamaan.

2. On kans ihan kätevää luoda testausblogi sen oikeen blogin vierelle, että sinne voi ensin testaa mitä tekee ja sen jälkeen siirtää toimivat jutut copypastella oikeeseen paikkaan omaan blogiin ja sumplia lisää jos tarve. Jos tekee testiblogin, se alkumalli on aika näppärää olla samanlainen kuin oman blogin malli.

3. Ja jos haluut hyötyy jotenki näistä neuvoista, nii suosittelen lämpimästi että heität hiiteen sen ulkoasun suunnittelutyökalun, koska se vaan on niin tylsä ja et saa muokattua sillä jos muokkaat html-koodia ja toisippäi: html-koodin muokkaus on vaikeeta jos sulla on valmis ulkoasu sieltä valittuna.

pari nettisivua jotka on tosi käteviä;
Colorpicker - hirmu kätevä tapa selvittää värejen html:ät
Photobucket / Flickr - näistä saat kuvas html:änä.

LAATIKOT:
Margin - elementin ulkopuolella olevan "näkymätön" alue.
- pystytään määrittämään pikseleinä, prosentteina ja automaattisesti (px, %, auto)
- pystytään käyttämään top, bottom, left, right yhteydessä (esim margin-right:)
Border - elementin näkyvä reunus.
- pystytään määrittämään leveys, väri ja tyyli
• solid - normaali viiva
• dotted - pisteitä
• dashed - katkoviiva
• double - kaksi viivaa/"kehykset"
• pystytään käyttämään top, bottom, left, right yhteydessä (esim border-left-style:)
Padding - elementin ja reunuksen välinen alue, jonka väri määrittyy elementin värin mukaan.
yhtäläinen käyttö marginin kanssa
Element/content - Kohta jossa teksti, kuvat, yms sijaitsevat.

TEKSTI:
Color - määrittää tekstin värin.
- voidaan käyttää värien nimiä, rgb määreitä ja heksadesimaaliarvoja (red, (245,0,0) tai #ffffff)
Text-align - määrittää tekstin tasauksen.
• center - teksti on keskelle tasattu
• right/left - oikealle/vasemmalle tasattu
• justify - tekstin jokaisella rivillä on sama mitta, ja jokainen rivi venytetään sen mukaan
Text-decoration - määrittää alle- ja yliviivauksen, sekä poistaa määreet
• none - ei alleviivausta
• underline - alleviivaus
• overline - viiva tekstin yläpuolella
• line-through - yliviivaus
• blink - teksti vilkkuu
Text-transform - tekstin muunnos
• uppercase - TEKSTI ON VAIN ISOILLA KIRJAIMILLA
• lowercase - teksti on vain pienillä kirjaimilla
• capitalize - Tekstin Jokaisen Sanan Ensimmäinen Kirjain On Isolla Kirjaimella
.
FONTTI:
Font-family - määrittää fontin ja mahdollisesti sen sukulaisfontit tekstille
Font-style - saadaan kursiivia
• normal - ei mitään
• italic - kursiivi
Font-size - määritetään fontin koko
- Voidaan käyttää pikseleitä tai em. 1em = 16px, 0.5em = 8px yms. Myös prosentteja voi käyttää.
Font-weight - määritetään onko teksti boldattua vai ei
• normal - ei mitään
• bold - boldattu

TÄRKEÄÄ:
Muista aina minkä tahansa "määreen" yms. (esim font-color: red;) ; -merkki ! Muuten ei toimi!
HTMLssä löytyy { &} -merkkejä, älkää poistelko niitä !

nää määreet oon tarkastanu netistä, koska nää on pakko olla tiedos muuten ei oikee homma toimi. Ens kerralla autan oottaa näitä määreitä käyttöön.

kuvanmuokkaus
aloitus

1. muokkaan paljo erilailla ja monilla eri ohjelmilla, ladatuilla ja online ohjelmilla, teen tutoriaaleja eri muokkausohjelmilla muokatuista kuvista, mut ekana tulee pari perusjuttuu jotka teen aina ennen ku alan muokkailemaan.

2. Kannattaa ladata kaikki kuvat Flickrin tai Photobucketin kautta, koska bloggeristahan toi kuvatila jossai vaiheessa loppuu, eikä se muutenkaa oo järin kätevä.

3. kannattaa aina pienentää kuvat sen levysiks ku haluat ne blogii. Ne vie paljo vähemmän tilaa Flickrissä yms. ja niitä on paljo helpompi käsitelläkki jos ne on pienempiä. Koska esim mun järkkärillä tulee normikokosina kuvista heti jotai 2900x1900px (suunnillee) mä pienennän kuvat 640px levysiks aina ja korkeus tulee automaattisesti. Tässä esimerkit  photoscapella (ladattavana netistä) ja picnikillä muokkaamalla.


4. Kannattaa laittaa vähä terävöintiäki lisää jos on pienentäny, ja muutenki, tulee kivan tarkka kuvasta. Ihan hyvän maun rajoissa kuitenki. Tässä taas esimerkit  photoscapella ja picnikillä muokkaamisesta.


nää ei jää siis tähän vaan jatkoa on luvassa ! :----)
 

TANNIFLOATS | Copyright © 2012 | Powered by Blogger