HTML-koodeja
HTML-dokumentti
<html> - tagi aloittaa html-dokumentin. Se kertoo ohjelmalle, että kyseessä on html-dokumentti. Dokumentin viimeinen tagi on aina </html>, joka lopettaa html-dokumentin
<head> - tagin sisään tulee <title>-tagi, joka ilmoittaa dokumentin nimen ja samainen nimi tulee selain ikkunan ylälaitaan. </title>-tagi lopettaa nimen ja tätä ei todellakaan saa unohtaa. </head>-tagi täytyy laittaa viimeikseksi ennen <body>-tagia.
<body> - tagi aloittaa sivun rungon. Eli tämän sisälle kirjoitetut tekstit tulevat näkyviin Internet-selaimeen. </body>- tagi lopettaa rungon ja se tulee aina ennen viimeistä </html> tagia.
HTML-DOKUMENTTI
Tässä on yksinkertainen html-koodaus, joka muodostaa html-dokumentin.
Pakotetty rivinvaihto
Rivinvaihtokoodiin voi lisätä myös rivityksen pysättämis koodin. Suunnat ovat:
left - pysäyttää rivityksen kun vasemmassa laidassa ei ole enää elementtiä/tekstiä
right - pysäyttää rivityksen kun oikeassa laidassa ei ole enää elementtiä/tekstiä
all - pysäyttää rivityksen kun kummassakaan laidassa ei ole enää elementtiä/tekstiä
Tässä on esimerkkejä, jotta on helpompaa havainnollistaa kuinka se toimii.
 Tässä esimerkissä pakotetussa rivinvaihdossa ei ole käytetty mitään suunta määritettä.
Joten teksti jatkuu normaalisti pakotetun rivivaihdon jälkeen kuvan vierestä.
Tässä esimerkissä sen sijaan on käytetty suuntana left (vasen), joka siirtää tekstin kuvan alle.
Ja jatkaa sieltä ihan normaaliin tapaan. Näin säästytään usen pakotetun rivivaihdon kirjoittamiselta.
Kappale
DOCTYPE
DOCTYPE teksti lisätään html-dokumentin alkuun ennen <html>-tagia. Se ilmoittaa selaimelle mitä html-koodausta sivuilla käytettän.
HTML 4.0 koodaus on yleisintä tällä hetkellä, mutta useat sivut käyttävät myös XHTML 1.0-versiota. Jos olet aloitteleva koodaaja käytät varmastikkin HTML 4.0-koodausta, joten tämä DOCTYPE-koodi on sinulle sopiva.
Dokumentin kielen määrittäminen
Seuraava koodin pätkä lisätään dokumentin aloittavaan html-tagiin.
esim. < html xml:lang="fi" lang=fi >
Tekstin kirjoittaminen
Kun et laita tekstille mitään määritteitä niin se näkyy sivuillasi väriltään mustana, kooltaan 12 pikselisenä ja fontti tyyliltään Times New Romanina. Ne ovat toisin sanonen netin standardi määritteet.
Tekstiä voi kuitenkin muokata erikokoiseksi, väriseksi ja fontiltaan eri tyyliseksi. Tässä on kaksi perus tapaa, joilla voit muunnella tekstiäsi.
tai
Alleviivattu teksti
esimerkki
Kursivoitu teksti
esimerkki
Lihavoitu teksti
esimerkki
Yliviivattu teksti
esimerkki
Kirjaimien välit
esimerkki esimerkissä väli pikseleinä on 2
Keskitetty teksti
Teksti oikeaan laitaan
Esimuotoiltu teksti
Useimmiten selaimet poistavat kaikki ylimääräiset välilyönnit ja rivinvaihdot pois, samalla myös rivittäen tekstit ikkunan koon mukaan. Esimuotoilti teksti [preformatted text] antaa käyttäjälle mahdollisuuden säilyttää tekstin alkuperäisen muodon, tarkoittaen kaikkia tekstieditorissa tehtyjä välilyöntejä ja rivinvaihtoja.
Tekstin korostus taustavärillä
esimerkki
tai
Molemmat koodit toimivat samalla tavalla, joten molempia voi käyttää ihan sen mukaan kumpi tuntuu helpommalta.
Tekstilinkki
Tällä koodilla saat linkin avaamaan uuden selain ikkunaan.
Kuva linkkinä
border="0" määrite poistaa kuvan ympäriltä linkiksi koodatun kuvan reunat. Määritteen voi poistaa jos haluaa kuvassa näkyvän reunat.
Sähköpostilinkki
Oikealle kulkeva teksti
Voit samalla koodilla muutta tekstin suuntaa. Eri suuntia voit vaihtaa direction-kohtaan. Muita suuntia ovat: left, up, down. Tekstin nopeutta voit säätää scrollamount="jokin luku" avulla.
Reunasta reunaan kulkeva teksti
Tekstin nopeutta voit säätää scrollamount="jokin luku" avulla.
Taustavärillä:
Otsikot
Otsikko muodot
Otsikoita on kuutta [6] eri kokoa. Numerot ovat luonnollisesti 1-6 ja numero laitetaan aina h-kirjaimen perään.
Tekstin ostikoiminen
Tekstin keskelle voi luoda otsikollisia sanoja, jotka selittävät esimerkiksi tekstin keskellä olevien sanojen lyhenteet. Tällainen on todella uuvuttavaa koodaamista, mutta helpottaa käyttäjän sellamista.
esim. [vie hiiren kursori tekstin päälle ->] Animanga
Yllä olevan koodin tunnistavat suurin osa kaikista internet selaimista. Toinen vaihto ehtoinen koodi on:
Mutta IE 6 ja sitä vanhemmat versiot eivät tue tätä edellä mainittua koodia.
Firefox-selain näyttää kuitenkin molemmat koodaustavat ja korostaa koodatut tekstit vielä pistealleviivauksella. Internet Explorer ei korosta tekstiä mitenkään muun tekstin joukosta, mutta tekstin voi korostaa vaikka seuraavalla tavalla.
esim. Animanga tai Animanga
Näin tekstin erottaa myös IE:llä. Suosittelen tämän käyttöä vaikka ei käyttäisikään IE:tä omalla koneella.
Kuvan laittaminen
Kuvan koon muuttaminen
Ilmoita kuvan koko numeroina
Tilaa kuvan vasemmalle ja oikealle puolelle
Luku ilmoitetaan aina pikseleinä esim. 2px
Tilaa kuvan ylä- ja alapuolelle
Luku ilmoitetaan aina pikseleinä esim. 2px
Kuvan reunojen poistaminen
Poistaminen onnistuu kun määrittää reunuksen border="0"
Kuvan ja tekstin laittaminen viereikkäin
Normaalisti teksti ja kuva sijoittuvat viereikkäin niin, että kuvan ja tekstin alalaidat ovat samassa linjassa toisiinsa nähden. Tekstin ja kuvan suhdetta voi muuttaa align määritteellä, joka laitettaan kuvan latauskomentoon. Määritteitä ovat: top, bottom ja middle. Kun kuvan haluaa näkyviin tekstin "keskelle", vasemmalle ja tai oikealle niin märitteet ovat: right ja left.
Esimerkki 1:
Tässä esimerkissä ei ole käytetty määritteitä lainkaan. Tekstin jatkuessa se vaihtaa automaattisesti riviä kuvan alle.
Esimerkki 2:
Tässä esimerkissä määritteenä on align="top". Siksi teksti tulee näkyviin samaan linjaan kuvan ylälaidan kanssa, mutta kun teksti vaihtaa automaattisesti riviä se hyppää kuvan alle. Joten tämä koodi on hyödyllinen kun haluaa kirjoittaa vain muutaman sanan kuvan viereen.
Esimerkki 3:
Kuvan määritteenä on tässä esimerkissä align="right". Kuva siis hyppää sivun oikeaan laitaan. Tällä kertaa teksti vaihtaa riviä, mutta jatkaa kulkuaan kuvan reunaa pitkin. Align="left" määritteellä saat kuvan vasempaan laitaan ja tekstin jatkamaan kulkuaan kuvan reunaa pitkin.
Kuvan nimeäminen
Tämä koodi toimii oikealla tavalla vain Internet Explorerilla, Mozilla Firefox näyttää ALT-tagin sisälle kirjoitetun tekstin ilman mitään kehyksiä. ALT-teksti tulee näkyviin jos kuvaa ei ole löydettävissä,
esim. 
tai kun kuvan päälle siirtää hiiren osoittimen,
esim.
Seuraava koodi toimii Mozilla Firefoxilla, molempia koodeja voi käyttää IE:llä ja ne toimivat ihan samalla tavalla.
TITLE-tagin sisään kirjoitettu teksti tulee kuvan päälle kuten Internet Explorerilla näkyy ALT-tagiin kirjoitettu teksti.
esim.
Tämä koodi ei kuitenkaan näytä toimimattoman kuvan sijalla kuvan tekstiä, vaan laittaa näkyviin "rikkinäisen kuvan"-merkin.
Jos haluat, että kuvan tilalla näkyy teksti, joka näkyy myös kuvan päälle siirrettäessä hiiren käytä seuraavaa koodia.
Taustakuvan laittaminen
Taustakuvan latauskomento laitetaan body-tagiin.
Taustavärin laittaminen
Taustavärin latauskomento laitetaan body-tagiin.
Liikkumattoman taustakuvan laittaminen
Taustakuvan latauskomento laitetaan body-tagiin. Koodi saa taustakuvan pysymään paikallaan kun teksti ja kuvat liikkuvat.
Taustakuvan toistaminen
Halutessasi voit kertoa kuinka monta kertaa tahdot ohjelman toistavan taustakuvaa.
Erillisiä määritteitä ovat:
x repeat - Taustakuvan oltusarvo, joka toistaa taustakuvaa vierekkäin vaaka- ja pystysuunnassa.
x repeat-x - Taustakuvaa toistetaan vaakasuunnassa.
x repeat-y - Taustakuvaa toistetaan pystysuunnassa.
x no-repeat - Taustakuvaa ei toisteta, vaan näytetään sivun ylälaidassa vain kerran, jos sille ei ole annettu sijoitus määritettää. ks.alas
Taustakuvan sijoittaminen
Taustakuvan voit määrittää tiettyyn kohtaan näyttöä seuraavalla koodilla.
Taustakuvan sijoittamisessa voi käyttää seuraavia määriteitä:
x center - Taustakuva sijoittuu keskelle näyttöä.
x right - Taustakuva sjoittuu oikeaan laitaan
x left - Taustakuva sijoittuu vasempaan laitaan
x top - Taustakuva sijoittuu näytön ylälaitaan
x bottom - Taustakuva sijoittuu näytön alalaitaan
Tässä on esimerkki määrite, joka sijoittaa taustakuvan selain ikkunan vasempaan alalaitaan.
Sijoittamisen voi tehdä myös prosentti luvuilla.
x 50% - sijoittaa taustakuvan keskelle näyttöä, aivan kuten määrite center
Tässäkin voi laittaa kaksi määritettä peräkkäin josta ensimmäinen kertoo taustakuvan vaakasuoran paikan ja toinen pystysuoran paikan.
Tässä on esimerkki, joka sijoittaa kuvan 3/4 näytön leveydestä ja 1/4 näytön korkeudesta.
Kokeilemalla kaikki selviää paremmin!
Tekstilaatikko
Posta koodista *-merkit, ne on lisätty sinne, jotta koodi näkyisi oikein.
rows - määritä kuinka monta riviä laaatikossa on.
cols - määritä kuinka monta pikseliä laatikko on leveä.
Ylläolevassa laatikossa määritteet ovat: rows="4" cols="40"
Tekstilaatikon muokkaaminen
Laatikon reunat - Ainoastaan CSS-dokumenttiin! Laatikon reunoja voit muokata seuraavalla koodilla.
Seuraavilla määriteillä voit määrätä minkälaisia reunoista tulee:
x none - Ei reinusta, oletusarvo
x dotted - Pisteistä muodostuva reunus
x dashed - Piste viivoista muodostuva reunus
x solid - Kiinteä reunus
x double - Reunus muodostuu kahdesta viivasta, joiden välissä on tyhjä tila.
x groove - Reunus näyttää uritetulta
x ridge - Reunus näyttää muurin harjalta
x inset - Reunus saa laatikon näyttämään sisäänpäin kallistuneelta.
x outset - Reunus saa laatikon näyttämään ulospäin kallistuneelta.
Reunuksen paksuus määritetään seuraavasti:
x thick - paksu
x medium - keskikokoinen
x thin - ohut
Tässä on myös esimerkki
Border-Style ilmoittaa laatikon jokaisen reunan erikseen. Määritykset alkavat yläreunasta ja jatkuu myötäpäivään. Esimerkissä laatikossa ei ole vasenta reunusta, koska se on määritetty none -määritteellä.
Popup ikkunan luominen
Määritteet
toolbar=yes/no - työkalupalkki
location=yes/no - osoitekenttä
status=yes/no - tilarivi
menubar=yes/no - valikkopalkki
scrollbars=yes/no - vierityspalkki
resizable=yes/no - määrittää sen voiko käyttäjä itse muokata popup ikkunan kokoa vapaasti
width= koko pikeseleinä - Popup ikkunan leveys
height= koko pikeseleinä - Popup ikkunan korkeus
left= luku pikseleinä - etäisyys näytön vasemmasta reunasta
top= luku pikseleinä - etäisyys näytön yläreunasta
|
|
Sweet Sent 2007-2011 © Saiyuki | Anime ja Manga sarjat © Tekijät | paikalla
