Linkki → Verkkosivut ja ohjelmointi → HTML:n perusteet
© Tekijät
Tässä luvussa
HTML-merkintäkielen uusin versio on HTML5, jota myös tässä oppimateriaalissa käytetään. HTML-tiedoston tiedostopääte on .html.
Kun HTML-tiedostoa tarkastellaan verkkoselaimella, tiedostosta tulee verkkosivu. HTML-tiedostoja voidaan tarkastella
millä tahansa verkkoselaimella. HTML-tiedoston nimessä ei saa olla ääkkösiä, erikoismerkkejä tai välilyöntejä, sillä
ne voivat aiheuttaa ongelmia joillakin selaimilla.
Syntaksi tarkoittaa HTML-merkintäkielen niin sanottua kielioppia. Koska tietokoneet ymmärtävät rajallisesti kirjoitettua tekstiä, täytyy aluksi määritellä yhteiset säännöt, joiden mukaan tiettyjä asioita merkitään ja ilmaistaan. Jotta tietokone ymmärtäisi kieltä, tulee kielen syntaksin olla oikein. Koodin syntaksin oikeellisuus voidaan tarkistaa validaattorilla eli syntaksin tarkastajalla.
HTML-tiedosto koostuu tekstistä, jossa tiedoston rakenne merkitään elementeillä. Elementit merkitään tagien väliin. Elementeillä on aina aloitus- ja lopetustagi, joiden välissä on varsinainen elementin sisältö. Esimerkiksi ensimmäisen tason otsikko merkitään h1-elementillä seuraavasti:
<h1>Ensimmäisen tason otsikko</h1>
<h1> on aloitustagi ja se avaa elementin. </h1> on lopetustagi ja se sulkee elementin.
Lopetustagissa on aina /-merkki. Elementtien välillä ja tekstin keskellä saa olla vapaasti ylimääräisiä välilyöntejä, sarkaimia
ja rivinvaihtoja, eikä niillä ole merkitystä elementin sisällön ulkoasuun. Jos siis tekstiin halutaan esimerkiksi
enemmän kuin yksi välilyönti peräkkäin, täytyy ylimääräiset välilyönnit merkitä erikoismerkeillä .
Jos elementillä ei ole tekstimuotoista sisältöä, lopetustagi voidaan lyhentää suoraan aloitustagiin. Esimerkiksi pakotettu rivinvaihto voidaan merkitä kokonaisuudessaan <br />.
Myös kuvaelementti voidaan päättää suoraan aloitustagiin <img src="kuva.jpg" alt="kuva" />.
Useampi sisäkkäinen elementti tulee aloittaa ja lopettaa siten, että sisempi avattu elementti suljetaan ennen ulomman
elementin sulkemista. Esimerkiksi kun halutaan kirjoittaa lihavoitua tekstiä, tulee käyttää p-tekstielementtiä ja strong-lihavointielementtiä sisäkkäin. Tällöin <p><strong>Moi</strong></p> on oikein, mutta <p><strong>Hei</p></strong>
on taas väärin, sillä ulompi p-elementti on suljettu ennen sisempää strong-elementtiä.
Tutustu alla olevista kappaleista löytyviin hyödyllisiin HTML5-elementteihin ja kokeile niitä täällä.
Esimerkki syntaksivärityksestä
HTML-merkintäkieltä kirjoitetaan tekstieditoriohjelmalla. Kirjoittamista varten kannattaa asentaa erillinen tekstieditori, joka tukee syntaksiväritystä ja automaattista sisennystä. Löydät lisätietoa Johdanto-luvusta.
Alla olevasta valikosta saat auki HTML-tiedoston niin sanotun peruspohjan, joka sisältää tiedoston pakolliset merkinnät ja elementit.
1 <!DOCTYPE html> 2 <html lang="fi"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Otsikko</title> 6 </head> 7 <body> 8 9 <h1>Ensimmäisen tason otsikko</h1> 10 <p> 11 Tämä on tekstikappale. <br /> 12 Tähän tulee myös kuva myöhemmin. 13 </p> 14 15 </body> 16 </html>
Rivillä 1 kerrotaan tietokoneelle, että tiedosto on HTML-tyyppinen tiedosto.
Rivillä 2 on html-elementin aloitustagi. HTML-tiedoston koko sisältö on html-elementin sisällä eli html-elementin lopetustagi on tiedoston viimeinen tagi.
Sivun kieli (esim. suomi eli fi) kerrotaan lang-attribuutissa.
Rivillä 3 on head-elementin aloitustagi.
Rivillä 4 on head-elementin sisältönä tekstin merkistön koodaustapa (utf-8).
Rivillä 5 on head-elementin sisältönä title-elementillä merkitty verkkosivun otsikko. Otsikko näkyy verkkoselaimen välilehdellä. Otsikon kannattaa olla lyhyt ja informatiivinen, sillä pidemmät otsikot eivät näy kokonaan
välilehdellä.
Rivillä 6 on head-elementin lopetustagi.
Riviltä 7 alkaa varsinaisen verkkosivun rakentaminen
body-elementin aloitustagilla. Kaikki verkkosivuilla näkyvä sisältö sijoitetaan siis body-elementin sisään.
Riveillä 8-14 on verkkosivun sisältöä.
Rivillä 15 on body-elementin lopetustagi.
Rivillä 16 on html-elementin lopetustagi.
HTML-merkintäkieltä kirjoitettaessa on suositeltavaa, että blokki eli saman elementin aloitus- ja lopetustagin muodostama kokonaisuus sisennetään omalle tasolleen. Tämä tekee HTML-tiedostosta selkeämmän ja helpommin luettavamman.
Alla olevissa valikoissa on lueteltu yleisimpiä ja hyödyllisimpiä HTML5-elementtejä.
h1 Ensimmäisen tason otsikko eli pääotsikko, yleensä vain yksi per verkkosivu.
h2, h3 Toisen ja kolmannen tason otsikko
p Normaali tekstikappale
ul Järjestämätön lista (merkitty luettelo, listamerkit tulevat automaattisesti)
ol Järjestetty lista (numeroitu luettelo, listanumerot tulevat automaattisesti)
li Järjestämättömän tai järjestetyn listan lista-alkio (sijoitetaan aina ul- tai ol-elementin sisälle)
a
Linkki joko verkkosivuston sisälle tai toiseen verkko-osoitteeseen. Elementin rakenne on seuraava: <a href="linkin osoite" title="linkin otsikko">linkin teksti</a>
Linkkielementti ei voi esiintyä yksin, vaan sen tulee olla jonkun lohkotason elementin (esimerkiksi p, li, td tai div) sisällä.
img
Kuva, jossa elementin rakenne on seuraava: <img src="kuvan osoite" alt="kuvan vaihtoehtoinen teksti" title="kuvan otsikko" />
Kuvan tulee olla jonkun lohkotason elementin (esimerkiksi p, li, td tai div) sisällä.
table Taulukko
tr Taulukon rivi (sijoitetaan table-elementin sisälle)
th Taulukon otsikkosolu (sijoitetaan tr-elementin sisälle)
td Taulukon solu (sijoitetaan tr-elementin sisälle)
strong Korostuselementti, jolla saadaan lihavoitua tekstiä. Strong-elementti tulee olla jonkun lohkotason elementin (esimerkiksi p, li, td tai div) sisällä.
em Korostuselementti, jolla saadaan kursivoitua tekstiä. Em-elementti tulee olla jonkun lohkotason elementin (esimerkiksi p, li, td tai div) sisällä.
hr Vaakatasoinen viiva, jonka syntaksi on <hr /> eli lopetustagi voidaan lyhentää suoraan aloitustagiin.
br Pakotettu rivinvaihto, jonka syntaksi on <br /> eli lopetustagi voidaan lyhentää suoraan aloitustagiin. Rivinvaihto tulee olla jonkun lohkotason elementin (esimerkiksi p, li, td tai div) sisällä.
span Span-elementtiä käytetään merkkaamaan tietty muotoilu (esimerkiksi tekstin väri) jollekin tekstin osalle esimerkiksi p-elementin sisällä. Span-elementti tulee olla aina jonkun lohkotason elementin (esimerkiksi p, li, td tai div) sisällä.
Lisää HTML5-elementtejä löytyy esimerkiksi Mozillan HTML-dokumentaatiosta.
Aloita omien verkkosivujesi tekeminen. Tarkoituksena on tehdä verkkosivut, joilla kerrot itsestäsi esimerkiksi osaamisesi ja harrastustesi kautta.
Elementeillä voi olla ominaisuuksia eli attribuutteja. Esimerkiksi kuva lisätään verkkosivulle img-elementillä, jolle on määritelty kolme attribuuttia: osoite, kuvan vaihtoehtoinen teksti ja kuvan otsikko.
Attribuuttien arvot merkitään lainausmerkkeihin =-merkin jälkeen. Elementtien ominaisuuksien lukumäärää ei ole rajoitettu.
Ääkkösten käyttö ei ole suositeltavaa tiedostojen tai luokkien nimissä.
Luokka eli class on attribuutti. HTML-elementit voidaan määrittää kuuluvaksi tiettyyn luokkaan. Luokka-attribuutin avulla jokainen saman luokan elementti voi esimerkiksi
saada saman muotoilun. Luokka-attribuutti voidaan antaa mille tahansa elementille. Esimerkiksi p-elementille voidaan antaa luokka, jonka nimi on
"isompiteksti", asettamalla attribuutiksi class seuraavasti:
<p class="isompiteksti">Tämä teksti on kirjoitettu isommalla fontilla.</p>
Luokan nimeä määritettäessä isoilla ja pienillä kirjaimilla on väliä. Tästä johtuen "isompiteksti", "ISOMPITEKSTI" ja "IsompiTeksti" ovat kaikki eri luokkia. Luokkia käyttäviä elementtejä voidaan muotoilla CSS:n avulla. Muotoilua opiskellaan lisää CSS:n perusteet -luvussa.
Tunniste eli id on attribuutti. Tunnistetta voidaan käyttää HTML-elementin yksilöimiseen. Toisin kuin luokka-attribuuttia, tiettyä
tunnistetta voidaan käyttää vain kerran samalla sivulla. Esimerkiksi otsikkoelementti voidaan merkitä tunnisteella "tervehdys":
<h2 id="tervehdys">Otsikkoteksti</h2>
Tunnistetta käytetään JavaScript-luvun projektitehtävässä.
Kuva lisätään verkkosivulle img-elementillä, jolle määritellään osoite, kuvan vaihtoehtoinen teksti ja kuvan otsikko. Osoite eli kuvan sijainti määritellään src-attribuutilla. Sijaintiin merkitään kuvatiedoston sijainti hakemistorakenteessa. Vaihtoehtoinen teksti merkitään alt-attribuutilla. Vaihtoehtoinen teksti näkyy verkkosivulla silloin, jos kuvaa ei jostain syystä pystytä lataamaan. Kuvan otsikko merkitään title-attribuutilla. Kuvan otsikko näytetään, kun osoitin viedään kuvan päälle. Img-elementti näyttää siis tältä:
<img src="kuva.jpg" alt="Kuva tietokoneesta" title="Tietokone" />
Muista tallentaa HTML-tiedosto aina muutosten jälkeen ja päivittää verkkosivu nähdäksesi muutokset myös verkkoselaimessa.
Jatka verkkosivujesi tekemistä mallin ja alla olevien ohjeiden mukaisesti.
Div-elementin nimi tulee sanasta division (osa / osa-alue) ja sitä merkitään <div>-tagilla. Div-elementtejä käyttämällä verkkosivu voidaan jakaa erilaisiin osiin, mikä helpottaa esimerkiksi verkkosivun muotoilua. Div-elementtien avulla voidaan tehdä esimerkiksi kappalemuotoiluja ja tekstikehyksiä verkkosivulle. Div-elementtien avulla tehtävää muotoilua opiskellaan lisää CSS:n perusteet -luvussa. Div-elementin syntaksi on:
<div class="luokan nimi"></div>
Esimerkki div-elementtien käytöstä
Jatka verkkosivujesi tekemistä mallin ja alla olevien ohjeiden mukaisesti. Tehtävässä verkkosivu jaetaan div-elementtien avulla osiin.
Verkkosivut koostuvat harvoin vain yhdestä HTML-tiedostosta. Verkkosivusto rakennetaan tekemällä useita verkkosivuja, joista viitataan toisiinsa linkeillä eli a-elementeillä. Linkkielementin rakenne on:
<a href="linkin osoite" title="linkin otsikko">linkin teksti</a>
Osoitteessa ei saa olla ääkkösiä, erikoismerkkejä tai välilyöntejä.
Suhteellinen viittaus on riippuvainen sijainnista, jossa viittaus tehdään. Verkkosivustolla suhteellisella viittauksella tarkoitetaan verkkosivun sijaintia hakemistorakenteessa omalla sivustolla. Suhteellisten viittausten hyötyjä ovat viittausten toimiminen millä tahansa palvelimella sekä viittausten pituus, sillä ne ovat lyhyempiä kuin absoluuttiset viittaukset.
Suhteellisia viittauksia:
<a href="etusivu.html"><a href="kuvat/"><a href="kuvat/logo.jpg"><a href="../"><a href="../sivut/">Absoluuttiseen viittaukseen merkitään viitattavan kohteen koko verkko-osoite. Absoluuttista viittausta kannattaa käyttää vain oman sivuston ulkopuolelle kohdistuvissa viittauksissa. Absoluuttinen viittaus on riippumaton sivusta tai sijainnista, jossa viittaus tehdään.
Absoluuttisia viittauksia:
Jatka verkkosivujesi tekemistä mallin ja alla olevien ohjeiden mukaisesti. Tehtävässä verkkosivulle luodaan viittaukset sivuston muihin sivuihin.