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 |
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-INDEKSITuote <sub> teksti </sub> Tuote teksti |
Globaali & tapahtuma
| CSS-muotoilu<p>Teksti<sub style="color:red">punainen</sub></p> Tekstipunainen |
sup | YLÄ-INDEKSITuote <sup> teksti </sup> Tuote teksti |
Globaali & tapahtuma
| CSS-muotoilu<p>Teksti<sup style="color:blue">sininen</sup></p> Tekstisininen |
small | PIENELLÄ TEKSTIPienellä<small> teksti </small> Pienellä teksti |
Globaali & tapahtuma
| Saattaa poistua HTML5:stä CSS-muotoilu, kuten edellä |
dell | YLIVIIVATTU TEKSTI<dell> teksti </dell> |
| 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-muotoilujaCSS värit esim |
pre | KIRJOITETTU TEKSTI, siten kuin se kirjoitetaan välilyönteineen ja rivinvaihtoineen näppäimistöltä <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 oikeallertl - 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 |
a | LINKKI TEKSTISSÄ<a href="url"> teksti </a> |
| CSS-muotoilut |
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 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:
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ä:
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:
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:
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 pallotype="circle" - valkoinen pallotype="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, iesim 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ä.
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 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 tarkoittaa joukkoa merkkejä joista osan saa näppäiltyä suoraan näppäimistöltä ja osaa ei, esimerkiksi copyright-merkki: