Pieni HTML-opas hyperdokumenttien kirjoittajille Sami Köykkä 1994, 1995 --------------------------------------------------------------------------- Sisällysluettelo * Termejä * Tiedostot * HTML-Komennot * Tekstin muotoilu * Ääkköset * Erikoismerkit * Otsikot * Kuvat * Linkit * URL:t * Esimuotoiltu tyyli * Osoitteet * Listat --------------------------------------------------------------------------- Termejä HTML HyperText Markup Language. Hyperdokumenttien tekemiseen tarkoittu kieli, joka koostuu tekstin sekaan sijoitettavista komennoista. Hyperdokumentti Hypertekstiä sisältävä dokumentti. Dokumentissa voi olla tekstiä, kuvia, ääntä, linkkejä muihin dokumentteihin yms. Katseluohjelma Ohjelma jolla voi lukea hyperdokumentteja. Esimerkkeinä Mosaic, Cello ja Lynx. Englanninkielinen termi katseluohjelmalle on WWW browser. Linkki Yhteys toiseen hyperdokumenttiin. Jotkut sanat tai kuvat tekstin seassa ovat linkkejä, jonka valitsemalla saat näytöllesi uuden dokumentin. WWW World Wide Web. Maailmanlaajuinen WWW-palvelinten verkko, jossa hyperdokumentit sijaitsevat. WWW-palvelin Jossain tietokoneessa sijaitseva palvelin, johon katseluohjelmat ottavat yhteyttä. Palvelin lukee tiedot tiedostoista ja lähettää ne eteenpäin katseluohjelmille. Tampereen yliopiston WWW-palvelin sijaitsee koneessa www.uta.fi (tunnetaan myös nimellä juoru). Englanninkielinen termi palvelimelle on WWW server. --------------------------------------------------------------------------- Tiedostot Kaikki hyperdokumentit kirjoitetaan puhtaana ASCII-tekstinä tavalliseen tiedostoon. Voit käyttää siis dokumentin tekemiseen vaikkapa emacs-editoria. Jotta WWW-palvelin tunnistaisi tekstin hyperdokumentiksi, lisää tiedoston nimen perään aina kirjaimet .html. Siis esimerkiksi esittely.html Jos muokkaat tiedostoja PC:llä, voit käyttää myös päätettä .htm HTML-komennot HTML-kieli saattaa ensivilkaisulla vaikuttaa hieman kummalliselta. Älä kuitenkaan pelästy! Kun katselet sitä tarkemmin, huomaat että kyseessä ei ole mikään ohjelmointikieli vaan hyvin yksinkertainen tapa kuvata dokumentteja. Erilaiset komennot (lihavointi, kursiivi, otsikot) merkitään dokumentteihin HTML-komennoilla. Nämä komennot ympäröidään suurempi- ja pienempi kuin-merkeillä. Esimerkiksi lihavoitu teksti aloitetaan komennolla bold. Tekstin seassa tämä komento kirjoitetaan siis . Lihavoitu teksti loppuu komennolla /bold. Kuten huomaat, lopetuskomento sisältää siis ensimmäisenä kauttaviivamerkin. Voit kirjoittaa komennot isoilla tai pienillä kirjaimilla, aivan kuten haluat. Tässä esimerkki lyhyestä hyperdokumentista. Komento b tarkoittaa samaa kuin bold, eli lihavointia. Komento i tarkoittaa kursiivia (italics). Tässä on lihavoitua tekstiä ja tässä kursiivia. Katseluohjelmasi ruudulla tuo sama teksti näyttää tältä: Tässä on lihavoitua tekstiä ja tässä kursiivia. (Jotkut lukuohjelmat, esimerkiksi lynx, eivät osaa näyttää kaikkia tekstityylejä. Siihen vaikuttaa myös käyttämäsi pääte.) Tekstin muotoilu Kun kirjoitat tekstiä hyperdokumenttiisi, huomaa että lukuohjelmat muotoilevat itse tekstin lukijan kuvaruudulle sopivaksi. Sinun tarvitsee vain ilmoittaa kappaleiden alut komennolla p. Esimerkiksi teksti joka on kirjoitettu tiedostostoon näin:

Tässä on tekstiä, joka on kirjoitettu usealle riville. ...tulee näkyviin lukuohjelmassa näin: Tässä on tekstiä joka on kirjoitettu usealle riville. Hyperdokumenteissa ei siis oteta huomioon tiedostoon kirjoittamiasi rivinvaihtomerkkejä. Jos kuitenkin haluat lisätä johonkin kohtaan rivinvaihdon, käytä siihen komentoa br. Esim: Matti Meikäläinen
Hämeenkatu 1 A 1
33100 Tampere
Tuo näkyy siis ruudulla näin: Matti Meikäläinen Hämeenkatu 1 A 1 33100 Tampere Ääkköset Kirjoita hyperdokumenteissasi kaikki ääkköset 8-bittisillä merkeillä. Jos käytät 7-bittisiä merkkejä (eli kaarisulkuja {|}), ne eivät näy muille lukijoille välttämättä oikein. Jos käyttämälläsi päätteellä ei voi kirjoittaa 8-bittisiä merkkejä, voit korvata ääkköset seuraavasti: * Kirjaimen ä tilasta kirjoita ä * Kirjaimen ö tilasta kirjoita ö * Kirjaimen Ä tilasta kirjoita Ä * Kirjaimen Ö tilasta kirjoita Ö Älä unohda puolipistettä! Esim. nimeni Sami Köykkä voi kirjoittaa myös näin: Sami Köykkä Erikoismerkit Koska merkkejä <, > ja & käytetään komennoissa, et voi kirjoittaa niitä suoraan dokumenttisi. Käytä niiden tilalla myös erikoiskomentoja: * Kirjaimen & tilasta kirjoita & * Kirjaimen < tilasta kirjoita < * Kirjaimen > tilasta kirjoita > Muista taas puolipisteet! Otsikot Jokaisen hyperdokumentin alkuun tulee merkitä dokumentin nimi. Tämän ei tarvitse olla välttämättä sama nimi kuin tiedostolla. Dokumentin nimi tulee lukijoilla näkyviin yleensä kuvaruudun yläreunaan. Esimerkiksi tämän dokumentin nimi on "HTML-opas". Nimi merkitään komennolla title. Esim: HTML-opas Itse tekstissä väliotsikot merkitään komennolla h. Kirjaimen h jälkeen tulee numero, joka kertoo otsikon koon. Komento h1 tekee suurimmat otsikot ja komento h7 pienimmät. Esim:

Otsikot

Esimerkki tuon tulosteista on tämän kappaleen alussa. Kuvat Voit lisätä tekstisi sekaan myös kuvia. Kuvien tulee olla joko gif- tai xbm-formaatissa. (Uusimmat lukuohjelmat ymmärtävät myös jpeg-formaatissa olevia kuvia) Kuva lisätään komennolla img src. Esimerkissä näet tarkemmin kuinka tätä komentoa käytetään: Kuvan tiedostonnimi tulee siis lainausmerkkeihin komennon jälkeen. Kun katselet dokumenttiasi, kuvan pitäisi näkyä tekstissä sillä kohdalla, missä komento on. Jos WWW-palvelin ei pysty lataamaan kuvaa, sen paikalle tulee näkyviin pieni ikoni. Tarkista tällöin tiedostonnimi, kuvan lukuoikeudet ja sen formaatti. Älä lisää tekstiisi kovin isoja kuvia. Hyperdokumenttiasi luetaan hyvin todennäköisesti ympäri maapalloa jolloin suurten kuvien siirtäminen vie kohtuuttomasti verkon kapasiteettia. Yritä pitää kuviesi koko alle 50 kilotavun. Linkit Kuten olet jo varmaan huomannut, hyperdokumentit sisältävät linkkejä toisiin dokumentteihin. Linkki näkyy kuvaruudulla korostettuna sanana. Korostustapa riippuu katseluohjelmasta - Graafisissa lukuohjelmissa linkki on alleviivattu sana ja lynxissä merkitty käänteisellä tekstillä. Linkki tehdään komennolla a href ja päätetään komentoon /a. Esim: Tästä pääset esittelyyn Lainausmerkkien välissä oleva teksti on dokumentin URL, eli Universal Resource Locator. Ylläoleva URL osoittaa käyttäjän cconol kotihakemistoon, alihakemiston public_html tiedostoon esittely.html. Komentojen välissä oleva teksti ("Tästä pääset esittelyyn") näkyy dokumentin lukijalla linkkinä, jonka hän voi sitten halutessaan valita. Tässä vielä esimerkkinä linkki minun kotisivuuni. Kirjoitin sen tiedostoon tällä tavalla: Tässä on kotisivuni. Tältä se sitten näyttää sinun kuvaruudullasi: Tässä on kotisivuni. URL:t URL, eli Uniform Resource Locator on tapa kertoa hyperdokumentin tai muun tiedon "osoite". Hyperdokumenttiin osoittava URL näyttää seuraavanlaiselta: http://koneennimi/polku Ensimmäisenä tuleva sana http (HyperText Transfer Protocol) tarkoittaa siis hyperdokumenttia. Sen jälkeen tulee kahden kauttaviivamerkin jälkeen koneennimi, esimerkiksi Tampereen yliopiston palvelin www.uta.fi. Tämän jälkeen tulee hyperdokumentin sijaintia osoittava polku. Kun haluat viitata kotihakemistossasi olevaan hyperdokumenttihakemistoosi (public_html), laita polkuun ensimmäisenä ~käyttäjätunnus. Esimerkiksi URL http://www.uta.fi/~cconol/esittely.html osoittaa cconolin kotihakemistossa olevaan tiedostoon public_html/esittely.html. WWW- palvelin pystyy lukemaan tiedostoja ainoastaan alihakemistosta nimeltään public_html. Jossain FTP-palvelimessa olevaan tiedostoon tai hakemistoon pystyy osoittamaan näin: ftp://koneennimi/polku Esimuotoiltu tyyli Jos haluat lisätä dokumenttiisi tekstiä kirjoituskonemaisella tekstityypillä, käytä esimuotoiltua tyyliä. Tämä tyyli aloitetaan komennolla pre. Tällä tyylillä kirjoitetussa tekstissä katseluohjelma ei muotoile mitenkään tekstiäsi, joten voit käyttää välilyöntejä tekstin sisentämiseen, katkoa rivit haluamillasi kohdilla jne. Esim: 
Tässä tulee esimuotoiltua tekstiä. Tekstityyppinä
on kirjoituskonemainen (courier) tekstityyppi.

Voit myös sisentää tekstiä
                   haluamallasi
                       tavalla.
Ylläoleva esimerkki (ja muut tässä oppaassa näkyvät esimerkit) on kirjoitettu juuri tuolla tyylillä. Osoitteet Osoitteiden merkitsemiseen on olemassa komento address. Esimerkiksi:
Sami Köykkä
Tämä näkyy hyperdokumentissa näin: Sami Köykkä Listat Ranskalaisilla viivoilla merkittyjä listoja saat tehtyä helposti komennoilla ul ja li. Aloita lista komennolla ul, lopeta se komennolla /ul ja merkitse jokainen listan osa komennolla li. Tällä tavalla: Valmis lista näyttää tältä: * Perunoita * Mansikoita * Suklaata * Maitoa Numeroituja listoja on yhtä helppo tehdä. Tee ne aivan samalla lailla kuin edellisetkin listat, mutta käytä komennon ul sijasta komentoa ol. Näin:
  1. Eka
  2. Toka
  3. Kolmas
  4. Neljäs
Valmis lista näyttää tältä: 1. Eka 2. Toka 3. Kolmas 4. Neljäs --------------------------------------------------------------------------- Lisää tietoa saat muista maailmalla kirjoitetuista HTML-oppaista. Hauskaa hyperdokumentin kirjoittamista! [Image] Takaisin etusivulle Sami Köykkä