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ä.
...
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ä.
...
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
...
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.
...
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
| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
Määritteiden nimet kannattaa antaa mieluummin merkityksen kuin ulkoasun mukaan. Esim. mieluummin <p class="varoitus"> Huomio! </p> kuin <p class="punainen"> Huomio! </p> |
Värit
Yksiköt
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.
...
| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
<a href="linkin kohde"> Lähdeankkuri </a> Joka näyttää selaimessa tältä: Lähdeankkuri |
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ä.
Kuvien lisääminen
Kuvien muodot ja lisääminen verkkosivuille
...