WWW-sivun perustukset
Tutkimme WWW-sivun rakennetta ohessa olevan esimerkin avulla. Esimerkissä voi olla muutamia sinulle vieraita määrityksiä, mutta niistä ei kannata huolestua tässä vaiheessa.
- Ensimmäisellä rivillä on XML-määritys, jossa kerrotaan XML:n versio sekä käytettävä merkistö. Merkinnällä halutaan kertoa, että käytämme oletuksesta (UTF8 tai UTF16) poikkeavaa merkistöä (ISO-8859-1), joka sisältää muun muassa ä- ja ö-kirjaimet. Merkintä ei ole pakollinen, mutta erittäin suositeltava merkistöongelmien välttämiseksi.
- Toisella ja kolmannella rivillä määritellään WWW-sivussa käytettävä dokumenttityyppi. Dokumenttityypillä selaimelle kerrotaan, minkä tyyppinen dokumentti on kyseessä, jotta selain osaa tulkita WWW-sivun mahdollisimman hyvin. Dokumenttityypin määrittely mahdollistaa WWW-sivun HTML-määritysten oikeellisuuden tarkastamisen eli validoinnin. Validointia tarkastelemme hieman myöhemmin.
Meidän ei tarvitse joka kerta kirjoittaa XML- ja dokumenttityyppimäärityksiä, vaan ne on kätevintä pitää mukana valmiissa sivupohjassa. Sivupohjalla tarkoitetaan uuden sivun tekemisessä käyttämäämme perusrakennetta, joka voi sisältää sivun perustietoja, kuten esimerkiksi tekijätiedot. Sivupohjaa tehdessämme voimme kopioida valmiit määritykset esimerkiksi tästä artikkelista, joten niitä ei tarvitse välttämättä kirjoittaa käsin.
Artikkelia (sivua) kirjoittaessamme meitä kiinnostavat
edellisiä enemmän html
-elementti sekä sen sisään tulevat osat.
html
-elementti toimii eräänlaisena WWW-sivun juurielementtinä,
jonka sisään määritellään varsinainen sivun sisältö.
Jokaisesta WWW-sivusta täytyy siis löytyä html
-elementti.
Esimerkin html
-elementin sisään on määritelty WWW-sivun nimiavaruus ja sisällön kieli.
Määrittelyt kannattaa liittää osaksi WWW-sivua, mutta niiden merkitystä emme tarkastele tässä yhteydessä tämän enempää.
html
-elementin sisään määritelemme WWW-sivun kaksi eri osaa, jotka on korostettu oheisessa esimerkissä.
Esimerkin WWW-sivu näytetään WWW-selaimessa kuvan 1 mukaisesti.
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi"> <head> <link rel="stylesheet" type="text/css" media="all" href="tyylilomake.css" /> <title>Asiakirjan otsikko</title> </head> <body> <h1>Asiakirjan otsikko</h1> <p>Ensimmäinen tekstikappale.</p> </body> </html>
head
-osaan määritelemme WWW-sivun otsikkotiedot,
jotka eivät varsinaisesti näy WWW-sivua lukevalle käyttäjälle.
Esimerkkisivussa head
-osaan on määritetty muutamia tietoja.
- Sivuilla käytettävä tyylilomake on määritelty
head
-osaanlink
-elementin avulla. Tyylilomakkeeseen kootaan kaikki WWW-sivun ulkoasuun liittyvät määritykset.link
-elementti siis mahdollistaa erillään määritellun WWW-sivun rakenteen ja ulkoasun yhdistämisen. Oman tyylilomakkeesi käyttäminen onnistuu muuttamalla tyylilomake.css-tekstin paikalle oman tyylilomakkeesi nimi. - WWW-sivun otsikko on määritelty
title
-elementin avulla.title
-elementin sisältö näytetään WWW-sivun lukijalle selainikkunan otsikkopalkissa.title
-elementin sisällöksi kannattaa määrittää mahdollisimman hyvin WWW-sivua kuvaava otsikko. Yleensä WWW-sivun pääotsikko on hyvä toistaatitle
-elementin sisällä, ellei keksi vieläkin kuvaavampaa otsikkoa.title
-elementin sisältö on tärkeä myös WWW-sivun löytymisen kannalta. Monet hakukoneet (esim. Google) järjestävät hakujen tuloksen siten, ettätitle
-elementistä löytyneet sanat menevät sisällöstä löytyneiden sanojen edelle hakutuloksissa. Käyttäjälletitle
-elementti on myös tärkeä, koska sen perusteella voi erottaa kirjanmerkkeihin (tai suosikeihin) liitetyt WWW-sivut toisistaan.
body
-osaan määritellään WWW-sivun varsinainen sisältö.
Kaikki body
-osaan tulevat sisällöt näytetään WWW-sivun lukijalle selainikkunassa.
Esimerkkisivulla on ainoastaan ensimmäisen tason otsikko sekä yksi tekstikappale.
Seuraavissa alaluvuissa käydään tarkemmin läpi erilaisia WWW-sivun sisällön rakenteeseen liittyviä elementtejä,
kuten otsikoita ja listoja.
Käyttäjien kommentit