3 Muotoilu 27. elementtiä käytetään ja miltä se näyttää selaimessa.

Transkriptio

1 27 Tässä kappaleessa käydään läpi tekstin muotoiluun liittyvät elementit ja niiden käyttö. Lisäksi käydään läpi sivun ulkonäköön liittyvät elementit kuten taustaväri sekä sivun jaotteluun käytettävät elementit, kuten viivat ja kappaleet. Muotoilusta on paljon hyötyä: ne tekevät tekstistä visualisesti värikkäämpää, helpommin luettavaa sekä mahdollistavat sen, että tekstejä käyttävät agenttiohjelmat voivat muuttaa käyttäytymistään törmätessään tiettyyn elementtiin (esim. puhesyntetisaattori voi nostaa äänenvoimakkuutta kohdatessaan STRONG-elementin). 3.1 Tekstin muotoilu HTML-dokumentissa tekstiä voidaan muotoilla monilla eri tavoilla. Seuraavassa on käyty läpi ilmaisuelementit (phrase elements), joiden avulla voidaan muokata tekstin ulkoasua. Kaikilla näillä elementeillä on seuraavat attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Attribuutit ja niiden käyttö on käyty läpi kappaleessa 14. Kaikkien attribuuttien hyödyllisyys ei ehkä paljastu heti, mutta niistä voi olla hyötyä jossain tilanteessa. Sitaattiin (esim. Q-elementti) voisi olla hyvä merkitä alkuperäinen kieli langattributilla. Kaikki seuraavat muotoiluelementit vaativat alku- ja lopputagin. Tämä tarkoittaa sitä, että esim. EM-elementin alkaessa <EM>-tagilla sen vaikutus loppuu vasta kun tiedostossa esiintyy </EM>-tagi EM EM-elementtiä käytetään korostukseen. Seuraava esimerkki osoittaa, kuin elementtiä käytetään ja miltä se näyttää selaimessa. <TITLE>EM-elementti</TITLE> <EM>EM-elementillä korostettua tekstiä.</em>

2 28 EM-elementin korostus näyttää lähinnä kursiivilta STRONG STRONG-elementtiä voidaan käyttää EM-elementtiä voimakkaamman korostuksen ilmaisemiseksi. Elementin käyttö käy ilmi seuraavasta esimerkistä. STRONGelementillä korostettu teksti näyttää lähinnä lihavoidulta tekstiltä. <TITLE>STRONG-elementti</TITLE> <STRONG>STRONG-elementillä korostettua tekstiä.</strong> STRONG-elementillä korostettu teksti.

3 DFN DFN-elementtiä (DFN tulee ilmeisesti sanasta definition) käytetään termien määrittelyn yhteydessä. Se on yksi uusimmista elementeistä. Seuraava esimerkki kertoo elementin käytön. <TITLE>DFN-elementti</TITLE> <DFN>DFN-elementillä korostettua tekstiä.</dfn> DFN-elementillä korostettua tekstiä CODE CODE-elementillä kuvataan ohjelmointikielten koodia tai muuta vastaavaa koodia aivan kuten tämän kirjan tekstissä HTML-koodi on kuvattu tällaisella fontilla. Seuraava esimerkki havainnollistaa elementin käyttöä. Esimerkissä esiintyvä BRtagi tarkoittaa rivinvaihtoa. <TITLE>CODE-elementti</TITLE> Ohessa summan laskevan funktion koodi:<br><br> <CODE>function Summa(X, Y: Integer): Integer; stdcall;<br> begin<br> asm<br> MOV EAX,X<BR> ADD EAX,Y<BR> end;<br> end;<br> </CODE>

4 30 CODE-elementillä korostettua ohjelmakoodia SAMP SAMP-elementillä kuvataan ohjelman antamaa esimerkkitulostusta (sample output). Jos esim. jonkin ohjelman käyttöohjeissa käyttäjää pyydetään ensin antamaan ohjelmalle tietty komento, voidaan SAMP-elementillä korostaa ohjelman antamaa vastausta niin, että se erottuu muusta tekstistä. Seuraava esimerkki kuvaa elementin käyttöä. <TITLE>SAMP-elementti</TITLE> Jos ohjelman antama virheilmoitus on seuraavanlainen:<br><br> <SAMP>Virhe 100:Muistia liian vähän. Osta koneeseesi uutta muistia.</samp> <BR><BR> koneesi muisti ei riitä ohjelman ajamiseen. SAMP-elementillä voidaan korostaa ohjelman antamaan tulostusta.

5 KBD KBD-elementillä (keyboard) kuvataan tekstiä, joka käyttäjän tulisi syöttää. Ulkoasultaan KBD-elementti näyttää aivan samalta kuin esim. SAMP- ja CODEelementteihin sijoitettu teksti. Idea ei olekaan ulkoasussa, vaan siinä, että teksti on oikeanlaisessa rakenteessa. Perinteisesti kirjoittaja ei ole välittänyt muusta kuin ulkoasusta ja tällöin mahdollisuus väärinkäsitykseen on aina olemassa. Kun teksti on sijoitettu oikeaan rakenteeseen, kertoo rakenne sen, minkä tyyppisestä tekstistä on kyse. Myöhemmin käydään läpi, kuinka olemassa olevien elementtien ulkoasuja muutetaan (style sheets). <TITLE>KBD-elementti</TITLE> Nähdäksesi hakemiston sisällön kirjoita seuraava komento:<br><br> <KBD> ls -al </KBD> KBD-elementillä voidaan korostaa tekstiä, joka käyttäjän tulisi syöttää VAR VAR-elementillä kuvataan ohjelmakoodissa esiintyviä muuttujia jne. Esim. kuvattaessa aliohjelman kulkua viitataan usein muuttujaan, ja kun tällöin korostettaan muuttuja VAR-elementillä, erottuu se paremmin tekstistä. <TITLE>VAR-elementti</TITLE> <VAR>Summa</VAR>-muuttujaan sijoitetaan ensin <VAR>X</VAR>-muuttujan arvo, jonka jälkeen siihen lisätään <VAR>Y</VAR>-muuttujan arvo.

6 32 Tämän jälkeen VAR>Summa</VAR>-muuttuja sisältää muuttujien <VAR>C</VAR> ja <VAR>Y</VAR> summan. VAR-elementillä voi korostaa muuttujia CITE CITE-elementillä kuvataan sitaatti eli lainaus tai viittaus toiseen lähteeseen. HTML 4.0 määrityksen mukaan CITE-elementillä tulisi merkitä pääasiassa viittauksia ja lainattu teksti tulisi sijoittaa Q- tai BLOCKQUOTE-elementteihin. <TITLE>CITE-elementti</TITLE> Lisää tietoa lyödät lähteestä <CITE>[ISO8879]</CITE>. CITE-elementillä korostettu lähde.

7 ABBR ABBR-elementillä merkitään lyhennelmiä (abbreviation) (esimerkiksi www, esim., jne.). ABBR-elementillä merkitty teksti ei erotu ympäristöstään mitenkään: se näyttää aivan tavalliselta tekstiltä. <TITLE>ABBR-elementti</TITLE> Lisää tietoa lyödät <ABBR>esim.</ABBR> yrityksemme <ABBR>www</ABBR>sivuilta. ABBR-elementillä merkitty teksti (esim. ja www) näytetään samanlaisena kuin tavallinen teksti ACRONYM ACRONYM-elementillä merkitään akronyymejä. Akronyymi on useampisanaisen ilmauksen ensimmäisistä kirjaimista muodostettu sana. Esimerkiksi laser tulee sanoista light amplification by stimulated emission of radiation. <TITLE>ACRONYM-elementti</TITLE> Akronyymi on useampisanaisen ilmauksen ensimmäisistä kirjaimista muodostettu sana. Esimerkiksi <ACRONYM>laser</ACRONYM> tulee sanoista light amplification by stimulated emission of radiation.

8 34 ACRONYM-elementillä merkitty laser-sana näytetään samanlaisena kuin tavallinen teksti BLOCKQUOTE BLOCKQUOTE-elementillä merkitään kokonaisen kappaleen lainaus. Useimmat selaimet sisentävät lainauksen, kuten kuvasta näkyy. Sisennys ominaisuudesta johtuen BLOCKQUOTE-elementtiä käytetään useimmiten väärin: tekstin sisennykseen. Elementin käytön helppous houkuttelee kirjoittajia usein käyttämään sitä väärin. HTML ei tarjoa varsinaisesti työkaluja sisennykseen, mutta sisennyksen voi tehdä taulukoiden avulla, PRE-elementin avulla tai tyylien avulla. <TITLE>BLOCKQUOTE-elementti</TITLE> Tämä on tavallista tekstiä.<br><br> <BLOCKQUOTE>BLOCKQUOTE-elementillä merkitään lainauksia. Teksti sisennetään useimmissa selaimissa, mutta elementtiä ei pitäisi käyttää sisennykseen. </BLOCKQUOTE>

9 35 BLOCKQUOTE-elementillä merkittyä tekstiä Q Myös Q-elementillä merkitään lainauksia. Q-elementin lang-attribuutilla voidaan määrittää mitä kieltä lainaus on. Tällöin selaimen pitäisi näyttää lainaus määritetyn kielen mukaisesti. Esim. amerikan englannin mukaan lainaus esitetään lainausmerkeissä ja lainauksessa oleva lainaus hipsuissa. Kaikki selaimet eivät kuitenkaan tee näin. Lainauksiin ei tästä huolimatta ole suositeltavaa kirjoittaa lainausmerkkejä <TITLE>Q-elementti</TITLE> <Q lang="en-us">q-elementillä merkitään lainauksia. Tekstin kuuluisi näkyä lang-attribuutin kertoman kielen määrittämällä tavalla (eli lang="us-en"-tapauksessa koko lainauksen pitäisi näkyä lainausmerkeissä). Näin ei kuitenkaan aina ole.</q> Q-elementillä merkitty teksti ei useimmiten korostu mitenkään.

10 SUB ja SUP SUB- ja SUP-elementtien avulla esitetään ylä- ja alaindeksit. SUB-elementin avulle merkitään alaindeksi ja SUP-elementin avulla yläindeksi. Ylä- ja alaindeksejä tarvitaan niin matemaattisissa kaavoissa kuin joissakin kielissä (esim. ranskassa). <TITLE>SUB- ja SUP-elementit</TITLE> H<SUB>2</SUB>O<BR> E = mc²<br> <SPAN LANG="fr">M<SUP>lle</SUP> Dupont</SPAN><BR> SUB- ja SUP-elementtien käyttö. 3.2 Taustaväri Useiden eri elementtien taustaväriä voi muokata. Näitä elementtejä ovat mm. BODY, TABLE, TR, TH ja TD. Käytettävä väri voidaan kertoa joko värin englanninkielisellä nimellä tai sitten värin heksadesimaaliarvona. Oheisesta taulukossa näkyy joitakin mahdollisista väreistä. Lisää värikoodeja liitteessä 1. Musta Black # Hopea Silver #C0C0C0 Harmaa Gray # Valkoinen White #FFFFFF Kastanjanruskea Maroon # Punainen Red #FF0000 Purppura Purple # Aniliininpunainen Fuchsia #FF00FF Vihreä Green #008000

11 37 Kalkki Lime #00FF00 Oliivin vihreä Olive # Keltainen Yellow #FFFF00 Tumman sininen Navy # Sininen Blue #0000FF Tumman sinivihreä Teal # Vaalena sinivihreä Aqua #00FFFF Värien nimet ja heksadesimaaliarvot. Bgcolor-attribuuttia käytetään yleisesti, vaikka HTML 4.0 määritelmän mukaan sen käyttöä tulisi välttää ja asettaa taustaväri ennemmin tyylilomakkeiden (style sheets) avulla. <TITLE>SUB- ja SUP-elementit</TITLE> <BODY bgcolor=silver> H<SUB>2</SUB>O<BR> E = mc²<br> <SPAN LANG="fr">M<SUP>lle</SUP> Dupont</SPAN><BR> Bgcolor-attribuutilla voidaan muokata dokumentin taustaväriä. 3.3 Asettelu Oletusarvoisesti kuvat ym. objektit ovat dokumentissa järjestyksessä omalla paikallaan, niin ettei esim. kuvan vieressä ole mitään. Joskus on kuitenkin tarve saada objekti tekstin viereen. Kuville, taulukoille ja kehyksille ym. objekteille määritetty align-attribuutti (arvoilla left ja right) tekee objektista kelluvan. Tämä on yksi tapa saada kuva tekstin viereen käyttämättä taulukoita. Alla olevassa esimerkissä on kuva asetettu kellumaan oikeaan reunaan ja tällöin teksti kiertää sen automaattisesti. Kelluville objekteille mahdollisia align-attribuutin arvoja ovat left ja right.

12 38 <TITLE>Q-elementti</TITLE> <IMG src="a.gif" align="right"> <Q lang="en-us">q-elementillä merkitään lainauksia. Tekstin kuuluisi näkyä lang-attribuutin kertoman kielen määrittämällä tavalla (eli lang="us-en"-tapauksessa koko lainauksen pitäisi näkyä lainausmerkeissä). Näin ei kuitenkaan aina ole.</q> Kuvalle määritetty align-attribuutti (align= right ) tekee kuvasta kelluvan. Tekstielementeille, esim. P ja DIV, määritetty align-attribuutti ei tee tekstistä kelluvaa, vaan muuttaa tekstin asettelun. Left- ja right-arvojen lisäksi joillekin objekteille voidaan asettaa myös arvo center, joka keskittää objektin sivun reunojen suhteen keskelle. <TITLE>Q-elementti</TITLE> <P align="center"> <Q lang="en-us">q-elementillä merkitään lainauksia. Tekstin kuuluisi näkyä lang-attribuutin kertoman kielen määrittämällä tavalla (eli lang="us-en"-tapauksessa koko lainauksen pitäisi näkyä lainausmerkeissä). Näin ei kuitenkaan aina ole.</q> </P>

13 39 Align-attribuutin arvolla center teksti keskitetään. 3.4 Fontit ja viivat Tekstin fontteja voi määrittää monella eri tavalla määrittämällä fontin joko yksittäiselle sanalle tai kappaleelle. Elementtejä käytetään yleisesti vaikkakin uusimman HTML-määritelmän (HTML 4.0) mukaan niiden käyttöä tulisi vähentää. Fonttielementtien sijaan suositellaan käytettäväksi tyylisivuja Korostuselementit TT, I, B, BIG, SMALL, STRIKE, S ja U Korostuselementtejä ovat TT, I, B, BIG, SMALL, STRIKE, S ja U. Ne vaativat alku- ja lopputagin. Niille on määritelty seuraavat attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Seuraava esimerkki kertoo elementtien käytön. <TITLE>Korostus elementit</title> Tämä teksti on normaalilla fontilla.<br> <TT>TT-elementti näyttää tekstin tällaisena.</tt><br> <I>I-elementti näyttää tekstin kursiivina.</i><br> <B>B-elementti näyttää tekstin lihavoituna.</b><br> <BIG>BIG-elementti näyttää tekstin isolla fontilla.</big><br> <SMALL>SMALL-elementti näyttää tekstin pienellä fontilla. </SMALL><BR> <STRIKE>STRIKE-elementti näyttää tekstin yliviivattuna.</strike><br> <S>Myös S-elementti näyttää tekstin yliviivattuna.</s><br>

14 40 <U>U-elementti näyttää tekstin alleviivattuna.</u><br> Korostus-elementtien avulla voi näppärästi korostaa haluamansa määrän tekstiä Fonttielementit FONT ja BASEFONT Fonttielementeillä voidaan määrittää tekstin koko, väri ja fontti (esim. Courier tai Times New Roman). FONT-elementillä määritellään tekstin fontti alku- ja lopputagin välissä ja BASEFONTilla määritetään perusfontin koko (size). Jos BASEFONTia ei käytetä on perusfontin koko oletuksena 3. Elementeille on määritelty seuraavat yleiset attribuutit: id, class lang title style Lisäksi elementeille on määritelty seuraavat omat attribuutit: size = Määrittää käytettävän fontin koon. Attribuutin arvo on kokonaisluku 1 ja 7 väliltä. Koko voidaan myös määrittää vähennyksenä tai lisäyksenä edelliseen kokoon (esim +2 tai -3) eli suhteellisena kokona. color = Määrittää käytettävän fontin värin.

15 41 face = Määrittää käytettävän fontin (esim. FACE="Times New Roman"). BASEFONT-elementti ei siis vaikuta muuhun, kuin perusfontin kokoon. Se ei kuitenkaan vaikuta otsikoiden (headings) eli H1-H6 fonttikokoon ellei niitä ole muutettu FONT-elementin suhteellisella koon muutoksella (esim. +3). <TITLE>Fontit tyylien avulla</title> <FONT FACE="Arial" SIZE=3 COLOR="Black"> <P> Fonttielementeillä voidaan määrittää tekstin koko, väri ja fontti (esim. Courier tai Times New Roman). FONT-elementillä määritellään tekstin fontti alku- ja lopputagin välissä ja BASEFONTilla määritetään perusfontin koko (size). Jos BASEFONTia ei käytetä on perusfontin koko oletuksena 3.<BR> </P> </FONT> FONT-elementillä voi määrittää tekstissä käytettävän fontin Viivaelementti HR Toisinaan sivujentekijät haluavat jakaa sivujen sisältöä kappalevaihtoa voimakkaammalla tavalla. Tätä varten on olemassa HR-elementti, joka tekee määritellyn paksuisen ja pituisen viivan. Elementti ei tarvitse kuin alkutagin, lopputagi ei ole edes sallittu. Elementille on määritelty seuraavat yleiset attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup align

16 42 Lisäksi elementille on määritelty seuraavat omat attribuutit: noshade = size = width = Jos elementin attribuutiksi annetaan noshade, viiva piirretään yhdellä värillä eikä kahdella kuten normaalisti. Määrittää viivan korkeuden pikseleissä (esim. size= 5 ). Määrittää viivan pituuden eli leveys. Pituus voidaan määrittää joko pikseleissä (esim. 400) tai sitten prosentteina ruudun leveydestä (esim. 50%). Seuraava esimerkki havainnollistaa HR-elementin käyttöä: <TITLE>HR-elementti</TITLE> Tekstiä.<BR> <HR width="400" size="5" align="left"> Taas tekstiä.<br> <HR width="50%" size="5" align="center"> Ja taas tekstiä.<br> <HR noshade width="50%" size="5" align="right"> HR-elementillä voi jakaa sivulla olevaa materiaalia. 3.5 Kappaleet Edellisessä kappaleessa käsiteltiin materiaalin jakaminen viivoilla. Toinen tapa on jakaa materiaali kappaleiksi määräämällä rivinvaihto, käyttämällä P- elementtiä tai käyttämällä PRE-elementtiä.

17 BR BR-elementti pakottaa rivinvaihdon. Elementti vaatii ainoastaan alkutagin. Katso käyttö edellisen kappaleen esimerkistä. BR-elementille on määritelty seuraavat yleiset attribuutit: id, class clear title style P P-elementillä merkitään kappaleita. Elementti on luonnollinen tapa merkitä kappaleita. Kappaleita erottavia rivinvaihtoja ei tarvita, sillä kappaleet esitetään toisistaan erillään. P-elementti ei voi sisältää itseään eli P-elementin sisälle ei voi määritellä P-elementtiä. Myöskään tyhjiä P-elementtejä ei ole suotavaa käyttää. P-elementille on määritelty seuraavat yleiset attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup align Seuraava esimerkki havainnollistaa P-elementin käyttöä: <TITLE>P-elementti</TITLE> <P>Kaikista vaivoistaan huolimatta porsaat jaksoivat leikkiä aamusta iltaan. Ne juoksivat ja hyppivät pihamaalla ja heittelivät toisiaan multapaakuilla</p> <P>Kapustahaikara yritti nukkua yövuoronsa jälkeen, eikä voinut sietää porsaiden pitämää mekkalaa. Se nousi ylös ja ulvoi kopissaan. Porsaat eivät välittäneet tästä tippaakaan vaan jatkoivat touhujaan.</p>

18 44 P-elementillä merkityt kappaleet erotetaan toisistaan automaattisesti rivinvaihdolla PRE PRE-elementillä voidaan esittää ennalta muotoiltua tekstiä. Elementti on erittäin nopea keino saada valmiiksi muotoiltu tai yleensä valmis teksti internetiin. PRE-elementille on määritelty seuraavat yleiset attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Esimerkki PRE-elementin käytöstä: <TITLE>PRE-elementti</TITLE> <PRE> Keikka sujuu hyvin, jos pääsemme perille. </PRE>

19 45 PRE-elementillä esitetty teksti näkyy alkuperäisen muotoilun mukaisesti.