Tutoriaalit

• GIMP (versio 2.4.6)
Animaation teko

• MS Paint
Miten Neulanen tekee linet MS Paintilla

HTML

HUOM, joistain koodeista löytyy ylimääräisiä *-merkkejä, jotka täytyy poistaa koodista ennen sen käyttöön ottamista.

Rivin vaihto:
<br> Kappaleen vaihto:
<p> Vierivä teksti:
<marquee scrollamount="tekstin vierimis nopeus" direction="vierimis suunta (left/right)"> Teksti</marquee>

Kursivoitu teksti:
<i>Teksti</i>
~~Yliviivattu~~ teksti:
<s>Teksti</s> Alleviivattu teksti:
<u>Teksti</u>

Lihavoitu teksti:
<b>Teksti</b> Tekstin keskitys:
<center>Teksti</center> Fontin määritys:
<font face="tekstin tyyli" size="tekstin koko" color="tekstin väri"></font>

Kuva:
<IMG src="kuva.jpg"> Linkki:
<A Href="tiedosto, johon linkki aukeaa" target="paikka, johon ikkuna aukeaa">Linkki</A> Kuva linkki:
<A Href="tiedosto, johon linkki aukeaa" target="paikka, johon ikkuna aukeaa"><IMG src="kuva.jpg"></A>

Sähköposti linkki:
<A Href="mailto:sähköposti@osoite.com">Linkki</A> Tekstikenttä:
<textarea* rows="rivejä" cols="pituutta">Teksti</textarea*> Tekstilaatikko:
<input type="text" name="Nimi">

Radiopainike:
<input type="radio" name="valinta" value="monesko valinta"> Rastituspainike:
<input type="checkbox" name="valinta 1">
<select name="valinta"> <option>Ensimmäinen <option>Toinen <option>Kolmas <option>Neljäs </select>

<input type="submit" value="Lähetä">
<input type="reset" value="Tyhjennä">

CSS

CSSn (Cascading Style Sheet) avulla voit muotoilla lähes kaikkea sivuillasi. Mm. tekstiä, taustan määrityksiä ja muuta sisältöön liittyvää. Aina on suositeltavampaa käyttää CSS koodeja, HTML-koodien sijaan, vaikka HTML:llä pystyisi myös samat asiat tekemään.

• Sisäinen CSS
Sisäinen CSS-koodi sijoitetaan head-tagien väliin seuraavasti:
Muut head osioon tulvat sisällöt (mm.title) <style type="text/css"> </style>
Tällöin jokaiseen tiedostoon pitää erikseen kirjoittaa CSS-koodi. Alla oleva ulkoinen CSS on sitten kätevämpi, mikäli tahdot saman CSS-pätkän useammille sivuille.

• Ulkoinen CSS
Ulkoinen CSS-tiedosto on tiedosto, jonka tiedostopäätteenä toimii .css. Ulkoinen CSS-tiedsto liitetään sivulle seuraavalla link-elementillä:
<link rel="stylesheet" href="ulkoinen CSS-tiedosto" type="text/css">
Esim. Jos ulkoinen CSS-tiedosto olisi nimeltään tyyli.css, tulisi ulkoinen CSS-tiedosto kohtaan laittaa teksti tyyli.css.

Ulkoisen CSS-tiedoston sisältö kootaan näin:
<style type="text/css">  </style>
Näin on paljon kätevämpi, mikäli sama CSS koodi on jokaisella sivulla. Ei tarvitse kaikkiin muutella sitä erikseen, vaan kun muokkaa ainoastaan tyyli.css tiedostoa, muokkautuu sama kaikille sivuille.

• CSS-määrityksiä
Sivun tausta
background-color: #väri;
• Taustakuvan väri
background-image: url('http://taustakuvan osoite');
• Taustakuva
background-position: sijainti;
• Taustakuvan sijainti, esim. top, left, center tai pikseleinä, 10 100px
background-repeat: toisto;
• Taustakuvan toisto, esim repet-y (taustakuva toistuu pystysuunnassa), repet-x (taustakuva toistuu vaakasuunnassa) tai no-repeat (taustakuvaa ei toisteta)

Fonttien tyylejä
font-weight: bold;
• lihavointi
font-style: italic;
• kursivoitu
text-decoration: underline;
• alleviivattu
text-decoration: line-trough;
• yliviivattu

Kursori
cursor: crosshair;
• kursorina risti
cursor: n-resize;
• kursorina nuoli ylöspäin
cursor: s-resize;
• kursorina nuoli alaspäin
cursor: w-resize;
• kursorina nuoli vasemmalle
cursor: default;
• tavallinen nuoli kursorina