HTML opas, osa 1/3

Aihe: HTML opas, osa 1/3 Ma Toukokuu 26, 2008 2:33 pm

Mikä on HTML:n pohjimmainen idea?

Tietokoneissa "pinnan alla" teksti on peräkkäisiä numeroita, joita sanotaan merkeiksi silloin kun ne esittävät tekstiä. Merkkejä ovat esim. pienet ja ISOT kirjaimet, välimerkit .,-/()= ja välilyönti. Näppäimistön napin painaminen tuottaa aina yhden merkin.

Merkkeihin ei sisälly mitään tietoa siitä, että minkä kokoisina tai värisinä ne pitäisi esittää, tai ovatko ne lihavoituja, kursivoituja, Times New Romania tai Arialia tms. fonttia.

HTML:n ideana on sopia merkinnöistä, joilla teksti saadaan näkymään halutulla tavalla, jonkun kokoisena tai värisenä. Näitä merkintöjä sanotaan tageiksi.
Millainen on HTML-tagi

HTML-tagi koostuu samanlaisista merkeistä kuin tekstikin. <-merkki aloittaa tagin ja >-merkki lopettaa sen. Aloitus- ja lopetusmerkkien väliin tulee tagin nimi. Esim. <hr> on tagi, joka tuottaa sivulle vaakasuoran viivan.

Tekstiin vaikuttavat tagit esiintyvät pareittain. Vaikutus alkaa alkutagista ja loppuu lopputagiin. Lopputagi tehdään lisäämällä nimen eteen /-merkki. Alkutagi+sisältö+lopputagi-yhdistelmän nimi on elementti. Alla on esimerkki B-elementistä, jonka vaikutus on tekstin lihavointi.

Tässä on <b>lihavoitu</b> sana.

Edellinen esimerkki näkyy selaimessa näin: Tässä on lihavoitu sana.

Tagin nimen ja loppumerkin väliin voi laittaa attribuutteja, joita näet myöhemmissä esimerkeissä.
Miten tageista ja tekstistä tulee HTML-sivu

HTML:ssä vaaditaan tiedostoon tietyt elementit. Alla on pienin mahdollinen HTML-sivu.

<html lang='fi'>
<head>
<title>Otsikko</title>
</head>
<body>
Sivun sisältö tulee tähän.
</body>
</html>

"Otsikko" näkyy selaimen otsikkopalkissa ja "Sivun sisältö tulee tähän" näkyy sivun sisältönä. Voit kopioida esimerkin Muistioon, tallentaa sen nimellä "testi.html" ja katsoa tekemääsi tiedostoa selaimella.

HTML-tiedostossa välilyöntejä ja rivinvaihtoja saa olla melkein missä tahansa kohdassa (myös tekstin välissä) niin paljon kuin tarvitaan. Tekstin ja tagit voi siis järjestellä siten, että se näyttää selkeältä.
Tärkeimmät tagit

<p> ... </p>
Tekstikappale, jonka ylä- ja alapuolelle tulee pieni tyhjä väli.
<h1> ... </h1>
Suuri otsikko. Numerot 2-6 ovat pienempiä.
<b> ... </b>
Lihavointi.
<i> ... </i>
Kursivointi.
<br>
Rivin katkaisu, teksti jatkuu seuraavan rivin alusta.
<hr>
Vaakasuora viiva.
<a href="http://www.sivuille.net/"> ... </a>
Linkki mainittuun osoitteeseen. Kun teet linkin toiselle omalle sivullesi, pelkkä tiedoston nimi riittää osoitteeksi.
<img src="kuva.gif">
Kuvan lisäys sivulle.

Taulukot

<table>
<tr><td>eka<td>toka<td>kolmas
<tr><td>1<td>2<td>3
<tr><td>4<td>5<td>6
<tr><td>6<td>7<td>8
<tr><td>9<td>10<td>11
</table>

eka toka kolmas
1 2 3
4 5 6
6 7 8
9 10 11
Luettelo

<ul>
<li>eka
<li>toka
<li>kolmas
</ul>

* eka
* toka
* kolmas

Muuta

Tagien attribuutteja on huomattavan paljon, ja monet niistä ovat hyödyllisiä. Myös tageja on enemmän kuin tässä on esitelty. Katso lisää jostain tarkemmasta ohjeesta, joihin on linkkejä sivun lopussa.

Kannattaa katsoa muiden sivuista miten he ovat tehneet. Selaimissa on yleensä "Näytä lähdekoodi", "View source" tms. kohta, josta pääset helposti katsomaan miten sivu on tehty.

Kun olet oppinut tekemään HTML-sivuja, kannattaa sen jälkeen tutustua CSS-tekniikkaan, jolla saat lisättyä värejä ja taustakuvia, asetettua fontin eli kirjasintyypin, säädettyä kappaleiden välejä, ym.

Värimääritysten kanssa auttaa värikartta ja -sekoitin.