Le langage HTML/HTML5


La version 5 de HTML est supportée par les navigateurs actuels. Elle apporte plusieurs nouveautés intéressantes.

Le doctypeModifier

En HTML5, le doctype a été réduit au strict minimum. Cette version du langage ne nécessite plus de versions du DOCTYPE comme en HTML 4.0 et XHTML 1.0.

<!DOCTYPE html>

La syntaxeModifier

En HTML5, vous avez le choix entre utiliser une syntaxe SGML (comme HTML 4) ou XML (comme XHTML). Prenez juste garde à être cohérent dans votre choix.

De plus, les balises <style> et <script> n'ont plus besoin systématiquement de l'attribut type. S'il n'est pas précisé, la balise <style> accepte le css par défaut, tandis que la balise <script>, elle, accepte le javascript.

dataModifier

L'attribut "data-"[1] permet de renseigner des données dans les balises HTML, séparées par "-", mais on peut aussi leur affecter des valeurs avec "=".

Exemple :

<div id="introduction" data-introduction data-paragraphe="introduction">
...
</div>
  Le fait de sectionner des data en JavaScript est plus lent que de sélectionner des classes, lui-même plus lent que d'utiliser les id[2].


Balises obsolètesModifier

<center>, <font>, <strike>, <tt>.

Nouvelles balisesModifier

<article>, <aside>, <footer>, <header>, <nav>, <section>.

<canvas>Modifier

La balise <canvas> permet de créer une zone de dessin. On utilise ensuite du JavaScript pour créer/animer celle-ci.

Exemple :

<canvas id="myCanvas" width="300" height="200" />
<script>
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.strokeStyle="#900";
context.strokeRect(20,30,100,50);
</script>

Ce code affichera :  

Cet exemple est basique, mais canvas devrait permettre de créer des animations qui n'étaient avant possibles qu'avec Flash.

Voir aussi

Programmation objet et géométrie#Géométrie avec html5

<audio>Modifier

La balise <audio> permet d'afficher un lecteur audio. L'avantage par rapport aux balises <object> et <embed> est que le fichier est lu directement par le navigateur, il n'y a plus besoin de plugin.

Elle s'utilise comme ceci :

<audio src="monfichier.mp3" autoplay controls loop />

Les attributs autoplay, controls et loop sont facultatifs. Ils permettent respectivement de lancer automatiquement la lecture, d'afficher les boutons lecture/arrêt et de lire la piste en boucle.

Vous pouvez aussi spécifier plusieurs sources, dans différents formats, comme ceci :

<audio>
<source src="monfichier.mp3" />
<source src="monfichier.ogg" />
</audio>

Le navigateur choisira alors le format qui lui convient le mieux.

<video>Modifier

La balise <video> s'utilise comme la balise <audio>, sauf qu'il faut préciser les dimensions de la vidéo, ainsi que le type MIME du fichier :

<video width="360" height="240">
<source src="movie.ogv" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
</video>

Faire un livre dont vous êtes le hérosModifier

Idée maîtresseModifier

L’arborescence classique est :

  • ./
./scripts
./styles
./assets <-- c'est ici que viennent les images et les sons
./assets/images

SourceModifier

<!doctype html5>
<html>
	<!--
		LDVELH(Livre dont vous êtes le héros) -> engine amicaFolio
		+---------------------------------------
		| Cet engin est un single page application
		| cette version de l'engin ne permet de changer qu'un image à la fois par page
		+----------------------------------------------------
		synopsis : j'ai fait cet engin pour une amie (\).(\)
		version : 0.1
		authors : zulad//
	-->
	<head>
		<meta charset="UTF-8" />
		<script src="scripts/jquery-1.11.3.js" ></script>
		<link rel="stylesheet" type="text/css" href="styles/style.css" > </link>
	</head>
	
	<body onload="fillPage(1);" >
		
		<div id="main" />
		
	</body>
	
</html>
<script>
	
// Les données peuvent être modifiées en fonction de l'histoire
	var datas = {
	
		_cpt:1,
		_1:{img:"0_start.svg", txt:"Il est 07h au réveil de Lucie. Si vous voulez vous lever : {{cliquez ici|2}} "},
		_2:{img:"0_bed.svg", txt:"Il était l'heure de se lever. Si vous voulez vous laver : {{cliquez ici|3}} - Si vous voulez vous recoucher : {{cliquez ici|1}}"},
		_3:{img:"2_sdb.svg", txt:"Il était l'heure de se laver. Si vous voulez vous recoucher : {{cliquez ici|1}} - Si vous voulez lire les news : {{cliquez ici|4}}"},
		_4:{img:"3_miroir.svg", txt:"Il était l'heure de regarder les news. Si vous voulez vous coiffer : {{cliquez ici|5}}"},
		_5:{img:"4_miroir.svg", txt:"Il était l'heure de se coiffer"}
		
	};

// Ceci est le noyau de l'application. Il est préférable de ne pas le modifier
	function getMatches(string, regex, index) {
	  index || (index = 1); // default to the first capturing group
	  var matches = [];
	  var match;
	  while (match = regex.exec(string)) {
		matches.push(match[index]);
	  }
	  return matches;
	}

	function fillText(str) {
		var re = new RegExp("(\{\{)([ a-zA-Z0-9|]*)(\}\})", "gm");
		matches = str.match(re);
		
		var matches = getMatches(str, re, 2);
		
		var lnk = Array();
		for (m in matches)
		{
			lnk[m] = matches[m].split("|");
			str = str.replace(matches[m], "<span class='click' onclick='fillPage("+lnk[m][1]+")'>"+lnk[m][0]+"</span>");
			str = str.replace("{{","").replace("}}","");
		}
		
		return str;
	}
	
	function fillPage(page) {
		if(!page) page = 1;
		var content_1 = '<table id="tbl" width="480"> \
				<tr><td width="10"><img id="imgTrg" src="assets/images/'+eval('datas._'+page+'.img')+'" onclick="fillPage(target);" /></td></tr> \
				<tr><td id="txt">'+fillText(eval('datas._'+page+'.txt'))+'<td/></tr>  \
			</table>';  $("#main").html(content_1); eval(datas._cpt = page);
	}
	
</script>

RésultatModifier

Le résultat HTML peut être porté sur tablette ou smartphone. J'ai prévu les screenshots suivant pour un petit web serial sur smartphone.

     

RéférencesModifier