Blogi


HTML5 Ominaisuudet

Uusi HTML5 tuo mukanaan yksinkertaisemman merkkauksen ja mahdollistaa Canvasin avulla jopa Flashin korvaamisen.

Voinko käyttää jo HTML5 ja CSS3-ominaisuuksia?

Kyllä. Itse aloitin uusien ominaisuuksien käytön projekteissani viime vuoden alkupuolella ja nykyään monet selaimet osaa tulkita merkkauksen oikein. W3C -validaattori ei vielä täysin tue HTML5:sta, mutta sillä voi kuitenkin tarkistaa sivut virheiltä. Varsinkin CSS-validaattori herjaa virheellisesti ja sen herjaukset on helposti ohitettavissa laittamalla kaikki CSS3-määritykset erilliseen .css -tiedostoon. Itse en ole kyseistä ohitusta harrastanut, koska en näe siinä mitään väärää jos validaattori herjaa CSS3-ominaisuuksista.

Mitä uusi HTML5-tuo mukanaan?

Ensimmäisenä www-sivujen tekijä törmää uudistuneeseen dokumentin määrittelyyn, mikä hoidetaan vain kahdella sanalla aikaisemmin tehdyn parin rivin sijaan. Seuraavassa koodinpätkässä on normaali HTML4-sivuston rakenne ja sen jälkeen on uusi HTML5-määrittely.

Vanha HTML määrittely

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>HTML4 -sivu</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/scripti.js"></script>

</head>

<body>

</body>
</html>

Uusi HTML5-määrittely

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 - Testisivu</title>

<link rel="stylesheet" href="style.css" />
<script src="js/scripti.js"></script>

</head>

<body>

</body>
</html>

Kuten esimerkeistä näkee, on uusi HTML5 paljon yksinkertaisempi ja nopeampi tapa tehdä sivuja. Tyylitiedostot eivät enää tarvitse tietoa ”type=text/css” ja javascriptin voi liittää ilman ”type=text/javascript” määrittelyä. HTML5 mahdollistaa myös sivuston alueiden nimeämisen, ilman <div id=”…”>. Yleensä on käytetty esimerkiksi seuraavia määrittelyjä:

<div id="header"></div>
<div id="post"></div>
<div id="footer"></div>

Uusi HTML5 mahdollistaa alueiden määrittelyn ilman divejä, tosin CSS-tiedostoon täytyy laittaa vielä ylimääräinen tyyli, sekä sivuilla pitää käyttää javascriptiä, jotta sivusto näkyy oikein kaikissa selaimissa. Uudet määritykset voi tehdä seuraavasti:

...
<title>HTML5 - Testisivu</title>

<!--[if IE]><!--Ladataan HTML5-skriptitiedosto korjaamaan Internet Explorer-->
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<header>Otsikkoteksti</header>

<nav>Navigaatio</nav>

<section>Sisältöä...</section>
<article>Artikkeliosa</article>
<footer>Alaosa, vaikka copyright</footer>
...

HTML-tiedostoon täytyy liittää html5.js javascriptitiedosto ja tyylitiedostoon täytyy laittaa seuraavat asetukset, jotta yllä mainitut määrittelyt näkyvät selaimissa oikein.

header, nav, section, article, footer {display:block;}

Näin on perustiedot käsitelty uudesta HTML5-merkkauksesta ja läpi käydyt esimerkit ovat hyödyllisiä. Kaikkia ei tarvitse käyttää, mutta suosittelen ainakin käyttämään uutta HTML5-sivuston määrittelyä. Lisää oppaita löytää verkosta helposti esimerkiksi googlettamalla ”HTML5”. hyvä HTML5-pohja löytyy sivulta http://html5boilerplate.com/. Suosittelen myös kirjaa HTML5 For Webdesigners (eng).

Sivulta http://www.cuttherope.ie/ löytyvä peli on tehty HTML5:lla käyttäen Canvasia.

Sami

HTML5/CSS3 addikti ja aikamoinen nörtti ns. "true nerd". Työskentelen Haajalla web-suunnittelijana, sekä vapaa-ajalla tutkin aina uusia mahdollisuuksia toteuttaa verkkosivuja.

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

Spammin esto *