Sisivusto

Html-koodit

(Sivuhuomautus: Huomasitte varmaan, että sivun vierytispalkit ovat punamustia; alempaa saatte koodin siihenkin. Osa esimerkeistä joudutaan lismään tällatavoin, ettei niitä sa suoraan koodin viereen...)

Aluksi haluan huomauttaa, etten ole itsekään mikään HTML-koodien asiantuntija. Halusin vain auttaa niitä joilla on ongelmia koodien kanssa, koska tiedän sen tunteen itsekin. Katsotaan mitä tästä tulee, mutta uskon, että joistakin koodeista on teille paljonkinhyötyä.

Alussa on "perustietoa" ja helpompia/yksinkertaisimpia koodeja, joilla saa sivuille perusulkoasua.

Loppua kohden koodit sitten ovat ennemminkin sellaista "hienostelua" ,eli niillä saatte ulkoasun hohdokkaaksi ja värikkääksi, sekä liikkeellekin erilaisten liikkuvien tekstien avulla.

Useimmiten aloittelioiden on helppo aloittaa valmiista koodeista joita kopioimalla ja tutkimalla on helppo päästä alkuun. Myös muiden sivujen lähdekoodeja (Paina sivulla ollessasi hiren oikeaa näppäintä ja valitse "Näytä lähdekoodi") Laitan koodit niin, että teidän täytyy niitä itsekin tutkiskella, ettekä voi vain kopsata suoraan. Esimerkiksi voin laittaa keskelle koodia tekstin "Väri englanniksi tai koodi" joka merkitsee sitä mitä siinä siis lukee, eli siinä kohdassa kumitatte merkintäni pois ja lisäätte jonkun englanninkielisen vätin, tai värikoodin, jotka löydättekin HEXAKOODIT kohdasta. Näin syntyy erinäköisiä tekstejä samanlaisesta koodista, kuten tuo yllä oleva HTML-KOODIT tekstistä olisi voinut tehdä isomman, punaisen jne... Ja teksti tietenkin erilaiseksi. Tälläinen tapa on yksinkertaisesti järkevintä, ettehän te samaa tekstiä aina varmaan halua? Tässä esimerkki koodista:

<TABLE STYLE="filter:glow(color=väri englanniksi tai koodi, strength=luku 1-10)"><TR><TD><center>teksti</TABLE>

(Koodi on "Varjostettu" teksti, jonka esimerkin voitte käydä katsomassa esim. HMTL-KOODI VÄRIT kohdasta)

Noihin tummennettuihin ja kursivoituihin (jota ei oikein vihreästä tekstistä kylläkään kovin hyvin huomaa... No, yrittäkää itse etsiä kohdat, joita teidän täytyy muuttaa.) kohtiin lisäätte vaihtoehtoisesti sen, minkälaisen tekstin tahdotte. Kumittakaa pois minun merkintäni!!! "Väri englanniksi, tai koodi" kohtaan lisäätte vaikkapa sanan "red" (myös green, blue ja kaikki engalnnin värit käyvät) tai sitten vaikkapa jonkun punaista vastaavan koodin, eli esim: #FF2400. Koodit löydätte html-koodi värit kohdasta. (Tämä koodi tarkoittaa Puna-oranssia.) "Strength" tarkoittaa tekstinne taas kokoa. "Teksti" kohtaan lisäätte haluamanne tekstin, kuten vaikkapa sivunne nimen yms.

Muista että liiat koodit voivat hidastaa sivu latauksia.

Tässä sitten tulee koodeja, ne ovat vihreällä:

Lisää sivullesi kuva:

(URL.in kuvasta saa näkyviin, kun painatte kuvaa oikealla hiiren näppäimellä ja menette ominaisuuksiin.)

Taustakuvan laitto:

Taustavärin laitto:

Linkki

<a href="linkin osoite">linkin nimi</a>

Kuvalinkki

(Jos haluat kuvaasi kehyksen, esim: border=1 tai border=3, ei border=0,)

Lisää suosikkeihin -nappi

Esimerkki nappi ei vie mihinkään, mutta jos haluatte testata käytössä olevaa nappia, kuvagalleria sivulla on sellainen. Se siis lisää sivun, jolla olet, suosikkeihisi.)

Yksinkertaiset koodit:

Jos haluat alleviivatun tekstin kirjoita teksti <u> ja </u> tagien väliin. Tässä tapauksessa "ja" sanasta tulisi alleviivattu.

~~Yliviivattu~~ teksti tagien <s> ja </s> väliin.

Kursivoitu: <i> tähän valiin </i>

Lihavoitu: <b>teksti tähän</b>

Varjostus teksti

Esimerkki

<TABLE STYLE="filter:shadow(color=väri englanniksi tai koodi)"><TR><TD><center>teksti tähän</TABLE>

Teksti taustavärillä:

Esimerkki

<span style=background:väri englanniksi tai koodi>teksti tähän</span>

Oikealle menevä teksti

Esimerkki

<marquee direction="right"> teksti tähän </marquee>

(Vasemmalle menevä teksti onnistuu, kun vaihdat direction:in kohdalle left, direction siis tarkoittaa suuntaa, ja sitä voitte muutta muissakin koodeissa.)

Reunasta reunaan poukkoava teksti

Esimerkki

<marquee behavior= alternate> Teksti tähän </marquee>

Liikuva teksti taustavärillä

Esimerkki

<marquee scrolldelay=1 scrollamount=10 behavior=alternate bgcolor="joku väri englanniksi tai koodi"> Teksti tähän </marquee>

Alas päin menevä teksti

Esimerkki

<marquee direction="down"> <center> teksti tähän </center> </marquee>

-Jos haluat ylös päin menevän tekstin, laita down:in siaan up. MUISTAKA DIRECTION.

Hiiren kohdalla nopeutuva teksti

Esimerkki

<marquee onMouseover="this.scrollAmount=jokin numero" onMouseout="this.scrollAmount=jokin numero">teksti tänne</marquee>

-Jos haluat tekstin nopeutuvan, laita ensimmäiseen "jokin numero" kohtaan suurempi numero, kuin seuraavaan, jos taas tahdot sen hidastuvan, laita pienempi numero ensin. Itse käytin numeroa 90 ensimmäiseen kohtaan, ja numeroa 10 seuraavaan.

Liikkuvaa tekstiä ja värejä yhdessä.

Mitästästäpidät?

<marquee bgcolor=teal width=15%> teksti tähän </marquee> <marquee bgcolor=purple width=15% direction=right> teksti tähän </marquee> <marquee bgcolor=blue width=15%> teksti tähän </marquee>

Tekstin lisäksi voit muuttaa värejä näissä kohdissa: "bgcolor= Mikätahansa väri englanniksi tai koodi" tai sitten leveyttä width= esim 15%. Suuntaa, "direction" voit vaihtaa kirjoittamalla right:in siaan left.

Tervehdys, kun joku avaa sivusi

(esimerkki avautui, kun tulit.)

<SCRIPT language="JavaScript">alert("teksti tänne")</SCRIPT>

Haluatko varmasti tulla tänne? -kysymys sivujasi aukaisevalle.

-Tämä muistuttaa vähän äskeistä koodia toiminnoiltaan, mutta nyt mukana on kysymys (jota voit muuten muutta, kun tutkiskelet oikean kohdan koodista) ja jos vastaa, kyllä, pääsee sivulle, mutta ei vastattaessa palaa edlliselle sivulle. Yksinkertaista mutta hienoa, eikö. ^^

"Heihei" -toivotus jonkun lähtiessä sivuiltasi.

Kopioinninestokoodi.

<Body> <script language="JavaScript1.2">if (document)document.body.onmousedown=new Function("if (event.button==2||event.button==3)alert('teksti tähän')")</script> </Body>

-HUOM: Tekstin täytyy tulla tuonne "teksti tänne" kohtaan. Jos sitä tekstiä on kilometri tolkulla, niin kirjoitat silti kaiken tuonne väliin. Ymmärretty?

Ei siis tätä koodia vain heti tekstin alkuun ja ajatella sitten "sillä selvä."

Nappi, josta klikattessa tervehdys.

<font color=väri englanniksi tai koodi><br><form>napin vieressä oleva teksti
<input type="radio"
onClick="alert('viestin teksti')">

Nappula, josta klikattaessa tervehdys

Tilanerottaja viiva:

Tälläisen viivan saat aikaan, kun käytät koodia

<hr>

Se on varmasti helppo muistaa ulkoa.

Erilainen tilanerottaja viiva:

Leveys (width) kohdassa kannattaa käyttää jotain numeroa <-500-> ja leveys (size) kohdassa taas lukua 3-6.

Linkki nappula:

(Esimerkin Linkki vie etusivulle)

Sähköposti linkkinappula:

Värillinen linkkinappula

-Tästä saa monia erilaisia muotoja, joten kokeilkaa ihmeessä! ^^

(esimerkki menee taas etusivulle)

Linkkilista

-Esimerkissä linkit eivät vie minnekään, eikä kaikkia linkki kohtia ole täytetty.

<form><select name=select size="listassa samanaikaisesti näkyvien linkkien määrä lukuna"
style="background-color:taustaväri englanniksi tai koodi;
font size:16; font-family:fontti;
color:fontinväri englanniksi tai koodi"
onchange="location.href=
(form.select.options[form.select.selectedIndex].value)">
<option value="">nimi listalle</option>
<option value="linkin osoite">linkin nimi</option>
<option value="linkin osoite">linkin nimi</option>
<option value="linkin osoite">linkin nimi</option>

</select></form>

-Jos haluat täyttää enemmän kuin kolme kohtaa listaltasi, laita ylös ensin numeroksi vaikkapa 6, ja lisää <option value= jne. kohtia enemmän ennen </select></form> kohtaa.

-Jos listassa samanaikaissti näkysien linkkien määrä lukuna on yli yksi, listasta tulee tämän näköinen:

Värisevä kuva hiiren koskettaessa:

<head><style>
.shakeimage{
position:relative
}
</style>
<script language="JavaScript1.2">

/*
Shake image script (onMouseover)-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

//configure shake degree (where larger # equals greater shake)
var rector=3

///////DONE EDITTING///////////
var stopit=0
var a=1

function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}

function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}

function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}

</script></head>
<IMG SRC="KUVAN URL" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()">

Vahvistuva kuva hiirellä koskettaessa:

function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
if (which2.style.MozOpacity)
which2.style.MozOpacity=0.3
else if (which2.filters)
which2.filters.alpha.opacity=30
}

function highlightit(cur2){
if (cur2.style.MozOpacity<1)
cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1
else if (cur2.filters&&cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

</script></head>
<IMG SRC="KUVAN URL" style="filter:alpha(opacity=30);-moz-opacity:0.3" onMouseover="high(this)" onMouseout="low(this)">

Hiirellä siirrettävä kuva:

Tässä vielä pari erilaista kirjoitus tyyliä, joista en ole varma, näytinko ne jo... ^^

Esimerkki

<TABLE STYLE="filter:glow(color=väri englanniksi tai koodi, strength=luku 1-10)"><TR><TD><center>teksti tähän</TABLE>

Esimerkki

<TABLE STYLE="filter:shadow(color=väri englanniksi tai koodi)"><TR><TD><center>teksti tähän</TABLE>

Esimerkkii

<TABLE STYLE="filter:dropshadow(color=väri englanniksi tai koodi)"><TR><TD><center>teksti tähän</TABLE>

Musiikki play- ja stop-näppäimellä

Esimerkissä ei soi mikään musiikki.

<center>
<form> <table border=1 bordercolor=VÄRI bgcolor=VÄRI><tr><th><bgsound src="midin url" id=music loop=infinite><font face="arial"><font size=2><font color=VÄRI>Musiikkia</font></th></tr><tr><td>
<input type="button" value="play" onclick="document.all.music.src='midin url';document.cookie='SO=Y;PATH=/'">
<input type="button" value="stop" onclick="document.all.music.src='MUSIIKIN URL';document.cookie='SO=N;PATH=/;'"></td></tr></table></form>
</center>
</script>

Värillinen vieritypalkki (väreinä musta ja punainen)

Taulukko

Tämä	on
Esimekki	...?

<TABLE BORDER=5 BORDERCOLOR=VÄRI WIDTH="50%" CELLSPACING=10 CELLPADDING=20>
<tr>
<td>Teksti</td>
<td>Teksti</td>
</tr>
<tr>
<td>Teksti</td>
<td>Teksti</td>
</tr>
</table>

Suuremman taulukon saat lisäämällä <tr> <tr> kohtia samaan tyyliiin, vakkapa näin..

Tämä	tässä	...
on	esimerkki2	...
Manga ja	Anime	...
ovat	Jees!	...

Tässä suurinpiirtein koodi, jolla isompi taulukko on tehty:

<TABLE BORDER=5 BORDERCOLOR=RED WIDTH="50%" CELLSPACING=10 CELLPADDING=20>
<tr>
<td>Tämä</td>
<td>tässä</td>
<td>... </td>

</tr>
<tr>
<td>on</td>
<td>esimerkki</td>
<td> ... </td>

</tr>

<tr>
<td>Tämä</td>
<td>tässä</td>
</tr>
<tr>
<td>on</td>
<td>esimerkki2</td>

<td> ... </td>
</tr>

</table

Tekstilaatikko:

<textarea rows=rivien lukumäärä cols=pituus lukuna>teksti tähän</*textarea>

Tämä on esimerkki. Hassu eikö? Kerrotkos muuten vieraskirjaan jos pidit koodeistani?</*textarea> <textarea ROWS="10" COLS="10" style="background:red" style="font-family:Arial" style="color: green" style="border style:solid">Tämä on värillinen tekstiloota. Mutta pinaelehan jo vieraskirjaan kommailemaan!! Haluan tietää, onko tämä osio jo riittävä. ^^</*textarea></body></html>

Tein nyt tällaisen minikoon, kun tähän sivulle ei enää mahdu enempää merkkejä... ^^