Deux types de balises coexistent, les balises "inline" et "block". Mais ce sont vraiment les balises "block" qui structurent les pages. Les balises "inline" apportent des informations supplémentaires. A noter qu’on les appelle ainsi car elles se situent forcément à l’intérieur de balises "block". Je sens que je commence à vous perdre alors un petit exemple et tout va rentrer dans l’ordre.
<p>Bonjour <em>je suis</em> ben</p> <p></p> est de type "block" alors que <em></em> du type "inline". Les balises qui contiennent un / devant sont là, pour fermer les balises. Pourtant certaines balises s’ouvrent et se ferment toutes seules comme des grandes. C’es le cas de la balise image <img />. C’est simple non... Le résultat ci-dessous
Bonjour je suis Ben.
Et le CSS c’est quoi alors ? Et bien le CSS sert à la mise en page, à donner le style comme nous l’avons vu. Je vous ai dit plus haut que le HTML représentait le fond et le CSS la forme ce qui est bien pratique, mais cela n’a pas toujours été le cas. Au début le html et le style associé étaient au sein de la même page voire dans la même balise. Evidemment en cas de modification cela posait beaucoup de problèmes.
Au fait le CSS ça ressemble à cela : Je reprends l’exemple de mon "p"
p color:pink ;
...et voilà toutes les balises de type Paragraphe seront désormais en rose. Trop cool...
Et bien maintenant que vous savez grosso- modo ce que sont le HTML et le CSS on peut passer à la deuxième étape. Les nouveautés du HTML5 et du CSS3.
Histoire de vous déprimer un peu il faut savoir que malgré le fait que l’on n’arrête pas d’en parler, tous les navigateurs ne reconnaissent pas encore ces nouvelles informations. Les Web-developpeurs sont donc obligés de prévoir différents cas de figures et il y en a marre :). Sans compter que certains navigateurs pourtant compatibles HTML5, se distinguent en ne respectant pas certaines règles. J’ai nommé Internet explorer.
Bon allez on y va.
HTML5 contient désormais de nouvelles balises qui facilitent la sémantique. C’est quoi encore ce truc ?.
Et bien les moteurs de recherche grâce à ces nouvelles balises sans même savoir ce qu’est le contenu réel des balises savent de quoi la page est composée. Une entête, un pied de page, un menu, un article, d’ou les nouvelles balises suivantes <header> ; <footer> ; <nav> ; <section> ; <article> ; etc.. Vous avez remarqué je ne les ai pas refermées ; J’aurais dû écrire <header></header>. Avant on utilisait une balise passe-partout que l’on trouve encore très souvent et qui est très pratique car elle peut se substituer aux autres. Ex : on notait en HTML4 <div id="header">.
Autres balises apparues avec le HTML5, les balises <video>et <audio>.
Alors là c’est vraiment important car avant HTML5 pour lire du contenu audio ou vidéo il fallait passer par des programmes tierces à installer sur le navigateur (Mozilla, Chrome etc ). Beaucoup leur reprochaient de ralentir le système. Le plus connu de ces plugins est "Flash", je suis sûr que vous en avez déjà entendu parler. Oui oui Flash. Flash est bien un logiciel d’animation inégalable quoi qu’en dise certains, mais c’est aussi un plugin qui permet aux navigateurs de lire de l’audio, des vidéos, des animations. Et bien désormais si on le souhaite grâce à ces nouvelles balises l’on peut se passer de cette installation.
Comme ci-dessous à l’aide la balise vidéo
<video height="180" width="300" id="ourvideo" controls >
<source src="/http://videos.mozilla.org/serv/webm... ;
<source src="/http://videos.mozilla.org/serv/webm... ;
<source src="/http://videos.mozilla.org/serv/webm... ;
</video>
Comme vous pouvez le constater plusieurs URL de vidéos. Et bien en fonction du navigateur que vous utilisez on choisira celle qui est compatible voire la plus adaptée. Le HTML fait de l’individualisation. Trop fort. En ce qui concerne les animations on utilisera le CSS3 associé ou non au javascript, l’api Canvas de HTML5.
Ah j’allais oublier les nouveaux attributs des balises de formulaires<input>.
Pour un champ de saisi mail on notera <input type="mail"> avant cela n’existait pas et il fallait même vérifier soi-même en javascript que la saisie de l’utilisateur était bien un mail. San oublier les attributs "date", "color" ; "number" ; "range" etc.
Sans oublier l’élément Canvas qui permet de dessiner sur la page HTML aidé en cela par javascript.
Maintenant qu’on a vu les évolutions les plus importantes du HTML abordons certaines du CSS3.
De nouveaux sélecteurs d’attribut :
On pouvait dores et déjà en css2 sélectionner des balises, des "id", des "class" etc. Désormais il est même possible de sélectionner des balises spécifiques en fonction de leurs attributs. Exemple : quelles sont les balises de type <a> qui ont un attribut "href" correspondant à mediafood.org.
Syntaxe d’une balise avec un lien : <a href="/http://www.mediafood.org/tice-pro&a... le lien</a>
Des enrichissements graphiques :
Et bien avant c’était compliqué de faire des boîtes avec des bordures arrondies, désormais avec HTML5 c’est simple ou presque, on utilise la propriété "border-radius" et hop la balise concernée à désormais des coins arrondies. Bon d’accord certains navigateurs pour être compatibles avec certains de ces enrichissements doivent avoir des lignes de codes spécifiques tels que "-moz-border-radius" et "webkit-border-radius". On peut aussi faire des ombres avec "border-shadow" ; "text-shadow". Sans oublier la gestion de l’opacité et de la transparence.
Les webfonts :
La possibilité d’utiliser dans les pages des polices qui ne sont pas installées sur la machine de l’utilisateur avec @font-face. Avant on ne pouvait utiliser que les polices installées sur la machine du lecteur, et comme on ne savait pas lesquellesétaient installées, on était obligés d’utiliser en priorité celles qui étaient installées avec le système d’exploitation. Il est à noter que google propose désormais aussi des polices en ligne que l’on pourra aussi utiliser même si elles ne sont pas installées chez le lecteur.
Pour terminer les API. Alors là je vais être très bref car je n’en n’ai pas encore l’habitude.
Glisser, déposer ; enregistrement local
