|
|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
Peruskoodit |
Tallentaminen | Body-koodi | Yleisempiä koodeja | Kommentit ja erikoismerkit |
|
On olemassa 4 peruskoodia, joiden tulee olla jokaisella WWW-sivulla. Nämä koodit ovat:
1. <HTML> </HTML> Koodeilla aloitetaan ja lopetetaan jokainen WWW-sivu. Eli <HTML> on sivun ensimmäinen koodi ja </HTML> sivun viimeinen. 2. <HEAD> </HEAD> Koodeilla aloitetaan ja lopetetaan jokaisen WWW-koodisivun "Pääosa". Tämän osan sisään kirjoitetaan mm. seuraavana esiteltävä sivun otsikko koodi. 3. <TITLE> </TITLE> Koodien väliin kirjoitetaan sivun otsikko. Tämä otsikko kannattaa kirjoittaa mahdollisimman kuvaavaksi, sillä se on teksti joka näkyy sivusi käyttäjille selaimesi tunnistekentässä ja tämä sama teksti tallentuu selaimen muistiin, mikäli joku bookmarkkaa (eli "kirjanmerkaa") sivusi. Eli mikäli sivusi nimi olisi vaikka "Kotisivut", ei se todennäköisesti kertoisi bookmarkin katselijalle kovinkaan paljoa. Parempi vaihtoehto sivun otsikoksi olisi esim. "Matti Meikäläisen kotisivut". Jos kyseessä on esim. linkki sivu, kannattaa se nimetä "Linkit". Otsikkoteksti ei näy itse selainruudussa ja WWW-sivulla. Myös sivujen löydettävyyden kannalta hakukoneilta tällä on merkitystä. Jos Firma Oy:n tuotesivulla markkinoidaan tuotetta, kannattaa sekin mainita titlessä. Sekä tuotteen käyttötarkoitus jos se ei ilmene tuotenimestä. Esim: <title> Firma Oy:n hilavitkutin tehokäyttöön </title>. 4. <BODY> </BODY> Koodien väliin kirjoitetaan sitten koodi kaikelle, mitä halutaan näkymään sivuilla. <BODY>-koodille on useita lisämääritteitä, joista tarkemmin edempänä. On olemassa yksi poikkeustapaus, jolloin <BODY> ja </BODY> koodeja ei käytetä. Asiaa käsitellään tarkemmin kehysten yhteydessä. Peruskoodien käyttötapa selviää paremmin kun kokeillaan sitä käytännössä. Eli tehdään yksinkertainen WWW-sivu. Kirjoita alla olevat koodit muistioon: |
|
Koodia kannattaa ryhmitellä jollainlailla, sillä muuten sen korjaus ja muuttaminen myöhemmin on paljon hankalampaa (oikean kohdan löytäminen pitkästä "koodimössöstä" voi olla joskus vaikeaa, jos kaikki teksti on kirjoitettu yhtä pötköä).
Enterit ja sisennykset, eivät näy sivullasi sitä selaimella katsovalle käyttäjälle. Käytä niitä, vaikkei tässä oppaassa ole käytettykään niitä joka kohdissa. Kaikki käyttäjälle näkyvät muotoilut tehdään erikseen koodien avulla. |
 |
Tallentaminen |
Takaisin ylös | Body-koodi | Yleisempiä koodeja | Kommentit ja erikoismerkit |
|
Tee sivuillesi oma kansio, johon tallennat kaikki kotisivu tiedostosi.
Ensimmäisen kerran jokaista tiedostoa tallentaessasi nimeä se, näppää piste ja tiedostopäätteeksi kirjoita htm tai html Voit käyttää kumpaa tahansa, mutta käytä jatkossa mieluummin aina samaa mitä nyt ensimmäiselläkin kerralla. Tiedostonimessä ei saa olla ääkkösiä (ä,ö tai å kirjaimia). Käytä mieluummin pieniä kirjaimia. |
|
Teit sitten kehyksellisen tai kehyksettömät sivut, niin ensimmäinen HTML-dokumentti jonka haluat ns. pääsivuksi tallennetetaan nimellä index.htm tai index.html Kehyksistä enemmän kehys sivulla.
Kun olet kirjoittanut edellä olevan koodit, tallenna tiedosto. Mene esim. resurssienhallinnan kautta tekemääsi kansioon ja avaa tiedosto. Selain avaa näytölle ensimmäisen versio kotisivuistasi! Jos olet sulkenut muistion, saat sen uudelleen avattua valitsemalla selaimen ylävalikosta Näytä / Lähdekoodi, tai napsauttamalla hiiren kakkospainikkeella sivusi päällä näyttöä ja valitsemalla Näytä lähdekoodi. Kun teet muutoksia tiedostoon, muista tallentaa ja painaa selaimen päivitä painiketta , niin sivulle tekemäsi muutokset tulevat näkyviin. |
|
|
Body-koodi |
Takaisin ylös | Tallentaminen | Yleisimpiä koodeja | Kommentit ja erikoismerkit |
<BODY> koodin lisämääritteillä (eli Atribuuteilla = millainen) voidaan vaikuttaa sivun yleiseen ulkoasuun. (Lähes kaikissa koodeissa voi olla lisämääritteitä). Sivulle voidaan määritellä taustakuva tai tietty taustaväri. Myös tekstin sekä linkkien väri voidaan määritellä halutuksi. Sivun taustakuvana voidaan käyttää joko .gif- tai .jpg-tyyppisiä kuvatiedostoja. Koodiin liittyvät määrittelyt kirjoitetaan aloittavaan koodiin itse komennon jälkeen välilyönnillä erotettuina.
<BODY> -koodi voi saada seuraavat lisämääritteet:
Värien määrittelyssä käytetään RGB-järjestelmää ("Red Green Blue"-järjestelmä), ja värejä vastaavat luvut ilmoitetaan heksadesimaalimuodossa. Esim. musta väri on kuusi peräkkäistä nollaa 000000 ja valkoinen väri kuusi peräkkäistä f-kirjainta ffffff. Värimäärittely kirjoitetaan "lainausmerkkien" sisään, siten että ennen värin osoittavaa heksadesimaalinumeroa tulee vielä # -merkki, esim. koodi <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> määrittäisi sivun taustaväriksi valkoisen ja tekstin väriksi mustan. Taustaa ja tekstiä ei kannata määritellä saman värisiksi. Mille luulisit valkoisen tekstin näyttävän valkoisella taustalla? (Esimerkki alla kohdassa 2, saat sen kohdan näkyviin hiirellä maalaamalla.) Seuraavat alla olevat värit kuuluvat Windowsin 16 värin palettiin. Nimet voidaan kirjoittaa koodiin myös kirjaimin englanniksi, tällöin ei # -merkkiä käytetä. Esim. valkoinen väri voidaan siis kirjoittaa "#FFFFFF" tai "white". |
| 1. Musta _____________ | #000000 _________ | Black |
| 2. Valkoinen __________ | #ffffff ____________ | White |
| 3. Punainen ___________ | #ff0000 __________ | Red |
| 4. Sininen ____________ | #0000ff __________ | Blue |
| 5. Keltainen ___________ | #ffff00 ___________ | Yellow |
| 6. Harmaa ____________ | #808080 _________ | Gray |
| 7. Vihreä _____________ | #008000 _________ | Green |
| 8. Hopea _____________ | #c0c0c0 __________ | Silver |
| 9. Vaaleanvihreä _______ | #00ff00 __________ | Lime |
| 10. Oliivinvihreä ________ | #808000 _________ | Olive |
| 11. Kastanjanruskea _____ | #800000 _________ | Maroon |
| 12. Laivastonsininen _____ | #000080 _________ | Navy |
| 13. Purppura __________ | #800080 _________ | Purple |
| 14. Turkoosi ___________ | #008080 _________ | Teal |
| 15. Tummanpunainen ____ | #ff00ff ___________ | Fuchsia |
| 16. Vaaleanturkoosi _____ | #00ffff ___________ | Aqua |
|
Ja eri vaihtoehtoja riittää, edellisten yhdistelmiä ja eri värien sävyjä on kymmenittäin lisää värikartassa. Käy katsomassa myös erilaisia taustakuvia ja taustavärejä sivut. |
|
|
Yleisempiä koodeja |
Takaisin ylös | Tallentaminen | Body-koodi | Kommentit ja erikoismerkit |
|
<BR> Rivinvaihto
Tämä koodi toimii yksinään, eikä tarvitse lopetusta. Koodin jälkeen teksti jatkuu ilman tyhjää väliä heti seuraavalta riviltä. <P> Kappaleenvaihto Tämäkin koodi toimii yksinään. Koodin jälkeen tulee yksi tyhjä rivi ja uusi kappale alkaa vasta sen jälkeen. <NOBR> </NOBR> Rivinkatkaisun estäminen Selaimet jakavat tekstin automaattisesti näytön levyisiksi riveiksi. Rivinvaihto tapahtuu sanavälin kohdalta. Jos halutaan estää esim. puhelinnumeron jakautuminen kahdelle riville, voidaan se tehdä tätä komentoa käyttämällä. <WBR> Mahdollinen rivinkatkaisukohta Sanan keskeltä voidaan myös osoittaa rivinvaihtokohta, jota selainohjelma käyttää tarpeen vaatiessa. Tämmöinen tilanne voi tulla kyseeseen esim. erityisen pitkien yhdyssanojen yhteydessä. Koodi toimii yksinään. <HR> Vaakaviiva Sivun osia voidaan kätevästi jaotella vaakaviivan avulla. <HR>-koodi piirtää selaimen ruudun levyisen vaakaviivan (tai taulukon levyisen). Tämäkään komento ei tarvitse lopettavaa koodia. Määrittelyjä ovat: |
| SIZE | Viivan paksuus pikseleinä. |
| WIDTH | Viivan pituus joko pikselien lukumääränä tai prosenttina sivun leveydestä. |
| ALIGN | Viivan sijoittumispaikka sivulle vaakasuunnassa. |
| Mahdollisia arvoja ovat: | |
| Left ____ Viiva alkaa sivun vas. reunasta. | |
| Center __ Viiva keskitetään. | |
| Right ___ Viiva alkaa sivun oikeasta reunasta. | |
| NOSHADE | Viiva ei piirry 3-ulotteisena ja on yksivärinen. |
| COLOR | Viivan väri |
|
Esim. <HR WIDTH=50%> piirtää näytölle vaakaviivan, jonka pituus on puolet näytön leveydestä.
Määreitä voidaan myös yhdistellä. Esim. <HR SIZE="3" WIDTH="600" ALIGN="center" NOSHADE> piirtää näytölle 3 pikselin paksuisen ja 600 pikselin levyisen (tai taulukon levyisenä, kuten alla) keskitetyn yksivärisen viivan, joka ei ole kolmiulotteinen.
Tai esim. alla olevan viivan koodi <HR SIZE="3" WIDTH="700" ALIGN="center" COLOR="green"> Kaikki selaimet eivät tue värimääritystä.
|
|
Edellisten väliin sijoitettava keskitetään, oli se sitten tekstiä, kuvia, taulukko tai mitä vain. |
| <B> </B> | Lihavointi |
| <I> </I> | Kursivointi |
| <U> </U> | Alleviivaus |
| <SUP> </SUP> | Yläindeksi (esim. m2) |
| <SUB> </SUB> | Alaindeksi (esim. H2O) |
| <STRIKE> </STRIKE> | |
| <TT> </TT> | Konekirjoitustekstin tapainen tasavälinen teksti (Teletype) |
| <ADDRESS> </ADDRESS> | Kursivointi |
| <BLOCKQUOTE> </BLOCKQUOTE> | Sisennys (harvemmin käytetty) |
| <UL> </UL> |
|
| <LI> </LI> |
|
| <OL> </OL> |
|
| (3:sta edellä mainitusta <UL>, <LI> ja <OL> tarkemmin listat sivulla.) | |
| <BIG> </BIG> | Suurentaa tekstiä normaalista |
| <SMALL> </SMALL> | Pienentää tekstiä normaalista |
| <SAMP> </SAMP> | Esimerkki, tulostaa Courier fontilla |
| <STRONG> </STRONG> | Lihavoitu, vähän sama kuin koodi B |
| <BLINK> </BLINK> | (toimii netscape selaimissa) |
| IE:ssä ja NS:ssä toimiva on tehtävä scriptillä |
| <MARQUEE> </MARQUEE> (Toimii varmemmin IE:ssä) |
|
Esim. <MARQUEE WIDTH="250" SCROLLAMOUNT="6" DIRECTION=right>Vierivä teksti</MARQUEE>
Scrollamount on vieritys nopeus, arvoksi ei siis kannata laittaa nollaa. Direction on suunta.
Koodi ei toimi vanhemmissa netscape selaimissa. Koodilla on mahdollista vierittää myös kuvaa.
|
| <FONT> </FONT> | Fontin tarkemmat määrittelyt ovat: |
| SIZE | Fontin koko. Sen määrittelyyn on 2 eri tapaa: |
| 1. Fontille annetaan koko väliltä 1-7, esim. <FONT SIZE="2"> | |
| 2. Fontille annetaan koko "+"- ja "-" -merkkien avulla, esim. <FONT SIZE="+2"> | |
| COLOR | Fontin väri, esim. <FONT COLOR="Red"> |
| FACE | Kirjasintyyppi. |
|
Eri käyttöjärjestelmissä ei välttämättä ole samoja fontteja käytettävissä. Määrittelyllä voidaan kuitenkin osoittaa useita eri vaihtoehtoja, joista selainohjelma sitten valitsee sen mitä käyttää. Jos mitään vaihtoehdoista ei löydy, käytetään oletusfonttia. Vaihtoehdot määritellään pilkulla toisistaan erotettuina. Jos fonttia halutaan vaihtaa, suht. varmoina vaihtoehtoina voidaan pitää ainakin Arial-, Helvetica- ja Verdana-fontteja, jolloin koko koodi olisi esim: <FONT FACE="Arial, Helvetica,Verdana" COLOR="Red" SIZE="2">Arial fonttia, väri punainen ja koko 2</FONT>.
Se missä järjestyksessä em. koodit (color, face ja size) ovat ei ole mitään väliä. Tosin yleisempi ja suositeltavampi tapa nykyää määritellä fontti tyylit, on tehdä se erillisellä tyylitiedostolla tai sivulle "upotetuilla tyyleillä".
<PRE> </PRE> Esimuotoiltu teksti (preformatted text). Teksti tulostaa selaimen näytölle mm. enterit, välilyönnit ja tabulaattorin juuri sellaisena kuin olet sen koodiin kirjoittanut. Voidaan käyttää esim. yksinkertaisissa taulukoissa. (Toimii oikein lähinnä IE:llä.) <PRE> Nimi Sarja Laji Tulos ------ ------ ----- ------ Heidi T 12 Kuula 10.69 Laura T 10 Kuula 9.25 Juha P 8 Kuula 7.58 </PRE> |
|
|
Kommentit |
Takaisin ylös | Tallentaminen | Body-koodi | Yleisimpiä koodeja |
Koodin sekaan on mahdollista kirjoittaa kommentteja, ne ovat "muisti lappuja" sinulle itsellesi. Kommentit eivät näy käyttäjän selaimella hänen suffatessa sivullasi. Kommentti alkaa <!-- merkillä ja päättyy --> merkkiin. Näiden koodien väliin voit kirjoittaa kommenttisi. Esimerkki kommentista (tämä nyt näkyy selaimella, mutta se on tarkoituskin): <!-- Tähän loppui kommentti -->.
ErikoismerkkejäErikoismerkkit eivät näy kaikilla selaimilla näppäimistöltä kirjoitettuna. Siksi ne on joissakin tapauksissa hyvä tehdä käyttäen koodeja. Kirjoittaminen aloitetaan & merkillä ja lopetetaan ; merkillä, näitä kirjoitettaessa ei käytetä tageja. Muutamia erikoismerkkejä: |
| Merkki | Koodi | Merkki | Koodi | Merkki | Koodi | Merkki | Koodi | ||||
| pieni ä | ä | iso Ä | Ä | pieni ö | ö | iso Ö | Ö | ||||
| pieni å | Å | iso Å | Å | æ | æ | Æ | Æ | ||||
| è | è | È | È | ñ | ñ | Ñ | Ñ | ||||
| ó | ó | Ó | Ó | ô | ô | Ô | Ô | ||||
| ò | ò | Ò | Ò | õ | õ | Õ | Õ | ||||
| ú | ú | Ú | Ú | û | û | Û | Û | ||||
| ü | ü | Ü | Ü | ù | ù | Ù | Ù | ||||
| pystyviiva | | | | © | © | ® | ® | & | & | ||||
| €uro € | € | Ø | Ø | < | < | > | > | ||||
| ¼ | ¼ | ½ | ½ | ¾ | ¾ | " | " |
 |
