1. Perusteet
2. Teksti
3. Värit
4. Linkit
5. Kuvat
Tietoja, joita tarvitset tehdäksesi nettisivun HTML koodilla:
Tarvitset tietokoneen, jossa on jokin kirjoitusohjelma. Tähän esimerkiksi soveltuu PERUS muistio.
Ja nettiselaimen. Internet Explorer tulee koneen mukana kanssa. Muuta ei tarvitse. Aloittakaamme:
1. Perusteet
HUOM! Kaikki sivut, mitä netistä löydät pohjautuu Html koodikieleen.
Eli. Näitä sanoja tulet tarvitsemaan tulevassa sivussasi. Jos näet tähden selostuksen alussa, se merkitsee, että kyseessä on nettisivuun tärkeästi liittyvä käsite.
* <html> ja </html> ovat sivun, ehkä tärkein osa. Ilman tuota koodipätkää, sivut eivät toimi. Kun aloitat tekemään sivuja, sinun pitää muistaa, että sivusi alkuun kuuluu <html> ja aivan loppuun </html>
* <head> ja </head> ovat siinä mielessä tärkeä koodi, koska noiden väliin tulee kaikki asiat, jotka latautuu sivun latautuessa. Esimerkiksi <title>Lord-dragon-sonin testisivu</title> kannattaa laittaa tuohon. (tulee seuraavassa)
* <title> ja </title> kertovat sivusi otsikon, joka näkyy sinisessä yläpalkissa vasemmalla. Esimerkiksi jos laitan <title>Lord-draognin testisivu</title> niin silloin tuo paksunnettu teksti olisi se otsikko. Voit laittaa haluamasi otsikon.
* <body> ja </body> ovat koodipätkä, jonka väliin laitetaan kaikki sivulla näkyvä teksti, taustaan ja fonttiin liittyvät koodipätkät ja muut vastaavat.
Tuossa tärkeimmät. Sitten kokoamaan omaa sivua.
2. Teksti
Eli. Kuten tuossa aikaisemmin mainittiin, teksti tulee <body>tähän tekstisi</body> väliin. Nyt olemme saaneet kasaan tiedot, kuinka aloittaa sivu. Kootaan yhteen.
<html>
<head>
<title>Lord-dragon-sonin testisivu</title>
</head>
<body> Tähä sitten tulee jotakin tekstiä. </body>
</html>
3. Värit
Niinkuin tyhmäkin sen tajuaa, että värit koristaa sivua kummasti. On se typerän näköinen, jos kaikki sivut olisivat valkoisella pohjalla mustaa tekstiä. Siksi tässä kerrotaan, kuinka muokata värejä. Värit toimivat joko tekstimuodossa, tai jollakin koodilla. Siitä kerrotaan seuraavassa
HUOM! Kaikki värikoodit menee <body> </body> väliin
3.1
Tekstin väri
Tekstin väriä muutetaan niinkin yksinkertaisella koodipätkällä, kun <font color="joku väri">
Tuon (joku väri) tilalle tulee sitten joku väri. Googlea käyttämällä löydät kaikki värit, mutta tässä muutama esimerkki:
red, blue, darkred.
Kun laitat jonkun värin, laitat sen näin: <font color="black">
Tekstin väriä voi myös muuttaa värikoodein, jotka toimivat näin: <font color="#FF00FF"> (teksti on lila eikö?)
3.2
Taustan väri
Taustan väriä on yhtä helppo muuttaa kun tekstiä: <body bgcolor="white"> Tuohon pätee sama värisääntö, kun tekstiin, eli laitat vaikka tuon whiten tilalle haluamasi värin tekstinä tai värikoodina.
Kaikki värit toimivat samalla periaatteella.
4. Linkit
Linkit ovat, no tiedät kyllä. Linkit tulee aina <A jotakin> </A> väliin. Helppoa...
Linkkienkin väriä voi muuttaa... Se toimii seuraavalla <BODY LINK="white" VLINK="white" ALINK="white">
Itse linkkeihin... Niitä voi laittaa seuraavilla tavoilla:
TAPA 1.
Googleen
<A HREF="http://www.google.fi/">
</A>
TAPA 2.
Tapa 2 vie toiselle sinun tekemälle sivulle. Esim jos teet sivun, jonka olet tallentanu nimellä SIVU1 ja teet toisen jonka nimi on SIVU2 voit laittaa SIVU1 linkin suoraan SIVU2. (toivottavasti tajusit
)Se laitetaan:
<A HREF="sivu2.html">Sivu2A>
LINKKI SÄHKÖPOSTIIN:
<A HREF="impotenched666@hotmail.com">
Henkilökohtaista postia minulle.
</A>
Tuossa oli esimerkkejä. Tapoja on monia, mutta ne löydät googlella...
5. Kuvat
Kuvia on kanssa mukava silloin tällöin laittaa omille sivuille. Kuvilla voi ilmaista jotakin. Mutta asiaan... Kuvat tulee laittaa
kanssa <body> </body> väliin. Kuvia laitetaan:
TAUSTAKUVA tulee olla samassa kansiossa kun tallennettu html-tiedosto: <BODY BACKGROUND="kuvat/tausta.gif">
PERUS KUVA: <IMG SRC="kuva.gif">
Kuvasta voi myös tehdä linkin... Se tapahtuu seuraavasti:
<body>
<A HREF="http://www.google.fi/">
<IMG SRC="kuva.gif">
</A>
</body>
HUOM! Edellisessä esimerkissä pitää tuo kuva muuttaa oman kuvan nimeksi. Jos esimerkiksi olet tehnyt kuvan itse ja nimenny sen vaikka Googlekuva ja tallentanu sen gif.muodossa, tuo nimi pitää muuttaa täsmälleen samaksi kun kuvan nimi on.
Bonus Jonnewebiläisille
LIIKKUVA TEKSTI
Liikkuvaa tekstiä saa koodipätkällä: <MARQUEE>tekstiä</MARQUEE>
Tuohonkin voit laittaa lisäelementtejä, esim suunta, jonne teksti kulkee tms.
Tässä muutama, jonka voi laittaa <MARQUEE>:n tilalle:
<MARQUEE DIRECTION=LEFT tai RIGHT> määrittää suunnan mihin teksti liikkuu.
<MARQUEE BEHAVIOR=SCROLL, SLIDE tai ALTERNATE> määrittää suunnan / tavan, jonka mukaan teksti kulkee
<MARQUEE LOOP=3> määrittää, kuinka monta kertaa teksti kuvaruudulla menee... (esim tuossa menee 3 kertaa)
<MARQUEE HSPACE=20 VSPACE=20> kertoo, kuinka paljon tyhjää jää tekstin reunalle.
Noita on lukuisa muita. Löydät ne, kun laitat googleen Marquee
ESIMERKKI, MITEN YHDISTELLÄ NOITA:
<MARQUEE DIRECTION=left BEHAVIOR=Slide LOOP=2 WIDTH=500>Maagisesti liikkuva teksti</MARQUEE>
RIVIN VAIHTO
Tapahtuu, kun laitat haluamaasi kohtaan <br>
Toi on mun 5 minuutissa tehty kaikkien aikojen toinen opas... Että arvostelkaa. Kiitos kun luitte
. Kertokaa puitteet niin korjailen sitä mukaan, kun oon koneella. 
