~~NOTOC~~
====== HTML : notions de base ======
===== Introduction =====
La première chose importante à savoir sur le **HTML** est la signification des quatre initiales :
**H**yper **T**ext **M**arkup **L**anguage
Le HTML est **un langage de description de documents** (et non pas un langage de programmation !) utilisé pour la publication d'informations sur le Web (World Wide Web).
C'est à Tim Berners-Lee (alors au Cern) que l'on doit, en 1989, la naissance du "World Wide Web" :
l'idée est née dans un mémo où il expliquait comment un système basé sur les liens hypertextes et des ordinateurs connectés entre-eux pouvait aider les chercheurs du Cern à mieux partager leurs informations, et à mieux y accéder.
À partir de 1990, les membres du Cern développent les trois principales technologies du Web : les adresses web (URL), l'Hypertext Transfer Protocol (HTTP) et l' Hypertext Markup Language (HTML).
C'est dans la dynamique de ces travaux que Tim Berners-Lee fonde en 1994 (lors de la conférence internationale du WWW) le **World Wide Web Consortium** (**W3C**) au //Massachusetts Institute of Technology// (MIT) : visant une utilisation universelle du Web, le **W3C** travaille sur des standards et une normalisation globale indépendante des différentes technologies du Web, dont le HTML.
C'est, dans ce contexte, pendant les années 90, que le langage HTML va naitre et évoluer très rapidement jusqu'à une version majeure en 1997 : **HTML 4**. Depuis 2007, évolue une nouvelle révision majeure de l'HTML : **HMTL 5**, dont la finalisation est proche : elle est prévue pour le dernier trimestre 2014. Dans le langage courant, HTML5 désigne souvent un ensemble de technologies Web (HTML5, CSS3 et JavaScript) permettant notamment le développement d'applications.
===== Principe de base =====
**HTML** est donc **un langage de description** qui va s'appuyer sur **un système de balisage** (//dont la syntaxe vient du "**S**tandard **G**eneralized **M**arkup **L**anguage" (**SGML**)//), pour structurer les documents.
==== Des balises (tags) en paire (ouvrante et fermante) ====
............
Avec éventuellement un attribut :
............
Avec éventuellement plusieurs attributs :
............
==== Des balises orphelines (auto-fermantes) ====
Avec éventuellement un ou plusieurs attributs :
Notez que le / de fin n'est pas obligatoire en HTML5 mais il est recommandé
pour signifier qu'il n'y a pas de seconde balise fermante.
===== Structure de base =====
==== Une première page minimaliste ====
Sans surprise, les bases d'un code HTML5 ressemblent beaucoup à celles rédigées à l'aide des précédentes versions HTML 4 et XHTML 1.x... dans un souci de rétro-compatibilité.
Ma première page en HTML5
Bonjour, le monde !
=== ===
Une balise particulière qui a été simplifiée en HTML5 : son rôle est toujours de préciser le type de document qui va suivre, afin de permettre au navigateur de savoir quel langage de la vaste famille SGML il devra interpréter.
=== ... ===
Le DOM (Document Object Model), recommandation du W3C, est une représentation structurée et orientée objet du document, que l'on peut modéliser par un arbre où :
* chaque balise est un noeud de l'arbre ;
* la **racine** de l'arbre est **document** ;
* le **tronc** de l'arbre est la balise html.
digraph ATN {
rankdir=TB;
document[fontsize=8,label="document", shape=rectangle, fixedsize=true, width=.8, height=.15];
html[fontsize=8,label="html", shape=rectangle, fixedsize=true, width=.6, height=.15];
head[fontsize=8,label="head", shape=rectangle, fixedsize=true, width=.6, height=.15];
body[fontsize=8,label="body", shape=rectangle, fixedsize=true, width=.6, height=.15];
document -> html [fontname="Times-Italic", label=""];
html -> body [fontname="Times-Italic", label=""];
html -> head [fontname="Times-Italic", label=""];
}
=== ... ===
Ces balises permettentde délimiter l'en-tête du document qui doit ou peut contenir :
* la précision de l'encodage du document ;
* le titre de la page ;
* des méta-informations diverses ;
* des liens vers des fichiers annexes (notamment de définition de styles) ;
* des scripts (de librairies existantes (telles que jQuery) ou personnels) ;
* ...
Ma première page en HTML5
=== ... ===
Ces balises permettent de délimiter ce que l'on appelle le corps du document autrement dit le texte qui va s'afficher à l'écran, structuré avec une grande variété de balises HTML.
==== De nouvelles balises structurantes avec HTML5 ====
HTML5 apporte un lot de nouvelles balises sémantiques qui permettent
de réduire l'utilisation outrancière des balises div,
au profit de balises aux noms plus explicites.
D'après une étude sur les attributs class et id les plus utilisés en 2005 pour les balises div, il a été décidé d'introduire dans la spécification HTML5, les balises suivantes :
* header : pour définir une section d'introduction d'un article, d'une autre section ou du document entier (en-tête de page).
* footer : pour définir une section de conclusion d'un article, d'une autre section ou du document entier (pied de page).
* nav : pour définir une section possédant des liens de navigation principaux vers des endroits de la page ou vers d'autres pages.
* section : pour définir une section regroupant des contenus sur une même thématique.
* article : pour délimiter une portion autonome de la page, à l'instar d'un article dans un journal.
* aside : pour délimiter des informations complémentaires à un article ou une section, que l'on place généralement "à-côté".
Ces nouvelles balises doivent rendre le code plus lisible,
en évitant d'utiliser des attributs class et id inutiles.
Par exemple :