HTML-opas - Ohjelmoinnin perusteita

Peruskoodit

Tallentaminen Body-koodin lisämääritteitä Yleisempiä koodeja

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 sivuillesi tuleville surffaajille. <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-koodin lisämääritteitä Yleisempiä koodeja

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-koodin lisämääritteitä

Takaisin ylös Tallentaminen Yleisimpiä koodeja

<BODY> koodin lisämääritteillä (eli Atribuuteilla = millainen) voidaan vaikuttaa sivun yleiseen ulkoasuun. (Lähes kaikissa koodeissa on 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:

BACKGROUND 	Taustakuva, esim. <BODY BACKGROUND="taustakuva.gif">
BGCOLOR	Taustan väri, esim. <BODY BGCOLOR="#FFFFFF">
TEXT		Tekstin väri, esim. <BODY TEXT="#000000">
LINK		Vierailemattoman linkin väri (yleensä sininen)
VLINK		Vieraillun linkin väri (Visited link).
ALINK		Linkin väri silloin, kun ollaan linkin päällä ja
		pidetään hiiren näppäintä pohjassa (Activ link).

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 000000 ja valkoinen ffffff. Värimäärittely kirjoitetaan "lainausmerkkien" sisään, siten että ennen värin osoittavaa heksadesimaalinumeroa tulee # -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 luulet valkoisen tekstin näyttävän valkoisella taustalla? (Esimerkki alla kohdassa 2, saat sen kohdan näkyviin hiirellä maalaamalla.)
Seuraavat värit kuuluvat Windowsin 16 värin palettiin. Nimet voidaan kirjoittaa koodiin myös kirjaimin englanniksi, tällöin ei # -merkkiä käytetä (valkoinen väri voidaan kirjoittaa joko "white" tai "#FFFFFF"):

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-koodin lisämääritteitä

  Rivinvaihto
Tämä koodi toimii yksinään, eikä tarvitse lopetusta. Koodin jälkeen teksti jatkuu ilman tyhjää väliä heti seuraavalta riviltä.

 Kappaleenvaihto
Tämäkin koodi toimii yksinään. Koodin jälkeen tulee yksi tyhjä rivi ja uusi kappale alkaa vasta sen jälkeen.

  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ä.

 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. Koodin 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ä.

<CENTER> Keskitys </CENTER>
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. m²)

<SUB> </SUB> _________ Alaindeksi (esim. H₂O)

<STRIKE> </STRIKE> ____ Yliviivaus

<TT> </TT> _____________ Konekirjoitustekstin tapainen tasavälinen teksti (Teletype)

<ADDRESS>
</ADDRESS> ____________ Sivun tekijän tiedot, Kursivointi

<BLOCKQUOTE>
</BLOCKQUOTE> ________ 	Sisennys (harvemmin käytetty)

<UL> </UL> _____________ 	Sama kuin yllä, mutta lyhyempi kirjoittaa
		
<LI> </LI> ______________  Lista / luettelomerkki	

<OL> </OL> _____________ 1. Edellinen numeroituna

(3:sta edellä mainitusta <UL>, <LI> ja <OL> koodista 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> _______ Vilkkuva teksti (toimii netscape selaimissa)
			  IE:ssä ja NS:ssä toimiva on tehtävä scriptillä	

<MARQUEE> </MARQUEE>__ Vierivä teksti Toimii 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.
Delfiini


<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, suh. varmoina vaihtoehtoina voidaan pitää ainakin Arial-, Helvetica- ja Verdana-fontteja, jolloin koko koodi olisi esim: Arial fonttia, väri punainen ja koko 2.
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 se on koodiin kirjoitettu. Voidaan käyttää esim. yksinkertaisissa taulukoissa.

<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

Koodin sekaan on mahdollista kirjoittaa kommentteja, jotka eivät näy itse sivulla. Kommentit ovat "muisti lappuja" sinulle itsellesi. Kommentti alkaa  merkkiin. Näiden koodien väliin voit kirjoittaa kommenttisi. Esimerkki kommentista: .

Erikoismerkkejä

Erikoismerkkien kirjoittaminen aloitetaan & merkillä ja lopetetaan ; merkillä, näitä kirjoitettaessa ei käytetä tageja. Useammat erikoismerkit toimivat myös näppäimistöltä kirjoitettuna esim. ääkköset. Esimerkkejä erikoismerkkeistä:

välilyönti

® -merkki

& -merkki

pieni ä

iso Ä

pieni ö

iso Ö

€uro €

€

Takaisin ylös | Tallentaminen | Body-koodin lisämääritteitä | Yleisimpiä koodeja