WEB-opas, HTML - Asetukset

Ilmoitukset selaimelle, head-elementti

HTML-dokumentin alussa, head-elementissä, on joukko elementtejä joilla tuotetaan ilmoituksia sekä ohjeita selaimelle. Näillä elementeillä liitetään html-tiedostoon joukko muita tiedostoja, joko siltä palvelimen talletuspaikalta jossa www-sivusto dokumentit on talletettuna tai ulkopuoliselta palveluntarjoajan talletuspaikasta. Toinen merkitys elementeille on tuottaa hakukoneille informaatiota jotta ne löytäisivät sivut annettujen hakusanojen avulla.

Yhteisenä nimenä näille elementeille voisi olla Dokumentin hallinta-elementit.

Alla, HTML-koodaus esimerkki on kopio tämän www-oppaan html-tiedoston alusta:


<!DOCTYPE html>
 <html>
  <head>
   <title> HTML-opas </title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta charset="UTF-8">
   <link rel="stylesheet" type="text/css" href="office_style.css">
   <link href="prism.css" rel="stylesheet" />
   <script>
    function omaOhjelma3() {
     document.getElementById("testi3").innerHTML = "Tekstin vaihto valmis.";
    }
   </script>
   <style>
    .laatikko1 {
     background-color: FFFFFF;
     width: 75%;
	 .
	 .

Selaimia ohjaavia-elementtejä:

Elementti Tarkoitus Atribuutit / Määritteet
title Selaimen välilehdellä näkyvä www-sivun otsikko, yksi tärkeimmistä tunnisteista vaikka näkyvyys käyttäjälle pieni. Esimerkiksi hakukoneet löytävät title-elementiin kirjoitetun otsikon. lang
dir
id
title
link Linkittää HTML-tiedostoon jonkin muun tiedoston Useita atribuutteja ja määritteitä.
meta Avainsanoja sekä asetuksia. charset
content
http-equiv
name
scheme
script Esimerkiksi JavaScirpt-tiedoston liittäminen koskemaan HTML-dokumenttia. async
charset
defer
src
type
xml:space
noscript Varasisältö selaimille. Teksti tai jonkin muu sisältö.
style CSS-muotoiluasetuksia. Yleensä käytettäessä lyhyet paikalliset CSS-ohjeet. Samoja kuin muissakin elementeissä.
base Yleisesti, dokumentin URL-osoite eli dokumentin talletuspaikka, tai miten dokumentti avataan. href
target

Tarkemmin taulukon elementeistä alla


Asetukset ja avainsanat - meta-elementti

meta-elementeillä ohjataan esimerkiksi avainsanoin ja termein miten selain käsitelee avattavaa html-tiedostoa.

Atribuutti Määritteet Tarkoitus
charset UTF-8
ISO-8859-1		 Merkistö-asetus, mikä on koodaus talletettaessa html-tiedosto.
UTF-8 = Unicode-merkistö (käytä Suomessa tätä),
ISO-8859-1 = latinan merkistö.
content Teksti Yleisesti, lisä-informaatiota tuottava teksti mutta myös ns metadatan sijoittamiseen käytetty atribuutti..
http-equiv content-type
default-style
refresh		 Standardin mukaisia otsikko-tietoja. (katso esimerkit)
name application-name
author
description
generator
keywords		 Metadatan yksilöiminen nimellä. Huomaa, että hakukoneet löytävät tästä elementistä sanoja.
scheme Sisällön formaatti / URL EI HTML5 ! Käytettiin aiemmin yhdessä content-atribuutin kanssa.

Esimerkkejä meta-elementin käyttämisestä:


<!DOCTYPE HTML> 
<html> 
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="date" content="07-05-2014" scheme="pv-kk-vvvv">
  <meta name="identifier" content="12-3456-7890-1" scheme="ISBN">
  <meta name="application-name" content="HTML Colors">  
  <meta name="description" content="Pieni www-opas">  
  <meta name="keyword" content="HTML5,CSS,JavaScript">
  <meta name="autor" content="Joku Gurunen">	 
  <meta name="generator" content="Notepad++">	 
 </head>
HTML-koodi esimerkin selitykset:
Esimerkki Selitys
<meta charset="UTF-8"> charset= - merkkiasetus
"UTF-8 - asettaa selaimen ymmärtämään skandinaavisia kirjaimia
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Asettaa selaimen tulkitsemaan sekä sovittamaan www-sivun käytössä olevan laitteen näytön koon mukaan
<meta name="date" content="07-05-2014" scheme="pv-kk-vvvv"> name -atribuutin määrite date asettaa käyttöön päivämäärän,
content -atribuutissa annetaan päivämäärä,
schme -atribuutissa päivämäärän muoto.
<meta name="identifier" content="12-3456-7890-1" scheme="ISBN"> name -atribuutin määrite identifier (tunniste),
content -atribuutissa numerokoodi,
schme -atribuutilla viestitään kyseessä olevan ISBN-numero
<meta name="application-name" content="HTML Colors"> name -atribuutin määrite application-name (tunniste),
content -atribuutilla viestitään sivulla olevan www-sovelluksen jonkin HTML Colors-niminen sovellus.
Tätä käytetään vain jos sivu on osa web-sovellusta.
<meta name="description" content="Pieni www-opas"> name -atribuutin määrite description (tunniste),
content -atribuutissa kerrotaan kyseessä olevan Pieni www-opas.
Sivun kuvaus, jonka hakukone saattaa näyttää tiivistelmänä sivusta.
<meta name="keywords" content="HTML5,CSS,JavaScript"> name -atribuutin määrite keywords (tunniste),
content -atribuuteilla HTML5, CSS, JavaScript viestitään sivuston avainsanoista.
Tällöin esimerkiksi hakukoneet löytävät annetuilla sanoilla www-sivuston. Sivua kuvaavia termejä.
<meta name="autor" content="Joku Gurunen"> name -atribuutin määrite autor (tunniste),
content -atribuutissa kerrotaan Joku Gurunen olevan esimerkiksi www-sivuston tekijä.
Yleisesti www-sivun yhden tekijän nimi.
<meta name="generator" content="Notepad++"> name -atribuutin määrite generator (tunniste),
content -atribuutissa kerrotaan www-sivun tekemiseen käytetyn Notepad++-ohjelmaa.
Yleisesti, kertoo sen ohjelman nimen jolla www-sivu on tuotettu.

Atribuutin http-equiv asetuksia esimerkein: 


  <!DOCTYPE HTML> 
  <html> 
  <head>
   <meta http-equiv="refresh" content="30">
   <meta http-equiv="default-style" content="the document's preferred stylesheet">
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  	 
  </head>

HTML-koodi esimerkin selitykset:

Esimerkki Selitys
<meta http-equiv="refresh" content="30"> http-equiv - atribuutin määrite refresh (päivitä),
content atribuutilla päivittyminen 30 sekunnin välein.
meta-elementin atribuutin http-equiv-määritteillä voidaan toteuttaa esimerkiksi
nettikameran päivittyminen (refresh).
Tärkeimpiä on kuitenkin muut metatietona annettavat ohjeet selaimia varten.
Meta-astuksien kanssa on syytä olla varovainen koske ne eivät näy sivuston käyttäjälle ja
voivat olla ongelmallisia lähinnä sivuston käytön kannalta.
<meta http-equiv="default-style" content="the document's preferred stylesheet"> http-equiv -atribuutin määrite "default-style" (virhetilanteen tunnistaminen),
content -atribuutissa "ensisijaisesti tyyli-tiedosto".
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> http-equiv -atribuutin määrite content-type (sisällön tyyppi),
content -atribuutissa tekstinä oleva html sekä koodaustavan olevan UTF-8
<meta http-equiv="X-UA-Compatible" content="IE=edge"> http-equiv -atribuutin määrite X-UA-Compatible (tunniste),
content-atribuutissa Internet Explorer ilmoitus.
Tämä ilmoitus on tarkoitettu viestiksi Mikrosoft:n Explorer-selaimelle jotta selain osaa käsitellä sivun sisältöä oikein


Selaimen välilehti - otsikko ja ico:n

Selaimen vasemmassa yläkulmassa (kuva alla), selaimen ns välilehdessä näkyvä ikoni (pienikuva) tuodaan link-elementillä ja otsikko tuotetaan title-elementillä. Sivustolla voi olla useita sivuja ja jokaisen www-sivun välilehti-otsikkona voi olla eri teksti. Esimerkki koodauksessa nämä sijaitsee head-elementin alkuosassa.

Firefox-selaimen vasen yläkulma.

Välilehden ikonin ja tekstin sijainti HTML-koodauksessa (alla):


  <!DOCTYPE HTML> 
  <html> 
  <head>
   <meta charset="UTF-8">
   <title> WWW-opas </title>
   <link rel="shortcut icon" href="ict.ico" />
   .
Esimerkki Selitys
<title> WWW-opas </title> Selaimen välilehden teksti kirjoitetaan title-elementtiin
<link rel="shortcut icon" href="ict.ico" /> Välilehden ico:n esittämiseen käytetään link -elementtiä.
rel -atribuutin määrite shortcut icon (tunniste),
href -atribuutissa ilmoitetaan tiedostonnimi ja -pääte (ico).

Ikonit tehdään ico-generaattoreilla (ei esim Paint-ohjelmalla), linkkejä joihinkin ico-generaattoreihin:
Favicon & App Icon Generator ICO converter ConvertIco Favicon


Selaimen ohjaaminen - link

Selaimelle ilmoitetaan head-elementissä link-elementeillä mistä selain hakee hakee HTML-koodaukseen liittyviä ja liitettyjä tiedostoja.


  <!DOCTYPE HTML> 
  <html> 
  <head>
   <meta charset="UTF-8">
   <title> WWW-opas </title>
   <link rel="shortcut icon" href="ict.ico" />

   <link rel="stylesheet" type="text/css"  href="../style.css" />
   <link href="style_menu.css" rel="stylesheet" />
   <link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px), 
	    only screen and (max-width:480px)" href="../mobile.css" />
   .

Esimerkkikoodauksen linkkien selitykset:

Esimerkki Selitys
<link rel="stylesheet" type="text/css" href="../style.css" /> www-sivun muotoiluun käytettävät CSS-ohjeet.
rel -atribuutissa määritteenä kerrotaan linkintyyppi stylesheet, eli kyseessä on CSS-tyylitiedosto.
type -atribuutissa text/css -määritteenä tiedostontyyppi on tekstiä ja CSS-muotoiluja,
href -atribuutissa kerrotaan CSS-tiedoston talletuspaikka ../style.css -määritteenä.
Tiedosto style.css sijaitsee tässä tapauksessa ns juurihakemistossa.
<link href="style_menu.css" rel="stylesheet" /> href -atribuutin määrite style_menu.css tiedoston nimi,
rel -atribuutissa stylesheet minkä tyyppinen tiedosto on kyseessä.
<link rel="stylesheet" type="text/css"
media="only screen and (max-device-width:480px), only screen and (max-width:480px)" href="../mobile.css" />		 Kuten edellinenkin seuraavilla poikkeuksilla:
type -atribuutin määrite txt/css tekstinä CSS-ohje,
media -atribuuteilla näyttölaitteen maksimi leveys.
href -atribuutissa tiedoston nimi, pääte ja sijainti

Esimerkistä voi huomata, www-sivun muotoiluun voidaan käyttää useammassa tiedostossa olevia CSS-ohjeita. CSS-ohjeet voidaan linkittää myös eri palvelimesta kuin missä itse HTML-sivun tiedosto on tallennettu. Lisää linkkien käytöstä löytyy esimerkiksi selain-valmistajien www-sivustoilta sekä www-sivustojen tekemiseen liittyvien palvelun tarjoajien www-sivuilta


Scriptin liittäminen - script

Sivustoon voidaan liittää esimerkiksi JavaScript:llä ohjelmoituja pieniä ohjelmia joilla voidaan toteuttaa erilaisia näyttäviäkin toimintoja, esim. kuvagallerioita tai canvas-elementin ohjauksia. JavaScript voi sijaita osana html-tiedostoa tai se voidaan liittää erillisestä tiedostosta html-tiedoston alussa script-elementillä.


  <!DOCTYPE HTML> 
  <html> 
  <head>
   <meta charset="UTF-8">
   <title> WWW-opas </title>
   <link rel="shortcut icon" href="ict.ico" />

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'> </script>
   <script type='text/javascript' src='../kuva_scale.js'> </script>
   <script>
    function omaOhjelma2() {
     document.getElementById("testi2").innerHTML = "Ja teksti on vaihdettu.";
    }
   </script>   
   .


Taulukossa alla script-elementtien selitykset:


Esimerkki Selitys
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'> </script> src -atribuutin määritteenä jquery.min.js tiedoston sijainti Google:n aps-palvelussa.
<script type='text/javascript' src='../kuva_scale.js'> </script> type -atribuutin määrite text/javascript tekstinä JavaSript,
src -atribuutissa tiedoston nimi ja talletuspaikka.
<script>
function omaOhjelma2() {
document.getElementById("testi2").innerHTML = "Ja teksti on vaihdettu.";
}
</script>		 script -elementissä omaOhjelma2() -niminen JavaSript-funktio jota käytetään www-sivulla jossain kohtaa

Taulukossa, alla, lisää script-elementin atribuuteista ja määritteistä.

Atribuutti Määrite Tarkoitus
async async HTML5! Tarkoitettu esimerkiksi script:in suorittamiseen muun sivun vielä latautuessa.
HTML5:ssä koodaus: <script src="async_testi.js" async> </script>
XHTML:ssä koodaus: <script async="async">
(Ei Explorer 9 tai vanhemmissa)
charset esim. UTF-8Käytettävän kirjaimiston asettaminen.
defer defer Antaa sivun sisällön latautua ensin ja sen jälkeen script:it.
<script src="defer_testi.js" defer> </script>
src tiedoston talletuspaikka HTML-tiedostoon liitettävän scriptin tarkka osoite, kansio jonne on liitettävä tiedosto talletettu sekä
avattavan tiedoston nimi päätteineen.
type MIME-tyyppi Minkä tyyppinen liitettävä tiedosto on sekä tarkenne,
määritteenä esim JavaScript:n kohdalla on text/javascript
xml:spacepreserveEi HTML5 !
Mobiileille esim. Anroid:lle tarkoitetut sivustot (XML-koodatut sivustot ?).
<noscript><noscript> Selaimesi ei tue JavaScript:iä ! </noscript>Koska selaimista voi estää JavaSript:n suoritus on hyvä olla keino esittää ilmoitus mahdollisesti www-sivulta puuttuvasta sisällöstä tai jonkin osan toimimattomuudesta.


CSS-muotoilu - style

Sivustoon voidaan linkin avulla liittää CSS-ohjeet, mutta style-elementissä voidaan antaa www-sivu kohtaisia CSS-muotoiluja, muutoin tavoitteena on CSS-muotoilut sijoittaa omaksi tiedostokseen.
Alla eräästä paikallisesta, yhtä www-sivua koskevasta ohjeesta style-elementissä.


  <!DOCTYPE HTML> 
  <html> 
  <head>
   <meta charset="UTF-8">
   <title> WWW-opas </title>
   <link rel="shortcut icon" href="ict.ico" />

   <style>
    .laatikko1 {
     background-color: FFFFFF;
     width: 75%;
     border: 1px solid green;
     padding: 15px;
     margin: 15px;
	 box-shadow: 7px 7px 5px grey;
    }
    .clearfix {
     overflow: auto;
    }
    .loikealle{
     float: right;
    }
    .varjo{
     box-shadow: 7px 7px 5px grey;
    }
   </style>
  </head>   
   .


Talletuspaikka - base

Toisinaan on tarpeen head-elementissä kertoa jonkin tiedoston tarkka talletuspaikka, tämä toteutetaan base-elementillä.

Esimerkki HTML-koodauksesta, base-elementissä kerrotaan erään kuvan tarkka sijainti, jolloin kuva on img-elementillä avattavissa www-sivulle.


  <!DOCTYPE html>
  <html>
  <head>
   <base href="http://www.ideaport.edu.hel.fi/WEB/kuvat/" target="_blank">
  </head>
  <body>
   <p><img src="safari.png" width="24" height="24" alt="Safari_logo"> 
   Safari-logo avataan todellisuudessa osoitteesta:
   "http://www.ideaport.edu.hel.fi/WEB/kuvat/safari.png".

  </body>
  </html>


Atribuutti Määritteet Tarkoitus
href URL-osoite www-sivulle avattavan tiedoston tarkka sijainti.
Kuva voi sijaita esimerkiksi muulla www-sivulla internetissä
target _blank
_parent
_self
_top
kehyksen nimi		 Miten, minne tiedosto avataan:
_blank - uuteen ikkunaan / selaimen välilehteen
_self - samaan kehykseen (ikkunaan)
_parent - samaan kehykseen (?)
_top - uuteen ikkunaan / selaimen välilehteen
kehyksen nimi - nimellä nimettyyn kehykseen


Alla. Esimerkissä avataan div-elementillä toteutettuun laatikkoon kuva salmonplayer-sivustolta. Laatikon muotoiluohjeet on aiemmin esitetty CSS-muotoilu kohdassa esitelty laatikko1-nimisenä. Kuvan tarkka URL-osoite on kopioitavissa klikattaessa www-sivulla kuvaa hiiren oikealla painikkeella.(Sama onnistuu img-elementtilläkin)
Etuna voi lähinnä pitää mahdollisuutta tallettaa suurehkot tiedostot eri www-palvelimeen tai palvelimiin kuin www-sivujen kooditiedostot.







TÄSSÄ KOHTAA KESKEN

Esimerkki Selitys
KOODAUS name -atribuutin määrite "application-name" (tunniste), content -atribuutilla viestitään sivulla olevan www-sovelluksen jonkin HTML Colors-niminen sovellus. Tätä käytetään vain jos sivu on osa web-sovellusta.
KOODAUS name -atribuutin määrite "description" (tunniste), content -atribuutissa kerrotaan kyseessä olevan Pieni www-opas. Sivun kuvaus, jonka hakukone saattaa näyttää tiivistelmänä sivusta.
KOODAUS name -atribuutin määrite "keywords" (tunniste), content -atribuuteilla HTML5, CSS, JavaScript viestitään sivuston avainsanaoista, tällöin esimerkiksi hakukoneet löytävät annetuilla sanoilla www-sivuston. Sivua kuvaavia termejä.
KOODAUS name -atribuutin määrite "autor" (tunniste), content -atribuutissa kerrotaan Joku Gurunen olevan esimerkiksi www-sivuston tekijä. Yleisesti www-sivun yhden tekijän nimi.
KOODAUS name -atribuutin määrite "generator" (tunniste), content -atribuutissa kerrotaan www-sivun tekemiseen käytetyn Notepad++-ohjelmaa. Yleisesti, kertoo sen ohjelman nimen jolla www-sivu on tuotettu.
KOODAUS OPASTETEKSTI

Design and edit © player