2.1 HTML-sivun rakenne ja muita tunnisteita

Tässä lista rivinsisäisistä elementeistä, joilla voidaan tehdä tekstiin loogisia tai fyysisiä korostuksia. Fyysisellä korostuksella tarkoitetaan pelkästään tekstin ulkoasuun vaikuttavaa muutosta (kursiivi, lihavointi). Loogisella korostuksella tarkoitaan tekstin osan eroittamista tavallisesta tekstistä, esim. korostus tai vahvistus, ilman että otetaan kantaa siihen, millä visuaalisella tavalla nuo korostukset tai vahvistukset tehdään.

Vaikutus Koodi Esim Lopputulos Kommentteja
Lihavointi b <b>Bold</b> bold Fyysinen korostus, jota ei enää suositella vaikka toimiikin kaikissa selaimissa. Käytä mielummin allaolevaa.
Vahvistus strong <strong>strong</strong> strong Vahvempi looginen korostus (ts. rakenteellinen)
Kursiivi i <i>italic</i> italic Fyysinen korostus, jota ei enää suositella vaikka toimiikin kaikissa selaimissa. Käytä mielummin allaolevaa.
Painotus em <em>emphasis</em> emphasis Heikompi looginen korostus (ts. rakenteellinen)
Alleviivaus u <u>underline</u> underline Voi käyttää mutta ei suositella sillä alleviivattu sana saattaa näyttää linkiltä ja siten hämätä käyttäjää
Lyhyt lainaus cite <cite>cite</cite> cite Käytetään kun lainaus on lyhyt esim. keskellä kappaletta.
Yläindeksi sup x<sup>2</sup> x2 superscript
 
Alaindeksi sub Alaviite<sub>2,3</sub> Alaviite2,3 subscript
 
Lisätään vielä kolme vähemmän tärkeää (ei tarvitse muistaa näitä):
Termin määritelmä dfn <dfn>definition</dfn> definition Kun esim. joku ammattitermi tulee esiin ensimmäistä kertaa
Typewriter tt <tt>typewriter</tt> typewriter Muuttaa kirjaisimen Courieriksi
Yliviivaus strike <strike>strike</strike> strike Yliviivaa tekstin

Vaikka muutamat noista elementeistä näyttävätkin samoilta, niitä ei pidä sekoittaa toisiinsa. Kuten sivun alussa jo mainittiin, kursiivi tarkoittaa vain ja ainoastaan tekstin kallistamista, mutta painotus tarkoittaa jonkun sanan korostamista muusta tekstistä. Se miten tuo korostus tuodaan "graafisesti" ilmi voidaan määrittää jälkeenpäin. Sama pätee painotukseen (strong), lainaukseen (cite) sekä määritelmään (dfn).

Kysymys: kun nyt osaan käyttää useampaa eri muotoilua, voinko käyttää useampaa niistä yhtäaikaa?
Vastaus: Toki. Muista vain laittaa aina molemmat tunnisteet, sekä alku- että lopputagin.

Koodi Tulos
<b><i>Lihavointi ja kursivointi</i></b> Lihavointi ja kursivointi
<tt>Kirjoituskone ja <i>kursiivi</i></tt> Kirjoituskone ja kursiivi

Kun käytät sisäkkäisiä tageja tekstin muokkaamiseen, pidä mielessä että lopputagit ovat oikeassa järjestyksessä.

Esimerkki

<b><i><tt>Tekstiä tekstiä</tt></b></i>

HTML-sääntöjen mukaan yllä oleva esimerkki on virheellinen, sillä lopputunnisteiden järjestys ei ole symmetrinen alkutunnisteiden järjestyksen kanssa. Lopputunnisteiden järjestyksen tulee olla käänteinen alkutunnisteiden järjestykseen nähden.

Pistä seuraava sääntö mieleen: kirjoita aina yhden komennon alku- ja lopputagit samalla kertaa, ja sijoita ne aina haluamasi alueen ääripäihin.

Yllä oleva esimerkki korjattuna:

<b><i><tt>Tekstiä tekstiä</tt></i></b>

Huomaa että lihavointi-tagit ovat kauimpana molemmissa päissä. Seuraavaksi ovat kursiivi-tagit ja lopulta TT-tagit ovat lähimpänä sitä aluetta, johon muotoilun halutaan vaikuttavan.

Sinkkutunnisteet

Kuten aiemmin mainittiin, on olemassa muutamia tageja joilla ei ole lopputagia. Yksi näistä on rivinvaihto (break, br). Sen avulla voit pakottaa selaimen vaihtamaan riviä siellä missä itse haluat. Muutoinhan selain hoitaa rivittämisen itse automaattisesti.

<p>
Selain sijoittaa tekstiä yhdelle riville niin paljon kuin sinne mahtuu ja <br> 
sitten se vaihtaa riviä ja jatkaa tekstin sijoittamista seuraavalla <br> riville. 
Ei ole lainkaan väliä missä kohtaa koodiin on lisätty <br><b>rivinvaihtoja</b><br>
sillä selain ei ota niitä huomioon. Sama pätee välilyönteihin - vain 
yksi <br>otetaan mukaan. </p>

Selain sijoittaa tekstiä yhdelle riville niin paljon kuin sinne mahtuu ja
sitten se vaihtaa riviä ja jatkaa tekstin sijoittamista seuraavalla
riville. Ei ole lainkaan väliä missä kohtaa koodiin on lisätty
rivinvaihtoja
sillä selain ei ota niitä huomioon. Sama pätee välilyönteihin - vain yksi
otetaan mukaan.

Toinen paljon käytetty sinkkutagi on horisontaali viiva (horizontal reference, HR), jolla myöskään ei ole varsinaisesti alkua ja loppua:

tekstiä ... ja tähän loppuu kappale 2.
<br>
<hr>
Kappale 3 alkaa sitten tästä.

tekstiä ... ja tähän loppuu kappale 2.

Kappale 3 alkaa sitten tästä.

(Kuten aiemmin mainittiin, myöskin kaikki lohkoelementit aiheuttavan rivinvaihdon.)

Rakenne

Ennen kuin voit tehdä ensimmäisen ihka oman web-sivusi, täytyy vielä käydä läpi muutama hyvin oleellinen tunniste. Ne ovat huipputärkeitä siksi, että niiden pitää olla kaikissa maailman web-sivuissa.

Kaikki WWW-sivut alkavat tunnisteella <html> ja loppuvat tunnisteeseen </html>. Ihan kaikki.

Lisäksi HTML-tiedostossa on kaksi osaa: head ja body, ja niillä myös alku- ja lopputunnisteet.

Esimerkki
<html>
<head>
	Tähän tulee aputietoja sivun sisällöstä yms. Eivät näy sellaisenaan 
	käyttäjälle paitsi otsikko
</head>
<body>
	tähän varsinainen sivun sisältö, eli näkyviin tulevat elementit
</body>
</html>

Bodyyn tulee kaikki se mitä selain näyttää tietokoneen ruudulla, ja head-osaan mm. sivun nimi (otsikko), joka tulee näkyviin selaimen yläreunassa sekä muutamia kuvauksia sivun sisällöstä (esim. hakurobotteja varten) jotka eivät näy web-selaimessa. Head-osaa käsittelemme vähän myöhemmin.

Jokaisella web-sivulla pitää olla nimi tai otsikko (engl. title). Tämä otsikko näkyy sitten selaimen vasemmassa yläkulmassa

titlekuva

Otsikko eli <title> laitetaan aina HTML-sivun head-osaan.

Esimerkki
<html>
<head>
	<title>Remontti-Reiskan kotisivu</title>
</head>
<body>
	tähän sisältö
</body>
</html>

Ja [tästä] voit aukaista (lähes) koodin mukaisen ikkunan, jotta näet mihin tuo otsikko tulee näkyviin. Olen lisännyt siihen vielä tuon ikkunansulkemiskomennon, joka ei näy esimerkkikoodissa. Lisäksi IE-selain näyttää lisäävän otsikon eteen pätkän URL:ia.