WEB-opas, HTML - Teksti

Tekstiä sisältävät elementit

Sivulla esitellään elementtejä joiden sisältö esitetään www-sivuille tekstinä tai numeroina. Lisäksi esitellään joitain tekstiin esittämiseen liittyviä elementtejä, kuten rivinvaihto, korostaminen, erikoismerkit. Joillekin elementeille on taulukon atribuutti-sarakkeessa kaksi mainintaa, atribuutti -jolloin asetusta voi kokeilla muissa kuin HTML5-koodauksessa, Globaali & Tapahtuma viittaa asetuksia voitavan tehdä muulla tavoin (katso linkki !). Suuri osa elementtien asetuksista ja muotoiluista voidaan tehdään ns CSS-tiedostossa.
Muista, elementeillä on aloitusmerkki esim. <h1> sekä lopetusmerkki esim. </h1>.

Elementti Tarkoitus Atribuutit Määritteet
h1, h2, h3, h4, h5, h6 OTSIKOT
<h2> Otsikon teksti </h2>
align left, center, right, justify
Otsikon asemonti, CSS-muotoilulla
p TEKSTI
<p> Esimerkki-teksti </p>
align left, center, right, justify
Tekstin asemonti, CSS-muotoilulla
<!-- kommentti --> Kommentti, html-tiedostossa muistiinpano
br PIVINVAIHTO, "pakotettu" rivinvaihto
<br> tai </br>
hr ALLEVIIVAUS, koko yleensä sivun tekstisisällön levyisenä
<hr>
align, noshade, size, width
Globaali & tapahtuma.
align: left, center, right
noshade: noshade.
size: pikseleinä.
width: pikseleinä
wbr Elementillä voidaan selaimelle ilmoittaa kohta josta teksti tai
sana voidaan jakaa eri riville,
esim pitkät yhdyssanat tai ohjelmakoodi
kesto<wbr>suosikki
Globaalit & tapahtuma Ei Explorer ??
mark Tekstin korostus
<mark> teksti </mark>
teksti
Globaalit & tapahtuma Ei Explorer 8 tai aiemmat
CSS-muotoilu, esim
<mark style="background-color:lightgreen">taustaväri</mark>
taustaväri
b LIHAVOITU TEKSTI
<b> teksti </b>,
teksti
Globaali & tapahtuma CSS-muotoilu esim.
<b style="color:red">tekstinväri</b>
tekstinväri
strong LIHAVOITU TEKSTI
<strong> teksti </strong>
teksti
Globaali & tapahtuma CSS-muotoilu,
kuten edellinenkin
i KURSIVOITU TEKSTI, italic
<i> teksti </i>
teksti
Globaali & tapahtuma CSS-muotoilu,
kuten edellinenkin
em KOROSTETTU TEKSTI
<em> teksti </em>
teksti
Globaali & tapahtuma CSS-muotoilu,
kuten edellinenkin
sub ALA-INDEKSI
Tuote <sub> teksti </sub>
Tuote teksti
Globaali & tapahtuma CSS-muotoilu
<p>Teksti<sub style="color:red">punainen</sub></p>

Tekstipunainen

sup YLÄ-INDEKSI
Tuote <sup> teksti </sup>
Tuote teksti
Globaali & tapahtuma CSS-muotoilu
<p>Teksti<sup style="color:blue">sininen</sup></p>

Tekstisininen

small PIENELLÄ TEKSTI
Pienellä<small> teksti </small>
Pienellä teksti
Globaali & tapahtuma Saattaa poistua HTML5:stä
CSS-muotoilu, kuten edellä
dell YLIVIIVATTU TEKSTI
<dell> teksti </dell>
teksti
EI TOIMI HTML5:ssä !!
ins ALLEVIIVATTU TEKSTI
<ins> teksti </ins>
teksti
Käytä CSS-muotoilua
kbd MUOTOILTU TEKSTI (keyboad text)
<kbd> teksti </kbd>
teksti
Kokeile CSS-muotoiluja, muitakin vaihtoehtoja on
<kbd style="color:red"> teksti </kbd>
teksti
samp ESIMERKKI TEKSTI
<samp> teksti </samp>
teksti
Kokeile CSS-muotoiluja, muitakin vaihtoehtoja on
var MUOTOILTU TEKSTI, kursiivi
<var> teksti </var>
teksti
Kokeile CSS-muotoiluja
CSS värit esim
pre KIRJOITETTU TEKSTI, siten kuin se kirjoitetaan välilyönteineen
ja rivinvaihtoineen näppäimistöltä
<pre>
teksti
rivi
</pre>
Katso esimerkki
abbr OPASTE-TEKSTI
<abbr> teksti </abbr>
Vaihtoehtoina esim. JavaScript-toteutukset
Katso esimerkki
address POSTIOSOITE
<address> Postisoite </address>
CSS-muotoilut
Katso esimerkki
bdo TEKSTIN SUUNTA
<bdo> teksti </bdo>
dir ltr - vasemmalta oikealle
rtl - oikealta vasemmalle
<bdo dir="rtl"> Teksti </bdo>
Teksti
blockquote LAINATTU TEKSTI
<blockquote> Tähän teksti </blockquote>
Tähän teksti
Kokeile CSS-muotoiluja, esim erilaisen fontin käyttöä
Katso esimerkki
q LAINAUSMERKIT TEKSTIIN
<q>teksti</q>
teksti
cite KURSIIVI TEKSTI
<cite>teksti</cite>
teksti
dfn KURSIIVI TEKSTI
<dfn> teksti </dfn>
teksti
span CSS-TYYLITELTY TEKSTI
<span style="asetus"> teksti </span>
CSS-muotoilu
<span style="color:violet"> teksti </span>
teksti
tai
<span class="oma1"> teksti </span>
a LINKKI TEKSTISSÄ<a href="url"> teksti </a> CSS-muotoilut


OTSIKOT, h1 - h6 elementit

Otsikoiden esittämiseen käytetään <h1>, <h2>, <h3>, <h4>, <h5> ja <h6> -elementtejä.
Esimerkissä kaikki kuusi erikoista otsikkoa, otsikoihin ei ole kohdistettu CSS-muotoiluja.


   <!DOCTYPE html>
   <html>
    <head>
     <meta charset="UTF-8"> 
    </head>
    <body>

     <h1> OTSIKKO (suurin fonttikoko) </h1>
     <h2> OTSIKKO </h2>
     <h3> OTSIKKO </h3>
     <h4> OTSIKKO </h4>
     <h5> OTSIKKO </h5>) </h6>

    </body>
   </html>
   

Tulos www-sivulle:



HTML-elementtien asemointi (sijainti) www-sivulla hoidetaan mieluiten CSS-ohjeilla. Alla kuitenkin malliksi minkälainen merkitys align-atribuuttien määritteillä on, lisäksi alimmainen otsikko asemoitu paikallisella CSS-ohjeella:


   <!DOCTYPE html>
   <html>
    <head>
     <meta charset="UTF-8"> 
    </head>
    <body>

     <h2 align="right"> OTSIKKO oikealle </h2>
     <h3 align="center"> OTSIKKO keskelle </h3>
     <h4 align="left"> OTSIKKO vasemmalle </h4>
	 <h2 style="text-align:right"> Otsikko oikealle </h2> <!-- paikallinen CSS-muotoilu -->

    </body>
   </html>
   

Tulos www-sivulle:



KOMMENTTI, <!-- teksti -->

Kommentti html-tiedostossa toteutetaan <!-- Kommentin teksti --> elementissä. Esimerkin HTML-koodauksessa vihreällä kirjoitetut on kommentteja,
Esimerkissä kaikki kuusi erikoista otsikkoa, otsikoihin ei ole kohdistettu CSS-muotoiluja.


   <!DOCTYPE html>
   <html>
    <head>
     <meta charset="UTF-8"> 
    </head>
    <body>

    <!-- Tämä on kommentti joka ei näy www-sivulla -->

    <h2>Kommenttien käyttäminen</h2>
    <p>Kommentit eivät näy www-sivuilla. Kommentteja käytetään html-tiedostossa sivun tekijän muistiinpanoina 
    sekä kommentti-elementillä voidaan kätevästi poistaa html-elementtejä käytöstä.</p>
	<!-- <h2>Otsikko joka on poistettu käytöstä</h2> -->

    </body>
   </html>
   

Tulos www-sivulle:



TEKSTI ja RIVINVAIHTO, <p> , <br>

Sivulla näkyvä teksti voidaan toteuttaa <p> -elementillä sekä pakotettu rivinvaihto <br> -elementillä. Kun sivun teksti-elementtiin on liitetty CSS-muotoilu sääntö rivinvaihtoja ei tarvitse asettaa itse. Pakotetulla rivinvaihdolla voi kuitenkin riviä vaihtaa tarvittaessa ilman että tekstiä joutuisi sijoittamaan uuteen tekstielementtiin.

Esimerkki, koodauksessa elementillä tehtyjä sekä HTML-koodiin tehtyjä rivinvaihtoja:


   <!DOCTYPE html>
   <html>
    <head>
     <meta charset="UTF-8"> 
    </head>
    <body>

     <p>" Ei jumalaut!<br>
      Mää en millä lakkaa ihmettelemäst millai mies pitä kaike romu takanas. 
	  Kui helvetin taval sitä voi oikke rakasta rätei ja lumpui.  
	  Jokku rakastava nätei flikoi, ja sen mää kyl ymmärrä, 
	  mut kuin helvetin taval rätei.<br> 
	  Ei, mää ole mahdottoma hämmästyny. 
	  Mää ihmettelen oikke kauhiast tämmöst ja 
      ole niinkun klavul päähä lyöty."<br><br>
 
      Väinö Linna, Tuntematon sotilas (Hietanen)</p>

    </body>
   </html>
   

Tulos www-sivulle, huomaa ettei HTML-koodauksessa olevat rivinvaihdot vaikuta selaimessa näkyvässä tekstissä:



TEKSTIN KOROSTUKSET

Tekstissä olevia osia voidaan korostaa eri tavoin esimerkiksi kursivoimalla, lihavoimalla, erilaisella fonttityypillä ja taustavärillä. Koko joukko seuraavista käy sinänsä suoraan tekstiin tehokeinoiksi ehkä kuitenkin paikallisesti lyhyiden osien korostuksina. Joissain tapauksissa voi kokeilla voidaanko näitä elementtejä muokata lisäksi CSS-muotoiluilla.

Esimerkeissä HTML-koodaus ja tulos www-sivulla:



POSTIOSOITE

Postiosoitteen esittämistä varten on edelleen oma address-elementti ja se on muokattavissa CSS-muotoiluilla. Esimerkissä on style-elementissä osoite-niminen CSS-muotoiluohje joka liitetään address-elementtiin class-atribuutilla:


   <!DOCTYPE html>
   <html>
    <head>
     <meta charset="UTF-8">
     <style>
      .osoite{
        color: darkred;
      }
     </style>	 
    </head>
    <body>

    <address class="osoite">
    Matti Meikäläinen<br>
    Eteläsuunnankatu 1 B 10<br>
    HELSINKI 000999<br> 
    Finland<br>
    </address>

    </body>
   </html>
   

Tulos www-sivulla:

LISTAT

Lista tai luettelo tarkoittaa asioiden esittämistä alekain järjestysnumerolla, raskalaisellaviivalla tai muulla tavalla erotettuna. Huomaa, listojen ulkonäkö on muotoiltavissa CSS-ohjeilla.
Listoja on kolmea tyyppiä:

Järjestämätönlista
Järjestettylista
Määritelmälista


Listan avulla voidaan myös toteuttaa www-sivujen navigointi-osa, www-sivustolla liikkuminen.
Taulukossa listojen elementeistä kooste:

Elementti Selitys Atribuutit - määritteet
ul Järjestämätönlista compact, mustapallo listan alkion edessä (Ei HTML5:ssä ?)
type:
type="disc" - musta pallo
type="circle" - valkoinen pallo
type="square" - musta neliö
ol Järjestettylista, luettelo asioista joiden edessä on tarkennin numero tai kirjain compact, mustapallo listan alkion edessä (Ei HTML5:ssä ?)
reverse, laskeva numerointi, (ei Explorer, ei Safari5 ?)
start, numerointi, esim start="10"
type, indeksi 1, A, a, I, i
esim type="i"
li Listan yhden alkion teksti esim <li> Teksti 1 </li>
dl Määritelmälista, sana jolle teksillä määritelmä, dl-elementtiin liittyy dt- ja dd- elementit (alla)
dt Määritelmä, sana tai termi
dd Määritelmään liittyvä teksti

järjestämätönlista toteutettuna ul-elementillä, listan sanoja ei ole numeroin tai muulla tavalla indeksoitu:


   <!DOCTYPE html>
   <html>
    <head>
     <meta charset="UTF-8">
     <style>     <!-- CSS-ohje, ul-elementin sisältö tummanpunainen-->
      ul{
        color: darkred;
      }
     </style>	 
    </head>
    <body>

     <ul>
      <li> Teksti 1 </li>
      <li> Teksti 2 </li>
      <li> Teksti 3 </li>
      <li> Teksti 4 </li>
     </ul>

    </body>
   </html>
   

Järjestämätönlista www-sivulla, CSS-ohjeella muotoitu tummanpunaiseksi:



Järjestämättömässä listassa (ul-elementti) vanhenevia atribuutteja (ei mukana HTML5:ssä !) ovat seuraavat:
- compact
- type, määritteet disc, square ja circle



Järjestettylista toteutetaan ol-elementillä. Järjestettylista tarkoittaa listassa olevien tekstien edessä olevaa indeksiä, joka voidaan määritellä numeroksi tai kirjaimenksi. Aloitusnumero tai -kirjain voidaan määritellä käytettävän erikseen.
Järjestetynlistan atribuutit ovat seuraavat:

- compact (ei HTML5:ssä mukana ?)
- eversed UUSI HTML5
- start, määrite number aloitus sivun tekijän antamasta numerosta
- type, määritteet 1, A, a, I tai i = millä tavalla lista merkitään

Alla, erilaisia järjestettyjälistoja:



Määritelmälista tarkoittaa listaa jossa on yleensä sana tai termi jolle on tekstimuotoinen selvitysosa. Määritelmälistan toteutuksessa käytetään dl-, dt- ja dd- elementtejä yhdessä.

Alla, määritelmälista:



MUOTOILTU TEKSTI

Muotoiltua tekstiä, eli preformatoitua tekstiä, käytetään haluttaessa esittää sivulla tekstiä sellaisenaan kuin se kirjoitetaan HTML-koodauksessa välilyönteineen, sisennyksineen ja rivinvaihtoineen.
Muotoiltu teksti tuotetaan pre-elementin avulla ja sen sisään voidaan sijoittaa CSS-muotoiltuja elementtejä.

Esimerkissä tuotetaan pre- ja code-elementillä C-kielen koodi esimerkki näytettäväksi selaimessa:




INFO-RUUTU, tekstiin upotettu opaste

Info-ruutu eli dokumenttiin upotettu-opaste avautuu näkyville kun hiirellä tai kosketusnäytöltä aktivoidaan opasteen sisältävä sana, lause tai kuvan alueelta kohta. Yksinkertaisimmillaan tämän voi toteuttaa abbr-elementillä.

Opastetta voidaan käyttää esimerkiksi sivulla olevien termien lyhenteiden selitteinä. Kuvasta voidaan kuvan koordinaattipisteiden avulla aktivoida opaste avautumaan. Opastetta voi käyttää yhdessä linkki-elementin kanssa.
Mikäli halutaan näyttävämpi opaste-teksti, toteutus ratkaistaan esimerkiksi JavaScript-ohjelmointikielellä ja CSS-ohjeilla.

Alla, kuinka opaste liitetään tekstissä termiin HTML-koodauksessa ja kuinka pienellä CSS-ohjeella termi voidaan muotoilla:


   <!DOCTYPE html>
   <html>
    <head>
     <meta charset="UTF-8">
     <style>     
      abbr{
        color: blue; <!-- asettaa CSS-termin siniseksi -->
      }
     </style>	 
    </head>
    <body>

     <h4>CSS-muotoilut</h4>

     <p> <abbr title=" Cascading Style Sheets ">CSS</abbr> tarkoittaa html-dokumenteille 
	   kehitettyjä tyyliohjeita. CSS-ohjeiden avulla vaikutetaan www-sivujen ulkonäköön sekä 
	   toiminnallisiin seikkoihin.</p>

    </body>
   </html>
   

Miltä tulos näyttää www-sivulla:



Lisää Info-tekstien esittämiseksi löydät CSS- ja JavaScript-oppaista

ERIKOISMERKIT

Erikoismerkit tarkoittaa joukkoa merkkejä joista osan saa näppäiltyä suoraan näppäimistöltä ja osaa ei, esimerkiksi copyright-merkki:



Löydät erikoismerkit täältä.