HTML-dokumentit koostuvat elementeistä, jotka on merkitty sogenannten-tageilla. Tägeistä tunnistaa ne kulmikkaiden sulkeiden avulla. Lähes kaikki HTML-elementit ovat merkitty aloittavalla ja lopettavalla tagilla. Niiden välissä olevaa kutsutaan kelpoisuusalueeksi.
Esimerkki:
<h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>
Tämän syntaksin avulla ensimmäisen tason otsikko kirjoitetaan dokumenttiin. Alkava <h1>-tagi ilmoittaa selaimelle kyseessä olevan otsikon. Lopettava </h1> päättää otsikon. Lopettavat tagit tunnistaa avautuvasta kulmikkaasta sulkeesta, jonka jälkeen on kenoviiva </.
Tulee esiin kysymys elementtien nimien kirjoitusasusta: Miten on isot ja pienet kirjaimet? Kuten jo aiemmin kuvattu, tässä sarjassa keskitytään HTML5:een. Tässä voit todellakin valita isot ja pienet kirjaimet. Henkilökohtaisesti suosin kuitenkin johdonmukaista pienellä alkukirjaimella kirjoittamista ja aion toimia niin myös tässä sarjassa. Periaatteessa HTML5:n mukaan seuraavat asiat ovat kuitenkin oikein:
<h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1> <H1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</H1> <h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</H1>
Elementit, jotka avataan, tulee myös sulkea. Joten jos asetat <h1>, tulee se sulkea otsikon määrittelyn päätyttyä </h1>. Vaikka HTML5:ssä on poikkeuksia kuten luettelokohteet ja kappaleet, näistä sitten myöhemmin lisää.
Muuten HTML:ssä on myös niin sanottuja itsenäisiä tageja. Nämä koostuvat vain yhdestä tagista, eivät aloitus- ja lopetustagista. Tyypillinen esimerkki tästä on <br />.
Das ist eine Zeile.<br /> Das ist eine andere Zeile.
Tämä <br /> määrittää rivinvaihdon.
Tällaiset tyhjät tagit suljetaan yleensä kenoviivalla, vaikka HTML5:ssa se ei ole välttämätöntä. Tässä tapauksessa menisi myös näin:
<br>
Tämän sarjan aikana opit tuntemaan lisää näitä itsenäisiä tageja.
Elementit pesivät
Muuten HTML-elementtejä voi myös pesiä. Kuvittele, haluat kursivoida kappaleen otsikon sisällä. Kursivoituun esitykseen käytetään i-elementtiä.
<h1>PSD-Tutorials.de – <i>dein Grafik-, Web- & Lernportal</i></h1>
Huomioi pesityksen oikea järjestys. Suljetaan viimeisenä elementti, joka avattiin ensin. Tässä tapauksessa se on siis h1-elementti.
Käytä ominaisuuksia
Audivamisen ja itsenäisen tagin sisällä voidaan määritellä sogenannte ominaisuuksia. Nämä ominaisuudet voivat antaa elementeille lisäominaisuuksia. Aikaisemmin HTML-aikoina elementeille oli määritetty suhteellisen paljon ominaisuuksia. Se johtui yksinkertaisesti rakenteen ja suunnittelun sekoittamisesta. Esimerkiksi värimääritelmät annettiin suoraan HTML-elementille vastaavalla attribuutilla. Nykyään – tietysti myös CSS:n ansiosta – on mahdollista noudattaa tiukkaa erottelua suunnittelun ja rakenteen välillä, mikä on myös suositeltavaa. Siksi on enää verrattain vähän käytössä olevia ominaisuuksia.
Tärkeä ominaisuus on id. Tämän ominaisuuden avulla voidaan antaa yksilöllinen nimi HTML-elementille, jonka avulla sitä esimerkiksi CSS:n tai JavaScriptin avulla voidaan käsitellä.
<h1 id="head">PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>
Ominaisuuden määrittämiseksi välille lisätään välilyönti h1-nimen jälkeen. Sen perään tulee ominaisuuden nimi, joka on yleensä pienellä kirjoitettu. Ominaisuuden nimen perään tulee yhtäkuin-merkki. Lainausmerkeissä asetetaan ominaisuusarvo.
Elementille voi muuten antaa useampia ominaisuuksia. On täysin tavallista, että elementille määritetään niin sanottu luokka ja id. Myös tähän esimerkki: Yli id otsikko tunnistetaan yksiselitteisesti. Luokka sen sijaan on tarkoitettu luokittelemaan otsikko tiettyyn luokkaan. Näin voidaan määrittää, että kaikki elementit, joille on määritetty luokka sininen, näytetään sinisellä värillä. (Lisää CSS:stä ja värityksestä myöhemmin tietenkin kattavasti).
<h1 id="head" class="blue">PSD-Tutorials.de – sivustosi grafiikka-, web- & oppimisportaali</h1>
Attribuutit erotetaan tässä tapauksessa toisistaan välilyönnillä.
Tarkista koodi
Joitakin perussyntaksi sääntöjä olette jo oppineet. Erityisesti alussa, kun opettelee HTML:ää, on tärkeää noudattaa näitä sääntöjä. Mitä on kerran oppinut väärin, sitä on vaikeaa saada pois mielestään. Teidän tulisi siis aina tarkistaa HTML-koodinne oikeellisuus tai validoida se. Ette tietenkään tarvitse tehdä tätä itse. Tähän on olemassa asianmukaisia verkkotyökaluja. Esimerkiksi Validator löytyy esimerkiksi osoitteesta http://validator.w3.org/.
Parasta on siirtyä suoraan rekisteriin Validate by direct Input. Täällä voit liittää tarkistettavan HTML-koodin suoraan kopioimalla ja liittämällä. Muista ehdottomasti liittää koko tiedoston koodi, myös DOCTYPE-määrittely.
Jotta voit testata validaattoria, lisää seuraava teksti tekstikenttään ja klikkaa sitten Validate-painiketta.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – sivustosi grafiikka-, web- & oppimisportaali</h1> </body> </html>
Tuloksen tulisi näyttää seuraavalta:
Kaikki on kunnossa. (Nämä kaksi varoitusta voi tässä tapauksessa jättää huomiotta.) Jos siis näet viestin This document was successfully checked as HTML5!, kaikki on todella kunnossa. Mutta kuinka asia sitten ilmenee virhetilanteessa? Voit esimerkiksi tahallisesti tehdä virheen syntaksissa.
<h1 id=head">PSD-Tutorials.de – sivustosi grafiikka-, web- & oppimisportaali</h1>
Tässä unohdettiin aloittava lainausmerkki sanaan head. Jos tarkistat nyt syntaksin uudelleen, virhe havaitaan.
Validaattori antaa tämän jälkeen vastaavan viestin. Mitä tarkalleen meni pieleen, voi lukea alaosan ikkunasta.
Tässä kerrotaan hyvin, mikä itse asiassa virhe on.
Rivi 8, Sarake 12: " in an unquoted attribute value. Probable causes: Attributes running together or a URL query string in an unquoted attribute value.
<h1 id=head" >PSD-Tutorials.de</h1>
Näet siis suoraan, missä rivillä virheellinen syöte on, ja voit korjata sen. Validaattori auttaa siis luomaan puhdasta HTML-koodia. Teidän tulisi aina validoida koodinne. Selaimet usein näyttävät HTML-koodin oikein, vaikka syntaksi olisikin virheellinen. Toisissa selaimissa, joissa ette testaa sivujanne, tilanne voi kuitenkin olla aivan erilainen.
