Erittäin lyhyt HTML-oppitunti
Alla esimerkki HTML-sivusta:
-------------------------------------------------
<HTML>
<HEAD>
<TITLE>TÄMÄ ON JYRIN KOTISIVU</TITLE>
<LINK REV=MADE HREF=MAILTO:Jpl@Pcuf.Fi>
</HEAD>
<BODY BACKGROUND="/~jpl/logo.gif">
<H2>Kuka Jyri Lindroos oikein on?</H2>
Et varmastikaan halua tietää, mutta kerron silti: <HR>
<IMG ALIGN=left hspace=10 src="/~jpl/coma.jpg">
<BR><BR>
<b>Syntynyt: </b>22.05.1965<BR>
<b>Siviilisääty: </b>naimisissa <BR>
<b>Ammatti: </b>Opettajan retku (luulee tietävänsä
jotain tietojenkäsittelystä!)<BR>
<B>Harrastukset: </b>Työ, työ, työ, työ, työ, squash
(kun ed. ehtii), PCUFin sihteerikkönä olo<BR>
<b>Muut intressit: </b>Kansan Raamattuseuran EX-
aktivisti, musiikki<BR><BR>
<H3>Mistä tavoitat tuon hyypiön, jota yllä
esiteltiin?</H3>
<PRE>
Osoite: Kuntokuja 3 C 41
01280 VANTAA
(09) 349 1909 / (040) 545
Email: <a href="mailto:
jpl@pcuf.fi">jpl@pcuf.fi</a>
</PRE>
<br><br>
<address>
<a href="mailto:jpl@pcuf.fi">jpl@pcuf.fi</a><br>
</address>
</body>
</html>
-------------------------------------------------
HTML-sivu koostuu kolmesta osasta: HTML, joka sisältää koko dokumentin (siis ko. TAG dokumentin alussa ja lopussa), HEAD, jossa määritellään asiat, jotka näkyvät otsikkorivillä, sekä BODY, jossa onkin sitten lopputeksti.
Yllä on esimerkki HTML-sivusta, ei kovin hyvästä sellaisesta, mutta kuitenkin. Kaikki HTML-dokumentit aloitetaan HTML-TAG:llä. TAG on viesti ohjelmalle, jotta se osaa toimia oikein. TAGin molemmin puolin on < >. Lähes jokaisella 'komennolla' on vastinparinsa, esim. <HTML> loppuu </HTML> -TAGiin.
Huomaa, etteivät nuo vastinparit saa mennä ristikkäin, eli tällainen ei toimisi kunnolla:
<u> Laitan alleviivauksen <b> ja lihavoinnin </u> päälle </b>.
Jos tuon tekisi oikein, se näyttäisi:
<u> Laitan alleviivauksen <b> ja lihavoinnin </b> päälle </u>.
Siis, Tagit voivat olla sisäkkäin, muttei ristikkäin.
Kun kirjoitat koodia (esim. Notepadillä), muista, etteivät Enterin painallukset näy koodissa, vaan joudut antamaan niitä vastaavan TAGin: <br>. Vastaavasti kappaleiden loppumerkkinä voi käyttää <p>.
Mutta nyt itse asiaan. Kun olet aloittanut dokumenttisi <html>-tagilla ja kirjoittanut <head>-tagien väliin sen tiedon, jonka haluat selaimen otsikkoriville, tulee <body>, jonka sisään kirjoitat kaiken tarpeellisen. Tässä hieman apukomentoja:
Tekstimuotoilut:
Otsikot <H1>, ..., <H6> isosta pieneen
Muotoilut <b> lihavointi, <u> alleviivaus,
<I> kursivointi
Tasaukset <Left> vasen, <Right> oikea,
<Center> keskitetty
Rivinvaihdot <br> rivinvaihto sekä <p> kappaleen
vaihto (yksi tyhjä rivi jälkeen)
Teksti Jos haluat tekstin näkymään juuri
sellaisena kuin mitä sen kirjoitat
riippumatta selaimen asetuksista,
käytä <pre> -tagia
Linkit:
Kuvat, URL:t yms. laitetaan tekstiin linkkeinä. Esimerkissämme on käytetty taustana logo.gif -kuvaa ja tekstin joukkoon on lisätty coma.jpg-kuva. Nämä kaksi kuvaformaattia ovat turvallisimmat, vaikka selaimet voivat tukea muitakin..
Kuva siis lisätään <img scr="osoite/kuva">-tagilla
URL lisätään <A HREF="osoite/sivunnimi">-tagilla
Jos haluat, että sinulle voidaan lähettää postia, voit lisätä linkin: <a href="mailto:osoitteesi">postia mulle (viesti, joka näkyy linkkinä).
Summa summarum. Paras tapa oppia on katsoa muiden tekemien sivujen Sourcet.
Jyri Lindroos, jpl@pcuf.fi