HTML-sivun luominen ja julkaisu

Oikeaoppisia verkkosivuja

HTML:n yhteydessä puhutaan usein määrittelyistä ja standardeista. Näillä tarkoitetaan erilaisia asioita, mutta yleisesti voidaan puhua yhteisön sopimista pelisäännöistä.

HTML:ää (kuten myös muita Webin pelisääntöjä ja teknologioita) kehittää ja valvoo WWW-konsortio W3C, joka perustettiin 1994. W3C:n Suomen toimisto perustettiin vuonna 2002.

Nyt HTML on kehittynyt versioon 4.01 ja se on edelleen hyvä valinta myös uusien sivujen luomisessa.

Nykyisin HTML:ää kehitetään dynaamiseen suuntaan, ja siksi käytössä on XHTML (eXtensible HTML)-kielen kehitys. XHTML:n käytöstä ei kuitenkaan saavuteta todellista etua, jos sivuilla ei käytetä myös XML-merkkausta (näihin palataan myöhemmin).

HTML-dokumentin luominen

HTML-sivujen luomiseen tarvitaan vain jokin tekstieditori, esim. Windowsissa Notepad. Sivujen tekoon on myös olemassa erilaisia valmiita sivunteko-ohjelmia, joita käsitellään myöhemmin.
Tiedosto tallennetaan .html -muotoon. Selain ymmärtää myös .htm-päätteen, mutta se on pikkuhiljaa jäänyt pois käytöstä.

HTML-dokumentin rakenne

W3: Introduction to the structure of an HTML-document

HTML-dokumentti näyttää siis yleisimmin perusmuodossaan tältä:

<!DOCTYPE HTML [käytetyn HTML:n versio]>
<html>
 <head>
 <title>Tähän otsikko</title>
 </head>
 <body>
 Sivun sisältö
 </body>
</html>

DOKUMENTTITYYPIN MÄÄRITTELY (DOCTYPE)
Kertoo käytetyt HTML-kielen version. Tällä kurssilla käytetään HTML:n versiota Transitional, joka näyttää seuraavalta:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/transitional.dtd">

Käytännössä dokumenttityypin määrittelyn suurin merkitys on nykyisin siinä, että se tarvitaan dokumentin määrätynlaista tarkistamista,validointia, varten. Validointia käsitellään tarkemmin myöhemmin.

TITLE eli sivuston otsikko kuvaa sivun sisällön. Se kannattaa miettiä tarkkaan, koska esim. google painottaa hakutuloksissa otsikon sisällä olevia sanoja. Otsikon tulee kuvata sivun sisältöä missä tahansa kontekstissa, ei vain yhden sivuston sisällä.

Lisäksi on hyvä käyttää HTML, HEAD ja BODY -elementtejä kuvaamaan dokumentin rakennetta.

Tiivistelmä rakenteen merkkauksesta

Tällä kurssilla käytetään siksi HTML 4.01 -kieltä. HTML 4.01 suositus. XHTML:ään kuuluu joitakin lisärajoituksia, joita on voidaan hyvin noudattaa (ja kannattaa noudattaa) myös HTML-koodissa:

elementtien nimet kirjoitetaan pienillä kirjaimilla (<html>, eli <HTML>)
määritteiden nimet kirjoitetaan pienillä kirjaimilla (width="100%", ei WIDTH="100%")
arvot kirjoitetaan pienillä kirjaimilla (align="center", ei align="CENTER")
määritteen arvo kirjoitetaan aina lainausmerkkeihin
määritteen rakenne on aina muotoa nimi="arvo". Esim. class="otsikko" , ei class=otsikko (huom. CSS:ssä erilainen merkintätapa)
alku- ja lopputagi ovat pakollisia kaikissa elementeissä: esim. kappale. Poikkeuksena ovat tyhjät elementit br, hr ja img, jotka html:n määrittelyn mukaan eivät tarvitse lopputagia. Selainten käyttäytymisestä johtuen suositellaan kuitenkin muotoja , <hr /> ja <img />

http://www.cs.tut.fi/~jkorpela/webjulk/1.3.html#kokeile

Kokeillaan verkkosivujen tekemistä

Tekstin muotoilu html:llä

Keskeisiä elementtejä:

h1 ensimmäisen tason otsikko (heading)
h2 toisen tason otsikko
h3 kolmannen tason otsikko
p kappale (paragraph)
br rivinvaihto
hr viiva

Tekstin osien muotoilu:

lihavointi (b)
voimakas korostus (strong)
italic ( i )
fontin suurentaminen (big)
alleviivaus (u)

http://myy.helia.fi/~vanvu/html/teksti.html
http://cc.joensuu.fi/~marttila/html/teksti.html
Tarkempi lista HTML:n tekstielementeistä Korpelan www-julkaisemisen oppaassa http://www.cs.tut.fi/~jkorpela/webjulk/1.9.html

HTML-elementit ja määritteet

Useimmat html-elementit sisältävät määritteitä, joilla kuvataan elementin esittämistapaa. Osa määritteistä on sallittu monissa elementeissä ja osa on elementtikohtaisia. On myös olemassa sekalainen joukko muita yleisiä määritteitä, joista osa on selainkohtaisia.

HTML-elementit ja attribuutit eli määritteet

Jukka K. Korpela: Elementtien määritteet

Elementtien yleiset määritteet (ns. ydinmääritteet)

Ydinmääritteitä voi käyttää lähes kaikissa elementeissä, mutta mikään ne eivät ole pakollisia.

määrite	merkitys	käyttötapa
class	elementin luokka	käytetään siihen, että CSS:ssä voidaan kohdistaa muotoiluohjeet haluttuihin html-elementteihin
id	yksikäsitteinen tunnus	määritteellä annetaan elementille yksikäsitteinen tunnus, jolla siihen voidaan viitata. Samassa dokumentissa ei saa olla samaa id-määritettä kahdelle elementille.
style	elementtikohtainen tyyliohje	HTML-elementtiin kirjoitettu tyyliohje. Sopii hyvin kokeiluihin, mutta muuten kannattaa käyttää ulkoista tyyliohjetta. Style on poistettu xhtml 1.0 -versiosta.
title	apuotsikko	liittää elementtiin otsikon, joka ei ole normaalisti näkyvissä. Selaimesta riippuen se näkyy pienessä tietolaatikossa, joka viemällä hiiren elementin päälle. Hyödyllisin linkkien ja kuvien määrittelyissä.

Keskittäminen

Align-elementillä teksti tai muu elementti voidaan sijoittaa suorakulmaisen alueen sisällä haluttuun kohtaan.

http://myy.helia.fi/~vanvu/html/muotoilut.html

Määritteiden nimeäminen

Määritteiden nimet kannattaa antaa mieluummin merkityksen kuin ulkoasun mukaan.

Esim.

mieluummin Huomio!

kuin Huomio!

Värit

W3 Schools: HTML colors

Selainturvalliset värit

Yksiköt

W3: Lenghts

HTML:n joukossa käytetään seuraavia mittoja:

Pikselit: jos mitta kirjoitetaan "600", se tarkoittaa 600 pikseliä
Prosentit: mitta voidaan antaa prosentteina esim. 50%.
Vaihtuva mitta: voi olla prosentuaalinen tai suhteellinen mitta. Suhteellinen mitta ilmaistaan "i*" missä i on kokonaisluku esim "2*". Jos jaetaan tila usean elementin kesken, niin kokonaisluku määrittää kuinka suuren osan jäljelle jäävästä tilasta elementti saa. Esim. jos jaettava tila 600 pikseliä ja se täytyy jakaa elementtien kesken suhteessa 1*, 2* ja 3*, saa ensimmäinen 100 pikseliä, toinen 200 pikseliä ja viimeinen 300 pikseliä.

Linkitys

Linkki (tai hyperlinkki) on kuva, teksti tai sana, joka siirtää käyttäjän sivulta toiselle. Ks. Freesoftin internetsanakirjan artikkeli Hypertext, erityisesti kohta Characteristics of good hypertext.

HTML-linkit tehdään a-elementillä:

<a href="linkin kohde"> Lähdeankkuri </a>

Joka näyttää selaimessa tältä: Lähdeankkuri

Kokeile linkitystä

Hakemistorakenne linkityksessä

Suhteellisen ja absoluuttiset linkit

Käytä tiedostojen ja hakemistojen nimeämisessä vain pieniä kirjaimia a-z ja pistettä, sekä tarvittaessa numeroita ja yhdysmerkkejä. Välilyönnit ja skandit voivat aiheuttaa ongelmia sivun esittämisessä.