WWW-ohjelmointi

Head-osio

Head-osioon merkitään tietoa dokumentista sen näyttämistä varten. Ei siis varsinaista sisältöä. Määrittelyjä ovat esimerkiksi:

  • dokumentin kieli
  • käytetty merkistö
  • dokumentin otsikko
  • ulkopuoliset tiedostot (css, javascript, ikoni, rss,…)
  • tyyli- ja skriptiosat
  • jne.

Title

Dokumentin otsikko lisätään head-osioon <title>-tagilla. Otsikko näytetään esimerkiksi selaimen yläpalkissa sekä selaimeen talletetuissa kirjanmerkeissä. Otsikko on myös se teksti, jonka hakukoneet näyttävät hakutuloksissa. Hakukoneet myöskin painottavat tuloksissaan otsikossa käytettyjä sanoja.

<title>Sivun otsikko</title>

Base

Dokumentin linkkien osoitteiden ja target-attribuutin oletukset voidaan halutessa asettaa <base>-tagilla.

<base href="http://petrit.net/www-ohjelmointi" />
<base target="_blank" />

Link

Ulkoisten tiedostojen liittäminen dokumenttiin tapahtuu <link>-tagilla. Sillä on pakollisena attribuuttina rel, jolla kerrotaan tiedoston suhde alkuperäiseen dokumenttiin. Muita attribuutteja ovat href, joka kertoo linkitetyn tiedoston osoitteen, sekä type, joka kertoon tiedoston MIME-tyypin.

<link rel="stylesheet" type="text/css" href="tyyli.css" />
<link rel="copyright" href="http://creativecommons.org/licenses/by-sa/4.0/" />
<link rel="shortcut icon" href="/static/favicon.ico" />
<link rel="alternate" href="/index.xml" type="application/rss+xml" title="www-ohjelmointi" />

Meta

Dokumentille voidaan antaa erilaista metatietoa <meta>-tagilla. Tagille kirjoitetaan kaksi attribuuttia:

  • name kertoo, minkä tyyppinen tieto on kyseessä (esim. name="autor").
  • content kertoo tiedon sisällön (esim. content="Petri").
<meta name="author" content="Petri">
<meta name="description" content="www-ohjelmoinnin opetussivusto">
<meta name="generator" content="Hugo 0.15">

Dokumentissa käytetty merkistökoodauksen ilmoittaminen on erityisen tärkeää, kun sen sisältö on jotain muuta kuin englantia. Esimerkiksi suomenkielisissä dokumenteissa se on tärkeää, jotta å, ä ja ö näkyvät selaimissa oikein. Merkistökoodaus voidaan kertoa HTML5-dokumentissa käyttäen <meta>-tagin charset-attribuuttia.

<meta charset="utf-8">

Muissa dokumenttityypeissä määrittely on hiukan monimutkaisempaa ja tehdään seuraavasti:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Style

Dokumentin ulkoasua muokkaavia tyylimäärittelyjä voidaan lisätä suoraan HTML-dokumentin head-osioon <style>-tagilla. Lisää dokumentin ulkoasun muokkaamisesta kurssin CSS-osuudessa.

<style>
    ... css-sääntöjä ...
</style>

Script

Sivulla suoritettavaa Javascript-ohjelmakoodia voidaan joko linkittää ulkopuolisesta tiedostosta tai suorittaa suoraan HTML-tiedostosta <script>-tagilla. Lisää kurssin Javascript-osiossa.

<script type="text/javascript" src="js/myscript.js"></script>
<script type="text/javascript">
    ... javascript-koodia ...
</script>