Aller au contenu

Le langage HTML/HTML5

Un livre de Wikilivres.

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

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>

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.

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>

Logo

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ètes

[modifier | modifier le wikicode]

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

Attributs obsolètes

[modifier | modifier le wikicode]
  • name sur l'élément <a> pour créer une ancre, remplacé par l'utilisation de l'attribut id sur n'importe quel élément (compatible HTML4 et HTML5).

Nouvelles balises

[modifier | modifier le wikicode]

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

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

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.

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éros

[modifier | modifier le wikicode]

Idée maîtresse

[modifier | modifier le wikicode]

L’arborescence classique est :

  • ./
./scripts
./styles
./assets <-- c'est ici que viennent les images et les sons
./assets/images
<!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>

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.

Cette image illustre un essai de livre interactif pour un didacticiel sur wikibooks. Livre interactif 02 Livre interactif 03